增加设置板块, 允许自定义界面设置, 使用 VueUse 存储

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

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

src/views/Settings.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { ref, onBeforeMount } from 'vue'
+
+import 'mdui/components/switch.js'
+import 'mdui/components/card.js'
+
+import { useAppSettingStore } from '../stores/appSetting.js'
+
+let appSetting = null
+
+onBeforeMount(() => {
+	appSetting = useAppSettingStore()
+})
+
+</script>
+
+<template>
+	<h1>设置</h1>
+	<Hr />
+	<ClientOnly><div class="settings">
+		<section><mdui-card>
+			<h2>界面</h2><Hr />
+			<div>自动黑暗模式<div style="flex: 1;"/>
+			<mdui-switch :checked="appSetting.value.autoTheme"
+			@change="e => appSetting.value.autoTheme = e.target.checked">
+			</mdui-switch></div>
+			<div v-if="!appSetting.value.autoTheme">默认黑暗模式<div style="flex: 1;"/>
+			<mdui-switch :checked="appSetting.value.darkTheme"
+			@change="e => appSetting.value.darkTheme = e.target.checked">
+			</mdui-switch></div>
+		</mdui-card></section>
+	</div></ClientOnly>
+</template>
+
+<style scoped>
+.settings div {
+	display: flex;
+	align-items: center;
+}
+</style>

src/views/Work.vue

@@ -148,9 +148,9 @@ onBeforeUnmount(() => {
 					<p v-for="para in workReadState.summary" :key="para" v-html='para'></p>
 				</blockquote>
 				<Hr />
-				<div ref='content'>
+				<article ref='content'>
 					<p v-for="(para, index) in workReadState.text" :key="para" :data-index="index">{{ para }}</p>
-				</div>
+				</article>
 			</article>
 			<mdui-fab class="mdui-fab" :extended="fabExtended">
 				<mdui-icon-bookmark slot="icon"></mdui-icon-bookmark>
@@ -199,7 +199,7 @@ onBeforeUnmount(() => {
 				<p v-for="para in workReadState.summary" :key="para" v-html='para'></p>
 			</blockquote>
 			<Hr/>
-			<p v-for="para in workReadState.text.slice(0, 10)" :key="para">{{ para }}</p>
+			<article><p v-for="para in workReadState.text.slice(0, 10)" :key="para">{{ para }}</p></article>
 		</template>
 	</template></ClientOnly>
 </template>