Compare commits

..

23 Commits

Author SHA1 Message Date
mac
6defe95a3f v1.7.3 — 项目抽屉简化为6字段:名称/负责人/阶段/截止/金额/说明 2026-06-16 11:22:47 +08:00
mac
a1b154abd7 v1.7.2 — 返回项目列表后 Lucide 图标刷新 2026-06-16 11:20:10 +08:00
mac
fc0ee66064 v1.7.1 — 任务抽屉改为 fixed 定位,长列表不丢失 2026-06-16 11:18:04 +08:00
mac
5af58c8faa v1.7.0 — 任务清单改为 Tab 内二级页面,不再使用独立弹窗 2026-06-16 11:15:55 +08:00
mac
b682427ea0 v1.6.1 — 去除重点项目顶部阶段筛选分类标签 2026-06-16 11:13:30 +08:00
mac
ec83bb5e22 v1.6.0 — 任务编辑改为右侧抽屉滑入,顶栏不再内嵌表单 2026-06-16 11:11:34 +08:00
mac
921afd198b v1.5.1 — 修复编辑任务后误删DOM导致只剩一条 2026-06-16 10:57:29 +08:00
mac
850ad340e5 v1.5.0 — 项目阶段改为6阶段:商务洽谈/系统上线/团队分工/项目交付/上线推广/结项验收 2026-06-16 10:54:55 +08:00
mac
cec3e3a2ad v1.4.1 — 任务表单增加「卡点&备注」字段,任务行显示卡点红色标记 2026-06-16 10:33:58 +08:00
mac
e02c0bd183 v1.4.0 — 任务面板统一亮色 + 点击任务可编辑 + 任务说明自动换行 2026-06-16 10:32:34 +08:00
mac
853344fb26 v1.3.9 — 任务面板加宽到1000px + 横向表格布局 + 空分组自动隐藏 2026-06-16 10:28:48 +08:00
mac
386f780d00 v1.3.8 — 任务行始终渲染负责人和日期 + 加emoji图标 + 提亮颜色 2026-06-16 10:26:13 +08:00
mac
dd0c7d615f v1.3.7 — 加宽任务面板到800px + 显示任务说明+负责人+截止时间 2026-06-16 10:04:34 +08:00
mac
289529dc73 v1.3.6 — 合并负责人与截止时间到同一标签显示 2026-06-16 09:44:40 +08:00
mac
19dcbdbb51 v1.3.5 — 任务行增加负责人和截止时间显示 2026-06-16 09:42:07 +08:00
mac
b1a82d27e3 v1.3.4 — 修复新增任务递归调用导致创建失败 2026-06-16 09:40:08 +08:00
mac
ac5f9f2de9 v1.3.3 — 任务浮层新增统一「新增任务」按钮+表单弹窗 2026-06-16 09:14:38 +08:00
mac
a506b52506 v1.3.2 — 新增按钮移到右上角 + 收起表单 + 阶段筛选 2026-06-15 17:50:34 +08:00
mac
7ad363f39e v1.3.1 — 任务浮层 Plane 深色风格 + 项目去版本号 + 添加任务按钮 2026-06-15 17:33:34 +08:00
mac
938ec8d181 v1.3.0 — 重点项目简化:6列表格 + 进展按钮弹任务浮层(4阶段) 2026-06-15 12:02:27 +08:00
mac
55e7a3a4dc v1.2.1 — 修复合并时误删 renderProposals/fileGroup/fileItem 2026-06-15 11:13:46 +08:00
mac
301dfd0dfb v1.2.0 — 合并业务机会+运营为重点项目 Tab,新增项目任务时间线 2026-06-15 10:01:31 +08:00
mac
9930727d14 v1.1.0 — 首页指标升级 + 运营金额列 + 产品平台分类 2026-06-15 09:22:31 +08:00
5 changed files with 355 additions and 55 deletions

View File

@@ -1,5 +1,15 @@
# OPC Manager Version Log
## v1.2.0 — 2026-06-15
- 业务机会 + 运营管理合并为「重点项目」Tab统一表格展示
- 新增项目任务追踪:按阶段分组展示里程碑/执行项/负责人/截止日/卡点
- 新增 `project_tasks` 表,抽屉内展示项目时间线
## v1.1.0 — 2026-06-15
- 首页指标升级:增加已签约合同总额、合同流程中金额、年度/Q2 累计确收、年度/Q2 累计毛利、已签约未执行
- 运营表格增加「金额」列
- 产品研发增加「平台」字段(真研/科普/关爱),支持平台筛选
## v1.0.7 — 2026-06-04
- 修复新增表单 async 后 `event.currentTarget` 丢失导致页面不刷新(影响所有新增按钮)
- `createResource` 改用预存 form 引用 + try/catch 错误提示

View File

