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

package/src/components/EbizRouteBreadcrumb.vue

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

@@ -1,101 +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>
+<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/EbizStatistic.vue

@@ -0,0 +1,150 @@
+<template>
+    <t-statistic
+        ref="statisticRef"
+        :animation="animation"
+        :animation-start="animationStart"
+        :color="color"
+        :decimalPlaces="decimalPlaces"
+        :loading="loading"
+        :prefix="prefix"
+        :suffix="suffix"
+        :title="title"
+        :trend="trend"
+        :trend-placement="trendPlacement"
+        :unit="unit"
+        :value="value"
+        @click="handleClick"
+    >
+        <!-- 加载中状态插槽 -->
+        <template v-if="$slots.loading" #loading>
+            <slot name="loading"></slot>
+        </template>
+        
+        <!-- 前缀插槽 -->
+        <template v-if="$slots.prefix" #prefix>
+            <slot name="prefix"></slot>
+        </template>
+        
+        <!-- 后缀插槽 -->
+        <template v-if="$slots.suffix" #suffix>
+            <slot name="suffix"></slot>
+        </template>
+        
+        <!-- 标题插槽 -->
+        <template v-if="$slots.title" #title>
+            <slot name="title"></slot>
+        </template>
+        
+        <!-- 趋势插槽 -->
+        <template v-if="$slots.trend" #trend>
+            <slot name="trend"></slot>
+        </template>
+        
+        <!-- 单位插槽 -->
+        <template v-if="$slots.unit" #unit>
+            <slot name="unit"></slot>
+        </template>
+        
+        <!-- 默认插槽 -->
+        <slot></slot>
+    </t-statistic>
+</template>
+
+<script>
+export default {
+    name: "EbizStatistic"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits, ref, onMounted } from 'vue';
+import { Statistic as TStatistic } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 数值动画配置
+    animation: {
+        type: Object,
+        default: () => ({}),
+    },
+    // 数值动画开始时间，单位：毫秒
+    animationStart: {
+        type: Boolean,
+        default: false,
+    },
+    // 颜色
+    color: {
+        type: String,
+        default: '',
+    },
+    // 小数位数
+    decimalPlaces: {
+        type: Number,
+        default: 0,
+    },
+    // 加载中状态
+    loading: {
+        type: Boolean,
+        default: false,
+    },
+    // 前缀内容
+    prefix: {
+        type: [String, Function],
+        default: '',
+    },
+    // 后缀内容
+    suffix: {
+        type: [String, Function],
+        default: '',
+    },
+    // 数值显示的标题
+    title: {
+        type: [String, Function],
+        default: '',
+    },
+    // 趋势
+    trend: {
+        type: String,
+        default: '',
+        validator: (val) => ['', 'increase', 'decrease'].includes(val)
+    },
+    // 趋势展示位置
+    trendPlacement: {
+        type: String,
+        default: 'left',
+        validator: (val) => ['left', 'right'].includes(val)
+    },
+    // 单位内容
+    unit: {
+        type: [String, Function],
+        default: '',
+    },
+    // 数值
+    value: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const emit = defineEmits(['click']);
+
+// 引用实例，用于调用组件的start方法
+const statisticRef = ref(null);
+
+// 点击事件
+const handleClick = (e) => {
+    emit('click', e);
+};
+
+// 暴露start方法，用于手动开始动画
+defineExpose({
+    start: () => {
+        if (statisticRef.value) {
+            statisticRef.value.start();
+        }
+    }
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/EbizStatsCard.vue

@@ -1,114 +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');
-}
+<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>