chore: 清理冗余代码与配置，优化项目结构

1.  删除无用文件与废弃代码：移除locale枚举、element-plus插件、sse路由、api token模块等
2.  简化类型导入与依赖：移除大量未使用的类型导入，统一echarts导入方式
3.  优化配置与样式：调整gitignore、样式引入顺序，新增列表动画样式
4.  修复接口与模型：修正接口返回类型、查询参数配置，更新部门模型字段
5.  优化性能与体验：添加图片懒加载，优化加载逻辑与表格渲染
6.  调整环境配置：新增并更新开发/生产环境配置文件

frontend/web/src/views/module_system/role/components/FaPermissonDrawer.vue

@@ -12,11 +12,11 @@
         <!-- 数据权限 -->
         <ElAside>
           <div
-            class="border-r border-r-(--el-border-color-lighter) b-r-solid h-full p-[20px] box-border"
+            class="border-r border-r-(--el-border-color-lighter) b-r-solid h-full p-5 box-border"
           >
             <div class="flex items-center">
-              <div class="flex gap-[10px]">
-                <div class="w-[10px] bg-(--el-color-primary)"></div>
+              <div class="flex gap-2.5">
+                <div class="w-2.5 bg-(--el-color-primary)"></div>
                 <div>
                   <span class="text-[16px]">数据授权</span>
                   <ElTooltip placement="right">
@@ -70,8 +70,8 @@
 
         <!-- 菜单权限 -->
         <ElMain>
-          <div class="flex gap-[10px]">
-            <div class="w-[10px] bg-(--el-color-primary)"></div>
+          <div class="flex gap-2.5">
+            <div class="w-2.5 bg-(--el-color-primary)"></div>
             <div>
               <span class="text-[16px]">菜单授权</span>
               <ElTooltip placement="right">
@@ -110,13 +110,13 @@ import { computed, ref, watch, onMounted, nextTick } from "vue";
 import { QuestionFilled } from "@element-plus/icons-vue";
 import type { TreeInstance } from "element-plus";
 import { listToTree, formatTree, type CascaderNode } from "@utils";
-import FaMenuTreeTable from "@/components/others/fa-menu-tree-table/index.vue";
 import RoleAPI, { permissionDataType } from "@/api/module_system/role";
 import DeptAPI from "@/api/module_system/dept";
 import MenuAPI, { MenuTable } from "@/api/module_system/menu";
 import { DeviceEnum } from "@/enums/settings/device.enum";
 import { useUserStore, useAppStore } from "@stores";
-import { ElMessage } from "element-plus";
+import { ElMessage } from "@/utils/message";
+import type FaMenuTreeTable from "@/components/others/fa-menu-tree-table/index.vue";
 
 const props = defineProps<{
   roleName: string;

frontend/web/src/views/module_system/role/index.vue

@@ -152,21 +152,15 @@
 
 <script setup lang="ts">
 import { h } from "vue";
-import { useTable } from "@/hooks/core/useTable";
-import { useImportExport } from "@/hooks/core/useImportExport";
-import { useCrudDialog } from "@/hooks/core/useCrudDialog";
-import { useTableSelection } from "@/hooks/core/useTableSelection";
 import { useCrudForm } from "@/hooks/core/useCrudForm";
-import { confirmDelete, confirmBatchDelete, confirmToggleStatus } from "@/hooks/core/useConfirm";
-import { cleanEmptyArrayParams, stripPaginationParams } from "@/utils/query";
-import { renderTableOperationCell, type TableOperationAction, resolveStatusColumns } from "@utils";
-import type { ColumnOption } from "@/types/component";
+import { confirmToggleStatus } from "@/hooks/core/useConfirm";
+
+import { type TableOperationAction } from "@utils";
 import RoleAPI, {
   type RoleForm,
   type RoleTable,
   type TablePageQuery,
 } from "@/api/module_system/role";
-import { useAuth } from "@/hooks/core/useAuth";
 import { useUserStore } from "@stores";
 import type { IObject } from "@/components/modal/types";
 import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
@@ -174,7 +168,7 @@ import type FaSearchBar from "@/components/forms/fa-search-bar/index.vue";
 import type { FormItem } from "@/components/forms/fa-form/index.vue";
 import type FaForm from "@/components/forms/fa-form/index.vue";
 import StatusTag from "@/components/others/fa-status-tag/index.vue";
-import { ElMessage } from "element-plus";
+import { ElMessage } from "@/utils/message";
 import FaPermissonDrawer from "./components/FaPermissonDrawer.vue";
 
 defineOptions({
@@ -231,7 +225,7 @@ function buildRoleRowActions(
     onPerm: (id: number, name: string) => void;
     onDetail: (id: number) => void;
     onEdit: (id: number) => void;
-    onDelete: (id: number) => void;
+    onDelete: (id: number, name: string) => void;
   }
 ): TableOperationAction[] {
   const isSys = row.id === 1;
@@ -288,7 +282,7 @@ function buildRoleRowActions(
           warnSys();
           return;
         }
-        ctx.onDelete(row.id!);
+        ctx.onDelete(row.id!, row.name ?? "");
       },
     },
   ];
