增加历史信息

src/layouts/MainLayout.vue

@@ -38,7 +38,27 @@
 
       <!-- 主内容Main -->
       <el-main class="city-main">
-        <router-view />
+        <!-- 路由标签页 -->
+        <div class="tabs-view">
+          <el-tabs
+            v-model="activePath"
+            type="card"
+            closable
+            @tab-click="handleTabClick"
+            @tab-remove="handleTabRemove"
+          >
+            <el-tab-pane
+              v-for="view in visitedViews"
+              :key="view.path"
+              :label="view.title"
+              :name="view.path"
+            />
+          </el-tabs>
+        </div>
+        <!-- 路由视图 -->
+        <div class="view-content">
+          <router-view />
+        </div>
       </el-main>
     </el-container>
   </el-container>
@@ -68,6 +88,61 @@ let userInfo = ref(
 const router = useRouter();
 const route = useRoute();
 
+// ========== 路由标签页相关 ==========
+const visitedViews = ref([]); // 已访问的路由列表
+const activePath = ref(""); // 当前激活的路由路径
+
+// 添加路由到已访问列表
+const addView = (view) => {
+  // 检查路由是否已存在
+  const index = visitedViews.value.findIndex((v) => v.path === view.path);
+  if (index === -1) {
+    console.log(view, "viewview");
+
+    // 不存在则添加，优先使用 title，其次 meta.title，最后 name
+    visitedViews.value.push({
+      path: view.path,
+      title: view.title || view.meta?.title || view.name || "未命名",
+    });
+  }
+  // 设置当前激活的路由
+  activePath.value = view.path;
+};
+
+// 点击标签切换路由
+const handleTabClick = (tab) => {
+  const path = tab.paneName;
+  if (path !== route.path) {
+    router.push(path);
+  }
+};
+
+// 关闭标签
+const handleTabRemove = (targetPath) => {
+  const index = visitedViews.value.findIndex((v) => v.path === targetPath);
+  if (index !== -1) {
+    // 移除路由
+    visitedViews.value.splice(index, 1);
+
+    // 如果关闭的是当前路由，则跳转到上一个路由
+    if (targetPath === route.path) {
+      if (visitedViews.value.length > 0) {
+        // 跳转到相邻路由（优先后面的，如果没有则前面的）
+        const nextView =
+          visitedViews.value[index] || visitedViews.value[index - 1];
+        if (nextView) {
+          router.push(nextView.path);
+        }
+      } else {
+        // 如果没有其他路由，跳转到首页
+        router.push("/");
+      }
+    }
+  }
+};
+
+// ========== 路由标签页相关结束 ==========
+
 // 获取资源库数据
 const getResourceData = () => {
   axios
@@ -92,12 +167,14 @@ const toMessagePage = () => {
 onMounted(() => {
   getResourceData();
   getMessageCount();
+  addView(route); // 初始化时添加当前路由
 });
 
 watch(
   () => route.path,
   () => {
     getMessageCount();
+    addView(route); // 路由变化时添加到标签页
   },
 );
 // 处理退出登录
@@ -185,7 +262,76 @@ const handleLogout = () => {
 .city-main {
   height: calc(100vh - 60px);
   overflow-y: auto;
+  background-color: #ecf2f8;
   --el-main-padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+// 标签页容器样式
+.tabs-view {
+  background: #fff;
+  margin: 16px 16px 0 16px;
+  padding: 10px 16px;
+  border-radius: 8px;
+  border-bottom: 1px solid #e4e7ed;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+
+  :deep(.el-tabs) {
+    .el-tabs__header {
+      margin: 0;
+      border-bottom: none;
+    }
+
+    .el-tabs__nav {
+      border: none;
+    }
+
+    .el-tabs__item {
+      height: 32px;
+      line-height: 32px;
+      border: 1px solid #d8dce5;
+      border-radius: 3px;
+      margin-right: 8px;
+      color: #495060;
+      font-size: 12px;
+      padding: 0 12px;
+      background: #fff;
+      transition: all 0.2s;
+
+      border-top: 2px solid #d8dce5;
+
+      &:hover {
+        color: #3d84ee;
+        background: #ecf3fd;
+      }
+
+      &.is-active {
+        color: #3d84ee;
+        background: #ecf3fd;
+        border-color: #3d84ee;
+      }
+    }
+
+    .el-tabs__item .el-icon-close {
+      width: 14px;
+      height: 14px;
+      font-size: 12px;
+
+      &:hover {
+        background-color: #3d84ee;
+        color: #fff;
+        border-radius: 50%;
+      }
+    }
+  }
+}
+
+// 路由视图内容
+.view-content {
+  flex: 1;
+  overflow-y: auto;
+  height: 0;
 }
 .header-right {
   display: flex;

src/router/routes.js

 import MainLayout from "@/layouts/MainLayout.vue";
+
 const routes = [
   {
     path: "/login",
     name: "login",
     component: () => import("@/views/login/index.vue"),
-    meta: { nopermission: true },
+    meta: { nopermission: true, title: "登录" }, // 补充title
   },
   {
     path: "/gzbPage",
     name: "gzbPage",
     title: "数据大屏",
     component: () => import("@/views/homePage/index.vue"),
-    meta: { nopermission: true },
+    meta: { nopermission: true, title: "数据大屏" }, // 补充title
   },
   {
     path: "/",
     name: "首页",
     redirect: "/message",
     component: MainLayout,
+    meta: { title: "首页" }, // 根路由补充title
     children: [
       {
         path: "/message",
         name: "message",
         title: "消息中心",
+        meta: { title: "消息中心" }, // 保持原有配置
         component: () => import("@/views/systemManage/message.vue"),
       },
       {
         path: "/homePage",
         name: "dataSummary",
         title: "数据大屏",
+        meta: { title: "数据大屏" },
         component: () => import("@/views/homePage/index.vue"),
       },
-
       {
         path: "/projectManage",
         name: "projectManage",
         title: "投前管理",
         redirect: "/projectAllPage",
+        meta: { title: "投前管理" },
         children: [
           {
             path: "/projectDraft",
             name: "projectDraft",
             title: "项目遴选",
+            meta: { title: "项目遴选" },
             component: () => import("@/views/projectManage/projectDraft.vue"),
           },
           {
             path: "/projectSetUp",
             name: "projectSetUp",
             title: "项目立项",
+            meta: { title: "项目立项" },
             component: () => import("@/views/projectManage/projectSetUp.vue"),
           },
           {
             path: "/projectArgument",
             name: "projectArgument",
             title: "项目论证",
+            meta: { title: "项目论证" },
             component: () =>
               import("@/views/projectManage/projectArgument.vue"),
           },
@@ -61,6 +68,7 @@ const routes = [
             path: "/projectDecision",
             name: "projectDecision",
             title: "项目决策",
+            meta: { title: "项目决策" },
             component: () =>
               import("@/views/projectManage/projectDecision.vue"),
           },
@@ -68,12 +76,14 @@ const routes = [
             path: "/projectAllPage",
             name: "projectAllPage",
             title: "项目档案库",
+            meta: { title: "项目档案库" },
             component: () => import("@/views/projectManage/projectAllPage.vue"),
           },
           {
             path: "/addProject",
             name: "addProject",
             title: "新增项目",
+            meta: { title: "新增项目" },
             component: () => import("@/views/projectManage/addProject.vue"),
           },
         ],
@@ -83,11 +93,13 @@ const routes = [
         name: "investingManage",
         title: "投中管理",
         redirect: "/targetLiabilityStatement",
+        meta: { title: "投中管理" },
         children: [
           {
             path: "/targetLiabilityStatement",
             name: "targetLiabilityStatement",
             title: "投资目标责任书",
+            meta: { title: "投资目标责任书" },
             component: () =>
               import("@/views/investingManage/targetLiabilityStatement.vue"),
           },
@@ -95,12 +107,14 @@ const routes = [
             path: "/addStatement",
             name: "addStatement",
             title: "新增责任书",
+            meta: { title: "新增责任书" },
             component: () => import("@/views/investingManage/addStatement.vue"),
           },
           {
             path: "/targetControl",
             name: "targetControl",
             title: "投资控制",
+            meta: { title: "投资控制" },
             component: () =>
               import("@/views/investingManage/targetControl.vue"),
           },
@@ -108,18 +122,21 @@ const routes = [
             path: "/addControl",
             name: "addControl",
             title: "新增投资控制",
+            meta: { title: "新增投资控制" },
             component: () => import("@/views/investingManage/addControl.vue"),
           },
           {
             path: "/majorRisk",
             name: "majorRisk",
             title: "重大风险防控",
+            meta: { title: "重大风险防控" },
             component: () => import("@/views/investingManage/majorRisk.vue"),
           },
           {
             path: "/constructionTime",
             name: "constructionTime",
             title: "建设期投资回收",
+            meta: { title: "建设期投资回收" },
             component: () =>
               import("@/views/investingManage/constructionTime.vue"),
           },
@@ -127,6 +144,7 @@ const routes = [
             path: "/constructionTimeAdd",
             name: "constructionTimeAdd",
             title: "建设期投资回收",
+            meta: { title: "建设期投资回收" },
             component: () =>
               import("@/views/investingManage/constructionTimeAdd.vue"),
           },
@@ -134,18 +152,21 @@ const routes = [
             path: "/addRisk",
             name: "addRisk",
             title: "新增重大风险",
+            meta: { title: "新增重大风险" },
             component: () => import("@/views/investingManage/addRisk.vue"),
           },
           {
             path: "/construction",
             name: "construction",
             title: "建设期投资检查",
+            meta: { title: "建设期投资检查" },
             component: () => import("@/views/investingManage/construction.vue"),
           },
           {
             path: "/constructionAdd",
             name: "constructionAdd",
             title: "建设期投资检查",
+            meta: { title: "建设期投资检查" },
             component: () =>
               import("@/views/investingManage/constructionAdd.vue"),
           },
@@ -153,51 +174,58 @@ const routes = [
             path: "/bigIssues",
             name: "bigIssues",
             title: "重大事项审批",
+            meta: { title: "重大事项审批" },
             component: () => import("@/views/investingManage/bigIssues.vue"),
           },
           {
             path: "/bigIssuesAdd",
             name: "bigIssuesAdd",
             title: "重大事项审批",
+            meta: { title: "重大事项审批" },
             component: () => import("@/views/investingManage/bigIssuesAdd.vue"),
           },
           {
             path: "/quit",
             name: "quit",
             title: "项目退出",
+            meta: { title: "项目退出" },
             component: () => import("@/views/investingManage/quit.vue"),
           },
           {
             path: "/quitAdd",
             name: "quitAdd",
             title: "项目退出",
+            meta: { title: "项目退出" },
             component: () => import("@/views/investingManage/quitAdd.vue"),
           },
           {
             path: "/decision",
             name: "decision",
             title: "重新决策",
+            meta: { title: "重新决策" },
             component: () => import("@/views/investingManage/decision.vue"),
           },
           {
             path: "/decisionAdd",
             name: "decisionAdd",
             title: "重新决策",
+            meta: { title: "重新决策" },
             component: () => import("@/views/investingManage/decisionAdd.vue"),
           },
         ],
       },
-
       {
         path: "/castbehind",
         name: "castbehind",
         title: "投后管理",
         redirect: "/runningPeriod",
+        meta: { title: "投后管理" },
         children: [
           {
             path: "/investmentCecovery",
             name: "investmentCecovery",
             title: "运营期投资回收",
+            meta: { title: "运营期投资回收" },
             component: () =>
               import("@/views/castbehind/investmentCecovery.vue"),
           },
@@ -205,6 +233,7 @@ const routes = [
             path: "/investmentCecoveryAdd",
             name: "investmentCecoveryAdd",
             title: "运营期投资回收",
+            meta: { title: "运营期投资回收详情" },
             component: () =>
               import("@/views/castbehind/investmentCecoveryAdd.vue"),
           },
@@ -212,37 +241,42 @@ const routes = [
             path: "/runningPeriod",
             name: "runningPeriod",
             title: "运营期投资检查",
+            meta: { title: "运营期投资检查" },
             component: () => import("@/views/castbehind/runningPeriod.vue"),
           },
-
           {
             path: "/runningPeriodAdd",
             name: "runningPeriodAdd",
             title: "运营期投资检查",
+            meta: { title: "运营期投资检查" },
             component: () => import("@/views/castbehind/runningPeriodAdd.vue"),
           },
           {
             path: "/evaluate",
             name: "evaluate",
             title: "投资后评价",
+            meta: { title: "投资后评价" },
             component: () => import("@/views/castbehind/evaluate.vue"),
           },
           {
             path: "/evaluateAdd",
             name: "evaluateAdd",
             title: "投资后评价",
+            meta: { title: "投资后评价" },
             component: () => import("@/views/castbehind/evaluateAdd.vue"),
           },
           {
             path: "/turnover",
             name: "turnover",
             title: "移交管理",
+            meta: { title: "移交管理" },
             component: () => import("@/views/castbehind/turnover.vue"),
           },
           {
             path: "/turnoverAdd",
             name: "turnoverAdd",
             title: "移交管理",
+            meta: { title: "移交管理" },
             component: () => import("@/views/castbehind/turnoverAdd.vue"),
           },
         ],
@@ -251,6 +285,7 @@ const routes = [
         path: "/templateManage",
         name: "templateManage",
         title: "模板管理",
+        meta: { title: "模板管理" },
         component: () => import("@/views/projectManage/templateManage.vue"),
       },
       {
@@ -258,23 +293,27 @@ const routes = [
         name: "everydayPage",
         title: "日常管理",
         redirect: "/share",
+        meta: { title: "日常管理" },
         children: [
           {
             path: "/share",
             name: "share",
             title: "参股企业管理",
+            meta: { title: "参股企业管理" },
             component: () => import("@/views/everydayPage/share.vue"),
           },
           {
             path: "/shareAdd",
             name: "shareAdd",
             title: "参股企业管理",
+            meta: { title: "参股企业管理" },
             component: () => import("@/views/everydayPage/shareAdd.vue"),
           },
           {
             path: "/SuperFormExample",
             name: "SuperFormExample",
             title: "测试组件",
+            meta: { title: "测试组件" },
             component: () =>
               import("@/views/everydayPage/SuperFormExample.vue"),
           },
@@ -282,42 +321,49 @@ const routes = [
             path: "/system",
             name: "system",
             title: "体系建设",
+            meta: { title: "体系建设" },
             component: () => import("@/views/everydayPage/system.vue"),
           },
           {
             path: "/systemAdd",
             name: "systemAdd",
             title: "体系建设",
+            meta: { title: "体系建设" },
             component: () => import("@/views/everydayPage/systemAdd.vue"),
           },
           {
             path: "/investment",
             name: "investment",
             title: "投资规划",
+            meta: { title: "投资规划" },
             component: () => import("@/views/everydayPage/investment.vue"),
           },
           {
             path: "/investmentAdd",
             name: "investmentAdd",
             title: "投资规划",
+            meta: { title: "投资规划" },
             component: () => import("@/views/everydayPage/investmentAdd.vue"),
           },
           {
             path: "/everyday",
             name: "everyday",
             title: "日常信息",
+            meta: { title: "日常信息" },
             component: () => import("@/views/everydayPage/everyday.vue"),
           },
           {
             path: "/everydayAdd",
             name: "everydayAdd",
             title: "日常信息",
+            meta: { title: "日常信息" },
             component: () => import("@/views/everydayPage/everydayAdd.vue"),
           },
           {
             path: "/informationConstruction",
             name: "informationConstruction",
             title: "信息化建设",
+            meta: { title: "信息化建设" },
             component: () =>
               import("@/views/everydayPage/informationConstruction.vue"),
           },
@@ -325,6 +371,7 @@ const routes = [
             path: "/informationConstructionAdd",
             name: "informationConstructionAdd",
             title: "信息化建设",
+            meta: { title: "信息化建设" },
             component: () =>
               import("@/views/everydayPage/informationConstructionAdd.vue"),
           },
@@ -332,44 +379,44 @@ const routes = [
             path: "/vscouncil",
             name: "vscouncil",
             title: "投委会管理",
+            meta: { title: "投委会管理" },
             component: () => import("@/views/everydayPage/vscouncil.vue"),
           },
           {
             path: "/vscouncilAdd",
             name: "vscouncilAdd",
             title: "投委会管理",
+            meta: { title: "投委会管理" },
             component: () => import("@/views/everydayPage/vscouncilAdd.vue"),
           },
           {
             path: "/record",
             name: "record",
             title: "投资档案管理",
+            meta: { title: "投资档案管理" },
             component: () => import("@/views/everydayPage/record.vue"),
           },
           {
             path: "/recordAdd",
             name: "recordAdd",
             title: "投资档案管理",
+            meta: { title: "投资档案管理" },
             component: () => import("@/views/everydayPage/recordAdd.vue"),
           },
           {
             path: "/annual",
             name: "annual",
             title: "年度计划",
+            meta: { title: "年度计划" },
             component: () => import("@/views/everydayPage/annual.vue"),
           },
           {
             path: "/annualAdd",
             name: "annualAdd",
             title: "年度计划",
+            meta: { title: "年度计划" },
             component: () => import("@/views/everydayPage/annualAdd.vue"),
           },
-          // {
-          //   path: "/bigScreen",
-          //   name: "bigScreen",
-          //   title: "可视化大屏",
-          //   component: () => import("@/views/everydayPage/bigScreen.vue"),
-          // },
         ],
       },
       {
@@ -377,31 +424,34 @@ const routes = [
         name: "elseManage",
         title: "其他管理",
         redirect: "/share",
+        meta: { title: "其他管理" },
         children: [
           {
             path: "/cost",
             name: "cost",
             title: "成本管理",
+            meta: { title: "成本管理" },
             component: () => import("@/views/elseManage/cost.vue"),
           },
           {
             path: "/costAdd",
             name: "costAdd",
             title: "成本管理",
+            meta: { title: "成本管理" },
             component: () => import("@/views/elseManage/costAdd.vue"),
           },
-
           {
             path: "/property",
             name: "property",
             title: "资产管理情况",
+            meta: { title: "资产管理情况" },
             component: () => import("@/views/elseManage/property.vue"),
           },
-
           {
             path: "/link",
             name: "link",
             title: "链接管理",
+            meta: { title: "链接管理" },
             component: () => import("@/views/elseManage/link.vue"),
           },
         ],
@@ -410,36 +460,41 @@ const routes = [
         path: "/systemManage",
         name: "systemManage",
         title: "系统管理",
-        meta: { menuName: "系统管理" },
+        meta: { menuName: "系统管理", title: "系统管理" }, // 补充title字段
         children: [
           {
             path: "departManage",
             name: "departManage",
             title: "部门管理",
+            meta: { title: "部门管理" },
             component: () => import("@/views/systemManage/departManage.vue"),
           },
           {
             path: "userManage",
             name: "userManage",
             title: "用户管理",
+            meta: { title: "用户管理" },
             component: () => import("@/views/systemManage/userManage.vue"),
           },
           {
             path: "roleManage",
             name: "roleManage",
             title: "角色管理",
+            meta: { title: "角色管理" },
             component: () => import("@/views/systemManage/roleManage.vue"),
           },
           {
             path: "menuManage",
             name: "menuManage",
             title: "菜单管理",
+            meta: { title: "菜单管理" },
             component: () => import("@/views/systemManage/menuManage.vue"),
           },
           {
             path: "resourceManage",
             name: "resourceManage",
             title: "资源库管理",
+            meta: { title: "资源库管理" },
             component: () => import("@/views/systemManage/resourceManage.vue"),
           },
         ],
@@ -448,6 +503,7 @@ const routes = [
         path: "/building",
         name: "building",
         title: "建设中",
+        meta: { title: "建设中" },
         component: () => import("@/views/homePage/building.vue"),
       },
     ],

src/styles/manage.css

+.system-manage-container {
+  padding: 16px;
+  background: #ecf2f8;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+.system-manage-header {
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 8px;
+  padding: 12px 20px 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.system-manage-header .header-left {
+  flex: 1;
+  width: 0;
+}
+.system-manage-header .header-left .el-input,
+.system-manage-header .header-left .el-select {
+  width: 220px;
+}
+.system-manage-content {
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+.manage-content {
+  flex: 1;
+  height: 0;
+}
+.manage-content .common-table {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.manage-content .common-table .table-container {
+  flex: 1;
+  height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.manage-content .common-table .table-container .el-table {
+  flex: 1;
+  height: 0;
+}
+.manage-container {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  background: rgba(157, 188, 218, 0.1);
+}
+.manage-wrap {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 8px;
+  padding: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+.manage-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+.manage-content {
+  flex: 1;
+  height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.manage-content .common-table {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.manage-content .common-table .table-container {
+  flex: 1;
+  height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.manage-content .common-table .table-container .el-table {
+  flex: 1;
+  height: 0;
+}
+.add-project-container {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+.add-project-container .el-collapse-item__header {
+  color: var(--el-color-primary);
+}
+.add-project-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+.add-project-content {
+  flex: 1;
+  height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.add-project-content .tabs-content {
+  flex: 1;
+  height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.add-project-content .tabs-content > .el-tabs {
+  flex: 1;
+  height: 0;
+}
+.add-project-content .el-tabs {
+  height: 100%;
+}
+.add-project-content .el-tab-pane {
+  height: 100%;
+}
+.add-project-content .tab-content {
+  height: 100%;
+  overflow: auto;
+  padding: 0 10px;
+}
+.add-project-content .tab-content .col-title {
+  height: 24px;
+  line-height: 24px;
+  font-weight: bold;
+  text-align: center;
+}
+.add-project-content .tab-content .tab-handle {
+  margin: 10px 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.add-project-content .tab-content .el-table {
+  margin-bottom: 10px;
+}
+.add-project-content .tab-content .el-table thead {
+  color: #000;
+}
+.add-project-content .tab-content .el-table thead th {
+  background: #f5f7fa;
+}
+.add-project-content .tab-content .el-table thead th .cell {
+  text-align: center;
+}
+.add-project-content .tab-content .el-table .sums-column {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.add-project-content .tab-content .el-table .sums-column > div {
+  height: 26px;
+  line-height: 26px;
+  text-align: center;
+}
+.add-project-content .tab-content .upload-file-wrap {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.add-project-content .tab-content .upload-file-wrap .file-name {
+  flex: 1;
+  width: 0;
+  color: #409eff;
+  cursor: pointer;
+  -webkit-background-clip: text;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.add-project-content .tab-content .upload-file-wrap .delete-btn {
+  cursor: pointer;
+  color: #f56c6c;
+}
+.add-project-content .tab-content .el-select__wrapper .el-select__selection.is-near {
+  max-height: 120px;
+  overflow: auto;
+}
+.add-project-content .always-click {
+  padding: 2px;
+  font-size: 12px;
+  cursor: pointer !important;
+  color: var(--el-color-primary);
+  font-weight: 500;
+  font-family: Arial, sans-serif;
+  display: inline-flex;
+  align-items: center;
+}
+.add-project-content .project-tab-content {
+  padding: 0 20px;
+  height: 100%;
+}
+.add-dialog .el-tree {
+  width: 100%;
+}
+.tree-content {
+  overflow: auto;
+  position: relative;
+}
+.tree-content .el-tree:not(:hover) {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.tree-content .el-tree:not(:hover)::-webkit-scrollbar {
+  display: none;
+}
+.tree-content .el-tree:hover {
+  scrollbar-width: thin;
+}
+.tree-content .el-tree:hover::-webkit-scrollbar {
+  display: block;
+  width: 6px;
+}
+.tree-content .el-tree:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(144, 147, 153, 0.3);
+  border-radius: 3px;
+}
+.tree-content .el-tree:hover::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+.tree-content .custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+.tree-content .custom-tree-node .node-name {
+  flex: 1;
+  width: 0;
+  -webkit-background-clip: text;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.tree-content .custom-tree-node .node-key {
+  font-size: 12px;
+  color: #969696;
+}

src/styles/manage.less

-.system-manage-container{
+.system-manage-container {
+  padding: 16px;
+  background: #ecf2f8;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+.system-manage-header {
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 8px;
+  padding: 12px 20px 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  .header-left {
+    flex: 1;
+    width: 0;
+    .el-input,
+    .el-select {
+      width: 220px;
+    }
+  }
+}
+.system-manage-content {
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+.manage-content {
+  flex: 1;
+  height: 0;
+  .common-table {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .table-container {
+      flex: 1;
+      height: 0;
+      display: flex;
+      flex-direction: column;
+      .el-table {
+        flex: 1;
+        height: 0;
+      }
+    }
+  }
+}
+.manage {
+  &-container {
+    width: 100%;
+    height: 100%;
     padding: 20px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
     background: rgba(157, 188, 218, 0.1);
+  }
+  &-wrap {
+    width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
-    box-sizing: border-box;
-}
-.system-manage-header{
     background: rgba(255, 255, 255, 0.9);
     border-radius: 8px;
-    padding: 12px 20px 0;
+    padding: 12px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  &-header {
     display: flex;
     justify-content: space-between;
-    align-items: center;
     margin-bottom: 10px;
-    .header-left{
-        flex: 1;
-        width: 0;
-        .el-input, .el-select{
-            width: 220px;
-        }
-    }
-}
-.system-manage-content{
-    background: rgba(255, 255, 255, 0.9);
-    border-radius: 8px;
-    padding: 20px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-.manage-content{
+  }
+  &-content {
     flex: 1;
     height: 0;
-    .common-table{
-        height: 100%;
+    display: flex;
+    flex-direction: column;
+    .common-table {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      .table-container {
+        flex: 1;
+        height: 0;
         display: flex;
         flex-direction: column;
-        .table-container{
-            flex: 1;
-            height: 0;
-            display: flex;
-            flex-direction: column;
-            .el-table{
-                flex: 1;
-                height: 0;
-            }
+        .el-table {
+          flex: 1;
+          height: 0;
         }
+      }
     }
+  }
 }
-.manage{
-    &-container{
-        width: 100%;
-        height: 100%;
-        padding: 20px;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        background: rgba(157, 188, 218, 0.1);
-    }
-    &-wrap{
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        background: rgba(255, 255, 255, 0.9);
-        border-radius: 8px;
-        padding: 12px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    }
 
-    &-header{
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 10px;
+.add-project {
+  &-container {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    .el-collapse-item__header {
+      color: var(--el-color-primary);
     }
-    &-content{
+  }
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
+  &-content {
+    flex: 1;
+    height: 0;
+    display: flex;
+    flex-direction: column;
+    .tabs-content {
+      flex: 1;
+      height: 0;
+      display: flex;
+      flex-direction: column;
+      & > .el-tabs {
         flex: 1;
         height: 0;
-        display: flex;
-        flex-direction: column;
-        .common-table{
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            .table-container{
-                flex: 1;
-                height: 0;
-                display: flex;
-                flex-direction: column;
-                .el-table{
-                    flex: 1;
-                    height: 0;
-                }
-            }
-        }
+      }
     }
-}
-
-.add-project{
-    &-container{
-        width: 100%;
-        height: 100%;
-        padding: 20px;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        .el-collapse-item__header{
-            color: var(--el-color-primary);
-        }
+    .el-tabs {
+      height: 100%;
     }
-    &-header{
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 10px;
+    .el-tab-pane {
+      height: 100%;
     }
-    &-content{
-        flex: 1;
-        height: 0;
+    .tab-content {
+      height: 100%;
+      overflow: auto;
+      padding: 0 10px;
+      .col-title {
+        height: 24px;
+        line-height: 24px;
+        font-weight: bold;
+        text-align: center;
+      }
+      .tab-handle {
+        margin: 10px 0;
         display: flex;
-        flex-direction: column;
-        .tabs-content{
-            flex: 1;
-            height: 0;
-            display: flex;
-            flex-direction: column;
-            &>.el-tabs{
-                flex: 1;
-                height: 0;
+        justify-content: flex-end;
+        align-items: center;
+      }
+      .el-table {
+        margin-bottom: 10px;
+        thead {
+          color: #000;
+          th {
+            background: #f5f7fa;
+            .cell {
+              text-align: center;
             }
+          }
         }
-        .el-tabs{
-            height: 100%;
-        }
-        .el-tab-pane{
-            height: 100%;
+        .sums-column {
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          & > div {
+            height: 26px;
+            line-height: 26px;
+            text-align: center;
+          }
         }
-        .tab-content{
-            height: 100%;
-            overflow: auto;
-            padding: 0 10px;
-            .col-title{
-                height: 24px;
-                line-height: 24px;
-                font-weight: bold;
-                text-align: center;
-            }
-            .tab-handle{
-                margin: 10px 0;
-                display: flex;
-                justify-content: flex-end;
-                align-items: center;
-            }
-            .el-table{
-                margin-bottom: 10px;
-                thead {
-                    color: #000;
-                    th{
-                        background: #f5f7fa;
-                        .cell{
-                            text-align: center;
-                        }
-                    }
-                }
-                .sums-column{
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: flex-start;
-                    &>div{
-                        height: 26px;
-                        line-height: 26px;
-                        text-align: center;
-                    }
-                }
-            }
-            .upload-file-wrap{
-                display: flex;
-                justify-content: space-between;
-                flex-wrap: wrap;
-                .file-name{
-                    flex: 1;
-                    width: 0;
-                    color: #409eff;
-                    cursor: pointer;
-                    -webkit-background-clip: text;
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                }
-                .delete-btn{
-                    cursor: pointer;
-                    color: #F56C6C;
-                }
-            }
-            .el-select__wrapper{
-                .el-select__selection.is-near{
-                    max-height: 120px;
-                    overflow: auto;
-                }
-            }
+      }
+      .upload-file-wrap {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        .file-name {
+          flex: 1;
+          width: 0;
+          color: #409eff;
+          cursor: pointer;
+          -webkit-background-clip: text;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
-        .always-click{
-            padding: 2px;
-            font-size: 12px;
-            cursor: pointer !important;
-            color: var(--el-color-primary);
-            font-weight: 500;
-            font-family: Arial, sans-serif;
-            display: inline-flex;
-            align-items: center;
+        .delete-btn {
+          cursor: pointer;
+          color: #f56c6c;
         }
-        .project-tab-content{
-            padding: 0 20px;
-            height: 100%;
+      }
+      .el-select__wrapper {
+        .el-select__selection.is-near {
+          max-height: 120px;
+          overflow: auto;
         }
+      }
     }
-}
-.add-dialog{
-    .el-tree{
-        width: 100%;
+    .always-click {
+      padding: 2px;
+      font-size: 12px;
+      cursor: pointer !important;
+      color: var(--el-color-primary);
+      font-weight: 500;
+      font-family: Arial, sans-serif;
+      display: inline-flex;
+      align-items: center;
+    }
+    .project-tab-content {
+      padding: 0 20px;
+      height: 100%;
     }
+  }
+}
+.add-dialog {
+  .el-tree {
+    width: 100%;
+  }
 }
 .tree-content {
-    overflow: auto;
-    position: relative;
-    .el-tree {
+  overflow: auto;
+  position: relative;
+  .el-tree {
     //   max-height: 700px;
     //   overflow-y: auto;
-      // 只有当内容超过700px时才显示滚动条
-      &:not(:hover) {
-        scrollbar-width: none;
-        -ms-overflow-style: none;
-        &::-webkit-scrollbar {
-          display: none;
-        }
+    // 只有当内容超过700px时才显示滚动条
+    &:not(:hover) {
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      &::-webkit-scrollbar {
+        display: none;
       }
-      &:hover {
-        scrollbar-width: thin;
-        &::-webkit-scrollbar {
-          display: block;
-          width: 6px;
-        }
-        &::-webkit-scrollbar-thumb {
-          background-color: rgba(144, 147, 153, 0.3);
-          border-radius: 3px;
-        }
-        &::-webkit-scrollbar-track {
-          background-color: transparent;
-        }
+    }
+    &:hover {
+      scrollbar-width: thin;
+      &::-webkit-scrollbar {
+        display: block;
+        width: 6px;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: rgba(144, 147, 153, 0.3);
+        border-radius: 3px;
+      }
+      &::-webkit-scrollbar-track {
+        background-color: transparent;
       }
     }
-    .custom-tree-node {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        font-size: 14px;
-        padding-right: 8px;
-        .node-name{
-            flex: 1;
-            width: 0;
-            -webkit-background-clip: text;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-        .node-key{
-            font-size: 12px;
-            color: #969696;
-        }
+  }
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+    .node-name {
+      flex: 1;
+      width: 0;
+      -webkit-background-clip: text;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .node-key {
+      font-size: 12px;
+      color: #969696;
     }
-  }
+  }
\ No newline at end of file
+}

src/styles/verticalManages.css

 .system-manage-container {
-  padding: 20px;
-  background: rgba(157, 188, 218, 0.1);
+  padding: 16px;
+  background: #ecf2f8;
   height: 100%;
   display: flex;
   flex-direction: column;

src/styles/verticalManages.less

 .system-manage-container {
-  padding: 20px;
-  background: rgba(157, 188, 218, 0.1);
+  padding: 16px;
+  background: #ecf2f8;
   height: 100%;
   display: flex;
   flex-direction: column;

src/views/everydayPage/.claude/settings.local.json

+{
+  "permissions": {
+    "allow": [
+      "Bash(grep -E \"\\\\.\\(js|ts\\)$\")"
+    ]
+  }
+}