chore: 移除 ofetch 和 ky，微调其他

package.json

@@ -13,7 +13,6 @@
   "type": "module",
   "dependencies": {
     "@codemirror/lang-javascript": "^6.2.2",
-    "@vitejs/plugin-vue-jsx": "^4.0.0",
     "@vueuse/core": "^10.10.0",
     "asmcrypto.js": "^2.3.2",
     "axios": "^1.7.2",
@@ -23,13 +22,12 @@
     "dayjs": "^1.11.11",
     "element-plus": "^2.7.5",
     "filesize": "^10.1.2",
-    "ky": "^0.33.3",
-    "ofetch": "^1.3.4",
+    "lodash-es": "^4.17.21",
     "pinia": "^2.1.7",
     "randomcolor": "^0.6.2",
     "vue": "^3.4.27",
     "vue-diff": "^1.2.4",
-    "vue-router": "^4.3.2",
+    "vue-router": "^4.3.3",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
@@ -42,6 +40,7 @@
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-legacy": "^5.4.1",
     "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
     "@vue/compiler-sfc": "^3.4.27",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
@@ -55,6 +54,6 @@
     "unplugin-icons": "^0.17.4",
     "unplugin-vue-components": "^0.26.0",
     "vite": "^5.2.13",
-    "vue-tsc": "^2.0.20"
+    "vue-tsc": "^2.0.21"
   }
 }

src/App.vue

@@ -13,7 +13,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="mx-auto w-full max-w-[950px] h-full">
+  <div class="mx-auto w-full max-w-screen-lg h-full">
     <el-watermark :content="testMode ? '仅用于展示，修改无效' : ''"
                   :font="{fontSize: 24}"
                   :gap="[100, 32]">

src/Main.vue

@@ -1,6 +1,6 @@
 <template>
   <el-container id="root"
-       class="bg-[#545c64] mx-auto my-0 h-screen flex flex-col">
+       class="bg-gray-600 mx-auto my-0 h-screen flex flex-col">
     <el-header class="nav bg-inherit flex-none text-white flex justify-between">
       <el-space alignment="center" :size="0" style="height: 60px;">
         <div class="menu-button-wrapper mx-2">

src/backend.ts

@@ -1,7 +1,5 @@
 import axios from 'axios'
 import axiosRetry from 'axios-retry'
