Initial commit

src/views/cms/dashboard/components/user-list.vue

@@ -0,0 +1,84 @@
+<!-- 小组成员 -->
+<template>
+  <a-card :title="title" :bordered="false" :body-style="{ padding: '2px 0px' }">
+    <template #extra>
+      <more-icon @remove="onRemove" @edit="onEdit" />
+    </template>
+    <div
+      v-for="(item, index) in userList"
+      :key="index"
+      class="ele-cell user-list-item"
+    >
+      <div style="flex-shrink: 0">
+        <a-avatar :size="46" :src="item.avatar" />
+      </div>
+      <div class="ele-cell-content">
+        <span class="ele-cell-title ele-elip">{{ item.nickname }}</span>
+        <div class="ele-cell-desc ele-elip">{{ item.phone }}</div>
+      </div>
+      <div style="flex-shrink: 0">
+        <a-tag :color="['green', 'red'][item.status]">
+          {{ ['在线', '离线'][item.status] }}
+        </a-tag>
+      </div>
+    </div>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import MoreIcon from './more-icon.vue';
+  import { pageUsers } from '@/api/system/user';
+  import type { User } from '@/api/system/user/model';
+
+  defineProps<{
+    title?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'remove'): void;
+    (e: 'edit'): void;
+  }>();
+
+  // 小组成员数据
+  const userList = ref<User[]>([]);
+
+  /* 查询小组成员 */
+  const queryUserList = () => {
+    pageUsers({ parentId: 11, limit: 5 }).then((data: any) => {
+      userList.value = data.list;
+    });
+  };
+
+  const onRemove = () => {
+    emit('remove');
+  };
+
+  const onEdit = () => {
+    emit('edit');
+  };
+
+  queryUserList();
+</script>
+
+<style lang="less" scoped>
+  .user-list-item {
+    padding: 12px 18px;
+
+    & + .user-list-item {
+      border-top: 1px solid hsla(0, 0%, 60%, 0.15);
+    }
+
+    .ele-cell-content {
+      overflow: hidden;
+    }
+
+    .ele-cell-desc {
+      margin-top: 0;
+    }
+
+    .ant-tag {
+      margin: 0;
+    }
+  }
+</style>