[BugFix]

修复链接转换器不显示格式错误的 BUG

.gitea/workflows/ci.yml

@@ -55,5 +55,8 @@ jobs:
 
       - name: 上传产物到远程服务器
         run: |
-          scp output.zip default@10.0.0.3:/srv/publish/ao3-mirror-ssr/${{ steps.extract_tag.outputs.tag }}.zip
+          TAG=${{ steps.extract_tag.outputs.tag }}
+          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'
+
 

package.json

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

server.js

@@ -16,6 +16,11 @@ const templateHtml = isProduction
 const app = express()
 app.use(cookieParser());
 
+const MESSAGE = {
+	404: 'Not Found',
+	0: 'Unknown'
+}
+
 // Add Vite or respective production middlewares
 /** @type {import('vite').ViteDevServer | undefined} */
 let vite
@@ -42,19 +47,30 @@ app.use('*all', async (req, res) => {
     /** @type {string} */
     let template
     /** @type {import('./src/entry-server.js').render} */
-    let render
+    let render, getRoute
     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
+      const module = await vite.ssrLoadModule('/src/entry-server.js')
+      render = module.render
+      getRoute = module.getRoute
     } else {
       template = templateHtml
-      render = (await import('./dist/server/entry-server.js')).render
+      const module = await import('./dist/server/entry-server.js')
+      render = module.render
+      getRoute = module.getRoute
     }
-    const { stream, piniaState } = await render(url, req.cookies, req.headers.host)
+    const { router, code } = await getRoute(url)
+    if (code != 200 && !req.accepts('html')) {
+      res.status(code).set({ 'Content-Type': 'text/plain' })
+      res.write(MESSAGE[code] || MESSAGE[0])
+      res.end()
+      return
+    }
+    const { stream, piniaState } = await render(router, req.cookies, req.headers.host)
     const [htmlStart, htmlEnd] = template.split('<!--app-html-->')
-    res.status(200).set({ 'Content-Type': 'text/html' })
+    res.status(code).set({ 'Content-Type': 'text/html' })
     res.write(htmlStart)  
     for await (const chunk of stream) {
       if (res.closed) break

src/entry-client.js

@@ -1,8 +1,13 @@
 import { decompress } from 'compress-json'
-import './main.css'
-import { createApp } from './main'
+import './main.scss'
 
-const { app, pinia, router } = createApp()
+import { createApp } from './main'
+import { createSSRRouter } from './router.js'
+
+const { app, pinia } = createApp()
+const router = createSSRRouter()
+
+app.use(router)
 
 if (window.__PINIA_STATE__) {
   pinia.state.value = decompress(window.__PINIA_STATE__)

src/entry-server.js

@@ -1,19 +1,28 @@
 import { renderToWebStream, renderToString } from 'vue/server-renderer'
 import { createApp } from './main'
 
-export async function render(_url, cookies, host) {
-  const { app, pinia, router } = createApp()
+import { createSSRRouter } from './router.js'
+
+export async function getRoute(_url) {
+  const router = createSSRRouter()
   await router.push(_url)
   await router.isReady()
+  const route = router.currentRoute.value.matched[0]
+  const code = route.meta.code || 200
+  return { router, code }
+}
+
+export async function render(router, cookies, host) {
+  const { app, pinia } = createApp()
+  
+  app.use(router)
   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 }
+  return { stream, piniaState }
 }
 

src/main.css

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

src/main.js

@@ -2,19 +2,18 @@ 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'
+import Form from './ui/Form.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 }
+		.component('Form', Form)
+	return { app, pinia }
 }

src/main.scss

@@ -0,0 +1,50 @@
+@import 'mdui/mdui.css';
+// @import './assets/typescale.css';
+
+// 字体配置
+$font-family: Roboto, Noto Sans SC, PingFang SC, Lantinghei SC,
+  Microsoft Yahei, Hiragino Sans GB, "Microsoft Sans Serif",
+  WenQuanYi Micro Hei, sans-serif;
+
+// MDUI 变量简写
+$bg-color: rgb(var(--mdui-color-background));
+$error-color: rgb(var(--mdui-color-error));
+$on-error-color: rgb(var(--mdui-color-on-error));
+$transition-duration: var(--mdui-motion-duration-short2);
+$transition-easing: var(--mdui-motion-easing-linear);
+
+body {
+  font-family: $font-family;
+  background-color: $bg-color;
+  transition: opacity $transition-duration $transition-easing;
+}
+
+// MDUI 组件样式
+mdui-card {
+  width: 100%;
+  padding: 0 16px 16px;
+}
+
+mdui-text-field {
+  margin: 8px 0;
+}
+
+// 警告样式
+.warn {
+  background-color: $error-color;
+  color: $on-error-color;
+}
+
+.warn-text {
+  color: $error-color;
+}
+
+// 通用工具类
+.pre-break {
+  white-space: pre-line;
+}
+
+.no-select {
+  user-select: none;
+}
+

src/router.js

@@ -41,7 +41,8 @@ export function createSSRRouter() {
 			component: () => import('./views/fallback/NotFound.vue'),
 			meta: {
 				title: "页面未找到",
-				hidden: true
+				hidden: true,
+				code: 404
 			}
 		}
 	]})

