From 330a00515250817809735af517e28f404e95fffe Mon Sep 17 00:00:00 2001
From: liweijie <674416404@qq.com>
Date: Thu, 8 Oct 2026 15:14:45 +0800
Subject: [PATCH 01/27] chore: migrate to eslint flat config and prettier 3
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 用 eslint.config.mjs 合并根/site/site-components/theme-generator/auto-release 的 ESLint 配置
- 升级 eslint 10 / prettier 3 / typescript-eslint,移除子包独立 lint 脚本
- 保留错误 cause,清理失效 disable 注释,修复 template-shadow 与属性顺序
- 对 CLI 脚本与受信任 v-html 内容按路径关闭对应规则
---
.cnb.yml | 3 +-
.eslintrc.js | 14 -
.github/ISSUE_TEMPLATE/bug-report.zh-CN.yml | 4 +-
.../ISSUE_TEMPLATE/feature-report.zh-CN.yml | 4 +-
.github/ISSUE_TEMPLATE/new-component.zh-CN.md | 5 +-
.github/workflows/ci.yml | 2 +-
.github/workflows/pkg-pr-new.yml | 7 +-
.github/workflows/service-update-schedule.yml | 4 +-
README.md | 1 -
docs/CODE_OF_CONDUCT.md | 2 +-
docs/awesome_zh-CN.md | 8 +-
docs/design/TDesign_Axure_Library Guide.md | 30 +-
docs/design/offices-task_zh-CN.md | 450 +++---
docs/design/offices_zh-CN.md | 43 +-
docs/faq_zh-CN.md | 3 +-
docs/introduce.md | 2 +-
docs/tech.md | 2 +-
docs/tech_zh-CN.md | 21 +-
eslint.config.mjs | 136 ++
package.json | 23 +-
packages/auto-release-collection/.eslintrc.js | 8 -
packages/auto-release-collection/package.json | 3 -
packages/auto-release-collection/src/utils.ts | 4 +-
packages/site-components/.eslintrc.js | 15 -
packages/site-components/README.md | 4 +-
packages/site-components/index.html | 2 +-
packages/site-components/package.json | 3 -
.../src/components/td-ai-button/style.less | 6 +-
.../src/components/td-ai-button/utils.ts | 11 +-
.../src/components/td-backtop/style.less | 9 +-
.../src/components/td-code-block/style.less | 16 +-
.../src/components/td-code/style.less | 7 +-
.../src/components/td-contributors/style.less | 3 +-
.../src/components/td-doc-aside/style.less | 26 +-
.../src/components/td-doc-badge/style.less | 2 +-
.../components/td-doc-changelog/style.less | 468 +++---
.../src/components/td-doc-content/style.less | 14 +-
.../src/components/td-doc-copy/style.less | 14 +-
.../src/components/td-doc-demo/index.ts | 2 +-
.../src/components/td-doc-demo/style.less | 20 +-
.../src/components/td-doc-empty/style.less | 1 -
.../src/components/td-doc-footer/portal.less | 4 +-
.../src/components/td-doc-footer/style.less | 5 +-
.../src/components/td-doc-header/index.ts | 83 +-
.../src/components/td-doc-header/style.less | 5 +-
.../td-doc-header/td-doc-issue/style.less | 3 +-
.../src/components/td-doc-history/index.ts | 14 +-
.../src/components/td-doc-history/style.less | 2 +-
.../src/components/td-doc-layout/index.ts | 2 +-
.../src/components/td-doc-layout/style.less | 4 +-
.../src/components/td-doc-phone/index.ts | 38 +-
.../src/components/td-doc-phone/style.less | 19 +-
.../src/components/td-doc-popup/index.ts | 3 +-
.../src/components/td-doc-search/algolia.ts | 2 +-
.../src/components/td-doc-search/hotkeys.ts | 6 +-
.../src/components/td-doc-search/style.less | 12 +-
.../src/components/td-doc-search/views.ts | 16 +-
.../src/components/td-doc-tabs/style.less | 6 +-
.../src/components/td-doc-usage/index.ts | 84 +-
.../src/components/td-doc-usage/style.less | 36 +-
.../src/components/td-header/index.ts | 44 +-
.../src/components/td-header/portal.less | 20 +-
.../src/components/td-header/style.less | 14 +-
.../td-header/td-collapse-menu/index.ts | 2 +-
.../td-header/td-collapse-menu/portal.less | 25 +-
.../src/components/td-logo/index.ts | 17 +-
.../src/components/td-message/README.md | 2 +-
.../src/components/td-message/style.less | 4 +-
.../src/components/td-portal/index.ts | 12 +-
.../src/components/td-portal/style.less | 5 +-
.../src/components/td-select/index.ts | 2 +-
.../src/components/td-select/style.less | 3 +-
.../src/components/td-stats/index.ts | 8 +-
.../src/components/td-switch/style.less | 2 +-
.../src/components/td-theme-tabs/style.less | 6 +-
.../src/components/td-tooltip/style.less | 15 +-
.../site-components/src/styles/animation.less | 52 +-
packages/site-components/src/styles/dark.less | 48 +-
packages/site-components/src/styles/docs.less | 58 +-
packages/site-components/src/styles/main.less | 14 +-
.../site-components/src/styles/nprogress.less | 27 +-
.../src/styles/prism-theme-dark.less | 124 +-
.../src/styles/prism-theme.less | 41 +-
.../site-components/src/styles/reset.less | 15 +-
.../site-components/src/styles/timeline.less | 2 +-
packages/site-components/src/styles/vars.less | 64 +-
packages/theme-generator/.eslintrc.js | 40 -
.../theme-generator/CONTRIBUTING_zh-CN.md | 16 +-
packages/theme-generator/index.html | 22 +-
packages/theme-generator/package.json | 8 +-
.../components/color-collapse/index.vue | 20 +-
.../components/color-column/index.vue | 18 +-
.../theme-generator/src/color-panel/index.vue | 86 +-
.../src/common/components/collapse/index.vue | 4 +-
.../common/components/color-picker/index.vue | 2 +-
.../components/segment-selection/index.vue | 10 +-
.../common/components/size-slider/index.vue | 6 +-
.../built-in/css/mobile/TDesign/dark.css | 36 +-
.../built-in/css/mobile/TDesign/extra.css | 76 +-
.../built-in/css/mobile/TDesign/light.css | 36 +-
.../src/common/themes/built-in/css/vars.css | 104 +-
.../themes/built-in/css/web/TCloud/dark.css | 262 ++--
.../themes/built-in/css/web/TCloud/extra.css | 883 +++++------
.../themes/built-in/css/web/TCloud/light.css | 36 +-
.../themes/built-in/css/web/TDesign/dark.css | 262 ++--
.../themes/built-in/css/web/TDesign/extra.css | 236 +--
.../themes/built-in/css/web/TDesign/light.css | 34 +-
.../src/common/themes/iframe.ts | 14 +-
.../src/common/utils/animation.ts | 2 -
packages/theme-generator/src/dev-tools.ts | 3 +-
.../components/recommend-themes/index.vue | 2 +-
.../theme-generator/src/float-dock/index.vue | 12 +-
.../components/font-color-adjust.vue | 14 +-
.../components/font-size-adjust.vue | 30 +-
.../components/line-height-adjust.vue | 32 +-
.../theme-generator/src/font-panel/index.vue | 6 +-
packages/theme-generator/src/generator.vue | 6 +-
.../src/panel-drawer/index.vue | 21 +-
.../src/radius-panel/index.vue | 18 +-
.../shadow-panel/components/shadow-card.vue | 8 +-
.../shadow-panel/components/shadow-editor.vue | 12 +-
.../shadow-panel/components/shadow-layer.vue | 2 +-
.../src/shadow-panel/index.vue | 4 +-
.../src/size-panel/components/size-adjust.vue | 10 +-
.../size-panel/components/size-display.vue | 2 +-
.../theme-generator/src/size-panel/index.vue | 18 +-
pnpm-lock.yaml | 1338 +++++++----------
pnpm-workspace.yaml | 4 +-
site/.eslintignore | 13 -
site/.eslintrc | 50 -
site/contributor.html | 2 +-
site/index.html | 2 +-
site/package.json | 11 +-
site/plugins/icons-manifest/index.ts | 4 +-
site/postcss.config.js | 16 +-
site/src/components/avatar.vue | 2 +-
site/src/components/design-source.vue | 4 +-
site/src/main.ts | 1 -
site/src/pages/about/release.vue | 4 +-
site/src/pages/design/color.vue | 46 +-
site/src/pages/design/dark.vue | 16 +-
site/src/pages/design/fonts.vue | 16 +-
site/src/pages/design/source.vue | 20 +-
site/src/pages/design/values.vue | 6 +-
site/src/pages/home/avatar.vue | 4 +-
site/src/pages/home/banner.vue | 18 +-
site/src/pages/home/component-list.vue | 6 +-
site/src/pages/home/index.vue | 68 +-
site/src/style/color.less | 24 +-
site/src/style/fonts.less | 32 +-
site/src/style/home.less | 42 +-
site/src/style/icon.less | 53 +-
site/src/style/motion.less | 22 +-
site/src/style/source.less | 367 ++---
154 files changed, 3395 insertions(+), 3581 deletions(-)
delete mode 100644 .eslintrc.js
create mode 100644 eslint.config.mjs
delete mode 100644 packages/auto-release-collection/.eslintrc.js
delete mode 100644 packages/site-components/.eslintrc.js
delete mode 100644 packages/theme-generator/.eslintrc.js
delete mode 100644 site/.eslintignore
delete mode 100644 site/.eslintrc
diff --git a/.cnb.yml b/.cnb.yml
index 346310a88..9f29ab8c2 100644
--- a/.cnb.yml
+++ b/.cnb.yml
@@ -23,5 +23,4 @@ $:
- docker
stages:
- name: install dependencies
- script: pnpm install
-
+ script: pnpm install
diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index a57ee81d6..000000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,14 +0,0 @@
-module.exports = {
- root: true,
- env: {
- node: true,
- browser: true,
- es6: true,
- },
- extends: ['eslint:recommended', 'prettier'],
- plugins: ['html', 'prettier'],
- rules: {
- 'prettier/prettier': ['error', {}, { usePrettierrc: true }],
- 'no-console': ['warn', { allow: ['warn', 'error'] }],
- },
-};
diff --git a/.github/ISSUE_TEMPLATE/bug-report.zh-CN.yml b/.github/ISSUE_TEMPLATE/bug-report.zh-CN.yml
index 8f1908e1d..6f4da6f68 100644
--- a/.github/ISSUE_TEMPLATE/bug-report.zh-CN.yml
+++ b/.github/ISSUE_TEMPLATE/bug-report.zh-CN.yml
@@ -1,7 +1,7 @@
name: 反馈 Bug
description: 通过 github 模板进行 Bug 反馈。
-title: "[组件名称] 描述问题的标题"
-labels: [🐞 bug,🧐 unconfirmed]
+title: '[组件名称] 描述问题的标题'
+labels: [🐞 bug, 🧐 unconfirmed]
body:
- type: markdown
attributes:
diff --git a/.github/ISSUE_TEMPLATE/feature-report.zh-CN.yml b/.github/ISSUE_TEMPLATE/feature-report.zh-CN.yml
index dab32894e..924375177 100644
--- a/.github/ISSUE_TEMPLATE/feature-report.zh-CN.yml
+++ b/.github/ISSUE_TEMPLATE/feature-report.zh-CN.yml
@@ -1,7 +1,7 @@
name: 反馈新功能
description: 通过 github 模板进行新功能反馈。
-title: "[组件名称] 描述问题的标题"
-labels: [💪🏻 enhancement,🧐 unconfirmed]
+title: '[组件名称] 描述问题的标题'
+labels: [💪🏻 enhancement, 🧐 unconfirmed]
body:
- type: markdown
attributes:
diff --git a/.github/ISSUE_TEMPLATE/new-component.zh-CN.md b/.github/ISSUE_TEMPLATE/new-component.zh-CN.md
index 05b48991c..b9e486b1e 100644
--- a/.github/ISSUE_TEMPLATE/new-component.zh-CN.md
+++ b/.github/ISSUE_TEMPLATE/new-component.zh-CN.md
@@ -4,21 +4,21 @@ about: 新组件招募
title: ''
labels: ''
assignees: ''
-
---
-## 组件名称中英文
+## 组件名称中英文
### 交互稿
+
交互稿:
### 设计稿
@@ -42,4 +42,3 @@ issue label 需要设置为 help wanted,发起招募
详细提交过程请参考:[如何贡献](https://tdesign.tencent.com/about/contributing)。
欢迎填写[《贡献者加入意向收集》](https://wj.qq.com/s2/9772260/7cbe/)问卷加入 TDesign 贡献者群,参与过程中遇到的各类问题可以得到实时解答和指引。
-
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 99ba26e17..dbe84dece 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -2,7 +2,7 @@ name: ci
on:
pull_request:
- branches: [ main]
+ branches: [main]
types: [opened, synchronize, reopened]
jobs:
diff --git a/.github/workflows/pkg-pr-new.yml b/.github/workflows/pkg-pr-new.yml
index d24140fc1..cba559249 100644
--- a/.github/workflows/pkg-pr-new.yml
+++ b/.github/workflows/pkg-pr-new.yml
@@ -31,7 +31,7 @@ jobs:
- run: pnpm --filter '@tdesign/site-components' --filter '@tdesign/theme-generator' run build
- run: pnpm dlx pkg-pr-new publish './packages/site-components' './packages/theme-generator'
-
+
build-tdesign-vue-site:
if: github.repository == 'Tencent/tdesign' && github.event_name == 'pull_request'
needs: build
@@ -278,14 +278,13 @@ jobs:
- run: pnpm uniapp build:npm
- - run: pnpm -C packages/tdesign-uniapp/example build:h5 --mode preview
+ - run: pnpm -C packages/tdesign-uniapp/example build:h5 --mode preview
- uses: actions/upload-artifact@v7
with:
name: tdesign-uniapp-site
path: packages/tdesign-uniapp/site/dist
- retention-days: 5
-
+ retention-days: 5
build-site:
if: github.repository == 'Tencent/tdesign' && github.event_name == 'pull_request'
diff --git a/.github/workflows/service-update-schedule.yml b/.github/workflows/service-update-schedule.yml
index bd8bc7a34..c5a8c5518 100644
--- a/.github/workflows/service-update-schedule.yml
+++ b/.github/workflows/service-update-schedule.yml
@@ -5,12 +5,12 @@ name: service-update-schedule
on:
workflow_dispatch:
schedule:
- - cron: "0 0 * * 5"
+ - cron: '0 0 * * 5'
jobs:
create-report:
# prevents this action from running on forks
- if: github.repository == 'Tencent/tdesign'
+ if: github.repository == 'Tencent/tdesign'
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v7
diff --git a/README.md b/README.md
index 0a1a4d6f3..f98302ccf 100644
--- a/README.md
+++ b/README.md
@@ -139,7 +139,6 @@ For more information, refer to the guide section of each component, such as [But
https://tdesign.tencent.com/contributor.html
-
## Contributing Guide
Any contributions to TDesign are welcome. Please read [《contributing for TDesign》](https://tdesign.tencent.com/about/contributing) for more information.
diff --git a/docs/CODE_OF_CONDUCT.md b/docs/CODE_OF_CONDUCT.md
index efa0541d1..e3e37b5a9 100644
--- a/docs/CODE_OF_CONDUCT.md
+++ b/docs/CODE_OF_CONDUCT.md
@@ -43,4 +43,4 @@ Project maintainers who do not follow or enforce the Code of Conduct in good fai
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version].
[homepage]: http://contributor-covenant.org
-[version]: http://contributor-covenant.org/version/1/4/
\ No newline at end of file
+[version]: http://contributor-covenant.org/version/1/4/
diff --git a/docs/awesome_zh-CN.md b/docs/awesome_zh-CN.md
index d9dabd23d..d6d356386 100644
--- a/docs/awesome_zh-CN.md
+++ b/docs/awesome_zh-CN.md
@@ -42,10 +42,10 @@ title: 社区资源
## 📦 插件和工具
-名称 | 描述
---|--
-[unplugin-auto-import](https://github.com/antfu/unplugin-auto-import)
[unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) | 用于自动引入 TDesign 桌面端 [Vue2](https://github.com/Tencent/tdesign-vue)、[Vue3](https://github.com/Tencent/tdesign-vue-next) 的组件,使用请参考 [自动引入章节](https://tdesign.tencent.com/vue/getting-started#%E8%87%AA%E5%8A%A8%E5%BC%95%E5%85%A5)
-[formilyjs/tdesign-react](https://github.com/formilyjs/tdesign-react) | 结合 Formily & tdesign-react 组件库能力的社区贡献产品
+| 名称 | 描述 |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import)
[unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) | 用于自动引入 TDesign 桌面端 [Vue2](https://github.com/Tencent/tdesign-vue)、[Vue3](https://github.com/Tencent/tdesign-vue-next) 的组件,使用请参考 [自动引入章节](https://tdesign.tencent.com/vue/getting-started#%E8%87%AA%E5%8A%A8%E5%BC%95%E5%85%A5) |
+| [formilyjs/tdesign-react](https://github.com/formilyjs/tdesign-react) | 结合 Formily & tdesign-react 组件库能力的社区贡献产品 |
## 📄 文章
diff --git a/docs/design/TDesign_Axure_Library Guide.md b/docs/design/TDesign_Axure_Library Guide.md
index d3fa5439e..d543fc4eb 100644
--- a/docs/design/TDesign_Axure_Library Guide.md
+++ b/docs/design/TDesign_Axure_Library Guide.md
@@ -2,11 +2,7 @@
V1.1.0_2022/08/18
-
-
-------
-
-
+---
## **元件库简介**
@@ -17,39 +13,35 @@ V1.1.0_2022/08/18
- 兼容并济:兼容Axure8.0及以上版本,Windows 与 Mac 平台通用,内容持续更新
- 官方用户群:微信或企业微信扫码加入,随时与官方交流,获取最新动态
- 
-
-------
-
+ 
+---
## **一、下载及安装**
1. 访问[TDesign 设计资源库](https://tdesign.tencent.com/source)下载最新版 Axure 元件库
-
+ 
2. 打开 Axure,找到【元件库面板】
-
+ 
3. 单击元件库面板右上角【选项】按钮,在下拉菜单中点击【载入元件库】按钮
-
+ 
4. 选择【TDesign_Axure_Library_Web_1.1.0.rplib】
-
+ 
5. 稍等片刻,导入完成后就可以在元件库面板看到已装载的 TDesign 元件库了
-
-
-
+ 
## **二、使用元件库**
1. 在元件库中找到需要的元件,你也可以通过搜索元件名称找到需要的元件
2. 将元件拖动到画布
-
+ 
3. 解除编组(shift+command+g),删除不需要的元件,修改现有元件内容(注:按钮、列表等做了自适应设计,可以根据文本宽度自动扩充宽度)
-
+ 
4. 完成设计后,点击右上角【预览】按钮即可在浏览中查看(注:按钮等元素已内置 hover、点击等状态)
-
+ 
diff --git a/docs/design/offices-task_zh-CN.md b/docs/design/offices-task_zh-CN.md
index afca6122a..a12a413ff 100644
--- a/docs/design/offices-task_zh-CN.md
+++ b/docs/design/offices-task_zh-CN.md
@@ -1,225 +1,225 @@
----
-title: 中后台高频任务设计方法
-description: 明确整体框架和页面布局后,根据业务场景,对相关任务流程进行设计。
-isDesign: true
----
-
-中后台产品虽服务不同业务,但存在非常同质化的高频任务,掌握这些任务的设计方法,可有效提高中后台的交互体验。
-
-## 数据筛选与查询
-
-按所需条件或类型选择需要的数据项、或查询数据结果的任务。常应用于「[仪表盘](https://tdesign.tencent.com/starter/vue/#/dashboard/base) 」「[列表页](https://tdesign.tencent.com/starter/vue/#/list/base)」。
-
-### A 查询后生效
-
-何时使用:当用户对数据查询范围有明确针对性,需要对数据进行一系列筛选过滤的使用场景时,可使用查询器进行一次性提交生效。
-
-核心流程:选择条件 - 触发查询 - 获得结果数据 - 清空条件
-
-相关组件:[时间选择器](/vue/components/timepicker) 、[日期选择器](/vue/components/datepicker) 、[输入框](/vue/components/input) 、[选择器](/vue/components/select) 、[按钮](/vue/components/button) 、[表格](/vue/components/table) 等
-
-
-
-### B 立即生效
-
-何时使用:当数据查询范围较为随机,用户需要反复、多次修改条件时,可实时显示筛选结果,来提高查询效率。
-
-核心流程:条件选择 - 获得结果数据 -条件修改 - 获得结果数据
-
-相关组件:[时间选择器](/vue/components/timepicker) 、[日期选择器](/vue/components/datepicker) 、[输入框](/vue/components/input) 、[选择器](/vue/components/select) 、[按钮](/vue/components/button) 、[表格](/vue/components/table) 等
-
-
-
-### 其他场景:折叠条件
-
-何时使用:当筛选项过多,全部显示会增加用户信息识别效率,可只显示高频选项,其他选项折叠,需要时自定义展开。
-
-核心流程:展开条件 - 条件选择 - 获得结果数据
-
-相关组件:[时间选择器](/vue/components/timepicker) 、[日期选择器](/vue/components/datepicker) 、[输入框](/vue/components/input) 、[选择器](/vue/components/select) 、[按钮](/vue/components/button) 、[表格](/vue/components/table) 等
-
-
- 图示:隐藏固定选项的条件
-
-
- 图示:隐藏固定选项的条件
-
-### 其他场景:条件模版保存与调用
-
-何时使用:当用户的筛选需求个性化较强,需要根据自身需要使用筛选项时,提供可自定义保存的筛选器。
-
-核心流程:条件选择 - 保存为模版 -模版调用
-
-相关组件:[时间选择器](/vue/components/timepicker) 、[日期选择器](/vue/components/datepicker) 、[输入框](/vue/components/input) 、[选择器](/vue/components/select) 、[按钮](/vue/components/button) 、[表格](/vue/components/table) 等
-
-
-
-
-
-### B 选择后触发
-
-何时使用:当页面已有主要按钮,批量操作为次级或非高频操作时,可在选择数据后显示操作区。
-
-核心流程:选择要操作的内容 - 进行操作 - 显示操作结果
-
-相关组件:[下拉框](/vue/components/dropdown) 、[多选框](/vue/components/checkbox) 、[输入框](/vue/components/input) 、[选择器](/vue/components/select) 、[按钮](/vue/components/button) 、[表格](/vue/components/table) 等
-
-
-
-
-
-### B 同步预览
-
-何时使用:在配置设置项或信息元素过程中,需要实时关注最终效果、或观察配置项变化时。常用在页面局部出现预览。
-
-核心流程:填写表单/设置项-进行预览
-
-相关组件:[表单](/vue/components/form)、[按钮](/vue/components/button)、[输入框](/vue/components/input)、[上传](/vue/components/upload)、[下拉菜单](/vue/components/dropdown)、[单选框](/vue/components/radio)、[多选框](/vue/components/checkbox)、[选择器](/vue/components/select) 等
-
-
-
-
-
-### B 非阻断式引导
-
-何时使用:当指引内容为辅助说明、或需要在操作界面的同时查看指引时,让用户可选择的使用指引。
-
-核心流程:触发引导 - 逐步查看引导 或 忽视引导继续操作界面 - 结束引导
-
-相关组件:[气泡确认框](/vue/components/popconfirm)、[弹出层](/vue/components/popup)、[文字提示](/vue/components/tooltip)
-
-
-
-### 其他场景:主动触发引导
-
-何时使用:当指引内容较多、或用户需要反复查看时,可提供用户可主动触发的入口。
-
-核心流程:触发引导 - 选择任务 - 进入引导 - 逐步查看引导 - 结束引导
-
-相关组件:[气泡确认框](/vue/components/popconfirm)、[弹出层](/vue/components/popup)、[文字提示](/vue/components/tooltip)、[对话框](/vue/components/dialog) 等
-
-
-
-
-
-### B 批量文件导入
-
-何时使用:当待导入的数据较复杂、或数据文件有多个,可批量上传后,再导入需要的数据。
-
-核心流程:触发导入 - 选择上传文件的方式 - 批量上传文件 - 确认批量文件的上传结果 - 导入文件
-
-相关组件:[按钮](/vue/components/button)、[上传](/vue/components/upload)、[全局提示](/vue/components/message)、[表格](/vue/components/table)、[列表](/vue/components/list)、[对话框](/vue/components/dialog) 等
-
-
-
-
-
-### B 通过列表摘要进行状态流转
-
-何时使用:当单条信息内容较少,在标题或摘要中即可了解,或无需校验详情内容即可进行状态流转决策时。
-
-核心流程:在列表中选定数据项 - 选择要流转的状态 - 显示流转结果
-
-相关组件:[列表](/vue/components/list)、[表格](/vue/components/table)、[下拉菜单](/vue/components/dropdown)、[按钮](/vue/components/button) 等
-
-
-
-
-
-### B 任务结束后的引导
-
-何时使用:当任务结束后,其结果与另一任务相关、或任务完成后的数据会触发其他操作时,给用户后续操作的引导或提示。
-
-核心流程:执行任务 - 查看任务结果引导 - 选择是否根据引导执行下一任务
-
-相关组件:[文字提示](/vue/components/tooltip)、[对话框](/vue/components/dialog)、[步骤条](/vue/components/steps)、[卡片](/vue/components/card)、[按钮](/vue/components/button) 等
-
-
-
-
+---
+title: 中后台高频任务设计方法
+description: 明确整体框架和页面布局后,根据业务场景,对相关任务流程进行设计。
+isDesign: true
+---
+
+中后台产品虽服务不同业务,但存在非常同质化的高频任务,掌握这些任务的设计方法,可有效提高中后台的交互体验。
+
+## 数据筛选与查询
+
+按所需条件或类型选择需要的数据项、或查询数据结果的任务。常应用于「[仪表盘](https://tdesign.tencent.com/starter/vue/#/dashboard/base) 」「[列表页](https://tdesign.tencent.com/starter/vue/#/list/base)」。
+
+### A 查询后生效
+
+何时使用:当用户对数据查询范围有明确针对性,需要对数据进行一系列筛选过滤的使用场景时,可使用查询器进行一次性提交生效。
+
+核心流程:选择条件 - 触发查询 - 获得结果数据 - 清空条件
+
+相关组件:[时间选择器](/vue/components/timepicker) 、[日期选择器](/vue/components/datepicker) 、[输入框](/vue/components/input) 、[选择器](/vue/components/select) 、[按钮](/vue/components/button) 、[表格](/vue/components/table) 等
+
+
+
+### B 立即生效
+
+何时使用:当数据查询范围较为随机,用户需要反复、多次修改条件时,可实时显示筛选结果,来提高查询效率。
+
+核心流程:条件选择 - 获得结果数据 -条件修改 - 获得结果数据
+
+相关组件:[时间选择器](/vue/components/timepicker) 、[日期选择器](/vue/components/datepicker) 、[输入框](/vue/components/input) 、[选择器](/vue/components/select) 、[按钮](/vue/components/button) 、[表格](/vue/components/table) 等
+
+
+
+### 其他场景:折叠条件
+
+何时使用:当筛选项过多,全部显示会增加用户信息识别效率,可只显示高频选项,其他选项折叠,需要时自定义展开。
+
+核心流程:展开条件 - 条件选择 - 获得结果数据
+
+相关组件:[时间选择器](/vue/components/timepicker) 、[日期选择器](/vue/components/datepicker) 、[输入框](/vue/components/input) 、[选择器](/vue/components/select) 、[按钮](/vue/components/button) 、[表格](/vue/components/table) 等
+
+
+ 图示:隐藏固定选项的条件
+
+
+ 图示:隐藏固定选项的条件
+
+### 其他场景:条件模版保存与调用
+
+何时使用:当用户的筛选需求个性化较强,需要根据自身需要使用筛选项时,提供可自定义保存的筛选器。
+
+核心流程:条件选择 - 保存为模版 -模版调用
+
+相关组件:[时间选择器](/vue/components/timepicker) 、[日期选择器](/vue/components/datepicker) 、[输入框](/vue/components/input) 、[选择器](/vue/components/select) 、[按钮](/vue/components/button) 、[表格](/vue/components/table) 等
+
+
+
+
+
+### B 选择后触发
+
+何时使用:当页面已有主要按钮,批量操作为次级或非高频操作时,可在选择数据后显示操作区。
+
+核心流程:选择要操作的内容 - 进行操作 - 显示操作结果
+
+相关组件:[下拉框](/vue/components/dropdown) 、[多选框](/vue/components/checkbox) 、[输入框](/vue/components/input) 、[选择器](/vue/components/select) 、[按钮](/vue/components/button) 、[表格](/vue/components/table) 等
+
+
+
+
+
+### B 同步预览
+
+何时使用:在配置设置项或信息元素过程中,需要实时关注最终效果、或观察配置项变化时。常用在页面局部出现预览。
+
+核心流程:填写表单/设置项-进行预览
+
+相关组件:[表单](/vue/components/form)、[按钮](/vue/components/button)、[输入框](/vue/components/input)、[上传](/vue/components/upload)、[下拉菜单](/vue/components/dropdown)、[单选框](/vue/components/radio)、[多选框](/vue/components/checkbox)、[选择器](/vue/components/select) 等
+
+
+
+
+
+### B 非阻断式引导
+
+何时使用:当指引内容为辅助说明、或需要在操作界面的同时查看指引时,让用户可选择的使用指引。
+
+核心流程:触发引导 - 逐步查看引导 或 忽视引导继续操作界面 - 结束引导
+
+相关组件:[气泡确认框](/vue/components/popconfirm)、[弹出层](/vue/components/popup)、[文字提示](/vue/components/tooltip)
+
+
+
+### 其他场景:主动触发引导
+
+何时使用:当指引内容较多、或用户需要反复查看时,可提供用户可主动触发的入口。
+
+核心流程:触发引导 - 选择任务 - 进入引导 - 逐步查看引导 - 结束引导
+
+相关组件:[气泡确认框](/vue/components/popconfirm)、[弹出层](/vue/components/popup)、[文字提示](/vue/components/tooltip)、[对话框](/vue/components/dialog) 等
+
+
+
+
+
+### B 批量文件导入
+
+何时使用:当待导入的数据较复杂、或数据文件有多个,可批量上传后,再导入需要的数据。
+
+核心流程:触发导入 - 选择上传文件的方式 - 批量上传文件 - 确认批量文件的上传结果 - 导入文件
+
+相关组件:[按钮](/vue/components/button)、[上传](/vue/components/upload)、[全局提示](/vue/components/message)、[表格](/vue/components/table)、[列表](/vue/components/list)、[对话框](/vue/components/dialog) 等
+
+
+
+
+
+### B 通过列表摘要进行状态流转
+
+何时使用:当单条信息内容较少,在标题或摘要中即可了解,或无需校验详情内容即可进行状态流转决策时。
+
+核心流程:在列表中选定数据项 - 选择要流转的状态 - 显示流转结果
+
+相关组件:[列表](/vue/components/list)、[表格](/vue/components/table)、[下拉菜单](/vue/components/dropdown)、[按钮](/vue/components/button) 等
+
+
+
+
+
+### B 任务结束后的引导
+
+何时使用:当任务结束后,其结果与另一任务相关、或任务完成后的数据会触发其他操作时,给用户后续操作的引导或提示。
+
+核心流程:执行任务 - 查看任务结果引导 - 选择是否根据引导执行下一任务
+
+相关组件:[文字提示](/vue/components/tooltip)、[对话框](/vue/components/dialog)、[步骤条](/vue/components/steps)、[卡片](/vue/components/card)、[按钮](/vue/components/button) 等
+
+
+
+
diff --git a/docs/design/offices_zh-CN.md b/docs/design/offices_zh-CN.md
index 9c6c9713e..a716f49d3 100644
--- a/docs/design/offices_zh-CN.md
+++ b/docs/design/offices_zh-CN.md
@@ -12,76 +12,59 @@ isDesign: true
在 Web 前端设计当中,中台与后台具有同质性,可看作同一类型来思考设计方法。通过 TDesign 提供的组件能力快速搭建好用的中后台系统,通常可以分三步:选择合适的页面框架-设计页面间的任务流程-合理使用组件。
-
## 中后台页面框架的选择
页面框架由「页面导航」与「页面布局」两部分组成。同时,TDesign 提供常见的页面模版,可根据需要直接选择合适的模版。
-
### 页面导航
导航是指:在页面中引导用户找到功能和理解信息层级,可分为整站导航与区域导航两大类。
-
-| 导航分类 | 定义 |相关组件 |
-| :--------- | :----------------------------------------------------------- | :----------------------------------------------------------- |
-| 整站导航 | 对整个网站系统的最大颗粒度模块的引导,也称为全局导航或总导航。| [导航菜单](/vue/components/menu)
-| 区域导航 | 对某一模块下的页面,进行引导和分类的导航,也称为情景导航。 | [固钉](/vue/components/affix) 、[锚点](/vue/components/anchor)、[面包屑](/vue/components/breadcrumb)、[下拉菜单](/vue/components/dropdown)、[分页](/vue/components/pagination)、[步骤条](/vue/components/steps)、[选项卡](/vue/components/tabs)
-
+| 导航分类 | 定义 | 相关组件 |
+| :------- | :------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 整站导航 | 对整个网站系统的最大颗粒度模块的引导,也称为全局导航或总导航。 | [导航菜单](/vue/components/menu) |
+| 区域导航 | 对某一模块下的页面,进行引导和分类的导航,也称为情景导航。 | [固钉](/vue/components/affix) 、[锚点](/vue/components/anchor)、[面包屑](/vue/components/breadcrumb)、[下拉菜单](/vue/components/dropdown)、[分页](/vue/components/pagination)、[步骤条](/vue/components/steps)、[选项卡](/vue/components/tabs) |
-
### 页面布局
页面布局是指:将导航和信息内容在页面中进行合理安排和分布,由「[栅格](/vue/components/grid)」和「[布局](/vue/components/layout)」组成。
-
-
不同布局的选择依据,通常为:1 功能模块的数量。2 功能与功能之间的相关性。
TDesign主要提供3种布局方式:上下布局、左右布局、混合布局。
-
#### 上下结构的布局
主要特征:导航在上信息内容在下的布局。横向导航空间有限,左右点击效率低。
何时使用:1 功能模块数量较少时(一般小于 9 个)。2 各模块间关联较弱、需要做明确区分或无需频繁切换时。
-
#### 左右结构的布局
主要特征:导航在左信息内容在右的布局。纵向空间具有较好延展性,上下点击效率高。
何时使用:1 功能模块数量较多时。2 各模块间有一定相关性、或需要在模块间频繁切换时。
-
#### 混合结构的布局
主要特征:将上下、左右相结合的综合布局。横纵空间优势互补,在展示和操作上都具有较好的延展性和包容性。
何时使用:1 功能模块数量较多时。2 各模块间有父子或交叉关系、 需要按层级展示时。
-
-
-
-
## 常见的中后台页面
TDesign提供了中后台系统常见的页面模板,涵盖多种高频任务在页面中的典型布局方式。
-| 典型页面模板 | 相关高频任务 |
-| :--------- | :----------------------------------------------------------- |
-| [仪表盘](https://tdesign.tencent.com/starter/vue/#/dashboard/base) | [数据筛选与查询](/design/offices-task#数据筛选与查询)、[效果预览](/design/offices-task#效果预览)、[新手指引](/design/offices-task#新手指引) |
-| [列表页](https://tdesign.tencent.com/starter/vue/#/list/base) | [数据筛选与查询](/design/offices-task#数据筛选与查询)、[表格批量操作](/design/offices-task#表格批量操作)、[数据导入](/design/offices-task#数据导入)、[效果预览](/design/offices-task#效果预览)、[状态流转](/design/offices-task#状态流转)、[任务引导](/design/offices-task#任务引导) 、[新手指引](/design/offices-task#新手指引) |
-| [表单页](https://tdesign.tencent.com/starter/vue/#/form/base) | [数据筛选与查询](/design/offices-task#数据筛选与查询)、[任务引导](/design/offices-task#任务引导)、[效果预览](/design/offices-task#效果预览)、[新手指引](/design/offices-task#新手指引) |
-| [详情页](https://tdesign.tencent.com/starter/vue/#/detail/base) | [数据筛选与查询](/design/offices-task#数据筛选与查询)、[状态流转](/design/offices-task#状态流转)、[数据导入](/design/offices-task#数据导入)、[效果预览](/design/offices-task#效果预览) |
-| [结果页](https://tdesign.tencent.com/starter/vue/#/result/success) | [状态流转](/design/offices-task#状态流转)、[新手指引](/design/offices-task#新手指引)、[任务引导](/design/offices-task#任务引导) |
-| [个人页](https://tdesign.tencent.com/starter/vue/#/user/index) | [新手指引](/design/offices-task#新手指引)、[效果预览](/design/offices-task#效果预览) |
-| [登录页](https://tdesign.tencent.com/starter/vue/#/login) | [新手指引](/design/offices-task#新手指引)、[任务引导](/design/offices-task#任务引导) |
-
-
-
+| 典型页面模板 | 相关高频任务 |
+| :----------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [仪表盘](https://tdesign.tencent.com/starter/vue/#/dashboard/base) | [数据筛选与查询](/design/offices-task#数据筛选与查询)、[效果预览](/design/offices-task#效果预览)、[新手指引](/design/offices-task#新手指引) |
+| [列表页](https://tdesign.tencent.com/starter/vue/#/list/base) | [数据筛选与查询](/design/offices-task#数据筛选与查询)、[表格批量操作](/design/offices-task#表格批量操作)、[数据导入](/design/offices-task#数据导入)、[效果预览](/design/offices-task#效果预览)、[状态流转](/design/offices-task#状态流转)、[任务引导](/design/offices-task#任务引导) 、[新手指引](/design/offices-task#新手指引) |
+| [表单页](https://tdesign.tencent.com/starter/vue/#/form/base) | [数据筛选与查询](/design/offices-task#数据筛选与查询)、[任务引导](/design/offices-task#任务引导)、[效果预览](/design/offices-task#效果预览)、[新手指引](/design/offices-task#新手指引) |
+| [详情页](https://tdesign.tencent.com/starter/vue/#/detail/base) | [数据筛选与查询](/design/offices-task#数据筛选与查询)、[状态流转](/design/offices-task#状态流转)、[数据导入](/design/offices-task#数据导入)、[效果预览](/design/offices-task#效果预览) |
+| [结果页](https://tdesign.tencent.com/starter/vue/#/result/success) | [状态流转](/design/offices-task#状态流转)、[新手指引](/design/offices-task#新手指引)、[任务引导](/design/offices-task#任务引导) |
+| [个人页](https://tdesign.tencent.com/starter/vue/#/user/index) | [新手指引](/design/offices-task#新手指引)、[效果预览](/design/offices-task#效果预览) |
+| [登录页](https://tdesign.tencent.com/starter/vue/#/login) | [新手指引](/design/offices-task#新手指引)、[任务引导](/design/offices-task#任务引导) |
diff --git a/docs/faq_zh-CN.md b/docs/faq_zh-CN.md
index 9eba8784b..28801b50a 100644
--- a/docs/faq_zh-CN.md
+++ b/docs/faq_zh-CN.md
@@ -18,4 +18,5 @@ title: 常见问题
- 非受控用法:既初始值用法,不传入 value 属性,使用对应的初始值属性 defaultValue 设置组件初始状态,此时组件会在内部维护该状态,用户通过交互触发更新事件 onChange 之后,组件内部直接更新组件状态。
### 如何在设计工具 Sketch 中使用 TDesign
-有两种方式,一是可以使用 TDesign 提供的 Sketch 源文件,它包括桌面端及移动端(近期上线),也可以使用 TDesign 提供的 Sketch 插件,具体使用方式请参考 [《插件使用手册》](https://doc.weixin.qq.com/doc/w3_m_OkshgETGpoGB?scode=AJEAIQdfAAoYvGqGCUAL8AZgbdAFw)。
\ No newline at end of file
+
+有两种方式,一是可以使用 TDesign 提供的 Sketch 源文件,它包括桌面端及移动端(近期上线),也可以使用 TDesign 提供的 Sketch 插件,具体使用方式请参考 [《插件使用手册》](https://doc.weixin.qq.com/doc/w3_m_OkshgETGpoGB?scode=AJEAIQdfAAoYvGqGCUAL8AZgbdAFw)。
diff --git a/docs/introduce.md b/docs/introduce.md
index 10e957039..1ba5f2e57 100644
--- a/docs/introduce.md
+++ b/docs/introduce.md
@@ -44,7 +44,7 @@ TDesign currently supports [multiple platforms and mainstream front-end UI frame
| [tdesign-mobile-vue](https://github.com/Tencent/tdesign-mobile-vue) | Vue3.x Mobile UI components lib for TDesign | `1.0 LTS` |
| [tdesign-mobile-react](https://github.com/Tencent/tdesign-mobile-react) | React Mobile UI components lib for TDesign | `Alpha` |
| [tdesign-flutter](https://github.com/Tencent/tdesign-flutter) | Flutter UI components lib for TDesign | `Alpha` |
-| [tdesign-uniapp](https://github.com/Tencent/tdesign-miniprogram) | Uniapp UI components lib for TDesign | `Alpha` |
+| [tdesign-uniapp](https://github.com/Tencent/tdesign-miniprogram) | Uniapp UI components lib for TDesign | `Alpha` |
### Repositories for Common
diff --git a/docs/tech.md b/docs/tech.md
index a58c431c8..446da5798 100644
--- a/docs/tech.md
+++ b/docs/tech.md
@@ -37,7 +37,7 @@ UI development is shared among multiple implementation frameworks such as React,
```js
// button.tsx
-import "./button.less";
+import './button.less';
```
## Guidelines
diff --git a/docs/tech_zh-CN.md b/docs/tech_zh-CN.md
index 378a9ccae..f32ce467d 100644
--- a/docs/tech_zh-CN.md
+++ b/docs/tech_zh-CN.md
@@ -3,6 +3,7 @@ title: 整体方案
---
请参考 [《TDesign 组件库技术方案指北》](https://mp.weixin.qq.com/s?__biz=Mzg3MjYwODA1OA==&mid=2247515208&idx=1&sn=166d4a5313cadbb80d2a401edf46b455)
+
## 仓库结构说明
每个仓库对应一个组件库技术栈实现,包含各自技术栈实现代码和一个 [tdesign-common](https://github.com/Tencent/tdesign-common) 子仓库,子仓库作为公共库包含:
@@ -41,7 +42,7 @@ UI 开发(HTML & CSS)是由 React/Vue 等多个实现框架共用的。各
// button.tsx
// 先引入临时的样式文件用于开发功能,待 UI 开发完成之后需要与 UI 样式对齐并删除 less 文件
-import "./button.less";
+import './button.less';
```
## 规范
@@ -83,13 +84,13 @@ feat 与 fix 提交将被用于生成 changelog
## 技术选型
-| 类目 | 方案 | 参考链接 |
-| ------------ | ---------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| 开发语言 | ts | [http://www.typescriptlang.org/](http://www.typescriptlang.org/) |
-| 样式语言 | less | [http://lesscss.org/](http://lesscss.org/) |
+| 类目 | 方案 | 参考链接 |
+| ------------ | ------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
+| 开发语言 | ts | [http://www.typescriptlang.org/](http://www.typescriptlang.org/) |
+| 样式语言 | less | [http://lesscss.org/](http://lesscss.org/) |
| 构建工具 | vite 组件库本地开发 {{ releaseTimeList[index].title }}