@ebiz/designer-components 0.1.2 → 0.1.4

package/src/components/EbizStatistic.vue

@@ -1,150 +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>
-/* 自定义样式 */
+<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>