feat: 优化前端界面布局和响应式设计

- 为表格添加空数据提示组件
- 根据设备类型动态调整抽屉组件大小
- 优化表格列宽和显示效果
- 调整描述组件的列数布局
- 在重置用户状态时清除用户信息

frontend/src/layouts/components/Settings/index.vue

@@ -1,7 +1,7 @@
 <template>
   <el-drawer
     v-model="drawerVisible"
-    size="380"
+    :size="drawerSize"
     :title="t('settings.project')"
     :before-close="handleCloseDrawer"
     class="settings-drawer"
@@ -163,6 +163,11 @@ const { t } = useI18n();
 import { LayoutMode, SidebarColor, ThemeMode } from "@/enums";
 import { useSettingsStore } from "@/store";
 import { themeColorPresets } from "@/settings";
+import { useAppStore } from "@/store/modules/app.store";
+import { DeviceEnum } from "@/enums/settings/device.enum";
+
+const appStore = useAppStore();
+const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "400px" : "90%"));
 
 // 按钮图标
 const copyIcon = markRaw(DocumentCopy);

frontend/src/store/modules/user.store.ts

@@ -80,6 +80,8 @@ export const useUserStore = defineStore("user", {
     resetAllState() {
       // 重置用户状态
       Auth.clearAuth();
+      // 重置用户信息
+      this.clearUserInfo();
       // 重置路由
       usePermissionStoreHook().resetRouter();
       // 清除标签视图

frontend/src/views/monitor/online/index.vue

@@ -67,7 +67,7 @@
         <el-table-column v-if="tableColumns.find(col => col.prop === 'selection')?.show" type="selection" min-width="55" align="center" />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'index')?.show" type="index" fixed label="序号" min-width="60" />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'session_id')?.show" key="session_id" label="会话编号" prop="session_id" min-width="250" show-overflow-tooltip/>
-        <el-table-column v-if="tableColumns.find(col => col.prop === 'ipaddr')?.show" key="ipaddr" label="IP地址" prop="ipaddr" min-width="120">
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'ipaddr')?.show" key="ipaddr" label="IP地址" prop="ipaddr" min-width="150" show-overflow-tooltip>
           <template #default="scope">
             <el-text>{{ scope.row.ipaddr }}</el-text>
             <CopyButton v-if="scope.row.ipaddr" :text="scope.row.ipaddr" style="margin-left: 2px" />
@@ -75,8 +75,8 @@
         </el-table-column>
         <el-table-column v-if="tableColumns.find(col => col.prop === 'name')?.show" key="name" label="用户名" prop="name" min-width="80" />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'user_name')?.show" key="user_name" label="用户姓名" prop="user_name" min-width="80" />
-        <el-table-column v-if="tableColumns.find(col => col.prop === 'login_location')?.show" key="login_location" label="登录位置" prop="login_location" min-width="80" />
-        <el-table-column v-if="tableColumns.find(col => col.prop === 'os')?.show" key="os" label="操作系统" prop="os" min-width="80" />
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'login_location')?.show" key="login_location" label="登录位置" prop="login_location" min-width="280" show-overflow-tooltip/>
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'os')?.show" key="os" label="操作系统" prop="os" min-width="120" />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'login_time')?.show" key="login_time" label="登录时间" prop="login_time" min-width="180" />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'operation')?.show" key="operation" fixed="right" label="操作" min-width="100">
           <template #default="scope">

frontend/src/views/monitor/server/index.vue

@@ -169,11 +169,10 @@
               </el-tooltip>
             </div>
           </template>
-          <el-table 
-            :data="server.disks" 
-            border 
-            
-          >
+          <el-table :data="server.disks" border >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
             <el-table-column 
               label="盘符路径" 
               prop="dir_name" 

frontend/src/views/system/config/components/ConfigInfoDrawer.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-drawer v-model="drawerVisible" title="配置中心" size="30%">
+  <el-drawer v-model="drawerVisible" title="配置中心" :size="drawerSize">
     <el-form :model="configState" label-width="auto" style="width: 100%">
       <!-- 系统配置 -->
       <el-divider>系统配置</el-divider>
