Files
yunbiaoshu/dashboard-professional.html
陈金美 2ccc7c4e8c
Some checks failed
backend-contract-verification / Verify TypeScript build & OpenAPI contracts (push) Has been cancelled
基础资料
2025-11-08 15:48:26 +08:00

783 lines
26 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>智能标书平台 - 控制中心</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg-primary: #0f1419;
--bg-secondary: #1a1f29;
--bg-card: #1e2530;
--bg-hover: #252d3a;
--text-primary: #ffffff;
--text-secondary: #8b92a8;
--text-muted: #5a6072;
--accent-blue: #3b82f6;
--accent-green: #10b981;
--accent-orange: #f59e0b;
--accent-red: #ef4444;
--accent-purple: #8b5cf6;
--border-color: #2a3441;
--shadow: 0 4px 6px -1px rgba(0,0,0,0.5);
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
}
/* 布局容器 */
.app-container {
display: flex;
height: 100vh;
}
/* 侧边栏 */
.sidebar {
width: 80px;
background: var(--bg-secondary);
border-right: 1px solid var(--border-color);
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 0;
transition: width 0.3s;
}
.sidebar:hover {
width: 240px;
}
.logo {
width: 48px;
height: 48px;
background: var(--accent-blue);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40px;
font-weight: bold;
font-size: 20px;
}
.nav-item {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s;
position: relative;
overflow: hidden;
}
.sidebar:hover .nav-item {
width: 200px;
justify-content: flex-start;
padding: 0 20px;
}
.nav-item:hover {
background: var(--bg-hover);
}
.nav-item.active {
background: var(--accent-blue);
}
.nav-icon {
min-width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.nav-text {
display: none;
margin-left: 16px;
white-space: nowrap;
}
.sidebar:hover .nav-text {
display: block;
}
/* 主内容区 */
.main-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* 顶部栏 */
.topbar {
height: 72px;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
padding: 0 32px;
justify-content: space-between;
}
.topbar-left {
display: flex;
align-items: center;
gap: 24px;
}
.page-title {
font-size: 24px;
font-weight: 600;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
color: var(--text-secondary);
font-size: 14px;
}
.topbar-right {
display: flex;
align-items: center;
gap: 20px;
}
.topbar-btn {
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--bg-card);
border: 1px solid var(--border-color);
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
}
.topbar-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.user-info {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
background: var(--bg-card);
border-radius: 10px;
border: 1px solid var(--border-color);
}
.user-avatar {
width: 32px;
height: 32px;
background: var(--accent-blue);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}
/* 内容区域 */
.content {
flex: 1;
padding: 32px;
overflow-y: auto;
}
/* 统计卡片 */
.stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 32px;
}
.stat-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 24px;
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--accent-blue);
}
.stat-card.green::before {
background: var(--accent-green);
}
.stat-card.orange::before {
background: var(--accent-orange);
}
.stat-card.purple::before {
background: var(--accent-purple);
}
.stat-label {
font-size: 12px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
}
.stat-value {
font-size: 32px;
font-weight: 700;
margin-bottom: 8px;
}
.stat-change {
font-size: 12px;
color: var(--accent-green);
}
.stat-change.negative {
color: var(--accent-red);
}
/* 功能区域 */
.section {
margin-bottom: 32px;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.section-title {
font-size: 18px;
font-weight: 600;
display: flex;
align-items: center;
gap: 12px;
}
.section-badge {
padding: 2px 8px;
background: var(--accent-red);
border-radius: 4px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
}
.section-action {
color: var(--accent-blue);
font-size: 14px;
cursor: pointer;
text-decoration: none;
}
/* 功能网格 */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.feature-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 24px;
cursor: pointer;
transition: all 0.3s;
position: relative;
}
.feature-card:hover {
background: var(--bg-hover);
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.feature-card.primary {
border-color: var(--accent-blue);
}
.feature-card.primary .feature-icon {
background: var(--accent-blue);
}
.feature-card.secondary {
border-color: var(--accent-green);
}
.feature-card.secondary .feature-icon {
background: var(--accent-green);
}
.feature-card.warning {
border-color: var(--accent-orange);
}
.feature-card.warning .feature-icon {
background: var(--accent-orange);
}
.feature-card.danger {
border-color: var(--accent-red);
}
.feature-card.danger .feature-icon {
background: var(--accent-red);
}
.feature-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
}
.feature-icon {
width: 48px;
height: 48px;
background: var(--bg-hover);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.feature-badge {
padding: 4px 8px;
background: var(--accent-orange);
color: var(--bg-primary);
border-radius: 4px;
font-size: 10px;
font-weight: 600;
}
.feature-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
}
.feature-desc {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
}
/* 分类筛选 */
.filter-tabs {
display: flex;
gap: 12px;
margin-bottom: 24px;
}
.filter-tab {
padding: 8px 16px;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-secondary);
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
}
.filter-tab:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.filter-tab.active {
background: var(--accent-blue);
color: var(--text-primary);
border-color: var(--accent-blue);
}
/* 滚动条 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
background: var(--bg-hover);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}
</style>
</head>
<body>
<div class="app-container">
<!-- 侧边栏 -->
<aside class="sidebar">
<div class="logo">AI</div>
<div class="nav-item active">
<span class="nav-icon"></span>
<span class="nav-text">控制台</span>
</div>
<div class="nav-item" onclick="location.href='ai-bidding-system-final.html'">
<span class="nav-icon"></span>
<span class="nav-text">AI制标</span>
</div>
<div class="nav-item">
<span class="nav-icon"></span>
<span class="nav-text">项目管理</span>
</div>
<div class="nav-item">
<span class="nav-icon"></span>
<span class="nav-text">模板库</span>
</div>
<div class="nav-item">
<span class="nav-icon"></span>
<span class="nav-text">数据分析</span>
</div>
<div class="nav-item">
<span class="nav-icon"></span>
<span class="nav-text">系统设置</span>
</div>
</aside>
<!-- 主内容 -->
<main class="main-content">
<!-- 顶部栏 -->
<header class="topbar">
<div class="topbar-left">
<h1 class="page-title">控制中心</h1>
<div class="breadcrumb">
<span>首页</span>
<span>/</span>
<span>控制台</span>
</div>
</div>
<div class="topbar-right">
<button class="topbar-btn"></button>
<button class="topbar-btn"></button>
<button class="topbar-btn"></button>
<div class="user-info">
<div class="user-avatar">A</div>
<div>
<div style="font-size: 14px;">Admin</div>
<div style="font-size: 11px; color: var(--text-secondary);">管理员</div>
</div>
</div>
</div>
</header>
<!-- 内容区域 -->
<div class="content">
<!-- 统计数据 -->
<div class="stats-row">
<div class="stat-card">
<div class="stat-label">本月标书</div>
<div class="stat-value">156</div>
<div class="stat-change">↑ 12.5%</div>
</div>
<div class="stat-card green">
<div class="stat-label">中标率</div>
<div class="stat-value">98.5%</div>
<div class="stat-change">↑ 2.3%</div>
</div>
<div class="stat-card orange">
<div class="stat-label">生成时间</div>
<div class="stat-value">8.5<span style="font-size: 16px;">分钟</span></div>
<div class="stat-change">↓ 15.2%</div>
</div>
<div class="stat-card purple">
<div class="stat-label">模板数量</div>
<div class="stat-value">10,680</div>
<div class="stat-change">↑ 680</div>
</div>
</div>
<!-- 核心功能 -->
<section class="section">
<div class="section-header">
<h2 class="section-title">
核心功能
<span class="section-badge">HOT</span>
</h2>
<a href="#" class="section-action">查看全部 →</a>
</div>
<div class="filter-tabs">
<div class="filter-tab active">全部功能</div>
<div class="filter-tab">AI制标</div>
<div class="filter-tab">技术方案</div>
<div class="filter-tab">常用工具</div>
<div class="filter-tab">系统管理</div>
</div>
<div class="features-grid">
<!-- AI智能制标 -->
<div class="feature-card primary" onclick="location.href='ai-bidding-system-final.html'">
<div class="feature-header">
<div class="feature-icon"></div>
<span class="feature-badge">推荐</span>
</div>
<div class="feature-title">AI智能制标</div>
<div class="feature-desc">10分钟生成10万字专业标书支持工程量清单和图纸识别</div>
</div>
<!-- 海量模板库 -->
<div class="feature-card" onclick="location.href='templates.html'">
<div class="feature-header">
<div class="feature-icon"></div>
</div>
<div class="feature-title">海量模板库</div>
<div class="feature-desc">10000+专业模板,覆盖各行业各类型标书</div>
</div>
<!-- 智能编辑器 -->
<div class="feature-card" onclick="location.href='editor.html'">
<div class="feature-header">
<div class="feature-icon"></div>
</div>
<div class="feature-title">智能编辑器</div>
<div class="feature-desc">富文本编辑器,支持格式刷、批注、修订等功能</div>
</div>
<!-- 实时协作 -->
<div class="feature-card" onclick="location.href='realtime-collaboration.html'">
<div class="feature-header">
<div class="feature-icon"></div>
</div>
<div class="feature-title">实时协作</div>
<div class="feature-desc">多人同时编辑,实时同步,高效协同</div>
</div>
<!-- 企业知识库 -->
<div class="feature-card" onclick="location.href='knowledge-base.html'">
<div class="feature-header">
<div class="feature-icon"></div>
</div>
<div class="feature-title">企业知识库</div>
<div class="feature-desc">企业标书知识管理,智能复用历史方案</div>
</div>
<!-- 权限管理 -->
<div class="feature-card" onclick="location.href='permission-system.html'">
<div class="feature-header">
<div class="feature-icon"></div>
</div>
<div class="feature-title">权限管理</div>
<div class="feature-desc">8种角色细粒度控制保障数据安全</div>
</div>
<!-- 按招标文件生成 -->
<div class="feature-card secondary" onclick="generateByTenderDoc()">
<div class="feature-header">
<div class="feature-icon"></div>
<span class="feature-badge">NEW</span>
</div>
<div class="feature-title">按招标文件生成</div>
<div class="feature-desc">上传招标文件,智能解析信息</div>
</div>
<!-- 按评分标准生成 -->
<div class="feature-card secondary" onclick="generateByScoring()">
<div class="feature-header">
<div class="feature-icon"></div>
</div>
<div class="feature-title">按评分标准生成</div>
<div class="feature-desc">提供评分标准,快速定位标评</div>
</div>
<!-- 按已有目录生成 -->
<div class="feature-card warning" onclick="generateByCatalog()">
<div class="feature-header">
<div class="feature-icon"></div>
</div>
<div class="feature-title">按已有目录生成</div>
<div class="feature-desc">手动编写大纲,适配个性需求</div>
</div>
<!-- 按历史标书生成 -->
<div class="feature-card warning" onclick="generateByHistory()">
<div class="feature-header">
<div class="feature-icon"></div>
</div>
<div class="feature-title">按历史标书生成</div>
<div class="feature-desc">复用历史标书,快速生成方案</div>
</div>
<!-- 商务标+技术标 -->
<div class="feature-card" onclick="businessTechBid()">
<div class="feature-header">
<div class="feature-icon"></div>
</div>
<div class="feature-title">商务标+技术标</div>
<div class="feature-desc">商务无缝对接技术方案</div>
</div>
<!-- 标书改写 -->
<div class="feature-card" onclick="bidRewrite()">
<div class="feature-header">
<div class="feature-icon"></div>
</div>
<div class="feature-title">标书改写</div>
<div class="feature-desc">创新表达,重新内容</div>
</div>
<!-- 标书扩写 -->
<div class="feature-card" onclick="bidExpansion()">
<div class="feature-header">
<div class="feature-icon"></div>
</div>
<div class="feature-title">标书扩写</div>
<div class="feature-desc">快速丰富,充实内容</div>
</div>
<!-- 标书查重 -->
<div class="feature-card" onclick="bidDuplicateCheck()">
<div class="feature-header">
<div class="feature-icon"></div>
</div>
<div class="feature-title">标书查重</div>
<div class="feature-desc">避免检测,确保合规</div>
</div>
<!-- 横道图 -->
<div class="feature-card" onclick="ganttChart()">
<div class="feature-header">
<div class="feature-icon"></div>
</div>
<div class="feature-title">横道图</div>
<div class="feature-desc">工程进度,横道图表</div>
</div>
<!-- 招标解析 -->
<div class="feature-card" onclick="tenderAnalysis()">
<div class="feature-header">
<div class="feature-icon"></div>
</div>
<div class="feature-title">招标解析</div>
<div class="feature-desc">精准解读,一键提取</div>
</div>
<!-- 偏离表 -->
<div class="feature-card" onclick="deviationTable()">
<div class="feature-header">
<div class="feature-icon"></div>
</div>
<div class="feature-title">偏离表</div>
<div class="feature-desc">一键生成,响应高效</div>
</div>
</div>
</section>
</div>
</main>
</div>
<script>
// 初始化
window.addEventListener('DOMContentLoaded', () => {
const username = localStorage.getItem('username') || 'Admin';
document.querySelector('.user-avatar').textContent = username.charAt(0).toUpperCase();
// 确保登录状态
if (!localStorage.getItem('isLoggedIn')) {
localStorage.setItem('isLoggedIn', 'true');
localStorage.setItem('username', 'Admin');
}
});
// 功能函数
function generateByTenderDoc() {
alert('按招标文件生成功能开发中...\n上传招标文件系统将智能解析信息并生成技术方案');
}
function generateByScoring() {
alert('按评分标准生成功能开发中...\n提供评分标准系统将快速定位标评并生成针对性方案');
}
function generateByCatalog() {
alert('按已有目录生成功能开发中...\n手动编写大纲系统将适配个性需求生成内容');
}
function generateByHistory() {
alert('按历史标书生成功能开发中...\n复用历史标书快速生成新方案');
}
function businessTechBid() {
alert('商务标+技术标功能开发中...\n商务无缝对接技术方案一站式生成');
}
function bidRewrite() {
alert('标书改写功能开发中...\n创新表达重新组织内容避免重复');
}
function bidExpansion() {
alert('标书扩写功能开发中...\n快速丰富内容增加细节和深度');
}
function bidDuplicateCheck() {
alert('标书查重功能开发中...\n检测重复内容确保合规性');
}
function ganttChart() {
alert('横道图功能开发中...\n自动生成工程进度横道图');
}
function tenderAnalysis() {
alert('招标解析功能开发中...\n精准解读招标文件一键提取关键信息');
}
function deviationTable() {
alert('偏离表功能开发中...\n一键生成技术偏离表和商务偏离表');
}
// 筛选切换
document.querySelectorAll('.filter-tab').forEach(tab => {
tab.addEventListener('click', function() {
document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
this.classList.add('active');
});
});
</script>
</body>
</html>