feat: 新增设置页面及外观设置功能
添加了设置页面路由、外观设置子页面,支持主题模式切换和自定义窗口背景图片,新增相关 Rust 后端模块、数据库初始化、多语言文案及配置项,更新 Tauri 配置和项目描述。
This commit is contained in:
+30
-18
@@ -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%);
|
||||
|
||||
Reference in New Issue
Block a user