增加历史信息

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