diff --git a/.eslintrc.js b/.eslintrc.js
index 6b40df4027e25d491ec4c4f524f3819c91550097..113afb5f541ab27d30c926389e52250aa6d12f25 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -40,7 +40,11 @@ module.exports = {
     'prefer-template': 'error',
     'prefer-spread': 'error',
     'no-var': 'error',
-    'max-lines-per-function': ['error', 100],
+    'max-lines-per-function': ['error', {
+      max: 100,
+      skipComments: true,
+      skipBlankLines: true
+    }],
     complexity: ['warn', 20],
     'max-depth': ['warn', 4],
     'max-len': ['warn', {
diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json
index 038394c8255f34fb734866c2d16e006fac94aee5..24cb1ca243fec7ae65470dc00e932d3205f360e0 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -26,11 +26,15 @@
   },
   "devDependencies": {
     "@opensig/opensig-scripts": "workspace:^0.0.1",
+    "@types/lodash-es": "^4.17.6",
     "typescript": "^4.6.4",
     "vue": "^3.2.41",
     "vue-tsc": "^1.0.13"
   },
   "dependencies": {
-    "@vue/shared": "^3.2.45"
+    "@vue/shared": "^3.2.45",
+    "intersection-observer-polyfill": "^0.1.0",
+    "lodash-es": "^4.17.21",
+    "resize-observer-polyfill": "^1.5.1"
   }
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/components/_shared/dom.ts b/packages/opendesign/src/components/_shared/dom.ts
index 4ecdbd952874bc729c4d81604ece92242352be1a..879a065f0636a417251ba79cdbf67afc8f688622 100644
--- a/packages/opendesign/src/components/_shared/dom.ts
+++ b/packages/opendesign/src/components/_shared/dom.ts
@@ -1,28 +1,53 @@
+export type DirectionT = 'left' | 'right' | 'top' | 'bottom';
+
 export function isElement(el: any) {
   return (typeof HTMLElement === 'object')
     ? (el instanceof HTMLElement)
     : !!(el && typeof el === 'object' && (el.nodeType === 1 || el.nodeType === 9) && typeof el.nodeName === 'string');
 }
 
-export function isRootEl(el: HTMLElement | Window) {
-  return el === window || ['BODY', 'HTML'].includes((el as HTMLElement).tagName);
+export function isDocumentElement(el: HTMLElement | Window) {
+  return el === window || ['HTML'].includes((el as HTMLElement).tagName);
 }
-
+// 获取真实相对父元素  当body没有设置position时，返回html
+export function getOffsetElement(el: HTMLElement) {
+  let offsetEl = el.offsetParent;
+  if (offsetEl && offsetEl.tagName === 'BODY') {
+    const stylePosition = window.getComputedStyle(document.body).getPropertyValue('position');
+    if (stylePosition === 'static') {
+      return document.documentElement;
+    }
+  }
+  return offsetEl;
+}
+// 获取元素scroll值
 export function getScroll(el: HTMLElement | Window = window) {
   if (!el) {
     return {
-      left: 0,
-      top: 0
+      scrollLeft: 0,
+      scrollTop: 0
     };
   }
-  const isroot = isRootEl(el);
+  const isroot = isDocumentElement(el);
   return {
-    left: isroot ? window.scrollX : (el as HTMLElement).scrollLeft,
-    top: isroot ? window.scrollY : (el as HTMLElement).scrollTop,
+    scrollLeft: isroot ? window.scrollX : (el as HTMLElement).scrollLeft,
+    scrollTop: isroot ? window.scrollY : (el as HTMLElement).scrollTop,
   };
 }
-export function getRelativeBounding(el: HTMLElement, c: DOMRect) {
-  const e = el.getBoundingClientRect();
+// 获取元素的可滚动的父元素
+export function getScrollParents(el: HTMLElement) {
+  const parents: Array<HTMLElement> = [];
+  let ele: HTMLElement | null = el;
+  while (ele && ele !== document.documentElement) {
+    const { offsetHeight, offsetWidth, scrollHeight, scrollWidth } = ele;
+    if (offsetHeight < scrollHeight || offsetWidth < scrollWidth) {
+      parents.push(ele);
+    }
+    ele = ele.parentElement;
+  }
+  return parents;
+}
+export function getRelativeBounding(e: DOMRect, c: DOMRect) {
   return {
     top: e.top,
     bottom: e.bottom,
@@ -35,4 +60,35 @@ export function getRelativeBounding(el: HTMLElement, c: DOMRect) {
     offsetRight: e.right - c.left,
     offsetBottom: e.bottom - c.top,
   };
+}
+export type RelativeRect = ReturnType<typeof getRelativeBounding>
+
+export function getElementSize(el: HTMLElement | Window) {
+  return {
+    width: (el as Window).innerWidth || (el as HTMLElement).clientWidth,
+    height: (el as Window).innerHeight || (el as HTMLElement).clientHeight,
+    offsetWidth: (el as Window).innerWidth || (el as HTMLElement).offsetWidth,
+    offsetHeight: (el as Window).innerHeight || (el as HTMLElement).offsetHeight,
+  };
+}
+
+export function getElementBorder(el: HTMLElement, dir?: DirectionT | DirectionT[]) {
+  const style = window.getComputedStyle(el);
+  let d: DirectionT[] = [];
+
+  if (typeof dir === 'string') {
+    d = [dir];
+  } else {
+    d = Array.isArray(dir) ? dir : ['left', 'right', 'bottom', 'top'];
+  }
+  const rlt: {
+    left?: number,
+    right?: number,
+    top?: number,
+    bottom?: number,
+  } = {};
+  d.forEach(k => {
+    rlt[k] = parseFloat(style.getPropertyValue(`border-${k}-width`));
+  });
+  return rlt;
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/components/_shared/global.ts b/packages/opendesign/src/components/_shared/global.ts
index 05782af61103190c990046b7e0b463c2025126bf..e5603c89502cb44ee429b5ed1dcd65eac7d18093 100644
--- a/packages/opendesign/src/components/_shared/global.ts
+++ b/packages/opendesign/src/components/_shared/global.ts
@@ -6,10 +6,11 @@ export enum Size {
   NORMAL = 'normal',
   SMALL = 'small'
 }
+export type SizeT = 'large' | 'normal' | 'small'
 
-export const defaultSize = ref(Size.NORMAL);
+export const defaultSize = ref<SizeT>('normal');
 
-export function initSize(type: Size) {
+export function initSize(type: SizeT) {
   defaultSize.value = type;
 }
 
@@ -18,9 +19,11 @@ export enum Shape {
   ROUND = 'round',
   NORMAL = 'normal'
 }
-export const defaultShape = ref(Shape.NORMAL);
+export type ShapeT = 'round' | 'normal'
 
-export function initShape(shape: Shape) {
+export const defaultShape = ref<ShapeT>('normal');
+
+export function initShape(shape: ShapeT) {
   defaultShape.value = shape;
 }
 
diff --git a/packages/opendesign/src/components/_shared/utils.ts b/packages/opendesign/src/components/_shared/utils.ts
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0759120407e6fc38c666dc4c205679ec479dd955 100644
--- a/packages/opendesign/src/components/_shared/utils.ts
+++ b/packages/opendesign/src/components/_shared/utils.ts
@@ -0,0 +1,50 @@
+import { throttle as _throttle, debounce as _debounce } from 'lodash-es';
+import type { ThrottleSettings, DebounceSettings } from 'lodash-es';
+
+export function isFunction(fn: any) {
+  return typeof fn === 'function';
+}
+// 防抖
+export function debounce<T extends (...args: any) => any>(fn: T, wait?: number, ctx?: any | null, opts?: ThrottleSettings) {
+  return _debounce.apply(ctx, [fn, wait, opts]);
+}
+// 节流
+export function throttle<T extends (...args: any) => any>(fn: T, wait?: number, ctx?: any | null, opts?: DebounceSettings) {
+  return _throttle.apply(ctx, [fn, wait, opts]);
+}
+// 防抖 时间为一个一帧
+export function debounceRAF<T extends (...args: any) => any>(fn: T) {
+  let handle = 0;
+  const rlt = (...args: any[]) => {
+    if (handle) {
+      cancelAnimationFrame(handle);
+    }
+    handle = requestAnimationFrame(() => {
+      fn(...args);
+      handle = 0;
+    });
+  };
+  rlt.cancel = () => {
+    cancelAnimationFrame(handle);
+    handle = 0;
+  };
+  return rlt;
+}
+// 节流 时间为一个一帧
+export function throttleRAF<T extends (...args: any) => any>(fn: T) {
+  let handle = 0;
+  const rlt = (...args: any[]) => {
+    if (handle) {
+      return;
+    }
+    handle = requestAnimationFrame(() => {
+      fn(...args);
+      handle = 0;
+    });
+  };
+  rlt.cancel = () => {
+    cancelAnimationFrame(handle);
+    handle = 0;
+  };
+  return rlt;
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/components/button/OButton.vue b/packages/opendesign/src/components/button/OButton.vue
index cc9f1dd1f52eed702f63fdd101bcd32a877f9613..e5e97e041f85563b64b8a70126a9cc45f57049a6 100644
--- a/packages/opendesign/src/components/button/OButton.vue
+++ b/packages/opendesign/src/components/button/OButton.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { defaultSize, defaultShape } from '../_shared/global';
-import { ButtonSize, ButtonType, ButtonShape } from './types';
+import type { SizeT, ShapeT } from '../_shared/global';
+import { ButtonTypeT } from './types';
 
 interface ButtonPropT {
-  type?: ButtonType;
-  size?: ButtonSize;
-  shape?: ButtonShape;
+  type?: ButtonTypeT;
+  size?: SizeT;
+  shape?: ShapeT;
 }
 const props = withDefaults(defineProps<ButtonPropT>(), {
-  type: ButtonType.OUTLINE,
+  type: 'outline',
   size: defaultSize.value,
   shape: defaultShape.value,
 });
diff --git a/packages/opendesign/src/components/button/__demo__/BtnDisabled.vue b/packages/opendesign/src/components/button/__demo__/BtnDisabled.vue
index c842b400b638726df9ef9009abac69847c017f20..cd607a52cea41efe309f58fb654dc962e926f2e0 100644
--- a/packages/opendesign/src/components/button/__demo__/BtnDisabled.vue
+++ b/packages/opendesign/src/components/button/__demo__/BtnDisabled.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { OButton, ButtonType } from '../index';
+import { OButton } from '../index';
 </script>
 <template>
   <section>
-    <OButton :type="ButtonType.PRIMARY" disabled>Primary Button</OButton>
-    <OButton :type="ButtonType.OUTLINE" disabled>Outline Button</OButton>
-    <OButton :type="ButtonType.TEXT" disabled>Text Button</OButton>
-    <OButton :type="ButtonType.LINK" disabled>Link Button</OButton>
+    <OButton type="primary" disabled>Primary Button</OButton>
+    <OButton type="outline" disabled>Outline Button</OButton>
+    <OButton type="text" disabled>Text Button</OButton>
+    <OButton type="link" disabled>Link Button</OButton>
   </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/button/__demo__/BtnIcon.vue b/packages/opendesign/src/components/button/__demo__/BtnIcon.vue
index c56dce8ab1916d597034789357bd4d06df3147a5..120a943ece38e547fd741843f1b25ea71ab4da5b 100644
--- a/packages/opendesign/src/components/button/__demo__/BtnIcon.vue
+++ b/packages/opendesign/src/components/button/__demo__/BtnIcon.vue
@@ -1,44 +1,44 @@
 <script setup lang="ts">
-import { OButton, ButtonType, ButtonSize, ButtonShape } from '../index';
+import { OButton } from '../index';
 import { IconAdd } from '../../icons';
 </script>
 <template>
   <section>
-    <OButton :type="ButtonType.PRIMARY" :size="ButtonSize.LARGE">
+    <OButton type="primary" size="large">
       <template #icon><IconAdd /></template>Primary Button
     </OButton>
-    <OButton :type="ButtonType.PRIMARY">
+    <OButton type="primary">
       <template #icon><IconAdd /></template>Primary Button
     </OButton>
-    <OButton :type="ButtonType.PRIMARY" :size="ButtonSize.SMALL">
+    <OButton type="primary" size="small">
       <template #icon><IconAdd /></template>Primary Button
     </OButton>
-    <OButton :type="ButtonType.OUTLINE" :size="ButtonSize.LARGE">
+    <OButton type="outline" size="large">
       Outline Button<template #icon><IconAdd /></template>
     </OButton>
-    <OButton :type="ButtonType.OUTLINE">
+    <OButton type="outline">
       Outline Button<template #icon><IconAdd /></template>
     </OButton>
-    <OButton :type="ButtonType.OUTLINE" :size="ButtonSize.SMALL">
+    <OButton type="outline" size="small">
       Outline Button<template #icon><IconAdd /></template>
     </OButton>
-    <OButton :type="ButtonType.PRIMARY" :size="ButtonSize.LARGE">
+    <OButton type="primary" size="large">
       <template #icon><IconAdd /></template>
     </OButton>
-    <OButton :type="ButtonType.OUTLINE">
+    <OButton type="outline">
       <template #icon><IconAdd /></template>
     </OButton>
-    <OButton :type="ButtonType.OUTLINE" :size="ButtonSize.SMALL">
+    <OButton type="outline" size="small">
       <template #icon><IconAdd /></template>
     </OButton>
 
-    <OButton :type="ButtonType.PRIMARY" :size="ButtonSize.LARGE" :shape="ButtonShape.ROUND">
+    <OButton type="primary" size="large" shape="round">
       <template #icon><IconAdd /></template>
     </OButton>
-    <OButton :type="ButtonType.OUTLINE" :shape="ButtonShape.ROUND">
+    <OButton type="outline" shape="round">
       <template #icon><IconAdd /></template>
     </OButton>
-    <OButton :type="ButtonType.OUTLINE" :size="ButtonSize.SMALL" :shape="ButtonShape.ROUND">
+    <OButton type="outline" size="small" shape="round">
       <template #icon><IconAdd /></template>
     </OButton>
   </section>
diff --git a/packages/opendesign/src/components/button/__demo__/BtnShape.vue b/packages/opendesign/src/components/button/__demo__/BtnShape.vue
index d72c066f365ad8fa96b00fbb960f8f934e0276c2..74d2fa40f6589b870e5eb46112978e606b2c8d76 100644
--- a/packages/opendesign/src/components/button/__demo__/BtnShape.vue
+++ b/packages/opendesign/src/components/button/__demo__/BtnShape.vue
@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import { OButton, ButtonType, ButtonSize, ButtonShape } from '../index';
+import { OButton } from '../index';
 import { IconAdd } from '../../icons';
 </script>
 <template>
   <section>
-    <OButton :type="ButtonType.PRIMARY" :size="ButtonSize.LARGE" :shape="ButtonShape.ROUND">
+    <OButton type="primary" size="large" shape="round">
       <template #icon><IconAdd /></template>
     </OButton>
-    <OButton :type="ButtonType.OUTLINE" :shape="ButtonShape.ROUND">
+    <OButton type="outline" shape="round">
       <template #icon><IconAdd /></template>
     </OButton>
-    <OButton :type="ButtonType.OUTLINE" :size="ButtonSize.SMALL" :shape="ButtonShape.ROUND">
+    <OButton type="outline" size="small" shape="round">
       <template #icon><IconAdd /></template>
     </OButton>
 
-    <OButton :type="ButtonType.PRIMARY" :size="ButtonSize.LARGE" :shape="ButtonShape.ROUND">
+    <OButton type="primary" size="large" shape="round">
       <template #icon><IconAdd /></template>Round Button
     </OButton>
-    <OButton :type="ButtonType.OUTLINE" :shape="ButtonShape.ROUND">
+    <OButton type="outline" shape="round">
       <template #icon><IconAdd /></template>Round Button
     </OButton>
-    <OButton :type="ButtonType.OUTLINE" :size="ButtonSize.SMALL" :shape="ButtonShape.ROUND">
+    <OButton type="outline" size="small" shape="round">
       <template #icon><IconAdd /></template>Round Button
     </OButton>
   </section>
diff --git a/packages/opendesign/src/components/button/__demo__/BtnSize.vue b/packages/opendesign/src/components/button/__demo__/BtnSize.vue
index da1a553f958e4b1a917e3cb1c8fe0ceb07a3752b..694701ed888102cbabce6c8023781182ad752765 100644
--- a/packages/opendesign/src/components/button/__demo__/BtnSize.vue
+++ b/packages/opendesign/src/components/button/__demo__/BtnSize.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { OButton, ButtonType, ButtonSize } from '../index';
+import { OButton } from '../index';
 </script>
 <template>
   <section>
-    <OButton :type="ButtonType.PRIMARY" :size="ButtonSize.LARGE"> Large Button </OButton>
-    <OButton :type="ButtonType.PRIMARY" :size="ButtonSize.NORMAL"> Normal Button </OButton>
-    <OButton :type="ButtonType.PRIMARY" :size="ButtonSize.SMALL"> Small Button </OButton>
+    <OButton type="primary" size="large"> Large Button </OButton>
+    <OButton type="primary" size="normal"> Normal Button </OButton>
+    <OButton type="primary" size="small"> Small Button </OButton>
   </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/button/__demo__/BtnType.vue b/packages/opendesign/src/components/button/__demo__/BtnType.vue
index 0e81e3503855b2f0ac4ba719fcbef45c38691152..fd47e1efcd2dca330a62367cf3aa2b42d9050584 100644
--- a/packages/opendesign/src/components/button/__demo__/BtnType.vue
+++ b/packages/opendesign/src/components/button/__demo__/BtnType.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { OButton, ButtonType } from '../index';
+import { OButton } from '../index';
 </script>
 <template>
   <section>
-    <OButton :type="ButtonType.PRIMARY">Primary Button</OButton>
-    <OButton :type="ButtonType.OUTLINE">Outline Button</OButton>
-    <OButton :type="ButtonType.TEXT">Text Button</OButton>
-    <OButton :type="ButtonType.LINK">Link Button</OButton>
+    <OButton type="primary">Primary Button</OButton>
+    <OButton type="outline">Outline Button</OButton>
+    <OButton type="text">Text Button</OButton>
+    <OButton type="link">Link Button</OButton>
   </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/button/types.ts b/packages/opendesign/src/components/button/types.ts
index e885ef920ad362afa49e64afbfb29c54f8805528..4850609928c4d4be3545bf950735a584f54d494e 100644
--- a/packages/opendesign/src/components/button/types.ts
+++ b/packages/opendesign/src/components/button/types.ts
@@ -1,10 +1 @@
-import { Size as ButtonSize, Shape as ButtonShape } from '../_shared/global';
-
-export { ButtonSize, ButtonShape };
-
-export enum ButtonType {
-  PRIMARY = 'primary',
-  OUTLINE = 'outline',
-  TEXT = 'text',
-  LINK = 'link',
-}
+export type ButtonTypeT = 'primary' | 'outline' | 'text' | 'link'
\ No newline at end of file
diff --git a/packages/opendesign/src/components/directves/click-outside.ts b/packages/opendesign/src/components/directves/click-outside.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d379d17617be1dd9b1d8a6d2970e4ed8257be04b
--- /dev/null
+++ b/packages/opendesign/src/components/directves/click-outside.ts
@@ -0,0 +1,17 @@
+import { ObjectDirective, DirectiveBinding } from 'vue';
+import { useOutClick } from '../hooks/use-out-click';
+
+const { addOutClickListener, removeOutClickListener } = useOutClick();
+
+const vOutClick: ObjectDirective = {
+  beforeMount(el: HTMLElement, binding: DirectiveBinding) {
+    addOutClickListener(el, binding.value);
+  },
+  unmounted(el: HTMLElement) {
+    removeOutClickListener(el);
+  }
+};
+
+export {
+  vOutClick
+};
\ No newline at end of file
diff --git a/packages/opendesign/src/components/directves/focus.ts b/packages/opendesign/src/components/directves/focus.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4e8d9773dd52805c1b4b5d9bbaad7e2823a9e841
--- /dev/null
+++ b/packages/opendesign/src/components/directves/focus.ts
@@ -0,0 +1,11 @@
+import { ObjectDirective } from 'vue';
+
+const vFocus: ObjectDirective = {
+  mounted(el: HTMLElement) {
+    el.focus();
+  }
+};
+
+export {
+  vFocus
+};
\ No newline at end of file
diff --git a/packages/opendesign/src/components/directves/index.ts b/packages/opendesign/src/components/directves/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c6ac1fa88f01eb12ef6787fc67b60a30990e442b
--- /dev/null
+++ b/packages/opendesign/src/components/directves/index.ts
@@ -0,0 +1,2 @@
+export * from './click-outside';
+export * from './focus';
\ No newline at end of file
diff --git a/packages/opendesign/src/components/directves/on-intersection.ts b/packages/opendesign/src/components/directves/on-intersection.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9a3d76bbbf92eb2fe2e266a67258acd6b9eb82db
--- /dev/null
+++ b/packages/opendesign/src/components/directves/on-intersection.ts
@@ -0,0 +1,24 @@
+import { DirectiveBinding, ObjectDirective } from 'vue';
+import { useIntersectionObserver, IntersectionListenerT } from '../hooks';
+import { isFunction } from '../_shared/utils';
+
+const io = useIntersectionObserver();
+let listener: IntersectionListenerT = () => null;
+
+const vIntersection: ObjectDirective = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    if (isFunction(binding.value)) {
+      listener = binding.value;
+      io.addIntersectionListener(el, listener);
+    }
+  },
+  unmounted(el: HTMLElement) {
+    if (listener) {
+      io.removeIntersectionListener(el, listener);
+    }
+  },
+};
+
+export {
+  vIntersection
+};
\ No newline at end of file
diff --git a/packages/opendesign/src/components/directves/on-resize.ts b/packages/opendesign/src/components/directves/on-resize.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8660666605bc03c4ee13c4d1c6c7f485ff7500f2
--- /dev/null
+++ b/packages/opendesign/src/components/directves/on-resize.ts
@@ -0,0 +1,24 @@
+import { DirectiveBinding, ObjectDirective } from 'vue';
+import { useResizeObserver, ResizeListenerT } from '../hooks';
+import { isFunction } from '../_shared/utils';
+
+const ob = useResizeObserver();
+let listener: ResizeListenerT = () => null;
+
+const vOnResize: ObjectDirective = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    if (isFunction(binding.value)) {
+      listener = binding.value;
+      ob.addResizeListener(el, listener);
+    }
+  },
+  unmounted(el: HTMLElement) {
+    if (listener) {
+      ob.removeResizeListener(el, listener);
+    }
+  },
+};
+
+export {
+  vOnResize
+};
\ No newline at end of file
diff --git a/packages/opendesign/src/components/hooks/index.ts b/packages/opendesign/src/components/hooks/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..27f2a3f5522fb8c70f0c3263ed21cea264ff87fa
--- /dev/null
+++ b/packages/opendesign/src/components/hooks/index.ts
@@ -0,0 +1,5 @@
+export * from './use-resize-observer';
+export * from './use-intersection-observer';
+export * from './use-element';
+export * from './use-element-resize';
+export * from './use-element-intersection';
diff --git a/packages/opendesign/src/components/hooks/use-element-intersection.ts b/packages/opendesign/src/components/hooks/use-element-intersection.ts
new file mode 100644
index 0000000000000000000000000000000000000000..01a3e4c20782ed394cdffc326046e8d3af35ef7d
--- /dev/null
+++ b/packages/opendesign/src/components/hooks/use-element-intersection.ts
@@ -0,0 +1,25 @@
+import { ObjectDirective } from 'vue';
+import { useIntersectionObserver } from './use-intersection-observer';
+import type { IntersectionListenerT } from './use-intersection-observer';
+import { isFunction } from '../_shared/utils';
+
+const io = useIntersectionObserver();
+export function useIntersectionObserverDirective({ listener, removeOnUnmounted }: {
+  listener: IntersectionListenerT,
+  removeOnUnmounted?: boolean
+}): { vIntersectionObserver: ObjectDirective } {
+  return {
+    vIntersectionObserver: {
+      mounted(el: HTMLElement) {
+        if (isFunction(listener)) {
+          io.addIntersectionListener(el, listener);
+        }
+      },
+      unmounted(el: HTMLElement) {
+        if (listener && removeOnUnmounted) {
+          io.removeIntersectionListener(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
new file mode 100644
index 0000000000000000000000000000000000000000..4ea412162da3e790a5c0962584e6413d533478f8
--- /dev/null
+++ b/packages/opendesign/src/components/hooks/use-element-resize.ts
@@ -0,0 +1,22 @@
+import { ObjectDirective } from 'vue';
+import { useResizeObserver } from './use-resize-observer';
+import type { ResizeListenerT } from './use-resize-observer';
+import { isFunction } from '../_shared/utils';
+
+const ob = useResizeObserver();
+export function useReiszeObserverDirective(onResize: ResizeListenerT): { vResizeObserver: ObjectDirective } {
+  return {
+    vResizeObserver: {
+      mounted(el: HTMLElement) {
+        if (isFunction(onResize)) {
+          ob.addResizeListener(el, onResize);
+        }
+      },
+      unmounted(el: HTMLElement) {
+        if (onResize) {
+          ob.removeResizeListener(el, onResize);
+        }
+      },
+    }
+  };
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/components/hooks/use-element.ts b/packages/opendesign/src/components/hooks/use-element.ts
new file mode 100644
index 0000000000000000000000000000000000000000..21a222ecd301cd71d97d00d3e78194dde1e5dcdf
--- /dev/null
+++ b/packages/opendesign/src/components/hooks/use-element.ts
@@ -0,0 +1,20 @@
+import { ObjectDirective } from 'vue';
+
+export type LifeCycleT = 'mounted' | 'updated' | 'unmounted'
+
+export function useElementDirective(onElementChange: (el: HTMLElement | null, type: LifeCycleT) => void) {
+  const directive: ObjectDirective = {
+    mounted(el: HTMLElement) {
+      onElementChange(el, 'mounted');
+    },
+    updated(el: HTMLElement) {
+      onElementChange(el, 'updated');
+    },
+    unmounted() {
+      onElementChange(null, 'unmounted');
+    }
+  };
+  return {
+    getElementDirective: directive
+  };
+}
\ 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
new file mode 100644
index 0000000000000000000000000000000000000000..6f171276d550a1804eb245d5aada677a39879e9b
--- /dev/null
+++ b/packages/opendesign/src/components/hooks/use-intersection-observer.ts
@@ -0,0 +1,102 @@
+import IntersectionObserver from 'intersection-observer-polyfill';
+import { isFunction } from '../_shared/utils';
+
+export type IntersectionListenerT = (entry: IntersectionObserverEntry) => void;
+/**
+ * 监听元素尺寸变化，
+ * ele: 监听元素；
+ * onResize: resize回调（entry: 尺寸变化元素，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 instance = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
+    entries.forEach((entry) => {
+      const ele = entry.target as HTMLElement;
+      const ins = observerPool.get(ele);
+
+      if (!ins) {
+        return;
+      }
+
+      ins?.callbacks?.forEach(fn => fn(entry));
+    });
+  });
+
+  return {
+    /**
+     * 监听实例
+     */
+    observer: instance,
+    /**
+     * 创建监听实例
+     * ele: 监听元素
+     * listener: resize回调, 移除监听时需要指定该监听函数
+     * isFirst: 是否为初次监听时的回调
+     */
+    addIntersectionListener: (ele?: HTMLElement, listener?: IntersectionListenerT) => {
+      el = ele || element;
+      cb = listener || cb;
+
+      if (!el || !cb || !isFunction(cb)) {
+        return null;
+      }
+
+      // 同一元素，只创建一次ResizeObserver，通过数组存储回调
+      const val = observerPool.get(el);
+      if (val) {
+        val.callbacks.push(cb);
+      } else {
+        instance.observe(el);
+
+        observerPool.set(el, {
+          element: el,
+          callbacks: [cb],
+        });
+      }
+
+      return instance;
+    },
+    /**
+     * 移除监听
+     * listener: 要移除的监听函数，如果不传，则使用初始化时的回调
+     */
+    removeIntersectionListener: (ele?: HTMLElement, listener?: IntersectionListenerT) => {
+      let fn = listener || cb;
+      el = ele || element;
+
+      if (!el || !fn) {
+        return;
+      }
+
+      const val = observerPool.get(el);
+
+      if (val) {
+        const idx = val.callbacks.indexOf(fn);
+        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
new file mode 100644
index 0000000000000000000000000000000000000000..90f5d99129553ab0f7f5e043d5678364da718fc7
--- /dev/null
+++ b/packages/opendesign/src/components/hooks/use-out-click.ts
@@ -0,0 +1,54 @@
+interface handlerItemT {
+  handler: () => void,
+  exception?: (e: MouseEvent) => boolean
+}
+
+const elList = new Map<HTMLElement, Array<handlerItemT>>();
+
+window.addEventListener('mousedown', (e) => {
+  elList.forEach((handlers, el) => {
+    if (!el.contains(e.target as HTMLElement)) {
+      handlers.forEach(item => {
+        if (!item.exception || !item.exception(e)) {
+          item.handler();
+        }
+      });
+    }
+  });
+});
+
+function addOutClickListener(el: HTMLElement, fn: () => void, exception?: (e: MouseEvent) => boolean) {
+  if (!elList.has(el)) {
+    elList.set(el, []);
+  }
+
+  const handlers = elList.get(el);
+  if (handlers) {
+    handlers.push({
+      handler: fn,
+      exception: exception
+    });
+  }
+}
+
+function removeOutClickListener(el: HTMLElement, listener?: () => void) {
+  if (listener) {
+    const handlers = elList.get(el);
+    if (!handlers) {
+      return;
+    }
+    const idx = handlers.findIndex(item => item.handler === listener);
+    if (idx > -1) {
+      handlers.splice(idx, 1);
+    }
+  } else {
+    elList.delete(el);
+  }
+}
+
+export function useOutClick() {
+  return {
+    addOutClickListener,
+    removeOutClickListener,
+  };
+}
\ 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
new file mode 100644
index 0000000000000000000000000000000000000000..cb1e7db9ed852604dd541e8033a734a785d4e47f
--- /dev/null
+++ b/packages/opendesign/src/components/hooks/use-resize-observer.ts
@@ -0,0 +1,108 @@
+import ResizeObserver from 'resize-observer-polyfill';
+import { isFunction } from '../_shared/utils';
+
+export type ResizeListenerT = (entry: ResizeObserverEntry, isFirst: boolean) => void;
+/**
+ * 监听元素尺寸变化，
+ * ele: 监听元素；
+ * onResize: resize回调（entry: 尺寸变化元素，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 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));
+
+      if (ins.isFirst) {
+        ins.isFirst = false;
+      }
+    });
+  });
+
+  return {
+    /**
+     * 监听实例
+     */
+    observer: instance,
+    /**
+     * 创建监听实例
+     * ele: 监听元素
+     * listener: resize回调, 移除监听时需要指定该监听函数
+     * isFirst: 是否为初次监听时的回调
+     */
+    addResizeListener: (ele?: HTMLElement, listener?: ResizeListenerT) => {
+      el = ele || element;
+      cb = listener || onResize;
+
+      if (!el || !cb || !isFunction(cb)) {
+        return null;
+      }
+
+      // 同一元素，只创建一次ResizeObserver，通过数组存储回调
+      const val = observerPool.get(el);
+      if (val) {
+        val.callbacks.push(cb);
+      } else {
+        instance.observe(el);
+
+        observerPool.set(el, {
+          element: el,
+          callbacks: [cb],
+          isFirst: true
+        });
+      }
+
+      return instance;
+    },
+    /**
+     * 移除监听
+     * listener: 要移除的监听函数，如果不传，则使用初始化时的onResize回调
+     */
+    removeResizeListener: (ele?: HTMLElement, listener?: ResizeListenerT) => {
+
+      let fn = listener || cb;
+      el = ele || element;
+
+      if (!el || !fn) {
+        return;
+      }
+
+      const val = observerPool.get(el);
+
+      if (val) {
+        const idx = val.callbacks.indexOf(fn);
+        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/index.ts b/packages/opendesign/src/components/index.ts
index fa18239882fe2850987cc17773c5a834865c448c..2fecc76c28715d4bd7c048a22fa3d644eba389dc 100644
--- a/packages/opendesign/src/components/index.ts
+++ b/packages/opendesign/src/components/index.ts
@@ -1,5 +1,7 @@
 export * from './_shared/global';
 
+export * from './hooks';
+
 export * from './button';
 
 export * from './switch';
diff --git a/packages/opendesign/src/components/intersection-observer/__demo__/IntersectionObserverDemo.vue b/packages/opendesign/src/components/intersection-observer/__demo__/IntersectionObserverDemo.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fb3082fb1a4cdc7810d1b490172673673893cbc0
--- /dev/null
+++ b/packages/opendesign/src/components/intersection-observer/__demo__/IntersectionObserverDemo.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { IntersectionObserver } from '../index';
+import { OButton } from '../../button';
+import '../../button/style';
+
+const content = ref('');
+
+const rlt = reactive({
+  visible1: true,
+  visible2: true,
+});
+const onIntersection = (isEnter: boolean, en: IntersectionObserverEntry) => {
+  if (isEnter) {
+    content.value = en.target.innerHTML;
+  } else {
+    content.value = '';
+  }
+};
+
+const toggle = (key: 'visible1' | 'visible2') => {
+  rlt[key] = !rlt[key];
+};
+</script>
+<template>
+  <h4>resize observer</h4>
+
+  <div class="tip" @click="toggle('visible2')">enter into view: {{ content }}</div>
+  <div class="wrap">
+    <IntersectionObserver @intersection="(isEnter:boolean, en) => onIntersection(isEnter, en)">
+      <div v-if="rlt.visible1" class="content" :name="content">first row</div>
+      <p v-else class="content">changed: first row</p>
+      <div @click="toggle('visible1')">toggle</div>
+    </IntersectionObserver>
+    <IntersectionObserver @intersection="(isEnter:boolean, en) => onIntersection(isEnter, en)">
+      <OButton v-if="rlt.visible2" @click="toggle('visible2')"> toggle btn</OButton>
+    </IntersectionObserver>
+  </div>
+</template>
+<style lang="scss" scoped>
+.content {
+  display: inline-block;
+}
+.tip {
+  position: sticky;
+  top: 100px;
+  margin: 16px 0 32px;
+}
+.wrap {
+  height: 200vh;
+  margin-top: 100vh;
+}
+</style>
diff --git a/packages/opendesign/src/components/intersection-observer/index.ts b/packages/opendesign/src/components/intersection-observer/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..091e3ee63a8dbf73ec47162e0f851d33a165f260
--- /dev/null
+++ b/packages/opendesign/src/components/intersection-observer/index.ts
@@ -0,0 +1 @@
+export { default as IntersectionObserver } from './intersection-observer';
\ No newline at end of file
diff --git a/packages/opendesign/src/components/intersection-observer/intersection-observer.ts b/packages/opendesign/src/components/intersection-observer/intersection-observer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a63b5e0e69c99057c122d75eee287d6bde32f1f0
--- /dev/null
+++ b/packages/opendesign/src/components/intersection-observer/intersection-observer.ts
@@ -0,0 +1,25 @@
+import { defineComponent, cloneVNode, withDirectives } from 'vue';
+import { useIntersectionObserverDirective } from '../hooks';
+
+/**
+ * 子元素resize监听
+ * 如果有多个子元素，每个子元素都会被监听到
+ */
+export default defineComponent({
+  name: 'ResizeObserver',
+  emits: ['intersection'],
+  setup(props, { emit, slots }) {
+    const { vIntersectionObserver } = useIntersectionObserverDirective({
+      listener: (entry: IntersectionObserverEntry) => {
+        // 触发resize事件
+        emit('intersection', entry.isIntersecting, entry);
+      },
+      removeOnUnmounted: false
+    });
+
+    return () => {
+      const children = slots.default?.();
+      return children?.map((item) => withDirectives(cloneVNode(item), [[vIntersectionObserver]]));
+    };
+  },
+});
diff --git a/packages/opendesign/src/components/option/OOption.vue b/packages/opendesign/src/components/option/OOption.vue
new file mode 100644
index 0000000000000000000000000000000000000000..83d4a0bc85fe6275dc320b7a3d07234624e1cb48
--- /dev/null
+++ b/packages/opendesign/src/components/option/OOption.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { inject } from 'vue';
+import { OptionProvideKey } from '../_shared/global';
+import type { OptionValueT } from '../_shared/global';
+
+interface OptionPropT {
+  label?: string;
+  value: string | number;
+  disabled?: boolean;
+}
+const props = withDefaults(defineProps<OptionPropT>(), {
+  value: '',
+  label: '',
+});
+
+const val = inject(`${OptionProvideKey}/value`);
+const updateFn = inject(`${OptionProvideKey}/update`) as (val: OptionValueT, emit?: boolean) => void;
+
+if (props.value === val) {
+  updateFn({
+    label: props.label || `${props.value}`,
+    value: props.value,
+  });
+}
+
+const clickOption = () => {
+  if (!props.disabled) {
+    updateFn(
+      {
+        label: props.label || `${props.value}`,
+        value: props.value,
+      },
+      true
+    );
+  }
+};
+</script>
+<template>
+  <div class="o-option" :class="{ active: val === props.value, 'is-disabled': props.disabled }" @click="clickOption">
+    <slot>{{ props.label || `${props.value}` }}</slot>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/option/index.ts b/packages/opendesign/src/components/option/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..34f7ead8a725b9def30f7da48a88433b2e960522
--- /dev/null
+++ b/packages/opendesign/src/components/option/index.ts
@@ -0,0 +1,14 @@
+import _OOption from './OOption.vue';
+import type { App } from 'vue';
+
+// export * from './types';
+
+const OOption = Object.assign(_OOption, {
+  install(app: App) {
+    app.component(_OOption.name, _OOption);
+  },
+});
+
+export {
+  OOption,
+};
diff --git a/packages/opendesign/src/components/option/style/index.scss b/packages/opendesign/src/components/option/style/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b40e5d9961594db8a57d08b2a056b78e074dceff
--- /dev/null
+++ b/packages/opendesign/src/components/option/style/index.scss
@@ -0,0 +1,33 @@
+@import './var.scss';
+
+.o-option {
+  cursor: pointer;
+  padding: var(--option-padding);
+  background-color: var(--option-bg);
+
+  font-size: var(--option-text-size);
+  line-height: var(--option-text-height);
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    background-color: var(--option-bg_hover);
+    color: var(--option-color_hover);
+  }
+  &.active {
+    color: var(--option-color_active);
+    background-color: var(--option-bg_active);
+  }
+  &.is-disabled {
+    cursor: not-allowed;
+    color: var(--option-color_disabled);
+    background-color: var(--option-bg_disabled);
+  }
+}
+.o-options-size-small {
+  .o-option {
+    padding: var(--option-padding-s);
+    font-size: var(--option-text-size_small);
+    line-height: var(--option-text-height_small);
+  }
+}
diff --git a/packages/opendesign/src/components/option/style/index.ts b/packages/opendesign/src/components/option/style/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..67aac616fc2524b146b7b078fd3b67c1bd3b4a6e
--- /dev/null
+++ b/packages/opendesign/src/components/option/style/index.ts
@@ -0,0 +1 @@
+import './index.scss';
diff --git a/packages/opendesign/src/components/option/style/var.scss b/packages/opendesign/src/components/option/style/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..71db472adc8576454c88593b98792b9ee598232a
--- /dev/null
+++ b/packages/opendesign/src/components/option/style/var.scss
@@ -0,0 +1,20 @@
+.o-option {
+  --option-color: var(--o-color-text2);
+  --option-color_hover: var(--o-color-text2_inverse);
+  --option-color_active: var(--o-color-text2_inverse);
+  --option-color_disabled: var(--o-color-text4);
+
+  --option-bg: transparent;
+  --option-bg_hover: var(--o-color-primary3);
+  --option-bg_active: var(--o-color-primary2);
+  --option-bg_disabled: transparent;
+
+  --option-text-size: var(--o-font_size-text);
+  --option-text-height: var(--o-line_height-text);
+
+  --option-text-size_small: var(--o-font_size-tip1);
+  --option-text-height_small: var(--o-line_height-tip1);
+
+  --option-padding: 5px 16px;
+  --option-padding-s: 3px 8px;
+}
diff --git a/packages/opendesign/src/components/option/types.ts b/packages/opendesign/src/components/option/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/components/popover/OPopover.vue b/packages/opendesign/src/components/popover/OPopover.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7a249cc0a5ff1e2a3fba97e896e1f3fa0745828e
--- /dev/null
+++ b/packages/opendesign/src/components/popover/OPopover.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { PropType, ComponentPublicInstance } from 'vue';
+import { OPopup, PopupPositionT, PopupTriggerT } from '../popup';
+
+const props = defineProps({
+  /**
+   * 弹出位置
+   */
+  position: {
+    type: String as PropType<PopupPositionT>,
+    default: 'top',
+  },
+  /**
+   * 触发事件
+   * 'hover','click','focus','contextMenu'
+   */
+  trigger: {
+    type: [String, Array<String>] as PropType<PopupTriggerT | PopupTriggerT[]>,
+    default: 'hover',
+  },
+  /**
+   * 触发元素或组件
+   */
+  target: {
+    type: [String, Object] as PropType<string | ComponentPublicInstance | HTMLElement | null>,
+    default: null,
+    require: true,
+  },
+  /**
+   * 是否可见
+   * v-model
+   */
+  visible: {
+    type: Boolean,
+  },
+  /**
+   * 挂载容器，默认为body
+   */
+  wrapper: {
+    type: [String, Object] as PropType<string | HTMLElement>,
+    default: document.body,
+  },
+  unmountOnClose: {
+    type: Boolean,
+    default: true,
+  },
+  offset: {
+    type: Number,
+    default: 8,
+  },
+});
+
+const emits = defineEmits<{ (e: 'update:visible', val: boolean): void }>();
+const updateVisible = (val: boolean) => {
+  emits('update:visible', val);
+};
+</script>
+<template>
+  <OPopup
+    class="o-popover"
+    :offset="props.offset"
+    :visible="props.visible"
+    :position="props.position"
+    :trigger="props.trigger"
+    :target="props.target"
+    :wrapper="props.wrapper"
+    anchor-class="o-popover-anchor"
+    :unmount-on-close="props.unmountOnClose"
+    @update:visible="updateVisible"
+  >
+    <div class="o-popover-wrap">
+      <slot></slot>
+    </div>
+  </OPopup>
+</template>
diff --git a/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue b/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1756d6c9a015157512b1fc72e11cddf58033a02d
--- /dev/null
+++ b/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OButton } from '../../button';
+import '../../button/style';
+import { OPopover } from '../index';
+
+const content = 'this is popup content';
+const btn1 = ref(null);
+const btn2 = ref(null);
+const btn3 = ref(null);
+const btn4 = ref(null);
+const btn5 = ref(null);
+const btn6 = ref(null);
+const btn7 = ref(null);
+const btn8 = ref(null);
+const btn9 = ref(null);
+const btn10 = ref(null);
+const btn11 = ref(null);
+const btn12 = ref(null);
+</script>
+<template>
+  <h4>popup position</h4>
+  <div class="position-wrap">
+    <div class="top">
+      <OButton ref="btn1"> TL </OButton>
+      <OPopover position="tl" :target="btn1" trigger="click">
+        <div class="box">TL {{ content }}</div>
+      </OPopover>
+      <OButton ref="btn2"> TOP </OButton>
+      <OPopover position="top" :target="btn2">
+        <div class="box">T {{ content }}</div>
+      </OPopover>
+      <OButton ref="btn3">TR</OButton>
+      <OPopover position="tr" :target="btn3">
+        <div class="box">TR {{ content }}</div>
+      </OPopover>
+    </div>
+    <div class="middle">
+      <div class="left">
+        <OButton ref="btn4"> LT </OButton>
+        <OPopover position="lt" :target="btn4" trigger="click">
+          <div class="box">LT {{ content }}</div>
+        </OPopover>
+        <OButton ref="btn5"> LEFT </OButton>
+        <OPopover position="left" :target="btn5">
+          <div class="box">L {{ content }}</div>
+        </OPopover>
+        <OButton ref="btn6"> LB </OButton>
+        <OPopover position="lb" :target="btn6">
+          <div class="box">LB {{ content }}</div>
+        </OPopover>
+      </div>
+      <div class="right">
+        <OButton ref="btn7"> RT </OButton>
+        <OPopover position="rt" :target="btn7" trigger="click">
+          <div class="box">R {{ content }}</div>
+        </OPopover>
+        <OButton ref="btn8"> RIGHT </OButton>
+        <OPopover position="right" :target="btn8">
+          <div class="box">R {{ content }}</div>
+        </OPopover>
+        <OButton ref="btn9"> RB </OButton>
+        <OPopover position="rb" :target="btn9">
+          <div class="box">RB {{ content }}</div>
+        </OPopover>
+      </div>
+    </div>
+    <div class="bottom">
+      <OButton ref="btn10"> BL </OButton>
+      <OPopover position="bl" :target="btn10" trigger="click">
+        <div class="box">BL {{ content }}</div>
+      </OPopover>
+      <OButton ref="btn11"> BOTTOM </OButton>
+      <OPopover position="bottom" :target="btn11">
+        <div class="box">B {{ content }}</div>
+      </OPopover>
+      <OButton ref="btn12"> BR </OButton>
+      <OPopover position="br" :target="btn12">
+        <div class="box">BR {{ content }}</div>
+      </OPopover>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.position-wrap {
+  padding: 100px;
+  height: 50vh;
+  overflow: auto;
+  border: 1px solid #333;
+}
+.box {
+  padding: 12px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+}
+.top {
+  display: flex;
+  justify-content: space-between;
+}
+.left > * {
+  display: block;
+  margin: 100px;
+}
+.middle {
+  display: flex;
+  justify-content: space-between;
+}
+.right > * {
+  display: block;
+  margin: 100px;
+}
+.bottom {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
diff --git a/packages/opendesign/src/components/popover/index.ts b/packages/opendesign/src/components/popover/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f9475923a5666cc65b80c8fae4fc84c8c341afef
--- /dev/null
+++ b/packages/opendesign/src/components/popover/index.ts
@@ -0,0 +1,12 @@
+import _OPopover from './OPopover.vue';
+import type { App } from 'vue';
+
+const OPopover = Object.assign(_OPopover, {
+  install(app: App) {
+    app.component(_OPopover.name, _OPopover);
+  },
+});
+
+export {
+  OPopover,
+};
diff --git a/packages/opendesign/src/components/popover/style/index.scss b/packages/opendesign/src/components/popover/style/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..73a8e3d587eb09cf35af93bf9d1a439260c17f64
--- /dev/null
+++ b/packages/opendesign/src/components/popover/style/index.scss
@@ -0,0 +1,51 @@
+@import './var.scss';
+
+.o-popover-wrap {
+  background-color: var(--popup-bg);
+  box-shadow: var(--popup-shadow);
+  padding: 4px 8px;
+  border-radius: var(--popup-radius);
+  border: 1px solid var(--popup-border-color);
+  min-width: 120px;
+}
+.o-popover-anchor {
+  border: 1px solid var(--popup-border-color);
+  border-bottom: none;
+  border-right: none;
+  border-top-left-radius: 2px;
+  width: 8px;
+  height: 8px;
+  background-color: var(--popup-bg);
+}
+
+.o-popup-pos-left,
+.o-popup-pos-lb,
+.o-popup-pos-lt {
+  .o-popup-anchor {
+    transform: translate(50%, -50%) rotate(135deg);
+  }
+}
+
+.o-popup-pos-top,
+.o-popup-pos-tl,
+.o-popup-pos-tr {
+  .o-popup-anchor {
+    transform: translate(-50%, 50%) rotate(225deg);
+  }
+}
+
+.o-popup-pos-right,
+.o-popup-pos-rt,
+.o-popup-pos-rb {
+  .o-popup-anchor {
+    transform: translate(-50%, -50%) rotate(-45deg);
+  }
+}
+
+.o-popup-pos-bottom,
+.o-popup-pos-bl,
+.o-popup-pos-br {
+  .o-popup-anchor {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+}
diff --git a/packages/opendesign/src/components/popover/style/index.ts b/packages/opendesign/src/components/popover/style/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..67aac616fc2524b146b7b078fd3b67c1bd3b4a6e
--- /dev/null
+++ b/packages/opendesign/src/components/popover/style/index.ts
@@ -0,0 +1 @@
+import './index.scss';
diff --git a/packages/opendesign/src/components/popover/style/var.scss b/packages/opendesign/src/components/popover/style/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2125f46d90f0e817bbd77c9efb78f0a457c4a5b3
--- /dev/null
+++ b/packages/opendesign/src/components/popover/style/var.scss
@@ -0,0 +1,6 @@
+.o-popover {
+  --popup-bg: var(--o-color-bg2);
+  --popup-shadow: var(--o-shadow-1);
+  --popup-radius: var(--o-radius-s);
+  --popup-border-color: var(--o-color-border2);
+}
diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fe9ca9757dfc0e9613bda4d4af8299522a534641
--- /dev/null
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -0,0 +1,455 @@
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
+<script setup lang="ts">
+import { onMounted, reactive, ref, Ref, watch, nextTick, onUnmounted, PropType, ComponentPublicInstance, computed } from 'vue';
+import { PopupPositionT, PopupTriggerT } from './types';
+import { isElement, getScrollParents } from '../_shared/dom';
+import { throttleRAF } from '../_shared/utils';
+import { calcPopupStyle, bindTrigger, getTransformOrigin } from './popup';
+import { useResizeObserver } from '../hooks/use-resize-observer';
+import { ResizeObserver } from '../resize-observer';
+import { useIntersectionObserver } from '../hooks';
+import type { IntersectionListenerT } from '../hooks';
+
+// TODO 处理嵌套
+
+const props = defineProps({
+  /**
+   * 弹出位置
+   */
+  position: {
+    type: String as PropType<PopupPositionT>,
+    default: 'top',
+  },
+  /**
+   * 触发事件
+   * 'hover','click','focus','contextMenu'
+   */
+  trigger: {
+    type: [String, Array<String>] as PropType<PopupTriggerT | PopupTriggerT[]>,
+    default: 'hover',
+  },
+  /**
+   * 触发元素或组件
+   */
+  target: {
+    type: [String, Object] as PropType<string | ComponentPublicInstance | HTMLElement | null>,
+    default: null,
+    require: true,
+  },
+  /**
+   * 是否可见
+   * v-model
+   */
+  visible: {
+    type: Boolean,
+  },
+  /**
+   * 挂载容器，默认为body
+   */
+  wrapper: {
+    type: [String, Object] as PropType<string | HTMLElement>,
+    default: document.body,
+  },
+  /**
+   * 距离target偏移量
+   */
+  offset: {
+    type: Number,
+    default: 0,
+  },
+  /**
+   * hover事件延时触发的时间（毫秒）
+   */
+  hoverDelay: {
+    type: Number,
+    default: 100,
+  },
+  /**
+   * 是否当触发元素不可见时隐藏弹层
+   */
+  hideWhenTargetInvisible: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 锚点自定义class
+   */
+  anchorClass: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 是否在popup隐藏时unmout
+   */
+  unmountOnClose: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * Popup在hover时是否不消失，当trigger包含hover时有效
+   */
+  statyOnHoverin: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * popup wrap自定义class
+   */
+  wrapClass: {
+    type: String,
+    default: '',
+  },
+  /**
+   * popup最小宽度设置为触发元素宽度
+   */
+  adjustMinWidth: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * popup宽度设置为触发元素宽度
+   */
+  adjustWidth: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emits = defineEmits<{ (e: 'update:visible', val: boolean): void; (e: 'change', val: boolean): void }>();
+const triggers = Array.isArray(props.trigger) ? props.trigger : [props.trigger];
+
+const visible = ref(false);
+let targetEl: HTMLElement | null = null;
+// 默认为true，避免props.visible为初始值为true时，无法计算popup位置
+const isTargetInViewport = ref(true);
+
+let wrapperEl: Ref<HTMLElement | null> = ref(null);
+const popupRef = ref<HTMLElement | null>(null);
+const popStyle = reactive<{
+  left?: string;
+  top?: string;
+  right?: string;
+  bottom?: string;
+  minWidth?: string;
+  width?: string;
+}>({});
+const popPosition = ref(props.position);
+
+const wrapOrigin = ref<{ left: string; top: string }>({ left: '0px', top: '0px' });
+const wrapStyle = computed(() => ({
+  transformOrigin: `${wrapOrigin.value.left} ${wrapOrigin.value.top}`,
+}));
+
+const anchorStyle = reactive<{ left?: string; top?: string; right?: string; bottom?: string }>({});
+
+// 是否需要挂载
+const mounted = ref(false);
+const isAnimating = ref(false);
+
+const { addResizeListener, removeResizeListener } = useResizeObserver();
+const intersctionObserver = useIntersectionObserver();
+
+// 处理popup位置
+const updatePopupStyle = () => {
+  if (props.hideWhenTargetInvisible && !isTargetInViewport.value) {
+    return;
+  }
+
+  if (!targetEl || !popupRef.value || !wrapperEl.value) {
+    return;
+  }
+  console.log('calc popup position...');
+
+  const {
+    popupStyle: pStyle,
+    position,
+    anchorStyle: aStyle,
+  } = calcPopupStyle(popupRef.value, targetEl, props.position, {
+    offset: props.offset,
+  });
+
+  wrapOrigin.value = getTransformOrigin(position);
+  if (pStyle) {
+    popStyle.top = `${Math.round(pStyle.top)}px`;
+    popStyle.left = `${Math.round(pStyle.left)}px`;
+
+    popPosition.value = position;
+  }
+
+  if (aStyle) {
+    Object.keys(aStyle).forEach((k) => {
+      const val = aStyle[k as keyof typeof aStyle];
+      anchorStyle[k as keyof typeof anchorStyle] = `${Math.round(val as number)}px`;
+    });
+  }
+};
+
+// 定义变量，避免首次监听与popup默认显示时重复计算
+let oldIntersecting: boolean | null = null;
+const onTargetInterscting: IntersectionListenerT = (entry: IntersectionObserverEntry) => {
+  isTargetInViewport.value = entry.isIntersecting;
+
+  if (oldIntersecting !== null && entry.isIntersecting) {
+    if (visible.value) {
+      nextTick(() => {
+        updatePopupStyle();
+      });
+    }
+  }
+  oldIntersecting = isTargetInViewport.value;
+};
+
+watch(
+  () => props.visible,
+  (val) => {
+    if (visible.value === val) {
+      return;
+    }
+    visible.value = val;
+    if (val) {
+      nextTick(() => {
+        updatePopupStyle();
+      });
+    }
+  }
+);
+
+let visibleTimer = 0;
+const clearVisibleTimer = () => {
+  if (visibleTimer) {
+    window.clearTimeout(visibleTimer);
+    visibleTimer = 0;
+  }
+};
+
+// 更新可见状态，支持延迟更新
+const updateVisible = (isVisible: boolean, delay?: number) => {
+  if (isVisible === visible.value && visibleTimer === 0) {
+    return;
+  }
+
+  const update = () => {
+    if (visible.value === isVisible) {
+      return;
+    }
+    // 设置popup是否显示，不需要手动触发计算位置，显示时会触发resize，计算位置
+    visible.value = isVisible;
+    emits('update:visible', isVisible);
+    emits('change', isVisible);
+
+    if (isVisible) {
+      mounted.value = true;
+
+      if (props.hideWhenTargetInvisible && targetEl) {
+        intersctionObserver.addIntersectionListener(targetEl, onTargetInterscting);
+      }
+    }
+  };
+
+  if (delay) {
+    clearVisibleTimer();
+    visibleTimer = window.setTimeout(update, delay);
+  } else {
+    update();
+  }
+};
+
+let triggerListener: ReturnType<typeof bindTrigger> = [];
+const bindTargetEvent = (el: HTMLElement | null) => {
+  if (!el) {
+    return;
+  }
+  targetEl = el;
+
+  // 初始化popup宽度，避免引起resize，触发重复计算
+  if (props.adjustMinWidth) {
+    popStyle.minWidth = `${targetEl.offsetWidth}px`;
+  } else if (props.adjustWidth) {
+    popStyle.width = `${targetEl.offsetWidth}px`;
+  }
+
+  triggerListener = bindTrigger(el, popupRef, triggers, {
+    updateFn: updateVisible,
+    hoverDelay: props.hoverDelay,
+  });
+
+  if (props.hideWhenTargetInvisible) {
+    intersctionObserver.addIntersectionListener(targetEl, onTargetInterscting);
+  }
+};
+
+// 触发元素为组件ref，处理事件触发
+watch(
+  () => props.target,
+  (ele) => {
+    if (ele) {
+      bindTargetEvent((ele as ComponentPublicInstance).$el);
+    }
+  }
+);
+const onResize = (en: ResizeObserverEntry, isFirst: boolean) => {
+  if (visible.value && !isFirst) {
+    updatePopupStyle();
+  }
+};
+/**
+ * popup
+ */
+const onPopupResize = (en: ResizeObserverEntry) => {
+  return onResize(en, false);
+};
+const handleTransitionStart = () => {
+  isAnimating.value = true;
+};
+const handleTransitionEnd = () => {
+  isAnimating.value = false;
+  if (!visible.value && props.unmountOnClose) {
+    mounted.value = false;
+  }
+};
+
+const scrollListener = throttleRAF(() => {
+  if (visible.value) {
+    updatePopupStyle();
+  }
+});
+
+const listenScroll = (el: HTMLElement) => {
+  el.addEventListener('scroll', scrollListener, { passive: true });
+  return () => {
+    el.removeEventListener('scroll', scrollListener);
+  };
+};
+
+watch(popupRef, (popEl) => {
+  let handles: Array<() => void> = [];
+  if (popEl) {
+    /**
+     * popup显示时，监听挂载容器、关联元素
+     */
+
+    if (targetEl) {
+      // 监听targetEl父组件滚动
+      const scrollers = getScrollParents(targetEl);
+      handles = scrollers.map((el) => {
+        return listenScroll(el);
+      });
+
+      // 监听targetEL尺寸变化
+      addResizeListener(targetEl, (en: ResizeObserverEntry, isFirst: boolean) => {
+        if (props.adjustMinWidth) {
+          popStyle.minWidth = `${targetEl?.offsetWidth}px`;
+        } else if (props.adjustWidth) {
+          popStyle.width = `${targetEl?.offsetWidth}px`;
+        }
+        onResize(en, isFirst);
+      });
+    }
+
+    if (wrapperEl.value) {
+      // 监听warpper尺寸变化
+      addResizeListener(wrapperEl.value, onResize);
+    }
+  } else {
+    /**
+     * popup隐藏时，销毁事件监听
+     */
+
+    handles.forEach((hl) => hl());
+    if (wrapperEl.value) {
+      removeResizeListener(wrapperEl.value, onResize);
+    }
+    if (targetEl) {
+      removeResizeListener(targetEl, onResize);
+      intersctionObserver.removeIntersectionListener(targetEl, onTargetInterscting);
+      isTargetInViewport.value = true;
+    }
+  }
+});
+const onPopupHoverIn = () => {
+  if (triggers.includes('hover')) {
+    updateVisible(true, props.hoverDelay);
+  }
+};
+const onPopupHoverOut = () => {
+  if (triggers.includes('hover')) {
+    updateVisible(false, props.hoverDelay);
+  }
+};
+onMounted(() => {
+  // 在mounted事件后再显示，避免找不到wrapper
+  visible.value = props.visible;
+
+  // 触发元素为dom或者选择器，处理事件触发
+  nextTick(() => {
+    if (!wrapperEl.value) {
+      if (typeof props.wrapper === 'string') {
+        wrapperEl.value = document.querySelector(props.wrapper);
+      } else {
+        wrapperEl.value = props.wrapper;
+      }
+    }
+
+    // 绑定触发元素事件
+    if (typeof props.target === 'string') {
+      bindTargetEvent(document.querySelector(props.target));
+    } else if (isElement(props.target)) {
+      bindTargetEvent(props.target as HTMLElement);
+    }
+
+    // 初始为true时，更新样式
+    // if (visible.value) {
+    //   updatePopupStyle();
+    // }
+  });
+});
+
+onUnmounted(() => {
+  // 移除触发事件
+  triggerListener.forEach((fn) => {
+    fn();
+  });
+  // 销毁popup 的 resize监听
+  if (wrapperEl.value) {
+    removeResizeListener(wrapperEl.value, onResize);
+  }
+  if (targetEl) {
+    removeResizeListener(targetEl, onResize);
+  }
+});
+</script>
+<template>
+  <teleport v-if="wrapperEl" :to="props.wrapper">
+    <ResizeObserver v-if="mounted || visible" @resize="onPopupResize">
+      <div
+        ref="popupRef"
+        class="o-popup"
+        :style="popStyle"
+        v-bind="$attrs"
+        :class="[`o-popup-pos-${popPosition}`, { 'out-view': props.hideWhenTargetInvisible && !isTargetInViewport, animating: isAnimating }]"
+        @mouseover="onPopupHoverIn"
+        @mouseleave="onPopupHoverOut"
+      >
+        <Transition
+          name="o-zoom-fade"
+          :appear="true"
+          @before-enter="handleTransitionStart"
+          @after-enter="handleTransitionEnd"
+          @before-leave="handleTransitionStart"
+          @after-leave="handleTransitionEnd"
+        >
+          <div v-show="visible" class="o-popup-wrap" :style="wrapStyle" :class="wrapClass">
+            <slot></slot>
+            <div class="o-popup-anchor" :style="anchorStyle" :class="anchorClass">
+              <slot name="anchor"></slot>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </ResizeObserver>
+  </teleport>
+</template>
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..52f68bd88af4691ba1c5e60dd9ec270f8614b811
--- /dev/null
+++ b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OButton } from '../../button';
+import '../../button/style';
+import { OPopup } from '../index';
+
+const content = 'this is popup content';
+const btn1 = ref(null);
+const btn2 = ref(null);
+const btn3 = ref(null);
+const btn4 = ref(null);
+const btn5 = ref(null);
+const btn6 = ref(null);
+const btn7 = ref(null);
+const btn8 = ref(null);
+const btn9 = ref(null);
+const visible = ref(true);
+const text = ref('text');
+const width = ref('50vw');
+setTimeout(() => {
+  // text.value += '--|';
+  // width.value = '40vw';
+}, 2000);
+</script>
+<template>
+  <h4>popup container</h4>
+  <div id="wrap" :style="{ width: width }">
+    <div class="content">
+      <OButton ref="btn1" class="btn1">TL btn1 </OButton>
+      <OButton ref="btn2" class="btn2">TR btn2 </OButton>
+      <OButton ref="btn3" class="btn3">TL btn3 </OButton>
+      <OButton ref="btn4" class="btn4">LT btn4 </OButton>
+      <OButton ref="btn5" class="btn5">TL btn5 {{ text }}</OButton>
+      <OButton ref="btn6" class="btn6">TL btn6 </OButton>
+      <OButton ref="btn7" class="btn7">LEFT btn7 </OButton>
+      <OButton ref="btn8" class="btn8">BL btn8 </OButton>
+      <OButton ref="btn9" class="btn9">LT btn9 </OButton>
+
+      <OPopup position="tl" :target="btn1" wrapper="#wrap" trigger="click" :unmount-on-close="false">
+        <div class="popup-box">
+          <div>{{ content }}</div>
+          <div>{{ content }}</div>
+        </div>
+      </OPopup>
+      <OPopup position="tr" :target="btn2" wrapper="#wrap" trigger="click">
+        <div class="popup-box">
+          <div>{{ content }}</div>
+          <div>{{ content }}</div>
+        </div>
+      </OPopup>
+      <OPopup v-model:visible="visible" position="tl" :target="btn3" wrapper="#wrap" trigger="click">
+        <div class="popup-box">
+          <div>{{ content }}</div>
+          <div>{{ content }}</div>
+        </div>
+      </OPopup>
+      <OPopup position="lt" :target="btn4" wrapper="#wrap" trigger="click">
+        <div class="popup-box">
+          <div>{{ content }}</div>
+          <div>{{ content }}</div>
+        </div>
+      </OPopup>
+      <OPopup position="tr" :target="btn5" wrapper="#wrap" trigger="click">
+        <div class="popup-box">
+          <div>{{ content }}</div>
+          <div>{{ content }}</div>
+        </div>
+      </OPopup>
+      <OPopup position="lt" :target="btn6" wrapper="#wrap" trigger="click">
+        <div class="popup-box">
+          <div>{{ content }}</div>
+          <div>{{ content }}</div>
+        </div>
+      </OPopup>
+      <OPopup position="left" :target="btn7" wrapper="#wrap" trigger="click">
+        <div class="popup-box">
+          <div>{{ content }}</div>
+          <div>{{ content }}</div>
+        </div>
+      </OPopup>
+      <OPopup position="bl" :target="btn8" wrapper="#wrap" trigger="click">
+        <div class="popup-box">
+          <div class="tip">{{ content }}</div>
+          <div>{{ content }}</div>
+        </div>
+      </OPopup>
+      <OPopup position="lt" :target="btn9" wrapper="#wrap" trigger="click">
+        <div class="popup-box">
+          <div>{{ content }}</div>
+          <div>{{ content }}</div>
+        </div>
+      </OPopup>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.popup-box {
+  background-color: var(--popup-bg);
+  box-shadow: var(--popup-shadow);
+  padding: 4px 8px;
+  border-radius: var(--popup-radius);
+  border: 1px solid red;
+}
+#wrap {
+  height: 50vh;
+  width: 50vw;
+  overflow: auto;
+  border: 10px solid #333;
+  position: relative;
+  z-index: 10;
+  background-color: #eee;
+  // overflow: visible;
+}
+.content {
+  height: 50vh;
+  width: 80vw;
+
+  position: relative;
+  :deep(.o-btn) {
+    position: absolute;
+  }
+}
+.tip {
+  white-space: nowrap;
+}
+.btn1 {
+  left: 0;
+  top: 0;
+}
+.btn2 {
+  left: 80px;
+  top: 0;
+}
+.btn3 {
+  left: 60%;
+  top: 0;
+}
+.btn4 {
+  left: 0;
+  top: 11vh;
+}
+.btn5 {
+  right: 60%;
+  top: 15vh;
+}
+.btn6 {
+  right: 0;
+  top: 15vh;
+}
+.btn7 {
+  left: 0;
+  bottom: 0;
+}
+.btn8 {
+  left: 45vw;
+  // bottom: 0;
+  top: 100vh;
+}
+.btn9 {
+  right: 0;
+  bottom: 0;
+}
+</style>
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue b/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3c80f817624502b795e28fedc46b8c330d0d770b
--- /dev/null
+++ b/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OButton } from '../../button';
+import '../../button/style';
+import { OPopup } from '../index';
+
+const content = 'this is popup content';
+const btn1 = ref(null);
+const btn2 = ref(null);
+const btn3 = ref(null);
+const btn4 = ref(null);
+const btn5 = ref(null);
+const btn6 = ref(null);
+const btn7 = ref(null);
+const btn8 = ref(null);
+const btn9 = ref(null);
+const btn10 = ref(null);
+const btn11 = ref(null);
+const btn12 = ref(null);
+</script>
+<template>
+  <h4>popup position</h4>
+  <div class="position-wrap">
+    <div class="top">
+      <OButton ref="btn1"> TL </OButton>
+      <OPopup anchor-class="popup-arrow" position="tl" :target="btn1">
+        <div class="popup-box">TL {{ content }}</div>
+      </OPopup>
+      <OButton ref="btn2"> TOP </OButton>
+      <OPopup anchor-class="popup-arrow" position="top" :target="btn2" :trigger="['click', 'hover']">
+        <div class="popup-box">T {{ content }}</div>
+      </OPopup>
+      <OButton ref="btn3">TR</OButton>
+      <OPopup anchor-class="popup-arrow" position="tr" :target="btn3">
+        <div class="popup-box">TR {{ content }}</div>
+      </OPopup>
+    </div>
+    <div class="middle">
+      <div class="left">
+        <OButton ref="btn4"> LT </OButton>
+        <OPopup anchor-class="popup-arrow" position="lt" :target="btn4">
+          <div class="popup-box">LT {{ content }}</div>
+        </OPopup>
+        <OButton ref="btn5"> LEFT </OButton>
+        <OPopup anchor-class="popup-arrow" position="left" :target="btn5">
+          <div class="popup-box">L {{ content }}</div>
+        </OPopup>
+        <OButton ref="btn6"> LB </OButton>
+        <OPopup anchor-class="popup-arrow" position="lb" :target="btn6">
+          <div class="popup-box">LB {{ content }}</div>
+        </OPopup>
+      </div>
+      <div class="right">
+        <OButton ref="btn7"> RT </OButton>
+        <OPopup position="rt" :target="btn7">
+          <div class="popup-box">R {{ content }}</div>
+          <template #anchor>
+            <div class="popup-arrow"></div>
+          </template>
+        </OPopup>
+        <OButton ref="btn8"> RIGHT </OButton>
+        <OPopup position="right" :target="btn8">
+          <div class="popup-box">R {{ content }}</div>
+          <template #anchor>
+            <div class="popup-arrow"></div>
+          </template>
+        </OPopup>
+        <OButton ref="btn9"> RB </OButton>
+        <OPopup position="rb" :target="btn9">
+          <div class="popup-box">RB {{ content }}</div>
+          <template #anchor>
+            <div class="popup-arrow"></div>
+          </template>
+        </OPopup>
+      </div>
+    </div>
+    <div class="bottom">
+      <OButton ref="btn10"> BL </OButton>
+      <OPopup position="bl" :target="btn10">
+        <div class="popup-box">BL {{ content }}</div>
+        <template #anchor>
+          <div class="popup-arrow"></div>
+        </template>
+      </OPopup>
+      <OButton ref="btn11"> BOTTOM </OButton>
+      <OPopup position="bottom" :target="btn11">
+        <div class="popup-box">B {{ content }}</div>
+        <template #anchor>
+          <div class="popup-arrow"></div>
+        </template>
+      </OPopup>
+      <OButton ref="btn12"> BR </OButton>
+      <OPopup position="br" :target="btn12">
+        <div class="popup-box">BR {{ content }}</div>
+        <template #anchor>
+          <div class="popup-arrow"></div>
+        </template>
+      </OPopup>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.popup-box {
+  background-color: var(--popup-bg);
+  box-shadow: var(--popup-shadow);
+  padding: 4px 8px;
+  border-radius: var(--popup-radius);
+  border: 1px solid red;
+}
+.position-wrap {
+  padding: 100px;
+  height: 50vh;
+  overflow: auto;
+  border: 1px solid #333;
+}
+.top {
+  display: flex;
+  justify-content: space-between;
+}
+.left > * {
+  display: block;
+  margin: 100px;
+}
+.middle {
+  display: flex;
+  justify-content: space-between;
+}
+.right > * {
+  display: block;
+  margin: 100px;
+}
+.bottom {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
+<style lang="scss">
+.popup-arrow {
+  border: 1px solid red;
+  border-radius: 50%;
+  width: 8px;
+  height: 8px;
+}
+</style>
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue b/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a2d75fb3f8737d07dfaed0aa2cf4c8566d5c4bdf
--- /dev/null
+++ b/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OButton } from '../../button';
+import '../../button/style';
+import { OPopup } from '../index';
+
+const content = 'this is popup content';
+const btn1 = ref(null);
+const btn2 = ref(null);
+const visible = ref(false);
+setTimeout(() => {
+  visible.value = true;
+}, 2000);
+</script>
+<template>
+  <h4>popup visible</h4>
+  <section>
+    <div class="row">visible: {{ visible }}</div>
+    <div>
+      <OButton ref="btn1" class="btn">Button</OButton>
+      <OPopup v-model:visible="visible" position="tl" :target="btn1">
+        <div class="popup-box">TL {{ content }}</div>
+      </OPopup>
+      <OButton ref="btn2" class="btn"> TOP </OButton>
+      <OPopup :visible="visible" position="bottom" :target="btn2" trigger="none">
+        <div class="popup-box">TL {{ content }}</div>
+      </OPopup>
+    </div>
+  </section>
+</template>
+<style lang="scss" scoped>
+.btn {
+  margin-left: 100px;
+}
+.popup-box {
+  background-color: var(--popup-bg);
+  box-shadow: var(--popup-shadow);
+  padding: 4px 8px;
+  border-radius: var(--popup-radius);
+  border: 1px solid red;
+}
+</style>
diff --git a/packages/opendesign/src/components/popup/index.ts b/packages/opendesign/src/components/popup/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1da05317b9365ebb667a9968a3ba7da3b77f16b5
--- /dev/null
+++ b/packages/opendesign/src/components/popup/index.ts
@@ -0,0 +1,14 @@
+import _OPopup from './OPopup.vue';
+import type { App } from 'vue';
+
+export * from './types';
+
+const OPopup = Object.assign(_OPopup, {
+  install(app: App) {
+    app.component(_OPopup.name, _OPopup);
+  },
+});
+
+export {
+  OPopup,
+};
diff --git a/packages/opendesign/src/components/popup/popup.ts b/packages/opendesign/src/components/popup/popup.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0477a936753057961941618ef74fccb00d6320f1
--- /dev/null
+++ b/packages/opendesign/src/components/popup/popup.ts
@@ -0,0 +1,505 @@
+import { Ref } from 'vue';
+import { getElementBorder, getElementSize, getOffsetElement, getScroll } from '../_shared/dom';
+import type { DirectionT } from '../_shared/dom';
+import type { PopupPositionT, PopupTriggerT } from './types';
+
+import { useOutClick } from '../hooks/use-out-click';
+
+const { addOutClickListener, removeOutClickListener } = useOutClick();
+interface Pos {
+  left: number,
+  top: number
+}
+interface DomContentRect {
+  left: number,
+  right: number,
+  top: number,
+  bottom: number,
+}
+
+interface AnchorPosition {
+  left?: number,
+  top?: number,
+  right?: number,
+  bottom?: number
+}
+
+type ElementSize = ReturnType<typeof getElementSize>
+
+// 获取wrapper content box范围，因为绝对定位需要排除border
+function getWrapperContentRect(wrapperEl: HTMLElement, wrapperRect?: DOMRect): DomContentRect {
+  const { left = 0, top = 0, right = 0, bottom = 0 } = getElementBorder(wrapperEl);
+  const rect = wrapperRect || wrapperEl.getBoundingClientRect();
+  return {
+    left: rect.left + left,
+    top: rect.top + top,
+    right: rect.right - right,
+    bottom: rect.bottom - bottom
+  };
+}
+
+// 根据position计算popup的位置
+function getPopupViewOffset(
+  position: PopupPositionT,
+  t: DOMRect,
+  p: DOMRect,
+  {
+    offset = 0
+  }: {
+    offset?: number
+  } = {}): Pos {
+  const formula: {
+    [k in PopupPositionT]: { left: number, top: number }
+  } = {
+    top: {
+      left: t.left + t.width / 2 - p.width / 2,
+      top: t.top - p.height - offset
+    },
+    tl: {
+      left: t.left,
+      top: t.top - p.height - offset
+    },
+    tr: {
+      left: t.right - p.width,
+      top: t.top - p.height - offset
+    },
+    bottom: {
+      left: t.left + t.width / 2 - p.width / 2,
+      top: t.bottom + offset
+    },
+    bl: {
+      left: t.left,
+      top: t.bottom + offset
+    },
+    br: {
+      left: t.right - p.width,
+      top: t.bottom + offset
+    },
+    left: {
+      left: t.left - p.width - offset,
+      top: t.top + t.height / 2 - p.height / 2
+    },
+    lt: {
+      left: t.left - p.width - offset,
+      top: t.top
+    },
+    lb: {
+      left: t.left - p.width - offset,
+      top: t.bottom - p.height
+    },
+    right: {
+      left: t.right + offset,
+      top: t.top + t.height / 2 - p.height / 2
+    },
+    rt: {
+      left: t.right + offset,
+      top: t.top
+    },
+    rb: {
+      left: t.right + offset,
+      top: t.bottom - p.height
+
+    }
+  };
+  return formula[position] || { left: 0, top: 0 };
+}
+
+// 根据视窗与相对容器，返回popup的位置范围
+function getWrapperViewEdge(popupSize: ElementSize, wrapperRect?: DomContentRect) {
+  const viewport = {
+    left: 0,
+    right: window.innerWidth - popupSize.width,
+    top: 0,
+    bottom: window.innerHeight - popupSize.height
+  };
+
+  if (!wrapperRect) {
+    return viewport;
+  }
+  return {
+    left: Math.max(viewport.left, wrapperRect.left),
+    top: Math.max(viewport.top, wrapperRect.top),
+    right: Math.min(viewport.right, wrapperRect.right - popupSize.width),
+    bottom: Math.min(viewport.bottom, wrapperRect.bottom - popupSize.height),
+  };
+}
+
+// 根据触发元素，返回popup的位置范围
+function getPopupEdge(popupSize: ElementSize, targetRect: DOMRect, anchorOffset: number = 0) {
+  const { left, right, top, bottom } = targetRect;
+  const { width, height } = popupSize;
+  return {
+    left: left - width + anchorOffset,
+    top: top - height + anchorOffset,
+    right: right - anchorOffset,
+    bottom: bottom - anchorOffset
+  };
+}
+
+// 计算相对于wrapper的位置信息
+function getPopupWrapOffset(pos: Pos, wrapperEl: HTMLElement | null, wrapperContentRect?: DomContentRect) {
+  if (!wrapperEl) {
+    return pos;
+  }
+  const cs = getScroll(wrapperEl);
+  if (wrapperContentRect) {
+    return {
+      left: pos.left + cs.scrollLeft - wrapperContentRect.left,
+      top: pos.top + cs.scrollTop - wrapperContentRect.top
+    };
+  }
+  return {
+    left: pos.left + cs.scrollLeft,
+    top: pos.top + cs.scrollTop
+  };
+}
+
+// 根据position获取方向
+function getDirection(position: PopupPositionT): DirectionT {
+  switch (position) {
+    case 'tl':
+    case 'tr':
+    case 'top':
+      return 'top';
+    case 'bl':
+    case 'br':
+    case 'bottom':
+      return 'bottom';
+    case 'lt':
+    case 'lb':
+    case 'left':
+      return 'left';
+    case 'rt':
+    case 'rb':
+    case 'right':
+      return 'right';
+  }
+}
+
+// 调整position
+function adjustPosition(position: PopupPositionT, direction: DirectionT) {
+  const fixFn = {
+    top: (p: PopupPositionT) => {
+      if (p === 'bottom') {
+        return 'top';
+      } else if (p === 'bl') {
+        return 'tl';
+      } else if (p === 'br') {
+        return 'tr';
+      }
+      return p;
+    },
+    bottom: (p: PopupPositionT) => {
+      if (p === 'top') {
+        return 'bottom';
+      } else if (p === 'tl') {
+        return 'bl';
+      } else if (p === 'tr') {
+        return 'br';
+      }
+      return p;
+    },
+    left: (p: PopupPositionT) => {
+      if (p === 'right') {
+        return 'left';
+      } else if (p === 'rt') {
+        return 'lt';
+      } else if (p === 'rb') {
+        return 'lb';
+      }
+      return p;
+    },
+    right: (p: PopupPositionT) => {
+      if (p === 'left') {
+        return 'right';
+      } else if (p === 'lt') {
+        return 'rt';
+      } else if (p === 'lb') {
+        return 'rb';
+      }
+      return p;
+    }
+  };
+
+  const fn = fixFn[direction];
+  return fn ? fn(position) : position;
+}
+
+// 根据popup的极值调整
+function adjustOffset(
+  position: PopupPositionT,
+  popupPosition: Pos,
+  popupSize: ElementSize,
+  pRect: DOMRect,
+  tRect: DOMRect,
+  wRect?: DomContentRect,
+  {
+    anchorOffset,
+    offset
+  }: {
+    anchorOffset?: number,
+    offset?: number
+  } = {}
+) {
+  const { top, left } = popupPosition;
+  const edge = getWrapperViewEdge(popupSize, wRect);
+
+  let fixedPosition = position;
+  let style = popupPosition;
+
+  const d = getDirection(position);
+  if (d === 'top') {
+    if (edge.top > top) {
+      fixedPosition = adjustPosition(position, 'bottom');
+      style = getPopupViewOffset(fixedPosition, tRect, pRect, { offset });
+    }
+  } else if (d === 'left') {
+    if (edge.left > left) {
+      fixedPosition = adjustPosition(position, 'right');
+      style = getPopupViewOffset(fixedPosition, tRect, pRect, { offset });
+    }
+  } else if (d === 'right') {
+    if (edge.right < left) {
+      fixedPosition = adjustPosition(position, 'left');
+      style = getPopupViewOffset(fixedPosition, tRect, pRect, { offset });
+    }
+  } else if (d === 'bottom') {
+    if (edge.bottom < top) {
+      fixedPosition = adjustPosition(position, 'top');
+      style = getPopupViewOffset(fixedPosition, tRect, pRect, { offset });
+    }
+  }
+
+  const popEdge = getPopupEdge(popupSize, tRect, anchorOffset);
+
+  if (['top', 'bottom'].includes(d)) {
+    if (edge.left > left) {
+      style.left = edge.left < popEdge.right ? edge.left : popEdge.right;
+    } else if (edge.right < left) {
+      style.left = edge.right > popEdge.left ? edge.right : popEdge.left;
+    }
+  }
+  if (['left', 'right'].includes(d)) {
+    if (edge.top > top) {
+      style.top = edge.top < popEdge.bottom ? edge.top : popEdge.bottom;
+    } else if (edge.bottom < top) {
+      style.top = edge.bottom > popEdge.top ? edge.bottom : popEdge.top;
+    }
+  }
+
+  return {
+    position: fixedPosition,
+    popupStyle: style,
+  };
+}
+
+function getAnchorOffset(position: PopupPositionT, tRect: DOMRect, popupStyle: Pos, popupSize: ElementSize): AnchorPosition {
+  const pos: AnchorPosition = {};
+  const limit = 8;
+
+  const { left: pl, top: pt } = popupStyle;
+  if (['top', 'tl', 'tr', 'bottom', 'bl', 'br'].includes(position)) {
+    let l = tRect.left + (tRect.width / 2) - pl;
+
+    if (l > popupSize.width - limit) {
+      l = popupSize.width - limit;
+    } else if (l < limit) {
+      l = limit;
+    }
+
+    pos.left = l;
+
+    if (['top', 'tl', 'tr'].includes(position)) {
+      pos.bottom = 0;
+    } else {
+      pos.top = 0;
+    }
+  } else if (['left', 'lt', 'lb', 'right', 'rt', 'rb'].includes(position)) {
+    let t = tRect.top + (tRect.height / 2) - pt;
+
+    if (t > popupSize.height - limit) {
+      t = popupSize.height - limit;
+    } else if (t < limit) {
+      t = limit;
+    }
+
+    pos.top = t;
+
+    if (['left', 'lt', 'lb'].includes(position)) {
+      pos.right = 0;
+    } else {
+      pos.left = 0;
+    }
+  }
+
+
+  return pos;
+}
+
+// 处理popup位置
+export function calcPopupStyle(popupEl: HTMLElement, targetEl: HTMLElement, position: PopupPositionT,
+  {
+    adaptive = true, anchorOffset = 8, offset = 8
+  }: {
+    adaptive?: boolean, anchorOffset?: number, offset?: number
+  } = {}) {
+
+  const tRect = targetEl.getBoundingClientRect();
+
+  const pRect = popupEl.getBoundingClientRect();
+  const popupSize = getElementSize(popupEl);
+
+  // 根据position计算popup相对视窗的位置
+  let popupStyle = getPopupViewOffset(position, tRect, pRect, { offset: offset });
+  let anchorStyle: AnchorPosition = {};
+
+  const wrapperEl = getOffsetElement(popupEl) as HTMLElement;
+  if (!wrapperEl) {
+    return {
+      popupStyle,
+      position,
+      anchorStyle
+    };
+  }
+  const wrapperRect = wrapperEl.getBoundingClientRect();
+  let wrapperContentRect = undefined;
+
+  // wrapper为body时，如果body有偏移，但position值为static，不需要计算wrapper的content rect。
+  if (wrapperEl.nodeName !== 'HTML') {
+    wrapperContentRect = getWrapperContentRect(wrapperEl, wrapperRect);
+  }
+
+  let fixedPosition = position;
+  // 自适应容器边缘
+  if (adaptive) {
+    const rlt = adjustOffset(position, popupStyle, popupSize, pRect, tRect, wrapperContentRect, { offset: offset, anchorOffset });
+    fixedPosition = rlt.position;
+    popupStyle = rlt.popupStyle;
+  }
+  // 获取锚点相对popup的位置
+  anchorStyle = getAnchorOffset(fixedPosition, tRect, popupStyle, popupSize);
+  // 计算相对容器的位置
+  popupStyle = getPopupWrapOffset(popupStyle, wrapperEl, wrapperContentRect);
+
+  return {
+    position: fixedPosition,
+    popupStyle,
+    anchorStyle
+  };
+};
+
+// 监听元素的触发事件
+export function bindTrigger(
+  el: HTMLElement | null,
+  popupRef: Ref<HTMLElement | null>,
+  triggers: PopupTriggerT[],
+  {
+    updateFn,
+    hoverDelay = 100
+  }: {
+    updateFn: (isVisible: boolean, delay?: number) => void,
+    hoverDelay?: number
+  }
+) {
+  if (!el) {
+    return [];
+  }
+
+  const listeners: Array<() => void> = [];
+
+  const showFn = () => {
+    updateFn(true);
+  };
+  const hideFn = () => {
+    updateFn(false);
+  };
+
+  const enterFn = () => {
+    updateFn(true, hoverDelay);
+  };
+  const leavefn = () => {
+    updateFn(false, hoverDelay);
+  };
+
+  const triggerHandlers: Record<PopupTriggerT, () => void> = {
+    hover: () => {
+      el?.addEventListener('mouseover', enterFn);
+      el?.addEventListener('mouseleave', leavefn);
+      const removeFn = () => {
+        el?.removeEventListener('mouseover', enterFn);
+        el?.removeEventListener('mouseleave', leavefn);
+      };
+      listeners.push(removeFn);
+    },
+    click: () => {
+      el?.addEventListener('click', showFn);
+
+      addOutClickListener(el, hideFn, (e: MouseEvent) => {
+        return !!popupRef.value?.contains(e.target as HTMLElement);
+      });
+
+      listeners.push(() => {
+        el?.removeEventListener('click', showFn);
+      });
+      listeners.push(() => {
+        removeOutClickListener(el, hideFn);
+      });
+    },
+    focus: () => {
+      el?.addEventListener('focusin', showFn);
+      el?.addEventListener('focusout', hideFn);
+      const removeFn = () => {
+        el?.removeEventListener('focusin', showFn);
+        el?.removeEventListener('focusout', hideFn);
+      };
+      listeners.push(removeFn);
+    },
+    contextmenu: () => {
+      const fn = (e: Event) => {
+        e.preventDefault();
+        showFn();
+      };
+      el?.addEventListener('contextmenu', fn);
+
+      addOutClickListener(el, hideFn, (e: MouseEvent) => {
+        return !!popupRef.value?.contains(e.target as HTMLElement);
+      });
+
+      listeners.push(() => {
+        el?.removeEventListener('contextmenu', fn);
+      });
+
+      listeners.push(() => {
+        removeOutClickListener(el, hideFn);
+      });
+    },
+    none: () => { }
+  };
+
+  triggers.forEach((tr: PopupTriggerT) => {
+    triggerHandlers[tr]();
+  });
+
+  return listeners;
+};
+
+export function getTransformOrigin(position: PopupPositionT) {
+  let left = '0px';
+  let top = '0px';
+  if (['lt', 'lb', 'left', 'tr', 'br'].includes(position)) {
+    left = '100%';
+  } else if (['top', 'bottom'].includes(position)) {
+    left = '50%';
+  }
+
+  if (['tl', 'tr', 'top', 'lb', 'rb'].includes(position)) {
+    top = '100%';
+  } else if (['left', 'right'].includes(position)) {
+    top = '50%';
+  }
+
+  return {
+    top,
+    left,
+  };
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/components/popup/style/index.scss b/packages/opendesign/src/components/popup/style/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f9928e45ea4cb2bf316d56b7ddc71ca2162548bb
--- /dev/null
+++ b/packages/opendesign/src/components/popup/style/index.scss
@@ -0,0 +1,20 @@
+@import './var.scss';
+
+.o-popup {
+  position: absolute;
+  z-index: 100;
+  opacity: 1;
+  transition: opacity var(--o-transition-duration-3);
+  &.out-view {
+    opacity: 0;
+    pointer-events: none;
+  }
+  &.animating {
+    pointer-events: none;
+  }
+}
+
+.o-popup-anchor {
+  position: absolute;
+  z-index: 1;
+}
diff --git a/packages/opendesign/src/components/popup/style/index.ts b/packages/opendesign/src/components/popup/style/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..67aac616fc2524b146b7b078fd3b67c1bd3b4a6e
--- /dev/null
+++ b/packages/opendesign/src/components/popup/style/index.ts
@@ -0,0 +1 @@
+import './index.scss';
diff --git a/packages/opendesign/src/components/popup/style/var.scss b/packages/opendesign/src/components/popup/style/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0183f05a31f458d40ced05a5230e901904a2f7ac
--- /dev/null
+++ b/packages/opendesign/src/components/popup/style/var.scss
@@ -0,0 +1,6 @@
+.o-popup {
+  --popup-bg: var(--o-color-bg2);
+  --popup-shadow: var(--o-shadow-1);
+  --popup-gap: 4px;
+  --popup-radius: var(--o-radius-s);
+}
diff --git a/packages/opendesign/src/components/popup/types.ts b/packages/opendesign/src/components/popup/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9a241c114a70191117892c3a7893c7465e1141d7
--- /dev/null
+++ b/packages/opendesign/src/components/popup/types.ts
@@ -0,0 +1,3 @@
+export type PopupPositionT = 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';
+
+export type PopupTriggerT = 'hover' | 'click' | 'focus' | 'contextmenu' | 'none'
\ No newline at end of file
diff --git a/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserverDemo.vue b/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserverDemo.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c550dc15985b04f55aaedf34a7ca604656bef099
--- /dev/null
+++ b/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserverDemo.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { ResizeObserver } from '../index';
+import { OButton } from '../../button';
+import '../../button/style';
+
+const content = ref('content text: ');
+const listener = ref(true);
+let cnt = 1;
+const changeFn = () => {
+  cnt++;
+  content.value += `-${cnt} `;
+  listener.value = cnt !== 3;
+};
+
+const rlt = reactive({
+  size1: {
+    width: 0,
+    height: 0,
+  },
+  size2: {
+    width: 0,
+    height: 0,
+  },
+  visible1: true,
+  visible2: true,
+});
+
+const onResize = (entry: ResizeObserverEntry, isfirst: boolean, size: 'size1' | 'size2') => {
+  console.log('onResize', isfirst, entry.target);
+
+  rlt[size].width = entry.contentRect.width;
+  rlt[size].height = entry.contentRect.height;
+};
+
+const toggle = (key: 'visible1' | 'visible2') => {
+  rlt[key] = !rlt[key];
+};
+</script>
+<template>
+  <h4>resize observer</h4>
+
+  <ResizeObserver @resize="(en, isfirst) => onResize(en, isfirst, 'size1')">
+    <div v-if="rlt.visible1" class="content" :name="content" @click="changeFn">
+      {{ content }}
+    </div>
+    <p v-else class="content" @click="changeFn">changed: {{ content }}</p>
+    <div @click="toggle('visible1')">toggle</div>
+  </ResizeObserver>
+  <div class="tip">width: {{ rlt.size1.width }}; height: {{ rlt.size1.height }}</div>
+
+  <ResizeObserver @resize="(en, isfirst) => onResize(en, isfirst, 'size2')">
+    <OButton v-if="rlt.visible2" @click="changeFn">
+      {{ content }}
+    </OButton>
+    <div @click="toggle('visible2')">toggle</div>
+  </ResizeObserver>
+  <div class="tip">width: {{ rlt.size2.width }}; height: {{ rlt.size2.height }}</div>
+</template>
+<style lang="scss" scoped>
+.content {
+  display: inline-block;
+}
+.tip {
+  margin: 16px 0 32px;
+}
+</style>
diff --git a/packages/opendesign/src/components/resize-observer/index.ts b/packages/opendesign/src/components/resize-observer/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6853e7033710d188094de18b49d11bad758c0bd1
--- /dev/null
+++ b/packages/opendesign/src/components/resize-observer/index.ts
@@ -0,0 +1 @@
+export { default as ResizeObserver } from './resize-observer';
\ No newline at end of file
diff --git a/packages/opendesign/src/components/resize-observer/resize-observer.ts b/packages/opendesign/src/components/resize-observer/resize-observer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e49e341a5a88036785658e3680f9697329c05d7e
--- /dev/null
+++ b/packages/opendesign/src/components/resize-observer/resize-observer.ts
@@ -0,0 +1,22 @@
+import { defineComponent, cloneVNode, withDirectives } from 'vue';
+import { useReiszeObserverDirective } from '../hooks';
+
+/**
+ * 子元素resize监听
+ * 如果有多个子元素，每个子元素都会被监听到
+ */
+export default defineComponent({
+  name: 'ResizeObserver',
+  emits: ['resize'],
+  setup(props, { emit, slots }) {
+    const { vResizeObserver } = useReiszeObserverDirective((entry: ResizeObserverEntry, isFirst: boolean) => {
+      // 触发resize事件
+      emit('resize', entry, isFirst);
+    });
+
+    return () => {
+      const children = slots.default?.();
+      return children?.map((item) => withDirectives(cloneVNode(item), [[vResizeObserver]]));
+    };
+  },
+});
diff --git a/packages/opendesign/src/components/select/OSelect.vue b/packages/opendesign/src/components/select/OSelect.vue
new file mode 100644
index 0000000000000000000000000000000000000000..73a767e41d09881064f64a09ac62a81261e94972
--- /dev/null
+++ b/packages/opendesign/src/components/select/OSelect.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { defaultSize, defaultShape } from '../_shared/global';
+import type { SizeT, ShapeT } from '../_shared/global';
+import { OptionProvideKey } from '../_shared/global';
+import type { OptionValueT } from '../_shared/global';
+import { IconArrowTraingleDown } from '../icons';
+import { OPopup, PopupPositionT } from '../popup';
+
+interface SelectPropT {
+  size?: SizeT;
+  shape?: ShapeT;
+  modelValue: string | number;
+  placeholder?: string;
+  disabled?: boolean;
+  optionPosition?: PopupPositionT;
+  optionWidthMode?: 'auto' | 'min-width' | 'width';
+  optionWrapClass?: string;
+}
+const props = withDefaults(defineProps<SelectPropT>(), {
+  modelValue: '',
+  size: defaultSize.value,
+  shape: defaultShape.value,
+  placeholder: 'please select...',
+  optionPosition: 'bl',
+  optionWidthMode: 'min-width',
+  optionWrapClass: '',
+});
+
+const activeLabel = ref('');
+const activeVal = ref(props.modelValue);
+const emits = defineEmits(['update:modelValue']);
+const selectRef = ref<HTMLElement>();
+
+const showOption = ref(false);
+provide(`${OptionProvideKey}/update`, (val: OptionValueT, emit?: boolean) => {
+  activeLabel.value = val.label;
+  if (emit) {
+    emits('update:modelValue', val.value);
+    activeVal.value = val.value;
+    showOption.value = false;
+  }
+});
+
+provide(`${OptionProvideKey}/value`, activeVal);
+const onOptionChange = (visible: boolean) => {
+  if (visible) {
+    console.log(selectRef.value?.clientWidth);
+  }
+};
+</script>
+<template>
+  <div ref="selectRef" class="o-select" :class="[`o-select-size-${props.size}`, `o-select-shape-${props.shape}`, { 'is-selecting': showOption }]">
+    <div class="o-select-wrap" :class="{ 'is-disabled': props.disabled }">
+      <input :value="activeLabel" type="text" :placeholder="props.placeholder" class="o-select-input" readonly />
+      <span class="o-select-suffix">
+        <slot name="suffix">
+          <span class="o-select-icon-arrow" :class="{ active: showOption }">
+            <IconArrowTraingleDown />
+          </span>
+        </slot>
+      </span>
+    </div>
+    <OPopup
+      v-model:visible="showOption"
+      :position="props.optionPosition"
+      :target="selectRef"
+      trigger="click"
+      :offset="4"
+      :adjust-min-width="props.optionWidthMode === 'min-width'"
+      :adjust-width="props.optionWidthMode === 'width'"
+      @change="onOptionChange"
+    >
+      <div class="o-select-options" :class="[`o-options-size-${props.size}`, props.optionWrapClass]">
+        <slot></slot>
+      </div>
+    </OPopup>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/select/__demo__/SelectDisabled.vue b/packages/opendesign/src/components/select/__demo__/SelectDisabled.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3ff67101d94745a56edd9244a68cc3ae12e56d43
--- /dev/null
+++ b/packages/opendesign/src/components/select/__demo__/SelectDisabled.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OSelect } from '../index';
+import { OOption } from '../../option';
+
+const selectVal = ref('opt1');
+const selectVal2 = ref('');
+const options = [
+  { label: 'option 1', value: 'opt1' },
+  { label: 'option 2', value: 'opt2' },
+  { label: 'option 3', value: 'opt3' },
+  { label: 'option 4', value: 'opt4' },
+];
+</script>
+<template>
+  <h4>Disabled</h4>
+  <section>
+    <OSelect v-model="selectVal">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+      <OOption :label="options[2].label" :value="options[2].value" />
+      <OOption :label="options[3].label" :value="options[3].value" />
+    </OSelect>
+
+    <OSelect v-model="selectVal2">
+      <OOption :value="options[0].value" />
+      <OOption :value="options[1].value" disabled />
+    </OSelect>
+
+    <OSelect v-model="selectVal2" disabled>
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+      <OOption :label="options[2].label" :value="options[2].value" disabled />
+      <OOption :label="options[3].label" :value="options[3].value" />
+    </OSelect>
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/select/__demo__/SelectPopupposition.vue b/packages/opendesign/src/components/select/__demo__/SelectPopupposition.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fea66fbc519c69715c117b96c5ce424ffb969ace
--- /dev/null
+++ b/packages/opendesign/src/components/select/__demo__/SelectPopupposition.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OSelect } from '../index';
+import { OOption } from '../../option';
+
+const selectVal = ref('opt1');
+const selectVal2 = ref('');
+const options = [
+  { label: 'option 1', value: 'opt1' },
+  { label: 'option 2', value: 'opt2' },
+];
+</script>
+<template>
+  <h4>popup position</h4>
+  <section>
+    <OSelect v-model="selectVal" option-position="tl">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+    </OSelect>
+    <OSelect v-model="selectVal2" option-position="top">
+      <OOption :value="options[0].value" />
+      <OOption :value="options[1].value" disabled />
+    </OSelect>
+    <OSelect v-model="selectVal2" option-position="tr">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+    </OSelect>
+    <OSelect v-model="selectVal2" option-position="bl">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+    </OSelect>
+    <OSelect v-model="selectVal2" option-position="bottom">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+    </OSelect>
+    <OSelect v-model="selectVal2" option-position="br">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+    </OSelect>
+
+    <OSelect v-model="selectVal2" option-position="lt">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+    </OSelect>
+    <OSelect v-model="selectVal2" option-position="left">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+    </OSelect>
+    <OSelect v-model="selectVal2" option-position="lb">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+    </OSelect>
+
+    <OSelect v-model="selectVal2" option-position="rt">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+    </OSelect>
+    <OSelect v-model="selectVal2" option-position="right">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+    </OSelect>
+    <OSelect v-model="selectVal2" option-position="rb">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+    </OSelect>
+  </section>
+</template>
+<style lang="scss" scoped>
+section > * {
+  margin: 40px;
+}
+</style>
diff --git a/packages/opendesign/src/components/select/__demo__/SelectSize.vue b/packages/opendesign/src/components/select/__demo__/SelectSize.vue
new file mode 100644
index 0000000000000000000000000000000000000000..66c80f656d75ae6f6c2f192ec8522171f5b5040f
--- /dev/null
+++ b/packages/opendesign/src/components/select/__demo__/SelectSize.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OSelect } from '../index';
+import { OOption } from '../../option';
+const selectVal = ref('opt1');
+const selectVal2 = ref('');
+const options = [
+  { label: 'option 1', value: 'opt1' },
+  { label: 'long long long long long long long long long long long long text option 2', value: 'opt2' },
+  { label: 'option 3', value: 'opt3' },
+  { label: 'option 4', value: 'opt4' },
+];
+</script>
+<template>
+  <h4>Size</h4>
+  <section>
+    <OSelect v-model="selectVal" size="large">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" />
+      <OOption :label="options[2].label" :value="options[2].value" />
+      <OOption :label="options[3].label" :value="options[3].value" />
+    </OSelect>
+
+    <OSelect v-model="selectVal2">
+      <OOption :value="options[0].value" />
+      <OOption :value="options[1].value" disabled />
+    </OSelect>
+
+    <OSelect v-model="selectVal2" size="small">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+      <OOption :label="options[2].label" :value="options[2].value" />
+      <OOption :label="options[3].label" :value="options[3].value" />
+    </OSelect>
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/select/index.ts b/packages/opendesign/src/components/select/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..54dbbeb80e0288a53c50bbc17ed69b6886406f8d
--- /dev/null
+++ b/packages/opendesign/src/components/select/index.ts
@@ -0,0 +1,14 @@
+import _OSelect from './OSelect.vue';
+import type { App } from 'vue';
+
+// export * from './types';
+
+const OSelect = Object.assign(_OSelect, {
+  install(app: App) {
+    app.component(_OSelect.name, _OSelect);
+  },
+});
+
+export {
+  OSelect,
+};
diff --git a/packages/opendesign/src/components/select/style/index.scss b/packages/opendesign/src/components/select/style/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a56f7e44b8accedd1b10b72cadfb6da04cffb8e4
--- /dev/null
+++ b/packages/opendesign/src/components/select/style/index.scss
@@ -0,0 +1,78 @@
+@import './var.scss';
+@import '../../popup/style/index.scss';
+
+.o-select-size-small {
+  .o-select-wrap {
+    padding: 0 4px 0 8px;
+    height: var(--select-height-s);
+    border-radius: var(--select-radius-s);
+  }
+}
+
+.o-select-size-normal {
+  .o-select-wrap {
+    padding: 4px 8px 4px 12px;
+    height: var(--select-height-m);
+    border-radius: var(--select-radius-m);
+  }
+}
+
+.o-select-size-large {
+  .o-select-wrap {
+    padding: 4px 12px 4px 16px;
+    height: var(--select-height-l);
+    border-radius: var(--select-radius-l);
+  }
+}
+
+.o-select-input {
+  outline: none;
+  border: none;
+  padding: 0;
+  cursor: inherit;
+  background-color: transparent;
+  display: inline-flex;
+}
+.o-select-wrap {
+  border: 1px solid var(--select-border);
+  border-radius: 4px;
+  padding: 0 12px;
+  cursor: pointer;
+  color: var(--select-color);
+  display: inline-flex;
+  height: var(--select-height-m);
+
+  &:hover {
+    border-color: var(--select-border_hover);
+    background-color: var(--select-bg_hover);
+  }
+  &.is-disabled {
+    cursor: not-allowed;
+    border-color: var(--select-border_disabled);
+    background-color: var(--select-bg_disabled);
+    color: var(--select-color_disabled);
+  }
+}
+.o-select-suffix {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.o-select-icon-arrow {
+  display: inline-flex;
+  align-items: center;
+  transition: transform var(--o-transition-duration-2);
+  svg {
+    display: block;
+  }
+  &.active {
+    transform: rotateX(180deg);
+  }
+}
+
+.o-select-options {
+  background-color: var(--select-options-bg);
+  box-shadow: var(--select-options-shadow);
+  border-radius: var(--select-options-radius);
+  border: var(--select-options-border);
+}
diff --git a/packages/opendesign/src/components/select/style/index.ts b/packages/opendesign/src/components/select/style/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..67aac616fc2524b146b7b078fd3b67c1bd3b4a6e
--- /dev/null
+++ b/packages/opendesign/src/components/select/style/index.ts
@@ -0,0 +1 @@
+import './index.scss';
diff --git a/packages/opendesign/src/components/select/style/var.scss b/packages/opendesign/src/components/select/style/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..525a0aaf6d97358155a867797540304b32b9f999
--- /dev/null
+++ b/packages/opendesign/src/components/select/style/var.scss
@@ -0,0 +1,31 @@
+.o-select {
+  --select-text-size: var(--o-font_size-text);
+  --select-text-height: var(--o-line_height-text);
+
+  --select-height-s: var(--o-size-s);
+  --select-height-m: var(--o-size-m);
+  --select-height-l: var(--o-size-l);
+
+  --select-radius-s: var(--o-radius-s);
+  --select-radius-m: var(--o-radius-s);
+  --select-radius-l: var(--o-radius-s);
+
+  --select-border: var(--o-color-info1);
+  --select-border_hover: var(--o-color-primary2);
+  --select-border_active: var(--o-color-primary3);
+  --select-border_disabled: var(--o-color-info1);
+
+  --select-bg: var(--o-color-bg1);
+  --select-bg_hover: var(--o-color-bg2);
+  --select-bg_disabled: var(--o-color-info4);
+
+  --select-color: var(--o-color-text2);
+  --select-color_disabled: var(--o-color-text4);
+}
+
+.o-select-options {
+  --select-options-bg: var(--o-color-bg2);
+  --select-options-shadow: none;
+  --select-options-border: 1px solid var(--o-color-primary2);
+  --select-options-radius: var(--o-radius-s);
+}
diff --git a/packages/opendesign/src/components/select/types.ts b/packages/opendesign/src/components/select/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..139597f9cb07c5d48bed18984ec4747f4b4f3438
--- /dev/null
+++ b/packages/opendesign/src/components/select/types.ts
@@ -0,0 +1,2 @@
+
+
diff --git a/packages/opendesign/src/components/style/animation.scss b/packages/opendesign/src/components/style/animation.scss
index fd25de4c3a8058bc80dad58aaf17d52debad9181..d8dc938eef21662c6d5b0dca6c5f52735d9123a0 100644
--- a/packages/opendesign/src/components/style/animation.scss
+++ b/packages/opendesign/src/components/style/animation.scss
@@ -9,3 +9,21 @@ $ani-prefix: 'o-ani';
     transform: rotate(360deg);
   }
 }
+
+@keyframes o-zoom-fade-in {
+  0% {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.o-zoom-fade-enter-active {
+  animation: o-zoom-fade-in var(--o-transition-duration-2);
+}
+.o-zoom-fade-leave-active {
+  animation: o-zoom-fade-in var(--o-transition-duration-1) reverse;
+}
diff --git a/packages/opendesign/src/components/style/index.scss b/packages/opendesign/src/components/style/index.scss
index 46607785a88b56d828d6200ccb1a1ca4e985c28a..000a1904e9a2355d69fab4487f9b799e070cfdbb 100644
--- a/packages/opendesign/src/components/style/index.scss
+++ b/packages/opendesign/src/components/style/index.scss
@@ -1,3 +1,5 @@
+@import './animation.scss';
+
 [class^='o-'],
 [class^='o-'] * {
   box-sizing: border-box;
@@ -7,6 +9,9 @@
   --o-size-l: 40px;
   --o-size-m: 32px;
   --o-size-s: 24px;
+  --o-transition-duration-1: 0.1s;
+  --o-transition-duration-2: 0.2s;
+  --o-transition-duration-3: 0.3s;
 }
 
 // icons
diff --git a/packages/opendesign/src/components/style/index.ts b/packages/opendesign/src/components/style/index.ts
index 84b269b263a9eed41b13555521a780183e8b1149..67aac616fc2524b146b7b078fd3b67c1bd3b4a6e 100644
--- a/packages/opendesign/src/components/style/index.ts
+++ b/packages/opendesign/src/components/style/index.ts
@@ -1,2 +1 @@
-import './animation.scss';
 import './index.scss';
diff --git a/packages/opendesign/src/components/vite-env.d.ts b/packages/opendesign/src/components/vite-env.d.ts
index af36df349a654c7c39061abbf656a6e5b5b48f8c..16d09e2277ec1838aa4d6417decf1c7b76d87560 100644
--- a/packages/opendesign/src/components/vite-env.d.ts
+++ b/packages/opendesign/src/components/vite-env.d.ts
@@ -5,3 +5,7 @@ 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/portal/src/pages/TheIntersectionObserver.vue b/packages/portal/src/pages/TheIntersectionObserver.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f773d95771e4d84f825266c19a72f9af5c835c94
--- /dev/null
+++ b/packages/portal/src/pages/TheIntersectionObserver.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import IntersectionObserverDemo from '@demo/intersection-observer/__demo__/IntersectionObserverDemo.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <IntersectionObserverDemo />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/portal/src/pages/ThePopover.vue b/packages/portal/src/pages/ThePopover.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a16f012ba332f586c32692254e1ab574bdbbba8b
--- /dev/null
+++ b/packages/portal/src/pages/ThePopover.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import '@opensig/opendesign/src/components/popup/style';
+import '@opensig/opendesign/src/components/popover/style';
+
+import PopoverPosition from '@demo/popover/__demo__/PopoverPosition.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <PopoverPosition />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/portal/src/pages/ThePopup.vue b/packages/portal/src/pages/ThePopup.vue
new file mode 100644
index 0000000000000000000000000000000000000000..900d72c400e5df0fd9ed58309e755829fdc097f9
--- /dev/null
+++ b/packages/portal/src/pages/ThePopup.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import '@opensig/opendesign/src/components/popup/style';
+
+import PopupPosition from '@demo/popup/__demo__/PopupPosition.vue';
+import PopupVisible from '@demo/popup/__demo__/PopupVisible.vue';
+import PopupContainer from '@demo/popup/__demo__/PopupContainer.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <PopupContainer />
+    <PopupPosition />
+    <PopupVisible />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/portal/src/pages/TheResizeObserver.vue b/packages/portal/src/pages/TheResizeObserver.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9c5d0acf5e254f84e551c7d1d0f1ca8416430fd5
--- /dev/null
+++ b/packages/portal/src/pages/TheResizeObserver.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import ResizeObserver from '@demo/resize-observer/__demo__/ResizeObserverDemo.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <!-- <SelectSize /> -->
+    <!-- <SelectDisabled /> -->
+    <ResizeObserver />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/portal/src/pages/TheSelect.vue b/packages/portal/src/pages/TheSelect.vue
new file mode 100644
index 0000000000000000000000000000000000000000..91b4680e38eee6301fc00da9b517a9ac97d22adb
--- /dev/null
+++ b/packages/portal/src/pages/TheSelect.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import '@opensig/opendesign/src/components/select/style';
+import '@opensig/opendesign/src/components/option/style';
+
+import SelectSize from '@demo/select/__demo__/SelectSize.vue';
+import SelectDisabled from '@demo/select/__demo__/SelectDisabled.vue';
+import SelectPopupposition from '@demo/select/__demo__/SelectPopupposition.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <SelectSize />
+    <SelectDisabled />
+    <SelectPopupposition />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index e5911eed885f48ec1bf308543212ddef239cc0b3..c7ab0998859693004f5e91e672b9b2d5e6e5fd02 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -20,6 +20,38 @@ export const routes = [
     label: '开关',
     component: () => import('./pages/TheSwitch.vue'),
   },
+  {
+    path: '/resize-observer',
+    name: 'ResizeObserver',
+    label: 'resize监听',
+    component: () => import('./pages/TheResizeObserver.vue'),
+  },
+  {
+    path: '/intersection-observer',
+    name: 'IntersectionObserver',
+    label: 'Intersection监听',
+    component: () => import('./pages/TheIntersectionObserver.vue'),
+  },
+  {
+    path: '/popup',
+    name: 'Popup',
+    label: '弹层',
+    component: () => import('./pages/ThePopup.vue'),
+  },
+  {
+    path: '/popover',
+    name: 'Popover',
+    label: '弹出框',
+    component: () => import('./pages/ThePopover.vue'),
+  },
+  {
+    path: '/select',
+    name: 'Select',
+    label: '下拉框',
+    component: () => import('./pages/TheSelect.vue'),
+  },
+
+
 ];
 
 export const router = createRouter({
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 549880912614dc7e6847792fd4f33ef512480a72..bc28d4d0415515e27ae43b4eb9f5a9fa04b01eda 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,14 +21,22 @@ importers:
   packages/opendesign:
     specifiers:
       '@opensig/opensig-scripts': workspace:^0.0.1
+      '@types/lodash-es': ^4.17.6
       '@vue/shared': ^3.2.45
+      intersection-observer-polyfill: ^0.1.0
+      lodash-es: ^4.17.21
+      resize-observer-polyfill: ^1.5.1
       typescript: ^4.6.4
       vue: ^3.2.41
       vue-tsc: ^1.0.13
     dependencies:
       '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.45
+      intersection-observer-polyfill: 0.1.0
+      lodash-es: 4.17.21
+      resize-observer-polyfill: 1.5.1
     devDependencies:
       '@opensig/opensig-scripts': link:../scripts
+      '@types/lodash-es': 4.17.6
       typescript: 4.9.3
       vue: 3.2.45
       vue-tsc: 1.0.13_typescript@4.9.3
@@ -366,6 +374,16 @@ packages:
     resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
     dev: true
 
+  /@types/lodash-es/4.17.6:
+    resolution: {integrity: sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==}
+    dependencies:
+      '@types/lodash': 4.14.191
+    dev: true
+
+  /@types/lodash/4.14.191:
+    resolution: {integrity: sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==}
+    dev: true
+
   /@types/minimatch/5.1.2:
     resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==}
     dev: true
@@ -1497,6 +1515,10 @@ packages:
   /inherits/2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
+  /intersection-observer-polyfill/0.1.0:
+    resolution: {integrity: sha512-kYxriUk7Dl8GPu2TuOFAbtG5+UK0LLrLzlUErF8R9w5iPWmrtfVZsjCYbGF0/SyRDo1VfHMOZYBB2svb2locbw==}
+    dev: false
+
   /is-binary-path/2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
@@ -1599,6 +1621,10 @@ packages:
       p-locate: 5.0.0
     dev: true
 
+  /lodash-es/4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: false
+
   /lodash.get/4.4.2:
     resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
     dev: false
@@ -1812,6 +1838,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /resize-observer-polyfill/1.5.1:
+    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
+    dev: false
+
   /resolve-from/4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}