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

src/components/business/loading-empty-wrapper.vue

@@ -54,7 +54,7 @@ const props = withDefaults(defineProps<Props>(), {
   placeholderClass: 'bg-white dark:bg-dark transition-background-color duration-300 ease-in-out',
   emptyDesc: '暂无数据',
   iconClass: 'text-320px text-primary',
-  descClass: 'text-16px text-[#666]',
+  descClass: 'text-16px text-#666',
   showNetworkReload: false
 });
 

src/components/common/dark-mode-container.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="dark:bg-[#18181c] dark:text-white dark:text-opacity-82 transition-all"
-    :class="inverted ? 'bg-[#001428] text-white' : 'bg-white text-[#333639]'"
+    class="dark:bg-dark dark:text-white dark:text-opacity-82 transition-all"
+    :class="inverted ? 'bg-#001428 text-white' : 'bg-white text-#333639'"
   >
     <slot></slot>
   </div>

src/components/common/exception-base.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex-col-center wh-full">
-    <div class="text-400px text-primary">
+  <div class="flex-col-center gap-24px min-h-520px wh-full overflow-hidden">
+    <div class="flex text-400px text-primary">
       <icon-local-no-permission v-if="type === '403'" />
       <icon-local-not-found v-if="type === '404'" />
       <icon-local-service-error v-if="type === '500'" />

src/components/common/hover-container.vue

@@ -2,14 +2,14 @@
   <div v-if="showTooltip">
     <n-tooltip :placement="placement" trigger="hover">
       <template #trigger>
-        <div class="flex-center h-full cursor-pointer dark:hover:bg-[#333]" :class="contentClassName">
+        <div class="flex-center h-full cursor-pointer dark:hover:bg-#333" :class="contentClassName">
           <slot></slot>
         </div>
       </template>
       {{ tooltipContent }}
     </n-tooltip>
   </div>
-  <div v-else class="flex-center cursor-pointer dark:hover:bg-[#333]" :class="contentClassName">
+  <div v-else class="flex-center cursor-pointer dark:hover:bg-#333" :class="contentClassName">
     <slot></slot>
   </div>
 </template>
