第一次提交

2025-05-02 13:09:37 +08:00
commit ea5690fe88
39 changed files with 11346 additions and 0 deletions
--- a/.gitea/workflows/ci.yml
+++ b/.gitea/workflows/ci.yml
@ -0,0 +1,49 @@
+name: Node.js CI
+
+on:
+	push:
+		branches:
+			- main
+	pull_request:
+
+jobs:
+	build-and-test:
+		runs-on: ubuntu-latest
+
+		steps:
+			- name: 检出代码
+				uses: actions/checkout@v3
+
+			- name: 设置 Node.js
+				uses: actions/setup-node@v3
+				with:
+					node-version: '21'	# 可改为 16/20 等版本
+					cache: 'npm'
+
+			- name: 安装依赖
+				run: npm install --force
+
+			- name: 构建项目（可选）
+				run: npm run build
+				if: success()
+			- name: 打包构建产物
+				run: |
+					mkdir -p build-out
+					cp -r dist build-out/
+					cp server.js index.html package.json build-out/
+					zip -r output.zip build-out
+
+			- name: 设置 SSH 私钥
+				run: |
+					mkdir -p ~/.ssh
+					echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
+					chmod 600 ~/.ssh/id_ed25519
+					echo "Host *" > ~/.ssh/config
+					echo "  StrictHostKeyChecking no" >> ~/.ssh/config
+					echo "  UserKnownHostsFile=/dev/null" >> ~/.ssh/config
+			
+			- name: 测试 SSH 连接
+				run: ssh -T git@10.0.0.3 -p 222
+
+
+
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@ -0,0 +1,7 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <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">
+    <!--app-head-->
+  </head>
+  <body>
+    <div id="app"><!--app-html--></div>
+  </body>
+  <!--app-state-->
+  <script type="module" src="/src/entry-client.js"></script>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,38 @@
+{
+  "name": "ao3-mirror-ssr",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "node server",
+    "build": "npm run build:client && npm run build:server",
+    "build:client": "vite build --outDir dist/client",
+    "build:server": "vite build --ssr src/entry-server.js --outDir dist/server",
+    "preview": "cross-env NODE_ENV=production PORT=5174 HOST=:: node server"
+  },
+  "dependencies": {
+    "@mdui/icons": "^1.0.2",
+    "axios": "^1.8.1",
+    "compress-json": "^3.1.1",
+    "compression": "^1.8.0",
+    "cookie-parser": "^1.4.7",
+    "express": "^5.0.1",
+    "idb": "^8.0.2",
+    "mdui": "^2.1.3",
+    "pako": "^2.1.0",
+    "pinia": "^3.0.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-jsx": "^4.1.1",
+    "cross-env": "^7.0.3",
+    "vite": "^6.1.1",
+    "vite-plugin-md": "^0.21.5",
+    "vite-plugin-pwa": "^0.21.1",
+    "vite-plugin-vue-devtools": "^7.7.2"
+  }
+}
--- a/public/favicon.svg
+++ b/public/favicon.svg
@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="48"
+   height="48"
+   viewBox="0 0 12.372639 12.372639"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     style="display:inline">
+    <path
+       style="-inkscape-font-specification:'JetBrains Mono, Normal';fill:#a93721;stroke-width:0.310558"
+       d="m 3.0931598,5.8509178 0.708073,-2.720491 h 0.4509308 l 0.7043463,2.720491 H 4.6173802 L 4.4384986,5.127938 H 3.6148978 L 3.4360162,5.8509178 Z M 3.6819784,4.8447088 H 4.3676913 L 4.158996,4.0062013 Q 4.0993688,3.7676925 4.0658285,3.6074444 4.0322882,3.4471963 4.0248348,3.3987492 q -0.00745,0.048447 -0.040994,0.2086952 -0.03354,0.1602481 -0.093167,0.3950302 z m 2.578878,1.043476 q -0.3652166,0 -0.5776385,-0.2124219 Q 5.470796,5.463341 5.470796,5.0683108 v -1.155277 q 0,-0.3950302 0.2124219,-0.6074521 0.2124219,-0.2124219 0.5776385,-0.2124219 0.3652166,0 0.5776385,0.2124219 0.2124219,0.2124219 0.2124219,0.6037254 v 1.1590037 q 0,0.3950302 -0.2124219,0.6074521 Q 6.626073,5.8881848 6.2608564,5.8881848 Z m 0,-0.3018627 q 0.2198753,0 0.335403,-0.1229811 0.1192544,-0.1267078 0.1192544,-0.3577632 v -1.229811 q 0,-0.2310554 -0.1192544,-0.3540365 -0.1155277,-0.1267078 -0.335403,-0.1267078 -0.2161486,0 -0.335403,0.1267078 Q 5.806199,3.6447114 5.806199,3.8757668 v 1.229811 q 0,0.2310554 0.1192544,0.3577632 0.1192544,0.1229811 0.335403,0.1229811 z m 2.1950278,0.3018627 q -0.3763967,0 -0.596272,-0.2086952 Q 7.6397369,5.4670677 7.6397369,5.1055778 h 0.335403 q 0,0.223602 0.1304345,0.3540365 0.1304345,0.1304345 0.3540365,0.1304345 0.223602,0 0.3540365,-0.1304345 0.1304345,-0.1304345 0.1304345,-0.3540365 v -0.186335 q 0,-0.223602 -0.1304345,-0.3540365 Q 8.6832129,4.4347718 8.4596109,4.4347718 H 8.1652016 V 4.1440892 l 0.6670793,-0.708073 h -1.11801 V 3.1304268 H 9.2124043 V 3.4434696 L 8.5565051,4.1403625 q 0.335403,0.026087 0.5291914,0.2347821 0.1937884,0.2049685 0.1937884,0.5440982 v 0.186335 q 0,0.3614899 -0.223602,0.5739118 -0.2198753,0.2086952 -0.5999987,0.2086952 z"
+       id="text4"
+       aria-label="AO3" />
+    <path
+       style="-inkscape-font-specification:'JetBrains Mono, Normal';fill:#f9e0a6;stroke-width:0.250631"
+       d="M 0.57996745,8.7347317 V 6.3404704 H 1.0161822 l 0.3050223,1.03642 0.3181416,-1.03642 H 2.0755608 V 8.7347317 H 1.7902173 V 7.6031972 q 0,-0.1607106 0.00328,-0.3673387 0.00656,-0.2099078 0.016399,-0.4230955 0.00984,-0.2131876 0.022959,-0.3837377 L 1.4458373,7.6655136 H 1.1900121 l -0.37061852,-1.20697 q 0.0262385,0.2427059 0.0360779,0.5313292 0.009839,0.2886233 0.009839,0.6133244 v 1.1315345 z m 2.01052465,0 V 8.4657873 h 0.639563 V 7.1997806 H 2.6560883 V 6.9308362 H 3.525238 V 8.4657873 H 4.1320028 V 8.7347317 Z M 3.3448484,6.606135 q -0.1082337,0 -0.1705501,-0.055757 -0.062316,-0.055757 -0.062316,-0.1508712 0,-0.098394 0.062316,-0.1541511 0.062316,-0.059037 0.1705501,-0.059037 0.1082338,0 0.1705502,0.059037 0.062316,0.055757 0.062316,0.1541511 0,0.095115 -0.062316,0.1508712 -0.062316,0.055757 -0.1705502,0.055757 z M 4.6469342,8.7347317 V 6.9308362 h 0.2951829 v 0.34438 h 0.00656 q 0.022959,-0.1738299 0.1475914,-0.275504 0.1246328,-0.1016741 0.3345407,-0.1016741 0.2820636,0 0.4329349,0.1705501 0.154151,0.1672703 0.154151,0.4788523 v 0.154151 H 5.7227118 v -0.154151 q 0,-0.3935772 -0.3837377,-0.3935772 -0.1935088,0 -0.2951829,0.1115135 -0.1016741,0.1115136 -0.1016741,0.3214214 v 1.1479335 z m 1.9678874,0 V 6.9308362 h 0.2951829 v 0.34438 h 0.00656 q 0.022959,-0.1738299 0.1475914,-0.275504 0.1246328,-0.1016741 0.3345407,-0.1016741 0.2820636,0 0.4329349,0.1705501 0.154151,0.1672703 0.154151,0.4788523 v 0.154151 H 7.6905992 v -0.154151 q 0,-0.3935772 -0.3837377,-0.3935772 -0.1935088,0 -0.2951829,0.1115135 -0.1016741,0.1115136 -0.1016741,0.3214214 v 1.1479335 z m 2.5844912,0.026238 q -0.3247012,0 -0.51821,-0.190229 Q 8.4908738,8.3805122 8.4908738,8.039412 V 7.6261559 q 0,-0.34438 0.190229,-0.5313292 0.190229,-0.190229 0.51821,-0.190229 0.327981,0 0.5182099,0.190229 0.190229,0.1869492 0.190229,0.5313292 V 8.039412 q 0,0.3411002 -0.1935088,0.5313292 -0.1902289,0.190229 -0.5149301,0.1902285 z m 0,-0.2623848 q 0.1935088,0 0.3017425,-0.1082338 0.1115135,-0.1082332 0.1115135,-0.318141 V 7.5933578 q 0,-0.2099078 -0.1115135,-0.3181416 -0.1082337,-0.1082337 -0.3017425,-0.1082337 -0.190229,0 -0.3017425,0.1082337 Q 8.7860567,7.38345 8.7860567,7.5933578 v 0.4788523 q 0,0.2099078 0.1115136,0.3181415 0.1115135,0.1082338 0.3017425,0.1082333 z M 10.550595,8.7347317 V 6.9308362 h 0.295183 v 0.34438 h 0.0066 q 0.02296,-0.1738299 0.147591,-0.275504 0.124633,-0.1016741 0.334541,-0.1016741 0.282064,0 0.432935,0.1705501 0.154151,0.1672703 0.154151,0.4788523 v 0.154151 h -0.295183 v -0.154151 q 0,-0.3935772 -0.383738,-0.3935772 -0.193508,0 -0.295183,0.1115135 -0.101674,0.1115136 -0.101674,0.3214214 v 1.1479335 z"
+       id="text5"
+       aria-label="Mirror" />
+  </g>
+</svg>
--- a/public/sw.html
+++ b/public/sw.html
@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Service Worker 管理</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 20px;
+    }
+    h1 {
+      font-size: 24px;
+      color: #333;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-top: 20px;
+    }
+    table, th, td {
+      border: 1px solid #ddd;
+    }
+    th, td {
+      padding: 10px;
+      text-align: left;
+    }
+    th {
+      background-color: #f4f4f4;
+    }
+    button {
+      padding: 5px 10px;
+      background-color: #ff5555;
+      color: white;
+      border: none;
+      cursor: pointer;
+      border-radius: 4px;
+    }
+    button:hover {
+      background-color: #ff2222;
+    }
+  </style>
+</head>
+<body>
+  <h1>Service Worker 管理器</h1>
+  <p>这个页面会返回当前网站的所有注册的 Service Worker 并且允许反注册它们</p>
+  <div id="sw-list">
+    <p>加载中...</p>
+  </div>
+  <script>
+    async function loadServiceWorkers() {
+      const swListContainer = document.getElementById('sw-list');
+      if ('serviceWorker' in navigator) {
+        const registrations = await navigator.serviceWorker.getRegistrations();
+        if (registrations.length === 0) {
+          swListContainer.innerHTML = '<p>没有找到Service Workers.</p>';
+          return;
+        }
+        let tableHtml = `
+          <table>
+            <thead>
+              <tr>
+                <th>作用域</th>
+                <th>操作</th>
+              </tr>
+            </thead>
+            <tbody>
+        `;
+        registrations.forEach((registration, index) => {
+          tableHtml += `
+            <tr>
+              <td>${registration.scope}</td>
+              <td>
+                <button onclick="unregisterServiceWorker(${index})">反注册</button>
+              </td>
+            </tr>
+          `;
+        });
+        tableHtml += `
+            </tbody>
+          </table>
+        `;
+        swListContainer.innerHTML = tableHtml;
+      } else {
+        swListContainer.innerHTML = '<p>当前游览器不支持Service Workers.</p>';
+      }
+    }
+    async function unregisterServiceWorker(index) {
+      const registrations = await navigator.serviceWorker.getRegistrations();
+      if (registrations[index]) {
+        const scope = registrations[index].scope;
+        const success = await registrations[index].unregister();
+        if (success) {
+          alert(`成功反注册作用域为 '${scope}' 的 Service Worker`);
+        } else {
+          alert(`反注册作用域为 '${scope}' 的 Service Worker 失败了`);
+        }
+        loadServiceWorkers();
+      } else {
+        alert('未知的索引');
+      }
+    }
+    window.onload = loadServiceWorkers;
+  </script>
+</body>
+</html>
--- a/server.js
+++ b/server.js
@ -0,0 +1,77 @@
+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')
+  : ''
+
+// Create http server
+const app = express()
+app.use(cookieParser());
+
+// Add Vite or respective production middlewares
+/** @type {import('vite').ViteDevServer | undefined} */
+let vite
+if (!isProduction) {
+  const { createServer } = await import('vite')
+  vite = await createServer({
+    server: { middlewareMode: true },
+    appType: 'custom',
+    base,
+  })
+  app.use(vite.middlewares)
+} else {
+  const compression = (await import('compression')).default
+  const sirv = (await import('sirv')).default
+  app.use(compression())
+  app.use(base, sirv('./dist/client', { extensions: [] }))
+}
+
+// Serve HTML
+app.use('*all', async (req, res) => {
+  try {
+    const url = req.originalUrl.replace(base, '')
+  	console.log(`Request ${url}`)
+    /** @type {string} */
+    let template
+    /** @type {import('./src/entry-server.js').render} */
+    let render
+    if (!isProduction) {
+      // Always read fresh template in development
+      template = await fs.readFile('./index.html', 'utf-8')
+      template = await vite.transformIndexHtml(url, template)
+      render = (await vite.ssrLoadModule('/src/entry-server.js')).render
+    } else {
+      template = templateHtml
+      render = (await import('./dist/server/entry-server.js')).render
+    }
+    const { stream, piniaState } = await render(url, req.cookies, req.headers.host)
+    const [htmlStart, htmlEnd] = template.split('<!--app-html-->')
+    res.status(200).set({ 'Content-Type': 'text/html' })
+    res.write(htmlStart)  
+    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}`)
+})
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,127 @@
+<script setup>
+import { onMounted, onBeforeMount, onServerPrefetch, nextTick, ref, watch } from 'vue'
+import { useRouter, useRoute, RouterView } from 'vue-router'
+
+import { useApiStore } from '@/stores/api.js'
+
+import { useClientOnlyStore } from './ssr/clientOnlyStore.js'
+import { useThemeStore } from './stores/themeScheme.js'
+import { useMobileScreen } from './stores/device.js'
+import { useRouteStore } from './stores/route.js'
+
+import 'mdui/components/top-app-bar.js'
+import 'mdui/components/top-app-bar-title.js'
+import 'mdui/components/navigation-drawer.js'
+import 'mdui/components/list.js'
+import 'mdui/components/list-item.js'
+import 'mdui/components/circular-progress.js'
+import 'mdui/components/button-icon.js'
+import 'mdui/components/switch.js'
+
+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 drawerOpen = ref(false)
+const drawer = ref(null)
+const closeDrawer = ref(true)
+
+let progressTimer = null
+
+onServerPrefetch(async () => {
+	await api.init()
+})
+
+onBeforeMount(() => {
+	mobileScreen.reCal()
+	if(!mobileScreen.isMobile) drawerOpen.value = true
+})
+
+onMounted(async () => {
+	themeScheme.applyTheme()
+	await api.init()
+	clientOnlyStore.setClient()
+	new MutationObserver(() => {
+	  if (document.documentElement.style.width.includes('calc')) {
+		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)
+	})
+})
+</script>
+
+<template>
+    <header><ClientOnly>
+    	<mdui-top-app-bar style="background-color: rgb(var(--mdui-color-primary-container));" scroll-behavior="shrink elevate">
+		<mdui-button-icon @click="drawer.open = !drawer.open">
+			<mdui-icon-menu></mdui-icon-menu>
+		</mdui-button-icon>
+		<!--<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>
+		<mdui-button-icon @click="themeScheme.switchMode()">
+			<mdui-icon-light-mode style="color: rgb(var(--mdui-color-on-surface-variant))"></mdui-icon-light-mode>
+		</mdui-button-icon>
+		</mdui-top-app-bar>
+	<template #ssr>
+		<h1>{{ routeStore.title }}</h1>
+    </template></ClientOnly></header>
+    <nav><ClientOnly>
+	    <mdui-navigation-drawer ref='drawer' :open="drawerOpen" close-on-overlay-click close-on-esc style="margin-top: 64px;">
+			<mdui-list style="height: 100%; background-color: rgb(var(--mdui-color-surface-variant));">
+				<KeepAlive><mdui-list-item
+					v-for="item in routeStore.allRoutes"
+					:key="item.path"
+					@click="routeStore.drawerPress(item.path); if (mobileScreen.isMobile && closeDrawer ) drawer.open = false"
+					:class="{ 'active-item' : item.path == $route.path }"
+				>{{ item.name }}</mdui-list-item></KeepAlive>
+				<div v-if="mobileScreen.isMobile" class="bottom"><mdui-switch @change="closeDrawer = $event.target.checked" :checked="closeDrawer"></mdui-switch><div style="margin-left: 8px">切换页面时关闭菜单</div></div>
+			</mdui-list>
+		</mdui-navigation-drawer>
+	<template #ssr>
+		<ul>
+			<li v-for="item in routeStore.allRoutes"
+			:key="item.path"
+			:class="{ 'active-item' : item.path == $route.path }"
+			>{{ item.name }}</li>
+		</ul>
+    </template></ClientOnly>
+    </nav>
+	<main :class="{ 'mdui-prose' : clientOnlyStore.isClient }">
+		<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));
+}
+
+.bottom {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  background-color: rgb(var(--mdui-color-surface-variant));
+  bottom: 16px;
+  left: 16px;
+  display: flex;
+}
+</style>
--- a/src/assets/typescale.css
+++ b/src/assets/typescale.css
@ -0,0 +1,42 @@
+.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/components/ClientOnly.vue
+++ b/src/components/ClientOnly.vue
@ -0,0 +1 @@
+../ssr/ClientOnly.vue
--- a/src/components/FunAnimation.vue
+++ b/src/components/FunAnimation.vue
@ -0,0 +1,46 @@
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+const frames = [`
+✋ 😭 🤚
+ \\  | /
+  ++++
+   ++
+   ++
+  /  \\`,
+`
+
+✋ 😭 🤚
+ \\ |  /
+  ++++
+  /  \\
+`]
+
+const currentFrame = ref(frames[0])
+let animationInterval = null
+let count = ref(0)
+
+onMounted(() => {
+  // 初始显示第一帧
+  currentFrame.value = frames[0]
+  // 设置动画间隔
+  animationInterval = setInterval(() => {
+    currentFrame.value = currentFrame.value === frames[0] 
+      ? frames[1] 
+      : frames[0]
+  }, 250)
+})
+onBeforeUnmount(() => {
+  // 组件卸载前清除定时器
+  if (animationInterval) {
+    clearInterval(animationInterval)
+    animationInterval = null
+  }
+})
+
+const incr = () => count.value++
+</script>
+<template>
+    <pre style="line-height:1 ;" class="no-select" @click="incr() > 5 ? $router.push('/developer') : null">
+		{{ currentFrame }}
+    </pre>
+</template>
--- a/src/entry-client.js
+++ b/src/entry-client.js
@ -0,0 +1,18 @@
+import { decompress } from 'compress-json'
+import './main.css'
+import { createApp } from './main'
+
+const { app, pinia, router } = createApp()
+
+if (window.__PINIA_STATE__) {
+  pinia.state.value = decompress(window.__PINIA_STATE__)
+}
+
+if (window.__INITIAL_STATE__) {
+  window.__INITIAL_STATE__ = decompress(window.__INITIAL_STATE__)
+}
+
+router.isReady().then(() => {
+  app.mount('#app')
+})
+
--- a/src/entry-server.js
+++ b/src/entry-server.js
@ -0,0 +1,19 @@
+import { renderToWebStream, renderToString } from 'vue/server-renderer'
+import { createApp } from './main'
+
+export async function render(_url, cookies, host) {
+  const { app, pinia, router } = createApp()
+  await router.push(_url)
+  await router.isReady()
+  const ctx = {
+    cookies,
+    host,
+    initialState: {}
+  }
+  // await new Promise((resolve) => setTimeout(resolve, 0))
+  const stream = renderToWebStream(app, ctx)
+  const initialState = ctx.initialStat
+  const piniaState = pinia.state.value
+  return { stream, initialState, piniaState }
+}
+
--- a/src/main.css
+++ b/src/main.css
@ -0,0 +1,35 @@
+@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
@ -0,0 +1,20 @@
+import { createSSRApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import { createSSRRouter } from './router.js'
+
+import ClientOnly from './ssr/ClientOnly.vue'
+import Hr from './ui/BetterHr.vue'
+
+export function createApp() {
+	const app = createSSRApp(App)
+	const router = createSSRRouter()
+	const pinia = createPinia()
+	app.use(pinia)
+	app.use(router)
+	app
+		.component('ClientOnly', ClientOnly)
+		.component('Hr', Hr)
+	return { app, pinia, router }
+}
--- a/src/router.js
+++ b/src/router.js
@ -0,0 +1,49 @@
+import { createMemoryHistory, createWebHistory, createRouter } from 'vue-router'
+
+export function createSSRRouter() {
+	const router = createRouter({
+		history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
+		routes: [{
+			path: '/',
+			name: '前言',
+			component: () => import('./views/Root.vue'),
+			meta: {
+				title: "首页",
+				order: 1
+			},
+		},{
+			path: '/work/:id',
+			name: '阅读',
+			component: () => import('./views/Work.vue'),
+			meta: {
+				title: "",
+				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
+			}
+		}
+	]})
+	return router
+}
--- a/src/ssr/ClientOnly.vue
+++ b/src/ssr/ClientOnly.vue
@ -0,0 +1,12 @@
+<script setup>
+import { useClientOnlyStore } from './clientOnlyStore.js'
+const clientOnlyStore = useClientOnlyStore()
+</script>
+<template data-allow-mismatch>
+  <template v-if="clientOnlyStore.isClient" data-allow-mismatch>
+    <slot></slot>
+  </template><template v-else>
+    <slot name="ssr" data-allow-mismatch></slot>
+  </template>
+</template>
+
--- a/src/ssr/ClientOnly1.vue
+++ b/src/ssr/ClientOnly1.vue
@ -0,0 +1,25 @@
+<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/clientOnlyStore.js
+++ b/src/ssr/clientOnlyStore.js
@ -0,0 +1,11 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useClientOnlyStore = defineStore('ClientOnly', () => {
+	const isClient = ref(false)
+	function setClient() { isClient.value = true }
+	return {
+		isClient,
+		setClient
+	}
+})
--- a/src/ssr/useInitialState.js
+++ b/src/ssr/useInitialState.js
@ -0,0 +1,9 @@
+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
@ -0,0 +1,113 @@
+import { ref, computed, watch } from 'vue'
+import { defineStore } from 'pinia'
+import { useSSRContext } from 'vue'
+import axios from 'axios'
+
+import { objectToQueryString, getCookie, setCookie } from '@/utils.js'
+
+const apiMapping = {
+	'': ['http://localhost:28001/','/api/']
+}
+
+function replaceUrl(url) {
+	return url
+		.replace('{{hostname}}',window.location.hostname)
+		.replace('{{port}}',window.location.port)
+		.replace('{{protocol}}',window.location.protocol)
+}
+
+export const useApiStore = defineStore('api', () => {
+	let host = import.meta.env.SSR ? useSSRContext().host : window.location.host
+	let entry = apiMapping[host] ? apiMapping[host] : apiMapping['']
+	let endpoint = import.meta.env.SSR ? entry[0] : replaceUrl(entry[1])
+	//console.log('Entry point:', endpoint)
+	var inited = false
+	var initializing = false
+	async function apiGet(url, data) {
+		const realURL = data 
+			? `${endpoint}${url}?${objectToQueryString(data)}`
+			: `${endpoint}${url}`
+		try {
+			let start = Date.now()
+			const response = await axios.get(realURL)
+			let stop = Date.now()
+			return {
+				status: response.status,
+				data: response.data,
+				start, stop,
+				duration: stop - start,
+				isSSR: import.meta.env.SSR
+			}
+		} catch (error) {
+			if (error.response) {
+				return {
+					status: error.response.status,
+					data: error.response.data,
+					isSSR: import.meta.env.SSR
+				}
+			} else {
+				return {
+					status: -1,
+					data: null
+				}
+			}
+		}
+	}
+	async function apiPost(url, data) {
+		const realURL = `${endpoint}${url}`;
+		try {
+			let start = Date.now()
+			const response = await axios.post(realURL, data, {
+				headers: { 'Content-Type': 'application/json' }
+			})
+			let stop = Date.now()
+			return {
+				status: response.status,
+				data: response.data,
+				start, stop,
+				duration: stop - start,
+				isSSR: import.meta.env.SSR
+			}
+		} catch (error) {
+			if (error.response) {
+				return {
+					status: error.response.status,
+					data: error.response.data,
+					isSSR: import.meta.env.SSR
+				}
+			} else {
+				return {
+					status: -1,
+					data: null
+				}
+			}
+		}
+	}
+	async function init() {
+		if (inited) return
+		if (initializing) {
+			while (initializing) {
+				await new Promise((resolve) => setTimeout(resolve, 100))
+			}
+			return
+		}
+		initializing = true
+		inited = true
+		initializing = false
+		if (!import.meta.env.SSR) {
+			console.log(`[API] Inited! endpoint: ${endpoint}`)
+		}
+	}
+	async function reInit(){
+		inited = false
+		await init()
+	}
+	async function getWork(workId) {
+		return await apiGet('work',{ workId })
+	}
+	return {
+		init,
+		reInit,
+		getWork
+	}
+})
--- a/src/stores/db.js
+++ b/src/stores/db.js
@ -0,0 +1,58 @@
+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/device.js
+++ b/src/stores/device.js
@ -0,0 +1,25 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+import { breakpoint } from 'mdui/functions/breakpoint.js'
+import { observeResize } from 'mdui/functions/observeResize.js'
+
+export const useMobileScreen = defineStore('deviceMobileScreen', () => {
+	function _() { 
+		if (import.meta.env.SSR) { return false }
+		else { return breakpoint().down('md') ? true : false }
+	}
+	const isMobile = ref(_())
+	if (!import.meta.env.SSR) {
+		const observer = observeResize(document.body, (entry, obs) => {
+			isMobile.value = _()
+		})
+	}
+	function reCal() {
+		isMobile.value = _()
+	}
+	return {
+		isMobile,
+		reCal
+	}
+})
--- a/src/stores/route.js
+++ b/src/stores/route.js
@ -0,0 +1,71 @@
+import { ref, computed, watch } from 'vue'
+import { defineStore } from 'pinia'
+import { useRouter, useRoute } from 'vue-router'
+
+export const useRouteStore = defineStore('route', () => {
+	const router = useRouter()
+	const route = useRoute()
+	const allRoutes = ref(router.getRoutes()
+		.filter(route => route.meta.hidden !== true)
+		.map(route => ({
+			path: route.path,
+			name: route.name,
+			order: route.meta.order || Number.MAX_SAFE_INTEGER
+		}))
+		.sort((a, b) => (a.order - b.order))
+	)
+	const lastFromDrawer = ref(0)
+ 	const customTitle = ref(null)
+	const title = computed(() => customTitle.value || route.meta.title || route.name)
+	function drawerPress(target) {
+		if (lastFromDrawer.value == 0) {
+			lastFromDrawer.value = 1
+			router.push(target)
+		} else {
+			router.replace(target)
+		}
+	}
+	const progress = ref(0)
+	const progressMax = ref(1)
+	const showProgress = ref(false)
+	if (!import.meta.env.SSR) {
+		watch(title, title => document.title = title)
+		let progressTimer = null
+		router.beforeEach((to, from) => {
+			if (lastFromDrawer.value == 2) {
+				lastFromDrawer.value = 0
+			} else if (lastFromDrawer.value == 1) {
+				lastFromDrawer.value = 2
+			}
+			progress.value = 0
+			progressMax.value = 1
+			showProgress.value = true
+			if (!progressTimer) {
+				progressTimer = setInterval(() => {
+					progress.value += progressMax.value / 10
+					if (progressMax.value <= progress.value) progressMax.value = progressMax.value * 3
+				}, 300)
+			}
+			return true
+		})
+		router.afterEach((to, from) => {
+			if (progressTimer) {
+				showProgress.value = false
+				clearInterval(progressTimer)
+				progressTimer = null
+			}
+			customTitle.value = null
+			if (!import.meta.env.SSR) window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
+		})
+	}
+	return { 
+		allRoutes,
+		lastFromDrawer,
+		title,
+		drawerPress,
+		showProgress,
+		progress,
+		progressMax,
+		customTitle
+	}
+})
--- a/src/stores/themeScheme.js
+++ b/src/stores/themeScheme.js
@ -0,0 +1,38 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+import { setTheme } from 'mdui/functions/setTheme.js'
+import { setColorScheme } from 'mdui/functions/setColorScheme.js'
+
+export const useThemeStore = defineStore('homePage', () => {
+	const mode = ref('auto')
+	const color = ref('#890000')
+    function setColor(target) {
+        if (color.value != target) {
+			color.value = target
+		}
+		setColorScheme(color.value)
+    }
+	function setMode(target) {
+		if (mode.value != target) {
+			mode.value = target
+		}
+		setTheme(mode.value)
+	}
+	function switchMode(callback) {
+		if (mode.value === 'auto' || mode.value === 'light') {
+			mode.value = 'dark'
+		} else {
+			mode.value = 'light'
+		}
+		setMode(mode.value)
+		if (callback) {
+			callback(mode.value)
+		}
+	}
+	function applyTheme() {
+		setColorScheme(color.value)
+		setTheme(mode.value)
+	}
+	return { setColor, setMode, switchMode, applyTheme }
+})
--- a/src/stores/workRead.js
+++ b/src/stores/workRead.js
@ -0,0 +1,47 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+import { escapeAndFormatText } from '../utils.js'
+
+import { useApiStore } from '@/stores/api.js'
+
+export const useWorkReadState = defineStore('workRead', () => {
+	const api = useApiStore()
+	const id = ref(null)
+	const summary = ref(null)
+	const pesud = ref(null)
+	const title = ref(null)
+	const text = ref(null)
+	const publishedTime = ref(null)
+	const state = ref('')
+	function setData(data) {
+		id.value = data.workId
+		title.value = data.title
+		summary.value = [escapeAndFormatText(data.summary)]
+		pesud.value = data.pesud
+		text.value = data.text.split('\n\n')
+	}
+	async function loadWork(target) {
+		if (target == id.value || state.value == 'loading') return
+		state.value = 'loading'
+		const result = await api.getWork(target)
+		if (result.status == 200) {
+			setData(result.data)
+			state.value = 'ready'
+		} else {
+			id.value = target
+			state.value = import.meta.env.SSR ? 'ssrnotfound' : 'notfound'
+		}
+	}
+	return {
+		id,
+		title,
+		summary,
+		pesud,
+		text,
+		publishedTime,
+		state,
+		setData,
+		loadWork
+	}
+})
--- a/src/texts/about.md
+++ b/src/texts/about.md
@ -0,0 +1,25 @@
+# 关于
+
+这是什么, 有口舍用 ?
+
+概述
+---
+一个 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
@ -0,0 +1,39 @@
+# 欢迎来到 AO3 Mirror! 👋👋
+
+一个基于重构渲染的 AO3 镜像站
+
+---
+
+## 这是什么🤨
+
+本网站是对 ArchiveOfOurOwn (AO3) 的一个镜像网站
+
+但是不同于直接转发所有页面内容, 本站点会先解析原始 AO3 页面内容, 然后重新组合, 这使得我们有更大的操作空间
+
+## 怎么使用🤔
+
+现在这个站点还处于测试阶段, 只有一种使用方法 *(后面会扩展)*
+
+首先你需要一个 AO3 链接  
+比如:
+
+	https://archiveofourown.org/works/114514
+
+接着将前面的部分替换为本站点的链接 (保留数字ID部分):  
+即:
+
+	https://ao3.unknownmp.top/work/114514
+
+这里的数字ID即为`114514`
+
+浏览器打开它, OK 你会用了🤓👆!
+
+---
+
+## 功能与特性 🤗
+
+- ✅ 预览
+- ✅ 书签 (本地)
+- 📝 历史记录 (本地)
+- 📝 搜索
+
--- a/src/ui/BetterHr.vue
+++ b/src/ui/BetterHr.vue
@ -0,0 +1,11 @@
+<script setup>import 'mdui/components/divider.js'</script>
+<template>
+	<ClientOnly><mdui-divider class='hr-divider'></mdui-divider>
+	<template #ssr><hr/></template></ClientOnly>
+</template>
+<style scoped>
+.hr-divider {
+	margin: 8px 0px;
+}
+</style>
+
--- a/src/utils.js
+++ b/src/utils.js
@ -0,0 +1,112 @@
+import { snackbar } from 'mdui/functions/snackbar.js'
+import { alert } from 'mdui/functions/alert.js'
+
+export function mduiSnackbar(message) {
+	snackbar({
+		message: message,
+	})
+}
+
+export function mduiAlert(title,desc,callback = null,confirmText = "OK") {
+	alert({
+		headline: title,
+		description: desc,
+		confirmText: confirmText,
+		closeOnOverlayClick: true,
+		closeOnEsc: true,
+		onConfirm: () => { if (callback) callback() }
+	})
+}
+
+export function getQueryVariable(variable) {
+    var query = window.location.search.substring(1);
+    var vars = query.split("&")
+    for (var i=0;i<vars.length;i++) {
+        var pair = vars[i].split("=")
+        if(pair[0] == variable){return pair[1]}
+    }
+    return(null);
+}
+
+export const escapeHtml = (text) =>
+    text
+      .replace(/&/g, "&amp;") // 转义 &
+      .replace(/</g, "&lt;") // 转义 <
+      .replace(/>/g, "&gt;") // 转义 >
+      .replace(/"/g, "&quot;") // 转义 "
+      .replace(/'/g, "&#39;"); // 转义 '
+
+export function escapeAndFormatText(input) {
+  let escapedText = escapeHtml(input);
+  escapedText = escapedText.replace(/ /g, "&nbsp;");
+  escapedText = escapedText.replace(/\t/g, "&emsp;&emsp;");
+  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 + "=")) {
+			return cookiePair.substring(name.length + 1);
+		}
+  }
+  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));
+		expires = "; expires=" + date.toUTCString()
+	}
+	document.cookie = name + "=" + value + expires + "; path=/";
+}
+
+export function objectToQueryString(obj, parentKey = '') {
+	const parts = []
+	for (let key in obj) {
+		if (!Object.prototype.hasOwnProperty.call(obj, key)) continue
+		let value = obj[key]
+		let newKey = parentKey ? `${parentKey}[${key}]` : key
+		if (typeof value === 'object' && value !== null) {
+			parts.push(objectToQueryString(value, newKey))
+		} else {
+			parts.push(encodeURIComponent(newKey) + '=' + encodeURIComponent(value))
+		}
+	}
+	return parts.join('&')
+}
+
+export function formatUnixTimestamp(unixTimestamp, timeZone) {
+    const date = new Date(unixTimestamp * 1000); // 将 UNIX 时间戳转换为毫秒
+    const options = {
+        timeZone: timeZone || Intl.DateTimeFormat().resolvedOptions().timeZone, // 使用指定时区或浏览器本地时区
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false, // 24小时制
+    };
+    const formatter = new Intl.DateTimeFormat('en-US', options);
+    const parts = formatter.formatToParts(date);
+    const formatMap = {};
+    parts.forEach(({ type, value }) => {
+        formatMap[type] = value;
+    });
+    return `${formatMap.year}-${formatMap.month}-${formatMap.day} ${formatMap.hour}:${formatMap.minute}:${formatMap.second}`;
+}
+
+export function isMobileDeviceByUA() {
+  const ua = navigator.userAgent || navigator.vendor || window.opera;
+  return /android/i.test(ua) ||
+         /iphone/i.test(ua) ||
+         /ipod/i.test(ua) ||
+         /ipad/i.test(ua) ||
+         /blackberry/i.test(ua) ||
+         /windows phone/i.test(ua);
+}
--- a/src/views/About.vue
+++ b/src/views/About.vue
@ -0,0 +1,19 @@
+<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
@ -0,0 +1,74 @@
+<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()
+
+const ua = ref('')
+const language = ref('')
+const platform = ref('')
+const screenSize = ref('')
+const viewportSize = ref('')
+const pixelRatio = ref(1)
+const touchSupport = ref(false)
+const visibility = ref('')
+
+onMounted(() => {
+	ua.value = navigator.userAgent
+	language.value = navigator.language
+	platform.value = navigator.platform
+	screenSize.value = `${screen.width} × ${screen.height}`
+	viewportSize.value = `${window.innerWidth} × ${window.innerHeight}`
+	pixelRatio.value = window.devicePixelRatio
+	touchSupport.value = 'ontouchstart' in window
+	visibility.value = document.visibilityState
+})
+</script>
+
+
+<template>
+	<h1 class="warn-text">注意本页面仅为测试用!</h1>
+	<blockquote>
+		当然如果你是乱点那个唐鬼小人进来的, 这就是个彩蛋? (神金
+	</blockquote>
+	<Hr />
+	<section>
+		<h2>页面信息</h2>
+		<h3>可见路由信息:</h3>
+		<pre>{{ routeStore.allRoutes }}</pre>
+	</section>
+	<Hr />
+	<ClientOnly>
+		<section>
+			<h2>浏览器信息</h2>
+			<dl>
+				<dt>User-Agent:</dt>
+				<dd>{{ ua }}</dd>
+				<dt>语言:</dt>
+				<dd>{{ language }}</dd>
+				<dt>平台:</dt>
+				<dd>{{ platform }}</dd>
+				<dt>屏幕尺寸:</dt>
+				<dd>{{ screenSize }}</dd>
+				<dt>视口尺寸:</dt>
+				<dd>{{ viewportSize }}</dd>
+				<dt>像素比:</dt>
+				<dd>{{ pixelRatio }}</dd>
+				<dt>是否触屏设备:</dt>
+				<dd>{{ touchSupport ? '是' : '否' }}</dd>
+				<dt>页面可见性状态:</dt>
+				<dd>{{ visibility }}</dd>
+			</dl>
+		</section>
+		<Hr />
+	</ClientOnly>
+</template>
+
+
+<style scoped>
+</style>
--- a/src/views/Mask.vue
+++ b/src/views/Mask.vue
@ -0,0 +1,24 @@
+<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
@ -0,0 +1,72 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+import 'mdui/components/text-field.js'
+import 'mdui/components/button.js'
+
+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 {
+			id: Number(from)
+		}
+	} 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) {
+				return {
+					type: 's',
+					id
+				}
+			}
+		}
+	}
+	return {
+		type: null,
+	}
+}
+
+function onConvert() {
+	const { id, cid } = convert(src.value)
+	if (id == null) {
+		err.value = true
+		srcText.value?.focus()
+	} 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" />
+	<Intro />
+	<br/><Hr/>
+	<section id="converter">
+		<h2>链接转换</h2>
+		<p>输入完整链接或者 ID</p>
+		<ClientOnly>
+			<mdui-text-field variant="filled" label="链接" placeholder="https://archiveofourown.org/works/114514" @input="src = $event.target.value" ref='srcText'>
+			<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>
+			</div>
+			{{ src }}
+		<template #ssr>
+			Padding...
+		</template></ClientOnly>
+	</section>
+</template>
--- a/src/views/Work.vue
+++ b/src/views/Work.vue
@ -0,0 +1,257 @@
+<script setup>
+import { ref, onMounted, onServerPrefetch, onBeforeUnmount, watch, nextTick } from 'vue'
+import { useRouter, useRoute, RouterView } from 'vue-router'
+const router = useRouter()
+const route = useRoute()
+
+import { useWorkReadState } from '@/stores/workRead.js'
+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'
+import 'mdui/components/button.js'
+import 'mdui/components/dropdown.js'
+import 'mdui/components/menu.js'
+import 'mdui/components/menu-item.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
+
+async function addBookmark() {
+	if (currentParagraph) {
+		const id = await bookmarkStore.add(workReadState.id, readIndex, currentParagraph.textContent.slice(0,20), '')
+		bookmarks.value.push(await bookmarkStore.get(id))
+		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)
+})
+
+onMounted(async () => {
+	bookmarkStore = useBookmarkStore()
+	if (workReadState.state != 'ssrnotfound') await workReadState.loadWork(route.params.id)
+	if (workReadState.state == 'ready') {
+		routeState.customTitle = workReadState.title
+		const paraCount = workReadState.text.length - 2
+		isObserver = new IntersectionObserver((entries) => {
+			entries.forEach((entry) => {
+				if (entry.isIntersecting) {
+					currentParagraph = entry.target
+					readIndex = entry.target.dataset.index;
+					readPercent.value = parseInt(readIndex / paraCount * 100) 
+					if (lastPercent == 0) {
+						lastPercent = readPercent.value
+						return
+					}
+					if (Math.abs(lastPercent - readPercent.value) > 10) {
+						lastPercent = readPercent.value
+						fabExtended.value = true
+						if (lastCloseTimer) clearTimeout(lastCloseTimer)
+						lastCloseTimer = setTimeout(() => {
+							fabExtended.value = false
+							lastPercent = readPercent.value
+						}, 2000)
+					}
+				}
+			})
+		}, {
+			threshold: 0.5
+		})
+		await nextTick()
+		paragraphs = content.value?.querySelectorAll('p');
+		paragraphs?.forEach(p => isObserver.observe(p));
+		bookmarks.value = await bookmarkStore.getAll(workReadState.id)
+	}
+})
+
+onBeforeUnmount(() => {
+	isObserver.disconnect();
+})
+</script>
+
+<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>
+				<h4>{{ workReadState.pesud }}</h4>
+				<blockquote>
+					<p v-for="para in workReadState.summary" :key="para" v-html='para'></p>
+				</blockquote>
+				<Hr/>
+				<div ref='content'>
+					<p v-for="(para, index) in workReadState.text" :key="para" :data-index="index">{{ para }}</p>
+				</div>
+			</article>
+			<mdui-fab class="mdui-fab" :extended="fabExtended" @click="bookmarkDialog.open = true">
+				<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/>
+			<a @click="$router.back()">返回</a>
+		</template>
+		<template v-if="workReadState.state == 'ready'">
+			<h1>{{ workReadState.title }}</h1>
+			<h2>{{ workReadState.pesud }}</h2>
+			<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>
+		</template>
+	</template></ClientOnly>
+</template>
+
+<style scoped>
+.mdui-fab {
+    position: fixed;
+    bottom: 16px; /* 调整垂直位置 */
+    right: 16px; /* 调整水平位置 */
+    z-index: 1000; /* 确保悬浮按钮在其他内容上方 */
+    animation: slideInFromRight var(--mdui-motion-duration-medium2) var(--mdui-motion-easing-standard); /* 动画时长和缓动效果 */
+}
+</style>
--- a/src/views/fallback/NotFound.vue
+++ b/src/views/fallback/NotFound.vue
@ -0,0 +1,11 @@
+<script setup>
+import 'mdui/components/divider.js'
+</script>
+
+<template>
+	<h1>404 - 页面未找到</h1>
+	<p>抱歉，您访问的页面不存在。</p>
+	<router-link to="/">返回主页</router-link>
+	<Hr/>
+	Page of AO3 Mirror
+</template>
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,98 @@
+import { fileURLToPath, URL } from 'node:url'
+
+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'
+
+// https://vite.dev/config/
+export default defineConfig({
+	plugins: [
+		vue({
+			template: {
+				compilerOptions: {
+					isCustomElement: (tag) => tag.startsWith('mdui') || tag.startsWith('swiper')
+				}
+			},
+			include: [/\.vue$/, /\.md$/],
+		}),
+		vueJsx(),
+		vueDevTools(),
+		markdown()
+		/*VitePWA({
+			name: '墨宇留香 - 渐进式  Web App 版本',
+			short_name: '墨宇留香',
+			start_url: '/index.html',
+			display: 'standalone',
+			"background_color": "#808080",
+			"theme_color": "#7F3C5C",
+			"icons": [
+				{
+					"src": "/favicon.png",
+					"sizes": "507x580",
+					"type": "image/png"
+		}]})*/
+	],
+	resolve: {
+		alias: {
+			'@': fileURLToPath(new URL('./src', import.meta.url))
+		}
+	},
+	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]
+                        return `vendor/${moduleName}`
+					}
+                    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')) {
+						const modules = id.toString().split('src/components/')[1];
+						const moduleName = modules.split('.')[0];
+						return `component/${moduleName}`;
+					}
+                    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')) {
+						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`;
+					}
+				}
+			}
+		},
+		minify: true,
+		assetsInlineLimit: 0,
+		reportCompressedSize: false
+	},
+	server: {
+		host: '0.0.0.0',
+		allowedHosts: ['ao3.unknownmp.top'],
+	},
+})