This commit is contained in:
jeremygan2021
2026-03-20 15:55:02 +08:00
parent a770fbfd2a
commit 3bdb055b83
4 changed files with 1062 additions and 185 deletions

View File

@@ -1,159 +1,30 @@
name: Docker 构建与部署
name: 部署到服务器
on:
push:
branches: [main, master]
workflow_dispatch:
inputs:
arch:
description: '构建架构'
required: true
default: 'amd64'
type: choice
options:
- amd64
- arm64
- both
upload_only:
description: '仅上传已存在的tar文件'
required: false
default: 'false'
type: boolean
env:
IMAGE_NAME: checkin_sys
IMAGE_TAG: latest
CONTAINER_NAME: checkin_sys-container
LOCAL_PORT: 8800
CONTAINER_PORT: 8800
TARGET_DIR: /home/quant/data/dev/checkin
jobs:
build:
runs-on: ubuntu
if: github.event_name == 'push' || (github.event_name == 'workflow_dispatch' && !inputs.upload_only)
steps:
- name: 设置国内镜像源
run: |
git config --global url."https://ghproxy.com/".insteadOf "https://github.com/"
- name: 配置 Docker 镜像源
run: |
sudo mkdir -p /etc/docker
| sudo tee /etc/docker/daemon.json << 'EOF'
{
"registry-mirrors": [
"https://docker.mirrors.ustc.edu.cn",
"https://hub-mirror.c.163.com",
"https://mirror.baidubce.com"
]
}
EOF
sudo service docker restart || true
- name: 检出代码
uses: actions/checkout@v4
- name: 设置 Buildx
uses: docker/setup-buildx-action@v3
with:
driver-opts: |
image=moby/buildkit:buildx-stable-1
- name: 提取架构信息
id: arch
run: |
if [ "${{ github.event.inputs.arch }}" == "arm64" ]; then
echo "platform=linux/arm64" >> $GITHUB_OUTPUT
echo "arch_suffix=-arm64" >> $GITHUB_OUTPUT
elif [ "${{ github.event.inputs.arch }}" == "both" ]; then
echo "platforms=linux/amd64,linux/arm64" >> $GITHUB_OUTPUT
else
echo "platform=linux/amd64" >> $GITHUB_OUTPUT
echo "arch_suffix=-amd64" >> $GITHUB_OUTPUT
fi
- name: 构建 Docker 镜像
uses: docker/build-push-action@v5
with:
context: .
platforms: ${{ steps.arch.outputs.platforms || 'linux/amd64' }}
push: false
load: true
tags: ${{ env.IMAGE_NAME }}:${{ env.IMAGE_TAG }}
outputs: type=docker,dest=${{ env.IMAGE_NAME }}-${{ env.IMAGE_TAG }}${{ steps.arch.outputs.arch_suffix }}.tar
- name: 上传镜像 artifact
uses: actions/upload-artifact@v4
with:
name: docker-image-${{ steps.arch.outputs.arch_suffix || '-amd64' }}
path: ${{ env.IMAGE_NAME }}-${{ env.IMAGE_TAG }}${{ steps.arch.outputs.arch_suffix }}.tar
retention-days: 1
deploy:
runs-on: ubuntu-latest
needs: build
if: github.event_name == 'push' || github.event_name == 'workflow_dispatch'
steps:
- name: 设置国内镜像源
run: |
git config --global url."https://ghproxy.com/".insteadOf "https://github.com/"
- name: 配置 Docker 镜像源
run: |
sudo mkdir -p /etc/docker
| sudo tee /etc/docker/daemon.json << 'EOF'
{
"registry-mirrors": [
"https://docker.mirrors.ustc.edu.cn",
"https://hub-mirror.c.163.com",
"https://mirror.baidubce.com"
]
}
EOF
sudo service docker restart || true
- name: 检出代码
uses: actions/checkout@v4
- name: 下载镜像 artifact (AMD64)
if: github.event_name == 'push' || (github.event_name == 'workflow_dispatch' && (inputs.arch == 'amd64' || inputs.arch == 'both'))
uses: actions/download-artifact@v4
with:
name: docker-image--amd64
path: .
- name: 下载镜像 artifact (ARM64)
if: github.event_name == 'workflow_dispatch' && inputs.arch == 'both'
uses: actions/download-artifact@v4
with:
name: docker-image--arm64
path: .
- name: 安装 sshpass
run: |
sudo apt-get update
sudo apt-get install -y sshpass
- name: 上传到服务器
env:
SERVER_HOST: ${{ secrets.SERVER_HOST }}
SERVER_USER: ${{ secrets.SERVER_USER }}
SERVER_PASSWORD: ${{ secrets.SERVER_PASSWORD }}
SERVER_PORT: ${{ secrets.SERVER_PORT }}
TAR_FILE: ${{ env.IMAGE_NAME }}-${{ env.IMAGE_TAG }}-amd64.tar
run: |
sshpass -p "$SERVER_PASSWORD" scp -P "$SERVER_PORT" -o StrictHostKeyChecking=no "$TAR_FILE" "${SERVER_USER}@${SERVER_HOST}:/tmp/"
sshpass -p "$SERVER_PASSWORD" scp -P "$SERVER_PORT" -o StrictHostKeyChecking=no ".env" "${SERVER_USER}@${SERVER_HOST}:/tmp/"
- name: 在服务器上部署
env:
SERVER_HOST: ${{ secrets.SERVER_HOST }}
SERVER_USER: ${{ secrets.SERVER_USER }}
SERVER_PASSWORD: ${{ secrets.SERVER_PASSWORD }}
SERVER_PORT: ${{ secrets.SERVER_PORT }}
TAR_FILE: ${{ env.IMAGE_NAME }}-${{ env.IMAGE_TAG }}-amd64.tar
TARGET_DIR: ${{ env.TARGET_DIR }}
run: |
sshpass -p "$SERVER_PASSWORD" ssh -p "$SERVER_PORT" -o StrictHostKeyChecking=no "${SERVER_USER}@${SERVER_HOST}" << 'EOF'
set -e
@@ -162,62 +33,37 @@ EOF
echo "$SERVER_PASSWORD" | sudo -S -p '' "$@"
}
echo "[INFO] 开始服务器端部署..."
# 检查并停止现有容器
if run_sudo docker ps -a --format 'table {{.Names}}' | grep -q "^${CONTAINER_NAME}$"; then
echo "[INFO] 发现现有容器 ${CONTAINER_NAME},正在停止并删除..."
run_sudo docker stop ${CONTAINER_NAME} || true
run_sudo docker rm ${CONTAINER_NAME} || true
fi
# 检查并删除现有镜像
if run_sudo docker images --format 'table {{.Repository}}:{{.Tag}}' | grep -q "^${IMAGE_NAME}:${IMAGE_TAG}$"; then
echo "[INFO] 发现现有镜像 ${IMAGE_NAME}:${IMAGE_TAG},正在删除..."
run_sudo docker rmi ${IMAGE_NAME}:${IMAGE_TAG} || true
fi
# 加载新镜像
echo "[INFO] 加载新镜像..."
run_sudo docker load -i /tmp/${TAR_FILE}
# 验证镜像是否加载成功
if run_sudo docker images | grep -q "${IMAGE_NAME}"; then
echo "[SUCCESS] 镜像加载成功"
else
echo "[ERROR] 镜像加载失败"
echo "===== 切换到目标目录: $TARGET_DIR ====="
cd $TARGET_DIR || {
echo "错误:目录 $TARGET_DIR 不存在!"
exit 1
}
echo -e "\n===== 停止并清理 Docker ====="
run_sudo docker compose down || true
echo -e "\n===== 拉取 Git 代码 ====="
if ! git pull; then
echo "警告Git pull 失败,尝试强制同步远程代码..."
git fetch --all
CURRENT_BRANCH=$(git rev-parse --abbrev-ref HEAD)
git reset --hard origin/$CURRENT_BRANCH
git pull
fi
# 启动新容器
echo "[INFO] 启动新容器..."
run_sudo docker run -d --network host --name ${CONTAINER_NAME} \
--env-file /tmp/.env \
-e DB_HOST=localhost \
-e DB_PORT=5432 \
${IMAGE_NAME}:${IMAGE_TAG}
echo -e "\n===== 配置环境变量 ====="
cat > backend/.env <<'ENVEOF'
ALIYUN_ACCESS_KEY_ID=LTAI5tE62GW8MKyoEaotzxXk
ALIYUN_ACCESS_KEY_SECRET=Zdzqo1fgj57DxxioXOotNKhJdSfVQW
ALIYUN_OSS_ENDPOINT=https://oss-cn-shanghai.aliyuncs.com
ALIYUN_OSS_BUCKET_NAME=tangledup-ai-staging
ALIYUN_OSS_INTERNAL_ENDPOINT=https://oss-cn-shanghai-internal.aliyuncs.com
ALIYUN_TINGWU_APP_KEY=6eOX7N3tKE0fDwb
DASHSCOPE_API_KEY=sk-84e9eef24a274f568d4fa15c97556c9f
ENVEOF
# 验证容器是否启动成功
if run_sudo docker ps | grep -q "${CONTAINER_NAME}"; then
echo "[SUCCESS] 容器启动成功"
echo "[INFO] 容器状态:"
run_sudo docker ps | grep "${CONTAINER_NAME}"
else
echo "[ERROR] 容器启动失败"
echo "[INFO] 查看容器日志:"
run_sudo docker logs ${CONTAINER_NAME}
exit 1
fi
echo -e "\n===== 启动 Docker 容器 ====="
run_sudo docker compose up -d --build
# 清理临时文件
echo "[INFO] 清理临时文件..."
rm -f /tmp/${TAR_FILE}
rm -f /tmp/.env
echo "[SUCCESS] 部署完成!"
echo "[INFO] 应用访问地址: http://${SERVER_HOST}:${LOCAL_PORT}"
echo -e "\n===== 操作完成!====="
EOF
- name: 清理本地临时文件
run: |
rm -f ${{ env.IMAGE_NAME }}-${{ env.IMAGE_TAG }}-*.tar

