@ebiz/designer-components 0.0.18-beta.1

package/README.md

@@ -0,0 +1,29 @@
+# 组件demo
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@ebiz/designer-components",
+  "version": "0.0.18-beta.1",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./src/index.js",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@opentiny/vue": "~3.20.0",
+    "@opentiny/vue-design-smb": "~3.20.0",
+    "@opentiny/vue-icon": "~3.20.0",
+    "axios": "^1.8.1",
+    "echarts": "^5.6.0",
+    "tdesign-vue-next": "^1.11.5",
+    "unplugin-auto-import": "^19.0.0",
+    "unplugin-vue-components": "^28.0.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.2.5"
+  },
+  "devDependencies": {
+    "@opentiny/tiny-engine-mock": "^2.1.0",
+    "@opentiny/tiny-engine-vite-config": "^2.1.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "less": "^4.2.0",
+    "vite": "^6.0.5",
+    "vite-plugin-proxy": "^0.5.0"
+  }
+}

package/src/App.vue

@@ -0,0 +1,26 @@
+<script>
+export default {
+  name: 'App'
+}
+</script>
+
+<template>
+  <div id="app">
+    <router-view></router-view>
+  </div>
+</template>
+
+<style>
+#app {
+  font-family: Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+</style>

package/src/apiService/SIMPLE_DATA_SERVICE.md

