feat: 手动账单输入功能及时区修复

- 新增手动账单输入功能
  - 创建 ManualBillInput 组件，支持批量添加账单
  - 添加服务器端 API /api/bills/manual 处理手动账单创建
  - 支持时间选择器，默认当前时间
  - 交易对方字段设为可选
  - 实时显示待提交账单列表
  - 提交成功后显示成功/失败/重复统计

- 修复时区问题
  - 后端使用 time.ParseInLocation 解析本地时间，避免 UTC 时区错误
  - 确保手动输入的时间按本地时区正确存储

- UI 优化
  - 账单管理页面添加标签页切换（列表/手动添加）
  - 主页添加快捷按钮跳转至手动添加页面
  - 手动账单来源正确显示为"手动输入"
  - 使用 shadcn-svelte 组件统一 UI 风格
  - 提交成功后保持日期筛选并重新加载数据

server/handler/manual_bills.go

@@ -0,0 +1,133 @@
+package handler
+
+import (
+	"net/http"
+	"time"
+
+	"github.com/gin-gonic/gin"
+
+	"billai-server/model"
+	"billai-server/repository"
+)
+
+// ManualBillInput 手动输入的账单
+type ManualBillInput struct {
+	Time          string  `json:"time" binding:"required"`           // 交易时间
+	Category      string  `json:"category" binding:"required"`       // 交易分类
+	Merchant      string  `json:"merchant" binding:"required"`       // 交易对方
+	Description   string  `json:"description"`                       // 商品说明
+	IncomeExpense string  `json:"income_expense" binding:"required"` // 收/支
+	Amount        float64 `json:"amount" binding:"required"`         // 金额
+	PayMethod     string  `json:"pay_method"`                        // 支付方式
+	Status        string  `json:"status"`                            // 交易状态
+	Remark        string  `json:"remark"`                            // 备注
+}
+
+// CreateManualBillsRequest 批量创建手动账单请求
+type CreateManualBillsRequest struct {
+	Bills []ManualBillInput `json:"bills" binding:"required,min=1"`
+}
+
+// CreateManualBillsResponse 批量创建手动账单响应
+type CreateManualBillsResponse struct {
+	Result     bool   `json:"result"`
+	Message    string `json:"message,omitempty"`
+	Data       *CreateManualBillsData `json:"data,omitempty"`
+}
+
+// CreateManualBillsData 批量创建手动账单数据
+type CreateManualBillsData struct {
+	Success    int `json:"success"`    // 成功创建数量
+	Failed     int `json:"failed"`     // 失败数量
+	Duplicates int `json:"duplicates"` // 重复数量
+}
+
+// CreateManualBills 批量创建手动输入的账单
+func CreateManualBills(c *gin.Context) {
+	var req CreateManualBillsRequest
+	if err := c.ShouldBindJSON(&req); err != nil {
+		c.JSON(http.StatusBadRequest, CreateManualBillsResponse{
+			Result:  false,
+			Message: "参数解析失败: " + err.Error(),
+		})
+		return
+	}
+
+	// 获取 repository
+	repo := repository.GetRepository()
+	if repo == nil {
+		c.JSON(http.StatusInternalServerError, CreateManualBillsResponse{
+			Result:  false,
+			Message: "数据库未连接",
+		})
+		return
+	}
+
+	// 转换为 CleanedBill
+	bills := make([]model.CleanedBill, 0, len(req.Bills))
+	for _, input := range req.Bills {
+		// 解析时间（使用本地时区，避免 UTC 时区问题）
+		t, err := time.ParseInLocation("2006-01-02 15:04:05", input.Time, time.Local)
+		if err != nil {
+			// 尝试另一种格式
+			t, err = time.ParseInLocation("2006-01-02T15:04:05Z07:00", input.Time, time.Local)
+			if err != nil {
+				c.JSON(http.StatusBadRequest, CreateManualBillsResponse{
+					Result:  false,
+					Message: "时间格式错误: " + input.Time,
+				})
+				return
+			}
+		}
+
+		// 设置默认值
+		status := input.Status
+		if status == "" {
+			status = "交易成功"
+		}
+
+		bill := model.CleanedBill{
+			BillType:        "manual",
+			TransactionID:   "", // 手动账单不设置交易ID
+			MerchantOrderNo: "",
+			Time:            t,
+			Category:        input.Category,
+			Merchant:        input.Merchant,
+			Description:     input.Description,
+			IncomeExpense:   input.IncomeExpense,
+			Amount:          input.Amount,
+			PayMethod:       input.PayMethod,
+			Status:          status,
+			Remark:          input.Remark,
+			ReviewLevel:     "", // 手动账单不需要复核
+			CreatedAt:       time.Now(),
+			UpdatedAt:       time.Now(),
+			SourceFile:      "manual_input",
+			UploadBatch:     time.Now().Format("20060102_150405"),
+		}
+
+		bills = append(bills, bill)
+	}
+
+	// 保存账单（带去重）
+	saved, duplicates, err := repo.SaveCleanedBills(bills)
+	if err != nil {
+		c.JSON(http.StatusInternalServerError, CreateManualBillsResponse{
+			Result:  false,
+			Message: "保存失败: " + err.Error(),
+		})
+		return
+	}
+
+	failed := len(bills) - saved - duplicates
+
+	c.JSON(http.StatusOK, CreateManualBillsResponse{
+		Result:  true,
+		Message: "创建成功",
+		Data: &CreateManualBillsData{
+			Success:    saved,
+			Failed:     failed,
+			Duplicates: duplicates,
+		},
+	})
+}

