@ebiz/designer-components 0.1.0 → 0.1.2

package/src/views/StatisticDemo.vue

@@ -1,191 +1,191 @@
-<template>
-  <div class="statistic-demo-container">
-    <h1>统计数值组件示例</h1>
-    
-    <section>
-      <h2>基础用法</h2>
-      <div class="demo-row">
-        <ebiz-statistic
-          title="Total Assets"
-          :value="82.76"
-          :decimalPlaces="2"
-          unit="%"
-        />
-      </div>
-    </section>
-    
-    <section>
-      <h2>趋势不同的组件</h2>
-      <div class="demo-row">
-        <ebiz-statistic
-          title="上升趋势"
-          :value="82.76"
-          :decimalPlaces="2"
-          unit="%"
-          trend="increase"
-          trendPlacement="left"
-          class="demo-item"
-        />
-        
-        <ebiz-statistic
-          title="下降趋势"
-          :value="82.76"
-          :decimalPlaces="2"
-          unit="%"
-          trend="decrease"
-          trendPlacement="right"
-          class="demo-item"
-        />
-      </div>
-    </section>
-    
-    <section>
-      <h2>颜色</h2>
-      <div class="demo-row">
-        <ebiz-statistic
-          title="默认颜色"
-          :value="82.76"
-          :decimalPlaces="2"
-          unit="%"
-          class="demo-item"
-        />
-        
-        <ebiz-statistic
-          title="自定义颜色"
-          :value="82.76"
-          :decimalPlaces="2"
-          unit="%"
-          color="red"
-          class="demo-item"
-        />
-        
-        <ebiz-statistic
-          title="自定义颜色"
-          :value="82.76"
-          :decimalPlaces="2"
-          unit="%"
-          color="green"
-          class="demo-item"
-        />
-      </div>
-    </section>
-    
-    <section>
-      <h2>前缀后缀</h2>
-      <div class="demo-row">
-        <ebiz-statistic
-          title="带前缀"
-          :value="56.32"
-          :decimalPlaces="2"
-          unit="%"
-          prefix="$"
-          class="demo-item"
-        />
-        
-        <ebiz-statistic
-          title="带后缀"
-          :value="176059"
-          suffix="元"
-          class="demo-item"
-        />
-      </div>
-    </section>
-    
-    <section>
-      <h2>数值动画</h2>
-      <div class="demo-row">
-        <ebiz-statistic
-          ref="animationStatistic"
-          title="动画效果"
-          :value="82.76"
-          :decimalPlaces="2"
-          unit="%"
-          :animation="{ duration: 2000 }"
-          class="demo-item"
-        />
-        
-        <button @click="startAnimation" class="demo-button">开始动画</button>
-      </div>
-    </section>
-    
-    <section>
-      <h2>加载中</h2>
-      <div class="demo-row">
-        <ebiz-statistic
-          title="加载中状态"
-          :value="82.76"
-          :decimalPlaces="2"
-          unit="%"
-          :loading="true"
-          class="demo-item"
-        />
-      </div>
-    </section>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { EbizStatistic } from '../index.js';
-
-const animationStatistic = ref(null);
-
-const startAnimation = () => {
-  if (animationStatistic.value) {
-    animationStatistic.value.start();
-  }
-};
-</script>
-
-<style scoped>
-.statistic-demo-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-section {
-  margin-bottom: 40px;
-}
-
-h1 {
-  font-size: 24px;
-  margin-bottom: 24px;
-}
-
-h2 {
-  font-size: 20px;
-  margin-bottom: 16px;
-  border-bottom: 1px solid #eee;
-  padding-bottom: 8px;
-}
-
-.demo-row {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0 -12px;
-}
-
-.demo-item {
-  flex: 0 0 calc(33.33% - 24px);
-  margin: 0 12px 24px;
-  background-color: #f5f5f5;
-  padding: 16px;
-  border-radius: 4px;
-  min-width: 200px;
-}
-
-.demo-button {
-  margin-top: 20px;
-  padding: 8px 16px;
-  background-color: #0052d9;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.demo-button:hover {
-  background-color: #003cab;
-}
+<template>
+  <div class="statistic-demo-container">
+    <h1>统计数值组件示例</h1>
+    
+    <section>
+      <h2>基础用法</h2>
+      <div class="demo-row">
+        <ebiz-statistic
+          title="Total Assets"
+          :value="82.76"
+          :decimalPlaces="2"
+          unit="%"
+        />
+      </div>
+    </section>
+    
+    <section>
+      <h2>趋势不同的组件</h2>
+      <div class="demo-row">
+        <ebiz-statistic
+          title="上升趋势"
+          :value="82.76"
+          :decimalPlaces="2"
+          unit="%"
+          trend="increase"
+          trendPlacement="left"
+          class="demo-item"
+        />
+        
+        <ebiz-statistic
+          title="下降趋势"
+          :value="82.76"
+          :decimalPlaces="2"
+          unit="%"
+          trend="decrease"
+          trendPlacement="right"
+          class="demo-item"
+        />
+      </div>
+    </section>
+    
+    <section>
+      <h2>颜色</h2>
+      <div class="demo-row">
+        <ebiz-statistic
+          title="默认颜色"
+          :value="82.76"
+          :decimalPlaces="2"
+          unit="%"
+          class="demo-item"
+        />
+        
+        <ebiz-statistic
+          title="自定义颜色"
+          :value="82.76"
+          :decimalPlaces="2"
+          unit="%"
+          color="red"
+          class="demo-item"
+        />
+        
+        <ebiz-statistic
+          title="自定义颜色"
+          :value="82.76"
+          :decimalPlaces="2"
+          unit="%"
+          color="green"
+          class="demo-item"
+        />
+      </div>
+    </section>
+    
+    <section>
+      <h2>前缀后缀</h2>
+      <div class="demo-row">
+        <ebiz-statistic
+          title="带前缀"
+          :value="56.32"
+          :decimalPlaces="2"
+          unit="%"
+          prefix="$"
+          class="demo-item"
+        />
+        
+        <ebiz-statistic
+          title="带后缀"
+          :value="176059"
+          suffix="元"
+          class="demo-item"
+        />
+      </div>
+    </section>
+    
+    <section>
+      <h2>数值动画</h2>
+      <div class="demo-row">
+        <ebiz-statistic
+          ref="animationStatistic"
+          title="动画效果"
+          :value="82.76"
+          :decimalPlaces="2"
+          unit="%"
+          :animation="{ duration: 2000 }"
+          class="demo-item"
+        />
+        
+        <button @click="startAnimation" class="demo-button">开始动画</button>
+      </div>
+    </section>
+    
+    <section>
+      <h2>加载中</h2>
+      <div class="demo-row">
+        <ebiz-statistic
+          title="加载中状态"
+          :value="82.76"
+          :decimalPlaces="2"
+          unit="%"
+          :loading="true"
+          class="demo-item"
+        />
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizStatistic } from '../index.js';
+
+const animationStatistic = ref(null);
+
+const startAnimation = () => {
+  if (animationStatistic.value) {
+    animationStatistic.value.start();
+  }
+};
+</script>
+
+<style scoped>
+.statistic-demo-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+section {
+  margin-bottom: 40px;
+}
+
+h1 {
+  font-size: 24px;
+  margin-bottom: 24px;
+}
+
+h2 {
+  font-size: 20px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 8px;
+}
+
+.demo-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -12px;
+}
+
+.demo-item {
+  flex: 0 0 calc(33.33% - 24px);
+  margin: 0 12px 24px;
+  background-color: #f5f5f5;
+  padding: 16px;
+  border-radius: 4px;
+  min-width: 200px;
+}
+
+.demo-button {
+  margin-top: 20px;
+  padding: 8px 16px;
+  background-color: #0052d9;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.demo-button:hover {
+  background-color: #003cab;
+}
 </style> 

