@rxdrag/website-lib-core 0.0.8 → 0.0.10

package/src/controller/{popup.ts → OpenableController.ts}

@@ -1,12 +1,12 @@
-import { DATA_MOTION_POPUP, PopupAnimationConfig } from "../motion";
+import { DATA_MOTION_OPENABLE, OpenableAnimationConfig } from "../motion";
 import { applyAnimation } from "./applyAnimation";
 import { gsap } from "gsap/dist/gsap";
 import {
   EVENT_OPEN,
   EVENT_CLOSE,
-  DATA_POPUP,
-  DATA_POPUP_ROLE,
-  PopupRole,
+  DATA_OPENABLE,
+  DATA_OPENABLE_ROLE,
+  OpenAble,
   EVENT_SELECT,
   EVENT_UNSELECT,
 } from "./consts";
@@ -126,14 +126,14 @@ export class EventBus {
   }
 }
 
-export class PopupController {
+export class OpenableController {
   constructor(protected doc: Document | undefined) {}
   protected unmountHandlers: (() => void)[] = [];
   protected eventBus = new EventBus();
 
   mount() {
     this.unmount();
-    this.initPopupAnimations();
+    this.initOpenableAnimations();
   }
 
   unmount() {
@@ -142,38 +142,38 @@ export class PopupController {
   }
   /**
    * 打开弹出层
-   * @param popupKey - 弹出层的唯一标识
+   * @param openableKey - 弹出层的唯一标识
    * @param target - 触发打开的目标元素
    */
-  open = (popupKey: string, target: HTMLElement): void => {
+  open = (openableKey: string, target: HTMLElement): void => {
     if (!this.doc) return;
 
     try {
       // 查找 Modal 容器
-      const modalContainer = this.getPopupContainer(popupKey);
+      const modalContainer = this.getOpenableContainer(openableKey);
       if (modalContainer) {
         modalContainer.classList.add("open");
-        this.eventBus.emit(EVENT_OPEN, { key: popupKey, target });
+        this.eventBus.emit(EVENT_OPEN, { key: openableKey, target });
       } else {
-        console.warn(`未找到弹出层: ${popupKey}`);
+        console.warn(`未找到弹出层: ${openableKey}`);
       }
     } catch (error) {
-      console.error(`打开弹出层失败: ${popupKey}`, error);
+      console.error(`打开弹出层失败: ${openableKey}`, error);
     }
   };
 
   /**
    * 关闭弹出层
-   * @param popupKey - 弹出层的唯一标识
+   * @param openableKey - 弹出层的唯一标识
    * @param target - 可选的目标元素，如果提供则使用该元素，否则查找容器
    */
-  close = (popupKey: string, target?: HTMLElement): void => {
+  close = (openableKey: string, target?: HTMLElement): void => {
     if (!this.doc) return;
 
     try {
-      const container = target || this.getPopupContainer(popupKey);
+      const container = target || this.getOpenableContainer(openableKey);
       if (!container) {
-        console.warn(`找不到弹出层容器: ${popupKey}`);
+        console.warn(`找不到弹出层容器: ${openableKey}`);
         return;
       }
 
@@ -182,28 +182,30 @@ export class PopupController {
 
       // 触发关闭事件
       this.eventBus.emit(EVENT_CLOSE, {
-        key: popupKey,
+        key: openableKey,
         target: container,
       });
     } catch (error) {
-      console.error(`关闭弹出层失败: ${popupKey}`, error);
+      console.error(`关闭弹出层失败: ${openableKey}`, error);
     }
   };
 
   /**
    * 获取弹出层容器元素
-   * @param popupKey - 弹出层的唯一标识
+   * @param openableKey - 弹出层的唯一标识
    * @returns 弹出层容器元素，如果未找到则返回undefined
    */
-  getPopupContainer = (popupKey: string): HTMLElement | undefined => {
+  getOpenableContainer = (openableKey: string): HTMLElement | undefined => {
     if (!this.doc) return undefined;
 
     try {
       return this.doc.querySelector(
-        `[${DATA_POPUP}="${popupKey}"][${DATA_POPUP_ROLE}="${PopupRole.ModalContainer}"], [${DATA_POPUP}="${popupKey}"][${DATA_POPUP_ROLE}="${PopupRole.PopoverContainer}"]`
+        `[${DATA_OPENABLE}="${openableKey}"][${DATA_OPENABLE_ROLE}="${OpenAble.ModalContainer}"], 
+         [${DATA_OPENABLE}="${openableKey}"][${DATA_OPENABLE_ROLE}="${OpenAble.PopoverContainer}"], 
+         [${DATA_OPENABLE}="${openableKey}"][${DATA_OPENABLE_ROLE}="${OpenAble.CollapseContainer}"]`
       ) as HTMLElement | undefined;
     } catch (error) {
-      console.error(`获取弹出层容器失败: ${popupKey}`, error);
+      console.error(`获取弹出层容器失败: ${openableKey}`, error);
       return undefined;
     }
   };
@@ -212,22 +214,36 @@ export class PopupController {
    * 初始化弹窗动画
    * @returns 清理函数
    */
-  initPopupAnimations = () => {
+  initOpenableAnimations = () => {
     const unsubscribe = this.onOpenAll((event) => {
       const openResponseElements = this.doc?.querySelectorAll(
-        `[${DATA_MOTION_POPUP}]`
+        `[${DATA_MOTION_OPENABLE}]`
+      );
+      const containerElement = this.getOpenableContainer(event.key);
+      //处理循环嵌套的情况
+      const subContainers = containerElement?.querySelectorAll(
+        `[${DATA_OPENABLE_ROLE}="${OpenAble.CollapseContainer}"], 
+         [${DATA_OPENABLE_ROLE}="${OpenAble.ModalContainer}"], 
+         [${DATA_OPENABLE_ROLE}="${OpenAble.PopoverContainer}"]`
       );
-      const containerElement = this.getPopupContainer(event.key);
       //响应open事件
       openResponseElements?.forEach((element) => {
+        let isInSubContainer = false;
+        subContainers?.forEach((subContainer) => {
+          if (subContainer.contains(element)) {
+            isInSubContainer = true;
+            return;
+          }
+        });
         if (
           this.doc?.defaultView &&
           element instanceof this.doc.defaultView?.HTMLElement &&
-          containerElement?.contains(element)
+          containerElement?.contains(element) &&
+          !isInSubContainer
         ) {
-          if (element.dataset.motionPopup) {
-            const animation = JSON.parse(element.dataset.motionPopup) as
-              | PopupAnimationConfig
+          if (element.dataset.motionOpenable) {
+            const animation = JSON.parse(element.dataset.motionOpenable) as
+              | OpenableAnimationConfig
               | undefined;
             if (animation?.initial) {
               applyInitialState(element, animation.initial);
@@ -241,7 +257,7 @@ export class PopupController {
 
       return () => {
         const closeResponseElements = this.doc?.querySelectorAll(
-          `[${DATA_MOTION_POPUP}]`
+          `[${DATA_MOTION_OPENABLE}]`
         );
 
         //响应close事件
@@ -251,11 +267,11 @@ export class PopupController {
             element instanceof this.doc?.defaultView.HTMLElement
           ) {
             if (
-              element.dataset.motionPopup &&
+              element.dataset.motionOpenable &&
               containerElement?.contains(element)
             ) {
-              const animation = JSON.parse(element.dataset.motionPopup) as
-                | PopupAnimationConfig
+              const animation = JSON.parse(element.dataset.motionOpenable) as
+                | OpenableAnimationConfig
                 | undefined;
               if (animation?.close) {
                 // 首先终止该元素上可能正在进行的所有动画（包括open动画）
@@ -278,22 +294,22 @@ export class PopupController {
   };
 
   public onOpen = (
-    popupKey: string,
+    openableKey: string,
     callback: (event: PopupEvent) => VoidFunction | void
   ): (() => void) => {
     return this.onOpenAll((event) => {
-      if (event.key === popupKey) {
+      if (event.key === openableKey) {
         return callback(event);
       }
     });
   };
 
   public onClose = (
-    popupKey: string,
+    openableKey: string,
     callback: (event: PopupEvent) => void
   ) => {
     return this.onCloseAll((event) => {
-      if (event.key === popupKey) {
+      if (event.key === openableKey) {
         callback(event);
       }
     });

package/src/controller/PageLoader.ts

@@ -93,19 +93,9 @@ export class PageLoader implements IPageLoader {
       // 只监听一个事件，优先使用 astro:page-load
       if (typeof window !== "undefined") {
         // 在客户端环境中
-        if (
-          document.readyState === "complete" ||
-          document.readyState === "interactive"
-        ) {
-          // 如果文档已加载完成，立即执行一次
-          setTimeout(handleEvent, 0);
-        } else {
-          // 否则等待 DOMContentLoaded 事件
-          this.doc.addEventListener("DOMContentLoaded", handleEvent, {
-            once: true,
-          });
-        }
-
+        this.doc.addEventListener("astro:page-load", handleEvent, {
+          once: true,
+        });
         // 只监听页面转场事件
         this.doc.addEventListener("astro:after-swap", handleEvent);
       }

package/src/controller/PopoverController.ts

@@ -1,7 +1,7 @@
-import { DATA_POPUP, DATA_POPUP_ROLE, PopupRole } from "./consts";
-import { PopupController } from "./popup";
+import { DATA_OPENABLE, DATA_OPENABLE_ROLE, OpenAble } from "./consts";
+import { OpenableController } from "./OpenableController";
 
-export class PopoverController extends PopupController {
+export class PopoverController extends OpenableController {
   private static instances: Record<string, PopoverController> = {};
   private constructor(doc?: Document) {
     super(doc);
@@ -47,15 +47,15 @@ export class PopoverController extends PopupController {
     //console.log("====> mount popover", this.doc);
     super.mount();
     // 获取所有的 Popover 实例
-    const popups = this.doc?.querySelectorAll(`[${DATA_POPUP}]`);
+    const popups = this.doc?.querySelectorAll(`[${DATA_OPENABLE}]`);
     popups?.forEach((popup) => {
-      const popupKey = popup.getAttribute(DATA_POPUP);
+      const openableKey = popup.getAttribute(DATA_OPENABLE);
       //处理鼠标交互事件
-      if (popupKey && popup) {
+      if (openableKey && popup) {
         if (
-          popup.getAttribute(DATA_POPUP_ROLE) === PopupRole.PopoverContainer
+          popup.getAttribute(DATA_OPENABLE_ROLE) === OpenAble.PopoverContainer
         ) {
-          const unsub = this.initPopover(popupKey, popup as HTMLElement);
+          const unsub = this.initPopover(openableKey, popup as HTMLElement);
           this.unmountHandlers.push(unsub);
         }
       }
@@ -68,12 +68,12 @@ export class PopoverController extends PopupController {
 
   /**
    * 初始化Popover的鼠标交互事件
-   * @param popupKey - 弹出层的唯一标识
+   * @param openableKey - 弹出层的唯一标识
    * @param element - 弹出层的 DOM 元素
    * @returns 清理函数，用于移除事件监听器
    */
   public initPopover = (
-    popupKey: string,
+    openableKey: string,
     element: HTMLElement
   ): (() => void) => {
     if (!this.doc) return () => {};
@@ -81,11 +81,11 @@ export class PopoverController extends PopupController {
     try {
       // 创建新的事件处理函数
       const handleMouseEnter = () => {
-        this.open(popupKey, element);
+        this.open(openableKey, element);
       };
 
       const handleMouseLeave = () => {
-        this.close(popupKey);
+        this.close(openableKey);
       };
 
       // 添加新的事件监听器
@@ -104,7 +104,7 @@ export class PopoverController extends PopupController {
         element.removeEventListener("touchend", handleMouseLeave, options as EventListenerOptions);
       };
     } catch (error) {
-      console.error(`初始化Popover事件失败: ${popupKey}`, error);
+      console.error(`初始化Popover事件失败: ${openableKey}`, error);
       return () => {};
     }
   };

package/src/controller/TabsController.ts

@@ -8,7 +8,7 @@ import {
 import { AnimationConfig } from "../motion";
 import { applyAnimation } from "./applyAnimation";
 import { EVENT_SELECT, EVENT_UNSELECT } from "./consts";
-import { EventBus, SelectionEvent } from "./popup";
+import { EventBus, SelectionEvent } from "./OpenableController";
 
 export class TabsController {
   private static instances: Record<string, TabsController> = {};

package/src/controller/consts.ts

@@ -1,8 +1,8 @@
 //弹层ID
-export const DATA_POPUP = "data-popup";
+export const DATA_OPENABLE = "data-openable";
 
-//弹层角色，取值：PopupRole
-export const DATA_POPUP_ROLE = "data-popup-role";
+//弹层角色，取值：Openable
+export const DATA_OPENABLE_ROLE = "data-openable-role";
 
 //弹层CTA，用于跟踪用户点击行为
 export const DATA_POPUP_CTA = "data-popup-cta";
@@ -10,19 +10,22 @@ export const DATA_POPUP_CTA = "data-popup-cta";
 //已经进入过视窗
 export const DATA_VIEWPORT_ENTERED = "data-viewport-entered";
 
-export enum PopupRole {
+export enum OpenAble {
   PopoverContainer = "popover-container",
   PopoverPanel = "popover-panel",
   ModalContainer = "modal-container",
   ModalTrigger = "modal-trigger",
   ModalPanel = "modal-panel",
   ModalCloser = "modal-closer",
+  CollapseContainer = "collapse-container",
+  CollapsePanel = "collapse-panel",
+  CollapseTrigger = "collapse-trigger",
 }
 
 /** 弹出层打开事件名称 */
-export const EVENT_OPEN = "popup-open";
+export const EVENT_OPEN = "openable-open";
 /** 弹出层关闭事件名称 */
-export const EVENT_CLOSE = "popup-close";
+export const EVENT_CLOSE = "openable-close";
 
 /** 元素选中事件名称，比如tab切换 */
 export const EVENT_SELECT = "element-select";

package/src/controller/index.ts

@@ -3,6 +3,7 @@ export * from "./utils";
 export * from "./ModalController";
 export * from "./AnimateController";
 export * from "./AosController";
+export * from "./CollapseController";
 export * from "./PopoverController";
 export * from "./PageLoader";
 export * from "./TabsController";

package/src/entify/IEntify.ts

@@ -42,7 +42,7 @@ export interface IEntify {
 
   getPostPaths(): Promise<unknown>;
 
-  getPostBySlug(slug: string, coverSize: TSize | undefined): Promise<unknown>;
+  getPostBySlug(slug: string, coverSize: TSize | undefined): Promise<TPost | undefined>;
 
   getPostSlugs(): Promise<Array<string | undefined>>;
 

package/src/entify/lib/newQueryProductOptions.ts

@@ -7,7 +7,6 @@ import {
   MediaOnProductFields,
   AttachmentOnProductQueryOptions,
   AttachmentOnProductFields,
-  ProductRelatedPivotQueryOptions,
   ProductCategoryFields,
 } from "@rxdrag/rxcms-models";
 import { TSize } from "../types";
@@ -52,6 +51,8 @@ export function newQueryProductOptions(imagSize?: TSize) {
     ProductFields.extends,
     ProductFields.description,
     ProductFields.features,
+    ProductFields.relatedSlugs,
+    ProductFields.relatedSlugs,
   ])
     .meta(newPageMetaOptions())
     .mediaPivots(creatProductMediaOptions(imagSize))
@@ -71,16 +72,6 @@ export function newQueryProductOptions(imagSize?: TSize) {
         ]).file(["url"])
       )
     )
-    .relatedPivot(
-      new ProductRelatedPivotQueryOptions().target(
-        new ProductQueryOptions()
-          .title()
-          .shortTitle()
-          .slug()
-          .description()
-          .mediaPivots(creatProductMediaOptions())
-      )
-    )
     .category([
       ProductCategoryFields.id,
       ProductCategoryFields.slug,

package/src/entify/lib/queryOneProductBySlug.ts

@@ -1,21 +1,63 @@
-import { Product, ProductBoolExp, ProductOrderBy, ProductDistinctExp } from "@rxdrag/rxcms-models";
+import {
+  Product,
+  ProductBoolExp,
+  ProductOrderBy,
+  ProductDistinctExp,
+} from "@rxdrag/rxcms-models";
 import { newQueryProductOptions } from "./newQueryProductOptions";
 import { queryOneEntity } from "./queryOneEntity";
 import { EnvVariables, TSize } from "../types";
-import { TProduct } from "../view-model";
+import { productToViewModel, TProduct } from "../view-model";
+import { queryEntityList } from "./queryEntityList";
 
-export async function queryOneProductBySlug(slug: string, imageSize: TSize | undefined, envVariables: EnvVariables) {
+export async function queryOneProductBySlug(
+  slug: string,
+  imageSize: TSize | undefined,
+  envVariables: EnvVariables
+) {
+  const product = await queryOneEntity<
+    Product,
+    ProductBoolExp,
+    ProductOrderBy,
+    ProductDistinctExp
+  >(
+    newQueryProductOptions(imageSize).setQueryArgs({
+      where: {
+        slug: {
+          _eq: slug,
+        },
+      },
+    }),
+    envVariables
+  );
+
+  if (!product) {
+    return product;
+  }
+
+  const tProduct = productToViewModel(product)!;
 
-  const product = await queryOneEntity<Product, ProductBoolExp, ProductOrderBy, ProductDistinctExp>(
-    newQueryProductOptions(imageSize)
-      .setQueryArgs({
+  if (product?.relatedSlugs?.length) {
+    const result = await queryEntityList<
+      Product,
+      ProductBoolExp,
+      ProductOrderBy,
+      ProductDistinctExp
+    >(
+      newQueryProductOptions(imageSize).setQueryArgs({
         where: {
           slug: {
-            "_eq": slug
+            _in: product?.relatedSlugs,
           },
         },
       }),
-    envVariables
-  );
-  return product as TProduct | undefined;
+      envVariables
+    );
+
+    tProduct.related = result?.items?.map((pro) => productToViewModel(pro)) as
+      | TProduct[]
+      | undefined;
+  }
+
+  return tProduct;
 }

package/src/entify/lib/queryOneTheme.ts

@@ -21,13 +21,7 @@ export async function queryOneTheme(envVariables: EnvVariables) {
     ThemeDistinctExp
   >(
     new ThemeQueryOptions(
-      [
-        ThemeFields.id,
-        ThemeFields.name,
-        ThemeFields.css,
-        ThemeFields.settings,
-        ThemeFields.tailwindConfig,
-      ],
+      [ThemeFields.id, ThemeFields.name, ThemeFields.settings],
       {
         where: {
           lang: {

package/src/entify/view-model/funcs.ts

@@ -1,12 +1,10 @@
 import {
   AttachmentOnProduct,
   Media,
-  MediaOnProduct,
   Post,
   PostCategory,
   Product,
   ProductCategory,
-  ProductRelatedPivot,
   User,
   WebsiteSettings,
 } from "@rxdrag/rxcms-models";
@@ -116,23 +114,9 @@ export function productToViewModel(product?: Product): TProduct | undefined {
     attachments:
       product?.attachmentPivots &&
       attachmentsToViewModel(product?.attachmentPivots),
-    related: relatedPovitToViewModel(product?.relatedPivot),
   };
 }
 
-export function relatedPovitToViewModel(
-  related?: ProductRelatedPivot[]
-): TProduct[] | undefined {
-  if (!related) {
-    return undefined;
-  }
-  return related.map((relatedPivot) => {
-    return productToViewModel({
-      ...relatedPivot.target,
-      seqValue: relatedPivot.seqValue,
-    })!;
-  });
-}
 
 export function productListToViewModel(
   products?: ListResult<Product>

package/src/lib/utils.ts

@@ -31,11 +31,15 @@ export function productsPagination(options: {
   });
 }
 
-export function productBreadcrumbs(product?: TProduct) {
+export function productBreadcrumbs(
+  product?: TProduct,
+  homeTitle: string = "Home",
+  productsTitle: string = "Products"
+) {
   // 生成面包屑
   const breadcrumbs: TBreadcrumbItem[] = [
-    { title: "Home", href: "/" },
-    { title: "Products", href: "/products/page/1" },
+    { title: homeTitle, href: "/" },
+    { title: productsTitle, href: "/products/page/1" },
   ];
 
   const category = product?.category;
@@ -51,11 +55,15 @@ export function productBreadcrumbs(product?: TProduct) {
   return breadcrumbs;
 }
 
-export function productListBreadcrumbs(category?: TProductCategory | null) {
+export function productListBreadcrumbs(
+  category?: TProductCategory | null,
+  homeTitle: string = "Home",
+  productsTitle: string = "Products"
+) {
   // 生成面包屑
   const breadcrumbs: TBreadcrumbItem[] = [
-    { title: "Home", href: "/" },
-    { title: "Products", href: "/products/page/1" },
+    { title: homeTitle, href: "/" },
+    { title: productsTitle, href: "/products/page/1" },
   ];
   if (category?.name) {
     breadcrumbs.push({
@@ -65,11 +73,15 @@ export function productListBreadcrumbs(category?: TProductCategory | null) {
   return breadcrumbs;
 }
 
-export function postBreadcrumbs(post?: TPost) {
+export function postBreadcrumbs(
+  post: TPost | undefined,
+  homeTitle: string = "Home",
+  postsTitle: string = "Posts"
+) {
   // 生成面包屑
   const breadcrumbs: TBreadcrumbItem[] = [
-    { title: "Home", href: "/" },
-    { title: "Posts", href: "/posts/page/1" },
+    { title: homeTitle, href: "/" },
+    { title: postsTitle, href: "/posts/page/1" },
   ];
 
   const category = post?.category;
@@ -85,11 +97,15 @@ export function postBreadcrumbs(post?: TPost) {
   return breadcrumbs;
 }
 
-export function postListBreadcrumbs(category?: TPostCategory) {
+export function postListBreadcrumbs(
+  category?: TPostCategory | null,
+  homeTitle: string = "Home",
+  postsTitle: string = "Posts"
+) {
   // 生成面包屑
   const breadcrumbs: TBreadcrumbItem[] = [
-    { title: "Home", href: "/" },
-    { title: "Blog", href: "/posts/page/1" },
+    { title: homeTitle, href: "/" },
+    { title: postsTitle, href: "/posts/page/1" },
   ];
   if (category?.name) {
     breadcrumbs.push({
@@ -99,10 +115,10 @@ export function postListBreadcrumbs(category?: TPostCategory) {
   return breadcrumbs;
 }
 
-export function pageBreadcrumbs(title: string) {
+export function pageBreadcrumbs(title: string, homeTitle: string = "Home") {
   // 生成面包屑
   const breadcrumbs: TBreadcrumbItem[] = [
-    { title: "Home", href: "/" },
+    { title: homeTitle, href: "/" },
     { title },
   ];
   return breadcrumbs;

package/src/motion/consts.ts

@@ -1,7 +1,7 @@
 import {
   AnchorOffsets,
   AosAnimationConfig,
-  PopupAnimationConfig,
+  OpenableAnimationConfig,
   AnimationConfig,
 } from "./types";
 
@@ -17,7 +17,7 @@ export const DATA_MOTION_TAP = "data-motion-tap";
 //入视图
 export const DATA_MOTION_INVIEW = "data-motion-inview";
 //弹层动画，有动作的组件联动
-export const DATA_MOTION_POPUP = "data-motion-popup";
+export const DATA_MOTION_OPENABLE = "data-motion-openable";
 //数字动画
 export const DATA_MOTION_NUMBER = "data-motion-number";
 export const DATA_MOTION_NUMBER_ONCE = "data-motion-number-once";
@@ -340,7 +340,7 @@ export const AOS_ANIMATIONS: Record<string, AosAnimationConfig | undefined> = {
 
 export const POPUP_ANIMATIONS: Record<
   string,
-  PopupAnimationConfig | undefined
+  OpenableAnimationConfig | undefined
 > = {
   // 缩放效果
   scale: {

package/src/motion/normalizePopupAnimation.ts

@@ -1,12 +1,12 @@
 import { merge } from "lodash-es";
-import { PopupAnimationConfig } from "./types";
+import { OpenableAnimationConfig } from "./types";
 import { POPUP_ANIMATIONS } from "./consts";
 
 export function normalizePopupAnimation(
-  motion?: PopupAnimationConfig | string
+  motion?: OpenableAnimationConfig | string
 ) {
   let presetKey: string | undefined;
-  let normalMotion: PopupAnimationConfig | undefined;
+  let normalMotion: OpenableAnimationConfig | undefined;
   if (typeof motion === "string") {
     presetKey = motion;
   } else {

package/src/motion/types.ts

@@ -122,7 +122,7 @@ export type HoverAnimationConfig = AnimationConfig & {
   exit?: AnimationConfig;
 };
 
-export type PopupAnimationConfig = AnimationConfig & {
+export type OpenableAnimationConfig = AnimationConfig & {
   // 初始状态设置 (gsap.set) - 立即应用，不产生动画
   initial?: AnimationStyles;
   // 打开时的动画