admin/nexus-terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加自定义对话模态框

Browse Source
This commit is contained in:
Baobhan Sith
2025-05-28 19:32:14 +08:00
parent ae88f6c66c
commit f022033b22
21 changed files with 438 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/components/AddEditQuickCommandForm.vue
+10 -5
View File
@@ -1,5 +1,5 @@
<template>
<div class="fixed inset-0 bg-overlay flex justify-center items-center z-[1050]" @click.self="closeForm">
<div class="fixed inset-0 bg-overlay flex justify-center items-center z-50" @click.self="closeForm">
<div class="bg-background text-foreground p-6 rounded-xl border border-border/50 shadow-2xl w-[90%] max-w-lg">
<h2 class="m-0 mb-6 text-center text-xl font-semibold">{{ isEditing ? t('quickCommands.form.titleEdit', '编辑快捷指令') : t('quickCommands.form.titleAdd', '添加快捷指令') }}</h2>
<form @submit.prevent="handleSubmit" class="space-y-5">
@@ -60,7 +60,8 @@ import { ref, reactive, computed, watch, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useQuickCommandsStore, type QuickCommandFE } from '../stores/quickCommands.store';
import { useQuickCommandTagsStore } from '../stores/quickCommandTags.store';
import TagInput from './TagInput.vue';
import TagInput from './TagInput.vue';
import { useConfirmDialog } from '../composables/useConfirmDialog';
const props = defineProps<{
commandToEdit?: QuickCommandFE | null; // 接收要编辑的指令对象 (should include tagIds)
@@ -69,6 +70,7 @@ const props = defineProps<{
const emit = defineEmits(['close']);
const { t } = useI18n();
const { showConfirmDialog } = useConfirmDialog();
const quickCommandsStore = useQuickCommandsStore();
const quickCommandTagsStore = useQuickCommandTagsStore(); // +++ Instantiate tag store +++
const isSubmitting = ref(false);
@@ -126,8 +128,11 @@ const handleDeleteTag = async (tagId: number) => {
const tagToDelete = quickCommandTagsStore.tags.find(t => t.id === tagId);
if (!tagToDelete) return;
if (confirm(t('tags.prompts.confirmDelete', { name: tagToDelete.name }))) {
console.log(`[QuickCmdForm] Calling quickCommandTagsStore.deleteTag...`);
const confirmed = await showConfirmDialog({
message: t('tags.prompts.confirmDelete', { name: tagToDelete.name })
});
if (confirmed) {
console.log(`[QuickCmdForm] Calling quickCommandTagsStore.deleteTag...`);
const success = await quickCommandTagsStore.deleteTag(tagId);
if (success) {
// If deletion is successful, TagInput's availableTags will update,
@@ -135,7 +140,7 @@ const handleDeleteTag = async (tagId: number) => {
// We also need to remove it from the local formData.tagIds if it was selected.
const index = formData.tagIds.indexOf(tagId);
if (index > -1) {
console.log(`[QuickCmdForm] Removing deleted tag ID ${tagId} from selection.`);
console.log(`[QuickCmdForm] Removing deleted tag ID ${tagId} from selection.`);
formData.tagIds.splice(index, 1);
}
} else {
packages/frontend/src/components/CommandHistoryMenu.vue
+11 -7
View File
@@ -46,12 +46,14 @@
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useCommandHistoryStore, CommandHistoryEntryFE } from '../stores/commandHistory.store';
import { useUiNotificationsStore } from '../stores/uiNotifications.store';
import { useI18n } from 'vue-i18n';
import { useUiNotificationsStore } from '../stores/uiNotifications.store';
import { useI18n } from 'vue-i18n';
import { useConfirmDialog } from '../composables/useConfirmDialog';
const commandHistoryStore = useCommandHistoryStore();
const uiNotificationsStore = useUiNotificationsStore();
const { t } = useI18n();
const uiNotificationsStore = useUiNotificationsStore();
const { t } = useI18n();
const { showConfirmDialog } = useConfirmDialog();
const hoveredItemId = ref<number | null>(null);
const listContainer = ref<HTMLElement | null>(null);
@@ -80,9 +82,11 @@ const updateSearchTerm = (event: Event) => {
};
// 确认清空所有历史记录
const confirmClearAll = () => {
// 使用浏览器的 confirm 对话框进行确认
if (window.confirm(t('commandHistory.confirmClear', '确定要清空所有历史记录吗？'))) {
const confirmClearAll = async () => { // 注意 async，并替换为实际函数名
const confirmed = await showConfirmDialog({
message: t('commandHistory.confirmClear', '确定要清空所有历史记录吗？')
});
if (confirmed) {
commandHistoryStore.clearAllHistory();
}
};
packages/frontend/src/components/ConnectionList.vue
+10 -5
View File
@@ -3,12 +3,14 @@ import { onMounted, computed, ref, reactive, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useConnectionsStore, ConnectionInfo } from '../stores/connections.store';
import { useTagsStore } from '../stores/tags.store';
import { useConnectionsStore, ConnectionInfo } from '../stores/connections.store';
import { useTagsStore } from '../stores/tags.store';
import { useConfirmDialog } from '../composables/useConfirmDialog';
const { t } = useI18n();
const router = useRouter();
const tagsStore = useTagsStore();
const router = useRouter();
const tagsStore = useTagsStore();
const { showConfirmDialog } = useConfirmDialog();
@@ -124,7 +126,10 @@ const handleDelete = async (conn: ConnectionInfo) => {
const connectionsStore = useConnectionsStore();
// 使用 i18n 获取确认消息
const confirmMessage = t('connections.prompts.confirmDelete', { name: conn.name });
if (window.confirm(confirmMessage)) {
const confirmed = await showConfirmDialog({
message: confirmMessage
});
if (confirmed) {
const success = await connectionsStore.deleteConnection(conn.id);
if (!success) {
// 如果删除失败，显示 store 中的错误信息 (或自定义错误)
packages/frontend/src/components/FavoritePathsModal.vue
+6 -1
View File
@@ -5,6 +5,7 @@ import { useFavoritePathsStore, type FavoritePathItem } from '../stores/favorite
import { useSessionStore } from '../stores/session.store';
import AddEditFavoritePathForm from './AddEditFavoritePathForm.vue';
import { useWorkspaceEventEmitter } from '../composables/workspaceEvents';
import { useConfirmDialog } from '../composables/useConfirmDialog';
const PADDING = 8; // px
@@ -25,6 +26,7 @@ const { t } = useI18n();
const favoritePathsStore = useFavoritePathsStore();
const sessionStore = useSessionStore();
const emitWorkspaceEvent = useWorkspaceEventEmitter();
const { showConfirmDialog } = useConfirmDialog();
const searchTerm = ref('');
const showAddEditModal = ref(false);
@@ -82,7 +84,10 @@ const openEditModal = (pathItem: FavoritePathItem) => {
};
const handleDelete = async (pathItem: FavoritePathItem) => {
if (confirm(t('favoritePaths.confirmDelete', { name: pathItem.name || pathItem.path }))) {
const confirmed = await showConfirmDialog({
message: t('favoritePaths.confirmDelete', { name: pathItem.name || pathItem.path })
});
if (confirmed) {
try {
await favoritePathsStore.deleteFavoritePath(pathItem.id, t);
} catch (error) {
packages/frontend/src/components/FocusSwitcherConfigurator.vue
+10 -5
View File
@@ -1,9 +1,10 @@
<script setup lang="ts">
import { ref, computed, watch, reactive, type Ref } from 'vue';
import { ref, computed, watch, reactive, type Ref } from 'vue';
import { useI18n } from 'vue-i18n';
import draggable from 'vuedraggable';
import { useFocusSwitcherStore, type FocusableInput, type FocusItemConfig, type FocusSwitcherFullConfig } from '../stores/focusSwitcher.store';
import { useFocusSwitcherStore, type FocusableInput, type FocusItemConfig, type FocusSwitcherFullConfig } from '../stores/focusSwitcher.store';
import { storeToRefs } from 'pinia';
import { useConfirmDialog } from '../composables/useConfirmDialog';
// 本地接口，仅用于右侧列表显示
interface SequenceDisplayItem extends FocusableInput {}
@@ -23,7 +24,8 @@ const emit = defineEmits(['close']);
// --- Setup ---
const { t } = useI18n();
const focusSwitcherStore = useFocusSwitcherStore(); // 实例化 Store
const { showConfirmDialog } = useConfirmDialog();
// --- State ---
const dialogRef = ref<HTMLElement | null>(null);
const initialDialogState = { width: 900, height: 600 }; // *** 增加初始尺寸 ***
@@ -144,9 +146,12 @@ watch([localSequence, localItemConfigs], () => {
// --- Methods ---
const closeDialog = () => {
const closeDialog = async () => {
if (hasChanges.value) {
if (confirm(t('focusSwitcher.confirmClose', '有未保存的更改，确定要关闭吗？'))) {
const confirmed = await showConfirmDialog({
message: t('focusSwitcher.confirmClose', '有未保存的更改，确定要关闭吗？')
});
if (confirmed) {
emit('close');
}
} else {
packages/frontend/src/components/LayoutConfigurator.vue
+22 -11
View File
@@ -1,11 +1,12 @@
<script setup lang="ts">
import { ref, computed, watch, type Ref, nextTick } from 'vue';
import { ref, computed, watch, type Ref, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
import { useLayoutStore, type LayoutNode, type PaneName } from '../stores/layout.store';
import { useSettingsStore } from '../stores/settings.store';
import { storeToRefs } from 'pinia';
import { useSettingsStore } from '../stores/settings.store';
import { storeToRefs } from 'pinia';
import draggable from 'vuedraggable';
import LayoutNodeEditor from './LayoutNodeEditor.vue';
import { useConfirmDialog } from '../composables/useConfirmDialog';
@@ -25,6 +26,7 @@ const { t } = useI18n();
const layoutStore = useLayoutStore();
const settingsStore = useSettingsStore(); // +++ Initialize settings store +++
const { layoutLockedBoolean } = storeToRefs(settingsStore); // +++ Get reactive state +++
const { showConfirmDialog } = useConfirmDialog();
// --- State ---
const localLayoutTree: Ref<LayoutNode | null> = ref(null);
@@ -184,10 +186,13 @@ const handleLayoutLockChange = async () => { // Removed event parameter
}
};
const closeDialog = () => {
const closeDialog = async () => {
// Use the computed property for the check
if (isModified.value) {
if (confirm(t('layoutConfigurator.confirmClose', '有未保存的更改，确定要关闭吗？'))) {
const confirmed = await showConfirmDialog({
message: t('layoutConfigurator.confirmClose', '有未保存的更改，确定要关闭吗？')
});
if (confirmed) {
emit('close');
}
} else {
@@ -219,8 +224,11 @@ const saveLayout = async () => { // Make async
}
};
const resetToDefault = () => {
if (confirm(t('layoutConfigurator.confirmReset', '确定要恢复默认布局和侧栏配置吗？当前更改将丢失。'))) {
const resetToDefault = async () => {
const confirmed = await showConfirmDialog({
message: t('layoutConfigurator.confirmReset', '确定要恢复默认布局和侧栏配置吗？当前更改将丢失。')
});
if (confirmed) {
// Reset main layout
const defaultLayout = layoutStore.getSystemDefaultLayout();
localLayoutTree.value = JSON.parse(JSON.stringify(defaultLayout));
@@ -295,12 +303,15 @@ function findAndRemoveNode(node: LayoutNode | null, parentNodeId: string | undef
}
// CORRECTED handleNodeRemove
const handleNodeRemove = (payload: { parentNodeId: string | undefined; nodeIndex: number }) => {
const handleNodeRemove = async (payload: { parentNodeId: string | undefined; nodeIndex: number }) => {
console.log('[LayoutConfigurator] Received node remove request:', payload);
if (payload.parentNodeId === undefined && payload.nodeIndex === 0) {
if (confirm(t('layoutConfigurator.confirmClearLayout', '确定要清空整个布局吗？所有面板将返回可用列表。'))) { // Keep default text for now
localLayoutTree.value = null;
}
const confirmed = await showConfirmDialog({
message: t('layoutConfigurator.confirmClearLayout', '确定要清空整个布局吗？所有面板将返回可用列表。')
});
if (confirmed) {
localLayoutTree.value = null;
}
} else if (payload.parentNodeId) {
// Update the local tree; isModified will react automatically
localLayoutTree.value = findAndRemoveNode(localLayoutTree.value, payload.parentNodeId, payload.nodeIndex);
packages/frontend/src/components/ManageTagConnectionsModal.vue
+6 -1
View File
@@ -5,6 +5,7 @@ import { storeToRefs } from 'pinia';
import { useConnectionsStore, type ConnectionInfo } from '../stores/connections.store';
import { useTagsStore, type TagInfo } from '../stores/tags.store';
import { useUiNotificationsStore } from '../stores/uiNotifications.store';
import { useConfirmDialog } from '../composables/useConfirmDialog';
interface Props {
tagInfo: TagInfo | null; // 传递整个 TagInfo 对象
@@ -19,6 +20,7 @@ const { t } = useI18n();
const connectionsStore = useConnectionsStore();
const tagsStore = useTagsStore(); // 如果需要更新标签信息或调用标签相关的 actions
const uiNotificationsStore = useUiNotificationsStore();
const { showConfirmDialog } = useConfirmDialog();
const { connections: allConnections, isLoading: connectionsLoading } = storeToRefs(connectionsStore);
@@ -127,7 +129,10 @@ const handleDeleteTag = async () => {
if (!props.tagInfo) return;
const tagName = props.tagInfo.name;
if (confirm(t('tags.prompts.confirmDelete', { name: tagName }))) {
const confirmed = await showConfirmDialog({
message: t('tags.prompts.confirmDelete', { name: tagName })
});
if (confirmed) {
const success = await tagsStore.deleteTag(props.tagInfo.id);
if (success) {
uiNotificationsStore.addNotification({ message: t('tags.deleteSuccess', { name: tagName }), type: 'success' }); // 需要新的翻译键
packages/frontend/src/components/NotificationSettings.vue
+10 -3
View File
@@ -75,8 +75,10 @@ import { useNotificationsStore } from '../stores/notifications.store';
import { NotificationSetting, NotificationChannelType, NotificationEvent } from '../types/server.types';
import NotificationSettingForm from './NotificationSettingForm.vue';
import { useI18n } from 'vue-i18n';
import { useConfirmDialog } from '../composables/useConfirmDialog';
const store = useNotificationsStore();
const { showConfirmDialog } = useConfirmDialog();
const { t } = useI18n();
const showAddForm = ref(false);
@@ -121,9 +123,14 @@ const editSetting = (setting: NotificationSetting) => {
showAddForm.value = false; // Ensure add form is hidden
};
const confirmDelete = (setting: NotificationSetting) => {
if (setting.id && confirm(t('settings.notifications.confirmDelete', { name: setting.name }))) {
store.deleteSetting(setting.id);
const confirmDelete = async (setting: NotificationSetting) => {
if (setting.id) {
const confirmed = await showConfirmDialog({
message: t('settings.notifications.confirmDelete', { name: setting.name })
});
if (confirmed) {
store.deleteSetting(setting.id);
}
}
};
packages/frontend/src/components/ProxyList.vue
+6 -1
View File
@@ -2,9 +2,11 @@
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { useProxiesStore, ProxyInfo } from '../stores/proxies.store';
import { useConfirmDialog } from '../composables/useConfirmDialog';
const { t } = useI18n();
const proxiesStore = useProxiesStore();
const { showConfirmDialog } = useConfirmDialog();
const { proxies, isLoading, error } = storeToRefs(proxiesStore);
// 定义组件发出的事件
@@ -13,7 +15,10 @@ const emit = defineEmits(['edit-proxy']);
// 处理删除代理的方法
const handleDelete = async (proxy: ProxyInfo) => {
const confirmMessage = t('proxies.prompts.confirmDelete', { name: proxy.name });
if (window.confirm(confirmMessage)) {
const confirmed = await showConfirmDialog({
message: confirmMessage
});
if (confirmed) {
const success = await proxiesStore.deleteProxy(proxy.id);
if (!success) {
alert(t('proxies.errors.deleteFailed', { error: proxiesStore.error || '未知错误' }));
packages/frontend/src/components/SshKeyManagementModal.vue
+15 -11
View File
@@ -3,12 +3,14 @@ import { ref, reactive, onMounted, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useSshKeysStore, SshKeyBasicInfo, SshKeyInput } from '../stores/sshKeys.store';
import { useUiNotificationsStore } from '../stores/uiNotifications.store';
import { useConfirmDialog } from '../composables/useConfirmDialog';
const emit = defineEmits(['close']);
const { t } = useI18n();
const sshKeysStore = useSshKeysStore();
const uiNotificationsStore = useUiNotificationsStore();
const { showConfirmDialog } = useConfirmDialog();
const keys = computed(() => sshKeysStore.sshKeys);
const isLoading = computed(() => sshKeysStore.isLoading);
@@ -104,18 +106,20 @@ const handleSubmit = async () => {
// Handle key deletion
const handleDelete = async (key: SshKeyBasicInfo) => {
// Simple confirmation dialog
if (confirm(t('sshKeys.modal.confirmDelete', { name: key.name }))) {
const success = await sshKeysStore.deleteSshKey(key.id);
if (!success) {
// Error handled by store
}
// If the deleted key was being edited, close the form
if (keyToEdit.value?.id === key.id) {
isAddEditFormVisible.value = false;
keyToEdit.value = null;
}
const confirmed = await showConfirmDialog({
message: t('sshKeys.modal.confirmDelete', { name: key.name })
});
if (confirmed) {
const success = await sshKeysStore.deleteSshKey(key.id);
if (!success) {
// Error handled by store
}
// If the deleted key was being edited, close the form
if (keyToEdit.value?.id === key.id) {
isAddEditFormVisible.value = false;
keyToEdit.value = null;
}
}
};
// Cancel add/edit form
packages/frontend/src/components/WorkspaceConnectionList.vue
+16 -7
View File
@@ -12,6 +12,8 @@ import { useUiNotificationsStore } from '../stores/uiNotifications.store'; // ++
import { useSettingsStore } from '../stores/settings.store';
import { useWorkspaceEventEmitter } from '../composables/workspaceEvents';
import ManageTagConnectionsModal from './ManageTagConnectionsModal.vue';
import { useConfirmDialog } from '../composables/useConfirmDialog';
// 定义事件
@@ -25,6 +27,7 @@ const sessionStore = useSessionStore(); // 获取 session store 实例
const focusSwitcherStore = useFocusSwitcherStore(); // +++ 实例化焦点切换 Store +++
const uiNotificationsStore = useUiNotificationsStore(); // +++ 修正实例化大小写 +++
const settingsStore = useSettingsStore(); // 实例化设置 store
const { showConfirmDialog } = useConfirmDialog();
const { connections, isLoading: connectionsLoading, error: connectionsError } = storeToRefs(connectionsStore);
const { tags, isLoading: tagsLoading, error: tagsError } = storeToRefs(tagsStore);
@@ -378,7 +381,7 @@ const closeContextMenu = () => {
};
// 处理右键菜单操作
const handleMenuAction = (action: 'add' | 'edit' | 'delete' | 'clone') => { // 添加 'clone' 类型
const handleMenuAction = async (action: 'add' | 'edit' | 'delete' | 'clone') => { // 添加 'clone' 类型
const conn = contextTargetConnection.value;
closeContextMenu(); // 先关闭菜单
@@ -386,12 +389,15 @@ const handleMenuAction = (action: 'add' | 'edit' | 'delete' | 'clone') => { //
console.log('[WorkspaceConnectionList] handleMenuAction called with action: add. Emitting request-add-connection...');
// router.push('/connections/add'); // 改为触发事件
emitWorkspaceEvent('connection:requestAdd');
} else if (conn) {
}else if (conn) {
if (action === 'edit') {
// router.push(`/connections/edit/${conn.id}`); // 改为触发事件
emitWorkspaceEvent('connection:requestEdit', { connectionInfo: conn }); // 传递整个连接对象
} else if (action === 'delete') {
if (confirm(t('connections.prompts.confirmDelete', { name: conn.name || conn.host }))) {
const confirmed = await showConfirmDialog({
message: t('connections.prompts.confirmDelete', { name: conn.name || conn.host })
});
if (confirmed) {
connectionsStore.deleteConnection(conn.id);
// 注意：删除后列表会自动更新，因为 store 是响应式的
}
@@ -476,7 +482,7 @@ const closeTagContextMenu = () => {
// 处理标签右键菜单操作
// 修改：允许直接传递 groupData，用于新的行内编辑按钮
const handleTagMenuAction = (action: 'connectAll' | 'manageTag' | 'deleteAllConnections', directGroupData?: (typeof filteredAndGroupedConnections.value)[0]) => {
const handleTagMenuAction = async (action: 'connectAll' | 'manageTag' | 'deleteAllConnections', directGroupData?: (typeof filteredAndGroupedConnections.value)[0]) => {
const group = directGroupData || contextTargetTagGroup.value; // 优先使用直接传递的 groupData
closeTagContextMenu(); // 先关闭菜单
@@ -530,7 +536,10 @@ const handleTagMenuAction = (action: 'connectAll' | 'manageTag' | 'deleteAllConn
return;
}
if (confirm(t('workspaceConnectionList.confirmDeleteAllConnectionsInGroup', { count: group.connections.length, groupName: group.groupName }))) {
const confirmed = await showConfirmDialog({
message: t('workspaceConnectionList.confirmDeleteAllConnectionsInGroup', { count: group.connections.length, groupName: group.groupName })
});
if (confirmed) {
const connectionIdsToDelete = group.connections.map(conn => conn.id);
const deletePromises = connectionIdsToDelete.map(connId =>
@@ -547,13 +556,13 @@ const handleTagMenuAction = (action: 'connectAll' | 'manageTag' | 'deleteAllConn
if (successfulDeletes > 0) {
uiNotificationsStore.addNotification({
message: t('workspaceConnectionList.allConnectionsInGroupDeletedSuccess', { count: successfulDeletes, groupName: group.groupName }),
message: t('workspaceConnectionList.allConnectionsInGroupDeletedSuccess', { count: successfulDeletes, groupName: group.groupName }),
type: 'success',
});
}
if (failedDeletes > 0) {
uiNotificationsStore.addNotification({
message: t('workspaceConnectionList.someConnectionsInGroupDeleteFailed', { count: failedDeletes, groupName: group.groupName }),
message: t('workspaceConnectionList.someConnectionsInGroupDeleteFailed', { count: failedDeletes, groupName: group.groupName }),
type: 'error',
});
}
packages/frontend/src/components/common/ConfirmDialog.vue
+126
View File
@@ -0,0 +1,126 @@
<script setup lang="ts">
import { ref, watch, onBeforeUnmount } from 'vue';
import { useI18n } from 'vue-i18n';
interface Props {
visible: boolean;
title: string;
message: string;
confirmText?: string;
cancelText?: string;
isLoading?: boolean;
}
const props = defineProps<Props>();
const emit = defineEmits(['confirm', 'cancel', 'update:visible']);
const { t } = useI18n();
const dialogVisible = ref(props.visible);
watch(() => props.visible, (newValue) => {
dialogVisible.value = newValue;
});
watch(dialogVisible, (newValue) => {
if (newValue !== props.visible) {
emit('update:visible', newValue);
}
});
const handleConfirm = () => {
if (props.isLoading) return;
emit('confirm');
};
const handleCancel = () => {
if (props.isLoading) return;
emit('cancel');
// 通常取消也应关闭对话框，如果store管理visible，则由store处理
// emit('update:visible', false);
};
const handleKeydown = (event: KeyboardEvent) => {
if (event.key === 'Escape' && dialogVisible.value && !props.isLoading) {
handleCancel();
}
};
watch(dialogVisible, (isVisible) => {
if (isVisible) {
document.addEventListener('keydown', handleKeydown);
} else {
document.removeEventListener('keydown', handleKeydown);
}
});
onBeforeUnmount(() => {
document.removeEventListener('keydown', handleKeydown);
});
</script>
<template>
<teleport to="body">
<div
v-if="dialogVisible"
class="fixed inset-0 z-[100] flex items-center justify-center bg-overlay p-4"
@mousedown.self="handleCancel"
>
<div
class="bg-background text-foreground p-5 rounded-lg shadow-xl border border-border w-full max-w-md flex flex-col"
role="dialog"
aria-modal="true"
:aria-labelledby="props.title"
>
<h3 class="text-xl font-semibold mb-4 text-center flex-shrink-0" :id="props.title">
{{ props.title }}
</h3>
<div class="flex-grow mb-6 text-sm">
<p class="text-text-secondary text-center whitespace-pre-wrap">
{{ props.message }}
</p>
</div>
<div class="flex justify-end gap-3 flex-shrink-0">
<button
@click="handleCancel"
:disabled="props.isLoading"
type="button"
class="px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-offset-background-dark text-sm font-medium transition-colors duration-150 bg-background border border-border/50 text-text-secondary hover:bg-border hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
>
{{ props.cancelText || t('common.cancel', '取消') }}
</button>
<button
@click="handleConfirm"
:disabled="props.isLoading"
type="button"
class="px-4 py-2 text-sm font-medium text-white rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-background-dark transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center bg-primary hover:bg-primary-hover focus:ring-primary"
>
<svg
v-if="props.isLoading"
class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
></circle>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
{{ props.confirmText || t('common.confirm', '确认') }}
</button>
</div>
</div>
</div>
</teleport>
</template>
packages/frontend/src/components/style-customizer/StyleCustomizerBackgroundTab.vue
+7 -2
View File
@@ -4,8 +4,11 @@ import { useI18n } from 'vue-i18n';
import { useAppearanceStore } from '../../stores/appearance.store';
import { useUiNotificationsStore } from '../../stores/uiNotifications.store';
import { storeToRefs } from 'pinia';
import { useConfirmDialog } from '../../composables/useConfirmDialog';
const { t } = useI18n();
const { showConfirmDialog } = useConfirmDialog();
const appearanceStore = useAppearanceStore();
const notificationsStore = useUiNotificationsStore();
@@ -294,9 +297,11 @@ const handleSaveLocalPreset = async () => {
};
const handleDeleteLocalPreset = async (name: string) => {
// name here is the full filename with .html
const displayName = name.replace(/\.html$/, '');
if (confirm(t('styleCustomizer.confirmDeletePreset', { name: displayName }))) {
const confirmed = await showConfirmDialog({
message: t('styleCustomizer.confirmDeletePreset', { name: displayName })
});
if (confirmed) {
try {
await deleteLocalHtmlPreset(name);
notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.localPresetDeleted') });