Update README.md

CODE_OF_CONDUCT.md

@@ -0,0 +1,43 @@
+# 开发要求
+
+## 我们的目标
+
+为了高效、高质量的完成项目交付目标。
+
+## 我们的标准
+有助于提高编码效率和质量的行为包括:
+
+- 1、遵守开发规范。
+- 2、使用eslint+Prettier自动修复代码
+- 3、代码行文尽量整洁规整。业务逻辑简洁、清晰。
+- 4、核心业务上必须要有注释，头部需要有注释便与溯源。
+- 5、公共组件开发需要记录文档且注释丰富。
+- 6、问题及细节需要有共享文档进行团队同步。
+- 7、阶段性的代码评审，整体回顾。
+- 8、提测前需要自测和交叉测试。
+
+不可以接受的行为包括:
+
+- 1、独狼行为，忽视团队的开发规范和开发要求。
+- 2、不自测的代码进行提测。
+- 3、无用的代码不删除，代码行文和逻辑冗余邋遢。
+- 4、对于细节及漏洞不用心对待，存在侥幸心理。
+- 5、恶意违反公司及团队规则。
+
+一个人的力量始终是有限的，只有在团队中才能更好的发光发热，才完成更大的目标。
+保持对前端的热爱和新技术的追求。
+始终有对自己有要求，写的代码如诗歌一般优美。
+
+
+## 代码评审准则
+
+- 1、是否遵守开发规范和开发要求。
+- 2、核心功能是否有缺陷。
+- 3、页面是否有缺陷。
+- 4、细节是否完善、整体代码行文。
+- 5、业务逻辑和代码细节是否合理。
+
+## 相关文档
+
+- 前端通用开发规范 [http://172.18.7.186:8181/read/team/prefix_59454ed663cdb4bb8d542c1967a62056.md]
+

README.md

@@ -1,13 +1,32 @@
-# vue3-element-admin
+## 简介
 
-这个模板使用了最新的 vue3 和 element-plus UI 框架，vite 构建工具、pinia 状态管理、vue-router 路由管理、mockjs 数据模拟。功能从 Vue Element Admin 移植而来，详细使用可以参考[该文档](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/router-and-nav.html)。
+这个模板使用了最新的 vue3 和 element-plus UI 框架，vite 构建工具、pinia 状态管理、vue-router 路由管理、mockjs 数据模拟，并集成了 typescript。功能从 Vue Element Admin 移植而来，详细使用可以参考[该文档](https://vue3-element-admin-site.midfar.com/zh/guide/essentials/router-and-nav.html)。
 
-# 在线示例
+## 特性
+
+- **最新技术栈**：使用 Vue3/vite3 等前端前沿技术开发
+- **TypeScript**: 应用程序级 JavaScript 的语言
+- **Mock 数据** 内置 Mock 数据方案
+- **权限** 内置完善的动态路由权限生成方案
+- **组件** 二次封装了多个常用的组件
+
+## 在线示例
 
 [vue3 element admin](https://vue3-element-admin.midfar.com/)
 
 [element plus](https://element-plus.midfar.com/)
 
+## 准备
+开发前请确保熟悉并掌握以下技术栈：
+
+- vue: https://cn.vuejs.org/
+- TypeScript：https://www.tslang.cn/index.html
+- element-plus：https://element-plus.midfar.com/
+- pinia: https://pinia.vuejs.org/zh/
+- vue-router: https://router.vuejs.org/zh/
+
+注：开发前请务必阅读上述所有文档。应用至实际项目开发请修改 readme 内容。
+
 ## 推荐的 IDE 工具和插件
 
 [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (禁用 Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
@@ -16,7 +35,29 @@
 
 参考 [Vite 配置](https://vitejs.dev/config/).
 
-## 安装依赖
+## 主要结构
+
+```
+- mock // 模拟数据
+- public
+- src
+  - components // 组件
+  - views // 页面
+    - tableTemplates // 示例模块
+	  - index.ts
+   - login // 登录模块
+	  - index.vue
+ - settings.ts // 全局配置
+ - main.ts // 入口文件
+-  types // TypeScript类型
+- package.json
+- CODE_OF_CONDUCT.md // 框架开发要求
+- README.md //框架使用手册
+```
+
+## 使用
+
+### 安装依赖
 
 ```sh
 npm install
@@ -40,14 +81,25 @@ npm run build:test
 npm run lint
 ```
 
-### 捐赠
+## 支持环境
 
-如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励 :tropical_drink:
+现代浏览器。
 
-wechat: midfar-sun
+| IE/Edge          | Firefox         | Chrome          | Safari          | 
+| ---------------- | --------------- | --------------- | --------------- | 
+| IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | 
 
-## License
+## TODO
 
-[MIT](https://opensource.org/licenses/MIT)
+当前问题
 
-Copyright (c) 2022-present, Midfar Sun
+- 暂未配置git提交规范。
+
+## 参与贡献
+
+我们非常欢迎你的贡献，你可以通过以下方式和我们一起共建基线框架：
+
+- 联系维护人员 midfar@qq.com
+- 提交 pr
+- 修复 bug
+- 分享实践案例

auto-imports.d.ts

@@ -3,4 +3,5 @@ export {}
 declare global {
   const ElMessage: typeof import('element-plus/es')['ElMessage']
   const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
+  const ElNotification: typeof import('element-plus/es')['ElNotification']
 }

components.d.ts

@@ -9,23 +9,24 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     BackToTop: typeof import('./src/components/BackToTop/index.vue')['default']
     Breadcrumb: typeof import('./src/components/Breadcrumb/index.vue')['default']
-    DndList: typeof import('./src/components/DndList/index.vue')['default']
     DragSelect: typeof import('./src/components/DragSelect/index.vue')['default']
     DropdownMenu: typeof import('./src/components/Share/DropdownMenu.vue')['default']
     Dropzone: typeof import('./src/components/Dropzone/index.vue')['default']
     EditorImage: typeof import('./src/components/Tinymce/components/EditorImage.vue')['default']
+    ElAlert: typeof import('element-plus/es')['ElAlert']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
+    ElCarousel: typeof import('element-plus/es')['ElCarousel']
+    ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
-    ElDragSelect: typeof import('element-plus/es')['ElDragSelect']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
@@ -38,10 +39,14 @@ declare module '@vue/runtime-core' {
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElProgress: typeof import('element-plus/es')['ElProgress']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRate: typeof import('element-plus/es')['ElRate']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
@@ -49,7 +54,10 @@ declare module '@vue/runtime-core' {
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTree: typeof import('element-plus/es')['ElTree']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     ErrorLog: typeof import('./src/components/ErrorLog/index.vue')['default']
     GithubCorner: typeof import('./src/components/GithubCorner/index.vue')['default']

mock/demo/_routes.js

@@ -525,7 +525,7 @@ export const asyncRoutes = [
     component: 'layout/Layout',
     children: [
       {
-        path: 'https://github.com/PanJiaChen/vue-element-admin',
+        path: 'https://github.com/midfar/vue3-element-admin',
         meta: { title: 'External Link', icon: 'link' }
       }
     ]

src/components/DragSelect/index.vue

@@ -52,16 +52,13 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .drag-select {
-  ::v-deep {
+  :deep(.sortable-ghost) {
-    .sortable-ghost {
     opacity: .8;
     color: #fff !important;
     background: #42b983 !important;
   }
-
+  :deep(.el-tag) {
-    .el-tag {
     cursor: pointer;
   }
 }
-}
 </style>

src/components/GithubCorner/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
+  <a href="https://github.com/midfar/vue3-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
     <svg
       width="80"
       height="80"

src/components/SvgIcon/index.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
+// doc: https://vue3-element-admin-site.midfar.com/feature/component/svg-icon.html#usage
 import { isExternal } from '@/utils/validate';
 import { defineComponent } from 'vue';
 

src/components/Tinymce/index.vue

@@ -11,7 +11,7 @@
 import { defineComponent } from 'vue';
 /**
  * docs:
- * https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html#tinymce
+ * https://vue3-element-admin-site.midfar.com/feature/component/rich-editor.html#tinymce
  */
 import editorImage from './components/EditorImage';
 import plugins from './plugins';

src/layout/components/Navbar.vue

@@ -34,10 +34,10 @@
             <router-link to="/">
               <el-dropdown-item>Dashboard</el-dropdown-item>
             </router-link>
-            <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
+            <a target="_blank" href="https://github.com/midfar/vue3-element-admin">
               <el-dropdown-item>Github</el-dropdown-item>
             </a>
-            <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
+            <a target="_blank" href="https://vue3-element-admin-site.midfar.com/">
               <el-dropdown-item>Docs</el-dropdown-item>
             </a>
             <el-dropdown-item divided @click="logout">

src/router/index.ts

@@ -385,6 +385,12 @@ export const asyncRoutes:RouteRecordRaw[] = [
         component: () => import('@/views/mydemo/StoreDemo.vue'),
         name: 'StoreDemo',
         meta: { title: 'StoreDemo', icon: 'lock' }
+      },
+      {
+        path: 'webSocket-demo',
+        component: () => import('@/views/mydemo/WebSocketDemo.vue'),
+        name: 'WebSocketDemo',
+        meta: { title: 'WebSocketDemo', icon: 'lock' }
       }
     ]
   },

src/store/modules/user.ts

@@ -7,6 +7,7 @@ import permissionStore from './permission';
 
 export interface IUserState {
   token: string;
+  userId: string,
   name: string;
   avatar: string;
   introduction: string;
@@ -17,6 +18,7 @@ export default defineStore({
   id: 'user',
   state: ():IUserState => ({
     token: getToken(),
+    userId: '',
     name: '',
     avatar: '',
     introduction: '',

src/store/modules/webSocket.ts

@@ -0,0 +1,19 @@
+import { defineStore } from 'pinia';
+
+interface socketState {
+  socketId: string;
+}
+
+export default defineStore('useWebSocket', {
+  state: (): socketState => ({
+    socketId: '' // 会话id
+  }),
+  actions: {
+    setSocketID(id: string) {
+      this.socketId = id;
+    },
+    getSocketID() {
+      return this.socketId;
+    }
+  }
+});

src/utils/webSocket.js

@@ -0,0 +1,241 @@
+/*
+ * @Description: Socket构造函数
+ * @Author: Cherry
+ * @Date: 2022-07-21 10:29:53
+ * @LastEditors: Cherry 2858937488@qq.com
+ */
+
+class Socket {
+  constructor(options) {
+    // 连接地址
+    this.url = options.url || '';
+    // 连接对象
+    this.socket = null;
+    // 是否允许重新连接
+    this.lockReconnect = false;
+    // 心跳间隔
+    this.timeout = options.timeout || 1000 * 20;
+    // 服务器响应间隔
+    this.serverTimeout = options.serverTimeout || 2000;
+    // 重连间隔
+    this.reTimeout = options.reTimeout || 1000 * 10;
+    // 心跳定时器
+    this.timeoutTimer = null;
+    // 服务器响应定时器
+    this.serverTimeoutTimer = null;
+    // 重连定时器
+    this.reTimeoutTimer = null;
+    // 重连计数，3次重连机制
+    this.reCount = 0;
+    // 制空打印方法
+    const initConsole = {
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      log: () => {},
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      error: () => {},
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      warn: () => {}
+    };
+    // 开启控制台打印
+    this.logs = options.openConsole ? console : initConsole;
+    // 消息传递
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    this.onMsgEventCb = options.onMsgEventCb || (() => {});
+    // 异常断开连接回调
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    this.onDisconnectCb = options.onDisconnectCb || (() => {});
+  }
+
+  // 建立连接
+  create() {
+    if (!this.url) {
+      this.logs.error('请输入长连接地址');
+      return;
+    }
+    // 创建WebSocket对象
+    this.socket = new WebSocket(this.url);
+    // 创建socket对象的事件监听
+    this.initEvent();
+  }
+
+  // 建立事件监听
+  initEvent() {
+    if (!this.socket) {
+      this.logs.error('长连接对象不存在，请先调用create方法创建长连接对象');
+      return;
+    }
+    // 监听连接事件
+    this.socket.addEventListener('open', this.onOpenEvent.bind(this));
+    // 监听错误事件
+    this.socket.addEventListener('error', this.onErrorEvent.bind(this));
+    // 监听服务端发送消息事件
+    this.socket.addEventListener('message', this.onMessageEvent.bind(this));
+    // 监听关闭连接事件
+    this.socket.addEventListener('close', this.onCloseEvent.bind(this));
+  }
+
+  // 移除事件监听
+  removeEvent() {
+    if (!this.socket) {
+      this.logs.error('长连接对象不存在');
+      return;
+    }
+    // 移除监听连接事件
+    this.socket.removeEventListener('open', this.onOpenEvent.bind(this));
+    // 移除监听错误事件
+    this.socket.removeEventListener('error', this.onErrorEvent.bind(this));
+    // 移除监听服务端发送消息事件
+    this.socket.removeEventListener('message', this.onMessageEvent.bind(this));
+    // 移除监听关闭连接事件
+    this.socket.removeEventListener('close', this.onCloseEvent.bind(this));
+  }
+
+  // 连接成功回调
+  onOpenEvent(e) {
+    this.logs.log('onOpenEvent e:', e);
+    const t = e.currentTarget || {};
+    if (t.readyState === 1) {
+      this.closeReConnect();
+      this.heartCheckStart();
+    }
+  }
+
+  // 连接失败回调
+  onErrorEvent(err) {
+    this.logs.error('onErrorEvent err:', err);
+    this.reConnect();
+  }
+
+  // 接受服务端消息回调
+  onMessageEvent(e) {
+    this.logs.log('onMessageEvent e:', e);
+    this.heartCheckReset();
+    const { data } = e;
+    try {
+      const dataObj = data ? JSON.parse(data) : {};
+      if (dataObj.msgType === 2 || dataObj.msgType === 3) {
+        this.onMsgEventCb(dataObj);
+      }
+    } catch (err) {
+      this.logs.log('data解析失败 err:', err);
+    }
+  }
+
+  // 关闭连接回调
+  onCloseEvent(e) {
+    this.logs.log('onCloseEvent e:', e);
+    this.logs.log(`websocket 断开: ${e.code} ${e.reason} ${e.wasClean}`);
+    this.reConnect();
+  }
+
+  // 建立连接心跳
+  heartCheckStart() {
+    this.timeoutTimer = setTimeout(() => {
+      this.send(
+        JSON.stringify({
+          msgType: 1,
+          heart: true
+        })
+      );
+      this.logs.log('send heart');
+
+      // 3、发送数据 2s后没有接收到返回的数据进行关闭websocket重连
+      this.serverTimeoutTimer = setTimeout(() => {
+        this.logs.log('后台挂掉，没有心跳了....');
+        clearTimeout(this.timeoutTimer);
+        clearTimeout(this.serverTimeoutTimer);
+        this.reConnect();
+      }, this.serverTimeout);
+    }, this.timeout);
+  }
+
+  // 重置连接心跳
+  heartCheckReset() {
+    clearTimeout(this.timeoutTimer);
+    clearTimeout(this.serverTimeoutTimer);
+    this.heartCheckStart();
+  }
+
+  // 重连
+  reConnect() {
+    this.timeoutTimer && clearTimeout(this.timeoutTimer);
+    this.serverTimeoutTimer && clearTimeout(this.serverTimeoutTimer);
+    if (!this.socket) {
+      this.logs.log('无长连接对象');
+      return;
+    }
+    this.logs.log('reConnect reCount:', this.reCount, ' lockReconnect:', this.lockReconnect);
+    if (this.lockReconnect) return;
+    if (this.reCount > 2) {
+      this.closeReConnect();
+      this.close();
+      this.removeEvent();
+      this.socket = null;
+      this.onDisconnectCb();
+      return;
+    }
+
+    this.lockReconnect = true;
+    // 没连接上会一直重连，设置延迟避免请求过多
+    this.reTimeoutTimer && clearTimeout(this.reTimeoutTimer);
+    this.reTimeoutTimer = setTimeout(() => {
+      this.close();
+      this.removeEvent();
+      this.socket = null;
+      this.create();
+      this.reCount += 1;
+      this.lockReconnect = false;
+    }, this.reTimeout);
+  }
+
+  // 取消重连
+  closeReConnect() {
+    this.reTimeoutTimer && clearTimeout(this.reTimeoutTimer);
+    this.reCount = 0;
+    this.lockReconnect = false;
+  }
+
+  // 发送消息方法
+  send(data) {
+    if (!this.socket) {
+      this.logs.error('长连接对象不存在，请先调用create方法创建长连接对象');
+      return;
+    }
+    this.socket.send(data);
+  }
+
+  // 发送消息内容
+  sendMsgCustom(msg) {
+    this.send(JSON.stringify({
+      msgType: 2,
+      id: `${new Date().getTime()}`, // demo简单定义，id规则建议用uuid
+      content: msg,
+      self: true
+    }));
+  }
+
+  // 关闭连接方法
+  close() {
+    if (!this.socket) {
+      this.logs.error('长连接对象不存在');
+      return;
+    }
+    this.socket.close();
+  }
+
+  // 注销方法
+  destroy() {
+    if (!this.socket) {
+      this.logs.log('无长连接对象');
+      return;
+    }
+    this.timeoutTimer && clearTimeout(this.timeoutTimer);
+    this.serverTimeoutTimer && clearTimeout(this.serverTimeoutTimer);
+    this.closeReConnect();
+    this.close();
+    this.removeEvent();
+    this.socket = null;
+  }
+}
+
+export default Socket;

src/views/components-demo/tinymce.vue

@@ -2,7 +2,7 @@
   <div class="components-container">
     <aside>
       Rich text is a core feature of the management backend, but at the same time it is a place with lots of pits. In the process of selecting rich texts, I also took a lot of detours. The common rich texts on the market have been basically used, and I finally chose Tinymce. See the more detailed rich text comparison and introduction.
-      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html">Documentation</a>
+      <a target="_blank" class="link-type" href="https://vue3-element-admin-site.midfar.com/feature/component/rich-editor.html">Documentation</a>
     </aside>
     <div>
       <tinymce v-model="content" :height="300" />

src/views/documentation/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="app-container documentation-container">
     <a class="document-btn" target="_blank"
-      href="https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/router-and-nav.html">国内文档</a>
+      href="https://vue3-element-admin-site.midfar.com/zh/guide/essentials/router-and-nav.html">国内文档</a>
     <a class="document-btn" target="_blank"
       href="https://github.com/midfar/vue3-element-admin">Github 仓库</a>
     <dropdown-menu class="document-btn" :items="articleList" title="系列文章" />
-    <!-- <a class="document-btn" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/zh/job/">内推招聘</a> -->
+    <!-- <a class="document-btn" target="_blank" href="https://vue3-element-admin-site.midfar.com/zh/job/">内推招聘</a> -->
   </div>
 </template>
 

src/views/error-log/index.vue

@@ -5,7 +5,7 @@
     <h3>Please click the bug icon in the upper right corner</h3>
     <aside>
       Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.
-      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/error.html">
+      <a target="_blank" class="link-type" href="https://vue3-element-admin-site.midfar.com/guide/advanced/error.html">
         Document introduction
       </a>
     </aside>

src/views/example/components/Warning.vue

@@ -5,7 +5,7 @@
     effect, you can use a browser caching scheme such as localStorage. Or do not use keep-alive include to cache all
     pages directly. See details
     <a
-      href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
+      href="https://vue3-element-admin-site.midfar.com/guide/essentials/tags-view.html"
       target="_blank"
     >Document</a>
   </aside>

src/views/excel/export-excel.vue

@@ -8,7 +8,7 @@
       <el-button :loading="downloadLoading" style="margin:0 0 0 20px;" type="primary" :icon="IconDocument" @click="handleDownload">
         Export Excel
       </el-button>
-      <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
+      <a href="https://vue3-element-admin-site.midfar.com/feature/component/excel.html" target="_blank" style="margin-left:15px;">
         <el-tag type="info" size="large">Documentation</el-tag>
       </a>
     </div>

src/views/icons/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="icons-container">
     <aside>
-      <a href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html" target="_blank">Add and use
+      <a href="https://vue3-element-admin-site.midfar.com/guide/advanced/icon.html" target="_blank">Add and use
       </a>
     </aside>
     <el-tabs type="border-card">

src/views/mydemo/WebSocketDemo.vue

@@ -0,0 +1,220 @@
+<!--
+ * @Author: Cherry 2858937488@qq.com
+ * @Date: 2023-03-14 10:40:55
+ * @LastEditors: Cherry 2858937488@qq.com
+ * @LastEditTime: 2023-03-16 20:57:15
+ * @FilePath: \vue3-admin\vue3-element-admin\src\views\mydemo\WebSocketDemo.vue
+ * @Description: websocket
+-->
+<template>
+  <div class="web-socket-demo">
+    <h3>node搭建WebSocket服务器</h3>
+    <p>一、新建文件夹demo,然后用npm init命令新建一个项目ws-demo</p>
+    <p>mkdir demo</p>
+    <p>cd demo</p>
+    <p>npm init</p>
+
+    <h3>二、安装依赖ws</h3>
+    <p>npm install ws</p>
+
+    <h3>三、修改入口文件index.js</h3>
+    <p>const WebSocket = require('ws') </p>
+    <p>const ws = new WebSocket.Server({ port: 5001 })</p>
+    <p>ws.on('connection', ws => {</p>
+    <p>console.log('server connection')</p>
+
+    <p>ws.on('message', msg => {</p>
+
+    <p>console.log('服务端接收的消息：', msg)</p>
+
+    <p>const data = JSON.parse(msg)</p>
+    <p>console.log('服务端接收的消息解析：', data)</p>
+
+    <p>if(data.msgType === 1){</p>
+    <p>ws.send(JSON.stringify({</p>
+    <p> msgType: 1,</p>
+    <p> heart: true</p>
+    <p>}))</p>
+    <p>}else{</p>
+    <p>ws.send(JSON.stringify({</p>
+    <p> msgType: 3,</p>
+    <p> content: '接收成功',</p>
+    <p> data})</p>
+    <p>)</p>
+    <p>ws.send(JSON.stringify({</p>
+    <p> msgType: 2,</p>
+    <p> id: `${new Date().getTime()}`,//demo简单定义，id规则建议用uuid</p>
+    <p> content: '模拟回复',</p>
+    <p> self: false</p>
+    <p>}))</p>
+    <p>}</p>
+    <p>})</p>
+
+    <p>ws.send(JSON.stringify({</p>
+    <p> msgType: 0,</p>
+    <p> content: '连接已建立'</p>
+    <p>}))</p>
+
+    <p>})</p>
+
+    <h3>四、运行index.js</h3>
+    <p>node index.js</p>
+
+    <h3>五、本地交互</h3>
+    <div class="item">请输入运行地址进行连接：</div>
+    <div class="flex">
+      <el-input v-model="linkUrl" placeholder="连接地址" />
+      <el-button type="primary" @click="startConnection" v-if="!isConnected">连接</el-button>
+      <el-button type="primary" v-else @click="disconnected">断开连接</el-button>
+    </div>
+    <div class="item">信息交互：</div>
+    <div class="flex">
+      <el-input v-model="msg" placeholder="交互信息" placeholder-class="input-placeholder" />
+      <el-button type="primary" @click="sendMsg" :disabled="disabled">发送</el-button>
+    </div>
+    <div class="item">信息列表：</div>
+    <div class="list">
+      <div v-for="item in msgList" :key="item.id" :class="item.self ? 'self' : 'other'">{{ item.content }}</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import Socket from '@/utils/websocket.js';
+import webSocketStore from '@/store/modules/webSocket';
+import userStore from '@/store/modules/user';
+import { ElMessage } from 'element-plus';
+
+interface MsgObj {
+  id: string | number,
+  content: string,
+  self: boolean
+}
+
+const linkUrl = ref<string>('ws://127.0.0.1:5001');// 连接地址
+const socket = ref<any>(null); // 长连接对象
+const isConnected = ref<boolean>(false);// 是否连接
+const msg = ref<string>('');
+const disabled = ref<boolean>(false);// 是否禁止发送消息
+const msgList = ref<MsgObj[]>([]);
+
+const startConnection = () => {
+  if (!linkUrl.value) {
+    ElMessage({
+      message: '连接地址不能为空！',
+      type: 'error'
+    });
+    return;
+  }
+  isConnected.value = true;
+  createSocket();
+};
+
+const disconnected = () => {
+  disabled.value = false;
+  isConnected.value = false;
+  destroySocket();
+};
+
+const sendMsg = () => {
+  if (!socket.value) {
+    ElMessage({
+      message: '请先建立连接！',
+      type: 'error'
+    });
+    return;
+  }
+  if (!msg.value) {
+    ElMessage({
+      message: '发送的消息内容不能为空！',
+      type: 'error'
+    });
+    return;
+  }
+  disabled.value = true;
+  socket.value.sendMsgCustom(msg.value);
+};
+
+const createSocket = () => {
+  console.log('创建长连接', !socket.value);
+  const useWebSocketStore = webSocketStore();
+  const useUserStore = userStore();
+  const id = useWebSocketStore.getSocketID() || `${useUserStore.userId}-${new Date().getTime() / 1000}`;
+  if (!useWebSocketStore.getSocketID()) {
+    useWebSocketStore.setSocketID(id);
+  }
+  socket.value = new Socket({
+    url: linkUrl.value + '/' + id,
+    openConsole: process.env.NODE_ENV !== 'production',
+    onMsgEventCb: getMsg,
+    onDisconnectCb: disconnectCallback
+  });
+  socket.value.create();
+};
+
+// 接受消息
+const getMsg = (dataObj) => {
+  console.log('getMsg:', dataObj);
+  if (dataObj.msgType === 3) {
+    ElMessage({
+      message: '发送成功！',
+      type: 'success'
+    });
+    msgList.value.push(dataObj.data);
+    msg.value = '';
+    disabled.value = false;
+    return;
+  }
+  msgList.value.push(dataObj);
+};
+
+// 断开连接提示
+const disconnectCallback = () => {
+  socket.value = null;
+  ElMessage({
+    message: '连接已断开...',
+    type: 'warning'
+  });
+  disconnected();
+};
+
+// 销毁长连接
+const destroySocket = () => {
+  console.log('销毁长连接', !!socket.value);
+  if (!socket.value) return;
+  socket.value.destroy();
+  socket.value = null;
+};
+</script>
+
+<style lang="scss" scoped>
+.web-socket-demo {
+  padding: 20px;
+}
+
+.flex {
+  width: 500px;
+  display: flex;
+}
+
+.item {
+  margin: 10px 0;
+}
+
+.list {
+  width: 500px;
+  margin: 10px 0;
+  padding: 20px;
+  border: 1px solid #efe;
+}
+
+.self {
+  margin: 10px 0;
+}
+
+.other {
+  margin: 10px 0;
+  text-align: right;
+}
+</style>

src/views/theme/index.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
     <el-card class="box-card">
       <template #header>
-        <a class="link-type link-title" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/theme.html">
+        <a class="link-type link-title" target="_blank" href="https://vue3-element-admin-site.midfar.com/guide/advanced/theme.html">
           Theme documentation
         </a>
       </template>