@ebiz/designer-components 0.1.1 → 0.1.4

package/src/views/TdesignCard.vue

@@ -1,297 +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;
-}
+<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>