@ebiz/designer-components 0.0.18-beta.4 → 0.0.18-beta.41

package/src/views/DialogDemo.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="dialog-demo">
+    <h1>TDesign Dialog 组件示例</h1>
+
+    <h2>基础对话框</h2>
+    <div class="demo-section">
+      <EbizButton theme="primary" @click="showBasicDialog = true">打开基础对话框</EbizButton>
+      <EbizDialog v-model:visible="showBasicDialog" header="基础对话框" :body="'这是一个基础对话框，用于展示简单的信息或进行简单的操作。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+    </div>
+
+    <h2>不同模式的对话框</h2>
+    <div class="demo-section">
+      <EbizButton @click="showModalDialog = true" style="margin-right: 16px;">模态对话框</EbizButton>
+      <EbizButton @click="showModelessDialog = true" style="margin-right: 16px;">非模态对话框</EbizButton>
+      <EbizButton @click="showFullscreenDialog = true">全屏对话框</EbizButton>
+
+      <!-- 模态对话框 -->
+      <EbizDialog v-model:visible="showModalDialog" header="模态对话框" mode="modal" :body="'模态对话框会阻止用户与页面的其他部分交互，直到对话框关闭。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+
+      <!-- 非模态对话框 -->
+      <EbizDialog v-model:visible="showModelessDialog" header="非模态对话框" mode="modeless"
+        :body="'非模态对话框不会阻止用户与页面的其他部分交互，可以同时进行其他操作。'" :confirm-btn="{ content: '确认', theme: 'primary' }"
+        cancel-btn="取消" />
+
+      <!-- 全屏对话框 -->
+      <EbizDialog v-model:visible="showFullscreenDialog" header="全屏对话框" mode="full-screen"
+        :body="'全屏对话框会占据整个屏幕，通常用于需要用户完全专注于某项任务的场景。'" :confirm-btn="{ content: '确认', theme: 'primary' }"
+        cancel-btn="取消" />
+    </div>
+
+    <h2>自定义内容的对话框</h2>
+    <div class="demo-section">
+      <EbizButton @click="showCustomDialog = true">打开自定义内容对话框</EbizButton>
+      <EbizDialog v-model:visible="showCustomDialog" header="自定义内容" :width="500">
+        <template #body>
+          <div style="padding: 20px;">
+            <h3>这是自定义的内容区域</h3>
+            <p>可以在这里放置任何你想要展示的内容，包括表单、图表、列表等。</p>
+            <div style="margin-top: 20px;">
+              <EbizTdesignInput v-model="customInput" placeholder="请输入内容" />
+            </div>
+          </div>
+        </template>
+        <template #footer>
+          <div style="display: flex; justify-content: flex-end;">
+            <EbizButton @click="showCustomDialog = false" style="margin-right: 8px;">取消</EbizButton>
+            <EbizButton theme="primary" @click="handleCustomConfirm">确认</EbizButton>
+          </div>
+        </template>
+      </EbizDialog>
+    </div>
+
+    <h2>可拖拽的对话框</h2>
+    <div class="demo-section">
+      <EbizButton @click="showDraggableDialog = true">打开可拖拽对话框</EbizButton>
+      <EbizDialog v-model:visible="showDraggableDialog" header="可拖拽对话框" :draggable="true" :body="'这个对话框可以通过拖拽标题栏进行移动。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+    </div>
+
+    <h2>不同位置的对话框</h2>
+    <div class="demo-section">
+      <EbizButton @click="showTopDialog = true" style="margin-right: 16px;">顶部对话框</EbizButton>
+      <EbizButton @click="showCenterDialog = true">居中对话框</EbizButton>
+
+      <!-- 顶部对话框 -->
+      <EbizDialog v-model:visible="showTopDialog" header="顶部对话框" placement="top" :body="'这个对话框位于顶部。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+
+      <!-- 居中对话框 -->
+      <EbizDialog v-model:visible="showCenterDialog" header="居中对话框" placement="center" :body="'这个对话框位于页面中央。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizDialog, EbizButton, EbizTdesignInput } from '../index.js';
+
+// 基础对话框
+const showBasicDialog = ref(false);
+
+// 不同模式的对话框
+const showModalDialog = ref(false);
+const showModelessDialog = ref(false);
+const showFullscreenDialog = ref(false);
+
+// 自定义内容的对话框
+const showCustomDialog = ref(false);
+const customInput = ref('');
+
+// 可拖拽的对话框
+const showDraggableDialog = ref(false);
+
+// 不同位置的对话框
+const showTopDialog = ref(false);
+const showCenterDialog = ref(false);
+
+// 自定义确认处理函数
+const handleCustomConfirm = () => {
+  // 在实际应用中，这里可以添加表单验证或数据处理逻辑
+  console.log('自定义确认按钮点击，输入内容：', customInput.value);
+  showCustomDialog.value = false;
+};
+</script>
+
+<style lang="less" scoped>
+.dialog-demo {
+  padding: 20px;
+  
+  h1 {
+    margin-bottom: 20px;
+  }
+  
+  h2 {
+    margin-top: 30px;
+    margin-bottom: 16px;
+  }
+  
+  .demo-section {
+    margin-bottom: 24px;
+  }
+}
+</style> 

