From 4ac7fe1c069736126263b49c2890d76f0a8a7721 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Mon, 28 Oct 2024 16:15:19 +0800
Subject: [PATCH 01/65] fix(build): fix build error

---
 packages/design/aurora/index.ts |   4 +-
 packages/modules.json           | 932 ++++++++++++++++++++++++--------
 packages/theme/src/index.less   |   1 +
 packages/vue-icon-saas/index.ts |  28 +
 4 files changed, 751 insertions(+), 214 deletions(-)

diff --git a/packages/design/aurora/index.ts b/packages/design/aurora/index.ts
index 1038fe240..abcb6d8ad 100644
--- a/packages/design/aurora/index.ts
+++ b/packages/design/aurora/index.ts
@@ -27,7 +27,6 @@ import Pager from './src/pager'
 import Wizard from './src/wizard'
 import DialogBox from './src/dialog-box'
 import Popeditor from './src/popeditor'
-import DialogSelect from './src/dialog-select'
 import { version } from './package.json'
 
 export default {
@@ -62,7 +61,6 @@ export default {
     Pager,
     Wizard,
     DialogBox,
-    Popeditor,
-    DialogSelect
+    Popeditor
   }
 }
diff --git a/packages/modules.json b/packages/modules.json
index 3d9e2f428..2670f6f83 100644
--- a/packages/modules.json
+++ b/packages/modules.json
@@ -3,7 +3,9 @@
     "path": "vue/src/action-menu/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "ActionMenuPc": {
     "path": "vue/src/action-menu/src/pc.vue",
@@ -14,7 +16,10 @@
     "path": "vue/src/action-sheet/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile"]
+    "mode": [
+      "mobile-first",
+      "mobile"
+    ]
   },
   "ActionSheetMobile": {
     "path": "vue/src/action-sheet/src/mobile.vue",
@@ -30,7 +35,11 @@
     "path": "vue/src/alert/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "AlertMobile": {
     "path": "vue/src/alert/src/mobile.vue",
@@ -51,7 +60,10 @@
     "path": "vue/src/amount/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "AmountMobileFirst": {
     "path": "vue/src/amount/src/mobile-first.vue",
@@ -67,7 +79,10 @@
     "path": "vue/src/anchor/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "AnchorMobileFirst": {
     "path": "vue/src/anchor/src/mobile-first.vue",
@@ -83,7 +98,9 @@
     "path": "vue/src/area/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "AreaPc": {
     "path": "vue/src/area/src/pc.vue",
@@ -94,7 +111,9 @@
     "path": "vue/src/async-flowchart/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first"]
+    "mode": [
+      "mobile-first"
+    ]
   },
   "AsyncFlowchartMobileFirst": {
     "path": "vue/src/async-flowchart/src/mobile-first.vue",
@@ -105,7 +124,9 @@
     "path": "vue/src/autocomplete/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "AutocompletePc": {
     "path": "vue/src/autocomplete/src/pc.vue",
@@ -116,13 +137,19 @@
     "path": "vue/src/avatar/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile"]
+    "mode": [
+      "mobile"
+    ]
   },
   "Badge": {
     "path": "vue/src/badge/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "BadgeMobile": {
     "path": "vue/src/badge/src/mobile.vue",
@@ -143,7 +170,10 @@
     "path": "vue/src/base-select/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "BaseSelectMobileFirst": {
     "path": "vue/src/base-select/src/mobile-first.vue",
@@ -159,13 +189,17 @@
     "path": "vue/src/breadcrumb/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "BreadcrumbItem": {
     "path": "vue/src/breadcrumb-item/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "BreadcrumbItemPc": {
     "path": "vue/src/breadcrumb-item/src/pc.vue",
@@ -181,7 +215,9 @@
     "path": "vue/src/bulletin-board/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "BulletinBoardPc": {
     "path": "vue/src/bulletin-board/src/pc.vue",
@@ -192,13 +228,19 @@
     "path": "vue/src/button/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "ButtonGroup": {
     "path": "vue/src/button-group/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "ButtonGroupPc": {
     "path": "vue/src/button-group/src/pc.vue",
@@ -224,13 +266,17 @@
     "path": "vue/src/calendar/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "CalendarBar": {
     "path": "vue/src/calendar-bar/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first"]
+    "mode": [
+      "mobile-first"
+    ]
   },
   "CalendarBarMobileFirst": {
     "path": "vue/src/calendar-bar/src/mobile-first.vue",
@@ -246,7 +292,10 @@
     "path": "vue/src/calendar-view/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "CalendarViewMobileFirst": {
     "path": "vue/src/calendar-view/src/mobile-first.vue",
@@ -262,13 +311,19 @@
     "path": "vue/src/card/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "CardGroup": {
     "path": "vue/src/card-group/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "CardGroupMobileFirst": {
     "path": "vue/src/card-group/src/mobile-first.vue",
@@ -294,7 +349,9 @@
     "path": "vue/src/card-template/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "CardTemplatePc": {
     "path": "vue/src/card-template/src/pc.vue",
@@ -305,13 +362,19 @@
     "path": "vue/src/carousel/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "CarouselItem": {
     "path": "vue/src/carousel-item/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "CarouselItemMobileFirst": {
     "path": "vue/src/carousel-item/src/mobile-first.vue",
@@ -337,13 +400,19 @@
     "path": "vue/src/cascader/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "CascaderMenu": {
     "path": "vue/src/cascader-menu/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "CascaderMenuMobileFirst": {
     "path": "vue/src/cascader-menu/src/mobile-first.vue",
@@ -359,7 +428,9 @@
     "path": "vue/src/cascader-mobile/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first"]
+    "mode": [
+      "mobile-first"
+    ]
   },
   "CascaderMobileFirst": {
     "path": "vue/src/cascader/src/mobile-first.vue",
@@ -370,7 +441,10 @@
     "path": "vue/src/cascader-node/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "CascaderNodeMobileFirst": {
     "path": "vue/src/cascader-node/src/mobile-first.vue",
@@ -386,7 +460,10 @@
     "path": "vue/src/cascader-panel/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "CascaderPanelMobileFirst": {
     "path": "vue/src/cascader-panel/src/mobile-first.vue",
@@ -407,7 +484,9 @@
     "path": "vue/src/cascader-select/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first"]
+    "mode": [
+      "mobile-first"
+    ]
   },
   "CascaderSelectMobileFirst": {
     "path": "vue/src/cascader-select/src/mobile-first.vue",
@@ -418,25 +497,35 @@
     "path": "vue/src/cascader-view/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first"]
+    "mode": [
+      "mobile-first"
+    ]
   },
   "Cell": {
     "path": "vue/src/cell/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first"]
+    "mode": [
+      "mobile-first"
+    ]
   },
   "Checkbox": {
     "path": "vue/src/checkbox/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "CheckboxButton": {
     "path": "vue/src/checkbox-button/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "CheckboxButtonPc": {
     "path": "vue/src/checkbox-button/src/pc.vue",
@@ -447,7 +536,11 @@
     "path": "vue/src/checkbox-group/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "CheckboxGroupMobile": {
     "path": "vue/src/checkbox-group/src/mobile.vue",
@@ -483,7 +576,9 @@
     "path": "vue/src/col/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "ColPc": {
     "path": "vue/src/col/src/pc.vue",
@@ -494,13 +589,19 @@
     "path": "vue/src/collapse/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "CollapseItem": {
     "path": "vue/src/collapse-item/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "CollapseItemMobileFirst": {
     "path": "vue/src/collapse-item/src/mobile-first.vue",
@@ -526,13 +627,18 @@
     "path": "vue/src/collapse-transition/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "ColorPicker": {
     "path": "vue/src/color-picker/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile", "pc"]
+    "mode": [
+      "mobile",
+      "pc"
+    ]
   },
   "ColorPickerMobile": {
     "path": "vue/src/color-picker/src/mobile.vue",
@@ -548,7 +654,9 @@
     "path": "vue/src/color-select-panel/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "ColorSelectPanelPc": {
     "path": "vue/src/color-select-panel/src/pc.vue",
@@ -559,13 +667,17 @@
     "path": "vue/src/column-list-group/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first"]
+    "mode": [
+      "mobile-first"
+    ]
   },
   "ColumnListItem": {
     "path": "vue/src/column-list-item/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first"]
+    "mode": [
+      "mobile-first"
+    ]
   },
   "Common": {
     "path": "vue-common/src/index.ts",
@@ -576,7 +688,9 @@
     "path": "vue/src/company/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "CompanyPc": {
     "path": "vue/src/company/src/pc.vue",
@@ -592,7 +706,10 @@
     "path": "vue/src/container/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile", "pc"]
+    "mode": [
+      "mobile",
+      "pc"
+    ]
   },
   "ContainerMobile": {
     "path": "vue/src/container/src/mobile.vue",
@@ -608,7 +725,9 @@
     "path": "vue/src/country/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "CountryPc": {
     "path": "vue/src/country/src/pc.vue",
@@ -619,13 +738,18 @@
     "path": "vue/src/crop/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "Currency": {
     "path": "vue/src/currency/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "CurrencyMobileFirst": {
     "path": "vue/src/currency/src/mobile-first.vue",
@@ -641,7 +765,10 @@
     "path": "vue/src/date-panel/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "DatePanelMobileFirst": {
     "path": "vue/src/date-panel/src/mobile-first.vue",
@@ -657,7 +784,10 @@
     "path": "vue/src/date-picker/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile", "pc"]
+    "mode": [
+      "mobile",
+      "pc"
+    ]
   },
   "DatePickerMobile": {
     "path": "vue/src/date-picker/src/mobile.vue",
@@ -678,7 +808,10 @@
     "path": "vue/src/date-range/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "DateRangeMobileFirst": {
     "path": "vue/src/date-range/src/mobile-first.vue",
@@ -694,7 +827,10 @@
     "path": "vue/src/date-table/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "DateTableMobileFirst": {
     "path": "vue/src/date-table/src/mobile-first.vue",
@@ -710,7 +846,9 @@
     "path": "vue/src/dept/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "DeptPc": {
     "path": "vue/src/dept/src/pc.vue",
@@ -727,16 +865,15 @@
     "type": "module",
     "exclude": false
   },
-  "DesignSmb": {
-    "path": "design/smb/index.ts",
-    "type": "module",
-    "exclude": false
-  },
   "DialogBox": {
     "path": "vue/src/dialog-box/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "DialogBoxMobile": {
     "path": "vue/src/dialog-box/src/mobile.vue",
@@ -757,7 +894,9 @@
     "path": "vue/src/dialog-select/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "DialogSelectPc": {
     "path": "vue/src/dialog-select/src/pc.vue",
@@ -773,7 +912,9 @@
     "path": "vue/src/divider/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "DividerPc": {
     "path": "vue/src/divider/src/pc.vue",
@@ -784,7 +925,10 @@
     "path": "vue/src/drawer/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "DrawerMobileFirst": {
     "path": "vue/src/drawer/src/mobile-first.vue",
@@ -800,7 +944,9 @@
     "path": "vue/src/drop-roles/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "DropRolesPc": {
     "path": "vue/src/drop-roles/src/pc.vue",
@@ -811,7 +957,9 @@
     "path": "vue/src/drop-times/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "DropTimesPc": {
     "path": "vue/src/drop-times/src/pc.vue",
@@ -822,13 +970,20 @@
     "path": "vue/src/dropdown/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "DropdownItem": {
     "path": "vue/src/dropdown-item/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "DropdownItemMobile": {
     "path": "vue/src/dropdown-item/src/mobile.vue",
@@ -849,7 +1004,11 @@
     "path": "vue/src/dropdown-menu/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "DropdownMenuMobile": {
     "path": "vue/src/dropdown-menu/src/mobile.vue",
@@ -880,13 +1039,17 @@
     "path": "vue/src/dynamic-scroller/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "DynamicScrollerItem": {
     "path": "vue/src/dynamic-scroller-item/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "DynamicScrollerItemPc": {
     "path": "vue/src/dynamic-scroller-item/src/pc.vue",
@@ -902,7 +1065,9 @@
     "path": "vue/src/espace/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "EspacePc": {
     "path": "vue/src/espace/src/pc.vue",
@@ -913,7 +1078,10 @@
     "path": "vue/src/exception/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile"]
+    "mode": [
+      "mobile-first",
+      "mobile"
+    ]
   },
   "ExceptionMobile": {
     "path": "vue/src/exception/src/mobile.vue",
@@ -929,7 +1097,9 @@
     "path": "vue/src/fall-menu/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "FallMenuPc": {
     "path": "vue/src/fall-menu/src/pc.vue",
@@ -940,7 +1110,11 @@
     "path": "vue/src/file-upload/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "FileUploadMobile": {
     "path": "vue/src/file-upload/src/mobile.vue",
@@ -961,13 +1135,17 @@
     "path": "vue/src/filter/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first"]
+    "mode": [
+      "mobile-first"
+    ]
   },
   "FilterBar": {
     "path": "vue/src/filter-bar/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first"]
+    "mode": [
+      "mobile-first"
+    ]
   },
   "FilterBarMobileFirst": {
     "path": "vue/src/filter-bar/src/mobile-first.vue",
@@ -978,7 +1156,9 @@
     "path": "vue/src/filter-box/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "FilterMobileFirst": {
     "path": "vue/src/filter/src/mobile-first.vue",
@@ -989,13 +1169,17 @@
     "path": "vue/src/filter-panel/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "FloatButton": {
     "path": "vue/src/float-button/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "FloatButtonPc": {
     "path": "vue/src/float-button/src/pc.vue",
@@ -1006,7 +1190,9 @@
     "path": "vue/src/floatbar/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "FloatbarPc": {
     "path": "vue/src/floatbar/src/pc.vue",
@@ -1017,7 +1203,9 @@
     "path": "vue/src/floating-button/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first"]
+    "mode": [
+      "mobile-first"
+    ]
   },
   "FloatingButtonMobileFirst": {
     "path": "vue/src/floating-button/src/mobile-first.vue",
@@ -1028,7 +1216,10 @@
     "path": "vue/src/flowchart/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "FlowchartMobileFirst": {
     "path": "vue/src/flowchart/src/mobile-first.vue",
@@ -1044,7 +1235,10 @@
     "path": "vue/src/fluent-editor/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "FluentEditorMobileFirst": {
     "path": "vue/src/fluent-editor/src/mobile-first.vue",
@@ -1060,13 +1254,20 @@
     "path": "vue/src/form/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "FormItem": {
     "path": "vue/src/form-item/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "FormItemLabelWrap": {
     "path": "vue/src/form-item/src/label-wrap.ts",
@@ -1102,7 +1303,9 @@
     "path": "vue/src/fullscreen/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "Grid": {
     "path": "vue/src/grid/index.ts",
@@ -1128,7 +1331,9 @@
     "path": "vue/src/guide/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "GuidePc": {
     "path": "vue/src/guide/src/pc.vue",
@@ -1144,7 +1349,9 @@
     "path": "vue/src/hrapprover/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "HrapproverPc": {
     "path": "vue/src/hrapprover/src/pc.vue",
@@ -1281,13 +1488,13 @@
     "type": "module",
     "exclude": false
   },
-  "IconSaas": {
-    "path": "vue-icon-saas/index.ts",
+  "IconMulticolor": {
+    "path": "vue-icon-multicolor/index.ts",
     "type": "module",
     "exclude": false
   },
-  "IconMulticolor": {
-    "path": "vue-icon-multicolor/index.ts",
+  "IconSaas": {
+    "path": "vue-icon-saas/index.ts",
     "type": "module",
     "exclude": false
   },
@@ -1295,7 +1502,10 @@
     "path": "vue/src/image/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "ImageMobileFirst": {
     "path": "vue/src/image/src/mobile-first.vue",
@@ -1311,7 +1521,11 @@
     "path": "vue/src/image-viewer/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "ImageViewerMobile": {
     "path": "vue/src/image-viewer/src/mobile.vue",
@@ -1332,7 +1546,9 @@
     "path": "vue/src/index-bar/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile"]
+    "mode": [
+      "mobile"
+    ]
   },
   "IndexBarAnchor": {
     "path": "vue/src/index-bar-anchor/index.ts",
@@ -1348,7 +1564,11 @@
     "path": "vue/src/input/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "InputMobile": {
     "path": "vue/src/input/src/mobile.vue",
@@ -1374,7 +1594,9 @@
     "path": "vue/src/ip-address/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "IpAddressPc": {
     "path": "vue/src/ip-address/src/pc.vue",
@@ -1385,7 +1607,9 @@
     "path": "vue/src/label/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile"]
+    "mode": [
+      "mobile"
+    ]
   },
   "LabelMobile": {
     "path": "vue/src/label/src/mobile.vue",
@@ -1396,7 +1620,9 @@
     "path": "vue/src/layout/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "LayoutPc": {
     "path": "vue/src/layout/src/pc.vue",
@@ -1407,13 +1633,17 @@
     "path": "vue/src/link/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "LinkMenu": {
     "path": "vue/src/link-menu/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "LinkMenuPc": {
     "path": "vue/src/link-menu/src/pc.vue",
@@ -1429,13 +1659,17 @@
     "path": "vue/src/list/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile"]
+    "mode": [
+      "mobile"
+    ]
   },
   "LoadList": {
     "path": "vue/src/load-list/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first"]
+    "mode": [
+      "mobile-first"
+    ]
   },
   "LoadListMobileFirst": {
     "path": "vue/src/load-list/src/mobile-first.vue",
@@ -1446,7 +1680,11 @@
     "path": "vue/src/loading/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "LoadingMobile": {
     "path": "vue/src/loading/src/mobile.vue",
@@ -1472,19 +1710,25 @@
     "path": "vue/src/locales/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "LogonUser": {
     "path": "vue/src/logon-user/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "Logout": {
     "path": "vue/src/logout/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "LogoutPc": {
     "path": "vue/src/logout/src/pc.vue",
@@ -1495,13 +1739,17 @@
     "path": "vue/src/mask/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile"]
+    "mode": [
+      "mobile"
+    ]
   },
   "Menu": {
     "path": "vue/src/menu/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first"]
+    "mode": [
+      "mobile-first"
+    ]
   },
   "Message": {
     "path": "vue/src/message/index.ts",
@@ -1512,7 +1760,9 @@
     "path": "vue/src/milestone/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "MilestonePc": {
     "path": "vue/src/milestone/src/pc.vue",
@@ -1523,7 +1773,9 @@
     "path": "vue/src/mind-map/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "MindMapPc": {
     "path": "vue/src/mind-map/src/pc.vue",
@@ -1534,13 +1786,19 @@
     "path": "vue/src/mini-picker/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile"]
+    "mode": [
+      "mobile"
+    ]
   },
   "Modal": {
     "path": "vue/src/modal/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "ModalMobile": {
     "path": "vue/src/modal/src/mobile.vue",
@@ -1561,25 +1819,33 @@
     "path": "vue/src/month-range/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "MonthTable": {
     "path": "vue/src/month-table/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "MultiSelect": {
     "path": "vue/src/multi-select/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile"]
+    "mode": [
+      "mobile"
+    ]
   },
   "MultiSelectItem": {
     "path": "vue/src/multi-select-item/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile"]
+    "mode": [
+      "mobile"
+    ]
   },
   "MultiSelectItemMobile": {
     "path": "vue/src/multi-select-item/src/mobile.vue",
@@ -1595,13 +1861,17 @@
     "path": "vue/src/nav-bar/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile"]
+    "mode": [
+      "mobile"
+    ]
   },
   "NavMenu": {
     "path": "vue/src/nav-menu/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "NavMenuPc": {
     "path": "vue/src/nav-menu/src/pc.vue",
@@ -1612,13 +1882,19 @@
     "path": "vue/src/notify/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "Numeric": {
     "path": "vue/src/numeric/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "NumericMobile": {
     "path": "vue/src/numeric/src/mobile.vue",
@@ -1639,13 +1915,19 @@
     "path": "vue/src/option/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "OptionGroup": {
     "path": "vue/src/option-group/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "OptionGroupMobileFirst": {
     "path": "vue/src/option-group/src/mobile-first.vue",
@@ -1671,13 +1953,19 @@
     "path": "vue/src/pager/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "PagerItem": {
     "path": "vue/src/pager-item/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "PagerItemMobileFirst": {
     "path": "vue/src/pager-item/src/mobile-first.vue",
@@ -1703,7 +1991,9 @@
     "path": "vue/src/panel/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "PanelPc": {
     "path": "vue/src/panel/src/pc.vue",
@@ -1714,13 +2004,18 @@
     "path": "vue/src/picker/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "PickerColumn": {
     "path": "vue/src/picker-column/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile"]
+    "mode": [
+      "mobile"
+    ]
   },
   "PickerMobileFirst": {
     "path": "vue/src/picker/src/mobile-first.vue",
@@ -1736,7 +2031,9 @@
     "path": "vue/src/pop-upload/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "PopUploadPc": {
     "path": "vue/src/pop-upload/src/pc.vue",
@@ -1747,7 +2044,10 @@
     "path": "vue/src/popconfirm/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "PopconfirmMobileFirst": {
     "path": "vue/src/popconfirm/src/mobile-first.vue",
@@ -1763,7 +2063,9 @@
     "path": "vue/src/popeditor/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "PopeditorPc": {
     "path": "vue/src/popeditor/src/pc.vue",
@@ -1774,7 +2076,11 @@
     "path": "vue/src/popover/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "PopoverMobile": {
     "path": "vue/src/popover/src/mobile.vue",
@@ -1795,13 +2101,19 @@
     "path": "vue/src/popup/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "Progress": {
     "path": "vue/src/progress/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "ProgressMobile": {
     "path": "vue/src/progress/src/mobile.vue",
@@ -1822,7 +2134,10 @@
     "path": "vue/src/pull-refresh/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile"]
+    "mode": [
+      "mobile-first",
+      "mobile"
+    ]
   },
   "PullRefreshMobile": {
     "path": "vue/src/pull-refresh/src/mobile.vue",
@@ -1838,31 +2153,44 @@
     "path": "vue/src/qr-code/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "QuarterPanel": {
     "path": "vue/src/quarter-panel/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "QueryBuilder": {
     "path": "vue/src/query-builder/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "Radio": {
     "path": "vue/src/radio/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "RadioButton": {
     "path": "vue/src/radio-button/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "RadioButtonMobileFirst": {
     "path": "vue/src/radio-button/src/mobile-first.vue",
@@ -1878,7 +2206,10 @@
     "path": "vue/src/radio-group/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "RadioGroupMobileFirst": {
     "path": "vue/src/radio-group/src/mobile-first.vue",
@@ -1909,7 +2240,10 @@
     "path": "vue/src/rate/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "RateMobileFirst": {
     "path": "vue/src/rate/src/mobile-first.vue",
@@ -1925,7 +2259,9 @@
     "path": "vue/src/record/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first"]
+    "mode": [
+      "mobile-first"
+    ]
   },
   "RecordMobileFirst": {
     "path": "vue/src/record/src/mobile-first.vue",
@@ -1936,7 +2272,9 @@
     "path": "vue/src/recycle-scroller/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "RecycleScrollerPc": {
     "path": "vue/src/recycle-scroller/src/pc.vue",
@@ -1947,19 +2285,25 @@
     "path": "vue/src/rich-text/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "RichTextEditor": {
     "path": "vue/src/rich-text-editor/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "River": {
     "path": "vue/src/river/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "RiverPc": {
     "path": "vue/src/river/src/pc.vue",
@@ -1970,7 +2314,9 @@
     "path": "vue/src/roles/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "RolesPc": {
     "path": "vue/src/roles/src/pc.vue",
@@ -1981,7 +2327,9 @@
     "path": "vue/src/row/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "RowPc": {
     "path": "vue/src/row/src/pc.vue",
@@ -1997,7 +2345,9 @@
     "path": "vue/src/scroll-text/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "ScrollTextPc": {
     "path": "vue/src/scroll-text/src/pc.vue",
@@ -2008,13 +2358,19 @@
     "path": "vue/src/scrollbar/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "Search": {
     "path": "vue/src/search/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "SearchMobile": {
     "path": "vue/src/search/src/mobile.vue",
@@ -2035,13 +2391,19 @@
     "path": "vue/src/select/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "SelectDropdown": {
     "path": "vue/src/select-dropdown/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "SelectDropdownMobileFirst": {
     "path": "vue/src/select-dropdown/src/mobile-first.vue",
@@ -2057,7 +2419,9 @@
     "path": "vue/src/select-mobile/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first"]
+    "mode": [
+      "mobile-first"
+    ]
   },
   "SelectMobileFirst": {
     "path": "vue/src/select/src/mobile-first.vue",
@@ -2073,13 +2437,18 @@
     "path": "vue/src/select-view/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first"]
+    "mode": [
+      "mobile-first"
+    ]
   },
   "SelectedBox": {
     "path": "vue/src/selected-box/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "SelectedBoxMobileFirst": {
     "path": "vue/src/selected-box/src/mobile-first.vue",
@@ -2095,7 +2464,9 @@
     "path": "vue/src/signature/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first"]
+    "mode": [
+      "mobile-first"
+    ]
   },
   "SignatureMobileFirst": {
     "path": "vue/src/signature/src/mobile-first.vue",
@@ -2106,13 +2477,17 @@
     "path": "vue/src/skeleton/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "SkeletonItem": {
     "path": "vue/src/skeleton-item/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "SkeletonItemPc": {
     "path": "vue/src/skeleton-item/src/pc.vue",
@@ -2128,19 +2503,27 @@
     "path": "vue/src/slider/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "SliderButton": {
     "path": "vue/src/slider-button/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first"]
+    "mode": [
+      "mobile-first"
+    ]
   },
   "SliderButtonGroup": {
     "path": "vue/src/slider-button-group/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first"]
+    "mode": [
+      "mobile-first"
+    ]
   },
   "SliderButtonGroupMobileFirst": {
     "path": "vue/src/slider-button-group/src/mobile-first.vue",
@@ -2171,7 +2554,9 @@
     "path": "vue/src/split/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "SplitPc": {
     "path": "vue/src/split/src/pc.vue",
@@ -2182,13 +2567,17 @@
     "path": "vue/src/standard-list-item/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first"]
+    "mode": [
+      "mobile-first"
+    ]
   },
   "Statistic": {
     "path": "vue/src/statistic/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "StatisticPc": {
     "path": "vue/src/statistic/src/pc.vue",
@@ -2199,7 +2588,10 @@
     "path": "vue/src/steps/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "StepsMobileFirst": {
     "path": "vue/src/steps/src/mobile-first.vue",
@@ -2215,7 +2607,10 @@
     "path": "vue/src/sticky/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "StickyMobileFirst": {
     "path": "vue/src/sticky/src/mobile-first.vue",
@@ -2231,7 +2626,11 @@
     "path": "vue/src/switch/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "SwitchMobile": {
     "path": "vue/src/switch/src/mobile.vue",
@@ -2252,7 +2651,10 @@
     "path": "vue/src/tab-item/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "TabItemMobileFirst": {
     "path": "vue/src/tab-item/src/mobile-first.vue",
@@ -2268,13 +2670,19 @@
     "path": "vue/src/tabbar/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile"]
+    "mode": [
+      "mobile-first",
+      "mobile"
+    ]
   },
   "TabbarItem": {
     "path": "vue/src/tabbar-item/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile"]
+    "mode": [
+      "mobile-first",
+      "mobile"
+    ]
   },
   "TabbarItemMobile": {
     "path": "vue/src/tabbar-item/src/mobile.vue",
@@ -2300,7 +2708,10 @@
     "path": "vue/src/table/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile", "pc"]
+    "mode": [
+      "mobile",
+      "pc"
+    ]
   },
   "TableMobile": {
     "path": "vue/src/table/src/mobile.vue",
@@ -2316,7 +2727,11 @@
     "path": "vue/src/tabs/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "TabsMobile": {
     "path": "vue/src/tabs/src/mobile.vue",
@@ -2337,13 +2752,20 @@
     "path": "vue/src/tag/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "TagGroup": {
     "path": "vue/src/tag-group/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "TagGroupMobileFirst": {
     "path": "vue/src/tag-group/src/mobile-first.vue",
@@ -2374,7 +2796,9 @@
     "path": "vue/src/text-popup/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "TextPopupPc": {
     "path": "vue/src/text-popup/src/pc.vue",
@@ -2385,13 +2809,20 @@
     "path": "vue/src/time/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "TimeLine": {
     "path": "vue/src/time-line/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "TimeLineMobile": {
     "path": "vue/src/time-line/src/mobile.vue",
@@ -2407,7 +2838,11 @@
     "path": "vue/src/time-line-new/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "TimeLineNewMobile": {
     "path": "vue/src/time-line-new/src/mobile.vue",
@@ -2438,7 +2873,10 @@
     "path": "vue/src/time-panel/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "TimePanelMobileFirst": {
     "path": "vue/src/time-panel/src/mobile-first.vue",
@@ -2459,31 +2897,42 @@
     "path": "vue/src/time-picker/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "TimePickerMobile": {
     "path": "vue/src/time-picker-mobile/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first"]
+    "mode": [
+      "mobile-first"
+    ]
   },
   "TimeRange": {
     "path": "vue/src/time-range/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "TimeSelect": {
     "path": "vue/src/time-select/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "TimeSpinner": {
     "path": "vue/src/time-spinner/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "TimeSpinnerMobileFirst": {
     "path": "vue/src/time-spinner/src/mobile-first.vue",
@@ -2499,7 +2948,9 @@
     "path": "vue/src/timeline-item/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "TimelineItemPc": {
     "path": "vue/src/timeline-item/src/pc.vue",
@@ -2510,7 +2961,9 @@
     "path": "vue/src/toast/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile"]
+    "mode": [
+      "mobile"
+    ]
   },
   "ToastMobile": {
     "path": "vue/src/toast/src/mobile.vue",
@@ -2521,7 +2974,9 @@
     "path": "vue/src/toggle-menu/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "ToggleMenuPc": {
     "path": "vue/src/toggle-menu/src/pc.vue",
@@ -2532,7 +2987,10 @@
     "path": "vue/src/tooltip/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "TooltipMobileFirst": {
     "path": "vue/src/tooltip/src/mobile-first.vue",
@@ -2548,7 +3006,9 @@
     "path": "vue/src/top-box/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "TopBoxPc": {
     "path": "vue/src/top-box/src/pc.vue",
@@ -2559,13 +3019,17 @@
     "path": "vue/src/transfer/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "TransferPanel": {
     "path": "vue/src/transfer-panel/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "TransferPc": {
     "path": "vue/src/transfer/src/pc.vue",
@@ -2576,13 +3040,17 @@
     "path": "vue/src/tree/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "TreeMenu": {
     "path": "vue/src/tree-menu/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "TreeMenuPc": {
     "path": "vue/src/tree-menu/src/pc.vue",
@@ -2598,19 +3066,27 @@
     "path": "vue/src/tree-select/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "Upload": {
     "path": "vue/src/upload/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "UploadDragger": {
     "path": "vue/src/upload-dragger/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "UploadDraggerMobileFirst": {
     "path": "vue/src/upload-dragger/src/mobile-first.vue",
@@ -2626,7 +3102,11 @@
     "path": "vue/src/upload-list/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "UploadListMobile": {
     "path": "vue/src/upload-list/src/mobile.vue",
@@ -2657,13 +3137,17 @@
     "path": "vue/src/user/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "UserAccount": {
     "path": "vue/src/user-account/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "UserAccountPc": {
     "path": "vue/src/user-account/src/pc.vue",
@@ -2674,7 +3158,9 @@
     "path": "vue/src/user-contact/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "UserContactPc": {
     "path": "vue/src/user-contact/src/pc.vue",
@@ -2685,13 +3171,19 @@
     "path": "vue/src/user-head/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "mobile", "pc"]
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
   },
   "UserHeadGroup": {
     "path": "vue/src/user-head-group/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first"]
+    "mode": [
+      "mobile-first"
+    ]
   },
   "UserHeadGroupMobileFirst": {
     "path": "vue/src/user-head-group/src/mobile-first.vue",
@@ -2717,7 +3209,9 @@
     "path": "vue/src/user-link/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "UserLinkPc": {
     "path": "vue/src/user-link/src/pc.vue",
@@ -2733,7 +3227,9 @@
     "path": "vue/src/virtual-scroll-box/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "VirtualScrollBoxPc": {
     "path": "vue/src/virtual-scroll-box/src/pc.vue",
@@ -2744,7 +3240,9 @@
     "path": "vue/src/virtual-tree/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "VirtualTreePc": {
     "path": "vue/src/virtual-tree/src/pc.vue",
@@ -2755,19 +3253,25 @@
     "path": "vue/src/watermark/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "Wheel": {
     "path": "vue/src/wheel/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile"]
+    "mode": [
+      "mobile"
+    ]
   },
   "Wizard": {
     "path": "vue/src/wizard/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["pc"]
+    "mode": [
+      "pc"
+    ]
   },
   "WizardPc": {
     "path": "vue/src/wizard/src/pc.vue",
@@ -2778,7 +3282,10 @@
     "path": "vue/src/year-range/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "YearRangeMobileFirst": {
     "path": "vue/src/year-range/src/mobile-first.vue",
@@ -2794,7 +3301,10 @@
     "path": "vue/src/year-table/index.ts",
     "type": "component",
     "exclude": false,
-    "mode": ["mobile-first", "pc"]
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
   },
   "YearTableMobileFirst": {
     "path": "vue/src/year-table/src/mobile-first.vue",
diff --git a/packages/theme/src/index.less b/packages/theme/src/index.less
index fad9264dd..1c9462d23 100644
--- a/packages/theme/src/index.less
+++ b/packages/theme/src/index.less
@@ -6,6 +6,7 @@
 @import './autocomplete/index.less';
 @import './badge/index.less';
 @import './base/index.less';
+@import './base-select/index.less';
 @import './breadcrumb/index.less';
 @import './breadcrumb-item/index.less';
 @import './bulletin-board/index.less';
diff --git a/packages/vue-icon-saas/index.ts b/packages/vue-icon-saas/index.ts
index c904be4b9..ed4536af2 100644
--- a/packages/vue-icon-saas/index.ts
+++ b/packages/vue-icon-saas/index.ts
@@ -127,6 +127,7 @@ import IconExport from './src/export'
 import IconExpressSearch from './src/express-search'
 import IconEyeclose from './src/eyeclose'
 import IconEyeopen from './src/eyeopen'
+import IconFeedback from './src/feedback'
 import IconEditorAlignCenter from './src/editor-align-center'
 import IconEditorAlignLeft from './src/editor-align-left'
 import IconEditorAlignRight from './src/editor-align-right'
@@ -180,6 +181,7 @@ import IconFrownO from './src/frown-o'
 import IconFrown from './src/frown'
 import IconFullscreen from './src/fullscreen'
 import IconFullscreenLeft from './src/fullscreen-left'
+import IconFullscreenRight from './src/fullscreen-right'
 import IconGoBack from './src/go-back'
 import IconGrade from './src/grade'
 import IconGroupTransfer from './src/group-transfer'
@@ -219,6 +221,7 @@ import IconLineThrought from './src/line-throught'
 import IconLink from './src/link'
 import IconLoading from './src/loading'
 import IconLoadingShadow from './src/loading-shadow'
+import IconLocalePanel from './src/locale-panel'
 import IconLock from './src/lock'
 import IconMailContent from './src/mail-content'
 import IconMail from './src/mail'
@@ -339,6 +342,7 @@ import IconSetting from './src/setting'
 import IconShare from './src/share'
 import IconShareArrow from './src/share-arrow'
 import IconShoppingCard from './src/shopping-card'
+import IconShutdown from './src/shutdown'
 import IconSmileO from './src/smile-o'
 import IconSmile from './src/smile'
 import IconSoldOut from './src/sold-out'
@@ -377,6 +381,7 @@ import IconUnlock from './src/unlock'
 import IconUnsent from './src/unsent'
 import IconUpO from './src/up-o'
 import IconUp from './src/up'
+import IconUpdate from './src/update'
 import IconUpload from './src/upload'
 import IconUser from './src/user'
 import IconVersiontree from './src/versiontree'
@@ -431,6 +436,7 @@ import IconAddPicture from './src/add-picture'
 
 // sync aui icons
 import IconAdministratorO from './src/administrator-o'
+import IconAgency from './src/agency'
 import IconAudit from './src/audit'
 import IconBatchFill from './src/batch-fill'
 import IconCardMode from './src/card-mode'
@@ -509,6 +515,7 @@ import IconShipped from './src/shipped'
 import IconSubstituteMaterial from './src/substitute-material'
 import IconSurchargeSettled from './src/surcharge-settled'
 import IconSurchargeToBeSettled from './src/surcharge-to-be-settled'
+import IconSynchronize from './src/synchronize'
 import IconToBeUploaded from './src/to-be-uploaded'
 import IconTotalNolume from './src/total-nolume'
 import IconTotalNumber from './src/total-number'
@@ -593,6 +600,8 @@ export {
   IconSurchargeSettled as iconSurchargeSettled,
   IconSurchargeToBeSettled,
   IconSurchargeToBeSettled as iconSurchargeToBeSettled,
+  IconSynchronize,
+  IconSynchronize as iconSynchronize,
   IconToBeUploaded,
   IconToBeUploaded as iconToBeUploaded,
   IconTotalNolume,
@@ -919,6 +928,8 @@ export {
   IconEyeclose as iconEyeclose,
   IconEyeopen,
   IconEyeopen as iconEyeopen,
+  IconFeedback,
+  IconFeedback as iconFeedback,
   IconEditorAlignCenter,
   IconEditorAlignCenter as iconEditorAlignCenter,
   IconEditorAlignLeft,
@@ -1025,6 +1036,8 @@ export {
   IconFullscreen as iconFullscreen,
   IconFullscreenLeft,
   IconFullscreenLeft as iconFullscreenLeft,
+  IconFullscreenRight,
+  IconFullscreenRight as iconFullscreenRight,
   IconMinscreenLeft,
   IconMinscreenLeft as iconMinscreenLeft,
   IconGoBack,
@@ -1105,6 +1118,8 @@ export {
   IconLoading as iconLoading,
   IconLoadingShadow,
   IconLoadingShadow as iconLoadingShadow,
+  IconLocalePanel,
+  IconLocalePanel as iconLocalePanel,
   IconLock,
   IconLock as iconLock,
   IconLeftWardArrow,
@@ -1345,6 +1360,8 @@ export {
   IconShareArrow as iconShareArrow,
   IconShoppingCard,
   IconShoppingCard as iconShoppingCard,
+  IconShutdown,
+  IconShutdown as iconShutdown,
   IconSmileO,
   IconSmileO as iconSmileO,
   IconSmile,
@@ -1421,6 +1438,8 @@ export {
   IconUpO as iconUpO,
   IconUp,
   IconUp as iconUp,
+  IconUpdate,
+  IconUpdate as iconUpdate,
   IconUpWard,
   IconUpWard as iconUpWard,
   IconUpload,
@@ -1457,6 +1476,8 @@ export {
   // sync aui icons
   IconAdministratorO,
   IconAdministratorO as iconAdministratorO,
+  IconAgency,
+  IconAgency as iconAgency,
   IconAudit,
   IconAudit as iconAudit,
   IconBatchFill,
@@ -1580,6 +1601,7 @@ export default {
   IconSubstituteMaterial,
   IconSurchargeSettled,
   IconSurchargeToBeSettled,
+  IconSynchronize,
   IconToBeUploaded,
   IconTotalNolume,
   IconTotalNumber,
@@ -1741,6 +1763,7 @@ export default {
   IconExpressSearch,
   IconEyeclose,
   IconEyeopen,
+  IconFeedback,
   IconEditorAlignCenter,
   IconEditorAlignLeft,
   IconEditorAlignRight,
@@ -1794,6 +1817,7 @@ export default {
   IconFrown,
   IconFullscreen,
   IconFullscreenLeft,
+  IconFullscreenRight,
   IconMinscreenLeft,
   IconGoBack,
   IconGrade,
@@ -1834,6 +1858,7 @@ export default {
   IconLink,
   IconLoading,
   IconLoadingShadow,
+  IconLocalePanel,
   IconLock,
   IconLeftWardArrow,
   IconMailContent,
@@ -1953,6 +1978,7 @@ export default {
   IconShare,
   IconShareArrow,
   IconShoppingCard,
+  IconShutdown,
   IconSmileO,
   IconSmile,
   IconSoldOut,
@@ -1991,6 +2017,7 @@ export default {
   IconUnsent,
   IconUpO,
   IconUp,
+  IconUpdate,
   IconUpWard,
   IconUpload,
   IconUser,
@@ -2009,6 +2036,7 @@ export default {
   IconAddPicture,
   // sync aui icons
   IconAdministratorO,
+  IconAgency,
   IconAudit,
   IconBatchFill,
   IconCardMode,

From 042c3b6b262fe2fdf4721198ff5fe912f88867ba Mon Sep 17 00:00:00 2001
From: chenxi-20 <2465950588@qq.com>
Date: Mon, 28 Oct 2024 01:58:37 -0700
Subject: [PATCH 02/65] =?UTF-8?q?fix(docs):=20=E5=A2=9E=E5=8A=A0=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E6=96=87=E4=BB=B6=E7=B1=BB=E5=9E=8B=E8=AF=B4=E6=98=8E?=
 =?UTF-8?q?=20(#2439)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/sites/demos/pc/app/file-upload/webdoc/file-upload.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/sites/demos/pc/app/file-upload/webdoc/file-upload.js b/examples/sites/demos/pc/app/file-upload/webdoc/file-upload.js
index 1f61fb712..b520ba5c4 100644
--- a/examples/sites/demos/pc/app/file-upload/webdoc/file-upload.js
+++ b/examples/sites/demos/pc/app/file-upload/webdoc/file-upload.js
@@ -59,8 +59,8 @@ export default {
         'en-US': 'Restrict file types'
       },
       desc: {
-        'zh-CN': '通过 <code>accept</code> 设置限制上传文件的格式。',
-        'en-US': 'Limit the format of uploaded files by setting <code>accept</code> .'
+        'zh-CN': '通过 <code>accept</code> 设置限制上传文件的格式只能为图片类型。',
+        'en-US': 'Set a limit on the format of uploaded files to only be image type through <code>accept</code>.'
       },
       codeFiles: ['accept-file-image.vue']
     },

From 38839af405215e9c30fa1531d84852241e5c3926 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=94=B3=E5=90=9B=E5=81=A5?= <40288193@qq.com>
Date: Mon, 28 Oct 2024 16:59:08 +0800
Subject: [PATCH 03/65] fix(tag): update tag's size when only icon, update one
 place of  button's icon size (#2440)

---
 .../demos/pc/app/tag/size-composition-api.vue |  8 +++++
 examples/sites/demos/pc/app/tag/size.vue      |  9 +++++-
 examples/sites/demos/pc/app/tag/webdoc/tag.js |  6 ++--
 packages/theme/src/button/vars.less           |  2 +-
 packages/theme/src/tag/index.less             | 29 +++++++++++++------
 packages/theme/src/tag/vars.less              | 23 ++++++++++++---
 6 files changed, 60 insertions(+), 17 deletions(-)

diff --git a/examples/sites/demos/pc/app/tag/size-composition-api.vue b/examples/sites/demos/pc/app/tag/size-composition-api.vue
index 7335699fb..bfecbcd50 100644
--- a/examples/sites/demos/pc/app/tag/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/tag/size-composition-api.vue
@@ -4,11 +4,19 @@
     <tiny-tag type="success"> 默认标签 </tiny-tag>
     <tiny-tag size="small" type="success"> 小型标签 </tiny-tag>
     <tiny-tag size="mini" type="success"> 超小标签 </tiny-tag>
+    <br /><br />
+    <tiny-tag size="medium" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
+    <tiny-tag type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
+    <tiny-tag size="small" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
+    <tiny-tag size="mini" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
   </div>
 </template>
 
 <script setup lang="jsx">
 import { TinyTag } from '@opentiny/vue'
+import { IconHeartempty } from '@opentiny/vue-icon'
+
+const TinyIconHeartempty = IconHeartempty()
 </script>
 
 <style>
diff --git a/examples/sites/demos/pc/app/tag/size.vue b/examples/sites/demos/pc/app/tag/size.vue
index 3bbbc4547..46ba8ebff 100644
--- a/examples/sites/demos/pc/app/tag/size.vue
+++ b/examples/sites/demos/pc/app/tag/size.vue
@@ -4,15 +4,22 @@
     <tiny-tag type="success"> 默认标签 </tiny-tag>
     <tiny-tag size="small" type="success"> 小型标签 </tiny-tag>
     <tiny-tag size="mini" type="success"> 超小标签 </tiny-tag>
+    <br /><br />
+    <tiny-tag size="medium" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
+    <tiny-tag type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
+    <tiny-tag size="small" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
+    <tiny-tag size="mini" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
   </div>
 </template>
 
 <script lang="jsx">
 import { TinyTag } from '@opentiny/vue'
+import { IconHeartempty } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTag
+    TinyTag,
+    TinyIconHeartempty: IconHeartempty()
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/tag/webdoc/tag.js b/examples/sites/demos/pc/app/tag/webdoc/tag.js
index 0295a12cf..02428478c 100644
--- a/examples/sites/demos/pc/app/tag/webdoc/tag.js
+++ b/examples/sites/demos/pc/app/tag/webdoc/tag.js
@@ -11,11 +11,13 @@ export default {
       desc: {
         'zh-CN': `
           通过默认插槽，可以将文字和图标显示为一个标签。 <br>
-          通过 <code>value</code> 属性，也可以设置标签值。
+          通过 <code>value</code> 属性，也可以设置标签值。 <br>
+          通过 <code>only-icon</code> 属性，设置标签只有图标。
         `,
         'en-US': `
           Through the default slot, text and ICONS can be displayed as a label. <br>
-          Tag values can also be set using the <code>value</code> property.
+          Tag values can also be set using the <code>value</code> property. <br>
+          Use the <code>only-icon</code> property to set the label to only ICONS.
         `
       },
       codeFiles: ['basic-usage.vue']
diff --git a/packages/theme/src/button/vars.less b/packages/theme/src/button/vars.less
index 569638a78..1b7582deb 100644
--- a/packages/theme/src/button/vars.less
+++ b/packages/theme/src/button/vars.less
@@ -66,7 +66,7 @@
   // 小型按钮最小宽度
   --tv-Button-min-width-small: 72px;
   // 小型按钮内图标的大小
-  --tv-Button-size-icon-font-size-small: 14px;
+  --tv-Button-size-icon-font-size-small: 16px;
   // 超小按钮字号
   --tv-Button-font-size-mini: var(--tv-font-size-sm);
   // 超小按钮高度
diff --git a/packages/theme/src/tag/index.less b/packages/theme/src/tag/index.less
index 9cc038760..512752ee7 100644
--- a/packages/theme/src/tag/index.less
+++ b/packages/theme/src/tag/index.less
@@ -29,16 +29,36 @@
   text-overflow: ellipsis;
   overflow: hidden;
 
+  &.@{tag-prefix-cls}--only-icon.@{tag-prefix-cls}--only-icon.@{tag-prefix-cls}--only-icon {
+    padding: var(--tv-Tag-only-icon-padding);
+
+    svg {
+      font-size: var(--tv-Tag-only-icon-font-size);
+      margin-right: 0; // 此时不需要右边距了
+    }
+  }
+
   /** size 场景 */
   .size-mixin(@size) {
     @fs: %('var(--tv-Tag-font-size%a)', @size);
     @px: %('var(--tv-Tag-padding-x%a)', @size);
     @py: %('var(--tv-Tag-padding-y%a)', @size);
     @br: %('var(--tv-Tag-border-radius%a)', @size);
+    @icon-fs: %('var(--tv-Tag-only-icon-font-size%a)', @size);
+    @icon-py: %('var(--tv-Tag-only-icon-padding%a)', @size);
 
     font-size: e(@fs);
     padding: e(@py) e(@px);
     border-radius: e(@br);
+
+    &.@{tag-prefix-cls}--only-icon.@{tag-prefix-cls}--only-icon {
+      padding: e(@icon-py);
+
+      svg {
+        font-size: e(@icon-fs);
+        margin-right: 0; // 此时不需要右边距了
+      }
+    }
   }
 
   .size-mixin(e(''));
@@ -149,13 +169,4 @@
     margin-right: var(--tv-Tag-slot-icon-margin-right);
     fill: currentColor;
   }
-
-  &.@{tag-prefix-cls}--only-icon.@{tag-prefix-cls}--only-icon.@{tag-prefix-cls}--only-icon {
-    padding: var(--tv-Tag-only-icon-padding);
-
-    svg {
-      font-size: var(--tv-Tag-only-icon-font-size);
-      margin-right: 0; // 此时不需要右边距了
-    }
-  }
 }
diff --git a/packages/theme/src/tag/vars.less b/packages/theme/src/tag/vars.less
index 9f02188f6..efca52721 100644
--- a/packages/theme/src/tag/vars.less
+++ b/packages/theme/src/tag/vars.less
@@ -24,6 +24,11 @@
   --tv-Tag-padding-y-mini: 0.5px;
   // 超小标签圆角
   --tv-Tag-border-radius-mini: var(--tv-border-radius-xs);
+  // 标签在仅图标模式时，图标的大小
+  --tv-Tag-only-icon-font-size-mini: 12px;
+  // 标签在仅图标模式时，标签的内边距
+  --tv-Tag-only-icon-padding-mini: 2px;
+
   // 小型标签字号
   --tv-Tag-font-size-small: var(--tv-font-size-sm);
   // 小型标签水平间距
@@ -32,6 +37,11 @@
   --tv-Tag-padding-y-small: 0;
   // 小型标签圆角
   --tv-Tag-border-radius-small: var(--tv-border-radius-xs);
+  // 标签在仅图标模式时，图标的大小
+  --tv-Tag-only-icon-font-size-small: 14px;
+  // 标签在仅图标模式时，标签的内边距
+  --tv-Tag-only-icon-padding-small: 2px;
+
   // 默认标签字号
   --tv-Tag-font-size: var(--tv-font-size-md);
   // 默认标签水平间距
@@ -40,6 +50,11 @@
   --tv-Tag-padding-y: 0.5px;
   // 默认标签圆角
   --tv-Tag-border-radius: var(--tv-border-radius-sm);
+  // 标签在仅图标模式时，图标的大小
+  --tv-Tag-only-icon-font-size: 16px;
+  // 标签在仅图标模式时，标签的内边距
+  --tv-Tag-only-icon-padding: 3px;
+
   // 中等标签字号
   --tv-Tag-font-size-medium: var(--tv-font-size-md);
   // 中等标签水平间距
@@ -48,6 +63,10 @@
   --tv-Tag-padding-y-medium: 4.5px;
   // 中等标签圆角
   --tv-Tag-border-radius-medium: var(--tv-border-radius-md);
+  // 标签在仅图标模式时，图标的大小
+  --tv-Tag-only-icon-font-size-medium: 20px;
+  // 标签在仅图标模式时，标签的内边距
+  --tv-Tag-only-icon-padding-medium: 5px;
 
   //------------------------------------------------------- 颜色 场景：（1、考虑border，虽然cloud design没有，但适配其它肯定有border的) ----
 
@@ -201,8 +220,4 @@
   //------------------------------------------------------- 其它 场景：-----------------------------------
   // 标签插槽有前置图标时，图标的右间距
   --tv-Tag-slot-icon-margin-right: var(--tv-space-sm);
-  // 标签在仅图标模式时，图标的大小
-  --tv-Tag-only-icon-font-size: var(--tv-font-size-sm);
-  // 标签在仅图标模式时，标签的内边距
-  --tv-Tag-only-icon-padding: 3px;
 }

From 0fb2966ed36a74ec381a2a46adb22c002a5f0511 Mon Sep 17 00:00:00 2001
From: MomoPoppy <125256456+MomoPoppy@users.noreply.github.com>
Date: Mon, 28 Oct 2024 02:22:45 -0700
Subject: [PATCH 04/65] fix(date-picker): [date-picker,select] fix radius bugs
 for month-table (#2442)

---
 packages/theme/src/month-table/index.less | 19 +++++++++++++++++++
 packages/theme/src/month-table/vars.less  |  5 +++++
 packages/theme/src/select/index.less      |  4 ++++
 packages/vue/src/select/src/pc.vue        |  1 +
 4 files changed, 29 insertions(+)

diff --git a/packages/theme/src/month-table/index.less b/packages/theme/src/month-table/index.less
index 4f1442701..24442a068 100644
--- a/packages/theme/src/month-table/index.less
+++ b/packages/theme/src/month-table/index.less
@@ -92,6 +92,25 @@
       div:hover {
         background-color: var(--tv-MonthTable-bg-color-hover);
       }
+
+      &:first-of-type {
+        div {
+          border-radius: var(--tv-MonthTable-cell-border-radius-first);
+        }
+
+        &.end-date {
+          div {
+            border-radius: var(--tv-MonthTable-cell-border-radius);
+            padding-left: 0;
+          }
+        }
+      }
+
+      &:last-of-type {
+        div {
+          border-radius: var(--tv-MonthTable-cell-border-radius-last);
+        }
+      }
     }
 
     &.end-date,
diff --git a/packages/theme/src/month-table/vars.less b/packages/theme/src/month-table/vars.less
index dfd0d339a..5c4afb511 100644
--- a/packages/theme/src/month-table/vars.less
+++ b/packages/theme/src/month-table/vars.less
@@ -34,6 +34,11 @@
     var(--tv-border-radius-round, 999px);
   // 单元格圆角（结束月份）
   --tv-MonthTable-cell-border-radius-end: 0 var(--tv-border-radius-round, 999px) var(--tv-border-radius-round, 999px) 0;
+  // 选中月份每行第一个单元格的圆角
+  --tv-MonthTable-cell-border-radius-first: var(--tv-border-radius-round, 999px) 0 0
+    var(--tv-border-radius-round, 999px);
+  // 选中月份每行最后一个单元格的圆角
+  --tv-MonthTable-cell-border-radius-last: 0 var(--tv-border-radius-round, 999px) var(--tv-border-radius-round, 999px) 0;
 
   // 单元格边框色（选中）
   --tv-MonthTable-cell-border-color-today: var(--tv-color-border-active, #191919);
diff --git a/packages/theme/src/select/index.less b/packages/theme/src/select/index.less
index e6efb9c4b..30a78cf89 100644
--- a/packages/theme/src/select/index.less
+++ b/packages/theme/src/select/index.less
@@ -341,6 +341,10 @@
       visibility: hidden;
       position: absolute;
     }
+
+    .tiny-svg {
+      margin-right: 0;
+    }
   }
 
   &.is-disabled,
diff --git a/packages/vue/src/select/src/pc.vue b/packages/vue/src/select/src/pc.vue
index bb4ac6f09..e494e5409 100644
--- a/packages/vue/src/select/src/pc.vue
+++ b/packages/vue/src/select/src/pc.vue
@@ -156,6 +156,7 @@
                   :type="state.getTagType"
                   key="tags-collapse"
                   data-tag="tags-collapse"
+                  only-icon
                   :closable="false"
                   :size="state.collapseTagSize"
                   @click="onClickCollapseTag($event)"

From c5a67e6dfe5439e765a9a6ad80fa51867c298d8d Mon Sep 17 00:00:00 2001
From: gimmyhehe <975402925@qq.com>
Date: Mon, 28 Oct 2024 18:56:15 +0800
Subject: [PATCH 05/65] docs(site): fix demos and test e2e (#2444)

---
 .../demos/pc/app/color-picker/history-composition-api.vue | 6 +++---
 .../pc/app/color-picker/predefine-composition-api.vue     | 6 +++---
 .../pc/app/color-select-panel/history-composition-api.vue | 8 +++++++-
 .../app/color-select-panel/predefine-composition-api.vue  | 2 +-
 .../grid/editor/custom-editor-select-composition-api.vue  | 2 +-
 .../demos/pc/app/grid/editor/custom-editor-select.vue     | 2 +-
 .../pc/app/grid/editor/mutil-render-composition-api.vue   | 2 +-
 examples/sites/demos/pc/app/grid/editor/mutil-render.vue  | 2 +-
 .../popeditor-in-grid-remote-search-composition-api.vue   | 2 +-
 .../app/grid/editor/popeditor-in-grid-remote-search.vue   | 2 +-
 .../large-data/grid-large-tree-data-composition-api.vue   | 6 +++---
 .../demos/pc/app/grid/large-data/grid-large-tree-data.vue | 6 +++---
 .../grid/renderer/async-colunm-render-composition-api.vue | 2 +-
 .../demos/pc/app/grid/renderer/async-colunm-render.vue    | 2 +-
 .../app/grid/renderer/custom-renderer-composition-api.vue | 2 +-
 .../sites/demos/pc/app/grid/renderer/custom-renderer.vue  | 2 +-
 .../app/grid/validation/valid-config-composition-api.vue  | 2 +-
 .../sites/demos/pc/app/grid/validation/valid-config.vue   | 2 +-
 .../validation-scroll-to-col-composition-api.vue          | 2 +-
 .../pc/app/grid/validation/validation-scroll-to-col.vue   | 2 +-
 .../sites/demos/pc/app/select/nest-grid-remote.spec.ts    | 2 +-
 examples/sites/demos/pc/app/select/nest-grid-remote.vue   | 2 +-
 examples/sites/demos/pc/app/select/nest-grid.spec.ts      | 2 +-
 .../demos/pc/app/select/nest-radio-grid-much-data.spec.ts | 2 +-
 examples/sites/demos/pc/app/select/size.spec.ts           | 2 +-
 examples/sites/demos/pc/app/slider/max-min.spec.ts        | 4 ++--
 26 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/examples/sites/demos/pc/app/color-picker/history-composition-api.vue b/examples/sites/demos/pc/app/color-picker/history-composition-api.vue
index 4108cf32e..c152b6a3a 100644
--- a/examples/sites/demos/pc/app/color-picker/history-composition-api.vue
+++ b/examples/sites/demos/pc/app/color-picker/history-composition-api.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <ColorPicker v-model="color" :history="history" />
+    <tiny-color-picker v-model="color" :history="history" />
     <br />
-    <Button @click="addHistoryColor">Append history color</Button>
-    <Button @click="popHistoryColor">Pop history color</Button>
+    <tiny-button @click="addHistoryColor">Append history color</tiny-button>
+    <tiny-button @click="popHistoryColor">Pop history color</tiny-button>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/color-picker/predefine-composition-api.vue b/examples/sites/demos/pc/app/color-picker/predefine-composition-api.vue
index 96281bd10..1a6bbb2bf 100644
--- a/examples/sites/demos/pc/app/color-picker/predefine-composition-api.vue
+++ b/examples/sites/demos/pc/app/color-picker/predefine-composition-api.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <ColorPicker v-model="color" :predefine="predefine" />
+    <tiny-color-picker v-model="color" :predefine="predefine" />
     <br />
-    <Button @click="addPredefineColor">Append predefine color</Button>
-    <Button @click="popPredefineColor">Pop predefine color</Button>
+    <tiny-button @click="addPredefineColor">Append predefine color</tiny-button>
+    <tiny-button @click="popPredefineColor">Pop predefine color</tiny-button>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/color-select-panel/history-composition-api.vue b/examples/sites/demos/pc/app/color-select-panel/history-composition-api.vue
index 010330d3e..8846485cf 100644
--- a/examples/sites/demos/pc/app/color-select-panel/history-composition-api.vue
+++ b/examples/sites/demos/pc/app/color-select-panel/history-composition-api.vue
@@ -4,7 +4,13 @@
     <tiny-button @click="addHistoryColor">Append history color</tiny-button>
     <tiny-button @click="popHistoryColor">Pop history color</tiny-button>
     <div style="position: relative">
-      <ColorSelectPanel v-model="color" :visible="visible" @confirm="onConfirm" @cancel="onCancel" :history="history" />
+      <tiny-color-select-panel
+        v-model="color"
+        :visible="visible"
+        @confirm="onConfirm"
+        @cancel="onCancel"
+        :history="history"
+      />
     </div>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/color-select-panel/predefine-composition-api.vue b/examples/sites/demos/pc/app/color-select-panel/predefine-composition-api.vue
index 6e956bd6b..07397a67e 100644
--- a/examples/sites/demos/pc/app/color-select-panel/predefine-composition-api.vue
+++ b/examples/sites/demos/pc/app/color-select-panel/predefine-composition-api.vue
@@ -4,7 +4,7 @@
     <tiny-button @click="addPredefineColor">Append predefine color</tiny-button>
     <tiny-button @click="popPredefineColor">Pop predefine color</tiny-button>
     <div style="position: relative">
-      <ColorSelectPanel
+      <tiny-color-select-panel
         v-model="color"
         :visible="visible"
         @confirm="onConfirm"
diff --git a/examples/sites/demos/pc/app/grid/editor/custom-editor-select-composition-api.vue b/examples/sites/demos/pc/app/grid/editor/custom-editor-select-composition-api.vue
index 5e1448b32..dd0bab238 100644
--- a/examples/sites/demos/pc/app/grid/editor/custom-editor-select-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/editor/custom-editor-select-composition-api.vue
@@ -11,7 +11,7 @@
         field="area"
         title="区域"
         :editor="{
-          component: Select,
+          component: TinySelect,
           attrs: { options, textField: 'name', valueField: 'id' }
         }"
         :format-config="{ data: options, label: 'name', value: 'id' }"
diff --git a/examples/sites/demos/pc/app/grid/editor/custom-editor-select.vue b/examples/sites/demos/pc/app/grid/editor/custom-editor-select.vue
index 0bf651332..17c7c41f9 100644
--- a/examples/sites/demos/pc/app/grid/editor/custom-editor-select.vue
+++ b/examples/sites/demos/pc/app/grid/editor/custom-editor-select.vue
@@ -11,7 +11,7 @@
         field="area"
         title="区域"
         :editor="{
-          component: Select,
+          component: TinySelect,
           attrs: { options, textField: 'name', valueField: 'id' }
         }"
         :format-config="{ data: options, label: 'name', value: 'id' }"
diff --git a/examples/sites/demos/pc/app/grid/editor/mutil-render-composition-api.vue b/examples/sites/demos/pc/app/grid/editor/mutil-render-composition-api.vue
index b2affaae0..872aee079 100644
--- a/examples/sites/demos/pc/app/grid/editor/mutil-render-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/editor/mutil-render-composition-api.vue
@@ -11,7 +11,7 @@
         field="area"
         title="区域"
         :editor="{
-          component: Select,
+          component: TinySelect,
           attrs: {
             multiple: true,
             options,
diff --git a/examples/sites/demos/pc/app/grid/editor/mutil-render.vue b/examples/sites/demos/pc/app/grid/editor/mutil-render.vue
index 046d58898..ba4a56b22 100644
--- a/examples/sites/demos/pc/app/grid/editor/mutil-render.vue
+++ b/examples/sites/demos/pc/app/grid/editor/mutil-render.vue
@@ -11,7 +11,7 @@
         field="area"
         title="区域"
         :editor="{
-          component: Select,
+          component: TinySelect,
           attrs: {
             multiple: true,
             options,
diff --git a/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search-composition-api.vue b/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search-composition-api.vue
index f402e449e..c1a1f06a0 100644
--- a/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search-composition-api.vue
@@ -8,7 +8,7 @@
     <tiny-grid-column
       field="id"
       title="名称（Popeditor）"
-      :editor="{ component: Popeditor, attrs: getPopEditorOp }"
+      :editor="{ component: TinyPopeditor, attrs: getPopEditorOp }"
       :format-config="{
         type: 'enum',
         async: true,
diff --git a/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search.vue b/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search.vue
index 0cc751b2a..49865c7af 100644
--- a/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search.vue
+++ b/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search.vue
@@ -8,7 +8,7 @@
     <tiny-grid-column
       field="id"
       title="名称（Popeditor）"
-      :editor="{ component: Popeditor, attrs: getPopEditorOp }"
+      :editor="{ component: TinyPopeditor, attrs: getPopEditorOp }"
       :format-config="{
         type: 'enum',
         async: true,
diff --git a/examples/sites/demos/pc/app/grid/large-data/grid-large-tree-data-composition-api.vue b/examples/sites/demos/pc/app/grid/large-data/grid-large-tree-data-composition-api.vue
index 7f4ff115d..4a9d92e49 100644
--- a/examples/sites/demos/pc/app/grid/large-data/grid-large-tree-data-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/grid-large-tree-data-composition-api.vue
@@ -43,17 +43,17 @@
     <tiny-grid-column
       field="planDevEndTime"
       title="计划开发结束时间"
-      :editor="{ component: DatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
+      :editor="{ component: TinyDatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
     ></tiny-grid-column>
     <tiny-grid-column
       field="planTestEndTime"
       title="计划测试结束时间"
-      :editor="{ component: DatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
+      :editor="{ component: TinyDatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
     ></tiny-grid-column>
     <tiny-grid-column
       field="customerExpect"
       title="用户期望交付时间"
-      :editor="{ component: DatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
+      :editor="{ component: TinyDatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
     ></tiny-grid-column>
     <tiny-grid-column field="requireSource" title="需求来源">
       <template #header="{ column }">{{ column.title }}</template>
diff --git a/examples/sites/demos/pc/app/grid/large-data/grid-large-tree-data.vue b/examples/sites/demos/pc/app/grid/large-data/grid-large-tree-data.vue
index e782ac4b9..86e9d5f9e 100644
--- a/examples/sites/demos/pc/app/grid/large-data/grid-large-tree-data.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/grid-large-tree-data.vue
@@ -43,17 +43,17 @@
     <tiny-grid-column
       field="planDevEndTime"
       title="计划开发结束时间"
-      :editor="{ component: DatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
+      :editor="{ component: TinyDatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
     ></tiny-grid-column>
     <tiny-grid-column
       field="planTestEndTime"
       title="计划测试结束时间"
-      :editor="{ component: DatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
+      :editor="{ component: TinyDatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
     ></tiny-grid-column>
     <tiny-grid-column
       field="customerExpect"
       title="用户期望交付时间"
-      :editor="{ component: DatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
+      :editor="{ component: TinyDatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
     ></tiny-grid-column>
     <tiny-grid-column field="requireSource" title="需求来源">
       <template #header="{ column }">{{ column.title }}</template>
diff --git a/examples/sites/demos/pc/app/grid/renderer/async-colunm-render-composition-api.vue b/examples/sites/demos/pc/app/grid/renderer/async-colunm-render-composition-api.vue
index 6373ef900..1e3e86560 100644
--- a/examples/sites/demos/pc/app/grid/renderer/async-colunm-render-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/renderer/async-colunm-render-composition-api.vue
@@ -18,7 +18,7 @@
         value: 'value'
       }"
       :editor="{
-        component: Select,
+        component: TinySelect,
         attrs: { textField: 'text', clearable: true }
       }"
     ></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/renderer/async-colunm-render.vue b/examples/sites/demos/pc/app/grid/renderer/async-colunm-render.vue
index 57291ed8b..86a282513 100644
--- a/examples/sites/demos/pc/app/grid/renderer/async-colunm-render.vue
+++ b/examples/sites/demos/pc/app/grid/renderer/async-colunm-render.vue
@@ -18,7 +18,7 @@
         value: 'value'
       }"
       :editor="{
-        component: Select,
+        component: TinySelect,
         attrs: { textField: 'text', clearable: true }
       }"
     ></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/renderer/custom-renderer-composition-api.vue b/examples/sites/demos/pc/app/grid/renderer/custom-renderer-composition-api.vue
index c6db2fcfd..a9699be91 100644
--- a/examples/sites/demos/pc/app/grid/renderer/custom-renderer-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/renderer/custom-renderer-composition-api.vue
@@ -7,7 +7,7 @@
         field="boole"
         title="Vue 渲染器"
         align="center"
-        :renderer="{ component: Switch }"
+        :renderer="{ component: TinySwitch }"
       ></tiny-grid-column>
       <tiny-grid-column field="area" title="区域"></tiny-grid-column>
       <tiny-grid-column field="createdDate" title="创建时间"></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/renderer/custom-renderer.vue b/examples/sites/demos/pc/app/grid/renderer/custom-renderer.vue
index 31348f5d0..f09b08209 100644
--- a/examples/sites/demos/pc/app/grid/renderer/custom-renderer.vue
+++ b/examples/sites/demos/pc/app/grid/renderer/custom-renderer.vue
@@ -7,7 +7,7 @@
         field="boole"
         title="Vue 渲染器"
         align="center"
-        :renderer="{ component: Switch }"
+        :renderer="{ component: TinySwitch }"
       ></tiny-grid-column>
       <tiny-grid-column field="area" title="区域"></tiny-grid-column>
       <tiny-grid-column field="createdDate" title="创建时间"></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/validation/valid-config-composition-api.vue b/examples/sites/demos/pc/app/grid/validation/valid-config-composition-api.vue
index af16edd58..7d50c32aa 100644
--- a/examples/sites/demos/pc/app/grid/validation/valid-config-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/validation/valid-config-composition-api.vue
@@ -15,7 +15,7 @@
       show-overflow="tooltip"
     >
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
-      <tiny-grid-column field="name" title="名称" :editor="{ component: Input }"></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称" :editor="{ component: TinyInput }"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" :editor="{ component: 'input' }"></tiny-grid-column>
       <tiny-grid-column field="address" title="地址" :editor="{ component: 'input' }"></tiny-grid-column>
       <tiny-grid-column field="introduction" title="公司简介" :editor="{ component: 'input' }"></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/validation/valid-config.vue b/examples/sites/demos/pc/app/grid/validation/valid-config.vue
index 3a5e9ccd3..a8fce890c 100644
--- a/examples/sites/demos/pc/app/grid/validation/valid-config.vue
+++ b/examples/sites/demos/pc/app/grid/validation/valid-config.vue
@@ -15,7 +15,7 @@
       show-overflow="tooltip"
     >
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
-      <tiny-grid-column field="name" title="名称" :editor="{ component: Input }"></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称" :editor="{ component: TinyInput }"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" :editor="{ component: 'input' }"></tiny-grid-column>
       <tiny-grid-column field="address" title="地址" :editor="{ component: 'input' }"></tiny-grid-column>
       <tiny-grid-column field="introduction" title="公司简介" :editor="{ component: 'input' }"></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/validation/validation-scroll-to-col-composition-api.vue b/examples/sites/demos/pc/app/grid/validation/validation-scroll-to-col-composition-api.vue
index 14b75f695..b24d68ce8 100644
--- a/examples/sites/demos/pc/app/grid/validation/validation-scroll-to-col-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/validation/validation-scroll-to-col-composition-api.vue
@@ -11,7 +11,7 @@
         <tiny-grid-toolbar :buttons="toolbarButtons" @button-click="toolbarButtonClickEvent"></tiny-grid-toolbar>
       </template>
       <tiny-grid-column type="index" width="160"></tiny-grid-column>
-      <tiny-grid-column field="name" title="名称" width="460" :editor="{ component: Input }"></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称" width="460" :editor="{ component: TinyInput }"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" width="460" :editor="{ component: 'input' }"></tiny-grid-column>
       <tiny-grid-column field="address" title="地址" width="460" :editor="{ component: 'input' }"></tiny-grid-column>
       <tiny-grid-column
diff --git a/examples/sites/demos/pc/app/grid/validation/validation-scroll-to-col.vue b/examples/sites/demos/pc/app/grid/validation/validation-scroll-to-col.vue
index f5c72c4e0..d94931d1f 100644
--- a/examples/sites/demos/pc/app/grid/validation/validation-scroll-to-col.vue
+++ b/examples/sites/demos/pc/app/grid/validation/validation-scroll-to-col.vue
@@ -11,7 +11,7 @@
         <tiny-grid-toolbar :buttons="toolbarButtons" @button-click="toolbarButtonClickEvent"></tiny-grid-toolbar>
       </template>
       <tiny-grid-column type="index" width="160"></tiny-grid-column>
-      <tiny-grid-column field="name" title="名称" width="460" :editor="{ component: Input }"></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称" width="460" :editor="{ component: TinyInput }"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" width="460" :editor="{ component: 'input' }"></tiny-grid-column>
       <tiny-grid-column field="address" title="地址" width="460" :editor="{ component: 'input' }"></tiny-grid-column>
       <tiny-grid-column
diff --git a/examples/sites/demos/pc/app/select/nest-grid-remote.spec.ts b/examples/sites/demos/pc/app/select/nest-grid-remote.spec.ts
index 2ff696724..2c4d56e0e 100644
--- a/examples/sites/demos/pc/app/select/nest-grid-remote.spec.ts
+++ b/examples/sites/demos/pc/app/select/nest-grid-remote.spec.ts
@@ -28,7 +28,7 @@ test.describe('下拉表格远程搜索', () => {
     const row2 = page.getByRole('row', { name: '省份2 城市2 区域2' })
     await expect(row2).not.toBeVisible()
     await row1.getByRole('cell').first().click()
-    await expect(row1).toHaveClass(/tiny-grid-body__row row__selected/)
+    await expect(row1).toHaveClass(/tiny-grid-body__row row__radio/)
     await expect(input).toHaveValue('省1-市1')
 
     const row3 = page.getByRole('row', { name: '省份10 城市10 区域10' })
diff --git a/examples/sites/demos/pc/app/select/nest-grid-remote.vue b/examples/sites/demos/pc/app/select/nest-grid-remote.vue
index e438022b8..c47aed32b 100644
--- a/examples/sites/demos/pc/app/select/nest-grid-remote.vue
+++ b/examples/sites/demos/pc/app/select/nest-grid-remote.vue
@@ -119,7 +119,7 @@ export default {
   methods: {
     remoteMethod(value) {
       const filterData = this.filter(value)
-
+      console.log(filterData, value)
       return new Promise((resolve) => {
         setTimeout(() => {
           resolve(filterData)
diff --git a/examples/sites/demos/pc/app/select/nest-grid.spec.ts b/examples/sites/demos/pc/app/select/nest-grid.spec.ts
index 18e329e97..51ede2b86 100644
--- a/examples/sites/demos/pc/app/select/nest-grid.spec.ts
+++ b/examples/sites/demos/pc/app/select/nest-grid.spec.ts
@@ -21,7 +21,7 @@ test('嵌套表格（单选）', async ({ page }) => {
   await row.nth(1).getByRole('cell').first().click()
   await expect(input).toHaveValue('深圳1')
   await input.click()
-  await expect(row.filter({ hasText: '深圳1' })).toHaveClass(/tiny-grid-body__row row__selected/)
+  await expect(row.filter({ hasText: '深圳1' })).toHaveClass(/tiny-grid-body__row row__radio/)
 })
 
 test('嵌套表格（多选）', async ({ page }) => {
diff --git a/examples/sites/demos/pc/app/select/nest-radio-grid-much-data.spec.ts b/examples/sites/demos/pc/app/select/nest-radio-grid-much-data.spec.ts
index ae4979372..80f6055cb 100644
--- a/examples/sites/demos/pc/app/select/nest-radio-grid-much-data.spec.ts
+++ b/examples/sites/demos/pc/app/select/nest-radio-grid-much-data.spec.ts
@@ -23,7 +23,7 @@ test('下拉表格大数据', async ({ page }) => {
 
   await input.click()
   await page.waitForTimeout(200)
-  await expect(row.nth(1)).toHaveClass(/tiny-grid-body__row row__selected/)
+  await expect(row.nth(1)).toHaveClass(/tiny-grid-body__row row__radio/)
   await expect(row).toHaveCount(6)
   await expect(page.getByRole('row', { name: '华南区12 广东省 广州市' })).toBeHidden()
   await row.nth(5).scrollIntoViewIfNeeded()
diff --git a/examples/sites/demos/pc/app/select/size.spec.ts b/examples/sites/demos/pc/app/select/size.spec.ts
index 9ef7ce440..183f48a40 100644
--- a/examples/sites/demos/pc/app/select/size.spec.ts
+++ b/examples/sites/demos/pc/app/select/size.spec.ts
@@ -57,5 +57,5 @@ test('mini 尺寸', async ({ page }) => {
   await expect(input).toHaveClass(/tiny-input-mini/)
   await expect(tag.nth(0)).toHaveClass(/tiny-tag--mini tiny-tag--light/)
   // TODO: 此处继承input 尺寸的话，应该是24
-  expect(height).toBeCloseTo(27, 1)
+  expect(height).toBeCloseTo(24, 1)
 })
diff --git a/examples/sites/demos/pc/app/slider/max-min.spec.ts b/examples/sites/demos/pc/app/slider/max-min.spec.ts
index 3e4b5b185..cdf1697d9 100644
--- a/examples/sites/demos/pc/app/slider/max-min.spec.ts
+++ b/examples/sites/demos/pc/app/slider/max-min.spec.ts
@@ -13,11 +13,11 @@ test('最大值最小值', async ({ page }) => {
   await page.mouse.down()
   await page.mouse.move(sliderWidth * -0.3 + x, y)
   const sliderTip = slider.locator('div').nth(2)
-  await expect(sliderTip).toHaveText('0')
+  await expect(sliderTip).toHaveText('30')
   await page.waitForTimeout(1000)
   await page.mouse.move(sliderWidth * 0.81 + x, y)
   const sliderTip1 = slider.locator('div').nth(2)
-  await expect(sliderTip1).toHaveText('100')
+  await expect(sliderTip1).toHaveText('62')
   await page.waitForTimeout(1000)
   await page.mouse.up()
 })

From 3bfafe4150225cd488b4adeee5ee5f7afaf25937 Mon Sep 17 00:00:00 2001
From: gimmyhehe <975402925@qq.com>
Date: Mon, 28 Oct 2024 19:20:54 +0800
Subject: [PATCH 06/65] test(site): fix icon not correct test e2e (#2445)

---
 .../sites/demos/pc/app/action-menu/basic-usage.spec.ts |  5 +----
 .../sites/demos/pc/app/action-menu/card-mode.spec.ts   |  3 ++-
 examples/sites/demos/pc/app/action-menu/icon.spec.ts   |  2 +-
 .../sites/demos/pc/app/button-group/show-more.spec.ts  |  2 +-
 examples/sites/demos/pc/app/date-picker/clear.spec.ts  | 10 ++--------
 .../sites/demos/pc/app/dropdown/basic-usage.spec.ts    |  4 ----
 6 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/examples/sites/demos/pc/app/action-menu/basic-usage.spec.ts b/examples/sites/demos/pc/app/action-menu/basic-usage.spec.ts
index 5623a4627..574459a8e 100644
--- a/examples/sites/demos/pc/app/action-menu/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/action-menu/basic-usage.spec.ts
@@ -16,10 +16,7 @@ test('基本用法', async ({ page }) => {
   // 更多按钮
   await expect(moreItem).toHaveText(/更多/)
   // 图标显示
-  await expect(moreItem.locator('svg > path').nth(0)).toHaveAttribute(
-    'd',
-    'M8 11.43c-.15 0-.31-.06-.42-.18L1.92 5.6c-.23-.23-.23-.61 0-.85s.61-.23.85 0L8 9.98l5.23-5.23a.61.61 0 0 1 .85 0c.23.23.23.61 0 .85l-5.66 5.66c-.11.11-.27.17-.42.17z'
-  )
+  await expect(moreItem.locator('.tiny-dropdown__trigger .tiny-svg')).toBeVisible()
   // 分割线
   await expect(actionMenu.locator('.tiny-action-menu__item-line')).toHaveCount(2)
   // 图标旋转
diff --git a/examples/sites/demos/pc/app/action-menu/card-mode.spec.ts b/examples/sites/demos/pc/app/action-menu/card-mode.spec.ts
index 94c4027ec..3055a84e3 100644
--- a/examples/sites/demos/pc/app/action-menu/card-mode.spec.ts
+++ b/examples/sites/demos/pc/app/action-menu/card-mode.spec.ts
@@ -12,5 +12,6 @@ test('基本用法', async ({ page }) => {
   await expect(visibleItem).toHaveCount(4)
   await expect(moreItem).not.toHaveText(/更多/)
   // 三点图标
-  await expect(moreItem.locator('circle')).toHaveCount(3)
+  const SvgPathReg = /^M2\.3 7\.78v.+219-1\.17Z$/
+  await expect(moreItem.locator('.tiny-svg path').first()).toHaveAttribute('d', SvgPathReg)
 })
diff --git a/examples/sites/demos/pc/app/action-menu/icon.spec.ts b/examples/sites/demos/pc/app/action-menu/icon.spec.ts
index ba8db2185..d17ff39ca 100644
--- a/examples/sites/demos/pc/app/action-menu/icon.spec.ts
+++ b/examples/sites/demos/pc/app/action-menu/icon.spec.ts
@@ -24,7 +24,7 @@ test('只显示文本', async ({ page }) => {
   await page.goto('action-menu#icon')
 
   const wrap = page.locator('#icon')
-  const actionMenu = wrap.locator('.tiny-action-menu').nth(2)
+  const actionMenu = wrap.locator('.tiny-action-menu').nth(1)
   const actionMenuItem = actionMenu.locator('.tiny-action-menu__item')
 
   await expect(actionMenuItem.nth(0).locator('.tiny-svg')).toBeHidden()
diff --git a/examples/sites/demos/pc/app/button-group/show-more.spec.ts b/examples/sites/demos/pc/app/button-group/show-more.spec.ts
index b9b97b9a7..28ce2f7ce 100644
--- a/examples/sites/demos/pc/app/button-group/show-more.spec.ts
+++ b/examples/sites/demos/pc/app/button-group/show-more.spec.ts
@@ -22,6 +22,6 @@ test('测试更多按钮', async ({ page }) => {
   // 判断图标是否正确
   const moreButton = buttonGroup.getByRole('button').nth(3)
   const moreButtonSvg = moreButton.locator('svg path').first()
-  const moreSvgPathReg = /^M292\.768 449\.694c2\.491\.515.+002-12.555-\.002z$/
+  const moreSvgPathReg = /^M2\.3 7\.78v.+219-1\.17Z$/
   await expect(moreButtonSvg).toHaveAttribute('d', moreSvgPathReg)
 })
diff --git a/examples/sites/demos/pc/app/date-picker/clear.spec.ts b/examples/sites/demos/pc/app/date-picker/clear.spec.ts
index 5730b4140..eb0b9f8c9 100644
--- a/examples/sites/demos/pc/app/date-picker/clear.spec.ts
+++ b/examples/sites/demos/pc/app/date-picker/clear.spec.ts
@@ -12,10 +12,7 @@ test('[DatePicker] 测试清除输入', async ({ page }) => {
   // 默认显示清除按钮
   await datePickerDefaultClearIcon.hover()
   await expect(clearIcon).toBeVisible()
-  await expect(clearIcon.locator('path').nth(1)).toHaveAttribute(
-    'd',
-    'M4.25 3.4 8 7.15l3.75-3.75a.61.61 0 0 1 .85 0c.23.23.23.62 0 .85L8.85 8l3.75 3.75c.23.24.23.62 0 .85a.61.61 0 0 1-.85 0L8 8.85 4.25 12.6a.61.61 0 0 1-.85 0 .592.592 0 0 1 0-.85L7.15 8 3.4 4.25a.61.61 0 0 1 0-.85.61.61 0 0 1 .85 0z'
-  )
+  await expect(clearIcon.locator('path').nth(0)).toHaveAttribute('d', /^M12\.49 3\.3a.+22\.71 0Z$/)
 
   // 隐藏清除按钮
   await datePickerHideClearIcon.hover()
@@ -24,10 +21,7 @@ test('[DatePicker] 测试清除输入', async ({ page }) => {
   // 自定义清除图标
   await datePickerCustomClearIcon.hover()
   await expect(clearIcon).toBeVisible()
-  await expect(clearIcon.locator('path').nth(1)).toHaveAttribute(
-    'd',
-    'M4.25 3.4 8 7.15l3.75-3.75a.61.61 0 0 1 .85 0c.23.23.23.62 0 .85L8.85 8l3.75 3.75c.23.24.23.62 0 .85a.61.61 0 0 1-.85 0L8 8.85 4.25 12.6a.61.61 0 0 1-.85 0 .592.592 0 0 1 0-.85L7.15 8 3.4 4.25a.61.61 0 0 1 0-.85.61.61 0 0 1 .85 0z'
-  )
+  await expect(clearIcon.locator('path').nth(0)).toHaveAttribute('d', /^M12\.49 3\.3a.+22\.71 0Z$/)
 
   // 测试清除功能
   await expect(datePickerCustomClearIcon).toHaveValue('2023-05-24')
diff --git a/examples/sites/demos/pc/app/dropdown/basic-usage.spec.ts b/examples/sites/demos/pc/app/dropdown/basic-usage.spec.ts
index 8a5810d52..7ca42f010 100644
--- a/examples/sites/demos/pc/app/dropdown/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/dropdown/basic-usage.spec.ts
@@ -13,10 +13,6 @@ test('基本用法', async ({ page }) => {
 
   // 箭头是否存在
   await expect(dropDownSvg).toBeVisible()
-  await expect(dropDownSvg.locator('path')).toHaveAttribute(
-    'd',
-    'M8 11.43c-.15 0-.31-.06-.42-.18L1.92 5.6c-.23-.23-.23-.61 0-.85s.61-.23.85 0L8 9.98l5.23-5.23a.61.61 0 0 1 .85 0c.23.23.23.61 0 .85l-5.66 5.66c-.11.11-.27.17-.42.17z'
-  )
 
   await page.waitForTimeout(500)
   await dropDown.hover()

From 4a01cc07ae313d9fefe4187810c5cc51c9bea883 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=94=B3=E5=90=9B=E5=81=A5?= <40288193@qq.com>
Date: Mon, 28 Oct 2024 20:44:08 +0800
Subject: [PATCH 07/65] fix(popper-arrow): [tooltip, popover,dropdown] fix
 arrow's z-index, and remove popper-arrow class from popover,dropdown (#2446)

* fix(popper-arrow): fix arrow's z-index, and remove popper-arrow class from popover,dropdown

* fix(popover): remove extra cssvars

* fix(user-contact): add margin:8px
---
 packages/theme/src/base/reset.less          | 59 +++++++++---
 packages/theme/src/dropdown-menu/index.less | 99 ---------------------
 packages/theme/src/popover/index.less       | 99 ---------------------
 packages/theme/src/popover/vars.less        |  6 --
 packages/theme/src/tooltip/index.less       | 50 ++---------
 packages/theme/src/tooltip/vars.less        |  6 +-
 packages/theme/src/user-contact/index.less  |  2 +-
 7 files changed, 56 insertions(+), 265 deletions(-)

diff --git a/packages/theme/src/base/reset.less b/packages/theme/src/base/reset.less
index ffd6b6e4a..1b2f490cd 100644
--- a/packages/theme/src/base/reset.less
+++ b/packages/theme/src/base/reset.less
@@ -152,18 +152,6 @@
     display: none;
   }
 
-  .popper__arrow {
-    &,
-    &:after {
-      position: absolute;
-      display: block;
-      width: 0;
-      height: 0;
-      border-color: transparent;
-      border-style: solid;
-    }
-  }
-
   @media (min-width: 768px) {
     ::-webkit-scrollbar {
       width: var(--tv-size-scrollbar-width);
@@ -188,3 +176,50 @@
     }
   }
 }
+
+.tiny-popper,
+.tiny-tooltip__popper {
+  .popper__arrow {
+    position: absolute;
+    display: block;
+    // 原来是用border来模拟三角形的，现在是通过div模拟，所以将border-width赋值给div的width.
+    width: 12px;
+    height: 20px;
+    background-color: #fff; // popover,dropdown 都是只有白色。 tooltip的颜色是自己覆盖的
+    transform: rotateZ(45deg);
+    border-radius: 2px;
+    z-index: -1;
+  }
+
+  &[x-placement^='top'] {
+    margin-bottom: 12px;
+
+    .popper__arrow {
+      bottom: -7px;
+    }
+  }
+
+  &[x-placement^='bottom'] {
+    margin-top: 12px;
+
+    .popper__arrow {
+      top: -7px;
+    }
+  }
+
+  &[x-placement^='right'] {
+    margin-left: 12px;
+
+    .popper__arrow {
+      left: -3px;
+    }
+  }
+
+  &[x-placement^='left'] {
+    margin-right: 12px;
+
+    .popper__arrow {
+      right: -3px;
+    }
+  }
+}
diff --git a/packages/theme/src/dropdown-menu/index.less b/packages/theme/src/dropdown-menu/index.less
index 4e7eb85d1..48ee15bc9 100644
--- a/packages/theme/src/dropdown-menu/index.less
+++ b/packages/theme/src/dropdown-menu/index.less
@@ -45,103 +45,4 @@
       margin-left: var(--tv-DropdownItem-label-margin-left);
     }
   }
-
-  /* 箭头 */
-  &.@{css-prefix}popper .popper__arrow,
-  &.@{css-prefix}popper .popper__arrow:after {
-    position: absolute;
-    display: block;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-  }
-
-  &.@{css-prefix}popper .popper__arrow {
-    border-width: 8px;
-    filter: drop-shadow(var(--tv-DropdownMenu-box-shadow));
-  }
-
-  &.@{css-prefix}popper .popper__arrow::after {
-    content: ' ';
-    border-width: 8px;
-  }
-
-  &.@{css-prefix}popper[x-placement^='top'] {
-    &:has(.popper__arrow) {
-      margin-bottom: 12px;
-    }
-  }
-
-  &.@{css-prefix}popper[x-placement^='top'] .popper__arrow {
-    bottom: -8px;
-    left: 50%;
-    margin-right: 3px;
-
-    border-bottom-width: 0;
-  }
-
-  &.@{css-prefix}popper[x-placement^='top'] .popper__arrow:after {
-    bottom: 1px;
-    margin-left: -6px;
-    border-top-color: #fff;
-    border-bottom-width: 0;
-  }
-
-  &.@{css-prefix}popper[x-placement^='bottom'] {
-    &:has(.popper__arrow) {
-      margin-top: 12px;
-    }
-  }
-
-  &.@{css-prefix}popper[x-placement^='bottom'] .popper__arrow {
-    top: -8px;
-    left: 50%;
-    margin-right: 3px;
-    border-top-width: 0;
-  }
-
-  &.@{css-prefix}popper[x-placement^='bottom'] .popper__arrow:after {
-    top: 1px;
-    margin-left: -8px;
-    border-top-width: 0;
-    border-bottom-color: #fff;
-  }
-
-  &.@{css-prefix}popper[x-placement^='right'] {
-    margin-left: 12px;
-  }
-
-  &.@{css-prefix}popper[x-placement^='right'] .popper__arrow {
-    top: 50%;
-    left: -8px;
-    margin-bottom: 3px;
-    border-left-width: 0;
-  }
-
-  &.@{css-prefix}popper[x-placement^='right'] .popper__arrow:after {
-    bottom: -8px;
-    left: 1px;
-    border-right-color: #fff;
-    border-left-width: 0;
-  }
-
-  &.@{css-prefix}popper[x-placement^='left'] {
-    margin-right: 12px;
-  }
-
-  &.@{css-prefix}popper[x-placement^='left'] .popper__arrow {
-    top: 50%;
-    right: -8px;
-    margin-bottom: 3px;
-    border-right-width: 0;
-  }
-
-  &.@{css-prefix}popper[x-placement^='left'] .popper__arrow:after {
-    right: 1px;
-    bottom: -8px;
-    margin-left: -8px;
-    border-right-width: 0;
-    border-left-color: #fff;
-  }
 }
diff --git a/packages/theme/src/popover/index.less b/packages/theme/src/popover/index.less
index 637393241..78c5d52e5 100644
--- a/packages/theme/src/popover/index.less
+++ b/packages/theme/src/popover/index.less
@@ -32,105 +32,6 @@
   box-shadow: var(--tv-Popover-box-shadow);
   word-break: break-all;
 
-  .popper__arrow,
-  .popper__arrow:after {
-    position: absolute;
-    display: block;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-  }
-
-  .popper__arrow,
-  .@{popper-prefix-cls} .popper__arrow {
-    border-width: 6px;
-    -webkit-filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
-    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
-  }
-
-  .popper__arrow:after {
-    content: ' ';
-    border-width: 6px;
-  }
-
-  &[x-placement^='top'] {
-    margin-bottom: var(--tv-Popover-placement-margin-y);
-
-    .popper__arrow {
-      bottom: -8px;
-      left: 50%;
-      border-top-color: transparent;
-      border-bottom-width: 0;
-      border-top-width: 8px;
-
-      &:after {
-        bottom: 1px;
-        margin-left: -6px;
-        border-top-color: var(--tv-Popover-placement-arrow-after-border-color);
-        border-bottom-width: 0;
-      }
-    }
-  }
-
-  &[x-placement^='bottom'] {
-    margin-top: var(--tv-Popover-placement-margin-y);
-
-    .popper__arrow {
-      top: -8px;
-      left: 50%;
-      border-top-width: 0;
-      border-bottom-color: transparent;
-      border-bottom-width: 8px;
-
-      &:after {
-        top: 1px;
-        margin-left: -6px;
-        border-top-width: 0;
-        border-bottom-color: var(--tv-Popover-placement-arrow-after-border-color);
-      }
-    }
-  }
-
-  &[x-placement^='right'] {
-    margin-left: var(--tv-Popover-placement-margin-x);
-
-    .popper__arrow {
-      top: 50%;
-      left: -8px;
-      border-right-color: transparent;
-      border-left-width: 0;
-      border-right-width: 8px;
-
-      &:after {
-        bottom: -6px;
-        left: 1px;
-        border-right-color: var(--tv-Popover-placement-arrow-after-border-color);
-        border-left-width: 0;
-      }
-    }
-  }
-
-  &[x-placement^='left'] {
-    margin-right: var(--tv-Popover-placement-margin-x);
-
-    .popper__arrow {
-      top: 50%;
-      right: -8px;
-      border-right-width: 0;
-      border-left-color: transparent;
-      border-left-width: 8px;
-
-      &:after {
-        right: 1px;
-        bottom: -6px;
-        margin-left: -6px;
-        border-right-width: 0;
-        border-left-color: var(--tv-Popover-placement-arrow-after-border-color);
-      }
-    }
-  }
-
   .@{popover-prefix-cls}__plain {
     padding: 18px 20px;
   }
diff --git a/packages/theme/src/popover/vars.less b/packages/theme/src/popover/vars.less
index f9a50a84c..e0dd2ceea 100644
--- a/packages/theme/src/popover/vars.less
+++ b/packages/theme/src/popover/vars.less
@@ -27,12 +27,6 @@
   --tv-Popover-title-font-size: var(--tv-font-size-lg);
   // 弹框标题字重
   --tv-Popover-title-weight: var(--tv-font-weight-bold);
-  // 弹出框垂直外边距
-  --tv-Popover-placement-margin-y: var(--tv-space-lg);
-  // 弹出框小箭头水平外边距
-  --tv-Popover-placement-margin-x: var(--tv-space-lg);
-  // 弹框小箭头填充色
-  --tv-Popover-placement-arrow-after-border-color: var(--tv-color-bg-secondary);
   // 弹框阴影
   --tv-Popover-box-shadow: var(--tv-shadow-2-down);
   // 弹框垂直内边距
diff --git a/packages/theme/src/tooltip/index.less b/packages/theme/src/tooltip/index.less
index 8281483c3..6c8916c08 100644
--- a/packages/theme/src/tooltip/index.less
+++ b/packages/theme/src/tooltip/index.less
@@ -44,49 +44,6 @@
     word-wrap: break-word;
     box-shadow: var(--tv-Tooltip-box-shadow);
 
-    .popper__arrow {
-      position: absolute;
-      display: block;
-      // 原来是用border来模拟三角形的，现在是通过div模拟，所以将border-width赋值给div的width.
-      width: 12px;
-      height: 20px;
-      background-color: var(--tv-Tooltip-popper-border-color);
-      transform: rotateZ(45deg);
-      border-radius: 2px;
-    }
-
-    &[x-placement^='top'] {
-      margin-bottom: 12px;
-
-      .popper__arrow {
-        bottom: -7px;
-      }
-    }
-
-    &[x-placement^='bottom'] {
-      margin-top: 12px;
-
-      .popper__arrow {
-        top: -7px;
-      }
-    }
-
-    &[x-placement^='right'] {
-      margin-left: 12px;
-
-      .popper__arrow {
-        left: -3px;
-      }
-    }
-
-    &[x-placement^='left'] {
-      margin-right: 12px;
-
-      .popper__arrow {
-        right: -3px;
-      }
-    }
-
     &.is-normal {
       .tooltip-type(
         var(--tv-Tooltip-popper-normal-text-color),
@@ -133,8 +90,11 @@
     }
 
     &.is-dark {
-      background: var(--tv-Tooltip-popper-dark-bg-color);
-      color: var(--tv-Tooltip-popper-dark-text-color);
+      .tooltip-type(
+        var(--tv-Tooltip-popper-dark-text-color),
+        var(--tv-Tooltip-popper-dark-bg-color),
+        var(--tv-Tooltip-popper-dark-border-color)
+      );
     }
 
     &.is-light {
diff --git a/packages/theme/src/tooltip/vars.less b/packages/theme/src/tooltip/vars.less
index 11579f984..409abdc48 100644
--- a/packages/theme/src/tooltip/vars.less
+++ b/packages/theme/src/tooltip/vars.less
@@ -11,8 +11,6 @@
 */
 
 .inject-Tooltip-vars() {
-  // 弹框三角默认边框色
-  --tv-Tooltip-popper-border-color: var(--tv-color-border-active);
   // 弹框字体行高
   --tv-Tooltip-popper-font-line-height: var(--tv-line-height-number);
   // 悬浮弹出框圆角
@@ -59,9 +57,11 @@
   --tv-Tooltip-popper-dark-bg-color: var(--tv-color-bg-primary);
   // dark主题弹框文本色
   --tv-Tooltip-popper-dark-text-color: var(--tv-color-text-white);
+  // dark主题|禁用时弹框边框色
+  --tv-Tooltip-popper-dark-border-color: var(--tv-color-border-hover);
+
   // light主题弹框背景色
   --tv-Tooltip-popper-light-bg-color: var(--tv-color-bg-secondary);
-
   // light主题|禁用弹框文本色
   --tv-Tooltip-popper-light-text-color: var(--tv-color-text);
   // light主题|禁用时弹框边框色
diff --git a/packages/theme/src/user-contact/index.less b/packages/theme/src/user-contact/index.less
index 643a20edc..775320735 100644
--- a/packages/theme/src/user-contact/index.less
+++ b/packages/theme/src/user-contact/index.less
@@ -102,7 +102,7 @@
   & &__role {
     display: inline-block;
     color: var(--tv-UserContact-role-info-text-color);
-    margin-left: 0;
+    margin-left: 8px;
     vertical-align: middle;
     font-size: var(--tv-UserContact-role-info-font-size);
     line-height: 1.5;

From b0230b07a045838300520ad2685013e064f06f51 Mon Sep 17 00:00:00 2001
From: gimmyhehe <975402925@qq.com>
Date: Mon, 28 Oct 2024 21:28:25 +0800
Subject: [PATCH 08/65] feat(grid): [grid] inline pager add padding left
 (#2449)

---
 packages/theme/src/grid/grid.less | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/theme/src/grid/grid.less b/packages/theme/src/grid/grid.less
index 7ab4b5764..12918a138 100644
--- a/packages/theme/src/grid/grid.less
+++ b/packages/theme/src/grid/grid.less
@@ -44,4 +44,8 @@
       background-color: var(--tv-Grid-gray-bg-color);
     }
   }
+
+  & > .tiny-pager .tiny-pager__pull-left {
+    padding-left: 8px;
+  }
 }

From 4e1c39fa4a9cc6bff204d1584628a960e6a363ae Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Mon, 28 Oct 2024 21:30:26 +0800
Subject: [PATCH 09/65] fix: fix css pollution

---
 .../pc/app/milestone/custom-icon-slot-composition-api.vue     | 4 ++--
 examples/sites/demos/pc/app/milestone/custom-icon-slot.vue    | 4 ++--
 examples/sites/demos/pc/menus.js                              | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/examples/sites/demos/pc/app/milestone/custom-icon-slot-composition-api.vue b/examples/sites/demos/pc/app/milestone/custom-icon-slot-composition-api.vue
index b9baf94fb..fb8d1794f 100644
--- a/examples/sites/demos/pc/app/milestone/custom-icon-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/custom-icon-slot-composition-api.vue
@@ -2,7 +2,7 @@
   <div class="demo-milestone">
     <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
       <template #icon="data">
-        <component :is="data.slotScope.icon" class="custom"> </component>
+        <component :is="data.slotScope.icon" class="custom-milestone"> </component>
       </template>
     </tiny-milestone>
   </div>
@@ -64,7 +64,7 @@ const milestoneData = ref([
 </script>
 
 <style>
-.custom {
+.custom-milestone {
   width: 16px;
   height: 16px;
   line-height: 16px;
diff --git a/examples/sites/demos/pc/app/milestone/custom-icon-slot.vue b/examples/sites/demos/pc/app/milestone/custom-icon-slot.vue
index c381049f7..253e9d157 100644
--- a/examples/sites/demos/pc/app/milestone/custom-icon-slot.vue
+++ b/examples/sites/demos/pc/app/milestone/custom-icon-slot.vue
@@ -2,7 +2,7 @@
   <div class="demo-milestone">
     <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
       <template #icon="data">
-        <component :is="data.slotScope.icon" class="custom"> </component>
+        <component :is="data.slotScope.icon" class="custom-milestone"> </component>
       </template>
     </tiny-milestone>
   </div>
@@ -77,7 +77,7 @@ export default {
 </script>
 
 <style>
-.custom {
+.custom-milestone {
   width: 16px;
   height: 16px;
   line-height: 16px;
diff --git a/examples/sites/demos/pc/menus.js b/examples/sites/demos/pc/menus.js
index 4264fb9cd..eb0b7e017 100644
--- a/examples/sites/demos/pc/menus.js
+++ b/examples/sites/demos/pc/menus.js
@@ -358,7 +358,7 @@ if (envTarget === 'inner' || showBusiness) {
       { 'nameCn': '公司', 'name': 'Company', 'key': 'company' },
       { 'nameCn': '国家/地区', 'name': 'Country', 'key': 'country' },
       { 'nameCn': '币种', 'name': 'Currency', 'key': 'currency' },
-      { 'nameCn': '部门', 'name': 'Dept', 'key': 'dept' },
+      // { 'nameCn': '部门', 'name': 'Dept', 'key': 'dept' },
       { 'nameCn': '下拉角色', 'name': 'DropRoles', 'key': 'drop-roles' },
       { 'nameCn': '消息弹框', 'name': 'Espace', 'key': 'espace' },
       { 'nameCn': '权签人', 'name': 'HrApprover', 'key': 'hrapprover' },

From 0d8d33d6b1020d6329d36b66c069879c526d988d Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Mon, 28 Oct 2024 21:36:43 +0800
Subject: [PATCH 10/65] feat: add changelog and remove rich-text-editor menu
 (#2448)

---
 examples/sites/demos/pc/menus.js            |   8 -
 examples/sites/demos/pc/webdoc/changelog.md | 387 +++++++++++++++++++-
 examples/sites/demos/pc/webdoc/theme.md     |  16 +-
 3 files changed, 393 insertions(+), 18 deletions(-)

diff --git a/examples/sites/demos/pc/menus.js b/examples/sites/demos/pc/menus.js
index eb0b7e017..9362db4ce 100644
--- a/examples/sites/demos/pc/menus.js
+++ b/examples/sites/demos/pc/menus.js
@@ -143,14 +143,6 @@ export const cmpMenus = [
       { 'nameCn': '弹出上传', 'name': 'PopUpload', 'key': 'pop-upload' },
       { 'nameCn': '单选框', 'name': 'Radio', 'key': 'radio' },
       { 'nameCn': '评分', 'name': 'Rate', 'key': 'rate' },
-      {
-        'nameCn': '富文本编辑器',
-        'name': 'RichTextEditor',
-        'key': 'rich-text-editor',
-        'meta': {
-          'experimental': '3.10.0'
-        }
-      },
       { 'nameCn': '搜索', 'name': 'Search', 'key': 'search' },
       { 'nameCn': '选择器', 'name': 'Select', 'key': 'select' },
       { 'nameCn': '滑块', 'name': 'Slider', 'key': 'slider' },
diff --git a/examples/sites/demos/pc/webdoc/changelog.md b/examples/sites/demos/pc/webdoc/changelog.md
index e9fb832e8..0496664c0 100644
--- a/examples/sites/demos/pc/webdoc/changelog.md
+++ b/examples/sites/demos/pc/webdoc/changelog.md
@@ -1,5 +1,388 @@
 # 更新日志
 
+## v2.19.0/v3.19.0
+
+`2024/10/28`
+
+## What's Changed
+
+### Breaking Changes 🛠
+
+- 为了更好的用户体验，从 @opentiny/vue@3.19.0 版本开始， 组件库的整体默认风格切换为 Opentiny Design 新风格。
+- feat(tooltip): [tooltip] add text content wrapper and content-max-height prop by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1910
+
+### Exciting New Features 🎉
+
+- feat: 新增 VirtualScrollBox 虚拟化容器组件
+- feat: 新增 VirtualTree 虚拟化树形控件组件
+- feat: 新增 Sticky 粘性布局组件
+- fix(anchor): [anchor] Add Anchor Component Software as a Service Topic by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/1920
+- fix(numeric): [numeric] modify smb-theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1915
+- fix(modal): [modal] modify smb-theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1914
+- fix(form): [form] change x-design form label text color by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1922
+- fix(carousel): [carousel]modify carousel of xdesign theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1908
+- fix(drawer): [drawer]: modify smb-theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1913
+- fix(fall-menu): [fall-menu]modify smb theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1870
+- fix(dialog-box): [dialog-box] modify smb-theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1912
+- feat(grid): [grid] support resizable config by @gweesin in https://github.com/opentiny/tiny-vue/pull/1679
+- feat(crop): [crop] update crop for smb design by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/1843
+- fix(pager): [pager] change pager XDesign theme by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1938
+- fix(select): [select] Adapt to select component smb theme by @MomoPoppy in https://github.com/opentiny/tiny-vue/pull/1948
+- feat(input,autocomplete): [input,autocomplete] update input&autocompl… by @zzcr in https://github.com/opentiny/tiny-vue/pull/1950
+- fix(dialog-box): [dialog-box] modify smb theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1960
+- fix(carousel): [carousel] modify smb theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1962
+- fix(drawer): [drawer] modify smb theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1961
+- fix(loading): [loading] fix loading new design review problem by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/1942
+- fix(file-upload): [file-upload] Optimize the adaptation of new specifications based on the alignment comments. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/1977
+- feat(slider): [slider] Adapt slider component smb theme by @MomoPoppy in https://github.com/opentiny/tiny-vue/pull/1974
+- fix(dropdown,actionMenu): [dropdown,action-menu] Adapt to Dropdown an… by @MomoPoppy in https://github.com/opentiny/tiny-vue/pull/1967
+- feat(image): [image] Adapt to SMB themes by @MomoPoppy in https://github.com/opentiny/tiny-vue/pull/1895
+- fix(theme): [tree,tooltip,transfer,cascader,input] update smb design for tree/tooltip/transfer/cascader components by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/1970
+- feat(tree-menu): [tree-menu] adapt to tree-menu smb themes by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/1866
+- feat(popeditor): [popeditor] Adapt popeditor component xdesign theme by @MomoPoppy in https://github.com/opentiny/tiny-vue/pull/1973
+- fix(grid): [grid] change grid x-design theme by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1984
+- fix(dialog-box): [dialog-box] modify smb theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1985
+- feat(useLazyShow): add useLazyShow function by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/1976
+- feat(milestone): [milestone] Adapt milestone component smb theme by @MomoPoppy in https://github.com/opentiny/tiny-vue/pull/1996
+- fix(carousel): [carousel] modify smb-theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2004
+- feat(wizard): [wizard] Add new specification wizard component by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2000
+- fix(notify): [notify, split] Dev update notifycrop split by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2020
+- fix(link-menu): [link-menu] modify smb theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2039
+- feat(filter-panel): [filter-panel] Added filter panel new specification topic by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2032
+- feat(calendar-view): [calendar-view] Adapting to the SMB themes by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2031
+- feat(steps): [steps] Add a new standard step bar for setting vertical dot attributes. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2042
+- fix(checkbox): [checkbox]modify smb theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2050
+- fix(radio): [radio] modify smb theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2052
+- fix(dialog-box): [dialog-box] modify smb theme of demo by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2048
+- fix(grid): [grid] change grid-toolbar x-design theme by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/2060
+- fix(theme): [popover,cascader,transfer,tooltip] update smb design for popover,cascader,transfer,tooltip by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2058
+- fix(dialog-box): [dialog-box] modify smb theme of demo by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2069
+- feat(steps): [steps] Refresh the design specifications for styles that are not designed. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2071
+- feat(search): [search] The vertical bar on the right of the star theme close button is added. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2084
+- feat(popconfirm): [popconfirm] Adapting to the SMB theme by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2085
+- feat(search): [search] Adding borderless examples in mini mode by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2091
+- feat(form): [form] x-design theme refresh by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/2093
+- feat(grid): [grid] x-design theme refresh by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/2094
+- feat(time-picker): [time-picker] updata time frame xdesign by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/2092
+- feat(tree-menu): [tree-menu] updata tree-menu xdesign by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/2095
+- feat(load-list): add load-list components by @zzcr in https://github.com/opentiny/tiny-vue/pull/2098
+- feat(button-group): [button-group] Adapting to the SMB theme by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2099
+- feat(steps): [steps] The stateless step style is added to the step bar, and the itemFooter slot is added. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2110
+- feat(button): [button] Adapting to the SMB theme by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2104
+- feat(badge): [badge] Adapting to the SMB theme by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2107
+- feat(button): [button] Adapting to the SMB theme by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2120
+- feat(guide): [guide] replace x with close-icon by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/2121
+- feat(pager): [pager] add simplest pager to adaptive x-design by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/2126
+- feat(carousel): [carousel]modify smb theme and add props by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2125
+- feat(switch): [switch] Adapting to the SMB theme by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2112
+- feat(drop-times): [drop-times] Adapting to the SMB theme by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2118
+- fix(theme):　[tree,tooltip,transfer, cascader] update unsolved smb components by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2124
+- feat(modal): [modal] modify demo by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2129
+- feat(checkbox): [checkbox] Adapting to the SMB theme by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2130
+- feat: [input] add new vars less by @zzcr in https://github.com/opentiny/tiny-vue/pull/2128
+- feat(steps): [steps] Node line alignment by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2116
+- feat(radio): [radio] Adapting to the SMB theme by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2132
+- feat(modal): [modal] modify smb theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2146
+- feat(fluent-editor): add format painter by @kagol in https://github.com/opentiny/tiny-vue/pull/2149
+- feat(grid): [grid] grid custom panel adapt to x-design by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/2152
+- feat(dialog-box): [dialog-box] modify smb theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2147
+- feat(button): [button] Adapting to the SMB theme by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2148
+- feat(drawer): [drawer] modify smb theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2150
+- feat(carousel): [carousel] modify smb theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2153
+- feat: optimize theme style variables by @zzcr in https://github.com/opentiny/tiny-vue/pull/2157
+- feat(dropdown): [dropdown,select,slider] Adapt to xdesign themes by @MomoPoppy in https://github.com/opentiny/tiny-vue/pull/2108
+- feat(badge): [badge]: Adapting to the SMB theme by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2167
+- feat(ip-address): [ip-address] Adapting to the SMB theme by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2166
+- feat(dropdown): [dropdown,action-menu,select] Additional features xdesign theme adaptation by @MomoPoppy in https://github.com/opentiny/tiny-vue/pull/2140
+- feat(alert): [alert] Adapting to the SMB theme by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2169
+- feat(skeleton): [skeleton] Adapting to the SMB theme by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2171
+- feat(button): [button] Adapting to the SMB theme by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2172
+- feat(popconfirm): [popconfirm] Adapting to the SMB theme by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2168
+- feat(divider): [divider]modify smb theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2179
+- feat(theme): modify variable names and add reset styles by @MomoPoppy in https://github.com/opentiny/tiny-vue/pull/2185
+- feat(drawer): [drawer]add props of height by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2184
+- feat(image): [iamge] Fix bug regarding image links by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2188
+- feat(site): the official website temporarily blocks English by @zzcr in https://github.com/opentiny/tiny-vue/pull/2199
+- feat(date-picker): [date-picker] Adapting to the SMB themem by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2205
+- feat(link-menu): [link-menu]modify smb theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2210
+- feat(fall-menu): [fall-menu]modify smb theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2206
+- feat(card): Adapting to the SMB themes by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2231
+- feat(checkbox): [checkbox] adapte checkbox saas theme and x-design theme by @zzcr in https://github.com/opentiny/tiny-vue/pull/2260
+- feat: remove toggle-menu and fall-menu from docs by @zzcr in https://github.com/opentiny/tiny-vue/pull/2267
+- feat: delete useless files by @zzcr in https://github.com/opentiny/tiny-vue/pull/2269
+- feat: remove float-button error style by @zzcr in https://github.com/opentiny/tiny-vue/pull/2305
+- feat(anchor): [anchor] Added additional anchor features and modified document issues such as icons found in the document. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2313
+- feat(fileupload): [file-upload] The fileupload example is added to adapt to the new specifications and fix the saas theme bug. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2316
+- feat(progress): [progress] The progress example is added to adapt to the new specifications and additional features. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2315
+- feat(nav-menu): [nav-menu] updata nav-menu xdesign by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/2335
+- feat: add hyperlinks to the menu, support right-click to open the page by @zzcr in https://github.com/opentiny/tiny-vue/pull/2342
+- feat(button): [button] Check and modify issues by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2348
+- feat(container): [container] Check and modify issues by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2349
+- feat(link): [link] Check and modify issues by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2351
+- feat(fluent-editor): export default toolbar by @kagol in https://github.com/opentiny/tiny-vue/pull/2350
+- feat(button-group): [button-group] Check and modify issues by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2359
+- feat(docs): the official website adds API anchor function by @zzcr in https://github.com/opentiny/tiny-vue/pull/2366
+- feat(autocomplete): [autocomplete] update autocomplete demos by @zzcr in https://github.com/opentiny/tiny-vue/pull/2384
+- feat(date-picker): [date-picker]Optimize case display and fix style i… by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2386
+- feat(anchor): [anchor] add top-offset props by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/2388
+- feat(date-picker): [date-picker] Fix style issues by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2392
+- feat(date-picker): [date-picker]Optimize case display and fix style issues by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2400
+- feat(tree-menu,skeleton): [tree-menu,skeleton] modify testing issues by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/2410
+- feat: adpting to OpenTinyDesign Themes by @zzcr in https://github.com/opentiny/tiny-vue/pull/2422
+- feat: update versions of components by @zzcr in https://github.com/opentiny/tiny-vue/pull/2426
+- feat(button): [button] Optimize demo style for feature display by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2427
+- feat(button): [button] Modify icon button up and down centering issue by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2423
+- feat(layout): [layout] Optimize demo style by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2429
+- feat(date-picker): [date-picker] Optimize demo style by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2434
+- feat: update site version by @zzcr in https://github.com/opentiny/tiny-vue/pull/2437
+
+### Bug Fixes 🐛
+
+- fix(fluent-editor): fix file module by @kagol in https://github.com/opentiny/tiny-vue/pull/1886
+- fix(fluent-editor): fix emoji module by @kagol in https://github.com/opentiny/tiny-vue/pull/1891
+- fix(fluent-editor): fix code-block highlight by @kagol in https://github.com/opentiny/tiny-vue/pull/1894
+- fix(build): Fixed an issue where theme comments caused packaging to fail. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/1899
+- fix(pop-upload): [pop-upload] fix popupload saas theme by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/1897
+- fix(select): [select] Adapt to multiple+disabled+displayOnly scenarios with different themes by @MomoPoppy in https://github.com/opentiny/tiny-vue/pull/1885
+- fix(tree): [tree]adjust the style of the tree-node to the lower part of the… by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/1924
+- fix(anchor): [anchor] Fix anchor view issue by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/1923
+- fix(nav-menu): [nav-menu] error occurred when modifying route redirection by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/1907
+- fix(grid): [grid] fix panel flash in page by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1903
+- fix(tabs): [tabs] Correct the new standard font size value by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/1902
+- fix(build): Theme packaging replaced by es module by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/1901
+- fix(select): [select]fix select for no-match-value 's bug by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/1926
+- fix(fluent-editor): fix style.css by @kagol in https://github.com/opentiny/tiny-vue/pull/1927
+- fix(tabs): [tabs, anchor] Fix tabs view issue by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/1925
+- fix(steps): [steps] Fix steps view issue by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/1930
+- fix(docs): add beta logo to solve the problem of incomplete text display by @zzcr in https://github.com/opentiny/tiny-vue/pull/1929
+- fix(link): [link] remove link's emits declare and add e2e test for click event by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/1944
+- feat(fileupload): [file-upload] Fixed the issue of new specification review of the upload component. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/1952
+- fix(anchor): [anchor] Modifying the Filled Circle Style of a Specification Retraction by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/1965
+- fix(time-line): [time-line] fix timeline view issue by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/1979
+- fix(autocomplete): [autocomplete]fix autocomplete panel padding size by @zzcr in https://github.com/opentiny/tiny-vue/pull/1981
+- fix(build): fix theme build error by @zzcr in https://github.com/opentiny/tiny-vue/pull/1988
+- fix(modal): [modal] after a pop-up window whose type is message is closed, the close event instead of the hide event is triggered issue#1384 by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1939
+- fix(anchor): [anchor,steps] Updated the specifications based on the check. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2007
+- fix(currency): [currency] Fixed an issue where the currency document example cannot be displayed. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2010
+- fix(theme): fix theme dark style by @zzcr in https://github.com/opentiny/tiny-vue/pull/2019
+- fix(site): remove custom css for input suffix icon by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2017
+- fix(tree): [tree] fix tree showLine props's bug , sometimes the line is too… by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2015
+- fix(design-smb): fix design smb error word by @zzcr in https://github.com/opentiny/tiny-vue/pull/2040
+- fix(modal): [modal] after the window size is changed, the window is displayed in the center by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2033
+- fix(input): [input] fix input x-design theme by @zzcr in https://github.com/opentiny/tiny-vue/pull/2043
+- fix(tree): [tree] fix drag event lost by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2038
+- fix(grid): [grid] fix empty slot error when is-center-empty is set by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/2051
+- fix(file-upload): [file-upload] Updated the new specifications of the upload component. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2063
+- fix(input): [input] fix textarea x-design style by @zzcr in https://github.com/opentiny/tiny-vue/pull/2076
+- fix(directives): fix directives error in script-setup with typescript by @zzcr in https://github.com/opentiny/tiny-vue/pull/2089
+- fix(icon): solve the style problem caused by multiple identical ids o… by @zzcr in https://github.com/opentiny/tiny-vue/pull/2086
+- fix(loading): [icon] Fix loadingshadow, built-in rotation by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2023
+- fix(checkbox): [checkbox] modify smb theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2096
+- fix(tree-menu): [tree-menu] fix tree-menu bug by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/2101
+- fix(site): fixed the official website style exception and icon parse … by @zzcr in https://github.com/opentiny/tiny-vue/pull/2105
+- fix(modal): [modal] click the close button to add a close event by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2106
+- fix(pager): [pager] fix pager hover style by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/2111
+- fix(select): [select] fix clear-no-match prop by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2135
+- fix(dialog-box): [dialog-box] modify theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2134
+- fix(site): add style in api-table by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2139
+- fix(fluent-editor): fix link and img render error by @kagol in https://github.com/opentiny/tiny-vue/pull/2142
+- fix(input): [input] fix textarea disabled style error by @zzcr in https://github.com/opentiny/tiny-vue/pull/2151
+- fix(theme): update vars.less comments by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2160
+- fix(theme): update base/vars.less order by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2163
+- fix(cascader): [cascader] update cascader's x design by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2158
+- fix(theme): add tv-color-icon-stable by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2175
+- fix(theme): rename warning to base-warn by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2182
+- fix(ui): [file-upload,loading, steps] Adapt to the new UI screenshot specifications and fix related errors. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2177
+- fix(theme): fix(theme): The correct default value is added to improve the overall theme adaptation development efficiency. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2190
+- fix(input): [input] fix input small size of font by @zzcr in https://github.com/opentiny/tiny-vue/pull/2203
+- fix(button): add ghost's cssvars for button by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2235
+- fix(anchor): [anchor] Reconstruct the anchor theme. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2225
+- fix(select): [select] modifying the loading icon issue by @MomoPoppy in https://github.com/opentiny/tiny-vue/pull/2242
+- fix(tree): [tree] remove \_\_content-box dom, compact with AUI code by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2247
+- fix(transfer): [transfer] update smb design by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2249
+- fix(link-menu): fix link-menu theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2246
+- fix: fix error description of base vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2258
+- fix(auto-tip): [auto-tip] fix bug that the checkbox always displays t… by @zzcr in https://github.com/opentiny/tiny-vue/pull/2262
+- fix(docs): Fixes style issues with document anchors by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2266
+- fix(breadcrumb): [breadcrumb]modify demo of disable page redirection by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2272
+- fix(radio): [radio] fix using aria-hidden="true" on focusable elements by @zzcr in https://github.com/opentiny/tiny-vue/pull/2265
+- fix(tabs): [tabs] modify tabs demo bug by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2274
+- fix: by monitoring the route, display the corresponding directory content in the left menu by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2278
+- fix(chart): Modify Chart Case by @Davont in https://github.com/opentiny/tiny-vue/pull/2300
+- fix(button-group): [button-group]fix button-group component style issues by @zzcr in https://github.com/opentiny/tiny-vue/pull/2308
+- fix(ip-address): fix ip-address and autocomplete component style issues by @zzcr in https://github.com/opentiny/tiny-vue/pull/2307
+- fix(docs): [progress] The document is modified to meet the requirements of the new specifications. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2306
+- fix(modal): fix demo which lost jsx by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2314
+- fix(button): [button]fix error css var by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2312
+- fix(notify): [notify] fix notify's demos by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2326
+- fix: delete useless comp entries and fix theme building errors by @zzcr in https://github.com/opentiny/tiny-vue/pull/2322
+- fix(dialog-box): [dialog-box] destoryOnClose transition by @GaoNeng-wWw in https://github.com/opentiny/tiny-vue/pull/2324
+- fix(time-picker): [time-picker] fixed a button style issue in the Sass theme by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/2330
+- fix(dropdown): [dropdown] rename getTip api in dropdown-item; replace reset.less cssvars by --tv- vars by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2331
+- fix(card): replace card-group,card-template components css-vars by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2333
+- fix(button): fix button cssvars # by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2336
+- fix(theme): fix error css vars by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/2338
+- fix(input): [input] fix input disabled border style by @zzcr in https://github.com/opentiny/tiny-vue/pull/2341
+- fix(icon): [steps] The size of the steps icon is modified to adapt to the new specifications. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2344
+- fix: fix build error and modify theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2345
+- fix(button): [button] solve the problem of uneven button graphics when mixing by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2347
+- fix(chart): modify chart packages by @Davont in https://github.com/opentiny/tiny-vue/pull/2354
+- fix(grid): [grid] fix x-design theme style by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/2355
+- fix(checkbox): [checkbox] fix checkbox error theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2356
+- fix(cascader): [ cascader] fix active-node 's color and font-weight by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2361
+- fix(anchor): [anchor] Adapting to the new specifications of the anchor point dot mode by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2367
+- fix(carousel): [carousel] modify carousel style by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2376
+- fix(icon): [icon] restore title demo by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2379
+- fix(search): [search] Cancel the border of the search drop-down list box according to the specifications. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2371
+- fix(user-contact): [user-contact] modify demo of console warning by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2375
+- fix(wizard): [wizard] Fix review issues by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2373
+- fix(milestone): [milestone] Fix review issues by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2381
+- fix(button): [button]set svg size when button is only icon by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2380
+- fix(drawer): [drawer] modify the problem that the before-close method is triggered upon page loading is solved by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2364
+- fix(popupload): [pop-upload]Fixed popupload review issues. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2368
+- fix(chart): modify chart package by @Davont in https://github.com/opentiny/tiny-vue/pull/2365
+- fix(dialog-box): [dialog-box] modify dialog-box of demo design bug by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2382
+- fix(input): [input] fix input remembers the input history and does no… by @zzcr in https://github.com/opentiny/tiny-vue/pull/2372
+- fix(split): [split] fix split error apis by @zzcr in https://github.com/opentiny/tiny-vue/pull/2377
+- fix(drawer): [drawer] modify drawer demo of design by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2385
+- fix(modal): [modal] modify design style by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2389
+- fix(icon): [icon] added the content of the show-title example by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2390
+- fix(checkbox): [checkbox] fixed change event bubbling caused it to be… by @zzcr in https://github.com/opentiny/tiny-vue/pull/2397
+- fix(notify): [notify] add manual close demo for notify by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2393
+- fix(build): fix build theme error by @zzcr in https://github.com/opentiny/tiny-vue/pull/2398
+- fix(user-contact): fix background-color of user-contact's header by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2405
+- fix(e2e): [time-line] Fixing Test Cases by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2407
+- fix(cascader): [cascader] add designConfig for tag's type by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2404
+- fix(docs): Fixed an issue with the loading level of the document. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2411
+- fix(search): [search] Fixed an issue where search is disabled can be deleted. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2412
+- fix(anchor): [anchor] fix parent anchor no divider by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/2414
+- fix(time-picker): [time-picker] Style optimization by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2418
+- fix(crop): [crop]modify crops component demo problem by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2419
+- fix(drawer): [drawer] modify demo by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2420
+- fix(dialog-box): [dialog-box] modify demo by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2421
+- fix(tabs): [tabs] Fixed the floating issue of the close button on the tab page and the style issue of the close button under the buttoncard. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2425
+- fix(crop): [crop] modify crop demo by @James-9696 in https://github.com/opentiny/tiny-vue/pull/2424
+- fix(demos): [select,popeditor,slider] fix problem and optimization demo by @MomoPoppy in https://github.com/opentiny/tiny-vue/pull/2435
+- fix(docs): Added the description of the file type to be uploaded. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2439
+- fix(tag): update tag's size when only icon, update one place of button by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2440
+- fix(date-picker): [date-picker,select] fix radius bugs for month-table by @MomoPoppy in https://github.com/opentiny/tiny-vue/pull/2442
+
+### Other Changes
+
+- docs(fluent-editor): add mention module demo by @kagol in https://github.com/opentiny/tiny-vue/pull/1888
+- chore: fix contact link url in issue template config by @kagol in https://github.com/opentiny/tiny-vue/pull/1889
+- feat: add blocks by @kagol in https://github.com/opentiny/tiny-vue/pull/1918
+- docs(grid): grid doc add IFilterConfig type by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1916
+- fix(tree-menu): [tree-menu] the search box supports custom placeholder #589 by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/1867
+- docs(card): [card] fix card image cannot be displayed by @gweesin in https://github.com/opentiny/tiny-vue/pull/1878
+- test(input): [input] add unit test cases by @gweesin in https://github.com/opentiny/tiny-vue/pull/1822
+- docs(changelog): update 3.18.0 changelog by @zzcr in https://github.com/opentiny/tiny-vue/pull/1928
+- feat(tag): [tag] updata tag xdesign by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/1945
+- feat(collapse): [collapse] updata collapse xdesign by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/1943
+- feat(alert): [alert] updata alert xdesign by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/1951
+- feat(ip-address): [ip-address] updata ip-address xdesign by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/1953
+- docs(grid): add new getStateSelection api by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1972
+- feat(tree-menu): [tree-menu] adapt to tree-menu smb themes by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/1989
+- docs: fix search grid no result by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/2016
+- feat(time-picker): [time-picker] updata time-picker xdesign by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/2013
+- feat(docs): A message is added to the document, indicating that the theme is switched by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2024
+- build(sites): optimize build chunks num by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/2028
+- fix(docs): The theme switch prompt is placed in the lower right corner. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2030
+- fix(tree): [tree] fix tree theme for content-right, add tree docs by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2035
+- chore: auto labeler by @GaoNeng-wWw in https://github.com/opentiny/tiny-vue/pull/2053
+- docs: fix demo anchor not correct by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/2056
+- feat(time-picker): [alert,time-picker,collapse] updata xdesign by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/2055
+- fix(alert): [alert] updata alert xdesign by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/2083
+- refactor(pager): [pager] refactor pager style by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/2162
+- refactor(checkbox): [checkbox] refactor checkbox x-design theme by @zzcr in https://github.com/opentiny/tiny-vue/pull/2174
+- refactor(search): [search] refactor search theme by @zzcr in https://github.com/opentiny/tiny-vue/pull/2186
+- refactor(swicth): [switch]refactor switch theme by @zzcr in https://github.com/opentiny/tiny-vue/pull/2183
+- refactor(radio): [radio] refactor radio theme by @zzcr in https://github.com/opentiny/tiny-vue/pull/2181
+- refactor(button): [button] refactor the component variables of the button component. by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2193
+- refactor(split): [split] refactor split theme by @zzcr in https://github.com/opentiny/tiny-vue/pull/2194
+- refactor(form): [form] refactor form style by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/2196
+- refactor(pager): [pager] delete useless code by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/2198
+- refactor(dropdown): [dropdown] refactoring styles and variable for dropdown by @MomoPoppy in https://github.com/opentiny/tiny-vue/pull/2195
+- refactor(numeric): [numeric]refactor numeric theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2200
+- refactor(collapse): [collapse] refactor collapse theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2201
+- refactor(dialog-box): [dialog-box] refactor dialog-box theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2202
+- refactor(guide): [guide] refactor guide theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2207
+- refactor(breadcrumb): [breadcrumb] refactor breadcrumb theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2209
+- refactor(theme): [qr-code,text-popup,watemark,rate] refactor some com… by @zzcr in https://github.com/opentiny/tiny-vue/pull/2219
+- refactor(dropdown-menu): [dropdown] refactor DropdownMenu and DropdownItem vars and style by @MomoPoppy in https://github.com/opentiny/tiny-vue/pull/2208
+- refactor(theme): refactor business comp theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2223
+- refactor(action-menu): [action-menu] modify variable names and add refactor styles by @MomoPoppy in https://github.com/opentiny/tiny-vue/pull/2224
+- refactor(progress): [progress] refactor the progress theme by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2234
+- refactor(theme): [ip-address] refactor ip-address theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2222
+- refactor(charts): [charts] rename chart-core packages to huicharts-core by @Davont in https://github.com/opentiny/tiny-vue/pull/2027
+- refactor(select): [select] refactor theme vars for select by @MomoPoppy in https://github.com/opentiny/tiny-vue/pull/2232
+- refactor(badge): [badge] refactor badge theme vars by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2229
+- refactor(milestone): [milestone] refactor the milestone theme. by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2233
+- refactor(image): [image] refactor the image theme by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2236
+- refactor(alert): [alert] refactor Alert's css vars by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2240
+- refactor(grid): [grid] refactor grid style by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/2241
+- refactor(theme): [drawer] refactor drawer theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2237
+- refactor(theme): [divider] refactor divider theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2238
+- refactor(theme): [statistic] refactor statisic theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2239
+- refactor(theme): [color-picker] refactor color-picker theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2243
+- refactor(select): [select] refactor theme vars and style for select-dropdown/option/option-group by @MomoPoppy in https://github.com/opentiny/tiny-vue/pull/2254
+- refactor(steps): [steps, timeline] Refactoring the steps and timeline themes by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2261
+- refactor(theme): [crop] refactor crop theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2245
+- refactor(theme): [nav-menu] refactor nav-menu theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2256
+- refactor(theme): [carousel] refactor carousel theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2244
+- refactor(theme): [tooltip] refactor tooltip theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2257
+- refactor(theme): [popover] refactor popover theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2259
+- refactor(autocomplete): [autocomplete] modify variable names and add … by @MomoPoppy in https://github.com/opentiny/tiny-vue/pull/2263
+- refactor(theme): [toggle-menu] refactor toggle-menu theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2248
+- refactor(tag): [tag] refactor tag 's theme and demos by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2264
+- refactor(tabs): [tabs] refactor the Tabs Theme by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2270
+- refactor(theme): [button-group] refactor button-group theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2276
+- refactor(link): [link] refactor the link theme by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2273
+- refactor(time-select): [time-select] refactor the theme by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2275
+- refactor(drop-times): [drop-times] refactor the theme by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2280
+- refactor(wizard): [wizard] refactor the Wizard Theme by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/2279
+- refactor(popconfirm): [popconfirm] refactor theme vars by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2282
+- refactor(theme): [input] refactor textarea theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2281
+- refactor(theme): [loading] refactor loading theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2277
+- refactor(tree-menu): [tree-menu] refactor tree-menu thems vars by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/2123
+- refactor(theme): [filter-panel] refactor filter-panel theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2288
+- refactor(theme): [file-upload] refactor file-upload theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2289
+- refactor(theme): [pop-upload] refactor pop-upload theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2290
+- refactor(theme): [scroll-text] refactor scroll-text、scrollbar、tall-st… by @zzcr in https://github.com/opentiny/tiny-vue/pull/2292
+- refactor(theme): [slider] refactor slider theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2295
+- refactor(badge): [badge] refactor theme vars by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2303
+- refactor(tag): refactor fix lost css for button,tag by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2301
+- refactor(theme): [popeditor] refactor popeditor theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2298
+- refactor(theme): refactor table theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2304
+- refactor(notify): [notify] refactor notify theme by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2311
+- refactor(tag-group): [tag-group] update tag-group theme by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2271
+- refactor(transfer): [transfer] update css vars by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2320
+- refactor(calendar-view): [calendar-view] refactor theme vars by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2297
+- refactor(floatbar): [floatbar] refactor theme vars by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2302
+- refactor: inline all x-design design config by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/2317
+- refactor(tree): [tree] refactor tree theme by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2319
+- refactor(calendar): [calendar] refactor theme vars by @Youyou-smiles in https://github.com/opentiny/tiny-vue/pull/2323
+- refactor(cascader): [cascader] refactor cascader's css vars by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2318
+- docs: 删除 smb 配置以及相关依赖 by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/2332
+- refactor(date-picker): [date-picker] modify variable names and styles for date-picker by @MomoPoppy in https://github.com/opentiny/tiny-vue/pull/2340
+- refactor(theme): [hrapprover] refactor hrapprover theme vars by @zzcr in https://github.com/opentiny/tiny-vue/pull/2328
+- refactor(dropdown/action-menu): [dropdown,action-menu] refactor styles for drodpwn by @MomoPoppy in https://github.com/opentiny/tiny-vue/pull/2343
+- refactor(rich-text-editor): refactor rich-text-editor style by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/2346
+- refactor: replace all ti-common css var by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/2358
+- refactor(theme-tool): Reimplementing the theme-tool method by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2369
+- refactor(time-spinner): [date-picker] roll back some styles for time-spinner by @MomoPoppy in https://github.com/opentiny/tiny-vue/pull/2383
+- docs: fix demo anchor position not correct by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/2391
+- refactor: [anchor] rename topOffset and reverse judge condition by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/2394
+- refactor(transfer): [transfer] refactor transfer by checkbox by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2396
+- refactor(base-select): [base-select] refactor vars for base-select by @MomoPoppy in https://github.com/opentiny/tiny-vue/pull/2399
+- refactor(theme-doc): add ThemeTools docs by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2403
+- doc: 修复网站中引入组件部分示例代码错误问题 by @BWrong in https://github.com/opentiny/tiny-vue/pull/2387
+- fix(theme): remove oldTheme's DOCS by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/2417
+
+## New Contributors
+
+- @BWrong made their first contribution in https://github.com/opentiny/tiny-vue/pull/2387
+
 ## v2.18.0/v3.18.0
 
 `2024/08/20`
@@ -25,8 +408,8 @@
 - feat(bulletin-board): [bulletin-board] updata bulletin-board xdesign by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/1844
 - feat(link-menu): [link-menu]modify smb-theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1846
 - feat(nav-menu): [nav-menu] updata nav-menu xdesign by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/1849
-- feat(pop-upload): [pop-upload] 刷新popupload规范，增加uploadTip插槽 by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/1850
-- feat(pop-upload): [pop-upload] 刷新popupload规范，表格头部优化，增加上传数据统计能力,修复长度限制bug by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/1852
+- feat(pop-upload): [pop-upload] 刷新 popupload 规范，增加 uploadTip 插槽 by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/1850
+- feat(pop-upload): [pop-upload] 刷新 popupload 规范，表格头部优化，增加上传数据统计能力,修复长度限制 bug by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/1852
 - feat(toggle-menu): [toggle-menu] add smb theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1861
 - feat(color-select-panel): [color-select-panel]modify smb-theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1837
 - fix(button): [button] add ts declaration for button , and remove hook-updated … by @shenjunjian in https://github.com/opentiny/tiny-vue/pull/1853
diff --git a/examples/sites/demos/pc/webdoc/theme.md b/examples/sites/demos/pc/webdoc/theme.md
index 001657aec..6c52a719d 100644
--- a/examples/sites/demos/pc/webdoc/theme.md
+++ b/examples/sites/demos/pc/webdoc/theme.md
@@ -1,7 +1,7 @@
 ## 主题配置
 
 <div class="warning custom-block">
-  本节文档仅支持 <code> @opentiny/vue@3.19.0 </code> 版本之后的主题定制，更早的历史版本的主题配置，请参阅当前文档底部的 <a href='#历史版本的主题配置'>历史版本的主题配置</a>
+  本节文档仅支持 <code> @opentiny/vue@3.19.0 </code> 及其之后版本的主题定制，更早的历史版本的主题配置，请参阅当前文档底部的 <a href='#历史版本的主题配置'>历史版本的主题配置</a>
 </div>
 
 为了给开发者带来更好的用户体验，从 <code> @opentiny/vue@3.19.0 </code> 版本开始， 组件库的整体风格切换为 `Opentiny Design` 新风格。
@@ -19,7 +19,7 @@
 
 在用户的工程中，如果需要定制主题风格，或者覆盖某些组件的样式，则可以使用组件库提供的 `TinyThemeTool` 类进行配置用户工程的主题。后续我们也将提供更多的主题供大家选择。
 
-`ThemeData` 是自定义主题数据格式，用户可以通过`data`属性，传入覆盖的全局 `CSS 变量`， 通过`css`属性，传入有效的CSS规则块。
+`ThemeData` 是自定义主题数据格式，用户可以通过`data`属性，传入覆盖的全局 `CSS 变量`， 通过`css`属性，传入有效的 CSS 规则块。
 
 ```ts
 interface ThemeData {
@@ -75,7 +75,7 @@ themeTool.changeTheme({
 <div class="tip custom-block">
 在一些用户项目中，许多开发者会在编写组件和页面的样式时，通过<code>important</code> 和 <code>:deep()</code> 来覆盖某些组件库的样式，这些样式就会散落在各个组件里。在组件库后续版本升级时，可能会调整组件结构或类名，造成样式覆盖失效，不建议这样做。 <br><br>
 
-我们建议用户使用 <code>TinyThemeTool</code> 的方法来覆盖组件样式，这样CSS规则会集中在一起，方便后续维护。除此之外，用户也可以将自定义样式统一写在一个 `CSS文件` 中并引入项目，但要保证其中的样式优先级高于组件库的优先级。
+我们建议用户使用 <code>TinyThemeTool</code> 的方法来覆盖组件样式，这样 CSS 规则会集中在一起，方便后续维护。除此之外，用户也可以将自定义样式统一写在一个 `CSS文件` 中并引入项目，但要保证其中的样式优先级高于组件库的优先级。
 
 </div>
 
@@ -122,7 +122,7 @@ const themeTool = new TinyThemeTool(tinyOldTheme)
 ## 历史版本的主题配置
 
 <div class="danger custom-block">
-  本节文档仅支持 <code> @opentiny/vue@3.18.0 </code> 版本之前的主题定制
+  本节文档仅支持 <code> @opentiny/vue@3.18.0 </code> 及其之前版本的主题定制
 </div>
 
 `TinyVue` 多主题采用的是 `css` 变量，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。
@@ -233,11 +233,11 @@ new TinyThemeTool(tinyTestTheme, 'tinyStyleSheetId')
 theme.changeTheme(tinyTestTheme)
 ```
 
-### 自定义cssvar变量前缀（用于解决cssvar变量冲突的问题）
+### 自定义 cssvar 变量前缀（用于解决 cssvar 变量冲突的问题）
 
-#### vuecli工程
+#### vuecli 工程
 
-自定义loader文件（custom-loader.js）内容：
+自定义 loader 文件（custom-loader.js）内容：
 
 ```js
 module.exports = function (source) {
@@ -262,7 +262,7 @@ chainWebpack: (config) => {
 }
 ```
 
-#### vite工程
+#### vite 工程
 
 vite.config.js 定义
 

From 68ab5371a0c3ec9ea2b272991fd2ec75ce3ac483 Mon Sep 17 00:00:00 2001
From: gimmyhehe <975402925@qq.com>
Date: Tue, 29 Oct 2024 10:05:03 +0800
Subject: [PATCH 11/65] docs: fix error demos after add prefix (#2456)

---
 .../mobile-first/app/tabs/tabdata-title.vue      |  8 ++++----
 .../mobile-first/app/tabs/tabs-draggable.vue     | 16 ++++++++--------
 .../mobile-first/app/tabs/tabs-events-add.vue    |  6 +++---
 .../mobile-first/app/tabs/tabs-events-close.vue  |  6 +++---
 .../mobile-first/app/tabs/tabs-events-edit.vue   |  4 ++--
 .../demos/mobile-first/app/tabs/tabs-tabs.vue    |  6 +++---
 .../demos/mobile-first/app/tabs/with-add.vue     |  8 ++++----
 examples/sites/demos/mobile/app/tabs/expand.vue  |  4 ++--
 .../sites/demos/pc/app/config-provider/base.vue  |  2 +-
 .../demos/pc/app/fall-menu/custom-menuitem.vue   |  4 ++--
 .../pc/app/fall-menu/custom-slider-icon.vue      |  4 ++--
 .../demos/pc/app/fall-menu/data-resource.vue     |  2 +-
 .../start-index-composition-api.vue              |  2 +-
 .../pc/app/grid/serial-column/start-index.vue    |  2 +-
 .../sites/demos/pc/app/loading/fullscreen.vue    |  2 +-
 examples/sites/demos/pc/app/sticky/events.vue    |  4 ++--
 .../tabs/custom-more-icon-composition-api.vue    |  6 +++---
 .../sites/demos/pc/app/tabs/custom-more-icon.vue |  6 +++---
 .../app/tabs/more-show-all-composition-api.vue   |  6 +++---
 .../sites/demos/pc/app/tabs/more-show-all.vue    |  6 +++---
 .../demos/pc/app/tabs/size-composition-api.vue   | 10 +++++-----
 examples/sites/demos/pc/app/tabs/size.vue        | 10 +++++-----
 .../app/tabs/tabs-draggable-composition-api.vue  | 16 ++++++++--------
 .../sites/demos/pc/app/tabs/tabs-draggable.vue   | 16 ++++++++--------
 .../tabs/tabs-events-close-composition-api.vue   |  6 +++---
 .../demos/pc/app/tabs/tabs-events-close.vue      |  6 +++---
 .../tabs/tabs-events-edit-composition-api.vue    |  4 ++--
 .../sites/demos/pc/app/tabs/tabs-events-edit.vue |  4 ++--
 .../app/tabs/tabs-separator-composition-api.vue  |  6 +++---
 .../sites/demos/pc/app/tabs/tabs-separator.vue   |  6 +++---
 .../pc/app/tabs/with-add-composition-api.vue     |  6 +++---
 examples/sites/demos/pc/app/tabs/with-add.vue    |  6 +++---
 .../demos/pc/app/time-picker/format.spec.ts      |  2 +-
 33 files changed, 101 insertions(+), 101 deletions(-)

diff --git a/examples/sites/demos/mobile-first/app/tabs/tabdata-title.vue b/examples/sites/demos/mobile-first/app/tabs/tabdata-title.vue
index 6fedcea37..b01ff8566 100644
--- a/examples/sites/demos/mobile-first/app/tabs/tabdata-title.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/tabdata-title.vue
@@ -1,6 +1,6 @@
 <template>
   <tiny-tabs v-model="activeName" v-if="showTab" tab-style="card" :with-close="true" @close="close">
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -18,12 +18,12 @@ export default {
     return {
       activeName: '',
       showTab: false,
-      TinyTabs: []
+      tabs: []
     }
   },
   mounted() {
     setTimeout(() => {
-      this.TinyTabs = [
+      this.tabs = [
         {
           title: '表单组件',
           name: 'first',
@@ -57,7 +57,7 @@ export default {
   },
   methods: {
     close(name) {
-      this.TinyTabs = this.TinyTabs.filter((tab) => {
+      this.tabs = this.tabs.filter((tab) => {
         return tab.name !== name
       })
     }
diff --git a/examples/sites/demos/mobile-first/app/tabs/tabs-draggable.vue b/examples/sites/demos/mobile-first/app/tabs/tabs-draggable.vue
index 79a6b9769..e4c15a351 100644
--- a/examples/sites/demos/mobile-first/app/tabs/tabs-draggable.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/tabs-draggable.vue
@@ -12,7 +12,7 @@
     @tab-drag-over="handleOver"
     @tab-drag-end="handleEnd"
   >
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -34,7 +34,7 @@ export default {
       dropConfig: {
         plugin: Sortable
       },
-      TinyTabs: [
+      tabs: [
         {
           title: 'Tab 1',
           name: '1',
@@ -62,15 +62,15 @@ export default {
     },
     handleEnd(event) {
       const { oldDraggableIndex, newDraggableIndex } = event
-      const tab = this.TinyTabs.splice(oldDraggableIndex, 1)[0]
-      this.TinyTabs.splice(newDraggableIndex, 0, tab)
+      const tab = this.tabs.splice(oldDraggableIndex, 1)[0]
+      this.tabs.splice(newDraggableIndex, 0, tab)
 
-      console.log(this.TinyTabs)
+      console.log(this.tabs)
     },
     handleAdd() {
-      this.TinyTabs.push({
-        title: 'Tab ' + String(this.TinyTabs.length + 1),
-        name: String(this.TinyTabs.length + 1),
+      this.tabs.push({
+        title: 'Tab ' + String(this.tabs.length + 1),
+        name: String(this.tabs.length + 1),
         content: '动态增加tabitem'
       })
     }
diff --git a/examples/sites/demos/mobile-first/app/tabs/tabs-events-add.vue b/examples/sites/demos/mobile-first/app/tabs/tabs-events-add.vue
index 39efdc681..e6d6547c3 100644
--- a/examples/sites/demos/mobile-first/app/tabs/tabs-events-add.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/tabs-events-add.vue
@@ -1,6 +1,6 @@
 <template>
   <tiny-tabs v-model="activeName" :with-add="true" @add="add" tab-style="card">
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -16,7 +16,7 @@ export default {
   },
   data() {
     return {
-      TinyTabs: [
+      tabs: [
         {
           title: '表单组件',
           name: 'first',
@@ -49,7 +49,7 @@ export default {
         message: '动态增加 tabitem'
       })
 
-      this.TinyTabs.push({
+      this.tabs.push({
         title: 'Tab ++',
         name: ++this.tabIndex + '',
         content: '动态增加 tabitem'
diff --git a/examples/sites/demos/mobile-first/app/tabs/tabs-events-close.vue b/examples/sites/demos/mobile-first/app/tabs/tabs-events-close.vue
index 87ce5eb59..c46722128 100644
--- a/examples/sites/demos/mobile-first/app/tabs/tabs-events-close.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/tabs-events-close.vue
@@ -1,6 +1,6 @@
 <template>
   <tiny-tabs v-model="activeName" tab-style="card" :with-close="true" :before-close="beforeClose" @close="close">
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -17,7 +17,7 @@ export default {
   data() {
     return {
       activeName: 'first',
-      TinyTabs: [
+      tabs: [
         {
           title: '表单组件',
           name: 'first',
@@ -57,7 +57,7 @@ export default {
         message: '关闭 ' + name + ' 页签'
       })
 
-      this.TinyTabs = this.TinyTabs.filter((tab) => {
+      this.tabs = this.tabs.filter((tab) => {
         return tab.name !== name
       })
     }
diff --git a/examples/sites/demos/mobile-first/app/tabs/tabs-events-edit.vue b/examples/sites/demos/mobile-first/app/tabs/tabs-events-edit.vue
index ca03e2b34..6e3b65c45 100644
--- a/examples/sites/demos/mobile-first/app/tabs/tabs-events-edit.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/tabs-events-edit.vue
@@ -1,6 +1,6 @@
 <template>
   <tiny-tabs v-model="activeName" tab-style="card" editable @edit="edit">
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -17,7 +17,7 @@ export default {
   data() {
     return {
       activeName: 'first',
-      TinyTabs: [
+      tabs: [
         {
           title: '表单组件',
           name: 'first',
diff --git a/examples/sites/demos/mobile-first/app/tabs/tabs-tabs.vue b/examples/sites/demos/mobile-first/app/tabs/tabs-tabs.vue
index 2ceda522b..c4b380864 100644
--- a/examples/sites/demos/mobile-first/app/tabs/tabs-tabs.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/tabs-tabs.vue
@@ -1,6 +1,6 @@
 <template>
   <tiny-tabs v-model="activeName" v-if="showTab" tab-style="card" :with-close="true" @close="close">
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
       <tiny-tabs v-model="activeName1" v-if="item.name === 'f1'">
         <tiny-tab-item title="s1子标签页" name="s1">
@@ -32,7 +32,7 @@ export default {
       activeName: 'f1',
       activeName2: 'ss1',
       showTab: true,
-      TinyTabs: [
+      tabs: [
         {
           title: '表单组件',
           name: 'f1',
@@ -53,7 +53,7 @@ export default {
   },
   methods: {
     close(name) {
-      this.TinyTabs = this.TinyTabs.filter((tab) => {
+      this.tabs = this.tabs.filter((tab) => {
         return tab.name !== name
       })
     }
diff --git a/examples/sites/demos/mobile-first/app/tabs/with-add.vue b/examples/sites/demos/mobile-first/app/tabs/with-add.vue
index 399c2bcf2..25e094671 100644
--- a/examples/sites/demos/mobile-first/app/tabs/with-add.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/with-add.vue
@@ -1,6 +1,6 @@
 <template>
   <tiny-tabs tab-style="card" :editable="false" :with-add="true" @add="handleadd" style="width: 500px" show-more-tabs>
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -16,7 +16,7 @@ export default {
   },
   data() {
     return {
-      TinyTabs: [
+      tabs: [
         {
           title: 'Tab 1',
           name: '1',
@@ -35,10 +35,10 @@ export default {
   methods: {
     handleadd() {
       // 如果tabItem数量小于指定值就可以新增
-      if (this.TinyTabs.length < this.maxCount) {
+      if (this.tabs.length < this.maxCount) {
         const name = `${++this.tabIndex}`
         const title = `Tab ++ ${name}`
-        this.TinyTabs.push({ title, name, content: '动态增加tabitem - ' + name })
+        this.tabs.push({ title, name, content: '动态增加tabitem - ' + name })
       } else {
         TinyModal.message('tabitem数量已到最大值')
       }
diff --git a/examples/sites/demos/mobile/app/tabs/expand.vue b/examples/sites/demos/mobile/app/tabs/expand.vue
index dce254ee9..306fe9dfa 100644
--- a/examples/sites/demos/mobile/app/tabs/expand.vue
+++ b/examples/sites/demos/mobile/app/tabs/expand.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="demo-tabs">
     <tiny-tabs v-model="activeName" show-expand-tabs expand-tabs-title="请选择" expand-tabs-mode="columns">
-      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+      <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
     </tiny-tabs>
   </div>
 </template>
@@ -16,7 +16,7 @@ export default {
   },
   data() {
     return {
-      TinyTabs: [
+      tabs: [
         {
           title: '标签 1',
           name: '1',
diff --git a/examples/sites/demos/pc/app/config-provider/base.vue b/examples/sites/demos/pc/app/config-provider/base.vue
index a4c1a3e43..685870eca 100644
--- a/examples/sites/demos/pc/app/config-provider/base.vue
+++ b/examples/sites/demos/pc/app/config-provider/base.vue
@@ -21,7 +21,7 @@ export default {
         name: 'smb', // 设计规范名称
         version: '1.0.0', // 设计规范版本号
         components: {
-          TinyAlert: {
+          Alert: {
             icons: {
               warning: iconWarningTriangle()
             },
diff --git a/examples/sites/demos/pc/app/fall-menu/custom-menuitem.vue b/examples/sites/demos/pc/app/fall-menu/custom-menuitem.vue
index be2efeecb..66216525d 100644
--- a/examples/sites/demos/pc/app/fall-menu/custom-menuitem.vue
+++ b/examples/sites/demos/pc/app/fall-menu/custom-menuitem.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="left-panel">
-    <fall-menu :data="dataset">
+    <tiny-fall-menu :data="dataset">
       <template #level1="data">
         <a>{{ `${data.slotScope.title} level1 ` }}</a>
       </template>
@@ -10,7 +10,7 @@
       <template #level3="data">
         <a v-for="(level3, index) in data.slotScope" :href="level3.url" :key="index">{{ `${level3.title} level3 ` }}</a>
       </template>
-    </fall-menu>
+    </tiny-fall-menu>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/fall-menu/custom-slider-icon.vue b/examples/sites/demos/pc/app/fall-menu/custom-slider-icon.vue
index 6cfd1947c..dc360d2b8 100644
--- a/examples/sites/demos/pc/app/fall-menu/custom-slider-icon.vue
+++ b/examples/sites/demos/pc/app/fall-menu/custom-slider-icon.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="left-panel">
-    <fall-menu :data="dataset">
+    <tiny-fall-menu :data="dataset">
       <template #left>
         <icon-left class="tiny-svg-size" />
       </template>
       <template #right>
         <icon-right class="tiny-svg-size" />
       </template>
-    </fall-menu>
+    </tiny-fall-menu>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/fall-menu/data-resource.vue b/examples/sites/demos/pc/app/fall-menu/data-resource.vue
index 89ce84a28..f6d269f59 100644
--- a/examples/sites/demos/pc/app/fall-menu/data-resource.vue
+++ b/examples/sites/demos/pc/app/fall-menu/data-resource.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="left-panel">
-    <fall-menu :data="dataset"></fall-menu>
+    <tiny-fall-menu :data="dataset"></tiny-fall-menu>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/grid/serial-column/start-index-composition-api.vue b/examples/sites/demos/pc/app/grid/serial-column/start-index-composition-api.vue
index 83892feb5..855ec0f9b 100644
--- a/examples/sites/demos/pc/app/grid/serial-column/start-index-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/serial-column/start-index-composition-api.vue
@@ -5,7 +5,7 @@
       seq-serial
       :start-index="200"
       :pager="{
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/serial-column/start-index.vue b/examples/sites/demos/pc/app/grid/serial-column/start-index.vue
index e1560d76d..b3d520fcb 100644
--- a/examples/sites/demos/pc/app/grid/serial-column/start-index.vue
+++ b/examples/sites/demos/pc/app/grid/serial-column/start-index.vue
@@ -5,7 +5,7 @@
       seq-serial
       :start-index="200"
       :pager="{
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 5,
diff --git a/examples/sites/demos/pc/app/loading/fullscreen.vue b/examples/sites/demos/pc/app/loading/fullscreen.vue
index 7c8b8dd87..cd2aed0ab 100644
--- a/examples/sites/demos/pc/app/loading/fullscreen.vue
+++ b/examples/sites/demos/pc/app/loading/fullscreen.vue
@@ -15,7 +15,7 @@ export default {
     TinyButton
   },
   directives: {
-    TinyLoading: TinyLoading.directive
+    Loading: TinyLoading.directive
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/sticky/events.vue b/examples/sites/demos/pc/app/sticky/events.vue
index 91028a6ba..08f5713b0 100644
--- a/examples/sites/demos/pc/app/sticky/events.vue
+++ b/examples/sites/demos/pc/app/sticky/events.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { TinySticky, TinyButton } from '@opentiny/vue'
+import { TinySticky, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     change(isFixed) {
-      Modal.message({
+      TinyModal.message({
         message: `触发 change 事件，当前isFixed为：${isFixed}`,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/tabs/custom-more-icon-composition-api.vue b/examples/sites/demos/pc/app/tabs/custom-more-icon-composition-api.vue
index 0d3c7f1c5..50328db23 100644
--- a/examples/sites/demos/pc/app/tabs/custom-more-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/custom-more-icon-composition-api.vue
@@ -3,7 +3,7 @@
     <template #moreIcon>
       <tiny-icon-popup />
     </template>
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -14,13 +14,13 @@ import { reactive } from 'vue'
 import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 import { iconPopup } from '@opentiny/vue-icon'
 
-const Tabs = reactive([])
+const tabs = reactive([])
 const TinyIconPopup = iconPopup()
 
 // 创建tabs
 for (let i = 1; i < 9; i++) {
   const title = `Tab ${i}`
-  Tabs.push({
+  tabs.push({
     title,
     name: i + '',
     content: `${title} content `
diff --git a/examples/sites/demos/pc/app/tabs/custom-more-icon.vue b/examples/sites/demos/pc/app/tabs/custom-more-icon.vue
index 447e08427..74302d23e 100644
--- a/examples/sites/demos/pc/app/tabs/custom-more-icon.vue
+++ b/examples/sites/demos/pc/app/tabs/custom-more-icon.vue
@@ -3,7 +3,7 @@
     <template #moreIcon>
       <tiny-icon-popup />
     </template>
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -21,14 +21,14 @@ export default {
   },
   data() {
     return {
-      TinyTabs: []
+      tabs: []
     }
   },
   created() {
     // 创建tabs
     for (let i = 1; i < 9; i++) {
       const title = `Tab ${i}`
-      this.TinyTabs.push({
+      this.tabs.push({
         title,
         name: i + '',
         content: `${title} content `
diff --git a/examples/sites/demos/pc/app/tabs/more-show-all-composition-api.vue b/examples/sites/demos/pc/app/tabs/more-show-all-composition-api.vue
index bc2438d28..732d247d4 100644
--- a/examples/sites/demos/pc/app/tabs/more-show-all-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/more-show-all-composition-api.vue
@@ -3,7 +3,7 @@
     <template #moreIcon>
       <tiny-icon-popup />
     </template>
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -14,13 +14,13 @@ import { reactive } from 'vue'
 import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 import { iconPopup } from '@opentiny/vue-icon'
 
-const Tabs = reactive([])
+const tabs = reactive([])
 const TinyIconPopup = iconPopup()
 
 // 创建tabs
 for (let i = 1; i < 101; i++) {
   const title = `Tab ${i}`
-  Tabs.push({
+  tabs.push({
     title,
     name: i + '',
     content: `${title} content `
diff --git a/examples/sites/demos/pc/app/tabs/more-show-all.vue b/examples/sites/demos/pc/app/tabs/more-show-all.vue
index aad725de0..a16422a7f 100644
--- a/examples/sites/demos/pc/app/tabs/more-show-all.vue
+++ b/examples/sites/demos/pc/app/tabs/more-show-all.vue
@@ -3,7 +3,7 @@
     <template #moreIcon>
       <tiny-icon-popup />
     </template>
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -21,14 +21,14 @@ export default {
   },
   data() {
     return {
-      TinyTabs: []
+      tabs: []
     }
   },
   created() {
     // 创建tabs
     for (let i = 1; i < 101; i++) {
       const title = `Tab ${i}`
-      this.TinyTabs.push({
+      this.tabs.push({
         title,
         name: i + '',
         content: `${title} content `
diff --git a/examples/sites/demos/pc/app/tabs/size-composition-api.vue b/examples/sites/demos/pc/app/tabs/size-composition-api.vue
index 296ba69e0..85b73f49f 100644
--- a/examples/sites/demos/pc/app/tabs/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/size-composition-api.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
     <tiny-tabs v-model="activeName" size="small">
-      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+      <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
     </tiny-tabs>
     <tiny-tabs v-model="activeName" separator size="small">
-      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+      <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
     </tiny-tabs>
     <tiny-tabs v-model="activeName" tab-style="button-card" size="small">
-      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+      <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
     </tiny-tabs>
   </div>
 </template>
@@ -17,12 +17,12 @@ import { ref, reactive } from 'vue'
 import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 const activeName = ref('1')
-const Tabs = reactive([])
+const tabs = reactive([])
 
 // 创建tabs
 for (let i = 1; i < 5; i++) {
   const title = `Tab ${i}`
-  Tabs.push({
+  tabs.push({
     title,
     name: i + '',
     content: `${title} content `
diff --git a/examples/sites/demos/pc/app/tabs/size.vue b/examples/sites/demos/pc/app/tabs/size.vue
index f8efcb391..9b193c34e 100644
--- a/examples/sites/demos/pc/app/tabs/size.vue
+++ b/examples/sites/demos/pc/app/tabs/size.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
     <tiny-tabs v-model="activeName" size="small">
-      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+      <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
     </tiny-tabs>
     <tiny-tabs v-model="activeName" separator size="small">
-      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+      <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
     </tiny-tabs>
     <tiny-tabs v-model="activeName" tab-style="button-card" size="small">
-      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+      <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
     </tiny-tabs>
   </div>
 </template>
@@ -23,14 +23,14 @@ export default {
   data() {
     return {
       activeName: '1',
-      TinyTabs: []
+      tabs: []
     }
   },
   created() {
     // 创建tabs
     for (let i = 1; i < 5; i++) {
       const title = `Tab ${i}`
-      this.TinyTabs.push({
+      this.tabs.push({
         title,
         name: i + '',
         content: `${title} content `
diff --git a/examples/sites/demos/pc/app/tabs/tabs-draggable-composition-api.vue b/examples/sites/demos/pc/app/tabs/tabs-draggable-composition-api.vue
index 79f884ca9..06a081db8 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-draggable-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-draggable-composition-api.vue
@@ -10,7 +10,7 @@
     @tab-drag-over="handleOver"
     @tab-drag-end="handleEnd"
   >
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -25,7 +25,7 @@ const tabName = ref('2')
 const dropConfig = ref({
   plugin: Sortable
 })
-const Tabs = ref([
+const tabs = ref([
   {
     title: 'Tab 1',
     name: '1',
@@ -53,16 +53,16 @@ function handleOver(event) {
 
 function handleEnd(event) {
   const { oldDraggableIndex, newDraggableIndex } = event
-  const tab = Tabs.value.splice(oldDraggableIndex, 1)[0]
-  Tabs.value.splice(newDraggableIndex, 0, tab)
+  const tab = tabs.value.splice(oldDraggableIndex, 1)[0]
+  tabs.value.splice(newDraggableIndex, 0, tab)
 
-  console.log(Tabs.value)
+  console.log(tabs.value)
 }
 
 function handleAdd() {
-  Tabs.value.push({
-    title: 'Tab ' + String(Tabs.value.length + 1),
-    name: String(Tabs.value.length + 1),
+  tabs.value.push({
+    title: 'Tab ' + String(tabs.value.length + 1),
+    name: String(tabs.value.length + 1),
     content: '动态增加tabitem'
   })
 }
diff --git a/examples/sites/demos/pc/app/tabs/tabs-draggable.vue b/examples/sites/demos/pc/app/tabs/tabs-draggable.vue
index a497c87c0..68c23ec04 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-draggable.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-draggable.vue
@@ -10,7 +10,7 @@
     @tab-drag-over="handleOver"
     @tab-drag-end="handleEnd"
   >
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -31,7 +31,7 @@ export default {
       dropConfig: {
         plugin: Sortable
       },
-      TinyTabs: [
+      tabs: [
         {
           title: 'Tab 1',
           name: '1',
@@ -59,15 +59,15 @@ export default {
     },
     handleEnd(event) {
       const { oldDraggableIndex, newDraggableIndex } = event
-      const tab = this.TinyTabs.splice(oldDraggableIndex, 1)[0]
-      this.TinyTabs.splice(newDraggableIndex, 0, tab)
+      const tab = this.tabs.splice(oldDraggableIndex, 1)[0]
+      this.tabs.splice(newDraggableIndex, 0, tab)
 
-      console.log(this.TinyTabs)
+      console.log(this.tabs)
     },
     handleAdd() {
-      this.TinyTabs.push({
-        title: 'Tab ' + String(this.TinyTabs.length + 1),
-        name: String(this.TinyTabs.length + 1),
+      this.tabs.push({
+        title: 'Tab ' + String(this.tabs.length + 1),
+        name: String(this.tabs.length + 1),
         content: '动态增加tabitem'
       })
     }
diff --git a/examples/sites/demos/pc/app/tabs/tabs-events-close-composition-api.vue b/examples/sites/demos/pc/app/tabs/tabs-events-close-composition-api.vue
index f598daee8..5f5de8bfe 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-events-close-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-events-close-composition-api.vue
@@ -2,7 +2,7 @@
   <tiny-tabs v-model="activeName" tab-style="card" :with-close="true" :before-close="beforeClose" @close="close">
     <tiny-tab-item
       :key="item.name"
-      v-for="item in Tabs"
+      v-for="item in tabs"
       :title="item.title"
       :name="item.name"
       :with-close="item.withClose"
@@ -17,7 +17,7 @@ import { ref, getCurrentInstance } from 'vue'
 import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 const activeName = ref('first')
-const Tabs = ref([
+const tabs = ref([
   {
     title: '表单组件',
     name: 'first',
@@ -58,7 +58,7 @@ function close(name) {
     message: '关闭 ' + name + ' 页签'
   })
 
-  Tabs.value = Tabs.value.filter((tab) => {
+  tabs.value = tabs.value.filter((tab) => {
     return tab.name !== name
   })
 }
diff --git a/examples/sites/demos/pc/app/tabs/tabs-events-close.vue b/examples/sites/demos/pc/app/tabs/tabs-events-close.vue
index 629b13c79..08c4f7d47 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-events-close.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-events-close.vue
@@ -2,7 +2,7 @@
   <tiny-tabs v-model="activeName" tab-style="card" :with-close="true" :before-close="beforeClose" @close="close">
     <tiny-tab-item
       :key="item.name"
-      v-for="item in Tabs"
+      v-for="item in tabs"
       :title="item.title"
       :name="item.name"
       :with-close="item.withClose"
@@ -23,7 +23,7 @@ export default {
   data() {
     return {
       activeName: 'first',
-      TinyTabs: [
+      tabs: [
         {
           title: '表单组件',
           name: 'first',
@@ -64,7 +64,7 @@ export default {
         message: '关闭 ' + name + ' 页签'
       })
 
-      this.TinyTabs = this.TinyTabs.filter((tab) => {
+      this.tabs = this.tabs.filter((tab) => {
         return tab.name !== name
       })
     }
diff --git a/examples/sites/demos/pc/app/tabs/tabs-events-edit-composition-api.vue b/examples/sites/demos/pc/app/tabs/tabs-events-edit-composition-api.vue
index b8389fe40..3dc7c891c 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-events-edit-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-events-edit-composition-api.vue
@@ -1,6 +1,6 @@
 <template>
   <tiny-tabs v-model="activeName" tab-style="card" editable @edit="edit">
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -11,7 +11,7 @@ import { ref, getCurrentInstance } from 'vue'
 import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 const activeName = ref('first')
-const Tabs = ref([
+const tabs = ref([
   {
     title: '表单组件',
     name: 'first',
diff --git a/examples/sites/demos/pc/app/tabs/tabs-events-edit.vue b/examples/sites/demos/pc/app/tabs/tabs-events-edit.vue
index 249f2a2ff..33b396ea8 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-events-edit.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-events-edit.vue
@@ -1,6 +1,6 @@
 <template>
   <tiny-tabs v-model="activeName" tab-style="card" editable @edit="edit">
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -17,7 +17,7 @@ export default {
   data() {
     return {
       activeName: 'first',
-      TinyTabs: [
+      tabs: [
         {
           title: '表单组件',
           name: 'first',
diff --git a/examples/sites/demos/pc/app/tabs/tabs-separator-composition-api.vue b/examples/sites/demos/pc/app/tabs/tabs-separator-composition-api.vue
index b50a55f6f..ae9e4660e 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-separator-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-separator-composition-api.vue
@@ -25,7 +25,7 @@
     </tiny-tabs>
     <br /><br /><br /><br />
     <tiny-tabs separator :editable="false" :with-add="true" @add="handleadd" style="width: 500px">
-      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+      <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
         {{ item.content }}
       </tiny-tab-item>
     </tiny-tabs>
@@ -39,7 +39,7 @@ import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 const activeName1 = ref('first')
 const activeName2 = ref('second')
 const tabIndex = ref(2)
-const Tabs = reactive([
+const tabs = reactive([
   {
     title: 'Tab 1',
     name: '1',
@@ -53,7 +53,7 @@ const Tabs = reactive([
 ])
 
 const handleadd = () => {
-  Tabs.push({
+  tabs.push({
     title: 'Tab ++',
     name: ++tabIndex.value + '',
     content: '动态增加tabitem'
diff --git a/examples/sites/demos/pc/app/tabs/tabs-separator.vue b/examples/sites/demos/pc/app/tabs/tabs-separator.vue
index e1511a458..5eb6799e1 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-separator.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-separator.vue
@@ -25,7 +25,7 @@
     </tiny-tabs>
     <br /><br /><br /><br />
     <tiny-tabs separator :editable="false" :with-add="true" @add="handleadd" style="width: 500px">
-      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+      <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
         {{ item.content }}
       </tiny-tab-item>
     </tiny-tabs>
@@ -44,7 +44,7 @@ export default {
     return {
       activeName1: 'first',
       activeName2: 'second',
-      TinyTabs: [
+      tabs: [
         {
           title: 'Tab 1',
           name: '1',
@@ -61,7 +61,7 @@ export default {
   },
   methods: {
     handleadd() {
-      this.TinyTabs.push({
+      this.tabs.push({
         title: 'Tab ++',
         name: ++this.tabIndex + '',
         content: '动态增加tabitem'
diff --git a/examples/sites/demos/pc/app/tabs/with-add-composition-api.vue b/examples/sites/demos/pc/app/tabs/with-add-composition-api.vue
index 0a023bd81..7b9f84dd0 100644
--- a/examples/sites/demos/pc/app/tabs/with-add-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/with-add-composition-api.vue
@@ -7,7 +7,7 @@
     show-more-tabs
     popper-class="custom-class"
   >
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -17,7 +17,7 @@
 import { ref } from 'vue'
 import { TinyTabs, TinyTabItem, TinyModal } from '@opentiny/vue'
 
-const Tabs = ref([
+const tabs = ref([
   {
     title: 'Tab 1',
     name: '1',
@@ -37,7 +37,7 @@ function handleAdd() {
     status: 'success'
   })
 
-  Tabs.value.push({
+  tabs.value.push({
     title: 'Tab ++',
     name: ++tabIndex.value + '',
     content: '动态增加tabitem'
diff --git a/examples/sites/demos/pc/app/tabs/with-add.vue b/examples/sites/demos/pc/app/tabs/with-add.vue
index 167be1ae3..ba1f3a261 100644
--- a/examples/sites/demos/pc/app/tabs/with-add.vue
+++ b/examples/sites/demos/pc/app/tabs/with-add.vue
@@ -7,7 +7,7 @@
     show-more-tabs
     popper-class="custom-class"
   >
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -23,7 +23,7 @@ export default {
   },
   data() {
     return {
-      TinyTabs: [
+      tabs: [
         {
           title: 'Tab 1',
           name: '1',
@@ -45,7 +45,7 @@ export default {
         status: 'success'
       })
 
-      this.TinyTabs.push({
+      this.tabs.push({
         title: 'Tab ++',
         name: ++this.tabIndex + '',
         content: '动态增加tabitem'
diff --git a/examples/sites/demos/pc/app/time-picker/format.spec.ts b/examples/sites/demos/pc/app/time-picker/format.spec.ts
index 5babeec54..0a4c4c9bd 100644
--- a/examples/sites/demos/pc/app/time-picker/format.spec.ts
+++ b/examples/sites/demos/pc/app/time-picker/format.spec.ts
@@ -12,7 +12,7 @@ test('时间格式化', async ({ page }) => {
 
   await page.getByRole('textbox', { name: '19:40:00 pm' }).click()
   await page.waitForTimeout(100)
-  await page.getByRole('listitem').filter({ hasText: '08 pm' }).locator('span').click()
+  await page.getByRole('listitem').filter({ hasText: '08 pm' }).first().locator('span').click()
   await page.getByRole('button', { name: '确定' }).click()
   await page.waitForTimeout(100)
   await expect(page.getByRole('textbox', { name: '20:40:00 pm' })).toBeVisible()

From 728f588fa4f01973ccd17ae5fc425faebc50933a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=9C=E9=A3=8E=E4=BD=BF=E5=91=BD=E5=BF=85=E8=BE=BE?=
 <1664677472@qq.com>
Date: Mon, 28 Oct 2024 19:11:41 -0700
Subject: [PATCH 12/65] feat(card): [card] Optimize style (#2454)

---
 .../sites/demos/pc/app/card/card-select-composition-api.vue     | 2 +-
 examples/sites/demos/pc/app/card/card-select.vue                | 2 +-
 .../sites/demos/pc/app/card/custom-class-composition-api.vue    | 2 +-
 examples/sites/demos/pc/app/card/custom-class.vue               | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/examples/sites/demos/pc/app/card/card-select-composition-api.vue b/examples/sites/demos/pc/app/card/card-select-composition-api.vue
index 4e1cfdae1..db91542c5 100644
--- a/examples/sites/demos/pc/app/card/card-select-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/card-select-composition-api.vue
@@ -62,7 +62,7 @@ const dataArr = ref([
   {
     title: 'TinyVue',
     content: '^15.0.01',
-    imageSrc: 'https://res.hc-cdn.com/tinyui-design/1.0.7.20240711104855/home/images/tinyvue.svg'
+    imageSrc: 'https://res.hc-cdn.com/tinyui-design-common/1.0.5.20240823150427/assets/tinyvue.svg'
   },
   {
     title: 'TinyNG',
diff --git a/examples/sites/demos/pc/app/card/card-select.vue b/examples/sites/demos/pc/app/card/card-select.vue
index 892f39225..5200ea13a 100644
--- a/examples/sites/demos/pc/app/card/card-select.vue
+++ b/examples/sites/demos/pc/app/card/card-select.vue
@@ -69,7 +69,7 @@ export default {
         {
           title: 'TinyVue',
           content: '^15.0.01',
-          imageSrc: 'https://res.hc-cdn.com/tinyui-design-common/1.0.7.20240711104855/assets/tinyvue.svg'
+          imageSrc: 'https://res.hc-cdn.com/tinyui-design-common/1.0.5.20240823150427/assets/tinyvue.svg'
         },
         {
           title: 'TinyNG',
diff --git a/examples/sites/demos/pc/app/card/custom-class-composition-api.vue b/examples/sites/demos/pc/app/card/custom-class-composition-api.vue
index b5ae3b06a..5f31f4372 100644
--- a/examples/sites/demos/pc/app/card/custom-class-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/custom-class-composition-api.vue
@@ -49,6 +49,6 @@ const options = ref([
   padding: 16px;
 }
 .my-card {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(0, 0, 0, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/card/custom-class.vue b/examples/sites/demos/pc/app/card/custom-class.vue
index 525c35457..b8e582296 100644
--- a/examples/sites/demos/pc/app/card/custom-class.vue
+++ b/examples/sites/demos/pc/app/card/custom-class.vue
@@ -57,6 +57,6 @@ export default {
   padding: 16px;
 }
 .my-card {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(0, 0, 0, 0.1);
 }
 </style>

From fd535ac8f850108c8252bfcd28a14aee5cd41d7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=94=B3=E5=90=9B=E5=81=A5?= <40288193@qq.com>
Date: Tue, 29 Oct 2024 10:12:40 +0800
Subject: [PATCH 13/65] fix(tree): remove  red color from demos (#2455)

---
 examples/sites/demos/.eslintrc.js                      |  3 ++-
 .../demos/pc/app/tree/edit-control-composition-api.vue |  7 ++++---
 examples/sites/demos/pc/app/tree/edit-control.vue      |  7 ++++---
 .../sites/demos/pc/app/tree/other-composition-api.vue  |  9 +++++----
 examples/sites/demos/pc/app/tree/other.vue             |  9 +++++----
 .../sites/demos/pc/app/tree/slot-composition-api.vue   | 10 +++++-----
 examples/sites/demos/pc/app/tree/slot.vue              | 10 +++++-----
 7 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/examples/sites/demos/.eslintrc.js b/examples/sites/demos/.eslintrc.js
index df5ce1a64..8d6c32ab0 100644
--- a/examples/sites/demos/.eslintrc.js
+++ b/examples/sites/demos/.eslintrc.js
@@ -3,6 +3,7 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
   rules: {
-    'no-console': 'off'
+    'no-console': 'off',
+    'vue/no-unused-vars': 'off'
   }
 }
diff --git a/examples/sites/demos/pc/app/tree/edit-control-composition-api.vue b/examples/sites/demos/pc/app/tree/edit-control-composition-api.vue
index b3c95248f..7dc473427 100644
--- a/examples/sites/demos/pc/app/tree/edit-control-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/edit-control-composition-api.vue
@@ -4,7 +4,7 @@
     <tiny-button @click="closeEdit">取消编辑</tiny-button>
     <tiny-button @click="saveEdit">保存编辑</tiny-button> <br />
     <br />
-    <div class="red">数据1 禁止添加; &nbsp;数据2 禁止编辑; &nbsp;数据3 禁止删除;</div>
+    <div class="tips">提示：数据1 禁止添加; &nbsp;数据2 禁止编辑; &nbsp;数据3 禁止删除;</div>
     <tiny-tree
       ref="treeRef"
       node-key="id"
@@ -109,7 +109,8 @@ function deleteNodeMethod() {
 </script>
 
 <style scoped>
-.red {
-  color: red;
+.tips {
+  color: #888;
+  margin: 12px 20px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/tree/edit-control.vue b/examples/sites/demos/pc/app/tree/edit-control.vue
index caf1ccbfe..104a90e81 100644
--- a/examples/sites/demos/pc/app/tree/edit-control.vue
+++ b/examples/sites/demos/pc/app/tree/edit-control.vue
@@ -4,7 +4,7 @@
     <tiny-button @click="closeEdit">取消编辑</tiny-button>
     <tiny-button @click="saveEdit">保存编辑</tiny-button> <br />
     <br />
-    <div class="red">数据1 禁止添加; &nbsp;数据2 禁止编辑; &nbsp;数据3 禁止删除;</div>
+    <div class="tips">提示：数据1 禁止添加; &nbsp;数据2 禁止编辑; &nbsp;数据3 禁止删除;</div>
     <tiny-tree
       ref="treeRef"
       node-key="id"
@@ -117,7 +117,8 @@ export default {
 </script>
 
 <style scoped>
-.red {
-  color: red;
+.tips {
+  color: #888;
+  margin: 12px 20px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/tree/other-composition-api.vue b/examples/sites/demos/pc/app/tree/other-composition-api.vue
index d02af0cb0..ce8ce1957 100644
--- a/examples/sites/demos/pc/app/tree/other-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/other-composition-api.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <span class="red">手风琴模式，父子严格显示自动勾选</span>
+    <div class="tips">提示：手风琴模式，父子严格显示自动勾选</div>
     <tiny-tree :data="data" accordion show-checkbox check-strictly show-check-easily :icon-trigger-click-node="false">
     </tiny-tree>
     <br />
-    <span class="red">非手风琴模式，自定义自动勾选的内容</span>
+    <div class="tips">提示：非手风琴模式，自定义自动勾选的内容</div>
     <tiny-tree :data="data" accordion show-checkbox check-strictly show-check-easily :icon-trigger-click-node="false">
       <template #switchText>
         <span>自定义开关的内容</span>
@@ -43,7 +43,8 @@ const data = ref([
 </script>
 
 <style scoped>
-.red {
-  color: red;
+.tips {
+  color: #888;
+  margin: 12px 20px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/tree/other.vue b/examples/sites/demos/pc/app/tree/other.vue
index 43d305732..ff3174893 100644
--- a/examples/sites/demos/pc/app/tree/other.vue
+++ b/examples/sites/demos/pc/app/tree/other.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <span class="red">手风琴模式，父子严格显示自动勾选</span>
+    <div class="tips">提示：手风琴模式，父子严格显示自动勾选</div>
     <tiny-tree :data="data" accordion show-checkbox check-strictly show-check-easily :icon-trigger-click-node="false">
     </tiny-tree>
     <br />
-    <span class="red">非手风琴模式，自定义自动勾选的内容</span>
+    <div class="tips">提示：非手风琴模式，自定义自动勾选的内容</div>
     <tiny-tree :data="data" accordion show-checkbox check-strictly show-check-easily :icon-trigger-click-node="false">
       <template #switchText>
         <span>自定义开关的内容</span>
@@ -51,7 +51,8 @@ export default {
 </script>
 
 <style scoped>
-.red {
-  color: red;
+.tips {
+  color: #888;
+  margin: 12px 20px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/tree/slot-composition-api.vue b/examples/sites/demos/pc/app/tree/slot-composition-api.vue
index c9ed26647..05bd499a4 100644
--- a/examples/sites/demos/pc/app/tree/slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/slot-composition-api.vue
@@ -5,7 +5,7 @@
       <tiny-button @click="clearData">清除数据</tiny-button>
     </div>
     <div>
-      <div class="tip">5个插槽示例</div>
+      <div class="tips">提示：5个插槽示例</div>
       <tiny-tree :data="data" default-expand-all>
         <!-- 前缀插槽 -->
         <template #prefix="{ node }">
@@ -33,7 +33,7 @@
       </tiny-tree>
     </div>
     <div>
-      <div class="tip">render-content + empty-text 示例</div>
+      <div class="tips">提示：render-content + empty-text 示例</div>
       <tiny-tree :data="data" empty-text="组件无数据" :render-content="renderContent" default-expand-all> </tiny-tree>
     </div>
   </div>
@@ -94,8 +94,8 @@ function renderContent(h, { node, data }) {
 .slot-demo > div {
   margin-bottom: 8px;
 }
-.tip {
-  font-weight: bold;
-  margin-bottom: 8px;
+.tips {
+  color: #888;
+  margin: 12px 20px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/tree/slot.vue b/examples/sites/demos/pc/app/tree/slot.vue
index 0faa8f1d5..a119573a8 100644
--- a/examples/sites/demos/pc/app/tree/slot.vue
+++ b/examples/sites/demos/pc/app/tree/slot.vue
@@ -5,7 +5,7 @@
       <tiny-button @click="clearData">清除数据</tiny-button>
     </div>
     <div>
-      <div class="tip">5个插槽示例</div>
+      <div class="tips">提示：5个插槽示例</div>
       <tiny-tree :data="data" default-expand-all>
         <!-- 前缀插槽 -->
         <template #prefix="{ node }">
@@ -33,7 +33,7 @@
       </tiny-tree>
     </div>
     <div>
-      <div class="tip">render-content + empty-text 示例</div>
+      <div class="tips">提示：render-content + empty-text 示例</div>
       <tiny-tree :data="data" empty-text="组件无数据" :render-content="renderContent" default-expand-all> </tiny-tree>
     </div>
   </div>
@@ -105,8 +105,8 @@ export default {
 .slot-demo > div {
   margin-bottom: 8px;
 }
-.tip {
-  font-weight: bold;
-  margin-bottom: 8px;
+.tips {
+  color: #888;
+  margin: 12px 20px;
 }
 </style>

From 82f1cccd9b4640edb4c8e9455c263177d55adcdf Mon Sep 17 00:00:00 2001
From: chenxi-20 <2465950588@qq.com>
Date: Mon, 28 Oct 2024 19:47:12 -0700
Subject: [PATCH 14/65] =?UTF-8?q?fix(steps):=20[steps]=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E6=9D=A1=E5=BD=A2=E6=AD=A5=E9=AA=A4=E6=9D=A1=E5=B0=8F?=
 =?UTF-8?q?=E7=81=B0=E7=82=B9=20(#2459)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/theme/src/steps/index.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/theme/src/steps/index.less b/packages/theme/src/steps/index.less
index 4e0a8204c..3fda658ca 100644
--- a/packages/theme/src/steps/index.less
+++ b/packages/theme/src/steps/index.less
@@ -127,7 +127,6 @@
     margin: 0 1px;
     height: 32px;
     display: flex;
-    border-radius: 2px;
     overflow: hidden;
     cursor: pointer;
     color: var(--tv-Steps-text-color);

From cb08336162c656ec6e6ada31c9fbdf3b9d52fa1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=9C=E9=A3=8E=E4=BD=BF=E5=91=BD=E5=BF=85=E8=BE=BE?=
 <1664677472@qq.com>
Date: Mon, 28 Oct 2024 19:48:04 -0700
Subject: [PATCH 15/65] feat(time-picker): [time-picker] Optimize and modify
 component style issues (#2452)

* feat(date-picker): [date-picker]Optimize case display and fix style issues

* feat(date-picker): [date-picker]Optimize case display and fix style issues

* feat(date-picker): [date-picker] Fix style issues

* feat(date-picker): [date-picker] Modify console for a large number of alarms

* feat(button): [button] Optimize demo style for feature display

* feat(date-picker): [date-picker] Optimize demo style

* feat(time-picker): [time-picker] Optimize and modify component style issues

* feat(time-picker): [time-picker] Optimize and modify component style issues

* feat(time-picker): [time-picker] Optimize style

* feat(time-picker): [time-picker] Optimize style
---
 .../basic-usage-composition-api.vue           |  2 +-
 .../demos/pc/app/date-picker/basic-usage.vue  |  2 +-
 .../app/date-picker/clear-composition-api.vue |  2 +-
 .../sites/demos/pc/app/date-picker/clear.vue  |  2 +-
 .../custom-suffix-icon-composition-api.vue    |  2 +-
 .../pc/app/date-picker/custom-suffix-icon.vue |  2 +-
 .../custom-weeks-composition-api.vue          |  2 +-
 .../demos/pc/app/date-picker/custom-weeks.vue |  2 +-
 .../default-value-composition-api.vue         |  7 +-----
 .../pc/app/date-picker/default-value.vue      |  7 +-----
 .../date-picker/disabled-composition-api.vue  |  7 +-----
 .../demos/pc/app/date-picker/disabled.vue     |  7 +-----
 .../date-picker/events-composition-api.vue    | 13 ++++++-----
 .../sites/demos/pc/app/date-picker/events.vue | 13 ++++++-----
 .../filter-mode-composition-api.vue           |  2 +-
 .../demos/pc/app/date-picker/filter-mode.vue  |  2 +-
 .../date-picker/format-composition-api.vue    |  2 +-
 .../sites/demos/pc/app/date-picker/format.vue |  2 +-
 .../label-inside-composition-api.vue          |  9 +-------
 .../demos/pc/app/date-picker/label-inside.vue |  9 +-------
 .../multiple-dates-composition-api.vue        |  2 +-
 .../pc/app/date-picker/multiple-dates.vue     |  2 +-
 .../app/date-picker/now-composition-api.vue   |  2 +-
 .../sites/demos/pc/app/date-picker/now.vue    |  2 +-
 .../app/date-picker/size-composition-api.vue  |  7 +-----
 .../sites/demos/pc/app/date-picker/size.vue   |  7 +-----
 .../app/date-picker/step-composition-api.vue  |  2 +-
 .../sites/demos/pc/app/date-picker/step.vue   |  2 +-
 .../date-picker/timezone-composition-api.vue  |  2 +-
 .../demos/pc/app/date-picker/timezone.vue     |  2 +-
 .../unlink-panels-composition-api.vue         |  2 +-
 .../pc/app/date-picker/unlink-panels.vue      |  2 +-
 .../validate-event-composition-api.vue        |  2 +-
 .../pc/app/date-picker/validate-event.vue     |  2 +-
 .../basic-usage-composition-api.vue           |  2 +-
 .../pc/app/time-picker/basic-usage.spec.ts    |  8 +++----
 .../demos/pc/app/time-picker/basic-usage.vue  |  2 +-
 .../time-picker/is-range-composition-api.vue  |  2 +-
 .../demos/pc/app/time-picker/is-range.vue     |  2 +-
 .../pc/app/time-picker/webdoc/time-picker.js  |  4 ++--
 packages/theme/src/picker/index.less          | 22 ++++++++-----------
 packages/theme/src/time-panel/index.less      |  5 +----
 packages/theme/src/time-panel/vars.less       |  2 +-
 packages/theme/src/time-spinner/index.less    | 10 ++++++++-
 packages/vue/src/picker/package.json          |  2 +-
 packages/vue/src/picker/src/pc.vue            |  4 ++--
 packages/vue/src/time/package.json            |  2 +-
 packages/vue/src/time/src/pc.vue              |  5 -----
 48 files changed, 80 insertions(+), 126 deletions(-)

diff --git a/examples/sites/demos/pc/app/date-picker/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/date-picker/basic-usage-composition-api.vue
index 0f2594eb9..22ddebaee 100644
--- a/examples/sites/demos/pc/app/date-picker/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/basic-usage-composition-api.vue
@@ -23,7 +23,7 @@ const yearValue = ref('')
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/basic-usage.vue b/examples/sites/demos/pc/app/date-picker/basic-usage.vue
index 82f1c16e8..fdeb0bb51 100644
--- a/examples/sites/demos/pc/app/date-picker/basic-usage.vue
+++ b/examples/sites/demos/pc/app/date-picker/basic-usage.vue
@@ -31,7 +31,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/clear-composition-api.vue b/examples/sites/demos/pc/app/date-picker/clear-composition-api.vue
index 6662b6ed8..12cb005b2 100644
--- a/examples/sites/demos/pc/app/date-picker/clear-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/clear-composition-api.vue
@@ -31,6 +31,6 @@ const IconClose = iconClose()
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/clear.vue b/examples/sites/demos/pc/app/date-picker/clear.vue
index a67f791a4..3c5e6a8cb 100644
--- a/examples/sites/demos/pc/app/date-picker/clear.vue
+++ b/examples/sites/demos/pc/app/date-picker/clear.vue
@@ -41,6 +41,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue
index 511a629dd..bb83c6dae 100644
--- a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue
@@ -15,7 +15,7 @@ const IconMinus = iconMinus()
 
 <style>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 
 .my-date-picker {
diff --git a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue
index 453713f03..63f4d7a8a 100644
--- a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue
+++ b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue
@@ -23,7 +23,7 @@ export default {
 
 <style>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 
 .my-date-picker {
diff --git a/examples/sites/demos/pc/app/date-picker/custom-weeks-composition-api.vue b/examples/sites/demos/pc/app/date-picker/custom-weeks-composition-api.vue
index 31ea3ef29..8dffde4b8 100644
--- a/examples/sites/demos/pc/app/date-picker/custom-weeks-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/custom-weeks-composition-api.vue
@@ -48,6 +48,6 @@ function formatWeeks(customWeeks, weekFirstDays) {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/custom-weeks.vue b/examples/sites/demos/pc/app/date-picker/custom-weeks.vue
index f4748b39e..c15c2573f 100644
--- a/examples/sites/demos/pc/app/date-picker/custom-weeks.vue
+++ b/examples/sites/demos/pc/app/date-picker/custom-weeks.vue
@@ -57,6 +57,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/default-value-composition-api.vue b/examples/sites/demos/pc/app/date-picker/default-value-composition-api.vue
index 3a165ad22..d1a76a7c3 100644
--- a/examples/sites/demos/pc/app/date-picker/default-value-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/default-value-composition-api.vue
@@ -31,12 +31,7 @@ const defaultTimeRange = ref(['09:00:00', '18:00:00'])
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--datetimerange.tiny-input__inner) {
-    width: 360px;
-  }
-
+  width: 360px;
   & > * {
     margin-top: 12px;
   }
diff --git a/examples/sites/demos/pc/app/date-picker/default-value.vue b/examples/sites/demos/pc/app/date-picker/default-value.vue
index e5f75e4c5..30abb9383 100644
--- a/examples/sites/demos/pc/app/date-picker/default-value.vue
+++ b/examples/sites/demos/pc/app/date-picker/default-value.vue
@@ -39,12 +39,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--datetimerange.tiny-input__inner) {
-    width: 360px;
-  }
-
+  width: 360px;
   & > * {
     margin-top: 12px;
   }
diff --git a/examples/sites/demos/pc/app/date-picker/disabled-composition-api.vue b/examples/sites/demos/pc/app/date-picker/disabled-composition-api.vue
index b2cb90495..0260a20a9 100644
--- a/examples/sites/demos/pc/app/date-picker/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/disabled-composition-api.vue
@@ -50,12 +50,7 @@ const pickerOptions = {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
-    width: 360px;
-  }
-
+  width: 360px;
   & > * {
     margin-top: 12px;
   }
diff --git a/examples/sites/demos/pc/app/date-picker/disabled.vue b/examples/sites/demos/pc/app/date-picker/disabled.vue
index 2d4632581..0c14cdaae 100644
--- a/examples/sites/demos/pc/app/date-picker/disabled.vue
+++ b/examples/sites/demos/pc/app/date-picker/disabled.vue
@@ -57,12 +57,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
-    width: 360px;
-  }
-
+  width: 360px;
   & > * {
     margin-top: 12px;
   }
diff --git a/examples/sites/demos/pc/app/date-picker/events-composition-api.vue b/examples/sites/demos/pc/app/date-picker/events-composition-api.vue
index d7f4ddb63..797d9230a 100644
--- a/examples/sites/demos/pc/app/date-picker/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/events-composition-api.vue
@@ -1,20 +1,18 @@
 <template>
   <tiny-layout>
-    <tiny-row>
-      <tiny-col :span="4">
+    <tiny-row class="demo-row">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">focus:</label>
         <tiny-date-picker v-model="valueFocus" @focus="handleFocus"></tiny-date-picker>
       </tiny-col>
-      <tiny-col :span="4">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">blur:</label>
         <tiny-date-picker v-model="valueBlur" @blur="handleBlur"></tiny-date-picker>
       </tiny-col>
-      <tiny-col :span="4">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">change:</label>
         <tiny-date-picker v-model="valueChange" @change="handleChange"></tiny-date-picker>
       </tiny-col>
-    </tiny-row>
-    <tiny-row>
       <tiny-col :span="6">
         <label class="demo-date-picker-label">onPick:</label>
         <tiny-date-picker v-model="valueOnPick" type="daterange" :picker-options="pickerOptions"></tiny-date-picker>
@@ -52,6 +50,9 @@ const pickerOptions = {
 </script>
 
 <style scoped>
+.demo-row {
+  width: 80%;
+}
 .demo-date-picker-label {
   display: inline-block;
   margin: 12px 0;
diff --git a/examples/sites/demos/pc/app/date-picker/events.vue b/examples/sites/demos/pc/app/date-picker/events.vue
index 43e5050d4..cfd57b40b 100644
--- a/examples/sites/demos/pc/app/date-picker/events.vue
+++ b/examples/sites/demos/pc/app/date-picker/events.vue
@@ -1,20 +1,18 @@
 <template>
   <tiny-layout>
-    <tiny-row>
-      <tiny-col :span="4">
+    <tiny-row class="demo-row">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">focus:</label>
         <tiny-date-picker v-model="valueFocus" @focus="handleFocus"></tiny-date-picker>
       </tiny-col>
-      <tiny-col :span="4">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">blur:</label>
         <tiny-date-picker v-model="valueBlur" @blur="handleBlur"></tiny-date-picker>
       </tiny-col>
-      <tiny-col :span="4">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">change:</label>
         <tiny-date-picker v-model="valueChange" @change="handleChange"></tiny-date-picker>
       </tiny-col>
-    </tiny-row>
-    <tiny-row>
       <tiny-col :span="6">
         <label class="demo-date-picker-label">onPick:</label>
         <tiny-date-picker v-model="valueOnPick" type="daterange" :picker-options="pickerOptions"></tiny-date-picker>
@@ -64,6 +62,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-row {
+  width: 80%;
+}
 .demo-date-picker-label {
   display: inline-block;
   margin: 12px 0;
diff --git a/examples/sites/demos/pc/app/date-picker/filter-mode-composition-api.vue b/examples/sites/demos/pc/app/date-picker/filter-mode-composition-api.vue
index 8ba0f5f5c..4060ab38b 100644
--- a/examples/sites/demos/pc/app/date-picker/filter-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/filter-mode-composition-api.vue
@@ -15,7 +15,7 @@ const rangeValue = ref('')
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/filter-mode.vue b/examples/sites/demos/pc/app/date-picker/filter-mode.vue
index 0c6a02341..95fb1a2cf 100644
--- a/examples/sites/demos/pc/app/date-picker/filter-mode.vue
+++ b/examples/sites/demos/pc/app/date-picker/filter-mode.vue
@@ -23,7 +23,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/format-composition-api.vue b/examples/sites/demos/pc/app/date-picker/format-composition-api.vue
index 3fcfe2f86..7cf801e17 100644
--- a/examples/sites/demos/pc/app/date-picker/format-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/format-composition-api.vue
@@ -35,7 +35,7 @@ const selectedValue = ref(1590076800000)
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/format.vue b/examples/sites/demos/pc/app/date-picker/format.vue
index dc261fbbc..13793993f 100644
--- a/examples/sites/demos/pc/app/date-picker/format.vue
+++ b/examples/sites/demos/pc/app/date-picker/format.vue
@@ -43,7 +43,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/label-inside-composition-api.vue b/examples/sites/demos/pc/app/date-picker/label-inside-composition-api.vue
index 4a474e0a1..b180b2c60 100644
--- a/examples/sites/demos/pc/app/date-picker/label-inside-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/label-inside-composition-api.vue
@@ -15,14 +15,7 @@ const dateRangeValue = ref([])
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
-    width: 360px;
-  }
-  :deep(.tiny-range__close-icon) {
-    right: -4px;
-  }
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/label-inside.vue b/examples/sites/demos/pc/app/date-picker/label-inside.vue
index e3acbf2c2..9afb2e407 100644
--- a/examples/sites/demos/pc/app/date-picker/label-inside.vue
+++ b/examples/sites/demos/pc/app/date-picker/label-inside.vue
@@ -23,14 +23,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
-    width: 360px;
-  }
-  :deep(.tiny-range__close-icon) {
-    right: -4px;
-  }
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/multiple-dates-composition-api.vue b/examples/sites/demos/pc/app/date-picker/multiple-dates-composition-api.vue
index 192986e63..c5eea6005 100644
--- a/examples/sites/demos/pc/app/date-picker/multiple-dates-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/multiple-dates-composition-api.vue
@@ -15,7 +15,7 @@ const yearsValue = ref('')
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/multiple-dates.vue b/examples/sites/demos/pc/app/date-picker/multiple-dates.vue
index c2f17b9ae..2ae98f9d9 100644
--- a/examples/sites/demos/pc/app/date-picker/multiple-dates.vue
+++ b/examples/sites/demos/pc/app/date-picker/multiple-dates.vue
@@ -23,7 +23,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/now-composition-api.vue b/examples/sites/demos/pc/app/date-picker/now-composition-api.vue
index 562ff831b..efbdba864 100644
--- a/examples/sites/demos/pc/app/date-picker/now-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/now-composition-api.vue
@@ -38,7 +38,7 @@ const now = () => {
 
 <style scoped>
 .demo-date-picker {
-  width: 280px;
+  width: 360px;
 }
 .nowclass {
   display: inline-flex;
diff --git a/examples/sites/demos/pc/app/date-picker/now.vue b/examples/sites/demos/pc/app/date-picker/now.vue
index 565d0a3ab..fabf39748 100644
--- a/examples/sites/demos/pc/app/date-picker/now.vue
+++ b/examples/sites/demos/pc/app/date-picker/now.vue
@@ -46,7 +46,7 @@ export default {
 
 <style scoped>
 .demo-date-picker {
-  width: 280px;
+  width: 360px;
 }
 .nowclass {
   display: inline-flex;
diff --git a/examples/sites/demos/pc/app/date-picker/size-composition-api.vue b/examples/sites/demos/pc/app/date-picker/size-composition-api.vue
index 87eb54732..5f4031989 100644
--- a/examples/sites/demos/pc/app/date-picker/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/size-composition-api.vue
@@ -48,12 +48,7 @@ const radioValue = ref('default')
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
-    width: 360px;
-  }
-
+  width: 360px;
   & > * {
     margin-top: 12px;
   }
diff --git a/examples/sites/demos/pc/app/date-picker/size.vue b/examples/sites/demos/pc/app/date-picker/size.vue
index e7d905681..88d6c0db1 100644
--- a/examples/sites/demos/pc/app/date-picker/size.vue
+++ b/examples/sites/demos/pc/app/date-picker/size.vue
@@ -58,12 +58,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
-    width: 360px;
-  }
-
+  width: 360px;
   & > * {
     margin-top: 12px;
   }
diff --git a/examples/sites/demos/pc/app/date-picker/step-composition-api.vue b/examples/sites/demos/pc/app/date-picker/step-composition-api.vue
index e0e4757f1..2e9335f34 100644
--- a/examples/sites/demos/pc/app/date-picker/step-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/step-composition-api.vue
@@ -35,6 +35,6 @@ const value = ref('')
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/step.vue b/examples/sites/demos/pc/app/date-picker/step.vue
index 89c931bb1..5711111cb 100644
--- a/examples/sites/demos/pc/app/date-picker/step.vue
+++ b/examples/sites/demos/pc/app/date-picker/step.vue
@@ -36,6 +36,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue b/examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue
index db8ec4022..91853e619 100644
--- a/examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue
@@ -45,6 +45,6 @@ function selectChange(tz) {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/timezone.vue b/examples/sites/demos/pc/app/date-picker/timezone.vue
index 08c63bba5..22122c993 100644
--- a/examples/sites/demos/pc/app/date-picker/timezone.vue
+++ b/examples/sites/demos/pc/app/date-picker/timezone.vue
@@ -55,6 +55,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/unlink-panels-composition-api.vue b/examples/sites/demos/pc/app/date-picker/unlink-panels-composition-api.vue
index 5c74fffe1..2c2c41198 100644
--- a/examples/sites/demos/pc/app/date-picker/unlink-panels-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/unlink-panels-composition-api.vue
@@ -24,6 +24,6 @@ const value = ref([])
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/unlink-panels.vue b/examples/sites/demos/pc/app/date-picker/unlink-panels.vue
index 8aa7ab504..41337b636 100644
--- a/examples/sites/demos/pc/app/date-picker/unlink-panels.vue
+++ b/examples/sites/demos/pc/app/date-picker/unlink-panels.vue
@@ -32,6 +32,6 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/validate-event-composition-api.vue b/examples/sites/demos/pc/app/date-picker/validate-event-composition-api.vue
index 71a65a8de..6b957c22f 100644
--- a/examples/sites/demos/pc/app/date-picker/validate-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/validate-event-composition-api.vue
@@ -76,7 +76,7 @@ function resetForm() {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 400px;
+  width: 360px;
 
   :deep(.tiny-form-item .tiny-form-item) {
     margin-bottom: 8px;
diff --git a/examples/sites/demos/pc/app/date-picker/validate-event.vue b/examples/sites/demos/pc/app/date-picker/validate-event.vue
index 618806bc9..574503ca2 100644
--- a/examples/sites/demos/pc/app/date-picker/validate-event.vue
+++ b/examples/sites/demos/pc/app/date-picker/validate-event.vue
@@ -88,7 +88,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 400px;
+  width: 360px;
 
   :deep(.tiny-form-item .tiny-form-item) {
     margin-bottom: 8px;
diff --git a/examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue
index 0a28991df..cbfcb0dad 100644
--- a/examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue
@@ -16,7 +16,7 @@
 import { ref } from 'vue'
 import { TinyTimePicker } from '@opentiny/vue'
 
-const value1 = ref(new Date(2016, 9, 10, 18, 40))
+const value1 = ref(new Date(2016, 9, 10, 18, 40, 20))
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/time-picker/basic-usage.spec.ts b/examples/sites/demos/pc/app/time-picker/basic-usage.spec.ts
index 7c32637c8..681e3c76e 100644
--- a/examples/sites/demos/pc/app/time-picker/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/time-picker/basic-usage.spec.ts
@@ -5,15 +5,15 @@ test('时间选择器基本用法', async ({ page }) => {
   await page.goto('time-picker#basic-usage')
 
   // 测试滚动选择时间
-  const timePicker = page.getByRole('textbox', { name: '18:42:00' }).first()
-  await page.getByRole('textbox', { name: '18:40:00' }).first().click()
+  const timePicker = page.getByRole('textbox', { name: '18:42:20' }).first()
+  await page.getByRole('textbox', { name: '18:40:20' }).first().click()
   await page.getByRole('listitem').filter({ hasText: '42' }).first().click()
   await page.getByRole('button', { name: '确定' }).click()
   await expect(timePicker).toBeVisible()
 
   // 测试箭头选择时间
-  const timePickerArrowControl = page.getByRole('textbox', { name: '19:42:00' }).nth(1)
-  await page.getByRole('textbox', { name: '18:42:00' }).nth(1).click()
+  const timePickerArrowControl = page.getByRole('textbox', { name: '19:42:20' }).nth(1)
+  await page.getByRole('textbox', { name: '18:42:20' }).nth(1).click()
   await page.locator('.tiny-time-spinner__wrapper > i:nth-child(2)').first().click()
   await page.getByRole('button', { name: '确定' }).click()
   await expect(timePickerArrowControl).toBeVisible()
diff --git a/examples/sites/demos/pc/app/time-picker/basic-usage.vue b/examples/sites/demos/pc/app/time-picker/basic-usage.vue
index 2e1602edf..0b868cc96 100644
--- a/examples/sites/demos/pc/app/time-picker/basic-usage.vue
+++ b/examples/sites/demos/pc/app/time-picker/basic-usage.vue
@@ -21,7 +21,7 @@ export default {
   },
   data() {
     return {
-      value1: new Date(2016, 9, 10, 18, 40)
+      value1: new Date(2016, 9, 10, 18, 40, 20)
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/time-picker/is-range-composition-api.vue b/examples/sites/demos/pc/app/time-picker/is-range-composition-api.vue
index 10afbe4ea..4ebff0709 100644
--- a/examples/sites/demos/pc/app/time-picker/is-range-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/is-range-composition-api.vue
@@ -16,6 +16,6 @@ const value1 = ref([startTime, endTime])
 
 <style scoped lang="less">
 .demo-time-picker-wrap {
-  width: 360px;
+  width: 280px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/is-range.vue b/examples/sites/demos/pc/app/time-picker/is-range.vue
index 55fb4243f..4f0b474e9 100644
--- a/examples/sites/demos/pc/app/time-picker/is-range.vue
+++ b/examples/sites/demos/pc/app/time-picker/is-range.vue
@@ -24,6 +24,6 @@ export default {
 
 <style scoped lang="less">
 .demo-time-picker-wrap {
-  width: 360px;
+  width: 280px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/webdoc/time-picker.js b/examples/sites/demos/pc/app/time-picker/webdoc/time-picker.js
index 8093293f6..a8616d485 100644
--- a/examples/sites/demos/pc/app/time-picker/webdoc/time-picker.js
+++ b/examples/sites/demos/pc/app/time-picker/webdoc/time-picker.js
@@ -22,7 +22,7 @@ export default {
         'en-US': 'Select time range'
       },
       desc: {
-        'zh-CN': '<p><code>picker-options</code> 设置固定时间范围</p>',
+        'zh-CN': '<p>通过<code>picker-options</code> 设置固定时间范围</p>',
         'en-US': '<p><code>picker-options</code> Setting a fixed time range.</p>'
       },
       codeFiles: ['picker-options.vue']
@@ -35,7 +35,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          "<p><code>is-range</code> 设置是否为范围选择，默认为 false，<code>range-separator</code>，设置范围选择分隔符（为可选值）默认为 '-'。</p>",
+          "<p>通过<code>is-range</code> 设置是否为范围选择，默认为 false，通过<code>range-separator</code>设置范围选择分隔符（为可选值）默认为 '-'。</p>",
         'en-US':
           "<p><code> is-range </code> whether the setting is range selection. Default is false, <code> range-separator </code>, and the range selection delimiter (optional) defaults to'-'.</p>"
       },
diff --git a/packages/theme/src/picker/index.less b/packages/theme/src/picker/index.less
index 888a7dede..071963234 100644
--- a/packages/theme/src/picker/index.less
+++ b/packages/theme/src/picker/index.less
@@ -114,21 +114,17 @@
       width: 12%;
     }
 
-    .@{range-prefix-cls}__close-box {
-      height: 16px;
-      z-index: 5;
-      position: relative;
-    }
-
     .@{range-prefix-cls}__close-icon {
-      width: 20px;
-      height: 18px;
+      width: 16px;
+      height: 16px;
       position: absolute;
-      right: -20px;
+      top: 16px;
+      right: 12px;
+      transform: translateY(-50%);
       background-color: #ffffff;
-      margin-top: -1px;
-
-      &,
+      fill: var(--tv-Picker-icon-color);
+      z-index: 5;
+      
       &:hover {
         fill: var(--tv-Picker-icon-color-hover);
       }
@@ -177,7 +173,7 @@
     }
 
     .@{range-prefix-cls}-separator {
-      line-height: 28px;
+      line-height: 20px;
       font-size: var(--tv-Picker-font-size);
     }
 
diff --git a/packages/theme/src/time-panel/index.less b/packages/theme/src/time-panel/index.less
index 45663d660..61a26e12a 100644
--- a/packages/theme/src/time-panel/index.less
+++ b/packages/theme/src/time-panel/index.less
@@ -36,13 +36,10 @@
     display: block;
   }
 
-  &__header-input {
-    margin: var(--tv-TimePanel-header-margin);
-  }
-
   &__header-title {
     display: flex;
     justify-content: space-around;
+    margin: var(--tv-TimePanel-header-margin);
     color: var(--tv-TimePanel-header-text-color);
     align-items: center;
   }
diff --git a/packages/theme/src/time-panel/vars.less b/packages/theme/src/time-panel/vars.less
index e74010011..fcb84b88c 100644
--- a/packages/theme/src/time-panel/vars.less
+++ b/packages/theme/src/time-panel/vars.less
@@ -29,7 +29,7 @@
   --tv-TimePanel-border-color-divider: var(--tv-color-border-divider, #f0f0f0);
 
   // 头部外间距
-  --tv-TimePanel-header-margin: var(--tv-space-xl, 16px) 2px 24px 2px;
+  --tv-TimePanel-header-margin: var(--tv-space-xl, 16px) 2px 0 2px;
   // 头部文本色
   --tv-TimePanel-header-text-color: var(--tv-color-text-weaken, #808080);
   // 内容区底部内间距
diff --git a/packages/theme/src/time-spinner/index.less b/packages/theme/src/time-spinner/index.less
index 21085ceb0..d21a9901f 100644
--- a/packages/theme/src/time-spinner/index.less
+++ b/packages/theme/src/time-spinner/index.less
@@ -54,6 +54,9 @@
     }
 
     .@{time-spinner-prefix-cls}__list {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
       transform: translateY(-6px);
       margin: var(--tv-TimeSpinner-list-margin);
     }
@@ -64,7 +67,12 @@
       }
     }
   }
-
+  &__wrapper.is-arrow {
+    height: 220px;
+  }
+  &__wrapper.is-arrow .@{time-spinner-prefix-cls}__list{
+    height: 200px;
+  }
   &__arrow {
     height: 30px;
     line-height: 30px;
diff --git a/packages/vue/src/picker/package.json b/packages/vue/src/picker/package.json
index 8bbfb0e4e..dafa464fd 100644
--- a/packages/vue/src/picker/package.json
+++ b/packages/vue/src/picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-picker",
-  "version": "3.19.0",
+  "version": "3.19.1",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/picker/src/pc.vue b/packages/vue/src/picker/src/pc.vue
index f5407f9ef..02a3a3ec2 100644
--- a/packages/vue/src/picker/src/pc.vue
+++ b/packages/vue/src/picker/src/pc.vue
@@ -120,11 +120,11 @@
       />
       <i class="tiny-input__icon tiny-input__icon">
         <transition name="tiny-transition-icon-scale-in">
-          <div v-if="state.haveTrigger" class="tiny-range__close-box">
+          <div v-if="state.haveTrigger">
             <component
               :is="state.showClose ? clearIcon : null"
               @click="handleClickIcon"
-              class="baseClearicon tiny-range__close-icon"
+              class="tiny-range__close-icon"
             />
           </div>
         </transition>
diff --git a/packages/vue/src/time/package.json b/packages/vue/src/time/package.json
index b1c352d8a..4abe6246a 100644
--- a/packages/vue/src/time/package.json
+++ b/packages/vue/src/time/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-time",
-  "version": "3.19.0",
+  "version": "3.19.1",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/time/src/pc.vue b/packages/vue/src/time/src/pc.vue
index 6a29bd7de..6b6a1a4fc 100644
--- a/packages/vue/src/time/src/pc.vue
+++ b/packages/vue/src/time/src/pc.vue
@@ -13,9 +13,6 @@
   <transition name="tiny-zoom-in-top" @after-leave="$emit('dodestroy')">
     <div v-show="state.visible" class="tiny-time tiny-time-panel tiny-popper" :class="state.popperClass">
       <div class="tiny-time-panel__header">
-        <div class="tiny-time-panel__header-input">
-          <tiny-input v-model="state.displayValue" :placeholder="state.format"></tiny-input>
-        </div>
         <div class="tiny-time-panel__header-title">
           <span>{{ t('ui.datepicker.hour') }}</span>
           <span>{{ t('ui.datepicker.minute') }}</span>
@@ -58,14 +55,12 @@
 import { renderless, api } from '@opentiny/vue-renderless/time/vue'
 import { props, setup, defineComponent } from '@opentiny/vue-common'
 import TimeSpinner from '@opentiny/vue-time-spinner'
-import Input from '@opentiny/vue-input'
 import Button from '@opentiny/vue-button'
 
 export default defineComponent({
   emits: ['dodestroy', 'pick', 'select-range'],
   components: {
     TimeSpinner,
-    TinyInput: Input,
     TinyButton: Button
   },
   props: [...props, 'show', 'timeArrowControl', 'emitter', 'value', 'step'],

From f4ca5364f832af218d56dbaeea8aba973a76e385 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=94=B3=E5=90=9B=E5=81=A5?= <40288193@qq.com>
Date: Tue, 29 Oct 2024 10:53:16 +0800
Subject: [PATCH 16/65] fix(tag): update tag's padding,border-radius (#2458)

---
 packages/theme/src/tag/vars.less | 33 +++++++++++++++++---------------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/packages/theme/src/tag/vars.less b/packages/theme/src/tag/vars.less
index efca52721..baaecfd7f 100644
--- a/packages/theme/src/tag/vars.less
+++ b/packages/theme/src/tag/vars.less
@@ -15,13 +15,16 @@
   // 标签字体的行高
   --tv-Tag-line-height: var(--tv-line-height-number);
 
-  //------------------------------------------------------- 尺寸 场景：fontsize, border-radius ,padding-x,y   -------
+  //------------------------------------------------------- 尺寸 场景：font-size, border-radius ,padding-x,y   -------
+
+  /** 由于 tag 有border的，所有的padding值比设计图减少1 */
+
   // 超小标签字号
-  --tv-Tag-font-size-mini: 10px;
+  --tv-Tag-font-size-mini: var(--tv-font-size-sm);
   // 超小标签水平间距
-  --tv-Tag-padding-x-mini: var(--tv-space-sm);
+  --tv-Tag-padding-x-mini: 3px;
   // 超小标签垂直间距
-  --tv-Tag-padding-y-mini: 0.5px;
+  --tv-Tag-padding-y-mini: 0;
   // 超小标签圆角
   --tv-Tag-border-radius-mini: var(--tv-border-radius-xs);
   // 标签在仅图标模式时，图标的大小
@@ -32,41 +35,41 @@
   // 小型标签字号
   --tv-Tag-font-size-small: var(--tv-font-size-sm);
   // 小型标签水平间距
-  --tv-Tag-padding-x-small: var(--tv-space-sm);
+  --tv-Tag-padding-x-small: 7px;
   // 小型标签垂直间距
-  --tv-Tag-padding-y-small: 0;
+  --tv-Tag-padding-y-small: 2px;
   // 小型标签圆角
-  --tv-Tag-border-radius-small: var(--tv-border-radius-xs);
+  --tv-Tag-border-radius-small: var(--tv-border-radius-sm);
   // 标签在仅图标模式时，图标的大小
   --tv-Tag-only-icon-font-size-small: 14px;
   // 标签在仅图标模式时，标签的内边距
-  --tv-Tag-only-icon-padding-small: 2px;
+  --tv-Tag-only-icon-padding-small: 0.5px;
 
   // 默认标签字号
   --tv-Tag-font-size: var(--tv-font-size-md);
   // 默认标签水平间距
-  --tv-Tag-padding-x: var(--tv-space-md);
+  --tv-Tag-padding-x: 11px;
   // 默认标签垂直间距
-  --tv-Tag-padding-y: 0.5px;
+  --tv-Tag-padding-y: 2.5px;
   // 默认标签圆角
-  --tv-Tag-border-radius: var(--tv-border-radius-sm);
+  --tv-Tag-border-radius: var(--tv-border-radius-md);
   // 标签在仅图标模式时，图标的大小
   --tv-Tag-only-icon-font-size: 16px;
   // 标签在仅图标模式时，标签的内边距
   --tv-Tag-only-icon-padding: 3px;
 
   // 中等标签字号
-  --tv-Tag-font-size-medium: var(--tv-font-size-md);
+  --tv-Tag-font-size-medium: var(--tv-font-size-md); //14
   // 中等标签水平间距
-  --tv-Tag-padding-x-medium: var(--tv-space-lg);
+  --tv-Tag-padding-x-medium: 11px;
   // 中等标签垂直间距
   --tv-Tag-padding-y-medium: 4.5px;
   // 中等标签圆角
   --tv-Tag-border-radius-medium: var(--tv-border-radius-md);
   // 标签在仅图标模式时，图标的大小
-  --tv-Tag-only-icon-font-size-medium: 20px;
+  --tv-Tag-only-icon-font-size-medium: 16px;
   // 标签在仅图标模式时，标签的内边距
-  --tv-Tag-only-icon-padding-medium: 5px;
+  --tv-Tag-only-icon-padding-medium: 7px;
 
   //------------------------------------------------------- 颜色 场景：（1、考虑border，虽然cloud design没有，但适配其它肯定有border的) ----
 

From ff15e194e663587fb807c5c6a370c88b511757f3 Mon Sep 17 00:00:00 2001
From: gimmyhehe <975402925@qq.com>
Date: Tue, 29 Oct 2024 11:28:20 +0800
Subject: [PATCH 17/65] docs(grid): [grid] optimize grid demos and e2e (#2457)

* docs(grid): [grid] optimize grid demos and e2e

* fix(grid): fix grid demo
---
 .../grid/context-menu/cell-menu-composition-api.vue    |  1 +
 .../sites/demos/pc/app/grid/context-menu/cell-menu.vue |  1 +
 .../grid/context-menu/footer-menu-composition-api.vue  |  1 +
 .../demos/pc/app/grid/context-menu/footer-menu.vue     |  1 +
 .../grid/context-menu/header-menu-composition-api.vue  |  1 +
 .../demos/pc/app/grid/context-menu/header-menu.vue     |  1 +
 .../context-menu/menu-permissions-composition-api.vue  |  1 +
 .../pc/app/grid/context-menu/menu-permissions.vue      |  1 +
 .../app/grid/data-source/columns-composition-api.vue   |  2 +-
 .../sites/demos/pc/app/grid/data-source/columns.vue    |  2 +-
 .../dynamically-columns-composition-api.vue            |  6 ++++++
 .../grid/dynamically-columns/dynamically-columns.vue   |  6 ++++++
 .../pc/app/grid/event/click-event-composition-api.vue  |  1 +
 examples/sites/demos/pc/app/grid/event/click-event.vue |  1 +
 .../grid/event/context-menu-event-composition-api.vue  |  1 +
 .../demos/pc/app/grid/event/context-menu-event.vue     |  1 +
 .../grid/event/valid-error-event-composition-api.vue   |  1 +
 .../demos/pc/app/grid/event/valid-error-event.vue      |  1 +
 .../column-anchor-clear-active-composition-api.vue     |  2 +-
 .../app/grid/large-data/column-anchor-clear-active.vue |  2 +-
 .../grid/large-data/column-anchor-composition-api.vue  |  2 +-
 .../demos/pc/app/grid/large-data/column-anchor.vue     |  2 +-
 .../app/grid/large-data/scroll-to-composition-api.vue  |  2 +-
 .../sites/demos/pc/app/grid/large-data/scroll-to.vue   |  2 +-
 .../loading/grid-custom-loading-composition-api.vue    |  4 ++--
 .../pc/app/grid/loading/grid-custom-loading.spec.js    |  2 +-
 .../demos/pc/app/grid/loading/grid-custom-loading.vue  |  4 ++--
 .../selection-operation-composition-api.vue            | 10 +++++-----
 .../grid/operation-column/selection-operation.spec.js  | 10 +++++-----
 .../app/grid/operation-column/selection-operation.vue  | 10 +++++-----
 .../grid/size/fixed-column-width-composition-api.vue   |  4 ++--
 .../demos/pc/app/grid/size/fixed-column-width.spec.js  |  2 +-
 .../demos/pc/app/grid/size/fixed-column-width.vue      |  4 ++--
 examples/sites/src/views/layout/layout.vue             |  2 +-
 packages/theme/src/grid/table.less                     |  2 --
 35 files changed, 60 insertions(+), 36 deletions(-)

diff --git a/examples/sites/demos/pc/app/grid/context-menu/cell-menu-composition-api.vue b/examples/sites/demos/pc/app/grid/context-menu/cell-menu-composition-api.vue
index 42208c380..37267eba0 100644
--- a/examples/sites/demos/pc/app/grid/context-menu/cell-menu-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/context-menu/cell-menu-composition-api.vue
@@ -7,6 +7,7 @@
         body: { options: bodyMenus },
         visibleMethod
       }"
+      show-overflow="tooltip"
       @cell-context-menu="cellContextMenuEvent"
       @context-menu-click="contextMenuClickEvent"
     >
diff --git a/examples/sites/demos/pc/app/grid/context-menu/cell-menu.vue b/examples/sites/demos/pc/app/grid/context-menu/cell-menu.vue
index 3c4166771..6c39c228c 100644
--- a/examples/sites/demos/pc/app/grid/context-menu/cell-menu.vue
+++ b/examples/sites/demos/pc/app/grid/context-menu/cell-menu.vue
@@ -7,6 +7,7 @@
         body: { options: bodyMenus },
         visibleMethod
       }"
+      show-overflow="tooltip"
       @cell-context-menu="cellContextMenuEvent"
       @context-menu-click="contextMenuClickEvent"
     >
diff --git a/examples/sites/demos/pc/app/grid/context-menu/footer-menu-composition-api.vue b/examples/sites/demos/pc/app/grid/context-menu/footer-menu-composition-api.vue
index 0f14bc5e1..eb59c2178 100644
--- a/examples/sites/demos/pc/app/grid/context-menu/footer-menu-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/context-menu/footer-menu-composition-api.vue
@@ -7,6 +7,7 @@
         footer: { options: footerMenus },
         visibleMethod
       }"
+      show-overflow="tooltip"
       show-footer
       :footer-method="footerMethod"
       @context-menu-click="contextMenuClickEvent"
diff --git a/examples/sites/demos/pc/app/grid/context-menu/footer-menu.vue b/examples/sites/demos/pc/app/grid/context-menu/footer-menu.vue
index ce6e99614..d77b9d577 100644
--- a/examples/sites/demos/pc/app/grid/context-menu/footer-menu.vue
+++ b/examples/sites/demos/pc/app/grid/context-menu/footer-menu.vue
@@ -7,6 +7,7 @@
         footer: { options: footerMenus },
         visibleMethod
       }"
+      show-overflow="tooltip"
       show-footer
       :footer-method="footerMethod"
       @context-menu-click="contextMenuClickEvent"
diff --git a/examples/sites/demos/pc/app/grid/context-menu/header-menu-composition-api.vue b/examples/sites/demos/pc/app/grid/context-menu/header-menu-composition-api.vue
index 037c8c846..a4f3eed7b 100644
--- a/examples/sites/demos/pc/app/grid/context-menu/header-menu-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/context-menu/header-menu-composition-api.vue
@@ -6,6 +6,7 @@
         header: { options: headerMenus },
         visibleMethod
       }"
+      show-overflow="tooltip"
       @context-menu-click="contextMenuClickEvent"
     >
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/context-menu/header-menu.vue b/examples/sites/demos/pc/app/grid/context-menu/header-menu.vue
index 31b760360..150ccced1 100644
--- a/examples/sites/demos/pc/app/grid/context-menu/header-menu.vue
+++ b/examples/sites/demos/pc/app/grid/context-menu/header-menu.vue
@@ -6,6 +6,7 @@
         header: { options: headerMenus },
         visibleMethod
       }"
+      show-overflow="tooltip"
       @context-menu-click="contextMenuClickEvent"
     >
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/context-menu/menu-permissions-composition-api.vue b/examples/sites/demos/pc/app/grid/context-menu/menu-permissions-composition-api.vue
index 27425e53f..d41e5bfd3 100644
--- a/examples/sites/demos/pc/app/grid/context-menu/menu-permissions-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/context-menu/menu-permissions-composition-api.vue
@@ -9,6 +9,7 @@
         visibleMethod
       }"
       show-footer
+      show-overflow="tooltip"
       :footer-method="footerMethod"
       @cell-context-menu="cellContextMenuEvent"
       @context-menu-click="contextMenuClickEvent"
diff --git a/examples/sites/demos/pc/app/grid/context-menu/menu-permissions.vue b/examples/sites/demos/pc/app/grid/context-menu/menu-permissions.vue
index 334508ecb..6f39c6e10 100644
--- a/examples/sites/demos/pc/app/grid/context-menu/menu-permissions.vue
+++ b/examples/sites/demos/pc/app/grid/context-menu/menu-permissions.vue
@@ -9,6 +9,7 @@
         visibleMethod
       }"
       show-footer
+      show-overflow="tooltip"
       :footer-method="footerMethod"
       @cell-context-menu="cellContextMenuEvent"
       @context-menu-click="contextMenuClickEvent"
diff --git a/examples/sites/demos/pc/app/grid/data-source/columns-composition-api.vue b/examples/sites/demos/pc/app/grid/data-source/columns-composition-api.vue
index 4047cd00c..16f5d8b84 100644
--- a/examples/sites/demos/pc/app/grid/data-source/columns-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/data-source/columns-composition-api.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-grid :columns="columnsData" :data="tableData" ref="theGridRef"> </tiny-grid>
+    <tiny-grid :columns="columnsData" :data="tableData" ref="theGridRef" show-overflow="tooltip"> </tiny-grid>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/grid/data-source/columns.vue b/examples/sites/demos/pc/app/grid/data-source/columns.vue
index b72ba3521..9eec19694 100644
--- a/examples/sites/demos/pc/app/grid/data-source/columns.vue
+++ b/examples/sites/demos/pc/app/grid/data-source/columns.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-grid :columns="columnsData" :data="tableData" ref="theGrid"> </tiny-grid>
+    <tiny-grid :columns="columnsData" :data="tableData" ref="theGrid" show-overflow="tooltip"> </tiny-grid>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns-composition-api.vue b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns-composition-api.vue
index d0acfe321..70255d8c4 100644
--- a/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns-composition-api.vue
@@ -222,3 +222,9 @@ function getMonthBetween(start, end) {
   return result
 }
 </script>
+
+<style scoped>
+:deep(.tiny-picker) {
+  width: 300px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns.vue b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns.vue
index dbb4a383f..1f3e25e91 100644
--- a/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns.vue
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns.vue
@@ -228,3 +228,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+:deep(.tiny-picker) {
+  width: 300px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/event/click-event-composition-api.vue b/examples/sites/demos/pc/app/grid/event/click-event-composition-api.vue
index b6ba51748..7394a6a99 100644
--- a/examples/sites/demos/pc/app/grid/event/click-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/event/click-event-composition-api.vue
@@ -10,6 +10,7 @@
       @footer-cell-dblclick="footerCellDbClick"
       :footer-method="footerMethod"
       show-footer
+      show-overflow="tooltip"
     >
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column field="name" title="名称"></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/event/click-event.vue b/examples/sites/demos/pc/app/grid/event/click-event.vue
index e9de82ba1..0074d03c5 100644
--- a/examples/sites/demos/pc/app/grid/event/click-event.vue
+++ b/examples/sites/demos/pc/app/grid/event/click-event.vue
@@ -9,6 +9,7 @@
       @footer-cell-click="footerClick"
       @footer-cell-dblclick="footerCellDbClick"
       show-footer
+      show-overflow="tooltip"
       :footer-method="footerMethod"
     >
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/event/context-menu-event-composition-api.vue b/examples/sites/demos/pc/app/grid/event/context-menu-event-composition-api.vue
index 52369c5b3..c716dae97 100644
--- a/examples/sites/demos/pc/app/grid/event/context-menu-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/event/context-menu-event-composition-api.vue
@@ -11,6 +11,7 @@
         visibleMethod
       }"
       show-footer
+      show-overflow="tooltip"
       :footer-method="footerMethod"
       @context-menu-click="contextMenuClickEvent"
     >
diff --git a/examples/sites/demos/pc/app/grid/event/context-menu-event.vue b/examples/sites/demos/pc/app/grid/event/context-menu-event.vue
index 67b8f5f69..9ef72f05c 100644
--- a/examples/sites/demos/pc/app/grid/event/context-menu-event.vue
+++ b/examples/sites/demos/pc/app/grid/event/context-menu-event.vue
@@ -11,6 +11,7 @@
         visibleMethod
       }"
       show-footer
+      show-overflow="tooltip"
       :footer-method="footerMethod"
       @context-menu-click="contextMenuClickEvent"
     >
diff --git a/examples/sites/demos/pc/app/grid/event/valid-error-event-composition-api.vue b/examples/sites/demos/pc/app/grid/event/valid-error-event-composition-api.vue
index d1e2b4725..edeccb727 100644
--- a/examples/sites/demos/pc/app/grid/event/valid-error-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/event/valid-error-event-composition-api.vue
@@ -3,6 +3,7 @@
     <tiny-grid
       :data="tableData"
       @valid-error="validError"
+      show-overflow="tooltip"
       :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
       :edit-rules="validRules"
     >
diff --git a/examples/sites/demos/pc/app/grid/event/valid-error-event.vue b/examples/sites/demos/pc/app/grid/event/valid-error-event.vue
index 793790691..e6f970ce5 100644
--- a/examples/sites/demos/pc/app/grid/event/valid-error-event.vue
+++ b/examples/sites/demos/pc/app/grid/event/valid-error-event.vue
@@ -3,6 +3,7 @@
     <tiny-grid
       :data="tableData"
       @valid-error="validError"
+      show-overflow="tooltip"
       :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
       :edit-rules="validRules"
     >
diff --git a/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active-composition-api.vue b/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active-composition-api.vue
index ade1f7aea..a10465769 100644
--- a/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active-composition-api.vue
@@ -1,7 +1,7 @@
 <template>
   <tiny-grid
     column-min-width="100"
-    auto-resize
+    show-overflow="tooltip"
     :column-anchor="columnAnchor"
     :optimization="{ scrollX: { gt: 20 } }"
     :fetch-data="fetchData"
diff --git a/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active.vue b/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active.vue
index fa4b71c96..065d33cc7 100644
--- a/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active.vue
@@ -1,7 +1,7 @@
 <template>
   <tiny-grid
     column-min-width="100"
-    auto-resize
+    show-overflow="tooltip"
     :column-anchor="columnAnchor"
     :optimization="{ scrollX: { gt: 20 } }"
     :fetch-data="fetchData"
diff --git a/examples/sites/demos/pc/app/grid/large-data/column-anchor-composition-api.vue b/examples/sites/demos/pc/app/grid/large-data/column-anchor-composition-api.vue
index 9534b2f5b..6eaff85b3 100644
--- a/examples/sites/demos/pc/app/grid/large-data/column-anchor-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/column-anchor-composition-api.vue
@@ -3,7 +3,7 @@
     <tiny-grid
       :data="tableData"
       column-min-width="100"
-      auto-resize
+      show-overflow="tooltip"
       :column-anchor="columnAnchor"
       :optimization="{ scrollX: { gt: 20 } }"
       height="auto"
diff --git a/examples/sites/demos/pc/app/grid/large-data/column-anchor.vue b/examples/sites/demos/pc/app/grid/large-data/column-anchor.vue
index 78a7e99f8..a44b8b677 100644
--- a/examples/sites/demos/pc/app/grid/large-data/column-anchor.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/column-anchor.vue
@@ -3,7 +3,7 @@
     <tiny-grid
       :data="tableData"
       column-min-width="100"
-      auto-resize
+      show-overflow="tooltip"
       :column-anchor="columnAnchor"
       :optimization="{ scrollX: { gt: 20 } }"
       height="auto"
diff --git a/examples/sites/demos/pc/app/grid/large-data/scroll-to-composition-api.vue b/examples/sites/demos/pc/app/grid/large-data/scroll-to-composition-api.vue
index 3292fd335..bf69f0acb 100644
--- a/examples/sites/demos/pc/app/grid/large-data/scroll-to-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/scroll-to-composition-api.vue
@@ -6,7 +6,7 @@
       <tiny-button @click="scrollToColumn">滚动到500列</tiny-button>
     </div>
     <br />
-    <tiny-grid ref="tinyGridRef" height="300"> </tiny-grid>
+    <tiny-grid ref="tinyGridRef" height="300" column-width="100"> </tiny-grid>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/grid/large-data/scroll-to.vue b/examples/sites/demos/pc/app/grid/large-data/scroll-to.vue
index fbc5995b3..60460afa1 100644
--- a/examples/sites/demos/pc/app/grid/large-data/scroll-to.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/scroll-to.vue
@@ -6,7 +6,7 @@
       <tiny-button @click="scrollToColumn">滚动到500列</tiny-button>
     </div>
     <br />
-    <tiny-grid ref="tinyGrid" height="300"> </tiny-grid>
+    <tiny-grid ref="tinyGrid" height="300" column-width="100"> </tiny-grid>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/grid/loading/grid-custom-loading-composition-api.vue b/examples/sites/demos/pc/app/grid/loading/grid-custom-loading-composition-api.vue
index 785e5e5fc..ec6d3bc78 100644
--- a/examples/sites/demos/pc/app/grid/loading/grid-custom-loading-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/loading/grid-custom-loading-composition-api.vue
@@ -57,14 +57,14 @@ init()
 
 const loadingComponent = () => (
   <div class="custom-loading">
-    <span>正在加载中。。。</span>
+    <span>正在加载中...</span>
   </div>
 )
 </script>
 
 <style scoped>
 .custom-loading {
-  font-size: 20px;
+  font-size: 16px;
   width: 100%;
   height: 100%;
   display: flex;
diff --git a/examples/sites/demos/pc/app/grid/loading/grid-custom-loading.spec.js b/examples/sites/demos/pc/app/grid/loading/grid-custom-loading.spec.js
index 11c17e982..14913f626 100644
--- a/examples/sites/demos/pc/app/grid/loading/grid-custom-loading.spec.js
+++ b/examples/sites/demos/pc/app/grid/loading/grid-custom-loading.spec.js
@@ -3,5 +3,5 @@ import { test, expect } from '@playwright/test'
 test('自定义表格加载', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-loading#loading-grid-custom-loading')
-  await expect(page.getByText('正在加载中。。。')).toBeVisible()
+  await expect(page.getByText('正在加载中...')).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/grid/loading/grid-custom-loading.vue b/examples/sites/demos/pc/app/grid/loading/grid-custom-loading.vue
index 0396e35dc..b19e8124e 100644
--- a/examples/sites/demos/pc/app/grid/loading/grid-custom-loading.vue
+++ b/examples/sites/demos/pc/app/grid/loading/grid-custom-loading.vue
@@ -32,7 +32,7 @@ export default {
     loadingComponent() {
       return (
         <div class="custom-loading">
-          <span>正在加载中。。。</span>
+          <span>正在加载中...</span>
         </div>
       )
     },
@@ -77,7 +77,7 @@ export default {
 
 <style scoped>
 .custom-loading {
-  font-size: 20px;
+  font-size: 16px;
   width: 100%;
   height: 100%;
   display: flex;
diff --git a/examples/sites/demos/pc/app/grid/operation-column/selection-operation-composition-api.vue b/examples/sites/demos/pc/app/grid/operation-column/selection-operation-composition-api.vue
index efa9150e2..6dce701c5 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/selection-operation-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/selection-operation-composition-api.vue
@@ -19,23 +19,23 @@ import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 const toolbarButtons = ref([
   {
     code: 'clearSelection',
-    name: '手动取消多选行'
+    name: '取消多选行'
   },
   {
     code: 'setAllSelection',
-    name: '手动选中所有行'
+    name: '选中所有行'
   },
   {
     code: 'setSelection',
-    name: '手动选中指定行'
+    name: '选中指定行'
   },
   {
     code: 'toggleAllSelection',
-    name: '手动切换所有行选中状态'
+    name: '切换所有行选中状态'
   },
   {
     code: 'toggleRowSelection',
-    name: '手动切换指定行选中状态'
+    name: '切换指定行选中状态'
   }
 ])
 const tableData = ref([
diff --git a/examples/sites/demos/pc/app/grid/operation-column/selection-operation.spec.js b/examples/sites/demos/pc/app/grid/operation-column/selection-operation.spec.js
index e823b8922..ceb6d6b73 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/selection-operation.spec.js
+++ b/examples/sites/demos/pc/app/grid/operation-column/selection-operation.spec.js
@@ -3,18 +3,18 @@ import { test, expect } from '@playwright/test'
 test('多选项操作', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-operation-column#operation-column-selection-operation')
-  await page.getByRole('button', { name: '手动选中指定行' }).click()
+  await page.getByRole('button', { name: '选中指定行' }).click()
   await expect(page.locator('.tiny-grid-body__row').nth(4).locator('input')).toBeChecked()
-  await page.getByRole('button', { name: '手动切换指定行选中状态' }).click()
+  await page.getByRole('button', { name: '切换指定行选中状态' }).click()
   await expect(page.locator('.tiny-grid-body__row').nth(1).locator('input')).toBeChecked()
-  await page.getByRole('button', { name: '手动切换指定行选中状态' }).click()
+  await page.getByRole('button', { name: '切换指定行选中状态' }).click()
   await expect(page.locator('.tiny-grid-body__row').nth(1).locator('input')).not.toBeChecked()
 
-  await page.getByRole('button', { name: '手动选中所有行' }).click()
+  await page.getByRole('button', { name: '选中所有行' }).click()
   for (const check of await page.locator('.tiny-grid-checkbox input').all()) {
     await expect(check).toBeChecked()
   }
-  await page.getByRole('button', { name: '手动取消多选行' }).click()
+  await page.getByRole('button', { name: '取消多选行' }).click()
   for (const check of await page.locator('.tiny-grid-checkbox input').all()) {
     await expect(check).not.toBeChecked()
   }
diff --git a/examples/sites/demos/pc/app/grid/operation-column/selection-operation.vue b/examples/sites/demos/pc/app/grid/operation-column/selection-operation.vue
index de6d9d0d8..eb6cb483c 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/selection-operation.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/selection-operation.vue
@@ -26,23 +26,23 @@ export default {
       toolbarButtons: [
         {
           code: 'clearSelection',
-          name: '手动取消多选行'
+          name: '取消多选行'
         },
         {
           code: 'setAllSelection',
-          name: '手动选中所有行'
+          name: '选中所有行'
         },
         {
           code: 'setSelection',
-          name: '手动选中指定行'
+          name: '选中指定行'
         },
         {
           code: 'toggleAllSelection',
-          name: '手动切换所有行选中状态'
+          name: '切换所有行选中状态'
         },
         {
           code: 'toggleRowSelection',
-          name: '手动切换指定行选中状态'
+          name: '切换指定行选中状态'
         }
       ],
       tableData: [
diff --git a/examples/sites/demos/pc/app/grid/size/fixed-column-width-composition-api.vue b/examples/sites/demos/pc/app/grid/size/fixed-column-width-composition-api.vue
index afb6b3f64..c065bf0e4 100644
--- a/examples/sites/demos/pc/app/grid/size/fixed-column-width-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/size/fixed-column-width-composition-api.vue
@@ -1,9 +1,9 @@
 <template>
   <tiny-grid :data="tableData">
     <tiny-grid-column field="name" title="名称" width="150"></tiny-grid-column>
-    <tiny-grid-column field="area" title="所属区域" width="80"></tiny-grid-column>
+    <tiny-grid-column field="area" title="所属区域" width="100"></tiny-grid-column>
     <tiny-grid-column field="address" title="地址" width="20%"></tiny-grid-column>
-    <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    <tiny-grid-column field="introduction" title="公司简介"></tiny-grid-column>
   </tiny-grid>
 </template>
 
diff --git a/examples/sites/demos/pc/app/grid/size/fixed-column-width.spec.js b/examples/sites/demos/pc/app/grid/size/fixed-column-width.spec.js
index c95a816b4..bebe68399 100644
--- a/examples/sites/demos/pc/app/grid/size/fixed-column-width.spec.js
+++ b/examples/sites/demos/pc/app/grid/size/fixed-column-width.spec.js
@@ -4,5 +4,5 @@ test('列属性设置宽度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-size#size-fixed-column-width')
   await expect(page.getByRole('cell', { name: '名称' }).first()).toHaveCSS('width', '150px')
-  await expect(page.getByRole('cell', { name: '所属区域' })).toHaveCSS('width', '80px')
+  await expect(page.getByRole('cell', { name: '所属区域' })).toHaveCSS('width', '100px')
 })
diff --git a/examples/sites/demos/pc/app/grid/size/fixed-column-width.vue b/examples/sites/demos/pc/app/grid/size/fixed-column-width.vue
index f4e52b8fd..dc7e34099 100644
--- a/examples/sites/demos/pc/app/grid/size/fixed-column-width.vue
+++ b/examples/sites/demos/pc/app/grid/size/fixed-column-width.vue
@@ -1,9 +1,9 @@
 <template>
   <tiny-grid :data="tableData">
     <tiny-grid-column field="name" title="名称" width="150"></tiny-grid-column>
-    <tiny-grid-column field="area" title="所属区域" width="80"></tiny-grid-column>
+    <tiny-grid-column field="area" title="所属区域" width="100"></tiny-grid-column>
     <tiny-grid-column field="address" title="地址" width="20%"></tiny-grid-column>
-    <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    <tiny-grid-column field="introduction" title="公司简介"></tiny-grid-column>
   </tiny-grid>
 </template>
 
diff --git a/examples/sites/src/views/layout/layout.vue b/examples/sites/src/views/layout/layout.vue
index abff7aab7..4b0f120a9 100644
--- a/examples/sites/src/views/layout/layout.vue
+++ b/examples/sites/src/views/layout/layout.vue
@@ -290,7 +290,7 @@ export default defineComponent({
   }
 
   .tiny-input {
-    margin: 0 10px 12px;
+    margin: 0 10px 16px;
     width: auto;
     max-width: unset;
   }
diff --git a/packages/theme/src/grid/table.less b/packages/theme/src/grid/table.less
index 10b68ba3f..db22f0187 100644
--- a/packages/theme/src/grid/table.less
+++ b/packages/theme/src/grid/table.less
@@ -905,8 +905,6 @@
     }
 
     .@{grid-prefix-cls}-body__column {
-      .DefaultTdPadding();
-
       &.col__actived {
         padding: 0 var(--tv-Grid-cell-padding-x);
       }

From 6922d1f8646a9e099f974f0d21d728a2e70cc5e7 Mon Sep 17 00:00:00 2001
From: MomoPoppy <125256456+MomoPoppy@users.noreply.github.com>
Date: Mon, 28 Oct 2024 20:29:40 -0700
Subject: [PATCH 18/65] fix(tree-select): add emit modelValue (#2461)

---
 packages/renderless/src/tree-select/index.ts | 12 +++++++++++-
 packages/renderless/src/tree-select/vue.ts   |  6 +++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/renderless/src/tree-select/index.ts b/packages/renderless/src/tree-select/index.ts
index a9a901731..b3da78569 100644
--- a/packages/renderless/src/tree-select/index.ts
+++ b/packages/renderless/src/tree-select/index.ts
@@ -17,16 +17,23 @@ export const nodeClick =
         }
       })
 
+      emit('change', data[props.valueField])
+      emit('update:modelValue', data[props.valueField])
+
       vm.$refs.baseSelectRef.hidePanel()
     }
   }
 
 export const check =
-  ({ props, vm }) =>
+  ({ props, vm, emit }) =>
   (data, { checkedNodes }) => {
     if (props.multiple) {
+      const currentValue = []
+
       vm.$refs.baseSelectRef.updateSelectedData(
         checkedNodes.map((node) => {
+          currentValue.push(node[props.valueField])
+
           return {
             ...node,
             currentLabel: node[props.textField],
@@ -34,5 +41,8 @@ export const check =
           }
         })
       )
+
+      emit('change', currentValue)
+      emit('update:modelValue', currentValue)
     }
   }
diff --git a/packages/renderless/src/tree-select/vue.ts b/packages/renderless/src/tree-select/vue.ts
index 5c01c87d4..ebb2d5123 100644
--- a/packages/renderless/src/tree-select/vue.ts
+++ b/packages/renderless/src/tree-select/vue.ts
@@ -2,11 +2,11 @@ import { filter, nodeClick, check } from './index'
 
 export const api = ['state', 'filter', 'nodeClick', 'check']
 
-export const renderless = (props, { reactive }, { vm }) => {
+export const renderless = (props, { reactive, computed }, { vm, emit }) => {
   const api = {}
 
   const state = reactive({
-    value: props.modelValue,
+    value: computed(() => props.modelValue),
     treeData: props.treeOp.data
   })
 
@@ -14,7 +14,7 @@ export const renderless = (props, { reactive }, { vm }) => {
     state,
     filter: filter({ vm }),
     nodeClick: nodeClick({ props, vm }),
-    check: check({ props, vm })
+    check: check({ props, vm, emit })
   })
 
   return api

From 270a43ed984e093486f734e100537925c8024b56 Mon Sep 17 00:00:00 2001
From: gimmyhehe <975402925@qq.com>
Date: Tue, 29 Oct 2024 11:30:16 +0800
Subject: [PATCH 19/65] refactor(grid): [grid] refactor grid radio style
 (#2462)

---
 packages/theme/src/grid/radio.less | 32 ++++++++++++++++++++++--------
 packages/theme/src/grid/vars.less  |  2 ++
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/packages/theme/src/grid/radio.less b/packages/theme/src/grid/radio.less
index e5563c0c7..5d30f7c9d 100644
--- a/packages/theme/src/grid/radio.less
+++ b/packages/theme/src/grid/radio.less
@@ -47,14 +47,32 @@
     }
 
     &:checked + .@{grid-radio-prefix-cls}__icon {
+      position: relative;
+      width: var(--tv-Grid-icon-size);
+      height: var(--tv-Grid-icon-size);
+      margin: 1px;
+      border: 1px solid var(--tv-Grid-radio-icon-color-selected);
+      border-radius: 100%;
+
+      &::after {
+        content: '';
+        height: 8px;
+        width: 8px;
+        background: var(--tv-Grid-radio-icon-color-selected);
+        position: absolute;
+        border-radius: 100%;
+        top: 50%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%);
+      }
+
       > svg {
         &.icon-radio {
           display: none;
         }
 
         &.icon-radio-selected {
-          display: inline-block;
-          fill: var(--tv-Grid-radio-icon-color-selected);
+          display: none;
         }
       }
 
@@ -70,7 +88,7 @@
     > input {
       & + .@{grid-radio-prefix-cls}__icon {
         > svg {
-          fill: var(--tv-Grid-radio-icon-color-disabled);
+          fill: var(--tv-Grid-radio-border-color-disabled);
 
           path:last-child {
             fill: var(--tv-Grid-radio-icon-color-disabled);
@@ -83,12 +101,10 @@
       }
 
       &:checked + .@{grid-radio-prefix-cls}__icon {
-        > svg {
-          fill: var(--tv-Grid-radio-icon-color-disabled);
+        border-color: var(--tv-Grid-radio-border-color-disabled);
 
-          path:first-child {
-            fill: var(--tv-Grid-radio-icon-color-disabled);
-          }
+        &::after {
+          background: var(--tv-Grid-radio-border-color-disabled);
         }
       }
     }
diff --git a/packages/theme/src/grid/vars.less b/packages/theme/src/grid/vars.less
index a1ee257e3..c9d58e836 100644
--- a/packages/theme/src/grid/vars.less
+++ b/packages/theme/src/grid/vars.less
@@ -124,6 +124,8 @@
   --tv-Grid-radio-icon-color-selected: var(--tv-color-bg-active-control);
   // 单选框禁用颜色
   --tv-Grid-radio-icon-color-disabled: var(--tv-color-bg-disabled);
+  // 单选框禁用边框色
+  --tv-Grid-radio-border-color-disabled: var(--tv-color-border-disabled);
   // -------筛选相关样式-------
   // 筛选一般背景色
   --tv-Grid-filter-bg-color: var(--tv-color-bg);

From 1bc97cdff4572f8da983b505f13373a5b5299975 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Tue, 29 Oct 2024 11:42:27 +0800
Subject: [PATCH 20/65] feat: update svg icon of menu

---
 .../leftMenu/cmp-business-components.svg      | 29 ++++++++++---------
 .../directives-custom-instruction.svg         | 29 ++++++++++---------
 2 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/examples/sites/src/assets/images/leftMenu/cmp-business-components.svg b/examples/sites/src/assets/images/leftMenu/cmp-business-components.svg
index dd9206401..efb1abce0 100644
--- a/examples/sites/src/assets/images/leftMenu/cmp-business-components.svg
+++ b/examples/sites/src/assets/images/leftMenu/cmp-business-components.svg
@@ -1,13 +1,16 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;fill-opacity:0;}
-</style>
-<rect id="矩形" y="0" class="st0" width="12" height="12"/>
-<path id="形状" d="M1.67,3.14C1.52,3.21,1.43,3.35,1.43,3.51c0,0.15,0.09,0.29,0.24,0.36l3.79,1.9c0.28,0.14,0.61,0.14,0.89,0
-	l3.92-1.91c0.14-0.07,0.24-0.21,0.24-0.36c0-0.16-0.09-0.3-0.23-0.37L6.45,1.17c-0.29-0.15-0.62-0.15-0.91,0L1.67,3.14z M6.44,0.11
-	l5.11,2.6C11.83,2.85,12,3.12,12,3.41v5.18c0,0.29-0.17,0.56-0.45,0.7L6.44,11.9c-0.28,0.14-0.6,0.14-0.88,0L0.45,9.29
-	C0.17,9.15,0,8.88,0,8.59V3.41c0-0.29,0.17-0.56,0.45-0.7L5.56,0.1C5.84-0.04,6.16-0.03,6.44,0.11L6.44,0.11L6.44,0.11z"/>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 44</title>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1备份" transform="translate(-28.000000, -1148.000000)">
+            <g id="nav" transform="translate(0.000000, 92.000000)">
+                <g id="left-menu-选项-链接备份-19" transform="translate(28.000000, 1041.000000)">
+                    <g id="编组-44" transform="translate(0.000000, 15.000000)">
+                        <path d="M10.6342334,2.20564972 L9.07833073,2.20564972 L9.07833073,1.53370998 C9.07833073,0.688512241 8.46641375,0 7.71524213,0 L4.28207989,0 C3.53090828,0 2.9189913,0.68700565 2.9189913,1.53370998 L2.9189913,2.20564972 L1.3630886,2.20564972 C0.611916983,2.20564972 0,2.89416196 0,3.7393597 L0,10.46629 C0,11.3114878 0.611916983,12 1.3630886,12 L10.6342334,12 C11.385405,12 11.997322,11.3129944 11.997322,10.46629 L11.997322,7.2165725 C11.1765231,7.2165725 10.3597411,7.21958569 9.5389422,7.21958569 L9.5389422,7.88399247 C9.5389422,8.25461394 9.26980585,8.55743879 8.94041509,8.55743879 C8.61102432,8.55743879 8.34188797,8.25461394 8.34188797,7.88399247 L8.34188797,7.21958569 L3.65677304,7.21958569 L3.65677304,7.88399247 C3.65677304,8.25461394 3.38763669,8.55743879 3.05824593,8.55743879 C2.72885517,8.55743879 2.45971881,8.25461394 2.45971881,7.88399247 L2.45971881,7.21958569 C1.6375809,7.21958569 0.820798929,7.2180791 0.00133898683,7.2180791 L0.00133898683,6.3126177 C0.822137916,6.3126177 1.64025887,6.30659134 2.4610578,6.30659134 C2.46641375,5.94048964 2.73287213,5.64218456 3.05958491,5.64218456 C3.3862977,5.64218456 3.65275608,5.94048964 3.65811203,6.30659134 L8.34322696,6.30659134 C8.34858291,5.94048964 8.61504129,5.64218456 8.94175407,5.64218456 C9.26846686,5.64218456 9.53492524,5.94048964 9.54028119,6.30659134 C10.3610801,6.30659134 11.1792011,6.31111111 12,6.31111111 L12,3.7393597 C11.997322,2.89416196 11.386744,2.20564972 10.6342334,2.20564972 Z M3.73041732,1.53521657 C3.73041732,1.19322034 3.97812988,0.914500942 4.28207989,0.914500942 L7.71524213,0.914500942 C8.01919214,0.914500942 8.26690471,1.19322034 8.26690471,1.53521657 L8.26690471,2.20715631 L3.73041732,2.20715631 L3.73041732,1.53521657 L3.73041732,1.53521657 Z" id="形状" fill="#000000" fill-rule="nonzero"></path>
+                        <rect id="矩形" x="0" y="0" width="12" height="12"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/sites/src/assets/images/leftMenu/directives-custom-instruction.svg b/examples/sites/src/assets/images/leftMenu/directives-custom-instruction.svg
index dd9206401..140c1b7fe 100644
--- a/examples/sites/src/assets/images/leftMenu/directives-custom-instruction.svg
+++ b/examples/sites/src/assets/images/leftMenu/directives-custom-instruction.svg
@@ -1,13 +1,16 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;fill-opacity:0;}
-</style>
-<rect id="矩形" y="0" class="st0" width="12" height="12"/>
-<path id="形状" d="M1.67,3.14C1.52,3.21,1.43,3.35,1.43,3.51c0,0.15,0.09,0.29,0.24,0.36l3.79,1.9c0.28,0.14,0.61,0.14,0.89,0
-	l3.92-1.91c0.14-0.07,0.24-0.21,0.24-0.36c0-0.16-0.09-0.3-0.23-0.37L6.45,1.17c-0.29-0.15-0.62-0.15-0.91,0L1.67,3.14z M6.44,0.11
-	l5.11,2.6C11.83,2.85,12,3.12,12,3.41v5.18c0,0.29-0.17,0.56-0.45,0.7L6.44,11.9c-0.28,0.14-0.6,0.14-0.88,0L0.45,9.29
-	C0.17,9.15,0,8.88,0,8.59V3.41c0-0.29,0.17-0.56,0.45-0.7L5.56,0.1C5.84-0.04,6.16-0.03,6.44,0.11L6.44,0.11L6.44,0.11z"/>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13px" height="13px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 43</title>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1备份" transform="translate(-28.000000, -1196.000000)">
+            <g id="nav" transform="translate(0.000000, 92.000000)">
+                <g id="left-menu-选项-链接备份-20" transform="translate(28.000000, 1089.000000)">
+                    <g id="编组-43" transform="translate(0.000000, 15.000000)">
+                        <rect id="矩形" x="0" y="1.13686838e-13" width="12" height="12"></rect>
+                        <path d="M11.3731239,5.56259218 L8.00398328,5.56259218 C7.62312391,5.56259218 7.31550672,5.87020937 7.31550672,6.25106874 C7.31550672,6.63192812 7.62312391,6.93954531 8.00398328,6.93954531 L11.3731239,6.93954531 C11.7539833,6.93954531 12.0616005,6.63192812 12.0616005,6.25106874 C12.0616005,5.87020937 11.7539833,5.56259218 11.3731239,5.56259218 Z M11.3731239,8.09677187 L6.69001844,8.09677187 C6.30915906,8.09677187 6.00154188,8.40438906 6.00154188,8.78524843 C6.00154188,9.16610781 6.30915906,9.47372499 6.69001844,9.47372499 L11.3731239,9.47372499 C11.7539833,9.47372499 12.0616005,9.16610781 12.0616005,8.78524843 C12.0616005,8.40438906 11.7539833,8.09677187 11.3731239,8.09677187 Z M11.3731239,10.4595648 L5.33503797,10.4595648 C4.95417859,10.4595648 4.64656141,10.767182 4.64656141,11.1480414 C4.64656141,11.5289008 4.95417859,11.836518 5.33503797,11.836518 L11.3731239,11.836518 C11.7539833,11.836518 12.0616005,11.5289008 12.0616005,11.1480414 C12.0616005,10.767182 11.7539833,10.4595648 11.3731239,10.4595648 Z M7.89997938,2.46298281 C8.31013563,1.75546327 8.05525281,0.848724993 7.33454969,0.459076556 L6.80720594,0.174896868 C6.12751844,-0.192778913 5.28083875,0.0372015558 4.87947156,0.696381243 L3.79988172,2.47177187 L6.84675672,4.27938906 L7.89997938,2.46298281 Z M3.42048719,3.14706484 L0.0689246882,9.03280702 L3.80030737e-05,11.8330078 C-0.00285265559,11.9824219 0.159745001,12.0776367 0.288651251,12 L3.09089734,10.7261664 L6.50691297,4.85946718 L3.42048719,3.14706484 Z" id="形状" fill="#000000" fill-rule="nonzero"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

From d59111bc43d940e71f7a922d9a21e802cdb0a1e7 Mon Sep 17 00:00:00 2001
From: chenxi-20 <2465950588@qq.com>
Date: Mon, 28 Oct 2024 20:48:15 -0700
Subject: [PATCH 21/65] fix(milestone): [milestone] repair component sample
 document (#2463)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(milestones): [milestone] 修复组件示例文档

* fix(milestones): [milestone] 修复测试用例
---
 .../milestone/custom-bottom-top-composition-api.vue    |  7 +++++--
 .../sites/demos/pc/app/milestone/custom-bottom-top.vue |  7 +++++--
 .../pc/app/milestone/custom-flag-composition-api.vue   |  2 +-
 examples/sites/demos/pc/app/milestone/custom-flag.vue  |  2 +-
 .../milestone/data-field-mapping-composition-api.vue   |  2 +-
 .../demos/pc/app/milestone/data-field-mapping.vue      |  2 +-
 .../pc/app/milestone/flag-before-composition-api.vue   | 10 +++++-----
 .../sites/demos/pc/app/milestone/flag-before.spec.ts   |  4 ++--
 examples/sites/demos/pc/app/milestone/flag-before.vue  | 10 +++++-----
 .../app/milestone/milestone-events-composition-api.vue |  2 +-
 .../sites/demos/pc/app/milestone/milestone-events.vue  |  2 +-
 .../pc/app/milestone/show-number-composition-api.vue   |  2 +-
 .../sites/demos/pc/app/milestone/show-number.spec.ts   |  4 ++--
 examples/sites/demos/pc/app/milestone/show-number.vue  |  2 +-
 .../pc/app/milestone/solid-style-composition-api.vue   |  2 +-
 .../sites/demos/pc/app/milestone/solid-style.spec.ts   |  6 +++---
 examples/sites/demos/pc/app/milestone/solid-style.vue  |  2 +-
 17 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/examples/sites/demos/pc/app/milestone/custom-bottom-top-composition-api.vue b/examples/sites/demos/pc/app/milestone/custom-bottom-top-composition-api.vue
index 211ca6552..773ac7509 100644
--- a/examples/sites/demos/pc/app/milestone/custom-bottom-top-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/custom-bottom-top-composition-api.vue
@@ -2,7 +2,7 @@
   <div class="demo-milestone">
     <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
       <template #top="data">
-        <span class="f18 ml50">{{ data.slotScope.status }}</span>
+        <span class="status f18 ml50 mb8">{{ data.slotScope.status }}</span>
       </template>
       <template #bottom="data">
         <span class="f12">{{ data.slotScope.name }} {{ data.slotScope.time }}</span>
@@ -19,7 +19,7 @@ const timeActive1 = ref(1)
 const normalActive = ref(2)
 const advancedActive = ref(2)
 const statusMap = ref({
-  completed: 'var(--ti-common-color-line-active)',
+  completed: 'var(--tv-color-bg-disabled-control-active)',
   doing: '#7ED321',
   back: '#f5222d',
   end: '#faad14',
@@ -55,4 +55,7 @@ const milestoneData = ref([
 .demo-milestone ::v-deep .tiny-milestone__description-status {
   margin-top: 4px;
 }
+.status {
+  display: inline-block;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/milestone/custom-bottom-top.vue b/examples/sites/demos/pc/app/milestone/custom-bottom-top.vue
index ac753f490..e04040dc4 100644
--- a/examples/sites/demos/pc/app/milestone/custom-bottom-top.vue
+++ b/examples/sites/demos/pc/app/milestone/custom-bottom-top.vue
@@ -2,7 +2,7 @@
   <div class="demo-milestone">
     <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
       <template #top="data">
-        <span class="f18 ml50">{{ data.slotScope.status }}</span>
+        <span class="status f18 ml50 mb8">{{ data.slotScope.status }}</span>
       </template>
       <template #bottom="data">
         <span class="f12">{{ data.slotScope.name }} {{ data.slotScope.time }}</span>
@@ -24,7 +24,7 @@ export default {
       normalActive: 2,
       advancedActive: 2,
       statusMap: {
-        completed: 'var(--ti-common-color-line-active)',
+        completed: 'var(--tv-color-bg-disabled-control-active)',
         doing: '#7ED321',
         back: '#f5222d',
         end: '#faad14',
@@ -63,4 +63,7 @@ export default {
 .demo-milestone ::v-deep .tiny-milestone__description-status {
   margin-top: 4px;
 }
+.status {
+  display: inline-block;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/milestone/custom-flag-composition-api.vue b/examples/sites/demos/pc/app/milestone/custom-flag-composition-api.vue
index c68ac0ebb..909754504 100644
--- a/examples/sites/demos/pc/app/milestone/custom-flag-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/custom-flag-composition-api.vue
@@ -16,7 +16,7 @@ const timeActive1 = ref(1)
 const normalActive = ref(2)
 const advancedActive = ref(2)
 const statusMap = ref({
-  completed: 'var(--ti-common-color-line-active)',
+  completed: 'var(--tv-color-bg-disabled-control-active)',
   doing: '#7ED321',
   back: '#f5222d',
   end: '#faad14',
diff --git a/examples/sites/demos/pc/app/milestone/custom-flag.vue b/examples/sites/demos/pc/app/milestone/custom-flag.vue
index 5a6f7cb6a..f757c2f44 100644
--- a/examples/sites/demos/pc/app/milestone/custom-flag.vue
+++ b/examples/sites/demos/pc/app/milestone/custom-flag.vue
@@ -21,7 +21,7 @@ export default {
       normalActive: 2,
       advancedActive: 2,
       statusMap: {
-        completed: 'var(--ti-common-color-line-active)',
+        completed: 'var(--tv-color-bg-disabled-control-active)',
         doing: '#7ED321',
         back: '#f5222d',
         end: '#faad14',
diff --git a/examples/sites/demos/pc/app/milestone/data-field-mapping-composition-api.vue b/examples/sites/demos/pc/app/milestone/data-field-mapping-composition-api.vue
index 28e9ca33d..731b44202 100644
--- a/examples/sites/demos/pc/app/milestone/data-field-mapping-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/data-field-mapping-composition-api.vue
@@ -20,7 +20,7 @@ import { ref } from 'vue'
 import { TinyMilestone } from '@opentiny/vue'
 
 const statusMap = ref({
-  completed: 'var(--ti-common-color-line-active)',
+  completed: 'var(--tv-color-bg-disabled-control-active)',
   doing: '#7ED321',
   back: '#f5222d',
   end: '#faad14',
diff --git a/examples/sites/demos/pc/app/milestone/data-field-mapping.vue b/examples/sites/demos/pc/app/milestone/data-field-mapping.vue
index 1d991aad9..57c4ee8da 100644
--- a/examples/sites/demos/pc/app/milestone/data-field-mapping.vue
+++ b/examples/sites/demos/pc/app/milestone/data-field-mapping.vue
@@ -25,7 +25,7 @@ export default {
   data() {
     return {
       statusMap: {
-        completed: 'var(--ti-common-color-line-active)',
+        completed: 'var(--tv-color-bg-disabled-control-active)',
         doing: '#7ED321',
         back: '#f5222d',
         end: '#faad14',
diff --git a/examples/sites/demos/pc/app/milestone/flag-before-composition-api.vue b/examples/sites/demos/pc/app/milestone/flag-before-composition-api.vue
index ff45075a4..2bf7d7c42 100644
--- a/examples/sites/demos/pc/app/milestone/flag-before-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/flag-before-composition-api.vue
@@ -13,11 +13,11 @@ import { TinyMilestone, TinyButton } from '@opentiny/vue'
 
 const isBefore = ref(false)
 const statusMap = ref({
-  completed: 'var(--ti-common-color-line-active)',
-  doing: '#7ED321',
-  back: '#f5222d',
-  end: '#faad14',
-  cancel: '#d9d9d9'
+  completed: 'var(--tv-color-bg-disabled-control-active)', // 组件库基础变量
+  doing: '#9edb58',
+  back: '#c2c2c2',
+  end: '#edf7df',
+  cancel: '#f23030'
 })
 const milestoneData = ref([
   {
diff --git a/examples/sites/demos/pc/app/milestone/flag-before.spec.ts b/examples/sites/demos/pc/app/milestone/flag-before.spec.ts
index 3b4820c48..7f70cba38 100644
--- a/examples/sites/demos/pc/app/milestone/flag-before.spec.ts
+++ b/examples/sites/demos/pc/app/milestone/flag-before.spec.ts
@@ -12,8 +12,8 @@ test('旗子数据来源', async ({ page }) => {
   const flagAfterContents = [/引导用户按照流程完成任务/, /test7欢迎使用vui/, /test8/, /test6/]
   const flagBeforeContents = [/test1已完成/, /引导用户按照流程完成任务/, /test7欢迎使用vui/, /test8/]
   const button = page.getByRole('button').filter({ hasText: '设置flag-before值为true' })
-  const flagAfterLineColors = ['rgb(245, 34, 45)', 'rgb(245, 34, 45)', 'rgb(126, 211, 33)', 'rgba(0, 0, 0, 0)']
-  const flagBeforeLineColors = ['rgba(0, 0, 0, 0)', 'rgb(245, 34, 45)', 'rgb(245, 34, 45)', 'rgb(126, 211, 33)']
+  const flagAfterLineColors = ['rgb(194, 194, 194)', 'rgb(194, 194, 194)', 'rgb(158, 219, 88)', 'rgb(179, 214, 255)']
+  const flagBeforeLineColors = ['rgb(179, 214, 255)', 'rgb(194, 194, 194)', 'rgb(194, 194, 194)', 'rgb(158, 219, 88)']
 
   for (let i = 0; i < flagCount; i++) {
     const { x, y, width, height } = await flags.nth(i).boundingBox()
diff --git a/examples/sites/demos/pc/app/milestone/flag-before.vue b/examples/sites/demos/pc/app/milestone/flag-before.vue
index 8e4196f39..0daf910f0 100644
--- a/examples/sites/demos/pc/app/milestone/flag-before.vue
+++ b/examples/sites/demos/pc/app/milestone/flag-before.vue
@@ -19,11 +19,11 @@ export default {
     return {
       isBefore: false,
       statusMap: {
-        completed: 'var(--ti-common-color-line-active)',
-        doing: '#7ED321',
-        back: '#f5222d',
-        end: '#faad14',
-        cancel: '#d9d9d9'
+        completed: 'var(--tv-color-bg-disabled-control-active)', // 组件库基础变量
+        doing: '#9edb58',
+        back: '#c2c2c2',
+        end: '#edf7df',
+        cancel: '#f23030'
       },
       milestoneData: [
         {
diff --git a/examples/sites/demos/pc/app/milestone/milestone-events-composition-api.vue b/examples/sites/demos/pc/app/milestone/milestone-events-composition-api.vue
index 27190dbad..3dcbe10ee 100644
--- a/examples/sites/demos/pc/app/milestone/milestone-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/milestone-events-composition-api.vue
@@ -17,7 +17,7 @@ const timeActive1 = ref(1)
 const normalActive = ref(2)
 const advancedActive = ref(2)
 const statusMap = ref({
-  completed: 'var(--ti-common-color-line-active)',
+  completed: 'var(--tv-color-bg-disabled-control-active)',
   doing: '#7ED321',
   back: '#f5222d',
   end: '#faad14',
diff --git a/examples/sites/demos/pc/app/milestone/milestone-events.vue b/examples/sites/demos/pc/app/milestone/milestone-events.vue
index 1f78f7be5..3f85b389c 100644
--- a/examples/sites/demos/pc/app/milestone/milestone-events.vue
+++ b/examples/sites/demos/pc/app/milestone/milestone-events.vue
@@ -22,7 +22,7 @@ export default {
       normalActive: 2,
       advancedActive: 2,
       statusMap: {
-        completed: 'var(--ti-common-color-line-active)',
+        completed: 'var(--tv-color-bg-disabled-control-active)',
         doing: '#7ED321',
         back: '#f5222d',
         end: '#faad14',
diff --git a/examples/sites/demos/pc/app/milestone/show-number-composition-api.vue b/examples/sites/demos/pc/app/milestone/show-number-composition-api.vue
index d10b0ee95..cfe14a3e0 100644
--- a/examples/sites/demos/pc/app/milestone/show-number-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/show-number-composition-api.vue
@@ -18,7 +18,7 @@ import { TinyMilestone, TinyButton } from '@opentiny/vue'
 
 const showNum = ref(true)
 const statusMap = ref({
-  completed: 'var(--ti-common-color-line-active)',
+  completed: 'var(--tv-color-bg-disabled-control-active)',
   doing: '#7ED321',
   back: '#f5222d',
   end: '#faad14',
diff --git a/examples/sites/demos/pc/app/milestone/show-number.spec.ts b/examples/sites/demos/pc/app/milestone/show-number.spec.ts
index dbde80d03..8bbc23efa 100644
--- a/examples/sites/demos/pc/app/milestone/show-number.spec.ts
+++ b/examples/sites/demos/pc/app/milestone/show-number.spec.ts
@@ -23,12 +23,12 @@ test('序号显示', async ({ page }) => {
   const iconStyles = [
     {
       'background-color': 'rgb(255, 255, 255)',
-      'color': 'rgb(0, 0, 0)',
+      'color': 'rgb(179, 214, 255)',
       'box-shadow': 'none'
     },
     {
       'background-color': 'rgb(255, 255, 255)',
-      'color': 'rgb(0, 0, 0)',
+      'color': 'rgb(179, 214, 255)',
       'box-shadow': 'none'
     },
     {
diff --git a/examples/sites/demos/pc/app/milestone/show-number.vue b/examples/sites/demos/pc/app/milestone/show-number.vue
index 913a06bac..9655c319b 100644
--- a/examples/sites/demos/pc/app/milestone/show-number.vue
+++ b/examples/sites/demos/pc/app/milestone/show-number.vue
@@ -24,7 +24,7 @@ export default {
     return {
       showNum: true,
       statusMap: {
-        completed: 'var(--ti-common-color-line-active)',
+        completed: 'var(--tv-color-bg-disabled-control-active)',
         doing: '#7ED321',
         back: '#f5222d',
         end: '#faad14',
diff --git a/examples/sites/demos/pc/app/milestone/solid-style-composition-api.vue b/examples/sites/demos/pc/app/milestone/solid-style-composition-api.vue
index 0a7033ff1..858373659 100644
--- a/examples/sites/demos/pc/app/milestone/solid-style-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/solid-style-composition-api.vue
@@ -11,7 +11,7 @@ import { TinyMilestone, TinyButton } from '@opentiny/vue'
 
 const isSolid = ref(false)
 const statusMap = ref({
-  completed: 'var(--ti-common-color-line-active)',
+  completed: 'var(--tv-color-bg-disabled-control-active)',
   doing: '#7ED321',
   back: '#f5222d',
   end: '#faad14',
diff --git a/examples/sites/demos/pc/app/milestone/solid-style.spec.ts b/examples/sites/demos/pc/app/milestone/solid-style.spec.ts
index 251f26664..1e90ed6de 100644
--- a/examples/sites/demos/pc/app/milestone/solid-style.spec.ts
+++ b/examples/sites/demos/pc/app/milestone/solid-style.spec.ts
@@ -23,12 +23,12 @@ test('实心显示', async ({ page }) => {
   const iconStyles = [
     {
       'background-color': 'rgb(255, 255, 255)',
-      'color': 'rgb(0, 0, 0)',
+      'color': 'rgb(179, 214, 255)',
       'box-shadow': 'none'
     },
     {
       'background-color': 'rgb(255, 255, 255)',
-      'color': 'rgb(0, 0, 0)',
+      'color': 'rgb(179, 214, 255)',
       'box-shadow': 'none'
     },
     {
@@ -98,6 +98,6 @@ test('实心显示', async ({ page }) => {
   await button.click()
 
   for (let i = 0; i < 2; i++) {
-    await expect(nodeIcons.nth(i)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+    await expect(nodeIcons.nth(i)).toHaveCSS('background-color', 'rgb(179, 214, 255)')
   }
 })
diff --git a/examples/sites/demos/pc/app/milestone/solid-style.vue b/examples/sites/demos/pc/app/milestone/solid-style.vue
index 670442cd1..ce8649f9e 100644
--- a/examples/sites/demos/pc/app/milestone/solid-style.vue
+++ b/examples/sites/demos/pc/app/milestone/solid-style.vue
@@ -17,7 +17,7 @@ export default {
     return {
       isSolid: false,
       statusMap: {
-        completed: 'var(--ti-common-color-line-active)',
+        completed: 'var(--tv-color-bg-disabled-control-active)',
         doing: '#7ED321',
         back: '#f5222d',
         end: '#faad14',

From d66c17ab936eca9188da610d4d17f95a716b2611 Mon Sep 17 00:00:00 2001
From: James <72028410+James-9696@users.noreply.github.com>
Date: Mon, 28 Oct 2024 20:48:34 -0700
Subject: [PATCH 22/65] fix(drawer): [drawer] modify demo and icon (#2465)

---
 .../use-through-method-composition-api.vue    | 19 +++++++++---
 .../pc/app/drawer/use-through-method.vue      | 29 +++++++++++++------
 2 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/examples/sites/demos/pc/app/drawer/use-through-method-composition-api.vue b/examples/sites/demos/pc/app/drawer/use-through-method-composition-api.vue
index 06c33ac98..27419d1b1 100644
--- a/examples/sites/demos/pc/app/drawer/use-through-method-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/use-through-method-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script lang="tsx" setup>
 import { ref } from 'vue'
-import { TinyDrawer, TinyButton } from '@opentiny/vue'
+import { TinyDrawer, TinyButton, Notify } from '@opentiny/vue'
 import { iconHelp } from '@opentiny/vue-icon'
 
 let drawerInstance = null
@@ -24,15 +24,26 @@ const config = ref({
   showFooter: true,
   // 通过 events 监听事件
   events: {
-    open: (instance) => console.log('open 事件', instance),
-    close: () => console.log('close 事件')
+    open: (instance) =>
+      Notify({
+        type: 'info',
+        title: 'open 事件',
+        message: `${instance.title}`,
+        position: 'top-right'
+      }),
+    close: () =>
+      Notify({
+        type: 'info',
+        title: 'close 事件',
+        position: 'top-right'
+      })
   },
   // 通过属性 customSlots 设置插槽, 插槽内容可以是 string | VNode | ({h, $drawer}) => VNode
   customSlots: {
     // 使用 h 函数
     default: (h) => h('p', { class: '' }, '抽屉主体内容。'),
     // 返回 VNode 节点的方法, 可通过参数中 $drawer 访问到组件实例
-    headerRight: () => <IconHelp></IconHelp>,
+    headerRight: () => <IconHelp style="width:20px;height:20px"></IconHelp>,
     // 直接赋值 VNode
     footer: (
       <TinyButton type="primary" onClick={closeDrawer}>
diff --git a/examples/sites/demos/pc/app/drawer/use-through-method.vue b/examples/sites/demos/pc/app/drawer/use-through-method.vue
index cce926f62..30ff67305 100644
--- a/examples/sites/demos/pc/app/drawer/use-through-method.vue
+++ b/examples/sites/demos/pc/app/drawer/use-through-method.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="tsx">
-import { TinyDrawer, TinyButton } from '@opentiny/vue'
+import { TinyDrawer, TinyButton, Notify } from '@opentiny/vue'
 import { iconHelp } from '@opentiny/vue-icon'
 
 export default {
@@ -18,6 +18,9 @@ export default {
     }
   },
   methods: {
+    closeDrawer() {
+      this.drawerInstance.close()
+    },
     showDrawer() {
       const IconHelp = iconHelp()
       const config = {
@@ -27,27 +30,35 @@ export default {
         showFooter: true,
         // 通过 events 监听事件
         events: {
-          open: (instance) => console.log('open 事件', instance),
-          close: () => console.log('close 事件')
+          open: (instance) =>
+            Notify({
+              type: 'info',
+              title: 'open 事件',
+              message: `${instance.title}`,
+              position: 'top-right'
+            }),
+          close: () =>
+            Notify({
+              type: 'info',
+              title: 'close 事件',
+              position: 'top-right'
+            })
         },
         // 通过属性 customSlots 设置插槽, 插槽内容可以是 string | VNode | ({h, $drawer}) => VNode
         customSlots: {
           // 使用 h 函数
           default: (h) => h('p', { class: '' }, '抽屉主体内容。'),
           // 返回 VNode 节点的方法, 可通过参数中 $drawer 访问到组件实例
-          headerRight: () => <IconHelp></IconHelp>,
+          headerRight: () => <IconHelp style="width:20px;height:20px"></IconHelp>,
           // 直接赋值 VNode
           footer: (
-            <Button type="primary" onClick={this.closeDrawer}>
+            <TinyButton type="primary" onClick={this.closeDrawer}>
               点击关闭
-            </Button>
+            </TinyButton>
           )
         }
       }
       this.drawerInstance = TinyDrawer.service(config)
-    },
-    closeDrawer() {
-      this.drawerInstance.close()
     }
   }
 }

From ae2b8cd5a3dc1ee81fbb97638f07442f3bad9da3 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Tue, 29 Oct 2024 11:49:31 +0800
Subject: [PATCH 23/65] feat: update versions

---
 packages/renderless/package.json | 2 +-
 packages/theme/package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/renderless/package.json b/packages/renderless/package.json
index ff26f6540..4d7663304 100644
--- a/packages/renderless/package.json
+++ b/packages/renderless/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.19.0",
+  "version": "3.19.1",
   "private": true,
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
diff --git a/packages/theme/package.json b/packages/theme/package.json
index e23197ff2..9f5c4eefb 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-theme",
   "type": "module",
-  "version": "3.19.0",
+  "version": "3.19.1",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
   "license": "MIT",

From d07494fe1a2dbc2c03617a6a5a0ea94ba9fac227 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Tue, 29 Oct 2024 11:52:30 +0800
Subject: [PATCH 24/65] feat: update doc versions

---
 examples/sites/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/sites/package.json b/examples/sites/package.json
index 6d4275936..f5fc4892b 100644
--- a/examples/sites/package.json
+++ b/examples/sites/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "3.19.0",
+  "version": "3.19.1",
   "license": "MIT",
   "scripts": {
     "start": "vite",

From d6e78f3d05a73a9f17f8cc69647ce2ce8fa8e1f2 Mon Sep 17 00:00:00 2001
From: chenxi-20 <2465950588@qq.com>
Date: Mon, 28 Oct 2024 21:57:51 -0700
Subject: [PATCH 25/65] =?UTF-8?q?fix(steps):=20[steps]=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E5=9E=82=E7=9B=B4=E5=8D=95=E9=93=BE=E5=9E=8B=20(#2466?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/theme/src/steps/index.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/theme/src/steps/index.less b/packages/theme/src/steps/index.less
index 3fda658ca..563c0fa4c 100644
--- a/packages/theme/src/steps/index.less
+++ b/packages/theme/src/steps/index.less
@@ -635,7 +635,7 @@
 
       &.block-mini {
         .title,
-        .description,
+        .description.not-vertical,
         .line-footer {
           max-width: 150px;
         }
@@ -691,7 +691,7 @@
         }
       }
 
-      .description,
+      .description.not-vertical,
       .line-footer {
         line-height: 1.5;
         margin-left: calc(var(--tv-Steps-node-circle-size) + var(--tv-Steps-text-margin-left));

From 1d2a10b8393bc7d81bdc06abe7287147ab88c70e Mon Sep 17 00:00:00 2001
From: gimmyhehe <975402925@qq.com>
Date: Tue, 29 Oct 2024 13:01:40 +0800
Subject: [PATCH 26/65] fix: grid radio add white background (#2467)

---
 packages/theme/src/grid/radio.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/theme/src/grid/radio.less b/packages/theme/src/grid/radio.less
index 5d30f7c9d..1335b08a6 100644
--- a/packages/theme/src/grid/radio.less
+++ b/packages/theme/src/grid/radio.less
@@ -53,6 +53,7 @@
       margin: 1px;
       border: 1px solid var(--tv-Grid-radio-icon-color-selected);
       border-radius: 100%;
+      background: #fff;
 
       &::after {
         content: '';

From 21f5c9245807d1eff9ca57b8b60a4b394c81d3e6 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Tue, 29 Oct 2024 13:02:26 +0800
Subject: [PATCH 27/65] feat: update theme versions

---
 packages/theme/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/theme/package.json b/packages/theme/package.json
index 9f5c4eefb..5194bf5ca 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-theme",
   "type": "module",
-  "version": "3.19.1",
+  "version": "3.19.2",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
   "license": "MIT",

From f5697e749ea8ed09a864a57c21f335f3773a96ee Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Tue, 29 Oct 2024 14:31:51 +0800
Subject: [PATCH 28/65] docs(grid): update grid docs

---
 examples/sites/demos/pc/app/grid/webdoc/grid-import-export.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-import-export.js b/examples/sites/demos/pc/app/grid/webdoc/grid-import-export.js
index 3bc3efb57..5551e93e2 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-import-export.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-import-export.js
@@ -20,7 +20,7 @@ export default {
           <p>本示例使用的xlsx版本为0.18.2，导入的excel表格，表头字段需与表格field字段保持一致。</p>
           <p>提示: xlsx 是一个非常强大的前端 EXCEL 文件操作库，支持表格带格式导入导出，可兼容 IE9+ 版本的浏览器。</p>
           <p>详情参考：<a href="https://github.com/SheetJS/sheetjs" target="_blank">https://github.com/SheetJS/sheetjs</a></p>
-          <p>注意：如需体验demo，需要将demo中注释部分代码取消注释，切自行安装相关依赖。</p>
+          <p>注意：如需体验demo，需要将demo中注释部分代码取消注释，且自行安装相关依赖。</p>
         </div>
         `,
         'en-US': 'For details, see the following example.'

From bfc22adb163882ab356db99bbbac28feb01eb297 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Tue, 29 Oct 2024 14:38:50 +0800
Subject: [PATCH 29/65] fix: fix tree select error

---
 packages/renderless/src/tree-select/index.ts | 2 +-
 packages/renderless/src/tree-select/vue.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/renderless/src/tree-select/index.ts b/packages/renderless/src/tree-select/index.ts
index b3da78569..b37db14c7 100644
--- a/packages/renderless/src/tree-select/index.ts
+++ b/packages/renderless/src/tree-select/index.ts
@@ -5,7 +5,7 @@ export const filter =
   }
 
 export const nodeClick =
-  ({ props, vm }) =>
+  ({ props, vm, emit }) =>
   (data) => {
     if (!props.multiple) {
       vm.$refs.baseSelectRef.updateSelectedData({
diff --git a/packages/renderless/src/tree-select/vue.ts b/packages/renderless/src/tree-select/vue.ts
index ebb2d5123..3ed79e1b5 100644
--- a/packages/renderless/src/tree-select/vue.ts
+++ b/packages/renderless/src/tree-select/vue.ts
@@ -13,7 +13,7 @@ export const renderless = (props, { reactive, computed }, { vm, emit }) => {
   Object.assign(api, {
     state,
     filter: filter({ vm }),
-    nodeClick: nodeClick({ props, vm }),
+    nodeClick: nodeClick({ props, vm, emit }),
     check: check({ props, vm, emit })
   })
 

From fad66a75e16ecc61fdcb8df4992eb9167d194771 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Tue, 29 Oct 2024 14:41:52 +0800
Subject: [PATCH 30/65] feat: update theme and renderless versions

---
 packages/renderless/package.json | 2 +-
 packages/theme/package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/renderless/package.json b/packages/renderless/package.json
index 4d7663304..e4056356f 100644
--- a/packages/renderless/package.json
+++ b/packages/renderless/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.19.1",
+  "version": "3.19.2",
   "private": true,
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
diff --git a/packages/theme/package.json b/packages/theme/package.json
index 5194bf5ca..075f258f0 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-theme",
   "type": "module",
-  "version": "3.19.2",
+  "version": "3.19.3",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
   "license": "MIT",

From f6b44820ed187e228eb63dce230883f013f3538b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=94=B3=E5=90=9B=E5=81=A5?= <40288193@qq.com>
Date: Tue, 29 Oct 2024 14:43:07 +0800
Subject: [PATCH 31/65] fix(tag): remove mini size of tag (#2468)

* fix(tag): remove mini size

* fix(tag): update tag's demo, which is relate to size

* fix(tag): fix api

* fix(tag): fix
---
 examples/sites/demos/apis/tag-group.js        |  2 +-
 examples/sites/demos/apis/tag.js              |  2 +-
 .../tag-group-size-composition-api.vue        |  2 --
 .../pc/app/tag-group/tag-group-size.spec.js   |  4 ---
 .../demos/pc/app/tag-group/tag-group-size.vue |  2 --
 .../demos/pc/app/tag/size-composition-api.vue |  2 --
 examples/sites/demos/pc/app/tag/size.spec.ts  |  2 --
 examples/sites/demos/pc/app/tag/size.vue      |  2 --
 examples/sites/demos/pc/app/tag/webdoc/tag.js |  4 +--
 packages/theme/src/tag/vars.less              | 26 ++++++++++---------
 10 files changed, 18 insertions(+), 30 deletions(-)

diff --git a/examples/sites/demos/apis/tag-group.js b/examples/sites/demos/apis/tag-group.js
index 600b34b43..a8509b21e 100644
--- a/examples/sites/demos/apis/tag-group.js
+++ b/examples/sites/demos/apis/tag-group.js
@@ -32,7 +32,7 @@ export default {
         },
         {
           name: 'size',
-          type: "'medium' | 'small' | 'mini'",
+          type: "'medium' | 'small'",
           defaultValue: "'medium'",
           desc: {
             'zh-CN': '尺寸',
diff --git a/examples/sites/demos/apis/tag.js b/examples/sites/demos/apis/tag.js
index 7d8b76d84..a066f2d0d 100644
--- a/examples/sites/demos/apis/tag.js
+++ b/examples/sites/demos/apis/tag.js
@@ -271,7 +271,7 @@ type IEffect = 'dark' | 'light' | 'plain'
       name: 'ISize',
       type: 'type',
       code: `
-type ISize = 'medium' | 'small' | 'mini' | ''
+type ISize = 'medium' | 'small' | ''
 `
     },
     {
diff --git a/examples/sites/demos/pc/app/tag-group/tag-group-size-composition-api.vue b/examples/sites/demos/pc/app/tag-group/tag-group-size-composition-api.vue
index b2b3ed70d..25822545d 100644
--- a/examples/sites/demos/pc/app/tag-group/tag-group-size-composition-api.vue
+++ b/examples/sites/demos/pc/app/tag-group/tag-group-size-composition-api.vue
@@ -4,8 +4,6 @@
     <tiny-tag-group :data="items" size="medium"> </tiny-tag-group>
     <div>小型标签：small</div>
     <tiny-tag-group :data="items" size="small"> </tiny-tag-group>
-    <div>超小标签：mini</div>
-    <tiny-tag-group :data="items" size="mini"> </tiny-tag-group>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/tag-group/tag-group-size.spec.js b/examples/sites/demos/pc/app/tag-group/tag-group-size.spec.js
index 4b8056536..5e0c51096 100644
--- a/examples/sites/demos/pc/app/tag-group/tag-group-size.spec.js
+++ b/examples/sites/demos/pc/app/tag-group/tag-group-size.spec.js
@@ -11,8 +11,4 @@ test('TagGroup 尺寸', async ({ page }) => {
   const smallTag = page.locator('.tiny-demo-tag-group-size .tiny-tag-group .tiny-tag.tiny-tag--small').nth(0)
   await expect(smallTag).toHaveCSS('height', '20px')
   await expect(smallTag).toHaveCSS('line-height', '18px')
-
-  const miniTag = page.locator('.tiny-demo-tag-group-size .tiny-tag-group .tiny-tag.tiny-tag--mini').nth(0)
-  await expect(miniTag).toHaveCSS('height', '18px')
-  await expect(miniTag).toHaveCSS('line-height', '15px')
 })
diff --git a/examples/sites/demos/pc/app/tag-group/tag-group-size.vue b/examples/sites/demos/pc/app/tag-group/tag-group-size.vue
index 2dc6ee5ae..5525c7645 100644
--- a/examples/sites/demos/pc/app/tag-group/tag-group-size.vue
+++ b/examples/sites/demos/pc/app/tag-group/tag-group-size.vue
@@ -4,8 +4,6 @@
     <tiny-tag-group :data="items" size="medium"> </tiny-tag-group>
     <div>小型标签：small</div>
     <tiny-tag-group :data="items" size="small"> </tiny-tag-group>
-    <div>超小标签：mini</div>
-    <tiny-tag-group :data="items" size="mini"> </tiny-tag-group>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/tag/size-composition-api.vue b/examples/sites/demos/pc/app/tag/size-composition-api.vue
index bfecbcd50..d8427e815 100644
--- a/examples/sites/demos/pc/app/tag/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/tag/size-composition-api.vue
@@ -3,12 +3,10 @@
     <tiny-tag size="medium" type="success"> 中等标签 </tiny-tag>
     <tiny-tag type="success"> 默认标签 </tiny-tag>
     <tiny-tag size="small" type="success"> 小型标签 </tiny-tag>
-    <tiny-tag size="mini" type="success"> 超小标签 </tiny-tag>
     <br /><br />
     <tiny-tag size="medium" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
     <tiny-tag type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
     <tiny-tag size="small" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
-    <tiny-tag size="mini" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/tag/size.spec.ts b/examples/sites/demos/pc/app/tag/size.spec.ts
index 093bb8173..07a0ece55 100644
--- a/examples/sites/demos/pc/app/tag/size.spec.ts
+++ b/examples/sites/demos/pc/app/tag/size.spec.ts
@@ -7,10 +7,8 @@ test('各型号尺寸是否正常', async ({ page }) => {
   const normal = page.getByText('默认标签')
   const medium = page.getByText('中等标签')
   const small = page.getByText('小型标签')
-  const mini = page.getByText('超小标签')
 
   await expect(normal).toHaveCSS('height', '24px')
   await expect(medium).toHaveCSS('height', '32px')
   await expect(small).toHaveCSS('height', '20px')
-  await expect(mini).toHaveCSS('height', '18px')
 })
diff --git a/examples/sites/demos/pc/app/tag/size.vue b/examples/sites/demos/pc/app/tag/size.vue
index 46ba8ebff..2a59012bc 100644
--- a/examples/sites/demos/pc/app/tag/size.vue
+++ b/examples/sites/demos/pc/app/tag/size.vue
@@ -3,12 +3,10 @@
     <tiny-tag size="medium" type="success"> 中等标签 </tiny-tag>
     <tiny-tag type="success"> 默认标签 </tiny-tag>
     <tiny-tag size="small" type="success"> 小型标签 </tiny-tag>
-    <tiny-tag size="mini" type="success"> 超小标签 </tiny-tag>
     <br /><br />
     <tiny-tag size="medium" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
     <tiny-tag type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
     <tiny-tag size="small" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
-    <tiny-tag size="mini" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/tag/webdoc/tag.js b/examples/sites/demos/pc/app/tag/webdoc/tag.js
index 02428478c..7aecc71cc 100644
--- a/examples/sites/demos/pc/app/tag/webdoc/tag.js
+++ b/examples/sites/demos/pc/app/tag/webdoc/tag.js
@@ -69,8 +69,8 @@ export default {
         'en-US': 'Size'
       },
       desc: {
-        'zh-CN': '通过 <code>size</code> 设置尺寸大小，可选值： <code>(medium / small / mini)</code> 。',
-        'en-US': 'Set the size through <code>size</code> , with optional values: <code>(medium/small/mini)</code> .'
+        'zh-CN': '通过 <code>size</code> 设置尺寸大小，可选值： <code>(medium / small)</code> 。',
+        'en-US': 'Set the size through <code>size</code> , with optional values: <code>(medium/small)</code> .'
       },
       codeFiles: ['size.vue']
     },
diff --git a/packages/theme/src/tag/vars.less b/packages/theme/src/tag/vars.less
index baaecfd7f..841c1192c 100644
--- a/packages/theme/src/tag/vars.less
+++ b/packages/theme/src/tag/vars.less
@@ -17,7 +17,9 @@
 
   //------------------------------------------------------- 尺寸 场景：font-size, border-radius ,padding-x,y   -------
 
-  /** 由于 tag 有border的，所有的padding值比设计图减少1 */
+  /** 由于 tag 有border的，所有的padding值比设计图减少1 
+   *  去掉mini 尺寸。  small  正常  medium。 如果用户使用了mini时，尺寸等于small
+  */
 
   // 超小标签字号
   --tv-Tag-font-size-mini: var(--tv-font-size-sm);
@@ -35,28 +37,28 @@
   // 小型标签字号
   --tv-Tag-font-size-small: var(--tv-font-size-sm);
   // 小型标签水平间距
-  --tv-Tag-padding-x-small: 7px;
+  --tv-Tag-padding-x-small: 3px;
   // 小型标签垂直间距
-  --tv-Tag-padding-y-small: 2px;
+  --tv-Tag-padding-y-small: 0;
   // 小型标签圆角
-  --tv-Tag-border-radius-small: var(--tv-border-radius-sm);
+  --tv-Tag-border-radius-small: var(--tv-border-radius-xs);
   // 标签在仅图标模式时，图标的大小
-  --tv-Tag-only-icon-font-size-small: 14px;
+  --tv-Tag-only-icon-font-size-small: 12px;
   // 标签在仅图标模式时，标签的内边距
-  --tv-Tag-only-icon-padding-small: 0.5px;
+  --tv-Tag-only-icon-padding-small: 2px;
 
   // 默认标签字号
-  --tv-Tag-font-size: var(--tv-font-size-md);
+  --tv-Tag-font-size: var(--tv-font-size-sm);
   // 默认标签水平间距
-  --tv-Tag-padding-x: 11px;
+  --tv-Tag-padding-x: 7px;
   // 默认标签垂直间距
-  --tv-Tag-padding-y: 2.5px;
+  --tv-Tag-padding-y: 2px;
   // 默认标签圆角
-  --tv-Tag-border-radius: var(--tv-border-radius-md);
+  --tv-Tag-border-radius: var(--tv-border-radius-sm);
   // 标签在仅图标模式时，图标的大小
-  --tv-Tag-only-icon-font-size: 16px;
+  --tv-Tag-only-icon-font-size: 14px;
   // 标签在仅图标模式时，标签的内边距
-  --tv-Tag-only-icon-padding: 3px;
+  --tv-Tag-only-icon-padding: 0.5px;
 
   // 中等标签字号
   --tv-Tag-font-size-medium: var(--tv-font-size-md); //14

From ca657d1b8c991145e8bb6e49ee20a0992c2a8976 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Tue, 29 Oct 2024 14:46:21 +0800
Subject: [PATCH 32/65] fix(guid): fix guid hide error

---
 packages/renderless/src/guide/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/renderless/src/guide/index.ts b/packages/renderless/src/guide/index.ts
index a90486d3e..e4d01d016 100644
--- a/packages/renderless/src/guide/index.ts
+++ b/packages/renderless/src/guide/index.ts
@@ -63,7 +63,7 @@ export const mounted =
   }
 
 export const beforeUnmount = (state) => () => {
-  state.tour.hide()
+  state?.tour?.hide()
 }
 
 const getItemCopy = (props, tour, result) => {

From d615c3bc5931af6281541096f7f6d0770d39cfde Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Tue, 29 Oct 2024 14:49:30 +0800
Subject: [PATCH 33/65] feat: update doc versions

---
 examples/sites/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/sites/package.json b/examples/sites/package.json
index f5fc4892b..68d7bf433 100644
--- a/examples/sites/package.json
+++ b/examples/sites/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "3.19.1",
+  "version": "3.19.2",
   "license": "MIT",
   "scripts": {
     "start": "vite",

From 299d7fe55381cbcc19d00a3021bb9cb8cd88308a Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Tue, 29 Oct 2024 19:02:35 +0800
Subject: [PATCH 34/65] feat: update playground versions

---
 examples/sites/package.json       | 2 +-
 examples/sites/playground/App.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/sites/package.json b/examples/sites/package.json
index 68d7bf433..40243ad8d 100644
--- a/examples/sites/package.json
+++ b/examples/sites/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "3.19.2",
+  "version": "3.19.3",
   "license": "MIT",
   "scripts": {
     "start": "vite",
diff --git a/examples/sites/playground/App.vue b/examples/sites/playground/App.vue
index 2a3c44a98..4c88cd5cf 100644
--- a/examples/sites/playground/App.vue
+++ b/examples/sites/playground/App.vue
@@ -28,7 +28,7 @@ const isMobileFirst = tinyMode === 'mobile-first'
 const isSaas = tinyTheme === 'saas'
 const isPreview = searchObj.get('openMode') === 'preview' // 是否多端弹窗预览
 
-const versions = ['3.18', '3.17', '3.16', '3.15', '3.14', '3.13', '3.12', '3.11', '3.10', '3.9', '3.8']
+const versions = ['3.19', '3.18', '3.17', '3.16', '3.15', '3.14', '3.13', '3.12', '3.11', '3.10', '3.9', '3.8']
 const latestVersion = isPreview ? versions[0] : localStorage.getItem(VERSION) || versions[0]
 const cdnHost = localStorage.getItem('setting-cdn')
 

From 6180ec7b7c371c906d87d726f18e9bdae83b3814 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=94=B3=E5=90=9B=E5=81=A5?= <40288193@qq.com>
Date: Sat, 2 Nov 2024 22:51:42 +0800
Subject: [PATCH 35/65] fix(tree): [button,tree] update tree demos and the
 plain button's border color (#2470)

* fix(tree): fix tree's demo, modify delete popover's button to mini

* fix(button): fix the plain button's border color
---
 .../demos/pc/app/tree/basic-usage-composition-api.vue  |  3 ---
 examples/sites/demos/pc/app/tree/basic-usage.vue       |  3 ---
 .../sites/demos/pc/app/tree/edit-composition-api.vue   |  9 +--------
 examples/sites/demos/pc/app/tree/edit.vue              |  9 +--------
 .../sites/demos/pc/app/tree/other-composition-api.vue  |  2 +-
 examples/sites/demos/pc/app/tree/other.vue             |  2 +-
 .../sites/demos/pc/app/tree/slot-composition-api.vue   |  6 +++---
 examples/sites/demos/pc/app/tree/slot.vue              |  6 +++---
 packages/theme/src/button/vars.less                    | 10 +++++-----
 packages/vue/src/tree/src/pc.vue                       |  4 ++--
 10 files changed, 17 insertions(+), 37 deletions(-)

diff --git a/examples/sites/demos/pc/app/tree/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/tree/basic-usage-composition-api.vue
index 4818f75eb..3bbc76fe3 100644
--- a/examples/sites/demos/pc/app/tree/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/basic-usage-composition-api.vue
@@ -76,7 +76,4 @@ function nodeClick(data, node, vm) {
   margin-top: 16px;
   margin-bottom: 16px;
 }
-.option-row > span {
-  font-size: 18px;
-}
 </style>
diff --git a/examples/sites/demos/pc/app/tree/basic-usage.vue b/examples/sites/demos/pc/app/tree/basic-usage.vue
index 48068f286..ea051c531 100644
--- a/examples/sites/demos/pc/app/tree/basic-usage.vue
+++ b/examples/sites/demos/pc/app/tree/basic-usage.vue
@@ -88,7 +88,4 @@ export default {
   margin-top: 16px;
   margin-bottom: 16px;
 }
-.option-row > span {
-  font-size: 18px;
-}
 </style>
diff --git a/examples/sites/demos/pc/app/tree/edit-composition-api.vue b/examples/sites/demos/pc/app/tree/edit-composition-api.vue
index 9c23e17ee..b6264aae9 100644
--- a/examples/sites/demos/pc/app/tree/edit-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/edit-composition-api.vue
@@ -8,14 +8,7 @@
     <tiny-button @click="editNode">编辑节点</tiny-button>
     <tiny-button @click="saveNode">5s后保存节点</tiny-button> <br />
     <br />
-    <tiny-tree
-      ref="treeRef"
-      show-checkbox
-      node-key="id"
-      :data="data"
-      current-node-key="1"
-      default-expand-all
-    ></tiny-tree>
+    <tiny-tree ref="treeRef" node-key="id" :data="data" current-node-key="1" default-expand-all></tiny-tree>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/tree/edit.vue b/examples/sites/demos/pc/app/tree/edit.vue
index 769e9e96a..88d2774bc 100644
--- a/examples/sites/demos/pc/app/tree/edit.vue
+++ b/examples/sites/demos/pc/app/tree/edit.vue
@@ -8,14 +8,7 @@
     <tiny-button @click="editNode">编辑节点</tiny-button>
     <tiny-button @click="saveNode">5s后保存节点</tiny-button> <br />
     <br />
-    <tiny-tree
-      ref="treeRef"
-      show-checkbox
-      node-key="id"
-      :data="data"
-      current-node-key="1"
-      default-expand-all
-    ></tiny-tree>
+    <tiny-tree ref="treeRef" node-key="id" :data="data" current-node-key="1" default-expand-all></tiny-tree>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/tree/other-composition-api.vue b/examples/sites/demos/pc/app/tree/other-composition-api.vue
index ce8ce1957..52da34ec1 100644
--- a/examples/sites/demos/pc/app/tree/other-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/other-composition-api.vue
@@ -5,7 +5,7 @@
     </tiny-tree>
     <br />
     <div class="tips">提示：非手风琴模式，自定义自动勾选的内容</div>
-    <tiny-tree :data="data" accordion show-checkbox check-strictly show-check-easily :icon-trigger-click-node="false">
+    <tiny-tree :data="data" show-checkbox check-strictly show-check-easily :icon-trigger-click-node="false">
       <template #switchText>
         <span>自定义开关的内容</span>
       </template>
diff --git a/examples/sites/demos/pc/app/tree/other.vue b/examples/sites/demos/pc/app/tree/other.vue
index ff3174893..6d94e69cd 100644
--- a/examples/sites/demos/pc/app/tree/other.vue
+++ b/examples/sites/demos/pc/app/tree/other.vue
@@ -5,7 +5,7 @@
     </tiny-tree>
     <br />
     <div class="tips">提示：非手风琴模式，自定义自动勾选的内容</div>
-    <tiny-tree :data="data" accordion show-checkbox check-strictly show-check-easily :icon-trigger-click-node="false">
+    <tiny-tree :data="data" show-checkbox check-strictly show-check-easily :icon-trigger-click-node="false">
       <template #switchText>
         <span>自定义开关的内容</span>
       </template>
diff --git a/examples/sites/demos/pc/app/tree/slot-composition-api.vue b/examples/sites/demos/pc/app/tree/slot-composition-api.vue
index 05bd499a4..efd8cfb6d 100644
--- a/examples/sites/demos/pc/app/tree/slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/slot-composition-api.vue
@@ -13,7 +13,7 @@
         </template>
         <!-- 默认插槽 -->
         <template #default="node">
-          <div style="color: red">{{ node.data.label }}</div>
+          <div style="margin: 0 8px">{{ node.data.label }}</div>
         </template>
         <!-- 后缀插槽 -->
         <template #suffix="{ node }">
@@ -22,7 +22,7 @@
         <!-- 操作插槽 -->
         <template #operation="{ node }">
           <div style="width: 80px; text-align: right">
-            <tiny-link :underline="true" title="一些功能操作" type="primary"> 新增 </tiny-link> &nbsp;
+            <tiny-link :underline="true" title="一些功能操作"> 新增 </tiny-link> &nbsp;
             <tiny-link :underline="true" title="一些功能操作" type="danger"> 删除 </tiny-link>
           </div>
         </template>
@@ -78,7 +78,7 @@ function clearData() {
 function renderContent(h, { node, data }) {
   return (
     <span>
-      {node.label} <TinyIconPlusSquare fill="red" />
+      {node.label} <TinyIconPlusSquare fill="#666" />
     </span>
   )
 }
diff --git a/examples/sites/demos/pc/app/tree/slot.vue b/examples/sites/demos/pc/app/tree/slot.vue
index a119573a8..b3f5b8bbd 100644
--- a/examples/sites/demos/pc/app/tree/slot.vue
+++ b/examples/sites/demos/pc/app/tree/slot.vue
@@ -13,7 +13,7 @@
         </template>
         <!-- 默认插槽 -->
         <template #default="node">
-          <div style="color: red">{{ node.data.label }}</div>
+          <div style="margin: 0 8px">{{ node.data.label }}</div>
         </template>
         <!-- 后缀插槽 -->
         <template #suffix="{ node }">
@@ -22,7 +22,7 @@
         <!-- 操作插槽 -->
         <template #operation="{ node }">
           <div style="width: 80px; text-align: right">
-            <tiny-link :underline="true" title="一些功能操作" type="primary"> 新增 </tiny-link> &nbsp;
+            <tiny-link :underline="true" title="一些功能操作"> 新增 </tiny-link> &nbsp;
             <tiny-link :underline="true" title="一些功能操作" type="danger"> 删除 </tiny-link>
           </div>
         </template>
@@ -87,7 +87,7 @@ export default {
     renderContent(h, { node, data }) {
       return (
         <span>
-          {node.label} <TinyIconPlusSquare fill="red" />
+          {node.label} <TinyIconPlusSquare fill="#666" />
         </span>
       )
     }
diff --git a/packages/theme/src/button/vars.less b/packages/theme/src/button/vars.less
index 1b7582deb..3480f23dc 100644
--- a/packages/theme/src/button/vars.less
+++ b/packages/theme/src/button/vars.less
@@ -150,35 +150,35 @@
   // primary 主题时按钮朴素背景色
   --tv-Button-bg-color-plain-primary: var(--tv-color-act-primary-bg-white);
   // primary 主题时按钮朴素边框色
-  --tv-Button-border-color-plain-primary: var(--tv-color-act-primary-border-active);
+  --tv-Button-border-color-plain-primary: var(--tv-color-act-primary-border-light);
 
   // success 主题时按钮朴素文本色
   --tv-Button-text-color-plain-success: var(--tv-color-act-success-text);
   // success 主题时按钮朴素背景色
   --tv-Button-bg-color-plain-success: var(--tv-color-act-success-bg-light);
   // success 主题时按钮朴素边框色
-  --tv-Button-border-color-plain-success: var(--tv-color-act-success-border-active-1);
+  --tv-Button-border-color-plain-success: var(--tv-color-act-success-border-light);
 
   // warning 主题时按钮朴素文本色
   --tv-Button-text-color-plain-warning: var(--tv-color-act-warning-text);
   // warning 主题时按钮朴素背景色
   --tv-Button-bg-color-plain-warning: var(--tv-color-act-warning-bg-light);
   // warning 主题时按钮朴素边框色
-  --tv-Button-border-color-plain-warning: var(--tv-color-act-warning-border-active-1);
+  --tv-Button-border-color-plain-warning: var(--tv-color-act-warning-border-light);
 
   // danger 主题时按钮朴素文本色
   --tv-Button-text-color-plain-danger: var(--tv-color-act-danger-text);
   // danger 主题时按钮朴素背景色
   --tv-Button-bg-color-plain-danger: var(--tv-color-act-danger-bg-light);
   // danger 主题时按钮朴素边框色
-  --tv-Button-border-color-plain-danger: var(--tv-color-act-danger-border-active-1);
+  --tv-Button-border-color-plain-danger: var(--tv-color-act-danger-border-light);
 
   // info 主题时按钮朴素文本色
   --tv-Button-text-color-plain-info: var(--tv-color-act-info-text);
   // info 主题时按钮朴素背景色
   --tv-Button-bg-color-plain-info: var(--tv-color-act-info-bg-light);
   // info 主题时按钮朴素边框色
-  --tv-Button-border-color-plain-info: var(--tv-color-act-info-border-active-1);
+  --tv-Button-border-color-plain-info: var(--tv-color-act-info-border-light);
 
   // 幽灵态和plain是平级的关系. 如果同时存在，优先级不能保证稳定。
 
diff --git a/packages/vue/src/tree/src/pc.vue b/packages/vue/src/tree/src/pc.vue
index 175861f73..7a34213a7 100644
--- a/packages/vue/src/tree/src/pc.vue
+++ b/packages/vue/src/tree/src/pc.vue
@@ -146,8 +146,8 @@
         </div>
       </div>
       <div class="tiny-tree__del-footer">
-        <tiny-button @click="cancelDelete">{{ t('ui.base.cancel') }}</tiny-button>
-        <tiny-button type="primary" @click="deleteAction">{{ t('ui.base.confirm') }}</tiny-button>
+        <tiny-button @click="cancelDelete" size="mini">{{ t('ui.base.cancel') }}</tiny-button>
+        <tiny-button type="primary" @click="deleteAction" size="mini">{{ t('ui.base.confirm') }}</tiny-button>
       </div>
     </tiny-popover>
   </div>

From e92d2ad02ff0c182eb7fb8c0f9184bad58fc1fae Mon Sep 17 00:00:00 2001
From: James <72028410+James-9696@users.noreply.github.com>
Date: Sat, 2 Nov 2024 07:52:26 -0700
Subject: [PATCH 36/65] fix(dialog-box): [dialog-box] modify demo (#2472)

---
 examples/sites/demos/apis/dialog-box.js       |  2 +-
 .../dialog-width-composition-api.vue          | 20 ++++++++++++----
 .../pc/app/dialog-box/dialog-width.spec.ts    |  3 ++-
 .../demos/pc/app/dialog-box/dialog-width.vue  | 24 +++++++++++++++----
 .../pc/app/dialog-box/webdoc/dialog-box.js    | 14 ++++++-----
 5 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/examples/sites/demos/apis/dialog-box.js b/examples/sites/demos/apis/dialog-box.js
index 0782c0409..5442b4250 100644
--- a/examples/sites/demos/apis/dialog-box.js
+++ b/examples/sites/demos/apis/dialog-box.js
@@ -133,7 +133,7 @@ export default {
             'en-US': 'Achieve the maximum height of the window'
           },
           mode: ['pc'],
-          pcDemo: 'form-in-dialog'
+          pcDemo: 'dialog-width'
         },
         {
           name: 'modal',
diff --git a/examples/sites/demos/pc/app/dialog-box/dialog-width-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/dialog-width-composition-api.vue
index 4e66ea6b6..56b21abcd 100644
--- a/examples/sites/demos/pc/app/dialog-box/dialog-width-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/dialog-width-composition-api.vue
@@ -1,9 +1,18 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility1 = true" type="info">宽度 30%</tiny-button>
+    <tiny-button @click="boxVisibility1 = true" type="info">宽度30% 最大高度200px</tiny-button>
     <tiny-button @click="boxVisibility2 = true">宽度 60%</tiny-button>
-    <tiny-dialog-box v-model:visible="boxVisibility1" title="消息" width="30%">
-      <span>dialog-box 内容</span>
+    <tiny-dialog-box v-model:visible="boxVisibility1" title="消息" width="30%" max-height="200px">
+      <div>
+        <tiny-radio-group>
+          <tiny-radio :label="0">产品</tiny-radio>
+        </tiny-radio-group>
+      </div>
+      <div>
+        <tiny-radio-group>
+          <tiny-radio :label="0">研发</tiny-radio>
+        </tiny-radio-group>
+      </div>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility1 = false">确 定</tiny-button>
       </template>
@@ -19,7 +28,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { TinyButton, TinyDialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox, TinyRadio, TinyRadioGroup } from '@opentiny/vue'
 
 const boxVisibility1 = ref(false)
 const boxVisibility2 = ref(false)
@@ -29,4 +38,7 @@ const boxVisibility2 = ref(false)
 .mydialogBox {
   background: rgba(150, 137, 137, 0.8);
 }
+.demo-class {
+  height: 300px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/dialog-box/dialog-width.spec.ts b/examples/sites/demos/pc/app/dialog-box/dialog-width.spec.ts
index 6e6908043..0fc1ec698 100644
--- a/examples/sites/demos/pc/app/dialog-box/dialog-width.spec.ts
+++ b/examples/sites/demos/pc/app/dialog-box/dialog-width.spec.ts
@@ -1,11 +1,12 @@
 import { test, expect } from '@playwright/test'
 
-test('dialogBox 弹窗的宽度', async ({ page }) => {
+test('dialogBox 弹窗的宽度和最大高度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#dialog-width')
 
   const dialogBox = page.locator('.tiny-dialog-box')
   await page.getByRole('button', { name: /30%/ }).click()
+  await expect(dialogBox.first()).toHaveCSS('max-height', '200px')
   await page.getByRole('button', { name: 'Close' }).click()
   await page.getByRole('button', { name: /60%/ }).click()
   await expect(dialogBox.nth(1)).toBeVisible()
diff --git a/examples/sites/demos/pc/app/dialog-box/dialog-width.vue b/examples/sites/demos/pc/app/dialog-box/dialog-width.vue
index 41e5a591f..a9f8f2475 100644
--- a/examples/sites/demos/pc/app/dialog-box/dialog-width.vue
+++ b/examples/sites/demos/pc/app/dialog-box/dialog-width.vue
@@ -1,9 +1,18 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility1 = true" type="info">宽度 30%</tiny-button>
+    <tiny-button @click="boxVisibility1 = true" type="info">宽度30% 最大高度200px</tiny-button>
     <tiny-button @click="boxVisibility2 = true">宽度 60%</tiny-button>
-    <tiny-dialog-box v-model:visible="boxVisibility1" title="消息" width="30%">
-      <span>dialog-box 内容</span>
+    <tiny-dialog-box v-model:visible="boxVisibility1" title="消息" width="30%" max-height="200px">
+      <div>
+        <tiny-radio-group>
+          <tiny-radio :label="0">产品</tiny-radio>
+        </tiny-radio-group>
+      </div>
+      <div>
+        <tiny-radio-group>
+          <tiny-radio :label="0">研发</tiny-radio>
+        </tiny-radio-group>
+      </div>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility1 = false">确 定</tiny-button>
       </template>
@@ -18,12 +27,14 @@
 </template>
 
 <script lang="jsx">
-import { TinyButton, TinyDialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox, TinyRadio, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
     TinyButton,
-    TinyDialogBox
+    TinyDialogBox,
+    TinyRadio,
+    TinyRadioGroup
   },
   data() {
     return {
@@ -38,4 +49,7 @@ export default {
 .mydialogBox {
   background: rgba(150, 137, 137, 0.8);
 }
+.demo-class {
+  height: 300px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/dialog-box/webdoc/dialog-box.js b/examples/sites/demos/pc/app/dialog-box/webdoc/dialog-box.js
index fbad4a45f..5d98bf771 100644
--- a/examples/sites/demos/pc/app/dialog-box/webdoc/dialog-box.js
+++ b/examples/sites/demos/pc/app/dialog-box/webdoc/dialog-box.js
@@ -111,12 +111,14 @@ export default {
     {
       demoId: 'dialog-width',
       name: {
-        'zh-CN': '弹窗的宽度',
-        'en-US': 'Wideness of the pop-up window'
+        'zh-CN': '弹窗的宽度和最大高度',
+        'en-US': 'The width and height of the pop-up window'
       },
       desc: {
-        'zh-CN': '<p>可通过<code>width</code>属性设置指定弹窗的宽度。</p>\n',
-        'en-US': '<p>The<code>width</code>attribute specifies the width of the pop-up window. </p>\n'
+        'zh-CN':
+          '<p>可通过<code>width</code>属性设置指定弹窗的宽度，<code>max-height</code>属性设置窗口最大高度。</p>\n',
+        'en-US':
+          '<p>The<code>width</code>attribute specifies the width of the pop-up window,<code>max-height</code> Property Setting the maximum height of the window.</p>\n'
       },
       codeFiles: ['dialog-width.vue']
     },
@@ -243,9 +245,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>可通过<code>is-form-reset</code>属性设置<code>false</code>,关闭弹窗不重置数据，<code>resize</code>属性设置窗口最大化，<code>max-height</code>属性设置窗口最大高度。</p>',
+          '<p>可通过<code>is-form-reset</code>属性设置<code>false</code>,关闭弹窗不重置数据，<code>resize</code>属性设置窗口最大化。</p>',
         'en-US':
-          '<p>By setting the<code>is-form-reset</code>attribute to <code>false</code>, close the pop-up window without resetting the data,<code>resize</code> Property Setting Window Maximization,<code>max-height</code> Property Setting the maximum height of the window.</p>'
+          '<p>By setting the<code>is-form-reset</code>attribute to <code>false</code>, close the pop-up window without resetting the data,<code>resize</code> Property Setting Window Maximization.</p>'
       },
       codeFiles: ['form-in-dialog.vue']
     },

From 1955deb3e747e7488360e148bb5308a7d1e50996 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Mon, 4 Nov 2024 11:42:16 +0800
Subject: [PATCH 37/65] docs(input): [input] optimizing input component example
 (#2476)

---
 .../demos/mobile/app/input/webdoc/input.js    |  2 +-
 .../input/display-only-composition-api.vue    |  2 +-
 .../sites/demos/pc/app/input/display-only.vue |  2 +-
 .../pc/app/input/native-composition-api.vue   |  8 +++--
 examples/sites/demos/pc/app/input/native.vue  |  8 +++--
 .../pc/app/input/type-composition-api.vue     | 30 -----------------
 .../sites/demos/pc/app/input/type.spec.ts     | 16 +---------
 examples/sites/demos/pc/app/input/type.vue    | 32 +------------------
 .../sites/demos/pc/app/input/webdoc/input.js  | 13 ++++++--
 9 files changed, 27 insertions(+), 86 deletions(-)

diff --git a/examples/sites/demos/mobile/app/input/webdoc/input.js b/examples/sites/demos/mobile/app/input/webdoc/input.js
index db62ccbd6..f9cb87be7 100644
--- a/examples/sites/demos/mobile/app/input/webdoc/input.js
+++ b/examples/sites/demos/mobile/app/input/webdoc/input.js
@@ -37,7 +37,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过对应的 <code>type</code> 属性，可以设置为对应的类型。默认为 text，可选值为 text，textarea 和其他 原生 input 的 type 值</p>',
+          '<p>通过对应的 <code>type</code> 属性，可以设置为对应的类型。默认为 text，可选值为 text，number 等其他 原生 input 的 type 值</p>',
         'en-US':
           '<p>You can set the corresponding type through the corresponding <code>type</code> attribute. The default value is text. The options are text, textarea, and other type values of the native input</p>'
       },
diff --git a/examples/sites/demos/pc/app/input/display-only-composition-api.vue b/examples/sites/demos/pc/app/input/display-only-composition-api.vue
index 983d95092..3001c7386 100644
--- a/examples/sites/demos/pc/app/input/display-only-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/display-only-composition-api.vue
@@ -17,7 +17,7 @@
       <tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only></tiny-input>
     </p>
     <p>
-      <label>display-only&autosize：</label>
+      <label>display-only & autosize：</label>
       <tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only autosize></tiny-input>
     </p>
   </div>
diff --git a/examples/sites/demos/pc/app/input/display-only.vue b/examples/sites/demos/pc/app/input/display-only.vue
index e2cd17cd4..6bd8c0be2 100644
--- a/examples/sites/demos/pc/app/input/display-only.vue
+++ b/examples/sites/demos/pc/app/input/display-only.vue
@@ -17,7 +17,7 @@
       <tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only></tiny-input>
     </p>
     <p>
-      <label>display-only&autosize：</label>
+      <label>display-only & autosize：</label>
       <tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only autosize></tiny-input>
     </p>
   </div>
diff --git a/examples/sites/demos/pc/app/input/native-composition-api.vue b/examples/sites/demos/pc/app/input/native-composition-api.vue
index a5ad3b794..de039d301 100644
--- a/examples/sites/demos/pc/app/input/native-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/native-composition-api.vue
@@ -21,7 +21,6 @@
     <br />
     <div>
       <span>autocomplete="on"</span>
-      <br /><br />
       <form>
         <tiny-input v-model="inputAutocomplete" autocomplete="on" name="email" type="email"></tiny-input>
       </form>
@@ -40,11 +39,16 @@ const inputAutocomplete = ref('')
 </script>
 
 <style scoped>
-.demo-input > p > span {
+.demo-input > p > span,
+.demo-input > div > span {
   display: inline-block;
   width: 130px;
 }
 .demo-input .tiny-input {
   width: 250px;
 }
+.demo-input > div {
+  display: flex;
+  align-items: center;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/input/native.vue b/examples/sites/demos/pc/app/input/native.vue
index dd172e4da..60074c6a8 100644
--- a/examples/sites/demos/pc/app/input/native.vue
+++ b/examples/sites/demos/pc/app/input/native.vue
@@ -21,7 +21,6 @@
     <br />
     <div>
       <span>autocomplete="on"</span>
-      <br /><br />
       <form>
         <tiny-input v-model="inputAutocomplete" autocomplete="on" name="email" type="email"></tiny-input>
       </form>
@@ -48,11 +47,16 @@ export default {
 </script>
 
 <style scoped>
-.demo-input > p > span {
+.demo-input > p > span,
+.demo-input > div > span {
   display: inline-block;
   width: 130px;
 }
 .demo-input .tiny-input {
   width: 250px;
 }
+.demo-input > div {
+  display: flex;
+  align-items: center;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/input/type-composition-api.vue b/examples/sites/demos/pc/app/input/type-composition-api.vue
index 6cc0d1421..fd0d4641a 100644
--- a/examples/sites/demos/pc/app/input/type-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/type-composition-api.vue
@@ -2,20 +2,7 @@
   <div class="demo-input">
     <tiny-input v-model="text" placeholder="text"></tiny-input>
     <tiny-input type="password" v-model="password" placeholder="password"></tiny-input>
-    <tiny-input type="textarea" v-model="textarea" placeholder="textarea"></tiny-input>
-    <tiny-input type="email" v-model="email" placeholder="email"></tiny-input>
     <tiny-input type="number" v-model="number" placeholder="number"></tiny-input>
-    <tiny-input type="tel" v-model="tel" placeholder="tel"></tiny-input>
-    <tiny-input type="url" v-model="url" placeholder="url"></tiny-input>
-    <tiny-input type="hidden"></tiny-input>
-    <tiny-input type="color" v-model="color"></tiny-input>
-    <tiny-input type="date" v-model="date"></tiny-input>
-    <tiny-input type="month" v-model="month"></tiny-input>
-    <tiny-input type="week" v-model="week"></tiny-input>
-    <tiny-input type="datetime-local" v-model="datetime"></tiny-input>
-    <tiny-input type="time" v-model="time"></tiny-input>
-    <tiny-input type="file" v-model="file"></tiny-input>
-    <tiny-input type="range" v-model="range"></tiny-input>
   </div>
 </template>
 
@@ -25,19 +12,7 @@ import { TinyInput } from '@opentiny/vue'
 
 const text = ref('')
 const password = ref('')
-const textarea = ref('')
-const email = ref('')
 const number = ref('')
-const tel = ref('')
-const url = ref('')
-const color = ref('#000000')
-const date = ref('')
-const month = ref('')
-const week = ref('')
-const datetime = ref('')
-const time = ref('')
-const file = ref('')
-const range = ref('')
 </script>
 
 <style scoped>
@@ -45,9 +20,4 @@ const range = ref('')
   width: 250px;
   margin: 5px;
 }
-
-.demo-input .tiny-textarea {
-  width: 250px;
-  margin: 5px;
-}
 </style>
diff --git a/examples/sites/demos/pc/app/input/type.spec.ts b/examples/sites/demos/pc/app/input/type.spec.ts
index b6bf8d89f..7de0f9232 100644
--- a/examples/sites/demos/pc/app/input/type.spec.ts
+++ b/examples/sites/demos/pc/app/input/type.spec.ts
@@ -4,21 +4,7 @@ test('[Input]type', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('input#type')
   const input = page.locator('.demo-input > .tiny-input >  .tiny-input-display-only > input')
-  const textArea = page.locator('.demo-input > .tiny-textarea > .tiny-textarea-display-only > textarea')
   await expect(input.nth(0)).toHaveAttribute('type', 'text')
   await expect(input.nth(1)).toHaveAttribute('type', 'password')
-  await expect(input.nth(2)).toHaveAttribute('type', 'email')
-  await expect(input.nth(3)).toHaveAttribute('type', 'number')
-  await expect(input.nth(4)).toHaveAttribute('type', 'tel')
-  await expect(input.nth(5)).toHaveAttribute('type', 'url')
-  await expect(input.nth(6)).toHaveAttribute('type', 'hidden')
-  await expect(input.nth(7)).toHaveAttribute('type', 'color')
-  await expect(input.nth(8)).toHaveAttribute('type', 'date')
-  await expect(input.nth(9)).toHaveAttribute('type', 'month')
-  await expect(input.nth(10)).toHaveAttribute('type', 'week')
-  await expect(input.nth(11)).toHaveAttribute('type', 'datetime-local')
-  await expect(input.nth(12)).toHaveAttribute('type', 'time')
-  await expect(input.nth(13)).toHaveAttribute('type', 'file')
-  await expect(input.nth(14)).toHaveAttribute('type', 'range')
-  await expect(textArea).toBeVisible()
+  await expect(input.nth(2)).toHaveAttribute('type', 'number')
 })
diff --git a/examples/sites/demos/pc/app/input/type.vue b/examples/sites/demos/pc/app/input/type.vue
index 9d98d198d..637f2ab28 100644
--- a/examples/sites/demos/pc/app/input/type.vue
+++ b/examples/sites/demos/pc/app/input/type.vue
@@ -2,20 +2,7 @@
   <div class="demo-input">
     <tiny-input v-model="text" placeholder="text"></tiny-input>
     <tiny-input type="password" v-model="password" placeholder="password"></tiny-input>
-    <tiny-input type="textarea" v-model="textarea" placeholder="textarea"></tiny-input>
-    <tiny-input type="email" v-model="email" placeholder="email"></tiny-input>
     <tiny-input type="number" v-model="number" placeholder="number"></tiny-input>
-    <tiny-input type="tel" v-model="tel" placeholder="tel"></tiny-input>
-    <tiny-input type="url" v-model="url" placeholder="url"></tiny-input>
-    <tiny-input type="hidden"></tiny-input>
-    <tiny-input type="color" v-model="color"></tiny-input>
-    <tiny-input type="date" v-model="date"></tiny-input>
-    <tiny-input type="month" v-model="month"></tiny-input>
-    <tiny-input type="week" v-model="week"></tiny-input>
-    <tiny-input type="datetime-local" v-model="datetime"></tiny-input>
-    <tiny-input type="time" v-model="time"></tiny-input>
-    <tiny-input type="file" v-model="file"></tiny-input>
-    <tiny-input type="range" v-model="range"></tiny-input>
   </div>
 </template>
 
@@ -30,19 +17,7 @@ export default {
     return {
       text: '',
       password: '',
-      textarea: '',
-      email: '',
-      number: '',
-      tel: '',
-      url: '',
-      color: '#000000',
-      date: '',
-      month: '',
-      week: '',
-      datetime: '',
-      time: '',
-      file: '',
-      range: ''
+      number: ''
     }
   }
 }
@@ -53,9 +28,4 @@ export default {
   width: 250px;
   margin: 5px;
 }
-
-.demo-input .tiny-textarea {
-  width: 250px;
-  margin: 5px;
-}
 </style>
diff --git a/examples/sites/demos/pc/app/input/webdoc/input.js b/examples/sites/demos/pc/app/input/webdoc/input.js
index f8151868a..42efcaf3f 100644
--- a/examples/sites/demos/pc/app/input/webdoc/input.js
+++ b/examples/sites/demos/pc/app/input/webdoc/input.js
@@ -227,7 +227,8 @@ export default {
         'en-US': 'Memory History Input'
       },
       desc: {
-        'zh-CN': '<p>参考以下例子，输入完成后，输入会被记住。</p>',
+        'zh-CN':
+          '<p>通过组件实例方法 <code> addMemory </code> 添加历史输入数据，输入完成后，输入会被记住。通过 <code> memory-space </code> 属性配置最多可以被记录的条数。</p>',
         'en-US': '<p>Refer to the following example. After the input is complete, the input will be remembered</p>'
       },
       codeFiles: ['method-addMemory.vue']
@@ -253,9 +254,15 @@ export default {
         'en-US': 'Native Attribute'
       },
       desc: {
-        'zh-CN': '<p>可设置 <code>name</code>  <code>disabled</code> <code>readonly</code>等原生属性。</p>\n',
+        'zh-CN': `
+        <p>可设置 <code>name</code>  <code>disabled</code> <code>readonly</code>等原生属性。</p>
+         <div class="tip custom-block">
+            <p class="custom-block-title"> 温馨提示： </p>
+            <p>原生属性是透传给 <code> input </code>原生标签的，功能和使用原生标签等同。</p>
+          </div>
+        `,
         'en-US':
-          '<p>You can set native attributes such as <code>name</code> <code>disabled</code> <code>readonly</code> . </p>\n'
+          '<p>You can set native attributes such as <code>name</code> <code>disabled</code> <code>readonly</code> . </p>'
       },
       codeFiles: ['native.vue']
     },

From 7f93ca9a635f714723a8e130304ac1721ab359d5 Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Sun, 3 Nov 2024 23:01:15 -0800
Subject: [PATCH 38/65] feat(locales): [locales] Optimize the style and demo

---
 .../pc/app/amount/size-composition-api.vue    |  6 +++
 examples/sites/demos/pc/app/amount/size.vue   |  6 +++
 .../area/custom-service-composition-api.vue   |  4 +-
 .../demos/pc/app/area/custom-service.spec.ts  |  2 +-
 .../demos/pc/app/area/custom-service.vue      |  4 +-
 .../company/basic-usage-composition-api.vue   |  5 ++-
 .../demos/pc/app/company/basic-usage.vue      |  5 ++-
 .../custom-service-composition-api.vue        | 30 ++++++++-----
 .../demos/pc/app/company/custom-service.vue   | 30 ++++++++-----
 .../custom-show-num-composition-api.vue       | 10 ++++-
 .../demos/pc/app/company/custom-show-num.vue  | 10 ++++-
 .../country/basic-usage-composition-api.vue   |  5 ++-
 .../demos/pc/app/country/basic-usage.vue      |  5 ++-
 .../custom-service-composition-api.vue        | 10 ++++-
 .../demos/pc/app/country/custom-service.vue   | 10 ++++-
 .../pc/app/country/fields-composition-api.vue | 10 ++++-
 .../sites/demos/pc/app/country/fields.vue     | 10 ++++-
 .../currency/basic-usage-composition-api.vue  |  5 ++-
 .../demos/pc/app/currency/basic-usage.vue     |  5 ++-
 .../custom-service-composition-api.vue        | 10 ++++-
 .../demos/pc/app/currency/custom-service.vue  | 10 ++++-
 .../disable-currency-composition-api.vue      |  8 +++-
 .../pc/app/currency/disable-currency.vue      |  8 +++-
 .../app/currency/fields-composition-api.vue   | 10 ++++-
 .../sites/demos/pc/app/currency/fields.vue    | 10 ++++-
 .../app/currency/filter-composition-api.vue   | 13 +++++-
 .../sites/demos/pc/app/currency/filter.vue    | 13 +++++-
 .../currency/set-default-composition-api.vue  | 10 ++++-
 ...default-custom-service-composition-api.vue | 24 ++++++----
 .../currency/set-default-custom-service.vue   | 24 ++++++----
 .../demos/pc/app/currency/set-default.vue     | 10 ++++-
 .../pc/app/currency/size-composition-api.vue  | 11 ++++-
 examples/sites/demos/pc/app/currency/size.vue | 11 ++++-
 .../app/dept/auto-select-composition-api.vue  | 10 ++++-
 .../sites/demos/pc/app/dept/auto-select.vue   | 10 ++++-
 .../app/dept/basic-usage-composition-api.vue  | 10 ++++-
 .../sites/demos/pc/app/dept/basic-usage.vue   | 10 ++++-
 .../dept/before-confirm-composition-api.vue   | 10 ++---
 .../demos/pc/app/dept/before-confirm.vue      | 10 ++---
 .../dept/custom-service-composition-api.vue   | 20 ++++++---
 .../demos/pc/app/dept/custom-service.vue      | 20 ++++++---
 .../app/dept/dept-cancel-composition-api.vue  | 10 ++---
 .../sites/demos/pc/app/dept/dept-cancel.vue   | 10 ++---
 .../app/dept/dept-close-composition-api.vue   | 10 ++++-
 .../sites/demos/pc/app/dept/dept-close.vue    | 10 ++++-
 .../app/dept/dept-confirm-composition-api.vue | 10 ++---
 .../sites/demos/pc/app/dept/dept-confirm.vue  | 10 ++---
 .../app/dept/dept-events-composition-api.vue  | 10 ++++-
 .../sites/demos/pc/app/dept/dept-events.vue   | 10 ++++-
 .../dept/dept-selected-composition-api.vue    | 10 ++++-
 .../sites/demos/pc/app/dept/dept-selected.vue | 10 ++++-
 .../dept/dynamic-disable-composition-api.vue  | 10 ++++-
 .../demos/pc/app/dept/dynamic-disable.vue     | 10 ++++-
 .../pc/app/dept/size-composition-api.vue      | 16 ++++++-
 examples/sites/demos/pc/app/dept/size.vue     | 16 ++++++-
 .../dept/slot-hrapprover-composition-api.vue  | 18 +++++---
 .../demos/pc/app/dept/slot-hrapprover.vue     | 18 +++++---
 .../pc/app/dept/title-composition-api.vue     | 10 ++++-
 examples/sites/demos/pc/app/dept/title.vue    | 10 ++++-
 .../basic-usage-composition-api.vue           |  5 ++-
 .../demos/pc/app/drop-roles/basic-usage.vue   |  5 ++-
 .../change-role-event-composition-api.vue     | 10 ++++-
 .../pc/app/drop-roles/change-role-event.vue   | 10 ++++-
 .../custom-service-composition-api.vue        | 24 ++++++----
 .../pc/app/drop-roles/custom-service.vue      | 24 ++++++----
 .../app/drop-roles/size-composition-api.vue   | 15 ++++---
 .../sites/demos/pc/app/drop-roles/size.vue    | 15 ++++---
 .../basic-usage-composition-api.vue           | 14 +++++-
 .../demos/pc/app/hrapprover/basic-usage.vue   | 14 +++++-
 .../category-type-composition-api.vue         | 20 ++++++---
 .../demos/pc/app/hrapprover/category-type.vue | 20 ++++++---
 .../custom-service-composition-api.vue        | 22 +++++++---
 .../pc/app/hrapprover/custom-service.vue      | 22 +++++++---
 .../hrapprover/disabled-composition-api.vue   |  8 +++-
 .../demos/pc/app/hrapprover/disabled.vue      |  8 +++-
 .../custom-service-composition-api.vue        |  6 +--
 .../pc/app/locales/custom-service.spec.ts     |  2 +-
 .../demos/pc/app/locales/custom-service.vue   |  6 +--
 .../app/user/allow-copy-composition-api.vue   | 10 ++++-
 .../sites/demos/pc/app/user/allow-copy.vue    | 10 ++++-
 .../app/user/basic-usage-composition-api.vue  | 10 ++++-
 .../sites/demos/pc/app/user/basic-usage.vue   | 10 ++++-
 .../pc/app/user/batch-composition-api.vue     | 44 +++++++++++--------
 examples/sites/demos/pc/app/user/batch.vue    |  8 +++-
 .../app/user/cache-users-composition-api.vue  |  5 ++-
 .../sites/demos/pc/app/user/cache-users.vue   |  5 ++-
 ...-show-overflow-tooltip-composition-api.vue | 24 ++++++----
 .../user/collapse-show-overflow-tooltip.vue   | 24 ++++++----
 .../user/collapse-tags -composition-api.vue   | 26 +++++++----
 .../demos/pc/app/user/collapse-tags .vue      | 26 +++++++----
 .../custom-placeholder-composition-api.vue    | 10 ++++-
 .../demos/pc/app/user/custom-placeholder.vue  | 10 ++++-
 .../user/custom-service-composition-api.vue   |  5 ++-
 .../demos/pc/app/user/custom-service.vue      |  5 ++-
 .../app/user/custom-sort-composition-api.vue  | 10 ++++-
 .../sites/demos/pc/app/user/custom-sort.vue   |  5 ++-
 .../app/user/delay-load-composition-api.vue   | 10 ++++-
 .../sites/demos/pc/app/user/delay-load.vue    | 10 ++++-
 .../app/user/display-only-composition-api.vue | 10 ++++-
 .../sites/demos/pc/app/user/display-only.vue  | 10 ++++-
 .../user/dynamic-disable-composition-api.vue  | 10 ++++-
 .../demos/pc/app/user/dynamic-disable.vue     | 10 ++++-
 .../app/user/event-change-composition-api.vue | 10 ++++-
 .../sites/demos/pc/app/user/event-change.vue  | 10 ++++-
 .../app/user/event-error-composition-api.vue  | 10 ++++-
 .../sites/demos/pc/app/user/event-error.vue   | 10 ++++-
 .../hidden-tips-disable-composition-api.vue   |  8 +++-
 .../demos/pc/app/user/hidden-tips-disable.vue |  8 +++-
 .../user/hide-selected-composition-spi.vue    | 10 ++++-
 .../sites/demos/pc/app/user/hide-selected.vue | 10 ++++-
 ...after-input-the-length-composition-api.vue | 10 ++++-
 .../app/user/load-after-input-the-length.vue  | 10 ++++-
 .../user/multiple-users-composition-api.vue   | 10 ++++-
 ...ple-users-hover-expand-composition-api.vue | 10 ++++-
 .../app/user/multiple-users-hover-expand.vue  | 10 ++++-
 .../multiple-users-tag-composition-api.vue    | 10 ++++-
 .../demos/pc/app/user/multiple-users-tag.vue  | 10 ++++-
 .../demos/pc/app/user/multiple-users.vue      | 10 ++++-
 .../app/user/nodata-text-composition-api.vue  | 10 ++++-
 .../sites/demos/pc/app/user/nodata-text.vue   | 10 ++++-
 .../app/user/tag-copy-all-composition-api.vue |  8 +++-
 .../sites/demos/pc/app/user/tag-copy-all.vue  |  8 +++-
 .../pc/app/user/tag-copy-composition-api.vue  |  8 +++-
 examples/sites/demos/pc/app/user/tag-copy.vue |  8 +++-
 .../app/user/text-field-composition-api.vue   | 10 ++++-
 .../sites/demos/pc/app/user/text-field.vue    | 10 ++++-
 .../app/user/user-options-composition-api.vue | 24 ++++++----
 .../sites/demos/pc/app/user/user-options.vue  | 24 ++++++----
 .../user/user-select-size-composition-api.vue |  5 ++-
 .../demos/pc/app/user/user-select-size.vue    |  5 ++-
 .../app/user/value-field-composition-api.vue  |  5 ++-
 .../sites/demos/pc/app/user/value-field.vue   |  5 ++-
 .../app/user/value-split-composition-api.vue  |  5 ++-
 .../sites/demos/pc/app/user/value-split.vue   |  5 ++-
 packages/theme/src/area/index.less            |  9 ++--
 packages/theme/src/area/vars.less             | 17 +++++++
 packages/theme/src/locales/index.less         | 36 ++++++++++++---
 packages/theme/src/locales/vars.less          | 33 ++++++++++++++
 packages/vue/src/locales/package.json         |  2 +-
 packages/vue/src/locales/src/pc.vue           | 11 ++---
 140 files changed, 1283 insertions(+), 340 deletions(-)
 create mode 100644 packages/theme/src/area/vars.less
 create mode 100644 packages/theme/src/locales/vars.less

diff --git a/examples/sites/demos/pc/app/amount/size-composition-api.vue b/examples/sites/demos/pc/app/amount/size-composition-api.vue
index c14d9538c..7341e553d 100644
--- a/examples/sites/demos/pc/app/amount/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/amount/size-composition-api.vue
@@ -1,5 +1,11 @@
 <template>
   <tiny-amount size="medium" v-model="value" :date="date"></tiny-amount>
+  <br />
+  <tiny-amount v-model="value" :date="date"></tiny-amount>
+  <br />
+  <tiny-amount size="small" v-model="value" :date="date"></tiny-amount>
+  <br />
+  <tiny-amount size="mini" v-model="value" :date="date"></tiny-amount>
 </template>
 
 <script setup lang="jsx">
diff --git a/examples/sites/demos/pc/app/amount/size.vue b/examples/sites/demos/pc/app/amount/size.vue
index 20aa9c483..607cd65a8 100644
--- a/examples/sites/demos/pc/app/amount/size.vue
+++ b/examples/sites/demos/pc/app/amount/size.vue
@@ -1,5 +1,11 @@
 <template>
   <tiny-amount size="medium" v-model="value" :date="date"></tiny-amount>
+  <br />
+  <tiny-amount v-model="value" :date="date"></tiny-amount>
+  <br />
+  <tiny-amount size="small" v-model="value" :date="date"></tiny-amount>
+  <br />
+  <tiny-amount size="mini" v-model="value" :date="date"></tiny-amount>
 </template>
 
 <script lang="jsx">
diff --git a/examples/sites/demos/pc/app/area/custom-service-composition-api.vue b/examples/sites/demos/pc/app/area/custom-service-composition-api.vue
index d4bb2674f..742bd3ac7 100644
--- a/examples/sites/demos/pc/app/area/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/area/custom-service-composition-api.vue
@@ -23,7 +23,7 @@ function getJCR() {
       id: '3623',
       id_and_type: '3623JCR',
       parent_and_type: null,
-      name: 'A公司 Marketing与销售服务部',
+      name: 'A公司销售服务部',
       date_from: '2005/06/21 00:00:00',
       name_en: 'Consumer BG Marketing and Sales Service Dept',
       parent_type: null,
@@ -36,7 +36,7 @@ function getJCR() {
       id: '650561',
       id_and_type: '650561JCR',
       parent_and_type: null,
-      name: 'A公司 Marketing与销售服务部（东莞）',
+      name: 'A公司销售服务部（东莞）',
       date_from: '2012/09/27 00:00:00',
       name_en: 'Consumer BG Marketing and Sales Service Dept (Dongguan)',
       parent_type: null,
diff --git a/examples/sites/demos/pc/app/area/custom-service.spec.ts b/examples/sites/demos/pc/app/area/custom-service.spec.ts
index bd3821496..165353a0b 100644
--- a/examples/sites/demos/pc/app/area/custom-service.spec.ts
+++ b/examples/sites/demos/pc/app/area/custom-service.spec.ts
@@ -34,7 +34,7 @@ test('测试自定义服务', async ({ page }) => {
   await getSelectItem(areaRep).first().click()
   await areaInput.nth(3).click()
   await getSelectItem(areaOffice).first().click()
-  await expect(areaInput.first()).toHaveValue('A公司 Marketing与销售服务部')
+  await expect(areaInput.first()).toHaveValue('A公司销售服务部')
   await expect(areaInput.nth(1)).toHaveValue('火星终端子公司')
   await expect(areaInput.nth(2)).toHaveValue('北京代表处')
   await expect(areaInput.nth(3)).toHaveValue('牙买加办事处')
diff --git a/examples/sites/demos/pc/app/area/custom-service.vue b/examples/sites/demos/pc/app/area/custom-service.vue
index 0086c56cc..396ffa0a2 100644
--- a/examples/sites/demos/pc/app/area/custom-service.vue
+++ b/examples/sites/demos/pc/app/area/custom-service.vue
@@ -30,7 +30,7 @@ export default {
           id: '3623',
           id_and_type: '3623JCR',
           parent_and_type: null,
-          name: 'A公司 Marketing与销售服务部',
+          name: 'A公司销售服务部',
           date_from: '2005/06/21 00:00:00',
           name_en: 'Consumer BG Marketing and Sales Service Dept',
           parent_type: null,
@@ -43,7 +43,7 @@ export default {
           id: '650561',
           id_and_type: '650561JCR',
           parent_and_type: null,
-          name: 'A公司 Marketing与销售服务部（东莞）',
+          name: 'A公司销售服务部（东莞）',
           date_from: '2012/09/27 00:00:00',
           name_en: 'Consumer BG Marketing and Sales Service Dept (Dongguan)',
           parent_type: null,
diff --git a/examples/sites/demos/pc/app/company/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/company/basic-usage-composition-api.vue
index f718b0c7c..3e1e57e3c 100644
--- a/examples/sites/demos/pc/app/company/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/company/basic-usage-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-company-class">
     <tiny-company
       v-model="value"
       placeholder="请选择"
@@ -32,6 +32,9 @@ function change(value) {
 </script>
 
 <style scoped>
+.demo-company-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/company/basic-usage.vue b/examples/sites/demos/pc/app/company/basic-usage.vue
index a659d5f1c..1e7957017 100644
--- a/examples/sites/demos/pc/app/company/basic-usage.vue
+++ b/examples/sites/demos/pc/app/company/basic-usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-company-class">
     <tiny-company
       v-model="value"
       placeholder="请选择"
@@ -39,6 +39,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-company-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/company/custom-service-composition-api.vue b/examples/sites/demos/pc/app/company/custom-service-composition-api.vue
index 3ccc160de..786609b3b 100644
--- a/examples/sites/demos/pc/app/company/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/company/custom-service-composition-api.vue
@@ -1,15 +1,17 @@
 <template>
-  <tiny-company
-    v-model="value"
-    placeholder="请输入"
-    :fetch-company="getCompanyData"
-    :fields="fields"
-    :max="2"
-    @change="change"
-    @clear="clear"
-    is-drop-inherit-width
-    clearable
-  ></tiny-company>
+  <div class="demo-company-class">
+    <tiny-company
+      v-model="value"
+      placeholder="请输入"
+      :fetch-company="getCompanyData"
+      :fields="fields"
+      :max="2"
+      @change="change"
+      @clear="clear"
+      is-drop-inherit-width
+      clearable
+    ></tiny-company>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -53,3 +55,9 @@ function change(value) {
   TinyModal.message({ message: `change:${value}`, status: 'info' })
 }
 </script>
+
+<style scoped>
+.demo-company-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/company/custom-service.vue b/examples/sites/demos/pc/app/company/custom-service.vue
index d8fff6e21..f1ba8eafb 100644
--- a/examples/sites/demos/pc/app/company/custom-service.vue
+++ b/examples/sites/demos/pc/app/company/custom-service.vue
@@ -1,15 +1,17 @@
 <template>
-  <tiny-company
-    v-model="value"
-    placeholder="请输入"
-    :fetch-company="getCompanyData"
-    :fields="fields"
-    :max="2"
-    @change="change"
-    @clear="clear"
-    is-drop-inherit-width
-    clearable
-  ></tiny-company>
+  <div class="demo-company-class">
+    <tiny-company
+      v-model="value"
+      placeholder="请输入"
+      :fetch-company="getCompanyData"
+      :fields="fields"
+      :max="2"
+      @change="change"
+      @clear="clear"
+      is-drop-inherit-width
+      clearable
+    ></tiny-company>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -60,3 +62,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-company-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/company/custom-show-num-composition-api.vue b/examples/sites/demos/pc/app/company/custom-show-num-composition-api.vue
index 80beadaf8..4040ab7f6 100644
--- a/examples/sites/demos/pc/app/company/custom-show-num-composition-api.vue
+++ b/examples/sites/demos/pc/app/company/custom-show-num-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-company v-model="value" clearable :max="2" :disabled="false"></tiny-company>
+  <div class="demo-company-class">
+    <tiny-company v-model="value" clearable :max="2" :disabled="false"></tiny-company>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyCompany } from '@opentiny/vue'
 
 const value = ref('')
 </script>
+
+<style scoped>
+.demo-company-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/company/custom-show-num.vue b/examples/sites/demos/pc/app/company/custom-show-num.vue
index d52056a7f..6c7d991fc 100644
--- a/examples/sites/demos/pc/app/company/custom-show-num.vue
+++ b/examples/sites/demos/pc/app/company/custom-show-num.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-company v-model="value" clearable :max="2" :disabled="false"></tiny-company>
+  <div class="demo-company-class">
+    <tiny-company v-model="value" clearable :max="2" :disabled="false"></tiny-company>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-company-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/country/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/country/basic-usage-composition-api.vue
index 12723c81f..1dbcf389c 100644
--- a/examples/sites/demos/pc/app/country/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/country/basic-usage-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-country-class">
     <tiny-country v-model="value" @change="change"></tiny-country>
     <p>当前选中值：{{ value }}</p>
   </div>
@@ -17,6 +17,9 @@ function change(value) {
 </script>
 
 <style scoped>
+.demo-country-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/country/basic-usage.vue b/examples/sites/demos/pc/app/country/basic-usage.vue
index f1dfc8cd6..ed52524e4 100644
--- a/examples/sites/demos/pc/app/country/basic-usage.vue
+++ b/examples/sites/demos/pc/app/country/basic-usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-country-class">
     <tiny-country v-model="value" @change="change"></tiny-country>
     <p>当前选中值：{{ value }}</p>
   </div>
@@ -26,6 +26,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-country-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/country/custom-service-composition-api.vue b/examples/sites/demos/pc/app/country/custom-service-composition-api.vue
index 209c5e1f8..9fd8980af 100644
--- a/examples/sites/demos/pc/app/country/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/country/custom-service-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-country v-model="value" clearable placeholder="请选择" :fetch-country="getCountryData"></tiny-country>
+  <div class="demo-country-class">
+    <tiny-country v-model="value" clearable placeholder="请选择" :fetch-country="getCountryData"></tiny-country>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -39,3 +41,9 @@ function getCountryData() {
   })
 }
 </script>
+
+<style scoped>
+.demo-country-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/country/custom-service.vue b/examples/sites/demos/pc/app/country/custom-service.vue
index df26f051a..cd95f9604 100644
--- a/examples/sites/demos/pc/app/country/custom-service.vue
+++ b/examples/sites/demos/pc/app/country/custom-service.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-country v-model="value" clearable placeholder="请选择" :fetch-country="getCountryData"></tiny-country>
+  <div class="demo-country-class">
+    <tiny-country v-model="value" clearable placeholder="请选择" :fetch-country="getCountryData"></tiny-country>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -48,3 +50,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-country-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/country/fields-composition-api.vue b/examples/sites/demos/pc/app/country/fields-composition-api.vue
index 5c375816d..0e44950bf 100644
--- a/examples/sites/demos/pc/app/country/fields-composition-api.vue
+++ b/examples/sites/demos/pc/app/country/fields-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-country v-model="value" :fetch-country="getCountryData" :fields="fields" :disabled="false"></tiny-country>
+  <div class="demo-country-class">
+    <tiny-country v-model="value" :fetch-country="getCountryData" :fields="fields" :disabled="false"></tiny-country>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -39,3 +41,9 @@ function getCountryData() {
   })
 }
 </script>
+
+<style scoped>
+.demo-country-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/country/fields.vue b/examples/sites/demos/pc/app/country/fields.vue
index 1ba408c9b..1014ab58a 100644
--- a/examples/sites/demos/pc/app/country/fields.vue
+++ b/examples/sites/demos/pc/app/country/fields.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-country v-model="value" :fetch-country="getCountryData" :fields="fields" :disabled="false"></tiny-country>
+  <div class="demo-country-class">
+    <tiny-country v-model="value" :fetch-country="getCountryData" :fields="fields" :disabled="false"></tiny-country>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -48,3 +50,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-country-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/currency/basic-usage-composition-api.vue
index 6dda7eac2..3ef96825e 100644
--- a/examples/sites/demos/pc/app/currency/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/basic-usage-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-currency v-model="value" placeholder="请选择" @change="change"></tiny-currency>
     <p>当前选中值：{{ value }}</p>
   </div>
@@ -17,6 +17,9 @@ function change(value) {
 </script>
 
 <style scoped>
+.demo-currency-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/currency/basic-usage.vue b/examples/sites/demos/pc/app/currency/basic-usage.vue
index d5e58c80a..7fe06ea21 100644
--- a/examples/sites/demos/pc/app/currency/basic-usage.vue
+++ b/examples/sites/demos/pc/app/currency/basic-usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-currency v-model="value" placeholder="请选择" @change="change"></tiny-currency>
     <p>当前选中值：{{ value }}</p>
   </div>
@@ -26,6 +26,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-currency-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/currency/custom-service-composition-api.vue b/examples/sites/demos/pc/app/currency/custom-service-composition-api.vue
index c26b9ac6c..7abc90ad7 100644
--- a/examples/sites/demos/pc/app/currency/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/custom-service-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-currency v-model="value" :fetch-currency="getCurrencyData" clearable></tiny-currency>
+  <div class="demo-currency-class">
+    <tiny-currency v-model="value" :fetch-currency="getCurrencyData" clearable></tiny-currency>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -65,3 +67,9 @@ function getCurrencyData() {
   })
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/custom-service.vue b/examples/sites/demos/pc/app/currency/custom-service.vue
index 69728f519..fc57ed465 100644
--- a/examples/sites/demos/pc/app/currency/custom-service.vue
+++ b/examples/sites/demos/pc/app/currency/custom-service.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-currency v-model="value" :fetch-currency="getCurrencyData" clearable></tiny-currency>
+  <div class="demo-currency-class">
+    <tiny-currency v-model="value" :fetch-currency="getCurrencyData" clearable></tiny-currency>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -74,3 +76,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/disable-currency-composition-api.vue b/examples/sites/demos/pc/app/currency/disable-currency-composition-api.vue
index 9a3627723..93367fad1 100644
--- a/examples/sites/demos/pc/app/currency/disable-currency-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/disable-currency-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-button @click="Switchover" style="margin-bottom: 10px">启用/禁用</tiny-button>
     <br />
     <tiny-currency v-model="value" placeholder="请选择" @change="change" :disabled="disabled"></tiny-currency>
@@ -21,3 +21,9 @@ function Switchover() {
   disabled.value = !disabled.value
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/disable-currency.vue b/examples/sites/demos/pc/app/currency/disable-currency.vue
index 16ed0c54a..aefa0d5b2 100644
--- a/examples/sites/demos/pc/app/currency/disable-currency.vue
+++ b/examples/sites/demos/pc/app/currency/disable-currency.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-button @click="Switchover" style="margin-bottom: 10px">启用/禁用</tiny-button>
     <br />
     <tiny-currency v-model="value" placeholder="请选择" @change="change" :disabled="disabled"></tiny-currency>
@@ -30,3 +30,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/fields-composition-api.vue b/examples/sites/demos/pc/app/currency/fields-composition-api.vue
index 5aa622e78..72d3e13b7 100644
--- a/examples/sites/demos/pc/app/currency/fields-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/fields-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-currency v-model="value" :fetch-currency="getCurrencyData" :fields="fields"></tiny-currency>
+  <div class="demo-currency-class">
+    <tiny-currency v-model="value" :fetch-currency="getCurrencyData" :fields="fields"></tiny-currency>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -32,3 +34,9 @@ function getCurrencyData() {
   })
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/fields.vue b/examples/sites/demos/pc/app/currency/fields.vue
index e3cfd6013..7c73a9f28 100644
--- a/examples/sites/demos/pc/app/currency/fields.vue
+++ b/examples/sites/demos/pc/app/currency/fields.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-currency v-model="value" :fetch-currency="getCurrencyData" :fields="fields"></tiny-currency>
+  <div class="demo-currency-class">
+    <tiny-currency v-model="value" :fetch-currency="getCurrencyData" :fields="fields"></tiny-currency>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -41,3 +43,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/filter-composition-api.vue b/examples/sites/demos/pc/app/currency/filter-composition-api.vue
index 46b9e1c31..e827de75f 100644
--- a/examples/sites/demos/pc/app/currency/filter-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/filter-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-currency
       v-model="value"
       :drop-style="{ width: '200px', 'min-width': '200px' }"
@@ -22,3 +22,14 @@ const change = (value) => {
   TinyModal.message({ message: `当前值为 ${value}`, status: 'info' })
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/filter.vue b/examples/sites/demos/pc/app/currency/filter.vue
index b999aefe6..1e0863e33 100644
--- a/examples/sites/demos/pc/app/currency/filter.vue
+++ b/examples/sites/demos/pc/app/currency/filter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-currency
       v-model="value"
       :drop-style="{ width: '200px', 'min-width': '200px' }"
@@ -31,3 +31,14 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/set-default-composition-api.vue b/examples/sites/demos/pc/app/currency/set-default-composition-api.vue
index 2b59e4f01..b5f4b7d66 100644
--- a/examples/sites/demos/pc/app/currency/set-default-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/set-default-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-currency v-model="value" placeholder="请选择" set-default></tiny-currency>
+  <div class="demo-currency-class">
+    <tiny-currency v-model="value" placeholder="请选择" set-default></tiny-currency>
+  </div>
 </template>
 
 <script setup>
@@ -8,3 +10,9 @@ import { TinyCurrency } from '@opentiny/vue'
 
 const value = ref('CNY')
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/set-default-custom-service-composition-api.vue b/examples/sites/demos/pc/app/currency/set-default-custom-service-composition-api.vue
index 9669cbfeb..97f5382ec 100644
--- a/examples/sites/demos/pc/app/currency/set-default-custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/set-default-custom-service-composition-api.vue
@@ -1,12 +1,14 @@
 <template>
-  <tiny-currency
-    v-model="value"
-    placeholder="请选择"
-    set-default
-    :fetch-default-currency="fetchDefaultCurrency"
-    :set-default-currency="setDefaultCurrency"
-    @change="change"
-  ></tiny-currency>
+  <div class="demo-currency-class">
+    <tiny-currency
+      v-model="value"
+      placeholder="请选择"
+      set-default
+      :fetch-default-currency="fetchDefaultCurrency"
+      :set-default-currency="setDefaultCurrency"
+      @change="change"
+    ></tiny-currency>
+  </div>
 </template>
 
 <script setup>
@@ -41,3 +43,9 @@ const instance = getCurrentInstance()
 const { $service } = instance.appContext.config.globalProperties
 console.log($service?.base.getEnvInfo())
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/set-default-custom-service.vue b/examples/sites/demos/pc/app/currency/set-default-custom-service.vue
index d32b65a93..28974cae4 100644
--- a/examples/sites/demos/pc/app/currency/set-default-custom-service.vue
+++ b/examples/sites/demos/pc/app/currency/set-default-custom-service.vue
@@ -1,12 +1,14 @@
 <template>
-  <tiny-currency
-    v-model="value"
-    placeholder="请选择"
-    set-default
-    :fetch-default-currency="fetchDefaultCurrency"
-    :set-default-currency="setDefaultCurrency"
-    @change="change"
-  ></tiny-currency>
+  <div class="demo-currency-class">
+    <tiny-currency
+      v-model="value"
+      placeholder="请选择"
+      set-default
+      :fetch-default-currency="fetchDefaultCurrency"
+      :set-default-currency="setDefaultCurrency"
+      @change="change"
+    ></tiny-currency>
+  </div>
 </template>
 
 <script>
@@ -48,3 +50,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/set-default.vue b/examples/sites/demos/pc/app/currency/set-default.vue
index 12acde8c2..e7d1ed351 100644
--- a/examples/sites/demos/pc/app/currency/set-default.vue
+++ b/examples/sites/demos/pc/app/currency/set-default.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-currency v-model="value" placeholder="请选择" set-default></tiny-currency>
+  <div class="demo-currency-class">
+    <tiny-currency v-model="value" placeholder="请选择" set-default></tiny-currency>
+  </div>
 </template>
 
 <script>
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/size-composition-api.vue b/examples/sites/demos/pc/app/currency/size-composition-api.vue
index 92b18ed02..1784fd4f7 100644
--- a/examples/sites/demos/pc/app/currency/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/size-composition-api.vue
@@ -1,6 +1,12 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-currency v-model="value" size="medium" placeholder="请选择" @change="change"></tiny-currency>
+    <br /><br />
+    <tiny-currency v-model="value" placeholder="请选择" @change="change"></tiny-currency>
+    <br /><br />
+    <tiny-currency v-model="value" size="small" placeholder="请选择" @change="change"></tiny-currency>
+    <br /><br />
+    <tiny-currency v-model="value" size="mini" placeholder="请选择" @change="change"></tiny-currency>
     <p>当前选中值：{{ value }}</p>
   </div>
 </template>
@@ -17,6 +23,9 @@ function change(value) {
 </script>
 
 <style scoped>
+.demo-currency-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/currency/size.vue b/examples/sites/demos/pc/app/currency/size.vue
index 625ea9e81..d385d3d2e 100644
--- a/examples/sites/demos/pc/app/currency/size.vue
+++ b/examples/sites/demos/pc/app/currency/size.vue
@@ -1,6 +1,12 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-currency v-model="value" size="medium" placeholder="请选择" @change="change"></tiny-currency>
+    <br /><br />
+    <tiny-currency v-model="value" placeholder="请选择" @change="change"></tiny-currency>
+    <br /><br />
+    <tiny-currency v-model="value" size="small" placeholder="请选择" @change="change"></tiny-currency>
+    <br /><br />
+    <tiny-currency v-model="value" size="mini" placeholder="请选择" @change="change"></tiny-currency>
     <p>当前选中值：{{ value }}</p>
   </div>
 </template>
@@ -26,6 +32,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-currency-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/dept/auto-select-composition-api.vue b/examples/sites/demos/pc/app/dept/auto-select-composition-api.vue
index 4ce732f5a..c73caa050 100644
--- a/examples/sites/demos/pc/app/dept/auto-select-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/auto-select-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" :auto-select="false"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" :auto-select="false"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/auto-select.vue b/examples/sites/demos/pc/app/dept/auto-select.vue
index 820323b1a..4f5d921d4 100644
--- a/examples/sites/demos/pc/app/dept/auto-select.vue
+++ b/examples/sites/demos/pc/app/dept/auto-select.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" :auto-select="false"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" :auto-select="false"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/dept/basic-usage-composition-api.vue
index d5817da78..cf1f85b9a 100644
--- a/examples/sites/demos/pc/app/dept/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/basic-usage-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/basic-usage.vue b/examples/sites/demos/pc/app/dept/basic-usage.vue
index c335056b6..ff898e59f 100644
--- a/examples/sites/demos/pc/app/dept/basic-usage.vue
+++ b/examples/sites/demos/pc/app/dept/basic-usage.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/before-confirm-composition-api.vue b/examples/sites/demos/pc/app/dept/before-confirm-composition-api.vue
index 57d549619..03aafa542 100644
--- a/examples/sites/demos/pc/app/dept/before-confirm-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/before-confirm-composition-api.vue
@@ -1,9 +1,7 @@
 <template>
-  <div class="demo-dept">
+  <div class="demo-dept-class">
     <h3 class="title">基本用法</h3>
-    <div class="content">
-      <tiny-dept v-model="value" :before-confirm="beforeConfirm"></tiny-dept>
-    </div>
+    <tiny-dept v-model="value" :before-confirm="beforeConfirm"></tiny-dept>
   </div>
 </template>
 
@@ -23,8 +21,8 @@ function beforeConfirm() {
 </script>
 
 <style scoped>
-.demo-dept .tiny-dept {
-  width: 270px;
+.demo-dept-class {
+  width: 280px;
 }
 .title {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/dept/before-confirm.vue b/examples/sites/demos/pc/app/dept/before-confirm.vue
index f6973ca25..53f97bf99 100644
--- a/examples/sites/demos/pc/app/dept/before-confirm.vue
+++ b/examples/sites/demos/pc/app/dept/before-confirm.vue
@@ -1,9 +1,7 @@
 <template>
-  <div class="demo-dept">
+  <div class="demo-dept-class">
     <h3 class="title">基本用法</h3>
-    <div class="content">
-      <tiny-dept v-model="value" :before-confirm="beforeConfirm"></tiny-dept>
-    </div>
+    <tiny-dept v-model="value" :before-confirm="beforeConfirm"></tiny-dept>
   </div>
 </template>
 
@@ -32,8 +30,8 @@ export default {
 </script>
 
 <style scoped>
-.demo-dept .tiny-dept {
-  width: 270px;
+.demo-dept-class {
+  width: 280px;
 }
 .title {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/dept/custom-service-composition-api.vue b/examples/sites/demos/pc/app/dept/custom-service-composition-api.vue
index c7dba8ca2..706bca1d4 100644
--- a/examples/sites/demos/pc/app/dept/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/custom-service-composition-api.vue
@@ -1,10 +1,12 @@
 <template>
-  <tiny-dept
-    v-model="value"
-    :fetch-dept-by-value="getfetchDeptByValue"
-    :fetch-dept="getfetchDept"
-    :fetch-dept-list="getDeptList"
-  ></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept
+      v-model="value"
+      :fetch-dept-by-value="getfetchDeptByValue"
+      :fetch-dept="getfetchDept"
+      :fetch-dept-list="getDeptList"
+    ></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -274,3 +276,9 @@ function getDeptList(upperCode) {
   })
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/custom-service.vue b/examples/sites/demos/pc/app/dept/custom-service.vue
index a5a349e1f..b83076c76 100644
--- a/examples/sites/demos/pc/app/dept/custom-service.vue
+++ b/examples/sites/demos/pc/app/dept/custom-service.vue
@@ -1,10 +1,12 @@
 <template>
-  <tiny-dept
-    v-model="value"
-    :fetch-dept-by-value="getfetchDeptByValue"
-    :fetch-dept="getfetchDept"
-    :fetch-dept-list="getDeptList"
-  ></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept
+      v-model="value"
+      :fetch-dept-by-value="getfetchDeptByValue"
+      :fetch-dept="getfetchDept"
+      :fetch-dept-list="getDeptList"
+    ></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -281,3 +283,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/dept-cancel-composition-api.vue b/examples/sites/demos/pc/app/dept/dept-cancel-composition-api.vue
index 6bcfd8341..5489c5d20 100644
--- a/examples/sites/demos/pc/app/dept/dept-cancel-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/dept-cancel-composition-api.vue
@@ -1,9 +1,7 @@
 <template>
-  <div class="demo-dept">
+  <div class="demo-dept-class">
     <h3 class="title">基本用法</h3>
-    <div class="content">
-      <tiny-dept v-model="value" @cancel="cancel"></tiny-dept>
-    </div>
+    <tiny-dept v-model="value" @cancel="cancel"></tiny-dept>
   </div>
 </template>
 
@@ -19,8 +17,8 @@ function cancel() {
 </script>
 
 <style scoped>
-.demo-dept .tiny-dept {
-  width: 270px;
+.demo-dept-class {
+  width: 280px;
 }
 .title {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/dept/dept-cancel.vue b/examples/sites/demos/pc/app/dept/dept-cancel.vue
index d6f1039d6..6d69f75e9 100644
--- a/examples/sites/demos/pc/app/dept/dept-cancel.vue
+++ b/examples/sites/demos/pc/app/dept/dept-cancel.vue
@@ -1,9 +1,7 @@
 <template>
-  <div class="demo-dept">
+  <div class="demo-dept-class">
     <h3 class="title">基本用法</h3>
-    <div class="content">
-      <tiny-dept v-model="value" @cancel="cancel"></tiny-dept>
-    </div>
+    <tiny-dept v-model="value" @cancel="cancel"></tiny-dept>
   </div>
 </template>
 
@@ -28,8 +26,8 @@ export default {
 </script>
 
 <style scoped>
-.demo-dept .tiny-dept {
-  width: 270px;
+.demo-dept-class {
+  width: 280px;
 }
 .title {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/dept/dept-close-composition-api.vue b/examples/sites/demos/pc/app/dept/dept-close-composition-api.vue
index c0eb90330..ae749a8b3 100644
--- a/examples/sites/demos/pc/app/dept/dept-close-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/dept-close-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" @close="close"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" @close="close"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -12,3 +14,9 @@ function close() {
   TinyModal.message('关闭弹出框')
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/dept-close.vue b/examples/sites/demos/pc/app/dept/dept-close.vue
index 64d37754c..9a4e66940 100644
--- a/examples/sites/demos/pc/app/dept/dept-close.vue
+++ b/examples/sites/demos/pc/app/dept/dept-close.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" @close="close"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" @close="close"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -21,3 +23,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/dept-confirm-composition-api.vue b/examples/sites/demos/pc/app/dept/dept-confirm-composition-api.vue
index b5bbaa9f9..5d942c00a 100644
--- a/examples/sites/demos/pc/app/dept/dept-confirm-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/dept-confirm-composition-api.vue
@@ -1,9 +1,7 @@
 <template>
-  <div class="demo-dept">
+  <div class="demo-dept-class">
     <h3 class="title">基本用法</h3>
-    <div class="content">
-      <tiny-dept v-model="value" @confirm="confirm"></tiny-dept>
-    </div>
+    <tiny-dept v-model="value" @confirm="confirm"></tiny-dept>
   </div>
 </template>
 
@@ -19,8 +17,8 @@ function confirm() {
 </script>
 
 <style scoped>
-.demo-dept .tiny-dept {
-  width: 270px;
+.demo-dept-class {
+  width: 280px;
 }
 .title {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/dept/dept-confirm.vue b/examples/sites/demos/pc/app/dept/dept-confirm.vue
index 9513402b7..03c577286 100644
--- a/examples/sites/demos/pc/app/dept/dept-confirm.vue
+++ b/examples/sites/demos/pc/app/dept/dept-confirm.vue
@@ -1,9 +1,7 @@
 <template>
-  <div class="demo-dept">
+  <div class="demo-dept-class">
     <h3 class="title">基本用法</h3>
-    <div class="content">
-      <tiny-dept v-model="value" @confirm="confirm"></tiny-dept>
-    </div>
+    <tiny-dept v-model="value" @confirm="confirm"></tiny-dept>
   </div>
 </template>
 
@@ -28,8 +26,8 @@ export default {
 </script>
 
 <style scoped>
-.demo-dept .tiny-dept {
-  width: 270px;
+.demo-dept-class {
+  width: 280px;
 }
 .title {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/dept/dept-events-composition-api.vue b/examples/sites/demos/pc/app/dept/dept-events-composition-api.vue
index d3a041aac..ec58bcde0 100644
--- a/examples/sites/demos/pc/app/dept/dept-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/dept-events-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" @change="change" @open="open"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" @change="change" @open="open"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -16,3 +18,9 @@ function change(value) {
   TinyModal.message({ message: '改变的部门值: ' + value, status: 'info' })
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/dept-events.vue b/examples/sites/demos/pc/app/dept/dept-events.vue
index 46ef04512..798659587 100644
--- a/examples/sites/demos/pc/app/dept/dept-events.vue
+++ b/examples/sites/demos/pc/app/dept/dept-events.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" @change="change" @open="open"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" @change="change" @open="open"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -24,3 +26,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/dept-selected-composition-api.vue b/examples/sites/demos/pc/app/dept/dept-selected-composition-api.vue
index 656bbf7fb..e5d5916ff 100644
--- a/examples/sites/demos/pc/app/dept/dept-selected-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/dept-selected-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" @selected="selected"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" @selected="selected"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -12,3 +14,9 @@ function selected(value) {
   TinyModal.message({ message: '下拉选项值改变为: ' + value, status: 'info' })
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/dept-selected.vue b/examples/sites/demos/pc/app/dept/dept-selected.vue
index 824465fa0..164aa3552 100644
--- a/examples/sites/demos/pc/app/dept/dept-selected.vue
+++ b/examples/sites/demos/pc/app/dept/dept-selected.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" @selected="selected"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" @selected="selected"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -21,3 +23,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/dynamic-disable-composition-api.vue b/examples/sites/demos/pc/app/dept/dynamic-disable-composition-api.vue
index f7902dd25..1349d0fdd 100644
--- a/examples/sites/demos/pc/app/dept/dynamic-disable-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/dynamic-disable-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" disabled></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" disabled></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/dynamic-disable.vue b/examples/sites/demos/pc/app/dept/dynamic-disable.vue
index 906037a8b..2174e2412 100644
--- a/examples/sites/demos/pc/app/dept/dynamic-disable.vue
+++ b/examples/sites/demos/pc/app/dept/dynamic-disable.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" disabled></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" disabled></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/size-composition-api.vue b/examples/sites/demos/pc/app/dept/size-composition-api.vue
index 1b10012fe..0aa18e125 100644
--- a/examples/sites/demos/pc/app/dept/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/size-composition-api.vue
@@ -1,5 +1,13 @@
 <template>
-  <tiny-dept v-model="value" size="medium"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" size="medium"></tiny-dept>
+    <br />
+    <tiny-dept v-model="value"></tiny-dept>
+    <br />
+    <tiny-dept v-model="value" size="small"></tiny-dept>
+    <br />
+    <tiny-dept v-model="value" size="mini"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +16,9 @@ import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/size.vue b/examples/sites/demos/pc/app/dept/size.vue
index a5657fdaa..d35d20670 100644
--- a/examples/sites/demos/pc/app/dept/size.vue
+++ b/examples/sites/demos/pc/app/dept/size.vue
@@ -1,5 +1,13 @@
 <template>
-  <tiny-dept v-model="value" size="medium"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" size="medium"></tiny-dept>
+    <br />
+    <tiny-dept v-model="value"></tiny-dept>
+    <br />
+    <tiny-dept v-model="value" size="small"></tiny-dept>
+    <br />
+    <tiny-dept v-model="value" size="mini"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +24,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/slot-hrapprover-composition-api.vue b/examples/sites/demos/pc/app/dept/slot-hrapprover-composition-api.vue
index 166b3195a..26785bbb6 100644
--- a/examples/sites/demos/pc/app/dept/slot-hrapprover-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/slot-hrapprover-composition-api.vue
@@ -1,9 +1,11 @@
 <template>
-  <tiny-dept :value="value" size="medium">
-    <template #hrapprover="data">
-      <div>{{ data.slotScope.hrapprover }}</div>
-    </template>
-  </tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept :value="value">
+      <template #hrapprover="data">
+        <div>{{ data.slotScope.hrapprover }}</div>
+      </template>
+    </tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -12,3 +14,9 @@ import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/slot-hrapprover.vue b/examples/sites/demos/pc/app/dept/slot-hrapprover.vue
index ee6a8eb64..d5619933f 100644
--- a/examples/sites/demos/pc/app/dept/slot-hrapprover.vue
+++ b/examples/sites/demos/pc/app/dept/slot-hrapprover.vue
@@ -1,9 +1,11 @@
 <template>
-  <tiny-dept :value="value" size="medium">
-    <template #hrapprover="data">
-      <div>{{ data.slotScope.hrapprover }}</div>
-    </template>
-  </tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept :value="value">
+      <template #hrapprover="data">
+        <div>{{ data.slotScope.hrapprover }}</div>
+      </template>
+    </tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -20,3 +22,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/title-composition-api.vue b/examples/sites/demos/pc/app/dept/title-composition-api.vue
index a7be07a6b..ba18252ec 100644
--- a/examples/sites/demos/pc/app/dept/title-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/title-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" title="部门"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" title="部门"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/title.vue b/examples/sites/demos/pc/app/dept/title.vue
index a226e91d2..cb5c43002 100644
--- a/examples/sites/demos/pc/app/dept/title.vue
+++ b/examples/sites/demos/pc/app/dept/title.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" title="部门"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" title="部门"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/drop-roles/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/drop-roles/basic-usage-composition-api.vue
index a2549db25..ff86ad3b4 100644
--- a/examples/sites/demos/pc/app/drop-roles/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/drop-roles/basic-usage-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-drop-roles-class">
     <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
     <p>当前选中值：{{ value }}</p>
   </div>
@@ -26,6 +26,9 @@ function change(role) {
 </script>
 
 <style scoped>
+.demo-drop-roles-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/drop-roles/basic-usage.vue b/examples/sites/demos/pc/app/drop-roles/basic-usage.vue
index ca10a038f..57180551e 100644
--- a/examples/sites/demos/pc/app/drop-roles/basic-usage.vue
+++ b/examples/sites/demos/pc/app/drop-roles/basic-usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-drop-roles-class">
     <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
     <p>当前选中值：{{ value }}</p>
   </div>
@@ -34,6 +34,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-drop-roles-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/drop-roles/change-role-event-composition-api.vue b/examples/sites/demos/pc/app/drop-roles/change-role-event-composition-api.vue
index 9ef43f2cc..ad499918f 100644
--- a/examples/sites/demos/pc/app/drop-roles/change-role-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/drop-roles/change-role-event-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
+  <div class="demo-drop-roles-class">
+    <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -21,3 +23,9 @@ function change(role) {
   })
 }
 </script>
+
+<style scoped>
+.demo-drop-roles-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/drop-roles/change-role-event.vue b/examples/sites/demos/pc/app/drop-roles/change-role-event.vue
index 444df1a4f..864ee69ac 100644
--- a/examples/sites/demos/pc/app/drop-roles/change-role-event.vue
+++ b/examples/sites/demos/pc/app/drop-roles/change-role-event.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
+  <div class="demo-drop-roles-class">
+    <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -29,3 +31,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-drop-roles-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/drop-roles/custom-service-composition-api.vue b/examples/sites/demos/pc/app/drop-roles/custom-service-composition-api.vue
index d75ef4750..752755697 100644
--- a/examples/sites/demos/pc/app/drop-roles/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/drop-roles/custom-service-composition-api.vue
@@ -1,12 +1,14 @@
 <template>
-  <tiny-drop-roles
-    v-model="value"
-    placeholder="选择角色"
-    :fields="fields"
-    :fetch-role="getRoleList"
-    :fetch-current-role="getCurrentRole"
-    @change="change"
-  ></tiny-drop-roles>
+  <div class="demo-drop-roles-class">
+    <tiny-drop-roles
+      v-model="value"
+      placeholder="选择角色"
+      :fields="fields"
+      :fetch-role="getRoleList"
+      :fetch-current-role="getCurrentRole"
+      @change="change"
+    ></tiny-drop-roles>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -41,3 +43,9 @@ function change(role) {
   )
 }
 </script>
+
+<style scoped>
+.demo-drop-roles-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/drop-roles/custom-service.vue b/examples/sites/demos/pc/app/drop-roles/custom-service.vue
index 659a7401d..f99405dfb 100644
--- a/examples/sites/demos/pc/app/drop-roles/custom-service.vue
+++ b/examples/sites/demos/pc/app/drop-roles/custom-service.vue
@@ -1,12 +1,14 @@
 <template>
-  <tiny-drop-roles
-    v-model="value"
-    placeholder="选择角色"
-    :fields="fields"
-    :fetch-role="getRoleList"
-    :fetch-current-role="getCurrentRole"
-    @change="change"
-  ></tiny-drop-roles>
+  <div class="demo-drop-roles-class">
+    <tiny-drop-roles
+      v-model="value"
+      placeholder="选择角色"
+      :fields="fields"
+      :fetch-role="getRoleList"
+      :fetch-current-role="getCurrentRole"
+      @change="change"
+    ></tiny-drop-roles>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -48,3 +50,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-drop-roles-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/drop-roles/size-composition-api.vue b/examples/sites/demos/pc/app/drop-roles/size-composition-api.vue
index da3366d2a..4d2de13d4 100644
--- a/examples/sites/demos/pc/app/drop-roles/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/drop-roles/size-composition-api.vue
@@ -1,6 +1,13 @@
 <template>
-  <div>
+  <div class="demo-drop-roles-class">
     <tiny-drop-roles size="medium" v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
+    <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
+    <tiny-drop-roles size="small" v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
+    <tiny-drop-roles size="mini" v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
     <p>当前选中值：{{ value }}</p>
   </div>
 </template>
@@ -26,9 +33,7 @@ function change(role) {
 </script>
 
 <style scoped>
-p {
-  font-size: 14px;
-  line-height: 1.5;
-  padding: 16px 0;
+.demo-drop-roles-class {
+  width: 280px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/drop-roles/size.vue b/examples/sites/demos/pc/app/drop-roles/size.vue
index e508fcc74..2cf758fa5 100644
--- a/examples/sites/demos/pc/app/drop-roles/size.vue
+++ b/examples/sites/demos/pc/app/drop-roles/size.vue
@@ -1,6 +1,13 @@
 <template>
-  <div>
+  <div class="demo-drop-roles-class">
     <tiny-drop-roles size="medium" v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
+    <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
+    <tiny-drop-roles size="small" v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
+    <tiny-drop-roles size="mini" v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
     <p>当前选中值：{{ value }}</p>
   </div>
 </template>
@@ -34,9 +41,7 @@ export default {
 </script>
 
 <style scoped>
-p {
-  font-size: 14px;
-  line-height: 1.5;
-  padding: 16px 0;
+.demo-drop-roles-class {
+  width: 280px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/hrapprover/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/hrapprover/basic-usage-composition-api.vue
index 1ddf9ae38..58532d8fd 100644
--- a/examples/sites/demos/pc/app/hrapprover/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/hrapprover/basic-usage-composition-api.vue
@@ -1,5 +1,11 @@
 <template>
-  <tiny-hrapprover v-model="value" :approval-person="person" @update:approvalPerson="person = $event"></tiny-hrapprover>
+  <div class="demo-hrapprover-class">
+    <tiny-hrapprover
+      v-model="value"
+      :approval-person="person"
+      @update:approvalPerson="person = $event"
+    ></tiny-hrapprover>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -9,3 +15,9 @@ import { TinyHrapprover } from '@opentiny/vue'
 const value = ref('022471')
 const person = ref('wangxiaofeng 00193664')
 </script>
+
+<style scoped>
+.demo-hrapprover-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/hrapprover/basic-usage.vue b/examples/sites/demos/pc/app/hrapprover/basic-usage.vue
index b2f175ba2..742f7b29d 100644
--- a/examples/sites/demos/pc/app/hrapprover/basic-usage.vue
+++ b/examples/sites/demos/pc/app/hrapprover/basic-usage.vue
@@ -1,5 +1,11 @@
 <template>
-  <tiny-hrapprover v-model="value" :approval-person="person" @update:approvalPerson="person = $event"></tiny-hrapprover>
+  <div class="demo-hrapprover-class">
+    <tiny-hrapprover
+      v-model="value"
+      :approval-person="person"
+      @update:approvalPerson="person = $event"
+    ></tiny-hrapprover>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -17,3 +23,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-hrapprover-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/hrapprover/category-type-composition-api.vue b/examples/sites/demos/pc/app/hrapprover/category-type-composition-api.vue
index eee307097..a5b8f8dc4 100644
--- a/examples/sites/demos/pc/app/hrapprover/category-type-composition-api.vue
+++ b/examples/sites/demos/pc/app/hrapprover/category-type-composition-api.vue
@@ -1,10 +1,12 @@
 <template>
-  <tiny-hrapprover
-    v-model="value"
-    :approval-person="person"
-    @update:approvalPerson="person = $event"
-    category="0506"
-  ></tiny-hrapprover>
+  <div class="demo-hrapprover-class">
+    <tiny-hrapprover
+      v-model="value"
+      :approval-person="person"
+      @update:approvalPerson="person = $event"
+      category="0506"
+    ></tiny-hrapprover>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -14,3 +16,9 @@ import { TinyHrapprover } from '@opentiny/vue'
 const value = ref('022471')
 const person = ref('wangxiaofeng 00193664')
 </script>
+
+<style scoped>
+.demo-hrapprover-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/hrapprover/category-type.vue b/examples/sites/demos/pc/app/hrapprover/category-type.vue
index 519d8f551..cb77bc73a 100644
--- a/examples/sites/demos/pc/app/hrapprover/category-type.vue
+++ b/examples/sites/demos/pc/app/hrapprover/category-type.vue
@@ -1,10 +1,12 @@
 <template>
-  <tiny-hrapprover
-    v-model="value"
-    :approval-person="person"
-    @update:approvalPerson="person = $event"
-    category="0506"
-  ></tiny-hrapprover>
+  <div class="demo-hrapprover-class">
+    <tiny-hrapprover
+      v-model="value"
+      :approval-person="person"
+      @update:approvalPerson="person = $event"
+      category="0506"
+    ></tiny-hrapprover>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -22,3 +24,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-hrapprover-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/hrapprover/custom-service-composition-api.vue b/examples/sites/demos/pc/app/hrapprover/custom-service-composition-api.vue
index 95b1038b6..c02960bcb 100644
--- a/examples/sites/demos/pc/app/hrapprover/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/hrapprover/custom-service-composition-api.vue
@@ -1,11 +1,13 @@
 <template>
-  <tiny-hrapprover
-    v-model="value"
-    :approval-person="person"
-    @update:approvalPerson="person = $event"
-    :fetch-hrapprover="getFetchHrapprover"
-    :category="category"
-  ></tiny-hrapprover>
+  <div class="demo-hrapprover-class">
+    <tiny-hrapprover
+      v-model="value"
+      :approval-person="person"
+      @update:approvalPerson="person = $event"
+      :fetch-hrapprover="getFetchHrapprover"
+      :category="category"
+    ></tiny-hrapprover>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -39,3 +41,9 @@ function getFetchHrapprover() {
   ])
 }
 </script>
+
+<style scoped>
+.demo-hrapprover-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/hrapprover/custom-service.vue b/examples/sites/demos/pc/app/hrapprover/custom-service.vue
index 7fee9fc01..00ff863e7 100644
--- a/examples/sites/demos/pc/app/hrapprover/custom-service.vue
+++ b/examples/sites/demos/pc/app/hrapprover/custom-service.vue
@@ -1,11 +1,13 @@
 <template>
-  <tiny-hrapprover
-    v-model="value"
-    :approval-person="person"
-    @update:approvalPerson="person = $event"
-    :fetch-hrapprover="getFetchHrapprover"
-    :category="category"
-  ></tiny-hrapprover>
+  <div class="demo-hrapprover-class">
+    <tiny-hrapprover
+      v-model="value"
+      :approval-person="person"
+      @update:approvalPerson="person = $event"
+      :fetch-hrapprover="getFetchHrapprover"
+      :category="category"
+    ></tiny-hrapprover>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -48,3 +50,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-hrapprover-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/hrapprover/disabled-composition-api.vue b/examples/sites/demos/pc/app/hrapprover/disabled-composition-api.vue
index c8d417a78..5af30bd1f 100644
--- a/examples/sites/demos/pc/app/hrapprover/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/hrapprover/disabled-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-hrapprover-class">
     <tiny-button @click="Switchover" style="margin-bottom: 10px">启用/禁用</tiny-button>
     <tiny-hrapprover
       :value="value"
@@ -22,3 +22,9 @@ function Switchover() {
   disabled.value = !disabled.value
 }
 </script>
+
+<style scoped>
+.demo-hrapprover-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/hrapprover/disabled.vue b/examples/sites/demos/pc/app/hrapprover/disabled.vue
index 571ab7b71..eb716e0ec 100644
--- a/examples/sites/demos/pc/app/hrapprover/disabled.vue
+++ b/examples/sites/demos/pc/app/hrapprover/disabled.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-hrapprover-class">
     <tiny-button @click="Switchover" style="margin-bottom: 10px">启用/禁用</tiny-button>
     <tiny-hrapprover
       :value="value"
@@ -32,3 +32,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-hrapprover-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/locales/custom-service-composition-api.vue b/examples/sites/demos/pc/app/locales/custom-service-composition-api.vue
index 63aadc125..ac58c4c83 100644
--- a/examples/sites/demos/pc/app/locales/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/locales/custom-service-composition-api.vue
@@ -11,15 +11,15 @@ import { TinyLocales } from '@opentiny/vue'
 
 function getLocale() {
   // resolve 出来的必须是国际化的 key
-  return Promise.resolve(['zhCN', 'enUS', 'zhTW'])
+  return Promise.resolve(['zh_CN', 'en_US', 'zh_TW'])
 }
 
 function getCurrentLocale() {
-  return Promise.resolve(['zhCN'])
+  return Promise.resolve(['zh_CN'])
 }
 
 function getChangeLocaleUrl(targetLocale) {
-  if (targetLocale === 'enUS') {
+  if (targetLocale === 'en_US') {
     return Promise.resolve(`${window.location.origin}/#/webenglish/en-US/component/locales/custom-service`)
   } else {
     return Promise.resolve(`${window.location.origin}/#/zh-CN/component/custom-service`)
diff --git a/examples/sites/demos/pc/app/locales/custom-service.spec.ts b/examples/sites/demos/pc/app/locales/custom-service.spec.ts
index 538540681..15c760d3d 100644
--- a/examples/sites/demos/pc/app/locales/custom-service.spec.ts
+++ b/examples/sites/demos/pc/app/locales/custom-service.spec.ts
@@ -8,7 +8,7 @@ test('locales-custom-service', async ({ page }) => {
   const reference = demo.locator('.reference-wrapper')
   const popper = page.locator('.tiny-locales__popper')
 
-  await expect(reference).toHaveText('zhCN')
+  await expect(reference).toHaveText('zh_CN')
   await expect(popper).toBeHidden()
   await reference.hover()
   await page.waitForTimeout(200)
diff --git a/examples/sites/demos/pc/app/locales/custom-service.vue b/examples/sites/demos/pc/app/locales/custom-service.vue
index 7a90b309a..7e0853d3b 100644
--- a/examples/sites/demos/pc/app/locales/custom-service.vue
+++ b/examples/sites/demos/pc/app/locales/custom-service.vue
@@ -16,13 +16,13 @@ export default {
   methods: {
     getLocale() {
       // resolve 出来的必须是国际化的 key
-      return Promise.resolve(['zhCN', 'enUS', 'zhTW'])
+      return Promise.resolve(['zh_CN', 'en_US', 'zh_TW'])
     },
     getCurrentLocale() {
-      return Promise.resolve(['zhCN'])
+      return Promise.resolve(['zh_CN'])
     },
     getChangeLocaleUrl(targetLocale) {
-      if (targetLocale === 'enUS') {
+      if (targetLocale === 'en_US') {
         return Promise.resolve(`${window.location.origin}/#/webenglish/en-US/component/locales/custom-service`)
       } else {
         return Promise.resolve(`${window.location.origin}/#/zh-CN/component/custom-service`)
diff --git a/examples/sites/demos/pc/app/user/allow-copy-composition-api.vue b/examples/sites/demos/pc/app/user/allow-copy-composition-api.vue
index 0fb43a9ad..fd2e75c41 100644
--- a/examples/sites/demos/pc/app/user/allow-copy-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/allow-copy-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" auto-close allow-copy></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" auto-close allow-copy></tiny-user>
+  </div>
 </template>
 
 <script setup>
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('702973890055088')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/allow-copy.vue b/examples/sites/demos/pc/app/user/allow-copy.vue
index d98e6fdb6..48c13925d 100644
--- a/examples/sites/demos/pc/app/user/allow-copy.vue
+++ b/examples/sites/demos/pc/app/user/allow-copy.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" auto-close allow-copy></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" auto-close allow-copy></tiny-user>
+  </div>
 </template>
 
 <script>
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/user/basic-usage-composition-api.vue
index 5f0daa308..b28d5d540 100644
--- a/examples/sites/demos/pc/app/user/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/basic-usage-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user"></tiny-user>
+  </div>
 </template>
 
 <script setup>
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('702973890055088')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/basic-usage.vue b/examples/sites/demos/pc/app/user/basic-usage.vue
index 336a058a5..a1889135d 100644
--- a/examples/sites/demos/pc/app/user/basic-usage.vue
+++ b/examples/sites/demos/pc/app/user/basic-usage.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user"></tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/batch-composition-api.vue b/examples/sites/demos/pc/app/user/batch-composition-api.vue
index d5bf50ef2..e0f49b7a8 100644
--- a/examples/sites/demos/pc/app/user/batch-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/batch-composition-api.vue
@@ -1,22 +1,24 @@
 <template>
-  <tiny-user v-model="user1" :batch="true" :cache="false"></tiny-user>
-  <br />
-  <tiny-user v-model="user2" :batch="true" :cache="false"></tiny-user>
-  <br />
-  <tiny-user v-model="user3" :batch="true" :cache="false"></tiny-user>
-  <br />
-  <tiny-user v-model="user4" :batch="true" :cache="false"></tiny-user>
-  <br />
-  <tiny-user v-model="user5" :batch="true" :cache="false"></tiny-user>
-  <br />
-  <tiny-user v-model="user6" :batch="true" :cache="false"></tiny-user>
-  <br />
-  <tiny-user v-model="user7" :batch="true" :cache="false"></tiny-user>
-  <br />
-  <tiny-user v-model="user8" :batch="true" :cache="false"></tiny-user>
-  <br />
-  <tiny-user v-model="user9" :batch="true" :cache="false"></tiny-user>
-  <br />
+  <div class="demo-user-class">
+    <tiny-user v-model="user1" :batch="true" :cache="false"></tiny-user>
+    <br />
+    <tiny-user v-model="user2" :batch="true" :cache="false"></tiny-user>
+    <br />
+    <tiny-user v-model="user3" :batch="true" :cache="false"></tiny-user>
+    <br />
+    <tiny-user v-model="user4" :batch="true" :cache="false"></tiny-user>
+    <br />
+    <tiny-user v-model="user5" :batch="true" :cache="false"></tiny-user>
+    <br />
+    <tiny-user v-model="user6" :batch="true" :cache="false"></tiny-user>
+    <br />
+    <tiny-user v-model="user7" :batch="true" :cache="false"></tiny-user>
+    <br />
+    <tiny-user v-model="user8" :batch="true" :cache="false"></tiny-user>
+    <br />
+    <tiny-user v-model="user9" :batch="true" :cache="false"></tiny-user>
+    <br />
+  </div>
 </template>
 
 <script setup>
@@ -33,3 +35,9 @@ const user7 = ref('421000103624007')
 const user8 = ref('421000103624008')
 const user9 = ref('421000103624009')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/batch.vue b/examples/sites/demos/pc/app/user/batch.vue
index fb5571c07..76ee2d437 100644
--- a/examples/sites/demos/pc/app/user/batch.vue
+++ b/examples/sites/demos/pc/app/user/batch.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user1" :batch="true" :cache="false"></tiny-user>
     <br />
     <tiny-user v-model="user2" :batch="true" :cache="false"></tiny-user>
@@ -42,3 +42,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/cache-users-composition-api.vue b/examples/sites/demos/pc/app/user/cache-users-composition-api.vue
index 58914a6bf..068924272 100644
--- a/examples/sites/demos/pc/app/user/cache-users-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/cache-users-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <p>无缓存</p>
     <tiny-user v-model="user1" multiple :cache="false" value-field="userAccount"></tiny-user>
     <p>有缓存</p>
@@ -22,6 +22,9 @@ const user2 = ref('test1,test10')
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/user/cache-users.vue b/examples/sites/demos/pc/app/user/cache-users.vue
index f43f1dee7..4004ced90 100644
--- a/examples/sites/demos/pc/app/user/cache-users.vue
+++ b/examples/sites/demos/pc/app/user/cache-users.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <p>无缓存</p>
     <tiny-user v-model="user1" multiple :cache="false" value-field="userAccount"></tiny-user>
     <p>有缓存</p>
@@ -30,6 +30,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/user/collapse-show-overflow-tooltip-composition-api.vue b/examples/sites/demos/pc/app/user/collapse-show-overflow-tooltip-composition-api.vue
index 82c88fd42..a80e429be 100644
--- a/examples/sites/demos/pc/app/user/collapse-show-overflow-tooltip-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/collapse-show-overflow-tooltip-composition-api.vue
@@ -1,12 +1,14 @@
 <template>
-  <tiny-user
-    v-model="user"
-    :collapse-show-overflow-tooltip="true"
-    multiple
-    cache-key="test-user"
-    :cache-fields="['email']"
-    value-field="userAccount"
-  ></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user
+      v-model="user"
+      :collapse-show-overflow-tooltip="true"
+      multiple
+      cache-key="test-user"
+      :cache-fields="['email']"
+      value-field="userAccount"
+    ></tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -15,3 +17,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('test1,test2,test3')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/collapse-show-overflow-tooltip.vue b/examples/sites/demos/pc/app/user/collapse-show-overflow-tooltip.vue
index b26189c8d..71f3f617d 100644
--- a/examples/sites/demos/pc/app/user/collapse-show-overflow-tooltip.vue
+++ b/examples/sites/demos/pc/app/user/collapse-show-overflow-tooltip.vue
@@ -1,12 +1,14 @@
 <template>
-  <tiny-user
-    v-model="user"
-    :collapse-show-overflow-tooltip="true"
-    multiple
-    cache-key="test-user"
-    :cache-fields="['email']"
-    value-field="userAccount"
-  ></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user
+      v-model="user"
+      :collapse-show-overflow-tooltip="true"
+      multiple
+      cache-key="test-user"
+      :cache-fields="['email']"
+      value-field="userAccount"
+    ></tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -23,3 +25,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/collapse-tags -composition-api.vue b/examples/sites/demos/pc/app/user/collapse-tags -composition-api.vue
index 2e4e7b99d..6698085f2 100644
--- a/examples/sites/demos/pc/app/user/collapse-tags -composition-api.vue	
+++ b/examples/sites/demos/pc/app/user/collapse-tags -composition-api.vue	
@@ -1,13 +1,15 @@
 <template>
-  <tiny-user
-    v-model="user"
-    :collapse-tags="true"
-    :collapse-show-overflow-tooltip="true"
-    multiple
-    cache-key="test-user"
-    :cache-fields="['email']"
-    value-field="userAccount"
-  ></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user
+      v-model="user"
+      :collapse-tags="true"
+      :collapse-show-overflow-tooltip="true"
+      multiple
+      cache-key="test-user"
+      :cache-fields="['email']"
+      value-field="userAccount"
+    ></tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -16,3 +18,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('test1,test2,test3')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/collapse-tags .vue b/examples/sites/demos/pc/app/user/collapse-tags .vue
index cc0229adb..429656f02 100644
--- a/examples/sites/demos/pc/app/user/collapse-tags .vue	
+++ b/examples/sites/demos/pc/app/user/collapse-tags .vue	
@@ -1,13 +1,15 @@
 <template>
-  <tiny-user
-    v-model="user"
-    :collapse-tags="true"
-    :collapse-show-overflow-tooltip="true"
-    multiple
-    cache-key="test-user"
-    :cache-fields="['email']"
-    value-field="userAccount"
-  ></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user
+      v-model="user"
+      :collapse-tags="true"
+      :collapse-show-overflow-tooltip="true"
+      multiple
+      cache-key="test-user"
+      :cache-fields="['email']"
+      value-field="userAccount"
+    ></tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -24,3 +26,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/custom-placeholder-composition-api.vue b/examples/sites/demos/pc/app/user/custom-placeholder-composition-api.vue
index 15d265f6f..9a986cc57 100644
--- a/examples/sites/demos/pc/app/user/custom-placeholder-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/custom-placeholder-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" placeholder="请输入工号"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" placeholder="请输入工号"></tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('441047913162396')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/custom-placeholder.vue b/examples/sites/demos/pc/app/user/custom-placeholder.vue
index f4d486816..353da0fd5 100644
--- a/examples/sites/demos/pc/app/user/custom-placeholder.vue
+++ b/examples/sites/demos/pc/app/user/custom-placeholder.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" placeholder="请输入工号"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" placeholder="请输入工号"></tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/custom-service-composition-api.vue b/examples/sites/demos/pc/app/user/custom-service-composition-api.vue
index e9ace8d12..2f3b2974f 100644
--- a/examples/sites/demos/pc/app/user/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/custom-service-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <p class="user-value">
       {{ user }}
     </p>
@@ -152,6 +152,9 @@ function fetchW3Accounts(userId) {
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 .user-value {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/user/custom-service.vue b/examples/sites/demos/pc/app/user/custom-service.vue
index d17cd1557..e1a99f5e2 100644
--- a/examples/sites/demos/pc/app/user/custom-service.vue
+++ b/examples/sites/demos/pc/app/user/custom-service.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <p class="user-value">
       {{ user }}
     </p>
@@ -160,6 +160,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 .user-value {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/user/custom-sort-composition-api.vue b/examples/sites/demos/pc/app/user/custom-sort-composition-api.vue
index 6fc8a4806..3278b94a4 100644
--- a/examples/sites/demos/pc/app/user/custom-sort-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/custom-sort-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" :sortable="Sortable" multiple></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" :sortable="Sortable" multiple></tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -9,3 +11,9 @@ import Sortable from 'sortablejs'
 
 const user = ref('441047913162396,702973890055088,421000103624183')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/custom-sort.vue b/examples/sites/demos/pc/app/user/custom-sort.vue
index 4d04bc136..ddcf638d6 100644
--- a/examples/sites/demos/pc/app/user/custom-sort.vue
+++ b/examples/sites/demos/pc/app/user/custom-sort.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <p class="user-value">
       {{ user }}
     </p>
@@ -183,6 +183,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/user/delay-load-composition-api.vue b/examples/sites/demos/pc/app/user/delay-load-composition-api.vue
index bfff1be05..0f66501f6 100644
--- a/examples/sites/demos/pc/app/user/delay-load-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/delay-load-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" :delay="2000"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" :delay="2000"></tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('421000103624183')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/delay-load.vue b/examples/sites/demos/pc/app/user/delay-load.vue
index 1d5ea345a..3a02d236f 100644
--- a/examples/sites/demos/pc/app/user/delay-load.vue
+++ b/examples/sites/demos/pc/app/user/delay-load.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" :delay="2000"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" :delay="2000"></tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/display-only-composition-api.vue b/examples/sites/demos/pc/app/user/display-only-composition-api.vue
index 8883e3312..b01afcb05 100644
--- a/examples/sites/demos/pc/app/user/display-only-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/display-only-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" display-only auto-close allow-copy></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" display-only auto-close allow-copy></tiny-user>
+  </div>
 </template>
 
 <script setup>
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('702973890055088')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/display-only.vue b/examples/sites/demos/pc/app/user/display-only.vue
index d9e98d403..5d2ed3d24 100644
--- a/examples/sites/demos/pc/app/user/display-only.vue
+++ b/examples/sites/demos/pc/app/user/display-only.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" display-only auto-close allow-copy></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" display-only auto-close allow-copy></tiny-user>
+  </div>
 </template>
 
 <script>
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/dynamic-disable-composition-api.vue b/examples/sites/demos/pc/app/user/dynamic-disable-composition-api.vue
index 5b3082ad7..9c980fffb 100644
--- a/examples/sites/demos/pc/app/user/dynamic-disable-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/dynamic-disable-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" disabled></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" disabled></tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('421000103624183')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/dynamic-disable.vue b/examples/sites/demos/pc/app/user/dynamic-disable.vue
index 79f8a8962..b536c60f2 100644
--- a/examples/sites/demos/pc/app/user/dynamic-disable.vue
+++ b/examples/sites/demos/pc/app/user/dynamic-disable.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" disabled></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" disabled></tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/event-change-composition-api.vue b/examples/sites/demos/pc/app/user/event-change-composition-api.vue
index 89f817cfb..32ce256cd 100644
--- a/examples/sites/demos/pc/app/user/event-change-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/event-change-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple @change="change" @focus="handleFocus" @blur="handleBlur"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple @change="change" @focus="handleFocus" @blur="handleBlur"></tiny-user>
+  </div>
 </template>
 
 <script setup>
@@ -24,3 +26,9 @@ const handleBlur = () => {
   })
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/event-change.vue b/examples/sites/demos/pc/app/user/event-change.vue
index 7bd601cc8..a2eccdadc 100644
--- a/examples/sites/demos/pc/app/user/event-change.vue
+++ b/examples/sites/demos/pc/app/user/event-change.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple @change="change" @focus="handleFocus" @blur="handleBlur"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple @change="change" @focus="handleFocus" @blur="handleBlur"></tiny-user>
+  </div>
 </template>
 
 <script>
@@ -31,3 +33,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/event-error-composition-api.vue b/examples/sites/demos/pc/app/user/event-error-composition-api.vue
index b18e0666a..c6587a99a 100644
--- a/examples/sites/demos/pc/app/user/event-error-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/event-error-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple @error="queryError"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple @error="queryError"></tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -15,3 +17,9 @@ function queryError(error) {
   })
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/event-error.vue b/examples/sites/demos/pc/app/user/event-error.vue
index 1fd9fb9db..2e9a5c68a 100644
--- a/examples/sites/demos/pc/app/user/event-error.vue
+++ b/examples/sites/demos/pc/app/user/event-error.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple @error="queryError"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple @error="queryError"></tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -24,3 +26,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/hidden-tips-disable-composition-api.vue b/examples/sites/demos/pc/app/user/hidden-tips-disable-composition-api.vue
index 7db1f0165..853ef79b3 100644
--- a/examples/sites/demos/pc/app/user/hidden-tips-disable-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/hidden-tips-disable-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple disabled :show-tips="false"></tiny-user>
     <br />
     {{ user }}
@@ -12,3 +12,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('702973890055088,421000103624002,421000103624003')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/hidden-tips-disable.vue b/examples/sites/demos/pc/app/user/hidden-tips-disable.vue
index 30ea8612f..1aa8d9b5d 100644
--- a/examples/sites/demos/pc/app/user/hidden-tips-disable.vue
+++ b/examples/sites/demos/pc/app/user/hidden-tips-disable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple disabled :show-tips="false"></tiny-user>
     <br />
     {{ user }}
@@ -20,3 +20,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/hide-selected-composition-spi.vue b/examples/sites/demos/pc/app/user/hide-selected-composition-spi.vue
index 22234993d..7276a91e2 100644
--- a/examples/sites/demos/pc/app/user/hide-selected-composition-spi.vue
+++ b/examples/sites/demos/pc/app/user/hide-selected-composition-spi.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple hide-selected></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple hide-selected></tiny-user>
+  </div>
 </template>
 
 <script setup>
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('702973890055088')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/hide-selected.vue b/examples/sites/demos/pc/app/user/hide-selected.vue
index 1c2316ef0..1ae5e23a8 100644
--- a/examples/sites/demos/pc/app/user/hide-selected.vue
+++ b/examples/sites/demos/pc/app/user/hide-selected.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple hide-selected></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple hide-selected></tiny-user>
+  </div>
 </template>
 
 <script>
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/load-after-input-the-length-composition-api.vue b/examples/sites/demos/pc/app/user/load-after-input-the-length-composition-api.vue
index 048eb5b22..d943e6ecb 100644
--- a/examples/sites/demos/pc/app/user/load-after-input-the-length-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/load-after-input-the-length-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" :suggest-length="6"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" :suggest-length="6"></tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('421000103624183')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/load-after-input-the-length.vue b/examples/sites/demos/pc/app/user/load-after-input-the-length.vue
index e1082fa25..a90ee31a9 100644
--- a/examples/sites/demos/pc/app/user/load-after-input-the-length.vue
+++ b/examples/sites/demos/pc/app/user/load-after-input-the-length.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" :suggest-length="6"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" :suggest-length="6"></tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/multiple-users-composition-api.vue b/examples/sites/demos/pc/app/user/multiple-users-composition-api.vue
index 23cf50e59..4feb0bf69 100644
--- a/examples/sites/demos/pc/app/user/multiple-users-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/multiple-users-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple></tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('441047913162396,702973890055088,421000103624183')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/multiple-users-hover-expand-composition-api.vue b/examples/sites/demos/pc/app/user/multiple-users-hover-expand-composition-api.vue
index 4bd20d0f7..d3a2ce6e5 100644
--- a/examples/sites/demos/pc/app/user/multiple-users-hover-expand-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/multiple-users-hover-expand-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" style="width: 400px" multiple hover-expand></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple hover-expand></tiny-user>
+  </div>
 </template>
 
 <script>
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/multiple-users-hover-expand.vue b/examples/sites/demos/pc/app/user/multiple-users-hover-expand.vue
index 4bd20d0f7..d3a2ce6e5 100644
--- a/examples/sites/demos/pc/app/user/multiple-users-hover-expand.vue
+++ b/examples/sites/demos/pc/app/user/multiple-users-hover-expand.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" style="width: 400px" multiple hover-expand></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple hover-expand></tiny-user>
+  </div>
 </template>
 
 <script>
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/multiple-users-tag-composition-api.vue b/examples/sites/demos/pc/app/user/multiple-users-tag-composition-api.vue
index 6afe3e1b6..330d2364f 100644
--- a/examples/sites/demos/pc/app/user/multiple-users-tag-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/multiple-users-tag-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple collapse-tags></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple collapse-tags></tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('441047913162396,702973890055088,421000103624183')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/multiple-users-tag.vue b/examples/sites/demos/pc/app/user/multiple-users-tag.vue
index 5ee19ebdd..f82194807 100644
--- a/examples/sites/demos/pc/app/user/multiple-users-tag.vue
+++ b/examples/sites/demos/pc/app/user/multiple-users-tag.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple collapse-tags></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple collapse-tags></tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/multiple-users.vue b/examples/sites/demos/pc/app/user/multiple-users.vue
index f09ebde07..1b7b8ac5e 100644
--- a/examples/sites/demos/pc/app/user/multiple-users.vue
+++ b/examples/sites/demos/pc/app/user/multiple-users.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple></tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/nodata-text-composition-api.vue b/examples/sites/demos/pc/app/user/nodata-text-composition-api.vue
index d5e307c34..7774df4d8 100644
--- a/examples/sites/demos/pc/app/user/nodata-text-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/nodata-text-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" no-data-text="查无此人"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" no-data-text="查无此人"></tiny-user>
+  </div>
 </template>
 
 <script setup>
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('702973890055088')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/nodata-text.vue b/examples/sites/demos/pc/app/user/nodata-text.vue
index 19c901b40..03bf8d920 100644
--- a/examples/sites/demos/pc/app/user/nodata-text.vue
+++ b/examples/sites/demos/pc/app/user/nodata-text.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" no-data-text="查无此人"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" no-data-text="查无此人"></tiny-user>
+  </div>
 </template>
 
 <script>
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/tag-copy-all-composition-api.vue b/examples/sites/demos/pc/app/user/tag-copy-all-composition-api.vue
index a40302d00..efeca56df 100644
--- a/examples/sites/demos/pc/app/user/tag-copy-all-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/tag-copy-all-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-field="userAccount" copyable></tiny-user>
   </div>
 </template>
@@ -10,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('test1,test2,test3')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/tag-copy-all.vue b/examples/sites/demos/pc/app/user/tag-copy-all.vue
index 0c7b4fde6..43389b36a 100644
--- a/examples/sites/demos/pc/app/user/tag-copy-all.vue
+++ b/examples/sites/demos/pc/app/user/tag-copy-all.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-field="userAccount" copyable></tiny-user>
   </div>
 </template>
@@ -18,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/tag-copy-composition-api.vue b/examples/sites/demos/pc/app/user/tag-copy-composition-api.vue
index e2ffb500c..f63f28a91 100644
--- a/examples/sites/demos/pc/app/user/tag-copy-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/tag-copy-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-field="userAccount" tag-selectable></tiny-user>
   </div>
 </template>
@@ -10,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('test1,test2,test3')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/tag-copy.vue b/examples/sites/demos/pc/app/user/tag-copy.vue
index 2f20fc8b8..316229f9e 100644
--- a/examples/sites/demos/pc/app/user/tag-copy.vue
+++ b/examples/sites/demos/pc/app/user/tag-copy.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-field="userAccount" tag-selectable></tiny-user>
   </div>
 </template>
@@ -18,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/text-field-composition-api.vue b/examples/sites/demos/pc/app/user/text-field-composition-api.vue
index 4b553e6b5..fa87f2b99 100644
--- a/examples/sites/demos/pc/app/user/text-field-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/text-field-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple text-field="userCN"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple text-field="userCN"></tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('441047913162396,702973890055088,421000103624183')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/text-field.vue b/examples/sites/demos/pc/app/user/text-field.vue
index 49484ca30..9d316a2ba 100644
--- a/examples/sites/demos/pc/app/user/text-field.vue
+++ b/examples/sites/demos/pc/app/user/text-field.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple text-field="userCN"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple text-field="userCN"></tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/user-options-composition-api.vue b/examples/sites/demos/pc/app/user/user-options-composition-api.vue
index ae136a08d..9dda9819c 100644
--- a/examples/sites/demos/pc/app/user/user-options-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/user-options-composition-api.vue
@@ -1,12 +1,14 @@
 <template>
-  <tiny-user v-model="user">
-    <template #options="slotScope">
-      <div>
-        <span>{{ slotScope.slotScope.employeeNumber }}</span
-        >-<span>{{ slotScope.slotScope.email }}</span>
-      </div>
-    </template>
-  </tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user">
+      <template #options="slotScope">
+        <div>
+          <span>{{ slotScope.slotScope.employeeNumber }}</span
+          >-<span>{{ slotScope.slotScope.email }}</span>
+        </div>
+      </template>
+    </tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -15,3 +17,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('702973890055088')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/user-options.vue b/examples/sites/demos/pc/app/user/user-options.vue
index b41a91226..ffdefa116 100644
--- a/examples/sites/demos/pc/app/user/user-options.vue
+++ b/examples/sites/demos/pc/app/user/user-options.vue
@@ -1,12 +1,14 @@
 <template>
-  <tiny-user v-model="user">
-    <template #options="slotScope">
-      <div>
-        <span>{{ slotScope.slotScope.employeeNumber }}</span
-        >-<span>{{ slotScope.slotScope.email }}</span>
-      </div>
-    </template>
-  </tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user">
+      <template #options="slotScope">
+        <div>
+          <span>{{ slotScope.slotScope.employeeNumber }}</span
+          >-<span>{{ slotScope.slotScope.email }}</span>
+        </div>
+      </template>
+    </tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -23,3 +25,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/user-select-size-composition-api.vue b/examples/sites/demos/pc/app/user/user-select-size-composition-api.vue
index f1e456112..6f21ad44a 100644
--- a/examples/sites/demos/pc/app/user/user-select-size-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/user-select-size-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <p>尺寸：medium</p>
     <tiny-user v-model="user" size="medium"></tiny-user>
     <p>尺寸：small</p>
@@ -17,6 +17,9 @@ const user = ref('421000103624183')
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/user/user-select-size.vue b/examples/sites/demos/pc/app/user/user-select-size.vue
index e385125d6..40d4fe4d2 100644
--- a/examples/sites/demos/pc/app/user/user-select-size.vue
+++ b/examples/sites/demos/pc/app/user/user-select-size.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <p>尺寸：medium</p>
     <tiny-user v-model="user" size="medium"></tiny-user>
     <p>尺寸：small</p>
@@ -25,6 +25,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/user/value-field-composition-api.vue b/examples/sites/demos/pc/app/user/value-field-composition-api.vue
index 301995aca..1ae363900 100644
--- a/examples/sites/demos/pc/app/user/value-field-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/value-field-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-field="userAccount"></tiny-user>
     <p>value 值：{{ user }}</p>
   </div>
@@ -13,6 +13,9 @@ const user = ref('test1,test2,test3')
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/user/value-field.vue b/examples/sites/demos/pc/app/user/value-field.vue
index 160850e32..6058e8503 100644
--- a/examples/sites/demos/pc/app/user/value-field.vue
+++ b/examples/sites/demos/pc/app/user/value-field.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-field="userAccount"></tiny-user>
     <p>value 值：{{ user }}</p>
   </div>
@@ -21,6 +21,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/user/value-split-composition-api.vue b/examples/sites/demos/pc/app/user/value-split-composition-api.vue
index fcd904417..5543046a5 100644
--- a/examples/sites/demos/pc/app/user/value-split-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/value-split-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-split=";" text-split="," value-field="userAccount"></tiny-user>
     <p>value 值：{{ user }}</p>
   </div>
@@ -13,6 +13,9 @@ const user = ref('test1,test2,test3')
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/user/value-split.vue b/examples/sites/demos/pc/app/user/value-split.vue
index c29804946..ad0004f14 100644
--- a/examples/sites/demos/pc/app/user/value-split.vue
+++ b/examples/sites/demos/pc/app/user/value-split.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-split=";" text-split="," value-field="userAccount"></tiny-user>
     <p>value 值：{{ user }}</p>
   </div>
@@ -21,6 +21,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/packages/theme/src/area/index.less b/packages/theme/src/area/index.less
index 26acbde97..104901246 100644
--- a/packages/theme/src/area/index.less
+++ b/packages/theme/src/area/index.less
@@ -11,14 +11,17 @@
 */
 
 @import '../custom.less';
+@import './vars.less';
 
 @area-prefix-cls: ~'@{css-prefix}area';
 @select-prefix-cls: ~'@{css-prefix}select';
 
 .@{area-prefix-cls} {
   .@{select-prefix-cls} {
-    width: 270px;
-    margin-right: 10px;
-    margin-bottom: 10px;
+    .inject-Area-vars();
+
+    width: 220px;
+    margin-right: var(--tv-Area-select-margin-right);
+    margin-bottom: var(--tv-Area-select-margin-bottom);;
   }
 }
diff --git a/packages/theme/src/area/vars.less b/packages/theme/src/area/vars.less
new file mode 100644
index 000000000..296c2182f
--- /dev/null
+++ b/packages/theme/src/area/vars.less
@@ -0,0 +1,17 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+.inject-Area-vars() {
+  // 选中框间距
+  --tv-Area-select-margin-right: var(--tv-space-xl, 16px);
+  --tv-Area-select-margin-bottom: var(--tv-space-xl, 16px);
+}
\ No newline at end of file
diff --git a/packages/theme/src/locales/index.less b/packages/theme/src/locales/index.less
index 30d9ecd2f..72ed0d374 100644
--- a/packages/theme/src/locales/index.less
+++ b/packages/theme/src/locales/index.less
@@ -11,21 +11,45 @@
 */
 
 @import '../custom.less';
+@import './vars.less';
 
 @locales-prefix-cls: ~'@{css-prefix}locales';
 @popover-prefix-cls: ~'@{css-prefix}popover';
 @popper-prefix-cls: ~'@{css-prefix}popper';
 
 .@{locales-prefix-cls} {
+  .inject-Locales-vars() ;
+
   cursor: pointer;
 
   svg {
-    margin-left: 2px;
+    margin-left: var(--tv-Locales-svg-margin-left);
+  }
+  &__text {
+    font-size: var(--tv-Locales-text-font-size);
+    color: var(--tv-Locales-svg-color);
+    display: inline-flex;
+    align-items: center;
+  }
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    svg {
+      width: var(--tv-Locales-svg-size);
+      height: var(--tv-Locales-svg-size);;
+      fill: var(--tv-Locales-text-color);
+    }
+    .chevron-up {
+      width: var(--tv-Locales-up-svg-size);
+      height: var(--tv-Locales-up-svg-size);
+    }
   }
 
   &__popper {
+    .inject-Locales-vars() ;
     &.@{popover-prefix-cls}.@{popper-prefix-cls} {
-      padding: 0;
+      padding: var(--tv-Locales-popper-padding-h) 0;
     }
 
     .poplist {
@@ -34,11 +58,11 @@
       li {
         list-style: none;
         cursor: pointer;
-        padding: 0 8px;
-        line-height: 30px;
+        padding: 0 var(--tv-Locales-popper-li-padding-h);
+        line-height: var(--tv-Locales-popper-li-line-heigaht);
 
-        &.selected {
-          background: #f5f5f5;
+        &:hover {
+          background-color: var(--tv-Locales-popper-li-hover-color);
         }
       }
     }
diff --git a/packages/theme/src/locales/vars.less b/packages/theme/src/locales/vars.less
new file mode 100644
index 000000000..7b0e1ad09
--- /dev/null
+++ b/packages/theme/src/locales/vars.less
@@ -0,0 +1,33 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+.inject-Locales-vars() {
+  // 图标距离文字间距
+  --tv-Locales-svg-margin-left: var(--tv-space-sm, 4px);
+  // 图标尺寸
+  --tv-Locales-svg-size: var(--tv-font-size-md, 14px);
+  --tv-Locales-up-svg-size: var(--tv-font-size-sm, 12px);
+  // 图标颜色
+  --tv-Locales-svg-color: var(--tv-color-text, #191919);
+  // 文字字号
+  --tv-Locales-text-font-size: var(--tv-font-size-md, 14px);
+  // 文字颜色
+  --tv-Locales-text-color: var(--tv-color-text, #191919);
+  // 弹框间距
+  --tv-Locales-popper-padding-h: var(--tv-space-md, 8px);
+  // 弹框选项间距
+  --tv-Locales-popper-li-padding-h: var(--tv-space-xl, 16px);
+  // 弹框选项行高
+  --tv-Locales-popper-li-line-heigaht: 30px;
+  // 弹框选项悬浮色
+  --tv-Locales-popper-li-hover-color: var(--tv-color-bg-hover, #f5f5f5);
+}
\ No newline at end of file
diff --git a/packages/vue/src/locales/package.json b/packages/vue/src/locales/package.json
index 0204fadde..1923c6f57 100644
--- a/packages/vue/src/locales/package.json
+++ b/packages/vue/src/locales/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-locales",
-  "version": "3.19.0",
+  "version": "3.19.1",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/locales/src/pc.vue b/packages/vue/src/locales/src/pc.vue
index b2f14b8d9..f7bc492e7 100644
--- a/packages/vue/src/locales/src/pc.vue
+++ b/packages/vue/src/locales/src/pc.vue
@@ -13,12 +13,13 @@
       :append-to-body="popperAppendToBody"
     >
       <template #reference>
-        <span
-          >{{ state.text && t(state.text)
-          }}<span>
+        <span class="tiny-locales__text">
+          {{ state.text && t(state.text) }}
+          <span class="tiny-locales__icon">
             <IconChevronDown v-show="!state.visible" />
-            <IconChevronUp v-show="state.visible" /> </span
-        ></span>
+            <IconChevronUp class="chevron-up" v-show="state.visible" />
+          </span>
+        </span>
       </template>
       <div class="poplist">
         <li

From 5b8408fcf3cbbfc6aa325b8908e84064145f88b2 Mon Sep 17 00:00:00 2001
From: zhanyini <zhanyini666@163.com>
Date: Wed, 30 Oct 2024 11:39:34 -0700
Subject: [PATCH 39/65] feat(domos): [select,action-menu] optimization demo

---
 .../demos/pc/app/action-menu/icon-composition-api.vue  |  2 +-
 examples/sites/demos/pc/app/action-menu/icon.vue       |  2 +-
 .../sites/demos/pc/app/select/size-composition-api.vue | 10 +++++-----
 examples/sites/demos/pc/app/select/size.spec.ts        |  6 +++---
 examples/sites/demos/pc/app/select/size.vue            | 10 +++++-----
 5 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue b/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue
index d89b08a9d..21521c415 100644
--- a/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>场景1：只显示图标</p>
+    <p>场景1：显示图标</p>
     <tiny-action-menu
       class="custom-icon"
       :options="options"
diff --git a/examples/sites/demos/pc/app/action-menu/icon.vue b/examples/sites/demos/pc/app/action-menu/icon.vue
index 12425818f..5a45236ec 100644
--- a/examples/sites/demos/pc/app/action-menu/icon.vue
+++ b/examples/sites/demos/pc/app/action-menu/icon.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>场景1：只显示图标</p>
+    <p>场景1：显示图标</p>
     <tiny-action-menu
       class="custom-icon"
       :options="options"
diff --git a/examples/sites/demos/pc/app/select/size-composition-api.vue b/examples/sites/demos/pc/app/select/size-composition-api.vue
index 1e684d815..7192ccf68 100644
--- a/examples/sites/demos/pc/app/select/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/size-composition-api.vue
@@ -1,15 +1,15 @@
 <template>
   <div>
-    <p>默认</p>
-    <br />
-    <tiny-select v-model="value1" multiple :options="options"></tiny-select>
-    <br />
-    <br />
     <p>medium</p>
     <br />
     <tiny-select v-model="value2" size="medium" multiple :options="options"></tiny-select>
     <br />
     <br />
+    <p>默认</p>
+    <br />
+    <tiny-select v-model="value1" multiple :options="options"></tiny-select>
+    <br />
+    <br />
     <p>small</p>
     <br />
     <tiny-select v-model="value3" size="small" multiple :options="options"> </tiny-select>
diff --git a/examples/sites/demos/pc/app/select/size.spec.ts b/examples/sites/demos/pc/app/select/size.spec.ts
index 183f48a40..54022497a 100644
--- a/examples/sites/demos/pc/app/select/size.spec.ts
+++ b/examples/sites/demos/pc/app/select/size.spec.ts
@@ -5,7 +5,7 @@ test('默认尺寸', async ({ page }) => {
   await page.goto('select#size')
 
   const wrap = page.locator('#size')
-  const select = wrap.locator('.tiny-select').nth(0)
+  const select = wrap.locator('.tiny-select').nth(1)
   const input = select.locator('.tiny-input')
   const tag = select.locator('.tiny-tag')
 
@@ -18,12 +18,12 @@ test('medium 尺寸', async ({ page }) => {
   await page.goto('select#size')
 
   const wrap = page.locator('#size')
-  const select = wrap.locator('.tiny-select').nth(1)
+  const select = wrap.locator('.tiny-select').nth(0)
   const input = select.locator('.tiny-input')
   const tag = select.locator('.tiny-tag')
 
   await expect(input).toHaveClass(/tiny-input-medium/)
-  // TODO: 此处继承input 尺寸的话，应该是32
+
   await expect(input.locator('.tiny-input__inner')).toHaveCSS('height', '40px')
   await expect(tag.nth(0)).toHaveClass(/tiny-tag--medium tiny-tag--light/)
 })
diff --git a/examples/sites/demos/pc/app/select/size.vue b/examples/sites/demos/pc/app/select/size.vue
index ebd67f8ef..9c2b742d5 100644
--- a/examples/sites/demos/pc/app/select/size.vue
+++ b/examples/sites/demos/pc/app/select/size.vue
@@ -1,15 +1,15 @@
 <template>
   <div>
-    <p>默认</p>
-    <br />
-    <tiny-select v-model="value1" multiple :options="options"></tiny-select>
-    <br />
-    <br />
     <p>medium</p>
     <br />
     <tiny-select v-model="value2" size="medium" multiple :options="options"></tiny-select>
     <br />
     <br />
+    <p>默认</p>
+    <br />
+    <tiny-select v-model="value1" multiple :options="options"></tiny-select>
+    <br />
+    <br />
     <p>small</p>
     <br />
     <tiny-select v-model="value3" size="small" multiple :options="options"> </tiny-select>

From 12edac9727bbc6ad3cdd2a71f08f0673c383fa35 Mon Sep 17 00:00:00 2001
From: zhanyini <zhanyini666@163.com>
Date: Mon, 4 Nov 2024 14:14:14 -0800
Subject: [PATCH 40/65] fix(time-range): [time-picker,date-picker] modify style

---
 packages/theme/src/time-range/index.less | 23 +++++++----------------
 packages/theme/src/time-range/vars.less  | 22 ++++++++++------------
 2 files changed, 17 insertions(+), 28 deletions(-)

diff --git a/packages/theme/src/time-range/index.less b/packages/theme/src/time-range/index.less
index b60ca9501..cb0fc7ca0 100644
--- a/packages/theme/src/time-range/index.less
+++ b/packages/theme/src/time-range/index.less
@@ -24,7 +24,6 @@
   &__content {
     position: relative;
     text-align: center;
-    padding: var(--tv-TimeRange-content-padding);
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
@@ -39,31 +38,26 @@
     display: flex;
     justify-content: space-around;
     color: var(--tv-TimeRange-header-text-color);
-    padding: 8px;
-    height: 30px;
+    padding: var(--tv-TimeRange-title-padding);
     align-items: center;
-    line-height: 30px;
   }
 
   &__cell {
-    box-sizing: border-box;
-    margin: 0;
-    padding: var(--tv-TimeRange-cell-padding);
     width: 50%;
+
+    .tiny-time-panel__content {
+      padding-bottom: var(--tv-TimeRange-cell-content-padding-bottom);
+    }
   }
 
   &__header {
     height: var(--tv-TimeRange-header-height);
     color: var(--tv-TimeRange-header-text-color);
     line-height: var(--tv-TimeRange-header-line-height);
-    margin-bottom: var(--tv-TimeRange-header-margin-bottom);
+    padding: var(--tv-TimeRange-header-padding);
     text-align: left;
     font-size: var(--tv-TimeRange-font-size);
-    border-bottom: 1px solid var(--tv-TimeRange-header-border-bottom);
-
-    span {
-      margin-left: var(--tv-TimeRange-header-margin-left);
-    }
+    border-bottom: 1px solid var(--tv-TimeRange-border-color-divider);
   }
 
   &__body {
@@ -73,9 +67,6 @@
   &__footer {
     border-top: 1px solid var(--tv-TimeRange-border-color-divider);
     padding: var(--tv-TimeRange-footer-padding);
-    height: var(--tv-TimeRange-footer-height);
-    box-sizing: border-box;
-    margin-top: 12px;
     display: flex;
     justify-content: flex-end;
     align-items: center;
diff --git a/packages/theme/src/time-range/vars.less b/packages/theme/src/time-range/vars.less
index a41af0f20..b7ca1a634 100644
--- a/packages/theme/src/time-range/vars.less
+++ b/packages/theme/src/time-range/vars.less
@@ -19,27 +19,25 @@
   --tv-TimeRange-border-color-divider: var(--tv-color-border-divider, #f0f0f0);
 
   // 单元格内间距
-  --tv-TimeRange-cell-padding: 0px;
-  // 内容区内间距
-  --tv-TimeRange-content-padding: 0px;
+  --tv-TimeRange-cell-content-padding-bottom: var(--tv-space-xl, 16px);
 
   // 头部高度
   --tv-TimeRange-header-height: var(--tv-size-height-xl, 48px);
   // 头部行高
-  --tv-TimeRange-header-line-height: calc(var(--tv-size-height-xl, 48px) - 2px);
-  // 头部底部外间距
-  --tv-TimeRange-header-margin-bottom: 0px;
+  --tv-TimeRange-header-line-height: 48px;
+
   // 头部文本色
   --tv-TimeRange-header-text-color: var(--tv-color-text-weaken, #808080);
-  // 头部右侧外间距
-  --tv-TimeRange-header-margin-left: var(--tv-space-xl, 16px);
+  // 头部内间距
+  --tv-TimeRange-header-padding: 0 var(--tv-space-xl, 16px);
+  // 标题内间距
+  --tv-TimeRange-title-padding: var(--tv-space-lg, 12px) var(--tv-space-md, 8px) var(--tv-space-md, 8px)
+    var(--tv-space-md, 8px);
 
-  // 底部高度
-  --tv-TimeRange-footer-height: 56px;
   // 底部内间距
-  --tv-TimeRange-footer-padding: var(--tv-space-xl, 16px) var(--tv-space-xl, 16px) 0 0;
+  --tv-TimeRange-footer-padding: var(--tv-space-xl, 16px);
 
-  //按钮内间距
+  // 按钮内间距
   --tv-TimeRange-btn-padding: 0 var(--tv-space-sm, 4px);
   // 按钮高度
   --tv-TimeRange-btn-height: var(--tv-size-height-sm, 28px);

From a1f6f03aff9797760d37f8adfc4ba282d02f0c70 Mon Sep 17 00:00:00 2001
From: zhanyini <zhanyini666@163.com>
Date: Tue, 5 Nov 2024 10:11:08 -0800
Subject: [PATCH 41/65] fix(time-range): [time-picker] revise review comments

---
 packages/theme/src/time-range/vars.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/theme/src/time-range/vars.less b/packages/theme/src/time-range/vars.less
index b7ca1a634..3346babe3 100644
--- a/packages/theme/src/time-range/vars.less
+++ b/packages/theme/src/time-range/vars.less
@@ -24,7 +24,7 @@
   // 头部高度
   --tv-TimeRange-header-height: var(--tv-size-height-xl, 48px);
   // 头部行高
-  --tv-TimeRange-header-line-height: 48px;
+  --tv-TimeRange-header-line-height: var(--tv-TimeRange-header-height, 48px);
 
   // 头部文本色
   --tv-TimeRange-header-text-color: var(--tv-color-text-weaken, #808080);

From 109c92e79da1ee2857d8eb29a77aca79e357a639 Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Tue, 5 Nov 2024 11:22:53 +0800
Subject: [PATCH 42/65] docs(site): add common footer

---
 .../sites/public/static/css/design-common.css | 265 ++++++++++++++++++
 .../sites/public/static/js/design-common.js   | 112 +++++++-
 2 files changed, 376 insertions(+), 1 deletion(-)

diff --git a/examples/sites/public/static/css/design-common.css b/examples/sites/public/static/css/design-common.css
index a3fb6c60c..fd7e1e023 100644
--- a/examples/sites/public/static/css/design-common.css
+++ b/examples/sites/public/static/css/design-common.css
@@ -553,3 +553,268 @@
     height: 3.33333333vw;
   }
 }
+
+.tinyui-design-footer {
+  font-size: 16px;
+  color: #2c2e30;
+  background-color: #fafafa;
+  overflow: hidden;
+}
+.tinyui-design-footer .footer-content {
+  display: flex;
+  margin: 0 auto;
+  padding: 10vh 0 6.8vh;
+  justify-content: center;
+  width: 70%;
+  box-sizing: border-box;
+}
+.tinyui-design-footer .footer-content .contact {
+  width: fit-content;
+}
+.tinyui-design-footer .footer-content .contact .group-code {
+  margin: 30px 0;
+}
+.tinyui-design-footer .footer-content .contact .group-code > img {
+  width: 150px;
+  border: solid 0.55vw #f2f6f9;
+}
+.tinyui-design-footer .footer-content .links {
+  display: grid;
+  grid-template-columns: repeat(4, auto);
+  justify-content: space-between;
+  flex: 1 1 auto;
+}
+.tinyui-design-footer .footer-content .links .link-item .list-item {
+  width: 100%;
+  display: block;
+  text-decoration: none;
+  color: #2c2e30;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.tinyui-design-footer .footer-content .links .link-item .list-item:hover {
+  color: #2f5bea;
+}
+.tinyui-design-footer .footer-text-list {
+  font-size: 14px;
+  line-height: 39px;
+  white-space: nowrap;
+}
+.tinyui-design-footer .footer-title {
+  display: inline-block;
+  height: 22px;
+  line-height: 22px;
+  margin-left: 3px;
+  font-size: 16px;
+  font-weight: 600;
+  vertical-align: middle;
+}
+.tinyui-design-footer .footer-title-container {
+  margin-bottom: 17px;
+}
+.tinyui-design-footer .copyright {
+  height: 86px;
+  line-height: 1.8;
+  text-align: center;
+  font-size: 14px;
+  color: #fff;
+  background-color: #3e4345;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.tinyui-design-footer .copyright p {
+  margin: 0;
+}
+.footer-logo-container {
+  position: relative;
+  padding-right: 4.7%;
+  margin-right: 4.7%;
+  box-sizing: border-box;
+}
+.footer-logo-container::after {
+  content: '';
+  position: absolute;
+  display: block;
+  height: 135px;
+  border-right: 1px solid #979797;
+  opacity: 0.28;
+  top: 60px;
+  right: 0;
+}
+.footer-promotional-container {
+  margin: 10px 0;
+  padding-left: 1.05vw;
+}
+.footer-logo-link {
+  display: inline-block;
+  text-decoration: none;
+  cursor: pointer;
+  height: 38px;
+}
+.footer-logo-link-list {
+  height: 26px;
+  margin-right: 30px;
+}
+.footer-logo-link-list:last-child {
+  margin-right: 0;
+}
+.footer-logo-link-list img {
+  height: 100%;
+}
+.footer-promotional-label {
+  font-size: 14px;
+  height: 40px;
+  line-height: 40px;
+  white-space: nowrap;
+}
+.footer-logo-title {
+  display: inline-block;
+  height: 38px;
+  font-size: 21px;
+  font-weight: 700;
+  color: #242424;
+  margin-left: 0.53vw;
+}
+.footer-logo {
+  vertical-align: middle;
+  width: 53px;
+}
+.footer-logo-s {
+  vertical-align: middle;
+  width: 16px;
+}
+.footer-logolist-container {
+  margin-top: 10px;
+}
+.footer-logo-list {
+  margin-right: 1.46vw;
+}
+.icon-arrow {
+  display: none;
+  position: absolute;
+  top: 4px;
+  right: 0;
+  width: 16px;
+  height: 16px;
+  transform: rotate(0deg);
+  transition: all 0.3s ease-out;
+  transform-origin: center center;
+  background: url(assets/icon-arrow.png) no-repeat;
+  background-size: 100% 100%;
+}
+@media screen and (max-width: 1339px) {
+  .tinyui-design-footer .footer-content {
+    width: 84%;
+  }
+  .tinyui-design-footer .footer-content .contact .group-code > img {
+    width: 85px;
+  }
+}
+@media screen and (max-width: 1279px) {
+  .tinyui-design-footer .footer-content {
+    width: 96%;
+  }
+  .tinyui-design-footer .footer-logo-container {
+    padding-right: 2%;
+    margin-right: 2%;
+  }
+}
+@media screen and (max-width: 1023px) {
+  .tinyui-design-footer .footer-logo-container {
+    display: flex;
+    padding-right: 0;
+    margin-right: 0;
+    margin-bottom: 20px;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    padding-bottom: 40px;
+    border-bottom: 1px solid #e5e6ea;
+  }
+  .tinyui-design-footer .footer-logo-container::after {
+    display: none;
+  }
+  .tinyui-design-footer .footer-logo-container .footer-logolist-container {
+    padding-left: 0;
+  }
+  .tinyui-design-footer .footer-logo-container .footer-promotional-container {
+    padding: 0;
+    margin-left: 0;
+    width: 100%;
+    text-align: center;
+  }
+  .tinyui-design-footer .footer-content {
+    flex-direction: column;
+    width: 100%;
+    padding: 50px 30px 20px;
+  }
+  .tinyui-design-footer .footer-content .links {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .tinyui-design-footer .footer-content .links .link-item {
+    text-align: center;
+    width: 100%;
+    border-bottom: 1px solid #e5e6ea;
+  }
+  .tinyui-design-footer .footer-content .links .link-item .list-item {
+    width: 100%;
+  }
+  .tinyui-design-footer .footer-content .links .link-item div {
+    width: 100%;
+    text-align: left;
+  }
+  .tinyui-design-footer .footer-content .contact {
+    width: 100%;
+    text-align: center;
+    display: flex;
+    flex-direction: column-reverse;
+  }
+  .tinyui-design-footer .footer-content .contact .group-code {
+    margin-left: 0;
+    margin: 30px auto 12px;
+  }
+  .tinyui-design-footer .footer-content .contact .footer-logo-s {
+    display: none;
+  }
+  .tinyui-design-footer .footer-content .contact .footer-title {
+    font-size: 16px;
+    color: #2c2e30;
+    line-height: 22px;
+  }
+  .tinyui-design-footer .footer-content .footer-text-list {
+    padding-left: 23px;
+    height: 0;
+    overflow: hidden;
+    transition: all 0.5s ease-out;
+  }
+  .tinyui-design-footer .footer-content .footer-text-list.current {
+    height: fit-content;
+  }
+  .tinyui-design-footer .footer-content .footer-title-container {
+    margin: 19px 0;
+    position: relative;
+    text-align: left;
+  }
+  .tinyui-design-footer .footer-content .footer-title-container .icon-arrow {
+    display: block;
+  }
+  .tinyui-design-footer .footer-content .footer-title-container.current .icon-arrow {
+    transform: rotate(180deg);
+  }
+  .tinyui-design-footer .copyright {
+    background: transparent;
+    border-top: 1px solid #e5e6ea;
+  }
+  .tinyui-design-footer .copyright p {
+    font-size: 12px;
+    text-align: center;
+    color: #2c2e30;
+    line-height: 21px;
+    margin: 0;
+  }
+}
diff --git a/examples/sites/public/static/js/design-common.js b/examples/sites/public/static/js/design-common.js
index 07036fbdc..cc8e73a83 100644
--- a/examples/sites/public/static/js/design-common.js
+++ b/examples/sites/public/static/js/design-common.js
@@ -31,6 +31,116 @@ const headerHtml = `
   </div>
 </div>`
 
+const footerHtml = `<div class="tinyui-design-footer">
+  <div class="footer-content">
+   <div class="footer-logo-container">
+      <a href="/" class="footer-logo-link">
+        <img src="//res.hc-cdn.com/tinyui-design-common/1.0.5.20240823150427/assets/opentiny-logo.svg" title="OpenTiny" class="footer-logo">
+        <span class="footer-logo-title">OpenTiny</span>
+      </a>
+      <div class="footer-promotional-container">
+         
+          <div class="footer-promotional-label">企业级设计体系</div>
+         
+          <div class="footer-promotional-label">追求极致体验，多种设计方法融合</div>
+         
+          <div class="footer-promotional-label">开箱即用的多语言组件库</div>
+        
+        <div class="footer-logolist-container">
+          
+            <a href="/pro" class="footer-logo-link footer-logo-link-list">
+              <img src="//res.hc-cdn.com/tinyui-design-common/1.0.5.20240823150427/assets/pro.svg" title="TinyPro">
+            </a>
+          
+            <a href="/designtheme/home" class="footer-logo-link footer-logo-link-list">
+              <img src="//res.hc-cdn.com/tinyui-design-common/1.0.5.20240823150427/assets/theme.svg" title="TinyTheme">
+            </a>
+          
+            <a href="/tiny-cli/home" class="footer-logo-link footer-logo-link-list">
+              <img src="//res.hc-cdn.com/tinyui-design-common/1.0.5.20240823150427/assets/cli.svg" title="TinyCLI">
+            </a>
+          
+        </div>
+      </div>
+      
+   </div>
+    
+    <div class="links">
+      
+      <div class="link-item">
+        <div class="footer-title-container">
+          <img src="//res.hc-cdn.com/tinyui-design-common/1.0.5.20240823150427/assets/footer-title-resource.svg" class="footer-logo-s">
+          <span class="footer-title">相关资源</span>
+          <span class="icon-arrow"></span>
+        </div>
+        <div class="footer-text-list">
+          
+            <a href="//res.hc-cdn.com/tinyui-design-common/1.0.5.20240823150427/assets/OpenTinyUI.sketch" title="Sketch 设计资源" target="_blank" rel="noopener noreferrer" class="list-item">Sketch 设计资源</a>
+          
+            <a href="https://angular.cn/" title="Angular - 中文网" target="_blank" rel="noopener noreferrer" class="list-item">Angular - 中文网</a>
+          
+            <a href="https://cn.vuejs.org/" title="Vue - 中文网" target="_blank" rel="noopener noreferrer" class="list-item">Vue - 中文网</a>
+          
+            <a href="https://ionic.io/ionicons" title="ionicons 图标库" target="_blank" rel="noopener noreferrer" class="list-item">ionicons 图标库</a>
+                    
+        </div>        
+      </div>
+      
+      <div class="link-item">
+        <div class="footer-title-container">
+          <img src="//res.hc-cdn.com/tinyui-design-common/1.0.5.20240823150427/assets/footer-title-community.svg" class="footer-logo-s">
+          <span class="footer-title">社区</span>
+          <span class="icon-arrow"></span>
+        </div>
+        <div class="footer-text-list">
+          
+            <a href="https://mp.weixin.qq.com/s/3a6GaLY6hBGzV0nGzen2gw" title="公众号 - OpenTiny" target="_blank" rel="noopener noreferrer" class="list-item">公众号 - OpenTiny</a>
+          
+            <a href="https://juejin.cn/user/3808325101432983" title="掘金 - OpenTiny 社区" target="_blank" rel="noopener noreferrer" class="list-item">掘金 - OpenTiny 社区</a>
+          
+            <a href="https://www.zhihu.com/people/opentiny" title="知乎 - OpenTiny 社区" target="_blank" rel="noopener noreferrer" class="list-item">知乎 - OpenTiny 社区</a>
+          
+            <a href="https://space.bilibili.com/15284299" title="B 站 - OpenTiny 社区" target="_blank" rel="noopener noreferrer" class="list-item">B 站 - OpenTiny 社区</a>
+                    
+        </div>        
+      </div>
+      
+      <div class="link-item">
+        <div class="footer-title-container">
+          <img src="//res.hc-cdn.com/tinyui-design-common/1.0.5.20240823150427/assets/footer-title-help.svg" class="footer-logo-s">
+          <span class="footer-title">帮助</span>
+          <span class="icon-arrow"></span>
+        </div>
+        <div class="footer-text-list">
+          
+            <a href="https://github.com/opentiny" title="GitHub" target="_blank" rel="noopener noreferrer" class="list-item">GitHub</a>
+          
+            <a href="https://gitee.com/opentiny" title="Gitee" target="_blank" rel="noopener noreferrer" class="list-item">Gitee</a>
+          
+            <a href="/tiny-vue/zh-CN/os-theme/docs/changelog" title="更新日志" target="_blank" rel="noopener noreferrer" class="list-item">更新日志</a>
+          
+            <a href="https://github.com/opentiny/tiny-vue/issues" title="讨论区" target="_blank" rel="noopener noreferrer" class="list-item">讨论区</a>
+                    
+        </div>        
+      </div>
+      
+      <div class="contact">
+        <div>
+          <img src="//res.hc-cdn.com/tinyui-design-common/1.0.5.20240823150427/assets/footer-title-human.svg" class="footer-logo-s">
+          <span class="footer-title">联系我们</span>
+        </div>
+        <div class="group-code">
+          <img src="//res.hc-cdn.com/tinyui-design-common/1.0.5.20240823150427/assets/code-open.png">
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="copyright">
+  <p>Copyright © Huawei Technologies Co., Ltd. 2023. All rights reserved.</p>
+  <p>粤ICP备2022156931号-1</p>
+  </div>
+</div>`
+
 class DesignCommon {
   renderHeader() {
     document.getElementById('header').innerHTML = headerHtml
@@ -40,7 +150,7 @@ class DesignCommon {
     document.head.append(link)
   }
   renderFooter() {
-    // 空方法，用于给官网执行，解决报错
+    document.getElementById('footer').innerHTML = footerHtml
   }
 }
 window.TDCommon = DesignCommon

From 0e423cfb4646805dd0f721374c7d18fb4b66ea7c Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Tue, 5 Nov 2024 11:31:33 +0800
Subject: [PATCH 43/65] docs(site): optimize demos scroll behavior

---
 .../sites/src/views/components/components.vue    |  2 +-
 .../src/views/components/float-settings.vue      | 16 +++-------------
 examples/sites/src/views/layout/layout.vue       | 11 -----------
 3 files changed, 4 insertions(+), 25 deletions(-)

diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index 1baa58412..ffe6be37e 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/src/views/components/components.vue
@@ -493,7 +493,7 @@ export default defineComponent({
             })
           }
         }
-      }, 600)
+      }, 0)
     }
 
     // 在singleDemo情况时，才需要滚动示例区域到顶
diff --git a/examples/sites/src/views/components/float-settings.vue b/examples/sites/src/views/components/float-settings.vue
index cc8830947..c73b4af60 100644
--- a/examples/sites/src/views/components/float-settings.vue
+++ b/examples/sites/src/views/components/float-settings.vue
@@ -200,17 +200,11 @@ export default defineComponent({
         const nav = document.querySelector('.nav')
         if (docLayout) {
           docLayout.onscroll = debounce(100, false, () => {
-            const {
-              scrollTop: layoutScrollTop,
-              scrollHeight: layoutScrollHeight,
-              clientHeight: layoutHeight
-            } = docLayout
+            const { scrollTop: layoutScrollTop } = docLayout
             const headerHeight = docLayout.querySelector('header')?.clientHeight || 0
-            const footerHeight = docLayout.querySelector('#footer')?.clientHeight || 0
             const footerTop = footer.getBoundingClientRect().top
             const navHeight = nav?.clientHeight || 0
             const currSettingsBottom = parseInt(window.getComputedStyle(floatSettings.value).getPropertyValue('bottom'))
-            const footerVisibleHeight = footerHeight - (layoutScrollHeight - layoutScrollTop - layoutHeight)
 
             state.showBackTop = layoutScrollTop > 500
             state.showSettings = footerTop - navHeight - headerHeight > 220
@@ -218,11 +212,6 @@ export default defineComponent({
             if (!state.initBottomVal) {
               state.initBottomVal = currSettingsBottom
             }
-            if (footerVisibleHeight > state.initBottomVal - 40) {
-              state.settingsStyle.bottom = `${footerVisibleHeight + 20}px`
-            } else {
-              state.settingsStyle.bottom = DEFAULT_BOTTOM_VAL
-            }
           })
         }
       })
@@ -297,9 +286,10 @@ export default defineComponent({
     border-radius: 12px;
     background-color: #fff;
     cursor: pointer;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
 
     &:hover {
-      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
+      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16);
 
       .settings-icon {
         color: #191919;
diff --git a/examples/sites/src/views/layout/layout.vue b/examples/sites/src/views/layout/layout.vue
index 4b0f120a9..40c8c54d8 100644
--- a/examples/sites/src/views/layout/layout.vue
+++ b/examples/sites/src/views/layout/layout.vue
@@ -153,17 +153,6 @@ export default defineComponent({
     )
 
     onMounted(async () => {
-      // 每次切换路由，有锚点则跳转到锚点，否则导航到顶部
-      routerCbDestroy = router.afterEach((to) => {
-        if (to.hash) {
-          const el = document.querySelector(to.hash)
-          if (el) {
-            return el.scrollIntoView()
-          }
-        }
-        state.contentRef.scrollTo({ top: 0, behavior: 'auto' })
-      })
-
       // 刷新后，高亮相应的菜单
       const cmpId = router.currentRoute.value?.params?.cmpId
       if (cmpId) {

From d00d67bf3b8bb7b95cd6aa45c05d611167e4ef6e Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Tue, 5 Nov 2024 11:40:58 +0800
Subject: [PATCH 44/65] docs(site): replace footer images

---
 .../sites/public/static/images/footer/cli.svg |  17 ++++++++++++++++
 .../public/static/images/footer/code-open.png | Bin 0 -> 34542 bytes
 .../images/footer/footer-title-community.svg  |  13 ++++++++++++
 .../images/footer/footer-title-help.svg       |  16 +++++++++++++++
 .../images/footer/footer-title-human.svg      |  15 ++++++++++++++
 .../images/footer/footer-title-resource.svg   |  16 +++++++++++++++
 .../sites/public/static/images/footer/pro.svg |  15 ++++++++++++++
 .../public/static/images/footer/theme.svg     |  16 +++++++++++++++
 .../sites/public/static/js/design-common.js   |  19 +++++++++---------
 9 files changed, 117 insertions(+), 10 deletions(-)
 create mode 100644 examples/sites/public/static/images/footer/cli.svg
 create mode 100644 examples/sites/public/static/images/footer/code-open.png
 create mode 100644 examples/sites/public/static/images/footer/footer-title-community.svg
 create mode 100644 examples/sites/public/static/images/footer/footer-title-help.svg
 create mode 100644 examples/sites/public/static/images/footer/footer-title-human.svg
 create mode 100644 examples/sites/public/static/images/footer/footer-title-resource.svg
 create mode 100644 examples/sites/public/static/images/footer/pro.svg
 create mode 100644 examples/sites/public/static/images/footer/theme.svg

diff --git a/examples/sites/public/static/images/footer/cli.svg b/examples/sites/public/static/images/footer/cli.svg
new file mode 100644
index 000000000..62082bfdf
--- /dev/null
+++ b/examples/sites/public/static/images/footer/cli.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 10</title>
+    <g id="logo-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="logo-应用-2" transform="translate(-1329.000000, -159.000000)">
+            <g id="编组-10" transform="translate(1329.000000, 159.000000)">
+                <rect id="矩形备份" fill="#2F5BEA" x="0" y="0" width="40" height="40" rx="7.18993409"></rect>
+                <g id="编组备份" transform="translate(8.508089, 6.782504)">
+                    <polygon id="路径" fill="#FFFFFF" points="11.4919113 0 18.2721326 3.91330138 9.86688013 8.77230087 9.8738316 8.78433712 6.80512257 10.5554917 6.80512257 15.9762015 11.5011123 18.6865564 14.5641738 16.9186486 14.5731456 16.93418 22.9838048 12.0720729 22.9838226 19.8981426 11.4919113 26.5308568 0 19.8981426 0 6.6327142"></polygon>
+                    <polygon id="路径" fill="#A0B3F1" points="11.5011123 18.6865564 22.9225159 12.0615019 22.9225338 19.8875716 11.4919113 26.5308568"></polygon>
+                    <polygon id="路径" fill="#BFCCF6" points="6.80512257 15.9762015 11.5011123 18.6865564 11.4919113 26.5308568 0 19.8981426"></polygon>
+                    <polygon id="路径" fill="#DFE5FA" points="11.4919113 0 18.2721326 3.91330138 11.4966193 7.83016359"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/sites/public/static/images/footer/code-open.png b/examples/sites/public/static/images/footer/code-open.png
new file mode 100644
index 0000000000000000000000000000000000000000..2ca3d1067cb53b8a9f75741eea31f792598652d8
GIT binary patch
literal 34542
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

literal 0
HcmV?d00001

diff --git a/examples/sites/public/static/images/footer/footer-title-community.svg b/examples/sites/public/static/images/footer/footer-title-community.svg
new file mode 100644
index 000000000..cc0b82ca2
--- /dev/null
+++ b/examples/sites/public/static/images/footer/footer-title-community.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>形状</title>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Tiny-Design-首页" transform="translate(-953.000000, -4115.000000)" fill="#2C2E30" fill-rule="nonzero">
+            <g id="FOOTER" transform="translate(0.000000, 3992.000000)">
+                <g id="2" transform="translate(953.000000, 120.000000)">
+                    <path d="M15.3469388,7.88382687 C14.9478458,6.93621867 14.3673469,6.06150342 13.6417233,5.33257404 L13.5328798,5.22323462 C12.0453515,3.80182232 10.0498866,3 7.98185941,3 C5.84126984,3 3.84580499,3.8382688 2.32199547,5.33257404 L2.32199547,5.3690205 C0.834467124,6.89977221 0,8.90432802 0,11.0182232 C0,11.8929385 0.145124718,12.6947608 0.39909297,13.4965831 C0.653061223,14.2255125 0.979591842,14.9179954 1.41496598,15.5740319 L1.48752835,15.6469248 L1.48752835,18.7084282 C1.48752835,18.8542141 1.63265307,19 1.77777778,19 L7.98185941,19 C9.07029479,19 10.0861678,18.7813212 11.1020408,18.38041 C12.0453515,17.9794989 12.9160998,17.3963554 13.6417233,16.667426 L13.7505669,16.5580866 C15.2018141,15.0637813 16,13.095672 16,10.9817768 C15.9637188,9.92482916 15.7460317,8.90432802 15.3469388,7.88382687 Z M10.8480726,12.2938497 L7.98185941,15.0637813 C7.94557822,15.1002278 7.87301587,15.1366743 7.80045351,15.1366743 C7.72789114,15.1366743 7.69160997,15.1002278 7.61904762,15.0637813 L4.78911564,12.3302961 L4.75283446,12.2938497 C4.06349206,11.6013667 3.88208617,10.7266515 4.20861677,9.88838268 C4.57142856,8.97722095 5.47845804,8.35763098 6.42176871,8.35763098 C6.85714286,8.35763098 7.292517,8.50341686 7.69160997,8.75854214 L7.76417234,8.79498862 L7.83673469,8.75854214 C8.23582766,8.50341686 8.67120181,8.35763098 9.10657597,8.35763098 C10.0498866,8.35763098 10.9569161,8.97722095 11.3197279,9.88838268 C11.7188209,10.7266515 11.537415,11.6013667 10.8480726,12.2938497 L10.8480726,12.2938497 Z" id="形状"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/sites/public/static/images/footer/footer-title-help.svg b/examples/sites/public/static/images/footer/footer-title-help.svg
new file mode 100644
index 000000000..4a4c1e99d
--- /dev/null
+++ b/examples/sites/public/static/images/footer/footer-title-help.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 2</title>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Tiny-Design-首页" transform="translate(-1247.000000, -4114.000000)">
+            <g id="FOOTER" transform="translate(0.000000, 3992.000000)">
+                <g id="3" transform="translate(1247.000000, 120.000000)">
+                    <g id="编组-2" transform="translate(0.000000, 2.000000)">
+                        <path d="M3.51720686,0 C2.68270668,0 2,0.720048002 2,1.600256 L2,14.399808 C2,15.279952 2.68270668,16 3.51720686,16 L14,16 L14,0 L3.51720686,0 Z M5.26618474,0.822335994 L7.79488306,0.822335994 L7.79488306,6.91198399 L6.5305339,5.97852799 L5.26618474,6.91198399 L5.26618474,0.822335994 L5.26618474,0.822335994 Z M12.9480191,15.13528 L4.02293741,15.13528 C3.39704332,15.13528 2.8850171,14.595168 2.8850171,13.935152 C2.8850171,13.274992 3.39704332,12.73496 4.02293741,12.73496 L12.9480191,12.73496 L12.9480191,15.13528 Z" id="形状" fill="#2C2E30" fill-rule="nonzero"></path>
+                        <rect id="矩形" fill-opacity="0" fill="#D8D8D8" x="0" y="0" width="16" height="16"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/sites/public/static/images/footer/footer-title-human.svg b/examples/sites/public/static/images/footer/footer-title-human.svg
new file mode 100644
index 000000000..e359b502b
--- /dev/null
+++ b/examples/sites/public/static/images/footer/footer-title-human.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="16px" viewBox="0 0 14 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>路径</title>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Tiny-Design-首页" transform="translate(-1433.000000, -4114.000000)" fill="#2C2E30" fill-rule="nonzero">
+            <g id="FOOTER" transform="translate(0.000000, 3992.000000)">
+                <g id="编组-34" transform="translate(1432.000000, 120.000000)">
+                    <g id="编组-3" transform="translate(0.000000, 2.000000)">
+                        <path d="M1,14.7149463 C1,15.4569086 2.03140681,15.723591 4.06877366,15.8836866 C5.25011415,15.9765159 6.38410303,16 8,16 C9.61589679,16 10.7498857,15.9765159 11.9312263,15.8836866 C13.9685932,15.723591 15,15.4569086 15,14.7149463 C15,13.1133741 12.3717286,11.65186 9.49740836,11.0752141 L9.78480398,11.4048696 L9.67302574,9.86297635 L9.42914152,10.2343016 C10.4479499,9.8903769 11.0322442,9.17954213 11.5060158,7.93103375 L11.2645133,8.15135675 C11.7236876,8.02687189 12.1344381,7.71455766 12.4039945,7.27652308 C12.9402079,6.40516534 12.7633497,5.28921466 11.9753262,4.78920731 C11.9011171,4.74212105 11.8235088,4.70191487 11.743106,4.66877088 L11.6085614,5.00530456 L11.9662517,5.00530478 C11.9662527,3.42036457 11.7338749,2.41463765 11.1304508,1.72804246 L10.8635783,1.96987891 L11.0190881,2.29696423 C11.4840144,2.0690471 11.7505083,1.75786745 11.4673196,1.34707184 C11.3345629,1.15449402 11.1264251,0.985533192 10.85956,0.82572657 C10.7196555,0.741947758 10.5717097,0.66595524 10.4239755,0.598460476 C10.3350678,0.55784157 10.2648628,0.528614873 10.2221635,0.512137888 L10.3885763,1.05929365 C10.4091949,1.02924504 10.4335108,0.987490033 10.4570554,0.934824306 C10.507862,0.821177039 10.5355665,0.700774354 10.5220768,0.569685241 C10.4833734,0.193574431 10.1579622,0 9.65941069,0 C9.1779612,0 8.60389559,0.290045019 7.96035107,0.755703906 L8.16792764,1.05149499 L8.17749027,0.688416942 C8.07914818,0.68574631 7.97822642,0.684415807 7.87463121,0.684415807 C4.82098464,0.684415807 3.79294407,1.83978447 3.78309037,4.94975328 L4.14077888,4.95092181 L4.02040262,4.60889986 C3.91863601,4.64583062 3.82091716,4.69379974 3.7284385,4.75247822 C2.94041505,5.25248557 2.76355681,6.36843624 3.29977026,7.23979399 C3.5781587,7.69218085 4.00704347,8.01017232 4.4833112,8.12595448 L4.2320725,7.90132655 C4.76312093,9.32568005 5.26748609,9.96178872 6.35576324,10.2417272 L6.08615167,9.8762816 L6.03026255,11.4181748 L6.3197905,11.0749343 C3.50227272,11.628261 1,13.0761629 1,14.7149463 Z" id="路径"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/sites/public/static/images/footer/footer-title-resource.svg b/examples/sites/public/static/images/footer/footer-title-resource.svg
new file mode 100644
index 000000000..1d9814326
--- /dev/null
+++ b/examples/sites/public/static/images/footer/footer-title-resource.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组</title>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Tiny-Design-首页" transform="translate(-753.000000, -4114.000000)">
+            <g id="FOOTER" transform="translate(0.000000, 3992.000000)">
+                <g id="1" transform="translate(753.000000, 119.000000)">
+                    <g id="编组" transform="translate(0.000000, 3.000000)">
+                        <path d="M8.41594277,0 L8.415,3.782 L11.3592233,2.78156313 L15,14.4769539 L11.9340828,15.5190381 L8.415,4.215 L8.41594277,16 L4.99744507,16 L4.99744507,0 L8.41594277,0 Z M3.67143587,1.57114228 L3.67143587,15.5751503 L0,15.5751503 L0,1.57114228 L3.67143587,1.57114228 Z M11.0219724,3.5511022 L9.00613183,4.24048096 L9.34338273,5.31462926 L11.3592233,4.6252505 L11.0219724,3.5511022 Z M3.04292284,2.28456914 L0.636177823,2.28456914 L0.636177823,3.5751503 L3.04292284,3.5751503 L3.04292284,2.28456914 Z M7.91006643,0.617234469 L5.57996934,0.617234469 L5.57996934,1.86773547 L7.91006643,1.86773547 L7.91006643,0.617234469 Z" id="形状结合" fill="#2C2E30" fill-rule="nonzero"></path>
+                        <rect id="矩形" fill-opacity="0" fill="#D8D8D8" x="0" y="0" width="16" height="16"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/sites/public/static/images/footer/pro.svg b/examples/sites/public/static/images/footer/pro.svg
new file mode 100644
index 000000000..7fc560266
--- /dev/null
+++ b/examples/sites/public/static/images/footer/pro.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 7</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="logo-应用-1" transform="translate(-662.000000, -130.000000)">
+            <g id="编组-7" transform="translate(662.000000, 130.000000)">
+                <rect id="矩形备份" fill="#2F5BEA" x="0" y="0" width="40" height="40" rx="7.18993409"></rect>
+                <g id="编组-2备份" transform="translate(8.668429, 8.651887)">
+                    <polygon id="路径备份" fill="#DFE5FA" points="22.6317512 0 22.6317512 13.3068917 11.3452329 24.5895746 11.3452329 15.2982059 15.8500083 10.7568644 15.8500214 0"></polygon>
+                    <polygon id="路径备份" fill="#FFFFFF" transform="translate(5.671777, 12.294787) scale(-1, 1) translate(-5.671777, -12.294787) " points="11.3435546 0 11.3435546 13.3068917 1.68246306e-15 24.5895746 -1.25938755e-15 15.306479 4.56181177 10.7568644 4.56182488 0"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/sites/public/static/images/footer/theme.svg b/examples/sites/public/static/images/footer/theme.svg
new file mode 100644
index 000000000..48b04a033
--- /dev/null
+++ b/examples/sites/public/static/images/footer/theme.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 9</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="logo-应用-1" transform="translate(-992.000000, -130.000000)">
+            <g id="编组-9" transform="translate(992.000000, 130.000000)">
+                <rect id="矩形备份" fill="#2F5BEA" x="0" y="0" width="40" height="40" rx="7.18993409"></rect>
+                <g id="编组备份" transform="translate(6.666667, 9.523810)" fill-rule="nonzero">
+                    <polygon id="矩形备份-2" fill="#DFE5FA" points="-2.17072369e-12 0 9.54694373 0 9.54694373 8.5861468 -2.17072369e-12 8.5861468"></polygon>
+                    <polygon id="矩形备份-4" fill="#A0B3F1" points="17.1387402 0 26.6666667 0 26.6666667 8.5593068 17.1387402 8.5593068"></polygon>
+                    <polygon id="路径" fill="#FFFFFF" points="23.8176711 8.55930828 23.8176711 20.952381 2.86596318 20.952381 2.86596318 8.55930828 9.54694373 8.5593068 9.54783769 15.1429542 17.1387402 15.1429542 17.1378462 8.5593068"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/sites/public/static/js/design-common.js b/examples/sites/public/static/js/design-common.js
index cc8e73a83..816f62d7f 100644
--- a/examples/sites/public/static/js/design-common.js
+++ b/examples/sites/public/static/js/design-common.js
@@ -35,7 +35,7 @@ const footerHtml = `<div class="tinyui-design-footer">
   <div class="footer-content">
    <div class="footer-logo-container">
       <a href="/" class="footer-logo-link">
-        <img src="//res.hc-cdn.com/tinyui-design-common/1.0.5.20240823150427/assets/opentiny-logo.svg" title="OpenTiny" class="footer-logo">
+        <img src="/static/images/opentiny-logo.svg" title="OpenTiny" class="footer-logo">
         <span class="footer-logo-title">OpenTiny</span>
       </a>
       <div class="footer-promotional-container">
@@ -49,15 +49,15 @@ const footerHtml = `<div class="tinyui-design-footer">
         <div class="footer-logolist-container">
           
             <a href="/pro" class="footer-logo-link footer-logo-link-list">
-              <img src="//res.hc-cdn.com/tinyui-design-common/1.0.5.20240823150427/assets/pro.svg" title="TinyPro">
+              <img src="/static/images/footer/pro.svg" title="TinyPro">
             </a>
           
             <a href="/designtheme/home" class="footer-logo-link footer-logo-link-list">
-              <img src="//res.hc-cdn.com/tinyui-design-common/1.0.5.20240823150427/assets/theme.svg" title="TinyTheme">
+              <img src="/static/images/footer/theme.svg" title="TinyTheme">
             </a>
           
             <a href="/tiny-cli/home" class="footer-logo-link footer-logo-link-list">
-              <img src="//res.hc-cdn.com/tinyui-design-common/1.0.5.20240823150427/assets/cli.svg" title="TinyCLI">
+              <img src="/static/images/footer/cli.svg" title="TinyCLI">
             </a>
           
         </div>
@@ -69,13 +69,12 @@ const footerHtml = `<div class="tinyui-design-footer">
       
       <div class="link-item">
         <div class="footer-title-container">
-          <img src="//res.hc-cdn.com/tinyui-design-common/1.0.5.20240823150427/assets/footer-title-resource.svg" class="footer-logo-s">
+          <img src="/static/images/footer/footer-title-resource.svg" class="footer-logo-s">
           <span class="footer-title">相关资源</span>
           <span class="icon-arrow"></span>
         </div>
         <div class="footer-text-list">
           
-            <a href="//res.hc-cdn.com/tinyui-design-common/1.0.5.20240823150427/assets/OpenTinyUI.sketch" title="Sketch 设计资源" target="_blank" rel="noopener noreferrer" class="list-item">Sketch 设计资源</a>
           
             <a href="https://angular.cn/" title="Angular - 中文网" target="_blank" rel="noopener noreferrer" class="list-item">Angular - 中文网</a>
           
@@ -88,7 +87,7 @@ const footerHtml = `<div class="tinyui-design-footer">
       
       <div class="link-item">
         <div class="footer-title-container">
-          <img src="//res.hc-cdn.com/tinyui-design-common/1.0.5.20240823150427/assets/footer-title-community.svg" class="footer-logo-s">
+          <img src="/static/images/footer/footer-title-community.svg" class="footer-logo-s">
           <span class="footer-title">社区</span>
           <span class="icon-arrow"></span>
         </div>
@@ -107,7 +106,7 @@ const footerHtml = `<div class="tinyui-design-footer">
       
       <div class="link-item">
         <div class="footer-title-container">
-          <img src="//res.hc-cdn.com/tinyui-design-common/1.0.5.20240823150427/assets/footer-title-help.svg" class="footer-logo-s">
+          <img src="/static/images/footer/footer-title-help.svg" class="footer-logo-s">
           <span class="footer-title">帮助</span>
           <span class="icon-arrow"></span>
         </div>
@@ -126,11 +125,11 @@ const footerHtml = `<div class="tinyui-design-footer">
       
       <div class="contact">
         <div>
-          <img src="//res.hc-cdn.com/tinyui-design-common/1.0.5.20240823150427/assets/footer-title-human.svg" class="footer-logo-s">
+          <img src="/static/images/footer/footer-title-human.svg" class="footer-logo-s">
           <span class="footer-title">联系我们</span>
         </div>
         <div class="group-code">
-          <img src="//res.hc-cdn.com/tinyui-design-common/1.0.5.20240823150427/assets/code-open.png">
+          <img src="/static/images/footer/code-open.png">
         </div>
       </div>
     </div>

From ab8f8748867019af447165b42c2c76335a41e81e Mon Sep 17 00:00:00 2001
From: James-9696 <hujm969696@163.com>
Date: Mon, 4 Nov 2024 17:43:49 -0800
Subject: [PATCH 45/65] fix: modify height props

---
 examples/sites/demos/apis/drawer.js                      | 2 +-
 .../demos/pc/app/drawer/dragable-composition-api.vue     | 9 ++-------
 examples/sites/demos/pc/app/drawer/dragable.vue          | 9 ++-------
 .../demos/pc/app/drawer/placement-composition-api.vue    | 1 +
 examples/sites/demos/pc/app/drawer/placement.vue         | 1 +
 packages/vue/src/drawer/src/index.ts                     | 2 +-
 packages/vue/src/drawer/src/pc.vue                       | 2 +-
 7 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/examples/sites/demos/apis/drawer.js b/examples/sites/demos/apis/drawer.js
index 76ce5a8ca..72c673e55 100644
--- a/examples/sites/demos/apis/drawer.js
+++ b/examples/sites/demos/apis/drawer.js
@@ -172,7 +172,7 @@ export default {
         {
           name: 'height',
           type: 'string',
-          defaultValue: "'500px'",
+          defaultValue: "'100vh'",
           desc: {
             'zh-CN': '设置抽屉的高度',
             'en-US': 'Set the height of the drawer'
diff --git a/examples/sites/demos/pc/app/drawer/dragable-composition-api.vue b/examples/sites/demos/pc/app/drawer/dragable-composition-api.vue
index 415ba13aa..25c888a01 100644
--- a/examples/sites/demos/pc/app/drawer/dragable-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/dragable-composition-api.vue
@@ -10,8 +10,9 @@
       :visible="visible"
       @update:visible="visible = $event"
       @drag="drag"
+      height="600px"
     >
-      <div class="content">
+      <div>
         <p v-if="placement === 'right'">横向拖拽左边框可改变抽屉主体宽度。</p>
         <p v-else>竖向拖拽上边框可改变抽屉主体高度。</p>
       </div>
@@ -35,9 +36,3 @@ const drag = ({ width, height }) => {
   TinyModal.message({ message: `抽屉的宽为${width},高为${height}`, status: 'info' })
 }
 </script>
-
-<style scoped>
-.content {
-  height: 300px;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/drawer/dragable.vue b/examples/sites/demos/pc/app/drawer/dragable.vue
index 76b5c4807..5b1a3a55d 100644
--- a/examples/sites/demos/pc/app/drawer/dragable.vue
+++ b/examples/sites/demos/pc/app/drawer/dragable.vue
@@ -10,8 +10,9 @@
       :visible="visible"
       @update:visible="visible = $event"
       @drag="drag"
+      height="600px"
     >
-      <div class="content">
+      <div>
         <p v-if="placement === 'right'">横向拖拽左边框可改变抽屉主体宽度。</p>
         <p v-else>竖向拖拽上边框可改变抽屉主体高度。</p>
       </div>
@@ -44,9 +45,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.content {
-  height: 300px;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/drawer/placement-composition-api.vue b/examples/sites/demos/pc/app/drawer/placement-composition-api.vue
index a3bed2d36..17b9b5fc1 100644
--- a/examples/sites/demos/pc/app/drawer/placement-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/placement-composition-api.vue
@@ -10,6 +10,7 @@
       title="标题"
       :placement="placement"
       v-model:visible="visible"
+      height="600px"
     >
       <div>left或者right内容区域</div>
     </tiny-drawer>
diff --git a/examples/sites/demos/pc/app/drawer/placement.vue b/examples/sites/demos/pc/app/drawer/placement.vue
index 8792828a2..fc472ab62 100644
--- a/examples/sites/demos/pc/app/drawer/placement.vue
+++ b/examples/sites/demos/pc/app/drawer/placement.vue
@@ -9,6 +9,7 @@
       title="标题"
       :placement="placement"
       v-model:visible="visible"
+      height="600px"
     >
       <div>left或者right内容区域</div>
     </tiny-drawer>
diff --git a/packages/vue/src/drawer/src/index.ts b/packages/vue/src/drawer/src/index.ts
index 7f675438f..f1c5843cf 100644
--- a/packages/vue/src/drawer/src/index.ts
+++ b/packages/vue/src/drawer/src/index.ts
@@ -10,7 +10,7 @@ export const $constants = {
     return (scrollLockClasses[mode] || '') as string
   },
   DEFAULT_WIDTH: '500px',
-  DEFAULT_HEIGHT: '500px'
+  DEFAULT_HEIGHT: '100vh'
 }
 
 export const drawerProps = {
diff --git a/packages/vue/src/drawer/src/pc.vue b/packages/vue/src/drawer/src/pc.vue
index f930d2b8a..7b29a5f53 100644
--- a/packages/vue/src/drawer/src/pc.vue
+++ b/packages/vue/src/drawer/src/pc.vue
@@ -31,7 +31,7 @@
         ]"
         :style="{
           width: ['left', 'right'].includes(placement) ? state.computedWidth : null,
-          height: ['top', 'bottom'].includes(placement) || dragable ? state.computedHeight : null,
+          height: ['top', 'bottom', 'left', 'right'].includes(placement) || dragable ? state.computedHeight : null,
           zIndex
         }"
         v-show="state.visible"

From f1cae9f0247331453ad8e1bea77691fce70a1dcd Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Mon, 4 Nov 2024 15:36:17 +0800
Subject: [PATCH 46/65] fix: [virtual-scroll-box] fixed the  wrong class and
 horizontal scroll bar always showing

---
 .../app/virtual-tree/basic-usage-composition-api.vue |  2 +-
 .../sites/demos/pc/app/virtual-tree/basic-usage.vue  |  2 +-
 packages/vue/src/virtual-scroll-box/src/pc.vue       |  8 ++++----
 packages/vue/src/virtual-tree/src/pc.vue             | 12 ++++++------
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/examples/sites/demos/pc/app/virtual-tree/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/virtual-tree/basic-usage-composition-api.vue
index 02104dd80..7d6acc7f2 100644
--- a/examples/sites/demos/pc/app/virtual-tree/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/virtual-tree/basic-usage-composition-api.vue
@@ -6,7 +6,7 @@
       width="600"
       height="400"
       row-height="36"
-      scrollbar-size="6"
+      scrollbar-size="8"
       :tree-op="treeOp"
     ></tiny-virtual-tree>
   </div>
diff --git a/examples/sites/demos/pc/app/virtual-tree/basic-usage.vue b/examples/sites/demos/pc/app/virtual-tree/basic-usage.vue
index 26906e6d8..2ee77e935 100644
--- a/examples/sites/demos/pc/app/virtual-tree/basic-usage.vue
+++ b/examples/sites/demos/pc/app/virtual-tree/basic-usage.vue
@@ -6,7 +6,7 @@
       width="600"
       height="400"
       row-height="36"
-      scrollbar-size="6"
+      scrollbar-size="8"
       :tree-op="treeOp"
     ></tiny-virtual-tree>
   </div>
diff --git a/packages/vue/src/virtual-scroll-box/src/pc.vue b/packages/vue/src/virtual-scroll-box/src/pc.vue
index 03cf293fb..a51818bd1 100644
--- a/packages/vue/src/virtual-scroll-box/src/pc.vue
+++ b/packages/vue/src/virtual-scroll-box/src/pc.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="aui-virtual-scroll-box" :style="state.ctx.boxStyle" @scroll="onScroll">
-    <div class="aui-virtual-scroll-box__x-axis" :style="state.ctx.xAxisStyle"></div>
-    <div class="aui-virtual-scroll-box__y-axis" :style="state.ctx.yAxisStyle"></div>
-    <div class="aui-virtual-scroll-box__view" :style="state.ctx.viewStyle">
+  <div class="tiny-virtual-scroll-box" :style="state.ctx.boxStyle" @scroll="onScroll">
+    <div class="tiny-virtual-scroll-box__x-axis" :style="state.ctx.xAxisStyle"></div>
+    <div class="tiny-virtual-scroll-box__y-axis" :style="state.ctx.yAxisStyle"></div>
+    <div class="tiny-virtual-scroll-box__view" :style="state.ctx.viewStyle">
       <slot :params="state.slotParams"></slot>
     </div>
   </div>
diff --git a/packages/vue/src/virtual-tree/src/pc.vue b/packages/vue/src/virtual-tree/src/pc.vue
index 76703c115..78ce37563 100644
--- a/packages/vue/src/virtual-tree/src/pc.vue
+++ b/packages/vue/src/virtual-tree/src/pc.vue
@@ -1,6 +1,6 @@
 <template>
-  <aui-virtual-scroll-box ref="vsBox" class="aui-virtual-tree" v-bind="state.vsBoxOptions" @change="onVsBoxChange">
-    <aui-tree
+  <tiny-virtual-scroll-box ref="vsBox" class="tiny-virtual-tree" v-bind="state.vsBoxOptions" @change="onVsBoxChange">
+    <tiny-tree
       ref="tree"
       v-bind="state.treeOptions"
       v-on="state.treeEvents"
@@ -32,8 +32,8 @@
       <template v-if="slots.operation" #operation="params">
         <slot name="operation" v-bind="params"></slot>
       </template>
-    </aui-tree>
-  </aui-virtual-scroll-box>
+    </tiny-tree>
+  </tiny-virtual-scroll-box>
 </template>
 
 <script lang="ts">
@@ -46,8 +46,8 @@ export default defineComponent({
   inheritAttrs: false,
   props: [...props, 'width', 'height', 'rowHeight', 'scrollbarSize', 'treeOp'],
   components: {
-    AuiVirtualScrollBox: VirtualScrollBox,
-    AuiTree: Tree
+    TinyVirtualScrollBox: VirtualScrollBox,
+    TinyTree: Tree
   },
   setup(props, context): any {
     return setup({ props, context, renderless, api })

From 99f3244124182da4831e8c502d079e680d1dd2ca Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Tue, 5 Nov 2024 14:18:46 +0800
Subject: [PATCH 47/65] feat: update versions

---
 packages/vue/src/drawer/package.json             | 2 +-
 packages/vue/src/tree/package.json               | 2 +-
 packages/vue/src/virtual-scroll-box/package.json | 2 +-
 packages/vue/src/virtual-tree/package.json       | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/vue/src/drawer/package.json b/packages/vue/src/drawer/package.json
index 0f4db607b..6617bd1d2 100644
--- a/packages/vue/src/drawer/package.json
+++ b/packages/vue/src/drawer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-drawer",
-  "version": "3.19.0",
+  "version": "3.19.1",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/tree/package.json b/packages/vue/src/tree/package.json
index ff587d9f0..42aa8c2c7 100644
--- a/packages/vue/src/tree/package.json
+++ b/packages/vue/src/tree/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-tree",
   "type": "module",
-  "version": "3.19.0",
+  "version": "3.19.1",
   "description": "",
   "license": "MIT",
   "sideEffects": false,
diff --git a/packages/vue/src/virtual-scroll-box/package.json b/packages/vue/src/virtual-scroll-box/package.json
index 24b18830d..2628e9367 100644
--- a/packages/vue/src/virtual-scroll-box/package.json
+++ b/packages/vue/src/virtual-scroll-box/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-virtual-scroll-box",
-  "version": "3.19.0",
+  "version": "3.19.1",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/virtual-tree/package.json b/packages/vue/src/virtual-tree/package.json
index 7a07b3271..72e280a56 100644
--- a/packages/vue/src/virtual-tree/package.json
+++ b/packages/vue/src/virtual-tree/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-virtual-tree",
-  "version": "3.19.0",
+  "version": "3.19.1",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",

From b4acde6178f66c27b26a8f610a9c9f996e0c28b6 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Tue, 5 Nov 2024 14:20:29 +0800
Subject: [PATCH 48/65] feat: update theme and renderless versions

---
 packages/renderless/package.json | 2 +-
 packages/theme/package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/renderless/package.json b/packages/renderless/package.json
index e4056356f..007b8657e 100644
--- a/packages/renderless/package.json
+++ b/packages/renderless/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.19.2",
+  "version": "3.19.3",
   "private": true,
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
diff --git a/packages/theme/package.json b/packages/theme/package.json
index 075f258f0..ba0608d6d 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-theme",
   "type": "module",
-  "version": "3.19.3",
+  "version": "3.19.4",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
   "license": "MIT",

From dce3b6e37bf8d62404bdb8df2ba3facae1413f0f Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Tue, 5 Nov 2024 14:29:13 +0800
Subject: [PATCH 49/65] feat: update docs versions

---
 examples/sites/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/sites/package.json b/examples/sites/package.json
index 40243ad8d..f366e2fbd 100644
--- a/examples/sites/package.json
+++ b/examples/sites/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "3.19.3",
+  "version": "3.19.4",
   "license": "MIT",
   "scripts": {
     "start": "vite",

From 1afb7ee18edf262fd45b4f32b0d025ec38cc296b Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Tue, 5 Nov 2024 20:16:12 +0800
Subject: [PATCH 50/65] docs(playground): playground only supply latest 3
 version

---
 examples/sites/playground/App.vue | 85 +++++++++++++++++++------------
 1 file changed, 52 insertions(+), 33 deletions(-)

diff --git a/examples/sites/playground/App.vue b/examples/sites/playground/App.vue
index 4c88cd5cf..0d5c0c6cb 100644
--- a/examples/sites/playground/App.vue
+++ b/examples/sites/playground/App.vue
@@ -1,23 +1,18 @@
-<script setup>
+<script setup lang="jsx">
 import { onMounted, reactive, nextTick } from 'vue'
 import { Repl, useStore, File } from '@opentiny/vue-repl'
 import '@opentiny/vue-repl/dist/style.css'
 
 import Editor from '@vue/repl/codemirror-editor'
-import {
-  ButtonGroup as TinyButtonGroup,
-  Select as TinySelect,
-  Option as TinyOption,
-  Switch as TinySwitch,
-  Notify
-} from '@opentiny/vue'
+import { TinyButtonGroup, TinyButton, TinySelect, TinyOption, TinySwitch, Notify } from '@opentiny/vue'
 import { staticDemoPath, getWebdocPath } from '@/views/components/cmp-config'
 import { fetchDemosFile } from '@/tools/utils'
 import logoUrl from './assets/opentiny-logo.svg?url'
 import GitHub from './icons/Github.vue'
 import Share from './icons/Share.vue'
 
-const VERSION = 'tiny-vue-version-3.16'
+const VERSION = 'tiny-vue-version-3.19'
+const NOTIFY = 'tiny-vue-playground-notify'
 const LAYOUT = 'playground-layout'
 const LAYOUT_REVERSE = 'playground-layout-reverse'
 
@@ -28,40 +23,57 @@ const isMobileFirst = tinyMode === 'mobile-first'
 const isSaas = tinyTheme === 'saas'
 const isPreview = searchObj.get('openMode') === 'preview' // 是否多端弹窗预览
 
-const versions = ['3.19', '3.18', '3.17', '3.16', '3.15', '3.14', '3.13', '3.12', '3.11', '3.10', '3.9', '3.8']
-const latestVersion = isPreview ? versions[0] : localStorage.getItem(VERSION) || versions[0]
+const versions = ['3.19', '3.18', '3.17']
+const getVersion = () => {
+  if (isPreview) {
+    return versions[0]
+  }
+  if (versions.includes(localStorage.getItem(VERSION))) {
+    localStorage.getItem(VERSION)
+  }
+  return versions[0]
+}
+const latestVersion = getVersion()
 const cdnHost = localStorage.getItem('setting-cdn')
 
 const versionDelimiter = cdnHost.includes('npmmirror') ? '/' : '@'
 const fileDelimiter = cdnHost.includes('npmmirror') ? 'files/' : ''
 
-const isOldVersion = (version) => {
-  const minorVersion = version?.split('.')?.[1]
-  return minorVersion && minorVersion < 16
+let notify
+const showNotify = () => {
+  if (localStorage.getItem(NOTIFY) !== 'true' && !notify) {
+    const muteNotify = () => {
+      notify.close()
+      localStorage.setItem(NOTIFY, true)
+    }
+    notify = Notify({
+      type: 'info',
+      title: '温馨提示：',
+      message: () => (
+        <div>
+          <div>演练场仅保留最新的三个版本可选。</div>
+          <div style="text-align: right;margin-top: 12px;">
+            <TinyButton onClick={muteNotify} type={'primary'}>
+              不再提示
+            </TinyButton>
+          </div>
+        </div>
+      ),
+      duration: -1,
+      position: 'top-right',
+      verticalOffset: 200
+    })
+  }
 }
 
-// 3.16.0版本之前的runtime还没有抽离单独的包
-const getRuntime = (version) => {
-  if (isOldVersion(version)) {
-    return `${cdnHost}/@opentiny/vue${versionDelimiter}${version}/${fileDelimiter}runtime/`
-  }
-  return `${cdnHost}/@opentiny/vue-runtime${versionDelimiter}${version}/${fileDelimiter}dist3/`
-}
-
-// 3.16.0版本之前的runtime没有tiny-vue-pc.mjs文件
-const getPcRuntime = (version) => {
-  if (isOldVersion(version)) {
-    return `${getRuntime(version)}tiny-vue.mjs`
-  }
-  return `${getRuntime(version)}tiny-vue-pc.mjs`
-}
+const getRuntime = (version) => `${cdnHost}/@opentiny/vue-runtime${versionDelimiter}${version}/${fileDelimiter}dist3/`
 
 const createImportMap = (version) => {
   const imports = {
     'vue': `${cdnHost}/vue${versionDelimiter}3.4.27/${fileDelimiter}dist/vue.runtime.esm-browser.js`,
     'echarts': `${cdnHost}/echarts${versionDelimiter}5.4.1/${fileDelimiter}dist/echarts.esm.js`,
     '@vue/compiler-sfc': `${cdnHost}/@vue/compiler-sfc${versionDelimiter}3.4.27/${fileDelimiter}dist/compiler-sfc.esm-browser.js`,
-    '@opentiny/vue': getPcRuntime(version),
+    '@opentiny/vue': `${getRuntime(version)}tiny-vue-pc.mjs`,
     '@opentiny/vue-icon': `${getRuntime(version)}tiny-vue-icon.mjs`,
     '@opentiny/vue-locale': `${getRuntime(version)}tiny-vue-locale.mjs`,
     '@opentiny/vue-common': `${getRuntime(version)}tiny-vue-common.mjs`,
@@ -72,8 +84,9 @@ const createImportMap = (version) => {
     'sortablejs': `${cdnHost}/sortablejs${versionDelimiter}1.15.0/${fileDelimiter}modular/sortable.esm.js`
   }
   if (['aurora', 'saas'].includes(tinyTheme)) {
-    imports[`@opentiny/vue-design-${tinyTheme}`] =
-      `${cdnHost}/@opentiny/vue-design-${tinyTheme}${versionDelimiter}${version}/${fileDelimiter}index.js`
+    imports[
+      `@opentiny/vue-design-${tinyTheme}`
+    ] = `${cdnHost}/@opentiny/vue-design-${tinyTheme}${versionDelimiter}${version}/${fileDelimiter}index.js`
   }
   if (isSaas) {
     imports['@opentiny/vue-icon'] = `${getRuntime(version)}tiny-vue-icon-saas.mjs`
@@ -291,7 +304,13 @@ function share() {
       </span>
       <span class="ml20">
         OpenTiny Vue 版本:
-        <tiny-select v-model="state.selectVersion" @change="selectVersion" style="width: 150px" :disabled="isPreview">
+        <tiny-select
+          v-model="state.selectVersion"
+          style="width: 150px"
+          :disabled="isPreview"
+          @change="selectVersion"
+          @click="showNotify"
+        >
           <tiny-option v-for="item in state.versions" :key="item.value" :label="item.value" :value="item.value">
           </tiny-option>
         </tiny-select>

From dfed99f235c287b7ea4f2bd38cf0d351eb419fbe Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Mon, 4 Nov 2024 23:40:39 -0800
Subject: [PATCH 51/65] feat(dept): [dept] Optimize style

---
 .../custom-service-composition-api.vue         |  1 +
 .../demos/pc/app/hrapprover/custom-service.vue |  1 +
 packages/theme/src/base/reset.less             | 18 +++++++++++++++++-
 packages/theme/src/dept/index.less             | 11 ++++-------
 packages/theme/src/dept/vars.less              |  4 ++--
 packages/theme/src/espace/index.less           |  2 +-
 packages/theme/src/roles/index.less            |  8 +-------
 packages/theme/src/roles/vars.less             |  2 --
 packages/vue/src/dept/package.json             |  2 +-
 packages/vue/src/dept/src/pc.vue               |  1 +
 10 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/examples/sites/demos/pc/app/hrapprover/custom-service-composition-api.vue b/examples/sites/demos/pc/app/hrapprover/custom-service-composition-api.vue
index c02960bcb..15fc2e7ff 100644
--- a/examples/sites/demos/pc/app/hrapprover/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/hrapprover/custom-service-composition-api.vue
@@ -6,6 +6,7 @@
       @update:approvalPerson="person = $event"
       :fetch-hrapprover="getFetchHrapprover"
       :category="category"
+      title="选择权签人"
     ></tiny-hrapprover>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/hrapprover/custom-service.vue b/examples/sites/demos/pc/app/hrapprover/custom-service.vue
index 00ff863e7..40554bc57 100644
--- a/examples/sites/demos/pc/app/hrapprover/custom-service.vue
+++ b/examples/sites/demos/pc/app/hrapprover/custom-service.vue
@@ -6,6 +6,7 @@
       @update:approvalPerson="person = $event"
       :fetch-hrapprover="getFetchHrapprover"
       :category="category"
+      title="选择权签人"
     ></tiny-hrapprover>
   </div>
 </template>
diff --git a/packages/theme/src/base/reset.less b/packages/theme/src/base/reset.less
index 1b2f490cd..dd5e9f6f7 100644
--- a/packages/theme/src/base/reset.less
+++ b/packages/theme/src/base/reset.less
@@ -177,7 +177,23 @@
   }
 }
 
-.tiny-popper,
+.tiny-popper {
+  &[x-placement^='top'] {
+    margin-bottom: 4px;
+  }
+  &[x-placement^='bottom'] {
+    margin-top: 4px;
+  }
+  &[x-placement^='right'] {
+    margin-left: 4px;
+  }
+  &[x-placement^='left'] {
+    margin-right: 4px;
+  }
+}
+
+
+.tiny-popconfirm-popover,
 .tiny-tooltip__popper {
   .popper__arrow {
     position: absolute;
diff --git a/packages/theme/src/dept/index.less b/packages/theme/src/dept/index.less
index 7c3951f95..0cb3c3cb7 100644
--- a/packages/theme/src/dept/index.less
+++ b/packages/theme/src/dept/index.less
@@ -22,22 +22,19 @@
   .inject-Dept-vars();
 
   &__search {
-    margin-bottom: 12px;
+    margin-bottom: 24px;
   }
 
   &__text,
   &__label {
+    width: 80px;
     font-size: var(--tv-Dept-label-font-size);
     color: var(--tv-Dept-label-text-color);
     font-weight: var(--tv-Dept-label-font-weight);
+    text-align: left;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-  }
-
-  &__label {
-    text-align: right;
-
     &.is-selected {
       text-align: left;
       margin-bottom: 4px;
@@ -53,7 +50,7 @@
   }
 
   &__item {
-    margin-bottom: 12px;
+    margin-bottom: 24px;
   }
 
   &__search &__label,
diff --git a/packages/theme/src/dept/vars.less b/packages/theme/src/dept/vars.less
index c546053eb..48e128325 100644
--- a/packages/theme/src/dept/vars.less
+++ b/packages/theme/src/dept/vars.less
@@ -12,8 +12,8 @@
 
 .inject-Dept-vars() {
   --tv-Dept-label-font-size: var(--tv-font-size-md);
-  --tv-Dept-label-text-color: var(--tv-color-text);
-  --tv-Dept-label-font-weight: var(--tv-font-weight-bold);
+  --tv-Dept-label-text-color: var(--tv-color-text-secondary);
+  --tv-Dept-label-font-weight: var(--tv-font-weight-regular);
   --tv-Dept-selected-info-text-color: var(--tv-color-text);
   --tv-Dept-selected-info-bg-color: var(--tv-color-bg-active);
   --tv-Dept-selected-info-border-radius: var(--tv-border-radius-md);
diff --git a/packages/theme/src/espace/index.less b/packages/theme/src/espace/index.less
index bf4f21e7c..2e2a7bd51 100644
--- a/packages/theme/src/espace/index.less
+++ b/packages/theme/src/espace/index.less
@@ -22,7 +22,7 @@
   .item-talk,
   .item-call,
   .item-email {
-    margin: 0 8px 0 0;
+    margin: 0 24px 0 0;
     line-height: 1;
 
     .@{svg-prefix-cls} {
diff --git a/packages/theme/src/roles/index.less b/packages/theme/src/roles/index.less
index e406ae528..307f8a8d9 100644
--- a/packages/theme/src/roles/index.less
+++ b/packages/theme/src/roles/index.less
@@ -24,7 +24,7 @@
 
   &__selector {
     &.@{css-prefix}popover.@{css-prefix}popper {
-      padding: 0;
+      padding: 8px 0;
     }
   }
 
@@ -57,11 +57,5 @@
       background: var(--tv-Roles-poplist-item-hover-bg-color);
     }
 
-    &.is-selected {
-      &,
-      &:hover {
-        background: var(--tv-Roles-poplist-item-selected-bg-color);
-      }
-    }
   }
 }
diff --git a/packages/theme/src/roles/vars.less b/packages/theme/src/roles/vars.less
index 163b4225a..bd2a84363 100644
--- a/packages/theme/src/roles/vars.less
+++ b/packages/theme/src/roles/vars.less
@@ -19,6 +19,4 @@
   --tv-Roles-poplist-item-font-size: var(--tv-font-size-md);
   // 下拉面板选项悬浮背景色
   --tv-Roles-poplist-item-hover-bg-color: var(--tv-color-bg-hover);
-  // 下拉面板选项选中色
-  --tv-Roles-poplist-item-selected-bg-color: var(--tv-color-bg-active);
 }
diff --git a/packages/vue/src/dept/package.json b/packages/vue/src/dept/package.json
index cf5e200b2..608decb1d 100644
--- a/packages/vue/src/dept/package.json
+++ b/packages/vue/src/dept/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-dept",
-  "version": "3.19.0",
+  "version": "3.19.1",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/dept/src/pc.vue b/packages/vue/src/dept/src/pc.vue
index e890e23c7..b0076365c 100644
--- a/packages/vue/src/dept/src/pc.vue
+++ b/packages/vue/src/dept/src/pc.vue
@@ -18,6 +18,7 @@
       @update:visible="state.open = $event"
       :close-on-click-modal="false"
       width="550px"
+      top="10vh"
       append-to-body
       @close="closeDialog"
       :title="title"

From 9ac66f392234ad06f7663bf170ff187238721553 Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Tue, 5 Nov 2024 22:08:07 -0800
Subject: [PATCH 52/65] feat(dept): [dept] Optimize style

---
 .../demos/pc/app/hrapprover/basic-usage-composition-api.vue     | 1 +
 examples/sites/demos/pc/app/hrapprover/basic-usage.vue          | 1 +
 .../demos/pc/app/hrapprover/category-type-composition-api.vue   | 1 +
 examples/sites/demos/pc/app/hrapprover/category-type.vue        | 1 +
 .../sites/demos/pc/app/hrapprover/disabled-composition-api.vue  | 1 +
 examples/sites/demos/pc/app/hrapprover/disabled.vue             | 1 +
 packages/theme/src/dept/index.less                              | 1 -
 packages/vue/src/dept/package.json                              | 2 +-
 packages/vue/src/dept/src/pc.vue                                | 1 -
 9 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/examples/sites/demos/pc/app/hrapprover/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/hrapprover/basic-usage-composition-api.vue
index 58532d8fd..03354d6fc 100644
--- a/examples/sites/demos/pc/app/hrapprover/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/hrapprover/basic-usage-composition-api.vue
@@ -2,6 +2,7 @@
   <div class="demo-hrapprover-class">
     <tiny-hrapprover
       v-model="value"
+      title="选择权签人"
       :approval-person="person"
       @update:approvalPerson="person = $event"
     ></tiny-hrapprover>
diff --git a/examples/sites/demos/pc/app/hrapprover/basic-usage.vue b/examples/sites/demos/pc/app/hrapprover/basic-usage.vue
index 742f7b29d..d8cc511d4 100644
--- a/examples/sites/demos/pc/app/hrapprover/basic-usage.vue
+++ b/examples/sites/demos/pc/app/hrapprover/basic-usage.vue
@@ -2,6 +2,7 @@
   <div class="demo-hrapprover-class">
     <tiny-hrapprover
       v-model="value"
+      title="选择权签人"
       :approval-person="person"
       @update:approvalPerson="person = $event"
     ></tiny-hrapprover>
diff --git a/examples/sites/demos/pc/app/hrapprover/category-type-composition-api.vue b/examples/sites/demos/pc/app/hrapprover/category-type-composition-api.vue
index a5b8f8dc4..0d6cc89d3 100644
--- a/examples/sites/demos/pc/app/hrapprover/category-type-composition-api.vue
+++ b/examples/sites/demos/pc/app/hrapprover/category-type-composition-api.vue
@@ -4,6 +4,7 @@
       v-model="value"
       :approval-person="person"
       @update:approvalPerson="person = $event"
+      title="选择权签人"
       category="0506"
     ></tiny-hrapprover>
   </div>
diff --git a/examples/sites/demos/pc/app/hrapprover/category-type.vue b/examples/sites/demos/pc/app/hrapprover/category-type.vue
index cb77bc73a..5e40728fe 100644
--- a/examples/sites/demos/pc/app/hrapprover/category-type.vue
+++ b/examples/sites/demos/pc/app/hrapprover/category-type.vue
@@ -3,6 +3,7 @@
     <tiny-hrapprover
       v-model="value"
       :approval-person="person"
+      title="选择权签人"
       @update:approvalPerson="person = $event"
       category="0506"
     ></tiny-hrapprover>
diff --git a/examples/sites/demos/pc/app/hrapprover/disabled-composition-api.vue b/examples/sites/demos/pc/app/hrapprover/disabled-composition-api.vue
index 5af30bd1f..e517fa29b 100644
--- a/examples/sites/demos/pc/app/hrapprover/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/hrapprover/disabled-composition-api.vue
@@ -4,6 +4,7 @@
     <tiny-hrapprover
       :value="value"
       :approval-person="person"
+      title="选择权签人"
       @update:approvalPerson="person = $event"
       :disabled="disabled"
     ></tiny-hrapprover>
diff --git a/examples/sites/demos/pc/app/hrapprover/disabled.vue b/examples/sites/demos/pc/app/hrapprover/disabled.vue
index eb716e0ec..c87aa99ad 100644
--- a/examples/sites/demos/pc/app/hrapprover/disabled.vue
+++ b/examples/sites/demos/pc/app/hrapprover/disabled.vue
@@ -4,6 +4,7 @@
     <tiny-hrapprover
       :value="value"
       :approval-person="person"
+      title="选择权签人"
       @update:approvalPerson="person = $event"
       :disabled="disabled"
     ></tiny-hrapprover>
diff --git a/packages/theme/src/dept/index.less b/packages/theme/src/dept/index.less
index 0cb3c3cb7..09b1c0b45 100644
--- a/packages/theme/src/dept/index.less
+++ b/packages/theme/src/dept/index.less
@@ -25,7 +25,6 @@
     margin-bottom: 24px;
   }
 
-  &__text,
   &__label {
     width: 80px;
     font-size: var(--tv-Dept-label-font-size);
diff --git a/packages/vue/src/dept/package.json b/packages/vue/src/dept/package.json
index 608decb1d..cf5e200b2 100644
--- a/packages/vue/src/dept/package.json
+++ b/packages/vue/src/dept/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-dept",
-  "version": "3.19.1",
+  "version": "3.19.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/dept/src/pc.vue b/packages/vue/src/dept/src/pc.vue
index b0076365c..e890e23c7 100644
--- a/packages/vue/src/dept/src/pc.vue
+++ b/packages/vue/src/dept/src/pc.vue
@@ -18,7 +18,6 @@
       @update:visible="state.open = $event"
       :close-on-click-modal="false"
       width="550px"
-      top="10vh"
       append-to-body
       @close="closeDialog"
       :title="title"

From 8f2723ddd3fbb62c5dffc169dbaac1d12dfcf99c Mon Sep 17 00:00:00 2001
From: shenjunjian <40288193@qq.com>
Date: Wed, 6 Nov 2024 19:47:33 -0800
Subject: [PATCH 53/65] fix(site): fix the issue the official website is not
 fully displayed in small screen sizes

---
 examples/sites/src/views/components/components.vue | 6 ++++--
 examples/sites/src/views/layout/layout.vue         | 5 ++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index ffe6be37e..1dc57a662 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/src/views/components/components.vue
@@ -816,7 +816,6 @@ export default defineComponent({
     flex: 1;
     display: flex;
     justify-content: center;
-    min-width: 680px;
     padding: 0 40px;
   }
 
@@ -837,7 +836,6 @@ export default defineComponent({
 
     :deep(> .tiny-tabs__header) {
       position: sticky;
-      top: 90px;
       z-index: var(--docs-tabs-header-zindex);
       background-color: #fff;
 
@@ -974,6 +972,10 @@ export default defineComponent({
   column-gap: 16px;
 }
 
+.docs-content-main {
+  overflow: auto;
+}
+
 .cmp-container {
   p {
     font-size: 16px;
diff --git a/examples/sites/src/views/layout/layout.vue b/examples/sites/src/views/layout/layout.vue
index 40c8c54d8..d914eb795 100644
--- a/examples/sites/src/views/layout/layout.vue
+++ b/examples/sites/src/views/layout/layout.vue
@@ -196,9 +196,12 @@ export default defineComponent({
 .content-layout {
   display: flex;
   --layout-tree-menu-input-height: 32px;
-  --layout-content-main-min-width: 600px;
+  --layout-content-main-min-width: 200px;
   --layout-content-main-max-width: 1000px;
 }
+@media screen and (max-width: 640px) {
+  --layout-content-main-min-width: 600px;
+}
 
 .tiny-tooltip.tiny-tooltip__popper.is-light.docs-tooltip {
   border: none;

From de5a2292b9a3d042ec8b9c64e735546eb5eceb9a Mon Sep 17 00:00:00 2001
From: shenjunjian <40288193@qq.com>
Date: Wed, 6 Nov 2024 22:01:14 -0800
Subject: [PATCH 54/65] fix(playground):  fix the issue, the playground site is
 not fully displayed in small screen sizes

---
 examples/sites/playground/App.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/examples/sites/playground/App.vue b/examples/sites/playground/App.vue
index 0d5c0c6cb..ee871c132 100644
--- a/examples/sites/playground/App.vue
+++ b/examples/sites/playground/App.vue
@@ -288,9 +288,9 @@ function share() {
 
 <template>
   <div class="header">
-    <div class="title"><img class="logo" :src="logoUrl" /> <span>OpenTiny Vue 演练场</span></div>
+    <div class="title"><img class="logo" :src="logoUrl" /> <span class="mobile-hide">OpenTiny Vue 演练场</span></div>
     <div>
-      <span class="ml20">
+      <span class="ml20 mobile-hide">
         布局方向:
         <tiny-button-group
           :data="state.layoutOptions"
@@ -298,12 +298,12 @@ function share() {
           @change="changeLayout"
         ></tiny-button-group>
       </span>
-      <span class="ml20">
+      <span class="ml20 mobile-hide">
         布局反转:
         <tiny-switch v-model="state.layoutReverse" mini @change="changeReserve"></tiny-switch>
       </span>
       <span class="ml20">
-        OpenTiny Vue 版本:
+        <span class="mobile-hide">OpenTiny Vue 版本: </span>
         <tiny-select
           v-model="state.selectVersion"
           style="width: 150px"
@@ -336,6 +336,12 @@ function share() {
   box-sizing: border-box;
 }
 
+/** 小屏幕时隐藏 */
+@media screen and (max-width: 640px) {
+  .mobile-hide {
+    display: none;
+  }
+}
 #header {
   display: none;
 }

From 56f14afdb8655725055a07fdbeea964ab9ec6902 Mon Sep 17 00:00:00 2001
From: shenjunjian <40288193@qq.com>
Date: Wed, 6 Nov 2024 22:03:25 -0800
Subject: [PATCH 55/65] fix(site): fix

---
 examples/sites/playground/App.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/sites/playground/App.vue b/examples/sites/playground/App.vue
index ee871c132..22f30ec9d 100644
--- a/examples/sites/playground/App.vue
+++ b/examples/sites/playground/App.vue
@@ -12,7 +12,7 @@ import GitHub from './icons/Github.vue'
 import Share from './icons/Share.vue'
 
 const VERSION = 'tiny-vue-version-3.19'
-const NOTIFY = 'tiny-vue-playground-notify'
+const NOTIFY_KEY = 'tiny-vue-playground-notify'
 const LAYOUT = 'playground-layout'
 const LAYOUT_REVERSE = 'playground-layout-reverse'
 
@@ -41,10 +41,10 @@ const fileDelimiter = cdnHost.includes('npmmirror') ? 'files/' : ''
 
 let notify
 const showNotify = () => {
-  if (localStorage.getItem(NOTIFY) !== 'true' && !notify) {
+  if (localStorage.getItem(NOTIFY_KEY) !== 'true' && !notify) {
     const muteNotify = () => {
       notify.close()
-      localStorage.setItem(NOTIFY, true)
+      localStorage.setItem(NOTIFY_KEY, true)
     }
     notify = Notify({
       type: 'info',

From 4d70a822bfa3537ea29632fa323defa2d10b2768 Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Thu, 7 Nov 2024 17:23:38 +0800
Subject: [PATCH 56/65] docs(grid): [grid] optimize grid demos

---
 .../popeditor-in-grid-remote-search-composition-api.vue       | 2 +-
 .../pc/app/grid/editor/popeditor-in-grid-remote-search.vue    | 2 +-
 .../pc/app/grid/empty/empty-data-tip-composition-api.vue      | 2 +-
 examples/sites/demos/pc/app/grid/empty/empty-data-tip.vue     | 2 +-
 .../operation-column/selection-config-composition-api.vue     | 1 -
 examples/sites/demos/pc/app/grid/webdoc/grid-editor.js        | 4 ++--
 packages/theme/src/grid/table.less                            | 3 ++-
 7 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search-composition-api.vue b/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search-composition-api.vue
index c1a1f06a0..5cfcc3455 100644
--- a/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search-composition-api.vue
@@ -86,7 +86,7 @@ function getPopEditorOp() {
         {
           field: 'id',
           title: 'ID',
-          width: 40
+          width: 60
         },
         {
           field: 'name',
diff --git a/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search.vue b/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search.vue
index 49865c7af..ef4df3d82 100644
--- a/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search.vue
+++ b/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search.vue
@@ -89,7 +89,7 @@ export default {
             {
               field: 'id',
               title: 'ID',
-              width: 40
+              width: 60
             },
             {
               field: 'name',
diff --git a/examples/sites/demos/pc/app/grid/empty/empty-data-tip-composition-api.vue b/examples/sites/demos/pc/app/grid/empty/empty-data-tip-composition-api.vue
index cdcbb38de..cbaad372e 100644
--- a/examples/sites/demos/pc/app/grid/empty/empty-data-tip-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/empty/empty-data-tip-composition-api.vue
@@ -7,7 +7,7 @@
       <tiny-grid-column field="address" title="地址"></tiny-grid-column>
       <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
       <template #empty>
-        <span style="color: red">没有更多数据了！</span>
+        <span style="color: #ff8800">没有更多数据了！</span>
       </template>
     </tiny-grid>
     <br />
diff --git a/examples/sites/demos/pc/app/grid/empty/empty-data-tip.vue b/examples/sites/demos/pc/app/grid/empty/empty-data-tip.vue
index 2d7bfc1a8..3db0b548c 100644
--- a/examples/sites/demos/pc/app/grid/empty/empty-data-tip.vue
+++ b/examples/sites/demos/pc/app/grid/empty/empty-data-tip.vue
@@ -7,7 +7,7 @@
       <tiny-grid-column field="address" title="地址"></tiny-grid-column>
       <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
       <template #empty>
-        <span style="color: red">没有更多数据了！</span>
+        <span style="color: #ff8800">没有更多数据了！</span>
       </template>
     </tiny-grid>
     <br />
diff --git a/examples/sites/demos/pc/app/grid/operation-column/selection-config-composition-api.vue b/examples/sites/demos/pc/app/grid/operation-column/selection-config-composition-api.vue
index f5fb11040..da91ea18e 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/selection-config-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/selection-config-composition-api.vue
@@ -5,7 +5,6 @@
       ref="gridRef"
       :select-config="selectConfig"
       highlight-current-row
-      border
       :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
     >
       <tiny-grid-column type="selection" width="60"></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-editor.js b/examples/sites/demos/pc/app/grid/webdoc/grid-editor.js
index e1319cba7..fa838945b 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-editor.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-editor.js
@@ -10,7 +10,7 @@ export default {
         <p>通过在 <code>grid</code> 标签上配置 <code>edit-config</code>。在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染内置编辑组件， <code>events</code> 配置组件事件。</p>
         <div class="tip custom-block">
           <p class="custom-block-title">特别说明：</p>
-          <p>内置编辑器只支持 <code>Input</code> 和 <code>Select</code> 组件，需要使用其他组件可参考自定义编辑器。</p>
+          <p>内置编辑器只支持 <code>Input</code> 和 <code>Select</code> 组件且均为浏览器原生组件并非TinyVue组件，需要使用其他组件可参考自定义编辑器。</p>
         </div>
         `,
         'en-US':
@@ -44,7 +44,7 @@ export default {
     {
       'demoId': 'editor-popeditor-in-grid-remote-search',
       'name': {
-        'zh-CN': 'Popeditor 弹窗编辑',
+        'zh-CN': '弹窗编辑',
         'en-US': 'Edit the Popeditor pop-up window and configure remote search.'
       },
       'desc': {
diff --git a/packages/theme/src/grid/table.less b/packages/theme/src/grid/table.less
index db22f0187..d56020240 100644
--- a/packages/theme/src/grid/table.less
+++ b/packages/theme/src/grid/table.less
@@ -905,7 +905,8 @@
     }
 
     .@{grid-prefix-cls}-body__column {
-      &.col__actived {
+      &.col__actived,
+      &.edit_visible {
         padding: 0 var(--tv-Grid-cell-padding-x);
       }
 

From 8eb46c511d4f61d3ba515139385dc4bea81893e7 Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Thu, 7 Nov 2024 18:39:26 +0800
Subject: [PATCH 57/65] docs(form): [form] optimize form demos

---
 .../app/form/basic-usage-composition-api.vue  | 10 ++--
 .../demos/pc/app/form/basic-usage.spec.ts     |  4 --
 .../sites/demos/pc/app/form/basic-usage.vue   |  8 +--
 ...custom-validation-rule-composition-api.vue |  2 +-
 .../pc/app/form/custom-validation-rule.vue    |  2 +-
 .../app/form/display-only-composition-api.vue | 39 ++++++------
 .../demos/pc/app/form/display-only.spec.ts    |  8 +--
 .../sites/demos/pc/app/form/display-only.vue  | 39 ++++++------
 .../form/form-disabled-composition-api.vue    | 59 ++++++++----------
 .../demos/pc/app/form/form-disabled.spec.js   | 60 +++++++++----------
 .../sites/demos/pc/app/form/form-disabled.vue | 60 ++++++++-----------
 .../form-validate-field-composition-api.vue   |  4 +-
 .../demos/pc/app/form/form-validate-field.vue |  4 +-
 .../form/form-validation-composition-api.vue  | 16 ++---
 .../demos/pc/app/form/form-validation.spec.ts |  6 +-
 .../demos/pc/app/form/form-validation.vue     | 17 +++---
 .../pc/app/form/size-composition-api.vue      |  8 +--
 examples/sites/demos/pc/app/form/size.vue     |  8 +--
 .../validate-debounce-composition-api.vue     |  2 +-
 .../demos/pc/app/form/validate-debounce.vue   |  2 +-
 packages/theme/src/form-item/index.less       |  4 ++
 21 files changed, 173 insertions(+), 189 deletions(-)

diff --git a/examples/sites/demos/pc/app/form/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/form/basic-usage-composition-api.vue
index a6152faac..9d32c944d 100644
--- a/examples/sites/demos/pc/app/form/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/basic-usage-composition-api.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="demo-form">
     <tiny-form label-width="100px">
-      <tiny-form-item label="数字">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="单选">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="数字">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="日期">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -16,7 +16,7 @@
       </tiny-form-item>
       <tiny-form-item label="提示">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="文本">
@@ -30,7 +30,7 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
+import { reactive } from 'vue'
 import {
   TinyForm,
   TinyFormItem,
diff --git a/examples/sites/demos/pc/app/form/basic-usage.spec.ts b/examples/sites/demos/pc/app/form/basic-usage.spec.ts
index bbd3f5495..d20442301 100644
--- a/examples/sites/demos/pc/app/form/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/form/basic-usage.spec.ts
@@ -30,10 +30,6 @@ test('测试基本表单', async ({ page }) => {
   await page.getByRole('listitem').filter({ hasText: '00:30' }).click()
   await expect(timePicker).toHaveValue('00:30')
 
-  // 其他输入
-  await demo.getByPlaceholder('click').first().hover()
-  await expect(page.getByRole('tooltip', { name: 'TinyUI Form Demo' })).toBeVisible()
-
   // 提交按钮
   const dialog = page.locator('.tiny-modal.active')
   await demo.getByRole('button', { name: '提交' }).click()
diff --git a/examples/sites/demos/pc/app/form/basic-usage.vue b/examples/sites/demos/pc/app/form/basic-usage.vue
index 81412ce77..bd125ef99 100644
--- a/examples/sites/demos/pc/app/form/basic-usage.vue
+++ b/examples/sites/demos/pc/app/form/basic-usage.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="demo-form">
     <tiny-form label-width="100px">
-      <tiny-form-item label="数字">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="单选">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="数字">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="日期">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -16,7 +16,7 @@
       </tiny-form-item>
       <tiny-form-item label="提示">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="文本">
diff --git a/examples/sites/demos/pc/app/form/custom-validation-rule-composition-api.vue b/examples/sites/demos/pc/app/form/custom-validation-rule-composition-api.vue
index 5c20174f1..c60a28d88 100644
--- a/examples/sites/demos/pc/app/form/custom-validation-rule-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/custom-validation-rule-composition-api.vue
@@ -9,7 +9,7 @@
       </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="handleSubmit()"> 注册 </tiny-button>
-        <tiny-button type="primary" @click="changeRule"> 改变校验规则 </tiny-button>
+        <tiny-button @click="changeRule"> 改变校验规则 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
diff --git a/examples/sites/demos/pc/app/form/custom-validation-rule.vue b/examples/sites/demos/pc/app/form/custom-validation-rule.vue
index db3a8906c..eedeb0a91 100644
--- a/examples/sites/demos/pc/app/form/custom-validation-rule.vue
+++ b/examples/sites/demos/pc/app/form/custom-validation-rule.vue
@@ -9,7 +9,7 @@
       </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="handleSubmit()"> 注册 </tiny-button>
-        <tiny-button type="primary" @click="changeRule"> 改变校验规则 </tiny-button>
+        <tiny-button @click="changeRule"> 改变校验规则 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
diff --git a/examples/sites/demos/pc/app/form/display-only-composition-api.vue b/examples/sites/demos/pc/app/form/display-only-composition-api.vue
index 164569826..45ef7be58 100644
--- a/examples/sites/demos/pc/app/form/display-only-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/display-only-composition-api.vue
@@ -2,13 +2,22 @@
   <div class="demo-form">
     <div class="title">表单是否仅展示：<tiny-switch v-model="displayOnly"></tiny-switch></div>
     <tiny-form :inline="inline" label-position="top" :display-only="displayOnly">
-      <tiny-form-item label="超长文字">
-        <tiny-input v-model="formData.input"></tiny-input>
+      <tiny-form-item label="开关">
+        <tiny-switch></tiny-switch>
       </tiny-form-item>
       <tiny-form-item label="radio">
         <tiny-radio v-model="formData.radioValue" label="1">男</tiny-radio>
         <tiny-radio v-model="formData.radioValue" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="复选框">
+        <tiny-checkbox v-model="formData.checked">复选框</tiny-checkbox>
+      </tiny-form-item>
+      <tiny-form-item label="复选框组">
+        <tiny-checkbox-group v-model="formData.checkedArr">
+          <tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
+          <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
+        </tiny-checkbox-group>
+      </tiny-form-item>
       <tiny-form-item label="select">
         <tiny-select v-model="formData.select">
           <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
@@ -19,27 +28,12 @@
           <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
         </tiny-select>
       </tiny-form-item>
-      <tiny-form-item label="文本域">
-        <tiny-input v-model="formData.textareaValue" type="textarea"></tiny-input>
-      </tiny-form-item>
       <tiny-form-item label="我的密码">
         <tiny-input v-model="formData.passwordValue" type="password"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="数字">
         <tiny-numeric v-model="formData.quantity" unit="个"></tiny-numeric>
       </tiny-form-item>
-      <tiny-form-item label="复选框">
-        <tiny-checkbox v-model="formData.checked">复选框</tiny-checkbox>
-      </tiny-form-item>
-      <tiny-form-item label="复选框组">
-        <tiny-checkbox-group v-model="formData.checkedArr">
-          <tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
-          <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
-        </tiny-checkbox-group>
-      </tiny-form-item>
-      <tiny-form-item label="开关">
-        <tiny-switch></tiny-switch>
-      </tiny-form-item>
       <tiny-form-item label="自动完成">
         <tiny-autocomplete
           v-model="formData.autocompleteValue"
@@ -50,6 +44,12 @@
       <tiny-form-item label="datePicker">
         <tiny-date-picker v-model="formData.datePicker"></tiny-date-picker>
       </tiny-form-item>
+      <tiny-form-item label="超长文字">
+        <tiny-input v-model="formData.input"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="文本域">
+        <tiny-input v-model="formData.textareaValue" type="textarea"></tiny-input>
+      </tiny-form-item>
     </tiny-form>
   </div>
 </template>
@@ -146,7 +146,7 @@ const pickerOptions = ref({
 })
 const formData = ref({
   input:
-    '111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
+    'TinyVue 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践，欢迎尝试使用 TinyVue。',
   radioValue: '1',
   select: '选项1',
   select1: ['选项1', '选项2'],
@@ -164,7 +164,7 @@ const formData = ref({
   monthrange: ['2022-01', '2023-01'],
   quantity: 1,
   textareaValue:
-    '大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦',
+    'OpenTiny 是一套企业级组件库解决方案，适配 PC 端 / 移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。',
   checked: true,
   checkedArr: ['复选框1'],
   rate1: 2,
@@ -202,7 +202,6 @@ function createFilter(queryString) {
 }
 .title {
   margin-bottom: 30px;
-  margin-left: 16px;
   font-size: 14px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/form/display-only.spec.ts b/examples/sites/demos/pc/app/form/display-only.spec.ts
index 3ed16b484..6f84fcf72 100644
--- a/examples/sites/demos/pc/app/form/display-only.spec.ts
+++ b/examples/sites/demos/pc/app/form/display-only.spec.ts
@@ -9,13 +9,13 @@ test('表单仅展示', async ({ page }) => {
   const getItem = (index: number) => demo.locator('.tiny-form-item__content').nth(index)
 
   await switchBtn.click()
-  await expect(demo.locator('.tiny-form-item').first().locator('input')).toBeVisible()
+  await expect(getItem(10).locator('input')).toBeVisible()
 
   await switchBtn.click()
   await expect(demo.locator('.tiny-form-item').first().locator('input')).not.toBeVisible()
   await expect(getItem(1).locator('.tiny-radio__inner')).not.toBeVisible()
   await expect(getItem(1)).toHaveText('男')
-  await expect(getItem(2).locator('input')).not.toBeVisible()
-  await expect(getItem(2).locator('.tiny-input-display-only__content')).toHaveText('黄金糕')
-  await expect(getItem(3).locator('.tiny-input-display-only__content')).toHaveText('黄金糕; 双皮奶')
+  await expect(getItem(4).locator('input')).not.toBeVisible()
+  await expect(getItem(4).locator('.tiny-input-display-only__content')).toHaveText('黄金糕')
+  await expect(getItem(5).locator('.tiny-input-display-only__content')).toHaveText('黄金糕; 双皮奶')
 })
diff --git a/examples/sites/demos/pc/app/form/display-only.vue b/examples/sites/demos/pc/app/form/display-only.vue
index c97f87824..c4a83f922 100644
--- a/examples/sites/demos/pc/app/form/display-only.vue
+++ b/examples/sites/demos/pc/app/form/display-only.vue
@@ -2,13 +2,22 @@
   <div class="demo-form">
     <div class="title">表单是否仅展示：<tiny-switch v-model="displayOnly"></tiny-switch></div>
     <tiny-form :inline="inline" label-position="top" :display-only="displayOnly">
-      <tiny-form-item label="超长文字">
-        <tiny-input v-model="formData.input"></tiny-input>
+      <tiny-form-item label="开关">
+        <tiny-switch></tiny-switch>
       </tiny-form-item>
       <tiny-form-item label="radio">
         <tiny-radio v-model="formData.radioValue" label="1">男</tiny-radio>
         <tiny-radio v-model="formData.radioValue" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="复选框">
+        <tiny-checkbox v-model="formData.checked">复选框</tiny-checkbox>
+      </tiny-form-item>
+      <tiny-form-item label="复选框组">
+        <tiny-checkbox-group v-model="formData.checkedArr">
+          <tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
+          <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
+        </tiny-checkbox-group>
+      </tiny-form-item>
       <tiny-form-item label="select">
         <tiny-select v-model="formData.select">
           <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
@@ -19,27 +28,12 @@
           <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
         </tiny-select>
       </tiny-form-item>
-      <tiny-form-item label="文本域">
-        <tiny-input v-model="formData.textareaValue" type="textarea"></tiny-input>
-      </tiny-form-item>
       <tiny-form-item label="我的密码">
         <tiny-input v-model="formData.passwordValue" type="password"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="数字">
         <tiny-numeric v-model="formData.quantity" unit="个"></tiny-numeric>
       </tiny-form-item>
-      <tiny-form-item label="复选框">
-        <tiny-checkbox v-model="formData.checked">复选框</tiny-checkbox>
-      </tiny-form-item>
-      <tiny-form-item label="复选框组">
-        <tiny-checkbox-group v-model="formData.checkedArr">
-          <tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
-          <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
-        </tiny-checkbox-group>
-      </tiny-form-item>
-      <tiny-form-item label="开关">
-        <tiny-switch></tiny-switch>
-      </tiny-form-item>
       <tiny-form-item label="自动完成">
         <tiny-autocomplete
           v-model="formData.autocompleteValue"
@@ -50,6 +44,12 @@
       <tiny-form-item label="datePicker">
         <tiny-date-picker v-model="formData.datePicker"></tiny-date-picker>
       </tiny-form-item>
+      <tiny-form-item label="超长文字">
+        <tiny-input v-model="formData.input"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="文本域">
+        <tiny-input v-model="formData.textareaValue" type="textarea"></tiny-input>
+      </tiny-form-item>
     </tiny-form>
   </div>
 </template>
@@ -162,7 +162,7 @@ export default {
       },
       formData: {
         input:
-          '111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
+          'TinyVue 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践，欢迎尝试使用 TinyVue。',
         radioValue: '1',
         select: '选项1',
         select1: ['选项1', '选项2'],
@@ -180,7 +180,7 @@ export default {
         monthrange: ['2022-01', '2023-01'],
         quantity: 1,
         textareaValue:
-          '大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦',
+          'OpenTiny 是一套企业级组件库解决方案，适配 PC 端 / 移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。',
         checked: true,
         checkedArr: ['复选框1'],
         rate1: 2,
@@ -219,7 +219,6 @@ export default {
 }
 .title {
   margin-bottom: 30px;
-  margin-left: 16px;
   font-size: 14px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/form/form-disabled-composition-api.vue b/examples/sites/demos/pc/app/form/form-disabled-composition-api.vue
index 514a4b2bd..318e3bcb9 100644
--- a/examples/sites/demos/pc/app/form/form-disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/form-disabled-composition-api.vue
@@ -2,21 +2,12 @@
   <div class="demo-form">
     <h3 class="title">是否禁用表单：<tiny-switch v-model="formDisabled"></tiny-switch></h3>
     <tiny-form :disabled="formDisabled" label-width="150px">
-      <tiny-form-item label="Input">
-        <tiny-input v-model="createData.user"></tiny-input>
-      </tiny-form-item>
-      <tiny-form-item label="Select">
-        <tiny-select v-model="createData.select" placeholder="请选择">
-          <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
-          </tiny-option>
-        </tiny-select>
-      </tiny-form-item>
-      <tiny-form-item label="Numeric">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="Switch">
         <tiny-switch v-model="createData.sw"></tiny-switch>
       </tiny-form-item>
+      <tiny-form-item label="Link">
+        <tiny-link>默认链接</tiny-link>
+      </tiny-form-item>
       <tiny-form-item label="Radio">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
@@ -31,6 +22,24 @@
           <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
         </tiny-checkbox-group>
       </tiny-form-item>
+      <tiny-form-item label="IpAddress">
+        <tiny-ip-address v-model="createData.ipAddress"></tiny-ip-address>
+      </tiny-form-item>
+      <tiny-form-item label="ButtonGroup">
+        <tiny-button-group :data="groupData"></tiny-button-group>
+      </tiny-form-item>
+      <tiny-form-item label="Input">
+        <tiny-input v-model="createData.user"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="Select">
+        <tiny-select v-model="createData.select" placeholder="">
+          <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
+          </tiny-option>
+        </tiny-select>
+      </tiny-form-item>
+      <tiny-form-item label="Numeric">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="Datepicker">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -38,7 +47,6 @@
         <tiny-time-picker
           v-model="createData.timePicker"
           :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
-          placeholder="任意时间点"
         ></tiny-time-picker>
       </tiny-form-item>
       <tiny-form-item label="Droptime">
@@ -46,35 +54,21 @@
       </tiny-form-item>
       <tiny-form-item label="Tooltip">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="Textarea">
         <tiny-input v-model="createData.textarea" type="textarea" maxlength="15"> </tiny-input>
       </tiny-form-item>
       <tiny-form-item label="Autocomplete">
-        <tiny-autocomplete
-          v-model="createData.autocomplete"
-          placeholder="请输入内容"
-          :fetch-suggestions="querySearch"
-        ></tiny-autocomplete>
-      </tiny-form-item>
-      <tiny-form-item label="ButtonGroup">
-        <tiny-button-group :data="groupData"></tiny-button-group>
+        <tiny-autocomplete v-model="createData.autocomplete" :fetch-suggestions="querySearch"></tiny-autocomplete>
       </tiny-form-item>
       <tiny-form-item label="Cascader">
-        <tiny-cascader :options="options" :props="{ emitPath: false }"></tiny-cascader>
-      </tiny-form-item>
-      <tiny-form-item label="IpAddress">
-        <tiny-ip-address v-model="createData.ipAddress"></tiny-ip-address>
-      </tiny-form-item>
-      <tiny-form-item label="Link">
-        <tiny-link>默认链接</tiny-link>
+        <tiny-cascader :options="options" :props="{ emitPath: false }" placeholder=" "></tiny-cascader>
       </tiny-form-item>
       <tiny-form-item label="PopEditor">
         <tiny-popeditor
           v-model="createData.popEditor"
-          placeholder="请选择"
           :grid-op="gridOp"
           text-field="name"
           value-field="id"
@@ -100,7 +94,6 @@ import {
   TinyDropTimes,
   TinyTooltip,
   TinyInput,
-  TinyButton,
   TinyAutocomplete,
   TinyButtonGroup,
   TinyCascader,
@@ -172,7 +165,7 @@ const gridOp = ref({
     {
       field: 'id',
       title: 'ID',
-      width: 40
+      width: 60
     },
     {
       field: 'name',
@@ -268,7 +261,7 @@ function createFilter(queryString) {
 
 .title {
   margin-bottom: 30px;
-  margin-left: 100px;
+  margin-left: 80px;
   font-size: 14px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/form/form-disabled.spec.js b/examples/sites/demos/pc/app/form/form-disabled.spec.js
index eb056d83c..55491ce7d 100644
--- a/examples/sites/demos/pc/app/form/form-disabled.spec.js
+++ b/examples/sites/demos/pc/app/form/form-disabled.spec.js
@@ -18,22 +18,22 @@ test('测试表单禁用', async ({ page }) => {
   })
 
   await switchBtn.click()
-  await expect(formItem.first().locator('input')).toBeDisabled()
-  await expect(formItem.nth(1).locator('input')).toBeDisabled()
-  await expect(formItem.nth(2).locator('.tiny-numeric__input')).toHaveClass(/is-disabled/)
-  await expect(formItem.nth(3).locator('.tiny-switch')).toHaveClass(/tiny-switch-disabled/)
-  await expect(formItem.nth(4).locator('input').first()).toBeDisabled()
-  await expect(formItem.nth(5).locator('input').nth(1)).toBeDisabled()
-  await expect(formItem.nth(6).locator('input').first()).toBeDisabled()
-  await expect(formItem.nth(7).locator('input').first()).toBeDisabled()
-  await expect(formItem.nth(8).locator('input').first()).toBeDisabled()
-  await expect(formItem.nth(9).locator('input')).toBeDisabled()
-  await expect(formItem.nth(10).locator('input')).toBeDisabled()
-  await expect(formItem.nth(11).locator('textarea')).toBeDisabled()
+  await expect(formItem.nth(0).locator('.tiny-switch')).toHaveClass(/tiny-switch-disabled/)
+  await expect(formItem.nth(2).locator('input').first()).toBeDisabled()
+  await expect(formItem.nth(3).locator('input').nth(1)).toBeDisabled()
+  await expect(formItem.nth(3).locator('input').first()).toBeDisabled()
+  await expect(formItem.nth(6).locator('button').first()).toHaveClass(/disabled/)
+  await expect(formItem.nth(7).locator('input')).toBeDisabled()
+  await expect(formItem.nth(8).locator('input')).toBeDisabled()
+  await expect(formItem.nth(9).locator('.tiny-numeric__input')).toHaveClass(/is-disabled/)
+  await expect(formItem.nth(10).locator('input').first()).toBeDisabled()
+  await expect(formItem.nth(11).locator('input').first()).toBeDisabled()
   await expect(formItem.nth(12).locator('input')).toBeDisabled()
-  await expect(formItem.nth(13).locator('button').first()).toHaveClass(/disabled/)
-  await expect(formItem.nth(14).locator('input')).toBeDisabled()
-  await expect(formItem.nth(15).locator('input').first()).toBeDisabled()
+  await expect(formItem.nth(13).locator('input')).toBeDisabled()
+  await expect(formItem.nth(14).locator('textarea')).toBeDisabled()
+  await expect(formItem.nth(15).locator('input')).toBeDisabled()
+  await expect(formItem.nth(15).locator('input')).toBeDisabled()
+  await expect(formItem.nth(16).locator('input').first()).toBeDisabled()
   await expect(formItem.nth(17).locator('input').first()).toBeDisabled()
   // 尝试拖到滑块,应是无法拖动状态
   const { x, y, height } = await slider.boundingBox()
@@ -45,22 +45,22 @@ test('测试表单禁用', async ({ page }) => {
   expect(newX).toEqual(x)
 
   await switchBtn.click()
-  await expect(formItem.first().locator('input')).not.toBeDisabled()
-  await expect(formItem.nth(1).locator('input')).not.toBeDisabled()
-  await expect(formItem.nth(2).locator('.tiny-numeric__input')).not.toHaveClass(/is-disabled/)
-  await expect(formItem.nth(3).locator('.tiny-switch')).not.toHaveClass(/tiny-switch-disabled/)
-  await expect(formItem.nth(4).locator('input').first()).not.toBeDisabled()
-  await expect(formItem.nth(5).locator('input').nth(1)).not.toBeDisabled()
-  await expect(formItem.nth(6).locator('input').first()).not.toBeDisabled()
-  await expect(formItem.nth(7).locator('input').first()).not.toBeDisabled()
-  await expect(formItem.nth(8).locator('input').first()).not.toBeDisabled()
-  await expect(formItem.nth(9).locator('input')).not.toBeDisabled()
-  await expect(formItem.nth(10).locator('input')).not.toBeDisabled()
-  await expect(formItem.nth(11).locator('textarea')).not.toBeDisabled()
+  await expect(formItem.nth(0).locator('.tiny-switch')).not.toHaveClass(/tiny-switch-disabled/)
+  await expect(formItem.nth(2).locator('input').first()).not.toBeDisabled()
+  await expect(formItem.nth(3).locator('input').nth(1)).not.toBeDisabled()
+  await expect(formItem.nth(3).locator('input').first()).not.toBeDisabled()
+  await expect(formItem.nth(6).locator('button').first()).not.toHaveClass(/disabled/)
+  await expect(formItem.nth(7).locator('input')).not.toBeDisabled()
+  await expect(formItem.nth(8).locator('input')).not.toBeDisabled()
+  await expect(formItem.nth(9).locator('.tiny-numeric__input')).not.toHaveClass(/is-disabled/)
+  await expect(formItem.nth(10).locator('input').first()).not.toBeDisabled()
+  await expect(formItem.nth(11).locator('input').first()).not.toBeDisabled()
   await expect(formItem.nth(12).locator('input')).not.toBeDisabled()
-  await expect(formItem.nth(13).locator('button').first()).not.toHaveClass(/disabled/)
-  await expect(formItem.nth(14).locator('input')).not.toBeDisabled()
-  await expect(formItem.nth(15).locator('input').first()).not.toBeDisabled()
+  await expect(formItem.nth(13).locator('input')).not.toBeDisabled()
+  await expect(formItem.nth(14).locator('textarea')).not.toBeDisabled()
+  await expect(formItem.nth(15).locator('input')).not.toBeDisabled()
+  await expect(formItem.nth(15).locator('input')).not.toBeDisabled()
+  await expect(formItem.nth(16).locator('input').first()).not.toBeDisabled()
   await expect(formItem.nth(17).locator('input').first()).not.toBeDisabled()
   // 尝试拖到滑块,应是可以拖动状态
   const sliderBox = await slider.boundingBox()
diff --git a/examples/sites/demos/pc/app/form/form-disabled.vue b/examples/sites/demos/pc/app/form/form-disabled.vue
index 9fe11f583..7b54483f5 100644
--- a/examples/sites/demos/pc/app/form/form-disabled.vue
+++ b/examples/sites/demos/pc/app/form/form-disabled.vue
@@ -2,21 +2,12 @@
   <div class="demo-form">
     <h3 class="title">是否禁用表单：<tiny-switch v-model="formDisabled"></tiny-switch></h3>
     <tiny-form :disabled="formDisabled" label-width="150px">
-      <tiny-form-item label="Input">
-        <tiny-input v-model="createData.user"></tiny-input>
-      </tiny-form-item>
-      <tiny-form-item label="Select">
-        <tiny-select v-model="createData.select" placeholder="请选择">
-          <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
-          </tiny-option>
-        </tiny-select>
-      </tiny-form-item>
-      <tiny-form-item label="Numeric">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="Switch">
         <tiny-switch v-model="createData.sw"></tiny-switch>
       </tiny-form-item>
+      <tiny-form-item label="Link">
+        <tiny-link>默认链接</tiny-link>
+      </tiny-form-item>
       <tiny-form-item label="Radio">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
@@ -31,6 +22,24 @@
           <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
         </tiny-checkbox-group>
       </tiny-form-item>
+      <tiny-form-item label="IpAddress">
+        <tiny-ip-address v-model="createData.ipAddress"></tiny-ip-address>
+      </tiny-form-item>
+      <tiny-form-item label="ButtonGroup">
+        <tiny-button-group :data="groupData"></tiny-button-group>
+      </tiny-form-item>
+      <tiny-form-item label="Input">
+        <tiny-input v-model="createData.user"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="Select">
+        <tiny-select v-model="createData.select" placeholder="">
+          <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
+          </tiny-option>
+        </tiny-select>
+      </tiny-form-item>
+      <tiny-form-item label="Numeric">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="Datepicker">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -38,7 +47,6 @@
         <tiny-time-picker
           v-model="createData.timePicker"
           :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
-          placeholder="任意时间点"
         ></tiny-time-picker>
       </tiny-form-item>
       <tiny-form-item label="Droptime">
@@ -46,35 +54,21 @@
       </tiny-form-item>
       <tiny-form-item label="Tooltip">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="Textarea">
         <tiny-input v-model="createData.textarea" type="textarea" maxlength="15"> </tiny-input>
       </tiny-form-item>
       <tiny-form-item label="Autocomplete">
-        <tiny-autocomplete
-          v-model="createData.autocomplete"
-          placeholder="请输入内容"
-          :fetch-suggestions="querySearch"
-        ></tiny-autocomplete>
-      </tiny-form-item>
-      <tiny-form-item label="ButtonGroup">
-        <tiny-button-group :data="groupData"></tiny-button-group>
+        <tiny-autocomplete v-model="createData.autocomplete" :fetch-suggestions="querySearch"></tiny-autocomplete>
       </tiny-form-item>
       <tiny-form-item label="Cascader">
-        <tiny-cascader :options="options" :props="{ emitPath: false }"></tiny-cascader>
-      </tiny-form-item>
-      <tiny-form-item label="IpAddress">
-        <tiny-ip-address v-model="createData.ipAddress"></tiny-ip-address>
-      </tiny-form-item>
-      <tiny-form-item label="Link">
-        <tiny-link>默认链接</tiny-link>
+        <tiny-cascader :options="options" :props="{ emitPath: false }" placeholder=" "></tiny-cascader>
       </tiny-form-item>
       <tiny-form-item label="PopEditor">
         <tiny-popeditor
           v-model="createData.popEditor"
-          placeholder="请选择"
           :grid-op="gridOp"
           text-field="name"
           value-field="id"
@@ -99,7 +93,6 @@ import {
   TinyDropTimes,
   TinyTooltip,
   TinyInput,
-  TinyButton,
   TinyAutocomplete,
   TinyButtonGroup,
   TinyCascader,
@@ -125,7 +118,6 @@ export default {
     TinyDropTimes,
     TinyTooltip,
     TinyInput,
-    TinyButton,
     TinyAutocomplete,
     TinyButtonGroup,
     TinyCascader,
@@ -198,7 +190,7 @@ export default {
           {
             field: 'id',
             title: 'ID',
-            width: 40
+            width: 60
           },
           {
             field: 'name',
@@ -296,7 +288,7 @@ export default {
 }
 .title {
   margin-bottom: 30px;
-  margin-left: 100px;
+  margin-left: 80px;
   font-size: 14px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/form/form-validate-field-composition-api.vue b/examples/sites/demos/pc/app/form/form-validate-field-composition-api.vue
index 7120e385c..9b6741231 100644
--- a/examples/sites/demos/pc/app/form/form-validate-field-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/form-validate-field-composition-api.vue
@@ -12,8 +12,8 @@
       </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="validateField"> 校验 </tiny-button>
-        <tiny-button type="primary" @click="clearValidate"> 移除校验 </tiny-button>
-        <tiny-button type="primary" @click="resetField"> 重置日期 </tiny-button>
+        <tiny-button @click="clearValidate"> 移除校验 </tiny-button>
+        <tiny-button @click="resetField"> 重置日期 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
diff --git a/examples/sites/demos/pc/app/form/form-validate-field.vue b/examples/sites/demos/pc/app/form/form-validate-field.vue
index 375129fa4..8a4cc78d4 100644
--- a/examples/sites/demos/pc/app/form/form-validate-field.vue
+++ b/examples/sites/demos/pc/app/form/form-validate-field.vue
@@ -12,8 +12,8 @@
       </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="validateField"> 校验 </tiny-button>
-        <tiny-button type="primary" @click="clearValidate"> 移除校验 </tiny-button>
-        <tiny-button type="primary" @click="resetField"> 重置日期 </tiny-button>
+        <tiny-button @click="clearValidate"> 移除校验 </tiny-button>
+        <tiny-button @click="resetField"> 重置日期 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
diff --git a/examples/sites/demos/pc/app/form/form-validation-composition-api.vue b/examples/sites/demos/pc/app/form/form-validation-composition-api.vue
index 5b8751233..3a4ce463e 100644
--- a/examples/sites/demos/pc/app/form/form-validation-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/form-validation-composition-api.vue
@@ -4,6 +4,12 @@
       <div>validate用法：<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
     </div>
     <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
+      <tiny-form-item label="等级" prop="radio">
+        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
+      </tiny-form-item>
+      <tiny-form-item label="IP字段" prop="ip">
+        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
+      </tiny-form-item>
       <tiny-form-item label="必填" prop="users" :validate-icon="validateIcon">
         <tiny-input v-model="createData.users"></tiny-input>
       </tiny-form-item>
@@ -13,24 +19,18 @@
       <tiny-form-item label="URL" prop="url">
         <tiny-input v-model="createData.url"></tiny-input>
       </tiny-form-item>
-      <tiny-form-item label="等级" prop="radio">
-        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
-      </tiny-form-item>
       <tiny-form-item label="邮件" prop="email">
         <tiny-input v-model="createData.email"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="数字" prop="num1">
         <tiny-numeric v-model="createData.num1"></tiny-numeric>
       </tiny-form-item>
-      <tiny-form-item label="IP字段" prop="ip">
-        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
-      </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="validType === 'callback' ? handleSubmit() : handleSubmitPromise()">
           提交
         </tiny-button>
-        <tiny-button type="primary" @click="clearFormValid"> 移除校验 </tiny-button>
-        <tiny-button type="primary" @click="resetForm"> 重置表单 </tiny-button>
+        <tiny-button @click="clearFormValid"> 移除校验 </tiny-button>
+        <tiny-button @click="resetForm"> 重置表单 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
diff --git a/examples/sites/demos/pc/app/form/form-validation.spec.ts b/examples/sites/demos/pc/app/form/form-validation.spec.ts
index 6b8a47db0..7ef637033 100644
--- a/examples/sites/demos/pc/app/form/form-validation.spec.ts
+++ b/examples/sites/demos/pc/app/form/form-validation.spec.ts
@@ -27,7 +27,7 @@ test('测试表单输入变化和失焦是否出现校验', async ({ page }) =>
   const requiredTip = page.getByRole('tooltip', { name: '必填' })
 
   // 对长度有要求的检验
-  const firstInput = formItem.first().locator('input')
+  const firstInput = formItem.nth(2).locator('input')
   await firstInput.click()
   await firstInput.blur()
   await expect(requiredTip.first()).toBeVisible()
@@ -48,7 +48,7 @@ test('测试表单输入变化和失焦是否出现校验', async ({ page }) =>
   await expect(page.getByRole('tooltip', { name: '不符合规则的日期格式' })).not.toBeVisible()
 
   // url输入框
-  const urlInput = formItem.nth(2).locator('input')
+  const urlInput = formItem.nth(4).locator('input')
   const validUrl = 'https://test.com'
   urlInput.fill('1111')
   await expect(page.getByRole('tooltip', { name: '非法 URL 地址' })).toBeVisible()
@@ -56,7 +56,7 @@ test('测试表单输入变化和失焦是否出现校验', async ({ page }) =>
   await expect(page.getByRole('tooltip', { name: '非法 URL 地址' })).not.toBeVisible()
 
   // email输入框
-  const emailInput = formItem.nth(4).locator('input')
+  const emailInput = formItem.nth(5).locator('input')
   const validEmail = '111@test.com'
   emailInput.fill('1111')
   await expect(page.getByRole('tooltip', { name: '非法邮件地址' })).toBeVisible()
diff --git a/examples/sites/demos/pc/app/form/form-validation.vue b/examples/sites/demos/pc/app/form/form-validation.vue
index 9c608045f..fb52830ff 100644
--- a/examples/sites/demos/pc/app/form/form-validation.vue
+++ b/examples/sites/demos/pc/app/form/form-validation.vue
@@ -4,6 +4,12 @@
       <div>validate用法：<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
     </div>
     <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
+      <tiny-form-item label="等级" prop="radio">
+        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
+      </tiny-form-item>
+      <tiny-form-item label="IP字段" prop="ip">
+        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
+      </tiny-form-item>
       <tiny-form-item label="必填" prop="users" :validate-icon="validateIcon">
         <tiny-input v-model="createData.users"></tiny-input>
       </tiny-form-item>
@@ -13,24 +19,19 @@
       <tiny-form-item label="URL" prop="url">
         <tiny-input v-model="createData.url"></tiny-input>
       </tiny-form-item>
-      <tiny-form-item label="等级" prop="radio">
-        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
-      </tiny-form-item>
+
       <tiny-form-item label="邮件" prop="email">
         <tiny-input v-model="createData.email"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="数字" prop="num1">
         <tiny-numeric v-model="createData.num1"></tiny-numeric>
       </tiny-form-item>
-      <tiny-form-item label="IP字段" prop="ip">
-        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
-      </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="validType === 'callback' ? handleSubmit() : handleSubmitPromise()">
           提交
         </tiny-button>
-        <tiny-button type="primary" @click="clearFormValid"> 移除校验 </tiny-button>
-        <tiny-button type="primary" @click="resetForm"> 重置表单 </tiny-button>
+        <tiny-button @click="clearFormValid"> 移除校验 </tiny-button>
+        <tiny-button @click="resetForm"> 重置表单 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
diff --git a/examples/sites/demos/pc/app/form/size-composition-api.vue b/examples/sites/demos/pc/app/form/size-composition-api.vue
index 1c8c4e7b0..c01ec8978 100644
--- a/examples/sites/demos/pc/app/form/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/size-composition-api.vue
@@ -2,13 +2,13 @@
   <div class="demo-form">
     <div class="mb-12">表单尺寸： <tiny-button-group :data="sizeList" v-model="sizeValue"></tiny-button-group></div>
     <tiny-form ref="createData" label-width="100px" :size="sizeValue" label-position="right">
-      <tiny-form-item label="数字">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="单选">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="数字">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="日期">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -17,7 +17,7 @@
       </tiny-form-item>
       <tiny-form-item label="提示">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="文本">
diff --git a/examples/sites/demos/pc/app/form/size.vue b/examples/sites/demos/pc/app/form/size.vue
index adc9691a9..26e24ee82 100644
--- a/examples/sites/demos/pc/app/form/size.vue
+++ b/examples/sites/demos/pc/app/form/size.vue
@@ -2,13 +2,13 @@
   <div class="demo-form">
     <div class="mb-12">表单尺寸： <tiny-button-group :data="sizeList" v-model="sizeValue"></tiny-button-group></div>
     <tiny-form ref="createData" label-width="100px" :size="sizeValue" label-position="right">
-      <tiny-form-item label="数字">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="单选">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="数字">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="日期">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -17,7 +17,7 @@
       </tiny-form-item>
       <tiny-form-item label="提示">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="文本">
diff --git a/examples/sites/demos/pc/app/form/validate-debounce-composition-api.vue b/examples/sites/demos/pc/app/form/validate-debounce-composition-api.vue
index 614ddd21c..b28bcd795 100644
--- a/examples/sites/demos/pc/app/form/validate-debounce-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/validate-debounce-composition-api.vue
@@ -8,8 +8,8 @@
         <tiny-input v-model="createData.user2"></tiny-input>
       </tiny-form-item>
       <tiny-form-item>
-        <tiny-button type="success" @click="clearFormValid">移除表单校验</tiny-button>
         <tiny-button type="primary" @click="handleSubmit">提交</tiny-button>
+        <tiny-button @click="clearFormValid">移除表单校验</tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
diff --git a/examples/sites/demos/pc/app/form/validate-debounce.vue b/examples/sites/demos/pc/app/form/validate-debounce.vue
index a65bdbc9c..dae8b8991 100644
--- a/examples/sites/demos/pc/app/form/validate-debounce.vue
+++ b/examples/sites/demos/pc/app/form/validate-debounce.vue
@@ -8,8 +8,8 @@
         <tiny-input v-model="createData.user2"></tiny-input>
       </tiny-form-item>
       <tiny-form-item>
-        <tiny-button type="success" @click="clearFormValid">移除表单校验</tiny-button>
         <tiny-button type="primary" @click="handleSubmit">提交</tiny-button>
+        <tiny-button @click="clearFormValid">移除表单校验</tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
diff --git a/packages/theme/src/form-item/index.less b/packages/theme/src/form-item/index.less
index 5b5c68b07..abeb734cd 100644
--- a/packages/theme/src/form-item/index.less
+++ b/packages/theme/src/form-item/index.less
@@ -21,6 +21,8 @@
 @textarea-prefix-cls: ~'@{css-prefix}textarea';
 @button-prefix-cls: ~'@{css-prefix}button';
 @numeric-prefix-cls: ~'@{css-prefix}numeric';
+@cascader-prefix-cls: ~'@{css-prefix}cascader';
+@autocomplete-prefix-cls: ~'@{css-prefix}autocomplete';
 @date-editor-prefix-cls: ~'@{css-prefix}date-editor';
 @tooltip-prefix-cls: ~'@{css-prefix}tooltip';
 @switch-prefix-cls: ~'@{css-prefix}switch';
@@ -184,6 +186,8 @@
     }
 
     .@{numeric-prefix-cls},
+    .@{cascader-prefix-cls},
+    .@{autocomplete-prefix-cls},
     .@{date-editor-prefix-cls}--daterange.@{input-prefix-cls},
     .@{date-editor-prefix-cls}--daterange.@{input-prefix-cls}__inner,
     .@{date-editor-prefix-cls}--timerange.@{input-prefix-cls},

From 230d9be125eb27760575bfe8ef02d5d5473bea34 Mon Sep 17 00:00:00 2001
From: shenjunjian <40288193@qq.com>
Date: Thu, 7 Nov 2024 22:47:28 -0800
Subject: [PATCH 58/65] fix(site): fix Popper layers separate when scrolling
 through document

---
 .../sites/src/views/components/components.vue | 28 +++++++++----------
 examples/sites/src/views/layout/layout.vue    |  1 -
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index 1dc57a662..045ee59c6 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/src/views/components/components.vue
@@ -16,7 +16,7 @@
     </div>
     <span class="docs-header-spacer"></span>
   </header>
-  <div class="docs-content">
+  <div class="docs-content" id="doc-layout-scoller">
     <div class="ti-fi-1 ti-rel cmp-container">
       <div class="flex-horizontal docs-content-main">
         <div class="docs-tabs-wrap">
@@ -241,7 +241,7 @@
             :is-affix="anchorAffix"
             type="dot"
             mask-class="custom-active-anchor"
-            container-id="#doc-layout"
+            container-id="#doc-layout-scoller"
             @link-click="handleAnchorClick"
           >
           </tiny-anchor>
@@ -254,8 +254,8 @@
         {{ i18nByKey('doc-owner') }} : {{ currJson.owner }}
       </div>
     </div>
+    <div id="footer"></div>
   </div>
-  <div id="footer"></div>
 </template>
 
 <script lang="jsx">
@@ -473,7 +473,7 @@ export default defineComponent({
     const scrollByHash = (hash) => {
       setTimeout(() => {
         if (!hash) {
-          document.getElementById('doc-layout').scrollTo({
+          document.getElementById('doc-layout-scoller').scrollTo({
             top: 0,
             left: 0
           })
@@ -486,7 +486,7 @@ export default defineComponent({
             scrollTarget = document.querySelector(`#${hash}`)
           } catch (err) {}
           if (scrollTarget && !isRunningTest) {
-            document.getElementById('doc-layout').scrollTo({
+            document.getElementById('doc-layout-scoller').scrollTo({
               top: scrollTarget.offsetTop,
               left: 0,
               behavior: 'smooth'
@@ -501,7 +501,7 @@ export default defineComponent({
       let hash = router.currentRoute.value.hash?.slice(1)
       if (hash !== 'API') {
         setTimeout(() => {
-          document.getElementById('doc-layout').scrollTo({
+          document.getElementById('doc-layout-scoller').scrollTo({
             top: 0,
             left: 0,
             behavior: 'smooth'
@@ -622,18 +622,18 @@ export default defineComponent({
     }
 
     const onDocLayoutScroll = debounce(100, false, () => {
-      const docLayout = document.getElementById('doc-layout')
+      const docLayout = document.getElementById('doc-layout-scoller')
       const { scrollTop, scrollHeight, clientHeight: layoutHeight } = docLayout
       const headerHeight = document.querySelector('.docs-header')?.clientHeight || 0
       const footerHeight = document.getElementById('footer')?.clientHeight || 0
       const anchorHeight = document.querySelector('#anchor')?.clientHeight || 0
-      const remainHeight = scrollHeight - scrollTop - layoutHeight // doc-layout视口下隐藏的部分高度
+      const remainHeight = scrollHeight - scrollTop - layoutHeight // doc-layout-scoller视口下隐藏的部分高度
       state.anchorAffix = layoutHeight - headerHeight - (footerHeight - remainHeight) > anchorHeight
     })
 
     const setScrollListener = () => {
       nextTick(() => {
-        const docLayout = document.getElementById('doc-layout')
+        const docLayout = document.getElementById('doc-layout-scoller')
         if (docLayout) {
           docLayout.addEventListener('scroll', onDocLayoutScroll)
         }
@@ -641,7 +641,7 @@ export default defineComponent({
     }
 
     const removeScrollListener = () => {
-      const docLayout = document.getElementById('doc-layout')
+      const docLayout = document.getElementById('doc-layout-scoller')
       if (docLayout) {
         docLayout.removeEventListener('scroll', onDocLayoutScroll)
       }
@@ -809,7 +809,9 @@ export default defineComponent({
 }
 
 .docs-content {
-  margin: 16px 0 120px;
+  flex: 1;
+  overflow: hidden auto;
+  padding: 16px 0 0;
   transition: all ease-in-out 0.3s;
 
   .docs-tabs-wrap {
@@ -972,10 +974,6 @@ export default defineComponent({
   column-gap: 16px;
 }
 
-.docs-content-main {
-  overflow: auto;
-}
-
 .cmp-container {
   p {
     font-size: 16px;
diff --git a/examples/sites/src/views/layout/layout.vue b/examples/sites/src/views/layout/layout.vue
index d914eb795..b0de47262 100644
--- a/examples/sites/src/views/layout/layout.vue
+++ b/examples/sites/src/views/layout/layout.vue
@@ -340,7 +340,6 @@ export default defineComponent({
 #doc-layout {
   width: 100%;
   height: calc(100vh - 60px);
-  overflow: hidden auto;
   flex-grow: 1;
   display: flex;
   flex-direction: column;

From 1a8cd6fa78e43a28b5876c97dd7c9d02e7b7b09c Mon Sep 17 00:00:00 2001
From: shenjunjian <40288193@qq.com>
Date: Thu, 7 Nov 2024 23:41:12 -0800
Subject: [PATCH 59/65] fix(popper): fix tiny-popper's style

---
 packages/theme/src/base/reset.less | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/theme/src/base/reset.less b/packages/theme/src/base/reset.less
index dd5e9f6f7..eb237cdff 100644
--- a/packages/theme/src/base/reset.less
+++ b/packages/theme/src/base/reset.less
@@ -177,24 +177,29 @@
   }
 }
 
+// 没有箭头的场景， select/ userlink /roles/ dept 等默认距离4 px
 .tiny-popper {
   &[x-placement^='top'] {
     margin-bottom: 4px;
   }
+
   &[x-placement^='bottom'] {
     margin-top: 4px;
   }
+
   &[x-placement^='right'] {
     margin-left: 4px;
   }
+
   &[x-placement^='left'] {
     margin-right: 4px;
   }
 }
 
-
-.tiny-popconfirm-popover,
-.tiny-tooltip__popper {
+// 有箭头的场景，统一规范所有样式
+.tiny-popconfirm-popover:has(.popper__arrow),
+.tiny-popper:has(.popper__arrow),
+.tiny-tooltip__popper:has(.popper__arrow) {
   .popper__arrow {
     position: absolute;
     display: block;

From d948a7ea89b347e5b21bf80b4de50e8b7967f2d3 Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Fri, 8 Nov 2024 15:37:21 +0800
Subject: [PATCH 60/65] fix(input): [input] fix input container 1px higher than
 input close #2490

---
 packages/theme/src/input/index.less | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/theme/src/input/index.less b/packages/theme/src/input/index.less
index 3731680f4..9d7fa560e 100644
--- a/packages/theme/src/input/index.less
+++ b/packages/theme/src/input/index.less
@@ -255,6 +255,7 @@
 
   &-small {
     .input-size(var(--tv-Input-small-height));
+    font-size: var(--tv-Input-small-font-size);
     .@{input-prefix-cls}__inner {
       font-size: var(--tv-Input-small-font-size);
     }
@@ -265,6 +266,7 @@
 
   &-mini {
     .input-size(var(--tv-Input-mini-height));
+    font-size: var(--tv-Input-small-font-size);
     .@{input-prefix-cls}__inner {
       font-size: var(--tv-Input-small-font-size);
     }

From 240dfc09df8720938ae368a0c2e96bf1a64856c6 Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Fri, 8 Nov 2024 14:29:29 +0800
Subject: [PATCH 61/65] fix(tree): [tree] fix parent node toggle when click
 child node margin close #2491

---
 packages/renderless/src/tree-node/index.ts | 6 ++++++
 packages/vue/src/tree/package.json         | 2 +-
 packages/vue/src/tree/src/tree-node.vue    | 1 +
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/renderless/src/tree-node/index.ts b/packages/renderless/src/tree-node/index.ts
index 085fe8c6f..a839e74fa 100644
--- a/packages/renderless/src/tree-node/index.ts
+++ b/packages/renderless/src/tree-node/index.ts
@@ -86,6 +86,12 @@ export const handleSelectChange =
 export const handleClick =
   ({ api, vm, props, state }) =>
   (e) => {
+    // tiny 新增： 点击子节点之间的空白时，不会收齐父节点
+    const contentElm = vm.$refs.content
+    if (contentElm && !contentElm.contains(e?.target)) {
+      return
+    }
+
     // tiny 新增： 去掉trigger参数，不影响点击的逻辑
     const store = state.tree.state.store
 
diff --git a/packages/vue/src/tree/package.json b/packages/vue/src/tree/package.json
index 42aa8c2c7..657c72576 100644
--- a/packages/vue/src/tree/package.json
+++ b/packages/vue/src/tree/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-tree",
   "type": "module",
-  "version": "3.19.1",
+  "version": "3.19.2",
   "description": "",
   "license": "MIT",
   "sideEffects": false,
diff --git a/packages/vue/src/tree/src/tree-node.vue b/packages/vue/src/tree/src/tree-node.vue
index 150a91dad..cc4da6bea 100644
--- a/packages/vue/src/tree/src/tree-node.vue
+++ b/packages/vue/src/tree/src/tree-node.vue
@@ -47,6 +47,7 @@
     >
       <!-- 当前节点的行： 缩进块+left(箭头图标+单多选钮+loading+prefix+label+suffix)+right(finish图标+operation+编辑按钮) -->
       <div
+        ref="content"
         :class="{
           'tiny-tree-node__content': true,
           'tiny-tree-node__content-number': showNumber

From b611d79dc960ef21b7cb414848793ac3e26fbd25 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Fri, 8 Nov 2024 18:08:57 +0800
Subject: [PATCH 62/65] feat: update renderless theme versions

---
 packages/renderless/package.json | 2 +-
 packages/theme/package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/renderless/package.json b/packages/renderless/package.json
index 007b8657e..d46607e67 100644
--- a/packages/renderless/package.json
+++ b/packages/renderless/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.19.3",
+  "version": "3.19.4",
   "private": true,
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
diff --git a/packages/theme/package.json b/packages/theme/package.json
index ba0608d6d..dde928c97 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-theme",
   "type": "module",
-  "version": "3.19.4",
+  "version": "3.19.5",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
   "license": "MIT",

From 4c65284f01e4bd81dba8509d396e16c0b08493a8 Mon Sep 17 00:00:00 2001
From: shenjunjian <40288193@qq.com>
Date: Sat, 9 Nov 2024 18:20:08 -0800
Subject: [PATCH 63/65] fix(site): fix scroll bugs

---
 examples/sites/src/views/components/components.vue | 11 ++++-------
 examples/sites/src/views/layout/layout.vue         |  7 ++++---
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index 045ee59c6..b2c458279 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/src/views/components/components.vue
@@ -17,7 +17,7 @@
     <span class="docs-header-spacer"></span>
   </header>
   <div class="docs-content" id="doc-layout-scoller">
-    <div class="ti-fi-1 ti-rel cmp-container">
+    <div class="ti-rel cmp-container">
       <div class="flex-horizontal docs-content-main">
         <div class="docs-tabs-wrap">
           <div v-if="['interfaces', 'types', 'classes'].includes(cmpId)" id="TS" class="all-api-container">
@@ -235,12 +235,10 @@
         <div class="cmp-page-anchor catalog" v-if="currAnchorLinks.length">
           <tiny-anchor
             id="anchor"
-            :offset-top="156"
             :links="currAnchorLinks"
             :key="anchorRefreshKey"
             :is-affix="anchorAffix"
             type="dot"
-            mask-class="custom-active-anchor"
             container-id="#doc-layout-scoller"
             @link-click="handleAnchorClick"
           >
@@ -486,8 +484,10 @@ export default defineComponent({
             scrollTarget = document.querySelector(`#${hash}`)
           } catch (err) {}
           if (scrollTarget && !isRunningTest) {
+            // doc-layout-scoller(滚动) > tabs > tab-content(relative)， 造成  scrollTarget.offsetTop 是相对于 tab-content的距离
+            // 所以滚动需要修正 tab-title的占位高度才行
             document.getElementById('doc-layout-scoller').scrollTo({
-              top: scrollTarget.offsetTop,
+              top: scrollTarget.offsetTop + 52,
               left: 0,
               behavior: 'smooth'
             })
@@ -767,9 +767,6 @@ export default defineComponent({
 
 <style lang="less" scoped>
 .docs-header {
-  position: sticky;
-  top: 0;
-  z-index: var(--docs-header-zindex);
   padding: 16px 40px;
   background-color: #fff;
   box-shadow: 12px 0 20px 6px rgba(0, 0, 0, 0.06);
diff --git a/examples/sites/src/views/layout/layout.vue b/examples/sites/src/views/layout/layout.vue
index b0de47262..0527dc064 100644
--- a/examples/sites/src/views/layout/layout.vue
+++ b/examples/sites/src/views/layout/layout.vue
@@ -338,11 +338,12 @@ export default defineComponent({
 }
 
 #doc-layout {
-  width: 100%;
-  height: calc(100vh - 60px);
-  flex-grow: 1;
   display: flex;
   flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden auto;
+  width: 100%;
+  height: calc(100vh - 60px);
 }
 
 .api-type-box {

From c1496eebea7870524d1c00d8da5f576e294ff0ce Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Mon, 11 Nov 2024 20:06:19 +0800
Subject: [PATCH 64/65] fix(site): fix site api table style (#2507)

---
 examples/sites/package.json                   |   2 +-
 .../sites/src/views/components/components.vue | 258 +++++++++---------
 2 files changed, 136 insertions(+), 124 deletions(-)

diff --git a/examples/sites/package.json b/examples/sites/package.json
index f366e2fbd..7efa87075 100644
--- a/examples/sites/package.json
+++ b/examples/sites/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "3.19.4",
+  "version": "3.19.7",
   "license": "MIT",
   "scripts": {
     "start": "vite",
diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index b2c458279..d95100bc2 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/src/views/components/components.vue
@@ -36,60 +36,62 @@
                     <div class="ti-f18 ti-py28" :id="`${oneGroup.name}--${key}`">
                       {{ key }}
                     </div>
-                    <tiny-grid class="api-table" :data="tableData[oneGroup.name][key]" :expand-config="apiExpandConf">
-                      <tiny-grid-column
-                        v-if="tableData[oneGroup.name][key][0]?.type"
-                        class-name="api-table-expand-col"
-                        type="expand"
-                        width="32"
-                      >
-                        <template #default="{ row }">
-                          <async-highlight v-if="row.code" :code="row.code.trim()" types="ts"></async-highlight>
-                        </template>
-                      </tiny-grid-column>
-                      <tiny-grid-column field="name" :title="i18nByKey('name')" :width="columnWidth[key][0]">
-                        <template #default="{ row }">
-                          <span class="api-table-name">
-                            <a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
-                            <span v-else>{{ row.name }}</span>
-                          </span>
-                          <version-tip
-                            v-if="row.meta || row.versionTipOption"
-                            :meta="row.meta"
-                            v-bind="row.versionTipOption"
-                            render-type="tag"
-                            tip-subject="api"
-                          >
-                          </version-tip>
-                        </template>
-                      </tiny-grid-column>
-                      <tiny-grid-column
-                        v-if="tableData[oneGroup.name][key][0]?.type"
-                        field="type"
-                        :title="i18nByKey('propType')"
-                        :width="columnWidth[key][1]"
-                      >
-                        <template #default="{ row }">
-                          <a
-                            v-if="row.typeAnchorName"
-                            :href="`${row.typeAnchorName.indexOf('#') === -1 ? '#' : ''}${row.typeAnchorName}`"
-                            v-html="row.type"
-                          ></a>
-                          <span v-else v-html="row.type"></span>
-                        </template>
-                      </tiny-grid-column>
-                      <tiny-grid-column
-                        v-if="key === 'props'"
-                        field="defaultValue"
-                        :title="i18nByKey('defValue')"
-                        :width="columnWidth[key][2]"
-                      ></tiny-grid-column>
-                      <tiny-grid-column field="desc" :title="i18nByKey('desc')">
-                        <template #default="data">
-                          <span v-html="data.row.desc"></span>
-                        </template>
-                      </tiny-grid-column>
-                    </tiny-grid>
+                    <div class="api-table-box">
+                      <tiny-grid class="api-table" :data="tableData[oneGroup.name][key]" :expand-config="apiExpandConf">
+                        <tiny-grid-column
+                          v-if="tableData[oneGroup.name][key][0]?.type"
+                          class-name="api-table-expand-col"
+                          type="expand"
+                          width="32"
+                        >
+                          <template #default="{ row }">
+                            <async-highlight v-if="row.code" :code="row.code.trim()" types="ts"></async-highlight>
+                          </template>
+                        </tiny-grid-column>
+                        <tiny-grid-column field="name" :title="i18nByKey('name')" :width="columnWidth[key][0]">
+                          <template #default="{ row }">
+                            <span class="api-table-name">
+                              <a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
+                              <span v-else>{{ row.name }}</span>
+                            </span>
+                            <version-tip
+                              v-if="row.meta || row.versionTipOption"
+                              :meta="row.meta"
+                              v-bind="row.versionTipOption"
+                              render-type="tag"
+                              tip-subject="api"
+                            >
+                            </version-tip>
+                          </template>
+                        </tiny-grid-column>
+                        <tiny-grid-column
+                          v-if="tableData[oneGroup.name][key][0]?.type"
+                          field="type"
+                          :title="i18nByKey('propType')"
+                          :width="columnWidth[key][1]"
+                        >
+                          <template #default="{ row }">
+                            <a
+                              v-if="row.typeAnchorName"
+                              :href="`${row.typeAnchorName.indexOf('#') === -1 ? '#' : ''}${row.typeAnchorName}`"
+                              v-html="row.type"
+                            ></a>
+                            <span v-else v-html="row.type"></span>
+                          </template>
+                        </tiny-grid-column>
+                        <tiny-grid-column
+                          v-if="key === 'props'"
+                          field="defaultValue"
+                          :title="i18nByKey('defValue')"
+                          :width="columnWidth[key][2]"
+                        ></tiny-grid-column>
+                        <tiny-grid-column field="desc" :title="i18nByKey('desc')">
+                          <template #default="data">
+                            <span v-html="data.row.desc"></span>
+                          </template>
+                        </tiny-grid-column>
+                      </tiny-grid>
+                    </div>
                   </template>
                 </div>
               </div>
@@ -142,7 +144,7 @@
               <div id="API" class="all-api-container">
                 <div class="ti-f-c ti-f-wrap api-list">
                   <!-- apis 是一个数组 {name,type,properties:[原table内容],events:[] ...........} -->
-                  <div class="mt20" v-for="oneGroup in currJson.apis" :key="oneGroup.name">
+                  <div class="mt20 wp100" v-for="oneGroup in currJson.apis" :key="oneGroup.name">
                     <div class="ti-f-r ti-f-pos-start ti-fw-bold">
                       <div :id="`cmp-${oneGroup.name}`" class="ti-f18">
                         {{ oneGroup.name }}
@@ -156,73 +158,75 @@
                         <div class="ti-f18 ti-py28" :id="`${oneGroup.name}--${key}`">
                           {{ key }}
                         </div>
-                        <tiny-grid
-                          ref="apiTableRef"
-                          class="api-table"
-                          :data="tableData[oneGroup.name][key]"
-                          :expand-config="apiExpandConf"
-                          row-id="name"
-                        >
-                          <tiny-grid-column class-name="api-table-expand-col" type="expand" width="32">
-                            <template #default="{ row }">
-                              <async-highlight
-                                v-if="row.code"
-                                :code="row.code.trim()"
-                                :types="chartCode ? 'html' : 'ts'"
-                              ></async-highlight>
-                              <div v-if="row.depTypes">
-                                <async-highlight
-                                  v-for="(k, i) in row.depTypes"
-                                  :key="i"
-                                  :code="currJson.types[k]?.code"
-                                  types="ts"
-                                ></async-highlight>
-                              </div>
-                            </template>
-                          </tiny-grid-column>
-                          <tiny-grid-column field="name" :title="i18nByKey('name')" :width="columnWidth[key][0]">
-                            <template #default="{ row }">
-                              <span class="api-table-name">
-                                <a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
-                                <span v-else>{{ row.name }}</span>
-                              </span>
-                              <version-tip
-                                v-if="row.meta || row.versionTipOption"
-                                :meta="row.meta"
-                                v-bind="row.versionTipOption"
-                                render-type="tag"
-                                tip-subject="api"
-                              >
-                              </version-tip>
-                            </template>
-                          </tiny-grid-column>
-                          <tiny-grid-column
-                            v-if="tableData[oneGroup.name][key].find((i) => i.type)"
-                            field="type"
-                            :title="i18nByKey('propType')"
-                            :width="columnWidth[key][1]"
+                        <div class="api-table-box">
+                          <tiny-grid
+                            ref="apiTableRef"
+                            class="api-table"
+                            :data="tableData[oneGroup.name][key]"
+                            :expand-config="apiExpandConf"
+                            row-id="name"
                           >
-                            <template #default="{ row }">
-                              <span
-                                :class="{ 'type-link': row.typeAnchorName || row.linkTo }"
-                                :id="row.typeAnchorName ? row.type : ''"
-                                @click="toOuterType(row)"
-                                >{{ row.type }} <icon-outer-link v-if="row.linkTo"></icon-outer-link
-                              ></span>
-                            </template>
-                          </tiny-grid-column>
-                          <tiny-grid-column
-                            v-if="key === 'props' || key === 'options'"
-                            field="defaultValue"
-                            :title="i18nByKey('defValue')"
-                            :width="columnWidth[key][2]"
-                          ></tiny-grid-column>
-                          <tiny-grid-column field="desc" :title="i18nByKey('desc')">
-                            <template #default="data">
-                              <span v-html="data.row.desc"></span>
-                            </template>
-                          </tiny-grid-column>
-                        </tiny-grid>
+                            <tiny-grid-column class-name="api-table-expand-col" type="expand" width="32">
+                              <template #default="{ row }">
+                                <async-highlight
+                                  v-if="row.code"
+                                  :code="row.code.trim()"
+                                  :types="chartCode ? 'html' : 'ts'"
+                                ></async-highlight>
+                                <div v-if="row.depTypes">
+                                  <async-highlight
+                                    v-for="(k, i) in row.depTypes"
+                                    :key="i"
+                                    :code="currJson.types[k]?.code"
+                                    types="ts"
+                                  ></async-highlight>
+                                </div>
+                              </template>
+                            </tiny-grid-column>
+                            <tiny-grid-column field="name" :title="i18nByKey('name')" :width="columnWidth[key][0]">
+                              <template #default="{ row }">
+                                <span class="api-table-name">
+                                  <a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
+                                  <span v-else>{{ row.name }}</span>
+                                </span>
+                                <version-tip
+                                  v-if="row.meta || row.versionTipOption"
+                                  :meta="row.meta"
+                                  v-bind="row.versionTipOption"
+                                  render-type="tag"
+                                  tip-subject="api"
+                                >
+                                </version-tip>
+                              </template>
+                            </tiny-grid-column>
+                            <tiny-grid-column
+                              v-if="tableData[oneGroup.name][key].find((i) => i.type)"
+                              field="type"
+                              :title="i18nByKey('propType')"
+                              :width="columnWidth[key][1]"
+                            >
+                              <template #default="{ row }">
+                                <span
+                                  :class="{ 'type-link': row.typeAnchorName || row.linkTo }"
+                                  :id="row.typeAnchorName ? row.type : ''"
+                                  @click="toOuterType(row)"
+                                  >{{ row.type }} <icon-outer-link v-if="row.linkTo"></icon-outer-link
+                                ></span>
+                              </template>
+                            </tiny-grid-column>
+                            <tiny-grid-column
+                              v-if="key === 'props' || key === 'options'"
+                              field="defaultValue"
+                              :title="i18nByKey('defValue')"
+                              :width="columnWidth[key][2]"
+                            ></tiny-grid-column>
+                            <tiny-grid-column field="desc" :title="i18nByKey('desc')">
+                              <template #default="data">
+                                <span v-html="data.row.desc"></span>
+                              </template>
+                            </tiny-grid-column>
+                          </tiny-grid>
+                        </div>
                       </template>
                     </div>
                   </div>
@@ -812,6 +816,7 @@ export default defineComponent({
   transition: all ease-in-out 0.3s;
 
   .docs-tabs-wrap {
+    width: 100%;
     flex: 1;
     display: flex;
     justify-content: center;
@@ -863,11 +868,18 @@ export default defineComponent({
   }
 }
 
+.api-table-box {
+  border-left: 1px solid rgb(239, 239, 245);
+  border-right: 1px solid rgb(239, 239, 245);
+  overflow-x: auto;
+  width: 100%;
+}
+
 .api-table {
   width: 100%;
+  min-width: 640px;
   table-layout: fixed;
   border-collapse: collapse;
-  border: 1px solid rgb(239, 239, 245);
 
   a,
   .type-link {
@@ -956,7 +968,7 @@ export default defineComponent({
 .all-demos-container,
 .all-api-container {
   flex: 1;
-  padding-top: 32px;
+  padding: 32px 0;
   scroll-behavior: smooth;
 }
 

From cd673305924d0b5442266c77d74f983d2f6d204b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=94=B3=E5=90=9B=E5=81=A5?= <40288193@qq.com>
Date: Tue, 12 Nov 2024 16:13:11 +0800
Subject: [PATCH 65/65] Release319 fix(transfer): fix drag 2 item to right when
 set filterable=true (#2517)

* fix(transfer): fix drag 2 item to right when set filterable=true

* fix(renderlese): update version
---
 packages/renderless/package.json          | 2 +-
 packages/renderless/src/transfer/index.ts | 9 ++++++---
 packages/renderless/src/transfer/vue.ts   | 4 ++--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/renderless/package.json b/packages/renderless/package.json
index d46607e67..0384cbf0f 100644
--- a/packages/renderless/package.json
+++ b/packages/renderless/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.19.4",
+  "version": "3.19.5",
   "private": true,
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
diff --git a/packages/renderless/src/transfer/index.ts b/packages/renderless/src/transfer/index.ts
index 5da9d179f..6baab19b7 100644
--- a/packages/renderless/src/transfer/index.ts
+++ b/packages/renderless/src/transfer/index.ts
@@ -217,7 +217,7 @@ export const clearQuery = (refs: ITransferRenderlessParams['refs']) => (which: '
 
 /** SortableJs 插件的回调逻辑， 添加，删除，更新事件后，触发本函数 */
 export const logicFun =
-  ({ props, emit, state }: Pick<ITransferRenderlessParams, 'emit' | 'props' | 'state'>) =>
+  ({ props, emit, state, vm }: Pick<ITransferRenderlessParams, 'emit' | 'props' | 'state'>) =>
   ({ event, isAdd, pullMode }: { event: any; isAdd?: boolean; pullMode?: 'sort' }) => {
     let currentValue = props.modelValue.slice()
     let movedKeys = []
@@ -225,9 +225,12 @@ export const logicFun =
     if (pullMode) {
       currentValue.splice(event.newIndex, 0, currentValue.splice(event.oldIndex, 1)[0])
     } else {
+      const rightPanel = vm.$refs.rightPanel
+      const leftPanel = vm.$refs.leftPanel
+
       const key = isAdd
-        ? state.targetData[event.oldIndex][props.props.key]
-        : state.sourceData[event.oldIndex][props.props.key]
+        ? rightPanel.state.filteredData[event.oldIndex][props.props.key]
+        : leftPanel.state.filteredData[event.oldIndex][props.props.key]
       const index = isAdd ? state.rightChecked.indexOf(key) : state.leftChecked.indexOf(key)
       const valueIndex = currentValue.indexOf(key)
 
diff --git a/packages/renderless/src/transfer/vue.ts b/packages/renderless/src/transfer/vue.ts
index 2e93eda90..6668c8ae0 100644
--- a/packages/renderless/src/transfer/vue.ts
+++ b/packages/renderless/src/transfer/vue.ts
@@ -61,7 +61,7 @@ const initState = ({ reactive, computed, api, props, h, slots }): ITransferState
 export const renderless = (
   props: ITransferProps,
   { computed, onMounted, reactive, h }: ISharedRenderlessParamHooks,
-  { $prefix, emit, refs, parent, slots }: ITransferRenderlessParamUtils
+  { $prefix, emit, refs, parent, slots, vm }: ITransferRenderlessParamUtils
 ) => {
   const api = {} as ITransferApi
   const Tree = $prefix + 'Tree'
@@ -80,7 +80,7 @@ export const renderless = (
     addToRight: addToRight({ emit, refs, props, state, Tree }),
     onTargetCheckedChange: onTargetCheckedChange({ emit, state }),
     onSourceCheckedChange: onSourceCheckedChange({ emit, state }),
-    logicFun: logicFun({ props, emit, state }),
+    logicFun: logicFun({ props, emit, state, vm }),
     getTargetData: getTargetData({ props, state, Tree, Table }),
     sortableEvent: sortableEvent({ api, droppanel: DROPPANEL, props, queryDom: TRANSFERPANEL, refs })
   })