Refactoring useHttp to httpService

designer-demo/package.json

@@ -12,12 +12,14 @@
     "@opentiny/tiny-engine": "workspace:^",
     "@opentiny/tiny-engine-theme-dark": "workspace:*",
     "@opentiny/tiny-engine-theme-light": "workspace:*",
+    "@opentiny/tiny-engine-utils": "workspace:*",
     "@opentiny/vue": "~3.14.0",
     "@opentiny/vue-design-smb": "~3.14.0",
     "@opentiny/vue-icon": "~3.14.0",
     "@opentiny/vue-locale": "~3.14.0",
     "@opentiny/vue-renderless": "~3.14.0",
     "@opentiny/vue-theme": "~3.14.0",
+    "@vueuse/core": "^9.6.0",
     "vue": "^3.4.21"
   },
   "devDependencies": {

designer-demo/registry.js

@@ -45,11 +45,12 @@ import {
   GlobalService
 } from '@opentiny/tiny-engine'
 import engineConfig from './engine.config'
+import { HttpService } from './src/composable'
 
 export default {
   root: {
     id: 'engine.root',
-    metas: [GenerateCodeService, GlobalService]
+    metas: [HttpService, GenerateCodeService, GlobalService]
   },
   config: engineConfig,
   layout: {

designer-demo/src/composable/http/Login.vue

@@ -0,0 +1,83 @@
+<template>
+  <div v-if="visible" class="tiny-popup__wrapper">
+    <div class="tiny-sso__box">
+      <div class="tiny-sso__body">
+        <iframe :src="url" class="tiny-sso__body-iframe" frameBorder="0" scrolling="no"></iframe>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const visible = ref(false)
+    const url = ref('')
+
+    const openLogin = (procession, newUrl) => {
+      visible.value = true
+      url.value = newUrl
+
+      return new Promise((resolve, reject) => {
+        procession.mePromise.resolve = resolve
+        procession.mePromise.reject = reject
+      })
+    }
+
+    const closeLogin = () => {
+      visible.value = false
+    }
+
+    return {
+      openLogin,
+      closeLogin,
+      visible,
+      url
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.tiny-popup__wrapper {
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  margin: 0;
+
+  .tiny-sso__box {
+    position: absolute;
+    background: #fff;
+    border: 1px solid transparent;
+    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+    .tiny-sso__body {
+      text-align: initial;
+      padding: 20px;
+      color: #5a5e66;
+      line-height: 32px;
+      font-size: 14px;
+
+      .tiny-sso__body-iframe {
+        width: 450px;
+        height: 450px;
+        overflow: hidden;
+        //兼容edge
+        @supports (-ms-ime-align: auto) {
+          height: 460px;
+        }
+      }
+    }
+  }
+}
+</style>

designer-demo/src/composable/http/index.js

@@ -0,0 +1,131 @@
+import { createApp } from 'vue'
+import { HttpService } from '@opentiny/tiny-engine'
+import { useBroadcastChannel } from '@vueuse/core'
+import { constants } from '@opentiny/tiny-engine-utils'
+import Login from './Login.vue'
+import mockData from './mock'
+
+const LOGIN_EXPIRED_CODE = 401
+const { BROADCAST_CHANNEL } = constants
+
+const { post: globalNotify } = useBroadcastChannel({ name: BROADCAST_CHANNEL.Notify })
+
+const procession = {
+  promiseLogin: null,
+  mePromise: {}
+}
+
+const loginDom = document.createElement('div')
+document.body.appendChild(loginDom)
+const loginVM = createApp(Login).mount(loginDom)
+
+window.lowcode = {
+  platformCenter: {
+    Session: {
+      rebuiltCallback: function () {
+        loginVM.closeLogin()
+
+        procession.mePromise.resolve('login ok')
+        procession.promiseLogin = null
+        procession.mePromise = {}
+      }
+    }
+  }
+}
+
+const showError = (url, message) => {
+  globalNotify({
+    type: 'error',
+    title: '接口报错',
+    message: `报错接口: ${url} \n报错信息: ${message ?? ''}`
+  })
+}
+
+const preRequest = (config) => {
+  const isDevelopEnv = import.meta.env.MODE?.includes('dev')
+
+  if (isDevelopEnv && config.url.match(/\/generate\//)) {
+    config.baseURL = ''
+  }
+
+  const isVsCodeEnv = window.vscodeBridge
+
+  if (isVsCodeEnv) {
+    config.baseURL = ''
+  }
+
+  return config
+}
+
+const preResponse = (res) => {
+  if (res.data?.error) {
+    showError(res.config?.url, res?.data?.error?.message)
+
+    return Promise.reject(res.data.error)
+  }
+
+  return res.data?.data
+}
+
+const openLogin = () => {
+  return new Promise((resolve, reject) => {
+    if (!procession.promiseLogin) {
+      procession.promiseLogin = loginVM.openLogin(procession, '/api/rebuildSession')
+      procession.promiseLogin.then((response) => {
+        HttpService.apis.request(response.config).then(resolve, reject)
+      })
+    }
+  })
+}
+
+const errorResponse = (error) => {
+  // 用户信息失效时，弹窗提示登录
+  const { response } = error
+
+  if (response?.status === LOGIN_EXPIRED_CODE) {
+    // vscode 插件环境弹出输入框提示登录
+    if (window.vscodeBridge) {
+      return Promise.resolve(true)
+    }
+
+    // 浏览器环境弹出小窗登录
+    if (response?.headers['x-login-url']) {
+      return openLogin()
+    }
+  }
+
+  showError(error.config?.url, error?.message)
+
+  return response?.data.error ? Promise.reject(response.data.error) : Promise.reject(error.message)
+}
+
+const getConfig = (env = import.meta.env) => {
+  const baseURL = env.VITE_ORIGIN
+  // 仅在本地开发时，启用 withCredentials
+  const dev = env.MODE?.includes('dev')
+  // 获取租户 id
+  const getTenant = () => new URLSearchParams(location.search).get('tenant')
+
+  return {
+    baseURL,
+    withCredentials: false,
+    headers: {
+      'x-lowcode-mode': dev ? 'develop' : null,
+      'x-lowcode-org': getTenant()
+    }
+  }
+}
+
+const options = {
+  axiosConfig: getConfig(),
+  enableMock: true,
+  mockData,
+  interceptors: {
+    request: [preRequest],
+    response: [[preResponse, errorResponse]]
+  }
+}
+
+HttpService.apis.setOptions(options)
+
+export default HttpService