Skip to content

feat(webui): UI 优化 v9-v16 - RemixIcon 图标系统与配色规范统一#3

Merged
massif-01 merged 16 commits intoRMinte:mainfrom
massif-01:feature/ui-optimization
Feb 6, 2026
Merged

feat(webui): UI 优化 v9-v16 - RemixIcon 图标系统与配色规范统一#3
massif-01 merged 16 commits intoRMinte:mainfrom
massif-01:feature/ui-optimization

Conversation

@massif-01
Copy link
Collaborator

@massif-01 massif-01 commented Feb 6, 2026

Summary

WebUI 界面优化，包含以下改进：

图标系统

  • 全面引入 RemixIcon 图标系统替换 emoji
  • 添加 remixicon.css 和 remixicon.woff2 字体文件
  • 统一按钮、状态指示、操作图标风格

配色规范统一

  • Toast 消息配色与按钮规范一致
    • 成功：淡绿底 #e8f5e9 + 深绿字 #2e7d32
    • 错误：淡红底 #ffebee + 深红字 #c62828
    • 警告：淡黄底 #fff8e1 + 橙字 #f57c00
    • 信息：淡蓝底 #f0f8ff + 蓝字 #007bff

页面优化

  • 系统页面: 电源保护开关改用 RemixIcon toggle
  • 文件页面: 操作按钮图标化，Tab 按钮样式统一
  • 终端页面: 日志/清屏按钮样式与 OTA 一致，提示图标改用 ri-information-line
  • 网络页面: Tab 按钮使用 btn-service-style
  • 风扇控制: 曲线管理 UI 优化

版本历史

  • v9-v10: RemixIcon 替换与对齐修复
  • v11: 风扇曲线管理 UI 优化
  • v12: UI 配色统一与按钮样式优化
  • v13: UI 细节优化
  • v14: 电源保护开关优化
  • v15: 终端页面日志按钮优化
  • v16: 系统页面 Toast 消息与按钮优化

Test Plan

  • 验证所有 RemixIcon 图标正常显示
  • 验证 Toast 消息颜色符合规范
  • 验证各页面按钮样式一致性
  • 在 ESP32-S3 上测试 WebUI 加载

Made with Cursor

massif-01 and others added 16 commits January 31, 2026 06:19
@massif-01
feat: UI overhaul + LPMU auto-boot fix + upstream sync
8304dbd 
UI Changes:
- Replace emojis with RemixIcon throughout WebUI
- Add RemixIcon font support (minimal build)
- Add favicon and logo images
- Login icon: ri-door-open-line
- Task state indicators: colored RemixIcon circles
- Footer: non-fixed positioning
- Remove redundant page titles

Backend Fixes:
- Add device.ping API (ICMP ping implementation)
- Add device.power toggle action for LPMU
- Fix LPMU not auto-starting on boot (call ts_device_lpmu_start_detection)
- Add ts_device_power_toggle() function

New Files:
- README_EN.md (English documentation)
- help/security-guide.en.mdx (English security guide)
- Web fonts and images

Merged upstream changes:
- OTA server improvements
- UI Widget persistence
- Version management system
@massif-01
Merge upstream: AGX GPIO1 fix + rule engine fix
692e637 
Merged upstream commits:
- 84e2091: AGX电源控制改用GPIO1，修复WebUI多项问题
- b50267f: 规则引擎模板执行修复 & 电压保护代码审查

Conflict resolution:
- app.js: Kept upstream functional fixes (pidFile, id attributes, interval selector)
- app.js: Preserved local UI style (RemixIcon instead of emoji)
@massif-01
Merge upstream Phase 31 + power policy updates
e62888d 
Merged upstream commits (7 new):
- 23aef4d: SSH 服务模式与日志监控功能
- d15550b: 完善服务模式日志监控
- 635897b: 调整NTP服务器顺序
- acf2434: WebUI 关机设置模态框
- 9cec214: 电压保护自动化变量更新
- 6481621: SD卡配置优先级
- f9f7317: sparkle_states 迁移到 PSRAM