server/router/router.go

@@ -50,6 +50,9 @@ func setupAPIRoutes(r *gin.Engine) {
 		// 账单查询
 		api.GET("/bills", handler.ListBills)
 		
+		// 手动创建账单
+		api.POST("/bills/manual", handler.CreateManualBills)
+		
 		// 月度统计（全部数据）
 		api.GET("/monthly-stats", handler.MonthlyStats)
 	}

web/src/lib/api.ts

@@ -273,5 +273,48 @@ export async function fetchBills(params: FetchBillsParams = {}): Promise<BillsRe
   return response.json();
 }
 
+// 手动输入账单数据
+export interface ManualBillInput {
+  time: string;
+  category: string;
+  merchant: string;
+  description?: string;
+  income_expense: string;
+  amount: number;
+  pay_method?: string;
+  status?: string;
+  remark?: string;
+}
 
+// 批量创建手动账单请求
+export interface CreateManualBillsRequest {
+  bills: ManualBillInput[];
+}
 
+// 批量创建手动账单响应
+export interface CreateManualBillsResponse {
+  result: boolean;
+  message?: string;
+  data?: {
+    success: number;
+    failed: number;
+    duplicates: number;
+  };
+}
+
+// 批量创建手动账单
+export async function createManualBills(bills: ManualBillInput[]): Promise<CreateManualBillsResponse> {
+  const response = await fetch(`${API_BASE}/api/bills/manual`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ bills }),
+  });
+  
+  if (!response.ok) {
+    throw new Error(`HTTP ${response.status}`);
+  }
+  
+  return response.json();
+}

web/src/lib/components/bills/ManualBillInput.svelte

