增加了一些作品信息展示和更友好的错误界面

[BugFix] 增加了错误界面返回链接缺失的换行修复了不显示作者笔名的陈年老 Bug (我觉得我是不是 SB, 把 pseud 写成 pesud)
[Base] 更新 SSR 机制, 支持流式渲染注入 head 标签
2025-06-09 17:20:48 +08:00 · 2025-06-05 18:02:03 +08:00 · 2025-06-03 17:45:33 +08:00 · 2025-05-31 23:50:23 +08:00 · 2025-05-31 19:11:20 +08:00 · 2025-05-28 20:39:22 +08:00
40 changed files with 2065 additions and 4919 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/index.html
+++ b/index.html
@ -1,9 +1,9 @@
 <!doctype html>
-<html>
+<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/svg" href="/favicon.svg">
+    <link rel="icon" type="image/svg" href="/favicon.svg" />
    <!--app-head-->
  </head>
  <body>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -12,27 +12,26 @@
  },
  "dependencies": {
    "@mdui/icons": "^1.0.2",
-    "axios": "^1.8.1",
+    "@vueuse/core": "^13.3.0",
    "@vueuse/integrations": "^13.3.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.4",
-    "mdui": "^2.1.3",
+    "pinia": "^3.0.2",
-    "pako": "^2.1.0",
+    "vue": "^3.5.15",
-    "pinia": "^3.0.1",
+    "vue-router": "^4.5.1"
    "sirv": "^3.0.1",
    "vue": "^3.5.13",
    "vue-client-only": "^2.1.0",
    "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.89.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"
  }
 }
--- a/public/robots.txt
+++ b/public/robots.txt
@ -0,0 +1,3 @@
 Sitemap: https://ao3.unknownmp.top/sitemap.xml
 User-agent: *
 Disallow: /assets/
--- a/server.js
+++ b/server.js
@ -2,17 +2,15 @@ import fs from 'node:fs/promises'
 import express from 'express'
 import cookieParser from 'cookie-parser'
 import { compress } from 'compress-json'
-// Constants
+
 const isProduction = process.env.NODE_ENV === 'production'
 const port = process.env.PORT || 5173
 const base = process.env.BASE || '/'
 // Cached production assets
 const templateHtml = isProduction
-  ? await fs.readFile('./dist/client/index.html', 'utf-8')
+	? await fs.readFile('./dist/client/index.html', 'utf-8')
-  : ''
+	: ''
 // Create http server
 const app = express()
 app.use(cookieParser());
@ -21,73 +19,110 @@ const MESSAGE = {
 	0: 'Unknown'
 }
 // Add Vite or respective production middlewares
 /** @type {import('vite').ViteDevServer | undefined} */
 let vite
 if (!isProduction) {
-  const { createServer } = await import('vite')
+	const { createServer } = await import('vite')
-  vite = await createServer({
+	vite = await createServer({
-    server: { middlewareMode: true },
+		server: { middlewareMode: true },
-    appType: 'custom',
+		appType: 'custom',
-    base,
+		base,
-  })
+	})
-  app.use(vite.middlewares)
+	app.use(vite.middlewares)
 } else {
-  const compression = (await import('compression')).default
+	const sirv = (await import('sirv')).default
-  const sirv = (await import('sirv')).default
+	app.use(base, sirv('./dist/client', { extensions: [] }))
  app.use(compression())
  app.use(base, sirv('./dist/client', { extensions: [] }))
 }
 // Serve HTML
 app.use('*all', async (req, res) => {
-  try {
+	try {
-    const url = req.originalUrl.replace(base, '')
+		const url = req.originalUrl.replace(base, '')
-  	console.log(`Request ${url}`)
+		console.log(`Request ${url}`)
-    /** @type {string} */
+		let template
-    let template
+		let render, getRoute
-    /** @type {import('./src/entry-server.js').render} */
+		if (!isProduction) {
-    let render, getRoute
+			// Always read fresh template in development
-    if (!isProduction) {
+			template = await fs.readFile('./index.html', 'utf-8')
-      // Always read fresh template in development
+			template = await vite.transformIndexHtml(url, template)
-      template = await fs.readFile('./index.html', 'utf-8')
+			const module = await vite.ssrLoadModule('/src/entry-server.js')
-      template = await vite.transformIndexHtml(url, template)
+			render = module.render
-      const module = await vite.ssrLoadModule('/src/entry-server.js')
+			getRoute = module.getRoute
-      render = module.render
+		} else {
-      getRoute = module.getRoute
+			template = templateHtml
-    } else {
+			const module = await import('./dist/server/entry-server.js')
-      template = templateHtml
+			render = module.render
-      const module = await import('./dist/server/entry-server.js')
+			getRoute = module.getRoute
-      render = module.render
+		}
-      getRoute = module.getRoute
+		const { router, code, title, metas, meta } = await getRoute(url)
-    }
+		if (code != 200 && !req.accepts('html')) {
-    const { router, code } = await getRoute(url)
+			res.status(code).set({ 'Content-Type': 'text/plain' })
-    if (code != 200 && !req.accepts('html')) {
+			res.write(MESSAGE[code] || MESSAGE[0])
-      res.status(code).set({ 'Content-Type': 'text/plain' })
+			res.end()
-      res.write(MESSAGE[code] || MESSAGE[0])
+			return
-      res.end()
+		}
-      return
+		const { stream, piniaState, headState } = await render(router, req.cookies, req.headers.host)
-    }
+		const [htmlStart, htmlEnd] = template.split('<!--app-html-->')
-    const { stream, piniaState } = await render(router, req.cookies, req.headers.host)
+		if (meta) {
-    const [htmlStart, htmlEnd] = template.split('<!--app-html-->')
+			const buffer = []
-    res.status(code).set({ 'Content-Type': 'text/html' })
+			let headReady = false
-    res.write(htmlStart)  
+			for await (const chunk of stream) {
-    for await (const chunk of stream) {
+				if (res.closed) break
-      if (res.closed) break
+				if (headReady) res.write(chunk)
-      res.write(chunk)
+				else {
-    }
+					if (headState.ready) {
-    const piniaStateContent = JSON.stringify(compress(piniaState))
+						res.status(headState.code || code).set({ 'Content-Type': 'text/html' })
-	const stateScript = `<script>window.__PINIA_STATE__=${piniaStateContent}</script>`
+						const heads = [`<title>${ headState.title || title }</title>`]
-    res.write(htmlEnd.replace('<!--app-state-->', stateScript))
+						for (const item of [ ...metas, ...headState.meta ]) {
-    res.end()
+							const properties = []
-  } catch (e) {
+							for (const [key, value] of Object.entries(item)) properties.push(`${key}="${value}"`)
-    vite?.ssrFixStacktrace(e)
+							heads.push(`<meta ${properties.join(' ')}>`)
-    console.log(e.stack)
+						}
-    res.status(500).end(e.stack)
+						res.write(htmlStart.replace('<!--app-head-->',heads.join('')))
-  }
+						for (const item of buffer) res.write(item)
 						res.write(chunk)
 						headReady = true
 					} else buffer.push(chunk)
 				}
 			}
 			if (!headState.ready) {
 				console.warn('Page not set meta ready! No stream render at all!')
 				const heads = [`<title>${ title }</title>`]
 				for (const item of metas) {
 					const properties = []
 					for (const [key, value] of Object.entries(item)) properties.push(`${key}="${value}"`)
 					heads.push(`<meta ${properties.join(' ')}>`)
 				}
 				res.write(htmlStart.replace('<!--app-head-->',heads.join('')))
 				for await (const chunk of buffer) {
 					if (res.closed) break
 					res.write(chunk)
 				}
 			}
 		} else {
 			res.status(code).set({ 'Content-Type': 'text/html' })
 			const heads = [`<title>${ title }</title>`]
 			for (const item of metas) {
 				const properties = []
 				for (const [key, value] of Object.entries(item)) properties.push(`${key}="${value}"`)
 				heads.push(`<meta ${properties.join(' ')}>`)
 			}
 			res.write(htmlStart.replace('<!--app-head-->',heads.join('')))
 			for await (const chunk of stream) {
 				if (res.closed) break
 				res.write(chunk)
 			}
 		}
 		const piniaStateContent = JSON.stringify(compress(piniaState))
 		const stateScript = `<script>window.__PINIA_STATE__=${piniaStateContent}</script>`
 		res.write(htmlEnd.replace('<!--app-state-->', stateScript))
 		res.end()
 	} catch (e) {
 		vite?.ssrFixStacktrace(e)
 		console.log(e.stack)
 		res.status(500).end(e.stack)
 	}
 })
 // Start http server
 app.listen(port, () => {
-  console.log(`Server started at http://localhost:${port}`)
+	console.log(`Server started at port ${port}`)
 })
