landaiqing/voidraft
1
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 18 Wiki Activity

✨ Beautify style and add automatic deployment scripts

Browse Source
This commit is contained in:
landaiqing
2025-11-03 23:38:15 +08:00
parent e4d3969e95
commit 14ae3e80c4
8 changed files with 269 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
.github/workflows/deploy.yml vendored Normal file
View File

@@ -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

12
frontend/docs/.vitepress/config.ts
View File

@@ -66,7 +66,11 @@ export default defineConfig({
}, },
darkModeSwitchLabel: 'Appearance', darkModeSwitchLabel: 'Appearance',
sidebarMenuLabel: 'Menu', sidebarMenuLabel: 'Menu',
returnToTopLabel: 'Return to top' returnToTopLabel: 'Return to top',
footer: {
message: 'Released under the MIT License.',
copyright: 'Copyright © 2025-present landaiqing'
}
} }
}, },
zh: { zh: {
@@ -114,7 +118,11 @@ export default defineConfig({
}, },
darkModeSwitchLabel: '外观', darkModeSwitchLabel: '外观',
sidebarMenuLabel: '菜单', sidebarMenuLabel: '菜单',
returnToTopLabel: '返回顶部' returnToTopLabel: '返回顶部',
footer: {
message: 'Released under the MIT License.',
copyright: 'Copyright © 2025-present landaiqing'
}
} }
} }
} }

6
frontend/docs/.vitepress/theme/index.css Normal file
View File

@@ -0,0 +1,6 @@
@import "style/var.css";
@import "style/blur.css";
@import "style/badge.css";
@import "style/grid.css";

2
frontend/docs/.vitepress/theme/index.ts
View File

@@ -2,7 +2,7 @@
import { h } from 'vue' import { h } from 'vue'
import type { Theme } from 'vitepress' import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme' import DefaultTheme from 'vitepress/theme'
import './style.css' import './index.css'
export default { export default {
extends: DefaultTheme, extends: DefaultTheme,

21
frontend/docs/.vitepress/theme/style/badge.css Normal file
View File

@@ -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);
}

73
frontend/docs/.vitepress/theme/style/blur.css Normal file
View File

@@ -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;
}
}

40
frontend/docs/.vitepress/theme/style/grid.css Normal file
View File

@@ -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;
}

106
frontend/docs/.vitepress/theme/style.css → frontend/docs/.vitepress/theme/style/var.css
View File

