# 单据查询系统 - Supabase 配置指南

## 1. Supabase 数据库设置

### 1.1 创建数据表

在您的 Supabase 项目中执行以下 SQL 语句创建 `tickets` 表：

```sql
-- 创建单据表
CREATE TABLE tickets (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    ticket_number VARCHAR(50) NOT NULL UNIQUE, -- 编号
    customer_name VARCHAR(100),                   -- 姓名
    reason TEXT,                                  -- 事由
    result TEXT,                                  -- 处理结果
    amount DECIMAL(10, 2) DEFAULT 0,              -- 金额
    issuer VARCHAR(100),                          -- 开具人
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), -- 日期
    processed BOOLEAN DEFAULT FALSE,              -- 处理状态
    -- 兼容原字段，保留以便现有代码不报错
    ticket_type VARCHAR(20) DEFAULT 'other',
    status VARCHAR(20) DEFAULT 'pending',
    contact_phone VARCHAR(20),
    email VARCHAR(100),
    remarks TEXT,
    completed_at TIMESTAMP WITH TIME ZONE,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 创建索引以提高查询性能
CREATE INDEX idx_ticket_number ON tickets(ticket_number);
CREATE INDEX idx_ticket_type ON tickets(ticket_type);
CREATE INDEX idx_status ON tickets(status);
CREATE INDEX idx_created_at ON tickets(created_at);

-- 创建自动更新时间戳的触发器
CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
    NEW.updated_at = NOW();
    RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE TRIGGER update_tickets_updated_at
    BEFORE UPDATE ON tickets
    FOR EACH ROW
    EXECUTE FUNCTION update_updated_at_column();
```

### 1.2 设置行级安全策略（RLS）

```sql
-- 启用行级安全
ALTER TABLE tickets ENABLE ROW LEVEL SECURITY;

-- 允许所有人读取（根据需要调整）
CREATE POLICY "Allow public read access" ON tickets
    FOR SELECT USING (true);

-- 允许认证用户插入和更新
CREATE POLICY "Allow authenticated insert" ON tickets
    FOR INSERT TO authenticated WITH CHECK (true);

CREATE POLICY "Allow authenticated update" ON tickets
    FOR UPDATE TO authenticated WITH CHECK (true);
```

## 2. 获取 Supabase 凭证

1. 登录 [Supabase](https://supabase.com)
2. 选择您的项目
3. 进入 **Settings** > **API**
4. 复制以下内容：
   - **Project URL** (替换代码中的 `YOUR_SUPABASE_URL`)
   - **anon/public key** (替换代码中的 `YOUR_SUPABASE_ANON_KEY`)

## 3. 配置前端代码

打开 `index.html` 和 `detail.html`，找到以下代码：

```javascript
const SUPABASE_URL = 'YOUR_SUPABASE_URL';
const SUPABASE_ANON_KEY = 'YOUR_SUPABASE_ANON_KEY';
```

替换为您从 Supabase 获取的实际值。

## 4. Vercel 部署

### 4.1 安装 Vercel CLI（可选）

```bash
npm install -g vercel
```

### 4.2 部署步骤

1. **使用 Vercel Dashboard 部署**：
   - 访问 [vercel.com](https://vercel.com)
   - 导入您的 Git 仓库
   - Vercel 会自动检测 HTML 文件并部署

2. **使用 CLI 部署**：
   ```bash
   cd ticket
   vercel
   ```

### 4.3 环境变量（推荐）

为安全起见，建议使用环境变量：

1. 在 Vercel 项目设置中添加环境变量：
   - `NEXT_PUBLIC_SUPABASE_URL`
   - `NEXT_PUBLIC_SUPABASE_ANON_KEY`

2. 修改代码使用环境变量：
```javascript
const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL || 'YOUR_SUPABASE_URL';
const SUPABASE_ANON_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || 'YOUR_SUPABASE_ANON_KEY';
```

## 5. 测试数据

您可以插入一些测试数据：

```sql
INSERT INTO tickets (ticket_number, ticket_type, amount, status, customer_name, contact_phone, email, remarks) VALUES
('TKT20260328001', 'invoice', 1500.00, 'completed', '张三', '13800138000', 'zhangsan@example.com', '办公用品采购'),
('TKT20260328002', 'receipt', 800.00, 'processing', '李四', '13900139000', 'lisi@example.com', '咨询服务费'),
('TKT20260328003', 'order', 2500.00, 'pending', '王五', '13700137000', 'wangwu@example.com', '设备租赁'),
('TKT20260328004', 'invoice', 3200.00, 'completed', '赵六', '13600136000', 'zhaoliu@example.com', '软件授权费'),
('TKT20260328005', 'other', 500.00, 'cancelled', '钱七', '13500135000', 'qianqi@example.com', '其他费用');
```

## 6. 功能说明

- ✅ 按单据编号模糊查询
- ✅ 按单据类型筛选
- ✅ 按日期范围查询
- ✅ 查看单据详情
- ✅ 打印单据功能
- ✅ 响应式设计，支持移动端

## 7. 注意事项

1. **安全性**：生产环境务必使用环境变量存储敏感信息
2. **权限控制**：根据实际需求调整 RLS 策略
3. **性能优化**：大数据量时考虑分页和更多索引
4. **错误处理**：已包含基本的错误提示机制

## 8. 自定义样式

如需修改样式，可以编辑 HTML 文件中的 `<style>` 部分，或创建独立的 CSS 文件。