diff --git a/src/views/keyboard/aicompanion/index.vue b/src/views/keyboard/aicompanion/index.vue
index f47d00c..bf5c90e 100644
--- a/src/views/keyboard/aicompanion/index.vue
+++ b/src/views/keyboard/aicompanion/index.vue
@@ -1,178 +1,410 @@
-<template>
+<template>
+  <!-- <ContentWrap class="page-hero">
+    <div class="hero-panel">
+      <div>
+        <div class="hero-eyebrow">AI Companion Admin</div>
+        <div class="hero-title">陪聊角色管理</div>
+        <div class="hero-subtitle">
+          聚焦角色筛选、上线状态和人设浏览，降低长表格的阅读负担。
+        </div>
+      </div>
+      <div class="hero-metrics">
+        <div class="metric-card">
+          <div class="metric-label">当前页角色</div>
+          <div class="metric-value">{{ list.length }}</div>
+        </div>
+        <div class="metric-card">
+          <div class="metric-label">在线角色</div>
+          <div class="metric-value">{{ onlineCount }}</div>
+        </div>
+        <div class="metric-card">
+          <div class="metric-label">公开角色</div>
+          <div class="metric-value">{{ publicCount }}</div>
+        </div>
+        <div class="metric-card accent">
+          <div class="metric-label">已选中</div>
+          <div class="metric-value">{{ checkedIds.length }}</div>
+        </div>
+      </div>
+    </div>
+  </ContentWrap> -->
+
   <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
