通知对接，解决引入tailwindcss后，侧边栏菜单折叠后不显示logo的问题，角色用户分配增加卡片加载，首页去除多余元素，页面切换动画

src/components/Notice/Index.vue

@@ -7,54 +7,145 @@
         </el-badge>
       </template>
       <div class="layout-navbars-breadcrumb-user-news">
-        <div class="head-box">
+        <el-tabs v-model="activeTab">
-          <div class="head-box-title">通知</div>
+          <el-tab-pane name="notice">
-          <div class="head-box-btn" v-if="noticeList.length > 0" @click="onAllReadClick">全部已读</div>
+            <template #label>
-        </div>
+              <el-badge :value="unreadNoticeList.length" style="line-height: 18px" :hidden="unreadNoticeList.length === 0"> 通知公告 </el-badge>
+            </template>
             <div class="content-box">
-          <template v-if="noticeList.length > 0">
+              <template v-if="unreadNoticeList.length > 0">
-            <div class="content-box-item" v-for="(v, k) in noticeList" :key="k">
+                <div class="content-box-item" v-for="(v, k) in unreadNoticeList" :key="k">
-              <div>{{ v.noticeTitle }}</div>
+                  <el-link :type="v.isRead ? 'primary' : 'danger'" @click="viewNoticeDetail(v.noticeId, v.isRead, v.noticeContent)">{{
-              <div class="content-box-msg" v-html="v.noticeContent"></div>
+                    v.noticeTitle
+                  }}</el-link>
+                  <el-divider />
                   <div class="content-box-time">{{ v.updateTime }}</div>
                 </div>
               </template>
-          <div class="content-box-empty" v-else>
+              <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>
-        <div class="foot-box" @click="onGoToGiteeClick" v-if="noticeList.length > 0">前往通知中心</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>
     </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
+  // newsDot.value = false
-  proxy.$modal.msg('请自行实现！！！')
+  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: space-between;
-  justify-content: center;
-  border-top: 1px solid #ebeef5;
-  &:hover {
-    opacity: 1;
-  }
 }
 :deep(.el-empty__description p) {
   font-size: 13px;

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;
     }

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"> -->
+          <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>

src/router/index.js

@@ -98,8 +98,8 @@ export const constantRoutes = [
     redirect: 'noredirect',
     children: [
       {
-        path: 'title',
+        path: 'center',
-        name: 'Title',
+        name: 'Center',
         component: () => import('@/views/noticecenter/index'),
         meta: { title: '通知中心', icon: 'Bell' }
       }

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

src/utils/signalR.js

@@ -92,10 +92,12 @@ export default {
       webNotify({ title: title, body: data })
     })
     // 接收系统通知/公告
-    connection.on('moreNotice', (data) => {
+    connection.on('moreNotice', (data1, data2) => {
-      if (data.code == 200) {
+      // if (data.code == 200) {
-        useSocketStore().setNoticeList(data.data)
+      //   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)
+  // }
 }

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>

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() {