API数据表更新
This commit is contained in:
449
src/main/resources/templates/views/data/detail.html
Normal file
449
src/main/resources/templates/views/data/detail.html
Normal 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>
|
||||
Reference in New Issue
Block a user