@@ -0,0 +1,285 @@
+# 简洁数据服务使用指南
+
+这个简洁数据服务提供了基本的数据操作方法，包括列表查询、详情查询、数据写入、数据修改、数据删除，每个方法都包含基础的API配置，包括apiId参数。**所有接口均使用POST方法提交**，包括查询接口。
+
+## 配置
+
+数据服务通过环境变量配置域名，支持以下环境变量：
+
+- `VUE_APP_API_BASE_URL`: 在Vue CLI项目中使用
+- `VITE_API_BASE_URL`: 在Vite项目中使用
+
+您可以在项目的`.env`文件中配置这些环境变量：
+
+```
+# .env.development
+VITE_API_BASE_URL=http://localhost:3000/api
+
+# .env.production
+VITE_API_BASE_URL=https://api.example.com
+```
+
+## 基本用法
+
+### 导入组件
+
+```javascript
+// 导入数据服务
+import { dataService } from '@ebiz/lowcode-components';
+```
+
+### 查询列表数据 (POST方法)
+
+```javascript
+// 查询用户列表
+dataService.queryList('/users/list', { page: 1, pageSize: 10 }, { apiId: 'getUserList' })
+  .then(data => {
+    console.log('用户列表:', data);
+  })
+  .catch(error => {
+    console.error('获取用户列表失败:', error);
+  });
+
+// 使用自定义API配置
+dataService.queryList('/users/list', { status: 'active' }, {
+  apiId: 'getActiveUsers',
+  headers: {
+    'X-Custom-Header': 'custom-value'
+  },
+  timeout: 10000
+})
+  .then(data => {
+    console.log('活跃用户列表:', data);
+  })
+  .catch(error => {
+    console.error('获取活跃用户列表失败:', error);
+  });
+```
+
+### 查询详情数据 (POST方法)
+
+```javascript
+// 查询用户详情
+dataService.queryDetail('/users/detail', '123', {}, { apiId: 'getUserDetail' })
+  .then(data => {
+    console.log('用户详情:', data);
+  })
+  .catch(error => {
+    console.error('获取用户详情失败:', error);
+  });
+
+// 查询用户详情，包含关联数据
+dataService.queryDetail('/users/detail', '123', { include: 'orders,profile' }, { apiId: 'getUserDetailWithRelations' })
+  .then(data => {
+    console.log('用户详情(包含关联数据):', data);
+  })
+  .catch(error => {
+    console.error('获取用户详情失败:', error);
+  });
+```
+
+### 新增数据 (POST方法)
+
+```javascript
+// 创建用户
+dataService.create('/users/create', {
+  name: '张三',
+  email: 'zhangsan@example.com',
+  role: 'user'
+}, { apiId: 'createUser' })
+  .then(data => {
+    console.log('创建用户成功:', data);
+  })
+  .catch(error => {
+    console.error('创建用户失败:', error);
+  });
+
+// 使用自定义API配置创建用户
+dataService.create('/users/create', {
+  name: '李四',
+  email: 'lisi@example.com',
+  role: 'admin'
+}, {
+  apiId: 'createAdminUser',
+  headers: {
+    'X-Admin-Create': 'true'
+  }
+})
+  .then(data => {
+    console.log('创建管理员用户成功:', data);
+  })
+  .catch(error => {
+    console.error('创建管理员用户失败:', error);
+  });
+```
+
+### 更新数据 (POST方法)
+
+```javascript
+// 更新用户
+dataService.update('/users/update', '123', {
+  name: '张三(已更新)',
+  email: 'zhangsan_updated@example.com'
+}, { apiId: 'updateUser' })
+  .then(data => {
+    console.log('更新用户成功:', data);
+  })
+  .catch(error => {
+    console.error('更新用户失败:', error);
+  });
+
+// 使用自定义API配置更新用户
+dataService.update('/users/update', '123', {
+  status: 'inactive'
+}, {
+  apiId: 'updateUserStatus',
+  headers: {
+    'X-Status-Update': 'true'
+  }
+})
+  .then(data => {
+    console.log('更新用户状态成功:', data);
+  })
+  .catch(error => {
+    console.error('更新用户状态失败:', error);
+  });
+```
+
+### 删除数据 (POST方法)
+
+```javascript
+// 删除用户
+dataService.delete('/users/delete', '123', {}, { apiId: 'deleteUser' })
+  .then(data => {
+    console.log('删除用户成功:', data);
+  })
+  .catch(error => {
+    console.error('删除用户失败:', error);
+  });
+
+// 软删除用户
+dataService.delete('/users/delete', '123', { soft: true }, { apiId: 'softDeleteUser' })
+  .then(data => {
+    console.log('软删除用户成功:', data);
+  })
+  .catch(error => {
+    console.error('软删除用户失败:', error);
+  });
+```
+
+### 批量操作 (POST方法)
+
+```javascript
+// 批量删除用户
+dataService.batch('/users/batch', 'delete', ['123', '456', '789'], {}, { apiId: 'batchDeleteUsers' })
+  .then(data => {
+    console.log('批量删除用户成功:', data);
+  })
+  .catch(error => {
+    console.error('批量删除用户失败:', error);
+  });
+
+// 批量更新用户状态
+dataService.batch('/users/batch', 'update', ['123', '456'], {
+  status: 'active'
+}, { apiId: 'batchUpdateUserStatus' })
+  .then(data => {
+    console.log('批量更新用户状态成功:', data);
+  })
+  .catch(error => {
+    console.error('批量更新用户状态失败:', error);
+  });
+```
+
+## 请求数据格式
+
+所有方法都使用POST方法提交数据，请求体格式如下：
+
+### 查询列表
+```json
+{
+  "page": 1,
+  "pageSize": 10,
+  "其他查询参数": "值"
+}
+```
+
+### 查询详情
+```json
+{
+  "id": "123",
+  "include": "orders,profile",
+  "其他查询参数": "值"
+}
+```
+
+### 新增数据
+```json
+{
+  "name": "张三",
+  "email": "zhangsan@example.com",
+  "role": "user",
+  "其他字段": "值"
+}
+```
+
+### 更新数据
+```json
+{
+  "id": "123",
+  "name": "张三(已更新)",
+  "email": "zhangsan_updated@example.com",
+  "其他字段": "值"
+}
+```
+
+### 删除数据
+```json
+{
+  "id": "123",
+  "soft": true,
+  "其他参数": "值"
+}
+```
+
+### 批量操作
+```json
+{
+  "action": "delete",
+  "ids": ["123", "456", "789"],
+  "其他参数": "值"
+}
+```
+
+## API配置选项
+
+每个方法都支持自定义API配置，常用的配置选项包括：
+
+| 配置项 | 类型 | 说明 |
+|-------|------|------|
+| apiId | String | API标识，用于标识请求的API |
+| headers | Object | 自定义请求头 |
+| timeout | Number | 请求超时时间(毫秒) |
+| withCredentials | Boolean | 是否携带凭证(cookies) |
+| responseType | String | 响应类型，如'json'、'blob'、'text'等 |
+
+示例：
+
+```javascript
+// 使用完整的API配置
+dataService.queryList('/users/list', { page: 1 }, {
+  apiId: 'getUserListWithConfig',
+  headers: {
+    'X-Custom-Header': 'custom-value'
+  },
+  timeout: 15000,
+  withCredentials: true,
+  responseType: 'json'
+})
+  .then(data => {
+    console.log('用户列表:', data);
+  })
+  .catch(error => {
+    console.error('获取用户列表失败:', error);
+  });
+```

package/src/apiService/simpleDataService.js

