vue2-client 1.18.39 → 1.18.40

package/src/composables/demo/UseRequestDemo.vue

@@ -0,0 +1,175 @@
+<template>
+  <a-card title="useRunLogic / usePost 请求工具示例" :bordered="false">
+    <a-space direction="vertical" style="width: 100%">
+      <!-- 示例1: 基础用法 - 组件级 loading -->
+      <a-button
+        type="primary"
+        :loading="basicRequest.loading"
+        @click="handleBasicRequest"
+      >
+        基础请求 (组件级 loading)
+      </a-button>
+
+      <!-- 示例2: 全局 Loading -->
+      <a-button
+        type="danger"
+        :loading="globalLoadingRequest.loading"
+        @click="handleGlobalLoadingRequest"
+      >
+        全局 Loading 请求
+      </a-button>
+
+      <!-- 示例3: 请求去重 -->
+      <a-button
+        type="dashed"
+        @click="handleDedupeRequest"
+      >
+        去重请求 (快速点击试试)
+      </a-button>
+
+      <!-- 示例4: 组合使用 -->
+      <a-button
+        :loading="comboRequest.loading"
+        @click="handleComboRequest"
+      >
+        组合使用 (去重 + 全局 Loading)
+      </a-button>
+
+      <!-- 示例5: usePost 基础用法 -->
+      <a-button
+        type="primary"
+        ghost
+        :loading="postRequest.loading"
+        @click="handlePostRequest"
+      >
+        usePost 示例
+      </a-button>
+
+      <!-- 显示请求结果 -->
+      <a-card v-if="requestResult" size="small" title="请求结果">
+        <pre style="margin: 0; font-size: 12px; max-height: 200px; overflow: auto;">{{ JSON.stringify(requestResult, null, 2) }}</pre>
+      </a-card>
+    </a-space>
+  </a-card>
+</template>
+
+<script>
+import { useRunLogic, usePost } from '@vue2-client/composables'
+
+export default {
+  name: 'UseRequestDemo',
+
+  data () {
+    return {
+      // 请求结果展示
+      requestResult: null,
+
+      // ========== useRunLogic 实例 ==========
+      // 示例1: 基础用法
+      basicRequest: useRunLogic('test'),
+
+      // 示例2: 全局 Loading
+      globalLoadingRequest: useRunLogic('test', {
+        globalLoading: '正在加载数据...'
+      }),
+
+      // 示例3: 请求去重
+      dedupeRequest: useRunLogic('test', {
+        dedupe: true
+      }),
+
+      // 示例4: 组合使用
+      comboRequest: useRunLogic('test', {
+        dedupe: true,
+        globalLoading: '处理中，请勿重复操作...'
+      }),
+
+      // ========== usePost 实例 ==========
+      postRequest: usePost('/api/af-safecheck/logic/test', {
+        globalLoading: '请求中...'
+      })
+    }
+  },
+
+  methods: {
+    // 示例1: 基础请求
+    async handleBasicRequest () {
+      const { success, data, error } = await this.basicRequest.execute({
+        queryParamsName: 'checkPlanListCRUD',
+        pageNum: 1,
+        pageSize: 5
+      })
+      if (success) {
+        this.requestResult = data
+        this.$message.success('基础请求成功')
+      } else if (error?.code !== 'ERR_DUPLICATE_REQUEST') {
+        this.$message.error('请求失败: ' + error?.message)
+      }
+    },
+
+    // 示例2: 全局 Loading 请求
+    async handleGlobalLoadingRequest () {
+      const { success, data, error } = await this.globalLoadingRequest.execute({
+        queryParamsName: 'checkPlanListCRUD',
+        pageNum: 1,
+        pageSize: 5
+      })
+      if (success) {
+        this.requestResult = data
+        this.$message.success('全局 Loading 请求成功')
+      } else if (error?.code !== 'ERR_DUPLICATE_REQUEST') {
+        this.$message.error('请求失败: ' + error?.message)
+      }
+    },
+
+    // 示例3: 去重请求
+    async handleDedupeRequest () {
+      // 快速点击多次，只会发送一次请求
+      const { success, data, error } = await this.dedupeRequest.execute({
+        queryParamsName: 'checkPlanListCRUD',
+        pageNum: 1,
+        pageSize: 5
+      })
+      if (success) {
+        this.requestResult = data
+        this.$message.success('去重请求成功 (查看控制台是否有去重警告)')
+      } else if (error?.code === 'ERR_DUPLICATE_REQUEST') {
+        // 重复请求被拦截，静默处理或提示
+        console.log('重复请求已被拦截')
+      } else {
+        this.$message.error('请求失败: ' + error?.message)
+      }
+    },
+
+    // 示例4: 组合请求
+    async handleComboRequest () {
+      const { success, data, error } = await this.comboRequest.execute({
+        queryParamsName: 'checkPlanListCRUD',
+        pageNum: 1,
+        pageSize: 5
+      })
+      if (success) {
+        this.requestResult = data
+        this.$message.success('组合请求成功')
+      } else if (error?.code !== 'ERR_DUPLICATE_REQUEST') {
+        this.$message.error('请求失败: ' + error?.message)
+      }
+    },
+
+    // 示例5: usePost 请求
+    async handlePostRequest () {
+      const { success, data, error } = await this.postRequest.execute({
+        queryParamsName: 'checkPlanListCRUD',
+        pageNum: 1,
+        pageSize: 5
+      })
+      if (success) {
+        this.requestResult = data
+        this.$message.success('usePost 请求成功')
+      } else if (error?.code !== 'ERR_DUPLICATE_REQUEST') {
+        this.$message.error('请求失败: ' + error?.message)
+      }
+    }
+  }
+}
+</script>

