@ebiz/designer-components 0.0.18-kzy.3 → 0.0.18-kzy.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.0.18-kzy.3",
+  "version": "0.0.18-kzy.4",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/apiService/simpleDataService.js

@@ -59,7 +59,10 @@ axiosInstance.interceptors.response.use(
       return data.data
     } else {
       // message.error(data.message || '请求失败');
-      return Promise.reject(new Error(data.message || data.msg || '请求失败'))
+      return Promise.reject({
+        code: data.code,
+        message: data.message || data.msg || '请求失败'
+      })
     }
   },
   (error) => {
@@ -175,7 +178,7 @@ const dataService = {
     }
     params.apiId = apiConfig.apiId
     if (apiConfig.key) {
-      params.key = apiConfig.key
+      params.apiKey = apiConfig.key
     }
 
     const config = { ...defaultConfig, ...restConfig }

package/src/components/Button.vue

@@ -41,7 +41,7 @@ const props = defineProps({
     },
     size: {//'large' | 'medium' | 'small' | 'mini'
         type: String,
-        default: 'medium'
+        default: ''
     },
     apiConfig: {//接口配置
         type: Object,

package/src/components/EbizDetailBlock.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="ebiz-detail-block">
+        <t-row v-for="(item, index) in detailItems" :key="index" class="detail-item">
+            <t-col :span="6" class="label" :style="labelStyle">{{ item.label }}</t-col>
+            <t-col :span="18" class="value" :style="valueStyle">{{ item.value }}</t-col>
+        </t-row>
+    </div>
+</template>
+
+<script lang="js" setup>
+import { computed, toRefs } from 'vue'
+import { Row as TRow, Col as TCol } from 'tdesign-vue-next'
+
+const props = defineProps({
+    model: {
+        type: Object,
+        default: () => { }
+    },
+    labelMap: {
+        type: Object,
+        default: () => { }
+    },
+    gap: {
+        type: [String, Number],
+        default: '0'
+    },
+    labelSize: {
+        type: [String, Number],
+        default: '14'
+    },
+    labelColor: {
+        type: String,
+        default: '#86909C'
+    },
+    valueSize: {
+        type: [String, Number],
+        default: '14'
+    },
+    valueColor: {
+        type: String,
+        default: '#0A0A0A'
+    }
+})
+
+const { model, labelMap, gap, labelSize, labelColor, valueSize, valueColor } = toRefs(props)
+
+const labelStyle = computed(() => ({
+    fontSize: typeof labelSize.value === 'number' ? `${labelSize.value}px` : labelSize.value,
+    color: labelColor.value,
+    marginBottom: typeof gap.value === 'number' ? `${gap.value}px` : gap.value
+}))
+
+const valueStyle = computed(() => ({
+    fontSize: typeof valueSize.value === 'number' ? `${valueSize.value}px` : valueSize.value,
+    color: valueColor.value
+}))
+
+const detailItems = computed(() => {
+    return Object.entries(model.value).map(([key, value]) => ({
+        label: labelMap.value[key] || key,
+        value: value || '--'
+    }))
+})
+</script>
+
+<style scoped>
+.ebiz-detail-block {
+    padding: 16px;
+}
+
+.detail-item {
+    line-height: 32px;
+}
+
+.label {
+    width: 50%;
+}
+
+.value {
+    width: 50%;
+}
+</style>

package/src/components/EbizDialog.vue

@@ -0,0 +1,249 @@
+<template>
+    <t-dialog
+        v-model:visible="dialogVisible"
+        :attach="attach"
+        :body-class="bodyClass"
+        :body-scroll-lock="bodyScrollLock"
+        :cancel-btn="cancelBtn"
+        :class-prefix="classPrefix"
+        :close-btn="closeBtn"
+        :close-on-esc-keydown="closeOnEscKeydown"
+        :close-on-overlay-click="closeOnOverlayClick"
+        :confirm-btn="confirmBtn"
+        :content="content"
+        :default-visible="defaultVisible"
+        :destroy-on-close="destroyOnClose"
+        :dialog-class="dialogClass"
+        :draggable="draggable"
+        :footer="footer"
+        :header="header"
+        :mode="mode"
+        :placement="placement"
+        :prevent-scroll-through="preventScrollThrough"
+        :show-overlay="showOverlay"
+        :top="top"
+        :width="width"
+        :zIndex="zIndex"
+        @cancel="handleCancel"
+        @close="handleClose"
+        @closed="handleClosed"
+        @confirm="handleConfirm"
+        @opened="handleOpened"
+        @overlay-click="handleOverlayClick"
+        @update:visible="handleUpdateVisible"
+    >
+        <!-- 默认插槽 -->
+        <slot></slot>
+        
+        <!-- 页脚插槽 -->
+        <template v-if="$slots.footer" #footer>
+            <slot name="footer"></slot>
+        </template>
+        
+        <!-- 头部插槽 -->
+        <template #header>
+            <slot name="header">{{ title }}</slot>
+        </template>
+    </t-dialog>
+</template>
+
+<script>
+export default {
+    name: "EbizDialog"
+}
+</script>
+
+<script setup>
+import { ref, defineProps, defineEmits, watch } from 'vue';
+import { Dialog as TDialog } from 'tdesign-vue-next';
+
+// 定义组件接收的属性
+const props = defineProps({
+    // 对话框挂载的节点
+    attach: {
+        type: [String, Function, Element],
+        default: 'body'
+    },
+    // 对话框内容的类名
+    bodyClass: {
+        type: String,
+        default: ''
+    },
+    // 是否锁定body滚动
+    bodyScrollLock: {
+        type: Boolean,
+        default: true
+    },
+    // 取消按钮配置
+    cancelBtn: {
+        type: [String, Object, Boolean],
+        default: null
+    },
+    // 类名前缀
+    classPrefix: {
+        type: String,
+        default: 't'
+    },
+    // 关闭按钮配置
+    closeBtn: {
+        type: [String, Object, Boolean],
+        default: true
+    },
+    // 是否支持按ESC键关闭对话框
+    closeOnEscKeydown: {
+        type: Boolean,
+        default: true
+    },
+    // 点击蒙层是否关闭
+    closeOnOverlayClick: {
+        type: Boolean,
+        default: true
+    },
+    // 确认按钮配置
+    confirmBtn: {
+        type: [String, Object, Boolean],
+        default: '确认'
+    },
+    // 对话框内容
+    content: {
+        type: [String, Function],
+        default: ''
+    },
+    // 默认是否显示对话框
+    defaultVisible: {
+        type: Boolean,
+        default: false
+    },
+    // 关闭时是否销毁对话框
+    destroyOnClose: {
+        type: Boolean,
+        default: false
+    },
+    // 对话框样式类
+    dialogClass: {
+        type: String,
+        default: ''
+    },
+    // 是否可拖拽
+    draggable: {
+        type: Boolean,
+        default: false
+    },
+    // 底部内容
+    footer: {
+        type: [Boolean, Function],
+        default: true
+    },
+    // 头部内容
+    header: {
+        type: [Boolean, Function],
+        default: true
+    },
+    // 对话框类型
+    mode: {
+        type: String,
+        default: 'modal',
+        validator: (val) => ['modal', 'modeless', 'full-screen'].includes(val)
+    },
+    // 对话框位置
+    placement: {
+        type: String,
+        default: 'top',
+        validator: (val) => ['top', 'center'].includes(val)
+    },
+    // 防止滚动穿透
+    preventScrollThrough: {
+        type: Boolean,
+        default: true
+    },
+    // 是否显示遮罩层
+    showOverlay: {
+        type: Boolean,
+        default: true
+    },
+    // 对话框标题
+    title: {
+        type: [String, Function],
+        default: ''
+    },
+    // 距离顶部的位置
+    top: {
+        type: [String, Number],
+        default: '15%'
+    },
+    // 对话框可见性
+    visible: {
+        type: Boolean,
+        default: undefined
+    },
+    // 对话框宽度
+    width: {
+        type: [String, Number],
+        default: '500px'
+    },
+    // 对话框层级
+    zIndex: {
+        type: Number,
+        default: 2500
+    }
+});
+
+// 定义组件的事件
+const emit = defineEmits([
+    'cancel', 
+    'close', 
+    'closed',
+    'confirm',
+    'opened',
+    'overlay-click',
+    'update:visible'
+]);
+
+// 内部维护的可见性状态
+const dialogVisible = ref(props.visible !== undefined ? props.visible : props.defaultVisible);
+
+// 监听visible属性变化
+watch(() => props.visible, (newValue) => {
+    dialogVisible.value = newValue;
+});
+
+// 取消按钮点击事件
+const handleCancel = (e) => {
+    emit('cancel', e);
+};
+
+// 关闭事件
+const handleClose = (e) => {
+    emit('close', e);
+};
+
+// 关闭动画结束后触发
+const handleClosed = () => {
+    emit('closed');
+};
+
+// 确认按钮点击事件
+const handleConfirm = (e) => {
+    emit('confirm', e);
+};
+
+// 对话框打开动画结束后触发
+const handleOpened = () => {
+    emit('opened');
+};
+
+// 点击遮罩层触发
+const handleOverlayClick = (context) => {
+    emit('overlay-click', context);
+};
+
+// 可见性变化事件
+const handleUpdateVisible = (visible) => {
+    dialogVisible.value = visible;
+    emit('update:visible', visible);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/EbizPageHeader.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="ebiz-page-header">
+    <div>
+      <div style="display: flex; align-items: center;">
+        <t-breadcrumb>
+          <t-breadcrumb-item :to="{ path: '/' }">
+            <template #icon><t-icon name="home" /></template>首页
+          </t-breadcrumb-item>
+          <t-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
+            <template #icon v-if="item.icon">
+              <t-icon :name="item.icon" />
+            </template>
+            {{ item.title }}
+          </t-breadcrumb-item>
+        </t-breadcrumb>
+      </div>
+      <slot></slot>
+    </div>
+    <div style="display: flex; align-items: center;">
+      <slot name="right"></slot>
+      <div class="help-doc" @click="goToHelp">
+        <t-icon name="chat-bubble-help-filled"></t-icon>
+        <span>帮助文档</span>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { Breadcrumb as TBreadcrumb, BreadcrumbItem as TBreadcrumbItem, Icon as TIcon } from "tdesign-vue-next"
+
+const router = useRouter()
+const route = useRoute()
+
+const breadcrumbList = ref([])
+
+// 计算面包屑导航列表
+const generateBreadcrumb = () => {
+  const matched = route.matched
+  if (!matched.length) return
+
+  const result = []
+  matched.forEach(route => {
+    if (route.meta && route.meta.title) {
+      result.push({
+        title: route.meta.title,
+        icon: route.meta.icon || '',
+        path: route.path
+      })
+    }
+  })
+
+  breadcrumbList.value = result
+}
+
+// 跳转到帮助文档页面
+const goToHelp = () => {
+  router.push(`/help?route=${route.path}`)
+}
+
+// 监听路由变化
+watch(() => route.path, () => {
+  generateBreadcrumb()
+}, { immediate: true })
+
+onMounted(() => {
+  generateBreadcrumb()
+})
+</script>
+
+<style scoped>
+.ebiz-page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.help-doc {
+  display: flex;
+  align-items: center;
+  color: var(--td-brand-color);
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.help-doc:hover {
+  opacity: 0.8;
+}
+
+.help-doc span {
+  margin-left: 4px;
+}
+</style> 

package/src/components/EbizRemoteSelect.vue

@@ -41,7 +41,9 @@ const props = defineProps({
      */
     queryParams: {
         type: Object,
-        default: () => ({})
+        default: () => ({
+            name: ''
+        })
     },
     /**
      * 是否多选
@@ -62,7 +64,7 @@ const props = defineProps({
      */
     clearable: {
         type: Boolean,
-        default: false
+        default: true
     },
     /**
      * 是否禁用
@@ -141,18 +143,18 @@ const focus = () => {
 
 defineExpose({
     focus,
-    selectRef
+    selectRef,
+    options
 });
 
 // 远程搜索处理函数
 const handleRemoteSearch = async (keyword) => {
     loading.value = true;
-    console.log('handleRemoteSearch', keyword);
     try {
         const params = {
             queryParams: {
                 ...queryParams.value,
-                keyword
+                name: keyword
             }
         };
         const res = await dataService.fetch(params, {

package/src/components/EbizTimePicker.vue

@@ -0,0 +1,144 @@
+<template>
+  <t-time-picker
+    v-bind="$attrs"
+    :value="modelValue"
+    :allow-input="allowInput"
+    :clearable="clearable"
+    :disabled="disabled"
+    :disable-time="disableTime"
+    :format="format"
+    :input-props="inputProps"
+    :placeholder="placeholder"
+    :popup-props="popupProps"
+    :size="size"
+    :steps="steps"
+    :range="range"
+    :range-separator="rangeSeparator"
+    :tips="tips"
+    @change="handleChange"
+    @blur="$emit('blur', $event)"
+    @focus="$emit('focus', $event)"
+    @close="$emit('close', $event)"
+    @open="$emit('open', $event)"
+    @dayclick="$emit('dayclick', $event)"
+    @pick="$emit('pick', $event)"
+  >
+    <template v-if="$slots.suffixIcon" #suffixIcon>
+      <slot name="suffixIcon"></slot>
+    </template>
+    <template v-if="$slots.panel" #panel="slotProps">
+      <slot name="panel" v-bind="slotProps"></slot>
+    </template>
+    <template v-if="$slots.prepend" #prepend>
+      <slot name="prepend"></slot>
+    </template>
+    <template v-if="$slots.tips" #tips>
+      <slot name="tips"></slot>
+    </template>
+  </t-time-picker>
+</template>
+
+<script setup>
+import { TimePicker as TTimePicker } from 'tdesign-vue-next';
+import { computed } from 'vue';
+
+const props = defineProps({
+  // 选中值
+  modelValue: {
+    type: [String, Array],
+    default: '',
+  },
+  // 是否允许直接输入时间
+  allowInput: {
+    type: Boolean,
+    default: true,
+  },
+  // 是否允许清除选中值
+  clearable: {
+    type: Boolean,
+    default: true,
+  },
+  // 是否禁用组件
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  // 禁用时间项
+  disableTime: {
+    type: Function,
+    default: null,
+  },
+  // 时间格式
+  format: {
+    type: String,
+    default: 'HH:mm:ss',
+  },
+  // 透传给输入框的属性
+  inputProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  // 输入框占位文本
+  placeholder: {
+    type: String,
+    default: '请选择时间',
+  },
+  // 透传给 popup 组件的属性
+  popupProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  // 尺寸
+  size: {
+    type: String,
+    default: 'medium',
+    validator(val) {
+      return ['small', 'medium', 'large'].includes(val);
+    },
+  },
+  // 时间间隔步数
+  steps: {
+    type: Array,
+    default: () => [1, 1, 1],
+  },
+  // 是否为时间范围选择
+  range: {
+    type: Boolean,
+    default: false,
+  },
+  // 范围分隔符
+  rangeSeparator: {
+    type: String,
+    default: ' - ',
+  },
+  // 提示文本
+  tips: {
+    type: [String, Function],
+    default: '',
+  },
+});
+
+const emit = defineEmits([
+  'update:modelValue',
+  'change',
+  'blur',
+  'focus',
+  'close',
+  'open',
+  'dayclick',
+  'pick',
+]);
+
+// 处理值变更事件
+const handleChange = (value) => {
+  emit('update:modelValue', value);
+  emit('change', value);
+};
+
+</script>
+
+<style>
+.t-time-picker {
+  width: 100%;
+}
+</style>