KWC Vue 开发专家

本 Skill 是 KWC Vue 项目开发的入口与总指挥。基于 Vue 3 (Composition API + <script setup>) 进行开发。

核心职责

你负责指导用户进行 KWC Vue 组件的开发、修改和维护。重要：你必须严格遵守本 Skill 目录下的 rule.md 文件中定义的硬性约束。在开始任何代码编写前，请务必阅读并理解这些规则。

本项目基于 Vue 3，必须遵循以下基本原则：

Composition API：统一使用 <script setup> 语法，禁止使用 Options API（export default { data(), methods, computed, watch }）
响应式：使用 ref() / reactive() 声明响应式状态，禁止使用 this。向 Web Components 传递复杂数据（对象/数组）时，由于底层需检测引用变化，绝对禁止 push 或 splice 原地修改，必须通过重新赋值（如 data.value = [...data.value, new]）产生新引用来触发渲染。
生命周期：使用 onMounted() / onUnmounted() 等 Composition API 钩子
模板语法：
- 属性绑定：:prop="value"
- 事件绑定：@sl-change="handler"（Shoelace 组件使用 @sl-* 前缀）
- 向 Web Component 传递对象/数组属性：必须用 camelCase + .prop 修饰符：
```
【✅ 正确】 <sl-table :dataSource.prop="rows" :columns.prop="cols" :rowSelection.prop="sel"></sl-table>
【❌ 错误】 <sl-table :data-source="rows" :row-selection="sel"></sl-table>
```
- 数字类型属性使用 camelCase 不需 .prop（如 :pageSize="20"）；字符串/布尔属性必须用 camelCase（如 rowKey="id"、showHeader、simpleMode），禁止 kebab-case（如 row-key、show-header）
TypeScript：推荐使用 <script setup lang="ts">

新建组件：
- 必须使用 CLI 工具，严禁手工创建文件：
```
kd project create [组件名] --type kwc
```
- 组件命名遵循 PascalCase。
代码实现与修改：
- 学习：优先参考 app/kwc/exampleComponent。
- 严格合规：代码必须符合本 Skill 目录下的 rule.md 中的所有约束（导入规范、事件绑定等）。
- Shoelace 集成：涉及 Shoelace 组件时，确保从 correct path 导入。
验证与交付：
- 按项目入口更新 app/kwc/main* 引用。
- 运行 npm run dev 进行验证。

导入：import '@kdcloudjs/shoelace/dist/components/input/input.js';
模板：使用 <sl-input> (kebab-case)。
事件：使用 @sl-change 绑定。
CSS：样式必须使用 Shoelace Design Token（var(--sl-color-*)、var(--sl-spacing-*)、var(--sl-font-size-*)、var(--sl-border-radius-*)），禁止硬编码 hex 色值和 px 数值。详见 ./reference/css-design-tokens.md。

扩展组件文档（位于本 Skill 的 reference/ 目录下）：
- Table: reference/table/index.md
- DatePicker: reference/datepicker/index.md
- TimePicker: reference/sl-timepicker.md
- Pagination: reference/sl-pagination.md
- Nav: reference/sl-nav.md
- 使用前必须阅读相应文档。
标准组件文档：https://shoelace.style/

提交代码前，请自查：