更新了搜索功能 (终于!) 1.1.0 版本 Release!

[Style]
为主视图增加 16px 间距
更新 mdui-card 的右边距问题 (老问题了, 还是没有解决)

[Base]
引入 VueUse
分离 Axios
HTML 部分紧凑化

.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

package.json

@@ -12,27 +12,26 @@
   },
   "dependencies": {
     "@mdui/icons": "^1.0.2",
-    "axios": "^1.8.1",
+    "@vueuse/core": "^13.2.0",
+    "@vueuse/integrations": "^13.2.0",
+    "axios": "^1.9.0",
     "compress-json": "^3.1.1",
-    "compression": "^1.8.0",
     "cookie-parser": "^1.4.7",
-    "express": "^5.0.1",
+    "express": "^5.1.0",
-    "idb": "^8.0.2",
     "mdui": "^2.1.3",
-    "pako": "^2.1.0",
+    "pinia": "^3.0.2",
-    "pinia": "^3.0.1",
-    "sirv": "^3.0.1",
     "vue": "^3.5.13",
-    "vue-client-only": "^2.1.0",
+    "vue-router": "^4.5.1"
-    "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue": "^5.2.4",
-    "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
     "cross-env": "^7.0.3",
-    "vite": "^6.1.1",
+    "markdown-it-anchor": "^9.2.0",
+    "markdown-it-attrs": "^4.3.1",
+    "sass": "^1.88.0",
+    "vite": "^6.3.5",
     "vite-plugin-md": "^0.21.5",
-    "vite-plugin-pwa": "^0.21.1",
+    "vite-plugin-vue-devtools": "^7.7.6"
-    "vite-plugin-vue-devtools": "^7.7.2"
   }
 }

server.js

@@ -33,9 +33,9 @@ if (!isProduction) {
   })
   app.use(vite.middlewares)
 } else {
-  const compression = (await import('compression')).default
+  //const compression = (await import('compression')).default
   const sirv = (await import('sirv')).default
-  app.use(compression())
+  //app.use(compression())
   app.use(base, sirv('./dist/client', { extensions: [] }))
 }
 

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>
+	<header><ClientOnly>
-    	<mdui-top-app-bar style="background-color: rgb(var(--mdui-color-primary-container));" scroll-behavior="shrink elevate">
+		<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>
+	<template #ssr><h1>{{ routeStore.title }}</h1>
-		<h1>{{ routeStore.title }}</h1>
+	</template></ClientOnly></header>
-    </template></ClientOnly></header>
+	<nav><ClientOnly>
-    <nav><ClientOnly>
+		<mdui-navigation-drawer ref='drawer' :open="drawerOpen" close-on-overlay-click close-on-esc style="margin-top: 64px;">
-	    <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>
+		<ul><li v-for="item in routeStore.allRoutes"
-			<li v-for="item in routeStore.allRoutes"
 			:key="item.path"
 			:class="{ 'active-item' : item.path == $route.path }"
-			>{{ item.name }}</li>
+			><a :href="item.path">{{ item.name }}</a></li></ul>
-		</ul>
+	</template></ClientOnly></nav>
-    </template></ClientOnly>
+	<main :class="{ 'mdui-prose' : clientOnlyStore.isClient , 'content' : clientOnlyStore.isClient}">
-    </nav>
-	<main :class="{ 'mdui-prose' : clientOnlyStore.isClient }">
 		<RouterView v-slot="{ Component }">
-	    	<component :is="Component" />
+			<component :is="Component" />
-	    </RouterView>
+		</RouterView>
-	</main>
+	</main><footer></footer>
-    <footer></footer>
 </template>
 
 <style scoped>
 .active-item {
 	background-color: rgb(var(--mdui-color-surface-container-high));
 }
