refactor(layout): changing styles

.stylelintrc.cjs

@@ -8,13 +8,19 @@ module.exports = {
 		"stylelint-config-html/vue", // 配置 vue 中 template 样式格式化
 		"stylelint-config-standard-scss", // 配置 stylelint scss 插件
 		"stylelint-config-recommended-vue/scss", // 配置 vue 中 scss 样式格式化
-		"stylelint-config-recess-order" // 配置 stylelint css 属性书写顺序插件,
+		"stylelint-config-recess-order", // 配置 stylelint css 属性书写顺序插件,
+		"stylelint-config-recommended",
+		"stylelint-config-tailwindcss"
 	],
 	overrides: [
 		// 扫描 .vue/html 文件中的 <style> 标签内的样式
 		{
 			files: ["**/*.{vue,html}"],
 			customSyntax: "postcss-html"
+		},
+		{
+			files: ["**/*.{scss,css}"],
+			customSyntax: "postcss-scss"
 		}
 	],
 	rules: {
@@ -34,7 +40,19 @@ module.exports = {
 			{
 				ignorePseudoClasses: ["global", "v-deep", "deep"]
 			}
+		],
+		"at-rule-no-unknown": [
+			true,
+			{
+				ignoreAtRules: ["tailwind", "apply", "variants", "responsive", "screen"]
+			}
+		],
+		"scss/at-rule-no-unknown": [
+			true,
+			{
+				ignoreAtRules: ["tailwind", "apply", "variants", "responsive", "screen"]
+			}
 		]
 	},
-	ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts","**/*.html"]
+	ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts", "**/*.html"]
 };

package.json

@@ -57,10 +57,12 @@
     "stylelint": "^16.1.0",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-recess-order": "^5.0.0",
+    "stylelint-config-recommended": "^14.0.1",
     "stylelint-config-recommended-scss": "^14.0.0",
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-config-standard-scss": "^13.0.0",
+    "stylelint-config-tailwindcss": "^0.0.7",
     "tailwindcss": "^3.4.6",
     "typescript": "^5.5.3",
     "typescript-eslint": "^7.15.0",

src/layouts/components/FileManagement/index.vue

@@ -76,10 +76,10 @@ import type { Tree } from '@/API/interface';
 
 import mittBus from '@/utils/mittBus.ts';
 
-const treeStore = useTreeStore();
 const { t } = useI18n();
-const { isAsync } = storeToRefs(treeStore);
 const dialog = useDialog();
+const treeStore = useTreeStore();
+const { isAsync } = storeToRefs(treeStore);
 
 const pattern = ref('');
 const showDialog = ref(false);

src/layouts/components/NavSearch/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-flex class="search-part" justify="center" align="center">
+  <n-flex class="h-[35px] search-part" justify="center" align="center">
     <n-icon color="#CCCCCC" size="16px" :component="ArrowBack" />
     <n-icon color="#CCCCCC" size="16px" :component="ArrowForward" />
     <n-input
@@ -8,7 +8,7 @@
       size="small"
       clearable
       autosize
-      style="min-width: 50%; height: 24px; border-radius: 5px"
+      class="h-[24px] min-w-[50%] rounded-[5px] min-w-1/2"
     >
       <template #prefix>
         <n-icon size="16px" :component="SearchOutline"></n-icon>
@@ -23,7 +23,6 @@ import { SearchOutline, ArrowBack, ArrowForward } from '@vicons/ionicons5';
 
 <style scoped lang="scss">
 .search-part {
-  height: 35px;
   background-color: var(--el-main-nav-bg-color);
 }
 </style>

src/layouts/components/Sidebar/components/Help/index.vue

@@ -6,7 +6,7 @@
     :options="options"
     @select="handleSelect"
   >
-    <svg-icon :name="name" :icon-style="iconStyle" />
+    <svg-icon class="tree-icon" :name="name" :icon-style="iconStyle" />
   </n-dropdown>
 </template>
 

src/layouts/components/Sidebar/components/Logo/index.vue

@@ -1,19 +1,14 @@
 <template>
