kwc-lwc-development

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

KWC LWC 开发专家

KWC LWC Development Expert

本 Skill 是 KWC LWC 项目开发的入口与总指挥。

This Skill is the entry point and command center for KWC LWC project development.

核心职责

Core Responsibilities

你负责指导用户进行 KWC LWC 组件的开发、修改和维护。重要：你必须严格遵守本 Skill 目录下的

rule.md

文件中定义的硬性约束。在开始任何代码编写前，请务必阅读并理解这些规则。

You are responsible for guiding users in the development, modification and maintenance of KWC LWC components. Important: You must strictly comply with the hard constraints defined in the

rule.md

file in this Skill's directory. Be sure to read and understand these rules before starting any code writing.

1. 环境上下文确认

1. Environment Context Confirmation

项目根目录：包含
```
.kd
```
文件夹和
```
app/kwc
```
目录。
配置环境：
```
.kd/config.json
```
中
```
framework
```
配置为
```
lwc
```
。
重要：若当前环境不满足上述条件（如缺少
```
.kd
```
或
```
framework
```
不为
```
lwc
```
），必须立即停止使用本 Skill 的所有约束，转而按通用 Web 项目标准协助用户。
执行原则：仅在确认环境符合上述特征时，才强制执行本 Skill 及本 Skill 目录下的
```
rule.md
```
定义的所有 KWC LWC 开发规范。

Project Root Directory: Contains
```
.kd
```
folder and
```
app/kwc
```
directory.
Configuration Environment: The
```
framework
```
configuration in
```
.kd/config.json
```
is set to
```
lwc
```
.
Important: If the current environment does not meet the above conditions (e.g., missing
```
.kd
```
or
```
framework
```
is not
```
lwc
```
), must immediately stop using all constraints of this Skill and assist users in accordance with general Web project standards instead.
Execution Principle: Only enforce all KWC LWC development specifications defined by this Skill and the
```
rule.md
```
in this Skill's directory when confirming the environment meets the above characteristics.

2. 平台差异说明 (Salesforce LWC vs @kdcloudjs/kwc)

