From 66d6e747d9f73d047823508747cf9d5ec3ae00c5 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Sun, 26 Apr 2026 00:47:30 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E6=B7=BB=E5=8A=A0=E5=93=8D?=
 =?UTF-8?q?=E5=BA=94=E5=BC=8F=E9=A1=B5=E9=9D=A2=E5=86=85=E8=BE=B9=E8=B7=9D?=
 =?UTF-8?q?=E5=8F=98=E9=87=8F=E5=B9=B6=E6=9B=B4=E6=96=B0=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Copilot <copilot@github.com>
---
 web/src/assets/css/base.css                   |  25 ++
 web/src/assets/css/extensions.less            |   6 +-
 web/src/assets/css/main.css                   |   2 +-
 web/src/assets/css/markdown-preview.less      | 199 +++++++++++++---
 web/src/components/AgentMessageComponent.vue  | 222 +-----------------
 web/src/components/ConversationNavSection.vue |  41 +++-
 web/src/components/HeaderComponent.vue        |   2 +-
 web/src/components/StatusBar.vue              |   7 +-
 .../ToolCallingResult/BaseToolCall.vue        |   4 +-
 .../tools/MysqlDescribeTableTool.vue          |   2 +-
 .../tools/MysqlListTablesTool.vue             |   2 +-
 .../tools/MysqlQueryTool.vue                  |   5 +-
 .../components/ToolCallsGroupComponent.vue    |   1 +
 .../dashboard/StatsOverviewComponent.vue      |   2 +-
 web/src/views/DashboardView.vue               |   3 +-
 web/src/views/DataBaseView.vue                |  27 +--
 16 files changed, 257 insertions(+), 293 deletions(-)

diff --git a/web/src/assets/css/base.css b/web/src/assets/css/base.css
index 2e72af23..0dccfc52 100644
--- a/web/src/assets/css/base.css
+++ b/web/src/assets/css/base.css
@@ -141,6 +141,9 @@
 
   --min-width: 400px;
 
+  /* Page Padding - 响应式页面内边距 */
+  --page-padding: 20px;
+
   /* Ant Design 兼容变量 */
   --color-bg-container: var(--main-0);
   --color-bg-elevated: var(--gray-10);
@@ -182,3 +185,25 @@
   scrollbar-width: thin;
   scrollbar-color: var(--gray-200) transparent;
 }
