@ebiz/designer-components 0.0.18-beta.5 → 0.0.18-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.0.18-beta.5",
+  "version": "0.0.18-beta.7",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/apiService/simpleDataService.js

@@ -4,11 +4,11 @@
  * 所有接口均使用POST方法提交
  */
 
-import axios from "axios";
-import { TinyNotify } from "@opentiny/vue";
+import axios from 'axios'
+import { TinyNotify } from '@opentiny/vue'
 
 // 从环境变量获取API基础URL
-const API_BASE_URL =  window.location.host + "/api";
+const API_BASE_URL = 'http://' +  window.location.host + "/api";
 
 /**
  * 创建axios实例
@@ -17,10 +17,10 @@ const axiosInstance = axios.create({
   baseURL: API_BASE_URL,
   timeout: 30000,
   headers: {
-    "Content-Type": "application/json",
-    Accept: "application/json",
-  },
-});
+    'Content-Type': 'application/json',
+    Accept: 'application/json'
+  }
+})
 
 /**
  * 请求拦截器
@@ -28,117 +28,117 @@ const axiosInstance = axios.create({
 axiosInstance.interceptors.request.use(
   (config) => {
     // 添加认证信息
-    const token = localStorage.getItem("token");
+    const token = localStorage.getItem('token')
     if (token) {
-      config.headers["Authorization"] = `Bearer ${token}`;
+      config.headers['Authorization'] = `Bearer ${token}`
     }
-    
+
     // 如果是FormData格式，不设置Content-Type，让浏览器自动设置
     if (config.data instanceof FormData) {
-      config.headers["Content-Type"] = undefined;
+      config.headers['Content-Type'] = undefined
     }
-    
-    return config;
+
+    return config
   },
   (error) => {
-    return Promise.reject(error);
+    return Promise.reject(error)
   }
-);
+)
 
 /**
  * 响应拦截器
  */
 axiosInstance.interceptors.response.use(
   (response) => {
-    const { data } = response;
+    const { data } = response
 
     // 根据后端API的响应格式进行调整
     if (data.code === 0) {
-      return data.data;
+      return data.data
     } else {
       // message.error(data.message || '请求失败');
-      return Promise.reject(new Error(data.message || data.msg || "请求失败"));
+      return Promise.reject(new Error(data.message || data.msg || '请求失败'))
     }
   },
   (error) => {
     // 错误处理
     if (error.response) {
-      const { status } = error.response;
+      const { status } = error.response
 
       switch (status) {
         case 401:
           TinyNotify({
-            type: "warning",
-            title: "未授权",
-            message: "您无权限访问，请授权后重试",
-            position: "top-right",
-            duration: 2000,
-          });
-          break;
+            type: 'warning',
+            title: '未授权',
+            message: '您无权限访问，请授权后重试',
+            position: 'top-right',
+            duration: 2000
+          })
+          break
         case 403:
           TinyNotify({
-            type: "warning",
-            title: "权限不足",
-            message: "禁止访问，权限不足",
-            position: "top-right",
-            duration: 2000,
-          });
-          break;
+            type: 'warning',
+            title: '权限不足',
+            message: '禁止访问，权限不足',
+            position: 'top-right',
+            duration: 2000
+          })
+          break
         case 404:
           TinyNotify({
-            type: "warning",
-            title: "404",
-            message: "请求的资源不存在",
-            position: "top-right",
-            duration: 2000,
-          });
-          break;
+            type: 'warning',
+            title: '404',
+            message: '请求的资源不存在',
+            position: 'top-right',
+            duration: 2000
+          })
+          break
         case 500:
           TinyNotify({
-            type: "warning",
-            title: "错误",
-            message: "服务器内部错误",
-            position: "top-right",
-            duration: 2000,
-          });
-          break;
+            type: 'warning',
+            title: '错误',
+            message: '服务器内部错误',
+            position: 'top-right',
+            duration: 2000
+          })
+          break
         default:
           TinyNotify({
-            type: "warning",
-            title: "请求失败",
+            type: 'warning',
+            title: '请求失败',
             message: error.message,
-            position: "top-right",
-            duration: 2000,
-          });
+            position: 'top-right',
+            duration: 2000
+          })
       }
     } else {
       TinyNotify({
-        type: "error",
-        title: "网络错误",
+        type: 'error',
+        title: '网络错误',
         message: error.message,
-        position: "top-right",
-        duration: 2000,
-      });
+        position: 'top-right',
+        duration: 2000
+      })
       // message.error('网络错误，请检查您的网络连接');
     }
 
