mirror of
https://github.com/qingchencloud/clawpanel.git
synced 2026-05-30 04:40:18 +08:00
feat(ux): 小白 UX 全面改造 - 错误友好度 + 致命操作强确认 + 空状态 + 新手引导 + 术语表
面向小白用户的产品定位重塑,从七大 UX 痛点逐一改造:
## U1 错误友好度(59 处改造)
- 新工具 src/lib/humanize-error.js:自动把后端原始错误(fetch failed、ENETUNREACH、ENOENT 等)
映射成「主行 + hint 行动建议 + 折叠技术详情」三段式结构化对象
- toast 组件升级支持 { message, hint, raw } 结构化入参,向后完全兼容
- 14 个 page 文件中所有 toast(t('xxx.failed') + ': ' + e, 'error') 替换为 toast(humanizeError(e, t(...)), 'error')
- common.js 加 error.* / errorHint.* 共 13 个新 i18n 键(11 语言):
网络/Gateway 未启动/命令缺失/权限/超时/限流/未找到/鉴权/服务繁忙/通用
## U2 致命操作强确认(14 处改造)
- showConfirm 升级支持结构化对象 { message, impact[], title, confirmText, cancelText, variant }
- 加 .modal-impact-list 红边样式(让小白看清楚删了会丢什么)
- 14 处致命操作改造,每处显示影响列表 + 红色「删除/移除/重置」按钮 + 灰色「保留」取消:
· agents.js 删除 Agent(动态显示 N 个绑定影响)
· channels.js 移除平台(动态算 N 个 binding)+ 移除 Agent binding
· memory.js 删除记忆文件
· services.js 卸载 Gateway(3 段影响)+ 删除备份
· models.js 批量删模型
· chat.js 删除会话 + 重置会话
· dreaming.js 重置梦境日记 + 清空 grounded 短期记忆
· agent-detail.js 解除渠道绑定
· cron.js 删除任务(OpenClaw + Hermes 两端)
- skills.js 原生 confirm() 改 showConfirm
- hermes-cron.js 原生 confirm() 改 showConfirm,顺手修末尾多余 `}` 的 syntax 残留
## U3-C 空状态 emoji+CTA(5 页面)
- 通用 .empty-state 组件(大 emoji + 标题 + 副本 + CTA 按钮 + 紧凑变体)
- agents.js: 🤖 + 「+ 新建 Agent」CTA
- memory.js: 🧠 + 「+ 新建记忆文件」CTA(紧凑版)
- cron.js: ⏰ + 「+ 新建任务」CTA
- skills.js: 🛠️ + 「技能商店」CTA(点击切 Tab)
- channels.js: 💬 + 紧凑提示
- CTA 巧妙复用页面顶部已有按钮的 click,零重复逻辑
## U3-B Dashboard 新手任务卡片
- 蓝紫渐变卡片,4 步任务自动检测:启动 Gateway / 添加模型 / 创建 Agent / 第一次聊天
- 已完成:✓ 徽章 + 删除线 + 60% 透明
- 未完成:编号徽章 + 蓝色 CTA 按钮跳对应页面
- 全部完成 → 庆祝条「🎉 全部搞定!」+ 关闭按钮
- localStorage 标记,用户主动关闭后永久隐藏
- 14 个新 i18n 键,文案小白化(Gateway 是「发动机」/ Agent 是「分身」/ 模型给 AI 装「大脑」)
## U3-A 术语表页(/glossary)
- 25 个核心术语 × 4 大分类(核心 8 / 模型 6 / 接入 5 / 进阶 6)
- 搜索框实时过滤 + Tab 切换分类 + 卡片网格布局
- 每条术语:「比喻 + 一句话」描述(避免循环引用)+ 「打开页面 →」CTA 直达配置
- 3 语言(zh-CN / en / zh-TW)完整翻译,其他 8 语言 fallback
- 双引擎(OpenClaw + Hermes)共用路由
- dashboard quick-actions 加「📖 面板术语」入口
## U3-D 术语 ⓘ tooltip
- 通用 src/lib/term-tooltip.js helper:termHelpHtml(id) + attachTermTooltips(root)
- 8 个高频术语精简表(OAuth / Webhook / Bot Token / API Key / Token / Context Window / Binding / Scope)
- channels.js 字段 label 智能匹配关键词自动追加 ⓘ(覆盖 8 个渠道全部敏感字段)
- models.js 添加/编辑 provider 的 API Key label 也加 ⓘ
- 点 ⓘ → 弹小型 modal 含解释 + 「打开术语表 →」CTA
- attachTermTooltips 内部去重,可安全多次调用
## 累计交付
- 4 个新文件(humanize-error.js / term-tooltip.js / glossary.js page / glossary.js i18n)
- 6 个升级文件(toast / modal / components.css / dashboard / channels / models)
- 14 个 page 错误 toast 友好化(59 处)
- 14 处致命操作强确认
- 5 处空状态升级 + Dashboard 新手卡片 + 术语表 + ⓘ tooltip
- 109 个新 i18n 键(11 语言)
- Build 全程通过
This commit is contained in:
@@ -477,6 +477,11 @@ export default {
|
||||
cronCustomExpr: _('自定义 cron 表达式', 'Custom cron expression', '自訂 cron 表達式'),
|
||||
cronPreview: _('预览', 'Preview', '預覽'),
|
||||
cronConfirmDelete: _('确定要删除任务「{name}」吗?', 'Delete job "{name}"?', '確定要刪除任務「{name}」嗎?'),
|
||||
cronDeleteTitle: _('删除任务「{name}」', 'Delete job "{name}"', '刪除任務「{name}」', 'ジョブ「{name}」を削除', '작업「{name}」 삭제', 'Xoá tác vụ "{name}"', 'Eliminar tarea "{name}"', 'Excluir tarefa "{name}"', 'Удалить задачу "{name}"', 'Supprimer la tâche "{name}"', 'Aufgabe "{name}" löschen'),
|
||||
cronDeleteBtn: _('删除', 'Delete', '刪除', '削除', '삭제', 'Xoá', 'Eliminar', 'Excluir', 'Удалить', 'Supprimer', 'Löschen'),
|
||||
cronDeleteCancel: _('保留', 'Keep', '保留', '保持', '유지', 'Giữ lại', 'Conservar', 'Manter', 'Оставить', 'Conserver', 'Behalten'),
|
||||
cronDeleteImpactStop: _('任务将停止,不再按计划执行', 'Job will stop and will no longer run on schedule', '任務將停止,不再按計畫執行', 'ジョブは停止し、スケジュール実行されなくなります', '작업이 중지되고 더 이상 예약대로 실행되지 않습니다', 'Tác vụ sẽ dừng và không chạy theo lịch nữa', 'La tarea se detendrá y dejará de ejecutarse según el calendario', 'A tarefa será interrompida e deixará de rodar no agendamento', 'Задача остановится и не будет выполняться по расписанию', 'La tâche s\u2019arrêtera et ne s\u2019exécutera plus selon le planning', 'Die Aufgabe stoppt und wird nicht mehr nach Zeitplan ausgeführt'),
|
||||
cronDeleteImpactHistory: _('已执行的历史记录会被保留', 'Past execution history will be kept', '已執行的歷史紀錄會被保留', '実行履歴は保持されます', '실행 이력은 유지됩니다', 'Lịch sử thực thi sẽ được giữ lại', 'El historial de ejecuciones se conservará', 'O histórico de execuções será mantido', 'История выполнения будет сохранена', 'L\u2019historique d\u2019exécution sera conservé', 'Der Ausführungsverlauf bleibt erhalten'),
|
||||
cronSaving: _('保存中...', 'Saving...', '儲存中...'),
|
||||
cronNameRequired: _('请输入任务名称', 'Job name is required', '請輸入任務名稱'),
|
||||
cronPromptRequired: _('请输入 AI 指令', 'AI prompt is required', '請輸入 AI 指令'),
|
||||
|
||||
Reference in New Issue
Block a user