From c38f056527a47ccc59b1bf1df3c636415dac7438 Mon Sep 17 00:00:00 2001
From: Stringadmin <admin@omniai.net.cn>
Date: Tue, 16 Jun 2026 14:51:12 +0800
Subject: [PATCH] style: make topbar fixed transparent floating header

---
 src/App.tsx                         | 24 ++++++++++-
 src/styles/ecommerce-standalone.css | 64 ++++++++++++++++++-----------
 2 files changed, 61 insertions(+), 27 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 70ebc81..0707138 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -350,8 +350,27 @@ function App() {
 
   return (
     <div className="ecommerce-standalone web-shell" data-theme="dark" data-ui-theme="dark-green" data-view="ecommerce">
-      <header className="ecommerce-standalone__topbar">
-        <button type="button" className="ecommerce-standalone__brand" onClick={handleOpenWorkspace}>
+      <header
+        className="ecommerce-standalone__topbar"
+        style={{
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          zIndex: 1000,
+          pointerEvents: "none",
+          background: "transparent !important",
+          border: "none !important",
+          boxShadow: "none !important",
+          backdropFilter: "none !important",
+        }}
+      >
+        <button
+          type="button"
+          className="ecommerce-standalone__brand"
+          style={{ pointerEvents: "auto" }}
+          onClick={handleOpenWorkspace}
+        >
           <span className="ecommerce-standalone__logo" aria-hidden="true">
             <img src="https://stringtest.oss-cn-hangzhou.aliyuncs.com/logo.png" alt="" />
           </span>
@@ -366,6 +385,7 @@ function App() {
               <button
                 type="button"
                 className="ecommerce-profile-menu__trigger"
+                style={{ background: "transparent !important", border: "none !important", boxShadow: "none !important", pointerEvents: "auto" }}
                 onClick={() => setProfileMenuOpen((open) => !open)}
                 aria-haspopup="dialog"
                 aria-expanded={profileMenuOpen}
diff --git a/src/styles/ecommerce-standalone.css b/src/styles/ecommerce-standalone.css
index 043e658..fc80974 100644
--- a/src/styles/ecommerce-standalone.css
+++ b/src/styles/ecommerce-standalone.css
@@ -12,9 +12,7 @@
 }
 
 .ecommerce-standalone__topbar {
-  position: fixed;
-  inset: 0 0 auto;
-  z-index: 80;
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -22,8 +20,7 @@
   min-height: 64px;
   padding: 10px clamp(16px, 3vw, 32px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(8, 12, 10, 0.78);
-  backdrop-filter: blur(18px);
+  background: transparent;
 }
 
 .ecommerce-standalone__brand,
@@ -66,7 +63,6 @@
 
 .ecommerce-standalone__content {
   height: 100vh;
-  padding-top: 64px;
 }
 
 /* 工作台与个人中心常驻同层，用 hidden 切换以保活生成任务状态。
@@ -230,7 +226,6 @@
   }
 
   .ecommerce-standalone__content {
-    padding-top: 58px;
   }
 }
 
@@ -249,8 +244,7 @@
 
 .ecommerce-standalone__topbar {
   border-bottom-color: rgba(126, 235, 255, 0.22);
-  background:
-    linear-gradient(90deg, rgba(7, 72, 121, 0.94), rgba(4, 37, 75, 0.92));
+  background: transparent;
 }
 
 .ecommerce-standalone__brand::before {
@@ -318,7 +312,7 @@
 
 .ecommerce-standalone__topbar {
   border-bottom-color: rgba(30, 189, 219, 0.16) !important;
-  background: #f8f9fa !important;
+  background: transparent !important;
 }
 
 .ecommerce-standalone__brand::before {
@@ -12263,26 +12257,12 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
 /* #/imageWorkbench detail popover and topbar blend: no inner scrollbar, no hard header split. */
 html body #root .ecommerce-standalone.web-shell .ecommerce-standalone__topbar {
   border-bottom-color: transparent !important;
-  background:
-    radial-gradient(48rem 14rem at 50% 100%, rgba(30, 189, 219, 0.09), transparent 72%),
-    radial-gradient(28rem 12rem at 12% 100%, rgba(16, 115, 204, 0.045), transparent 68%),
-    linear-gradient(180deg, #fbfdfe 0%, #f8fbfc 100%) !important;
+  background: transparent !important;
   box-shadow: none !important;
   backdrop-filter: none !important;
   -webkit-backdrop-filter: none !important;
 }
 
-html body #root .ecommerce-standalone.web-shell .ecommerce-standalone__topbar::after {
-  position: absolute !important;
-  right: 0 !important;
-  bottom: -1px !important;
-  left: 0 !important;
-  height: 1px !important;
-  background: linear-gradient(90deg, transparent, rgba(30, 189, 219, 0.08), transparent) !important;
-  content: "" !important;
-  pointer-events: none !important;
-}
-
 html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--settings-detail {
   width: min(468px, calc(100vw - 48px)) !important;
   max-width: min(468px, calc(100vw - 48px)) !important;
@@ -17433,3 +17413,37 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
     margin-left: 0 !important;
   }
 }
+
+/* Hide the topbar banner background while keeping brand and account in place. */
+html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"] .ecommerce-standalone__topbar {
+  border-bottom: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+}
+
+html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"] .ecommerce-standalone__topbar::after {
+  content: none !important;
+}
+
+/* Keep topbar transparent and remove any background/border from inner controls. */
+html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"] .ecommerce-standalone__brand,
+html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"] .ecommerce-standalone__brand strong,
+html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"] .ecommerce-standalone__credits,
+html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"] .ecommerce-standalone__account button,
+html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"] .ecommerce-profile-menu__trigger {
+  color: #10202c !important;
+  background: transparent !important;
+  background-color: transparent !important;
+  background-image: none !important;
+  border: none !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+}
+
+html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"] .ecommerce-standalone__credits {
+  color: #3a5a6a !important;
+}