@@ -312,8 +306,8 @@ const searchBarRef = ref<InstanceType<typeof FaSearchBar> | null>(null);
 const searchBarRules: Record<string, unknown> = {};
 
 const statusOptions = ref([
-  { label: "启用", value: "true" },
-  { label: "停用", value: "false" },
+  { label: "启用", value: 0 },
+  { label: "停用", value: 1 },
 ]);
 
 const roleSearchItems = computed<SearchFormItem[]>(() => [
@@ -355,9 +349,9 @@ function handleOpenAssignPermDialog(roleId: number, roleName: string) {
   drawerVisible.value = true;
 }
 
-async function deleteRoleRow(id: number) {
+async function deleteRoleRow(id: number, name: string) {
   try {
-    await confirmDelete();
+    await confirmDelete(`确定删除「${name}」吗？`);
     await RoleAPI.deleteRole([id]);
     const userStore = useUserStore();
     await userStore.getUserInfo();
@@ -549,12 +543,12 @@ const {
     columnsFactory: resolveStatusColumns<RoleTable>(() => [
       { type: "selection", width: 48, fixed: "left" },
       { type: "globalIndex", width: 56, label: "序号" },
-      { prop: "name", label: "角色名称", minWidth: 100, showOverflowTooltip: true },
-      { prop: "code", label: "角色编码", minWidth: 100, showOverflowTooltip: true },
+      { prop: "name", label: "角色名称", minWidth: 120, showOverflowTooltip: true },
+      { prop: "code", label: "角色编码", minWidth: 130, showOverflowTooltip: true },
       {
         prop: "data_scope",
         label: "数据权限",
-        minWidth: 200,
+        minWidth: 160,
         status: {
           1: { type: "primary", text: "仅本人数据权限" },
           2: { type: "info", text: "本部门数据权限" },
@@ -573,19 +567,19 @@ const {
       {
         prop: "status",
         label: "状态",
-        width: 88,
+        width: 80,
         status: {
           0: { type: "success", text: "启用" },
           1: { type: "danger", text: "停用" },
         },
       },
-      { prop: "description", label: "描述", minWidth: 100, showOverflowTooltip: true },
+      { prop: "description", label: "描述", minWidth: 120, showOverflowTooltip: true },
       { prop: "created_time", label: "创建时间", width: 168, showOverflowTooltip: true },
       { prop: "updated_time", label: "更新时间", width: 168, showOverflowTooltip: true },
       {
         prop: "operation",
         label: "操作",
-        width: 220,
+        width: 230,
         fixed: "right",
         align: "center",
         formatter: (row: RoleTable) => formatRoleOperationCell(row, opCtx),
@@ -595,7 +589,7 @@ const {
 });
 
 const roleCrudCols = computed(() =>
-  columns.value.map((c: ColumnOption<RoleTable>) => {
+  columns!.value.map((c: ColumnOption<RoleTable>) => {
     const t = (c as { type?: string }).type;
     return {
       prop: c.prop,
@@ -643,7 +637,10 @@ async function handleBatchDelete() {
   const ids = selectedIds.value;
   if (ids.length === 0) return;
   try {
-    await confirmBatchDelete(ids.length);
+    await confirmBatchDelete(
+      ids.length,
+      selectedRows.value.map((r) => String(r.name ?? r.id))
+    );
     batchDeleting.value = true;
     await RoleAPI.deleteRole(ids);
     const userStore = useUserStore();