feat(projects): 增加系统布局样式配置

src/layouts/BasicLayout/index.vue

@@ -1,28 +1,47 @@
 <template>
   <n-layout has-sider class="wh-full">
-    <n-layout-sider bordered :collapsed="appStore.collapsed" :collapsed-width="64" collapse-mode="width" :width="220">
+    <n-layout-sider
-      <Logo />
+      bordered
+      :collapsed="appStore.collapsed"
+      :collapsed-width="64"
+      collapse-mode="width"
+      :width="220"
+      :inverted="appStore.invertedSider"
+    >
+      <Logo v-if="appStore.showLogo" />
       <Menu />
     </n-layout-sider>
     <n-layout class="h-full" :native-scrollbar="false" embedded>
-      <n-layout-header bordered class="h-60px flex-y-center justify-between">
+      <n-layout-header
-        <div class="flex-y-center h-full">
+        :position="appStore.fixedHeader ? 'absolute' : 'static'"
-          <CollapaseButton />
+        :inverted="appStore.invertedHeader"
-          <Breadcrumb />
+        class="z-1"
-        </div>
+      >
-        <div class="flex-y-center h-full">
+        <div class="h-60px flex-y-center justify-between">
-          <Reload />
+          <div class="flex-y-center h-full">
-          <!-- <Search /> -->
+            <CollapaseButton />
-          <Notices />
+            <Breadcrumb v-if="appStore.showBreadcrumb" />
-          <Github />
+          </div>
-          <FullScreen />
+          <div class="flex-y-center h-full">
-          <DarkMode />
+            <Reload />
-          <Setting />
+            <!-- <Search /> -->
-          <UserCenter />
+            <Notices />
+            <Github />
+            <FullScreen />
+            <DarkMode />
+            <Setting />
+            <UserCenter />
+          </div>
         </div>
       </n-layout-header>
-      <n-layout-header class="h-45px"><TabBar /></n-layout-header>
+      <n-layout-header
-      <div class="p-16px p-b-52px">
+        :position="appStore.fixedHeader ? 'absolute' : 'static'"
+        class="z-1"
+        :class="{ 'm-t-60px': appStore.fixedHeader }"
+      >
+        <TabBar v-if="appStore.showTabs" class="h-45px" />
+      </n-layout-header>
+      <div class="p-16px" :class="{ 'p-t-121px': appStore.fixedHeader, 'p-b-56px': appStore.fixedFooter }">
         <n-layout-content class="bg-transparent">
           <router-view v-slot="{ Component }">
             <transition name="fade-slide" appear mode="out-in">
@@ -32,7 +51,7 @@
         </n-layout-content>
         <BackTop />
       </div>
-      <n-layout-footer position="absolute" bordered class="flex-center h-40px">
+      <n-layout-footer :position="appStore.fixedFooter ? 'absolute' : 'static'" bordered class="flex-center h-40px">
         {{ appStore.footerText }}
       </n-layout-footer>
     </n-layout>

src/layouts/components/header/CollapaseButton.vue

@@ -1,8 +1,13 @@
 <template>
-  <HeaderButton @click="appStore.toggleCollapse()">
+  <n-tooltip placement="bottom" trigger="hover">
-    <i-icon-park-outline-menu-unfold v-if="appStore.collapsed" />
+    <template #trigger>
-    <i-icon-park-outline-menu-fold v-else />
+      <HeaderButton @click="appStore.toggleCollapse()">
-  </HeaderButton>
+        <i-icon-park-outline-menu-unfold v-if="appStore.collapsed" />
+        <i-icon-park-outline-menu-fold v-else />
+      </HeaderButton>
+    </template>
+    <span>切换侧边栏</span>
+  </n-tooltip>
 </template>
 
 <script setup lang="ts">

src/layouts/components/header/Github.vue

@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import HeaderButton from '../common/HeaderButton.vue';
 const toMyGithub = () => {
-  window.open('https://github.com/chen-see');
+  window.open('https://github.com/iam-see');
 };
 </script>
 

