520kiss/xianyan

Fork 0

Files

Developer b6441a8919 api

2026-04-27 23:47:18 +08:00

21 KiB

Raw Blame History

闲言APP — 编辑器功能清单

创建时间: 2026-04-24 更新时间: 2026-04-27 版本: v0.23.0 关联文档: 07_三方库清单说明: 本文档由 06_编辑器设计.md 合并而来，涵盖架构、功能、库关联、待开发分析

一、编辑器架构

ProEditorPage (pro_image_editor 包装页)
├── ProImageEditor.memory (Frosted Glass 设计模式)
│   ├── MainEditor — 自定义 ActionBar + 底部工具栏
│   ├── PaintEditor — FrostedGlass 毛玻璃样式
│   ├── TextEditor — 15种 Google Fonts + XianyanColorPicker
│   ├── CropRotateEditor — 比例预设
│   ├── FilterEditor — 滤镜预设
│   ├── TuneEditor — 色调调整
│   ├── BlurEditor — 模糊调整
│   ├── EmojiEditor — Emoji 选择器
│   └── StickerEditor — 自定义贴纸面板
├── services/core/ — 核心服务
│   ├── ProEditorBridge — 桥接层 (configs构建 + 模型转换)
│   ├── StickerConfigBuilder — 贴纸面板构建 (玻璃/SVG/Lottie/3D等)
│   ├── WidgetLayerFactory — WidgetLayer工厂 (GlassCard/Sticker→pro.WidgetLayer)
│   ├── EditorDataReceiver — 数据接收 (路由参数/共享内容解析)
│   └── EditorThemeService — 主题管理 (system/light/dark + 自适应色)
├── services/export/ — 导出服务
│   ├── ExportService — 导出链路 (保存相册/分享/高分辨率导出+WidgetLayer合成)
│   ├── XycardService — .xycard格式 (ZIP压缩/解压 + JSON序列化)
│   ├── DraftService — 草稿系统 (SharedPreferences + pro草稿)
│   └── WidgetLayerRenderer — WidgetLayer预渲染 (玻璃/SVG/Lottie/水印→PNG)
├── services/sticker/ — 贴纸服务
│   ├── GlassRenderService — 玻璃卡片渲染 (预设/WidgetLoader/导出)
│   ├── NetworkStickerService — 网络贴纸 (6类36张 + 分类面板)
│   ├── FontService — 字体管理 (Google Fonts 10种)
│   └── WatermarkService — 水印系统 (平铺/单点 + 4种预设)
└── services/content/ — 内容服务
    ├── HitokotoService — 一言API (12种类型 + 批量获取)
    ├── AdaptiveThemeService — 自适应主题色 (FluidPalette + ColorScheme)
    └── ImageImportService — 图片导入 (相册/相机/文件 + URL缓存 + 大图预处理)
├── services/image/ — 图片处理服务
│   ├── ImageInfoService — 图片信息读取 (尺寸/格式/EXIF旋转)
│   └── ImageCompressService — 图片压缩 (导出压缩/导入预处理/缩略图/GIF帧)
├── pages/tools/ — 工具页面
│   ├── ImagePreviewPage — 全屏大图预览 (缩放/旋转/双击循环/Hero)
│   ├── ImageGalleryPage — 多图画廊 (PhotoViewGallery)
│   └── ImageCropPage — 裁剪编辑器 (裁剪/旋转/翻转/undo/redo)
└── widgets/editors/ — 编辑器组件
    └── ImageInfoPanel — 图片信息面板 (尺寸+格式+旋转+文件大小)

二、现有功能清单

2.1 核心编辑功能 (8个子编辑器)

#	功能	用途	关联库	文件
1	🎨 画笔编辑	自由绘制/标注	pro_image_editor	PaintEditor
2	✏️ 文字编辑	添加/编辑文字层	google_fonts, flex_color_picker	TextEditor
3	✂️ 裁剪旋转	裁剪/旋转/比例	pro_image_editor	CropRotateEditor
4	🎛️ 色调调整	亮度/对比度/饱和度等	pro_image_editor	TuneEditor
5	🔍 滤镜	预设滤镜效果	pro_image_editor	FilterEditor
6	💨 模糊	高斯模糊调整	pro_image_editor	BlurEditor
7	😀 表情	Emoji选择器	pro_image_editor	EmojiEditor
8	🧩 贴纸	自定义贴纸面板	(见2.2)	StickerEditor

