增加历史信息

291bad24 · zhanghan · 05d4eaef · 291bad24 · 291bad24 · 291bad24
Commit 291bad24 authored Mar 16, 2026 by zhanghan
7 changed files
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -38,7 +38,27 @@

      <!-- 主内容Main -->
      <el-main class="city-main">
+        <!-- 路由标签页 -->
+        <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;

--- a/src/router/routes.js
+++ b/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"),
      },
    ],

--- a/src/styles/manage.css
+++ b/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;
+}
--- a/src/styles/manage.less
+++ b/src/styles/manage.less
-.system-manage-container{
-    padding: 20px;
-    background: rgba(157, 188, 218, 0.1);
+.system-manage-container {
+  padding: 16px;
+  background: #ecf2f8;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
 }
-.system-manage-header{
+.system-manage-header {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 12px 20px 0;
@@ -15,41 +15,42 @@
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
-    .header-left{
+  .header-left {
    flex: 1;
    width: 0;
-        .el-input, .el-select{
+    .el-input,
+    .el-select {
      width: 220px;
    }
  }
 }
-.system-manage-content{
+.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{
+.manage-content {
  flex: 1;
  height: 0;
-    .common-table{
+  .common-table {
    height: 100%;
    display: flex;
    flex-direction: column;
-        .table-container{
+    .table-container {
      flex: 1;
      height: 0;
      display: flex;
      flex-direction: column;
-            .el-table{
+      .el-table {
        flex: 1;
        height: 0;
      }
    }
  }
 }
-.manage{
-    &-container{
+.manage {
+  &-container {
    width: 100%;
    height: 100%;
    padding: 20px;
@@ -58,7 +59,7 @@
    flex-direction: column;
    background: rgba(157, 188, 218, 0.1);
  }
-    &-wrap{
+  &-wrap {
    width: 100%;
    height: 100%;
    display: flex;
@@ -69,26 +70,26 @@
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

-    &-header{
+  &-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
-    &-content{
+  &-content {
    flex: 1;
    height: 0;
    display: flex;
    flex-direction: column;
-        .common-table{
+    .common-table {
      height: 100%;
      display: flex;
      flex-direction: column;
-            .table-container{
+      .table-container {
        flex: 1;
        height: 0;
        display: flex;
        flex-direction: column;
-                .el-table{
+        .el-table {
          flex: 1;
          height: 0;
        }
@@ -97,87 +98,87 @@
  }
 }

-.add-project{
-    &-container{
+.add-project {
+  &-container {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
-        .el-collapse-item__header{
+    .el-collapse-item__header {
      color: var(--el-color-primary);
    }
  }
-    &-header{
+  &-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
-    &-content{
+  &-content {
    flex: 1;
    height: 0;
    display: flex;
    flex-direction: column;
-        .tabs-content{
+    .tabs-content {
      flex: 1;
      height: 0;
      display: flex;
      flex-direction: column;
-            &>.el-tabs{
+      & > .el-tabs {
        flex: 1;
        height: 0;
      }
    }
-        .el-tabs{
+    .el-tabs {
      height: 100%;
    }
-        .el-tab-pane{
+    .el-tab-pane {
      height: 100%;
    }
-        .tab-content{
+    .tab-content {
      height: 100%;
      overflow: auto;
      padding: 0 10px;
-            .col-title{
+      .col-title {
        height: 24px;
        line-height: 24px;
        font-weight: bold;
        text-align: center;
      }
-            .tab-handle{
+      .tab-handle {
        margin: 10px 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
-            .el-table{
+      .el-table {
        margin-bottom: 10px;
        thead {
          color: #000;
-                    th{
+          th {
            background: #f5f7fa;
-                        .cell{
+            .cell {
              text-align: center;
            }
          }
        }
-                .sums-column{
+        .sums-column {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
-                    &>div{
+          & > div {
            height: 26px;
            line-height: 26px;
            text-align: center;
          }
        }
      }
-            .upload-file-wrap{
+      .upload-file-wrap {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
-                .file-name{
+        .file-name {
          flex: 1;
          width: 0;
          color: #409eff;
@@ -187,19 +188,19 @@
          overflow: hidden;
          text-overflow: ellipsis;
        }
-                .delete-btn{
+        .delete-btn {
          cursor: pointer;
-                    color: #F56C6C;
+          color: #f56c6c;
        }
      }
-            .el-select__wrapper{
-                .el-select__selection.is-near{
+      .el-select__wrapper {
+        .el-select__selection.is-near {
          max-height: 120px;
          overflow: auto;
        }
      }
    }
-        .always-click{
+    .always-click {
      padding: 2px;
      font-size: 12px;
      cursor: pointer !important;
@@ -209,14 +210,14 @@
      display: inline-flex;
      align-items: center;
    }
-        .project-tab-content{
+    .project-tab-content {
      padding: 0 20px;
      height: 100%;
    }
  }
 }
-.add-dialog{
-    .el-tree{
+.add-dialog {
+  .el-tree {
    width: 100%;
  }
 }
@@ -256,7 +257,7 @@
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
-        .node-name{
+    .node-name {
      flex: 1;
      width: 0;
      -webkit-background-clip: text;
@@ -264,9 +265,9 @@
      overflow: hidden;
      text-overflow: ellipsis;
    }
-        .node-key{
+    .node-key {
      font-size: 12px;
      color: #969696;
    }
  }
-  }
\ No newline at end of file
+}
--- a/src/styles/verticalManages.css
+++ b/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;

--- a/src/styles/verticalManages.less
+++ b/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;

--- a/src/views/everydayPage/.claude/settings.local.json
+++ b/src/views/everydayPage/.claude/settings.local.json
+{
+  "permissions": {
+    "allow": [
+      "Bash(grep -E \"\\\\.\\(js|ts\\)$\")"
+    ]
+  }
+}