From afac7cfa2f40b216dfd5bd4ef1dce41cad78c9f5 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 12 Apr 2023 10:02:18 +0800
Subject: [PATCH 01/14] =?UTF-8?q?=E7=A7=BB=E9=99=A4=E4=B8=8D=E9=9C=80?=
 =?UTF-8?q?=E8=A6=81=E7=9A=84=E4=BE=9D=E8=B5=96=20PrestColorPool=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=85=A8=E5=B1=80=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/package.json                 |  7 +------
 .../opendesign/src/components/_shared/export.ts  |  2 ++
 .../opendesign/src/components/_shared/global.ts  |  8 ++++++++
 .../opendesign/src/components/_shared/utils.ts   | 16 +---------------
 .../src/components/carousel/gallery.ts           |  4 ++--
 .../opendesign/src/components/figure/OFigure.vue |  4 ++--
 .../hooks/use-intersection-observer.ts           |  1 -
 .../src/components/hooks/use-resize-observer.ts  |  1 -
 packages/opendesign/src/components/vite-env.d.ts |  4 ----
 packages/opendesign/tsconfig.json                |  6 +-----
 10 files changed, 17 insertions(+), 36 deletions(-)

diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json
index 3ab14bd9..a8c486d9 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -28,14 +28,9 @@
   },
   "devDependencies": {
     "@opensig/opensig-scripts": "workspace:^0.0.8",
-    "@types/lodash-es": "^4.17.6",
     "typescript": "^4.6.4",
     "vue": "^3.2.41",
     "vue-tsc": "^1.0.13"
   },
-  "dependencies": {
-    "intersection-observer-polyfill": "^0.1.0",
-    "lodash-es": "^4.17.21",
-    "resize-observer-polyfill": "^1.5.1"
-  }
+  "dependencies": {}
 }
diff --git a/packages/opendesign/src/components/_shared/export.ts b/packages/opendesign/src/components/_shared/export.ts
index 54b272ab..1551a1ff 100644
--- a/packages/opendesign/src/components/_shared/export.ts
+++ b/packages/opendesign/src/components/_shared/export.ts
@@ -3,3 +3,5 @@ export { initSize, initRound } from './global';
 export * from './init-icons';
 
 export * from './is';
+
+export * from './utils';
diff --git a/packages/opendesign/src/components/_shared/global.ts b/packages/opendesign/src/components/_shared/global.ts
index b5deb32e..7a850a52 100644
--- a/packages/opendesign/src/components/_shared/global.ts
+++ b/packages/opendesign/src/components/_shared/global.ts
@@ -1,4 +1,5 @@
 import { ref } from 'vue';
+import { ColorPool } from './utils';
 
 // 尺寸
 export const SizeTypes = ['large', 'medium', 'small'] as const;
@@ -27,3 +28,10 @@ export type ColorT = typeof ColorTypes[number];
 
 export const Color2Types = ['normal', 'success', 'warning', 'danger'] as const;
 export type Color2T = typeof ColorTypes[number];
