feat: 新增设置页面及外观设置功能

添加了设置页面路由、外观设置子页面,支持主题模式切换和自定义窗口背景图片,新增相关 Rust 后端模块、数据库初始化、多语言文案及配置项,更新 Tauri 配置和项目描述。
This commit is contained in:
Yuhang Wu
2026-10-13 11:15:58 +08:00
parent d4257481f4
commit fd47adea1e
24 changed files with 6673 additions and 38 deletions
+30 -18
View File
@@ -1,8 +1,8 @@
<template>
<!-- 应用整体:背景渐变 + 悬浮面板 -->
<div class="app-shell flex h-screen w-screen flex-col overflow-hidden">
<!-- 应用整体:背景(渐变 / 图片) + 悬浮面板 -->
<div class="app-shell flex h-screen w-screen flex-col overflow-hidden" :style="shellStyle">
<!-- 顶部自定义 TitleBar -->
<Header @settings="settingsOpen = true" />
<Header @settings="goToSetting" />
<!-- 主体:侧边栏 + 内容区 -->
<div class="flex min-h-0 flex-1 gap-3 px-3 pb-3">
@@ -12,38 +12,50 @@
<router-view />
</main>
</div>
<!-- 设置(占位) -->
<a-modal
v-model:open="settingsOpen"
:title="t('settings.title')"
:footer="null"
centered
>
<a-result status="info" :sub-title="t('settings.placeholder')" />
</a-modal>
</div>
</template>
<script setup lang="ts">
import { useI18n } from "vue-i18n"
import Header from "./header/Header.vue"
import Aside from "./aside/Aside.vue"
import { useAppStore } from "@/stores/app"
const { t } = useI18n()
const settingsOpen = ref(false)
const router = useRouter()
const appStore = useAppStore()
/** 点击标题栏“设置”按钮 → 跳转设置页 */
function goToSetting() {
router.push("/setting")
}
/**
* 选中背景图片时覆盖默认渐变背景。
* `cover` 让图片按原始比例缩放铺满窗口,不会变形拉伸。
*/
const shellStyle = computed(() =>
appStore.backgroundUrl
? {
backgroundImage: `url('${appStore.backgroundUrl}')`,
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
}
: {},
)
</script>
<style scoped lang="scss">
.app-shell {
background:
background-color: #eef2ff;
background-image:
radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, 0.28), transparent 60%),
radial-gradient(1000px 500px at 110% 10%, rgba(34, 211, 238, 0.28), transparent 55%),
linear-gradient(160deg, #eef2ff 0%, #f8fafc 45%, #eef7ff 100%);
}
.dark .app-shell {
background:
background-color: #0b1220;
background-image:
radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, 0.35), transparent 60%),
radial-gradient(1000px 500px at 110% 10%, rgba(14, 165, 233, 0.28), transparent 55%),
linear-gradient(160deg, #0b1220 0%, #0f172a 45%, #111827 100%);