From b160f34d70e561ab45124d9d321f1b198359bfd7 Mon Sep 17 00:00:00 2001
From: "YUN-PC5\\user" <bmdzh11713@163.com>
Date: Thu, 28 Sep 2023 14:53:04 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=9A=E7=9F=A5=E5=AF=B9=E6=8E=A5=EF=BC=8C?=
 =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=BC=95=E5=85=A5tailwindcss=E5=90=8E?=
 =?UTF-8?q?=EF=BC=8C=E4=BE=A7=E8=BE=B9=E6=A0=8F=E8=8F=9C=E5=8D=95=E6=8A=98?=
 =?UTF-8?q?=E5=8F=A0=E5=90=8E=E4=B8=8D=E6=98=BE=E7=A4=BAlogo=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=EF=BC=8C=E8=A7=92=E8=89=B2=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E5=88=86=E9=85=8D=E5=A2=9E=E5=8A=A0=E5=8D=A1=E7=89=87=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=EF=BC=8C=E9=A6=96=E9=A1=B5=E5=8E=BB=E9=99=A4=E5=A4=9A?=
 =?UTF-8?q?=E4=BD=99=E5=85=83=E7=B4=A0=EF=BC=8C=E9=A1=B5=E9=9D=A2=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Notice/Index.vue        | 167 +++++++++++++++++++------
 src/layout/components/Sidebar/Logo.vue |   4 +-
 src/layout/index.vue                   |  19 ++-
 src/router/index.js                    |   4 +-
 src/store/modules/socket.js            |  20 ++-
 src/utils/signalR.js                   |  26 +++-
 src/views/index.vue                    | 129 +------------------
 src/views/system/roleusers/index.vue   |   4 +-
 8 files changed, 197 insertions(+), 176 deletions(-)

diff --git a/src/components/Notice/Index.vue b/src/components/Notice/Index.vue
index ad4c3e5..c0e9dc4 100644
--- a/src/components/Notice/Index.vue
+++ b/src/components/Notice/Index.vue
@@ -7,54 +7,145 @@
         </el-badge>
       </template>
       <div class="layout-navbars-breadcrumb-user-news">
-        <div class="head-box">
-          <div class="head-box-title">通知</div>
-          <div class="head-box-btn" v-if="noticeList.length > 0" @click="onAllReadClick">全部已读</div>
-        </div>
-        <div class="content-box">
-          <template v-if="noticeList.length > 0">
-            <div class="content-box-item" v-for="(v, k) in noticeList" :key="k">
-              <div>{{ v.noticeTitle }}</div>
-              <div class="content-box-msg" v-html="v.noticeContent"></div>
-              <div class="content-box-time">{{ v.updateTime }}</div>
+        <el-tabs v-model="activeTab">
+          <el-tab-pane name="notice">
+            <template #label>
+              <el-badge :value="unreadNoticeList.length" style="line-height: 18px" :hidden="unreadNoticeList.length === 0"> 通知公告 </el-badge>
+            </template>
+            <div class="content-box">
+              <template v-if="unreadNoticeList.length > 0">
+                <div class="content-box-item" v-for="(v, k) in unreadNoticeList" :key="k">
+                  <el-link :type="v.isRead ? 'primary' : 'danger'" @click="viewNoticeDetail(v.noticeId, v.isRead, v.noticeContent)">{{
+                    v.noticeTitle
+                  }}</el-link>
+                  <el-divider />
+                  <div class="content-box-time">{{ v.updateTime }}</div>
+                </div>
+              </template>
+              <div class="content-box-empty" v-if="unreadNoticeList.length === 0">
+                <div class="content-box-empty-margin">
+                  <el-icon><Promotion /></el-icon>
+                  <div class="mt15">全部已读</div>
+                </div>
+              </div>
+            </div></el-tab-pane
+          >
+          <el-tab-pane name="aimMsg">
+            <template #label>
+              <el-badge :value="unreadAimList.length" style="line-height: 18px" :hidden="unreadAimList.length === 0"> 业务信息 </el-badge>
+            </template>
+            <div class="content-box">
+              <template v-if="unreadAimList.length > 0">
+                <div class="content-box-item" v-for="(v, k) in unreadAimList" :key="k">
+                  <el-link :type="v.isRead ? 'primary' : 'danger'" @click="viewAimMsgDetail(v.noticeId, v.isRead, v.noticeContent)">{{
+                    v.noticeTitle
+                  }}</el-link>
+                  <el-divider />
+                  <div class="content-box-time">{{ v.updateTime }}</div>
+                </div>
+              </template>
+              <div class="content-box-empty" v-if="unreadAimList.length === 0">
+                <div class="content-box-empty-margin">
+                  <el-icon><Promotion /></el-icon>
+                  <div class="mt15">全部已读</div>
+                </div>
+              </div>
             </div>
