Merge remote-tracking branch 'origin/develop-astro-sca' into develop-…

…astro-sca
xpy01xpy · Sep 22, 2024 · 12a9685 · 12a9685
2 parents 1f5e99a + 83dd0cf
commit 12a9685
Show file tree

Hide file tree

Showing 445 changed files with 4,507 additions and 2,040 deletions.
diff --git a/src/components/ai/AiButton.astro b/src/components/ai/AiButton.astro
@@ -0,0 +1,32 @@
+---
+import { useTranslations } from "@i18n/util";
+import Button from "@components/home/StarAndForkV2/Button.jsx";
+import Video from "@components/home/StarAndForkV2/Video.jsx";
+
+const t = useTranslations(Astro);
+---
+
+<div class="flex">
+  <Button 
+    size="large"
+    class="rounded-3xl mr-4 text-base-100 min-w-[9rem]"
+    href="/ai/get-started/"
+    target="_blank"
+    type="primary"
+    iconClass="text-base-100"
+  >
+    <Video theme="light" class="text-base-100"/>
+    {t('commmon.footer.actions.start')}
+  </Button>
+
+  <Button 
+    size="large"
+    class="rounded-3xl mr-4 text-neutral w-[9rem]"
+    href="https://github.com/alibaba/spring-ai-alibaba"
+    target="_blank"
+    type="secondary"  
+    iconClass="text-neutral"
+  >
+    GITHUB
+  </Button>
+</div>
diff --git a/src/components/ai/HomeIntroduce.astro b/src/components/ai/HomeIntroduce.astro
@@ -1,9 +1,6 @@
 ---
 import { useTranslations } from "@i18n/util";
-import Button from "@components/home/StarAndForkV2/Button.jsx";
-import Video from "@components/home/StarAndForkV2/Video.jsx";
-import { SITE } from "@utils/config";
-
+import AiButton from "@components/ai/AiButton.astro";
 
 const t = useTranslations(Astro);
 ---
@@ -18,30 +15,7 @@ const t = useTranslations(Astro);
         <p class=`cursor-pointer leading-[5rem] text-neutral mb-8 xl:text-[2rem] lg:text-[2rem] md:text-[2rem] sm:text-[1.5rem] text-[1rem]`>
             {t('home.website.ai.quickly.develop')}
         </p>
-        <div class="flex">
-          <Button 
-            size="large"
-				    class="rounded-3xl mr-4 text-base-100 w-[9rem]"
-            href="/ai/get-started/"
-            target="_blank"
-            type="primary"
-            iconClass="text-base-100"
-          >
-            <Video theme="light" class="text-base-100"/>
-            {t('commmon.footer.actions.start')}
-          </Button>
-
-          <Button 
-            size="large"
-				    class="rounded-3xl mr-4 text-neutral w-[9rem]"
-            href="https://github.com/alibaba/spring-ai-alibaba"
-            target="_blank"
-            type="secondary"  
-            iconClass="text-neutral"
-          >
-            GITHUB
-          </Button>
-        </div>
+        <AiButton />
       </div>
     </ai-home-introduce>
   </div>

diff --git a/src/components/home/Carousel.astro b/src/components/home/Carousel.astro
@@ -10,14 +10,14 @@ const {
 } = Astro.props as Props;
 ---
 
-
+<user-carousel>
 <div 
     id="carousel-wrapper" 
-    class=" relative flex flex-col justify-center items-center bg-muted" 
+    class="max-w-[90rem] mx-auto relative flex flex-col justify-center items-center bg-base-100" 
     data-duration={duration}
     data-useduration={useduration}
 >
-    <div class="md:w-[85.125rem] ">
+    <div class="lg:max-w-[90rem] w-full">
         <div class="carousel-item block">
             <slot name="prev"></slot>
         </div>
