@opentiny/vue-docs 3.28.1 → 3.30.0

package/demos/pc/webdoc/develop-demo-en.md

@@ -2,11 +2,11 @@
 
 # Development Example
 
-This article is based on[Vite](https://cn.vitejs.dev/) Project example to show how to use`TinyVue`components.
+This article is based on [Vite](https://cn.vitejs.dev/) Project example to show how to use `TinyVue` components.
 
 ## Building the Vite project
 
-Create a`Vite`Works:
+Create a `Vite` project:
 
 ```bash
 yarn create vite
@@ -14,7 +14,7 @@ yarn create vite
 npm init vite@latest
 ```
 
-Created`Vite`Go to the project directory and run the following commands to download and start the project:
+After creating the `Vite` project, go to the project directory and run the following commands to download and start the project:
 
 ```bash
 yarn
@@ -26,13 +26,13 @@ yarn dev
 npm run dev
 ```
 
-After the browser is started, if the following interface is displayed, it indicates that`Vite`The project is started successfully.
+After the browser is started, if the following interface is displayed, it indicates that the `Vite` project is started successfully.
 
 <img src="@demos/resource/vite-vue.png" class="image" style="box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14)" ><br><br>
 
-## Install and use`TinyVue`Components
+## Install and use `TinyVue` Components
 
-Run the following command to install the`Vue 3.0`version of`TinyVue`Component library:
+Run the following command to install the `Vue 3.0` version of `TinyVue` component library:
 
 ```bash
 yarn add @opentiny/vue@3
@@ -40,7 +40,7 @@ yarn add @opentiny/vue@3
 npm install @opentiny/vue@3
 ```
 
-Then modify the`vite.config.js`, add the following code highlighted section:
+Then modify the `vite.config.js`, and add the following code:
 
 ```js {8-10}
 //vite.config.js
@@ -56,9 +56,9 @@ export default defineConfig({
 })
 ```
 
-When the installation is complete, press`Ctrl + C`Interrupt the current service, and then perform`yarn dev #npm run dev`Restart the service.
+When the installation is complete, press `Ctrl + C` to interrupt the current service, and then run `yarn dev` or `npm run dev` to restart the service.
 
-Next, modify the`App.vue`file, add the section highlighted by the following code (in the`Button`Component as an example):
+Next, modify the `App.vue` file, and add the following code (using the `Button` component as an example):
 
 ```js {5,11}
 <script setup>
@@ -86,9 +86,9 @@ import { Button as TinyButton } from '@opentiny/vue'
 </style>
 ```
 
-in the above writing`<script setup>`is in the single file component`SFC`Combinations used in the medium`API`Compiler syntax. For details, see.[Vue official website](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) .
+In the above code, `<script setup>` is a compiler syntax sugar used in single file components `SFC` with Composition `API`. For details, see [Vue official website](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup).
 
-If you are not familiar with the above syntax, you can also use the standard`SFC`Format:
+If you are not familiar with the above syntax, you can also use the standard `SFC` format:
 
 ```js
 <template>
@@ -106,7 +106,7 @@ export default {
 </script>
 ```
 
-Alternatively, a single component can be used.`TinyVue`Components:
+Alternatively, you can use single component import for `TinyVue` components:
 
 ```js
 <template>
@@ -124,6 +124,6 @@ export default {
 </script>
 ```
 
-The green button shown below should appear on the browser interface, indicating that`TinyVue`The component has been introduced and takes effect.
+The green button shown below should appear on the browser interface, indicating that the `TinyVue` component has been introduced and takes effect.
 
 <img src="@demos/resource/tiny-vue.png" class="image" style="box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14)" ><br><br>

package/demos/pc/webdoc/import-components.md

@@ -118,7 +118,7 @@ public-hoist-pattern[]=@opentiny/*
 
 ## `vite` 工程多组件引入按需加载和打包配置方法
 
-通过配置 `@opentiny/vue-vite-import` 插件可以按需只打包 pc 或者移动的组件，减少组件库打包后的体积。
+通过配置 `@opentiny/vue-vite-import` 插件可以按需打包 pc 或者移动的组件，减少组件库打包后的体积。
 
 执行以下命令安装 `TinyVue` 按需加载和打包的 `vite` 插件
 

package/demos/pc/webdoc/introduce.md

@@ -12,6 +12,8 @@ TinyVue 是一个跨端、跨框架的企业级 UI 组件库，基于 OpenTiny D
 - 📊 组件内部支持配置式开发，可支持低代码平台可视化组件配置
 - 💡 采用模板、样式、逻辑分离的跨端、跨框架架构，保障灵活性和可移植性
 
+组件 API / Demo 文档：[https://opentiny.design/tiny-vue](https://opentiny.design/tiny-vue)
+
 ## 🛠️ 核心亮点
 
 ### 1、一套代码同时支持 Vue 2 / Vue 3

package/demos/pc/webdoc/skills-en.md

@@ -0,0 +1,107 @@
+# TinyVue Agent Skills Usage Guide
+
+TinyVue Agent Skills is a comprehensive toolkit designed for AI coding assistants. It enables these assistants to gain deep understanding of TinyVue component library usage, APIs, and best practices, thereby helping developers build applications more efficiently with TinyVue.
+
+## What is TinyVue Skills?
+
+The `tiny-vue-skill` is an official Agent Skill developed by OpenTiny that contains comprehensive TinyVue component documentation, practical examples, and detailed usage specifications. Once installed, your AI coding assistant (including Cursor, GitHub Copilot, Claude Code, and others) will be capable of:
+
+- Accurately understand the APIs and properties of each TinyVue component
+- Provide code examples that conform to TinyVue standards
+- Intelligently recommend appropriate components for your business needs
+- Help quickly build pages and features based on TinyVue
+
+## Installation Methods
+
+### Method 1: Install via Claude Code Plugin Marketplace (Recommended for Claude Code Users)
+
+This method is ideal for Claude Code users and provides convenient one-click update functionality:
+
+```bash
+# Add marketplace and install plugin after launching Claude Code
+/plugin marketplace add https://github.com/opentiny/agent-skills
+/plugin install tiny-vue-skill@opentiny-skills
+```
+
+Or run the following commands before launching:
+
+```bash
+claude plugin marketplace add https://github.com/opentiny/agent-skills
+claude plugin install tiny-vue-skill@opentiny-skills
+```
+
+> **Marketplace Advantage**: Skills can be easily updated using the `claude plugin update` command.
+
+### Method 2: Install via the `skills` Tool (Most Versatile Approach)
+
+This method works with various AI coding tools and leverages npm for automated installation:
+
+```bash
+# List all available skills
+npx skills add opentiny/agent-skills --list
+
+# Install tiny-vue-skill globally (for Cursor)
+npx skills add opentiny/agent-skills -g --skill tiny-vue-skill --agent cursor
+
+# Install tiny-vue-skill at project level (for Cursor)
+npx skills add opentiny/agent-skills --skill tiny-vue-skill --agent cursor
+```
+
+**`--agent` Parameter Mapping for Different AI Tools:**
+
+| AI Tool        | `--agent` Parameter |
+| -------------- | ------------------- |
+| Cursor         | `cursor`            |
+| Claude Code    | `claude-code`       |
+| GitHub Copilot | `github-copilot`    |
+| Windsurf       | `windsurf`          |
+| Gemini CLI     | `gemini-cli`        |
+
+### Method 3: Manual Installation via Git Clone
+
+**Step 1:** Clone the repository to your local machine:
+
+```bash
+git clone https://github.com/opentiny/agent-skills.git
+```
+
+**Step 2:** Copy the `skills/tiny-vue-skill` folder to your tool's Skills directory:
+
+| AI Tool        | Project-level Path  | Global Path                   |
+| -------------- | ------------------- | ----------------------------- |
+| Cursor         | `.cursor/skills/`   | `~/.cursor/skills/`           |
+| Claude Code    | `.claude/skills/`   | `~/.claude/skills/`           |
+| GitHub Copilot | `.github/skills/`   | `~/.copilot/skills/`          |
+| Windsurf       | `.windsurf/skills/` | `~/.codeium/windsurf/skills/` |
+
+## Enabling Skills in Cursor IDE
+
+To enable Skills in Cursor IDE, press `Ctrl + ,` to open Settings, search for `useagentskills`, locate the experimental feature labeled **Use Agent Skills**, and enable it by checking the corresponding box.
+
+## Usage Examples
+
+Once you've installed and enabled the Skills, you can simply describe your requirements to the AI assistant. It will automatically reference TinyVue documentation to generate standardized code implementations:
+
+**Example 1: Building a Data Grid Component**
+
+> "Create a new Vue project and implement TinyVue's Grid component to build a Chinese provincial information query table. Include columns for serial number, province name, population, area, and GDP. Enable sorting functionality, freeze the province name column on the left side, and add a filter input field at the top of the table."
+
+**Example 2: Implementing Dark Mode Support**
+
+> "Add dark mode switching capability to the current TinyVue project, allowing users to toggle between light and dark themes seamlessly."
+
+**Example 3: Creating a Registration Form**
+
+> "Implement a user registration form using TinyVue's Form component with name, email, and password fields. Include comprehensive form validation to ensure data integrity and improve user experience."
+
+## Keeping Skills Up to Date
+
+Since the TinyVue component library is continuously evolving, we strongly recommend regular Skills updates to ensure you have access to the latest component documentation and features:
+
+- **Claude Code Users**: Execute the `claude plugin update` command
+- **Skills Tool Users**: Re-execute the installation command to overwrite and update existing installations
+- **Manual Installation Users**: Pull the latest changes from the repository and copy the updated `tiny-vue-skill` folder
+
+## Related Resources
+
+- **GitHub Repository**: [opentiny/agent-skills](https://github.com/opentiny/agent-skills)

package/demos/pc/webdoc/skills.md

@@ -0,0 +1,107 @@
+# TinyVue Agent Skills 使用指南
+
+TinyVue Agent Skills 是一套面向 AI 编码助手的技能工具集，让 AI 助手深度理解 TinyVue 组件库的用法、API 和最佳实践，从而帮助您更高效地使用 TinyVue 开发应用。
+
+## 什么是 TinyVue Skills？
+
+`tiny-vue-skill` 是 OpenTiny 官方提供的 Agent Skill，包含了 TinyVue 组件的文档、示例和使用规范。安装后，您所使用的 AI 编码助手（如 Cursor、GitHub Copilot、Claude Code 等）将能够：
+
+- 精准理解 TinyVue 各组件的 API 和属性
+- 提供符合 TinyVue 规范的代码示例
+- 智能推荐合适的组件解决业务需求
+- 帮助快速搭建基于 TinyVue 的页面和功能
+
+## 安装方式
+
+### 方式一：通过 Claude Code 插件市场安装（Claude Code用户推荐）
+
+适用于使用 Claude Code 的用户，支持后续一键更新：
+
+```bash
+# 启动 Claude Code 后添加市场及插件
+/plugin marketplace add https://github.com/opentiny/agent-skills
+/plugin install tiny-vue-skill@opentiny-skills
+```
+
+或在未启动状态下执行：
+
+```bash
+claude plugin marketplace add https://github.com/opentiny/agent-skills
+claude plugin install tiny-vue-skill@opentiny-skills
+```
+
+> 通过市场安装的优势：可使用 `claude plugin update` 命令轻松更新技能。
+
+### 方式二：通过 `skills` 工具安装（推荐）
+
+适用于多种 AI 编码工具，使用 npm 工具自动安装：
+
+```bash
+# 列出所有可用技能
+npx skills add opentiny/agent-skills --list
+
+# 全局安装 tiny-vue-skill（适用于 Cursor）
+npx skills add opentiny/agent-skills -g --skill tiny-vue-skill --agent cursor
+
+# 项目级安装 tiny-vue-skill（适用于 Cursor）
+npx skills add opentiny/agent-skills --skill tiny-vue-skill --agent cursor
+```
+
+其他 AI 工具对应的 `--agent` 参数：
+
+| AI 工具        | `--agent` 参数   |
+| -------------- | ---------------- |
+| Cursor         | `cursor`         |
+| Claude Code    | `claude-code`    |
+| GitHub Copilot | `github-copilot` |
+| Windsurf       | `windsurf`       |
+| Gemini CLI     | `gemini-cli`     |
+
+### 方式三：手动克隆复制安装
+
+1. 克隆仓库到本地：
+
+```bash
+git clone https://github.com/opentiny/agent-skills.git
+```
+
+2. 将 `skills/tiny-vue-skill` 文件夹复制到对应工具的 Skills 目录：
+
+| AI 工具        | 项目内路径          | 全局路径                      |
+| -------------- | ------------------- | ----------------------------- |
+| Cursor         | `.cursor/skills/`   | `~/.cursor/skills/`           |
+| Claude Code    | `.claude/skills/`   | `~/.claude/skills/`           |
+| GitHub Copilot | `.github/skills/`   | `~/.copilot/skills/`          |
+| Windsurf       | `.windsurf/skills/` | `~/.codeium/windsurf/skills/` |
+
+## 在 Cursor 中启用 Skills
+
+按快捷键 `Ctrl + ,` 打开设置界面，搜索 `useagentskills`，找到实验性功能 **Use Agent Skills**，勾选启用即可。
+
+## 使用示例
+
+安装并启用 Skills 后，您可以直接向 AI 助手描述需求，AI 将自动参考 TinyVue 文档生成标准的代码实现：
+
+**示例 1：创建数据表格**
+
+> 新建一个 Vue 工程，使用 TinyVue 的 Grid 组件开发一个中国省级信息查询表格，包含序号、省名、人口、面积、GDP 等列，支持排序，省名列固定在最左边，表格顶部有按省名过滤的功能。
+
+**示例 2：开启深色模式**
+
+> 为当前 TinyVue 工程增加深色模式切换能力。
+
+**示例 3：使用表单组件**
+
+> 使用 TinyVue 的 Form 组件创建一个用户注册表单，包含姓名、邮箱、密码字段，并添加表单校验。
+
+## 保持 Skills 更新
+
+TinyVue 组件库持续迭代，建议定期更新 Skills 以获取最新的组件文档：
+
+- **Claude Code 用户**：执行 `claude plugin update` 命令
+- **`skills` 工具用户**：重新执行安装命令覆盖更新
+- **手动安装用户**：重新拉取仓库并复制最新的 `tiny-vue-skill` 文件夹
+
+## 相关资源
+
+- [opentiny/agent-skills GitHub 仓库](https://github.com/opentiny/agent-skills)

package/demos/pc/webdoc/theme-en.md

@@ -6,20 +6,19 @@
   </div>
 </div>
 
-537/5000
-A set of global CSS variables is defined in the TinyVue component library to unify theme styles, such as fonts, colors, spacing, and rounding values, and component-level CSS variables are also defined within each component. Starting with the <code> @opentiny/vue@3.19.0 </code> version, the overall style of the component library is changed to a new 'Opentiny Design' style, which is more suitable for enterprise-class and background management applications. If you want to use the OLD theme style, you can choose to continue using the historical version, or refer to the current document's <a href='#OLD theme configuration '>OLD theme configuration </a>.
+A comprehensive set of global CSS variables is defined in the TinyVue component library to unify theme styles, including fonts, colors, spacing, and rounding values. Additionally, component-level CSS variables are defined within each individual component. Starting from version <code>@opentiny/vue@3.19.0</code>, the component library's overall style has been updated to the new 'Opentiny Design' style, which is specifically tailored for enterprise-class applications and backend management systems. If you prefer to use the legacy theme style, you can continue using the historical version or refer to the <a href='#old-theme-configuration'>OLD Theme Configuration</a> section in this document.
 
-- The global 'CSS variable' is located in the 'base' directory of the theme package: [base/vars.less](https://github.com/opentiny/tiny-vue/blob/dev/packages/theme/src/base/vars.less)
+- Global CSS variables are located in the 'base' directory of the theme package: [base/vars.less](https://github.com/opentiny/tiny-vue/blob/dev/packages/theme/src/base/vars.less)
 
-- Component-level 'CSS variables' in the theme root of each component, Such as [the button/vars. Less] (<https://github.com/opentiny/tiny-vue/blob/dev/packages/theme/src/button/vars.less>)
+- Component-level CSS variables are defined in the theme root directory of each component, such as [button/vars.less](https://github.com/opentiny/tiny-vue/blob/dev/packages/theme/src/button/vars.less)
 
-By reading the above source code, you can see which styles of component libraries can be customized.
+By examining the source code above, you can identify which component library styles can be customized.
 
-## Custom theme
+## Custom Theme
 
-In a user's project, if you need to customize the theme style, or override the style of some components, you can configure the theme of the user project using the 'TinyThemeTool' class provided by the component library. We will also provide more topics for you to choose from in the future.
+In your project, if you need to customize the theme style or override specific component styles, you can configure the project theme using the 'TinyThemeTool' class provided by the component library. We will continue to provide additional theme options for you to choose from in the future.
 
-'ThemeData' is a custom theme data format that allows users to pass in overwritten global CSS variables via the 'data' property and valid css rule blocks via the 'CSS' property.
+'ThemeData' is a custom theme data format that allows users to pass overridden global CSS variables through the 'data' property and valid CSS rule blocks through the 'css' property.
 
 ```ts
 interface ThemeData {
@@ -79,9 +78,9 @@ themeTool.changeTheme({
     </div>
 </div>
 
-## Micro Frontends scene
+## Micro Frontends Scenario
 
-By default, the 'themeTool.changeTheme' method will mount a custom style to the current 'document'. However, in microfront end frameworks, there is often a mechanism for style isolation, such as an unbounded microfront that encloses a 'Web Component' to mount child applications. If you customize the theme in this scenario, you must mount the style to the 'ShadowRoot' of the subapplication.
+By default, the 'themeTool.changeTheme' method mounts custom styles to the current 'document'. However, in micro frontend frameworks, there is typically a style isolation mechanism in place. For instance, an unbounded micro frontend may encapsulate child applications within a 'Web Component'. When customizing themes in such scenarios, you must mount the styles to the 'ShadowRoot' of the sub-application.
 
 ```ts
 import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
@@ -103,60 +102,60 @@ themeTool.changeTheme(
 )
 ```
 
-## OLD 主题配置
+## OLD Theme Configuration
 
-We do not recommend that users continue to use the old theme, but for historical projects, we provide a set of 'CSS variables' of the old theme that users need to adapt in the project.
+We do not recommend that users continue using the old theme. However, for legacy projects, we provide a set of old theme 'CSS variables' that users need to adapt in their projects.
 
 ```ts
 import TinyThemeTool, { OldTheme } from '@opentiny/vue-theme/theme-tool'
 
 const themeTool = new TinyThemeTool(OldTheme)
 
-// themeTool.changeTheme(OldTheme)  // 效果同上
+// themeTool.changeTheme(OldTheme)  // Same effect as above
 ```
 
 <div class="warning custom-block">
-   旧主题不能 100% 还原历史版本的所有细节，如果用户升级后有较大的影响，可以跟我们反馈。也可以回退使用<code> @opentiny/vue@3.18.0 </code> 版本，我们将继续维护一段时间。
+  The old theme cannot 100% replicate all details of historical versions. If users experience significant impacts after upgrading, they can provide feedback to us. Alternatively, you can roll back to version <code>@opentiny/vue@3.18.0</code>, which we will continue to maintain for some time.
 </div>
 
-## Historical version of the theme configuration
+## Historical Version Theme Configuration
 
 <div class="danger custom-block">
-  本节文档仅支持 <code> @opentiny/vue@3.18.0 </code> 版本之前的主题定制
+  This section of the documentation only supports theme customization for versions prior to <code>@opentiny/vue@3.18.0</code>
 </div>
 
-The `TinyVue` multi-topic uses `css` variables and defines a series of global/component style variables that you can adjust according to your requirements.
+The `TinyVue` component library utilizes `css` variables and defines a series of global/component style variables that you can adjust according to your specific requirements.
 
-Variables involved in the topic. To view the variables, perform the following steps:
+To view the theme-related variables, follow these steps:
 
 Source code: [basic-var.less](https://github.com/opentiny/tiny-vue-theme/blob/main/src/base/basic-var.less)
 
-Design website: [Administrative side specification design variable] (<https://rnd-think.huawei.com/think-home/designAnnotation>)
+Design documentation: [Administrative interface specification design variables](https://rnd-think.huawei.com/think-home/designAnnotation)
 
-Basic style variable `npm` Repository path: `@opentiny/vue-theme/theme`
+Basic style variable `npm` repository path: `@opentiny/vue-theme/theme`
 
-### Using predefined themes and dynamically switching themes
+### Using Predefined Themes and Dynamic Theme Switching
 
-Currently, the official offers 4 sets of themes:
+The official distribution currently offers 4 theme sets:
 
--Default Theme
--Infinity Theme `tinyInfinityTheme`
--Aurora Theme `tinyAuroraTheme`
--XDesign Theme `tinySmbTheme`
+- Default Theme
+- Infinity Theme `tinyInfinityTheme`
+- Aurora Theme `tinyAuroraTheme`
+- XDesign Theme `tinySmbTheme`
 
-#### Using predefined themes through alias [Currently only supported: Eurora theme and XDesign theme]
+#### Using Predefined Themes Through Alias [Currently supporting: Aurora theme and XDesign theme]
 
-vue.config.js define
+**vue.config.js configuration:**
 
 ```js
 chainWebpack: (config) => {
   // XDesign Theme
   config.resolve.alias.set('@opentiny/vue-theme', '@opentiny/vue-theme/smb-theme')
-  // Aurora Theme : The aurora theme is to replace all the 'smb' characters in the above SMB themes with 'aurora'
+  // Aurora Theme: Replace all 'smb' characters in the above SMB theme with 'aurora'
 }
 ```
 
-vite.config.js define
+**vite.config.js configuration:**
 
 ```js
 resolve: {
@@ -170,33 +169,34 @@ resolve: {
 }
 ```
 
-#### The specific usage of theme initialization and dynamic theme switching is shown below, and the following code is added to the main.ts file
+#### Theme Initialization and Dynamic Switching Implementation
+
+Add the following code to your main.ts file:
 
 ```js
-import TinyThemeTool from ' @opentiny/vue-theme/theme-tool.js'
+import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
 
-// Infinite theme
+// Import Infinity theme
 import { tinyInfinityTheme } from '@opentiny/vue-theme/theme'
 
-// Initialize the infinite theme.
+// Initialize the infinity theme
 const theme = new TinyThemeTool(tinyInfinityTheme, 'tinyStyleSheetId')
 
-// Customize the theme data format.
+// Custom theme data format
 const tinyTestTheme = {
-  id: 'tiny-test-theme', // Unique ID of a topic. Each topic must be unique.
-  name: 'testTheme', // English name of the theme
-  cnName: 'Test Topic', // Chinese name of the topic
-  data: { 'ti-base-color': '#f2f2f3' } // Subject data
+  id: 'tiny-test-theme', // Unique theme identifier - each theme must have a unique ID
+  name: 'testTheme', // English theme name
+  cnName: 'Test Theme', // Chinese theme name
+  data: { 'ti-base-color': '#f2f2f3' } // Theme data
 }
 
 // Dynamic theme switching
-
 theme.changeTheme(tinyTestTheme)
 ```
 
-### Advanced Usage of Theme Customization
+### Advanced Theme Customization Techniques
 
-Add a custom `css` variable under the global scope.
+Define custom CSS variables at the global scope:
 
 ```css
 :root {
@@ -204,7 +204,7 @@ Add a custom `css` variable under the global scope.
 }
 ```
 
-For performance reasons, it is more recommended that you add custom `css` variables under the class name rather than under the global :root.
+For better performance, it's recommended to define custom CSS variables under specific class names rather than at the global :root level:
 
 ```css
 .tiny-test-class {
@@ -212,83 +212,86 @@ For performance reasons, it is more recommended that you add custom `css` variab
 }
 ```
 
-If you only want to customize a specific component, simply add inline styles for certain components separately.
+To customize a specific component, you can apply inline styles directly:
 
-```js
+```html
 <tiny-button style="--ti-base-color-white: #fefefe">Button</tiny-button>
 ```
 
-If you want to control the `css` variable through `js`, you can do this:
+To control CSS variables through JavaScript:
 
 ```js
 const el = document.documentElement
 
-// Obtain the CSS variable.
+// Retrieve CSS variable value
 getComputedStyle(el).getPropertyValue('--ti-base-color-white')
 
-// Set the CSS variable.
+// Set CSS variable value
 el.style.setProperty('--ti-base-color-white', '#fefefe')
 ```
 
-### Theme variables are standardized and replaced with old and new variable names
-
-Background: Because the `tiny-vue` needs to connect to the theme-based configuration system, the `tiny-vue` component library is later than the `3.5. 0` version, and the name of the customized variable is changed.
+### Standardizing Theme Variables: Old vs New Variable Names
 
-For example, `--ti-base-color-selected-font-color` has been changed to `--ti-base-color-selected-text-color` . `--ti-alert-radius` has been changed to `--ti-alert-border-radius`.
+**Background**: As `tiny-vue` integrates with theme-based configuration systems, component library versions later than `3.5.0` have undergone variable name changes to standardize the naming convention.
 
-If the old `css` variable is used to adjust the style in a project, the upgrade to the new version `tiny-vue` may not take effect. Therefore, the following method of replacing variable names in batches is provided to solve the problem of replacing old and new variables. The procedure is as follows:
+For example:
 
-Replace all the old variable names in the `src` directory in the project as an example: Replace the old and new variable names.
+- `--ti-base-color-selected-font-color` has been renamed to `--ti-base-color-selected-text-color`
+- `--ti-alert-radius` has been renamed to `--ti-alert-border-radius`
 
-Step 1: Click to download the mapping table `newVars.json` and the replacement script `replaceVar.js`.
+When upgrading projects that use old CSS variables for styling, the new `tiny-vue` version may not recognize these variables. To address this, we provide a batch variable name replacement method. The process is as follows:
 
-<script setup>
-  import { pubUrl } from '@/tools'
-</script>
+**Step 1**: Download the mapping table `newVars.json` and replacement script `replaceVar.js`.
 
-<a :href="pubUrl('@demos/resource/newVars.json')" target="_blank" download="newVars.json">newVars.json files</a> and <a :href="pubUrl('@demos/resource/replaceVar.js')" target="_blank" download="replaceVar.js">replaceVar.js files</a>
+[Download newVars.json](newVars.json) and [Download replaceVar.js](replaceVar.js)
 
-Step 2: Place `newVars.json` and `replaceVar.js` in the root directory of the project, which is at the same level as the src directory.
+**Step 2**: Place both `newVars.json` and `replaceVar.js` in your project's root directory (at the same level as the src directory).
 
-<img :src="pubUrl('@demos/resource/theme-demo.png')" class="image" style="box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14); width: 30vw" ><br><br>
+**Step 3**: Execute the following command in your project's root directory:
 
-Step 3: Run the following command in the root directory of the project:
+```bash
+node replaceVar.js
+```
 
-`node replaceVar.js`
+**Handling Special Cases**: Manual replacement may be required for certain variables.
 
-Special cases: If manual replacement is required, how to check which variables need to be manually replaced?
+**Manual Replacement Background**: In the `newVars.json` mapping table, each `key` represents an old variable name and its corresponding `value` represents the new variable name. Some old variables like `--ti-button-padding` are classified as "special variables" because they are split into two or more new variables, making their `value` an array. In such cases, the script cannot perform automatic replacement, requiring manual intervention.
 
-Background of manual replacement: In the mapping table `newVars.json`, `key` is the old variable and `value` is the new variable. If an old variable similar to `--ti-button-padding` is used, it is called `special variable`. Because the variable is split into two or more new variables, the corresponding `value` is an array. In this case, the script cannot automatically replace the variable. You need to manually replace the variable. How to replace the variable?
+**Manual Replacement Process**:
 
-Step 1 Uncomment line 20 in the replaceVar.js file and repeat step 3. You can know where variables need to be manually replaced (the special variable table is attached at the end).
+1. Uncomment line 20 in the replaceVar.js file and re-run step 3. This will identify which variables require manual replacement (refer to the special variables table at the end of this document).
 
 ```js
-// console.log ('The file path to be manually replaced is',statPath,'The variable to be manually replaced is',key)
+console.log('Files requiring manual replacement:', statPath, 'Variables to replace:', key)
 ```
 
-Step 2: Find and modify the variables based on the printed file path and variables. The following are examples to cover all cases that need to be manually replaced:
+2. Based on the output file paths and variables, locate and modify the variables accordingly. The following examples cover all scenarios requiring manual replacement:
 
-`General case`:
+**General Cases**:
 
-Example 1: The special variable table shows that the old variable similar to `--ti-button-padding` is split into `2` new variables, `--ti-button-padding-vertical`and`--ti-button-padding-horizontal`, literally. Padding for `vertical` and `horizontal`, respectively
+**Example 1**: The special variables table shows that the old variable `--ti-button-padding` is split into 2 new variables: `--ti-button-padding-vertical` and `--ti-button-padding-horizontal`, representing vertical and horizontal padding respectively.
 
-If the original project style is `padding: var(--ti-button-padding);`, manually replace it with `padding: var(--ti-button-padding-vertical) var(--ti-button-padding-horizontal);`.
+Original style: `padding: var(--ti-button-padding);`
+Manual replacement: `padding: var(--ti-button-padding-vertical) var(--ti-button-padding-horizontal);`
 
-Example 2: The old variable similar to `--ti-pager-primary-color` is split into `3`new variables, `--ti-pager-primary-bg-color`, `--ti-pager-primary-text-color`, and `--ti-pager-primary-border-color`. Literally `Background Color`, `Text Color`, and `Border Color`
+**Example 2**: The old variable `--ti-pager-primary-color` is split into 3 new variables: `--ti-pager-primary-bg-color`, `--ti-pager-primary-text-color`, and `--ti-pager-primary-border-color`, representing background color, text color, and border color respectively.
 
-If the original format is `--ti-pager-primary-color:red;`, manually replace it with `--ti-pager-primary-bg-color: red; --ti-pager-primary-text-color: red; --ti-pager-primary-border-color: red;`.
+Original format: `--ti-pager-primary-color: red;`
+Manual replacement: `--ti-pager-primary-bg-color: red; --ti-pager-primary-text-color: red; --ti-pager-primary-border-color: red;`
 
-`Special circumstances`:
+**Special Circumstances**:
 
-Example 3: Query the special variable table. It is similar to a variable that contains the `border` field. If the new variable to be split contains `border-weight (border thickness), border-style (border style), and border-color (border color)`, For example, `--tv-Tabs-item-active-border`is split into`--tv-Tabs-item-active-border-weight，--tv-Tabs-item-active-border-style, --tv-Tabs-item-active-border-color`;
+**Example 3**: Variables containing the `border` field require special handling. When split, they contain `border-weight` (border thickness), `border-style` (border style), and `border-color` (border color). For instance, `--tv-Tabs-item-active-border` splits into `--tv-Tabs-item-active-border-weight`, `--tv-Tabs-item-active-border-style`, and `--tv-Tabs-item-active-border-color`.
 
-If the original style is `--tv-Tabs-item-active-border: 1px solid red;`, manually replace it with `--tv-Tabs-item-active-border-weight: 1px; --tv-Tabs-item-active-border-style: solid; --tv-Tabs-item-active-border-color: red;`.
+Original style: `--tv-Tabs-item-active-border: 1px solid red;`
+Manual replacement: `--tv-Tabs-item-active-border-weight: 1px; --tv-Tabs-item-active-border-style: solid; --tv-Tabs-item-active-border-color: red;`
 
-Example 4: If the variable split from `--ti-radio-button-checked-hover-color` contains the `box-shadow` field, you need to write the `box-shadow` style separately.
+**Example 4**: When a variable split from `--ti-radio-button-checked-hover-color` contains the `box-shadow` field, the `box-shadow` style must be written separately.
 
-If the original format is `--ti-radio-button-checked-hover-color: red`, manually replace it with `--ti-radio-button-checked-hover-bg-color: red; --ti-radio-button-checked-hover-border-color: red; --ti-radio-button-checked-hover-box-shadow: -1px 0 0 0 red` . (The value of box-shadow is the same as that of normal writing and can be customized.)
+Original format: `--ti-radio-button-checked-hover-color: red`
+Manual replacement: `--ti-radio-button-checked-hover-bg-color: red; --ti-radio-button-checked-hover-border-color: red; --ti-radio-button-checked-hover-box-shadow: -1px 0 0 0 red;` (The box-shadow value follows standard CSS syntax and can be customized.)
 
-The mapping table of special variables is attached. There are 48 special variables in the newVars.json file, as shown in the following figure.
+The complete mapping table of special variables is provided below. The newVars.json file contains 48 special variables as shown in the following structure.
 
 ```json
 {