fix:调整保存按钮气泡显示方式

opentiny · Oct 17, 2024 · 1f4ecc2 · 1f4ecc2
1 parent 04d6982
commit 1f4ecc2
Showing 1 changed file with 47 additions and 47 deletions.
diff --git a/packages/toolbars/save/src/Main.vue b/packages/toolbars/save/src/Main.vue
@@ -1,56 +1,56 @@
 <template>
   <div class="toolbar-save">
-    <toolbar-base
-      :content="isLoading ? '保存中' : '保存'"
-      :icon="options.icon.default || options.icon"
-      :options="{ ...options, showDots: !isSaved() }"
-      @click-api="openApi"
-    >
-      <template #button>
-        <tiny-popover :visible-arrow="false" width="203" trigger="hover">
-          <template #reference>
+    <tiny-popover :visible-arrow="false" width="203" trigger="hover">
+      <template #reference>
+        <toolbar-base
+          :content="isLoading ? '保存中' : '保存'"
+          :icon="options.icon.default || options.icon"
+          :options="{ ...options, showDots: !isSaved() }"
+          @click-api="openApi"
+        >
+          <template #button>
             <svg-icon :name="iconExpand"></svg-icon>
           </template>
-          <div class="save-style">
-            <div class="save-setting">保存设置</div>
-            <tiny-checkbox v-model="state.checked" name="tiny-checkbox">自动保存</tiny-checkbox>
-            <div class="save-time">
-              <div class="save-time-label">保存间隔</div>
-              <tiny-select v-model="state.timeValue" :options="delayOptions" :disabled="!state.checked" autocomplete>
-              </tiny-select>
-            </div>
-            <div class="save-button-group">
-              <tiny-button type="primary" @click="autoSave">设置并保存</tiny-button>
-            </div>
-          </div>
-        </tiny-popover>
-      </template>
-      <template #default>
-        <tiny-dialog-box
-          class="dialog-box"
-          :modal="false"
-          :fullscreen="true"
-          :append-to-body="true"
-          :visible="state.visible"
-          title="Schema 本地与线上差异"
-          @update:visible="state.visible = $event"
-        >
-          <vue-monaco
-            v-if="state.visible"
-            ref="editor"
-            class="monaco-editor"
-            :diffEditor="true"
-            :options="editorOptions"
-            :value="state.code"
-            :original="state.originalCode"
-          ></vue-monaco>
-          <template #footer>
-            <tiny-button @click="close">取 消</tiny-button>
-            <tiny-button type="primary" @click="saveApi">保 存</tiny-button>
+          <template #default>
+            <tiny-dialog-box
+              class="dialog-box"
+              :modal="false"
+              :fullscreen="true"
+              :append-to-body="true"
+              :visible="state.visible"
+              title="Schema 本地与线上差异"
+              @update:visible="state.visible = $event"
+            >
+              <vue-monaco
+                v-if="state.visible"
+                ref="editor"
+                class="monaco-editor"
+                :diffEditor="true"
+                :options="editorOptions"
+                :value="state.code"
+                :original="state.originalCode"
+              ></vue-monaco>
+              <template #footer>
+                <tiny-button @click="close">取 消</tiny-button>
+                <tiny-button type="primary" @click="saveApi">保 存</tiny-button>
+              </template>
+            </tiny-dialog-box>
           </template>
-        </tiny-dialog-box>
+        </toolbar-base>
       </template>
-    </toolbar-base>
+      <div class="save-style">
+        <div class="save-setting">保存设置</div>
+        <tiny-checkbox v-model="state.checked" name="tiny-checkbox">自动保存</tiny-checkbox>
+        <div class="save-time">
+          <div class="save-time-label">保存间隔</div>
+          <tiny-select v-model="state.timeValue" :options="delayOptions" :disabled="!state.checked" autocomplete>
+          </tiny-select>
+        </div>
+        <div class="save-button-group">
+          <tiny-button type="primary" @click="autoSave">设置并保存</tiny-button>
+        </div>
+      </div>
+    </tiny-popover>
   </div>
 </template>