Binary file not shown.

235
main.py
View File

@@ -1661,6 +1661,241 @@ async def success_page(request: Request):
CONFIG = load_config()
return templates.TemplateResponse("success.html", {"request": request, "config": CONFIG})
@app.get("/data-base", response_class=HTMLResponse)
async def data_base_page(request: Request):
"""
渲染数据库管理页面。
"""
return templates.TemplateResponse("data_base.html", {"request": request})
@app.get("/api/db/tables")
def get_db_tables():
"""
获取数据库中所有的表。
"""
try:
conn = get_db_connection()
cur = conn.cursor(cursor_factory=RealDictCursor)
cur.execute("""
SELECT table_name
FROM information_schema.tables
WHERE table_schema = 'public'
AND table_type = 'BASE TABLE'
ORDER BY table_name
""")
rows = cur.fetchall()
tables = [row['table_name'] for row in rows]
cur.close()
release_db_connection(conn)
return {"success": True, "tables": tables}
except Exception as e:
return JSONResponse(content={"success": False, "message": str(e)}, status_code=500)
@app.get("/api/db/table/{table_name}")
def get_table_data(table_name: str, page: int = 1, page_size: int = 50):
"""
获取指定表的数据。
"""
try:
conn = get_db_connection()
cur = conn.cursor(cursor_factory=RealDictCursor)
# 获取主键
cur.execute("""
SELECT a.attname AS column_name
FROM pg_index i
JOIN pg_attribute a ON a.attrelid = i.indrelid AND a.attnum = ANY(i.indkey)
WHERE i.indrelid = %s::regclass
AND i.indisprimary
""", (table_name,))
pk_result = cur.fetchone()
primary_key = pk_result['column_name'] if pk_result else ''
# 获取总行数
cur.execute(f'SELECT COUNT(*) as count FROM "{table_name}"')
total = cur.fetchone()['count']
# 分页查询
offset = (page - 1) * page_size
query = f'SELECT * FROM "{table_name}" ORDER BY "{primary_key}" LIMIT %s OFFSET %s'
cur.execute(query, (page_size, offset))
rows = cur.fetchall()
# 转换为普通字典
result_rows = []
for row in rows:
result_rows.append(dict(row))
# 获取列名
columns = list(result_rows[0].keys()) if result_rows else []
cur.close()
release_db_connection(conn)
return {
"success": True,
"rows": result_rows,
"columns": columns,
"total": total,
"primary_key": primary_key,
"page": page,
"page_size": page_size
}
except Exception as e:
return JSONResponse(content={"success": False, "message": str(e)}, status_code=500)
@app.get("/api/db/table/{table_name}/columns")
def get_table_columns(table_name: str):
"""
获取指定表的列信息。
"""
try:
conn = get_db_connection()
cur = conn.cursor(cursor_factory=RealDictCursor)
cur.execute("""
SELECT
column_name,
data_type,
is_nullable,
column_default
FROM information_schema.columns
WHERE table_name = %s
AND table_schema = 'public'
ORDER BY ordinal_position
""", (table_name,))
rows = cur.fetchall()
cur.close()
release_db_connection(conn)
return {"success": True, "columns": rows}
except Exception as e:
return JSONResponse(content={"success": False, "message": str(e)}, status_code=500)
@app.post("/api/db/table/{table_name}/insert")
async def insert_table_data(table_name: str, request: Request):
"""
向指定表插入数据。
"""
try:
body = await request.json()
data = body.get('data', {})
if not data:
return JSONResponse(content={"success": False, "message": "没有数据"}, status_code=400)
conn = get_db_connection()
cur = conn.cursor()
columns = list(data.keys())
values = list(data.values())
placeholders = ','.join(['%s'] * len(columns))
column_names = ','.join([f'"{col}"' for col in columns])
query = f'INSERT INTO "{table_name}" ({column_names}) VALUES ({placeholders})'
cur.execute(query, values)
conn.commit()
cur.close()
release_db_connection(conn)
return {"success": True, "message": "添加成功"}
except Exception as e:
return JSONResponse(content={"success": False, "message": str(e)}, status_code=500)
@app.put("/api/db/table/{table_name}/update")
async def update_table_data(table_name: str, request: Request):
"""
更新指定表的数据。
"""
try:
body = await request.json()
data = body.get('data', {})
record_id = body.get('id')
if not data or not record_id:
return JSONResponse(content={"success": False, "message": "缺少参数"}, status_code=400)
conn = get_db_connection()
cur = conn.cursor(cursor_factory=RealDictCursor)
# 获取主键
cur.execute("""
SELECT a.attname AS column_name
FROM pg_index i
JOIN pg_attribute a ON a.attrelid = i.indrelid AND a.attnum = ANY(i.indkey)
WHERE i.indrelid = %s::regclass
AND i.indisprimary
""", (table_name,))
pk_result = cur.fetchone()
primary_key = pk_result['column_name'] if pk_result else None
if not primary_key:
return JSONResponse(content={"success": False, "message": "表没有主键,无法更新"}, status_code=400)
# 构建更新语句
set_clause = ','.join([f'"{col}" = %s' for col in data.keys()])
values = list(data.values())
values.append(record_id)
query = f'UPDATE "{table_name}" SET {set_clause} WHERE "{primary_key}" = %s'
cur.execute(query, values)
conn.commit()
cur.close()
release_db_connection(conn)
return {"success": True, "message": "更新成功"}
except Exception as e:
return JSONResponse(content={"success": False, "message": str(e)}, status_code=500)
@app.delete("/api/db/table/{table_name}/delete")
async def delete_table_data(table_name: str, request: Request):
"""
删除指定表的数据。
"""
try:
body = await request.json()
ids = body.get('ids', [])
if not ids:
return JSONResponse(content={"success": False, "message": "没有要删除的记录"}, status_code=400)
conn = get_db_connection()
cur = conn.cursor(cursor_factory=RealDictCursor)
# 获取主键
cur.execute("""
SELECT a.attname AS column_name
FROM pg_index i
JOIN pg_attribute a ON a.attrelid = i.indrelid AND a.attnum = ANY(i.indkey)
WHERE i.indrelid = %s::regclass
AND i.indisprimary
""", (table_name,))
pk_result = cur.fetchone()
primary_key = pk_result['column_name'] if pk_result else None
if not primary_key:
return JSONResponse(content={"success": False, "message": "表没有主键,无法删除"}, status_code=400)
# 删除 ids 中的记录
placeholders = ','.join(['%s'] * len(ids))
query = f'DELETE FROM "{table_name}" WHERE "{primary_key}" IN ({placeholders})'
cur.execute(query, ids)
conn.commit()
cur.close()
release_db_connection(conn)
return {"success": True, "message": f"成功删除 {cur.rowcount} 条记录"}
except Exception as e:
return JSONResponse(content={"success": False, "message": str(e)}, status_code=500)
class TicketPaymentRequest(BaseModel):
name: str
phone: str

