From 363db0f8bb5111e29249e2bacaf7a2973af0407d Mon Sep 17 00:00:00 2001
From: xpy01xpy <49626679+xpy01xpy@users.noreply.github.com>
Date: Mon, 23 Sep 2024 14:13:33 +0800
Subject: [PATCH] openup-cnpliot (#270)

---
 src/components/common/Header/index.astro     | 81 +++++++++++++++++---
 src/components/home/HomeIntroduce.astro      |  4 +-
 src/components/home/ProductDisplayCard.astro |  6 +-
 3 files changed, 78 insertions(+), 13 deletions(-)

diff --git a/src/components/common/Header/index.astro b/src/components/common/Header/index.astro
index 18e764e85..5f35744dc 100644
--- a/src/components/common/Header/index.astro
+++ b/src/components/common/Header/index.astro
@@ -90,6 +90,36 @@ let height,
       super();
       this.ifscroll = false;
       window.addEventListener("scroll", this.handleScroll);
+      this.cnpliot_load();
+    }
+
+    cnpliot_load = () => {
+      document.addEventListener('DOMContentLoaded', function() {
+        const htmlElement = document.documentElement;
+        const observer = new MutationObserver(function(mutationsList) {
+            mutationsList.forEach(function(mutation) {
+              checkHtmlWidth();
+            });
+        });
+        const config = { 
+          attributes: true,
+          attributeFilter: ['style', 'class'],
+        };
+        observer.observe(htmlElement, config);
+
+        function checkHtmlWidth() {
+            const headerElement = document.querySelector('.header-content');
+            if(headerElement && headerElement.clientWidth) {
+              const header_rem =  headerElement.clientWidth / 16;
+              const hasClass = headerElement.classList.contains('width-for-html');
+              if(header_rem > 62 && hasClass) {
+                headerElement.classList.remove('width-for-html');
+              } else if(header_rem < 62 && !hasClass){
+                headerElement.classList.add('width-for-html');
+              };
+            };
+        };
+      });
     }
 
     handleScroll = () => {
@@ -140,7 +170,7 @@ let height,
       }
     }
 
-    @media (max-width: 50rem) {
+    @media (max-width: 62rem) {
       /** header 特殊处理 屏幕小于 800px 就显示不完全 */
       .header-content {
         width: 100%;
@@ -165,6 +195,32 @@ let height,
         }
       }
     }
+
+    .width-for-html {
+      /** 用于兼容 cnpliot 打开改变html标签宽度 */
+      .header-content {
+        width: 100%;
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
+      }
+      .left-content .mobile-navbar {
+        display: block;
+      }
+      .center-content {
+        display: none;
+      }
+      .code-toggle {
+        padding: 0 !important;
+        background-color: transparent !important;
+        span {
+          display: none;
+        }
+        svg {
+          width: 1.5rem;
+          height: 1.5rem;
+        }
+      }
+    }
   }
 </style>
 
@@ -172,8 +228,7 @@ let height,
   function addCopilot() {
     const copilotJSScript = document.createElement("script");
     copilotJSScript.type = "text/javascript";
-    copilotJSScript.src =
-      "https://g.alicdn.com/cm-design/copilot-booter/0.0.26/copilot-booter.js";
+    copilotJSScript.src = "https://g.alicdn.com/cm-design/copilot-booter/0.0.26/copilot-booter.js";
     copilotJSScript.addEventListener("load", function () {
       if (window.CNPilot) {
         window.CNPilot.mounted({
@@ -197,7 +252,7 @@ let height,
           },
           headerProps: {
             closeIcon: { show: true },
-            titleText: "AI答疑专家",
+            titleText: "专家智能答疑",
           },
         });
       }
@@ -205,10 +260,18 @@ let height,
     document.body.append(copilotJSScript);
   }
 
-  // addCopilot();
+  const htmlElement = document.documentElement;
+  const computedStyle = window.getComputedStyle(htmlElement);
+  const rootFontSize = parseFloat(computedStyle.fontSize);
+  const htmlWidthInPixels = htmlElement.clientWidth;
+  const htmlWidthInRem = htmlWidthInPixels / rootFontSize;
+  // 30rem
+  if(htmlWidthInRem > 30) {
+    addCopilot();
 
-  // document.addEventListener("astro:page-load", function () {
-  //   if (window.CNPilot) window.CNPilot.unmounted();
-  //   addCopilot();
-  // });
+    document.addEventListener("astro:page-load", function () {
+      if (window.CNPilot) window.CNPilot.unmounted();
+      addCopilot();
+    });
+  }
 </script>
diff --git a/src/components/home/HomeIntroduce.astro b/src/components/home/HomeIntroduce.astro
index 5d6ad0b7f..220d60bc2 100644
--- a/src/components/home/HomeIntroduce.astro
+++ b/src/components/home/HomeIntroduce.astro
@@ -76,7 +76,8 @@ const { stargazers_count=0, forks_count=0 }:StarAndForkT = await sendFetch("http
       color: theme("colors.neutral");
     }
     .top-section {
-      width: 85.125rem;
+      max-width: 85.125rem;
+      width: 100%;
       overflow: hidden;
     }
     .top-section .notes .pc-version-intro {
@@ -144,6 +145,7 @@ const { stargazers_count=0, forks_count=0 }:StarAndForkT = await sendFetch("http
       background: url('https://img.alicdn.com/imgextra/i2/O1CN019ckV3m1s2m7zNXIpc_!!6000000005709-0-tps-5760-2000.jpg') no-repeat;
       background-size: cover;
       background-position: 0 0;
+      padding: 0 2rem;
     }
     
     @media (min-width: 40rem) and (max-width: 50rem) { 
diff --git a/src/components/home/ProductDisplayCard.astro b/src/components/home/ProductDisplayCard.astro
index e728c8ef1..218f18d2a 100644
--- a/src/components/home/ProductDisplayCard.astro
+++ b/src/components/home/ProductDisplayCard.astro
@@ -7,8 +7,8 @@ const t = useTranslations(Astro);
 const ifzh = isChinese(Astro);
 
 ---
-<div class="flex flex-col justify-center items-center pt-14 solution-wrapper bg-base-100 hidden md:flex">
-  <div class="lg:w-[85.125rem] md:w-full mb-[10px]">
+<div class="flex flex-col justify-center items-center pt-14 solution-wrapper bg-base-100 hidden md:flex max-w-[85.125rem] mx-auto">
+  <div class="w-full mb-[10px]">
     <h2
       class=`font-light solution-slogan h-[41px] text-success text-[16px] md:text-[20px] leading-4 rounded-[20px] px-5 py-3`
       class:list={[
@@ -21,7 +21,7 @@ const ifzh = isChinese(Astro);
       {t('home.product.introduce.title')}
     </h2>
   </div>
-  <ul class="p-0 flex justify-center items-center lg:w-[85.125rem] md:w-full flex-wrap">
+  <ul class="p-0 flex justify-center items-center w-full flex-wrap">
   {
     ProductDisplayCardData.map((item, index) => {
       return (