Deshab-OS/docs/上下文/设计Winux-Kate桌面UI.md

设计Winux-Kate桌面UI

需求

Deshab 桌面完全复刻 Winux-Kate（D:\Code\Winux-Kate）结构，不是仿照。

---

Winux-Kate 技术栈

• 前端: React + TypeScript + Vite
• 后端: Rust + Tauri
• 核心组件: window_manager.rs, apps.rs, DesktopPage.tsx, TaskView.tsx
• 样式: theme.css, CSS Modules

---

Kate 桌面结构

三层布局

┌──────────────────────────────────────────┐
│ Topbar (34px)                            │
│ 品牌 | WS-1|0 工作区 | DASH/IDE/DESK | PG│
├──────────────────────────────────────────┤
│ Page Host                                │
│ (DASHBOARD / IDE / DESKTOP / Custom)     │
├──────────────────────────────────────────┤
│ Statusbar / Taskbar (24px)               │
└──────────────────────────────────────────┘

页面结构

页面	Kate 组件	Deshab 实现
1.DASHBOARD	四面板布局	TERM-01/02 + EDITOR + FILES
2.IDE	.ide-tabs + dot + embed-empty	dot(39FF14) + +NEW IDE 按钮 + credit
3.DESKTOP	DesktopGrid 图标 + 任务栏	左上网格(104px列宽,18px gap,24px pad) + 窗口 + 任务栏

顶栏元素

• 品牌: DESHAB DEAICUP STUDIO
• 工作区切换: WS-1|0, WS-2|1 等
• 页面切换按钮: DASH / IDE / DESK
• PG 时钟

任务栏（DESKTOP 页）

• 窗口项（最大120px宽度）
• ADOPT（收纳 = 所有窗口收归当前工作区并取消最小化）
• 署名 DEAICUP
• EXIT 按钮（KS_DANGER 0xFFFF4D6D 红色）

---

Kate 色值体系（deshab_ui.h）

/* 背景层级 */
#define KS_BG_PRIMARY    0xFF02040Au  // 深空黑
#define KS_BG_SECONDARY  0xFF0A1428u  // 次级背景
#define KS_BG_TERTIARY   0xFF101C30u  // 三级背景

/* 文本色 */
#define KS_TEXT_PRIMARY  0xFFE8F4FCu  // 接近纯白
#define KS_TEXT_DIM      0xFF90B0C8u  // 暗文本（对比度10.8:1）
#define KS_TEXT_INVERT   0xFF02040Au  // 反色

/* 强调色 */
#define KS_ACCENT        0xFF00E5FFu  // 霓虹青（主强调）
#define KS_ACCENT2       0xFF39FF14u  // 霓虹绿（dot标识）
#define KS_ACCENT_DIM    0xFF2A4A5Au  // 暗青（hover）

/* 边框色 */
#define KS_BORDER        0xFF2A6070u  // 对比度8.2:1
#define KS_BORDER_FOCUS  0xFF00E5FFu
#define KS_BORDER_DIM    0xFF1A2A40u

/* 状态色 */
#define KS_DANGER        0xFFFF4D6Du  // EXIT按钮
#define KS_WARN          0xFFFFCC00u

优化后的视觉效果

• 面板: 仅保留背景+边框+标题栏（移除光晕+扫描线）
• du_kate_glow_border() 简化为单层边框
• 窗口标题栏: 纯色替代渐变
• hover 状态: 同时改变背景和边框
• active 状态: 强调色背景 + 反转文字

---

Boot 打字机动画

• 标题每字符: busy_delay(2000000)
• 副标题停顿: busy_delay(2500000)
• 打字机每字符: busy_delay(125000)
• 最后停留: busy_delay(10000000)

---

双缓冲消除闪烁

u32 *g_real_fb;              // 真实 framebuffer
// g_fb.fb 指向 SPRITE_BUF_ADDR (0x7000000) sprite buffer

void flip_buffer(void);      // 全屏 redraw 后一次性复制
void flip_rect(x, y, w, h); // 仅光标移动时局部复制（24x24）

主循环两条路径：

• need_redraw → 全屏 redraw + flip_buffer()
• moved → 局部 flip_rect()

---

性能优化

1. 亮度调整延迟应用

static int g_bright_applied = 100;
// g_bright >= 100 时跳过；g_bright == g_bright_applied 时跳过
// 仅在亮度变化时处理全屏（从60Hz降到1-2次/分钟）

2. 终端增量渲染

typedef struct {
    u8 dirty_rows[TERM_MAX_ROWS];  // 脏行标记
    int any_dirty;                  // 全局脏标记
} bash_state;
// any_dirty=0 时跳过绘制；只绘制 dirty_rows[r]=1 的行

3. 脏矩形渲染

#define MAX_DIRTY_RECTS 16
typedef struct { int x, y, w, h, active; } dirty_rect;
// merge_dirty_rects() 合并为包围盒
// 光标移动: 只 flip 24x24 区域
// 窗口拖拽: flip 窗口区域

4. 简化视觉效果

• 禁用扫描线: du_kate_scanlines() 改为空函数
• 消除窗口圆角: DU_RADIUS_MD/LG 从 8/12 改为 0
• 渐变缓存: 避免重复计算

5. 加速内存复制

// flip_buffer() 使用 rep movsq 批量复制
__asm__ volatile("rep movsq" : "+D"(dst), "+S"(src), "+c"(total_u64) : : "memory");

---

关键实现细节

FILES 面板

• 过滤 ELF 可执行文件和 FIRSTINI 前缀
• 保留 user 文件: USER.CON, NETCONF.CNF, FIRSTINT.XT
• 标题: FAT32:/USER

桌面图标网格

#define KATE_ICON_GAP   16     // 图标间隙（原18，优化后16）
// 左上网格: 104px 列宽, 从左→右排列换行
// 图标边框: KS_ACCENT(00E5FF) 青色

右键菜单

• "移到工作区"菜单排除当前工作区
• 无其他工作区时显示空态

自定义页（第 4+ 页）

• ide-tabs 栏: dot + 页名 + +NEW INSTANCE 按钮 + hint + credit
• 自定义页 id 从 4 开始（内置3页: DASHBOARD/IDE/DESKTOP）

DASHBOARD 面板比例

• 左侧终端: 35%（原42%，优化后缩窄）
• 右侧 FILES/EDITOR: 65%（原58%，优化后加宽）

---

验证结果

• desktop.elf 编译零警告，140312 bytes（BSS 正确分离）
• QEMU 验证: 四页面 Ctrl+Tab 切换正确
• 页面按钮: DASH/IDE/DESK（精简后）
• 双缓冲: 鼠标移动和滑块拖动无闪烁