diff --git a/src/views/keyboard/aicompanion/components/AiCompanionI18nForm.vue b/src/views/keyboard/aicompanion/components/AiCompanionI18nForm.vue
index c621fe8..6b93062 100644
--- a/src/views/keyboard/aicompanion/components/AiCompanionI18nForm.vue
+++ b/src/views/keyboard/aicompanion/components/AiCompanionI18nForm.vue
@@ -59,18 +59,20 @@ const formData = ref({
   updatedAt: undefined
 })
 const formRules = reactive({
+  companionId: [{ required: true, message: '主表ID不能为空', trigger: 'blur' }],
   locale: [{ required: true, message: '语言标识不能为空', trigger: 'blur' }],
   name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
 })
 const formRef = ref() // 表单 Ref
 
 /** 打开弹窗 */
-const open = async (type: string, id?: number) => {
+const open = async (type: string, id?: number, companionId?: number) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
   formData.value.id = id as any
+  formData.value.companionId = companionId as any
   // 修改时，设置数据
   if (id) {
     formLoading.value = true
@@ -138,4 +140,4 @@ const resetForm = () => {
 .el-input {
   width: 100%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/keyboard/aicompanion/components/AiCompanionI18nList.vue b/src/views/keyboard/aicompanion/components/AiCompanionI18nList.vue
index a7d1ec0..d61192d 100644
--- a/src/views/keyboard/aicompanion/components/AiCompanionI18nList.vue
+++ b/src/views/keyboard/aicompanion/components/AiCompanionI18nList.vue
@@ -1,42 +1,82 @@
 <template>
   <!-- 列表 -->
   <ContentWrap>
-    <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['keyboard:ai-companion:create']">
+    <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="danger" plain :disabled="isEmpty(checkedIds)" @click="handleDeleteBatch"
-      v-hasPermi="['keyboard:ai-companion:delete']">
-      <Icon icon="ep:delete" class="mr-5px" /> 批量删除
-    </el-button>
-    <el-table row-key="id" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"
-      @selection-change="handleRowCheckboxChange">
-      <el-table-column type="selection" width="55" />
-      <el-table-column label="主表ID" align="center" prop="companionId" width="120px" />
+      <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-table
+        row-key="id"
+        v-loading="loading"
+        :data="list"
+        :stripe="true"
+        :show-overflow-tooltip="true"
+        @selection-change="handleRowCheckboxChange"
+    >
+          <el-table-column type="selection" width="55" />
+       <el-table-column label="主表ID" align="center" prop="companionId" width="120px" />
       <el-table-column label="语言标识" align="center" prop="locale" width="120px" />
       <el-table-column label="角色名称" align="center" prop="name" width="180px" />
       <el-table-column label="一句话描述" align="center" prop="shortDesc" width="200px" />
       <el-table-column label="详细介绍" align="center" prop="introText" min-width="300px" />
-      <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="createdAt"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column
+        label="更新时间"
+        align="center"
+        prop="updatedAt"
+        :formatter="dateFormatter"
+        width="180px"
+      />
       <el-table-column label="操作" align="center">
         <template #default="scope">
-          <el-button link type="primary" @click="openForm('update', scope.row.id)"
-            v-hasPermi="['keyboard:ai-companion:update']">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.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(scope.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" />
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
   </ContentWrap>
-  <!-- 表单弹窗：添加/修改 -->
-  <AiCompanionI18nForm ref="formRef" @success="getList" />
+    <!-- 表单弹窗：添加/修改 -->
+    <AiCompanionI18nForm ref="formRef" @success="getList" />
 </template>
 <script setup lang="ts">
 import { dateFormatter } from '@/utils/formatTime'
@@ -69,7 +109,7 @@ watch(
     queryParams.id = val
     handleQuery()
   },
-  { immediate: true, deep: true }
+    { immediate: true, deep: true }
 )
 
 /** 查询列表 */
@@ -110,7 +150,7 @@ const handleDelete = async (id: number) => {
     message.success(t('common.delSuccess'))
     // 刷新列表
     await getList()
-  } catch { }
+  } catch {}
 }
 
 /** 批量删除AI陪聊角色国际化表，用于存储不同语言下的角色名称、一句话描述和详细介绍 */
@@ -122,29 +162,11 @@ const handleDeleteBatch = async () => {
     checkedIds.value = [];
     message.success(t('common.delSuccess'))
     await getList();
-  } catch { }
+  } catch {}
 }
 
 const checkedIds = ref<number[]>([])
 const handleRowCheckboxChange = (records: AiCompanionI18n[]) => {
   checkedIds.value = records.map((item) => item.id!);
 }
