@ebiz/designer-components 0.1.0 → 0.1.1

package/src/views/Home.vue

@@ -1,149 +1,149 @@
-<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>
-      
-      <router-link to="/tree-merge-table-demo" class="component-item">
-        <div class="component-title">树形合并表格</div>
-        <div class="component-desc">支持树形展示和单元格合并的表格组件</div>
-      </router-link>
-      
-      <router-link to="/permission-box" 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: '/ebiz-employee-selector', title: 'Ebiz员工选择器组件示例' },
-      { path: '/tdesign-alert', title: 'TDesign提示组件示例' },
-      { path: '/tdesign-dialog', title: 'TDesign对话框组件示例' },
-      { path: '/page-header', title: 'Ebiz页面头部组件示例' },
-      { path: '/table-demo', title: 'Ebiz表格组件示例' },
-      { path: '/detail-block', title: 'Ebiz详情块组件示例' },
-      { path: '/table-column', title: 'Ebiz表格列组件示例' },
-      { path: '/table-sort', title: 'Ebiz表格排序组件示例' },
-      { path: '/time-picker', title: 'Ebiz时间选择器组件示例' },
-      { path: '/tdesign-descriptions', title: 'Ebiz描述列表组件示例' },
-      { path: '/popconfirm', title: 'Ebiz气泡确认框组件示例' },
-      { path: '/tree-merge-table-demo', title: '树形合并表格组件示例' },
-      { path: '/auto-form-demo', title: 'Ebiz自动表单组件示例' },
-      { path: '/ebiz-department-selector', title: 'Ebiz部门选择器组件示例' },
-      { path: '/ebiz-tdesign-button-dialog', title: '弹窗按钮组件示例' },
-      { path: '/ebiz-s-form', title: 'PC端表单组件示例' },
-      { path: '/ebiz-map', title: '地图经纬度选择器组件示例' },
-      { path: '/ebiz-s-data', title: 'Ebiz数据组件示例' },
-      { path: '/ebiz-s-dialog', title: 'Ebiz高级弹窗组件示例' },
-      { path: '/approval', title: 'Ebiz审批组件示例' },
-      { path: '/vxe-table', title: 'EbizVxeTable示例' },
-      { path: '/meeting-room-selector', title: 'Ebiz会议室选择器组件示例' },
-      { path: '/mobile-meeting-room-selector', 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;
-}
+<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>
+      
+      <router-link to="/tree-merge-table-demo" class="component-item">
+        <div class="component-title">树形合并表格</div>
+        <div class="component-desc">支持树形展示和单元格合并的表格组件</div>
+      </router-link>
+      
+      <router-link to="/permission-box" 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: '/ebiz-employee-selector', title: 'Ebiz员工选择器组件示例' },
+      { path: '/tdesign-alert', title: 'TDesign提示组件示例' },
+      { path: '/tdesign-dialog', title: 'TDesign对话框组件示例' },
+      { path: '/page-header', title: 'Ebiz页面头部组件示例' },
+      { path: '/table-demo', title: 'Ebiz表格组件示例' },
+      { path: '/detail-block', title: 'Ebiz详情块组件示例' },
+      { path: '/table-column', title: 'Ebiz表格列组件示例' },
+      { path: '/table-sort', title: 'Ebiz表格排序组件示例' },
+      { path: '/time-picker', title: 'Ebiz时间选择器组件示例' },
+      { path: '/tdesign-descriptions', title: 'Ebiz描述列表组件示例' },
+      { path: '/popconfirm', title: 'Ebiz气泡确认框组件示例' },
+      { path: '/tree-merge-table-demo', title: '树形合并表格组件示例' },
+      { path: '/auto-form-demo', title: 'Ebiz自动表单组件示例' },
+      { path: '/ebiz-department-selector', title: 'Ebiz部门选择器组件示例' },
+      { path: '/ebiz-tdesign-button-dialog', title: '弹窗按钮组件示例' },
+      { path: '/ebiz-s-form', title: 'PC端表单组件示例' },
+      { path: '/ebiz-map', title: '地图经纬度选择器组件示例' },
+      { path: '/ebiz-s-data', title: 'Ebiz数据组件示例' },
+      { path: '/ebiz-s-dialog', title: 'Ebiz高级弹窗组件示例' },
+      { path: '/approval', title: 'Ebiz审批组件示例' },
+      { path: '/vxe-table', title: 'EbizVxeTable示例' },
+      { path: '/meeting-room-selector', title: 'Ebiz会议室选择器组件示例' },
+      { path: '/mobile-meeting-room-selector', 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,18 +1,18 @@
-<template>
-  <div>
-    <ebiz-route-breadcrumb />
-    <!-- <ebiz-mindmap /> -->
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'MindmapDemo',
-  components: {
-  }
-}
-</script>
-
-<style scoped>
+<template>
+  <div>
+    <ebiz-route-breadcrumb />
+    <!-- <ebiz-mindmap /> -->
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'MindmapDemo',
+  components: {
+  }
+}
+</script>
+
+<style scoped>
 </style> 

package/src/views/MyComponent.vue

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

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

@@ -1,105 +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;
-}
+<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>