-  <n-image height="30px" lazy :src="logoImage" alt="Logo 图片" />
+  <n-image
+    lazy
+    :src="logoImage"
+    alt="Logo 图片"
+    class="h-8 w-8 justify-center object-fill hover: cursor-pointer"
+  />
 </template>
 
 <script setup lang="ts">
 defineProps<{
   logoImage: string;
 }>();
 </script>
-
-<style scoped lang="scss">
-.n-image {
-  justify-content: center;
-  width: 100%;
-  &:hover {
-    cursor: pointer;
-  }
-}
-</style>

src/layouts/components/Sidebar/components/Profile/index.vue

@@ -6,7 +6,7 @@
     :options="options"
     @select="handleSelect"
   >
-    <svg-icon :name="name" :icon-style="iconStyle" />
+    <svg-icon class="tree-icon" :name="name" :icon-style="iconStyle" />
   </n-dropdown>
 </template>
 

src/layouts/components/Sidebar/components/Setting/index.vue

@@ -1,7 +1,7 @@
 <template>
   <n-popover placement="right" trigger="hover">
     <template #trigger>
-      <svg-icon :name="name" :icon-style="iconStyle" @click="handleSetting" />
+      <svg-icon class="tree-icon" :name="name" :icon-style="iconStyle" @click="handleSetting" />
     </template>
     {{ t('Custom Setting') }}
   </n-popover>

src/layouts/components/Sidebar/components/Tree/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-button text @click="handleTreeIconClick">
+  <n-button text @click="handleTreeIconClick" :class="isCollapsed ? '' : 'icon-wrapper'">
     <svg-icon class="tree-icon" :name="name" :icon-style="iconStyle" />
   </n-button>
 </template>
@@ -8,20 +8,39 @@
 import mittBus from '@/utils/mittBus.ts';
 import SvgIcon from '@/components/SvgIcon/index.vue';
 
+import { storeToRefs } from 'pinia';
 import { CSSProperties } from 'vue';
+import { useTreeStore } from '@/stores/modules/tree.ts';
 
 defineProps<{
   name: string;
   iconStyle: CSSProperties;
 }>();
 
+const treeStore = useTreeStore();
+const { isCollapsed } = storeToRefs(treeStore);
+
 const handleTreeIconClick = () => {
   mittBus.emit('tree-click');
 };
 </script>
 
 <style scoped lang="scss">
-.tree-icon:hover {
-  fill: var(--el-color-primary-light-1) !important;
+.icon-wrapper {
+  position: relative;
+  width: 100%;
+  .tree-icon {
+    fill: var(--el-color-primary-light-1) !important;
+  }
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 2px;
+    height: 100%;
+    content: '';
+    background-color: var(--el-color-primary-light-1);
+  }
 }
 </style>

src/layouts/components/Sidebar/sideBottom.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-flex justify="center" align="center" class="bottom-item">
+  <n-flex justify="center" align="center" class="w-full cursor-pointer mb-[15px] bottom-item">
     <template v-for="option of bottomOptions" :key="option.key">
       <component
         :name="option.name"
