@ebiz/designer-components 0.1.80 → 0.1.81

package/src/components/mItems/UserInfo.vue

@@ -1,343 +1,343 @@
-<template>
-  <div class="user-info" :class="{ 'user-info-loading': state.loading }">
-    <div v-if="state.loading && showLoading" class="user-loading">
-      <div class="loading-avatar"></div>
-      <div class="loading-text"></div>
-    </div>
-    <div v-else class="user-content" :class="layout">
-      <!-- 头像 -->
-      <div class="user-avatar" :class="avatarSize">
-        <img 
-          v-if="state.userInfo?.avatar" 
-          :src="state.userInfo.avatar" 
-          :alt="state.userInfo.name || '用户头像'"
-          @error="handleAvatarError"
-        />
-        <div v-else class="default-avatar">
-          {{ getAvatarText() }}
-        </div>
-      </div>
-      
-      <!-- 用户信息 -->
-      <div class="user-details" v-if="showDetails">
-        <div class="user-name" :class="nameSize">
-          {{ state.userInfo?.name || userId || '--' }}
-        </div>
-        <div v-if="showJobNumber && state.userInfo?.jobNumber" class="user-job-number">
-          工号：{{ state.userInfo.jobNumber }}
-        </div>
-        <div v-if="showDepartment && state.userInfo?.department" class="user-department">
-          {{ state.userInfo.department }}
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import * as vue from 'vue'
-import { defineProps, defineEmits } from 'vue'
-
-const props = defineProps({
-  userId: { 
-    type: String, 
-    default: '' 
-  },
-  userInfo: {
-    type: Object,
-    default: null
-  },
-  layout: { 
-    type: String, 
-    default: 'horizontal', // horizontal, vertical
-    validator: (value) => ['horizontal', 'vertical'].includes(value)
-  },
-  avatarSize: { 
-    type: String, 
-    default: 'medium', // small, medium, large
-    validator: (value) => ['small', 'medium', 'large'].includes(value)
-  },
-  nameSize: { 
-    type: String, 
-    default: 'normal', // small, normal, large
-    validator: (value) => ['small', 'normal', 'large'].includes(value)
-  },
-  showDetails: { 
-    type: Boolean, 
-    default: true 
-  },
-  showJobNumber: { 
-    type: Boolean, 
-    default: true 
-  },
-  showDepartment: { 
-    type: Boolean, 
-    default: false 
-  },
-  showLoading: { 
-    type: Boolean, 
-    default: false 
-  },
-  clickable: { 
-    type: Boolean, 
-    default: false 
-  }
-})
-
-const emit = defineEmits(['user-loaded', 'user-click'])
-
-
-// 标准化用户信息格式
-const normalizeUserInfo = (userInfo, userId) => {
-  return {
-    id: userInfo.id || userId,
-    name: userInfo.name || userInfo.userName || userInfo.realName,
-    avatar: userInfo.avatar || userInfo.avatarUrl || userInfo.photo,
-    jobNumber: userInfo.jobNumber || userInfo.employeeId || userInfo.employeeNo,
-    department: userInfo.department || userInfo.deptName,
-    email: userInfo.email,
-    phone: userInfo.phone
-  }
-}
-
-const state = vue.reactive({
-  loading: false,
-  userInfo: null,
-  error: null
-})
-
-// 获取头像文字（取姓名最后一个字符）
-const getAvatarText = () => {
-  const name = state.userInfo?.name || props.userId || '?'
-  return name.slice(-1)
-}
-
-// 头像加载错误处理
-const handleAvatarError = (event) => {
-  console.warn('头像加载失败:', event.target.src)
-  // 可以在这里设置默认头像或者隐藏img标签
-  event.target.style.display = 'none'
-}
-
-// 用户点击事件
-const handleUserClick = () => {
-  if (props.clickable) {
-    emit('user-click', {
-      userId: props.userId,
-      userInfo: state.userInfo
-    })
-  }
-}
-
-// 获取用户信息
-const fetchUserInfo = (userId) => {
-  // 如果直接传入了用户信息，优先使用传入的信息
-  if (props.userInfo) {
-    state.userInfo = normalizeUserInfo(props.userInfo, userId)
-    emit('user-loaded', state.userInfo)
-    return
-  }
-
-  if (!userId) {
-    state.userInfo = null
-    return
-  }
-
-  // 如果已经有相同用户的信息，直接返回
-  if (state.userInfo && state.userInfo.id === userId) {
-    return
-  }
-
-  state.loading = true
-  state.error = null
-}
-
-// 监听userId变化
-vue.watch(
-  () => props.userId,
-  (newUserId) => {
-    if (newUserId || props.userInfo) {
-      fetchUserInfo(newUserId)
-    } else {
-      state.userInfo = null
-    }
-  },
-  { immediate: true }
-)
-
-// 监听userInfo变化
-vue.watch(
-  () => props.userInfo,
-  (newUserInfo) => {
-    if (newUserInfo) {
-      state.userInfo = normalizeUserInfo(newUserInfo, props.userId)
-      emit('user-loaded', state.userInfo)
-    } else if (props.userId) {
-      fetchUserInfo(props.userId)
-    } else {
-      state.userInfo = null
-    }
-  },
-  { immediate: true, deep: true }
-)
-</script>
-
-<style scoped>
-.user-info {
-  display: inline-flex;
-  align-items: center;
-}
-
-.user-info.clickable {
-  cursor: pointer;
-}
-
-.user-info.clickable:hover {
-  opacity: 0.8;
-}
-
-.user-content {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.user-content.vertical {
-  flex-direction: column;
-  text-align: center;
-  gap: 4px;
-}
-
-.user-content.horizontal {
-  flex-direction: row;
-}
-
-/* 头像样式 */
-.user-avatar {
-  position: relative;
-  border-radius: 50%;
-  overflow: hidden;
-  background-color: #f0f0f0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.user-avatar.small {
-  width: 24px;
-  height: 24px;
-}
-
-.user-avatar.medium {
-  width: 32px;
-  height: 32px;
-}
-
-.user-avatar.large {
-  width: 40px;
-  height: 40px;
-}
-
-.user-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.default-avatar {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  font-weight: 500;
-}
-
-.user-avatar.small .default-avatar {
-  font-size: 10px;
-}
-
-.user-avatar.medium .default-avatar {
-  font-size: 12px;
-}
-
-.user-avatar.large .default-avatar {
-  font-size: 14px;
-}
-
-/* 用户详情样式 */
-.user-details {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.user-name {
-  font-weight: 500;
-  color: #333;
-  line-height: 1.2;
-  word-break: break-all;
-}
-
-.user-name.small {
-  font-size: 12px;
-}
-
-.user-name.normal {
-  font-size: 14px;
-}
-
-.user-name.large {
-  font-size: 16px;
-}
-
-.user-job-number,
-.user-department {
-  font-size: 11px;
-  color: #666;
-  line-height: 1.2;
-}
-
-/* 加载状态 */
-.user-loading {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.loading-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-  background-size: 200% 100%;
-  animation: loading 1.5s infinite;
-}
-
-.loading-text {
-  width: 60px;
-  height: 12px;
-  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-  background-size: 200% 100%;
-  animation: loading 1.5s infinite;
-  border-radius: 6px;
-}
-
-@keyframes loading {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-/* 垂直布局时的样式调整 */
-.user-content.vertical .user-details {
-  align-items: center;
-}
+<template>
+  <div class="user-info" :class="{ 'user-info-loading': state.loading }">
+    <div v-if="state.loading && showLoading" class="user-loading">
+      <div class="loading-avatar"></div>
+      <div class="loading-text"></div>
+    </div>
+    <div v-else class="user-content" :class="layout">
+      <!-- 头像 -->
+      <div class="user-avatar" :class="avatarSize">
+        <img 
+          v-if="state.userInfo?.avatar" 
+          :src="state.userInfo.avatar" 
+          :alt="state.userInfo.name || '用户头像'"
+          @error="handleAvatarError"
+        />
+        <div v-else class="default-avatar">
+          {{ getAvatarText() }}
+        </div>
+      </div>
+      
+      <!-- 用户信息 -->
+      <div class="user-details" v-if="showDetails">
+        <div class="user-name" :class="nameSize">
+          {{ state.userInfo?.name || userId || '--' }}
+        </div>
+        <div v-if="showJobNumber && state.userInfo?.jobNumber" class="user-job-number">
+          工号：{{ state.userInfo.jobNumber }}
+        </div>
+        <div v-if="showDepartment && state.userInfo?.department" class="user-department">
+          {{ state.userInfo.department }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import * as vue from 'vue'
+import { defineProps, defineEmits } from 'vue'
+
+const props = defineProps({
+  userId: { 
+    type: String, 
+    default: '' 
+  },
+  userInfo: {
+    type: Object,
+    default: null
+  },
+  layout: { 
+    type: String, 
+    default: 'horizontal', // horizontal, vertical
+    validator: (value) => ['horizontal', 'vertical'].includes(value)
+  },
+  avatarSize: { 
+    type: String, 
+    default: 'medium', // small, medium, large
+    validator: (value) => ['small', 'medium', 'large'].includes(value)
+  },
+  nameSize: { 
+    type: String, 
+    default: 'normal', // small, normal, large
+    validator: (value) => ['small', 'normal', 'large'].includes(value)
+  },
+  showDetails: { 
+    type: Boolean, 
+    default: true 
+  },
+  showJobNumber: { 
+    type: Boolean, 
+    default: true 
+  },
+  showDepartment: { 
+    type: Boolean, 
+    default: false 
+  },
+  showLoading: { 
+    type: Boolean, 
+    default: false 
+  },
+  clickable: { 
+    type: Boolean, 
+    default: false 
+  }
+})
+
+const emit = defineEmits(['user-loaded', 'user-click'])
+
+
+// 标准化用户信息格式
+const normalizeUserInfo = (userInfo, userId) => {
+  return {
+    id: userInfo.id || userId,
+    name: userInfo.name || userInfo.userName || userInfo.realName,
+    avatar: userInfo.avatar || userInfo.avatarUrl || userInfo.photo,
+    jobNumber: userInfo.jobNumber || userInfo.employeeId || userInfo.employeeNo,
+    department: userInfo.department || userInfo.deptName,
+    email: userInfo.email,
+    phone: userInfo.phone
+  }
+}
+
+const state = vue.reactive({
+  loading: false,
+  userInfo: null,
+  error: null
+})
+
+// 获取头像文字（取姓名最后一个字符）
+const getAvatarText = () => {
+  const name = state.userInfo?.name || props.userId || '?'
+  return name.slice(-1)
+}
+
+// 头像加载错误处理
+const handleAvatarError = (event) => {
+  console.warn('头像加载失败:', event.target.src)
+  // 可以在这里设置默认头像或者隐藏img标签
+  event.target.style.display = 'none'
+}
+
+// 用户点击事件
+const handleUserClick = () => {
+  if (props.clickable) {
+    emit('user-click', {
+      userId: props.userId,
+      userInfo: state.userInfo
+    })
+  }
+}
+
+// 获取用户信息
+const fetchUserInfo = (userId) => {
+  // 如果直接传入了用户信息，优先使用传入的信息
+  if (props.userInfo) {
+    state.userInfo = normalizeUserInfo(props.userInfo, userId)
+    emit('user-loaded', state.userInfo)
+    return
+  }
+
+  if (!userId) {
+    state.userInfo = null
+    return
+  }
+
+  // 如果已经有相同用户的信息，直接返回
+  if (state.userInfo && state.userInfo.id === userId) {
+    return
+  }
+
+  state.loading = true
+  state.error = null
+}
+
+// 监听userId变化
+vue.watch(
+  () => props.userId,
+  (newUserId) => {
+    if (newUserId || props.userInfo) {
+      fetchUserInfo(newUserId)
+    } else {
+      state.userInfo = null
+    }
+  },
+  { immediate: true }
+)
+
+// 监听userInfo变化
+vue.watch(
+  () => props.userInfo,
+  (newUserInfo) => {
+    if (newUserInfo) {
+      state.userInfo = normalizeUserInfo(newUserInfo, props.userId)
+      emit('user-loaded', state.userInfo)
+    } else if (props.userId) {
+      fetchUserInfo(props.userId)
+    } else {
+      state.userInfo = null
+    }
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<style scoped>
+.user-info {
+  display: inline-flex;
+  align-items: center;
+}
+
+.user-info.clickable {
+  cursor: pointer;
+}
+
+.user-info.clickable:hover {
+  opacity: 0.8;
+}
+
+.user-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.user-content.vertical {
+  flex-direction: column;
+  text-align: center;
+  gap: 4px;
+}
+
+.user-content.horizontal {
+  flex-direction: row;
+}
+
+/* 头像样式 */
+.user-avatar {
+  position: relative;
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.user-avatar.small {
+  width: 24px;
+  height: 24px;
+}
+
+.user-avatar.medium {
+  width: 32px;
+  height: 32px;
+}
+
+.user-avatar.large {
+  width: 40px;
+  height: 40px;
+}
+
+.user-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.default-avatar {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  font-weight: 500;
+}
+
+.user-avatar.small .default-avatar {
+  font-size: 10px;
+}
+
+.user-avatar.medium .default-avatar {
+  font-size: 12px;
+}
+
+.user-avatar.large .default-avatar {
+  font-size: 14px;
+}
+
+/* 用户详情样式 */
+.user-details {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.user-name {
+  font-weight: 500;
+  color: #333;
+  line-height: 1.2;
+  word-break: break-all;
+}
+
+.user-name.small {
+  font-size: 12px;
+}
+
+.user-name.normal {
+  font-size: 14px;
+}
+
+.user-name.large {
+  font-size: 16px;
+}
+
+.user-job-number,
+.user-department {
+  font-size: 11px;
+  color: #666;
+  line-height: 1.2;
+}
+
+/* 加载状态 */
+.user-loading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.loading-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: loading 1.5s infinite;
+}
+
+.loading-text {
+  width: 60px;
+  height: 12px;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: loading 1.5s infinite;
+  border-radius: 6px;
+}
+
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* 垂直布局时的样式调整 */
+.user-content.vertical .user-details {
+  align-items: center;
+}
 </style>