--- a/src/App.vue
+++ b/src/App.vue
@ -1,6 +1,8 @@
 <script setup>
-import { onMounted, onBeforeMount, onServerPrefetch, nextTick, ref, watch } from 'vue'
+import 'mdui/mdui.css'
-import { useRouter, useRoute, RouterView } from 'vue-router'
+import './main.scss'
 import { onMounted, onBeforeMount, nextTick, ref, watch } from 'vue'
 import { useApiStore } from '@/stores/api.js'
@ -22,39 +24,27 @@ import '@mdui/icons/arrow-back.js'
 import '@mdui/icons/light-mode.js'
 import '@mdui/icons/menu.js'
 const router = useRouter()
 const route = useRoute()
 const clientOnlyStore = useClientOnlyStore()
 const api = useApiStore()
 const themeScheme = useThemeStore()
 const mobileScreen = useMobileScreen()
 const routeStore = useRouteStore()
 const api = useApiStore()
 const mobileScreen = useMobileScreen()
 let themeScheme = null
 const drawerOpen = ref(false)
 const drawer = ref(null)
 const closeDrawer = ref(true)
 let progressTimer = null
 onServerPrefetch(async () => {
 	await api.init()
 })
 onBeforeMount(() => {
 	themeScheme = useThemeStore()
 	mobileScreen.reCal()
 	if(!mobileScreen.isMobile) drawerOpen.value = true
 })
 onMounted(async () => {
 	themeScheme.applyTheme()
 	await api.init()
 	clientOnlyStore.setClient()
-	new MutationObserver(() => {
+	new MutationObserver(() => { if (document.documentElement.style.width.includes('calc')) document.documentElement.style.width = '' })
-	  if (document.documentElement.style.width.includes('calc')) {
+	.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
 		document.documentElement.style.width = '';
 	  }
 	}).observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
 	watch(() => mobileScreen.isMobile, (newV, oldV) => {
 		if( oldV && !newV ) nextTick(() => drawer.value.open = true)
 		if( !oldV && newV ) nextTick(() => drawer.value.open = false)
@ -63,14 +53,9 @@ 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-button-icon @click="drawer.open = !drawer.open"><mdui-icon-menu></mdui-icon-menu></mdui-button-icon>
 			<mdui-icon-menu></mdui-icon-menu>
 		</mdui-button-icon>
 		<!--<mdui-button-icon @click="$router.back()" v-if="$route.path != '/'">
 			<mdui-icon-arrow-back></mdui-icon-arrow-back>
 		</mdui-button-icon>-->
 		<mdui-top-app-bar-title style="color: rgb(var(--mdui-color-on-surface-variant))">{{ routeStore.title }}</mdui-top-app-bar-title>
 		<mdui-circular-progress v-if="routeStore.showProgress" :value='routeStore.progress' :max='routeStore.progressMax'></mdui-circular-progress>
 		<div style="flex-grow: 1"></div>
@ -78,11 +63,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 +78,23 @@ 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>
+		<RouterView />
-	<main :class="{ 'mdui-prose' : clientOnlyStore.isClient }">
+	</main><footer></footer>
 		<RouterView v-slot="{ Component }">
 	    	<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/assets/typescale.css
+++ b/src/assets/typescale.css
@ -1,42 +0,0 @@
 .typescale-body-large {
 	line-height: var(--mdui-typescale-body-large-line-height);
 	font-size: var(--mdui-typescale-body-large-size);
 	letter-spacing: var(--mdui-typescale-body-large-tracking);
 	font-weight: var(--mdui-typescale-body-large-weight);
 }
 .typescale-body-small {
 	line-height: var(--mdui-typescale-body-small-line-height);
 	font-size: var(--mdui-typescale-body-small-size);
 	letter-spacing: var(--mdui-typescale-body-small-tracking);
 	font-weight: var(--mdui-typescale-body-small-weight);
 }
 .typescale-label-small {
 	line-height: var(--mdui-typescale-label-small-line-height);
 	font-size: var(--mdui-typescale-label-small-size);
 	letter-spacing: var(--mdui-typescale-label-small-tracking);
 	font-weight: var(--mdui-typescale-label-small-weight);
 }
 .typescale-headline-small {
 	line-height: var(--mdui-typescale-headline-small-line-height);
 	font-size: var(--mdui-typescale-headline-small-size);
 	letter-spacing: var(--mdui-typescale-headline-small-tracking);
 	font-weight: var(--mdui-typescale-headline-small-weight);
 }
 .typescale-headline-large {
 	line-height: var(--mdui-typescale-headline-large-line-height);
 	font-size: var(--mdui-typescale-headline-large-size);
 	letter-spacing: var(--mdui-typescale-headline-large-tracking);
 	font-weight: var(--mdui-typescale-headline-large-weight);
 }
 .typescale-headline-medium {
 	line-height: var(--mdui-typescale-headline-medium-line-height);
 	font-size: var(--mdui-typescale-headline-medium-size);
 	letter-spacing: var(--mdui-typescale-headline-medium-tracking);
 	font-weight: var(--mdui-typescale-headline-medium-weight);
 }
--- a/src/composables/apiRequest.js
+++ b/src/composables/apiRequest.js
@ -0,0 +1,59 @@
 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 baseURL = getEndpoint()
  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 () => {
    const start = Date.now()
    try { await execute() }
    catch (e) {}
    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,
      error: error.value,
      isSSR: import.meta.env.SSR,
    }
  }
  return { execute: exec, isFinished, isLoading }
 }
--- a/src/entry-client.js
+++ b/src/entry-client.js
@ -1,5 +1,4 @@
 import { decompress } from 'compress-json'
 import './main.css'
 import { createApp } from './main'
 import { createSSRRouter } from './router.js'
@ -9,15 +8,7 @@ const router = createSSRRouter()
 app.use(router)
-if (window.__PINIA_STATE__) {
+if (window.__PINIA_STATE__) pinia.state.value = decompress(window.__PINIA_STATE__)
  pinia.state.value = decompress(window.__PINIA_STATE__)
 }
-if (window.__INITIAL_STATE__) {
+router.isReady().then(() => app.mount('#app'))
  window.__INITIAL_STATE__ = decompress(window.__INITIAL_STATE__)
 }
 router.isReady().then(() => {
  app.mount('#app')
 })
--- a/src/entry-server.js
+++ b/src/entry-server.js
@ -1,28 +1,32 @@
-import { renderToWebStream, renderToString } from 'vue/server-renderer'
+import { renderToWebStream } from 'vue/server-renderer'
 import { createApp } from './main'
-import { createSSRRouter } from './router.js'
+import { createSSRRouter, defaultHead } from './router.js'
 export async function getRoute(_url) {
-  const router = createSSRRouter()
+	const router = createSSRRouter()
-  await router.push(_url)
+	await router.push(_url)
-  await router.isReady()
+	await router.isReady()
-  const route = router.currentRoute.value.matched[0]
+	const route = router.currentRoute.value.matched[0]
-  const code = route.meta.code || 200
+	const code = route.meta.code || 200
-  return { router, code }
+	return { router, code, meta: route.meta.meta || false,
 		title: route.meta.title || route.meta.name || defaultHead.title,
 		metas: [...defaultHead.meta, ...route.meta.metas || []]
 	}
 }
 export async function render(router, cookies, host) {
-  const { app, pinia } = createApp()
+	const { app, pinia } = createApp()
-  
+	app.use(router)
-  app.use(router)
+	const headState = {
-  const ctx = {
+		ready: false,
-    cookies,
+		code: null,
-    host,
+		title: null,
-    initialState: {}
+		meta: []
-  }
+	}
-  const stream = renderToWebStream(app, ctx)
+	const ctx = { cookies, host, headState }
-  const piniaState = pinia.state.value
+	const stream = renderToWebStream(app, ctx)
-  return { stream, piniaState }
+	const piniaState = pinia.state.value
 	return { stream, piniaState, headState }
 }
--- a/src/main.css
+++ b/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;
 }
--- a/src/main.js
+++ b/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 }
 }