-    return Promise.reject(error);
+    return Promise.reject(error)
   }
-);
+)
 
 let apiMap = {
-  MULTIPLE_DATA_SEARCH: "/appdata/select",
-  DETAILS_DATA: "/appdata/detailData",
-  INTERFACE_PLUGIN: "/appdata/plugin",
-  DATA_INSERT: "/appdata/addData",
-  BATCH_DATA_INSERT: "/appdata/addDatas",
-  DATA_MODIFY: "/appdata/updateData",
-  BATCH_DATA_MODIFY: "/appdata/updateDatas",
-  DEL_DATA: "/appdata/delData",
-  BATCH_DEL_DATA: "/appdata/delDatas",
-  MULTIPLE_DATA_LINK_SEARCH: "/api/appdata/link/select",
-  FILE_UPLOAD: "/api/file/upload", // 文件上传API
-};
+  MULTIPLE_DATA_SEARCH: '/appdata/select',
+  DETAILS_DATA: '/appdata/detailData',
+  INTERFACE_PLUGIN: '/appdata/plugin',
+  DATA_INSERT: '/appdata/addData',
+  BATCH_DATA_INSERT: '/appdata/addDatas',
+  DATA_MODIFY: '/appdata/updateData',
+  BATCH_DATA_MODIFY: '/appdata/updateDatas',
+  DEL_DATA: '/appdata/delData',
+  BATCH_DEL_DATA: '/appdata/delDatas',
+  MULTIPLE_DATA_LINK_SEARCH: '/api/appdata/link/select',
+  FILE_UPLOAD: '/api/file/upload' // 文件上传API
+}
 
 /**
  * 数据服务
@@ -154,29 +154,32 @@ const dataService = {
    * @returns {Promise<any>} 响应数据
    * @example
    */
-  fetch: (params = {}, apiConfig = {}, url = "") => {
+  fetch: (params = {}, apiConfig = {}, url = '') => {
     if (!url) {
-      url = apiMap[apiConfig.apiType];
+      url = apiMap[apiConfig.apiType]
     }
 
-    const { apiId = "", ...restConfig } = apiConfig;
+    const { apiId = '', ...restConfig } = apiConfig
 
     const defaultConfig = {
       // 默认列表查询配置
       headers: {
-        "X-List-Query": "true",
+        'X-List-Query': 'true'
       },
-      timeout: 20000,
-    };
+      timeout: 20000
+    }
     if (!params) {
-      params = {};
+      params = {}
+    }
+    params.apiId = apiConfig.apiId
+    if (apiConfig.key) {
+      params.key = apiConfig.key
     }
-    params.apiId = apiConfig.apiId;
 
-    const config = { ...defaultConfig, ...restConfig };
-    return axiosInstance.post(url, params, config);
+    const config = { ...defaultConfig, ...restConfig }
+    return axiosInstance.post(url, params, config)
   },
-  
+
   /**
    * 文件上传
    * @param {string} url - 上传URL，默认使用apiMap中的FILE_UPLOAD
@@ -184,16 +187,16 @@ const dataService = {
    * @param {Function} onProgress - 上传进度回调函数，参数为0-100的进度百分比
    * @returns {Promise<any>} 上传响应数据
    */