2.2 贴纸系统 (4类)

#	类型	数量	用途	关联库	文件	状态
1	🧊 液态玻璃	8种预设	毛玻璃卡片贴纸	liquid_glass_widgets	glass_render_service.dart	✅
2	🫧 轻量玻璃	4种预设	轻量玻璃形状贴纸	liquid_glass_easy	glass_render_service.dart	✅
3	🖼 SVG贴纸	8种	矢量图形贴纸	flutter_svg	pro_editor_bridge.dart	✅
4	✨ 动画贴纸	6种	Lottie动画贴纸	lottie	pro_editor_bridge.dart	✅
5	🌐 网络贴纸	6类36张	在线贴纸资源	cached_network_image	network_sticker_service.dart	✅
6	🎨 形状贴纸	4种	基础几何形状	flutter内置	pro_editor_bridge.dart	✅
7	🧊 3D模型贴纸	5+种	3D模型贴纸+预览	flutter_3d_controller	sticker_3d_panel.dart	✅ v0.23.0

2.3 文字系统

#	功能	用途	关联库	文件
1	15种字体	中6+英9字体选择	google_fonts	pro_editor_bridge.dart
2	颜色选择器	色轮+色板+最近使用	flex_color_picker	XianyanColorPicker
3	文字样式	粗体/斜体/下划线/删除线	pro_image_editor	TextEditor
4	文字对齐	左/中/右对齐	pro_image_editor	TextEditor

2.4 导出链路

#	功能	用途	关联库	文件
1	保存相册	高分辨率PNG保存	gal	export_service.dart
2	社交分享	系统分享面板	share_plus	export_service.dart
3	.xycard导出	源文件ZIP格式	archive, crypto	xycard_service.dart
4	.xycard导入	恢复编辑项目	archive, file_picker	xycard_service.dart
5	草稿保存	SharedPreferences持久化	shared_preferences	draft_service.dart
6	Pro草稿	pro_image_editor状态序列化	pro_image_editor	draft_service.dart
7	🎬 GIF导出	RepaintBoundary逐帧截图→GifEncoder	image	gif_export_service.dart
8	📸 动态照片导出	iOS=Live Photo/Android=Motion Photo	image	motion_photo_export_service.dart
9	🗜️ 导出压缩	JPEG/WebP压缩+质量+尺寸控制	flutter_image_compress	image_compress_service.dart

2.5 主题与视觉

#	功能	用途	关联库	文件
1	3种主题模式	system/light/dark	shared_preferences	editor_theme_service.dart
2	自适应主题色	从图片提取调色板	adaptive_palette	adaptive_theme_service.dart
3	流体背景	渐变背景生成	adaptive_palette	adaptive_theme_service.dart
4	Frosted Glass	毛玻璃UI风格	pro_image_editor/frosted_glass	pro_editor_bridge.dart
5	入场动画	fade+scale入场	flutter_animate	pro_editor_page.dart
6	导出庆祝	confetti粒子效果	confetti	pro_editor_page.dart

2.6 内容与导入

#	功能	用途	关联库	文件
1	一言API	随机句子一键添加	dio	hitokoto_service.dart
2	图片导入	相册/相机/文件选择+大图预处理+EXIF校正	image_picker, file_picker, extended_image	image_import_service.dart
3	权限管理	相机/相册/存储权限	permission_handler	permission_service.dart
4	水印系统	平铺/单点4种预设	flutter内置	watermark_service.dart
5	数据接收	路由参数/共享内容	flutter内置	editor_data_receiver.dart

2.7 UI交互

#	功能	用途	关联库	文件
1	屏幕适配	多端响应式	flutter_screenutil	全局
2	Hero转场	页面切换动画	heroine	路由层
3	底部面板	iOS风格弹窗	stupid_simple_sheet	子面板
4	加载占位	shimmer骨架屏	shimmer	加载状态
5	入场动画	多种动画效果	animate_do	自定义widgets