+
+// 随机颜色池
+const PrestColor = ['#d9e6c3', '#ebd5be', '#d1e6de', '#e0ceeb', '#ebd3c7', '#e6dada', '#e3deeb', '#dedae6', '#cad0e8', '#cedeeb'];
+export const PrestColorPool = ref(new ColorPool(PrestColor));
+export function initPrestColor(colors: string[]) {
+  PrestColorPool.value = new ColorPool(colors);
+}
diff --git a/packages/opendesign/src/components/_shared/utils.ts b/packages/opendesign/src/components/_shared/utils.ts
index aacccf1f..9e240eb1 100644
--- a/packages/opendesign/src/components/_shared/utils.ts
+++ b/packages/opendesign/src/components/_shared/utils.ts
@@ -1,14 +1,3 @@
-import { throttle as _throttle, debounce as _debounce } from 'lodash-es';
-import type { ThrottleSettings, DebounceSettings } from 'lodash-es';
-
-// 防抖
-export function debounce<T extends (...args: Array<unknown>) => unknown>(fn: T, wait?: number, ctx?: unknown | null, opts?: ThrottleSettings) {
-  return _debounce.apply(ctx, [fn, wait, opts]);
-}
-// 节流
-export function throttle<T extends (...args: Array<unknown>) => unknown>(fn: T, wait?: number, ctx?: unknown | null, opts?: DebounceSettings) {
-  return _throttle.apply(ctx, [fn, wait, opts]);
-}
 // 防抖 时间为一个一帧
 export function debounceRAF<T extends (...args: Array<unknown>) => any>(fn: T) {
   let handle = 0;
@@ -49,7 +38,7 @@ export function throttleRAF<T extends (...args: Array<unknown>) => unknown>(fn:
 /**
  * 颜色池
  */
-class ColorPool {
+export class ColorPool {
   pool: Array<string>;
   tmpPool: Array<string>;
 
@@ -77,6 +66,3 @@ class ColorPool {
     return color;
   }
 }
-
-const PrestColor = ['#d9e6c3', '#ebd5be', '#d1e6de', '#e0ceeb', '#ebd3c7', '#e6dada', '#e3deeb', '#dedae6', '#cad0e8', '#cedeeb'];
-export const PrestColorPool = new ColorPool(PrestColor);
\ No newline at end of file
diff --git a/packages/opendesign/src/components/carousel/gallery.ts b/packages/opendesign/src/components/carousel/gallery.ts
index a48bbdec..6e6d8205 100644
--- a/packages/opendesign/src/components/carousel/gallery.ts
+++ b/packages/opendesign/src/components/carousel/gallery.ts
@@ -2,7 +2,7 @@ import { isFunction } from '../_shared/is';
 import { PointMoveT } from '../_shared/pointer';
 import Effect, { EffectOptionT } from './effect';
 import { useResizeObserver } from '../hooks';
-import { throttleRAF } from '../_shared/utils';
+import { debounceRAF } from '../_shared/utils';
 
 interface GalleryItemT {
   index: number;
@@ -75,7 +75,7 @@ export default class Gallery extends Effect {
     };
 
     const or = useResizeObserver();
-    const listener = throttleRAF(() => {
+    const listener = debounceRAF(() => {
       this.update(slideElList, slideContainer);
       this.active(activeIndex, false, true);
     });
diff --git a/packages/opendesign/src/components/figure/OFigure.vue b/packages/opendesign/src/components/figure/OFigure.vue
index 5e01eacc..1550a0bc 100644
--- a/packages/opendesign/src/components/figure/OFigure.vue
+++ b/packages/opendesign/src/components/figure/OFigure.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watch, computed, onMounted } from 'vue';
-import { PrestColorPool } from '../_shared/utils';
+import { PrestColorPool } from '../_shared/global';
 import HtmlTag from '../_shared/components/html-tag';
 
 import { figureProps } from './types';
@@ -12,7 +12,7 @@ const imgRef = ref<HTMLImageElement | null>(null);
 
 const isLoading = ref(true);
 const isError = ref(false);
-const prestColor = props.colorful ? PrestColorPool.pick() : '';
+const prestColor = props.colorful ? PrestColorPool.value.pick() : '';
 
 const bgSrc = computed(() => {
   if (props.background && props.ratio) {
diff --git a/packages/opendesign/src/components/hooks/use-intersection-observer.ts b/packages/opendesign/src/components/hooks/use-intersection-observer.ts
index 07d93669..366c519d 100644
--- a/packages/opendesign/src/components/hooks/use-intersection-observer.ts
+++ b/packages/opendesign/src/components/hooks/use-intersection-observer.ts
@@ -1,4 +1,3 @@
-// import IntersectionObserver from 'intersection-observer-polyfill';
 import { isFunction } from '../_shared/is';
 
 export type IntersectionListenerT = (entry: IntersectionObserverEntry) => void;
diff --git a/packages/opendesign/src/components/hooks/use-resize-observer.ts b/packages/opendesign/src/components/hooks/use-resize-observer.ts
index c6c536cc..deccd7d6 100644
--- a/packages/opendesign/src/components/hooks/use-resize-observer.ts
+++ b/packages/opendesign/src/components/hooks/use-resize-observer.ts
@@ -1,4 +1,3 @@
-// import ResizeObserver from 'resize-observer-polyfill';
 import { isFunction } from '../_shared/is';
 
 /**
diff --git a/packages/opendesign/src/components/vite-env.d.ts b/packages/opendesign/src/components/vite-env.d.ts
index 8fd2afcd..af36df34 100644
--- a/packages/opendesign/src/components/vite-env.d.ts
+++ b/packages/opendesign/src/components/vite-env.d.ts
@@ -5,7 +5,3 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
-
-// declare module 'intersection-observer-polyfill' {
-//   export default IntersectionObserver;
-// }
\ No newline at end of file
diff --git a/packages/opendesign/tsconfig.json b/packages/opendesign/tsconfig.json
index 492992fd..d04b7010 100644
--- a/packages/opendesign/tsconfig.json
+++ b/packages/opendesign/tsconfig.json
@@ -16,11 +16,7 @@
     "skipLibCheck": true,
     "noEmit": true,
     "baseUrl": "./",
-    "paths": {
-      "resize-observer-polyfill": [
-        "node_modules/resize-observer-polyfill"
-      ]
-    }
+    "paths": {}
   },
   "include": [
     "src/**/*.ts",
-- 
Gitee


From 0fa0af5b423c77697d07a1e1dec8cb5ddb37dc43 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 12 Apr 2023 10:31:18 +0800
Subject: [PATCH 02/14] =?UTF-8?q?=E9=81=BF=E5=85=8D=E5=90=8C=E4=B8=80?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E5=A4=9A=E6=AC=A1=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../opendesign/src/components/carousel/OCarousel.vue     | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/opendesign/src/components/carousel/OCarousel.vue b/packages/opendesign/src/components/carousel/OCarousel.vue
index 13fed7f1..b9b63c10 100644
--- a/packages/opendesign/src/components/carousel/OCarousel.vue
+++ b/packages/opendesign/src/components/carousel/OCarousel.vue
@@ -52,10 +52,10 @@ const slideElList = computed(() => {
   return c ? Array.from(c).map((el) => el as HTMLElement) : null;
 });
 
-let isChanging = false;
-
 // gallery
 let slidesInstance: InstanceType<typeof Effect> | null = null;
+// 避免同一时间多次切换
+let isChanging = false;
 
 const activeSlideByIndex = (index: number): Promise<boolean> => {
   return new Promise((resolve) => {
@@ -65,13 +65,16 @@ const activeSlideByIndex = (index: number): Promise<boolean> => {
     if (isChanging || !slideElList.value || to === from) {
       return Promise.resolve(false);
     }
+    isChanging = true;
 
     if (slidesInstance) {
       activeIndex.value = to;
       slidesInstance.active(to).then(() => {
+        isChanging = false;
         resolve(true);
       });
     } else {
+      isChanging = false;
       resolve(false);
     }
   });
@@ -125,11 +128,9 @@ const initSlides = () => {
       }
     },
     onBeforeChange: (to: number, from: number) => {
-      isChanging = true;
       emits('before-change', to, from);
     },
     onChanged: (to: number, from: number) => {
-      isChanging = false;
       activeIndex.value = to;
       emits('change', to, from);
     },
-- 
Gitee


From 897c24ef8363f9435d05386a28704adae76d7aff Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 12 Apr 2023 21:34:52 +0800
Subject: [PATCH 03/14] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=85=AC=E5=85=B1?=
 =?UTF-8?q?=E7=B1=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/package.json              |  2 +-
 .../src/components/style/common.scss          |  8 ++++++
 .../opendesign/src/components/style/icon.scss | 21 ++++++++++++++
 .../src/components/style/index.scss           | 28 +++----------------
 packages/portal/src/pages/TheHome.vue         |  3 ++
 packages/portal/src/pages/TheText.vue         | 16 +++++++++++
 packages/portal/src/router.ts                 |  6 ++++
 7 files changed, 59 insertions(+), 25 deletions(-)
 create mode 100644 packages/opendesign/src/components/style/common.scss
 create mode 100644 packages/opendesign/src/components/style/icon.scss
 create mode 100644 packages/portal/src/pages/TheText.vue

diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json
index a8c486d9..f1b1a512 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opensig/opendesign",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "main": "lib/index.js",
   "module": "es/index.mjs",
   "types": "es/index.d.ts",
diff --git a/packages/opendesign/src/components/style/common.scss b/packages/opendesign/src/components/style/common.scss
new file mode 100644
index 00000000..a8197ec6
--- /dev/null
+++ b/packages/opendesign/src/components/style/common.scss
@@ -0,0 +1,8 @@
+$text-types: display1, display2, display3, display4, display5, h1, h2, h3, h4, text1, text2, tip1, tip2;
+
+@each $type in $text-types {
+  .o-txt-#{$type} {
+    font-size: var(--o-font_size-#{$type});
+    line-height: var(--o-line_height-#{$type});
+  }
+}
diff --git a/packages/opendesign/src/components/style/icon.scss b/packages/opendesign/src/components/style/icon.scss
new file mode 100644
index 00000000..1f8eb899
--- /dev/null
+++ b/packages/opendesign/src/components/style/icon.scss
@@ -0,0 +1,21 @@
+// icons
+.o-icon {
+  --icon-g1: var(--o-color-text1);
+  --icon-g2: var(--o-color-primary1);
+}
+
+.o-icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.2em;
+  color: inherit;
+  font-style: normal;
+  outline: none;
+  &.type-stroke {
+    stroke: currentColor;
+  }
+  &.type-fill {
+    fill: currentColor;
+  }
+}
diff --git a/packages/opendesign/src/components/style/index.scss b/packages/opendesign/src/components/style/index.scss
index 8fa3561d..c64c03a2 100644
--- a/packages/opendesign/src/components/style/index.scss
+++ b/packages/opendesign/src/components/style/index.scss
@@ -1,32 +1,12 @@
-@import './animation.scss';
+@use './animation.scss';
+@use './common.scss';
+@use './icon.scss';
 
 [class^='o-'],
-[class^='o-'] * {
+[class^='o-'] {
   box-sizing: border-box;
 }
 
 :root {
   --o-z-index-base: 100;
 }
-
-// icons
-.o-icon {
-  --icon-g1: var(--o-color-text1);
-  --icon-g2: var(--o-color-primary1);
-}
-
-.o-icon {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.2em;
-  color: inherit;
-  font-style: normal;
-  outline: none;
-  &.type-stroke {
-    stroke: currentColor;
-  }
-  &.type-fill {
-    fill: currentColor;
-  }
-}
diff --git a/packages/portal/src/pages/TheHome.vue b/packages/portal/src/pages/TheHome.vue
index 0d550dd4..37855a6c 100644
--- a/packages/portal/src/pages/TheHome.vue
+++ b/packages/portal/src/pages/TheHome.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import '@components/style';
+
 const title = 'Home';
 </script>
 <template>
   <div class="page-demo">
     {{ title }}
+    <h1 class="o-txt-h1">h1</h1>
   </div>
 </template>
 <style lang="scss">
diff --git a/packages/portal/src/pages/TheText.vue b/packages/portal/src/pages/TheText.vue
new file mode 100644
index 00000000..a398e42b
--- /dev/null
+++ b/packages/portal/src/pages/TheText.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import '@components/style';
+const list = ['display1', 'display2', 'display3', 'display4', 'h1', 'h2', 'h3', 'text1', 'text2', 'tip1', 'tip2'];
+const title = 'Text';
+</script>
+<template>
+  <div class="page-demo">
+    <h1>{{ title }}</h1>
+    <div v-for="t in list" :key="t" :class="[`o-txt-${t}`]">{{ t }}</div>
+  </div>
+</template>
+<style lang="scss">
+.the-home {
+  color: #333;
+}
+</style>
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index c041e9ed..ad5f2059 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -8,6 +8,12 @@ export const routes = [
     label: '通用',
     component: TheHome,
   },
+  {
+    path: '/text',
+    name: 'Text',
+    label: '文本 Text',
+    component: () => import('./pages/TheText.vue'),
+  },
   {
     path: '/icons',
     name: 'Icons',
-- 
Gitee


From ce0981167aa546e653f44bbd9bd99fcb37c0a113 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Thu, 13 Apr 2023 00:58:22 +0800
Subject: [PATCH 04/14] =?UTF-8?q?=E4=BC=98=E5=8C=96layer=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/dialog/ODialog.vue         |  9 ++-
 .../dialog/__demo__/DialogBasic.vue           |  8 +-
 .../src/components/dialog/style/index.scss    |  1 +
 .../src/components/layer/OLayer.vue           | 78 ++++++++-----------
 .../components/layer/__demo__/LayerBasic.vue  | 17 ++++
 .../opendesign/src/components/layer/types.ts  | 12 +--
 .../src/components/loading/OLoading.vue       | 17 ++--
 .../loading/__demo__/LoadingBasic.vue         | 25 +++---
 .../{IndexLoading.vue => TheIndex.vue}        |  0
 .../src/components/loading/types.ts           | 18 +++++
 .../src/components/loading/use-loading.ts     | 39 +++++-----
 .../src/components/loading/v-loading.ts       | 25 ++++--
 packages/portal/src/router.ts                 |  2 +-
 13 files changed, 142 insertions(+), 109 deletions(-)
 rename packages/opendesign/src/components/loading/__demo__/{IndexLoading.vue => TheIndex.vue} (100%)

diff --git a/packages/opendesign/src/components/dialog/ODialog.vue b/packages/opendesign/src/components/dialog/ODialog.vue
index 9145375d..64a1cc3f 100644
--- a/packages/opendesign/src/components/dialog/ODialog.vue
+++ b/packages/opendesign/src/components/dialog/ODialog.vue
@@ -15,8 +15,14 @@ const emits = defineEmits<{
 const layerRef = ref<InstanceType<typeof OLayer> | null>(null);
 
 const onCloseClick = () => {
-  layerRef.value?.hide();
+  layerRef.value?.toggle(false);
 };
+
+defineExpose({
+  toggle(show?: boolean) {
+    layerRef.value?.toggle(show);
+  },
+});
 </script>
 <template>
   <OLayer
@@ -24,7 +30,6 @@ const onCloseClick = () => {
     class="o-dialog"
     :visible="props.visible"
     :wrapper="props.wrapper"
-    :to-body="props.toBody"
     :unmount-on-hide="props.unmountOnHide"
     :main-class="mergeClass('o-dlg-main', props.mainClass)"
     :main-transition="props.mainTransition"
diff --git a/packages/opendesign/src/components/dialog/__demo__/DialogBasic.vue b/packages/opendesign/src/components/dialog/__demo__/DialogBasic.vue
index ced4d092..ea4afbb1 100644
--- a/packages/opendesign/src/components/dialog/__demo__/DialogBasic.vue
+++ b/packages/opendesign/src/components/dialog/__demo__/DialogBasic.vue
@@ -64,7 +64,7 @@ const onChane = (v: boolean) => {
       This is Dialog
       <template #footer>
         <div class="dlg-action">
-          <OButton color="primary" variant="solid" @click="toggle(false)">确定</OButton>
+          <OButton color="primary" variant="solid" @click="toggle2(false)">确定</OButton>
           <OButton @click="toggle2(false)">取消</OButton>
         </div>
       </template>
@@ -73,12 +73,12 @@ const onChane = (v: boolean) => {
   <h4>局部弹窗</h4>
   <section class="wrap">
     <OButton @click="toggle3(true)">Open to parent</OButton>
-    <ODialog v-model:visible="showDlg3" @change="onChane">
+    <ODialog v-model:visible="showDlg3" :wrapper="null" @change="onChane">
       <template #header>Dialog Title</template>
       This is Dialog
       <template #footer>
         <div class="dlg-action">
-          <OButton color="primary" variant="solid" @click="toggle(false)">确定</OButton>
+          <OButton color="primary" variant="solid" @click="toggle3(false)">确定</OButton>
           <OButton @click="toggle3(false)">取消</OButton>
         </div>
       </template>
@@ -90,7 +90,7 @@ const onChane = (v: boolean) => {
       This is Dialog
       <template #footer>
         <div class="dlg-action">
-          <OButton color="primary" variant="solid" @click="toggle(false)">确定</OButton>
+          <OButton color="primary" variant="solid" @click="toggle4(false)">确定</OButton>
           <OButton @click="toggle4(false)">取消</OButton>
         </div>
       </template>
diff --git a/packages/opendesign/src/components/dialog/style/index.scss b/packages/opendesign/src/components/dialog/style/index.scss
index 2105ddcd..0cf71ab1 100644
--- a/packages/opendesign/src/components/dialog/style/index.scss
+++ b/packages/opendesign/src/components/dialog/style/index.scss
@@ -17,6 +17,7 @@
   color: var(--dlg-close-color);
   display: flex;
   transition: transform var(--o-easing-standard) var(--o-duration-m2);
+  cursor: pointer;
   &:hover {
     color: var(--dlg-close-color-hover);
   }
diff --git a/packages/opendesign/src/components/layer/OLayer.vue b/packages/opendesign/src/components/layer/OLayer.vue
index 5d1092d7..ffc542d6 100644
--- a/packages/opendesign/src/components/layer/OLayer.vue
+++ b/packages/opendesign/src/components/layer/OLayer.vue
@@ -4,7 +4,7 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { ref, watch, computed, onMounted } from 'vue';
+import { ref, watch, computed, onMounted, nextTick } from 'vue';
 import { layerProps } from './types';
 
 const props = defineProps(layerProps);
@@ -18,38 +18,28 @@ const emits = defineEmits<{
 const visible = ref(props.visible);
 const toMount = ref(props.visible);
 
-const wrapper = computed(() => {
-  if (props.wrapper) {
-    return props.wrapper;
-  } else if (props.toBody) {
-    return 'body';
-  }
-  return null;
-});
-
 const isToBody = ref(false);
-
+const LayerClass = {
+  OPEN: 'o-layer-open',
+};
 // 挂载目标
 let wrapperEl: HTMLElement | null = null;
-const getWrapperEl = () => {
-  if (!wrapperEl && wrapper.value) {
-    if (typeof wrapper.value === 'string') {
-      wrapperEl = document.querySelector(wrapper.value);
-    } else {
-      wrapperEl = wrapper.value;
-    }
-  }
-  isToBody.value = wrapperEl === document.body;
-};
+const layerRef = ref<HTMLElement | null>(null);
+
 const handleWrapperScroll = () => {
-  getWrapperEl();
-  if (wrapperEl) {
-    if (visible.value) {
-      wrapperEl.classList.add('o-layer-open');
-    } else {
-      wrapperEl.classList.remove('o-layer-open');
+  nextTick(() => {
+    if (!wrapperEl && layerRef.value) {
+      wrapperEl = layerRef.value.offsetParent as HTMLElement;
+      isToBody.value = wrapperEl === document.body;
     }
-  }
+    if (wrapperEl) {
+      if (visible.value) {
+        wrapperEl.classList.add(LayerClass.OPEN);
+      } else {
+        wrapperEl.classList.remove(LayerClass.OPEN);
+      }
+    }
+  });
 };
 
 watch(
@@ -63,22 +53,19 @@ watch(
   }
 );
 
-const show = () => {
-  if (!visible.value) {
-    visible.value = true;
-    emits('update:visible', true);
-    emits('change', true);
-    handleWrapperScroll();
+const toggle = (show?: boolean) => {
+  if (visible.value === show) {
+    return;
   }
-};
 
-const hide = () => {
-  if (visible.value) {
-    visible.value = false;
-    emits('update:visible', false);
-    emits('change', false);
-    handleWrapperScroll();
+  if (show === undefined) {
+    visible.value = !visible.value;
+  } else {
+    visible.value = show;
   }
+  emits('update:visible', visible.value);
+  emits('change', visible.value);
+  handleWrapperScroll();
 };
 
 const isMounted = computed(() => {
@@ -99,7 +86,7 @@ const handleTransitionEnd = () => {
 
 const onMaskClick = (e: MouseEvent) => {
   if (props.maskClose) {
-    hide();
+    toggle(false);
   }
   emits('click:mask', e);
 };
@@ -111,13 +98,12 @@ onMounted(() => {
 });
 
 defineExpose({
-  show,
-  hide,
+  toggle,
 });
 </script>
 <template>
-  <teleport :to="wrapper" :disabled="!wrapper">
-    <div v-if="isMounted" v-show="visible || toMount" class="o-layer" v-bind="$attrs" :class="{ 'o-layer-to-body': isToBody }">
+  <teleport :to="props.wrapper" :disabled="!props.wrapper">
+    <div v-if="isMounted" v-show="visible || toMount" v-bind="$attrs" ref="layerRef" class="o-layer" :class="{ 'o-layer-to-body': isToBody }">
       <template v-if="props.mask">
         <transition :name="props.maskTransition" :appear="true">
           <div v-show="visible" class="o-layer-mask" @click="onMaskClick"></div>
diff --git a/packages/opendesign/src/components/layer/__demo__/LayerBasic.vue b/packages/opendesign/src/components/layer/__demo__/LayerBasic.vue
index d8b513cb..c366adbb 100644
--- a/packages/opendesign/src/components/layer/__demo__/LayerBasic.vue
+++ b/packages/opendesign/src/components/layer/__demo__/LayerBasic.vue
@@ -32,6 +32,15 @@ const toggle3 = (show?: boolean) => {
   }
 };
 
+const show4 = ref(false);
+const toggle4 = (show?: boolean) => {
+  if (show === undefined) {
+    show4.value = !show4.value;
+  } else {
+    show4.value = show;
+  }
+};
+
 const onChane = (v: boolean) => {
   console.log('dialog change', v);
 };
@@ -64,6 +73,14 @@ const onChane = (v: boolean) => {
         <OButton @click="toggle3()">Close</OButton>
       </div>
     </OLayer>
+    <OButton @click="toggle4(true)">Open to Parent</OButton>
+    <OLayer v-model:visible="show4" :wrapper="null" @change="onChane">
+      <div class="box">
+        <h2>title</h2>
+        <p>this is content this is content this is content this is content this is content this is content this is content this is content</p>
+        <OButton @click="toggle4()">Close</OButton>
+      </div>
+    </OLayer>
   </section>
 </template>
 <style lang="scss" scoped>
diff --git a/packages/opendesign/src/components/layer/types.ts b/packages/opendesign/src/components/layer/types.ts
index b6efb5e8..a3f8ab5c 100644
--- a/packages/opendesign/src/components/layer/types.ts
+++ b/packages/opendesign/src/components/layer/types.ts
@@ -7,19 +7,14 @@ export const layerProps = {
    */
   visible: {
     type: Boolean,
+    default: false,
   },
   /**
-   * 挂载容器，默认为当前父元素
+   * 挂载容器，默认为body, null代表当前父元素
    */
   wrapper: {
     type: [String, Object] as PropType<string | HTMLElement | null>,
-  },
-  /**
-   * 是否挂载到body
-   */
-  toBody: {
-    type: Boolean,
-    default: false,
+    default: 'body',
   },
   /**
    * 是否在隐藏时unmout
@@ -33,6 +28,7 @@ export const layerProps = {
    */
   mainClass: {
     type: [String, Array] as PropType<string | any[]>,
+    default: '',
   },
   /**
    * main过渡名称
diff --git a/packages/opendesign/src/components/loading/OLoading.vue b/packages/opendesign/src/components/loading/OLoading.vue
index 9f6891ea..101d5cdb 100644
--- a/packages/opendesign/src/components/loading/OLoading.vue
+++ b/packages/opendesign/src/components/loading/OLoading.vue
@@ -15,11 +15,8 @@ const emits = defineEmits<{
 const layerRef = ref<InstanceType<typeof OLayer> | null>(null);
 
 defineExpose({
-  show() {
-    layerRef.value?.show();
-  },
-  hide() {
-    layerRef.value?.hide();
+  toggle(show?: boolean) {
+    layerRef.value?.toggle(show);
   },
 });
 </script>
@@ -29,7 +26,6 @@ defineExpose({
     class="o-loading"
     :visible="props.visible"
     :wrapper="props.wrapper"
-    :to-body="props.toBody"
     :unmount-on-hide="props.unmountOnHide"
     :main-class="mergeClass('o-loading-main', props.mainClass)"
     :main-transition="props.mainTransition"
@@ -41,10 +37,13 @@ defineExpose({
   >
     <slot>
       <div class="o-loading-icon">
-        <slot name="icon"><IconLoading class="o-rotating" /></slot>
+        <slot name="icon">
+          <component :is="props.icon" v-if="props.icon" :class="{ 'o-rotating': props.iconRotating }" />
+          <IconLoading v-else class="o-rotating" />
+        </slot>
       </div>
-      <div v-if="$slots.label" class="o-loading-label">
-        <slot name="label"></slot>
+      <div v-if="$slots.label || props.label" class="o-loading-label">
+        <slot name="label">{{ props.label }}</slot>
       </div>
     </slot>
   </OLayer>
diff --git a/packages/opendesign/src/components/loading/__demo__/LoadingBasic.vue b/packages/opendesign/src/components/loading/__demo__/LoadingBasic.vue
index 9dc5c840..3e55a345 100644
--- a/packages/opendesign/src/components/loading/__demo__/LoadingBasic.vue
+++ b/packages/opendesign/src/components/loading/__demo__/LoadingBasic.vue
@@ -15,18 +15,23 @@ const showLoading1 = () => {
 
 const show2 = ref(false);
 const show3 = ref(false);
+const show4 = ref(false);
 
 const box1 = ref();
 const l1 = useLoading();
-const l2 = useLoading(box1, undefined);
+const l2 = useLoading(box1, {
+  label: 'loading',
+  icon: IconAdd,
+  iconRotating: true,
+});
 const toggleLoading1 = () => {
-  l1.show();
+  l1.toggle(true);
   setTimeout(() => {
-    l1.hide();
+    l1.toggle(false);
   }, 1000);
 };
 const toggleLoading2 = () => {
-  l2.show();
+  l2.toggle();
 };
 </script>
 <template>
@@ -38,21 +43,19 @@ const toggleLoading2 = () => {
   <section>
     <div class="box">
       show2
-      <OLoading v-model:visible="show2" />
+      <OLoading v-model:visible="show2" :wrapper="null" />
     </div>
     <div class="box">
       show2
-      <OLoading v-model:visible="show2">自定义<IconAdd class="o-rotating" /></OLoading>
+      <OLoading v-model:visible="show2" :wrapper="null">自定义<IconAdd class="o-rotating" /></OLoading>
     </div>
   </section>
   <h4>指令</h4>
   <OButton @click="show3 = !show3">show3:{{ show3 }}</OButton>
+  <OButton v-loading.body="show4" @click="show4 = !show4">show4 body:{{ show4 }}</OButton>
   <section>
-    <div v-loading="show3" class="box">show3</div>
-    <div class="box">
-      show3
-      <OLoading v-model:visible="show3">自定义<IconAdd class="o-rotating" /></OLoading>
-    </div>
+    <div v-loading="show3" class="box b1">show3</div>
+    <div v-loading.nomask="show3" class="box b2">show3 nomask</div>
   </section>
   <h4>服务</h4>
   <OButton @click="toggleLoading1">service to body</OButton>
diff --git a/packages/opendesign/src/components/loading/__demo__/IndexLoading.vue b/packages/opendesign/src/components/loading/__demo__/TheIndex.vue
similarity index 100%
rename from packages/opendesign/src/components/loading/__demo__/IndexLoading.vue
rename to packages/opendesign/src/components/loading/__demo__/TheIndex.vue
diff --git a/packages/opendesign/src/components/loading/types.ts b/packages/opendesign/src/components/loading/types.ts
index d92afc95..22fa4d68 100644
--- a/packages/opendesign/src/components/loading/types.ts
+++ b/packages/opendesign/src/components/loading/types.ts
@@ -6,6 +6,24 @@ const { maskClose, ...extractProps } = layerProps;
 
 export const loadingProps = {
   ...extractProps,
+  /**
+   * loading文本
+   */
+  label: {
+    type: String,
+  },
+  /**
+   * loading图标
+   */
+  icon: {
+    type: Object,
+  },
+  /**
+   * loading图标是否旋转
+   */
+  iconRotating: {
+    type: Boolean,
+  },
 };
 
 export type LoadingPropsT = ExtractPropTypes<typeof loadingProps>;
diff --git a/packages/opendesign/src/components/loading/use-loading.ts b/packages/opendesign/src/components/loading/use-loading.ts
index 4b8800c3..8804e17a 100644
--- a/packages/opendesign/src/components/loading/use-loading.ts
+++ b/packages/opendesign/src/components/loading/use-loading.ts
@@ -1,8 +1,8 @@
-import { createVNode, render, isRef, Ref, watch, ComponentInternalInstance } from 'vue';
+import { createVNode, render, isRef, Ref, watch, ComponentInternalInstance, onMounted } from 'vue';
 import OLoading from './OLoading.vue';
 import { LoadingPropsT } from './types';
 
-const initLoading = (opt?: LoadingPropsT, el?: HTMLElement) => {
+const initLoading = (opt?: Partial<LoadingPropsT>, el?: HTMLElement) => {
   const vnode = createVNode(OLoading, Object.assign(opt || {}, { wrapper: el }));
   if (el) {
     render(vnode, el);
@@ -10,33 +10,32 @@ const initLoading = (opt?: LoadingPropsT, el?: HTMLElement) => {
   return vnode.component;
 };
 
-const useLoading = (wrap: Ref<HTMLElement> | HTMLElement | string = 'body', opt?: LoadingPropsT) => {
+const useLoading = (wrap: Ref<HTMLElement> | HTMLElement | string = 'body', opt?: Partial<LoadingPropsT>) => {
   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)) {
+  if (isRef(wrap)) {
     watch(
       () => wrap.value,
       (el) => {
         instance = initLoading(opt, el);
+      },
+      {
+        immediate: true,
       }
     );
+  } else if ((wrap as HTMLElement).nodeType === 1) {
+    instance = initLoading(opt, wrap as HTMLElement);
+  } else if (typeof wrap === 'string') {
+    onMounted(() => {
+      const el = document.querySelector(wrap);
+      if (el) {
+        instance = initLoading(opt, el as HTMLElement);
+      }
+    });
   }
+
   return {
-    show() {
-      if (instance) {
-        instance.exposed?.show();
-      }
-    },
-    hide() {
-      if (instance) {
-        instance.exposed?.hide();
-      }
+    toggle(show?: boolean) {
+      instance?.exposed?.toggle(show);
     },
   };
 };
diff --git a/packages/opendesign/src/components/loading/v-loading.ts b/packages/opendesign/src/components/loading/v-loading.ts
index a9ed3483..61d89219 100644
--- a/packages/opendesign/src/components/loading/v-loading.ts
+++ b/packages/opendesign/src/components/loading/v-loading.ts
@@ -3,20 +3,29 @@ import OLoading from './OLoading.vue';
 
 const vLoading: ObjectDirective = {
   mounted(el: HTMLElement, binding: DirectiveBinding) {
-    const vnode = createVNode(OLoading, { show: binding.value });
-    render(vnode, el);
+    const vnode = createVNode(OLoading, {
+      visible: binding.value,
+      wrapper: binding.modifiers.body ? 'body' : null,
+      mask: !binding.modifiers.nomask,
+    });
+
+    if (binding.modifiers.body) {
+      render(vnode, document.body);
+    } else {
+      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) {
-      if (binding.value) {
-        data.instance.exposed.show();
-      } else {
-        data.instance.exposed.hide();
+    if (binding.value !== binding.oldValue) {
+      const data = (el as any).__loading_data;
+
+      if (data) {
+        data.instance.exposed.toggle(!!binding.value);
       }
     }
   },
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index ad5f2059..2d200bb2 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -174,7 +174,7 @@ export const routes = [
     path: '/loading',
     name: 'Loading',
     label: '加载 Loading',
-    component: () => import('@components/loading/__demo__/IndexLoading.vue'),
+    component: () => import('@components/loading/__demo__/TheIndex.vue'),
   },
   {
     path: '/figure',
-- 
Gitee


From cb29a0aa42ee98957a26808b8263505ab747eecb Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Thu, 13 Apr 2023 09:49:11 +0800
Subject: [PATCH 05/14] v32

---
 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 f1b1a512..a005522d 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opensig/opendesign",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "main": "lib/index.js",
   "module": "es/index.mjs",
   "types": "es/index.d.ts",
-- 
Gitee


From 88d2c284d44f02547894ffa85d3ae20934ee69b5 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Thu, 13 Apr 2023 11:42:49 +0800
Subject: [PATCH 06/14] rm

---
 .../opendesign/src/components/loading/__demo__/LoadingBasic.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/opendesign/src/components/loading/__demo__/LoadingBasic.vue b/packages/opendesign/src/components/loading/__demo__/LoadingBasic.vue
index 3e55a345..9f9429f0 100644
--- a/packages/opendesign/src/components/loading/__demo__/LoadingBasic.vue
+++ b/packages/opendesign/src/components/loading/__demo__/LoadingBasic.vue
@@ -37,7 +37,7 @@ const toggleLoading2 = () => {
 <template>
   <h4>全局</h4>
   <OButton @click="showLoading1">show1:{{ show1 }}</OButton>
-  <OLoading v-model:visible="show1" to-body />
+  <OLoading v-model:visible="show1" />
   <h4>局部</h4>
   <OButton @click="show2 = !show2">show2:{{ show2 }}</OButton>
   <section>
-- 
Gitee


From 6eee05a286922e73ef3adfcee2a70e60d03bde2f Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 18 Apr 2023 14:27:59 +0800
Subject: [PATCH 07/14] fix

---
 .../opendesign/src/components/flex/__demo__/FlexBasic.vue | 6 ++++++
 packages/opendesign/src/components/flex/index.ts          | 1 +
 packages/opendesign/src/components/flex/types.ts          | 2 +-
 packages/opendesign/src/components/grid/index.ts          | 1 +
 packages/opendesign/src/components/tab/index.ts           | 1 +
 .../components/textarea/__demo__/TextareaAutoHeight.vue   | 8 ++++----
 6 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/opendesign/src/components/flex/__demo__/FlexBasic.vue b/packages/opendesign/src/components/flex/__demo__/FlexBasic.vue
index 58521b1d..94797a7e 100644
--- a/packages/opendesign/src/components/flex/__demo__/FlexBasic.vue
+++ b/packages/opendesign/src/components/flex/__demo__/FlexBasic.vue
@@ -53,6 +53,12 @@ import { OFlex, OFlexItem } from '../index';
       <div class="colored"><div class="box">box</div></div>
       <div class="colored"><div class="box">box</div></div>
     </OFlex>
+    <br />
+    <OFlex gap="16px">
+      <OFlexItem class="colored"><div class="box">box</div></OFlexItem>
+      <OFlexItem class="colored"><div class="box">box</div></OFlexItem>
+      <OFlexItem class="colored"><div class="box">box</div></OFlexItem>
+    </OFlex>
   </div>
 </template>
 <style lang="scss">
diff --git a/packages/opendesign/src/components/flex/index.ts b/packages/opendesign/src/components/flex/index.ts
index 23a0d43f..55c72fd1 100644
--- a/packages/opendesign/src/components/flex/index.ts
+++ b/packages/opendesign/src/components/flex/index.ts
@@ -6,6 +6,7 @@ const OFlex = Object.assign(_OFlex, {
   OFlexItem,
   install(app: App) {
     app.component(_OFlex.name, _OFlex);
+    app.component(OFlexItem.name, OFlexItem);
   },
 });
 
diff --git a/packages/opendesign/src/components/flex/types.ts b/packages/opendesign/src/components/flex/types.ts
index ec43a113..1bb26417 100644
--- a/packages/opendesign/src/components/flex/types.ts
+++ b/packages/opendesign/src/components/flex/types.ts
@@ -96,7 +96,7 @@ export const flexItemProps = {
    */
   flex: {
     type: String,
-    default: '0 1 auto',
+    default: '1 0 auto',
   },
   /**
    * 同 align-self
diff --git a/packages/opendesign/src/components/grid/index.ts b/packages/opendesign/src/components/grid/index.ts
index 88ecc8a4..32d222e2 100644
--- a/packages/opendesign/src/components/grid/index.ts
+++ b/packages/opendesign/src/components/grid/index.ts
@@ -6,6 +6,7 @@ const ORow = Object.assign(_ORow, {
   OCol,
   install(app: App) {
     app.component(_ORow.name, _ORow);
+    app.component(OCol.name, OCol);
   },
 });
 
diff --git a/packages/opendesign/src/components/tab/index.ts b/packages/opendesign/src/components/tab/index.ts
index 124c7219..fbdabe79 100644
--- a/packages/opendesign/src/components/tab/index.ts
+++ b/packages/opendesign/src/components/tab/index.ts
@@ -6,6 +6,7 @@ const OTab = Object.assign(_OTab, {
   OTabPane,
   install(app: App) {
     app.component(_OTab.name, _OTab);
+    app.component(OTabPane.name, OTabPane);
   },
 });
 
diff --git a/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue b/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue
index 3eea2a6c..5d82d9b1 100644
--- a/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue
+++ b/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue
@@ -2,15 +2,15 @@
 import { ref } from 'vue';
 import { OTextarea } from '../index';
 
-const val1 = ref('max width: 300px <OTextarea v-model="val1" auto-height /> <OTextarea v-model="val1" auto-height />');
-const val2 = ref('min width: 100px');
+const val1 = ref('max Height: 300px <OTextarea v-model="val1" auto-height /> <OTextarea v-model="val1" auto-height />');
+const val2 = ref('min Height: 100px');
 setTimeout(() => {
   val1.value = '123';
-  val2.value = 'max width: 300px <OTextarea v-model="val1" auto-height />';
+  val2.value = 'max Height: 300px <OTextarea v-model="val1" auto-height />';
 }, 2000);
 </script>
 <template>
-  <h4>Auto Width</h4>
+  <h4>Auto Height</h4>
   <section>
     <div>
       <OTextarea v-model="val1" auto-height />
-- 
Gitee


From 7928be764e0a69bc1ebc7056f882a8c08bc59ed4 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 19 Apr 2023 15:55:01 +0800
Subject: [PATCH 08/14] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/components/tab/OTab.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/opendesign/src/components/tab/OTab.vue b/packages/opendesign/src/components/tab/OTab.vue
index 1a1f7cb1..f6664c13 100644
--- a/packages/opendesign/src/components/tab/OTab.vue
+++ b/packages/opendesign/src/components/tab/OTab.vue
@@ -102,12 +102,11 @@ const onHeadResize = () => {
 };
 </script>
 <template>
-  <div class="o-tab">
+  <div class="o-tab" :class="[`o-tab-${props.variant}`]">
     <OResizeObserver @resize="onHeadResize">
       <div
         class="o-tab-head"
         :class="[
-          `o-tab-${props.variant}`,
           {
             'with-act': $slots.suffix || $slots.prefix,
             'show-line': props.line,
-- 
Gitee


From d4d7a9aadb06267f7dbe7ed9f48fcd68e3c30fec Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 19 Apr 2023 16:54:41 +0800
Subject: [PATCH 09/14] fix

---
 .../src/components/figure/style/index.scss      | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/opendesign/src/components/figure/style/index.scss b/packages/opendesign/src/components/figure/style/index.scss
index e1fb34c1..4dcdf4a2 100644
--- a/packages/opendesign/src/components/figure/style/index.scss
+++ b/packages/opendesign/src/components/figure/style/index.scss
@@ -4,6 +4,8 @@
   display: inline-flex;
   overflow: hidden;
   transition: background-color var(--o-duration-m2);
+  border-radius: var(--figure-radius);
+
   &.is-loading {
     &.is-colorful {
       background-color: var(--figure-prest-color);
@@ -65,3 +67,18 @@
   object-fit: var(--figure-fit);
   object-position: var(--figure-position);
 }
+
+.o-figure-view {
+  cursor: zoom-in;
+}
+
+.o-figure-view-layer {
+  width: 100%;
+  height: 100%;
+  cursor: zoom-out;
+}
+.o-figure-view-figure {
+  width: 100%;
+  height: 100%;
+  --figure-fit: contain;
+}
-- 
Gitee


From 392cc4e8c640d3aa3acac48396dc8367b0dca5fb Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 24 Apr 2023 19:04:16 +0800
Subject: [PATCH 10/14] v33

---
 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 a005522d..4f60c461 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opensig/opendesign",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "main": "lib/index.js",
   "module": "es/index.mjs",
   "types": "es/index.d.ts",
-- 
Gitee


From fa44877f271c8c10d3c917b5b21f20c56de746c8 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 25 Apr 2023 15:54:10 +0800
Subject: [PATCH 11/14] =?UTF-8?q?indicator=E5=A2=9E=E5=8A=A0index?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/components/carousel/OCarousel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/opendesign/src/components/carousel/OCarousel.vue b/packages/opendesign/src/components/carousel/OCarousel.vue
index b9b63c10..93f14b1f 100644
--- a/packages/opendesign/src/components/carousel/OCarousel.vue
+++ b/packages/opendesign/src/components/carousel/OCarousel.vue
@@ -233,7 +233,7 @@ defineExpose({
     </div>
     <div v-if="!props.hideIndicator" class="o-carousel-indicator-wrap" :class="props.indicatorWrapClass">
       <div v-for="(item, idx) in total" :key="item" class="o-carousel-indicator-item" @click="props.indicatorClick && activeSlide(idx)">
-        <slot name="indicator" :active="item - 1 === activeIndex">
+        <slot name="indicator" :active="item - 1 === activeIndex" :index="idx">
           <div
             class="o-carousel-indicator-bar"
             :class="{
-- 
Gitee


From c8a326657e9ce276a5e74f99495c4c8a74338c59 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 25 Apr 2023 15:55:41 +0800
Subject: [PATCH 12/14] v34

---
 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 4f60c461..1ea97089 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opensig/opendesign",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "main": "lib/index.js",
   "module": "es/index.mjs",
   "types": "es/index.d.ts",
-- 
Gitee


From 5a7fff49bb639c8f086866c99cd7f664a6282502 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 25 Apr 2023 23:24:19 +0800
Subject: [PATCH 13/14] =?UTF-8?q?=E6=96=AD=E7=82=B9=E5=A2=9E=E5=8A=A0960?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../opendesign/src/components/flex/OFlex.vue  | 12 ++++++
 .../src/components/flex/OFlexItem.vue         |  4 ++
 .../components/flex/__demo__/FlexBasic.vue    | 14 ++++++-
 .../src/components/flex/style/index.scss      | 28 +++++++++++---
 .../opendesign/src/components/flex/types.ts   | 38 +++++++++++++++----
 5 files changed, 82 insertions(+), 14 deletions(-)

diff --git a/packages/opendesign/src/components/flex/OFlex.vue b/packages/opendesign/src/components/flex/OFlex.vue
index e00ed3b0..6dbb2942 100644
--- a/packages/opendesign/src/components/flex/OFlex.vue
+++ b/packages/opendesign/src/components/flex/OFlex.vue
@@ -25,6 +25,12 @@ const getMediaGap = (opts?: FlexMediaT) => {
 const gap = computed(() => {
   return getMediaGap(props);
 });
+const x3lGap = computed(() => {
+  return getMediaGap(props.x3l);
+});
+const x2lGap = computed(() => {
+  return getMediaGap(props.x2l);
+});
 const xlGap = computed(() => {
   return getMediaGap(props.xl);
 });
@@ -65,6 +71,10 @@ const xsGap = computed(() => {
       '--flex-lg-gap-y': lgGap?.y,
       '--flex-xl-gap-x': xlGap?.x,
       '--flex-xl-gap-y': xlGap?.y,
+      '--flex-x2l-gap-x': x2lGap?.x,
+      '--flex-x2l-gap-y': x2lGap?.y,
+      '--flex-x3l-gap-x': x3lGap?.x,
+      '--flex-x3l-gap-y': x3lGap?.y,
     }"
     :class="{
       'o-flex-xs': !!props.xs,
@@ -72,6 +82,8 @@ const xsGap = computed(() => {
       'o-flex-md': !!props.md,
       'o-flex-lg': !!props.lg,
       'o-flex-xl': !!props.xl,
+      'o-flex-x2l': !!props.x2l,
+      'o-flex-x3l': !!props.x3l,
     }"
   >
     <slot></slot>
diff --git a/packages/opendesign/src/components/flex/OFlexItem.vue b/packages/opendesign/src/components/flex/OFlexItem.vue
index d7c38582..896cf689 100644
--- a/packages/opendesign/src/components/flex/OFlexItem.vue
+++ b/packages/opendesign/src/components/flex/OFlexItem.vue
@@ -14,6 +14,8 @@ const props = defineProps(flexItemProps);
       '--flex-item-md-flex': props.md?.flex,
       '--flex-item-lg-flex': props.lg?.flex,
       '--flex-item-xl-flex': props.xl?.flex,
+      '--flex-item-x2l-flex': props.x2l?.flex,
+      '--flex-item-x3l-flex': props.x3l?.flex,
     }"
     :class="{
       'o-flex-item-xs': !!props.xs,
@@ -21,6 +23,8 @@ const props = defineProps(flexItemProps);
       'o-flex-item-md': !!props.md,
       'o-flex-item-lg': !!props.lg,
       'o-flex-item-xl': !!props.xl,
+      'o-flex-item-x2l': !!props.x2l,
+      'o-flex-item-x3l': !!props.x3l,
     }"
   >
     <slot></slot>
diff --git a/packages/opendesign/src/components/flex/__demo__/FlexBasic.vue b/packages/opendesign/src/components/flex/__demo__/FlexBasic.vue
index 94797a7e..c39f7011 100644
--- a/packages/opendesign/src/components/flex/__demo__/FlexBasic.vue
+++ b/packages/opendesign/src/components/flex/__demo__/FlexBasic.vue
@@ -42,9 +42,19 @@ import { OFlex, OFlexItem } from '../index';
       </OFlexItem>
     </OFlex>
     <br />
-    <OFlex gap-x="16px" gap-y="16px" :xs="{ gap: '4px' }" :sm="{ gap: '8px' }" :md="{ gap: '16px' }" :lg="{ gap: '24px' }" :xl="{ gap: '32px' }">
+    <OFlex
+      gap-x="16px"
+      gap-y="16px"
+      :xs="{ gap: '4px' }"
+      :sm="{ gap: '8px' }"
+      :md="{ gap: '16px' }"
+      :lg="{ gap: '24px' }"
+      :xl="{ gap: '32px' }"
+      :x2l="{ gap: '48px' }"
+      :x3l="{ gap: '64px' }"
+    >
       <OFlexItem v-for="item in 10" :key="item" flex="20%" class="colored">
-        <div class="box">{{ item }}</div>
+        <div class="box">111{{ item }}</div>
       </OFlexItem>
     </OFlex>
     <br />
diff --git a/packages/opendesign/src/components/flex/style/index.scss b/packages/opendesign/src/components/flex/style/index.scss
index 50064341..1c29b156 100644
--- a/packages/opendesign/src/components/flex/style/index.scss
+++ b/packages/opendesign/src/components/flex/style/index.scss
@@ -1,10 +1,11 @@
 @use './var.scss';
 $media-xs: 576px;
 $media-sm: 720px;
-$media-md: 1200px;
-$media-lg: 1440px;
-$media-xl: 1680px;
-$media-xxl: 1920px;
+$media-md: 960px;
+$media-lg: 1200px;
+$media-xl: 1440px;
+$media-x2l: 1680px;
+$media-x3l: 1920px;
 
 .o-flex {
   display: flex;
@@ -28,7 +29,24 @@ $media-xxl: 1920px;
 .o-flex-item {
   flex: var(--flex-item-flex);
 }
-
+@media (max-width: $media-x3l) {
+  .o-flex-xl {
+    --flex-item-gap-x: calc(var(--flex-x3l-gap-x) / 2);
+    --flex-item-gap-y: var(--flex-x3l-gap-y);
+  }
+  .o-flex-item-xl {
+    flex: var(--flex-item-x3l-flex);
+  }
+}
+@media (max-width: $media-x2l) {
+  .o-flex-xl {
+    --flex-item-gap-x: calc(var(--flex-x2l-gap-x) / 2);
+    --flex-item-gap-y: var(--flex-x2l-gap-y);
+  }
+  .o-flex-item-xl {
+    flex: var(--flex-item-x2l-flex);
+  }
+}
 @media (max-width: $media-xl) {
   .o-flex-xl {
     --flex-item-gap-x: calc(var(--flex-xl-gap-x) / 2);
diff --git a/packages/opendesign/src/components/flex/types.ts b/packages/opendesign/src/components/flex/types.ts
index 1bb26417..e748713d 100644
--- a/packages/opendesign/src/components/flex/types.ts
+++ b/packages/opendesign/src/components/flex/types.ts
@@ -71,23 +71,35 @@ export const flexProps = {
     type: Object as PropType<FlexMediaT>,
   },
   /**
-   * @media (max-width: 1200px)
+   * @media (max-width: 960px)
    */
   md: {
     type: Object as PropType<FlexMediaT>,
   },
   /**
-   * @media (max-width: 1440px)
+   * @media (max-width: 1200px)
    */
   lg: {
     type: Object as PropType<FlexMediaT>,
   },
   /**
-   * @media (max-width: 1680px)
+   * @media (max-width: 1440px)
    */
   xl: {
     type: Object as PropType<FlexMediaT>,
   },
+  /**
+   * @media (max-width: 1680px)
+   */
+  x2l: {
+    type: Object as PropType<FlexMediaT>,
+  },
+  /**
+   * @media (max-width: 1920px)
+   */
+  x3l: {
+    type: Object as PropType<FlexMediaT>,
+  },
 };
 
 export const flexItemProps = {
@@ -111,29 +123,41 @@ export const flexItemProps = {
     type: Object as PropType<FlexItemMediaT>,
   },
   /**
-   * @media (max-width: 721px)
+   * @media (max-width: 720px)
    */
   sm: {
     type: Object as PropType<FlexItemMediaT>,
   },
   /**
-   * @media (max-width: 1201px)
+   * @media (max-width: 960px)
    */
   md: {
     type: Object as PropType<FlexItemMediaT>,
   },
   /**
-   * @media (max-width: 1441px)
+   * @media (max-width: 1200px)
    */
   lg: {
     type: Object as PropType<FlexItemMediaT>,
   },
   /**
-   * @media (max-width: 1681px)
+   * @media (max-width: 1440px)
    */
   xl: {
     type: Object as PropType<FlexItemMediaT>,
   },
+  /**
+   * @media (max-width: 1680px)
+   */
+  x2l: {
+    type: Object as PropType<FlexItemMediaT>,
+  },
+  /**
+   * @media (max-width: 1920px)
+   */
+  x3l: {
+    type: Object as PropType<FlexItemMediaT>,
+  },
 };
 
 export type FlexPropsT = ExtractPropTypes<typeof flexProps>;
-- 
Gitee


From db3d43ce4f3ebaef4c9b2c41247a67de54505080 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 25 Apr 2023 23:25:26 +0800
Subject: [PATCH 14/14] v35

---
 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 1ea97089..232cf56d 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opensig/opendesign",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "main": "lib/index.js",
   "module": "es/index.mjs",
   "types": "es/index.d.ts",
-- 
Gitee