From 1e494ea4c957cba5309ad5366efa7b9cf49542b5 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 24 Mar 2023 18:25:11 +0800
Subject: [PATCH 01/14] up

---
 packages/opendesign/src/icons/svgs/stroke/arrow-right.svg | 1 -
 packages/opendesign/tsconfig.json                         | 3 ++-
 2 files changed, 2 insertions(+), 2 deletions(-)
 delete mode 100644 packages/opendesign/src/icons/svgs/stroke/arrow-right.svg

diff --git a/packages/opendesign/src/icons/svgs/stroke/arrow-right.svg b/packages/opendesign/src/icons/svgs/stroke/arrow-right.svg
deleted file mode 100644
index 939b57c5..00000000
--- a/packages/opendesign/src/icons/svgs/stroke/arrow-right.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
\ No newline at end of file
diff --git a/packages/opendesign/tsconfig.json b/packages/opendesign/tsconfig.json
index 2fcfbf84..492992fd 100644
--- a/packages/opendesign/tsconfig.json
+++ b/packages/opendesign/tsconfig.json
@@ -26,10 +26,11 @@
     "src/**/*.ts",
     "src/**/*.d.ts",
     "src/**/*.tsx",
-    "src/**/*.vue",
+    "src/**/*.vue"
   ],
   "exclude": [
     "src/tokens/token.config.ts",
     "src/icons/icon.config.ts",
+    "src/icons/cleansvg.config.ts"
   ]
 }
\ No newline at end of file
-- 
Gitee


From 5fca16eee81a4548a881c2682217f0366820e3c2 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 24 Mar 2023 23:03:20 +0800
Subject: [PATCH 02/14] up

---
 packages/opendesign/src/components/slides/OSlides.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/opendesign/src/components/slides/OSlides.vue b/packages/opendesign/src/components/slides/OSlides.vue
index 34d898d5..decc2596 100644
--- a/packages/opendesign/src/components/slides/OSlides.vue
+++ b/packages/opendesign/src/components/slides/OSlides.vue
@@ -207,6 +207,16 @@ const changeActiveSlide = (index: number, animate = true, reverse = false) => {
   }
 };
 
