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

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
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,2 +1,2 @@
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./web-CEj0vlG8.js","./index-o_Kd7ZbB.js","./index-CsewO6wh.css"])))=>i.map(i=>d[i]);
import{r as s,_ as i}from"./index-o_Kd7ZbB.js";var t;(function(e){e.Documents="DOCUMENTS",e.Data="DATA",e.Library="LIBRARY",e.Cache="CACHE",e.External="EXTERNAL",e.ExternalStorage="EXTERNAL_STORAGE"})(t||(t={}));var a;(function(e){e.UTF8="utf8",e.ASCII="ascii",e.UTF16="utf16"})(a||(a={}));const E=s("Filesystem",{web:()=>i(()=>import("./web-CEj0vlG8.js"),__vite__mapDeps([0,1,2]),import.meta.url).then(e=>new e.FilesystemWeb)});export{t as Directory,a as Encoding,E as Filesystem};
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./web-DQONAa4r.js","./index-Bl3hryOj.js","./index-1W8309b-.css"])))=>i.map(i=>d[i]);
import{r as s,_ as i}from"./index-Bl3hryOj.js";var t;(function(e){e.Documents="DOCUMENTS",e.Data="DATA",e.Library="LIBRARY",e.Cache="CACHE",e.External="EXTERNAL",e.ExternalStorage="EXTERNAL_STORAGE"})(t||(t={}));var a;(function(e){e.UTF8="utf8",e.ASCII="ascii",e.UTF16="utf16"})(a||(a={}));const E=s("Filesystem",{web:()=>i(()=>import("./web-DQONAa4r.js"),__vite__mapDeps([0,1,2]),import.meta.url).then(e=>new e.FilesystemWeb)});export{t as Directory,a as Encoding,E as Filesystem};
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -8,8 +8,8 @@
<link rel="icon" href="./icons/icon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="./icons/icon-192.png" />
<title>实习工作日志</title>
<script type="module" crossorigin src="./assets/index-o_Kd7ZbB.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-CsewO6wh.css">
<script type="module" crossorigin src="./assets/index-Bl3hryOj.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-1W8309b-.css">
</head>
<body>
<div id="app"></div>
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "intern-log",
"private": true,
"version": "0.6.7",
"version": "0.6.8",
"type": "module",
"scripts": {
"dev": "vite",
+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>
+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"/>')
}