style(projects): per style [完善样式]

src/layouts/basic-layout/index.vue

@@ -15,6 +15,7 @@
     :sider-collapsed-width="siderCollapsedWidth"
     :footer-visible="theme.footer.visible"
     :fixed-footer="theme.footer.fixed"
+    :right-footer="theme.footer.right"
   >
     <template #header>
       <global-header v-bind="headerProps" />
@@ -48,4 +49,12 @@ const theme = useThemeStore();
 const { mode, headerProps, siderVisible, siderWidth, siderCollapsedWidth } = useBasicLayout();
 </script>
 
-<style scoped></style>
+<style lang="scss">
+#__SCROLL_EL_ID__ {
+  @include scrollbar(8px, #e1e1e1);
+}
+
+.dark #__SCROLL_EL_ID__ {
+  @include scrollbar(8px, #555);
+}
+</style>

src/layouts/common/global-content/index.vue

@@ -13,7 +13,7 @@
           v-if="app.reloadFlag"
           :key="route.fullPath"
           :class="{ 'p-16px': showPadding }"
-          class="flex-grow bg-[#f6f9f8] dark:bg-[#101014] transition duration-300 ease-in-out"
+          class="flex-grow bg-#f6f9f8 dark:bg-#101014 transition duration-300 ease-in-out"
         />
       </keep-alive>
     </transition>

src/layouts/common/global-footer/index.vue

@@ -1,11 +1,15 @@
 <template>
-  <dark-mode-container class="flex-center h-full">
+  <dark-mode-container class="flex-center h-full" :inverted="theme.footer.inverted">
     <span>Copyright ©2021 Soybean Admin</span>
   </dark-mode-container>
 </template>
 
 <script setup lang="ts">
+import { useThemeStore } from '@/store';
+
 defineOptions({ name: 'GlobalFooter' });
+
+const theme = useThemeStore();
 </script>
 
 <style scoped></style>

src/layouts/common/global-header/components/message-list.vue

@@ -4,7 +4,7 @@
       <n-list-item
         v-for="(item, index) in list"
         :key="item.id"
-        class="hover:bg-[#f6f6f6] dark:hover:bg-dark cursor-pointer"
+        class="hover:bg-#f6f6f6 dark:hover:bg-dark cursor-pointer"
         @click="handleRead(index)"
       >
         <n-thing class="px-15px" :class="{ 'opacity-30': item.isRead }">

src/layouts/common/global-search/components/search-modal.vue

@@ -12,7 +12,7 @@
     <n-input-group>
       <n-input ref="inputRef" v-model:value="keyword" clearable placeholder="请输入关键词搜索" @input="handleSearch">
         <template #prefix>
-          <icon-uil-search class="text-15px text-[#c2c2c2]" />
+          <icon-uil-search class="text-15px text-#c2c2c2" />
         </template>
       </n-input>
       <n-button v-if="isMobile" type="primary" ghost @click="handleClose">取消</n-button>

src/layouts/common/global-search/components/search-result.vue

@@ -3,7 +3,7 @@
     <div class="pb-12px">
       <template v-for="item in options" :key="item.path">
         <div
-          class="bg-[#e5e7eb] dark:bg-dark h-56px mt-8px px-14px rounded-4px cursor-pointer flex-y-center justify-between"
+          class="bg-#e5e7eb dark:bg-dark h-56px mt-8px px-14px rounded-4px cursor-pointer flex-y-center justify-between"
           :style="{
             background: item.path === active ? theme.themeColor : '',
             color: item.path === active ? '#fff' : ''

src/layouts/common/global-sider/components/vertical-mix-sider/components/mix-menu-drawer.vue

@@ -5,6 +5,7 @@
   >
     <dark-mode-container
       class="drawer-shadow absolute-lt flex-col-stretch h-full nowrap-hidden"
+      :inverted="theme.sider.inverted"
       :style="{ width: showDrawer ? theme.sider.mixChildMenuWidth + 'px' : '0px' }"
     >
       <header class="header-height flex-y-center justify-between" :style="{ height: theme.header.height + 'px' }">
@@ -20,6 +21,7 @@
           :options="menus"
           :expanded-keys="expandedKeys"
           :indent="18"
+          :inverted="!theme.darkMode && theme.sider.inverted"
           @update:value="handleUpdateMenu"
           @update:expanded-keys="handleUpdateExpandedKeys"
         />

src/layouts/common/global-sider/components/vertical-sider/components/vertical-menu.vue

@@ -8,7 +8,7 @@
       :options="menus"
       :expanded-keys="expandedKeys"
       :indent="18"
-      :inverted="theme.sider.inverted"
+      :inverted="!theme.darkMode && theme.sider.inverted"
       @update:value="handleUpdateMenu"
       @update:expanded-keys="handleUpdateExpandedKeys"
     />

src/layouts/common/setting-drawer/components/dark-mode/index.vue

@@ -21,12 +21,15 @@
         </template>
       </n-switch>
     </setting-menu>
-    <setting-menu label="侧边栏深色主题">
+    <setting-menu label="侧边栏深色">
       <n-switch :value="theme.sider.inverted" @update:value="theme.setSiderInverted" />
     </setting-menu>
-    <setting-menu label="头部深色主题">
+    <setting-menu label="头部深色">
       <n-switch :value="theme.header.inverted" @update:value="theme.setHeaderInverted" />
     </setting-menu>
+    <setting-menu label="底部深色">
+      <n-switch :value="theme.footer.inverted" @update:value="theme.setFooterInverted" />
+    </setting-menu>
   </n-space>
 </template>
 

src/layouts/common/setting-drawer/components/layout-mode/components/layout-checkbox.vue

@@ -6,8 +6,8 @@
     <n-tooltip :placement="activeConfig.placement" trigger="hover">
       <template #trigger>
         <div class="layout-checkbox__shadow relative w-56px h-48px bg-white rounded-4px overflow-hidden">
-          <div class="absolute-lt bg-[#273352]" :class="activeConfig.menuClass"></div>
-          <div class="absolute-rb bg-[#f0f2f5]" :class="activeConfig.mainClass"></div>
+          <div class="absolute-lt bg-#273352" :class="activeConfig.menuClass"></div>
+          <div class="absolute-rb bg-#f0f2f5" :class="activeConfig.mainClass"></div>
         </div>
       </template>
       <span>{{ label }}</span>

src/layouts/common/setting-drawer/components/page-func/index.vue

@@ -61,11 +61,14 @@
         @update:value="theme.setMixSiderWidth"
       />
     </setting-menu>
+    <setting-menu label="显示底部">
+      <n-switch :value="theme.footer.visible" @update:value="theme.setFooterVisible" />
+    </setting-menu>
     <setting-menu label="固定底部">
       <n-switch :value="theme.footer.fixed" @update:value="theme.setFooterIsFixed" />
     </setting-menu>
-    <setting-menu label="显示底部">
-      <n-switch :value="theme.footer.visible" @update:value="theme.setFooterVisible" />
+    <setting-menu label="底部居右">
+      <n-switch :value="theme.footer.right" @update:value="theme.setFooterIsRight" />
     </setting-menu>
   </n-space>
 </template>