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

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

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

src/stores/api.js

@@ -1,114 +1,20 @@
-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)
-}
+import { useApiRequest } from '../composables/apiRequest'
 
 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, chapterId) {
-		if (chapterId) return await apiGet(`work/${workId}/${chapterId}`)
-		return await apiGet(`work/${workId}`)
+		const path = chapterId ? `work/${workId}/${chapterId}` : `work/${workId}`
+		const { execute } = useApiRequest('GET', path)
+		return await execute()
 	}
+
+	async function postData(url, payload) {
+		const { execute } = useApiRequest('POST', url, payload)
+		return await execute()
+	}
+
 	return {
-		init,
-		reInit,
-		getWork
+		getWork,
+		postData,
 	}
 })

src/stores/appSetting.js

@@ -0,0 +1,28 @@
+import { defineStore } from 'pinia'
+import { reactive } from 'vue'
+import { useStorage, watchWithFilter, debounceFilter } 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,
+	}
+})
+
+

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 color = ref('#890000')
+	const isDark = useDark()
+	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') {
-			mode.value = 'dark'
+		if (mode.value === 'auto') {
+			mode.value = isDark.value ? 'light' : 'dark'
 		} else {
-			mode.value = 'light'
+			mode.value = mode.value === 'dark' ? 'light' : 'dark'
 		}
 		setMode(mode.value)
 		if (callback) {