@@ -141,9 +141,26 @@ CREATE TABLE IF NOT EXISTS file_assets (
notes TEXT NOT NULL DEFAULT '',
created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
updated_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP
);
CREATE TABLE IF NOT EXISTS project_tasks (
id INTEGER PRIMARY KEY AUTOINCREMENT,
project_id INTEGER NOT NULL,
phase TEXT NOT NULL DEFAULT '',
milestone TEXT NOT NULL DEFAULT '',
task TEXT NOT NULL DEFAULT '',
owner TEXT NOT NULL DEFAULT '',
due_date TEXT NOT NULL DEFAULT '',
blockers TEXT NOT NULL DEFAULT '',
notes TEXT NOT NULL DEFAULT '',
created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
updated_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP
);
"""
)
# Schema migrations
try: conn.execute("ALTER TABLE product_versions ADD COLUMN platform TEXT NOT NULL DEFAULT ''")
except: pass
if one(conn, "SELECT id FROM sales_leads LIMIT 1"):
conn.close()
return
@@ -210,15 +227,15 @@ CREATE TABLE IF NOT EXISTS file_assets (
add_file_index(conn, "operation", project_id, version, category, op_dir / filename, external=True)
products = [
("妙手医生服务小程序", "v1.1", "视频任务增强 + 积分商城", "草稿箱、批量上传、积分商城、消息通知", "2026-Q3", "规划中"),
("数字化营销后台管理系统", "v1.2", "运营数据看板 + 智能审核", "医生活跃、任务完成率、AI 预审、渠道数据上报", "2026-Q3", "设计中"),
("妙手患者服务", "v0.5", "科普浏览 + 医生主页 MVP", "科普文章/视频浏览、医生主页、搜索", "2026-Q3", "规划中"),
("数字人内容平台", "v0.1", "基础数字人视频生成 MVP", "预设形象、AI 配音、脚本驱动、简单模板", "2026-Q3", "规划中"),
("渠道分发引擎", "v1.0", "六渠道统一分发", "分发 API、内容适配、分发排期、效果追踪", "2027-Q1", "规划中"),
("妙手医生服务小程序", "v1.1", "视频任务增强 + 积分商城", "草稿箱、批量上传、积分商城、消息通知", "2026-Q3", "规划中", "科普平台"),
("数字化营销后台管理系统", "v1.2", "运营数据看板 + 智能审核", "医生活跃、任务完成率、AI 预审、渠道数据上报", "2026-Q3", "设计中", "真研平台"),
("妙手患者服务", "v0.5", "科普浏览 + 医生主页 MVP", "科普文章/视频浏览、医生主页、搜索", "2026-Q3", "规划中", "科普平台"),
("数字人内容平台", "v0.1", "基础数字人视频生成 MVP", "预设形象、AI 配音、脚本驱动、简单模板", "2026-Q3", "规划中", "科普平台"),
("渠道分发引擎", "v1.0", "六渠道统一分发", "分发 API、内容适配、分发排期、效果追踪", "2027-Q1", "规划中", "科普平台"),
]
for product in products:
cur = conn.execute(
"INSERT INTO product_versions (product_name,version,version_goal,feature_list,launch_date,status) VALUES (?,?,?,?,?,?)",
"INSERT INTO product_versions (product_name,version,version_goal,feature_list,launch_date,status,platform) VALUES (?,?,?,?,?,?,?)",
product,
)
conn.execute(
@@ -238,6 +255,25 @@ CREATE TABLE IF NOT EXISTS file_assets (
(month, record_type, category, amount, f"{month}-01", notes),
)
# Seed project tasks for 信达科普文章项目 (project_id=1)
tasks_seed = [
("阶段1渠道与商务确认", "商务对接", "合同签订", "Anna", "2026-06-30", "法务审核中", "合同签订后开始执行"),
("阶段1渠道与商务确认", "官媒渠道确认", "沟通官媒确定", "段丽华", "2026-06-30", "官媒尽力推,以先达成合作为准", "集团支持"),
("阶段1渠道与商务确认", "官媒渠道确认", "官媒合作签约", "段丽华", "2026-06-18", "", "官媒确认细节"),
("阶段2系统与标准搭建", "系统开发上线", "音频专访系统开发上线", "戴敏/梁军营", "2026-06-18", "客户比较着急执行,需要技术的资源", ""),
("阶段2系统与标准搭建", "系统开发上线", "精品视频系统开发上线", "戴敏/梁军营", "2026-06-25", "", ""),
("阶段2系统与标准搭建", "标准与培训", "业务执行手册SOP", "胡龙飞", "2026-06-12", "", "系统开发上线"),
("阶段3人员与审核入驻", "团队组建", "医学审核人员到位", "胡龙飞", "2026-06-15", "", "审核人员招聘"),
("阶段3人员与审核入驻", "团队组建", "视频制作人员到位", "胡龙飞", "2026-06-18", "", "项目经理招聘"),
("阶段4供应链与制作", "供应商准入", "准入拍摄/剪辑/主持人", "胡龙飞/侯亚凤", "2026-06-18", "", ""),
("阶段2系统与标准搭建", "脚本生产及审核", "生产脚本", "军营", "2026-06-12", "脚本目前生产比较机械,需要提前准备", "细分标签领域完成"),
]
for phase, milestone, task, owner, due_date, blockers, notes in tasks_seed:
conn.execute(
"INSERT INTO project_tasks (project_id,phase,milestone,task,owner,due_date,blockers,notes) VALUES (?,?,?,?,?,?,?,?)",
(1, phase, milestone, task, owner, due_date, blockers, notes),
)
conn.commit()
conn.close()
@@ -304,9 +340,22 @@ def bootstrap():
operations = attach_common(conn, "operations", rows(conn, "SELECT * FROM operation_projects ORDER BY id DESC"))
products = attach_common(conn, "products", rows(conn, "SELECT * FROM product_versions ORDER BY id DESC"))
finance = rows(conn, "SELECT * FROM finance_records ORDER BY month DESC, id DESC")
current_month = "2026-05"
revenue = sum(x["amount"] for x in finance if x["month"] == current_month and x["record_type"] == "revenue")
cost = sum(x["amount"] for x in finance if x["month"] == current_month and x["record_type"] == "cost_expense")
current_month = "2026-06"
# Finance aggregates
def sum_finance(months, rtype):
return sum(x["amount"] for x in finance if x["month"] in months and x["record_type"] == rtype)
months_2026 = [f"2026-{m:02d}" for m in range(1,7)]
months_q2 = ["2026-04","2026-05","2026-06"]
revenue_annual = sum_finance(months_2026, "revenue")
cost_annual = sum_finance(months_2026, "cost_expense")
revenue_q2 = sum_finance(months_q2, "revenue")
cost_q2 = sum_finance(months_q2, "cost_expense")
revenue_month = sum_finance([current_month], "revenue")
cost_month = sum_finance([current_month], "cost_expense")
# Contract aggregates
signed_amount = sum(x["expected_contract_amount"] or 0 for x in operations if x["project_status"] == "已签约")
pipeline_amount = sum(x["expected_contract_amount"] or 0 for x in operations if x["project_status"] not in ["已签约","已丢单","已归档","已完成"])
signed_not_executed = sum(x["expected_contract_amount"] or 0 for x in operations if x["project_type"] == "execution" and x["execution_progress"] < 100)
summary = {
"project_name": "科普(慰心斋)",
"metrics": {
@@ -314,14 +363,22 @@ def bootstrap():
"active_sales": len([x for x in sales if x["status"] in ["待跟进", "跟进中", "方案中", "商务谈判"]]),
"execution_projects": len([x for x in operations if x["project_type"] == "execution"]),
"risk_projects": len([x for x in operations if x["project_status"] == "有风险" or x["risks"]]),
"monthly_revenue": revenue,
"monthly_net_profit": revenue - cost,
"monthly_revenue": revenue_month,
"monthly_net_profit": revenue_month - cost_month,
"upcoming_products": len([x for x in products if x["status"] in ["规划中", "设计中", "开发中", "测试中"]]),
# Extended finance metrics
"signed_amount": signed_amount,
"pipeline_amount": pipeline_amount,
"revenue_annual": revenue_annual,
"revenue_q2": revenue_q2,
"gross_annual": revenue_annual - cost_annual,
"gross_q2": revenue_q2 - cost_q2,
"signed_not_executed": signed_not_executed,
},
"recent": rows(conn, "SELECT * FROM follow_up_records ORDER BY id DESC LIMIT 8"),
"risks": [{"title": "执行提醒", "content": x["next_action"]} for x in operations if x["next_action"]][:5],
}
return jsonify({"summary": summary, "sales": sales, "proposals": proposals, "operations": operations, "products": products, "finance": finance, "financeMonthly": monthly_finance(conn)})
return jsonify({"summary": summary, "sales": sales, "proposals": proposals, "operations": operations, "products": products, "finance": finance, "financeMonthly": monthly_finance(conn), "tasks": rows(conn, "SELECT * FROM project_tasks ORDER BY phase, id")})
finally:
conn.close()
@@ -330,8 +387,9 @@ TABLES = {
"sales": ("sales_leads", ["target_customer", "priority", "status"]),
"proposals": ("business_proposals", ["customer_or_project_name", "version", "description", "status", "created_date"]),
"operations": ("operation_projects", ["project_name", "project_version", "project_type", "project_status", "current_stage", "owner", "target_customer", "customer_need", "expected_contract_amount", "expected_sign_date", "sign_probability", "next_action", "sop_stage", "execution_progress", "current_deliverable", "risks", "notes"]),
"products": ("product_versions", ["product_name", "version", "version_goal", "feature_list", "launch_date", "status", "notes"]),
"products": ("product_versions", ["product_name", "version", "version_goal", "feature_list", "launch_date", "status", "platform", "notes"]),
"finance": ("finance_records", ["month", "project_name", "record_type", "category", "amount", "occurred_date", "notes"]),
"tasks": ("project_tasks", ["project_id", "phase", "milestone", "task", "owner", "due_date", "blockers", "notes"]),
}

View File

@@ -2,8 +2,10 @@ const state = {
active: "home",
data: null,
opFilter: "all",
projectView: null,
chart: null,
chart2: null,
productPlatform: "all",
};
const money = (value) => `${Number(value || 0).toLocaleString("zh-CN")}`;
@@ -60,9 +62,8 @@ function switchTab(tab) {
function render() {
if (!state.data) return;
renderHome();
renderSales();
renderProjects();
renderProposals();
renderOperations();
renderProducts();
renderFinance();
if (window.lucide) window.lucide.createIcons();
@@ -97,15 +98,26 @@ function renderHome() {
<div class="grid gap-5">
<div class="grid grid-cols-4 gap-3">
${[
["P0 客户数", m.p0_customers, "sales"],
["跟进中销售机会", m.active_sales, "sales"],
["已签约执行项目", m.execution_projects, "operations"],
["有风险项目", m.risk_projects, "operations"],
["P0 客户数", m.p0_customers, "projects"],
["跟进中销售机会", m.active_sales, "projects"],
["已签约执行项目", m.execution_projects, "projects"],
["有风险项目", m.risk_projects, "projects"],
["本月收入", money(m.monthly_revenue), "finance"],
["本月净利", money(m.monthly_net_profit), "finance"],
["即将上线版本", m.upcoming_products, "products"],
["已签约未执行", money(m.signed_not_executed), "finance"],
].map(([label, value, tab]) => `<button class="metric-card" onclick="switchTab('${tab}')"><span class="flex items-center gap-2 text-xs text-slate-500"><i data-lucide="gauge"></i>${label}</span><strong class="mt-2 block text-2xl">${value}</strong></button>`).join("")}
</div>
<div class="grid grid-cols-4 gap-3">
${[
["已签约合同总额", money(m.signed_amount), "projects"],
["合同流程中", money(m.pipeline_amount), "projects"],
["年度累计确收", money(m.revenue_annual), "finance"],
["Q2 累计确收", money(m.revenue_q2), "finance"],
["年度累计毛利", money(m.gross_annual), "finance"],
["Q2 累计毛利", money(m.gross_q2), "finance"],
].map(([label, value, tab]) => `<button class="metric-card" onclick="switchTab('${tab}')"><span class="flex items-center gap-2 text-xs text-slate-500"><i data-lucide="trending-up"></i>${label}</span><strong class="mt-2 block text-2xl">${value}</strong></button>`).join("")}
</div>
<div class="grid grid-cols-2 gap-5">
${card(`<div class="mb-3 flex items-center justify-between"><h2 class="text-sm font-bold text-slate-600">财务趋势</h2>${badge("YYYY-MM")}</div><div style="position:relative;height:140px"><canvas id="financeChart"></canvas></div>`, "p-4")}
${card(`<h2 class="text-lg font-bold">风险提醒</h2><div class="mt-3 grid gap-2">${(summary.risks.length ? summary.risks : [{ title: "暂无高风险", content: "当前无明确阻塞,按周更新即可。" }]).map((r) => `<div class="rounded-md border border-amber-200 bg-amber-50 p-3"><p class="font-bold text-amber-900">${r.title}</p><p class="mt-1 text-sm text-amber-800 break-words">${r.content}</p></div>`).join("")}</div>`, "p-5")}
@@ -159,24 +171,172 @@ window.createSales = (event) => createResource(event, "sales");
window.createProposal = (event) => createResource(event, "proposals");
window.createOperation = (event) => createResource(event, "operations");
window.createProduct = (event) => createResource(event, "products");
window.openTaskForm = (projectId, taskId) => {
const drawer = document.querySelector(`#task-drawer-${projectId}`);
const titleEl = drawer.querySelector(".task-drawer-title");
if (taskId === null) {
document.querySelector(`#task-id-${projectId}`).value = "";
document.querySelector(`#task-name-${projectId}`).value = "";
document.querySelector(`#task-phase-${projectId}`).value = "商务洽谈";
document.querySelector(`#task-owner-${projectId}`).value = "";
document.querySelector(`#task-due-${projectId}`).value = "";
document.querySelector(`#task-notes-${projectId}`).value = "";
document.querySelector(`#task-blockers-${projectId}`).value = "";
document.querySelector(`#task-submit-btn-${projectId}`).textContent = "确认新增";
if (titleEl) titleEl.textContent = "新增任务";
} else {
const task = (state.data.tasks || []).find((t) => t.id === taskId);
if (!task) return;
document.querySelector(`#task-id-${projectId}`).value = task.id;
document.querySelector(`#task-name-${projectId}`).value = task.task || "";
document.querySelector(`#task-phase-${projectId}`).value = task.phase || "商务洽谈";
document.querySelector(`#task-owner-${projectId}`).value = task.owner || "";
document.querySelector(`#task-due-${projectId}`).value = task.due_date || "";
document.querySelector(`#task-notes-${projectId}`).value = task.notes || "";
document.querySelector(`#task-blockers-${projectId}`).value = task.blockers || "";
document.querySelector(`#task-submit-btn-${projectId}`).textContent = "保存修改";
if (titleEl) titleEl.textContent = "编辑任务";
}
drawer.classList.add("open");
};
window.closeTaskDrawer = (projectId) => {
document.querySelector(`#task-drawer-${projectId}`).classList.remove("open");
};
window.submitTaskForm = async (event, projectId) => {
event.preventDefault();
const data = Object.fromEntries(new FormData(event.currentTarget).entries());
data.project_id = Number(projectId);
const taskId = data.task_id;
delete data.task_id;
try {
if (taskId) {
await api(`/api/tasks/${taskId}`, { method: "PUT", body: JSON.stringify({ data }) });
} else {
await api("/api/tasks", { method: "POST", body: JSON.stringify({ data }) });
}
await load();
} catch (error) {
alert("保存失败:" + error.message);
}
};
window.createFinance = (event) => createResource(event, "finance");
window.switchTab = switchTab;
function renderSales() {
const rows = state.data.sales.map((x) => [x.target_customer, badge(x.priority), badge(x.status), text(x.latest_follow_up_record)]);
const salesClicks = state.data.sales.map((x) => ({ resource: "sales", id: x.id }));
document.querySelector("#sales").innerHTML = `<div class="grid gap-4">
${card(formHtml([
{ label: "业务机会", input: `<input name="target_customer" required placeholder="客户名称">` },
{ label: "优先级", input: `<select name="priority"><option>P0</option><option selected>P1</option><option>P2</option><option>P3</option></select>` },
{ label: "状态", input: `<select name="status"><option>待跟进</option><option>跟进中</option><option>方案中</option><option>商务谈判</option><option>已签约</option><option>暂缓</option><option>已丢单</option></select>` },
], { handler: "createSales", text: `<i data-lucide="plus"></i>新增业务机会` }), "p-4")}
${renderTable(["业务机会", "优先级", "状态", "最新跟进记录"], rows, salesClicks)}
function renderProjects() {
// 二级页面:项目任务详情
if (state.projectView) {
return renderProjectTasks(state.projectView);
}
const items = state.data.operations;
const rows = items.map((x) => [
`<strong>${x.project_name}</strong>`,
text(x.customer_need || x.notes),
badge(x.current_stage || x.project_status),
x.expected_contract_amount ? money(x.expected_contract_amount) : "—",
text(x.owner || "—"),
`<button class="btn btn-ghost btn-sm text-blue-600" onclick="event.stopPropagation(); state.projectView=${x.id}; renderProjects()"><i data-lucide="eye"></i>查看</button>`
]);
document.querySelector("#projects").innerHTML = `<div class="grid gap-4">
<div class="flex items-center justify-end">
<button class="btn btn-primary" onclick="document.querySelector('#project-form').classList.toggle('hidden')">
<i data-lucide="plus"></i>新增项目
</button>
</div>
<div id="project-form" class="hidden">
${card(formHtml([
{ label: "项目名称", input: `<input name="project_name" required>` },
{ label: "当前阶段", input: `<select name="current_stage"><option>商务洽谈</option><option>线</option><option></option><option></option><option>线广</option><option></option></select>` },
{ label: "项目金额", input: `<input name="expected_contract_amount" type="number" step="0.01" placeholder="万元">` },
{ label: "负责人", input: `<input name="owner">` },
], { handler: "createOperation", text: "确认新增" }), "p-4")}
</div>
${renderTable(["项目", "项目说明", "当前阶段", "项目金额", "负责人", "进展"], rows, items.map((x) => ({ resource: "operations", id: x.id })))}
</div>`;
if (window.lucide) window.lucide.createIcons();
}
function renderProjectTasks(projectId) {
const project = state.data.operations.find((x) => x.id === projectId);
if (!project) { state.projectView = null; renderProjects(); return; }
const tasks = (state.data.tasks || []).filter((t) => t.project_id === projectId);
const phases = ["商务洽谈", "系统上线", "团队分工", "项目交付", "上线推广", "结项验收"];
document.querySelector("#projects").innerHTML = `<div class="grid gap-4">
<div class="flex items-center justify-between">
<button class="btn btn-ghost btn-sm" onclick="state.projectView=null;renderProjects()"><i data-lucide="arrow-left"></i>返回项目列表</button>
<div class="flex items-center gap-3">
<span class="text-sm font-semibold text-slate-700">${project.project_name}</span>
<button class="btn btn-primary btn-sm" onclick="openTaskForm(${projectId}, null)"><i data-lucide="plus"></i>新增任务</button>
</div>
</div>
<div class="task-page-wrap">
<div class="task-body">
${phases.map((phase) => {
const pt = tasks.filter((t) => t.phase === phase);
if (!pt.length) return "";
return `<div class="task-group"><div class="task-group-hd"><span class="task-group-icon"><i data-lucide="layers"></i></span><span class="task-group-label">${phase}</span><span class="task-group-n">${pt.length}</span></div><div class="task-group-list">${pt.map((t) => `<div class="task-row" data-id="${t.id}" onclick="openTaskForm(${projectId}, ${t.id})"><span class="task-dot"><i data-lucide="${t.status === 'done' ? 'check-circle' : 'circle'}"></i></span><div class="task-main"><span class="task-name">${t.task}</span>${t.notes ? `<span class="task-desc">${t.notes}</span>` : ""}${t.blockers ? `<span class="task-blocker">⚠ ${t.blockers}</span>` : ""}</div><span class="task-col">${t.owner || ""}</span><span class="task-col-badge">${t.due_date || ""}</span></div>`).join("")}</div></div>`;
}).join("")}
</div>
<div id="task-drawer-${projectId}" class="task-drawer">
<div class="task-drawer-hd"><span class="task-drawer-title">编辑任务</span><button class="task-close" onclick="closeTaskDrawer(${projectId})"><i data-lucide="x"></i></button></div>
<form class="task-drawer-form" onsubmit="submitTaskForm(event, ${projectId})">
<input type="hidden" name="task_id" id="task-id-${projectId}" value="">
<label class="task-field"><span>任务名称</span><input name="task" required id="task-name-${projectId}"></label>
<label class="task-field"><span>任务阶段</span><select name="phase" id="task-phase-${projectId}">${phases.map((p) => `<option>${p}</option>`).join("")}</select></label>
<label class="task-field"><span>负责人</span><input name="owner" id="task-owner-${projectId}"></label>
<label class="task-field"><span>截止时间</span><input name="due_date" type="date" id="task-due-${projectId}"></label>
<label class="task-field"><span>任务说明</span><textarea name="notes" rows="3" id="task-notes-${projectId}"></textarea></label>
<label class="task-field"><span>卡点&备注</span><textarea name="blockers" rows="2" id="task-blockers-${projectId}" placeholder="风险卡点、依赖项等"></textarea></label>
<div class="flex justify-end gap-2 mt-4 pt-3 border-t border-slate-100">
<button type="button" class="btn btn-ghost btn-sm" onclick="closeTaskDrawer(${projectId})">取消</button>
<button type="submit" class="btn btn-primary btn-sm" id="task-submit-btn-${projectId}">确认新增</button>
</div>
</form>
</div>
</div>
</div>`;
if (window.lucide) window.lucide.createIcons();
}
function showTaskModal(projectId) {
const project = state.data.operations.find((x) => x.id === projectId);
const tasks = (state.data.tasks || []).filter((t) => t.project_id === projectId);
const phases = ["商务洽谈", "系统上线", "团队分工", "项目交付", "上线推广", "结项验收"];
document.querySelector("#taskModal").innerHTML = `<div class="task-overlay" onclick="closeTaskModal()"><div class="task-panel" onclick="event.stopPropagation()"><div class="task-header"><h2 class="task-title">${project.project_name} · 任务清单</h2><div class="flex items-center gap-3"><button class="btn btn-primary btn-sm" onclick="event.stopPropagation(); openTaskForm(${projectId}, null)"><i data-lucide="plus"></i>新增任务</button><button class="task-close" onclick="closeTaskModal()"><i data-lucide="x"></i></button></div></div><div class="task-body-wrap">
<div class="task-body">
${phases.map((phase) => {
const pt = tasks.filter((t) => t.phase === phase);
if (!pt.length) return "";
return `<div class="task-group"><div class="task-group-hd"><span class="task-group-icon"><i data-lucide="layers"></i></span><span class="task-group-label">${phase}</span><span class="task-group-n">${pt.length}</span></div><div class="task-group-list">${pt.map((t) => `<div class="task-row" data-id="${t.id}" onclick="event.stopPropagation(); openTaskForm(${projectId}, ${t.id})"><span class="task-dot"><i data-lucide="${t.status === 'done' ? 'check-circle' : 'circle'}"></i></span><div class="task-main"><span class="task-name">${t.task}</span>${t.notes ? `<span class="task-desc">${t.notes}</span>` : ""}${t.blockers ? `<span class="task-blocker">⚠ ${t.blockers}</span>` : ""}</div><span class="task-col">${t.owner || ""}</span><span class="task-col-badge">${t.due_date || ""}</span></div>`).join("")}</div></div>`;
}).join("")}
</div>
<div id="task-drawer-${projectId}" class="task-drawer">
<div class="task-drawer-hd"><span class="task-drawer-title">编辑任务</span><button class="task-close" onclick="closeTaskDrawer(${projectId})"><i data-lucide="x"></i></button></div>
<form class="task-drawer-form" onsubmit="submitTaskForm(event, ${projectId})">
<input type="hidden" name="task_id" id="task-id-${projectId}" value="">
<label class="task-field"><span>任务名称</span><input name="task" required id="task-name-${projectId}"></label>
<label class="task-field"><span>任务阶段</span><select name="phase" id="task-phase-${projectId}">${phases.map((p) => `<option>${p}</option>`).join("")}</select></label>
<label class="task-field"><span>负责人</span><input name="owner" id="task-owner-${projectId}"></label>
<label class="task-field"><span>截止时间</span><input name="due_date" type="date" id="task-due-${projectId}"></label>
<label class="task-field"><span>任务说明</span><textarea name="notes" rows="3" id="task-notes-${projectId}"></textarea></label>
<label class="task-field"><span>卡点&备注</span><textarea name="blockers" rows="2" id="task-blockers-${projectId}" placeholder="风险卡点、依赖项等"></textarea></label>
<div class="flex justify-end gap-2 mt-4 pt-3 border-t border-slate-100">
<button type="button" class="btn btn-ghost btn-sm" onclick="closeTaskDrawer(${projectId})">取消</button>
<button type="submit" class="btn btn-primary btn-sm" id="task-submit-btn-${projectId}">确认新增</button>
</div>
</form>
</div>
</div></div></div>`;
document.querySelector("#taskModal").classList.add("active");
if (window.lucide) window.lucide.createIcons();
}
window.closeTaskModal = () => {
document.querySelector("#taskModal").classList.remove("active");
document.querySelector("#taskModal").innerHTML = "";
};
function renderProposals() {
const categories = ["方案", "成本", "SOP", "财务流程"];
const proposalRows = state.data.proposals.map((p) => [p.customer_or_project_name, p.version, badge(p.status), p.files.length + " 个"]);
const proposalClicks = state.data.proposals.map((p) => ({ resource: "proposals", id: p.id }));
document.querySelector("#proposals").innerHTML = `<div class="grid gap-4">
@@ -220,31 +380,18 @@ window.uploadFile = async (event, module, ownerId, version, category) => {
await load();
};
function renderOperations() {
const items = state.opFilter === "all" ? state.data.operations : state.data.operations.filter((x) => x.project_type === state.opFilter);
const opRows = items.map((x) => [`<strong>${x.project_name}</strong><p class="text-xs text-slate-500">${x.project_version}</p>`, badge(x.project_type), badge(x.project_status), text(x.current_stage || x.sop_stage), `${x.files.length}`, text(x.latest_follow_up_record)]);
const opClicks = items.map((x) => ({ resource: "operations", id: x.id }));
document.querySelector("#operations").innerHTML = `<div class="grid gap-4">
${card(formHtml([
{ label: "项目名称", input: `<input name="project_name" required>` },
{ label: "项目版本", input: `<input name="project_version" value="v1.0">` },
{ label: "项目类型", input: `<select name="project_type"><option value="opportunity">业务机会项目</option><option value="execution"></option></select>` },
{ label: "状态", input: `<input name="project_status" value="线索发现">` },
], { handler: "createOperation", text: "新增项目" }), "p-4")}
<div class="flex gap-2">${[["all","全部项目"],["opportunity","业务机会项目"],["execution","已签约执行项目"]].map(([k,v]) => `<button class="btn ${state.opFilter === k ? "btn-primary" : "btn-ghost"}" onclick="state.opFilter='${k}'; renderOperations()">${v}</button>`).join("")}</div>
${renderTable(["项目名称", "类型", "状态", "当前阶段", "交付文件", "最新跟进"], opRows, opClicks)}
</div>`;
}
function renderProducts() {
const items = state.productPlatform === "all" ? state.data.products : state.data.products.filter((x) => (x.platform || "") === state.productPlatform);
document.querySelector("#products").innerHTML = `<div class="grid gap-4">
${card(formHtml([
{ label: "产品名称", input: `<input name="product_name" required>` },
{ label: "版本号", input: `<input name="version" required>` },
{ label: "平台", input: `<select name="platform"><option value=""></option><option></option><option></option><option></option></select>` },
{ label: "上线日期", input: `<input name="launch_date" placeholder="2026-Q3">` },
{ label: "状态", input: `<select name="status"><option>规划中</option><option>设计中</option><option>开发中</option><option>测试中</option><option>已上线</option><option>已延期</option><option>已取消</option></select>` },
], { handler: "createProduct", text: "新增版本" }), "p-4")}
${renderTable(["产品名称", "版本号", "版本目标", "核心功能", "上线日期", "状态"], state.data.products.map((p) => [p.product_name, p.version, text(p.version_goal), text(p.feature_list), text(p.launch_date), badge(p.status)]), state.data.products.map((p) => ({ resource: "products", id: p.id })))}
<div class="flex gap-2">${[["all","全部"],["真研平台","真研"],["科普平台","科普"],["关爱平台","关爱"]].map(([k,v]) => `<button class="btn ${state.productPlatform === k ? "btn-primary" : "btn-ghost"}" onclick="state.productPlatform='${k}'; renderProducts()">${v}</button>`).join("")}</div>
${renderTable(["产品名称", "版本号", "版本目标", "核心功能", "平台", "上线日期", "状态"], items.map((p) => [p.product_name, p.version, text(p.version_goal), text(p.feature_list), text(p.platform), text(p.launch_date), badge(p.status)]), items.map((p) => ({ resource: "products", id: p.id })))}
</div>`;
}
@@ -301,17 +448,17 @@ function openDrawer(resource, id) {
const fields = resource === "sales"
? [["target_customer","业务机会"],["priority","优先级"],["status","状态"]]
: resource === "operations"
? [["project_name","项目名称"],["project_version","项目版本"],["project_status","项目状态"],["current_stage","当前阶段"],["target_customer","业务机会"],["customer_need","客户需求"],["expected_contract_amount","预计签约金额"],["expected_sign_date","预计签约时间"],["sign_probability","签约概率"],["sop_stage","SOP 阶段"],["execution_progress","执行进度"],["current_deliverable","当前交付物"],["risks","风险与阻塞"],["next_action","下一步动作"]]
? [["project_name","项目名称"],["owner","负责人"],["current_stage","当前阶段"],["expected_sign_date","截止时间"],["expected_contract_amount","金额"],["notes","项目说明"]]
: resource === "proposals"
? [["customer_or_project_name","客户/项目"],["version","版本号"],["description","版本说明"],["created_date","创建日期"],["status","状态"]]
: [["product_name","产品名称"],["version","版本号"],["version_goal","版本目标"],["feature_list","核心功能清单"],["launch_date","上线日期"],["status","当前状态"],["notes","备注"]];
: [["product_name","产品名称"],["version","版本号"],["version_goal","版本目标"],["feature_list","核心功能清单"],["platform","平台"],["launch_date","上线日期"],["status","当前状态"],["notes","备注"]];
const fieldIcons = {
target_customer: "user", priority: "flag", status: "circle-dot",
project_name: "briefcase-business", project_version: "git-branch", project_status: "circle-dot", current_stage: "map-pin",
customer_need: "file-text", expected_contract_amount: "banknote", expected_sign_date: "calendar",
owner: "user", customer_need: "file-text", expected_contract_amount: "banknote", expected_sign_date: "calendar",
sign_probability: "percent", sop_stage: "list-checks", execution_progress: "activity",
current_deliverable: "package", risks: "alert-triangle", next_action: "arrow-right",
product_name: "box", version: "tag", version_goal: "target", feature_list: "list",
product_name: "box", version: "tag", version_goal: "target", feature_list: "list", platform: "layers",
launch_date: "calendar", notes: "sticky-note"
};
const multilineFields = ["customer_need", "current_deliverable", "risks", "next_action", "version_goal", "feature_list", "notes"];

View File

@@ -489,3 +489,89 @@ td {
color: #64748b;
margin: 4px 0;
}
/* Task Modal — Plane style */
.task-modal { display: none; }
.task-modal.active { display: block; }
.task-overlay {
position: fixed; inset: 0; background: rgba(15,23,42,0.35); z-index: 200;
display: flex; align-items: flex-start; justify-content: center;
padding-top: 48px; overflow-y: auto;
}
.task-panel {
background: #fff; border-radius: 12px; width: 1000px; max-width: 96vw;
box-shadow: 0 20px 60px rgba(0,0,0,0.12); margin-bottom: 48px;
overflow: hidden;
}
.task-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px; border-bottom: 1px solid #e2e8f0;
}
.task-title { color: #1e293b; font-size: 15px; font-weight: 600; }
.task-close {
color: #94a3b8; background: none; border: none; cursor: pointer;
padding: 4px; border-radius: 6px; display: flex;
}
.task-close:hover { color: #475569; background: #f1f5f9; }
.task-body-wrap, .task-page-wrap { position: relative; overflow: hidden; }
.task-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; transition: margin-right 0.25s ease; }
.task-drawer {
position: fixed; top: 0; right: 0; width: 420px; height: 100vh;
background: #fff; border-left: 1px solid #e2e8f0;
transform: translateX(100%); transition: transform 0.25s ease;
z-index: 300; display: flex; flex-direction: column;
}
.task-drawer.open { transform: translateX(0); }
.task-drawer-hd {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 20px; border-bottom: 1px solid #e2e8f0;
}
.task-drawer-title { font-size: 15px; font-weight: 600; color: #1e293b; }
.task-drawer-form { padding: 16px 20px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.task-group {
background: #fff; border-radius: 8px;
border: 1px solid #e2e8f0; overflow: hidden;
}
.task-group-hd {
display: flex; align-items: center; gap: 8px;
padding: 10px 16px; background: #f8fafc;
}
.task-group-icon { color: #64748b; display: flex; }
.task-group-label { color: #334155; font-size: 13px; font-weight: 600; }
.task-group-n {
background: #e2e8f0; color: #64748b; font-size: 11px;
padding: 1px 7px; border-radius: 10px;
}
.task-group-list { display: flex; flex-direction: column; }
.task-row {
display: flex; align-items: center; gap: 16px;
padding: 10px 16px; border-top: 1px solid #f1f5f9;
cursor: pointer;
}
.task-row:hover { background: #f8fafc; }
.task-dot { display: flex; color: #cbd5e1; flex-shrink: 0; }
.task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.task-name { color: #1e293b; font-size: 13px; }
.task-desc { color: #94a3b8; font-size: 12px; word-wrap: break-word; overflow-wrap: break-word; }
.task-blocker { color: #dc2626; font-size: 12px; word-wrap: break-word; overflow-wrap: break-word; }
.task-col { color: #64748b; font-size: 12px; white-space: nowrap; width: 100px; text-align: right; }
.task-col-badge { color: #64748b; font-size: 12px; white-space: nowrap; width: 90px; text-align: right; }
.task-none { color: #94a3b8; font-size: 13px; padding: 12px 14px; text-align: center; border-top: 1px solid #f1f5f9; }
.task-form {
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
padding: 14px; margin-bottom: 16px;
}
.task-field { display: flex; flex-direction: column; gap: 4px; }
.task-field span { color: #64748b; font-size: 12px; }
.task-field input, .task-field select, .task-field textarea {
background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
color: #1e293b; font-size: 13px; padding: 6px 10px; outline: none;
}
.task-field input:focus, .task-field select:focus, .task-field textarea:focus { border-color: #2563eb; }
.col-span-2 { grid-column: span 2; }
.task-group-add {
display: block; width: 100%; padding: 10px; text-align: center;
color: #6b6d75; font-size: 13px; background: none; border: none;
border-top: 1px solid #24272d; cursor: pointer;
}
.task-group-add:hover { color: #e4e5e7; background: #24272d; }

View File

@@ -36,23 +36,22 @@
<nav class="tabs border-b border-slate-200 bg-white px-8" id="tabs">
<button class="active" data-tab="home"><i data-lucide="home"></i>首页</button>
<button data-tab="sales"><i data-lucide="briefcase-business"></i>业务机会</button>
<button data-tab="projects"><i data-lucide="briefcase-business"></i>重点项目</button>
<button data-tab="proposals"><i data-lucide="file-text"></i>业务方案</button>
<button data-tab="operations"><i data-lucide="activity"></i>运营管理</button>
<button data-tab="products"><i data-lucide="package"></i>产品研发</button>
<button data-tab="finance"><i data-lucide="wallet-cards"></i>财务管理</button>
</nav>
<main class="px-8 py-6">
<section id="home" class="panel active"></section>
<section id="sales" class="panel"></section>
<section id="projects" class="panel"></section>
<section id="proposals" class="panel"></section>
<section id="operations" class="panel"></section>
<section id="products" class="panel"></section>
<section id="finance" class="panel"></section>
</main>
<aside id="drawer" class="drawer" aria-hidden="true"></aside>
<div id="taskModal" class="task-modal"></div>
<script src="{{ url_for('static', filename='app.js') }}"></script>
</body>
</html>