@ebiz/designer-components 0.0.19-beta.3 → 0.0.19-beta.6

package/src/index.js

@@ -1,169 +1,177 @@
-import MyComponent from "./components/MyComponent.vue";
-import MyTable from "./components/Table.vue";
-import EbizFormContainer from "./components/Form.vue";
-import EbizButton from "./components/Button.vue";
-import EbizTdesignButton from "./components/TdesignButton.vue";
-import EbizTdesignIcon from "./components/TdesignIcon.vue";
-import EbizTdesignInput from "./components/TdesignInput.vue";
-import EbizTdesignSelect from "./components/TdesignSelect.vue";
-import EbizTdesignForm from "./components/TdesignForm.vue";
-import EbizTdesignFormItem from "./components/TdesignFormItem.vue";
-import EbizTdesignDatePicker from "./components/TdesignDatePicker.vue";
-import EbizTdesignCard from "./components/TdesignCard.vue";
-import EbizTdesignImage from "./components/TdesignImage.vue";
-import EbizTdesignImageViewer from "./components/TdesignImageViewer.vue";
-import EbizDataContainer from "./components/DataContainer.vue";
-import EbizTitle from "./components/EbizTitle.vue";
-import EbizDivider from "./components/EbizDivider.vue";
-import EbizStatsCard from "./components/EbizStatsCard.vue";
-import EbizOkrTree from "./components/EbizOkrTree.vue";
-import EbizRemoteSelect from "./components/EbizRemoteSelect.vue";
-import EbizMindmap from "./components/EbizMindmap/index.vue";
-import EbizRouteBreadcrumb from "./components/EbizRouteBreadcrumb.vue";
-import EbizFileUpload from "./components/EbizFileUpload.vue";
-import EbizTabHeader from "./components/EbizTabHeader.vue";
-import EbizPageHeader from "./components/EbizPageHeader.vue";
-import TdesignCalendar from "./components/TdesignCalendar/index.vue";
-import TdesignCollapse from "./components/TdesignCollapse.vue";
-import TdesignCollapsePanel from "./components/TdesignCollapsePanel.vue";
-import EbizTag from "./components/TdesignTag.vue";
-import EbizSwiper from "./components/EbizSwiper.vue";
-import EbizSwiperItem from "./components/EbizSwiperItem.vue";
-import EbizSpace from "./components/EbizSpace.vue";
-import EbizPagination from "./components/EbizPagination.vue";
-import EbizCheckbox from "./components/EbizCheckbox.vue";
-import EbizCheckboxGroup from "./components/EbizCheckboxGroup.vue";
-import EbizRadio from "./components/EbizRadio.vue";
-import EbizRadioGroup from "./components/EbizRadioGroup.vue";
-import EbizSwitch from "./components/EbizSwitch.vue";
-import EbizTextarea from "./components/TdesignTextarea.vue";
-import EbizUpload from "./components/TdesignUpload.vue";
-import EbizGrid from "./components/TdesignGrid.vue";
-import EbizCol from "./components/TdesignCol.vue";
-import EbizTabs from "./components/EbizTabs.vue";
-import EbizTabPanel from "./components/EbizTabPanel.vue";
-import EbizStatistic from "./components/EbizStatistic.vue";
-import EbizWatermark from "./components/TdesignWatermark.vue";
-import EbizAvatar from "./components/EbizAvatar.vue";
-import EbizEmployeeInfo from "./components/EbizEmployeeInfo.vue";
-import EbizAlert from "./components/TdesignAlert.vue";
-import EbizDialog from "./components/TdesignDialog.vue";
-import EbizTable from "./components/EbizTable.vue";
-import EbizTableColumn from './components/EbizTableColumn.vue';
-import EbizTableSort from './components/EbizTableSort.vue';
-import EbizDetailBlock from './components/EbizDetailBlock.vue';
-import EbizTree from './components/EbizTree.vue';
-import EbizTreeSelector from './components/EbizTreeSelector.vue';
-import EbizTimePicker from './components/EbizTimePicker.vue';
-import { MessagePlugin as EbizMessage } from 'tdesign-vue-next';
-
-// 导入简洁数据服务
-import dataService from "./apiService/simpleDataService";
-
-import "tdesign-vue-next/es/style/index.css";
-
-// 导入图表样式
-import "./assets/styles/charts/main.less";
-
-// 时间轴组件
-import EbizTimeline from "./components/TdesignTimeline.vue";
-import {TimelineItem as EbizTimelineItem} from 'tdesign-vue-next';
-
-// 导出组件
-export {
-  MyComponent,
-  MyTable,
-  EbizFormContainer,
-  EbizButton,
-  EbizTdesignButton,
-  EbizTdesignIcon,
-  EbizTdesignInput,
-  EbizTdesignSelect,
-  EbizTdesignForm,
-  EbizTdesignFormItem,
-  EbizTdesignDatePicker,
-  EbizTdesignCard,
-  EbizTdesignImage,
-  EbizTdesignImageViewer,
-  EbizDataContainer,
-  EbizTitle,
-  EbizDivider,
-  EbizStatsCard,
-  EbizOkrTree,
-  EbizRemoteSelect,
-  EbizRouteBreadcrumb,
-  EbizTabHeader,
-  // 页面头部组件
-  EbizPageHeader,
-  // 思维导图
-  EbizMindmap,
-  // 文件上传组件
-  EbizFileUpload,
-  // 日历组件
-  TdesignCalendar,
-  // 折叠面板组件
-  TdesignCollapse,
-  TdesignCollapsePanel,
-  // 标签组件
-  EbizTag,
-  // 轮播框组件
-  EbizSwiper,
-  // 轮播框子项组件
-  EbizSwiperItem,
-  // 间距组件
-  EbizSpace,
-  // 分页组件
-  EbizPagination,
-  // 多选框组件
-  EbizCheckbox,
-  // 多选框组组件
-  EbizCheckboxGroup,
-  // 数据服务
-  dataService,
-  // 新增 EbizRadio 和 EbizRadioGroup
-  EbizRadio,
-  EbizRadioGroup,
-  // 开关组件
-  EbizSwitch,
-  // 多行文本框组件
-  EbizTextarea,
-  // TDesign上传组件
-  EbizUpload,
-  // 栅格布局组件
-  EbizGrid,
-  // 栅格列组件
-  EbizCol,
-  // 选项卡组件
-  EbizTabs,
-  // 选项卡面板组件
-  EbizTabPanel,
-  // 统计数值组件
-  EbizStatistic,
-  // 消息插件
-  EbizMessage,
-  // 时间轴组件
-  EbizTimeline,
-  EbizTimelineItem,
-  // 水印组件
-  EbizWatermark,
-  // 头像组件
-  EbizAvatar,
-  // 员工信息组件
-  EbizEmployeeInfo,
-  // 提示组件
-  EbizAlert,
-  // 对话框组件
-  EbizDialog,
-  // 表格组件
-  EbizTable,
-  EbizTableColumn,
-  // 表格排序组件
-  EbizTableSort,
-  // 详情块组件
-  EbizDetailBlock,
-  // 树组件
-  EbizTree,
-  EbizTreeSelector,
-  // 时间选择器组件
-  EbizTimePicker
-};
+import MyComponent from "./components/MyComponent.vue";
+import MyTable from "./components/Table.vue";
+import EbizFormContainer from "./components/Form.vue";
+import EbizButton from "./components/Button.vue";
+import EbizTdesignButton from "./components/TdesignButton.vue";
+import EbizTdesignIcon from "./components/TdesignIcon.vue";
+import EbizTdesignInput from "./components/TdesignInput.vue";
+import EbizTdesignSelect from "./components/TdesignSelect.vue";
+import EbizTdesignForm from "./components/TdesignForm.vue";
+import EbizTdesignFormItem from "./components/TdesignFormItem.vue";
+import EbizTdesignDatePicker from "./components/TdesignDatePicker.vue";
+import EbizTdesignCard from "./components/TdesignCard.vue";
+import EbizTdesignImage from "./components/TdesignImage.vue";
+import EbizTdesignImageViewer from "./components/TdesignImageViewer.vue";
+import EbizDataContainer from "./components/DataContainer.vue";
+import EbizTitle from "./components/EbizTitle.vue";
+import EbizDivider from "./components/EbizDivider.vue";
+import EbizStatsCard from "./components/EbizStatsCard.vue";
+import EbizOkrTree from "./components/EbizOkrTree.vue";
+import EbizRemoteSelect from "./components/EbizRemoteSelect.vue";
+import EbizMindmap from "./components/EbizMindmap/index.vue";
+import EbizRouteBreadcrumb from "./components/EbizRouteBreadcrumb.vue";
+import EbizFileUpload from "./components/EbizFileUpload.vue";
+import EbizTabHeader from "./components/EbizTabHeader.vue";
+import EbizPageHeader from "./components/EbizPageHeader.vue";
+import TdesignCalendar from "./components/TdesignCalendar/index.vue";
+import TdesignCollapse from "./components/TdesignCollapse.vue";
+import TdesignCollapsePanel from "./components/TdesignCollapsePanel.vue";
+import EbizTag from "./components/TdesignTag.vue";
+import EbizSwiper from "./components/EbizSwiper.vue";
+import EbizSwiperItem from "./components/EbizSwiperItem.vue";
+import EbizSpace from "./components/EbizSpace.vue";
+import EbizPagination from "./components/EbizPagination.vue";
+import EbizCheckbox from "./components/EbizCheckbox.vue";
+import EbizCheckboxGroup from "./components/EbizCheckboxGroup.vue";
+import EbizRadio from "./components/EbizRadio.vue";
+import EbizRadioGroup from "./components/EbizRadioGroup.vue";
+import EbizSwitch from "./components/EbizSwitch.vue";
+import EbizTextarea from "./components/TdesignTextarea.vue";
+import EbizUpload from "./components/TdesignUpload.vue";
+import EbizGrid from "./components/TdesignGrid.vue";
+import EbizCol from "./components/TdesignCol.vue";
+import EbizTabs from "./components/EbizTabs.vue";
+import EbizTabPanel from "./components/EbizTabPanel.vue";
+import EbizStatistic from "./components/EbizStatistic.vue";
+import EbizWatermark from "./components/TdesignWatermark.vue";
+import EbizAvatar from "./components/EbizAvatar.vue";
+import EbizEmployeeInfo from "./components/EbizEmployeeInfo.vue";
+import EbizAlert from "./components/TdesignAlert.vue";
+import EbizDialog from "./components/TdesignDialog.vue";
+import EbizTable from "./components/EbizTable.vue";
+import EbizTableColumn from './components/EbizTableColumn.vue';
+import EbizTableSort from './components/EbizTableSort.vue';
+import EbizDetailBlock from './components/EbizDetailBlock.vue';
+import EbizTree from './components/EbizTree.vue';
+import EbizTreeSelector from './components/EbizTreeSelector.vue';
+import EbizTimePicker from './components/EbizTimePicker.vue';
+import EbizPopconfirm from './components/EbizPopconfirm.vue';
+import { MessagePlugin as EbizMessage } from 'tdesign-vue-next';
+
+import { Descriptions as EbizDescriptions, DescriptionsItem as EbizDescriptionsItem } from 'tdesign-vue-next';
+
+// 导入简洁数据服务
+import dataService from "./apiService/simpleDataService";
+
+import "tdesign-vue-next/es/style/index.css";
+
+// 导入图表样式
+import "./assets/styles/charts/main.less";
+
+// 时间轴组件
+import EbizTimeline from "./components/TdesignTimeline.vue";
+import {TimelineItem as EbizTimelineItem} from 'tdesign-vue-next';
+
+// 导出组件
+export {
+  MyComponent,
+  MyTable,
+  EbizFormContainer,
+  EbizButton,
+  EbizTdesignButton,
+  EbizTdesignIcon,
+  EbizTdesignInput,
+  EbizTdesignSelect,
+  EbizTdesignForm,
+  EbizTdesignFormItem,
+  EbizTdesignDatePicker,
+  EbizTdesignCard,
+  EbizTdesignImage,
+  EbizTdesignImageViewer,
+  EbizDataContainer,
+  EbizTitle,
+  EbizDivider,
+  EbizStatsCard,
+  EbizOkrTree,
+  EbizRemoteSelect,
+  EbizRouteBreadcrumb,
+  EbizTabHeader,
+  // 页面头部组件
+  EbizPageHeader,
+  // 思维导图
+  EbizMindmap,
+  // 文件上传组件
+  EbizFileUpload,
+  // 日历组件
+  TdesignCalendar,
+  // 折叠面板组件
+  TdesignCollapse,
+  TdesignCollapsePanel,
+  // 标签组件
+  EbizTag,
+  // 轮播框组件
+  EbizSwiper,
+  // 轮播框子项组件
+  EbizSwiperItem,
+  // 间距组件
+  EbizSpace,
+  // 分页组件
+  EbizPagination,
+  // 多选框组件
+  EbizCheckbox,
+  // 多选框组组件
+  EbizCheckboxGroup,
+  // 数据服务
+  dataService,
+  // 新增 EbizRadio 和 EbizRadioGroup
+  EbizRadio,
+  EbizRadioGroup,
+  // 开关组件
+  EbizSwitch,
+  // 多行文本框组件
+  EbizTextarea,
+  // TDesign上传组件
+  EbizUpload,
+  // 栅格布局组件
+  EbizGrid,
+  // 栅格列组件
+  EbizCol,
+  // 选项卡组件
+  EbizTabs,
+  // 选项卡面板组件
+  EbizTabPanel,
+  // 统计数值组件
+  EbizStatistic,
+  // 消息插件
+  EbizMessage,
+  // 时间轴组件
+  EbizTimeline,
+  EbizTimelineItem,
+  // 水印组件
+  EbizWatermark,
+  // 头像组件
+  EbizAvatar,
+  // 员工信息组件
+  EbizEmployeeInfo,
+  // 提示组件
+  EbizAlert,
+  // 对话框组件
+  EbizDialog,
+  // 表格组件
+  EbizTable,
+  EbizTableColumn,
+  // 表格排序组件
+  EbizTableSort,
+  // 详情块组件
+  EbizDetailBlock,
+  // 树组件
+  EbizTree,
+  EbizTreeSelector,
+  // 时间选择器组件
+  EbizTimePicker,
+  // 气泡确认框组件
+  EbizPopconfirm,
+  // 新增 EbizDescriptions 和 EbizDescriptionsItem
+  EbizDescriptions,
+  EbizDescriptionsItem
+};

