Letters/ticket

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

1. Supabase 数据库设置

1.1 创建数据表

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

-- 创建单据表
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）

-- 启用行级安全
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
2. 选择您的项目
3. 进入 Settings > API
4. 复制以下内容：
   • Project URL (替换代码中的 YOUR_SUPABASE_URL)
   • anon/public key (替换代码中的 YOUR_SUPABASE_ANON_KEY)

3. 配置前端代码

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

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

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

4. Vercel 部署

4.1 安装 Vercel CLI（可选）

npm install -g vercel

4.2 部署步骤

1. 使用 Vercel Dashboard 部署：

   • 访问 vercel.com
   • 导入您的 Git 仓库
   • Vercel 会自动检测 HTML 文件并部署

2. 使用 CLI 部署：

   cd ticket
   vercel
   

4.3 环境变量（推荐）

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

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

   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY

2. 修改代码使用环境变量：

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. 测试数据

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

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 文件。