添加mock

.env

@@ -0,0 +1,8 @@
+# title
+VITE_GLOB_APP_TITLE=lowflow-design
+
+# 本地运行端口号
+VITE_PORT=8848
+
+# 启动时自动打开浏览器
+VITE_OPEN=true

.env.development

@@ -0,0 +1,8 @@
+# 本地环境
+VITE_USER_NODE_ENV=development
+
+# 公共基础路径
+VITE_PUBLIC_PATH=/
+
+# 开发环境接口地址
+VITE_API_URL=/api

mock/user.ts

@@ -0,0 +1,88 @@
+import {MockMethod} from "vite-plugin-mock";
+import {ResultData, ResultPage} from "../src/api";
+
+const user = [
+    {
+        url: "/api/user/info",
+        method: "get",
+        response: () => {
+            return {
+                code: 200,
+                success: true,
+                message: "操作成功",
+                data: {
+                    id: 1,
+                    name: "张三",
+                    username: "admin",
+                    avatar: "https://avatars.githubusercontent.com/u/44080404?v=4",
+                }
+            } as ResultData
+        }
+    },
+    {
+        url: "/api/user/list",
+        method: "get",
+        response: () => {
+            return {
+                code: 200,
+                success: true,
+                message: "操作成功",
+                data: {
+                    rows: [
+                        {
+                            id: 1,
+                            name: "张三",
+                            username: "admin",
+                            avatar: "https://avatars.githubusercontent.com/u/44080404?v=4",
+                        },
+                        {
+                            id: 2,
+                            name: "李四",
+                            username: "lisi",
+                            avatar: "https://avatars.githubusercontent.com/u/44080404?v=4",
+                        },
+                        {
+                            id: 3,
+                            name: "王五",
+                            username: "wangwu",
+                            avatar: "https://avatars.githubusercontent.com/u/44080404?v=4",
+                        },
+                        {
+                            id: 4,
+                            name: "赵六",
+                            username: "zhaoliu",
+                            avatar: "https://avatars.githubusercontent.com/u/44080404?v=4",
+                        },
+                        {
+                            id: 5,
+                            name: "孙七",
+                            username: "sunqi",
+                            avatar: "https://avatars.githubusercontent.com/u/44080404?v=4",
+                        },
+                        {
+                            id: 6,
+                            name: "周八",
+                            username: "zhouba",
+                            avatar: "https://avatars.githubusercontent.com/u/44080404?v=4",
+                        },
+                        {
+                            id: 7,
+                            name: "吴九",
+                            username: "wujui",
+                            avatar: "https://avatars.githubusercontent.com/u/44080404?v=4",
+                        },
+                        {
+                            id: 8,
+                            name: "郑十",
+                            username: "zhengshi",
+                            avatar: "https://avatars.githubusercontent.com/u/44080404?v=4",
+                        }
+                    ],
+                    total: 8
+                }
+            } as ResultPage
+        }
+    }
+] as MockMethod[]
+
+export default user

package.json

@@ -3,6 +3,7 @@
   "private": true,
   "version": "0.1.0",
   "scripts": {
+    "mock": "vite --mode mock --force",
     "dev": "vite",
     "build": "vite build",
     "generate": "vite-ssg build",
@@ -10,6 +11,7 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "dependencies": {
+    "axios": "^1.5.1",
     "element-plus": "^2.3.12",
     "vue": "^3.3.4"
   },
@@ -17,12 +19,14 @@
     "@iconify-json/ep": "^1.1.12",
     "@types/node": "^20.6.0",
     "@vitejs/plugin-vue": "^4.3.4",
+    "mockjs": "^1.1.0",
     "sass": "^1.66.1",
     "typescript": "^5.2.2",
     "unocss": "^0.55.7",
     "unplugin-vue-components": "^0.25.2",
-    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vite": "^4.4.9",
+    "vite-plugin-mock": "^3.0.0",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vite-ssg": "^0.23.1",
     "vue-tsc": "^1.8.11"
   },

pnpm-lock.yaml

@@ -1,6 +1,9 @@
 lockfileVersion: '6.0'
 
 dependencies:
+  axios:
+    specifier: ^1.5.1
+    version: 1.5.1
   element-plus:
     specifier: ^2.3.12
     version: 2.3.12(vue@3.3.4)
