From 3a9b5388f9022e50a79cdbf2b3e9796a763264c4 Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Sun, 12 Apr 2026 13:42:39 +0800
Subject: [PATCH] =?UTF-8?q?style(mobile):=20=E4=BC=98=E5=8C=96=E5=AE=A1?=
 =?UTF-8?q?=E6=89=B9=E9=9D=A2=E6=9D=BF=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除顶部灰色块，内容直接顶头显示
- 移除关闭按钮圆形外框，只保留×符号
- 统一配色与电脑端一致
---
 .../components/panels/ToolApprovalPanel.vue   | 36 +++++++++++++++++--
 .../styles/components/overlays/_overlays.scss | 12 +++++++
 2 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/static/src/components/panels/ToolApprovalPanel.vue b/static/src/components/panels/ToolApprovalPanel.vue
index ecbdf4f..a07e94e 100644
--- a/static/src/components/panels/ToolApprovalPanel.vue
+++ b/static/src/components/panels/ToolApprovalPanel.vue
@@ -4,9 +4,9 @@
     :class="{ collapsed }"
     :style="{ width: collapsed ? '0px' : width + 'px' }"
   >
-    <div class="sidebar-header">
+    <div class="sidebar-header" :class="{ 'mobile-header': isMobileViewport }">
       <h3 class="icon-label">工具审批 ({{ approvals.length }})</h3>
-      <button type="button" class="approval-close-btn" aria-label="关闭审批面板" @click="$emit('close')">
+      <button type="button" class="approval-close-btn" aria-label="关闭审批面板" @click="handleCloseClick">
         ×
       </button>
     </div>
@@ -109,6 +109,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted, computed } from 'vue';
+
 defineOptions({ name: 'ToolApprovalPanel' });
 
 const props = defineProps<{
@@ -118,13 +120,41 @@ const props = defineProps<{
   decidingApprovalIds?: string[];
 }>();
 
-defineEmits<{
+const emit = defineEmits<{
   (event: 'approve', approvalId: string): void;
   (event: 'reject', approvalId: string): void;
   (event: 'switch-unrestricted', approvalId: string): void;
   (event: 'close'): void;
 }>();
 
+const handleCloseClick = () => {
+  console.log('[sidebarDEBUG] ToolApprovalPanel close button clicked');
+  emit('close');
+};
+
+// 检测是否为移动端视口 - 使用计算属性确保响应式
+const isMobileViewport = computed(() => {
+  const isMobile = typeof window !== 'undefined' && window.innerWidth <= 768;
+  console.log('[sidebarDEBUG] isMobileViewport computed:', isMobile, 'windowWidth:', window?.innerWidth);
+  return isMobile;
+});
+
+onMounted(() => {
+  console.log('[sidebarDEBUG] ToolApprovalPanel mounted');
+  console.log('[sidebarDEBUG] window.innerWidth:', window.innerWidth);
+  console.log('[sidebarDEBUG] isMobileViewport:', isMobileViewport.value);
+  console.log('[sidebarDEBUG] body[data-theme]:', document.body.getAttribute('data-theme'));
+  
+  // 检查父元素链
+  const aside = document.querySelector('.tool-approval-panel');
+  const sidebarHeader = document.querySelector('.tool-approval-panel .sidebar-header');
+  if (sidebarHeader) {
+    const computedStyle = window.getComputedStyle(sidebarHeader);
+    console.log('[sidebarDEBUG] sidebar-header computed background:', computedStyle.backgroundColor);
+    console.log('[sidebarDEBUG] sidebar-header computed padding:', computedStyle.paddingTop, computedStyle.paddingBottom);
+  }
+});
+
 const isEditPreview = (item: any) => item?.tool_name === 'edit_file' && item?.preview?.edit_context;
 const isCommandPreview = (item: any) =>
   ['run_command', 'terminal_input', 'run_python', 'runpython'].includes(item?.tool_name);
diff --git a/static/src/styles/components/overlays/_overlays.scss b/static/src/styles/components/overlays/_overlays.scss
index 712b82b..ec8702a 100644
--- a/static/src/styles/components/overlays/_overlays.scss
+++ b/static/src/styles/components/overlays/_overlays.scss
@@ -1766,6 +1766,7 @@
     background: var(--claude-panel);
     width: min(460px, 92vw);
     max-width: 92vw;
+    padding-top: 0;
 }
 
 .mobile-panel-sheet--focus {
@@ -3461,6 +3462,17 @@ body[data-theme='dark'] {
         background: #1a1a1a;
     }
 
+    /* 移动端审批面板 - 移除所有背景让内容顶头 */
+    .mobile-panel-sheet--approval .sidebar.right-sidebar {
+        background: transparent !important;
+    }
+
+    .mobile-panel-sheet--approval .sidebar-header,
+    .mobile-panel-sheet--approval .sidebar .sidebar-header {
+        background: transparent !important;
+        padding: 0 16px !important;
+    }
+
     .sidebar-manage-btn {
         background: #2a2a2a;
         border-color: rgba(255, 255, 255, 0.1);