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

package/src/views/Home.vue

@@ -0,0 +1,127 @@
+<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时间选择器组件示例' },
+      { path: '/tdesign-descriptions', 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

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