@ebiz/designer-components 0.1.80 → 0.1.82

package/src/components/EbizDetailView.vue

@@ -1,356 +1,356 @@
-<template>
-  <div class="ebiz-detail-view" v-loading="loading">
-    <!-- 正常内容 -->
-    <div class="detail-content">
-      <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" :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>
-          </template>
-
-          <!-- 自动生成字段 -->
-          <template v-else>
-            <EbizDetailItem 
-              v-for="(value, key) in finalData" 
-              :key="key" 
-              :label="key" 
-              :value="value"
-              :span="getDefaultSpan()" />
-          </template>
-        </slot>
-      </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'
-
-const props = defineProps({
-  // API配置
-  apiConfig: {
-    type: Object,
-    default: () => ({})
-  },
-  fetchUrl: {
-    type: String,
-    default: undefined
-  },
-  defaultParams: {
-    type: Object,
-    default: () => ({})
-  },
-  dataId:{
-    type: [String, Number],
-    default: undefined
-  },
-  
-  // 数据源（优先级高于API）
-  data: {
-    type: Object,
-    default: () => ({})
-  },
-  
-  // 字段配置
-  fields: {
-    type: Array,
-    default: () => []
-  },
-  
-  // 布局配置
-  columns: {
-    type: Number,
-    default: 2,
-    validator: (value) => value >= 1 && value <= 6
-  },
-  layout: {
-    type: String,
-    default: 'horizontal',
-    validator: (value) => ['horizontal', 'vertical'].includes(value)
-  },
-  gap: {
-    type: Number,
-    default: 16
-  },
-  labelWidth: {
-    type: Number,
-    default: 120
-  },
-  labelColor: {
-    type: String,
-    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,
-    default: true
-  }
-})
-
-const emits = defineEmits(['download-file', 'user-click', 'link-click', 'data-loaded', 'error'])
-
-// 响应式数据
-const loading = ref(false)
-const error = ref('')
-const apiData = ref({})
-
-// 计算最终数据源
-const finalData = computed(() => {
-  return Object.keys(props.data).length > 0 ? props.data : apiData.value
-})
-
-// 获取详情项配置（从插槽中获取）
-const detailItems = ref([])
-
-// 获取字段值
-const getFieldValue = (key) => {
-  const value = finalData.value[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
-  
-  loading.value = true
-  error.value = ''
-  
-  try {
-    const res = await dataService.fetch({
-      queryParams: {
-        ...props.defaultParams,
-        detailId: props.dataId
-      },
-      detailId: props.dataId
-    }, props.apiConfig, props.fetchUrl)
-
-    apiData.value = res
-    emits('data-loaded', apiData.value)
-  } catch (err) {
-    error.value = err.message || '数据加载失败'
-    emits('error', err)
-  } finally {
-    loading.value = false
-  }
-}
-
-// 事件处理
-const handleDownloadFile = (file) => {
-  emits('download-file', file)
-}
-
-const handleUserClick = (user) => {
-  emits('user-click', user)
-}
-
-const handleLinkClick = (link) => {
-  emits('link-click', link)
-}
-
-// 注册详情项
-const registerItem = (item) => {
-  detailItems.value.push(item)
-}
-
-// 注销详情项
-const unregisterItem = (key) => {
-  const index = detailItems.value.findIndex(item => item.key === key)
-  if (index > -1) {
-    detailItems.value.splice(index, 1)
-  }
-}
-
-// 监听API参数变化
-watch(
-  () => [props.apiConfig, props.fetchUrl, props.defaultParams],
-  () => {
-    if (props.autoLoad && (props.apiConfig || props.fetchUrl)) {
-      loadData()
-    }
-  },
-  { deep: true }
-)
-
-// 提供布局配置给子组件
-provide('detailViewConfig', {
-  layout: props.layout,
-  labelWidth: props.labelWidth,
-  labelColor: props.labelColor,
-  gap: 0 // 由t-row的gutter统一管理间距
-})
-
-// 组件挂载时自动加载
-onMounted(() => {
-  if (props.autoLoad && (props.apiConfig || props.fetchUrl)) {
-    loadData()
-  }
-})
-
-// 暴露方法给父组件
-defineExpose({
-  loadData,
-  registerItem,
-  unregisterItem
-})
-</script>
-
-<style scoped>
-.ebiz-detail-view {
-  width: 100%;
-  background: #ffffff;
-  border-radius: 6px;
-  padding: 24px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.empty-state,
-.error-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 60px 20px;
-  color: #999999;
-}
-
-.empty-state p,
-.error-state p {
-  margin: 16px 0;
-  font-size: 16px;
-}
-
-.detail-content {
-  width: 100%;
-}
-
-.detail-group {
-  margin-bottom: 32px;
-}
-
-.detail-group:last-child {
-  margin-bottom: 0;
-}
-
-.group-title {
-  display: flex;
-  align-items: center;
-  margin-bottom: 20px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.group-title-bar {
-  width: 4px;
-  height: 18px;
-  background: #0052d9;
-  margin-right: 12px;
-  border-radius: 2px;
-}
-
-.group-title-text {
-  font-size: 18px;
-  font-weight: 600;
-  color: #333333;
-}
-
-/* 移动端优化已经通过TDesign的响应式断点自动处理 */
-@media (max-width: 768px) {
-  .ebiz-detail-view {
-    padding: 16px;
-  }
-  
-  .group-title-text {
-    font-size: 16px;
-  }
-}
-
-@media (max-width: 480px) {
-  .ebiz-detail-view {
-    padding: 12px;
-  }
-  
-  .detail-group {
-    margin-bottom: 24px;
-  }
-}
+<template>
+  <div class="ebiz-detail-view" v-loading="loading">
+    <!-- 正常内容 -->
+    <div class="detail-content">
+      <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" :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>
+          </template>
+
+          <!-- 自动生成字段 -->
+          <template v-else>
+            <EbizDetailItem 
+              v-for="(value, key) in finalData" 
+              :key="key" 
+              :label="key" 
+              :value="value"
+              :span="getDefaultSpan()" />
+          </template>
+        </slot>
+      </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'
+
+const props = defineProps({
+  // API配置
+  apiConfig: {
+    type: Object,
+    default: () => ({})
+  },
+  fetchUrl: {
+    type: String,
+    default: undefined
+  },
+  defaultParams: {
+    type: Object,
+    default: () => ({})
+  },
+  dataId:{
+    type: [String, Number],
+    default: undefined
+  },
+  
+  // 数据源（优先级高于API）
+  data: {
+    type: Object,
+    default: () => ({})
+  },
+  
+  // 字段配置
+  fields: {
+    type: Array,
+    default: () => []
+  },
+  
+  // 布局配置
+  columns: {
+    type: Number,
+    default: 2,
+    validator: (value) => value >= 1 && value <= 6
+  },
+  layout: {
+    type: String,
+    default: 'horizontal',
+    validator: (value) => ['horizontal', 'vertical'].includes(value)
+  },
+  gap: {
+    type: Number,
+    default: 16
+  },
+  labelWidth: {
+    type: Number,
+    default: 120
+  },
+  labelColor: {
+    type: String,
+    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,
+    default: true
+  }
+})
+
+const emits = defineEmits(['download-file', 'user-click', 'link-click', 'data-loaded', 'error'])
+
+// 响应式数据
+const loading = ref(false)
+const error = ref('')
+const apiData = ref({})
+
+// 计算最终数据源
+const finalData = computed(() => {
+  return Object.keys(props.data).length > 0 ? props.data : apiData.value
+})
+
+// 获取详情项配置（从插槽中获取）
+const detailItems = ref([])
+
+// 获取字段值
+const getFieldValue = (key) => {
+  const value = finalData.value[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
+  
+  loading.value = true
+  error.value = ''
+  
+  try {
+    const res = await dataService.fetch({
+      queryParams: {
+        ...props.defaultParams,
+        detailId: props.dataId
+      },
+      detailId: props.dataId
+    }, props.apiConfig, props.fetchUrl)
+
+    apiData.value = res
+    emits('data-loaded', apiData.value)
+  } catch (err) {
+    error.value = err.message || '数据加载失败'
+    emits('error', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 事件处理
+const handleDownloadFile = (file) => {
+  emits('download-file', file)
+}
+
+const handleUserClick = (user) => {
+  emits('user-click', user)
+}
+
+const handleLinkClick = (link) => {
+  emits('link-click', link)
+}
+
+// 注册详情项
+const registerItem = (item) => {
+  detailItems.value.push(item)
+}
+
+// 注销详情项
+const unregisterItem = (key) => {
+  const index = detailItems.value.findIndex(item => item.key === key)
+  if (index > -1) {
+    detailItems.value.splice(index, 1)
+  }
+}
+
+// 监听API参数变化
+watch(
+  () => [props.apiConfig, props.fetchUrl, props.defaultParams],
+  () => {
+    if (props.autoLoad && (props.apiConfig || props.fetchUrl)) {
+      loadData()
+    }
+  },
+  { deep: true }
+)
+
+// 提供布局配置给子组件
+provide('detailViewConfig', {
+  layout: props.layout,
+  labelWidth: props.labelWidth,
+  labelColor: props.labelColor,
+  gap: 0 // 由t-row的gutter统一管理间距
+})
+
+// 组件挂载时自动加载
+onMounted(() => {
+  if (props.autoLoad && (props.apiConfig || props.fetchUrl)) {
+    loadData()
+  }
+})
+
+// 暴露方法给父组件
+defineExpose({
+  loadData,
+  registerItem,
+  unregisterItem
+})
+</script>
+
+<style scoped>
+.ebiz-detail-view {
+  width: 100%;
+  background: #ffffff;
+  border-radius: 6px;
+  padding: 24px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.empty-state,
+.error-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  color: #999999;
+}
+
+.empty-state p,
+.error-state p {
+  margin: 16px 0;
+  font-size: 16px;
+}
+
+.detail-content {
+  width: 100%;
+}
+
+.detail-group {
+  margin-bottom: 32px;
+}
+
+.detail-group:last-child {
+  margin-bottom: 0;
+}
+
+.group-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.group-title-bar {
+  width: 4px;
+  height: 18px;
+  background: #0052d9;
+  margin-right: 12px;
+  border-radius: 2px;
+}
+
+.group-title-text {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333333;
+}
+
+/* 移动端优化已经通过TDesign的响应式断点自动处理 */
+@media (max-width: 768px) {
+  .ebiz-detail-view {
+    padding: 16px;
+  }
+  
+  .group-title-text {
+    font-size: 16px;
+  }
+}
+
+@media (max-width: 480px) {
+  .ebiz-detail-view {
+    padding: 12px;
+  }
+  
+  .detail-group {
+    margin-bottom: 24px;
+  }
+}
 </style>