Conflict resolution:
- style.css: Combined RemixIcon styles + SSH service mode styles
- app.js: Kept upstream shutdown settings button + RemixIcon icons
- app.js: Kept upstream service status refresh logic + RemixIcon
@massif-01
Merge upstream updates: memory optimization, config pack, automation
d4c1cca
@massif-01
Merge upstream: i18n multi-language support
624d13a 
- Keep local RemixIcon usage (ri-door-open-line, ri-refresh-line, etc)
- Add i18n data attributes for translation support
- Preserve all UI modifications from UI修改.md
@massif-01
Merge upstream v0.4.0: 合并上游 badges 与本地语言切换链接
28319f9
@massif-01
fix: 修复编译错误 - 删除重复定义和格式字符串错误
5faf9ef 
- 删除 ts_api_device.c 中重复的 api_device_ping 函数定义
- 删除 ts_device_ctrl.c 中重复的 ts_device_power_toggle 函数定义
- 修复 ts_ssh_log_watch.c 中 3 处格式字符串错误（使用 PRIu32 宏）

这些问题是在合并 upstream v0.4.0 后出现的重复代码。
@massif-01
feat(webui): v9-v10 UI优化 - RemixIcon 替换与对齐修复
c1a035c 
v9.0 - 设备面板与风扇控制优化：
- 删除「设备面板」和「风扇控制」标题的 emoji
- 「组件管理」按钮：📊 → ri-apps-line
- 「曲线」按钮：📈 → ri-line-chart-line
- 「刷新」按钮：🔄 → ri-refresh-line
- 「有效温度」标签：🌡️ → ri-temp-hot-line
- 「目标转速」标签：⚙️ → ri-dashboard-3-line
- 删除「风扇 X」标题的 🌀 emoji
- 删除「手动」模式的 ✋ emoji

v10.0 - 风扇控制与内存页面优化：
- 「测试温度」标签：🧪 → ri-scan-line
- 修复风扇控制状态栏左对齐问题 (padding-left: 0)
- 内存详细分析「优化建议」emoji → ri-checkbox-blank-circle-fill + 彩色样式

所有 RemixIcon Unicode 值已从本地 RemixIcon 项目验证。
@massif-01
feat(webui): v11 风扇曲线管理 UI 优化
60daad2 
- 修复绑定温度变量区块对齐问题
- 应用曲线按钮改为 btn-service-style 并移除 emoji
- 绑定按钮改为 btn-service-style 配色
- 未绑定徽章改为 OTA 按钮配色
- 曲线点 emoji 替换为 RemixIcon:
  - 🌡️ → ri-temp-hot-line
  - → → ri-arrow-right-line
  - 🌀 → ri-dashboard-3-line
- 数据监控管理页面 emoji 清理
- 添加新组件按钮改为 btn-service-style
@massif-01
feat(webui): v12 UI 配色统一与按钮样式优化
24af0eb 
- 服务状态颜色按照 UI 配色规范更新 (RUNNING/STOPPED)
- 小按钮文字颜色统一为灰色 #666 (关机设置、USB、同步、时区、曲线、刷新)
- 手动按钮圆角修复为 4px，与测试按钮形状一致
- 组件管理按钮改用 btn-service-style，与打开管理面板风格一致
- 移除语言切换器的 globe emoji 和国旗 emoji
@massif-01
feat(webui): v13 UI 细节优化
1546fb5 
- 卡片间距调整：.cards margin-top 改为 0，与 header 间距统一
- 服务状态按钮改用 btn-service-style，与 OTA 按钮风格一致
- 手动按钮添加边框，更像标准按钮
- LED 刷新按钮删除文字，只保留图标
- 任务栈表格颜色按配色规范调整
- 导航栏、进度条、状态点等颜色统一
- 内存详情页面背景色和文字色按规范调整
@massif-01 @cursoragent
feat(webui): 文件页面优化 - RemixIcon 替换与布局优化
e176055 
- Emoji → RemixIcon：编辑、删除、下载、上传、新建文件夹、刷新、面包屑根目录
- 删除所有文件页面多余 emoji（SD卡、SPIFFS、卸载、挂载、文件图标等）
- 按钮样式统一为 btn-service-style（淡蓝底 #f0f8ff + 蓝字 #007bff）
- 卸载 SD 按钮改为与 SD 卡一致的 btn-service-style
- 文件列表添加白色卡片容器，与系统页面风扇控制面板样式一致
- 工具栏按钮大小与登出按钮一致（padding: 4px 12px, font-size: 0.85rem）
- 修复表格断行问题：移除 <td> 的 display: flex，改用 inline-block
- 表格列宽优化：勾选 3%、名称 57%、大小 15%、操作 25%
- 已挂载文字配色规范（绿色 #2e7d32 + 淡绿背景 #e8f5e9）
- 新增 RemixIcon：ri-edit-line, ri-download-line, ri-upload-line, ri-folder-add-line, ri-folder-line, ri-home-line

