173 lines
11 KiB
HTML
173 lines
11 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>科普（慰心斋）OPC 工作台</title>
|
||
<script src="{{ url_for('static', filename='vendor/tailwind.js') }}"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
brand: {
|
||
50: '#eff6ff',
|
||
600: '#2563eb',
|
||
700: '#1d4ed8'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
|
||
<script src="{{ url_for('static', filename='vendor/chart.js') }}" defer></script>
|
||
<script src="{{ url_for('static', filename='vendor/squire.js') }}" defer></script>
|
||
<script src="{{ url_for('static', filename='vendor/lucide.js') }}" defer></script>
|
||
</head>
|
||
<body class="min-h-screen bg-slate-50 text-slate-950">
|
||
<div class="flex min-h-screen">
|
||
<!-- 左侧工作台切换栏 -->
|
||
<aside class="w-[72px] bg-slate-900 flex flex-col items-center py-6 gap-1 shrink-0 sticky top-0 h-screen overflow-y-auto" id="workspaceSidebar">
|
||
<div class="flex flex-col items-center mb-2 cursor-pointer" onclick="document.getElementById('userAvatar').click()">
|
||
<div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center text-white font-bold text-sm hover:ring-2 hover:ring-blue-400 transition-all" id="userAvatar" title=""></div>
|
||
<span class="text-[10px] text-slate-400 mt-1.5 max-w-[64px] truncate text-center" id="userDisplayName" title=""></span>
|
||
</div>
|
||
<!-- 分隔线 -->
|
||
<div class="w-8 h-px bg-slate-700 my-2"></div>
|
||
<!-- 工作台切换按钮 -->
|
||
<div class="flex flex-col items-center cursor-pointer hover:bg-slate-800 rounded-lg py-2 px-1 w-14 transition-colors" onclick="toggleTenantMenu(event)">
|
||
<i data-lucide="layout-grid" style="width:18px;height:18px;color:#94a3b8"></i>
|
||
<span class="text-[10px] text-slate-400 mt-1 max-w-[56px] truncate text-center" id="currentTenantLabel">工作台</span>
|
||
<i data-lucide="chevron-down" style="width:12px;height:12px;color:#64748b;margin-top:2px"></i>
|
||
</div>
|
||
<!-- 分隔线 -->
|
||
<div class="w-8 h-px bg-slate-700 my-2"></div>
|
||
<!-- 导航 Tab 图标 -->
|
||
<div class="flex flex-col items-center gap-1 w-14" id="sidebarTabs">
|
||
<div class="sidebar-tab active" data-tab="home" onclick="switchTab('home')" title="首页">
|
||
<i data-lucide="home" style="width:20px;height:20px"></i>
|
||
<span class="text-[10px] mt-1">首页</span>
|
||
</div>
|
||
<div class="sidebar-tab" data-tab="finance" onclick="switchTab('finance')" title="业务">
|
||
<i data-lucide="folder-open-dot" style="width:20px;height:20px"></i>
|
||
<span class="text-[10px] mt-1">业务</span>
|
||
</div>
|
||
<div class="sidebar-tab" data-tab="projects" onclick="switchTab('projects')" title="Focus">
|
||
<i data-lucide="file-text" style="width:20px;height:20px"></i>
|
||
<span class="text-[10px] mt-1">Focus</span>
|
||
</div>
|
||
<div class="sidebar-tab" data-tab="proposals" onclick="switchTab('proposals')" title="业务方案">
|
||
<i data-lucide="package" style="width:20px;height:20px"></i>
|
||
<span class="text-[10px] mt-1">方案</span>
|
||
</div>
|
||
<div class="sidebar-tab" data-tab="products" onclick="switchTab('products')" title="产品迭代">
|
||
<i data-lucide="wallet-cards" style="width:20px;height:20px"></i>
|
||
<span class="text-[10px] mt-1">产品</span>
|
||
</div>
|
||
<div class="sidebar-tab" data-tab="performance" onclick="switchTab('performance')" title="绩效">
|
||
<i data-lucide="target" style="width:20px;height:20px"></i>
|
||
<span class="text-[10px] mt-1">绩效</span>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
<!-- 主内容区 -->
|
||
<div class="flex-1 min-w-0">
|
||
<header class="topbar border-b border-slate-200 bg-white px-8 py-5">
|
||
<div class="flex items-center gap-3 w-full">
|
||
<div class="flex-1">
|
||
<p class="eyebrow text-xs font-semibold uppercase tracking-[0.18em] text-blue-700">OPC Manager <span class="ml-2 text-xs font-normal text-slate-400 tracking-normal">v1.0.0.12</span></p>
|
||
<div class="flex items-center gap-4 mt-1">
|
||
<h1 class="text-2xl font-semibold" id="workspaceTitle">科普 OPC 工作台</h1>
|
||
<div class="hidden sm:flex items-center gap-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-100 rounded-full px-4 py-1.5">
|
||
<i data-lucide="sparkles" class="text-blue-500" style="width:14px;height:14px"></i>
|
||
<span class="text-xs text-blue-700 font-medium tracking-wide">真看病，看真病，用学术会议，科普，科研，患者管理，帮助医生与患者提升临床治疗</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button onclick="document.getElementById('opcLetterModal').classList.remove('hidden')" class="ml-auto flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-full bg-blue-50 border border-blue-200 hover:bg-blue-100 transition-colors" title="OPC 来信">
|
||
<i data-lucide="mail" class="text-blue-500" style="width:18px;height:18px"></i>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="px-8 py-6">
|
||
<section id="home" class="panel active"></section>
|
||
<section id="projects" class="panel"></section>
|
||
<section id="proposals" class="panel"></section>
|
||
<section id="products" class="panel"></section>
|
||
<section id="performance" class="panel"></section>
|
||
<section id="performance" class="panel"></section>
|
||
<section id="finance" class="panel"></section>
|
||
</main>
|
||
</div><!-- 关闭主内容区 -->
|
||
</div><!-- 关闭 flex 容器 -->
|
||
<aside id="drawer" class="drawer" aria-hidden="true"></aside>
|
||
<div id="taskModal" class="task-modal"></div>
|
||
<!-- 新增项目模态框 -->
|
||
<div id="newProjectModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40" onclick="closeNewProjectModal()">
|
||
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-md mx-4" onclick="event.stopPropagation()">
|
||
<div class="flex items-center justify-between px-6 py-4 border-b border-slate-100">
|
||
<h3 class="text-lg font-semibold text-slate-800">新增项目</h3>
|
||
<button class="btn btn-ghost btn-sm rounded-full w-8 h-8 p-0" onclick="closeNewProjectModal()"><i data-lucide="x"></i></button>
|
||
</div>
|
||
<form onsubmit="createOperation(event)" class="p-6 grid gap-4">
|
||
<label class="block"><span class="text-xs font-medium text-slate-500">项目名称</span><input name="project_name" required class="form-ctrl mt-1"></label>
|
||
<label class="block"><span class="text-xs font-medium text-slate-500">项目备注</span><textarea name="notes" rows="3" class="form-ctrl mt-1" placeholder="可选"></textarea></label>
|
||
<div class="flex justify-end gap-3 pt-3 border-t border-slate-100">
|
||
<button type="button" class="btn btn-ghost btn-sm" onclick="closeNewProjectModal()">取消</button>
|
||
<button type="submit" class="btn btn-primary btn-sm">创建</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<script src="{{ url_for('static', filename='modules/utils.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='modules/home.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='modules/projects.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='modules/proposals.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='modules/products.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='modules/performance.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='modules/finance.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='modules/expense.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='modules/drawer.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='modules/admin.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='app.js') }}"></script>
|
||
|
||
<!-- OPC 来信弹窗 -->
|
||
<div id="opcLetterModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40" onclick="this.classList.add('hidden')">
|
||
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-2xl mx-4 max-h-[85vh] overflow-y-auto" onclick="event.stopPropagation()">
|
||
<div class="sticky top-0 bg-white/95 backdrop-blur border-b border-slate-100 px-8 py-5 flex items-center justify-between">
|
||
<h2 class="text-xl font-bold text-slate-800">致所有 OPC 的一封信</h2>
|
||
<button class="btn btn-ghost btn-sm rounded-full w-8 h-8 p-0" onclick="document.getElementById('opcLetterModal').classList.add('hidden')"><i data-lucide="x"></i></button>
|
||
</div>
|
||
<div class="p-8 text-slate-700 leading-relaxed" style="background:#fdfcf8;font-family:Georgia,'Times New Roman',serif">
|
||
<p class="text-slate-500 text-sm mb-6">亲爱的 OPC：</p>
|
||
<p class="mb-6">对于每一位业务 Owner（OPC），公司和我个人都发自内心地充满了期待：</p>
|
||
<ul class="list-disc list-inside mb-6 space-y-1.5 text-slate-600">
|
||
<li>期待每一个人的业务都能够突破</li>
|
||
<li>期待每一个人都成为自己赛道最璀璨的明星</li>
|
||
<li>期待每一个人都实现事业上的成功与财务上的自由</li>
|
||
</ul>
|
||
<p class="mb-8">所以竭尽所能，把自己对业务管理的每一份理解，都融入这个系统，希望能够助力每一位 OPC 都快速地成长。</p>
|
||
<hr class="my-6 border-slate-200">
|
||
<ol class="list-decimal list-inside space-y-4 mb-6 text-sm" style="padding-left:0">
|
||
<li><strong>财务：</strong>以终为始，用清晰的财务指标，让每个人都清晰地知道自己当下的成绩</li>
|
||
<li><strong>业务：</strong>将目标转换成不同的项目，每一个项目就是一场战役</li>
|
||
<li><strong>Focus：</strong>理清工作重点，并把每个重点工作的落地转换成工作清单</li>
|
||
<li><strong>方案：</strong>如何清晰地和客户描述清楚我们的价值、产品、运营与报价</li>
|
||
<li><strong>产品：</strong>
|
||
<ul class="list-disc list-inside ml-4 mt-1 space-y-1 text-slate-500">
|
||
<li>版本迭代：构建一个数字系统，对业务加杠杆，让业务变得有规模、有流程、有壁垒</li>
|
||
<li>产品运营：产品在真实场景是否真实地落地，真正地成为可以交付的价值</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>绩效：</strong>实时评分，了解当前阶段，我们和目标还有什么差距</li>
|
||
</ol>
|
||
<hr class="my-6 border-slate-200">
|
||
<p class="text-right text-sm text-slate-500">—— 与你同行的团队</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|