105 lines
14 KiB
JSON
105 lines
14 KiB
JSON
{
|
||
"slug": "employeecard",
|
||
"mode": "scenarios",
|
||
"examples": [
|
||
{
|
||
"id": "employeecard-ex-1",
|
||
"title": "员工卡片 EmployeeCard 示例 1",
|
||
"titleSrc": "",
|
||
"desc": "",
|
||
"html": "<div class=\"kole-emp-card\">\n <div class=\"kole-emp-actions\">\n <button onclick=\"alert('发消息')\">发消息</button>\n <button onclick=\"alert('查看详情')\">详情</button>\n <button onclick=\"alert('编辑')\">编辑</button>\n </div>\n <div class=\"kole-emp-top\">\n <div class=\"kole-emp-avatar\">张</div>\n <div class=\"kole-emp-name\">\n 张伟\n <span class=\"kole-emp-status active\">在职</span>\n </div>\n <div class=\"kole-emp-id\">工号：E1001</div>\n </div>\n <div class=\"kole-emp-meta\">\n 部门：技术中心 · 前端组\n <br />\n 职位：高级前端工程师\n </div>\n <div class=\"kole-emp-tags\">\n <span class=\"kole-emp-tag\">React</span>\n <span class=\"kole-emp-tag\">TypeScript</span>\n <span class=\"kole-emp-tag\">架构</span>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
2,
|
||
0
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2,
|
||
1
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-emp-card\">\n <div class=\"kole-emp-actions\">\n <button onclick=\"alert('发消息')\">发消息</button>\n <button onclick=\"alert('查看详情')\">详情</button>\n <button onclick=\"alert('编辑')\">编辑</button>\n </div>\n <div class=\"kole-emp-top\">\n <div class=\"kole-emp-avatar\">张</div>\n <div class=\"kole-emp-name\">\n 张伟\n <span class=\"kole-emp-status active\">在职</span>\n </div>\n <div class=\"kole-emp-id\">工号：E1001</div>\n </div>\n <div class=\"kole-emp-meta\">\n 部门：技术中心 · 前端组\n <br />\n 职位：高级前端工程师\n </div>\n <div class=\"kole-emp-tags\">\n <span class=\"kole-emp-tag\">React</span>\n <span class=\"kole-emp-tag\">TypeScript</span>\n <span class=\"kole-emp-tag\">架构</span>\n </div>\n</div>",
|
||
"jsx": "import { KoleEmployeeCard } from 'kole-ui/react';\n\nconst employee = {\n name: '张伟',\n empId: 'E1001',\n dept: '技术中心 · 前端组',\n position: '高级前端工程师',\n status: 'active',\n tags: ['React', 'TypeScript', '架构'],\n};\n\n// 悬停卡片右上角出现「发消息 / 详情 / 编辑」，对应 emits message/view/edit\n<KoleEmployeeCard\n employee={employee}\n onMessage={(e) => console.log('发消息', e)}\n onView={(e) => console.log('详情', e)}\n onEdit={(e) => console.log('编辑', e)}\n/>",
|
||
"vue3": "<script setup>\nimport { KoleEmployeeCard } from 'kole-ui/vue3';\n\nconst employee = {\n name: '张伟',\n empId: 'E1001',\n dept: '技术中心 · 前端组',\n position: '高级前端工程师',\n status: 'active',\n tags: ['React', 'TypeScript', '架构'],\n};\n\nfunction onEdit(e) { console.log('编辑', e); }\n</script>\n\n<template>\n <!-- 在职状态；悬停卡片出现快捷操作，@edit 等对应 emits -->\n <KoleEmployeeCard :employee=\"employee\" @message=\"onEdit\" @view=\"onEdit\" @edit=\"onEdit\" />\n</template>",
|
||
"vue2": "<template>\n <KoleEmployeeCard :employee=\"employee\" @message=\"onEdit\" @view=\"onEdit\" @edit=\"onEdit\" />\n</template>\n\n<script>\nimport { KoleEmployeeCard } from 'kole-ui/vue2';\n\nconst employee = {\n name: '张伟',\n empId: 'E1001',\n dept: '技术中心 · 前端组',\n position: '高级前端工程师',\n status: 'active',\n tags: ['React', 'TypeScript', '架构'],\n};\n\nexport default {\n name: 'EmployeeCardActiveDemo',\n components: { KoleEmployeeCard },\n data() { return { employee }; },\n methods: {\n onEdit(e) { console.log('编辑', e); },\n },\n};\n</script>",
|
||
"tsx": "import { KoleEmployeeCard } from 'kole-ui/react';\n\ntype EmployStatus = 'active' | 'left';\ninterface Employee {\n name: string;\n empId: string;\n dept: string;\n position: string;\n status: EmployStatus;\n tags: ReadonlyArray<string>;\n phone?: string;\n email?: string;\n}\n\nconst employee: Employee = {\n name: '张伟',\n empId: 'E1001',\n dept: '技术中心 · 前端组',\n position: '高级前端工程师',\n status: 'active',\n tags: ['React', 'TypeScript', '架构'],\n};\n\nfunction log(action: string, e: Employee): void {\n console.log(action, e);\n}\n\n// 悬停卡片右上角出现「发消息 / 详情 / 编辑」，对应 emits message/view/edit\n<KoleEmployeeCard\n employee={employee}\n onMessage={(e: Employee) => log('发消息', e)}\n onView={(e: Employee) => log('详情', e)}\n onEdit={(e: Employee) => log('编辑', e)}\n/>",
|
||
"vue3ts": "<script setup lang=\"ts\">\nimport { KoleEmployeeCard } from 'kole-ui/vue3';\n\ntype EmployStatus = 'active' | 'left';\ninterface Employee {\n name: string;\n empId: string;\n dept: string;\n position: string;\n status: EmployStatus;\n tags: ReadonlyArray<string>;\n phone?: string;\n email?: string;\n}\n\nconst employee: Employee = {\n name: '张伟',\n empId: 'E1001',\n dept: '技术中心 · 前端组',\n position: '高级前端工程师',\n status: 'active',\n tags: ['React', 'TypeScript', '架构'],\n};\n\nfunction onEdit(e: Employee): void {\n console.log('编辑', e);\n}\n</script>\n\n<template>\n <!-- 在职状态；悬停卡片出现快捷操作，@edit 等对应 emits -->\n <KoleEmployeeCard :employee=\"employee\" @message=\"onEdit\" @view=\"onEdit\" @edit=\"onEdit\" />\n</template>",
|
||
"vue2ts": "<template>\n <div>\n <KoleEmployeeCard :employee=\"employee\" @message=\"onEdit\" @view=\"onEdit\" @edit=\"onEdit\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleEmployeeCard } from 'kole-ui/vue2';\n\ntype EmployStatus = 'active' | 'left';\ninterface Employee {\n name: string;\n empId: string;\n dept: string;\n position: string;\n status: EmployStatus;\n tags: ReadonlyArray<string>;\n phone?: string;\n email?: string;\n}\n\nconst employee: Employee = {\n name: '张伟',\n empId: 'E1001',\n dept: '技术中心 · 前端组',\n position: '高级前端工程师',\n status: 'active',\n tags: ['React', 'TypeScript', '架构'],\n};\n\nexport default Vue.extend({\n name: 'EmployeeCardActiveDemo',\n components: { KoleEmployeeCard },\n data(): { employee: Employee } {\n return { employee };\n },\n methods: {\n onEdit(e: Employee): void {\n console.log('编辑', e);\n },\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/EmployeeCard.html:38-57 第一张卡片（张伟 / E1001 / 技术中心 · 前端组 / 高级前端工程师 / 在职 / React·TypeScript·架构）",
|
||
"employee 对象字段与 showContact 见 EmployeeCard.jsx 注释与 EmployeeCard.vue3.vue defineProps；三个操作按钮对应 emits message/view/edit",
|
||
"TS 形态依据 TS-VARIANTS.md：tsx 用 type EmployStatus 字面量联合 + interface Employee，事件形参标 Employee；vue3ts/vue2ts 用 <script lang=\"ts\"> + onEdit(e: Employee): void；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）"
|
||
]
|
||
},
|
||
{
|
||
"id": "employeecard-ex-2",
|
||
"title": "员工卡片 EmployeeCard 示例 2",
|
||
"titleSrc": "",
|
||
"desc": "",
|
||
"html": "<div class=\"kole-emp-card\">\n <div class=\"kole-emp-actions\">\n <button onclick=\"alert('发消息')\">发消息</button>\n <button onclick=\"alert('查看详情')\">详情</button>\n <button onclick=\"alert('编辑')\">编辑</button>\n </div>\n <div class=\"kole-emp-top\">\n <div class=\"kole-emp-avatar\">李</div>\n <div class=\"kole-emp-name\">\n 李娜\n <span class=\"kole-emp-status left\">离职</span>\n </div>\n <div class=\"kole-emp-id\">工号：E1024</div>\n </div>\n <div class=\"kole-emp-meta\">\n 部门：产品中心 · 产品组\n <br />\n 职位：产品经理\n </div>\n <div class=\"kole-emp-tags\">\n <span class=\"kole-emp-tag\">B端</span>\n <span class=\"kole-emp-tag\">数据</span>\n </div>\n <div class=\"kole-emp-contact\">\n 电话：138-0000-0000\n <br />\n 邮箱：lina@example.com\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
2,
|
||
1
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-emp-card\">\n <div class=\"kole-emp-actions\">\n <button onclick=\"alert('发消息')\">发消息</button>\n <button onclick=\"alert('查看详情')\">详情</button>\n <button onclick=\"alert('编辑')\">编辑</button>\n </div>\n <div class=\"kole-emp-top\">\n <div class=\"kole-emp-avatar\">李</div>\n <div class=\"kole-emp-name\">\n 李娜\n <span class=\"kole-emp-status left\">离职</span>\n </div>\n <div class=\"kole-emp-id\">工号：E1024</div>\n </div>\n <div class=\"kole-emp-meta\">\n 部门：产品中心 · 产品组\n <br />\n 职位：产品经理\n </div>\n <div class=\"kole-emp-tags\">\n <span class=\"kole-emp-tag\">B端</span>\n <span class=\"kole-emp-tag\">数据</span>\n </div>\n <div class=\"kole-emp-contact\">\n 电话：138-0000-0000\n <br />\n 邮箱：lina@example.com\n </div>\n</div>",
|
||
"jsx": "import { KoleEmployeeCard } from 'kole-ui/react';\n\nconst employee = {\n name: '李娜',\n empId: 'E1024',\n dept: '产品中心 · 产品组',\n position: '产品经理',\n status: 'left',\n tags: ['B端', '数据'],\n phone: '138-0000-0000',\n email: 'lina@example.com',\n};\n\n// showContact 打开联系方式区（电话 / 邮箱）\n<KoleEmployeeCard employee={employee} showContact onEdit={(e) => console.log('编辑', e)} />",
|
||
"vue3": "<script setup>\nimport { KoleEmployeeCard } from 'kole-ui/vue3';\n\nconst employee = {\n name: '李娜',\n empId: 'E1024',\n dept: '产品中心 · 产品组',\n position: '产品经理',\n status: 'left',\n tags: ['B端', '数据'],\n phone: '138-0000-0000',\n email: 'lina@example.com',\n};\n\nfunction onEdit(e) { console.log('编辑', e); }\n</script>\n\n<template>\n <!-- 离职状态 + 联系方式区；show-contact 见 EmployeeCard.vue3.vue defineProps -->\n <KoleEmployeeCard :employee=\"employee\" :show-contact=\"true\" @edit=\"onEdit\" />\n</template>",
|
||
"vue2": "<template>\n <KoleEmployeeCard :employee=\"employee\" :show-contact=\"true\" @edit=\"onEdit\" />\n</template>\n\n<script>\nimport { KoleEmployeeCard } from 'kole-ui/vue2';\n\nconst employee = {\n name: '李娜',\n empId: 'E1024',\n dept: '产品中心 · 产品组',\n position: '产品经理',\n status: 'left',\n tags: ['B端', '数据'],\n phone: '138-0000-0000',\n email: 'lina@example.com',\n};\n\nexport default {\n name: 'EmployeeCardLeftDemo',\n components: { KoleEmployeeCard },\n data() { return { employee }; },\n methods: {\n onEdit(e) { console.log('编辑', e); },\n },\n};\n</script>",
|
||
"tsx": "import { KoleEmployeeCard } from 'kole-ui/react';\n\ntype EmployStatus = 'active' | 'left';\ninterface Employee {\n name: string;\n empId: string;\n dept: string;\n position: string;\n status: EmployStatus;\n tags: ReadonlyArray<string>;\n phone?: string;\n email?: string;\n}\n\nconst employee: Employee = {\n name: '李娜',\n empId: 'E1024',\n dept: '产品中心 · 产品组',\n position: '产品经理',\n status: 'left',\n tags: ['B端', '数据'],\n phone: '138-0000-0000',\n email: 'lina@example.com',\n};\n\nfunction onEdit(e: Employee): void {\n console.log('编辑', e);\n}\n\n// showContact 打开联系方式区（电话 / 邮箱）\n<KoleEmployeeCard employee={employee} showContact onEdit={onEdit} />",
|
||
"vue3ts": "<script setup lang=\"ts\">\nimport { KoleEmployeeCard } from 'kole-ui/vue3';\n\ntype EmployStatus = 'active' | 'left';\ninterface Employee {\n name: string;\n empId: string;\n dept: string;\n position: string;\n status: EmployStatus;\n tags: ReadonlyArray<string>;\n phone?: string;\n email?: string;\n}\n\nconst employee: Employee = {\n name: '李娜',\n empId: 'E1024',\n dept: '产品中心 · 产品组',\n position: '产品经理',\n status: 'left',\n tags: ['B端', '数据'],\n phone: '138-0000-0000',\n email: 'lina@example.com',\n};\n\nfunction onEdit(e: Employee): void {\n console.log('编辑', e);\n}\n</script>\n\n<template>\n <!-- 离职状态 + 联系方式区；show-contact 见 EmployeeCard.vue3.vue defineProps -->\n <KoleEmployeeCard :employee=\"employee\" :show-contact=\"true\" @edit=\"onEdit\" />\n</template>",
|
||
"vue2ts": "<template>\n <div>\n <KoleEmployeeCard :employee=\"employee\" :show-contact=\"true\" @edit=\"onEdit\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleEmployeeCard } from 'kole-ui/vue2';\n\ntype EmployStatus = 'active' | 'left';\ninterface Employee {\n name: string;\n empId: string;\n dept: string;\n position: string;\n status: EmployStatus;\n tags: ReadonlyArray<string>;\n phone?: string;\n email?: string;\n}\n\nconst employee: Employee = {\n name: '李娜',\n empId: 'E1024',\n dept: '产品中心 · 产品组',\n position: '产品经理',\n status: 'left',\n tags: ['B端', '数据'],\n phone: '138-0000-0000',\n email: 'lina@example.com',\n};\n\nexport default Vue.extend({\n name: 'EmployeeCardLeftDemo',\n components: { KoleEmployeeCard },\n data(): { employee: Employee } {\n return { employee };\n },\n methods: {\n onEdit(e: Employee): void {\n console.log('编辑', e);\n },\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/EmployeeCard.html:59-79 第二张卡片（李娜 / E1024 / 产品中心 · 产品组 / 产品经理 / 离职 / B端·数据 / 电话 138-0000-0000 / 邮箱 lina@example.com）",
|
||
"showContact 见 EmployeeCard.jsx 形参与 EmployeeCard.vue3.vue defineProps（对应演示页该卡片的 kole-emp-contact 区块）"
|
||
]
|
||
}
|
||
],
|
||
"curated": true
|
||
}
|