@opentinyvue/vue-docs 3.29.2 → 3.30.0

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
 {

package/demos/saas/menus.js

@@ -18,6 +18,7 @@ const noSaasComponents = [
   'BaseSelect',
   'FluentEditor',
   'TreeSelect',
+  'TreeMenu',
   'GridSelect',
   'TimeSelect',
   'Milestone',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opentinyvue/vue-docs",
   "type": "module",
-  "version": "3.29.2",
+  "version": "3.30.0",
   "license": "MIT",
   "devDependencies": {
     "@playwright/test": "~1.49.0",
@@ -44,7 +44,6 @@
     "@docsearch/css": "^3.8.0",
     "@docsearch/js": "^3.8.0",
     "@docsearch/react": "npm:@docsearch/css",
-    "@opentiny/tiny-vue-mcp": "^0.0.5",
     "@opentiny/vue-repl": "^1.1.2",
     "@opentiny/vue-search-box": "~3.28.4",
     "@opentiny/vue-search-box-saas": "~3.28.4",
@@ -67,24 +66,24 @@
     "vue-router": "4.1.5",
     "zod": "^3.24.4",
     "@opentiny-internal/unplugin-virtual-template": "~0.1.1-beta.0",
-    "@opentiny/utils": "~3.29.0",
-    "@opentiny/vue": "~3.29.0",
-    "@opentiny/vue-common": "~3.29.0",
-    "@opentiny/vue-design-aurora": "~3.29.0",
-    "@opentiny/vue-design-saas": "~3.29.0",
-    "@opentiny/vue-design-smb": "~3.29.0",
-    "@opentiny/vue-directive": "~3.29.0",
-    "@opentiny/vue-hooks": "~3.29.0",
-    "@opentiny/vue-flowchart": "~3.29.0",
-    "@opentiny/vue-huicharts": "~3.29.0",
-    "@opentiny/vue-icon": "~3.29.0",
-    "@opentiny/vue-icon-multicolor": "~3.29.0",
-    "@opentiny/vue-icon-saas": "~3.29.0",
-    "@opentiny/vue-locale": "~3.29.0",
-    "@opentiny/vue-modal": "~3.29.0",
-    "@opentiny/vue-renderless": "~3.29.0",
-    "@opentiny/vue-theme": "~3.29.0",
-    "@opentiny/vue-theme-saas": "~3.29.0"
+    "@opentiny/utils": "npm:@opentinyvue/utils@~3.30.0",
+    "@opentiny/vue": "~3.30.0",
+    "@opentiny/vue-common": "~3.30.0",
+    "@opentiny/vue-design-aurora": "~3.30.0",
+    "@opentiny/vue-design-saas": "~3.30.0",
+    "@opentiny/vue-design-smb": "~3.30.0",
+    "@opentiny/vue-directive": "~3.30.0",
+    "@opentiny/vue-flowchart": "~3.30.0",
+    "@opentiny/vue-hooks": "npm:@opentinyvue/vue-hooks@~3.30.0",
+    "@opentiny/vue-huicharts": "~3.30.0",
+    "@opentiny/vue-icon": "~3.30.0",
+    "@opentiny/vue-icon-multicolor": "~3.30.0",
+    "@opentiny/vue-locale": "~3.30.0",
+    "@opentiny/vue-icon-saas": "~3.30.0",
+    "@opentiny/vue-modal": "~3.30.0",
+    "@opentiny/vue-renderless": "~3.30.0",
+    "@opentiny/vue-theme": "~3.30.0",
+    "@opentiny/vue-theme-saas": "~3.30.0"
   },
   "scripts": {
     "start": "vite",

package/src/i18n/index.js

@@ -5,9 +5,8 @@ import zh from './zh.json'
 import en from './en.json'
 import esLA from './es.json'
 import ptBR from './pt.json'
-import { zhCN, enUS } from '@opentiny/tiny-vue-mcp'
 
-const messages = { enUS: { ...en, ...enUS }, zhCN: { ...zh, ...zhCN }, esLA: { ...esLA }, ptBR: { ...ptBR } }
+const messages = { enUS: { ...en }, zhCN: { ...zh }, esLA: { ...esLA }, ptBR: { ...ptBR } }
 
 const langMap = new Map([
   ['zhCN', 'zhCN'],

package/src/main.js

@@ -33,11 +33,16 @@ import '@docsearch/css'
 import { doSearchEverySite } from './tools/docsearch'
 import { getLocaleMode } from './tools/utils.js'
 import '@opentiny/vue-theme/dark-theme-index.css'
-import { createMcpTools, getTinyVueMcpConfig } from '@opentiny/tiny-vue-mcp'
-import { t } from '@opentiny/vue-locale'
-import { registerMcpConfig, customDesignConfig } from '@opentiny/vue-common'
+
+import { customDesignConfig } from '@opentiny/vue-common'
 import { twMerge } from 'tailwind-merge'
 
+// 检测 navigator.webdriver（自动化标记）,如果为 true 则说明当前环境是被自动化测试工具（如 Playwright）控制的
+const isOpenPlaywright = navigator.webdriver
+
+if (!isOpenPlaywright) {
+  import('@opentiny/vue-theme/responsive-index.less')
+}
 // 适配层集成twMerge能力
 if (isSaas) {
   customDesignConfig.twMerge = twMerge
@@ -94,8 +99,6 @@ app.config.globalProperties.tiny_theme = { value: import.meta.env.VITE_TINY_THEM
 if (isSaas) {
   import('./tailwind.css')
 }
-// 注册TinyVue组件mcp配置
-registerMcpConfig(getTinyVueMcpConfig({ t }), createMcpTools)
 
 app.use(router).use(i18n).use(createHead()) // 支持md修改title
 

package/src/views/components-doc/common.vue

@@ -74,9 +74,6 @@
               <!-- 主题变量 -->
               <design-token :name="state.cmpId" :tokenList="state.tokenList" />
             </tiny-tab-item>
-            <tiny-tab-item v-if="mcpInfo.length > 0" title="MCP" name="MCP">
-              <McpDocs :data="mcpInfo" :name="capName" />
-            </tiny-tab-item>
           </tiny-tabs>
 
           <slot name="main-right" />
@@ -119,12 +116,9 @@ import ComponentHeader from '../../components/header.vue'
 import ComponentContributor from '../../components/contributor.vue'
 import ApiDocs from '../../components/api-docs.vue'
 import DesignToken from '../../components/design-token.vue'
-import McpDocs from '../../components/mcp-docs.vue'
 import useTasksFinish from '../../composable/useTasksFinish'
 import list from '@opentiny/vue-theme/token'
 import { isSaas } from '../../const'
-import { getTinyVueMcpConfig } from '@opentiny/tiny-vue-mcp'
-import { camelize, capitalize } from '@vue/shared'
 
 const props = defineProps({ loadData: {}, appMode: {}, demoKey: {} })
 
@@ -476,25 +470,6 @@ const handleAnchorClick = (e, data) => {
   }
 }
 
-// MCP tab页签的数据
-const mcpTools = getTinyVueMcpConfig({ t: null })
-const capName = computed(() => capitalize(camelize(state.cmpId || '')))
-
-const mcpInfo = computed(() => {
-  const schema = mcpTools.components[capName.value]?.paramsSchema
-  if (schema) {
-    return Object.keys(schema).map((name) => {
-      const item = schema[name]
-      return {
-        name,
-        param: item._def?.innerType?._def?.typeName || '',
-        desc: item._def?.description || ''
-      }
-    })
-  }
-  return []
-})
-
 defineExpose({ loadPage })
 </script>
 

package/demos/pc/app/grid/webdoc/grid-ai-agent.js

@@ -1,23 +0,0 @@
-export default {
-  column: '1',
-  owner: '',
-  demos: [
-    {
-      demoId: 'grid-ai-agent',
-      name: { 'zh-CN': '表格智能体', 'en-US': 'grid agent' },
-      desc: {
-        'zh-CN': `表格智能体是表格组件面向 AI 领域的应用，提供了一个基于表格数据的智能体交互界面。用户可以通过自然语言与表格进行交互，智能体会根据表格内容和用户输入执行操作。<br>
-        目前表格智能体支持的操作包括：<br>
-        - 查询表格数据：用户可以输入自然语言查询表格中的数据，智能体会解析查询并返回结果，以及根据结果执行后续的操作。<br>
-        - 滚动到指定行：用户可以通过自然语言指令，将表格滚动到指定位置。<br>    
-        - 选中表格数据：用户可以通过自然语言指令，选中表格数据。<br>    
-        - 选中全部数据：用户可以通过自然语言指令，选中全部数据。<br>    
-
-        通过属性 <code>tiny_mcp_config</code> 可以配置表格的业务意义以及传入<code>server</code>对象，详见示例。`,
-        'en-US': ``
-      },
-      codeFiles: ['ai-agent/basic-usage.vue']
-    }
-  ],
-  apis: [{ name: 'grid-ai-agent', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
-}

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

@@ -1,101 +0,0 @@
-# TinyVue Intelligent Component Access Guide
-
-TinyVue's intelligent components provide a complete intelligent solution, allowing your application to have AI conversation, voice interaction, and other capabilities. This guide will walk you through how to integrate TinyVue's intelligent components into your project.
-
-## Install dependencies
-
-First, you need to install the following core dependency packages:
-
-```bash
-npm install @opentiny/tiny-vue-mcp @opentiny/next-vue @opentiny/vue-common @opentiny/vue
-```
-
-## Access steps
-
-### 1. Initialize MCP Configuration
-
-Initialize MCP configuration in the application entry file (e.g., `main.js`):
-
-```js
-import { registerMcpConfig } from '@opentiny/vue-common'
-import { createMcpTools, getTinyVueMcpConfig } from '@opentiny/tiny-vue-mcp'
-
-// Register TinyVue component MCP configuration
-registerMcpConfig(getTinyVueMcpConfig(), createMcpTools)
-```
-
-### 2. Create NextClient Proxy Client
-
-Create a NextClient proxy client in `App.vue` to establish real-time communication:
-
-```html
-<script setup lang="ts">
-  import { useNextClient } from '@opentiny/next-vue'
-
-  const { sessionId } = useNextClient({
-    clientInfo: {
-      name: 'your-app-name', // Application name
-      version: '1.0.0', // Application version
-      sessionId: 'your-session-id' // Optional, will be passed in by the backend if not provided; for debugging, you can use crypto.randomUUID() to generate a fixed one
-    },
-    proxyOptions: {
-      url: 'your-sse-url', // SSE service address
-      token: 'your-token' // Authentication token
-    }
-  })
-</script>
-
-<template>
-  <div>
-    <h1>NextClient Proxy Client</h1>
-    <p>Session ID: {{ sessionId }}</p>
-  </div>
-</template>
-```
-
-### 3. MCP Component Configuration
-
-When using
-
-```html
-<script setup lang="ts">
-  import { useNextServer } from '@opentiny/next-vue'
-
-  const { server } = useNextServer({
-    serverInfo: { name: 'your-server-name', version: '1.0.0' }
-  })
-</script>
-
-<template>
-  <tiny-grid
-    :tiny_mcp_config="{
-      server,
-      business: {
-        id: 'your-business-id',
-        description: 'Business description'
-      }
-    }"
-  >
-    <!-- Table content -->
-  </tiny-grid>
-</template>
-```
-
-## Notes
-
-1. Ensure that the server supports SSE (Server-Sent Events) connections
-2. It is recommended to use HTTPS in production environments
-3. CORS needs to be correctly configured to support cross-origin requests
-
-## Common issues
-
-1. Session connection failed
-
-   - Check if the SSE service address is correct
-   - Confirm that the network connection is normal
-   - Verify that the authentication information is valid
-
-2. AI conversation response is not available
-   - Check if the session is established normally
-   - Confirm that the prompt item configuration is correct
-   - Check if there are errors in the network request