-</script>
-
-<style scoped>
-/* 按钮间距 */
-.el-button {
-  margin-right: 8px;
-  margin-bottom: 8px;
-}
-
-/* 表格样式优化 */
-.el-table {
-  margin-top: 16px;
-}
-
-/* 操作按钮间距 */
-.el-table-column__content .el-button {
-  margin-right: 4px;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/views/keyboard/aicompanion/index.vue b/src/views/keyboard/aicompanion/index.vue
index bf5c90e..4342a81 100644
--- a/src/views/keyboard/aicompanion/index.vue
+++ b/src/views/keyboard/aicompanion/index.vue
@@ -1,410 +1,191 @@
-<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> -->
-
+<template>
   <ContentWrap>
-    <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 class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+      <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="请输入开场白音频URL" 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>
     </el-form>
   </ContentWrap>
 
+  <!-- 列表 -->
   <ContentWrap>
-    <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>
+    <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="80px" />
+      <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"
+            :preview-src-list="[scope.row.avatarUrl]" />
+          <span v-else>无</span>
         </template>
       </el-table-column>
-      <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>
+      <el-table-column label="角色封面图" align="center" prop="coverImageUrl" width="120px">
+        <template #default="scope">
+          <el-image v-if="scope.row.coverImageUrl" :src="scope.row.coverImageUrl" fit="cover" class="cover-image" />
+          <span v-else>无</span>
         </template>
       </el-table-column>
-      <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>
+      <el-table-column label="性别" align="center" prop="gender" width="100px" />
+      <el-table-column label="年龄段" align="center" prop="ageRange" width="100px" />
+      <el-table-column label="性格标签" align="center" prop="personalityTags" width="150px" />
+      <el-table-column label="说话风格" align="center" prop="speakingStyle" width="120px" />
+      <el-table-column label="系统Prompt" align="center" prop="systemPrompt" min-width="200px" />
+      <el-table-column label="状态" align="center" prop="status" width="80px">
+        <template #default="scope">
+          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
+            {{ scope.row.status === 1 ? '上线' : '下线' }}
+          </el-tag>
         </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>
+      <el-table-column label="可见性" align="center" prop="visibility" width="100px">
+        <template #default="scope">
+          <el-tag :type="scope.row.visibility === 1 ? 'success' : scope.row.visibility === 2 ? 'warning' : 'info'">
+            {{ scope.row.visibility === 1 ? '公开' : scope.row.visibility === 2 ? '内测' : '隐藏' }}
+          </el-tag>
         </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)"
+      <el-table-column label="排序权重" align="center" prop="sortOrder" width="100px" />
+      <el-table-column label="热度评分" align="center" prop="popularityScore" width="100px" />
+      <!-- <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" min-width="150px" />
+      <el-table-column label="开场白音频" align="center" prop="prologueAudio" min-width="150px" />
+      <el-table-column label="音频Id" align="center" prop="voiceId" width="120px" />
+      <el-table-column label="操作" align="center" min-width="120px">
+        <template #default="scope">
+          <el-button link type="primary" @click="openForm('update', scope.row.id)"
             v-hasPermi="['keyboard:ai-companion:update']">
             编辑
           </el-button>
-          <el-button link type="danger" @click="handleDelete(row.id)" v-hasPermi="['keyboard:ai-companion:delete']">
+          <el-button link type="danger" @click="handleDelete(scope.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>
 
-  <ContentWrap>
-    <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" />
+  <!-- 子表的列表 -->
+  <ContentWrap>
+    <el-tabs model-value="aiCompanionI18n">
+      <el-tab-pane label="AI陪聊角色国际化表，用于存储不同语言下的角色名称、一句话描述和详细介绍" name="aiCompanionI18n">
+        <AiCompanionI18nList :id="currentRow.id" />
+      </el-tab-pane>
+    </el-tabs>
+  </ContentWrap>
 </template>
 
 <script setup lang="ts">
+import { isEmpty } from '@/utils/is'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
-import { isEmpty } from '@/utils/is'
-import { AiCompanionApi, type AiCompanion } from '@/api/keyboard/aicompanion'
+import { AiCompanionApi, AiCompanion } from '@/api/keyboard/aicompanion'
 import AiCompanionForm from './AiCompanionForm.vue'
 import AiCompanionI18nList from './components/AiCompanionI18nList.vue'
 