2.8 图片处理 (Phase 5)

#	功能	用途	关联库	文件
1	📐 图片尺寸读取	导入时读取宽高+EXIF旋转	image_size_getter	image_info_service.dart
2	🏷️ 图片格式检测	PNG/JPEG/GIF/WebP格式识别	image_size_getter	image_info_service.dart
3	🔄 EXIF旋转校正	自动检测并校正EXIF旋转	image_size_getter, flutter_image_compress	image_import_service.dart
4	ℹ️ 图片信息面板	尺寸+格式+旋转+文件大小展示	image_size_getter	image_info_panel.dart
5	📏 状态栏图片尺寸	编辑器状态栏显示当前图片信息	image_size_getter	editor_status_bar.dart
6	🔍 全屏大图预览	PhotoView缩放+旋转+双击循环+Hero	photo_view	image_preview_page.dart
7	🖼️ 多图画廊	PhotoViewGallery多图浏览+页码	photo_view	image_preview_page.dart
8	✂️ 裁剪编辑器	裁剪/旋转/翻转/宽高比/undo/redo	extended_image	image_crop_page.dart
9	🧠 大图内存优化	ExtendedResizeImage降采样+maxBytes	extended_image	image_import_service.dart
10	🗜️ 导入预处理	大图压缩到4096px内+质量保持	flutter_image_compress	image_compress_service.dart

三、关联库一览

库	版本	编辑器用途	集成状态	跨平台
pro_image_editor	本地	核心编辑引擎	✅	全平台
liquid_glass_widgets	本地	液态玻璃贴纸	✅	全平台
liquid_glass_easy	本地	轻量玻璃贴纸	✅	全平台
google_fonts	^6.2.0	15种字体	✅	全平台
flutter_svg	^2.0.0	SVG贴纸	✅	全平台
lottie	^3.3.0	动画贴纸	✅	全平台+WASM
cached_network_image	^3.3.0	网络贴纸	✅	全平台
adaptive_palette	^3.0.0	自适应主题色	✅	全平台
flex_color_picker	本地	颜色选择器	✅	全平台
gal	^2.3.0	保存相册	✅	全平台
share_plus	^8.0.0	社交分享	✅	全平台
archive	^3.4.0	.xycard导出	✅	全平台
flutter_animate	^4.5.0	入场动画	✅	全平台
confetti	^0.8.0	导出庆祝	✅	全平台+WASM
image_picker	^1.2.1	相册/相机	✅	Android+iOS+Web
permission_handler	^11.3.0	权限管理	✅	Android+iOS+Web+Win
image	^4.1.0	图片处理	✅	全平台
flutter_shaders_ui	^0.1.0	Shader效果	✅	全平台
flutter_scene	^0.6.0	3D GPU渲染	❌ 已移除，统一flutter_3d_controller	macOS+iOS
flutter_3d_controller	^1.3.0	3D WebView渲染	✅	Android+iOS+Web
file_picker	^8.0.7	文件选择	✅ 备用	全平台
image_size_getter	^2.4.1	图片尺寸/格式检测	✅	全平台
photo_view	^0.15.0	图片缩放查看器	✅	全平台
extended_image	^10.0.1	增强图片组件+裁剪+内存优化	✅	全平台
flutter_image_compress	^2.4.0	原生图片压缩	✅	全平台

四、待开发功能分析

4.1 P0 — 核心缺失 (影响基本体验)

#	功能	说明	需要的库	预估难度	状态
1	首页句子卡片流	APP入口核心功能	dio + drift	⭐⭐⭐	✅ v0.15.0
2	收藏/历史持久化	用户数据保存	drift	⭐⭐	✅ v0.15.0

4.2 P1 — 编辑器增强 (提升专业度)

#	功能	说明	需要的库	预估难度	状态
3	WidgetLayer导出渲染	玻璃/SVG/Lottie导出为图片	image + RepaintBoundary	⭐⭐⭐⭐	✅ v0.16.0
4	智能对齐吸附	拖拽时自动对齐+辅助线	flutter内置	⭐⭐⭐	✅ v0.16.0
5	取色器	从图片取色+放大镜+HEX	image库像素读取	⭐⭐	✅ v0.16.0
6	渐变自定义	多节点+角度编辑器	flutter内置	⭐⭐⭐	✅ v0.16.0
7	撤销/重做增强	无限撤销+操作历史+树形面板+导出	pro内置	⭐⭐	✅ v0.16.0

