增加设置板块, 允许自定义界面设置, 使用 VueUse 存储

[Style] 为主视图增加 16px 间距更新 mdui-card 的右边距问题 (老问题了, 还是没有解决) [Base] 引入 VueUse 分离 Axios HTML 部分紧凑化
[Base] 修改 CI
2025-05-23 22:41:47 +08:00 · 2025-05-23 20:05:19 +08:00 · 2025-05-23 20:03:50 +08:00 · 2025-05-21 14:12:17 +08:00 · 2025-05-19 17:53:07 +08:00 · 2025-05-18 23:40:43 +08:00
16 changed files with 361 additions and 158 deletions
--- a/.gitea/workflows/ci.yml
+++ b/.gitea/workflows/ci.yml
@ -1,15 +1,31 @@
-name: Node.js CI
+name: Build

 on:
  push:
    tags:
-      - 'v*'  # 匹配所有 tag（也可改为 v* 等更具体的匹配）
+      - 'v*'

 jobs:
  build-and-test:
    runs-on: ubuntu-latest

    steps:
+      - name: 获取 Tag 名称
+        id: extract_tag
+        run: echo "tag=${GITHUB_REF##*/}" >> $GITHUB_OUTPUT
+
+      - name: 通知：开始构建
+        run: |
+          TAG=${{ steps.extract_tag.outputs.tag }}
+          curl -X POST http://10.0.0.3:52222/send \
+            -H "Content-Type: application/json" \
+            -d @- <<EOF
+          {
+            "alias": "ci",
+            "message": "[AO3 Mirror SSR][${TAG}]\n开始构建..."
+          }
+          EOF
+
      - name: 检出代码
        uses: actions/checkout@v3

@ -40,6 +56,18 @@ jobs:
          cp server.js index.html package.json build-out/
          zip -r output.zip build-out

+      - name: 通知：构建完成
+        run: |
+          TAG=${{ steps.extract_tag.outputs.tag }}
+          curl -X POST http://10.0.0.3:52222/send \
+            -H "Content-Type: application/json" \
+            -d @- <<EOF
+          {
+            "alias": "ci",
+            "message": "[AO3 Mirror SSR][${TAG}]\n构建完成✅"
+          }
+          EOF
+
      - name: 设置 SSH 私钥
        run: |
          mkdir -p ~/.ssh
@ -49,9 +77,6 @@ jobs:
          echo "  StrictHostKeyChecking no" >> ~/.ssh/config
          echo "  UserKnownHostsFile=/dev/null" >> ~/.ssh/config
      
-      - name: 获取 Tag 名称
-        id: extract_tag
-        run: echo "tag=${GITHUB_REF##*/}" >> $GITHUB_OUTPUT

      - name: 上传产物到远程服务器
        run: |
@ -59,4 +84,14 @@ jobs:
          scp output.zip default@10.0.0.3:/srv/publish/ao3-mirror-ssr/${TAG}.zip
          ssh default@10.0.0.3 sh -c 'cd /srv/publish/ao3-mirror-ssr/; rm -f latest.zip; ln -s ${TAG}.zip latest.zip'

-
+      - name: 通知：上传完成
+        run: |
+          TAG=${{ steps.extract_tag.outputs.tag }}
+          curl -X POST http://10.0.0.3:52222/send \
+            -H "Content-Type: application/json" \
+            -d @- <<EOF
+          {
+            "alias": "ci",
+            "message": "[AO3 Mirror SSR][${TAG}]\n上传完成✅"
+          }
+          EOF
--- a/package-lock.json
+++ b/package-lock.json
@ -9,6 +9,8 @@
      "version": "0.0.0",
      "dependencies": {
        "@mdui/icons": "^1.0.2",
+        "@vueuse/core": "^13.2.0",
+        "@vueuse/integrations": "^13.2.0",
        "axios": "^1.9.0",
        "compress-json": "^3.1.1",
        "cookie-parser": "^1.4.7",
@ -1731,6 +1733,11 @@
      "resolved": "https://registry.npmmirror.com/@types/trusted-types/-/trusted-types-2.0.7.tgz",
      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA=="
+    },
    "node_modules/@vitejs/plugin-vue": {
      "version": "5.2.4",
      "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
@ -1963,6 +1970,106 @@
      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.5.13.tgz",
      "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ=="
    },
