# gpui-component

## 项目概述

基于 GPUI 的跨平台桌面 UI 组件库，提供 60+ 组件，受 macOS/Windows 控件和 shadcn/ui 启发。

**本地路径**: `vendors/gpui-component`

## 目录结构

```
gpui-component/
├── Cargo.toml                          # workspace 配置
├── crates/
│   ├── ui/                             # 核心 UI 库
│   │   ├── Cargo.toml
│   │   ├── src/
│   │   │   ├── lib.rs                  # 库入口
│   │   │   ├── init.rs                 # 初始化
│   │   │   ├── app.rs                  # 应用生命周期
│   │   │   ├── theme/                  # 主题系统
│   │   │   │   ├── mod.rs
│   │   │   │   ├── color.rs
│   │   │   │   ├── registry.rs
│   │   │   │   ├── schema.rs
│   │   │   │   └── theme_color.rs
│   │   │   ├── input/                  # 输入组件
│   │   │   │   ├── mod.rs
│   │   │   │   ├── input.rs
│   │   │   │   ├── number_input.rs
│   │   │   │   ├── state.rs
│   │   │   │   └── lsp/                # LSP 集成
│   │   │   ├── button/                 # 按钮组件
│   │   │   │   └── mod.rs
│   │   │   ├── chart/                  # 图表组件
│   │   │   │   └── mod.rs
│   │   │   ├── dock/                   # 停靠面板
│   │   │   │   └── mod.rs
│   │   │   ├── menu/                   # 菜单系统
│   │   │   │   └── mod.rs
│   │   │   ├── list/                   # 列表组件
│   │   │   │   └── mod.rs
│   │   │   ├── table/                  # 表格组件
│   │   │   │   ├── mod.rs
│   │   │   │   ├── table.rs
│   │   │   │   └── data_table.rs       # 高级表格
│   │   │   ├── dialog/                 # 对话框
│   │   │   │   └── mod.rs
│   │   │   ├── navigation/             # 导航组件
│   │   │   │   ├── mod.rs
│   │   │   │   ├── breadcrumb.rs
│   │   │   │   ├── pagination.rs
│   │   │   │   └── tabs.rs
│   │   │   ├── feedback/               # 反馈组件
│   │   │   │   ├── mod.rs
│   │   │   │   ├── alert.rs
│   │   │   │   ├── loading.rs
│   │   │   │   ├── progress.rs
│   │   │   │   └── toast.rs
│   │   │   ├── overlay/                # 浮层组件
│   │   │   │   ├── mod.rs
│   │   │   │   ├── popover.rs
│   │   │   │   ├── tooltip.rs
│   │   │   │   └── sheet.rs
│   │   │   ├── form/                   # 表单组件
│   │   │   │   ├── mod.rs
│   │   │   │   └── form.rs
│   │   │   ├── scroll/                 # 滚动组件
│   │   │   │   └── mod.rs
│   │   │   ├── avatar/                 # 头像组件
│   │   │   │   └── mod.rs
│   │   │   ├── badge/                  # 徽章组件
│   │   │   │   └── mod.rs
│   │   │   ├── card/                   # 卡片组件
│   │   │   │   └── mod.rs
│   │   │   ├── divider/                # 分隔线
│   │   │   │   └── mod.rs
│   │   │   ├── icon/                   # 图标
│   │   │   │   └── mod.rs
│   │   │   ├── image/                  # 图像
│   │   │   │   └── mod.rs
│   │   │   ├── select/                 # 选择器
│   │   │   │   └── mod.rs
│   │   │   ├── checkbox/               # 复选框
│   │   │   │   └── mod.rs
│   │   │   ├── radio/                  # 单选框
│   │   │   │   └── mod.rs
│   │   │   ├── switch/                 # 开关
│   │   │   │   └── mod.rs
│   │   │   ├── slider/                 # 滑块
│   │   │   │   └── mod.rs
│   │   │   ├── date_picker/            # 日期选择
│   │   │   │   └── mod.rs
│   │   │   ├── color_picker/           # 颜色选择
│   │   │   │   └── mod.rs
│   │   │   ├── tree/                   # 树形组件
│   │   │   │   └── mod.rs
│   │   │   ├── virtual_list/           # 虚拟列表
│   │   │   │   └── mod.rs
│   │   │   ├── markdown/               # Markdown
│   │   │   │   └── mod.rs
│   │   │   └── ...
│   │   └── Cargo.toml
│   │
│   ├── story/                          # 组件展示应用
│   │   ├── Cargo.toml
│   │   ├── src/
│   │   │   ├── main.rs
│   │   │   ├── app.rs
│   │   │   ├── storybook.rs            # StoryBook 框架
│   │   │   └── stories/                # 组件示例
│   │   │       ├── button_story.rs
│   │   │       ├── input_story.rs
│   │   │       └── ...
│   │   └── Cargo.toml
│   │
│   ├── macros/                         # 过程宏
│   │   ├── Cargo.toml
│   │   ├── src/
│   │   │   └── lib.rs
│   │   └── Cargo.toml
│   │
│   ├── assets/                         # 静态资源
│   │   ├── src/
│   │   │   └── lib.rs
│   │   ├── icons/                      # 图标资源
│   │   └── themes/                     # 主题文件
│   │       └── Cargo.toml
│   │
│   └── webview/                        # WebView 支持
│       ├── Cargo.toml
│       └── src/
│           ├── lib.rs
│           └── webview.rs
│
└── Cargo.toml
```

