Merge pull request 'Main merge work' (#19) from main-merge-work into main

Reviewed-on: #19

src/App.tsx

@@ -350,27 +350,8 @@ 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"
-        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}
-        >
+      <header className="ecommerce-standalone__topbar">
+        <button type="button" className="ecommerce-standalone__brand" onClick={handleOpenWorkspace}>
           <span className="ecommerce-standalone__logo" aria-hidden="true">
             <img src="https://stringtest.oss-cn-hangzhou.aliyuncs.com/logo.png" alt="" />
           </span>
@@ -385,7 +366,6 @@ 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}

src/styles/ecommerce-standalone.css

@@ -12,7 +12,9 @@
 }
 
 .ecommerce-standalone__topbar {
-  position: relative;
+  position: fixed;
+  inset: 0 0 auto;
+  z-index: 80;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -20,7 +22,8 @@
   min-height: 64px;
   padding: 10px clamp(16px, 3vw, 32px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-  background: transparent;
+  background: rgba(8, 12, 10, 0.78);
+  backdrop-filter: blur(18px);
 }
 
 .ecommerce-standalone__brand,
@@ -63,6 +66,7 @@
 
 .ecommerce-standalone__content {
   height: 100vh;
+  padding-top: 64px;
 }
 
 /* 工作台与个人中心常驻同层，用 hidden 切换以保活生成任务状态。
@@ -226,6 +230,7 @@
   }
 
   .ecommerce-standalone__content {
+    padding-top: 58px;
   }
 }
 
@@ -244,7 +249,8 @@
 
 .ecommerce-standalone__topbar {
   border-bottom-color: rgba(126, 235, 255, 0.22);
-  background: transparent;
+  background:
+    linear-gradient(90deg, rgba(7, 72, 121, 0.94), rgba(4, 37, 75, 0.92));
 }
 
 .ecommerce-standalone__brand::before {
@@ -312,7 +318,7 @@
 
 .ecommerce-standalone__topbar {
   border-bottom-color: rgba(30, 189, 219, 0.16) !important;
-  background: transparent !important;
+  background: #f8f9fa !important;
 }
 
 .ecommerce-standalone__brand::before {
@@ -12257,12 +12263,26 @@ 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: 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;
   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;
@@ -17413,37 +17433,3 @@ 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;
-}