单文件项目管理应用的状态闭环设计

这些区域是不是同一个系统？

模型能否把多个页面做成共享同一状态的产品，而不是一组互不相干的界面。

单个 HTML 文件。
纯原生 HTML、CSS 和 JavaScript。
完全离线。
内置演示数据。
禁止第三方库、外部接口和外部素材。
要求自主设计、开发、测试和修复。

Project
Task
Member
Activity
Settings

const state = {
  projects: [],
  tasks: [],
  members: [],
  activities: [],
  filters: {
    query: "",
    projectId: "all",
    assigneeId: "all",
    priority: "all"
  },
  settings: {
    theme: "light"
  }
};

1. 更新 task.status。
2. 写入 task.updatedAt。
3. 新增一条 activity。
4. 重新计算所属项目进度。
5. 重新计算全局统计。
6. 保存到 localStorage。
7. 更新当前视图。

看板列数量。
项目完成百分比。
首页统计。
操作历史。
刷新后的状态。

function getProjectProgress(projectId) {
  const tasks = state.tasks.filter(task => task.projectId === projectId);
  if (tasks.length === 0) return 0;

  const completed = tasks.filter(task => task.status === "done").length;
  return Math.round((completed / tasks.length) * 100);
}

task.status = done
project.progress = 75
dashboard.completed = 12

初始化：尝试读取本地数据。
读取失败：加载演示数据。
每次有效操作：序列化并保存。
结构升级：检查 schemaVersion。
用户重置：确认后恢复演示数据。

const payload = {
  schemaVersion: 1,
  savedAt: new Date().toISOString(),
  data: {
    projects: state.projects,
    tasks: state.tasks,
    members: state.members,
    activities: state.activities,
    settings: state.settings
  }
};

localStorage.setItem("ai-project-manager", JSON.stringify(payload));

function isRecord(value) {
  return value !== null && typeof value === "object" && !Array.isArray(value);
}

function isRecordArray(value) {
  return Array.isArray(value) && value.every(isRecord);
}

function hasSavedDataShape(data) {
  return (
    isRecord(data) &&
    isRecordArray(data.projects) &&
    isRecordArray(data.tasks) &&
    isRecordArray(data.members) &&
    isRecordArray(data.activities) &&
    isRecord(data.settings)
  );
}

function loadSavedData() {
  try {
    const raw = localStorage.getItem("ai-project-manager");
    if (!raw) return null;
    const payload = JSON.parse(raw);
    if (
      !isRecord(payload) ||
      payload.schemaVersion !== 1 ||
      !hasSavedDataShape(payload.data)
    ) {
      return null;
    }
    return payload.data;
  } catch (error) {
    console.error("Failed to load saved data", error);
    return null;
  }
}

谁执行。
什么时候执行。
操作对象。
发生了什么变化。

10:32 陈默将“API 权限验收”从“进行中”移动到“已完成”。

update task #t-18 status=done

项目 A。
高优先级。
负责人小林。
关键词 API。

function getVisibleTasks() {
  const query = state.filters.query.trim().toLowerCase();

  return state.tasks.filter(task => {
    const matchesQuery = !query ||
      task.title.toLowerCase().includes(query) ||
      task.description.toLowerCase().includes(query);

    const matchesProject = state.filters.projectId === "all" ||
      task.projectId === state.filters.projectId;

    const matchesAssignee = state.filters.assigneeId === "all" ||
      task.assigneeId === state.filters.assigneeId;

    const matchesPriority = state.filters.priority === "all" ||
      task.priority === state.filters.priority;

    return matchesQuery && matchesProject && matchesAssignee && matchesPriority;
  });
}

任务编辑弹窗中修改状态。
卡片菜单选择移动到某列。
触摸手势实现拖拽。

文字对比度。
边框可见性。
图表颜色。
输入框和弹窗。
悬停、选中和禁用状态。
浏览器原生控件。

:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --text: #17202a;
  --muted: #667085;
  --border: #d9dee5;
  --accent: #176b5b;
}

[data-theme="dark"] {
  --bg: #101417;
  --surface: #181e22;
  --text: #eef2f3;
  --muted: #a9b3b8;
  --border: #354047;
  --accent: #52b69a;
}

请在一个 HTML 文件中，使用纯原生 HTML、CSS 和 JavaScript，从零开发一个可离线运行的项目管理平台。

必须包含：
- 项目总览
- 任务看板
- 新建、编辑、删除任务
- 桌面端原生拖拽
- 移动端修改状态的替代入口
- 项目、负责人、优先级和关键词组合筛选
- 项目进度与任务统计
- 操作历史
- 深色模式
- localStorage 持久化
- 导出和恢复演示数据
- 响应式布局

数据要求：
1. 所有页面使用同一份状态数据。
2. 进度和统计必须从任务数据派生，不得硬编码。
3. 每次有效操作写入历史并保存。
4. 本地数据损坏时回退到安全初始状态，不得白屏。

技术限制：
- 禁止第三方库、外部接口、CDN、远程字体和外部素材。
- 不允许页面产生任何网络请求。
- 禁止使用 eval 和内联字符串事件处理器。

验证要求：
- 实际运行并完成新建、编辑、拖拽、筛选、刷新恢复和重置测试。
- 检查窄屏布局、键盘操作和深色模式。
- 修复发现的问题。

最终只交付一个可直接打开的 HTML 文件，并说明已验证内容、已知限制和数据存储位置。

1. 新建项目。
2. 新建三条任务。
3. 拖动一条到已完成。
4. 检查项目进度和统计。
5. 刷新页面。
6. 确认状态与历史仍然存在。

1. 同时选择项目、负责人和优先级。
2. 输入关键词。
3. 确认结果满足所有条件。
4. 清空筛选。
5. 确认全部任务恢复。

1. 尝试提交空标题。
2. 删除当前筛选中的任务。
3. 手工破坏 localStorage 数据后刷新。
4. 重复点击保存。
5. 在窄屏下完成状态修改。

真实账号与权限。
多人实时协作。
服务端数据库。
备份与恢复。
跨设备同步。
企业审计日志。
大规模数据查询。

前端组件。
状态管理。
API 服务。
数据库。
身份认证。
权限策略。
审计与监控。
自动化测试。

[ ] 单个 HTML 文件可离线打开
[ ] 页面没有第三方网络请求
[ ] 所有视图共享同一份任务数据
[ ] 统计和进度由事实数据派生
[ ] 拖拽后状态、统计、历史同步更新
[ ] 刷新后数据恢复
[ ] 无法解析、版本不符或顶层结构损坏时回退到演示数据
[ ] 搜索和多个筛选条件可以组合
[ ] 移动端有不依赖鼠标拖拽的操作方式
[ ] 深色模式覆盖弹窗、输入和交互状态
[ ] 不包含真实密钥或敏感数据
[ ] 已明确单机原型与生产系统的边界

任务变化。
项目进度变化。
统计变化。
历史变化。
本地数据变化。