@opentiny/vue-docs 2.2.18 → 2.2.20

package/demos/pc/app/user/custom-service.spec.ts

@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test'
 
 test('user-custom-service', async ({ page }) => {
   await page.goto('user#custom-service')
-  const input = page.locator('#preview .tiny-input__inner')
+  const input = page.locator('.tiny-user .tiny-input__inner')
   const value = page.locator('.user-value')
   const options = page.locator('.tiny-select-dropdown').locator('.tiny-option')
 

package/demos/pc/app/user-account/custom-service.spec.ts

@@ -8,23 +8,17 @@ test('user-account-custom-service', async ({ page }) => {
   const content = page.locator('.custom-content')
   const loginButton = page.locator('.tiny-logout')
 
-  await expect(userImage).toHaveCSS('background-image', 'url("http://localhost:7130/static/images/dog1.png")')
+  await expect(userImage).toHaveCSS('background-image', /\/images\/dog1.png/)
   await expect(userName).toHaveText('test1')
   await expect(dropdown).toBeHidden()
   await userName.hover()
-  await page.waitForTimeout(1000)
   await expect(dropdown).toBeVisible()
   await expect(content).toHaveText('默认插槽自定义内容')
   await expect(loginButton).toHaveText('登录')
   await loginButton.click()
-  await page.getByRole('button', { name: '确认' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
   await page.waitForTimeout(1000)
   await userName.hover()
   await page.waitForTimeout(1000)
   await expect(loginButton).toHaveText('注销')
-  await loginButton.click()
-  await page.waitForTimeout(1000)
-  await userName.hover()
-  await page.waitForTimeout(1000)
-  await expect(loginButton).toHaveText('登录')
 })

package/demos/pc/app/user-contact/contact-espace-composition-api.vue

@@ -8,6 +8,7 @@ import { reactive } from 'vue'
 
 const data = reactive({
   imgUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`,
+  userName: '张三',
   roleNumber: 'z00100001',
   values: [
     { text: '部门', value: '某部门' },

package/demos/pc/app/user-link/custom-service.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('user-link-custom-service', async ({ page }) => {
   await page.goto('user-link#custom-service')
   const card = page.locator('.tiny-popper.tiny-user-card')
-  const reference = page.locator('#preview .tiny-userlink .tiny-popover__reference')
+  const reference = page.locator('.reference-wrapper')
   const img = card.locator('.card-top-img img')
 
   await expect(reference).toHaveText('test3')
@@ -11,7 +11,7 @@ test('user-link-custom-service', async ({ page }) => {
   await reference.click()
   await page.waitForTimeout(1000)
   await expect(card).toBeVisible()
-  await expect(img).toHaveAttribute('src', '/static/images/dog1.png')
+  await expect(img).toHaveAttribute('src', /\/images\/dog1.png/)
 
   const text = card.locator('.card-top-text')
   await expect(text).toContainText(['公共技术测试数据部门(测试数据部)'])

package/demos/pc/app/watermark/webdoc/watermark.js

@@ -16,7 +16,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>content</code> 属性设置水印的文字。</br>通过 <code>font</code> 属性设置水印的样式</p>。',
+          '<p>通过 <code>content</code> 属性设置水印的文字。</br>通过 <code>font</code> 属性设置水印的样式。</p>',
         'en-US':
           'Set the text of the watermark through the <code>content</code> attribute.</br> Set the style of the watermark through the <code>font</code> attribute. '
       },

package/demos/pc/menus.js

@@ -78,7 +78,8 @@ export const cmpMenus = [
       { 'nameCn': '弹窗选择 ', 'name': 'DialogSelect ', 'key': 'dialog-select' },
       { 'nameCn': '抽屉', 'name': 'Drawer', 'key': 'drawer' },
       { 'nameCn': '过滤器面板', 'name': 'FilterPanel', 'key': 'filter-panel' },
-      { 'nameCn': '面板分割', 'name': 'Split', 'key': 'split' }
+      { 'nameCn': '面板分割', 'name': 'Split', 'key': 'split' },
+      { 'nameCn': '卡片', 'name': 'Card', 'key': 'card' }
     ]
   },
   {

package/demos/pc/resource/newVars.json

@@ -87,7 +87,7 @@
   "--ti-button-group-item-button-font-size": "--ti-button-group-item-btn-font-size",
   "--ti-button-group-item-button-disabled-background": "--ti-button-group-item-btn-disabled-bg-color",
   "--ti-button-group-item-button-disabled-border-color": "--ti-button-group-item-btn-disabled-border-color",
-  "--ti-button-group-item-button-disabled-color": "--ti-button-group-item-btn-disabled-text-color",
+  "--ti-button-group-item-button-disabled-color": "--ti-button-group-item-disabled-text-color",
   "--ti-button-group-item-button-hover-background": "--ti-button-group-item-btn-hover-bg-color",
   "--ti-button-group-item-button-hover-color": "--ti-button-group-item-btn-hover-text-color",
   "--ti-button-group-item-button-plain-color": "--ti-button-group-item-btn-plain-text-color",
@@ -1547,4 +1547,4 @@
   "--ti-wizard-detail-border-radius": "--ti-wizard-detail-border-radius",
   "--ti-wizard-detail-background": "--ti-wizard-detail-bg-color",
   "--ti-wizard-chart-icon-bgcolor": "--ti-wizard-chart-icon-bg-color"
-}
+}

package/demos/pc/webdoc/changelog.md

@@ -1,5 +1,144 @@
 # 更新日志
 
+## v2.14.0/v3.14.0
+
+`2024/03/07`
+
+## What's Changed
+
+### Exciting New Features 🎉
+
+- feat(vue): [mind-map] mindmap by @GaoNeng-wWw in https://github.com/opentiny/tiny-vue/pull/1207
+- feat(skeleton): skeleton component by @mengqiuleo in https://github.com/opentiny/tiny-vue/pull/1345
+- feat(float-button): [float-button] add float-button by @fanbingbing16 in https://github.com/opentiny/tiny-vue/pull/1394
+- feat(card): add card component by @shenjunjian
+- feat auto import plugin by @mengqiuleo in https://github.com/opentiny/tiny-vue/pull/1397
+- feat(time-line): refresh ui by @MNZhu in https://github.com/opentiny/tiny-vue/pull/1281
+- feat(numeric): refresh ui by @MNZhu in https://github.com/opentiny/tiny-vue/pull/1258
+- styles(action-sheet): [action-sheet] add action-sheet type by @jxhhdx in https://github.com/opentiny/tiny-vue/pull/1307
+- styles(amount): [amount] add amount types by @jxhhdx in https://github.com/opentiny/tiny-vue/pull/1310
+- styles(fall-menu): [fall-menu] add fall-menu types by @jxhhdx in https://github.com/opentiny/tiny-vue/pull/1315
+- styles(tree-menu): [tree-menu] add tree-menu types by @jxhhdx in https://github.com/opentiny/tiny-vue/pull/1316
+- styles(collapse): [collapse] add collapse types by @jxhhdx in https://github.com/opentiny/tiny-vue/pull/1317
+- styles(drawer): [drawer] add drawer types by @jxhhdx in https://github.com/opentiny/tiny-vue/pull/1318
+- styles(autocomplete): [autocomplete] add autocomplete types by @jxhhdx in https://github.com/opentiny/tiny-vue/pull/1322
+- style(tag-group): [tag-group] improve ts types of components by @Floyd-bit in https://github.com/opentiny/tiny-vue/pull/1323
+- styles(cascader): [cascader] add cascader types by @jxhhdx in https://github.com/opentiny/tiny-vue/pull/1324
+- style(popconfirm): [popconfirm] improve typescript declaration of components by @Floyd-bit in https://github.com/opentiny/tiny-vue/pull/1325
+- style(rate): [rate] improve typescript declaration of components by @Floyd-bit in https://github.com/opentiny/tiny-vue/pull/1328
+- styles(ip-address): [ip-address] add ip-address types by @jxhhdx in https://github.com/opentiny/tiny-vue/pull/1329
+- styles(async-flowchart): [async-flowchart] add async-flowchart types by @jxhhdx in https://github.com/opentiny/tiny-vue/pull/1312
+- styles(area): [area] add area types by @jxhhdx in https://github.com/opentiny/tiny-vue/pull/1311
+- feat(dialog-box): [dialog-box] make the dialogBox drag outside the window by @wNing50 in https://github.com/opentiny/tiny-vue/pull/1268
+- style(user-head): [user-head] improve typescript declaration of compo… by @Floyd-bit in https://github.com/opentiny/tiny-vue/pull/1380
+- fix(carousel ): [carousel] update carousel xdesign by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1422
+- fix(badge): [badge] update badge xdesign by @You-Hw-Y in https://github.com/opentiny/tiny-vue/pull/1420
+- feat(date-picker): [date-picker] support xdesign by @kagol in https://github.com/opentiny/tiny-vue/pull/1417
+- feat(slider): [slider] marks supported, input range supported by @yoyo201626 in https://github.com/opentiny/tiny-vue/pull/1429
+- [drawer] fix smb theme by @Huangyilin19 in https://github.com/opentiny/tiny-vue/pull/1411
+- feat(vue): add vue sub packages dependencies by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1424
+- fix(transfer ): [transfer] update transfer xdesign by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1419
+- fix(skeleton): [skeleton]add skeleton of smb theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1410
+- feat(loading): [loading] smb theme by @yoyo201626 in https://github.com/opentiny/tiny-vue/pull/1431
+- fix(Switch): [Switch] add keydown support and improth the accessibility by @AcWrong02 in https://github.com/opentiny/tiny-vue/pull/1428
+- feat(vue): [popconfirm] add popper-options props by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1439
+- feat(theme/input): [input] smb theme by @yoyo201626 in https://github.com/opentiny/tiny-vue/pull/1463
+- feat(search): [search] Increase input maximum character limit attribu… by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/1457
+- feat(search): refresh ui by @MNZhu in https://github.com/opentiny/tiny-vue/pull/1469
+
+### Bug Fixes 🐛
+
+- fix(build): fix build error and update versions by @zzcr in https://github.com/opentiny/tiny-vue/pull/1254
+- fix(calendar-view): [calendar-view] week display error by @Jevin0 in https://github.com/opentiny/tiny-vue/pull/1241
+- fix(time): [time-picker] Scroll to the specified position on the second click by @wNing50 in https://github.com/opentiny/tiny-vue/pull/1169
+- fix(slider): [slider] In input box mode, set the min attribute to a n… by @AcWrong02 in https://github.com/opentiny/tiny-vue/pull/1202
+- feat(relase) sync relase to dev by @zzcr in https://github.com/opentiny/tiny-vue/pull/1306
+- fix: fix tsconfig for not Vue projects by @xiejay97 in https://github.com/opentiny/tiny-vue/pull/1342
+- fix(cli): package.json missing dependency when create ui by @mengqiuleo in https://github.com/opentiny/tiny-vue/pull/1339
+- fix(site): async-highlight lost reactivity by @GaoNeng-wWw in https://github.com/opentiny/tiny-vue/pull/1344
+- fix(grid): [grid] fix the abnornal blank block when quantity from 500… by @wNing50 in https://github.com/opentiny/tiny-vue/pull/1321
+- fix(pull-refresh): fix pull up by @MNZhu in https://github.com/opentiny/tiny-vue/pull/1235
+- fix(col): [layout] Fix Vue warning with configuration span of 24 by @falcon-jin in https://github.com/opentiny/tiny-vue/pull/1272
+- fix(numeric): [numeric] Fix Bug caused by initial value greater than maximum by @wkif in https://github.com/opentiny/tiny-vue/pull/1284
+- fix(timeline): [time-line] fix console error about `event click undefined` by @gweesin in https://github.com/opentiny/tiny-vue/pull/1297
+- fix(dropdown): [dropdown] Fix the issue of dropdown component causing warning messages in the console: Component emitted event "is-disabled" but it is neither declared in the emits option by @liumingxiy in https://github.com/opentiny/tiny-vue/pull/1356
+- fix(tree-menu): [tree-menu]fix treeMenu error in vue2 by @zzcr in https://github.com/opentiny/tiny-vue/pull/1371
+- fix(anchor):[anchor]When the anchor component has a default currentLink, the style is not the expected style by @fanbingbing16 in https://github.com/opentiny/tiny-vue/pull/1368
+- fix(date-picker): [date-picker] fixed the issue that entering date did not work by @kagol in https://github.com/opentiny/tiny-vue/pull/1386
+- fix(modal): [modal] The Modal Modal box component should not automatically close when hovering over a message with type="message" by @AcWrong02 in https://github.com/opentiny/tiny-vue/pull/1377
+- fix(mobile-first): fix mobile-first components bugs by @zzcr in https://github.com/opentiny/tiny-vue/pull/1426
+- fix(renderless): fix designConfig error by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1423
+- fix(types): fix button group ts type warning by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1430
+- fix(watermark): [watermark] fix the pic watermark above the content by @wNing50 in https://github.com/opentiny/tiny-vue/pull/1425
+- fix(theme/notify): [notify] fix notify title white-space by @yoyo201626 in https://github.com/opentiny/tiny-vue/pull/1413
+- style(rich-text-editor): [rich-text-editor] css variable error by @Jevin0 in https://github.com/opentiny/tiny-vue/pull/1367
+- fix: fix theme tool by @kagol in https://github.com/opentiny/tiny-vue/pull/1433
+- fix(ci): delete e2e-comment useless 'echo' by @yoyo201626 in https://github.com/opentiny/tiny-vue/pull/1440
+- fix(vue/grid/src/edit/src/methods): [grid] fix-1383 The activeMethod … by @David-TechNomad in https://github.com/opentiny/tiny-vue/pull/1407
+- fix(ci): fix e2e test pr commment by @yoyo201626 in https://github.com/opentiny/tiny-vue/pull/1466
+- fix(time-picker): fix time-picker components bug by @You-Hw-Y in https://github.com/opentiny/tiny-vue/pull/1461
+- fix(theme/notify): [notify] word-break by @yoyo201626 in https://github.com/opentiny/tiny-vue/pull/1464
+
+### Other Changes
+
+- chore: [date-picker] config playwright timezoneId by @kagol in https://github.com/opentiny/tiny-vue/pull/1253
+- build(internal): fix inline chunk error by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1256
+- feat(switch): [switch] amend demo and API bug of switch by @You-Hw-Y in https://github.com/opentiny/tiny-vue/pull/1257
+- test(tag): [tag] improve unit testing of components by @Floyd-bit in https://github.com/opentiny/tiny-vue/pull/1261
+- fix(build): fix build error and update versions by @zzcr in https://github.com/opentiny/tiny-vue/pull/1269
+- docs(components): [anchor] Test document walkthrough by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/1274
+- test(wizard): [wizard] improve unit testing of components by @Floyd-bit in https://github.com/opentiny/tiny-vue/pull/1275
+- fix(collapse): [collapse] fix collapse api type by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/1271
+- test(TimeSelect): improve unit testing of TimeSelect Component by @AcWrong02 in https://github.com/opentiny/tiny-vue/pull/1270
+- docs(sites): [grid] add custom pager in grid demo by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1288
+- docs(sites): add v3.13.0 changelog by @zzcr in https://github.com/opentiny/tiny-vue/pull/1278
+- feat(playground): add 3.13 version and change layoutReverse default by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1291
+- docs(progress): [progress] Optimization Merge Example by @chenxi-20 in https://github.com/opentiny/tiny-vue/pull/1282
+- feat(popconfirm): [popconfirm] optimize docs and API by @You-Hw-Y in https://github.com/opentiny/tiny-vue/pull/1301
+- test(user-head): [user-head] improve unit testing of components by @Floyd-bit in https://github.com/opentiny/tiny-vue/pull/1296
+- docs(modal/dialog-box): [modal,dialog-box] update docs by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1287
+- docs(tree): [tree] Clear redundant default-expand-all attribute descripttions by @Jevin0 in https://github.com/opentiny/tiny-vue/pull/1285
+- docs(time-picker): [time-picker] optimize docs and demos by @You-Hw-Y in https://github.com/opentiny/tiny-vue/pull/1273
+- feat(badge): [badge] optimize docs and API by @You-Hw-Y in https://github.com/opentiny/tiny-vue/pull/1302
+- docs(TimeSelect): [TimeSelect]improve ths docs of TimeSelect by @AcWrong02 in https://github.com/opentiny/tiny-vue/pull/1283
+- docs(date-picker): [date-picker] optimize date-picker docs by @kagol in https://github.com/opentiny/tiny-vue/pull/1320
+- docs(container): [container] optimize docs and demos by @You-Hw-Y in https://github.com/opentiny/tiny-vue/pull/1333
+- docs(site/notify): [notify] specification document by @yoyo201626 in https://github.com/opentiny/tiny-vue/pull/1337
+- docs(site/input): [input] specification document by @yoyo201626 in https://github.com/opentiny/tiny-vue/pull/1336
+- docs(site/loading): [loading] specification document by @yoyo201626 in https://github.com/opentiny/tiny-vue/pull/1338
+- docs(anchor):[anchor]Fixed mode on and off with text reversed by @fanbingbing16 in https://github.com/opentiny/tiny-vue/pull/1304
+- feat(ci): add pr preview action by @mengqiuleo in https://github.com/opentiny/tiny-vue/pull/1351
+- fix(site/loading): [loading] rectify loading size prop description by @yoyo201626 in https://github.com/opentiny/tiny-vue/pull/1353
+- docs(CONTRIBUTING): supplement the pr title description document by @yoyo201626 in https://github.com/opentiny/tiny-vue/pull/1360
+- docs(sites): add saas sites env by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1370
+- fix(sites): add saas sites env by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1385
+- chore(ci): add pr preview through vercel deploy by @kagol in https://github.com/opentiny/tiny-vue/pull/1388
+- docs: optimize contributing guide docs by @kagol in https://github.com/opentiny/tiny-vue/pull/1382
+- docs(time-select): [time-select] optimize docs and demos by @You-Hw-Y in https://github.com/opentiny/tiny-vue/pull/1403
+- feat(autocomplete): [autocomplete] adapt to autocomplete smb themes by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/1421
+- docs(steps): optimize demo by @Huangyilin19 in https://github.com/opentiny/tiny-vue/pull/1415
+- fix(ci): delete pr github action by @mengqiuleo in https://github.com/opentiny/tiny-vue/pull/1393
+- ci: chat gpt code review by @GaoNeng-wWw in https://github.com/opentiny/tiny-vue/pull/1391
+- (docs): update drag-outside-window of dialog-box by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1376
+- feat(collapse): [collapse] updata collapse xdesign by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/1427
+- feat(ci): e2e add vue2 by @yoyo201626 in https://github.com/opentiny/tiny-vue/pull/1398
+- docs(time-select): [time-select] optimize docs and demos by @You-Hw-Y in https://github.com/opentiny/tiny-vue/pull/1418
+- fix(docs): update docs of fall-menu by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1432
+- fix(docs): update docs of dialog-box by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1434
+- fix(modal): [modal]optimize modal demo by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1437
+- docs(site/loading): [loading] improve documentation by @yoyo201626 in https://github.com/opentiny/tiny-vue/pull/1451
+- docs(site/popeditor): improve documentation by @yoyo201626 in https://github.com/opentiny/tiny-vue/pull/1438
+- test(e2e): [grid]fix grid e2e test error by @zzcr in https://github.com/opentiny/tiny-vue/pull/1458
+- docs(radio): [radio] optimize demo by @You-Hw-Y in https://github.com/opentiny/tiny-vue/pull/1462
+- docs(sites): change apis doc and hidden form menu by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1472
+- docs(sites): add 3.14 version playground by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1470
+
+## New Contributors
+
+- @Jevin0 made their first contribution in https://github.com/opentiny/tiny-vue/pull/1241
+- @mengqiuleo made their first contribution in https://github.com/opentiny/tiny-vue/pull/1340
+- @liumingxiy made their first contribution in https://github.com/opentiny/tiny-vue/pull/1356
+
 ## v2.13.0/v3.13.0
 
 `2024/01/05`

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

@@ -2,9 +2,47 @@
 
 ## Introduction Components
 
-`TinyVue`Multiple component introduction, single component introduction, and complete introduction are supported.
+`TinyVue` supports automatic import, multiple component import, single component import, and complete import.
 
-### Multi-component introduction (recommended)
+### Auto import (recommended)
+
+First, you need to install the plugin `@opentiny/unplugin-tiny-vue`.
+
+```bash
+npm i @opentiny/unplugin-tiny-vue -D
+```
+
+Then, insert the following code into your project's `Vite` or `Webpack` configuration file.
+
+Vite
+
+```ts
+// vite.config.ts
+
+import autoImportPlugin from '@opentiny/unplugin-tiny-vue'
+
+export default {
+  plugins: [autoImportPlugin()]
+}
+```
+
+Webpack
+
+```js
+// webpack.config.js
+
+const autoImportPlugin = require('@opentiny/unplugin-tiny-vue')
+
+module.exports = {
+  plugins: [autoImportPlugin()]
+}
+```
+
+This way, you can directly use TinyVue components in your project. These components are automatically imported on demand, without the need for manual import, and you don't have to worry about the project size becoming too large.
+
+For more information about automatic on-demand imports, please refer to [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) and [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import).
+
+### Multi-component introduction
 
 Multi-component reference is from the dependency package.`@opentiny/vue`Multiple components are referenced in. The following is an example (in the following figure)`Button`and`Alert`Component as an example):
 

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

@@ -2,9 +2,47 @@
 
 ## 引入组件
 
-`TinyVue` 支持多组件引入、单组件引入以及完整引入三种方式。
+`TinyVue` 支持自动导入、多组件引入、单组件引入以及完整引入四种方式。
 
-### 多组件引入（推荐）
+### 自动导入（推荐）
+
+首先你需要安装 `@opentiny/unplugin-tiny-vue` 这款插件。
+
+```bash
+npm i @opentiny/unplugin-tiny-vue -D
+```
+
+然后把以下代码插入到你项目的 `Vite` 或 `Webpack` 配置文件中。
+
+Vite
+
+```ts
+// vite.config.ts
+
+import autoImportPlugin from '@opentiny/unplugin-tiny-vue'
+
+export default {
+  plugins: [autoImportPlugin()]
+}
+```
+
+Webpack
+
+```js
+// webpack.config.js
+
+const autoImportPlugin = require('@opentiny/unplugin-tiny-vue')
+
+module.exports = {
+  plugins: [autoImportPlugin()]
+}
+```
+
+这样你就能直接在项目中使用 TinyVue 的组件，这些组件都是自动按需导入的，无需手动导入，且不用担心项目体积变得太大。
+
+想了解更多自动按需导入的信息，请参考：[unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 和 [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import)。
+
+### 多组件引入
 
 多组件引用即从依赖包 `@opentiny/vue` 中引用多个组件，参考示例如下（以 `Button` 和 `Alert` 组件为例）：
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "2.2.18",
+  "version": "2.2.20",
   "license": "MIT",
   "dependencies": {
     "@unocss/reset": "0.38.2",
@@ -16,17 +16,17 @@
     "marked": "^4.3.0",
     "sortablejs": "1.15.0",
     "@opentiny/vue-repl": "^1.1.0",
-    "@opentiny/vue": "3.13.0-alpha.1",
-    "@opentiny/vue-icon-saas": "3.13.0-alpha.1",
-    "@opentiny/vue-common": "3.13.0-alpha.1",
-    "@opentiny/vue-design-saas": "3.13.0-alpha.1",
-    "@opentiny/vue-icon": "3.13.0-alpha.1",
-    "@opentiny/vue-design-aurora": "3.13.0-alpha.1",
-    "@opentiny/vue-theme": "3.13.0-alpha.1",
-    "@opentiny/vue-theme-mobile": "3.13.0-alpha.1",
-    "@opentiny/vue-design-smb": "3.13.0-alpha.1",
+    "@opentiny/vue": "~3.14.0",
+    "@opentiny/vue-icon": "~3.14.0",
+    "@opentiny/vue-common": "~3.14.0",
+    "@opentiny/vue-icon-saas": "~3.14.0",
+    "@opentiny/vue-design-aurora": "~3.14.0",
+    "@opentiny/vue-design-saas": "~3.14.0",
+    "@opentiny/vue-theme-mobile": "~3.14.0",
+    "@opentiny/vue-design-smb": "~3.14.0",
     "@opentiny/vue-vite-import": "~1.1.5",
-    "@opentiny/vue-theme-saas": "3.13.0-alpha.1"
+    "@opentiny/vue-theme": "~3.14.0",
+    "@opentiny/vue-theme-saas": "~3.14.0"
   },
   "devDependencies": {
     "@types/markdown-it": "^12.2.3",

package/playground/App.vue

@@ -17,7 +17,7 @@ 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.13'
+const VERSION = 'tiny-vue-version-3.14'
 const LAYOUT = 'playground-layout'
 const LAYOUT_REVERSE = 'playground-layout-reverse'
 
@@ -28,7 +28,7 @@ const isMobileFirst = tinyMode === 'mobile-first'
 const isSaas = tinyTheme === 'saas'
 const isPreview = searchObj.get('openMode') === 'preview' // 是否多端弹窗预览
 
-const versions = ['3.13', '3.12', '3.11', '3.10', '3.9', '3.8']
+const versions = ['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')
 const getRuntime = (version) => {

package/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="hp100 of-hidden">
-    <tiny-config-provider :design="designConfig">
+    <tiny-config-provider :design="designConfig" :key="currentThemeKey">
       <router-view />
       <tiny-modal :show-header="false" :show-footer="false" v-model="modalSHow" width="1400px" height="900px" resize>
         <tiny-icon-close class="close-icon" @click="modalSHow = false"></tiny-icon-close>
@@ -41,7 +41,7 @@ export default defineComponent({
       })
       common.renderHeader()
     })
-    const { designConfig } = useTheme()
+    const { designConfig, currentThemeKey } = useTheme()
 
     provide('showPreview', (url) => {
       previewUrl.value = url
@@ -50,6 +50,7 @@ export default defineComponent({
     return {
       appData,
       designConfig,
+      currentThemeKey,
       previewUrl,
       modalSHow
     }

package/src/const.ts

@@ -8,3 +8,30 @@ export const LANG_PATH_MAP = {
   [ZH_CN_LANG]: 'zh-CN',
   [EN_US_LANG]: 'en-US'
 }
+
+export const CURRENT_THEME_KEY = 'tiny-current-theme'
+
+// 主题
+export const DEFAULT_THEME = 'tiny-default-theme'
+export const AURORA_THEME = 'tiny-aurora-theme'
+export const SMB_THEME = 'tiny-smb-theme'
+export const INFINITY_THEME = 'tiny-infinity-theme'
+
+// 主题对应路由参数映射表
+export const THEME_ROUTE_MAP = {
+  [DEFAULT_THEME]: 'os-theme',
+  [AURORA_THEME]: 'aurora-theme',
+  [SMB_THEME]: 'smb-theme',
+  [INFINITY_THEME]: 'infinity-theme'
+}
+
+/**
+ * @description 在一对一映射的对象中，通过值反查key
+ * @param map 给定的映射
+ * @param val 值
+ * @returns 对应值的key
+ */
+export const getKeyByValue = (map, val) =>
+  Object.keys(map).find((key) => {
+    return map[key] === val
+  })

package/src/router.js

@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Layout from '@/views/layout/layout.vue'
-import { LANG_KEY, LANG_PATH_MAP, ZH_CN_LANG } from './const'
+import { LANG_KEY, LANG_PATH_MAP, ZH_CN_LANG, CURRENT_THEME_KEY, THEME_ROUTE_MAP, DEFAULT_THEME } from './const'
 import { $local } from './tools/storage'
 
 const Components = () => import('@/views/components/components.vue')
@@ -12,7 +12,7 @@ const context = import.meta.env.VITE_CONTEXT
 let routes = [
   // 组件总览
   {
-    path: `${context}:all?/:lang/overview`,
+    path: `${context}:all?/:lang/:theme/overview`,
     component: Layout,
     name: 'overview',
     children: [{ name: 'Overview', path: '', component: Overview, meta: { title: '组件总览 | TinyVue' } }]
@@ -37,7 +37,9 @@ let routes = [
     redirect: () => {
       const lang = $local[LANG_KEY]
       const langPath = LANG_PATH_MAP[lang] || LANG_PATH_MAP[ZH_CN_LANG]
-      return { path: `${context}${langPath}/overview` }
+      const themeKey = localStorage.getItem(CURRENT_THEME_KEY)
+      const theme = THEME_ROUTE_MAP[themeKey] || THEME_ROUTE_MAP[DEFAULT_THEME]
+      return { path: `${context}${langPath}/${theme}/overview` }
     }
   }
 ]

package/src/tools/useTheme.js

@@ -2,87 +2,97 @@ import { watch, computed } from 'vue'
 import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
 import { tinyAuroraTheme, tinySmbTheme, tinyInfinityTheme } from '@opentiny/vue-theme/theme'
 import { hooks } from '@opentiny/vue-common'
-import { Notify } from '@opentiny/vue'
 import designSmbConfig from '@opentiny/vue-design-smb'
 import designAuroraConfig from '@opentiny/vue-design-aurora'
 import designSaasConfig from '@opentiny/vue-design-saas'
+import { router } from '@/router'
 import { appData } from './appData'
+import {
+  THEME_ROUTE_MAP,
+  CURRENT_THEME_KEY,
+  DEFAULT_THEME,
+  AURORA_THEME,
+  SMB_THEME,
+  INFINITY_THEME,
+  getKeyByValue
+} from '../const'
 
-const CURRENT_THEME_KEY = 'tiny-current-theme'
+const themeMap = {
+  [DEFAULT_THEME]: null,
+  [AURORA_THEME]: tinyAuroraTheme,
+  [SMB_THEME]: tinySmbTheme,
+  [INFINITY_THEME]: tinyInfinityTheme
+}
 
 const isEn = appData.lang === 'enUS'
 
 const themeData = [
-  { value: 'tiny-default-theme', label: isEn ? 'Default Theme' : '默认主题' },
-  { value: 'tiny-infinity-theme', label: isEn ? 'Infinity Theme' : '无限主题' },
-  { value: 'tiny-aurora-theme', label: isEn ? 'Aurora Theme' : 'Aurora 主题' },
-  { value: 'tiny-smb-theme', label: isEn ? 'SMB Theme' : 'SMB 主题' }
+  { value: [DEFAULT_THEME], label: isEn ? 'Default Theme' : '默认主题' },
+  { value: [INFINITY_THEME], label: isEn ? 'Infinity Theme' : '无限主题' },
+  { value: [AURORA_THEME], label: isEn ? 'Aurora Theme' : 'Aurora 主题' },
+  { value: [SMB_THEME], label: isEn ? 'SMB Theme' : 'SMB 主题' }
 ]
 
 const designConfigMap = {
-  'tiny-default-theme': {},
-  'tiny-infinity-theme': {},
-  'tiny-aurora-theme': designAuroraConfig,
-  'tiny-smb-theme': designSmbConfig
-}
-let isShowTip = false
-function showTip() {
-  Notify({
-    type: 'info',
-    title: '请注意',
-    message: '主题切换成功，如有部分主题样式不生效，请尝试手动刷新页面即可',
-    position: 'top-right',
-    duration: 3000,
-    verticalOffset: 200
-  })
-  isShowTip = true
+  [DEFAULT_THEME]: {},
+  [INFINITY_THEME]: {},
+  [AURORA_THEME]: designAuroraConfig,
+  [SMB_THEME]: designSmbConfig
 }
 
 const theme = new TinyThemeTool()
-const lastThemeKey = localStorage.getItem(CURRENT_THEME_KEY)
-const currThemeLabel = hooks.ref(lastThemeKey || 'tiny-default-theme')
-const designConfig = computed(() => {
-  if (import.meta.env.VITE_TINY_THEME === 'saas') {
-    return designSaasConfig
-  }
-  return designConfigMap[currThemeLabel.value]
-})
-
-const THEME_MAP = {
-  'tiny-aurora-theme': tinyAuroraTheme,
-  'tiny-smb-theme': tinySmbTheme,
-  'tiny-infinity-theme': tinyInfinityTheme
-}
 
-const changeTheme = (themeValue) => {
-  currThemeLabel.value = themeValue
-}
+const defaultThemeKey = DEFAULT_THEME
+const currentThemeKey = hooks.ref(defaultThemeKey)
 
 watch(
-  () => currThemeLabel.value,
+  () => currentThemeKey.value,
   (newVal) => {
     localStorage.setItem(CURRENT_THEME_KEY, newVal)
-    theme.changeTheme(THEME_MAP[newVal])
-    // 若部分主题样式切换不生效，第一次则提示用户需要手动刷新
-    if (!isShowTip) {
-      showTip()
-    }
+    theme.changeTheme(themeMap[newVal])
   }
 )
 
-// 切换上次缓存的主题
-if (THEME_MAP[lastThemeKey]) {
-  theme.changeTheme(THEME_MAP[lastThemeKey])
+const designConfig = computed(() => {
+  if (import.meta.env.VITE_TINY_THEME === 'saas') {
+    return designSaasConfig
+  }
+  return designConfigMap[currentThemeKey.value]
+})
+
+const changeTheme = (themeKey) => {
+  router.push({
+    params: {
+      theme: THEME_ROUTE_MAP[themeKey]
+    }
+  })
 }
 
 // 返回拷贝，防止原始数据被修改
 const getThemeData = () => JSON.parse(JSON.stringify(themeData))
 
+let initWatchRoute = false
+const watchRoute = () => {
+  if (initWatchRoute) {
+    return
+  }
+  initWatchRoute = true
+  watch(
+    () => router.currentRoute.value.params.theme,
+    (val) => {
+      const themeKey = getKeyByValue(THEME_ROUTE_MAP, val)
+      currentThemeKey.value = themeKey || defaultThemeKey
+    }
+  )
+}
+
 export default function useTheme() {
+  watchRoute()
   return {
     getThemeData,
     changeTheme,
-    currThemeLabel,
-    designConfig
+    currentThemeKey,
+    designConfig,
+    defaultTheme: THEME_ROUTE_MAP[defaultThemeKey]
   }
 }