Modernize UI: light/dark themes, glassmorphism, and fluid animations - #3
Open
Jimmy-xuzimo wants to merge 1 commit into
Open
Modernize UI: light/dark themes, glassmorphism, and fluid animations#3Jimmy-xuzimo wants to merge 1 commit into
Jimmy-xuzimo wants to merge 1 commit into
Conversation
- Add theme toggle (top bar) with 0.3s smooth full-page transition, persisted in localStorage and following OS preference by default - Add sidebar collapse toggle with 0.3s cubic-bezier width animation - Apply backdrop-blur frosted glass to topbar, sidebar, and dialog headers - Refresh color system: light canvas #f5f8f7 with teal accent; dark navy #0f172a with desaturated teal and high-contrast text - Add view-enter fade/rise, card hover lift + shadow, table row hover indicator, button press scale, and modal spring-up animations - Use gradient metric text and 1px borders + soft shadows for depth - Preserve existing DOM structure and class names (new theme.js only)
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
1 participant
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.
功能描述
在保留现有三栏布局（Sidebar + Workspace + AI Assistant）、DOM 结构与 class 命名的前提下，为学生档案管理系统带来一套现代化 UI 升级：默认浅色模式 + 深色/浅色一键切换、全局毛玻璃效果、流畅的微交互动画，并在现有青绿（Teal）政务风格基础上优化配色层次，保持「安全可信」的产品气质。
实现细节
新增文件
app/static/theme.js：主题切换与侧边栏折叠控制器。在<head>中提前加载（首帧渲染前应用data-theme），偏好持久化到localStorage，未手动选择时跟随系统prefers-color-scheme；切换时挂载临时.theme-transition类实现 0.3s 全页面平滑过渡。严格遵循现有 CSP（script-src 'self'），无内联脚本。修改文件
app/templates/index.html：<html>增加data-theme="light"；顶部导航栏右上角新增#theme-toggle深浅色切换按钮（月/日图标随主题切换）；侧边栏新增#sidebar-toggle折叠按钮（展开/收起图标联动）。原有结构与 class 命名完全兼容。app/templates/login.html：同步接入data-theme与theme.js，登录页支持主题切换。app/static/app.css：全量重构（703 删 / 879 增）——:root浅色（纯白/浅灰画布#f5f8f7+ 青绿强调色）与[data-theme="dark"]深色（深蓝灰#0f172a+ 降饱和青绿#3aa396+ 高对比文字），配套color-scheme声明。blur(16px) saturate(1.5)、侧边栏blur(18px)、弹窗/卡片头部磨砂层，均含-webkit-backdrop-filter前缀与半透明底色降级。测试结果
后端回归
pytest tests/：92/92 通过（数据导入导出全量用例）UI 功能测试（Playwright，桌面 1440×900）
rgb(15,23,42)生效响应式测试
跨浏览器兼容性（Playwright）
<style>body{}</style>会触发 CSP 拦截告警，与本次改动无关，已甄别排除）测试环境：本地启动
uvicorn app.main:app，管理员账号全流程真实登录验证。兼容性说明
app.js业务逻辑，仅新增theme.js与静态资源版本参数（?v=20260902-1）backdrop-filter提供-webkit-前缀；不支持该属性的浏览器自动降级为半透明底色