feat: 飞书单点登录和通知功能
This commit is contained in:
@@ -107,10 +107,14 @@
|
||||
</head>
|
||||
|
||||
<body class="min-h-screen bg-slate-50 text-slate-900">
|
||||
<div class="flex">
|
||||
<div class="flex relative">
|
||||
<!-- 移动端遮罩 -->
|
||||
<div id="sidebar-overlay" onclick="toggleSidebar()"
|
||||
class="fixed inset-0 bg-gray-900/50 z-20 hidden transition-opacity opacity-0"></div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<div
|
||||
class="w-64 bg-slate-900 text-slate-300 flex flex-col h-screen fixed left-0 top-0 border-r border-slate-800">
|
||||
<div id="sidebar"
|
||||
class="w-64 bg-slate-900 text-slate-300 flex flex-col h-screen fixed left-0 top-0 border-r border-slate-800 z-30 transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out">
|
||||
<div class="h-16 flex items-center px-6 border-b border-slate-800 bg-slate-950">
|
||||
<svg class="w-6 h-6 text-indigo-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
@@ -147,6 +151,24 @@
|
||||
</svg>
|
||||
映射配置
|
||||
</button>
|
||||
<button onclick="switchTab('lark')" id="tab-lark"
|
||||
class="tab-btn w-full flex items-center px-3 py-2.5 text-sm font-medium rounded-md transition-colors duration-150 group">
|
||||
<svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9">
|
||||
</path>
|
||||
</svg>
|
||||
飞书提醒
|
||||
</button>
|
||||
<button onclick="switchTab('guide')" id="tab-guide"
|
||||
class="tab-btn w-full flex items-center px-3 py-2.5 text-sm font-medium rounded-md transition-colors duration-150 group">
|
||||
<svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
|
||||
</path>
|
||||
</svg>
|
||||
使用指南
|
||||
</button>
|
||||
<button onclick="switchTab('settings')" id="tab-settings"
|
||||
class="tab-btn w-full flex items-center px-3 py-2.5 text-sm font-medium rounded-md transition-colors duration-150 group">
|
||||
<svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -158,15 +180,6 @@
|
||||
</svg>
|
||||
系统设置
|
||||
</button>
|
||||
<button onclick="switchTab('guide')" id="tab-guide"
|
||||
class="tab-btn w-full flex items-center px-3 py-2.5 text-sm font-medium rounded-md transition-colors duration-150 group">
|
||||
<svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
|
||||
</path>
|
||||
</svg>
|
||||
使用指南
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div class="p-4 border-t border-slate-800">
|
||||
@@ -178,15 +191,28 @@
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="flex-1 ml-64 p-8 overflow-y-auto">
|
||||
<main class="flex-1 ml-0 md:ml-64 p-4 md:p-8 overflow-y-auto w-full">
|
||||
<!-- 移动端顶部导航 -->
|
||||
<div class="md:hidden flex items-center justify-between mb-6">
|
||||
<button onclick="toggleSidebar()" class="p-2 -ml-2 text-slate-600 hover:bg-slate-100 rounded-md">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<span class="font-bold text-slate-900">TaskBot控制台</span>
|
||||
<div class="w-8"></div> <!-- 占位保持居中 -->
|
||||
</div>
|
||||
|
||||
<!-- Dashboard 标签页 -->
|
||||
<div id="content-dashboard" class="tab-content">
|
||||
<header class="mb-8 flex justify-between items-end">
|
||||
<header class="mb-6 md:mb-8 flex flex-col md:flex-row md:justify-between md:items-end gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-slate-900 tracking-tight">运维概览</h1>
|
||||
<p class="text-sm text-slate-500 mt-1">Jira-Gitea双向同步机器人控制中心</p>
|
||||
<h1 class="text-xl md:text-2xl font-bold text-slate-900 tracking-tight hidden md:block">运维概览
|
||||
</h1>
|
||||
<p class="text-sm text-slate-500 mt-1 hidden md:block">Jira-Gitea双向同步机器人控制中心</p>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="flex items-center space-x-2 self-end md:self-auto">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-sm font-medium text-slate-600" id="uptime">加载中...</span>
|
||||
</div>
|
||||
@@ -261,9 +287,9 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
<button onclick="controlBot('restart')"
|
||||
class="flex items-center justify-center px-4 py-2 border border-slate-300 text-sm font-medium rounded-md text-slate-700 bg-white hover:bg-slate-50 transition-colors">
|
||||
class="flex items-center justify-center px-4 py-3 md:py-2 border border-slate-300 text-sm font-medium rounded-md text-slate-700 bg-white hover:bg-slate-50 transition-colors">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
|
||||
@@ -272,7 +298,7 @@
|
||||
重启服务
|
||||
</button>
|
||||
<button onclick="clearLogs()"
|
||||
class="flex items-center justify-center px-4 py-2 border border-slate-300 text-sm font-medium rounded-md text-slate-700 bg-white hover:bg-slate-50 transition-colors">
|
||||
class="flex items-center justify-center px-4 py-3 md:py-2 border border-slate-300 text-sm font-medium rounded-md text-slate-700 bg-white hover:bg-slate-50 transition-colors">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
|
||||
@@ -281,7 +307,7 @@
|
||||
清空日志
|
||||
</button>
|
||||
<button onclick="refreshStatus()"
|
||||
class="flex items-center justify-center px-4 py-2 border border-slate-300 text-sm font-medium rounded-md text-slate-700 bg-white hover:bg-slate-50 transition-colors">
|
||||
class="flex items-center justify-center px-4 py-3 md:py-2 border border-slate-300 text-sm font-medium rounded-md text-slate-700 bg-white hover:bg-slate-50 transition-colors">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
|
||||
@@ -414,11 +440,50 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 飞书提醒标签页 -->
|
||||
<div id="content-lark" class="tab-content hidden">
|
||||
<iframe src="/editor/larkReminder.html" class="w-full border-0 rounded-lg shadow-sm bg-white"
|
||||
style="height: calc(100vh - 100px);"></iframe>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="/editor/dashboard-app.js"></script>
|
||||
<script>
|
||||
// 侧边栏切换逻辑
|
||||
function toggleSidebar() {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const overlay = document.getElementById('sidebar-overlay');
|
||||
const isClosed = sidebar.classList.contains('-translate-x-full');
|
||||
|
||||
if (isClosed) {
|
||||
// 打开
|
||||
sidebar.classList.remove('-translate-x-full');
|
||||
overlay.classList.remove('hidden');
|
||||
setTimeout(() => overlay.classList.remove('opacity-0'), 10);
|
||||
} else {
|
||||
// 关闭
|
||||
sidebar.classList.add('-translate-x-full');
|
||||
overlay.classList.add('opacity-0');
|
||||
setTimeout(() => overlay.classList.add('hidden'), 300);
|
||||
}
|
||||
}
|
||||
|
||||
// 覆盖原始 switchTab 以在移动端自动关闭侧边栏
|
||||
const originalSwitchTab = window.switchTab;
|
||||
window.switchTab = function (tabId) {
|
||||
if (originalSwitchTab) originalSwitchTab(tabId);
|
||||
|
||||
// 如果是移动端(屏幕宽度小于 768px),点击后关闭侧边栏
|
||||
if (window.innerWidth < 768) {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
if (!sidebar.classList.contains('-translate-x-full')) {
|
||||
toggleSidebar();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
//默认显示运维概览
|
||||
|
||||
Reference in New Issue
Block a user