-
+.content {
+	margin: 16px;
+}
 .bottom {
   position: fixed;
   display: flex;

src/composables/apiRequest.js

@@ -0,0 +1,61 @@
+import { useAxios } from '@vueuse/integrations/useAxios'
+import axios from 'axios'
+
+import { objectToQueryString } from '../utils.js'
+
+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()
+  // 若为 GET 请求，将 data 转为查询参数拼接到 URL 上
+  const fullURL = method === 'GET' && data
+    ? `${baseURL}${url}?${objectToQueryString(data)}`
+    : `${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 }
+}

src/entry-client.js

@@ -1,5 +1,5 @@
 import { decompress } from 'compress-json'
-import './main.css'
+import './main.scss'
 
 import { createApp } from './main'
 import { createSSRRouter } from './router.js'

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'

src/main.css

@@ -1,35 +0,0 @@
-@import 'mdui/mdui.css';
-/* @import './assets/typescale.css'; */
-
-body {
-	font-family: Roboto,Noto Sans SC,PingFang SC,Lantinghei SC,Microsoft Yahei,Hiragino Sans GB,"Microsoft Sans Serif",WenQuanYi Micro Hei,sans-serif;
-	background-color: rgb(var(--mdui-color-background));
-	transition: opacity var(--mdui-motion-duration-short2) var(--mdui-motion-easing-linear);
-}
-
-mdui-card {
-	width: 100%;
-	padding: 0px 16px 16px;
-}
-
-mdui-text-field {
-	margin: 8px 0px;
-}
-
-.warn {
-	background-color: rgb(var(--mdui-color-error));
-	color: rgb(var(--mdui-color-on-error));
-}
-
-.warn-text {
-	color: rgb(var(--mdui-color-error));
-}
-
-.pre-break {
-	white-space: pre-line;
-}
-
-.no-select {
-  user-select: none;
-}
-

src/main.js

@@ -5,6 +5,7 @@ import App from './App.vue'
 
 import ClientOnly from './ssr/ClientOnly.vue'
 import Hr from './ui/BetterHr.vue'
+import Form from './ui/Form.vue'
 
 export function createApp() {
 	const app = createSSRApp(App)
@@ -13,5 +14,8 @@ export function createApp() {
 	app
 		.component('ClientOnly', ClientOnly)
 		.component('Hr', Hr)
+		.component('BetterHr', Hr)
+		.component('Form', Form)
+		.component('BetterForm', Form)
 	return { app, pinia }
 }

src/main.scss

@@ -0,0 +1,58 @@
+@import 'mdui/mdui.css';
+// @import './assets/typescale.css';
+
+// 字体配置
+$font-family: Roboto, Noto Sans SC, PingFang SC, Lantinghei SC,
+  Microsoft Yahei, Hiragino Sans GB, "Microsoft Sans Serif",
+  WenQuanYi Micro Hei, sans-serif;
+
+// MDUI 变量简写
+$bg-color: rgb(var(--mdui-color-background));
+$error-color: rgb(var(--mdui-color-error));
+$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: 100%;
+  padding: 8px;
+}
+
+mdui-text-field {
+  margin: 8px 0;
+}
+
+// 警告样式
+.warn {
+  background-color: $error-color;
+  color: $on-error-color;
+}
+
+.warn-text {
+  color: $error-color;
+}
+
+// 通用工具类
+.pre-break {
+  white-space: pre-line;
+}
+
+.no-select {
+  user-select: none;
+}
+

src/router.js

@@ -3,36 +3,72 @@ import { createMemoryHistory, createWebHistory, createRouter } from 'vue-router'
 export function createSSRRouter() {
 	const router = createRouter({
 		history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
+		scrollBehavior(to, from, savedPosition) {
+			if (savedPosition) {
+				return savedPosition
+			} else if (to.hash) {
+				return {
+					el: to.hash,
+					behavior: 'smooth',
+				}
+			} else {
+				return { top: 0 }
+			}
+		},
 		routes: [{
 			path: '/',
 			name: '前言',
 			component: () => import('./views/Root.vue'),
 			meta: {
-				title: "首页",
+				title: '首页',
 				order: 1
 			},
 		},{
 			path: '/work/:id',
-			name: '阅读',
+			name: 'work',
 			component: () => import('./views/Work.vue'),
 			meta: {
-				title: "",
+				title: '阅读',
 				hidden: true
 			}
+		},{
+			path: '/work/:id/:cid',
+			name: 'workChapter',
+			component: () => import('./views/Work.vue'),
+			meta: {
+				title: '阅读',
+				hidden: true
+			}
+		},{
+			path: '/search/simple',
+			name: '搜索',
+			component: () => import('./views/SimpleSearch.vue'),
+			meta: {
+				title: '搜索',
+				order: 2
+			}
+		},{
+			path: '/settings',
+			name: '设置',
+			component: () => import('./views/Settings.vue'),
+			meta: {
+				title: '设置',
+				order: 90
+			},
 		},{
 			path: '/about',
 			name: '关于',
-			component: () => import('./views/About.vue'),
+			component: () => import('./views/About.md'),
 			meta: {
-				title: "",
+				title: '',
-				order: 2
+				order: 100
 			},
 		},{
 			path: '/developer',
 			name: '开发人员选项',
 			component: () => import('./views/Developer.vue'),
 			meta: {
-				title: "",
+				title: '',
 				hidden: true
 			},
 		},{
@@ -40,7 +76,7 @@ export function createSSRRouter() {
 			name: 'NotFound',
 			component: () => import('./views/fallback/NotFound.vue'),
 			meta: {
-				title: "页面未找到",
+				title: '页面未找到',
 				hidden: true,
 				code: 404
 			}

src/stores/api.js

@@ -1,113 +1,20 @@
-import { ref, computed, watch } from 'vue'
 import { defineStore } from 'pinia'
-import { useSSRContext } from 'vue'
+import { useApiRequest } from '../composables/apiRequest'
-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)
-}
 
 export const useApiStore = defineStore('api', () => {
-	let host = import.meta.env.SSR ? useSSRContext().host : window.location.host
+	async function getWork(workId, chapterId) {
-	let entry = apiMapping[host] ? apiMapping[host] : apiMapping['']
+		const path = chapterId ? `work/${workId}/${chapterId}` : `work/${workId}`
-	let endpoint = import.meta.env.SSR ? entry[0] : replaceUrl(entry[1])
+		const { execute } = useApiRequest('GET', path)
-	//console.log('Entry point:', endpoint)
+		return await execute()
-	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}`;
+	async function workSimpleSearch(keyword, page = 1) {
-		try {
+		const { execute } = useApiRequest('GET', 'search/simple', { keyword, page })
-			let start = Date.now()
+		return await execute()
-			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) {
-		return await apiGet('work',{ workId })
 	}
+
 	return {
-		init,
+		getWork,
-		reInit,
+		workSimpleSearch
-		getWork
 	}
 })

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,
+	}
+})
+
+

src/stores/db.js

