From be2e979252ded530beeb911c70a163ca1bedd87a Mon Sep 17 00:00:00 2001 From: HenryDu8133 <813367384@qq.com> Date: Sat, 24 Oct 2026 08:11:32 +0800 Subject: [PATCH] =?UTF-8?q?style(ui):=20=E8=8B=B9=E6=9E=9C=E9=A3=8E?= =?UTF-8?q?=E6=A0=BC=E4=BA=8C=E6=AC=A1=E6=89=93=E7=A3=A8=EF=BC=8C=E7=BB=9F?= =?UTF-8?q?=E4=B8=80=E5=9C=86=E8=A7=92=E4=B8=8E=E6=9D=90=E8=B4=A8=E5=B9=B6?= =?UTF-8?q?=E7=A7=BB=E9=99=A4=E6=AE=8B=E7=95=99=E4=BD=8D=E7=A7=BB=E5=8A=A8?= =?UTF-8?q?=E6=95=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 去除卡片内联硬编码圆角(6px/8px)与固定色值，统一走主题变量与 12px 圆角 - 笔记卡片取消上浮投影，改用按压与填充反馈；版权角标、滚动条、拖拽条改为随主题取色 - 全局补充：遮罩轻微虚化、输入框聚焦光晕、卡片标题排版、选中文本强调色 - 设置卡片的悬停投影改为描边反馈；修正 settings.scss 中无效的 rgb(a, x) 写法 - 服务选择入口去掉 2px 撞色描边与悬停投影，改为细描边与极淡渐变 --- src/components/InitServiceChooser.vue | 24 ++++++++++----- src/components/home/HomeworkGrid.vue | 2 -- src/pages/index.vue | 43 +++++++++----------------- src/pages/settings.vue | 10 +++--- src/styles/apple.scss | 44 +++++++++++++++++++++++++++ src/styles/settings.scss | 7 +++-- 6 files changed, 84 insertions(+), 46 deletions(-) diff --git a/src/components/InitServiceChooser.vue b/src/components/InitServiceChooser.vue index 5c42308..61cc96b 100644 --- a/src/components/InitServiceChooser.vue +++ b/src/components/InitServiceChooser.vue @@ -360,11 +360,18 @@ const openClassworksKV = () => { .main-service-card { min-height: 100px; cursor: pointer; - transition: all 0.3s ease; + transition: background-color 0.22s var(--apple-ease-out), + border-color 0.22s var(--apple-ease-out), + transform 0.14s var(--apple-ease-out); } .main-service-card:hover { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; + border-color: var(--apple-hairline-strong) !important; +} + +.main-service-card:active { + transform: scale(0.995); + transition-duration: 0.08s; } .main-service-card .v-card-item { @@ -386,19 +393,20 @@ const openClassworksKV = () => { text-align: left; } +/* 三档入口：取自主题强调色，只做极淡的底色渐变与一道细描边 */ .gradient-new { - background: linear-gradient(135deg, rgba(33, 150, 243, .12), rgba(103, 80, 164, 0.08) 60%); - border: 2px solid rgba(33, 150, 243, .2); + background-image: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.12), transparent 70%); + border: 1px solid rgba(var(--v-theme-primary), 0.26); } .gradient-registered { - background: linear-gradient(135deg, rgba(76, 175, 80, .12), rgba(0, 184, 212, 0.08) 60%); - border: 2px solid rgba(76, 175, 80, .2); + background-image: linear-gradient(135deg, rgba(var(--v-theme-success), 0.12), transparent 70%); + border: 1px solid rgba(var(--v-theme-success), 0.26); } .gradient-kv { - background: linear-gradient(135deg, rgba(0, 184, 212, .12), rgba(33, 150, 243, 0.08) 60%); - border: 2px solid rgba(0, 184, 212, .2); + background-image: linear-gradient(135deg, rgba(var(--v-theme-info), 0.12), transparent 70%); + border: 1px solid rgba(var(--v-theme-info), 0.26); } /* 其他选项 */ diff --git a/src/components/home/HomeworkGrid.vue b/src/components/home/HomeworkGrid.vue index b35406f..a42f94c 100644 --- a/src/components/home/HomeworkGrid.vue +++ b/src/components/home/HomeworkGrid.vue @@ -63,7 +63,6 @@ color="grey-darken-3" class="glow-track" height="100%" - style="border-radius: 6px !important" @click="handleCardClick('dialog', item.key)" @mousemove="handleMouseMove" @touchmove="handleTouchMove" @@ -206,7 +205,6 @@ v-for="subject in unusedSubjects" :key="subject.name" border - style="border-radius: 6px !important" class="empty-subject-card" @click="handleCardClick('dialog', subject.name)" > diff --git a/src/pages/index.vue b/src/pages/index.vue index e4b96de..b9a4817 100644 --- a/src/pages/index.vue +++ b/src/pages/index.vue @@ -237,7 +237,6 @@
-
+
@@ -658,7 +657,7 @@ class="mb-3 glow-track cursor-pointer note-card" variant="outlined" color="grey-darken-3" - style="border-radius: 8px !important; border-color: rgba(255,255,255,0.12);" + style="border-color: var(--apple-hairline);" @click="openDialog(item.name)" @mousemove="handleCardMouseMove" @touchstart="handleCardMouseMove" @@ -3004,20 +3003,19 @@ export default { position: fixed; bottom: 12px; right: 16px; - color: rgba(255, 255, 255, 0.7); + color: rgba(var(--v-theme-on-surface), 0.72); font-size: 17px; z-index: 100; pointer-events: none; user-select: none; - font-family: "Microsoft YaHei", sans-serif; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); - - /* Box style */ - border: 1px solid rgba(255, 255, 255, 0.2); - background-color: rgba(0, 0, 0, 0.4); + + /* 与顶栏同源的悬浮材质，随主题取色 */ + border: 1px solid var(--apple-hairline); + background-color: var(--apple-material); padding: 4px 12px; - border-radius: 4px; - backdrop-filter: blur(4px); + border-radius: var(--apple-radius-sm); + -webkit-backdrop-filter: saturate(180%) blur(16px); + backdrop-filter: saturate(180%) blur(16px); } .bloom-container { @@ -3025,19 +3023,6 @@ export default { padding-bottom: 40px; } -.note-card { - transition: transform 0.3s ease, box-shadow 0.3s ease; -} - -.note-card:hover { - transform: translateY(-4px); - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important; -} - -.note-card:active { - transform: translateY(-2px); -} - .item-line-text { white-space: pre-line; } @@ -3052,12 +3037,12 @@ export default { } .custom-scrollbar::-webkit-scrollbar-thumb { - background-color: rgba(255, 255, 255, 0.2); + background-color: rgba(var(--v-theme-on-surface), 0.16); border-radius: 3px; } .custom-scrollbar::-webkit-scrollbar-thumb:hover { - background-color: rgba(255, 255, 255, 0.4); + background-color: rgba(var(--v-theme-on-surface), 0.3); } .resizer-handle { diff --git a/src/pages/settings.vue b/src/pages/settings.vue index 4714365..30e7e99 100644 --- a/src/pages/settings.vue +++ b/src/pages/settings.vue @@ -784,11 +784,13 @@ export default { diff --git a/src/styles/apple.scss b/src/styles/apple.scss index 8340abe..59e5e8d 100644 --- a/src/styles/apple.scss +++ b/src/styles/apple.scss @@ -69,6 +69,29 @@ line-height: 1.25; } +/* 卡片标题：系统标题字重，避免 Material 默认的宽字距 */ +.v-application .v-card-title { + font-weight: 600; + letter-spacing: -0.01em; + line-height: 1.3; +} + +.v-application .v-card-subtitle { + letter-spacing: 0; + opacity: 0.72; +} + +/* 列表项标题保持中等字重，与系统侧边栏一致 */ +.v-application .v-list-item-title { + font-weight: 500; + letter-spacing: 0; +} + +/* 选中文本使用主题强调色，与系统高亮一致 */ +::selection { + background: rgba(var(--v-theme-primary), 0.32); +} + /* --------------------------------------------------------------------------- 2. 顶栏与抽屉：半透明材质，内容可从下方穿过 --------------------------------------------------------------------------- */ @@ -201,6 +224,12 @@ box-shadow: var(--apple-shadow-popover) !important; } +/* 遮罩层轻微虚化底层内容，营造系统的层次纵深 */ +.v-overlay__scrim { + -webkit-backdrop-filter: blur(2px); + backdrop-filter: blur(2px); +} + /* 提示气泡在明暗两套主题下都保持深色，与系统行为一致 */ .v-tooltip > .v-overlay__content { border-radius: var(--apple-radius-sm) !important; @@ -215,6 +244,11 @@ border-radius: var(--apple-radius) !important; } +/* 色块型提示加一道极细描边，边界更利落（描边款自带边框，不重复处理） */ +.v-alert--variant-tonal { + border: 1px solid var(--apple-hairline); +} + .v-divider { border-color: var(--apple-hairline) !important; opacity: 1 !important; @@ -225,6 +259,11 @@ border-radius: 10px !important; } +/* 聚焦时给输入框一圈柔和的强调色光晕，替代 Material 的整圈描边闪变 */ +.v-field--focused { + box-shadow: 0 0 0 3px rgba(var(--v-theme-primary), 0.16); +} + .v-snackbar__wrapper > .v-sheet { border-radius: var(--apple-radius) !important; border: 1px solid var(--apple-hairline); @@ -298,6 +337,11 @@ a:focus-visible { -webkit-backdrop-filter: none; backdrop-filter: none; } + + .v-overlay__scrim { + -webkit-backdrop-filter: none; + backdrop-filter: none; + } } @media (prefers-contrast: more) { diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 27f782a..64a97f7 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss @@ -10,11 +10,12 @@ // ); .student-card { - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + transition: background-color 0.2s var(--apple-ease-out), + border-color 0.2s var(--apple-ease-out); } .bg-primary-subtle { - background-color: rgb(var(--v-theme-primary), 0.05); + background-color: rgba(var(--v-theme-primary), 0.05); } .action-buttons { @@ -77,5 +78,5 @@ } .student-card:active { - background-color: rgb(var(--v-theme-primary), 0.05); + background-color: rgba(var(--v-theme-primary), 0.05); } \ No newline at end of file