@ebiz/designer-components 0.0.1-9.bata.1

package/src/apiService/simpleDataService.js

@@ -0,0 +1,280 @@
+/**
+ * 简洁数据服务
+ * 提供基本的数据操作方法，包含列表查询、详情查询、数据写入、数据修改、数据删除
+ * 所有接口均使用POST方法提交
+ */
+
+import axios from 'axios'
+import { TinyNotify } from '@opentiny/vue'
+// 从环境变量获取API基础URL
+const API_BASE_URL = 'http://' + window.location.host + '/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['AppDataAuthorization'] = `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({
+        code: data.code,
+        message: 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
+    if (apiConfig.key) {
+      params.apiKey = apiConfig.key
+    }
+
+    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'
+    let 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

package/src/assets/base.css

@@ -0,0 +1,86 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

package/src/assets/main.css

@@ -0,0 +1 @@
+@import './base.css';

package/src/assets/styles/charts/main.less

@@ -0,0 +1,30 @@
+/**
+ * Import all chart less files
+ */
+
+// Import main charts less file
+@import '../../../components/charts/index.less';
+
+// Import chart features
+@import '../../../components/charts/feature/drag/index.less';
+@import '../../../components/charts/feature/card/index.less';
+@import '../../../components/charts/feature/expandLegend/index.less';
+
+// Import chart components
+@import '../../../components/charts/components/FlowChart/index.less';
+@import '../../../components/charts/components/GanttChart/index.less';
+@import '../../../components/charts/components/HoneycombChart/index.less';
+@import '../../../components/charts/components/OrganizationChart/index.less';
+@import '../../../components/charts/components/RiverChart/index.less';
+@import '../../../components/charts/components/SnowFlakeChart/index.less';
+@import '../../../components/charts/components/TerraceChart/index.less';
+@import '../../../components/charts/components/TimelineChart/index.less';
+@import '../../../components/charts/components/WaveChart/index.less';
+@import '../../../components/charts/components/MilestoneChart/index.less';
+
+// Import chart framework modules
+@import '../../../components/charts/framework/charts/MindmapChart/index.less';
+@import '../../../components/charts/framework/module/line/index.less';
+@import '../../../components/charts/framework/module/connector/index.less';
+@import '../../../components/charts/framework/module/canvas/index.less';
+@import '../../../components/charts/framework/module/contextmenu/index.less'; 

package/src/components/Button.vue

