refactor: ♻️ 代码优化和导入问题修复

src/layout/components/NavBar/components/NavbarRight.vue

@@ -36,8 +36,8 @@ import { DeviceEnum } from "@/enums/DeviceEnum";
 
 import { useAppStore, useSettingsStore } from "@/store";
 
-import UserProfile from "./UserProfile.vue";
+import UserProfile from "@/layout/components/NavBar/components/UserProfile.vue";
-import Notification from "./Notification.vue";
+import Notification from "@/layout/components/NavBar/components/Notification.vue";
 
 const appStore = useAppStore();
 const settingStore = useSettingsStore();

src/layout/components/Settings/index.vue

@@ -1,16 +1,28 @@
 <template>
-  <el-drawer v-model="settingsVisible" size="300" :title="$t('settings.project')">
+  <el-drawer
+    v-model="settingsVisible"
+    size="300"
+    :title="$t('settings.project')"
+  >
     <el-divider>{{ $t("settings.theme") }}</el-divider>
 
     <div class="flex-center">
-      <el-switch v-model="isDark" active-icon="Moon" inactive-icon="Sunny" @change="changeTheme" />
+      <el-switch
+        v-model="isDark"
+        active-icon="Moon"
+        inactive-icon="Sunny"
+        @change="changeTheme"
+      />
     </div>
 
     <el-divider>{{ $t("settings.interface") }}</el-divider>
 
     <div class="py-1 flex-x-between">
       <span class="text-xs">{{ $t("settings.themeColor") }}</span>
-      <ThemeColorPicker v-model="settingsStore.themeColor" @update:model-value="changeThemeColor" />
+      <ThemeColorPicker
+        v-model="settingsStore.themeColor"
+        @update:model-value="changeThemeColor"
+      />
     </div>
 
     <div class="py-1 flex-x-between">
@@ -35,7 +47,10 @@
 
     <el-divider>{{ $t("settings.navigation") }}</el-divider>
 
-    <LayoutSelect v-model="settingsStore.layout" @update:model-value="changeLayout" />
+    <LayoutSelect
+      v-model="settingsStore.layout"
+      @update:model-value="changeLayout"
+    />
   </el-drawer>
 </template>
 

src/layout/index.vue

@@ -62,7 +62,7 @@ import defaultSettings from "@/settings";
 import { DeviceEnum } from "@/enums/DeviceEnum";
 import { LayoutEnum } from "@/enums/LayoutEnum";
 
-import Navbar from "./components/NavBar/index.vue";
+import Navbar from "@/layout/components/NavBar/index.vue";
 
 const appStore = useAppStore();
 const settingsStore = useSettingsStore();

src/styles/index.scss

@@ -26,7 +26,3 @@
     color: rgb(32 160 255);
   }
 }
-
-.search-container .el-form .el-input {
-  width: 16rem !important;
-}

src/views/system/dept/index.vue

@@ -38,8 +38,8 @@
       </el-form>
     </div>
 
-    <el-card shadow="never" class="table-wrapper">
+    <el-card shadow="never">
-      <template #header>
+      <div class="mb-10px">
         <el-button
           v-hasPerm="['sys:dept:add']"
           type="success"
@@ -61,7 +61,7 @@
           </template>
           删除
         </el-button>
-      </template>
+      </div>
 
       <el-table
         v-loading="loading"

src/views/system/user/components/UserImport.vue