@@ -51,6 +51,11 @@ import { useConfigStore } from "@/store";
 import { useI18n } from 'vue-i18n';
 import { ElMessage } from 'element-plus';
 import SingleImageUpload from '@/components/Upload/SingleImageUpload.vue';
+import { useAppStore } from "@/store/modules/app.store";
+import { DeviceEnum } from "@/enums/settings/device.enum";
+
+const appStore = useAppStore();
+const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "500px" : "90%"));
 
 const t = useI18n().t;
 const configStore = useConfigStore();

frontend/src/views/system/config/index.vue

@@ -95,7 +95,7 @@
         </el-table-column>
         <el-table-column v-if="tableColumns.find(col => col.prop === 'config_name')?.show" key="config_name" label="配置名称" prop="config_name" min-width="100" />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'config_key')?.show" key="config_key" label="配置键" prop="config_key" min-width="200" />
-        <el-table-column v-if="tableColumns.find(col => col.prop === 'config_value')?.show" key="config_value" label="配置值" prop="config_value" min-width="120" show-overflow-tooltip />
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'config_value')?.show" key="config_value" label="配置值" prop="config_value" min-width="200" show-overflow-tooltip />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'config_type')?.show" key="config_type" label="系统内置" prop="config_type" min-width="100">
           <template #default="scope">
             <el-tag v-if="scope.row.config_type" type="success">是</el-tag>
@@ -129,7 +129,7 @@
     <el-dialog v-model="dialogVisible.visible" :title="dialogVisible.title" @close="handleCloseDialog">
       <!-- 详情 -->
       <template v-if="dialogVisible.type === 'detail'">
-        <el-descriptions :column="2" border>
+        <el-descriptions :column="4" border>
           <el-descriptions-item label="配置名称" :span="2">{{ detailFormData.config_name }}</el-descriptions-item>
           <el-descriptions-item label="系统内置" :span="2">
             <el-tag v-if="detailFormData.config_type" type="success">是</el-tag>

frontend/src/views/system/dict/components/DataDrawer.vue

@@ -101,7 +101,7 @@
             {{ (queryFormData.page_no - 1) * queryFormData.page_size + scope.$index + 1 }}
           </template>
         </el-table-column>
-        <el-table-column v-if="tableColumns.find(col => col.prop === 'dict_label')?.show" key="dict_label" label="标签" prop="dict_label" min-width="100" show-overflow-tooltip />
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'dict_label')?.show" key="dict_label" label="标签" prop="dict_label" min-width="150" show-overflow-tooltip />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'status')?.show" key="status" label="状态" prop="status" min-width="100" show-overflow-tooltip>
           <template #default="scope">
             <el-tag :type="scope.row.status === true ? 'success' : 'danger'">
@@ -109,7 +109,7 @@
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column v-if="tableColumns.find(col => col.prop === 'dict_type')?.show" key="dict_type" label="类型" prop="dict_type" min-width="100" show-overflow-tooltip>
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'dict_type')?.show" key="dict_type" label="类型" prop="dict_type" min-width="180" show-overflow-tooltip>
           <template #default="scope">
             <el-tag type="primary">{{ scope.row.dict_type }}</el-tag>
           </template>
@@ -117,14 +117,14 @@
         <el-table-column v-if="tableColumns.find(col => col.prop === 'dict_value')?.show" key="dict_value" label="值" prop="dict_value" min-width="100" show-overflow-tooltip />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'css_class')?.show" key="css_class" label="样式属性" prop="css_class" min-width="100" show-overflow-tooltip />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'list_class')?.show" key="list_class" label="列表类样式" prop="list_class" min-width="100" show-overflow-tooltip />