package/src/views/EbizDetailBlockDemo.vue

@@ -0,0 +1,31 @@
+<template>
+    <div>
+        <ebiz-route-breadcrumb />
+        <ebiz-detail-block :model="model" :labelMap="labelMap" :gap="10" :labelSize="20" :labelColor="'#000'" :valueSize="20" :valueColor="'#000'"/>
+    </div>
+</template>
+
+<script>
+import { EbizDetailBlock } from '@/index.js'
+
+export default {
+    name: 'EbizDetailBlockDemo',
+    components: {
+        EbizDetailBlock
+    },
+    data() {
+        return {
+            model: {
+                "name": "张三",
+                "sex": "男"
+            },
+            labelMap:{
+                "name": "姓名",
+                "sex": "性别"
+            }
+        }
+    },
+}
+</script>
+
+<style scoped></style>

package/src/views/Home.vue

@@ -1,12 +1,22 @@
 <template>
   <div class="home">
-    <h1>组件库示例</h1>
+    <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>
@@ -52,7 +62,14 @@ export default {
       { path: '/watermark', title: 'TDesign水印组件示例' },
       { path: '/ebiz-avatar', title: 'Ebiz头像组件示例' },
       { path: '/ebiz-employee-info', title: 'Ebiz员工信息组件示例' },
-      { path: '/tdesign-alert', title: 'TDesign提示组件示例' }
+      { 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树组件示例' }
     ]
 
     return {
@@ -90,4 +107,18 @@ export default {
 .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/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/RemoteSelect.vue

@@ -1,20 +1,351 @@
 <template>
-  <div>
+  <div class="remote-select-demo-container">
     <ebiz-route-breadcrumb />
-    <ebiz-remote-select />
+    
+    <div class="demo-section">
+      <h3>基础用法</h3>
+      <p>基础的远程搜索选择器，支持远程数据加载</p>
+      <div class="demo-block">
+        <ebiz-remote-select 
+          v-model="selectedValue" 
+          :apiConfig="apiConfig"
+          @change="handleChange"
+        />
+        <div class="selected-value">当前选中值: {{ selectedValue || '暂无选择' }}</div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>多选模式</h3>
+      <p>设置 multiple 属性启用多选模式</p>
+      <div class="demo-block">
+        <ebiz-remote-select 
+          v-model="multipleSelectedValue" 
+          :apiConfig="apiConfig" 
+          multiple
+          @change="handleMultipleChange"
+        />
+        <div class="selected-value">当前选中值: {{ multipleSelectedValue?.length ? multipleSelectedValue.join(', ') : '暂无选择' }}</div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>不同数据源</h3>
+      <p>可通过不同的API配置加载不同数据源</p>
+      <div class="demo-block">
+        <div class="data-source-row">
+          <span class="source-label">用户数据：</span>
+          <ebiz-remote-select 
+            v-model="dataSourceValues.users" 
+            :apiConfig="dataSourceConfigs.users"
+            placeholder="选择用户"
+          />
+        </div>
+        <div class="data-source-row">
+          <span class="source-label">产品数据：</span>
+          <ebiz-remote-select 
+            v-model="dataSourceValues.products" 
+            :apiConfig="dataSourceConfigs.products"
+            placeholder="选择产品"
+          />
+        </div>
+        <div class="data-source-row">
+          <span class="source-label">城市数据：</span>
+          <ebiz-remote-select 
+            v-model="dataSourceValues.cities" 
+            :apiConfig="dataSourceConfigs.cities"
+            placeholder="选择城市"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>不同尺寸</h3>
+      <p>提供三种不同尺寸的选择器</p>
+      <div class="demo-block">
+        <div class="size-row">
+          <span class="size-label">小尺寸：</span>
+          <ebiz-remote-select 
+            v-model="sizeValues.small" 
+            :apiConfig="apiConfig" 
+            size="small"
+            placeholder="小尺寸选择器"
+          />
+        </div>
+        <div class="size-row">
+          <span class="size-label">中尺寸：</span>
+          <ebiz-remote-select 
+            v-model="sizeValues.medium" 
+            :apiConfig="apiConfig" 
+            size="medium"
+            placeholder="中尺寸选择器"
+          />
+        </div>
+        <div class="size-row">
+          <span class="size-label">大尺寸：</span>
+          <ebiz-remote-select 
+            v-model="sizeValues.large" 
+            :apiConfig="apiConfig" 
+            size="large"
+            placeholder="大尺寸选择器"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>禁用状态</h3>
+      <p>设置 disabled 属性禁用选择器</p>
+      <div class="demo-block">
+        <ebiz-remote-select 
+          v-model="disabledValue" 
+          :apiConfig="apiConfig" 
+          disabled
+          placeholder="禁用状态"
+        />
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>带前缀图标</h3>
+      <p>通过 slot 自定义前缀图标</p>
+      <div class="demo-block">
+        <ebiz-remote-select 
+          v-model="prefixIconValue" 
+          :apiConfig="apiConfig" 
+          placeholder="带前缀图标的选择器"
+        >
+          <template #prefix>
+            <t-icon name="search" />
+          </template>
+        </ebiz-remote-select>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>自定义查询参数</h3>
+      <p>通过 queryParams 自定义查询参数</p>
+      <div class="demo-block">
+        <div class="query-params-control">
+          <t-input v-model="customQueryParam" placeholder="输入过滤条件" />
+          <t-button theme="primary" style="margin-left: 8px;" @click="updateQueryParams">应用过滤</t-button>
+        </div>
+        <ebiz-remote-select 
+          v-model="queryParamsValue" 
+          :apiConfig="apiConfig" 
+          :queryParams="queryParams"
+          placeholder="带自定义查询参数的选择器"
+        />
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>API 参考</h3>
+      <t-table :data="propsData" :columns="propsColumns" bordered size="small" stripe />
+      <h4 style="margin-top: 16px;">事件</h4>
+      <t-table :data="eventsData" :columns="eventsColumns" bordered size="small" stripe />
+      <h4 style="margin-top: 16px;">插槽</h4>
+      <t-table :data="slotsData" :columns="slotsColumns" bordered size="small" stripe />
+    </div>
   </div>
 </template>
 
 <script>
+import { defineComponent } from 'vue'
 import { EbizRemoteSelect } from '@/index.js'
+import { Icon, Button, Input, Table } from 'tdesign-vue-next'
 
-export default {
+// 替换实际的数据服务 - 用于演示
+import dataServiceModule from '../apiService/simpleDataService'
+// 备份原始fetch方法
+dataServiceModule.fetch = dataServiceModule.fetch
+
+export default defineComponent({
   name: 'RemoteSelectDemo',
   components: {
-    EbizRemoteSelect
+    EbizRemoteSelect,
+    TIcon: Icon,
+    TButton: Button,
+    TInput: Input,
+    TTable: Table
+  },
+  data() {
+    return {
+      // 基础示例的选中值
+      selectedValue: '',
+      
+      // 多选示例的选中值
+      multipleSelectedValue: [],
+      
+      // 不同数据源示例的选中值
+      dataSourceValues: {
+        users: '',
+        products: '',
+        cities: ''
+      },
+      
+      // 不同数据源配置
+      dataSourceConfigs: {
+        users: {
+          key: 'user_options',
+          apiId: 'mockUserList',
+          apiType: 'MULTIPLE_DATA_SEARCH'
+        },
+        products: {
+          key: 'product_options',
+          apiId: 'mockProductList',
+          apiType: 'MULTIPLE_DATA_SEARCH'
+        },
+        cities: {
+          key: 'city_options',
+          apiId: 'mockCityList',
+          apiType: 'MULTIPLE_DATA_SEARCH'
+        }
+      },
+      
+      // 不同尺寸示例的选中值
+      sizeValues: {
+        small: '',
+        medium: '',
+        large: ''
+      },
+      
+      // 禁用状态示例的选中值
+      disabledValue: '',
+      
+      // 带前缀图标示例的选中值
+      prefixIconValue: '',
+      
+      // 自定义查询参数示例
+      queryParamsValue: '',
+      customQueryParam: '',
+      queryParams: {},
+      
+      // API配置
+      apiConfig: {
+        key: 'user_options',
+        apiId: 123,
+        apiType: 'MULTIPLE_DATA_SEARCH'
+      },
+      
+      // API参考数据
+      propsColumns: [
+        { colKey: 'name', title: '属性名', width: '15%' },
+        { colKey: 'type', title: '类型', width: '15%' },
+        { colKey: 'default', title: '默认值', width: '15%' },
+        { colKey: 'desc', title: '说明' }
+      ],
+      propsData: [
+        { name: 'apiConfig', type: 'Object', default: '{}', desc: 'API配置，包含 key, apiId, apiType 属性' },
+        { name: 'queryParams', type: 'Object', default: '{}', desc: '查询参数，用于传递给后端API的查询条件' },
+        { name: 'multiple', type: 'Boolean', default: 'false', desc: '是否支持多选' },
+        { name: 'placeholder', type: 'String', default: '请选择', desc: '输入框占位文本' },
+        { name: 'clearable', type: 'Boolean', default: 'true', desc: '是否可以清空选项' },
+        { name: 'disabled', type: 'Boolean', default: 'false', desc: '是否禁用' },
+        { name: 'modelValue', type: 'String / Number / Array', default: "''", desc: '选择器选中值' },
+        { name: 'optionsConfig', type: 'Object', default: '{}', desc: '选项配置，包含 labelField, valueField 属性' },
+        { name: 'size', type: 'String', default: 'medium', desc: '组件尺寸，可选值为 small / medium / large' },
+        { name: 'emptyText', type: 'String', default: '暂无数据', desc: '空数据提示文本' },
+        { name: 'popupProps', type: 'Object', default: '{}', desc: '下拉弹出层的配置选项' }
+      ],
+      
+      eventsColumns: [
+        { colKey: 'name', title: '事件名', width: '15%' },
+        { colKey: 'params', title: '参数', width: '25%' },
+        { colKey: 'desc', title: '说明' }
+      ],
+      eventsData: [
+        { name: 'update:modelValue', params: '(value: String / Number / Array)', desc: '选中值变化时触发，用于 v-model 双向绑定' },
+        { name: 'change', params: '(value: String / Number / Array, context: Object)', desc: '选中值发生变化时触发' },
+        { name: 'focus', params: '(value: String / Number / Array, context: Object)', desc: '获得焦点时触发' },
+        { name: 'blur', params: '(value: String / Number / Array, context: Object)', desc: '失去焦点时触发' }
+      ],
+      
+      slotsColumns: [
+        { colKey: 'name', title: '插槽名', width: '15%' },
+        { colKey: 'desc', title: '说明' }
+      ],
+      slotsData: [
+        { name: 'prefix', desc: '自定义选择器前缀图标内容' },
+        { name: 'suffix', desc: '自定义选择器后缀图标内容' }
+      ]
+    }
+  },
+  methods: {
+    // 基础示例的选中值变化处理
+    handleChange(value) {
+      console.log('基础示例选中值变化:', value)
+    },
+    
+    // 多选示例的选中值变化处理
+    handleMultipleChange(value) {
+      console.log('多选示例选中值变化:', value)
+    },
+    
+    // 更新自定义查询参数
+    updateQueryParams() {
+      this.queryParams = {
+        keyword: this.customQueryParam
+      }
+    }
+  },
+  // 在组件卸载时恢复原始的fetch方法
+  unmounted() {
+    dataServiceModule.fetch = originalFetch
   }
-}
+})
 </script>
 
 <style scoped>
+.remote-select-demo-container {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 30px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 20px;
+}
+
+.demo-section h3 {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.demo-section p {
+  color: #666;
+  margin-bottom: 16px;
+}
+
+.demo-block {
+  background: #f9f9f9;
+  padding: 20px;
+  border-radius: 6px;
+  margin-top: 10px;
+}
+
+.selected-value {
+  margin-top: 10px;
+  font-size: 14px;
+  color: #666;
+}
+
+.size-row, .data-source-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.size-label, .source-label {
+  width: 70px;
+  text-align: right;
+  margin-right: 8px;
+}
+
+.query-params-control {
+  display: flex;
+  margin-bottom: 16px;
+}
 </style>