vue-cli

.env.development

@@ -0,0 +1,13 @@
+# 本地环境
+NODE_ENV = development
+
+# 标题
+VITE_APP_NAME = Easydo-Audio
+
+# 代理URL路径
+VITE_BASE_URL = /api
+# boot服务端接口路径
+VITE_BASE_SERVER_URL = http://www.qdeasydo.com
+
+# 本地端口
+VITE_APP_PORT = 2600

.env.production

@@ -0,0 +1,8 @@
+# 生产环境
+NODE_ENV = production
+
+# 标题
+VITE_APP_NAME = Easydo-Audio
+
+# 代理URL路径
+VITE_BASE_URL = http://www.qdeasydo.com/

.eslintrc-auto-import.json

@@ -0,0 +1,79 @@
+{
+  "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "DirectiveBinding": true,
+    "EffectScope": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
+    "InjectionKey": true,
+    "MaybeRef": true,
+    "MaybeRefOrGetter": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "computed": true,
+    "createApp": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "effectScope": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeRouteLeave": true,
+    "onBeforeRouteUpdate": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "onWatcherCleanup": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "toValue": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useId": true,
+    "useLink": true,
+    "useModel": true,
+    "useRoute": true,
+    "useRouter": true,
+    "useSlots": true,
+    "useTemplateRef": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true
+  }
+}

electron.vite.config.mjs

@@ -1,20 +1,64 @@
+import AutoImport from "unplugin-auto-import/vite";
+import Components from "unplugin-vue-components/vite";
+import { ElementPlusResolver, VueUseComponentsResolver, VueUseDirectiveResolver } from "unplugin-vue-components/resolvers";
+
 import { resolve } from "path"
-import { defineConfig, externalizeDepsPlugin } from "electron-vite"
+import { defineConfig, externalizeDepsPlugin, loadEnv } from "electron-vite"
 import vue from "@vitejs/plugin-vue"
 