-  upload: (url = "", formData, onProgress = () => {}) => {
+  upload: (url = '', formData, onProgress = () => {}) => {
     // 如果没有指定URL，使用默认的文件上传URL
     if (!url) {
-      url = apiMap.FILE_UPLOAD;
+      url = apiMap.FILE_UPLOAD
     }
-    
+
     // 确保FormData中的文件字段名是'file'
-    let fixedFormData = new FormData();
-    let fileFound = false;
-    
+    let fixedFormData = new FormData()
+    let fileFound = false
+
     // 检查并修复FormData
     if (formData instanceof FormData) {
       // 由于FormData不能直接检查内容，我们使用迭代器
@@ -201,40 +204,40 @@ const dataService = {
         // 在某些旧浏览器中可能不支持entries()
         if (typeof formData.entries === 'function') {
           for (let pair of formData.entries()) {
-            const [key, value] = pair;
-            
+            const [key, value] = pair
+
             if (value instanceof File || value instanceof Blob) {
               // 找到文件，使用正确的字段名
-              console.log(`Found file in field ${key}, adding as 'file'`);
-              fixedFormData.append('file', value);
-              fileFound = true;
+              console.log(`Found file in field ${key}, adding as 'file'`)
+              fixedFormData.append('file', value)
+              fileFound = true
             } else {
               // 保留其他字段
-              fixedFormData.append(key, value);
+              fixedFormData.append(key, value)
             }
           }
         } else {
           // 如果不支持entries()，假设formData已经是正确的，直接使用
-          console.log('FormData.entries() not supported, using original FormData');
-          fixedFormData = formData;
-          fileFound = true;
+          console.log('FormData.entries() not supported, using original FormData')
+          fixedFormData = formData
+          fileFound = true
         }
       } catch (e) {
-        console.error('Error processing FormData:', e);
+        console.error('Error processing FormData:', e)
         // 出错时使用原始FormData
-        fixedFormData = formData;
+        fixedFormData = formData
       }
     } else {
-      console.error('Invalid FormData:', formData);
-      return Promise.reject(new Error('FormData is required for file upload'));
+      console.error('Invalid FormData:', formData)
+      return Promise.reject(new Error('FormData is required for file upload'))
     }
-    
+
     // 如果没有找到文件，返回错误
     if (!fileFound && typeof formData.entries === 'function') {
-      console.error('No file found in FormData');
-      return Promise.reject(new Error('No file found in FormData'));
+      console.error('No file found in FormData')
+      return Promise.reject(new Error('No file found in FormData'))
     }
-    
+
     // 上传配置
     const config = {
       timeout: 60000, // 上传超时时间加长
@@ -244,33 +247,32 @@ const dataService = {
       },
       onUploadProgress: (progressEvent) => {
         // 计算上传进度百分比
-        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
-        onProgress(percentCompleted);
+        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+        onProgress(percentCompleted)
       }
-    };
-    
+    }
+
     // 发起上传请求
-    console.log('Sending file upload request to:', url);
-    return axiosInstance.post(url, fixedFormData, config)
-      .then(response => {
-        console.log('Upload server response:', response);
-        
-        // 处理文件路径
-        // 如果返回的是相对路径，转换为完整URL
-        if (typeof response === 'string' && !response.startsWith('http')) {
-          // 判断路径是否以斜杠开头
-          const baseUrl = API_BASE_URL.endsWith('/') ? API_BASE_URL.slice(0, -1) : API_BASE_URL;
-          const filePath = response.startsWith('/') ? response : `/${response}`;
-          
-          // 构建完整URL
-          const fullUrl = `${baseUrl}/files${filePath}`;
-          console.log('Converted file path to full URL:', fullUrl);
-          return fullUrl;
-        }
-        
-        return response;
-      });
+    console.log('Sending file upload request to:', url)
+    return axiosInstance.post(url, fixedFormData, config).then((response) => {
+      console.log('Upload server response:', response)
+
+      // 处理文件路径
+      // 如果返回的是相对路径，转换为完整URL
+      if (typeof response === 'string' && !response.startsWith('http')) {
+        // 判断路径是否以斜杠开头
+        const baseUrl = API_BASE_URL.endsWith('/') ? API_BASE_URL.slice(0, -1) : API_BASE_URL
+        const filePath = response.startsWith('/') ? response : `/${response}`
+
+        // 构建完整URL
+        const fullUrl = `${baseUrl}/files${filePath}`
+        console.log('Converted file path to full URL:', fullUrl)
+        return fullUrl
+      }
+
+      return response
+    })
   }
-};
+}
 
-export default dataService;
+export default dataService

package/src/components/Button.vue