Co-authored-by: Cursor <cursoragent@cursor.com>
@massif-01 @cursoragent
feat(webui): v14 电源保护开关优化 - CSS toggle 改为 RemixIcon 按钮
3930787 
- 保护状态开关：CSS toggle switch → RemixIcon 按钮 (ri-toggle-line/ri-toggle-fill)
- 按钮配色：禁用蓝色 (#f0f8ff/#007bff)、启用绿色 (#e8f5e9/#2e7d32)
- 添加 toggleProtection() 和 updateProtectionUI() 函数

Co-authored-by: Cursor <cursoragent@cursor.com>
@massif-01 @cursoragent
fix(webui): 保护开关样式优化 - 纯图标显示
3a3c89a 
- 移除按钮底色和边框，仅保留图标
- 禁用状态：灰色 (#666)
- 启用状态：绿色 (#2e7d32)

Co-authored-by: Cursor <cursoragent@cursor.com>
@massif-01 @cursoragent
feat(webui): v15-v16 终端页面与系统页面 UI 优化
ce34b97 
- 终端页面：删除日志按钮 emoji，日志/清屏改用 btn-service-style
- 终端页面：调整按钮与顶栏间距，提示图标改用 ri-information-line
- 系统页面：Toast 消息配色改为 MD 规范淡色方案
- 系统页面：打开管理面板按钮大小与 OTA 一致
- 新增 RemixIcon：ri-lightbulb-line, ri-information-line 等

Co-authored-by: Cursor <cursoragent@cursor.com>
@massif-01 @cursoragent
Merge upstream: feat(led) add color correction module
318e443 
- 合并上游 LED 色彩校正功能
- 保留本地 UI 修改 (v15-v16)

Co-authored-by: Cursor <cursoragent@cursor.com>
@massif-01 massif-01 merged commit 7f29d5b into RMinte:main Feb 6, 2026
1 check passed
massif-01 added a commit that referenced this pull request Feb 6, 2026
@massif-01
Revert "Merge pull request #3 from massif-01/feature/ui-optimization"
c31de92 
This reverts commit 7f29d5b, reversing
changes made to 73eea56.
massif-01 added a commit that referenced this pull request Feb 6, 2026
@massif-01 @cursoragent
revert: 回退 PR #3 和 PR #4 的 WebUI 优化
c1de584 
回退以下提交：
- ce34b97 feat(webui): v15-v16 终端页面与系统页面 UI 优化
- 3a3c89a fix(webui): 保护开关样式优化 - 纯图标显示
- 3930787 feat(webui): v14 电源保护开关优化
- e176055 feat(webui): 文件页面优化 - RemixIcon 替换与布局优化
- 1546fb5 feat(webui): v13 UI 细节优化
- 24af0eb feat(webui): v12 UI 配色统一与按钮样式优化
- 60daad2 feat(webui): v11 风扇曲线管理 UI 优化
- c1a035c feat(webui): v9-v10 UI优化 - RemixIcon 替换与对齐修复

This reverts PR #3 and PR #4.

Co-authored-by: Cursor <cursoragent@cursor.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@massif-01