@ebiz/designer-components 0.0.18-tj.1 → 0.0.19-beta.1

package/src/components/TdesignWatermark.vue

@@ -0,0 +1,108 @@
+<template>
+    <t-watermark
+        :alpha="alpha"
+        :watermark-content="watermarkContent"
+        :width="width"
+        :height="height"
+        :x="x"
+        :y="y"
+        :rotate="rotate"
+        :zIndex="zIndex"
+        :isRepeat="isRepeat"
+        :movable="movable"
+        :gapX="gapX"
+        :gapY="gapY"
+        :offset="offset"
+        :lineSpace="lineSpace"
+    >
+        <slot></slot>
+    </t-watermark>
+</template>
+
+<script>
+export default {
+    name: "EbizWatermark"
+}
+</script>
+
+<script setup>
+import { defineProps } from 'vue';
+import { Watermark as TWatermark } from 'tdesign-vue-next';
+
+defineProps({
+    // 水印透明度
+    alpha: {
+        type: Number,
+        default: 1
+    },
+    // 水印内容
+    watermarkContent: {
+        type: [String, Object],
+        default: () => ({ text: '' })
+    },
+    // 水印宽度
+    width: {
+        type: Number,
+        default: 120
+    },
+    // 水印高度
+    height: {
+        type: Number,
+        default: 64
+    },
+    // 水印x轴偏移量
+    x: {
+        type: Number,
+        default: 0
+    },
+    // 水印y轴偏移量
+    y: {
+        type: Number,
+        default: 0
+    },
+    // 水印旋转角度
+    rotate: {
+        type: Number,
+        default: -22
+    },
+    // 水印层级
+    zIndex: {
+        type: Number,
+        default: 9
+    },
+    // 水印是否重复铺满整个页面
+    isRepeat: {
+        type: Boolean,
+        default: true
+    },
+    // 水印是否可移动
+    movable: {
+        type: Boolean,
+        default: false
+    },
+    // 水印之间的水平间距
+    gapX: {
+        type: Number,
+        default: 212
+    },
+    // 水印之间的垂直间距
+    gapY: {
+        type: Number,
+        default: 222
+    },
+    // 水印整体的偏移量
+    offset: {
+        type: Array,
+        default: () => [0, 0]
+    },
+    // 多行水印的行间距
+    lineSpace: {
+        type: Number,
+        default: 16
+    }
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/index.js

@@ -22,6 +22,7 @@ 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";
@@ -29,6 +30,32 @@ 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";
@@ -38,6 +65,10 @@ 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,
@@ -62,6 +93,8 @@ export {
   EbizRemoteSelect,
   EbizRouteBreadcrumb,
   EbizTabHeader,
+  // 页面头部组件
+  EbizPageHeader,
   // 思维导图
   EbizMindmap,
   // 文件上传组件
@@ -79,6 +112,58 @@ export {
   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
 };

package/src/main.js

@@ -23,8 +23,8 @@ import {
   dataService
 } from './index.js'
 
-import "tdesign-vue-next/es/style/index.css"
-import "./assets/styles/charts/main.less"
+import 'tdesign-vue-next/es/style/index.css'
+import './assets/styles/charts/main.less'
 
 const app = createApp(App)
 

package/src/router/index.js

@@ -1,10 +1,13 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../views/Home.vue'
+import ButtonView from '../views/Button.vue'
+import TableView from '../views/TableView.vue'
 
 const routes = [
   {
     path: '/',
     name: 'Home',
-    component: () => import('../views/Home.vue'),
+    component: Home,
     meta: { title: '首页' }
   },
   {
@@ -15,10 +18,16 @@ const routes = [
   },
   {
     path: '/table',
-    name: 'Table',
-    component: () => import('../views/Table.vue'),
+    name: 'table',
+    component: TableView,
     meta: { title: '表格组件示例' }
   },
+  {
+    path: '/table-column',
+    name: 'table-column',
+    component: TableView,
+    meta: { title: '表格列组件示例' }
+  },
   {
     path: '/form',
     name: 'Form',
@@ -27,8 +36,8 @@ const routes = [
   },
   {
     path: '/button',
-    name: 'Button',
-    component: () => import('../views/Button.vue'),
+    name: 'button',
+    component: ButtonView,
     meta: { title: '按钮组件示例' }
   },
   {
@@ -144,6 +153,152 @@ const routes = [
     name: 'EbizSpace',
     component: () => import('../views/EbizSpace.vue'),
     meta: { title: 'Ebiz间距组件示例' }
+  },
+  {
+    path: '/pagination',
+    name: 'Pagination',
+    component: () => import('../views/PaginationDemo.vue'),
+    meta: { title: 'EbizPagination分页组件示例' }
+  },
+  {
+    path: '/checkbox',
+    name: 'Checkbox',
+    component: () => import('../views/CheckboxDemo.vue'),
+    meta: { title: 'Ebiz多选框组件示例' }
+  },
+  {
+    path: '/radio',
+    name: 'Radio',
+    component: () => import('../views/EbizRadioDemo.vue'),
+    meta: { title: 'Ebiz单选框组件示例' }
+  },
+  {
+    path: '/switch',
+    name: 'Switch',
+    component: () => import('../views/SwitchDemo.vue'),
+    meta: { title: 'Ebiz开关组件示例' }
+  },
+  {
+    path: '/textarea',
+    name: 'Textarea',
+    component: () => import('../views/TextareaDemo.vue'),
+    meta: { title: 'Ebiz多行文本框组件示例' }
+  },
+  {
+    path: '/upload',
+    name: 'Upload',
+    component: () => import('../views/UploadDemo.vue'),
+    meta: { title: 'TDesign上传组件示例' }
+  },
+  {
+    path: '/grid',
+    name: 'Grid',
+    component: () => import('../views/GridDemo.vue'),
+    meta: { title: 'TDesign栅格组件示例' }
+  },
+  {
+    path: '/tabs',
+    name: 'Tabs',
+    component: () => import('../views/TabsDemo.vue'),
+    meta: { title: 'Ebiz选项卡组件示例' }
+  },
+  {
+    path: '/statistic',
+    name: 'Statistic',
+    component: () => import('../views/StatisticDemo.vue'),
+    meta: { title: 'Ebiz统计数值组件示例' }
+  },
+  {
+    path: '/timeline',
+    name: 'Timeline',
+    component: () => import('../views/TimelineDemo.vue'),
+    meta: { title: 'Ebiz时间轴组件示例' }
+  },
+  {
+    path: '/watermark',
+    name: 'Watermark',
+    component: () => import('../views/WatermarkDemo.vue'),
+    meta: { title: 'TDesign水印组件示例' }
+  },
+  {
+    path: '/ebiz-avatar',
+    name: 'EbizAvatar',
+    component: () => import('../views/EbizAvatar.vue'),
+    meta: { title: 'Ebiz头像组件示例' }
+  },
+  {
+    path: '/ebiz-employee-info',
+    name: 'EbizEmployeeInfo',
+    component: () => import('../views/EbizEmployeeInfo.vue'),
+    meta: { title: 'Ebiz员工信息组件示例' }
+  },
+  {
+    path: '/tdesign-alert',
+    name: 'TdesignAlert',
+    component: () => import('../views/TdesignAlert.vue'),
+    meta: { title: 'TDesign提示组件示例' }
+  },
+  {
+    path: '/tdesign-dialog',
+    name: 'TdesignDialog',
+    component: () => import('../views/DialogDemo.vue'),
+    meta: { title: 'TDesign对话框组件示例' }
+  },
+  {
+    path: '/page-header',
+    name: 'PageHeader',
+    component: () => import('../views/PageHeaderDemo.vue'),
+    meta: { title: 'Ebiz页面头部组件示例', icon: 'header' }
+  },
+  {
+    path: '/table-demo',
+    name: 'TableDemo',
+    component: () => import('../views/TableDemo.vue'),
+    meta: { title: 'Ebiz表格组件示例' }
+  },
+  {
+    path: '/table-sort',
+    name: 'TableSort',
+    component: () => import('../views/TableSortDemo.vue'),
+    meta: { title: 'Ebiz表格排序组件示例' }
+  },
+  {
+    path: '/ebiz-detail-block',
+    name: 'EbizDetailBlock',
+    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',
+    component: () => import('../views/TreeDemo.vue'),
+    meta: { title: 'Ebiz树组件示例' }
+  },
+  {
+    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: '树选择器组件示例' }
+  },
+  {
+    path: '/time-picker',
+    name: 'TimePicker',
+    component: () => import('../views/TimePickerDemo.vue'),
+    meta: { title: '时间选择器组件示例' }
   }
 ]
 

package/src/views/Button.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <ebiz-route-breadcrumb />
-    <ebiz-button />
+    <ebiz-button :text="测试" :apiConfig="{ apiId: 802, apiType: 5 }" @prepare="onPrepare" />
   </div>
 </template>
 
@@ -12,9 +12,13 @@ export default {
   name: 'ButtonDemo',
   components: {
     EbizButton
+  },
+  methods: {
+    onPrepare() {
+      
+    }
   }
 }
 </script>
 
-<style scoped>
-</style> 
+<style scoped></style>

package/src/views/CheckboxDemo.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="checkbox-demo">
+    <h2>多选框组件示例</h2>
+
+    <h3>基础多选框</h3>
+    <div class="demo-section">
+      <EbizCheckbox>未选中项</EbizCheckbox>
+      <EbizCheckbox v-model="checkbox1">选中项</EbizCheckbox>
+      <EbizCheckbox :disabled="true">未选禁用项</EbizCheckbox>
+      <EbizCheckbox v-model="checkboxDisabled" :disabled="true">选中禁用项</EbizCheckbox>
+    </div>
+
+    <h3>半选状态</h3>
+    <div class="demo-section">
+      <EbizCheckbox :indeterminate="true">半选状态</EbizCheckbox>
+    </div>
+
+    <h3>多选框组</h3>
+    <div class="demo-section">
+      <p>选中值：{{ groupValue }}</p>
+      <EbizCheckboxGroup v-model="groupValue" :options="options" @change="onGroupChange" />
+    </div>
+
+    <h3>全选功能</h3>
+    <div class="demo-section">
+      <p>选中值：{{ allCheckValue }}</p>
+      <EbizCheckboxGroup v-model="allCheckValue">
+        <EbizCheckbox :check-all="true" @change="onCheckAllChange">全选</EbizCheckbox>
+        <EbizCheckbox value="1">选项一</EbizCheckbox>
+        <EbizCheckbox value="2">选项二</EbizCheckbox>
+        <EbizCheckbox value="3">选项三</EbizCheckbox>
+      </EbizCheckboxGroup>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CheckboxDemo"
+}
+</script>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizCheckbox, EbizCheckboxGroup } from '../index.js';
+
+// 单个多选框状态
+const checkbox1 = ref(true);
+const checkboxDisabled = ref(true);
+
+// 多选框组的值
+const groupValue = ref(['option1']);
+
+// 多选框组的配置选项
+const options = [
+  { label: '选项一', value: 'option1' },
+  { label: '选项二', value: 'option2' },
+  { label: '选项三', value: 'option3', disabled: true }
+];
+
+// 多选框组的值变化事件
+const onGroupChange = (value, context) => {
+  console.log('选中值变化:', value);
+  console.log('上下文信息:', context);
+};
+
+// 全选功能的值
+const allCheckValue = ref(['1']);
+
+// 全选状态变化事件
+const onCheckAllChange = (checked) => {
+  if (checked) {
+    allCheckValue.value = ['1', '2', '3'];
+  } else {
+    allCheckValue.value = [];
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.checkbox-demo {
+  padding: 20px;
+
+  h2 {
+    margin-bottom: 20px;
+    font-size: 24px;
+  }
+
+  h3 {
+    margin: 20px 0 10px;
+    font-size: 18px;
+  }
+
+  .demo-section {
+    padding: 16px;
+    margin-bottom: 16px;
+    border: 1px solid #eee;
+    border-radius: 4px;
+
+    .t-checkbox {
+      margin-right: 16px;
+    }
+  }
+}
+</style> 

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>