API数据表更新
This commit is contained in:
@@ -1,77 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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>
|
||||
<!-- 左侧品牌区域 -->
|
||||
<div class="brand-side">
|
||||
<div class="brand-icon">
|
||||
<i class="bi bi-shield-lock" style="color: #ecf0f1;"></i>
|
||||
<i class="bi bi-key" style="color: #2ecc71;"></i>
|
||||
<i class="bi bi-server" style="color: #1abc9c;"></i>
|
||||
</div>
|
||||
<div class="brand-title-group">
|
||||
<h1>cApi管理系统</h1>
|
||||
<div class="brand-divider"></div>
|
||||
<p>安全、高效的一站式管理解决方案，为您的业务保驾护航</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧登录容器：固定宽度，避免变形 -->
|
||||
<div class="login-container">
|
||||
<div class="login-header">
|
||||
<h2>系统登录</h2>
|
||||
</div>
|
||||
<form class="login-form" onsubmit="return handleLogin(event)">
|
||||
<!-- 用户名输入组：结构扁平化，避免嵌套冲突 -->
|
||||
<div class="form-group">
|
||||
<label for="username">
|
||||
账户
|
||||
<span class="required-mark">*</span>
|
||||
</label>
|
||||
<!-- 输入框容器：仅包裹输入框+功能按钮，固定定位规则 -->
|
||||
<div class="input-group">
|
||||
<input type="text" id="username" placeholder="请输入用户名" required>
|
||||
<i class="bi bi-person input-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 密码输入组：同用户名结构，保持一致性 -->
|
||||
<div class="form-group">
|
||||
<label for="password">
|
||||
密码
|
||||
<span class="required-mark">*</span>
|
||||
</label>
|
||||
<div class="input-group">
|
||||
<input type="password" id="password" placeholder="请输入密码" required>
|
||||
<i class="bi bi-lock input-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-login">登录</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- 错误提示弹窗：固定层级，避免被遮挡 -->
|
||||
<div class="modal" id="errorModal">
|
||||
<div class="modal-content">
|
||||
<i class="bi bi-exclamation-circle icon"></i>
|
||||
<p id="errorMsg"></p>
|
||||
<button onclick="closeModal()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./assets/js/login-script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,180 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,449 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,189 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,510 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>智能化管理系统</title>
|
||||
<!-- 引入Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- 引入Font Awesome图标库 -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||||
|
||||
<!-- 配置Tailwind自定义颜色 -->
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#165DFF',
|
||||
secondary: '#0FC6C2',
|
||||
neutral: '#F5F7FA',
|
||||
dark: '#1D2129',
|
||||
light: '#F2F3F5'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style type="text/tailwindcss">
|
||||
@layer utilities {
|
||||
.content-auto {
|
||||
content-visibility: auto;
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
@apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
@apply flex items-center gap-2 px-4 py-3 rounded-lg cursor-pointer transition-all duration-200;
|
||||
}
|
||||
|
||||
.menu-item-active {
|
||||
@apply bg-primary/10 text-primary font-medium;
|
||||
}
|
||||
|
||||
.menu-item-inactive {
|
||||
@apply hover:bg-light;
|
||||
}
|
||||
|
||||
.modal-enter {
|
||||
animation: fadeIn 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
.modal-exit {
|
||||
animation: fadeOut 0.3s ease-in forwards;
|
||||
}
|
||||
|
||||
.tab-active {
|
||||
@apply bg-white text-primary border-b-2 border-primary;
|
||||
}
|
||||
|
||||
.tab-inactive {
|
||||
@apply bg-gray-100 text-gray-600 hover:bg-gray-200;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px) scale(0.98);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px) scale(0.98);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-neutral min-h-screen font-sans text-dark overflow-x-hidden">
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="bg-gradient-to-r from-blue-100 to-sky-200 shadow-sm sticky top-0 z-40 h-16">
|
||||
<div class="flex items-center h-full px-6">
|
||||
<!-- 1. 系统 Logo + 名称：最左侧固定 -->
|
||||
<div class="flex items-center space-x-3 flex-shrink-0">
|
||||
<div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
|
||||
<i class="fa fa-cubes text-white text-xl"></i>
|
||||
</div>
|
||||
<h1 class="text-xl font-bold whitespace-nowrap">智能管理平台</h1>
|
||||
</div>
|
||||
|
||||
<!-- 2. 模块导航：中间自适应 -->
|
||||
<nav class="flex-1 flex justify-center items-center space-x-1" id="moduleContainer">
|
||||
<!-- 动态加载的模块 -->
|
||||
<div class="menu-item menu-item-inactive" id="loadingModules">
|
||||
<i class="fa fa-spinner fa-spin text-lg"></i>
|
||||
<span>加载模块中...</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 3. 用户信息：最右侧固定 -->
|
||||
<div class="relative flex-shrink-0" id="adminContainer">
|
||||
<div class="menu-item menu-item-inactive flex items-center cursor-pointer">
|
||||
<i class="fa fa-user-circle text-xl"></i>
|
||||
<span class="ml-2">加载用户中...</span>
|
||||
<i class="fa fa-angle-down ml-1"></i>
|
||||
</div>
|
||||
|
||||
<!-- 下拉菜单内容 -->
|
||||
<div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 hidden z-50 border border-gray-100" id="adminMenu">
|
||||
<a href="#" id="logoutBtn" class="flex items-center gap-2 px-4 py-2 text-sm hover:bg-light transition-colors duration-200">
|
||||
<i class="fa fa-sign-out text-gray-500"></i>
|
||||
<span>退出系统</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 标签栏 -->
|
||||
<div class="bg-gradient-to-r from-blue-50 to-sky-100 border-b">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1 flex items-center space-x-1 px-4" id="tabContainer">
|
||||
<!-- 默认显示控制台标签 -->
|
||||
<div class="tab-active px-4 py-2 cursor-pointer flex items-center space-x-2" data-tab-id="console">
|
||||
<span>控制台</span>
|
||||
<i class="fa fa-home"></i>
|
||||
</div>
|
||||
</div>
|
||||
<button id="closeAllTabs" class="px-4 py-2 text-red-600 hover:bg-red-50 transition-colors">
|
||||
<i class="fa fa-times-circle"></i> 关闭全部
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="flex-1 bg-white">
|
||||
<div class="h-full">
|
||||
<iframe id="contentFrame" src="home" class="w-full h-[calc(100vh-120px)] border-0"></iframe>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 弹窗背景遮罩 -->
|
||||
<div id="modalOverlay" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden opacity-0 transition-opacity duration-300"></div>
|
||||
|
||||
<!-- 动态菜单弹窗 -->
|
||||
<div id="dynamicModal" class="fixed bg-white rounded-xl shadow-xl z-50 hidden" style="width: 70%; left: 15%; top: 10%;">
|
||||
<div class="p-6 border-b flex justify-between items-center">
|
||||
<h3 class="text-lg font-semibold flex items-center" id="modalTitle">
|
||||
<i class="modal-icon fa text-primary mr-2"></i>
|
||||
<span id="modalModuleName"></span>
|
||||
</h3>
|
||||
<button class="modal-close text-gray-400 hover:text-gray-600">
|
||||
<i class="fa fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-6" id="menuContainer">
|
||||
<!-- 菜单将在这里动态加载 -->
|
||||
<div class="flex justify-center items-center h-40">
|
||||
<i class="fa fa-spinner fa-spin text-2xl text-gray-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 退出确认弹窗 -->
|
||||
<div id="logoutModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-[60] hidden flex items-center justify-center">
|
||||
<div class="bg-white rounded-xl shadow-xl w-96 p-6">
|
||||
<h3 class="text-lg font-semibold mb-4 flex items-center">
|
||||
<i class="fa fa-exclamation-triangle text-yellow-500 mr-2"></i>
|
||||
确认退出
|
||||
</h3>
|
||||
<p class="text-gray-600 mb-6">您确定要退出系统吗？</p>
|
||||
<div class="flex justify-end space-x-3">
|
||||
<button id="cancelLogout" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
|
||||
取消
|
||||
</button>
|
||||
<button id="confirmLogout" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
|
||||
确认退出
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 模拟API请求函数
|
||||
const api = {
|
||||
getModules: () =>
|
||||
fetch('Sys/login/modules').then(res => res.json()),
|
||||
|
||||
getMenusByModuleCode: (moduleCode) =>
|
||||
fetch(`Sys/login/menus?moduleCode=${moduleCode}`).then(res => res.json()),
|
||||
|
||||
getCurrentUser: () =>
|
||||
fetch('Sys/login/me').then(res => res.json())
|
||||
};
|
||||
|
||||
// 标签管理
|
||||
let tabs = [
|
||||
{ id: 'console', name: '控制台', url: 'home', closable: false }
|
||||
];
|
||||
let activeTabId = 'console';
|
||||
|
||||
// 页面逻辑
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const moduleContainer = document.getElementById('moduleContainer');
|
||||
const adminContainer = document.getElementById('adminContainer');
|
||||
const menuContainer = document.getElementById('menuContainer');
|
||||
const modalTitle = document.getElementById('modalTitle');
|
||||
const modalModuleName = document.getElementById('modalModuleName');
|
||||
const modalIcon = document.querySelector('.modal-icon');
|
||||
const dynamicModal = document.getElementById('dynamicModal');
|
||||
const modalOverlay = document.getElementById('modalOverlay');
|
||||
const modalCloseButtons = document.querySelectorAll('.modal-close');
|
||||
const tabContainer = document.getElementById('tabContainer');
|
||||
const contentFrame = document.getElementById('contentFrame');
|
||||
const closeAllTabsBtn = document.getElementById('closeAllTabs');
|
||||
const logoutBtn = document.getElementById('logoutBtn');
|
||||
const logoutModal = document.getElementById('logoutModal');
|
||||
const cancelLogout = document.getElementById('cancelLogout');
|
||||
const confirmLogout = document.getElementById('confirmLogout');
|
||||
|
||||
// 加载模块列表
|
||||
loadModules();
|
||||
|
||||
// 加载当前用户信息
|
||||
loadCurrentUser();
|
||||
|
||||
// 关闭全部标签页事件
|
||||
closeAllTabsBtn.addEventListener('click', closeAllTabs);
|
||||
|
||||
// 退出系统相关事件
|
||||
logoutBtn.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
document.getElementById('adminMenu').classList.add('hidden');
|
||||
logoutModal.classList.remove('hidden');
|
||||
});
|
||||
|
||||
cancelLogout.addEventListener('click', function() {
|
||||
logoutModal.classList.add('hidden');
|
||||
});
|
||||
|
||||
confirmLogout.addEventListener('click', function() {
|
||||
window.location.href = '/logout';
|
||||
});
|
||||
|
||||
async function loadModules() {
|
||||
try {
|
||||
const modules = await api.getModules();
|
||||
moduleContainer.innerHTML = '';
|
||||
|
||||
modules.forEach(module => {
|
||||
const moduleElement = document.createElement('div');
|
||||
moduleElement.className = 'menu-item menu-item-inactive';
|
||||
moduleElement.setAttribute('data-module-code', module.moduleCode);
|
||||
moduleElement.setAttribute('data-module-name', module.moduleName);
|
||||
moduleElement.setAttribute('data-module-icon', module.cicon);
|
||||
|
||||
moduleElement.innerHTML = `
|
||||
<i class="fa ${module.cicon} text-lg"></i>
|
||||
<span>${module.moduleName}</span>
|
||||
`;
|
||||
|
||||
moduleElement.addEventListener('click', function () {
|
||||
const moduleCode = this.getAttribute('data-module-code');
|
||||
const moduleName = this.getAttribute('data-module-name');
|
||||
const moduleIcon = this.getAttribute('data-module-icon');
|
||||
showModuleMenus(moduleCode, moduleName, moduleIcon, this);
|
||||
});
|
||||
|
||||
moduleContainer.appendChild(moduleElement);
|
||||
});
|
||||
} catch (error) {
|
||||
moduleContainer.innerHTML = `
|
||||
<div class="menu-item menu-item-inactive text-red-500">
|
||||
<i class="fa fa-exclamation-circle text-lg"></i>
|
||||
<span>模块加载失败</span>
|
||||
</div>
|
||||
`;
|
||||
console.error('加载模块失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadCurrentUser() {
|
||||
try {
|
||||
const user = await api.getCurrentUser();
|
||||
|
||||
adminContainer.innerHTML = `
|
||||
<div class="menu-item menu-item-inactive flex items-center justify-end cursor-pointer" id="adminUser">
|
||||
<i class="fa fa-user-circle text-xl"></i>
|
||||
<span class="ml-2">${user.uname}</span>
|
||||
<i class="fa fa-angle-down ml-1"></i>
|
||||
</div>
|
||||
|
||||
<div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 hidden z-50 border border-gray-100" id="adminMenu">
|
||||
<a href="#" id="logoutBtn" class="flex items-center gap-2 px-4 py-2 text-sm hover:bg-light transition-colors duration-200">
|
||||
<i class="fa fa-sign-out text-gray-300"></i>
|
||||
<span>退出系统</span>
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const adminUser = document.getElementById('adminUser');
|
||||
const adminMenu = document.getElementById('adminMenu');
|
||||
const newLogoutBtn = document.getElementById('logoutBtn');
|
||||
|
||||
adminUser.addEventListener('click', function (e) {
|
||||
e.stopPropagation();
|
||||
adminMenu.classList.toggle('hidden');
|
||||
});
|
||||
|
||||
newLogoutBtn.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
adminMenu.classList.add('hidden');
|
||||
logoutModal.classList.remove('hidden');
|
||||
});
|
||||
} catch (error) {
|
||||
adminContainer.innerHTML = `
|
||||
<div class="menu-item menu-item-inactive flex items-center justify-end text-red-500">
|
||||
<i class="fa fa-user-circle text-xl"></i>
|
||||
<span class="ml-2">用户信息加载失败</span>
|
||||
<i class="fa fa-angle-down ml-1"></i>
|
||||
</div>
|
||||
`;
|
||||
console.error('加载用户信息失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function showModuleMenus(moduleCode, moduleName, moduleIcon, menuItemElement) {
|
||||
try {
|
||||
modalModuleName.textContent = `${moduleName}菜单`;
|
||||
modalIcon.className = `modal-icon fa ${moduleIcon} text-primary mr-2`;
|
||||
|
||||
menuContainer.innerHTML = `
|
||||
<div class="flex justify-center items-center h-40">
|
||||
<i class="fa fa-spinner fa-spin text-2xl text-gray-400"></i>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const menus = await api.getMenusByModuleCode(moduleCode);
|
||||
|
||||
if (menus.length > 0) {
|
||||
let menuHtml = '<div class="grid grid-cols-3 gap-4">';
|
||||
|
||||
menus.forEach(menu => {
|
||||
menuHtml += `
|
||||
<button class="flex flex-col items-center justify-center p-4 border border-gray-100 rounded-lg hover:border-primary hover:bg-primary/5 transition-colors"
|
||||
onclick="openTab('${menu.menuCode}', '${menu.menuName}', '${menu.chref}')">
|
||||
<i class="fa ${menu.cicon} text-primary text-2xl mb-2"></i>
|
||||
<span>${menu.menuName}</span>
|
||||
</button>
|
||||
`;
|
||||
});
|
||||
|
||||
menuHtml += '</div>';
|
||||
menuContainer.innerHTML = menuHtml;
|
||||
} else {
|
||||
menuContainer.innerHTML = `
|
||||
<div class="flex flex-col justify-center items-center h-40 text-gray-500">
|
||||
<i class="fa fa-folder-open-o text-3xl mb-2"></i>
|
||||
<p>该模块暂无菜单</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
document.querySelectorAll('.menu-item').forEach(item => {
|
||||
item.classList.remove('menu-item-active');
|
||||
item.classList.add('menu-item-inactive');
|
||||
});
|
||||
menuItemElement.classList.remove('menu-item-inactive');
|
||||
menuItemElement.classList.add('menu-item-active');
|
||||
|
||||
dynamicModal.classList.remove('hidden');
|
||||
dynamicModal.classList.add('modal-enter');
|
||||
modalOverlay.classList.remove('hidden');
|
||||
|
||||
setTimeout(() => {
|
||||
modalOverlay.style.opacity = '1';
|
||||
}, 10);
|
||||
|
||||
document.body.style.overflow = 'hidden';
|
||||
} catch (error) {
|
||||
menuContainer.innerHTML = `
|
||||
<div class="flex flex-col justify-center items-center h-40 text-red-500">
|
||||
<i class="fa fa-exclamation-circle text-3xl mb-2"></i>
|
||||
<p>菜单加载失败</p>
|
||||
</div>
|
||||
`;
|
||||
console.error('加载菜单失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function openTab(id, name, url) {
|
||||
// 检查是否已存在该标签
|
||||
const existingTab = tabs.find(tab => tab.id === id);
|
||||
if (existingTab) {
|
||||
switchTab(id);
|
||||
} else {
|
||||
// 添加新标签
|
||||
tabs.push({ id, name, url, closable: true });
|
||||
renderTabs();
|
||||
switchTab(id);
|
||||
}
|
||||
closeModal();
|
||||
}
|
||||
|
||||
function renderTabs() {
|
||||
tabContainer.innerHTML = '';
|
||||
tabs.forEach(tab => {
|
||||
const tabElement = document.createElement('div');
|
||||
tabElement.className = `px-4 py-2 cursor-pointer flex items-center space-x-2 border-b-2 transition-colors ${
|
||||
tab.id === activeTabId ? 'bg-white text-primary border-primary' : 'bg-gray-100 text-gray-600 hover:bg-gray-200 border-transparent'
|
||||
}`;
|
||||
tabElement.setAttribute('data-tab-id', tab.id);
|
||||
|
||||
tabElement.innerHTML = `
|
||||
<span>${tab.name}</span>
|
||||
${tab.closable ? `<i class="fa fa-times text-xs hover:bg-red-100 hover:text-red-600 rounded-full p-1" onclick="event.stopPropagation(); closeTab('${tab.id}')"></i>` : `<i class="fa fa-home"></i>`}
|
||||
`;
|
||||
|
||||
tabElement.addEventListener('click', () => switchTab(tab.id));
|
||||
tabContainer.appendChild(tabElement);
|
||||
});
|
||||
}
|
||||
|
||||
function switchTab(id) {
|
||||
activeTabId = id;
|
||||
const activeTab = tabs.find(tab => tab.id === id);
|
||||
if (activeTab) {
|
||||
contentFrame.src = activeTab.url;
|
||||
renderTabs();
|
||||
}
|
||||
}
|
||||
|
||||
function closeTab(id) {
|
||||
if (id === 'console') return; // 控制台不能关闭
|
||||
|
||||
const tabIndex = tabs.findIndex(tab => tab.id === id);
|
||||
if (tabIndex !== -1) {
|
||||
tabs.splice(tabIndex, 1);
|
||||
|
||||
if (activeTabId === id) {
|
||||
// 如果关闭的是当前标签，切换到控制台
|
||||
activeTabId = 'console';
|
||||
contentFrame.src = 'home';
|
||||
}
|
||||
|
||||
renderTabs();
|
||||
}
|
||||
}
|
||||
|
||||
function closeAllTabs() {
|
||||
tabs = tabs.filter(tab => tab.id === 'console');
|
||||
activeTabId = 'console';
|
||||
contentFrame.src = 'home';
|
||||
renderTabs();
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
dynamicModal.classList.add('hidden');
|
||||
dynamicModal.classList.remove('modal-enter');
|
||||
modalOverlay.classList.add('hidden');
|
||||
modalOverlay.style.opacity = '0';
|
||||
document.body.style.overflow = 'auto';
|
||||
|
||||
// 移除所有模块的激活状态
|
||||
document.querySelectorAll('.menu-item').forEach(item => {
|
||||
item.classList.remove('menu-item-active');
|
||||
item.classList.add('menu-item-inactive');
|
||||
});
|
||||
}
|
||||
|
||||
// 将函数暴露到全局作用域
|
||||
window.openTab = openTab;
|
||||
window.closeTab = closeTab;
|
||||
|
||||
// 弹窗关闭事件
|
||||
modalCloseButtons.forEach(button => {
|
||||
button.addEventListener('click', closeModal);
|
||||
});
|
||||
|
||||
modalOverlay.addEventListener('click', closeModal);
|
||||
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeModal();
|
||||
logoutModal.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// 下拉菜单关闭事件
|
||||
document.addEventListener('click', function () {
|
||||
const adminMenu = document.getElementById('adminMenu');
|
||||
if (adminMenu) {
|
||||
adminMenu.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,10 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user