@ebiz/designer-components 0.0.18 → 0.0.19

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/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> 

package/src/views/Home.vue

@@ -1,12 +1,22 @@
 <template>
   <div class="home">
-    <h1>组件库示例</h1>
+    <h1>Ebiz 组件库</h1>
     <div class="component-list">
       <div v-for="(item, index) in components" :key="index" class="component-item">
         <router-link :to="item.path" class="component-link">
           {{ item.title }}
         </router-link>
       </div>
+      
+      <router-link to="/tree-demo" class="component-item">
+        <div class="component-title">树组件</div>
+        <div class="component-desc">用于展示层级结构和操作的组件</div>
+      </router-link>
+      
+      <router-link to="/tree-selector-demo" class="component-item">
+        <div class="component-title">树形选择器</div>
+        <div class="component-desc">基于树组件的选择器，支持搜索和多选</div>
+      </router-link>
     </div>
   </div>
 </template>
@@ -20,11 +30,48 @@ export default {
       { path: '/table', title: '表格组件示例' },
       { path: '/form', title: '表单组件示例' },
       { path: '/button', title: '按钮组件示例' },
+      { path: '/tdesign-button', title: 'TDesign按钮组件示例' },
+      { path: '/tdesign-icon', title: 'TDesign图标组件示例' },
+      { path: '/tdesign-input', title: 'TDesign输入框组件示例' },
+      { path: '/tdesign-select', title: 'TDesign选择器组件示例' },
+      { path: '/tdesign-form', title: 'TDesign表单组件示例' },
+      { path: '/tdesign-card', title: 'TDesign卡片组件示例' },
+      { path: '/tdesign-date-picker', title: 'TDesign日期选择器示例' },
+      { path: '/tdesign-image', title: 'TDesign图片组件示例' },
+      { path: '/tdesign-image-viewer', title: 'TDesign图片查看器组件示例' },
       { path: '/data-container', title: '数据容器示例' },
       { path: '/title', title: '标题组件示例' },
       { path: '/okr-tree', title: 'OKR树形图示例' },
       { path: '/remote-select', title: '远程选择器示例' },
-      { path: '/mindmap', title: '思维导图示例' }
+      { path: '/mindmap', title: '思维导图示例' },
+      { path: '/tdesign-calendar', title: 'TDesign日历组件示例' },
+      { path: '/tdesign-collapse', title: 'TDesign折叠面板组件示例' },
+      { path: '/tdesign-tag', title: 'TDesign标签组件示例' },
+      { path: '/ebiz-swiper', title: 'Ebiz轮播框组件示例' },
+      { path: '/ebiz-space', title: 'Ebiz间距组件示例' },
+      { path: '/pagination', title: 'EbizPagination分页组件示例' },
+      { path: '/checkbox', title: 'Ebiz多选框组件示例' },
+      { path: '/radio', title: 'Ebiz单选框组件示例' },
+      { path: '/switch', title: 'Ebiz开关组件示例' },
+      { path: '/textarea', title: 'Ebiz多行文本框组件示例' },
+      { path: '/upload', title: 'TDesign上传组件示例' },
+      { path: '/grid', title: 'TDesign栅格组件示例' },
+      { path: '/tabs', title: 'Ebiz选项卡组件示例' },
+      { path: '/statistic', title: 'Ebiz统计数值组件示例' },
+      { path: '/timeline', title: 'Ebiz时间轴组件示例' },
+      { path: '/watermark', title: 'TDesign水印组件示例' },
+      { path: '/ebiz-avatar', title: 'Ebiz头像组件示例' },
+      { path: '/ebiz-employee-info', title: 'Ebiz员工信息组件示例' },
+      { path: '/tdesign-alert', title: 'TDesign提示组件示例' },
+      { path: '/tdesign-dialog', title: 'TDesign对话框组件示例' },
+      { path: '/page-header', title: 'Ebiz页面头部组件示例' },
+      { path: '/table-demo', title: 'Ebiz表格组件示例' },
+      { path: '/ebiz-detail-block', title: 'Ebiz详情块组件示例' },
+      { path: '/table-column', title: 'Ebiz表格列组件示例' },
+      { path: '/table-sort', title: 'Ebiz表格排序组件示例' },
+      { path: '/tree', title: 'Ebiz树组件示例' },
+      { path: '/tree-selector', title: 'Ebiz树选择器组件示例' },
+      { path: '/time-picker', title: 'Ebiz时间选择器组件示例' }
     ]
 
     return {
@@ -62,4 +109,18 @@ export default {
 .component-link:hover {
   color: #1890ff;
 }
+
+.component-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.component-desc {
+  font-size: 14px;
+}
+
+.component-item:hover {
+  background-color: #e6e6e6;
+}
 </style> 

package/src/views/PageHeaderDemo.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="demo-container">
+    <h2>页面头部组件演示</h2>
+    
+    <div class="section">
+      <h3>基础用法</h3>
+      <div class="example">
+        <EbizPageHeader />
+      </div>
+      <div class="code">
+        <pre><code>&lt;EbizPageHeader /&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>功能说明</h3>
+      <div class="description">
+        <p>此组件会自动根据当前路由信息生成面包屑导航。确保路由配置中包含以下meta信息：</p>
+        <pre><code>
+// 路由配置示例
+{
+  path: '/hr',
+  component: HR,
+  meta: {
+    title: '人事管理',  // 面包屑显示的标题
+    icon: 'user'      // 面包屑的图标名称，使用TDesign图标
+  },
+  children: [
+    {
+      path: 'employee',
+      component: Employee,
+      meta: {
+        title: '员工管理',
+        icon: 'user-talk'
+      }
+    }
+  ]
+}
+        </code></pre>
+      </div>
+    </div>
+
+    <div class="section">
+      <h3>帮助文档跳转</h3>
+      <p>点击帮助文档按钮会自动跳转到 /help 路径，并带上当前路由作为查询参数。</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { EbizPageHeader } from '../index.js'
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+h2 {
+  margin-bottom: 24px;
+  font-weight: 500;
+  color: #1a1a1a;
+}
+
+.section {
+  margin-bottom: 32px;
+  border: 1px solid #e9e9e9;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+h3 {
+  padding: 16px;
+  margin: 0;
+  font-weight: 500;
+  background-color: #f7f7f7;
+  border-bottom: 1px solid #e9e9e9;
+}
+
+.example {
+  padding: 24px;
+  border-bottom: 1px dashed #e9e9e9;
+}
+
+.code {
+  padding: 16px;
+  background-color: #f7f7f7;
+}
+
+pre {
+  margin: 0;
+  overflow-x: auto;
+}
+
+code {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 14px;
+}
+
+.description {
+  padding: 16px;
+}
+</style> 

package/src/views/PaginationDemo.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="pagination-demo">
+    <h1>EbizPagination 分页组件示例</h1>
+    
+    <h2>基础分页</h2>
+    <div class="demo-section">
+      <EbizPagination :total="100" />
+    </div>
+    
+    <h2>带数据总量显示的分页</h2>
+    <div class="demo-section">
+      <EbizPagination :total="685" />
+    </div>
+    
+    <h2>带页面展示数量选择的分页</h2>
+    <div class="demo-section">
+      <EbizPagination :total="645" :pageSizeOptions="[10, 20, 30, 50]" :defaultPageSize="30" />
+    </div>
+    
+    <h2>带快速跳转的分页</h2>
+    <div class="demo-section">
+      <EbizPagination :total="101" :pageSize="20" :showJumper="true" />
+    </div>
+    
+    <h2>极简版分页</h2>
+    <div class="demo-section">
+      <EbizPagination :total="100" :theme="'simple'" :showJumper="true" />
+    </div>
+    
+    <h2>迷你版分页</h2>
+    <div class="demo-section">
+      <EbizPagination :total="100" :size="'small'" />
+    </div>
+    
+    <h2>极简迷你版分页</h2>
+    <div class="demo-section">
+      <EbizPagination :total="100" :theme="'simple'" :size="'small'" :showJumper="true" />
+    </div>
+    
+    <h2>自定义显示内容</h2>
+    <div class="demo-section">
+      <EbizPagination :total="200">
+        <template #totalContent>
+          <span style="color: #0052d9;">共 {{ 200 }} 条数据</span>
+        </template>
+      </EbizPagination>
+    </div>
+    
+    <h2>事件处理</h2>
+    <div class="demo-section">
+      <EbizPagination 
+        :total="500" 
+        :current="currentPage" 
+        :pageSize="pageSize"
+        @change="handlePaginationChange" 
+      />
+      <p>当前页码: {{ currentPage }}, 每页条数: {{ pageSize }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizPagination } from '../index.js';
+
+const currentPage = ref(1);
+const pageSize = ref(10);
+
+const handlePaginationChange = (pageInfo) => {
+  currentPage.value = pageInfo.current;
+  pageSize.value = pageInfo.pageSize;
+  console.log('分页变化', pageInfo);
+};
+</script>
+
+<style scoped>
+.pagination-demo {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 30px;
+  padding: 16px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+
+h1 {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+h2 {
+  font-size: 18px;
+  margin: 10px 0;
+}
+</style>