-          </template>
-          <div class="content-box-empty" v-else>
-            <div class="content-box-empty-margin">
-              <el-icon><Promotion /></el-icon>
-              <div class="mt15">全部已读</div>
-            </div>
-          </div>
+          </el-tab-pane>
+        </el-tabs>
+        <div class="foot-box">
+          <el-popconfirm title="是否确定把全部内容消息设为已读？" :teleported="false" :width="300" @confirm="onAllReadClick">
+            <template #reference>
+              <el-button type="primary" link>全部标为已读</el-button>
+            </template>
+          </el-popconfirm>
+          <el-link type="primary" @click="viewMoreNotice">
+            查看更多<el-icon class="el-icon--right"><ArrowRight /></el-icon>
+          </el-link>
         </div>
-        <div class="foot-box" @click="onGoToGiteeClick" v-if="noticeList.length > 0">前往通知中心</div>
       </div>
     </el-popover>
+
+    <el-dialog v-model="noticeDialogOpen" title="查看通知详情" draggable :close-on-click-modal="false">
+      <noticeDialog v-model="form.noticeContent" />
+    </el-dialog>
   </div>
 </template>
 
 <script setup name="noticeIndex">
 import useSocketStore from '@/store/modules/socket'
+import signalR from '@/utils/signalR'
+import noticeDialog from './noticeDialog/index.vue'
+import useUserStore from '@/store/modules/user'
 
+const router = useRouter()
 const { proxy } = getCurrentInstance()
-
+const activeTab = ref('notice')
 // 小红点
 const newsDot = ref(false)
 
-const noticeList = computed(() => {
-  return useSocketStore().noticeList
-})
 const noticeDot = computed(() => {
   return useSocketStore().noticeDot
 })
+const readNoticeList = computed(() => {
+  return useSocketStore().readNoticeList
+})
+const unreadNoticeList = computed(() => {
+  return useSocketStore().unreadNoticeList
+})
+const noticeList = computed(() => {
+  return readNoticeList.value
+    .map((item) => ({
+      ...item,
+      isRead: true
+    }))
+    .concat(unreadNoticeList.value.map((item) => ({ ...item, isRead: false })))
+})
+const readAimList = computed(() => {
+  return useSocketStore().readAimList
+})
+const unreadAimList = computed(() => {
+  return useSocketStore().unreadAimList
+})
+const aimList = computed(() => {
+  return readAimList.value
+    .map((item) => ({
+      ...item,
+      isRead: true
+    }))
+    .concat(unreadAimList.value.map((item) => ({ ...item, isRead: false })))
+})
+// console.log(noticeList.value)
 // 全部已读点击
 function onAllReadClick() {
-  newsDot.value = false
-  proxy.$modal.msg('请自行实现！！！')
+  // newsDot.value = false
+  if (activeTab.value === 'notice') {
+    signalR.AllReadNotice()
+  } else {
+    signalR.AllReadAimMsg()
+  }
 }
 // 前往通知中心点击
 function onGoToGiteeClick() {
   window.open('https://gitee.com/izory/ZrAdminNetCore')
 }
+const form = ref({
+  noticeContent: ''
+})
+const noticeDialogOpen = ref(false)
+const viewNoticeDetail = (noticeId, isRead, noticeContent) => {
+  if (!isRead) signalR.ReadNotice(noticeId)
+  noticeDialogOpen.value = true
+  form.value.noticeContent = noticeContent
+}
+const viewAimMsgDetail = (noticeId, isRead, noticeContent) => {
+  if (!isRead) signalR.ReadAimMsg(noticeId)
+  noticeDialogOpen.value = true
+  form.value.noticeContent = noticeContent
+}
+const viewMoreNotice = () => {
+  router.push({ path: '/notice/center' })
+}
 </script>
 
 <style lang="scss">