@@ -1,58 +0,0 @@
-import { ref } from 'vue'
-import { defineStore } from 'pinia'
-
-import { openDB } from 'idb';
-
-export const useDB = defineStore('_db', () => {
-	const dbPromise = openDB('data', 1, {
-		upgrade(db) {
-			const bookmarkStore = db.createObjectStore('bookmarks', {
-				keyPath: 'id',
-				autoIncrement: true,
-			})
-			bookmarkStore.createIndex('by-workId', 'workId');
-		},
-	})
-	return {
-		db: dbPromise
-	}
-})
-
-export const useBookmarkStore = defineStore('bookmark', () => {
-	const db = useDB().db
-	async function getAll(workId) {
-		return (await db).getAllFromIndex('bookmarks', 'by-workId', workId);
-	}
-	async function get(id) {
-		return (await db).get('bookmarks', id);
-	}
-	async function add(workId, index, para, name ) {
-		return (await db).add('bookmarks', {
-			workId, name, para, index
-		});
-	}
-	async function del(id) {
-		(await db).delete('bookmarks', id);
-	}
-	async function delByWork(workId) {
-		(await getAll(workId)).forEach(async (item) => {
-			del(item.id)
-		})
-	}
-	async function updateName(id, name) {
-		const raw = await get(id)
-		if (raw) {
-			raw.name = name
-			console.log(name)
-			await (await db).put('bookmarks', raw);
-		}
-	}
-	return {
-		get,
-		add,
-		del,
-		getAll,
-		delByWork,
-		updateName
-	}
-})

src/stores/search.js

