style(API): style adjustments and importing TailwindCSS

package.json

@@ -40,6 +40,7 @@
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",
     "@vitejs/plugin-vue": "^5.0.5",
+    "autoprefixer": "^10.4.19",
     "cz-git": "1.9.0",
     "czg": "^1.9.0",
     "eslint": "^8.57.0",
@@ -60,6 +61,7 @@
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-config-standard-scss": "^13.0.0",
+    "tailwindcss": "^3.4.6",
     "typescript": "^5.5.3",
     "typescript-eslint": "^7.15.0",
     "unplugin-vue-components": "^0.27.2",

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+    tailwindcss: {}
+  }
+};

src/layouts/components/FileManagement/index.vue

@@ -1,6 +1,12 @@
 <template>
   <div>
-    <n-descriptions label-placement="top" class="tree-wrapper" :title="t('List of Assets')">
+    <n-descriptions label-placement="top" class="tree-wrapper">
+      <template #header>
+        <n-flex align="center" justify="space-between">
+          {{ t('List of Assets') }}
+          <n-icon size="16px" :component="EllipsisHorizontal" class="mr-2.5 cursor-pointer" />
+        </n-flex>
+      </template>
       <n-descriptions-item>
         <n-collapse arrow-placement="left" :default-expanded-names="['asset-tree']">
           <n-collapse-item title="资产树" class="collapse-item" name="asset-tree">
@@ -59,7 +65,12 @@ import { reactive, ref, h, onUnmounted, onMounted } from 'vue';
 import { getTreeSource, getTreeDetailById } from '@/API/modules/tree';
 import ConnectionDialog from '@/components/ConnectionDialog/index.vue';
 import { NIcon, TreeOption, DropdownOption, useDialog, NPopover } from 'naive-ui';
-import { Folder, FolderOpenOutline, FileTrayFullOutline } from '@vicons/ionicons5';
+import {
+  Folder,
+  FolderOpenOutline,
+  FileTrayFullOutline,
+  EllipsisHorizontal
+} from '@vicons/ionicons5';
 
 import type { Tree } from '@/API/interface';
 
@@ -270,8 +281,9 @@ onUnmounted(() => {
   :deep(.n-descriptions-header) {
     height: 35px;
     margin-bottom: unset;
-    margin-left: 21px;
+    margin-left: 24px;
     font-size: 11px;
+    font-weight: 400;
     line-height: 40px;
     color: var(--el-aside-tree-text-color);
   }
@@ -284,14 +296,22 @@ onUnmounted(() => {
       padding-top: 0;
       .n-collapse-item__header-main {
         height: 22px;
+        margin-left: 5px;
+        .n-collapse-item-arrow {
+          font-size: 16px;
+        }
       }
     }
     :deep(.n-collapse-item__content-wrapper) {
+      margin-left: 16px;
       .n-collapse-item__content-inner {
         padding-top: 0;
         .tree-item .n-tree-node-wrapper {
           padding: unset;
           line-height: 22px;
+          .n-tree-node-content {
+            padding: 0 6px 0 0;
+          }
         }
       }
     }

src/layouts/components/Main/index.vue

@@ -2,7 +2,7 @@
   <n-layout-content class="main-content" content-style="padding: 24px;">
     <n-list class="tips" :show-divider="false">
       <n-list-item v-for="(tip, index) of systemTips" :key="index">
-        <n-flex align="center">
+        <n-flex align="center" style="flex-wrap: nowrap">
           <n-tag size="large" round>
             {{ tip.action }}
             <template #icon>

src/main.ts

@@ -12,6 +12,8 @@ import 'normalize.css';
 import 'vfonts/OpenSans.css';
 // 引入自定义初始化样式
 import '@/styles/reset.scss';
+// 引入 Tailwind
+import 'tailwindcss/tailwind.css';
 // 引入图标注册脚本
 import 'virtual:svg-icons-register';
 // 引入 vue-fullscreen

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+};

vite.config.ts

@@ -1,4 +1,6 @@
 import vue from '@vitejs/plugin-vue';
+import tailwindcss from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
 import Components from 'unplugin-vue-components/vite';
 
 import { resolve } from 'path';
@@ -19,6 +21,11 @@ export default defineConfig({
       symbolId: 'icon-[dir]-[name]'
     })
   ],
+  css: {
+    postcss: {
+      plugins: [tailwindcss, autoprefixer]
+    }
+  },
   resolve: {
     extensions: ['.ts', '.tsx', '.vue', '.js', '.json'],
     alias: {