@@ -42,32 +42,31 @@
* - `danger`: Used to show error, or dangerous message to the users. Used * - `danger`: Used to show error, or dangerous message to the users. Used
* in custom container, badges, etc. * in custom container, badges, etc.
* -------------------------------------------------------------------------- */ * -------------------------------------------------------------------------- */
:root { :root {
--vp-c-default-1: var(--vp-c-gray-1); --vp-c-default-1: var(--vp-c-gray-1);
--vp-c-default-2: var(--vp-c-gray-2); --vp-c-default-2: var(--vp-c-gray-2);
--vp-c-default-3: var(--vp-c-gray-3); --vp-c-default-3: var(--vp-c-gray-3);
--vp-c-default-soft: var(--vp-c-gray-soft); --vp-c-default-soft: var(--vp-c-gray-soft);
--vp-c-brand-1: var(--vp-c-indigo-1); --vp-c-brand-1: var(--vp-c-indigo-1);
--vp-c-brand-2: var(--vp-c-indigo-2); --vp-c-brand-2: var(--vp-c-indigo-2);
--vp-c-brand-3: var(--vp-c-indigo-3); --vp-c-brand-3: var(--vp-c-indigo-3);
--vp-c-brand-soft: var(--vp-c-indigo-soft); --vp-c-brand-soft: var(--vp-c-indigo-soft);
--vp-c-tip-1: var(--vp-c-brand-1); --vp-c-tip-1: var(--vp-c-brand-1);
--vp-c-tip-2: var(--vp-c-brand-2); --vp-c-tip-2: var(--vp-c-brand-2);
--vp-c-tip-3: var(--vp-c-brand-3); --vp-c-tip-3: var(--vp-c-brand-3);
--vp-c-tip-soft: var(--vp-c-brand-soft); --vp-c-tip-soft: var(--vp-c-brand-soft);
--vp-c-warning-1: var(--vp-c-yellow-1); --vp-c-warning-1: var(--vp-c-yellow-1);
--vp-c-warning-2: var(--vp-c-yellow-2); --vp-c-warning-2: var(--vp-c-yellow-2);
--vp-c-warning-3: var(--vp-c-yellow-3); --vp-c-warning-3: var(--vp-c-yellow-3);
--vp-c-warning-soft: var(--vp-c-yellow-soft); --vp-c-warning-soft: var(--vp-c-yellow-soft);
--vp-c-danger-1: var(--vp-c-red-1); --vp-c-danger-1: var(--vp-c-red-1);
--vp-c-danger-2: var(--vp-c-red-2); --vp-c-danger-2: var(--vp-c-red-2);
--vp-c-danger-3: var(--vp-c-red-3); --vp-c-danger-3: var(--vp-c-red-3);
--vp-c-danger-soft: var(--vp-c-red-soft); --vp-c-danger-soft: var(--vp-c-red-soft);
} }
/** /**
@@ -75,15 +74,15 @@
* -------------------------------------------------------------------------- */ * -------------------------------------------------------------------------- */
:root { :root {
--vp-button-brand-border: transparent; --vp-button-brand-border: transparent;
--vp-button-brand-text: var(--vp-c-white); --vp-button-brand-text: var(--vp-c-white);
--vp-button-brand-bg: var(--vp-c-brand-3); --vp-button-brand-bg: var(--vp-c-brand-3);
--vp-button-brand-hover-border: transparent; --vp-button-brand-hover-border: transparent;
--vp-button-brand-hover-text: var(--vp-c-white); --vp-button-brand-hover-text: var(--vp-c-white);
--vp-button-brand-hover-bg: var(--vp-c-brand-2); --vp-button-brand-hover-bg: var(--vp-c-brand-2);
--vp-button-brand-active-border: transparent; --vp-button-brand-active-border: transparent;
--vp-button-brand-active-text: var(--vp-c-white); --vp-button-brand-active-text: var(--vp-c-white);
--vp-button-brand-active-bg: var(--vp-c-brand-1); --vp-button-brand-active-bg: var(--vp-c-brand-1);
} }
/** /**
@@ -91,31 +90,31 @@
* -------------------------------------------------------------------------- */ * -------------------------------------------------------------------------- */
:root { :root {
--vp-home-hero-name-color: transparent; --vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: -webkit-linear-gradient( --vp-home-hero-name-background: -webkit-linear-gradient(
120deg, 120deg,
#bd34fe 30%, #bd34fe 30%,
#41d1ff #41d1ff
); );
--vp-home-hero-image-background-image: linear-gradient( --vp-home-hero-image-background-image: linear-gradient(
-45deg, -45deg,
#bd34fe 50%, #bd34fe 50%,
#47caff 50% #47caff 50%
); );
--vp-home-hero-image-filter: blur(44px); --vp-home-hero-image-filter: blur(44px);
} }
@media (min-width: 640px) { @media (min-width: 640px) {
:root { :root {
--vp-home-hero-image-filter: blur(56px); --vp-home-hero-image-filter: blur(56px);
} }
} }
@media (min-width: 960px) { @media (min-width: 960px) {
:root { :root {
--vp-home-hero-image-filter: blur(68px); --vp-home-hero-image-filter: blur(68px);
} }
} }
/** /**
@@ -123,10 +122,10 @@
* -------------------------------------------------------------------------- */ * -------------------------------------------------------------------------- */
:root { :root {
--vp-custom-block-tip-border: transparent; --vp-custom-block-tip-border: transparent;
--vp-custom-block-tip-text: var(--vp-c-text-1); --vp-custom-block-tip-text: var(--vp-c-text-1);
--vp-custom-block-tip-bg: var(--vp-c-brand-soft); --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-code-bg: var(--vp-c-brand-soft);
} }
/** /**
@@ -134,6 +133,5 @@
* -------------------------------------------------------------------------- */ * -------------------------------------------------------------------------- */
.DocSearch { .DocSearch {
--docsearch-primary-color: var(--vp-c-brand-1) !important; --docsearch-primary-color: var(--vp-c-brand-1) !important;
} }