@@ -0,0 +1,459 @@
+<script lang="ts">
+  import * as Card from '$lib/components/ui/card';
+  import * as Dialog from '$lib/components/ui/dialog';
+  import * as Select from '$lib/components/ui/select';
+  import { Button } from '$lib/components/ui/button';
+  import { Input } from '$lib/components/ui/input';
+  import { Label } from '$lib/components/ui/label';
+  import { Badge } from '$lib/components/ui/badge';
+  import * as Table from '$lib/components/ui/table';
+  import { createManualBills, type ManualBillInput } from '$lib/api';
+  import Plus from '@lucide/svelte/icons/plus';
+  import Trash2 from '@lucide/svelte/icons/trash-2';
+  import Send from '@lucide/svelte/icons/send';
+  import Loader2 from '@lucide/svelte/icons/loader-2';
+  import CheckCircle from '@lucide/svelte/icons/check-circle';
+  import AlertCircle from '@lucide/svelte/icons/alert-circle';
+  import Clock from '@lucide/svelte/icons/clock';
+
+  interface Props {
+    categories: string[];
+    onSuccess?: () => void;
+  }
+
+  let { categories, onSuccess }: Props = $props();
+
+  // 获取当前日期时间（格式化为 YYYY-MM-DDTHH:mm）
+  function getCurrentDateTimeLocal(): string {
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = String(now.getMonth() + 1).padStart(2, '0');
+    const day = String(now.getDate()).padStart(2, '0');
+    const hours = String(now.getHours()).padStart(2, '0');
+    const minutes = String(now.getMinutes()).padStart(2, '0');
+    return `${year}-${month}-${day}T${hours}:${minutes}`;
+  }
+
+  // 将 datetime-local 格式转换为标准格式 YYYY-MM-DD HH:mm:ss
+  function convertDateTimeLocal(dateTimeLocal: string): string {
+    if (!dateTimeLocal) return '';
+    const [date, time] = dateTimeLocal.split('T');
+    return `${date} ${time}:00`;
+  }
+
+  // 表单状态
+  let formData = $state({
+    time: '',
+    timeLocal: getCurrentDateTimeLocal(), // 用于时间选择器的格式
+    category: '',
+    merchant: '',
+    description: '',
+    income_expense: '支出',
+    amount: '',
+    pay_method: '',
+    status: '交易成功',
+    remark: '',
+  });
+
+  // 待提交的账单列表
+  let pendingBills = $state<ManualBillInput[]>([]);
+
+  // 提交状态
+  let isSubmitting = $state(false);
+  let submitResult = $state<{ success: number; failed: number; duplicates: number } | null>(null);
+  let submitError = $state('');
+  let showResult = $state(false);
+
+  // Select 变化处理
+  function handleCategoryChange(value: string | undefined) {
+    if (value !== undefined) {
+      formData.category = value;
+    }
+  }
+
+  function handleIncomeExpenseChange(value: string | undefined) {
+    if (value !== undefined) {
+      formData.income_expense = value;
+    }
+  }
+
+  // 获取当前日期时间（格式化为 YYYY-MM-DD HH:mm:ss）
+  function getCurrentDateTime(): string {
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = String(now.getMonth() + 1).padStart(2, '0');
+    const day = String(now.getDate()).padStart(2, '0');
+    const hours = String(now.getHours()).padStart(2, '0');
+    const minutes = String(now.getMinutes()).padStart(2, '0');
+    const seconds = String(now.getSeconds()).padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  }
+
+  // 设置当前时间
+  function setCurrentTime() {
+    formData.timeLocal = getCurrentDateTimeLocal();
+    formData.time = convertDateTimeLocal(formData.timeLocal);
+  }
+
+  // 监听时间选择器变化
+  $effect(() => {
+    if (formData.timeLocal) {
+      formData.time = convertDateTimeLocal(formData.timeLocal);
+    }
+  });
+
+  // 验证表单
+  function validateForm(): string | null {
+    if (!formData.time) return '请输入交易时间';
+    if (!formData.category) return '请选择分类';
+    if (!formData.income_expense) return '请选择收支类型';
+    if (!formData.amount || parseFloat(formData.amount) <= 0) return '请输入有效金额';
+    return null;
+  }
+
+  // 添加到待提交列表
+  function addBill() {
+    const error = validateForm();
+    if (error) {
+      alert(error);
+      return;
+    }
+
+    const bill: ManualBillInput = {
+      time: formData.time,
+      category: formData.category,
+      merchant: formData.merchant,
+      description: formData.description || undefined,
+      income_expense: formData.income_expense,
+      amount: parseFloat(formData.amount),
+      pay_method: formData.pay_method || undefined,
+      status: formData.status || undefined,
+      remark: formData.remark || undefined,
+    };
+
+    pendingBills = [...pendingBills, bill];
+
+    // 清空表单（保留分类和收支类型）
+    const savedCategory = formData.category;
+    const savedIncomeExpense = formData.income_expense;
+    formData = {
+      time: '',
+      timeLocal: getCurrentDateTimeLocal(),
+      category: savedCategory,
+      merchant: '',
+      description: '',
+      income_expense: savedIncomeExpense,
+      amount: '',
+      pay_method: '',
+      status: '交易成功',
+      remark: '',
+    };
+  }
+
+  // 删除待提交的账单
+  function removeBill(index: number) {
+    pendingBills = pendingBills.filter((_, i) => i !== index);
+  }
+
+  // 提交所有账单
+  async function submitAllBills() {
+    if (pendingBills.length === 0) {
+      alert('请至少添加一条账单');
+      return;
+    }
+
+    isSubmitting = true;
+    submitError = '';
+    submitResult = null;
+
+    try {
+      const response = await createManualBills(pendingBills);
+      if (response.result && response.data) {
+        submitResult = response.data;
+        showResult = true;
+        
+        // 清空待提交列表
+        pendingBills = [];
+        
+        // 调用成功回调
+        if (onSuccess) {
+          onSuccess();
+        }
+      } else {
+        submitError = response.message || '提交失败';
+      }
+    } catch (err) {
+      submitError = err instanceof Error ? err.message : '提交失败';
+    } finally {
+      isSubmitting = false;
+    }
+  }
+
+  // 清空所有
+  function clearAll() {
+    if (confirm('确定要清空所有待提交的账单吗？')) {
+      pendingBills = [];
+    }
+  }
+</script>
+
+<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+  <!-- 左侧：输入表单 -->
+  <Card.Root class="lg:col-span-2">
+    <Card.Header>
+      <Card.Title class="flex items-center gap-2">
+        <Plus class="h-5 w-5" />
+        手动添加账单
+      </Card.Title>
+      <Card.Description>填写账单信息，可以连续添加多条</Card.Description>
+    </Card.Header>
+    <Card.Content>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <!-- 交易时间 -->
+        <div class="space-y-2 sm:col-span-2">
+          <Label for="time">交易时间 *</Label>
+          <div class="flex gap-2">
+            <input
+              id="time"
+              type="datetime-local"
+              bind:value={formData.timeLocal}
+              class="flex-1 h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            />
+            <Button variant="outline" size="icon" onclick={setCurrentTime} title="设置为当前时间">
+              <Clock class="h-4 w-4" />
+            </Button>
+          </div>
+          <p class="text-xs text-muted-foreground">已选择：{formData.time || '未选择'}</p>
+        </div>
+
+        <!-- 分类 -->
+        <div class="space-y-2">
+          <Label for="category">分类 *</Label>
+          <Select.Root type="single" value={formData.category} onValueChange={handleCategoryChange}>
+            <Select.Trigger class="w-full">
+              <span>{formData.category || '请选择分类'}</span>
+            </Select.Trigger>
+            <Select.Portal>
+              <Select.Content>
+                {#each categories as cat}
+                  <Select.Item value={cat}>{cat}</Select.Item>
+                {/each}
+              </Select.Content>
+            </Select.Portal>
+          </Select.Root>
+        </div>
+
+        <!-- 收支类型 -->
+        <div class="space-y-2">
+          <Label for="income_expense">收/支 *</Label>
+          <Select.Root type="single" value={formData.income_expense} onValueChange={handleIncomeExpenseChange}>
+            <Select.Trigger class="w-full">
+              <span>{formData.income_expense}</span>
+            </Select.Trigger>
+            <Select.Portal>
+              <Select.Content>
+                <Select.Item value="支出">支出</Select.Item>
+                <Select.Item value="收入">收入</Select.Item>
+              </Select.Content>
+            </Select.Portal>
+          </Select.Root>
+        </div>
+
+        <!-- 交易对方 -->
+        <div class="space-y-2">
+          <Label for="merchant">交易对方</Label>
+          <Input
+            id="merchant"
+            type="text"
+            placeholder="商家名称（可选）"
+            bind:value={formData.merchant}
+          />
+        </div>
+
+        <!-- 金额 -->
+        <div class="space-y-2">
+          <Label for="amount">金额 *</Label>
+          <Input
+            id="amount"
+            type="number"
+            step="0.01"
+            placeholder="0.00"
+            bind:value={formData.amount}
+          />
+        </div>
+
+        <!-- 商品说明 -->
+        <div class="space-y-2 sm:col-span-2">
+          <Label for="description">商品说明</Label>
+          <Input
+            id="description"
+            type="text"
+            placeholder="购买的商品或服务"
+            bind:value={formData.description}
+          />
+        </div>
+
+        <!-- 支付方式 -->
+        <div class="space-y-2">
+          <Label for="pay_method">支付方式</Label>
+          <Input
+            id="pay_method"
+            type="text"
+            placeholder="现金/银行卡/支付宝等"
+            bind:value={formData.pay_method}
+          />
+        </div>
+
+        <!-- 交易状态 -->
+        <div class="space-y-2">
+          <Label for="status">交易状态</Label>
+          <Input
+            id="status"
+            type="text"
+            placeholder="交易成功"
+            bind:value={formData.status}
+          />
+        </div>
+
+        <!-- 备注 -->
+        <div class="space-y-2 sm:col-span-2">
+          <Label for="remark">备注</Label>
+          <Input
+            id="remark"
+            type="text"
+            placeholder="其他说明"
+            bind:value={formData.remark}
+          />
+        </div>
+      </div>
+    </Card.Content>
+    <Card.Footer>
+      <Button class="w-full" onclick={addBill}>
+        <Plus class="mr-2 h-4 w-4" />
+        添加到列表
+      </Button>
+    </Card.Footer>
+  </Card.Root>
+
+  <!-- 右侧：待提交列表 -->
+  <Card.Root class="lg:col-span-1">
+    <Card.Header>
+      <div class="flex items-center justify-between">
+        <div>
+          <Card.Title>待提交列表</Card.Title>
+          <Card.Description>
+            {pendingBills.length} 条账单
+          </Card.Description>
+        </div>
+        {#if pendingBills.length > 0}
+          <Button variant="ghost" size="sm" onclick={clearAll}>
+            清空
+          </Button>
+        {/if}
+      </div>
+    </Card.Header>
+    <Card.Content>
+      {#if pendingBills.length === 0}
+        <div class="flex flex-col items-center justify-center py-8 text-center text-muted-foreground">
+          <Plus class="h-12 w-12 mb-2 opacity-30" />
+          <p class="text-sm">暂无账单</p>
+        </div>
+      {:else}
+        <div class="space-y-2 max-h-[500px] overflow-y-auto">
+          {#each pendingBills as bill, index}
+            <div class="border rounded-lg p-3 space-y-1">
+              <div class="flex items-start justify-between gap-2">
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-center gap-2 mb-1">
+                    <Badge variant="outline" class="text-xs">
+                      {bill.category}
+                    </Badge>
+                    <Badge 
+                      variant={bill.income_expense === '支出' ? 'destructive' : 'default'}
+                      class="text-xs"
+                    >
+                      {bill.income_expense}
+                    </Badge>
+                  </div>
+                  <p class="font-medium truncate">{bill.merchant}</p>
+                  {#if bill.description}
+                    <p class="text-xs text-muted-foreground truncate">{bill.description}</p>
+                  {/if}
+                  <div class="flex items-center justify-between mt-1">
+                    <p class="text-sm text-muted-foreground">{bill.time}</p>
+                    <p class="font-mono font-semibold">¥{bill.amount.toFixed(2)}</p>
+                  </div>
+                </div>
+                <Button 
+                  variant="ghost" 
+                  size="icon"
+                  class="h-8 w-8"
+                  onclick={() => removeBill(index)}
+                >
+                  <Trash2 class="h-4 w-4 text-destructive" />
+                </Button>
+              </div>
+            </div>
+          {/each}
+        </div>
+      {/if}
+
+      {#if submitError}
+        <div class="mt-4 flex items-center gap-2 rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
+          <AlertCircle class="h-4 w-4 flex-shrink-0" />
+          {submitError}
+        </div>
+      {/if}
+    </Card.Content>
+    <Card.Footer>
+      <Button 
+        class="w-full" 
+        disabled={pendingBills.length === 0 || isSubmitting}
+        onclick={submitAllBills}
+      >
+        {#if isSubmitting}
+          <Loader2 class="mr-2 h-4 w-4 animate-spin" />
+          提交中...
+        {:else}
+          <Send class="mr-2 h-4 w-4" />
+          提交全部 ({pendingBills.length})
+        {/if}
+      </Button>
+    </Card.Footer>
+  </Card.Root>
+</div>
+
+<!-- 提交结果对话框 -->
+<Dialog.Root bind:open={showResult}>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title class="flex items-center gap-2">
+        <CheckCircle class="h-5 w-5 text-green-500" />
+        提交完成
+      </Dialog.Title>
+    </Dialog.Header>
+    {#if submitResult}
+      <div class="space-y-3 py-4">
+        <div class="flex items-center justify-between p-3 rounded-lg bg-green-50 dark:bg-green-950">
+          <span class="text-sm">成功创建</span>
+          <span class="font-bold text-green-600 dark:text-green-400">{submitResult.success} 条</span>
+        </div>
+        {#if submitResult.duplicates > 0}
+          <div class="flex items-center justify-between p-3 rounded-lg bg-yellow-50 dark:bg-yellow-950">
+            <span class="text-sm">重复跳过</span>
+            <span class="font-bold text-yellow-600 dark:text-yellow-400">{submitResult.duplicates} 条</span>
+          </div>
+        {/if}
+        {#if submitResult.failed > 0}
+          <div class="flex items-center justify-between p-3 rounded-lg bg-red-50 dark:bg-red-950">
+            <span class="text-sm">失败</span>
+            <span class="font-bold text-red-600 dark:text-red-400">{submitResult.failed} 条</span>
+          </div>
+        {/if}
+      </div>
+    {/if}
+    <Dialog.Footer>
+      <Button onclick={() => showResult = false}>确定</Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>

web/src/routes/+page.svelte

@@ -13,6 +13,8 @@
   import TrendingDown from '@lucide/svelte/icons/trending-down';
   import Loader2 from '@lucide/svelte/icons/loader-2';
   import AlertCircle from '@lucide/svelte/icons/alert-circle';
+  import Plus from '@lucide/svelte/icons/plus';
+  import { goto } from '$app/navigation';
   
   let isDragOver = $state(false);
   let selectedFile: File | null = $state(null);
@@ -169,9 +171,15 @@
   <div class="grid gap-6 lg:grid-cols-2">
     <!-- 上传区域 -->
     <Card.Root>
-      <Card.Header>
+      <Card.Header class="flex flex-row items-center justify-between space-y-0">
+        <div>
           <Card.Title>上传账单</Card.Title>
           <Card.Description>支持支付宝、微信账单 CSV 文件</Card.Description>
+        </div>
+        <Button variant="outline" size="sm" onclick={() => goto('/bills?tab=manual')}>
+          <Plus class="mr-2 h-4 w-4" />
+          手动添加
+        </Button>
       </Card.Header>
       <Card.Content class="space-y-4">
         <!-- 拖拽上传区域 -->

web/src/routes/bills/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { page } from '$app/stores';
   import { fetchBills, type CleanedBill } from '$lib/api';
   import * as Card from '$lib/components/ui/card';
   import { Button } from '$lib/components/ui/button';
@@ -7,7 +8,10 @@
   import { Input } from '$lib/components/ui/input';
   import { Label } from '$lib/components/ui/label';
   import * as Table from '$lib/components/ui/table';
+  import * as Select from '$lib/components/ui/select';
+  import { Separator } from '$lib/components/ui/separator';
   import { DateRangePicker } from '$lib/components/ui/date-range-picker';
+  import ManualBillInput from '$lib/components/bills/ManualBillInput.svelte';
   import { formatLocalDate } from '$lib/utils';
   import Loader2 from '@lucide/svelte/icons/loader-2';
   import AlertCircle from '@lucide/svelte/icons/alert-circle';
@@ -20,11 +24,22 @@
   import ChevronLeft from '@lucide/svelte/icons/chevron-left';
   import ChevronRight from '@lucide/svelte/icons/chevron-right';
   import RefreshCw from '@lucide/svelte/icons/refresh-cw';
+  import Plus from '@lucide/svelte/icons/plus';
+  import List from '@lucide/svelte/icons/list';
   
   // 状态
   let isLoading = $state(false);
   let errorMessage = $state('');
   let records: CleanedBill[] = $state([]);
+  let activeTab = $state<'list' | 'manual'>('list'); // 'list' 或 'manual'
+  
+  // 初始化标签页（从URL查询参数）
+  onMount(() => {
+    const tabParam = $page.url.searchParams.get('tab');
+    if (tabParam === 'manual') {
+      activeTab = 'manual';
+    }
+  });
   
   // 分页
   let currentPage = $state(1);
@@ -56,6 +71,22 @@
   let endDate = $state(defaultDates.endDate);
   let searchText = $state('');
   
+  // Select 变化处理
+  function handleCategoryChange(value: string | undefined) {
+    filterCategory = value || '';
+    applyFilters();
+  }
+  
+  function handleIncomeExpenseChange(value: string | undefined) {
+    filterIncomeExpense = value || '';
+    applyFilters();
+  }
+  
+  function handleBillTypeChange(value: string | undefined) {
+    filterBillType = value || '';
+    applyFilters();
+  }
+  
   // 分类列表（硬编码常用分类）
   const categories = [
     '餐饮美食', '交通出行', '生活服务', '日用百货', 
@@ -137,6 +168,16 @@
   onMount(() => {
     loadBills();
   });
+  
+  // 手动账单提交成功回调
+  function handleManualBillSuccess() {
+    // 切换回列表标签页
+    activeTab = 'list';
+    // 重置分页到第一页
+    currentPage = 1;
+    // 重新加载账单列表（保持当前日期筛选）
+    loadBills();
+  }
 </script>
 
 <svelte:head>
@@ -144,18 +185,45 @@
 </svelte:head>
 
 <div class="space-y-6">
-  <!-- 页面标题 -->
+  <!-- 页面标题和标签切换 -->
   <div class="flex items-center justify-between">
     <div>
-      <h1 class="text-2xl font-bold tracking-tight">账单列表</h1>
+      <h1 class="text-2xl font-bold tracking-tight">账单管理</h1>
-      <p class="text-muted-foreground">查看和筛选已处理的账单记录</p>
+      <p class="text-muted-foreground">查看、筛选和手动添加账单记录</p>
     </div>
+    <div class="flex items-center gap-2">
+      {#if activeTab === 'list'}
         <Button variant="outline" onclick={loadBills} disabled={isLoading}>
           <RefreshCw class="mr-2 h-4 w-4 {isLoading ? 'animate-spin' : ''}" />
           刷新
         </Button>
+      {/if}
+    </div>
   </div>
 
+  <!-- 标签切换 -->
+  <div class="flex gap-1">
+    <Button 
+      variant={activeTab === 'list' ? 'default' : 'ghost'}
+      onclick={() => activeTab = 'list'}
+    >
+      <List class="mr-2 h-4 w-4" />
+      账单列表
+    </Button>
+    <Button 
+      variant={activeTab === 'manual' ? 'default' : 'ghost'}
+      onclick={() => activeTab = 'manual'}
+    >
+      <Plus class="mr-2 h-4 w-4" />
+      手动添加
+    </Button>
+  </div>
+  
+  <Separator />
+
+  <!-- 账单列表视图 -->
+  {#if activeTab === 'list'}
+    <div class="space-y-6">
       <!-- 错误提示 -->
       {#if errorMessage}
         <div class="flex items-center gap-2 rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
@@ -232,40 +300,50 @@
           </div>
           <div class="space-y-1.5">
             <Label class="text-xs">分类</Label>
-            <select 
+            <Select.Root type="single" value={filterCategory || undefined} onValueChange={handleCategoryChange}>
-              class="h-9 w-full rounded-md border border-input bg-background px-3 text-sm"
+              <Select.Trigger class="h-9 w-full">
-              bind:value={filterCategory}
+                <span class="text-sm">{filterCategory || '全部'}</span>
-              onchange={applyFilters}
+              </Select.Trigger>
-            >
+              <Select.Portal>
-              <option value="">全部</option>
+                <Select.Content>
+                  <Select.Item value="">全部</Select.Item>
                   {#each categories as cat}
-                <option value={cat}>{cat}</option>
+                    <Select.Item value={cat}>{cat}</Select.Item>
                   {/each}
-            </select>
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
           </div>
           <div class="space-y-1.5">
             <Label class="text-xs">收/支</Label>
-            <select 
+            <Select.Root type="single" value={filterIncomeExpense || undefined} onValueChange={handleIncomeExpenseChange}>
-              class="h-9 w-full rounded-md border border-input bg-background px-3 text-sm"
+              <Select.Trigger class="h-9 w-full">
-              bind:value={filterIncomeExpense}
+                <span class="text-sm">{filterIncomeExpense || '全部'}</span>
-              onchange={applyFilters}
+              </Select.Trigger>
-            >
+              <Select.Portal>
-              <option value="">全部</option>
+                <Select.Content>
-              <option value="支出">支出</option>
+                  <Select.Item value="">全部</Select.Item>
-              <option value="收入">收入</option>
+                  <Select.Item value="支出">支出</Select.Item>
-            </select>
+                  <Select.Item value="收入">收入</Select.Item>
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
           </div>
           <div class="space-y-1.5">
             <Label class="text-xs">来源</Label>
-            <select 
+            <Select.Root type="single" value={filterBillType || undefined} onValueChange={handleBillTypeChange}>
-              class="h-9 w-full rounded-md border border-input bg-background px-3 text-sm"
+              <Select.Trigger class="h-9 w-full">
-              bind:value={filterBillType}
+                <span class="text-sm">{filterBillType === 'alipay' ? '支付宝' : filterBillType === 'wechat' ? '微信' : filterBillType === 'manual' ? '手动' : '全部'}</span>
-              onchange={applyFilters}
+              </Select.Trigger>
-            >
+              <Select.Portal>
-              <option value="">全部</option>
+                <Select.Content>
-              <option value="alipay">支付宝</option>
+                  <Select.Item value="">全部</Select.Item>
-              <option value="wechat">微信</option>
+                  <Select.Item value="alipay">支付宝</Select.Item>
-            </select>
+                  <Select.Item value="wechat">微信</Select.Item>
+                  <Select.Item value="manual">手动</Select.Item>
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
           </div>
           <div class="space-y-1.5 col-span-2 sm:col-span-1">
             <Label class="text-xs">搜索</Label>
@@ -310,8 +388,8 @@
                     {record.time}
                   </Table.Cell>
                   <Table.Cell class="hidden xl:table-cell">
-                    <Badge variant={record.bill_type === 'alipay' ? 'default' : 'secondary'}>
+                    <Badge variant={record.bill_type === 'manual' ? 'outline' : (record.bill_type === 'alipay' ? 'default' : 'secondary')}>
-                      {record.bill_type === 'alipay' ? '支付宝' : '微信'}
+                      {record.bill_type === 'manual' ? '手动输入' : (record.bill_type === 'alipay' ? '支付宝' : '微信')}
                     </Badge>
                   </Table.Cell>
                   <Table.Cell>
@@ -401,3 +479,10 @@
     </Card.Content>
   </Card.Root>
     </div>
+  {/if}
+
+  <!-- 手动添加视图 -->
+  {#if activeTab === 'manual'}
+    <ManualBillInput {categories} onSuccess={handleManualBillSuccess} />
+  {/if}
+</div>