feat：【ele】【ai】chat/index：角色面板的优化

apps/web-antd/src/views/ai/chat/index/modules/role/repository.vue

@@ -200,7 +200,6 @@ onMounted(async () => {
             添加角色
           </Button>
         </div>
-
         <!-- 标签页内容 -->
         <Tabs
           v-model:value="activeTab"
@@ -222,7 +221,6 @@ onMounted(async () => {
               @on-page="handlerCardPage('my')"
             />
           </Tabs.TabPane>
-
           <Tabs.TabPane
             key="public-role"
             class="flex h-full flex-col overflow-y-auto"

apps/web-ele/src/views/ai/chat/index/modules/role/category-list.vue

@@ -24,7 +24,7 @@ async function handleCategoryClick(category: string) {
 </script>
 
 <template>
-  <div class="flex flex-wrap items-center">
+  <div class="mx-0 flex flex-wrap items-center">
     <div
       class="mr-2 flex flex-row"
       v-for="category in categoryList"

apps/web-ele/src/views/ai/chat/index/modules/role/list.vue

@@ -63,59 +63,59 @@ async function handleTabsScroll() {
 
 <template>
   <div
-    class="relative flex h-full flex-wrap content-start items-start overflow-auto px-6 pb-36"
+    class="relative flex h-full flex-wrap content-start items-start overflow-auto pb-36"
     ref="tabsRef"
     @scroll="handleTabsScroll"
   >
-    <div class="mb-5 mr-5 inline-block" v-for="role in roleList" :key="role.id">
+    <div class="mb-3 mr-3 inline-block" v-for="role in roleList" :key="role.id">
       <ElCard
         class="relative rounded-lg"
-        body-style="position: relative; display: flex; flex-direction: row; justify-content: flex-start; width: 240px; max-width: 240px; padding: 15px 15px 10px;"
+        body-style="position: relative; display: flex; flex-direction: column; justify-content: flex-start; width: 240px; max-width: 240px; padding: 15px;"
       >
-        <!-- 更多操作 -->
+        <!-- 头部：头像、名称 -->
-        <div v-if="showMore" class="absolute right-2 top-0">
+        <div class="flex items-center justify-between">
-          <ElDropdown>
+          <div class="flex min-w-0 flex-1 items-center">
-            <ElButton link>
+            <ElAvatar
-              <IconifyIcon icon="lucide:ellipsis-vertical" />
+              :src="role.avatar"
+              class="h-8 w-8 flex-shrink-0 overflow-hidden"
+            />
+            <div class="ml-2 truncate text-base font-medium">
+              {{ role.name }}
+            </div>
+          </div>
+        </div>
+        <!-- 描述信息 -->
+        <div
+          class="mt-2 line-clamp-2 h-10 overflow-hidden text-sm text-gray-600"
+        >
+          {{ role.description }}
+        </div>
+        <!-- 底部操作按钮 -->
+        <div class="flex items-center justify-end gap-2">
+          <ElDropdown v-if="showMore">
+            <ElButton size="small">
+              <IconifyIcon icon="lucide:ellipsis" />
             </ElButton>
             <template #dropdown>
               <ElDropdownMenu>
-                <ElDropdownItem @click="handleMoreClick('edit', role)">
-                  <div class="flex items-center">
-                    <IconifyIcon icon="lucide:edit" color="#787878" />
-                    <span class="text-primary">编辑</span>
-                  </div>
-                </ElDropdownItem>
                 <ElDropdownItem @click="handleMoreClick('delete', role)">
                   <div class="flex items-center">
                     <IconifyIcon icon="lucide:trash" color="red" />
-                    <span class="text-red-500">删除</span>
+                    <span class="ml-2 text-red-500">删除</span>
+                  </div>
+                </ElDropdownItem>
+                <ElDropdownItem @click="handleMoreClick('edit', role)">
+                  <div class="flex items-center">
+                    <IconifyIcon icon="lucide:edit" color="#787878" />
+                    <span class="text-primary ml-2">编辑</span>
                   </div>
                 </ElDropdownItem>
               </ElDropdownMenu>
             </template>
           </ElDropdown>
-        </div>
+          <ElButton type="primary" size="small" @click="handleUseClick(role)">
-
+            使用
-        <!-- 角色信息 -->
+          </ElButton>
-        <div>
-          <ElAvatar :src="role.avatar" class="h-10 w-10 overflow-hidden" />
-        </div>
-
-        <div class="ml-2 w-4/5">
-          <div class="h-20">
-            <div class="max-w-32 text-lg font-bold">
-              {{ role.name }}
-            </div>
-            <div class="mt-2 text-sm">
-              {{ role.description }}
-            </div>
-          </div>
-          <div class="mt-1 flex flex-row-reverse">
-            <ElButton type="primary" size="small" @click="handleUseClick(role)">
-              使用
-            </ElButton>
-          </div>
         </div>
       </ElCard>
     </div>

apps/web-ele/src/views/ai/chat/index/modules/role/repository.vue

@@ -119,6 +119,7 @@ async function handlerCategoryClick(category: string) {
 async function handlerAddRole() {
   formModalApi.setData({ formType: 'my-create' }).open();
 }
+
 /** 编辑角色 */
 async function handlerCardEdit(role: any) {
   formModalApi.setData({ formType: 'my-update', id: role.id }).open();
@@ -187,7 +188,7 @@ onMounted(async () => {
       <FormModal @success="handlerAddRoleSuccess" />
 
       <ElMain class="relative m-0 flex-1 overflow-hidden p-0">
-        <div class="z-100 absolute right-0 top--1 mr-5 mt-5">
+        <div class="z-100 absolute right-5 top-5 flex items-center">
           <!-- 搜索输入框 -->
           <ElInput
             v-model="search"
@@ -196,7 +197,11 @@ onMounted(async () => {
             @keyup.enter="getActiveTabsRole"
           >
             <template #suffix>
-              <IconifyIcon icon="lucide:search" />
+              <IconifyIcon
+                icon="lucide:search"
+                class="cursor-pointer"
+                @click="getActiveTabsRole"
+              />
             </template>
           </ElInput>
           <ElButton
@@ -209,11 +214,10 @@ onMounted(async () => {
             添加角色
           </ElButton>
         </div>
-
         <!-- 标签页内容 -->
         <ElTabs
           v-model="activeTab"
-          class="relative h-full p-4"
+          class="relative h-full pb-4 pr-4"
           @tab-click="handleTabsClick"
         >
           <ElTabPane
@@ -229,10 +233,8 @@ onMounted(async () => {
               @on-edit="handlerCardEdit"
               @on-use="handlerCardUse"
               @on-page="handlerCardPage('my')"
-              class="mt-5"
             />
           </ElTabPane>
-
           <ElTabPane
             name="public-role"
             class="flex h-full flex-col overflow-y-auto"