-        <el-table-column v-if="tableColumns.find(col => col.prop === 'dict_sort')?.show" key="dict_sort" label="排序" prop="dict_sort" min-width="100" />
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'dict_sort')?.show" key="dict_sort" label="排序" prop="dict_sort" min-width="60" />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'is_default')?.show" key="is_default" label="是否默认" prop="is_default" min-width="100">
           <template #default="scope">
             <el-tag v-if="scope.row.is_default" type="success">是</el-tag>
             <el-tag v-else type="danger">否</el-tag>
           </template>
         </el-table-column>
-        <el-table-column v-if="tableColumns.find(col => col.prop === 'description')?.show" key="description" label="描述" prop="description" min-width="100" />
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'description')?.show" key="description" label="描述" prop="description" min-width="100" show-overflow-tooltip/>
         <el-table-column v-if="tableColumns.find(col => col.prop === 'created_at')?.show" key="created_at" label="创建时间" prop="created_at" min-width="200" sortable />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'updated_at')?.show" key="updated_at" label="更新时间" prop="updated_at" min-width="200" sortable />
           <el-table-column v-if="tableColumns.find(col => col.prop === 'creator')?.show" label="创建人" prop="creator" min-width="100">

frontend/src/views/system/dict/index.vue

@@ -105,8 +105,12 @@
             {{ (queryFormData.page_no - 1) * queryFormData.page_size + scope.$index + 1 }}
           </template>
         </el-table-column>
-        <el-table-column v-if="tableColumns.find(col => col.prop === 'dict_name')?.show" key="dict_name" label="字典名称" prop="dict_name" min-width="120" />
-        <el-table-column v-if="tableColumns.find(col => col.prop === 'dict_type')?.show" key="dict_type" label="字典类型" prop="dict_type" min-width="160" />
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'dict_name')?.show" key="dict_name" label="字典名称" prop="dict_name" min-width="140" show-overflow-tooltip/>
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'dict_type')?.show" key="dict_type" label="字典类型" prop="dict_type" min-width="180">
+          <template #default="scope">
+            <el-tag type="primary">{{ scope.row.dict_type }}</el-tag>
+          </template>
+        </el-table-column>
         <el-table-column v-if="tableColumns.find(col => col.prop === 'status')?.show" key="status" label="状态" prop="status" min-width="80">
           <template #default="scope">
             <el-tag :type="scope.row.status === true ? 'success' : 'danger'">
@@ -114,7 +118,7 @@
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column v-if="tableColumns.find(col => col.prop === 'description')?.show" key="description" label="描述" prop="description" min-width="140" />
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'description')?.show" key="description" label="描述" prop="description" min-width="140" show-overflow-tooltip/>
         <el-table-column v-if="tableColumns.find(col => col.prop === 'created_at')?.show" key="created_at" label="创建时间" prop="created_at" min-width="200" sortable />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'updated_at')?.show" key="updated_at" label="更新时间" prop="updated_at" min-width="200" sortable />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'creator')?.show" label="创建人" prop="creator" min-width="120">
@@ -142,7 +146,7 @@
     <el-dialog v-model="dialogVisible.visible" :title="dialogVisible.title" @close="handleCloseDialog">
       <!-- 详情 -->
       <template v-if="dialogVisible.type === 'detail'">
-        <el-descriptions :column="2" border>
+        <el-descriptions :column="4" border>
           <el-descriptions-item label="字典名称" :span="2">{{ detailFormData.dict_name }}</el-descriptions-item>
           <el-descriptions-item label="字典类型" :span="2">
             <el-tag type="primary">{{ detailFormData.dict_type }}</el-tag>

frontend/src/views/system/log/index.vue

@@ -115,14 +115,14 @@
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column v-if="tableColumns.find(col => col.prop === 'request_ip')?.show" label="请求IP" prop="request_ip" min-width="150">
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'request_ip')?.show" label="请求IP" prop="request_ip" min-width="180" show-overflow-tooltip>
           <template #default="scope">
             <el-text>{{ scope.row.request_ip }}</el-text>
             <CopyButton v-if="scope.row.request_ip" :text="scope.row.request_ip" style="margin-left: 2px" />
           </template>
         </el-table-column>
