Merge pull request #588 from Yumiue/html_progress

refator(web):改变web布局和字体

Author: phantom5099

web/package-lock.json

@@ -18,6 +18,7 @@
     "verify:electron-preload": "node scripts/verify-electron-preload.js"
   },
   "dependencies": {
+    "@fontsource/jetbrains-mono": "^5.2.8",
     "@monaco-editor/react": "^4.7.0",
     "electron-updater": "^6.8.3",
     "lucide-react": "^0.468.0",

web/package.json

@@ -14,7 +14,7 @@ vi.mock('@monaco-editor/react', () => ({
     value: string
     language: string
     theme: string
-    options: { readOnly?: boolean }
+    options: { readOnly?: boolean; fontFamily?: string }
   }) => (
     <div
       data-testid="monaco-editor"
@@ -23,6 +23,7 @@ vi.mock('@monaco-editor/react', () => ({
       data-language={language}
       data-theme={theme}
       data-readonly={String(Boolean(options.readOnly))}
+      data-font-family={options.fontFamily}
     />
   ),
 }))
@@ -52,6 +53,7 @@ describe('CodePreviewEditor', () => {
     expect(editor).toHaveAttribute('data-language', 'go')
     expect(editor).toHaveAttribute('data-theme', 'vs-dark')
     expect(editor).toHaveAttribute('data-readonly', 'true')
+    expect(editor).toHaveAttribute('data-font-family', 'var(--font-mono)')
   })
 
   it('uses the explicit language when provided', () => {

web/src/components/panels/CodePreviewEditor.test.tsx

@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import FileChangePanel from './FileChangePanel'
 import { CHANGES_PREVIEW_TAB_ID, GIT_DIFF_PREVIEW_TAB_ID, useUIStore } from '@/stores/useUIStore'
 
@@ -323,6 +323,19 @@ describe('FileChangePanel', () => {
   })
 
   it('opens a git diff file tab from the fixed git diff view', async () => {
+    mockGatewayAPI.readGitDiffFile.mockResolvedValueOnce({
+      payload: {
+        path: 'src/main.go',
+        status: 'modified',
+        old_path: 'src/legacy.go',
+        encoding: 'utf-8',
+        original_content: 'before',
+        modified_content: 'after',
+        size_original: 6,
+        size_modified: 5,
+      },
+    })
+
     render(<FileChangePanel />)
 
     fireEvent.click(screen.getByTestId(`preview-tab-${GIT_DIFF_PREVIEW_TAB_ID}`))
@@ -342,6 +355,17 @@ describe('FileChangePanel', () => {
     expect(preview).toHaveAttribute('data-path', 'src/main.go')
     expect(preview).toHaveAttribute('data-side-by-side', 'true')
     expect(preview.textContent).toContain('before::after')
+
+    const gitDiffHeader = screen.getByTestId('git-diff-file-preview-header')
+    const gitDiffPath = within(gitDiffHeader).getByTestId('git-diff-file-preview-path')
+    expect(gitDiffPath.textContent).toBe('src/main.go')
+    expect(gitDiffPath).toHaveAttribute('title', 'src/main.go')
+    expect(gitDiffPath).toHaveStyle({
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    })
+    expect(gitDiffHeader.textContent?.trim()).toBe('src/main.go')
   })
 
   it('renders file preview tabs in the secondary chip row instead of mixing them into the primary switcher', () => {
@@ -365,6 +389,9 @@ describe('FileChangePanel', () => {
           title: 'main.go',
           closable: true,
           path: 'cmd/neocode/main.go',
+          size: 1024,
+          encoding: 'utf-8',
+          mod_time: '2026-05-08T10:53:48Z',
           content: 'package main',
           loading: false,
           loaded: true,
@@ -553,6 +580,16 @@ describe('FileChangePanel', () => {
     expect(preview).toHaveAttribute('data-path', 'cmd/neocode/main.go')
     expect(preview).toHaveAttribute('data-theme', 'light')
     expect(preview.textContent).toContain('package main')
+    const fileHeader = screen.getByTestId('file-preview-header')
+    const filePath = within(fileHeader).getByTestId('file-preview-path')
+    expect(filePath.textContent).toBe('cmd/neocode/main.go')
+    expect(filePath).toHaveAttribute('title', 'cmd/neocode/main.go')
+    expect(filePath).toHaveStyle({
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    })
+    expect(fileHeader.textContent?.trim()).toBe('cmd/neocode/main.go')
   })
 
   it('uses theme variables instead of fixed diff colors in light mode', () => {

web/src/components/panels/FileChangePanel.test.tsx

@@ -117,34 +117,6 @@ function getContextPreviewTabID(activeTab: PreviewTab | undefined) {
   return activeTab.id
 }
 
-function formatPreviewMeta(tab: FilePreviewTab) {
-  const segments: string[] = []
-  if (typeof tab.size === 'number') {
-    segments.push(`${tab.size} B`)
-  }
-  if (tab.encoding) {
-    segments.push(tab.encoding)
-  }
-  if (tab.mod_time) {
-    segments.push(tab.mod_time)
-  }
-  return segments.join(' · ')
-}
-
-function formatGitDiffMeta(tab: GitDiffFilePreviewTab) {
-  const segments: string[] = []
-  if (typeof tab.size_original === 'number') {
-    segments.push(`原始 ${tab.size_original} B`)
-  }
-  if (typeof tab.size_modified === 'number') {
-    segments.push(`当前 ${tab.size_modified} B`)
-  }
-  if (tab.encoding) {
-    segments.push(tab.encoding)
-  }
-  return segments.join(' · ')
-}
-
 function DiffLineView({ line }: { line: DiffLine }) {
   const lineStyles: Record<DiffLine['type'], CSSProperties> = {
     add: { color: 'var(--diff-add-text)', background: 'var(--diff-add-bg)' },
@@ -313,7 +285,6 @@ function PreviewFallback({ message = '正在加载代码编辑器...' }: { messa
 
 function FilePreviewView({ tab }: { tab: FilePreviewTab }) {
   const theme = useUIStore((state) => state.theme)
-  const meta = formatPreviewMeta(tab)
 
   let body = null
   if (tab.loading) {
@@ -336,10 +307,8 @@ function FilePreviewView({ tab }: { tab: FilePreviewTab }) {
 
   return (
     <div style={styles.viewContainer}>
-      <div style={styles.viewHeader}>
-        <span style={styles.viewTitle}>{tab.title}</span>
-        <div style={styles.previewPath}>{tab.path}</div>
-        {meta && <div style={styles.previewMeta}>{meta}</div>}
+      <div style={styles.viewHeader} data-testid="file-preview-header">
+        <div style={styles.previewPath} data-testid="file-preview-path" title={tab.path}>{tab.path}</div>
       </div>
       {body}
     </div>
@@ -349,8 +318,6 @@ function FilePreviewView({ tab }: { tab: FilePreviewTab }) {
 function GitDiffFileView({ tab }: { tab: GitDiffFilePreviewTab }) {
   const theme = useUIStore((state) => state.theme)
   const changesPanelWidth = useUIStore((state) => state.changesPanelWidth)
-  const meta = formatGitDiffMeta(tab)
-  const statusMeta = gitDiffStatusMeta[tab.status]
 
   let body = null
   if (tab.loading) {
@@ -377,14 +344,8 @@ function GitDiffFileView({ tab }: { tab: GitDiffFilePreviewTab }) {
 
   return (
     <div style={styles.viewContainer}>
-      <div style={styles.viewHeader}>
-        <div style={styles.titleRow}>
-          <span style={styles.viewTitle}>{tab.title}</span>
-          <span style={{ ...styles.statusPill, color: statusMeta.color, background: statusMeta.bg }}>{statusMeta.label}</span>
-        </div>
-        <div style={styles.previewPath}>{tab.path}</div>
-        {tab.old_path && <div style={styles.previewSubPath}>原路径: {tab.old_path}</div>}
-        {meta && <div style={styles.previewMeta}>{meta}</div>}
+      <div style={styles.viewHeader} data-testid="git-diff-file-preview-header">
+        <div style={styles.previewPath} data-testid="git-diff-file-preview-path" title={tab.path}>{tab.path}</div>
       </div>
       {body}
     </div>
@@ -931,16 +892,21 @@ const styles: Record<string, CSSProperties> = {
     display: 'flex',
     flexDirection: 'column',
     overflow: 'hidden',
+    padding: '8px 10px 0',
   },
   viewContainer: {
     display: 'flex',
     flexDirection: 'column',
     flex: 1,
     minHeight: 0,
     overflow: 'hidden',
+    background: 'var(--bg-primary)',
+    border: '1px solid var(--border-primary)',
+    borderRadius: 'var(--radius-md)',
+    boxShadow: 'var(--shadow-surface)',
   },
   viewHeader: {
-    padding: '12px 14px',
+    padding: '8px 10px',
     borderBottom: '1px solid var(--border-primary)',
     flexShrink: 0,
   },
@@ -984,7 +950,7 @@ const styles: Record<string, CSSProperties> = {
     flex: 1,
     minHeight: 0,
     overflow: 'auto',
-    padding: 12,
+    padding: 10,
   },
   contentStack: {
     display: 'flex',
@@ -1143,22 +1109,19 @@ const styles: Record<string, CSSProperties> = {
     color: 'var(--text-tertiary)',
     fontSize: 12,
     fontFamily: 'var(--font-ui)',
-    padding: 20,
+    padding: 16,
     textAlign: 'center',
   },
   previewPath: {
-    marginTop: 8,
+    marginTop: 0,
     color: 'var(--text-secondary)',
     fontSize: 12,
     fontFamily: 'var(--font-ui)',
-    wordBreak: 'break-all',
-  },
-  previewSubPath: {
-    marginTop: 4,
-    color: 'var(--text-tertiary)',
-    fontSize: 11,
-    fontFamily: 'var(--font-ui)',
-    wordBreak: 'break-all',
+    minWidth: 0,
+    lineHeight: '18px',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
   },
   previewMeta: {
     marginTop: 6,

web/src/components/panels/FileChangePanel.tsx

@@ -14,14 +14,15 @@ vi.mock('@monaco-editor/react', () => ({
     modified: string
     language: string
     theme: string
-    options: { renderSideBySide?: boolean; lineNumbers?: string }
+    options: { renderSideBySide?: boolean; lineNumbers?: string; fontFamily?: string }
   }) => (
     <div
       data-testid="monaco-diff-editor"
       data-language={language}
       data-theme={theme}
       data-side-by-side={String(Boolean(options.renderSideBySide))}
       data-line-numbers={options.lineNumbers}
+      data-font-family={options.fontFamily}
     >
       {original}::{modified}
     </div>
@@ -45,6 +46,7 @@ describe('GitDiffPreviewEditor', () => {
     expect(editor).toHaveAttribute('data-theme', 'vs-dark')
     expect(editor).toHaveAttribute('data-side-by-side', 'true')
     expect(editor).toHaveAttribute('data-line-numbers', 'on')
+    expect(editor).toHaveAttribute('data-font-family', 'var(--font-mono)')
     expect(editor.textContent).toContain('before::after')
   })
 

web/src/components/panels/GitDiffPreviewEditor.test.tsx

@@ -53,7 +53,7 @@
 
   /* Typography */
   --font-ui:        system-ui, -apple-system, 'SF Pro Text', 'SF Pro Display', sans-serif;
-  --font-mono:      'SF Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
+  --font-mono:      'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;
 
   /* Spacing scale (4px base) */
   --space-1: 4px;

web/src/index.css

@@ -1,5 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import '@fontsource/jetbrains-mono/400.css'
 import App from './App'
 import { RuntimeProvider } from './context/RuntimeProvider'
 import './index.css'