@ebiz/designer-components 0.0.18-beta.1

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

@@ -0,0 +1,86 @@
+<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: '/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栅格组件示例' }
+    ]
+
+    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;
+}
+</style> 

package/src/views/Mindmap.vue

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

package/src/views/MyComponent.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <ebiz-route-breadcrumb />
+    <my-component />
+  </div>
+</template>
+
+<script>
+import { MyComponent } from '@/index.js'
+
+export default {
+  name: 'MyComponentDemo',
+  components: {
+    MyComponent
+  }
+}
+</script>
+
+<style scoped>
+</style> 

package/src/views/OkrTree.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <ebiz-route-breadcrumb />
+    <ebiz-okr-tree />
+  </div>
+</template>
+
+<script>
+import { EbizOkrTree } from '@/index.js'
+
+export default {
+  name: 'OkrTreeDemo',
+  components: {
+    EbizOkrTree
+  }
+}
+</script>
+
+<style scoped>
+</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> 

package/src/views/RemoteSelect.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <ebiz-route-breadcrumb />
+    <ebiz-remote-select />
+  </div>
+</template>
+
+<script>
+import { EbizRemoteSelect } from '@/index.js'
+
+export default {
+  name: 'RemoteSelectDemo',
+  components: {
+    EbizRemoteSelect
+  }
+}
+</script>
+
+<style scoped>
+</style> 

package/src/views/SwitchDemo.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="switch-demo">
+    <h1>TDesign Switch 组件示例</h1>
+    
+    <h2>基础开关</h2>
+    <div class="demo-section">
+      <EbizSwitch v-model="checked1" />
+      <div class="status">当前状态: {{ checked1 ? '开' : '关' }}</div>
+    </div>
+    
+    <h2>不同尺寸</h2>
+    <div class="demo-section">
+      <EbizSwitch v-model="checked2" size="small" />
+      <EbizSwitch v-model="checked2" size="medium" />
+      <EbizSwitch v-model="checked2" size="large" />
+    </div>
+    
+    <h2>不同主题</h2>
+    <div class="demo-section">
+      <EbizSwitch v-model="checked3" theme="primary" />
+      <EbizSwitch v-model="checked3" theme="success" />
+      <EbizSwitch v-model="checked3" theme="warning" />
+      <EbizSwitch v-model="checked3" theme="danger" />
+    </div>
+    
+    <h2>加载状态</h2>
+    <div class="demo-section">
+      <EbizSwitch v-model="checked4" loading />
+    </div>
+    
+    <h2>禁用状态</h2>
+    <div class="demo-section">
+      <EbizSwitch v-model="checked5" disabled />
+      <EbizSwitch v-model="checked6" disabled />
+    </div>
+    
+    <h2>带标签</h2>
+    <div class="demo-section">
+      <EbizSwitch v-model="checked7" :label="['开', '关']" />
+    </div>
+    
+    <h2>自定义值</h2>
+    <div class="demo-section">
+      <EbizSwitch v-model="customChecked" :customValue="['开启', '关闭']" />
+      <div class="status">当前值: {{ customChecked }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizSwitch } from '../index.js';
+
+const checked1 = ref(true);
+const checked2 = ref(true);
+const checked3 = ref(true);
+const checked4 = ref(true);
+const checked5 = ref(true);
+const checked6 = ref(false);
+const checked7 = ref(true);
+const customChecked = ref('开启');
+</script>
+
+<style lang="less" scoped>
+.switch-demo {
+  padding: 20px;
+  
+  .demo-section {
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+  
+  .status {
+    margin-left: 16px;
+    color: #666;
+  }
+}
+</style> 

package/src/views/Table.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <ebiz-route-breadcrumb />
+    <my-table />
+  </div>
+</template>
+
+<script>
+import { MyTable } from '@/index.js'
+
+export default {
+  name: 'TableDemo',
+  components: {
+    MyTable
+  }
+}
+</script>
+
+<style scoped>
+</style>