website:fix users page ui

SpenserCai · Oct 11, 2023 · ddae6e0 · ddae6e0
1 parent baaaab9
commit ddae6e0
Showing 1 changed file with 26 additions and 5 deletions.
diff --git a/website/src/views/UsersView.vue b/website/src/views/UsersView.vue
@@ -3,17 +3,17 @@
  * @Date: 2023-10-11 21:36:11
  * @version: 
  * @LastEditors: SpenserCai
- * @LastEditTime: 2023-10-12 00:20:57
+ * @LastEditTime: 2023-10-12 01:07:00
  * @Description: file content
 -->
 <script setup>
 import SectionMain from '@/components/SectionMain.vue'
 import LayoutAuthenticated from '@/layouts/LayoutAuthenticated.vue'
 import SectionTitleLine from '@/components/SectionTitleLine.vue'
 
-import { mdiAccountMultiple } from '@mdi/js';
+import { mdiAccount, mdiAccountMultiple } from '@mdi/js';
 import { onMounted,ref } from 'vue'
-import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell,Avatar,Pagination,Toggle } from 'flowbite-vue'
+import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell,Avatar,Pagination,Toggle,Badge } from 'flowbite-vue'
 import { userlist } from '@/api/system'
 
 const total = ref(0)
@@ -31,6 +31,16 @@ const getTotalPage = (total) => {
   }
 }
 
+const getRoleBadgeColor = (role) => {
+  if (role == 'admin') {
+    return 'yellow'
+  } else if (role == 'user') {
+    return 'green'
+  } else {
+    return 'blue'
+  }
+}
+
 const onPageChanged = (page) => {
   getUserList(page)
 }
@@ -75,13 +85,24 @@ onMounted(() => {
               <table-cell>
                 <div class="-ml-2 flex items-center justify-between max-md:w-full md:justify-start">
                   <Avatar size="xs" status="online" rounded :img="item.avatar"></Avatar>
-                  <p :title="item.name" class="ml-2 text-sm font-medium active:text-blue-100 group-hover:underline underline-offset-2 active:underline-offset-4 break-all line-clamp-1 md:text-sm">{{ item.username }}</p>
+                  <p :title="item.name" class="ml-2 text-sm font-medium active:text-blue-100 break-all md:text-sm">{{ item.username }}</p>
                 </div>
               </table-cell>
               <table-cell>
                 <Toggle v-model="item.enable" :disabled="true" />
               </table-cell>
-              <table-cell>{{ item.roles }}</table-cell>
+              <table-cell>
+                <div class="flex uppercase">
+                  <Badge v-for="(role,idx) in item.roles.split(',')" :key="idx" :type="getRoleBadgeColor(role)">
+                    <template #icon>
+                        <svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                          <path fill-rule="evenodd" :d="mdiAccount" clip-rule="evenodd"></path>
+                        </svg>
+                    </template>
+                    {{ role }}
+                  </Badge>
+                </div>
+              </table-cell>
               <table-cell>{{ item.created }}</table-cell>
             </table-row>
           </table-body>