@@ -79,7 +170,7 @@ function onGoToGiteeClick() {
 .content-box {
   font-size: 13px;
   .content-box-item {
-    padding-top: 12px;
+    //padding-top: 12px;
     &:last-of-type {
       padding-bottom: 12px;
     }
@@ -104,19 +195,23 @@ function onGoToGiteeClick() {
     }
   }
 }
+//.foot-box {
+//  height: 35px;
+//  color: #1890ff;
+//  font-size: 13px;
+//  cursor: pointer;
+//  opacity: 0.8;
+//  display: flex;
+//  align-items: center;
+//  justify-content: center;
+//  border-top: 1px solid #ebeef5;
+//  &:hover {
+//    opacity: 1;
+//  }
+//}
 .foot-box {
-  height: 35px;
-  color: #1890ff;
-  font-size: 13px;
-  cursor: pointer;
-  opacity: 0.8;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  border-top: 1px solid #ebeef5;
-  &:hover {
-    opacity: 1;
-  }
+  justify-content: space-between;
 }
 :deep(.el-empty__description p) {
   font-size: 13px;
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index 3ea82f4..1754f9f 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sidebar-logo-container" :class="{ collapse: collapse }">
+  <div class="sidebar-logo-container" :class="{ 'collapse-logo': collapse }">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
@@ -71,7 +71,7 @@ const sideTheme = computed(() => settingsStore.sideTheme)
     }
   }
 
