feat: wire approved archive-room prototype styling into React components

Adds frontend/src/styles.css extracted from the confirmed prototype
(paper/ink/pine palette, Fraunces/Inter/IBM Plex Mono type system,
catalog-tag motif) and makes the minimal JSX adjustments needed for
each component to pick up the styling: wordmark heading, search icon,
upload button icon + modal header/footer, folder chevrons + file
icons, doc-path + save-status in the editor, catalog tags and
no-results treatment in search results.

Also adds .gitignore (venv/node_modules/dist/pycache) and commits the
frontend package-lock.json that was previously untracked.

.gitignore

@@ -0,0 +1,12 @@
+# Python
+__pycache__/
+*.pyc
+.venv/
+venv/
+
+# Node
+node_modules/
+dist/
+
+# Editor
+.DS_Store

frontend/src/App.tsx

@@ -57,7 +57,9 @@ export default function App() {
   return (
     <div className="app">
       <div className="topbar">
-        <h1>DocHub</h1>
+        <h1 className="wordmark" aria-label="DocHub">
+          DocHub <span className="subtitle">档案 · 检索</span>
+        </h1>
         <SearchBar value={searchQuery} onQueryChange={handleQueryChange} onResults={handleResults} />
         <UploadButton path={uploadPath} onUploaded={handleUploaded} />
       </div>
@@ -67,13 +69,21 @@ export default function App() {
           {selectedKey ? (
             <DocumentEditor documentKey={selectedKey} onDirtyChange={setIsDirty} />
           ) : (
-            <div data-testid="empty-state">未选择文档</div>
+            <div className="empty-state" data-testid="empty-state">
+              未选择文档
+            </div>
           )}
         </div>
         {searchQuery !== '' && !isSearching && (
-          <SearchResults query={searchQuery} results={searchResults} onJumpToResult={handleJumpToResult} />
+          <div className="search-overlay">
+            <SearchResults query={searchQuery} results={searchResults} onJumpToResult={handleJumpToResult} />
+          </div>
         )}
       </div>
+      <div className="statusbar">
+        <span>DOCHUB</span>
+        <span>UTF-8</span>
+      </div>
     </div>
   );
 }

frontend/src/components/DocumentEditor.tsx

@@ -68,20 +68,30 @@ export default function DocumentEditor({ documentKey, onDirtyChange }: DocumentE
   return (
     <div data-testid="document-editor">
       <div className="doc-header">
-        <span data-testid="save-status">{isDirty ? '未保存' : '已归档'}</span>
+        <div className="doc-path">
-        <button onClick={handleSave} disabled={!isDirty || saving}>
+          <span className="current">{documentKey}</span>
-          {saving ? '保存中…' : '保存'}
+        </div>
-        </button>
+        <div className="doc-actions">
-        {saveError && (
+          <span className={isDirty ? 'save-status dirty' : 'save-status saved'} data-testid="save-status">
-          <span data-testid="save-error">
+            <span className="dot" />
-            {saveError}
+            {isDirty ? '未保存' : '已归档'}
-            <button onClick={() => setSaveError(null)} aria-label="关闭错误提示">
-              ×
-            </button>
           </span>
-        )}
+          {saveError && (
+            <span className="save-error" data-testid="save-error">
+              {saveError}
+              <button onClick={() => setSaveError(null)} aria-label="关闭错误提示">
+                ×
+              </button>
+            </span>
+          )}
+          <button className="btn-save" onClick={handleSave} disabled={!isDirty || saving}>
+            {saving ? '保存中…' : '保存'}
+          </button>
+        </div>
+      </div>
+      <div className="editor-area">
+        <Editor value={content} onChange={handleChange} language={contentType === 'text/markdown' ? 'markdown' : 'html'} />
       </div>
-      <Editor value={content} onChange={handleChange} language={contentType === 'text/markdown' ? 'markdown' : 'html'} />
     </div>
   );
 }

frontend/src/components/FileExplorer.tsx

@@ -49,10 +49,14 @@ function FileRow({
   return (
     <div
       data-testid={`file-${file.key}`}
-      className={selectedKey === file.key ? 'file-row active' : 'file-row'}
+      className={selectedKey === file.key ? 'tree-item file-row active' : 'tree-item file-row'}
       onClick={() => onSelectFile(file.key)}
     >
-      {file.name}
+      <svg className="file-icon" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+        <path d="M14 2v6h6" />
+      </svg>
+      <span className="filename">{file.name}</span>
     </div>
   );
 }
@@ -86,7 +90,12 @@ function FolderNode({
 
   return (
     <div>
-      <div data-testid={`folder-${path}`} className="folder" onClick={toggle}>
+      <div data-testid={`folder-${path}`} className="tree-item folder" onClick={toggle}>
+        <span className={expanded ? 'chevron open' : 'chevron'}>
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M8 5v14l11-7z" />
+          </svg>
+        </span>
         {name}
       </div>
       {expanded && (

frontend/src/components/SearchBar.tsx

@@ -40,12 +40,18 @@ export default function SearchBar({ value, onQueryChange, onResults, debounceMs
   }
 
   return (
-    <input
+    <div className="search-box">
-      type="text"
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      placeholder="检索全部文档内容…"
+        <circle cx="11" cy="11" r="7" />
-      value={value}
+        <line x1="21" y1="21" x2="16.65" y2="16.65" />
-      onChange={handleChange}
+      </svg>
-      aria-label="搜索文档"
+      <input
-    />
+        type="text"
+        placeholder="检索全部文档内容…"
+        value={value}
+        onChange={handleChange}
+        aria-label="搜索文档"
+      />
+    </div>
   );
 }

frontend/src/components/SearchResults.tsx

@@ -8,19 +8,33 @@ interface SearchResultsProps {
 
 export default function SearchResults({ results, query, onJumpToResult }: SearchResultsProps) {
   if (results.length === 0) {
-    return <div data-testid="search-no-results">没有找到匹配的文档</div>;
+    return (
+      <div className="no-results" data-testid="search-no-results">
+        <span className="serif">没有找到匹配的文档</span>
+        换个关键词试试，或检查拼写
+      </div>
+    );
   }
 
   return (
     <div data-testid="search-results">
-      <div data-testid="search-results-count">
+      <div className="search-results-header" data-testid="search-results-count">
-        {results.length} 条与「{query}」相关的结果
+        <span className="big-count">{results.length}</span> 条与「{query}」相关的结果
       </div>
       {results.map((result) => (
-        <div key={result.key} data-testid={`search-result-${result.key}`} onClick={() => onJumpToResult(result.key)}>
+        <div
-          <div className="result-title">{result.title}</div>
+          key={result.key}
-          <div className="result-path">{result.path}</div>
+          className="result-item"
-          <div className="result-snippet" dangerouslySetInnerHTML={{ __html: result.snippet }} />
+          data-testid={`search-result-${result.key}`}
+          onClick={() => onJumpToResult(result.key)}
+        >
+          <span className="catalog-tag">{result.path}</span>
+          <div className="result-body">
+            <div className="result-path">
+              <span className="result-title">{result.title}</span>
+            </div>
+            <div className="result-snippet" dangerouslySetInnerHTML={{ __html: result.snippet }} />
+          </div>
         </div>
       ))}
     </div>

frontend/src/components/UploadButton.tsx

@@ -61,30 +61,62 @@ export default function UploadButton({ path, onUploaded }: UploadButtonProps) {
 
   return (
     <>
-      <button onClick={openModal}>上传文档</button>
+      <button className="upload-btn" onClick={openModal}>
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M12 3v12" />
+          <path d="M6 9l6-6 6 6" />
+          <path d="M4 21h16" />
+        </svg>
+        上传文档
+      </button>
       {isOpen && (
         <div className="modal-backdrop show" data-testid="upload-modal">
           <div className="modal">
-            <div
+            <div className="modal-header">
-              className={isDragOver ? 'dropzone dragover' : 'dropzone'}
+              <h3>上传文档</h3>
-              data-testid="dropzone"
+              <button className="modal-close" onClick={closeModal} aria-label="关闭">
-              onClick={() => fileInputRef.current?.click()}
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              onDrop={handleDrop}
+                  <line x1="18" y1="6" x2="6" y2="18" />
-              onDragOver={handleDragOver}
+                  <line x1="6" y1="6" x2="18" y2="18" />
-              onDragLeave={handleDragLeave}
+                </svg>
-            >
+              </button>
-              拖拽文件到此处，或点击选择
+            </div>
+            <div className="modal-body">
+              <div
+                className={isDragOver ? 'dropzone dragover' : 'dropzone'}
+                data-testid="dropzone"
+                onClick={() => fileInputRef.current?.click()}
+                onDrop={handleDrop}
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+              >
+                <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+                  <path d="M12 3v12" />
+                  <path d="M6 9l6-6 6 6" />
+                  <path d="M4 21h16" />
+                </svg>
+                拖拽文件到此处，或点击选择
+                <div className="hint">支持 .md .html 及常见图片格式</div>
+              </div>
+              {uploadError && (
+                <div className="upload-error" data-testid="upload-error">
+                  {uploadError}
+                </div>
+              )}
+              <input
+                ref={fileInputRef}
+                type="file"
+                multiple
+                data-testid="upload-file-input"
+                style={{ display: 'none' }}
+                onChange={handleFileInputChange}
+              />
+            </div>
+            <div className="modal-footer">
+              <button className="btn-secondary" onClick={closeModal}>
+                取消
+              </button>
             </div>
-            {uploadError && <div data-testid="upload-error">{uploadError}</div>}
-            <input
-              ref={fileInputRef}
-              type="file"
-              multiple
-              data-testid="upload-file-input"
-              style={{ display: 'none' }}
-              onChange={handleFileInputChange}
-            />
-            <button onClick={closeModal}>取消</button>
           </div>
         </div>
       )}

frontend/src/main.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import './styles.css';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>

frontend/src/styles.css

@@ -0,0 +1,618 @@
+:root {
+  --paper: #faf9f6;
+  --paper-alt: #f1efe6;
+  --ink: #1b1b18;
+  --ash: #86847c;
+  --ash-faint: #b3b0a5;
+  --rule: #e4e1d8;
+  --pine: #2f5d50;
+  --pine-deep: #234840;
+  --pine-soft: #e7efec;
+  --amber: #e8a33d;
+  --amber-soft: #fbead0;
+  --radius: 6px;
+  --shadow: 0 12px 36px rgba(27, 27, 24, 0.1);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: 'Inter', -apple-system, 'PingFang SC', sans-serif;
+  background: var(--paper);
+  color: var(--ink);
+  font-size: 13px;
+}
+
+.serif {
+  font-family: 'Fraunces', serif;
+}
+
+.mono {
+  font-family: 'IBM Plex Mono', Consolas, monospace;
+}
+
+.catalog-tag {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 10.5px;
+  color: var(--pine);
+  background: var(--pine-soft);
+  border: 1px solid rgba(47, 93, 80, 0.18);
+  border-radius: 4px;
+  padding: 1px 6px;
+  white-space: nowrap;
+  letter-spacing: 0.02em;
+  flex-shrink: 0;
+}
+
+.app {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ---------- Top bar ---------- */
+.topbar {
+  height: 58px;
+  background: var(--paper);
+  border-bottom: 1px solid var(--rule);
+  display: flex;
+  align-items: center;
+  padding: 0 22px;
+  gap: 22px;
+  flex-shrink: 0;
+}
+
+.wordmark {
+  font-family: 'Fraunces', serif;
+  font-style: italic;
+  font-weight: 600;
+  font-size: 19px;
+  color: var(--ink);
+  white-space: nowrap;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin: 0;
+}
+
+.wordmark .subtitle {
+  font-family: 'IBM Plex Mono', monospace;
+  font-style: normal;
+  font-size: 10px;
+  color: var(--ash);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.search-box {
+  flex: 1;
+  max-width: 540px;
+  position: relative;
+}
+
+.search-box input {
+  width: 100%;
+  background: var(--paper-alt);
+  border: 1px solid var(--rule);
+  border-radius: var(--radius);
+  color: var(--ink);
+  padding: 9px 14px 9px 38px;
+  font-size: 13px;
+  font-family: 'Inter', sans-serif;
+  outline: none;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.search-box input::placeholder {
+  color: var(--ash-faint);
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 12px;
+}
+
+.search-box input:focus {
+  border-color: var(--pine);
+  background: var(--paper);
+  box-shadow: 0 0 0 3px var(--pine-soft);
+}
+
+.search-box svg {
+  position: absolute;
+  left: 13px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--ash);
+  pointer-events: none;
+}
+
+.upload-btn {
+  margin-left: auto;
+  background: var(--pine);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius);
+  padding: 9px 16px;
+  font-size: 12.5px;
+  font-weight: 500;
+  font-family: 'Inter', sans-serif;
+  cursor: pointer;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  transition: background 0.15s;
+}
+
+.upload-btn:hover {
+  background: var(--pine-deep);
+}
+
+/* ---------- Body layout ---------- */
+.body {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+}
+
+/* ---------- Sidebar ---------- */
+.sidebar {
+  width: 272px;
+  background: var(--paper-alt);
+  border-right: 1px solid var(--rule);
+  overflow-y: auto;
+  padding: 16px 10px;
+  flex-shrink: 0;
+}
+
+.sidebar-title {
+  font-family: 'Fraunces', serif;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ink);
+  padding: 4px 10px 12px;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+
+.sidebar-title .count {
+  font-family: 'IBM Plex Mono', monospace;
+  color: var(--ash);
+  font-size: 11px;
+  font-weight: 400;
+}
+
+.tree-item {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 7px 10px;
+  font-size: 13px;
+  cursor: pointer;
+  color: var(--ink);
+  white-space: nowrap;
+  border-radius: 5px;
+  user-select: none;
+}
+
+.tree-item:hover {
+  background: rgba(27, 27, 24, 0.045);
+}
+
+.tree-item.file-row.active {
+  background: #fff;
+  box-shadow: 0 0 0 1px var(--rule);
+  font-weight: 500;
+}
+
+.tree-item.folder {
+  color: var(--ash);
+  font-weight: 500;
+  font-size: 11.5px;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.tree-children {
+  overflow: hidden;
+}
+
+.chevron {
+  display: inline-flex;
+  transition: transform 0.15s ease;
+  color: var(--ash-faint);
+  flex-shrink: 0;
+}
+
+.chevron.open {
+  transform: rotate(90deg);
+}
+
+.file-row {
+  padding-left: 20px;
+}
+
+.file-row .filename {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.file-icon {
+  color: var(--ash);
+  flex-shrink: 0;
+}
+
+/* ---------- Main ---------- */
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.empty-state {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ash-faint);
+  font-family: 'Fraunces', serif;
+  font-size: 15px;
+}
+
+.doc-header {
+  height: 54px;
+  background: var(--paper);
+  border-bottom: 1px solid var(--rule);
+  display: flex;
+  align-items: center;
+  padding: 0 24px;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.doc-path {
+  color: var(--ash);
+  font-size: 12.5px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.doc-path .sep {
+  color: var(--ash-faint);
+}
+
+.doc-path .current {
+  color: var(--ink);
+  font-weight: 500;
+}
+
+.doc-actions {
+  margin-left: auto;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.save-status {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 11px;
+  color: var(--ash-faint);
+  margin-right: 6px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.save-status .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--ash-faint);
+}
+
+.save-status.dirty {
+  color: #a9762a;
+}
+
+.save-status.dirty .dot {
+  background: var(--amber);
+}
+
+.save-status.saved {
+  color: var(--pine);
+}
+
+.save-status.saved .dot {
+  background: var(--pine);
+}
+
+.save-error {
+  font-size: 11.5px;
+  color: #a9401f;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.save-error button {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font-size: 13px;
+  line-height: 1;
+  padding: 0;
+}
+
+.btn-save {
+  background: var(--pine);
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  padding: 7px 15px;
+  font-size: 12px;
+  font-weight: 500;
+  font-family: 'Inter', sans-serif;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.btn-save:hover {
+  background: var(--pine-deep);
+}
+
+.btn-save:disabled {
+  background: var(--ash-faint);
+  cursor: default;
+}
+
+.btn-secondary {
+  background: transparent;
+  color: var(--ash);
+  border: 1px solid var(--rule);
+  border-radius: 5px;
+  padding: 7px 15px;
+  font-size: 12px;
+  font-family: 'Inter', sans-serif;
+  cursor: pointer;
+}
+
+.btn-secondary:hover {
+  background: var(--paper-alt);
+}
+
+.editor-area {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  background: var(--paper);
+}
+
+.editor-area > section {
+  flex: 1;
+}
+
+/* ---------- Search overlay ---------- */
+.search-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--paper);
+  z-index: 10;
+  overflow-y: auto;
+}
+
+.search-results-header {
+  padding: 24px 30px 12px;
+  color: var(--ash);
+  font-size: 12.5px;
+  border-bottom: 1px solid var(--rule);
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.search-results-header .big-count {
+  font-family: 'Fraunces', serif;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.result-item {
+  padding: 16px 30px;
+  border-bottom: 1px solid var(--rule);
+  cursor: pointer;
+  transition: background 0.1s;
+  display: flex;
+  gap: 12px;
+}
+
+.result-item:hover {
+  background: var(--paper-alt);
+}
+
+.result-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.result-path {
+  font-size: 12px;
+  color: var(--ash);
+  margin-bottom: 6px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.result-title {
+  font-family: 'Fraunces', serif;
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.result-snippet {
+  font-size: 12.5px;
+  color: var(--ash);
+  line-height: 1.65;
+}
+
+.result-snippet em {
+  background: var(--amber-soft);
+  color: #8a5a12;
+  padding: 0 2px;
+  border-radius: 2px;
+  font-weight: 600;
+  font-style: normal;
+}
+
+.no-results {
+  padding: 60px 30px;
+  text-align: center;
+  color: var(--ash-faint);
+  font-size: 13px;
+}
+
+.no-results .serif {
+  display: block;
+  font-size: 16px;
+  color: var(--ash);
+  margin-bottom: 6px;
+}
+
+/* ---------- Status bar ---------- */
+.statusbar {
+  height: 28px;
+  background: var(--paper-alt);
+  border-top: 1px solid var(--rule);
+  color: var(--ash);
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 10.5px;
+  display: flex;
+  align-items: center;
+  padding: 0 18px;
+  gap: 18px;
+  flex-shrink: 0;
+}
+
+/* ---------- Upload modal ---------- */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(27, 27, 24, 0.32);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+
+.modal {
+  background: var(--paper);
+  border-radius: 10px;
+  width: 460px;
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.modal-header {
+  padding: 18px 22px;
+  border-bottom: 1px solid var(--rule);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-family: 'Fraunces', serif;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.modal-close {
+  background: none;
+  border: none;
+  color: var(--ash);
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+}
+
+.modal-body {
+  padding: 22px;
+}
+
+.dropzone {
+  border: 1.5px dashed var(--rule);
+  border-radius: var(--radius);
+  padding: 36px 20px;
+  text-align: center;
+  color: var(--ash);
+  font-size: 12.5px;
+  transition: all 0.15s;
+  cursor: pointer;
+}
+
+.dropzone.dragover {
+  border-color: var(--pine);
+  background: var(--pine-soft);
+  color: var(--pine-deep);
+}
+
+.dropzone svg {
+  display: block;
+  margin: 0 auto 12px;
+  color: var(--ash-faint);
+}
+
+.dropzone.dragover svg {
+  color: var(--pine);
+}
+
+.dropzone .hint {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 10.5px;
+  color: var(--ash-faint);
+  margin-top: 4px;
+}
+
+.upload-error {
+  margin-top: 12px;
+  padding: 10px 12px;
+  background: #fdece6;
+  color: #a9401f;
+  border-radius: 5px;
+  font-size: 12px;
+}
+
+.modal-footer {
+  padding: 14px 22px;
+  border-top: 1px solid var(--rule);
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}