@ebiz/designer-components 0.0.18-tj.1

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> 

package/src/components/TdesignCalendar/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <t-calendar
+    :cell-click="cellClick"
+    :controller="controller"
+    :cell-append="cellAppend"
+    :cell-data="cellData"
+    :firstDayOfWeek="firstDayOfWeek"
+    :format="format"
+    :head-mode="headMode"
+    :is-full-screen="isFullScreen"
+    :multiple="multiple"
+    :month="month"
+    :mode="mode"
+    :month-change="monthChange"
+    :render-cell="renderCell"
+    :theme="theme"
+    :value="value"
+    :year="year"
+    @cell-click="handleCellClick"
+    @cell-double-click="handleCellDoubleClick"
+    @cell-right-click="handleCellRightClick"
+    @month-change="handleMonthChange"
+  >
+    <template v-if="$slots.head" #head>
+      <slot name="head"></slot>
+    </template>
+    <template v-if="$slots.cellAppend" #cellAppend="slotProps">
+      <slot name="cellAppend" v-bind="slotProps"></slot>
+    </template>
+    <template v-if="$slots.cell" #cell="slotProps">
+      <slot name="cell" v-bind="slotProps"></slot>
+    </template>
+    <template v-if="$slots.month" #month>
+      <slot name="month"></slot>
+    </template>
+    <template v-if="$slots.year" #year>
+      <slot name="year"></slot>
+    </template>
+    <template v-if="$slots.control" #control>
+      <slot name="control"></slot>
+    </template>
+  </t-calendar>
+</template>
+
+<script>
+import { Calendar as TCalendar } from 'tdesign-vue-next'
+
+export default {
+  name: 'TdesignCalendar',
+  components: {
+    't-calendar': TCalendar
+  },
+  props: {
+    cellAppend: {
+      type: Function,
+      default: null
+    },
+    cellClick: {
+      type: Function,
+      default: null
+    },
+    cellData: {
+      type: Function,
+      default: null
+    },
+    controller: {
+      type: Object,
+      default: () => ({ visible: true })
+    },
+    firstDayOfWeek: {
+      type: Number,
+      default: 1,
+      validator: (val) => [1, 2, 3, 4, 5, 6, 7].includes(val)
+    },
+    format: {
+      type: String,
+      default: undefined
+    },
+    headMode: {
+      type: String,
+      default: 'month-only',
+      validator: (val) => ['month-only', 'year-month'].includes(val)
+    },
+    isFullScreen: {
+      type: Boolean,
+      default: true
+    },
+    mode: {
+      type: String,
+      default: 'month',
+      validator: (val) => ['month', 'year'].includes(val)
+    },
+    month: {
+      type: Number,
+      default: undefined
+    },
+    monthChange: {
+      type: Function,
+      default: null
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    renderCell: {
+      type: Function,
+      default: null
+    },
+    theme: {
+      type: String,
+      default: 'full',
+      validator: (val) => ['full', 'card'].includes(val)
+    },
+    value: {
+      type: [String, Number, Array, Date],
+      default: null
+    },
+    year: {
+      type: Number,
+      default: undefined
+    }
+  },
+  emits: ['cell-click', 'cell-double-click', 'cell-right-click', 'month-change'],
+  methods: {
+    handleCellClick(options) {
+      this.$emit('cell-click', options)
+    },
+    handleCellDoubleClick(options) {
+      this.$emit('cell-double-click', options)
+    },
+    handleCellRightClick(options) {
+      this.$emit('cell-right-click', options)
+    },
+    handleMonthChange(options) {
+      this.$emit('month-change', options)
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 可以在这里添加自定义样式 */
+</style> 

package/src/components/TdesignCard.vue

@@ -0,0 +1,196 @@
+<template>
+  <td-card
+    :actions="actions"
+    :avatar="avatar"
+    :bordered="bordered"
+    :cover="cover"
+    :description="description"
+    :footer="footer"
+    :header="header"
+    :headerBordered="headerBordered"
+    :hoverShadow="hoverShadow"
+    :loading="loading"
+    :loadingProps="loadingProps"
+    :shadow="shadow"
+    :size="size"
+    :status="status"
+    :subtitle="subtitle"
+    :theme="theme"
+    :title="title"
+    @click="handleClick"
+  >
+    <!-- 操作区域插槽 -->
+    <template v-if="$slots.actions" #actions>
+      <slot name="actions"></slot>
+    </template>
+    
+    <!-- 头像插槽 -->
+    <template v-if="$slots.avatar" #avatar>
+      <slot name="avatar"></slot>
+    </template>
+    
+    <!-- 内容插槽 -->
+    <template v-if="$slots.content" #content>
+      <slot name="content"></slot>
+    </template>
+    
+    <!-- 封面图插槽 -->
+    <template v-if="$slots.cover" #cover>
+      <slot name="cover"></slot>
+    </template>
+    
+    <!-- 默认内容插槽 -->
+    <template v-if="$slots.default" #default>
+      <slot name="default"></slot>
+    </template>
+    
+    <!-- 描述文案插槽 -->
+    <template v-if="$slots.description" #description>
+      <slot name="description"></slot>
+    </template>
+    
+    <!-- 底部内容插槽 -->
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer"></slot>
+    </template>
+    
+    <!-- 顶部内容插槽 -->
+    <template v-if="$slots.header" #header>
+      <slot name="header"></slot>
+    </template>
+    
+    <!-- 加载状态插槽 -->
+    <template v-if="$slots.loading" #loading>
+      <slot name="loading"></slot>
+    </template>
+    
+    <!-- 副标题插槽 -->
+    <template v-if="$slots.subtitle" #subtitle>
+      <slot name="subtitle"></slot>
+    </template>
+    
+    <!-- 标题插槽 -->
+    <template v-if="$slots.title" #title>
+      <slot name="title"></slot>
+    </template>
+    
+    <!-- 默认插槽 -->
+    <slot></slot>
+  </td-card>
+</template>
+
+<script>
+export default {
+  name: "EbizTdesignCard"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Card as TdCard } from 'tdesign-vue-next';
+
+defineProps({
+  // 卡片操作区
+  actions: {
+    type: [String, Object, Function],
+    default: ''
+  },
+  // 卡片中的用户头像，仅在海报风格的卡片中有效
+  avatar: {
+    type: [String, Object, Function],
+    default: ''
+  },
+  // 是否有边框
+  bordered: {
+    type: Boolean,
+    default: true
+  },
+  // 卡片内容
+  content: {
+    type: [String, Object, Function],
+    default: ''
+  },
+  // 卡片封面图
+  cover: {
+    type: [String, Object, Function],
+    default: ''
+  },
+  // 卡片描述文案
+  description: {
+    type: [String, Object, Function],
+    default: ''
+  },
+  // 卡片底部内容，可完全自定义
+  footer: {
+    type: [String, Object, Function],
+    default: ''
+  },
+  // 卡片顶部内容，优先级高于其他所有元素
+  header: {
+    type: [String, Object, Function],
+    default: ''
+  },
+  // 头部是否带分割线，仅在有header时有效
+  headerBordered: {
+    type: Boolean,
+    default: false
+  },
+  // hover时是否有阴影
+  hoverShadow: {
+    type: Boolean,
+    default: false
+  },
+  // 加载状态
+  loading: {
+    type: [Boolean, Object, Function],
+    default: false
+  },
+  // 透传加载组件(Loading)全部属性
+  loadingProps: {
+    type: Object,
+    default: () => ({})
+  },
+  // 是否显示卡片阴影
+  shadow: {
+    type: Boolean,
+    default: false
+  },
+  // 尺寸
+  size: {
+    type: String,
+    default: 'medium',
+    validator: (val) => ['medium', 'small'].includes(val)
+  },
+  // 卡片状态内容，仅在操作区域不在顶部时有效（即 theme=poster2）
+  status: {
+    type: String,
+    default: ''
+  },
+  // 卡片副标题
+  subtitle: {
+    type: [String, Object, Function],
+    default: ''
+  },
+  // 卡片风格
+  theme: {
+    type: String,
+    default: 'normal',
+    validator: (val) => ['normal', 'poster1', 'poster2'].includes(val)
+  },
+  // 卡片标题
+  title: {
+    type: [String, Object, Function],
+    default: ''
+  }
+});
+
+const emit = defineEmits(['click']);
+
+const handleClick = (e) => {
+  emit('click', e);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/TdesignCollapse.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="tdesign-collapse-wrapper">
+    <t-collapse
+      v-model="innerValue"
+      :default-value="defaultValue"
+      :borderless="borderless"
+      :default-expand-all="defaultExpandAll"
+      :disabled="disabled"
+      :expand-icon="expandIcon"
+      :expand-icon-placement="expandIconPlacement"
+      :expand-mutex="expandMutex"
+      :expand-on-row-click="expandOnRowClick"
+      @change="handleChange"
+    >
+      <slot></slot>
+    </t-collapse>
+  </div>
+</template>
+
+<script>
+import { Collapse as TCollapse } from 'tdesign-vue-next';
+import { defineComponent, toRefs, computed, watch } from 'vue';
+
+export default defineComponent({
+  name: 'TdesignCollapse',
+  components: {
+    't-collapse': TCollapse,
+  },
+  props: {
+    /**
+     * 是否为无边框模式
+     */
+    borderless: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 默认是否展开全部
+     */
+    defaultExpandAll: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 是否禁用面板展开/收起操作
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 展开图标。值为 undefined 或 false 则不显示展开图标；值为 true 显示默认图标
+     */
+    expandIcon: {
+      type: [Boolean, Function],
+      default: true,
+    },
+    /**
+     * 展开图标的位置，左侧或右侧
+     */
+    expandIconPlacement: {
+      type: String,
+      default: 'left',
+      validator(val) {
+        return ['left', 'right'].includes(val);
+      },
+    },
+    /**
+     * 每个面板互斥展开，每次只展开一个面板
+     */
+    expandMutex: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 是否允许点击整行标题展开面板
+     */
+    expandOnRowClick: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * 展开的面板集合
+     */
+    value: {
+      type: Array,
+      default: () => [],
+    },
+    /**
+     * 展开的面板集合，用于v-model双向绑定
+     */
+    modelValue: {
+      type: Array,
+      default: () => [],
+    },
+    /**
+     * 展开的面板集合，非受控属性
+     */
+    defaultValue: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  emits: ['change', 'update:value', 'update:modelValue'],
+  setup(props, { emit }) {
+    const { value, modelValue } = toRefs(props);
+
+    // 处理v-model和传统value的计算属性
+    const innerValue = computed({
+      get() {
+        // 优先使用v-model绑定的值
+        return modelValue.value.length > 0 ? modelValue.value : value.value;
+      },
+      set(val) {
+        emit('update:value', val);
+        emit('update:modelValue', val);
+      },
+    });
+
+    // 监听外部值变化，同步到内部状态
+    watch([value, modelValue], () => {
+      // 这里不需要额外处理，因为计算属性会自动更新
+    });
+
+    // 切换面板时触发，返回变化的值
+    const handleChange = (val) => {
+      innerValue.value = val;
+      emit('change', val);
+    };
+
+    return {
+      innerValue,
+      handleChange,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.tdesign-collapse-wrapper {
+  width: 100%;
+}
+</style>