feat: new dialog

src/App.vue

@@ -259,7 +259,7 @@ const passAlert = ref(useOpenPass.value && openPass.value !== '')
             @cancel="() => alertShow = false"
             @return="returnClick"
           >
-            <ul>
+            <ul m-0 p-l-20px>
               <li v-for="(item, index) in alertMsg" :key="index">
                 {{ item.slice(2) }}
               </li>

src/components/Alert/Alert.vue

@@ -1,20 +1,21 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import { computed, onMounted, ref, watchEffect } from 'vue'
+import { onMounted, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { usePreferredDark } from '@vueuse/core'
 import ContextMenu from '../ContextMenu/ContextMenu.vue'
 
 const props = withDefaults(defineProps<{
   title?: string
   body?: Array<string>
   cancelButtonShow?: boolean
   dialogShow?: boolean
+  showTitle?: boolean
 }>(), {
   title: 'title',
   body: () => ['1', '2'],
   cancelButtonShow: true,
   dialogShow: false,
+  showTitle: true,
 })
 
 const emits = defineEmits<{
@@ -64,44 +65,45 @@ onMounted(() => {
     showContextMenu.value = false
   })
 })
-
-const isDark = usePreferredDark()
-
-const primaryColor = computed(() => isDark.value ? '#4e6fbb' : '#5985eb')
 </script>
 
 <template>
   <dialog
     ref="dialog"
     :class="`alert ${dialogShow ? '' : 'hide'}`"
     bg="white dark:#333"
-    border="1px solid #999 dark:black/10"
+    border-none
     @contextmenu="contextmenuClick"
   >
     <div
-      class="title"
       c="#333 dark:#bbb"
     >
-      {{ title }}
-    </div>
-    <div
-      class="body"
-      :style="{ alignItems: title === t('accountPage.alertTitle') ? 'center' : '' }"
-      c="#333 dark:#bbb"
-    >
-      <slot />
-    </div>
-    <div class="buttons" no-drag>
-      <div
-        v-if="cancelButtonShow"
-        class="cancel"
-        c="#333 dark:#bbb"
-        @click="emits('cancel')"
-      >
-        {{ t('alertText.cancelText') }}
+      <div v-if="showTitle" text-6 font-bold m="t-15px l-20px">
+        {{ title }}
       </div>
-      <div class="return" :style="{ width: cancelButtonShow ? '' : '100%' }" @click="emits('return')">
-        {{ t('alertText.returnText') }}
+      <div flex="~ col" min-h-16 justify-center p-20px>
+        <slot />
+      </div>
+      <div flex="~ gap-15px" bg="black/5" p-15px no-drag>
+        <button
+          flex-1 rounded-5px p-y-5px outline-none
+          c="dark:#111 #fff" border="2px solid primary-d dark:primary-a"
+          shadow="sm black/30 active:none"
+          bg="primary-d/90 dark:primary-a/90 active:primary-d active:dark:primary-a"
+          @click="emits('return')"
+        >
+          {{ t('alertText.returnText') }}
+        </button>
+        <button
+          v-if="cancelButtonShow"
+          flex-1 rounded-5px p-y-5px outline-none
+          c="dark:#111 #fff" border="2px solid error-d dark:error-a"
+          shadow="sm black/30 active:none"
+          bg="error-d/90 dark:error-a/90 active:error-d dark:active:error-a"
+          @click="emits('cancel')"
+        >
+          {{ t('alertText.cancelText') }}
+        </button>
       </div>
     </div>
     <ContextMenu v-if="showContextMenu" :pos="contextMenu" :show-paste="false" />
@@ -121,86 +123,5 @@ const primaryColor = computed(() => isDark.value ? '#4e6fbb' : '#5985eb')
   transition: dialog;
   user-select: none;
   outline: none;
-
-  .title {
-    -webkit-app-region: drag;
-    border-bottom: 1.5px solid #00000015;
-    padding: 12px;
-    display: flex;
-    background: #00000008;
-    justify-content: center;
-    align-items: center;
-    font-weight: bold;
-  }
-
-  .body {
-    padding: 18px;
-    font-size: 14px;
-    display: flex;
-    flex-direction: column;
-    border-bottom: 1.5px solid #00000015;
-    min-height: 3em;
-    justify-content: center;
-
-    &:deep(ul) {
-      margin: 0;
-
-      li {
-        margin-left: -18px;
-        user-select: text;
-      }
-    }
-
-    &:deep(span) {
-      display: block;
-      white-space: pre-wrap;
-      user-select: text;
-      text-align: center;
-    }
-  }
-
-  .buttons {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    height: 50px;
-    background: #00000010;
-
-    div {
-      width: 50%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: 15px;
-      font-weight: bold;
-      cursor: pointer;
-
-      &.cancel {
-        border-right: 2px solid #00000010;
-
-        &:active {
-          background-color: #00000010 !important;
-        }
-
-        &:hover {
-          background-color: #00000005;
-        }
-      }
-
-      &.return {
-        color: v-bind(primaryColor);
-
-        &:active {
-          background-color: v-bind(primaryColor) !important;
-          color: white;
-        }
-
-        &:hover {
-          background-color: #00000005;
-        }
-      }
-    }
-  }
 }
 </style>

src/components/Alert/dialogAnimation.scss

@@ -19,11 +19,9 @@
 @keyframes showDialogBackdrop {
   from {
     background: rgba(0, 0, 0, 0);
-    backdrop-filter: blur(0px);
   }
   to {
     background: rgba(0, 0, 0, 0.2);
-    backdrop-filter: blur(10px);
   }
 }
 

src/pages/Settings/OpenPass.vue

@@ -74,11 +74,14 @@ function ok() {
   </SettingList>
   <Alert
     :dialog-show="alertShow"
-    :title="t('openPass.plzPass')"
+    :show-title="false"
     @cancel="router.back()"
     @return="ok"
   >
     <div flex="~ col" items-center justify-center>
+      <div mb-20px font-bold>
+        {{ t('openPass.plzPass') }}
+      </div>
       <div :mb="alertMsg ? '15px' : '0px'">
         {{ alertMsg }}
       </div>

src/util/appVersionCode.ts

@@ -7,4 +7,5 @@ const versionCodeArr: Array<number> = app.getVersion().split('.')
 const devCode = 131
 
 export const versionCode = versionCodeArr[0] * 100 + versionCodeArr[1] * 10 + Number(versionCodeArr[2])
+// export const versionCode = devCode
 export const versionText = app.getVersion()