src/texts/about.md

@@ -14,9 +14,9 @@
 
 组件库与工具链
 ---
-- MDUI 2
-- Vue
-- Vite
+- MDUI 2 [mdui.org](https://mdui.org)
+- Vue 3 [vuejs.org](https://vuejs.org)
+- Vite 6 [vitejs.dev](https://vite.dev)
 
 其他
 ---

src/ui/Form.vue

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

src/views/Root.vue

@@ -9,13 +9,13 @@ import Intro from '../texts/intro.md'
 
 const router = useRouter()
 
-const src = ref('')
-const srcText = ref(null)
 const err = ref(false)
+const srcText = ref(null)
 
 function convert(from) {
 	if( Number(from) ) {
 		return {
+			type: 's',
 			id: Number(from)
 		}
 	} else if (from.includes('https://archiveofourown.org/works/')) {
@@ -35,9 +35,10 @@ function convert(from) {
 	}
 }
 
-function onConvert() {
-	const { id, cid } = convert(src.value)
-	if (id == null) {
+function onConvert(data) {
+	const { type, id, cid } = convert(data.src)
+	console.log(type, id, cid)
+	if (type == null) {
 		err.value = true
 		srcText.value?.focus()
 	} else {
@@ -56,17 +57,17 @@ function onConvert() {
 	<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>
+		<Form @submit="onConvert"><ClientOnly>
+			<mdui-text-field variant="filled" label="链接" name="src" placeholder="https://archiveofourown.org/works/114514" 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>
+				<mdui-button type="submit">-></mdui-button>
 			</div>
-			{{ src }}
 		<template #ssr>
-			Padding...
-		</template></ClientOnly>
+				<input type="text" id="src" name="src" />
+				<input type="submit" />
+		</template></ClientOnly></Form>
 	</section>
 </template>

src/views/Work.vue

@@ -120,7 +120,7 @@ function openBookmarkMenu(bk, index) {
 async function deleteBookmark() {
 	if (bookmarkSelect.value) {
 		bookmarkStore.del(bookmarkSelect.value.bk.id)
-		bookmarks.value.splice(bookmarkSelect.value.index)
+		bookmarks.value.splice(bookmarkSelect.value.index,1)
 		bookmarkSelect.value = null
 	}
 }

vite.config.js

@@ -4,7 +4,6 @@ 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/
@@ -21,19 +20,7 @@ export default defineConfig({
 		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: {
@@ -43,47 +30,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]
-                        return `vendor/${moduleName}`
+						const moduleName = moduleNames[0]
+						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`;
-					}
 				}
 			}
 		},