feat: 添加卡片组件 重要版本更新将弹出提示更新内容

src/views/Main.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="main">
+    <ClipCard :isShow="notifyShown" v-bind="notify" @onClose="notifyShown = false"></ClipCard>
     <ClipFloatBtn :icon="'🧭'" @onBtnClick="restoreDataBase"></ClipFloatBtn>
     <ClipFullData
       :isShow="fullDataShow"
@@ -56,11 +57,17 @@
 
 <script setup>
 import { ref, watch, onMounted, computed, nextTick } from 'vue'
+import ClipCard from '../cpns/ClipCard.vue'
 import ClipItemList from '../cpns/ClipItemList.vue'
 import ClipFullData from '../cpns/ClipFullData.vue'
 import ClipSearch from '../cpns/ClipSearch.vue'
 import ClipSwitch from '../cpns/ClipSwitch.vue'
 import ClipFloatBtn from '../cpns/ClipFloatBtn.vue'
+import notify from '../data/notify.json'
+
+const notifyShown = ref(false)
+const storageNotify = utools.dbStorage.getItem('notify')
+notifyShown.value = storageNotify ? storageNotify.version < notify.version : true
 
 const isMultiple = ref(false)
 

src/views/Notify.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="notify">
+    <ClipCard>
+      <template #header>
+        <div class="notify-header">
+          <div class="notify-header-title">通知</div>
+        </div>
+      </template>
+      <div class="notify-content">
+        <div class="notify-content-title">通知标题</div>
+        <div class="notify-content-text">通知内容</div>
+      </div>
+      <template #footer>
+        <div class="notify-footer">
+          <div class="notify-footer-btn">知道了</div>
+        </div>
+      </template>
+    </ClipCard>
+  </div>
+</template>
+
+<script setup>
+import ClipCard from '../cpns/ClipCard.vue'
+</script>
+
+<style lang="less" scoped>
+@import '../style';
+</style>