优化

src/modules/container-loading/components/SmartLoadingDialog.test.ts

@@ -38,7 +38,13 @@ describe('SmartLoadingDialog', () => {
 
   it('keeps the outer dialog fixed so only workbench data panes scroll', () => {
     const source = readFileSync(resolve(process.cwd(), 'src/modules/container-loading/components/SmartLoadingDialog.vue'), 'utf8')
+    expect(source).toContain('fullscreenable')
+    expect(source).toContain('default-fullscreen')
+    expect(source).not.toContain('Maximize2')
+    expect(source).not.toContain('const fullscreen')
+    expect(source).toContain('.smart-loading-dialog.app-dialog.el-dialog:not(.is-fullscreen)')
     expect(source).toContain('height: 94vh; max-height: 94vh;')
+    expect(source).not.toContain('.smart-loading-dialog.app-dialog.el-dialog) { width: min(1600px, 98vw)')
     expect(source).toContain('flex: 1; padding: 0; overflow: hidden;')
     expect(source).toContain('min-height: 0; flex: 1; overflow: hidden;')
   })

src/modules/container-loading/components/SmartLoadingDialog.vue

@@ -1,15 +1,8 @@
 <script setup lang="ts">
-import { Maximize2, Minimize2 } from '@lucide/vue'
-import { ref, watch } from 'vue'
 import AppDialog from '@/shared/components/AppDialog.vue'
 import GlobalSmartLoadingView from '../pages/GlobalSmartLoadingView.vue'
 
 const open = defineModel<boolean>({ default: false })
-const fullscreen = ref(true)
-
-watch(open, (value) => {
-  if (value) fullscreen.value = true
-})
 </script>
 
 <template>
@@ -18,38 +11,21 @@ watch(open, (value) => {
     class="smart-loading-dialog"
     title="智能装柜"
     width="min(1600px, 98vw)"
-    :fullscreen="fullscreen"
+    fullscreenable
+    default-fullscreen
     cancel-text="关闭"
     :show-confirm="false"
     destroy-on-close
   >
-    <template #header>
-      <div class="smart-loading-dialog__header">
-        <div class="smart-loading-dialog__heading">
-          <span>智能装柜</span>
-        </div>
-        <el-tooltip :content="fullscreen ? '退出全屏' : '展开全屏'" placement="bottom">
-          <el-button text :aria-label="fullscreen ? '退出全屏' : '展开全屏'" @click="fullscreen = !fullscreen">
-            <Minimize2 v-if="fullscreen" :size="18" />
-            <Maximize2 v-else :size="18" />
-          </el-button>
-        </el-tooltip>
-      </div>
-    </template>
     <GlobalSmartLoadingView embedded />
   </AppDialog>
 </template>
 
 <style scoped>
-:global(.smart-loading-dialog.app-dialog.el-dialog) { width: min(1600px, 98vw); height: 94vh; max-height: 94vh; margin-block: 3vh !important; }
-:global(.smart-loading-dialog.app-dialog.el-dialog.is-fullscreen) { width: 100%; height: 100vh; max-height: 100vh; margin: 0 !important; border-radius: 0; }
+:global(.smart-loading-dialog.app-dialog.el-dialog:not(.is-fullscreen)) { width: min(1600px, 98vw); height: 94vh; max-height: 94vh; margin-block: 3vh !important; }
 :global(.smart-loading-dialog .el-dialog__body) { display: flex; min-height: 0; flex: 1; padding: 0; overflow: hidden; }
 :global(.smart-loading-dialog .app-dialog__body) { display: flex; min-width: 0; min-height: 0; flex: 1; overflow: hidden; }
-.smart-loading-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; color: var(--cc-text); font-size: 18px; font-weight: 600; line-height: 24px; }
-.smart-loading-dialog__heading { display: flex; min-width: 0; align-items: center; gap: 24px; }
-.smart-loading-dialog__heading > span { flex: 0 0 auto; }
-.smart-loading-dialog__header :deep(.el-button) { flex: 0 0 auto; margin-right: 24px; color: var(--cc-muted); }
 @media (max-width: 720px) {
-  :global(.smart-loading-dialog.app-dialog.el-dialog) { width: calc(100vw - 12px); height: calc(100svh - 12px); max-height: calc(100svh - 12px); margin-block: 6px !important; }
+  :global(.smart-loading-dialog.app-dialog.el-dialog:not(.is-fullscreen)) { width: calc(100vw - 12px); height: calc(100svh - 12px); max-height: calc(100svh - 12px); margin-block: 6px !important; }
 }
 </style>