@opentiny/vue-docs 3.27.2 → 3.28.1

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'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-docs",
   "type": "module",
-  "version": "3.27.2",
+  "version": "3.28.1",
   "license": "MIT",
   "dependencies": {
     "@docsearch/css": "^3.8.0",
@@ -27,24 +27,24 @@
     "vue-i18n": "~9.14.3",
     "vue-router": "4.1.5",
     "zod": "^3.24.4",
-    "@opentiny/utils": "~3.27.0",
-    "@opentiny/vue": "~3.27.0",
-    "@opentiny/vue-common": "~3.27.0",
-    "@opentiny/vue-design-saas": "~3.27.0",
-    "@opentiny/vue-design-smb": "~3.27.0",
-    "@opentiny/vue-directive": "~3.27.0",
-    "@opentiny/vue-flowchart": "~3.27.0",
-    "@opentiny/vue-design-aurora": "~3.27.0",
-    "@opentiny/vue-huicharts": "~3.27.0",
-    "@opentiny/vue-hooks": "~3.27.0",
-    "@opentiny/vue-icon": "~3.27.0",
-    "@opentiny/vue-icon-multicolor": "~3.27.0",
-    "@opentiny/vue-icon-saas": "~3.27.0",
-    "@opentiny/vue-locale": "~3.27.0",
-    "@opentiny/vue-modal": "~3.27.0",
-    "@opentiny/vue-renderless": "~3.27.0",
-    "@opentiny/vue-theme": "~3.27.0",
-    "@opentiny/vue-theme-saas": "~3.27.0"
+    "@opentiny/utils": "~3.28.0",
+    "@opentiny/vue": "~3.28.0",
+    "@opentiny/vue-common": "~3.28.0",
+    "@opentiny/vue-design-aurora": "~3.28.0",
+    "@opentiny/vue-design-saas": "~3.28.0",
+    "@opentiny/vue-design-smb": "~3.28.0",
+    "@opentiny/vue-directive": "~3.28.0",
+    "@opentiny/vue-flowchart": "~3.28.0",
+    "@opentiny/vue-icon": "~3.28.0",
+    "@opentiny/vue-hooks": "~3.28.0",
+    "@opentiny/vue-huicharts": "~3.28.0",
+    "@opentiny/vue-icon-multicolor": "~3.28.0",
+    "@opentiny/vue-icon-saas": "~3.28.0",
+    "@opentiny/vue-locale": "~3.28.0",
+    "@opentiny/vue-modal": "~3.28.0",
+    "@opentiny/vue-renderless": "~3.28.0",
+    "@opentiny/vue-theme-saas": "~3.28.0",
+    "@opentiny/vue-theme": "~3.28.0"
   },
   "devDependencies": {
     "@playwright/test": "~1.49.0",