# AppTopBar 组件

一个灵活的应用程序顶部栏组件，用于显示标题、导航和操作元素。

## 功能特性

- **灵活布局**: 三个不同区域 - 主页/标志、主内容和右侧操作
- **可定制内容**: 支持属性和基于插槽的内容
- **响应式设计**: 适应不同屏幕尺寸
- **简单集成**: 易于集成到任何应用程序布局中
- **自定义样式**: 支持自定义CSS样式

## 基本用法

```svelte
<script>
import AppTopBar from '@ticatec/uniface-element/AppTopBar';
</script>

<AppTopBar title="我的应用程序" />
```

## 属性参数

| 属性 | 类型 | 默认值 | 描述 |
|------|------|---------|-------------|
| `title` | `string` | - | 在主内容区域显示的标题文本 |
| `style` | `string` | `''` | 顶部栏的自定义CSS样式 |

## 插槽

| 插槽 | 描述 |
|------|-------------|
| `home` | 左侧内容（通常是标志或主页按钮） |
| `default` | 主内容区域（使用时覆盖title属性） |
| `right` | 右侧内容（通常是用户菜单、操作） |

## 使用示例

### 基础标题栏

```svelte
<AppTopBar title="仪表板" />
```

### 带标志和用户菜单

```svelte
<AppTopBar title="我的应用">
  <div slot="home">
    <img src="/logo.png" alt="标志" class="logo" />
  </div>
  
  <div slot="right">
    <button class="user-menu">
      <i class="icon_google_account_circle"></i>
      张三
    </button>
  </div>
</AppTopBar>
```

### 自定义主内容

```svelte
<AppTopBar>
  <div slot="home">
    <button class="menu-toggle">
      <i class="icon_google_menu"></i>
    </button>
  </div>
  
  <!-- 自定义主内容而不是标题 -->
  <div class="breadcrumbs">
    <span>首页</span>
    <i class="icon_google_chevron_right"></i>
    <span>仪表板</span>
    <i class="icon_google_chevron_right"></i>
    <span>报告</span>
  </div>
  
  <div slot="right">
    <button class="notifications">
      <i class="icon_google_notifications"></i>
      <span class="badge">3</span>
    </button>
    <button class="settings">
      <i class="icon_google_settings"></i>
    </button>
  </div>
</AppTopBar>
```

### 搜索栏集成

```svelte
<AppTopBar>
  <div slot="home">
    <h1 class="app-title">我的应用</h1>
  </div>
  
  <div class="search-container">
    <input 
      type="search" 
      placeholder="搜索..." 
      class="search-input"
    />
    <i class="icon_google_search search-icon"></i>
  </div>
  
  <div slot="right">
    <div class="user-profile">
      <img src="/avatar.jpg" alt="用户" class="avatar" />
      <span>欢迎，用户</span>
    </div>
  </div>
</AppTopBar>
```

### 导航标签

```svelte
<AppTopBar>
  <div slot="home">
    <img src="/logo.svg" alt="公司" class="company-logo" />
  </div>
  
  <nav class="main-navigation">
    <a href="/dashboard" class="nav-link active">仪表板</a>
    <a href="/projects" class="nav-link">项目</a>
    <a href="/team" class="nav-link">团队</a>
    <a href="/reports" class="nav-link">报告</a>
  </nav>
  
  <div slot="right">
    <button class="help-button">
      <i class="icon_google_help"></i>
    </button>
    <div class="user-dropdown">
      <button class="dropdown-trigger">
        <i class="icon_google_account_circle"></i>
        <i class="icon_google_arrow_drop_down"></i>
      </button>
    </div>
  </div>
</AppTopBar>
```

### 自定义样式

```svelte
<AppTopBar 
  title="样式化应用"
  style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1);"
>
  <div slot="home">
    <i class="icon_google_apps" style="font-size: 24px;"></i>
  </div>
  
  <div slot="right">
    <button style="background: rgba(255,255,255,0.2); border: none; color: white; padding: 8px 16px; border-radius: 4px;">
      退出登录
    </button>
  </div>
</AppTopBar>
```

## 布局结构

AppTopBar使用三列布局：