src/layouts/components/header/Setting.vue

@@ -4,8 +4,55 @@
       <HeaderButton @click="openSetting">
         <div>
           <i-icon-park-outline-setting-two />
-          <n-drawer v-model:show="drawerActive" :width="300">
+          <n-drawer v-model:show="drawerActive" :width="400">
-            <n-drawer-content title="系统设置">这是系统设置，但是暂时还没有内容</n-drawer-content>
+            <n-drawer-content title="系统设置">
+              <n-divider>主题设置</n-divider>
+              <n-space vertical>
+                <n-space justify="space-between">
+                  深色模式
+                  <n-switch :value="appStore.darkMode" @update:value="appStore.toggleDarkMode()" />
+                </n-space>
+                <n-space justify="space-between">
+                  色弱模式
+                  <n-switch :value="appStore.colorWeak" @update:value="appStore.toggleColorWeak()" />
+                </n-space>
+                <n-space justify="space-between">
+                  灰色模式
+                  <n-switch :value="appStore.grayMode" @update:value="appStore.toggleGrayMode()" />
+                </n-space>
+              </n-space>
+              <n-divider>界面显示</n-divider>
+              <n-space vertical>
+                <n-space justify="space-between">
+                  LOGO显示
+                  <n-switch :value="appStore.showLogo" @update:value="appStore.toggleShowLogo()" />
+                </n-space>
+                <n-space justify="space-between">
+                  多页签
+                  <n-switch :value="appStore.showTabs" @update:value="appStore.toggleShowTabs()" />
+                </n-space>
+                <n-space justify="space-between">
+                  面包屑
+                  <n-switch :value="appStore.showBreadcrumb" @update:value="appStore.toggleShowBreadcrumb()" />
+                </n-space>
+                <n-space justify="space-between">
+                  固定头部和多页签
+                  <n-switch :value="appStore.fixedHeader" @update:value="appStore.toggleFixedHeader()" />
+                </n-space>
+                <n-space justify="space-between">
+                  固定底部
+                  <n-switch :value="appStore.fixedFooter" @update:value="appStore.toggleFixedFooter()" />
+                </n-space>
+                <n-space justify="space-between">
+                  侧边栏反转色
+                  <n-switch :value="appStore.invertedSider" @update:value="appStore.toggleInvertedSider()" />
+                </n-space>
+                <n-space justify="space-between">
+                  头部反转色
+                  <n-switch :value="appStore.invertedHeader" @update:value="appStore.toggleInvertedHeader()" />
+                </n-space>
+              </n-space>
+            </n-drawer-content>
           </n-drawer>
         </div>
       </HeaderButton>
@@ -16,9 +63,9 @@
 
 <script setup lang="ts">
 import HeaderButton from '../common/HeaderButton.vue';
-// import { useAppStore } from '@/store';
 import { ref } from 'vue';