4.3 P2 — 进阶功能 (差异化竞争力)

#	功能	说明	需要的库	预估难度	状态
8	Shader效果贴纸	flutter_shaders_ui集成	flutter_shaders_ui	⭐⭐⭐	✅ v0.20.0
9	高级导出后处理	缩放/裁剪/压缩/格式转换	image + flutter_image_compress	⭐⭐	✅ v0.22.0
10	模板市场	预设模板浏览+一键使用	supabase	⭐⭐⭐⭐	⏳
11	批量导出	多张卡片批量处理	isolate	⭐⭐⭐	⏳
12	图层管理面板	可视化图层列表+排序	flutter内置	⭐⭐	✅ v0.20.0
13	🧊 3D模型贴纸	3D模型选择+添加到画布	flutter_3d_controller	⭐⭐⭐⭐	✅ v0.23.0 统一WebView渲染+集成到编辑器
14	🎮 3D预览页面	独立3D模型查看+动画控制	flutter_3d_controller	⭐⭐⭐	✅ v0.23.0 路由已注册+真实3D渲染
15	📐 平台3D调度	按平台选择3D引擎+降级	flutter内置	⭐⭐	✅ v0.23.0 统一flutter_3d_controller+低端设备检测

4.4 P3 — 锦上添花

#	功能	说明	需要的库	预估难度	状态
13	图片预览缩放	pinch-to-zoom预览	photo_view	⭐	✅ v0.22.0
14	网络背景图高级缓存	大图缓存+手势	extended_image	⭐⭐	✅ v0.22.0
15	自定义贴纸导入	用户上传本地图片	image_picker	⭐	⏳
16	AI辅助排版	智能文字布局建议	AI API	⭐⭐⭐⭐⭐	⏳

五、文件索引

services/ 目录结构 (v0.14.3 重组后)

services/
├── core/ (5)
│   ├── pro_editor_bridge.dart — 桥接层 (configs构建 + 模型转换)
│   ├── sticker_config_builder.dart — 贴纸面板构建 (玻璃/SVG/Lottie/3D)
│   ├── widget_layer_factory.dart — WidgetLayer工厂 (GlassCard/Sticker→pro.WidgetLayer)
│   ├── editor_data_receiver.dart — 数据接收 (200行)
│   └── editor_theme_service.dart — 主题管理 (127行)
├── export/ (6)
│   ├── export_service.dart — 导出链路 (126行)
│   ├── xycard_service.dart — .xycard格式 (388行)
│   ├── draft_service.dart — 草稿系统 (550行)
│   ├── widget_layer_renderer.dart — WidgetLayer预渲染 (218行)
│   ├── gif_export_service.dart — GIF导出服务
│   ├── motion_photo_export_service.dart — 动态照片导出
│   └── image_compress_service.dart — 图片压缩 (导出/导入/缩略图/GIF帧)
├── sticker/ (4)
│   ├── glass_render_service.dart — 玻璃卡片渲染 (528行)
│   ├── network_sticker_service.dart — 网络贴纸 (556行)
│   ├── font_service.dart — 字体管理 (44行)
│   └── watermark_service.dart — 水印系统 (199行)
├── content/ (3)
│   ├── hitokoto_service.dart — 一言API (130行)
│   ├── adaptive_theme_service.dart — 自适应主题色 (85行)
│   └── image_import_service.dart — 图片导入 (大图预处理+EXIF校正)
└── image/ (2)
    ├── image_info_service.dart — 图片信息读取 (尺寸/格式/EXIF旋转)
    └── (image_compress_service.dart 在 export/ 下)

presentation/ 关键文件

文件	用途	行数
pro_editor_page.dart	主编辑器页面	~800
mini_editor_widget.dart	迷你编辑器内嵌	~300
mini_editor_sheet.dart	迷你编辑器半屏	~250
mini_editor_page.dart	迷你编辑器全屏	~300
draft_list_page.dart	草稿箱列表	~200