## 核心依赖

```toml
[workspace]
members = ["crates/*"]

[dependencies]
# GPUI 框架
gpui = "1.0"

# 网络
reqwest = { version = "0.11", features = ["json", "blocking"] }

# 文本处理
ropey = "1.6"
unicode-width = "0.1"

# 文件系统
notify = { version = "6.0", features = ["default"] }

# 序列化
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"

# 日志
tracing = "0.1"
tracing-subscriber = "0.3"

# 国际化
rust-i18n = "2.0"

# LSP
lsp-types = "0.94"
```

## 主题系统

### 主题结构

```rust
// crates/ui/src/theme/mod.rs

use std::sync::Arc;

/// 主题配置
#[derive(Clone, Debug, Default)]
pub struct Theme {
    /// 颜色配置
    pub colors: ThemeColor,

    /// 亮色主题配置
    pub light_theme: Rc<ThemeConfig>,

    /// 暗色主题配置
    pub dark_theme: Rc<ThemeConfig>,

    /// 当前主题模式
    pub mode: ThemeMode,

    /// 字体配置
    pub font_family: SharedString,
    pub font_size: Pixels,

    /// 圆角
    pub radius: Pixels,

    /// 滚动条显示
    pub scrollbar_show: ScrollbarShow,

    /// 语法高亮主题
    pub highlight_theme: Arc<HighlightTheme>,
}

pub enum ThemeMode {
    Light,
    Dark,
    System,
}

pub struct ThemeConfig {
    /// 背景色
    pub background: Hsla,
    /// 前景色
    pub foreground: Hsla,
    /// 边框色
    pub border: Hsla,
    /// 主要色
    pub primary: Hsla,
    /// 次要色
    pub secondary: Hsla,
    /// 强调色
    pub accent: Hsla,
    /// 成功色
    pub success: Hsla,
    /// 警告色
    pub warning: Hsla,
    /// 错误色
    pub error: Hsla,
    /// 信息色
    pub info: Hsla,
    /// 悬停色
    pub hover: Hsla,
    /// 激活色
    pub active: Hsla,
    /// 选中色
    pub selected: Hsla,
    /// 禁用色
    pub disabled: Hsla,
    /// 边框样式
    pub border: BorderStyle,
    /// 阴影
    pub shadow: Shadow,
}

/// 主题颜色
#[derive(Clone, Debug)]
pub struct ThemeColor {
    pub app_background: Hsla,
    pub sidebar_background: Hsla,
    pub panel_background: Hsla,
    pub editor_background: Hsla,
    pub status_bar_background: Hsla,
    pub title_bar_background: Hsla,
    // ...
}
```

### ActiveTheme Trait

```rust
// 主题 Trait，用于获取当前主题
pub trait ActiveTheme {
    fn theme(&self) -> &Theme;
}

impl ActiveTheme for AppContext {
    fn theme(&self) -> &Theme {
        Theme::global(self)
    }
}

// 使用示例
fn my_component(cx: &mut ViewContext<Self>) -> impl IntoElement {
    div()
        .bg(cx.theme().colors.background)
        .text_color(cx.theme().colors.foreground)
        .border_1()
        .border_color(cx.theme().colors.border)
}
```

## 核心组件

### Button 组件

```rust
// crates/ui/src/button/mod.rs

use gpui::{div, prelude::*, AnyElement, ViewContext};

pub struct Button {
    /// 按钮文本
    label: SharedString,
    /// 图标
    icon: Option<SharedString>,
    /// 变体
    variant: ButtonVariant,
    /// 尺寸
    size: ButtonSize,
    /// 是否加载中
    loading: bool,
    /// 是否禁用
    disabled: bool,
    /// 点击事件
    on_click: Arc<dyn Fn(&mut WindowContext)>,
}

#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum ButtonVariant {
    Primary,
    Secondary,
    Outline,
    Ghost,
    Danger,
    Link,
}

#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum ButtonSize {
    Small,
    Medium,
    Large,
}

impl Button {
    pub fn new(
        label: impl Into<SharedString>,
        on_click: impl Fn(&mut WindowContext) + 'static,
    ) -> Self {
        Self {
            label: label.into(),
            icon: None,
            variant: ButtonVariant::Primary,
            size: ButtonSize::Medium,
            loading: false,
            disabled: false,
            on_click: Arc::new(on_click),
        }
    }

    pub fn with_icon(mut self, icon: impl Into<SharedString>) -> Self {
        self.icon = Some(icon.into());
        self
    }

    pub fn variant(mut self, variant: ButtonVariant) -> Self {
        self.variant = variant;
        self
    }

    pub fn size(mut self, size: ButtonSize) -> Self {
        self.size = size;
        self
    }

    pub fn loading(mut self, loading: bool) -> Self {
        self.loading = loading;
        self
    }

    pub fn disabled(mut self, disabled: bool) -> Self {
        self.disabled = disabled;
        self
    }
}

impl Render for Button {
    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        let variant_style = match self.variant {
            ButtonVariant::Primary => button_primary_style(cx),
            ButtonVariant::Secondary => button_secondary_style(cx),
            ButtonVariant::Outline => button_outline_style(cx),
            ButtonVariant::Ghost => button_ghost_style(cx),
            ButtonVariant::Danger => button_danger_style(cx),
            ButtonVariant::Link => button_link_style(cx),
        };

        let size_style = match self.size {
            ButtonSize::Small => button_sm_style(cx),
            ButtonSize::Medium => button_md_style(cx),
            ButtonSize::Large => button_lg_style(cx),
        };

        let disabled = self.disabled || self.loading;

        div()
            .id("button")
            .px_4()
            .py_2()
            .rounded-lg()
            .font_medium()
            .cursor(disabled.then_some(Cursor::NotAllowed))
            .text_color(disabled.then_some(cx.theme().colors.disabled))
            .bg(disabled.then_some(variant_style.bg).unwrap_or(variant_style.bg))
            .border_1()
            .border_color(disabled.then_some(cx.theme().colors.disabled).unwrap_or(variant_style.border))
            .transition()
            .when(!disabled, |this| {
                this.hover(|s| s.bg(variant_style.hover_bg))
                    .active(|s| s.bg(variant_style.active_bg))
            })
            .when(self.loading, |this| {
                this.child(
                    div()
                        .animate()
                        .spin()
                        .w_4()
                        .h_4()
                        .border_2()
                        .border_current()
                        .rounded_full()
                )
            })
            .when(!self.loading && self.icon.is_some(), |this| {
                this.child(div().child(self.icon.clone().unwrap()))
            })
            .when(!self.loading, |this| {
                this.on_click(move |_, cx| {
                    if !disabled {
                        (self.on_click)(cx);
                    }
                })
            })
            .child(self.label.clone())
    }
}

/// 便捷函数
pub fn button(
    label: impl Into<SharedString>,
    on_click: impl Fn(&mut WindowContext) + 'static,
) -> Button {
    Button::new(label, on_click)
}

pub fn primary_button(
    label: impl Into<SharedString>,
    on_click: impl Fn(&mut WindowContext) + 'static,
) -> Button {
    Button::new(label, on_click).variant(ButtonVariant::Primary)
}

pub fn secondary_button(
    label: impl Into<SharedString>,
    on_click: impl Fn(&mut WindowContext) + 'static,
) -> Button {
    Button::new(label, on_click).variant(ButtonVariant::Secondary)
}
```