796
templates/data_base.html Normal file
View File

@@ -0,0 +1,796 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据库管理 - 云南AI共生大会</title>
<style>
:root {
--primary-color: #00f2ff;
--secondary-color: #0066ff;
--bg-color: #050814;
--card-bg: rgba(12, 24, 50, 0.5);
--text-color: #ffffff;
--text-muted: #b0c4de;
--accent-glow: rgba(0, 242, 255, 0.6);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
background-image:
radial-gradient(circle at 50% 0%, #1a3a75 0%, #050814 60%),
radial-gradient(circle at 85% 30%, rgba(0, 242, 255, 0.1) 0%, transparent 40%),
radial-gradient(circle at 15% 70%, rgba(0, 102, 255, 0.15) 0%, transparent 40%);
background-attachment: fixed;
min-height: 100vh;
display: flex;
flex-direction: column;
padding: 20px;
}
.container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 1;
}
h1 {
font-size: 1.8rem;
margin-bottom: 20px;
text-align: center;
background: linear-gradient(180deg, #ffffff 0%, #d0eaff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 900;
text-shadow: 0 0 20px rgba(0, 242, 255, 0.4);
}
.nav-bar {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.nav-bar a {
text-decoration: none;
color: var(--text-muted);
padding: 8px 16px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(0, 242, 255, 0.2);
transition: all 0.3s;
}
.nav-bar a:hover, .nav-bar a.active {
background: rgba(0, 242, 255, 0.1);
border-color: var(--primary-color);
color: var(--primary-color);
}
.card {
background: var(--card-bg);
border-radius: 16px;
padding: 20px;
margin-bottom: 20px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(0, 242, 255, 0.2);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}
.table-list {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.table-btn {
padding: 10px 20px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(0, 242, 255, 0.3);
border-radius: 8px;
color: white;
cursor: pointer;
transition: all 0.3s;
}
.table-btn:hover, .table-btn.active {
background: linear-gradient(90deg, #0051ff 0%, #00f2ff 100%);
border-color: var(--primary-color);
}
.toolbar {
display: flex;
gap: 10px;
margin-bottom: 15px;
flex-wrap: wrap;
align-items: center;
}
.toolbar input[type="text"] {
padding: 8px 12px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(0, 242, 255, 0.3);
border-radius: 6px;
color: white;
outline: none;
}
.toolbar input[type="text"]:focus {
border-color: var(--primary-color);
}
button {
background: linear-gradient(90deg, #0051ff 0%, #00f2ff 100%);
color: white;
padding: 8px 16px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.3s;
box-shadow: 0 2px 10px rgba(0, 242, 255, 0.3);
}
button:hover {
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(0, 242, 255, 0.5);
}
button.btn-success {
background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
box-shadow: 0 2px 10px rgba(32, 201, 151, 0.35);
}
button.btn-danger {
background: linear-gradient(90deg, #cc0000 0%, #ff4d4d 100%);
box-shadow: 0 2px 10px rgba(255, 0, 0, 0.3);
}
button.btn-warning {
background: linear-gradient(90deg, #ffc107 0%, #fd7e14 100%);
box-shadow: 0 2px 10px rgba(255, 193, 7, 0.35);
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.table-container {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
th, td {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
th {
background: rgba(0, 0, 0, 0.3);
color: var(--primary-color);
font-weight: 600;
white-space: nowrap;
position: sticky;
top: 0;
}
tr:hover {
background: rgba(0, 242, 255, 0.05);
}
td {
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.action-btns {
display: flex;
gap: 5px;
}
.action-btns button {
padding: 4px 8px;
font-size: 0.8rem;
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 15px;
}
.pagination button {
padding: 6px 12px;
}
.pagination span {
color: var(--text-muted);
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 1000;
justify-content: center;
align-items: center;
}
.modal.show {
display: flex;
}
.modal-content {
background: var(--card-bg);
border-radius: 16px;
padding: 25px;
width: 90%;
max-width: 600px;
max-height: 90vh;
overflow-y: auto;
border: 1px solid rgba(0, 242, 255, 0.3);
backdrop-filter: blur(20px);
}
.modal h2 {
margin-bottom: 20px;
color: var(--primary-color);
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
color: var(--text-muted);
font-size: 0.9rem;
}
.form-group input, .form-group textarea, .form-group select {
width: 100%;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(0, 242, 255, 0.3);
border-radius: 6px;
color: white;
font-size: 0.95rem;
}
.form-group textarea {
min-height: 80px;
resize: vertical;
}
.form-group input:focus, .form-group textarea:focus {
outline: none;
border-color: var(--primary-color);
}
.modal-btns {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 20px;
}
#message {
position: fixed;
top: 20px;
right: 20px;
padding: 15px 25px;
border-radius: 8px;
color: white;
font-weight: bold;
display: none;
z-index: 1001;
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.success {
background: rgba(40, 167, 69, 0.9);
border: 1px solid #28a745;
}
.error {
background: rgba(220, 53, 69, 0.9);
border: 1px solid #dc3545;
}
.table-info {
display: flex;
gap: 20px;
margin-bottom: 15px;
color: var(--text-muted);
font-size: 0.9rem;
}
.loading {
text-align: center;
padding: 40px;
color: var(--text-muted);
}
.empty-state {
text-align: center;
padding: 60px;
color: var(--text-muted);
}
.checkbox-cell {
width: 40px;
text-align: center;
}
.checkbox-cell input {
width: 18px;
height: 18px;
accent-color: var(--primary-color);
}
</style>
</head>
<body>
<div class="container">
<h1>数据库管理</h1>
<div class="nav-bar">
<a href="/admin">← 返回管理后台</a>
</div>
<div class="card">
<h2 style="margin-bottom: 15px; color: var(--primary-color);">选择数据表</h2>
<div class="table-list" id="tableList">
<div class="loading">加载中...</div>
</div>
</div>
<div class="card" id="dataCard" style="display: none;">
<h2 style="margin-bottom: 15px; color: var(--primary-color);" id="tableTitle">数据表</h2>
<div class="table-info" id="tableInfo"></div>
<div class="toolbar">
<input type="text" id="searchInput" placeholder="搜索..." onkeyup="handleSearch()">
<button onclick="loadData()">🔄 刷新</button>
<button class="btn-success" onclick="showInsertModal()"> 新增</button>
<button class="btn-danger" id="deleteSelectedBtn" onclick="deleteSelected()" disabled>🗑️ 删除选中</button>
</div>
<div class="table-container" id="tableContainer">
<div class="loading">请先选择数据表</div>
</div>
<div class="pagination" id="pagination"></div>
</div>
</div>
<div class="modal" id="editModal">
<div class="modal-content">
<h2 id="modalTitle">编辑数据</h2>
<form id="editForm">
<div id="formFields"></div>
<div class="modal-btns">
<button type="button" onclick="closeModal()">取消</button>
<button type="submit" class="btn-success" id="submitBtn">保存</button>
</div>
</form>
</div>
</div>
<div id="message"></div>
<script>
let currentTable = '';
let currentPage = 1;
let pageSize = 50;
let totalRows = 0;
let tableColumns = [];
let tableData = [];
let primaryKey = '';
let editingId = null;
// 加载表列表
async function loadTables() {
try {
const res = await fetch('/api/db/tables');
const data = await res.json();
if (data.success) {
const tableList = document.getElementById('tableList');
tableList.innerHTML = '';
data.tables.forEach(table => {
const btn = document.createElement('button');
btn.className = 'table-btn';
btn.textContent = table;
btn.onclick = () => selectTable(table);
if (currentTable === table) btn.classList.add('active');
tableList.appendChild(btn);
});
}
} catch (e) {
showMessage('加载表列表失败', 'error');
}
}
// 选择表
async function selectTable(table) {
currentTable = table;
currentPage = 1;
document.getElementById('dataCard').style.display = 'block';
document.getElementById('tableTitle').textContent = table + ' - 数据管理';
document.querySelectorAll('.table-btn').forEach(btn => {
btn.classList.remove('active');
if (btn.textContent === table) btn.classList.add('active');
});
await loadData();
}
// 加载数据
async function loadData() {
if (!currentTable) return;
try {
const res = await fetch(`/api/db/table/${currentTable}?page=${currentPage}&page_size=${pageSize}`);
const data = await res.json();
if (data.success) {
tableColumns = data.columns;
tableData = data.rows;
totalRows = data.total;
primaryKey = data.primary_key || '';
renderTable();
renderPagination();
} else {
showMessage(data.message || '加载数据失败', 'error');
}
} catch (e) {
showMessage('网络错误', 'error');
}
}
// 渲染表格
function renderTable() {
const container = document.getElementById('tableContainer');
if (tableData.length === 0) {
container.innerHTML = '<div class="empty-state">暂无数据</div>';
return;
}
let html = '<table><thead><tr>';
// 复选框列
html += '<th class="checkbox-cell"><input type="checkbox" onchange="toggleAllCheckboxes(this)"></th>';
// 数据列
tableColumns.forEach(col => {
html += `<th>${col}</th>`;
});
// 操作列
html += '<th>操作</th></tr></thead><tbody>';
tableData.forEach(row => {
const id = primaryKey ? row[primaryKey] : JSON.stringify(row);
html += `<tr data-id="${id}">`;
html += `<td class="checkbox-cell"><input type="checkbox" class="row-checkbox" data-id="${id}"></td>`;
tableColumns.forEach(col => {
let value = row[col];
if (value === null || value === undefined) value = '';
value = String(value);
if (value.length > 50) {
value = value.substring(0, 50) + '...';
}
html += `<td title="${row[col] || ''}">${escapeHtml(value)}</td>`;
});
html += `<td class="action-btns">
<button class="btn-warning" onclick="showEditModal('${escapeId(id)}')">编辑</button>
<button class="btn-danger" onclick="deleteRow('${escapeId(id)}')">删除</button>
</td></tr>`;
});
html += '</tbody></table>';
container.innerHTML = html;
}
// 转义ID用于HTML属性
function escapeId(id) {
return String(id).replace(/'/g, "\\'").replace(/"/g, '&quot;');
}
// HTML转义
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
// 渲染分页
function renderPagination() {
const totalPages = Math.ceil(totalRows / pageSize);
const pagination = document.getElementById('pagination');
if (totalPages <= 1) {
pagination.innerHTML = '';
return;
}
let html = `
<button ${currentPage === 1 ? 'disabled' : ''} onclick="goToPage(1)">首页</button>
<button ${currentPage === 1 ? 'disabled' : ''} onclick="goToPage(${currentPage - 1})">上一页</button>
<span>第 ${currentPage} / ${totalPages} 页 (共 ${totalRows} 条)</span>
<button ${currentPage === totalPages ? 'disabled' : ''} onclick="goToPage(${currentPage + 1})">下一页</button>
<button ${currentPage === totalPages ? 'disabled' : ''} onclick="goToPage(${totalPages})">末页</button>
`;
pagination.innerHTML = html;
}
// 跳转到指定页
function goToPage(page) {
currentPage = page;
loadData();
}
// 搜索
let searchTimeout;
function handleSearch() {
clearTimeout(searchTimeout);
searchTimeout = setTimeout(() => {
const keyword = document.getElementById('searchInput').value;
filterData(keyword);
}, 300);
}
// 过滤数据(前端过滤)
function filterData(keyword) {
if (!keyword) {
renderTable();
return;
}
keyword = keyword.toLowerCase();
const filtered = tableData.filter(row => {
return tableColumns.some(col => {
const val = String(row[col] || '').toLowerCase();
return val.includes(keyword);
});
});
// 临时显示过滤结果
const originalData = tableData;
tableData = filtered;
renderTable();
tableData = originalData;
}
// 全选/取消全选
function toggleAllCheckboxes(source) {
const checkboxes = document.querySelectorAll('.row-checkbox');
checkboxes.forEach(cb => cb.checked = source.checked);
updateDeleteButton();
}
// 更新删除按钮状态
function updateDeleteButton() {
const checked = document.querySelectorAll('.row-checkbox:checked');
document.getElementById('deleteSelectedBtn').disabled = checked.length === 0;
}
// 监听复选框变化
document.addEventListener('change', (e) => {
if (e.target.classList.contains('row-checkbox')) {
updateDeleteButton();
}
});
// 显示新增弹窗
async function showInsertModal() {
editingId = null;
document.getElementById('modalTitle').textContent = '新增数据 - ' + currentTable;
await renderFormFields();
document.getElementById('editModal').classList.add('show');
}
// 显示编辑弹窗
async function showEditModal(id) {
editingId = id;
document.getElementById('modalTitle').textContent = '编辑数据 - ' + currentTable;
// 查找当前行数据
const row = tableData.find(r => {
const pk = primaryKey;
return pk ? String(r[pk]) === id : JSON.stringify(r) === id;
});
await renderFormFields(row);
document.getElementById('editModal').classList.add('show');
}
// 渲染表单字段
async function renderFormFields(data = {}) {
const formFields = document.getElementById('formFields');
// 获取表结构
try {
const res = await fetch(`/api/db/table/${currentTable}/columns`);
const result = await res.json();
if (!result.success) {
showMessage('获取表结构失败', 'error');
return;
}
let html = '';
result.columns.forEach(col => {
const isPrimary = col.column_name === primaryKey;
if (isPrimary && !data[primaryKey]) {
return; // 新增时跳过自增主键
}
let value = data[col.column_name] || '';
html += `<div class="form-group">
<label>${col.column_name}${col.is_nullable === 'YES' ? '' : ' *'}</label>
<input type="text"
name="${col.column_name}"
value="${escapeHtml(String(value))}"
${isPrimary ? 'readonly' : ''}
data-type="${col.data_type}">
</div>`;
});
formFields.innerHTML = html;
} catch (e) {
showMessage('网络错误', 'error');
}
}
// 关闭弹窗
function closeModal() {
document.getElementById('editModal').classList.remove('show');
editingId = null;
}
// 提交表单
document.getElementById('editForm').onsubmit = async (e) => {
e.preventDefault();
const formData = {};
const inputs = document.querySelectorAll('#editForm input');
inputs.forEach(input => {
formData[input.name] = input.value;
});
const url = editingId
? `/api/db/table/${currentTable}/update`
: `/api/db/table/${currentTable}/insert`;
const method = editingId ? 'PUT' : 'POST';
try {
const res = await fetch(url, {
method: method,
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
id: editingId,
data: formData
})
});
const result = await res.json();
if (result.success) {
showMessage(editingId ? '更新成功' : '添加成功', 'success');
closeModal();
loadData();
} else {
showMessage(result.message || '操作失败', 'error');
}
} catch (e) {
showMessage('网络错误', 'error');
}
};
// 删除单行
async function deleteRow(id) {
if (!confirm('确定要删除这条记录吗?')) return;
try {
const res = await fetch(`/api/db/table/${currentTable}/delete`, {
method: 'DELETE',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ ids: [id] })
});
const result = await res.json();
if (result.success) {
showMessage('删除成功', 'success');
loadData();
} else {
showMessage(result.message || '删除失败', 'error');
}
} catch (e) {
showMessage('网络错误', 'error');
}
}
// 删除选中
async function deleteSelected() {
const checkboxes = document.querySelectorAll('.row-checkbox:checked');
const ids = Array.from(checkboxes).map(cb => cb.dataset.id);
if (ids.length === 0) return;
if (!confirm(`确定要删除选中的 ${ids.length} 条记录吗?`)) return;
try {
const res = await fetch(`/api/db/table/${currentTable}/delete`, {
method: 'DELETE',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ ids: ids })
});
const result = await res.json();
if (result.success) {
showMessage('删除成功', 'success');
loadData();
} else {
showMessage(result.message || '删除失败', 'error');
}
} catch (e) {
showMessage('网络错误', 'error');
}
}
// 显示消息
function showMessage(text, type) {
const msg = document.getElementById('message');
msg.textContent = text;
msg.className = type;
msg.style.display = 'block';
setTimeout(() => msg.style.display = 'none', 3000);
}
// 初始化
loadTables();
</script>
</body>
</html>