@ebiz/designer-components 0.1.46 → 0.1.47

package/package.json

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

package/src/components/EbizDetailItem.vue

@@ -1,25 +1,31 @@
 <template>
-  <div class="ebiz-detail-item" :class="{ 'vertical': finalLayout === 'vertical' }" :style="{ 
-      'min-height': minHeight + 'px',
-      'margin-bottom': finalGap + 'px'
+  <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="field-label" :style="{ 
-        color: finalLabelColor,
-        'min-width': finalLayout === 'horizontal' ? finalLabelWidth + 'px' : 'auto'
+      <!-- 标签部分 -->
+      <div class="detail-label" :style="{
+        width: finalLayout === 'horizontal' ? `${finalLabelWidth}px` : 'auto',
+        color: finalLabelColor
       }">
-      {{ label }}
-      <span v-if="required" class="required-mark">*</span>
-    </div>
-
-    <!-- 字段值 -->
-    <div class="field-value">
-      <slot name="default" :data="displayValue">
+        {{ label }}
+      </div>
+      
+      <!-- 值部分 -->
+      <div class="detail-value">
         <!-- 文本类型 -->
-        <span v-if="type === 'text'" class="text-value">
-          {{ displayValue }}
+        <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">
@@ -35,65 +41,52 @@
             </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>
-
+        <span v-else-if="type === 'date'">{{ formatDate(value) }}</span>
+        
         <!-- 状态类型 -->
-        <div v-else-if="type === 'status'" class="status-value">
-          <t-tag :theme="getStatusTheme(statusValue?.status)" size="small">
-            {{ statusValue?.text }}
-          </t-tag>
-        </div>
-
+        <t-tag v-else-if="type === 'status'" :theme="getStatusTheme(value)">
+          {{ getStatusText(value) }}
+        </t-tag>
+        
         <!-- 标签类型 -->
         <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>
+          <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>
-
+        
         <!-- 链接类型 -->