-      <el-form-item label="角色头像" prop="avatarUrl">
-        <el-input v-model="queryParams.avatarUrl" placeholder="请输入角色头像URL" clearable @keyup.enter="handleQuery"
-          class="!w-240px" />
-      </el-form-item>
-      <el-form-item label="角色封面图" prop="coverImageUrl">
-        <el-input v-model="queryParams.coverImageUrl" placeholder="请输入角色封面图URL" clearable @keyup.enter="handleQuery"
-          class="!w-240px" />
-      </el-form-item>
-      <el-form-item label="性别" prop="gender">
-        <el-input v-model="queryParams.gender" placeholder="male / female / other" clearable @keyup.enter="handleQuery"
-          class="!w-240px" />
-      </el-form-item>
-      <el-form-item label="年龄段" prop="ageRange">
-        <el-input v-model="queryParams.ageRange" placeholder="如：20s、25-30" clearable @keyup.enter="handleQuery"
-          class="!w-240px" />
-      </el-form-item>
-      <el-form-item label="性格标签" prop="personalityTags">
-        <el-input v-model="queryParams.personalityTags" placeholder="如：温柔、黏人、治愈" clearable @keyup.enter="handleQuery"
-          class="!w-240px" />
-      </el-form-item>
-      <el-form-item label="说话风格" prop="speakingStyle">
-        <el-input v-model="queryParams.speakingStyle" placeholder="如：撒娇型、理性型、活泼型" clearable @keyup.enter="handleQuery"
-          class="!w-240px" />
-      </el-form-item>
-      <el-form-item label="系统Prompt" prop="systemPrompt">
-        <el-input v-model="queryParams.systemPrompt" placeholder="定义角色核心人设" clearable @keyup.enter="handleQuery"
-          class="!w-240px" />
-      </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
-          <el-option label="上线" value="1" />
-          <el-option label="下线" value="0" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="可见性" prop="visibility">
-        <el-select v-model="queryParams.visibility" placeholder="请选择可见性" clearable class="!w-240px">
-          <el-option label="公开" value="1" />
-          <el-option label="内测" value="2" />
-          <el-option label="隐藏" value="3" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="排序权重" prop="sortOrder">
-        <el-input v-model="queryParams.sortOrder" placeholder="数值越大排序越靠前" clearable @keyup.enter="handleQuery"
-          class="!w-240px" />
-      </el-form-item>
-      <el-form-item label="热度评分" prop="popularityScore">
-        <el-input v-model="queryParams.popularityScore" placeholder="用于推荐排序" clearable @keyup.enter="handleQuery"
-          class="!w-240px" />
-      </el-form-item>
-      <el-form-item label="创建时间" prop="createdAt">
-        <el-date-picker v-model="queryParams.createdAt" value-format="YYYY-MM-DD" type="date" placeholder="选择创建时间"
-          clearable class="!w-240px" />
-      </el-form-item>
-      <el-form-item label="更新时间" prop="updatedAt">
-        <el-date-picker v-model="queryParams.updatedAt" value-format="YYYY-MM-DD" type="date" placeholder="选择更新时间"
-          clearable class="!w-240px" />
-      </el-form-item>
-      <el-form-item label="开场白" prop="prologue">
-        <el-input v-model="queryParams.prologue" placeholder="请输入开场白" clearable @keyup.enter="handleQuery"
-          class="!w-240px" />
-      </el-form-item>
-      <el-form-item label="开场白音频" prop="prologueAudio">
-        <el-input v-model="queryParams.prologueAudio" placeholder="请输入开场白音频" clearable @keyup.enter="handleQuery"
-          class="!w-240px" />
-      </el-form-item>
-      <el-form-item label="音频Id" prop="voiceId">
-        <el-input v-model="queryParams.voiceId" placeholder="请输入音频Id" clearable @keyup.enter="handleQuery"
-          class="!w-240px" />
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery">
-          <Icon icon="ep:search" class="mr-5px" /> 搜索
-        </el-button>
-        <el-button @click="resetQuery">
-          <Icon icon="ep:refresh" class="mr-5px" /> 重置
-        </el-button>
-        <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['keyboard:ai-companion:create']">
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
-        </el-button>
-        <el-button type="success" plain @click="handleExport" :loading="exportLoading"
-          v-hasPermi="['keyboard:ai-companion:export']">
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
-        <el-button type="danger" plain :disabled="isEmpty(checkedIds)" @click="handleDeleteBatch"
-          v-hasPermi="['keyboard:ai-companion:delete']">
-          <Icon icon="ep:delete" class="mr-5px" /> 批量删除
-        </el-button>
-      </el-form-item>
+    <div class="toolbar-header">
+      <div>
+        <div class="section-title">筛选条件</div>
+        <div class="section-desc">保留高频条件直出，低频条件收进高级筛选。</div>
+      </div>
+      <el-button text type="primary" @click="showAdvancedFilters = !showAdvancedFilters">
+        <Icon :icon="showAdvancedFilters ? 'ep:arrow-up' : 'ep:arrow-down'" class="mr-4px" />
+        {{ showAdvancedFilters ? '收起高级筛选' : '展开高级筛选' }}
+      </el-button>
+    </div>
+
+    <el-form ref="queryFormRef" :model="queryParams" label-width="90px" class="filter-form">
+      <div class="filter-grid">
+        <el-form-item label="性别" prop="gender">
+          <el-select v-model="queryParams.gender" placeholder="全部性别" clearable filterable class="!w-full">
+            <el-option label="Male" value="male" />
+            <el-option label="Female" value="female" />
+            <el-option label="Other" value="other" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="queryParams.status" placeholder="全部状态" clearable class="!w-full">
+            <el-option label="在线" :value="1" />
+            <el-option label="离线" :value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="可见性" prop="visibility">
+          <el-select v-model="queryParams.visibility" placeholder="全部可见性" clearable class="!w-full">
+            <el-option label="公开" :value="1" />
+            <el-option label="内测" :value="2" />
+            <el-option label="隐藏" :value="3" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="性格标签" prop="personalityTags">
+          <el-input v-model="queryParams.personalityTags" placeholder="如：温柔、治愈" clearable @keyup.enter="handleQuery" />
+        </el-form-item>
+        <el-form-item label="说话风格" prop="speakingStyle">
+          <el-input v-model="queryParams.speakingStyle" placeholder="如：理性、活泼" clearable @keyup.enter="handleQuery" />
+        </el-form-item>
+        <el-form-item label="语音 ID" prop="voiceId">
+          <el-input v-model="queryParams.voiceId" placeholder="请输入 voiceId" clearable @keyup.enter="handleQuery" />
+        </el-form-item>
+      </div>
+
+      <el-collapse-transition>
+        <div v-show="showAdvancedFilters" class="advanced-panel">
+          <div class="filter-grid">
+            <el-form-item label="年龄段" prop="ageRange">
+              <el-input v-model="queryParams.ageRange" placeholder="如：20s、25-30" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="系统 Prompt" prop="systemPrompt">
+              <el-input v-model="queryParams.systemPrompt" placeholder="按核心人设搜索" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="开场白" prop="prologue">
+              <el-input v-model="queryParams.prologue" placeholder="搜索开场白内容" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="热度分" prop="popularityScore">
+              <el-input v-model="queryParams.popularityScore" placeholder="按热度分搜索" clearable
+                @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="排序权重" prop="sortOrder">
+              <el-input v-model="queryParams.sortOrder" placeholder="按排序权重搜索" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="创建时间" prop="createdAt">
+              <el-date-picker v-model="queryParams.createdAt" type="date" value-format="YYYY-MM-DD" placeholder="选择创建日期"
+                clearable class="!w-full" />
+            </el-form-item>
+            <el-form-item label="更新时间" prop="updatedAt">
+              <el-date-picker v-model="queryParams.updatedAt" type="date" value-format="YYYY-MM-DD" placeholder="选择更新日期"
+                clearable class="!w-full" />
+            </el-form-item>
+            <el-form-item label="头像 URL" prop="avatarUrl">
+              <el-input v-model="queryParams.avatarUrl" placeholder="匹配头像 URL" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="封面 URL" prop="coverImageUrl">
+              <el-input v-model="queryParams.coverImageUrl" placeholder="匹配封面 URL" clearable
+                @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="开场白音频" prop="prologueAudio">
+              <el-input v-model="queryParams.prologueAudio" placeholder="匹配音频地址" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+          </div>
+        </div>
+      </el-collapse-transition>
+
+      <div class="toolbar-actions">
+        <div class="action-group">
+          <el-button @click="handleQuery">
+            <Icon icon="ep:search" class="mr-5px" />
+            搜索
+          </el-button>
+          <el-button @click="resetQuery">
+            <Icon icon="ep:refresh" class="mr-5px" />
+            重置
+          </el-button>
+        </div>
+        <div class="action-group">
+          <el-button type="primary" @click="openForm('create')" v-hasPermi="['keyboard:ai-companion:create']">
+            <Icon icon="ep:plus" class="mr-5px" />
+            新增角色
+          </el-button>
+          <el-button type="success" plain @click="handleExport" :loading="exportLoading"
+            v-hasPermi="['keyboard:ai-companion:export']">
+            <Icon icon="ep:download" class="mr-5px" />
+            导出
+          </el-button>
+          <el-button type="danger" plain :disabled="isEmpty(checkedIds)" @click="handleDeleteBatch"
+            v-hasPermi="['keyboard:ai-companion:delete']">
+            <Icon icon="ep:delete" class="mr-5px" />
+            批量删除
+          </el-button>
+        </div>
+      </div>
     </el-form>
   </ContentWrap>
 
