@ebiz/designer-components 0.1.1 → 0.1.4

package/src/views/TdesignButton.vue

@@ -1,191 +1,191 @@
-<template>
-  <div class="tdesign-button-demo">
-    <h2>TDesign 按钮示例</h2>
-    
-    <div class="section">
-      <h3>主题样式</h3>
-      <div class="button-row">
-        <ebiz-tdesign-button content="默认按钮" />
-        <ebiz-tdesign-button content="主要按钮" theme="primary" />
-        <ebiz-tdesign-button content="成功按钮" theme="success" />
-        <ebiz-tdesign-button content="警告按钮" theme="warning" />
-        <ebiz-tdesign-button content="危险按钮" theme="danger" />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>按钮变体</h3>
-      <div class="button-row">
-        <ebiz-tdesign-button content="基础按钮" theme="primary" variant="base" />
-        <ebiz-tdesign-button content="描边按钮" theme="primary" variant="outline" />
-        <ebiz-tdesign-button content="虚线按钮" theme="primary" variant="dashed" />
-        <ebiz-tdesign-button content="文字按钮" theme="primary" variant="text" />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>按钮尺寸</h3>
-      <div class="button-row">
-        <ebiz-tdesign-button content="大型按钮" theme="primary" size="large" />
-        <ebiz-tdesign-button content="中型按钮" theme="primary" size="medium" />
-        <ebiz-tdesign-button content="小型按钮" theme="primary" size="small" />
-        <ebiz-tdesign-button content="超小按钮" theme="primary" size="extra-small" />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>按钮形状</h3>
-      <div class="button-row">
-        <ebiz-tdesign-button content="长方形" theme="primary" shape="rectangle" />
-        <ebiz-tdesign-button content="圆角长方形" theme="primary" shape="round" />
-        <ebiz-tdesign-button content="正方形" theme="primary" shape="square">
-          <template #icon>
-            <span style="font-size: 16px;">+</span>
-          </template>
-        </ebiz-tdesign-button>
-        <ebiz-tdesign-button theme="primary" shape="circle">
-          <template #icon>
-            <span style="font-size: 16px;">+</span>
-          </template>
-        </ebiz-tdesign-button>
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>图标按钮</h3>
-      <div class="button-row">
-        <ebiz-tdesign-button content="带图标按钮" theme="primary">
-          <template #icon>
-            <span style="font-size: 16px;">★</span>
-          </template>
-        </ebiz-tdesign-button>
-        
-        <ebiz-tdesign-button content="图标在右侧" theme="primary">
-          <template #suffix>
-            <span style="font-size: 16px;">→</span>
-          </template>
-        </ebiz-tdesign-button>
-        
-        <ebiz-tdesign-button theme="primary">
-          <template #icon>
-            <span style="font-size: 16px;">★</span>
-          </template>
-          添加收藏
-        </ebiz-tdesign-button>
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>特殊状态</h3>
-      <div class="button-row">
-        <ebiz-tdesign-button content="加载中按钮" theme="primary" loading />
-        <ebiz-tdesign-button content="加载中自定义" theme="primary" loading>
-          <template #loading>
-            <span>加载中...</span>
-          </template>
-        </ebiz-tdesign-button>
-        <ebiz-tdesign-button content="禁用按钮" theme="primary" disabled />
-        <ebiz-tdesign-button content="幽灵按钮" theme="primary" ghost />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>块级按钮</h3>
-      <div class="button-container">
-        <ebiz-tdesign-button content="块级按钮" theme="primary" block />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>链接按钮</h3>
-      <div class="button-row">
-        <ebiz-tdesign-button content="链接按钮" theme="primary" href="https://www.example.com" />
-        <ebiz-tdesign-button content="新窗口打开" theme="primary" href="https://www.example.com" tag="a" />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>自定义内容插槽</h3>
-      <div class="button-row">
-        <ebiz-tdesign-button theme="primary">
-          <template #content>
-            <div style="display: flex; align-items: center; gap: 5px;">
-              <span style="font-size: 16px;">⚙️</span>
-              <span>自定义内容</span>
-            </div>
-          </template>
-        </ebiz-tdesign-button>
-        
-        <ebiz-tdesign-button theme="primary">
-          <span style="color: yellow;">默认插槽内容</span>
-        </ebiz-tdesign-button>
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>事件处理</h3>
-      <div class="button-row">
-        <ebiz-tdesign-button 
-          content="点击事件" 
-          theme="primary" 
-          @click="handleButtonClick"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { EbizTdesignButton } from '../index.js'
-
-export default {
-  name: 'TdesignButtonDemo',
-  components: {
-    EbizTdesignButton
-  },
-  methods: {
-    handleButtonClick(_e) {
-      alert('按钮被点击了！')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.tdesign-button-demo {
-  padding: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.section {
-  margin-bottom: 30px;
-  border-bottom: 1px solid #eee;
-  padding-bottom: 20px;
-}
-
-h2 {
-  margin-bottom: 20px;
-  font-size: 24px;
-  color: #0052d9;
-}
-
-h3 {
-  margin-bottom: 12px;
-  font-size: 18px;
-  color: #333;
-}
-
-.button-row {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 16px;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-.button-container {
-  margin-bottom: 16px;
-  width: 100%;
-}
+<template>
+  <div class="tdesign-button-demo">
+    <h2>TDesign 按钮示例</h2>
+    
+    <div class="section">
+      <h3>主题样式</h3>
+      <div class="button-row">
+        <ebiz-tdesign-button content="默认按钮" />
+        <ebiz-tdesign-button content="主要按钮" theme="primary" />
+        <ebiz-tdesign-button content="成功按钮" theme="success" />
+        <ebiz-tdesign-button content="警告按钮" theme="warning" />
+        <ebiz-tdesign-button content="危险按钮" theme="danger" />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>按钮变体</h3>
+      <div class="button-row">
+        <ebiz-tdesign-button content="基础按钮" theme="primary" variant="base" />
+        <ebiz-tdesign-button content="描边按钮" theme="primary" variant="outline" />
+        <ebiz-tdesign-button content="虚线按钮" theme="primary" variant="dashed" />
+        <ebiz-tdesign-button content="文字按钮" theme="primary" variant="text" />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>按钮尺寸</h3>
+      <div class="button-row">
+        <ebiz-tdesign-button content="大型按钮" theme="primary" size="large" />
+        <ebiz-tdesign-button content="中型按钮" theme="primary" size="medium" />
+        <ebiz-tdesign-button content="小型按钮" theme="primary" size="small" />
+        <ebiz-tdesign-button content="超小按钮" theme="primary" size="extra-small" />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>按钮形状</h3>
+      <div class="button-row">
+        <ebiz-tdesign-button content="长方形" theme="primary" shape="rectangle" />
+        <ebiz-tdesign-button content="圆角长方形" theme="primary" shape="round" />
+        <ebiz-tdesign-button content="正方形" theme="primary" shape="square">
+          <template #icon>
+            <span style="font-size: 16px;">+</span>
+          </template>
+        </ebiz-tdesign-button>
+        <ebiz-tdesign-button theme="primary" shape="circle">
+          <template #icon>
+            <span style="font-size: 16px;">+</span>
+          </template>
+        </ebiz-tdesign-button>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>图标按钮</h3>
+      <div class="button-row">
+        <ebiz-tdesign-button content="带图标按钮" theme="primary">
+          <template #icon>
+            <span style="font-size: 16px;">★</span>
+          </template>
+        </ebiz-tdesign-button>
+        
+        <ebiz-tdesign-button content="图标在右侧" theme="primary">
+          <template #suffix>
+            <span style="font-size: 16px;">→</span>
+          </template>
+        </ebiz-tdesign-button>
+        
+        <ebiz-tdesign-button theme="primary">
+          <template #icon>
+            <span style="font-size: 16px;">★</span>
+          </template>
+          添加收藏
+        </ebiz-tdesign-button>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>特殊状态</h3>
+      <div class="button-row">
+        <ebiz-tdesign-button content="加载中按钮" theme="primary" loading />
+        <ebiz-tdesign-button content="加载中自定义" theme="primary" loading>
+          <template #loading>
+            <span>加载中...</span>
+          </template>
+        </ebiz-tdesign-button>
+        <ebiz-tdesign-button content="禁用按钮" theme="primary" disabled />
+        <ebiz-tdesign-button content="幽灵按钮" theme="primary" ghost />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>块级按钮</h3>
+      <div class="button-container">
+        <ebiz-tdesign-button content="块级按钮" theme="primary" block />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>链接按钮</h3>
+      <div class="button-row">
+        <ebiz-tdesign-button content="链接按钮" theme="primary" href="https://www.example.com" />
+        <ebiz-tdesign-button content="新窗口打开" theme="primary" href="https://www.example.com" tag="a" />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>自定义内容插槽</h3>
+      <div class="button-row">
+        <ebiz-tdesign-button theme="primary">
+          <template #content>
+            <div style="display: flex; align-items: center; gap: 5px;">
+              <span style="font-size: 16px;">⚙️</span>
+              <span>自定义内容</span>
+            </div>
+          </template>
+        </ebiz-tdesign-button>
+        
+        <ebiz-tdesign-button theme="primary">
+          <span style="color: yellow;">默认插槽内容</span>
+        </ebiz-tdesign-button>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>事件处理</h3>
+      <div class="button-row">
+        <ebiz-tdesign-button 
+          content="点击事件" 
+          theme="primary" 
+          @click="handleButtonClick"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { EbizTdesignButton } from '../index.js'
+
+export default {
+  name: 'TdesignButtonDemo',
+  components: {
+    EbizTdesignButton
+  },
+  methods: {
+    handleButtonClick(_e) {
+      alert('按钮被点击了！')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tdesign-button-demo {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.section {
+  margin-bottom: 30px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 20px;
+}
+
+h2 {
+  margin-bottom: 20px;
+  font-size: 24px;
+  color: #0052d9;
+}
+
+h3 {
+  margin-bottom: 12px;
+  font-size: 18px;
+  color: #333;
+}
+
+.button-row {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.button-container {
+  margin-bottom: 16px;
+  width: 100%;
+}
 </style> 

package/src/views/TdesignCalendar.vue

@@ -1,95 +1,95 @@
-<template>
-  <div class="calendar-demo">
-    <h1>TDesign 日历组件示例</h1>
-    
-    <div class="demo-section">
-      <h2>1. 基础日历</h2>
-      <tdesign-calendar />
-    </div>
-    
-    <div class="demo-section">
-      <h2>2. 卡片模式</h2>
-      <tdesign-calendar theme="card" />
-    </div>
-    
-    <div class="demo-section">
-      <h2>3. 年份模式</h2>
-      <tdesign-calendar mode="year" />
-    </div>
-    
-    <div class="demo-section">
-      <h2>4. 自定义内容</h2>
-      <tdesign-calendar :cell-data="getCellData" />
-    </div>
-    
-    <div class="demo-section">
-      <h2>5. 多选模式</h2>
-      <tdesign-calendar multiple :value="['2023-05-01', '2023-05-15']" />
-    </div>
-  </div>
-</template>
-
-<script>
-import { TdesignCalendar } from '../index.js'
-
-export default {
-  name: 'TdesignCalendarDemo',
-  components: {
-    TdesignCalendar
-  },
-  data() {
-    return {
-      // 演示数据
-      events: [
-        { date: new Date(2023, 4, 1), content: '劳动节', type: 'holiday' },
-        { date: new Date(2023, 4, 5), content: '项目启动', type: 'work' },
-        { date: new Date(2023, 4, 15), content: '阶段评审', type: 'work' },
-        { date: new Date(2023, 4, 20), content: '团队建设', type: 'team' },
-      ]
-    }
-  },
-  methods: {
-    // 自定义单元格数据方法
-    getCellData(date) {
-      const formattedDate = new Date(date.year, date.month, date.day)
-      const event = this.events.find(e => 
-        e.date.getFullYear() === formattedDate.getFullYear() &&
-        e.date.getMonth() === formattedDate.getMonth() &&
-        e.date.getDate() === formattedDate.getDate()
-      )
-      
-      if (event) {
-        return {
-          content: event.content,
-          type: event.type
-        }
-      }
-      return {}
-    }
-  }
-}
-</script>
-
-<style scoped>
-.calendar-demo {
-  padding: 20px;
-}
-
-.demo-section {
-  margin-bottom: 40px;
-  border: 1px solid #eaeaea;
-  border-radius: 8px;
-  padding: 20px;
-}
-
-h1 {
-  margin-bottom: 30px;
-  color: #333;
-}
-
-h2 {
-  margin-bottom: 15px;
-  color: #666;
-  font-size: 18px;
-}
+<template>
+  <div class="calendar-demo">
+    <h1>TDesign 日历组件示例</h1>
+    
+    <div class="demo-section">
+      <h2>1. 基础日历</h2>
+      <tdesign-calendar />
+    </div>
+    
+    <div class="demo-section">
+      <h2>2. 卡片模式</h2>
+      <tdesign-calendar theme="card" />
+    </div>
+    
+    <div class="demo-section">
+      <h2>3. 年份模式</h2>
+      <tdesign-calendar mode="year" />
+    </div>
+    
+    <div class="demo-section">
+      <h2>4. 自定义内容</h2>
+      <tdesign-calendar :cell-data="getCellData" />
+    </div>
+    
+    <div class="demo-section">
+      <h2>5. 多选模式</h2>
+      <tdesign-calendar multiple :value="['2023-05-01', '2023-05-15']" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { TdesignCalendar } from '../index.js'
+
+export default {
+  name: 'TdesignCalendarDemo',
+  components: {
+    TdesignCalendar
+  },
+  data() {
+    return {
+      // 演示数据
+      events: [
+        { date: new Date(2023, 4, 1), content: '劳动节', type: 'holiday' },
+        { date: new Date(2023, 4, 5), content: '项目启动', type: 'work' },
+        { date: new Date(2023, 4, 15), content: '阶段评审', type: 'work' },
+        { date: new Date(2023, 4, 20), content: '团队建设', type: 'team' },
+      ]
+    }
+  },
+  methods: {
+    // 自定义单元格数据方法
+    getCellData(date) {
+      const formattedDate = new Date(date.year, date.month, date.day)
+      const event = this.events.find(e => 
+        e.date.getFullYear() === formattedDate.getFullYear() &&
+        e.date.getMonth() === formattedDate.getMonth() &&
+        e.date.getDate() === formattedDate.getDate()
+      )
+      
+      if (event) {
+        return {
+          content: event.content,
+          type: event.type
+        }
+      }
+      return {}
+    }
+  }
+}
+</script>
+
+<style scoped>
+.calendar-demo {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 40px;
+  border: 1px solid #eaeaea;
+  border-radius: 8px;
+  padding: 20px;
+}
+
+h1 {
+  margin-bottom: 30px;
+  color: #333;
+}
+
+h2 {
+  margin-bottom: 15px;
+  color: #666;
+  font-size: 18px;
+}
 </style>