lcap-frontend-library 0.0.1

package/packages/lcap-frontend-library/references/lcap-extension-component/block.md

@@ -0,0 +1,160 @@
+---
+outline: deep
+---
+<script setup>
+import { VTCodeGroup, VTCodeGroupTab } from '../../.vitepress/components'
+</script>
+
+# 区块示例说明
+
+## 1. 功能说明
+
+区块示例是拖拽组件到画布后**默认生成的初始代码**。在 `block.stories.js` / `block.stories.tsx` 中定义，作为画布上组件的初始形态。例如：拖拽按钮组件到画布后，生成的代码中按钮的 `text` 属性为 `"确定"`。
+
+依赖库中创建组件后，默认会生成一个区块示例；该示例必须**仅含静态内容**，以便设计器可靠还原、不依赖运行时变量或事件。
+
+## 2. 文件与结构
+
+在 **block.stories.js**（Vue2）/ **block.stories.tsx**（React）中定义，每个区块为一个 Story 对象，必须包含 `name`、`render`。
+
+<VTCodeGroup>
+  <VTCodeGroupTab label="Vue2">
+
+  **block.stories.js**
+  ```javascript
+  export const Default = {
+    name: '默认按钮',
+    render: () => ({
+      template: '<u-button text="确定"></u-button>',
+    }),
+  };
+  ```
+
+  </VTCodeGroupTab>
+  <VTCodeGroupTab label="React">
+
+  **block.stories.tsx**
+  ```jsx
+  export const Default = {
+    name: '主要按钮',
+    render: () => <Button type="primary" children="确定" />,
+  };
+  ```
+
+  </VTCodeGroupTab>
+</VTCodeGroup>
+
+Vue2 下会使用 `render` 返回对象中的 `template`。
+
+## 3. 书写规范（必须遵守）
+
+block.stories 用于画布初始代码，**必须满足**以下三条，否则拖入画布后无法正确还原：
+
+| 规则 | 说明 |
+|------|------|
+| **仅允许静态属性** | 所有 props 的值必须直接写在模板/JSX 里，为字面量或内联的静态结构（如数组、对象字面量）。 |
+| **禁止绑定变量** | 不得使用 `setup()`、`data()`、`ref`、`reactive` 等把数据存成变量再绑定到模板；属性一律用内联字面量。 |
+| **禁止绑定事件** | 不得在模板/JSX 中写 `@click`、`onClick`、`v-on` 等事件绑定。 |
+
+### 3.1 错误示例（禁止）
+
+使用变量或事件会导致设计器无法还原、或行为不一致。
+
+<VTCodeGroup>
+  <VTCodeGroupTab label="Vue2">
+
+  ```javascript
+  // 错误：使用 data() 和 @click
+  export const Default = {
+    name: '默认',
+    render: () => ({
+      data() {
+        return { text: '确定' };
+      },
+      methods: { handleClick() {} },
+      template: '<u-button :text="text" @click="handleClick"></u-button>',
+    }),
+  };
+  ```
+
+  ```javascript
+  // 错误：使用 setup() 和变量绑定
+  export const Default = {
+    name: '基本用法',
+    render: () => ({
+      components: { 'funnel-chart': Component },
+      setup() {
+        const data = [
+          { name: '未触达客户', value: 1000 },
+          { name: '已触达客户', value: 800 },
+        ];
+        return { data };
+      },
+      template: '<funnel-chart :data="data" height="400px"></funnel-chart>',
+    }),
+  };
+  ```
+
+  </VTCodeGroupTab>
+  <VTCodeGroupTab label="React">
+
+  ```jsx
+  // 错误：使用变量和 onClick
+  export const Default = {
+    name: '主要按钮',
+    render: () => {
+      const text = '确定';
+      const handleClick = () => {};
+      return <Button type="primary" children={text} onClick={handleClick} />;
+    },
+  };
+  ```
+
+  </VTCodeGroupTab>
+</VTCodeGroup>
+
+### 3.2 正确示例
+
+**简单组件**：属性直接写死为字面量。
+
+<VTCodeGroup>
+  <VTCodeGroupTab label="Vue2">
+
+  ```javascript
+  export const Default = {
+    name: '默认按钮',
+    render: () => ({
+      template: '<u-button text="确定"></u-button>',
+    }),
+  };
+  ```
+
+  </VTCodeGroupTab>
+  <VTCodeGroupTab label="React">
+
+  ```jsx
+  export const Default = {
+    name: '主要按钮',
+    render: () => <Button type="primary" children="确定" />,
+  };
+  ```
+
+  </VTCodeGroupTab>
+</VTCodeGroup>
+
+**需传数组/对象时**：在模板/JSX 中**内联字面量**，不通过变量绑定。
+
+```javascript
+// Vue2：data 为内联数组字面量
+export const Default = {
+  name: '基本用法',
+  render: () => ({
+    components: { 'funnel-chart': Component },
+    template: '<funnel-chart :data="[{ name: \'未触达客户\', value: 1000 }, { name: \'已触达客户\', value: 800 }, { name: \'意向客户\', value: 600 }]" height="400px" width="600px"></funnel-chart>',
+  }),
+};
+```
+
+### 3.3 story 数量
+
+**block.stories 中仅保留一个 story**（通常为 `Default`），供拖拽到画布使用。若需多个示例或本地调试用例，请写在 **example.stories.{js|tsx|jsx}** 中，勿在 block.stories 中新增多个 story。