-  <!-- 列表 -->
   <ContentWrap>
-    <el-table row-key="id" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"
-      highlight-current-row @current-change="handleCurrentChange" @selection-change="handleRowCheckboxChange">
-      <el-table-column type="selection" width="55" />
-      <el-table-column label="陪聊角色唯一ID" align="center" prop="id" width="120px" />
-      <el-table-column label="角色头像" align="center" prop="avatarUrl" width="100px">
-        <template #default="scope">
-          <el-image v-if="scope.row.avatarUrl" :src="scope.row.avatarUrl" fit="cover" class="avatar-image" />
-          <span v-else>无</span>
+    <div class="toolbar-header">
+      <div>
+        <div class="section-title">角色列表</div>
+        <div class="section-desc">
+          共 {{ total }} 条记录，当前展示 {{ list.length }} 条。
+        </div>
+      </div>
+      <div class="selection-indicator" :class="{ active: checkedIds.length > 0 }">
+        <Icon icon="ep:select" class="mr-6px" />
+        已勾选 {{ checkedIds.length }} 项
+      </div>
+    </div>
+
+    <el-table row-key="id" v-loading="loading" :data="list" stripe highlight-current-row :show-overflow-tooltip="false"
+      @current-change="handleCurrentChange" @selection-change="handleRowCheckboxChange">
+      <el-table-column type="selection" width="52" />
+      <el-table-column label="角色信息" min-width="300">
+        <template #default="{ row }">
+          <div class="companion-cell">
+            <el-image v-if="row.coverImageUrl" :src="row.coverImageUrl" :preview-src-list="buildPreviewList(row)"
+              fit="cover" class="cover-image" preview-teleported />
+            <div v-else class="cover-image cover-image--empty">无封面</div>
+
+            <div class="companion-main">
+              <div class="companion-head">
+                <el-avatar v-if="row.avatarUrl" :src="row.avatarUrl" :size="42" />
+                <div v-else class="avatar-fallback">AI</div>
+                <div>
+                  <div class="companion-id">ID {{ row.id }}</div>
+                  <div class="companion-meta">
+                    <span>{{ formatGender(row.gender) }}</span>
+                    <span>{{ row.ageRange || '年龄未填' }}</span>
+                  </div>
+                </div>
+              </div>
+              <div class="tag-row">
+                <el-tag v-for="tag in getTagList(row.personalityTags)" :key="tag" size="small" effect="plain" round>
+                  {{ tag }}
+                </el-tag>
+                <span v-if="getTagList(row.personalityTags).length === 0" class="muted-text">
+                  暂无标签
+                </span>
+              </div>
+            </div>
+          </div>
         </template>
       </el-table-column>
