Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from
Dec 4, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7268c7c
fix(site): fix
shenjunjian Dec 3, 2024
2d363ae
fix(theme): add aurora theme of build scripts
shenjunjian Dec 4, 2024
6f8c43b
fix(site): add aurora-theme's route
shenjunjian Dec 4, 2024
8344b5a
fix(tooltip): fix
shenjunjian Dec 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions examples/sites/demos/pc/webdoc/theme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,9 +103,9 @@ themeTool.changeTheme(
)
```

<!-- ## OLD主题配置
## OLD主题配置

我们不建议用户继续使用旧主题，但对于历史项目，我们提供一组旧主题的`CSS变量`,需要用户在工程中适配。
我们不建议用户继续使用旧主题，对于历史项目，我们提供一组旧主题的`CSS变量`,需要用户在工程中适配。

```ts
import TinyThemeTool, { tinyOldTheme } from '@opentiny/vue-theme/theme-tool'
Expand All @@ -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>

## 历史版本的主题配置

Expand Down
7 changes: 6 additions & 1 deletion examples/sites/src/tools/useTheme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -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
}
}
)
}
Expand Down
4 changes: 3 additions & 1 deletion packages/theme/build/gulp-dist.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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、编译
Expand All @@ -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())
Expand Down
15 changes: 15 additions & 0 deletions packages/theme/build/release.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) // 打包发布用
Comment on lines +26 to +39
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider refactoring theme processing to reduce duplication

The aurora theme processing block duplicates the logic from the old theme processing. Consider extracting this into a reusable function to improve maintainability.

Here's a suggested refactor:

- // 2、读取 old-theme-index.js , dist/old-theme-index.less， 合并后写入 dist/ old-theme-index.js
- let jsStr = `
- export default {
-   id: 'tiny-old-theme',
-   name: 'OldTheme',
-   cnName: '旧的主题',
-   css: \`#CSS#\`
- }
- `
- let cssStr = fs.readFileSync(path.resolve(root, 'dist/old-theme-index.css'), 'utf8')
- 
- jsStr = jsStr.replace('#CSS#', cssStr)
- fs.writeFileSync(path.resolve(root, 'src/old-theme-index.js'), jsStr)
- 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)
- fs.writeFileSync(path.resolve(root, 'dist/aurora-theme-index.js'), jsStr)

+ function processTheme(themeConfig) {
+   const { id, name, cnName, filename } = themeConfig;
+   const jsStr = `
+   export default {
+     id: '${id}',
+     name: '${name}',
+     cnName: '${cnName}',
+     css: \`#CSS#\`
+   }
+   `;
+   
+   const cssStr = fs.readFileSync(path.resolve(root, `dist/${filename}.css`), 'utf8');
+   const finalJsStr = jsStr.replace('#CSS#', cssStr);
+   
+   fs.writeFileSync(path.resolve(root, `src/${filename}.js`), finalJsStr);
+   fs.writeFileSync(path.resolve(root, `dist/${filename}.js`), finalJsStr);
+ }
+ 
+ // Process themes
+ processTheme({
+   id: 'tiny-old-theme',
+   name: 'OldTheme',
+   cnName: '旧的主题',
+   filename: 'old-theme-index'
+ });
+ 
+ processTheme({
+   id: 'tiny-aurora-theme',
+   name: 'AuroraTheme',
+   cnName: '欧若拉主题',
+   filename: 'aurora-theme-index'
+ });

Committable suggestion skipped: line range outside the PR's diff.


// 3、复制 package.json
const content = fs.readFileSync(path.resolve(root, 'package.json'), 'utf8')
const packageJson = JSON.parse(content)
Expand Down
6 changes: 6 additions & 0 deletions packages/theme/src/aurora-theme-index.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions packages/theme/src/aurora-theme-index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import './base/aurora-theme.less';
3 changes: 2 additions & 1 deletion packages/theme/src/theme-tool.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import tinyOldTheme from './old-theme-index.js'
import tinyAuroraTheme from './aurora-theme-index.js'

export { tinyOldTheme }
export { tinyOldTheme, tinyAuroraTheme }

/**
* 动态切换文档或影子根节点的样式类
Expand Down
4 changes: 2 additions & 2 deletions packages/theme/src/tooltip/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
// 文本内容容器最大高度
Expand Down
Loading