package/src/router/index.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import Home from '../views/Home.vue'
 import ButtonView from '../views/Button.vue'
 import TableView from '../views/TableView.vue'
+import TdesignDescriptions from '../views/TdesignDescriptions.vue'
 
 const routes = [
   {
@@ -248,7 +249,7 @@ const routes = [
     path: '/page-header',
     name: 'PageHeader',
     component: () => import('../views/PageHeaderDemo.vue'),
-    meta: { title: 'Ebiz页面头部组件示例', icon: 'header' }
+    meta: { title: 'Ebiz页面头部组件示例' }
   },
   {
     path: '/table-demo',
@@ -263,17 +264,11 @@ const routes = [
     meta: { title: 'Ebiz表格排序组件示例' }
   },
   {
-    path: '/ebiz-detail-block',
-    name: 'EbizDetailBlock',
+    path: '/detail-block',
+    name: 'DetailBlock',
     component: () => import('../views/EbizDetailBlockDemo.vue'),
     meta: { title: 'Ebiz详情块组件示例' }
   },
-  {
-    path: '/tree',
-    name: 'Tree',
-    component: () => import('../views/TreeDemo.vue'),
-    meta: { title: 'Ebiz树组件示例' }
-  },
   {
     path: '/tree-demo',
     name: 'TreeDemo',
@@ -284,21 +279,25 @@ const routes = [
     path: '/tree-selector-demo',
     name: 'TreeSelectorDemo',
     component: () => import('../views/TreeSelectorDemo.vue'),
-    meta: {
-      title: '树形选择器'
-    }
-  },
-  {
-    path: '/tree-selector',
-    name: 'TreeSelector',
-    component: () => import('../views/TreeSelectorDemo.vue'),
-    meta: { title: '树选择器组件示例' }
+    meta: { title: 'Ebiz树选择器组件示例' }
   },
   {
     path: '/time-picker',
     name: 'TimePicker',
     component: () => import('../views/TimePickerDemo.vue'),
-    meta: { title: '时间选择器组件示例' }
+    meta: { title: 'Ebiz时间选择器组件示例' }
+  },
+  {
+    path: '/tdesign-descriptions',
+    name: 'TdesignDescriptions',
+    component: TdesignDescriptions,
+    meta: { title: 'TDesign描述列表组件示例' }
+  },
+  {
+    path: '/popconfirm',
+    name: 'Popconfirm',
+    component: () => import('../views/PopconfirmDemo.vue'),
+    meta: { title: 'Ebiz气泡确认框组件示例' }
   }
 ]
 

package/src/views/Home.vue

@@ -66,12 +66,12 @@ export default {
       { path: '/tdesign-dialog', title: 'TDesign对话框组件示例' },
       { path: '/page-header', title: 'Ebiz页面头部组件示例' },
       { path: '/table-demo', title: 'Ebiz表格组件示例' },
-      { path: '/ebiz-detail-block', title: 'Ebiz详情块组件示例' },
+      { path: '/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: '/time-picker', title: 'Ebiz时间选择器组件示例' },
+      { path: '/tdesign-descriptions', title: 'Ebiz描述列表组件示例' },
+      { path: '/popconfirm', title: 'Ebiz气泡确认框组件示例' }
     ]
 
     return {

package/src/views/PopconfirmDemo.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="popconfirm-demo">
+    <h1>气泡确认框示例</h1>
+    
+    <h2>1. 基础用法</h2>
+    <div class="example-item">
+      <ebiz-popconfirm content="确定要删除这条数据吗？">
+        <ebiz-tdesign-button>删除</ebiz-tdesign-button>
+      </ebiz-popconfirm>
+    </div>
+    
+    <h2>2. 事件处理</h2>
+    <div class="example-item">
+      <p>操作结果: <span>{{ operationResult }}</span></p>
+      <ebiz-popconfirm 
+        content="确定要继续吗？" 
+        @confirm="handleConfirm" 
+        @cancel="handleCancel"
+      >
+        <ebiz-tdesign-button>点击触发事件</ebiz-tdesign-button>
+      </ebiz-popconfirm>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizPopconfirm, EbizTdesignButton, EbizMessage } from '../index';
+
+const operationResult = ref('');
+
+// 确认事件处理
+const handleConfirm = () => {
+  operationResult.value = '您点击了确认按钮';
+  EbizMessage.success('操作已确认');
+};
+
+// 取消事件处理
+const handleCancel = () => {
+  operationResult.value = '您点击了取消按钮';
+  EbizMessage.info('操作已取消');
+};
+</script>
+
+<style lang="less" scoped>
+.popconfirm-demo {
+  padding: 20px;
+  
+  h1 {
+    margin-bottom: 30px;
+    font-weight: bold;
+    color: #0052d9;
+  }
+  
+  h2 {
+    margin-top: 30px;
+    margin-bottom: 16px;
+    font-weight: bold;
+    font-size: 18px;
+    border-left: 4px solid #0052d9;
+    padding-left: 12px;
+  }
+  
+  .example-item {
+    margin-bottom: 24px;
+    padding: 20px;
+    border: 1px solid #eee;
+    border-radius: 6px;
+    background-color: #fafafa;
+  }
+  
+  p {
+    margin-bottom: 10px;
+    
+    span {
+      color: #0052d9;
+      font-weight: bold;
+    }
+  }
+}
+</style> 

package/src/views/TdesignDescriptions.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="container">
+    <h2>描述列表组件演示</h2>
+    
+    <div class="demo-section">
+      <h3>基础用法</h3>
+      <EbizDescriptions title="配送信息" :column="2">
+        <EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地址">深圳市南山区深南大道10000号</EbizDescriptionsItem>
+      </EbizDescriptions>
+    </div>
+
+    <div class="demo-section">
+      <h3>带边框</h3>
+      <EbizDescriptions title="配送信息" :column="2" border>
+        <EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地址">深圳市南山区深南大道10000号</EbizDescriptionsItem>
+      </EbizDescriptions>
+    </div>
+
+    <div class="demo-section">
+      <h3>带冒号</h3>
+      <EbizDescriptions title="配送信息" :column="2" colon>
+        <EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地址">深圳市南山区深南大道10000号</EbizDescriptionsItem>
+      </EbizDescriptions>
+    </div>
+
+    <div class="demo-section">
+      <h3>垂直布局</h3>
+      <EbizDescriptions title="配送信息" :column="2" layout="vertical" border>
+        <EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地址">深圳市南山区深南大道10000号</EbizDescriptionsItem>
+      </EbizDescriptions>
+    </div>
+
+    <div class="demo-section">
+      <h3>自定义列数</h3>
+      <EbizDescriptions title="配送信息" :column="3" border>
+        <EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地址" :span="2">深圳市南山区深南大道10000号</EbizDescriptionsItem>
+      </EbizDescriptions>
+    </div>
+
+    <div class="demo-section">
+      <h3>自定义样式</h3>
+      <EbizDescriptions title="配送信息" :column="2" border table-border-color="#E7E7E7">
+        <EbizDescriptionsItem label="姓名" label-class-name="custom-label">TDesign</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地址" content-class-name="custom-content">
+          <span style="color: #0052d9">深圳市南山区深南大道10000号</span>
+        </EbizDescriptionsItem>
+      </EbizDescriptions>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { EbizDescriptions, EbizDescriptionsItem } from '../index.js';
+</script>
+
+<style scoped>
+.container {
+  padding: 24px;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.demo-section {
+  margin-bottom: 32px;
+}
+
+h2 {
+  font-size: 24px;
+  margin-bottom: 24px;
+}
+
+h3 {
+  font-size: 18px;
+  margin-bottom: 16px;
+}
+
+.custom-label {
+  font-weight: bold;
+  color: #0052d9;
+}
+
+.custom-content {
+  font-style: italic;
+}
+</style>