@opentiny/vue-docs 3.27.1 → 3.28.0

package/demos/pc/menus.js

@@ -53,6 +53,14 @@ const docMenusChildren = [
       theme: ['default']
     }
   },
+  {
+    'title': '全局动效配置',
+    'titleEn': 'motion-configuration',
+    'key': 'motion-configuration',
+    showScene: {
+      theme: ['default']
+    }
+  },
   {
     'title': '智能化',
     'titleEn': 'mcp',
@@ -163,14 +171,7 @@ export const cmpMenus = [
       { 'nameCn': '文件上传', 'name': 'FileUpload', 'key': 'file-upload' },
       { 'nameCn': '富文本', 'name': 'FluentEditor', 'key': 'fluent-editor' },
       { 'nameCn': '表单', 'name': 'Form', 'key': 'form' },
-      // {
-      //   'nameCn': '下拉表格选择器',
-      //   'name': 'GridSelect',
-      //   'key': 'grid-select',
-      //   'meta': {
-      //     'experimental': '3.20.0'
-      //   }
-      // },
+
       { 'nameCn': '输入框', 'name': 'Input', 'key': 'input' },
       { 'nameCn': ' IP地址输入框', 'name': 'IpAddress', 'key': 'ip-address' },
       { 'nameCn': '数字输入框', 'name': 'Numeric', 'key': 'numeric' },
@@ -189,6 +190,14 @@ export const cmpMenus = [
         'nameCn': '树形选择器',
         'name': 'TreeSelect',
         'key': 'tree-select'
+      },
+      {
+        'nameCn': '下拉表格选择器',
+        'name': 'GridSelect',
+        'key': 'grid-select',
+        'meta': {
+          'experimental': '3.27.0'
+        }
       }
     ]
   },
@@ -338,8 +347,8 @@ export const cmpMenus = [
       { 'nameCn': '词云图', 'name': 'Wordcloud Chart', 'key': 'chart-wordcloud' },
       { 'nameCn': '旭日图', 'name': 'Sunburst Chart', 'key': 'chart-sunburst' },
       { 'nameCn': '拓扑图', 'name': 'Graph Chart', 'key': 'chart-graph' },
-      { 'nameCn': '百度地图', 'name': 'BaiduMap Chart', 'key': 'chart-baidu-map' },
-      { 'nameCn': '高德地图', 'name': 'Autonavi Chart', 'key': 'chart-autonavi-map' },
+      // { 'nameCn': '百度地图', 'name': 'BaiduMap Chart', 'key': 'chart-baidu-map' },
+      // { 'nameCn': '高德地图', 'name': 'Autonavi Chart', 'key': 'chart-autonavi-map' },
       { 'nameCn': '箱形图', 'name': 'Boxplot Chart', 'key': 'chart-boxplot' },
       { 'nameCn': '进度图', 'name': 'Process Chart', 'key': 'chart-process' }
     ]

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

@@ -45,8 +45,10 @@ For more information about automatic on-demand imports, please refer to [unplugi
 ## Multi-component introduction
 
 <div class="tip custom-block">
-<p>Warm reminder: Exporting components with Tiny prefix is ​​supported since 3.17.0. If using previous versions, you need to use aliases.</p>
-<p>For example:<code>import { Button as TinyButton } from '@opentiny/vue'</code></p>
+  <div class="custom-block-content">
+    <p>Warm reminder: Exporting components with Tiny prefix is ​​supported since 3.17.0. If using previous versions, you need to use aliases.</p>
+    <p>For example:<code>import { Button as TinyButton } from '@opentiny/vue'</code></p>
+  </div>
 </div>
 
 Multi-component reference is from the dependency package.`@opentiny/vue`Multiple components are referenced in. The following is an example (in the following figure)`Button`and`Alert`Component as an example):

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

