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
+13
View File
@@ -0,0 +1,13 @@
# v0.6.8 发布说明(2026-10-26)
## 确认弹窗重做
- 修复内容贴边(上一轮组件基座统一时确认框未获得内边距,标题/正文/按钮挤作一团)
- 重做为标准企业级危险确认:红色警告徽标 + 标题/正文分区 + 22px 内边距 + 右对齐操作区
- 危险操作:红色三角警告徽标 + 红色标题 + 红色实心确认按钮;普通确认保持蓝白风格
- 移动端按钮等宽 40px;Esc/点击遮罩关闭行为不变(全部 10+ 处调用点零改动)
## 部署
- 服务器:`cd /opt/daywork && git pull && cd server && docker compose up -d --build`(网页端即生效)
- 桌面 / 安卓:安装 0.6.8 安装包
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]); 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-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}; 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="icon" href="./icons/icon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="./icons/icon-192.png" /> <link rel="apple-touch-icon" href="./icons/icon-192.png" />
<title>实习工作日志</title> <title>实习工作日志</title>
<script type="module" crossorigin src="./assets/index-o_Kd7ZbB.js"></script> <script type="module" crossorigin src="./assets/index-Bl3hryOj.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-CsewO6wh.css"> <link rel="stylesheet" crossorigin href="./assets/index-1W8309b-.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
+1 -1
View File
@@ -1,7 +1,7 @@
{ {
"name": "intern-log", "name": "intern-log",
"private": true, "private": true,
"version": "0.6.7", "version": "0.6.8",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
+44 -10
View File
@@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { onUnmounted, watch } from 'vue' import { onUnmounted, watch } from 'vue'
import Icon from './Icon.vue'
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
open: boolean open: boolean
@@ -27,12 +28,19 @@ onUnmounted(() => window.removeEventListener('keydown', onKey))
<teleport to="body"> <teleport to="body">
<transition name="modal"> <transition name="modal">
<div v-if="open" class="mask" @click.self="emit('cancel')"> <div v-if="open" class="mask" @click.self="emit('cancel')">
<div class="dialog" role="dialog" :aria-label="title"> <div class="dialog confirm-dialog" role="dialog" :aria-label="title">
<div class="dialog-title" :class="{ 'is-danger': danger }">{{ title }}</div> <div class="confirm-body">
<div class="dialog-msg">{{ message }}</div> <div v-if="danger" class="confirm-badge">
<div class="dialog-btns"> <Icon name="warning" :size="22" />
<button class="btn btn-sm" @click="emit('cancel')">{{ cancelText }}</button> </div>
<button class="btn btn-sm" :class="danger ? 'btn-danger-solid' : 'btn-primary'" @click="emit('confirm')">{{ confirmText }}</button> <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> </div>
</div> </div>
@@ -41,8 +49,34 @@ onUnmounted(() => window.removeEventListener('keydown', onKey))
</template> </template>
<style scoped> <style scoped>
.dialog { width: 380px; } .confirm-dialog {
.dialog-title.is-danger { color: var(--danger); } width: 400px;
.dialog-msg { margin-top: 8px; color: var(--text-2); font-size: 13px; line-height: 1.7; word-break: break-all; } padding: 22px 22px 18px;
.dialog-btns { margin-top: 20px; } }
.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> </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"/>'), 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"/>'), 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"/>'), 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"/>') 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"/>')
} }