@@ -95,7 +95,9 @@ const handleFileExceed = () => {
 const handleDownloadTemplate = () => {
   UserAPI.downloadTemplate().then((response: any) => {
     const fileData = response.data;
-    const fileName = decodeURI(response.headers["content-disposition"].split(";")[1].split("=")[1]);
+    const fileName = decodeURI(
+      response.headers["content-disposition"].split(";")[1].split("=")[1]
+    );
     const fileType =
       "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
 

src/views/system/user/index.vue

@@ -47,8 +47,12 @@
             </el-form-item>
 
             <el-form-item>
-              <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
+              <el-button type="primary" icon="search" @click="handleQuery">
-              <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
+                搜索
+              </el-button>
+              <el-button icon="refresh" @click="handleResetQuery">
+                重置
+              </el-button>
             </el-form-item>
           </el-form>
         </div>
@@ -95,26 +99,55 @@
             </div>
           </div>
 
-          <el-table v-loading="loading" :data="pageData" @selection-change="handleSelectionChange">
+          <el-table
+            v-loading="loading"
+            :data="pageData"
+            @selection-change="handleSelectionChange"
+          >
             <el-table-column type="selection" width="50" align="center" />
             <el-table-column label="编号" align="center" prop="id" width="60" />
             <el-table-column label="用户名" align="center" prop="username" />
-            <el-table-column label="昵称" width="100" align="center" prop="nickname" />
+            <el-table-column
+              label="昵称"
+              width="100"
+              align="center"
+              prop="nickname"
+            />
             <el-table-column label="性别" width="100" align="center">
               <template #default="scope">
                 <DictLabel v-model="scope.row.gender" code="gender" />
               </template>
             </el-table-column>
-            <el-table-column label="部门" width="120" align="center" prop="deptName" />
+            <el-table-column
-            <el-table-column label="手机号码" align="center" prop="mobile" width="120" />
+              label="部门"
-            <el-table-column label="状态" align="center" prop="status" width="80">
+              width="120"
+              align="center"
+              prop="deptName"
+            />
+            <el-table-column
+              label="手机号码"
+              align="center"
+              prop="mobile"
+              width="120"
+            />
+            <el-table-column
+              label="状态"
+              align="center"
+              prop="status"
+              width="80"
+            >
               <template #default="scope">
                 <el-tag :type="scope.row.status == 1 ? 'success' : 'info'">
                   {{ scope.row.status == 1 ? "正常" : "禁用" }}
                 </el-tag>
               </template>
             </el-table-column>
-            <el-table-column label="创建时间" align="center" prop="createTime" width="120" />
+            <el-table-column
+              label="创建时间"
+              align="center"
+              prop="createTime"
+              width="120"
+            />
             <el-table-column label="操作" fixed="right" width="220">
               <template #default="scope">
                 <el-button
@@ -169,7 +202,12 @@
       append-to-body
       @close="handleCloseDialog"
     >
-      <el-form ref="userFormRef" :model="formData" :rules="rules" label-width="80px">
+      <el-form
+        ref="userFormRef"
+        :model="formData"
+        :rules="rules"
+        label-width="80px"
+      >
         <el-form-item label="用户名" prop="username">
           <el-input
             v-model="formData.username"
@@ -209,11 +247,19 @@
         </el-form-item>
 
         <el-form-item label="手机号码" prop="mobile">
-          <el-input v-model="formData.mobile" placeholder="请输入手机号码" maxlength="11" />
+          <el-input
+            v-model="formData.mobile"
+            placeholder="请输入手机号码"
+            maxlength="11"
+          />
         </el-form-item>
 
         <el-form-item label="邮箱" prop="email">
-          <el-input v-model="formData.email" placeholder="请输入邮箱" maxlength="50" />
+          <el-input
+            v-model="formData.email"
+            placeholder="请输入邮箱"
+            maxlength="50"
+          />
         </el-form-item>
 
         <el-form-item label="状态" prop="status">
@@ -242,13 +288,17 @@
 </template>
 
 <script setup lang="ts">
-import UserAPI, { UserForm, UserPageQuery, UserPageVO } from "@/api/system/user";
+import UserAPI, {
+  UserForm,
+  UserPageQuery,
+  UserPageVO,
+} from "@/api/system/user";
 
 import DeptAPI from "@/api/system/dept";
 import RoleAPI from "@/api/system/role";
 
-import DeptTree from "./components/DeptTree.vue";
+import DeptTree from "@/views/system/user/components/DeptTree.vue";
-import UserImport from "./components/UserImport.vue";
+import UserImport from "@/views/system/user/components/UserImport.vue";
 
 defineOptions({
   name: "User",
@@ -335,10 +385,14 @@ function handleSelectionChange(selection: any[]) {
 
 // 重置密码
 function hancleResetPassword(row: UserPageVO) {
-  ElMessageBox.prompt("请输入用户【" + row.username + "】的新密码", "重置密码", {
+  ElMessageBox.prompt(
+    "请输入用户【" + row.username + "】的新密码",
+    "重置密码",
+    {
       confirmButtonText: "确定",
       cancelButtonText: "取消",
-  }).then(
+    }
+  ).then(
     ({ value }) => {
       if (!value || value.length < 6) {
         ElMessage.warning("密码至少需要6位字符，请重新输入");
@@ -454,7 +508,9 @@ function handleOpenImportDialog() {
 function handleExport() {
   UserAPI.export(queryParams).then((response: any) => {
     const fileData = response.data;
-    const fileName = decodeURI(response.headers["content-disposition"].split(";")[1].split("=")[1]);
+    const fileName = decodeURI(
+      response.headers["content-disposition"].split(";")[1].split("=")[1]
+    );
     const fileType =
       "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
 

vite.config.ts

@@ -107,6 +107,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
       include: [
         "vue",
         "vue-router",
+        "element-plus",
         "pinia",
         "axios",
         "@vueuse/core",