@ebiz/designer-components 0.0.18-tj.1

package/src/views/TdesignButton.vue

@@ -0,0 +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%;
+}
+</style> 

package/src/views/TdesignCalendar.vue

@@ -0,0 +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;
+}
+</style> 

package/src/views/TdesignCard.vue

@@ -0,0 +1,297 @@
+<template>
+  <div class="tdesign-card-demo">
+    <h2>TDesign 卡片示例</h2>
+    
+    <div class="section">
+      <h3>标准卡片</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card 
+          title="标准卡片" 
+          subtitle="副标题"
+          description="卡片描述信息"
+        >
+          卡片内容区域，可以是文字、图片等形式信息内容。
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>无边框卡片</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card 
+          title="无边框卡片" 
+          :bordered="false"
+        >
+          无边框的卡片样式，适合在有背景的容器中使用。
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>带阴影卡片</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card 
+          title="阴影卡片" 
+          :shadow="true"
+        >
+          带阴影的卡片，用于强调内容。
+        </ebiz-tdesign-card>
+        
+        <ebiz-tdesign-card 
+          title="悬浮阴影卡片" 
+          :hoverShadow="true"
+        >
+          悬浮时显示阴影，鼠标放上来查看效果。
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>卡片尺寸</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card 
+          title="中型卡片" 
+          size="medium"
+        >
+          中型卡片内容
+        </ebiz-tdesign-card>
+        
+        <ebiz-tdesign-card 
+          title="小型卡片" 
+          size="small"
+        >
+          小型卡片内容
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>带头部分割线的卡片</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card 
+          title="头部分割线" 
+          :headerBordered="true"
+        >
+          头部带分割线的卡片，使内容区域和头部有明显分隔。
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>带封面的卡片</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card 
+          title="封面卡片" 
+          cover="https://tdesign.gtimg.com/site/source/card-demo.jpg"
+        >
+          带有封面图的卡片。
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>操作区域卡片</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card 
+          title="操作区域"
+        >
+          <template #actions>
+            <div style="display: flex; justify-content: space-between; width: 100%;">
+              <span>操作一</span>
+              <span>操作二</span>
+              <span>操作三</span>
+            </div>
+          </template>
+          带有操作区域的卡片，可以添加各种操作按钮。
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>带底部的卡片</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card 
+          title="带底部的卡片"
+        >
+          <template #footer>
+            <div style="text-align: right;">
+              <button style="padding: 5px 10px; margin-right: 8px;">取消</button>
+              <button style="padding: 5px 10px; background: #0052d9; color: white; border: none;">确定</button>
+            </div>
+          </template>
+          带有底部区域的卡片，常用于放置按钮等操作元素。
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>自定义头部的卡片</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card>
+          <template #header>
+            <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px 0;">
+              <div>
+                <h4 style="margin: 0;">自定义头部</h4>
+                <small style="color: #999;">2023-05-20</small>
+              </div>
+              <span style="cursor: pointer;">···</span>
+            </div>
+          </template>
+          通过自定义头部插槽，实现更复杂的头部布局。
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>加载状态卡片</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card 
+          title="加载中" 
+          :loading="true"
+        >
+          内容加载中...
+        </ebiz-tdesign-card>
+        
+        <ebiz-tdesign-card 
+          title="自定义加载" 
+          :loading="true"
+          :loadingProps="{ text: '正在加载数据...', size: 'medium' }"
+        >
+          内容加载中...
+        </ebiz-tdesign-card>
+        
+        <ebiz-tdesign-card 
+          title="自定义加载插槽" 
+          :loading="true"
+        >
+          <template #loading>
+            <div style="display: flex; justify-content: center; align-items: center; padding: 20px;">
+              <span>TDesign努力加载中...</span>
+            </div>
+          </template>
+          内容加载中...
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>不同风格卡片</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card 
+          title="普通风格" 
+          subtitle="副标题"
+          theme="normal"
+        >
+          普通风格卡片内容
+        </ebiz-tdesign-card>
+        
+        <ebiz-tdesign-card 
+          title="海报风格1" 
+          subtitle="副标题"
+          theme="poster1"
+          cover="https://tdesign.gtimg.com/site/source/card-demo.jpg"
+        >
+          <template #actions>
+            <div style="display: flex; justify-content: space-between; width: 100%;">
+              <span>操作区域在顶部</span>
+            </div>
+          </template>
+          海报风格1卡片内容，操作区域在顶部。
+        </ebiz-tdesign-card>
+        
+        <ebiz-tdesign-card 
+          title="海报风格2" 
+          subtitle="副标题"
+          theme="poster2"
+          status="进行中"
+          cover="https://tdesign.gtimg.com/site/source/card-demo.jpg"
+        >
+          <template #actions>
+            <div style="display: flex; justify-content: space-between; width: 100%;">
+              <span>操作区域在底部</span>
+            </div>
+          </template>
+          海报风格2卡片内容，操作区域在底部。
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>带头像的卡片</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card 
+          title="头像卡片" 
+          theme="poster2"
+          avatar="https://tdesign.gtimg.com/site/avatar.jpg"
+        >
+          仅在海报风格的卡片中头像才有效。
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>事件处理</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card 
+          title="点击事件" 
+          @click="handleCardClick"
+        >
+          点击此卡片触发点击事件。
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { EbizTdesignCard } from '../index.js'
+
+export default {
+  name: 'TdesignCardDemo',
+  components: {
+    EbizTdesignCard
+  },
+  methods: {
+    handleCardClick(_e) {
+      alert('卡片被点击了！')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tdesign-card-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;
+}
+
+.card-row {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.card-row > * {
+  width: 300px;
+}
+</style>