From 3dc74473cc57a5e56b02c7f65baf4e2ad8fad40d Mon Sep 17 00:00:00 2001
From: ayang <473033518@qq.com>
Date: Mon, 13 Mar 2023 18:08:11 +0800
Subject: [PATCH] perf: optimized the style of the role list

---
 src/components/Input/components/RoleList.vue | 83 +++++++++++---------
 1 file changed, 47 insertions(+), 36 deletions(-)

diff --git a/src/components/Input/components/RoleList.vue b/src/components/Input/components/RoleList.vue
index da8ccca..7db642f 100644
--- a/src/components/Input/components/RoleList.vue
+++ b/src/components/Input/components/RoleList.vue
@@ -15,16 +15,20 @@ const editItem = ref<TablePayload>({})
 
 const handleEdit = (data: TablePayload) => {
   // 修改完后没有确认修改而是直接修改另外一个
-  if (editItem.value.id) handleUpdate()
+  handleUpdate()
 
   isEdit.value = true
   editItem.value = data
 }
 
 const handleUpdate = () => {
+  if (!editItem.value.id) return
+
   isEdit.value = false
-  updateRole(editItem.value!)
+  updateRole(editItem.value)
 }
+
+watch(currentRole, handleUpdate)
 </script>
 <!-- TODO:优化代码和 css 样式 -->
 <template>
@@ -44,60 +48,62 @@ const handleUpdate = () => {
     <Avatar class="w-10! cursor-pointer" :value="currentRole?.name" />
     <!-- 弹框内容 -->
     <template #content>
-      <a-list>
-        <a-list-item
+      <ul class="role-list">
+        <li
+          class="bordered-bottom flex cursor-pointer items-center gap-4 p-4 text-[var(--color-text-1)]"
+          :style="{
+            background:
+              currentRole?.id === item.id
+                ? 'rgb(var(--blue-6), 0.2)'
+                : 'transparent'
+          }"
           v-for="item in roleList"
           :key="item.id"
           @click="currentRole = item"
         >
-          <a-list-item-meta>
-            <!-- 列表标题 -->
-            <template #title>
+          <div class="flex flex-1 items-center gap-4">
+            <Avatar class="w-10!" :value="item.name" />
+
+            <div class="flex flex-1 flex-col gap-2">
               <a-input
                 v-model="editItem.name"
                 v-if="isEdit && editItem.id === item.id"
+                @click="(e: any) => e.stopPropagation()"
               />
-              <template v-else>
+              <span v-else>
                 {{ item.name }}
-              </template>
-            </template>
-            <!-- 列表头像 -->
-            <template #avatar>
-              <Avatar class="w-10!" :value="item.name" />
-            </template>
-            <!-- 列表描述 -->
-            <template #description>
+              </span>
+
               <a-textarea
                 v-model="editItem.description"
                 v-if="isEdit && editItem.id === item.id"
+                @click="(e: any) => e.stopPropagation()"
               ></a-textarea>
-              <template v-else>
+              <span v-else>
                 {{ item.description }}
-              </template>
-            </template>
-          </a-list-item-meta>
+              </span>
+            </div>
+          </div>
 
-          <!-- 列表操作 默认角色不支持修改和删除 -->
-          <template
-            #actions
+          <div
+            class="text-4 flex gap-2"
             v-if="
               item.name !== defaultRoleName ||
               item.description !== defaultRoleDescription
             "
+            @click="(e) => e.stopPropagation()"
           >
-            <div class="text-4 flex gap-2" @click="(e) => e.stopPropagation()">
-              <IconCheck
-                @click="handleUpdate"
-                v-if="isEdit && editItem.id === item.id"
-              />
+            <IconCheck
+              @click="handleUpdate"
+              v-if="isEdit && editItem.id === item.id"
+            />
 
-              <IconEdit @click="handleEdit(item)" v-else />
+            <IconEdit @click="handleEdit(item)" v-else />
 
-              <IconDelete @click="deleteRole(item.id!)" />
-            </div>
-          </template>
-        </a-list-item>
-      </a-list>
+            <IconDelete @click="deleteRole(item.id!)" />
+          </div>
+        </li>
+      </ul>
     </template>
   </a-popover>
 </template>
@@ -105,15 +111,20 @@ const handleUpdate = () => {
 <style lang="scss">
 .role-popover {
   .arco-trigger-content {
-    @apply flex max-h-[calc(100vh-54px)] flex-col p-3;
+    @apply flex max-h-[calc(100vh-54px)] flex-col px-0 py-4;
 
     .arco-popover-title {
-      @apply p-b-3;
+      @apply p-b-4;
     }
 
     .arco-popover-content {
       @apply mt-0 flex-1 overflow-auto;
     }
   }
+  .role-list {
+    li:last-child {
+      border-bottom: 0;
+    }
+  }
 }
 </style>