chore(build): 同步构建产物（site/** + sitemap 公网基址）——含本任务接线后的 data.json/data.js/逐端页，以及并行会话（S10/S9-P3）在途工作的生成物；其源码文件仍留在工作区未提交
This commit is contained in:
aurora-admin
@@ -1 +1,40 @@
|
||||
{"slug":"dropdown","mode":"single","examples":[{"id":"dropdown-ex-1","title":"基础用法","titleSrc":"","desc":"","html":"<div class=\"demo\">\n <h1>Kole UI · Dropdown 组件（纯 H5）</h1>\n <p class=\"sub\">对齐 Dropdown 规范：菜单项高32px、内边距左右12px、悬停 #F5F7FA、危险项 #CF1322、面板圆角6px/阴影中/最小宽120px</p>\n <div class=\"kole-dropdown\" id=\"dd\">\n <button class=\"kole-dropdown-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\" onclick=\"toggle()\">操作 ▾</button>\n <div class=\"kole-dropdown-panel\" hidden>\n <div class=\"kole-dropdown-item\" role=\"menuitem\" tabindex=\"0\" data-key=\"edit\">\n <span class=\"ico\">✎</span>\n 编辑\n </div>\n <div class=\"kole-dropdown-item\" role=\"menuitem\" tabindex=\"0\" data-key=\"copy\">复制</div>\n <div class=\"kole-dropdown-divider\"></div>\n <div class=\"kole-dropdown-item is-disabled\" role=\"menuitem\" tabindex=\"0\" style=\"pointer-events:none;color:var(--color-text-placeholder)\" data-key=\"disable\">不可用的项</div>\n <div class=\"kole-dropdown-item is-danger\" role=\"menuitem\" tabindex=\"0\" data-key=\"delete\">删除</div>\n </div>\n </div>\n</div>","preview":{"show":[[0]],"hide":[],"mode":"single"},"previewSafe":true,"previewUnsafeReasons":[],"source":"api-derived","code":{"html":"<h1>Kole UI · Dropdown 组件（纯 H5）</h1>\n<p>对齐 Dropdown 规范：菜单项高32px、内边距左右12px、悬停 #F5F7FA、危险项 #CF1322、面板圆角6px/阴影中/最小宽120px</p>\n<div class=\"kole-dropdown\">\n <button class=\"kole-dropdown-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\" onclick=\"toggle()\">操作 ▾</button>\n <div class=\"kole-dropdown-panel\" hidden>\n <div class=\"kole-dropdown-item\" role=\"menuitem\" tabindex=\"0\">\n <span>✎</span>\n 编辑\n </div>\n <div class=\"kole-dropdown-item\" role=\"menuitem\" tabindex=\"0\">复制</div>\n <div class=\"kole-dropdown-divider\"></div>\n <div class=\"kole-dropdown-item is-disabled\" role=\"menuitem\" tabindex=\"0\" style=\"pointer-events:none;color:var(--color-text-placeholder)\">不可用的项</div>\n <div class=\"kole-dropdown-item is-danger\" role=\"menuitem\" tabindex=\"0\">删除</div>\n </div>\n</div>","jsx":"import { KoleDropdown } from 'kole-ui/react';\n\n<KoleDropdown />","vue3":"<template>\n <KoleDropdown />\n</template>\n\n<script setup>\nimport { KoleDropdown } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n <KoleDropdown />\n</template>\n\n<script>\nimport { KoleDropdown } from 'kole-ui/vue2';\nexport default { components: { KoleDropdown } };\n</script>"},"notes":["演示页未含可映射的调用标记，本片段依据组件 API 表推导"]}]}
|
||||
{
|
||||
"slug": "dropdown",
|
||||
"mode": "single",
|
||||
"examples": [
|
||||
{
|
||||
"id": "dropdown-ex-1",
|
||||
"title": "基础用法",
|
||||
"titleSrc": "",
|
||||
"desc": "",
|
||||
"html": "<div class=\"demo\">\n <h1>Kole UI · Dropdown 组件（纯 H5）</h1>\n <p class=\"sub\">对齐 Dropdown 规范：菜单项高32px、内边距左右12px、悬停 #F5F7FA、危险项 #CF1322、面板圆角6px/阴影中/最小宽120px</p>\n <div class=\"kole-dropdown\" id=\"dd\">\n <button class=\"kole-dropdown-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\" onclick=\"toggle()\">操作 ▾</button>\n <div class=\"kole-dropdown-panel\" hidden>\n <div class=\"kole-dropdown-item\" role=\"menuitem\" tabindex=\"0\" data-key=\"edit\">\n <span class=\"ico\">✎</span>\n 编辑\n </div>\n <div class=\"kole-dropdown-item\" role=\"menuitem\" tabindex=\"0\" data-key=\"copy\">复制</div>\n <div class=\"kole-dropdown-divider\"></div>\n <div class=\"kole-dropdown-item is-disabled\" role=\"menuitem\" tabindex=\"0\" style=\"pointer-events:none;color:var(--color-text-placeholder)\" data-key=\"disable\">不可用的项</div>\n <div class=\"kole-dropdown-item is-danger\" role=\"menuitem\" tabindex=\"0\" data-key=\"delete\">删除</div>\n </div>\n </div>\n</div>",
|
||||
"preview": {
|
||||
"show": [
|
||||
[
|
||||
0
|
||||
]
|
||||
],
|
||||
"hide": [],
|
||||
"mode": "single"
|
||||
},
|
||||
"previewSafe": true,
|
||||
"previewUnsafeReasons": [],
|
||||
"source": "curated",
|
||||
"code": {
|
||||
"html": "<h1>Kole UI · Dropdown 组件（纯 H5）</h1>\n<p>对齐 Dropdown 规范：菜单项高32px、内边距左右12px、悬停 #F5F7FA、危险项 #CF1322、面板圆角6px/阴影中/最小宽120px</p>\n<div class=\"kole-dropdown\">\n <button class=\"kole-dropdown-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\" onclick=\"toggle()\">操作 ▾</button>\n <div class=\"kole-dropdown-panel\" hidden>\n <div class=\"kole-dropdown-item\" role=\"menuitem\" tabindex=\"0\">\n <span>✎</span>\n 编辑\n </div>\n <div class=\"kole-dropdown-item\" role=\"menuitem\" tabindex=\"0\">复制</div>\n <div class=\"kole-dropdown-divider\"></div>\n <div class=\"kole-dropdown-item is-disabled\" role=\"menuitem\" tabindex=\"0\" style=\"pointer-events:none;color:var(--color-text-placeholder)\">不可用的项</div>\n <div class=\"kole-dropdown-item is-danger\" role=\"menuitem\" tabindex=\"0\">删除</div>\n </div>\n</div>",
|
||||
"jsx": "import { useState } from 'react';\nimport { KoleDropdown } from 'kole-ui/react';\n\nconst items = [\n { key: 'edit', label: '编辑', icon: '✎' },\n { key: 'copy', label: '复制' },\n { divider: true },\n { key: 'disable', label: '不可用的项', disabled: true },\n { key: 'delete', label: '删除', danger: true },\n];\n\nexport default function Demo() {\n const [picked, setPicked] = useState('');\n\n // 触发器文案走 trigger；divider / disabled / danger / icon 由 items 描述\n return (\n <KoleDropdown items={items} trigger=\"操作 ▾\" onSelect={(key) => setPicked(String(key))} />\n );\n}",
|
||||
"vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleDropdown } from 'kole-ui/vue3';\n\nconst items = [\n { key: 'edit', label: '编辑', icon: '✎' },\n { key: 'copy', label: '复制' },\n { divider: true },\n { key: 'disable', label: '不可用的项', disabled: true },\n { key: 'delete', label: '删除', danger: true },\n];\n\nconst picked = ref('');\nfunction onSelect(key) { picked.value = String(key); }\n</script>\n\n<template>\n <!-- 触发器文案走默认插槽；divider / disabled / danger / icon 由 items 描述 -->\n <KoleDropdown :items=\"items\" @select=\"onSelect\">操作 ▾</KoleDropdown>\n</template>",
|
||||
"vue2": "<template>\n <KoleDropdown :items=\"items\" @select=\"onSelect\">操作 ▾</KoleDropdown>\n</template>\n\n<script>\nimport { KoleDropdown } from 'kole-ui/vue2';\n\nconst items = [\n { key: 'edit', label: '编辑', icon: '✎' },\n { key: 'copy', label: '复制' },\n { divider: true },\n { key: 'disable', label: '不可用的项', disabled: true },\n { key: 'delete', label: '删除', danger: true },\n];\n\nexport default {\n name: 'DropdownDemo',\n components: { KoleDropdown },\n data() {\n return { items, picked: '' };\n },\n methods: {\n onSelect(key) { this.picked = String(key); },\n },\n};\n</script>",
|
||||
"tsx": "import { useState } from 'react';\nimport { KoleDropdown } from 'kole-ui/react';\n\ninterface DropdownItem {\n key?: string;\n label?: string;\n icon?: string;\n disabled?: boolean;\n danger?: boolean;\n divider?: boolean;\n}\n\nconst items: ReadonlyArray<DropdownItem> = [\n { key: 'edit', label: '编辑', icon: '✎' },\n { key: 'copy', label: '复制' },\n { divider: true },\n { key: 'disable', label: '不可用的项', disabled: true },\n { key: 'delete', label: '删除', danger: true },\n];\n\nconst trigger: string = '操作 ▾';\n\nexport default function DropdownDemo(): JSX.Element {\n const [picked, setPicked] = useState<string>('');\n\n // 触发器文案走 trigger；divider / disabled / danger / icon 由 items 描述\n return (\n <KoleDropdown items={items} trigger={trigger} onSelect={(key: string) => setPicked(String(key))} />\n );\n}",
|
||||
"vue3ts": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KoleDropdown } from 'kole-ui/vue3';\n\ninterface DropdownItem {\n key?: string;\n label?: string;\n icon?: string;\n disabled?: boolean;\n danger?: boolean;\n divider?: boolean;\n}\n\nconst items: ReadonlyArray<DropdownItem> = [\n { key: 'edit', label: '编辑', icon: '✎' },\n { key: 'copy', label: '复制' },\n { divider: true },\n { key: 'disable', label: '不可用的项', disabled: true },\n { key: 'delete', label: '删除', danger: true },\n];\n\nconst picked = ref<string>('');\nfunction onSelect(key: string): void {\n picked.value = String(key);\n}\n</script>\n\n<template>\n <!-- 触发器文案走默认插槽；divider / disabled / danger / icon 由 items 描述 -->\n <KoleDropdown :items=\"items\" @select=\"onSelect\">操作 ▾</KoleDropdown>\n</template>",
|
||||
"vue2ts": "<template>\n <div>\n <KoleDropdown :items=\"items\" @select=\"onSelect\">操作 ▾</KoleDropdown>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleDropdown } from 'kole-ui/vue2';\n\ninterface DropdownItem {\n key?: string;\n label?: string;\n icon?: string;\n disabled?: boolean;\n danger?: boolean;\n divider?: boolean;\n}\n\nconst items: ReadonlyArray<DropdownItem> = [\n { key: 'edit', label: '编辑', icon: '✎' },\n { key: 'copy', label: '复制' },\n { divider: true },\n { key: 'disable', label: '不可用的项', disabled: true },\n { key: 'delete', label: '删除', danger: true },\n];\n\nexport default Vue.extend({\n name: 'DropdownDemo',\n components: { KoleDropdown },\n data(): { items: ReadonlyArray<DropdownItem>; picked: string } {\n return { items, picked: '' };\n },\n methods: {\n onSelect(key: string): void {\n this.picked = String(key);\n },\n },\n});\n</script>"
|
||||
},
|
||||
"notes": [
|
||||
"依据 frameworks/Dropdown.html:41-47 的触发按钮「操作 ▾」与五个菜单项（data-key=edit/copy/disable/delete、✎ 图标、divider、is-disabled、is-danger）",
|
||||
"items 形参见 Dropdown.jsx 注释与 Dropdown.vue3.vue defineProps；触发器文案在 Vue 端走默认插槽（Dropdown.vue3.vue 的 <slot>操作</slot>）",
|
||||
"TS 形态依据 TS-VARIANTS.md：tsx 用 useState<string> + interface DropdownItem（divider/disabled/danger 见 Dropdown 实现与 items 语义）；vue3ts/vue2ts 用 <script lang=\"ts\"> + onSelect(key: string): void；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）"
|
||||
]
|
||||
}
|
||||
],
|
||||
"curated": true
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user