@@ -46,6 +46,7 @@ const props = defineProps({
     apiConfig: {//接口配置
         type: Object,
         default: {
+            key: null,
             apiId: null,
             apiType: ''
         }
@@ -91,7 +92,7 @@ const click = () => {
     props.onClick()
     if (!isNormal.value && apiConfig.value.apiId) {
         props.onPrepare()
-        dataService.fetch(data.value, { apiId: apiConfig.value.apiId, apiType: apiMap[apiConfig.value.apiType] }).then((res) => {
+        dataService.fetch(data.value, { key: apiConfig.value.key, apiId: apiConfig.value.apiId, apiType: apiMap[apiConfig.value.apiType] }).then((res) => {
             emit('click', res)
             props.onFinish()
         })

package/src/components/EbizRemoteSelect.vue

@@ -30,6 +30,7 @@ const props = defineProps({
         type: Object,
         required: true,
         default: () => ({
+            key: null,
             apiId: null,
             apiType: ''
         })
@@ -117,7 +118,7 @@ const handleRemoteSearch = async () => {
             const params = {
                 queryParams: queryParams.value
             };
-            const res = await dataService.fetch(params, { apiId: props.apiConfig.apiId, apiType: 'MULTIPLE_DATA_SEARCH' });
+            const res = await dataService.fetch(params, { key: props.apiConfig.key, apiId: props.apiConfig.apiId, apiType: 'MULTIPLE_DATA_SEARCH' });
             options.value = res.data.map(item => ({
                 label: item.label || item.name,
                 value: item.value || item.id

package/src/components/EbizTabHeader.vue

@@ -1,12 +1,7 @@
 <template>
   <tiny-tabs v-model="showTab" :tab-style="props.tabStyle" activeColor="#5e7ce0" @click="tabChange">
-    <tiny-tab-item 
-      activeColor="#5e7ce0" 
-      v-for="i in showTabs" 
-      :key="i.value" 
-      :title="i.label" 
-      :name="i.value.toString()"
-    />
+    <tiny-tab-item activeColor="#5e7ce0" v-for="i in showTabs" :key="i.value" :title="i.label"
+      :name="i.value.toString()" />
   </tiny-tabs>
 </template>
 
@@ -22,6 +17,7 @@ const props = defineProps({
   apiConfig: {
     type: Object,
     default: () => ({
+      key: null,
       apiId: null,
       apiType: 'MULTIPLE_DATA_SEARCH',
     }),
@@ -63,7 +59,7 @@ const remoteTabs = ref([])
 
 // 展示的tabs
 const showTabs = computed(() => {
-    console.log(props.tabs,66, 110)
+  console.log(props.tabs, 66, 110)
   if (remoteTabs.value.length) return [{ label: '全部', value: '0' }, ...remoteTabs.value];
   if (props.tabs.length) return props.tabs
   return [{ label: '全部', value: '0' }]
@@ -87,7 +83,7 @@ watch(() => showTabs.value, () => {
 
 watch(() => props.apiConfig, (nVal) => {
   if (!nVal?.apiId) return
-  dataService.fetch({ }, { apiId: nVal.apiId, apiType: 'MULTIPLE_DATA_SEARCH' }).then(res => {
+  dataService.fetch({}, { key: nVal.key, apiId: nVal.apiId, apiType: 'MULTIPLE_DATA_SEARCH' }).then(res => {
     remoteTabs.value = (res.data ?? []).map(i => ({
       label: i[props.labelKey],
       value: i[props.valueKey],
@@ -146,4 +142,4 @@ watch(() => props.apiConfig, (nVal) => {
   overflow: hidden;
   white-space: nowrap;
 }
-</style> 
+</style>

package/src/components/EbizTitle.vue

@@ -1,52 +1,51 @@
 <template>
     <div class="ebiz-title">
-        <!-- <div class="color-block" :style="{ backgroundColor: color, width: `${blockWidth}px` }"></div> -->
-        <!-- <div class="title-text">
+        <div class="color-block" :style="{ backgroundColor: color, width: `${blockWidth}px` }"></div>
+        <div class="title-text">
             <slot name="title">
                 {{ displayTitle }}
             </slot>
-        </div> -->
+        </div>
     </div>
 </template>
 
 <script setup>
+import { defineProps, computed } from 'vue';
 
-// import { defineProps, computed } from 'vue';
+/**
+ * EbizTitle 组件 - 带有色块的标题组件
+ * 支持自定义标题文本、色块颜色和色块宽度
+ * 包含一个按钮，点击时在标题后添加点号并触发事件
+ * 支持通过插槽自定义标题内容
+ */
+const props = defineProps({
+    /**
+     * 标题文本 (当不使用插槽时显示)
+     */
+    title: {
+        type: String,
+        default: '标题'
+    },
+    /**
+     * 色块颜色，支持任何有效的CSS颜色值
+     */
+    color: {
+        type: String,
+        default: '#1890ff'
+    },
+    /**
+     * 色块宽度，单位为像素
+     */
+    blockWidth: {
+        type: Number,
+        default: 10
+    }
+});
 
-// /**
-//  * EbizTitle 组件 - 带有色块的标题组件
-//  * 支持自定义标题文本、色块颜色和色块宽度
-//  * 包含一个按钮，点击时在标题后添加点号并触发事件
-//  * 支持通过插槽自定义标题内容
-//  */
-// const props = defineProps({
-//     /**
-//      * 标题文本 (当不使用插槽时显示)
-//      */
-//     title: {
-//         type: String,
-//         default: '标题'
-//     },
-//     /**
-//      * 色块颜色，支持任何有效的CSS颜色值
-//      */
-//     color: {
-//         type: String,
-//         default: '#1890ff'
-//     },
-//     /**
-//      * 色块宽度，单位为像素
-//      */
-//     blockWidth: {
-//         type: Number,
-//         default: 10
-//     }
-// });
 
-// // // 计算属性：根据点号数量生成显示的标题
-// const displayTitle = computed(() => {
-//     return props.title;
-// });
+const displayTitle = computed(() => {
+    return props.title;
+});
 </script>
 
 <style scoped>

package/src/components/TdesignCalendar/index.vue

@@ -14,7 +14,7 @@
     :month-change="monthChange"
     :render-cell="renderCell"
     :theme="theme"
-    :value="value"
+    :value="modelValue"
     :year="year"
     @cell-click="handleCellClick"
     @cell-double-click="handleCellDoubleClick"
@@ -111,7 +111,7 @@ export default {
       default: 'full',
       validator: (val) => ['full', 'card'].includes(val)
     },
-    value: {
+    modelValue: {
       type: [String, Number, Array, Date],
       default: null
     },
@@ -120,10 +120,13 @@ export default {
       default: undefined
     }
   },
-  emits: ['cell-click', 'cell-double-click', 'cell-right-click', 'month-change'],
+  emits: ['cell-click', 'cell-double-click', 'cell-right-click', 'month-change', 'update:modelValue'],
   methods: {
     handleCellClick(options) {
       this.$emit('cell-click', options)
+      if (options && options.date) {
+        this.$emit('update:modelValue', options.date)
+      }
     },
     handleCellDoubleClick(options) {
       this.$emit('cell-double-click', options)

package/src/components/TdesignDialog.vue

@@ -0,0 +1,249 @@
+<template>
+    <t-dialog
+        v-model:visible="isVisible"
+        :attach="attach"
+        :body="body"
+        :cancel-btn="cancelBtn"
+        :close-btn="closeBtn"
+        :close-on-esc-keydown="closeOnEscKeydown"
+        :close-on-overlay-click="closeOnOverlayClick"
+        :confirm-btn="confirmBtn"
+        :default-visible="defaultVisible"
+        :destroy-on-close="destroyOnClose"
+        :draggable="draggable"
+        :footer="footer"
+        :header="header"
+        :mode="mode"
+        :placement="placement"
+        :show-overlay="showOverlay"
+        :width="width"
+        :z-index="zIndex"
+        @cancel="handleCancel"
+        @close="handleClose"
+        @close-btn-click="handleCloseBtnClick"
+        @confirm="handleConfirm"
+        @esc-keydown="handleEscKeydown"
+        @overlay-click="handleOverlayClick"
+        @opened="handleOpened"
+        @closed="handleClosed"
+        @update:visible="handleUpdateVisible"
+    >
+        <!-- 头部插槽 -->
+        <template v-if="$slots.header" #header>
+            <slot name="header"></slot>
+        </template>
+
+        <!-- 内容插槽 -->
+        <template v-if="$slots.body" #body>
+            <slot name="body"></slot>
+        </template>
+
+        <!-- 默认插槽 -->
+        <slot></slot>
+
+        <!-- 页脚插槽 -->
+        <template v-if="$slots.footer" #footer>
+            <slot name="footer"></slot>
+        </template>
+
+        <!-- 取消按钮插槽 -->
+        <template v-if="$slots.cancelBtn" #cancel-btn>
+            <slot name="cancelBtn"></slot>
+        </template>
+
+        <!-- 确认按钮插槽 -->
+        <template v-if="$slots.confirmBtn" #confirm-btn>
+            <slot name="confirmBtn"></slot>
+        </template>
+    </t-dialog>
+</template>
+
+<script>
+export default {
+    name: "EbizDialog"
+}
+</script>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { Dialog as TDialog } from 'tdesign-vue-next';
+
+// 定义属性
+const props = defineProps({
+    // 对话框挂载的节点
+    attach: {
+        type: [String, Function, Element],
+        default: 'body'
+    },
+    // 对话框内容
+    body: {
+        type: [String, Function],
+        default: ''
+    },
+    // 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性
+    cancelBtn: {
+        type: [String, Object, null],
+        default: ''
+    },
+    // 关闭按钮，值为 true 显示默认关闭按钮；值为 false 则不显示关闭按钮；值类型为 string 则直接显示值；值类型为 TNode，则显示自定义按钮
+    closeBtn: {
+        type: [Boolean, String, Function],
+        default: true
+    },
+    // 按下 ESC 时是否触发对话框关闭
+    closeOnEscKeydown: {
+        type: Boolean,
+        default: undefined
+    },
+    // 点击蒙层时是否触发关闭
+    closeOnOverlayClick: {
+        type: Boolean,
+        default: undefined
+    },
+    // 确认按钮，可自定义。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性
+    confirmBtn: {
+        type: [String, Object, null],
+        default: ''
+    },
+    // 对话框默认是否显示
+    defaultVisible: {
+        type: Boolean,
+        default: false
+    },
+    // 是否在关闭弹框的时候销毁子元素
+    destroyOnClose: {
+        type: Boolean,
+        default: false
+    },
+    // 对话框是否可以拖拽
+    draggable: {
+        type: Boolean,
+        default: false
+    },
+    // 底部操作栏，默认会有"确认"和"取消"两个按钮
+    footer: {
+        type: [Boolean, Function],
+        default: true
+    },
+    // 头部内容
+    header: {
+        type: [String, Boolean, Function],
+        default: true
+    },
+    // 对话框类型
+    mode: {
+        type: String,
+        default: 'modal',
+        validator: (val) => ['modal', 'modeless', 'full-screen'].includes(val)
+    },
+    // 对话框位置，类似 CSS 中的 position
+    placement: {
+        type: String,
+        default: 'top',
+        validator: (val) => ['top', 'center'].includes(val)
+    },
+    // 是否显示遮罩层
+    showOverlay: {
+        type: Boolean,
+        default: true
+    },
+    // 控制对话框显示与隐藏
+    visible: {
+        type: Boolean,
+        default: undefined
+    },
+    // 对话框宽度
+    width: {
+        type: [String, Number],
+        default: undefined
+    },
+    // 对话框层级
+    zIndex: {
+        type: Number,
+        default: undefined
+    }
+});
+
+// 显示状态
+const isVisible = ref(props.defaultVisible);
+
+// 监听visible属性变化
+watch(() => props.visible, (newValue) => {
+    if (newValue !== undefined) {
+        isVisible.value = newValue;
+    }
+});
+
+// 定义事件
+const emit = defineEmits([
+    'cancel',
+    'close',
+    'close-btn-click',
+    'confirm',
+    'esc-keydown',
+    'overlay-click',
+    'opened',
+    'closed',
+    'update:visible'
+]);
+
+// 取消按钮点击事件
+const handleCancel = (e) => {
+    emit('cancel', { e });
+    emit('close', { trigger: 'cancel', e });
+    emit('update:visible', false);
+};
+
+// 关闭事件
+const handleClose = (context) => {
+    emit('close', context);
+    emit('update:visible', false);
+};
+
+// 关闭按钮点击事件
+const handleCloseBtnClick = (e) => {
+    emit('close-btn-click', { e });
+    emit('close', { trigger: 'close-btn', e });
+    emit('update:visible', false);
+};
+
+// 确认按钮点击事件
+const handleConfirm = (e) => {
+    emit('confirm', { e });
+    emit('update:visible', false);
+};
+
+// ESC 按键按下事件
+const handleEscKeydown = (e) => {
+    emit('esc-keydown', { e });
+    emit('close', { trigger: 'esc', e });
+    emit('update:visible', false);
+};
+
+// 遮罩层点击事件
+const handleOverlayClick = (e) => {
+    emit('overlay-click', { e });
+    emit('close', { trigger: 'overlay', e });
+    emit('update:visible', false);
+};
+
+// 对话框打开完成事件
+const handleOpened = () => {
+    emit('opened');
+};
+
+// 对话框关闭完成事件
+const handleClosed = () => {
+    emit('closed');
+};
+
+// 更新可见状态
+const handleUpdateVisible = (visible) => {
+    isVisible.value = visible;
+    emit('update:visible', visible);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/TdesignInput.vue

@@ -181,60 +181,60 @@ const emit = defineEmits([
 ]);
 
 // 处理输入事件
-const handleInput = (value, { e }) => {
-    emit('update:modelValue', value);
-    emit('input', value, { e });
+const handleInput = (value, context) => {
+    emit('input', value, context);
 };
 
 // 处理变化事件
-const handleChange = (value, { e }) => {
-    emit('change', value, { e });
+const handleChange = (value, context) => {
+    emit('update:modelValue', value);
+    emit('change', value, context);
 };
 
 // 处理失去焦点事件
-const handleBlur = (value, { e }) => {
-    emit('blur', value, { e });
+const handleBlur = (value, context) => {
+    emit('blur', value, context);
 };
 
 // 处理获取焦点事件
-const handleFocus = (value, { e }) => {
-    emit('focus', value, { e });
+const handleFocus = (value, context) => {
+    emit('focus', value, context);
 };
 
 // 处理回车事件
-const handleEnter = (value, { e }) => {
-    emit('enter', value, { e });
+const handleEnter = (value, context) => {
+    emit('enter', value, context);
 };
 
 // 处理清空事件
-const handleClear = ({ e }) => {
+const handleClear = (context) => {
     emit('update:modelValue', '');
-    emit('clear', { e });
+    emit('clear', context);
 };
 
 // 处理键盘按下事件
-const handleKeydown = (value, { e }) => {
-    emit('keydown', value, { e });
+const handleKeydown = (value, context) => {
+    emit('keydown', value, context);
 };
 
 // 处理键盘按键事件
-const handleKeypress = (value, { e }) => {
-    emit('keypress', value, { e });
+const handleKeypress = (value, context) => {
+    emit('keypress', value, context);
 };
 
 // 处理键盘弹起事件
-const handleKeyup = (value, { e }) => {
-    emit('keyup', value, { e });
+const handleKeyup = (value, context) => {
+    emit('keyup', value, context);
 };
 
 // 处理鼠标进入事件
-const handleMouseenter = (value, { e }) => {
-    emit('mouseenter', value, { e });
+const handleMouseenter = (value, context) => {
+    emit('mouseenter', value, context);
 };
 
 // 处理鼠标离开事件
-const handleMouseleave = (value, { e }) => {
-    emit('mouseleave', value, { e });
+const handleMouseleave = (value, context) => {
+    emit('mouseleave', value, context);
 };
 </script>
 

package/src/index.js

@@ -46,6 +46,7 @@ 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 { MessagePlugin as EbizMessage } from 'tdesign-vue-next';
 
 // 导入简洁数据服务
@@ -140,5 +141,7 @@ export {
   // 员工信息组件
   EbizEmployeeInfo,
   // 提示组件
-  EbizAlert
+  EbizAlert,
+  // 对话框组件
+  EbizDialog
 };

package/src/router/index.js

@@ -228,6 +228,12 @@ const routes = [
     name: 'TdesignAlert',
     component: () => import('../views/TdesignAlert.vue'),
     meta: { title: 'TDesign提示组件示例' }
+  },
+  {
+    path: '/tdesign-dialog',
+    name: 'TdesignDialog',
+    component: () => import('../views/DialogDemo.vue'),
+    meta: { title: 'TDesign对话框组件示例' }
   }
 ]
 

package/src/views/DialogDemo.vue

@@ -0,0 +1,169 @@
+<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;">
+              <EbizInput 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, EbizInput } 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/Home.vue

@@ -52,7 +52,8 @@ 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对话框组件示例' }
     ]
 
     return {