domain/ 数据模型

文件	用途
editor_models.dart	所有编辑器数据模型 (TextLayer/GlassCardLayer/StickerLayer等)

六、已完成的增强功能 (v0.9.3)

6.1 画布比例切换

CanvasAspectRatio 枚举: 5 种预设
updateCanvasRatio() 等比缩放文字层位置和字号
CanvasRatioBar UI 组件

6.2 网格参考线

showGrid / gridSize 字段
_GridPainter: 三等分线 (粗亮) + 交叉点圆点阵
NavBar 网格开关按钮 (CupertinoIcons.grid, toggle 高亮)

6.3 图层锁定

TextLayer.locked 字段
toggleLayerLock() 方法
图层面板锁图标 (🔒橙色高亮)
拖拽拦截: locked 层 onPanUpdate/onPanEnd = null

6.4 首页句子卡片流 (v0.15.0 — Batch 1)

Hitokoto API 接入 (12种类型筛选)
Drift 数据库持久化 (收藏/历史/缓存)
分类筛选标签栏
无限滚动加载
离线模式提示
收藏页面 + 阅读历史页面
路由注册 + 个人中心入口

6.5 编辑器增强 (v0.16.0 — Batch 2)

WidgetLayer导出渲染 — 玻璃/SVG/Lottie/水印/Emoji预渲染为PNG
智能对齐吸附 — 拖拽时自动对齐中心/边缘，支持Text/Glass/Sticker层
对齐辅助线 — 青色辅助线实时显示对齐位置
取色器增强 — 实时预览+放大镜+HEX色值显示+拖拽拾取
渐变编辑器 — 多节点渐变+角度旋转+实时预览+增删节点
操作历史记录 — UndoAction类+actionHistory列表+操作描述emoji
操作历史面板(树形) — 树形布局+撤销/重做/保存工具栏+点击回档+导出JSON

七、.xycard 卡片样式系统

格式 (ZIP)

.xycard
├── manifest.json      # 元信息
├── style.json         # 完整样式数据 (所有图层属性)
├── fonts/             # 内嵌字体 (可选)
├── images/            # 内嵌图片 (可选)
└── preview.png        # 预览缩略图

设计原则

完整还原 — 所有图层属性均可序列化/反序列化
可再编辑 — .xycard导入后可继续编辑
跨平台 — ZIP格式，Android/iOS/Web通用
字体容错 — 缺失字体自动降级到系统字体
轻量传输 — 图片压缩 + hash去重

八、编辑器开发路线图

✅ Step 1 — 基础 (v0.9.0): 画布 + 文字层 + 背景 + 导出 + 模板
✅ Step 2 — 增强 (v0.9.1): 迷你编辑器 + 代码重构
✅ Step 3 — 布局 (v0.9.3): 比例切换 + 网格 + 图层锁定
✅ Step 4 — ProEditor (v0.14.0): pro_image_editor集成 + FrostedGlass主题 + 全子编辑器
✅ Step 5 — 扩展 (v0.14.1): 液态玻璃/SVG/Lottie/字体/水印/一言/主题色
✅ Step 6 — 增强 (v0.14.1+): 颜色选择器/网络贴纸/权限/动画/主题切换/数据接收
✅ Step 7 — 重组 (v0.14.3): services目录重组 + 功能文档整合
✅ Step 8 — 导出 (v0.16.0): WidgetLayer预渲染 + 智能对齐 + 取色器 + 渐变编辑 + 操作历史
✅ Step 9 — 首页 (v0.15.0): 句子卡片流 + 收藏/历史持久化
✅ Step 10 — 图层 (v0.20.0): 图层联动 + 撤销/重做统一 + Shader效果
✅ Step 11 — 3D引擎 (v0.21.0): 3D模型贴纸 + 预览页 + 平台调度
✅ Step 12 — 图片处理 (v0.22.0): 图片信息读取 + 全屏预览 + 裁剪编辑器 + 大图内存优化 + 压缩服务
✅ Step 13 — 3D修复 (v0.23.0): 统一flutter_3d_controller + 移除useScene + 低端设备检测 + 图层模型统一 + pro_editor_bridge拆分
🔮 Step 14 — 高级: 模板市场 + 批量导出
🔮 Step 15 — 生态: AI辅助排版 + 自定义贴纸导入

