@ebiz/designer-components 0.0.18-beta.1

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> 

package/src/components/EbizSwitch.vue

@@ -0,0 +1,86 @@
+<template>
+    <t-switch
+        :modelValue="modelValue"
+        :customValue="customValue"
+        :disabled="disabled"
+        :label="label"
+        :loading="loading"
+        :size="size"
+        :theme="theme"
+        @change="handleChange"
+        @click="handleClick"
+    >
+        <!-- 标签插槽 -->
+        <template v-if="$slots.label" #label>
+            <slot name="label"></slot>
+        </template>
+    </t-switch>
+</template>
+
+<script>
+export default {
+    name: "EbizSwitch"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Switch as TSwitch } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 开关值，支持v-model
+    modelValue: {
+        type: [String, Number, Boolean],
+        default: false
+    },
+    // 自定义值
+    customValue: {
+        type: Array,
+        default: () => [true, false]
+    },
+    // 是否禁用组件
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // 开关标签
+    label: {
+        type: [String, Array, Function],
+        default: undefined
+    },
+    // 是否处于加载中状态
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    // 开关尺寸
+    size: {
+        type: String,
+        default: 'medium',
+        validator: (val) => ['small', 'medium', 'large'].includes(val)
+    },
+    // 开关风格
+    theme: {
+        type: String,
+        default: 'primary',
+        validator: (val) => ['primary', 'success', 'warning', 'danger'].includes(val)
+    }
+});
+
+const emit = defineEmits(['update:modelValue', 'change', 'click']);
+
+// 值变化事件
+const handleChange = (value, context) => {
+    emit('update:modelValue', value);
+    emit('change', value, context);
+};
+
+// 点击事件
+const handleClick = (e) => {
+    emit('click', e);
+};
+</script>
+
+<style lang="less" 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,92 @@
+<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>

package/src/components/Home.vue

@@ -0,0 +1,8 @@
+<div class="comp-item" @click="$router.push('/tdesign-button')">
+  <div class="comp-item-name">TDesign 按钮</div>
+  <div class="comp-item-desc">TDesign Button 组件封装</div>
+</div>
+<div class="comp-item" @click="$router.push('/tdesign-icon')">
+  <div class="comp-item-name">TDesign 图标</div>
+  <div class="comp-item-desc">TDesign Icon 组件封装</div>
+</div> 

package/src/components/MyComponent.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="my-component">
+    <t-input v-model="value" placeholder="请输入内容" @update:modelValue="change"></t-input>
+    <t-button size="small">查询数据</t-button>
+  </div>
+</template>
+
+<script>
+import { Input as TInput } from 'tdesign-vue-next';
+import { ref } from "vue";
+
+export default {
+  name: 'MyComponent',
+  components: {
+    TInput
+  },
+  props: {
+    modelValue: {
+      type: String
+    },
+    name: String
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const value = ref(props.modelValue)
+
+    const change = (val) => {
+      value.value = val
+      console.log(val)
+      emit('update:modelValue', value.value)
+    }
+
+    return {
+      value,
+      change
+    }
+  }
+}
+</script>

package/src/components/Table.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="my-component">
+    {{ value }}
+    <t-table row-key="key" :data="tableData" :columns="columns"></t-table>
+    <slot></slot>
+    <t-button @click="changeValue"> 修改数据</t-button>
+  </div>
+</template>
+
+<script setup>
+
+import { ref, defineEmits, defineProps, watch } from "vue";
+
+const props = defineProps(['modelValue', 'dataSource']);
+
+const tableData = ref([
+  { id: 1, name: '张三', age: 18 },
+  { id: 2, name: '李四', age: 20 },
+  { id: 3, name: '王五', age: 22 },
+]);
+const columns = [
+  { colKey: 'id', title: 'ID', width: '100' },
+  { colKey: 'name', title: '姓名', ellipsis: true },
+  { colKey: 'age', title: '年龄' },
+];
+
+const emit = defineEmits("update:modelValue");
+
+watch(() => props.dataSource, (val) => {
+  version.value = 0;
+  changeValue()
+})
+const value = ref(props.modelValue)
+
+const change = (val) => {
+  value.value = val
+  emit('update:modelValue', value.value)
+}
+
+const version = ref(0);
+const changeValue = () => {
+  change(props.dataSource + ' : ' + (version.value++))
+}
+
+</script>

package/src/components/TdesignButton.vue

@@ -0,0 +1,130 @@
+<template>
+    <t-button 
+        :block="block"
+        :content="content"
+        :disabled="disabled"
+        :ghost="ghost"
+        :href="href"
+        :loading="loading"
+        :shape="shape"
+        :size="size"
+        :tag="tag"
+        :theme="theme"
+        :type="type"
+        :variant="variant"
+        @click="handleClick"
+    >
+        <!-- 图标插槽 -->
+        <template v-if="$slots.icon" #icon>
+            <slot name="icon"></slot>
+        </template>
+        
+        <!-- 后缀插槽 -->
+        <template v-if="$slots.suffix" #suffix>
+            <slot name="suffix"></slot>
+        </template>
+        
+        <!-- 加载中插槽 -->
+        <template v-if="$slots.loading" #loading>
+            <slot name="loading"></slot>
+        </template>
+        
+        <!-- 内容插槽 -->
+        <template v-if="$slots.content" #content>
+            <slot name="content"></slot>
+        </template>
+        
+        <!-- 默认插槽 -->
+        <slot>{{ content }}</slot>
+    </t-button>
+</template>
+
+<script>
+export default {
+    name: "EbizTdesignButton"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Button as TButton } from 'tdesign-vue-next';
+
+defineProps({
+    // 是否为块级元素
+    block: {
+        type: Boolean,
+        default: false
+    },
+    // 按钮内容
+    content: {
+        type: String,
+        default: ''
+    },
+    // 禁用状态
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // 是否为幽灵按钮
+    ghost: {
+        type: Boolean,
+        default: false
+    },
+    // 跳转链接
+    href: {
+        type: String,
+        default: ''
+    },
+    // 是否显示为加载状态
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    // 按钮形状
+    shape: {
+        type: String,
+        default: 'rectangle',
+        validator: (val) => ['rectangle', 'square', 'round', 'circle'].includes(val)
+    },
+    // 组件尺寸
+    size: {
+        type: String,
+        default: 'medium',
+        validator: (val) => ['extra-small', 'small', 'medium', 'large'].includes(val)
+    },
+    // 渲染按钮的HTML标签
+    tag: {
+        type: String,
+        default: 'button',
+        validator: (val) => ['button', 'a', 'div'].includes(val)
+    },
+    // 组件风格
+    theme: {
+        type: String,
+        default: 'default',
+        validator: (val) => ['default', 'primary', 'danger', 'warning', 'success'].includes(val)
+    },
+    // 按钮类型
+    type: {
+        type: String,
+        default: 'button',
+        validator: (val) => ['submit', 'reset', 'button'].includes(val)
+    },
+    // 按钮形式
+    variant: {
+        type: String,
+        default: 'base',
+        validator: (val) => ['base', 'outline', 'dashed', 'text'].includes(val)
+    }
+});
+
+const emit = defineEmits(['click']);
+
+const handleClick = (e) => {
+    emit('click', e);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style>