chore: enhance common package types

Author: chilingling

packages/common/composable/http/index.js

@@ -0,0 +1,113 @@
+import { defineService, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
+import axios, { type AxiosInstance, type AxiosRequestConfig, type AxiosResponse, type CreateAxiosDefaults } from 'axios'
+
+// 请求拦截器函数类型
+type RequestInterceptorFunction =
+  | ((config: AxiosRequestConfig) => AxiosRequestConfig | Promise<AxiosRequestConfig>)
+  | [(config: AxiosRequestConfig) => AxiosRequestConfig | Promise<AxiosRequestConfig>, (error: any) => any]
+
+// 响应拦截器函数类型
+type ResponseInterceptorFunction =
+  | ((response: AxiosResponse) => AxiosResponse | Promise<AxiosResponse>)
+  | [(response: AxiosResponse) => AxiosResponse | Promise<AxiosResponse>, (error: any) => any]
+
+// 请求拦截器配置类型（支持单个函数、数组、嵌套数组）
+type RequestInterceptorConfig = RequestInterceptorFunction | (RequestInterceptorFunction | undefined)[]
+
+// 响应拦截器配置类型（支持单个函数、数组、嵌套数组）
+type ResponseInterceptorConfig = ResponseInterceptorFunction | (ResponseInterceptorFunction | undefined)[]
+
+// 拦截器配置接口
+interface InterceptorsConfig {
+  request?: RequestInterceptorConfig
+  response?: ResponseInterceptorConfig
+}
+
+// HTTP 服务选项接口
+interface HttpServiceOptions {
+  axiosConfig?: CreateAxiosDefaults
+  interceptors?: InterceptorsConfig
+}
+
+let http: AxiosInstance | null = null
+
+/**
+ * 创建拦截器处理器
+ * @param http - axios 实例
+ * @returns 拦截器添加函数
+ */
+const createInterceptorHandler =
+  (http: AxiosInstance) =>
+  ({ data, type }: { data: any; type: 'request' | 'response' }): void => {
+    if (typeof data === 'function') {
+      http.interceptors[type].use(data as any)
+
+      return
+    }
+
+    if (Array.isArray(data)) {
+      data.forEach((item) => {
+        if (!item) return
+
+        if (Array.isArray(item)) {
+          http.interceptors[type].use(...(item as any))
+
+          return
+        }
+
+        if (typeof item === 'function') {
+          http.interceptors[type].use(item as any)
+        }
+      })
+    }
+  }
+
+export default defineService({
+  id: META_SERVICE.Http,
+  type: 'MetaService',
+  initialState: {},
+  options: {
+    axiosConfig: {
+      // axios 配置
+      baseURL: '',
+      withCredentials: false, // 跨域请求时是否需要使用凭证
+      headers: {} // 请求头
+    },
+    interceptors: {
+      // 拦截器
+      request: [], // 支持配置多个请求拦截器，先注册后执行
+      response: [] // 支持配置多个响应拦截器，先注册先执行
+    }
+  } as HttpServiceOptions,
+  init: ({ options = {} }: { options?: HttpServiceOptions }) => {
+    const { axiosConfig = {}, interceptors = {} } = options
+    const { request = [], response = [] } = interceptors
+
+    http = axios.create(axiosConfig)
+    const addInterceptors = createInterceptorHandler(http)
+    addInterceptors({ data: request, type: 'request' })
+    addInterceptors({ data: response, type: 'response' })
+  },
+  apis: () => ({
+    /** 获取 axios 实例 */
+    getHttp: (): AxiosInstance | null => http,
+    /** GET 请求 */
+    get: (...args: any[]) => (http?.get as any)?.(...args),
+    /** POST 请求 */
+    post: (...args: any[]) => (http?.post as any)?.(...args),
+    /** 通用请求方法 */
+    request: (...args: any[]) => (http?.request as any)?.(...args),
+    /** PUT 请求 */
+    put: (...args: any[]) => (http?.put as any)?.(...args),
+    /** DELETE 请求 */
+    delete: (...args: any[]) => (http?.delete as any)?.(...args),
+    /** 流式请求 */
+    stream: (config: AxiosRequestConfig): Promise<AxiosResponse<any, any>> | undefined => {
+      const streamConfig: AxiosRequestConfig = {
+        responseType: 'stream',
+        ...config
+      }
+      return http?.request(streamConfig)
+    }
+  })
+})

packages/common/composable/http/index.ts

@@ -13,7 +13,19 @@
 import { PAGE_STATUS } from './constants'
 import { useResource, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 
-export const getCanvasStatus = (data) => {
+// 占用者信息接口
+interface Occupier {
+  id: number
+  username: string
+}
+
+// 画布状态返回值接口
+interface CanvasStatus {
+  state: string
+  data: Occupier | undefined
+}
+
+export const getCanvasStatus = (data: Occupier | undefined): CanvasStatus => {
   const globalState = getMetaApi(META_SERVICE.GlobalService).getState()
   const isDemo = useResource().appSchemaState.isDemo
   let state = ''

packages/common/i18n/index.js packages/common/i18n/index.tspackages/common/i18n/index.js renamed to packages/common/i18n/index.ts

@@ -10,7 +10,7 @@
  *
  */
 
-export const getCommentByKey = (key) => ({
+export const getCommentByKey = (key: string): { start: string; end: string } => ({
   start: `start-${key} 设计器生成的代码，为了避免出现问题，请勿修改`,
   end: `end-${key}`
 })

packages/common/js/app.js packages/common/js/app.tspackages/common/js/app.js renamed to packages/common/js/app.ts

@@ -1,4 +1,5 @@
-import eslintRecommended from '@eslint/js/src/configs/eslint-recommended.js'
+import eslintRecommended from '@eslint/js/src/configs/eslint-recommended'
+
 export default {
   ...eslintRecommended.rules,
   'no-console': 'error',

packages/common/js/canvas.js packages/common/js/canvas.tspackages/common/js/canvas.js renamed to packages/common/js/canvas.ts

@@ -11,6 +11,7 @@
  */
 
 import * as cssTree from 'css-tree'
+import type { StyleSheet, Rule } from 'css-tree'
 import { utils } from '@opentiny/tiny-engine-utils'
 
 const { hyphenate } = utils
@@ -22,13 +23,13 @@ const { hyphenate } = utils
  * @param {string} styleStr css 字符串
  * @returns object { [string]: string }
  */
-export const getCssObjectFromStyleStr = (styleStr) => {
-  const ast = cssTree.parse(styleStr)
-  const cssObject = {}
+export const getCssObjectFromStyleStr = (styleStr: string): Record<string, string> => {
+  const ast = cssTree.parse(styleStr) as StyleSheet
+  const cssObject: Record<string, string> = {}
 
   ast.children
-    .filter(({ type }) => type === 'Rule')
-    .forEach((item) => {
+    .filter((node): node is Rule => node.type === 'Rule')
+    .forEach((item: Rule) => {
       const matchCode = cssTree.generate(item).match(/^(.+){(.+)}$/)
 
       if (!matchCode) {
@@ -47,7 +48,7 @@ export const styleStrAddRoot = (str = '') => {
   return `:root { ${str}\n}`
 }
 
-export const obj2StyleStr = (obj = {}, addRoot = true) => {
+export const obj2StyleStr = (obj: Record<string, string> = {}, addRoot = true) => {
   const list = Object.entries(obj).map(([key, value]) => (value ? `${hyphenate(key)}: ${value};` : ''))
 
   return addRoot ? styleStrAddRoot(list.join('\n  ')) : ` { \n ${list.join('\n  ')} \n}`