From 1bee98f2cb7d8a026866a080602754eece6cb239 Mon Sep 17 00:00:00 2001
From: zhaojisen <1301338853@qq.com>
Date: Mon, 22 Jul 2024 19:28:24 +0800
Subject: [PATCH] refactor(layout): changing styles

---
 .stylelintrc.cjs                              | 22 +++++++++-
 package.json                                  |  2 +
 pnpm-lock.yaml                                | 17 ++++++++
 .../components/FileManagement/index.vue       |  4 +-
 src/layouts/components/NavSearch/index.vue    |  5 +--
 .../Sidebar/components/Help/index.vue         |  2 +-
 .../Sidebar/components/Logo/index.vue         | 17 +++-----
 .../Sidebar/components/Profile/index.vue      |  2 +-
 .../Sidebar/components/Setting/index.vue      |  2 +-
 .../Sidebar/components/Tree/index.vue         | 25 ++++++++++--
 src/layouts/components/Sidebar/sideBottom.vue |  9 ++---
 src/layouts/components/Sidebar/sideTop.vue    | 16 +++-----
 src/layouts/components/Tab/index.vue          |  3 +-
 src/layouts/index.scss                        |  9 +++++
 src/layouts/index.vue                         | 40 +++++--------------
 src/main.css                                  |  3 ++
 src/main.ts                                   |  4 +-
 src/stores/interface/index.ts                 |  2 +
 src/stores/modules/tree.ts                    |  7 +++-
 tailwind.config.js                            |  1 +
 20 files changed, 119 insertions(+), 73 deletions(-)
 create mode 100644 src/main.css

diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs
index d55c6ecf..f2783765 100644
--- a/.stylelintrc.cjs
+++ b/.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"]
 };
diff --git a/package.json b/package.json
index a3012067..593e148e 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b5eadb86..bcb036f2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -129,6 +129,9 @@ importers:
       stylelint-config-recess-order:
         specifier: ^5.0.0
         version: 5.0.1(stylelint@16.6.1(typescript@5.5.3))
+      stylelint-config-recommended:
+        specifier: ^14.0.1
+        version: 14.0.1(stylelint@16.6.1(typescript@5.5.3))
       stylelint-config-recommended-scss:
         specifier: ^14.0.0
         version: 14.1.0(postcss@8.4.39)(stylelint@16.6.1(typescript@5.5.3))
@@ -141,6 +144,9 @@ importers:
       stylelint-config-standard-scss:
         specifier: ^13.0.0
         version: 13.1.0(postcss@8.4.39)(stylelint@16.6.1(typescript@5.5.3))
+      stylelint-config-tailwindcss:
+        specifier: ^0.0.7
+        version: 0.0.7(stylelint@16.6.1(typescript@5.5.3))(tailwindcss@3.4.6)
       tailwindcss:
         specifier: ^3.4.6
         version: 3.4.6
@@ -3134,6 +3140,12 @@ packages:
     peerDependencies:
       stylelint: ^16.1.0
 
+  stylelint-config-tailwindcss@0.0.7:
+    resolution: {integrity: sha512-n2dCWH+0ppr0/by4EYCLWW7g5LU+l4UzUIsYS7xbVHqvm9UWa7UhltNdNiz5NmLF/FmbJR4Yd/v9DuUGvLw1Tg==}
+    peerDependencies:
+      stylelint: '>=13.13.1'
+      tailwindcss: '>=2.2.16'
+
   stylelint-order@6.0.4:
     resolution: {integrity: sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==}
     peerDependencies:
@@ -6699,6 +6711,11 @@ snapshots:
       stylelint: 16.6.1(typescript@5.5.3)
       stylelint-config-recommended: 14.0.1(stylelint@16.6.1(typescript@5.5.3))
 
+  stylelint-config-tailwindcss@0.0.7(stylelint@16.6.1(typescript@5.5.3))(tailwindcss@3.4.6):
+    dependencies:
+      stylelint: 16.6.1(typescript@5.5.3)
+      tailwindcss: 3.4.6
+
   stylelint-order@6.0.4(stylelint@16.6.1(typescript@5.5.3)):
     dependencies:
       postcss: 8.4.39
diff --git a/src/layouts/components/FileManagement/index.vue b/src/layouts/components/FileManagement/index.vue
index 2d029be2..de187ac2 100644
--- a/src/layouts/components/FileManagement/index.vue
+++ b/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);
diff --git a/src/layouts/components/NavSearch/index.vue b/src/layouts/components/NavSearch/index.vue
index 78a7d831..26a8f8a7 100644
--- a/src/layouts/components/NavSearch/index.vue
+++ b/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>
diff --git a/src/layouts/components/Sidebar/components/Help/index.vue b/src/layouts/components/Sidebar/components/Help/index.vue
index a1e81b6d..9d20cb53 100644
--- a/src/layouts/components/Sidebar/components/Help/index.vue
+++ b/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>
 