@@ -139,11 +139,8 @@ const bottomOptions: HeaderRightOptions[] = [
 <style scoped lang="scss">
 .bottom-item {
   gap: 15px 12px !important;
-  width: 100%;
-  margin-bottom: 15px;
-  cursor: pointer;
-  :deep(svg:hover) {
-    fill: var(--el-color-primary-light-1) !important;
+  :deep(.tree-icon):hover {
+    fill: var(--el-color-primary) !important;
   }
 }
 </style>

src/layouts/components/Sidebar/sideTop.vue

@@ -1,7 +1,7 @@
 <template>
-  <n-flex justify="center" align="center" class="top-item">
+  <n-flex justify="center" align="center" class="w-full my-[15px] cursor-pointer">
     <logo :logo-image="logoImage || ''" />
-    <n-flex justify="center" align="center">
+    <n-flex justify="center" align="center" class="w-full">
       <template v-for="option of topIconOptions" :key="option.name">
         <component :is="option.component" :name="option.name" :icon-style="option.iconStyle" />
       </template>
@@ -44,14 +44,10 @@ const logoImage = globalStore.interface.logo_logout;
 </script>
 
 <style scoped lang="scss">
-.top-item {
-  gap: 20px 12px !important;
-  width: 100%;
-  margin-top: 25px;
-  cursor: pointer;
-  :deep(.n-flex) {
-    gap: 20px 12px !important;
-    width: 100%;
+:deep(.n-flex) {
+  gap: 10px 12px !important;
+  .tree-icon:hover {
+    fill: var(--el-color-primary) !important;
   }
 }
 </style>

src/layouts/components/Tab/index.vue

@@ -6,9 +6,8 @@
           justify="center"
           align="center"
           v-for="item in list"
-          class="tab-item"
+          class="tab-item py-0 px-1.25"
           :key="item.id"
-          style="padding: 0 5px"
           :class="{
             'active-tab': item.isActive,
             'first-click': item.clickCount === 1,

src/layouts/index.scss

@@ -20,6 +20,15 @@
           height: calc(100vh - 35px);
         }
       }
+      &::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 10px;
+        height: 100%;
+        cursor: ew-resize;
+        content: '';
+      }
 
       // 设置折叠状态下 padding 为零，否则侧边 item 图标无法点击
       &.n-layout-sider--collapsed .n-layout-sider-scroll-container {

src/layouts/index.vue

@@ -3,7 +3,7 @@
   <n-layout has-sider class="custom-layout">
     <n-layout-header bordered>
       <n-flex class="header-content" vertical align="center" justify="space-between">
-        <SideTop v-if="languageLoaded" />
+        <SideTop />
         <SideBottom />
       </n-flex>
     </n-layout-header>
@@ -18,7 +18,7 @@
       :collapsed="isCollapsed"
       :show-collapsed-content="false"
       :native-scrollbar="false"
-      class="transition-sider"
+      class="relative transition-sider"
       :style="{
         width: sideWidth + 'px',
         maxWidth: '600px'
@@ -34,33 +34,27 @@
 <script setup lang="ts">
 import mittBus from '@/utils/mittBus.ts';
 import SideTop from './components/Sidebar/sideTop.vue';
+import NavSearch from './components/NavSearch/index.vue';
 import MainContent from './components/MainContent/index.vue';
 import SideBottom from './components/Sidebar/sideBottom.vue';
 import SettingDrawer from './components/SettingDrawer/index.vue';
 import FileManagement from './components/FileManagement/index.vue';
-import NavSearch from './components/NavSearch/index.vue';
 
 import { ref, onMounted, onUnmounted } from 'vue';
-import { useLoadingStore } from '@/stores/modules/loading.ts';
+import { useTreeStore } from '@/stores/modules/tree.ts';
+import { storeToRefs } from 'pinia';
 
-const sideWidth = ref(300);
-const isCollapsed = ref(false);
-const languageLoaded = ref(false);
+const treeStore = useTreeStore();
+const { isCollapsed } = storeToRefs(treeStore);
 
-const useLoading = useLoadingStore();
-if (!useLoading.isLoading) {
-  // updateTranslations 是一个异步的，而子组件的渲染是同步的，因此在子组件中直接使用 t 函数将会曝出警告
-  setTimeout(() => {
-    languageLoaded.value = true;
-  }, 100);
-}
+const sideWidth = ref(300);
 
 const handleTriggerClick = () => {
-  sideWidth.value = 0;
-  isCollapsed.value = !isCollapsed.value;
-
+  treeStore.changeCollapsed(!isCollapsed.value);
   if (!isCollapsed.value) {
     sideWidth.value = 300;
+  } else {
+    sideWidth.value = 0;
   }
 };
 
@@ -84,16 +78,4 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 @import 'index';
-.n-layout-sider {
-  position: relative;
-}
-.n-layout-sider::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 10px; // 右侧边缘宽度
-  height: 100%;
-  cursor: ew-resize;
-  content: '';
-}
 </style>

src/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;