package/src/composables/index.js

@@ -0,0 +1,6 @@
+/**
+ * Vue Composables 入口文件
+ * 提供 Composition API 风格的可复用逻辑
+ */
+
+export { usePost, createPost, useRunLogic, createRunLogic } from './usePost'

package/src/composables/useGlobalLoading.js

@@ -0,0 +1,206 @@
+/**
+ * 全局 Loading 管理
+ * 纯 JS 实现，直接操作 DOM，不依赖 Vue 组件
+ * 支持引用计数，多个并发请求时正确处理显示/隐藏
+ * 支持超时自动隐藏保护机制
+ */
+
+// 全局状态
+let isLoading = false
+let loadingElement = null
+let messageText = '加载中...'
+let loadingCount = 0 // 引用计数，支持并发请求
+let autoHideTimer = null // 超时自动隐藏定时器
+
+// 配置
+const DEFAULT_TIMEOUT = 30000 // 默认超时时间 30 秒
+const CONTAINER_ID = 'global-loading-container'
+
+/**
+ * 创建 Loading DOM 元素
+ */
+function createLoadingElement (message) {
+  const container = document.createElement('div')
+  container.id = CONTAINER_ID
+  container.innerHTML = `
+    <div class="global-loading-mask">
+      <div class="global-loading-content">
+        <div class="global-loading-spinner">
+          <div class="ant-spin ant-spin-lg ant-spin-spinning">
+            <span class="ant-spin-dot ant-spin-dot-spin">
+              <i class="ant-spin-dot-item"></i>
+              <i class="ant-spin-dot-item"></i>
+              <i class="ant-spin-dot-item"></i>
+              <i class="ant-spin-dot-item"></i>
+            </span>
+          </div>
+        </div>
+        <p class="global-loading-message">${message}</p>
+      </div>
+    </div>
+  `
+  return container
+}
+
+/**
+ * 注入全局样式（只注入一次）
+ */
+function injectStyles () {
+  if (document.getElementById('global-loading-styles')) return
+
+  const style = document.createElement('style')
+  style.id = 'global-loading-styles'
+  style.textContent = `
+    .global-loading-mask {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.45);
+      z-index: 99999;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .global-loading-content {
+      text-align: center;
+    }
+    .global-loading-message {
+      margin-top: 16px;
+      font-size: 14px;
+      color: #fff;
+    }
+    .global-loading-content .ant-spin-dot-item {
+      background-color: #fff !important;
+    }
+  `
+  document.head.appendChild(style)
+}
+
+/**
+ * 清除超时定时器
+ */
+function clearAutoHideTimer () {
+  if (autoHideTimer) {
+    clearTimeout(autoHideTimer)
+    autoHideTimer = null
+  }
+}
+
+/**
+ * 设置超时自动隐藏
+ * @param {number} timeout - 超时时间（毫秒）
+ */
+function setAutoHideTimer (timeout) {
+  clearAutoHideTimer()
+  if (timeout > 0) {
+    autoHideTimer = setTimeout(() => {
+      console.warn(`[GlobalLoading] 超时自动隐藏 (${timeout}ms)`)
+      forceHideGlobalLoading()
+    }, timeout)
+  }
+}
+
+/**
+ * 显示全局 Loading
+ * 支持引用计数，多次调用只显示一个 Loading
+ * @param {string|boolean} message - 提示信息，传 true 使用默认文字
+ * @param {number} timeout - 超时自动隐藏时间（毫秒），默认 30 秒，传 0 禁用
+ */
+export function showGlobalLoading (message = '加载中...', timeout = DEFAULT_TIMEOUT) {
+  loadingCount++
+
+  // 已经在显示，只增加计数，重置超时
+  if (isLoading) {
+    setAutoHideTimer(timeout)
+    return
+  }
+
+  isLoading = true
+  messageText = typeof message === 'string' ? message : '加载中...'
+
+  // 注入样式
+  injectStyles()
+
+  // 创建并插入 DOM
+  loadingElement = createLoadingElement(messageText)
+  document.body.appendChild(loadingElement)
+
+  // 设置超时自动隐藏
+  setAutoHideTimer(timeout)
+}
+
+/**
+ * 隐藏全局 Loading
+ * 只有当所有请求都完成时才真正隐藏
+ */
+export function hideGlobalLoading () {
+  loadingCount = Math.max(0, loadingCount - 1)
+
+  // 还有其他请求在进行中，不隐藏
+  if (loadingCount > 0) return
+
+  doHide()
+}
+
+/**
+ * 强制隐藏全局 Loading（重置计数器）
+ * 用于异常情况下的强制重置
+ */
+export function forceHideGlobalLoading () {
+  loadingCount = 0
+  doHide()
+}
+
+/**
+ * 执行隐藏操作
+ */
+function doHide () {
+  if (!isLoading) return
+
+  isLoading = false
+  clearAutoHideTimer()
+
+  // 移除 DOM
+  if (loadingElement && loadingElement.parentNode) {
+    loadingElement.parentNode.removeChild(loadingElement)
+  }
+  loadingElement = null
+}
+
+/**
+ * 获取当前 Loading 状态
+ * @returns {boolean}
+ */
+export function isGlobalLoadingVisible () {
+  return isLoading
+}
+
+/**
+ * 获取当前 Loading 计数
+ * @returns {number}
+ */
+export function getLoadingCount () {
+  return loadingCount
+}
+
+/**
+ * useGlobalLoading Hook（Vue Composition API 风格）
+ * @returns {{ show: Function, hide: Function, forceHide: Function, isVisible: Function }}
+ */
+export function useGlobalLoading () {
+  return {
+    show: showGlobalLoading,
+    hide: hideGlobalLoading,
+    forceHide: forceHideGlobalLoading,
+    isVisible: isGlobalLoadingVisible
+  }
+}
+
+export default {
+  show: showGlobalLoading,
+  hide: hideGlobalLoading,
+  forceHide: forceHideGlobalLoading,
+  isVisible: isGlobalLoadingVisible
+}