2. Platform Differences (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中绑定监听

@kdcloudjs/kwc

is a 100% syntax clone of Salesforce LWC, with only the following differences to note:

Item	Salesforce LWC	@kdcloudjs/kwc (Our Platform)
Base Class	`LightningElement`	`KingdeeElement`
Import Path	`from 'lwc'`	`from '@kdcloudjs/kwc'`
Configuration File	`lwc.config.json`	`kwc.config.json`
Component Library	`<lightning-button>` etc.	`<sl-button kwc:external>` etc. (Must use `kwc:external` attribute, direct use of `lightning-*` components is prohibited)
Platform Restrictions	Supports standard LWC syntax	No expressions in HTML, no self-closing tags, Shoelace custom events must be bound in renderedCallback

3. 标准工作流 (Workflow)

3. Standard Workflow

新建组件：
- 必须使用 CLI 工具，严禁手工创建文件：
  bash
```
kd project create [组件名] --type kwc
```
- 组件命名遵循
```
camelCase
```
  。
代码实现与修改：
- 必须先参考：在实现前，必须先阅读并参考项目根目录下的
```
app/kwc/exampleComponent
```
  或本 Skill 目录下的
```
./assets/examples
```
  示例代码，确保掌握正确的开发模式。
- 严格合规：代码必须符合本 Skill 目录下的
```
rule.md
```
  中的所有约束（html无表达式、无自闭合、正确的事件绑定等）。
- Shoelace 集成：涉及 Shoelace 组件时，确保导入路径正确且添加了
```
kwc:external
```
  。
验证与交付：
- 按项目入口更新
```
app/kwc/main*
```
  引用。
- 运行
```
npm run dev
```
  进行验证。
- 检查代码是否符合所有硬性约束。

Create New Component:
- Must use CLI tool, manual file creation is strictly prohibited:
  bash
```
kd project create [component-name] --type kwc
```
- Component naming follows
```
camelCase
```
  .
Code Implementation & Modification:
- Must Reference First: Before implementation, must read and refer to the sample code in
```
app/kwc/exampleComponent
```
  in the project root directory or
```
./assets/examples
```
  in this Skill's directory to ensure mastery of the correct development pattern.
- Strict Compliance: Code must comply with all constraints in
```
rule.md
```
  in this Skill's directory (no expressions in HTML, no self-closing tags, correct event binding, etc.).
- Shoelace Integration: When involving Shoelace components, ensure correct import paths and add
```
kwc:external
```
  .
Verification & Delivery:
- Update
```
app/kwc/main*
```
  references according to the project entry.
- Run
```
npm run dev
```
  for verification.
- Check if code complies with all hard constraints.

4. 关键约束摘要 (详细请见本 Skill 目录下的 rule.md)

4. Key Constraint Summary (See rule.md in this Skill's directory for details)

以下仅列出最关键的几点，完整规则请查阅本 Skill 目录下的

rule.md

：

模板：禁止 JS 表达式 (
```
{a+b}
```
)，禁止自闭合 (
```
<tag />
```
)，禁止 ID 选择器。
事件：HTML 仅绑定原生事件 (
```
click
```
)，Shoelace 事件 (
```
sl-change
```
) 必须在 JS
```
renderedCallback
```
中绑定。
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
```
。

Only the most critical points are listed below; refer to

rule.md

in this Skill's directory for complete rules:

Template: No JS expressions (
```
{a+b}
```
), no self-closing tags (
```
<tag />
```
), no ID selectors.
Events: Only native events (
```
click
```
) are bound in HTML; Shoelace events (
```
sl-change
```
) must be bound in JS
```
renderedCallback
```
.
Shoelace:
```
sl-*
```
tags must include
```
kwc:external
```
, all attributes are lowercase.
JS: Inherit from
```
KingdeeElement
```
, use
```
.class
```
for DOM queries.
CSS: Styles must use Shoelace Design Tokens (
```
var(--sl-color-*)
```
,
```
var(--sl-spacing-*)
```
,
```
var(--sl-font-size-*)
```
,
```
var(--sl-border-radius-*)
```
), hard-coded hex color values and px values are prohibited. See
```
./reference/css-design-tokens.md
```
for details.

5. 常用资源

5. Common Resources

基类：
```
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
```
- 使用前必须阅读相应文档。

Base Class:
```
KingdeeElement
```
(
```
@kdcloudjs/kwc
```
)
Component Library:
```
@kdcloudjs/shoelace
```
- Note: This library is a 100% clone of
```
@shoelace-style/shoelace
```
  , standard component APIs are completely identical, only KWC business components are added.
- Standard Component Documentation: https://shoelace.style/
All Extended Component Documentation (located in the
```
reference/
```
directory of this Skill):
- Table:
```
reference/table/index.md
```
- DatePicker:
```
reference/datepicker/index.md
```
- TimePicker:
```
reference/sl-timepicker.md
```
- Pagination:
```
reference/sl-pagination.md
```
- Must read the corresponding documentation before use.

6. 输出检查清单

6. Output Checklist

提交代码前，请自查：

新建组件使用了

kd project create [组件名] --type kwc

已阅读并遵守本 Skill 目录下的
```
rule.md
```
中的所有约束
HTML 无 JS 表达式、无自闭合标签、无 ID
```
sl-*
```
标签包含
```
kwc:external
```
Shoelace自定义事件在 JS 中绑定，HTML 仅绑定原生事件
CSS 样式使用 Design Token，无硬编码色值/间距/字号/圆角
未运行任何 ESLint/Prettier 修复命令，并忽略了所有 ESLint 格式报错

Before submitting code, self-check:

New components are created using

kd project create [component-name] --type kwc

Have read and complied with all constraints in
```
rule.md
```
in this Skill's directory
No JS expressions, no self-closing tags, no IDs in HTML
```
sl-*
```
tags include
```
kwc:external
```
Shoelace custom events are bound in JS, only native events are bound in HTML
CSS styles use Design Tokens, no hard-coded color values/spacing/font sizes/border radii
Have not run any ESLint/Prettier fix commands and ignored all ESLint format errors