@@ -0,0 +1,276 @@
+/**
+ * 简洁数据服务
+ * 提供基本的数据操作方法，包含列表查询、详情查询、数据写入、数据修改、数据删除
+ * 所有接口均使用POST方法提交
+ */
+
+import axios from "axios";
+import { TinyNotify } from "@opentiny/vue";
+
+// 从环境变量获取API基础URL
+const API_BASE_URL = "http://localhost:8090/api";
+
+/**
+ * 创建axios实例
+ */
+const axiosInstance = axios.create({
+  baseURL: API_BASE_URL,
+  timeout: 30000,
+  headers: {
+    "Content-Type": "application/json",
+    Accept: "application/json",
+  },
+});
+
+/**
+ * 请求拦截器
+ */
+axiosInstance.interceptors.request.use(
+  (config) => {
+    // 添加认证信息
+    const token = localStorage.getItem("token");
+    if (token) {
+      config.headers["Authorization"] = `Bearer ${token}`;
+    }
+    
+    // 如果是FormData格式，不设置Content-Type，让浏览器自动设置
+    if (config.data instanceof FormData) {
+      config.headers["Content-Type"] = undefined;
+    }
+    
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+/**
+ * 响应拦截器
+ */
+axiosInstance.interceptors.response.use(
+  (response) => {
+    const { data } = response;
+
+    // 根据后端API的响应格式进行调整
+    if (data.code === 0) {
+      return data.data;
+    } else {
+      // message.error(data.message || '请求失败');
+      return Promise.reject(new Error(data.message || data.msg || "请求失败"));
+    }
+  },
+  (error) => {
+    // 错误处理
+    if (error.response) {
+      const { status } = error.response;
+
+      switch (status) {
+        case 401:
+          TinyNotify({
+            type: "warning",
+            title: "未授权",
+            message: "您无权限访问，请授权后重试",
+            position: "top-right",
+            duration: 2000,
+          });
+          break;
+        case 403:
+          TinyNotify({
+            type: "warning",
+            title: "权限不足",
+            message: "禁止访问，权限不足",
+            position: "top-right",
+            duration: 2000,
+          });
+          break;
+        case 404:
+          TinyNotify({
+            type: "warning",
+            title: "404",
+            message: "请求的资源不存在",
+            position: "top-right",
+            duration: 2000,
+          });
+          break;
+        case 500:
+          TinyNotify({
+            type: "warning",
+            title: "错误",
+            message: "服务器内部错误",
+            position: "top-right",
+            duration: 2000,
+          });
+          break;
+        default:
+          TinyNotify({
+            type: "warning",
+            title: "请求失败",
+            message: error.message,
+            position: "top-right",
+            duration: 2000,
+          });
+      }
+    } else {
+      TinyNotify({
+        type: "error",
+        title: "网络错误",
+        message: error.message,
+        position: "top-right",
+        duration: 2000,
+      });
+      // message.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
+};
+
+/**
+ * 数据服务
+ */
+const dataService = {
+  /**
+   * 请求数据 (POST方法)
+   * @param {string} url - 请求URL
+   * @param {Object} [params] - 查询参数
+   * @param {Object} [apiConfig] - API配置
+   * @param {string} [apiConfig.apiId] - API标识
+   * @param {string} [apiConfig.apiType] - API类型
+   * @returns {Promise<any>} 响应数据
+   * @example
+   */
+  fetch: (params = {}, apiConfig = {}, url = "") => {
+    if (!url) {
+      url = apiMap[apiConfig.apiType];
+    }
+
+    const { apiId = "", ...restConfig } = apiConfig;
+
+    const defaultConfig = {
+      // 默认列表查询配置
+      headers: {
+        "X-List-Query": "true",
+      },
+      timeout: 20000,
+    };
+    if (!params) {
+      params = {};
+    }
+    params.apiId = apiConfig.apiId;
+
+    const config = { ...defaultConfig, ...restConfig };
+    return axiosInstance.post(url, params, config);
+  },
+  
+  /**
+   * 文件上传
+   * @param {string} url - 上传URL，默认使用apiMap中的FILE_UPLOAD
+   * @param {FormData} formData - 包含文件和其他数据的FormData
+   * @param {Function} onProgress - 上传进度回调函数，参数为0-100的进度百分比
+   * @returns {Promise<any>} 上传响应数据
+   */
+  upload: (url = "", formData, onProgress = () => {}) => {
+    // 如果没有指定URL，使用默认的文件上传URL
+    if (!url) {
+      url = apiMap.FILE_UPLOAD;
+    }
+    
+    // 确保FormData中的文件字段名是'file'
+    const fixedFormData = new FormData();
+    let fileFound = false;
+    
+    // 检查并修复FormData
+    if (formData instanceof FormData) {
+      // 由于FormData不能直接检查内容，我们使用迭代器
+      try {
+        // 在某些旧浏览器中可能不支持entries()
+        if (typeof formData.entries === 'function') {
+          for (let pair of formData.entries()) {
+            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;
+            } else {
+              // 保留其他字段
+              fixedFormData.append(key, value);
+            }
+          }
+        } else {
+          // 如果不支持entries()，假设formData已经是正确的，直接使用
+          console.log('FormData.entries() not supported, using original FormData');
+          fixedFormData = formData;
+          fileFound = true;
+        }
+      } catch (e) {
+        console.error('Error processing FormData:', e);
+        // 出错时使用原始FormData
+        fixedFormData = formData;
+      }
+    } else {
+      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'));
+    }
+    
+    // 上传配置
+    const config = {
+      timeout: 60000, // 上传超时时间加长
+      headers: {
+        // 让浏览器自动设置Content-Type和boundary
+        'Content-Type': undefined
+      },
+      onUploadProgress: (progressEvent) => {
+        // 计算上传进度百分比
+        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;
+      });
+  }
+};
+
+export default dataService;