-        <el-table-column v-if="tableColumns.find(col => col.prop === 'process_time')?.show" label="处理时间" prop="process_time" min-width="200" />
-        <el-table-column v-if="tableColumns.find(col => col.prop === 'request_browser')?.show" label="浏览器" prop="request_browser" min-width="100" />
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'process_time')?.show" label="处理时间" prop="process_time" min-width="120" />
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'request_browser')?.show" label="浏览器" prop="request_browser" min-width="220" show-overflow-tooltip/>
         <el-table-column v-if="tableColumns.find(col => col.prop === 'request_os')?.show" label="系统" prop="request_os" min-width="100" />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'description')?.show" label="描述" prop="description" min-width="120" show-overflow-tooltip />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'created_at')?.show" label="创建时间" prop="created_at" min-width="200" sortable />

frontend/src/views/system/notice/index.vue

@@ -127,7 +127,7 @@
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column v-if="tableColumns.find(col => col.prop === 'notice_content')?.show" label="内容" prop="notice_content" min-width="100" show-overflow-tooltip />
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'notice_content')?.show" label="内容" prop="notice_content" min-width="200" show-overflow-tooltip />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'description')?.show" label="描述" prop="description" min-width="140" />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'created_at')?.show" label="创建时间" prop="created_at" min-width="180" sortable />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'updated_at')?.show" label="更新时间" prop="updated_at" min-width="180" sortable />
@@ -153,7 +153,7 @@
     </el-card>
 
     <!-- 弹窗区域 -->
-    <el-dialog v-model="dialogVisible.visible" :title="dialogVisible.title" top="3vh" @close="handleCloseDialog">
+    <el-dialog v-model="dialogVisible.visible" :title="dialogVisible.title"  @close="handleCloseDialog">
       <!-- 详情 -->
       <template v-if="dialogVisible.type === 'detail'">
         <el-descriptions :column="4" border>

frontend/src/views/system/role/components/PermissonDrawer.vue

@@ -1,7 +1,7 @@
   <!-- 角色授权 -->
 <template>
   <!-- 分配权限弹窗 -->
-  <el-drawer v-model="drawerVisible" :title="'【' + props.roleName + '】权限分配'" size="50%">
+  <el-drawer v-model="drawerVisible" :title="'【' + props.roleName + '】权限分配'" :size="drawerSize">
     <el-container>
       <!-- 数据权限 -->
       <el-aside >
@@ -149,7 +149,11 @@ import RoleAPI, { permissionDataType, permissionDeptType, permissionMenuType } f
 import DeptAPI from "@/api/system/dept";
 import MenuAPI from "@/api/system/menu";
 import type { TreeInstance } from 'element-plus'
+import { useAppStore } from "@/store/modules/app.store";
+import { DeviceEnum } from "@/enums/settings/device.enum";
 
+const appStore = useAppStore();
+const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "800px" : "90%"));
 const emit = defineEmits(['update:modelValue'])
 
 const permTreeRef = ref<TreeInstance>();

frontend/src/views/system/user/index.vue

@@ -178,7 +178,7 @@
     <el-drawer v-model="dialogVisible.visible" :title="dialogVisible.title" append-to-body :size="drawerSize" @close="handleCloseDialog">
       <!-- 详情 -->
       <template v-if="dialogVisible.type === 'detail'">
-        <el-descriptions :column="4" border>
+        <el-descriptions :column="2" border>
           <el-descriptions-item label="编号" :span="2">{{ detailFormData.id }}</el-descriptions-item>
           <el-descriptions-item label="头像" :span="2">
             <el-avatar :src="detailFormData.avatar" size="small"></el-avatar>
@@ -329,7 +329,7 @@ const total = ref(0);
 const loading = ref(false);
 const isExpand = ref(false);
 const isExpandable = ref(true);
-const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600px" : "90%"));
+const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "450px" : "90%"));
 // 选中的用户ID
 const selectIds = ref<number[]>([]);
 // 部门下拉数据源