package/src/views/SwitchDemo.vue

@@ -1,80 +1,80 @@
-<template>
-  <div class="switch-demo">
-    <h1>TDesign Switch 组件示例</h1>
-    
-    <h2>基础开关</h2>
-    <div class="demo-section">
-      <EbizSwitch v-model="checked1" />
-      <div class="status">当前状态: {{ checked1 ? '开' : '关' }}</div>
-    </div>
-    
-    <h2>不同尺寸</h2>
-    <div class="demo-section">
-      <EbizSwitch v-model="checked2" size="small" />
-      <EbizSwitch v-model="checked2" size="medium" />
-      <EbizSwitch v-model="checked2" size="large" />
-    </div>
-    
-    <h2>不同主题</h2>
-    <div class="demo-section">
-      <EbizSwitch v-model="checked3" theme="primary" />
-      <EbizSwitch v-model="checked3" theme="success" />
-      <EbizSwitch v-model="checked3" theme="warning" />
-      <EbizSwitch v-model="checked3" theme="danger" />
-    </div>
-    
-    <h2>加载状态</h2>
-    <div class="demo-section">
-      <EbizSwitch v-model="checked4" loading />
-    </div>
-    
-    <h2>禁用状态</h2>
-    <div class="demo-section">
-      <EbizSwitch v-model="checked5" disabled />
-      <EbizSwitch v-model="checked6" disabled />
-    </div>
-    
-    <h2>带标签</h2>
-    <div class="demo-section">
-      <EbizSwitch v-model="checked7" :label="['开', '关']" />
-    </div>
-    
-    <h2>自定义值</h2>
-    <div class="demo-section">
-      <EbizSwitch v-model="customChecked" :customValue="['开启', '关闭']" />
-      <div class="status">当前值: {{ customChecked }}</div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { EbizSwitch } from '../index.js';
-
-const checked1 = ref(true);
-const checked2 = ref(true);
-const checked3 = ref(true);
-const checked4 = ref(true);
-const checked5 = ref(true);
-const checked6 = ref(false);
-const checked7 = ref(true);
-const customChecked = ref('开启');
-</script>
-
-<style lang="less" scoped>
-.switch-demo {
-  padding: 20px;
-  
-  .demo-section {
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-  
-  .status {
-    margin-left: 16px;
-    color: #666;
-  }
-}
+<template>
+  <div class="switch-demo">
+    <h1>TDesign Switch 组件示例</h1>
+    
+    <h2>基础开关</h2>
+    <div class="demo-section">
+      <EbizSwitch v-model="checked1" />
+      <div class="status">当前状态: {{ checked1 ? '开' : '关' }}</div>
+    </div>
+    
+    <h2>不同尺寸</h2>
+    <div class="demo-section">
+      <EbizSwitch v-model="checked2" size="small" />
+      <EbizSwitch v-model="checked2" size="medium" />
+      <EbizSwitch v-model="checked2" size="large" />
+    </div>
+    
+    <h2>不同主题</h2>
+    <div class="demo-section">
+      <EbizSwitch v-model="checked3" theme="primary" />
+      <EbizSwitch v-model="checked3" theme="success" />
+      <EbizSwitch v-model="checked3" theme="warning" />
+      <EbizSwitch v-model="checked3" theme="danger" />
+    </div>
+    
+    <h2>加载状态</h2>
+    <div class="demo-section">
+      <EbizSwitch v-model="checked4" loading />
+    </div>
+    
+    <h2>禁用状态</h2>
+    <div class="demo-section">
+      <EbizSwitch v-model="checked5" disabled />
+      <EbizSwitch v-model="checked6" disabled />
+    </div>
+    
+    <h2>带标签</h2>
+    <div class="demo-section">
+      <EbizSwitch v-model="checked7" :label="['开', '关']" />
+    </div>
+    
+    <h2>自定义值</h2>
+    <div class="demo-section">
+      <EbizSwitch v-model="customChecked" :customValue="['开启', '关闭']" />
+      <div class="status">当前值: {{ customChecked }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizSwitch } from '../index.js';
+
+const checked1 = ref(true);
+const checked2 = ref(true);
+const checked3 = ref(true);
+const checked4 = ref(true);
+const checked5 = ref(true);
+const checked6 = ref(false);
+const checked7 = ref(true);
+const customChecked = ref('开启');
+</script>
+
+<style lang="less" scoped>
+.switch-demo {
+  padding: 20px;
+  
+  .demo-section {
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+  
+  .status {
+    margin-left: 16px;
+    color: #666;
+  }
+}
 </style> 

package/src/views/Table.vue

@@ -1,20 +1,20 @@
-<template>
-  <div>
-    <ebiz-route-breadcrumb />
-    <my-table />
-  </div>
-</template>
-
-<script>
-import { MyTable } from '@/index.js'
-
-export default {
-  name: 'TableDemo',
-  components: {
-    MyTable
-  }
-}
-</script>
-
-<style scoped>
+<template>
+  <div>
+    <ebiz-route-breadcrumb />
+    <my-table />
+  </div>
+</template>
+
+<script>
+import { MyTable } from '@/index.js'
+
+export default {
+  name: 'TableDemo',
+  components: {
+    MyTable
+  }
+}
+</script>
+
+<style scoped>
 </style>