feat(layouts): ✨ 全屏

jsxiaosi · Nov 5, 2022 · edb9602 · edb9602
1 parent efb52da
commit edb9602
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 33 deletions.
diff --git a/src/components/Application/AppAccount.vue b/src/components/Application/AppAccount.vue
@@ -28,7 +28,6 @@
 
 <style lang="scss" scoped>
   .account {
-    margin-left: 12px;
     .wave {
       width: 30px;
       height: 30px;

diff --git a/src/components/Application/AppLocale.vue b/src/components/Application/AppLocale.vue
@@ -10,29 +10,16 @@
     i18n.locale.value = key;
     appStore.setAppConfigMode({ ...appStore.appConfigMode, locale: key });
   };
-
-  // const options = ref([
-  // 	{ name: '123', value: 'variables-theme-day' },
-  // 	{ name: '456', value: 'variables-theme-dark' },
-  // ])
-
-  // const value = ref()
-
-  // const toggleTheme = (scopeName = 'theme-default') => {
-  // 	document.documentElement.className = scopeName
-  // }
 </script>
 
 <template>
   <el-dropdown trigger="click" @command="tolochos">
-    <span>
-      <SvgIcon class="icon cursor" name="locales"></SvgIcon>
-    </span>
+    <SvgIcon class="icon cursor" name="locales"></SvgIcon>
     <template #dropdown>
       <el-dropdown-menu>
-        <el-dropdown-item v-for="item in localesList" :key="item.locale" :command="item.locale">{{
-          item.name
-        }}</el-dropdown-item>
+        <el-dropdown-item v-for="item in localesList" :key="item.locale" :command="item.locale">
+          {{ item.name }}
+        </el-dropdown-item>
       </el-dropdown-menu>
     </template>
   </el-dropdown>
@@ -41,6 +28,6 @@
 <style lang="scss" scoped>
   .icon {
     color: var(--text-color-primary);
-    font-size: 1em;
+    font-size: var(--font-size-extra-large);
   }
 </style>
diff --git a/src/components/Application/AppTheme.vue b/src/components/Application/AppTheme.vue
@@ -44,15 +44,15 @@
 <style lang="scss" scoped>
   .theme {
     position: relative;
-    width: 50px;
+    width: 52px;
     height: 26px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     background-color: 151515;
     border: 1px solid var(--text-color-primary);
     padding: 0 6px;
-    font-size: 1em;
+    font-size: 0.8em;
     border-radius: 30px;
     .theme-inner {
       position: absolute;

diff --git a/src/layouts/pageLayouts/components/AppTabs/index.vue b/src/layouts/pageLayouts/components/AppTabs/index.vue
@@ -88,6 +88,9 @@
     </transition>
     <div class="right-button">
       <ul>
+        <!-- <li class="cursor" @click="fullScreenChange">
+          <SvgIcon name="iEL-full-screen"></SvgIcon>
+        </li> -->
         <li class="cursor" @click="onFresh()">
           <SvgIcon class="rotate" name="iEL-refresh"></SvgIcon>
         </li>
@@ -200,11 +203,13 @@
         display: flex;
         li {
           width: $tabsPageHeight;
-          height: 100%;
           text-align: center;
-          line-height: $tabsPageHeight;
+          height: $tabsPageHeight;
           font-size: var(--font-size-medium);
-          border: 1px solid var(--border-color-light);
+          border-left: 1px solid var(--border-color-light);
+          display: flex;
+          align-items: center;
+          justify-content: center;
           .action-item {
             height: $tabsPageHeight;
           }

diff --git a/src/layouts/pageLayouts/components/Navbart/index.vue b/src/layouts/pageLayouts/components/Navbart/index.vue
@@ -17,6 +17,15 @@
 
   const appStore = useAppStoreHook();
   const appConfigMode = toRef(appStore, 'appConfigMode');
+
+  const fullScreenChange = () => {
+    // https://developer.mozilla.org/zh-CN/docs/Web/API/Document/exitFullscreen
+    if (document.fullscreenElement) {
+      document.exitFullscreen();
+    } else {
+      document.documentElement.requestFullscreen();
+    }
+  };
 </script>
 
 <template>
@@ -46,10 +55,11 @@
       </template>
     </div>
     <div class="navbar-right">
-      <AppTheme></AppTheme>
+      <SvgIcon class="cursor" name="iEL-full-screen" @click="fullScreenChange"></SvgIcon>
       <AppLocale class="icon"></AppLocale>
+      <AppTheme></AppTheme>
       <AppAccount></AppAccount>
-      <SvgIcon class="icon cursor" name="iEL-setting" @click="drawer = true"></SvgIcon>
+      <SvgIcon class="cursor" name="iEL-setting" @click="drawer = true"></SvgIcon>
     </div>
 
     <Setting v-model:modelValue="drawer"></Setting>
@@ -84,14 +94,11 @@
     }
 
     .navbar-right {
-      display: flex;
-      // flex: 1;
+      display: grid;
+      grid-auto-flow: column;
       align-items: center;
-
-      .icon {
-        margin-left: 12px;
-        font-size: var(--font-size-extra-large);
-      }
+      grid-gap: 12px;
+      font-size: var(--font-size-extra-large);
     }
   }
 </style>
diff --git a/src/utils/plugin/element.ts b/src/utils/plugin/element.ts
@@ -59,6 +59,7 @@ import {
   Management,
   Select,
   ArrowRight,
+  FullScreen,
 } from '@element-plus/icons-vue';
 
 // Directives
@@ -121,6 +122,7 @@ export const iconComponents = [
   Management,
   Select,
   ArrowRight,
+  FullScreen,
 ];
 
 export function useElementPlus(app: App) {