From ea18a476e198b34946ae4b93f491393a2f330203 Mon Sep 17 00:00:00 2001
From: zouzhibing <esoul@654321>
Date: Tue, 15 Nov 2022 23:15:55 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E2=9A=A1=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1=E6=9D=83=E9=99=90=E9=97=AE=E9=A2=98=EF=BC=8C?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=BE=AE=E4=BF=A1=E4=BA=8C=E7=BB=B4=E7=A0=81?=
 =?UTF-8?q?=E8=BF=9B=E7=BE=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |  4 ++++
 src/router/modules/externalLink.ts            |  6 ++++++
 src/router/modules/system.ts                  |  9 ++++----
 src/views/chat/components/u-chartBox/chat.js  |  6 ++++--
 .../chat/components/u-chartBox/index.vue      | 10 ++++++++-
 src/views/chat/index.vue                      | 21 +++++++++++++------
 src/views/externalLinks/wechat/index.vue      | 13 ++++++++++++
 src/views/home/index.vue                      | 16 +++++++++++++-
 8 files changed, 71 insertions(+), 14 deletions(-)
 create mode 100644 src/views/externalLinks/wechat/index.vue

diff --git a/README.md b/README.md
index bc5129f..38643b9 100644
--- a/README.md
+++ b/README.md
@@ -98,6 +98,10 @@ vue-admin-perfect
 └─ vite.config.ts         # vite 配置
 ```
 
+### 十、微信交流群
+|                                      微信二维码                                      |
+| :----------------------------------------------------------------------------------: |
+| <img src="http://182.61.5.190:8889/we.png" width=170/> |
 
 
 
diff --git a/src/router/modules/externalLink.ts b/src/router/modules/externalLink.ts
index 1984def..e30894c 100644
--- a/src/router/modules/externalLink.ts
+++ b/src/router/modules/externalLink.ts
@@ -12,6 +12,12 @@ const externalLink = [{
         icon: 'link'
     },
     children: [
+        {
+            path: 'wechat',
+            name: 'wechat',
+            component: () => import('@/views/externalLinks/wechat/index.vue'),
+            meta: { title: '加微信群',  icon: 'MenuIcon' }
+        },
         {
             path: 'https://github.com/zouzhibin/vue-admin-perfect',
             name: 'github',
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 9afd472..96b323e 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -9,7 +9,8 @@ const systemRouter = [{
     name: 'system',
     meta: {
         title: '系统管理',
-        icon: 'ElementPlus'
+        icon: 'ElementPlus',
+        roles:['other']
     },
     children: [
         {
@@ -22,19 +23,19 @@ const systemRouter = [{
             path: 'user',
             component: () => import('@/views/system/user/index.vue'),
             name: 'user',
-            meta: { title: '用户管理', roles: ['other'] , icon: 'MenuIcon'}
+            meta: { title: '用户管理' , icon: 'MenuIcon'}
         },
         {
             path: 'role',
             component: () => import('@/views/system/role/index.vue'),
             name: 'role',
-            meta: { title: '角色管理', roles: ['other'], icon: 'MenuIcon' }
+            meta: { title: '角色管理', icon: 'MenuIcon' }
         },
         {
             path: 'menu',
             component: () => import('@/views/system/menu/index.vue'),
             name: 'menu',
-            meta: { title: '菜单管理', roles: ['other'] , icon: 'MenuIcon'}
+            meta: { title: '菜单管理',  icon: 'MenuIcon'}
         },
     ]
 }]
diff --git a/src/views/chat/components/u-chartBox/chat.js b/src/views/chat/components/u-chartBox/chat.js
index a765297..eae616f 100644
--- a/src/views/chat/components/u-chartBox/chat.js
+++ b/src/views/chat/components/u-chartBox/chat.js
@@ -1,9 +1,10 @@
 export const chatData = [
   {
     is_self: 0,
-    created_at: '2022-03-11',
-    content: 'hello 你好呀!',
+    created_at: '2022-11-15',
+    content: 'http://182.61.5.190:8889/we.png',
     id: 1,
+    type: 2, // 文字
   },
   {
     is_self: 1,
@@ -12,4 +13,5 @@ export const chatData = [
     id: 2,
     type: 1, // 文字
   },
+
 ]
diff --git a/src/views/chat/components/u-chartBox/index.vue b/src/views/chat/components/u-chartBox/index.vue
index f668672..c54a5c4 100644
--- a/src/views/chat/components/u-chartBox/index.vue
+++ b/src/views/chat/components/u-chartBox/index.vue
@@ -9,7 +9,15 @@
               <img src="@/assets/image/avatar.png" />
             </div>
             <div style="position: relative; display: flex">
-              <div class="receive-message-info" v-html="item.content"></div>
+              <div class="receive-message-info" v-html="item.content" v-if="item.type===1"></div>
+              <div class="public-show-pic" v-else-if="item.type === 2">
+                <el-image
+                    :src="item.content"
+                    :preview-src-list="[item.content]"
+                    style="max-width: 200px"
+                    :data-resid="Date.now()"
+                />
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index 3538244..6c07c03 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -1,16 +1,25 @@
 <template>
-  <u-container-layout>
-    <div>
-      <div style="margin-bottom: 15px"
+  <div class="app-container">
+    <div class="app-container-inner m-chat">
+      <div style="margin-bottom: 15px;flex-shrink: 0"
         >聊天内容框，功能有发送emoji表情，上传图片，发送图片，内容滚动，发送文字</div
       >
-      <u-chat-box />
+      <u-chat-box class="m-chat-box"/>
     </div>
-  </u-container-layout>
+  </div>
 </template>
 
 <script lang="ts" setup>
   import UChatBox from './components/u-chartBox/index.vue'
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.m-chat{
+  display: flex;
+  flex-direction: column;
+  .m-chat-box{
+    flex: 1;
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/src/views/externalLinks/wechat/index.vue b/src/views/externalLinks/wechat/index.vue
new file mode 100644
index 0000000..1b8876f
--- /dev/null
+++ b/src/views/externalLinks/wechat/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="app-container">
+    <div class="app-container-inner">
+      <div style="margin-bottom: 20px">欢迎大家加微信哈，共同讨论，学习</div>
+      <el-image
+          src="http://182.61.5.190:8889/we.png"
+          :preview-src-list="['http://182.61.5.190:8889/we.png']"
+          style="max-width: 200px"
+          :data-resid="Date.now()"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 86cc0d3..d6a4ddd 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -3,6 +3,13 @@
     <el-row class="row-bg" :gutter="10">
       <el-col :xs="24" :sm="12" :lg="8">
         <el-card class="box-card" style="height: 100%">
+          <el-image
+              class="wechat"
+              src="http://182.61.5.190:8889/we.png"
+              :preview-src-list="['http://182.61.5.190:8889/we.png']"
+              style="max-width: 200px"
+              :data-resid="Date.now()"
+          />
           <div class="personal">
             <div>
               <el-avatar :size="50" :src="AvatarLogo" />
@@ -17,7 +24,7 @@
               <div>性别：男</div>
               <div>现住址：中国-浙江-杭州</div>
               <div>邮箱：1135957121@qq.com</div>
-              <div>微信：19550102670(欢迎加)</div>
+              <div>微信：19550102670(欢迎加微信入群)</div>
               <div>技术栈：JavaScript、HTML、CSS、Vue、Node、React</div>
             </div>
             <el-divider></el-divider>
@@ -222,8 +229,15 @@
 
   .box-card {
     //height: 100%;
+    position: relative;
     margin-bottom: 10px;
     width: 100%;
+    .wechat{
+      position: absolute;
+      width: 150px;
+      right: 0;
+      top: 0;
+    }
   }
   .card-item {
     background: linear-gradient(50deg, #1890ff, #77e19d);