1. **主页区域**（左）: 可选的标志、菜单按钮或主页链接
2. **主内容**（中）: 标题或自定义内容，具有flex-grow
3. **右侧区域**（右）: 操作、用户菜单或其他控件

## 样式定制

组件使用以下CSS类：

- `.uniface-top-bar` - 主容器
- `.bar-home` - 主页/标志区域容器
- `.main-content` - 主内容区域

### CSS示例

```css
.uniface-top-bar {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 48px;
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.bar-home {
  flex: 0 0 auto;
  margin-right: 16px;
}

.main-content {
  flex: 1 1 auto;
  font-weight: 500;
}

/* 插槽的自定义样式 */
.logo {
  height: 32px;
  width: auto;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
}
```

## 常见模式

### 应用程序标题栏

```svelte
<AppTopBar title="项目管理">
  <div slot="home">
    <button class="sidebar-toggle" on:click={toggleSidebar}>
      <i class="icon_google_menu"></i>
    </button>
  </div>
  
  <div slot="right">
    <button class="new-project">
      <i class="icon_google_add"></i>
      新建项目
    </button>
    <div class="user-profile">
      <img src={user.avatar} alt={user.name} />
      {user.name}
    </div>
  </div>
</AppTopBar>
```

### 电商标题栏

```svelte
<AppTopBar>
  <div slot="home">
    <img src="/store-logo.png" alt="商店" class="store-logo" />
  </div>
  
  <div class="search-bar">
    <input type="search" placeholder="搜索商品..." />
    <button type="submit">
      <i class="icon_google_search"></i>
    </button>
  </div>
  
  <div slot="right">
    <button class="cart">
      <i class="icon_google_shopping_cart"></i>
      <span class="cart-count">{cartItems}</span>
    </button>
    <button class="account">
      <i class="icon_google_person"></i>
      账户
    </button>
  </div>
</AppTopBar>
```

### 管理后台

```svelte
<AppTopBar>
  <div slot="home">
    <h1>管理面板</h1>
  </div>
  
  <div class="admin-nav">
    <a href="/admin/users">用户</a>
    <a href="/admin/settings">设置</a>
    <a href="/admin/reports">报告</a>
  </div>
  
  <div slot="right">
    <div class="admin-actions">
      <button class="system-status">
        <i class="icon_google_check_circle" style="color: green;"></i>
        系统正常
      </button>
      <button class="admin-logout">
        <i class="icon_google_exit_to_app"></i>
        退出登录
      </button>
    </div>
  </div>
</AppTopBar>
```

## 响应式考虑

对于移动端响应式，考虑：

```css
@media (max-width: 768px) {
  .uniface-top-bar {
    padding: 0 8px;
  }
  
  .main-content {
    font-size: 14px;
  }
  
  /* 在移动设备上隐藏不重要的项目 */
  .hide-mobile {
    display: none;
  }
}
```

## 无障碍访问

- 在插槽中使用语义化HTML元素
- 确保按钮有适当的标签或aria-labels
- 保持足够的颜色对比度
- 支持交互元素的键盘导航

## 最佳实践

1. **保持简洁**: 不要在顶部栏中放置过多元素
2. **一致的品牌**: 使用一致的标志放置和样式
3. **用户操作**: 将最重要的用户操作放在右侧
4. **移动优先**: 以移动设备为设计出发点
5. **视觉层次**: 使用适当的字体粗细和大小建立层次
6. **图标使用**: 在整个界面中使用一致的图标样式和大小

## 与布局组件集成

AppTopBar与布局组件配合良好：

```svelte
<SidebarLayout headerHeight="56px">
  <AppTopBar slot="header" title="我的应用程序">
    <!-- 顶部栏内容 -->
  </AppTopBar>
  
  <div slot="sidebar">
    <!-- 侧边栏内容 -->
  </div>
  
  <!-- 主内容 -->
</SidebarLayout>
```

## 注意事项

- 确保在不同屏幕尺寸下测试布局
- 考虑长标题的文本截断处理
- 在设计时考虑不同语言的文本长度变化
- 为移动设备优化触摸交互区域
- 保持与整体应用程序设计风格的一致性