WIP：统一内嵌笔记与主聊天布局 - #183
Draft
RoxyAsahi wants to merge 29 commits into
Draft
Conversation
Add styles/app-surfaces/ as the shared visual foundation for the six classic app surfaces (Notes, Translator, Plugin Manager, Forum, Memo, Log): - app-surface-tokens.css: color tokens bridged from the legacy theme variables (all 18 themes and light/dark switch apply automatically) plus the layout contract (header/toolbar/footer heights, page gutter, content max widths, list row height, card radius, control sizes, 6px scrollbars). - app-surface-shell.css: shared App Header / Toolbar / Content / Footer skeleton with a single vertical scroll region and narrow-window rules. - app-surface-content.css: shared buttons, inputs, list rows, cards, status badges, empty/loading/error states and skeleton shimmer. - app-surfaces.css: entry point declaring the cascade layer order vcp.tokens < vcp.surface < vcp.components < vcp.page < vcp.overrides. The layer lives outside styles/ui-system/ on purpose: that tree is guarded as Next-Shell-only (.vcp-ui-scope) and business pages must remain upstream Classic. Pages opt in by linking app-surfaces.css and adding the vcp-app-surface class to <body>; nothing applies to pages that have not opted in. All styles are layered so existing unlayered page CSS still wins until each page migrates in its own commit. No business DOM, IPC, preload, loader, wallpaper or chat changes.
Migrate the Notes surface onto the shared App Surface layer as the sample page for the refresh: - notes.html opts in via body.vcp-app-surface, links styles/app-surfaces/app-surfaces.css + app-surface-notes.css, and maps the title bar, workspace toolbar and all buttons onto the shared vcp-app-* structure classes (JS contracts untouched: every id, data-attribute and state class the renderer toggles stays in place). - notes.css is retokenized end to end: glass panels become flat raised surfaces on a solid app background, literal colors/em sizes give way to --vcp-app-* tokens, and duplicated button/toolbar/scrollbar definitions are deleted in favor of the shared layer. Editor/preview split, resizer, view modes, find bar, context menus, markdown preview and modals keep their behavior. - app-surface-notes.css (vcp.page) carries the page-semantic states: view-mode selection, autosave/success/error button feedback and the JS-generated modal-ok button. - tokens.css gains --vcp-app-radius-xs used by inline code and tags. Light-theme syntax highlighting keeps its literal palette (rendered content, not component chrome). Verified: ui-system guard, ui-applications gate, page runtime gate and the full Electron UI apps smoke suite all pass.
Migrate the Translator surface onto the shared App Surface layer: - translator.html opts in via body.vcp-app-surface and links the shared layer. The catch-all ../style.css import (which pulled the entire main chat stylesheet stack, ui-system included, into this classic page) is removed; the page now relies on themes.css variables + app-surfaces. - Header/controls map onto vcp-app-toolbar structure classes; translate, copy and settings buttons use the shared button/icon-button styles. - translator.css is retokenized: flat raised panel on a solid app background, 36px one-off control heights become the 32px contract, literal status colors become success/danger tokens, the invalid rgba(var(--highlight-text), 0.3) focus rings are fixed with --vcp-app-focus-ring, and glass/scrollbar duplication is removed. - app-surface-translator.css (vcp.page) keeps the page-specific header title and floating copy-button tweaks. JS contracts untouched (ids, .hidden/.streaming/.light-theme toggles). Verified: ui-applications gate, page runtime gate and the Electron UI apps smoke suite (22 PASS) all pass.
- plugin-manager.html opts into the shared App Surface layer (body.vcp-app-surface, vcp-app-header/-actions/-icon-btn, vcp-app-toolbar, vcp-app-btn variants); glass classes removed - plugin-manager.css fully rewritten onto --vcp-app-* tokens: flat header bar, plugin groups demoted from nested cards to plain sections, real cards for plugins, badge/command-chip pill tokens, modal/tabs/toast tokenized, local scrollbars and theme var redefinitions deleted - shared components gain vcp-app-btn--success/--warning ghost variants - vcp.page layer: empty states span the full card grid row
- new styles/app-surfaces/app-surface-content-pages.css (vcp.page) maps the legacy glass control family that forum/memo JS generates at runtime (.glass, .glass-input, .search-glass, .jelly-btn, .glass-btn, .nav-icon-btn, .modal, .modal-glass-content) onto the shared flat token visuals, so JS-generated markup needs no DOM changes - forum.css / memo.css / log.css fully rewritten onto --vcp-app-* tokens: theme var redefinition blocks and global transition deleted, 48px flat header bars, card radius 8, control sizes from tokens, local scrollbars and glass blur removed, log-level colors mapped to semantic tokens, narrow-window media queries kept - forum/memo/log html opt into the shared layer (body.vcp-app-surface, vcp-app-header/-actions); inline glass-era styles retokenized or removed - masonry grid, memo card grid, editor/workbench/neural-graph layouts and animations preserved; all JS-toggled classes kept intact
- new static gate scripts/check-app-surfaces.mjs (npm run check:app-surfaces, chained into check:ui-applications): six refreshed pages must link app-surfaces.css and carry body.vcp-app-surface; page CSS must not redefine --vcp-app-* tokens or ship its own webkit scrollbars; page-layer files must live in @layer vcp.page; pages must not re-import the main-chat stylesheet stack (notes.html dead commented link removed) - smoke suite: each embedded classic audit now also asserts the app-surface contract — the six refreshed pages must resolve body.vcp-app-surface and a valid --vcp-app-header-height pixel value, while the untouched notemini/ task pages must not carry the opt-in class, guarding against shared-layer leakage - README documents the regression coverage
- notes/translator custom title bars now follow the shared header contract: 48px (--vcp-app-header-height) flat raised bar with bottom border instead of a transparent 40px strip; container offsets and title font sizes updated to match; window-control buttons use --vcp-app-control-sm (28px) - legacy .empty-state (generated by plugin-manager JS) moved into the shared vcp.components layer so every surface renders the same dashed placeholder; plugin-manager drops its local copy and the glass class on generated states; log keeps its centered overlay variant and explicitly clears the shared placeholder border
- fix mislabeled folder creation button (新建文档 → 新建文件夹) - drop permanent markdown cheat-sheet row; guidance moves into the editor placeholder where it belongs - remove floating 编辑区/预览区 watermark labels - demote sidebar help link from accent to secondary with accent hover
- model select shows mode names only (快速/均衡/质量); the raw model id stays in the option tooltip and the settings dialog - drop redundant 翻译助手 heading (window title already says it) - shrink the low-frequency custom prompt input and clarify its placeholder; it expands on focus
- hero drops the decorative eyebrow, duplicated page title, and raw config file names; one sentence now states what the page does - summary dashboard keeps the four actionable counts (total, enabled, disabled, broken) and highlights 异常 only when it is non-zero; trivia stats (command total, config.env count) removed - 保存开关 relabeled 应用更改 to match what the button does
- replace English login strings (Please enter… / Verifying… / Enter Forum) with Chinese to match the rest of the UI - drop decorative emoji from board filter, search placeholder, modal titles, and button labels; keep the functional emoticon picker - login card says what it is (登录论坛) and the remember-me label no longer repeats itself
- startup failure now renders one structured error state (icon + title + actionable hint) in the content area instead of duplicating the raw message in both sidebar and grid; sidebar shows a muted 暂不可用 placeholder - error copy tells the user what to do (log in via the Forum app, configure the server URL in global settings) - strip decorative emoji from buttons, modal titles, and confirm dialogs; drop internal field names (maid/folder) from form labels
- titlebar status stays a short state word (未配置服务器 / 未登录 论坛); the actionable guidance moves into the content-area empty overlay and the toast - empty overlay distinguishes 无日志 / 筛选无匹配 / 初始化失败 instead of always claiming 暂无日志内容 - filter placeholder rewritten in natural Chinese
setEmptyMessage now activates the overlay (render() only runs after successful fetches, so init failures previously set text nobody could see); fetch errors only take over the overlay when no lines are loaded, and the success path resets the base message before render
Adopting the deepseek-harness / main-window surface language: - borders become hairlines derived from the text color (standard 10%, structural 6%) instead of the often-strong theme border color - toolbar loses its bottom rule; header/footer keep only a 6% hairline - radius scale shifts to capsule geometry: controls 8px, cards 12px, modals 16px, buttons/badges/icon buttons fully round - shadows become much lighter; the large shadow gains a 1px rim light instead of a solid border for overlays - icon sizes normalized globally via CSS: header actions 18px, toolbar 16px, window controls 14px
- settings gear and copy button switch from filled heroicon-style glyphs to lucide stroke icons, size normalized by the shared layer - the header no longer draws its own bottom rule
RoxyAsahi
changed the title
RoxyAsahi
force-pushed
the
codex/app-surfaces-ui-refresh-17dd
branch
from
August 22, 2026 07:47
7a7d4c0 to
0511ac3
Compare
RoxyAsahi
force-pushed
the
codex/app-surfaces-ui-refresh-17dd
branch
from
August 22, 2026 07:48
0511ac3 to
4534777
Compare
Contributor
Author
进展更新已继续推进翻译页的内嵌布局统一：
新增提交： |
Owner
|
这个停工了吗？ |
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
2 participants
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.
当前状态
这是一个进行中的 Draft PR，用于推进 VCPChat 各应用页面的视觉和布局统一。当前重点是让内嵌笔记页面遵循主聊天的 Shell 和面板结构。还没弄完。。。仅供参考
当前范围
后续工作
目前仍处于早期开发阶段，后续还需要继续完善视觉细节、响应式布局、主题覆盖和回归证据。