diff --git a/src/layouts/components/Sidebar/components/Logo/index.vue b/src/layouts/components/Sidebar/components/Logo/index.vue
index ce7fe696..ac97cb2a 100644
--- a/src/layouts/components/Sidebar/components/Logo/index.vue
+++ b/src/layouts/components/Sidebar/components/Logo/index.vue
@@ -1,5 +1,10 @@
 <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">
@@ -7,13 +12,3 @@ defineProps<{
   logoImage: string;
 }>();
 </script>
-
-<style scoped lang="scss">
-.n-image {
-  justify-content: center;
-  width: 100%;
-  &:hover {
-    cursor: pointer;
-  }
-}
-</style>
diff --git a/src/layouts/components/Sidebar/components/Profile/index.vue b/src/layouts/components/Sidebar/components/Profile/index.vue
index c89ff5cc..03e21a81 100644
--- a/src/layouts/components/Sidebar/components/Profile/index.vue
+++ b/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>
 
diff --git a/src/layouts/components/Sidebar/components/Setting/index.vue b/src/layouts/components/Sidebar/components/Setting/index.vue
index e2d9ed23..fe3e933c 100644
--- a/src/layouts/components/Sidebar/components/Setting/index.vue
+++ b/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>
diff --git a/src/layouts/components/Sidebar/components/Tree/index.vue b/src/layouts/components/Sidebar/components/Tree/index.vue
index e4800de4..ccb92acc 100644
--- a/src/layouts/components/Sidebar/components/Tree/index.vue
+++ b/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>
diff --git a/src/layouts/components/Sidebar/sideBottom.vue b/src/layouts/components/Sidebar/sideBottom.vue
index fcdc1ca5..90bfc02f 100644
--- a/src/layouts/components/Sidebar/sideBottom.vue
+++ b/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>
diff --git a/src/layouts/components/Sidebar/sideTop.vue b/src/layouts/components/Sidebar/sideTop.vue
index d016a7fe..2e24f16c 100644
--- a/src/layouts/components/Sidebar/sideTop.vue
+++ b/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>
diff --git a/src/layouts/components/Tab/index.vue b/src/layouts/components/Tab/index.vue
index cdd65baf..e98d5376 100644
--- a/src/layouts/components/Tab/index.vue
+++ b/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,
diff --git a/src/layouts/index.scss b/src/layouts/index.scss
index 9bbd5911..40f9c430 100644
--- a/src/layouts/index.scss
+++ b/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 {
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 4df087d2..594802cf 100644
--- a/src/layouts/index.vue
+++ b/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>
diff --git a/src/main.css b/src/main.css
new file mode 100644
index 00000000..b5c61c95
--- /dev/null
+++ b/src/main.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/main.ts b/src/main.ts
index 937d9372..12d89734 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -12,7 +12,7 @@ import 'normalize.css';
 import 'vfonts/OpenSans.css';
 // 引入自定义初始化样式
 import '@/styles/reset.scss';
-// 引入 Tailwind
+// 引入 TailwindCSS
 import 'tailwindcss/tailwind.css';
 // 引入图标注册脚本
 import 'virtual:svg-icons-register';
@@ -21,6 +21,8 @@ import VueFullscreen from 'vue-fullscreen';
 // 引入指令
 import { draggable } from '@/directive/sidebarDraggable.ts';
 
+import './main.css';
+
 const app = createApp(App);
 
 app.use(i18n);
diff --git a/src/stores/interface/index.ts b/src/stores/interface/index.ts
index d7761947..0c175715 100644
--- a/src/stores/interface/index.ts
+++ b/src/stores/interface/index.ts
@@ -63,6 +63,8 @@ export interface UserState {
 
 export interface TreeState {
   isAsync: Boolean;
+
+  isCollapsed: Boolean;
 }
 
 export type ObjToKeyValArray<T> = {
diff --git a/src/stores/modules/tree.ts b/src/stores/modules/tree.ts
index f24205d6..5ebf31e2 100644
--- a/src/stores/modules/tree.ts
+++ b/src/stores/modules/tree.ts
@@ -5,11 +5,16 @@ import piniaPersistConfig from '@/stores/helper/persist';
 export const useTreeStore = defineStore('tree', {
   state: (): TreeState => ({
     // 默认异步加载资产树
-    isAsync: true
+    isAsync: true,
+
+    isCollapsed: false
   }),
   actions: {
     changeState(newValue: Boolean) {
       newValue && (this.isAsync = newValue);
+    },
+    changeCollapsed(newValue: Boolean) {
+      this.isCollapsed = newValue;
     }
   },
   persist: piniaPersistConfig('tree')
diff --git a/tailwind.config.js b/tailwind.config.js
index e691e7c2..e2dde614 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  mode: 'jit',
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     extend: {}