manager/c-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

API数据表更新

Browse Source
This commit is contained in:
gaoxq
2025-08-30 00:25:20 +08:00
parent 6acd466db3
commit 4d76dd762b
12 changed files with 29 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

449
src/main/resources/templates/views/data/detail.html Normal file
View File

@@ -0,0 +1,449 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>市区信息表结构</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
background: linear-gradient(135deg, #f8f9fc 0%, #eef2f6 100%);
min-height: 100vh;
padding: 20px;
color: #2c3e50;
overflow: hidden; /* 禁止页面整体滚动 */
}
.container {
max-width: 1400px;
margin: 20px auto;
display: flex;
gap: 25px;
height: calc(100vh - 40px); /* 让容器占用整个屏幕高度 */
}
.panel {
background: white;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0, 0, 100, 0.08);
overflow: hidden;
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
}
.panel:hover {
transform: translateY(-5px);
}
.panel-header {
background: linear-gradient(135deg, #4a69bd 0%, #1e3799 100%);
color: white;
padding: 18px 25px;
font-size: 1.3rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.panel-content {
padding: 25px;
flex: 1;
display: flex;
flex-direction: column;
}
.left-panel {
flex: 1;
}
.right-panel {
flex: 2;
}
.info-card {
background: #f8f9ff;
border-radius: 12px;
padding: 20px;
margin-bottom: 22px;
border-left: 4px solid #4a69bd;
}
.info-row {
display: flex;
margin-bottom: 14px;
align-items: center;
}
.info-label {
font-weight: 600;
color: #4a69bd;
width: 120px;
position: relative;
}
.info-label::after {
content: ":";
position: absolute;
right: 8px;
}
.info-value {
flex: 1;
color: #343a40;
}
.button-panel {
display: flex;
gap: 12px;
margin-bottom: 25px;
border-bottom: 1px solid #e9ecef;
padding-bottom: 20px;
flex-shrink: 0; /* 防止按钮区随内容滚动 */
}
.button {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 10px 22px;
border-radius: 8px;
font-weight: 600;
color: #4a69bd;
cursor: pointer;
border: 1px solid #dee2e6;
transition: all 0.3s ease;
}
.button:hover {
background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.button.active {
background: linear-gradient(135deg, #4a69bd 0%, #1e3799 100%);
color: white;
border-color: #1e3799;
}
table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
background: white;
}
th {
background: linear-gradient(135deg, #4a69bd 0%, #1e3799 100%);
color: white;
font-weight: 600;
padding: 16px 15px;
text-align: left;
border-right: 1px solid rgba(255, 255, 255, 0.15);
position: sticky;
top: 0;
z-index: 10;
}
th:last-child {
border-right: none;
}
td {
padding: 14px 15px;
border-bottom: 1px solid #e9ecef;
color: #495057;
}
tr:nth-child(even) {
background-color: #f8f9ff;
}
tr:hover td {
background-color: rgba(74, 105, 189, 0.08);
}
.primary-key {
background-color: #e3f2fd;
color: #0d47a1;
font-weight: 600;
padding: 3px 10px;
border-radius: 50px;
font-size: 0.85rem;
}
.index-key {
background-color: #e8f5e9;
color: #1b5e20;
padding: 3px 10px;
border-radius: 50px;
font-size: 0.85rem;
}
.stats-row {
display: flex;
gap: 20px;
margin-top: 15px;
color: #6c757d;
font-size: 0.9rem;
}
.stat-item {
display: flex;
align-items: center;
gap: 6px;
}
.time-ago {
color: #e74c3c;
font-weight: 500;
}
@media (max-width: 1000px) {
.container {
flex-direction: column;
height: auto;
}
}
.table-scroll-container {
flex: 1;
overflow-y: auto;
border-radius: 12px;
max-height: calc(100vh - 320px); /* 确保独立滚动 */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
/* 自定义滚动条样式 */
.table-scroll-container::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.table-scroll-container::-webkit-scrollbar-thumb {
background: #4a69bd;
border-radius: 4px;
}
.table-scroll-container::-webkit-scrollbar-track {
background: rgba(74, 105, 189, 0.1);
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<div class="panel left-panel">
<div class="panel-header">
<i class="fas fa-database"></i> 表基础信息
</div>
<div class="panel-content">
<div class="info-card">
<div class="info-row">
<div class="info-label">数据库</div>
<div class="info-value">work</div>
</div>
<div class="info-row">
<div class="info-label">表名称</div>
<div class="info-value">biz_cities</div>
</div>
<div class="info-row">
<div class="info-label">表描述</div>
<div class="info-value">市区信息表</div>
</div>
<div class="info-row">
<div class="info-label">存储量</div>
<div class="info-value">333条</div>
</div>
</div>
<div class="info-card">
<div class="info-row">
<div class="info-label">创建时间</div>
<div class="info-value">
2025-08-29 15:54:41
<span class="time-ago">（2小时前）</span>
</div>
</div>
<div class="info-row">
<div class="info-label">更新时间</div>
<div class="info-value">
2025-08-29 15:54:41
<span class="time-ago">（2小时前）</span>
</div>
</div>
</div>
<div class="stats-row">
<div class="stat-item">
<i class="fas fa-key" style="color: #0d47a1;"></i>
1 个主键
</div>
<div class="stat-item">
<i class="fas fa-sitemap" style="color: #1b5e20;"></i>
2 个索引
</div>
<div class="stat-item">
<i class="fas fa-list" style="color: #4a69bd;"></i>
13 个字段
</div>
</div>
</div>
</div>
<div class="panel right-panel">
<div class="panel-header">
<i class="fas fa-columns"></i> 表结构信息
</div>
<div class="panel-content">
<div class="button-panel">
<div class="button active">
<i class="fas fa-list-ul"></i> 字段信息
</div>
<div class="button">
<i class="fas fa-code"></i> 生成SELECT
</div>
<div class="button">
<i class="fas fa-database"></i> 生成DDL
</div>
</div>
<div class="table-scroll-container">
<table>
<thead>
<tr>
<th>序号</th>
<th>字段名称</th>
<th>字段类型</th>
<th>描述</th>
<th>键类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><strong>id</strong></td>
<td>datetime</td>
<td></td>
<td><span class="primary-key">主键</span></td>
</tr>
<tr>
<td>2</td>
<td>create_time</td>
<td>varchar</td>
<td>记录时间</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>province_code</td>
<td>varchar</td>
<td>省份编码</td>
<td><span class="index-key">索引</span></td>
</tr>
<tr>
<td>4</td>
<td>city_code</td>
<td>varchar</td>
<td>市区编码</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>city_name</td>
<td>varchar</td>
<td>市区名称</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>area_code</td>
<td>varchar</td>
<td>市区区号</td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>area_type</td>
<td>varchar</td>
<td>市区级别</td>
<td></td>
</tr>
<tr>
<td>8</td>
<td>update_time</td>
<td>varchar</td>
<td>更新时间</td>
<td></td>
</tr>
<tr>
<td>9</td>
<td>data_status</td>
<td>varchar</td>
<td>数据状态</td>
<td></td>
</tr>
<tr>
<td>10</td>
<td>f_tenant_id</td>
<td>varchar</td>
<td>租户id</td>
<td></td>
</tr>
<tr>
<td>11</td>
<td>f_flow_id</td>
<td>datetime</td>
<td>流程id</td>
<td><span class="index-key">索引</span></td>
</tr>
<tr>
<td>12</td>
<td>f_flow_task_id</td>
<td>datetime</td>
<td>流程任务主键</td>
<td></td>
</tr>
<tr>
<td>13</td>
<td>f_flow_state</td>
<td>bigint</td>
<td>流程任务状态</td>
<td></td>
</tr>
<!-- 额外行模拟更多字段 -->
<tr>
<td>14</td>
<td>f_created_by</td>
<td>varchar</td>
<td>创建人</td>
<td></td>
</tr>
<tr>
<td>15</td>
<td>f_updated_by</td>
<td>varchar</td>
<td>更新人</td>
<td></td>
</tr>
<tr>
<td>16</td>
<td>f_version</td>
<td>int</td>
<td>版本号</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>

189
src/main/resources/templates/views/data/list.html Normal file
View File

@@ -0,0 +1,189 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>数据库表管理</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#64748B',
accent: '#10B981',
neutral: '#F8FAFC',
'neutral-dark': '#1E293B',
},
fontFamily: {inter: ['Inter', 'system-ui', 'sans-serif']},
},
},
};
</script>
<style>
/* 让弹窗占 80% 宽、60% 高 */
#detailDialog {
width: 65vw;
height: 80vh;
max-width: none;
max-height: none;
}
</style>
</head>
<body class="bg-gray-50 font-inter text-neutral-dark">
<!-- 顶部搜索栏 -->
<header class="fixed top-0 inset-x-0 z-30 bg-white shadow-md">
<div class="max-w-7xl mx-auto px-[30px] py-3 flex items-center gap-4">
<!-- 数据库下拉框 -->
<div class="relative flex-shrink-0">
<select id="dbSelect"
class="appearance-none bg-gray-50 border border-gray-300 text-gray-700 py-2 px-4 pr-8 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
<option value="">请选择数据库</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<i class="fa fa-chevron-down text-xs"></i>
</div>
</div>
<!-- 表名关键字输入框 -->
<div class="relative flex-1 min-w-[200px]">
<input id="searchInput" type="text" placeholder="请输入表关键字..."
class="w-full bg-gray-50 border border-gray-300 text-gray-700 py-2 px-4 pr-10 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50"/>
<button id="searchBtn" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-primary">
<i class="fa fa-search"></i>
</button>
</div>
<button id="queryBtn" class="bg-primary hover:bg-primary/90 text-white py-2 px-6 rounded-lg flex-shrink-0">
搜索
</button>
</div>
</header>
<!-- 主内容 -->
<main class="pt-20 pb-8">
<div class="max-w-7xl mx-auto px-[30px]">
<!-- 统计卡片 -->
<div class="bg-white rounded-xl shadow-md px-4 py-2 flex items-center justify-end space-x-1">
<span class="text-gray-500 text-sm">共</span>
<span class="text-xl font-bold text-primary" id="totalCount">0</span>
<span class="text-gray-500 text-sm">个对象</span>
</div>
<!-- 表列表 -->
<div id="tableList" class="space-y-6 mt-6"></div>
</div>
</main>
<!-- 表详情弹窗 -->
<dialog id="detailDialog" class="rounded-xl shadow-2xl bg-white p-0 backdrop:bg-black/30">
<iframe id="detailFrame" class="w-full h-full rounded-xl" frameborder="0"></iframe>
</dialog>
<script>
/*****************************************************************
* 工具函数
*****************************************************************/
const $ = sel => document.querySelector(sel);
const $$ = sel => document.querySelectorAll(sel);
/* Toast */
function showToast(msg) {
const t = document.createElement('div');
t.className = 'fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg z-50';
t.textContent = msg;
document.body.appendChild(t);
setTimeout(() => t.remove(), 3000);
}
/*****************************************************************
* 1. 加载数据库下拉框
*****************************************************************/
fetch('getDbList')
.then(r => r.json())
.then(list => {
const frag = document.createDocumentFragment();
list.forEach(item => {
const opt = document.createElement('option');
opt.value = item.dbId || item;
opt.textContent = item.dbName || item;
frag.appendChild(opt);
});
$('#dbSelect').appendChild(frag);
})
.catch(() => showToast('获取数据库列表失败'));
/*****************************************************************
* 2. 加载/渲染表格卡片
*****************************************************************/
function loadTableList() {
const dbId = $('#dbSelect').value;
const targetTable = $('#searchInput').value.trim();
if (!dbId) {
showToast('请先选择数据库');
return;
}
fetch(`getTableList?dbId=${encodeURIComponent(dbId)}&targetTable=${encodeURIComponent(targetTable)}`)
.then(r => r.json())
.then(list => {
$('#totalCount').textContent = list.length;
const box = $('#tableList');
box.innerHTML = '';
list.forEach(item => {
const card = document.createElement('div');
card.className = 'bg-white rounded-xl shadow-md overflow-hidden card-hover';
card.innerHTML = `
<div class="p-6">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
<div class="flex items-center gap-3">
<div class="bg-blue-100 p-3 rounded-lg"><i class="fa fa-table text-primary text-xl"></i></div>
<div>
<h3 class="text-lg font-semibold text-gray-800 cursor-pointer hover:text-primary" onclick="openDetailDialog('${item.taskId}')">
${item.targetTable}
</h3>
<p class="text-gray-500 text-sm mt-1">表说明: ${item.taskName || '暂无'}</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-x-8 gap-y-2 text-sm">
<div><p class="text-gray-500">源端数据库</p><p class="font-medium">${item.dbType}</p></div>
<div><p class="text-gray-500">创建时间</p><p class="font-medium">${item.createTime || '-'}</p></div>
<div><p class="text-gray-500">更新时间</p><p class="font-medium">${item.lastSyncTime || '-'}</p></div>
</div>
</div>
<div class="mt-6 text-gray-600"><span class="font-medium">存储量:</span> ${item.successRows || '-'}条</div>
</div>`;
box.appendChild(card);
});
})
.catch(() => showToast('获取表列表失败'));
}
/*****************************************************************
* 3. 事件绑定
*****************************************************************/
$('#queryBtn').addEventListener('click', loadTableList);
$('#searchInput').addEventListener('keydown', e => {
if (e.key === 'Enter') loadTableList();
});
$('#searchBtn').addEventListener('click', loadTableList);
/*****************************************************************
* 4. 表详情弹窗
*****************************************************************/
function openDetailDialog(taskId) {
const dialog = $('#detailDialog');
const frame = $('#detailFrame');
frame.src = `getTableDetail?taskId=${encodeURIComponent(taskId)}`;
dialog.showModal();
}
// 点击遮罩关闭弹窗
$('#detailDialog').addEventListener('click', e => {
if (e.target === $('#detailDialog')) $('#detailDialog').close();
});
</script>
</body>
</html>