fix ui

frontend/src/components/ShareDomain/RoleLabel.vue

@@ -1,11 +1,15 @@
 <template>
-  <q-badge v-if="isOwner" color="purple">所有者</q-badge>
-  <q-badge v-else-if="isManager" color="primary">管理者</q-badge>
+  <q-badge class="q-mr-xs" v-if="isOwner" color="secondary">所有者</q-badge>
+  <!-- <q-badge v-else-if="isManager" color="primary">管理者</q-badge> -->
+  <q-badge v-if="isSelf" color="purple">自分</q-badge>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 import { IDomainOwnerDisplay } from '../../types/DomainTypes';
+import { useAuthStore } from 'stores/useAuthStore';
+
+const authStore = useAuthStore();
 
 interface Props {
   user: { id: number };
@@ -14,6 +18,7 @@ interface Props {
 
 const props = defineProps<Props>();
 
+const isSelf = computed(() => props.user.id === (Number)(authStore.userId));
 const isOwner = computed(() => props.user.id === props.domain.owner.id);
 const isManager = computed(() => props.user.id === props.domain.owner.id); // TODO
 </script>

frontend/src/components/ShareDomain/ShareDomainDialog.vue

@@ -37,7 +37,7 @@
               <q-item-section>{{scope.opt.fullName}}</q-item-section>
               <q-item-section>{{scope.opt.email}}</q-item-section>
               <q-item-section side>
-                <div style="width: 4em;">
+                <div style="width: 6.5em;">
                   <role-label :domain="domain" :user="scope.opt"></role-label>
                 </div>
               </q-item-section>
@@ -47,7 +47,7 @@
 
         <sharing-user-list class="q-mt-md" style="height: 330px" :users="sharedUsers" :loading="loading" :title="userListTitle">
           <template v-slot:body-cell-role="{ row }">
-            <q-td>
+            <q-td auto-width>
               <role-label :domain="domain" :user="row"></role-label>
             </q-td>
           </template>
@@ -84,6 +84,7 @@ interface Props {
   domain: IDomainOwnerDisplay;
   dialogTitle: string;
   userListTitle: string;
+  hideSelf: boolean;
   shareApi: (user: IUserDisplay, domain: IDomainOwnerDisplay) => Promise<any>;
   removeSharedApi: (user: IUserDisplay, domain: IDomainOwnerDisplay) => Promise<any>;
   getSharedApi: (domain: IDomainOwnerDisplay) => Promise<any>;
@@ -204,20 +205,28 @@ const loadShared = async () => {
   loading.value = true;
   sharedUsersIdSet.clear();
 
+  if(props.hideSelf) {
+    sharedUsersIdSet.add((Number)(authStore.userId));
+  }
+
   const { data } = await props.getSharedApi(props.domain);
-  sharedUsers.value = data.data.map((item: IUser) => {
+
+  sharedUsers.value = data.data.reduce((arr: IUserDisplayWithShareRole[], item: IUser) => {
     const val = itemToDisplay(item);
+    if(!sharedUsersIdSet.has(val.id)) {
       sharedUsersIdSet.add(val.id);
       // for sort
-    if (isOwner(item.id)) {
+      if (isOwner(val.id)) {
         val.role = 2;
-    } else if (isManager(item.id)) {
+      } else if (isManager(val.id)) {
         val.role = 1;
       } else {
         val.role = 0;
       }
-    return val;
-  }).reverse().sort((a: IUserDisplayWithShareRole, b: IUserDisplayWithShareRole) => b.role - a.role);
+      arr.push(val);
+    }
+    return arr;
+  }, []).sort((a: IUserDisplayWithShareRole, b: IUserDisplayWithShareRole) => b.role - a.role);
 
   canSharedUsers.value = allUsers.value.filter((item) => !sharedUsersIdSet.has(item.id));
   canSharedUserFilteredOptions.value = canSharedUsers.value;

frontend/src/components/ShareDomain/ShareManageDialog.vue

@@ -7,6 +7,7 @@
     :remove-shared-api="removeSharedApi"
     :get-shared-api="getSharedApi"
     :model-value="modelValue"
+    hide-self
     @update:modelValue="updateModelValue"
     @close="close"
   />