cirry/yurou
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面美化

Browse Source
This commit is contained in:
cirry
2026-07-08 14:39:08 +08:00
parent bb4e376528
commit a7bcd03534
8 changed files with 649 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
src/components/SettingsModal.vue
View File

@@ -2,24 +2,28 @@
import { getVersion } from "@tauri-apps/api/app";
import { computed, onBeforeUnmount, ref, watch } from "vue";
type SettingsPage = "about" | "editor";
type SettingsPage = "about" | "editor" | "appearance";
type DocumentMode = "preview" | "edit" | "mixed";
type AppTheme = "system" | "warm" | "white" | "black" | "gruvbox" | "gray";
const props = withDefaults(
defineProps<{
show: boolean;
initialPage?: SettingsPage;
defaultDocumentMode?: DocumentMode;
appTheme?: AppTheme;
}>(),
{
initialPage: "about",
defaultDocumentMode: "edit",
appTheme: "warm",
},
);
const emit = defineEmits<{
"update:show": [value: boolean];
updateDefaultDocumentMode: [mode: DocumentMode];
updateAppTheme: [theme: AppTheme];
}>();
const APP_NAME = "yurou";
@@ -34,7 +38,11 @@ const language = ref(loadStringPref(LANGUAGE_KEY, "zh-Hans"));
const updateStatus = ref("");
let updateStatusTimer: ReturnType<typeof setTimeout> | null = null;
const pageTitle = computed(() => (activePage.value === "about" ? "关于" : "编辑器"));
const pageTitle = computed(() => {
if (activePage.value === "about") return "关于";
if (activePage.value === "editor") return "编辑器";
return "外观";
});
const menuItems: Array<{
id: SettingsPage;
@@ -43,6 +51,7 @@ const menuItems: Array<{
}> = [
{ id: "about", label: "关于", icon: "ri-information-line" },
{ id: "editor", label: "编辑器", icon: "ri-edit-2-line" },
{ id: "appearance", label: "外观", icon: "ri-palette-line" },
];
const documentModeOptions: Array<{
@@ -54,6 +63,19 @@ const documentModeOptions: Array<{
{ value: "mixed", label: "混合" },
];
const themeOptions: Array<{
value: AppTheme;
label: string;
swatch: string;
}> = [
{ value: "system", label: "跟随系统", swatch: "linear-gradient(135deg, #ffffff 0 50%, #17191d 50% 100%)" },
{ value: "warm", label: "柔和暖色", swatch: "#bf6a3b" },
{ value: "white", label: "白色", swatch: "#2563eb" },
{ value: "black", label: "黑色", swatch: "#8ab4ff" },
{ value: "gruvbox", label: "Gruvbox", swatch: "#fe8019" },
{ value: "gray", label: "灰色", swatch: "#4f6f93" },
];
function loadBooleanPref(key: string, fallback: boolean) {
try {
const stored = localStorage.getItem(key);
@@ -118,6 +140,15 @@ function onDefaultDocumentModeChange(event: Event) {
emit("updateDefaultDocumentMode", mode);
}
function onThemeChange(event: Event) {
const theme = (event.target as HTMLSelectElement).value as AppTheme;
emit("updateAppTheme", theme);
}
function resetTheme() {
emit("updateAppTheme", "warm");
}
watch(
() => props.show,
(show) => {
@@ -242,7 +273,7 @@ onBeforeUnmount(() => {
</section>
</div>
<div v-else class="settings-content">
<div v-else-if="activePage === 'editor'" class="settings-content">
<section class="settings-about-card" aria-label="编辑器设置">
<div class="settings-row settings-row-top">
<div class="settings-copy">
@@ -266,6 +297,59 @@ onBeforeUnmount(() => {
</div>
</section>
</div>
<div v-else class="settings-content">
<section class="settings-about-card" aria-label="外观设置">
<div class="settings-row settings-row-top">
<div class="settings-copy">
<h3>基础颜色</h3>
<p>设置 {{ APP_NAME }} 的基础颜色。</p>
</div>
<select
class="settings-select"
aria-label="基础颜色"
:value="appTheme"
@change="onThemeChange"
>
<option
v-for="option in themeOptions"
:key="option.value"
:value="option.value"
>
{{ option.label }}
</option>
</select>
</div>
<div class="settings-row">
<div class="settings-copy">
<h3>主题色</h3>
<p>为 {{ APP_NAME }} 选择一个主题色。主题色将影响选中、链接等元素的颜色。</p>
</div>
<div class="theme-swatch-group" aria-label="主题色">
<button
class="theme-reset-btn"
type="button"
title="重置主题色"
@click="resetTheme"
>
<i class="ri-reset-left-line text-lg"></i>
</button>
<button
v-for="option in themeOptions.filter((item) => item.value !== 'system')"
:key="option.value"
class="theme-swatch"
:class="{ 'theme-swatch-active': appTheme === option.value }"
type="button"
:title="option.label"
:aria-label="option.label"
:style="{ background: option.swatch }"
@click="emit('updateAppTheme', option.value)"
></button>
</div>
</div>
</section>
</div>
</div>
</section>
</div>
@@ -281,7 +365,7 @@ onBeforeUnmount(() => {
align-items: center;
justify-content: center;
padding: 28px;
background: rgba(56, 52, 46, 0.22);
background: var(--app-overlay);
backdrop-filter: blur(8px);
}
@@ -292,12 +376,12 @@ onBeforeUnmount(() => {
min-height: 430px;
max-height: min(680px, calc(100vh - 48px));
overflow: hidden;
border: 1px solid #e0dbcf;
border: 1px solid var(--app-border-strong);
border-radius: 12px;
background: #fffdfa;
background: var(--app-surface);
box-shadow:
0 24px 70px rgba(56, 52, 46, 0.2),
0 2px 10px rgba(56, 52, 46, 0.08);
0 24px 70px var(--app-shadow),
0 2px 10px color-mix(in srgb, var(--app-shadow) 46%, transparent);
}
.settings-menu {
@@ -305,13 +389,13 @@ onBeforeUnmount(() => {
flex-direction: column;
gap: 4px;
padding: 14px 10px;
border-right: 1px solid #e8e4da;
background: #f4f1eb;
border-right: 1px solid var(--app-border);
background: var(--app-sidebar-bg);
}
.settings-menu-title {
padding: 0 10px 8px;
color: #8c877d;
color: var(--app-muted);
font-size: 12px;
font-weight: 600;
}
@@ -326,7 +410,7 @@ onBeforeUnmount(() => {
border: none;
border-radius: 7px;
background: transparent;
color: #5c574e;
color: var(--app-text-soft);
font-size: 13px;
line-height: 1;
text-align: left;
@@ -337,13 +421,13 @@ onBeforeUnmount(() => {
}
.settings-menu-item:hover {
background: #ede8dd;
color: #38342e;
background: var(--app-hover);
color: var(--app-text);
}
.settings-menu-item-active {
background: #fdf0e5;
color: #bf6a3b;
background: var(--app-active-bg);
color: var(--app-accent);
font-weight: 600;
}
@@ -351,7 +435,7 @@ onBeforeUnmount(() => {
display: flex;
min-width: 0;
flex-direction: column;
background: #faf9f6;
background: var(--app-panel-bg);
}
.settings-header {
@@ -360,13 +444,13 @@ onBeforeUnmount(() => {
justify-content: space-between;
min-height: 54px;
padding: 0 20px;
border-bottom: 1px solid #e8e4da;
background: rgba(255, 253, 250, 0.72);
border-bottom: 1px solid var(--app-border);
background: color-mix(in srgb, var(--app-surface) 72%, transparent);
}
.settings-header h2 {
margin: 0;
color: #38342e;
color: var(--app-text);
font-size: 15px;
font-weight: 700;
}
@@ -380,7 +464,7 @@ onBeforeUnmount(() => {
border: none;
border-radius: 6px;
background: transparent;
color: #8c877d;
color: var(--app-muted);
cursor: pointer;
transition:
background-color 0.15s ease,
@@ -388,8 +472,8 @@ onBeforeUnmount(() => {
}
.settings-close-btn:hover {
background: #ede8dd;
color: #38342e;
background: var(--app-hover);
color: var(--app-text);
}
.settings-content {
@@ -402,8 +486,8 @@ onBeforeUnmount(() => {
.settings-about-card {
overflow: hidden;
border-radius: 10px;
background: #fffdfa;
box-shadow: inset 0 0 0 1px #eee9de;
background: var(--app-surface);
box-shadow: inset 0 0 0 1px var(--app-border);
}
.settings-row {
@@ -413,7 +497,7 @@ onBeforeUnmount(() => {
align-items: center;
min-height: 78px;
padding: 16px 20px;
border-top: 1px solid #e0dbcf;
border-top: 1px solid var(--app-border-strong);
}
.settings-row-top {
@@ -427,7 +511,7 @@ onBeforeUnmount(() => {
.settings-copy h3,
.settings-empty-page h3 {
margin: 0 0 6px;
color: #2d2a26;
color: var(--app-text-strong);
font-size: 15px;
font-weight: 700;
line-height: 1.25;
@@ -436,7 +520,7 @@ onBeforeUnmount(() => {
.settings-copy p,
.settings-empty-page p {
margin: 0;
color: #5c574e;
color: var(--app-text-soft);
font-size: 12px;
line-height: 1.5;
}
@@ -447,7 +531,7 @@ onBeforeUnmount(() => {
padding: 0;
border: none;
background: transparent;
color: #7a55d9;
color: var(--app-link);
font-size: 12px;
line-height: 1.4;
text-align: left;
@@ -457,7 +541,7 @@ onBeforeUnmount(() => {
}
.settings-link:hover {
color: #6342bd;
color: var(--app-link-hover);
}
.settings-action-stack {
@@ -487,29 +571,29 @@ onBeforeUnmount(() => {
.settings-primary-btn {
min-width: 78px;
border: none;
background: #8c6be8;
color: #fff;
box-shadow: 0 2px 7px rgba(100, 65, 190, 0.26);
background: var(--app-control);
color: var(--app-control-contrast);
box-shadow: 0 2px 7px color-mix(in srgb, var(--app-control) 32%, transparent);
}
.settings-primary-btn:hover {
background: #7a55d9;
background: var(--app-control-hover);
}
.settings-secondary-btn {
min-width: 50px;
border: 1px solid #e0dbcf;
background: #fff;
color: #38342e;
box-shadow: 0 1px 4px rgba(56, 52, 46, 0.1);
border: 1px solid var(--app-border-strong);
background: var(--app-surface);
color: var(--app-text);
box-shadow: 0 1px 4px color-mix(in srgb, var(--app-shadow) 58%, transparent);
}
.settings-secondary-btn:hover {
background: #f4f1ea;
background: var(--app-surface-muted);
}
.settings-status {
color: #6f6a60;
color: var(--app-muted);
font-size: 11px;
white-space: nowrap;
}
@@ -532,7 +616,7 @@ onBeforeUnmount(() => {
position: absolute;
inset: 0;
border-radius: 999px;
background: #d4cfc4;
background: var(--app-border-strong);
transition: background-color 0.16s ease;
}
@@ -543,14 +627,14 @@ onBeforeUnmount(() => {
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(56, 52, 46, 0.24);
background: var(--app-surface);
box-shadow: 0 1px 3px var(--app-shadow);
content: "";
transition: transform 0.16s ease;
}
.settings-switch input:checked + span {
background: #8c6be8;
background: var(--app-control);
}
.settings-switch input:checked + span::after {
@@ -558,34 +642,76 @@ onBeforeUnmount(() => {
}
.settings-switch input:focus-visible + span {
outline: 2px solid #d6aa8e;
outline: 2px solid var(--app-accent-muted);
outline-offset: 2px;
}
.settings-select {
width: 158px;
height: 30px;
border: 1px solid #e0dbcf;
border: 1px solid var(--app-border-strong);
border-radius: 6px;
background: #fff;
color: #38342e;
background: var(--app-surface);
color: var(--app-text);
font-size: 13px;
line-height: 1;
padding: 0 10px;
box-shadow: 0 1px 4px rgba(56, 52, 46, 0.1);
box-shadow: 0 1px 4px color-mix(in srgb, var(--app-shadow) 58%, transparent);
outline: none;
}
.settings-select:focus {
border-color: #d6aa8e;
box-shadow: 0 0 0 3px rgba(191, 106, 59, 0.1);
border-color: var(--app-accent-muted);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 12%, transparent);
}
.theme-swatch-group {
display: inline-flex;
align-items: center;
gap: 10px;
}
.theme-reset-btn,
.theme-swatch {
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
}
.theme-reset-btn {
width: 30px;
height: 30px;
border-radius: 6px;
background: transparent;
color: var(--app-muted);
}
.theme-reset-btn:hover {
background: var(--app-hover);
color: var(--app-text);
}
.theme-swatch {
width: 22px;
height: 22px;
border-radius: 999px;
box-shadow:
0 0 0 1px color-mix(in srgb, var(--app-text) 18%, transparent),
0 2px 5px color-mix(in srgb, var(--app-shadow) 70%, transparent);
}
.theme-swatch-active {
outline: 2px solid var(--app-accent);
outline-offset: 3px;
}
.settings-empty-page {
display: flex;
align-items: center;
justify-content: center;
color: #8c877d;
color: var(--app-muted);
text-align: center;
}
@@ -609,7 +735,7 @@ onBeforeUnmount(() => {
flex-direction: row;
align-items: center;
border-right: none;
border-bottom: 1px solid #e8e4da;
border-bottom: 1px solid var(--app-border);
}
.settings-menu-title {