### Input 组件

```rust
// crates/ui/src/input/mod.rs

use ropey::Rope;

pub struct Input {
    /// 绑定值
    value: SharedString,
    /// 占位符
    placeholder: SharedString,
    /// 是否只读
    readonly: bool,
    /// 是否禁用
    disabled: bool,
    /// 多行模式
    multiline: bool,
    /// 高度（多行模式）
    rows: usize,
    /// 焦点状态
    focused: bool,
    /// 事件
    on_change: Arc<dyn Fn(String, &mut WindowContext)>,
    on_focus: Arc<dyn Fn(&mut WindowContext)>,
    on_blur: Arc<dyn Fn(&mut WindowContext)>,
    on_enter: Arc<dyn Fn(&mut WindowContext)>,
}

impl Input {
    pub fn new(
        value: impl Into<SharedString>,
        on_change: impl Fn(String, &mut WindowContext) + 'static,
    ) -> Self {
        Self {
            value: value.into(),
            placeholder: "".into(),
            readonly: false,
            disabled: false,
            multiline: false,
            rows: 3,
            focused: false,
            on_change: Arc::new(on_change),
            on_focus: Arc::new(|_| {}),
            on_blur: Arc::new(|_| {}),
            on_enter: Arc::new(|_| {}),
        }
    }

    pub fn placeholder(mut self, placeholder: impl Into<SharedString>) -> Self {
        self.placeholder = placeholder.into();
        self
    }

    pub fn disabled(mut self, disabled: bool) -> Self {
        self.disabled = disabled;
        self
    }

    pub fn multiline(mut self, rows: usize) -> Self {
        self.multiline = true;
        self.rows = rows;
        self
    }
}

impl Render for Input {
    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        let theme = cx.theme();

        div()
            .w_full()
            .bg(theme.colors.surface)
            .border_1()
            .border_color(
                if self.focused {
                    theme.colors.primary
                } else {
                    theme.colors.border
                },
            )
            .rounded_md()
            .px_3()
            .py_2()
            .when(self.multiline, |this| this.min_h_10())
            .when(!self.multiline, |this| this.h_10())
            .child(
                if self.multiline {
                    TextArea::new(self.value.clone(), move |s, _| s)
                        .placeholder(self.placeholder.clone())
                        .disabled(self.disabled)
                        .on_change(self.on_change.clone())
                        .into_any_element()
                } else {
                    TextInput::new(self.value.clone(), move |s, _| s)
                        .placeholder(self.placeholder.clone())
                        .disabled(self.disabled)
                        .on_change(self.on_change.clone())
                        .into_any_element()
                }
            )
    }
}
```

### DataTable 组件

```rust
// crates/ui/src/table/data_table.rs

use std::collections::HashMap;

/// 表格列配置
pub struct TableColumn<T> {
    /// 列标题
    pub title: SharedString,
    /// 列宽
    pub width: Pixels,
    /// 渲染函数
    pub render: Arc<dyn Fn(&T, &mut WindowContext) -> AnyElement>,
    /// 是否可排序
    pub sortable: bool,
    /// 对齐方式
    pub align: Align,
}

/// 表格状态
pub struct DataTableState<T> {
    /// 数据
    data: Vec<T>,
    /// 排序字段
    sort_by: Option<String>,
    /// 排序方向
    sort_direction: SortDirection,
    /// 过滤文本
    filter: String,
    /// 分页
    pagination: Option<PaginationState>,
}

/// 分页状态
pub struct PaginationState {
    pub page: usize,
    pub page_size: usize,
    pub total: usize,
}

pub enum SortDirection {
    Asc,
    Desc,
}
```

