chenyuxuan/arcs

Fork 0

Files

yuuux d1d25a09e7 chore: migrate project into clean repository

2026-08-13 16:50:52 +08:00

8.7 KiB

Raw Permalink Blame History

UI框架迁移指南

新UI框架架构总结

核心特点

完全业务分离的MVP架构
- View层：纯UI渲染，无业务逻辑（info_view.c, lisa_ui_llm_primary.c）
- Presenter层：业务逻辑和生命周期管理（info_presenter.c, home_presenter.c）
- Model层：数据接口（预留，暂未实现）
导航系统
- 基于lisa_ui_nav_scr结构的页面管理
- 标准生命周期：open → show → pause → resume → close
- 通过ID进行页面导航

组件继承体系

lv_obj (LVGL基础)
  ├─ lisa_ui_llm_base (基础组件：任务栏+容器)
  │    ├─ lisa_ui_llm_primary (主页面)
  │    └─ lisa_ui_info_view (信息/二维码页面)
  └─ lisa_ui_anim / lisa_ui_anim_ext (动画组件)

老UI分析

已有页面（`/apps/arcs-mini/groups/llm/launcher/pages/`）

page_primary.c (主页面)
- emoji分阶段动画系统
- WiFi/电量状态栏
- 内容文本轮播
- 犯困模式定时器
page_info.c (信息页面)
- 二维码显示（BLE/网络）
- 顶部/底部文本提示
- 自动返回定时器

已完成迁移

✅ 完整设置系统（Settings System）

1. 设置主页面（Setting Main Page）

文件: apps-ui/apps/llm/views/setting_view.c/h

功能:

列表形式的设置菜单
支持动态添加设置项
点击回调导航到子页面

API接口:

lv_obj_t *lisa_ui_setting_view_create(lv_obj_t *parent);
void lisa_ui_setting_view_item_add(lv_obj_t *obj, const char *label, const char *icon_symbol);
void lisa_ui_setting_view_set_click_cb(lv_obj_t *obj, lisa_ui_setting_item_click_cb_t cb, void *user_data);
void lisa_ui_setting_view_clear(lv_obj_t *obj);

2. WiFi设置页面（WiFi Settings）

文件: apps-ui/apps/llm/views/wifi_view.c/h

功能:

WiFi开关控制
我的WiFi列表（已连接过）
其他WiFi列表
网络信号强度显示

3. 音量设置页面（Volume Settings）

文件: apps-ui/apps/llm/views/volume_view.c/h

功能:

音量滑块控制（0-100%）
麦克风增益滑块控制
实时数值显示

4. 关于页面（About Page）

文件: apps-ui/apps/llm/views/about_view.c/h

功能:

系统信息展示
版本号、编译日期
版权信息

5. Presenter层

文件: apps-ui/apps/llm/presenters/setting_presenter.c

功能:

统一管理所有设置页面的导航
setting_nav_scr - 主设置页面
wifi_nav_scr - WiFi设置
volume_nav_scr - 音量设置
about_nav_scr - 关于页面

6. 导航注册

在lisa_ui_app.c中注册所有设置页面
导航ID定义：
- LISA_UI_NAV_SCR_ID_SETTING
- LISA_UI_NAV_SCR_ID_SETTING_WIFI
- LISA_UI_NAV_SCR_ID_SETTING_VOLUME
- LISA_UI_NAV_SCR_ID_SETTING_ABOUT

7. 资源迁移

已拷贝所有图标和emoji资源：

Emoji动画: /assets/emoji/ - angry, blink, heart, sad, sleepy, wakeup等
图标资源: /assets/lisa_ui_assets.c/h - WiFi、电池、电量图标

✅ 信息/二维码页面（Info Page）

1. View组件

文件: apps-ui/apps/llm/views/info_view.c/h

功能:

继承自lisa_ui_llm_base
包含顶部提示文本、QR图片、底部说明文本
垂直flex布局，居中对齐

API接口:

lv_obj_t *lisa_ui_info_view_create(lv_obj_t *parent);
void lisa_ui_info_view_set_top_text(lv_obj_t *obj, const char *text);
void lisa_ui_info_view_set_bottom_text(lv_obj_t *obj, const char *text);
void lisa_ui_info_view_set_qr_image(lv_obj_t *obj, const void *src);
lv_obj_t *lisa_ui_info_view_get_qr_image(lv_obj_t *obj);

2. Presenter

文件: apps-ui/apps/llm/presenters/info_presenter.c

功能:

管理info页面生命周期
10秒自动返回主页面定时器
预留数据接口对接点

3. 导航注册

在lisa_ui_app.c中注册info_nav_scr
ID: LISA_UI_NAV_SCR_ID_WX_QRCODE
支持从主页面设置按钮跳转

4. 编译配置

已更新views/CMakeLists.txt
已更新presenters/CMakeLists.txt

页面导航流程

