@ebiz/designer-components 0.0.18-beta.1

package/src/components/EbizRadio.vue

@@ -0,0 +1,87 @@
+<template>
+    <t-radio
+        :allowUncheck="allowUncheck"
+        :checked="modelValue"
+        :defaultChecked="defaultChecked"
+        :disabled="disabled"
+        :label="label"
+        :name="name"
+        :readonly="readonly"
+        :value="value"
+        @change="handleChange"
+        @click="handleClick"
+    >
+        <slot>{{ label }}</slot>
+    </t-radio>
+</template>
+
+<script>
+export default {
+    name: "EbizRadio"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Radio as TRadio } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 是否允许取消选中
+    allowUncheck: {
+        type: Boolean,
+        default: false
+    },
+    // 是否选中 (v-model)
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    // 默认是否选中
+    defaultChecked: {
+        type: Boolean,
+        default: false
+    },
+    // 是否禁用组件
+    disabled: {
+        type: Boolean,
+        default: undefined
+    },
+    // 主文案
+    label: {
+        type: String,
+        default: ''
+    },
+    // HTML 元素原生属性
+    name: {
+        type: String,
+        default: ''
+    },
+    // 只读状态
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    // 单选按钮的值
+    value: {
+        type: [String, Number, Boolean],
+        default: undefined
+    }
+});
+
+const emit = defineEmits(['change', 'click', 'update:modelValue']);
+
+// 选中状态变化事件
+const handleChange = (checked, context) => {
+    emit('update:modelValue', checked);
+    emit('change', checked, context);
+};
+
+// 点击事件
+const handleClick = (context) => {
+    emit('click', context);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

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

@@ -0,0 +1,167 @@
+<template>
+    <tiny-select ref="selectRef" 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>
+            <slot name="prefix"></slot>
+        </template>
+        <template #suffix>
+            <slot name="suffix"></slot>
+        </template>
+    </tiny-select>
+</template>
+
+<script>
+export default {
+    name: "EbizRemoteSelect"
+}
+</script>
+
+<script setup>
+import { ref, onMounted, toRefs, computed } from 'vue';
+import { Select as TinySelect } from '@opentiny/vue';
+import dataService from "../apiService/simpleDataService";
+
+const props = defineProps({
+    /**
+     * API配置
+     */
+    apiConfig: {
+        type: Object,
+        required: true,
+        default: () => ({
+            apiId: null,
+            apiType: ''
+        })
+    },
+    /**
+     * 查询参数
+     */
+    queryParams: {
+        type: Object,
+        default: {}
+    },
+    /**
+     * 是否多选
+     */
+    multiple: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 占位符文本
+     */
+    placeholder: {
+        type: String,
+        default: '请选择'
+    },
+    /**
+     * 是否可清空
+     */
+    clearable: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 是否禁用
+     */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 默认值
+     */
+    modelValue: {
+        type: [String, Number],
+        default: ''
+    },
+    optionsConfig: {
+        labelField: '',//作为label的字段
+        valueField: ''//作为value的字段
+    }
+});
+
+const { modelValue, apiConfig, queryParams } = toRefs(props)
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// 选中的值
+const selectedValue = computed(() => modelValue.value)
+
+// 选项列表
+const options = ref([]);
+
+// 加载状态
+const loading = ref(false);
+
+// 获取select组件实例
+const selectRef = ref(null);
+
+// 暴露focus方法
+const focus = () => {
+    selectRef.value?.focus();
+};
+
+defineExpose({
+    focus
+});
+
+// 远程搜索处理函数
+const handleRemoteSearch = async () => {
+    //if (options.value?.length > 0) return
+
+    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;
+        }
+    }
+};
+
+// 值变化处理函数
+const handleChange = (value) => {
+    emit('update:modelValue', value);
+    emit('change', value);
+};
+
+// 组件挂载时，如果有默认值则加载对应的选项
+onMounted(async () => {
+    if (apiConfig.value.apiId && apiConfig.value.apiType >= 0) {
+        loading.value = true;
+        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);
+        } finally {
+            loading.value = false;
+        }
+    }
+
+});
+</script>
+
+<style scoped>
+.tiny-select {
+    width: 100%;
+}
+</style>

package/src/components/EbizRouteBreadcrumb.vue