-// const appStore = useAppStore();
+import { useAppStore } from '@/store';
+const appStore = useAppStore();
 
 const drawerActive = ref(false);
 const openSetting = () => {

src/layouts/components/tab/TabBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="wh-full flex items-end">
+  <div class="wh-full flex items-end tabs">
     <n-tabs type="card" size="small" :tabs-padding="15" :value="tabStore.currentTab" @close="handleClose">
       <n-tab v-for="item in tabStore.inherentTab" :key="item.path" :name="item.name" @click="toRoot">
         {{ item.title }}
@@ -34,4 +34,8 @@ const handleClose = (name: string) => {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.tabs {
+  box-shadow: inset 0px 5px 10px #b2c0d277;
+}
+</style>

src/store/modules/app.ts

@@ -8,20 +8,40 @@ interface AppStatus {
   collapsed: boolean;
   fullScreen: boolean;
   darkMode: boolean;
+  grayMode: boolean;
+  colorWeak: boolean;
   darkTheme: GlobalTheme | null;
   loadFlag: boolean;
+  showLogo: boolean;
+  showTabs: boolean;
+  showBreadcrumb: boolean;
+  fixedHeader: boolean;
+  fixedFooter: boolean;
+  invertedSider: boolean;
+  invertedHeader: boolean;
 }
 
+const docEle = document.documentElement;
+
 export const useAppStore = defineStore('app-store', {
   state: (): AppStatus => {
     return {
       title: import.meta.env.VITE_APP_TITLE,
-      footerText: '哲学的基本问题是思维和存在的关系问题',
+      footerText: 'Copyright ©2022 Ench Admin',
       collapsed: false,
       fullScreen: false,
       darkMode: false,
+      grayMode: false,
+      colorWeak: false,
       darkTheme: null,
       loadFlag: true,
+      showLogo: true,
+      showTabs: true,
+      showBreadcrumb: true,
+      fixedHeader: false,
+      fixedFooter: true,
+      invertedSider: false,
+      invertedHeader: false,
     };
   },
   actions: {
@@ -64,5 +84,43 @@ export const useAppStore = defineStore('app-store', {
         this.loadFlag = true;
       }
     },
+    /* 切换色弱模式 */
+    toggleColorWeak() {
+      docEle.classList.toggle('color-weak');
+      this.colorWeak = docEle.classList.contains('color-weak');
+    },
+    /* 切换灰色模式 */
+    toggleGrayMode() {
+      docEle.classList.toggle('gray-mode');
+      this.grayMode = docEle.classList.contains('gray-mode');
+    },
+    /* 切换显示logo */
+    toggleShowLogo() {
+      this.showLogo = !this.showLogo;
+    },
+    /* 切换显示多页签 */
+    toggleShowTabs() {
+      this.showTabs = !this.showTabs;
+    },
+    /* 切换显示多页签 */
+    toggleShowBreadcrumb() {
+      this.showBreadcrumb = !this.showBreadcrumb;
+    },
+    /* 切换固定头部和标签页 */
+    toggleFixedHeader() {
+      this.fixedHeader = !this.fixedHeader;
+    },
+    /* 切换固定底部 */
+    toggleFixedFooter() {
+      this.fixedFooter = !this.fixedFooter;
+    },
+    /* 切换固定底部 */
+    toggleInvertedSider() {
+      this.invertedSider = !this.invertedSider;
+    },
+    /* 切换固定底部 */
+    toggleInvertedHeader() {
+      this.invertedHeader = !this.invertedHeader;
+    },
   },
 });

src/styles/css/index.css

@@ -6,3 +6,10 @@ body,
 #app {
   height: 100%;
 }
+.color-weak {
+  filter: invert(80%);
+}
+
+.gray-mode {
+  filter: grayscale(100%);
+}

src/views/login/index.vue

@@ -1,69 +1,61 @@
 <template>
-  <div flex-center wh-full bg-hex-F3F4F6>
+  <div class="flex-center wh-full">
-    <n-carousel autoplay trigger="hover" dot-type="line" effect="fade" class="w-3/4">
+    <n-carousel autoplay trigger="hover" dot-type="line" effect="fade">
       <img v-for="(item, index) in swiperList" :key="index" class="wh-full object-cover" :src="item" />
     </n-carousel>
-    <div flex-1 flex-center>
+    <div class="h-xl py-10 px-6xl rounded-lg backdrop-blur-md shadow-md fixed bg-hex-ffffffd5 op-90">
-      <div w-full h-xl px-6xl>
+      <n-h1 class="c-blue">
-        <n-h1 c-blue>
+        <i-icon-park-outline-plastic-surgery />
-          <i-icon-park-outline-plastic-surgery />
+        Ench Admin
-          Ench Admin
+      </n-h1>
-        </n-h1>
+      <n-p depth="3">高效、简约、可能对你有点帮助</n-p>
-        <n-p depth="3">高效、简约、可能对你有点帮助</n-p>
+      <n-form ref="formRef" :rules="rules" :model="formValue" :show-label="false" size="large">
-        <n-form ref="formRef" :rules="rules" :model="formValue" :show-label="false" size="large">
+        <n-form-item path="account">
-          <n-form-item path="account">
+          <n-input v-model:value="formValue.account" placeholder="输入账号">
-            <n-input v-model:value="formValue.account" placeholder="输入账号" round>
+            <template #prefix>
+              <i-icon-park-outline-woman />
+            </template>
+          </n-input>
+        </n-form-item>
+        <n-form-item path="pwd">
+          <n-input v-model:value="formValue.pwd" type="password" placeholder="输入密码" show-password-on="click">
+            <template #prefix>
+              <i-icon-park-outline-lock />
+            </template>
+            <template #password-invisible-icon>
+              <i-icon-park-outline-preview-close-one />
+            </template>
+            <template #password-visible-icon>
+              <i-icon-park-outline-preview-open />
+            </template>
+          </n-input>
+        </n-form-item>
+        <n-form-item path="code">
+          <n-space align="center">
+            <n-input v-model:value="formValue.code" placeholder="输入验证码">
               <template #prefix>
-                <i-icon-park-outline-woman />
+                <i-icon-park-outline-message />
               </template>
             </n-input>
-          </n-form-item>
+            <span>验证码什么的</span>
-          <n-form-item path="pwd">
-            <n-input
-              v-model:value="formValue.pwd"
-              type="password"
-              placeholder="输入密码"
-              show-password-on="click"
-              round
-            >
-              <template #prefix>
-                <i-icon-park-outline-lock />
-              </template>
-              <template #password-invisible-icon>
-                <i-icon-park-outline-preview-close-one />
-              </template>
-              <template #password-visible-icon>
-                <i-icon-park-outline-preview-open />
-              </template>
-            </n-input>
-          </n-form-item>
-          <n-form-item path="code">
-            <n-space align="center">
-              <n-input v-model:value="formValue.code" placeholder="输入验证码" round>
-                <template #prefix>
-                  <i-icon-park-outline-message />
-                </template>
-              </n-input>
-              <span>验证码什么的</span>
-            </n-space>
-          </n-form-item>
-          <n-space vertical :size="24">
-            <div class="flex-y-center justify-between">
-              <n-checkbox>记住我</n-checkbox>
-              <n-button :text="true">忘记密码？</n-button>
-            </div>
-            <n-button w-full type="primary" round size="large" :loading="authStore.loginLoading" @click="handleLogin">
-              <template #icon>
-                <n-icon>
-                  <i-icon-park-outline-six-points />
-                </n-icon>
-              </template>
-              登录
-            </n-button>
           </n-space>
-        </n-form>
+        </n-form-item>
-        <n-divider><span op-50>其他登录</span></n-divider>
+        <n-space vertical :size="24">
-      </div>
+          <div class="flex-y-center justify-between">
+            <n-checkbox>记住我</n-checkbox>
+            <n-button :text="true">忘记密码？</n-button>
+          </div>
+          <n-button w-full type="primary" size="large" :loading="authStore.loginLoading" @click="handleLogin">
+            <template #icon>
+              <n-icon>
+                <i-icon-park-outline-six-points />
+              </n-icon>
+            </template>
+            登录
+          </n-button>
+        </n-space>
+      </n-form>
+      <n-divider><span op-80>其他登录</span></n-divider>
     </div>
   </div>
 </template>
@@ -74,12 +66,12 @@ import { useAuthStore } from '@/store';
 import { ref } from 'vue';
 
 const authStore = useAuthStore();
-const swiperList = ref([
+const swiperList = [
   'https://images.unsplash.com/photo-1546414809-22c82b5e2ad4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
   'https://images.unsplash.com/photo-1659533982925-09cb4f3f7876?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1473&q=80',
   'https://images.unsplash.com/photo-1630771077377-674b39a13f58?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
   'https://images.unsplash.com/photo-1543782248-03e2c5a93e18?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80',
-]);
+];
 
 const formValue = ref({
   account: 'admin',