@@ -18,6 +21,9 @@ devDependencies:
   '@vitejs/plugin-vue':
     specifier: ^4.3.4
     version: 4.3.4(vite@4.4.9)(vue@3.3.4)
+  mockjs:
+    specifier: ^1.1.0
+    version: 1.1.0
   sass:
     specifier: ^1.66.1
     version: 1.66.1
@@ -33,6 +39,9 @@ devDependencies:
   vite:
     specifier: ^4.4.9
     version: 4.4.9(@types/node@20.6.0)(sass@1.66.1)
+  vite-plugin-mock:
+    specifier: ^3.0.0
+    version: 3.0.0(esbuild@0.18.20)(mockjs@1.1.0)(vite@4.4.9)
   vite-plugin-vue-setup-extend:
     specifier: ^0.4.0
     version: 0.4.0(vite@4.4.9)
@@ -429,6 +438,10 @@ packages:
     resolution: {integrity: sha512-Vrjz5N5Ia4SEzWWgIVwnHNEnb1UE1XMkvY5DGXrAeOGE9imk0hgTHh5GyDjLDJi9OTCn9oo9dXH1uToK1VRfrg==}
     dev: false
 
+  /@types/mockjs@1.0.8:
+    resolution: {integrity: sha512-20t7Fcx3QPbv4wPGeZ0SFOz1l51W3fO3dtO5Ed8KhkUjJ2VsKLRwhgV12lTvQmHnmkJ99ziH0mDmIOrbe8Gs6A==}
+    dev: true
+
   /@types/node@20.6.0:
     resolution: {integrity: sha512-najjVq5KN2vsH2U/xyh2opaSEz6cZMR2SetLIlxlj08nOcmPOemJmUK2o4kUzfLqfrWE0PIrNeE16XhYDd3nqg==}
     dev: true
@@ -863,7 +876,16 @@ packages:
 
   /asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
-    dev: true
+
+  /axios@1.5.1:
+    resolution: {integrity: sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==}
+    dependencies:
+      follow-redirects: 1.15.3
+      form-data: 4.0.0
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+    dev: false
 
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -887,6 +909,16 @@ packages:
       fill-range: 7.0.1
     dev: true
 