-      <el-table-column label="角色封面图" align="center" prop="coverImageUrl" width="150px">
-        <template #default="scope">
-          <el-image v-if="scope.row.coverImageUrl" :src="scope.row.coverImageUrl" fit="cover" class="cover-image" />
-          <span v-else>无</span>
+      <el-table-column label="人设概览" min-width="330">
+        <template #default="{ row }">
+          <div class="stack-text">
+            <div class="stack-title">{{ row.speakingStyle || '未填写说话风格' }}</div>
+            <div class="stack-desc line-clamp-2">
+              {{ row.systemPrompt || '暂无系统 Prompt' }}
+            </div>
+          </div>
         </template>
       </el-table-column>
-      <el-table-column label="角色性别（male / female / other）" align="center" prop="gender" />
-      <el-table-column label="角色年龄段描述（如：20s、25-30）" align="center" prop="ageRange" />
-      <el-table-column label="角色性格标签数组（如：温柔、黏人、治愈）" align="center" prop="personalityTags" />
-      <el-table-column label="角色说话风格（如：撒娇型、理性型、活泼型）" align="center" prop="speakingStyle" />
-      <el-table-column label="AI系统Prompt，定义角色核心人设，仅供模型使用" align="center" prop="systemPrompt" />
-      <el-table-column label="角色状态：1=上线，0=下线" align="center" prop="status" />
-      <el-table-column label="角色可见性：1=公开，2=内测，3=隐藏" align="center" prop="visibility" />
-      <el-table-column label="排序权重，数值越大排序越靠前" align="center" prop="sortOrder" />
-      <el-table-column label="角色热度评分，用于推荐排序" align="center" prop="popularityScore" />
-      <!-- <el-table-column label="创建时间" align="center" prop="createdAt" :formatter="dateFormatter" width="180px" />
-      <el-table-column label="更新时间" align="center" prop="updatedAt" :formatter="dateFormatter" width="180px" /> -->
-      <el-table-column label="开场白" align="center" prop="prologue" />
-      <el-table-column label="开场白音频" align="center" prop="prologueAudio" />
-      <el-table-column label="音频Id" align="center" prop="voiceId" />
-      <el-table-column label="操作" align="center" min-width="120px">
-        <template #default="scope">
-          <el-button link type="primary" @click="openForm('update', scope.row.id)"
+      <el-table-column label="状态" width="170" align="center">
+        <template #default="{ row }">
+          <div class="status-stack">
+            <el-tag :type="getStatusMeta(row.status).type" round>
+              {{ getStatusMeta(row.status).label }}
+            </el-tag>
+            <el-tag :type="getVisibilityMeta(row.visibility).type" effect="plain" round>
+              {{ getVisibilityMeta(row.visibility).label }}
+            </el-tag>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="排序 / 热度" width="150" align="center">
+        <template #default="{ row }">
+          <div class="score-stack">
+            <div>排序 {{ row.sortOrder ?? '-' }}</div>
+            <div class="score-highlight">热度 {{ row.popularityScore ?? '-' }}</div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="开场白" min-width="260">
+        <template #default="{ row }">
+          <div class="line-clamp-3">{{ row.prologue || '暂无开场白' }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="语音" min-width="180">
+        <template #default="{ row }">
+          <div class="stack-text">
+            <div class="stack-title mono-text">{{ row.voiceId || '-' }}</div>
+            <div class="stack-desc line-clamp-1">{{ row.prologueAudio || '未配置开场音频' }}</div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="更新时间" width="180" align="center">
+        <template #default="{ row }">
+          {{ dateFormatter(row.updatedAt) || '-' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="130" fixed="right">
+        <template #default="{ row }">
+          <el-button link type="primary" @click="openForm('update', row.id)"
             v-hasPermi="['keyboard:ai-companion:update']">
             编辑
           </el-button>
-          <el-button link type="danger" @click="handleDelete(scope.row.id)"
-            v-hasPermi="['keyboard:ai-companion:delete']">
+          <el-button link type="danger" @click="handleDelete(row.id)" v-hasPermi="['keyboard:ai-companion:delete']">
             删除
           </el-button>
         </template>
       </el-table-column>
     </el-table>
-    <!-- 分页 -->
+
     <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
       @pagination="getList" />
   </ContentWrap>
 
-  <!-- 表单弹窗：添加/修改 -->
-  <AiCompanionForm ref="formRef" @success="getList" />
-  <!-- 子表的列表 -->
   <ContentWrap>
-    <el-tabs model-value="aiCompanionI18n">
-      <el-tab-pane label="AI陪聊角色国际化表，用于存储不同语言下的角色名称、一句话描述和详细介绍" name="aiCompanionI18n">
-        <AiCompanionI18nList :id="currentRow.id" />
-      </el-tab-pane>
-    </el-tabs>
+    <div class="toolbar-header">
+      <div>
+        <div class="section-title">角色详情</div>
+        <div class="section-desc">点击表格行查看当前角色的人设摘要和国际化内容。</div>
+      </div>
+      <div v-if="currentRow.id" class="selection-indicator active">
+        当前查看 ID {{ currentRow.id }}
+      </div>
+    </div>
+
+    <el-empty v-if="!currentRow.id" description="请选择上方列表中的一条角色记录" :image-size="120" />
+    <template v-else>
+      <div class="detail-banner">
+        <el-avatar v-if="currentRow.avatarUrl" :src="currentRow.avatarUrl" :size="56" />
+        <div v-else class="avatar-fallback avatar-fallback--large">AI</div>
+        <div class="detail-banner__content">
+          <div class="detail-banner__title">
+            角色 #{{ currentRow.id }}
+            <el-tag size="small" :type="getStatusMeta(currentRow.status).type" round>
+              {{ getStatusMeta(currentRow.status).label }}
+            </el-tag>
+            <el-tag size="small" :type="getVisibilityMeta(currentRow.visibility).type" effect="plain" round>
+              {{ getVisibilityMeta(currentRow.visibility).label }}
+            </el-tag>
+          </div>
+          <div class="detail-banner__subtitle">
+            {{ formatGender(currentRow.gender) }} / {{ currentRow.ageRange || '年龄未填' }} / {{
+              currentRow.speakingStyle || '说话风格未填'
+            }}
+          </div>
+        </div>
+      </div>
+
+      <el-row :gutter="16">
+        <el-col :xs="24" :lg="14">
+          <el-card shadow="never" class="detail-card">
+            <template #header>
+              <div class="detail-card__title">角色摘要</div>
+            </template>
+            <el-descriptions :column="1" border>
+              <el-descriptions-item label="性格标签">
+                <div class="tag-row">
+                  <el-tag v-for="tag in getTagList(currentRow.personalityTags)" :key="tag" size="small" effect="plain"
+                    round>
+                    {{ tag }}
+                  </el-tag>
+                  <span v-if="getTagList(currentRow.personalityTags).length === 0">暂无标签</span>
+                </div>
+              </el-descriptions-item>
+              <el-descriptions-item label="系统 Prompt">
+                {{ currentRow.systemPrompt || '暂无系统 Prompt' }}
+              </el-descriptions-item>
+              <el-descriptions-item label="开场白">
+                {{ currentRow.prologue || '暂无开场白' }}
+              </el-descriptions-item>
+              <el-descriptions-item label="语音配置">
+                <div class="detail-audio">
+                  <span>voiceId：{{ currentRow.voiceId || '-' }}</span>
+                  <span>音频：{{ currentRow.prologueAudio || '未配置' }}</span>
+                </div>
+              </el-descriptions-item>
+            </el-descriptions>
+          </el-card>
+        </el-col>
+        <el-col :xs="24" :lg="10">
+          <el-card shadow="never" class="detail-card">
+            <template #header>
+              <div class="detail-card__title">运营信息</div>
+            </template>
+            <el-descriptions :column="1" border>
+              <el-descriptions-item label="排序权重">
+                {{ currentRow.sortOrder ?? '-' }}
+              </el-descriptions-item>
+              <el-descriptions-item label="热度评分">
+                {{ currentRow.popularityScore ?? '-' }}
+              </el-descriptions-item>
+              <el-descriptions-item label="创建时间">
+                {{ dateFormatter(currentRow.createdAt) || '-' }}
+              </el-descriptions-item>
+              <el-descriptions-item label="更新时间">
+                {{ dateFormatter(currentRow.updatedAt) || '-' }}
+              </el-descriptions-item>
+            </el-descriptions>
+          </el-card>
+        </el-col>
+      </el-row>
+
+      <div class="i18n-panel">
+        <el-tabs model-value="aiCompanionI18n">
+          <el-tab-pane label="国际化内容" name="aiCompanionI18n">
+            <AiCompanionI18nList :id="currentRow.id" />
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </template>
   </ContentWrap>
+
+  <AiCompanionForm ref="formRef" @success="getList" />
 </template>
 
 <script setup lang="ts">
-import { isEmpty } from '@/utils/is'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
-import { AiCompanionApi, AiCompanion } from '@/api/keyboard/aicompanion'
+import { isEmpty } from '@/utils/is'
+import { AiCompanionApi, type AiCompanion } from '@/api/keyboard/aicompanion'
 import AiCompanionForm from './AiCompanionForm.vue'
 import AiCompanionI18nList from './components/AiCompanionI18nList.vue'
 
-/** AI陪聊角色表，用于定义恋爱/陪伴型虚拟角色的基础信息与人设 列表 */
 defineOptions({ name: 'KeyboardAiCompanion' })
 
-const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
+type QueryParams = {
+  pageNo: number
+  pageSize: number
+  avatarUrl: string | undefined
+  coverImageUrl: string | undefined
+  gender: string | undefined
+  ageRange: string | undefined
+  personalityTags: string | undefined
+  speakingStyle: string | undefined
+  systemPrompt: string | undefined
+  status: number | undefined
+  visibility: number | undefined
+  sortOrder: number | string | undefined
+  popularityScore: number | string | undefined
+  createdAt: string | undefined
+  updatedAt: string | undefined
+  prologue: string | undefined
+  prologueAudio: string | undefined
+  voiceId: string | undefined
+}
 
-const loading = ref(true) // 列表的加载中
-const list = ref<AiCompanion[]>([]) // 列表的数据
-const total = ref(0) // 列表的总页数
-const queryParams = reactive({
+const message = useMessage()
+const { t } = useI18n()
+
+const loading = ref(true)
+const exportLoading = ref(false)
+const showAdvancedFilters = ref(false)
+const list = ref<AiCompanion[]>([])
+const total = ref(0)
+const checkedIds = ref<number[]>([])
+const currentRow = ref<Partial<AiCompanion>>({})
+const queryFormRef = ref()
+const formRef = ref()
+
+const queryParams = reactive<QueryParams>({
   pageNo: 1,
   pageSize: 10,
   avatarUrl: undefined,
@@ -187,135 +419,481 @@ const queryParams = reactive({
   sortOrder: undefined,
   popularityScore: undefined,
   createdAt: undefined,
-  createdAt: [],
   updatedAt: undefined,
-  updatedAt: [],
   prologue: undefined,
   prologueAudio: undefined,
   voiceId: undefined
 })
-const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
 
-/** 查询列表 */
+const onlineCount = computed(() => list.value.filter((item) => Number(item.status) === 1).length)
+const publicCount = computed(() => list.value.filter((item) => Number(item.visibility) === 1).length)
+
 const getList = async () => {
   loading.value = true
   try {
     const data = await AiCompanionApi.getAiCompanionPage(queryParams)
-    list.value = data.list
-    total.value = data.total
+    list.value = data.list || []
+    total.value = data.total || 0
+    syncCurrentRow()
   } finally {
     loading.value = false
   }
 }
 
-/** 搜索按钮操作 */
+const syncCurrentRow = () => {
+  if (!list.value.length) {
+    currentRow.value = {}
+    return
+  }
+  const matchedRow = list.value.find((item) => item.id === currentRow.value.id)
+  currentRow.value = matchedRow || list.value[0]
+}
+
 const handleQuery = () => {
   queryParams.pageNo = 1
   getList()
 }
 
-/** 重置按钮操作 */
 const resetQuery = () => {
-  queryFormRef.value.resetFields()
+  queryFormRef.value?.resetFields()
+  checkedIds.value = []
   handleQuery()
 }
 
-/** 添加/修改操作 */
-const formRef = ref()
 const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
+  formRef.value?.open(type, id)
 }
 
-/** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {
-    // 删除的二次确认
     await message.delConfirm()
-    // 发起删除
     await AiCompanionApi.deleteAiCompanion(id)
     message.success(t('common.delSuccess'))
-    currentRow.value = {}
-    // 刷新列表
+    checkedIds.value = checkedIds.value.filter((item) => item !== id)
+    if (currentRow.value.id === id) {
+      currentRow.value = {}
+    }
     await getList()
   } catch { }
 }
 
-/** 批量删除AI陪聊角色表，用于定义恋爱/陪伴型虚拟角色的基础信息与人设 */
 const handleDeleteBatch = async () => {
   try {
-    // 删除的二次确认
     await message.delConfirm()
-    await AiCompanionApi.deleteAiCompanionList(checkedIds.value);
-    checkedIds.value = [];
+    await AiCompanionApi.deleteAiCompanionList(checkedIds.value)
+    checkedIds.value = []
     message.success(t('common.delSuccess'))
-    await getList();
+    await getList()
   } catch { }
 }
 
-const checkedIds = ref<number[]>([])
 const handleRowCheckboxChange = (records: AiCompanion[]) => {
-  checkedIds.value = records.map((item) => item.id!);
+  checkedIds.value = records.map((item) => item.id)
 }
 
-/** 导出按钮操作 */
 const handleExport = async () => {
   try {
-    // 导出的二次确认
     await message.exportConfirm()
-    // 发起导出
     exportLoading.value = true
     const data = await AiCompanionApi.exportAiCompanion(queryParams)
-    download.excel(data, 'AI陪聊角色表，用于定义恋爱/陪伴型虚拟角色的基础信息与人设.xls')
+    download.excel(data, 'AI陪聊角色.xls')
   } catch {
   } finally {
     exportLoading.value = false
   }
 }
 
-/** 选中行操作 */
-const currentRow = ref({}) // 选中行
-const handleCurrentChange = (row) => {
-  currentRow.value = row
+const handleCurrentChange = (row?: AiCompanion) => {
+  currentRow.value = row || {}
+}
+
+const getStatusMeta = (status?: number) => {
+  if (Number(status) === 1) {
+    return { label: '在线', type: 'success' as const }
+  }
+  return { label: '离线', type: 'info' as const }
+}
+
+const getVisibilityMeta = (visibility?: number) => {
+  if (Number(visibility) === 1) {
+    return { label: '公开', type: 'success' as const }
+  }
+  if (Number(visibility) === 2) {
+    return { label: '内测', type: 'warning' as const }
+  }
+  return { label: '隐藏', type: 'info' as const }
+}
+
+const formatGender = (gender?: string) => {
+  if (!gender) return '未设置性别'
+  const normalized = gender.toLowerCase()
+  if (normalized === 'male') return 'Male'
+  if (normalized === 'female') return 'Female'
+  if (normalized === 'other') return 'Other'
+  return gender
+}
+
+const getTagList = (tags?: AiCompanion['personalityTags']) => {
+  if (!tags) return []
+  if (Array.isArray(tags)) {
+    return tags.map((item) => String(item)).filter(Boolean)
+  }
+  if (typeof tags === 'string') {
+    return tags
+      .split(/[，,、]/)
+      .map((item) => item.trim())
+      .filter(Boolean)
+  }
+  return []
+}
+
+const buildPreviewList = (row: AiCompanion) => {
+  return [row.coverImageUrl, row.avatarUrl].filter(Boolean) as string[]
 }
 
-/** 初始化 **/
 onMounted(() => {
   getList()
 })
 </script>
 
 <style scoped>
-.avatar-image {
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  cursor: pointer;
+.page-hero {
+  overflow: hidden;
 }
 
-.cover-image {
-  width: 100px;
-  height: 60px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-/* 表格行悬停效果 */
-:deep(.el-table__row:hover) {
-  background-color: #f5f7fa !important;
-}
-
-/* 图片加载和错误处理 */
-:deep(.el-image__error) {
+.hero-panel {
   display: flex;
+  gap: 24px;
+  justify-content: space-between;
+  padding: 4px;
+  color: #163247;
+}
+
+.hero-eyebrow {
+  margin-bottom: 10px;
+  color: #5b7a90;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.hero-title {
+  margin-bottom: 10px;
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.hero-subtitle {
+  max-width: 640px;
+  color: #5f7386;
+  line-height: 1.7;
+}
+
+.hero-metrics {
+  display: grid;
+  flex-shrink: 0;
+  grid-template-columns: repeat(2, minmax(120px, 1fr));
+  gap: 12px;
+}
+
+.metric-card {
+  min-width: 120px;
+  padding: 16px;
+  background: linear-gradient(180deg, rgb(255 255 255 / 90%), rgb(243 248 252 / 92%));
+  border: 1px solid rgb(118 153 177 / 18%);
+  border-radius: 18px;
+  box-shadow: 0 12px 30px rgb(109 141 160 / 10%);
+}
+
+.metric-card.accent {
+  background: linear-gradient(135deg, #1c7ed6, #34a0a4);
+  color: #fff;
+}
+
+.metric-label {
+  margin-bottom: 10px;
+  font-size: 12px;
+  opacity: 0.75;
+}
+
+.metric-value {
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.toolbar-header {
+  display: flex;
+  gap: 12px;
   align-items: center;
-  justify-content: center;
-  background-color: #f0f0f0;
-  color: #999;
+  justify-content: space-between;
+  margin-bottom: 18px;
+}
+
+.section-title {
+  color: var(--el-text-color-primary);
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.section-desc {
+  margin-top: 4px;
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+}
+
+.filter-form :deep(.el-form-item) {
+  margin-bottom: 18px;
+}
+
+.filter-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 0 16px;
+}
+
+.advanced-panel {
+  padding-top: 8px;
+  margin-top: 4px;
+  border-top: 1px dashed var(--el-border-color-lighter);
+}
+
+.toolbar-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  justify-content: space-between;
+  padding-top: 4px;
+}
+
+.action-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.selection-indicator {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  padding: 8px 14px;
+  color: var(--el-text-color-secondary);
+  background: var(--el-fill-color-light);
+  border-radius: 999px;
+  transition: all var(--el-transition-duration);
+}
+
+.selection-indicator.active {
+  color: #155e75;
+  background: #e0f2fe;
+}
+
+.companion-cell {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+}
+
+.companion-main {
+  min-width: 0;
+  flex: 1;
+}
+
+.companion-head {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.companion-id {
+  color: var(--el-text-color-primary);
+  font-weight: 700;
+}
+
+.companion-meta {
+  display: flex;
+  gap: 8px;
+  margin-top: 3px;
+  color: var(--el-text-color-secondary);
   font-size: 12px;
 }
 
-:deep(.el-image__placeholder) {
-  background-color: #f0f0f0;
+.avatar-fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  color: #155e75;
+  font-size: 13px;
+  font-weight: 700;
+  background: linear-gradient(135deg, #d7f3ff, #eefaf5);
+  border-radius: 50%;
 }
-</style>
\ No newline at end of file
+
+.avatar-fallback--large {
+  width: 56px;
+  height: 56px;
+}
+
+.cover-image {
+  flex-shrink: 0;
+  width: 88px;
+  height: 56px;
+  overflow: hidden;
+  border-radius: 14px;
+}
+
+.cover-image--empty {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+  background: var(--el-fill-color-light);
+}
+
+.tag-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.muted-text {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+
+.stack-text {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.stack-title {
+  color: var(--el-text-color-primary);
+  font-weight: 600;
+}
+
+.stack-desc {
+  color: var(--el-text-color-secondary);
+  line-height: 1.6;
+}
+
+.status-stack,
+.score-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+}
+
+.score-highlight {
+  color: #0f766e;
+  font-weight: 600;
+}
+
+.mono-text {
+  font-family: Consolas, Monaco, 'Courier New', monospace;
+}
+
+.detail-banner {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  padding: 18px 20px;
+  margin-bottom: 16px;
+  background: linear-gradient(135deg, #f7fbff, #f7fcfa);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 18px;
+}
+
+.detail-banner__content {
+  min-width: 0;
+  flex: 1;
+}
+
+.detail-banner__title {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 8px;
+  color: var(--el-text-color-primary);
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.detail-banner__subtitle {
+  color: var(--el-text-color-secondary);
+  line-height: 1.6;
+}
+
+.detail-card {
+  height: 100%;
+  margin-bottom: 16px;
+}
+
+.detail-card__title {
+  color: var(--el-text-color-primary);
+  font-weight: 700;
+}
+
+.detail-audio {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.i18n-panel {
+  margin-top: 8px;
+}
+
+:deep(.el-table .cell) {
+  line-height: 1.5;
+}
+
+:deep(.el-table__row.current-row > td.el-table__cell) {
+  background: #f0f9ff !important;
+}
+
+:deep(.el-image__error),
+:deep(.el-image__placeholder) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--el-text-color-secondary);
+  background: var(--el-fill-color-light);
+}
+
+@media (max-width: 992px) {
+
+  .hero-panel,
+  .toolbar-header,
+  .toolbar-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .hero-metrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .hero-title {
+    font-size: 24px;
+  }
+
+  .hero-metrics {
+    grid-template-columns: 1fr;
+  }
+
+  .companion-cell,
+  .detail-banner {
+    align-items: flex-start;
+  }
+}
+</style>