@ebiz/designer-components 0.0.18 → 0.0.19-beta.1

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

@@ -1,20 +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>
+<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> 

package/src/views/Home.vue

@@ -1,65 +1,126 @@
-<template>
-  <div class="home">
-    <h1>组件库示例</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>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Home',
-  setup() {
-    const components = [
-      { path: '/my-component', title: '基础组件示例' },
-      { path: '/table', title: '表格组件示例' },
-      { path: '/form', title: '表单组件示例' },
-      { path: '/button', title: '按钮组件示例' },
-      { path: '/data-container', title: '数据容器示例' },
-      { path: '/title', title: '标题组件示例' },
-      { path: '/okr-tree', title: 'OKR树形图示例' },
-      { path: '/remote-select', title: '远程选择器示例' },
-      { path: '/mindmap', title: '思维导图示例' }
-    ]
-
-    return {
-      components
-    }
-  }
-}
-</script>
-
-<style scoped>
-.home {
-  padding: 20px;
-}
-
-.component-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 20px;
-  margin-top: 20px;
-}
-
-.component-item {
-  background: #f5f5f5;
-  padding: 20px;
-  border-radius: 8px;
-  text-align: center;
-}
-
-.component-link {
-  color: #333;
-  text-decoration: none;
-  font-size: 16px;
-}
-
-.component-link:hover {
-  color: #1890ff;
-}
+<template>
+  <div class="home">
+    <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>
+
+<script>
+export default {
+  name: 'Home',
+  setup() {
+    const components = [
+      { path: '/my-component', title: '基础组件示例' },
+      { 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: '/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 {
+      components
+    }
+  }
+}
+</script>
+
+<style scoped>
+.home {
+  padding: 20px;
+}
+
+.component-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.component-item {
+  background: #f5f5f5;
+  padding: 20px;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.component-link {
+  color: #333;
+  text-decoration: none;
+  font-size: 16px;
+}
+
+.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/Mindmap.vue

@@ -1,20 +1,20 @@
-<template>
-  <div>
-    <ebiz-route-breadcrumb />
-    <ebiz-mindmap />
-  </div>
-</template>
-
-<script>
-import { EbizMindmap } from '@/index.js'
-
-export default {
-  name: 'MindmapDemo',
-  components: {
-    EbizMindmap
-  }
-}
-</script>
-
-<style scoped>
+<template>
+  <div>
+    <ebiz-route-breadcrumb />
+    <ebiz-mindmap />
+  </div>
+</template>
+
+<script>
+import { EbizMindmap } from '@/index.js'
+
+export default {
+  name: 'MindmapDemo',
+  components: {
+    EbizMindmap
+  }
+}
+</script>
+
+<style scoped>
 </style>