fix(site): the aurora-theme switch function is added to the official website (#2604)

* fix(site): fix

* fix(theme): add aurora theme of build scripts

* fix(site): add aurora-theme's route

* fix(tooltip): fix

Author: shenjunjian

examples/sites/demos/pc/webdoc/theme.md

@@ -103,9 +103,9 @@ themeTool.changeTheme(
 )
 ```
 
-<!-- ## OLD主题配置
+## OLD主题配置
 
-我们不建议用户继续使用旧主题，但对于历史项目，我们提供一组旧主题的`CSS变量`,需要用户在工程中适配。
+我们不建议用户继续使用旧主题，对于历史项目，我们提供一组旧主题的`CSS变量`,需要用户在工程中适配。
 
 ```ts
 import TinyThemeTool, { tinyOldTheme } from '@opentiny/vue-theme/theme-tool'
@@ -116,8 +116,9 @@ const themeTool = new TinyThemeTool(tinyOldTheme)
 ```
 
 <div class="warning custom-block">
-   旧主题不能 100% 还原历史版本的所有细节，如果用户升级后有较大的影响，可以跟我们反馈，也可以回退使用<code> @opentiny/vue@3.18.0 </code> 版本。
-</div> -->
+  <p> 旧主题不能 100% 还原历史版本的所有细节，如果用户升级后有较大的影响，可以跟我们反馈，也可以回退使用<code> @opentiny/vue@3.18.0 </code> 版本。</p>
+  <p> 如果需要切换 <code>Aurora</code> 主题，可以从上面导出 <code>tinyAuroraTheme</code> 的主题。 </p>
+</div>
 
 ## 历史版本的主题配置
 

examples/sites/src/tools/useTheme.js

@@ -16,7 +16,7 @@ import oceanicIcon from '@/assets/images/oceanic-icon.png'
 
 import starrySky from '@/assets/images/starry-sky.png'
 import starrySkyIcon from '@/assets/images/starry-sky-icon.png'
-import TinyThemeTool, { tinyOldTheme } from '@opentiny/vue-theme/theme-tool'
+import TinyThemeTool, { tinyOldTheme, tinyAuroraTheme } from '@opentiny/vue-theme/theme-tool'
 
 const isEn = appData.lang === 'enUS'
 
@@ -106,6 +106,11 @@ const watchRoute = () => {
         themeTool.changeTheme(tinyOldTheme)
         loadedTheme = true
       }
+      if (!loadedTheme && val === 'aurora-theme') {
+        const themeTool = new TinyThemeTool()
+        themeTool.changeTheme(tinyAuroraTheme)
+        loadedTheme = true
+      }
     }
   )
 }

packages/theme/build/gulp-dist.js

@@ -33,6 +33,7 @@ function concatIndex(cb) {
 // 2、拼接所有组件的 old-theme.less 到一起   old-theme-index.less
 function concatOldTheme(cb) {
   _concatFiles('../src/*/old-theme.less', '../src/old-theme-index.less')
+  _concatFiles('../src/*/aurora-theme.less', '../src/aurora-theme-index.less')
   cb()
 }
 // 3、编译
@@ -41,7 +42,8 @@ gulp.task('compile', () => {
     .src([
       `${source}/**/index.less`, // 编译默认主题
       `${source}/index.less`,
-      `${source}/old-theme-index.less` // 编译旧主题
+      `${source}/old-theme-index.less`, // 编译旧主题
+      `${source}/aurora-theme-index.less` // 编译aurora主题
     ])
     .pipe(svgInline(svgInlineOption))
     .pipe(less())

packages/theme/build/release.js

@@ -23,6 +23,21 @@ jsStr = jsStr.replace('#CSS#', cssStr)
 fs.writeFileSync(path.resolve(root, 'src/old-theme-index.js'), jsStr) // 供开发时(pnpm site)， 可以访问到最新的定制主题变量
 fs.writeFileSync(path.resolve(root, 'dist/old-theme-index.js'), jsStr) // 打包发布用
 
+// 2.1、读取 aurora-theme-index.js , dist/aurora-theme-index.less， 合并后写入 dist/ aurora-theme-index.js
+jsStr = `
+export default {
+  id: 'tiny-aurora-theme',
+  name: 'AuroraTheme',
+  cnName: '欧若拉主题',
+  css: \`#CSS#\`
+}
+`
+cssStr = fs.readFileSync(path.resolve(root, 'dist/aurora-theme-index.css'), 'utf8')
+
+jsStr = jsStr.replace('#CSS#', cssStr)
+fs.writeFileSync(path.resolve(root, 'src/aurora-theme-index.js'), jsStr) // 供开发时(pnpm site)， 可以访问到最新的定制主题变量
+fs.writeFileSync(path.resolve(root, 'dist/aurora-theme-index.js'), jsStr) // 打包发布用
+
 // 3、复制 package.json
 const content = fs.readFileSync(path.resolve(root, 'package.json'), 'utf8')
 const packageJson = JSON.parse(content)

packages/theme/src/aurora-theme-index.js

@@ -0,0 +1 @@
+@import './base/aurora-theme.less';

packages/theme/src/aurora-theme-index.less

@@ -1,6 +1,7 @@
 import tinyOldTheme from './old-theme-index.js'
+import tinyAuroraTheme from './aurora-theme-index.js'
 
-export { tinyOldTheme }
+export { tinyOldTheme, tinyAuroraTheme }
 
 /**
  * 动态切换文档或影子根节点的样式类

packages/theme/src/theme-tool.js

@@ -70,9 +70,9 @@
   // 弹框阴影
   --tv-Tooltip-box-shadow: var(--tv-shadow-2-down);
   // 弹框垂直内边距
-  --tv-Tooltip-padding-y: 12px;
+  --tv-Tooltip-padding-y: var(--tv-space-lg);
   // 弹框水平内边距
-  --tv-Tooltip-padding-x: 16px;
+  --tv-Tooltip-padding-x: var(--tv-space-xl);
   // 文字提示错误图标色
   --tv-Tooltip-validate-icon-color: var(--tv-color-error-icon);
   // 文本内容容器最大高度