-import { ofetch } from 'ofetch'
-
 
 axiosRetry(axios, {
   retries: 3,
@@ -37,10 +35,6 @@ export const urlBase = process.env.NODE_ENV == 'development' ?
 
 // 逐渐使用ofetch替换axios
 // 后记：发现ofetch也是一团糟，ky也是一团糟，还是axios好用
-export const apiFetch = ofetch.create({
-  baseURL: urlBase,
-  retry: 3,
-  method: 'POST'
-})
+// 2024.6.12 全都鲨了，只留下 axios
 
 export const backend = newRequestClient(urlBase)

src/components/Menu.vue

@@ -1,6 +1,6 @@
 <template>
-  <el-menu :unique-opened="true" style="border-right: 0;" active-text-color="#ffd04b"
-           :background-color="props.type === 'dark' ? '#545c64' : undefined"
+  <el-menu :unique-opened="true" style="border-right: 0;" :active-text-color="twColors.amber[300]"
+           :background-color="props.type === 'dark' ? twColors.gray[600] : undefined"
            :text-color="props.type === 'dark' ? '#fff' : undefined"
            router :default-active="route.path">
     <el-menu-item index="/log">
@@ -129,9 +129,12 @@ import {
   Tools,
   EditPen
 } from '@element-plus/icons-vue'
-
 import { useStore } from "~/store";
 import type { ModelRef } from "vue";
+import resolveConfig from 'tailwindcss/resolveConfig'
+import tailwindConfig from '../../tailwind.config'
+
+const twColors = resolveConfig(tailwindConfig).theme.colors
 
 const props = defineProps<{
   type: 'light' | 'dark'

src/components/mod/PageStory.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { Back, Delete, Select, Upload } from '@element-plus/icons-vue'
 import { useStore, urlPrefix } from '~/store'
-import { apiFetch, backend } from '~/backend'
+import { backend } from '~/backend'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import randomColor from "randomcolor";
@@ -37,9 +37,7 @@ const token = store.token
 const url = (p: string) => urlPrefix + "/story/" + p;
 
 async function getInfo() {
-    return apiFetch(url("info"), {
-        method: "get"
-    })
+  return backend.get(url("info")) as any
 }
 
 // async function getLogs() {
@@ -97,9 +95,7 @@ async function uploadLog(v: Log) {
             type: 'warning',
         }
     );
-    return apiFetch(url("uploadLog"), {
-        method: "post", body: v, headers: { token: token }
-    })
+    return backend.post(url("uploadLog"), v,{ headers: { token }}) as any
 }
 
 //
@@ -403,14 +399,16 @@ onBeforeMount(async () => {
                     </ElCollapseItem>
                 </ElCollapse>
             </ElCard>
-            <template v-for="v, i1 in items" :key="i1">
-                <p :style="{ color: users[v.IMUserId][0] }">
-                    <span>{{ v.nickname }}：</span>
-                    <template v-for="p1, i2 in v.message.split('\n')" :key="i2">
-                        <span>{{ p1 }}</span><br>
-                    </template>
-                </p>
-            </template>
+            <div class="my-4 px-4">
+                <template v-for="(v, i1) in items" :key="i1">
+                    <p :style="{ color: users[v.IMUserId][0] }">
+                        <span>{{ v.nickname }}：</span>
+                        <template v-for="(p1, i2) in v.message.split('\n')" :key="i2">
+                          <span>{{ p1 }}</span><br>
+                        </template>
+                    </p>
+                </template>
+            </div>
             <div style="display: flex; justify-content: center;">
                 <el-pagination class="pagination" :page-size="logItemPage.pageSize" :current-page="logItemPage.pageNum"
                     :pager-count=5 :total="logItemPage.size" @current-change="handleItemPageChange" layout="prev, pager, next"

src/store/index.ts

@@ -1,4 +1,4 @@
-import { apiFetch, backend } from '~/backend'
+import { backend } from '~/backend'
 
 import { addImConnectionForm } from '~/components/PageConnectInfoItems.vue'
 import type {
@@ -596,38 +596,33 @@ export const useStore = defineStore('main', {
     },
 
     async jsStatus(): Promise<boolean> {
-      const resp = await apiFetch(urlPrefix + '/js/status', { method: 'GET' })
-      return resp.status
+      const resp: { result: true, status: boolean } | {
+        result: false, err: string
+      } = await backend.get(urlPrefix + '/js/status' )
+      if (resp.result) {
+        return resp.status
+      }
+      return false
     },
     async jsList(): Promise<JsScriptInfo[]> {
-      return await apiFetch(urlPrefix + '/js/list', {
-        method: 'GET', headers: {
-          token: this.token
-        }
-      })
+      return await backend.get(urlPrefix + '/js/list', { headers: { token: this.token } }) as any
     },
     async jsGetConfig() {
-      return await apiFetch(urlPrefix + '/js/get_configs', {
-        method: 'GET', headers: {
-          token: this.token
-        }
-      })
+      return await backend.get(urlPrefix + '/js/get_configs', { headers: { token: this.token } }) as any
     },
     async jsSetConfig(configs: any) {
-      return await backend.post(urlPrefix + '/js/set_configs', configs)
+      return await backend.post(urlPrefix + '/js/set_configs', configs) as any
     },
     async jsResetConfig(pluginName: any, key: any) {
-      return await backend.post(urlPrefix + '/js/reset_config', { pluginName, key })
+      return await backend.post(urlPrefix + '/js/reset_config', { pluginName, key }) as any
     },
     async jsDeleteUnusedConfig(pluginName: any, key: any) {
-      return await backend.post(urlPrefix + '/js/delete_unused_config', { pluginName, key })
+      return await backend.post(urlPrefix + '/js/delete_unused_config', { pluginName, key }) as any
     },
     async jsGetRecord() {
-      return await apiFetch(urlPrefix + '/js/get_record', {
-        method: 'GET', headers: {
-          token: this.token
-        }
-      }) as {
+      return await backend.get(urlPrefix + '/js/get_record',
+        { headers: { token: this.token } }
+      ) as {
         outputs: string[]
       }
     },
@@ -640,41 +635,42 @@ export const useStore = defineStore('main', {
       return info as any
     },
     async jsReload() {
-      return await apiFetch(urlPrefix + '/js/reload', {
-        headers: {
-          token: this.token
-        }
-      })
+      return await backend.post(
+        urlPrefix + '/js/reload',
+        undefined,
+        { headers: { token: this.token } }
+      ) as any
     },
     async jsShutdown() {
-      return await apiFetch(urlPrefix + '/js/shutdown', {
-        headers: {
-          token: this.token
-        }
-      })
+      return await backend.post(
+        urlPrefix + '/js/shutdown',
+        undefined,
+        { headers: { token: this.token } }
+      ) as any
     },
     async jsExec(code: string) {
-      return await apiFetch(urlPrefix + '/js/execute', { body: { value: code } }) as {
+      return await backend.post(
+        urlPrefix + '/js/execute',
+        { value: code } ,
+      ) as {
         ret: any,
         outputs: string[],
         err: string,
       }
     },
     async jsEnable(body: any) {
-      return await apiFetch(urlPrefix + '/js/enable', {
-        headers: {
-          token: this.token
-        },
-        body
-      })
+      return await backend.post(
+        urlPrefix + '/js/enable',
+        body,
+        { headers: { token: this.token } }
+      ) as any
     },
     async jsDisable(body: any) {
-      return await apiFetch(urlPrefix + '/js/disable', {
-        headers: {
-          token: this.token
-        },
-        body
-      })
+      return await backend.post(
+        urlPrefix + '/js/disable',
+        body,
+        { headers: { token: this.token } }
+      ) as any
     },
 
     async jsCheckUpdate({ index }: any) {
@@ -695,11 +691,11 @@ export const useStore = defineStore('main', {
     },
 
     async toolOnebot() {
-      return await apiFetch(urlPrefix + '/tool/onebot', {
-        headers: {
-          token: this.token
-        }
-      }) as {
+      return await backend.post(
+        urlPrefix + '/tool/onebot',
+        undefined,
+        { headers: { token: this.token } }
+      ) as {
         ok: boolean,
         ip: string,
         errText: string
@@ -747,62 +743,31 @@ export const useStore = defineStore('main', {
     },
 
     async helpDocTree(): Promise<{ result: true, data: HelpDoc[] } | { result: false, err?: string }> {
-      return await apiFetch(urlPrefix + '/helpdoc/tree', {
-        method: 'GET', headers: {
-          token: this.token
-        }
-      })
+      return await backend.get(urlPrefix + '/helpdoc/tree', { headers: { token: this.token } })
     },
 
     async helpDocReload(): Promise<{ result: true } | { result: false, err?: string }> {
-      return await apiFetch(urlPrefix + '/helpdoc/reload', {
-        method: 'POST', headers: {
-          token: this.token
-        }
-      })
+      return await backend.post(urlPrefix + '/helpdoc/reload', undefined,{ headers: { token: this.token } })
     },
 
     async helpDocUpload(form: any): Promise<{ result: true } | { result: false, err?: string }> {
-      return await apiFetch(urlPrefix + '/helpdoc/upload', {
-        method: 'POST', headers: {
-          token: this.token,
-        }, body: form
-      })
+      return await backend.post(urlPrefix + '/helpdoc/upload', form, { headers: { token: this.token } })
     },
 
     async helpDocDelete(keys: string[]): Promise<{ result: true } | { result: false, err?: string }> {
-      return await apiFetch(urlPrefix + '/helpdoc/delete', {
-        method: 'POST',
-        headers: { token: this.token },
-        body: { keys: keys }
-      })
+      return await backend.post(urlPrefix + '/helpdoc/delete', { keys: keys }, { headers: { token: this.token } })
     },
 
     async helpGetTextItemPage(param: HelpTextItemQuery): Promise<{ result: true; total: number; data: HelpTextItem[] } | { result: false; err?: string }> {
-      return await apiFetch(urlPrefix + "/helpdoc/textitem/get_page", {
-        method: "POST",
-        body: param,
-      });
+      return await backend.post(urlPrefix + "/helpdoc/textitem/get_page", param)
     },
 
     async helpGetConfig(): Promise<{ aliases: { [key: string]: string[] } }> {
-      return await apiFetch(urlPrefix + "/helpdoc/config", {
-        method: "GET",
-        headers: {
-          token: this.token
-        }
-      })
+      return await backend.get(urlPrefix + "/helpdoc/config", { headers: { token: this.token } })
     },
 
     async helpSetConfig(param: { aliases: { [key: string]: string[] } }): Promise<{ result: true } | { result: false, err?: string }> {
-      console.log("param=", param)
-      return await apiFetch(urlPrefix + "/helpdoc/config", {
-        method: "POST",
-        headers: {
-          token: this.token
-        },
-        body: param
-      })
+      return await backend.post(urlPrefix + "/helpdoc/config", param, { headers: { token: this.token } })
     },
 
 

vite.config.ts

@@ -73,17 +73,18 @@ export default defineConfig({
     rollupOptions: {
       output: {
         manualChunks: {
-          base: ["vue", "pinia"],
+          base: ["vue", "pinia", "vue-router"],
           element: ["element-plus"],
-          lodash: ["lodash-es"],
           codemirror: ["codemirror", "@codemirror/lang-javascript"],
-          network: ["ofetch", "axios", "axios-retry", "ky"],
-          util: [
+          network: ["axios", "axios-retry"],
+          utils: [
             "@vueuse/core",
             "asmcrypto.js",
             "clipboard",
             "dayjs",
             "filesize",
+            "lodash-es",
+            "randomcolor",
             "vue-diff",
             "vuedraggable",
           ],