jeawin-astro 3.0.55 → 3.0.57

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jeawin-astro",
-    "version": "3.0.55",
+    "version": "3.0.57",
     "author": "chaegumi <chaegumi@qq.com>",
     "description": "",
     "license": "MIT",

package/src/components/blocks/block4.astro

@@ -17,7 +17,7 @@ type BlockItemsItem = {
   title: any; // 标题
   content: any; // 内容
 };
-interface Props {
+interface Props extends astroHTML.JSX.HTMLAttributes {
   bgcolor?: any;
   max_width_screen?: any;
   has_bg?: boolean;
@@ -32,6 +32,7 @@ const {
   block_title,
   block_subtitle,
   block_items = [],
+  ...other_props
 } = Astro.props;
 ---
 
@@ -41,9 +42,7 @@ const {
   </slot>
 
   <div
-    class="grid md:grid-cols-3 gap-5 z-[10]"
-    data-aos="fade-up"
-    data-aos-once="false"
+    class="grid md:grid-cols-3 gap-5 z-[10]" {...other_props}
   >
     {
       block_items ? (

package/src/components/blocks/block8.astro

@@ -12,7 +12,7 @@
 import SectionContainer from "../section_container.astro";
 import JeawinImage from "../image.astro";
 import Heading1 from "../heading/heading1.astro";
-interface Props {
+interface Props extends astroHTML.JSX.HTMLAttributes {
   bgcolor?: any;
   max_width_screen?: any;
   block_title?: any;
@@ -25,6 +25,7 @@ const {
   block_title,
   block_subtitle,
   block_items,
+  ...other_props
 } = Astro.props;
 ---
 
@@ -44,12 +45,11 @@ const {
                   <JeawinImage
                     img_html={itm.picurl_html}
                     add_classes="h-full"
-                    data-aos="fade-up"
-                    data-aos-once="false"
+                    {...other_props}
                   />
                 </div>
                 <div class="md:w-1/2">
-                  <div class="mb-10" data-aos="fade-up" data-aos-once="false">
+                  <div class="mb-10" {...other_props}>
                     <div class="mb-2">
                       <div class="w-12 p-3 rounded-full bg-[var(--themeColor)] fill-white">
                         <Fragment set:html={itm.sub_item1_icon} />
@@ -60,7 +60,7 @@ const {
                       {itm.sub_item1_content}
                     </div>
                   </div>
-                  <div data-aos="fade-up" data-aos-once="false">
+                  <div {...other_props}>
                     <div class="mb-2">
                       <div class="w-12 p-3 rounded-full bg-[var(--themeColor)] fill-white">
                         <Fragment set:html={itm.sub_item2_icon} />
@@ -76,7 +76,7 @@ const {
             ) : (
               <div class="flex flex-col md:flex-row gap-10 items-center">
                 <div class="order-2 md:order-1 md:w-1/2">
-                  <div class="mb-10" data-aos="fade-up" data-aos-once="false">
+                  <div class="mb-10" {...other_props}>
                     <div class="mb-2">
                       <div class="w-12 p-3 rounded-full bg-[var(--themeColor)] fill-white">
                         <Fragment set:html={itm.sub_item1_icon} />
@@ -87,7 +87,7 @@ const {
                       {itm.sub_item1_content}
                     </div>
                   </div>
-                  <div data-aos="fade-up" data-aos-once="false">
+                  <div {...other_props}>
                     <div class="mb-2">
                       <div class="w-12 p-3 rounded-full bg-[var(--themeColor)] fill-white">
                         <Fragment set:html={itm.sub_item2_icon} />

package/src/components/category_list.astro

@@ -14,20 +14,6 @@ import _ from "lodash";
 import { render_url } from "../scripts/util.js";
 import CommonCard from "./common_card.astro";
 import NodesList from "./nodes_list.astro";
-interface Props {
-  channel_id: any;
-  category_id?: any;
-  uri?: any;
-  page?: any;
-  limit?: any;
-  include_children_category_nodes?: any;
-  no_fields?: any;
-  show_category_nodes?: boolean;
-  has_sider?: boolean;
-  layout?: any;
-  node_item_component?: any;
-  max_width_screen?: any;
-}
 
 const {
   channel_id,
@@ -41,7 +27,8 @@ const {
   has_sider = false,
   layout = "grid gap-4 grid-cols-2 md:grid-cols-4",
   node_item_component,
-  max_width_screen='max-w-screen-2xl'
+  max_width_screen='max-w-screen-2xl',
+  ...other_props
 } = Astro.props;
 
 const { btn_class, all_categories, base, url_suffix } = Astro.locals;
@@ -69,8 +56,7 @@ switch (node_item_component) {
           "py-12",
           { "bg-[#ffffff]": idx % 2 === 1, "bg-slate-50": idx % 2 === 0 },
         ]}
-        data-aos="fade-up"
-        data-aos-once="false"
+        {...other_props}
       >
         <div class:list={has_sider ? "w-full" : [max_width_screen, "mx-auto"]}>
           <div class="px-4">
@@ -113,7 +99,7 @@ switch (node_item_component) {
       </section>
     ))
   ) : (
-    <section class="py-12 bg-slate-50" data-aos="fade-up" data-aos-once="false">
+    <section class="py-12 bg-slate-50" {...other_props}>
       <div class:list={has_sider ? "w-full" : [max_width_screen, "mx-auto"]}>
         <div class="px-4">
           <NodesList

package/src/components/comment_form.astro

@@ -11,13 +11,8 @@
  * @filesource
  */
 import { render_value, render_lang } from "../scripts/util.js";
-interface Props {
-  canonical: string;
-  channel_id: string;
-  category_id?: string;
-  node_id?: string;
-}
-const { canonical, channel_id, category_id, node_id } = Astro.props;
+
+const { canonical, channel_id, category_id, node_id, ...other_props } = Astro.props;
 
 const { siteinfo, all_langs, jeawin_form_api_domain } = Astro.locals;
 ---
@@ -27,7 +22,7 @@ const { siteinfo, all_langs, jeawin_form_api_domain } = Astro.locals;
     color: red;
   }
 </style>
-<div style="padding:10px;clear:both;" data-aos="fade-up" data-aos-once="false">
+<div style="padding:10px;clear:both;" {...other_props}>
   <form
     action={`${jeawin_form_api_domain}/api/comment/save_captcha`}
     id="jeawin-comment-form"

package/src/components/detail_images.astro

@@ -32,12 +32,31 @@ interface Props {
   nodepics?: any[]; // 产品图片
   video?: JWVIDEO; // 产品视频
   view360?: any; // 360 view
-  thumbs_position?: any;
 }
-const { node_title, nodepics = [], video, view360, thumbs_position = 'left' } = Astro.props;
+const { node_title, nodepics = [], video, view360 } = Astro.props;
+
+const thumbs_position: string = 'bottom';
+
+let show_thumbs = false;
+
+let num = 0;
+
+if(nodepics && nodepics.length > 1){
+  num=num+nodepics.length;
+}
+if(video){
+  num = num + 1;
+}
+if(view360){
+  num = num + 1;
+}
+
+if(num > 1){
+  show_thumbs = true;
+}
 ---
 
-<custom-detail-images data-nodepics={nodepics} data-video={video} data-view360={view360}>
+<custom-detail-images data-nodepics={nodepics} data-video={video} data-view360={view360} data-thumbs_position={thumbs_position}>
   <div
     x-data={`{
       isVideoPoppedUp:false,
@@ -56,54 +75,64 @@ const { node_title, nodepics = [], video, view360, thumbs_position = 'left' } =
     }`}
   >
     <div class:list={["flex flex-col", {"lg:flex-row":thumbs_position=='left'}, "gap-5"]}>
-      <div class:list={["order-2", {"lg:order-1 lg:w-2/12 lg:flex lg:flex-col":thumbs_position=='left'}, "gap-3"]}>
-        <!-- thumbs swiper -->
-        <swiper-container
-          init="false"
-          class="thumbSwiper"
-          watch-slides-progress="true"
-          slides-per-view="5"
-          space-between="10"
-          navigation="true"
-        >
-          {
-            nodepics.map((pic: any, idx: number) => (
-              <swiper-slide lazy={idx > 0 ? "true" : "false"} 
-                class:list={[
-                  "swiper-slide",
-                  { hidden: idx > 0 },
-                  " lg:flex-1 lg:h-[60px] lg:w-[60px]",
-                ]}
-              >
-                <div class="content-wrapper border border-white p-1 cursor-pointer overflow-hidden h-[60px] w-[60px]">
-                  <Fragment set:html={img_change_attrs(pic, {width:'50', height:'50', 'loading':'lazy'}, {})} />
-                </div>
-              </swiper-slide>
-            ))
-          }
-
-          {
-            video ? (
-              <swiper-slide lazy="true" class="swiper-slide lg:flex-1 lg:h-[60px] lg:w-[60px] hidden">
-                <div class="content-wrapper border border-white min-h-[100px] lg:min-h-[60px] p-1 cursor-pointer flex items-center justify-center">
-                  <Icon name="fa6-solid:file-video" class="size-10" />
-                </div>
-              </swiper-slide>
-            ) : null
-          }
+      {
+        show_thumbs ? (
+          <div class:list={["order-2", {
+            "flex flex-row items-center md:order-1 md:w-2/12 md:flex md:flex-col":thumbs_position=='left',
+            "flex items-center justify-center":thumbs_position=='bottom'
+            }, "gap-3"]}>
+            <!-- thumbs swiper -->
+            <div class="flex justify-center cursor-pointer thumbSwiper-prev-btn">{thumbs_position == 'left'?<Icon name="fa6-solid:angle-up" /> :<Icon name="fa6-solid:angle-left" />}</div>
+            <swiper-container
+              init="false"
+              class="thumbSwiper"
+              watch-slides-progress="true"
+              slides-per-view="5"
+              space-between="10"
+            >
+              
+              {
+                nodepics.map((pic: any, idx: number) => (
+                  <swiper-slide lazy={idx > 0 ? "true" : "false"} 
+                    class:list={[
+                      "swiper-slide",
+                      { hidden: idx > 0 },
+                      " lg:flex-0 lg:h-[60px] lg:w-[60px]",
+                    ]}
+                  >
+                    <div class="content-wrapper border border-white p-1 cursor-pointer overflow-hidden h-[60px] w-[60px] flex items-center justify-center">
+                      <Fragment set:html={img_change_attrs(pic, {width:'50', height:'50', 'loading':'lazy'}, {})} />
+                    </div>
+                  </swiper-slide>
+                ))
+              }
+
+              {
+                video ? (
+                  <swiper-slide class="swiper-slide lg:flex-0 lg:h-[60px] lg:w-[60px] hidden">
+                    <div class="content-wrapper border border-white min-h-[100px] lg:min-h-[60px] p-1 cursor-pointer flex items-center justify-center">
+                      <Icon name="fa6-solid:file-video" class="size-10" />
+                    </div>
+                  </swiper-slide>
+                ) : null
+              }
+
+              {
+                view360 ? (
+                  <swiper-slide class="swiper-slide lg:flex-0 hidden">
+                    <div class="content-wrapper border border-white p-1 cursor-pointer">
+                      <img src={view360img.src} alt="360° viewer" class="w-[50px] h-[50px] max-w-[50px]" />
+                    </div>
+                  </swiper-slide>
+                ) : null
+              }
+              
+            </swiper-container>
+            <div class="flex justify-center cursor-pointer thumbSwiper-next-btn">{thumbs_position =='left'?<Icon name="fa6-solid:angle-down" />:<Icon name="fa6-solid:angle-right" />}</div>
+          </div>          
+        ) : null
+      }
 
-          {
-            view360 ? (
-              <swiper-slide lazy="true" class="swiper-slide lg:flex-1 lg:h-[60px] lg:w-[60px] hidden">
-                <div class="content-wrapper border border-white p-1 cursor-pointer">
-                  <img src={view360img.src} alt="360° viewer" />
-                </div>
-              </swiper-slide>
-            ) : null
-          }
-          
-        </swiper-container>
-      </div>
       <div class:list={["order-1", {"lg:order-2":thumbs_position=='left'}, "w-full", {"lg:w-10/12":thumbs_position=='left'}]}>
         <!-- main swiper, pass thumbs swiper as CSS selector -->
         <swiper-container
@@ -111,9 +140,9 @@ const { node_title, nodepics = [], video, view360, thumbs_position = 'left' } =
           id="galleryID"
           class="mainSwiper"
           slides-per-view="1"
-          thumbs-swiper=".thumbSwiper"
+          thumbs-swiper={show_thumbs ? ".thumbSwiper" : null}
           navigation="false"
-          pagination="true"
+          pagination="true" auto-height="true"
         >
           {
             nodepics.map((pic: any, idx: number) => (
@@ -125,7 +154,7 @@ const { node_title, nodepics = [], video, view360, thumbs_position = 'left' } =
 
           {
             video ? (
-              <swiper-slide lazy="true" class="swiper-slide hidden">
+              <swiper-slide class="swiper-slide hidden">
                 <div class="flex min-h-[343px] xl:min-h-[605px] w-full">
                   <img src={video.poster} alt={video.title ? video.title : node_title} />
                   <button
@@ -148,7 +177,7 @@ const { node_title, nodepics = [], video, view360, thumbs_position = 'left' } =
 
           {
             view360 ? (
-              <swiper-slide lazy="true" class="swiper-slide hidden">
+              <swiper-slide class="swiper-slide hidden">
                 <div class="cloudimage-360 swiper-no-swiping" data-image-list-x={`${JSON.stringify(view360)}`} data-magnifier="2" data-fullscreen>
                 </div>
               </swiper-slide>    
@@ -160,7 +189,7 @@ const { node_title, nodepics = [], video, view360, thumbs_position = 'left' } =
           video ? (
             <div x-ref="video" 
               x-bind:class="{ 'flex': isVideoPoppedUp, 'hidden': !isVideoPoppedUp }"
-              class="fixed inset-0 w-full h-full flex items-center justify-center hidden z-10"
+              class="fixed inset-0 w-full h-full flex items-center justify-center hidden z-[100000]"
             >
               <div
                 class="absolute inset-0 w-full h-full bg-black/50"
@@ -217,10 +246,9 @@ const { node_title, nodepics = [], video, view360, thumbs_position = 'left' } =
     </div>
   </div>
 </custom-detail-images>
-
 <script
 is:inline
-src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/latest/js-cloudimage-360-view.min.js" async defer
+src="/js-cloudimage-360-view/build/js-cloudimage-360-view.min.js" async defer
 ></script>  
 {
   view360 ? (
@@ -233,14 +261,18 @@ src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/latest/js-cloudimag
   ) : null
 }
 <style is:inline>
-  /*
+
   .thumbSwiper {
-    height: 533px;
+    max-height: 300px;
+    max-width:300px;
+    min-width:300px;
+    overflow: hidden;
   }
-    */
+  
 
   .thumbSwiper .swiper-slide img {
-    /* object-fit: contain; */
+    object-fit: contain; 
+    max-height: 100%;
   }
 
   /* .thumbSwiper .swiper-slide {
@@ -278,6 +310,10 @@ src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/latest/js-cloudimag
   .pswp img {
     object-fit: contain;
   }
+
+  .cloudimage-360-fullscreen-modal{
+    z-index:100000!important;
+  }
 </style>
 
 <script>
@@ -322,6 +358,7 @@ src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/latest/js-cloudimag
       if(!this.glass) return;
 
       this.container.style.overflow = 'visible';
+      this.container.style.zIndex = 100000;
       this.container.removeChild(this.glass);
 
       this.glass = null;
@@ -343,10 +380,14 @@ src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/latest/js-cloudimag
 
       initSwiper(".mainSwiper");
       initSwiper(".thumbSwiper", {
-        direction: "horizontal",
+        direction: this.dataset.thumbs_position=='left' ? "vertical" : 'horizontal',
+        navigation: {
+          prevEl: '.thumbSwiper-prev-btn',
+          nextEl: '.thumbSwiper-next-btn'
+        },
         breakpoints: {
-          1024: {
-            direction: "vertical",
+          768: {
+            direction: this.dataset.thumbs_position == 'left' ? "vertical" : 'horizontal',
           },
         },
         on:{
@@ -402,7 +443,7 @@ src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/latest/js-cloudimag
           direction: "horizontal",
           breakpoints: {
             1024: {
-              direction: "vertical",
+              direction: this.dataset.thumbs_position == 'left' ? "vertical" : 'horizontal',
             },
           },
           on:{

package/src/components/pdfjs.astro

@@ -3,15 +3,23 @@ const { pdf_path } = Astro.props;
 const WORKER_PATH = "/pdfjs-4.9.124-dist/build/pdf.worker.mjs";
 ---
 
-<pdf-viewer data-pdf-path={pdf_path} data-worker-path={WORKER_PATH}>
+<pdf-viewer data-pdf_path={pdf_path} data-worker_path={WORKER_PATH}>
+  <div>
+    <button class="pdf_prev border border-gray-200 cursor-pointer p-2 rounded-lg" type="button">Previous</button>
+    <button class="pdf_next border border-gray-200 cursor-pointer p-2 rounded-lg" type="button">Next</button>
+    &nbsp; &nbsp;
+    <span>Page: <span class="page_num"></span> / <span class="page_count"></span></span>
+  </div>
+  <div class="mt-4">
+    <canvas class="pdf-canvas" style="border:1px solid black;direction:ltr;margin:0 auto;"></canvas>
+  </div>
+  
 </pdf-viewer>
 
 <script is:inline src="/pdfjs-4.9.124-dist/build/pdf.mjs" type="module"
 ></script>
 
 <script>
-  import type { PDFDocumentLoadingTask } from "pdfjs-dist";
-
   declare global {
     interface Window {
       pdfjsLib?: any;
@@ -19,71 +27,104 @@ const WORKER_PATH = "/pdfjs-4.9.124-dist/build/pdf.worker.mjs";
   }
 
   class PDFViewer extends HTMLElement {
-    pdfPath;
-    workerPath;
-    loadingTask: PDFDocumentLoadingTask | null = null;
-    canvas;
-
-    constructor() {
+    pdfDoc: any = null;
+    pageNum = 1;
+    pageRendering = false;
+    pageNumPending = null;
+    scale: number = 0.8;
+    canvas: any = null;
+    ctx: any = null;
+
+    constructor(){
       super();
-      this.attachShadow({ mode: "open" });
-      this.pdfPath = this.getAttribute("data-pdf-path");
-      this.workerPath = this.getAttribute("data-worker-path");
-      this.canvas = document.createElement("canvas");
-      this.canvas.setAttribute("id", "pdf-canvas");
-      this.canvas.style.border = "1px solid black";
-      this.canvas.style.direction = "ltr";
-
-      this.shadowRoot?.append(this.canvas);
+
+      this.onPrevPage = this.onPrevPage.bind(this);
+      this.onNextPage = this.onNextPage.bind(this);
     }
+    
 
-    async load() {
-      if (!this.loadingTask) return;
+    connectedCallback() {
 
-      const pdfDocument = await this.loadingTask.promise;
-      // Request a first page
-      const pdfPage = await pdfDocument.getPage(1);
+      this.canvas = document.querySelector('.pdf-canvas');
 
-      // Total Pages
-      const numPages = pdfDocument.numPages;
-      console.log(`Number of Pages: ${numPages}`);
+      this.ctx = this.canvas.getContext('2d');
 
-      // Display page on the existing canvas with 100% scale.
-      const viewport = pdfPage.getViewport({ scale: 1.0 });
-      const ctx = this.canvas.getContext("2d");
+      // console.log(this.dataset);
 
-      if (!this.canvas || !ctx) {
-        return;
-      }
+      window.pdfjsLib.GlobalWorkerOptions.workerSrc = this.dataset.worker_path;
+
+      window.pdfjsLib.getDocument(this.dataset.pdf_path).promise.then((pdfDoc_: any) => {
+        // console.log(pdfDoc_);
+        this.pdfDoc = pdfDoc_;
 
-      this.canvas.width = viewport.width;
-      this.canvas.height = viewport.height;
+        const pageCountEl: any = this.querySelector('.page_count');
+        if(pageCountEl){
+          pageCountEl.textContent = this.pdfDoc.numPages;
+        }
 
-      // Render PDF page into canvas context
-      const renderTask = pdfPage.render({
-        canvasContext: ctx,
-        viewport,
+        this.renderPage(this.pageNum);
       });
-      await renderTask.promise;
+
+      this.querySelector('.pdf_prev')?.addEventListener('click', this.onPrevPage);
+
+      this.querySelector('.pdf_next')?.addEventListener('click', this.onNextPage);
+
     }
 
-    handleLoaded() {
-      window.pdfjsLib.GlobalWorkerOptions.workerSrc = this.workerPath;
-      this.loadingTask = window.pdfjsLib.getDocument(this.pdfPath);
-      this.load();
+    renderPage(num: number){
+      this.pageRendering = true;
+
+      this.pdfDoc.getPage(num).then((page: any) => {
+        const viewport = page.getViewport({scale: this.scale});
+        this.canvas.height = viewport.height;
+        this.canvas.width = viewport.width;
+
+        const renderContext = {
+          canvasContext: this.ctx,
+          viewport: viewport
+        }
+
+        const renderTask = page.render(renderContext);
+
+        renderTask.promise.then(() => {
+          this.pageRendering = false;
+          if(this.pageNumPending !== null){
+            this.renderPage(this.pageNumPending);
+            this.pageNumPending = null;
+          }
+        });
+      });
+
+      const pageNumEl: any = this.querySelector('.page_num');
+      if(pageNumEl){
+        pageNumEl.textContent = num;
+      }
+
     }
 
-    connectedCallback() {
-      if (!this.pdfPath || !this.workerPath) return;
+    queueRenderPage(num: any){
+      if(this.pageRendering){
+        this.pageNumPending = num;
+      }else{
+        this.renderPage(num);
+      }
+    }
 
-      window.addEventListener("DOMContentLoaded", this.handleLoaded.bind(this));
+    onPrevPage(){
+      if(this.pageNum <= 1){
+        return;
+      }
+      this.pageNum--;
+      this.queueRenderPage(this.pageNum);
     }
 
-    disconnectedCallback() {
-      window.removeEventListener(
-        "DOMContentLoaded",
-        this.handleLoaded.bind(this)
-      );
+    onNextPage(){
+      // console.log(this.pdfDoc.numPages);
+      if(this.pageNum >= this.pdfDoc.numPages){
+        return;
+      }
+      this.pageNum++;
+      this.queueRenderPage(this.pageNum);
     }
   }
 

package/src/components/prevnext.astro

@@ -10,7 +10,7 @@
  */
 import JeawinApi from "../scripts/cms.js";
 import { render_url, render_value, render_lang } from "../scripts/util.js";
-const { nodeinfo, node_id, channel_id, category_id } = Astro.props;
+const { nodeinfo, node_id, channel_id, category_id, ...other_props } = Astro.props;
 const { all_langs, jeawin_apikey, jeawin_api_domain, jeawin_api_path, sticky_top_height, is_preview, base, url_suffix } =
   Astro.locals;
 const jeawinapi = new JeawinApi({
@@ -74,9 +74,7 @@ if (Number(nodeinfo.category_id)) {
 
 <hr class="my-7 border-gray-200" />
 <div
-  class="my-7 mx-auto px-4 sm:px-6 lg:px-8 flex items-center flex-nowrap justify-between gap-4"
-  data-aos="fade-up"
-  data-aos-once="false"
+  class="my-7 mx-auto px-4 sm:px-6 lg:px-8 flex items-center flex-nowrap justify-between gap-4" {...other_props}
 >
   <div class="text-center">
     <div class="leading-6 font-semibold text-sky-500">{nodeinfo.channel_name}</div>

package/src/components/product_category_list.astro

@@ -17,22 +17,6 @@ import ProductCard from "./product_card.astro";
 import NodesList from "./nodes_list.astro";
 import ChildrenCategoriesList from "./children_categories_list.astro";
 
-interface Props {
-  channel_id: any;
-  category_id?: any;
-  uri?: string;
-  page?: any;
-  limit?: any;
-  no_fields?: any;
-  include_children_category_nodes?: any;
-  show_children_categories?: boolean;
-  show_category_nodes?: boolean;
-  has_sider?: boolean;
-  layout?: any;
-  node_item_component?: any;
-  max_width_screen?: any;
-}
-
 const {
   channel_id,
   category_id,
@@ -46,7 +30,8 @@ const {
   has_sider = false,
   layout = "grid gap-4 grid-cols-2 xl:grid-cols-4",
   node_item_component,
-  max_width_screen=  'max-w-screen-2xl'
+  max_width_screen=  'max-w-screen-2xl',
+  ...other_props
 } = Astro.props;
 
 const { btn_class, all_categories, base, url_suffix } = Astro.locals;
@@ -72,7 +57,7 @@ switch (node_item_component) {
         class:list={[
           "py-12",
           { "bg-[#ffffff]": idx % 2 === 1, "bg-slate-50": idx % 2 === 0 },
-        ]}  data-aos="fade-up" data-aos-once="false"
+        ]} {...other_props}
       >
         <div class:list={has_sider ? "w-full" : [max_width_screen, "mx-auto"]} x-data="{expanded: false}">
           <div class="px-4">
@@ -162,7 +147,7 @@ switch (node_item_component) {
       </section>
     ))
   ) : (
-    <section class="py-12 bg-slate-50" data-aos="fade-up" data-aos-once="false">
+    <section class="py-12 bg-slate-50" {...other_props}>
       <div class:list={has_sider ? "w-full" : [max_width_screen, "mx-auto"]}>
         <div class="px-4">
           <NodesList

package/src/components/section_container.astro

@@ -1,12 +1,13 @@
 ---
-interface Props extends astroHTML.JSX.HTMLAttributes {
-  bgcolor?: any;
-  max_width_screen?: any;
-  aosOption?: {
-    animation?: string;
-    once?: boolean;
-  }
-}
+/**
+ * 通用section组件
+ *
+ * @package jeawin-astro
+ * @author		Chaegumi
+ * @copyright	Copyright (c) 2024-2099 jeawin.com
+ * @email		chaegumi@jeawin.com
+ * @filesource
+ */
 const {
   bgcolor = "bg-white",
   max_width_screen = "max-w-screen-2xl",
@@ -18,7 +19,7 @@ const {
 } = Astro.props;
 ---
 
-<section data-aos={aosOption.animation} data-aos-once={aosOption.once} class:list={["relative", "z-[2]", bgcolor]} {...other_props}>
+<section class:list={["relative", "z-[2]", bgcolor]} {...other_props}>
   <div
     class:list={[
       "relative",

package/src/components/share_button.astro

@@ -9,7 +9,7 @@
  * @filesource
  */
 import { render_lang, render_value } from "../scripts/util.js";
-const { canonical, seo_title, seo_description } = Astro.props;
+const { canonical, seo_title, seo_description, ...other_props } = Astro.props;
 
 const { all_langs } = Astro.locals;
 
@@ -128,7 +128,7 @@ const medias = [
 ];
 ---
 
-<div class="flex gap-2" data-aos="fade-up" data-aos-once="false">
+<div class="flex gap-2" {...other_props}>
   <div>{render_lang(all_langs, "Share on")}</div>
   <ul class="flex gap-2 flex-wrap m-0 p-0">
     {

package/src/components/tags_category_list.astro

@@ -14,21 +14,6 @@ import { render_url } from "../scripts/util.js";
 import _ from "lodash";
 import NodesList from "./nodes_list.astro";
 
-interface Props {
-  channel_id: any;
-  category_id?: any;
-  uri?: any;
-  page?: any;
-  limit?: any;
-  include_children_category_nodes?: any;
-  no_fields?: any;
-  show_category_nodes?: boolean;
-  has_sider?: boolean;
-  layout?: any;
-  node_item_component?: any;
-  max_width_screen?: any;
-}
-
 const {
   channel_id,
   category_id,
@@ -41,7 +26,8 @@ const {
   has_sider = false,
   layout = "",
   node_item_component,
-  max_width_screen = 'max-w-screen-2xl'
+  max_width_screen = 'max-w-screen-2xl',
+  ...other_props
 } = Astro.props;
 
 const { btn_class, all_categories, base, url_suffix } = Astro.locals;
@@ -61,9 +47,7 @@ const categories: any[] = _.filter(all_categories, (o: any) => {
         class:list={[
           "py-12",
           { "bg-[#ffffff]": idx % 2 === 1, "bg-slate-50": idx % 2 === 0 },
-        ]}
-        data-aos="fade-up"
-        data-aos-once="false"
+        ]} {...other_props}
       >
         <div class:list={has_sider ? "w-full" : [max_width_screen, "mx-auto"]}>
           <div class="px-4">
@@ -112,7 +96,7 @@ const categories: any[] = _.filter(all_categories, (o: any) => {
       </section>
     ))
   ) : (
-    <section class="py-12 bg-slate-50" data-aos="fade-up" data-aos-once="false">
+    <section class="py-12 bg-slate-50" {...other_props}>
       <div class:list={has_sider ? "w-full" : [max_width_screen, "mx-auto"]}>
         <div class="px-4">
           <NodesList