From 89538823fc4afeed237580b4f209b7457bf3e95e Mon Sep 17 00:00:00 2001
From: UnknownMp <unknownmp@163.com>
Date: Wed, 14 May 2025 17:48:11 +0800
Subject: [PATCH] =?UTF-8?q?[BUGFix]=20=E4=BF=AE=E5=A4=8D=E4=B9=A6=E7=AD=BE?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[Feature]
使用表单保证 HTML 语义化
更新关于页面
---
 src/main.js        |  2 ++
 src/texts/about.md |  2 +-
 src/ui/Form.vue    | 20 ++++++++++++++++++++
 src/views/Root.vue | 21 +++++++++------------
 src/views/Work.vue |  2 +-
 5 files changed, 33 insertions(+), 14 deletions(-)
 create mode 100644 src/ui/Form.vue

diff --git a/src/main.js b/src/main.js
index 2c732e2..14e271b 100644
--- 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,6 @@ export function createApp() {
 	app
 		.component('ClientOnly', ClientOnly)
 		.component('Hr', Hr)
+		.component('Form', Form)
 	return { app, pinia }
 }
diff --git a/src/texts/about.md b/src/texts/about.md
index dadfd89..21b2cc0 100644
--- a/src/texts/about.md
+++ b/src/texts/about.md
@@ -16,7 +16,7 @@
 ---
 - MDUI 2 [mdui.org](https://mdui.org)
 - Vue 3 [vuejs.org](https://vuejs.org)
-- Vite 6 [vitejs.dev](https://vitejs.dev)
+- Vite 6 [vitejs.dev](https://vite.dev)
 
 其他
 ---
diff --git a/src/ui/Form.vue b/src/ui/Form.vue
new file mode 100644
index 0000000..19ef9a6
--- /dev/null
+++ b/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>
+
diff --git a/src/views/Root.vue b/src/views/Root.vue
index 652c751..43dda41 100644
--- a/src/views/Root.vue
+++ b/src/views/Root.vue
@@ -9,8 +9,6 @@ import Intro from '../texts/intro.md'
 
 const router = useRouter()
 
-const src = ref('')
-const srcText = ref(null)
 const err = ref(false)
 
 function convert(from) {
@@ -35,11 +33,10 @@ function convert(from) {
 	}
 }
 
-function onConvert() {
-	const { id, cid } = convert(src.value)
+function onConvert(data) {
+	const { id, cid } = convert(data.src)
 	if (id == null) {
 		err.value = true
-		srcText.value?.focus()
 	} else {
 		err.value = false
 		if (cid) router.push(`/work/${id}/${cid}`)
@@ -56,17 +53,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" >
+			<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>
diff --git a/src/views/Work.vue b/src/views/Work.vue
index aca6ac9..66b17eb 100644
--- a/src/views/Work.vue
+++ b/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
 	}
 }