@ebiz/designer-components 0.0.1-9.bata.1

package/src/views/EbizSpace.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="space-demo">
+    <h2>EbizSpace 间距组件</h2>
+    
+    <h3>基本用法</h3>
+    <div class="demo-block">
+      <EbizSpace>
+        <EbizTdesignButton>按钮1</EbizTdesignButton>
+        <EbizTdesignButton>按钮2</EbizTdesignButton>
+        <EbizTdesignButton>按钮3</EbizTdesignButton>
+      </EbizSpace>
+    </div>
+    
+    <h3>垂直间距</h3>
+    <div class="demo-block">
+      <EbizSpace direction="vertical" style="width: 100%">
+        <EbizTdesignCard title="卡片1" summary="这是卡片1的内容">
+          卡片内容区域可以是文字、图片、表单、表格等形式信息内容
+        </EbizTdesignCard>
+        <EbizTdesignCard title="卡片2" summary="这是卡片2的内容">
+          卡片内容区域可以是文字、图片、表单、表格等形式信息内容
+        </EbizTdesignCard>
+      </EbizSpace>
+    </div>
+    
+    <h3>间距大小</h3>
+    <div class="demo-block">
+      <h4>小间距 (small)</h4>
+      <EbizSpace size="small">
+        <EbizTdesignButton>按钮1</EbizTdesignButton>
+        <EbizTdesignButton>按钮2</EbizTdesignButton>
+        <EbizTdesignButton>按钮3</EbizTdesignButton>
+      </EbizSpace>
+      
+      <h4>中等间距 (medium - 默认)</h4>
+      <EbizSpace size="medium">
+        <EbizTdesignButton>按钮1</EbizTdesignButton>
+        <EbizTdesignButton>按钮2</EbizTdesignButton>
+        <EbizTdesignButton>按钮3</EbizTdesignButton>
+      </EbizSpace>
+      
+      <h4>大间距 (large)</h4>
+      <EbizSpace size="large">
+        <EbizTdesignButton>按钮1</EbizTdesignButton>
+        <EbizTdesignButton>按钮2</EbizTdesignButton>
+        <EbizTdesignButton>按钮3</EbizTdesignButton>
+      </EbizSpace>
+      
+      <h4>自定义间距 (24px)</h4>
+      <EbizSpace :size="24">
+        <EbizTdesignButton>按钮1</EbizTdesignButton>
+        <EbizTdesignButton>按钮2</EbizTdesignButton>
+        <EbizTdesignButton>按钮3</EbizTdesignButton>
+      </EbizSpace>
+      
+      <h4>自定义行列间距 [16, 24]</h4>
+      <EbizSpace :size="[16, 24]" breakLine>
+        <EbizTdesignButton>按钮1</EbizTdesignButton>
+        <EbizTdesignButton>按钮2</EbizTdesignButton>
+        <EbizTdesignButton>按钮3</EbizTdesignButton>
+        <EbizTdesignButton>按钮4</EbizTdesignButton>
+        <EbizTdesignButton>按钮5</EbizTdesignButton>
+        <EbizTdesignButton>按钮6</EbizTdesignButton>
+      </EbizSpace>
+    </div>
+    
+    <h3>对齐方式</h3>
+    <div class="demo-block alignment">
+      <EbizSpace direction="vertical" size="large">
+        <div>
+          <span class="alignment-text">顶部对齐 (start):</span>
+          <EbizSpace align="start">
+            <div class="alignment-block small"></div>
+            <div class="alignment-block medium"></div>
+            <div class="alignment-block large"></div>
+          </EbizSpace>
+        </div>
+        
+        <div>
+          <span class="alignment-text">居中对齐 (center):</span>
+          <EbizSpace align="center">
+            <div class="alignment-block small"></div>
+            <div class="alignment-block medium"></div>
+            <div class="alignment-block large"></div>
+          </EbizSpace>
+        </div>
+        
+        <div>
+          <span class="alignment-text">底部对齐 (end):</span>
+          <EbizSpace align="end">
+            <div class="alignment-block small"></div>
+            <div class="alignment-block medium"></div>
+            <div class="alignment-block large"></div>
+          </EbizSpace>
+        </div>
+        
+        <div>
+          <span class="alignment-text">基线对齐 (baseline):</span>
+          <EbizSpace align="baseline">
+            <div class="alignment-block small">
+              <span style="position: relative; top: 16px;">文本</span>
+            </div>
+            <div class="alignment-block medium">
+              <span style="position: relative; top: 32px;">文本</span>
+            </div>
+            <div class="alignment-block large">
+              <span style="position: relative; top: 48px;">文本</span>
+            </div>
+          </EbizSpace>
+        </div>
+      </EbizSpace>
+    </div>
+    
+    <h3>自动换行</h3>
+    <div class="demo-block">
+      <EbizSpace breakLine>
+        <EbizTdesignButton v-for="i in 10" :key="i">按钮{{ i }}</EbizTdesignButton>
+      </EbizSpace>
+    </div>
+    
+    <h3>设置分隔符</h3>
+    <div class="demo-block">
+      <EbizSpace separator="|">
+        <span>文本1</span>
+        <span>文本2</span>
+        <span>文本3</span>
+        <span>文本4</span>
+      </EbizSpace>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { EbizSpace, EbizTdesignButton, EbizTdesignCard } from '../index.js';
+</script>
+
+<style scoped>
+.space-demo {
+  padding: 20px;
+}
+
+.demo-block {
+  margin-bottom: 20px;
+  padding: 16px;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
+
+.alignment-block {
+  background-color: #e0e6ff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.alignment-block.small {
+  width: 60px;
+  height: 40px;
+}
+
+.alignment-block.medium {
+  width: 80px;
+  height: 80px;
+}
+
+.alignment-block.large {
+  width: 100px;
+  height: 120px;
+}
+
+.alignment-text {
+  display: inline-block;
+  width: 150px;
+  font-weight: 600;
+}
+
+h3 {
+  margin-top: 30px;
+  margin-bottom: 10px;
+}
+
+h4 {
+  margin-top: 16px;
+  margin-bottom: 8px;
+}
+</style> 

package/src/views/EbizSwiper.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="swiper-demo">
+    <h1>TDesign 轮播框组件示例</h1>
+    
+    <div class="demo-section">
+      <h2>1. 基础轮播</h2>
+      <ebiz-swiper>
+        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
+          <div class="demo-item" :style="{ backgroundColor: item.color }">
+            {{ item.label }}
+          </div>
+        </ebiz-swiper-item>
+      </ebiz-swiper>
+    </div>
+    
+    <div class="demo-section">
+      <h2>2. 垂直布局</h2>
+      <ebiz-swiper direction="vertical" :height="200">
+        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
+          <div class="demo-item" :style="{ backgroundColor: item.color }">
+            {{ item.label }}
+          </div>
+        </ebiz-swiper-item>
+      </ebiz-swiper>
+    </div>
+    
+    <div class="demo-section">
+      <h2>3. 自定义导航器位置</h2>
+      <ebiz-swiper :navigation="{ placement: 'outside' }">
+        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
+          <div class="demo-item" :style="{ backgroundColor: item.color }">
+            {{ item.label }}
+          </div>
+        </ebiz-swiper-item>
+      </ebiz-swiper>
+    </div>
+    
+    <div class="demo-section">
+      <h2>4. 分式导航器</h2>
+      <ebiz-swiper :navigation="{ type: 'fraction' }">
+        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
+          <div class="demo-item" :style="{ backgroundColor: item.color }">
+            {{ item.label }}
+          </div>
+        </ebiz-swiper-item>
+      </ebiz-swiper>
+    </div>
+    
+    <div class="demo-section">
+      <h2>5. 渐隐模式</h2>
+      <ebiz-swiper animation="fade">
+        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
+          <div class="demo-item" :style="{ backgroundColor: item.color }">
+            {{ item.label }}
+          </div>
+        </ebiz-swiper-item>
+      </ebiz-swiper>
+    </div>
+    
+    <div class="demo-section">
+      <h2>6. 手动控制</h2>
+      <div class="control-panel">
+        <t-button @click="currentIndex = (currentIndex - 1 + swiperItems.length) % swiperItems.length">上一张</t-button>
+        <t-button @click="currentIndex = (currentIndex + 1) % swiperItems.length">下一张</t-button>
+      </div>
+      <ebiz-swiper v-model:current="currentIndex" :autoplay="false">
+        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
+          <div class="demo-item" :style="{ backgroundColor: item.color }">
+            {{ item.label }}
+          </div>
+        </ebiz-swiper-item>
+      </ebiz-swiper>
+    </div>
+    
+    <div class="demo-section">
+      <h2>7. 自定义导航器大小</h2>
+      <ebiz-swiper :navigation="{ size: 'large' }">
+        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
+          <div class="demo-item" :style="{ backgroundColor: item.color }">
+            {{ item.label }}
+          </div>
+        </ebiz-swiper-item>
+      </ebiz-swiper>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import { EbizSwiper, EbizSwiperItem } from '../index.js';
+import { Button as TButton } from 'tdesign-vue-next';
+
+export default {
+  name: 'TdesignSwiperDemo',
+  components: {
+    EbizSwiper,
+    EbizSwiperItem,
+    TButton
+  },
+  setup() {
+    const currentIndex = ref(0);
+    
+    const swiperItems = [
+      { label: '1', color: '#0052D9' },
+      { label: '2', color: '#0594FA' },
+      { label: '3', color: '#05A573' },
+      { label: '4', color: '#D54941' },
+      { label: '5', color: '#ED7B2F' },
+      { label: '6', color: '#9B38D3' }
+    ];
+    
+    return {
+      currentIndex,
+      swiperItems
+    };
+  }
+};
+</script>
+
+<style scoped>
+.swiper-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;
+}
+
+.demo-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  color: white;
+  font-size: 32px;
+  font-weight: bold;
+}
+
+.control-panel {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+</style> 

package/src/views/Form.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <ebiz-route-breadcrumb />
+    <ebiz-form-container />
+  </div>
+</template>
+
+<script>
+import { EbizFormContainer } from '@/index.js'
+
+export default {
+  name: 'FormDemo',
+  components: {
+    EbizFormContainer
+  }
+}
+</script>
+
+<style scoped>
+</style> 

package/src/views/GridDemo.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="grid-demo">
+    <h1>TDesign Grid 组件示例</h1>
+    
+    <h2>基础栅格</h2>
+    <div class="demo-section">
+      <EbizGrid>
+        <EbizCol :span="24">
+          <div class="grid-content bg-purple-dark">24</div>
+        </EbizCol>
+      </EbizGrid>
+      
+      <EbizGrid>
+        <EbizCol :span="12">
+          <div class="grid-content bg-purple">12</div>
+        </EbizCol>
+        <EbizCol :span="12">
+          <div class="grid-content bg-purple-light">12</div>
+        </EbizCol>
+      </EbizGrid>
+      
+      <EbizGrid>
+        <EbizCol :span="8">
+          <div class="grid-content bg-purple">8</div>
+        </EbizCol>
+        <EbizCol :span="8">
+          <div class="grid-content bg-purple-light">8</div>
+        </EbizCol>
+        <EbizCol :span="8">
+          <div class="grid-content bg-purple">8</div>
+        </EbizCol>
+      </EbizGrid>
+      
+      <EbizGrid>
+        <EbizCol :span="6">
+          <div class="grid-content bg-purple">6</div>
+        </EbizCol>
+        <EbizCol :span="6">
+          <div class="grid-content bg-purple-light">6</div>
+        </EbizCol>
+        <EbizCol :span="6">
+          <div class="grid-content bg-purple">6</div>
+        </EbizCol>
+        <EbizCol :span="6">
+          <div class="grid-content bg-purple-light">6</div>
+        </EbizCol>
+      </EbizGrid>
+    </div>
+    
+    <h2>区块间隔</h2>
+    <div class="demo-section">
+      <EbizGrid :gutter="16">
+        <EbizCol :span="6">
+          <div class="grid-content bg-purple">6</div>
+        </EbizCol>
+        <EbizCol :span="6">
+          <div class="grid-content bg-purple-light">6</div>
+        </EbizCol>
+        <EbizCol :span="6">
+          <div class="grid-content bg-purple">6</div>
+        </EbizCol>
+        <EbizCol :span="6">
+          <div class="grid-content bg-purple-light">6</div>
+        </EbizCol>
+      </EbizGrid>
+    </div>
+    
+    <h2>水平对齐方式</h2>
+    <div class="demo-section">
+      <p>justify: start</p>
+      <EbizGrid :justify="'start'">
+        <EbizCol :span="4">
+          <div class="grid-content bg-purple-dark">4</div>
+        </EbizCol>
+        <EbizCol :span="4">
+          <div class="grid-content bg-purple">4</div>
+        </EbizCol>
+        <EbizCol :span="4">
+          <div class="grid-content bg-purple-light">4</div>
+        </EbizCol>
+      </EbizGrid>
+      
+      <p>justify: center</p>
+      <EbizGrid :justify="'center'">
+        <EbizCol :span="4">
+          <div class="grid-content bg-purple-dark">4</div>
+        </EbizCol>
+        <EbizCol :span="4">
+          <div class="grid-content bg-purple">4</div>
+        </EbizCol>
+        <EbizCol :span="4">
+          <div class="grid-content bg-purple-light">4</div>
+        </EbizCol>
+      </EbizGrid>
+      
+      <p>justify: end</p>
+      <EbizGrid :justify="'end'">
+        <EbizCol :span="4">
+          <div class="grid-content bg-purple-dark">4</div>
+        </EbizCol>
+        <EbizCol :span="4">
+          <div class="grid-content bg-purple">4</div>
+        </EbizCol>
+        <EbizCol :span="4">
+          <div class="grid-content bg-purple-light">4</div>
+        </EbizCol>
+      </EbizGrid>
+      
+      <p>justify: space-between</p>
+      <EbizGrid :justify="'space-between'">
+        <EbizCol :span="4">
+          <div class="grid-content bg-purple-dark">4</div>
+        </EbizCol>
+        <EbizCol :span="4">
+          <div class="grid-content bg-purple">4</div>
+        </EbizCol>
+        <EbizCol :span="4">
+          <div class="grid-content bg-purple-light">4</div>
+        </EbizCol>
+      </EbizGrid>
+      
+      <p>justify: space-around</p>
+      <EbizGrid :justify="'space-around'">
+        <EbizCol :span="4">
+          <div class="grid-content bg-purple-dark">4</div>
+        </EbizCol>
+        <EbizCol :span="4">
+          <div class="grid-content bg-purple">4</div>
+        </EbizCol>
+        <EbizCol :span="4">
+          <div class="grid-content bg-purple-light">4</div>
+        </EbizCol>
+      </EbizGrid>
+    </div>
+    
+    <h2>垂直对齐方式</h2>
+    <div class="demo-section">
+      <p>align: top</p>
+      <EbizGrid :align="'start'" class="align-demo">
+        <EbizCol :span="6">
+          <div class="grid-content bg-purple" style="height: 80px">6</div>
+        </EbizCol>
+        <EbizCol :span="6">
+          <div class="grid-content bg-purple-light" style="height: 40px">6</div>
+        </EbizCol>
+        <EbizCol :span="6">
+          <div class="grid-content bg-purple" style="height: 120px">6</div>
+        </EbizCol>
+      </EbizGrid>
+      
+      <p>align: center</p>
+      <EbizGrid :align="'center'" class="align-demo">
+        <EbizCol :span="6">
+          <div class="grid-content bg-purple" style="height: 80px">6</div>
+        </EbizCol>
+        <EbizCol :span="6">
+          <div class="grid-content bg-purple-light" style="height: 40px">6</div>
+        </EbizCol>
+        <EbizCol :span="6">
+          <div class="grid-content bg-purple" style="height: 120px">6</div>
+        </EbizCol>
+      </EbizGrid>
+      
+      <p>align: bottom</p>
+      <EbizGrid :align="'end'" class="align-demo">
+        <EbizCol :span="6">
+          <div class="grid-content bg-purple" style="height: 80px">6</div>
+        </EbizCol>
+        <EbizCol :span="6">
+          <div class="grid-content bg-purple-light" style="height: 40px">6</div>
+        </EbizCol>
+        <EbizCol :span="6">
+          <div class="grid-content bg-purple" style="height: 120px">6</div>
+        </EbizCol>
+      </EbizGrid>
+    </div>
+    
+    <h2>响应式布局</h2>
+    <div class="demo-section">
+      <EbizGrid :gutter="10">
+        <EbizCol :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
+          <div class="grid-content bg-purple">xs=8 sm=6 md=4 lg=3 xl=1</div>
+        </EbizCol>
+        <EbizCol :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
+          <div class="grid-content bg-purple-light">xs=4 sm=6 md=8 lg=9 xl=11</div>
+        </EbizCol>
+        <EbizCol :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
+          <div class="grid-content bg-purple">xs=4 sm=6 md=8 lg=9 xl=11</div>
+        </EbizCol>
+        <EbizCol :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
+          <div class="grid-content bg-purple-light">xs=8 sm=6 md=4 lg=3 xl=1</div>
+        </EbizCol>
+      </EbizGrid>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { EbizGrid, EbizCol } from '../index.js';
+</script>
+
+<style lang="less" scoped>
+.grid-demo {
+  padding: 20px;
+  
+  .demo-section {
+    margin-bottom: 40px;
+  }
+  
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+    color: #fff;
+    text-align: center;
+    line-height: 36px;
+    margin-bottom: 10px;
+  }
+  
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  
+  .bg-purple {
+    background: #d3dce6;
+    color: #333;
+  }
+  
+  .bg-purple-light {
+    background: #e5e9f2;
+    color: #333;
+  }
+  
+  .align-demo {
+    margin-bottom: 20px;
+    background-color: rgba(0, 0, 0, 0.05);
+    height: 120px;
+  }
+}
+</style>