From 4b7d9d46ad8cef0c3c0561807580e71a5ba4ffce Mon Sep 17 00:00:00 2001
From: gsx <530353222@qq.com>
Date: Sat, 15 Jul 2023 12:51:58 +0800
Subject: [PATCH] vue3 demo

---
 frontend/.editorconfig                        | 14 ++++++++
 frontend/src/api/main.js                      | 35 +++++-------------
 frontend/src/components/global/iconFont.js    | 18 ++++++++++
 frontend/src/components/global/index.js       | 12 +++++++
 frontend/src/layouts/AppSider.vue             | 36 ++++---------------
 frontend/src/main.js                          | 21 ++++++-----
 frontend/src/router/routerMap.js              |  6 ----
 frontend/src/utils/iconList.js                | 27 ++++++++++++++
 .../src/views/framework/socket/HttpServer.vue | 32 ++++++++++++-----
 .../views/framework/socket/SocketServer.vue   |  2 +-
 .../src/views/framework/testapi/Index.vue     | 11 ++++++
 frontend/vite.config.js                       | 18 ----------
 12 files changed, 132 insertions(+), 100 deletions(-)
 create mode 100644 frontend/.editorconfig
 create mode 100644 frontend/src/components/global/iconFont.js
 create mode 100644 frontend/src/components/global/index.js
 create mode 100644 frontend/src/utils/iconList.js

diff --git a/frontend/.editorconfig b/frontend/.editorconfig
new file mode 100644
index 0000000..3454886
--- /dev/null
+++ 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
diff --git a/frontend/src/api/main.js b/frontend/src/api/main.js
index a7838d6..5c2b93f 100644
--- 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
 }
 
diff --git a/frontend/src/components/global/iconFont.js b/frontend/src/components/global/iconFont.js
new file mode 100644
index 0000000..fddd07b
--- /dev/null
+++ 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
diff --git a/frontend/src/components/global/index.js b/frontend/src/components/global/index.js
new file mode 100644
index 0000000..9227d20
--- /dev/null
+++ 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
diff --git a/frontend/src/layouts/AppSider.vue b/frontend/src/layouts/AppSider.vue
index 26e0d2e..aa2a62c 100644
--- 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: {},
diff --git a/frontend/src/main.js b/frontend/src/main.js
index cfc7995..908ad1e 100644
--- 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')
diff --git a/frontend/src/router/routerMap.js b/frontend/src/router/routerMap.js
index 63261dd..d6ef311 100644
--- 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',
diff --git a/frontend/src/utils/iconList.js b/frontend/src/utils/iconList.js
new file mode 100644
index 0000000..9b1335e
--- /dev/null
+++ 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' },
+  ]
+  
\ No newline at end of file
diff --git a/frontend/src/views/framework/socket/HttpServer.vue b/frontend/src/views/framework/socket/HttpServer.vue
index 1de5c68..60d3c09 100644
--- 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>
diff --git a/frontend/src/views/framework/socket/SocketServer.vue b/frontend/src/views/framework/socket/SocketServer.vue
index 6b91c78..ce760e2 100644
--- 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">
diff --git a/frontend/src/views/framework/testapi/Index.vue b/frontend/src/views/framework/testapi/Index.vue
index bb95010..c0467ec 100644
--- 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: {
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 7e430ac..52c7762 100644
--- 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: {