From 21db2f3bdc2574b152e56d1c1919a39ad54a7d94 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 7 Mar 2023 21:25:59 +0800
Subject: [PATCH 1/7] token theme attr

---
 packages/opendesign/src/components/style/dark.token.css   | 8 ++++----
 .../src/components/style/default-light.token.css          | 8 ++++----
 packages/scripts/src/gen-tokens/index.ts                  | 2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/opendesign/src/components/style/dark.token.css b/packages/opendesign/src/components/style/dark.token.css
index 816bc980d..64377f1d5 100644
--- a/packages/opendesign/src/components/style/dark.token.css
+++ b/packages/opendesign/src/components/style/dark.token.css
@@ -1,5 +1,5 @@
 /* theme: dark */
-:root[theme="dark"] {
+[data-o-theme="dark"] {
   /**
    * @name 
    * @type palette
@@ -1196,21 +1196,21 @@
    * @group radius
    * @description 大尺寸控件圆角
    */
-  --o-radius-control-l: var(--o-radius-control-l);
+  --o-radius-control-l: var(--o-radius-l);
   /**
    * @name 中尺寸控件圆角
    * @type size
    * @group radius
    * @description 中尺寸控件圆角
    */
-  --o-radius-control-m: var(--o-radius-control-m);
+  --o-radius-control-m: var(--o-radius-m);
   /**
    * @name 小尺寸控件圆角
    * @type size
    * @group radius
    * @description 小尺寸控件圆角
    */
-  --o-radius-control-s: var(--o-radius-control-s);
+  --o-radius-control-s: var(--o-radius-s);
   /**
    * @name 持续时间
    * @type animation
diff --git a/packages/opendesign/src/components/style/default-light.token.css b/packages/opendesign/src/components/style/default-light.token.css
index 6ce10582f..ab0d97593 100644
--- a/packages/opendesign/src/components/style/default-light.token.css
+++ b/packages/opendesign/src/components/style/default-light.token.css
@@ -1,6 +1,6 @@
 /* theme: default|light */
 :root,
-:root[theme="light"] {
+[data-o-theme="light"] {
   /**
    * @name 
    * @type palette
@@ -1197,21 +1197,21 @@
    * @group radius
    * @description 大尺寸控件圆角
    */
-  --o-radius-control-l: var(--o-radius-control-l);
+  --o-radius-control-l: var(--o-radius-l);
   /**
    * @name 中尺寸控件圆角
    * @type size
    * @group radius
    * @description 中尺寸控件圆角
    */
-  --o-radius-control-m: var(--o-radius-control-m);
+  --o-radius-control-m: var(--o-radius-m);
   /**
    * @name 小尺寸控件圆角
    * @type size
    * @group radius
    * @description 小尺寸控件圆角
    */
-  --o-radius-control-s: var(--o-radius-control-s);
+  --o-radius-control-s: var(--o-radius-s);
   /**
    * @name 持续时间
    * @type animation
diff --git a/packages/scripts/src/gen-tokens/index.ts b/packages/scripts/src/gen-tokens/index.ts
index 3e734e465..416431bd6 100644
--- a/packages/scripts/src/gen-tokens/index.ts
+++ b/packages/scripts/src/gen-tokens/index.ts
@@ -141,7 +141,7 @@ function tokenCssTemplate(themeArray: string[], tokens: Array<ThemeTokenT>) {
     if (t === 'default') {
       return ':root';
     }
-    return `:root[theme="${t}"]`;
+    return `[data-o-theme="${t}"]`;
   });
 
   return `/* theme: ${themeArray.join('|')} */
-- 
Gitee


From 9845dd6d331736aa703c623c0c2332d712708f30 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 8 Mar 2023 14:25:32 +0800
Subject: [PATCH 2/7] =?UTF-8?q?=E6=9E=84=E5=BB=BA=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/package.json                     | 2 +-
 packages/scripts/src/build-components/vite.config.ts | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json
index b1357eb00..055018ddf 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -2,7 +2,7 @@
   "name": "@opensig/opendesign",
   "version": "0.0.2",
   "main": "lib/index.js",
-  "module": "es/index.js",
+  "module": "es/index.mjs",
   "types": "es/index.d.ts",
   "typings": "lib/index.d.ts",
   "unpkg": "dist/opendesign.min.js",
diff --git a/packages/scripts/src/build-components/vite.config.ts b/packages/scripts/src/build-components/vite.config.ts
index 289496d2e..687bd1443 100644
--- a/packages/scripts/src/build-components/vite.config.ts
+++ b/packages/scripts/src/build-components/vite.config.ts
@@ -22,16 +22,16 @@ export default (): InlineConfig => {
           {
             format: 'es',
             dir: 'es',
-            entryFileNames: '[name].js',
+            entryFileNames: '[name].mjs',
             preserveModules: true,
-            preserveModulesRoot: 'components',
+            preserveModulesRoot: 'src/components',
           },
           {
             format: 'commonjs',
             dir: 'lib',
             entryFileNames: '[name].js',
             preserveModules: true,
-            preserveModulesRoot: 'components',
+            preserveModulesRoot: 'src/components',
           },
         ],
         external: ['vue'],
-- 
Gitee


From e797ae5cae3e6184dd96301459588025323410bc Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 8 Mar 2023 14:26:55 +0800
Subject: [PATCH 3/7] rm

---
 packages/opendesign/README.md | 20 +-------------------
 1 file changed, 1 insertion(+), 19 deletions(-)

diff --git a/packages/opendesign/README.md b/packages/opendesign/README.md
index e47e7b781..b6adf0304 100644
--- a/packages/opendesign/README.md
+++ b/packages/opendesign/README.md
@@ -1,21 +1,3 @@
 # opendesign components
 
-- vue3 components
-
-# build
-
-1. generate icon component
-   ```
-   pnpm gen:icon
-   ```
-2. build component
-
-   ```
-   pnpm build:component
-   ```
-
-3. build style
-
-   ```
-   pnpm build:style
-   ```
+- vue3 components for opendesign
-- 
Gitee


From c03bb50d7cedac14d1a11bf332f5c2e003199858 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 8 Mar 2023 14:28:28 +0800
Subject: [PATCH 4/7] up vresion

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

diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json
index 055018ddf..c62854b60 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opensig/opendesign",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "lib/index.js",
   "module": "es/index.mjs",
   "types": "es/index.d.ts",
-- 
Gitee


From b009016d1f0c2d3c44fd307faeb573fb0e2e5ede Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 8 Mar 2023 18:12:50 +0800
Subject: [PATCH 5/7] =?UTF-8?q?ssr=20=E5=85=BC=E5=AE=B9=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/global.md                       |   6 +
 .../src/components/_shared/client-only.ts     |  17 ++
 .../src/components/directves/click-outside.ts |   7 +-
 .../components/directves/on-intersection.ts   |   9 +-
 .../src/components/directves/on-resize.ts     |   9 +-
 .../hooks/use-element-intersection.ts         |   9 +-
 .../components/hooks/use-element-resize.ts    |   9 +-
 .../hooks/use-intersection-observer.ts        |   2 +-
 .../src/components/hooks/use-out-click.ts     |  24 +-
 .../components/hooks/use-resize-observer.ts   |   2 +-
 packages/opendesign/src/components/index.scss |   1 +
 packages/opendesign/src/components/index.ts   |   1 +
 .../src/components/input/OInput.vue           |  14 +-
 .../components/input/__demo__/InputBasic.vue  |   2 +-
 .../src/components/popup/OPopup.vue           | 212 +++++++++---------
 .../opendesign/src/components/popup/popup.ts  |   2 +-
 .../opendesign/src/components/popup/types.ts  |   2 +-
 .../src/components/select/OSelect.vue         |  53 ++---
 .../src/components/tabs/OTabPane.vue          |  39 ++--
 .../src/components/textarea/OTextarea.vue     |  10 +-
 .../opendesign/src/components/vite-env.d.ts   |   6 +-
 21 files changed, 246 insertions(+), 190 deletions(-)
 create mode 100644 packages/opendesign/src/components/_shared/client-only.ts

diff --git a/packages/docs/global.md b/packages/docs/global.md
index e3dd5322c..a5cb12b33 100644
--- a/packages/docs/global.md
+++ b/packages/docs/global.md
@@ -35,3 +35,9 @@
 - 边框（bd） `--btn-bd: 1px solid var(--o-color-control1)`
 - 边框颜色（bd-color） `--btn-bd-color: var(--o-color-control1)`
 - 背景颜色（bg-color） `--btn-bg-color: var(--o-color-control1)`
+
+# polyfill
+
+> resize-observer-polyfill
+> intersection-observer-polyfill
+> 建议在项目使用时引入
diff --git a/packages/opendesign/src/components/_shared/client-only.ts b/packages/opendesign/src/components/_shared/client-only.ts
new file mode 100644
index 000000000..04dc3d01c
--- /dev/null
+++ b/packages/opendesign/src/components/_shared/client-only.ts
@@ -0,0 +1,17 @@
+import { defineComponent, onMounted, ref } from 'vue';
+
+/**
+ * 只渲染一个子元素
+ */
+export default defineComponent({
+  name: 'ClientOnly',
+  setup(props, { slots }) {
+    const isMoutned = ref(false);
+    onMounted(() => {
+      isMoutned.value = true;
+    });
+    return () => {
+      return isMoutned.value ? slots.default?.() : null;
+    };
+  },
+});
diff --git a/packages/opendesign/src/components/directves/click-outside.ts b/packages/opendesign/src/components/directves/click-outside.ts
index d379d1761..2530a3cd3 100644
--- a/packages/opendesign/src/components/directves/click-outside.ts
+++ b/packages/opendesign/src/components/directves/click-outside.ts
@@ -1,14 +1,15 @@
 import { ObjectDirective, DirectiveBinding } from 'vue';
 import { useOutClick } from '../hooks/use-out-click';
 
-const { addOutClickListener, removeOutClickListener } = useOutClick();
 
+let out: ReturnType<typeof useOutClick> | null = null;
 const vOutClick: ObjectDirective = {
   beforeMount(el: HTMLElement, binding: DirectiveBinding) {
-    addOutClickListener(el, binding.value);
+    out = useOutClick();
+    out?.addOutClickListener(el, binding.value);
   },
   unmounted(el: HTMLElement) {
-    removeOutClickListener(el);
+    out?.removeOutClickListener(el);
   }
 };
 
diff --git a/packages/opendesign/src/components/directves/on-intersection.ts b/packages/opendesign/src/components/directves/on-intersection.ts
index 73468b4ae..158c2cf84 100644
--- a/packages/opendesign/src/components/directves/on-intersection.ts
+++ b/packages/opendesign/src/components/directves/on-intersection.ts
@@ -2,19 +2,22 @@ import { DirectiveBinding, ObjectDirective } from 'vue';
 import { useIntersectionObserver, IntersectionListenerT } from '../hooks';
 import { isFunction } from '../_shared/is';
 
-const io = useIntersectionObserver();
+let io: ReturnType<typeof useIntersectionObserver> | null = null;
 let listener: IntersectionListenerT = () => null;
 
 const vIntersection: ObjectDirective = {
+  beforeMount() {
+    io = useIntersectionObserver();
+  },
   mounted(el: HTMLElement, binding: DirectiveBinding) {
     if (isFunction(binding.value)) {
       listener = binding.value;
-      io.addIntersectionListener(el, listener);
+      io?.addIntersectionListener(el, listener);
     }
   },
   unmounted(el: HTMLElement) {
     if (listener) {
-      io.removeIntersectionListener(el, listener);
+      io?.removeIntersectionListener(el, listener);
     }
   },
 };
diff --git a/packages/opendesign/src/components/directves/on-resize.ts b/packages/opendesign/src/components/directves/on-resize.ts
index 6348ad476..7d7f9619a 100644
--- a/packages/opendesign/src/components/directves/on-resize.ts
+++ b/packages/opendesign/src/components/directves/on-resize.ts
@@ -2,19 +2,22 @@ import { DirectiveBinding, ObjectDirective } from 'vue';
 import { useResizeObserver, ResizeListenerT } from '../hooks';
 import { isFunction } from '../_shared/is';
 
-const ob = useResizeObserver();
 let listener: ResizeListenerT = () => null;
+let ro: ReturnType<typeof useResizeObserver> | null = null;
 
 const vOnResize: ObjectDirective = {
+  beforeMount() {
+    ro = useResizeObserver();
+  },
   mounted(el: HTMLElement, binding: DirectiveBinding) {
     if (isFunction(binding.value)) {
       listener = binding.value;
-      ob.addResizeListener(el, listener);
+      ro?.addResizeListener(el, listener);
     }
   },
   unmounted(el: HTMLElement) {
     if (listener) {
-      ob.removeResizeListener(el, listener);
+      ro?.removeResizeListener(el, listener);
     }
   },
 };
diff --git a/packages/opendesign/src/components/hooks/use-element-intersection.ts b/packages/opendesign/src/components/hooks/use-element-intersection.ts
index 37943dba5..30c20e713 100644
--- a/packages/opendesign/src/components/hooks/use-element-intersection.ts
+++ b/packages/opendesign/src/components/hooks/use-element-intersection.ts
@@ -3,21 +3,24 @@ import { useIntersectionObserver } from './use-intersection-observer';
 import type { IntersectionListenerT } from './use-intersection-observer';
 import { isFunction } from '../_shared/is';
 
-const io = useIntersectionObserver();
+let io: ReturnType<typeof useIntersectionObserver> | null = null;
 export function useIntersectionObserverDirective({ listener, removeOnUnmounted }: {
   listener: IntersectionListenerT,
   removeOnUnmounted?: boolean
 }): { vIntersectionObserver: ObjectDirective } {
   return {
     vIntersectionObserver: {
+      beforeMount() {
+        io = useIntersectionObserver();
+      },
       mounted(el: HTMLElement) {
         if (isFunction(listener)) {
-          io.addIntersectionListener(el, listener);
+          io?.addIntersectionListener(el, listener);
         }
       },
       unmounted(el: HTMLElement) {
         if (listener && removeOnUnmounted) {
-          io.removeIntersectionListener(el, listener);
+          io?.removeIntersectionListener(el, listener);
         }
       },
     }
diff --git a/packages/opendesign/src/components/hooks/use-element-resize.ts b/packages/opendesign/src/components/hooks/use-element-resize.ts
index 72c60f481..bfc633ed2 100644
--- a/packages/opendesign/src/components/hooks/use-element-resize.ts
+++ b/packages/opendesign/src/components/hooks/use-element-resize.ts
@@ -3,18 +3,21 @@ import { useResizeObserver } from './use-resize-observer';
 import type { ResizeListenerT } from './use-resize-observer';
 import { isFunction } from '../_shared/is';
 
-const ob = useResizeObserver();
+let ro: ReturnType<typeof useResizeObserver> | null = null;
 export function useReiszeObserverDirective(onResize: ResizeListenerT): { vResizeObserver: ObjectDirective } {
   return {
     vResizeObserver: {
+      beforeMount() {
+        ro = useResizeObserver();
+      },
       mounted(el: HTMLElement) {
         if (isFunction(onResize)) {
-          ob.addResizeListener(el, onResize);
+          ro?.addResizeListener(el, onResize);
         }
       },
       unmounted(el: HTMLElement) {
         if (onResize) {
-          ob.removeResizeListener(el, onResize);
+          ro?.removeResizeListener(el, onResize);
         }
       },
     }
diff --git a/packages/opendesign/src/components/hooks/use-intersection-observer.ts b/packages/opendesign/src/components/hooks/use-intersection-observer.ts
index 2a62f8c8d..8d2022319 100644
--- a/packages/opendesign/src/components/hooks/use-intersection-observer.ts
+++ b/packages/opendesign/src/components/hooks/use-intersection-observer.ts
@@ -1,4 +1,4 @@
-import IntersectionObserver from 'intersection-observer-polyfill';
+// import IntersectionObserver from 'intersection-observer-polyfill';
 import { isFunction } from '../_shared/is';
 
 export type IntersectionListenerT = (entry: IntersectionObserverEntry) => void;
diff --git a/packages/opendesign/src/components/hooks/use-out-click.ts b/packages/opendesign/src/components/hooks/use-out-click.ts
index 90f5d9912..b2a8126ef 100644
--- a/packages/opendesign/src/components/hooks/use-out-click.ts
+++ b/packages/opendesign/src/components/hooks/use-out-click.ts
@@ -5,18 +5,6 @@ interface handlerItemT {
 
 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, []);
@@ -47,6 +35,18 @@ function removeOutClickListener(el: HTMLElement, listener?: () => void) {
 }
 
 export function useOutClick() {
+  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();
+          }
+        });
+      }
+    });
+  });
+
   return {
     addOutClickListener,
     removeOutClickListener,
diff --git a/packages/opendesign/src/components/hooks/use-resize-observer.ts b/packages/opendesign/src/components/hooks/use-resize-observer.ts
index ebacf7065..70a5ec1b6 100644
--- a/packages/opendesign/src/components/hooks/use-resize-observer.ts
+++ b/packages/opendesign/src/components/hooks/use-resize-observer.ts
@@ -1,4 +1,4 @@
-import ResizeObserver from 'resize-observer-polyfill';
+// import ResizeObserver from 'resize-observer-polyfill';
 import { isFunction } from '../_shared/is';
 
 export type ResizeListenerT = (entry: ResizeObserverEntry, isFirst: boolean) => void;
diff --git a/packages/opendesign/src/components/index.scss b/packages/opendesign/src/components/index.scss
index 186605131..c7ffbf783 100644
--- a/packages/opendesign/src/components/index.scss
+++ b/packages/opendesign/src/components/index.scss
@@ -8,6 +8,7 @@
 @use './input/style//index.scss' as *;
 @use './input-number/style//index.scss' as *;
 @use './textarea/style//index.scss' as *;
+@use './option/style//index.scss' as *;
 @use './select/style//index.scss' as *;
 @use './tabs/style//index.scss' as *;
 @use './table/style//index.scss' as *;
diff --git a/packages/opendesign/src/components/index.ts b/packages/opendesign/src/components/index.ts
index 8ca317c60..c3df0fb14 100644
--- a/packages/opendesign/src/components/index.ts
+++ b/packages/opendesign/src/components/index.ts
@@ -10,6 +10,7 @@ export * from './popover';
 export * from './input';
 export * from './input-number';
 export * from './textarea';
+export * from './option';
 export * from './select';
 export * from './tabs';
 export * from './table';
diff --git a/packages/opendesign/src/components/input/OInput.vue b/packages/opendesign/src/components/input/OInput.vue
index c48b75d4b..7bc488124 100644
--- a/packages/opendesign/src/components/input/OInput.vue
+++ b/packages/opendesign/src/components/input/OInput.vue
@@ -9,6 +9,7 @@ import { toInputString } from './input';
 import { OResizeObserver } from '../resize-observer';
 import { inputProps } from './types';
 import { getRoundClass } from '../_shared/style-class';
+import ClientOnly from '../_shared/client-only';
 
 const props = defineProps(inputProps);
 
@@ -41,7 +42,6 @@ watch(
 // 输入框显示的字符串
 const displayValue = computed(() => {
   const v = isFunction(props.format) ? props.format(realValue.value) : realValue.value;
-  // console.log('displayValue', v, realValue.value);
   return v;
 });
 
@@ -53,6 +53,7 @@ const isClearable = computed(() => props.clearable && !props.disabled && !props.
 function updateValue(val: string) {
   const value = isFunction(props.parse) ? props.parse(val) : val;
   emits('update:modelValue', value);
+  realValue.value = value;
 
   if (lastValue !== value) {
     emits('change', value);
@@ -140,7 +141,8 @@ const onMouseDown = (e: MouseEvent) => {
 };
 
 const onMirrorResize = (en: ResizeObserverEntry) => {
-  inputWidth.value = en.target.clientWidth;
+  // + 1; 修复宽度为小数的情况
+  inputWidth.value = en.target.clientWidth + 1;
 };
 const round = getRoundClass(props, 'input');
 </script>
@@ -200,9 +202,11 @@ const round = getRoundClass(props, 'input');
           @compositionstart="onCompositionStart"
           @compositionend="onCompositionEnd"
         />
-        <OResizeObserver v-if="props.autoWidth" @resize="onMirrorResize">
-          <div class="o-input-mirror">{{ inputText }}</div>
-        </OResizeObserver>
+        <ClientOnly>
+          <OResizeObserver v-if="props.autoWidth" @resize="onMirrorResize">
+            <div class="o-input-mirror">{{ inputText }}</div>
+          </OResizeObserver>
+        </ClientOnly>
       </div>
       <div v-if="props.clearable || $slots.suffix" class="o-input-suffix">
         <span v-if="$slots.suffix" class="o-input-suffix-wrap">
diff --git a/packages/opendesign/src/components/input/__demo__/InputBasic.vue b/packages/opendesign/src/components/input/__demo__/InputBasic.vue
index 0bab96192..d1d9aaf79 100644
--- a/packages/opendesign/src/components/input/__demo__/InputBasic.vue
+++ b/packages/opendesign/src/components/input/__demo__/InputBasic.vue
@@ -19,7 +19,7 @@ setTimeout(() => {
     <div>
       <div class="row">
         <p>text:</p>
-        <OInput v-model="val3" />
+        <OInput />
         <p>password:</p>
         <OInput v-model="val3" type="password" />
       </div>
diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index a4c0719ac..8a1a4640b 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -15,6 +15,7 @@ import { OResizeObserver } from '../resize-observer';
 import { useIntersectionObserver } from '../hooks';
 import type { IntersectionListenerT } from '../hooks';
 import { OChildOnly } from '../child-only';
+import ClientOnly from '../_shared/client-only';
 
 // TODO 处理嵌套
 
@@ -52,8 +53,77 @@ const anchorStyle = reactive<{ left?: string; top?: string; right?: string; bott
 const toMount = ref(false);
 const isAnimating = ref(false);
 
-const { addResizeListener, removeResizeListener } = useResizeObserver();
-const intersctionObserver = useIntersectionObserver();
+let ro: ReturnType<typeof useResizeObserver> | null = null;
+let io: ReturnType<typeof useIntersectionObserver> | null = null;
+
+onMounted(() => {
+  ro = useResizeObserver();
+  io = useIntersectionObserver();
+
+  // 在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();
+    // }
+  });
+});
+
+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) {
+    io?.addIntersectionListener(targetEl, onTargetInterscting);
+  }
+};
+
+onUnmounted(() => {
+  // 移除触发事件
+  triggerListener.forEach((fn) => {
+    fn();
+  });
+  // 销毁popup 的 resize监听
+  if (wrapperEl.value) {
+    ro?.removeResizeListener(wrapperEl.value, onResize);
+  }
+  if (targetEl) {
+    ro?.removeResizeListener(targetEl, onResize);
+  }
+});
 
 // 处理popup位置
 const updatePopupStyle = () => {
@@ -149,7 +219,7 @@ const updateVisible = (isVisible?: boolean, delay?: number) => {
       toMount.value = true;
 
       if (props.hideWhenTargetInvisible && targetEl) {
-        intersctionObserver.addIntersectionListener(targetEl, onTargetInterscting);
+        io?.addIntersectionListener(targetEl, onTargetInterscting);
       }
     }
   };
@@ -162,30 +232,6 @@ const updateVisible = (isVisible?: boolean, delay?: number) => {
   }
 };
 
-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,
@@ -251,7 +297,7 @@ watch(popupRef, (popEl) => {
       });
 
       // 监听targetEL尺寸变化
-      addResizeListener(targetEl, (en: ResizeObserverEntry, isFirst: boolean) => {
+      ro?.addResizeListener(targetEl, (en: ResizeObserverEntry, isFirst: boolean) => {
         if (props.adjustMinWidth) {
           popStyle.minWidth = `${targetEl?.offsetWidth}px`;
         } else if (props.adjustWidth) {
@@ -263,7 +309,7 @@ watch(popupRef, (popEl) => {
 
     if (wrapperEl.value) {
       // 监听warpper尺寸变化
-      addResizeListener(wrapperEl.value, onResize);
+      ro?.addResizeListener(wrapperEl.value, onResize);
     }
   } else {
     /**
@@ -272,11 +318,11 @@ watch(popupRef, (popEl) => {
 
     handles.forEach((hl) => hl());
     if (wrapperEl.value) {
-      removeResizeListener(wrapperEl.value, onResize);
+      ro?.removeResizeListener(wrapperEl.value, onResize);
     }
     if (targetEl) {
-      removeResizeListener(targetEl, onResize);
-      intersctionObserver.removeIntersectionListener(targetEl, onTargetInterscting);
+      ro?.removeResizeListener(targetEl, onResize);
+      io?.removeIntersectionListener(targetEl, onTargetInterscting);
       isTargetInViewport.value = true;
     }
   }
@@ -291,82 +337,42 @@ const onPopupHoverOut = () => {
     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>
   <OChildOnly ref="targetElRef">
     <slot name="target"></slot>
   </OChildOnly>
-  <teleport v-if="wrapperEl" :to="props.wrapper">
-    <OResizeObserver v-if="toMount || visible || !props.unmountOnHide" @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="props.transition"
-          :appear="true"
-          @before-enter="handleTransitionStart"
-          @after-enter="handleTransitionEnd"
-          @before-leave="handleTransitionStart"
-          @after-leave="handleTransitionEnd"
+  <ClientOnly>
+    <teleport v-if="wrapperEl" :to="props.wrapper">
+      <OResizeObserver v-if="toMount || visible || !props.unmountOnHide" @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"
         >
-          <div v-show="visible" class="o-popup-wrap" :style="wrapStyle" :class="props.wrapClass">
-            <div class="o-popup-body">
-              <slot></slot>
-            </div>
-            <div class="o-popup-anchor" :style="anchorStyle" :class="anchorClass">
-              <slot name="anchor"></slot>
+          <Transition
+            :name="props.transition"
+            :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="props.wrapClass">
+              <div class="o-popup-body">
+                <slot></slot>
+              </div>
+              <div class="o-popup-anchor" :style="anchorStyle" :class="anchorClass">
+                <slot name="anchor"></slot>
+              </div>
             </div>
-          </div>
-        </Transition>
-      </div>
-    </OResizeObserver>
-  </teleport>
+          </Transition>
+        </div>
+      </OResizeObserver>
+    </teleport>
+  </ClientOnly>
 </template>
diff --git a/packages/opendesign/src/components/popup/popup.ts b/packages/opendesign/src/components/popup/popup.ts
index 1d5540057..4f0190bc0 100644
--- a/packages/opendesign/src/components/popup/popup.ts
+++ b/packages/opendesign/src/components/popup/popup.ts
@@ -5,7 +5,6 @@ import type { PopupPositionT, PopupTriggerT } from './types';
 
 import { useOutClick } from '../hooks/use-out-click';
 
-const { addOutClickListener, removeOutClickListener } = useOutClick();
 interface Pos {
   left: number,
   top: number
@@ -404,6 +403,7 @@ export function bindTrigger(
   if (!el) {
     return [];
   }
+  const { addOutClickListener, removeOutClickListener } = useOutClick();
 
   const listeners: Array<() => void> = [];
 
diff --git a/packages/opendesign/src/components/popup/types.ts b/packages/opendesign/src/components/popup/types.ts
index 423e2e3ae..7b3552a64 100644
--- a/packages/opendesign/src/components/popup/types.ts
+++ b/packages/opendesign/src/components/popup/types.ts
@@ -39,7 +39,7 @@ export const popupProps = {
    */
   wrapper: {
     type: [String, Object] as PropType<string | HTMLElement>,
-    default: document.body,
+    default: 'body',
   },
   /**
    * 距离target偏移量
diff --git a/packages/opendesign/src/components/select/OSelect.vue b/packages/opendesign/src/components/select/OSelect.vue
index a16c910fe..114a5de92 100644
--- a/packages/opendesign/src/components/select/OSelect.vue
+++ b/packages/opendesign/src/components/select/OSelect.vue
@@ -6,6 +6,7 @@ import { OPopup } from '../popup';
 import { selectOptionInjectKey } from './provide';
 import { SelectOptionT, selectProps } from './types';
 import { getRoundClass } from '../_shared/style-class';
+import ClientOnly from '../_shared/client-only';
 
 const props = defineProps(selectProps);
 const emits = defineEmits<{
@@ -69,34 +70,36 @@ provide(selectOptionInjectKey, {
     :style="round.style.value"
   >
     <input :value="activeLabel" type="text" :placeholder="props.placeholder" class="o-select-input" readonly />
-    <span class="o-select-suffix">
-      <span class="o-select-suffix-wrap">
+    <div class="o-select-suffix">
+      <div class="o-select-suffix-wrap">
         <slot name="suffix">
-          <span class="o-select-icon-arrow" :class="{ active: showOption }">
+          <div class="o-select-icon-arrow" :class="{ active: showOption }">
             <IconChevronDown />
-          </span>
+          </div>
         </slot>
-      </span>
-      <div v-if="isClearable" class="o-select-clear" @click="clearClick"><IconClose class="o-select-clear-icon" /></div>
-    </span>
-    <teleport :to="optionsRef" :disabled="!optionsRef">
-      <div v-show="optionsRef" class="o-select-option-wrap">
-        <slot></slot>
       </div>
-    </teleport>
-    <OPopup
-      v-if="!props.disabled"
-      v-model:visible="showOption"
-      :transition="props.transition"
-      :unmount-on-hide="props.unmountOnHide"
-      :position="props.optionPosition"
-      :target="selectRef"
-      :trigger="props.trigger"
-      :offset="4"
-      :adjust-min-width="props.optionWidthMode === 'min-width'"
-      :adjust-width="props.optionWidthMode === 'width'"
-    >
-      <div ref="optionsRef" class="o-select-options" :class="[`o-select-options-size-${props.size || defaultSize}`, props.optionWrapClass]"></div>
-    </OPopup>
+      <div v-if="isClearable" class="o-select-clear" @click="clearClick"><IconClose class="o-select-clear-icon" /></div>
+    </div>
+    <ClientOnly>
+      <teleport :to="optionsRef" :disabled="!optionsRef">
+        <div v-show="optionsRef" class="o-select-option-wrap">
+          <slot></slot>
+        </div>
+      </teleport>
+      <OPopup
+        v-if="!props.disabled"
+        v-model:visible="showOption"
+        :transition="props.transition"
+        :unmount-on-hide="props.unmountOnHide"
+        :position="props.optionPosition"
+        :target="selectRef"
+        :trigger="props.trigger"
+        :offset="4"
+        :adjust-min-width="props.optionWidthMode === 'min-width'"
+        :adjust-width="props.optionWidthMode === 'width'"
+      >
+        <div ref="optionsRef" class="o-select-options" :class="[`o-select-options-size-${props.size || defaultSize}`, props.optionWrapClass]"></div>
+      </OPopup>
+    </ClientOnly>
   </div>
 </template>
diff --git a/packages/opendesign/src/components/tabs/OTabPane.vue b/packages/opendesign/src/components/tabs/OTabPane.vue
index f59f419b2..60abf5db7 100644
--- a/packages/opendesign/src/components/tabs/OTabPane.vue
+++ b/packages/opendesign/src/components/tabs/OTabPane.vue
@@ -8,6 +8,7 @@ import { computed, getCurrentInstance, inject, onMounted, nextTick, ref, watch }
 import { tabsInjectKey } from './provide';
 import { tabPaneProps } from './types';
 import { IconClose } from '../_shared/icons';
+import ClientOnly from '../_shared/client-only';
 
 const props = defineProps(tabPaneProps);
 
@@ -73,25 +74,27 @@ onMounted(() => {
 });
 </script>
 <template>
-  <teleport v-if="navsRef && !isClosed" :to="navsRef">
-    <div
-      ref="navRef"
-      :class="[
-        'o-tab-nav',
-        {
-          'is-active': isActive,
-          'is-disabled': props.disabled,
-          'is-closable': props.closable,
-        },
-      ]"
-      @click="navClick"
-    >
-      <div class="o-tab-nav-title">
-        <slot name="nav">{{ props.label || props.value }}</slot>
+  <ClientOnly>
+    <teleport v-if="navsRef && !isClosed" :to="navsRef">
+      <div
+        ref="navRef"
+        :class="[
+          'o-tab-nav',
+          {
+            'is-active': isActive,
+            'is-disabled': props.disabled,
+            'is-closable': props.closable,
+          },
+        ]"
+        @click="navClick"
+      >
+        <div class="o-tab-nav-title">
+          <slot name="nav">{{ props.label || props.value }}</slot>
+        </div>
+        <div v-if="props.closable" class="o-tab-nav-close" @click="navCloseClick"><IconClose /></div>
       </div>
-      <div v-if="props.closable" class="o-tab-nav-close" @click="navCloseClick"><IconClose /></div>
-    </div>
-  </teleport>
+    </teleport>
+  </ClientOnly>
 
   <transition :name="props.transition">
     <div
diff --git a/packages/opendesign/src/components/textarea/OTextarea.vue b/packages/opendesign/src/components/textarea/OTextarea.vue
index f71e4ff35..c16be7b7b 100644
--- a/packages/opendesign/src/components/textarea/OTextarea.vue
+++ b/packages/opendesign/src/components/textarea/OTextarea.vue
@@ -8,6 +8,7 @@ import { toInputString } from './textarea';
 import { OResizeObserver } from '../resize-observer';
 import { textareaProps } from './types';
 import { getRoundClass } from '../_shared/style-class';
+import ClientOnly from '../_shared/client-only';
 
 const props = defineProps(textareaProps);
 
@@ -187,10 +188,11 @@ const onMirrorResize = (en: ResizeObserverEntry) => {
         @compositionstart="onCompositionStart"
         @compositionend="onCompositionEnd"
       ></textarea>
-
-      <OResizeObserver v-if="props.autoHeight" @resize="onMirrorResize">
-        <div class="o-textarea-mirror">{{ textareaText }}</div>
-      </OResizeObserver>
+      <ClientOnly>
+        <OResizeObserver v-if="props.autoHeight" @resize="onMirrorResize">
+          <div class="o-textarea-mirror">{{ textareaText }}</div>
+        </OResizeObserver>
+      </ClientOnly>
       <div v-if="props.clearable" class="o-textarea-clear" @click="clearClick"><IconClose class="o-textarea-clear-icon" /></div>
       <div v-if="props.maxLength" class="o-textarea-limit">
         <span :class="{ 'is-error': isOutLengthLimit }">{{ currentLength }}</span
diff --git a/packages/opendesign/src/components/vite-env.d.ts b/packages/opendesign/src/components/vite-env.d.ts
index 16d09e227..8fd2afcdd 100644
--- a/packages/opendesign/src/components/vite-env.d.ts
+++ b/packages/opendesign/src/components/vite-env.d.ts
@@ -6,6 +6,6 @@ declare module '*.vue' {
   export default component;
 }
 
-declare module 'intersection-observer-polyfill' {
-  export default IntersectionObserver;
-}
\ No newline at end of file
+// declare module 'intersection-observer-polyfill' {
+//   export default IntersectionObserver;
+// }
\ No newline at end of file
-- 
Gitee


From 420c6a5c8d1cfc1fa5750a8535571140ceab11b2 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 8 Mar 2023 18:18:54 +0800
Subject: [PATCH 6/7] up version 0.0.4

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

diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json
index c62854b60..caae51815 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opensig/opendesign",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "lib/index.js",
   "module": "es/index.mjs",
   "types": "es/index.d.ts",
-- 
Gitee


From f4c09ce847cd7aa09ebf88957bf061a1e4c76d0f Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 8 Mar 2023 19:34:16 +0800
Subject: [PATCH 7/7] compile ascend.token

---
 README.md                                     |   10 +-
 .../opendesign/src/tokens/ascend-token.json   | 1828 +++++++++++++++++
 packages/scripts/README.md                    |    2 +-
 packages/scripts/package.json                 |    6 +-
 4 files changed, 1838 insertions(+), 8 deletions(-)
 create mode 100644 packages/opendesign/src/tokens/ascend-token.json

diff --git a/README.md b/README.md
index 96ed96227..536ac5a71 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,16 @@
 # opendesign-components
 
 #### 介绍
+
 The repository of OpenDesign components
 
+# 首次发布
+
+`npm publish --access=public`
+
 #### 软件架构
-软件架构说明
 
+软件架构说明
 
 #### 安装教程
 
@@ -26,10 +31,9 @@ The repository of OpenDesign components
 3.  提交代码
 4.  新建 Pull Request
 
-
 #### 特技
 
-1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
+1.  使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md
 2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
 3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
 4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
diff --git a/packages/opendesign/src/tokens/ascend-token.json b/packages/opendesign/src/tokens/ascend-token.json
new file mode 100644
index 000000000..86fe86ee9
--- /dev/null
+++ b/packages/opendesign/src/tokens/ascend-token.json
@@ -0,0 +1,1828 @@
+{
+  "base": {
+    "name": "基础色(不同皮肤色相不变)",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "color-white",
+        "value": {
+          "light": "255, 255, 255",
+          "dark": "255, 255, 255"
+        }
+      },
+      {
+        "key": "color-black",
+        "value": {
+          "light": "0, 0, 0",
+          "dark": "0, 0, 0"
+        }
+      }
+    ]
+  },
+  "blue": {
+    "name": "蓝色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "blue-1",
+        "value": {
+          "light": "232, 240, 255",
+          "dark": "0, 13, 77"
+        }
+      },
+      {
+        "key": "blue-2",
+        "value": {
+          "light": "194, 213, 254",
+          "dark": "4, 27, 121"
+        }
+      },
+      {
+        "key": "blue-3",
+        "value": {
+          "light": "157, 184, 253",
+          "dark": "14, 50, 166"
+        }
+      },
+      {
+        "key": "blue-4",
+        "value": {
+          "light": "120, 153, 252",
+          "dark": "29, 77, 210"
+        }
+      },
+      {
+        "key": "blue-5",
+        "value": {
+          "light": "83, 119, 251",
+          "dark": "48, 111, 255"
+        }
+      },
+      {
+        "key": "blue-6",
+        "value": {
+          "light": "46, 83, 250",
+          "dark": "60, 126, 255"
+        }
+      },
+      {
+        "key": "blue-7",
+        "value": {
+          "light": "29, 55, 207",
+          "dark": "104, 159, 255"
+        }
+      },
+      {
+        "key": "blue-8",
+        "value": {
+          "light": "15, 32, 163",
+          "dark": "147, 190, 255"
+        }
+      },
+      {
+        "key": "blue-9",
+        "value": {
+          "light": "6, 15, 120",
+          "dark": "190, 218, 255"
+        }
+      },
+      {
+        "key": "blue-10",
+        "value": {
+          "light": "0, 4, 47",
+          "dark": "234, 244, 255"
+        }
+      }
+    ]
+  },
+  "yellow": {
+    "name": "黄色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "yellow-1",
+        "value": {
+          "light": "255, 255, 232",
+          "dark": "77, 56, 0"
+        }
+      },
+      {
+        "key": "yellow-2",
+        "value": {
+          "light": "253, 251, 185",
+          "dark": "120, 94, 7"
+        }
+      },
+      {
+        "key": "yellow-3",
+        "value": {
+          "light": "251, 244, 139",
+          "dark": "163, 134, 20"
+        }
+      },
+      {
+        "key": "yellow-4",
+        "value": {
+          "light": "249, 233, 94",
+          "dark": "207, 179, 37"
+        }
+      },
+      {
+        "key": "yellow-5",
+        "value": {
+          "light": "247, 221, 49",
+          "dark": "250, 225, 60"
+        }
+      },
+      {
+        "key": "yellow-6",
+        "value": {
+          "light": "245, 205, 5",
+          "dark": "251, 233, 75"
+        }
+      },
+      {
+        "key": "yellow-7",
+        "value": {
+          "light": "203, 163, 3",
+          "dark": "252, 243, 116"
+        }
+      },
+      {
+        "key": "yellow-8",
+        "value": {
+          "light": "161, 124, 2",
+          "dark": "253, 250, 157"
+        }
+      },
+      {
+        "key": "yellow-9",
+        "value": {
+          "light": "119, 87, 1",
+          "dark": "254, 254, 198"
+        }
+      },
+      {
+        "key": "yellow-10",
+        "value": {
+          "light": "77, 54, 0",
+          "dark": "254, 255, 240"
+        }
+      }
+    ]
+  },
+  "green": {
+    "name": "绿色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "green-1",
+        "value": {
+          "light": "232, 255, 238",
+          "dark": "0, 77, 28"
+        }
+      },
+      {
+        "key": "green-2",
+        "value": {
+          "light": "177, 239, 195",
+          "dark": "4, 102, 37"
+        }
+      },
+      {
+        "key": "green-3",
+        "value": {
+          "light": "128, 224, 158",
+          "dark": "10, 128, 45"
+        }
+      },
+      {
+        "key": "green-4",
+        "value": {
+          "light": "84, 208, 127",
+          "dark": "18, 154, 55"
+        }
+      },
+      {
+        "key": "green-5",
+        "value": {
+          "light": "45, 193, 101",
+          "dark": "29, 180, 64"
+        }
+      },
+      {
+        "key": "green-6",
+        "value": {
+          "light": "11, 177, 81",
+          "dark": "39, 195, 70"
+        }
+      },
+      {
+        "key": "green-7",
+        "value": {
+          "light": "7, 152, 72",
+          "dark": "80, 210, 102"
+        }
+      },
+      {
+        "key": "green-8",
+        "value": {
+          "light": "4, 127, 63",
+          "dark": "126, 225, 139"
+        }
+      },
+      {
+        "key": "green-9",
+        "value": {
+          "light": "2, 102, 53",
+          "dark": "178, 240, 183"
+        }
+      },
+      {
+        "key": "green-10",
+        "value": {
+          "light": "0, 77, 42",
+          "dark": "235, 255, 236"
+        }
+      }
+    ]
+  },
+  "orange": {
+    "name": "橘红色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "orange-1",
+        "value": {
+          "light": "255, 246, 232",
+          "dark": "77, 27, 0"
+        }
+      },
+      {
+        "key": "orange-2",
+        "value": {
+          "light": "254, 226, 186",
+          "dark": "121, 48, 4"
+        }
+      },
+      {
+        "key": "orange-3",
+        "value": {
+          "light": "253, 202, 140",
+          "dark": "166, 75, 10"
+        }
+      },
+      {
+        "key": "orange-4",
+        "value": {
+          "light": "252, 176, 95",
+          "dark": "210, 105, 19"
+        }
+      },
+      {
+        "key": "orange-5",
+        "value": {
+          "light": "251, 147, 50",
+          "dark": "255, 141, 31"
+        }
+      },
+      {
+        "key": "orange-6",
+        "value": {
+          "light": "250, 115, 5",
+          "dark": "255, 150, 38"
+        }
+      },
+      {
+        "key": "orange-7",
+        "value": {
+          "light": "207, 88, 3",
+          "dark": "255, 179, 87"
+        }
+      },
+      {
+        "key": "orange-8",
+        "value": {
+          "light": "163, 64, 2",
+          "dark": "255, 205, 135"
+        }
+      },
+      {
+        "key": "orange-9",
+        "value": {
+          "light": "120, 42, 1",
+          "dark": "255, 227, 184"
+        }
+      },
+      {
+        "key": "orange-10",
+        "value": {
+          "light": "77, 24, 0",
+          "dark": "255, 247, 232"
+        }
+      }
+    ]
+  },
+  "red": {
+    "name": "红色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "red-1",
+        "value": {
+          "light": "255, 234, 232",
+          "dark": "77, 0, 10"
+        }
+      },
+      {
+        "key": "red-2",
+        "value": {
+          "light": "250, 185, 182",
+          "dark": "119, 6, 17"
+        }
+      },
+      {
+        "key": "red-3",
+        "value": {
+          "light": "245, 136, 134",
+          "dark": "161, 22, 31"
+        }
+      },
+      {
+        "key": "red-4",
+        "value": {
+          "light": "240, 87, 90",
+          "dark": "203, 46, 52"
+        }
+      },
+      {
+        "key": "red-5",
+        "value": {
+          "light": "235, 43, 52",
+          "dark": "245, 78, 78"
+        }
+      },
+      {
+        "key": "red-6",
+        "value": {
+          "light": "230, 0, 18",
+          "dark": "247, 105, 101"
+        }
+      },
+      {
+        "key": "red-7",
+        "value": {
+          "light": "192, 0, 45",
+          "dark": "249, 141, 134"
+        }
+      },
+      {
+        "key": "red-8",
+        "value": {
+          "light": "153, 0, 23",
+          "dark": "251, 176, 167"
+        }
+      },
+      {
+        "key": "red-9",
+        "value": {
+          "light": "115, 0, 21",
+          "dark": "253, 209, 202"
+        }
+      },
+      {
+        "key": "red-10",
+        "value": {
+          "light": "77, 0, 17",
+          "dark": "255, 240, 236"
+        }
+      }
+    ]
+  },
+  "gray": {
+    "name": "中性灰",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "gray-1",
+        "value": {
+          "light": "255, 255, 255",
+          "dark": "0, 0, 0"
+        }
+      },
+      {
+        "key": "gray-2",
+        "value": {
+          "light": "250, 250, 250",
+          "dark": "36, 36, 36"
+        }
+      },
+      {
+        "key": "gray-3",
+        "value": {
+          "light": "247, 247, 247",
+          "dark": "57, 57, 57"
+        }
+      },
+      {
+        "key": "gray-4",
+        "value": {
+          "light": "242, 242, 242",
+          "dark": "94, 94, 94"
+        }
+      },
+      {
+        "key": "gray-5",
+        "value": {
+          "light": "235, 235, 235",
+          "dark": "119, 119, 122"
+        }
+      },
+      {
+        "key": "gray-6",
+        "value": {
+          "light": "219, 219, 219",
+          "dark": "166, 166, 166"
+        }
+      },
+      {
+        "key": "gray-7",
+        "value": {
+          "light": "189, 189, 189",
+          "dark": "221, 221, 221"
+        }
+      },
+      {
+        "key": "gray-8",
+        "value": {
+          "light": "148, 148, 148",
+          "dark": "238, 238, 238"
+        }
+      },
+      {
+        "key": "gray-9",
+        "value": {
+          "light": "110, 110, 110",
+          "dark": "243, 243, 243"
+        }
+      },
+      {
+        "key": "gray-10",
+        "value": {
+          "light": "79, 79, 79",
+          "dark": "255, 255, 255"
+        }
+      },
+      {
+        "key": "gray-11",
+        "value": {
+          "light": "48, 48, 48",
+          "dark": "255, 255, 255"
+        }
+      },
+      {
+        "key": "gray-12",
+        "value": {
+          "light": "36, 36, 36",
+          "dark": "255, 255, 255"
+        }
+      },
+      {
+        "key": "gray-13",
+        "value": {
+          "light": "18, 18, 18",
+          "dark": "255, 255, 255"
+        }
+      },
+      {
+        "key": "gray-14",
+        "value": {
+          "light": "0, 0, 0",
+          "dark": "255, 255, 255"
+        }
+      }
+    ]
+  },
+  "mixedgray": {
+    "name": "混合中性色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "mixedgray-1",
+        "value": {
+          "light": "255, 255, 255",
+          "dark": "0, 0, 0"
+        }
+      },
+      {
+        "key": "mixedgray-2",
+        "value": {
+          "light": "244, 245, 247",
+          "dark": "16, 18, 20"
+        }
+      },
+      {
+        "key": "mixedgray-3",
+        "value": {
+          "light": "237, 239, 242",
+          "dark": "23, 25, 28"
+        }
+      },
+      {
+        "key": "mixedgray-4",
+        "value": {
+          "light": "232, 234, 237",
+          "dark": "33, 35, 39"
+        }
+      },
+      {
+        "key": "mixedgray-5",
+        "value": {
+          "light": "224, 226, 230",
+          "dark": "40, 42, 47"
+        }
+      },
+      {
+        "key": "mixedgray-6",
+        "value": {
+          "light": "209, 214, 219",
+          "dark": "50, 53, 57"
+        }
+      },
+      {
+        "key": "mixedgray-7",
+        "value": {
+          "light": "179, 185, 191",
+          "dark": "61, 63, 67"
+        }
+      },
+      {
+        "key": "mixedgray-8",
+        "value": {
+          "light": "144, 150, 158",
+          "dark": "80, 84, 88"
+        }
+      },
+      {
+        "key": "mixedgray-9",
+        "value": {
+          "light": "104, 109, 117",
+          "dark": "113, 117, 122"
+        }
+      },
+      {
+        "key": "mixedgray-10",
+        "value": {
+          "light": "79, 84, 92",
+          "dark": "147, 152, 159"
+        }
+      },
+      {
+        "key": "mixedgray-11",
+        "value": {
+          "light": "55, 59, 66",
+          "dark": "172, 177, 185"
+        }
+      },
+      {
+        "key": "mixedgray-12",
+        "value": {
+          "light": "32, 35, 41",
+          "dark": "198, 202, 210"
+        }
+      },
+      {
+        "key": "mixedgray-13",
+        "value": {
+          "light": "18, 20, 23",
+          "dark": "231, 234, 238"
+        }
+      },
+      {
+        "key": "mixedgray-14",
+        "value": {
+          "light": "0, 0, 0",
+          "dark": "255, 255, 255"
+        }
+      }
+    ]
+  },
+  "info": {
+    "name": "信息色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-info1",
+        "description": "一级/强调/标题",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-14))",
+          "dark": "rgb(var(--o-mixedgray-14))"
+        }
+      },
+      {
+        "key": "color-info2",
+        "description": "二级/次强调/正文",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-11))",
+          "dark": "rgb(var(--o-mixedgray-11))"
+        }
+      },
+      {
+        "key": "color-info3",
+        "description": "三级/辅助信息",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-9))",
+          "dark": "rgb(var(--o-mixedgray-9))"
+        }
+      },
+      {
+        "key": "color-info4",
+        "description": "置灰/禁用",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-7))",
+          "dark": "rgb(var(--o-mixedgray-7))"
+        }
+      },
+      {
+        "key": "color-info1-inverse",
+        "description": "一级/次强调/正文反色",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-1))",
+          "dark": "rgb(var(--o-mixedgray-1))"
+        }
+      },
+      {
+        "key": "color-info2-inverse",
+        "description": "二级/辅助信息反色",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-1))",
+          "dark": "rgb(var(--o-mixedgray-1))"
+        }
+      },
+      {
+        "key": "color-info3-inverse",
+        "description": "三级/辅助信息反色",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-1))",
+          "dark": "rgb(var(--o-mixedgray-1))"
+        }
+      },
+      {
+        "key": "color-info4-inverse",
+        "description": "置灰/禁用反色",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-7))",
+          "dark": "rgb(var(--o-mixedgray-7))"
+        }
+      }
+    ]
+  },
+  "mask": {
+    "name": "遮罩色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-mask1",
+        "description": "全局遮罩",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-13), .6)",
+          "dark": "rgba(var(--o-mixedgray-13), .6)"
+        }
+      },
+      {
+        "key": "color-mask2",
+        "description": "局部遮罩",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-13), .2)",
+          "dark": "rgba(var(--o-mixedgray-13), .2)"
+        }
+      }
+    ]
+  },
+  "fill": {
+    "name": "填充色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-fill1",
+        "description": "一级填充/页面背景",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-2))",
+          "dark": "rgb(var(--o-mixedgray-2))"
+        }
+      },
+      {
+        "key": "color-fill2",
+        "description": "二级填充/区块、卡片",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-1))",
+          "dark": "rgb(var(--o-mixedgray-1))"
+        }
+      },
+      {
+        "key": "color-fill3",
+        "description": "三级填充/卡片",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-3))",
+          "dark": "rgb(var(--o-mixedgray-3))"
+        }
+      }
+    ]
+  },
+  "control": {
+    "name": "控件色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-control-light",
+        "description": "很浅背景/表格背景色",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-1))",
+          "dark": "rgb(var(--o-mixedgray-1))"
+        }
+      },
+      {
+        "key": "color-control1",
+        "description": "常规，常用于边框",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-7))",
+          "dark": "rgb(var(--o-mixedgray-7))"
+        }
+      },
+
+      {
+        "key": "color-control2",
+        "description": "hover，常用于边框",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-9))",
+          "dark": "rgb(var(--o-mixedgray-9))"
+        }
+      },
+
+      {
+        "key": "color-control3",
+        "description": "激活，常用于边框",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-12))",
+          "dark": "rgb(var(--o-mixedgray-12))"
+        }
+      },
+      {
+        "key": "color-control4",
+        "description": "边框禁用/深色背景分割线",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-6))",
+          "dark": "rgb(var(--o-mixedgray-6))"
+        }
+      },
+      {
+        "key": "color-control1-light",
+        "description": "浅色背景分割线/表格线/表格描边",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-5))",
+          "dark": "rgb(var(--o-mixedgray-5))"
+        }
+      },
+      {
+        "key": "color-control2-light",
+        "description": "表格行hover、激活/手风琴hover/下拉菜单hover",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-3))",
+          "dark": "rgb(var(--o-mixedgray-3))"
+        }
+      },
+      {
+        "key": "color-control3-light",
+        "description": "表头背景色/手风琴激活/下拉菜单激活",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-4))",
+          "dark": "rgb(var(--o-mixedgray-4))"
+        }
+      },
+      {
+        "key": "color-control4-light",
+        "description": "禁用背景",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-3))",
+          "dark": "rgb(var(--o-mixedgray-3))"
+        }
+      }
+    ]
+  },
+  "primary": {
+    "name": "强调色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-primary1",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-12))",
+          "dark": "rgb(var(--o-mixedgray-12))"
+        }
+      },
+      {
+        "key": "color-primary2",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-11))",
+          "dark": "rgb(var(--o-mixedgray-11))"
+        }
+      },
+      {
+        "key": "color-primary3",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-13))",
+          "dark": "rgb(var(--o-mixedgray-13))"
+        }
+      },
+      {
+        "key": "color-primary4",
+        "description": "禁用",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-6))",
+          "dark": "rgb(var(--o-mixedgray-6))"
+        }
+      },
+      {
+        "key": "color-primary1-light",
+        "description": "浅/常规",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-12))",
+          "dark": "rgb(var(--o-mixedgray-12))"
+        }
+      },
+      {
+        "key": "color-primary2-light",
+        "description": "浅/悬浮",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-11))",
+          "dark": "rgb(var(--o-mixedgray-11))"
+        }
+      },
+      {
+        "key": "color-primary3-light",
+        "description": "浅/激活",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-13))",
+          "dark": "rgb(var(--o-mixedgray-13))"
+        }
+      },
+      {
+        "key": "color-primary4-light",
+        "description": "浅/禁用",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-6))",
+          "dark": "rgb(var(--o-mixedgray-6))"
+        }
+      }
+    ]
+  },
+  "success": {
+    "name": "成功色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-success1",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-green-6))",
+          "dark": "rgb(var(--o-green-6))"
+        }
+      },
+      {
+        "key": "color-success2",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-green-4))",
+          "dark": "rgb(var(--o-green-4))"
+        }
+      },
+      {
+        "key": "color-success3",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-green-7))",
+          "dark": "rgb(var(--o-green-7))"
+        }
+      },
+      {
+        "key": "color-success4",
+        "description": "禁用",
+        "value": {
+          "light": "rgb(var(--o-green-3))",
+          "dark": "rgb(var(--o-green-3))"
+        }
+      },
+      {
+        "key": "color-success1-light",
+        "description": "浅/常规",
+        "value": {
+          "light": "rgb(var(--o-green-2))",
+          "dark": "rgb(var(--o-green-2))"
+        }
+      },
+      {
+        "key": "color-success2-light",
+        "description": "浅/悬浮",
+        "value": {
+          "light": "rgb(var(--o-green-3))",
+          "dark": "rgb(var(--o-green-3))"
+        }
+      },
+      {
+        "key": "color-success3-light",
+        "description": "浅/激活",
+        "value": {
+          "light": "rgb(var(--o-green-4))",
+          "dark": "rgb(var(--o-green-4))"
+        }
+      },
+      {
+        "key": "color-success4-light",
+        "description": "浅/禁用",
+        "value": {
+          "light": "rgb(var(--o-green-1))",
+          "dark": "rgb(var(--o-green-1))"
+        }
+      }
+    ]
+  },
+  "warning": {
+    "name": "告警色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-warning1",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-orange-6))",
+          "dark": "rgb(var(--o-orange-6))"
+        }
+      },
+      {
+        "key": "color-warning2",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-orange-4))",
+          "dark": "rgb(var(--o-orange-4))"
+        }
+      },
+      {
+        "key": "color-warning3",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-orange-7))",
+          "dark": "rgb(var(--o-orange-7))"
+        }
+      },
+      {
+        "key": "color-warning4",
+        "description": "禁用",
+        "value": {
+          "light": "rgb(var(--o-orange-3))",
+          "dark": "rgb(var(--o-orange-3))"
+        }
+      },
+      {
+        "key": "color-warning1-light",
+        "description": "浅/常规",
+        "value": {
+          "light": "rgb(var(--o-orange-2))",
+          "dark": "rgb(var(--o-orange-2))"
+        }
+      },
+      {
+        "key": "color-warning2-light",
+        "description": "浅/悬浮",
+        "value": {
+          "light": "rgb(var(--o-orange-3))",
+          "dark": "rgb(var(--o-orange-3))"
+        }
+      },
+      {
+        "key": "color-warning3-light",
+        "description": "浅/激活",
+        "value": {
+          "light": "rgb(var(--o-orange-4))",
+          "dark": "rgb(var(--o-orange-4))"
+        }
+      },
+      {
+        "key": "color-warning4-light",
+        "description": "浅/禁用",
+        "value": {
+          "light": "rgb(var(--o-orange-1))",
+          "dark": "rgb(var(--o-orange-1))"
+        }
+      }
+    ]
+  },
+  "danger": {
+    "name": "危险色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-danger1",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-red-6))",
+          "dark": "rgb(var(--o-red-6))"
+        }
+      },
+      {
+        "key": "color-danger2",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-red-4))",
+          "dark": "rgb(var(--o-red-4))"
+        }
+      },
+      {
+        "key": "color-danger3",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-red-7))",
+          "dark": "rgb(var(--o-red-7))"
+        }
+      },
+      {
+        "key": "color-danger4",
+        "description": "禁用",
+        "value": {
+          "light": "rgb(var(--o-red-3))",
+          "dark": "rgb(var(--o-red-3))"
+        }
+      },
+      {
+        "key": "color-danger1-light",
+        "description": "浅/常规",
+        "value": {
+          "light": "rgb(var(--o-red-2))",
+          "dark": "rgb(var(--o-red-2))"
+        }
+      },
+      {
+        "key": "color-danger2-light",
+        "description": "浅/悬浮",
+        "value": {
+          "light": "rgb(var(--o-red-3))",
+          "dark": "rgb(var(--o-red-3))"
+        }
+      },
+      {
+        "key": "color-danger3-light",
+        "description": "浅/激活",
+        "value": {
+          "light": "rgb(var(--o-red-4))",
+          "dark": "rgb(var(--o-red-4))"
+        }
+      },
+      {
+        "key": "color-danger4-light",
+        "description": "浅/禁用",
+        "value": {
+          "light": "rgb(var(--o-red-1))",
+          "dark": "rgb(var(--o-red-1))"
+        }
+      }
+    ]
+  },
+  "shadow": {
+    "name": "阴影",
+    "type": "shadow",
+    "typeName": "阴影",
+    "value": [
+      {
+        "key": "shadow-1",
+        "name": "阴影1",
+        "description": "用于卡片、小弹窗、楼层阴影",
+        "value": {
+          "light": "0 3px 8px rgba(var(--o-mixedgray-13), 0.08)",
+          "dark": "0 3px 8px rgba(var(--o-mixedgray-13), 0.08)"
+        }
+      },
+      {
+        "key": "shadow-2",
+        "name": "阴影2",
+        "description": "用于卡片悬浮阴影",
+        "value": {
+          "light": "0 6px 24px rgba(var(--o-mixedgray-13), 0.08)",
+          "dark": "0 6px 24px rgba(var(--o-mixedgray-13), 0.08)"
+        }
+      },
+      {
+        "key": "shadow-3",
+        "name": "阴影3",
+        "description": "用于提示阴影",
+        "value": {
+          "light": "0 10px 40px rgba(var(--o-mixedgray-13), 0.08)",
+          "dark": "0 10px 40px rgba(var(--o-mixedgray-13), 0.08)"
+        }
+      }
+    ]
+  },
+  "gap": {
+    "name": "间距",
+    "type": "gap",
+    "typeName": "间距",
+    "value": [
+      {
+        "key": "gap-1",
+        "name": "间距1",
+        "description": "用于组件之间的间距1",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "gap-2",
+        "name": "间距2",
+        "description": "用于组件之间的间距2",
+        "value": {
+          "light": "8px",
+          "dark": "8px"
+        }
+      },
+      {
+        "key": "gap-3",
+        "name": "间距3",
+        "description": "用于组件之间的间距3",
+        "value": {
+          "light": "12px",
+          "dark": "12px"
+        }
+      },
+      {
+        "key": "gap-4",
+        "name": "间距4",
+        "description": "用于组件之间的间距4",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "gap-5",
+        "name": "间距5",
+        "description": "用于组件之间的间距5",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "gap-6",
+        "name": "间距6",
+        "description": "用于组件之间的间距6",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "gap-7",
+        "name": "间距7",
+        "description": "用于组件之间的间距7",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      },
+      {
+        "key": "gap-8",
+        "name": "间距8",
+        "description": "用于组件之间的间距8",
+        "value": {
+          "light": "48px",
+          "dark": "48px"
+        }
+      },
+      {
+        "key": "gap-9",
+        "name": "间距9",
+        "description": "用于组件之间的间距9",
+        "value": {
+          "light": "64px",
+          "dark": "64px"
+        }
+      },
+      {
+        "key": "gap-10",
+        "name": "间距10",
+        "description": "用于组件之间的间距10",
+        "value": {
+          "light": "72px",
+          "dark": "72px"
+        }
+      }
+    ]
+  },
+  "size": {
+    "name": "组件尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "size-xs",
+        "name": "小尺寸",
+        "description": "小尺寸",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "size-s",
+        "name": "小尺寸",
+        "description": "小尺寸",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "size-m",
+        "name": "中尺寸",
+        "description": "尺寸",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "size-l",
+        "name": "大尺寸",
+        "description": "尺寸",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      },
+      {
+        "key": "size-xl",
+        "name": "大尺寸",
+        "description": "尺寸",
+        "value": {
+          "light": "48px",
+          "dark": "48px"
+        }
+      },
+      {
+        "key": "size-xxl",
+        "name": "大尺寸",
+        "description": "尺寸",
+        "value": {
+          "light": "56px",
+          "dark": "56px"
+        }
+      }
+    ]
+  },
+  "icon_size": {
+    "name": "图标尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "icon_size-xs",
+        "name": "超小尺寸图标",
+        "description": "小尺寸",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "icon_size-s",
+        "name": "小尺寸图标",
+        "description": "小尺寸",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "icon_size-m",
+        "name": "中尺寸图标",
+        "description": "尺寸",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "icon_size-l",
+        "name": "大尺寸图标",
+        "description": "尺寸",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      },
+      {
+        "key": "icon_size-xl",
+        "name": "大尺寸图标",
+        "description": "尺寸",
+        "value": {
+          "light": "48px",
+          "dark": "48px"
+        }
+      },
+      {
+        "key": "icon_size-xxl",
+        "name": "大尺寸图标",
+        "description": "尺寸",
+        "value": {
+          "light": "64px",
+          "dark": "64px"
+        }
+      },
+      {
+        "key": "icon_size-xxxl",
+        "name": "大尺寸图标",
+        "description": "尺寸",
+        "value": {
+          "light": "72px",
+          "dark": "72px"
+        }
+      },
+      {
+        "key": "icon_size-xxxxl",
+        "name": "大尺寸图标",
+        "description": "尺寸",
+        "value": {
+          "light": "96px",
+          "dark": "96px"
+        }
+      }
+    ]
+  },
+  "font_size": {
+    "name": "字体尺寸",
+    "type": "font",
+    "typeName": "字体",
+    "value": [
+      {
+        "key": "font_size-display1",
+        "name": "一级数据展示",
+        "description": "一级数据展示",
+        "value": {
+          "light": "64px",
+          "dark": "64px"
+        }
+      },
+      {
+        "key": "font_size-display2",
+        "name": "二级数据展示",
+        "description": "二级数据展示",
+        "value": {
+          "light": "56px",
+          "dark": "56px"
+        }
+      },
+      {
+        "key": "font_size-display3",
+        "name": "三级数据展示",
+        "description": "三级数据展示",
+        "value": {
+          "light": "48px",
+          "dark": "48px"
+        }
+      },
+      {
+        "key": "font_size-display4",
+        "name": "四级数据展示",
+        "description": "四级数据展示",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      },
+      {
+        "key": "font_size-display5",
+        "name": "五级数据展示",
+        "description": "五级数据展示",
+        "value": {
+          "light": "36px",
+          "dark": "36px"
+        }
+      },
+      {
+        "key": "font_size-h1",
+        "name": "一级标题",
+        "description": "一级标题",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "font_size-h2",
+        "name": "二级标题",
+        "description": "二级标题",
+        "value": {
+          "light": "28px",
+          "dark": "28px"
+        }
+      },
+      {
+        "key": "font_size-h3",
+        "name": "三级标题",
+        "description": "三级标题",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "font_size-h4",
+        "name": "四级标题",
+        "description": "四级标题",
+        "value": {
+          "light": "20px",
+          "dark": "20px"
+        }
+      },
+      {
+        "key": "font_size-h5",
+        "name": "五级标题",
+        "description": "五级标题",
+        "value": {
+          "light": "18px",
+          "dark": "18px"
+        }
+      },
+      {
+        "key": "font_size-text",
+        "name": "正文",
+        "description": "正文",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "font_size-tip1",
+        "name": "提示文本1",
+        "description": "提示文本1",
+        "value": {
+          "light": "14px",
+          "dark": "14px"
+        }
+      },
+      {
+        "key": "font_size-tip2",
+        "name": "提示文本2",
+        "description": "提示文本2",
+        "value": {
+          "light": "12px",
+          "dark": "12px"
+        }
+      }
+    ]
+  },
+  "line_height": {
+    "name": "字体行高",
+    "type": "font",
+    "typeName": "字体",
+    "value": [
+      {
+        "key": "line_height-display1",
+        "name": "一级数据展示",
+        "description": "一级数据展示",
+        "value": {
+          "light": "90px",
+          "dark": "90px"
+        }
+      },
+      {
+        "key": "line_height-display2",
+        "name": "二级数据展示",
+        "description": "二级数据展示",
+        "value": {
+          "light": "80px",
+          "dark": "80px"
+        }
+      },
+      {
+        "key": "line_height-display3",
+        "name": "三级数据展示",
+        "description": "三级数据展示",
+        "value": {
+          "light": "64px",
+          "dark": "64px"
+        }
+      },
+      {
+        "key": "line_height-display4",
+        "name": "四级数据展示",
+        "description": "四级数据展示",
+        "value": {
+          "light": "56px",
+          "dark": "56px"
+        }
+      },
+      {
+        "key": "line_height-display5",
+        "name": "五级数据展示",
+        "description": "五级数据展示",
+        "value": {
+          "light": "48px",
+          "dark": "48px"
+        }
+      },
+      {
+        "key": "line_height-h1",
+        "name": "一级标题",
+        "description": "一级标题",
+        "value": {
+          "light": "44px",
+          "dark": "44px"
+        }
+      },
+      {
+        "key": "line_height-h2",
+        "name": "二级标题",
+        "description": "二级标题",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      },
+      {
+        "key": "line_height-h3",
+        "name": "三级标题",
+        "description": "三级标题",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "line_height-h4",
+        "name": "四级标题",
+        "description": "四级标题",
+        "value": {
+          "light": "28px",
+          "dark": "28px"
+        }
+      },
+      {
+        "key": "line_height-h5",
+        "name": "五级标题",
+        "description": "五级标题",
+        "value": {
+          "light": "28px",
+          "dark": "28px"
+        }
+      },
+      {
+        "key": "line_height-text",
+        "name": "正文",
+        "description": "正文",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "line_height-tip1",
+        "name": "提示文本1",
+        "description": "提示文本1",
+        "value": {
+          "light": "22px",
+          "dark": "22px"
+        }
+      },
+      {
+        "key": "line_height-tip2",
+        "name": "提示文本2",
+        "description": "提示文本2",
+        "value": {
+          "light": "18px",
+          "dark": "18px"
+        }
+      }
+    ]
+  },
+  "radius": {
+    "name": "圆角尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "radius-s",
+        "name": "小尺寸圆角",
+        "description": "小尺寸圆角",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "radius-m",
+        "name": "中尺寸圆角",
+        "description": "中尺寸圆角",
+        "value": {
+          "light": "8px",
+          "dark": "8px"
+        }
+      },
+      {
+        "key": "radius-l",
+        "name": "大尺寸圆角",
+        "description": "大尺寸圆角",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "radius-xl",
+        "name": "大尺寸圆角",
+        "description": "大尺寸圆角",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "radius-control-l",
+        "name": "大尺寸控件圆角",
+        "description": "大尺寸控件圆角",
+        "value": {
+          "light": "var(--o-radius-l)",
+          "dark": "var(--o-radius-l)"
+        }
+      },
+      {
+        "key": "radius-control-m",
+        "name": "中尺寸控件圆角",
+        "description": "中尺寸控件圆角",
+        "value": {
+          "light": "var(--o-radius-m)",
+          "dark": "var(--o-radius-m)"
+        }
+      },
+      {
+        "key": "radius-control-s",
+        "name": "小尺寸控件圆角",
+        "description": "小尺寸控件圆角",
+        "value": {
+          "light": "var(--o-radius-s)",
+          "dark": "var(--o-radius-s)"
+        }
+      }
+    ]
+  },
+  "duration": {
+    "name": "动画持续时间",
+    "type": "animation",
+    "typeName": "动画",
+    "value": [
+      {
+        "key": "duration-s",
+        "name": "持续时间",
+        "description": "用于退出屏幕的动画",
+        "value": {
+          "light": "200ms",
+          "dark": "200ms"
+        }
+      },
+      {
+        "key": "duration-m1",
+        "name": "持续时间",
+        "description": "用于当曲线为standard-in时进入屏幕的动画",
+        "value": {
+          "light": "250ms",
+          "dark": "250ms"
+        }
+      },
+      {
+        "key": "duration-m2",
+        "name": "持续时间",
+        "description": "用于当曲线为standard时开始、结束的动画",
+        "value": {
+          "light": "300ms",
+          "dark": "300ms"
+        }
+      },
+      {
+        "key": "duration-m3",
+        "name": "持续时间",
+        "description": "用于当曲线为emphasized-in时进入屏幕的动画",
+        "value": {
+          "light": "400ms",
+          "dark": "400ms"
+        }
+      },
+      {
+        "key": "duration-l",
+        "name": "持续时间",
+        "description": "用于当曲线为emphasized时开始、结束的动画",
+        "value": {
+          "light": "500ms",
+          "dark": "500ms"
+        }
+      },
+      {
+        "key": "duration-xl",
+        "name": "持续时间",
+        "description": "用于当曲线为emphasized时，轮播切换动画",
+        "value": {
+          "light": "1000ms",
+          "dark": "1000ms"
+        }
+      }
+    ]
+  },
+  "easing": {
+    "name": "动画曲线",
+    "type": "animation",
+    "typeName": "动画",
+    "value": [
+      {
+        "key": "easing-linear",
+        "name": "线性动画曲线",
+        "description": "线性曲线",
+        "value": {
+          "light": "cubic-bezier(0, 0, 1, 1)",
+          "dark": "cubic-bezier(0, 0, 1, 1)"
+        }
+      },
+      {
+        "key": "easing-standard",
+        "name": "动画曲线",
+        "description": "用于组件",
+        "value": {
+          "light": "cubic-bezier(0.2, 0, 0, 1)",
+          "dark": "cubic-bezier(0.2, 0, 0, 1)"
+        }
+      },
+      {
+        "key": "easing-standard-in",
+        "name": "动画曲线",
+        "description": "用于组件",
+        "value": {
+          "light": "cubic-bezier(0, 0, 0, 1)",
+          "dark": "cubic-bezier(0, 0, 0, 1)"
+        }
+      },
+      {
+        "key": "easing-standard-out",
+        "name": "动画曲线",
+        "description": "用于组件",
+        "value": {
+          "light": "cubic-bezier(0.3, 0, 1, 1)",
+          "dark": "cubic-bezier(0.3, 0, 1, 1)"
+        }
+      },
+      {
+        "key": "easing-emphasized",
+        "name": "动画曲线",
+        "description": "用于大卡片、场景切换",
+        "value": {
+          "light": "cubic-bezier(0.2, 0, 0, 1)",
+          "dark": "cubic-bezier(0.2, 0, 0, 1)"
+        }
+      },
+      {
+        "key": "easing-emphasized-in",
+        "name": "动画曲线",
+        "description": "用于大卡片、场景切换",
+        "value": {
+          "light": "cubic-bezier(0.3, 0, 0.8, 0.15)",
+          "dark": "cubic-bezier(0.3, 0, 0.8, 0.15)"
+        }
+      },
+      {
+        "key": "easing-emphasized-out",
+        "name": "动画曲线",
+        "description": "用于大卡片、场景切换",
+        "value": {
+          "light": "cubic-bezier(0.05, 0.7, 0.1, 1)",
+          "dark": "cubic-bezier(0.05, 0.7, 0.1, 1)"
+        }
+      }
+    ]
+  }
+}
diff --git a/packages/scripts/README.md b/packages/scripts/README.md
index 9ceab1082..4c48c6aa0 100644
--- a/packages/scripts/README.md
+++ b/packages/scripts/README.md
@@ -1 +1 @@
-# scripts for open-computing
+# scripts for open-design
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index 3ca17f201..fe7358b6e 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -1,9 +1,7 @@
 {
   "name": "@opensig/opensig-scripts",
   "version": "0.0.1",
-  "description": "Open Computing Scripts",
-  "author": "Open Computing Team",
-  "license": "MIT",
+  "description": "opendesign component Scripts",
   "main": "dist/index.js",
   "bin": "dist/index.js",
   "files": [
@@ -32,4 +30,4 @@
     "typescript": "^4.6.4",
     "vite": "^3.2.3"
   }
-}
\ No newline at end of file
+}
-- 
Gitee