-        <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>
-
+        <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 class="text-value">{{ displayValue }}</span>
-      </slot>
-    </div>
-
-    <!-- 字段描述 -->
-    <div v-if="description" class="field-description">
-      {{ description }}
+        <span v-else>{{ value || '-' }}</span>
+        
+        <!-- 描述信息 -->
+        <div v-if="description" class="description">{{ description }}</div>
+      </div>
     </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({
@@ -114,15 +107,42 @@ const props = defineProps({
     type: [String, Number, Array, Object],
     default: ''
   },
-  required: {
-    type: Boolean,
-    default: false
-  },
   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,
@@ -168,6 +188,28 @@ const finalLabelWidth = computed(() => props.labelWidth || detailViewConfig?.lab
 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 : ''
@@ -237,17 +279,65 @@ const getStatusTheme = (status) => {
   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 = (user) => {
-  emits('user-click', user)
+const handleUserClick = () => {
+  emits('user-click', userList.value[0]) // Assuming userList is an array of users
 }
 
-const handleLinkClick = (link) => {
-  emits('link-click', link)
+const handleLinkClick = () => {
+  emits('link-click', linkValue.value)
 }
 </script>
 
@@ -263,11 +353,15 @@ const handleLinkClick = (link) => {
   border-bottom: none;
 }
 
-.ebiz-detail-item.vertical {
+.ebiz-detail-item.vertical-layout {
   flex-direction: column;
 }
 
-.field-label {
+.ebiz-detail-item.horizontal-layout {
+  flex-direction: row;
+}
+
+.detail-label {
   font-size: 14px;
   line-height: 1.5;
   font-weight: 500;
@@ -294,7 +388,7 @@ const handleLinkClick = (link) => {
   min-width: 0;
 }
 
-.field-description {
+.description {
   font-size: 12px;
   color: #999999;
   margin-top: 4px;

package/src/components/EbizDetailView.vue

@@ -2,18 +2,29 @@
   <div class="ebiz-detail-view" v-loading="loading">
     <!-- 正常内容 -->
     <div class="detail-content">
-      <div class="detail-fields" :class="{ 'vertical-layout': layout === 'vertical' }" :style="{
-        'grid-template-columns': `repeat(${columns}, 1fr)`,
-        gap: `${gap}px`
-      }">
-        <slot name="default" :data="finalData">
+      <t-row :gutter="gap" class="detail-fields">
+        <slot name="default" :data="finalData" :wrapItem="wrapItem">
           <!-- 默认内容：根据fields配置或自动生成 -->
           <template v-if="fields.length > 0">
             <template v-for="field in fields" :key="field.key">
-              <slot :name="'detail-item-' + field.key" :data="finalData">
-                <EbizDetailItem :label="field.label" :value="getFieldValue(field.key)" :type="field.type || 'text'"
-                  :required="field.required" :description="field.description" :fileMode="field.fileMode"
-                  :showDownload="field.showDownload" @download-file="handleDownloadFile" @user-click="handleUserClick"
+              <slot :name="'detail-item-' + field.key" :data="finalData" :field="field" :wrapItem="wrapItem">
+                <EbizDetailItem 
+                  :label="field.label" 
+                  :value="getFieldValue(field.key)" 
+                  :type="field.type || 'text'"
+                  :required="field.required" 
+                  :description="field.description" 
+                  :fileMode="field.fileMode"
+                  :showDownload="field.showDownload"
+                  :span="getFieldSpan(field)"
+                  :xs="getFieldResponsiveSpan(field, 'xs')"
+                  :sm="getFieldResponsiveSpan(field, 'sm')"
+                  :md="getFieldResponsiveSpan(field, 'md')"
+                  :lg="getFieldResponsiveSpan(field, 'lg')"
+                  :xl="getFieldResponsiveSpan(field, 'xl')"
+                  :xxl="getFieldResponsiveSpan(field, 'xxl')"
+                  @download-file="handleDownloadFile" 
+                  @user-click="handleUserClick"
                   @link-click="handleLinkClick" />
               </slot>
             </template>
@@ -21,16 +32,22 @@
 
           <!-- 自动生成字段 -->
           <template v-else>
-            <EbizDetailItem v-for="(value, key) in finalData" :key="key" :label="key" :value="value" />
+            <EbizDetailItem 
+              v-for="(value, key) in finalData" 
+              :key="key" 
+              :label="key" 
+              :value="value"
+              :span="getDefaultSpan()" />
           </template>
         </slot>
-      </div>
+      </t-row>
     </div>
   </div>
 </template>
 
 <script setup>
 import { computed, defineProps, defineEmits, ref, watch, onMounted, provide } from 'vue'
+import { Row as TRow } from 'tdesign-vue-next'
 import EbizDetailItem from './EbizDetailItem.vue'
 import { dataService } from '../index'
 
@@ -89,6 +106,19 @@ const props = defineProps({
     default: '#666666'
   },
   
+  // 响应式配置
+  responsive: {
+    type: Object,
+    default: () => ({
+      xs: 1,  // <576px 单列
+      sm: 1,  // ≥576px 单列  
+      md: 2,  // ≥768px 双列
+      lg: 2,  // ≥992px 双列
+      xl: 3,  // ≥1200px 三列
+      xxl: 4  // ≥1400px 四列
+    })
+  },
+  
   // 自动加载
   autoLoad: {
     type: Boolean,
@@ -103,7 +133,6 @@ const loading = ref(false)
 const error = ref('')
 const apiData = ref({})
 
-
 // 计算最终数据源
 const finalData = computed(() => {
   return Object.keys(props.data).length > 0 ? props.data : apiData.value
@@ -118,6 +147,47 @@ const getFieldValue = (key) => {
   return value !== undefined ? value : ''
 }
 
+// 计算字段在24栅格中的span值
+const getFieldSpan = (field) => {
+  if (props.layout === 'vertical') {
+    return 24 // 垂直布局时占满整行
+  }
+  
+  const span = field.span || 1
+  const maxSpan = Math.min(span, props.columns)
+  return Math.floor(24 / props.columns) * maxSpan
+}
+
+// 计算字段在不同断点下的span值
+const getFieldResponsiveSpan = (field, breakpoint) => {
+  if (props.layout === 'vertical') {
+    return 24
+  }
+  
+  // 获取该断点下的列数
+  const columnsAtBreakpoint = props.responsive[breakpoint] || props.columns
+  const span = field.span || 1
+  const maxSpan = Math.min(span, columnsAtBreakpoint)
+  
+  return Math.floor(24 / columnsAtBreakpoint) * maxSpan
+}
+
+// 获取默认span值（用于自动生成字段）
+const getDefaultSpan = () => {
+  if (props.layout === 'vertical') {
+    return 24
+  }
+  return Math.floor(24 / props.columns)
+}
+
+// 包装函数，用于在slot中直接返回EbizDetailItem（因为t-col已在组件内部）
+const wrapItem = (detailItemVnode, spanConfig = {}) => {
+  // 现在EbizDetailItem内部已包含t-col，直接返回vnode即可
+  return detailItemVnode
+}
+
+
+
 // 加载数据
 const loadData = async () => {
   if (!props.apiConfig && !props.fetchUrl) return
@@ -144,11 +214,6 @@ const loadData = async () => {
   }
 }
 
-// 重试加载
-const handleRetry = () => {
-  loadData()
-}
-
 // 事件处理
 const handleDownloadFile = (file) => {
   emits('download-file', file)
@@ -191,7 +256,7 @@ provide('detailViewConfig', {
   layout: props.layout,
   labelWidth: props.labelWidth,
   labelColor: props.labelColor,
-  gap: 0 // 子组件不需要自己的gap，由父组件的网格布局控制
+  gap: 0 // 由t-row的gutter统一管理间距
 })
 
 // 组件挂载时自动加载
@@ -268,29 +333,12 @@ defineExpose({
   color: #333333;
 }
 
-.detail-fields {
-  display: grid;
-  gap: 16px;
-}
-
-.detail-fields.vertical-layout {
-  grid-template-columns: 1fr;
-}
-
-.group-title {
-  grid-column: 1 / -1;
-}
-
-/* 响应式布局 */
+/* 移动端优化已经通过TDesign的响应式断点自动处理 */
 @media (max-width: 768px) {
   .ebiz-detail-view {
     padding: 16px;
   }
   
-  .detail-fields {
-    grid-template-columns: 1fr !important;
-  }
-  
   .group-title-text {
     font-size: 16px;
   }