重写复现方法
This commit is contained in:
5
pom.xml
5
pom.xml
@@ -32,6 +32,11 @@
|
||||
|
||||
<dependencies>
|
||||
|
||||
<dependency>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-starter-thymeleaf</artifactId>
|
||||
</dependency>
|
||||
|
||||
<dependency>
|
||||
<groupId>org.springdoc</groupId>
|
||||
<artifactId>springdoc-openapi-starter-webmvc-ui</artifactId>
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
package com.mini.capi.biz.controller;
|
||||
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
|
||||
/**
|
||||
* <p>
|
||||
* VIEW 前端控制器
|
||||
* </p>
|
||||
*
|
||||
* @author gaoxq
|
||||
* @since 2025-08-29
|
||||
*/
|
||||
@RestController
|
||||
@RequestMapping("/biz/syncTablesView")
|
||||
public class SyncTablesViewController {
|
||||
|
||||
}
|
||||
96
src/main/java/com/mini/capi/biz/domain/SyncTablesView.java
Normal file
96
src/main/java/com/mini/capi/biz/domain/SyncTablesView.java
Normal file
@@ -0,0 +1,96 @@
|
||||
package com.mini.capi.biz.domain;
|
||||
|
||||
import com.baomidou.mybatisplus.annotation.TableField;
|
||||
import com.baomidou.mybatisplus.annotation.TableName;
|
||||
import java.io.Serializable;
|
||||
import java.time.LocalDateTime;
|
||||
import lombok.Getter;
|
||||
import lombok.Setter;
|
||||
|
||||
/**
|
||||
* <p>
|
||||
* VIEW
|
||||
* </p>
|
||||
*
|
||||
* @author gaoxq
|
||||
* @since 2025-08-29
|
||||
*/
|
||||
@Getter
|
||||
@Setter
|
||||
@TableName("biz_sync_tables_view")
|
||||
public class SyncTablesView implements Serializable {
|
||||
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
/**
|
||||
* 记录创建时间
|
||||
*/
|
||||
@TableField("create_time")
|
||||
private LocalDateTime createTime;
|
||||
|
||||
/**
|
||||
* 同步任务唯一标识
|
||||
*/
|
||||
@TableField("task_id")
|
||||
private String taskId;
|
||||
|
||||
/**
|
||||
* 同步任务名称
|
||||
*/
|
||||
@TableField("task_name")
|
||||
private String taskName;
|
||||
|
||||
/**
|
||||
* 源数据库配置ID，关联biz_db_config表
|
||||
*/
|
||||
@TableField("source_db_id")
|
||||
private String sourceDbId;
|
||||
|
||||
/**
|
||||
* 源数据库表名
|
||||
*/
|
||||
@TableField("source_table")
|
||||
private String sourceTable;
|
||||
|
||||
/**
|
||||
* 目标数据库表名
|
||||
*/
|
||||
@TableField("target_table")
|
||||
private String targetTable;
|
||||
|
||||
/**
|
||||
* 是否激活（任务启用状态标识）
|
||||
*/
|
||||
@TableField("is_active")
|
||||
private String isActive;
|
||||
|
||||
/**
|
||||
* 最后一次同步时间
|
||||
*/
|
||||
@TableField("last_sync_time")
|
||||
private LocalDateTime lastSyncTime;
|
||||
|
||||
/**
|
||||
* 记录最后更新时间
|
||||
*/
|
||||
@TableField("update_time")
|
||||
private LocalDateTime updateTime;
|
||||
|
||||
/**
|
||||
* 数据库类型（如mysql、oracle、postgresql等）
|
||||
*/
|
||||
@TableField("db_type")
|
||||
private String dbType;
|
||||
|
||||
/**
|
||||
* 数据库配置唯一标识
|
||||
*/
|
||||
@TableField("db_id")
|
||||
private String dbId;
|
||||
|
||||
/**
|
||||
* 成功同步记录数
|
||||
*/
|
||||
@TableField("success_rows")
|
||||
private Long successRows;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
package com.mini.capi.biz.mapper;
|
||||
|
||||
import com.mini.capi.biz.domain.SyncTablesView;
|
||||
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
|
||||
|
||||
/**
|
||||
* <p>
|
||||
* VIEW Mapper 接口
|
||||
* </p>
|
||||
*
|
||||
* @author gaoxq
|
||||
* @since 2025-08-29
|
||||
*/
|
||||
public interface SyncTablesViewMapper extends BaseMapper<SyncTablesView> {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
package com.mini.capi.biz.service;
|
||||
|
||||
import com.mini.capi.biz.domain.SyncTablesView;
|
||||
import com.baomidou.mybatisplus.extension.service.IService;
|
||||
|
||||
/**
|
||||
* <p>
|
||||
* VIEW 服务类
|
||||
* </p>
|
||||
*
|
||||
* @author gaoxq
|
||||
* @since 2025-08-29
|
||||
*/
|
||||
public interface SyncTablesViewService extends IService<SyncTablesView> {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
package com.mini.capi.biz.service.impl;
|
||||
|
||||
import com.mini.capi.biz.domain.SyncTablesView;
|
||||
import com.mini.capi.biz.mapper.SyncTablesViewMapper;
|
||||
import com.mini.capi.biz.service.SyncTablesViewService;
|
||||
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
|
||||
import org.springframework.stereotype.Service;
|
||||
|
||||
/**
|
||||
* <p>
|
||||
* VIEW 服务实现类
|
||||
* </p>
|
||||
*
|
||||
* @author gaoxq
|
||||
* @since 2025-08-29
|
||||
*/
|
||||
@Service
|
||||
public class SyncTablesViewServiceImpl extends ServiceImpl<SyncTablesViewMapper, SyncTablesView> implements SyncTablesViewService {
|
||||
|
||||
}
|
||||
@@ -29,7 +29,7 @@ public class demo {
|
||||
.pathInfo(Collections.singletonMap(OutputFile.xml, System.getProperty("user.dir") + "/src/main/resources/mapper"));
|
||||
})
|
||||
.strategyConfig(builder -> {
|
||||
builder.addInclude("biz_api_module,biz_api_menus")
|
||||
builder.addInclude("biz_sync_tables_view")
|
||||
.addTablePrefix("biz_")
|
||||
.entityBuilder()
|
||||
.enableLombok()
|
||||
|
||||
@@ -27,4 +27,7 @@ public class LoginPageController {
|
||||
public String homePage() {
|
||||
return "forward:/views/home.html";
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
package com.mini.capi.sys.controller;
|
||||
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
|
||||
@Controller
|
||||
public class dataController {
|
||||
|
||||
@GetMapping("/Sys/data/list")
|
||||
public String listPage() {
|
||||
return "forward:/views/data/list.html";
|
||||
}
|
||||
|
||||
@GetMapping("/Sys/data/getTableDetail")
|
||||
public String getTableDetail(String taskId) {
|
||||
return "forward:/views/data/detail.html";
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
package com.mini.capi.sys.controller;
|
||||
|
||||
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
|
||||
import com.mini.capi.biz.domain.DbConfig;
|
||||
import com.mini.capi.biz.domain.SyncTablesView;
|
||||
import com.mini.capi.biz.service.DbConfigService;
|
||||
import com.mini.capi.biz.service.SyncTablesViewService;
|
||||
import jakarta.annotation.Resource;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
@RestController // ← 关键
|
||||
@RequestMapping("/Sys/data")
|
||||
public class dataPageController {
|
||||
|
||||
|
||||
@Resource
|
||||
private DbConfigService configService;
|
||||
|
||||
|
||||
@Resource
|
||||
private SyncTablesViewService tablesViewService;
|
||||
|
||||
|
||||
@GetMapping("/getDbList")
|
||||
public List<DbConfig> getDbList() {
|
||||
return configService.list();
|
||||
}
|
||||
|
||||
@GetMapping("/getTableList")
|
||||
public List<SyncTablesView> getTableList(String dbId, String targetTable) {
|
||||
QueryWrapper<SyncTablesView> queryWrapper = new QueryWrapper<>();
|
||||
queryWrapper.eq(dbId != null && !dbId.isBlank(), "db_id", dbId)
|
||||
.like(targetTable != null && !targetTable.isBlank(), "target_table", targetTable);
|
||||
return tablesViewService.list(queryWrapper);
|
||||
}
|
||||
}
|
||||
26
src/main/resources/mapper/SyncTablesViewMapper.xml
Normal file
26
src/main/resources/mapper/SyncTablesViewMapper.xml
Normal file
@@ -0,0 +1,26 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
|
||||
<mapper namespace="com.mini.capi.biz.mapper.SyncTablesViewMapper">
|
||||
|
||||
<!-- 通用查询映射结果 -->
|
||||
<resultMap id="BaseResultMap" type="com.mini.capi.biz.domain.SyncTablesView">
|
||||
<result column="create_time" property="createTime" />
|
||||
<result column="task_id" property="taskId" />
|
||||
<result column="task_name" property="taskName" />
|
||||
<result column="source_db_id" property="sourceDbId" />
|
||||
<result column="source_table" property="sourceTable" />
|
||||
<result column="target_table" property="targetTable" />
|
||||
<result column="is_active" property="isActive" />
|
||||
<result column="last_sync_time" property="lastSyncTime" />
|
||||
<result column="update_time" property="updateTime" />
|
||||
<result column="db_type" property="dbType" />
|
||||
<result column="db_id" property="dbId" />
|
||||
<result column="success_rows" property="successRows" />
|
||||
</resultMap>
|
||||
|
||||
<!-- 通用查询结果列 -->
|
||||
<sql id="Base_Column_List">
|
||||
create_time, task_id, task_name, source_db_id, source_table, target_table, is_active, last_sync_time, update_time, db_type, db_id, success_rows
|
||||
</sql>
|
||||
|
||||
</mapper>
|
||||
@@ -6,6 +6,12 @@
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
|
||||
<link rel="stylesheet" href="./assets/css/login-style.css">
|
||||
<title>cApi登录</title>
|
||||
<script>
|
||||
/* 如果当前窗口不是顶层窗口，就让顶层窗口跳转到登录页 */
|
||||
if (window.top !== window) {
|
||||
window.top.location.href = location.href;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 左侧品牌区域 -->
|
||||
|
||||
180
src/main/resources/static/views/data/baklist.html
Normal file
180
src/main/resources/static/views/data/baklist.html
Normal file
@@ -0,0 +1,180 @@
|
||||
<!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 type="text/tailwindcss">
|
||||
@layer utilities {
|
||||
.content-auto { content-visibility: auto; }
|
||||
.card-hover { transition: all .3s ease; }
|
||||
.card-hover:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
|
||||
}
|
||||
}
|
||||
</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 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>MySQL</option><option>PostgreSQL</option><option>Oracle</option><option>MongoDB</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 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 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 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">3</span>
|
||||
<span class="text-gray-500 text-sm">个对象</span>
|
||||
</div>
|
||||
|
||||
<!-- 表列表 -->
|
||||
<div class="space-y-6 mt-6" id="tableList">
|
||||
<!-- 卡片 1 -->
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
|
||||
<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="openDetail()">ads_ghgsah_shjahsajs_shahsajs_01</h3>
|
||||
<p class="text-gray-500 text-sm mt-1">表说明: 系统表</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">MySQL</p></div>
|
||||
<div><p class="text-gray-500">更新时间</p><p class="font-medium">2024-09-10 12:32:34</p></div>
|
||||
<div><p class="text-gray-500">访问时间</p><p class="font-medium">2024-09-10 13:22:02</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<div class="text-gray-600"><span class="font-medium">存储量:</span> 20G</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="bg-blue-50 hover:bg-blue-100 text-primary py-2 px-4 rounded-lg text-sm" onclick="window.location.href='apply-permission.html'">申请权限</button>
|
||||
<button class="bg-gray-100 hover:bg-gray-200 text-gray-700 py-2 px-4 rounded-lg text-sm" onclick="dataSc(this)"><i class="fa fa-star-o mr-1"></i> 收藏</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 详情对话框 -->
|
||||
<div id="detailMask" class="fixed inset-0 bg-black/40 z-40 hidden flex items-center justify-center">
|
||||
<div class="bg-white rounded-xl shadow-2xl w-4/5 h-4/5 max-w-full max-h-full flex flex-col">
|
||||
<div class="flex items-center justify-between px-6 py-4 border-b">
|
||||
<h2 class="text-xl font-semibold text-gray-800">表详情</h2>
|
||||
<button onclick="closeDetail()" class="text-gray-500 hover:text-primary"><i class="fa fa-times text-xl"></i></button>
|
||||
</div>
|
||||
<div class="flex-1 overflow-auto p-6">
|
||||
<iframe id="detailFrame" src="detail.html" class="w-full h-full rounded-md border-0"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* ===== 收藏 ===== */
|
||||
function dataSc(btn) {
|
||||
const icon = btn.querySelector('i'), txt = btn.childNodes[2];
|
||||
const isFav = txt.textContent.trim() === '已收藏';
|
||||
if (!isFav) {
|
||||
icon.className = 'fa fa-star mr-1 text-yellow-400';
|
||||
txt.textContent = ' 已收藏';
|
||||
btn.className = 'bg-yellow-50 hover:bg-yellow-100 text-yellow-600 py-2 px-4 rounded-lg text-sm';
|
||||
showToast('收藏成功');
|
||||
} else {
|
||||
icon.className = 'fa fa-star-o mr-1';
|
||||
txt.textContent = ' 收藏';
|
||||
btn.className = 'bg-gray-100 hover:bg-gray-200 text-gray-700 py-2 px-4 rounded-lg text-sm';
|
||||
showToast('已取消收藏');
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 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 translate-y-10 opacity-0 transition-all duration-300 z-50';
|
||||
t.textContent = msg;
|
||||
document.body.appendChild(t);
|
||||
setTimeout(() => t.classList.remove('translate-y-10', 'opacity-0'), 10);
|
||||
setTimeout(() => {
|
||||
t.classList.add('translate-y-10', 'opacity-0');
|
||||
setTimeout(() => t.remove(), 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
/* ===== 对话框 ===== */
|
||||
function openDetail() {
|
||||
const mask = document.getElementById('detailMask');
|
||||
mask.classList.remove('hidden');
|
||||
mask.onclick = e => { if (e.target === mask) closeDetail(); };
|
||||
}
|
||||
function closeDetail() {
|
||||
document.getElementById('detailMask').classList.add('hidden');
|
||||
}
|
||||
|
||||
/* ===== 无限加载 ===== */
|
||||
let loading = false;
|
||||
function loadMore() {
|
||||
if (loading) return;
|
||||
loading = true;
|
||||
setTimeout(() => {
|
||||
const list = document.getElementById('tableList');
|
||||
const card = baklist.children[0].cloneNode(true);
|
||||
// 重置收藏
|
||||
const btn = card.querySelector('button:last-child');
|
||||
btn.innerHTML = '<i class="fa fa-star-o mr-1"></i> 收藏';
|
||||
btn.className = 'bg-gray-100 hover:bg-gray-200 text-gray-700 py-2 px-4 rounded-lg text-sm';
|
||||
btn.onclick = () => dataSc(btn);
|
||||
card.querySelector('h3').onclick = openDetail;
|
||||
baklist.appendChild(card);
|
||||
loading = false;
|
||||
showToast('已加载更多表数据');
|
||||
document.getElementById('totalCount').textContent = baklist.children.length;
|
||||
}, 800);
|
||||
}
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100) loadMore();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
449
src/main/resources/static/views/data/detail.html
Normal file
449
src/main/resources/static/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>
|
||||
189
src/main/resources/static/views/data/list.html
Normal file
189
src/main/resources/static/views/data/list.html
Normal 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>
|
||||
Reference in New Issue
Block a user