@ebiz/designer-components 0.0.18 → 0.0.19

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

@@ -2,6 +2,16 @@ 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";
@@ -10,6 +20,42 @@ 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";
@@ -19,12 +65,26 @@ 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,
@@ -32,8 +92,78 @@ export {
   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
 };

package/src/main.js

@@ -6,17 +6,25 @@ import {
   MyTable,
   EbizFormContainer,
   EbizButton,
+  EbizTdesignButton,
+  EbizTdesignIcon,
+  EbizTdesignInput,
+  EbizTdesignSelect,
   EbizDataContainer,
   EbizTitle,
+  EbizDivider,
+  EbizStatsCard,
   EbizOkrTree,
   EbizRemoteSelect,
-  EbizMindmap,
   EbizRouteBreadcrumb,
+  EbizFileUpload,
+  EbizTabHeader,
+  EbizMindmap,
   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)
 
@@ -25,12 +33,20 @@ app.component('MyComponent', MyComponent)
 app.component('MyTable', MyTable)
 app.component('EbizFormContainer', EbizFormContainer)
 app.component('EbizButton', EbizButton)
+app.component('EbizTdesignButton', EbizTdesignButton)
+app.component('EbizTdesignIcon', EbizTdesignIcon)
+app.component('EbizTdesignInput', EbizTdesignInput)
+app.component('EbizTdesignSelect', EbizTdesignSelect)
 app.component('EbizDataContainer', EbizDataContainer)
 app.component('EbizTitle', EbizTitle)
+app.component('EbizDivider', EbizDivider)
+app.component('EbizStatsCard', EbizStatsCard)
 app.component('EbizOkrTree', EbizOkrTree)
 app.component('EbizRemoteSelect', EbizRemoteSelect)
-app.component('EbizMindmap', EbizMindmap)
 app.component('EbizRouteBreadcrumb', EbizRouteBreadcrumb)
+app.component('EbizFileUpload', EbizFileUpload)
+app.component('EbizTabHeader', EbizTabHeader)
+app.component('EbizMindmap', EbizMindmap)
 
 // 注册数据服务
 app.config.globalProperties.$dataService = dataService

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,10 +36,64 @@ const routes = [
   },
   {
     path: '/button',
-    name: 'Button',
-    component: () => import('../views/Button.vue'),
+    name: 'button',
+    component: ButtonView,
     meta: { title: '按钮组件示例' }
   },
+  {
+    path: '/tdesign-button',
+    name: 'TdesignButton',
+    component: () => import('../views/TdesignButton.vue'),
+    meta: { title: 'TDesign按钮组件示例' }
+  },
+  {
+    path: '/tdesign-icon',
+    name: 'TdesignIcon',
+    component: () => import('../views/TdesignIcon.vue'),
+    meta: { title: 'TDesign图标组件示例' }
+  },
+  {
+    path: '/tdesign-input',
+    name: 'TdesignInput',
+    component: () => import('../views/TdesignInput.vue'),
+    meta: { title: 'TDesign输入框组件示例' }
+  },
+  {
+    path: '/tdesign-select',
+    name: 'TdesignSelect',
+    component: () => import('../views/TdesignSelect.vue'),
+    meta: { title: 'TDesign选择器组件示例' }
+  },
+  {
+    path: '/tdesign-card',
+    name: 'TdesignCard',
+    component: () => import('../views/TdesignCard.vue'),
+    meta: { title: 'TDesign卡片组件示例' }
+  },
+  {
+    path: '/tdesign-form',
+    name: 'TdesignForm',
+    component: () => import('../views/TdesignForm.vue'),
+    meta: { title: 'TDesign表单组件示例' }
+  },
+  {
+    path: '/tdesign-date-picker',
+    name: 'TdesignDatePicker',
+    component: () => import('../views/TdesignDatePicker.vue'),
+    meta: { title: 'TDesign日期选择器组件示例' }
+  },
+  {
+    path: '/tdesign-image',
+    name: 'TdesignImage',
+    component: () => import('../views/TdesignImage.vue'),
+    meta: { title: 'TDesign图片组件示例' }
+  },
+  {
+    path: '/tdesign-image-viewer',
+    name: 'TdesignImageViewer',
+    component: () => import('../views/TdesignImageViewer.vue'),
+    meta: { title: 'TDesign图片查看器组件示例' }
+  },
   {
     path: '/data-container',
     name: 'DataContainer',
@@ -60,6 +123,182 @@ const routes = [
     name: 'Mindmap',
     component: () => import('../views/Mindmap.vue'),
     meta: { title: '思维导图示例' }
+  },
+  {
+    path: '/tdesign-calendar',
+    name: 'TdesignCalendar',
+    component: () => import('../views/TdesignCalendar.vue'),
+    meta: { title: 'TDesign日历组件示例' }
+  },
+  {
+    path: '/tdesign-collapse',
+    name: 'TdesignCollapse',
+    component: () => import('../views/TdesignCollapse.vue'),
+    meta: { title: 'TDesign折叠面板组件示例' }
+  },
+  {
+    path: '/tdesign-tag',
+    name: 'TdesignTag',
+    component: () => import('../views/TagDemo.vue'),
+    meta: { title: 'TDesign标签组件示例' }
+  },
+  {
+    path: '/ebiz-swiper',
+    name: 'EbizSwiper',
+    component: () => import('../views/EbizSwiper.vue'),
+    meta: { title: 'Ebiz轮播框组件示例' }
+  },
+  {
+    path: '/ebiz-space',
+    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>