{
 "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
}