From 14ae3e80c455807b850761e87258b562618d0997 Mon Sep 17 00:00:00 2001 From: landaiqing Date: Mon, 3 Nov 2025 23:38:15 +0800 Subject: [PATCH] :sparkles: Beautify style and add automatic deployment scripts --- .github/workflows/deploy.yml | 66 +++++++++++ frontend/docs/.vitepress/config.ts | 12 +- frontend/docs/.vitepress/theme/index.css | 6 + frontend/docs/.vitepress/theme/index.ts | 2 +- .../docs/.vitepress/theme/style/badge.css | 21 ++++ frontend/docs/.vitepress/theme/style/blur.css | 73 ++++++++++++ frontend/docs/.vitepress/theme/style/grid.css | 40 +++++++ .../theme/{style.css => style/var.css} | 106 +++++++++--------- 8 files changed, 269 insertions(+), 57 deletions(-) create mode 100644 .github/workflows/deploy.yml create mode 100644 frontend/docs/.vitepress/theme/index.css create mode 100644 frontend/docs/.vitepress/theme/style/badge.css create mode 100644 frontend/docs/.vitepress/theme/style/blur.css create mode 100644 frontend/docs/.vitepress/theme/style/grid.css rename frontend/docs/.vitepress/theme/{style.css => style/var.css} (53%) diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..773cee8 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,66 @@ +# 构建 VitePress 站点并将其部署到 GitHub Pages 的示例工作流程 +# +name: Deploy VitePress site to Pages + +on: + # 在针对 `main` 分支的推送上运行。如果你 + # 使用 `master` 分支作为默认分支，请将其更改为 `master` + push: + branches: [master] + + # 允许你从 Actions 选项卡手动运行此工作流程 + workflow_dispatch: + +# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +# 只允许同时进行一次部署，跳过正在运行和最新队列之间的运行队列 +# 但是，不要取消正在进行的运行，因为我们希望允许这些生产部署完成 +concurrency: + group: pages + cancel-in-progress: false + +jobs: + # 构建工作 + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + with: + fetch-depth: 0 # 如果未启用 lastUpdated，则不需要 + # - uses: pnpm/action-setup@v3 # 如果使用 pnpm，请取消此区域注释 + # with: + # version: 9 + # - uses: oven-sh/setup-bun@v1 # 如果使用 Bun，请取消注释 + - name: Setup Node + uses: actions/setup-node@v4 + with: + node-version: 22 + cache: npm + - name: Setup Pages + uses: actions/configure-pages@v4 + - name: Install dependencies + run: cd frontend && npm ci + - name: Build with VitePress + run: cd frontend && npm run docs:build + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: frontend/docs/.vitepress/dist + + # 部署工作 + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + needs: build + runs-on: ubuntu-latest + name: Deploy + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 \ No newline at end of file diff --git a/frontend/docs/.vitepress/config.ts b/frontend/docs/.vitepress/config.ts index d4c244c..911a20c 100644 --- a/frontend/docs/.vitepress/config.ts +++ b/frontend/docs/.vitepress/config.ts @@ -66,7 +66,11 @@ export default defineConfig({ }, darkModeSwitchLabel: 'Appearance', sidebarMenuLabel: 'Menu', - returnToTopLabel: 'Return to top' + returnToTopLabel: 'Return to top', + footer: { + message: 'Released under the MIT License.', + copyright: 'Copyright © 2025-present landaiqing' + } } }, zh: { @@ -114,7 +118,11 @@ export default defineConfig({ }, darkModeSwitchLabel: '外观', sidebarMenuLabel: '菜单', - returnToTopLabel: '返回顶部' + returnToTopLabel: '返回顶部', + footer: { + message: 'Released under the MIT License.', + copyright: 'Copyright © 2025-present landaiqing' + } } } } diff --git a/frontend/docs/.vitepress/theme/index.css b/frontend/docs/.vitepress/theme/index.css new file mode 100644 index 0000000..c7390d0 --- /dev/null +++ b/frontend/docs/.vitepress/theme/index.css @@ -0,0 +1,6 @@ +@import "style/var.css"; +@import "style/blur.css"; +@import "style/badge.css"; +@import "style/grid.css"; + + diff --git a/frontend/docs/.vitepress/theme/index.ts b/frontend/docs/.vitepress/theme/index.ts index def4cfc..c70b832 100644 --- a/frontend/docs/.vitepress/theme/index.ts +++ b/frontend/docs/.vitepress/theme/index.ts @@ -2,7 +2,7 @@ import { h } from 'vue' import type { Theme } from 'vitepress' import DefaultTheme from 'vitepress/theme' -import './style.css' +import './index.css' export default { extends: DefaultTheme, diff --git a/frontend/docs/.vitepress/theme/style/badge.css b/frontend/docs/.vitepress/theme/style/badge.css new file mode 100644 index 0000000..72a91b8 --- /dev/null +++ b/frontend/docs/.vitepress/theme/style/badge.css @@ -0,0 +1,21 @@ +/* 提示框背景颜色 */ +:root { + --vp-custom-block-tip-bg: var(--vp-c-green-soft); +} + +/* 提示框 */ +.custom-block.tip { + border-color: var(--vp-c-green-2); +} + +/* 警告框 */ +.custom-block.warning { + /* border-color: #d97706; */ + border-color: var(--vp-c-yellow-2); +} + +/* 危险框 */ +.custom-block.danger { + /* border-color: #f43f5e; */ + border-color: var(--vp-c-red-2); +} \ No newline at end of file diff --git a/frontend/docs/.vitepress/theme/style/blur.css b/frontend/docs/.vitepress/theme/style/blur.css new file mode 100644 index 0000000..5655b72 --- /dev/null +++ b/frontend/docs/.vitepress/theme/style/blur.css @@ -0,0 +1,73 @@ +/* .vitepress/theme/style/blur.css */ +:root { + /* 首页导航 */ + .VPNavBar { + background-color: rgba(255, 255, 255, 0); + backdrop-filter: blur(10px); + } + + /* 文档页导航两侧 */ + .VPNavBar:not(.home) { + background-color: rgba(255, 255, 255, 0); + backdrop-filter: blur(10px); + } + + @media (min-width: 960px) { + /* 文档页导航两侧 */ + .VPNavBar:not(.home) { + background-color: rgba(255, 255, 255, 0); + backdrop-filter: blur(10px); + } + + /* 首页下滑后导航两侧 */ + .VPNavBar:not(.has-sidebar):not(.home.top) { + background-color: rgba(255, 255, 255, 0); + backdrop-filter: blur(10px); + } + } + + @media (min-width: 960px) { + /* 文档页导航中间 */ + .VPNavBar:not(.home.top) .content-body { + background-color: rgba(255, 255, 255, 0); + backdrop-filter: blur(10px); + } + + /* 首页下滑后导航中间 */ + .VPNavBar:not(.has-sidebar):not(.home.top) .content-body { + background-color: rgba(255, 255, 255, 0); + backdrop-filter: blur(10px); + } + } + + /* 分割线 */ + + @media (min-width: 960px) { + /* 文档页分割线 */ + .VPNavBar:not(.home.top) .divider-line { + background-color: rgba(255, 255, 255, 0); + backdrop-filter: blur(10px); + } + + /* 首页分割线 */ + .VPNavBar:not(.has-sidebar):not(.home.top) .divider { + background-color: rgba(255, 255, 255, 0); + backdrop-filter: blur(10px); + } + } + + /* 搜索框 VPNavBarSearchButton.vue */ + .DocSearch-Button { + background-color: rgba(255, 255, 255, 0); + backdrop-filter: blur(10px); + } + + /* 移动端大纲栏 */ + .VPLocalNav { + background-color: rgba(255, 255, 255, 0); + backdrop-filter: blur(10px); + /* 隐藏分割线 */ + /* border-bottom: 5px solid var(--vp-c-gutter); */ + border-bottom: 0px; + } +} \ No newline at end of file diff --git a/frontend/docs/.vitepress/theme/style/grid.css b/frontend/docs/.vitepress/theme/style/grid.css new file mode 100644 index 0000000..03789e5 --- /dev/null +++ b/frontend/docs/.vitepress/theme/style/grid.css @@ -0,0 +1,40 @@ +/** + * Grid Background + * 网格背景样式 - 为文档页面添加简约的网格背景 + * -------------------------------------------------------------------------- */ + +.VPDoc, +.VPHome { + position: relative; +} + +.VPDoc::before, +.VPHome::before { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + pointer-events: none; +} + +/* 亮色模式网格 */ +:root:not(.dark) .VPDoc::before, +:root:not(.dark) .VPHome::before { + background-image: + linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px), + linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px); + background-size: 60px 60px; +} + +/* 暗色模式网格 */ +.dark .VPDoc::before, +.dark .VPHome::before { + background-image: + linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); + background-size: 60px 60px; +} + diff --git a/frontend/docs/.vitepress/theme/style.css b/frontend/docs/.vitepress/theme/style/var.css similarity index 53% rename from frontend/docs/.vitepress/theme/style.css rename to frontend/docs/.vitepress/theme/style/var.css index 7fff2ba..70c91be 100644 --- a/frontend/docs/.vitepress/theme/style.css +++ b/frontend/docs/.vitepress/theme/style/var.css @@ -42,32 +42,31 @@ * - `danger`: Used to show error, or dangerous message to the users. Used * in custom container, badges, etc. * -------------------------------------------------------------------------- */ - :root { - --vp-c-default-1: var(--vp-c-gray-1); - --vp-c-default-2: var(--vp-c-gray-2); - --vp-c-default-3: var(--vp-c-gray-3); - --vp-c-default-soft: var(--vp-c-gray-soft); + --vp-c-default-1: var(--vp-c-gray-1); + --vp-c-default-2: var(--vp-c-gray-2); + --vp-c-default-3: var(--vp-c-gray-3); + --vp-c-default-soft: var(--vp-c-gray-soft); - --vp-c-brand-1: var(--vp-c-indigo-1); - --vp-c-brand-2: var(--vp-c-indigo-2); - --vp-c-brand-3: var(--vp-c-indigo-3); - --vp-c-brand-soft: var(--vp-c-indigo-soft); + --vp-c-brand-1: var(--vp-c-indigo-1); + --vp-c-brand-2: var(--vp-c-indigo-2); + --vp-c-brand-3: var(--vp-c-indigo-3); + --vp-c-brand-soft: var(--vp-c-indigo-soft); - --vp-c-tip-1: var(--vp-c-brand-1); - --vp-c-tip-2: var(--vp-c-brand-2); - --vp-c-tip-3: var(--vp-c-brand-3); - --vp-c-tip-soft: var(--vp-c-brand-soft); + --vp-c-tip-1: var(--vp-c-brand-1); + --vp-c-tip-2: var(--vp-c-brand-2); + --vp-c-tip-3: var(--vp-c-brand-3); + --vp-c-tip-soft: var(--vp-c-brand-soft); - --vp-c-warning-1: var(--vp-c-yellow-1); - --vp-c-warning-2: var(--vp-c-yellow-2); - --vp-c-warning-3: var(--vp-c-yellow-3); - --vp-c-warning-soft: var(--vp-c-yellow-soft); + --vp-c-warning-1: var(--vp-c-yellow-1); + --vp-c-warning-2: var(--vp-c-yellow-2); + --vp-c-warning-3: var(--vp-c-yellow-3); + --vp-c-warning-soft: var(--vp-c-yellow-soft); - --vp-c-danger-1: var(--vp-c-red-1); - --vp-c-danger-2: var(--vp-c-red-2); - --vp-c-danger-3: var(--vp-c-red-3); - --vp-c-danger-soft: var(--vp-c-red-soft); + --vp-c-danger-1: var(--vp-c-red-1); + --vp-c-danger-2: var(--vp-c-red-2); + --vp-c-danger-3: var(--vp-c-red-3); + --vp-c-danger-soft: var(--vp-c-red-soft); } /** @@ -75,15 +74,15 @@ * -------------------------------------------------------------------------- */ :root { - --vp-button-brand-border: transparent; - --vp-button-brand-text: var(--vp-c-white); - --vp-button-brand-bg: var(--vp-c-brand-3); - --vp-button-brand-hover-border: transparent; - --vp-button-brand-hover-text: var(--vp-c-white); - --vp-button-brand-hover-bg: var(--vp-c-brand-2); - --vp-button-brand-active-border: transparent; - --vp-button-brand-active-text: var(--vp-c-white); - --vp-button-brand-active-bg: var(--vp-c-brand-1); + --vp-button-brand-border: transparent; + --vp-button-brand-text: var(--vp-c-white); + --vp-button-brand-bg: var(--vp-c-brand-3); + --vp-button-brand-hover-border: transparent; + --vp-button-brand-hover-text: var(--vp-c-white); + --vp-button-brand-hover-bg: var(--vp-c-brand-2); + --vp-button-brand-active-border: transparent; + --vp-button-brand-active-text: var(--vp-c-white); + --vp-button-brand-active-bg: var(--vp-c-brand-1); } /** @@ -91,31 +90,31 @@ * -------------------------------------------------------------------------- */ :root { - --vp-home-hero-name-color: transparent; - --vp-home-hero-name-background: -webkit-linear-gradient( - 120deg, - #bd34fe 30%, - #41d1ff - ); + --vp-home-hero-name-color: transparent; + --vp-home-hero-name-background: -webkit-linear-gradient( + 120deg, + #bd34fe 30%, + #41d1ff + ); - --vp-home-hero-image-background-image: linear-gradient( - -45deg, - #bd34fe 50%, - #47caff 50% - ); - --vp-home-hero-image-filter: blur(44px); + --vp-home-hero-image-background-image: linear-gradient( + -45deg, + #bd34fe 50%, + #47caff 50% + ); + --vp-home-hero-image-filter: blur(44px); } @media (min-width: 640px) { - :root { - --vp-home-hero-image-filter: blur(56px); - } + :root { + --vp-home-hero-image-filter: blur(56px); + } } @media (min-width: 960px) { - :root { - --vp-home-hero-image-filter: blur(68px); - } + :root { + --vp-home-hero-image-filter: blur(68px); + } } /** @@ -123,10 +122,10 @@ * -------------------------------------------------------------------------- */ :root { - --vp-custom-block-tip-border: transparent; - --vp-custom-block-tip-text: var(--vp-c-text-1); - --vp-custom-block-tip-bg: var(--vp-c-brand-soft); - --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft); + --vp-custom-block-tip-border: transparent; + --vp-custom-block-tip-text: var(--vp-c-text-1); + --vp-custom-block-tip-bg: var(--vp-c-brand-soft); + --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft); } /** @@ -134,6 +133,5 @@ * -------------------------------------------------------------------------- */ .DocSearch { - --docsearch-primary-color: var(--vp-c-brand-1) !important; + --docsearch-primary-color: var(--vp-c-brand-1) !important; } -