chore(build): 同步构建产物（site/** + sitemap 公网基址）——含本任务接线后的 data.json/data.js/逐端页，以及并行会话（S10/S9-P3）在途工作的生成物；其源码文件仍留在工作区未提交
This commit is contained in:
aurora-admin
@@ -1 +1,39 @@
|
||||
{"slug":"treetable","mode":"single","examples":[{"id":"treetable-ex-1","title":"基础用法","titleSrc":"","desc":"","html":"<div class=\"demo\">\n <h1>Kole UI · TreeTable 组件（纯 H5）</h1>\n <p class=\"sub\">对齐 TreeTable 规范：层级缩进16px/级、展开/折叠箭头、父级汇总（子节点合计）、选择父级联动子级</p>\n <div class=\"kole-tt\" role=\"table\">\n <table>\n <thead>\n <tr>\n <th class=\"col-selection\" style=\"width:48px\">\n <input class=\"tt-check\" id=\"ttAll\" type=\"checkbox\" />\n </th>\n <th>部门 / 人员</th>\n <th class=\"align-right\">人数</th>\n <th class=\"align-right\">预算(万)</th>\n </tr>\n </thead>\n <tbody id=\"ttBody\"></tbody>\n <tfoot>\n <tr>\n <td></td>\n <td>合计</td>\n <td class=\"align-right\" id=\"sumCount\">0</td>\n <td class=\"align-right\" id=\"sumBudget\">0</td>\n </tr>\n </tfoot>\n </table>\n </div>\n</div>","preview":{"show":[[0]],"hide":[],"mode":"single"},"previewSafe":true,"previewUnsafeReasons":[],"source":"demo-mapped","code":{"html":"<h1>Kole UI · TreeTable 组件（纯 H5）</h1>\n<p>对齐 TreeTable 规范：层级缩进16px/级、展开/折叠箭头、父级汇总（子节点合计）、选择父级联动子级</p>\n<div class=\"kole-tt\" role=\"table\">\n <table>\n <thead>\n <tr>\n <th class=\"col-selection\" style=\"width:48px\">\n <input class=\"tt-check\" id=\"ttAll\" type=\"checkbox\" />\n </th>\n <th>部门 / 人员</th>\n <th class=\"align-right\">人数</th>\n <th class=\"align-right\">预算(万)</th>\n </tr>\n </thead>\n <tbody></tbody>\n <tfoot>\n <tr>\n <td></td>\n <td>合计</td>\n <td class=\"align-right\">0</td>\n <td class=\"align-right\">0</td>\n </tr>\n </tfoot>\n </table>\n</div>","jsx":"import { KoleTreeTable } from 'kole-ui/react';\n\n<>\n<KoleTreeTable selectable role=\"table\">部门 / 人员 人数 预算(万) 合计 0</KoleTreeTable>\n</>","vue3":"import { KoleTreeTable } from 'kole-ui/vue3';\n\n<template>\n<KoleTreeTable selectable role=\"table\">部门 / 人员 人数 预算(万) 合计 0</KoleTreeTable>\n</template>","vue2":"import { KoleTreeTable } from 'kole-ui/vue2';\n\n<template>\n<KoleTreeTable selectable role=\"table\">部门 / 人员 人数 预算(万) 合计 0</KoleTreeTable>\n</template>"},"notes":[]}]}
|
||||
{
|
||||
"slug": "treetable",
|
||||
"curated": true,
|
||||
"mode": "single",
|
||||
"examples": [
|
||||
{
|
||||
"id": "treetable-ex-1",
|
||||
"title": "基础用法",
|
||||
"titleSrc": "",
|
||||
"desc": "",
|
||||
"html": "<div class=\"demo\">\n <h1>Kole UI · TreeTable 组件（纯 H5）</h1>\n <p class=\"sub\">对齐 TreeTable 规范：层级缩进16px/级、展开/折叠箭头、父级汇总（子节点合计）、选择父级联动子级</p>\n <div class=\"kole-tt\" role=\"table\">\n <table>\n <thead>\n <tr>\n <th class=\"col-selection\" style=\"width:48px\">\n <input class=\"tt-check\" id=\"ttAll\" type=\"checkbox\" />\n </th>\n <th>部门 / 人员</th>\n <th class=\"align-right\">人数</th>\n <th class=\"align-right\">预算(万)</th>\n </tr>\n </thead>\n <tbody id=\"ttBody\"></tbody>\n <tfoot>\n <tr>\n <td></td>\n <td>合计</td>\n <td class=\"align-right\" id=\"sumCount\">0</td>\n <td class=\"align-right\" id=\"sumBudget\">0</td>\n </tr>\n </tfoot>\n </table>\n </div>\n</div>",
|
||||
"preview": {
|
||||
"show": [
|
||||
[
|
||||
0
|
||||
]
|
||||
],
|
||||
"hide": [],
|
||||
"mode": "single"
|
||||
},
|
||||
"previewSafe": true,
|
||||
"previewUnsafeReasons": [],
|
||||
"source": "curated",
|
||||
"code": {
|
||||
"html": "<h1>Kole UI · TreeTable 组件（纯 H5）</h1>\n<p>对齐 TreeTable 规范：层级缩进16px/级、展开/折叠箭头、父级汇总（子节点合计）、选择父级联动子级</p>\n<div class=\"kole-tt\" role=\"table\">\n <table>\n <thead>\n <tr>\n <th class=\"col-selection\" style=\"width:48px\">\n <input class=\"tt-check\" id=\"ttAll\" type=\"checkbox\" />\n </th>\n <th>部门 / 人员</th>\n <th class=\"align-right\">人数</th>\n <th class=\"align-right\">预算(万)</th>\n </tr>\n </thead>\n <tbody></tbody>\n <tfoot>\n <tr>\n <td></td>\n <td>合计</td>\n <td class=\"align-right\">0</td>\n <td class=\"align-right\">0</td>\n </tr>\n </tfoot>\n </table>\n</div>",
|
||||
"jsx": "import { useState } from 'react';\nimport { KoleTreeTable } from 'kole-ui/react';\n\nconst COLUMNS = [\n { key: 'name', title: '部门 / 人员' },\n { key: 'count', title: '人数', align: 'right' },\n { key: 'budget', title: '预算(万)', align: 'right' }\n];\nconst DATA = [\n { key: 'tech', name: '技术中心', children: [\n { key: 'fe', name: '前端组', count: 12, budget: 80 },\n { key: 'be', name: '后端组', count: 18, budget: 120 }\n ] },\n { key: 'product', name: '产品中心', children: [\n { key: 'pm', name: '产品组', count: 8, budget: 60 },\n { key: 'ux', name: '设计组', count: 6, budget: 40 }\n ] }\n];\n\nfunction DeptTreeTable() {\n const [selectedKeys, setSelectedKeys] = useState([]);\n return (\n <KoleTreeTable\n columns={COLUMNS}\n data={DATA}\n selectable\n summaryColumn=\"budget\"\n summary={{ label: '合计' }}\n defaultExpandedKeys={['tech', 'product']}\n selectedKeys={selectedKeys}\n onSelectionChange={setSelectedKeys}\n />\n );\n}",
|
||||
"vue3": "<template>\n <KoleTreeTable\n :columns=\"COLUMNS\"\n :data=\"DATA\"\n selectable\n summary-column=\"budget\"\n :summary=\"{ label: '合计' }\"\n :default-expanded-keys=\"['tech', 'product']\"\n v-model:selected-keys=\"selectedKeys\"\n />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleTreeTable } from 'kole-ui/vue3';\n\nconst selectedKeys = ref([]);\nconst COLUMNS = [\n { key: 'name', title: '部门 / 人员' },\n { key: 'count', title: '人数', align: 'right' },\n { key: 'budget', title: '预算(万)', align: 'right' }\n];\nconst DATA = [\n { key: 'tech', name: '技术中心', children: [\n { key: 'fe', name: '前端组', count: 12, budget: 80 },\n { key: 'be', name: '后端组', count: 18, budget: 120 }\n ] },\n { key: 'product', name: '产品中心', children: [\n { key: 'pm', name: '产品组', count: 8, budget: 60 },\n { key: 'ux', name: '设计组', count: 6, budget: 40 }\n ] }\n];\n</script>",
|
||||
"vue2": "<template>\n <KoleTreeTable\n :columns=\"COLUMNS\"\n :data=\"DATA\"\n selectable\n summary-column=\"budget\"\n :summary=\"{ label: '合计' }\"\n :default-expanded-keys=\"['tech', 'product']\"\n :selected-keys=\"selectedKeys\"\n @update:selectedKeys=\"selectedKeys = $event\"\n />\n</template>\n\n<script>\nimport { KoleTreeTable } from 'kole-ui/vue2';\nexport default {\n components: { KoleTreeTable },\n data() {\n return {\n selectedKeys: [],\n COLUMNS: [\n { key: 'name', title: '部门 / 人员' },\n { key: 'count', title: '人数', align: 'right' },\n { key: 'budget', title: '预算(万)', align: 'right' }\n ],\n DATA: [\n { key: 'tech', name: '技术中心', children: [\n { key: 'fe', name: '前端组', count: 12, budget: 80 },\n { key: 'be', name: '后端组', count: 18, budget: 120 }\n ] },\n { key: 'product', name: '产品中心', children: [\n { key: 'pm', name: '产品组', count: 8, budget: 60 },\n { key: 'ux', name: '设计组', count: 6, budget: 40 }\n ] }\n ]\n };\n }\n};\n</script>",
|
||||
"tsx": "import { useState } from 'react';\nimport { KoleTreeTable } from 'kole-ui/react';\n\nconst COLUMNS = [\n { key: 'name', title: '部门 / 人员' },\n { key: 'count', title: '人数', align: 'right' },\n { key: 'budget', title: '预算(万)', align: 'right' }\n];\nconst DATA = [\n { key: 'tech', name: '技术中心', children: [\n { key: 'fe', name: '前端组', count: 12, budget: 80 },\n { key: 'be', name: '后端组', count: 18, budget: 120 }\n ] },\n { key: 'product', name: '产品中心', children: [\n { key: 'pm', name: '产品组', count: 8, budget: 60 },\n { key: 'ux', name: '设计组', count: 6, budget: 40 }\n ] }\n];\n\nfunction DeptTreeTable(): JSX.Element {\n const [selectedKeys, setSelectedKeys] = useState<unknown[]>([]);\n return (\n <KoleTreeTable\n columns={COLUMNS}\n data={DATA}\n selectable\n summaryColumn=\"budget\"\n summary={{ label: '合计' }}\n defaultExpandedKeys={['tech', 'product']}\n selectedKeys={selectedKeys}\n onSelectionChange={setSelectedKeys}\n />\n );\n}\n\nexport default DeptTreeTable;",
|
||||
"vue3ts": "<template>\n\n <KoleTreeTable\n :columns=\"COLUMNS\"\n :data=\"DATA\"\n selectable\n summary-column=\"budget\"\n :summary=\"{ label: '合计' }\"\n :default-expanded-keys=\"['tech', 'product']\"\n v-model:selected-keys=\"selectedKeys\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleTreeTable } from 'kole-ui/vue3';\n\nconst selectedKeys = ref<unknown[]>([]);\nconst COLUMNS = [\n { key: 'name', title: '部门 / 人员' },\n { key: 'count', title: '人数', align: 'right' },\n { key: 'budget', title: '预算(万)', align: 'right' }\n];\nconst DATA = [\n { key: 'tech', name: '技术中心', children: [\n { key: 'fe', name: '前端组', count: 12, budget: 80 },\n { key: 'be', name: '后端组', count: 18, budget: 120 }\n ] },\n { key: 'product', name: '产品中心', children: [\n { key: 'pm', name: '产品组', count: 8, budget: 60 },\n { key: 'ux', name: '设计组', count: 6, budget: 40 }\n ] }\n];\n</script>",
|
||||
"vue2ts": "<template>\n\n <KoleTreeTable\n :columns=\"COLUMNS\"\n :data=\"DATA\"\n selectable\n summary-column=\"budget\"\n :summary=\"{ label: '合计' }\"\n :default-expanded-keys=\"['tech', 'product']\"\n :selected-keys=\"selectedKeys\"\n @update:selectedKeys=\"selectedKeys = $event\"\n />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleTreeTable } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleTreeTable },\n data(): Record<string, unknown> {\n return {\n selectedKeys: [],\n COLUMNS: [\n { key: 'name', title: '部门 / 人员' },\n { key: 'count', title: '人数', align: 'right' },\n { key: 'budget', title: '预算(万)', align: 'right' }\n ],\n DATA: [\n { key: 'tech', name: '技术中心', children: [\n { key: 'fe', name: '前端组', count: 12, budget: 80 },\n { key: 'be', name: '后端组', count: 18, budget: 120 }\n ] },\n { key: 'product', name: '产品中心', children: [\n { key: 'pm', name: '产品组', count: 8, budget: 60 },\n { key: 'ux', name: '设计组', count: 6, budget: 40 }\n ] }\n ]\n };\n }\n};\n</script>"
|
||||
},
|
||||
"notes": [
|
||||
"依据 frameworks/TreeTable.html 第 53-62 行的 treeData（tech/product 两级，叶子带 count、budget）与第 64 行 expanded = [\"tech\",\"product\"]，表头三列标题取自第 41-43 行的「部门 / 人员」「人数」「预算(万)」。",
|
||||
"列定义与汇总列对应四端实现：columns / summaryColumn（frameworks/TreeTable.jsx 第 25-34 行参数表、frameworks/TreeTable.vue3.vue 第 55-63 行 defineProps），父级汇总即 leafSum，见 TreeTable.jsx 第 14 行。"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user