+/** AI陪聊角色表，用于定义恋爱/陪伴型虚拟角色的基础信息与人设 列表 */
 defineOptions({ name: 'KeyboardAiCompanion' })
 
-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 message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
 
-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>({
+const loading = ref(true) // 列表的加载中
+const list = ref<AiCompanion[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   avatarUrl: undefined,
@@ -419,481 +200,133 @@ const queryParams = reactive<QueryParams>({
   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 || 0
-    syncCurrentRow()
+    list.value = data.list
+    total.value = data.total
   } 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()
-  checkedIds.value = []
+  queryFormRef.value.resetFields()
   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'))
-    checkedIds.value = checkedIds.value.filter((item) => item !== id)
-    if (currentRow.value.id === id) {
-      currentRow.value = {}
-    }
+    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 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[]
+/** 选中行操作 */
+const currentRow = ref({}) // 选中行
+const handleCurrentChange = (row) => {
+  currentRow.value = row
 }
 
+/** 初始化 **/
 onMounted(() => {
   getList()
 })
 </script>
 
 <style scoped>
-.page-hero {
-  overflow: hidden;
-}
-
-.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: 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;
-}
-
-.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);
+/* 头像和封面图样式 */
+.avatar-image {
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
-}
-
-.avatar-fallback--large {
-  width: 56px;
-  height: 56px;
+  cursor: pointer;
 }
 
 .cover-image {
-  flex-shrink: 0;
-  width: 88px;
-  height: 56px;
-  overflow: hidden;
-  border-radius: 14px;
+  width: 80px;
+  height: 48px;
+  border-radius: 4px;
+  cursor: pointer;
 }
 
-.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;
+/* 按钮间距 */
+.el-button {
+  margin-right: 8px;
   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;
+/* 表格样式优化 */
+.el-table {
+  margin-top: 16px;
 }
 
-.detail-card {
-  height: 100%;
-  margin-bottom: 16px;
+/* 操作按钮间距 */
+.el-table-column__content .el-button {
+  margin-right: 4px;
 }
-
-.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>
+</style>
\ No newline at end of file
diff --git a/src/views/keyboard/productitems/ProductItemsForm.vue b/src/views/keyboard/productitems/ProductItemsForm.vue
index 9e5dea4..247c17e 100644
--- a/src/views/keyboard/productitems/ProductItemsForm.vue
+++ b/src/views/keyboard/productitems/ProductItemsForm.vue
@@ -33,6 +33,9 @@
       <el-form-item label="产品描述" prop="description">
         <el-input v-model="formData.description" placeholder="请输入产品描述" />
       </el-form-item>
+      <el-form-item label="平台" prop="platform">
+        <el-input v-model="formData.platform" placeholder="请输入平台" />
+      </el-form-item>
       <el-form-item label="创建时间" prop="createdAt">
         <el-date-picker v-model="formData.createdAt" type="date" value-format="x" placeholder="选择创建时间" />
       </el-form-item>
@@ -74,6 +77,7 @@ const formData = ref({
   price: undefined,
   currency: undefined,
   description: undefined,
+  platform: undefined,
   createdAt: undefined,
   updatedAt: undefined,
   durationDays: undefined
@@ -147,6 +151,7 @@ const resetForm = () => {
     price: undefined,
     currency: undefined,
     description: undefined,
+    platform: undefined,
     createdAt: undefined,
     updatedAt: undefined,
     durationDays: undefined
diff --git a/src/views/keyboard/productitems/index.vue b/src/views/keyboard/productitems/index.vue
index 55dc6d3..418fae3 100644
--- a/src/views/keyboard/productitems/index.vue
+++ b/src/views/keyboard/productitems/index.vue
@@ -98,6 +98,7 @@
       <el-table-column label="时长单位" align="center" prop="durationUnit" width="100px" />
       <el-table-column label="价格" align="center" prop="price" width="110px" />
       <el-table-column label="货币" align="center" prop="currency" width="90px" />
+      <el-table-column label="平台" align="center" prop="platform" width="90px" />
       <el-table-column label="描述" align="center" prop="description" min-width="180px" />
       <el-table-column label="创建时间" align="center" prop="createdAt" :formatter="dateFormatter" width="180px" />
       <el-table-column label="更新时间" align="center" prop="updatedAt" :formatter="dateFormatter" width="180px" />