feat: 制作全屏需求

src/api/fuse-model.ts

@@ -132,9 +132,10 @@ const localToService = (
 export type FuseModels = FuseModel[];
 
 export const fetchFuseModels = async () => {
-  const serviceModels = await axios.get<ServiceFuseModel[]>(FUSE_MODEL_LIST, {
+  let serviceModels = await axios.get<ServiceFuseModel[]>(FUSE_MODEL_LIST, {
     params: { fusionId: params.caseId },
   });
+  serviceModels = serviceModels.slice(0, 1)
   return serviceModels.map((item, index) => serviceToLocal(item, index == 0));
 };
 

src/app.vue

@@ -84,7 +84,13 @@
 </template>
 
 <script lang="ts" setup>
-import { custom, params } from "@/env";
+import {
+  custom,
+  params,
+  showLeftPanoStack,
+  showRightCtrlPanoStack,
+  showRightPanoStack,
+} from "@/env";
 import { computed, ref, watch, watchEffect, nextTick } from "vue";
 import {
   isEdit,
@@ -105,6 +111,7 @@ import { sdk, sdkLoaded } from "./sdk";
 import GAxios from "axios";
 
 import { addReqErrorHandler, addResErrorHandler, ResCode, setToken } from "./api";
+import { mergeFuns } from "./components/drawing/hook";
 
 const gotoLogin = () => {
   if (import.meta.env.DEV) {
@@ -182,6 +189,7 @@ const layoutClassNames = computed(() => {
     "setting-mode": custom.showToolbar,
     "hide-right-box-mode": !custom.showRightPano,
     "hide-left-box-mode": !custom.showLeftPano,
+    "full-view": custom.full,
     "show-bottom-box-mode": custom.showBottomBar,
     "hide-top-bar-mode": !custom.showHeadBar,
   };
@@ -225,6 +233,22 @@ const login = (username: string, password: string) => {
     }
   });
 };
+
+watch(
+  () => custom.full,
+  (full, _, onCleanup) => {
+    if (full) {
+      onCleanup(
+        mergeFuns(
+          showRightPanoStack.push(ref(false)),
+          showLeftPanoStack.push(ref(false)),
+          showRightCtrlPanoStack.push(ref(false)),
+          showRightCtrlPanoStack.push(ref(false))
+        )
+      );
+    }
+  }
+);
 </script>
 
 <style scoped lang="scss">
@@ -306,3 +330,9 @@ const login = (username: string, password: string) => {
   }
 }
 </style>
+
+<style lang="scss">
+.full-view #global-search {
+  left: 20px !important;
+}
+</style>

src/components/bill-ui/components/icon/iconfont/demo_index.html

@@ -55,6 +55,66 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon iconfont">&#xe7bf;</span>
+                <div class="name">orientation</div>
+                <div class="code-name">&amp;#xe7bf;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7b4;</span>
+                <div class="name">window_n</div>
+                <div class="code-name">&amp;#xe7b4;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7b5;</span>
+                <div class="name">window_m</div>
+                <div class="code-name">&amp;#xe7b5;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7b2;</span>
+                <div class="name">screen_s</div>
+                <div class="code-name">&amp;#xe7b2;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7b3;</span>
+                <div class="name">3D_scence</div>
+                <div class="code-name">&amp;#xe7b3;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7af;</span>
+                <div class="name">media</div>
+                <div class="code-name">&amp;#xe7af;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7b0;</span>
+                <div class="name">rename</div>
+                <div class="code-name">&amp;#xe7b0;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7b1;</span>
+                <div class="name">display</div>
+                <div class="code-name">&amp;#xe7b1;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe79e;</span>
+                <div class="name">line_d</div>
+                <div class="code-name">&amp;#xe79e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe79d;</span>
+                <div class="name">a-label_s</div>
+                <div class="code-name">&amp;#xe79d;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xe79c;</span>
                 <div class="name">guide_p</div>
                 <div class="code-name">&amp;#xe79c;</div>
@@ -732,9 +792,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1743650860151') format('woff2'),
-       url('iconfont.woff?t=1743650860151') format('woff'),
-       url('iconfont.ttf?t=1743650860151') format('truetype');
+  src: url('iconfont.woff2?t=1756279097633') format('woff2'),
+       url('iconfont.woff?t=1756279097633') format('woff'),
+       url('iconfont.ttf?t=1756279097633') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -761,6 +821,96 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon iconfont icon-orientation"></span>
+            <div class="name">
+              orientation
+            </div>
+            <div class="code-name">.icon-orientation
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-window_n"></span>
+            <div class="name">
+              window_n
+            </div>
+            <div class="code-name">.icon-window_n
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-window_m"></span>
+            <div class="name">
+              window_m
+            </div>
+            <div class="code-name">.icon-window_m
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-screen_s"></span>
+            <div class="name">
+              screen_s
+            </div>
+            <div class="code-name">.icon-screen_s
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-a-3D_scence"></span>
+            <div class="name">
+              3D_scence
+            </div>
+            <div class="code-name">.icon-a-3D_scence
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-media"></span>
+            <div class="name">
+              media
+            </div>
+            <div class="code-name">.icon-media
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-rename"></span>
+            <div class="name">
+              rename
+            </div>
+            <div class="code-name">.icon-rename
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-display"></span>
+            <div class="name">
+              display
+            </div>
+            <div class="code-name">.icon-display
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-line_d"></span>
+            <div class="name">
+              line_d
+            </div>
+            <div class="code-name">.icon-line_d
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-a-label_s"></span>
+            <div class="name">
+              a-label_s
+            </div>
+            <div class="code-name">.icon-a-label_s
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont icon-guide_p"></span>
             <div class="name">
               guide_p
@@ -1779,6 +1929,86 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-orientation"></use>
+                </svg>
+                <div class="name">orientation</div>
+                <div class="code-name">#icon-orientation</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-window_n"></use>
+                </svg>
+                <div class="name">window_n</div>
+                <div class="code-name">#icon-window_n</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-window_m"></use>
+                </svg>
+                <div class="name">window_m</div>
+                <div class="code-name">#icon-window_m</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-screen_s"></use>
+                </svg>
+                <div class="name">screen_s</div>
+                <div class="code-name">#icon-screen_s</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-a-3D_scence"></use>
+                </svg>
+                <div class="name">3D_scence</div>
+                <div class="code-name">#icon-a-3D_scence</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-media"></use>
+                </svg>
+                <div class="name">media</div>
+                <div class="code-name">#icon-media</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-rename"></use>
+                </svg>
+                <div class="name">rename</div>
+                <div class="code-name">#icon-rename</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-display"></use>
+                </svg>
+                <div class="name">display</div>
+                <div class="code-name">#icon-display</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-line_d"></use>
+                </svg>
+                <div class="name">line_d</div>
+                <div class="code-name">#icon-line_d</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-a-label_s"></use>
+                </svg>
+                <div class="name">a-label_s</div>
+                <div class="code-name">#icon-a-label_s</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-guide_p"></use>
                 </svg>
                 <div class="name">guide_p</div>

src/components/bill-ui/components/icon/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4647199 */
-  src: url('iconfont.woff2?t=1743650860151') format('woff2'),
-       url('iconfont.woff?t=1743650860151') format('woff'),
-       url('iconfont.ttf?t=1743650860151') format('truetype');
+  src: url('iconfont.woff2?t=1756279097633') format('woff2'),
+       url('iconfont.woff?t=1756279097633') format('woff'),
+       url('iconfont.ttf?t=1756279097633') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,46 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-orientation:before {
+  content: "\e7bf";
+}
+
+.icon-window_n:before {
+  content: "\e7b4";
+}
+
+.icon-window_m:before {
+  content: "\e7b5";
+}
+
+.icon-screen_s:before {
+  content: "\e7b2";
+}
+
+.icon-a-3D_scence:before {
+  content: "\e7b3";
+}
+
+.icon-media:before {
+  content: "\e7af";
+}
+
+.icon-rename:before {
+  content: "\e7b0";
+}
+
+.icon-display:before {
+  content: "\e7b1";
+}
+
+.icon-line_d:before {
+  content: "\e79e";
+}
+
+.icon-a-label_s:before {
+  content: "\e79d";
+}
+
 .icon-guide_p:before {
   content: "\e79c";
 }

src/components/bill-ui/components/icon/iconfont/iconfont.json

@@ -6,6 +6,76 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "45357208",
+      "name": "orientation",
+      "font_class": "orientation",
+      "unicode": "e7bf",
+      "unicode_decimal": 59327
+    },
+    {
+      "icon_id": "44890707",
+      "name": "window_n",
+      "font_class": "window_n",
+      "unicode": "e7b4",
+      "unicode_decimal": 59316
+    },
+    {
+      "icon_id": "44890706",
+      "name": "window_m",
+      "font_class": "window_m",
+      "unicode": "e7b5",
+      "unicode_decimal": 59317
+    },
+    {
+      "icon_id": "44889955",
+      "name": "screen_s",
+      "font_class": "screen_s",
+      "unicode": "e7b2",
+      "unicode_decimal": 59314
+    },
+    {
+      "icon_id": "44889954",
+      "name": "3D_scence",
+      "font_class": "a-3D_scence",
+      "unicode": "e7b3",
+      "unicode_decimal": 59315
+    },
+    {
+      "icon_id": "44887769",
+      "name": "media",
+      "font_class": "media",
+      "unicode": "e7af",
+      "unicode_decimal": 59311
+    },
+    {
+      "icon_id": "44887770",
+      "name": "rename",
+      "font_class": "rename",
+      "unicode": "e7b0",
+      "unicode_decimal": 59312
+    },
+    {
+      "icon_id": "44887771",
+      "name": "display",
+      "font_class": "display",
+      "unicode": "e7b1",
+      "unicode_decimal": 59313
+    },
+    {
+      "icon_id": "43973886",
+      "name": "line_d",
+      "font_class": "line_d",
+      "unicode": "e79e",
+      "unicode_decimal": 59294
+    },
+    {
+      "icon_id": "43913586",
+      "name": "a-label_s",
+      "font_class": "a-label_s",
+      "unicode": "e79d",
+      "unicode_decimal": 59293
+    },
+    {
       "icon_id": "43886962",
       "name": "guide_p",
       "font_class": "guide_p",

src/env/index.ts

@@ -19,6 +19,7 @@ export const showTaggingsStack = stackFactory(ref<boolean>(true));
 export const showMonitorsStack = stackFactory(ref<boolean>(true));
 export const showPathsStack = stackFactory(ref<boolean>(true));
 export const showSearchStack = stackFactory(ref<boolean>(true));
+export const showFullStack = stackFactory(ref(false));
 export const showPathStack = stackFactory(ref<Path["id"]>());
 export const showModeTabStack = stackFactory(ref<boolean>(true));
 
@@ -60,7 +61,8 @@ export const custom = flatStacksValue({
   currentView: currentViewStack,
   showMode: showModeStack,
   showSearch: showSearchStack,
-  showViewSetting: showViewSettingStack
+  showViewSetting: showViewSettingStack,
+  full: showFullStack
 });
 
 export const params = reactive(

src/layout/edit/fuse-edit.vue

@@ -1,8 +1,7 @@
 <template>
   <template v-if="loaded" style="height: 100%">
     <Header></Header>
-    <GlobalSearch />
-    {{ fuseModels.length }}
+    <GlobalSearch :enable="fuseModels.length === 0 ? 'map-' : undefined" />
     <template v-if="fuseModels.length">
       <router-view v-slot="{ Component }">
         <!-- <keep-alive> -->

src/layout/edit/fuse-switch.vue

@@ -1,5 +1,5 @@
 <template>
-  <SlideMenu />
+  <SlideMenu v-if="!custom.full" />
   <ModelList v-if="!showSceneList" />
   <LeftPano v-else>
     <SceneList :current="currentModel" @update:current="loadModel" />
@@ -20,6 +20,7 @@ import ModelList from "./fuse-left-pano.vue";
 import { computed, watch, watchEffect } from "vue";
 import router from "@/router";
 import { currentModel, fuseModel, loadModel } from "@/model";
+import { custom } from "@/env";
 
 const showSceneList = computed(
   () => router.currentRoute.value.meta.left === "scene-list"

src/layout/edit/header/index.vue

@@ -5,15 +5,15 @@
     </div>
 
     <div class="control">
+      <ui-icon
+        style="margin-right: 10px"
+        :type="custom.full ? 'window_n' : 'window_m'"
+        ctrl
+        @click="custom.full = !custom.full"
+      />
       <template v-if="isEdit">
         <ui-button width="105px" @click="leave">退出</ui-button>
-        <ui-button 
-          width="105px" 
-          type="primary" 
-          class="save" 
-          v-if="isOld"
-          @click="save"
-        >
+        <ui-button width="105px" type="primary" class="save" v-if="isOld" @click="save">
           保存
         </ui-button>
       </template>
@@ -22,11 +22,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { isEdit, title, isOld, leave, save } from '@/store'
+import { computed, ref } from "vue";
+import { isEdit, title, isOld, leave, save } from "@/store";
+import { custom } from "@/env";
 
-const props = defineProps<{ title?: string }>()
-const sysTitle = computed(() => props.title || title.value)
+const props = defineProps<{ title?: string }>();
+const sysTitle = computed(() => props.title || title.value);
 </script>
 
 <style lang="sass" scoped>

src/layout/left-pano.vue

@@ -1,16 +1,18 @@
 <template>
   <div id="left-pano" v-if="custom.moundLeftPano || show">
-    <span
-      class="ctrl-pano-c fun-ctrl strengthen-right strengthen-top strengthen-bottom"
-      v-if="custom.viewMode !== 'full' && custom.showLeftCtrlPano"
-      @click="custom.showLeftPano = !custom.showLeftPano"
-      :class="{ active: custom.showLeftPano }"
-    >
-      <ui-icon type="extend" class="icon"></ui-icon>
-    </span>
-    <div class="left-pano strengthen-right">
-      <slot></slot>
-    </div>
+    <template v-if="!custom.full">
+      <span
+        class="ctrl-pano-c fun-ctrl strengthen-right strengthen-top strengthen-bottom"
+        v-if="custom.viewMode !== 'full' && custom.showLeftCtrlPano"
+        @click="custom.showLeftPano = !custom.showLeftPano"
+        :class="{ active: custom.showLeftPano }"
+      >
+        <ui-icon type="extend" class="icon"></ui-icon>
+      </span>
+      <div class="left-pano strengthen-right">
+        <slot></slot>
+      </div>
+    </template>
     <ModeTab />
   </div>
 </template>

src/layout/right-fill-pano.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="right-pano">
+  <div id="right-pano" v-if="!custom.full">
     <span
       class="ctrl-pano-c fun-ctrl strengthen-left strengthen-top strengthen-bottom"
       v-if="custom.shwoRightCtrlPano && custom.viewMode !== 'full'"

src/layout/right-pano.vue

@@ -1,5 +1,9 @@
+<script setup lang="ts">
+import { custom } from "@/env";
+</script>
+
 <template>
-  <div class="right-pano strengthen-right" id="right-pano">
+  <div class="right-pano strengthen-right" id="right-pano" >
     <slot></slot>
   </div>
 </template>
@@ -8,15 +12,15 @@
 .right-pano {
   position: absolute;
   width: 340px;
-  background: rgba(27,27,28,0.8);
+  background: rgba(27, 27, 28, 0.8);
   backdrop-filter: blur(4px);
   top: calc(var(--editor-head-height) + var(--header-top) + 20px);
   right: 20px;
   z-index: 5;
   overflow-y: auto;
-  transition: all .3s ease;
-  max-height: calc(100% - ( var(--editor-head-height) + var(--header-top) + 40px ));
+  transition: all 0.3s ease;
+  max-height: calc(100% - (var(--editor-head-height) + var(--header-top) + 40px));
   padding: 20px;
   border-radius: 4px;
 }
-</style>
+</style>