@@ -41,7 +41,7 @@ const props = withDefaults(defineProps<Props>(), {
 const showTooltip = computed(() => Boolean(props.tooltipContent));
 
 const contentClassName = computed(
-  () => `${props.contentClass} ${props.inverted ? 'hover:bg-primary' : 'hover:bg-[#f6f6f6]'}`
+  () => `${props.contentClass} ${props.inverted ? 'hover:bg-primary' : 'hover:bg-#f6f6f6'}`
 );
 </script>
 

src/components/custom/icon-select.vue

@@ -14,7 +14,7 @@
       <span v-for="iconItem in iconsList" :key="iconItem" @click="handleChange(iconItem)">
         <svg-icon
           :icon="iconItem"
-          class="border-1px border-[#d9d9d9] text-30px m-2px p-5px cursor-pointer"
+          class="border-1px border-#d9d9d9 text-30px m-2px p-5px cursor-pointer"
           :class="{ 'border-primary': modelValue === iconItem }"
         />
       </span>

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>

src/settings/theme.json

@@ -120,9 +120,11 @@
     ]
   },
   "footer": {
+    "visible": true,
     "fixed": false,
+    "right": true,
     "height": 48,
-    "visible": true
+    "inverted": false
   },
   "page": {
     "animate": true,

src/settings/theme.ts

@@ -83,9 +83,11 @@ const defaultThemeSetting: Theme.Setting = {
     horizontalPositionList: themeHorizontalMenuPositionOptions
   },
   footer: {
+    visible: true,
     fixed: false,
+    right: true,
     height: 48,
-    visible: true
+    inverted: false
   },
   page: {
     animate: true,

src/store/modules/theme/index.ts

@@ -145,17 +145,25 @@ export const useThemeStore = defineStore('theme-store', {
     setHorizontalMenuPosition(position: UnionKey.ThemeHorizontalMenuPosition) {
       this.menu.horizontalPosition = position;
     },
+    /** 设置底部是否显示 */
+    setFooterVisible(isVisible: boolean) {
+      this.footer.visible = isVisible;
+    },
     /** 设置底部是否固定 */
     setFooterIsFixed(isFixed: boolean) {
       this.footer.fixed = isFixed;
     },
+    /** 设置底部是否固定 */
+    setFooterIsRight(right: boolean) {
+      this.footer.right = right;
+    },
     /** 设置底部高度 */
     setFooterHeight(height: number) {
       this.footer.height = height;
     },
-    /** 设置底部是否显示 */
-    setFooterVisible(isVisible: boolean) {
-      this.footer.visible = isVisible;
+    /** 设置底部高度 */
+    setFooterInverted(inverted: boolean) {
+      this.footer.inverted = inverted;
     },
     /** 设置切换页面时是否过渡动画 */
     setPageIsAnimate(animate: boolean) {

src/styles/css/global.css

@@ -1,6 +1,5 @@
 @import "./transition.css";
 @import "./reset.css";
-@import "./scrollbar.css";
 
 html,
 body,

src/styles/scss/scrollbar.scss

@@ -1,4 +1,7 @@
 @mixin scrollbar($size: 8px, $color: #d9d9d9) {
+	scrollbar-width: thin;
+	scrollbar-color: $color transparent;
+
 	&::-webkit-scrollbar-thumb {
 		background-color: $color;
 		border-radius: $size;

src/typings/system.d.ts

@@ -200,12 +200,16 @@ declare namespace Theme {
 
   /** 底部样式 */
   interface Footer {
+    /* 底部是否可见 */
+    visible: boolean;
     /** 是否固定底部 */
     fixed: boolean;
+    /** 底部是否居右(顶部混合菜单模式有效) */
+    right: boolean;
     /** 底部高度 */
     height: number;
-    /* 底部是否可见 */
-    visible: boolean;
+    /** 底部反转色 */
+    inverted: boolean;
   }
 
   /** 页面样式 */

src/views/_builtin/login/components/pwd-login/components/other-account.vue

@@ -1,6 +1,6 @@
 <template>
   <n-space :vertical="true">
-    <n-divider class="!mb-0 text-14px text-[#666]">其他账户登录</n-divider>
+    <n-divider class="!mb-0 text-14px text-#666">其他账户登录</n-divider>
     <n-space justify="center">
       <n-button
         v-for="item in accounts"

src/views/_builtin/login/components/pwd-login/components/other-login.vue

@@ -1,9 +1,9 @@
 <template>
   <n-space :vertical="true">
-    <n-divider class="!mb-0 text-14px text-[#666]">其他登录方式</n-divider>
+    <n-divider class="!mb-0 text-14px text-#666">其他登录方式</n-divider>
     <div class="flex-center">
       <n-button :text="true">
-        <icon-mdi-wechat class="text-22px text-[#888] hover:text-[#52BF5E]" />
+        <icon-mdi-wechat class="text-22px text-#888 hover:text-#52BF5E" />
       </n-button>
     </div>
   </n-space>

src/views/component/table/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="h-full overflow-hidden">
     <n-card title="表格" class="h-full shadow-sm rounded-16px">
       <n-space :vertical="true">
         <n-space>

src/views/dashboard/analysis/components/bottom-part/index.vue

@@ -1,14 +1,14 @@
 <template>
   <n-grid :x-gap="16" :y-gap="16" :item-responsive="true">
     <n-grid-item span="0:24 640:24 1024:8">
-      <n-card title="时间线" :bordered="false" class="rounded-16px shadow-sm">
+      <n-card title="时间线" :bordered="false" class="h-full rounded-16px shadow-sm">
         <n-timeline>
           <n-timeline-item v-for="item in timelines" :key="item.type" v-bind="item" />
         </n-timeline>
       </n-card>
     </n-grid-item>
     <n-grid-item span="0:24 640:24 1024:16">
-      <n-card title="表格" :bordered="false" class="rounded-16px shadow-sm">
+      <n-card title="表格" :bordered="false" class="h-full rounded-16px shadow-sm">
         <n-data-table size="small" :columns="columns" :data="tableData" />
       </n-card>
     </n-grid-item>