### Dialog 组件

```rust
// crates/ui/src/dialog/mod.rs

pub struct Dialog {
    /// 标题
    title: SharedString,
    /// 内容
    content: AnyElement,
    /// 底部按钮
    actions: Vec<Button>,
    /// 是否模态
    modal: bool,
    /// 关闭回调
    on_close: Option<Arc<dyn Fn(&mut WindowContext)>>,
}

impl Dialog {
    pub fn new(title: impl Into<SharedString>) -> Self {
        Self {
            title: title.into(),
            content: div().into_any_element(),
            actions: vec![],
            modal: true,
            on_close: None,
        }
    }

    pub fn content(mut self, content: impl IntoElement) -> Self {
        self.content = content.into_any_element();
        self
    }

    pub fn action(mut self, button: Button) -> Self {
        self.actions.push(button);
        self
    }

    pub fn on_close(mut self, on_close: impl Fn(&mut WindowContext) + 'static) -> Self {
        self.on_close = Some(Arc::new(on_close));
        self
    }
}

impl Render for Dialog {
    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        let theme = cx.theme();

        // 遮罩层
        div()
            .absolute()
            .inset_0()
            .bg(theme.colors.overlay)
            .flex()
            .items_center()
            .justify_center()
            .when(self.modal, |this| this.on_click_stop_propagation())
            .child(
                // 对话框主体
                div()
                    .w_96()
                    .max_w_80percent()
                    .bg(theme.colors.surface)
                    .rounded_lg()
                    .shadow_lg()
                    .border_1()
                    .border_color(theme.colors.border)
                    .child(
                        div()
                            .px_4()
                            .py_3()
                            .border_b_1()
                            .border_color(theme.colors.border)
                            .child(
                                h3()
                                    .text_lg()
                                    .font_semibold()
                                    .text_color(theme.colors.foreground)
                                    .child(self.title.clone())
                            )
                    )
                    .child(
                        div()
                            .px_4()
                            .py_3()
                            .child(self.content.clone())
                    )
                    .child(
                        div()
                            .px_4()
                            .py_3()
                            .border_t_1()
                            .border_color(theme.colors.border)
                            .flex()
                            .justify_end()
                            .gap_2()
                            .children(self.actions.iter().map(|btn| btn.clone().into_any_element()))
                    )
            )
    }
}
```

## 组件化设计模式

### 无状态组件

```rust
// 使用 RenderOnce trait
impl RenderOnce for StatelessComponent {
    fn render(self, cx: &mut WindowContext) -> impl IntoElement {
        div()
            .bg(cx.theme().colors.surface)
            .child("Content")
    }
}
```

### 有状态组件

```rust
// 使用 Render trait
struct MyComponent {
    count: usize,
    text: SharedString,
}

impl Render for MyComponent {
    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        div()
            .child(
                h1()
                    .text_2xl()
                    .font_bold()
                    .child("My Component")
            )
            .child(
                div()
                    .mt_4()
                    .child(format!("Count: {}", self.count))
            )
            .child(
                button("Increment", move |_, cx| {
                    self.count += 1;
                    cx.notify();
                })
            )
    }
}
```

## 样式系统

### 样式链式调用

```rust
div()
    // 尺寸
    .w_full()
    .h_10()
    .min_w_0()
    .max_w_80percent()

    // 间距
    .p_4()
    .px_4()
    .py_2()
    .m_auto()
    .mt_4()

    // 布局
    .flex()
    .flex_col()
    .items_center()
    .justify_center()
    .gap_4()
    .grid()
    .grid_cols_3()

    // 颜色
    .bg(cx.theme().colors.background)
    .text_color(cx.theme().colors.foreground)
    .border_color(cx.theme().colors.border)

    // 边框
    .border_1()
    .border_2()
    .border_t_1()
    .rounded_md()
    .rounded_lg()
    .rounded_full()

    // 阴影
    .shadow_sm()
    .shadow_md()
    .shadow_lg()

    // 交互
    .cursor_pointer()
    .transition()
    .hover(|s| s.bg(cx.theme().colors.hover))
    .active(|s| s.bg(cx.theme().colors.active))
    .focus(|s| s.border_color(cx.theme().colors.primary))

    // 动画
    .animate()
    .duration_150()
    .ease_in_out()
```

## 可复用代码

| 模块 | 路径 | 用途 |
|------|------|------|
| **主题系统** | `crates/ui/src/theme/` | 颜色、字体、样式 |
| **基础组件** | `crates/ui/src/button/input/` | 按钮、输入框 |
| **布局组件** | `crates/ui/src/dialog/dock/` | 对话框、停靠面板 |
| **数据组件** | `crates/ui/src/table/list/` | 表格、列表 |
| **表单组件** | `crates/ui/src/form/` | 表单验证 |
| **导航组件** | `crates/ui/src/navigation/` | 标签页、面包屑 |

## 在本项目中的使用

用于实现 agent-client 的所有 UI 界面：

```
agent-client (GPUI 应用)
    │
    ├── gpui-component (UI 组件库)
    │       │
    │       ├── 聊天对话界面 (List, Input, Button)
    │       ├── 设置界面 (Form, Select, Switch)
    │       ├── 关于界面 (Dialog, Card)
    │       ├── 依赖管理 (DataTable, Badge)
    │       └── 状态栏 (Icon, Tooltip)
    │
    └── 自定义组件
            ├── 连接状态指示器
            ├── ID/密码显示
            └── 主题切换
```

