lxy/DevFlow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增: 初始化 DevFlow 项目仓库

Browse Source 
Tauri 2 + Vue 3 + Vite 6 桌面应用，Rust workspace 含 13 个 crate
(df-ai / df-storage / df-workflow / df-core / df-execute 等)。
核心能力：AI 聊天 agentic 循环(工具调用+人工审批)、工作流引擎、
任务/想法/项目/阶段管理、可追溯性，及配套前端组件。
This commit is contained in:
绝尘
2026-06-12 01:31:05 +08:00
commit 98393b4908
178 changed files with 27859 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

716
docs/08-用户指南/使用手册.html Normal file
View File

@@ -0,0 +1,716 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>DevFlow 使用手册</title>
<style>
/* DevFlow Design System */
:root {
/* — Surface — */
--df-bg: #0c0e1a;
--df-bg-raised: #12152a;
--df-bg-card: #171b33;
--df-bg-card-hover: #1c2140;
--df-sidebar-bg: #090b15;
/* — Text — */
--df-text: #eef0f6;
--df-text-secondary: #8b90a8;
--df-text-dim: #4a4f6a;
/* — Accent: 紫色系 — */
--df-accent: #7b6ff0;
--df-accent-hover: #6a5de0;
--df-accent-soft: rgba(123,111,240,0.15);
--df-accent-bg: rgba(123,111,240,0.08);
/* — Semantic — */
--df-success: #3ddba0;
--df-success-bg: rgba(61,219,160,0.12);
--df-warning: #f0c75e;
--df-warning-bg: rgba(240,199,94,0.12);
--df-danger: #f06565;
--df-danger-bg: rgba(240,101,101,0.12);
--df-info: #5eaff0;
--df-info-bg: rgba(94,175,240,0.12);
/* — Border — */
--df-border: rgba(255,255,255,0.06);
--df-border-strong: rgba(255,255,255,0.10);
/* — Radius — */
--df-radius-sm: 6px;
--df-radius: 8px;
--df-radius-lg: 12px;
}
/* 页面样式 */
body {
padding: 2rem;
max-width: 768px;
margin: 0 auto;
background: var(--df-bg);
color: var(--df-text);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.7;
}
/* 按钮样式 */
.btn {
padding: 8px 16px;
border: none;
border-radius: var(--df-radius);
font-size: 13px;
cursor: pointer;
transition: all 0.15s;
}
.btn-primary {
background: var(--df-accent);
color: #fff;
}
.btn-primary:hover {
background: var(--df-accent-hover);
}
/* 卡片样式 */
.card {
background: var(--df-bg-card);
border: 0.5px solid var(--df-border);
border-radius: var(--df-radius-lg);
padding: 1.5rem;
margin-bottom: 1.5rem;
}
/* 标题样式 */
h1 {
font-size: 28px;
font-weight: 500;
color: var(--df-text);
margin: 0 0 0.5rem;
}
h2 {
font-size: 20px;
font-weight: 500;
color: var(--df-text);
margin: 0 0 0.75rem;
}
h3 {
font-size: 16px;
font-weight: 500;
color: var(--df-text);
margin: 0 0 0.5rem;
}
p {
font-size: 14px;
color: var(--df-text-secondary);
margin: 0 0 1rem;
line-height: 1.6;
}
/* 小标题 */
.section-title {
font-size: 12px;
font-weight: 500;
color: var(--df-text-dim);
letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0 0 1rem;
}
/* 特性卡片 */
.feature-row {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 1rem;
}
.feature-icon {
font-size: 20px;
flex-shrink: 0;
margin-top: 2px;
}
.feature-text {
font-size: 14px;
color: var(--df-text-secondary);
line-height: 1.6;
}
.feature-text strong {
color: var(--df-text);
font-weight: 500;
}
/* 按钮样式 */
.btn-demo {
background: transparent;
border: 0.5px solid var(--df-border);
border-radius: var(--df-radius);
padding: 8px 16px;
font-size: 13px;
cursor: pointer;
color: var(--df-text);
transition: background 0.15s;
margin-top: 1rem;
}
.btn-demo:hover {
background: var(--df-bg-raised);
}
/* 代码块 */
code {
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
font-size: 12px;
background: var(--df-bg-raised);
padding: 2px 6px;
border-radius: 4px;
color: var(--df-accent);
}
/* 主题切换 */
.theme-toggle {
position: fixed;
top: 1rem;
right: 1rem;
background: var(--df-bg-card);
border: 0.5px solid var(--df-border);
border-radius: var(--df-radius);
padding: 8px;
cursor: pointer;
color: var(--df-text-secondary);
transition: all 0.15s;
z-index: 100;
}
.theme-toggle:hover {
background: var(--df-bg-raised);
color: var(--df-text);
}
/* 标签 */
.tag {
display: inline-block;
padding: 2px 8px;
border-radius: var(--df-radius-sm);
font-size: 11px;
font-weight: 500;
margin-left: 0.5rem;
}
.tag-purple {
background: var(--df-accent-bg);
color: var(--df-accent);
}
.tag-teal {
background: var(--df-success-bg);
color: var(--df-success);
}
.tag-amber {
background: var(--df-warning-bg);
color: var(--df-warning);
}
.tag-coral {
background: var(--df-danger-bg);
color: var(--df-danger);
}
/* 流程演示 */
.flow-demo {
background: var(--df-bg-raised);
border: 0.5px solid var(--df-border);
border-radius: var(--df-radius);
padding: 1rem;
margin: 1rem 0;
}
/* 响应式 */
@media (max-width: 640px) {
body {
padding: 1rem;
}
h1 {
font-size: 24px;
}
h2 {
font-size: 18px;
}
}
/* 代码块容器 */
.code-block {
background: var(--df-bg-raised);
border: 0.5px solid var(--df-border);
border-radius: var(--df-radius);
padding: 1rem;
margin: 1rem 0;
overflow-x: auto;
}
.code-block pre {
margin: 0;
font-size: 12px;
color: var(--df-text);
}
.code-block code {
background: none;
padding: 0;
color: inherit;
}
</style>
</head>
<body>
<button class="theme-toggle" id="themeToggle" title="切换主题">
<i class="ti ti-moon"></i>
</button>
<h1>🚀 DevFlow 使用手册</h1>
<p style="margin-bottom: 2rem">"本地优先的个人创作流程驾驶舱"</p>
<!-- Mermaid 流程图 -->
<div class="flow-demo">
<h3 style="font-size: 14px; margin-bottom: 1rem;">核心流程</h3>
<div style="text-align: center; margin-bottom: 1rem;">
<p style="font-size: 12px; color: var(--df-text-dim); margin-bottom: 0.5rem;">想法到创作成果的完整链路</p>
</div>
<div class="code-block">
<pre><code>想法池 → 对抗评估 → 创作（代码/文档/PPT） → 发布/分享</code>
</pre>
</div>
<div style="display: flex; justify-content: center; gap: 1rem; margin-top: 1rem;">
<span class="tag tag-purple">评估</span>
<span class="tag tag-teal">创作</span>
<span class="tag tag-amber">执行</span>
<span class="tag tag-coral">发布</span>
</div>
</div>
<!-- 快速开始 -->
<div class="card">
<h2>🏃 快速开始</h2>
<div class="feature-row">
<span class="feature-icon">💻</span>
<div class="feature-text">
<strong>运行应用</strong><br>
<code>bun install</code><br>
<code>bun run tauri dev</code>
</div>
</div>
<div class="feature-row">
<span class="feature-icon">💡</span>
<div class="feature-text">
<strong>一句话功能</strong><br>
你的创作流程，本地跑，AI 辅助，数据不出门
</div>
</div>
</div>
<!-- 核心价值链 -->
<div class="card">
<h2>🎯 核心价值链</h2>
<p style="font-weight: 500; margin-bottom: 1rem;">想法 → 评估 → 创作 → 发布</p>
<div class="feature-row">
<span class="feature-icon">💡</span>
<div class="feature-text">
<strong>想法管理</strong><br>
收集、分类、评估创作想法<br>
支持多种类型的创作灵感
</div>
</div>
<div class="feature-row">
<span class="feature-icon">⚖️</span>
<div class="feature-text">
<strong>对抗评估</strong><br>
正方观点 + 反方观点 + 分析师建议<br>
确保创作质量和价值
</div>
</div>
<div class="feature-row">
<span class="feature-icon">🎨</span>
<div class="feature-text">
<strong>创作执行</strong><br>
代码、文档、PPT 等多种创作形式<br>
AI 辅助和模板支持
</div>
</div>
<div class="feature-row">
<span class="feature-icon">📤</span>
<div class="feature-text">
<strong>发布分享</strong><br>
多格式导出、版本管理<br>
一键发布到各平台
</div>
</div>
</div>
<!-- 功能模块 -->
<div class="card">
<h2>📋 功能模块</h2>
<p style="font-size: 12px; color: var(--df-text-dim); margin-bottom: 1rem;">聚焦核心，拒绝过设计</p>
<div class="feature-row">
<span class="feature-icon">🤖</span>
<div class="feature-text">
<strong>AI Chat</strong><br>
单 Provider 简化配置<br>
工具调用：代码生成、文件操作、Git 操作<br>
流式响应：实时输出
</div>
</div>
<div class="feature-row">
<span class="feature-icon">💡</span>
<div class="feature-text">
<strong>想法池</strong><br>
轻量版：聚焦核心<br>
预留对抗评估：后续升级
</div>
</div>
<div class="feature-row">
<span class="feature-icon">📂</span>
<div class="feature-text">
<strong>项目管理</strong><br>
多项目支持<br>
与 Git 分支联动
</div>
</div>
<div class="feature-row">
<span class="feature-icon">📚</span>
<div class="feature-text">
<strong>知识库（收藏夹）</strong><br>
静态收集：个人经验碎片<br>
分类管理：审查规则、Prompt 模板、踩坑经验
</div>
</div>
<div class="feature-row">
<span class="feature-icon">⚙️</span>
<div class="feature-text">
<strong>设置</strong><br>
AI 配置：Provider、模型选择<br>
通用设置：主题、语言
</div>
</div>
</div>
<!-- 特色功能 -->
<div class="card">
<h2>🌟 特色功能</h2>
<div class="feature-row">
<span class="feature-icon">🏠</span>
<div class="feature-text">
<strong>本地优先</strong><br>
SQLite 本地数据库<br>
基础功能离线可用<br>
代码不出本地
</div>
</div>
<div class="feature-row">
<span class="feature-icon">⚡</span>
<div class="feature-text">
<strong>实时监控</strong><br>
WebSocket 实时更新<br>
工作流执行进度<br>
错误原因分析
</div>
</div>
<div class="feature-row">
<span class="feature-icon">🔧</span>
<div class="feature-text">
<strong>工作流节点</strong><br>
Script：执行 Shell 命令<br>
Human：人工审批<br>
Condition：条件判断<br>
Parallel：并行执行
</div>
</div>
</div>
<!-- 使用场景 -->
<div class="card">
<h2>🎨 界面说明</h2>
<div class="section-title">颜色系统</div>
<div style="display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem;">
<div style="display: flex; align-items: center; gap: 0.5rem;">
<span style="width: 16px; height: 16px; background: var(--df-accent); border-radius: 4px;"></span>
<span style="font-size: 12px;">紫色（主色）</span>
</div>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<span style="width: 16px; height: 16px; background: var(--df-success); border-radius: 4px;"></span>
<span style="font-size: 12px;">青绿（成功）</span>
</div>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<span style="width: 16px; height: 16px; background: var(--df-warning); border-radius: 4px;"></span>
<span style="font-size: 12px;">琥珀（警告）</span>
</div>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<span style="width: 16px; height: 16px; background: var(--df-danger); border-radius: 4px;"></span>
<span style="font-size: 12px;">珊瑚（危险）</span>
</div>
</div>
<div class="section-title">图标含义</div>
<div style="display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem;">
<span style="font-size: 14px;">📋 待开始</span>
<span style="font-size: 14px;">🔨 进行中</span>
<span style="font-size: 14px;">👀 待审查</span>
<span style="font-size: 14px;">✅ 已合并</span>
<span style="font-size: 14px;">🗑️ 已废弃</span>
</div>
</div>
<!-- 注意事项 -->
<div class="card">
<h2>⚠️ 注意事项</h2>
<div class="feature-row">
<span class="feature-icon">🔗</span>
<div class="feature-text">
<strong>Git 集成</strong><br>
必须初始化 Git 仓库<br>
配置用户邮箱和姓名<br>
保持分支命名规范
</div>
</div>
<div class="feature-row">
<span class="feature-icon">🔌</span>
<div class="feature-text">
<strong>AI 配置</strong><br>
需要有效的 API Key<br>
检查网络连接<br>
关注 Token 使用量
</div>
</div>
<div class="feature-row">
<span class="feature-icon">⚙️</span>
<div class="feature-text">
<strong>工作流设计</strong><br>
避免长时间阻塞操作<br>
设置合理的超时时间<br>
保留人工干预接口
</div>
</div>
</div>
<!-- 更新日志 -->
<div class="card">
<h2>🔄 更新日志</h2>
<div class="feature-row">
<span class="feature-icon">✅</span>
<div class="feature-text">
<strong>v1.0 (2026-06-11)</strong><br>
完成核心功能<br>
任务管理系统<br>
工作流引擎<br>
AI Chat 集成<br>
本地数据存储
</div>
</div>
<div class="feature-row">
<span class="feature-icon">🔄</span>
<div class="feature-text">
<strong>计划功能</strong><br>
想法对抗式评估<br>
更多工作流节点<br>
团队协作功能
</div>
</div>
</div>
<!-- 配置指南 -->
<div class="card">
<h2>⚙️ 配置指南</h2>
<div class="section-title">AI 配置</div>
<div class="feature-row">
<span class="feature-icon">🤖</span>
<div class="feature-text">
<strong>Provider 设置</strong><br>
支持 OpenAI、Anthropic、DeepSeek<br>
配置 API Key 和模型选择
</div>
</div>
<div class="feature-row">
<span class="feature-icon">⚙️</span>
<div class="feature-text">
<strong>高级参数</strong><br>
Temperature: 0-2（创造性）<br>
Max Tokens: 限制回答长度
</div>
</div>
<div class="section-title">Git 集成</div>
<div class="feature-row">
<span class="feature-icon">🔗</span>
<div class="feature-text">
<strong>基础配置</strong><br>
git config user.name/email<br>
自动分支创建：feature/任务名
</div>
</div>
<div class="section-title">工作流配置</div>
<div class="feature-row">
<span class="feature-icon">🔄</span>
<div class="feature-text">
<strong>节点类型</strong><br>
script: Shell 命令<br>
human: 人工审批<br>
condition: 条件判断
</div>
</div>
</div>
<!-- 常见问题 -->
<div class="card">
<h2>❓ 常见问题</h2>
<div class="section-title">安装启动</div>
<div class="feature-row">
<span class="feature-icon">🚀</span>
<div class="feature-text">
<strong>无法启动</strong><br>
检查 Node.js >= 18<br>
bun clean + bun install<br>
确认端口 1420 可用
</div>
</div>
<div class="section-title">功能使用</div>
<div class="feature-row">
<span class="feature-icon">💡</span>
<div class="feature-text">
<strong>任务不显示</strong><br>
确认选中项目<br>
刷新页面<br>
查看控制台错误
</div>
</div>
<div class="feature-row">
<span class="feature-icon">🤖</span>
<div class="feature-text">
<strong>AI 无响应</strong><br>
检查 API Key<br>
确认网络连接<br>
切换 Provider 测试
</div>
</div>
<div class="section-title">数据管理</div>
<div class="feature-row">
<span class="feature-icon">💾</span>
<div class="feature-text">
<strong>存储位置</strong><br>
Windows: %APPDATA%\devflow\ <br>
macOS: ~/Library/Application Support/devflow/ <br>
Linux: ~/.config/devflow/
</div>
</div>
<div class="feature-row">
<span class="feature-icon">🔧</span>
<div class="feature-text">
<strong>数据备份</strong><br>
备份数据库：cp devflow.db backup/ <br>
备份配置：cp config.json backup/
</div>
</div>
</div>
<!-- 核心原则 -->
<div class="card">
<h2>💡 产品哲学</h2>
<div class="feature-row">
<span class="feature-icon">🎯</span>
<div class="feature-text">
<strong>聚焦核心</strong><br>
不是全流程操作系统<br>
专注于本地任务流程<br>
简单、实用、可靠
</div>
</div>
<div class="feature-row">
<span class="feature-icon">👨‍💻</span>
<div class="feature-text">
<strong>开发者第一</strong><br>
功能设计以开发者需求为中心<br>
避免过工程化的设计<br>
保留必要的扩展性
</div>
</div>
<button class="btn-demo" onclick="window.location.href='https://github.com/your-repo/devflow'">
🚀 开始使用 DevFlow
</button>
</div>
<script>
// 主题切换
const themeToggle = document.getElementById('themeToggle');
const html = document.documentElement;
// 检查本地存储的主题
const currentTheme = localStorage.getItem('theme') || 'dark';
html.setAttribute('data-theme', currentTheme);
themeToggle.addEventListener('click', () => {
const newTheme = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
html.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
});
// 模拟 Tabler Icons（实际项目中需要引入）
document.addEventListener('DOMContentLoaded', () => {
// 创建图标映射
const icons = {
'ti-moon': '🌙',
'ti-sun': '☀️',
'ti-home': '🏠',
'ti-settings': '⚙️',
'ti-chart-bar': '📊',
'ti-calendar': '📅',
'ti-star': '⭐',
'ti-bolt': '⚡',
'ti-brain': '🧠',
'ti-arrow-right': '→'
};
// 替换图标
document.querySelectorAll('.ti').forEach(icon => {
const iconClass = icon.className.split(' ')[1];
if (icons[iconClass]) {
icon.textContent = icons[iconClass];
}
});
});
</script>
</body>
</html>