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-16 16:40:00 +08:00
parent 87e594be52
commit c5a5a4e55b
7 changed files with 1065 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
src/components/SettingsModal.vue
View File

@@ -122,14 +122,45 @@ const documentModeOptions: Array<{
const themeOptions: Array<{
value: AppTheme;
label: string;
swatch: string;
description: string;
swatches: [string, string, 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" },
{
value: "system",
label: "跟随系统",
description: "随操作系统在浅色与深色之间切换",
swatches: ["#ffffff", "#101113", "#7c9cff"],
},
{
value: "warm",
label: "柔和暖色",
description: "暖白纸张、陶土强调色",
swatches: ["#faf9f6", "#bf6a3b", "#7a55d9"],
},
{
value: "white",
label: "明亮白色",
description: "纯白背景、清晰蓝色强调",
swatches: ["#ffffff", "#2563eb", "#8250df"],
},
{
value: "gray",
label: "中性灰色",
description: "低饱和界面、沉静蓝灰强调",
swatches: ["#f3f4f6", "#4f6f93", "#7c5c99"],
},
{
value: "black",
label: "深色",
description: "近黑背景、冷调高对比代码色",
swatches: ["#101113", "#8ab4ff", "#c58af9"],
},
{
value: "gruvbox",
label: "Gruvbox",
description: "复古深色、暖橙与青绿色代码色",
swatches: ["#282828", "#fe8019", "#8ec07c"],
},
];
function loadBooleanPref(key: string, fallback: boolean) {
@@ -239,15 +270,6 @@ 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");
}
function setSyncStatus(message: string, isError = false) {
if (isError) {
syncError.value = message;
@@ -690,51 +712,35 @@ onBeforeUnmount(() => {
<section class="settings-about-card" aria-label="外观设置">
<div class="settings-row settings-row-top">
<div class="settings-copy">
<h3>基础颜色</h3>
<p>设置 {{ APP_NAME }} 的基础颜色。</p>
<h3>外观主题</h3>
<p>主题同时应用于界面、Markdown 预览和代码编辑。</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="主题色">
<div class="theme-option-grid" role="radiogroup" 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')"
v-for="option in themeOptions"
:key="option.value"
class="theme-swatch"
:class="{ 'theme-swatch-active': appTheme === option.value }"
class="theme-option"
:class="{ 'theme-option-active': appTheme === option.value }"
type="button"
:title="option.label"
:aria-label="option.label"
:style="{ background: option.swatch }"
role="radio"
:aria-checked="appTheme === option.value"
@click="emit('updateAppTheme', option.value)"
></button>
</div>
>
<span class="theme-option-preview" aria-hidden="true">
<span
v-for="(swatch, index) in option.swatches"
:key="swatch"
:style="{ background: swatch, flex: index === 0 ? 2 : 1 }"
></span>
</span>
<span class="theme-option-copy">
<strong>{{ option.label }}</strong>
<small>{{ option.description }}</small>
</span>
<i v-if="appTheme === option.value" class="ri-check-line"></i>
</button>
</div>
</section>
</div>
@@ -1165,46 +1171,70 @@ onBeforeUnmount(() => {
color: #dc2626;
}
.theme-swatch-group {
display: inline-flex;
align-items: center;
.theme-option-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
padding: 4px 20px 20px;
}
.theme-reset-btn,
.theme-swatch {
display: inline-flex;
.theme-option {
display: grid;
grid-template-columns: 48px minmax(0, 1fr) 18px;
gap: 11px;
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);
min-height: 64px;
padding: 10px;
border: 1px solid var(--app-border-strong);
border-radius: 7px;
background: var(--app-surface);
color: var(--app-text);
text-align: left;
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.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-option:hover {
background: var(--app-surface-muted);
}
.theme-swatch-active {
outline: 2px solid var(--app-accent);
outline-offset: 3px;
.theme-option-active {
border-color: var(--app-accent);
background: var(--app-active-bg);
}
.theme-option-preview {
display: flex;
width: 48px;
height: 38px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--app-text) 18%, transparent);
border-radius: 5px;
box-shadow: 0 2px 5px color-mix(in srgb, var(--app-shadow) 55%, transparent);
}
.theme-option-copy {
display: flex;
min-width: 0;
flex-direction: column;
gap: 4px;
}
.theme-option-copy strong {
color: var(--app-text-strong);
font-size: 13px;
line-height: 1.2;
}
.theme-option-copy small {
color: var(--app-muted);
font-size: 11px;
line-height: 1.35;
}
.theme-option > i {
color: var(--app-accent);
font-size: 16px;
}
.settings-empty-page {