+watch(
+  () => props.autoPlay,
+  (v) => {
+    if (v) {
+      startPlay();
+    } else {
+      stopPlay();
+    }
+  }
+);
 onMounted(() => {
   // if (slidesRef.value) {
   //   console.log(getCssVariable('--gap-x', slidesRef.value));
-- 
Gitee


From 86518ae65b0c4e4d2b6022eed9ab202a0115e7f9 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Sat, 25 Mar 2023 11:10:10 +0800
Subject: [PATCH 03/14] up

---
 packages/opendesign/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json
index 4c382da7..729c7ef4 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opensig/opendesign",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "main": "lib/index.js",
   "module": "es/index.mjs",
   "types": "es/index.d.ts",
-- 
Gitee


From 383e2968775250166ba424e6b95c3236163674fe Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Sat, 25 Mar 2023 11:10:16 +0800
Subject: [PATCH 04/14] up

---
 packages/scripts/src/gen-icon/config.ts | 56 +++++++++++--------------
 1 file changed, 24 insertions(+), 32 deletions(-)

diff --git a/packages/scripts/src/gen-icon/config.ts b/packages/scripts/src/gen-icon/config.ts
index f2c7fdca..786be081 100644
--- a/packages/scripts/src/gen-icon/config.ts
+++ b/packages/scripts/src/gen-icon/config.ts
@@ -2,26 +2,26 @@ import type { Config, PluginConfig } from 'svgo';
 
 export interface IconsConfig {
   svgo: {
-    fill: Config,
-    stroke: Config,
-    color: Config,
-  },
-  input: string,
-  output: string,
-  template: typeof template
+    fill: Config;
+    stroke: Config;
+    color: Config;
+  };
+  input: string;
+  output: string;
+  template: typeof template;
 }
-export const basePlugins:PluginConfig[] = [
+export const basePlugins: PluginConfig[] = [
   {
-    // 将id替换成class
+    // 将id添加到class
     name: 'addClassesbyId',
     fn: () => {
-      const nodes:string[] = ['*'];
+      const nodes: string[] = ['*'];
       return {
         element: {
           enter: (node) => {
-            if (nodes.includes('*') || nodes.includes(node.name)){
-              const classname = node.attributes.class|| '';
-              const id = node.attributes.id||'';
+            if (nodes.includes('*') || nodes.includes(node.name)) {
+              const classname = node.attributes.class || '';
+              const id = node.attributes.id || '';
               const cls = classname.split(' ');
               cls.push(id);
               const classStr = cls.join(' ').trim();
@@ -43,19 +43,19 @@ export const basePlugins:PluginConfig[] = [
       },
     },
   },
+  // 'prefixIds',
   'removeStyleElement',
   'removeScriptElement',
   'removeDimensions',
   'sortAttrs',
   'removeUselessStrokeAndFill',
+  'removeXMLNS',
   {
     name: 'addAttributesToSVGElement',
     params: {
-      attributes: [
-        { ':class': 'classnames' },
-      ],
+      attributes: [{ ':class': 'classnames' }],
     },
-  }
+  },
 ];
 const fillSvgoConfig: Config = {
   plugins: [
@@ -63,12 +63,9 @@ const fillSvgoConfig: Config = {
     {
       name: 'removeAttrs',
       params: {
-        attrs: [
-          'svg:class',
-          'fill',
-        ],
+        attrs: ['svg:class', 'fill'],
       },
-    }
+    },
   ],
 };
 const strokeSvgoConfig: Config = {
@@ -77,12 +74,9 @@ const strokeSvgoConfig: Config = {
     {
       name: 'removeAttrs',
       params: {
-        attrs: [
-          'svg:class',
-          'stroke',
-        ],
+        attrs: ['svg:class', 'stroke'],
       },
-    }
+    },
   ],
 };
 const colorSvgoConfig: Config = {
@@ -91,15 +85,13 @@ const colorSvgoConfig: Config = {
     {
       name: 'removeAttrs',
       params: {
-        attrs: [
-          'svg:class',
-        ],
+        attrs: ['svg:class'],
       },
     },
-  ]
+  ],
 };
 
-const template = ({ name, componentName, svg, type }: { name: string, componentName: string, svg: string, type: 'fill' | 'stroke' | 'color' }) => {
+const template = ({ name, componentName, svg, type }: { name: string; componentName: string; svg: string; type: 'fill' | 'stroke' | 'color' }) => {
   return `<script lang="ts">
 import { defineComponent } from 'vue';
 export default defineComponent({
-- 
Gitee


From 476ae4fd4934e4976d97fc0a1b58b6f4fe5801fe Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Sat, 25 Mar 2023 11:55:09 +0800
Subject: [PATCH 05/14] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=9B=91=E5=90=AChooks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/directves/click-outside.ts | 11 +--
 .../components/directves/on-intersection.ts   |  8 +-
 .../src/components/directves/on-resize.ts     |  4 +-
 .../hooks/use-element-intersection.ts         | 15 ++-
 .../components/hooks/use-element-resize.ts    |  8 +-
 .../hooks/use-intersection-observer.ts        | 81 +++++++---------
 .../src/components/hooks/use-out-click.ts     | 20 ++--
 .../components/hooks/use-resize-observer.ts   | 97 ++++++++-----------
 8 files changed, 108 insertions(+), 136 deletions(-)

diff --git a/packages/opendesign/src/components/directves/click-outside.ts b/packages/opendesign/src/components/directves/click-outside.ts
index 2530a3cd..03c3f2a8 100644
--- a/packages/opendesign/src/components/directves/click-outside.ts
+++ b/packages/opendesign/src/components/directves/click-outside.ts
@@ -1,18 +1,15 @@
 import { ObjectDirective, DirectiveBinding } from 'vue';
 import { useOutClick } from '../hooks/use-out-click';
 
-
 let out: ReturnType<typeof useOutClick> | null = null;
 const vOutClick: ObjectDirective = {
   beforeMount(el: HTMLElement, binding: DirectiveBinding) {
     out = useOutClick();
-    out?.addOutClickListener(el, binding.value);
+    out?.addListener(el, binding.value);
   },
   unmounted(el: HTMLElement) {
-    out?.removeOutClickListener(el);
-  }
+    out?.removeListener(el);
+  },
 };
 
-export {
-  vOutClick
-};
\ No newline at end of file
+export { vOutClick };
diff --git a/packages/opendesign/src/components/directves/on-intersection.ts b/packages/opendesign/src/components/directves/on-intersection.ts
index 158c2cf8..7a2e14da 100644
--- a/packages/opendesign/src/components/directves/on-intersection.ts
+++ b/packages/opendesign/src/components/directves/on-intersection.ts
@@ -12,16 +12,14 @@ const vIntersection: ObjectDirective = {
   mounted(el: HTMLElement, binding: DirectiveBinding) {
     if (isFunction(binding.value)) {
       listener = binding.value;
-      io?.addIntersectionListener(el, listener);
+      io?.observe(el, listener);
     }
   },
   unmounted(el: HTMLElement) {
     if (listener) {
-      io?.removeIntersectionListener(el, listener);
+      io?.unobserve(el, listener);
     }
   },
 };
 
-export {
-  vIntersection
-};
\ No newline at end of file
+export { vIntersection };
diff --git a/packages/opendesign/src/components/directves/on-resize.ts b/packages/opendesign/src/components/directves/on-resize.ts
index 7d7f9619..2bb477b2 100644
--- a/packages/opendesign/src/components/directves/on-resize.ts
+++ b/packages/opendesign/src/components/directves/on-resize.ts
@@ -12,12 +12,12 @@ const vOnResize: ObjectDirective = {
   mounted(el: HTMLElement, binding: DirectiveBinding) {
     if (isFunction(binding.value)) {
       listener = binding.value;
-      ro?.addResizeListener(el, listener);
+      ro?.observe(el, listener);
     }
   },
   unmounted(el: HTMLElement) {
     if (listener) {
-      ro?.removeResizeListener(el, listener);
+      ro?.unobserve(el, listener);
     }
   },
 };
diff --git a/packages/opendesign/src/components/hooks/use-element-intersection.ts b/packages/opendesign/src/components/hooks/use-element-intersection.ts
index 30c20e71..a381f10d 100644
--- a/packages/opendesign/src/components/hooks/use-element-intersection.ts
+++ b/packages/opendesign/src/components/hooks/use-element-intersection.ts
@@ -4,10 +4,9 @@ import type { IntersectionListenerT } from './use-intersection-observer';
 import { isFunction } from '../_shared/is';
 
 let io: ReturnType<typeof useIntersectionObserver> | null = null;
-export function useIntersectionObserverDirective({ listener, removeOnUnmounted }: {
-  listener: IntersectionListenerT,
-  removeOnUnmounted?: boolean
-}): { vIntersectionObserver: ObjectDirective } {
+export function useIntersectionObserverDirective({ listener, removeOnUnmounted }: { listener: IntersectionListenerT; removeOnUnmounted?: boolean }): {
+  vIntersectionObserver: ObjectDirective;
+} {
   return {
     vIntersectionObserver: {
       beforeMount() {
@@ -15,14 +14,14 @@ export function useIntersectionObserverDirective({ listener, removeOnUnmounted }
       },
       mounted(el: HTMLElement) {
         if (isFunction(listener)) {
-          io?.addIntersectionListener(el, listener);
+          io?.observe(el, listener);
         }
       },
       unmounted(el: HTMLElement) {
         if (listener && removeOnUnmounted) {
-          io?.removeIntersectionListener(el, listener);
+          io?.unobserve(el, listener);
         }
       },
-    }
+    },
   };
-}
\ No newline at end of file
+}
diff --git a/packages/opendesign/src/components/hooks/use-element-resize.ts b/packages/opendesign/src/components/hooks/use-element-resize.ts
index bfc633ed..22b569da 100644
--- a/packages/opendesign/src/components/hooks/use-element-resize.ts
+++ b/packages/opendesign/src/components/hooks/use-element-resize.ts
@@ -12,14 +12,14 @@ export function useReiszeObserverDirective(onResize: ResizeListenerT): { vResize
       },
       mounted(el: HTMLElement) {
         if (isFunction(onResize)) {
-          ro?.addResizeListener(el, onResize);
+          ro?.observe(el, onResize);
         }
       },
       unmounted(el: HTMLElement) {
         if (onResize) {
-          ro?.removeResizeListener(el, onResize);
+          ro?.unobserve(el, onResize);
         }
       },
-    }
+    },
   };
-}
\ No newline at end of file
+}
diff --git a/packages/opendesign/src/components/hooks/use-intersection-observer.ts b/packages/opendesign/src/components/hooks/use-intersection-observer.ts
index 8d202231..5fd167b1 100644
--- a/packages/opendesign/src/components/hooks/use-intersection-observer.ts
+++ b/packages/opendesign/src/components/hooks/use-intersection-observer.ts
@@ -2,41 +2,39 @@
 import { isFunction } from '../_shared/is';
 
 export type IntersectionListenerT = (entry: IntersectionObserverEntry) => void;
+
 /**
- * 监听元素尺寸变化，
- * ele: 监听元素；
- * onResize: resize回调（entry: 尺寸变化元素，isFirst: 是否为初次监听时的回调);
+ * 监听池
+ * isFirst: 监听的第一次回调
  */
-export function useIntersectionObserver(
-  element?: HTMLElement,
-  listenerFn?: IntersectionListenerT,
-) {
-  let el = element;
-  let cb = listenerFn;
-
-  /**
-   * 监听池
-   * isFirst: 监听的第一次回调
-   */
-  const observerPool = new Map<HTMLElement, {
-    element: HTMLElement,
-    callbacks: Array<IntersectionListenerT>
-  } | null>();
+const observerPool = new WeakMap<
+  HTMLElement,
+  {
+    element: HTMLElement;
+    callbacks: Array<IntersectionListenerT>;
+  } | null
+>();
 
-  // 创建监听实例
-  const instance = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
-    entries.forEach((entry) => {
-      const ele = entry.target as HTMLElement;
-      const ins = observerPool.get(ele);
+// 创建监听实例
+const instance = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
+  entries.forEach((entry) => {
+    const ele = entry.target as HTMLElement;
+    const ins = observerPool.get(ele);
 
-      if (!ins) {
-        return;
-      }
+    if (!ins) {
+      return;
+    }
 
-      ins?.callbacks?.forEach(fn => fn(entry));
-    });
+    ins?.callbacks?.forEach((fn) => fn(entry));
   });
+});
 
+/**
+ * 监听元素尺寸变化，
+ * ele: 监听元素；
+ * onResize: resize回调（entry: 尺寸变化元素，isFirst: 是否为初次监听时的回调);
+ */
+export function useIntersectionObserver() {
   return {
     /**
      * 监听实例
@@ -48,24 +46,21 @@ export function useIntersectionObserver(
      * listener: resize回调, 移除监听时需要指定该监听函数
      * isFirst: 是否为初次监听时的回调
      */
-    addIntersectionListener: (ele?: HTMLElement, listener?: IntersectionListenerT) => {
-      el = ele || element;
-      cb = listener || cb;
-
-      if (!el || !cb || !isFunction(cb)) {
+    observe: (el?: HTMLElement, listener?: IntersectionListenerT) => {
+      if (!el || !isFunction(listener)) {
         return null;
       }
 
       // 同一元素，只创建一次ResizeObserver，通过数组存储回调
       const val = observerPool.get(el);
       if (val) {
-        val.callbacks.push(cb);
+        val.callbacks.push(listener);
       } else {
         instance.observe(el);
 
         observerPool.set(el, {
           element: el,
-          callbacks: [cb],
+          callbacks: [listener],
         });
       }
 
@@ -75,28 +70,22 @@ export function useIntersectionObserver(
      * 移除监听
      * listener: 要移除的监听函数，如果不传，则使用初始化时的回调
      */
-    removeIntersectionListener: (ele?: HTMLElement, listener?: IntersectionListenerT) => {
-      let fn = listener || cb;
-      el = ele || element;
-
-      if (!el || !fn) {
+    unobserve: (el?: HTMLElement, listener?: IntersectionListenerT) => {
+      if (!el || !isFunction(listener)) {
         return;
       }
 
       const val = observerPool.get(el);
 
       if (val) {
-        const idx = val.callbacks.indexOf(fn);
+        const idx = val.callbacks.indexOf(listener);
         val.callbacks.splice(idx, 1);
         if (val.callbacks.length === 0) {
           // 当el无监听时，销毁resizeObserver
           instance.unobserve(el);
           observerPool.delete(el);
         }
-        if (observerPool.size === 0) {
-          instance.disconnect();
-        }
       }
-    }
+    },
   };
-};
\ No newline at end of file
+}
diff --git a/packages/opendesign/src/components/hooks/use-out-click.ts b/packages/opendesign/src/components/hooks/use-out-click.ts
index b2a8126e..6ddb2e86 100644
--- a/packages/opendesign/src/components/hooks/use-out-click.ts
+++ b/packages/opendesign/src/components/hooks/use-out-click.ts
@@ -1,11 +1,11 @@
 interface handlerItemT {
-  handler: () => void,
-  exception?: (e: MouseEvent) => boolean
+  handler: () => void;
+  exception?: (e: MouseEvent) => boolean;
 }
 
 const elList = new Map<HTMLElement, Array<handlerItemT>>();
 
-function addOutClickListener(el: HTMLElement, fn: () => void, exception?: (e: MouseEvent) => boolean) {
+function addListener(el: HTMLElement, fn: () => void, exception?: (e: MouseEvent) => boolean) {
   if (!elList.has(el)) {
     elList.set(el, []);
   }
@@ -14,18 +14,18 @@ function addOutClickListener(el: HTMLElement, fn: () => void, exception?: (e: Mo
   if (handlers) {
     handlers.push({
       handler: fn,
-      exception: exception
+      exception: exception,
     });
   }
 }
 
-function removeOutClickListener(el: HTMLElement, listener?: () => void) {
+function removeListener(el: HTMLElement, listener?: () => void) {
   if (listener) {
     const handlers = elList.get(el);
     if (!handlers) {
       return;
     }
-    const idx = handlers.findIndex(item => item.handler === listener);
+    const idx = handlers.findIndex((item) => item.handler === listener);
     if (idx > -1) {
       handlers.splice(idx, 1);
     }
@@ -38,7 +38,7 @@ export function useOutClick() {
   window.addEventListener('mousedown', (e) => {
     elList.forEach((handlers, el) => {
       if (!el.contains(e.target as HTMLElement)) {
-        handlers.forEach(item => {
+        handlers.forEach((item) => {
           if (!item.exception || !item.exception(e)) {
             item.handler();
           }
@@ -48,7 +48,7 @@ export function useOutClick() {
   });
 
   return {
-    addOutClickListener,
-    removeOutClickListener,
+    addListener,
+    removeListener,
   };
-}
\ No newline at end of file
+}
diff --git a/packages/opendesign/src/components/hooks/use-resize-observer.ts b/packages/opendesign/src/components/hooks/use-resize-observer.ts
index 70a5ec1b..8f023cbc 100644
--- a/packages/opendesign/src/components/hooks/use-resize-observer.ts
+++ b/packages/opendesign/src/components/hooks/use-resize-observer.ts
@@ -1,45 +1,43 @@
 // import ResizeObserver from 'resize-observer-polyfill';
 import { isFunction } from '../_shared/is';
 
-export type ResizeListenerT = (entry: ResizeObserverEntry, isFirst: boolean) => void;
 /**
- * 监听元素尺寸变化，
- * ele: 监听元素；
- * onResize: resize回调（entry: 尺寸变化元素，isFirst: 是否为初次监听时的回调);
+ * 监听池
+ * isFirst: 监听的第一次回调
  */
-export function useResizeObserver(
-  element?: HTMLElement,
-  onResize?: ResizeListenerT,
-) {
-  let el = element;
-  let cb = onResize;
-
-  /**
-   * 监听池
-   * isFirst: 监听的第一次回调
-   */
-  const observerPool = new Map<HTMLElement, {
-    element: HTMLElement,
-    isFirst: boolean, // 初次监听时会触发一次回调
-    callbacks: Array<(entry: ResizeObserverEntry, isFirst: boolean) => void>
-  } | null>();
+const observerPool = new WeakMap<
+  HTMLElement,
+  {
+    element: HTMLElement;
+    isFirst: boolean; // 初次监听时会触发一次回调
+    callbacks: Array<(entry: ResizeObserverEntry, isFirst: boolean) => void>;
+  } | null
+>();
 
-  // 创建监听实例
-  const instance = new ResizeObserver((entries: ResizeObserverEntry[]) => {
-    entries.forEach((entry) => {
-      const ele = entry.target as HTMLElement;
-      const ins = observerPool.get(ele);
-      if (!ins) {
-        return;
-      }
+// 创建监听实例
+const instance = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+  entries.forEach((entry) => {
+    const ele = entry.target as HTMLElement;
+    const ins = observerPool.get(ele);
+    if (!ins) {
+      return;
+    }
 
-      ins?.callbacks?.forEach(fn => fn(entry, ins.isFirst));
+    ins?.callbacks?.forEach((fn) => fn(entry, ins.isFirst));
 
-      if (ins.isFirst) {
-        ins.isFirst = false;
-      }
-    });
+    if (ins.isFirst) {
+      ins.isFirst = false;
+    }
   });
+});
+
+export type ResizeListenerT = (entry: ResizeObserverEntry, isFirst: boolean) => void;
+/**
+ * 监听元素尺寸变化，
+ * ele: 监听元素；
+ * onResize: resize回调（entry: 尺寸变化元素，isFirst: 是否为初次监听时的回调);
+ */
+export function useResizeObserver() {
 
   return {
     /**
@@ -52,25 +50,22 @@ export function useResizeObserver(
      * listener: resize回调, 移除监听时需要指定该监听函数
      * isFirst: 是否为初次监听时的回调
      */
-    addResizeListener: (ele?: HTMLElement, listener?: ResizeListenerT) => {
-      el = ele || element;
-      cb = listener || onResize;
-
-      if (!el || !cb || !isFunction(cb)) {
+    observe: (el?: HTMLElement, listener?: ResizeListenerT) => {
+      if (!el || !isFunction(listener)) {
         return null;
       }
 
       // 同一元素，只创建一次ResizeObserver，通过数组存储回调
       const val = observerPool.get(el);
       if (val) {
-        val.callbacks.push(cb);
+        val.callbacks.push(listener);
       } else {
         instance.observe(el);
 
         observerPool.set(el, {
           element: el,
-          callbacks: [cb],
-          isFirst: true
+          callbacks: [listener],
+          isFirst: true,
         });
       }
 
@@ -80,29 +75,23 @@ export function useResizeObserver(
      * 移除监听
      * listener: 要移除的监听函数，如果不传，则使用初始化时的onResize回调
      */
-    removeResizeListener: (ele?: HTMLElement, listener?: ResizeListenerT) => {
-
-      let fn = listener || cb;
-      el = ele || element;
-
-      if (!el || !fn) {
+    unobserve: (el?: HTMLElement, listener?: ResizeListenerT) => {
+      if (!el || !isFunction(listener)) {
         return;
       }
 
       const val = observerPool.get(el);
 
       if (val) {
-        const idx = val.callbacks.indexOf(fn);
+        const idx = val.callbacks.indexOf(listener);
         val.callbacks.splice(idx, 1);
+
+        // 当el无监听时，销毁resizeObserver
         if (val.callbacks.length === 0) {
-          // 当el无监听时，销毁resizeObserver
           instance.unobserve(el);
           observerPool.delete(el);
         }
-        if (observerPool.size === 0) {
-          instance.disconnect();
-        }
       }
-    }
+    },
   };
-};
\ No newline at end of file
+}
-- 
Gitee


From 124e054ad506c5885af235be9d20455eec310230 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Sat, 25 Mar 2023 11:55:34 +0800
Subject: [PATCH 06/14] =?UTF-8?q?popover=20porps=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/popover/OPopover.vue       |   4 +-
 .../src/components/popover/types.ts           |   5 +-
 .../src/components/popup/OPopup.vue           |  18 +--
 .../opendesign/src/components/popup/popup.ts  | 126 +++++++++---------
 .../opendesign/src/components/popup/types.ts  |   6 +-
 5 files changed, 83 insertions(+), 76 deletions(-)

diff --git a/packages/opendesign/src/components/popover/OPopover.vue b/packages/opendesign/src/components/popover/OPopover.vue
index 201b7e94..16ef118b 100644
--- a/packages/opendesign/src/components/popover/OPopover.vue
+++ b/packages/opendesign/src/components/popover/OPopover.vue
@@ -29,8 +29,8 @@ const targetElRef = ref<ComponentPublicInstance | null>(null);
     :trigger="props.trigger"
     :target="props.target || targetElRef"
     :wrapper="props.wrapper"
-    wrap-class="o-popover-wrap"
-    :anchor-class="props.anchor ? props.anchorClass : ''"
+    :wrap-class="props.wrapClass ?? 'o-popover-wrap'"
+    :anchor-class="props.anchor ? props.anchorClass ?? 'o-popover-anchor' : ''"
     :unmount-on-hide="props.unmountOnHide"
     @update:visible="updateVisible"
   >
diff --git a/packages/opendesign/src/components/popover/types.ts b/packages/opendesign/src/components/popover/types.ts
index a04d4b8a..73166c37 100644
--- a/packages/opendesign/src/components/popover/types.ts
+++ b/packages/opendesign/src/components/popover/types.ts
@@ -2,7 +2,7 @@ import { ExtractPropTypes } from 'vue';
 
 import { popupProps } from '../popup/types';
 
-const { position, trigger, target, visible, wrapper, unmountOnHide, anchorClass } = popupProps;
+const { position, trigger, target, visible, wrapper, unmountOnHide, anchorClass, wrapClass } = popupProps;
 
 export const popoverProps = {
   position,
@@ -12,6 +12,7 @@ export const popoverProps = {
   wrapper,
   unmountOnHide,
   anchorClass,
+  wrapClass,
   /**
    * 距离触发元素的偏移量
    */
@@ -28,4 +29,4 @@ export const popoverProps = {
   },
 };
 
-export type PopupPropsT = ExtractPropTypes<typeof popoverProps>;
\ No newline at end of file
+export type PopupPropsT = ExtractPropTypes<typeof popoverProps>;
diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index 3adb6234..82b50585 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -107,7 +107,7 @@ const bindTargetEvent = (el: HTMLElement | null) => {
   });
 
   if (props.hideWhenTargetInvisible) {
-    io?.addIntersectionListener(targetEl, onTargetInterscting);
+    io?.observe(targetEl, onTargetInterscting);
   }
 };
 
@@ -118,10 +118,10 @@ onUnmounted(() => {
   });
   // 销毁popup 的 resize监听
   if (wrapperEl.value) {
-    ro?.removeResizeListener(wrapperEl.value, onResize);
+    ro?.unobserve(wrapperEl.value, onResize);
   }
   if (targetEl) {
-    ro?.removeResizeListener(targetEl, onResize);
+    ro?.unobserve(targetEl, onResize);
   }
 });
 
@@ -219,7 +219,7 @@ const updateVisible = (isVisible?: boolean, delay?: number) => {
       toMount.value = true;
 
       if (props.hideWhenTargetInvisible && targetEl) {
-        io?.addIntersectionListener(targetEl, onTargetInterscting);
+        io?.observe(targetEl, onTargetInterscting);
       }
     }
   };
@@ -297,7 +297,7 @@ watch(popupRef, (popEl) => {
       });
 
       // 监听targetEL尺寸变化
-      ro?.addResizeListener(targetEl, (en: ResizeObserverEntry, isFirst: boolean) => {
+      ro?.observe(targetEl, (en: ResizeObserverEntry, isFirst: boolean) => {
         if (props.adjustMinWidth) {
           popStyle.minWidth = `${targetEl?.offsetWidth}px`;
         } else if (props.adjustWidth) {
@@ -309,7 +309,7 @@ watch(popupRef, (popEl) => {
 
     if (wrapperEl.value) {
       // 监听warpper尺寸变化
-      ro?.addResizeListener(wrapperEl.value, onResize);
+      ro?.observe(wrapperEl.value, onResize);
     }
   } else {
     /**
@@ -318,11 +318,11 @@ watch(popupRef, (popEl) => {
 
     handles.forEach((hl) => hl());
     if (wrapperEl.value) {
-      ro?.removeResizeListener(wrapperEl.value, onResize);
+      ro?.unobserve(wrapperEl.value, onResize);
     }
     if (targetEl) {
-      ro?.removeResizeListener(targetEl, onResize);
-      io?.removeIntersectionListener(targetEl, onTargetInterscting);
+      ro?.unobserve(targetEl, onResize);
+      io?.unobserve(targetEl, onTargetInterscting);
       isTargetInViewport.value = true;
     }
   }
diff --git a/packages/opendesign/src/components/popup/popup.ts b/packages/opendesign/src/components/popup/popup.ts
index 4f0190bc..268a52d5 100644
--- a/packages/opendesign/src/components/popup/popup.ts
+++ b/packages/opendesign/src/components/popup/popup.ts
@@ -6,24 +6,24 @@ import type { PopupPositionT, PopupTriggerT } from './types';
 import { useOutClick } from '../hooks/use-out-click';
 
 interface Pos {
-  left: number,
-  top: number
+  left: number;
+  top: number;
 }
 interface DomContentRect {
-  left: number,
-  right: number,
-  top: number,
-  bottom: number,
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
 }
 
 interface AnchorPosition {
-  left?: number,
-  top?: number,
-  right?: number,
-  bottom?: number
+  left?: number;
+  top?: number;
+  right?: number;
+  bottom?: number;
 }
 
-type ElementSize = ReturnType<typeof getElementSize>
+type ElementSize = ReturnType<typeof getElementSize>;
 
 // 获取wrapper content box范围，因为绝对定位需要排除border
 function getWrapperContentRect(wrapperEl: HTMLElement, wrapperRect?: DOMRect): DomContentRect {
@@ -33,7 +33,7 @@ function getWrapperContentRect(wrapperEl: HTMLElement, wrapperRect?: DOMRect): D
     left: rect.left + left,
     top: rect.top + top,
     right: rect.right - right,
-    bottom: rect.bottom - bottom
+    bottom: rect.bottom - bottom,
   };
 }
 
@@ -43,62 +43,62 @@ function getPopupViewOffset(
   t: DOMRect,
   p: DOMRect,
   {
-    offset = 0
+    offset = 0,
   }: {
-    offset?: number
-  } = {}): Pos {
+    offset?: number;
+  } = {}
+): Pos {
   const formula: {
-    [k in PopupPositionT]: { left: number, top: number }
+    [k in PopupPositionT]: { left: number; top: number };
   } = {
     top: {
       left: t.left + t.width / 2 - p.width / 2,
-      top: t.top - p.height - offset
+      top: t.top - p.height - offset,
     },
     tl: {
       left: t.left,
-      top: t.top - p.height - offset
+      top: t.top - p.height - offset,
     },
     tr: {
       left: t.right - p.width,
-      top: t.top - p.height - offset
+      top: t.top - p.height - offset,
     },
     bottom: {
       left: t.left + t.width / 2 - p.width / 2,
-      top: t.bottom + offset
+      top: t.bottom + offset,
     },
     bl: {
       left: t.left,
-      top: t.bottom + offset
+      top: t.bottom + offset,
     },
     br: {
       left: t.right - p.width,
-      top: t.bottom + offset
+      top: t.bottom + offset,
     },
     left: {
       left: t.left - p.width - offset,
-      top: t.top + t.height / 2 - p.height / 2
+      top: t.top + t.height / 2 - p.height / 2,
     },
     lt: {
       left: t.left - p.width - offset,
-      top: t.top
+      top: t.top,
     },
     lb: {
       left: t.left - p.width - offset,
-      top: t.bottom - p.height
+      top: t.bottom - p.height,
     },
     right: {
       left: t.right + offset,
-      top: t.top + t.height / 2 - p.height / 2
+      top: t.top + t.height / 2 - p.height / 2,
     },
     rt: {
       left: t.right + offset,
-      top: t.top
+      top: t.top,
     },
     rb: {
       left: t.right + offset,
-      top: t.bottom - p.height
-
-    }
+      top: t.bottom - p.height,
+    },
   };
   return formula[position] || { left: 0, top: 0 };
 }
@@ -109,7 +109,7 @@ function getWrapperViewEdge(popupSize: ElementSize, wrapperRect?: DomContentRect
     left: 0,
     right: window.innerWidth - popupSize.width,
     top: 0,
-    bottom: window.innerHeight - popupSize.height
+    bottom: window.innerHeight - popupSize.height,
   };
 
   if (!wrapperRect) {
@@ -131,7 +131,7 @@ function getPopupEdge(popupSize: ElementSize, targetRect: DOMRect, anchorOffset:
     left: left - width + anchorOffset,
     top: top - height + anchorOffset,
     right: right - anchorOffset,
-    bottom: bottom - anchorOffset
+    bottom: bottom - anchorOffset,
   };
 }
 
@@ -144,12 +144,12 @@ function getPopupWrapOffset(pos: Pos, wrapperEl: HTMLElement | null, wrapperCont
   if (wrapperContentRect) {
     return {
       left: pos.left + cs.scrollLeft - wrapperContentRect.left,
-      top: pos.top + cs.scrollTop - wrapperContentRect.top
+      top: pos.top + cs.scrollTop - wrapperContentRect.top,
     };
   }
   return {
     left: pos.left + cs.scrollLeft,
-    top: pos.top + cs.scrollTop
+    top: pos.top + cs.scrollTop,
   };
 }
 
@@ -217,7 +217,7 @@ function adjustPosition(position: PopupPositionT, direction: DirectionT) {
         return 'rb';
       }
       return p;
-    }
+    },
   };
 
   const fn = fixFn[direction];
@@ -234,10 +234,10 @@ function adjustOffset(
   wRect?: DomContentRect,
   {
     anchorOffset,
-    offset
+    offset,
   }: {
-    anchorOffset?: number,
-    offset?: number
+    anchorOffset?: number;
+    offset?: number;
   } = {}
 ) {
   const { top, left } = popupPosition;
@@ -298,7 +298,7 @@ function getAnchorOffset(position: PopupPositionT, tRect: DOMRect, popupStyle: P
 
   const { left: pl, top: pt } = popupStyle;
   if (['top', 'tl', 'tr', 'bottom', 'bl', 'br'].includes(position)) {
-    let l = tRect.left + (tRect.width / 2) - pl;
+    let l = tRect.left + tRect.width / 2 - pl;
 
     if (l > popupSize.width - limit) {
       l = popupSize.width - limit;
@@ -314,7 +314,7 @@ function getAnchorOffset(position: PopupPositionT, tRect: DOMRect, popupStyle: P
       pos.top = 0;
     }
   } else if (['left', 'lt', 'lb', 'right', 'rt', 'rb'].includes(position)) {
-    let t = tRect.top + (tRect.height / 2) - pt;
+    let t = tRect.top + tRect.height / 2 - pt;
 
     if (t > popupSize.height - limit) {
       t = popupSize.height - limit;
@@ -331,18 +331,24 @@ function getAnchorOffset(position: PopupPositionT, tRect: DOMRect, popupStyle: P
     }
   }
 
-
   return pos;
 }
 
 // 处理popup位置
-export function calcPopupStyle(popupEl: HTMLElement, targetEl: HTMLElement, position: PopupPositionT,
+export function calcPopupStyle(
+  popupEl: HTMLElement,
+  targetEl: HTMLElement,
+  position: PopupPositionT,
   {
-    adaptive = true, anchorOffset = 8, offset = 8
+    adaptive = true,
+    anchorOffset = 8,
+    offset = 8,
   }: {
-    adaptive?: boolean, anchorOffset?: number, offset?: number
-  } = {}) {
-
+    adaptive?: boolean;
+    anchorOffset?: number;
+    offset?: number;
+  } = {}
+) {
   const tRect = targetEl.getBoundingClientRect();
 
   const pRect = popupEl.getBoundingClientRect();
@@ -357,7 +363,7 @@ export function calcPopupStyle(popupEl: HTMLElement, targetEl: HTMLElement, posi
     return {
       popupStyle,
       position,
-      anchorStyle
+      anchorStyle,
     };
   }
   const wrapperRect = wrapperEl.getBoundingClientRect();
@@ -383,9 +389,9 @@ export function calcPopupStyle(popupEl: HTMLElement, targetEl: HTMLElement, posi
   return {
     position: fixedPosition,
     popupStyle,
-    anchorStyle
+    anchorStyle,
   };
-};
+}
 
 // 监听元素的触发事件
 export function bindTrigger(
@@ -394,16 +400,16 @@ export function bindTrigger(
   triggers: PopupTriggerT[],
   {
     updateFn,
-    hoverDelay = 100
+    hoverDelay = 100,
   }: {
-    updateFn: (isVisible?: boolean, delay?: number) => void,
-    hoverDelay?: number
+    updateFn: (isVisible?: boolean, delay?: number) => void;
+    hoverDelay?: number;
   }
 ) {
   if (!el) {
     return [];
   }
-  const { addOutClickListener, removeOutClickListener } = useOutClick();
+  const outClick = useOutClick();
 
   const listeners: Array<() => void> = [];
 
@@ -437,7 +443,7 @@ export function bindTrigger(
     click: () => {
       el?.addEventListener('click', toggleFn);
 
-      addOutClickListener(el, hideFn, (e: MouseEvent) => {
+      outClick.addListener(el, hideFn, (e: MouseEvent) => {
         return !!popupRef.value?.contains(e.target as HTMLElement);
       });
 
@@ -445,7 +451,7 @@ export function bindTrigger(
         el?.removeEventListener('click', toggleFn);
       });
       listeners.push(() => {
-        removeOutClickListener(el, hideFn);
+        outClick.removeListener(el, hideFn);
       });
     },
     focus: () => {
@@ -464,7 +470,7 @@ export function bindTrigger(
       };
       el?.addEventListener('contextmenu', fn);
 
-      addOutClickListener(el, hideFn, (e: MouseEvent) => {
+      outClick.addListener(el, hideFn, (e: MouseEvent) => {
         return !!popupRef.value?.contains(e.target as HTMLElement);
       });
 
@@ -473,10 +479,10 @@ export function bindTrigger(
       });
 
       listeners.push(() => {
-        removeOutClickListener(el, hideFn);
+        outClick.removeListener(el, hideFn);
       });
     },
-    none: () => { }
+    none: () => {},
   };
 
   triggers.forEach((tr: PopupTriggerT) => {
@@ -484,7 +490,7 @@ export function bindTrigger(
   });
 
   return listeners;
-};
+}
 
 export function getTransformOrigin(position: PopupPositionT) {
   let left = '0px';
@@ -505,4 +511,4 @@ export function getTransformOrigin(position: PopupPositionT) {
     top,
     left,
   };
-}
\ No newline at end of file
+}
diff --git a/packages/opendesign/src/components/popup/types.ts b/packages/opendesign/src/components/popup/types.ts
index 7b3552a6..63cf4470 100644
--- a/packages/opendesign/src/components/popup/types.ts
+++ b/packages/opendesign/src/components/popup/types.ts
@@ -67,7 +67,7 @@ export const popupProps = {
    */
   anchorClass: {
     type: String,
-    default: '',
+    default: undefined,
   },
   /**
    * 是否在popup隐藏时unmout
@@ -88,7 +88,7 @@ export const popupProps = {
    */
   wrapClass: {
     type: String,
-    default: '',
+    default: undefined,
   },
   /**
    * popup最小宽度设置为触发元素宽度
@@ -113,4 +113,4 @@ export const popupProps = {
   },
 };
 
-export type PopupPropsT = ExtractPropTypes<typeof popupProps>;
\ No newline at end of file
+export type PopupPropsT = ExtractPropTypes<typeof popupProps>;
-- 
Gitee


From ebdda7bb30dff612a8baa219bfe5e50a772d1317 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Sat, 25 Mar 2023 20:48:29 +0800
Subject: [PATCH 07/14] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/dialog/ODialog.vue         | 32 ++++++++++++-------
 .../src/components/dialog/style/index.scss    | 29 ++++++++---------
 .../src/components/dialog/style/var.scss      | 15 +++++++--
 .../opendesign/src/components/dialog/types.ts | 10 ++++--
 4 files changed, 54 insertions(+), 32 deletions(-)

diff --git a/packages/opendesign/src/components/dialog/ODialog.vue b/packages/opendesign/src/components/dialog/ODialog.vue
index 8f0bd25e..6d058c15 100644
--- a/packages/opendesign/src/components/dialog/ODialog.vue
+++ b/packages/opendesign/src/components/dialog/ODialog.vue
@@ -11,12 +11,20 @@ const emits = defineEmits<{
   (e: 'update:modelValue', val: boolean, evt: MouseEvent): void;
 }>();
 
+const isShow = ref(props.modelValue);
 const toMount = ref(false);
 const isMounted = computed(() => {
   return toMount.value || isShow.value || !props.unmountOnHide;
 });
 
-const isShow = ref(props.modelValue);
+const handleTransitionStart = () => {
+  toMount.value = true;
+};
+const handleTransitionEnd = () => {
+  if (!isShow.value && props.unmountOnHide) {
+    toMount.value = false;
+  }
+};
 watch(
   () => props.modelValue,
   (v: boolean) => {
@@ -41,17 +49,19 @@ const onMaskClick = (e: MouseEvent) => {
 </script>
 <template>
   <teleport :to="props.wrapper">
-    <div
-      class="o-dialog"
-      :class="{
-        'is-show': isShow,
-      }"
-    >
-      <transition name="o-fade-up-enter">
-        <div v-if="isMounted" class="o-dlg-mask" @click="onMaskClick"></div>
+    <div v-if="isMounted" class="o-dialog">
+      <transition name="o-fade-in">
+        <div v-if="isShow && props.mask" class="o-dlg-mask" @click="onMaskClick"></div>
       </transition>
-      <transition :name="props.transition">
-        <div v-if="isMounted" class="o-dlg-main" :class="props.wrapClass">
+      <transition
+        :appear="true"
+        :name="props.transition"
+        @before-enter="handleTransitionStart"
+        @after-enter="handleTransitionEnd"
+        @before-leave="handleTransitionStart"
+        @after-leave="handleTransitionEnd"
+      >
+        <div v-show="isShow" class="o-dlg-main" :class="props.wrapClass">
           <div class="o-dlg-btn-close" @click="onCloseClick"><IconClose /></div>
           <div v-if="$slots.header" class="o-dlg-head">
             <slot name="header"></slot>
diff --git a/packages/opendesign/src/components/dialog/style/index.scss b/packages/opendesign/src/components/dialog/style/index.scss
index 2dd43102..8274de6e 100644
--- a/packages/opendesign/src/components/dialog/style/index.scss
+++ b/packages/opendesign/src/components/dialog/style/index.scss
@@ -1,7 +1,7 @@
 @use './var.scss';
 
 .o-dialog {
-  position: fixed;
+  position: absolute;
   left: 0;
   right: 0;
   top: 0;
@@ -9,10 +9,7 @@
   align-items: center;
   justify-content: center;
   z-index: var(--dlg-z-index);
-  display: none;
-  &.is-show {
-    display: flex;
-  }
+  display: flex;
 }
 .o-dlg-mask {
   position: absolute;
@@ -20,40 +17,40 @@
   right: 0;
   top: 0;
   bottom: 0;
-  background-color: var(--o-color-mask1);
+  background-color: var(--dlg-mask);
 }
 .o-dlg-main {
   position: relative;
-  background-color: var(--o-color-control-light);
+  background-color: var(--dlg-bg-color);
   min-width: 200px;
-  box-shadow: var(--o-shadow-1);
+  box-shadow: var(--dlg-shadow);
+  border-radius: var(--dlg-radius);
+  min-width: var(--dlg-min-width);
 }
 
 .o-dlg-btn-close {
   position: absolute;
   right: var(--o-gap-3);
   top: var(--o-gap-3);
-  font-size: var(--o-icon_size-s);
+  font-size: var(--dlg-close-size);
   color: var(--dlg-close-color);
-  border-radius: var(--dlg-close-radius);
   display: flex;
+  transition: transform var(--o-easing-standard) var(--o-duration-m2);
   &:hover {
-    text-decoration: none;
     color: var(--dlg-close-color-hover);
-    background-color: var(--dlg-close-bg-color-hover);
   }
   &:active {
     color: var(--dlg-close-color-active);
-    background-color: var(--dlg-close-bg-color-active);
+    transform: scale(0.9);
   }
 }
 
 .o-dlg-head {
-  padding: 8px 16px;
+  padding: var(--dlg-head-padding);
 }
 .o-dlg-body {
-  padding: 8px 16px;
+  padding: var(--dlg-body-padding);
 }
 .o-dlg-foot {
-  padding: 8px 16px;
+  padding: var(--dlg-foot-padding);
 }
diff --git a/packages/opendesign/src/components/dialog/style/var.scss b/packages/opendesign/src/components/dialog/style/var.scss
index 664c3d71..1d0c641c 100644
--- a/packages/opendesign/src/components/dialog/style/var.scss
+++ b/packages/opendesign/src/components/dialog/style/var.scss
@@ -1,9 +1,18 @@
 .o-dialog {
+  --dlg-close-size: var(--o-icon_size-xs);
   --dlg-close-color: var(--o-color-info2);
   --dlg-close-color-hover: var(--o-color-primary2);
   --dlg-close-color-active: var(--o-color-primary3);
-  --dlg-close-bg-color-hover: var(--o-color-control1-light);
-  --dlg-close-bg-color-active: var(--o-color-control2-light);
-  --dlg-close-radius: 50%;
+
   --dlg-z-index: calc(var(--o-z-index-base) + 10);
+
+  --dlg-mask: var(--o-color-mask1);
+  --dlg-bg-color: var(--o-color-control-light);
+  --dlg-radius: var(--o-radius-l);
+  --dlg-shadow: var(--o-shadow-1);
+
+  --dlg-min-width: 320px;
+  --dlg-head-padding: 16px 24px;
+  --dlg-body-padding: 0 24px;
+  --dlg-foot-padding: 16px 24px;
 }
diff --git a/packages/opendesign/src/components/dialog/types.ts b/packages/opendesign/src/components/dialog/types.ts
index 487360b5..1228613c 100644
--- a/packages/opendesign/src/components/dialog/types.ts
+++ b/packages/opendesign/src/components/dialog/types.ts
@@ -21,7 +21,7 @@ export const dialogProps = {
     type: Boolean,
   },
   /**
-   * 是否在popup隐藏时unmout
+   * 是否在隐藏时unmout
    */
   unmountOnHide: {
     type: Boolean,
@@ -40,7 +40,13 @@ export const dialogProps = {
     type: String,
     default: 'o-zoom-fade',
   },
-
+  /**
+   * 是否需要mask
+   */
+  mask: {
+    type: Boolean,
+    default: true,
+  },
 };
 
 export type DialogPropsT = ExtractPropTypes<typeof dialogProps>;
-- 
Gitee


From 5b922ec98a6f2e5bfbde1d67b90e407ba6d01834 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Sat, 25 Mar 2023 20:48:57 +0800
Subject: [PATCH 08/14] =?UTF-8?q?=E5=A2=9E=E5=8A=A0loading=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E5=8C=85=E6=8B=AC=E6=8C=87=E4=BB=A4=E3=80=81?=
 =?UTF-8?q?hooks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/loading/OLoading.vue       | 86 +++++++++++++++++++
 .../loading/__demo__/IndexLoading.vue         | 10 +++
 .../loading/__demo__/LoadingBasic.vue         | 71 +++++++++++++++
 .../src/components/loading/index.ts           | 14 +++
 .../src/components/loading/style/index.scss   | 44 ++++++++++
 .../src/components/loading/style/index.ts     |  2 +
 .../src/components/loading/style/var.scss     |  9 ++
 .../src/components/loading/types.ts           | 46 ++++++++++
 .../src/components/loading/useLoading.ts      | 39 +++++++++
 .../src/components/loading/vLoading.ts        | 21 +++++
 10 files changed, 342 insertions(+)
 create mode 100644 packages/opendesign/src/components/loading/OLoading.vue
 create mode 100644 packages/opendesign/src/components/loading/__demo__/IndexLoading.vue
 create mode 100644 packages/opendesign/src/components/loading/__demo__/LoadingBasic.vue
 create mode 100644 packages/opendesign/src/components/loading/index.ts
 create mode 100644 packages/opendesign/src/components/loading/style/index.scss
 create mode 100644 packages/opendesign/src/components/loading/style/index.ts
 create mode 100644 packages/opendesign/src/components/loading/style/var.scss
 create mode 100644 packages/opendesign/src/components/loading/types.ts
 create mode 100644 packages/opendesign/src/components/loading/useLoading.ts
 create mode 100644 packages/opendesign/src/components/loading/vLoading.ts

diff --git a/packages/opendesign/src/components/loading/OLoading.vue b/packages/opendesign/src/components/loading/OLoading.vue
new file mode 100644
index 00000000..cd957eb9
--- /dev/null
+++ b/packages/opendesign/src/components/loading/OLoading.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { IconLoading } from '../_shared/icons';
+
+import { loadingProps } from './types';
+
+const props = defineProps(loadingProps);
+
+const emits = defineEmits<{
+  (e: 'change', val: boolean): void;
+  (e: 'update:show', val: boolean, evt?: MouseEvent): void;
+}>();
+const isShow = ref(props.show);
+const toMount = ref(false);
+const isMounted = computed(() => {
+  return toMount.value || isShow.value || !props.unmountOnHide;
+});
+const loadingLabel = 'loading...';
+
+const handleTransitionStart = () => {
+  toMount.value = true;
+};
+const handleTransitionEnd = () => {
+  if (!isShow.value && props.unmountOnHide) {
+    toMount.value = false;
+  }
+};
+
+const onMaskClick = (e: MouseEvent) => {
+  if (props.maskClose) {
+    isShow.value = false;
+    emits('change', false);
+    emits('update:show', false, e);
+  }
+};
+
+watch(
+  () => props.show,
+  (v) => {
+    if (v !== isShow.value) {
+      isShow.value = v;
+    }
+  }
+);
+
+const toggle = (show: boolean) => {
+  let to = show === undefined ? !isShow.value : show;
+  if (isShow.value !== to) {
+    isShow.value = to;
+    emits('change', false);
+    emits('update:show', false);
+  }
+};
+
+defineExpose({
+  toggle,
+});
+</script>
+<template>
+  <teleport :to="props.wrapper" :disabled="!props.wrapper">
+    <div v-if="isMounted" class="o-loading">
+      <transition name="o-fade-in" :appear="true">
+        <div v-show="isShow && props.mask" class="o-loading-mask" @click="onMaskClick"></div>
+      </transition>
+      <transition
+        :appear="true"
+        :name="props.transition"
+        @before-enter="handleTransitionStart"
+        @after-enter="handleTransitionEnd"
+        @before-leave="handleTransitionStart"
+        @after-leave="handleTransitionEnd"
+      >
+        <div v-show="isShow" class="o-loading-main">
+          <slot>
+            <div class="o-loading-icon">
+              <slot name="icon"><IconLoading class="o-rotating" /></slot>
+            </div>
+            <div class="o-loading-label">
+              <slot name="label">{{ loadingLabel }}</slot>
+            </div>
+          </slot>
+        </div>
+      </transition>
+    </div>
+  </teleport>
+</template>
diff --git a/packages/opendesign/src/components/loading/__demo__/IndexLoading.vue b/packages/opendesign/src/components/loading/__demo__/IndexLoading.vue
new file mode 100644
index 00000000..529d3004
--- /dev/null
+++ b/packages/opendesign/src/components/loading/__demo__/IndexLoading.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import '../style';
+import LoadingBasic from './LoadingBasic.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <LoadingBasic />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/loading/__demo__/LoadingBasic.vue b/packages/opendesign/src/components/loading/__demo__/LoadingBasic.vue
new file mode 100644
index 00000000..61e91e85
--- /dev/null
+++ b/packages/opendesign/src/components/loading/__demo__/LoadingBasic.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OLoading, vLoading, useLoading } from '../index';
+import { OButton } from '../../button';
+import '../../button/style';
+import { IconAdd } from '../../icons';
+
+const show1 = ref(false);
+const showLoading1 = () => {
+  show1.value = true;
+  setTimeout(() => {
+    show1.value = false;
+  }, 1000);
+};
+
+const show2 = ref(true);
+const show3 = ref(false);
+
+const box1 = ref();
+const l1 = useLoading();
+const l2 = useLoading(undefined, box1);
+const toggleLoading1 = () => {
+  l1.toggle();
+  setTimeout(() => {
+    l1.toggle();
+  }, 1000);
+};
+const toggleLoading2 = () => {
+  l2.toggle();
+};
+</script>
+<template>
+  <h4>全局</h4>
+  <OButton @click="showLoading1">show1:{{ show1 }}</OButton>
+  <OLoading v-model:show="show1" wrapper="body" />
+  <h4>局部</h4>
+  <OButton @click="show2 = !show2">show2:{{ show2 }}</OButton>
+  <section>
+    <div class="box">
+      show2
+      <OLoading v-model:show="show2" />
+    </div>
+    <div class="box">
+      show2
+      <OLoading v-model:show="show2">自定义<IconAdd class="o-rotating" /></OLoading>
+    </div>
+  </section>
+  <h4>指令</h4>
+  <OButton @click="show3 = !show3">show3:{{ show3 }}</OButton>
+  <section>
+    <div v-loading="show3" class="box">show3</div>
+    <div class="box">
+      show3
+      <OLoading v-model:show="show3">自定义<IconAdd class="o-rotating" /></OLoading>
+    </div>
+  </section>
+  <h4>服务</h4>
+  <OButton @click="toggleLoading1">service to body:{{ show3 }}</OButton>
+  <OButton @click="toggleLoading2">service to box:{{ show3 }}</OButton>
+  <section>
+    <div id="box1" ref="box1" class="box">show3</div>
+  </section>
+</template>
+<style lang="scss">
+.box {
+  width: 500px;
+  height: 300px;
+  background-color: #edf;
+  position: relative;
+}
+</style>
diff --git a/packages/opendesign/src/components/loading/index.ts b/packages/opendesign/src/components/loading/index.ts
new file mode 100644
index 00000000..ab5b0fd2
--- /dev/null
+++ b/packages/opendesign/src/components/loading/index.ts
@@ -0,0 +1,14 @@
+import type { App } from 'vue';
+import _OLoading from './OLoading.vue';
+import { vLoading } from './vLoading';
+import useLoading from './useLoading';
+
+const OLoading = Object.assign(_OLoading, {
+  vLoading,
+  useLoading,
+  install(app: App) {
+    app.component(_OLoading.name, _OLoading);
+  },
+});
+
+export { OLoading, vLoading, useLoading };
diff --git a/packages/opendesign/src/components/loading/style/index.scss b/packages/opendesign/src/components/loading/style/index.scss
new file mode 100644
index 00000000..d309bd25
--- /dev/null
+++ b/packages/opendesign/src/components/loading/style/index.scss
@@ -0,0 +1,44 @@
+@use './var.scss';
+
+.o-loading {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--loading-z-index);
+  display: flex;
+  body > & {
+    position: fixed;
+  }
+}
+
+.o-loading-mask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: var(--loading-mask);
+  z-index: 0;
+}
+.o-loading-main {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--loading-color);
+}
+.o-loading-icon {
+  font-size: var(--loading-icon-size);
+  + .o-loading-label {
+    margin-left: 4px;
+  }
+}
+.o-loading-label {
+  font-size: var(--loading-txt-size);
+  line-height: var(--loading-txt-height);
+}
diff --git a/packages/opendesign/src/components/loading/style/index.ts b/packages/opendesign/src/components/loading/style/index.ts
new file mode 100644
index 00000000..591b2fbd
--- /dev/null
+++ b/packages/opendesign/src/components/loading/style/index.ts
@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';
diff --git a/packages/opendesign/src/components/loading/style/var.scss b/packages/opendesign/src/components/loading/style/var.scss
new file mode 100644
index 00000000..65c83043
--- /dev/null
+++ b/packages/opendesign/src/components/loading/style/var.scss
@@ -0,0 +1,9 @@
+.o-loading {
+  --loading-color: var(--o-color-info1-inverse);
+  --loading-mask: var(--o-color-mask1);
+  --loading-icon-size: var(--o-icon_size-xs);
+  --loading-icon-color: var(--o-color-info2);
+  --loading-z-index: calc(var(--o-z-index-base) + 10);
+  --loading-txt-size: var(--o-font_size-text1);
+  --loading-txt-height: var(--o-line_height-text1);
+}
diff --git a/packages/opendesign/src/components/loading/types.ts b/packages/opendesign/src/components/loading/types.ts
new file mode 100644
index 00000000..1ac7dece
--- /dev/null
+++ b/packages/opendesign/src/components/loading/types.ts
@@ -0,0 +1,46 @@
+import { ExtractPropTypes, PropType } from 'vue';
+
+export const loadingProps = {
+  /**
+   * 是否显示
+   */
+  show: {
+    type: Boolean,
+  },
+  /**
+   * 是否在隐藏时unmout
+   */
+  unmountOnHide: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 过渡名称
+   */
+  transition: {
+    type: String,
+    default: 'o-zoom-fade',
+  },
+  /**
+   * 是否需要mask
+   */
+  mask: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 点击mask是否可关闭
+   */
+  maskClose: {
+    type: Boolean,
+  },
+  /**
+   * 挂载容器，默认为body
+   */
+  wrapper: {
+    type: [String, Object] as PropType<string | HTMLElement>,
+    default: undefined,
+  },
+};
+
+export type LoadingPropsT = ExtractPropTypes<typeof loadingProps>;
diff --git a/packages/opendesign/src/components/loading/useLoading.ts b/packages/opendesign/src/components/loading/useLoading.ts
new file mode 100644
index 00000000..6dc6cfb2
--- /dev/null
+++ b/packages/opendesign/src/components/loading/useLoading.ts
@@ -0,0 +1,39 @@
+import { createVNode, render, isRef, Ref, watch, ComponentInternalInstance } from 'vue';
+import OLoading from './OLoading.vue';
+import { LoadingPropsT } from './types';
+
+const initLoading = (opt?: LoadingPropsT, el?: HTMLElement) => {
+  const vnode = createVNode(OLoading, Object.assign(opt || {}, { wrapper: el }));
+  if (el) {
+    render(vnode, el);
+  }
+  return vnode.component;
+};
+
+const useLoading = (opt?: LoadingPropsT, wrap: Ref<HTMLElement> | HTMLElement | string = 'body') => {
+  let instance: ComponentInternalInstance | null = null;
+  if (typeof wrap === 'string') {
+    const el = document.querySelector(wrap);
+    if (el) {
+      instance = initLoading(opt, el as HTMLElement);
+    }
+  } else if ((wrap as HTMLElement).nodeType === 1) {
+    instance = initLoading(opt, wrap as HTMLElement);
+  } else if (isRef(wrap)) {
+    watch(
+      () => wrap.value,
+      (el) => {
+        instance = initLoading(opt, el);
+      }
+    );
+  }
+  return {
+    toggle() {
+      if (instance) {
+        instance.exposed?.toggle();
+      }
+    },
+  };
+};
+
+export default useLoading;
diff --git a/packages/opendesign/src/components/loading/vLoading.ts b/packages/opendesign/src/components/loading/vLoading.ts
new file mode 100644
index 00000000..79f32de2
--- /dev/null
+++ b/packages/opendesign/src/components/loading/vLoading.ts
@@ -0,0 +1,21 @@
+import { ObjectDirective, DirectiveBinding, createVNode, render } from 'vue';
+import OLoading from './OLoading.vue';
+
+const vLoading: ObjectDirective = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    const vnode = createVNode(OLoading, { show: binding.value });
+    render(vnode, el);
+    const vm = vnode.component;
+    (el as any).__loading_data = {
+      instance: vm,
+    };
+  },
+  updated(el: HTMLElement, binding: DirectiveBinding) {
+    const data = (el as any).__loading_data;
+    if (data) {
+      data.instance.exposed.toggle(binding.value);
+    }
+  },
+};
+
+export { vLoading };
-- 
Gitee


From f7955aed4b200bf8f277396ce449cf8cf8cf52ac Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Sat, 25 Mar 2023 20:49:12 +0800
Subject: [PATCH 09/14] fix

---
 .../src/components/checkbox/OCheckbox.vue     |  2 +-
 .../src/components/style/animation.scss       | 28 ++++++++-----------
 .../opendesign/src/components/tabs/types.ts   | 11 ++++----
 packages/portal/src/router.ts                 |  6 ++++
 4 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/packages/opendesign/src/components/checkbox/OCheckbox.vue b/packages/opendesign/src/components/checkbox/OCheckbox.vue
index f3d6eec6..27c1678b 100644
--- a/packages/opendesign/src/components/checkbox/OCheckbox.vue
+++ b/packages/opendesign/src/components/checkbox/OCheckbox.vue
@@ -98,7 +98,7 @@ defineExpose({
       <input type="checkbox" :value="props.value" :disabled="isDisabled" :checked="isChecked" @click="onClick" @change="onChange" />
       <slot name="checkbox" :checked="isChecked" :disabled="isDisabled">
         <span class="o-checkbox-input">
-          <Transition name="o-fade-in-enter">
+          <Transition name="o-fade-in">
             <IconMinus v-if="props.indeterminate" />
             <IconDone v-else-if="isChecked" />
           </Transition>
diff --git a/packages/opendesign/src/components/style/animation.scss b/packages/opendesign/src/components/style/animation.scss
index 619bff4d..0553eef0 100644
--- a/packages/opendesign/src/components/style/animation.scss
+++ b/packages/opendesign/src/components/style/animation.scss
@@ -24,10 +24,10 @@
 }
 
 .o-zoom-fade-enter-active {
-  animation: o-zoom-fade-in var(--o-duration-m1);
+  animation: o-zoom-fade-in var(--o-duration-m1) var(--o-easing-standard-in);
 }
 .o-zoom-fade-leave-active {
-  animation: o-zoom-fade-in var(--o-duration-s) reverse;
+  animation: o-zoom-fade-in var(--o-duration-s) var(--o-easing-standard-out) reverse;
 }
 
 @keyframes o-fade-in {
@@ -39,6 +39,13 @@
   }
 }
 
+.o-fade-in-enter-active {
+  animation: o-fade-in var(--o-duration-m1) var(--o-easing-standard-in);
+}
+.o-fade-in-leave-active {
+  animation: o-fade-in var(--o-duration-m1) var(--o-easing-standard-out) reverse;
+}
+
 @keyframes o-fade-up {
   0% {
     transform: translateY(10px);
@@ -50,22 +57,9 @@
   }
 }
 
-.o-fade-up-enter-enter-active {
-  animation: o-fade-up var(--o-duration-s) var(--o-easing-standard-out);
-}
-.o-fade-in-enter-enter-active {
-  animation: o-fade-in var(--o-duration-m1) var(--o-easing-standard-in);
-}
-
 .o-fade-up-enter-active {
-  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+  animation: o-fade-up var(--o-duration-m1) var(--o-easing-standard-in);
 }
 .o-fade-up-leave-active {
-  transition: all var(--o-duration-s) var(--o-easing-standard-out);
-}
-
-.o-fade-up-enter-from,
-.o-fade-up-leave-to {
-  opacity: 0;
-  transform: translateY(10px);
+  animation: o-fade-up var(--o-duration-s) var(--o-easing-standard-out) reverse;
 }
diff --git a/packages/opendesign/src/components/tabs/types.ts b/packages/opendesign/src/components/tabs/types.ts
index b3ddf43a..07f13cc4 100644
--- a/packages/opendesign/src/components/tabs/types.ts
+++ b/packages/opendesign/src/components/tabs/types.ts
@@ -7,14 +7,14 @@ export const tabsProps = {
    */
   modelValue: {
     type: [String, Number],
-    default: undefined
+    default: undefined,
   },
   /**
    * VariantT
    */
   variant: {
     type: String as PropType<'solid' | 'text'>,
-    default: 'text'
+    default: 'text',
   },
   /**
    * 是否激活时再加载
@@ -33,7 +33,7 @@ export const tabsProps = {
    */
   line: {
     type: Boolean,
-    default: true
+    default: true,
   },
   /**
    * 是否nav的横向排列布局，支持justify-content的所有值
@@ -45,7 +45,6 @@ export const tabsProps = {
 
 export type TabsPropsT = ExtractPropTypes<typeof tabsProps>;
 
-
 export const tabPaneProps = {
   /**
    * 页签项的key
@@ -66,7 +65,7 @@ export const tabPaneProps = {
    */
   transition: {
     type: String,
-    default: 'o-fade-in-enter',
+    default: 'o-fade-in',
   },
   /**
    * 是否禁用选中该页签
@@ -98,4 +97,4 @@ export const tabPaneProps = {
   },
 };
 
-export type TabPanePropsT = ExtractPropTypes<typeof tabPaneProps>;
\ No newline at end of file
+export type TabPanePropsT = ExtractPropTypes<typeof tabPaneProps>;
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 5c01f700..e358a0c5 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -188,6 +188,12 @@ export const routes = [
     label: '栅格 Grid',
     component: () => import('@components/grid/__demo__/IndexGrid.vue'),
   },
+  {
+    path: '/loading',
+    name: 'Loading',
+    label: '加载 Loading',
+    component: () => import('@components/loading/__demo__/IndexLoading.vue'),
+  },
   {
     path: '/resize-observer',
     name: 'ResizeObserver',
-- 
Gitee


From c4ce4e29c83a3dc4ce6fa7535ca9b3db49ae6acd Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 27 Mar 2023 00:18:35 +0800
Subject: [PATCH 10/14] =?UTF-8?q?slide=20=E5=A2=9E=E5=8A=A0=E6=8C=87?=
 =?UTF-8?q?=E7=A4=BA=E5=99=A8=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/_shared/export.ts          |   4 +-
 .../src/components/slides/OSlideItem.vue      |   9 +-
 .../src/components/slides/OSlides.vue         | 197 +++++-------------
 .../slides/__demo__/SlidesBasic.vue           |  69 +++++-
 .../src/components/slides/gallery.ts          | 159 ++++++++++++++
 .../src/components/slides/provide.ts          |   8 +-
 .../src/components/slides/style/index.scss    | 132 +++++-------
 .../src/components/slides/style/var.scss      |   1 +
 .../opendesign/src/components/slides/types.ts |  24 ++-
 9 files changed, 348 insertions(+), 255 deletions(-)
 create mode 100644 packages/opendesign/src/components/slides/gallery.ts

diff --git a/packages/opendesign/src/components/_shared/export.ts b/packages/opendesign/src/components/_shared/export.ts
index 71cb527f..66e8ca7a 100644
--- a/packages/opendesign/src/components/_shared/export.ts
+++ b/packages/opendesign/src/components/_shared/export.ts
@@ -1,3 +1,5 @@
 export { initSize, initShape, initRound } from './global';
 
-export * from './init-icons';
\ No newline at end of file
+export * from './init-icons';
+
+export * from './is';
diff --git a/packages/opendesign/src/components/slides/OSlideItem.vue b/packages/opendesign/src/components/slides/OSlideItem.vue
index d4a66295..71996672 100644
--- a/packages/opendesign/src/components/slides/OSlideItem.vue
+++ b/packages/opendesign/src/components/slides/OSlideItem.vue
@@ -1,6 +1,11 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { inject } from 'vue';
+import { slidesInjectKey } from './provide';
+
+const injection = inject(slidesInjectKey);
+</script>
 <template>
-  <div class="o-slide-item">
+  <div class="o-slide-item" :class="[injection ? `o-slide-${injection.type}` : '']">
     <slot></slot>
   </div>
 </template>
diff --git a/packages/opendesign/src/components/slides/OSlides.vue b/packages/opendesign/src/components/slides/OSlides.vue
index decc2596..7556faf3 100644
--- a/packages/opendesign/src/components/slides/OSlides.vue
+++ b/packages/opendesign/src/components/slides/OSlides.vue
@@ -1,13 +1,18 @@
 <script setup lang="ts">
-import { ref, watch, computed, onMounted, onUnmounted } from 'vue';
+import { ref, watch, computed, onMounted, onUnmounted, provide } from 'vue';
 import { IconChevronLeft, IconChevronRight } from '../icons';
 // import { getCssVariable } from '../_shared/dom';
+import GallerySlides, { GallerySlidesT } from './gallery';
+import { slidesInjectKey } from './provide';
 
 import { slidesProps } from './types';
 
 const props = defineProps(slidesProps);
 
-const emits = defineEmits<{ (e: 'change', now: number, last: number): void }>();
+const emits = defineEmits<{
+  (e: 'before-change', to: number, from: number): void;
+  (e: 'change', to: number, from: number): void;
+}>();
 
 const activeIndex = ref(props.activeIndex || 0);
 watch(
@@ -16,19 +21,7 @@ watch(
     activeIndex.value = v ?? 0;
   }
 );
-// enum CSS_VAR {
-//   GAP_X = '--slide-gap-x',
-// }
-const ClassNames = {
-  PREVIOUS: 'o-slide-item-last',
-  NEXT: 'o-slide-item-next',
-  ACTIVE: 'o-slide-item-active',
-  ANIMATING: 'o-slide-item-animating',
-  ACTIVE_IN: 'o-slide-item-in',
-  ACTIVE_IN_REVERSE: 'o-slide-item-in-reverse',
-  ACTIVE_OUT: 'o-slide-item-out',
-  ACTIVE_OUT_REVERSE: 'o-slide-item-out-reverse',
-};
+
 const initialized = ref(false);
 
 const slideWrapRef = ref<HTMLElement | null>(null);
@@ -38,12 +31,9 @@ const slideElList = computed(() => {
   const c = slideWrapRef.value?.children;
   return c ? Array.from(c).map((el) => el as HTMLElement) : null;
 });
-const total = computed(() => {
-  return slideWrapRef.value?.children.length;
-});
-let activeEl: Element | null = null;
+const total = computed(() => slideWrapRef.value?.children.length);
 
-const isAnimating = ref(false);
+let isChanging = false;
 
 const fixIndex = (idx: number) => {
   if (!total.value) {
@@ -53,127 +43,34 @@ const fixIndex = (idx: number) => {
   return i >= 0 ? i : i + total.value;
 };
 
-// Switch
-/**
- * @param index 激活的slide索引
- * @param animate 切换是否执行过度动画
- */
-const activeSwitchSlideByIndex = (index: number, animate = true, reverse = false) => {
-  if (!slideElList.value || !total.value) {
-    return;
-  }
-  let lastActiveIndex = activeIndex.value;
-
-  activeIndex.value = index;
-
-  let lastActiveEl = activeEl;
-  activeEl = slideElList.value[activeIndex.value];
-
-  lastActiveEl?.classList.remove(ClassNames.ACTIVE);
-  activeEl.classList.add(ClassNames.ACTIVE);
-  emits('change', activeIndex.value, lastActiveIndex);
-  if (animate) {
-    // 先移除所有过渡动画类
-    lastActiveEl?.classList.remove(
-      ClassNames.ACTIVE_IN,
-      ClassNames.ACTIVE_IN_REVERSE,
-      ClassNames.ACTIVE_OUT,
-      ClassNames.ACTIVE_OUT_REVERSE,
-      ClassNames.ANIMATING
-    );
-
-    activeEl?.classList.remove(ClassNames.ACTIVE_IN, ClassNames.ACTIVE_IN_REVERSE, ClassNames.ACTIVE_OUT, ClassNames.ACTIVE_OUT_REVERSE, ClassNames.ANIMATING);
-
-    if (!reverse) {
-      lastActiveEl?.classList.add(ClassNames.ACTIVE_OUT, ClassNames.ANIMATING);
-      activeEl?.classList.add(ClassNames.ACTIVE_IN, ClassNames.ANIMATING);
-    } else {
-      lastActiveEl?.classList.add(ClassNames.ACTIVE_OUT_REVERSE, ClassNames.ANIMATING);
-      activeEl?.classList.add(ClassNames.ACTIVE_IN_REVERSE, ClassNames.ANIMATING);
-    }
-  }
-};
-
-const ininSwitchSlides = () => {
-  if (!slideElList.value) {
-    return;
-  }
-  activeSwitchSlideByIndex(activeIndex.value, false);
-
-  // 监听过度动画
-  slideElList.value.forEach((el) => {
-    el.addEventListener('animationend', () => {
-      el?.classList.remove(ClassNames.ACTIVE_IN, ClassNames.ACTIVE_IN_REVERSE, ClassNames.ACTIVE_OUT, ClassNames.ACTIVE_OUT_REVERSE, ClassNames.ANIMATING);
-      if (el === activeEl) {
-        isAnimating.value = false;
-      }
-    });
-    el.addEventListener('animationstart', () => {
-      if (el === activeEl) {
-        isAnimating.value = true;
-      }
-    });
-  });
-};
-// Carousel
-const activeCarouselSlideByIndex = (index: number) => {
-  if (!slideElList.value || !total.value) {
-    return;
-  }
-  // let last = activeIndex.value;
-  // let next = fixIndex(index + 1);
-  // const lastEl = slideElList.value[last];
-  // const nextEl = slideElList.value[next];
-  const nowEl = slideElList.value[index];
-
-  activeIndex.value = index;
-
-  // lastEl.classList.add(ClassNames.PREVIOUS);
-  // nowEl.classList.add(ClassNames.ACTIVE);
-  // nextEl.classList.add(ClassNames.NEXT);
-
-  const d = nowEl.offsetLeft;
-  if (slideWrapRef.value) {
-    slideWrapRef.value.style.transform = `translate3d(-${d}px, 0, 0)`;
-  }
-};
-
-const ininCarouselSlides = () => {
-  if (!slideElList.value) {
+// gallery
+let slidesInstance: GallerySlidesT | null = null;
+const initSlides = () => {
+  if (!slideElList.value || !slideWrapRef.value) {
     return;
   }
-
-  slideElList.value.forEach((el, idx) => {
-    el.addEventListener('click', () => {
-      activeCarouselSlideByIndex(idx);
-    });
-  });
-
-  activeCarouselSlideByIndex(activeIndex.value);
-};
-
-const initSlides = () => {
   switch (props.type) {
-    case 'switch': {
-      ininSwitchSlides();
-      break;
-    }
-    case 'carousel': {
-      ininCarouselSlides();
+    case 'gallery': {
+      slidesInstance = new GallerySlides(slideElList.value, slideWrapRef.value, activeIndex.value);
+
       break;
     }
   }
   initialized.value = true;
 };
-const activeSlideByIndex = (index: number, animate = true, reverse = false) => {
-  const i = fixIndex(index);
+const activeSlideByIndex = (index: number) => {
+  const to = fixIndex(index);
+  const from = activeIndex.value;
+  emits('before-change', to, activeIndex.value);
+
   switch (props.type) {
-    case 'switch': {
-      activeSwitchSlideByIndex(i, animate, reverse);
-      break;
-    }
-    case 'carousel': {
-      activeCarouselSlideByIndex(i);
+    case 'gallery': {
+      // TODO 解决动画执行完的回调
+      (slidesInstance as GallerySlidesT)?.active(to).then((i) => {
+        // console.log('actived', i);
+        emits('change', to, from);
+      });
+      activeIndex.value = to;
       break;
     }
   }
@@ -193,18 +90,20 @@ const startPlay = () => {
   }, props.interval);
 };
 
-const changeActiveSlide = (index: number, animate = true, reverse = false) => {
-  if (isAnimating.value) {
+const changeActiveSlide = (index: number) => {
+  if (isChanging) {
     return;
   }
+  isChanging = true;
   // 停止自动播放
   stopPlay();
 
-  activeSlideByIndex(index, animate, reverse);
+  activeSlideByIndex(index);
   // 恢复自动播放
   if (props.autoPlay) {
     startPlay();
   }
+  isChanging = false;
 };
 
 watch(
@@ -218,10 +117,6 @@ watch(
   }
 );
 onMounted(() => {
-  // if (slidesRef.value) {
-  //   console.log(getCssVariable('--gap-x', slidesRef.value));
-  // }
-
   initSlides();
   if (props.autoPlay) {
     startPlay();
@@ -233,17 +128,26 @@ onUnmounted(() => {
     timer = null;
   }
 });
+provide(slidesInjectKey, {
+  type: props.type,
+});
 </script>
 <template>
   <div
     ref="slidesRef"
     class="o-slides"
-    :class="{
-      'o-slides-visible': initialized,
+    :class="[
+      {
+        'o-slides-visible': initialized,
+      },
+      `o-slides-type-${props.type}`,
+    ]"
+    :style="{
+      '--slides-interval': props.interval + 'ms',
     }"
   >
     <div class="o-slides-wrap">
-      <div ref="slideWrapRef" class="o-slide-container" :class="[`o-slides-type-${props.type}`]">
+      <div ref="slideWrapRef" class="o-slide-container" :class="[`o-slide-container-${props.type}`]">
         <slot></slot>
       </div>
     </div>
@@ -251,16 +155,17 @@ onUnmounted(() => {
       <div v-for="(item, idx) in total" :key="item" class="o-slides-indicator-item" @click="changeActiveSlide(idx)">
         <slot name="indicator" :active="item - 1 === activeIndex">
           <div
-            class="o-slides-indicator-dot"
+            class="o-slides-indicator-bar"
             :class="{
-              'o-slides-indicator-dot-active': item - 1 === activeIndex,
+              'o-slides-indicator-bar-active': item - 1 === activeIndex,
+              'is-autoplay': props.autoPlay,
             }"
           ></div>
         </slot>
       </div>
     </div>
     <div v-if="props.arrow" class="o-slides-arrow-wrap" :class="props.arrowWrapClass">
-      <div @click="changeActiveSlide(activeIndex - 1, true, true)">
+      <div @click="changeActiveSlide(activeIndex - 1)">
         <slot name="arrow-prev">
           <div class="o-slides-arrow-prev">
             <div class="o-slides-arrow-icon">
@@ -271,7 +176,7 @@ onUnmounted(() => {
           </div>
         </slot>
       </div>
-      <div @click="changeActiveSlide(activeIndex + 1, true, false)">
+      <div @click="changeActiveSlide(activeIndex + 1)">
         <slot name="arrow-next">
           <div class="o-slides-arrow-next">
             <div class="o-slides-arrow-icon">
diff --git a/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue b/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue
index f089c0d2..8ecdc2c3 100644
--- a/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue
+++ b/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue
@@ -14,36 +14,87 @@ const onChange = (now: number, last: number) => {
 </script>
 <template>
   <h4>基本</h4>
-  <section>
+  <div class="block">
+    <div class="center"></div>
+    <OSlides loop class="gallery-slides" :auto-play="false" :active-index="0" @change="onChange">
+      <OSlideItem v-for="s in 6" :key="s" class="gallery-slide">
+        <div class="slide">{{ s - 1 }}</div>
+        <div class="center red"></div>
+      </OSlideItem>
+    </OSlides>
+  </div>
+  <div class="block" style="overflow: hidden">
     <OSlides class="slides" auto-play @change="onChange">
-      <OSlideItem v-for="s in slides" :key="s">
+      <OSlideItem v-for="s in slides" :key="s" class="slide-item2">
         <OFigure class="img" :src="s" />
       </OSlideItem>
     </OSlides>
-  </section>
-  <section style="overflow: hidden">
-    <OSlides class="slides2" type="carousel" :auto-play="false" style="--slide-gap-x: 16px" @change="onChange">
+  </div>
+  <div class="block" style="overflow: hidden">
+    <OSlides loop class="slides2" :auto-play="true" style="--slide-gap-x: 16px" :active-index="1" @change="onChange">
       <OSlideItem v-for="s in slides" :key="s" class="slide-item2">
         <OFigure class="img" :src="s" />
       </OSlideItem>
     </OSlides>
-  </section>
+  </div>
 </template>
 <style lang="scss">
+.block {
+  position: relative;
+}
+.center {
+  position: absolute;
+  border: 1px solid blue;
+  height: 100%;
+  left: 50%;
+  top: 0;
+  z-index: 10;
+  // margin-left: -1px;
+  &.red {
+    border-color: red;
+  }
+}
 .slides {
-  height: 300px;
-  width: 100%;
+  height: 200px;
+  width: 80%;
+  margin: auto;
 }
 .slides2 {
   width: 50%;
   margin: auto;
   height: 200px;
-  overflow: visible;
+  overflow: hidden;
   // background-color: red;
 }
+.slide-item2 {
+  width: 100%;
+  height: 100%;
+  padding: 0 8px;
+}
 .img {
   border-radius: 16px;
+  overflow: hidden;
   height: 100%;
   width: 100%;
 }
+
+.gallery-slides {
+  height: 100px;
+  background-color: #eee;
+}
+.gallery-slide {
+  width: 500px;
+  height: 100px;
+}
+
+.slide {
+  height: 100%;
+  border: 2px solid red;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 48px;
+  margin: 0 16px;
+  background-color: #333;
+}
 </style>
diff --git a/packages/opendesign/src/components/slides/gallery.ts b/packages/opendesign/src/components/slides/gallery.ts
new file mode 100644
index 00000000..6f61bed1
--- /dev/null
+++ b/packages/opendesign/src/components/slides/gallery.ts
@@ -0,0 +1,159 @@
+interface SlideItemT {
+  el: HTMLElement;
+  width: number;
+  left: number;
+}
+interface ContainerT {
+  el: HTMLElement;
+  width: number;
+}
+type AlignT = 'center' | 'left';
+
+export interface GallerySlidesT {
+  active: (slideIndex: number) => Promise<null | number>;
+  loopRange: () => void;
+  transformX: (value: number, animate: boolean) => Promise<null | number>;
+}
+export interface GallerySlidesOptionT {
+  alignType: 'center' | 'left';
+  onChange?: () => void;
+}
+
+// let res;
+export default class GallerySlides {
+  container: ContainerT;
+  slideList: SlideItemT[];
+  total: number;
+  alignType: AlignT;
+  moveValue: number;
+  currentIndex: number;
+  isChanging: boolean;
+  waitAnimation: (() => void) | null;
+  constructor(slideElList: HTMLElement[], slideContainer: HTMLElement, activeIndex: number, options?: GallerySlidesOptionT) {
+    const { alignType = 'center' } = options || {};
+    this.total = slideElList.length;
+    this.waitAnimation = null;
+
+    slideContainer.addEventListener('transitionend', () => {
+      slideContainer.style.willChange = '';
+      slideContainer.classList.remove('is-animating');
+      console.log('end');
+
+      this.loopRange();
+      this.isChanging = false;
+
+      // if (res) {
+      //   res();
+      //   res = null;
+      // }
+    });
+    slideContainer.addEventListener('transitionstart', () => {
+      slideContainer.style.willChange = 'transform';
+    });
+
+    let s = 0;
+    this.slideList = slideElList.map((el, idx) => {
+      el.addEventListener('click', () => {
+        this.active(idx);
+      });
+
+      const w = el.clientWidth;
+      const l = s;
+      el.style.left = `${l}px`;
+
+      s += w;
+      return {
+        el,
+        width: el.clientWidth,
+        left: l,
+      };
+    });
+
+    this.container = {
+      el: slideContainer,
+      width: slideContainer.clientWidth,
+    };
+
+    this.alignType = alignType;
+    this.moveValue = 0;
+    this.currentIndex = -1;
+    this.isChanging = false;
+
+    this.active(activeIndex, false);
+    this.loopRange();
+  }
+  active(slideIndex: number, animate = true): Promise<null | number> {
+    if (this.total === 0 || this.isChanging || this.currentIndex === slideIndex) {
+      return Promise.resolve(null);
+    }
+    this.isChanging = animate;
+    this.currentIndex = slideIndex;
+    const slide = this.slideList[slideIndex];
+    if (!slide) {
+      return Promise.resolve(null);
+    }
+    const { width: cw } = this.container;
+    const { width: sw, left: sl } = slide;
+    if (this.alignType === 'center') {
+      return this.transformX((cw - sw) / 2 - sl, animate);
+    }
+    return Promise.resolve(slideIndex);
+  }
+  loopRange() {
+    const cidx = this.currentIndex;
+    const half = (this.total - 1) / 2;
+
+    const orderSlideList = [];
+    const tm = [];
+    for (let i = cidx; i <= cidx + Math.ceil(half); i++) {
+      if (i < this.total) {
+        orderSlideList.push(this.slideList[i]);
+        tm.push(i);
+      } else {
+        orderSlideList.push(this.slideList[i - this.total]);
+        tm.push(i - this.total);
+      }
+    }
+    for (let i = cidx - 1; i >= cidx - Math.floor(half); i--) {
+      if (i >= 0) {
+        orderSlideList.unshift(this.slideList[i]);
+        tm.unshift(i);
+      } else {
+        orderSlideList.unshift(this.slideList[this.total + i]);
+        tm.unshift(this.total + i);
+      }
+    }
+    let s = 0;
+    const { left: oldLeft } = this.slideList[cidx];
+
+    orderSlideList.forEach((item) => {
+      const { el, width } = item;
+
+      el.style.left = `${s}px`;
+      item.left = s;
+      s += width;
+    });
+
+    const { left: newLeft } = this.slideList[cidx];
+    const d = newLeft - oldLeft;
+
+    this.transformX(this.moveValue - d, false);
+  }
+  transformX(value: number, animate: boolean = true): Promise<null | number> {
+    return new Promise((resolve) => {
+      this.moveValue = value;
+
+      const { el } = this.container;
+
+      if (animate === true) {
+        el.classList.add('is-animating');
+      }
+
+      el.style.transform = `translate3d(${value}px,0,0)`;
+      // res = resolve;
+      setTimeout(() => {
+        resolve(null);
+      }, 500);
+    });
+  }
+}
diff --git a/packages/opendesign/src/components/slides/provide.ts b/packages/opendesign/src/components/slides/provide.ts
index e70f164f..8448b55c 100644
--- a/packages/opendesign/src/components/slides/provide.ts
+++ b/packages/opendesign/src/components/slides/provide.ts
@@ -1,10 +1,6 @@
 import { InjectionKey, Ref } from 'vue';
 
-
 export const slidesInjectKey: InjectionKey<{
-  currentIndex: Ref<number>
-  // Ref: Ref<HTMLElement | null>,
-  // updateValue: (value: string | number, navEl: HTMLElement | null) => void,
-  // onDeletePane: (value: string | number, evt: MouseEvent) => void,
+  currentIndex?: Ref<number>;
+  type: 'carousel' | 'switch' | 'gallery';
 }> = Symbol('provide-slides');
-
diff --git a/packages/opendesign/src/components/slides/style/index.scss b/packages/opendesign/src/components/slides/style/index.scss
index 04ddbb07..baeec9c7 100644
--- a/packages/opendesign/src/components/slides/style/index.scss
+++ b/packages/opendesign/src/components/slides/style/index.scss
@@ -3,7 +3,6 @@
 .o-slides {
   position: relative;
   visibility: hidden;
-  overflow: hidden;
 }
 .o-slides-visible {
   visibility: visible;
@@ -60,105 +59,74 @@
   left: 50%;
   transform: translate3d(-50%, 0, 0);
 }
-.o-slides-indicator-dot {
+.o-slides-indicator-bar {
   width: 48px;
-  height: 3px;
-  background-color: var(--slides-indicator-bg-color);
+  height: 12px;
   margin: 4px;
-  border-radius: 3px;
-  opacity: 0.3;
   cursor: pointer;
-}
-.o-slides-indicator-dot-active {
-  opacity: 1;
-  background-color: var(--slides-indicator-bg-color-active);
-}
-
-// slide
-.o-slides-type-switch {
+  position: relative;
+  border-radius: 20px;
   overflow: hidden;
-  .o-slide-item {
+  &::before {
+    content: '';
     position: absolute;
     left: 0;
-    right: 0;
+    top: 50%;
     width: 100%;
-    height: 100%;
-    overflow: hidden;
-    z-index: 1;
-    opacity: 0;
-  }
-  .o-slide-item-animating {
-    opacity: 1;
-  }
-  .o-slide-item-active {
-    z-index: 5;
-    opacity: 1;
-  }
-}
-
-.o-slide-item-in {
-  z-index: 5;
-  opacity: 1;
-  animation: slides-slide-x-in var(--o-duration-l) var(--o-easing-standard-in);
-}
-.o-slide-item-out {
-  z-index: 3;
-  animation: slides-slide-x-out var(--o-duration-l) var(--o-easing-standard-in);
-}
-.o-slide-item-in-reverse {
-  z-index: 5;
-  animation: slides-slide-x-in-reverse var(--o-duration-l) var(--o-easing-standard-in);
-}
-.o-slide-item-out-reverse {
-  z-index: 3;
-  animation: slides-slide-x-out-reverse var(--o-duration-l) var(--o-easing-standard-in);
-}
-
-@keyframes slides-slide-x-in {
-  0% {
-    transform: translate3d(100%, 0, 0);
-  }
-  100% {
-    transform: translate3d(0, 0, 0);
+    height: var(--slides-indicator-height);
+    background-color: var(--slides-indicator-bg-color);
+    transform: translateY(-50%);
+    opacity: 0.3;
+    transition: opacity var(--o-duration-m2) var(--o-easing-standard);
   }
-}
-@keyframes slides-slide-x-in-reverse {
-  0% {
-    transform: translate3d(-100%, 0, 0);
+  &:hover {
+    &::before {
+      opacity: 0.6;
+    }
   }
-  100% {
-    transform: translate3d(0, 0, 0);
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 100%;
+    height: var(--slides-indicator-height);
+    background-color: var(--slides-indicator-bg-color);
+    transform: translateY(-50%) scaleX(0);
   }
 }
-@keyframes slides-slide-x-out {
-  0% {
-    transform: translate3d(0, 0, 0);
+@keyframes grow {
+  from {
+    transform: translateY(-50%) scaleX(0);
   }
-  100% {
-    transform: translate3d(-100%, 0, 0);
+  to {
+    transform: translateY(-50%) scaleX(1);
   }
 }
-@keyframes slides-slide-x-out-reverse {
-  0% {
-    transform: translate3d(0, 0, 0);
+.o-slides-indicator-bar-active {
+  &::after {
+    transform: translateY(-50%) scaleX(1);
+    transform-origin: left center;
   }
-  100% {
-    transform: translate3d(100%, 0, 0);
+  &.is-autoplay::after {
+    animation: grow var(--slides-interval, '5000ms') var(--o-easing-linear);
   }
 }
 
-.o-slides-type-carousel {
-  transition: transform var(--o-duration-l) var(--o-easing-emphasized);
-  display: flex;
-  width: 100%;
+// gallery
+
+.o-slide-container-gallery {
   height: 100%;
-  .o-slide-item {
-    flex-shrink: 0;
-    flex-grow: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    z-index: 1;
-    margin-right: var(--slide-gap-x);
+  position: absolute;
+  width: 100%;
+  display: flex;
+  flex-wrap: nowrap;
+  &.is-animating {
+    transition: transform var(--o-duration-l) var(--o-easing-emphasized);
   }
 }
+.o-slide-gallery {
+  position: absolute;
+  left: 0;
+  flex-shrink: 0;
+}
diff --git a/packages/opendesign/src/components/slides/style/var.scss b/packages/opendesign/src/components/slides/style/var.scss
index 7fd24bab..23849a21 100644
--- a/packages/opendesign/src/components/slides/style/var.scss
+++ b/packages/opendesign/src/components/slides/style/var.scss
@@ -10,6 +10,7 @@
   --slides-arrow-bg-color: rgba(var(--o-gray-1), 0.3);
   --slides-arrow-bg-color-hover: rgba(var(--o-gray-1), 0.3);
   // indicator
+  --slides-indicator-height: 3px;
   --slides-indicator-opacity: 0.3;
   --slides-indicator-opacity-active: 1;
   --slides-indicator-bg-color: var(--o-color-control-light);
diff --git a/packages/opendesign/src/components/slides/types.ts b/packages/opendesign/src/components/slides/types.ts
index 9b3a1691..6cf96d34 100644
--- a/packages/opendesign/src/components/slides/types.ts
+++ b/packages/opendesign/src/components/slides/types.ts
@@ -11,48 +11,54 @@ export const slidesProps = {
    * 样式类型
    */
   type: {
-    type: String as PropType<'carousel'|'switch'>,
-    default: 'switch'
+    type: String as PropType<'gallery'>,
+    default: 'gallery',
   },
   /**
    * 自动播放
    */
   autoPlay: {
-    type: Boolean
+    type: Boolean,
   },
   /**
    * 自动播放间隔
    */
   interval: {
     type: Number,
-    default: 5000
+    default: 5000,
   },
   /**
    * 是否显示切换箭头
    */
   arrow: {
     type: Boolean,
-    default: true
+    default: true,
   },
   /**
    * 设置切换箭头容器类
    */
   arrowWrapClass: {
-    type: String
+    type: String,
   },
   /**
    * 是否显示指示器
    */
   indicator: {
     type: Boolean,
-    default: true
+    default: true,
   },
   /**
    * 设置指示器容器类
    */
   indicatorWrapClass: {
-    type: String
-  }
+    type: String,
+  },
+  /**
+   * 是否无限切换，使用下一张补位
+   */
+  loop: {
+    type: Boolean,
+  },
 };
 
 export type SlidesPropsT = ExtractPropTypes<typeof slidesProps>;
-- 
Gitee


From 6807f4d7fda060bf7ff65f5fc1015da58f55a6f9 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 27 Mar 2023 09:55:41 +0800
Subject: [PATCH 11/14] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dssr=E6=97=B6=EF=BC=8C?=
 =?UTF-8?q?=E7=9B=B4=E6=8E=A5=E5=88=9D=E5=A7=8B=E5=8C=96=E6=8A=A5=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hooks/use-intersection-observer.ts        | 38 +++++++++++----
 .../components/hooks/use-resize-observer.ts   | 46 +++++++++++++------
 2 files changed, 59 insertions(+), 25 deletions(-)

diff --git a/packages/opendesign/src/components/hooks/use-intersection-observer.ts b/packages/opendesign/src/components/hooks/use-intersection-observer.ts
index 5fd167b1..07d93669 100644
--- a/packages/opendesign/src/components/hooks/use-intersection-observer.ts
+++ b/packages/opendesign/src/components/hooks/use-intersection-observer.ts
@@ -15,19 +15,26 @@ const observerPool = new WeakMap<
   } | null
 >();
 
+// 记录监听数量
+let record = 0;
+
 // 创建监听实例
-const instance = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
-  entries.forEach((entry) => {
-    const ele = entry.target as HTMLElement;
-    const ins = observerPool.get(ele);
+let instance: ResizeObserver | null = null;
+
+function createObserver() {
+  return new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
+    entries.forEach((entry) => {
+      const ele = entry.target as HTMLElement;
+      const ins = observerPool.get(ele);
 
-    if (!ins) {
-      return;
-    }
+      if (!ins) {
+        return;
+      }
 
-    ins?.callbacks?.forEach((fn) => fn(entry));
+      ins?.callbacks?.forEach((fn) => fn(entry));
+    });
   });
-});
+}
 
 /**
  * 监听元素尺寸变化，
@@ -56,7 +63,11 @@ export function useIntersectionObserver() {
       if (val) {
         val.callbacks.push(listener);
       } else {
+        if (!instance) {
+          instance = createObserver();
+        }
         instance.observe(el);
+        record++;
 
         observerPool.set(el, {
           element: el,
@@ -71,7 +82,7 @@ export function useIntersectionObserver() {
      * listener: 要移除的监听函数，如果不传，则使用初始化时的回调
      */
     unobserve: (el?: HTMLElement, listener?: IntersectionListenerT) => {
-      if (!el || !isFunction(listener)) {
+      if (!el || !isFunction(listener) || !instance) {
         return;
       }
 
@@ -84,6 +95,13 @@ export function useIntersectionObserver() {
           // 当el无监听时，销毁resizeObserver
           instance.unobserve(el);
           observerPool.delete(el);
+
+          // 无监听元素，就断开
+          record--;
+          if (record === 0) {
+            instance.disconnect();
+            instance = null;
+          }
         }
       }
     },
diff --git a/packages/opendesign/src/components/hooks/use-resize-observer.ts b/packages/opendesign/src/components/hooks/use-resize-observer.ts
index 8f023cbc..c6c536cc 100644
--- a/packages/opendesign/src/components/hooks/use-resize-observer.ts
+++ b/packages/opendesign/src/components/hooks/use-resize-observer.ts
@@ -14,23 +14,29 @@ const observerPool = new WeakMap<
   } | null
 >();
 
+// 记录监听数量
+let record = 0;
+
 // 创建监听实例
-const instance = new ResizeObserver((entries: ResizeObserverEntry[]) => {
-  entries.forEach((entry) => {
-    const ele = entry.target as HTMLElement;
-    const ins = observerPool.get(ele);
-    if (!ins) {
-      return;
-    }
+let instance: ResizeObserver | null = null;
+
+function createObserver() {
+  return new ResizeObserver((entries: ResizeObserverEntry[]) => {
+    entries.forEach((entry) => {
+      const ele = entry.target as HTMLElement;
+      const ins = observerPool.get(ele);
+      if (!ins) {
+        return;
+      }
 
-    ins?.callbacks?.forEach((fn) => fn(entry, ins.isFirst));
+      ins?.callbacks?.forEach((fn) => fn(entry, ins.isFirst));
 
-    if (ins.isFirst) {
-      ins.isFirst = false;
-    }
+      if (ins.isFirst) {
+        ins.isFirst = false;
+      }
+    });
   });
-});
-
+}
 export type ResizeListenerT = (entry: ResizeObserverEntry, isFirst: boolean) => void;
 /**
  * 监听元素尺寸变化，
@@ -38,7 +44,6 @@ export type ResizeListenerT = (entry: ResizeObserverEntry, isFirst: boolean) =>
  * onResize: resize回调（entry: 尺寸变化元素，isFirst: 是否为初次监听时的回调);
  */
 export function useResizeObserver() {
-
   return {
     /**
      * 监听实例
@@ -60,7 +65,11 @@ export function useResizeObserver() {
       if (val) {
         val.callbacks.push(listener);
       } else {
+        if (!instance) {
+          instance = createObserver();
+        }
         instance.observe(el);
+        record++;
 
         observerPool.set(el, {
           element: el,
@@ -76,7 +85,7 @@ export function useResizeObserver() {
      * listener: 要移除的监听函数，如果不传，则使用初始化时的onResize回调
      */
     unobserve: (el?: HTMLElement, listener?: ResizeListenerT) => {
-      if (!el || !isFunction(listener)) {
+      if (!el || !isFunction(listener) || !instance) {
         return;
       }
 
@@ -90,6 +99,13 @@ export function useResizeObserver() {
         if (val.callbacks.length === 0) {
           instance.unobserve(el);
           observerPool.delete(el);
+
+          // 无监听元素，就断开
+          record--;
+          if (record === 0) {
+            instance.disconnect();
+            instance = null;
+          }
         }
       }
     },
-- 
Gitee


From 122daa1e3d73eab8aa2d977481384aed70d2489f Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 27 Mar 2023 11:45:55 +0800
Subject: [PATCH 12/14] =?UTF-8?q?fix=20slide=E5=88=87=E6=8D=A2=E6=97=B6?=
 =?UTF-8?q?=E6=9C=AA=E5=81=9C=E6=AD=A2=E8=87=AA=E5=8A=A8=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/package.json              |  2 +-
 .../src/components/slides/OSlides.vue         | 42 +++++++++++--------
 .../src/components/slides/gallery.ts          |  6 +--
 3 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json
index 729c7ef4..96b2b10c 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opensig/opendesign",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "main": "lib/index.js",
   "module": "es/index.mjs",
   "types": "es/index.d.ts",
diff --git a/packages/opendesign/src/components/slides/OSlides.vue b/packages/opendesign/src/components/slides/OSlides.vue
index 7556faf3..6aa347f1 100644
--- a/packages/opendesign/src/components/slides/OSlides.vue
+++ b/packages/opendesign/src/components/slides/OSlides.vue
@@ -45,19 +45,7 @@ const fixIndex = (idx: number) => {
 
 // gallery
 let slidesInstance: GallerySlidesT | null = null;
-const initSlides = () => {
-  if (!slideElList.value || !slideWrapRef.value) {
-    return;
-  }
-  switch (props.type) {
-    case 'gallery': {
-      slidesInstance = new GallerySlides(slideElList.value, slideWrapRef.value, activeIndex.value);
 
-      break;
-    }
-  }
-  initialized.value = true;
-};
 const activeSlideByIndex = (index: number) => {
   const to = fixIndex(index);
   const from = activeIndex.value;
@@ -90,15 +78,16 @@ const startPlay = () => {
   }, props.interval);
 };
 
-const changeActiveSlide = (index: number) => {
+// 激活slide
+const activeSlide = (index: number) => {
   if (isChanging) {
     return;
   }
   isChanging = true;
   // 停止自动播放
   stopPlay();
-
   activeSlideByIndex(index);
+
   // 恢复自动播放
   if (props.autoPlay) {
     startPlay();
@@ -106,6 +95,25 @@ const changeActiveSlide = (index: number) => {
   isChanging = false;
 };
 
+const initSlides = () => {
+  if (!slideElList.value || !slideWrapRef.value) {
+    return;
+  }
+  switch (props.type) {
+    case 'gallery': {
+      slidesInstance = new GallerySlides(slideElList.value, slideWrapRef.value, activeIndex.value);
+
+      break;
+    }
+  }
+  slideElList.value.forEach((el, idx) => {
+    el.addEventListener('click', () => {
+      activeSlide(idx);
+    });
+  });
+  initialized.value = true;
+};
+
 watch(
   () => props.autoPlay,
   (v) => {
@@ -152,7 +160,7 @@ provide(slidesInjectKey, {
       </div>
     </div>
     <div v-if="props.indicator" class="o-slides-indicator-wrap" :class="props.indicatorWrapClass">
-      <div v-for="(item, idx) in total" :key="item" class="o-slides-indicator-item" @click="changeActiveSlide(idx)">
+      <div v-for="(item, idx) in total" :key="item" class="o-slides-indicator-item" @click="activeSlide(idx)">
         <slot name="indicator" :active="item - 1 === activeIndex">
           <div
             class="o-slides-indicator-bar"
@@ -165,7 +173,7 @@ provide(slidesInjectKey, {
       </div>
     </div>
     <div v-if="props.arrow" class="o-slides-arrow-wrap" :class="props.arrowWrapClass">
-      <div @click="changeActiveSlide(activeIndex - 1)">
+      <div @click="activeSlide(activeIndex - 1)">
         <slot name="arrow-prev">
           <div class="o-slides-arrow-prev">
             <div class="o-slides-arrow-icon">
@@ -176,7 +184,7 @@ provide(slidesInjectKey, {
           </div>
         </slot>
       </div>
-      <div @click="changeActiveSlide(activeIndex + 1)">
+      <div @click="activeSlide(activeIndex + 1)">
         <slot name="arrow-next">
           <div class="o-slides-arrow-next">
             <div class="o-slides-arrow-icon">
diff --git a/packages/opendesign/src/components/slides/gallery.ts b/packages/opendesign/src/components/slides/gallery.ts
index 6f61bed1..0232cfad 100644
--- a/packages/opendesign/src/components/slides/gallery.ts
+++ b/packages/opendesign/src/components/slides/gallery.ts
@@ -52,11 +52,7 @@ export default class GallerySlides {
     });
 
     let s = 0;
-    this.slideList = slideElList.map((el, idx) => {
-      el.addEventListener('click', () => {
-        this.active(idx);
-      });
-
+    this.slideList = slideElList.map((el) => {
       const w = el.clientWidth;
       const l = s;
       el.style.left = `${l}px`;
-- 
Gitee


From a693918cefb3b34cae2277f8df6ea585a99d4b77 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 27 Mar 2023 16:41:48 +0800
Subject: [PATCH 13/14] =?UTF-8?q?link=E5=A2=9E=E5=8A=A0=E4=B8=8B=E5=88=92?=
 =?UTF-8?q?=E7=BA=BF=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../opendesign/src/components/link/OLink.vue  | 22 ++++++++--------
 .../components/link/__demo__/LinkBasic.vue    | 23 ++++++++++-------
 .../src/components/link/style/index.scss      | 25 +++++++++++++------
 .../opendesign/src/components/link/types.ts   | 14 ++++++++---
 4 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/packages/opendesign/src/components/link/OLink.vue b/packages/opendesign/src/components/link/OLink.vue
index c29be9b2..518b304e 100644
--- a/packages/opendesign/src/components/link/OLink.vue
+++ b/packages/opendesign/src/components/link/OLink.vue
@@ -7,40 +7,38 @@ const props = defineProps(linkProps);
 
 const emits = defineEmits<{ (e: 'click', val: MouseEvent): void }>();
 const onClick = (e: MouseEvent) => {
-  if (props.disabled) {
+  if (props.disabled || props.loading) {
     e.preventDefault();
     return;
   }
-  if (!props.href) {
-    e.preventDefault();
-  }
   emits('click', e);
 };
 </script>
 <template>
   <a
     class="o-link"
-    :href="props.href"
+    :href="props.disabled ? void 0 : props.href"
     :target="props.target"
     :class="[
       {
         'o-link-disabled': props.disabled,
-        'o-link-hoverable': props.hoverable,
+        'o-link-hover-bg': props.hoverBg,
+        'o-link-hover-underline': props.hoverUnderline,
       },
       `o-link-${props.color}`,
     ]"
     v-bind="$attrs"
     @click="onClick"
   >
-    <span v-if="props.iconPrefix || $slots.iconPrefix || props.loading" class="o-link-icon prefix">
+    <span v-if="$slots.iconPrefix || props.iconPrefix || props.loading" class="o-link-icon-wrap prefix">
       <IconLoading v-if="props.loading" class="o-rotating" />
-      <slot v-else-if="$slots.icon" name="icon"></slot>
-      <IconLinkPrefix v-else />
+      <slot v-else name="icon">
+        <IconLinkPrefix />
+      </slot>
     </span>
     <slot></slot>
-    <span v-if="$slots.iconSuffix" class="o-link-icon suffix">
-      <slot name="iconSuffix"></slot>
+    <span v-if="$slots.iconSuffix || props.iconSuffix" class="o-link-icon-wrap suffix">
+      <slot name="iconSuffix"><IconLinkArrow class="o-link-icon-arrow" /></slot>
     </span>
-    <span v-else-if="props.iconArrow" class="o-link-icon suffix arrow"><IconLinkArrow /></span>
   </a>
 </template>
diff --git a/packages/opendesign/src/components/link/__demo__/LinkBasic.vue b/packages/opendesign/src/components/link/__demo__/LinkBasic.vue
index 2dc69c75..25dd2fe8 100644
--- a/packages/opendesign/src/components/link/__demo__/LinkBasic.vue
+++ b/packages/opendesign/src/components/link/__demo__/LinkBasic.vue
@@ -28,39 +28,44 @@ const onLinkClick2 = () => {
   <section>
     <div class="row">
       <OLink :href="link">普通链接</OLink>
-      <OLink :href="link" hoverable>hoverable</OLink>
+      <OLink :href="link" hover-bg>hover-bg</OLink>
+      <OLink hover-underline>hover-underline</OLink>
       <OLink :href="link" disabled>禁用链接</OLink>
     </div>
     <div class="row">
       <OLink color="success">success链接</OLink>
-      <OLink color="success" hoverable>hoverable</OLink>
+      <OLink color="success" hover-bg>hover-bg</OLink>
+      <OLink color="success" hover-underline>hover-underline</OLink>
       <OLink color="success" :href="link" disabled>禁用链接</OLink>
     </div>
     <div class="row">
       <OLink color="primary">primary链接</OLink>
-      <OLink color="primary" hoverable>hoverable</OLink>
+      <OLink color="primary" hover-bg>hover-bg</OLink>
+      <OLink color="primary" hover-underline>hover-underline</OLink>
       <OLink color="primary" :href="link" disabled>禁用链接</OLink>
     </div>
     <div class="row">
       <OLink color="warning">warning链接</OLink>
-      <OLink color="warning" hoverable>hoverable</OLink>
+      <OLink color="warning" hover-bg>hover-bg</OLink>
+      <OLink color="warning" hover-underline>hover-underline</OLink>
       <OLink color="warning" :href="link" disabled>禁用链接</OLink>
     </div>
     <div class="row">
       <OLink color="danger">danger链接</OLink>
-      <OLink color="danger" hoverable>hoverable</OLink>
+      <OLink color="danger" hover-bg>hover-bg</OLink>
+      <OLink color="danger" hover-underline>hover-underline</OLink>
       <OLink color="danger" :href="link" disabled>禁用链接</OLink>
     </div>
   </section>
   <h4>图标</h4>
   <section>
-    <OLink :href="link" icon-prefix status="primary">图标链接1</OLink>
-    <OLink :href="link" icon-arrow>图标链接2</OLink>
+    <OLink :href="link" icon-prefix status="primary">icon-prefix</OLink>
+    <OLink :href="link" icon-suffix>icon-suffix</OLink>
     <OLink :href="link">
-      <template #iconPrefix><IconDone /></template>自定义图标链接1
+      <template #iconPrefix><IconDone /></template>自定义图标链接slot:iconPrefix
     </OLink>
     <OLink :href="link">
-      自定义图标链接2<template #iconSuffix><IconAdd /></template>
+      自定义图标链接slot:iconSuffix<template #iconSuffix><IconAdd /></template>
     </OLink>
   </section>
   <h4>点击事件</h4>
diff --git a/packages/opendesign/src/components/link/style/index.scss b/packages/opendesign/src/components/link/style/index.scss
index b4337165..fc0afdfd 100644
--- a/packages/opendesign/src/components/link/style/index.scss
+++ b/packages/opendesign/src/components/link/style/index.scss
@@ -5,10 +5,12 @@
   text-decoration: none;
   padding: 0 2px;
   color: var(--link-color);
+  display: inline-flex;
+  align-items: center;
 
   &:not(.o-link-disabled) {
     &:hover {
-      text-decoration: underline;
+      text-decoration: none;
       color: var(--link-color-hover);
       text-underline-offset: 4px;
       .o-link-icon.arrow svg {
@@ -21,6 +23,17 @@
     }
   }
 }
+.o-link-hover-underline {
+  background: linear-gradient(0deg, var(--link-color-hover), var(--link-color-hover)) no-repeat right bottom;
+  background-size: 0 1px;
+  transition: background-size var(--o-easing-standard) var(--o-duration-m2);
+  &:not(.o-link-disabled) {
+    &:hover {
+      background-size: 100% 1px;
+      background-position-x: left;
+    }
+  }
+}
 
 .o-link-disabled {
   cursor: not-allowed;
@@ -28,20 +41,18 @@
   color: var(--link-color-disabled);
 }
 
-.o-link-icon {
+.o-link-icon-wrap {
+  display: flex;
+  align-items: center;
   &.prefix {
     margin-right: 2px;
   }
   &.suffix {
     margin-left: 2px;
   }
-
-  &.arrow svg {
-    transition: transform var(--o-duration-s) var(--o-easing-standard);
-  }
 }
 
-.o-link-hoverable {
+.o-link-hover-bg {
   &:not(.is-disabled) {
     &:hover {
       text-decoration: none;
diff --git a/packages/opendesign/src/components/link/types.ts b/packages/opendesign/src/components/link/types.ts
index cc397dc3..d847f691 100644
--- a/packages/opendesign/src/components/link/types.ts
+++ b/packages/opendesign/src/components/link/types.ts
@@ -25,7 +25,7 @@ export const linkProps = {
    */
   color: {
     type: String as PropType<ColorT>,
-    default: 'normal'
+    default: 'normal',
   },
   /**
    * 是否禁用
@@ -40,15 +40,21 @@ export const linkProps = {
     type: Boolean,
   },
   /**
-   * 图标箭头
+   * 后缀图标
    */
-  iconArrow: {
+  iconSuffix: {
     type: Boolean,
   },
   /**
    * hover时是否显示背景
    */
-  hoverable: {
+  hoverBg: {
+    type: Boolean,
+  },
+  /**
+   * hover时是否下划线
+   */
+  hoverUnderline: {
     type: Boolean,
   },
 };
-- 
Gitee


From 9dec0ba7ee11348b13fa4898183266f76365725a Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 27 Mar 2023 16:42:22 +0800
Subject: [PATCH 14/14] =?UTF-8?q?slide=E4=BF=AE=E5=A4=8D=E5=9B=9E=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/slides/OSlides.vue         |  7 ++++---
 .../slides/__demo__/SlidesBasic.vue           | 10 +++++-----
 .../src/components/slides/gallery.ts          | 19 ++++++++++---------
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/opendesign/src/components/slides/OSlides.vue b/packages/opendesign/src/components/slides/OSlides.vue
index 6aa347f1..a15f9cc1 100644
--- a/packages/opendesign/src/components/slides/OSlides.vue
+++ b/packages/opendesign/src/components/slides/OSlides.vue
@@ -49,13 +49,14 @@ let slidesInstance: GallerySlidesT | null = null;
 const activeSlideByIndex = (index: number) => {
   const to = fixIndex(index);
   const from = activeIndex.value;
+  if (to === from) {
+    return;
+  }
   emits('before-change', to, activeIndex.value);
 
   switch (props.type) {
     case 'gallery': {
-      // TODO 解决动画执行完的回调
-      (slidesInstance as GallerySlidesT)?.active(to).then((i) => {
-        // console.log('actived', i);
+      (slidesInstance as GallerySlidesT)?.active(to).then(() => {
         emits('change', to, from);
       });
       activeIndex.value = to;
diff --git a/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue b/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue
index 8ecdc2c3..4778fe49 100644
--- a/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue
+++ b/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue
@@ -9,12 +9,12 @@ const slides = [
 ];
 
 const onChange = (now: number, last: number) => {
-  console.log(now, last);
+  console.log('slides changed', now, last);
 };
 </script>
 <template>
   <h4>基本</h4>
-  <div class="block">
+  <!-- <div class="block">
     <div class="center"></div>
     <OSlides loop class="gallery-slides" :auto-play="false" :active-index="0" @change="onChange">
       <OSlideItem v-for="s in 6" :key="s" class="gallery-slide">
@@ -22,7 +22,7 @@ const onChange = (now: number, last: number) => {
         <div class="center red"></div>
       </OSlideItem>
     </OSlides>
-  </div>
+  </div> -->
   <div class="block" style="overflow: hidden">
     <OSlides class="slides" auto-play @change="onChange">
       <OSlideItem v-for="s in slides" :key="s" class="slide-item2">
@@ -30,13 +30,13 @@ const onChange = (now: number, last: number) => {
       </OSlideItem>
     </OSlides>
   </div>
-  <div class="block" style="overflow: hidden">
+  <!-- <div class="block" style="overflow: hidden">
     <OSlides loop class="slides2" :auto-play="true" style="--slide-gap-x: 16px" :active-index="1" @change="onChange">
       <OSlideItem v-for="s in slides" :key="s" class="slide-item2">
         <OFigure class="img" :src="s" />
       </OSlideItem>
     </OSlides>
-  </div>
+  </div> -->
 </template>
 <style lang="scss">
 .block {
diff --git a/packages/opendesign/src/components/slides/gallery.ts b/packages/opendesign/src/components/slides/gallery.ts
index 0232cfad..b7bd23d3 100644
--- a/packages/opendesign/src/components/slides/gallery.ts
+++ b/packages/opendesign/src/components/slides/gallery.ts
@@ -19,7 +19,7 @@ export interface GallerySlidesOptionT {
   onChange?: () => void;
 }
 
-// let res;
+let resolveArr: ((value: null | number) => void)[] = [];
 export default class GallerySlides {
   container: ContainerT;
   slideList: SlideItemT[];
@@ -37,15 +37,15 @@ export default class GallerySlides {
     slideContainer.addEventListener('transitionend', () => {
       slideContainer.style.willChange = '';
       slideContainer.classList.remove('is-animating');
-      console.log('end');
+      console.log('animate end');
 
       this.loopRange();
       this.isChanging = false;
 
-      // if (res) {
-      //   res();
-      //   res = null;
-      // }
+      if (resolveArr.length > 1) {
+        resolveArr.forEach((fn) => fn(null));
+        resolveArr = [];
+      }
     });
     slideContainer.addEventListener('transitionstart', () => {
       slideContainer.style.willChange = 'transform';
@@ -146,10 +146,11 @@ export default class GallerySlides {
       }
 
       el.style.transform = `translate3d(${value}px,0,0)`;
-      // res = resolve;
-      setTimeout(() => {
+      if (animate) {
+        resolveArr.push(resolve);
+      } else {
         resolve(null);
-      }, 500);
+      }
     });
   }
 }
-- 
Gitee