@ebiz/designer-components 0.1.21 → 0.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/EbizDetailItem.vue

@@ -0,0 +1,442 @@
+<template>
+  <div 
+    class="ebiz-detail-item"
+    :class="{ 'vertical': layout === 'vertical' }"
+    :style="{ 
+      'min-height': minHeight + 'px',
+      'margin-bottom': gap + 'px'
+    }"
+  >
+    <!-- 字段标签 -->
+    <div 
+      class="field-label" 
+      :style="{ 
+        color: labelColor,
+        'min-width': layout === 'horizontal' ? labelWidth + 'px' : 'auto'
+      }"
+    >
+      {{ label }}
+      <span v-if="required" class="required-mark">*</span>
+    </div>
+    
+    <!-- 字段值 -->
+    <div class="field-value">
+      <!-- 文本类型 -->
+      <span v-if="type === 'text'" class="text-value">
+        {{ displayValue }}
+      </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'" class="date-value">
+        {{ formatDate(displayValue) }}
+      </span>
+      
+      <!-- 状态类型 -->
+      <div v-else-if="type === 'status'" class="status-value">
+        <t-tag 
+          :theme="getStatusTheme(statusValue?.status)"
+          size="small"
+        >
+          {{ statusValue?.text }}
+        </t-tag>
+      </div>
+      
+      <!-- 标签类型 -->
+      <div v-else-if="type === 'tags'" class="tags-value">
+        <t-tag 
+          v-for="tag in tagList" 
+          :key="tag" 
+          size="small"
+          variant="outline"
+          class="tag-item"
+        >
+          {{ tag }}
+        </t-tag>
+      </div>
+      
+      <!-- 链接类型 -->
+      <div v-else-if="type === 'link'" class="link-value" @click="handleLinkClick(linkValue)">
+        {{ linkValue?.text || linkValue?.url }}
+      </div>
+      
+      <!-- 富文本类型 -->
+      <div v-else-if="type === 'html'" class="html-value" v-html="displayValue"></div>
+      
+      <!-- 数字类型 -->
+      <span v-else-if="type === 'number'" class="number-value">
+        {{ formatNumber(displayValue) }}
+      </span>
+      
+      <!-- 货币类型 -->
+      <span v-else-if="type === 'currency'" class="currency-value">
+        {{ formatCurrency(displayValue) }}
+      </span>
+      
+      <!-- 默认文本 -->
+      <span v-else class="text-value">{{ displayValue }}</span>
+    </div>
+    
+    <!-- 字段描述 -->
+    <div v-if="description" class="field-description">
+      {{ description }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineProps, defineEmits } from 'vue'
+import EbizFileList from './EbizFileList.vue'
+
+const props = defineProps({
+  // 字段配置
+  label: {
+    type: String,
+    required: true
+  },
+  type: {
+    type: String,
+    default: 'text',
+    validator: (value) => [
+      'text', 'user', 'file', 'date', 'status', 
+      'tags', 'link', 'html', 'number', 'currency'
+    ].includes(value)
+  },
+  value: {
+    type: [String, Number, Array, Object],
+    default: ''
+  },
+  required: {
+    type: Boolean,
+    default: false
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  
+  // 布局配置
+  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 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 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 handleDownloadFile = (file) => {
+  emits('download-file', file)
+}
+
+const handleUserClick = (user) => {
+  emits('user-click', user)
+}
+
+const handleLinkClick = (link) => {
+  emits('link-click', link)
+}
+</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 {
+  flex-direction: column;
+}
+
+.field-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;
+}
+
+.field-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>