--- a/src/main.scss
+++ b/src/main.scss
@ -0,0 +1,47 @@
 $font-family: Roboto, Noto Sans SC, PingFang SC, Lantinghei SC,
  Microsoft Yahei, Hiragino Sans GB, "Microsoft Sans Serif",
  WenQuanYi Micro Hei, sans-serif;
 $bg-color: rgb(var(--mdui-color-background));
 $error-color: rgb(var(--mdui-color-error));
 $on-error-color: rgb(var(--mdui-color-on-error));
 html {
  scroll-padding-top: 64px;
 }
 body {
  font-family: $font-family;
  background-color: $bg-color;
 }
 pre {
  overflow-x: auto;
  overflow-y: hidden;
 }
 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;
 }
--- a/src/router.js
+++ b/src/router.js
@ -1,50 +1,99 @@
 import { createMemoryHistory, createWebHistory, createRouter } from 'vue-router'
-export function createSSRRouter() {
+export const defaultHead = {
-	const router = createRouter({
+	title: 'AO3 Mirror',
-		history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
+	meta: [
-		routes: [{
+		{ name: 'description',
-			path: '/',
+		content: 'ArchiveOfOurOwn 镜像站, 使用 Vue 3 与 MDUI 2 重写界面, 优化 UI/UX' },
-			name: '前言',
+		{ name: 'author',
-			component: () => import('./views/Root.vue'),
+		content: 'UnknownMp' },
-			meta: {
+		{ property: 'og:title',
-				title: "首页",
+		content: 'AO3 Mirror' },
-				order: 1
+		{ property: 'og:description',
-			},
+		content: 'ArchiveOfOurOwn 重构镜像' },
-		},{
+		{ property: 'og:image',
-			path: '/work/:id',
+		content: 'https://cdn.unknownmp.top/website/ao3mirror.svg' },
-			name: '阅读',
+		{ property: 'og:url',
-			component: () => import('./views/Work.vue'),
+		content: 'https://ao3.unknownmp.top' },
-			meta: {
+		{ property: 'og:type',
-				title: "",
+		content: 'website' },
-				hidden: true
+	]
 			}
 		},{
 			path: '/about',
 			name: '关于',
 			component: () => import('./views/About.vue'),
 			meta: {
 				title: "",
 				order: 2
 			},
 		},{
 			path: '/developer',
 			name: '开发人员选项',
 			component: () => import('./views/Developer.vue'),
 			meta: {
 				title: "",
 				hidden: true
 			},
 		},{
 			path: '/:catchAll(.*)',
 			name: 'NotFound',
 			component: () => import('./views/fallback/NotFound.vue'),
 			meta: {
 				title: "页面未找到",
 				hidden: true,
 				code: 404
 			}
 		}
 	]})
 	return router
 }
 export const createSSRRouter = () => 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: '首页',
 			order: 1
 		},
 	},{
 		path: '/work/:id',
 		name: 'work',
 		component: () => import('./views/Work.vue'),
 		meta: {
 			title: '阅读',
 			hidden: true,
 			meta: true
 		}
 	},{
 		path: '/work/:id/:cid',
 		name: 'workChapter',
 		component: () => import('./views/Work.vue'),
 		meta: {
 			title: '阅读',
 			hidden: true,
 			meta: true
 		}
 	},{
 		path: '/search/simple',
 		name: '搜索',
 		component: () => import('./views/SimpleSearch.vue'),
 		meta: {
 			title: '搜索',
 			order: 2
 		}
 	},{
 		path: '/settings',
 		name: '设置',
 		component: () => import('./views/Settings.vue'),
 		meta: {
 			order: 90
 		},
 	},{
 		path: '/about',
 		name: '关于',
 		component: () => import('./views/About.md'),
 		meta: {
 			order: 100
 		},
 	},{
 		path: '/developer',
 		name: '开发人员选项',
 		component: () => import('./views/Developer.vue'),
 		meta: {
 			hidden: true
 		},
 	},{
 		path: '/:catchAll(.*)',
 		name: 'NotFound',
 		component: () => import('./views/fallback/NotFound.vue'),
 		meta: {
 			title: '页面未找到',
 			hidden: true,
 			code: 404
 		}
 	}
 ]})
--- a/src/ssr/ClientOnly.vue
+++ b/src/ssr/ClientOnly.vue
@ -2,11 +2,11 @@
 import { useClientOnlyStore } from './clientOnlyStore.js'
 const clientOnlyStore = useClientOnlyStore()
 </script>
-<template data-allow-mismatch>
+<template>
-  <template v-if="clientOnlyStore.isClient" data-allow-mismatch>
+  <template v-if="clientOnlyStore.isClient">
    <slot></slot>
  </template><template v-else>
-    <slot name="ssr" data-allow-mismatch></slot>
+    <slot name="ssr"></slot>
  </template>
 </template>
--- a/src/ssr/ClientOnly1.vue
+++ b/src/ssr/ClientOnly1.vue
@ -1,25 +0,0 @@
 <script setup>
 import { ref, onMounted, useSlots } from 'vue'
 const isClient = ref(false)
 const slots = useSlots()
 onMounted(() => {
  isClient.value = true
 })
 /*
 USe:
 <ClientOnly>
 	<template #ssr>
 		SSR Content
 	</template>
 	Real Content
 </ClientOnly>
 */
 </script>
 <template data-allow-mismatch>
  <template v-if="isClient" data-allow-mismatch><slot></slot></template>
  <template v-else><slot name="ssr" data-allow-mismatch></slot></template>
 </template>
--- a/src/ssr/headHelper.js
+++ b/src/ssr/headHelper.js
@ -0,0 +1,47 @@
 import { useSSRContext } from 'vue'
 export function useHeadHelper() {
 	if (!import.meta.env.SSR) {
 		return {
 			headReady: () => {},
 			setMeta: () => {},
 			addMeta: () => {},
 			setTitle: () => {},
 			setCode: () => {},
 		}
 	}
 	const ssrContext = useSSRContext()
 	if (!ssrContext || !ssrContext.headState) {
 		return {
 			headReady: () => {},
 			setMeta: () => {},
 			addMeta: () => {},
 			setTitle: () => {},
 			setCode: () => {},
 		}
 	}
 	return {
 		headReady: () => {
 			ssrContext.headState.ready = true
 		},
 		setMeta: (metas = []) => {
 			ssrContext.headState.meta = [
 				...ssrContext.headState.meta,
 				...metas
 			]
 		},
 		addMeta: (meta) => {
 			ssrContext.headState.meta.push(meta)
 		},
 		setTitle: (title) => {
 			ssrContext.headState.title = title
 		},
 		setCode: (code) => {
 			ssrContext.headState.code = code
 		}
 	}
 }