-export default defineConfig({
-    main: {
-        plugins: [externalizeDepsPlugin()]
-    },
-    preload: {
-        plugins: [externalizeDepsPlugin()]
-    },
-    renderer: {
-        resolve: {
-            alias: {
-                "@renderer": resolve("src/renderer/src")
-            }
+export default defineConfig(({ mode }) => {
+    const viteEnv = loadEnv(mode, "./");
+    return {
+        main: {
+            plugins: [externalizeDepsPlugin()]
+        },
+        preload: {
+            plugins: [externalizeDepsPlugin()]
         },
-        plugins: [vue()]
+        renderer: {
+            server: {
+                allowedHosts: "all",
+                port: viteEnv.VITE_APP_PORT,
+                proxy: {
+                    [viteEnv.VITE_BASE_URL]: {
+                        target: viteEnv.VITE_BASE_SERVER_URL,
+                        changeOrigin: true,
+                        rewrite: path => path.replace(viteEnv.VITE_BASE_URL, "/")
+                    }
+                }
+            },
+            resolve: {
+                alias: {
+                    "@renderer": resolve("src/renderer/src")
+                }
+            },
+            
+            plugins: [
+                vue(),
+                AutoImport({
+                    include: [
+                        /\.vue$/,
+                        /\.vue\?vue/
+                    ],
+                    imports: ["vue", "vue-router"],
+                    eslintrc: {
+                        enabled: true,
+                        filepath: "./.eslintrc-auto-import.json",
+                        globalsPropValue: true
+                    },
+                    resolvers: [
+                        ElementPlusResolver()
+                    ]
+                }),
+
+                Components({
+                    resolvers: [
+                        ElementPlusResolver(),
+                        VueUseComponentsResolver(),
+                        VueUseDirectiveResolver()
+                    ]
+                })
+            ]
+        }
     }
 })

package.json

@@ -1,10 +1,8 @@
 {
     "name": "easydo-electron",
     "version": "1.0.0",
-    "description": "An Electron application with Vue",
     "main": "./out/main/index.js",
     "author": "example.com",
-    "homepage": "https://electron-vite.org",
     "scripts": {
         "format": "prettier --write .",
         "lint": "eslint --cache .",
@@ -26,14 +24,23 @@
         "@electron-toolkit/eslint-config": "^2.0.0",
         "@electron-toolkit/eslint-config-prettier": "^3.0.0",
         "@vitejs/plugin-vue": "^5.2.3",
+        "axios": "^1.9.0",
         "electron": "^35.1.5",
         "electron-builder": "^25.1.8",
         "electron-vite": "^3.1.0",
+        "element-plus": "^2.6.0",
         "eslint": "^9.24.0",
         "eslint-plugin-vue": "^10.0.0",
+        "moment": "^2.29.4",
         "prettier": "^3.5.3",
+        "sass": "1.58.3",
+        "sass-loader": "10.1.1",
+        "unplugin-auto-import": "^0.16.6",
+        "unplugin-vue-components": "^0.25.2",
         "vite": "^6.2.6",
         "vue": "^3.5.13",
-        "vue-eslint-parser": "^10.1.3"
+        "vue-eslint-parser": "^10.1.3",
+        "vue-router": "4.1.6",
+        "xe-utils": "^3.7.0"
     }
-}
+}

src/main/index.js

@@ -14,6 +14,7 @@ function createWindow() {
         autoHideMenuBar: true,
         ...(process.platform === "linux" ? { icon } : {}),
         webPreferences: {
+            webSecurity: false,
             preload: join(__dirname, "../preload/index.js"),
             sandbox: false
         }
@@ -27,6 +28,9 @@ function createWindow() {
         shell.openExternal(details.url)
         return { action: "deny" }
     })
+    mainWindow.webContents.on('did-finish-load', () => {
+        mainWindow.webContents.openDevTools();
+    });
 
     // HMR for renderer base on electron-vite cli.
     // Load the remote URL for development or the local html file for production.
@@ -65,7 +69,7 @@ if (!gotTheLock) {
         })
     
         // IPC test
-        ipcMain.on("ping", () => console.log("pong"))
+        ipcMain.on("console", (_, value) => console.log(value))
     
         createWindow()
     

src/renderer/auto-imports.d.ts

@@ -0,0 +1,75 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useId: typeof import('vue')['useId']
+  const useLink: typeof import('vue-router')['useLink']
+  const useModel: typeof import('vue')['useModel']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}

src/renderer/components.d.ts

@@ -0,0 +1,19 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

src/renderer/index.html

@@ -3,10 +3,7 @@
 
 <head>
     <meta charset="UTF-8" />
-    <title>Easydo-Electron</title>
-    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
-    <meta http-equiv="Content-Security-Policy"
-        content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:" />
+    <title>Easydo音柱喊话</title>
 </head>
 
 <body>

src/renderer/src/App.vue

@@ -1,26 +1,19 @@
 <template>
-    <div style="display: flex">
-        <img alt="logo" class="logo" src="./assets/electron.png" />
-    </div>
-    <div class="creator">Powered by electron-vite</div>
-    <div class="text">
-        Build an Electron app with
-        <span class="vue">Vue</span>
-    </div>
-    <p class="tip">Please try pressing <code>F12</code> to open the devTool</p>
-    <div class="actions">
-        <div class="action">
-            <a href="https://electron-vite.org/" target="_blank" rel="noreferrer">Documentation</a>
-        </div>
-        <div class="action">
-            <a target="_blank" rel="noreferrer" @click="ipcHandle">Send IPC</a>
-        </div>
-    </div>
-    <Versions />
+    <el-config-provider :size="config.size" :zIndex="config.zIndex" :button="config.button">
+		<router-view></router-view>
+	</el-config-provider>
 </template>
 
 <script setup>
-import Versions from "./components/Versions.vue"
+const config = ref({
+    size: "default",
+    zIndex: 2000,
+    button: {
+        autoInsertSpace: false
+    }
+});
+</script>
 
-const ipcHandle = () => window.electron.ipcRenderer.send("ping")
-</script>
+<style lang="scss">
+	@use "@renderer/style/style.scss";
+</style>

src/renderer/src/api/audio.js

@@ -0,0 +1,21 @@
+import config from "@renderer/config";
+import tool from "@renderer/utils/tool";
+import http from "@renderer/utils/request";
+
+export default {
+	testRequest: {
+		url: `${config.BASE_URL}/zeroapi/v1/ossminiv2/destory/state`,
+		name: "testRequest",
+		post: async function (data = {}) {
+			return await http.post(this.url, data);
+		}
+	},
+
+    testRequest2: {
+		url: `${config.BASE_URL}/api/safeProgram/getPageList`,
+		name: "testRequest",
+		post: async function (data = { current: 1, projectId: 75, size: 10 }) {
+			return await http.post(this.url, data);
+		}
+	}
+}

src/renderer/src/assets/base.css

@@ -1,67 +0,0 @@
-:root {
-  --ev-c-white: #ffffff;
-  --ev-c-white-soft: #f8f8f8;
-  --ev-c-white-mute: #f2f2f2;
-
-  --ev-c-black: #1b1b1f;
-  --ev-c-black-soft: #222222;
-  --ev-c-black-mute: #282828;
-
-  --ev-c-gray-1: #515c67;
-  --ev-c-gray-2: #414853;
-  --ev-c-gray-3: #32363f;
-
-  --ev-c-text-1: rgba(255, 255, 245, 0.86);
-  --ev-c-text-2: rgba(235, 235, 245, 0.6);
-  --ev-c-text-3: rgba(235, 235, 245, 0.38);
-
-  --ev-button-alt-border: transparent;
-  --ev-button-alt-text: var(--ev-c-text-1);
-  --ev-button-alt-bg: var(--ev-c-gray-3);
-  --ev-button-alt-hover-border: transparent;
-  --ev-button-alt-hover-text: var(--ev-c-text-1);
-  --ev-button-alt-hover-bg: var(--ev-c-gray-2);
-}
-
-:root {
-  --color-background: var(--ev-c-black);
-  --color-background-soft: var(--ev-c-black-soft);
-  --color-background-mute: var(--ev-c-black-mute);
-
-  --color-text: var(--ev-c-text-1);
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  font-weight: normal;
-}
-
-ul {
-  list-style: none;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  line-height: 1.6;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}

src/renderer/src/assets/main.css

@@ -1,163 +0,0 @@
-@import './base.css';
-
-body {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  background-image: url('./wavy-lines.svg');
-  background-size: cover;
-  user-select: none;
-}
-
-code {
-  font-weight: 600;
-  padding: 3px 5px;
-  border-radius: 2px;
-  background-color: var(--color-background-mute);
-  font-family:
-    ui-monospace,
-    SFMono-Regular,
-    SF Mono,
-    Menlo,
-    Consolas,
-    Liberation Mono,
-    monospace;
-  font-size: 85%;
-}
-
-#app {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  margin-bottom: 80px;
-}
-
-.logo {
-  margin-bottom: 20px;
-  -webkit-user-drag: none;
-  height: 128px;
-  width: 128px;
-  will-change: filter;
-  transition: filter 300ms;
-}
-
-.logo:hover {
-  filter: drop-shadow(0 0 1.2em #6988e6aa);
-}
-
-.creator {
-  font-size: 14px;
-  line-height: 16px;
-  color: var(--ev-c-text-2);
-  font-weight: 600;
-  margin-bottom: 10px;
-}
-
-.text {
-  font-size: 28px;
-  color: var(--ev-c-text-1);
-  font-weight: 700;
-  line-height: 32px;
-  text-align: center;
-  margin: 0 10px;
-  padding: 16px 0;
-}
-
-.tip {
-  font-size: 16px;
-  line-height: 24px;
-  color: var(--ev-c-text-2);
-  font-weight: 600;
-}
-
-.vue {
-  background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  font-weight: 700;
-}
-
-.actions {
-  display: flex;
-  padding-top: 32px;
-  margin: -6px;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-}
-
-.action {
-  flex-shrink: 0;
-  padding: 6px;
-}
-
-.action a {
-  cursor: pointer;
-  text-decoration: none;
-  display: inline-block;
-  border: 1px solid transparent;
-  text-align: center;
-  font-weight: 600;
-  white-space: nowrap;
-  border-radius: 20px;
-  padding: 0 20px;
-  line-height: 38px;
-  font-size: 14px;
-  border-color: var(--ev-button-alt-border);
-  color: var(--ev-button-alt-text);
-  background-color: var(--ev-button-alt-bg);
-}
-
-.action a:hover {
-  border-color: var(--ev-button-alt-hover-border);
-  color: var(--ev-button-alt-hover-text);
-  background-color: var(--ev-button-alt-hover-bg);
-}
-
-.versions {
-  position: absolute;
-  bottom: 30px;
-  margin: 0 auto;
-  padding: 15px 0;
-  font-family: 'Menlo', 'Lucida Console', monospace;
-  display: inline-flex;
-  overflow: hidden;
-  align-items: center;
-  border-radius: 22px;
-  background-color: #202127;
-  backdrop-filter: blur(24px);
-}
-
-.versions li {
-  display: block;
-  float: left;
-  border-right: 1px solid var(--ev-c-gray-1);
-  padding: 0 20px;
-  font-size: 14px;
-  line-height: 14px;
-  opacity: 0.8;
-  &:last-child {
-    border: none;
-  }
-}
-
-@media (max-width: 720px) {
-  .text {
-    font-size: 20px;
-  }
-}
-
-@media (max-width: 620px) {
-  .versions {
-    display: none;
-  }
-}
-
-@media (max-width: 350px) {
-  .tip,
-  .actions {
-    display: none;
-  }
-}

src/renderer/src/assets/wavy-lines.svg

@@ -1,25 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1422 800" opacity="0.3">
-  <defs>
-    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="oooscillate-grad">
-      <stop stop-color="hsl(206, 75%, 49%)" stop-opacity="1" offset="0%"></stop>
-      <stop stop-color="hsl(331, 90%, 56%)" stop-opacity="1" offset="100%"></stop>
-    </linearGradient>
-  </defs>
-  <g stroke-width="1" stroke="url(#oooscillate-grad)" fill="none" stroke-linecap="round">
-    <path d="M 0 448 Q 355.5 -100 711 400 Q 1066.5 900 1422 448" opacity="0.05"></path>
-    <path d="M 0 420 Q 355.5 -100 711 400 Q 1066.5 900 1422 420" opacity="0.11"></path>
-    <path d="M 0 392 Q 355.5 -100 711 400 Q 1066.5 900 1422 392" opacity="0.18"></path>
-    <path d="M 0 364 Q 355.5 -100 711 400 Q 1066.5 900 1422 364" opacity="0.24"></path>
-    <path d="M 0 336 Q 355.5 -100 711 400 Q 1066.5 900 1422 336" opacity="0.30"></path>
-    <path d="M 0 308 Q 355.5 -100 711 400 Q 1066.5 900 1422 308" opacity="0.37"></path>
-    <path d="M 0 280 Q 355.5 -100 711 400 Q 1066.5 900 1422 280" opacity="0.43"></path>
-    <path d="M 0 252 Q 355.5 -100 711 400 Q 1066.5 900 1422 252" opacity="0.49"></path>
-    <path d="M 0 224 Q 355.5 -100 711 400 Q 1066.5 900 1422 224" opacity="0.56"></path>
-    <path d="M 0 196 Q 355.5 -100 711 400 Q 1066.5 900 1422 196" opacity="0.62"></path>
-    <path d="M 0 168 Q 355.5 -100 711 400 Q 1066.5 900 1422 168" opacity="0.68"></path>
-    <path d="M 0 140 Q 355.5 -100 711 400 Q 1066.5 900 1422 140" opacity="0.75"></path>
-    <path d="M 0 112 Q 355.5 -100 711 400 Q 1066.5 900 1422 112" opacity="0.81"></path>
-    <path d="M 0 84 Q 355.5 -100 711 400 Q 1066.5 900 1422 84" opacity="0.87"></path>
-    <path d="M 0 56 Q 355.5 -100 711 400 Q 1066.5 900 1422 56" opacity="0.94"></path>
-  </g>
-</svg>

src/renderer/src/components/Versions.vue

@@ -1,13 +0,0 @@
-<template>
-    <ul class="versions">
-        <li class="electron-version">Electron v{{ versions.electron }}</li>
-        <li class="chrome-version">Chromium v{{ versions.chrome }}</li>
-        <li class="node-version">Node v{{ versions.node }}</li>
-    </ul>
-</template>
-
-<script setup>
-import { reactive } from "vue"
-
-const versions = reactive({ ...window.electron.process.versions })
-</script>

src/renderer/src/config/index.js

@@ -0,0 +1,14 @@
+// 获取环境变量
+const ENV = import.meta.env
+
+// 默认配置文件
+const config = {
+    // 项目名
+    PROJECT_NAME: ENV.VITE_APP_NAME,
+    // 接口代理URL路径
+    BASE_URL: ENV.VITE_BASE_URL,
+    //请求超时
+	TIMEOUT: 30000
+}
+
+export default config

src/renderer/src/main.js

@@ -1,6 +1,6 @@
-import "./assets/main.css"
-
 import { createApp } from "vue"
+import router from "./router"
 import App from "./App.vue"
+const app = createApp(App)
 
-createApp(App).mount("#app")
+createApp(App).use(router).mount("#app")

src/renderer/src/pages/index.vue

@@ -0,0 +1,50 @@
+<template>
+    <el-divider content-position="left">分割线分割线分割线分割线分割线</el-divider>
+    <div>{{resData}}</div>
+    <el-divider content-position="left">分割线分割线分割线分割线分割线</el-divider>
+    <div>{{ resData2 }}</div>
+    <el-form ref="dialogForm" :model="form" label-width="120px">
+        <el-form-item label="当前密码：" prop="userPassword">
+            <el-input v-model="form.userPassword" show-password placeholder="请输入当前密码"></el-input>
+        </el-form-item>
+        <el-form-item label="当前密码：" prop="userPassword">
+            <el-button type="primary" @click="save">确 定</el-button>
+        </el-form-item>
+    </el-form>
+</template>
+
+<script setup>
+import API from "@renderer/api/audio"
+
+const form = ref({
+    userPassword: "",
+});
+
+const resData = ref({})
+const resData2 = ref({})
+
+const getData = async () => {
+    try {
+        const res = await API.testRequest.post();
+        resData.value = res.expands
+    } catch (error) {
+        resData.value = error
+    }
+}
+const getData2 = async () => {
+    try {
+        const res2 = await API.testRequest2.post();
+        resData2.value = res2.records[1]
+    } catch (error) {
+        resData2.value = error
+    }
+}
+getData()
+getData2()
+
+
+const save = () => {
+    getData()
+    getData2()
+}
+</script>

src/renderer/src/router/index.js

@@ -0,0 +1,11 @@
+import { createRouter, createWebHashHistory } from "vue-router";
+
+const router = createRouter({
+	history: createWebHashHistory(),
+	routes: [{
+		path: "/",
+		component: () => import("../pages/index.vue")
+	}]
+})
+
+export default router

src/renderer/src/style/app.scss

@@ -0,0 +1,16 @@
+/* 全局 */
+#app, body, html {width: 100%;height: 100%;background-color: #f6f8f9;font-size: 12px;}
+a {color: #333;text-decoration: none;}
+a:hover, a:focus {color: #000;text-decoration: none;}
+a:link {text-decoration: none;}
+a:-webkit-any-link {text-decoration: none;}
+a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: border-box;outline:none !important; -webkit-appearance: none;}
+* {margin: 0;padding: 0;box-sizing: border-box;outline: none;}
+
+/* 全局滚动条样式 */
+.scrollable {-webkit-overflow-scrolling: touch;}
+::-webkit-scrollbar:hover {width: 5px;height: 5px;}
+::-webkit-scrollbar-thumb {background-color: rgba(50, 50, 50, 0.3);}
+::-webkit-scrollbar-thumb:hover {background-color: rgba(50, 50, 50, 0.6);}//滑块
+::-webkit-scrollbar-track {background-color: rgba(50, 50, 50, 0.1);}//轨道
+::-webkit-scrollbar-track:hover {background-color: rgba(50, 50, 50, 0.2);}

src/renderer/src/style/fix.scss

@@ -0,0 +1,65 @@
+/* 覆盖element-plus样式 */
+
+:root {
+	--el-color-primary: #409EFF;
+	--el-color-primary-light-1: #53a7ff;
+	--el-color-primary-light-2: #66b1ff;
+	--el-color-primary-light-3: #79bbff;
+	--el-color-primary-light-4: #8cc4ff;
+	--el-color-primary-light-5: #9fceff;
+	--el-color-primary-light-6: #b2d8ff;
+	--el-color-primary-light-7: #c5e1ff;
+	--el-color-primary-light-8: #d8ebff;
+	--el-color-primary-light-9: #ebf5ff;
+	--el-color-primary-dark-1: #398ee5;
+	--el-color-primary-dark-2: #337ecc;
+	--el-color-primary-dark-3: #2c6eb2;
+	--el-color-primary-dark-4: #265e99;
+	--el-color-primary-dark-5: #204f7f;
+	--el-color-primary-dark-6: #193f66;
+	--el-color-primary-dark-7: #132f4c;
+	--el-color-primary-dark-8: #0c1f32;
+	--el-color-primary-dark-9: #060f19;
+}
+
+.el-menu {border: none!important;}
+.el-menu .el-menu-item a {color: inherit;text-decoration: none;display: block;width:100%;height:100%;position: absolute;top:0px;left:0px;}
+.el-form-item-msg {font-size: 12px;color: #999;clear: both;width: 100%;}
+.el-container {height: 100%;}
+.el-aside {border-right: 1px solid var(--el-border-color-light);}
+.el-container + .el-aside {border-right: 0;border-left: 1px solid var(--el-border-color-light);}
+.el-header {background: #fff;border-bottom: 1px solid var(--el-border-color-light);padding:13px 15px;display: flex;justify-content: space-between;align-items: center;}
+.el-header .left-panel {display: flex;align-items: center;}
+.el-header .right-panel {display: flex;align-items: center;}
+.el-header .right-panel > * + * {margin-left:10px;}
+.el-footer {background: #fff;border-top: 1px solid var(--el-border-color-light);padding:13px 15px;}
+.el-main {padding:15px;}
+.el-main.nopadding {padding:0;background: #fff;}
+.el-drawer .el-drawer__body {overflow: auto;padding:0;}
+.el-popconfirm__main {margin: 14px 0;}
+.el-card .el-card__header {font-size: 16px;font-weight: bold;padding: 0 24px;line-height: 55px;border-color: var(--el-border-color-lighter);}
+.el-dialog .el-dialog__title {font-size: 16px;font-weight: bold;}
+.el-drawer__header>:first-child {font-size: 16px;font-weight: bold;}
+.el-tree.menu .el-tree-node__content {height:36px;}
+.el-tree.menu .el-tree-node__content .el-tree-node__label .icon {margin-right: 5px;}
+.el-progress__text {font-size: 12px!important;}
+.el-progress__text i {font-size: 14.4px!important;}
+.el-step.is-horizontal .el-step__line {height:1px;}
+.el-step__title {font-size: 14px;}
+.drawerBG {background: #f6f8f9;}
+.el-button+.el-dropdown {margin-left: 10px;}
+.el-button-group+.el-dropdown {margin-left: 10px;}
+.el-button-group+.el-button-group {margin-left: 10px;}
+.el-tabs__nav-wrap::after {height: 1px;}
+.el-table th.is-sortable {transition: .1s;}
+.el-table th.is-sortable:hover {background: #eee;}
+.el-table .el-table__body-wrapper {background: #f6f8f9;}
+.el-col .el-card {margin-bottom: 15px;}
+.el-main {flex-basis: 100%;}
+.el-table.el-table--large {font-size: 14px;}
+.el-table.el-table--small {font-size: 12px;}
+.el-table {font-size: 12px;}
+.el-radio-button__inner {font-size: 12px;}
+.el-checkbox-button__inner {font-size: 12px;}
+.el-sub-menu .el-icon {font-size: 17px;}
+.el-sub-menu .el-sub-menu__icon-arrow {font-size: 12px;}

src/renderer/src/style/style.scss

@@ -0,0 +1,2 @@
+@use "app.scss";
+@use "fix.scss";

src/renderer/src/utils/request.js

@@ -0,0 +1,154 @@
+import axios from "axios";
+import { ElNotification, ElMessageBox } from "element-plus";
+import sysConfig from "@renderer/config";
+import tool from "@renderer/utils/tool";
+
+axios.defaults.baseURL = ""
+
+axios.defaults.timeout = sysConfig.TIMEOUT
+
+// HTTP request 拦截器
+axios.interceptors.request.use(
+	config => config,
+	error => Promise.reject(error)
+);
+
+//FIX 多个API同时401时疯狂弹窗BUG
+let MessageBox_401_show = false
+
+// HTTP response 拦截器
+axios.interceptors.response.use(
+	response => response,
+	error => Promise.reject(error)
+);
+
+var http = {
+
+	/** get 请求
+	 * @param  {string} url 接口地址
+	 * @param  {object} params 请求参数
+	 * @param  {object} config 参数
+	 */
+	get: function (url, params = {}, config = {}) {
+		return new Promise((resolve, reject) => {
+			axios({
+				method: "get",
+				url: url,
+				params: params,
+				...config
+			}).then((response) => {
+				resolve(response.data);
+			}).catch((error) => {
+				reject(error);
+			})
+		})
+	},
+
+	/** post 请求
+	 * @param  {string} url 接口地址
+	 * @param  {object} data 请求参数
+	 * @param  {object} config 参数
+	 * @param  {object} params 路径请求参数
+	 */
+	post: function (url, data = {}, config = {}, params = {}) {
+		return new Promise((resolve, reject) => {
+			axios({
+				method: "post",
+				url: url,
+				data: data,
+				...config,
+				params: params
+			}).then(response => {
+				resolve(response.data)
+			}).catch(error => {
+				reject(error);
+			})
+		})
+	},
+
+	/** put 请求
+	 * @param  {string} url 接口地址
+	 * @param  {object} data 请求参数
+	 * @param  {object} config 参数
+	 */
+	put: function (url, data = {}, config = {}) {
+		return new Promise((resolve, reject) => {
+			axios({
+				method: "put",
+				url: url,
+				data: data,
+				...config
+			}).then((response) => {
+				resolve(response.data);
+			}).catch((error) => {
+				reject(error);
+			})
+		})
+	},
+
+	/** patch 请求
+	 * @param  {string} url 接口地址
+	 * @param  {object} data 请求参数
+	 * @param  {object} config 参数
+	 */
+	patch: function (url, data = {}, config = {}) {
+		return new Promise((resolve, reject) => {
+			axios({
+				method: "patch",
+				url: url,
+				data: data,
+				...config
+			}).then((response) => {
+				resolve(response.data);
+			}).catch((error) => {
+				reject(error);
+			})
+		})
+	},
+
+	/** delete 请求
+	 * @param  {string} url 接口地址
+	 * @param  {object} data 请求参数
+	 * @param  {object} config 参数
+	 */
+	delete: function (url, data = {}, config = {}) {
+		return new Promise((resolve, reject) => {
+			axios({
+				method: "delete",
+				url: url,
+				data: data,
+				...config
+			}).then((response) => {
+				resolve(response.data);
+			}).catch((error) => {
+				reject(error);
+			})
+		})
+	},
+
+	/** jsonp 请求
+	 * @param  {string} url 接口地址
+	 * @param  {string} name JSONP回调函数名称
+	 */
+	jsonp: function (url, name = "jsonp") {
+		return new Promise((resolve) => {
+			var script = document.createElement("script")
+			var _id = `jsonp${Math.ceil(Math.random() * 1000000)}`
+			script.id = _id
+			script.type = "text/javascript"
+			script.src = url
+			window[name] = (response) => {
+				resolve(response)
+				document.getElementsByTagName("head")[0].removeChild(script)
+				try {
+					delete window[name];
+				} catch (e) {
+					window[name] = undefined;
+				}
+			}
+			document.getElementsByTagName("head")[0].appendChild(script)
+		})
+	}
+}
+
+export default http;

src/renderer/src/utils/tool.js

@@ -0,0 +1,153 @@
+/*
+ * @Descripttion: 工具集
+ * @version: 1.2
+ * @LastEditors: sakuya
+ * @LastEditTime: 2022年5月24日00:28:56
+ */
+
+import moment from "moment";
+import XEUtils from "xe-utils";
+import sysConfig from "@renderer/config";
+
+const tool = {}
+
+/* localStorage */
+tool.data = {
+	set(key, data, datetime = 0) {
+		//加密
+		if (sysConfig.LS_ENCRYPTION == "AES") {
+			data = tool.crypto.AES.encrypt(JSON.stringify(data), sysConfig.LS_ENCRYPTION_key)
+		}
+		let cacheValue = {
+			content: data,
+			datetime: parseInt(datetime) === 0 ? 0 : new Date().getTime() + parseInt(datetime) * 1000
+		}
+		return localStorage.setItem(key, JSON.stringify(cacheValue))
+	},
+	get(key) {
+		try {
+			const value = JSON.parse(localStorage.getItem(key))
+			if (value) {
+				let nowTime = new Date().getTime()
+				if (nowTime > value.datetime && value.datetime != 0) {
+					localStorage.removeItem(key)
+					return null;
+				}
+				//解密
+				if (sysConfig.LS_ENCRYPTION == "AES") {
+					value.content = JSON.parse(tool.crypto.AES.decrypt(value.content, sysConfig.LS_ENCRYPTION_key))
+				}
+				return value.content
+			}
+			return null
+		} catch (err) {
+			return null
+		}
+	},
+	remove(key) {
+		return localStorage.removeItem(key)
+	},
+	clear() {
+		return localStorage.clear()
+	}
+}
+
+/*sessionStorage*/
+tool.session = {
+	set(table, settings) {
+		var _set = JSON.stringify(settings)
+		return sessionStorage.setItem(table, _set);
+	},
+	get(table) {
+		var data = sessionStorage.getItem(table);
+		try {
+			data = JSON.parse(data)
+		} catch (err) {
+			return null
+		}
+		return data;
+	},
+	remove(table) {
+		return sessionStorage.removeItem(table);
+	},
+	clear() {
+		return sessionStorage.clear();
+	}
+}
+
+/*cookie*/
+tool.cookie = {
+	set(name, value, config = {}) {
+		var cfg = {
+			expires: null,
+			path: null,
+			domain: null,
+			secure: false,
+			httpOnly: false,
+			...config
+		}
+		var cookieStr = `${name}=${encodeURI(value)}`
+		if (cfg.expires) {
+			var exp = new Date()
+			exp.setTime(exp.getTime() + parseInt(cfg.expires) * 1000)
+			cookieStr += `;expires=${exp.toGMTString()}`
+		}
+		if (cfg.path) {
+			cookieStr += `;path=${cfg.path}`
+		}
+		if (cfg.domain) {
+			cookieStr += `;domain=${cfg.domain}`
+		}
+		document.cookie = cookieStr
+	},
+	get(name) {
+		var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"))
+		if (arr != null) {
+			return decodeURI(arr[2])
+		} else {
+			return null
+		}
+	},
+	remove(name) {
+		var exp = new Date()
+		exp.setTime(exp.getTime() - 1)
+		document.cookie = `${name}=;expires=${exp.toGMTString()}`
+	}
+}
+
+/* Fullscreen */
+tool.screen = function (element) {
+	var isFull = !!(document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement);
+	if (isFull) {
+		if (document.exitFullscreen) {
+			document.exitFullscreen();
+		} else if (document.msExitFullscreen) {
+			document.msExitFullscreen();
+		} else if (document.mozCancelFullScreen) {
+			document.mozCancelFullScreen();
+		} else if (document.webkitExitFullscreen) {
+			document.webkitExitFullscreen();
+		}
+	} else {
+		if (element.requestFullscreen) {
+			element.requestFullscreen();
+		} else if (element.msRequestFullscreen) {
+			element.msRequestFullscreen();
+		} else if (element.mozRequestFullScreen) {
+			element.mozRequestFullScreen();
+		} else if (element.webkitRequestFullscreen) {
+			element.webkitRequestFullscreen();
+		}
+	}
+}
+
+/* 日期格式化 */
+tool.dateFormat = function (date, fmt = "YYYY-MM-DD HH:mm:ss") {
+    moment.locale("zh-cn");
+
+    if (XEUtils.isUndefined(date) || !moment(date + "").isValid()) return "";
+    if ((date + "").includes("T") && (date + "").includes("Z")) return moment(date, "YYYY-MM-DDTHH:mm:ss[Z]").format(fmt);
+	return moment(date).format(fmt);
+}
+
+export default tool