package/src/composables/usePost.js

@@ -0,0 +1,221 @@
+import Vue from 'vue'
+import { post } from '@vue2-client/services/api/restTools'
+
+/**
+ * @typedef {Object} RequestResult
+ * @property {boolean} success - 请求是否成功
+ * @property {any} data - 响应数据
+ * @property {Error|null} error - 错误信息
+ */
+
+/**
+ * @typedef {Object} UsePostReturn
+ * @property {boolean} loading - 加载状态
+ * @property {Error|null} error - 错误信息
+ * @property {any} data - 响应数据
+ * @property {(params?: object, config?: object) => Promise<RequestResult>} execute - 执行请求
+ * @property {() => void} reset - 重置状态
+ */
+
+/**
+ * Vue Composition API 风格的 POST 请求 Hook
+ * 提供响应式的 loading 状态管理，返回统一的结果结构
+ *
+ * @param {string} url - 请求地址
+ * @param {object} defaultConfig - 默认配置
+ * @param {boolean|string} defaultConfig.globalLoading - 是否显示全局 Loading
+ * @param {boolean} defaultConfig.dedupe - 是否启用请求去重（POST 默认开启，设为 false 可关闭）
+ * @returns {UsePostReturn}
+ *
+ * @example
+ * // 基础用法
+ * const { loading, execute } = usePost('/api/save')
+ * const { success, data, error } = await execute(formData)
+ * if (success) {
+ *   message.success('保存成功')
+ * }
+ *
+ * @example
+ * // 在模板中绑定 loading 状态
+ * // <a-button :loading="loading" @click="handleSave">保存</a-button>
+ * const { loading, execute } = usePost('/api/save', { globalLoading: '保存中...' })
+ *
+ * @example
+ * // 获取响应式数据
+ * const { loading, data, error, execute } = usePost('/api/query')
+ * await execute({ id: 1 })
+ * // data 会自动更新，可直接在模板中使用
+ */
+export function usePost (url, defaultConfig = {}) {
+  // 响应式状态
+  const state = Vue.observable({
+    loading: false,
+    error: null,
+    data: null
+  })
+
+  /**
+   * 执行请求
+   * @param {object} params - 请求参数
+   * @param {object} config - 本次请求的配置（覆盖默认配置）
+   * @returns {Promise<RequestResult>} 统一的结果结构
+   */
+  async function execute (params = {}, config = {}) {
+    state.loading = true
+    state.error = null
+
+    try {
+      const result = await post(url, params, { ...defaultConfig, ...config })
+      state.data = result
+      return { success: true, data: result, error: null }
+    } catch (err) {
+      state.error = err
+      return { success: false, data: null, error: err }
+    } finally {
+      state.loading = false
+    }
+  }
+
+  /**
+   * 重置状态
+   */
+  function reset () {
+    state.loading = false
+    state.error = null
+    state.data = null
+  }
+
+  // 返回响应式属性的 getter，确保在模板中能正确响应
+  return {
+    get loading () { return state.loading },
+    get error () { return state.error },
+    get data () { return state.data },
+    execute,
+    reset
+  }
+}
+
+export default usePost
+
+/**
+ * @typedef {Object} UseRunLogicReturn
+ * @property {boolean} loading - 加载状态
+ * @property {Error|null} error - 错误信息
+ * @property {any} data - 响应数据
+ * @property {(params?: object, overrideOptions?: object) => Promise<RequestResult>} execute - 执行请求
+ * @property {() => void} reset - 重置状态
+ */
+
+/**
+ * Vue Composition API 风格的 runLogic Hook
+ * 用于调用后端业务逻辑，提供响应式的 loading 状态管理
+ *
+ * @param {string} logicName - 业务逻辑名称
+ * @param {object} options - 配置选项
+ * @param {string} options.serviceName - 服务名称，默认为 VUE_APP_SYSTEM_NAME
+ * @param {boolean} options.isDev - 是否为开发环境
+ * @param {boolean|string} options.globalLoading - 是否显示全局 Loading
+ * @param {boolean} options.dedupe - 是否启用请求去重（POST 默认开启，设为 false 可关闭）
+ * @returns {UseRunLogicReturn}
+ *
+ * @example
+ * // 基础用法
+ * const { loading, execute, data } = useRunLogic('getUserInfo')
+ * const { success, data: result } = await execute({ userId: 1 })
+ * if (success) {
+ *   console.log(result)
+ * }
+ *
+ * @example
+ * // 带全局 Loading
+ * const { loading, execute } = useRunLogic('saveOrder', {
+ *   globalLoading: '保存中...',
+ *   dedupe: true
+ * })
+ * // 模板: <a-button :loading="loading" @click="handleSave">保存</a-button>
+ *
+ * @example
+ * // 指定服务名称
+ * const { execute } = useRunLogic('queryData', {
+ *   serviceName: 'af-custom',
+ *   isDev: false
+ * })
+ */
+export function useRunLogic (logicName, options = {}) {
+  const {
+    serviceName = process.env.VUE_APP_SYSTEM_NAME,
+    isDev = false,
+    globalLoading = false,
+    dedupe = false
+  } = options
+
+  // 响应式状态
+  const state = Vue.observable({
+    loading: false,
+    error: null,
+    data: null
+  })
+
+  /**
+   * 构建请求 URL
+   * @param {string} svcName - 服务名称
+   * @param {boolean} dev - 是否开发环境
+   * @returns {string}
+   */
+  function buildUrl (svcName, dev) {
+    const apiPre = dev ? '/devApi/' : '/api/'
+    return `${apiPre}${svcName}/logic/${logicName}`
+  }
+
+  /**
+   * 执行业务逻辑
+   * @param {object} params - 请求参数
+   * @param {object} overrideOptions - 本次请求的配置（覆盖默认配置）
+   * @returns {Promise<RequestResult>} 统一的结果结构
+   */
+  async function execute (params = {}, overrideOptions = {}) {
+    state.loading = true
+    state.error = null
+
+    // 合并配置
+    const finalServiceName = overrideOptions.serviceName || serviceName
+    const finalIsDev = overrideOptions.isDev !== undefined ? overrideOptions.isDev : isDev
+
+    // 构建请求 URL
+    const url = buildUrl(finalServiceName, finalIsDev)
+
+    // 构建请求配置
+    const requestConfig = {
+      globalLoading: overrideOptions.globalLoading !== undefined ? overrideOptions.globalLoading : globalLoading,
+      dedupe: overrideOptions.dedupe !== undefined ? overrideOptions.dedupe : dedupe
+    }
+
+    try {
+      const result = await post(url, params, requestConfig)
+      state.data = result
+      return { success: true, data: result, error: null }
+    } catch (err) {
+      state.error = err
+      return { success: false, data: null, error: err }
+    } finally {
+      state.loading = false
+    }
+  }
+
+  /**
+   * 重置状态
+   */
+  function reset () {
+    state.loading = false
+    state.error = null
+    state.data = null
+  }
+
+  return {
+    get loading () { return state.loading },
+    get error () { return state.error },
+    get data () { return state.data },
+    execute,
+    reset
+  }
+}