-  &.collapse {
+  &.collapse-logo {
     .sidebar-logo {
       margin-right: 0px;
     }
diff --git a/src/layout/index.vue b/src/layout/index.vue
index c2fe690..7500dde 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -21,9 +21,11 @@
       <el-main class="app-main">
         <router-view v-slot="{ Component, route }">
           <!-- <transition name="fade-transform" mode="out-in"> -->
-          <keep-alive :include="cachedViews">
-            <component v-if="!route.meta.link" :is="Component" :key="route.path" />
-          </keep-alive>
+          <transition name="scale" mode="out-in">
+            <keep-alive :include="cachedViews">
+              <component v-if="!route.meta.link" :is="Component" :key="route.path" />
+            </keep-alive>
+          </transition>
           <!-- </transition> -->
         </router-view>
         <iframe-toggle />
@@ -174,4 +176,15 @@ function close() {
     --el-header-height: var(--el-header-height) + var(--el-tags-height) !important;
   }
 }
+
+.scale-enter-active,
+.scale-leave-active {
+  transition: all 0.3s ease;
+}
+
+.scale-enter-from,
+.scale-leave-to {
+  opacity: 0;
+  transform: scale(0.9);
+}
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index b199940..f1c5bff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -98,8 +98,8 @@ export const constantRoutes = [
     redirect: 'noredirect',
     children: [
       {
-        path: 'title',
-        name: 'Title',
+        path: 'center',
+        name: 'Center',
         component: () => import('@/views/noticecenter/index'),
         meta: { title: '通知中心', icon: 'Bell' }
       }
diff --git a/src/store/modules/socket.js b/src/store/modules/socket.js
index 998e9d0..61ebae5 100644
--- a/src/store/modules/socket.js
+++ b/src/store/modules/socket.js
@@ -3,7 +3,11 @@ const useSocketStore = defineStore('socket', {
     onlineNum: 0,
     onlineUsers: [],
     noticeList: [],
-    noticeDot: false
+    noticeDot: false,
+    readNoticeList: [],
+    unreadNoticeList: [],
+    readAimList: [],
+    unreadAimList: []
   }),
   actions: {
     //更新在线人数
@@ -15,6 +19,20 @@ const useSocketStore = defineStore('socket', {
       this.noticeList = data
       this.noticeDot = data.length > 0
     },
+    setReadNoticeList(data) {
+      this.readNoticeList = data
+    },
+    setUnreadNoticeList(data) {
+      this.unreadNoticeList = data
+      this.noticeDot = data.length > 0 || this.unreadAimList.length > 0
+    },
+    setReadAimList(data) {
+      this.readAimList = data
+    },
+    setUnreadAimList(data) {
+      this.unreadAimList = data
+      this.noticeDot = data.length > 0 || this.unreadNoticeList.length > 0
+    },
     // setOnlineUsers(data) {
     //   const { onlineNum, users } = data
     //   this.onlineUsers = users
diff --git a/src/utils/signalR.js b/src/utils/signalR.js
index 5c902db..766bffe 100644
--- a/src/utils/signalR.js
+++ b/src/utils/signalR.js
@@ -92,10 +92,12 @@ export default {
       webNotify({ title: title, body: data })
     })
     // 接收系统通知/公告
-    connection.on('moreNotice', (data) => {
-      if (data.code == 200) {
-        useSocketStore().setNoticeList(data.data)
-      }
+    connection.on('moreNotice', (data1, data2) => {
+      // if (data.code == 200) {
+      //   useSocketStore().setNoticeList(data.data)
+      // }
+      useSocketStore().setUnreadNoticeList(data1)
+      useSocketStore().setReadNoticeList(data2)
     })
 
     // 接收在线用户
@@ -115,5 +117,21 @@ export default {
 
       webNotify({ title: title, body: data.message })
     })
+  },
+  AllReadNotice() {
+    const connection = this.SR
+    connection.invoke('AllReadNotice')
+  },
+  ReadNotice(noticeId) {
+    const connection = this.SR
+    connection.invoke('ReadNotice', noticeId)
   }
+  // AllReadAimMsg() {
+  //   const connection = this.SR
+  //   connection.invoke('AllReadAimMsg')
+  // },
+  // ReadAimMsg(msgId) {
+  //   const connection = this.SR
+  //   connection.invoke('ReadAimMsg', msgId)
+  // }
 }
diff --git a/src/views/index.vue b/src/views/index.vue
index d31c740..d63942a 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,46 +1,5 @@
 <template>
   <div class="app-container home">
-    <el-row :gutter="20">
-      <el-col :sm="24" :lg="16">
-        <blockquote class="text-warning" style="font-size: 14px">
-          【阿里云特惠专区】
-          <el-link href="https://www.aliyun.com/minisite/goods?userCode=uotn5vt1&share_source=copy_link" type="primary" target="_black">
-            ☛☛点我进入☚☚
-          </el-link>
-          <br />
-          【领取腾讯云通用云产品新用户专属大礼包2860优惠券，每种代金券限量500张，先到先得。】
-          <el-link href="https://curl.qcloud.com/5J4nag8D" type="primary" target="_blank"> ☛☛点我进入☚☚ </el-link>
-          <br />
-
-          【腾讯云限时秒杀活动】
-          <el-link href="https://curl.qcloud.com/4yEoRquq" type="primary" target="_blank">☛☛点我进入☚☚ </el-link>
-          <br />
-
-          【华为特惠专区，多款产品限时特价】
-          <el-link
-            href="https://activity.huaweicloud.com/discount_area_v5/index.html?fromacct=a53709d1-149d-49f4-9b89-bf62bd96ef65&utm_source=aGlkX3N0dnZkMWNxejBnOTJ5OA===&utm_medium=cps&utm_campaign=201905"
-            type="primary"
-            target="_blank">
-            ☛☛点我进入☚☚
-          </el-link>
-          <br />
-          【领取七牛云通用云产品优惠券】
-          <el-link href="https://s.qiniu.com/FzEfay" type="primary" target="_blank"> ☛☛点我进入☚☚ </el-link>
-          <br />
-          【Gitee 企业版优惠专区】
-          <el-link href="https://gitee.com/enterprises?invite_code=Z2l0ZWUtMTI1NzM1OQ%3D%3D" type="primary" target="_blank"> ☛☛点我进入☚☚ </el-link>
-          <br />
-          <h4 class="text-danger">云产品通用红包，可叠加官网常规优惠使用。(仅限新用户)</h4>
-        </blockquote>
-      </el-col>
-      <el-col :lg="8">
-        <el-carousel :interval="4000" height="220px">
-          <el-carousel-item v-for="item in promoteList" :key="item.id">
-            <img :src="item.imgUrl" :title="item.title" style="cursor: pointer; width: 100%" width="100%" @click="goTarget(item.link)" />
-          </el-carousel-item>
-        </el-carousel>
-      </el-col>
-    </el-row>
     <el-row :gutter="20">
       <el-col :lg="16" :sm="24">
         <h2>ZRAdmin.NET {{ $t('layout.backstageManagement') }}</h2>
@@ -91,7 +50,7 @@
           <h4>{{ $t('layout.frontendTechnology') }}</h4>
           <ul>
             <li>Vue3</li>
-            <li>Vuex</li>
+            <li>Pinia</li>
             <li>Element plus</li>
             <li>Axios</li>
             <li>Sass</li>
@@ -106,30 +65,6 @@
     </el-row>
     <el-divider />
     <el-row :gutter="20" class="mt10">
-      <el-col :sm="24" :lg="8">
-        <el-card>
-          <template #header>
-            <span>{{ $t('layout.donationSupport') }}</span>
-          </template>
-
-          <div class="body">
-            <div style="color: red">{{ $t('layout.rewardUser') }}</div>
-            <img src="@/assets/images/reward.jpg" alt="donate" style="width: 100%" />
-          </div>
-        </el-card>
-      </el-col>
-      <el-col :sm="24" :lg="6">
-        <el-card>
-          <template #header>
-            <span>扫码领红包</span>
-          </template>
-
-          <div class="body">
-            <div style="color: red"></div>
-            <img src="@/assets/images/q123.png" alt="donate" style="width: 100%" />
-          </div>
-        </el-card>
-      </el-col>
       <el-col :sm="24" :lg="8">
         <el-card>
           <template #header>
@@ -164,60 +99,6 @@ const version = defaultSettings.version
 function goTarget(url) {
   window.open(url, '__blank')
 }
-const promoteList2 = ref([
-  {
-    id: 1,
-    content: '<h3>【阿里云特惠专区】</h3>',
-    tip: '2核2G ￥426.00/年起，更多优惠券快来领取',
-    link: 'https://www.aliyun.com/minisite/goods?userCode=uotn5vt1&share_source=copy_link'
-  },
-  {
-    id: 2,
-    content: '领取<h3>【腾讯云通用云产品优惠券】</h3>',
-    tip: '新用户专属大礼包￥2860优惠券',
-    link: 'https://curl.qcloud.com/5J4nag8D'
-  },
-  { id: 3, content: '【<h3>腾讯云</h3>限时秒杀活动】', tip: '2核2G4M 45元/年', link: 'https://curl.qcloud.com/4yEoRquq' },
-  {
-    id: 4,
-    content: '【华为特惠专区，多款产品限时特价】',
-    link: 'https://activity.huaweicloud.com/discount_area_v5/index.html?fromacct=a53709d1-149d-49f4-9b89-bf62bd96ef65&utm_source=aGlkX3N0dnZkMWNxejBnOTJ5OA===&utm_medium=cps&utm_campaign=201905'
-  },
-  { id: 5, content: '【领取七牛云通用云产品优惠券】', link: 'https://s.qiniu.com/FzEfay' },
-  { id: 6, content: '【Gitee 企业版优惠专区】', link: 'https://gitee.com/enterprises?invite_code=Z2l0ZWUtMTI1NzM1OQ%3D%3D' }
-])
-const promoteList = ref([
-  {
-    id: 1,
-    title: '【腾讯云】推广者专属福利，新客户无门槛领取总价值高达2860元代金券，每种代金券限量500张，先到先得。',
-    imgUrl: 'http://www.izhaorui.cn/images/banner/新用户专享470x250.jpg',
-    link: 'https://curl.qcloud.com/5J4nag8D'
-  },
-  {
-    id: 2,
-    title: '',
-    imgUrl: 'http://www.izhaorui.cn/images/banner/banner3.jpg',
-    link: 'https://curl.qcloud.com/4yEoRquq'
-  },
-  {
-    id: 3,
-    title: '【腾讯云】买云服务器，参与礼品兑换、抽奖，最高送价值8000元IPad，还有Bose耳机、千元京东卡等您来！',
-    imgUrl: 'http://www.izhaorui.cn/images/banner/企业盛夏有礼-470x250.jpg',
-    link: 'https://curl.qcloud.com/CAX9v1Vn'
-  },
-  {
-    id: 4,
-    title: '【腾讯云】DNSPod解析套餐全面升配降价，更高的套餐配置规格，更优的价格方案，全面提升可用性及响应率，专业版限时99元/年！',
-    imgUrl: 'http://www.izhaorui.cn/images/banner/DNS470x250.jpg',
-    link: 'https://curl.qcloud.com/tJlixb8E'
-  },
-  {
-    id: 5,
-    title: '【腾讯云】中小企业福利专场，多款刚需产品，满足企业通用场景需求，云服务器2.5折起',
-    imgUrl: 'http://www.izhaorui.cn/images/banner/企业福利470x250.jpg',
-    link: 'https://curl.qcloud.com/TnaLauo5'
-  }
-])
 </script>
 
 <style scoped lang="scss">
@@ -246,7 +127,7 @@ const promoteList = ref([
   }
 
   font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-size: 13px;
+  //font-size: 13px;
   color: #676a6c;
   overflow-x: hidden;
 
@@ -284,10 +165,4 @@ const promoteList = ref([
     }
   }
 }
-.promo {
-  h3 {
-    font-size: 25px;
-    display: inline;
-  }
-}
 </style>
diff --git a/src/views/system/roleusers/index.vue b/src/views/system/roleusers/index.vue
index f927bc0..6f772a9 100644
--- a/src/views/system/roleusers/index.vue
+++ b/src/views/system/roleusers/index.vue
@@ -178,8 +178,9 @@ proxy.getDicts('sys_normal_disable').then((response) => {
 const role_id = route.query.roleId
 roleUserQueryParams.roleId = role_id
 userQueryParams.roleId = role_id
-
+const cardLoading = ref(false)
 function init() {
+  cardLoading.value = true
   searchRoleUser()
 
   getRole(roleUserQueryParams.roleId).then((response) => {
@@ -189,6 +190,7 @@ function init() {
       roleUserQueryParams.roleKey = data.roleKey
     }
   })
+  cardLoading.value = false
 }
 
 function searchRoleUser() {