@ebiz/designer-components 0.1.78 → 0.1.80

package/src/components/EbizDetailItem.vue

@@ -1,560 +1,560 @@
-<template>
-  <t-col :span="finalSpan" :xs="finalXs" :sm="finalSm" :md="finalMd" :lg="finalLg" :xl="finalXl" :xxl="finalXxl">
-    <div class="ebiz-detail-item" :class="{
-      'vertical-layout': finalLayout === 'vertical',
-      'horizontal-layout': finalLayout === 'horizontal',
-    }">
-      <!-- 标签部分 -->
-      <div class="detail-label" :style="{
-        width: finalLayout === 'horizontal' ? `${finalLabelWidth}px` : 'auto',
-        color: finalLabelColor
-      }">
-        {{ label }}
-      </div>
-
-      <!-- 值部分 -->
-      <div class="detail-value">
-        <slot name="default" :data="value">
-          <!-- 文本类型 -->
-          <span v-if="type === 'text'">{{ value || '-' }}</span>
-
-          <!-- 数字类型 -->
-          <span v-else-if="type === 'number'">{{ formatNumber(value) }}</span>
-
-          <!-- 货币类型 -->
-          <span v-else-if="type === 'currency'" class="currency-value">
-            {{ formatCurrency(value) }}
-          </span>
-
-          <!-- 用户类型 -->
-          <div v-else-if="type === 'user'" class="user-value">
-            <div class="user-list">
-              <div v-for="user in userList" :key="user.id" class="user-item" @click="handleUserClick(user)">
-                <div class="user-avatar">
-                  <img v-if="user.avatar" :src="user.avatar" />
-                  <div v-else class="user-avatar-default">{{ user.name?.[0] || 'U' }}</div>
-                </div>
-                <div class="user-info">
-                  <div class="user-name">{{ user.name }}</div>
-                  <div class="user-dept">{{ user.department }}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 文件类型 -->
-          <div v-else-if="type === 'file'" class="file-value">
-            <EbizFileList :files="fileList" :mode="fileMode" :showDownload="showDownload"
-              @download="handleDownloadFile" />
-          </div>
-
-          <!-- 日期类型 -->
-          <span v-else-if="type === 'date'">{{ formatDate(value) }}</span>
-          
-          <!-- 时间类型 -->
-          <span v-else-if="type === 'time'">{{ formatTime(value) }}</span>
-          
-          <!-- 日期时间类型 -->
-          <span v-else-if="type === 'datetime'">{{ formatDateTime(value) }}</span>
-
-          <!-- 状态类型 -->
-          <t-tag v-else-if="type === 'status'" :theme="getStatusTheme(value)">
-            {{ getStatusText(value) }}
-          </t-tag>
-
-          <!-- 标签类型 -->
-          <div v-else-if="type === 'tags'" class="tags-value">
-            <template v-if="Array.isArray(value) && value.length > 0">
-              <t-tag v-for="tag in value" :key="tag.id || tag" size="small" class="tag-item">
-                {{ typeof tag === 'object' ? tag.name : tag }}
-              </t-tag>
-            </template>
-            <span v-else>{{ value || '-' }}</span>
-          </div>
-
-          <!-- 链接类型 -->
-          <a v-else-if="type === 'link'" :href="getLinkUrl(value)" class="link-value" @click="handleLinkClick">
-            {{ getLinkText(value) }}
-          </a>
-
-          <!-- HTML类型 -->
-          <div v-else-if="type === 'html'" class="html-value" v-html="value"></div>
-
-          <!-- 默认文本 -->
-          <span v-else>{{ value || '-' }}</span>
-
-          <!-- 描述信息 -->
-          <div v-if="description" class="description">{{ description }}</div>
-        </slot>
-      </div>
-    </div>
-  </t-col>
-</template>
-
-<script setup>
-import { computed, defineProps, defineEmits, inject } from 'vue'
-import { Tag as TTag, Button as TButton, Icon as TIcon, Avatar as TAvatar, Col as TCol } from 'tdesign-vue-next'
-import EbizFileList from './EbizFileList.vue'
-
-const props = defineProps({
-  // 字段配置
-  label: {
-    type: String,
-    required: true
-  },
-  type: {
-    type: String,
-    default: 'text',
-    validator: (value) => [
-      'text', 'user', 'file', 'date', 'time', 'datetime', 'status', 
-      'tags', 'link', 'html', 'number', 'currency'
-    ].includes(value)
-  },
-  value: {
-    type: [String, Number, Array, Object],
-    default: ''
-  },
-  description: {
-    type: String,
-    default: ''
-  },
-  
-  // 栅格布局配置
-  span: {
-    type: Number,
-    default: 12,
-    validator: (value) => value >= 1 && value <= 24
-  },
-  xs: {
-    type: Number,
-    default: undefined
-  },
-  sm: {
-    type: Number,
-    default: undefined
-  },
-  md: {
-    type: Number,
-    default: undefined
-  },
-  lg: {
-    type: Number,
-    default: undefined
-  },
-  xl: {
-    type: Number,
-    default: undefined
-  },
-  xxl: {
-    type: Number,
-    default: undefined
-  },
-  
-  // 布局配置
-  layout: {
-    type: String,
-    default: 'horizontal',
-    validator: (value) => ['horizontal', 'vertical'].includes(value)
-  },
-  labelWidth: {
-    type: Number,
-    default: 120
-  },
-  labelColor: {
-    type: String,
-    default: '#999999'
-  },
-  gap: {
-    type: Number,
-    default: 16
-  },
-  minHeight: {
-    type: Number,
-    default: 32
-  },
-  
-  // 文件组件配置
-  fileMode: {
-    type: String,
-    default: 'list'
-  },
-  showDownload: {
-    type: Boolean,
-    default: true
-  }
-})
-
-const emits = defineEmits(['download-file', 'user-click', 'link-click'])
-
-// 注入父组件配置
-const detailViewConfig = inject('detailViewConfig', null)
-
-// 合并配置
-const finalLayout = computed(() => props.layout || detailViewConfig?.layout || 'horizontal')
-const finalLabelWidth = computed(() => props.labelWidth || detailViewConfig?.labelWidth || 120)
-const finalLabelColor = computed(() => props.labelColor || detailViewConfig?.labelColor || '#999999')
-const finalGap = computed(() => props.gap !== undefined ? props.gap : (detailViewConfig?.gap ?? 16))
-
-// 栅格配置
-const finalSpan = computed(() => props.span)
-const finalXs = computed(() => props.xs)
-const finalSm = computed(() => props.sm)
-const finalMd = computed(() => props.md)
-const finalLg = computed(() => props.lg)
-const finalXl = computed(() => props.xl)
-const finalXxl = computed(() => props.xxl)
-
-// 暴露栅格配置给父组件
-defineExpose({
-  gridConfig: computed(() => ({
-    span: finalSpan.value,
-    xs: finalXs.value,
-    sm: finalSm.value,
-    md: finalMd.value,
-    lg: finalLg.value,
-    xl: finalXl.value,
-    xxl: finalXxl.value
-  }))
-})
-
-// 显示值
-const displayValue = computed(() => {
-  return props.value !== undefined && props.value !== null ? props.value : ''
-})
-
-// 用户列表
-const userList = computed(() => {
-  if (props.type !== 'user') return []
-  return Array.isArray(props.value) ? props.value : (props.value ? [props.value] : [])
-})
-
-// 文件列表
-const fileList = computed(() => {
-  if (props.type !== 'file') return []
-  return Array.isArray(props.value) ? props.value : (props.value ? [props.value] : [])
-})
-
-// 状态值
-const statusValue = computed(() => {
-  if (props.type !== 'status') return null
-  return typeof props.value === 'object' ? props.value : { text: props.value, status: 'default' }
-})
-
-// 标签列表
-const tagList = computed(() => {
-  if (props.type !== 'tags') return []
-  return Array.isArray(props.value) ? props.value : (props.value ? [props.value] : [])
-})
-
-// 链接值
-const linkValue = computed(() => {
-  if (props.type !== 'link') return null
-  return typeof props.value === 'object' ? props.value : { url: props.value, text: props.value }
-})
-
-// 格式化日期
-const formatDate = (date) => {
-  if (!date) return ''
-  const d = new Date(date)
-  return d.toLocaleDateString('zh-CN', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit'
-  })
-}
-
-// 格式化时间
-const formatTime = (time) => {
-  if (!time) return ''
-  const d = new Date(time)
-  return d.toLocaleTimeString('zh-CN', {
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit'
-  })
-}
-
-// 格式化日期时间
-const formatDateTime = (datetime) => {
-  if (!datetime) return ''
-  const d = new Date(datetime)
-  return d.toLocaleString('zh-CN', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit'
-  })
-}
-
-// 格式化数字
-const formatNumber = (num) => {
-  if (num === null || num === undefined || num === '') return ''
-  return Number(num).toLocaleString()
-}
-
-// 格式化货币
-const formatCurrency = (amount) => {
-  if (amount === null || amount === undefined || amount === '') return ''
-  return `¥${Number(amount).toLocaleString()}`
-}
-
-// 获取状态主题
-const getStatusTheme = (status) => {
-  const statusMap = {
-    'success': 'success',
-    'warning': 'warning',
-    'error': 'danger',
-    'info': 'primary'
-  }
-  return statusMap[status] || 'default'
-}
-
-// 获取状态文本
-const getStatusText = (status) => {
-  if (typeof status === 'object' && status !== null) {
-    return status.text || status.status || status
-  }
-  return status
-}
-
-// 获取用户头像
-const getUserAvatar = (user) => {
-  if (typeof user === 'object' && user !== null && user.avatar) {
-    return user.avatar
-  }
-  return null
-}
-
-// 获取用户初始
-const getUserInitial = (user) => {
-  if (typeof user === 'object' && user !== null && user.name) {
-    return user.name.charAt(0)
-  }
-  return 'U'
-}
-
-// 获取用户名称
-const getUserName = (user) => {
-  if (typeof user === 'object' && user !== null && user.name) {
-    return user.name
-  }
-  return user
-}
-
-// 获取链接 URL
-const getLinkUrl = (link) => {
-  if (typeof link === 'object' && link !== null && link.url) {
-    return link.url
-  }
-  return link
-}
-
-// 获取链接文本
-const getLinkText = (link) => {
-  if (typeof link === 'object' && link !== null && link.text) {
-    return link.text
-  }
-  return link
-}
-
-// 事件处理
-const handleDownloadFile = (file) => {
-  emits('download-file', file)
-}
-
-const handleUserClick = () => {
-  emits('user-click', userList.value[0]) // Assuming userList is an array of users
-}
-
-const handleLinkClick = () => {
-  emits('link-click', linkValue.value)
-}
-</script>
-
-<style scoped>
-.ebiz-detail-item {
-  display: flex;
-  align-items: flex-start;
-  padding: 8px 0;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.ebiz-detail-item:last-child {
-  border-bottom: none;
-}
-
-.ebiz-detail-item.vertical-layout {
-  flex-direction: column;
-}
-
-.ebiz-detail-item.horizontal-layout {
-  flex-direction: row;
-}
-
-.detail-label {
-  font-size: 14px;
-  line-height: 1.5;
-  font-weight: 500;
-  margin-right: 12px;
-  flex-shrink: 0;
-}
-
-.ebiz-detail-item.vertical .field-label {
-  margin-right: 0;
-  margin-bottom: 8px;
-}
-
-.required-mark {
-  color: #e34d59;
-  margin-left: 2px;
-}
-
-.field-value {
-  flex: 1;
-  font-size: 14px;
-  color: #333333;
-  line-height: 1.5;
-  word-break: break-all;
-  min-width: 0;
-}
-
-.description {
-  font-size: 12px;
-  color: #999999;
-  margin-top: 4px;
-  line-height: 1.4;
-}
-
-/* 用户信息样式 */
-.user-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.user-item {
-  display: flex;
-  align-items: center;
-  padding: 6px 8px;
-  background: #f8f9fa;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.user-item:hover {
-  background: #e9ecef;
-}
-
-.user-avatar {
-  width: 24px;
-  height: 24px;
-  margin-right: 8px;
-  border-radius: 50%;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-.user-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.user-avatar-default {
-  width: 100%;
-  height: 100%;
-  background: #0052d9;
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  font-weight: bold;
-}
-
-.user-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.user-name {
-  font-size: 13px;
-  color: #333333;
-  font-weight: 500;
-}
-
-.user-dept {
-  font-size: 12px;
-  color: #999999;
-  margin-top: 2px;
-}
-
-/* 文件值样式 */
-.file-value {
-  width: 100%;
-}
-
-/* 状态值样式 */
-.status-value {
-  display: inline-block;
-}
-
-/* 标签值样式 */
-.tags-value {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.tag-item {
-  margin: 0;
-}
-
-/* 链接样式 */
-.link-value {
-  color: #0052d9;
-  cursor: pointer;
-  text-decoration: underline;
-  word-break: break-all;
-}
-
-.link-value:hover {
-  color: #003a9b;
-}
-
-/* 富文本样式 */
-.html-value {
-  line-height: 1.6;
-}
-
-.html-value :deep(p) {
-  margin: 0 0 8px 0;
-}
-
-.html-value :deep(p:last-child) {
-  margin-bottom: 0;
-}
-
-/* 数字和货币样式 */
-.number-value,
-.currency-value {
-  font-weight: 500;
-  font-variant-numeric: tabular-nums;
-}
-
-.currency-value {
-  color: #e34d59;
-}
-
-/* 空值样式 */
-.text-value:empty::before,
-.number-value:empty::before,
-.currency-value:empty::before,
-.date-value:empty::before {
-  content: '--';
-  color: #c8c9cc;
-}
+<template>
+  <t-col :span="finalSpan" :xs="finalXs" :sm="finalSm" :md="finalMd" :lg="finalLg" :xl="finalXl" :xxl="finalXxl">
+    <div class="ebiz-detail-item" :class="{
+      'vertical-layout': finalLayout === 'vertical',
+      'horizontal-layout': finalLayout === 'horizontal',
+    }">
+      <!-- 标签部分 -->
+      <div class="detail-label" :style="{
+        width: finalLayout === 'horizontal' ? `${finalLabelWidth}px` : 'auto',
+        color: finalLabelColor
+      }">
+        {{ label }}
+      </div>
+
+      <!-- 值部分 -->
+      <div class="detail-value">
+        <slot name="default" :data="value">
+          <!-- 文本类型 -->
+          <span v-if="type === 'text'">{{ value || '-' }}</span>
+
+          <!-- 数字类型 -->
+          <span v-else-if="type === 'number'">{{ formatNumber(value) }}</span>
+
+          <!-- 货币类型 -->
+          <span v-else-if="type === 'currency'" class="currency-value">
+            {{ formatCurrency(value) }}
+          </span>
+
+          <!-- 用户类型 -->
+          <div v-else-if="type === 'user'" class="user-value">
+            <div class="user-list">
+              <div v-for="user in userList" :key="user.id" class="user-item" @click="handleUserClick(user)">
+                <div class="user-avatar">
+                  <img v-if="user.avatar" :src="user.avatar" />
+                  <div v-else class="user-avatar-default">{{ user.name?.[0] || 'U' }}</div>
+                </div>
+                <div class="user-info">
+                  <div class="user-name">{{ user.name }}</div>
+                  <div class="user-dept">{{ user.department }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 文件类型 -->
+          <div v-else-if="type === 'file'" class="file-value">
+            <EbizFileList :files="fileList" :mode="fileMode" :showDownload="showDownload"
+              @download="handleDownloadFile" />
+          </div>
+
+          <!-- 日期类型 -->
+          <span v-else-if="type === 'date'">{{ formatDate(value) }}</span>
+          
+          <!-- 时间类型 -->
+          <span v-else-if="type === 'time'">{{ formatTime(value) }}</span>
+          
+          <!-- 日期时间类型 -->
+          <span v-else-if="type === 'datetime'">{{ formatDateTime(value) }}</span>
+
+          <!-- 状态类型 -->
+          <t-tag v-else-if="type === 'status'" :theme="getStatusTheme(value)">
+            {{ getStatusText(value) }}
+          </t-tag>
+
+          <!-- 标签类型 -->
+          <div v-else-if="type === 'tags'" class="tags-value">
+            <template v-if="Array.isArray(value) && value.length > 0">
+              <t-tag v-for="tag in value" :key="tag.id || tag" size="small" class="tag-item">
+                {{ typeof tag === 'object' ? tag.name : tag }}
+              </t-tag>
+            </template>
+            <span v-else>{{ value || '-' }}</span>
+          </div>
+
+          <!-- 链接类型 -->
+          <a v-else-if="type === 'link'" :href="getLinkUrl(value)" class="link-value" @click="handleLinkClick">
+            {{ getLinkText(value) }}
+          </a>
+
+          <!-- HTML类型 -->
+          <div v-else-if="type === 'html'" class="html-value" v-html="value"></div>
+
+          <!-- 默认文本 -->
+          <span v-else>{{ value || '-' }}</span>
+
+          <!-- 描述信息 -->
+          <div v-if="description" class="description">{{ description }}</div>
+        </slot>
+      </div>
+    </div>
+  </t-col>
+</template>
+
+<script setup>
+import { computed, defineProps, defineEmits, inject } from 'vue'
+import { Tag as TTag, Button as TButton, Icon as TIcon, Avatar as TAvatar, Col as TCol } from 'tdesign-vue-next'
+import EbizFileList from './EbizFileList.vue'
+
+const props = defineProps({
+  // 字段配置
+  label: {
+    type: String,
+    required: true
+  },
+  type: {
+    type: String,
+    default: 'text',
+    validator: (value) => [
+      'text', 'user', 'file', 'date', 'time', 'datetime', 'status', 
+      'tags', 'link', 'html', 'number', 'currency'
+    ].includes(value)
+  },
+  value: {
+    type: [String, Number, Array, Object],
+    default: ''
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  
+  // 栅格布局配置
+  span: {
+    type: Number,
+    default: 12,
+    validator: (value) => value >= 1 && value <= 24
+  },
+  xs: {
+    type: Number,
+    default: undefined
+  },
+  sm: {
+    type: Number,
+    default: undefined
+  },
+  md: {
+    type: Number,
+    default: undefined
+  },
+  lg: {
+    type: Number,
+    default: undefined
+  },
+  xl: {
+    type: Number,
+    default: undefined
+  },
+  xxl: {
+    type: Number,
+    default: undefined
+  },
+  
+  // 布局配置
+  layout: {
+    type: String,
+    default: 'horizontal',
+    validator: (value) => ['horizontal', 'vertical'].includes(value)
+  },
+  labelWidth: {
+    type: Number,
+    default: 120
+  },
+  labelColor: {
+    type: String,
+    default: '#999999'
+  },
+  gap: {
+    type: Number,
+    default: 16
+  },
+  minHeight: {
+    type: Number,
+    default: 32
+  },
+  
+  // 文件组件配置
+  fileMode: {
+    type: String,
+    default: 'list'
+  },
+  showDownload: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emits = defineEmits(['download-file', 'user-click', 'link-click'])
+
+// 注入父组件配置
+const detailViewConfig = inject('detailViewConfig', null)
+
+// 合并配置
+const finalLayout = computed(() => props.layout || detailViewConfig?.layout || 'horizontal')
+const finalLabelWidth = computed(() => props.labelWidth || detailViewConfig?.labelWidth || 120)
+const finalLabelColor = computed(() => props.labelColor || detailViewConfig?.labelColor || '#999999')
+const finalGap = computed(() => props.gap !== undefined ? props.gap : (detailViewConfig?.gap ?? 16))
+
+// 栅格配置
+const finalSpan = computed(() => props.span)
+const finalXs = computed(() => props.xs)
+const finalSm = computed(() => props.sm)
+const finalMd = computed(() => props.md)
+const finalLg = computed(() => props.lg)
+const finalXl = computed(() => props.xl)
+const finalXxl = computed(() => props.xxl)
+
+// 暴露栅格配置给父组件
+defineExpose({
+  gridConfig: computed(() => ({
+    span: finalSpan.value,
+    xs: finalXs.value,
+    sm: finalSm.value,
+    md: finalMd.value,
+    lg: finalLg.value,
+    xl: finalXl.value,
+    xxl: finalXxl.value
+  }))
+})
+
+// 显示值
+const displayValue = computed(() => {
+  return props.value !== undefined && props.value !== null ? props.value : ''
+})
+
+// 用户列表
+const userList = computed(() => {
+  if (props.type !== 'user') return []
+  return Array.isArray(props.value) ? props.value : (props.value ? [props.value] : [])
+})
+
+// 文件列表
+const fileList = computed(() => {
+  if (props.type !== 'file') return []
+  return Array.isArray(props.value) ? props.value : (props.value ? [props.value] : [])
+})
+
+// 状态值
+const statusValue = computed(() => {
+  if (props.type !== 'status') return null
+  return typeof props.value === 'object' ? props.value : { text: props.value, status: 'default' }
+})
+
+// 标签列表
+const tagList = computed(() => {
+  if (props.type !== 'tags') return []
+  return Array.isArray(props.value) ? props.value : (props.value ? [props.value] : [])
+})
+
+// 链接值
+const linkValue = computed(() => {
+  if (props.type !== 'link') return null
+  return typeof props.value === 'object' ? props.value : { url: props.value, text: props.value }
+})
+
+// 格式化日期
+const formatDate = (date) => {
+  if (!date) return ''
+  const d = new Date(date)
+  return d.toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  })
+}
+
+// 格式化时间
+const formatTime = (time) => {
+  if (!time) return ''
+  const d = new Date(time)
+  return d.toLocaleTimeString('zh-CN', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  })
+}
+
+// 格式化日期时间
+const formatDateTime = (datetime) => {
+  if (!datetime) return ''
+  const d = new Date(datetime)
+  return d.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  })
+}
+
+// 格式化数字
+const formatNumber = (num) => {
+  if (num === null || num === undefined || num === '') return ''
+  return Number(num).toLocaleString()
+}
+
+// 格式化货币
+const formatCurrency = (amount) => {
+  if (amount === null || amount === undefined || amount === '') return ''
+  return `¥${Number(amount).toLocaleString()}`
+}
+
+// 获取状态主题
+const getStatusTheme = (status) => {
+  const statusMap = {
+    'success': 'success',
+    'warning': 'warning',
+    'error': 'danger',
+    'info': 'primary'
+  }
+  return statusMap[status] || 'default'
+}
+
+// 获取状态文本
+const getStatusText = (status) => {
+  if (typeof status === 'object' && status !== null) {
+    return status.text || status.status || status
+  }
+  return status
+}
+
+// 获取用户头像
+const getUserAvatar = (user) => {
+  if (typeof user === 'object' && user !== null && user.avatar) {
+    return user.avatar
+  }
+  return null
+}
+
+// 获取用户初始
+const getUserInitial = (user) => {
+  if (typeof user === 'object' && user !== null && user.name) {
+    return user.name.charAt(0)
+  }
+  return 'U'
+}
+
+// 获取用户名称
+const getUserName = (user) => {
+  if (typeof user === 'object' && user !== null && user.name) {
+    return user.name
+  }
+  return user
+}
+
+// 获取链接 URL
+const getLinkUrl = (link) => {
+  if (typeof link === 'object' && link !== null && link.url) {
+    return link.url
+  }
+  return link
+}
+
+// 获取链接文本
+const getLinkText = (link) => {
+  if (typeof link === 'object' && link !== null && link.text) {
+    return link.text
+  }
+  return link
+}
+
+// 事件处理
+const handleDownloadFile = (file) => {
+  emits('download-file', file)
+}
+
+const handleUserClick = () => {
+  emits('user-click', userList.value[0]) // Assuming userList is an array of users
+}
+
+const handleLinkClick = () => {
+  emits('link-click', linkValue.value)
+}
+</script>
+
+<style scoped>
+.ebiz-detail-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 8px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.ebiz-detail-item:last-child {
+  border-bottom: none;
+}
+
+.ebiz-detail-item.vertical-layout {
+  flex-direction: column;
+}
+
+.ebiz-detail-item.horizontal-layout {
+  flex-direction: row;
+}
+
+.detail-label {
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: 500;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.ebiz-detail-item.vertical .field-label {
+  margin-right: 0;
+  margin-bottom: 8px;
+}
+
+.required-mark {
+  color: #e34d59;
+  margin-left: 2px;
+}
+
+.field-value {
+  flex: 1;
+  font-size: 14px;
+  color: #333333;
+  line-height: 1.5;
+  word-break: break-all;
+  min-width: 0;
+}
+
+.description {
+  font-size: 12px;
+  color: #999999;
+  margin-top: 4px;
+  line-height: 1.4;
+}
+
+/* 用户信息样式 */
+.user-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.user-item {
+  display: flex;
+  align-items: center;
+  padding: 6px 8px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.user-item:hover {
+  background: #e9ecef;
+}
+
+.user-avatar {
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.user-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.user-avatar-default {
+  width: 100%;
+  height: 100%;
+  background: #0052d9;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.user-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.user-name {
+  font-size: 13px;
+  color: #333333;
+  font-weight: 500;
+}
+
+.user-dept {
+  font-size: 12px;
+  color: #999999;
+  margin-top: 2px;
+}
+
+/* 文件值样式 */
+.file-value {
+  width: 100%;
+}
+
+/* 状态值样式 */
+.status-value {
+  display: inline-block;
+}
+
+/* 标签值样式 */
+.tags-value {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.tag-item {
+  margin: 0;
+}
+
+/* 链接样式 */
+.link-value {
+  color: #0052d9;
+  cursor: pointer;
+  text-decoration: underline;
+  word-break: break-all;
+}
+
+.link-value:hover {
+  color: #003a9b;
+}
+
+/* 富文本样式 */
+.html-value {
+  line-height: 1.6;
+}
+
+.html-value :deep(p) {
+  margin: 0 0 8px 0;
+}
+
+.html-value :deep(p:last-child) {
+  margin-bottom: 0;
+}
+
+/* 数字和货币样式 */
+.number-value,
+.currency-value {
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+.currency-value {
+  color: #e34d59;
+}
+
+/* 空值样式 */
+.text-value:empty::before,
+.number-value:empty::before,
+.currency-value:empty::before,
+.date-value:empty::before {
+  content: '--';
+  color: #c8c9cc;
+}
 </style>