+
+/* Page Padding 响应式断点 */
+@media (min-width: 1440px) {
+  :root {
+    --page-padding: 24px;
+  }
+}
+
+@media (max-width: 1199px) {
+  :root {
+    --page-padding: 16px;
+  }
+}
+
+
+
+@media (max-width: 767px) {
+  :root {
+    --page-padding: 12px;
+  }
+}
+
diff --git a/web/src/assets/css/extensions.less b/web/src/assets/css/extensions.less
index 066deb6b..fc92648d 100644
--- a/web/src/assets/css/extensions.less
+++ b/web/src/assets/css/extensions.less
@@ -31,7 +31,7 @@
   flex-shrink: 0;
 
   .sidebar-toolbar {
-    padding: 8px 12px 0;
+    padding: 8px var(--page-padding) 0;
     display: flex;
     align-items: center;
     gap: 8px;
@@ -60,7 +60,7 @@
   }
 
   .search-box {
-    padding: 8px 12px 0;
+    padding: 8px var(--page-padding) 0;
 
     :deep(.ant-input-affix-wrapper) {
       height: 28px;
@@ -136,7 +136,7 @@
   .list-container {
     flex: 1;
     overflow-y: auto;
-    padding: 12px;
+    padding: 12px var(--page-padding);
     display: flex;
     flex-direction: column;
     gap: 8px;
diff --git a/web/src/assets/css/main.css b/web/src/assets/css/main.css
index 9a77efb9..d3a45b48 100644
--- a/web/src/assets/css/main.css
+++ b/web/src/assets/css/main.css
@@ -37,7 +37,7 @@ body {
 
 .layout-container {
   width: 100%;
-  padding: 0px 30px;
+  padding: 0 var(--page-padding);
 
   h2 {
     margin: 20px 0 10px 0;
diff --git a/web/src/assets/css/markdown-preview.less b/web/src/assets/css/markdown-preview.less
index 232b6cc7..0aba81b7 100644
--- a/web/src/assets/css/markdown-preview.less
+++ b/web/src/assets/css/markdown-preview.less
@@ -4,49 +4,188 @@
   .md-editor {
     background: transparent;
   }
-  .md-editor-preview-wrapper {
-    padding: 0;
-  }
-
-  .md-editor-preview {
-    font-size: 14px;
+  .md-editor-preview-wrapper .md-editor-preview {
+    font-size: 0.95rem;
     line-height: 1.75;
     color: var(--gray-1000);
+    padding: 0;
+    max-width: 100%;
+    padding: 0;
+    font-family:
+      -apple-system, BlinkMacSystemFont, 'Noto Sans SC', 'PingFang SC', 'Noto Sans SC',
+      'Microsoft YaHei', 'Hiragino Sans GB', 'Source Han Sans CN', 'Courier New', monospace;
 
-    h1 {
-      font-size: 1.2rem;
-      margin: 16px 0 12px;
-      font-weight: 600;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 2em 0;
+      font-size: 15px;
+      display: table;
+      outline: 1px solid var(--gray-100);
+      outline-offset: 12px;
+      border-radius: 8px;
+
+      thead tr th {
+        padding-top: 0;
+        background-color: transparent !important;
+      }
+
+
+      thead th,
+      tbody th {
+        border: none;
+        border-bottom: 1px solid var(--gray-200);
+      }
+
+      tbody tr:last-child td {
+        border-bottom: 1px solid var(--gray-200);
+        border: none;
+        padding-bottom: 0;
+      }
     }
 
+    h1,
     h2 {
-      font-size: 1.15rem;
-      margin: 16px 0 12px;
-      font-weight: 600;
-    }
-
-    h3 {
-      font-size: 1.1rem;
-      margin: 14px 0 10px;
-      font-weight: 600;
+      font-size: 1.2rem;
     }
 
+    h3,
     h4 {
-      font-size: 1rem;
-      margin: 14px 0 10px;
-      font-weight: 600;
-    }
-
-    h5 {
-      font-size: 1rem;
-      margin: 12px 0 8px;
-      font-weight: 600;
+      font-size: 1.1rem;
     }
 
+    h5,
     h6 {
       font-size: 1rem;
-      margin: 12px 0 8px;
-      font-weight: 600;
     }
+
+    strong {
+      font-weight: 500;
+    }
+
+    li > p,
+    ol > p,
+    ul > p {
+      margin: 0.25rem 0;
+    }
+
+    ul li::marker,
+    ol li::marker {
+      color: var(--main-bright);
+    }
+
+    ul,
+    ol {
+      padding-left: 1.625rem;
+    }
+
+    cite {
+      font-size: 12px;
+      color: var(--gray-800);
+      font-style: normal;
+      background-color: var(--gray-200);
+      border-radius: 4px;
+      outline: 2px solid var(--gray-200);
+      padding: 0rem 0.25rem;
+      margin-left: 4px;
+      cursor: pointer;
+      user-select: none;
+      position: relative;
+
+      &:hover::after {
+        content: attr(source);
+        position: absolute;
+        bottom: calc(100% + 6px);
+        left: 50%;
+        transform: translateX(-50%);
+        padding: 8px 12px;
+        background-color: #222;
+        color: #fff;
+        font-size: 13px;
+        line-height: 1.5;
+        border-radius: 6px;
+        min-width: 100px;
+        max-width: 400px;
+        width: max-content;
+        white-space: normal;
+        word-break: break-word;
+        z-index: 1000;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        pointer-events: none;
+        text-align: center;
+      }
+
+      &:hover::before {
+        content: '';
+        position: absolute;
+        bottom: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        border: 5px solid transparent;
+        border-top-color: var(--gray-900);
+        z-index: 1000;
+      }
+    }
+
+    a {
+      color: var(--main-700);
+    }
+
+    .md-editor-code {
+      border: var(--gray-50);
+      border-radius: 8px;
+
+      .md-editor-code-head {
+        background-color: var(--gray-50);
+        z-index: 1;
+
+        .md-editor-collapse-tips {
+          color: var(--gray-400);
+        }
+      }
+    }
+
+    code {
+      font-size: 13px;
+      font-family:
+        'Menlo', 'Monaco', 'Consolas', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei',
+        'Hiragino Sans GB', 'Source Han Sans CN', 'Courier New', monospace;
+      line-height: 1.5;
+      letter-spacing: 0.025em;
+      tab-size: 4;
+      -moz-tab-size: 4;
+      background-color: var(--gray-25);
+    }
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+
+
+    th,
+    td {
+      padding: 0.5rem 0rem;
+      text-align: left;
+      border: none;
+    }
+
+    td {
+      border-bottom: 1px solid var(--gray-100);
+      color: var(--gray-800);
+    }
+
+    th {
+      font-weight: 600;
+      color: var(--gray-800);
+    }
+
+    tr {
+      background-color: var(--gray-0);
+    }
+
+    // tbody tr:last-child td {
+    //   border-bottom: none;
+    // }
+
   }
 }
diff --git a/web/src/components/AgentMessageComponent.vue b/web/src/components/AgentMessageComponent.vue
index f25d3abc..d5b83802 100644
--- a/web/src/components/AgentMessageComponent.vue
+++ b/web/src/components/AgentMessageComponent.vue
@@ -47,7 +47,7 @@
         :showCodeRowNumber="false"
         :modelValue="parsedData.content"
         :key="message.id"
-        class="message-md"
+        class="message-md flat-md-preview"
       />
 
       <div v-else-if="parsedData.reasoning_content" class="empty-block"></div>
@@ -555,224 +555,4 @@ const parsedData = computed(() => {
 :deep(.message-md) {
   margin: 8px 0;
 }
-
-:deep(.message-md .md-editor-preview-wrapper) {
-  max-width: 100%;
-  padding: 0;
-  font-family:
-    -apple-system, BlinkMacSystemFont, 'Noto Sans SC', 'PingFang SC', 'Noto Sans SC',
-    'Microsoft YaHei', 'Hiragino Sans GB', 'Source Han Sans CN', 'Courier New', monospace;
-
-  #preview-only-preview {
-    font-size: 1rem;
-    line-height: 1.75;
-    color: var(--gray-1000);
-  }
-
-  h1,
-  h2 {
-    font-size: 1.2rem;
-  }
-
-  h3,
-  h4 {
-    font-size: 1.1rem;
-  }
-
-  h5,
-  h6 {
-    font-size: 1rem;
-  }
-
-  strong {
-    font-weight: 500;
-  }
-
-  li > p,
-  ol > p,
-  ul > p {
-    margin: 0.25rem 0;
-  }
-
-  ul li::marker,
-  ol li::marker {
-    color: var(--main-bright);
-  }
-
-  ul,
-  ol {
-    padding-left: 1.625rem;
-  }
-
-  cite {
-    font-size: 12px;
-    color: var(--gray-800);
-    font-style: normal;
-    background-color: var(--gray-200);
-    border-radius: 4px;
-    outline: 2px solid var(--gray-200);
-    padding: 0rem 0.25rem;
-    margin-left: 4px;
-    cursor: pointer;
-    user-select: none;
-    position: relative;
-
-    &:hover::after {
-      content: attr(source);
-      position: absolute;
-      bottom: calc(100% + 6px);
-      left: 50%;
-      transform: translateX(-50%);
-      padding: 8px 12px;
-      background-color: #222;
-      color: #fff;
-      font-size: 13px;
-      line-height: 1.5;
-      border-radius: 6px;
-      min-width: 100px;
-      max-width: 400px;
-      width: max-content;
-      white-space: normal;
-      word-break: break-word;
-      z-index: 1000;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-      pointer-events: none;
-      text-align: center;
-    }
-
-    &:hover::before {
-      content: '';
-      position: absolute;
-      bottom: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      border: 5px solid transparent;
-      border-top-color: var(--gray-900);
-      z-index: 1000;
-    }
-  }
-
-  a {
-    color: var(--main-700);
-  }
-
-  .md-editor-code {
-    border: var(--gray-50);
-    border-radius: 8px;
-
-    .md-editor-code-head {
-      background-color: var(--gray-50);
-      z-index: 1;
-
-      .md-editor-collapse-tips {
-        color: var(--gray-400);
-      }
-    }
-  }
-
-  code {
-    font-size: 13px;
-    font-family:
-      'Menlo', 'Monaco', 'Consolas', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei',
-      'Hiragino Sans GB', 'Source Han Sans CN', 'Courier New', monospace;
-    line-height: 1.5;
-    letter-spacing: 0.025em;
-    tab-size: 4;
-    -moz-tab-size: 4;
-    background-color: var(--gray-25);
-  }
-
-  p:last-child {
-    margin-bottom: 0;
-  }
-
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 2em 0;
-    font-size: 15px;
-    display: table;
-    outline: 1px solid var(--gray-100);
-    outline-offset: 14px;
-    border-radius: 12px;
-
-    thead tr th {
-      padding-top: 0;
-    }
-
-    thead th,
-    tbody th {
-      border: none;
-      border-bottom: 1px solid var(--gray-200);
-    }
-
-    tbody tr:last-child td {
-      border-bottom: 1px solid var(--gray-200);
-      border: none;
-      padding-bottom: 0;
-    }
-  }
-
-  th,
-  td {
-    padding: 0.5rem 0rem;
-    text-align: left;
-    border: none;
-  }
-
-  td {
-    border-bottom: 1px solid var(--gray-100);
-    color: var(--gray-800);
-  }
-
-  th {
-    font-weight: 600;
-    color: var(--gray-800);
-  }
-
-  tr {
-    background-color: var(--gray-0);
-  }
-
-  // tbody tr:last-child td {
-  //   border-bottom: none;
-  // }
-}
-
-:deep(.chat-box.font-smaller #preview-only-preview) {
-  font-size: 14px;
-
-  h1,
-  h2 {
-    font-size: 1.1rem;
-  }
-
-  h3,
-  h4 {
-    font-size: 1rem;
-  }
-}
-
-:deep(.chat-box.font-larger #preview-only-preview) {
-  font-size: 16px;
-
-  h1,
-  h2 {
-    font-size: 1.3rem;
-  }
-
-  h3,
-  h4 {
-    font-size: 1.2rem;
-  }
-
-  h5,
-  h6 {
-    font-size: 1.1rem;
-  }
-
-  code {
-    font-size: 14px;
-  }
-}
 </style>
diff --git a/web/src/components/ConversationNavSection.vue b/web/src/components/ConversationNavSection.vue
index 53a89c4d..f763003b 100644
--- a/web/src/components/ConversationNavSection.vue
+++ b/web/src/components/ConversationNavSection.vue
@@ -1,8 +1,11 @@
 <template>
   <section class="conversation-nav-section" :class="{ collapsed }">
     <div v-if="showHistory && !collapsed" class="history-panel">
-      <div class="history-label">对话历史</div>
-      <div class="conversation-list">
+      <div class="history-label" @click="listCollapsed = !listCollapsed">
+        <span>对话历史</span>
+        <ChevronDown :size="14" class="collapse-icon" :class="{ collapsed: listCollapsed }" />
+      </div>
+      <div v-show="!listCollapsed" class="conversation-list">
         <template v-if="sortedChats.length > 0">
           <div
             v-for="chat in sortedChats"
@@ -69,9 +72,9 @@
 </template>
 
 <script setup>
-import { computed, h } from 'vue'
+import { computed, h, ref } from 'vue'
 import { message, Modal } from 'ant-design-vue'
-import { MoreVertical, Pencil, Pin, PinOff, Trash2 } from 'lucide-vue-next'
+import { ChevronDown, MoreVertical, Pencil, Pin, PinOff, Trash2 } from 'lucide-vue-next'
 import { parseToShanghai } from '@/utils/time'
 
 const props = defineProps({
@@ -109,6 +112,8 @@ const emit = defineEmits([
   'load-more-chats'
 ])
 
+const listCollapsed = ref(false)
+
 const sortedChats = computed(() => {
   return [...props.chatsList].sort((a, b) => {
     if (a.is_pinned !== b.is_pinned) {
@@ -181,10 +186,32 @@ const renameChat = async (chatId) => {
 }
 
 .history-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   padding: 4px 8px;
   color: var(--gray-500);
+  cursor: pointer;
   font-size: 12px;
   font-weight: 600;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background: var(--main-20);
+  }
+
+  &:active {
+    background: var(--main-30);
+  }
+}
+
+.collapse-icon {
+  transition: transform 0.2s ease;
+
+  &.collapsed {
+    transform: rotate(-90deg);
+  }
 }
 
 .conversation-list {
@@ -208,7 +235,7 @@ const renameChat = async (chatId) => {
   background: transparent;
   color: var(--gray-700);
   cursor: pointer;
-  font-size: 14px;
+  font-size: 13px;
   text-align: left;
   transition:
     background-color 0.2s ease,
@@ -296,6 +323,10 @@ const renameChat = async (chatId) => {
   color: var(--gray-600);
 }
 
+.pinned-indicator {
+  color: var(--gray-400);
+}
+
 .empty-list {
   margin-top: 16px;
   color: var(--gray-500);
diff --git a/web/src/components/HeaderComponent.vue b/web/src/components/HeaderComponent.vue
index 964f621e..c5053e9c 100644
--- a/web/src/components/HeaderComponent.vue
+++ b/web/src/components/HeaderComponent.vue
@@ -43,7 +43,7 @@ defineProps({
 .header-container {
   background-color: var(--bg-sider);
   backdrop-filter: blur(10px);
-  padding: 8px 16px;
+  padding: 8px var(--page-padding);
   height: 50px;
   position: sticky;
   top: 0;
diff --git a/web/src/components/StatusBar.vue b/web/src/components/StatusBar.vue
index cb189988..781999fb 100644
--- a/web/src/components/StatusBar.vue
+++ b/web/src/components/StatusBar.vue
@@ -116,12 +116,8 @@ onUnmounted(() => {
 
 <style scoped lang="less">
 .status-bar {
-  // background: var(--gray-0);
-  // backdrop-filter: blur(10px);
-  // height: 60px;
   display: flex;
   align-items: center;
-  // position: sticky;
   top: 0;
   z-index: 100;
 }
@@ -131,8 +127,7 @@ onUnmounted(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 16px;
-  // padding-bottom: 0;
+  padding: 16px var(--page-padding);
 }
 
 .status-left {
diff --git a/web/src/components/ToolCallingResult/BaseToolCall.vue b/web/src/components/ToolCallingResult/BaseToolCall.vue
index 90a3a162..b0789173 100644
--- a/web/src/components/ToolCallingResult/BaseToolCall.vue
+++ b/web/src/components/ToolCallingResult/BaseToolCall.vue
@@ -403,8 +403,8 @@ const formatResultData = (data) => {
     }
 
     .tool-content {
-      margin: 4px 0 8px 12px;
-      padding-left: 12px;
+      margin: 4px 0 8px 8px;
+      padding-left: 8px;
       border-left: 1px solid var(--gray-100);
 
       .tool-params {
diff --git a/web/src/components/ToolCallingResult/tools/MysqlDescribeTableTool.vue b/web/src/components/ToolCallingResult/tools/MysqlDescribeTableTool.vue
index 8d4e37bb..90a4583f 100644
--- a/web/src/components/ToolCallingResult/tools/MysqlDescribeTableTool.vue
+++ b/web/src/components/ToolCallingResult/tools/MysqlDescribeTableTool.vue
@@ -65,7 +65,7 @@ const extractTableName = (args) => {
 <style lang="less" scoped>
 .mysql-result {
   border-radius: 8px;
-  padding: 12px;
+  padding: 4px;
 
   .result-text {
     margin: 0;
diff --git a/web/src/components/ToolCallingResult/tools/MysqlListTablesTool.vue b/web/src/components/ToolCallingResult/tools/MysqlListTablesTool.vue
index 369d7a88..44adcda2 100644
--- a/web/src/components/ToolCallingResult/tools/MysqlListTablesTool.vue
+++ b/web/src/components/ToolCallingResult/tools/MysqlListTablesTool.vue
@@ -47,7 +47,7 @@ const formatResult = (content) => {
 <style lang="less" scoped>
 .mysql-result {
   border-radius: 8px;
-  padding: 12px;
+  padding: 4px;
 
   .result-text {
     margin: 0;
diff --git a/web/src/components/ToolCallingResult/tools/MysqlQueryTool.vue b/web/src/components/ToolCallingResult/tools/MysqlQueryTool.vue
index 23b4fa54..a727adc7 100644
--- a/web/src/components/ToolCallingResult/tools/MysqlQueryTool.vue
+++ b/web/src/components/ToolCallingResult/tools/MysqlQueryTool.vue
@@ -90,7 +90,7 @@ const truncateSql = (sql, maxLength = 50) => {
     color: var(--gray-800);
     white-space: pre-wrap;
     word-break: break-word;
-    padding: 6px;
+    padding: 4px;
     border-radius: 4px;
     font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
     max-height: 200px;
@@ -99,9 +99,8 @@ const truncateSql = (sql, maxLength = 50) => {
 }
 
 .mysql-result {
-  // background: var(--gray-0);
   border-radius: 8px;
-  padding: 12px;
+  padding: 4px;
 
   .result-text {
     margin: 0;
diff --git a/web/src/components/ToolCallsGroupComponent.vue b/web/src/components/ToolCallsGroupComponent.vue
index 9d30447c..092620d9 100644
--- a/web/src/components/ToolCallsGroupComponent.vue
+++ b/web/src/components/ToolCallsGroupComponent.vue
@@ -151,6 +151,7 @@ const toggleToolCallsExpanded = () => {
   .tool-calls-summary {
     appearance: none;
     width: auto;
+    max-width: 100%;
     display: inline-flex;
     align-items: center;
     gap: 8px;
diff --git a/web/src/components/dashboard/StatsOverviewComponent.vue b/web/src/components/dashboard/StatsOverviewComponent.vue
index 5f9f3e26..508a2d44 100644
--- a/web/src/components/dashboard/StatsOverviewComponent.vue
+++ b/web/src/components/dashboard/StatsOverviewComponent.vue
@@ -116,7 +116,7 @@ const getSatisfactionClass = () => {
 
   .stats-grid {
     display: grid;
-    padding: 0 16px;
+    padding: 0 var(--page-padding);
     grid-template-columns: repeat(6, 1fr);
     gap: 16px;
 
diff --git a/web/src/views/DashboardView.vue b/web/src/views/DashboardView.vue
index 52390052..f1a6314d 100644
--- a/web/src/views/DashboardView.vue
+++ b/web/src/views/DashboardView.vue
@@ -159,7 +159,6 @@ onUnmounted(() => {
 
 <style scoped lang="less">
 .dashboard-container {
-  // padding: 0 24px 24px 24px;
   background-color: var(--gray-25);
   min-height: calc(100vh - 64px);
   overflow-x: hidden;
@@ -168,7 +167,7 @@ onUnmounted(() => {
 // Dashboard 特有的网格布局
 .dashboard-grid {
   display: grid;
-  padding: 16px;
+  padding: var(--page-padding);
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: auto auto;
   gap: 16px;
diff --git a/web/src/views/DataBaseView.vue b/web/src/views/DataBaseView.vue
index 9ce0ce8c..46720c25 100644
--- a/web/src/views/DataBaseView.vue
+++ b/web/src/views/DataBaseView.vue
@@ -680,14 +680,22 @@ onMounted(() => {
   margin-bottom: 20px;
 }
 .databases {
-  padding: 12px 16px;
+  padding: 12px var(--page-padding);
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   gap: 16px;
 }
 
-.database,
-.graphbase {
+.database {
+  width: 100%;
+  padding: 10px var(--page-padding);
+  border-radius: 8px;
+  height: 144px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  position: relative; // 为绝对定位的锁定图标提供参考
+  overflow: hidden;
   background: linear-gradient(45deg, var(--gray-0) 0%, var(--gray-25) 100%);
   box-shadow: 0px 1px 2px 0px var(--shadow-2);
   border: 1px solid var(--gray-50);
@@ -698,19 +706,6 @@ onMounted(() => {
     background: linear-gradient(45deg, var(--gray-0) 0%, var(--main-30) 100%);
     box-shadow: 0px 1px 5px var(--shadow-3);
   }
-}
-
-.dbcard,
-.database {
-  width: 100%;
-  padding: 8px 12px;
-  border-radius: 8px;
-  height: 140px;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  position: relative; // 为绝对定位的锁定图标提供参考
-  overflow: hidden;
 
   .private-lock-icon {
     position: absolute;