@@ -28,7 +28,7 @@ const {
     </div>
 
     <!-- 轮播控制按钮 -->
-    <div class='md:w-[85.125rem] absolute bottom-[20px] md:left-auto left-[20px]' >
+    <div class='max-w-[85.125rem] absolute bottom-[20px] left-[2.5rem]' >
 
     <div class="w-[112px]  flex justify-between ">
         <div id="prev" class="cursor-pointer group">
@@ -42,68 +42,95 @@ const {
     </div>
 </div>
 </div>
+</user-carousel>
 
 <script>
-    // 包裹元素
-    const carouselWrapper = document.getElementById('carousel-wrapper'); 
-    // 利用 html dataset 获取 props 变量参数
-    const duration = carouselWrapper?.dataset?.duration;
-    const useduration = carouselWrapper?.dataset?.useduration;
-    // 所有可执行的轮播项
-    const items = document.querySelectorAll('.carousel-item');
-    const nextBtn = document.getElementById('next');
-    const prevBtn = document.getElementById('prev');
+  class UserCarousel extends HTMLElement {
+    private carousel_items?: HTMLElement[];
+    private nextBtn?: HTMLElement;
+    private prevBtn?: HTMLElement;
+    private useduration?: string;
+    private duration?: any;
+    private currentItem?: number;
+    private timer?: any;
+    constructor() {
+        super();
+        // 包裹元素
+        const carouselWrapper = document.getElementById('carousel-wrapper'); 
+        // 利用 html dataset 获取 props 变量参数
+        this.duration = carouselWrapper?.dataset?.duration;
+        this.useduration = carouselWrapper?.dataset?.useduration;
+        this.carousel_items = Array.from(document.querySelectorAll('.carousel-item'));
+        this.nextBtn = document.getElementById('next');
+        this.prevBtn = document.getElementById('prev');
+        this.currentItem = 0;
+        this.timer = null;
+
+        // 依据 proos.useduration 判断是否默认开启 循环切换图片
+        if(this.useduration == 'apply') {
+            // 鼠标划入 停止轮播
+            carouselWrapper.addEventListener('mouseenter',() =>{
+                if(this.timer) {
+                    clearTimeout(this.timer);
+                    this.timer = null;
+                };
+            });
+            // 鼠标划出 继续轮播
+            carouselWrapper.addEventListener('mouseleave',() =>{
+                if(!this.timer) {
+                    this.timerStart();
+                };
+            });
+        };
+    };
+
+    connectedCallback() {
+        this.start();
+        // 默认开启
+        this.timerStart();
+    };
+
+    disconnectedCallback() {
+        if(this.timer) {
+            clearTimeout(this.timer);
+        }
+    };
+
+    start = () => {
+        // 下一项
+        this.nextBtn.addEventListener('click', () => {
+            this.currentItem = (this.currentItem + 1) % this.carousel_items.length;
+            this.showItem(this.currentItem);
+        });
+        // 上一项
+        this.prevBtn.addEventListener('click', () => {
+            this.currentItem = (this.currentItem - 1 + this.carousel_items.length) % this.carousel_items.length;
+            this.showItem(this.currentItem);
+        });
+    };
 
-    // 轮播切换部分
-    let currentItem = 0;
-    function showItem(index) {
-        items.forEach((item, idx) => {
+    showItem = (index) => {
+        this.carousel_items.forEach((item, idx) => {
             item.style.display = 'none';
             if (idx === index) {
                 item.style.display = 'block';
             };
         });
     };
-    // 下一项
-    nextBtn.addEventListener('click', () => {
-        currentItem = (currentItem + 1) % items.length;
-        showItem(currentItem);
-    });
-    // 上一项
-    prevBtn.addEventListener('click', () => {
-        currentItem = (currentItem - 1 + items.length) % items.length;
-        showItem(currentItem);
-    });
 
-    // 计时器部分
-    let timer = null;
-    // 切换轮播、利用按钮点击事件
-    function switchPicture() {
-        if(timer) {
-            prevBtn.click();
-            timer = null;
-            timerStart();
+    switchPicture = () => {
+        if(this.timer) {
+            this.prevBtn.click();
+            this.timer = null;
+            this.timerStart();
         };
     };
-    function timerStart() {
-        timer = setTimeout(switchPicture, duration);
-    };
-    // 依据 proos.useduration 判断是否默认开启 循环切换图片
-    if(useduration == 'apply') {
-        // 鼠标划入 停止轮播
-        carouselWrapper.addEventListener('mouseenter',() =>{
-            if(timer) {
-                clearTimeout(timer);
-                timer = null;
-            };
-        });
-        // 鼠标划出 继续轮播
-        carouselWrapper.addEventListener('mouseleave',() =>{
-            if(!timer) {
-                timerStart();
-            };
-        });
-        // 默认开启
-        timerStart();
+
+    timerStart = () => {
+        this.timer = setTimeout(this.switchPicture, this.duration);
     };
- </script>
+
+  };
+
+  customElements.define("user-carousel", UserCarousel);
+</script>
diff --git a/src/components/home/Carousel_ai.astro b/src/components/home/Carousel_ai.astro
diff --git a/src/components/home/CompaniesFeedback.astro b/src/components/home/CompaniesFeedback.astro
@@ -113,6 +113,7 @@ const themeCardColor = {
 
 <style is:global>
   .companies-feedback{
+    overflow: hidden;
   .slider {
     transition: background-color 0.5s;
   }