主页面 (Home)
  ├─ 点击设置图标 → 设置主页面 (Setting)
  │                    ├─ WiFi → WiFi设置页面
  │                    ├─ Volume → 音量设置页面
  │                    └─ About → 关于页面
  │
  └─ （预留）其他导航入口 → 信息/二维码页面 (Info)

编译配置完成

CMakeLists.txt更新

views/CMakeLists.txt - 添加所有view文件

info_view.c
setting_view.c
wifi_view.c
volume_view.c
about_view.c

presenters/CMakeLists.txt - 添加presenter
```
setting_presenter.c
```

lisa_ui_app.c - 注册所有导航

extern const struct lisa_ui_nav_scr setting_nav_scr;
extern const struct lisa_ui_nav_scr wifi_nav_scr;
extern const struct lisa_ui_nav_scr volume_nav_scr;
extern const struct lisa_ui_nav_scr about_nav_scr;

待迁移内容

🔲 主页面增强（Home Page Enhancement）

需要实现的功能

Emoji动画系统
- 分阶段动画：enter → loop → exit
- 动画配置数组（每种emoji的帧数、时长）
- 状态管理（当前emoji、阶段、循环计数）
- 适配lisa_ui_anim_ext组件
状态栏动态更新
- WiFi连接状态
- 电量显示（老版有，新版已移除）
- 状态文本（"我在听..."、"思考中..."等）
内容文本轮播
- 云端待机提示词轮换
- 定时器管理
- 文本队列
特殊模式
- 犯困模式（30秒后切换到sleepy emoji）
- 充电状态检测

🔲 设置页面（Setting Page - 可选）

如需要设置页面，需创建：

setting_view.c/h
setting_presenter.c
添加LISA_UI_NAV_SCR_ID_SETTING
注册到lisa_ui_app.c

🔲 动画资源迁移

需要将老UI的emoji图片资源迁移到新框架：

老路径: apps/arcs-mini/groups/llm/launcher/pages/private/anim_images.h
新路径: apps-ui/assets/ (需创建)

包含的emoji类型：

BLINK (眨眼)
LOVE (爱心)
SAD (难过)
ANGRY (生气)
HAPPY (开心)
CUTE (可爱)
SLEEPY (犯困)
WAIT (等待)
BATTERY_CHANGE (充电动画)

编译和测试

Linux模拟器

cd apps-ui/sim
cmake -B build && cmake --build build && ./build/lisa_ui_app_sim

操作演示

启动后显示主页面（home）
点击左上角设置图标 → 跳转到Info页面
Info页面显示10秒后自动返回主页面

数据接口对接（待实现）

Model层设计建议

// apps-ui/apps/llm/models/ui_model.h
typedef struct {
    bool wifi_connected;
    uint8_t battery_level;
    char status_text[32];
    lisa_ui_emoji_type_e current_emoji;
    char content_text[256];
    const void *qr_image_src;
} ui_model_data_t;

// 数据更新回调
typedef void (*ui_model_update_cb_t)(const ui_model_data_t *data, void *user_data);

Presenter调用Model

// 在presenter中监听数据变化
ui_model_register_callback(on_data_update, presenter_data);

// 回调中更新view
void on_data_update(const ui_model_data_t *data, void *user_data) {
    // 更新view显示
    lisa_ui_llm_primary_set_status_text(view, data->status_text);
    lisa_ui_llm_primary_set_emoji(view, data->current_emoji);
}

下一步工作优先级

高优先级：实现emoji动画系统（适配lisa_ui_anim_ext）
中优先级：迁移emoji图片资源
中优先级：实现主页面状态栏动态更新
低优先级：内容文本轮播功能
低优先级：犯困模式和特殊定时器

注意事项

IDE Lint错误

当前IDE会报lv_conf.h找不到的错误，这是正常的：

lv_conf.h在portable/目录下
CMake编译时会正确处理包含路径
不影响实际编译和运行

代码风格

使用英文注释和日志
View层不包含业务逻辑
Presenter负责生命周期和业务
保持与现有代码风格一致

迁移完成标准

所有页面View组件实现
- Info/QRCode页面
- Setting主页面
- WiFi设置页面
- Volume设置页面
- About页面
所有Presenter实现并注册
- info_presenter
- setting_presenter（含4个子页面）
资源完整拷贝
- Emoji动画资源（angry, blink, heart等）
- 图标资源（WiFi, 电池等）
编译配置完成
- CMakeLists.txt更新
- 导航系统注册
Emoji动画系统完整迁移（待实现）
模拟器测试通过
数据接口对接完成（业务层对接后）
页面导航流畅无bug

参考文档

新框架README: apps-ui/README.MD
老UI实现: apps/arcs-mini/groups/llm/launcher/pages/
LVGL文档: https://docs.lvgl.io/

8.7 KiB Raw Permalink Blame History Unescape Escape