/* deshab_ui.h — Deshab 视觉风格系统 * * "Sealed Arc" 设计语言：以 UTSM 封缄内存为灵感的统一视觉体系。 * * 核心设计隐喻： * Arc（弧） — 封缄/解封的视觉表达，圆角、弧形边框、弧线动画 * Seal（封） — 密封容器的安全感，卡片容器、发光边缘、透明覆盖 * Flow（流） — 数据流的连续性，渐变背景、平滑过渡、流式布局 * * 设计令牌分层： * L0 — 原始色值（Deshab Palette） * L1 — 语义色值（Semantic Colors，引用 L0） * L2 — 组件令牌（Component Tokens，引用 L1） * * 所有 UI 组件必须通过本头文件获取视觉参数，禁止硬编码颜色/尺寸。 */ #ifndef DESHAB_UI_H #define DESHAB_UI_H /* =================================================================== * 基础类型（自包含，不依赖 utsm/types.h 以便 DSK/Shell 独立使用） * =================================================================== */ typedef unsigned char du_u8; typedef unsigned short du_u16; typedef unsigned int du_u32; typedef unsigned long long du_u64; typedef long long du_i64; /* =================================================================== * L0 — Deshab 原始色板 (Deshab Palette) * * 色彩命名规则：{色调}_{明度} * 格式：0xAARRGGBB（与 framebuffer 一致，小端 x86 上 BB 置低位） * =================================================================== */ /* --- 主色调：深海蓝 (Abyss Blue) --- */ #define DP_ABYSS_900 0xFF0A1428u /* 最深：终端背景、底色 */ #define DP_ABYSS_800 0xFF0F1E38u /* 深层：暗卡片背景 */ #define DP_ABYSS_700 0xFF162848u /* 暗面：悬停态背景 */ #define DP_ABYSS_600 0xFF1E3868u /* 中暗：输入框背景 */ #define DP_ABYSS_500 0xFF284888u /* 中间：次级强调 */ #define DP_ABYSS_400 0xFF3868B0u /* 中亮：默认强调 */ #define DP_ABYSS_300 0xFF5088D0u /* 亮面：链接色 */ #define DP_ABYSS_200 0xFF78A8E8u /* 高亮：焦点指示 */ #define DP_ABYSS_100 0xFFA8CCF4u /* 最亮：浅色辅助 */ /* --- 强调色：封缄青 (Seal Cyan) — 主要操作/交互 --- */ #define DP_SEAL_900 0xFF004858u #define DP_SEAL_700 0xFF007898u #define DP_SEAL_500 0xFF00A8CCu /* 标准强调：按钮、选中态 */ #define DP_SEAL_300 0xFF44CCF0u /* 高亮强调：焦点环 */ #define DP_SEAL_100 0xFF99E8FFu /* 亮强调：发光边缘 */ /* --- 辅助色：弧光紫 (Arc Violet) — 次级/装饰 --- */ #define DP_ARC_900 0xFF2A1040u #define DP_ARC_700 0xFF5A2080u #define DP_ARC_500 0xFF8844CCu /* 装饰强调：渐变终点、图标 */ #define DP_ARC_300 0xFFB888E8u #define DP_ARC_100 0xFFE0C8F8u /* --- 中性色 (Neutral) --- */ #define DP_NEUTRAL_0 0xFF000000u /* 纯黑 */ #define DP_NEUTRAL_50 0xFF181820u /* 接近黑 */ #define DP_NEUTRAL_100 0xFF2A2A38u /* 暗灰 */ #define DP_NEUTRAL_200 0xFF484860u /* 中暗灰 */ #define DP_NEUTRAL_300 0xFF6A6A88u /* 中灰 */ #define DP_NEUTRAL_400 0xFF9090A8u /* 中亮灰 */ #define DP_NEUTRAL_500 0xFFB0B0C0u /* 标准灰 */ #define DP_NEUTRAL_600 0xFFD0D0DCu /* 亮灰 */ #define DP_NEUTRAL_700 0xFFE8E8F0u /* 浅灰 */ #define DP_NEUTRAL_800 0xFFF0F0F8u /* 接近白 */ #define DP_NEUTRAL_900 0xFFFFFFFFu /* 纯白 */ /* --- 语义辅助色 --- */ #define DP_SUCCESS 0xFF40C880u /* 成功：绿色 */ #define DP_WARNING 0xFFF0A030u /* 警告：琥珀色 */ #define DP_ERROR 0xFFFF4466u /* 错误：红色 */ #define DP_INFO 0xFF4499FFu /* 信息：蓝色 */ /* --- 渐变色 — DSK 加载器 / FirstInit 背景专用 --- */ #define DP_GRAD_TOP 0xFFC8E0F0u /* 淡蓝顶 */ #define DP_GRAD_MID 0xFF8888B0u /* 紫灰中 */ #define DP_GRAD_BOT 0xFF49306Fu /* 深紫底 */ /* --- 欢迎页专用 --- */ #define DP_WELCOME_FG 0xFFE8F2FCu /* 近白浅蓝（欢迎文字） */ /* =================================================================== * L1 — 语义色值 (Semantic Colors) * * 暗色主题（Dark Theme）— Shell / 终端 * 亮色主题（Light Theme）— FirstInit / DSK * =================================================================== */ /* --- 暗色主题 --- */ #define DS_DARK_BG_PRIMARY DP_ABYSS_900 /* 主背景 */ #define DS_DARK_BG_SECONDARY DP_ABYSS_800 /* 卡片/面板背景 */ #define DS_DARK_BG_TERTIARY DP_ABYSS_700 /* 悬停/输入框 */ #define DS_DARK_BG_INSET DP_ABYSS_600 /* 凹陷区域 */ #define DS_DARK_TEXT_PRIMARY DP_NEUTRAL_700 /* 主文字 */ #define DS_DARK_TEXT_SECONDARY DP_NEUTRAL_500 /* 次级文字 */ #define DS_DARK_TEXT_DIM DP_NEUTRAL_300 /* 注释/禁用 */ #define DS_DARK_TEXT_INVERT DP_ABYSS_900 /* 反色文字（亮背景上） */ #define DS_DARK_ACCENT DP_SEAL_500 /* 主强调 */ #define DS_DARK_ACCENT_LIGHT DP_SEAL_300 /* 高亮强调 */ #define DS_DARK_ACCENT_GLOW DP_SEAL_100 /* 发光 */ #define DS_DARK_DECORATIVE DP_ARC_500 /* 装饰色 */ #define DS_DARK_DECORATIVE_L DP_ARC_300 /* 浅装饰 */ #define DS_DARK_BORDER DP_ABYSS_500 /* 边框 */ #define DS_DARK_BORDER_FOCUS DP_SEAL_300 /* 焦点边框 */ #define DS_DARK_DIVIDER DP_ABYSS_600 /* 分隔线 */ #define DS_DARK_CURSOR DP_SEAL_500 /* 光标 */ #define DS_DARK_PROMPT DP_SEAL_300 /* 提示符 */ #define DS_DARK_SELECTION_BG DP_SEAL_900 /* 选中背景 */ /* --- 亮色主题 --- */ #define DS_LIGHT_BG_PRIMARY DP_NEUTRAL_900 /* 主背景（白） */ #define DS_LIGHT_BG_SECONDARY DP_NEUTRAL_700 /* 卡片背景 */ #define DS_LIGHT_BG_TERTIARY DP_NEUTRAL_600 /* 悬停 */ #define DS_LIGHT_BG_INSET DP_NEUTRAL_500 /* 输入框 */ #define DS_LIGHT_TEXT_PRIMARY DP_ABYSS_900 /* 主文字 */ #define DS_LIGHT_TEXT_SECONDARY DP_ABYSS_500 /* 次级 */ #define DS_LIGHT_TEXT_DIM DP_NEUTRAL_300 /* 注释 */ #define DS_LIGHT_TEXT_INVERT DP_NEUTRAL_900 /* 反色 */ #define DS_LIGHT_ACCENT DP_SEAL_700 /* 主强调（亮色上更深） */ #define DS_LIGHT_ACCENT_LIGHT DP_SEAL_500 #define DS_LIGHT_DECORATIVE DP_ARC_700 #define DS_LIGHT_BORDER DP_NEUTRAL_400 #define DS_LIGHT_BORDER_FOCUS DP_SEAL_500 /* =================================================================== * 排版规范 (Typography) * =================================================================== */ /* 字体尺寸族 */ #define DU_FONT_SIZE_XS 10u /* 辅助标注 */ #define DU_FONT_SIZE_SM 14u /* 次要说明 */ #define DU_FONT_SIZE_MD 18u /* 正文（Consolas 18px） */ #define DU_FONT_SIZE_LG 24u /* 小标题 */ #define DU_FONT_SIZE_XL 32u /* 标题 */ #define DU_FONT_SIZE_2XL 48u /* 大标题 / 欢迎文字 */ /* ASCII 位图字体参数（与 ascii_bitmaps.c 对应） */ #define DU_ASCII_CELL_W 11u #define DU_ASCII_CELL_H 18u #define DU_ASCII_STEP 12u /* 字符间距（含 1px gap） */ #define DU_ASCII_LINE_H 20u /* 行高（含 2px 行间距） */ /* =================================================================== * 间距体系 (Spacing) * =================================================================== */ #define DU_SPACE_XXS 2u #define DU_SPACE_XS 4u #define DU_SPACE_SM 8u #define DU_SPACE_MD 16u #define DU_SPACE_LG 24u #define DU_SPACE_XL 32u #define DU_SPACE_2XL 48u #define DU_SPACE_3XL 64u /* =================================================================== * 圆角体系 (Border Radius) — "Sealed Arc" 签名元素 * =================================================================== */ #define DU_RADIUS_NONE 0u #define DU_RADIUS_SM 4u /* 小按钮、标签 */ #define DU_RADIUS_MD 8u /* 卡片、输入框 */ #define DU_RADIUS_LG 12u /* 大卡片、面板 */ #define DU_RADIUS_XL 16u /* 模态框 */ #define DU_RADIUS_FULL 9999u /* 完全圆角（药丸形） */ /* =================================================================== * 边框体系 (Border) * =================================================================== */ #define DU_BORDER_THIN 1u #define DU_BORDER_STD 2u #define DU_BORDER_THICK 3u /* =================================================================== * 动画参数 (Animation) * =================================================================== */ /* 帧延迟（busy-wait 循环次数 ≈ 毫秒级，需根据 CPU 速度校准） */ #define DU_ANIM_DELAY_SLOW 200000u /* 慢速过渡 */ #define DU_ANIM_DELAY_NORMAL 100000u /* 标准动画 */ #define DU_ANIM_DELAY_FAST 40000u /* 快速反馈 */ /* 弧线动画参数（DSK spinner 专用） */ #define DU_SPINNER_RADIUS 48u #define DU_SPINNER_THICKNESS 4u #define DU_SPINNER_ARC_GAP 82u /* 每弧宽度（度） */ #define DU_SPINNER_ARC_COUNT 4u #define DU_SPINNER_SPEED 2u /* 每帧旋转度数 */ #define DU_SPINNER_SPRITE 128u /* 精灵缓冲边长 */ /* 渐变动画步进 */ #define DU_FADE_STEPS 32u /* 淡入/淡出步数 */ #define DU_FADE_STEP_DELAY 8000u /* 每步延迟 */ /* =================================================================== * 组件尺寸 (Component Sizes) * =================================================================== */ #define DU_BUTTON_HEIGHT 36u #define DU_INPUT_HEIGHT 32u #define DU_CARD_PADDING_X 24u #define DU_CARD_PADDING_Y 16u #define DU_CARD_MIN_WIDTH 200u #define DU_CARD_MAX_WIDTH 480u #define DU_CURSOR_SIZE 24u /* 鼠标光标边长 */ #define DU_NOTIFICATION_H 40u /* =================================================================== * 渲染上下文 (Render Context) * * 所有绘制函数通过此上下文访问 framebuffer，避免全局状态。 * =================================================================== */ typedef struct { du_u32 *fb; /* framebuffer 基址 */ du_u64 width; /* 像素宽 */ du_u64 height; /* 像素高 */ du_u64 pitch; /* 字节行宽 */ } du_context; /* 初始化渲染上下文 */ static inline void du_context_init(du_context *ctx, du_u64 fb_addr, du_u64 w, du_u64 h, du_u64 pitch) { ctx->fb = (du_u32 *)(du_u64)fb_addr; ctx->width = w; ctx->height = h; ctx->pitch = pitch; } /* =================================================================== * L2 — 绘制原语 (Rendering Primitives) * =================================================================== */ /* 颜色混合：alpha 范围 0–255 */ static inline du_u32 du_blend(du_u32 bg, du_u32 fg, du_u32 alpha) { du_u32 na = 256 - alpha; du_u32 r = ((bg & 0xFF) * na + (fg & 0xFF) * alpha) >> 8; du_u32 g = (((bg >> 8) & 0xFF) * na + ((fg >> 8) & 0xFF) * alpha) >> 8; du_u32 b = (((bg >> 16) & 0xFF) * na + ((fg >> 16) & 0xFF) * alpha) >> 8; return 0xFF000000u | (b << 16) | (g << 8) | r; } /* 线性插值两色 */ static inline du_u32 du_lerp_color(du_u32 c1, du_u32 c2, du_u32 t) { return du_blend(c1, c2, t); } /* 渐变背景：顶色 → 底色，按 Y 坐标插值 */ static inline du_u32 du_gradient_v(du_u32 top_color, du_u32 bot_color, du_i64 y, du_i64 total_h) { if (total_h <= 1) return top_color; if (y < 0) y = 0; if (y >= total_h) y = total_h - 1; du_u32 alpha = (du_u32)(((du_u64)y * 255ULL) / ((du_u64)total_h - 1)); return du_blend(top_color, bot_color, alpha); } /* 单像素写（带边界检查） */ static inline void du_pixel(du_context *ctx, du_i64 x, du_i64 y, du_u32 color) { if (x < 0 || (du_u64)x >= ctx->width || y < 0 || (du_u64)y >= ctx->height) return; ((du_u32 *)((du_u8 *)ctx->fb + (du_u64)y * ctx->pitch))[(du_u64)x] = color; } /* 读取像素（带边界检查） */ static inline du_u32 du_pixel_read(du_context *ctx, du_i64 x, du_i64 y) { if (x < 0 || (du_u64)x >= ctx->width || y < 0 || (du_u64)y >= ctx->height) return 0; return ((du_u32 *)((du_u8 *)ctx->fb + (du_u64)y * ctx->pitch))[(du_u64)x]; } /* 矩形填充 */ static inline void du_fill_rect(du_context *ctx, du_i64 x, du_i64 y, du_i64 w, du_i64 h, du_u32 color) { for (du_i64 r = 0; r < h; r++) { du_i64 yy = y + r; if (yy < 0 || (du_u64)yy >= ctx->height) continue; du_u32 *line = (du_u32 *)((du_u8 *)ctx->fb + (du_u64)yy * ctx->pitch); for (du_i64 c = 0; c < w; c++) { du_i64 xx = x + c; if (xx < 0 || (du_u64)xx >= ctx->width) continue; line[(du_u64)xx] = color; } } } /* 渐变矩形填充（垂直渐变） */ static inline void du_fill_rect_gradient(du_context *ctx, du_i64 x, du_i64 y, du_i64 w, du_i64 h, du_u32 top_color, du_u32 bot_color) { for (du_i64 r = 0; r < h; r++) { du_i64 yy = y + r; if (yy < 0 || (du_u64)yy >= ctx->height) continue; du_u32 color = du_gradient_v(top_color, bot_color, r, h); du_u32 *line = (du_u32 *)((du_u8 *)ctx->fb + (du_u64)yy * ctx->pitch); for (du_i64 c = 0; c < w; c++) { du_i64 xx = x + c; if (xx < 0 || (du_u64)xx >= ctx->width) continue; line[(du_u64)xx] = color; } } } /* 全屏渐变背景 */ static inline void du_fill_bg_gradient(du_context *ctx, du_u32 top_color, du_u32 bot_color) { du_fill_rect_gradient(ctx, 0, 0, (du_i64)ctx->width, (du_i64)ctx->height, top_color, bot_color); } /* 全屏纯色背景 */ static inline void du_fill_bg_solid(du_context *ctx, du_u32 color) { du_fill_rect(ctx, 0, 0, (du_i64)ctx->width, (du_i64)ctx->height, color); } /* =================================================================== * 圆角矩形 (Rounded Rectangle) — "Sealed Arc" 核心形状 * =================================================================== */ /* 绘制圆角矩形边框（单像素宽） */ static inline void du_rect_outline(du_context *ctx, du_i64 x, du_i64 y, du_i64 w, du_i64 h, du_u32 color, du_u32 radius) { /* 四个角的圆弧 + 四条直线 */ du_i64 r = (du_i64)radius; if (r > w / 2) r = w / 2; if (r > h / 2) r = h / 2; /* 顶线 */ for (du_i64 c = r; c < w - r; c++) { du_pixel(ctx, x + c, y, color); } /* 底线 */ for (du_i64 c = r; c < w - r; c++) { du_pixel(ctx, x + c, y + h - 1, color); } /* 左线 */ for (du_i64 rr = r; rr < h - r; rr++) { du_pixel(ctx, x, y + rr, color); } /* 右线 */ for (du_i64 rr = r; rr < h - r; rr++) { du_pixel(ctx, x + w - 1, y + rr, color); } /* 四个圆角 */ for (du_i64 dy = 0; dy <= r; dy++) { for (du_i64 dx = 0; dx <= r; dx++) { du_i64 d2 = dx * dx + dy * dy; if (d2 <= r * r && d2 > (r - 1) * (r - 1)) { /* 左上 */ du_pixel(ctx, x + r - dx, y + r - dy, color); /* 右上 */ du_pixel(ctx, x + w - 1 - r + dx, y + r - dy, color); /* 左下 */ du_pixel(ctx, x + r - dx, y + h - 1 - r + dy, color); /* 右下 */ du_pixel(ctx, x + w - 1 - r + dx, y + h - 1 - r + dy, color); } } } } /* 填充圆角矩形 */ static inline void du_fill_rounded_rect(du_context *ctx, du_i64 x, du_i64 y, du_i64 w, du_i64 h, du_u32 color, du_u32 radius) { du_i64 r = (du_i64)radius; if (r > w / 2) r = w / 2; if (r > h / 2) r = h / 2; /* 中间区域（不含角） */ du_fill_rect(ctx, x + r, y, w - 2 * r, h, color); /* 左侧矩形 */ du_fill_rect(ctx, x, y + r, r, h - 2 * r, color); /* 右侧矩形 */ du_fill_rect(ctx, x + w - r, y + r, r, h - 2 * r, color); /* 四个圆角填充 */ for (du_i64 dy = 0; dy < r; dy++) { for (du_i64 dx = 0; dx < r; dx++) { if (dx * dx + dy * dy <= r * r) { /* 左上 */ du_pixel(ctx, x + r - 1 - dx, y + r - 1 - dy, color); /* 右上 */ du_pixel(ctx, x + w - r + dx, y + r - 1 - dy, color); /* 左下 */ du_pixel(ctx, x + r - 1 - dx, y + h - r + dy, color); /* 右下 */ du_pixel(ctx, x + w - r + dx, y + h - r + dy, color); } } } } /* 带发光效果的圆角矩形边框（模拟 UTSM 封缄发光） */ static inline void du_rect_glow(du_context *ctx, du_i64 x, du_i64 y, du_i64 w, du_i64 h, du_u32 glow_color, du_u32 radius, du_i64 glow_width) { /* 从外到内逐层降低透明度 */ for (du_i64 i = glow_width; i >= 1; i--) { du_u32 alpha = (du_u32)(40 + (glow_width - i) * 50 / glow_width); du_u32 color = du_blend(DP_ABYSS_900, glow_color, alpha); du_rect_outline(ctx, x - i, y - i, w + 2 * i, h + 2 * i, color, radius + (du_u32)i); } /* 核心边框 */ du_rect_outline(ctx, x, y, w, h, glow_color, radius); } /* =================================================================== * 分隔线 (Divider) * =================================================================== */ static inline void du_divider_h(du_context *ctx, du_i64 x, du_i64 y, du_i64 width, du_u32 color) { du_fill_rect(ctx, x, y, width, 1, color); } static inline void du_divider_v(du_context *ctx, du_i64 x, du_i64 y, du_i64 height, du_u32 color) { du_fill_rect(ctx, x, y, 1, height, color); } /* =================================================================== * ASCII 字符渲染（需要外部提供 g_ascii 位图数组） * * 使用方法：包含 ascii_bitmaps.c 后调用 du_draw_char / du_draw_string * =================================================================== */ /* ASCII 位图数组 — 由 ascii_bitmaps.c 定义（static），在包含该 .c 的编译单元内可见 */ /* 渲染单个 ASCII 字符（灰度位图 + 前景色 alpha 混合） */ static inline void du_draw_char(du_context *ctx, char ch, du_i64 x, du_i64 y, du_u32 fg, du_u32 bg) { du_u32 idx = (du_u32)(ch - ' '); if (idx > 94) idx = 0; const du_u8 *glyph = g_ascii[idx]; du_i64 gw = g_ascii_w; du_i64 gh = g_ascii_h; for (du_i64 r = 0; r < gh; r++) { du_i64 yy = y + r; if (yy < 0 || (du_u64)yy >= ctx->height) continue; du_u32 *line = (du_u32 *)((du_u8 *)ctx->fb + (du_u64)yy * ctx->pitch); for (du_i64 c = 0; c < gw; c++) { du_u8 a = glyph[r * gw + c]; if (a == 0) continue; du_i64 xx = x + c; if (xx < 0 || (du_u64)xx >= ctx->width) continue; line[(du_u64)xx] = (a == 255) ? fg : du_blend(bg, fg, a); } } } /* 渲染字符串（不换行，无自动折行） */ static inline void du_draw_string(du_context *ctx, const char *s, du_i64 x, du_i64 y, du_u32 fg, du_u32 bg, du_u32 step) { du_i64 cx = x; while (*s) { du_draw_char(ctx, *s, cx, y, fg, bg); cx += (du_i64)step; s++; } } /* =================================================================== * 组件令牌 — 按钮 (Button) * =================================================================== */ typedef struct { du_u32 bg_normal; /* 正常背景 */ du_u32 bg_hover; /* 悬停背景 */ du_u32 bg_active; /* 按下背景 */ du_u32 fg; /* 文字色 */ du_u32 border; /* 边框色 */ du_u32 border_focus; /* 焦点边框色 */ du_u32 radius; /* 圆角半径 */ du_u32 height; /* 高度 */ du_u32 padding_x; /* 水平内边距 */ } du_button_style; /* 暗色主题按钮样式 */ #define DU_BTN_DARK_PRIMARY { \ DS_DARK_ACCENT, DS_DARK_ACCENT_LIGHT, DP_SEAL_700, \ DP_NEUTRAL_900, DP_SEAL_300, DP_SEAL_100, \ DU_RADIUS_MD, DU_BUTTON_HEIGHT, DU_SPACE_LG \ } #define DU_BTN_DARK_SECONDARY { \ DS_DARK_BG_TERTIARY, DS_DARK_BG_INSET, DS_DARK_BG_INSET, \ DS_DARK_TEXT_PRIMARY, DS_DARK_BORDER, DS_DARK_BORDER_FOCUS, \ DU_RADIUS_MD, DU_BUTTON_HEIGHT, DU_SPACE_LG \ } /* =================================================================== * 组件令牌 — 卡片 (Card) * =================================================================== */ typedef struct { du_u32 bg; /* 卡片背景 */ du_u32 border; /* 边框色 */ du_u32 border_focus; /* 焦点边框色 */ du_u32 shadow_color; /* 阴影色 */ du_u32 radius; /* 圆角半径 */ du_u32 padding_x; /* 水平内边距 */ du_u32 padding_y; /* 垂直内边距 */ du_u32 border_width; /* 边框宽度 */ } du_card_style; #define DU_CARD_DARK { \ DS_DARK_BG_SECONDARY, DS_DARK_BORDER, DS_DARK_BORDER_FOCUS, \ DP_ABYSS_900, DU_RADIUS_LG, DU_CARD_PADDING_X, DU_CARD_PADDING_Y, DU_BORDER_STD \ } #define DU_CARD_LIGHT { \ DS_LIGHT_BG_SECONDARY, DS_LIGHT_BORDER, DS_LIGHT_BORDER_FOCUS, \ DP_NEUTRAL_300, DU_RADIUS_LG, DU_CARD_PADDING_X, DU_CARD_PADDING_Y, DU_BORDER_STD \ } /* =================================================================== * 组件令牌 — 输入框 (Input) * =================================================================== */ typedef struct { du_u32 bg; du_u32 bg_focus; du_u32 fg; du_u32 placeholder; du_u32 border; du_u32 border_focus; du_u32 cursor; du_u32 radius; du_u32 height; } du_input_style; #define DU_INPUT_DARK { \ DS_DARK_BG_INSET, DS_DARK_BG_TERTIARY, DS_DARK_TEXT_PRIMARY, \ DS_DARK_TEXT_DIM, DS_DARK_BORDER, DS_DARK_BORDER_FOCUS, \ DS_DARK_CURSOR, DU_RADIUS_MD, DU_INPUT_HEIGHT \ } /* =================================================================== * 组件令牌 — 通知栏 (Notification) * =================================================================== */ typedef enum { DU_NOTIFY_INFO, DU_NOTIFY_SUCCESS, DU_NOTIFY_WARNING, DU_NOTIFY_ERROR } du_notify_type; static inline du_u32 du_notify_color(du_notify_type type) { switch (type) { case DU_NOTIFY_SUCCESS: return DP_SUCCESS; case DU_NOTIFY_WARNING: return DP_WARNING; case DU_NOTIFY_ERROR: return DP_ERROR; default: return DP_INFO; } } /* =================================================================== * 组件绘制函数 (Component Drawing) * =================================================================== */ /* 绘制按钮 */ static inline void du_draw_button(du_context *ctx, du_i64 x, du_i64 y, du_i64 w, const du_button_style *style, const char *label, int focused) { du_u32 bg = style->bg_normal; du_u32 border = style->border; if (focused) { border = style->border_focus; } /* 填充圆角矩形背景 */ du_fill_rounded_rect(ctx, x, y, w, (du_i64)style->height, bg, style->radius); /* 边框 */ du_rect_outline(ctx, x, y, w, (du_i64)style->height, border, style->radius); /* 文字居中 */ du_i64 label_len = 0; while (label[label_len]) label_len++; du_i64 text_w = label_len * (du_i64)DU_ASCII_STEP; du_i64 text_x = x + (w - text_w) / 2; du_i64 text_y = y + ((du_i64)style->height - (du_i64)DU_ASCII_CELL_H) / 2; du_draw_string(ctx, label, text_x, text_y, style->fg, bg, DU_ASCII_STEP); } /* 绘制卡片 */ static inline void du_draw_card(du_context *ctx, du_i64 x, du_i64 y, du_i64 w, du_i64 h, const du_card_style *style, int focused) { du_u32 border = style->border; if (focused) { border = style->border_focus; /* 焦点发光效果 */ du_rect_glow(ctx, x - 2, y - 2, w + 4, h + 4, border, style->radius + 2, 3); } du_fill_rounded_rect(ctx, x, y, w, h, style->bg, style->radius); du_rect_outline(ctx, x, y, w, h, border, style->radius); } /* 绘制输入框 */ static inline void du_draw_input(du_context *ctx, du_i64 x, du_i64 y, du_i64 w, const du_input_style *style, const char *text, int cursor_pos, int focused) { du_u32 bg = focused ? style->bg_focus : style->bg; du_u32 border = focused ? style->border_focus : style->border; du_fill_rounded_rect(ctx, x, y, w, (du_i64)style->height, bg, style->radius); du_rect_outline(ctx, x, y, w, (du_i64)style->height, border, style->radius); /* 文字 */ du_i64 text_x = x + (du_i64)DU_SPACE_SM; du_i64 text_y = y + ((du_i64)style->height - (du_i64)DU_ASCII_CELL_H) / 2; du_u32 fg = text[0] ? style->fg : style->placeholder; du_draw_string(ctx, text, text_x, text_y, fg, bg, DU_ASCII_STEP); /* 光标 */ if (focused && cursor_pos >= 0) { du_i64 cx = text_x + (du_i64)cursor_pos * (du_i64)DU_ASCII_STEP; du_fill_rect(ctx, cx, text_y, 2, (du_i64)DU_ASCII_CELL_H, style->cursor); } } /* 绘制通知栏 */ static inline void du_draw_notification(du_context *ctx, du_i64 x, du_i64 y, du_i64 w, du_notify_type type, const char *message) { du_u32 accent = du_notify_color(type); /* 半透明背景 */ du_fill_rounded_rect(ctx, x, y, w, (du_i64)DU_NOTIFICATION_H, DP_ABYSS_800, DU_RADIUS_MD); /* 左侧色条 */ du_fill_rect(ctx, x, y + 4, 4, (du_i64)DU_NOTIFICATION_H - 8, accent); /* 文字 */ du_i64 text_y = y + ((du_i64)DU_NOTIFICATION_H - (du_i64)DU_ASCII_CELL_H) / 2; du_draw_string(ctx, message, x + (du_i64)DU_SPACE_MD, text_y, DS_DARK_TEXT_PRIMARY, DP_ABYSS_800, DU_ASCII_STEP); } /* 绘制进度条 */ static inline void du_draw_progress(du_context *ctx, du_i64 x, du_i64 y, du_i64 w, du_i64 h, du_u32 progress_0_255) { /* 背景 */ du_fill_rounded_rect(ctx, x, y, w, h, DP_ABYSS_700, DU_RADIUS_FULL); /* 填充 */ du_i64 fill_w = (w * (du_i64)progress_0_255) / 255; if (fill_w > 0) { du_fill_rounded_rect(ctx, x, y, fill_w, h, DP_SEAL_500, DU_RADIUS_FULL); } } /* =================================================================== * Spinner（加载弧） — DSK 启动加载动画 * * 使用 "Sealed Arc" 四弧旋转设计，弧色取自色板。 * =================================================================== */ /* 默认弧色（从亮到暗的青蓝色） */ #define DU_SPINNER_ARCS { \ DP_SEAL_100, DP_SEAL_300, DP_SEAL_500, DP_SEAL_700 \ } /* =================================================================== * 主题切换辅助 (Theme Switch) * =================================================================== */ typedef enum { DU_THEME_DARK, DU_THEME_LIGHT } du_theme; /* 根据主题获取对应的背景色 */ static inline du_u32 du_theme_bg(du_theme t) { return (t == DU_THEME_DARK) ? DS_DARK_BG_PRIMARY : DS_LIGHT_BG_PRIMARY; } /* 根据主题获取对应的文字色 */ static inline du_u32 du_theme_text(du_theme t) { return (t == DU_THEME_DARK) ? DS_DARK_TEXT_PRIMARY : DS_LIGHT_TEXT_PRIMARY; } /* 根据主题获取对应的强调色 */ static inline du_u32 du_theme_accent(du_theme t) { return (t == DU_THEME_DARK) ? DS_DARK_ACCENT : DS_LIGHT_ACCENT; } #endif /* DESHAB_UI_H */