root/daywork
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

ui: 确认弹窗重做(警告徽标+分区留白,修复内容贴边) + warning自绘图标

Browse Source
This commit is contained in:
root
2026-10-26 21:53:08 +08:00
parent 5a6ab2b322
commit d55c768f16
10 changed files with 74 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
intern-log/src/components/ConfirmDialog.vue
+44 -10
View File
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { onUnmounted, watch } from 'vue'
import Icon from './Icon.vue'
const props = withDefaults(defineProps<{
open: boolean
@@ -27,12 +28,19 @@ onUnmounted(() => window.removeEventListener('keydown', onKey))
<teleport to="body">
<transition name="modal">
<div v-if="open" class="mask" @click.self="emit('cancel')">
<div class="dialog" role="dialog" :aria-label="title">
<div class="dialog-title" :class="{ 'is-danger': danger }">{{ title }}</div>
<div class="dialog-msg">{{ message }}</div>
<div class="dialog-btns">
<button class="btn btn-sm" @click="emit('cancel')">{{ cancelText }}</button>
<button class="btn btn-sm" :class="danger ? 'btn-danger-solid' : 'btn-primary'" @click="emit('confirm')">{{ confirmText }}</button>
<div class="dialog confirm-dialog" role="dialog" :aria-label="title">
<div class="confirm-body">
<div v-if="danger" class="confirm-badge">
<Icon name="warning" :size="22" />
</div>
<div class="confirm-text">
<div class="confirm-title" :class="{ 'is-danger': danger }">{{ title }}</div>
<div class="confirm-msg">{{ message }}</div>
</div>
</div>
<div class="confirm-btns">
<button class="btn" @click="emit('cancel')">{{ cancelText }}</button>
<button class="btn" :class="danger ? 'btn-danger-solid' : 'btn-primary'" @click="emit('confirm')">{{ confirmText }}</button>
</div>
</div>
</div>
@@ -41,8 +49,34 @@ onUnmounted(() => window.removeEventListener('keydown', onKey))
</template>
<style scoped>
.dialog { width: 380px; }
.dialog-title.is-danger { color: var(--danger); }
.dialog-msg { margin-top: 8px; color: var(--text-2); font-size: 13px; line-height: 1.7; word-break: break-all; }
.dialog-btns { margin-top: 20px; }
.confirm-dialog {
width: 400px;
padding: 22px 22px 18px;
}
.confirm-body { display: flex; gap: 14px; align-items: flex-start; }
.confirm-badge {
width: 40px;
height: 40px;
flex: none;
border-radius: 50%;
background: #FDEEEE;
color: var(--danger);
display: flex;
align-items: center;
justify-content: center;
}
.confirm-text { flex: 1; min-width: 0; }
.confirm-title { font-size: 15px; font-weight: 600; color: var(--text-1); line-height: 1.4; }
.confirm-title.is-danger { color: var(--danger); }
.confirm-msg { margin-top: 6px; color: var(--text-2); font-size: 13px; line-height: 1.7; word-break: break-all; }
.confirm-btns { margin-top: 18px; display: flex; justify-content: flex-end; gap: 8px; }
.modal-enter-active, .modal-leave-active { transition: opacity 0.15s ease; }
.modal-enter-from, .modal-leave-to { opacity: 0; }
@media (max-width: 720px) {
.confirm-dialog { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; }
.confirm-btns .btn { flex: 1; height: 40px; }
.confirm-btns { margin-top: 16px; }
}
</style>
intern-log/src/components/icons.ts
+1
View File
@@ -25,5 +25,6 @@ export const ICONS: Record<string, string> = {
wallet: svg('<rect x="3.5" y="6" width="17" height="12.5" rx="2"/><path d="M3.5 10h17"/><circle cx="16.4" cy="14.2" r="1.1"/>'),
more: svg('<circle cx="5.4" cy="12" r="1.7"/><circle cx="12" cy="12" r="1.7"/><circle cx="18.6" cy="12" r="1.7"/>'),
shield: svg('<path d="M12 3.5l7.2 2.7v5.1c0 4.7-3.1 7.8-7.2 9.4-4.1-1.6-7.2-4.7-7.2-9.4V6.2z"/><path d="M9.3 12.2l1.9 1.9 3.6-4"/>'),
warning: svg('<path d="M12 4.2L21 19.2H3L12 4.2z"/><path d="M12 10.2v3.6M12 16.4h.01"/>'),
plan: svg('<rect x="4.5" y="4" width="15" height="16.5" rx="2"/><path d="M8.5 9.5l1.4 1.4 2.6-2.9M8.5 15l1.4 1.4 2.6-2.9M15 9.8h.01M15 15.3h.01"/>')
}