增加历史信息

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;

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{
-    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

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\\)$\")"
+    ]
+  }
+}