LoganandClaude
76ec9387f0
主要变更： - RDP 远程桌面：新增 backend/pkg/rdp（RDP 引擎 + credssp/display/rle/trace）、 backend/controller/rdp*（连接/凭证/文件/会话/实时）、frontend RDP 组件与 API - Windows SMB 文件传输：backend/pkg/winsmb - 云账单同步：backend/pkg/billingsync + billing_sync/aliyun_billing，前端账单详情 - Agent CLI Kubernetes 工具：kubernetes_action/get、pod_execute/logs - 服务器导入助手：server_import_helpers、ImportCredentialSettings - 国际化与组件重构（cloud/deploy/monitor/server/system 等多模块） - 清理编译产物二进制：移除 backend/server、backend/agent/bin/aiops-agent-* - .gitignore：新增 backend/agent/ 与 .cache/（避免 334MB go-build 缓存误入库） Co-Authored-By: Claude <noreply@anthropic.com>
2.0 KiB
2.0 KiB
前端视觉与页面规范
本文档约定 AIOps 控制台的页面结构、视觉基础和复用组件。新增页面优先使用这些规范，已有页面逐步迁移。
设计目标
- 页面打开即用，避免营销式大标题和多余说明。
- 信息密度适中，优先支持扫描、筛选、对比和批量操作。
- 主题感知，颜色优先使用 Tailwind 语义色和
var(--dg-*)变量。 - 同类页面保持一致：列表、详情、弹窗、空态、加载态和错误态不重复造轮子。
页面结构
标准业务页使用 PageShell：
PageHeader：标题、简短描述、主操作按钮。FilterBar：搜索、筛选、刷新、批量操作。- 主内容区：表格、图表、详情或编辑器。
PageSection：页面内分组区域。
示例：
<PageShell>
<PageHeader title="服务器" description="管理主机资产和 Agent 状态" actions={...} />
<FilterBar left={searchInput} right={refreshButton} />
<PageSection>{table}</PageSection>
</PageShell>
状态与数据展示
- 状态统一使用
StatusBadge，不要在页面中临时拼颜色。 - 指标卡片使用
MetricCard，用于概览数值、趋势和健康状态。 - 空态优先使用
EmptyState，需要明确下一步动作时传入action。
常用状态：success、warning、danger、info、neutral、running、offline。
交互规范
- 删除、重置、停用等高危操作必须使用确认弹窗，不使用
window.confirm()。 - Dialog 必须包含
DialogDescription。 - 列表页操作按钮文案保持 2-4 字，图标按钮需要 tooltip。
- 加载中显示 skeleton 或 spinner，不能让页面无反馈。
代码约定
- 通用页面组件放在
frontend/src/components/common/。 - 基础原子组件继续放在
frontend/src/components/ui/。 - 页面组件使用
PascalCase.tsx，工具函数使用camelCase.ts。 - 新增颜色进入主题变量，不在业务组件硬编码十六进制颜色。