博客客户端已经完成

Mon, 13 Jul 2026 21:55:07 +0800

BlogEdit 项目更新说明

项目概述

基于 Tauri 2 + Svelte 5 + Vite 构建的 Hugo 博客桌面客户端，通过 SSH 远程管理博客文章，支持本地 Ollama AI 辅助写作与一键部署。采用 Apple 风格设计，强调简洁、高效、稳定与安全。

技术架构

前端技术

框架：Svelte 5 + Vite（纯 SPA，无框架）
核心组件：
- App.svelte（根组件）
- Sidebar.svelte（侧边栏）
- Editor.svelte（编辑器）
- AiPage.svelte（AI对话页）
- Settings.svelte（设置面板）
- Stats.svelte（统计卡片）
- Modal.svelte（统一弹窗组件）

后端技术

框架：Tauri 2 (Rust) + Tokio + Reqwest + Serde_YAML
关键模块：
- utils.js（所有业务逻辑）
- store.svelte.js（全局状态管理）
- ai_messages（AI对话流式传输）

博客系统

存储路径：{server_path}/content/post/*.md
部署方式：通过 SSH 远程管理

项目结构

blogedit/
├── index.html # Vite 入口（inline 脚本预置 data-theme 防闪烁）
├── package.json
├── vite.config.js
├── jsconfig.json
├── bump.sh # 版本号管理
├── release.sh # 发版流程（测试→版本+1→构建→安装）
├── src/
│ ├── main.js # 挂载 App + 引入全局样式
│ ├── style.css # 全部样式（token + 组件）
│ ├── store.svelte.js # 全局状态（$state + SvelteSet）
│ ├── utils.js # 所有业务逻辑
│ ├── utils.test.js # 纯函数单测
│ ├── App.svelte # 根组件（布局 + 主题 + 设置加载）
│ ├── Sidebar.svelte # 侧边栏（按年折叠 + 搜索 + 批量 + 草稿箱）
│ ├── Editor.svelte # 编辑器 + AI侧面板 + 预览
│ ├── AiPage.svelte # 独立 AI 对话页
│ ├── Settings.svelte # 设置（SSH/AI/博客地址）
│ ├── Stats.svelte # 统计卡片 + 月度趋势图
│ └── Modal.svelte # 统一弹窗（confirm/prompt/newPost）
└── src-tauri/
 ├── Cargo.toml
 ├── tauri.conf.json
 └── src/
 ├── main.rs
 ├── lib.rs
 └── commands.rs # 全部 Tauri 命令 + 单测

设计原则

按「简洁 → 高效 → 稳定 → 安全」标准，Apple 风格：

简洁：纯 Vite + Svelte 5，不用框架。一个 App.svelte 做条件渲染，不带路由魔术文件
高效：CSS 一个文件，全局 import。border-radius 4/6/8/10 四级，active scale 统一 0.96
稳定：Modal 一个组件自适应三种模式，不需要三个独立弹窗
安全：所有业务逻辑在 utils.js 一个文件，不设中间层
安全加固：
- SvelteSet 保证多选 checkbox 响应式
- sq_escape 防 SSH 注入
- DOMPurify 防 XSS
交互优化：
- SSH 命令统一 30s 超时，写入 15s 超时
- index.html inline 脚本预置 data-theme，消除亮暗切换闪烁

全局状态

app = $state({...}) 单例。核心字段：

posts：博客文章集合
activePost：当前编辑文章
view：视图模式（编辑/预览）
connected：是否连接 SSH
settings：设置配置
aiMessages：AI对话历史
ollama：Ollama 实例状态
modal：统一弹窗组件
selectMode：选择模式（编辑/预览）
selectedPosts：选中文章集合

Tauri 命令

test_connection # 测试 SSH 连接 
setup_key_auth # 设置 SSH 密钥 
list_posts # 列出博客文章 
read_post # 读取指定文章 
save_post # 保存指定文章 
create_post # 创建新文章 
delete_post # 删除指定文章 
trigger_deploy # 触发部署 
get_statistics # 获取统计信息 
get/save_settings # 原子写入设置（权限 0o600） 
ai_chat_stream # 流式 AI 对话（SSE） 
check_ollama # 检查 Ollama 状态 
pull_model # 拉取模型 
install_ollama # 安装 Ollama 
open_external # 打开外部链接

开发流程

npm install # 安装依赖 
npm run tauri dev # Tauri 开发模式 
npm test # 前端测试 
npm run release # patch 版本 
bash release.sh minor # minor 版本

架构亮点

单文件 CSS：全局样式通过 style.css 导入
统一弹窗：Modal.svelte 适配三种模式（confirm/prompt/newPost）
原子写入：get/save_settings 采用 0o600 权限控制
流式传输：ai_chat_stream 通过 SSE 实现实时对话

未来方向

增加多语言支持
实现文章版本控制
支持 Markdown 语法高亮
集成 Git 脚本自动部署

项目遵循 Apple 风格设计，注重用户体验与开发效率，所有核心功能均通过 Svelte 5 和 Vite 实现，保持轻量级与高性能。

网络，博客 on My Life is Going On