微软To Do复刻方案（解决精简模式强制置顶问题）
一、方案核心目标
精准复刻微软To Do桌面端的详细面板模式与精简模式，核心差异化功能为：将精简模式的强制窗口置顶改为可配置开关，支持用户自主控制是否置顶；同时实现任务分类/标签、截止日期/提醒、数据导入导出等核心功能，基于Next.js静态模式+Tauri+SQLite技术栈，适配Windows/macOS双平台。
- 二、核心概念厘清：两种模式的特征复刻
先明确两种模式的核心差异与复刻标准，确保界面与交互体验一致，再针对性解决置顶问题：
| 维度 | 详细面板模式（复刻标准） | 精简模式（复刻标准+置顶优化） |
|---|---|---|
| 界面布局 | 三纵列布局：左侧清单导航栏（我的一天、重要、自定义清单等）+ 中间任务列表 + 右侧任务详情面板（支持调整宽度） | 双纵列/单栏精简布局：隐藏右侧详情面板，保留清单导航与核心任务列表，窗口尺寸更小、布局更紧凑 |
| 核心交互 | 点击任务展开详情、支持任务拖拽排序、清单分组管理 | 快速查看/编辑任务、简化操作流程，窗口可自由拖动但默认无强制置顶（优化点） |
| 置顶特性 | 无强制置顶，窗口层级遵循系统默认规则 | 原版强制置顶（痛点）；复刻版支持开关控制，默认关闭置顶 |
| 适用场景 | 复杂任务管理（需查看/编辑详情、添加子任务等） | 快速浏览任务、临时记录，适合多窗口切换场景 |
- 三、技术架构选型
延续前端+本地存储的MVP核心架构，确保轻量、跨平台且性能优异：
| 技术模块 | 选型 | 核心优势 |
|---|---|---|
| 前端框架 | Next.js（静态模式，output: ‘export’） | 支持React组件化开发，静态导出后可直接集成到Tauri，兼顾开发效率与加载性能 |
| 桌面包装器 | Tauri | 包体积小（3-10MB）、内存占用低（30-40MB空闲），支持窗口置顶API（setAlwaysOnTop），完美适配双平台 |
| 本地存储 | SQLite（基于sql.js，WebAssembly实现） | 前端直接操作本地数据库，支持任务数据、模式偏好、置顶状态的持久化存储，离线可用 |
项目结构设计（适配Tauri+Next.js整合）：
todo-replica/
├── next-app/ # Next.js前端核心
│ ├── app/ # 页面组件（模式切换、任务管理、设置页等）
│ ├── components/ # 公共组件（置顶开关、模式切换按钮等）
│ ├── lib/ # 工具库（SQLite操作、Tauri API封装）
│ ├── public/ # 静态资源
│ └── next.config.js # 静态导出配置
├── src-tauri/ # Tauri桌面端核心
│ ├── src/main.rs # Rust主程序（窗口管理核心）
│ └── tauri.conf.json # 窗口配置（默认关闭置顶）
└── package.json # 项目依赖与脚本- 四、核心功能实现：模式复刻+置顶开关
4.1 两种模式的复刻与切换
4.1.1 界面布局复刻
详细面板模式：采用三栏布局，左侧清单导航支持分组管理，中间任务列表显示任务标题、截止日期、标签等核心信息，右侧详情面板可查看/编辑任务描述、子任务、附件等，支持拖拽调整面板宽度。
精简模式：隐藏右侧详情面板，窗口宽度压缩至300-400px，仅保留清单导航（可折叠）和任务列表，任务核心信息（标题、截止日期、完成状态）紧凑展示，点击任务可弹出简易编辑弹窗（替代详情面板）。
4.1.2 模式切换逻辑
切换入口：窗口右上角设置按钮旁添加「模式切换」按钮（图标区分：详细模式=三栏图标，精简模式=两栏图标）。
切换效果：点击后即时切换布局，窗口尺寸自适应调整（精简模式缩小、详细模式恢复），当前任务列表状态、选中清单保持不变。
偏好记忆：SQLite存储用户最近一次的模式选择，下次启动应用自动恢复对应模式。
4.2 核心优化：精简模式置顶开关
基于Tauri的窗口置顶API实现，核心解决强制置顶痛点，兼顾易用性与灵活性：
4.2.1 置顶开关设计
触发入口：双入口保障易用性
精简模式窗口右上角：直接添加「置顶」开关按钮（图标：未置顶=pin-off，置顶=pin），点击即时切换状态。
应用设置页：新增「模式偏好」模块，包含「精简模式默认置顶」选项（开关），控制启动精简模式时的初始置顶状态。
状态反馈：置顶开启时，窗口标题栏添加「[置顶中]」标识，开关按钮高亮显示；切换状态时给出短暂Toast提示（如「已开启置顶」「已关闭置顶」）。
优先级规则：即时点击开关的优先级高于设置页默认偏好，确保用户临时调整需求优先满足。
4.2.2 技术实现核心代码
核心依赖Tauri的window模块API（setAlwaysOnTop），前端封装调用逻辑，配合SQLite存储状态：
// next-app/components/TopToggle.tsx（置顶开关组件）
'use client';
import { useState, useEffect } from 'react';
import { Pin, PinOff } from 'lucide-react';
import { getCurrentWindow } from '@tauri-apps/api/window';
import { getDb, saveConfig } from '@/lib/db'; // SQLite操作封装
export default function TopToggle() {
const [isTop, setIsTop] = useState(false);
const window = getCurrentWindow();
// 初始化：从SQLite加载置顶状态
useEffect(() => {
const initTopState = async () => {
const db = await getDb();
const res = db.exec(`SELECT value FROM config WHERE key = 'compact_mode_top'`);
const isTopSaved = res[0]?.values[0]?.[0] === 'true';
setIsTop(isTopSaved);
// 同步到窗口状态
await window.setAlwaysOnTop(isTopSaved);
};
initTopState();
}, []);
// 切换置顶状态
const toggleTop = async () => {
const newIsTop = !isTop;
setIsTop(newIsTop);
// 1. 同步窗口置顶状态
await window.setAlwaysOnTop(newIsTop);
// 2. 持久化到SQLite
const db = await getDb();
await saveConfig('compact_mode_top', newIsTop.toString());
};
return (
<button onClick={100 rounded-full">
{isTop ? <Pin size={18} /> : <PinOff size={18} />}
);
}
// src-tauri/src/main.rs（Tauri窗口初始化配置）
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
// src-tauri/tauri.conf.json（窗口默认配置，关闭置顶）
{
"tauri": {
"window": {
"title": "Todo Replica",
"width": 1024,
"height": 768,
"resizable": true,
"alwaysOnTop": false, // 默认关闭置顶
"decorations": true
}
}
}4.3 基础任务功能实现（含你要求的扩展功能）
4.3.1 数据模型设计（SQLite表结构）
包含任务核心数据、模式偏好、置顶状态，支持所有扩展功能：
-- 任务清单表（区分不同任务组）
CREATE TABLE task_lists (
id TEXT PRIMARY KEY,
name TEXT NOT NULL,
is_collapsed INTEGER DEFAULT 0, -- 清单是否折叠（精简模式常用）
created_at TEXT NOT NULL,
updated_at TEXT NOT NULL
);
-- 任务表（核心数据，含标签、截止日期）
CREATE TABLE tasks (
id TEXT PRIMARY KEY,
list_id TEXT NOT NULL,
title TEXT NOT NULL,
description TEXT,
categories TEXT, -- 标签，JSON数组存储
due_date TEXT, -- 截止日期（ISO格式）
reminder TEXT, -- 提醒时间（ISO格式）
is_completed INTEGER DEFAULT 0,
created_at TEXT NOT NULL,
updated_at TEXT NOT NULL,
FOREIGN KEY (list_id) REFERENCES task_lists(id)
);
-- 应用配置表（模式偏好、置顶状态）
CREATE TABLE app_config (
key TEXT PRIMARY KEY,
value TEXT NOT NULL
);
-- 初始化默认配置（精简模式默认关闭置顶）
INSERT OR IGNORE INTO app_config (key, value)
VALUES
('default_mode', 'detailed'), -- 默认启动详细模式
('compact_mode_top', 'false'); -- 精简模式默认不置顶4.3.2 扩展功能实现要点
任务分类/标签：支持为任务添加多个标签，标签支持新增、编辑、删除，任务列表可按标签筛选；标签数据以JSON数组格式存储在tasks表的categories字段。
截止日期/提醒：选择截止日期时同步支持设置提醒时间，提醒状态存储在reminder字段；应用启动时检查到期提醒，通过Tauri的通知API（后续可扩展）或弹窗提示。
数据导入导出：支持导出为JSON/CSV格式（前端读取SQLite数据生成文件），支持导入微软To Do导出的JSON文件（解析格式后写入本地SQLite）。
- 五、Figma原型设计要点（两种模式+置顶开关）
原型核心要求：还原微软To Do的视觉风格（简洁、轻量化），明确两种模式的布局差异与置顶开关的交互逻辑，可直接用于前端开发：
5.1 页面结构原型
主界面（两种模式切换）
顶部导航栏：左侧应用名称，右侧依次为「搜索框」「模式切换按钮」「置顶开关按钮」「设置按钮」「用户头像」。
详细模式：三栏布局，右侧详情面板默认展开，支持拖拽调整宽度。
精简模式：两栏布局，右侧详情面板隐藏，清单导航栏可点击折叠为图标，进一步压缩窗口尺寸。
设置页（模式偏好）
新增「模式与窗口设置」模块，包含：默认启动模式（下拉选择：详细/精简）、精简模式默认置顶（开关）。
保留「数据管理」模块：导入按钮、导出按钮（选择导出格式）。
任务编辑弹窗（精简模式）：点击精简模式的任务弹出弹窗，包含任务标题、截止日期、标签、描述的编辑入口，简洁高效。
5.2 交互逻辑原型
模式切换：点击模式切换按钮，窗口尺寸平滑过渡（精简→详细：宽度从350px扩展到1024px；反之收缩），布局即时重排。
置顶开关：仅精简模式显示置顶开关（详细模式隐藏），点击开关时图标切换，标题栏添加「[置顶中]」标识，给出Toast反馈。
数据导入导出：点击导出按钮弹出格式选择弹窗，选择后下载文件；点击导入按钮弹出文件选择器，选择后解析并提示导入结果。
- 六、跨平台打包与MVP上线
6.1 打包配置（Windows/macOS）
基于Tauri的打包命令，配置双平台适配：
// 安装依赖
npm install
// 开发环境启动（同时启动Next.js和Tauri）
npm run tauri dev
// 打包Windows版本（生成exe/msi）
npm run tauri build -- --target x86_64-pc-windows-msvc
// 打包macOS版本（生成dmg）
npm run tauri build -- --target x86_64-apple-darwin # Intel芯片
npm run tauri build -- --target aarch64-apple-darwin # M系列芯片6.2 MVP阶段验收标准
两种模式正常切换，界面布局符合复刻要求。
精简模式置顶开关功能正常，状态可持久化，窗口层级控制符合预期。
任务管理核心功能（增删改查、分类/标签、截止日期）正常。
数据导入导出功能正常，支持指定格式。
双平台（Windows 10+/macOS 12+）运行稳定，无明显性能问题。
- 七、后续扩展建议
添加桌面通知：集成Tauri的通知API，实现任务提醒的原生通知弹窗。
快捷键支持：添加模式切换、置顶开关的全局快捷键，提升操作效率。
云同步功能：集成云存储API（如Nextcloud、自建服务），实现跨设备数据同步。
主题定制：支持浅色/深色模式自动切换，新增自定义主题颜色功能。