@@ -0,0 +1,47 @@
+<template>
+  <tiny-breadcrumb>
+    <tiny-breadcrumb-item :to="{ path: '/' }">首页</tiny-breadcrumb-item>
+    <tiny-breadcrumb-item
+      v-for="(item, index) in breadcrumbItems"
+      :key="index"
+      :to="item.path"
+    >
+      {{ item.title }}
+    </tiny-breadcrumb-item>
+  </tiny-breadcrumb>
+</template>
+
+<script>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { TinyBreadcrumb, TinyBreadcrumbItem } from '@opentiny/vue'
+
+export default {
+  name: 'EbizRouteBreadcrumb',
+  components: {
+    TinyBreadcrumb,
+    TinyBreadcrumbItem
+  },
+  setup() {
+    const route = useRoute()
+    
+    const breadcrumbItems = computed(() => {
+      const matched = route.matched.filter(item => item.meta && item.meta.title)
+      return matched.map(item => ({
+        title: item.meta.title,
+        path: item.path
+      }))
+    })
+
+    return {
+      breadcrumbItems
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-breadcrumb {
+  margin: 16px 0;
+}
+</style> 

package/src/components/EbizSelect.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <tiny-select
+      v-model="value3"
+      filterable
+      remote
+      :remote-config="{ autoSearch: true }"
+      :remote-method="remoteMethod3"
+      :loading="loading3"
+      loading-text="Loading..."
+      @change="onChange"
+    >
+      <tiny-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, toRefs} from 'vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
+import request from '@/apiService/simpleDataService';
+const props = defineProps({
+  apiConfig: {
+    type: Object,
+    default: {
+        apiId: null,
+        apiType: ''
+    }
+  }
+})
+const emit = defineEmits(['formSubmitted'])
+
+onMounted(() => {
+  remoteMethod3('')
+})
+
+const loading3 = ref(false)
+const value3 = ref('')
+const options3 = ref([])
+const list = ref([])
+
+{/* const url = ('http://192.168.0.247:9002/api/appdata/select') */}
+
+const { apiConfig } = toRefs(props);
+
+const remoteMethod3 = (query) => {
+  request.fetch({
+    "queryParams":{"name": query}
+  },{
+    apiId: apiConfig.value.apiId,
+  },'/appdata/select',).then((val) => {
+    console.log("val.data11111", val.data)
+    options3.value = val.data.map((item) => {
+      return { value: item.name, label: item.name }
+    })
+    console.log("options3.value", options3.value)
+
+  }).catch((err) => {
+    console.log("err111111", err)
+  })
+}
+const onChange = () => {
+  emit('formSubmitted', value3.value);
+}
+
+
+{/* const url = ('http://localhost:3000/admin/product/getHomeProList') */}
+
+
+{/* onMounted(async() => {
+    // await axios.get(url).then((val) => {
+    //     console.log('val', val.data.data)
+    //     list.value = val.data.data.map((item) => {
+    //         return { value: item.name, label: item.name }
+    //       })
+    // })
+
+
+    //  post请求  参数：  apiId: 372, queryParams: {"type": 1}
+    await axios.post(url, { apiId: params.apiId, queryParams: { type: 1 } }).then((val) => {
+      list.value = val.data.data.map((item) => {
+        return { value: item.name, label: item.name }
+      })
+    })
+
+}) */}
+
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</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/EbizStatsCard.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="ebiz-stats-card" :style="cardStyle">
+        <div class="card-title">{{ title }}</div>
+        <div class="card-value">{{ value }}</div>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, computed } from 'vue';
+
+/**
+ * EbizStatsCard 组件 - 统计数据卡片组件
+ * 支持自定义背景色、标题文本和数值
+ */
+const props = defineProps({
+    /**
+     * 卡片标题
+     */
+    title: {
+        type: String,
+        default: '标题'
+    },
+    /**
+     * 卡片数值
+     */
+    value: {
+        type: [String, Number],
+        default: '0'
+    },
+    /**
+     * 卡片背景色
+     */
+    backgroundColor: {
+        type: String,
+        default: '#f5f5f5'
+    },
+    /**
+     * 卡片边框颜色
+     */
+    borderColor: {
+        type: String,
+        default: '#d9d9d9'
+    },
+    /**
+     * 卡片宽度
+     */
+    width: {
+        type: String,
+        default: '240px'
+    },
+    /**
+     * 卡片高度
+     */
+    height: {
+        type: String,
+        default: '80px'
+    },
+    /**
+     * 卡片边框圆角
+     */
+    borderRadius: {
+        type: String,
+        default: '8px'
+    },
+    /**
+     * 标题颜色
+     */
+    titleColor: {
+        type: String,
+        default: '#333'
+    },
+    /**
+     * 数值颜色
+     */
+    valueColor: {
+        type: String,
+        default: '#000'
+    }
+});
+
+// 计算卡片样式
+const cardStyle = computed(() => {
+    return {
+        backgroundColor: props.backgroundColor,
+        border: `1px solid ${props.borderColor}`,
+        width: props.width,
+        height: props.height,
+        borderRadius: props.borderRadius
+    };
+});
+</script>
+
+<style scoped>
+.ebiz-stats-card {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+    box-sizing: border-box;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.card-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: v-bind('props.titleColor');
+}
+
+.card-value {
+    font-size: 24px;
+    font-weight: bold;
+    color: v-bind('props.valueColor');
+}
+</style>