## 与 agent-client 集成场景

### 场景1：Tab 导航布局

```rust
// agent-client 主界面 Tab 导航

use gpui::{div, h1, h2, p, prelude::*, tabs, TabBar, TabPosition};

pub struct AgentClientApp {
    // 当前选中的 Tab
    active_tab: usize,
    // Tab 配置
    tabs: Vec<TabConfig>,
}

struct TabConfig {
    id: usize,
    title: &'static str,
    icon: &'static str,
    enabled: bool,
}

impl AgentClientApp {
    pub fn new() -> Self {
        Self {
            active_tab: 0,
            tabs: vec![
                TabConfig { id: 0, title: "Agent", icon: "agent_icon", enabled: cfg!(feature = "agent-chat") },
                TabConfig { id: 1, title: "Dependencies", icon: "deps_icon", enabled: true },
                TabConfig { id: 2, title: "Settings", icon: "settings_icon", enabled: true },
                TabConfig { id: 3, title: "About", icon: "about_icon", enabled: true },
            ],
        }
    }
}

impl Render for AgentClientApp {
    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        div()
            .flex()
            .flex_col()
            .h_full()
            .w_full()
            .bg(cx.theme().colors.app_background)
            .child(
                // 顶部标题栏
                self.render_title_bar(cx)
            )
            .child(
                // Tab 导航
                self.render_tabs(cx)
            )
            .child(
                // Tab 内容区
                self.render_tab_content(cx)
            )
            .child(
                // 底部状态栏
                self.render_status_bar(cx)
            )
    }

    fn render_tabs(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        div()
            .flex()
            .flex_row()
            .bg(cx.theme().colors.surface)
            .border_b_1()
            .border_color(cx.theme().colors.border)
            .children(self.tabs.iter().filter(|t| t.enabled).enumerate().map(|(idx, tab)| {
                let tab_id = tab.id;
                let is_active = self.active_tab == tab_id;

                div()
                    .px_4()
                    .py_3()
                    .cursor_pointer()
                    .text_color(if is_active {
                        cx.theme().colors.primary
                    } else {
                        cx.theme().colors.foreground
                    })
                    .border_b_2()
                    .border_color(if is_active {
                        cx.theme().colors.primary
                    } else {
                        cx.transparent()
                    })
                    .font_medium()
                    .when(is_active, |this| this.bg(cx.theme().colors.hover))
                    .on_click(cx.listener(move |this, _, _cx| {
                        this.active_tab = tab_id;
                    }))
                    .child(tab.title)
            }))
    }

    fn render_tab_content(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        div()
            .flex_1()
            .overflow_hidden()
            .child(match self.active_tab {
                0 => self.render_agent_tab(cx).into_any_element(),
                1 => self.render_dependencies_tab(cx).into_any_element(),
                2 => self.render_settings_tab(cx).into_any_element(),
                3 => self.render_about_tab(cx).into_any_element(),
                _ => div().into_any_element(),
            })
    }
}
```

### 场景2：连接状态指示器

```rust
// 连接状态组件

use crate::ui::{icon::Icon, tooltip::Tooltip};

pub struct ConnectionStatus {
    // 连接状态
    status: ConnectionState,
    // 最后更新时间
    last_update: DateTime<Utc>,
    // 提示文本
    tooltip_text: SharedString,
}

pub enum ConnectionState {
    Connected {
        mode: ConnectionMode,
        latency: u32,
    },
    Connecting,
    Disconnected {
        reason: DisconnectReason,
    },
    Error {
        message: String,
    },
}

pub enum ConnectionMode {
    P2P,
    Relay,
}

pub enum DisconnectReason {
    NetworkUnavailable,
    ServerUnreachable,
    AuthenticationFailed,
    SessionTimeout,
}

impl ConnectionStatus {
    pub fn new() -> Self {
        Self {
            status: ConnectionState::Disconnected {
                reason: DisconnectReason::NetworkUnavailable,
            },
            last_update: Utc::now(),
            tooltip_text: "Disconnected".into(),
        }
    }

    /// 更新连接状态
    pub fn update_status(&mut self, status: ConnectionState) {
        self.status = status;
        self.last_update = Utc::now();
        self.tooltip_text = self.generate_tooltip_text();
    }

    fn generate_tooltip_text(&self) -> SharedString {
        match &self.status {
            ConnectionState::Connected { mode, latency } => {
                match mode {
                    ConnectionMode::P2P => format!("Connected (P2P) - {}ms", latency),
                    ConnectionMode::Relay => format!("Connected (Relay) - {}ms", latency),
                }
            }
            ConnectionState::Connecting => "Connecting...".into(),
            ConnectionState::Disconnected { reason } => {
                match reason {
                    DisconnectReason::NetworkUnavailable => "No network connection",
                    DisconnectReason::ServerUnreachable => "Cannot reach server",
                    DisconnectReason::AuthenticationFailed => "Authentication failed",
                    DisconnectReason::SessionTimeout => "Session timed out",
                }.into()
            }
            ConnectionState::Error { message } => message.as_str().into(),
        }
    }
}

impl Render for ConnectionStatus {
    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        let (icon, color) = match &self.status {
            ConnectionState::Connected { mode, .. } => (
                match mode {
                    ConnectionMode::P2P => "wifi",
                    ConnectionMode::Relay => "relay",
                },
                cx.theme().colors.success,
            ),
            ConnectionState::Connecting => ("loading", cx.theme().colors.info),
            ConnectionState::Disconnected { .. } => ("offline", cx.theme().colors.error),
            ConnectionState::Error { .. } => ("error", cx.theme().colors.warning),
        };

        Tooltip::new(
            div()
                .flex()
                .items_center()
                .gap_2()
                .child(
                    Icon::new(icon)
                        .size(IconSize::Small)
                        .color(color)
                )
                .child(
                    // 状态文字
                    div()
                        .text_sm()
                        .text_color(color)
                        .child(self.tooltip_text.clone())
                ),
            self.tooltip_text.clone()
        )
    }
}

/// 状态栏组件
pub struct StatusBar {
    // 连接状态
    connection_status: View<ConnectionStatus>,
    // 客户端 ID
    client_id: SharedString,
    // 当前时间
    current_time: SharedString,
}

impl Render for StatusBar {
    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        div()
            .flex()
            .flex_row()
            .items_center()
            .justify_between()
            .px_4()
            .py_2()
            .h_10()
            .bg(cx.theme().colors.status_bar_background)
            .border_t_1()
            .border_color(cx.theme().colors.border)
            .child(
                // 左侧：客户端 ID
                div()
                    .flex()
                    .items_center()
                    .gap_2()
                    .child(
                        Icon::new("id")
                            .size(IconSize::Small)
                            .color(cx.theme().colors.muted)
                    )
                    .child(
                        div()
                            .text_sm()
                            .text_color(cx.theme().colors.muted)
                            .child(format!("ID: {}", self.client_id))
                    )
            )
            .child(
                // 中间：连接状态
                self.connection_status.clone()
            )
            .child(
                // 右侧：当前时间
                div()
                    .text_sm()
                    .text_color(cx.theme().colors.muted)
                    .child(self.current_time.clone())
            )
    }
}
```