@@ -0,0 +1,153 @@
+<template>
+    <tiny-tooltip :content="!isNormal && !apiConfig.apiId ? tooltipText : ''" placement="top">
+        <t-button :disabled="disabled || loading" :theme="type" :size="size" @click="click">
+            <slot>{{ text }}</slot>
+        </t-button>
+    </tiny-tooltip>
+</template>
+
+
+<script lang='js'>
+export default {
+    name: "EbizButton"
+}
+</script>
+
+<script lang='js' setup>
+
+import { ref, reactive, computed, toRef, toRefs } from 'vue';
+import { Button as TButton } from 'tdesign-vue-next';
+import { TinyTooltip } from '@opentiny/vue';
+import dataService from '../apiService/simpleDataService';
+
+const props = defineProps({
+    text: {
+        type: String,
+        default: ''
+    },
+    isNormal: {//是否为普通按钮
+        type: Boolean,
+        default: false
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    type: {//'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+        type: String,
+        default: 'primary'
+    },
+    size: {//'large' | 'medium' | 'small'
+        type: String,
+        default: 'medium'
+    },
+    apiConfig: {//接口配置
+        type: Object,
+        default: () => ({
+            key: null,
+            apiId: null,
+            apiType: ''
+        })
+    },
+    data: {
+        type: Object,
+        default: () => ({})
+    },
+    onClick: {
+        type: Function,
+        default: () => { }
+    },
+    onPrepare: {//调用接口前置事件
+        type: Function,
+        default: () => true // 默认返回true，允许继续执行
+    },
+    onFinish: {//调用接口后置事件
+        type: Function,
+        default: () => { }
+    },
+    onError: {
+        type: Function,
+        default: () => { }
+    }
+})
+
+const apiMap = [
+    'MULTIPLE_DATA_SEARCH',
+    'DETAILS_DATA',
+    'INTERFACE_PLUGIN',
+    'DATA_INSERT',
+    'BATCH_DATA_INSERT',
+    'DATA_MODIFY',
+    'BATCH_DATA_MODIFY',
+    'DEL_DATA',
+    'BATCH_DEL_DATA',
+    'MULTIPLE_DATA_LINK_SEARCH'
+];
+
+const emit = defineEmits(['click', 'success', 'error', 'loading', 'prepare'])
+
+const { text, isNormal, disabled, type, size, variant, apiConfig, data } = toRefs(props)
+
+const tooltipText = ref('请先设置接口配置')
+const loading = ref(false)
+
+// 检查API配置是否有效
+const isValidApiConfig = () => {
+    return apiConfig.value && apiConfig.value.apiId &&
+        typeof apiConfig.value.apiType === 'number' &&
+        apiConfig.value.apiType >= 0 &&
+        apiConfig.value.apiType < apiMap.length;
+}
+
+const click = async (e) => {
+    // 总是调用onClick回调
+    props.onClick()
+    emit('click', e)
+
+    // 如果是普通按钮或API配置无效，不调用接口
+    if (isNormal.value || !isValidApiConfig()) {
+        return
+    }
+
+    try {
+        // 设置加载状态
+        loading.value = true
+        emit('loading', true)
+
+        // 调用前置处理并获取返回值
+        const shouldContinue = props.onPrepare()
+        emit('prepare', shouldContinue)
+
+        // 只有当返回值明确为false时才中断，undefined或其他值都继续执行
+        if (shouldContinue === false) {
+            return null
+        }
+
+        // 调用接口
+        const apiType = apiMap[apiConfig.value.apiType]
+        const res = await dataService.fetch(data.value, {
+            key: apiConfig.value.key,
+            apiId: apiConfig.value.apiId,
+            apiType
+        })
+
+        // 成功处理
+        emit('success', res)
+        props.onFinish(res)
+
+        return res
+    } catch (error) {
+        // 错误处理
+        emit('error', error)
+        props.onError(error)
+
+        return null
+    } finally {
+        // 清除加载状态
+        loading.value = false
+        emit('loading', false)
+    }
+}
+</script>
+
+<style lang='less' scoped></style>

package/src/components/DataContainer.vue

@@ -0,0 +1,39 @@
+<template>
+    <div>
+        <slot name="content" :row="data"></slot>
+    </div>
+</template>
+
+<script setup>
+
+import { ref, defineProps, onMounted } from "vue";
+
+const props = defineProps(['apiConfig']);
+
+const data = ref({
+    listData: [
+        { id: 1, name: "用户1", age: 25, email: "user1@example.com" },
+        { id: 2, name: "用户2", age: 30, email: "user2@example.com" },
+        { id: 3, name: "用户3", age: 22, email: "user3@example.com" },
+        { id: 4, name: "用户4", age: 28, email: "user4@example.com" },
+        { id: 5, name: "用户5", age: 35, email: "user5@example.com" },
+        { id: 6, name: "用户6", age: 27, email: "user6@example.com" },
+        { id: 7, name: "用户7", age: 24, email: "user7@example.com" },
+        { id: 8, name: "用户8", age: 29, email: "user8@example.com" },
+        { id: 9, name: "用户9", age: 31, email: "user9@example.com" },
+        { id: 10, name: "用户10", age: 26, email: "user10@example.com" },
+    ],
+    pageConfig: {
+        total: 10,
+        current: 1,
+        size: 10,
+    },
+});
+
+onMounted(() => {
+    console.log("DataContainer component has been mounted.");
+    // You can add any initialization logic here
+    // 加载数据
+
+});
+</script>