--- a/src/ssr/useInitialState.js
+++ b/src/ssr/useInitialState.js
@ -1,9 +0,0 @@
 export function getInitialState(key) {
  if (typeof window !== 'undefined' && window.__INITIAL_STATE__) {
    if (window.__INITIAL_STATE__[key] !== undefined) {
      let value = window.__INITIAL_STATE__[key]
      delete window.__INITIAL_STATE__[key]
      return value
    }
  }
 }
--- a/src/stores/api.js
+++ b/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.js'
 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
 	}
 })
--- a/src/stores/appSetting.js
+++ b/src/stores/appSetting.js
@ -0,0 +1,27 @@
 import { defineStore } from 'pinia'
 import { useStorage } 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/db.js
+++ b/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
 	}
 })
--- a/src/stores/route.js
+++ b/src/stores/route.js
@ -2,6 +2,8 @@ import { ref, computed, watch } from 'vue'
 import { defineStore } from 'pinia'
 import { useRouter, useRoute } from 'vue-router'
 import { useHeadHelper } from '../ssr/headHelper.js'
 export const useRouteStore = defineStore('route', () => {
 	const router = useRouter()
 	const route = useRoute()
@ -16,14 +18,14 @@ export const useRouteStore = defineStore('route', () => {
 	)
 	const lastFromDrawer = ref(0)
 	const customTitle = ref(null)
-	const title = computed(() => customTitle.value || route.meta.title || route.name)
+	const title = import.meta.env.SSR ?
 		computed(() => route.meta.title || route.name) :
 		computed(() => customTitle.value || route.meta.title || route.name)
 	function drawerPress(target) {
 		if (lastFromDrawer.value == 0) {
 			lastFromDrawer.value = 1
 			router.push(target)
-		} else {
+		} else router.replace(target)
 			router.replace(target)
 		}
 	}
 	const progress = ref(0)
 	const progressMax = ref(1)
@ -32,11 +34,9 @@ export const useRouteStore = defineStore('route', () => {
 		watch(title, title => document.title = title)
 		let progressTimer = null
 		router.beforeEach((to, from) => {
-			if (lastFromDrawer.value == 2) {
+			if (showProgress.value) return false
-				lastFromDrawer.value = 0
+			if (lastFromDrawer.value == 2) lastFromDrawer.value = 0
-			} else if (lastFromDrawer.value == 1) {
+			else if (lastFromDrawer.value == 1) lastFromDrawer.value = 2
 				lastFromDrawer.value = 2
 			}
 			progress.value = 0
 			progressMax.value = 1
 			showProgress.value = true
--- a/src/stores/search.js
+++ b/src/stores/search.js
@ -0,0 +1,57 @@
 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(0)
 	const pageCount = ref(0)
 	const currentPage = ref(0)
 	const state = ref(null)
 	async function load() {
 		if (pageCount.value && currentPage.value >= pageCount.value){ state.value = 'finish'; return }
 		state.value = 'loading'
 		let res = await api.workSimpleSearch(keyword.value, currentPage.value)
 		res = res.data
 		if (res.code == 0) {
 			currentPage.value++
 			if( pageCount.value ) {
 				if (currentPage.value > pageCount.value) currentPage.value = pageCount.value
 			} else {
 				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 ( count.value ) {
 				state.value = 'finish'
 			} else {
 				currentPage.value = 0
 				state.value = 'notfound'
 			}
 		}
 	}
 	async function start(key) {
 		if (key == keyword.value) return
 		keyword.value = key
 		result.value = []
 		state.value = 'loading'
 		currentPage.value = 1
 		pageCount.value = 0
 		await load()
 	} 
 	return {
 		keyword,
 		result,
 		count,
 		pageCount,
 		currentPage,
 		state,
 		load, start
 	}
 })
--- 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 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) {
--- a/src/stores/workRead.js
+++ b/src/stores/workRead.js
@ -8,40 +8,82 @@ 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 completedTime = ref(null)
 	const updatedTime = ref(null)
 	const wordCount = ref(0)
 	const kudoCount = ref(0)
 	const hitCount = ref(0)
 	const category = ref([])
 	const fandom = ref([])
 	const lang = ref(null)
 	const chapters = ref([])
 	const chapterIndex = ref(null)
 	const chapterStat = ref(null)
 	function setData(data) {
 		cid.value = data.chapterId
 		id.value = data.workId
 		title.value = data.title
-		summary.value = [escapeAndFormatText(data.summary)]
+		summary.value = data.summary ? escapeAndFormatText(data.summary) : null
-		pesud.value = data.pesud
+		pseud.value = data.pseud
-		text.value = data.text.split('\n\n')
+		text.value = data.text
 		publishedTime.value = data.stats.publishedTime
 		completedTime.value = data.stats.completedTime
 		updatedTime.value = data.stats.updatedTime
 		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
 		chapters.value = data.chapters || []
 		chapterIndex.value = data.chapterIndex ?? null
 		chapterStat.value = data.stats.chapter
 	}
-	async function loadWork(target) {
+	async function loadWork(target, targetc) {
-		if (target == id.value || state.value == 'loading') return
+		const itarget = parseInt(target)
 		if (isNaN(itarget)) {
 			console.log('a')
 			state.value = 'errformat'
 			return
 		}
 		const itargetc = parseInt(targetc)
 		if (
 			itarget === id.value &&
 			(itargetc === cid.value || (isNaN(itargetc) && cid.value === null)) &&
 			state.value !== 'loading'
 		) return
 		id.value = itarget
 		cid.value = isNaN(itargetc) ? null : itargetc
 		state.value = 'loading'
-		const result = await api.getWork(target)
+		const result = await api.getWork(id.value, cid.value)
 		if (result.status == 200) {
 			setData(result.data)
 			state.value = 'ready'
-		} else {
+		} else if (result.status == 404) {
 			id.value = target
 			state.value = import.meta.env.SSR ? 'ssrnotfound' : 'notfound'
 		} else if (result.status == 401) {
 			state.value = 'unauth'
 		} else if (result.status == 500) {
 			state.value = 'error'
 		}
 	}
 	return {
-		id,
+		id, cid,
-		title,
+		title, summary,
-		summary,
+		pseud, text, state,
 		pesud,
 		text,
 		publishedTime,
-		state,
+		completedTime,
-		setData,
+		updatedTime,
-		loadWork
+		wordCount, kudoCount, hitCount,
 		category, fandom, lang,
 		chapters, chapterIndex, chapterStat,
 		setData, loadWork
 	}
 })
--- a/src/texts/about.md
+++ b/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 (赛博佛祖😭)
--- a/src/texts/intro.md
+++ b/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)**
--- a/src/ui/BetterHr.vue
+++ b/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>
--- a/src/ui/Form.vue
+++ b/src/ui/Form.vue
@ -0,0 +1,20 @@
 <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>
 <template>
  <form @submit="handleSubmit">
    <slot></slot>
  </form>
 </template>
--- a/src/utils.js
+++ b/src/utils.js
@ -1,11 +1,7 @@
 import { snackbar } from 'mdui/functions/snackbar.js'
 import { alert } from 'mdui/functions/alert.js'
-export function mduiSnackbar(message) {
+export const mduiSnackbar = (message) => snackbar({ message })
 	snackbar({
 		message: message,
 	})
 }
 export function mduiAlert(title,desc,callback = null,confirmText = "OK") {
 	alert({
@ -19,50 +15,44 @@ export function mduiAlert(title,desc,callback = null,confirmText = "OK") {
 }
 export function getQueryVariable(variable) {
-    var query = window.location.search.substring(1);
+	var query = window.location.search.substring(1)
-    var vars = query.split("&")
+	var vars = query.split("&")
-    for (var i=0;i<vars.length;i++) {
+	for (var i=0;i<vars.length;i++) {
-        var pair = vars[i].split("=")
+		var pair = vars[i].split("=")
-        if(pair[0] == variable){return pair[1]}
+		if(pair[0] == variable){return pair[1]}
-    }
+	}
-    return(null);
+	return null
 }
-export const escapeHtml = (text) =>
+export const escapeHtml = (text) => text
-    text
+	.replace(/&/g, "&amp;") // 转义 &
-      .replace(/&/g, "&amp;") // 转义 &
+	.replace(/</g, "&lt;") // 转义 <
-      .replace(/</g, "&lt;") // 转义 <
+	.replace(/>/g, "&gt;") // 转义 >
-      .replace(/>/g, "&gt;") // 转义 >
+	.replace(/"/g, "&quot;") // 转义 "
-      .replace(/"/g, "&quot;") // 转义 "
+	.replace(/'/g, "&#39;"); // 转义 '
      .replace(/'/g, "&#39;"); // 转义 '
-export function escapeAndFormatText(input) {
+export const escapeAndFormatText = (text) => escapeHtml(text)
-  let escapedText = escapeHtml(input);
+	.replace(/ /g, "&nbsp;")
-  escapedText = escapedText.replace(/ /g, "&nbsp;");
+	.replace(/\t/g, "&emsp;&emsp;")
-  escapedText = escapedText.replace(/\t/g, "&emsp;&emsp;");
+	.replace(/\n/g, "<br/>")
  escapedText = escapedText.replace(/\n/g, "<br/>");
  return escapedText;
 }
 export function getCookie(name) {
 	const cookieArr = document.cookie.split(";")
 	for (let i = 0; i < cookieArr.length; i++) {
 		const cookiePair = cookieArr[i].trim()
-		if (cookiePair.startsWith(name + "=")) {
+		if (cookiePair.startsWith(name + "=")) return cookiePair.substring(name.length + 1)
-			return cookiePair.substring(name.length + 1);
+	}
-		}
+	return null
  }
  return null;
 }
 export function setCookie(name, value, days = 3650) {
 	var expires = ""
 	if (days) {
 		var date = new Date()
-		date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+		date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000))
 		expires = "; expires=" + date.toUTCString()
 	}
-	document.cookie = name + "=" + value + expires + "; path=/";
+	document.cookie = name + "=" + value + expires + "; path=/"
 }
 export function objectToQueryString(obj, parentKey = '') {
@ -71,42 +61,37 @@ export function objectToQueryString(obj, parentKey = '') {
 		if (!Object.prototype.hasOwnProperty.call(obj, key)) continue
 		let value = obj[key]
 		let newKey = parentKey ? `${parentKey}[${key}]` : key
-		if (typeof value === 'object' && value !== null) {
+		if (typeof value === 'object' && value !== null) parts.push(objectToQueryString(value, newKey))
-			parts.push(objectToQueryString(value, newKey))
+		else parts.push(encodeURIComponent(newKey) + '=' + encodeURIComponent(value))
 		} else {
 			parts.push(encodeURIComponent(newKey) + '=' + encodeURIComponent(value))
 		}
 	}
 	return parts.join('&')
 }
 export function formatUnixTimestamp(unixTimestamp, timeZone) {
-    const date = new Date(unixTimestamp * 1000); // 将 UNIX 时间戳转换为毫秒
+	const date = new Date(unixTimestamp * 1000)
-    const options = {
+	const options = {
-        timeZone: timeZone || Intl.DateTimeFormat().resolvedOptions().timeZone, // 使用指定时区或浏览器本地时区
+		timeZone: timeZone || Intl.DateTimeFormat().resolvedOptions().timeZone,
-        year: 'numeric',
+		year: 'numeric',
-        month: '2-digit',
+		month: '2-digit',
-        day: '2-digit',
+		day: '2-digit',
-        hour: '2-digit',
+		hour: '2-digit',
-        minute: '2-digit',
+		minute: '2-digit',
-        second: '2-digit',
+		second: '2-digit',
-        hour12: false, // 24小时制
+		hour12: false,
-    };
+	}
-    const formatter = new Intl.DateTimeFormat('en-US', options);
+	const formatter = new Intl.DateTimeFormat('en-US', options)
-    const parts = formatter.formatToParts(date);
+	const parts = formatter.formatToParts(date)
-    const formatMap = {};
+	const formatMap = {}
-    parts.forEach(({ type, value }) => {
+	parts.forEach(({ type, value }) => { formatMap[type] = value })
-        formatMap[type] = value;
+	return `${formatMap.year}-${formatMap.month}-${formatMap.day} ${formatMap.hour}:${formatMap.minute}:${formatMap.second}`
    });
    return `${formatMap.year}-${formatMap.month}-${formatMap.day} ${formatMap.hour}:${formatMap.minute}:${formatMap.second}`;
 }
 export function isMobileDeviceByUA() {
-  const ua = navigator.userAgent || navigator.vendor || window.opera;
+	const ua = navigator.userAgent || navigator.vendor || window.opera
-  return /android/i.test(ua) ||
+	return /android/i.test(ua) ||
-         /iphone/i.test(ua) ||
+		/iphone/i.test(ua) ||
-         /ipod/i.test(ua) ||
+		/ipod/i.test(ua) ||
-         /ipad/i.test(ua) ||
+		/ipad/i.test(ua) ||
-         /blackberry/i.test(ua) ||
+		/blackberry/i.test(ua) ||
-         /windows phone/i.test(ua);
+		/windows phone/i.test(ua)
 }
--- a/src/views/About.md
+++ b/src/views/About.md
@ -0,0 +1,63 @@
 <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
 作者 {#contact}
 ---
 - [UnknownMp](https://www.unknownmp.top)  
  邮件: unknownmp@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 />
--- a/src/views/About.vue
+++ b/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>
--- a/src/views/Developer.vue
+++ b/src/views/Developer.vue
@ -1,11 +1,9 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useApiStore } from '@/stores/api.js'
 import { useRouteStore } from '../stores/route.js'
 const router = useRouter()
 const api = useApiStore()
 const routeStore = useRouteStore()
@ -30,45 +28,33 @@ onMounted(() => {
 })
 </script>
 <template>
 	<h1 class="warn-text">注意本页面仅为测试用!</h1>
 	<blockquote>
 		当然如果你是乱点那个唐鬼小人进来的, 这就是个彩蛋? (神金
-	</blockquote>
+	</blockquote><Hr />
 	<Hr />
 	<section>
 		<h2>页面信息</h2>
 		<h3>可见路由信息:</h3>
 		<pre>{{ routeStore.allRoutes }}</pre>
-	</section>
+	</section><Hr />
-	<Hr />
+	<ClientOnly><section>
-	<ClientOnly>
+		<h2>浏览器信息</h2><dl>
-		<section>
+		<dt>User-Agent:</dt>
-			<h2>浏览器信息</h2>
+		<dd>{{ ua }}</dd>
-			<dl>
+		<dt>语言:</dt>
-				<dt>User-Agent:</dt>
+		<dd>{{ language }}</dd>
-				<dd>{{ ua }}</dd>
+		<dt>平台:</dt>
-				<dt>语言:</dt>
+		<dd>{{ platform }}</dd>
-				<dd>{{ language }}</dd>
+		<dt>屏幕尺寸:</dt>
-				<dt>平台:</dt>
+		<dd>{{ screenSize }}</dd>
-				<dd>{{ platform }}</dd>
+		<dt>视口尺寸:</dt>
-				<dt>屏幕尺寸:</dt>
+		<dd>{{ viewportSize }}</dd>
-				<dd>{{ screenSize }}</dd>
+		<dt>像素比:</dt>
-				<dt>视口尺寸:</dt>
+		<dd>{{ pixelRatio }}</dd>
-				<dd>{{ viewportSize }}</dd>
+		<dt>是否触屏设备:</dt>
-				<dt>像素比:</dt>
+		<dd>{{ touchSupport ? '是' : '否' }}</dd>
-				<dd>{{ pixelRatio }}</dd>
+		<dt>页面可见性状态:</dt>
-				<dt>是否触屏设备:</dt>
+		<dd>{{ visibility }}</dd>
-				<dd>{{ touchSupport ? '是' : '否' }}</dd>
+	</dl></section><Hr /></ClientOnly>
 				<dt>页面可见性状态:</dt>
 				<dd>{{ visibility }}</dd>
 			</dl>
 		</section>
 		<Hr />
 	</ClientOnly>
 </template>
 <style scoped>
 </style>
--- a/src/views/Mask.vue
+++ b/src/views/Mask.vue
@ -1,24 +0,0 @@
 <script setup>
 import { ref, onMounted, onServerPrefetch, onBeforeMount} from 'vue'
 import { useRouter, useRoute, RouterView } from 'vue-router'
 const router = useRouter()
 import { useApiStore } from '@/stores/api.js'
 const api = useApiStore()
 onServerPrefetch(async () => {
 	// Load data
 })
 onBeforeMount(() => {
 	// Re apply data
 })
 onMounted(() => {
 	// Render other
 })
 </script>
 <template>
 	Padding! No content cause hydration mismatch!
 </template>
 <style scoped>
 </style>
--- a/src/views/Root.vue
+++ b/src/views/Root.vue
@ -9,64 +9,60 @@ 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) ) {
+	if( Number(from) ) {return {
-		return {
+		type: 's',
-			id: Number(from)
+		id: Number(from)
-		}
+	}} else if (from.includes('https://archiveofourown.org/works/')) {
 	} else if (from.includes('https://archiveofourown.org/works/')) {
 		const sid = from.split('https://archiveofourown.org/works/')[1];
 		if ( sid ) {
 			const id = Number(sid)
-			if (id) {
+			if (id) { return {
-				return {
+				type: 's',
-					type: 's',
+				id
-					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) return
-		err.value = true
+	else if ( type == 'f') router.push(`/search/simple?keyword=${encodeURIComponent(key)}`)
-		srcText.value?.focus()
+	else {
 	} else {
 		err.value = false
 		if (cid) router.push(`/work/${id}/${cid}`)
 		else router.push(`/work/${id}`)
 	}
 }
 </script>
 <template>
-	<img style="display: block; margin: 0px auto 10px;" height="200px" alt="logo" src="/favicon.svg" />
+	<img style="display: block; margin: 0px auto 10px;" height="200px" width="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>
+		</div><template #ssr>
-			{{ src }}
+			<input type="text" id="src" name="src" />
-		<template #ssr>
+			<input type="submit" />
-			Padding...
+		</template></ClientOnly></Form>
-		</template></ClientOnly>
+	</section><Hr/>
-	</section>
+	<Intro />
 </template>
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@ -0,0 +1,36 @@
 <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/SimpleSearch.vue
+++ b/src/views/SimpleSearch.vue
@ -0,0 +1,86 @@
 <script setup>
 import { ref, watch, onMounted, nextTick, onServerPrefetch, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter } 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 router = useRouter()
 const simpleSearchState = useSimpleSearchState()
 const inputField = ref('')
 const label = ref(null)
 const stateLabel = {
 	'loading': '加载中',
 	'finish': '加载完成',
 	'ready': '就绪',
 	'ssrready': '就绪',
 	'notfound': '未找到',
 	'ssrnotfound': '未找到',
 }
 let isObserver = null
 onServerPrefetch(async () => { if (route.query.keyword) await simpleSearchState.start(route.query.keyword) })
 onMounted(async () => {
 	watch(() => simpleSearchState.keyword, () => document.title = simpleSearchState.keyword)
 	inputField.value = route.query.keyword || ''
 	if (inputField.value && simpleSearchState != 'ssrready') simpleSearchState.start(inputField.value)
 	isObserver = new IntersectionObserver((entries) => {
 		entries.forEach((entry) => {
 			if (entry.isIntersecting) if (simpleSearchState.state == 'ready' || simpleSearchState.state == 'ssrready') setTimeout(simpleSearchState.load,400)
 		})
 	}, { threshold: 1 })
 	await nextTick()
 	isObserver.observe(label.value)
 })
 onBeforeUnmount(() => isObserver.disconnect())
 function onSubmit(data) {
 	if (simpleSearchState) {
 		simpleSearchState.start(data.src)
 		router.replace(`/search/simple?keyword=${encodeURIComponent(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 />
 	<template v-if="simpleSearchState.state == 'ready' || simpleSearchState.state == 'finish' || simpleSearchState.state == 'ssrready'">
 		<p>找到 {{ simpleSearchState.count }}</p><Hr/>
 	</template>
 	<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>
 	<p style="display: flex;" ref='label'>
 		{{ stateLabel[simpleSearchState.state] }} ({{ simpleSearchState.count }})
 	<span style="flex: 1;"/>
 		{{ simpleSearchState.currentPage }} / {{ simpleSearchState.pageCount }}
 	</p>
 </template>
--- a/src/views/Work.vue
+++ b/src/views/Work.vue
@ -1,20 +1,19 @@
 <script setup>
-import { ref, onMounted, onServerPrefetch, onBeforeUnmount, watch, nextTick } from 'vue'
+import { ref, onMounted, onBeforeUnmount, onServerPrefetch, watch, nextTick } from 'vue'
-import { useRouter, useRoute, RouterView } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 const router = useRouter()
 const route = useRoute()
 import { useHeadHelper } from '../ssr/headHelper.js'
 import { useWorkReadState } from '@/stores/workRead.js'
 const workReadState = useWorkReadState()
 import { useRouteStore } from '@/stores/route.js'
 const routeState = useRouteStore()
-import { useBookmarkStore } from '../stores/db.js'
+const routeState = useRouteStore()
 const workReadState = useWorkReadState()
 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,125 +21,60 @@ import 'mdui/components/button.js'
 import 'mdui/components/dropdown.js'
 import 'mdui/components/menu.js'
 import 'mdui/components/menu-item.js'
 import 'mdui/components/card.js'
 import '@mdui/icons/bookmark.js'
 import { confirm } from 'mdui/functions/confirm.js'
 import { snackbar } from 'mdui/functions/snackbar.js'
 import { prompt } from 'mdui/functions/prompt.js'
 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
 const chapterDialog = ref(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)
+	const headHelper = useHeadHelper()
 	await workReadState.loadWork(route.params.id, route.params.cid)
 	if (workReadState.state == 'ready') headHelper.setTitle(workReadState.title)
 	else if (workReadState.state == 'ssrnotfound') {
 		headHelper.setTitle('文章未找到')
 		headHelper.setCode(404)
 	} else if (workReadState.state == 'unauth') {
 		headHelper.setTitle('访问被阻止')
 		headHelper.setCode(401)
 	}
 	headHelper.headReady()
 })
 onMounted(async () => {
-	bookmarkStore = useBookmarkStore()
+	watch(() => workReadState.state, (value) => { if (value == 'ready') routeState.customTitle = workReadState.title })
-	if (workReadState.state != 'ssrnotfound') await workReadState.loadWork(route.params.id)
+	if (workReadState.state != 'ssrnotfound' && workReadState.state != 'ready') await workReadState.loadWork(route.params.id, route.params.cid)
 	if (workReadState.state == 'ready') {
 		routeState.customTitle = workReadState.title
-		const paraCount = workReadState.text.length - 2
+		if (workReadState.cid !== null && parseInt(route.params.cid) != workReadState.cid) {
 			router.replace(`/work/${workReadState.id}/${workReadState.cid}`)
 			return
 		}
 		const paraCount = workReadState.text.length - 1
 		isObserver = new IntersectionObserver((entries) => {
 			entries.forEach((entry) => {
 				if (entry.isIntersecting) {
 					currentParagraph = entry.target
-					readIndex = entry.target.dataset.index;
+					readIndex = entry.target.dataset.index	
-					readPercent.value = parseInt(readIndex / paraCount * 100) 
+					readPercent.value = parseInt(readIndex / paraCount * 100)
 					if (lastPercent == 0) {
 						lastPercent = readPercent.value
 						return
@ -160,93 +94,209 @@ onMounted(async () => {
 			threshold: 0.5
 		})
 		await nextTick()
-		paragraphs = content.value?.querySelectorAll('p');
+		paragraphs = content.value?.querySelectorAll('p')
-		paragraphs?.forEach(p => isObserver.observe(p));
+		paragraphs?.forEach(p => isObserver.observe(p))
 		bookmarks.value = await bookmarkStore.getAll(workReadState.id)
 	}
 })
-onBeforeUnmount(() => {
+onBeforeUnmount(() => { if(isObserver) isObserver.disconnect() })
-	isObserver.disconnect();
+
-})
+async function switchWorkWithIndex(target) {
 	workReadState.loadWork(workReadState.id,workReadState.chapters[target].chapterId)
 	router.replace(`/work/${workReadState.id}/${workReadState.cid}`)
 }
 </script>
 <template>
-	<ClientOnly>
+	<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 == 'unauth'">
 		<h2>访问被阻止!</h2>
 		上游 AO3 不允许匿名用户访问该作品<br/>
 		ID: {{workReadState.id}}<br/>
 		<template v-if="workReadState.cid">
 			CID: {{ workReadState.cid }}
 		</template><br/>
 		<a @click="$router.back()">返回</a>
 	</template><template v-if="workReadState.state == 'error'">
 		<h2>内部服务器错误</h2>
 		这种情况不是你的问题, 而是我给网站写的屎山代码发力了, 在 <a href="/about#contact">这里</a> 联系我修复此问题<br/>
 		并提供以下信息:<br/>
 		ID: {{workReadState.id}}<br/>
 		<template v-if="workReadState.cid">
 			CID: {{ workReadState.cid }}
 		</template><br/>
 		<a @click="$router.back()">返回</a>
 	</template><template v-if="workReadState.state == 'errformat'">
 		<h2>路径格式错误</h2>
 		ID: {{ $route.params.id }}<br/>
 		<template v-if="$route.params.id">
 			CID: {{ $route.params.id }}
 		</template><br/>
 		 <a @click="$router.back()">返回</a>
 	</template><ClientOnly>
 		<template v-if="workReadState.state == 'loading'">
 			加载中...<br/>
 			<mdui-linear-progress></mdui-linear-progress>
 		</template>
 		<template v-if="workReadState.state == 'notfound' || workReadState.state == 'ssrnotfound'">
 			<h2>文章不存在...</h2>
 			是不是链接没有复制完全?<br/>
 			ID: {{workReadState.id}}<br/>
 			<a @click="$router.back()">返回</a>
 		</template>
 		<template v-if="workReadState.state == 'ready'">
 			<article>
-				<h1 style="margin: auto">{{ workReadState.title }}</h1>
+				<h1>{{ workReadState.title }}</h1>
-				<h4>{{ workReadState.pesud }}</h4>
+				<h4>{{ workReadState.pseud }}</h4>
-				<blockquote>
+				<a target="_blank" :href="workReadState.cid ? `https://archiveofourown.org/works/${workReadState.id}/chapters/${workReadState.cid}` : `https://archiveofourown.org/works/${workReadState.id}`">原 AO3 链接</a>
-					<p v-for="para in workReadState.summary" :key="para" v-html='para'></p>
+				<mdui-card style="margin: 8px 0px; padding: 16px;">
-				</blockquote>
+					<strong>作品信息</strong><dl>
-				<Hr/>
+						<template v-if="workReadState.category"><dt>分类</dt><ul>
-				<div ref='content'>
+							<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>
 						<template v-if="workReadState.additionalTags"><dt>附加 Tag</dt><ul>
 							<li v-for="item in workReadState.additionalTags" :key="item">
 							{{ item }}</li>
 						</ul></template>
 						<dt>语言</dt><dd>
 							{{ workReadState.lang }}
 						</dd>
 					</dl><Hr/>
 					<strong>作品状态</strong><dl>
 						<dt>发布</dt><dd>
 							{{ workReadState.publishedTime.year }} -
 							{{ workReadState.publishedTime.month }} -
 							{{ workReadState.publishedTime.date }}
 						</dd>
 						<template v-if="workReadState.completedTime"><dt>完成</dt><dd>
 							{{ workReadState.completedTime.year }} -
 							{{ workReadState.completedTime.month }} -
 							{{ workReadState.completedTime.date }}
 						</dd></template>
 						<template v-if="workReadState.updatedTime"><dt>更新</dt><dd>
 							{{ workReadState.updatedTime.year }} -
 							{{ workReadState.updatedTime.month }} -
 							{{ workReadState.updatedTime.date }}
 						</dd></template>
 						<dt>字数</dt><dd>
 							{{ workReadState.wordCount }}
 						</dd>
 						<dt>点击</dt><dd>
 							{{ workReadState.hitCount }}
 						</dd>
 						<template v-if="workReadState.chapterStat"><dt>
 							章节
 						</dt><dd>
 							{{ workReadState.chapterStat.left }} /
 							{{ workReadState.chapterStat.right == -1 ? '?' : workReadState.chapterStat.right }}
 						</dd></template>
 					</dl>
 				</mdui-card>
 				<template v-if="workReadState.cid">
 					<h4>第 {{ workReadState.chapterIndex + 1 }} / {{ workReadState.chapters.length }} 章: {{ workReadState.chapters[workReadState.chapterIndex].title }}</h4>
 					<div style="display: flex;">
 					<mdui-button variant="filled" v-if="workReadState.chapterIndex != 0" @click="switchWorkWithIndex(workReadState.chapterIndex - 1)">上一章</mdui-button>
 					<mdui-button variant='elevated' @click="chapterDialog.open = true" style="margin: 0px 16px;">章节列表</mdui-button>
 					<mdui-button variant="filled" v-if="workReadState.chapterIndex != workReadState.chapters.length - 1" @click="switchWorkWithIndex(workReadState.chapterIndex + 1)">下一章</mdui-button>
 					</div><br/>
 				</template>
 				<blockquote v-if="workReadState.summary">
 					<p v-html='workReadState.summary'></p>
 				</blockquote><Hr />
 				<article ref='content'>
 					<p v-for="(para, index) in workReadState.text" :key="para" :data-index="index">{{ para }}</p>
-				</div>
+				</article>
-			</article>
+			</article><Hr/>
-			<mdui-fab class="mdui-fab" :extended="fabExtended" @click="bookmarkDialog.open = true">
+			<p style="display: flex;" v-if="workReadState.cid">
 				<mdui-button variant="filled" v-if="workReadState.chapterIndex != 0" @click="switchWorkWithIndex(workReadState.chapterIndex - 1)">上一章</mdui-button>
 				<span style="flex: 1;"/>
 				{{ workReadState.chapterIndex + 1 }} / {{ workReadState.chapters.length }}
 				<span style="flex: 1;"/>
 				<mdui-button variant="filled" v-if="workReadState.chapterIndex != workReadState.chapters.length - 1" @click="switchWorkWithIndex(workReadState.chapterIndex + 1)">下一章</mdui-button>
 			</p>
 			<div style="height: 64px" />
 			<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>
+			<mdui-dialog ref='chapterDialog' close-on-overlay-click>
-				<span slot="headline">书签</span>
+				<span slot="headline">章节列表</span>
 				<span slot="description">
-					共 {{ bookmarks.length }} 个
+					共 {{ workReadState.chapters.length }} 个
 				<br/>
-					点击跳转, 长按条目以 更新/删除
+					点击跳转
 				</span>
-				<mdui-list v-if="bookmarks.length" style="max-width: 50vh; max-height: 90vh;">
+				<mdui-list><mdui-list-item
-					<mdui-list-item
+					v-for="(chapter,index) in workReadState.chapters"
-						v-for="(bk, index) in bookmarks"
+					:key="chapter.chapterId" @click="switchWorkWithIndex(index)"
-						@click="jumpTo(index)"
+					:class="{ 'active-item' : index === workReadState.chapterIndex }"
-						@contextmenu.prevent="openBookmarkMenu(bk, index)"
+				>
-					>
+					{{index + 1}}. {{ chapter.title }}
-						{{ bk.name || bk.para }}
+				</mdui-list-item></mdui-list>
 					</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/>
 			<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.pseud }}</h4>
-			<blockquote>
+			<dl>
-				<p v-for="para in workReadState.summary" :key="para" v-html='para'></p>
+				<template v-if="workReadState.category"><dt>分类</dt><ul>
-			</blockquote>
+					<li v-for="item in workReadState.category" :key="item">
-			<Hr/>
+					{{ categoryName[item] }}</li>
-			<p v-for="para in workReadState.text.slice(0, 10)" :key="para">{{ para }}</p>
+				</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>
 				<template v-if="workReadState.completedTime"><dt>完成</dt><dd>
 					{{ workReadState.completedTime.year }} -
 					{{ workReadState.completedTime.month }} -
 					{{ workReadState.completedTime.date }}
 				</dd></template>
 				<template v-if="workReadState.updatedTime"><dt>更新</dt><dd>
 					{{ workReadState.updatedTime.year }} -
 					{{ workReadState.updatedTime.month }} -
 					{{ workReadState.updatedTime.date }}
 				</dd></template>
 				<dt>字数</dt><dd>
 					{{ workReadState.wordCount }}
 				</dd>
 				<dt>点击</dt><dd>
 					{{ workReadState.hitCount }}
 				</dd>
 				<template v-if="workReadState.chapterStat"><dt>
 					章节
 				</dt><dd>
 					{{ workReadState.chapterStat.left }} /
 					{{ workReadState.chapterStat.right == -1 ? '?' : workReadState.chapterStat.right }}
 				</dd></template>
 			</dl><Hr />
 			<template v-if="workReadState.summary"><blockquote>
 				<p v-html='workReadState.summary'></p>
 			</blockquote><Hr /></template>
 			<article><p v-for="para in workReadState.text.slice(0, 20)" :key="para">{{ para }}</p></article>
 		</template>
 	</template></ClientOnly>
 </template>
 <style scoped>
 .active-item {
 	background-color: rgb(var(--mdui-color-secondary-container));
 }
 .mdui-fab {
    position: fixed;
    bottom: 16px; /* 调整垂直位置 */
--- a/vite.config.js
+++ b/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`;
 					}
 				}
 			}
 		},
Author	SHA1	Message	Date
UnknownMp	c4464e1202	增加了一些作品信息展示和更友好的错误界面 All checks were successful Build / build-and-test (push) Successful in 42s Details [BugFix] 增加了错误界面返回链接缺失的换行修复了不显示作者笔名的陈年老 Bug (我觉得我是不是 SB, 把 pseud 写成 pesud)	2025-06-09 17:20:48 +08:00
UnknownMp	eca669d62a	[Base] 更新 SSR 机制, 支持流式渲染注入 head 标签 All checks were successful Build / build-and-test (push) Successful in 28s Details 损失的 TTFB 可以忽略不计	2025-06-05 18:02:03 +08:00
UnknownMp	b1804ae060	[BugFix] 修复章节列表暗色显示问题 All checks were successful Build / build-and-test (push) Successful in 37s Details [Base] 增加 robots.txt	2025-06-03 17:45:33 +08:00
UnknownMp	78fe779c93	小优化和 A11Y 调整	2025-05-31 23:50:23 +08:00
UnknownMp	3a6d10c2ec	修整了代码, 移除不必要导入, 使代码紧凑 All checks were successful Build / build-and-test (push) Successful in 29s Details [UX] 在路由加载时如果有新的路由请求直接拦截取消 (beforeEach 路由守卫)	2025-05-31 19:11:20 +08:00
UnknownMp	7c46970dfe	增加了章节列表的当前章节高亮 All checks were successful Build / build-and-test (push) Successful in 24s Details [BugFix] 修复了搜索页面加载重复的问题	2025-05-28 20:39:22 +08:00
UnknownMp	eda629e58d	[BugFix] 修复了在非章节化作品时仍判断为章节作品的 BUG All checks were successful Build / build-and-test (push) Successful in 26s Details	2025-05-28 14:39:08 +08:00
UnknownMp	51b20c860f	增加作品总章节状态显示 All checks were successful Build / build-and-test (push) Successful in 36s Details [Base] 更新依赖	2025-05-28 13:35:57 +08:00
UnknownMp	7e0087a7db	支持带章节作品网站功能基本完善 🥳 All checks were successful Build / build-and-test (push) Successful in 39s Details [UX] 增加对格式错误的链接检测在搜索或者切换章节时地址栏和标题会跟着变动 [UI] 不再使用 mdui-collapse 作为作品信息容器 SSR 时作品文段渲染增加到 20 行 [Fix] SSR 时 Category 与 Fandom 标识错误 [Base] Summary 不再使用 v-for [NewBug] 在搜索不到东西时会显示搜索完成, 推断是状态转移不完全	2025-05-27 23:59:27 +08:00
UnknownMp	8ff45e210c	[BugFix] 修复页面自动尝试加载更多的问题 All checks were successful Build / build-and-test (push) Successful in 26s Details	2025-05-26 18:24:46 +08:00
UnknownMp	f60bf907b1	增加搜索页面自动加载更多 (之前只能加载一页) All checks were successful Build / build-and-test (push) Successful in 30s Details ~~其实就是太激动了没做完就提交了~~	2025-05-26 18:15:53 +08:00
UnknownMp	f5d3e7ea88	更新了搜索功能 (终于!) 1.1.0 版本 Release! All checks were successful Build / build-and-test (push) Successful in 33s Details	2025-05-26 11:23:24 +08:00
UnknownMp	eb5b28249f	[Base] 修改 API 接口使得支持 GET 请求参数 All checks were successful Build / build-and-test (push) Successful in 28s Details	2025-05-24 10:33:57 +08:00
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
UnknownMp	4323acb4d6	[Feature] All checks were successful Node.js CI / build-and-test (push) Successful in 25s Details 移除书签机制更新了项目描述增加对有章节作品阅读支持 [BugFix] BetterHr 无法在 Markdown 显示的问题 [Base] 增加 Markdown 渲染锚点支持	2025-05-18 14:30:59 +08:00
UnknownMp	9ef6da3efb	[Feature] All checks were successful Node.js CI / build-and-test (push) Successful in 43s Details 增加文章信息和状态显示 [Base] 为 BetterHr 组件添加 class 透传 (未测试) 精简 server.js	2025-05-17 22:48:20 +08:00
UnknownMp	2aea1eae7f	[Feature] All checks were successful Node.js CI / build-and-test (push) Successful in 24s Details 为 SSR 的导航菜单添加链接	2025-05-16 09:31:13 +08:00
UnknownMp	063a1330d7	[Feature] All checks were successful Node.js CI / build-and-test (push) Successful in 31s Details 为 Markdown 启用自定义 Hr 组件	2025-05-16 09:01:11 +08:00
UnknownMp	0607e6241b	[BugFix] All checks were successful Node.js CI / build-and-test (push) Successful in 25s Details 修复链接转换器不显示格式错误的 BUG	2025-05-14 18:00:56 +08:00
UnknownMp	89538823fc	[BUGFix] All checks were successful Node.js CI / build-and-test (push) Successful in 35s Details 修复书签删除问题 [Feature] 使用表单保证 HTML 语义化更新关于页面	2025-05-14 17:49:44 +08:00
UnknownMp	a59ebeb487	优化打包配置, 移除不必要的 chunck All checks were successful Node.js CI / build-and-test (push) Successful in 41s Details 更新依赖移除不必要的注释优化 "关于" 页面启用 SASS/SCSS	2025-05-13 17:28:17 +08:00
UnknownMp	32d9c8a4aa	删除多余代码	2025-05-08 08:46:27 +08:00