@ebiz/designer-components 0.0.18-tj.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/Home.vue

@@ -0,0 +1,79 @@
+<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间距组件示例' }
+    ]
+
+    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/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/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> 

package/src/views/TagDemo.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="tag-demo">
+    <h1>TDesign Tag 组件示例</h1>
+    
+    <h2>基础标签</h2>
+    <div class="demo-section">
+      <EbizTag content="默认标签" />
+      <EbizTag theme="primary" content="主题标签" />
+      <EbizTag theme="warning" content="警告标签" />
+      <EbizTag theme="danger" content="危险标签" />
+      <EbizTag theme="success" content="成功标签" />
+    </div>
+    
+    <h2>不同尺寸</h2>
+    <div class="demo-section">
+      <EbizTag size="small" content="小尺寸" />
+      <EbizTag size="medium" content="中尺寸" />
+      <EbizTag size="large" content="大尺寸" />
+    </div>
+    
+    <h2>不同变体</h2>
+    <div class="demo-section">
+      <EbizTag variant="dark" content="深色" />
+      <EbizTag variant="light" content="浅色" />
+      <EbizTag variant="outline" content="描边" />
+      <EbizTag variant="light-outline" content="浅色描边" />
+    </div>
+    
+    <h2>可关闭标签</h2>
+    <div class="demo-section">
+      <EbizTag v-for="(tag, index) in closableTags" :key="index" 
+        :content="tag" 
+        closable 
+        @close="handleClose(index)" />
+    </div>
+    
+    <h2>可选中标签</h2>
+    <div class="demo-section">
+      <EbizTag v-for="item in checkableTags" :key="item.name"
+        :content="item.name"
+        checkable
+        :checked="item.checked"
+        @change="(checked) => handleChange(item, checked)" />
+    </div>
+    
+    <h2>带图标的标签</h2>
+    <div class="demo-section">
+      <EbizTag content="星标标签" icon="star" />
+      <EbizTag content="成功标签" theme="success" icon="check-circle" />
+      <EbizTag content="警告标签" theme="warning" icon="error-circle" />
+    </div>
+    
+    <h2>最大宽度</h2>
+    <div class="demo-section">
+      <EbizTag content="这是一个很长很长很长很长很长很长很长很长很长很长的标签" :maxWidth="150" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizTag } from '../index.js';
+
+const closableTags = ref(['标签1', '标签2', '标签3', '标签4']);
+
+const checkableTags = ref([
+  { name: '选项1', checked: true },
+  { name: '选项2', checked: false },
+  { name: '选项3', checked: false },
+]);
+
+const handleClose = (index) => {
+  closableTags.value.splice(index, 1);
+};
+
+const handleChange = (item, checked) => {
+  item.checked = checked;
+};
+</script>
+
+<style scoped>
+.tag-demo {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+h1 {
+  margin-bottom: 24px;
+}
+
+h2 {
+  margin: 16px 0 8px;
+}
+</style>