update: 更新dialog使用方式

JessYan0913 · Aug 24, 2023 · 5e79fc9 · 5e79fc9
1 parent 87c3394
commit 5e79fc9
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 11 deletions.
diff --git a/main/src/components/Dialog.vue b/main/src/components/Dialog.vue
@@ -55,7 +55,7 @@ function closeModal() {
             leave-to="opacity-0 scale-95"
           >
             <DialogPanel
-              class="overflow-auto max-w-5xl min-w-fit rounded-lg bg-white p-6 text-left align-middle shadow-xl transition-all"
+              class="w-auto max-w-5xl min-w-fit rounded-lg bg-white p-6 text-left align-middle shadow-xl transition-all"
             >
               <slot></slot>
             </DialogPanel>

diff --git a/main/src/components/MessageBox.vue b/main/src/components/MessageBox.vue
@@ -13,7 +13,7 @@ const props = defineProps<{
 const emits = defineEmits<{
   (event: 'update:visible', visible: boolean): void;
   (event: 'close'): void;
-  (event: 'confirm'): void;
+  (event: 'submit'): void;
 }>();
 
 const dialogVisible = computed<boolean>({
@@ -32,8 +32,8 @@ const closeModal = () => {
   dialogVisible.value = false;
 };
 
-const onConfirm = () => {
-  emits('confirm');
+const onConfirmed = () => {
+  emits('submit');
   closeModal();
 };
 </script>
@@ -42,7 +42,7 @@ const onConfirm = () => {
   <Dialog :visible="dialogVisible" @close="closeModal">
     <div class="flex flex-col">
       <DialogTitle as="h3" class="text-lg font-medium leading-6 text-gray-900"> {{ title }} </DialogTitle>
-      <div class="mt-2">
+      <div class="mt-3">
         <p class="text-sm text-gray-500">
           {{ message }}
         </p>
@@ -59,7 +59,7 @@ const onConfirm = () => {
         <button
           type="button"
           class="inline-flex justify-center rounded-md border border-transparent bg-blue-400 px-4 py-2 text-sm font-medium text-blue-50 hover:bg-blue-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-          @click="onConfirm"
+          @click="onConfirmed"
         >
           确认
         </button>

diff --git a/main/src/view/canvas/components/ExportImageDialog.vue b/main/src/view/canvas/components/ExportImageDialog.vue
@@ -42,7 +42,7 @@ const formats = [
 ];
 const selectedFormat = ref(formats[0]);
 
-const imgSrc = ref<string>('https://i.imgur.com/RWYeUDM.png');
+const imgSrc = ref<string>('');
 
 const closeModal = () => {
   dialogVisible.value = false;
@@ -77,8 +77,8 @@ onMounted(() => {
 
 <template>
   <Dialog :visible="dialogVisible" @close="closeModal">
-    <div class="w-screen max-w-5xl min-w-fit flex flex-row justify-between transform overflow-hidden">
-      <div class="flex items-center h-96 w-[50%]">
+    <div class="w-max max-w-5xl min-w-fit flex flex-row justify-between transform overflow-hidden">
+      <div class="flex items-center h-96 w-[50%] min-w-max">
         <div
           class="w-full h-full flex flex-grow justify-center bg-fixed rounded-md p-1"
           style="
@@ -88,7 +88,7 @@ onMounted(() => {
           <img :src="imgSrc" />
         </div>
       </div>
-      <div class="flex flex-col flex-wrap gap-6 grow ml-6 antialiased">
+      <div class="flex flex-col flex-wrap w-96 min-w-max gap-6 grow ml-6 antialiased p-2">
         <div class="text-lg">导出图片</div>
         <div class="flex flex-row justify-between items-center">
           <label>背景</label>

diff --git a/main/src/view/canvas/components/Menu.vue b/main/src/view/canvas/components/Menu.vue
@@ -40,8 +40,9 @@ const menuGroups: MenuConfig[][] = [
         messageBox({
           title: '清除画布',
           message: '将会清空画布内容，是否继续？',
-          onConfirm: () => {
+          onSubmit: () => {
             app.clear();
+            messageBox.close();
           },
         });
       },