feat(fe): overhaul UI theme, visual hierarchy and form layout - #42
Open
wgzhao wants to merge 4 commits into
Open
feat(fe): overhaul UI theme, visual hierarchy and form layout#42wgzhao wants to merge 4 commits into
wgzhao wants to merge 4 commits into
Conversation
Why: 前端长期存在深色主题对比度不足、页面视觉层次扁平、 form label 发虚、sys-settings 布局不合理等问题 What: - Redesign modern-theme with GitHub-inspired dark theme and refined light theme (Tailwind Slate palette). Dark: three-tier surface hierarchy (0D1117/161B22/1C2128), readable accent colors. Light: cleaner Slate grays, modern blue/violet accent palette - Switch default theme to light for better readability on regular monitors - Add visual hierarchy anchors: page-header accent line, section-card left border, table first-column weight - Fix form field comfort: global CSS reduces wasted outlined-input padding when label is external - Redesign sys-settings layout: tri-column config cards + full-width template editor + embedded save button - Make theme toggle discoverable with visible label instead of icon-only - Standardise field-label colour (remove opacity) for crisper form labels Impact: all frontend pages affected by theme/overrides changes Test: bun build:frontend passes Co-Authored-By: Claude <noreply@anthropic.com>
…mponents Why: 大量 scoped CSS 只用于布局（flex、gap、padding、margin、font）， 可以改用 UnoCSS utility 类，减少 CSS 体积，提高可维护性。 What: - Install UnoCSS + unocss-preset-vuetify, add to vite config and main.ts - Refactor 14 files: replace layout CSS with UnoCSS utility classes in template, keep only visual CSS (gradients, theme variables, :deep overrides) - Remove ~340 lines of redundant scoped CSS across all refactored files - Increase light-mode card border opacity for better card separation Files refactored: login, dashboard, change-password, logs, dict, data-insight, monitor, cluster, AddSource, BatchUpdate, FillbackDialog Test: bun build:frontend passes Co-Authored-By: Claude <noreply@anthropic.com>
Why: main.ts has imported uno.css since b0f9b93 but the UnoCSS plugin was never registered, so bun build:frontend fails with 'Rolldown failed to resolve import uno.css' on this branch. What: - Register UnoCSS() plugin in vite.config.js - Sync unocss deps into bun.lock, add root yarn.lock Impact: fixes frontend production build for the whole branch Test: bun build:frontend passes, vue-tsc reports no errors Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Claude <noreply@anthropic.com>
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.
feat(fe): overhaul UI theme, visual hierarchy and form layout
Why: 前端长期存在深色主题对比度不足、页面视觉层次扁平、
form label 发虚、sys-settings 布局不合理等问题
What:
theme (Tailwind Slate palette). Dark: three-tier surface hierarchy
(0D1117/161B22/1C2128), readable accent colors. Light: cleaner Slate
grays, modern blue/violet accent palette
left border, table first-column weight
padding when label is external
template editor + embedded save button
Impact: all frontend pages affected by theme/overrides changes
Test: bun build:frontend passes
Co-Authored-By: Claude noreply@anthropic.com