feat: 优化标题栏高度和垂直居中显示

- 调整 AppShell header 高度为 56px 并添加内联样式强制垂直居中
- 优化月份选择器按钮大小为 36px
- 更新 SPEC.md 添加端口配置说明 (前端 3500, 后端 3501)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

SPEC.md

@@ -11,9 +11,17 @@
 
 - **后端**: Node.js + Express
 - **数据库**: SQLite (轻量级，无需额外安装)
-- **前端**: 原生 HTML/CSS/JavaScript (保持简单)
+- **前端**: Next.js 14 (React)
 - **认证**: JWT Token
-- **端口**: 3500
+
+## 2.1 端口配置
+
+| 服务 | 端口 | 启动命令 |
+|------|------|----------|
+| 前端 (Next.js) | 3500 | `cd frontend && npm run dev` |
+| 后端 (Express API) | 3501 | `node server.js` |
+
+> **注意**: 前端通过 Next.js 开发服务器的 API 代理访问后端，代理配置在 `frontend/next.config.js` 中
 
 ## 3. UI/UX 规范
 
@@ -180,4 +188,18 @@ CREATE TABLE records (
 4. ✅ 可以新增收入/支出记录
 5. ✅ 可以编辑和删除记录
 6. ✅ 移动端界面正常显示和操作
-7. ✅ 通过 ip:3500 访问
+7. ✅ 通过 http://localhost:3500 访问前端
+
+## 8. 快速启动
+
+```bash
+# 启动后端 (端口 3501)
+cd /opt/accountbook
+node server.js
+
+# 启动前端 (端口 3500)
+cd /opt/accountbook/frontend
+npm run dev
+```
+
+访问 http://你的IP:3500

frontend/components/AppShell.js

@@ -33,7 +33,7 @@ export default function AppShell({ title, subtitle, actions, headerContent, chil
 
   return (
     <div className={`app-shell${hideNav ? ' app-shell--standalone' : ''}`}>
-      <header className={headerClassName}>
+      <header className={headerClassName} style={{minHeight: 56, height: 56, padding: 0, display: 'flex', alignItems: 'center'}}>
         <div className="app-shell__container app-header__inner">
           {headerNode ? <div className="app-header__main">{headerNode}</div> : <div className="app-header__spacer" aria-hidden="true" />}
           {actions ? <div className="app-header__actions">{actions}</div> : null}

frontend/styles/globals.css

@@ -134,13 +134,14 @@ textarea:focus-visible {
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  padding: 0;
+  padding: 4px 0;
 }
 
 .app-header--compact .app-header__inner {
-  min-height: 40px;
+  min-height: 32px !important;
-  gap: 10px;
+  height: 32px !important;
-  padding: 0;
+  gap: 4px !important;
+  padding: 0 !important;
 }
 
 .app-header__main,
@@ -153,6 +154,7 @@ textarea:focus-visible {
   display: flex;
   align-items: center;
   flex: 1;
+  height: 100%;
 }
 
 .app-header--actions-only .app-header__main {
@@ -430,14 +432,21 @@ textarea:focus-visible {
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  gap: 8px;
+  gap: 4px;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.header-center-container > * {
+  display: flex;
+  align-items: center;
 }
 
 .header-left-actions,
 .header-right-actions {
   display: flex;
   align-items: center;
-  min-width: 40px;
+  min-width: 32px;
 }
 
 .header-spacer {
@@ -455,13 +464,13 @@ textarea:focus-visible {
 .month-switcher-container .icon-button {
   width: 36px;
   height: 36px;
-  border-radius: 12px;
+  border-radius: 10px;
 }
 
 .month-switcher-container .month-switcher__label {
   font-size: 1rem;
   font-weight: 700;
-  min-width: 100px;
+  min-width: 90px;
   text-align: center;
 }
 
@@ -1869,7 +1878,7 @@ textarea:focus-visible {
 
 @media (max-width: 768px) {
   :root {
-    --header-height: 42px;
+    --header-height: 32px;
     --bottom-nav-height: 82px;
   }
 
@@ -1879,10 +1888,10 @@ textarea:focus-visible {
 
   .app-header__inner,
   .app-header--compact .app-header__inner {
-    min-height: auto;
+    min-height: 32px;
-    align-items: center;
+    align-items: stretch;
-    gap: 8px;
+    gap: 4px;
-    padding: 8px 0;
+    padding: 0;
   }
 
   .app-header__text h1 {