vue3 demo

2026-05-15 04:02:10 +08:00 · 2023-07-15 12:51:58 +08:00
parent 4603deea46
commit 4b7d9d46ad
12 changed files with 132 additions and 100 deletions
--- a/frontend/.editorconfig
+++ b/frontend/.editorconfig
@@ -0,0 +1,14 @@
+# https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false
--- a/frontend/src/api/main.js
+++ b/frontend/src/api/main.js
@@ -1,8 +1,7 @@
-import request from '@/utils/request'
-import storage from 'store2'

 /**
- * 路由定义（主进程与渲染进程通信频道定义）
+ * 主进程与渲染进程通信频道定义
+ * Definition of communication channels between main process and rendering process
 */
 const ipcApiRoute = {
  // framework
@@ -54,34 +53,16 @@ const ipcApiRoute = {
 }

 /**
- * 特殊的路由（频道）定义
+ * 自定义频道
+ * custom chennel
 */
 const specialIpcRoute = {
-  appUpdater: 'app.updater', // 此频道在后端也有相同定义
-  window1ToWindow2: 'window1-to-window2', // 窗口之间通信
-  window2ToWindow1: 'window2-to-window1', // 窗口之间通信
-}
-
-/**
- * 访问内置http服务
- */
-const requestHttp = (uri, parameter) => {
-  // url转换
-  const config = storage.get('httpServiceConfig');
-  const host = config.server || 'http://localhost:7071';
-  let url = uri.split('.').join('/');
-  url = host + '/' + url;
-  console.log('url:', url);
-  return request({
-    url: url,
-    method: 'post', 
-    data: parameter, // body
-    params: {}, // URL 参数
-    timeout: 60000,
-  })
+  appUpdater: 'app.updater', // updater channel
+  window1ToWindow2: 'window1-to-window2', // windows channel
+  window2ToWindow1: 'window2-to-window1', // windows channel
 }

 export {
-  ipcApiRoute, requestHttp, specialIpcRoute
+  ipcApiRoute, specialIpcRoute
 }

--- a/frontend/src/components/global/iconFont.js
+++ b/frontend/src/components/global/iconFont.js
@@ -0,0 +1,18 @@
+import { createFromIconfontCN } from '@ant-design/icons-vue'
+import { h } from 'vue'
+
+const IconFont = createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_2456157_4ovzopz659q.js',
+  extraCommonProps: {
+    type: 'icon-fengche',
+    style: {
+      fontSize: '18px',
+    },
+  },
+})
+
+const DynamicIconFont = props => {
+  return h(IconFont, { type: props.type || 'icon-fengche' })
+}
+
+export default DynamicIconFont
--- a/frontend/src/components/global/index.js
+++ b/frontend/src/components/global/index.js
@@ -0,0 +1,12 @@
+import iconFont from './iconFont'
+const modules = import.meta.globEager('./*.vue')
+const map = {}
+Object.keys(modules).forEach(file => {
+  const modulesName = file.replace('./', '').replace('.vue', '')
+  map[modulesName] = modules[file].default
+})
+const globalComponents = {
+  ...map,
+  iconFont,
+}
+export default globalComponents
--- a/frontend/src/layouts/AppSider.vue
+++ b/frontend/src/layouts/AppSider.vue
@@ -4,7 +4,7 @@
      v-model="collapsed"
      theme="light"
      class="layout-sider"
-      width="80"
+      width="100"
    >
      <div class="logo">
        <img class="pic-logo" src="~@/assets/logo.png">
@@ -17,8 +17,8 @@
        @click="menuHandle"
      >
        <a-menu-item v-for="(menuInfo, index) in menu" :key="index">
-          <!-- <a-icon :type="menuInfo.icon" /> -->
-          {{ menuInfo.title }}
+          <icon-font :type="menuInfo.icon" />
+          {{ menuInfo.title }} 
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
@@ -30,38 +30,16 @@
  </a-layout>
 </template>
 <script>
