pc/src/pages/
├── index.vue                    # 首页（Landing Page）
├── dashboard/
│   └── index.vue            # 数据看板
├── audio/
│   ├── clone/               # 声音克隆
│   │   ├── create/          # 创建音色
│   │   │   ├── create-voice.vue
│   │   │   ├── index.vue
│   │   │   └── success.vue
│   │   ├── common.vue       # 系统音色
│   │   └── index.vue       # 我的音色
│   └── synthesis/           # 声音合成
│       ├── components/
│       │   ├── detail.vue
│       │   ├── local-upload.vue
│       │   ├── options.vue
│       │   └── records.vue
│       └── index.vue
├── avatar/
│   ├── components/
│   │   ├── batch-generator.vue   # 批量生成
│   │   ├── create-avatar.vue    # 创建分身
│   │   ├── detail.vue          # 详情
│   │   ├── generator.vue       # 生成器
│   │   ├── preview.vue         # 预览
│   │   └── record-detail.vue   # 记录详情
│   ├── index.vue            # 我的形象
│   ├── index copy.vue       # 备份文件
│   └── works.vue            # 我的作品
├── video/
│   ├── components/
│   │   ├── create-video.vue   # 创建视频
│   │   └── record-detail.vue # 记录详情
│   └── index.vue            # 我的作品
├── profile/
│   ├── components/
│   │   ├── bindMobile.vue      # 绑定手机
│   │   ├── bindWechat.vue     # 绑定微信
│   │   ├── credit-card.vue    # 会员卡
│   │   ├── editPassword.vue   # 修改密码
│   │   ├── setPassword.vue   # 设置密码
│   │   └── user-card.vue     # 用户卡片
│   ├── exchange.vue          # 兑换中心
│   ├── index.vue            # 我的信息
│   ├── power-flow.vue       # 账单明细
│   ├── profile-edit.vue     # 编辑资料
│   ├── recharge-record.vue  # 充值记录
│   └── recharge.vue         # 充值中心
├── help/
│   ├── [id].vue            # 帮助详情（动态路由）
│   └── index.vue            # 帮助列表
└── agreement/
    └── index.vue            # 协议页面

<template>
  <div class="relative min-h-full">
    <!-- 渐变背景 -->
    <div class="gradient h-[50vh] w-screen md:h-screen"></div>
    <div class="landing-grid absolute inset-0 z-[-1]"></div>

    <!-- 导航栏 -->
    <div class="container">
      <!-- Logo -->
      <!-- 导航菜单 -->
      <!-- 用户信息 -->
      <!-- 移动端菜单按钮 -->
    </div>

    <!-- 主体内容 -->
    <div class="container">
      <h1>{{ decorateConfig?.[0].prop.title }}</h1>
      <p>{{ decorateConfig?.[0].prop.subtitle }}</p>
      <div class="flex gap-4">
        <UButton @click="toDemo">查看案例</UButton>
        <UButton to="/video">开始构建</UButton>
      </div>
    </div>

    <!-- 轮播图 -->
    <div id="__demo_container__">
      <UCarousel v-if="decorateConfig?.[1].prop.data.length">
        <AspectRatio :src="getImageUrl(item.image)" />
      </UCarousel>
    </div>

    <!-- 页脚 -->
    <div>
      <!-- 用户协议、隐私政策 -->
      <!-- 版权信息 -->
    </div>
  </div>
</template>

<div class="flex size-full flex-1 overflow-hidden">
  <!-- 左侧：合成器选项 -->
  <div :class="{ hidden: activeIndex === 1 }">
    <Options @refresh="refreshRecord" />
  </div>

  <!-- 右侧：合成记录 -->
  <div :class="{ 'hidden md:flex': activeIndex === 0 }">
    <Records ref="recordsRef" />
  </div>
</div>

<ProList
  ref="listRef"
  v-slot="{ item }: { item: AiModelListItem }"
  :request-instance="apiGetAiModelList"
  :polling="(list) => list.filter((item) => isTaskPendding(item.status)).length === 0"
  :scroll="true"
  class="grid grid-cols-1 gap-4 p-0.5 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
>
  <!-- 卡片内容 -->
  <div class="relative flex flex-col overflow-hidden rounded-lg bg-background">
    <!-- 悬停遮罩层 -->
    <div class="absolute inset-0 z-10 size-full gap-4 bg-black/10 opacity-0 backdrop-blur transition-opacity center hover:opacity-100">
      <UButton icon="i-tabler:player-play-filled" @click="videoPlayerRef?.open(item.video_url)">
        播放
      </UButton>
      <UButton icon="tabler:wand" @click="openCreateVideoModal(item)">
        合成
      </UButton>
    </div>
    <!-- 封面图 -->
    <AspectRatio :src="item.cover" />
    <!-- 标题和时间 -->
    <h1>{{ item.name || '暂无标题' }}</h1>
    <span>{{ item.create_time }}</span>
  </div>
</ProList>

<template #breadcrumb-right>
  <PageSearch v-model="keyword" @search="searchHandle" />
</template>

<ProList
  ref="listRef"
  v-slot="{ item }: { item: AiAvatarItem }"
  :request-instance="apiGetAiAvatarList"
  :scroll="true"
  :polling="(list) => list.filter((item) => isTaskPendding(item.status)).length === 0"
  class="grid grid-cols-1 gap-4 p-0.5 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
>
  <!-- 类似avatar的卡片结构 -->
</ProList>

首页
  └─> apiGetDecorateConfig()  // 获取装修配置

数据看板
  ├─> apiGetPowerStatic()      // 钱包统计
  ├─> apiGetWorksStatic()     // 作品统计
  └─> apiGetWorkbenchChart()  // 图表数据

声音合成
  └─> apiGetVoiceList()       // 声音列表

数字人
  └─> apiGetAiModelList()     // 数字人列表

我的作品
  └─> apiGetAiAvatarList()    // 作品列表