+    "node_modules/@vueuse/core": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-13.2.0.tgz",
+      "integrity": "sha512-n5TZoIAxbWAQ3PqdVPDzLgIRQOujFfMlatdI+f7ditSmoEeNpPBvp7h2zamzikCmrhFIePAwdEQB6ENccHr7Rg==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "13.2.0",
+        "@vueuse/shared": "13.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/integrations": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/integrations/-/integrations-13.2.0.tgz",
+      "integrity": "sha512-tnwdzUYadAiewvMtBcjH/ZPgRCoQBvuVzbFA/VSysPDaIuG41Jp/Z1Sn/rYoFMOLJfcOEcVh+tN3mkrVIyumig==",
+      "dependencies": {
+        "@vueuse/core": "13.2.0",
+        "@vueuse/shared": "13.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "async-validator": "^4",
+        "axios": "^1",
+        "change-case": "^5",
+        "drauu": "^0.4",
+        "focus-trap": "^7",
+        "fuse.js": "^7",
+        "idb-keyval": "^6",
+        "jwt-decode": "^4",
+        "nprogress": "^0.2",
+        "qrcode": "^1.5",
+        "sortablejs": "^1",
+        "universal-cookie": "^7",
+        "vue": "^3.5.0"
+      },
+      "peerDependenciesMeta": {
+        "async-validator": {
+          "optional": true
+        },
+        "axios": {
+          "optional": true
+        },
+        "change-case": {
+          "optional": true
+        },
+        "drauu": {
+          "optional": true
+        },
+        "focus-trap": {
+          "optional": true
+        },
+        "fuse.js": {
+          "optional": true
+        },
+        "idb-keyval": {
+          "optional": true
+        },
+        "jwt-decode": {
+          "optional": true
+        },
+        "nprogress": {
+          "optional": true
+        },
+        "qrcode": {
+          "optional": true
+        },
+        "sortablejs": {
+          "optional": true
+        },
+        "universal-cookie": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-13.2.0.tgz",
+      "integrity": "sha512-kPpzuQCU0+D8DZCzK0iPpIcXI+6ufWSgwnjJ6//GNpEn+SHViaCtR+XurzORChSgvpHO9YC8gGM97Y1kB+UabA==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-13.2.0.tgz",
+      "integrity": "sha512-vx9ZPDF5HcU9up3Jgt3G62dMUfZEdk6tLyBAHYAG4F4n73vpaA7J5hdncDI/lS9Vm7GA/FPlbOmh9TrDZROTpg==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
    "node_modules/@yankeeinlondon/builder-api": {
      "version": "1.4.1",
      "resolved": "https://registry.npmmirror.com/@yankeeinlondon/builder-api/-/builder-api-1.4.1.tgz",
--- a/package.json
+++ b/package.json
@ -12,6 +12,8 @@
  },
  "dependencies": {
    "@mdui/icons": "^1.0.2",
+    "@vueuse/core": "^13.2.0",
+    "@vueuse/integrations": "^13.2.0",
    "axios": "^1.9.0",
    "compress-json": "^3.1.1",
    "cookie-parser": "^1.4.7",
--- a/src/App.vue
+++ b/src/App.vue
@ -27,7 +27,7 @@ const route = useRoute()

 const clientOnlyStore = useClientOnlyStore()
 const api = useApiStore()
-const themeScheme = useThemeStore()
+let themeScheme = null
 const mobileScreen = useMobileScreen()
 const routeStore = useRouteStore()

@ -38,7 +38,7 @@ const closeDrawer = ref(true)
 let progressTimer = null

 onServerPrefetch(async () => {
-	await api.init()
+
 })

 onBeforeMount(() => {
@ -47,8 +47,8 @@ onBeforeMount(() => {
 })

 onMounted(async () => {
+	themeScheme = useThemeStore()
 	themeScheme.applyTheme()
-	await api.init()
 	clientOnlyStore.setClient()
 	new MutationObserver(() => {
 	  if (document.documentElement.style.width.includes('calc')) {
@ -63,8 +63,8 @@ onMounted(async () => {
 </script>

 <template>
-    <header><ClientOnly>
-    	<mdui-top-app-bar style="background-color: rgb(var(--mdui-color-primary-container));" scroll-behavior="shrink elevate">
+	<header><ClientOnly>
+		<mdui-top-app-bar style="background-color: rgb(var(--mdui-color-primary-container));" scroll-behavior="shrink elevate">
 		<mdui-button-icon @click="drawer.open = !drawer.open">
 			<mdui-icon-menu></mdui-icon-menu>
 		</mdui-button-icon>
@ -78,11 +78,10 @@ onMounted(async () => {
 			<mdui-icon-light-mode style="color: rgb(var(--mdui-color-on-surface-variant))"></mdui-icon-light-mode>
 		</mdui-button-icon>
 		</mdui-top-app-bar>
-	<template #ssr>
-		<h1>{{ routeStore.title }}</h1>
-    </template></ClientOnly></header>
-    <nav><ClientOnly>
-	    <mdui-navigation-drawer ref='drawer' :open="drawerOpen" close-on-overlay-click close-on-esc style="margin-top: 64px;">
+	<template #ssr><h1>{{ routeStore.title }}</h1>
+	</template></ClientOnly></header>
+	<nav><ClientOnly>
+		<mdui-navigation-drawer ref='drawer' :open="drawerOpen" close-on-overlay-click close-on-esc style="margin-top: 64px;">
 			<mdui-list style="height: 100%; background-color: rgb(var(--mdui-color-surface-variant));">
 				<KeepAlive><mdui-list-item
 					v-for="item in routeStore.allRoutes"
@ -94,27 +93,25 @@ onMounted(async () => {
 			</mdui-list>
 		</mdui-navigation-drawer>
 	<template #ssr>
-		<ul>
-			<li v-for="item in routeStore.allRoutes"
+		<ul><li v-for="item in routeStore.allRoutes"
 			:key="item.path"
 			:class="{ 'active-item' : item.path == $route.path }"
-			><a :href="item.path">{{ item.name }}</a></li>
-		</ul>
-    </template></ClientOnly>
-    </nav>
-	<main :class="{ 'mdui-prose' : clientOnlyStore.isClient }">
+			><a :href="item.path">{{ item.name }}</a></li></ul>
+	</template></ClientOnly></nav>
+	<main :class="{ 'mdui-prose' : clientOnlyStore.isClient , 'content' : clientOnlyStore.isClient}">
 		<RouterView v-slot="{ Component }">
-	    	<component :is="Component" />
-	    </RouterView>
-	</main>
-    <footer></footer>
+			<component :is="Component" />
+		</RouterView>
+	</main><footer></footer>
 </template>

 <style scoped>
 .active-item {
 	background-color: rgb(var(--mdui-color-surface-container-high));
 }
-
+.content {
+	margin: 16px;
+}
 .bottom {
  position: fixed;
  display: flex;
--- a/src/composables/apiRequest.js
+++ b/src/composables/apiRequest.js
@ -0,0 +1,56 @@
+import { useAxios } from '@vueuse/integrations/useAxios'
+import axios from 'axios'
+
+function getEndpoint() {
+  const apiMapping = {
+    '': ['http://localhost:28001/', '/api/'],
+  }
+  let host = import.meta.env.SSR ? 'ssr' : window.location.host
+  let entry = apiMapping[host] ?? apiMapping['']
+  return import.meta.env.SSR ? entry[0] : replaceUrl(entry[1])
+}
+
+function replaceUrl(url) {
+  return url
+    .replace('{{hostname}}', window.location.hostname)
+    .replace('{{port}}', window.location.port)
+    .replace('{{protocol}}', window.location.protocol)
+}
+
+export function useApiRequest(method, url, data, config = {}) {
+  const start = Date.now()
+  const baseURL = getEndpoint()
+  const fullURL = `${baseURL}${url}`
+  const {
+    response,
+    error,
+    isFinished,
+    isLoading,
+    execute,
+  } = useAxios(
+    fullURL,
+    {
+      method,
+      ...(method === 'POST' ? { data } : {}),
+      ...(config || {})
+    },
+    {
+      immediate: false,
+      axios,
+    }
+  )
+  const exec = async () => {
+    await execute()
+    const stop = Date.now()
+    return {
+      status: response.value?.status || (error.value?.response?.status ?? -1),
+      data: response.value?.data || error.value?.response?.data || null,
+      duration: stop - start,
+      start,
+      stop,
+      error: error.value,
+      isSSR: import.meta.env.SSR,
+    }
+  }
+  return { execute: exec, isFinished, isLoading }
+}
--- a/src/entry-server.js
+++ b/src/entry-server.js
@ -1,4 +1,4 @@
-import { renderToWebStream, renderToString } from 'vue/server-renderer'
+import { renderToWebStream } from 'vue/server-renderer'
 import { createApp } from './main'

 import { createSSRRouter } from './router.js'
--- a/src/main.scss
+++ b/src/main.scss
@ -13,15 +13,23 @@ $on-error-color: rgb(var(--mdui-color-on-error));
 $transition-duration: var(--mdui-motion-duration-short2);
 $transition-easing: var(--mdui-motion-easing-linear);

+html {
+  scroll-padding-top: 64px; /* 等于顶栏高度 */
+}
+
 body {
  font-family: $font-family;
  background-color: $bg-color;
  transition: opacity $transition-duration $transition-easing;
 }

+pre {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
 // MDUI 组件样式
 mdui-card {
-  width: 98%;
+  width: 100%;
  padding: 8px;
 }

--- a/src/router.js
+++ b/src/router.js
@ -39,13 +39,21 @@ export function createSSRRouter() {
 				title: '阅读',
 				hidden: true
 			}
+		},{
+			path: '/settings',
+			name: '设置',
+			component: () => import('./views/Settings.vue'),
+			meta: {
+				title: '设置',
+				order: 2
+			},
 		},{
 			path: '/about',
 			name: '关于',
 			component: () => import('./views/About.vue'),
 			meta: {
 				title: '',
-				order: 2
+				order: 3
 			},
 		},{
 			path: '/developer',
--- a/src/stores/api.js
+++ b/src/stores/api.js
@ -1,114 +1,20 @@
-import { ref, computed, watch } from 'vue'
 import { defineStore } from 'pinia'
-import { useSSRContext } from 'vue'
-import axios from 'axios'
-
-import { objectToQueryString, getCookie, setCookie } from '@/utils.js'
-
-const apiMapping = {
-	'': ['http://localhost:28001/','/api/']
-}
-
-function replaceUrl(url) {
-	return url
-		.replace('{{hostname}}',window.location.hostname)
-		.replace('{{port}}',window.location.port)
-		.replace('{{protocol}}',window.location.protocol)
-}
+import { useApiRequest } from '../composables/apiRequest'

 export const useApiStore = defineStore('api', () => {
-	let host = import.meta.env.SSR ? useSSRContext().host : window.location.host
-	let entry = apiMapping[host] ? apiMapping[host] : apiMapping['']
-	let endpoint = import.meta.env.SSR ? entry[0] : replaceUrl(entry[1])
-	//console.log('Entry point:', endpoint)
-	var inited = false
-	var initializing = false
-	async function apiGet(url, data) {
-		const realURL = data 
-			? `${endpoint}${url}?${objectToQueryString(data)}`
-			: `${endpoint}${url}`
-		try {
-			let start = Date.now()
-			const response = await axios.get(realURL)
-			let stop = Date.now()
-			return {
-				status: response.status,
-				data: response.data,
-				start, stop,
-				duration: stop - start,
-				isSSR: import.meta.env.SSR
-			}
-		} catch (error) {
-			if (error.response) {
-				return {
-					status: error.response.status,
-					data: error.response.data,
-					isSSR: import.meta.env.SSR
-				}
-			} else {
-				return {
-					status: -1,
-					data: null
-				}
-			}
-		}
-	}
-	async function apiPost(url, data) {
-		const realURL = `${endpoint}${url}`;
-		try {
-			let start = Date.now()
-			const response = await axios.post(realURL, data, {
-				headers: { 'Content-Type': 'application/json' }
-			})
-			let stop = Date.now()
-			return {
-				status: response.status,
-				data: response.data,
-				start, stop,
-				duration: stop - start,
-				isSSR: import.meta.env.SSR
-			}
-		} catch (error) {
-			if (error.response) {
-				return {
-					status: error.response.status,
-					data: error.response.data,
-					isSSR: import.meta.env.SSR
-				}
-			} else {
-				return {
-					status: -1,
-					data: null
-				}
-			}
-		}
-	}
-	async function init() {
-		if (inited) return
-		if (initializing) {
-			while (initializing) {
-				await new Promise((resolve) => setTimeout(resolve, 100))
-			}
-			return
-		}
-		initializing = true
-		inited = true
-		initializing = false
-		if (!import.meta.env.SSR) {
-			console.log(`[API] Inited! endpoint: ${endpoint}`)
-		}
-	}
-	async function reInit(){
-		inited = false
-		await init()
-	}
 	async function getWork(workId, chapterId) {
-		if (chapterId) return await apiGet(`work/${workId}/${chapterId}`)
-		return await apiGet(`work/${workId}`)
+		const path = chapterId ? `work/${workId}/${chapterId}` : `work/${workId}`
+		const { execute } = useApiRequest('GET', path)
+		return await execute()
 	}
+
+	async function postData(url, payload) {
+		const { execute } = useApiRequest('POST', url, payload)
+		return await execute()
+	}
+
 	return {
-		init,
-		reInit,
-		getWork
+		getWork,
+		postData,
 	}
 })
--- a/src/stores/appSetting.js
+++ b/src/stores/appSetting.js
@ -0,0 +1,28 @@
+import { defineStore } from 'pinia'
+import { reactive } from 'vue'
+import { useStorage, watchWithFilter, debounceFilter } from '@vueuse/core'
+
+const CURRENT_VERSION = 1
+
+const DEFAULT_SETTINGS = {
+	version: CURRENT_VERSION,
+	darkTheme: false,
+	autoTheme: true,
+	colorScheme: '#890000'
+}
+
+export const useAppSettingStore = defineStore('appSetting', () => {
+	const stored = useStorage('app-settings', DEFAULT_SETTINGS)
+	if (stored.version !== CURRENT_VERSION) {
+		Object.assign(stored, DEFAULT_SETTINGS)
+	}
+	function resetSettings() {
+		Object.assign(stored, DEFAULT_SETTINGS)
+	}
+	return {
+		value: stored,
+		resetSettings,
+	}
+})
+
+
--- a/src/stores/themeScheme.js
+++ b/src/stores/themeScheme.js
@ -1,12 +1,17 @@
 import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
+import { useDark } from '@vueuse/core'

 import { setTheme } from 'mdui/functions/setTheme.js'
 import { setColorScheme } from 'mdui/functions/setColorScheme.js'

+import { useAppSettingStore } from './appSetting.js' 
+
 export const useThemeStore = defineStore('homePage', () => {
-	const mode = ref('auto')
-	const color = ref('#890000')
+	const isDark = useDark()
+	const appSetting = useAppSettingStore()
+	const mode = ref(appSetting.value.autoTheme ? 'auto' : appSetting.value.darkTheme ? 'dark' : 'light')
+	const color = ref(appSetting.value.colorScheme)
    function setColor(target) {
        if (color.value != target) {
 			color.value = target
@ -20,10 +25,10 @@ export const useThemeStore = defineStore('homePage', () => {
 		setTheme(mode.value)
 	}
 	function switchMode(callback) {
-		if (mode.value === 'auto' || mode.value === 'light') {
-			mode.value = 'dark'
+		if (mode.value === 'auto') {
+			mode.value = isDark.value ? 'light' : 'dark'
 		} else {
-			mode.value = 'light'
+			mode.value = mode.value === 'dark' ? 'light' : 'dark'
 		}
 		setMode(mode.value)
 		if (callback) {
--- a/src/texts/about.md
+++ b/src/texts/about.md
@ -4,26 +4,39 @@

 概述
 ---
-一个 AO3 镜像站
+一个 AO3 镜像站, 优化了 UI/UX

-## 作者 (1)
+作者 (1)
 ---
 - [UnknownMp](https://www.unknownmp.top)  
  <mdui-avatar src="https://cdn.unknownmp.top/website/logo.jpg"></mdui-avatar>
-  
+
+---
+
+源代码
+---
+- 前端 Vue3 + Vite 6 (SSR) + MDUI 2 [Gitea](https://git.unknownmp.top/default/ao3-mirror-ssr)
+- 后端 FastAPI + HttpX + LXML *(暂无仓库)*

 组件库与工具链
 ---
+### 前端
 - MDUI 2 [mdui.org](https://mdui.org)
 - Vue 3 [vuejs.org](https://vuejs.org)
- Vite 6 [vitejs.dev](https://vite.dev)
+- Vite 6 [vite.dev](https://vite.dev)
+### 后端
+- FastAPI [fastapi.tiangolo.com](https://fastapi.tiangolo.com/)
+- HttpX [python-httpx.org](https://www.python-httpx.org/)
+- LXML [lxml.de](https://lxml.de/)

-废弃特性
+废弃特性 {#deprecated}
 ---

 ### 书签 {#deprecated-feature-bookmark}

-因为底层 IndexedDB 更新困难和作品段落解析困难问题, 所以在 **v1.0.7** 以后的版本废弃了书签机制
+因为底层 IndexedDB 更新困难和作品段落解析困难问题, 所以在 [**v1.0.7**](https://git.unknownmp.top/default/ao3-mirror-ssr/releases/tag/v1.0.7) 以后的版本废弃了书签机制
+
+---

 其他
 ---
--- a/src/texts/intro.md
+++ b/src/texts/intro.md
@ -8,7 +8,9 @@

 本网站是对 ArchiveOfOurOwn (AO3) 的一个镜像网站

-但是不同于直接转发所有页面内容, 本站点会先解析原始 AO3 页面内容, 然后重新组合, 这使得我们有更大的操作空间
+但是不同于直接转发所有页面内容, 本站点会先解析原始 AO3 页面内容, 然后重新渲染
+
+这使得我们可以重写界面, 采用 **质感设计3** 界面重构, 提供更好的交互界面

 ## 怎么使用🤔

@ -42,5 +44,4 @@
 - ✅ 预览
 - ✅ 作品详细数据
 - 📝 搜索
- ❌ 不再支持! [详情](/about#deprecated-feature-bookmark) 书签 (本地)
-
+- ❌ 书签 (本地) **不再支持! [详情](/about#deprecated-feature-bookmark)**
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@ -0,0 +1,40 @@
+<script setup>
+import { ref, onBeforeMount } from 'vue'
+
+import 'mdui/components/switch.js'
+import 'mdui/components/card.js'
+
+import { useAppSettingStore } from '../stores/appSetting.js'
+
+let appSetting = null
+
+onBeforeMount(() => {
+	appSetting = useAppSettingStore()
+})
+
+</script>
+
+<template>
+	<h1>设置</h1>
+	<Hr />
+	<ClientOnly><div class="settings">
+		<section><mdui-card>
+			<h2>界面</h2><Hr />
+			<div>自动黑暗模式<div style="flex: 1;"/>
+			<mdui-switch :checked="appSetting.value.autoTheme"
+			@change="e => appSetting.value.autoTheme = e.target.checked">
+			</mdui-switch></div>
+			<div v-if="!appSetting.value.autoTheme">默认黑暗模式<div style="flex: 1;"/>
+			<mdui-switch :checked="appSetting.value.darkTheme"
+			@change="e => appSetting.value.darkTheme = e.target.checked">
+			</mdui-switch></div>
+		</mdui-card></section>
+	</div></ClientOnly>
+</template>
+
+<style scoped>
+.settings div {
+	display: flex;
+	align-items: center;
+}
+</style>
--- a/src/views/Work.vue
+++ b/src/views/Work.vue
@ -148,9 +148,9 @@ onBeforeUnmount(() => {
 					<p v-for="para in workReadState.summary" :key="para" v-html='para'></p>
 				</blockquote>
 				<Hr />
-				<div ref='content'>
+				<article ref='content'>
 					<p v-for="(para, index) in workReadState.text" :key="para" :data-index="index">{{ para }}</p>
-				</div>
+				</article>
 			</article>
 			<mdui-fab class="mdui-fab" :extended="fabExtended">
 				<mdui-icon-bookmark slot="icon"></mdui-icon-bookmark>
@ -199,7 +199,7 @@ onBeforeUnmount(() => {
 				<p v-for="para in workReadState.summary" :key="para" v-html='para'></p>
 			</blockquote>
 			<Hr/>
-			<p v-for="para in workReadState.text.slice(0, 10)" :key="para">{{ para }}</p>
+			<article><p v-for="para in workReadState.text.slice(0, 10)" :key="para">{{ para }}</p></article>
 		</template>
 	</template></ClientOnly>
 </template>
--- a/vite.config.js
+++ b/vite.config.js
@ -38,10 +38,7 @@ export default defineConfig({
 						.toLowerCase()
 						.replace(/\s+/g, "-")
 				})
-				mdit.renderer.rules.hr = () => {
-					console.log('Custom <hr> rendered 🚀');
-					return '<div><BetterHr /></div>'
-				}
+				mdit.renderer.rules.hr = () => '<div><BetterHr /></div>'
 				const defaultOpen = mdit.renderer.rules.link_open || ((tokens, idx, options, env, self) => {
 					return self.renderToken(tokens, idx, options)
 				})
Author	SHA1	Message	Date
UnknownMp	8d248a44ff	增加设置板块, 允许自定义界面设置, 使用 VueUse 存储 All checks were successful Build / build-and-test (push) Successful in 27s Details [Style] 为主视图增加 16px 间距更新 mdui-card 的右边距问题 (老问题了, 还是没有解决) [Base] 引入 VueUse 分离 Axios HTML 部分紧凑化	2025-05-23 22:41:47 +08:00
UnknownMp	3778dbe57c	[Base] 修改 CI All checks were successful Build / build-and-test (push) Successful in 26s Details	2025-05-23 20:05:19 +08:00
UnknownMp	a942019c81	[Base] 更新 CI	2025-05-23 20:03:50 +08:00
UnknownMp	0088918502	[Base] 删除了无用代码 All checks were successful Node.js CI / build-and-test (push) Successful in 33s Details	2025-05-21 14:12:17 +08:00
UnknownMp	2a02f8f374	更新了介绍部分和部分 Markdown 语法错误 All checks were successful Node.js CI / build-and-test (push) Successful in 28s Details	2025-05-19 17:53:07 +08:00
UnknownMp	50ae8fb2a5	[Fix] 修复 pre 内容过长导致的页面溢出通过 overflow-x 使得内容可滚动 [NewBug] 导致 code 高度变小, 整体变窄	2025-05-18 23:40:43 +08:00
UnknownMp	8100fe2a41	[Base] 删除了 Vite 配置中多余的 console.log	2025-05-18 14:33:56 +08:00