feat: 优化打开协议交互

This commit is contained in:
digua
2026-02-11 20:35:20 +08:00
committed by digua
parent d4f5c58f90
commit 6ea9e863b3
3 changed files with 3 additions and 35 deletions
-1
View File
@@ -68,7 +68,6 @@
"subtitle": "Please read carefully before use",
"disagree": "I Disagree",
"agree": "I Have Read and Agree",
"countdown": "Please read ({seconds}s)",
"updateNotice": "The agreement has important updates. Please read and confirm again."
},
"datePicker": {
-1
View File
@@ -68,7 +68,6 @@
"subtitle": "使用前请仔细阅读",
"disagree": "我不同意",
"agree": "我已阅读并同意",
"countdown": "请阅读 ({seconds}s)",
"updateNotice": "协议内容有重要更新,请重新阅读并确认"
},
"datePicker": {
+3 -33
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
import { ref, computed, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useI18n } from 'vue-i18n'
import MarkdownIt from 'markdown-it'
@@ -49,35 +49,6 @@ onMounted(() => {
}
})
// 倒计时状态
const countdown = ref(10)
let timer: ReturnType<typeof setInterval> | null = null
// 监听 modal 打开状态,启动倒计时
watch(isOpen, (open) => {
if (open) {
countdown.value = 10
timer = setInterval(() => {
if (countdown.value > 0) {
countdown.value--
} else if (timer) {
clearInterval(timer)
timer = null
}
}, 1000)
} else if (timer) {
clearInterval(timer)
timer = null
}
})
onUnmounted(() => {
if (timer) clearInterval(timer)
})
// 是否可以点击同意按钮(版本更新时无需等待倒计时)
const canAgree = computed(() => isVersionUpdated.value || countdown.value === 0)
// 创建 markdown-it 实例
const md = new MarkdownIt({
html: false,
@@ -176,11 +147,10 @@ defineExpose({ open })
<UButton
color="primary"
size="lg"
:disabled="!canAgree"
class="bg-pink-500 hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700 disabled:opacity-50 disabled:cursor-not-allowed"
class="bg-pink-500 hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700"
@click="handleAgree"
>
{{ canAgree ? t('common.agreement.agree') : t('common.agreement.countdown', { seconds: countdown }) }}
{{ t('common.agreement.agree') }}
</UButton>
</div>
</div>