九、归档列表

已完成的功能模块和架构变更，记录版本、核心产出和状态

9.1 功能归档

归档项	版本	完成日期	核心产出	完成度
基础编辑器 (画布+文字+背景+导出+模板)	v0.9.0	2026-04	EditorPage+Canvas+Export	100%
迷你编辑器 (3种部署模式)	v0.9.1	2026-04	MiniEditorWidget/Sheet/Page	100%
画布比例+网格+图层锁定	v0.9.3	2026-04	CanvasRatioBar+GridPainter+LayerLock	100%
ProEditor重构	v0.14.0	2026-04-23	ProImageEditor+FrostedGlass	100%
液态玻璃/SVG/Lottie/字体/水印/一言	v0.14.1	2026-04-24	贴纸系统+内容服务	100%
服务目录重组	v0.14.3	2026-04-24	services/ 5个子目录	100%
WidgetLayer导出+智能对齐+取色器+渐变	v0.16.0	2026-04-24	WidgetLayerRenderer+SnapHelper+ColorPicker	100%
首页句子卡片流+收藏/历史	v0.15.0	2026-04-24	HitokotoService+Drift持久化	100%
图层管理+撤销重做增强	v0.20.0	2026-04-24	LayerPanel+LayerSnapshotService	92%
3D模型贴纸+3D预览+平台调度	v0.21.0	2026-04-24	Sticker3DPanel+Model3DPreviewPage	71%
图片压缩+大图预览+裁剪+信息读取	v0.22.0	2026-04-25	ImageCompressService+ImagePreview+ImageCrop	95%
3D修复+架构优化	v0.23.0	2026-04-27	统一3D渲染+图层模型统一+bridge拆分	100%

9.2 架构变更归档

变更	版本	说明
flutter_scene → flutter_3d_controller	v0.23.0	移除useScene双分支，统一WebView渲染路径
StickerLayer → StickerLayerInfo/LayerInfo	v0.23.0	sticker_picker迁移到统一图层模型
pro_editor_bridge.dart 拆分	v0.23.0	992行→3文件: bridge+sticker_config_builder+widget_layer_factory
3D贴纸导出渲染	v0.23.0	WidgetLayerRenderer支持3D层(静态快照)
decoration/nature 3D模型扩展	v0.23.0	model_catalog.json新增5个3D模型(在线CDN)
低端设备检测	v0.23.0	Platform3DService自动检测+UI降级提示

9.3 待开发 (未归档)

功能	优先级	前置条件
模板市场	P2	Supabase后端
批量导出	P2	isolate
AI辅助排版	P3	AI API
自定义贴纸导入	P3	image_picker
Windows/Linux 3D支持	P3	flutter_3d_controller桌面端

21 KiB Raw Blame History Unescape Escape

闲言APP — 编辑器功能清单

一、编辑器架构

二、现有功能清单

2.1 核心编辑功能 (8个子编辑器)

2.2 贴纸系统 (4类)

2.3 文字系统

2.4 导出链路

2.5 主题与视觉

2.6 内容与导入

2.7 UI交互

2.8 图片处理 (Phase 5)

三、关联库一览

四、待开发功能分析

4.1 P0 — 核心缺失 (影响基本体验)

4.2 P1 — 编辑器增强 (提升专业度)

4.3 P2 — 进阶功能 (差异化竞争力)

4.4 P3 — 锦上添花

五、文件索引

services/ 目录结构 (v0.14.3 重组后)

presentation/ 关键文件

domain/ 数据模型

六、已完成的增强功能 (v0.9.3)

6.1 画布比例切换

6.2 网格参考线

6.3 图层锁定

6.4 首页句子卡片流 (v0.15.0 — Batch 1)

6.5 编辑器增强 (v0.16.0 — Batch 2)

七、.xycard 卡片样式系统

格式 (ZIP)

设计原则

八、编辑器开发路线图

九、归档列表

9.1 功能归档

9.2 架构变更归档

9.3 待开发 (未归档)

21 KiB

Raw Blame History