+  /bundle-require@4.0.2(esbuild@0.18.20):
+    resolution: {integrity: sha512-jwzPOChofl67PSTW2SGubV9HBQAhhR2i6nskiOThauo9dzwDUgOWQScFVaJkjEfYX+UXiD+LEx8EblQMc2wIag==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    peerDependencies:
+      esbuild: '>=0.17'
+    dependencies:
+      esbuild: 0.18.20
+      load-tsconfig: 0.2.5
+    dev: true
+
   /cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
@@ -950,12 +982,23 @@ packages:
     engines: {node: '>= 0.8'}
     dependencies:
       delayed-stream: 1.0.0
-    dev: true
 
   /commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
     dev: true
 
+  /connect@3.7.0:
+    resolution: {integrity: sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==}
+    engines: {node: '>= 0.10.0'}
+    dependencies:
+      debug: 2.6.9
+      finalhandler: 1.1.2
+      parseurl: 1.3.3
+      utils-merge: 1.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /consola@3.2.3:
     resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -1005,6 +1048,17 @@ packages:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
     dev: true
 
+  /debug@2.6.9:
+    resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.0.0
+    dev: true
+
   /debug@4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -1028,7 +1082,6 @@ packages:
   /delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
-    dev: true
 
   /destr@2.0.1:
     resolution: {integrity: sha512-M1Ob1zPSIvlARiJUkKqvAZ3VAqQY6Jcuth/pBKQ2b1dX/Qx0OnJ8Vux6J2H5PTMQeRzWrrbTu70VxBfv/OPDJA==}
@@ -1045,6 +1098,10 @@ packages:
     resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
     dev: true
 
+  /ee-first@1.1.1:
+    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
+    dev: true
+
   /element-plus@2.3.12(vue@3.3.4):
     resolution: {integrity: sha512-fAWpbKCyt+l1dsqSNPOs/F/dBN4Wp5CGAyxbiS5zqDwI4q3QPM+LxLU2h3GUHMIBtMGCvmsG98j5HPMkTKkvcA==}
     peerDependencies:
@@ -1074,6 +1131,11 @@ packages:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
     dev: true
 
+  /encodeurl@1.0.2:
+    resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
   /entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -1116,7 +1178,6 @@ packages:
 
   /escape-html@1.0.3:
     resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
-    dev: false
 
   /estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
@@ -1160,6 +1221,21 @@ packages:
       to-regex-range: 5.0.1
     dev: true
 
+  /finalhandler@1.1.2:
+    resolution: {integrity: sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      debug: 2.6.9
+      encodeurl: 1.0.2
+      escape-html: 1.0.3
+      on-finished: 2.3.0
+      parseurl: 1.3.3
+      statuses: 1.5.0
+      unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -1168,6 +1244,16 @@ packages:
       path-exists: 4.0.0
     dev: true
 
+  /follow-redirects@1.15.3:
+    resolution: {integrity: sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dev: false
+
   /form-data@4.0.0:
     resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
     engines: {node: '>= 6'}
@@ -1175,7 +1261,6 @@ packages:
       asynckit: 0.4.0
       combined-stream: 1.0.8
       mime-types: 2.1.35
-    dev: true
 
   /fs-extra@11.1.1:
     resolution: {integrity: sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==}
@@ -1413,6 +1498,11 @@ packages:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
     dev: true
 
+  /load-tsconfig@0.2.5:
+    resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dev: true
+
   /local-pkg@0.4.3:
     resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
     engines: {node: '>=14'}
@@ -1496,14 +1586,12 @@ packages:
   /mime-db@1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
-    dev: true
 
   /mime-types@2.1.35:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
     dependencies:
       mime-db: 1.52.0
-    dev: true
 
   /mimic-fn@2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
@@ -1526,11 +1614,22 @@ packages:
       ufo: 1.3.0
     dev: true
 
+  /mockjs@1.1.0:
+    resolution: {integrity: sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==}
+    hasBin: true
+    dependencies:
+      commander: 2.20.3
+    dev: true
+
   /mrmime@1.0.1:
     resolution: {integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==}
     engines: {node: '>=10'}
     dev: true
 
+  /ms@2.0.0:
+    resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
+    dev: true
+
   /ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
     dev: true
@@ -1582,6 +1681,13 @@ packages:
       ufo: 1.3.0
     dev: true
 
+  /on-finished@2.3.0:
+    resolution: {integrity: sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      ee-first: 1.1.1
+    dev: true
+
   /onetime@5.1.2:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
     engines: {node: '>=6'}
@@ -1615,6 +1721,11 @@ packages:
       entities: 4.5.0
     dev: true
 
+  /parseurl@1.3.3:
+    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
   /path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -1629,6 +1740,10 @@ packages:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
     dev: true
 
+  /path-to-regexp@6.2.1:
+    resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==}
+    dev: true
+
   /pathe@1.1.1:
     resolution: {integrity: sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==}
     dev: true
@@ -1667,6 +1782,10 @@ packages:
     hasBin: true
     dev: true
 
+  /proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+    dev: false
+
   /psl@1.9.0:
     resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
     dev: true
@@ -1805,6 +1924,11 @@ packages:
     deprecated: Please use @jridgewell/sourcemap-codec instead
     dev: true
 
+  /statuses@1.5.0:
+    resolution: {integrity: sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
   /string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
@@ -1955,6 +2079,11 @@ packages:
       - supports-color
     dev: true
 
+  /unpipe@1.0.0:
+    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
   /unplugin-vue-components@0.25.2(vue@3.3.4):
     resolution: {integrity: sha512-OVmLFqILH6w+eM8fyt/d/eoJT9A6WO51NZLf1vC5c1FZ4rmq2bbGxTy8WP2Jm7xwFdukaIdv819+UI7RClPyCA==}
     engines: {node: '>=14'}
@@ -2004,6 +2133,33 @@ packages:
       requires-port: 1.0.0
     dev: true
 
+  /utils-merge@1.0.1:
+    resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
+    engines: {node: '>= 0.4.0'}
+    dev: true
+
+  /vite-plugin-mock@3.0.0(esbuild@0.18.20)(mockjs@1.1.0)(vite@4.4.9):
+    resolution: {integrity: sha512-Ibwlga2CSgkoFHFtPW3T/l0fwsGVz9Ss5i7HauBQDyDFfMKgbQXh9wKDLksLZHyai9rkDanxJtIcxbD0bUHCfw==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      mockjs: '>=1.1.0'
+      vite: '>=4.0.0'
+    dependencies:
+      '@types/mockjs': 1.0.8
+      bundle-require: 4.0.2(esbuild@0.18.20)
+      chokidar: 3.5.3
+      connect: 3.7.0
+      debug: 4.3.4
+      fast-glob: 3.3.1
+      mockjs: 1.1.0
+      path-to-regexp: 6.2.1
+      picocolors: 1.0.0
+      vite: 4.4.9(@types/node@20.6.0)(sass@1.66.1)
+    transitivePeerDependencies:
+      - esbuild
+      - supports-color
+    dev: true
+
   /vite-plugin-vue-setup-extend@0.4.0(vite@4.4.9):
     resolution: {integrity: sha512-WMbjPCui75fboFoUTHhdbXzu4Y/bJMv5N9QT9a7do3wNMNHHqrk+Tn2jrSJU0LS5fGl/EG+FEDBYVUeWIkDqXQ==}
     peerDependencies:

src/api/index.ts

@@ -0,0 +1,157 @@
+import axios, {
+    AxiosInstance,
+    AxiosError,
+    AxiosRequestConfig,
+    InternalAxiosRequestConfig,
+    AxiosResponse
+} from 'axios'
+import {ElNotification} from "element-plus";
+
+export interface Result {
+    code: number;
+    success: boolean;
+    message: string;
+}
+
+export interface ResultData<T = any> extends Result {
+    data: T;
+}
+
+export interface ResultPage<T = any> extends ResultData {
+    data: {
+        rows: T[];
+        total: number;
+    }
+}
+
+
+/**
+ * axios配置
+ */
+const config = {
+    // 请求地址
+    baseURL: import.meta.env.VITE_API_URL as string,
+    // 设置超时时间
+    timeout: 8000,
+}
+
+class RequestHttp {
+    service: AxiosInstance
+
+    /**
+     * 请求构造函数
+     * @param config
+     */
+    public constructor(config: AxiosRequestConfig) {
+        // 创建axios实例
+        this.service = axios.create(config)
+        // 请求拦截
+        this.service.interceptors.request.use(
+            (config: InternalAxiosRequestConfig) => {
+                config.headers['Authorization'] = "Bearer 87779e5a-3342-4df6-865d-d8828800d6fb"
+                return config
+            },
+            (error: AxiosError) => {
+                // 请求错误处理
+                return Promise.reject(error)
+            }
+        )
+        // 响应拦截
+        this.service.interceptors.response.use(
+            (response: AxiosResponse) => {
+                const {data} = response
+                // 响应拦截处理
+                return data
+            },
+            (error: AxiosError) => {
+                const {response, message} = error
+                const data = response?.data as ResultData
+                const errMsg = data ? data.message : message
+                // 响应错误处理
+                ElNotification.error(errMsg || '未知错误')
+                return Promise.reject(response?.data || error)
+            }
+        )
+    }
+
+    /**
+     * get请求
+     * @param url 请求地址
+     * @param params 请求参数
+     */
+    get<T>(url: string, params?: object): Promise<ResultData<T>> {
+        return this.service.get(url, params)
+    }
+
+    /**
+     * post请求
+     * @param url 请求地址
+     * @param data 请求参数
+     */
+    post<T>(url: string, data?: object): Promise<ResultData<T>> {
+        return this.service.post(url, data)
+    }
+
+    /**
+     * put请求
+     * @param url 请求地址
+     * @param data 请求参数
+     */
+    put<T>(url: string, data?: object): Promise<ResultData<T>> {
+        return this.service.put(url, data)
+    }
+
+    /**
+     * delete请求
+     * @param url 请求地址
+     * @param params 请求参数
+     */
+    delete<T>(url: string, params?: any): Promise<ResultData<T>> {
+        return this.service.delete(url, params)
+    }
+
+    /**
+     * patch请求
+     * @param url 请求地址
+     * @param data 请求参数
+     */
+    patch<T>(url: string, data?: object): Promise<ResultData<T>> {
+        return this.service.patch(url, data)
+    }
+
+    /**
+     * head请求
+     * @param url 请求地址
+     */
+    head<T>(url: string): Promise<ResultData<T>> {
+        return this.service.head(url)
+    }
+
+    /**
+     * options请求
+     * @param url 请求地址
+     * @param _object 其他配置
+     */
+    options<T>(url: string): Promise<ResultData<T>> {
+        return this.service.options(url)
+    }
+
+    /**
+     * request请求
+     * @param config 请求配置
+     */
+    request<T>(config: AxiosRequestConfig): Promise<ResultData<T>> {
+        return this.service.request(config)
+    }
+
+    /**
+     * 下载文件
+     * @param url 请求地址
+     * @param params 请求参数
+     */
+    download(url: string, params?: object): Promise<BlobPart> {
+        return this.service.post(url, params, {responseType: 'blob'})
+    }
+}
+
+export default new RequestHttp(config)

src/api/modules/user.ts

@@ -0,0 +1,23 @@
+import http from '~/api/index'
+
+export interface User {
+    id: string,
+    username: string,
+    name: string,
+    avatar: string
+}
+
+/**
+ * 获取用户信息
+ * @param username
+ */
+export const getByUsername = (username: string) => {
+    return http.get<User>(`/user/info/${username}`)
+}
+
+/**
+ * 查询用户列表
+ */
+export const getList = () => {
+    return http.get<User[]>('/user/list')
+}

src/env.d.ts

@@ -5,3 +5,17 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+interface ImportMetaEnv {
+  readonly VITE_OPEN: boolean;
+  readonly VITE_PORT: number;
+  readonly VITE_GLOB_APP_TITLE: string;
+  readonly VITE_API_URL: string;
+  readonly VITE_PUBLIC_PATH: string;
+  readonly VITE_USER_NODE_ENV: string;
+}
+
+// 解决import.meta.env类型提示，参考https://cn.vitejs.dev/guide/env-and-mode.html#env-files
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

src/views/flowDesign/index.vue

@@ -3,8 +3,9 @@ import NodeTree from './nodes/index.vue'
 import NodePenal from './penal/index.vue'
 import {FlowNode} from './nodes/Node/index'
 import useNode from './hooks/useNode'
-import {computed, onUnmounted, provide, reactive, ref} from "vue";
+import {computed, onMounted, onUnmounted, provide, reactive, ref} from "vue";
 import {Plus, Minus} from "@element-plus/icons-vue";
+import {getList} from "~/api/modules/user";
 
 const nodePenalRef = ref<InstanceType<typeof NodePenal>>()
 const nodeTreeObj = reactive<FlowNode>({
@@ -73,7 +74,6 @@ onUnmounted(() => {
     <div class="node-container">
       <NodeTree :node="nodeTreeObj"/>
     </div>
-
     <!--属性面板-->
     <NodePenal ref="nodePenalRef"/>
   </div>

src/views/flowDesign/penal/index.vue

@@ -12,7 +12,13 @@ const nodeProps: Record<string, Component> = {
   cc: CcAttr
 }
 
-let flowNode = ref<FlowNode | undefined>()
+let flowNode = ref<FlowNode>({
+  id: '',
+  pid: '',
+  type: '',
+  name: '',
+  child: null
+})
 const visible = ref(false)
 const showInput = ref(false)
 const onClickOutside = () => {
@@ -30,7 +36,7 @@ defineExpose({
 </script>
 
 <template>
-  <el-drawer v-model="visible" v-if="visible" size="35%">
+  <el-drawer v-model="visible" size="35%">
     <template #header="{ titleId, titleClass }">
       <span :id="titleId" :class="titleClass">
           <el-input v-click-outside="onClickOutside" @blur="onClickOutside" maxlength="30" v-model="flowNode!.name"

vite.config.ts

@@ -5,6 +5,7 @@ import vue from '@vitejs/plugin-vue'
 import Components from 'unplugin-vue-components/vite'
 import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
 import VueSetupExtend from 'vite-plugin-vue-setup-extend'
+import {viteMockServe} from "vite-plugin-mock"
 
 import Unocss from 'unocss/vite'
 import {
@@ -34,6 +35,10 @@ export default defineConfig({
     },
     plugins: [
         vue(),
+        viteMockServe({
+            mockPath: './mock',
+            enable: true
+        }),
         VueSetupExtend(),
         Components({
             // allow auto load markdown components under `./src/components/`