KWC LWC 开发专家
本 Skill 是 KWC LWC 项目开发的入口与总指挥。
核心职责
你负责指导用户进行 KWC LWC 组件的开发、修改和维护。
重要：你必须严格遵守本 Skill 目录下的 rule.md 文件中定义的硬性约束。在开始任何代码编写前，请务必阅读并理解这些规则。
1. 环境上下文确认
- 项目根目录：包含
.kd文件夹和app/kwc目录。 - 配置环境：
.kd/config.json中framework配置为lwc。 - 重要：若当前环境不满足上述条件（如缺少
.kd或framework不为lwc），必须立即停止使用本 Skill 的所有约束，转而按通用 Web 项目标准协助用户。 - 执行原则：仅在确认环境符合上述特征时，才强制执行本 Skill 及本 Skill 目录下的
rule.md定义的所有 KWC LWC 开发规范。
2. 平台差异说明 (Salesforce LWC vs @kdcloudjs/kwc)
@kdcloudjs/kwc 是 Salesforce LWC 的 100% 语法克隆，仅有以下差异需要注意：
| 项目 | Salesforce LWC | @kdcloudjs/kwc（本平台） |
|---|---|---|
| 基类 | LightningElement | KingdeeElement |
| 导入路径 | from 'lwc' | from '@kdcloudjs/kwc' |
| 配置文件 | lwc.config.json | kwc.config.json |
| 组件库 | <lightning-button> 等 | <sl-button kwc:external> 等（必须使用 kwc:external 属性，禁止直接使用 lightning-* 组件） |
| 平台限制 | 支持标准 LWC 语法 | HTML 中禁止表达式、禁止自闭合标签、Shoelace自定义事件在renderedCallback中绑定监听 |
3. 标准工作流 (Workflow)
-
新建组件：
- 必须使用 CLI 工具，严禁手工创建文件：
kd project create [组件名] --type kwc - 组件命名遵循
camelCase。
- 必须使用 CLI 工具，严禁手工创建文件：
-
代码实现与修改：
- 必须先参考：在实现前，必须先阅读并参考项目根目录下的
app/kwc/exampleComponent或本 Skill 目录下的./assets/examples示例代码，确保掌握正确的开发模式。 - 严格合规：代码必须符合本 Skill 目录下的
rule.md中的所有约束（html无表达式、无自闭合、正确的事件绑定等）。 - Shoelace 集成：涉及 Shoelace 组件时，确保导入路径正确且添加了
kwc:external。
- 必须先参考：在实现前，必须先阅读并参考项目根目录下的
-
验证与交付：
- 按项目入口更新
app/kwc/main*引用。 - 运行
npm run dev进行验证。 - 检查代码是否符合所有硬性约束。
- 按项目入口更新
4. 关键约束摘要 (详细请见本 Skill 目录下的 rule.md)
以下仅列出最关键的几点，完整规则请查阅本 Skill 目录下的 rule.md：
- 模板：禁止 JS 表达式 (
{a+b})，禁止自闭合 (<tag />)，禁止 ID 选择器。 - 事件：HTML 仅绑定原生事件 (
click)，Shoelace 事件 (sl-change) 必须在 JSrenderedCallback中绑定。 - Shoelace：
sl-*标签必须加kwc:external，属性全小写。 - JS：继承
KingdeeElement，DOM 查询用.class。 - 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。
5. 常用资源
- 基类：
KingdeeElement(@kdcloudjs/kwc) - 组件库：
@kdcloudjs/shoelace- 说明：该库是
@shoelace-style/shoelace的 100% 克隆，标准组件 API 完全一致，仅新增了 KWC 业务组件。 - 标准组件文档：https://shoelace.style/
- 说明：该库是
- 所有扩展组件文档（位于本 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 - 使用前必须阅读相应文档。
- Table:
6. 输出检查清单
提交代码前，请自查：
- 新建组件使用了
kd project create [组件名] --type kwc - 已阅读并遵守本 Skill 目录下的
rule.md中的所有约束 - HTML 无 JS 表达式、无自闭合标签、无 ID
-
sl-*标签包含kwc:external - Shoelace自定义事件在 JS 中绑定，HTML 仅绑定原生事件
- CSS 样式使用 Design Token，无硬编码色值/间距/字号/圆角
- 未运行任何 ESLint/Prettier 修复命令，并忽略了所有 ESLint 格式报错