Merge pull request #56 from JeremyYu-cn/feat-upgrade-vue3

Feat: Add fetch type and utils type

.eslintrc.js

@@ -13,6 +13,7 @@ module.exports = {
     // 自定义你的规则
     'vue/component-tags-order': ['off'],
     'vue/no-multiple-template-root': ['off'],
+    'max-params': ['off'],
     // 'no-undef': 'off', // 禁止使用未定义的变量，会把TS声明视为变量，暂时关闭
   },
   parserOptions: {

.vscode/settings.json

@@ -5,7 +5,7 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "eslint.validate": ["javascript", "javascriptreact", "vue", "typescript", "typescriptreact"],
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "css.validate": false,
   "less.validate": false,

src/api/home.ts

@@ -11,10 +11,41 @@ import _config from '@/config'
 // const screenshot_url = window.location.protocol + '//' + window.location.host + '/draw'
 export const download = (params: Type.Object = {}) => `${_config.SCREEN_URL}/api/screenshots?id=${params.id}&width=${params.width}&height=${params.height}`
 
+type IGetTempListParam = {
+  search: string
+  page: number
+  pageSize: number
+  cate:number
+}
+type IGetTempListData = {
+  cover: string
+  height: number
+  id: number
+  state: number
+  title: string
+  width: number
+}
+type IGetTempListResult = TCommResResult<IGetTempListData>
+
 // 获取模板列表
-export const getTempList = (params: Type.Object = {}) => fetch('design/list', params, 'get')
+export const getTempList = (params: IGetTempListParam) => fetch<IGetTempListResult>('design/list', params, 'get')
+
 export const getTempDetail = (params: Type.Object = {}) => fetch('design/temp', params, 'get')
-export const getCategories = (params: Type.Object = {}) => fetch('design/cate', params, 'get')
+
+type TGetCategoriesParams = {
+  type?: number
+}
+export type TGetCategoriesData = {
+  id: number
+  name: string
+  pid: number
+  type: number
+}
+type TgetCategoriesResult = TCommResResult<TGetCategoriesData>
+
+export const getCategories = (params: TGetCategoriesParams) => fetch<TgetCategoriesResult[]>('design/cate', params, 'get')
+
+
 // 保存模板
 export const saveTemp = (params: Type.Object = {}) => fetch('design/edit', params, 'post')
 // export const delTemp = (params: Type.Object = {}) => fetch('/api/template/temp_del', params)

src/api/material.ts

@@ -10,8 +10,36 @@ import fetch from '@/utils/axios'
 // 获取素材分类：
 export const getKinds = (params: Type.Object = {}) => fetch('design/cate', params)
 
+type TGetListParam = {
+  cate: number
+  pageSize: number
+}
+
+export type TGetListData = {
+  category: number
+  created_time: string
+  height: number
+  id: number
+  model: string
+  original: string
+  state: number
+  thumb: string
+  title: string
+  type: string
+  updated_time: string
+  url: string
+  width: number
+}
+
+type TGetListResult = TCommResResult<{
+  list: TGetListData
+  total: number
+}>
+
+
+
 // 获取素材列表：
-export const getList = (params: Type.Object = {}) => fetch('design/material', params)
+export const getList = (params: TGetListParam) => fetch<TGetListResult>('design/material', params)
 
 // 获取字体
 export const getFonts = (params: Type.Object = {}) => fetch('design/fonts', params)

src/config.ts

@@ -20,3 +20,7 @@ export default {
   QINIUYUN_PLUGIN: 'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/qiniu-js/2.5.5/qiniu.min.js',
   supportSubFont: true, // 是否开启服务端字体压缩
 }
+
+export const LocalStorageKey = {
+  tokenKey: "xp_token"
+}

src/env.d.ts

@@ -1,8 +0,0 @@
-// / <reference types="vite/client" />
-
-declare module '*.vue' {
-  import { DefineComponent } from 'vue';
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
-}

src/main.ts

@@ -2,8 +2,8 @@
  * @Author: ShawnPhang
  * @Date: 2022-03-03 14:13:16
  * @Description:
- * @LastEditors: ShawnPhang <site: book.palxp.com>
- * @LastEditTime: 2023-06-29 15:11:46
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-02-26 17:54:00
  */
 import { createApp } from 'vue'
 import App from './App.vue'
@@ -20,7 +20,7 @@ elementConfig.components.forEach((component) => {
   app.component(component.name, component)
 })
 
-elementConfig.plugins.forEach((plugin: any) => {
+elementConfig.plugins.forEach((plugin) => {
   app.use(plugin)
 })
 

src/types/env.d.ts

@@ -1,4 +1,4 @@
-/// <reference lib="dom" />
+// / <reference lib="dom" />
 
 interface ImportMeta {
     url: string
@@ -23,7 +23,8 @@ interface ImportMeta {
       on(event: string, cb: (...args: any[]) => void): void
     }
   
-    readonly env: ImportMetaEnv
+    // readonly env: ImportMetaEnv
+    
   
     glob(pattern: string): Record<
       string,

src/types/global.d.ts

@@ -0,0 +1,8 @@
+
+/** 公共API返回结果 */
+type TCommResResult<T> = {
+  code: number
+  msg: string
+  result: T
+}
+

src/utils/axios.ts

@@ -2,12 +2,12 @@
  * @Author: ShawnPhang
  * @Date: 2021-07-13 02:48:38
  * @Description: 本地测试项目请勿修改此文件
- * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2024-01-11 17:36:33
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-02-26 17:54:00
  */
-import axios from 'axios'
+import axios, { AxiosRequestConfig, AxiosResponse, AxiosStatic } from 'axios'
 import store from '@/store'
-import app_config from '@/config'
+import app_config, { LocalStorageKey } from '@/config'
 
 axios.defaults.timeout = 30000
 axios.defaults.headers.authorization = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MTAwMDEsImV4cCI6MTc4ODU3NDc1MDU4NX0.L_t6DFD48Dm6rUPfgIgOWJkz18En1m_-hhMHcpbxliY';
@@ -16,15 +16,15 @@ const baseUrl = app_config.API_URL
 
 // 请求拦截器
 axios.interceptors.request.use(
-  (config: Type.Object) => {
+  (config: AxiosRequestConfig) => {
     // const access_token = store.state.currentUser.access_token;
-    const url = config.url
+    const url = config.url ?? ""
     const values = {}
     // values.access_token = access_token;
     // values.version = version;
 
-    if (url.indexOf('http://') !== 0 && url.indexOf('https://') !== 0) {
-      url.indexOf('/') === 0 ? (config.url = baseUrl + url) : (config.url = baseUrl + '/' + url)
+    if (!url.startsWith('http://') && !url.startsWith('https://')) {
+      config.url = url.startsWith('/') ? baseUrl + url : config.url = baseUrl + '/' + url
     }
 
     if (config.method === 'get') {
@@ -44,10 +44,8 @@ axios.interceptors.request.use(
 )
 
 // 响应拦截器
-axios.interceptors.response.use(
-  (res: Type.Object) => {
+axios.interceptors.response.use((res: AxiosResponse<any>) => {
     // store.dispatch('hideLoading');
-
     // 接口规则：只有正确code为200时返回result结果对象，错误返回整个结果对象
 
     if (!res.data) {
@@ -74,16 +72,28 @@ axios.interceptors.response.use(
   },
 )
 
+type TFetchRequestConfigParams = AxiosRequestConfig & Record<string, any>
+type TFetchMethod = keyof Pick<
+  AxiosStatic, 
+  "get" | "post" | "put" | "getUri" | "request" | "delete" | "head" | "options" | "patch"
+>
+
 // export default axios;
-const fetch = (url: string, params: Type.Object, type: string | undefined = 'get', exheaders: Type.Object = {}, extra: any = {}) => {
-  if (params && params._noLoading) {
+const fetch = <T = any> (
+  url: string,
+  params: TFetchRequestConfigParams, 
+  type: TFetchMethod = 'get',
+  exheaders: Record<string, any> = {},
+  extra: Record<string, any> = {}
+): Promise<AxiosResponse<T>> => {
+  if (params?._noLoading) {
     delete params._noLoading
   } else {
     // store.commit('loading', '加载中..');
   }
 
-  const token = localStorage.getItem('xp_token')
-  const headerObject: Type.Object = { }
+  const token = localStorage.getItem(LocalStorageKey.tokenKey)
+  const headerObject: Record<string, any> = {}
   token && (headerObject.authorization = token)
   
   if (type === 'get') {
@@ -93,10 +103,10 @@ const fetch = (url: string, params: Type.Object, type: string | undefined = 'get
       ...extra,
     })
   } else {
-    return (axios as Type.Object)[type](url, params, {
+    return axios[type](url, params, {
       headers: Object.assign(headerObject, exheaders),
       ...extra,
-    })
+    }) as Promise<AxiosResponse<T>>
   }
 }
 

src/utils/index.ts

@@ -2,7 +2,7 @@
  * @Author: ShawnPhang
  * @Date: 2021-07-13 02:48:38
  * @Description:
- * @LastEditors: ShawnPhang
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
  * @LastEditTime: 2022-03-07 20:25:54
  */
 // import store from '../store'
@@ -11,12 +11,13 @@ import * as utils from './utils'
 import _config from '@/config'
 import modules from './plugins/modules'
 import cssLoader from './plugins/cssLoader'
+import type {App} from 'vue'
 
 /**
  * 全局组件方法
  */
 export default {
-  install(myVue: Type.Object) {
+  install(myVue: App) {
     /** 全局组件注册 */
     modules(myVue)
     /** iconfont 注入 */

src/utils/utils.ts

@@ -1,6 +1,8 @@
 import app_config from '@/config'
 export const config = app_config
 
+type TComObj = Record<string,any>
+
 /**
  * 星期换算
  * @param {String} 'YYYY-MM-DD'
@@ -38,30 +40,31 @@ export const config = app_config
 //   }
 // }
 // 判断是否在数组中并返回下标
-export const isInArray = (arr: Type.Object[], value: any) => {
-  if (arr.indexOf && typeof arr.indexOf === 'function') {
-    const index = arr.indexOf(value)
-    if (index >= 0) {
-      return index
-    }
+export const isInArray = (arr: (string | number)[], value: (string | number)) => {
+  const index = arr.indexOf(value)
+  if (index >= 0) {
+    return index
   }
   return false
 }
+
 /** 删除多个对象元素 */
-export const deleteSome = (obj: Type.Object, arr: string[]) => {
+export const deleteSome = <R extends TComObj, T extends TComObj = TComObj>(obj: T, arr: string[]) => {
   arr.forEach((key) => {
     delete obj[key]
   })
-  return obj
+  return obj as R extends T ? R : Partial<T>
 }
+
 /** 拾取对象元素 */
-export const pickSome = (obj: Type.Object, arr: string[]) => {
-  const newObj: Type.Object = {}
+export const pickSome = <R extends TComObj, T extends TComObj = TComObj>(obj: T, arr: string[]) => {
+  const newObj: Record<string, any> = {}
   arr.forEach((key) => {
     newObj[key] = obj[key]
   })
-  return newObj
+  return newObj as R extends T ? R : Partial<T>
 }
+
 /** String长度 */
 // export const getBLen = (str: string | any) => {
 //   if (str === null) {

src/utils/widgets/elementConfig.ts

@@ -169,7 +169,7 @@ const components = [
   // ElUpload,
 ]
 
-const plugins: any = [
+const plugins = [
   ElInfiniteScroll,
   ElLoading,
   // ElMessage,

src/utils/widgets/loadFontRule.ts

@@ -2,8 +2,8 @@
  * @Author: ShawnPhang
  * @Date: 2023-08-23 17:37:16
  * @Description: 提取字体子集
- * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-10-14 18:31:29
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-02-27 10:32:00
  */
 /**
  * 只有ttf/otf这种原始字体支持提取，如果服务端不支持该功能请设置false，以保证页面能加载字体。

src/views/Index.vue

@@ -1,8 +1,9 @@
 <!--
  * @Author: ShawnPhang
  * @Date: 2023-09-18 17:34:44
- * @Description:  
+ * @Description: 
  * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastUpdateContent: Support typescript
  * @LastEditTime: 2024-02-25 14:51:00
 -->
 <template>