style: 优化前端代码格式和样式顺序

refactor: 调整样式属性顺序以提高可读性
fix: 修复请求异常处理中的错误日志输出
chore: 添加stylelint相关依赖和配置
docs: 更新存储工具类的文档注释

frontend/src/components/IntervalTab/index.vue

@@ -166,9 +166,9 @@ defineExpose({ setCron });
 
 <style lang="scss" scoped>
 .interval-tab-form {
-  width: 100%;
   flex-wrap: wrap;
   gap: 16px 8px;
+  width: 100%;
 }
 
 .form-item {
@@ -177,11 +177,11 @@ defineExpose({ setCron });
 }
 
 .form-actions {
-  width: 100%;
   display: flex;
-  justify-content: flex-end;
-  margin-top: 16px;
   gap: 8px;
+  justify-content: flex-end;
+  width: 100%;
+  margin-top: 16px;
 }
 
 // 响应式调整

frontend/src/components/JsonPretty/index.vue

@@ -43,20 +43,20 @@ const displayText = computed(() => {
 
 <style scoped>
 .json-pretty-wrapper {
-  overflow: auto;
-  border: 1px solid #e5e7eb;
   padding: 8px;
-  border-radius: 4px;
+  overflow: auto;
   background-color: var(--el-fill-color-blank);
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
 }
 
 .json-pretty-fallback {
-  white-space: pre-wrap;
-  word-break: break-word;
   margin: 0;
   font-family:
     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
     monospace;
   font-size: 12px;
+  word-break: break-all;
+  white-space: pre-wrap;
 }
 </style>

frontend/src/components/Upload/SingleImageUpload.vue

@@ -313,34 +313,22 @@ const onError = (error: any) => {
   align-items: flex-start;
 }
 
-:deep(.el-upload--picture-card) {
-  position: relative;
-  width: v-bind("props.style.width ?? '150px'");
-  height: v-bind("props.style.height ?? '150px'");
-
-  &:hover {
-    .single-upload__delete-btn {
-      display: block;
-    }
-  }
-}
-
 .single-upload {
   &__image {
-    border-radius: 6px;
     cursor: pointer;
+    border-radius: 6px;
   }
 
   &__delete-btn {
     position: absolute;
     top: 1px;
     right: 1px;
+    display: none;
     font-size: 16px;
     color: #ff7901;
     cursor: pointer;
     background: #fff;
     border-radius: 100%;
-    display: none;
 
     &:hover {
       color: #ff4500;
@@ -353,9 +341,21 @@ const onError = (error: any) => {
   }
 }
 
+:deep(.el-upload--picture-card) {
+  position: relative;
+  width: v-bind("props.style.width ?? '150px'");
+  height: v-bind("props.style.height ?? '150px'");
+
+  &:hover {
+    .single-upload__delete-btn {
+      display: block;
+    }
+  }
+}
+
 .el-upload__tip {
+  margin-top: 7px;
   font-size: 12px;
   color: #606266;
-  margin-top: 7px;
 }
 </style>

frontend/src/layouts/components/NavBar/components/LockDialog.vue

@@ -102,8 +102,8 @@ const handleLock = async () => {
     }
 
     &-name {
-      font-size: 14px;
       margin: 10px 0;
+      font-size: 14px;
       color: var(--top-header-text-color);
     }
   }

frontend/src/layouts/components/NavBar/components/LockPage.vue

@@ -147,35 +147,35 @@ function handleShowForm(show = false) {
 
 <style lang="scss" scoped>
 .lockpage {
-  z-index: 3000;
   position: fixed;
+  inset: 0;
   top: 0;
   left: 0;
-  inset: 0;
+  z-index: 3000;
   display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: 100%;
   background-color: black;
   backdrop-filter: blur(8px);
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
 
   .unlock-container {
     position: absolute;
     top: 0.5rem;
     left: 50%;
-    padding-top: 1.25rem;
-    height: 4rem;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    color: #fff;
-    flex-direction: column;
-    cursor: pointer;
-    transform: translateX(-50%);
-    border-radius: 12px;
+    height: 4rem;
     padding: 0.5rem 1rem;
+    padding-top: 1.25rem;
+    color: #fff;
+    cursor: pointer;
+    border-radius: 12px;
+    transform: translateX(-50%);
 
     @media (min-width: 640px) {
       font-size: 0.875rem;
@@ -188,47 +188,42 @@ function handleShowForm(show = false) {
 
   .time-container {
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
 
     .hour-container {
       display: flex;
-      justify-content: center;
       align-items: center;
-      backdrop-filter: blur(8px);
-      border-radius: 16px;
+      justify-content: center;
       padding: 1rem;
       margin-bottom: 2rem;
+      font-size: 220px;
       font-weight: 700;
       color: #bababa;
       background-color: #141313;
-      justify-content: center;
-      align-items: center;
-      font-size: 220px;
+      border-radius: 16px;
+      backdrop-filter: blur(8px);
     }
 
     .minute-container {
       display: flex;
-      justify-content: center;
       align-items: center;
-      backdrop-filter: blur(8px);
-      border-radius: 16px;
+      justify-content: center;
       padding: 1rem;
       margin-bottom: 2rem;
-      display: flex;
+      font-size: 220px;
       font-weight: 700;
       color: #bababa;
       background-color: #141313;
-      justify-content: center;
-      align-items: center;
-      font-size: 220px;
+      border-radius: 16px;
+      backdrop-filter: blur(8px);
     }
   }
 
   .meridiem {
     position: absolute;
-    left: 1.25rem;
     top: 1.25rem;
+    left: 1.25rem;
     font-size: 1.25rem;
   }
 
@@ -236,18 +231,18 @@ function handleShowForm(show = false) {
     position: absolute;
     top: 0;
     left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 100%;
     height: 100%;
     background-color: rgb(0 0 0 / 50%);
     backdrop-filter: blur(8px);
-    display: flex;
-    justify-content: center;
-    align-items: center;
   }
   .entry-content {
     width: 260px;
-    text-align: center;
     color: #bababa;
+    text-align: center;
   }
 
   .avatar-container {
@@ -263,8 +258,8 @@ function handleShowForm(show = false) {
   }
 
   .username {
-    font-size: 0.875rem;
     margin: 0.625rem 0;
+    font-size: 0.875rem;
     color: var(--logo-title-text-color);
   }
 
@@ -274,22 +269,22 @@ function handleShowForm(show = false) {
 
   .error-message {
     display: inline-block;
-    font-size: 0.875rem;
     margin-top: 0.625rem;
+    font-size: 0.875rem;
     color: #ed6f6f;
   }
 
   .button-group {
     display: flex;
-    justify-content: space-between; // 左右对齐
     align-items: center;
+    justify-content: space-between; // 左右对齐
     margin-top: 0.5rem;
 
     .back-button,
     .login-button,
     .entry-button {
-      padding: 0;
       min-width: auto;
+      padding: 0;
     }
 
     .login-button {
@@ -315,8 +310,8 @@ function handleShowForm(show = false) {
   }
 
   .time-display {
-    font-size: 3rem;
     margin-bottom: 1rem;
+    font-size: 3rem;
 
     .meridiem-display {
       font-size: 1.875rem;

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

@@ -648,6 +648,123 @@ const handleCloseDrawer = () => {
   }
 }
 
+/* 主题颜色选择器样式 */
+.theme-color-selector {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+
+  .color-label {
+    flex-shrink: 0;
+    min-width: 60px;
+  }
+
+  .color-options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .color-option {
+    position: relative;
+    width: 22px;
+    height: 22px;
+    cursor: pointer;
+    border: 2px solid var(--el-border-color-light);
+    border-radius: 6px;
+    box-shadow: var(--el-box-shadow-light);
+    transition: all 0.3s var(--el-transition-duration);
+
+    &:hover {
+      border-color: var(--el-color-primary-light-3);
+      box-shadow: var(--el-box-shadow);
+      transform: translateY(-2px) scale(1.05);
+    }
+
+    &.is-active {
+      border-color: var(--el-color-primary);
+      box-shadow: var(--el-box-shadow-dark);
+      transform: translateY(-1px) scale(1.08);
+    }
+
+    .color-check {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      font-size: 10px;
+      color: var(--el-color-white);
+      background: var(--el-overlay-color-lighter);
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  .color-picker-wrapper {
+    .custom-color-picker {
+      :deep(.el-color-picker__trigger) {
+        width: 22px;
+        height: 22px;
+        border: 2px solid var(--el-border-color-light);
+        border-radius: 6px;
+        box-shadow: var(--el-box-shadow-light);
+        transition: all 0.3s var(--el-transition-duration);
+
+        &:hover {
+          border-color: var(--el-color-primary-light-3);
+          box-shadow: var(--el-box-shadow);
+          transform: translateY(-2px) scale(1.05);
+        }
+      }
+
+      :deep(.el-color-picker__color) {
+        border: none;
+        border-radius: 3px;
+      }
+
+      :deep(.el-color-picker__color-inner) {
+        border-radius: 3px;
+      }
+
+      :deep(.el-color-picker__icon) {
+        font-size: 10px;
+      }
+    }
+  }
+
+  /* 深色模式适配 */
+  .dark & {
+    .color-option {
+      border-color: var(--el-border-color);
+      box-shadow: var(--el-box-shadow-light);
+
+      &:hover {
+        border-color: var(--el-color-primary-light-3);
+        box-shadow: var(--el-box-shadow);
+      }
+    }
+
+    .color-picker-wrapper {
+      .custom-color-picker {
+        :deep(.el-color-picker__trigger) {
+          border-color: var(--el-border-color);
+          box-shadow: var(--el-box-shadow-light);
+
+          &:hover {
+            border-color: var(--el-color-primary-light-3);
+            box-shadow: var(--el-box-shadow);
+          }
+        }
+      }
+    }
+  }
+}
+
 /* 深色模式适配 */
 .dark {
   .action-footer {
@@ -677,125 +794,6 @@ const handleCloseDrawer = () => {
   }
 }
 
-/* 主题颜色选择器样式 */
-.theme-color-selector {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-
-  .color-label {
-    flex-shrink: 0;
-    min-width: 60px;
-  }
-
-  .color-options {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-
-  .color-option {
-    position: relative;
-    width: 22px;
-    height: 22px;
-    cursor: pointer;
-    border: 2px solid var(--el-border-color-light);
-    border-radius: 6px;
-    transition: all 0.3s var(--el-transition-duration);
-    box-shadow: var(--el-box-shadow-light);
-
-    &:hover {
-      transform: translateY(-2px) scale(1.05);
-      box-shadow: var(--el-box-shadow);
-      border-color: var(--el-color-primary-light-3);
-    }
-
-    &.is-active {
-      border-color: var(--el-color-primary);
-      transform: translateY(-1px) scale(1.08);
-      box-shadow: var(--el-box-shadow-dark);
-    }
-
-    .color-check {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 16px;
-      height: 16px;
-      color: var(--el-color-white);
-      background: var(--el-overlay-color-lighter);
-      border-radius: 50%;
-      transform: translate(-50%, -50%);
-      font-size: 10px;
-    }
-  }
-
-  .color-picker-wrapper {
-    .custom-color-picker {
-      :deep(.el-color-picker__trigger) {
-        width: 22px;
-        height: 22px;
-        border: 2px solid var(--el-border-color-light);
-        border-radius: 6px;
-        transition: all 0.3s var(--el-transition-duration);
-        box-shadow: var(--el-box-shadow-light);
-
-        &:hover {
-          transform: translateY(-2px) scale(1.05);
-          box-shadow: var(--el-box-shadow);
-          border-color: var(--el-color-primary-light-3);
-        }
-      }
-
-      :deep(.el-color-picker__color) {
-        border: none;
-        border-radius: 3px;
-      }
-
-      :deep(.el-color-picker__color-inner) {
-        border-radius: 3px;
-      }
-
-      :deep(.el-color-picker__icon) {
-        font-size: 10px;
-      }
-    }
-  }
-}
-
-/* 深色模式适配 */
-.dark {
-  .theme-color-selector {
-    .color-option {
-      border-color: var(--el-border-color);
-      box-shadow: var(--el-box-shadow-light);
-
-      &:hover {
-        border-color: var(--el-color-primary-light-3);
-        box-shadow: var(--el-box-shadow);
-      }
-    }
-
-    .color-picker-wrapper {
-      .custom-color-picker {
-        :deep(.el-color-picker__trigger) {
-          border-color: var(--el-border-color);
-          box-shadow: var(--el-box-shadow-light);
-
-          &:hover {
-            border-color: var(--el-color-primary-light-3);
-            box-shadow: var(--el-box-shadow);
-          }
-        }
-      }
-    }
-  }
-}
-
 /* 复制配置对话框样式 */
 :deep(.copy-config-dialog) {
   .el-message-box__content {

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

@@ -790,8 +790,8 @@ onUnmounted(() => {
     border: 1px solid var(--el-border-color-light);
 
     &:hover {
-      background-color: var(--el-fill-color-light);
       color: var(--el-color-primary);
+      background-color: var(--el-fill-color-light);
 
       .el-icon {
         transform: scale(1.1);

frontend/src/styles/index.scss

@@ -5,12 +5,12 @@
 @import url("./vxe-table.css");
 
 .app-container {
-  padding: 12px;
-  border-radius: 4px;
-  height: 100%;
   display: flex;
   flex-direction: column;
+  height: 100%;
+  padding: 12px;
   overflow: auto;
+  border-radius: 4px;
 }
 
 // 进度条颜色

frontend/src/utils/request.ts

@@ -85,6 +85,7 @@ httpRequest.interceptors.response.use(
           return Promise.reject(new Error(jsonData.msg || "服务异常"));
         }
       } catch (e) {
+        console.error("请求异常:", e);
         // 如果无法解析为JSON，则使用默认错误处理
         ElMessage.error(error.message || "请求异常");
         return Promise.reject(new Error(error.message || "请求异常"));

frontend/src/utils/storage.ts

@@ -1,400 +1,64 @@
-<!-- 角色授权 -->
-<template>
-  <!-- 分配权限弹窗 -->
-  <el-drawer
-    v-model="drawerVisible"
-    :title="'【' + props.roleName + '】权限分配'"
-    :size="drawerSize"
-  >
-    <el-container>
-      <!-- 数据权限 -->
-      <el-aside>
-        <div class="border-r-1 border-r-[#f0f0f0] b-r-solid h-[100%] p-[20px] box-border">
-          <div class="flex items-center">
-            <div style="display: flex; gap: 10px">
-              <div style="width: 10px; background-color: #409eff"></div>
-              <div>
-                <span style="font-size: 16px">数据授权</span>
-                <el-tooltip placement="right">
-                  <template #content>
-                    <span>授权用户可操作的数据范围</span>
-                  </template>
-                  <el-icon class="ml-1 inline-block cursor-pointer">
-                    <QuestionFilled />
-                  </el-icon>
-                </el-tooltip>
-              </div>
-            </div>
-          </div>
-          <div class="mt-3">
-            <el-form ref="dataFormRef" :model="permissionState">
-              <el-form-item prop="data_scope">
-                <el-select v-model="permissionState.data_scope">
-                  <el-option :key="1" label="仅本人数据权限" :value="1" />
-                  <el-option :key="2" label="本部门数据权限" :value="2" />
-                  <el-option :key="3" label="本部门及以下数据权限" :value="3" />
-                  <el-option :key="4" label="全部数据权限" :value="4" />
-                  <el-option :key="5" label="自定义数据权限" :value="5" />
-                </el-select>
-              </el-form-item>
-            </el-form>
-
-            <div
-              v-if="permissionState.data_scope === 5 && deptTreeData.length"
-              class="mt-5 max-h-[60vh] b-1 b-solid b-[#e5e7eb] p-10px overflow-auto box-border"
-            >
-              <el-input v-model="deptFilterText" placeholder="部门名称" />
-              <el-tree
-                ref="deptTreeRef"
-                node-key="value"
-                show-checkbox
-                :data="deptTreeData"
-                :filter-node-method="handleFilter"
-                default-expand-all
-                :highlight-current="true"
-                :check-strictly="!parentChildLinked"
-                style="height: calc(100% - 60px); overflow-y: auto; margin-top: 10px"
-                @check="deptTreeCheck"
-              >
-                <template #empty>
-                  <el-empty :image-size="80" description="暂无数据" />
-                </template>
-              </el-tree>
-            </div>
-          </div>
-        </div>
-      </el-aside>
-
-      <!-- 菜单权限 -->
-      <el-main>
-        <div style="display: flex; gap: 10px">
-          <div style="width: 10px; background-color: #409eff"></div>
-          <div>
-            <span style="font-size: 16px">菜单授权</span>
-            <el-tooltip placement="right">
-              <template #content>
-                <span>授权用户可操作的菜单权限</span>
-              </template>
-              <el-icon class="ml-1 inline-block cursor-pointer">
-                <QuestionFilled />
-              </el-icon>
-            </el-tooltip>
-          </div>
-        </div>
-        <div class="mt-3 flex-x-between">
-          <el-input v-model="permFilterText" placeholder="菜单名称" />
-          <div class="flex-center ml-5">
-            <el-button type="primary" size="small" plain @click="togglePermTree">
-              <template #icon>
-                <Switch />
-              </template>
-              {{ isExpanded ? "收缩" : "展开" }}
-            </el-button>
-            <el-checkbox
-              v-model="parentChildLinked"
-              class="ml-5"
-              @change="handleParentChildLinkedChange"
-            >
-              父子联动
-            </el-checkbox>
-
-            <el-tooltip placement="bottom">
-              <template #content>
-                如果只需勾选菜单权限，不需要勾选子菜单或者按钮权限，请关闭父子联动
-              </template>
-              <el-icon class="ml-1 color-[--el-color-primary] inline-block cursor-pointer">
-                <QuestionFilled />
-              </el-icon>
-            </el-tooltip>
-          </div>
-        </div>
-
-        <div class="mt-5 max-h-[65vh] b-1 b-solid b-[#e5e7eb] p-10px overflow-auto box-border">
-          <el-tree
-            ref="permTreeRef"
-            node-key="value"
-            show-checkbox
-            :data="menuTreeData"
-            :filter-node-method="handleFilter"
-            default-expand-all
-            :highlight-current="true"
-            :check-strictly="!parentChildLinked"
-            style="height: calc(100% - 60px); overflow: auto; margin-top: 10px"
-            @check="menuTreeCheck"
-          >
-            <template #empty>
-              <el-empty :image-size="80" description="暂无数据" />
-            </template>
-          </el-tree>
-        </div>
-      </el-main>
-    </el-container>
-
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="handleCancel">取 消</el-button>
-        <el-button type="primary" @click.stop="handleDrawerSave">确 定</el-button>
-      </div>
-    </template>
-  </el-drawer>
-</template>
-
-<script setup lang="ts">
-// 添加 props 来接收 dictType
-const props = defineProps({
-  roleName: {
-    type: String,
-    required: true,
-  },
-  roleId: {
-    type: Number,
-    required: true,
-  },
-  modelValue: {
-    type: Boolean,
-    required: true,
-  },
-});
-
-import { listToTree, formatTree } from "@/utils/common";
-import RoleAPI, {
-  permissionDataType,
-  permissionDeptType,
-  permissionMenuType,
-} from "@/api/module_system/role";
-import DeptAPI from "@/api/module_system/dept";
-import MenuAPI from "@/api/module_system/menu";
-import type { TreeInstance } from "element-plus";
-import { useAppStore } from "@/store/modules/app.store";
-import { DeviceEnum } from "@/enums/settings/device.enum";
-import { useUserStore } from "@/store";
-
-const appStore = useAppStore();
-const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "800px" : "90%"));
-const emit = defineEmits(["update:modelValue", "saved"]);
-
-const permTreeRef = ref<TreeInstance>();
-const deptTreeRef = ref<TreeInstance>();
-const deptFilterText = ref("");
-const permFilterText = ref("");
-const dataFormRef = ref();
-const drawerVisible = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(value) {
-    emit("update:modelValue", value);
-  },
-});
-const isExpanded = ref(true);
-const parentChildLinked = ref(false);
-const loading = ref<boolean>(false);
-const deptTreeData = ref<permissionDeptType[]>([]);
-const menuTreeData = ref<permissionMenuType[]>([]);
-const permissionState = ref<permissionDataType>({
-  role_ids: [],
-  menu_ids: [],
-  data_scope: 1,
-  dept_ids: [],
-});
-
-// 初始化方法,用于打开抽屉并加载数据
-const init = async () => {
-  loading.value = true;
-
-  try {
-    // 获取全部部门树
-    const deptResponse = await DeptAPI.getDeptList();
-    deptTreeData.value = formatTree(listToTree(deptResponse.data.data));
-
-    // 获取全部菜单树
-    const menuResponse = await MenuAPI.getMenuList();
-    menuTreeData.value = formatTree(listToTree(menuResponse.data.data));
-
-    // 获取角色详情
-    const roleResponse = await RoleAPI.getRoleDetail(props.roleId);
-
-    // 更新权限状态
-    permissionState.value = {
-      role_ids: [props.roleId],
-      menu_ids: roleResponse.data.data.menus?.map((menu) => menu.id) || [],
-      data_scope: roleResponse.data.data.data_scope || 1,
-      dept_ids: roleResponse.data.data.depts?.map((dept) => dept.id) || [],
-    };
-
-    // 根据保存的权限数据判断是否应该开启父子联动
-    parentChildLinked.value = checkParentChildLinked(
-      permissionState.value.menu_ids,
-      menuTreeData.value
-    );
-
-    // 回显菜单树选中项
-    if (permTreeRef.value) {
-      await permTreeRef.value.setCheckedKeys(permissionState.value.menu_ids);
-    }
-
-    // 修改：增加对 deptTreeRef.value 的存在性判断，并添加日志
-    if (permissionState.value.data_scope === 5 && deptTreeRef.value) {
-      // await 一定不能丢，否则到导致初始化时候deptTreeRef.value 为 undefined
-      await deptTreeRef.value.setCheckedKeys(permissionState.value.dept_ids);
-    }
-  } catch (error: any) {
-    ElMessage.error("获取权限数据失败: " + error.message);
-  } finally {
-    loading.value = false;
-    // handleCancel()
+/**
+ * 存储工具类
+ * 提供localStorage和sessionStorage操作方法
+ */
+export class Storage {
+  /**
+   * localStorage 存储
+   */
+  static set(key: string, value: any): void {
+    localStorage.setItem(key, JSON.stringify(value));
   }
-};
 
-// 取消按钮处理函数
-function handleCancel() {
-  drawerVisible.value = false;
-}
+  static get<T>(key: string, defaultValue?: T): T {
+    const value = localStorage.getItem(key);
+    if (!value) return defaultValue as T;
 
-// 保存权限分配
-async function handleDrawerSave() {
-  try {
-    if (props.roleId === 1) {
-      ElMessage.warning("系统默认角色，不可操作");
-      return;
-    }
-    loading.value = true;
-
-    // 构造提交数据
-    const submitData: permissionDataType = {
-      role_ids: [props.roleId],
-      menu_ids: (permTreeRef.value?.getCheckedKeys() || []).map((key) => Number(key)),
-      data_scope: permissionState.value.data_scope,
-      dept_ids: (deptTreeRef.value?.getCheckedKeys() || []).map((key) => Number(key)),
-    };
-
-    await RoleAPI.setPermission(submitData);
-
-    // 更新全局用户状态，刷新权限信息
-    const userStore = useUserStore();
-    await userStore.getUserInfo();
-
-    drawerVisible.value = false;
-    emit("saved");
-  } catch (error: any) {
-    console.error(error);
-  } finally {
-    loading.value = false;
-  }
-}
-
-// 部门树选择回调
-const deptTreeCheck = (checkedIds: number[]) => {
-  permissionState.value.dept_ids = checkedIds;
-};
-
-// 菜单选择变更回调
-const menuTreeCheck = (checkedIds: number[]) => {
-  permissionState.value.menu_ids = checkedIds;
-};
-
-// 展开/收缩 菜单权限树
-function togglePermTree() {
-  isExpanded.value = !isExpanded.value;
-  if (permTreeRef.value) {
-    Object.values(permTreeRef.value.store.nodesMap).forEach((node: any) => {
-      if (isExpanded.value) {
-        node.expand();
-      } else {
-        node.collapse();
-      }
-    });
-  }
-}
-
-// 部门筛选
-watch(deptFilterText, (val) => {
-  deptTreeRef.value!.filter(val);
-});
-
-// 菜单筛选
-watch(permFilterText, (val) => {
-  permTreeRef.value!.filter(val);
-});
-
-// 树节点过滤
-function handleFilter(value: string, data: { [key: string]: any }) {
-  if (!value) return true;
-  return data.label.includes(value);
-}
-
-// 检查权限数据是否遵循父子联动模式
-function checkParentChildLinked(menuIds: number[], menuTreeData: permissionMenuType[]): boolean {
-  if (!menuIds.length || !menuTreeData.length) return false;
-
-  // 创建一个映射来快速查找菜单项
-  const menuMap = new Map<number, permissionMenuType>();
-  const buildMenuMap = (menus: permissionMenuType[]) => {
-    menus.forEach((menu) => {
-      menuMap.set(menu.id, menu);
-      if (menu.children) {
-        buildMenuMap(menu.children);
-      }
-    });
-  };
-  buildMenuMap(menuTreeData);
-
-  let hasParentChildConflict = false;
-
-  // 检查每个选中的菜单项
-  for (const menuId of menuIds) {
-    const menu = menuMap.get(menuId);
-    if (!menu) continue;
-
-    // 如果选中了父菜单，检查是否有子菜单未被选中
-    if (menu.children && menu.children.length > 0) {
-      const hasUnselectedChildren = menu.children.some((child) => !menuIds.includes(child.id));
-      if (hasUnselectedChildren) {
-        hasParentChildConflict = true;
-        break; // 发现冲突，直接返回false
-      }
-    }
-
-    // 如果选中了子菜单，检查父菜单是否也被选中
-    const parentMenu = findParentMenu(menuId, menuTreeData);
-    if (parentMenu && !menuIds.includes(parentMenu.id)) {
-      hasParentChildConflict = true;
-      break; // 发现冲突，直接返回false
+    try {
+      return JSON.parse(value);
+    } catch {
+      // 如果解析失败，返回原始字符串
+      return value as unknown as T;
     }
   }
 
-  // 如果没有发现父子冲突，说明是父子联动模式
-  return !hasParentChildConflict;
-}
+  static remove(key: string): void {
+    localStorage.removeItem(key);
+  }
 
-// 查找父菜单
-function findParentMenu(
-  menuId: number,
-  menuTreeData: permissionMenuType[]
-): permissionMenuType | null {
-  for (const menu of menuTreeData) {
-    if (menu.children) {
-      for (const child of menu.children) {
-        if (child.id === menuId) {
-          return menu;
-        }
-        // 递归查找更深层的父菜单
-        const found = findParentMenu(menuId, [child]);
-        if (found) return found;
-      }
+  /**
+   * localStorage 清空
+   */
+  static clear(): void {
+    localStorage.clear();
+  }
+
+  /**
+   * sessionStorage 存储
+   */
+  static sessionSet(key: string, value: any): void {
+    sessionStorage.setItem(key, JSON.stringify(value));
+  }
+
+  static sessionGet<T>(key: string, defaultValue?: T): T {
+    const value = sessionStorage.getItem(key);
+    if (!value) return defaultValue as T;
+
+    try {
+      return JSON.parse(value);
+    } catch {
+      // 如果解析失败，返回原始字符串
+      return value as unknown as T;
     }
   }
-  return null;
+
+  static sessionRemove(key: string): void {
+    sessionStorage.removeItem(key);
+  }
+  /**
+   * sessionStorage 清空
+   */
+  static sessionClear(): void {
+    sessionStorage.clear();
+  }
 }
-
-// 父子菜单节点是否联动
-function handleParentChildLinkedChange(val: any) {
-  parentChildLinked.value = val;
-}
-
-onMounted(async () => {
-  await init();
-});
-</script>
-
-<style lang="scss" scoped></style>

frontend/src/views/current/profile.vue

@@ -592,8 +592,8 @@ onMounted(async () => {
   align-items: center;
 
   .avatar-wrapper {
-    margin-bottom: 16px;
     position: relative;
+    margin-bottom: 16px;
 
     .el-upload {
       &:hover {
@@ -605,12 +605,12 @@ onMounted(async () => {
       // top: 50%;
       // left: 50%;
       position: absolute;
-      transform: translate(-50%, -50%);
-      opacity: 0;
-      border-radius: 50%;
       width: 28px;
       height: 28px;
       background: var(--el-color-primary);
+      border-radius: 50%;
+      opacity: 0;
+      transform: translate(-50%, -50%);
     }
 
     /* 提升 hover 样式优先级 */

frontend/src/views/module_application/ai/index.vue

@@ -436,25 +436,25 @@ onUnmounted(() => {
 .chatgpt-container {
   display: flex;
   height: calc(100vh - 120px);
-  background: var(--el-bg-color);
   overflow: hidden;
+  background: var(--el-bg-color);
 }
 
 // 主聊天区域
 .main-chat {
-  flex: 1;
+  position: relative;
   display: flex;
+  flex: 1;
   flex-direction: column;
   overflow: hidden;
-  position: relative;
 
   .chat-navbar {
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
     padding: 16px 24px;
-    border-bottom: 1px solid var(--el-border-color-light);
     background: var(--el-bg-color);
+    border-bottom: 1px solid var(--el-border-color-light);
 
     .navbar-left {
       h2 {
@@ -467,13 +467,13 @@ onUnmounted(() => {
 
     .navbar-right {
       display: flex;
-      align-items: center;
       gap: 16px;
+      align-items: center;
 
       .connection-status {
         display: flex;
-        align-items: center;
         gap: 8px;
+        align-items: center;
         font-size: 12px;
 
         .status-icon {
@@ -497,9 +497,9 @@ onUnmounted(() => {
 
   .chat-messages {
     flex: 1;
+    padding-bottom: 120px; // 为底部输入框留出空间
     overflow-y: auto;
     background: var(--el-bg-color);
-    padding-bottom: 120px; // 为底部输入框留出空间
 
     // 欢迎界面
     .welcome-screen {
@@ -520,17 +520,17 @@ onUnmounted(() => {
         }
 
         h1 {
+          margin: 0 0 16px;
           font-size: 32px;
           font-weight: 600;
-          margin: 0 0 16px;
           color: var(--el-text-color-primary);
         }
 
         .welcome-subtitle {
-          font-size: 16px;
-          color: var(--el-text-color-secondary);
           margin-bottom: 32px;
+          font-size: 16px;
           line-height: 1.5;
+          color: var(--el-text-color-secondary);
         }
 
         .example-prompts {
@@ -540,18 +540,18 @@ onUnmounted(() => {
           max-width: 600px;
 
           .prompt-card {
+            padding: 20px;
+            text-align: left;
+            cursor: pointer;
             background: var(--el-bg-color-page);
             border: 1px solid var(--el-border-color-light);
             border-radius: 12px;
-            padding: 20px;
-            cursor: pointer;
             transition: all 0.2s ease;
-            text-align: left;
 
             &:hover {
               border-color: var(--el-color-primary);
-              transform: translateY(-2px);
               box-shadow: var(--el-box-shadow-light);
+              transform: translateY(-2px);
             }
 
             h4 {
@@ -564,8 +564,8 @@ onUnmounted(() => {
             p {
               margin: 0;
               font-size: 13px;
-              color: var(--el-text-color-secondary);
               line-height: 1.4;
+              color: var(--el-text-color-secondary);
             }
           }
         }
@@ -574,40 +574,40 @@ onUnmounted(() => {
 
     // 消息列表
     .messages-list {
-      padding: 24px;
       max-width: 800px;
+      padding: 24px;
       margin: 0 auto;
 
       .message-group {
-        margin-bottom: 32px;
         display: flex;
         gap: 16px;
+        margin-bottom: 32px;
 
         .message-avatar {
           flex-shrink: 0;
 
           .user-avatar {
-            width: 32px;
-            height: 32px;
-            border-radius: 6px;
-            background: var(--el-color-primary);
             display: flex;
             align-items: center;
             justify-content: center;
-            color: white;
+            width: 32px;
+            height: 32px;
             font-size: 14px;
+            color: white;
+            background: var(--el-color-primary);
+            border-radius: 6px;
           }
 
           .ai-avatar {
-            width: 32px;
-            height: 32px;
-            border-radius: 6px;
-            background: var(--el-color-success);
             display: flex;
             align-items: center;
             justify-content: center;
-            color: white;
+            width: 32px;
+            height: 32px;
             font-size: 14px;
+            color: white;
+            background: var(--el-color-success);
+            border-radius: 6px;
           }
         }
 
@@ -641,23 +641,23 @@ onUnmounted(() => {
               }
 
               :deep(code) {
-                background: var(--el-fill-color-light);
                 padding: 2px 6px;
-                border-radius: 4px;
                 font-family: "JetBrains Mono", "Courier New", monospace;
                 font-size: 14px;
+                background: var(--el-fill-color-light);
+                border-radius: 4px;
               }
 
               :deep(pre) {
-                background: var(--el-fill-color-light);
                 padding: 16px;
-                border-radius: 8px;
-                overflow-x: auto;
                 margin: 12px 0;
+                overflow-x: auto;
+                background: var(--el-fill-color-light);
+                border-radius: 8px;
 
                 code {
-                  background: none;
                   padding: 0;
+                  background: none;
                 }
               }
 
@@ -682,8 +682,8 @@ onUnmounted(() => {
 
             .typing-indicator {
               display: flex;
-              align-items: center;
               gap: 8px;
+              align-items: center;
               color: var(--el-text-color-secondary);
 
               .typing-dots {
@@ -693,8 +693,8 @@ onUnmounted(() => {
                 span {
                   width: 8px;
                   height: 8px;
-                  border-radius: 50%;
                   background: var(--el-text-color-secondary);
+                  border-radius: 50%;
                   animation: typing 1.4s infinite;
 
                   &:nth-child(2) {
@@ -716,8 +716,8 @@ onUnmounted(() => {
             transition: opacity 0.2s ease;
 
             .el-button {
-              padding: 4px 8px;
               min-height: auto;
+              padding: 4px 8px;
             }
           }
 
@@ -736,13 +736,13 @@ onUnmounted(() => {
   // 输入区域
   .chat-input {
     position: fixed;
+    right: 0;
     bottom: 0;
     left: 0;
-    right: 0;
+    z-index: 10;
     padding: 16px 24px 24px;
     background: var(--el-bg-color);
     border-top: 1px solid var(--el-border-color-light);
-    z-index: 10;
 
     .input-wrapper {
       max-width: 800px;
@@ -753,8 +753,8 @@ onUnmounted(() => {
         background: var(--el-bg-color-page);
         border: 1px solid var(--el-border-color);
         border-radius: 12px;
-        transition: border-color 0.2s ease;
         box-shadow: var(--el-box-shadow-light);
+        transition: border-color 0.2s ease;
 
         &:focus-within {
           border-color: var(--el-color-primary);
@@ -763,13 +763,13 @@ onUnmounted(() => {
 
         .message-input {
           :deep(.el-textarea__inner) {
-            border: none;
-            box-shadow: none;
-            background: transparent;
-            resize: none;
             padding: 16px 60px 16px 16px;
             font-size: 15px;
             line-height: 1.5;
+            resize: none;
+            background: transparent;
+            border: none;
+            box-shadow: none;
 
             &:focus {
               border: none;

frontend/src/views/module_application/myapp/components/InternalApp.vue

@@ -94,15 +94,15 @@ watch(
 
 <style lang="scss" scoped>
 .internal-app-container {
-  height: 100%;
   display: flex;
   flex-direction: column;
+  height: 100%;
   background: var(--el-bg-color);
 }
 
 .internal-app-content {
-  flex: 1;
   position: relative;
+  flex: 1;
   overflow: hidden;
 }
 
@@ -115,15 +115,15 @@ watch(
 .loading-overlay {
   position: absolute;
   top: 0;
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  background: var(--el-bg-color);
   gap: 12px;
+  align-items: center;
+  justify-content: center;
+  background: var(--el-bg-color);
 
   .loading-icon {
     font-size: 24px;
@@ -132,8 +132,8 @@ watch(
   }
 
   span {
-    color: var(--el-text-color-regular);
     font-size: 14px;
+    color: var(--el-text-color-regular);
   }
 }
 

frontend/src/views/module_application/myapp/index.vue

@@ -506,28 +506,28 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .app-grid-card {
-  height: calc(100vh - 200px);
   position: relative;
   display: flex;
   flex-direction: column;
+  height: calc(100vh - 200px);
 
   :deep(.el-card__footer) {
-    margin-top: auto;
     display: flex;
     justify-content: flex-end;
+    margin-top: auto;
   }
 }
 
 .card-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
 }
 
 .app-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   flex: 1;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
 }
 
 .app-card-el {
@@ -544,21 +544,21 @@ onMounted(() => {
 
 .app-info-header {
   display: flex;
-  align-items: center;
-  gap: 12px;
   flex: 1;
+  gap: 12px;
+  align-items: center;
   min-width: 0;
 }
 
 .app-name-el {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
   margin: 0 0 4px 0;
-  line-height: 1.3;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--el-text-color-primary);
+  white-space: nowrap;
 }
 
 .app-card-content {
@@ -566,13 +566,13 @@ onMounted(() => {
 }
 
 .app-description {
-  font-size: 14px;
-  color: var(--el-text-color-regular);
   display: -webkit-box;
+  overflow: hidden;
   -webkit-line-clamp: 2;
   line-clamp: 2;
+  font-size: 14px;
+  color: var(--el-text-color-regular);
   -webkit-box-orient: vertical;
-  overflow: hidden;
 }
 
 .app-meta-info {
@@ -585,17 +585,17 @@ onMounted(() => {
 
 .app-meta-row {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
   gap: 12px;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .meta-item {
   display: flex;
-  align-items: center;
   gap: 6px;
-  white-space: nowrap;
+  align-items: center;
   overflow: hidden;
+  white-space: nowrap;
 }
 
 .meta-item.left {
@@ -607,13 +607,13 @@ onMounted(() => {
 .meta-item.right {
   flex: 1;
   justify-content: flex-end;
-  text-align: right;
   min-width: 0;
+  text-align: right;
 }
 
 .meta-icon {
-  color: var(--el-text-color-placeholder);
   flex-shrink: 0;
+  color: var(--el-text-color-placeholder);
 }
 
 .meta-item span {
@@ -629,8 +629,8 @@ onMounted(() => {
 
   .action-btn {
     flex: 1;
-    font-size: 12px;
     padding: 4px 8px;
+    font-size: 12px;
   }
 }
 
@@ -641,7 +641,7 @@ onMounted(() => {
 
 .dialog-footer {
   display: flex;
-  justify-content: flex-end;
   gap: 12px;
+  justify-content: flex-end;
 }
 </style>

frontend/src/views/module_generator/backcode/index.vue

@@ -736,7 +736,7 @@
                     :value="dict.dict_type || ''"
                   >
                     <span style="float: left">{{ dict.dict_name }}</span>
-                    <span style="float: right; color: #8492a6; font-size: 13px">
+                    <span style="float: right; font-size: 13px; color: #8492a6">
                       {{ dict.dict_type }}
                     </span>
                   </el-option>

frontend/src/views/module_monitor/resource/index.vue

@@ -787,12 +787,12 @@ onMounted(() => {
 .data-table__content {
   .file-name {
     display: flex;
-    align-items: center;
     gap: 8px;
+    align-items: center;
 
     .file-name-clickable {
-      cursor: pointer;
       color: var(--el-color-primary);
+      cursor: pointer;
 
       &:hover {
         color: var(--el-color-primary-light-3);
@@ -805,31 +805,31 @@ onMounted(() => {
 .grid-view {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  height: calc(100vh - 200px);
   gap: 20px;
+  height: calc(100vh - 200px);
 
   .grid-item {
     display: flex;
     flex-direction: column;
     align-items: center;
+    cursor: pointer;
     // 使用系统主题颜色
     border-radius: 8px;
-    cursor: pointer;
     transition: all 0.3s;
 
     .item-name {
+      margin-bottom: 5px;
       font-size: 14px;
       text-align: center;
       word-break: break-all;
-      margin-bottom: 5px;
     }
   }
 }
 
 :deep(.el-breadcrumb__item) {
   &.is-link {
-    cursor: pointer;
     color: var(--el-color-primary);
+    cursor: pointer;
 
     &:hover {
       color: var(--el-color-primary-light-3);

frontend/src/views/module_system/auth/index.vue

@@ -116,13 +116,9 @@ onMounted(() => {
   justify-content: center;
   width: 100%;
   height: 100%;
-}
-
-// 添加伪元素作为背景层
-.login-container {
+  background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
-  background-repeat: no-repeat;
 }
 
 .action-bar {

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

@@ -53,7 +53,7 @@
                 default-expand-all
                 :highlight-current="true"
                 :check-strictly="!parentChildLinked"
-                style="height: calc(100% - 60px); overflow-y: auto; margin-top: 10px"
+                style="height: calc(100% - 60px); margin-top: 10px; overflow-y: auto"
                 @check="deptTreeCheck"
               >
                 <template #empty>
@@ -119,7 +119,7 @@
             default-expand-all
             :highlight-current="true"
             :check-strictly="!parentChildLinked"
-            style="height: calc(100% - 60px); overflow: auto; margin-top: 10px"
+            style="height: calc(100% - 60px); margin-top: 10px; overflow: auto"
             @check="menuTreeCheck"
           >
             <template #empty>