157 lines
4.8 KiB
Markdown
157 lines
4.8 KiB
Markdown
# 单据查询系统 - 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 文件。
|