feat: dark mode, mobile menu redesign & search UX improvements#6
Open
ayyyyano wants to merge 4 commits into
Open
feat: dark mode, mobile menu redesign & search UX improvements#6ayyyyano wants to merge 4 commits into
ayyyyano wants to merge 4 commits into
Conversation
XFJ-YYQF
requested changes
Jul 21, 2026
XFJ-YYQF
left a comment
Contributor
There was a problem hiding this comment.
好棒好棒,窝仔细看了喵,都是些很简单的无伤大雅的小问题喵
Contributor
|
哦对了,移动端展开菜单收纳是不是还是横向排布比较好,这样感觉有点太占空间了(? |
Author
Contributor
|
我感觉P2比较好(? |
…nu UX and dark mode SSR compatibility
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.


变更内容
设计系统与图标库升级
引入 Material Design Icons(MDI)
@nuxt/icon+@iconify-json/mdi+@iconify-json/fa-solidmdi:magnify)、分类(mdi:file-tree)、统计(mdi:chart-bar)、管理(mdi:cog)、关于(mdi:information-outline)mdi:white-balance-sunny/mdi:moon-waning-crescent)、菜单展开(mdi:menu/mdi:close)、向上箭头(mdi:chevron-up)、向右箭头(mdi:chevron-right)mdi:earth)、分类(mdi:folder)、章节(mdi:book-open-page-variant)mdi:clock-outline)Tailwind 深色模式配置
tailwind.config.ts新增darkMode: "class"配置nuxt.config.ts新增darkMode: "class"Tailwind 配置项深色模式完整适配
核心实现
创建
useDarkMode()组合函数(frontend/composables/useDarkMode.ts)isDark、toggle()、clearPreference()接口深色模式 CSS 基础设施(
frontend/assets/css/main.css)html.dark下color-scheme: dark强制浏览器原生控件使用深色::-webkit-scrollbar-thumb样式scrollbar-color和scrollbar-width属性transition-colors duration-300)SSR 首屏闪烁修复
采用服务端 + 客户端双阶段初始化:
plugins/dark-mode.server.tsnuxt.config.tshead 初始化脚本确保:
页面级适配
app.vue— 顶栏、主内容区背景色切换pages/index.vue— 搜索框、结果卡片、提示信息全量适配pages/config.vue— 管理后台表单、表格、标签栏、Modal 深色适配pages/about.vue— 文本、链接、代码块深色样式pages/stats.vue— 统计数字卡片、状态指示器pages/tree.vue— 分类树节点、选中态、悬停态样式模式
移动端菜单优化
设计方案变更
交互行为
搜索体验增强
快速清空搜索框
新增快速清空按钮 (
frontend/pages/index.vue)搜索历史记录
维护最近 5 次搜索查询
避免空搜索提示
回顶浮动按钮
功能规格
风险预估
已识别风险及修复
性能影响预测
变更统计