### 场景3：ID/密码显示组件

```rust
// 客户端 ID 和密码显示

pub struct IdPasswordDisplay {
    // 客户端 ID
    client_id: SharedString,
    // 密码（是否显示）
    password_masked: bool,
    // 当前密码
    password: SharedString,
}

impl IdPasswordDisplay {
    pub fn new(client_id: &str, password: &str) -> Self {
        Self {
            client_id: client_id.into(),
            password: password.into(),
            password_masked: true,
        }
    }

    /// 复制 ID 到剪贴板
    pub fn copy_id(&self, cx: &mut WindowContext) {
        cx.write_to_clipboard(ClipboardItem::new(self.client_id.to_string()));
    }

    /// 复制密码到剪贴板
    pub fn copy_password(&self, cx: &mut WindowContext) {
        cx.write_to_clipboard(ClipboardItem::new(self.password.to_string()));
    }

    /// 切换密码可见性
    pub fn toggle_password_visibility(&mut self) {
        self.password_masked = !self.password_masked;
    }

    /// 修改密码
    pub fn update_password(&mut self, new_password: &str) {
        self.password = new_password.into();
    }
}

impl Render for IdPasswordDisplay {
    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        div()
            .flex()
            .flex_col()
            .gap_6()
            .p_6()
            .rounded_lg()
            .bg(cx.theme().colors.surface)
            .border_1()
            .border_color(cx.theme().colors.border)
            .child(
                // ID 显示区
                self.render_id_section(cx)
            )
            .child(
                // 密码显示区
                self.render_password_section(cx)
            )
    }

    fn render_id_section(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        div()
            .flex()
            .flex_col()
            .gap_2()
            .child(
                div()
                    .text_sm()
                    .font_medium()
                    .text_color(cx.theme().colors.muted)
                    .child("Your Client ID")
            )
            .child(
                div()
                    .flex()
                    .items_center()
                    .gap_2()
                    .p_3()
                    .rounded_md()
                    .bg(cx.theme().colors.editor_background)
                    .child(
                        div()
                            .text_xl()
                            .font_bold()
                            .font_mono()
                            .text_color(cx.theme().colors.foreground)
                            .child(self.client_id.clone())
                    )
                    .child(
                        Button::new("copy-id", cx, |_, cx| {
                            self.copy_id(cx);
                        })
                        .icon("copy")
                        .variant(ButtonVariant::Ghost)
                        .into_any_element()
                    )
            )
    }

    fn render_password_section(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        div()
            .flex()
            .flex_col()
            .gap_2()
            .child(
                div()
                    .text_sm()
                    .font_medium()
                    .text_color(cx.theme().colors.muted)
                    .child("Access Password")
            )
            .child(
                div()
                    .flex()
                    .items_center()
                    .gap_2()
                    .p_3()
                    .rounded_md()
                    .bg(cx.theme().colors.editor_background)
                    .child(
                        div()
                            .text_lg()
                            .font_mono()
                            .text_color(cx.theme().colors.foreground)
                            .child(if self.password_masked {
                                "••••••••".to_string()
                            } else {
                                self.password.clone()
                            })
                    )
                    .child(
                        Button::new("toggle-visibility", cx, |_, _| {
                            self.toggle_password_visibility();
                        })
                        .icon(if self.password_masked { "eye" } else { "eye-off" })
                        .variant(ButtonVariant::Ghost)
                        .into_any_element()
                    )
                    .child(
                        Button::new("copy-password", cx, |_, cx| {
                            self.copy_password(cx);
                        })
                        .icon("copy")
                        .variant(ButtonVariant::Ghost)
                        .into_any_element()
                    )
            )
            .child(
                div()
                    .text_xs()
                    .text_color(cx.theme().colors.warning)
                    .child("Share this password with administrators to allow remote access")
            )
    }
}
```

