@ebiz/designer-components 0.0.18-beta.1 → 0.0.18-beta.2

package/src/components/EbizTabHeader.vue

@@ -1,149 +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;
-}
+<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/EbizTabPanel.vue

@@ -0,0 +1,23 @@
+<template>
+  <tab-panel
+    :value="value"
+    :label="label"
+    :disabled="disabled"
+    :removable="removable"
+    :destroyOnHide="destroyOnHide"
+    :draggable="draggable"
+    @remove="handleRemove"
+  >
+    <slot></slot>
+  </tab-panel>
+</template>
+
+<script>
+import { TabPanel } from 'tdesign-vue-next';
+
+export default TabPanel;
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/EbizTabs.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="tdesign-tabs-wrapper">
+    <t-tabs
+      v-model="innerValue"
+      :addable="addable"
+      :disabled="disabled"
+      :placement="placement"
+      :size="size" 
+      :theme="theme"
+      :list="list"
+      :dragSort="dragSort"
+      @add="handleAdd"
+      @change="handleChange"
+      @dragSort="handleDragSort"
+      @remove="handleRemove"
+    >
+      <!-- 添加按钮插槽 -->
+      <template v-if="$slots.action" #action>
+        <slot name="action"></slot>
+      </template>
+      
+      <!-- 直接输出默认插槽内容，这里应该只包含EbizTabPanel -->
+      <slot></slot>
+    </t-tabs>
+  </div>
+</template>
+
+<script>
+import { Tabs as TTabs } from 'tdesign-vue-next';
+import { defineComponent, toRefs, computed, watch } from 'vue';
+
+export default defineComponent({
+  name: 'EbizTabs',
+  components: {
+    't-tabs': TTabs,
+  },
+  props: {
+    // v-model绑定值
+    modelValue: {
+      type: [String, Number],
+    },
+    // 默认值
+    defaultValue: {
+      type: [String, Number],
+    },
+    // 选项卡右侧的操作区域
+    action: {
+      type: [Function, String],
+      default: undefined
+    },
+    // 选项卡是否可增加
+    addable: {
+      type: Boolean,
+      default: false
+    },
+    // 是否禁用选项卡
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 是否开启拖拽调整顺序
+    dragSort: {
+      type: Boolean,
+      default: false
+    },
+    // 选项卡列表
+    list: {
+      type: Array,
+    },
+    // 选项卡位置
+    placement: {
+      type: String,
+      default: 'top',
+      validator: (val) => ['top', 'bottom', 'left', 'right'].includes(val)
+    },
+    // 组件尺寸
+    size: {
+      type: String,
+      default: 'medium',
+      validator: (val) => ['medium', 'large'].includes(val)
+    },
+    // 选项卡风格
+    theme: {
+      type: String,
+      default: 'normal',
+      validator: (val) => ['normal', 'card'].includes(val)
+    }
+  },
+  emits: ['update:modelValue', 'add', 'change', 'dragSort', 'remove'],
+  setup(props, { emit }) {
+    const { modelValue, defaultValue } = toRefs(props);
+    
+    // 内部值计算属性,用于双向绑定
+    const innerValue = computed({
+      get: () => modelValue.value !== undefined ? modelValue.value : defaultValue.value,
+      set: (val) => {
+        emit('update:modelValue', val);
+      }
+    });
+    
+    // 监听modelValue变化
+    watch(modelValue, (newVal) => {
+      if (newVal !== innerValue.value) {
+        innerValue.value = newVal;
+      }
+    });
+    
+    // 添加选项卡事件
+    const handleAdd = (context) => {
+      emit('add', context);
+    };
+    
+    // 选项卡切换事件
+    const handleChange = (value, context) => {
+      emit('change', value, context);
+    };
+    
+    // 拖拽排序事件
+    const handleDragSort = (context) => {
+      emit('dragSort', context);
+    };
+    
+    // 删除选项卡事件
+    const handleRemove = (options) => {
+      emit('remove', options);
+    };
+    
+    return {
+      innerValue,
+      handleAdd,
+      handleChange,
+      handleDragSort,
+      handleRemove
+    };
+  }
+});
+</script>
+
+<style lang="less" scoped>
+.tdesign-tabs-wrapper {
+  width: 100%;
+}
+</style>

package/src/components/EbizTitle.vue

@@ -1,92 +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;
-}
+<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>