@@ -0,0 +1,51 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+import { useApiStore } from '@/stores/api.js'
+
+export const useSimpleSearchState = defineStore('simpleSearch', () => {
+	const api = useApiStore()
+	const keyword = ref('')
+	const result = ref([])
+	const count = ref([])
+	const pageCount = ref(0)
+	const currentPage = ref(0)
+	const state = ref(null)
+	async function load() {
+		if (currentPage.value == pageCount.value) state.value = 'finish'
+		let res = await api.workSimpleSearch(keyword.value, currentPage.value)
+		res = res.data
+		if (res.code == 0) {
+			currentPage.value = res.page
+			pageCount.value = res.pageCount
+			count.value = res.count
+			state.value = import.meta.env.SSR ? 'ssrready' : 'ready'
+			result.value.push(...res.works)
+		} else if (res.code == 1) {
+			if (currentPage.value) {
+				state.value = 'finish'
+			} else {
+				currentPage.value = 1
+				state.value = 'notfound'
+			}
+		}
+	}
+	async function start(key) {
+		if (key == keyword.value) return
+		keyword.value = key
+		result.value = []
+		state.value = 'loading'
+		currentPage.value = 0
+		await load()
+	} 
+	
+	return {
+		keyword,
+		result,
+		count,
+		pageCount,
+		currentPage,
+		state,
+		load, start
+	}
+})

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 isDark = useDark()
-	const color = ref('#890000')
+	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') {
+		if (mode.value === 'auto') {
-			mode.value = 'dark'
+			mode.value = isDark.value ? 'light' : 'dark'
 		} else {
-			mode.value = 'light'
+			mode.value = mode.value === 'dark' ? 'light' : 'dark'
 		}
 		setMode(mode.value)
 		if (callback) {

src/stores/workRead.js

@@ -8,23 +8,37 @@ import { useApiStore } from '@/stores/api.js'
 export const useWorkReadState = defineStore('workRead', () => {
 	const api = useApiStore()
 	const id = ref(null)
+	const cid = ref(null)
 	const summary = ref(null)
-	const pesud = ref(null)
+	const pseud = ref(null)
 	const title = ref(null)
 	const text = ref(null)
-	const publishedTime = ref(null)
 	const state = ref('')
+	const publishedTime = ref(null)
+	const wordCount = ref(0)
+	const kudoCount = ref(0)
+	const hitCount = ref(0)
+	const category = ref([])
+	const fandom = ref([])
+	const lang = ref(null)
 	function setData(data) {
 		id.value = data.workId
 		title.value = data.title
 		summary.value = [escapeAndFormatText(data.summary)]
-		pesud.value = data.pesud
+		pseud.value = data.pseud
-		text.value = data.text.split('\n\n')
+		text.value = data.text
+		publishedTime.value = data.stats.publishedTime
+		wordCount.value = data.stats.wordCount
+		kudoCount.value = data.stats.kudoCount
+		hitCount.value = data.stats.hitCount
+		category.value = data.category
+		fandom.value = data.fandom
+		lang.value = data.lang
 	}
-	async function loadWork(target) {
+	async function loadWork(target, targetc) {
-		if (target == id.value || state.value == 'loading') return
+		if (target == id.value && targetc == cid.value || state.value == 'loading') return
 		state.value = 'loading'
-		const result = await api.getWork(target)
+		const result = await api.getWork(target, targetc)
 		if (result.status == 200) {
 			setData(result.data)
 			state.value = 'ready'
@@ -34,13 +48,19 @@ export const useWorkReadState = defineStore('workRead', () => {
 		}
 	}
 	return {
-		id,
+		id, cid,
 		title,
 		summary,
-		pesud,
+		pseud,
 		text,
-		publishedTime,
 		state,
+		publishedTime,
+		wordCount,
+		kudoCount,
+		hitCount,
+		category,
+		fandom,
+		lang,
 		setData,
 		loadWork
 	}

src/texts/about.md

@@ -1,25 +0,0 @@
-# 关于
-
-这是什么, 有口舍用 ?
-
-概述
----
-一个 AO3 镜像站
-
-## 作者 (1)
----
-- [UnknownMp](https://www.unknownmp.top)  
-  <mdui-avatar src="https://cdn.unknownmp.top/website/logo.jpg"></mdui-avatar>
-  
-
-组件库与工具链
----
-- MDUI 2
-- Vue
-- Vite
-
-其他
----
-本站支持 "Server Side Rendering" by Vite SSR
-
-CDN by Cloudflare (赛博佛祖😭)

src/texts/intro.md

@@ -1,30 +1,33 @@
-# 欢迎来到 AO3 Mirror! 👋👋
-
-一个基于重构渲染的 AO3 镜像站
-
----
-
 ## 这是什么🤨
 
 本网站是对 ArchiveOfOurOwn (AO3) 的一个镜像网站
 
-但是不同于直接转发所有页面内容, 本站点会先解析原始 AO3 页面内容, 然后重新组合, 这使得我们有更大的操作空间
+但是不同于直接转发所有页面内容, 本站点会先解析原始 AO3 页面内容, 然后重新渲染
+
+这使得我们可以重写界面, 采用 **质感设计3** 界面重构, 提供更好的交互界面
 
 ## 怎么使用🤔
 
 现在这个站点还处于测试阶段, 只有一种使用方法 *(后面会扩展)*
 
-首先你需要一个 AO3 链接  
+首先你需要一个 AO3 链接 (或者数字 ID)  
 比如:
 
 	https://archiveofourown.org/works/114514
 
+带章节的话就是
+
+	https://archiveofourown.org/works/114514/chapters/1919810
+
+
 接着将前面的部分替换为本站点的链接 (保留数字ID部分):  
 即:
 
 	https://ao3.unknownmp.top/work/114514
 
-这里的数字ID即为`114514`
+章节:
+
+	https://ao3.unknownmp.top/work/114514/1919810
 
 浏览器打开它, OK 你会用了🤓👆!
 
@@ -33,7 +36,7 @@
 ## 功能与特性 🤗
 
 - ✅ 预览
-- ✅ 书签 (本地)
+- ✅ 作品详细数据
-- 📝 历史记录 (本地)
 - 📝 搜索
+- ❌ 书签 (本地) **不再支持! [详情](/about#deprecated-feature-bookmark)**
 

src/ui/BetterHr.vue

@@ -1,11 +1,18 @@
-<script setup>import 'mdui/components/divider.js'</script>
+<script setup>
+import 'mdui/components/divider.js'
+defineProps(['class'])  // 接收外部 class 属性
+</script>
+
 <template>
-	<ClientOnly><mdui-divider class='hr-divider'></mdui-divider>
+  <ClientOnly>
-	<template #ssr><hr/></template></ClientOnly>
+    <mdui-divider :class="['hr-divider', $attrs.class]"></mdui-divider>
+    <template #ssr><hr :class="['hr-divider', $attrs.class]" /></template>
+  </ClientOnly>
 </template>
+
 <style scoped>
 .hr-divider {
-	margin: 8px 0px;
+  margin: 8px 0px;
 }
 </style>
 

src/ui/Form.vue

@@ -0,0 +1,20 @@
+<template>
+  <form @submit="handleSubmit">
+    <slot></slot>
+  </form>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const emit = defineEmits(['submit'])
+
+function handleSubmit(event) {
+  event.preventDefault()
+  const form = event.target
+  const formData = new FormData(form)
+  const data = Object.fromEntries(formData.entries())
+  emit('submit', data, event)
+}
+</script>
+

src/views/About.md

@@ -0,0 +1,62 @@
+<script setup>
+import About from '../texts/about.md'
+import FunAnimation from '../components/FunAnimation.vue'
+
+import 'mdui/components/avatar.js'
+/*import { onBeforeMount, onMounted, onUnmounted, onBeforeUnmount, onActivated, onDeactivated } from 'vue'
+console.log('Setup')
+onBeforeMount(() => console.log('Before mount'))
+onMounted(() => console.log('Mounted'))
+onDeactivated(() => console.log('Deactivated'))
+onActivated(() => console.log('Activated'))
+onBeforeUnmount(() => console.log('Before unmount'))
+onUnmounted(() => console.log('Unmounted'))*/
+</script>
+
+# 关于
+
+这是什么, 有口舍用 ?
+
+概述
+---
+一个 AO3 镜像站, 优化了 UI/UX
+
+作者 (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 [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**](https://git.unknownmp.top/default/ao3-mirror-ssr/releases/tag/v1.0.7) 以后的版本废弃了书签机制
+
+---
+
+其他
+---
+本站支持 "Server Side Rendering" by Vite SSR
+
+CDN by Cloudflare (赛博佛祖😭)
+
+<FunAnimation />

src/views/About.vue

@@ -1,19 +0,0 @@
-<script setup>
-import About from '../texts/about.md'
-import FunAnimation from '../components/FunAnimation.vue'
-
-import 'mdui/components/avatar.js'
-/*import { onBeforeMount, onMounted, onUnmounted, onBeforeUnmount, onActivated, onDeactivated } from 'vue'
-console.log('Setup')
-onBeforeMount(() => console.log('Before mount'))
-onMounted(() => console.log('Mounted'))
-onDeactivated(() => console.log('Deactivated'))
-onActivated(() => console.log('Activated'))
-onBeforeUnmount(() => console.log('Before unmount'))
-onUnmounted(() => console.log('Unmounted'))*/
-</script>
-<template>
-	<About/>
-	<FunAnimation />
-</template>
-

src/views/Root.vue

@@ -9,13 +9,10 @@ import Intro from '../texts/intro.md'
 
 const router = useRouter()
 
-const src = ref('')
-const srcText = ref(null)
-const err = ref(false)
-
 function convert(from) {
 	if( Number(from) ) {
 		return {
+			type: 's',
 			id: Number(from)
 		}
 	} else if (from.includes('https://archiveofourown.org/works/')) {
@@ -27,21 +24,28 @@ function convert(from) {
 					type: 's',
 					id
 				}
+			} else {
+				const splited = sid.split('/chapters/')
+				const id = Number(splited[0])
+				const cid = Number(splited[1])
+				if (id && cid) {
+					return {
+						type: 'c',
+						id, cid
+					}
+				}
 			}
 		}
 	}
-	return {
+	return { type: 'f', key: from }
-		type: null,
-	}
 }
 
-function onConvert() {
+function onConvert(data) {
-	const { id, cid } = convert(src.value)
+	const { type, id, cid, key } = convert(data.src)
-	if (id == null) {
+	if (type == null) {
-		err.value = true
+	} else if ( type == 'f') {
-		srcText.value?.focus()
+		router.push(`/search/simple?keyword=${encodeURIComponent(key)}`)
 	} else {
-		err.value = false
 		if (cid) router.push(`/work/${id}/${cid}`)
 		else router.push(`/work/${id}`)
 	}
@@ -51,22 +55,25 @@ function onConvert() {
 
 <template>
 	<img style="display: block; margin: 0px auto 10px;" height="200px" alt="logo" src="/favicon.svg" />
-	<Intro />
+	<h1>欢迎来到 AO3 Mirror! 👋👋</h1>
-	<br/><Hr/>
+	<p>一个基于重构渲染的 AO3 镜像站</p>
+	<Hr />
 	<section id="converter">
 		<h2>链接转换</h2>
-		<p>输入完整链接或者 ID</p>
+		<p>AO3 链接 或 关键词搜索</p>
-		<ClientOnly>
+		<Form @submit="onConvert"><ClientOnly>
-			<mdui-text-field variant="filled" label="链接" placeholder="https://archiveofourown.org/works/114514" @input="src = $event.target.value" ref='srcText'>
+			<mdui-text-field variant="filled" label="链接 / 关键词" name="src">
-			<span  v-if='err' slot="helper" class='warn-text'>链接格式错误!</span>
 			</mdui-text-field><br/>
 			<div style="display: flex">
 				<div style="flex-grow: 1"></div>
-				<mdui-button @click='onConvert'>-></mdui-button>
+				<mdui-button type="submit">-></mdui-button>
 			</div>
-			{{ src }}
 		<template #ssr>
-			Padding...
+				<input type="text" id="src" name="src" />
-		</template></ClientOnly>
+				<input type="submit" />
+		</template></ClientOnly></Form>
 	</section>
+	<Hr/>
+	<Intro />
 </template>
+

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>

src/views/SimpleSearch.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { ref, onMounted, onServerPrefetch } from 'vue'
+import { useRoute } from 'vue-router'
+
+import 'mdui/components/text-field.js'
+import 'mdui/components/card.js'
+
+import { escapeAndFormatText } from '../utils.js'
+import { useSimpleSearchState } from '../stores/search.js'
+
+const route = useRoute()
+
+const inputField = ref('')
+
+const simpleSearchState = useSimpleSearchState()
+
+onServerPrefetch(async () => {
+	if (route.query.keyword) {
+		await simpleSearchState.start(route.query.keyword)
+	}
+	console.log(simpleSearchState.result[0])
+})
+
+onMounted(() => {
+	inputField.value = route.query.keyword || ''
+	if (inputField.value && simpleSearchState != 'ssrready') simpleSearchState.start(inputField.value)
+})
+
+function onSubmit(data) {
+	if (simpleSearchState) simpleSearchState.start(data.src)
+}
+
+</script>
+
+<template>
+	<h1>搜索</h1>
+	<Form @submit="onSubmit"><ClientOnly>
+		<mdui-text-field variant="filled" :value="inputField" label="链接 / 关键词" name="src">
+		</mdui-text-field><br/>
+		<div style="display: flex">
+			<div style="flex-grow: 1"></div>
+			<mdui-button type="submit">-></mdui-button>
+		</div>
+	<template #ssr>
+		<input type="text" id="src" name="src" />
+		<input type="submit" />
+	</template></ClientOnly></Form><Hr />
+	<p>State: {{ simpleSearchState.state }}</p><Hr/>
+	<template v-if="simpleSearchState.result" v-for="work in simpleSearchState.result" :key="work.workId">
+		<ClientOnly><mdui-card style="margin: 8px 0px;"><article>
+			<router-link :to="`/work/${work.workId}`"><h3>{{ work.title }}</h3></router-link>
+			<h4>{{ work.pseud }}</h4>
+			<Hr />
+			<p v-html="escapeAndFormatText(work.summary)"></p>
+		</article></mdui-card><template #ssr>
+			<router-link :to="`/work/${work.workId}`"><h3>{{ work.title }}</h3></router-link>
+			<h4>{{ work.pseud }}</h4>
+			<p>{{ work.summary }}</p>
+			<Hr />
+		</template></ClientOnly>
+	</template>
+</template>

src/views/Work.vue

@@ -10,11 +10,8 @@ const workReadState = useWorkReadState()
 import { useRouteStore } from '@/stores/route.js'
 const routeState = useRouteStore()
 
-import { useBookmarkStore } from '../stores/db.js'
-
 import 'mdui/components/list.js'
 import 'mdui/components/list-item.js'
-import 'mdui/components/dialog.js'
 import 'mdui/components/divider.js'
 import 'mdui/components/linear-progress.js'
 import 'mdui/components/fab.js'
@@ -22,6 +19,9 @@ import 'mdui/components/button.js'
 import 'mdui/components/dropdown.js'
 import 'mdui/components/menu.js'
 import 'mdui/components/menu-item.js'
+import 'mdui/components/collapse.js'
+import 'mdui/components/collapse-item.js'
+import 'mdui/components/card.js'
 
 import '@mdui/icons/bookmark.js'
 
@@ -34,113 +34,36 @@ import { mduiSnackbar } from '../utils.js'
 const fabExtended = ref(false)
 const content = ref(null)
 const readPercent = ref(0)
-const bookmarkDialog = ref(null)
-const bookmarks = ref([])
-const bookmarkMenu = ref(false)
-const bookmarkSelect = ref(null)
 
 let readIndex = 0
 let lastPercent = 0
 let lastCloseTimer = null
 let isObserver = null
-let bookmarkStore = null
 let paragraphs = []
 let currentParagraph = null
 
-async function addBookmark() {
+const categoryName = {
-	if (currentParagraph) {
+	mm: "男/男",
-		const id = await bookmarkStore.add(workReadState.id, readIndex, currentParagraph.textContent.slice(0,20), '')
+	ff: "女/女",
-		bookmarks.value.push(await bookmarkStore.get(id))
+	fm: '女/男'
-		snackbar({
-			message: `在第 ${readIndex} 段 (${readPercent.value}%) 处新建了一个书签`,
-			action: "编辑",
-			onActionClick: () => {
-			prompt({
-				headline: "修改书签",
-				description: "新名字:",
-				confirmText: "完成",
-				cancelText: "算了",
-				onConfirm: (value) => {
-					bookmarkStore.updateName(id, value)
-					bookmarks.value[bookmarks.value.length - 1].name = value
-				}
-			});
-		}})
-	}
 }
 
-async function jumpTo(index) {
-	const value = bookmarks.value[index].index
-	const target = paragraphs[value]
-	bookmarkDialog.value.open = false
-	await nextTick()
-	if (target) {
-		target.scrollIntoView({
-			behavior: 'smooth',
-			block: 'end',
-			inline: 'nearest'
-		})
-	}
-}
-
-async function delAllBookmark() {
-	confirm({
-		headline: '警告',
-		description: '这会清空所有书签! 不可恢复!',
-		confirmText: '我明白',
-		cancelText: '算了',
-		closeOnOverlayClick: true,
-		closeOnEsc: true,
-		onConfirm: () => {
-			bookmarkStore.delByWork(workReadState.id)
-			bookmarks.value = []
-			mduiSnackbar('书签清空辣!')
-		},
-	})
-}
-
-async function editBookmark() {
-	prompt({
-		headline: "修改书签",
-		description: "新名字:",
-		confirmText: "完成",
-		cancelText: "算了",
-		onConfirm: (value) => {
-			bookmarkStore.updateName(bookmarkSelect.value.bk.id, value)
-			bookmarks.value[bookmarkSelect.value.index].name = value
-		}
-	});
-}
-
-function openBookmarkMenu(bk, index) {
-	bookmarkSelect.value = { bk, index };
-	bookmarkMenu.value.open = true
-}
-
-async function deleteBookmark() {
-	if (bookmarkSelect.value) {
-		bookmarkStore.del(bookmarkSelect.value.bk.id)
-		bookmarks.value.splice(bookmarkSelect.value.index)
-		bookmarkSelect.value = null
-	}
-}
 
 onServerPrefetch(async () => {
-	await workReadState.loadWork(route.params.id)
+	await workReadState.loadWork(route.params.id, route.params.cid)
 })
 
 onMounted(async () => {
-	bookmarkStore = useBookmarkStore()
+	if (workReadState.state != 'ssrnotfound') await workReadState.loadWork(route.params.id, route.params.cid)
-	if (workReadState.state != 'ssrnotfound') await workReadState.loadWork(route.params.id)
 	if (workReadState.state == 'ready') {
 		routeState.customTitle = workReadState.title
-		const paraCount = workReadState.text.length - 2
+		const paraCount = workReadState.text.length - 1
 		isObserver = new IntersectionObserver((entries) => {
 			entries.forEach((entry) => {
 				if (entry.isIntersecting) {
 					currentParagraph = entry.target
 					readIndex = entry.target.dataset.index;
-					readPercent.value = parseInt(readIndex / paraCount * 100) 
+					readPercent.value = parseInt(readIndex / paraCount * 100)
 					if (lastPercent == 0) {
 						lastPercent = readPercent.value
 						return
@@ -162,7 +85,6 @@ onMounted(async () => {
 		await nextTick()
 		paragraphs = content.value?.querySelectorAll('p');
 		paragraphs?.forEach(p => isObserver.observe(p));
-		bookmarks.value = await bookmarkStore.getAll(workReadState.id)
 	}
 })
 
@@ -180,68 +102,104 @@ onBeforeUnmount(() => {
 		<template v-if="workReadState.state == 'notfound' || workReadState.state == 'ssrnotfound'">
 			<h2>文章不存在...</h2>
 			是不是链接没有复制完全?<br/>
-			ID: {{workReadState.id}}<br/>
+			ID: {{ workReadState.id }}<br/>
+			<template v-if="workReadState.cid">
+				CID: {{ workReadState.cid }}
+			</template>
 			<a @click="$router.back()">返回</a>
 		</template>
 		<template v-if="workReadState.state == 'ready'">
 			<article>
 				<h1 style="margin: auto">{{ workReadState.title }}</h1>
 				<h4>{{ workReadState.pesud }}</h4>
+				<mdui-card style="margin: 8px; padding: 0px;"><mdui-collapse acc>
+					<mdui-collapse-item value="info"><mdui-list-item class="infoblockhead" slot="header">
+						作品信息
+					</mdui-list-item><div class="infoblock"><dl>
+						<template v-if="workReadState.category"><dt>分类</dt><ul>
+							<li v-for="item in workReadState.category" :key="item">
+							{{ categoryName[item] }}</li>
+						</ul></template>
+						<template v-if="workReadState.fandom"><dt>作品圈</dt><ul>
+							<li v-for="item in workReadState.fandom" :key="item">
+							{{ item }}</li>
+						</ul></template>
+						<dt>语言</dt><dd>
+							{{ workReadState.lang }}
+						</dd>
+					</dl></div></mdui-collapse-item>
+					<mdui-collapse-item value="stats"><mdui-list-item class="infoblockhead" slot="header">
+						作品状态
+					</mdui-list-item><div class="infoblock"><dl>
+						<dt>发布时间</dt><dd>
+							{{ workReadState.publishedTime.year }} -
+							{{ workReadState.publishedTime.month }} -
+							{{ workReadState.publishedTime.date }}
+						</dd>
+						<dt>字数</dt><dd>
+							{{ workReadState.wordCount }}
+						</dd>
+						<dt>点击</dt><dd>
+							{{ workReadState.hitCount }}
+						</dd>
+					</dl></div></mdui-collapse-item>
+				</mdui-collapse></mdui-card>
 				<blockquote>
 					<p v-for="para in workReadState.summary" :key="para" v-html='para'></p>
 				</blockquote>
-				<Hr/>
+				<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" @click="bookmarkDialog.open = true">
+			<mdui-fab class="mdui-fab" :extended="fabExtended">
 				<mdui-icon-bookmark slot="icon"></mdui-icon-bookmark>
 				{{ readPercent }}%
 			</mdui-fab>
-			<mdui-dialog ref='bookmarkDialog' close-on-overlay-click>
-				<span slot="headline">书签</span>
-				<span slot="description">
-					共 {{ bookmarks.length }} 个
-				<br/>
-					点击跳转, 长按条目以 更新/删除
-				</span>
-				<mdui-list v-if="bookmarks.length" style="max-width: 50vh; max-height: 90vh;">
-					<mdui-list-item
-						v-for="(bk, index) in bookmarks"
-						@click="jumpTo(index)"
-						@contextmenu.prevent="openBookmarkMenu(bk, index)"
-					>
-						{{ bk.name || bk.para }}
-					</mdui-list-item>
-				</mdui-list>
-				<span v-else>还没有书签</span>
-				<mdui-dropdown ref='bookmarkMenu' trigger="manual" open-on-pointer>
-					<span slot="trigger" />
-					<mdui-menu>
-					<mdui-menu-item @click="deleteBookmark()">删除</mdui-menu-item>
-					<mdui-menu-item @click="editBookmark()">编辑</mdui-menu-item>
-					</mdui-menu>
-				</mdui-dropdown>
-				<mdui-button slot="action" @click="delAllBookmark" variant="filled">清空</mdui-button>
-				<mdui-button slot="action" @click="addBookmark" variant="text">新建</mdui-button>
-			</mdui-dialog>
 		</template>
 	<template #ssr>
 		<template v-if="workReadState.state == 'notfound' || workReadState.state == 'ssrnotfound'">
 			<h2>文章不存在...</h2>
 			是不是链接没有复制完全?<br/>
 			ID: {{workReadState.id}}<br/>
+			<template v-if="workReadState.cid">
+				CID: {{ workReadState.cid }}
+			</template>
 			<a @click="$router.back()">返回</a>
 		</template>
 		<template v-if="workReadState.state == 'ready'">
-			<h1>{{ workReadState.title }}</h1>
+			<h2>{{ workReadState.title }}</h2>
-			<h2>{{ workReadState.pesud }}</h2>
+			<h4>{{ workReadState.pesud }}</h4>
+			<dl>
+				<template v-if="workReadState.category"><dt>作品圈</dt><ul>
+					<li v-for="item in workReadState.category" :key="item">
+					{{ categoryName[item] }}</li>
+				</ul></template>
+				<template v-if="workReadState.fandom"><dt>原著</dt><ul>
+					<li v-for="item in workReadState.fandom" :key="item">
+					{{ item }}</li>
+				</ul></template>
+				<dt>语言</dt><dd>
+					{{ workReadState.lang }}
+				</dd>
+				<dt>发布时间</dt><dd>
+					{{ workReadState.publishedTime.year }} -
+					{{ workReadState.publishedTime.month }} -
+					{{ workReadState.publishedTime.date }}
+				</dd>
+				<dt>字数</dt><dd>
+					{{ workReadState.wordCount }}
+				</dd>
+				<dt>点击</dt><dd>
+					{{ workReadState.hitCount }}
+				</dd>
+			</dl>
+			<Hr />
 			<blockquote>
 				<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>
@@ -254,4 +212,12 @@ onBeforeUnmount(() => {
     z-index: 1000; /* 确保悬浮按钮在其他内容上方 */
     animation: slideInFromRight var(--mdui-motion-duration-medium2) var(--mdui-motion-easing-standard); /* 动画时长和缓动效果 */
 }
+
+.infoblock {
+	margin: 8px 16px;
+}
+
+.infoblockhead {
+	background-color: rgb(var(--mdui-color-primary-container));
+}
 </style>

vite.config.js

@@ -4,8 +4,9 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueDevTools from 'vite-plugin-vue-devtools'
-import { VitePWA } from 'vite-plugin-pwa';
 import markdown from 'vite-plugin-md'
+import markdownItAnchor from 'markdown-it-anchor'
+import markdownItAttrs from 'markdown-it-attrs'
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -20,20 +21,57 @@ export default defineConfig({
 		}),
 		vueJsx(),
 		vueDevTools(),
-		markdown()
+		markdown({
-		/*VitePWA({
+			markdownItSetup(mdit) {
-			name: '墨宇留香 - 渐进式  Web App 版本',
+				mdit.use(markdownItAttrs)
-			short_name: '墨宇留香',
+				mdit.use(markdownItAnchor, {
-			start_url: '/index.html',
+					permalink: markdownItAnchor.permalink.ariaHidden({
-			display: 'standalone',
+						placement: 'before',
-			"background_color": "#808080",
+						symbol: '#',
-			"theme_color": "#7F3C5C",
+						level: [1, 2, 3, 4],
-			"icons": [
+					}),
-				{
+					slugify: s => s
-					"src": "/favicon.png",
+						.normalize("NFKD")
-					"sizes": "507x580",
+						.replace(/[\u0300-\u036f]/g, "") // 去除重音符号
-					"type": "image/png"
+						.replace(/[^\w\s-]/g, "") // 移除 emoji 和特殊符号
-		}]})*/
+						.trim()
+						.toLowerCase()
+						.replace(/\s+/g, "-")
+				})
+				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)
+				})
+				const defaultClose = mdit.renderer.rules.link_close || ((tokens, idx, options, env, self) => {
+					return self.renderToken(tokens, idx, options)
+				})
+				mdit.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+					const token = tokens[idx]
+					const href = token.attrGet('href') || ''
+					const isExternal = /^https?:\/\//.test(href)
+					const isInternal = /^\/(?!\/)/.test(href)
+					if (isInternal) {
+						// 转换为 <router-link> 并设置 `to`
+						token.tag = 'router-link'
+						token.attrSet('to', href)
+						token.attrs = token.attrs?.filter(attr => attr[0] !== 'href') || []
+					} else if (isExternal) {
+						// 站外链接加上 target="_blank" rel="noopener noreferrer"
+						token.attrSet('target', '_blank')
+						token.attrSet('rel', 'noopener noreferrer')
+					}
+
+					return defaultOpen(tokens, idx, options, env, self)
+				}
+				mdit.renderer.rules.link_close = (tokens, idx, options, env, self) => {
+					const previous = tokens[idx - 1]
+					if (previous?.tag === 'router-link') {
+						tokens[idx].tag = 'router-link'
+					}
+					return defaultClose(tokens, idx, options, env, self)
+				}
+			}
+		})
 	],
 	resolve: {
 		alias: {
@@ -43,47 +81,33 @@ export default defineConfig({
 	build: {
 		rollupOptions: {
 			output: {
-				/*manualChunks(id) {
-					if (id.includes('node_modules')) {
-						return 'vendor';
-					}
-				}*/
 				manualChunks(id) {
 					if (id.includes('node_modules')) {
 						const modules = id.toString().split('node_modules/')[1];
 						const moduleNames = modules.split('/');
-                        const moduleName = moduleNames[0]
+						const moduleName = moduleNames[0]
-                        return `vendor/${moduleName}`
+						return `vendor/${moduleName}`
 					}
-                    if (id.includes('src/views')) {
+					if (id.includes('src/views')) {
 						const modules = id.toString().split('src/views/')[1];
 						const moduleName = modules.split('.')[0];
 						return `page/${moduleName}`;
 					}
-                    if (id.includes('src/components')) {
+					if (id.includes('src/components')) {
 						const modules = id.toString().split('src/components/')[1];
 						const moduleName = modules.split('.')[0];
 						return `component/${moduleName}`;
 					}
-                    if (id.includes('src/texts')) {
+					if (id.includes('src/texts')) {
 						const modules = id.toString().split('src/texts/')[1];
 						const moduleName = modules.split('.')[0];
 						return `text/${moduleName}`;
 					}
-                    if (id.includes('src/stores')) {
+					if (id.includes('src/stores')) {
 						const modules = id.toString().split('src/stores/')[1];
 						const moduleName = modules.split('.')[0];
 						return `store/${moduleName}`;
 					}
-                    if (id.includes('src/router.js')) {
-						return `router`;
-					}
-                    if (id.includes('src/utils.js')) {
-						return `utils`;
-					}
-                    if (id.includes('src/App.vue')) {
-						return `App`;
-					}
 				}
 			}
 		},