@@ -88,8 +88,10 @@ public-hoist-pattern[]=@opentiny/*
 ## 多组件引入
 
 <div class="tip custom-block">
-<p>温馨提示：带有 Tiny 前缀的组件导出自 3.17.0 开始支持。若使用之前版本，需使用别名。</p>
-<p>例如：<code>import { Button as TinyButton } from '@opentiny/vue'</code></p>
+  <div class="custom-block-content">
+    <p>温馨提示：带有 Tiny 前缀的组件导出自 3.17.0 开始支持。若使用之前版本，需使用别名。</p>
+    <p>例如：<code>import { Button as TinyButton } from '@opentiny/vue'</code></p>
+  </div>
 </div>
 
 多组件引用即从依赖包 `@opentiny/vue` 中引用多个组件，参考示例如下（以 `TinyButton` 和 `TinyAlert` 组件为例）：

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

@@ -48,9 +48,11 @@ export default defineConfig({
 ```
 
 <div class="tip custom-block">
-<p> To avoid the uncertainty associated with monthly (minor) upgrades of <code> @opentiny/vue </code>, it is recommended to use ~ before relying on the version number of the package in <code> package.json </code> in your project.
-For example, <code>"@opentiny/vue": "~3.12.0</code>. </p>
-<p><code> @opentiny/vue </code> supports multiple modes. If your project is not a mobile project, you can declare the value of <code>TINY_MODE</code> in <code>process.env</code> in the above configuration code. In order to make the project during construction, the mobile side code can be shaken off and the volume of the packaged product can be optimized. For example, <code>'process.env': {... env,TINY_MODE:'pc'}</code>. </p>
+  <div class="custom-block-content">
+    <p> To avoid the uncertainty associated with monthly (minor) upgrades of <code> @opentiny/vue </code>, it is recommended to use ~ before relying on the version number of the package in <code> package.json </code> in your project.
+    For example, <code>"@opentiny/vue": "~3.12.0</code>. </p>
+    <p><code> @opentiny/vue </code> supports multiple modes. If your project is not a mobile project, you can declare the value of <code>TINY_MODE</code> in <code>process.env</code> in the above configuration code. In order to make the project during construction, the mobile side code can be shaken off and the volume of the packaged product can be optimized. For example, <code>'process.env': {... env,TINY_MODE:'pc'}</code>. </p>
+  </div>
 </div>
 
 ## Import through CDN

package/demos/pc/webdoc/installation.md

@@ -48,9 +48,11 @@ export default defineConfig({
 ```
 
 <div class="tip custom-block">
-  <p>为了避免<code> @opentiny/vue </code> 的月度版本 (minor) 升级带来的不确定因素，因此推荐在您的工程中的<code> package.json </code> 中依赖包的版本号前使用 ~，
-    比如 <code>"@opentiny/vue": "~3.12.0</code>。</p>
-  <p><code> @opentiny/vue </code> 支持多种模式。如果您的工程非移动端工程，可以在上面配置代码中的<code>process.env</code>中，声明<code>TINY_MODE</code>的值，以使工程在构建时，能将移动端模式的代码摇掉，优化打包产物的体积。比如 <code>'process.env': { TINY_MODE:'pc' }</code>。</p>
+  <div class="custom-block-content">
+    <p>为了避免<code> @opentiny/vue </code> 的月度版本 (minor) 升级带来的不确定因素，因此推荐在您的工程中的<code> package.json </code> 中依赖包的版本号前使用 ~，
+      比如 <code>"@opentiny/vue": "~3.12.0</code>。</p>
+    <p><code> @opentiny/vue </code> 支持多种模式。如果您的工程非移动端工程，可以在上面配置代码中的<code>process.env</code>中，声明<code>TINY_MODE</code>的值，以使工程在构建时，能将移动端模式的代码摇掉，优化打包产物的体积。比如 <code>'process.env': { TINY_MODE:'pc' }</code>。</p>
+  </div>
 </div>
 
 ## 通过 CDN 方式引入 (v3.16.0 及之前的版本可用)

package/demos/pc/webdoc/introduce.md

@@ -0,0 +1,64 @@
+# TinyVue
+
+TinyVue 是一个跨端、跨框架的企业级 UI 组件库，基于 OpenTiny Design 设计体系，支持 Vue 2 和 Vue 3，支持 PC 端和移动端。
+
+🌈 特性：
+
+- 📦 包含 130 多个简洁、易用、功能强大的组件
+- 🖖 一套代码同时支持 Vue 2 和 Vue 3
+- 🖥️ 一套代码同时支持 PC 端和移动端
+- 🌍 支持国际化
+- 🎨 支持主题定制
+- 📊 组件内部支持配置式开发，可支持低代码平台可视化组件配置
+- 💡 采用模板、样式、逻辑分离的跨端、跨框架架构，保障灵活性和可移植性
+
+## 🛠️ 核心亮点
+
+### 1、一套代码同时支持 Vue 2 / Vue 3
+
+随着 Vue 3 的逐渐普及以及 Vue 3 开源生态的持续繁荣，未来将会有更多开发者投入 Vue 3 的怀抱，使用 Vue 3 开发新业务，同时存量的 Vue 2 项目也会逐渐迁移到 Vue 3 中来。
+
+目前业界主流的 Vue 组件库，要么只支持 Vue 3，要么分成 Vue 2 / Vue 3 两套组件库，比如饿了么的ElementUI，它的Element UI for Vue 2，而Element Plus for Vue 3。再比如 Ant Design of Vue，它的 1.x 版本 for Vue 2，而 3.x 版本 for Vue 3。
+
+由于 Vue 2 / Vue 3 两套组件库对应两套不同的代码，难免存在组件功能和 API 不同步的情况，开发者如果要从 Vue 2 组件库迁移到 Vue 3 组件库，将面临一定的成本和风险。
+
+OpenTiny 采用组件与框架分离的设计理念（Renderless 架构），将组件拆分为三个构成部分：组件模板、组件样式和组件逻辑，并针对 Vue 2 和 Vue 3 实现了相应的版本适配器，抹平 Vue 2 和 Vue 3 的差异，实现一套代码同时支持 Vue 2 和 Vue 3。
+
+这样不管是 Vue 2 项目还是 Vue 3 项目，使用组件的方式都是一样的，可以实现无缝切换，极大地降低了 Vue 2 迁移到 Vue 3 的成本和风险。
+
+### 2、一套代码同时支持PC和移动端
+
+得益于 OpenTiny 的 Renderless 架构，我们不仅实现了一套代码同时支持 Vue 2 和 Vue 3，还实现了一套代码支持多端，这意味着：
+
+我们支持 PC 和移动端，同一个组件在不同终端表现不同
+
+在多端场景下组件的使用方式完全相同
+
+### 3、组件丰富，功能强大
+
+历经 9 年时间打磨，服务于公司内外部1500多个业务，稳定、可靠、安全。
+
+PC 端包含 130 多个组件，移动端包含 30 多个组件，Table、Tree、Select 等高频组件均内置虚拟滚动，在大数据场景下保持丝滑体验。
+
+除了业界组件库都有的组件，我们也提供了一些 OpenTiny 独有的特色组件：
+
+- Split 面板分隔器
+- IpAddress IP 地址输入框
+- CalendarView 日历
+- Crop 图片裁切
+
+欢迎大家体验和使用！
+
+## 🤝 面向未来的技术架构
+
+OpenTiny 采用组件和框架分离的设计理念，支持跨端跨技术栈跨版本 Web 组件只有一套 API 接口，Web 组件可拆分为三个构成部分：组件模板、组件样式和组件逻辑。
+
+组件模板借助 Renderless Component 无渲染组件的设计模式，分离出来的模板可以多样化，以适配不同的终端，比如 PC 端模板和 Mobile 端模板。
+
+React 组件的业务逻辑借助 React Hooks API，Vue 组件的业务逻辑借助 Vue Composition API，实现面向业务逻辑编程，这样不同技术栈的相同业务逻辑代码就汇聚到一起。
+
+对于同一个技术栈的不同版本，比如 Vue 2.0 和 Vue 3.0 则可以做一个版本适配器，只要保证组件逻辑函数的输入输出保持统一即可。
+
+技术架构图：
+
+<img src="./architecture.png" alt="TinyVue architecture diagram" />

package/demos/pc/webdoc/motion-configuration-en.md

@@ -0,0 +1,183 @@
+# TinyVue Global Motion Configuration
+
+This solution provides **global motion configuration** for TinyVue, based on **LESS and CSS variables**, with the following goals:
+
+1. **Unified Management**: All motions are centrally maintained to avoid scattered definitions and redundant work.
+2. **Global Control**: Use CSS variables to control motion duration, delay, speed, and other parameters.
+3. **Component Integration**: Components can directly use the unified motion class names or `@keyframes`.
+4. **Dynamic Adjustability**: Switch motion styles for different scenarios simply by overriding CSS variables.
+
+## Global Configuration
+
+### Global Variable Definition
+
+Define motion variables in `/packages/theme/src/base/vars.less`:
+
+```less
+:root {
+  /* Ants (marching border) related config */
+  --tv-motion-ants-shift: 8px;
+  --tv-motion-ants-speed: 0.8s;
+
+  /* Other motion parameters... */
+}
+```
+
+Developers can override these variables in the component theme file:
+
+```css
+.copyed-borders {
+  --tv-motion-ants-shift: 12px;
+  --tv-motion-ants-speed: 1.2s;
+}
+```
+
+Or create a `motion-theme.less` file under `/packages/theme/src/base/` to switch global motion styles:
+
+```less
+:root {
+  --tv-motion-ants-shift: 12px;
+  --tv-motion-ants-speed: 1.2s;
+}
+```
+
+## Motion Categories & Directory Structure
+
+All motions are stored in `/packages/theme/src/motion/`, organized by type:
+
+```
+motion/
+  ├─ fade.less        // Fade in/out
+  ├─ slide.less       // Slide
+  ├─ zoom.less        // Zoom
+  ├─ rotate.less      // Rotate
+  ├─ bounce.less      // Bounce
+  ├─ scroll.less      // Scroll
+  ├─ stroke.less      // Stroke
+  ├─ shine.less       // Shine
+  ├─ ants.less        // Ants (marching border)
+  ├─ arrow.less       // Arrow
+  ├─ tab.less         // Tab switching
+  ├─ progress.less    // Progress bar
+  └─ index.less       // Unified import
+```
+
+## Motion Examples
+
+### 1. Fade (fade.less)
+
+```less
+@keyframes fade-in {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes fade-out {
+  0%   { opacity: 1; }
+  100% { opacity: 0; }
+}
+```
+
+Component usage example:
+
+```less
+.@{fade-prefix-cls} {
+  &-enter-active {
+    animation: var(--tv-motion-fade-speed) fade-in ease-out both;
+  }
+  &-leave-active {
+    animation: var(--tv-motion-fade-speed) fade-out ease-in both;
+  }
+}
+```
+
+### 2. Slide (slide.less)
+
+```less
+@keyframes slide-left-in {
+  0%   { opacity: 0; transform: translateX(var(--tv-motion-slide-offset-left)); }
+  50%  { opacity: var(--tv-motion-slide-opacity-mid); transform: translateX(var(--tv-motion-slide-offset-left-mid)); }
+  100% { opacity: 1; transform: translateX(0%); }
+}
+
+@keyframes slide-left-out {
+  0%   { opacity: 1; transform: translateX(0%); }
+  50%  { opacity: var(--tv-motion-slide-opacity-mid); transform: translateX(var(--tv-motion-slide-offset-left-mid)); }
+  100% { opacity: 0; transform: translateX(var(--tv-motion-slide-offset-left)); }
+}
+```
+
+Component usage example:
+
+```less
+.drawer-slide-left-enter-active {
+  animation: slide-left-in var(--tv-motion-slide-speed) linear;
+}
+.drawer-slide-left-leave-active {
+  animation: slide-left-out var(--tv-motion-slide-speed) linear;
+}
+```
+
+### 3. Ants (ants.less, configurable)
+
+```less
+@keyframes ants-x {
+  0%   { background-position: 0 0; }
+  100% { background-position: var(--tv-motion-ants-shift, 8px) 0; }
+}
+
+@keyframes ants-x-rev {
+  0%   { background-position: 0 0; }
+  100% { background-position: calc(-1 * var(--tv-motion-ants-shift, 8px)) 0; }
+}
+```
+
+Component usage example:
+
+```less
+.@{grid-prefix-cls}-copyed-borders {
+  --tv-motion-ants-shift: 13px;
+
+  .@{grid-prefix-cls}-border-top {
+    animation: ants-x var(--tv-motion-ants-speed) linear infinite;
+  }
+  .@{grid-prefix-cls}-border-right {
+    animation: ants-y var(--tv-motion-ants-speed) linear infinite;
+  }
+  .@{grid-prefix-cls}-border-bottom {
+    animation: ants-x-rev var(--tv-motion-ants-speed) linear infinite;
+  }
+  .@{grid-prefix-cls}-border-left {
+    animation: ants-y-rev var(--tv-motion-ants-speed) linear infinite;
+  }
+}
+```
+
+## Component Integration
+
+1. **Global Import**
+   All `@keyframes` are maintained in `transition.less` and `motion/*`, and loaded together.
+
+2. **Local Usage**
+   Components can use the motions via `className` or `animation`.
+
+3. **Configurable Parameters**
+   Developers can override `:root` variables to adjust motion duration, speed, and other parameters.
+
+## Extension & Maintenance
+
+1. **Naming Convention**
+
+   * Use `{type}-{direction}-{state}` format, e.g., `slide-left-in`.
+   * Ensure global uniqueness to avoid conflicts.
+
+2. **Category Management**
+
+   * Motions must be written in the corresponding category file (e.g., slide → `slide.less`).
+   * New variables must be declared in `index.less` first, then used in the specific file.
+
+3. **Documentation & Comments**
+
+   * Each motion category should provide example code and usage instructions.
+   * Add comments before `@keyframes` to indicate purpose and source.
+   * Group related motions together for easier lookup and maintenance.

package/demos/pc/webdoc/motion-configuration.md

@@ -0,0 +1,183 @@
+# TinyVue 全局动效配置
+
+为 TinyVue 提供 **全局动效配置能力**，基于 **LESS 与 CSS 变量**，实现以下目标：
+
+1. **统一管理**：所有动效集中维护，避免分散定义与重复工作。
+2. **全局可控**：通过 CSS 变量统一控制动效的持续时间、延迟、速度等参数。
+3. **组件集成**：组件可直接调用统一的动效类名或 `@keyframes`。
+4. **动态可调**：通过覆盖 CSS 变量即可在不同场景下切换动效风格。
+
+## 全局配置
+
+### 全局变量定义
+
+在 `/packages/theme/src/base/vars.less` 中统一定义动效变量：
+
+```less
+:root {
+  /* 蚂蚁线相关配置 */
+  --tv-motion-ants-shift: 8px;
+  --tv-motion-ants-speed: 0.8s;
+
+  /* 其他动效参数... */
+}
+```
+
+开发者可在组件主题文件中覆盖这些变量：
+
+```css
+.copyed-borders {
+  --tv-motion-ants-shift: 12px;
+  --tv-motion-ants-speed: 1.2s;
+}
+```
+
+也可通过在 `/packages/theme/src/base/` 下创建 `motion-theme.less` 来切换全局动效风格：
+
+```less
+:root {
+  --tv-motion-ants-shift: 12px;
+  --tv-motion-ants-speed: 1.2s;
+}
+```
+
+## 动效分类与目录结构
+
+所有动效存放在 `/packages/theme/src/motion/` 目录下，按类型拆分：
+
+```
+motion/
+  ├─ fade.less        // 淡入淡出
+  ├─ slide.less       // 滑动
+  ├─ zoom.less        // 缩放
+  ├─ rotate.less      // 旋转
+  ├─ bounce.less      // 弹跳
+  ├─ scroll.less      // 滚动
+  ├─ stroke.less      // 描边
+  ├─ shine.less       // 闪烁
+  ├─ ants.less        // 蚂蚁线
+  ├─ arrow.less       // 箭头
+  ├─ tab.less         // Tab 切换
+  ├─ progress.less    // 进度条
+  └─ index.less       // 统一引入
+```
+
+## 动效示例
+
+### 1. 淡入淡出 (fade.less)
+
+```less
+@keyframes fade-in {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes fade-out {
+  0%   { opacity: 1; }
+  100% { opacity: 0; }
+}
+```
+
+组件调用示例：
+
+```less
+.@{fade-prefix-cls} {
+  &-enter-active {
+    animation: var(--tv-motion-fade-speed) fade-in ease-out both;
+  }
+  &-leave-active {
+    animation: var(--tv-motion-fade-speed) fade-out ease-in both;
+  }
+}
+```
+
+### 2. 滑动 (slide.less)
+
+```less
+@keyframes slide-left-in {
+  0%   { opacity: 0; transform: translateX(var(--tv-motion-slide-offset-left)); }
+  50%  { opacity: var(--tv-motion-slide-opacity-mid); transform: translateX(var(--tv-motion-slide-offset-left-mid)); }
+  100% { opacity: 1; transform: translateX(0%); }
+}
+
+@keyframes slide-left-out {
+  0%   { opacity: 1; transform: translateX(0%); }
+  50%  { opacity: var(--tv-motion-slide-opacity-mid); transform: translateX(var(--tv-motion-slide-offset-left-mid)); }
+  100% { opacity: 0; transform: translateX(var(--tv-motion-slide-offset-left)); }
+}
+```
+
+组件调用示例：
+
+```less
+.drawer-slide-left-enter-active {
+  animation: slide-left-in var(--tv-motion-slide-speed) linear;
+}
+.drawer-slide-left-leave-active {
+  animation: slide-left-out var(--tv-motion-slide-speed) linear;
+}
+```
+
+### 3. 蚂蚁线 (ants.less，可配置)
+
+```less
+@keyframes ants-x {
+  0%   { background-position: 0 0; }
+  100% { background-position: var(--tv-motion-ants-shift, 8px) 0; }
+}
+
+@keyframes ants-x-rev {
+  0%   { background-position: 0 0; }
+  100% { background-position: calc(-1 * var(--tv-motion-ants-shift, 8px)) 0; }
+}
+```
+
+组件调用示例：
+
+```less
+.@{grid-prefix-cls}-copyed-borders {
+  --tv-motion-ants-shift: 13px;
+
+  .@{grid-prefix-cls}-border-top {
+    animation: ants-x var(--tv-motion-ants-speed) linear infinite;
+  }
+  .@{grid-prefix-cls}-border-right {
+    animation: ants-y var(--tv-motion-ants-speed) linear infinite;
+  }
+  .@{grid-prefix-cls}-border-bottom {
+    animation: ants-x-rev var(--tv-motion-ants-speed) linear infinite;
+  }
+  .@{grid-prefix-cls}-border-left {
+    animation: ants-y-rev var(--tv-motion-ants-speed) linear infinite;
+  }
+}
+```
+
+## 组件集成方式
+
+1. **全局引入**
+   所有 `@keyframes` 在 `transition.less` 与 `motion/*` 中集中维护，统一加载。
+
+2. **局部调用**
+   组件可通过 `className` 或 `animation` 调用指定动效。
+
+3. **可配置参数**
+   开发者可通过覆盖 `:root` 变量调整动效时长、速度等参数。
+
+## 扩展与维护
+
+1. **命名规范**
+
+   * 采用 `{type}-{direction}-{state}` 格式，例如 `slide-left-in`。
+   * 保证命名全局唯一，避免冲突。
+
+2. **分类管理**
+
+   * 动效必须写在对应分类文件中（如滑动类 → `slide.less`）。
+   * 新增变量需先在 `index.less` 中声明，再在具体文件中调用。
+
+3. **文档与注释**
+
+   * 每类动效提供示例代码和调用方式说明。
+   * 在 `@keyframes` 前添加注释，标注用途和来源。
+   * 同类动效按分组书写，便于快速查找与维护。

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

@@ -1,7 +1,9 @@
 # Theme configuration
 
 <div class="tip custom-block">
-  This section of the document only supports theme customization after <code> @opentiny/vue@3.19.0 </code>. For historical theme configuration, see <a href='# Historical version of the theme configuration '> Archive information </a> at the bottom of the current document.
+  <div class="custom-block-content">
+    This section of the document only supports theme customization after <code> @opentiny/vue@3.19.0 </code>. For historical theme configuration, see <a href='# Historical version of the theme configuration '> Archive information </a> at the bottom of the current document.
+  </div>
 </div>
 
 537/5000
@@ -71,10 +73,10 @@ themeTool.changeTheme({
 ```
 
 <div class="info custom-block">
-In many historical projects, many developers will write component styles by <code>important</code> and <code>:deep()</code> to override certain component library styles. These styles are scattered throughout the components. When later versions of the component library are upgraded, the component structure or class name may be adjusted, resulting in an override failure. <br><br>
-
-You are advised to use <code>TinyThemeTool</code> to override component styles. In this way, modified CSS rules are centralized to facilitate subsequent maintenance. Users can also introduce 'CSS files' to override styles, but make sure that the styles in them take precedence over the component library.
-
+  <div class="custom-block-content">
+    In many historical projects, many developers will write component styles by <code>important</code> and <code>:deep()</code> to override certain component library styles. These styles are scattered throughout the components. When later versions of the component library are upgraded, the component structure or class name may be adjusted, resulting in an override failure. <br><br>
+    You are advised to use <code>TinyThemeTool</code> to override component styles. In this way, modified CSS rules are centralized to facilitate subsequent maintenance. Users can also introduce 'CSS files' to override styles, but make sure that the styles in them take precedence over the component library.
+    </div>
 </div>
 
 ## Micro Frontends scene

package/demos/pc/webdoc/theme.md

@@ -1,7 +1,9 @@
 # 主题配置
 
 <div class="warning custom-block">
-  本节文档仅支持 <code> @opentiny/vue@3.19.0 </code> 及其之后版本的主题定制，更早的历史版本的主题配置，请参阅当前文档底部的 <a href='#历史版本的主题配置'>历史版本的主题配置</a>
+  <div class="custom-block-content">
+    本节文档仅支持 <code> @opentiny/vue@3.19.0 </code> 及其之后版本的主题定制，更早的历史版本的主题配置，请参阅当前文档底部的 <a href='#历史版本的主题配置'>历史版本的主题配置</a>
+  </div>
 </div>
 
 为了给开发者带来更好的用户体验，从 <code> @opentiny/vue@3.19.0 </code> 版本开始，组件库的整体风格切换为 `Opentiny Design` 新风格。
@@ -73,10 +75,10 @@ themeTool.changeTheme({
 ```
 
 <div class="tip custom-block">
-在一些用户项目中，许多开发者会在编写组件和页面的样式时，通过<code>important</code> 和 <code>:deep()</code> 来覆盖某些组件库的样式，这些样式就会散落在各个组件里。在组件库后续版本升级时，可能会调整组件结构或类名，造成样式覆盖失效，不建议这样做。 <br><br>
-
-我们建议用户使用 <code>TinyThemeTool</code> 的方法来覆盖组件样式，这样 CSS 规则会集中在一起，方便后续维护。除此之外，用户也可以将自定义样式统一写在一个 `CSS文件` 中并引入项目，但要保证其中的样式优先级高于组件库的优先级。
-
+  <div class="custom-block-content">
+    在一些用户项目中，许多开发者会在编写组件和页面的样式时，通过<code>important</code> 和 <code>:deep()</code> 来覆盖某些组件库的样式，这些样式就会散落在各个组件里。在组件库后续版本升级时，可能会调整组件结构或类名，造成样式覆盖失效，不建议这样做。 <br><br>
+    我们建议用户使用 <code>TinyThemeTool</code> 的方法来覆盖组件样式，这样 CSS 规则会集中在一起，方便后续维护。除此之外，用户也可以将自定义样式统一写在一个 `CSS文件` 中并引入项目，但要保证其中的样式优先级高于组件库的优先级。
+  </div>
 </div>
 
 ## 微前端场景
@@ -116,8 +118,11 @@ const themeTool = new TinyThemeTool(tinyOldTheme)
 ```
 
 <div class="warning custom-block">
-  <p> 旧主题不能 100% 还原历史版本的所有细节，如果用户升级后有较大的影响，可以跟我们反馈，也可以回退使用<code> @opentiny/vue@3.18.0 </code> 版本。</p>
-  <p> 如果需要切换 <code>Aurora</code> 主题，可以从上面导出 <code>tinyAuroraTheme</code> 的主题。 </p>
+  <div class="custom-block-content">
+    <p> 旧主题不能 100% 还原历史版本的所有细节，如果用户升级后有较大的影响，可以跟我们反馈，也可以回退使用<code> @opentiny/vue@3.18.0 </code> 版本。</p>
+    <br>
+    <p> 如果需要切换 <code>Aurora</code> 主题，可以从上面导出 <code>tinyAuroraTheme</code> 的主题。 </p>
+  </div>
 </div>
 
 ## 历史版本的主题配置

package/demos/saas/menus.js

@@ -6,13 +6,26 @@ const noSaasComponents = [
   'ActionMenu',
   'ColorPicker',
   'ColorSelectPanel',
+  'DatePanel',
   'DatePickerMobileFirst',
   'MindMap',
   'QrCode',
   'RichTextEditor',
   'TimelineItem',
   'Watermark',
-  'Statistic'
+  'Statistic',
+  'Space',
+  'BaseSelect',
+  'FluentEditor',
+  'TreeSelect',
+  'GridSelect',
+  'TimeSelect',
+  'Milestone',
+  'ConfigProvider',
+  'Skeleton',
+  'BulletinBoard',
+  'Crop',
+  'PopEditor'
 ]
 
 // mobile-first上所有分类，pc上都有，因此可以用pc端menu分类进行合并

package/env/.env.saaspages

@@ -1,6 +1,6 @@
 # 1、声明一个变量
 VITE_CONTEXT=/tiny-vue-saas-web-doc/
-VITE_BUILD_TARGET='inner'
+VITE_BUILD_TARGET='open'
 VITE_TINY_THEME='saas'
 # 官网应用类型：pc / mobile / mobile-first
 VITE_APP_MODE='pc'