sanguo/sanguo_moziplus_v2
8
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
main
sanguo_moziplus_v2/mockups/v27-dashboard.html
T
cfdaily 4448a145be auto-sync: 2026-05-18 00:04:28
2026-05-18 00:04:28 +08:00

652 lines
32 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>moziplus v2.7 - Dashboard</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: {
'court-gold': '#c9a227',
'court-red': '#8b0000',
'court-purple': '#4a1a6b',
'court-blue': '#1a365d',
'court-dark': '#0f0a05',
'court-card': '#1c1510',
'court-border': '#3d2914',
'court-panel': '#15100a',
'court-hover': '#2a1f14',
}
}
}
}
</script>
<style>
* { box-sizing: border-box; }
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
.stage-dot { width: 12px; height: 12px; border-radius: 50%; }
.stage-line { height: 3px; flex: 1; min-width: 20px; }
.card-item { transition: all 0.2s ease; }
.card-item:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(201,162,39,0.15); }
.tab-active { border-bottom: 3px solid #c9a227; color: #c9a227; }
.tab-inactive { border-bottom: 3px solid transparent; color: #a89070; }
.tab-inactive:hover { color: #c9a227; }
.sidebar-item { transition: background 0.15s; }
.sidebar-item:hover { background: #2a1f14; }
.sidebar-item.active { background: #2a1f14; border-left: 3px solid #c9a227; }
.progress-bar { height: 6px; border-radius: 3px; background: #2a1f14; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.mail-row { transition: background 0.15s; }
.mail-row:hover { background: #2a1f14; }
.mail-row.unread { border-left: 3px solid #c9a227; }
.badge { font-size: 11px; padding: 1px 6px; border-radius: 10px; }
.task-row { border-left: 3px solid transparent; transition: all 0.15s; }
.task-row:hover { background: #2a1f14; border-left-color: #c9a227; }
</style>
</head>
<body class="bg-court-dark text-amber-100 min-h-screen">
<!-- 顶部导航 -->
<header class="bg-gradient-to-r from-court-red via-purple-900 to-court-red border-b-2 border-court-gold">
<div class="flex items-center justify-between px-6 py-3">
<div class="flex items-center gap-3">
<span class="text-2xl">🏛️</span>
<h1 class="text-xl font-bold text-amber-300">moziplus v2.7</h1>
<span class="text-amber-600 text-sm ml-2">三级层次结构</span>
</div>
<div class="flex items-center gap-6">
<nav class="flex gap-6">
<button onclick="showTab('dashboard')" id="tab-dashboard" class="tab-active pb-1 text-sm font-medium cursor-pointer">
<i class="fa fa-th-large mr-1"></i> Dashboard
</button>
<button onclick="showTab('mail')" id="tab-mail" class="tab-inactive pb-1 text-sm font-medium cursor-pointer relative">
<i class="fa fa-envelope mr-1"></i> Mail
<span class="absolute -top-1 -right-3 bg-court-red text-white badge">3</span>
</button>
<button onclick="showTab('settings')" id="tab-settings" class="tab-inactive pb-1 text-sm font-medium cursor-pointer">
<i class="fa fa-cog mr-1"></i> 设置
</button>
</nav>
<div class="text-amber-400 text-sm">
👑 主公御览
<span class="ml-2 bg-green-800 text-green-200 badge">系统正常</span>
</div>
</div>
</div>
</header>
<!-- ==================== Dashboard Tab ==================== -->
<div id="page-dashboard" class="flex" style="height: calc(100vh - 56px);">
<!-- 左侧：Project 导航 -->
<aside class="w-56 bg-court-panel border-r border-court-border flex flex-col">
<div class="p-3 border-b border-court-border">
<div class="relative">
<input type="text" placeholder="搜索项目..."
class="w-full bg-court-card border border-court-border rounded px-3 py-1.5 text-sm text-amber-100 placeholder-amber-800 focus:outline-none focus:border-court-gold">
<i class="fa fa-search absolute right-3 top-2 text-amber-700 text-sm"></i>
</div>
</div>
<div class="flex-1 overflow-y-auto p-2">
<!-- General -->
<div class="sidebar-item active rounded px-3 py-2 mb-1 cursor-pointer" onclick="selectProject('general')">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="text-amber-400">📋</span>
<span class="text-sm font-medium">General</span>
</div>
<span class="badge bg-amber-900 text-amber-400">2</span>
</div>
<div class="text-xs text-amber-700 mt-1">一般性任务</div>
</div>
<!-- sanguo_quant_live -->
<div class="sidebar-item rounded px-3 py-2 mb-1 cursor-pointer" onclick="selectProject('quant')">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="text-amber-400">📊</span>
<span class="text-sm font-medium">sanguo_quant_live</span>
</div>
<span class="badge bg-amber-900 text-amber-400">3</span>
</div>
<div class="text-xs text-amber-700 mt-1">量化实战项目</div>
</div>
<!-- sanguo_vnpy -->
<div class="sidebar-item rounded px-3 py-2 mb-1 cursor-pointer" onclick="selectProject('vnpy')">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="text-amber-400">🔧</span>
<span class="text-sm font-medium">sanguo_vnpy</span>
</div>
<span class="badge bg-amber-900 text-amber-400">1</span>
</div>
<div class="text-xs text-amber-700 mt-1">vnpy框架平台</div>
</div>
<!-- sanguo_moziplus_v2 -->
<div class="sidebar-item rounded px-3 py-2 mb-1 cursor-pointer" onclick="selectProject('moziplus')">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="text-amber-400">⚙️</span>
<span class="text-sm font-medium">sanguo_moziplus_v2</span>
</div>
<span class="badge bg-amber-900 text-amber-400">2</span>
</div>
<div class="text-xs text-amber-700 mt-1">AI Native DevOps 平台</div>
</div>
<div class="border-t border-court-border my-2 mx-2"></div>
<!-- 自动发现的项目 -->
<div class="px-3 py-1 text-xs text-amber-800 font-medium uppercase tracking-wider">
自动发现
</div>
<div class="sidebar-item rounded px-3 py-2 mb-1 cursor-pointer opacity-60">
<div class="flex items-center gap-2">
<span class="text-amber-600">📁</span>
<span class="text-sm">sanguo_mail</span>
</div>
<div class="text-xs text-amber-800 mt-1">邮件系统（未激活）</div>
</div>
<div class="sidebar-item rounded px-3 py-2 mb-1 cursor-pointer opacity-60">
<div class="flex items-center gap-2">
<span class="text-amber-600">📁</span>
<span class="text-sm">sanguo_mozi</span>
</div>
<div class="text-xs text-amber-800 mt-1">编排引擎 v1（未激活）</div>
</div>
</div>
<!-- 归档区 -->
<div class="border-t border-court-border p-3">
<div class="sidebar-item rounded px-3 py-2 cursor-pointer text-amber-700 hover:text-amber-500">
<i class="fa fa-archive mr-2"></i>
<span class="text-sm">已归档 (4)</span>
</div>
</div>
</aside>
<!-- 右侧：主内容区 -->
<main class="flex-1 overflow-y-auto">
<!-- Project 头部 -->
<div class="border-b border-court-border p-4">
<div class="flex items-center justify-between">
<div>
<h2 class="text-lg font-bold text-amber-300">📊 sanguo_quant_live</h2>
<p class="text-sm text-amber-600 mt-0.5">量化实战项目 · 3 个 Card · 12 个 Task</p>
</div>
<div class="flex items-center gap-3">
<button class="bg-court-card border border-court-border text-amber-400 px-3 py-1.5 rounded text-sm hover:border-court-gold">
<i class="fa fa-filter mr-1"></i> 筛选
</button>
<button class="bg-court-gold text-court-dark px-4 py-1.5 rounded text-sm font-medium hover:bg-amber-400">
<i class="fa fa-plus mr-1"></i> 新建 Card
</button>
</div>
</div>
</div>
<!-- Card 看板 -->
<div class="p-4">
<!-- Card 1: 动量策略v1 -->
<div class="card-item bg-court-card border border-court-border rounded-lg p-4 mb-4">
<div class="flex items-start justify-between mb-3">
<div class="flex items-center gap-3">
<h3 class="font-bold text-amber-200">🎯 动量策略v1</h3>
<span class="badge bg-blue-900 text-blue-300">strategy</span>
<span class="badge bg-green-900 text-green-300">working</span>
</div>
<div class="flex items-center gap-2 text-sm">
<button class="text-amber-600 hover:text-amber-400"><i class="fa fa-ellipsis-h"></i></button>
</div>
</div>
<!-- Stage 进度条 -->
<div class="bg-court-panel rounded-lg p-3 mb-3">
<div class="flex items-center mb-2">
<span class="text-xs text-amber-500 mr-2">阶段进度</span>
<span class="text-xs text-amber-300 font-medium">3/5 stages</span>
</div>
<div class="flex items-center gap-1">
<!-- Stage: 因子研究 ✅ -->
<div class="flex flex-col items-center" style="min-width: 80px;">
<div class="flex items-center w-full">
<div class="stage-dot bg-green-500"></div>
<div class="stage-line bg-green-500"></div>
</div>
<span class="text-xs text-green-400 mt-1">因子研究</span>
<span class="text-xs text-green-600">2/2 ✅</span>
</div>
<!-- Stage: 策略编码 ✅ -->
<div class="flex flex-col items-center" style="min-width: 80px;">
<div class="flex items-center w-full">
<div class="stage-line bg-green-500"></div>
<div class="stage-dot bg-green-500"></div>
<div class="stage-line bg-green-500"></div>
</div>
<span class="text-xs text-green-400 mt-1">策略编码</span>
<span class="text-xs text-green-600">3/3 ✅</span>
</div>
<!-- Stage: 历史回测 🔄 -->
<div class="flex flex-col items-center" style="min-width: 80px;">
<div class="flex items-center w-full">
<div class="stage-line bg-amber-400"></div>
<div class="stage-dot bg-amber-400 animate-pulse"></div>
<div class="stage-line bg-court-border"></div>
</div>
<span class="text-xs text-amber-300 mt-1 font-medium">历史回测</span>
<span class="text-xs text-amber-500">1/2 进行中</span>
</div>
<!-- Stage: 参数优化 ⬜ -->
<div class="flex flex-col items-center" style="min-width: 80px;">
<div class="flex items-center w-full">
<div class="stage-line bg-court-border"></div>
<div class="stage-dot bg-court-border"></div>
<div class="stage-line bg-court-border"></div>
</div>
<span class="text-xs text-amber-700 mt-1">参数优化</span>
<span class="text-xs text-amber-800">0/0</span>
</div>
<!-- Stage: 模拟盘 ⬜ -->
<div class="flex flex-col items-center" style="min-width: 80px;">
<div class="flex items-center w-full">
<div class="stage-line bg-court-border"></div>
<div class="stage-dot bg-court-border"></div>
</div>
<span class="text-xs text-amber-700 mt-1">模拟盘</span>
<span class="text-xs text-amber-800">0/0</span>
</div>
</div>
</div>
<!-- Task 列表（按 Stage 分组） -->
<div class="space-y-1">
<div class="text-xs text-amber-600 font-medium mb-1 px-2">
<i class="fa fa-circle text-green-500 mr-1" style="font-size:6px"></i> 因子研究 (2/2)
</div>
<div class="task-row flex items-center justify-between px-3 py-1.5 rounded text-sm opacity-60">
<div class="flex items-center gap-2">
<span class="text-green-500">✓</span>
<span>因子筛选分析</span>
<span class="badge bg-court-panel text-amber-600">zhaoyun</span>
</div>
<span class="text-xs text-amber-700">done · 2h</span>
</div>
<div class="task-row flex items-center justify-between px-3 py-1.5 rounded text-sm opacity-60">
<div class="flex items-center gap-2">
<span class="text-green-500">✓</span>
<span>IC/IR 计算</span>
<span class="badge bg-court-panel text-amber-600">zhaoyun</span>
</div>
<span class="text-xs text-amber-700">done · 1h</span>
</div>
<div class="text-xs text-amber-600 font-medium mb-1 mt-2 px-2">
<i class="fa fa-circle text-amber-400 mr-1" style="font-size:6px"></i> 历史回测 (1/2)
</div>
<div class="task-row flex items-center justify-between px-3 py-1.5 rounded text-sm bg-court-panel border-l-amber-400">
<div class="flex items-center gap-2">
<span class="text-amber-400 animate-pulse">●</span>
<span>编写回测脚本</span>
<span class="badge bg-court-panel text-amber-600">zhangfei</span>
</div>
<span class="text-xs text-amber-500">working · 30min</span>
</div>
<div class="task-row flex items-center justify-between px-3 py-1.5 rounded text-sm">
<div class="flex items-center gap-2">
<span class="text-amber-800">○</span>
<span>参数敏感性分析</span>
<span class="badge bg-court-panel text-amber-600">zhangfei</span>
</div>
<span class="text-xs text-amber-700">pending</span>
</div>
</div>
<!-- Card 底部 -->
<div class="flex items-center justify-between mt-3 pt-3 border-t border-court-border">
<div class="flex items-center gap-3 text-xs text-amber-600">
<span><i class="fa fa-tasks mr-1"></i> 7 tasks</span>
<span><i class="fa fa-user mr-1"></i> zhangfei · zhaoyun</span>
<span><i class="fa fa-clock-o mr-1"></i> 创建于 5/15</span>
</div>
<div class="progress-bar" style="width: 120px;">
<div class="progress-fill bg-green-500" style="width: 57%"></div>
</div>
</div>
</div>
<!-- Card 2: 均值回归策略 -->
<div class="card-item bg-court-card border border-court-border rounded-lg p-4 mb-4">
<div class="flex items-start justify-between mb-3">
<div class="flex items-center gap-3">
<h3 class="font-bold text-amber-200">📈 均值回归策略</h3>
<span class="badge bg-blue-900 text-blue-300">strategy</span>
<span class="badge bg-amber-900 text-amber-300">pending</span>
</div>
</div>
<div class="bg-court-panel rounded-lg p-3 mb-3">
<div class="flex items-center mb-2">
<span class="text-xs text-amber-500 mr-2">阶段进度</span>
<span class="text-xs text-amber-300 font-medium">0/4 stages</span>
</div>
<div class="flex items-center gap-1">
<div class="flex flex-col items-center" style="min-width: 80px;">
<div class="flex items-center w-full">
<div class="stage-dot bg-court-border"></div>
<div class="stage-line bg-court-border"></div>
</div>
<span class="text-xs text-amber-700 mt-1">因子研究</span>
<span class="text-xs text-amber-800">0/0</span>
</div>
<div class="flex flex-col items-center" style="min-width: 80px;">
<div class="flex items-center w-full">
<div class="stage-line bg-court-border"></div>
<div class="stage-dot bg-court-border"></div>
<div class="stage-line bg-court-border"></div>
</div>
<span class="text-xs text-amber-700 mt-1">策略编码</span>
<span class="text-xs text-amber-800">0/0</span>
</div>
<div class="flex flex-col items-center" style="min-width: 80px;">
<div class="flex items-center w-full">
<div class="stage-line bg-court-border"></div>
<div class="stage-dot bg-court-border"></div>
<div class="stage-line bg-court-border"></div>
</div>
<span class="text-xs text-amber-700 mt-1">历史回测</span>
<span class="text-xs text-amber-800">0/0</span>
</div>
<div class="flex flex-col items-center" style="min-width: 80px;">
<div class="flex items-center w-full">
<div class="stage-line bg-court-border"></div>
<div class="stage-dot bg-court-border"></div>
</div>
<span class="text-xs text-amber-700 mt-1">模拟盘</span>
<span class="text-xs text-amber-800">0/0</span>
</div>
</div>
</div>
<div class="text-sm text-amber-700 italic">暂无 Task，AI 规划中...</div>
<div class="flex items-center justify-between mt-3 pt-3 border-t border-court-border">
<div class="flex items-center gap-3 text-xs text-amber-600">
<span><i class="fa fa-tasks mr-1"></i> 0 tasks</span>
<span><i class="fa fa-clock-o mr-1"></i> 创建于 5/17</span>
</div>
<div class="progress-bar" style="width: 120px;">
<div class="progress-fill bg-court-border" style="width: 0%"></div>
</div>
</div>
</div>
<!-- Card 3: 日线数据管道 -->
<div class="card-item bg-court-card border border-court-border rounded-lg p-4 mb-4">
<div class="flex items-start justify-between mb-3">
<div class="flex items-center gap-3">
<h3 class="font-bold text-amber-200">🔄 日线数据管道</h3>
<span class="badge bg-purple-900 text-purple-300">data_pipeline</span>
<span class="badge bg-green-900 text-green-300">working</span>
<span class="badge bg-amber-900 text-amber-400">常驻</span>
</div>
</div>
<div class="bg-court-panel rounded-lg p-3 mb-3">
<div class="flex items-center mb-2">
<span class="text-xs text-amber-500 mr-2">阶段进度</span>
<span class="text-xs text-amber-300 font-medium">2/4 stages</span>
</div>
<div class="flex items-center gap-1">
<div class="flex flex-col items-center" style="min-width: 80px;">
<div class="flex items-center w-full">
<div class="stage-dot bg-green-500"></div>
<div class="stage-line bg-green-500"></div>
</div>
<span class="text-xs text-green-400 mt-1">采集</span>
<span class="text-xs text-green-600">1/1 ✅</span>
</div>
<div class="flex flex-col items-center" style="min-width: 80px;">
<div class="flex items-center w-full">
<div class="stage-line bg-amber-400"></div>
<div class="stage-dot bg-amber-400 animate-pulse"></div>
<div class="stage-line bg-court-border"></div>
</div>
<span class="text-xs text-amber-300 mt-1">清洗</span>
<span class="text-xs text-amber-500">0/1 进行中</span>
</div>
<div class="flex flex-col items-center" style="min-width: 80px;">
<div class="flex items-center w-full">
<div class="stage-line bg-court-border"></div>
<div class="stage-dot bg-court-border"></div>
<div class="stage-line bg-court-border"></div>
</div>
<span class="text-xs text-amber-700 mt-1">验证</span>
<span class="text-xs text-amber-800">0/0</span>
</div>
<div class="flex flex-col items-center" style="min-width: 80px;">
<div class="flex items-center w-full">
<div class="stage-line bg-court-border"></div>
<div class="stage-dot bg-court-border"></div>
</div>
<span class="text-xs text-amber-700 mt-1">入库</span>
<span class="text-xs text-amber-800">0/0</span>
</div>
</div>
</div>
<div class="flex items-center justify-between mt-3 pt-3 border-t border-court-border">
<div class="flex items-center gap-3 text-xs text-amber-600">
<span><i class="fa fa-tasks mr-1"></i> 2 tasks</span>
<span><i class="fa fa-user mr-1"></i> zhaoyun</span>
<span><i class="fa fa-clock-o mr-1"></i> 常驻 Card</span>
</div>
<div class="progress-bar" style="width: 120px;">
<div class="progress-fill bg-green-500" style="width: 50%"></div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- ==================== Mail Tab ==================== -->
<div id="page-mail" class="hidden" style="height: calc(100vh - 56px);">
<div class="flex h-full">
<!-- Mail 列表 -->
<div class="w-2/3 border-r border-court-border flex flex-col">
<div class="border-b border-court-border p-4">
<div class="flex items-center justify-between">
<h2 class="text-lg font-bold text-amber-300">
<i class="fa fa-envelope mr-2"></i>Sanguo Mail
</h2>
<div class="flex items-center gap-3">
<select class="bg-court-card border border-court-border text-amber-400 rounded px-2 py-1 text-sm">
<option>全部</option>
<option>未读</option>
<option>已读</option>
<option>已执行</option>
</select>
<button class="bg-court-card border border-court-border text-amber-400 px-3 py-1 rounded text-sm hover:border-court-gold">
<i class="fa fa-refresh mr-1"></i> 刷新
</button>
</div>
</div>
</div>
<div class="flex-1 overflow-y-auto">
<!-- Mail 1: 未读 -->
<div class="mail-row unread flex items-center px-4 py-3 border-b border-court-border cursor-pointer">
<div class="flex-1">
<div class="flex items-center gap-3 mb-1">
<span class="text-sm font-medium text-amber-200">Mail #301</span>
<span class="badge bg-court-gold text-court-dark">未读</span>
<span class="text-xs text-amber-600">23:40</span>
</div>
<div class="flex items-center gap-2 text-sm">
<span class="text-amber-400">从</span>
<span class="badge bg-red-900 text-red-300">main</span>
<span class="text-amber-600">→</span>
<span class="badge bg-purple-900 text-purple-300">pangtong</span>
</div>
<div class="text-sm text-amber-300 mt-1">🔥 主公有令！庞统速来！</div>
</div>
</div>
<!-- Mail 2: 已读 -->
<div class="mail-row flex items-center px-4 py-3 border-b border-court-border cursor-pointer">
<div class="flex-1">
<div class="flex items-center gap-3 mb-1">
<span class="text-sm font-medium text-amber-200">Mail #300</span>
<span class="badge bg-amber-900 text-amber-400">已读</span>
<span class="text-xs text-amber-600">22:45</span>
</div>
<div class="flex items-center gap-2 text-sm">
<span class="text-amber-400">从</span>
<span class="badge bg-purple-900 text-purple-300">pangtong</span>
<span class="text-amber-600">→</span>
<span class="badge bg-green-900 text-green-300">simayi</span>
</div>
<div class="text-sm text-amber-300 mt-1">v2.7 三级层次结构设计文档评审请求</div>
</div>
</div>
<!-- Mail 3: 已执行 -->
<div class="mail-row flex items-center px-4 py-3 border-b border-court-border cursor-pointer">
<div class="flex-1">
<div class="flex items-center gap-3 mb-1">
<span class="text-sm font-medium text-amber-200">Mail #298</span>
<span class="badge bg-green-900 text-green-300">✅ 已执行</span>
<span class="text-xs text-amber-600">21:30</span>
</div>
<div class="flex items-center gap-2 text-sm">
<span class="text-amber-400">从</span>
<span class="badge bg-blue-900 text-blue-300">zhangfei</span>
<span class="text-amber-600">→</span>
<span class="badge bg-purple-900 text-purple-300">pangtong</span>
</div>
<div class="text-sm text-amber-300 mt-1">e2e-rt-002 编码任务已完成</div>
</div>
</div>
<!-- Mail 4: 未读 -->
<div class="mail-row unread flex items-center px-4 py-3 border-b border-court-border cursor-pointer">
<div class="flex-1">
<div class="flex items-center gap-3 mb-1">
<span class="text-sm font-medium text-amber-200">Mail #299</span>
<span class="badge bg-court-gold text-court-dark">未读</span>
<span class="text-xs text-amber-600">22:00</span>
</div>
<div class="flex items-center gap-2 text-sm">
<span class="text-amber-400">从</span>
<span class="badge bg-green-900 text-green-300">simayi</span>
<span class="text-amber-600">→</span>
<span class="badge bg-purple-900 text-purple-300">pangtong</span>
</div>
<div class="text-sm text-amber-300 mt-1">路由方案评审意见（Mail #290 补充）</div>
</div>
</div>
<!-- Mail 5: 已执行 -->
<div class="mail-row flex items-center px-4 py-3 border-b border-court-border cursor-pointer">
<div class="flex-1">
<div class="flex items-center gap-3 mb-1">
<span class="text-sm font-medium text-amber-200">Mail #290</span>
<span class="badge bg-green-900 text-green-300">✅ 已执行</span>
<span class="text-xs text-amber-600">20:15</span>
</div>
<div class="flex items-center gap-2 text-sm">
<span class="text-amber-400">从</span>
<span class="badge bg-green-900 text-green-300">simayi</span>
<span class="text-amber-600">→</span>
<span class="badge bg-purple-900 text-purple-300">pangtong</span>
</div>
<div class="text-sm text-amber-300 mt-1">v2.6.1 路由方案评审通过</div>
</div>
</div>
<!-- Mail 6: 已读 -->
<div class="mail-row flex items-center px-4 py-3 border-b border-court-border cursor-pointer">
<div class="flex-1">
<div class="flex items-center gap-3 mb-1">
<span class="text-sm font-medium text-amber-200">Mail #289</span>
<span class="badge bg-amber-900 text-amber-400">已读</span>
<span class="text-xs text-amber-600">19:30</span>
</div>
<div class="flex items-center gap-2 text-sm">
<span class="text-amber-400">从</span>
<span class="badge bg-green-900 text-green-300">simayi</span>
<span class="text-amber-600">→</span>
<span class="badge bg-purple-900 text-purple-300">pangtong</span>
</div>
<div class="text-sm text-amber-300 mt-1">黑板粒度反馈（6 条意见）</div>
</div>
</div>
</div>
</div>
<!-- Mail 详情 -->
<div class="w-1/3 bg-court-panel flex flex-col">
<div class="border-b border-court-border p-4">
<div class="flex items-center justify-between mb-2">
<span class="text-sm font-medium text-amber-200">Mail #301</span>
<span class="badge bg-court-gold text-court-dark">未读</span>
</div>
<h3 class="font-bold text-amber-200 mb-2">🔥 主公有令！庞统速来！</h3>
<div class="flex items-center gap-2 text-xs text-amber-600 mb-1">
<span class="badge bg-red-900 text-red-300">main</span>
<span>→</span>
<span class="badge bg-purple-900 text-purple-300">pangtong</span>
<span class="ml-2">23:40</span>
</div>
</div>
<div class="flex-1 p-4 overflow-y-auto">
<div class="text-sm text-amber-300 leading-relaxed">
<p>凤雏先生，主公唤你！收到请速回复！报告当前状态！</p>
</div>
</div>
<div class="border-t border-court-border p-3 flex gap-2">
<button class="flex-1 bg-court-gold text-court-dark px-3 py-1.5 rounded text-sm font-medium hover:bg-amber-400">
标记已读
</button>
<button class="flex-1 bg-court-card border border-court-border text-amber-400 px-3 py-1.5 rounded text-sm hover:border-court-gold">
回复
</button>
</div>
</div>
</div>
</div>
<!-- ==================== Settings Tab ==================== -->
<div id="page-settings" class="hidden" style="height: calc(100vh - 56px);">
<div class="p-6">
<h2 class="text-lg font-bold text-amber-300 mb-4">⚙️ 系统设置</h2>
<div class="bg-court-card border border-court-border rounded-lg p-4">
<p class="text-amber-600">设置页面待开发...</p>
</div>
</div>
</div>
<script>
function showTab(tab) {
document.querySelectorAll('[id^="page-"]').forEach(el => el.classList.add('hidden'));
document.querySelectorAll('[id^="tab-"]').forEach(el => {
el.className = el.className.replace('tab-active', 'tab-inactive');
});
document.getElementById('page-' + tab).classList.remove('hidden');
const tabBtn = document.getElementById('tab-' + tab);
tabBtn.className = tabBtn.className.replace('tab-inactive', 'tab-active');
}
function selectProject(id) {
document.querySelectorAll('.sidebar-item').forEach(el => el.classList.remove('active'));
event.currentTarget.classList.add('active');
}
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink