@ebiz/designer-components 0.0.18-tj.1

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> 

package/src/components/EbizSwiper.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <t-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>
+    </t-swiper>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+// import { Swiper as TSwiper } 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> 

package/src/components/EbizTabHeader.vue

@@ -0,0 +1,149 @@
+<template>
+  <tiny-tabs v-model="showTab" :tab-style="props.tabStyle" activeColor="#5e7ce0" @click="tabChange">
+    <tiny-tab-item 
+      activeColor="#5e7ce0" 
+      v-for="i in showTabs" 
+      :key="i.value" 
+      :title="i.label" 
+      :name="i.value.toString()"
+    />
+  </tiny-tabs>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
+import { dataService } from "../index.js"
+
+const emit = defineEmits(['tabChange'])
+
+const props = defineProps({
+  // 远程请求的配置
+  apiConfig: {
+    type: Object,
+    default: () => ({
+      apiId: null,
+      apiType: 'MULTIPLE_DATA_SEARCH',
+    }),
+  },
+  // 不使用用远程的tabs
+  tabs: {
+    type: Array,
+    default: () => [],
+  },
+  // tab名称对应的字段
+  labelKey: {
+    type: String,
+    default: 'name'
+  },
+  // tab value对应的字段
+  valueKey: {
+    type: String,
+    default: 'id'
+  },
+  // 标签卡样式
+  tabStyle: {
+    type: String,
+    default: ''
+  },
+  // 展示值
+  showTab: {
+    type: String,
+    default: ''
+  },
+  // 绑定值
+  currentTab: {
+    type: String,
+    default: ''
+  },
+})
+
+// 远程请求的tabs
+const remoteTabs = ref([])
+
+// 展示的tabs
+const showTabs = computed(() => {
+    console.log(props.tabs,66, 110)
+  if (remoteTabs.value.length) return [{ label: '全部', value: '0' }, ...remoteTabs.value];
+  if (props.tabs.length) return props.tabs
+  return [{ label: '全部', value: '0' }]
+})
+
+// 展示的值
+const showTab = computed(() => {
+  if (props.showTab) return props.showTab
+  return props.currentTab || '0'
+})
+
+// methods
+const tabChange = (e) => {
+  emit('tabChange', e.name === '0' ? '' : e.name)
+}
+
+// init
+watch(() => showTabs.value, () => {
+  tabChange({ name: showTab.value })
+})
+
+watch(() => props.apiConfig, (nVal) => {
+  if (!nVal?.apiId) return
+  dataService.fetch({ }, { apiId: nVal.apiId, apiType: 'MULTIPLE_DATA_SEARCH' }).then(res => {
+    remoteTabs.value = (res.data ?? []).map(i => ({
+      label: i[props.labelKey],
+      value: i[props.valueKey],
+    }))
+  })
+}, { immediate: true })
+</script>
+
+<style scoped lang="less">
+:deep(.tiny-tabs__item.is-active) {
+  color: #5e7ce0;
+}
+
+:deep(.tiny-tabs__active-bar) {
+  background: #5e7ce0;
+  height: 4px;
+}
+
+:deep(.tiny-tabs__content) {
+  display: none;
+}
+
+:deep(.tiny-tabs__nav) {
+  border-bottom: 1px solid #e8e8e8;
+  margin-bottom: 0;
+}
+
+:deep(.tiny-tabs__item) {
+  padding: 0 20px;
+  height: 40px;
+  line-height: 40px;
+  font-size: 14px;
+  color: #606266;
+  transition: color 0.3s;
+  cursor: pointer;
+
+  &:hover {
+    color: #5e7ce0;
+  }
+}
+
+:deep(.tiny-tabs__header) {
+  margin-bottom: 0;
+  overflow: hidden;
+  position: relative;
+  white-space: nowrap;
+}
+
+:deep(.tiny-tabs__nav-wrap) {
+  overflow: hidden;
+  position: relative;
+  white-space: nowrap;
+}
+
+:deep(.tiny-tabs__nav-scroll) {
+  overflow: hidden;
+  white-space: nowrap;
+}
+</style> 

package/src/components/EbizTitle.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="ebiz-title">
+        <!-- <div class="color-block" :style="{ backgroundColor: color, width: `${blockWidth}px` }"></div> -->
+        <!-- <div class="title-text">
+            <slot name="title">
+                {{ displayTitle }}
+            </slot>
+        </div> -->
+    </div>
+</template>
+
+<script setup>
+
+// import { defineProps, computed } from 'vue';
+
+// /**
+//  * EbizTitle 组件 - 带有色块的标题组件
+//  * 支持自定义标题文本、色块颜色和色块宽度
+//  * 包含一个按钮，点击时在标题后添加点号并触发事件
+//  * 支持通过插槽自定义标题内容
+//  */
+// const props = defineProps({
+//     /**
+//      * 标题文本 (当不使用插槽时显示)
+//      */
+//     title: {
+//         type: String,
+//         default: '标题'
+//     },
+//     /**
+//      * 色块颜色，支持任何有效的CSS颜色值
+//      */
+//     color: {
+//         type: String,
+//         default: '#1890ff'
+//     },
+//     /**
+//      * 色块宽度，单位为像素
+//      */
+//     blockWidth: {
+//         type: Number,
+//         default: 10
+//     }
+// });
+
+// // // 计算属性：根据点号数量生成显示的标题
+// const displayTitle = computed(() => {
+//     return props.title;
+// });
+</script>
+
+<style scoped>
+.ebiz-title {
+    display: flex;
+    align-items: center;
+    margin: 16px 0;
+}
+
+.color-block {
+    height: 20px;
+    border-radius: 2px;
+    margin-right: 8px;
+}
+
+.title-text {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 500;
+    color: #333;
+    line-height: 1.5;
+    margin-right: 8px;
+}
+
+.title-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    background-color: #f0f0f0;
+    border: 1px solid #d9d9d9;
+    cursor: pointer;
+    font-size: 14px;
+    transition: all 0.3s;
+}
+
+.title-button:hover {
+    background-color: #e6f7ff;
+    border-color: #1890ff;
+    color: #1890ff;
+}
+</style>

package/src/components/Form.vue

@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <slot name="content"></slot>
+    </div>
+</template>
+
+<script setup>
+
+import { ref, defineProps, onMounted } from "vue";
+
+const props = defineProps({
+    apiConfig: {
+        type: Object,
+        default: {
+            apiId: null,
+            apiType: ''
+        }
+    }
+})
+
+onMounted(() => {
+    console.log("FormContainer component has been mounted.");
+    // You can add any initialization logic here
+    // 加载数据
+
+});
+</script>