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

apps/web-antd/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-antd/src/views/ai/chat/index/modules/role/list.vue

@@ -58,68 +58,68 @@ 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">
       <Card
         class="relative rounded-lg"
         :body-style="{
           position: 'relative',
           display: 'flex',
-          flexDirection: 'row',
+          flexDirection: 'column',
           justifyContent: 'flex-start',
           width: '240px',
           maxWidth: '240px',
-          padding: '15px 15px 10px',
+          padding: '15px',
         }"
       >
-        <!-- 更多操作 -->
+        <!-- 头部：头像、名称 -->
-        <div v-if="showMore" class="absolute right-2 top-0">
+        <div class="flex items-center justify-between">
-          <Dropdown>
+          <div class="flex min-w-0 flex-1 items-center">
-            <Button type="link">
+            <Avatar
-              <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">
+          <Dropdown v-if="showMore">
+            <Button size="small">
+              <IconifyIcon icon="lucide:ellipsis" />
             </Button>
             <template #overlay>
               <Menu>
-                <Menu.Item @click="handleMoreClick(['edit', role])">
-                  <div class="flex items-center">
-                    <IconifyIcon icon="lucide:edit" color="#787878" />
-                    <span class="text-primary">编辑</span>
-                  </div>
-                </Menu.Item>
                 <Menu.Item @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>
+                </Menu.Item>
+                <Menu.Item @click="handleMoreClick(['edit', role])">
+                  <div class="flex items-center">
+                    <IconifyIcon icon="lucide:edit" color="#787878" />
+                    <span class="text-primary ml-2">编辑</span>
                   </div>
                 </Menu.Item>
               </Menu>
             </template>
           </Dropdown>
-        </div>
-
-        <!-- 角色信息 -->
-        <div>
-          <Avatar :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">
           <Button type="primary" size="small" @click="handleUseClick(role)">
             使用
           </Button>
         </div>
-        </div>
       </Card>
     </div>
   </div>

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

@@ -112,6 +112,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();
@@ -219,7 +220,6 @@ onMounted(async () => {
               @on-edit="handlerCardEdit"
               @on-use="handlerCardUse"
               @on-page="handlerCardPage('my')"
-              class="mt-5"
             />
           </Tabs.TabPane>