-// import { reactive } from 'vue';
-// import { useRoute, useRouter } from 'vue-router'
-
-// const Router = useRouter()
-// const Route = useRoute()
-// :default-selected-keys="[current]"

 export default {
  name: 'AppSider',
-  // setup() {
-  //   const state = reactive({
-  //     selectedKeys: ['menu_1'],
-  //   });
-    
-  //   const handleClick = e => {
-  //     state.selectedKeys = [e.key];
-  //     console.log('state.selectedKeys:', state.selectedKeys)
-  //     //menuHandle ()
-  //   };
-
-  //   return {
-  //     state,
-  //     handleClick,
-  //   };
-  // },
  data() {
    return {
      collapsed: true,
      current: 'menu_1',
      menu: {
        'menu_1' : {
-          icon: 'home',
+          icon: 'icon-fengche',
          title: '框架',
          pageName: 'Framework',
          params: {
@@ -69,19 +47,19 @@ export default {
          },
        },
        'menu_2' : {
-          icon: 'desktop',
+          icon: 'icon-niudan',
          title: '系统',
          pageName: 'Os',
          params: {},
        },
        'menu_3' : {
-          icon: 'control',
+          icon: 'icon-xiangji',
          title: '硬件',
          pageName: 'Hardware',
          params: {},
        },
        'menu_4' : {
-          icon: 'bulb',
+          icon: 'icon-liuxing',
          title: '特效',
          pageName: 'Effect',
          params: {},
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,18 +1,21 @@
-// import 'normalize.css'; // 样式重置各浏览器统一
-import { createApp } from 'vue';
-import App from './App.vue';
-import Router from './router/index';
-// import './styles/nprogress.less'
 import * as AntIcon from '@ant-design/icons-vue';
 import Antd from 'ant-design-vue';
+import { createApp } from 'vue';
+import App from './App.vue';
 import './assets/global.less';
 import './assets/theme.less';
-import { ipc } from './utils/ipcRenderer';
+import components from './components/global';
+import Router from './router/index';

 const app = createApp(App)
 app.config.productionTip = false

-// 注册全部图标
+// components
+for (const i in components) {
+  app.component(i, components[i])
+}
+
+// icon
 for (const i in AntIcon) {
  const whiteList = ['createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor', 'default']
  if (!whiteList.includes(i)) {
@@ -20,8 +23,4 @@ for (const i in AntIcon) {
  }
 }

-// 全局注入IPC通信
-// Vue.prototype.$ipc = ipc
-app.config.globalProperties.$ipc = ipc
-
 app.use(Antd).use(Router).mount('#app')
--- a/frontend/src/router/routerMap.js
+++ b/frontend/src/router/routerMap.js
@@ -3,11 +3,6 @@
 * @type { *[] }
 */

-// const RouteView = {
-//   name: 'RouteView',
-//   render: h => h('router-view')
-// }
-
 const constantRouterMap = [
  {
    path: '/',
@@ -154,7 +149,6 @@ const constantRouterMap = [
  },
  {
    path: '/special',
-    //component: RouteView,
    children: [
      {
        path: 'subwindow',
--- a/frontend/src/utils/iconList.js
+++ b/frontend/src/utils/iconList.js
@@ -0,0 +1,27 @@
+export default [
+    { name: '对话框', type: 'icon-duihuakuang' },
+    { name: '闹钟', type: 'icon-naozhong' },
+    { name: '笑脸', type: 'icon-xiaolian' },
+    { name: 'ok', type: 'icon-ok' },
+    { name: '风车', type: 'icon-fengche' },
+    { name: '汗颜', type: 'icon-hanyan' },
+    { name: '相机', type: 'icon-xiangji' },
+    { name: '礼物', type: 'icon-liwu' },
+    { name: '礼花', type: 'icon-lihua' },
+    { name: '扭蛋', type: 'icon-niudan' },
+    { name: '流星', type: 'icon-liuxing' },
+    { name: '风筝', type: 'icon-fengzheng' },
+    { name: '蛋糕', type: 'icon-dangao' },
+    { name: '泡泡', type: 'icon-paopao' },
+    { name: '购物', type: 'icon-gouwu' },
+    { name: '饮料', type: 'icon-yinliao' },
+    { name: '云彩', type: 'icon-yuncai' },
+    { name: '彩铅', type: 'icon-caiqian' },
+    { name: '纸飞机', type: 'icon-zhifeiji' },
+    { name: '点赞', type: 'icon-dianzan' },
+    { name: '煎蛋', type: 'icon-jiandan' },
+    { name: '小熊', type: 'icon-xiaoxiong' },
+    { name: '花', type: 'icon-hua' },
+    { name: '眼睛', type: 'icon-yanjing' },
+  ]
+  
--- a/frontend/src/views/framework/socket/HttpServer.vue
+++ b/frontend/src/views/framework/socket/HttpServer.vue
@@ -2,7 +2,7 @@
  <div id="app-base-httpserver">
    <div class="one-block-1">
      <span>
-        1. 内置http server服务
+        1. 使用http与主进程通信
      </span>
    </div>
    <div class="one-block-2">
@@ -24,8 +24,9 @@
  </div>
 </template>
 <script>
-import { ipcApiRoute, requestHttp } from '@/api/main';
+import { ipcApiRoute } from '@/api/main';
 import { ipc } from '@/utils/ipcRenderer';
+import axios from 'axios';
 import storage from 'store2';

 export default {
@@ -54,13 +55,28 @@ export default {
        return;
      }

-      const params = {
-        id: id
-      }
-      requestHttp(ipcApiRoute.doHttpRequest, params).then(res => {
+      this.requestHttp(ipcApiRoute.doHttpRequest, {id}).then(res => {
        //console.log('res:', res)
-      }) 
-    },  
+      })
+    },
+
+    /**
+     * Accessing built-in HTTP services
+     */
+    requestHttp(uri, parameter) {
+      // URL conversion
+      const config = storage.get('httpServiceConfig');
+      const host = config.server || 'http://localhost:7071';
+      let url = uri.split('.').join('/');
+      url = host + '/' + url;
+      console.log('url:', url);
+      return axios({
+        url: url,
+        method: 'post', 
+        data: parameter,
+        timeout: 60000,
+      })
+    }
  }
 };
 </script>
--- a/frontend/src/views/framework/socket/SocketServer.vue
+++ b/frontend/src/views/framework/socket/SocketServer.vue
@@ -2,7 +2,7 @@
  <div id="app-base-httpserver">
    <div class="one-block-1">
      <span>
-        1. 内置socket-io server服务
+        1. 使用socket与主进程通信
      </span>
    </div>
    <div class="one-block-2">
--- a/frontend/src/views/framework/testapi/Index.vue
+++ b/frontend/src/views/framework/testapi/Index.vue
@@ -10,17 +10,28 @@
        <a-button @click="exec(1)"> 点击 </a-button>
        <a-button @click="exec2(1)"> 点击2 </a-button>
      </a-space>
+      <a-space>
+        <a-list size="small" bordered :data-source="iconData">
+        <template #renderItem="{ item }">
+          <a-list-item>
+            <icon-font :type="item.type" style="font-size: 36px" />
+          </a-list-item>
+        </template>
+      </a-list>
+      </a-space>
    </div>
  </div>
 </template>
 <script>
 import { ipcApiRoute } from '@/api/main';
+import iconList from '@/utils/iconList';
 import { ipc } from '@/utils/ipcRenderer';

 export default {
  data() {
    return {
      type: 1,
+      iconData: iconList
    };
  },
  methods: {
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -31,24 +31,6 @@ export default defineConfig(({ command, mode }) => {
        '@': path.resolve(__dirname, 'src'),
      },
    },
-    // 代理服务配置
-    // server: {
-    //   host: 'https://api.wrdan.com',  
-    //   port: 9527,
-    //   https: false,
-    //   open: true,
-    //   proxy: {
-    //     '/toutiao/index': {
-    //       target: 'http://v.juhe.cn/',
-    //       changeOrigin: true,
-    //       rewrite: path => path.replace(/\/toutiao\/index/, ''),
-    //     },
-    //     '/ip': {
-    //         changeOrigin: true,
-    //         rewrite: path => path.replace(/\/ip/, ''),
-    //       },
-    //   },
-    // },
    css: {
      preprocessorOptions: {
        less: {