feat: 将通知卡片改用ElCard展现

src/cpns/ClipCard.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="clip-card" v-show="isShow">
-    <div class="clip-card-header">
-      <slot name="header">
-        <div class="clip-card-header-title">
-          {{ title }}
-        </div>
-        <div class="clip-card-header-operate">
-          <span class="clip-card-header-operate-btn" @click="handleCloseBtnClick">❌</span>
-        </div>
-      </slot>
-    </div>
-    <div class="clip-card-content">
-      <slot>
-        <template v-for="c of content.split('\n')">
-          <div class="clip-card-content-item">
-            {{ c }}
-          </div>
-        </template>
-      </slot>
-    </div>
-    <div class="clip-card-footer"><slot name="footer"></slot></div>
-  </div>
-  <div class="clip-overlay" v-show="isShow"></div>
-</template>
-
-<script setup>
-const emit = defineEmits(['onClose'])
-const props = defineProps({
-  isShow: {
-    type: Boolean,
-    default: false
-  },
-  title: {
-    type: String,
-    default: ''
-  },
-  content: {
-    type: String,
-    default: ''
-  },
-  version: {
-    type: Number,
-    default: 0
-  }
-})
-const handleCloseBtnClick = () => {
-  utools.dbStorage.setItem('notify', {
-    title: props.title,
-    content: props.content,
-    version: props.version
-  })
-  emit('onClose')
-}
-</script>
-
-<style lang="less" scoped>
-@import '../style';
-</style>

src/data/notify.json

@@ -1,5 +1,5 @@
 {
   "title": "重要版本更新提示",
-  "content": "1. 如果你是第一次使用此插件, 请务必设置跟随主程序启动选项, 否则可能导致剪贴板记录丢失\n2. 插件内的收藏栏将在最近一个版本中移除, 届时点击收藏按钮将跳转到备忘快贴, 请尽快将已有数据保存, 使用备忘快贴代替\n3. 插件使用过程中遇到任何问题, 请到论坛发布页回帖或加入QQ群反馈",
+  "content": "1. 如果你是第一次使用此插件, 请务必设置跟随主程序启动选项, 否则可能导致剪贴板记录丢失</br>2. 插件内的收藏栏将在最近一个版本中移除, 届时点击收藏按钮将跳转到备忘快贴, 请尽快将已有数据保存, 使用备忘快贴代替</br>3. 插件使用过程中遇到任何问题, 请到论坛发布页回帖或加入QQ群反馈",
   "version": 1
 }

src/style/cpns/clip-card.less

@@ -1,81 +0,0 @@
-.clip-card {
-  position: absolute;
-  top: 10%;
-  left: 10%;
-  width: 80%;
-  height: 80%;
-  z-index: 500;
-  background-color: @bg-color;
-  border-radius: 10px;
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
-  &-header {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 50px;
-    border-radius: 5px 5px 0px 0px;
-    background-color: @primary-color;
-    color: @bg-color;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    .clip-card-header-title {
-      margin-left: 25px;
-      font-size: 17px;
-      font-weight: 600;
-    }
-    .clip-card-header-operate {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      margin: 20px;
-      .clip-card-header-operate-item {
-        margin-left: 10px;
-        cursor: pointer;
-        &:first-child {
-          margin-left: 0;
-        }
-      }
-    }
-  }
-  &-content {
-    position: absolute;
-    top: 50px;
-    left: 0;
-    overflow: auto;
-    padding: 30px;
-    color: @text-color;
-    .clip-card-content-item {
-      font-size: 15px;
-      margin-bottom: 10px;
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-  &-footer {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 50px;
-    background-color: @primary-color;
-    color: @text-color;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-radius: 0px 0px 5px 5px;
-    .clip-card-footer-operate {
-      display: flex;
-      align-items: center;
-      .clip-card-footer-operate-item {
-        margin-left: 10px;
-        cursor: pointer;
-        &:first-child {
-          margin-left: 0;
-        }
-      }
-    }
-  }
-}

src/style/index.less

@@ -1,6 +1,5 @@
 .import() {
   /* 导入全部涉及到变量的样式文件 */
-  @import (multiple) './cpns/clip-card.less';
   @import (multiple) './cpns/clip-float-btn.less';
   @import (multiple) './cpns/clip-full-data.less';
   @import (multiple) './cpns/clip-item-list.less';

src/views/Main.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="main">
-    <ClipCard :isShow="notifyShown" v-bind="notify" @onClose="notifyShown = false"></ClipCard>
     <ClipFloatBtn :icon="'🧭'" @onBtnClick="restoreDataBase"></ClipFloatBtn>
     <ClipFullData
       :isShow="fullDataShow"
@@ -59,7 +58,6 @@
 <script setup>
 import { ref, watch, onMounted, computed, nextTick } from 'vue'
 import { ElMessageBox, ElMessage } from 'element-plus'
-import ClipCard from '../cpns/ClipCard.vue'
 import ClipItemList from '../cpns/ClipItemList.vue'
 import ClipFullData from '../cpns/ClipFullData.vue'
 import ClipSearch from '../cpns/ClipSearch.vue'
@@ -67,7 +65,7 @@ import ClipSwitch from '../cpns/ClipSwitch.vue'
 import ClipFloatBtn from '../cpns/ClipFloatBtn.vue'
 import notify from '../data/notify.json'
 
-const notifyShown = ref(false)
+const notifyShown = ref(false) // 将在onMounted时根据此值判断是否显示通知
 const storageNotify = utools.dbStorage.getItem('notify')
 notifyShown.value = storageNotify ? storageNotify.version < notify.version : true
 
@@ -241,6 +239,21 @@ onMounted(() => {
   // 监听搜索框
   watch(filterText, (val) => updateShowList(activeTab.value))
 
+  // 展示通知
+  if (notifyShown.value) {
+    ElMessageBox.alert(notify.content, notify.title, {
+      confirmButtonText: '确定',
+      dangerouslyUseHTMLString: true,
+      callback: () => {
+        utools.dbStorage.setItem('notify', {
+          title: notify.title,
+          content: notify.content,
+          version: notify.version
+        })
+      }
+    })
+  }
+
   // 列表懒加载
   document.addEventListener('scroll', (e) => {
     const { scrollTop, clientHeight, scrollHeight } = e.target.scrollingElement