### 场景4：依赖管理界面

```rust
// 依赖管理 Tab

pub struct DependenciesTab {
    // 依赖列表状态
    dependencies: Vec<DependencyInfo>,
    // 正在安装的依赖
    installing: Arc<DashMap<String, f32>>, // name -> progress
    // 刷新任务
    refresh_task: Option<Task<()>>,
}

pub struct DependencyInfo {
    pub name: String,
    pub display_name: String,
    pub version: Option<String>,
    pub source: DependencySource,
    pub status: DependencyStatus,
    pub required_version: Option<String>,
    pub install_command: Option<String>,
}

pub enum DependencySource {
    System,      // 系统全局
    Client,      // 客户端隔离目录
    NotInstalled,
}

pub enum DependencyStatus {
    Installed,
    Installing { progress: f32 },
    NotInstalled,
    UpdateAvailable { current: String, latest: String },
    Error { message: String },
}

impl DependenciesTab {
    pub fn new() -> Self {
        let mut this = Self {
            dependencies: Vec::new(),
            installing: Arc::new(DashMap::new()),
            refresh_task: None,
        };
        this.refresh_dependencies();
        this
    }

    /// 刷新依赖状态
    pub fn refresh_dependencies(&mut self) {
        let installing = self.installing.clone();
        self.refresh_task = Some(cx.spawn(|this, mut cx| async move {
            // 模拟检查依赖状态
            let deps = vec![
                DependencyInfo {
                    name: "node".into(),
                    display_name: "Node.js".into(),
                    version: Some("v20.10.0".into()),
                    source: DependencySource::System,
                    status: DependencyStatus::Installed,
                    required_version: Some(">=18.0.0".into()),
                    install_command: None,
                },
                DependencyInfo {
                    name: "npm".into(),
                    display_name: "npm".into(),
                    version: Some("10.2.0".into()),
                    source: DependencySource::System,
                    status: DependencyStatus::Installed,
                    required_version: None,
                    install_command: None,
                },
                DependencyInfo {
                    name: "opencode".into(),
                    display_name: "opencode".into(),
                    version: None,
                    source: DependencySource::NotInstalled,
                    status: DependencyStatus::NotInstalled,
                    required_version: None,
                    install_command: Some("npm install -g opencode".into()),
                },
            ];

            this.update(&mut cx, |this, _| {
                this.dependencies = deps;
            });
        }));
    }

    /// 安装依赖
    pub fn install_dependency(&mut self, name: &str) {
        let name = name.to_string();
        let installing = self.installing.clone();

        cx.spawn(|this, mut cx| async move {
            installing.insert(name.clone(), 0.0);

            // 模拟安装过程
            for i in 0..=100 {
                tokio::time::sleep(Duration::from_millis(100)).await;
                installing.insert(name.clone(), i as f32 / 100.0);
            }

            installing.remove(&name);

            this.update(&mut cx, |this, _| {
                this.refresh_dependencies();
            });
        });
    }
}

impl Render for DependenciesTab {
    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        div()
            .flex()
            .flex_col()
            .h_full()
            .p_6()
            .gap_4()
            .child(
                // 标题和操作
                div()
                    .flex()
                    .justify_between()
                    .items_center()
                    .child(
                        h2()
                            .text-xl()
                            .font_semibold()
                            .child("Dependency Management")
                    )
                    .child(
                        Button::new("refresh", cx, |_, _| {
                            self.refresh_dependencies();
                        })
                        .icon("refresh")
                        .variant(ButtonVariant::Secondary)
                    )
            )
            .child(
                // 依赖列表
                DataTable::new()
                    .columns(vec![
                        TableColumn::new("name", "Name", px(200.), |d: &DependencyInfo, _| {
                            div().child(d.display_name.clone()).into_any_element()
                        }),
                        TableColumn::new("version", "Version", px(150.), |d: &DependencyInfo, _| {
                            div().child(d.version.clone().unwrap_or("-".into())).into_any_element()
                        }),
                        TableColumn::new("source", "Source", px(120.), |d: &DependencyInfo, _| {
                            let source_label = match d.source {
                                DependencySource::System => "System",
                                DependencySource::Client => "Client",
                                DependencySource::NotInstalled => "-",
                            };
                            div()
                                .text_sm()
                                .text_color(cx.theme().colors.muted)
                                .child(source_label)
                                .into_any_element()
                        }),
                        TableColumn::new("status", "Status", px(150.), |d: &DependencyInfo, _| {
                            self.render_status_badge(d, cx).into_any_element()
                        }),
                        TableColumn::new("actions", "Actions", px(200.), |d: &DependencyInfo, _| {
                            self.render_action_buttons(d, cx).into_any_element()
                        }),
                    ])
                    .items(self.dependencies.clone())
            )
    }

    fn render_status_badge(&self, dep: &DependencyInfo, cx: &mut WindowContext) -> impl IntoElement {
        match &dep.status {
            DependencyStatus::Installed => Badge::new("Installed")
                .variant(BadgeVariant::Success),
            DependencyStatus::Installing { progress } => Badge::new(&format!("Installing {:.0}%", progress * 100.0))
                .variant(BadgeVariant::Info),
            DependencyStatus::NotInstalled => Badge::new("Not Installed")
                .variant(BadgeVariant::Warning),
            DependencyStatus::UpdateAvailable { current, latest } => Badge::new(&format!("Update to {}", latest))
                .variant(BadgeVariant::Secondary),
            DependencyStatus::Error { message } => Badge::new(message)
                .variant(BadgeVariant::Danger),
        }
    }

    fn render_action_buttons(&self, dep: &DependencyInfo, cx: &mut WindowContext) -> impl IntoElement {
        match &dep.status {
            DependencyStatus::Installed => div()
                .flex()
                .gap_2()
                .child(
                    Button::new("update", cx, |_, _| {})
                        .icon("download")
                        .variant(ButtonVariant::Ghost)
                        .size(ButtonSize::Small)
                )
                .child(
                    Button::new("uninstall", cx, |_, _| {})
                        .icon("trash")
                        .variant(ButtonVariant::Ghost)
                        .size(ButtonSize::Small)
                ),
            DependencyStatus::NotInstalled => Button::new("install", cx, |_, _| {
                self.install_dependency(&dep.name);
            })
                .icon("install")
                .variant(ButtonVariant::Primary)
                .size(ButtonSize::Small),
            DependencyStatus::Installing { .. } => Button::new("cancel", cx, |_, _| {})
                .icon("x")
                .variant(ButtonVariant::Ghost)
                .size(ButtonSize::Small),
            _ => div(),
        }
    }
}
```

