@ebiz/designer-components 0.0.18 → 0.0.19

package/src/components/EbizRadioGroup.vue

@@ -0,0 +1,84 @@
+<template>
+    <t-radio-group
+        :allowUncheck="allowUncheck"
+        :disabled="disabled"
+        :name="name"
+        :options="options"
+        :size="size"
+        :value="modelValue"
+        :defaultValue="defaultValue"
+        :variant="variant"
+        @change="handleChange"
+    >
+        <!-- 默认插槽 -->
+        <slot></slot>
+    </t-radio-group>
+</template>
+
+<script>
+export default {
+    name: "EbizRadioGroup"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { RadioGroup as TRadioGroup } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 是否允许取消选中
+    allowUncheck: {
+        type: Boolean,
+        default: false
+    },
+    // 是否禁用组件
+    disabled: {
+        type: Boolean,
+        default: undefined
+    },
+    // HTML 元素原生属性
+    name: {
+        type: String,
+        default: ''
+    },
+    // 以配置形式设置子元素
+    options: {
+        type: Array,
+        default: () => []
+    },
+    // 组件尺寸
+    size: {
+        type: String,
+        default: 'medium',
+        validator: (val) => ['small', 'medium', 'large'].includes(val)
+    },
+    // 选中值 (v-model)
+    modelValue: {
+        type: [String, Number, Boolean],
+        default: undefined
+    },
+    // 默认选中值
+    defaultValue: {
+        type: [String, Number, Boolean],
+        default: undefined
+    },
+    // 单选组件按钮形式
+    variant: {
+        type: String,
+        default: 'outline',
+        validator: (val) => ['outline', 'primary-filled', 'default-filled'].includes(val)
+    }
+});
+
+const emit = defineEmits(['change', 'update:modelValue']);
+
+// 选中值变化事件
+const handleChange = (value, context) => {
+    emit('update:modelValue', value);
+    emit('change', value, context);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/EbizRemoteSelect.vue

@@ -1,14 +1,15 @@
 <template>
-    <tiny-select v-model="selectedValue" :options="options" :loading="loading" :remote="true"
-        :remote-method="handleRemoteSearch" :multiple="multiple" :placeholder="placeholder" :clearable="clearable"
-        :disabled="disabled" @change="handleChange" @focus="handleRemoteSearch">
-        <template #prefix>
+    <t-select ref="selectRef" v-model="selectedValue" :options="options" :loading="loading" :filterable="true"
+        @search="handleRemoteSearch" :multiple="multiple" :placeholder="placeholder" :clearable="clearable"
+        :disabled="disabled" :size="size" :empty="emptyText" :popupProps="popupProps" @change="handleChange"
+        @focus="handleFocus" @blur="handleBlur">
+        <template #prefixIcon v-if="$slots.prefix">
             <slot name="prefix"></slot>
         </template>
-        <template #suffix>
+        <template #suffixIcon v-if="$slots.suffix">
             <slot name="suffix"></slot>
         </template>
-    </tiny-select>
+    </t-select>
 </template>
 
 <script>
@@ -19,8 +20,8 @@ export default {
 
 <script setup>
 import { ref, onMounted, toRefs, computed } from 'vue';
-import { Select as TinySelect } from '@opentiny/vue';
-import dataService from "../apiService/simpleDataService";
+import { Select as TSelect } from 'tdesign-vue-next';
+import dataService from '../apiService/simpleDataService';
 
 const props = defineProps({
     /**
@@ -30,6 +31,7 @@ const props = defineProps({
         type: Object,
         required: true,
         default: () => ({
+            key: null,
             apiId: null,
             apiType: ''
         })
@@ -39,7 +41,9 @@ const props = defineProps({
      */
     queryParams: {
         type: Object,
-        default: {}
+        default: () => ({
+            name: ''
+        })
     },
     /**
      * 是否多选
@@ -73,21 +77,54 @@ const props = defineProps({
      * 默认值
      */
     modelValue: {
-        type: [String, Number],
+        type: [String, Number, Array],
         default: ''
     },
+    /**
+     * 选项配置
+     */
     optionsConfig: {
-        labelField: '',//作为label的字段
-        valueField: ''//作为value的字段
+        type: Object,
+        default: () => ({
+            labelField: '',
+            valueField: ''
+        })
+    },
+    /**
+     * 组件尺寸
+     */
+    size: {
+        type: String,
+        default: 'medium',
+        validator: (val) => ['small', 'medium', 'large'].includes(val)
+    },
+    /**
+     * 空数据文本
+     */
+    emptyText: {
+        type: String,
+        default: '暂无数据'
+    },
+    /**
+     * 弹出层配置
+     */
+    popupProps: {
+        type: Object,
+        default: () => ({})
     }
 });
 
 const { modelValue, apiConfig, queryParams } = toRefs(props)
 
-const emit = defineEmits(['update:modelValue', 'change']);
+const emit = defineEmits(['update:modelValue', 'change', 'focus', 'blur']);
 
 // 选中的值
-const selectedValue = computed(() => modelValue.value)
+const selectedValue = computed({
+    get: () => modelValue.value,
+    set: (val) => {
+        emit('update:modelValue', val);
+    }
+});
 
 // 选项列表
 const options = ref([]);
@@ -95,34 +132,69 @@ const options = ref([]);
 // 加载状态
 const loading = ref(false);
 
-// 远程搜索处理函数
-const handleRemoteSearch = async () => {
-    if (options.value?.length > 0) return
+// 获取select组件实例
+const selectRef = ref(null);
+
+// 暴露focus方法
+const focus = () => {
+    selectRef.value?.focus();
+};
 
+defineExpose({
+    focus,
+    selectRef,
+    options
+});
+
+// 远程搜索处理函数
+const handleRemoteSearch = async (keyword) => {
     loading.value = true;
-    if (apiConfig.value.apiId && apiConfig.value.apiType >= 0) {
-        try {
-            const params = {
-                queryParams: queryParams.value
-            };
-            const res = await dataService.fetch(params, { apiId: props.apiConfig.apiId, apiType: 'MULTIPLE_DATA_SEARCH' });
-            options.value = res.data.map(item => ({
-                label: item.label || item.name,
-                value: item.value || item.id
-            }));
-        } catch (error) {
-            console.error('远程搜索失败:', error);
-            options.value = [];
-        } finally {
-            loading.value = false;
-        }
+    try {
+        const params = {
+            queryParams: {
+                ...queryParams.value,
+                name: keyword
+            }
+        };
+        const res = await dataService.fetch(params, {
+            key: props.apiConfig.key,
+            apiId: props.apiConfig.apiId,
+            apiType: 'MULTIPLE_DATA_SEARCH'
+        });
+        const { labelField, valueField } = props.optionsConfig;
+
+        options.value = res.data.map(item => ({
+            ...item,
+            label: labelField ? item[labelField] : (item.label || item.name),
+            value: valueField ? item[valueField] : (item.value || item.id)
+        }));
+    } catch (error) {
+        console.error('远程搜索失败:', error);
+        options.value = [];
+    } finally {
+        loading.value = false;
     }
+
+};
+
+// 处理获取焦点事件
+const handleFocus = (value, context) => {
+    emit('focus', value, context);
+    // 当选项为空时，初始加载数据
+    if (options.value.length === 0) {
+        handleRemoteSearch('');
+    }
+};
+
+// 处理失去焦点事件
+const handleBlur = (value, context) => {
+    emit('blur', value, context);
 };
 
 // 值变化处理函数
-const handleChange = (value) => {
+const handleChange = (value, context) => {
     emit('update:modelValue', value);
-    emit('change', value);
+    emit('change', value, context);
 };
 
 // 组件挂载时，如果有默认值则加载对应的选项
@@ -133,10 +205,17 @@ onMounted(async () => {
             const params = {
                 queryParams: queryParams.value
             };
-            const res = await dataService.fetch(params, { apiId: props.apiConfig.apiId, apiType: 'MULTIPLE_DATA_SEARCH' });
+            const res = await dataService.fetch(params, {
+                key: props.apiConfig.key,
+                apiId: props.apiConfig.apiId,
+                apiType: 'MULTIPLE_DATA_SEARCH'
+            });
+            const { labelField, valueField } = props.optionsConfig;
+
             options.value = res.data.map(item => ({
-                label: item.label || item.name,
-                value: item.value || item.id
+                ...item,
+                label: labelField ? item[labelField] : (item.label || item.name),
+                value: valueField ? item[valueField] : (item.value || item.id)
             }));
         } catch (error) {
             console.error('加载默认选项失败:', error);
@@ -144,12 +223,11 @@ onMounted(async () => {
             loading.value = false;
         }
     }
-
 });
 </script>
 
 <style scoped>
-.tiny-select {
+.t-select {
     width: 100%;
 }
 </style>

package/src/components/EbizSpace.vue

@@ -0,0 +1,101 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { Space } from 'tdesign-vue-next';
+
+/**
+ * EbizSpace 间距组件
+ * 基于 TDesign Space 组件封装
+ * 用于控制相邻组件之间的间距
+ */
+
+const props = defineProps({
+  /**
+   * 对齐方式
+   * @values start/end/center/baseline
+   */
+  align: {
+    type: String,
+    default: '',
+    validator: (val) => ['', 'start', 'end', 'center', 'baseline'].includes(val)
+  },
+  /**
+   * 是否自动换行，仅在 horizontal 时有效
+   */
+  breakLine: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 间距方向
+   * @values vertical/horizontal
+   */
+  direction: {
+    type: String,
+    default: 'horizontal',
+    validator: (val) => ['vertical', 'horizontal'].includes(val)
+  },
+  /**
+   * 分隔符
+   */
+  separator: {
+    type: [String, Object, Function],
+    default: ''
+  },
+  /**
+   * 间距大小
+   * @values small/medium/large 或具体数值
+   */
+  size: {
+    type: [String, Number, Array],
+    default: 'medium',
+    validator: (val) => {
+      if (typeof val === 'string') {
+        return ['small', 'medium', 'large'].includes(val);
+      }
+      return true;
+    }
+  }
+});
+
+defineEmits([]);
+
+const slots = defineSlots();
+
+/**
+ * 计算尺寸大小
+ */
+const sizeMap = {
+  small: '8px',
+  medium: '16px',
+  large: '24px'
+};
+
+const computedSize = computed(() => {
+  if (Array.isArray(props.size)) {
+    return props.size.map(item => {
+      if (typeof item === 'string' && sizeMap[item]) {
+        return sizeMap[item];
+      }
+      return item;
+    });
+  }
+
+  if (typeof props.size === 'string' && sizeMap[props.size]) {
+    return sizeMap[props.size];
+  }
+
+  return props.size;
+});
+</script>
+
+<template>
+  <Space
+    :align="align"
+    :breakLine="breakLine"
+    :direction="direction"
+    :separator="separator"
+    :size="computedSize"
+  >
+    <slot></slot>
+  </Space>
+</template> 

package/src/components/EbizStatistic.vue

@@ -0,0 +1,150 @@
+<template>
+    <t-statistic
+        ref="statisticRef"
+        :animation="animation"
+        :animation-start="animationStart"
+        :color="color"
+        :decimalPlaces="decimalPlaces"
+        :loading="loading"
+        :prefix="prefix"
+        :suffix="suffix"
+        :title="title"
+        :trend="trend"
+        :trend-placement="trendPlacement"
+        :unit="unit"
+        :value="value"
+        @click="handleClick"
+    >
+        <!-- 加载中状态插槽 -->
+        <template v-if="$slots.loading" #loading>
+            <slot name="loading"></slot>
+        </template>
+        
+        <!-- 前缀插槽 -->
+        <template v-if="$slots.prefix" #prefix>
+            <slot name="prefix"></slot>
+        </template>
+        
+        <!-- 后缀插槽 -->
+        <template v-if="$slots.suffix" #suffix>
+            <slot name="suffix"></slot>
+        </template>
+        
+        <!-- 标题插槽 -->
+        <template v-if="$slots.title" #title>
+            <slot name="title"></slot>
+        </template>
+        
+        <!-- 趋势插槽 -->
+        <template v-if="$slots.trend" #trend>
+            <slot name="trend"></slot>
+        </template>
+        
+        <!-- 单位插槽 -->
+        <template v-if="$slots.unit" #unit>
+            <slot name="unit"></slot>
+        </template>
+        
+        <!-- 默认插槽 -->
+        <slot></slot>
+    </t-statistic>
+</template>
+
+<script>
+export default {
+    name: "EbizStatistic"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits, ref, onMounted } from 'vue';
+import { Statistic as TStatistic } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 数值动画配置
+    animation: {
+        type: Object,
+        default: () => ({}),
+    },
+    // 数值动画开始时间，单位：毫秒
+    animationStart: {
+        type: Boolean,
+        default: false,
+    },
+    // 颜色
+    color: {
+        type: String,
+        default: '',
+    },
+    // 小数位数
+    decimalPlaces: {
+        type: Number,
+        default: 0,
+    },
+    // 加载中状态
+    loading: {
+        type: Boolean,
+        default: false,
+    },
+    // 前缀内容
+    prefix: {
+        type: [String, Function],
+        default: '',
+    },
+    // 后缀内容
+    suffix: {
+        type: [String, Function],
+        default: '',
+    },
+    // 数值显示的标题
+    title: {
+        type: [String, Function],
+        default: '',
+    },
+    // 趋势
+    trend: {
+        type: String,
+        default: '',
+        validator: (val) => ['', 'increase', 'decrease'].includes(val)
+    },
+    // 趋势展示位置
+    trendPlacement: {
+        type: String,
+        default: 'left',
+        validator: (val) => ['left', 'right'].includes(val)
+    },
+    // 单位内容
+    unit: {
+        type: [String, Function],
+        default: '',
+    },
+    // 数值
+    value: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const emit = defineEmits(['click']);
+
+// 引用实例，用于调用组件的start方法
+const statisticRef = ref(null);
+
+// 点击事件
+const handleClick = (e) => {
+    emit('click', e);
+};
+
+// 暴露start方法，用于手动开始动画
+defineExpose({
+    start: () => {
+        if (statisticRef.value) {
+            statisticRef.value.start();
+        }
+    }
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/EbizSwiper.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <swiper v-model="innerCurrent" :animation="animation" :autoplay="autoplay" :direction="direction"
+      :duration="duration" :height="height" :interval="interval" :loop="loop" :navigation="navigationConfig"
+      :stop-on-hover="stopOnHover" :theme="theme" @change="handleChange">
+      <slot></slot>
+      <template v-if="$slots.navigation" #navigation>
+        <slot name="navigation"></slot>
+      </template>
+    </swiper>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { Swiper } from 'tdesign-vue-next';
+
+const props = defineProps({
+  // 轮播切换动画效果类型
+  animation: {
+    type: String,
+    default: 'slide',
+    validator: (val) => ['slide', 'fade'].includes(val)
+  },
+  // 是否自动播放
+  autoplay: {
+    type: Boolean,
+    default: true
+  },
+  // 当前轮播在哪一项（下标）
+  current: {
+    type: Number,
+    default: 0
+  },
+  // 默认当前轮播在哪一项（下标）
+  defaultCurrent: {
+    type: Number,
+    default: 0
+  },
+  // 轮播滑动方向
+  direction: {
+    type: String,
+    default: 'horizontal',
+    validator: (val) => ['horizontal', 'vertical'].includes(val)
+  },
+  // 滑动动画时长
+  duration: {
+    type: Number,
+    default: 300
+  },
+  // 当使用垂直方向滚动时的高度
+  height: {
+    type: Number,
+    default: undefined
+  },
+  // 轮播间隔时间
+  interval: {
+    type: Number,
+    default: 5000
+  },
+  // 是否循环播放
+  loop: {
+    type: Boolean,
+    default: true
+  },
+  // 导航器配置
+  navigation: {
+    type: Object,
+    default: () => ({})
+  },
+  // 是否悬浮时停止轮播
+  stopOnHover: {
+    type: Boolean,
+    default: true
+  },
+  // 深色模式和浅色模式
+  theme: {
+    type: String,
+    default: 'light',
+    validator: (val) => ['light', 'dark'].includes(val)
+  }
+});
+
+const emit = defineEmits(['update:current', 'change']);
+
+// 内部current值，支持双向绑定
+const innerCurrent = ref(props.current || props.defaultCurrent);
+
+// 监听props.current的变化
+watch(() => props.current, (newVal) => {
+  if (newVal !== undefined && newVal !== innerCurrent.value) {
+    innerCurrent.value = newVal;
+  }
+});
+
+// 计算导航器配置
+const navigationConfig = computed(() => {
+  if (!props.navigation) return undefined;
+  return props.navigation;
+});
+
+// 变更事件处理
+const handleChange = (index) => {
+  innerCurrent.value = index;
+  emit('update:current', index);
+  emit('change', index);
+};
+</script>
+
+<style scoped>
+.ebiz-swiper-wrapper {
+  width: 100%;
+}
+</style> 

package/src/components/EbizSwiperItem.vue

@@ -0,0 +1,14 @@
+<template>
+  <t-swiper-item>
+    <slot></slot>
+  </t-swiper-item>
+</template>
+
+<script setup>
+import { SwiperItem as TSwiperItem } from 'tdesign-vue-next';
+// 没有需要单独处理的props，直接透传slot到t-swiper-item
+</script>
+
+<style scoped>
+/* 自定义样式可以在这里添加 */
+</style>