From 65737087ebbdd2c4bebbaf581263acaaad23ea12 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Fri, 13 Sep 2024 10:30:22 +0800
Subject: [PATCH] docs(site): optimize the overall theme logic of the official
 website (#2109)

---
 examples/docs/newsrc/pc.vue                   |  16 +-
 examples/docs/newsrc/uses/useTheme.js         |   7 +-
 examples/docs/package.json                    |  18 +-
 .../color/auxiliary-color-composition-api.vue |  40 --
 .../pc/app/color/auxiliary-color.spec.js      |   8 -
 .../demos/pc/app/color/auxiliary-color.vue    |  47 --
 .../app/color/main-color-composition-api.vue  |  46 --
 .../demos/pc/app/color/main-color.spec.js     |   9 -
 .../sites/demos/pc/app/color/main-color.vue   |  53 ---
 .../color/neutral-color-composition-api.vue   |  74 ---
 .../demos/pc/app/color/neutral-color.spec.js  |   9 -
 .../demos/pc/app/color/neutral-color.vue      |  82 ----
 .../demos/pc/app/color/webdoc/color.cn.md     |   7 -
 .../demos/pc/app/color/webdoc/color.en.md     |   7 -
 .../sites/demos/pc/app/color/webdoc/color.js  |  42 --
 ...t-usage-specifications-composition-api.vue |  71 ---
 .../pc/app/font/Font-usage-specifications.vue |  79 ----
 .../font/chinese-font-set-composition-api.vue |  21 -
 .../demos/pc/app/font/chinese-font-set.vue    |  27 --
 .../font/english-fonts-composition-api.vue    |  21 -
 .../sites/demos/pc/app/font/english-fonts.vue |  27 --
 .../sites/demos/pc/app/font/webdoc/font.cn.md |   7 -
 .../sites/demos/pc/app/font/webdoc/font.en.md |   7 -
 .../sites/demos/pc/app/font/webdoc/font.js    |  42 --
 examples/sites/demos/pc/menus.js              |   2 -
 examples/sites/src/tools/useTheme.js          |  14 +-
 .../src/views/components/float-settings.vue   | 426 ------------------
 examples/vue3/package.json                    |  26 +-
 28 files changed, 42 insertions(+), 1193 deletions(-)
 delete mode 100644 examples/sites/demos/pc/app/color/auxiliary-color-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/color/auxiliary-color.spec.js
 delete mode 100644 examples/sites/demos/pc/app/color/auxiliary-color.vue
 delete mode 100644 examples/sites/demos/pc/app/color/main-color-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/color/main-color.spec.js
 delete mode 100644 examples/sites/demos/pc/app/color/main-color.vue
 delete mode 100644 examples/sites/demos/pc/app/color/neutral-color-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/color/neutral-color.spec.js
 delete mode 100644 examples/sites/demos/pc/app/color/neutral-color.vue
 delete mode 100644 examples/sites/demos/pc/app/color/webdoc/color.cn.md
 delete mode 100644 examples/sites/demos/pc/app/color/webdoc/color.en.md
 delete mode 100644 examples/sites/demos/pc/app/color/webdoc/color.js
 delete mode 100644 examples/sites/demos/pc/app/font/Font-usage-specifications-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/font/Font-usage-specifications.vue
 delete mode 100644 examples/sites/demos/pc/app/font/chinese-font-set-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/font/chinese-font-set.vue
 delete mode 100644 examples/sites/demos/pc/app/font/english-fonts-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/font/english-fonts.vue
 delete mode 100644 examples/sites/demos/pc/app/font/webdoc/font.cn.md
 delete mode 100644 examples/sites/demos/pc/app/font/webdoc/font.en.md
 delete mode 100644 examples/sites/demos/pc/app/font/webdoc/font.js
 delete mode 100644 examples/sites/src/views/components/float-settings.vue

diff --git a/examples/docs/newsrc/pc.vue b/examples/docs/newsrc/pc.vue
index b539502ef..335e78b74 100644
--- a/examples/docs/newsrc/pc.vue
+++ b/examples/docs/newsrc/pc.vue
@@ -96,8 +96,14 @@
         </div>
       </div>
     </tiny-floatbar>
-    <!-- 切换主题 -->
-    <tiny-dropdown class="!fixed bottom20 right140" :show-icon="false" @item-click="changeTheme" :disabled="isSaasMode">
+    <!-- 切换主题 暂时先屏蔽，等后续其他主题验收完成再放出此功能 -->
+    <tiny-dropdown
+      v-if="false"
+      class="!fixed bottom20 right140"
+      :show-icon="false"
+      @item-click="changeTheme"
+      :disabled="isSaasMode"
+    >
       <span title="切换主题">
         <SvgTheme></SvgTheme>
       </span>
@@ -152,7 +158,6 @@ import {
 import { iconStarActive, iconSelect } from '@opentiny/vue-icon'
 import Loading from '@opentiny/vue-loading'
 import designSmbConfig from '@opentiny/vue-design-smb'
-import designAuroraConfig from '@opentiny/vue-design-aurora'
 import designSaasConfig from '@opentiny/vue-design-saas'
 import { menuData, demoStr, demoVue, mds, demos } from './resourcePc.js'
 import { useTheme, useModeCtx } from './uses'
@@ -194,7 +199,7 @@ export default {
       currMd: hooks.computed(() => mds[`${modeState.pathName}.cn.md`]),
       demoLoading: false
     })
-    // hui chart 新增图表类型，新增图表的 api 和原有图表的api 区分开。 
+    // hui chart 新增图表类型，新增图表的 api 和原有图表的api 区分开。
     const huiNewChart = ['chart-process']
     const fn = {
       // 菜单搜索：忽略大小写
@@ -258,9 +263,10 @@ export default {
       modeFn.pushToUrl()
     }
 
+    // 默认全部使用designSmbConfig，后续验收完毕再调整
     const designConfigMap = {
       'tiny-smb-theme': designSmbConfig,
-      'tiny-aurora-theme': designAuroraConfig
+      'tiny-aurora-theme': designSmbConfig
     }
 
     const lastThemeKey = localStorage.getItem('tinyThemeToolkey')
diff --git a/examples/docs/newsrc/uses/useTheme.js b/examples/docs/newsrc/uses/useTheme.js
index 64e31452b..5e29db898 100644
--- a/examples/docs/newsrc/uses/useTheme.js
+++ b/examples/docs/newsrc/uses/useTheme.js
@@ -1,5 +1,4 @@
 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'
 
@@ -21,9 +20,9 @@ export function useTheme({ readCacheImmediate = true } = {}) {
   const lastThemeKey = localStorage.getItem('tinyThemeToolkey')
 
   const THEME_MAP = {
-    'tiny-aurora-theme': tinyAuroraTheme,
-    'tiny-smb-theme': tinySmbTheme,
-    'tiny-infinity-theme': tinyInfinityTheme
+    'tiny-aurora-theme': null,
+    'tiny-smb-theme': null,
+    'tiny-infinity-theme': null
   }
 
   const changeTheme = ({ vm }) => {
diff --git a/examples/docs/package.json b/examples/docs/package.json
index a97695d7f..539f42937 100644
--- a/examples/docs/package.json
+++ b/examples/docs/package.json
@@ -3,24 +3,24 @@
   "type": "module",
   "version": "1.0.8",
   "description": "",
-  "keywords": [],
   "author": "",
   "license": "ISC",
+  "keywords": [],
+  "files": [
+    "resources"
+  ],
   "dependencies": {
     "@opentiny/vue": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
+    "@opentiny/vue-design-aurora": "workspace:~",
+    "@opentiny/vue-design-saas": "workspace:~",
+    "@opentiny/vue-design-smb": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
     "@opentiny/vue-theme-mobile": "workspace:~",
     "@opentiny/vue-theme-saas": "workspace:~",
-    "@opentiny/vue-design-aurora": "workspace:~",
-    "@opentiny/vue-design-smb": "workspace:~",
-    "@opentiny/vue-design-saas": "workspace:~",
     "sortablejs": "1.15.0"
   },
   "devDependencies": {
     "@playwright/test": "~1.42.0"
-  },
-  "files": [
-    "resources"
-  ]
-}
\ No newline at end of file
+  }
+}
diff --git a/examples/sites/demos/pc/app/color/auxiliary-color-composition-api.vue b/examples/sites/demos/pc/app/color/auxiliary-color-composition-api.vue
deleted file mode 100644
index 27741d9f3..000000000
--- a/examples/sites/demos/pc/app/color/auxiliary-color-composition-api.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <tiny-row>
-    <tiny-col :span="2" class="tiny-color bg-success-normal"> bg-success-normal </tiny-col>
-    <tiny-col :span="2" class="tiny-color bg-warning-normal"> bg-warning-normal </tiny-col>
-    <tiny-col :span="2" class="tiny-color bg-error-normal"> bg-error-normal </tiny-col>
-  </tiny-row>
-</template>
-
-<script setup lang="jsx">
-import { Col as TinyCol, Row as TinyRow } from '@opentiny/vue'
-</script>
-
-<style scoped>
-.tiny-row {
-  margin-bottom: 40px;
-}
-
-.tiny-color {
-  height: 80px;
-  margin: 10px;
-  line-height: 80px;
-  color: #fff;
-  text-align: center;
-  min-width: 175px;
-  font-size: 14px;
-  display: inline-block;
-}
-
-.tiny-color.bg-success-normal {
-  background-color: #52c41a;
-}
-
-.tiny-color.bg-warning-normal {
-  background-color: #faad14;
-}
-
-.tiny-color.bg-error-normal {
-  background-color: #f5222d;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/color/auxiliary-color.spec.js b/examples/sites/demos/pc/app/color/auxiliary-color.spec.js
deleted file mode 100644
index bca68eba2..000000000
--- a/examples/sites/demos/pc/app/color/auxiliary-color.spec.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('辅助色', async ({ page }) => {
-  await page.goto('color#auxiliary-color')
-  await expect(page.getByText('bg-success-normal')).toHaveClass(/bg-success-normal/)
-  await expect(page.getByText('bg-warning-normal')).toHaveClass(/bg-warning-normal/)
-  await expect(page.getByText('bg-error-normal')).toHaveClass(/bg-error-normal/)
-})
diff --git a/examples/sites/demos/pc/app/color/auxiliary-color.vue b/examples/sites/demos/pc/app/color/auxiliary-color.vue
deleted file mode 100644
index ef08f2618..000000000
--- a/examples/sites/demos/pc/app/color/auxiliary-color.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <tiny-row>
-    <tiny-col :span="2" class="tiny-color bg-success-normal"> bg-success-normal </tiny-col>
-    <tiny-col :span="2" class="tiny-color bg-warning-normal"> bg-warning-normal </tiny-col>
-    <tiny-col :span="2" class="tiny-color bg-error-normal"> bg-error-normal </tiny-col>
-  </tiny-row>
-</template>
-
-<script lang="jsx">
-import { Col, Row } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyCol: Col,
-    TinyRow: Row
-  }
-}
-</script>
-
-<style scoped>
-.tiny-row {
-  margin-bottom: 40px;
-}
-
-.tiny-color {
-  height: 80px;
-  margin: 10px;
-  line-height: 80px;
-  color: #fff;
-  text-align: center;
-  min-width: 175px;
-  font-size: 14px;
-  display: inline-block;
-}
-
-.tiny-color.bg-success-normal {
-  background-color: #52c41a;
-}
-
-.tiny-color.bg-warning-normal {
-  background-color: #faad14;
-}
-
-.tiny-color.bg-error-normal {
-  background-color: #f5222d;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/color/main-color-composition-api.vue b/examples/sites/demos/pc/app/color/main-color-composition-api.vue
deleted file mode 100644
index cf7ee45ff..000000000
--- a/examples/sites/demos/pc/app/color/main-color-composition-api.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <tiny-row>
-    <tiny-col :span="2" class="tiny-color bg-primary-normal"> bg-primary-normal </tiny-col>
-    <tiny-col :span="2" class="tiny-color bg-primary-hover"> bg-primary-hover </tiny-col>
-    <tiny-col :span="2" class="tiny-color bg-primary-active"> bg-primary-active </tiny-col>
-    <tiny-col :span="2" class="tiny-color bg-btn-active">bg-btn-active</tiny-col>
-  </tiny-row>
-</template>
-
-<script setup lang="jsx">
-import { Col as TinyCol, Row as TinyRow } from '@opentiny/vue'
-</script>
-
-<style scoped>
-.tiny-row {
-  margin-bottom: 40px;
-}
-
-.tiny-color {
-  height: 80px;
-  margin: 10px;
-  line-height: 80px;
-  color: #fff;
-  text-align: center;
-  min-width: 175px;
-  font-size: 14px;
-  display: inline-block;
-}
-
-.tiny-color.bg-primary-normal {
-  background-color: var(--ti-common-color-line-active);
-}
-
-.tiny-color.bg-primary-hover {
-  background-color: #40a9ff;
-}
-
-.tiny-color.bg-primary-active {
-  background-color: #096dd9;
-}
-
-.tiny-color.bg-btn-active {
-  color: #333;
-  background-color: #e6f7ff;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/color/main-color.spec.js b/examples/sites/demos/pc/app/color/main-color.spec.js
deleted file mode 100644
index d5f1cbc7d..000000000
--- a/examples/sites/demos/pc/app/color/main-color.spec.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('主色彩', async ({ page }) => {
-  await page.goto('color#main-color')
-  await expect(page.getByText('bg-primary-normal')).toHaveClass(/bg-primary-normal/)
-  await expect(page.getByText('bg-primary-hover')).toHaveClass(/bg-primary-hover/)
-  await expect(page.getByText('bg-primary-active')).toHaveClass(/bg-primary-active/)
-  await expect(page.getByText('bg-btn-active')).toHaveClass(/bg-btn-active/)
-})
diff --git a/examples/sites/demos/pc/app/color/main-color.vue b/examples/sites/demos/pc/app/color/main-color.vue
deleted file mode 100644
index ffa01511e..000000000
--- a/examples/sites/demos/pc/app/color/main-color.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <tiny-row>
-    <tiny-col :span="2" class="tiny-color bg-primary-normal"> bg-primary-normal </tiny-col>
-    <tiny-col :span="2" class="tiny-color bg-primary-hover"> bg-primary-hover </tiny-col>
-    <tiny-col :span="2" class="tiny-color bg-primary-active"> bg-primary-active </tiny-col>
-    <tiny-col :span="2" class="tiny-color bg-btn-active">bg-btn-active</tiny-col>
-  </tiny-row>
-</template>
-
-<script lang="jsx">
-import { Col, Row } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyCol: Col,
-    TinyRow: Row
-  }
-}
-</script>
-
-<style scoped>
-.tiny-row {
-  margin-bottom: 40px;
-}
-
-.tiny-color {
-  height: 80px;
-  margin: 10px;
-  line-height: 80px;
-  color: #fff;
-  text-align: center;
-  min-width: 175px;
-  font-size: 14px;
-  display: inline-block;
-}
-
-.tiny-color.bg-primary-normal {
-  background-color: var(--ti-common-color-line-active);
-}
-
-.tiny-color.bg-primary-hover {
-  background-color: #40a9ff;
-}
-
-.tiny-color.bg-primary-active {
-  background-color: #096dd9;
-}
-
-.tiny-color.bg-btn-active {
-  color: #333;
-  background-color: #e6f7ff;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/color/neutral-color-composition-api.vue b/examples/sites/demos/pc/app/color/neutral-color-composition-api.vue
deleted file mode 100644
index 74e50680d..000000000
--- a/examples/sites/demos/pc/app/color/neutral-color-composition-api.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-  <tiny-layout>
-    <tiny-row>
-      <tiny-col :span="2" class="tiny-color bg-gray-navigation"> bg-gray-navigation </tiny-col>
-      <tiny-col :span="2" class="tiny-color bg-gray-darker"> bg-gray-darker </tiny-col>
-      <tiny-col :span="2" class="tiny-color bg-gray-dark">bg-gray-dark</tiny-col>
-      <tiny-col :span="2" class="tiny-color bg-gray-normal"> bg-gray-normal </tiny-col>
-    </tiny-row>
-    <tiny-row>
-      <tiny-col :span="2" class="tiny-color bg-gray-light">bg-gray-light</tiny-col>
-      <tiny-col :span="2" class="tiny-color bg-gray-lighter"> bg-gray-lighter </tiny-col>
-      <tiny-col :span="2" class="tiny-color bg-gray-background"> bg-gray-background </tiny-col>
-      <tiny-col :span="2" class="tiny-color bg-light">bg-light</tiny-col>
-    </tiny-row>
-  </tiny-layout>
-</template>
-
-<script setup lang="jsx">
-import { Col as TinyCol, Row as TinyRow, Layout as TinyLayout } from '@opentiny/vue'
-</script>
-
-<style scoped>
-.tiny-row {
-  margin-bottom: 40px;
-}
-
-.tiny-color {
-  height: 80px;
-  margin: 10px;
-  line-height: 80px;
-  color: #fff;
-  text-align: center;
-  min-width: 175px;
-  font-size: 14px;
-  display: inline-block;
-}
-
-.tiny-color.bg-gray-navigation {
-  background-color: #2e3243;
-}
-
-.tiny-color.bg-gray-darker {
-  background-color: #333333;
-}
-
-.tiny-color.bg-gray-dark {
-  background-color: #666666;
-}
-
-.tiny-color.bg-gray-normal {
-  background-color: #999999;
-}
-
-.tiny-color.bg-gray-light {
-  background-color: #bfbfbf;
-  color: #333;
-}
-
-.tiny-color.bg-gray-lighter {
-  background-color: #d9d9d9;
-  color: #333;
-}
-
-.tiny-color.bg-gray-background {
-  background-color: #f1f1f1;
-  color: #333;
-}
-
-.tiny-color.bg-light {
-  background-color: #ffffff;
-  color: #333;
-  border: solid 1px #ccc;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/color/neutral-color.spec.js b/examples/sites/demos/pc/app/color/neutral-color.spec.js
deleted file mode 100644
index 1fdb83d62..000000000
--- a/examples/sites/demos/pc/app/color/neutral-color.spec.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('中性色', async ({ page }) => {
-  await page.goto('color#neutral-color')
-  await expect(page.getByText('bg-gray-navigation')).toHaveClass(/bg-gray-navigation/)
-  await expect(page.getByText('bg-gray-darker')).toHaveClass(/bg-gray-darker/)
-  await expect(page.getByText('bg-gray-dark').nth(1)).toHaveClass(/bg-gray-dark/)
-  await expect(page.getByText('bg-gray-normal')).toHaveClass(/bg-gray-normal/)
-})
diff --git a/examples/sites/demos/pc/app/color/neutral-color.vue b/examples/sites/demos/pc/app/color/neutral-color.vue
deleted file mode 100644
index 1256224f4..000000000
--- a/examples/sites/demos/pc/app/color/neutral-color.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-  <tiny-layout>
-    <tiny-row>
-      <tiny-col :span="2" class="tiny-color bg-gray-navigation"> bg-gray-navigation </tiny-col>
-      <tiny-col :span="2" class="tiny-color bg-gray-darker"> bg-gray-darker </tiny-col>
-      <tiny-col :span="2" class="tiny-color bg-gray-dark">bg-gray-dark</tiny-col>
-      <tiny-col :span="2" class="tiny-color bg-gray-normal"> bg-gray-normal </tiny-col>
-    </tiny-row>
-    <tiny-row>
-      <tiny-col :span="2" class="tiny-color bg-gray-light">bg-gray-light</tiny-col>
-      <tiny-col :span="2" class="tiny-color bg-gray-lighter"> bg-gray-lighter </tiny-col>
-      <tiny-col :span="2" class="tiny-color bg-gray-background"> bg-gray-background </tiny-col>
-      <tiny-col :span="2" class="tiny-color bg-light">bg-light</tiny-col>
-    </tiny-row>
-  </tiny-layout>
-</template>
-
-<script lang="jsx">
-import { Col, Row, Layout } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyCol: Col,
-    TinyRow: Row,
-    TinyLayout: Layout
-  }
-}
-</script>
-
-<style scoped>
-.tiny-row {
-  margin-bottom: 40px;
-}
-
-.tiny-color {
-  height: 80px;
-  margin: 10px;
-  line-height: 80px;
-  color: #fff;
-  text-align: center;
-  min-width: 175px;
-  font-size: 14px;
-  display: inline-block;
-}
-
-.tiny-color.bg-gray-navigation {
-  background-color: #2e3243;
-}
-
-.tiny-color.bg-gray-darker {
-  background-color: #333333;
-}
-
-.tiny-color.bg-gray-dark {
-  background-color: #666666;
-}
-
-.tiny-color.bg-gray-normal {
-  background-color: #999999;
-}
-
-.tiny-color.bg-gray-light {
-  background-color: #bfbfbf;
-  color: #333;
-}
-
-.tiny-color.bg-gray-lighter {
-  background-color: #d9d9d9;
-  color: #333;
-}
-
-.tiny-color.bg-gray-background {
-  background-color: #f1f1f1;
-  color: #333;
-}
-
-.tiny-color.bg-light {
-  background-color: #ffffff;
-  color: #333;
-  border: solid 1px #ccc;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/color/webdoc/color.cn.md b/examples/sites/demos/pc/app/color/webdoc/color.cn.md
deleted file mode 100644
index a0252a50b..000000000
--- a/examples/sites/demos/pc/app/color/webdoc/color.cn.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Color 色彩
----
-
-# Color 色彩
-
-<div>Color 色彩</div>
diff --git a/examples/sites/demos/pc/app/color/webdoc/color.en.md b/examples/sites/demos/pc/app/color/webdoc/color.en.md
deleted file mode 100644
index e0efa419a..000000000
--- a/examples/sites/demos/pc/app/color/webdoc/color.en.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Color
----
-
-# Color
-
-<div>Color</div>
diff --git a/examples/sites/demos/pc/app/color/webdoc/color.js b/examples/sites/demos/pc/app/color/webdoc/color.js
deleted file mode 100644
index 330e918c9..000000000
--- a/examples/sites/demos/pc/app/color/webdoc/color.js
+++ /dev/null
@@ -1,42 +0,0 @@
-export default {
-  column: '2',
-  owner: '',
-  demos: [
-    {
-      demoId: 'main-color',
-      name: {
-        'zh-CN': '主色彩',
-        'en-US': 'Main Color'
-      },
-      desc: {
-        'zh-CN': '详细用法参考如下示例',
-        'en-US': 'For details, see the following example.'
-      },
-      codeFiles: ['main-color.vue']
-    },
-    {
-      demoId: 'auxiliary-color',
-      name: {
-        'zh-CN': '辅助色',
-        'en-US': 'Auxiliary Color'
-      },
-      desc: {
-        'zh-CN': '详细用法参考如下示例',
-        'en-US': 'For details, see the following example.'
-      },
-      codeFiles: ['auxiliary-color.vue']
-    },
-    {
-      demoId: 'neutral-color',
-      name: {
-        'zh-CN': '中性色',
-        'en-US': 'Neutral Color'
-      },
-      desc: {
-        'zh-CN': '详细用法参考如下示例',
-        'en-US': 'For details, see the following example.'
-      },
-      codeFiles: ['neutral-color.vue']
-    }
-  ]
-}
diff --git a/examples/sites/demos/pc/app/font/Font-usage-specifications-composition-api.vue b/examples/sites/demos/pc/app/font/Font-usage-specifications-composition-api.vue
deleted file mode 100644
index 54ecded8d..000000000
--- a/examples/sites/demos/pc/app/font/Font-usage-specifications-composition-api.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <tiny-layout class="tiny-font">
-    <tiny-row class="row-font-css font-38-css">
-      <tiny-col :span="2">Regular</tiny-col>
-      <tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
-    </tiny-row>
-    <tiny-row class="row-font-css font-30-css">
-      <tiny-col :span="2">Regular</tiny-col>
-      <tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
-    </tiny-row>
-    <tiny-row class="row-font-css font-24-css">
-      <tiny-col :span="2">Regular</tiny-col>
-      <tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
-    </tiny-row>
-    <tiny-row class="row-font-css font-20-css">
-      <tiny-col :span="2">Regular</tiny-col>
-      <tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
-    </tiny-row>
-    <tiny-row class="row-font-css font-16-css">
-      <tiny-col :span="2">Regular</tiny-col>
-      <tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
-    </tiny-row>
-    <tiny-row class="row-font-css font-14-css">
-      <tiny-col :span="2">Regular</tiny-col>
-      <tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
-    </tiny-row>
-    <tiny-row class="row-font-css font-12-css">
-      <tiny-col :span="2">Regular</tiny-col>
-      <tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
-    </tiny-row>
-  </tiny-layout>
-</template>
-
-<script setup lang="jsx">
-import { Col as TinyCol, Row as TinyRow, Layout as TinyLayout } from '@opentiny/vue'
-</script>
-
-<style scoped>
-.row-font-css {
-  margin: 16px 0;
-  display: block;
-}
-
-.font-38-css {
-  font-size: 38px;
-}
-
-.font-30-css {
-  font-size: 30px;
-}
-
-.font-24-css {
-  font-size: 24px;
-}
-
-.font-20-css {
-  font-size: 20px;
-}
-
-.font-16-css {
-  font-size: 16px;
-}
-
-.font-14-css {
-  font-size: 14px;
-}
-
-.font-12-css {
-  font-size: 12px;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/font/Font-usage-specifications.vue b/examples/sites/demos/pc/app/font/Font-usage-specifications.vue
deleted file mode 100644
index 8b202dc0e..000000000
--- a/examples/sites/demos/pc/app/font/Font-usage-specifications.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <tiny-layout class="tiny-font">
-    <tiny-row class="row-font-css font-38-css">
-      <tiny-col :span="2">Regular</tiny-col>
-      <tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
-    </tiny-row>
-    <tiny-row class="row-font-css font-30-css">
-      <tiny-col :span="2">Regular</tiny-col>
-      <tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
-    </tiny-row>
-    <tiny-row class="row-font-css font-24-css">
-      <tiny-col :span="2">Regular</tiny-col>
-      <tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
-    </tiny-row>
-    <tiny-row class="row-font-css font-20-css">
-      <tiny-col :span="2">Regular</tiny-col>
-      <tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
-    </tiny-row>
-    <tiny-row class="row-font-css font-16-css">
-      <tiny-col :span="2">Regular</tiny-col>
-      <tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
-    </tiny-row>
-    <tiny-row class="row-font-css font-14-css">
-      <tiny-col :span="2">Regular</tiny-col>
-      <tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
-    </tiny-row>
-    <tiny-row class="row-font-css font-12-css">
-      <tiny-col :span="2">Regular</tiny-col>
-      <tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
-    </tiny-row>
-  </tiny-layout>
-</template>
-
-<script lang="jsx">
-import { Col, Row, Layout } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyCol: Col,
-    TinyRow: Row,
-    TinyLayout: Layout
-  }
-}
-</script>
-
-<style scoped>
-.row-font-css {
-  margin: 16px 0;
-  display: block;
-}
-
-.font-38-css {
-  font-size: 38px;
-}
-
-.font-30-css {
-  font-size: 30px;
-}
-
-.font-24-css {
-  font-size: 24px;
-}
-
-.font-20-css {
-  font-size: 20px;
-}
-
-.font-16-css {
-  font-size: 16px;
-}
-
-.font-14-css {
-  font-size: 14px;
-}
-
-.font-12-css {
-  font-size: 12px;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/font/chinese-font-set-composition-api.vue b/examples/sites/demos/pc/app/font/chinese-font-set-composition-api.vue
deleted file mode 100644
index 67bb0a5c3..000000000
--- a/examples/sites/demos/pc/app/font/chinese-font-set-composition-api.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <tiny-layout class="tiny-font">
-    <span>用户体验</span>
-    <p>微软雅黑</p>
-  </tiny-layout>
-</template>
-
-<script setup lang="jsx">
-import { Layout as TinyLayout } from '@opentiny/vue'
-</script>
-
-<style scoped>
-.tiny-font span {
-  font-size: 14px;
-  line-height: 20px;
-}
-.tiny-font p {
-  font-size: 24px;
-  line-height: 48px;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/font/chinese-font-set.vue b/examples/sites/demos/pc/app/font/chinese-font-set.vue
deleted file mode 100644
index a1a3fa8aa..000000000
--- a/examples/sites/demos/pc/app/font/chinese-font-set.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <tiny-layout class="tiny-font">
-    <span>用户体验</span>
-    <p>微软雅黑</p>
-  </tiny-layout>
-</template>
-
-<script lang="jsx">
-import { Layout } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyLayout: Layout
-  }
-}
-</script>
-
-<style scoped>
-.tiny-font span {
-  font-size: 14px;
-  line-height: 20px;
-}
-.tiny-font p {
-  font-size: 24px;
-  line-height: 48px;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/font/english-fonts-composition-api.vue b/examples/sites/demos/pc/app/font/english-fonts-composition-api.vue
deleted file mode 100644
index 2194e1f65..000000000
--- a/examples/sites/demos/pc/app/font/english-fonts-composition-api.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <tiny-layout class="tiny-font">
-    <span>User Experience Design</span>
-    <p>Helvetica</p>
-  </tiny-layout>
-</template>
-
-<script setup lang="jsx">
-import { Layout as TinyLayout } from '@opentiny/vue'
-</script>
-
-<style scoped>
-.tiny-font span {
-  font-size: 14px;
-  line-height: 20px;
-}
-.tiny-font p {
-  font-size: 24px;
-  line-height: 48px;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/font/english-fonts.vue b/examples/sites/demos/pc/app/font/english-fonts.vue
deleted file mode 100644
index 00a1edbcb..000000000
--- a/examples/sites/demos/pc/app/font/english-fonts.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <tiny-layout class="tiny-font">
-    <span>User Experience Design</span>
-    <p>Helvetica</p>
-  </tiny-layout>
-</template>
-
-<script lang="jsx">
-import { Layout } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyLayout: Layout
-  }
-}
-</script>
-
-<style scoped>
-.tiny-font span {
-  font-size: 14px;
-  line-height: 20px;
-}
-.tiny-font p {
-  font-size: 24px;
-  line-height: 48px;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/font/webdoc/font.cn.md b/examples/sites/demos/pc/app/font/webdoc/font.cn.md
deleted file mode 100644
index 7816ece36..000000000
--- a/examples/sites/demos/pc/app/font/webdoc/font.cn.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Font 字体
----
-
-# Font 字体
-
-<div>Font 字体</div>
diff --git a/examples/sites/demos/pc/app/font/webdoc/font.en.md b/examples/sites/demos/pc/app/font/webdoc/font.en.md
deleted file mode 100644
index 3921abcfa..000000000
--- a/examples/sites/demos/pc/app/font/webdoc/font.en.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Font
----
-
-# Font
-
-<div>Font</div>
diff --git a/examples/sites/demos/pc/app/font/webdoc/font.js b/examples/sites/demos/pc/app/font/webdoc/font.js
deleted file mode 100644
index 3b23485d1..000000000
--- a/examples/sites/demos/pc/app/font/webdoc/font.js
+++ /dev/null
@@ -1,42 +0,0 @@
-export default {
-  column: '1',
-  owner: '',
-  demos: [
-    {
-      demoId: 'chinese-font-set',
-      name: {
-        'zh-CN': '中文字体集',
-        'en-US': 'Chinese font set'
-      },
-      desc: {
-        'zh-CN': '详细用法参考如下示例',
-        'en-US': 'For details, see the following example.'
-      },
-      codeFiles: ['chinese-font-set.vue']
-    },
-    {
-      demoId: 'english-fonts',
-      name: {
-        'zh-CN': '英文字体',
-        'en-US': 'English font'
-      },
-      desc: {
-        'zh-CN': '详细用法参考如下示例',
-        'en-US': 'For details, see the following example.'
-      },
-      codeFiles: ['english-fonts.vue']
-    },
-    {
-      demoId: 'Font-usage-specifications',
-      name: {
-        'zh-CN': '字体使用规范',
-        'en-US': 'Font Usage Specifications'
-      },
-      desc: {
-        'zh-CN': '详细用法参考如下示例',
-        'en-US': 'For details, see the following example.'
-      },
-      codeFiles: ['Font-usage-specifications.vue']
-    }
-  ]
-}
diff --git a/examples/sites/demos/pc/menus.js b/examples/sites/demos/pc/menus.js
index dfe167e01..3206ff9fe 100644
--- a/examples/sites/demos/pc/menus.js
+++ b/examples/sites/demos/pc/menus.js
@@ -80,9 +80,7 @@ export const cmpMenus = [
     'children': [
       { 'nameCn': '按钮', 'name': 'Button', 'key': 'button' },
       { 'nameCn': '按钮组', 'name': 'ButtonGroup', 'key': 'button-group' },
-      { 'nameCn': '色彩', 'name': 'Color', 'key': 'color' },
       { 'nameCn': '容器布局', 'name': 'Container', 'key': 'container' },
-      { 'nameCn': '字体', 'name': 'Font', 'key': 'font' },
       { 'nameCn': '图标', 'name': 'Icon', 'key': 'icon' },
       { 'nameCn': '栅格布局', 'name': 'Layout', 'key': 'layout' },
       { 'nameCn': '链接', 'name': 'Link', 'key': 'link' },
diff --git a/examples/sites/src/tools/useTheme.js b/examples/sites/src/tools/useTheme.js
index 9e0907ecc..ef0c5741d 100644
--- a/examples/sites/src/tools/useTheme.js
+++ b/examples/sites/src/tools/useTheme.js
@@ -1,9 +1,7 @@
 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 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'
@@ -30,9 +28,9 @@ import starrySkyIcon from '@/assets/images/starry-sky-icon.png'
 
 const themeMap = {
   [DEFAULT_THEME]: null,
-  [AURORA_THEME]: tinyAuroraTheme,
-  [SMB_THEME]: tinySmbTheme,
-  [INFINITY_THEME]: tinyInfinityTheme
+  [AURORA_THEME]: null,
+  [SMB_THEME]: null,
+  [INFINITY_THEME]: null
 }
 
 const isEn = appData.lang === 'enUS'
@@ -69,9 +67,9 @@ const themeData = [
 ]
 
 const designConfigMap = {
-  [DEFAULT_THEME]: {},
-  [INFINITY_THEME]: {},
-  [AURORA_THEME]: designAuroraConfig,
+  [DEFAULT_THEME]: designSmbConfig,
+  [INFINITY_THEME]: designSmbConfig,
+  [AURORA_THEME]: designSmbConfig,
   [SMB_THEME]: designSmbConfig
 }
 
diff --git a/examples/sites/src/views/components/float-settings.vue b/examples/sites/src/views/components/float-settings.vue
deleted file mode 100644
index e49437f81..000000000
--- a/examples/sites/src/views/components/float-settings.vue
+++ /dev/null
@@ -1,426 +0,0 @@
-<template>
-  <div
-    ref="floatSettings"
-    :class="['float-settings', { 'float-settings--aside': isSettingsAside }]"
-    :style="settingsStyle"
-  >
-    <!-- 切换主题样式 -->
-    <tiny-popover
-      width="404"
-      placement="left-end"
-      trigger="click"
-      :visible-arrow="false"
-      popper-class="theme-settings-popover"
-    >
-      <div class="theme-settings-menu">
-        <div class="theme-settings-title">{{ i18nByKey('changeTheme') }}</div>
-        <div
-          v-for="(item, index) in themeData"
-          :key="item.text + index"
-          :class="['theme-option-list', { 'is-active-popover': item.value === currentThemeKey }]"
-          :style="{ backgroundImage: 'url(' + item.bgImage + ')' }"
-          @click="themeItemClick(item)"
-        >
-          <div class="theme-option-list-icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></div>
-          <div>
-            <div class="theme-option-list-text">
-              {{ item.text }}
-            </div>
-            <div class="theme-option-list-tips">
-              {{ item.tips }}
-            </div>
-          </div>
-        </div>
-      </div>
-      <template #reference>
-        <div class="settings-btn theme-change-button">
-          <theme-settings-icon class="settings-icon theme-settings-icon"></theme-settings-icon>
-        </div>
-      </template>
-    </tiny-popover>
-
-    <!-- demo风格设置 -->
-    <tiny-popover
-      v-if="!templateModeState.isSaas"
-      width="180"
-      placement="left-end"
-      trigger="manual"
-      :visible-arrow="false"
-      v-model="demoStyleVisible"
-      popper-class="opt-menu style-settings-menu theme-settings-popover"
-    >
-      <div v-for="(item, index) in styleSettings" :key="index" class="style-settings-item">
-        <p class="style-settings-title">{{ item.title }}</p>
-        <tiny-radio-group
-          v-model="apiModeState[item.name]"
-          class="style-settings-options-group"
-          @change="onSettingsChange(item.name)"
-        >
-          <tiny-radio v-for="option in item.options" :key="option" :label="option.value">{{ option.text }}</tiny-radio>
-        </tiny-radio-group>
-      </div>
-      <template #reference>
-        <div
-          class="settings-btn style-settings-btn"
-          @click="demoStyleVisible = !demoStyleVisible"
-          @blur="demoStyleVisible = false"
-        >
-          <style-settings-icon class="settings-icon style-settings-icon"></style-settings-icon>
-        </div>
-      </template>
-    </tiny-popover>
-
-    <!-- 返回顶部 -->
-    <div v-show="showBackTop" @click="onBackTop">
-      <tiny-tooltip
-        :content="i18nByKey('backTop')"
-        :placement="isSettingsAside ? 'left' : 'right'"
-        popper-class="docs-tooltip"
-        effect="light"
-      >
-        <div class="settings-btn back-top-btn">
-          <icon-up-ward class="settings-icon"></icon-up-ward>
-        </div>
-      </tiny-tooltip>
-    </div>
-  </div>
-</template>
-
-<script>
-import { defineComponent, reactive, toRefs, onMounted, onUnmounted, watch, nextTick, ref } from 'vue'
-import { Tooltip, Radio, RadioGroup, Popover, Notify } from '@opentiny/vue'
-import { iconUpWard } from '@opentiny/vue-icon'
-import debounce from '@opentiny/vue-renderless/common/deps/debounce'
-import { i18nByKey, useApiMode, useTemplateMode } from '@/tools'
-import useTheme from '@/tools/useTheme'
-import { router } from '@/router'
-import useStyleSettings from '@/tools/useStyleSettings'
-import ThemeSettingsIcon from '@/assets/images/theme-settings.svg'
-import StyleSettingsIcon from '@/assets/images/style-settings.svg'
-
-export default defineComponent({
-  name: 'FloatSettings',
-  components: {
-    TinyTooltip: Tooltip,
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup,
-    IconUpWard: iconUpWard(),
-    TinyPopover: Popover,
-    ThemeSettingsIcon,
-    StyleSettingsIcon
-  },
-  setup() {
-    const DEFAULT_BOTTOM_VAL = '10vh'
-    const { getThemeData, changeTheme, currentThemeKey } = useTheme()
-    const { apiModeState, apiModeFn } = useApiMode()
-    const { getStyleSettings } = useStyleSettings()
-    const { templateModeState } = useTemplateMode()
-    const floatSettings = ref(null)
-    const isPlus = import.meta.env.VITE_APP_MODE === 'plus'
-
-    const state = reactive({
-      demoStyleVisible: false,
-      themeData: [],
-      styleSettings: getStyleSettings(i18nByKey),
-      settingsStyle: {
-        bottom: DEFAULT_BOTTOM_VAL
-      },
-      showBackTop: false, // 是否显示返回顶部按钮
-      initBottomVal: null, // 初始底部偏移
-      isSettingsAside: false // 是否贴边
-    })
-    let isShowTip = false
-    const showTip = () => {
-      Notify({
-        type: 'info',
-        title: '请注意',
-        message: '主题切换成功，如有部分主题样式不生效，请尝试手动刷新页面即可',
-        position: 'bottom-right',
-        duration: 3000
-      })
-      isShowTip = true
-    }
-
-    if (isPlus) {
-      state.styleSettings = state.styleSettings.filter((item) => item.name !== 'apiMode')
-      apiModeState.apiMode = 'Options'
-    }
-
-    const funcs = {
-      onBackTop() {
-        document.getElementById('doc-layout').scrollTo({
-          top: 0,
-          left: 0,
-          behavior: 'smooth'
-        })
-      },
-      onSettingsChange(modeType) {
-        switch (modeType) {
-          case 'localeMode': {
-            apiModeFn.changeLocaleMode(apiModeState[modeType])
-            break
-          }
-          case 'apiMode': {
-            apiModeFn.changeApiMode(apiModeState[modeType])
-            break
-          }
-          case 'demoMode': {
-            apiModeFn.changeDemoMode(apiModeState[modeType])
-            break
-          }
-        }
-      },
-
-      // 主题切换功能
-      themeItemClick(node) {
-        const val = node?.value || 'tiny-smb-theme'
-        changeTheme(val)
-
-        if (!isShowTip) {
-          showTip()
-        }
-      }
-    }
-
-    const getThemeOptions = () => {
-      const themeData = getThemeData().map((item) => ({
-        value: item.value[0],
-        text: item.label,
-        tips: item.tips,
-        icon: item.icon,
-        bgImage: item.bgImage
-      }))
-      state.themeData = themeData
-    }
-
-    const setScrollListener = () => {
-      nextTick(() => {
-        const docLayout = document.getElementById('doc-layout')
-        const nav = document.querySelector('.nav')
-        if (docLayout) {
-          docLayout.onscroll = debounce(100, false, () => {
-            const {
-              scrollTop: layoutScrollTop,
-              scrollHeight: layoutScrollHeight,
-              clientHeight: layoutHeight
-            } = 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
-
-            if (!state.initBottomVal) {
-              state.initBottomVal = currSettingsBottom
-            }
-            if (footerVisibleHeight > state.initBottomVal - 40) {
-              state.settingsStyle.bottom = `${footerVisibleHeight + 20}px`
-            } else {
-              state.settingsStyle.bottom = DEFAULT_BOTTOM_VAL
-            }
-          })
-        }
-      })
-    }
-
-    const removeScrollListener = () => {
-      const docLayout = document.getElementById('doc-layout') || {}
-      docLayout.onscroll = null
-    }
-
-    watch(
-      () => router.currentRoute.value,
-      (newVal) => {
-        const { path } = newVal || {}
-        state.isSettingsAside = ['overview', 'docs'].find((i) => path.includes(i))
-      },
-      {
-        immediate: true
-      }
-    )
-
-    onMounted(() => {
-      getThemeOptions()
-      setScrollListener()
-    })
-
-    onUnmounted(() => {
-      removeScrollListener()
-    })
-
-    return {
-      ...toRefs(state),
-      ...funcs,
-      templateModeState,
-      i18nByKey,
-      apiModeState,
-      currentThemeKey,
-      floatSettings
-    }
-  }
-})
-</script>
-
-<style lang="less">
-.float-settings {
-  position: fixed;
-  right: 200px;
-  height: 140px;
-  display: flex;
-  flex-direction: column;
-  column-gap: 12px;
-  z-index: var(--docs-float-settings-zindex);
-  transition: all 0.3s linear;
-
-  &.float-settings--aside {
-    right: 24px;
-  }
-
-  .tiny-dropdown__trigger .tiny-dropdown__title {
-    line-height: 1;
-    margin-right: 0;
-  }
-
-  .settings-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    margin-bottom: 8px;
-    border: 1px solid #f0f0f0;
-    border-radius: 12px;
-    background-color: #fff;
-    cursor: pointer;
-
-    &:hover {
-      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
-
-      .settings-icon {
-        color: #191919;
-        fill: #191919;
-      }
-    }
-
-    &.style-settings-btn {
-      margin-bottom: 24px;
-    }
-
-    &.back-top-btn {
-      margin-bottom: 0;
-    }
-
-    .settings-icon {
-      width: 16px;
-      height: 16px;
-      color: #595959;
-    }
-  }
-}
-
-.opt-menu {
-  width: 154px;
-  padding: 12px 0;
-  border-radius: 12px;
-  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
-
-  &.style-settings-menu {
-    padding: 14px;
-
-    .style-settings-item {
-      padding-left: 12px;
-
-      .style-settings-title {
-        margin-bottom: 2px;
-        font-size: 14px;
-        line-height: 32px;
-        font-weight: 600;
-        color: #000000;
-      }
-
-      .style-settings-options-group {
-        padding-left: 4px;
-        margin-bottom: 6px;
-        display: flex;
-        flex-direction: column;
-
-        .tiny-radio .tiny-radio__label {
-          font-size: 14px;
-          line-height: 32px;
-        }
-      }
-
-      &:not(:last-child) {
-        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-      }
-    }
-  }
-}
-.tiny-popover.tiny-popper.theme-settings-popover {
-  border-radius: 12px;
-  background-color: #ffffff;
-}
-
-.theme-settings-menu {
-  width: 404px;
-  display: flex;
-  padding: 15px 32px;
-  flex-direction: column;
-  margin: 0;
-  .theme-settings-title {
-    height: 20px;
-    line-height: 20px;
-    color: #000000;
-    font-weight: 700;
-  }
-}
-.theme-option-list {
-  display: flex;
-  align-items: center;
-  justify-content: start;
-  background-color: aliceblue;
-  cursor: pointer;
-  margin-top: 20px;
-  width: 308px;
-  height: 64px;
-  border: 1px solid #ffffff;
-  border-radius: 8px;
-  background-repeat: no-repeat;
-  .theme-option-list-icon {
-    width: 32px;
-    height: 32px;
-    margin: 16px 24px;
-  }
-  .theme-option-list-text {
-    height: 22px;
-    line-height: 22px;
-    font-size: 14px;
-    color: #202e54;
-    font-weight: 700;
-  }
-  .theme-option-list-tips {
-    height: 20px;
-    line-height: 20px;
-    font-size: 14px;
-    color: #808080;
-    font-weight: 500;
-  }
-}
-.theme-option-list:hover {
-  border-color: rgba(0, 0, 0, 0.05);
-  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
-}
-.is-active-popover {
-  border-color: #1476ff;
-}
-
-@media (max-width: 1279px) {
-  .float-settings {
-    right: 12px;
-  }
-}
-</style>
diff --git a/examples/vue3/package.json b/examples/vue3/package.json
index fc71eee9a..8b2df1f55 100644
--- a/examples/vue3/package.json
+++ b/examples/vue3/package.json
@@ -1,8 +1,8 @@
 {
   "name": "vue3-example",
   "type": "module",
-  "private": true,
   "version": "0.1.6-mf.0",
+  "private": true,
   "files": [
     "*"
   ],
@@ -21,26 +21,33 @@
     "@opentiny-internal/unplugin-virtual-template": "workspace:*",
     "@opentiny/vue": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
+    "@opentiny/vue-design-aurora": "workspace:~",
+    "@opentiny/vue-design-smb": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
     "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-theme": "workspace:~",
-    "@opentiny/vue-theme-saas": "workspace:~",
     "@opentiny/vue-theme-mobile": "workspace:~",
+    "@opentiny/vue-theme-saas": "workspace:~",
     "@opentiny/vue-vite-import": "workspace:~",
-    "@opentiny/vue-design-smb": "workspace:~",
-    "@opentiny/vue-design-aurora": "workspace:~",
     "@playwright/test": "~1.42.0",
+    "@tiptap/vue-3": "^2.1.0",
+    "@unocss/core": "^0.48.0",
+    "@unocss/preset-icons": "^0.61.9",
+    "@unocss/transformer-directives": "^0.48.0",
     "@vitejs/plugin-vue": "4.1.0",
     "@vitejs/plugin-vue-jsx": "^3.0.0",
     "@vitest/ui": "^0.31.0",
     "@vue/runtime-core": "3.2.31",
     "@vue/test-utils": "^2.2.7",
+    "js-sha256": "^0.9.0",
     "jsdom": "^21.0.0",
+    "onigasm": "^2.2.5",
     "postcss": "^8.4.16",
     "tailwindcss": "^3.2.4",
     "tailwindcss-vite-plugin": "^0.0.3",
     "typescript": "^5.0.0",
+    "unocss": "^0.61.9",
     "vite": "^4.3.8",
     "vite-plugin-checker": "^0.5.2",
     "vite-plugin-dynamic-import": "^1.2.4",
@@ -50,13 +57,6 @@
     "vite-svg-loader": "^3.6.0",
     "vitest": "^0.31.0",
     "vue": "^3.3.9",
-    "@tiptap/vue-3": "^2.1.0",
-    "vue-i18n": "^9.1.7",
-    "js-sha256": "^0.9.0",
-    "onigasm": "^2.2.5",
-    "unocss": "^0.61.9",
-    "@unocss/core": "^0.48.0",
-    "@unocss/preset-icons": "^0.61.9",
-    "@unocss/transformer-directives": "^0.48.0"
+    "vue-i18n": "^9.1.7"
   }
-}
\ No newline at end of file
+}