package/packages/lcap-frontend-library/references/lcap-extension-component/i18n.md

@@ -0,0 +1,95 @@
+---
+outline: deep
+---
+
+# 国际化
+
+## 1. 功能说明
+
+依赖库组件支持在IDE引入后，通过[国际化多语言](https://community.codewave.163.com/CommunityParent/fileIndex?filePath=20.%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91%2F60.%E5%8F%AF%E8%A7%86%E5%8C%96%E5%BC%80%E5%8F%91%E7%95%8C%E9%9D%A2%2F70.%E6%9B%B4%E5%A4%9A%E8%AE%BE%E7%BD%AE%2F50.%E5%9B%BD%E9%99%85%E5%8C%96%E5%A4%9A%E8%AF%AD%E8%A8%80.md&version=3.13&title=3.3.2%20%E6%9B%B4%E6%96%B0%E5%9B%BD%E9%99%85%E5%8C%96%E5%88%97%E8%A1%A8)功能配置组件的系统文案。
+
+
+
+## 2. 功能实现
+
+### 2.1 组件内部获取国际语言
+
+在组件内部，可以通过以下方式获取相关信息：
+
+- 获取当前语言环境
+
+    ```javascript
+    window.$global.i18nInfo.locale
+    ```
+
+- 获取所有的语言包
+
+    ```javascript
+    window.$global.i18nInfo.messages
+    ```
+
+
+
+### 2.2 组件文案上传到 IDE 国际化配置
+
+1.  依赖库组件目录下增加 `i18n` 目录。
+
+    ```
+    |-- src
+    |---- components
+    |------- cwd-capluse
+    |---------- i18n
+    |------------- zh-CN.json 
+    |------------- en-US.json
+    ```
+
+    
+
+1.  配置文案。本示例将配置文案写在zh-CN.json 文件中，并在 index.vue 处引用。
+
+    - 配置文案示例如下：
+
+    ```json
+    //仅支持二级结构，key 建议带上组件的前缀。
+    {
+    "cwd-capluse.text": "这个是胶囊选择器的国际化测试文案"
+    }
+    ```
+
+    
+
+    - 在index.vue引入配置好的文案。
+
+    
+
+2.  更改 vite.config.js 构建配置，增加 i18n 配置项：
+
+    ```json
+    // lcapPlugin 打包配置更改
+    lcapPlugin({
+        i18n: true,
+    }),
+    ```
+
+    
+
+### 2.3 IDE内配置文案
+
+以下步骤为依赖库打包发布并在IDE成功引入后的操作。
+
+1.  点击 IDE 页面上方的“更多”按钮，在弹出的选项中，选择“国际化多语言”。
+
+    
+
+2. 配置依赖库组件内置文案。更多国际化多语言的配置说明及详细功能介绍，可参见：[国际化多语言](https://community.codewave.163.com/CommunityParent/fileIndex?filePath=20.%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91%2F60.%E5%8F%AF%E8%A7%86%E5%8C%96%E5%BC%80%E5%8F%91%E7%95%8C%E9%9D%A2%2F70.%E6%9B%B4%E5%A4%9A%E8%AE%BE%E7%BD%AE%2F50.%E5%9B%BD%E9%99%85%E5%8C%96%E5%A4%9A%E8%AF%AD%E8%A8%80.md&version=3.13)。
+
+    
+
+> 注意：
+> 依赖库组件内置文案是在依赖库组件开发时就已定义好的，无法在 IDE 内进行更改。例如上图所示，选中行中文文案为开发时定义好的无法在ID内更改；
+> 但对于那些未定义的文案，可以自行配置。例如上图所示，中文文案对应的英文文案可以在 IDE 内设置。
+
+## 3. 使用效果演示
+
+以下效果为依赖库打包发布并在IDE中引入后在应用中的使用演示。
+

package/packages/lcap-frontend-library/references/lcap-extension-component/icon.md

@@ -0,0 +1,27 @@
+---
+outline: deep
+---
+
+# 自定义组件面板图标
+
+## 1. 功能说明
+
+自定义在IDE右侧组件列表中展示的组件图标。
+
+
+
+## 2. 功能实现
+
+1.  在项目文件根目录下创建文件夹 assets ，在文件夹下添加.svg格式图标文件。
+
+    
+
+1.  在组件的 api.ts 文件中，通过 @Component 装饰器定义图标 icon 。icon对应的文件支持根据 assets 匹配路径。
+
+    ```typescript
+    @Component({
+        icon: 'demo.svg',
+    })
+    ```
+
+