From 757fb3db9fbf7aeee9b04a7be4b87e7649928e2f Mon Sep 17 00:00:00 2001
From: Bunny <1319900154@qq.com>
Date: Sun, 13 Oct 2024 03:06:51 +0800
Subject: [PATCH] =?UTF-8?q?optimize:=20=E2=99=BB=EF=B8=8F=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E7=94=A8=E6=88=B7=E4=BF=A1=E6=81=AF=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Table/Userinfo/UserinfoDialog.vue         | 126 +++++++++++++-----
 src/components/Table/Userinfo/columns.tsx     |  20 ---
 src/views/system/adminUser/utils/columns.tsx  |   2 +-
 3 files changed, 94 insertions(+), 54 deletions(-)

diff --git a/src/components/Table/Userinfo/UserinfoDialog.vue b/src/components/Table/Userinfo/UserinfoDialog.vue
index 8aa634a..430d204 100644
--- a/src/components/Table/Userinfo/UserinfoDialog.vue
+++ b/src/components/Table/Userinfo/UserinfoDialog.vue
@@ -14,9 +14,12 @@ const loading = ref(false);
  * * 获取用户信息
  */
 const getUserInfo = async () => {
-	// 如果没有传入用户ID直接返回
-	if (!props.userId) return;
 	loading.value = true;
+	// 如果没有传入用户ID直接返回
+	if (!props.userId) {
+		loading.value = false;
+		return;
+	}
 
 	// 判断是否是web端
 	const result = await fetchGetUserinfoById({ id: props.userId });
@@ -33,42 +36,100 @@ onMounted(() => {
 </script>
 
 <template>
-	<div v-if="userId && userinfo" class="list-card-item bg-bg_color">
-		<el-row justify="space-between">
-			<div class="flex flex-row justify-center items-center">
-				<div class="list-card-item_detail--logo">
-					<userAvatarIcon />
+	<div>
+		<div v-if="userId && userinfo" class="list-card-item bg-bg_color">
+			<!-- 标题内容 -->
+			<el-row justify="space-between">
+				<div class="flex flex-row justify-center items-center">
+					<div class="list-card-item_detail--logo">
+						<userAvatarIcon />
+					</div>
+					<h1 class="list-card-item_detail--name">{{ $t('user_details') }}</h1>
 				</div>
-				<h1 class="list-card-item_detail--name">{{ $t('user_details') }}</h1>
-			</div>
-			<el-tag :color="userinfo.status ? '#F67676' : '#00a870'" class="mx-1 list-card-item_detail--operation--tag" effect="dark">
-				{{ $t('user_status') }}：{{ userinfo.status ? $t('disable') : $t('normal') }}
-			</el-tag>
-		</el-row>
+				<el-tag :color="userinfo.status ? '#F67676' : '#00a870'" class="mx-1 list-card-item_detail--operation--tag" effect="dark">
+					{{ $t('user_status') }}：{{ userinfo.status ? $t('disable') : $t('normal') }}
+				</el-tag>
+			</el-row>
 
-		<el-descriptions border>
-			<el-descriptions-item :label="$t('avatar')" :width="100" align="center">
-				<el-image :src="userinfo.avatar" style="width: 100px; height: 100px" />
-			</el-descriptions-item>
-			<el-descriptions-item :label="$t('username')" :width="100">{{ userinfo.username }}</el-descriptions-item>
-			<el-descriptions-item :label="$t('nickName')" :width="100">{{ userinfo.nickName }}</el-descriptions-item>
+			<!-- 用户详情 -->
+			<el-descriptions border>
+				<el-descriptions-item :label="$t('avatar')" :width="100" align="center">
+					<el-image :src="userinfo.avatar" style="width: 100px; height: 100px" />
+				</el-descriptions-item>
+				<el-descriptions-item :label="$t('username')" :width="100">{{ userinfo.username }}</el-descriptions-item>
+				<el-descriptions-item :label="$t('nickName')" :width="100">{{ userinfo.nickName }}</el-descriptions-item>
 
-			<el-descriptions-item :label="$t('email')"> {{ userinfo.email }}</el-descriptions-item>
-			<el-descriptions-item :label="$t('phone')">{{ userinfo.phone }}</el-descriptions-item>
-			<el-descriptions-item :label="$t('sex')">
-				<el-tag v-if="userinfo.sex === 1">男</el-tag>
-				<el-tag v-if="userinfo.sex === 0" type="danger">女</el-tag>
-			</el-descriptions-item>
+				<el-descriptions-item :label="$t('email')"> {{ userinfo.email }}</el-descriptions-item>
+				<el-descriptions-item :label="$t('phone')">{{ userinfo.phone }}</el-descriptions-item>
+				<el-descriptions-item :label="$t('sex')">
+					<el-tag v-if="userinfo.sex === 1">男</el-tag>
+					<el-tag v-if="userinfo.sex === 0" type="danger">女</el-tag>
+				</el-descriptions-item>
 
-			<el-descriptions-item :label="$t('personDescription')" span="3">
-				{{ userinfo.personDescription }}
-			</el-descriptions-item>
+				<el-descriptions-item :label="$t('personDescription')" span="3">
+					{{ userinfo.personDescription }}
+				</el-descriptions-item>
 
-			<el-descriptions-item :label="$t('table.createTime')" span="1.5">{{ userinfo.createTime }}</el-descriptions-item>
-			<el-descriptions-item :label="$t('table.updateTime')" span="1.5">{{ userinfo.updateTime }}</el-descriptions-item>
-		</el-descriptions>
+				<el-descriptions-item :label="$t('table.createTime')" span="1.5">{{ userinfo.createTime }} </el-descriptions-item>
+				<el-descriptions-item :label="$t('table.updateTime')" span="1.5">{{ userinfo.updateTime }} </el-descriptions-item>
+			</el-descriptions>
+		</div>
+
+		<!-- 加载内容 -->
+		<div v-if="loading" class="list-card-item bg-bg_color">
+			<!-- 标题内容 -->
+			<el-row justify="space-between">
+				<div class="flex flex-row justify-center items-center">
+					<div class="list-card-item_detail--logo">
+						<userAvatarIcon />
+					</div>
+					<h1 class="list-card-item_detail--name">{{ $t('user_details') }}</h1>
+				</div>
+				<el-tag class="mx-1 list-card-item_detail--operation--tag" color="#00a870" effect="dark"> loading...</el-tag>
+			</el-row>
+
+			<!-- 用户详情 -->
+			<el-descriptions border>
+				<el-descriptions-item :label="$t('avatar')" :width="100" align="center">
+					<el-skeleton animated class="flex justify-center">
+						<template #template>
+							<el-skeleton-item style="width: 100px; height: 100px" variant="image" />
+						</template>
+					</el-skeleton>
+				</el-descriptions-item>
+				<el-descriptions-item :label="$t('username')" :width="100">
+					<el-skeleton :rows="1" animated />
+				</el-descriptions-item>
+				<el-descriptions-item :label="$t('nickName')" :width="100">
+					<el-skeleton :rows="1" animated />
+				</el-descriptions-item>
+
+				<el-descriptions-item :label="$t('email')">
+					<el-skeleton :rows="1" animated />
+				</el-descriptions-item>
+				<el-descriptions-item :label="$t('phone')">
+					<el-skeleton :rows="1" animated />
+				</el-descriptions-item>
+				<el-descriptions-item :label="$t('sex')">
+					<el-skeleton :rows="1" animated />
+				</el-descriptions-item>
+
+				<el-descriptions-item :label="$t('personDescription')" span="3">
+					<el-skeleton :rows="1" animated />
+				</el-descriptions-item>
+
+				<el-descriptions-item :label="$t('table.createTime')" span="1.5">
+					<el-skeleton :rows="1" animated />
+				</el-descriptions-item>
+				<el-descriptions-item :label="$t('table.updateTime')" span="1.5">
+					<el-skeleton :rows="1" animated />
+				</el-descriptions-item>
+			</el-descriptions>
+		</div>
+
+		<!-- 数据为空 -->
+		<el-empty v-if="(!userId || !userinfo) && !loading" :description="$t('no_data')" />
 	</div>
-	<el-empty v-else :description="$t('no_data')" />
 </template>
 
 <style lang="scss" scoped>
@@ -77,7 +138,6 @@ onMounted(() => {
 	flex-direction: column;
 	margin-bottom: 12px;
 	overflow: hidden;
-	cursor: pointer;
 	border-radius: 3px;
 
 	&_detail {
diff --git a/src/components/Table/Userinfo/columns.tsx b/src/components/Table/Userinfo/columns.tsx
index 089f647..7213fd4 100644
--- a/src/components/Table/Userinfo/columns.tsx
+++ b/src/components/Table/Userinfo/columns.tsx
@@ -1,25 +1,5 @@
-import { $t } from '@/plugins/i18n';
 import UserinfoDialog from '@/components/Table/Userinfo/UserinfoDialog.vue';
 import { addDialog } from '@/components/BaseDialog/index';
-import TableImage from '@/components/Table/TableImage.vue'; // 表格列字段
-
-// 表格列字段
-export const columns = [
-	{ label: $t('id'), prop: 'id' },
-	{
-		label: $t('avatar'),
-		prop: 'avatar',
-		cellRenderer: ({ row }) => <TableImage image={row.avatar} />,
-	},
-	{ label: $t('nickName'), prop: 'nickName' },
-	{ label: $t('username'), prop: 'username' },
-	{ label: $t('email'), prop: 'email', width: 180 },
-	{ label: $t('phone'), prop: 'phone', width: 180 },
-	{ label: $t('sex'), prop: 'sex' },
-	{ label: $t('personDescription'), prop: 'personDescription', width: 180 },
-	{ label: $t('table.createTime'), prop: 'createTime', width: '160' },
-	{ label: $t('table.updateTime'), prop: 'updateTime', width: '160' },
-];
 
 /**
  * * 查看用户信息
diff --git a/src/views/system/adminUser/utils/columns.tsx b/src/views/system/adminUser/utils/columns.tsx
index 462e4e6..0a3bad1 100644
--- a/src/views/system/adminUser/utils/columns.tsx
+++ b/src/views/system/adminUser/utils/columns.tsx
@@ -28,8 +28,8 @@ export const columns: TableColumnList = [
 	{ label: $t('adminUser_summary'), prop: 'summary', width: 460 },
 	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
 	{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
-	{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90, fixed: 'right' },
 	{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 90, fixed: 'right' },
+	{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90, fixed: 'right' },
 	{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
 ];