### 场景5：设置界面

```rust
// 设置 Tab

pub struct SettingsTab {
    // data-server 配置
    server_address: SharedString,
    // 自动启动
    auto_launch: bool,
    // 主题模式
    theme_mode: ThemeMode,
    // 工作目录
    work_directory: SharedString,
}

impl SettingsTab {
    pub fn new() -> Self {
        Self {
            server_address: "hbbs.example.com:21116".into(),
            auto_launch: false,
            theme_mode: ThemeMode::System,
            work_directory: "~/.qiming-agent".into(),
        }
    }
}

impl Render for SettingsTab {
    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        Form::new()
            .section(
                FormSection::new("Server Configuration")
                    .description("Configure the data-server connection")
                    .child(
                        FormItem::new("Server Address")
                            .input(Input::new(self.server_address.clone(), |s, _| {
                                self.server_address = s.into();
                            }).placeholder("hbbs.example.com:21116"))
                    )
                    .child(
                        FormItem::new("Relay Server")
                            .input(Input::new("", |_, _| {}).placeholder("hbbr.example.com:21117"))
                    )
            )
            .section(
                FormSection::new("Startup")
                    .child(
                        FormItem::new("Auto Launch")
                            .description("Start the application when system boots")
                            .control(
                                Switch::new(self.auto_launch, |enabled, _| {
                                    self.auto_launch = enabled;
                                })
                            )
                    )
            )
            .section(
                FormSection::new("Appearance")
                    .child(
                        FormItem::new("Theme")
                            .control(
                                Select::new(vec![
                                    ("Light", "light"),
                                    ("Dark", "dark"),
                                    ("System", "system"),
                                ], &format!("{:?}", self.theme_mode))
                            )
                    )
            )
            .section(
                FormSection::new("Files")
                    .child(
                        FormItem::new("Work Directory")
                            .description("Directory for storing files and cache")
                            .input(Input::new(self.work_directory.clone(), |s, _| {
                                self.work_directory = s.into();
                            }))
                    )
            )
            .action(
                Button::new("save", cx, |_, _| {
                    // 保存设置
                })
                    .icon("save")
                    .variant(ButtonVariant::Primary)
            )
    }
}
```

### 场景6：关于对话框

```rust
// 关于 Tab

pub struct AboutTab {
    // 版本信息
    version: String,
    // 构建信息
    build_info: String,
}

impl AboutTab {
    pub fn new() -> Self {
        Self {
            version: env!("CARGO_PKG_VERSION").to_string(),
            build_info: format!("Built on {}", chrono::Utc::now().format("%Y-%m-%d")),
        }
    }
}

impl Render for AboutTab {
    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        div()
            .flex()
            .flex_col()
            .items_center()
            .gap_6()
            .p_8()
            .child(
                // 应用图标
                div()
                    .w_24()
                    .h_24()
                    .rounded_xl()
                    .bg(cx.theme().colors.primary)
                    .flex()
                    .items_center()
                    .justify_center()
                    .child(
                        Icon::new("app_logo")
                            .size(IconSize::Large)
                            .color(gpui::white())
                    )
            )
            .child(
                // 应用名称
                h1()
                    .text_2xl()
                    .font_bold()
                    .child("qiming-agent")
            )
            .child(
                // 版本信息
                div()
                    .flex()
                    .flex_col()
                    .items_center()
                    .gap_1()
                    .child(
                        div()
                            .text_sm()
                            .text_color(cx.theme().colors.muted)
                            .child(format!("Version {}", self.version))
                    )
                    .child(
                        div()
                            .text_xs()
                            .text_color(cx.theme().colors.muted)
                            .child(self.build_info.clone())
                    )
            )
            .child(
                // 链接
                div()
                    .flex()
                    .gap_4()
                    .child(
                        Link::new("Website", "https://example.com")
                    )
                    .child(
                        Link::new("Documentation", "https://docs.example.com")
                    )
                    .child(
                        Link::new("Report Issue", "https://github.com/example/issues")
                    )
            )
            .child(
                // 许可证
                div()
                    .text_sm()
                    .text_color(cx.theme().colors.muted)
                    .child("Licensed under MIT License")
            )
    }
}
```