From 7bdc97a135f20a966cd5b47dc07f1ee86b6eb635 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 5 May 2023 01:10:01 +0800
Subject: [PATCH 01/20] fix

---
 packages/opendesign/src/components/carousel/gallery.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/opendesign/src/components/carousel/gallery.ts b/packages/opendesign/src/components/carousel/gallery.ts
index 7d91d5b9..37ef32e0 100644
--- a/packages/opendesign/src/components/carousel/gallery.ts
+++ b/packages/opendesign/src/components/carousel/gallery.ts
@@ -151,6 +151,10 @@ export default class Gallery extends Effect {
     const toSlide = this.slideList[toIndex];
     const fromSlide = this.slideList[this.currentIndex];
 
+    if (!toSlide) {
+      return Promise.resolve(null);
+    }
+
     toSlide.el.classList.add(GalleryClass.CURRENT);
     fromSlide?.el.classList.remove(GalleryClass.CURRENT);
 
-- 
Gitee


From 4bb9b59f9680f842fd9c62e0fbed50f8ed7e6a63 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 5 May 2023 15:48:19 +0800
Subject: [PATCH 02/20] fix

---
 packages/opendesign/src/components/figure/style/index.scss | 1 +
 packages/portal/package.json                               | 2 +-
 pnpm-lock.yaml                                             | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/opendesign/src/components/figure/style/index.scss b/packages/opendesign/src/components/figure/style/index.scss
index 4dcdf4a2..8a6c6412 100644
--- a/packages/opendesign/src/components/figure/style/index.scss
+++ b/packages/opendesign/src/components/figure/style/index.scss
@@ -2,6 +2,7 @@
 
 .o-figure {
   display: inline-flex;
+  vertical-align: top;
   overflow: hidden;
   transition: background-color var(--o-duration-m2);
   border-radius: var(--figure-radius);
diff --git a/packages/portal/package.json b/packages/portal/package.json
index 39c9b816..464cf5ee 100644
--- a/packages/portal/package.json
+++ b/packages/portal/package.json
@@ -10,7 +10,7 @@
     "gen:icon": "opensig-scripts gen:icon --config __test_scripts/icons/icon.config.ts"
   },
   "dependencies": {
-    "@opensig/opendesign": "workspace:^0.0.37",
+    "@opensig/opendesign": "workspace:^0.0.38",
     "normalize.css": "^8.0.1",
     "vue": "^3.2.41",
     "vue-router": "^4.1.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4fd95c0c..3e80018e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,7 +41,7 @@ importers:
   packages/portal:
     dependencies:
       '@opensig/opendesign':
-        specifier: workspace:^0.0.37
+        specifier: workspace:^0.0.38
         version: link:../opendesign
       '@opensig/opensig-scripts':
         specifier: workspace:^0.0.8
-- 
Gitee


From 7f6c4a5870f4c55772a295e98f51c55f2c82d691 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 5 May 2023 17:18:27 +0800
Subject: [PATCH 03/20] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E7=B1=BBo-hide-scrollbar=EF=BC=8C=E9=9A=90=E8=97=8F=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/components/scroller/OScroller.vue | 2 +-
 .../opendesign/src/components/scroller/style/index.scss   | 8 --------
 packages/opendesign/src/components/style/common.scss      | 7 +++++++
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/opendesign/src/components/scroller/OScroller.vue b/packages/opendesign/src/components/scroller/OScroller.vue
index 92da801f..c8f311fc 100644
--- a/packages/opendesign/src/components/scroller/OScroller.vue
+++ b/packages/opendesign/src/components/scroller/OScroller.vue
@@ -6,7 +6,7 @@ import { useResizeObserver } from '../hooks';
 import { getHtmlElement } from '../_shared/vue-utils';
 
 const ScrollerClass = {
-  BODY: 'o-scroller-root',
+  BODY: 'o-hide-scrollbar',
 };
 const props = defineProps(scrollerProps);
 
diff --git a/packages/opendesign/src/components/scroller/style/index.scss b/packages/opendesign/src/components/scroller/style/index.scss
index 278ea4f7..7b628a90 100644
--- a/packages/opendesign/src/components/scroller/style/index.scss
+++ b/packages/opendesign/src/components/scroller/style/index.scss
@@ -177,11 +177,3 @@
   z-index: var(--o-z-index-max);
   pointer-events: none;
 }
-
-.o-scroller-root {
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
diff --git a/packages/opendesign/src/components/style/common.scss b/packages/opendesign/src/components/style/common.scss
index a8197ec6..c27cd72d 100644
--- a/packages/opendesign/src/components/style/common.scss
+++ b/packages/opendesign/src/components/style/common.scss
@@ -6,3 +6,10 @@ $text-types: display1, display2, display3, display4, display5, h1, h2, h3, h4, t
     line-height: var(--o-line_height-#{$type});
   }
 }
+
+.o-hide-scrollbar {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
-- 
Gitee


From 8002c298f858d16079fa2eb75e6c573f72e63bea Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 5 May 2023 18:02:52 +0800
Subject: [PATCH 04/20] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dbox-sizing=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/components/layer/OLayer.vue | 2 +-
 packages/opendesign/src/components/popup/OPopup.vue | 2 +-
 packages/opendesign/src/components/style/index.scss | 1 -
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/opendesign/src/components/layer/OLayer.vue b/packages/opendesign/src/components/layer/OLayer.vue
index ffc542d6..7da03ec7 100644
--- a/packages/opendesign/src/components/layer/OLayer.vue
+++ b/packages/opendesign/src/components/layer/OLayer.vue
@@ -103,7 +103,7 @@ defineExpose({
 </script>
 <template>
   <teleport :to="props.wrapper" :disabled="!props.wrapper">
-    <div v-if="isMounted" v-show="visible || toMount" v-bind="$attrs" ref="layerRef" class="o-layer" :class="{ 'o-layer-to-body': isToBody }">
+    <div v-if="isMounted" v-show="visible || toMount" ref="layerRef" class="o-layer" :class="{ 'o-layer-to-body': isToBody }" v-bind="$attrs">
       <template v-if="props.mask">
         <transition :name="props.maskTransition" :appear="true">
           <div v-show="visible" class="o-layer-mask" @click="onMaskClick"></div>
diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index 3b02f5e4..1251ba08 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -370,8 +370,8 @@ const onPopupHoverOut = () => {
           ref="popupRef"
           class="o-popup"
           :style="popStyle"
-          v-bind="$attrs"
           :class="[`o-popup-pos-${popPosition}`, { 'out-view': props.hideWhenTargetInvisible && !isTargetInViewport, animating: isAnimating }]"
+          v-bind="$attrs"
           @mouseover="onPopupHoverIn"
           @mouseleave="onPopupHoverOut"
         >
diff --git a/packages/opendesign/src/components/style/index.scss b/packages/opendesign/src/components/style/index.scss
index 4b854f66..72446433 100644
--- a/packages/opendesign/src/components/style/index.scss
+++ b/packages/opendesign/src/components/style/index.scss
@@ -2,7 +2,6 @@
 @use './common.scss';
 @use './icon.scss';
 
-[class^='o-'],
 [class^='o-'] {
   box-sizing: border-box;
 }
-- 
Gitee


From 43387d647b715a65152092e6b015bb92777f2db3 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 5 May 2023 21:43:55 +0800
Subject: [PATCH 05/20] =?UTF-8?q?tab=E6=94=AF=E6=8C=81=E8=B6=85=E5=87=BA?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../opendesign/src/components/tab/OTab.vue    | 120 ++++++++++++++----
 .../src/components/tab/OTabPane.vue           |   4 +-
 .../src/components/tab/__demo__/IndexTab.vue  |   2 +
 .../src/components/tab/__demo__/TabScroll.vue |  52 ++++++++
 .../src/components/tab/style/index.scss       |  45 ++++++-
 .../src/components/tab/style/var.scss         |   3 +
 .../opendesign/src/components/tab/types.ts    |   8 +-
 packages/portal/src/main.ts                   |   2 -
 8 files changed, 197 insertions(+), 39 deletions(-)
 create mode 100644 packages/opendesign/src/components/tab/__demo__/TabScroll.vue

diff --git a/packages/opendesign/src/components/tab/OTab.vue b/packages/opendesign/src/components/tab/OTab.vue
index f6664c13..979e84ee 100644
--- a/packages/opendesign/src/components/tab/OTab.vue
+++ b/packages/opendesign/src/components/tab/OTab.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { provide, ref, nextTick, watch } from 'vue';
 import { tabInjectKey } from './provide';
-import { IconAdd } from '../_shared/icons';
+import { IconAdd, IconChevronLeft, IconChevronRight } from '../_shared/icons';
 import { tabProps } from './types';
-import { OResizeObserver } from '../resize-observer';
+import { vOnResize } from '../directves';
+import { debounceRAF } from '../_shared/utils';
 
 const props = defineProps(tabProps);
 
@@ -17,6 +18,7 @@ const emits = defineEmits<{
 const activeKey = ref(props.modelValue);
 const archorStyle = ref<Record<string, string>>({});
 
+const navWrapRef = ref<HTMLElement | null>(null);
 const navsRef = ref<HTMLElement | null>(null);
 const bodyRef = ref<HTMLElement | null>(null);
 
@@ -24,6 +26,36 @@ const valueSet: Array<string | number> = [];
 
 let activeNavEl: HTMLElement | null = null;
 
+const isScroll = ref(false);
+const prevDisabled = ref(true);
+const nextDisabled = ref(true);
+
+const scrollActiveNavIntoView = () => {
+  if (isScroll.value) {
+    activeNavEl?.scrollIntoView({ behavior: 'smooth', inline: 'center' });
+  }
+};
+
+const onWrapScroll = debounceRAF(() => {
+  if (navWrapRef.value) {
+    const { scrollLeft, scrollWidth, clientWidth } = navWrapRef.value;
+    prevDisabled.value = scrollLeft === 0;
+    nextDisabled.value = scrollLeft + 1 >= scrollWidth - clientWidth;
+  }
+});
+const updateNavScroll = () => {
+  if (navWrapRef.value) {
+    const { scrollWidth, clientWidth } = navWrapRef.value;
+    isScroll.value = scrollWidth > clientWidth;
+    if (isScroll.value) {
+      nextTick(() => {
+        onWrapScroll();
+        scrollActiveNavIntoView();
+      });
+    }
+  }
+};
+
 watch(
   () => props.modelValue,
   (v) => {
@@ -42,6 +74,7 @@ const updateArchor = () => {
     };
   });
 };
+watch(() => isScroll.value, updateArchor);
 
 // 更新tab当前选中值
 const updateValue = (value: string | number, navEl: HTMLElement | null) => {
@@ -55,8 +88,11 @@ const updateValue = (value: string | number, navEl: HTMLElement | null) => {
   if (navEl) {
     activeNavEl = navEl;
     updateArchor();
+
+    scrollActiveNavIntoView();
   }
 };
+const isAdding = ref(false);
 
 // 初始化tab，如果没有选中项，默认第一个
 const initValue = (value: string | number, navEl: HTMLElement | null) => {
@@ -64,8 +100,9 @@ const initValue = (value: string | number, navEl: HTMLElement | null) => {
     valueSet.push(value);
   }
 
-  if (activeKey.value === undefined) {
+  if (activeKey.value === undefined || isAdding.value) {
     updateValue(value, navEl);
+    isAdding.value = false;
   }
 
   if (activeKey.value === value && navEl) {
@@ -78,6 +115,8 @@ const onDeletePane = (value: string | number) => {
   emits('delete', value);
   const idx = valueSet.indexOf(value);
 
+  nextTick(updateNavScroll);
+
   if (activeKey.value === value) {
     activeKey.value = valueSet[idx > 0 ? idx - 1 : 0];
     emits('change', activeKey.value, value);
@@ -87,6 +126,10 @@ const onDeletePane = (value: string | number) => {
 // 添加页签
 const onAddNav = (e: MouseEvent) => {
   emits('add', e);
+  if (!props.addInactive) {
+    isAdding.value = true;
+  }
+  nextTick(updateNavScroll);
 };
 provide(tabInjectKey, {
   lazy: props.lazy,
@@ -97,41 +140,62 @@ provide(tabInjectKey, {
   onDeletePane,
   initValue,
 });
-const onHeadResize = () => {
+const onHeadResize = debounceRAF(() => {
   updateArchor();
+  updateNavScroll();
+  scrollActiveNavIntoView();
+});
+const navScroll = (to: 'prev' | 'next') => {
+  if (!navWrapRef.value) {
+    return;
+  }
+
+  const { clientWidth } = navWrapRef.value;
+  const i = to === 'prev' ? -1 : to === 'next' ? 1 : 0;
+  navWrapRef.value.scrollBy({ left: i * clientWidth, behavior: 'smooth' });
 };
 </script>
 <template>
   <div class="o-tab" :class="[`o-tab-${props.variant}`]">
-    <OResizeObserver @resize="onHeadResize">
-      <div
-        class="o-tab-head"
-        :class="[
-          {
-            'with-act': $slots.suffix || $slots.prefix,
-            'show-line': props.line,
-          },
-        ]"
-      >
-        <div v-if="$slots.prefix" class="o-tab-head-prefix">
-          <slot name="prefix"></slot>
-        </div>
-        <div class="o-tab-navs">
-          <div ref="navsRef" class="o-tab-navs-wrap"></div>
-          <div v-if="props.variant === 'text'" class="o-tab-nav-archor" :style="archorStyle">
-            <slot name="archor">
-              <div class="o-tab-nav-archor-line"></div>
-            </slot>
+    <div
+      v-on-resize="onHeadResize"
+      class="o-tab-head"
+      :class="[
+        {
+          'with-act': $slots.suffix || $slots.prefix,
+          'show-line': props.line,
+        },
+      ]"
+    >
+      <div v-if="$slots.prefix" class="o-tab-head-prefix">
+        <slot name="prefix"></slot>
+      </div>
+      <div class="o-tab-navs">
+        <div :class="{ 'o-tab-navs-scrollable': isScroll }">
+          <div v-if="isScroll" class="o-tab-nav-btn prev" :class="{ 'o-tab-nav-btn-disabled': prevDisabled }" @click="navScroll('prev')">
+            <IconChevronLeft />
+          </div>
+          <div ref="navWrapRef" class="o-tab-navs-wrap o-hide-scrollbar" @scroll.passive="onWrapScroll">
+            <div ref="navsRef" class="o-tab-nav-list"></div>
+            <div v-if="props.variant === 'text'" class="o-tab-nav-archor" :style="archorStyle">
+              <slot name="archor">
+                <div class="o-tab-nav-archor-line"></div>
+              </slot>
+            </div>
           </div>
-          <div v-if="props.addable" class="o-tab-nav-add" @click="onAddNav">
-            <IconAdd />
+          <div v-if="isScroll" class="o-tab-nav-btn next" :class="{ 'o-tab-nav-btn-disabled': nextDisabled }" @click="navScroll('next')">
+            <IconChevronRight />
           </div>
         </div>
-        <div v-if="$slots.suffix" class="o-tab-head-suffix">
-          <slot name="suffix"></slot>
+
+        <div v-if="props.addable" class="o-tab-nav-add" @click="onAddNav">
+          <IconAdd />
         </div>
       </div>
-    </OResizeObserver>
+      <div v-if="$slots.suffix" class="o-tab-head-suffix">
+        <slot name="suffix"></slot>
+      </div>
+    </div>
     <div ref="bodyRef" class="o-tab-body">
       <slot></slot>
     </div>
diff --git a/packages/opendesign/src/components/tab/OTabPane.vue b/packages/opendesign/src/components/tab/OTabPane.vue
index 8c793762..7f5b47d0 100644
--- a/packages/opendesign/src/components/tab/OTabPane.vue
+++ b/packages/opendesign/src/components/tab/OTabPane.vue
@@ -19,7 +19,6 @@ const navRef = ref<HTMLElement | null>(null);
 const tabInjection = inject(tabInjectKey, null);
 
 const { navsRef, activeValue, lazy } = tabInjection || {};
-// console.log(props.transition);
 
 const instance = getCurrentInstance();
 if (!props.value && !props.label) {
@@ -43,7 +42,6 @@ const toMount = computed(() => {
   }
   return true;
 });
-// console.log(toMount.value, props.unmountOnHide);
 
 watch(
   () => isActive.value,
@@ -100,7 +98,6 @@ onMounted(() => {
     <div
       v-if="!isClosed && toMount"
       v-show="isActive"
-      v-bind="$attrs"
       :class="[
         'o-tab-pane',
         {
@@ -109,6 +106,7 @@ onMounted(() => {
           'o-tab-pane-closable': props.closable,
         },
       ]"
+      v-bind="$attrs"
     >
       <slot></slot>
     </div>
diff --git a/packages/opendesign/src/components/tab/__demo__/IndexTab.vue b/packages/opendesign/src/components/tab/__demo__/IndexTab.vue
index 82e6309a..c062b5e3 100644
--- a/packages/opendesign/src/components/tab/__demo__/IndexTab.vue
+++ b/packages/opendesign/src/components/tab/__demo__/IndexTab.vue
@@ -2,10 +2,12 @@
 import '../style';
 
 import TabBasic from './TabBasic.vue';
+import TabScroll from './TabScroll.vue';
 </script>
 <template>
   <div class="page-demo">
     <TabBasic />
+    <TabScroll />
   </div>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/tab/__demo__/TabScroll.vue b/packages/opendesign/src/components/tab/__demo__/TabScroll.vue
new file mode 100644
index 00000000..a382b3bb
--- /dev/null
+++ b/packages/opendesign/src/components/tab/__demo__/TabScroll.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import { OTab, OTabPane } from '../index';
+const activeTab3 = ref('1');
+const tabChange = (val: string | number, oldVal?: string | number) => {
+  console.log(`active: ${val}, old: ${oldVal}`);
+};
+function getPanelItem(key: string) {
+  return {
+    id: key,
+    label: `Nav ${key}`,
+    content: `Panel Content: ${key}`,
+  };
+}
+const tabList = reactive(
+  new Array(8).fill(1).map((k, idx) => {
+    return getPanelItem(`${idx + 1}`);
+  })
+);
+const tabAdd = () => {
+  console.log('add tab');
+  tabList.push(getPanelItem(`${tabList.length + 1}`));
+  // nextTick(() => {
+  //   activeTab3.value = `${tabList.length + 1}`;
+  // });
+};
+
+const tabDelete = (v: string | number) => {
+  console.log(v);
+};
+</script>
+<template>
+  <h4>scroll</h4>
+  <div class="sec">
+    <OTab v-model="activeTab3" addable @change="tabChange" @add="tabAdd" @delete="tabDelete">
+      <OTabPane v-for="(item, idx) in tabList" :key="item.id" :value="item.id" class="pane" :label="item.label" :closable="idx > 1">
+        content {{ item.content }}
+      </OTabPane>
+    </OTab>
+  </div>
+</template>
+<style lang="scss">
+.sec {
+  border: 1px solid #eee;
+  padding: 24px;
+  margin-bottom: 24px;
+}
+.pane {
+  padding: 36px;
+  background-color: #fff;
+}
+</style>
diff --git a/packages/opendesign/src/components/tab/style/index.scss b/packages/opendesign/src/components/tab/style/index.scss
index 0cf63772..9cc1e0a0 100644
--- a/packages/opendesign/src/components/tab/style/index.scss
+++ b/packages/opendesign/src/components/tab/style/index.scss
@@ -27,11 +27,44 @@
   }
 }
 .o-tab-navs-wrap {
+  overflow: auto;
+  flex: 1;
+  position: relative;
+}
+
+.o-tab-navs-scrollable {
+  display: flex;
+  position: relative;
+  align-items: center;
+  flex: 1;
+  overflow: hidden;
+}
+.o-tab-nav-btn {
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: var(--tab-nav-btn-icon-size);
+  margin: 0 8px;
+
+  &:hover {
+    color: var(--tab-icon-color-hover);
+  }
+}
+.o-tab-nav-btn-disabled {
+  color: var(--tab-icon-color-disabled);
+  cursor: not-allowed;
+}
+
+.o-tab-nav-list {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
 }
 .o-tab-nav {
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
   cursor: pointer;
   border: 1px solid var(--tab-nav-bd-color);
@@ -40,7 +73,8 @@
   position: relative;
   margin-right: var(--tab-nav-gap);
   z-index: 1;
-  &:not(.o-tab-nav-disabled) {
+  color: var(--tab-icon-color);
+  &:not(.o-tab-nav-disabled, .o-tab-nav-active) {
     &:hover {
       color: var(--tab-nav-color-hover);
       border-color: var(--tab-nav-bd-color-hover);
@@ -107,14 +141,15 @@
 
 .o-tab-nav-add {
   margin-left: 8px;
-  display: inline-flex;
+  flex-shrink: 0;
+  display: flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
-  height: 20px;
+  width: var(--tab-nav-btn-size);
+  height: var(--tab-nav-btn-size);
   cursor: pointer;
   color: var(--tab-icon-color);
-  font-size: 14px;
+  font-size: var(--tab-nav-btn-icon-size);
   border-radius: 50%;
   &:hover {
     color: var(--tab-icon-color-hover);
diff --git a/packages/opendesign/src/components/tab/style/var.scss b/packages/opendesign/src/components/tab/style/var.scss
index 77f33446..04a64ab2 100644
--- a/packages/opendesign/src/components/tab/style/var.scss
+++ b/packages/opendesign/src/components/tab/style/var.scss
@@ -1,6 +1,8 @@
 .o-tab {
   --tab-nav-text-size: var(--o-font_size-text1);
   --tab-nav-text-height: var(--o-line_height-text1);
+  --tab-nav-btn-icon-size: 16px;
+  --tab-nav-btn-size: 24px;
 
   --tab-nav-color: var(--o-color-info2);
   --tab-nav-color-disabled: var(--o-color-info4);
@@ -9,6 +11,7 @@
 
   --tab-icon-color: var(--o-color-info2);
   --tab-icon-color-hover: var(--o-color-primary1);
+  --tab-icon-color-disabled: var(--o-color-info4);
 
   --tab-nav-divider: 1px solid var(--o-color-control1);
   --tab-nav-archor-color: var(--o-color-primary1);
diff --git a/packages/opendesign/src/components/tab/types.ts b/packages/opendesign/src/components/tab/types.ts
index 063d0c63..4ac12d46 100644
--- a/packages/opendesign/src/components/tab/types.ts
+++ b/packages/opendesign/src/components/tab/types.ts
@@ -1,7 +1,7 @@
 import { ExtractPropTypes, PropType } from 'vue';
 
 export const TabVariantTypes = ['solid', 'text'] as const;
-export type TabVariantT = typeof TabVariantTypes[number];
+export type TabVariantT = (typeof TabVariantTypes)[number];
 
 export const tabProps = {
   /**
@@ -31,6 +31,12 @@ export const tabProps = {
   addable: {
     type: Boolean,
   },
+  /**
+   * 不激活新添加页签
+   */
+  addInactive: {
+    type: Boolean,
+  },
   /**
    * 是否展示nav线
    */
diff --git a/packages/portal/src/main.ts b/packages/portal/src/main.ts
index d1c01396..48a5f9f8 100644
--- a/packages/portal/src/main.ts
+++ b/packages/portal/src/main.ts
@@ -5,7 +5,6 @@ import 'normalize.css';
 import '@opensig/opendesign/src/components/style/default-light.token.css';
 import '@opensig/opendesign/src/components/style/dark.token.css';
 
-
 import { router } from '@/router';
 
 import App from './App.vue';
@@ -15,4 +14,3 @@ const app = createApp(App);
 app.use(router);
 
 app.mount('#app');
-
-- 
Gitee


From ac889390cca1a6a36f92a27681d3e17b63eba790 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 5 May 2023 22:21:40 +0800
Subject: [PATCH 06/20] =?UTF-8?q?tab=E7=B1=BB=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../opendesign/src/components/tag/OTag.vue    |  2 +-
 .../src/components/tag/style/var.scss         | 44 +++++++++----------
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/packages/opendesign/src/components/tag/OTag.vue b/packages/opendesign/src/components/tag/OTag.vue
index d9a35a26..cb7585f7 100644
--- a/packages/opendesign/src/components/tag/OTag.vue
+++ b/packages/opendesign/src/components/tag/OTag.vue
@@ -66,7 +66,7 @@ const onClose = (ev: MouseEvent) => {
       `o-tag-${props.size || defaultSize}`,
       round.class.value,
       { 'o-tag-checkable': props.checkable },
-      { 'o-tag-checked': isChecked },
+      { 'o-tag-not-checked': !isChecked },
     ]"
     :style="round.style.value"
     @click="onClick"
diff --git a/packages/opendesign/src/components/tag/style/var.scss b/packages/opendesign/src/components/tag/style/var.scss
index e6c52c7a..de8a20f1 100644
--- a/packages/opendesign/src/components/tag/style/var.scss
+++ b/packages/opendesign/src/components/tag/style/var.scss
@@ -78,28 +78,26 @@
   }
 }
 
-.o-tag-checkable {
-  &:not(.o-tag-checked) {
-    --tag-bg-color: transparent;
-    --tag-bd-color: transparent;
-    &.o-tag-normal {
-      --tag-color: var(--o-color-info1);
-    }
-
-    &.o-tag-primary {
-      --tag-color: var(--o-color-primary1);
-    }
-
-    &.o-tag-success {
-      --tag-color: var(--o-color-success1);
-    }
-
-    &.o-tag-warning {
-      --tag-color: var(--o-color-warning1);
-    }
-
-    &.o-tag-danger {
-      --tag-color: var(--o-color-danger1);
-    }
+.o-tag-not-checked {
+  --tag-bg-color: transparent;
+  --tag-bd-color: transparent;
+  &.o-tag-normal {
+    --tag-color: var(--o-color-info1);
+  }
+
+  &.o-tag-primary {
+    --tag-color: var(--o-color-primary1);
+  }
+
+  &.o-tag-success {
+    --tag-color: var(--o-color-success1);
+  }
+
+  &.o-tag-warning {
+    --tag-color: var(--o-color-warning1);
+  }
+
+  &.o-tag-danger {
+    --tag-color: var(--o-color-danger1);
   }
 }
-- 
Gitee


From ee5ffe1c3d73b350c5082f5d036041fcb5287619 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Sat, 6 May 2023 14:25:10 +0800
Subject: [PATCH 07/20] up

---
 .../icons/components/IconAdd/IconAdd.vue      | 16 ++++++++
 .../icons/components/IconAdd/index.ts         |  1 +
 .../icons/components/IconAlert/IconAlert.vue  | 16 ++++++++
 .../icons/components/IconAlert/index.ts       |  1 +
 .../components/IconAscend/IconAscend.vue      | 16 ++++++++
 .../icons/components/IconAscend/index.ts      |  1 +
 .../components/IconKunpeng/IconKunpeng.vue    | 16 ++++++++
 .../icons/components/IconKunpeng/index.ts     |  1 +
 .../icons/components/IconX/IconX.vue          | 16 ++++++++
 .../icons/components/IconX/index.ts           |  1 +
 .../components/IconXCircle/IconXCircle.vue    | 16 ++++++++
 .../icons/components/IconXCircle/index.ts     |  1 +
 .../icons/components/icons.json               | 38 +++++++++++++++++++
 .../__test_scripts/icons/components/index.ts  |  6 +++
 packages/scripts/src/gen-icon/config.ts       |  2 +-
 15 files changed, 147 insertions(+), 1 deletion(-)
 create mode 100644 packages/portal/__test_scripts/icons/components/IconAdd/IconAdd.vue
 create mode 100644 packages/portal/__test_scripts/icons/components/IconAdd/index.ts
 create mode 100644 packages/portal/__test_scripts/icons/components/IconAlert/IconAlert.vue
 create mode 100644 packages/portal/__test_scripts/icons/components/IconAlert/index.ts
 create mode 100644 packages/portal/__test_scripts/icons/components/IconAscend/IconAscend.vue
 create mode 100644 packages/portal/__test_scripts/icons/components/IconAscend/index.ts
 create mode 100644 packages/portal/__test_scripts/icons/components/IconKunpeng/IconKunpeng.vue
 create mode 100644 packages/portal/__test_scripts/icons/components/IconKunpeng/index.ts
 create mode 100644 packages/portal/__test_scripts/icons/components/IconX/IconX.vue
 create mode 100644 packages/portal/__test_scripts/icons/components/IconX/index.ts
 create mode 100644 packages/portal/__test_scripts/icons/components/IconXCircle/IconXCircle.vue
 create mode 100644 packages/portal/__test_scripts/icons/components/IconXCircle/index.ts
 create mode 100644 packages/portal/__test_scripts/icons/components/icons.json
 create mode 100644 packages/portal/__test_scripts/icons/components/index.ts

diff --git a/packages/portal/__test_scripts/icons/components/IconAdd/IconAdd.vue b/packages/portal/__test_scripts/icons/components/IconAdd/IconAdd.vue
new file mode 100644
index 00000000..910da076
--- /dev/null
+++ b/packages/portal/__test_scripts/icons/components/IconAdd/IconAdd.vue
@@ -0,0 +1,16 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'IconAdd',
+  svgType: 'fill',
+  setup() {
+    const classnames = ['o-icon', 'o-icon-add', 'type-fill'];
+    return {
+      classnames,
+    };
+  },
+});
+</script>
+<template>
+  <svg viewBox="0 0 24 24" :class="classnames"><path d="M12.125 2.15a.6.6 0 0 1 .592.503l.008.097v18.5a.6.6 0 0 1-1.192.097l-.008-.097v-8.426l-8.775.001a.7.7 0 0 1-.095-1.394l.095-.006 8.775-.001V2.75a.6.6 0 0 1 .6-.6zm9.125 9.375a.6.6 0 0 1 .097 1.192l-.097.008-7.25-.001v-1.199h7.25z"/></svg>
+</template>
\ No newline at end of file
diff --git a/packages/portal/__test_scripts/icons/components/IconAdd/index.ts b/packages/portal/__test_scripts/icons/components/IconAdd/index.ts
new file mode 100644
index 00000000..2e4cb41d
--- /dev/null
+++ b/packages/portal/__test_scripts/icons/components/IconAdd/index.ts
@@ -0,0 +1 @@
+export { default as IconAdd } from './IconAdd.vue';
\ No newline at end of file
diff --git a/packages/portal/__test_scripts/icons/components/IconAlert/IconAlert.vue b/packages/portal/__test_scripts/icons/components/IconAlert/IconAlert.vue
new file mode 100644
index 00000000..caa5f70f
--- /dev/null
+++ b/packages/portal/__test_scripts/icons/components/IconAlert/IconAlert.vue
@@ -0,0 +1,16 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'IconAlert',
+  svgType: 'fill',
+  setup() {
+    const classnames = ['o-icon', 'o-icon-alert', 'type-fill'];
+    return {
+      classnames,
+    };
+  },
+});
+</script>
+<template>
+  <svg viewBox="0 0 24 24" :class="classnames"><path d="M12.522 3.134c.176.096.32.239.418.413l8.925 15.875c.288.513.101 1.16-.418 1.445-.16.088-.339.134-.522.134H3.076a1.069 1.069 0 0 1-1.075-1.063c0-.181.047-.358.135-.516l8.925-15.875a1.082 1.082 0 0 1 1.462-.413zm-.518 13.821a.8.8 0 1 0 0 1.6.8.8 0 0 0 0-1.6zm-.009-8.139a.6.6 0 0 0-.6.6v6l.008.097a.6.6 0 0 0 1.192-.097v-6l-.008-.097a.6.6 0 0 0-.592-.503z"/></svg>
+</template>
\ No newline at end of file
diff --git a/packages/portal/__test_scripts/icons/components/IconAlert/index.ts b/packages/portal/__test_scripts/icons/components/IconAlert/index.ts
new file mode 100644
index 00000000..11cc9376
--- /dev/null
+++ b/packages/portal/__test_scripts/icons/components/IconAlert/index.ts
@@ -0,0 +1 @@
+export { default as IconAlert } from './IconAlert.vue';
\ No newline at end of file
diff --git a/packages/portal/__test_scripts/icons/components/IconAscend/IconAscend.vue b/packages/portal/__test_scripts/icons/components/IconAscend/IconAscend.vue
new file mode 100644
index 00000000..5eb5efe8
--- /dev/null
+++ b/packages/portal/__test_scripts/icons/components/IconAscend/IconAscend.vue
@@ -0,0 +1,16 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'IconAscend',
+  svgType: 'color',
+  setup() {
+    const classnames = ['o-icon', 'o-icon-ascend', 'type-color'];
+    return {
+      classnames,
+    };
+  },
+});
+</script>
+<template>
+  <svg viewBox="0 0 68 28" :class="classnames"><g fill="none" fill-rule="nonzero" class="st_logo_dh_ascend"><path fill="#040000" d="M52.442 13.264h-.772c-1.356.003-2.456.988-2.468 2.207l-.03 4.207h1.22v-4.125c0-.31.137-.608.38-.827.244-.22.575-.343.92-.343l.637.01c.733.012 1.32.549 1.322 1.208v4.073h1.223v-4.228a2.08 2.08 0 0 0-.714-1.544 2.572 2.572 0 0 0-1.718-.638Z" class="path1"/><path fill="#040000" d="M60.857 10.414v2.858a2.786 2.786 0 0 0-1.97-.784c-1.851 0-3.3 1.576-3.3 3.587 0 2.012 1.449 3.603 3.3 3.603.727.015 1.43-.26 1.97-.769v.71H62v-9.205h-1.143Zm-1.97 3.274c1.326 0 1.93 1.239 1.93 2.387 0 1.149-.604 2.388-1.93 2.388-1.209 0-2.166-1.05-2.166-2.388 0-1.338.95-2.394 2.167-2.394v.007Z" class="形状"/><path fill="#040000" d="m32.445 15.772-.425-.082c-.85-.163-1.151-.383-1.151-.703 0-.369.567-.637 1.16-.637.592 0 1.102.26 1.102.712v.215h1.449v-.215c0-1.126-1.039-1.798-2.55-1.798-1.43 0-2.608.726-2.608 1.723 0 .912.827 1.494 2.248 1.777l.403.075c1.26.24 1.366.574 1.366.882 0 .515-.576.875-1.398.875s-1.382-.43-1.382-1.024v-.214h-1.44v.214c0 1.237 1.166 2.106 2.833 2.106 1.667 0 2.868-.821 2.868-1.953-.009-1.284-1.194-1.698-2.475-1.953ZM47.29 18.161c-.386.29-.991.438-1.798.438-1.084 0-1.958-.674-2.176-1.684l-.019-.087h-1.251l.013.12c.065.724.427 1.403 1.018 1.909.658.534 1.521.828 2.415.821 1.094 0 1.975-.236 2.623-.701l.345-.247-.89-.786-.28.217ZM47.49 13.602c-.629-.646-1.446-1.019-2.301-1.05-1.623 0-2.901 1.288-3.126 3.127l-.017.141h1.139l.017-.1c.207-1.14 1.006-1.905 1.987-1.905.972.003 1.82.735 2.063 1.78h-1.116v1.233h2.298l.023-.589c.039-.993-.314-1.956-.967-2.637Z" class="路径"/><path fill="#040000" d="M44.184 16.115h1.425v1h-1.425z" class="矩形"/><path fill="#040000" d="m25.06 10.414-3.68 9.258h1.418l1.076-3.03h2.852l1.083 3.036h1.41l-3.532-9.256-.626-.008Zm1.232 5h-1.97l.942-2.425a.064.064 0 0 1 .064-.041.068.068 0 0 1 .066.04l.898 2.426Z" class="形状"/><path fill="#040000" d="M38.483 14.505c.581.042 1.12.35 1.481.846l.037.051h1.332l-.082-.189c-.521-1.156-1.586-1.905-2.768-1.949v1.24ZM36.817 16.115c.11-.861.78-1.56 1.666-1.74v-1.11c-1.549.158-2.753 1.362-2.85 2.85h1.184ZM40.74 17.665l-.037.051a2.207 2.207 0 0 1-2.254.812 2.134 2.134 0 0 1-1.645-1.7h-1.172c.169 1.67 1.504 2.85 3.297 2.85 1.412 0 2.554-.693 3.048-1.852l.069-.161H40.74Z" class="路径"/><path fill="#C31D20" d="M7.553 17.76c3.302-3.788 6.674-6.125 9.55-7.192l-.021-5.683a.94.94 0 0 0-.612-.83.915.915 0 0 0-.99.245l-2.522 2.771-12.59 14.42a1.498 1.498 0 0 0-.295 1.448c.163.502.576.877 1.085.984a1.438 1.438 0 0 0 1.38-.463l5.009-5.691.006-.008Z" class="路径"/><path fill="#C31D20" d="m10.69 16.093 4.41 5.46c.351.287.84.344 1.25.146.41-.198.662-.614.644-1.062l.11-6.617c-2.542-.261-4.627.693-6.414 2.073Z" class="路径"/></g></svg>
+</template>
\ No newline at end of file
diff --git a/packages/portal/__test_scripts/icons/components/IconAscend/index.ts b/packages/portal/__test_scripts/icons/components/IconAscend/index.ts
new file mode 100644
index 00000000..78b03045
--- /dev/null
+++ b/packages/portal/__test_scripts/icons/components/IconAscend/index.ts
@@ -0,0 +1 @@
+export { default as IconAscend } from './IconAscend.vue';
\ No newline at end of file
diff --git a/packages/portal/__test_scripts/icons/components/IconKunpeng/IconKunpeng.vue b/packages/portal/__test_scripts/icons/components/IconKunpeng/IconKunpeng.vue
new file mode 100644
index 00000000..cb60b1c6
--- /dev/null
+++ b/packages/portal/__test_scripts/icons/components/IconKunpeng/IconKunpeng.vue
@@ -0,0 +1,16 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'IconKunpeng',
+  svgType: 'color',
+  setup() {
+    const classnames = ['o-icon', 'o-icon-kunpeng', 'type-color'];
+    return {
+      classnames,
+    };
+  },
+});
+</script>
+<template>
+  <svg viewBox="0 0 68 28" :class="classnames"><defs><path id="a" d="M.128.067h4.814V8.1H.128z" class="path-1"/></defs><g fill="none" fill-rule="evenodd" class="a备份"><g class="编组"><path fill="#C7000B" d="m6.778 11.377-1.043 2.924L1 13.497l5.582 3.984L26.856 1z" class="Fill-1"/><path fill="#DBDADA" d="m7.445 18.096 12.368 8.847-5.24-8.462L25.413 3.35z" class="Fill-2"/><path fill="#000" d="M27.366 11.615h1.223v3.774c.226-.295.443-.599.65-.885l2.048-2.889h1.37l-2.454 3.305 2.663 4.199h-1.388l-2.047-3.314-.842.946v2.368h-1.223v-7.504Z" class="Fill-3"/><path fill="#000" d="M33.872 18.685c-.278-.347-.425-.876-.425-1.57v-3.591h1.197v3.504c0 .408.07.711.208.894.148.19.356.277.633.277.477 0 .937-.251 1.38-.763v-3.912h1.205v4.19c0 .468.009.936.044 1.405h-1.12a7.24 7.24 0 0 1-.103-.86c-.165.192-.33.348-.486.478a2.078 2.078 0 0 1-.573.338 1.832 1.832 0 0 1-.737.148c-.53 0-.937-.182-1.223-.538" class="Fill-5"/><path fill="#000" d="M39.614 14.955c0-.53-.009-.998-.034-1.431h1.127c.018.121.035.269.052.442.018.173.035.312.043.434.157-.2.321-.365.486-.495.157-.139.347-.251.564-.347.226-.086.468-.139.746-.139.52 0 .92.183 1.206.538.286.365.425.885.425 1.579v3.583h-1.197v-3.496c0-.79-.286-1.189-.842-1.189-.26 0-.494.07-.72.217a3.21 3.21 0 0 0-.65.573v3.895h-1.206v-4.164Z" class="Fill-7"/><path fill="#000" d="M48.86 17.748c.244-.347.365-.859.365-1.535 0-.625-.104-1.076-.303-1.362a.959.959 0 0 0-.816-.417c-.234 0-.451.061-.65.174-.2.121-.382.277-.564.468v3.002c.121.06.26.104.416.147.165.035.321.052.477.052.469 0 .824-.173 1.076-.529Zm-3.174-2.854c0-.416-.017-.867-.043-1.37h1.136c.044.234.07.468.087.71.468-.537 1.006-.814 1.613-.814.356 0 .677.095.98.286.295.19.538.485.72.893.191.4.278.92.278 1.544 0 .65-.104 1.206-.312 1.675-.208.46-.504.806-.885 1.05a2.428 2.428 0 0 1-1.31.355 3 3 0 0 1-1.058-.191v2.307l-1.206.113v-6.558Z" class="Fill-9"/><path fill="#000" d="M54.75 15.675c-.017-.451-.13-.78-.312-1.006-.19-.226-.442-.339-.763-.339a.995.995 0 0 0-.763.339c-.2.225-.339.563-.4 1.006h2.239Zm1.18.807h-3.452c.06 1.17.581 1.76 1.579 1.76.251 0 .503-.034.763-.095.26-.07.503-.156.746-.26l.26.876c-.59.304-1.249.46-1.986.46-.564 0-1.032-.113-1.414-.339a2.06 2.06 0 0 1-.867-.971c-.2-.425-.295-.928-.295-1.518 0-.625.104-1.154.312-1.596.2-.451.486-.79.85-1.024a2.33 2.33 0 0 1 1.275-.356c.494 0 .91.13 1.25.374.329.251.58.572.736.988.165.408.243.868.243 1.362v.339Z" class="Fill-11"/><path fill="#000" d="M57.101 14.955c0-.53-.008-.998-.034-1.431h1.127c.018.121.035.269.052.442.018.173.035.312.044.434.156-.2.32-.365.485-.495.157-.139.347-.251.564-.347.226-.086.469-.139.746-.139.52 0 .92.183 1.206.538.286.365.425.885.425 1.579v3.583h-1.197v-3.496c0-.79-.286-1.189-.85-1.189-.252 0-.486.07-.712.217-.216.14-.433.33-.65.573v3.895h-1.206v-4.164Z" class="Fill-13"/><g transform="translate(62.681 13.353)"><mask id="b" fill="#fff" class="mask-2"><use xlink:href="#a"/></mask><path fill="#000" d="M3.146 4.656a2.1 2.1 0 0 0 .556-.469V1.273a2.053 2.053 0 0 0-.46-.2 2.143 2.143 0 0 0-.52-.07c-.278 0-.512.079-.72.244-.209.156-.365.399-.478.72-.112.312-.173.711-.173 1.17 0 .6.104 1.033.303 1.31.2.27.46.408.772.408.26 0 .504-.069.72-.2M1.342 7.962a5.763 5.763 0 0 1-.876-.33l.26-.928c.564.286 1.102.434 1.614.434.442 0 .78-.122 1.015-.356.234-.234.347-.625.347-1.162v-.573a2.746 2.746 0 0 1-.686.599 1.739 1.739 0 0 1-.902.225 1.83 1.83 0 0 1-.997-.286c-.295-.182-.538-.477-.72-.885-.182-.399-.27-.92-.27-1.535 0-.634.096-1.189.296-1.648.2-.469.486-.825.859-1.076.381-.243.824-.373 1.353-.373.234 0 .46.035.676.104.226.06.417.147.573.26l.251-.26h.807c-.026.468-.043.928-.043 1.38v4.128c0 .52-.104.963-.312 1.327a1.996 1.996 0 0 1-.86.816c-.364.182-.78.278-1.24.278-.45 0-.833-.044-1.145-.14" class="Fill-15" mask="url(#b)"/></g></g></g></svg>
+</template>
\ No newline at end of file
diff --git a/packages/portal/__test_scripts/icons/components/IconKunpeng/index.ts b/packages/portal/__test_scripts/icons/components/IconKunpeng/index.ts
new file mode 100644
index 00000000..2d8b90aa
--- /dev/null
+++ b/packages/portal/__test_scripts/icons/components/IconKunpeng/index.ts
@@ -0,0 +1 @@
+export { default as IconKunpeng } from './IconKunpeng.vue';
\ No newline at end of file
diff --git a/packages/portal/__test_scripts/icons/components/IconX/IconX.vue b/packages/portal/__test_scripts/icons/components/IconX/IconX.vue
new file mode 100644
index 00000000..b3385a26
--- /dev/null
+++ b/packages/portal/__test_scripts/icons/components/IconX/IconX.vue
@@ -0,0 +1,16 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'IconX',
+  svgType: 'fill',
+  setup() {
+    const classnames = ['o-icon', 'o-icon-x', 'type-fill'];
+    return {
+      classnames,
+    };
+  },
+});
+</script>
+<template>
+  <svg viewBox="0 0 24 24" :class="classnames"><path d="M19.778 4.222a.75.75 0 0 1 0 1.061L5.282 19.779a.75.75 0 1 1-1.061-1.061L10.939 12 4.221 5.283a.75.75 0 1 1 1.061-1.061L12 10.939l6.718-6.717a.75.75 0 0 1 1.061 0zm0 14.496a.75.75 0 1 1-1.061 1.061l-6.01-6.011 1.06-1.06 6.01 6.01z"/></svg>
+</template>
\ No newline at end of file
diff --git a/packages/portal/__test_scripts/icons/components/IconX/index.ts b/packages/portal/__test_scripts/icons/components/IconX/index.ts
new file mode 100644
index 00000000..249bee20
--- /dev/null
+++ b/packages/portal/__test_scripts/icons/components/IconX/index.ts
@@ -0,0 +1 @@
+export { default as IconX } from './IconX.vue';
\ No newline at end of file
diff --git a/packages/portal/__test_scripts/icons/components/IconXCircle/IconXCircle.vue b/packages/portal/__test_scripts/icons/components/IconXCircle/IconXCircle.vue
new file mode 100644
index 00000000..2c375e78
--- /dev/null
+++ b/packages/portal/__test_scripts/icons/components/IconXCircle/IconXCircle.vue
@@ -0,0 +1,16 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'IconXCircle',
+  svgType: 'fill',
+  setup() {
+    const classnames = ['o-icon', 'o-icon-x-circle', 'type-fill'];
+    return {
+      classnames,
+    };
+  },
+});
+</script>
+<template>
+  <svg viewBox="0 0 24 24" :class="classnames"><path d="M12 1.25c1.116 0 2.211.17 3.254.502a.75.75 0 0 1-.454 1.43 9.24 9.24 0 0 0-2.801-.431c-5.109 0-9.25 4.141-9.25 9.25s4.141 9.25 9.25 9.25a9.25 9.25 0 0 0 9.25-9.25 9.235 9.235 0 0 0-3.732-7.425.75.75 0 0 1 .895-1.203 10.733 10.733 0 0 1 4.337 8.628c0 5.937-4.813 10.75-10.75 10.75s-10.75-4.813-10.75-10.75 4.813-10.75 10.75-10.75zm3.814 5.913a.75.75 0 0 1 .957 1.148l-3.712 3.712 3.712 3.713a.75.75 0 0 1-.957 1.148l-.104-.087-3.713-3.713-3.712 3.713-.104.087a.75.75 0 0 1-.957-1.148l3.711-3.713-3.711-3.712a.75.75 0 0 1 .957-1.148l.104.087 3.712 3.711L15.71 7.25z"/></svg>
+</template>
\ No newline at end of file
diff --git a/packages/portal/__test_scripts/icons/components/IconXCircle/index.ts b/packages/portal/__test_scripts/icons/components/IconXCircle/index.ts
new file mode 100644
index 00000000..0700d77f
--- /dev/null
+++ b/packages/portal/__test_scripts/icons/components/IconXCircle/index.ts
@@ -0,0 +1 @@
+export { default as IconXCircle } from './IconXCircle.vue';
\ No newline at end of file
diff --git a/packages/portal/__test_scripts/icons/components/icons.json b/packages/portal/__test_scripts/icons/components/icons.json
new file mode 100644
index 00000000..55443f32
--- /dev/null
+++ b/packages/portal/__test_scripts/icons/components/icons.json
@@ -0,0 +1,38 @@
+[
+  {
+    "type": "fill",
+    "name": "icon-add",
+    "componentName": "IconAdd",
+    "path": "fill/add.svg"
+  },
+  {
+    "type": "fill",
+    "name": "icon-alert",
+    "componentName": "IconAlert",
+    "path": "fill/alert.svg"
+  },
+  {
+    "type": "fill",
+    "name": "icon-x-circle",
+    "componentName": "IconXCircle",
+    "path": "fill/x-circle.svg"
+  },
+  {
+    "type": "fill",
+    "name": "icon-x",
+    "componentName": "IconX",
+    "path": "fill/x.svg"
+  },
+  {
+    "type": "color",
+    "name": "icon-ascend",
+    "componentName": "IconAscend",
+    "path": "color/ascend.svg"
+  },
+  {
+    "type": "color",
+    "name": "icon-kunpeng",
+    "componentName": "IconKunpeng",
+    "path": "color/kunpeng.svg"
+  }
+]
\ No newline at end of file
diff --git a/packages/portal/__test_scripts/icons/components/index.ts b/packages/portal/__test_scripts/icons/components/index.ts
new file mode 100644
index 00000000..b4ce73ee
--- /dev/null
+++ b/packages/portal/__test_scripts/icons/components/index.ts
@@ -0,0 +1,6 @@
+export { IconAdd } from './IconAdd';
+export { IconAlert } from './IconAlert';
+export { IconXCircle } from './IconXCircle';
+export { IconX } from './IconX';
+export { IconAscend } from './IconAscend';
+export { IconKunpeng } from './IconKunpeng';
\ No newline at end of file
diff --git a/packages/scripts/src/gen-icon/config.ts b/packages/scripts/src/gen-icon/config.ts
index 786be081..da72fe1c 100644
--- a/packages/scripts/src/gen-icon/config.ts
+++ b/packages/scripts/src/gen-icon/config.ts
@@ -98,7 +98,7 @@ export default defineComponent({
   name: '${componentName}',
   svgType: '${type}',
   setup() {
-    const classnames = ['o-icon', '${name}', 'type-${type}'];
+    const classnames = ['o-icon', 'o-${name}', 'type-${type}'];
     return {
       classnames,
     };
-- 
Gitee


From f100a1c2f2e6b51a0f751c6c31b54a1ae302d6f6 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Sat, 6 May 2023 14:30:11 +0800
Subject: [PATCH 08/20] v9

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

diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index b781e361..81fe1890 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opensig/opensig-scripts",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "opendesign component Scripts",
   "main": "dist/index.js",
   "bin": "dist/index.js",
-- 
Gitee


From aaa2f801ee49be309a7808eed493dcafdb3dc0c0 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 8 May 2023 14:23:42 +0800
Subject: [PATCH 09/20] =?UTF-8?q?=E6=9C=80=E5=90=8E=E4=B8=80=E4=B8=AA?=
 =?UTF-8?q?=E5=8E=BB=E6=8E=89margin-right?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/components/tab/style/index.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/opendesign/src/components/tab/style/index.scss b/packages/opendesign/src/components/tab/style/index.scss
index 31d4a4c7..b57bbf98 100644
--- a/packages/opendesign/src/components/tab/style/index.scss
+++ b/packages/opendesign/src/components/tab/style/index.scss
@@ -77,6 +77,9 @@
   margin-right: var(--tab-nav-gap);
   z-index: 1;
   color: var(--tab-icon-color);
+  &:last-child {
+    margin-right: 0;
+  }
   &:hover {
     color: var(--tab-nav-color-hover);
     border-color: var(--tab-nav-bd-color-hover);
-- 
Gitee


From 64f6acacf1f858217272960710d5961b736307c4 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 8 May 2023 17:27:05 +0800
Subject: [PATCH 10/20] =?UTF-8?q?=E5=A2=9E=E5=8A=A0types.ts=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95=E6=89=80=E6=9C=89=E9=80=9A=E7=94=A8=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/_shared/export.ts          |  2 +
 .../src/components/_shared/global.ts          | 23 ++----------
 .../opendesign/src/components/_shared/is.ts   |  5 ++-
 .../src/components/_shared/pointer.ts         | 14 ++-----
 .../src/components/_shared/types.ts           | 37 +++++++++++++++++++
 .../opendesign/src/components/badge/types.ts  |  2 +-
 .../opendesign/src/components/button/types.ts |  4 +-
 .../src/components/carousel/effect.ts         |  4 +-
 .../src/components/cascader/types.ts          |  2 +-
 .../src/components/checkbox-group/types.ts    |  2 +-
 .../src/components/divider/types.ts           |  4 +-
 .../src/components/dropdown/types.ts          |  2 +-
 .../src/components/figure/OFigure.vue         |  4 +-
 .../opendesign/src/components/input/types.ts  |  2 +-
 .../opendesign/src/components/link/types.ts   |  2 +-
 .../src/components/pagination/types.ts        |  4 +-
 .../src/components/radio-group/types.ts       |  2 +-
 .../opendesign/src/components/rate/types.ts   |  2 +-
 .../opendesign/src/components/select/types.ts |  4 +-
 .../opendesign/src/components/switch/types.ts |  4 +-
 .../opendesign/src/components/tag/types.ts    |  4 +-
 .../src/components/textarea/types.ts          |  4 +-
 22 files changed, 75 insertions(+), 58 deletions(-)
 create mode 100644 packages/opendesign/src/components/_shared/types.ts

diff --git a/packages/opendesign/src/components/_shared/export.ts b/packages/opendesign/src/components/_shared/export.ts
index 1551a1ff..3c3ff2d5 100644
--- a/packages/opendesign/src/components/_shared/export.ts
+++ b/packages/opendesign/src/components/_shared/export.ts
@@ -1,3 +1,5 @@
+export * from './types';
+
 export { initSize, initRound } from './global';
 
 export * from './init-icons';
diff --git a/packages/opendesign/src/components/_shared/global.ts b/packages/opendesign/src/components/_shared/global.ts
index 7a850a52..34639c33 100644
--- a/packages/opendesign/src/components/_shared/global.ts
+++ b/packages/opendesign/src/components/_shared/global.ts
@@ -1,37 +1,22 @@
 import { ref } from 'vue';
 import { ColorPool } from './utils';
+import { RoundT, SizeT } from './types';
 
 // 尺寸
-export const SizeTypes = ['large', 'medium', 'small'] as const;
-export type SizeT = typeof SizeTypes[number];
 export const defaultSize = ref<SizeT>('medium');
 export function initSize(val: SizeT) {
   defaultSize.value = val;
 }
 
 // 圆角
-export type RoundT = 'pill' | string;
 export const defaultRound = ref<'pill' | string>('');
 export function initRound(type: RoundT) {
   defaultRound.value = type;
 }
 
-// 方向
-export const DirectionTypes = ['h', 'v'] as const;
-export type DirectionT = typeof DirectionTypes[number];
-
-export const VariantTypes = ['solid', 'outline', 'text'] as const;
-export type VariantT = typeof VariantTypes[number];
-
-export const ColorTypes = ['normal', 'primary', 'success', 'warning', 'danger'] as const;
-export type ColorT = typeof ColorTypes[number];
-
-export const Color2Types = ['normal', 'success', 'warning', 'danger'] as const;
-export type Color2T = typeof ColorTypes[number];
-
 // 随机颜色池
-const PrestColor = ['#d9e6c3', '#ebd5be', '#d1e6de', '#e0ceeb', '#ebd3c7', '#e6dada', '#e3deeb', '#dedae6', '#cad0e8', '#cedeeb'];
-export const PrestColorPool = ref(new ColorPool(PrestColor));
+const defaultPrestColor = ['#d9e6c3', '#ebd5be', '#d1e6de', '#e0ceeb', '#ebd3c7', '#e6dada', '#e3deeb', '#dedae6', '#cad0e8', '#cedeeb'];
+export const defaultPrestColorPool = ref(new ColorPool(defaultPrestColor));
 export function initPrestColor(colors: string[]) {
-  PrestColorPool.value = new ColorPool(colors);
+  defaultPrestColorPool.value = new ColorPool(colors);
 }
diff --git a/packages/opendesign/src/components/_shared/is.ts b/packages/opendesign/src/components/_shared/is.ts
index b7ad6089..3e682ad6 100644
--- a/packages/opendesign/src/components/_shared/is.ts
+++ b/packages/opendesign/src/components/_shared/is.ts
@@ -1,4 +1,3 @@
-
 const opt = Object.prototype.toString;
 
 export function isUndefined(val: unknown): val is undefined {
@@ -41,4 +40,6 @@ export function isPlainObject(val: unknown): val is object {
 
 export const isPromise = <T>(val: unknown): val is Promise<T> => {
   return isObject(val) && isFunction(val.then) && isFunction(val.catch);
-};
\ No newline at end of file
+};
+
+export const isClient = typeof window !== 'undefined';
diff --git a/packages/opendesign/src/components/_shared/pointer.ts b/packages/opendesign/src/components/_shared/pointer.ts
index cbbb0890..2002f9f2 100644
--- a/packages/opendesign/src/components/_shared/pointer.ts
+++ b/packages/opendesign/src/components/_shared/pointer.ts
@@ -1,20 +1,12 @@
-export interface PointT {
-  x: number;
-  y: number;
-}
-export interface PointMoveT {
-  x: number;
-  y: number;
-  dx: number;
-  dy: number;
-}
+import type { PointT, PointMoveT } from './types';
+
 interface TouchOptionsT {
   onStart?: (pos: PointT, e: TouchEvent) => void;
   onMove?: (pos: PointMoveT, e: TouchEvent) => void;
   onEnd?: (pos: PointMoveT, e: TouchEvent) => void;
 }
 function noop() {}
-export class OTouch {
+export class OPointer {
   private el: HTMLElement;
   private x1: number;
   private y1: number;
diff --git a/packages/opendesign/src/components/_shared/types.ts b/packages/opendesign/src/components/_shared/types.ts
new file mode 100644
index 00000000..b3306f3d
--- /dev/null
+++ b/packages/opendesign/src/components/_shared/types.ts
@@ -0,0 +1,37 @@
+export interface PointT {
+  x: number;
+  y: number;
+}
+export interface PointMoveT {
+  x: number;
+  y: number;
+  dx: number;
+  dy: number;
+}
+export interface Point3DT {
+  x: number;
+  y: number;
+  z: number;
+}
+
+// 尺寸
+export const SizeTypes = ['large', 'medium', 'small'] as const;
+export type SizeT = (typeof SizeTypes)[number];
+
+// 圆角
+export type RoundT = 'pill' | string;
+
+// 方向
+export const DirectionTypes = ['h', 'v'] as const;
+export type DirectionT = (typeof DirectionTypes)[number];
+
+// 形状
+export const VariantTypes = ['solid', 'outline', 'text'] as const;
+export type VariantT = (typeof VariantTypes)[number];
+
+// 颜色
+export const ColorTypes = ['normal', 'primary', 'success', 'warning', 'danger'] as const;
+export type ColorT = (typeof ColorTypes)[number];
+
+export const Color2Types = ['normal', 'success', 'warning', 'danger'] as const;
+export type Color2T = (typeof ColorTypes)[number];
diff --git a/packages/opendesign/src/components/badge/types.ts b/packages/opendesign/src/components/badge/types.ts
index 3f76acd4..4e35f54e 100644
--- a/packages/opendesign/src/components/badge/types.ts
+++ b/packages/opendesign/src/components/badge/types.ts
@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import type { ColorT } from '../_shared/global';
+import type { ColorT } from '../_shared/types';
 
 export const badgeProps = {
   /**
diff --git a/packages/opendesign/src/components/button/types.ts b/packages/opendesign/src/components/button/types.ts
index 758a649a..21c79e5f 100644
--- a/packages/opendesign/src/components/button/types.ts
+++ b/packages/opendesign/src/components/button/types.ts
@@ -1,8 +1,8 @@
 import { ExtractPropTypes, PropType } from 'vue';
-import { RoundT, ColorT, VariantT } from '../_shared/global';
+import { RoundT, ColorT, VariantT } from '../_shared/types';
 
 export const ButtonSizeTypes = ['large', 'medium', 'small', 'mini'] as const;
-export type ButtonSizeT = typeof ButtonSizeTypes[number];
+export type ButtonSizeT = (typeof ButtonSizeTypes)[number];
 
 export const buttonProps = {
   /**
diff --git a/packages/opendesign/src/components/carousel/effect.ts b/packages/opendesign/src/components/carousel/effect.ts
index 0f3d1816..ee2bf58e 100644
--- a/packages/opendesign/src/components/carousel/effect.ts
+++ b/packages/opendesign/src/components/carousel/effect.ts
@@ -1,6 +1,6 @@
 import { supportTouch } from '../_shared/dom';
 import { isFunction } from '../_shared/is';
-import { OTouch, PointMoveT } from '../_shared/pointer';
+import { OPointer, PointMoveT } from '../_shared/pointer';
 
 export interface EffectT {
   active: (slideIndex: number) => Promise<null | number>;
@@ -55,7 +55,7 @@ export default abstract class Effect {
     if (!supportTouch()) {
       return;
     }
-    new OTouch(this.containerEl, {
+    new OPointer(this.containerEl, {
       onStart: () => {
         this.isTouchStart = true;
         this.handleTouchStart();
diff --git a/packages/opendesign/src/components/cascader/types.ts b/packages/opendesign/src/components/cascader/types.ts
index c25fd14e..35f6f30c 100644
--- a/packages/opendesign/src/components/cascader/types.ts
+++ b/packages/opendesign/src/components/cascader/types.ts
@@ -1,6 +1,6 @@
 import { ExtractPropTypes, PropType } from 'vue';
 import { PopupPositionT, PopupTriggerT } from '../popup';
-import type { RoundT, VariantT } from '../_shared/global';
+import type { RoundT, VariantT } from '../_shared/types';
 
 export type CascaderNodeValueT = string | number;
 export type CascaderNodePathT = Array<CascaderNodeValueT>;
diff --git a/packages/opendesign/src/components/checkbox-group/types.ts b/packages/opendesign/src/components/checkbox-group/types.ts
index 55353399..2f66b523 100644
--- a/packages/opendesign/src/components/checkbox-group/types.ts
+++ b/packages/opendesign/src/components/checkbox-group/types.ts
@@ -1,4 +1,4 @@
-import type { DirectionT } from '../_shared/global';
+import type { DirectionT } from '../_shared/types';
 import type { ExtractPropTypes, PropType } from 'vue';
 
 export const checkboxGroupProps = {
diff --git a/packages/opendesign/src/components/divider/types.ts b/packages/opendesign/src/components/divider/types.ts
index fad4d82a..42dd35f3 100644
--- a/packages/opendesign/src/components/divider/types.ts
+++ b/packages/opendesign/src/components/divider/types.ts
@@ -1,8 +1,8 @@
 import { ExtractPropTypes, PropType } from 'vue';
-import type { DirectionT } from '../_shared/global';
+import type { DirectionT } from '../_shared/types';
 
 export const DividerVariantTypes = ['solid', 'dashed', 'dotted'] as const;
-export type DividerVariantT = typeof DividerVariantTypes[number];
+export type DividerVariantT = (typeof DividerVariantTypes)[number];
 
 export const dividerProps = {
   /**
diff --git a/packages/opendesign/src/components/dropdown/types.ts b/packages/opendesign/src/components/dropdown/types.ts
index 687d3439..9a28fe9c 100644
--- a/packages/opendesign/src/components/dropdown/types.ts
+++ b/packages/opendesign/src/components/dropdown/types.ts
@@ -1,6 +1,6 @@
 import { PopupPositionT, PopupTriggerT } from '../popup';
 import { ExtractPropTypes, PropType } from 'vue';
-import type { SizeT, RoundT } from '../_shared/global';
+import type { SizeT, RoundT } from '../_shared/types';
 
 export const dropdownProps = {
   /**
diff --git a/packages/opendesign/src/components/figure/OFigure.vue b/packages/opendesign/src/components/figure/OFigure.vue
index 1550a0bc..c90a51e4 100644
--- a/packages/opendesign/src/components/figure/OFigure.vue
+++ b/packages/opendesign/src/components/figure/OFigure.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watch, computed, onMounted } from 'vue';
-import { PrestColorPool } from '../_shared/global';
+import { defaultPrestColorPool } from '../_shared/global';
 import HtmlTag from '../_shared/components/html-tag';
 
 import { figureProps } from './types';
@@ -12,7 +12,7 @@ const imgRef = ref<HTMLImageElement | null>(null);
 
 const isLoading = ref(true);
 const isError = ref(false);
-const prestColor = props.colorful ? PrestColorPool.value.pick() : '';
+const prestColor = props.colorful ? defaultPrestColorPool.value.pick() : '';
 
 const bgSrc = computed(() => {
   if (props.background && props.ratio) {
diff --git a/packages/opendesign/src/components/input/types.ts b/packages/opendesign/src/components/input/types.ts
index 8013ab82..5b73bbce 100644
--- a/packages/opendesign/src/components/input/types.ts
+++ b/packages/opendesign/src/components/input/types.ts
@@ -1,5 +1,5 @@
 import { ExtractPropTypes, PropType } from 'vue';
-import type { SizeT, RoundT, VariantT, Color2T } from '../_shared/global';
+import type { SizeT, RoundT, VariantT, Color2T } from '../_shared/types';
 
 export const inputProps = {
   /**
diff --git a/packages/opendesign/src/components/link/types.ts b/packages/opendesign/src/components/link/types.ts
index d847f691..9b29a3f2 100644
--- a/packages/opendesign/src/components/link/types.ts
+++ b/packages/opendesign/src/components/link/types.ts
@@ -1,5 +1,5 @@
 import { ExtractPropTypes, PropType } from 'vue';
-import { ColorT } from '../_shared/global';
+import { ColorT } from '../_shared/types';
 
 export const linkProps = {
   /**
diff --git a/packages/opendesign/src/components/pagination/types.ts b/packages/opendesign/src/components/pagination/types.ts
index 7274d0e6..83e93373 100644
--- a/packages/opendesign/src/components/pagination/types.ts
+++ b/packages/opendesign/src/components/pagination/types.ts
@@ -1,10 +1,10 @@
 import { ExtractPropTypes, PropType } from 'vue';
-import { RoundT } from '../_shared/global';
+import { RoundT } from '../_shared/types';
 
 const pageSizes = [6, 12, 24, 48];
 
 export const PaginationVariantTypes = ['solid', 'outline'] as const;
-export type PaginationVariantT = typeof PaginationVariantTypes[number];
+export type PaginationVariantT = (typeof PaginationVariantTypes)[number];
 
 export const paginationProps = {
   /**
diff --git a/packages/opendesign/src/components/radio-group/types.ts b/packages/opendesign/src/components/radio-group/types.ts
index 8597fc94..4c8e73ab 100644
--- a/packages/opendesign/src/components/radio-group/types.ts
+++ b/packages/opendesign/src/components/radio-group/types.ts
@@ -1,5 +1,5 @@
 import { ExtractPropTypes, PropType } from 'vue';
-import { DirectionT } from '../_shared/global';
+import { DirectionT } from '../_shared/types';
 
 export const radioGroupProps = {
   /**
diff --git a/packages/opendesign/src/components/rate/types.ts b/packages/opendesign/src/components/rate/types.ts
index d624bb57..5174e162 100644
--- a/packages/opendesign/src/components/rate/types.ts
+++ b/packages/opendesign/src/components/rate/types.ts
@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import type { ColorT, SizeT } from '../_shared/global';
+import type { ColorT, SizeT } from '../_shared/types';
 
 export const rateProps = {
   /**
diff --git a/packages/opendesign/src/components/select/types.ts b/packages/opendesign/src/components/select/types.ts
index 869d5f0a..d51ae22a 100644
--- a/packages/opendesign/src/components/select/types.ts
+++ b/packages/opendesign/src/components/select/types.ts
@@ -1,9 +1,9 @@
 import { PopupPositionT, PopupTriggerT } from '../popup';
 import { ExtractPropTypes, PropType } from 'vue';
-import type { SizeT, RoundT, VariantT, Color2T } from '../_shared/global';
+import type { SizeT, RoundT, VariantT, Color2T } from '../_shared/types';
 
 export const OptionWidthModeTypes = ['auto', 'min-width', 'width'] as const;
-export type OptionWidthModeT = typeof OptionWidthModeTypes[number];
+export type OptionWidthModeT = (typeof OptionWidthModeTypes)[number];
 
 export const selectProps = {
   /**
diff --git a/packages/opendesign/src/components/switch/types.ts b/packages/opendesign/src/components/switch/types.ts
index 0a7da7d2..ebc6056b 100644
--- a/packages/opendesign/src/components/switch/types.ts
+++ b/packages/opendesign/src/components/switch/types.ts
@@ -1,8 +1,8 @@
-import type { RoundT } from '../_shared/global';
+import type { RoundT } from '../_shared/types';
 import type { ExtractPropTypes, PropType } from 'vue';
 
 export const SwitchSizeTypes = ['medium', 'small'] as const;
-export type SwitchSizeT = typeof SwitchSizeTypes[number];
+export type SwitchSizeT = (typeof SwitchSizeTypes)[number];
 
 export const switchProps = {
   /**
diff --git a/packages/opendesign/src/components/tag/types.ts b/packages/opendesign/src/components/tag/types.ts
index 44e3ac11..36d3562d 100644
--- a/packages/opendesign/src/components/tag/types.ts
+++ b/packages/opendesign/src/components/tag/types.ts
@@ -1,8 +1,8 @@
 import { ExtractPropTypes, PropType } from 'vue';
-import { SizeT, RoundT, ColorT } from '../_shared/global';
+import { SizeT, RoundT, ColorT } from '../_shared/types';
 
 export const TagVariantTypes = ['solid', 'outline'] as const;
-export type TagVariantT = typeof TagVariantTypes[number];
+export type TagVariantT = (typeof TagVariantTypes)[number];
 
 export const tagProps = {
   /**
diff --git a/packages/opendesign/src/components/textarea/types.ts b/packages/opendesign/src/components/textarea/types.ts
index 6c8ab8bc..ddbdf4d1 100644
--- a/packages/opendesign/src/components/textarea/types.ts
+++ b/packages/opendesign/src/components/textarea/types.ts
@@ -1,8 +1,8 @@
 import { ExtractPropTypes, PropType } from 'vue';
-import type { SizeT, RoundT, VariantT, Color2T } from '../_shared/global';
+import type { SizeT, RoundT, VariantT, Color2T } from '../_shared/types';
 
 export const TextareaResizeTypes = ['both', 'horizontal', 'h', 'vertical', 'v', 'none'] as const;
-export type TextareaResizeT = typeof TextareaResizeTypes[number];
+export type TextareaResizeT = (typeof TextareaResizeTypes)[number];
 export const textareaProps = {
   /**
    * 下拉框的值
-- 
Gitee


From 2363f77d621548eee1424a07ab84fea3fd14d151 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Thu, 11 May 2023 09:27:35 +0800
Subject: [PATCH 11/20] =?UTF-8?q?layer=E6=94=AF=E6=8C=81=E6=A0=B9=E6=8D=AE?=
 =?UTF-8?q?=E9=BC=A0=E6=A0=87=E4=BD=8D=E7=BD=AE=E7=BC=A9=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../opendesign/src/components/_shared/dom.ts  |  7 +--
 .../src/components/_shared/types.ts           |  4 ++
 .../src/components/carousel/effect.ts         |  3 +-
 .../src/components/carousel/gallery.ts        |  2 +-
 .../src/components/carousel/toggle.ts         |  2 +-
 .../src/components/hooks/use-mouse.ts         | 49 +++++++++++++++
 .../src/components/layer/OLayer.vue           | 63 ++++++++++++++++---
 .../components/layer/__demo__/LayerBasic.vue  | 22 ++++++-
 .../src/components/layer/style/index.scss     |  4 ++
 .../opendesign/src/components/layer/types.ts  |  9 ++-
 .../src/components/style/animation.scss       | 13 +++-
 11 files changed, 159 insertions(+), 19 deletions(-)
 create mode 100644 packages/opendesign/src/components/hooks/use-mouse.ts

diff --git a/packages/opendesign/src/components/_shared/dom.ts b/packages/opendesign/src/components/_shared/dom.ts
index 0694d5f3..4572d814 100644
--- a/packages/opendesign/src/components/_shared/dom.ts
+++ b/packages/opendesign/src/components/_shared/dom.ts
@@ -1,6 +1,5 @@
 import { isArray } from './is';
-
-export type DirectionT = 'left' | 'right' | 'top' | 'bottom';
+import { PositionT } from './types';
 
 export function isHtmlElement(el: any) {
   return typeof HTMLElement === 'object'
@@ -74,9 +73,9 @@ export function getElementSize(el: HTMLElement | Window) {
   };
 }
 
-export function getElementBorder(el: HTMLElement, dir?: DirectionT | DirectionT[]) {
+export function getElementBorder(el: HTMLElement, dir?: PositionT | PositionT[]) {
   const style = window.getComputedStyle(el);
-  let d: DirectionT[] = [];
+  let d: PositionT[] = [];
 
   if (typeof dir === 'string') {
     d = [dir];
diff --git a/packages/opendesign/src/components/_shared/types.ts b/packages/opendesign/src/components/_shared/types.ts
index b3306f3d..d22b38dc 100644
--- a/packages/opendesign/src/components/_shared/types.ts
+++ b/packages/opendesign/src/components/_shared/types.ts
@@ -25,6 +25,10 @@ export type RoundT = 'pill' | string;
 export const DirectionTypes = ['h', 'v'] as const;
 export type DirectionT = (typeof DirectionTypes)[number];
 
+// 位置
+export const PositionTypes = ['left', 'right', 'top', 'bottom'] as const;
+export type PositionT = (typeof PositionTypes)[number];
+
 // 形状
 export const VariantTypes = ['solid', 'outline', 'text'] as const;
 export type VariantT = (typeof VariantTypes)[number];
diff --git a/packages/opendesign/src/components/carousel/effect.ts b/packages/opendesign/src/components/carousel/effect.ts
index ee2bf58e..8947a8a2 100644
--- a/packages/opendesign/src/components/carousel/effect.ts
+++ b/packages/opendesign/src/components/carousel/effect.ts
@@ -1,6 +1,7 @@
 import { supportTouch } from '../_shared/dom';
 import { isFunction } from '../_shared/is';
-import { OPointer, PointMoveT } from '../_shared/pointer';
+import { OPointer } from '../_shared/pointer';
+import { PointMoveT } from '../_shared/types';
 
 export interface EffectT {
   active: (slideIndex: number) => Promise<null | number>;
diff --git a/packages/opendesign/src/components/carousel/gallery.ts b/packages/opendesign/src/components/carousel/gallery.ts
index 37ef32e0..294855e6 100644
--- a/packages/opendesign/src/components/carousel/gallery.ts
+++ b/packages/opendesign/src/components/carousel/gallery.ts
@@ -1,5 +1,5 @@
 import { isFunction } from '../_shared/is';
-import { PointMoveT } from '../_shared/pointer';
+import { PointMoveT } from '../_shared/types';
 import Effect, { EffectOptionT } from './effect';
 import { useResizeObserver } from '../hooks';
 import { debounceRAF } from '../_shared/utils';
diff --git a/packages/opendesign/src/components/carousel/toggle.ts b/packages/opendesign/src/components/carousel/toggle.ts
index d21e66be..f4e954bb 100644
--- a/packages/opendesign/src/components/carousel/toggle.ts
+++ b/packages/opendesign/src/components/carousel/toggle.ts
@@ -1,5 +1,5 @@
 import { isFunction } from '../_shared/is';
-import { PointMoveT } from '../_shared/pointer';
+import { PointMoveT } from '../_shared/types';
 import Effect, { EffectOptionT } from './effect';
 interface ItemT {
   index: number;
diff --git a/packages/opendesign/src/components/hooks/use-mouse.ts b/packages/opendesign/src/components/hooks/use-mouse.ts
new file mode 100644
index 00000000..17790ee9
--- /dev/null
+++ b/packages/opendesign/src/components/hooks/use-mouse.ts
@@ -0,0 +1,49 @@
+import { ref } from 'vue';
+import { PointT } from '../_shared/types';
+import { isClient } from '../_shared/is';
+import { trigger } from '../_shared/event';
+
+export type PointerTypeT = 'mouse' | 'touch';
+export type PositionTypeT = 'page' | 'client' | 'screen' | 'offset';
+
+export interface UseMousePropsT {
+  defaultValue?: PointT;
+  target?: Window | EventTarget | null;
+  type?: PositionTypeT;
+}
+
+const getPositionByType: Record<PositionTypeT, (e: MouseEvent | TouchEvent) => PointT> = {
+  page: (e) => ({ x: (e as MouseEvent).pageX, y: (e as MouseEvent).pageY }),
+  client: (e) => ({ x: (e as MouseEvent).clientX, y: (e as MouseEvent).clientY }),
+  screen: (e) => ({ x: (e as MouseEvent).screenX, y: (e as MouseEvent).screenY }),
+  offset: (e) => ({ x: (e as MouseEvent).offsetX, y: (e as MouseEvent).offsetY }),
+};
+
+const defaultWindow = isClient ? window : null;
+export function useMouse(props: UseMousePropsT = {}) {
+  const { defaultValue = { x: 0, y: 0 }, target = defaultWindow, type = 'page' } = props;
+  const x = ref(defaultValue.x);
+  const y = ref(defaultValue.y);
+  const handler = (e: Event) => {
+    const p = getPositionByType[type](e as MouseEvent);
+    x.value = p.x;
+    y.value = p.y;
+  };
+
+  if (target) {
+    target.addEventListener('mousemove', handler, { passive: true });
+    trigger(target as HTMLElement, 'mousemove');
+  }
+
+  const destroy = () => {
+    target?.removeEventListener('mousemove', handler);
+  };
+
+  return {
+    x,
+    y,
+    destroy,
+  };
+}
+
+export type UseMouseT = ReturnType<typeof useMouse>;
diff --git a/packages/opendesign/src/components/layer/OLayer.vue b/packages/opendesign/src/components/layer/OLayer.vue
index 7da03ec7..cbd0e623 100644
--- a/packages/opendesign/src/components/layer/OLayer.vue
+++ b/packages/opendesign/src/components/layer/OLayer.vue
@@ -4,8 +4,9 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { ref, watch, computed, onMounted, nextTick } from 'vue';
+import { ref, watch, computed, onMounted, nextTick, onUnmounted, CSSProperties } from 'vue';
 import { layerProps } from './types';
+import { useMouse, UseMouseT } from '../hooks/use-mouse';
 
 const props = defineProps(layerProps);
 
@@ -22,16 +23,27 @@ const isToBody = ref(false);
 const LayerClass = {
   OPEN: 'o-layer-open',
 };
+const mainRef = ref<HTMLElement | null>(null);
+
+let mouse: UseMouseT = useMouse({
+  type: 'client',
+});
+
+const layerRef = ref<HTMLElement | null>(null);
 // 挂载目标
 let wrapperEl: HTMLElement | null = null;
-const layerRef = ref<HTMLElement | null>(null);
+
+const initWrapperEl = () => {
+  if (!wrapperEl && layerRef.value) {
+    wrapperEl = layerRef.value.offsetParent as HTMLElement;
+    isToBody.value = wrapperEl === document.body;
+  }
+  return wrapperEl;
+};
 
 const handleWrapperScroll = () => {
+  initWrapperEl();
   nextTick(() => {
-    if (!wrapperEl && layerRef.value) {
-      wrapperEl = layerRef.value.offsetParent as HTMLElement;
-      isToBody.value = wrapperEl === document.body;
-    }
     if (wrapperEl) {
       if (visible.value) {
         wrapperEl.classList.add(LayerClass.OPEN);
@@ -42,6 +54,32 @@ const handleWrapperScroll = () => {
   });
 };
 
+const mainStyle = ref<CSSProperties>({});
+
+// 以鼠标位置缩放
+const getOriginStyle = () => {
+  let ox = 'center';
+  let oy = 'center';
+  if (mainRef.value && mouse) {
+    const { offsetLeft, offsetTop } = mainRef.value;
+    if (isToBody.value) {
+      ox = `${mouse.x.value - offsetLeft}px`;
+      oy = `${mouse.y.value - offsetTop}px`;
+    } else if (wrapperEl) {
+      const size = wrapperEl.getBoundingClientRect();
+
+      ox = `${mouse.x.value - offsetLeft - size.x}px`;
+      oy = `${mouse.y.value - offsetTop - size.y}px`;
+    }
+  }
+  return `${ox} ${oy}`;
+};
+const updateOrigin = (el: HTMLElement | null) => {
+  if (props.transitionOrign === 'mouse') {
+    initWrapperEl();
+    mainStyle.value.transformOrigin = getOriginStyle();
+  }
+};
 watch(
   () => props.visible,
   (v: boolean) => {
@@ -75,7 +113,11 @@ const isMounted = computed(() => {
 const handleTransitionStart = () => {
   toMount.value = true;
 };
-
+const handleTransitionEnter = () => {
+  if (visible.value) {
+    updateOrigin(mainRef.value);
+  }
+};
 const handleTransitionEnd = () => {
   if (!props.unmountOnHide) {
     toMount.value = false;
@@ -97,6 +139,10 @@ onMounted(() => {
   }
 });
 
+onUnmounted(() => {
+  mouse?.destroy();
+});
+
 defineExpose({
   toggle,
 });
@@ -113,11 +159,12 @@ defineExpose({
         :appear="true"
         :name="props.mainTransition"
         @before-enter="handleTransitionStart"
+        @enter="handleTransitionEnter"
         @after-enter="handleTransitionEnd"
         @before-leave="handleTransitionStart"
         @after-leave="handleTransitionEnd"
       >
-        <div v-show="visible" :class="props.mainClass">
+        <div v-show="visible" ref="mainRef" :class="props.mainClass" :style="mainStyle" class="o-layer-main">
           <slot></slot>
         </div>
       </transition>
diff --git a/packages/opendesign/src/components/layer/__demo__/LayerBasic.vue b/packages/opendesign/src/components/layer/__demo__/LayerBasic.vue
index c366adbb..97e42939 100644
--- a/packages/opendesign/src/components/layer/__demo__/LayerBasic.vue
+++ b/packages/opendesign/src/components/layer/__demo__/LayerBasic.vue
@@ -66,7 +66,9 @@ const onChane = (v: boolean) => {
       </div>
     </OLayer>
     <OButton @click="toggle3(true)">Open to Section</OButton>
-    <OLayer v-model:visible="show3" :wrapper="wrapperRef" @change="onChane">
+    <OButton class="center" @click="toggle3(true)">Open to Section</OButton>
+    <OButton class="left" @click="toggle3(true)">Open to Section</OButton>
+    <OLayer v-model:visible="show3" :wrapper="wrapperRef" transition-orign="css" @change="onChane">
       <div class="box">
         <h2>title</h2>
         <p>this is content this is content this is content this is content this is content this is content this is content this is content</p>
@@ -82,6 +84,12 @@ const onChane = (v: boolean) => {
       </div>
     </OLayer>
   </section>
+  <section class="wrap">
+    <OButton @click="toggle1(true)">Open</OButton>
+    <OButton @click="toggle2(true)">Open unmount-on-hide</OButton>
+    <OButton @click="toggle3(true)">Open to Section</OButton>
+    <OButton @click="toggle4(true)">Open to Parent</OButton>
+  </section>
 </template>
 <style lang="scss" scoped>
 .box {
@@ -89,8 +97,18 @@ const onChane = (v: boolean) => {
   background-color: var(--o-color-control-light);
 }
 .wrap {
-  height: 200vh;
+  height: 100vh;
   align-items: flex-start;
   position: relative;
 }
+.center {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+}
+.left {
+  position: absolute;
+  left: 0;
+  top: 50%;
+}
 </style>
diff --git a/packages/opendesign/src/components/layer/style/index.scss b/packages/opendesign/src/components/layer/style/index.scss
index 780624c8..9c6f3332 100644
--- a/packages/opendesign/src/components/layer/style/index.scss
+++ b/packages/opendesign/src/components/layer/style/index.scss
@@ -25,3 +25,7 @@
 .o-layer-open {
   overflow: hidden !important;
 }
+
+.o-layer-main {
+  transform-origin: center;
+}
diff --git a/packages/opendesign/src/components/layer/types.ts b/packages/opendesign/src/components/layer/types.ts
index a3f8ab5c..00af41c5 100644
--- a/packages/opendesign/src/components/layer/types.ts
+++ b/packages/opendesign/src/components/layer/types.ts
@@ -35,7 +35,7 @@ export const layerProps = {
    */
   mainTransition: {
     type: String,
-    default: 'o-zoom-fade',
+    default: 'o-zoom-fade2',
   },
   /**
    * mask过渡名称
@@ -44,6 +44,13 @@ export const layerProps = {
     type: String,
     default: 'o-fade-in',
   },
+  /**
+   * mask过渡名称
+   */
+  transitionOrign: {
+    type: String as PropType<'mouse' | 'css'>,
+    default: 'mouse',
+  },
   /**
    * 是否需要mask
    */
diff --git a/packages/opendesign/src/components/style/animation.scss b/packages/opendesign/src/components/style/animation.scss
index 0553eef0..56dfc60c 100644
--- a/packages/opendesign/src/components/style/animation.scss
+++ b/packages/opendesign/src/components/style/animation.scss
@@ -14,7 +14,7 @@
 
 @keyframes o-zoom-fade-in {
   0% {
-    transform: scale(0.95);
+    transform: scale(var(--init-scale));
     opacity: 0;
   }
   100% {
@@ -24,9 +24,20 @@
 }
 
 .o-zoom-fade-enter-active {
+  --init-scale: 0.95;
   animation: o-zoom-fade-in var(--o-duration-m1) var(--o-easing-standard-in);
 }
 .o-zoom-fade-leave-active {
+  --init-scale: 0.95;
+  animation: o-zoom-fade-in var(--o-duration-s) var(--o-easing-standard-out) reverse;
+}
+
+.o-zoom-fade2-enter-active {
+  --init-scale: 0.8;
+  animation: o-zoom-fade-in var(--o-duration-m1) var(--o-easing-standard-in);
+}
+.o-zoom-fade2-leave-active {
+  --init-scale: 0.8;
   animation: o-zoom-fade-in var(--o-duration-s) var(--o-easing-standard-out) reverse;
 }
 
-- 
Gitee


From 045edf3b5520775c4c18b3e381ce189e525bbe4b Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Thu, 11 May 2023 17:11:16 +0800
Subject: [PATCH 12/20] init upload

---
 .../src/components/upload/OUpload.vue         | 10 +++
 .../components/upload/__demo__/TheIndex.vue   | 11 +++
 .../upload/__demo__/UploadBasic.vue           | 85 +++++++++++++++++++
 .../opendesign/src/components/upload/index.ts | 11 +++
 .../src/components/upload/style/index.scss    |  4 +
 .../src/components/upload/style/index.ts      |  2 +
 .../src/components/upload/style/var.scss      |  2 +
 .../opendesign/src/components/upload/types.ts | 51 +++++++++++
 8 files changed, 176 insertions(+)
 create mode 100644 packages/opendesign/src/components/upload/OUpload.vue
 create mode 100644 packages/opendesign/src/components/upload/__demo__/TheIndex.vue
 create mode 100644 packages/opendesign/src/components/upload/__demo__/UploadBasic.vue
 create mode 100644 packages/opendesign/src/components/upload/index.ts
 create mode 100644 packages/opendesign/src/components/upload/style/index.scss
 create mode 100644 packages/opendesign/src/components/upload/style/index.ts
 create mode 100644 packages/opendesign/src/components/upload/style/var.scss
 create mode 100644 packages/opendesign/src/components/upload/types.ts

diff --git a/packages/opendesign/src/components/upload/OUpload.vue b/packages/opendesign/src/components/upload/OUpload.vue
new file mode 100644
index 00000000..404dcbc6
--- /dev/null
+++ b/packages/opendesign/src/components/upload/OUpload.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { defaultSize } from '../_shared/global';
+import { IconLoading } from '../_shared/icons';
+import { uploadProps } from './types';
+
+const props = defineProps(uploadProps);
+</script>
+<template>
+  <div class="o-upload"></div>
+</template>
diff --git a/packages/opendesign/src/components/upload/__demo__/TheIndex.vue b/packages/opendesign/src/components/upload/__demo__/TheIndex.vue
new file mode 100644
index 00000000..3873d2c5
--- /dev/null
+++ b/packages/opendesign/src/components/upload/__demo__/TheIndex.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import '../style';
+
+import UploadBasic from './UploadBasic.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <UploadBasic />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/upload/__demo__/UploadBasic.vue b/packages/opendesign/src/components/upload/__demo__/UploadBasic.vue
new file mode 100644
index 00000000..32b8a5a6
--- /dev/null
+++ b/packages/opendesign/src/components/upload/__demo__/UploadBasic.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { OButton } from '../index';
+import { IconAdd } from '../../icon';
+</script>
+<template>
+  <h4>Variant & Color</h4>
+  <section style="align-items: flex-start">
+    <div>
+      <p>color: normal</p>
+      <div class="block">
+        <div class="row">
+          <OButton variant="outline">Outline Button</OButton>
+          <OButton variant="solid">Solid Button</OButton>
+          <OButton variant="text">Text Button</OButton>
+        </div>
+        <div class="row">
+          <OButton variant="outline" disabled>Outline Button</OButton>
+          <OButton variant="solid" disabled>Solid Button</OButton>
+          <OButton variant="text" disabled>Text Button</OButton>
+        </div>
+      </div>
+    </div>
+    <div>
+      <p>color: primary</p>
+      <div class="block">
+        <div class="row">
+          <OButton variant="outline" color="primary">Outline Button</OButton>
+          <OButton variant="solid" color="primary">Solid Button</OButton>
+          <OButton variant="text" color="primary">Text Button</OButton>
+        </div>
+        <div class="row">
+          <OButton variant="outline" color="primary" disabled>Outline Button</OButton>
+          <OButton variant="solid" color="primary" disabled>Solid Button</OButton>
+          <OButton variant="text" color="primary" disabled>Text Button</OButton>
+        </div>
+      </div>
+    </div>
+    <div>
+      <p>color: success</p>
+      <div class="block">
+        <div class="row">
+          <OButton variant="outline" color="success">Outline Button</OButton>
+          <OButton variant="solid" color="success">Solid Button</OButton>
+          <OButton variant="text" color="success">Text Button</OButton>
+        </div>
+        <div class="row">
+          <OButton variant="outline" color="success" disabled>Outline Button</OButton>
+          <OButton variant="solid" color="success" disabled>Solid Button</OButton>
+          <OButton variant="text" color="success" disabled>Text Button</OButton>
+        </div>
+      </div>
+    </div>
+    <div>
+      <p>color: warning</p>
+      <div class="block">
+        <div class="row">
+          <OButton variant="outline" color="warning">Outline Button</OButton>
+          <OButton variant="solid" color="warning">Solid Button</OButton>
+          <OButton variant="text" color="warning">Text Button</OButton>
+        </div>
+        <div class="row">
+          <OButton variant="outline" color="warning" disabled>Outline Button</OButton>
+          <OButton variant="solid" color="warning" disabled>Solid Button</OButton>
+          <OButton variant="text" color="warning" disabled>Text Button</OButton>
+        </div>
+      </div>
+    </div>
+    <div>
+      <p>color: danger</p>
+      <div class="block">
+        <div class="row">
+          <OButton variant="outline" color="danger">Outline Button</OButton>
+          <OButton variant="solid" color="danger">Solid Button</OButton>
+          <OButton variant="text" color="danger">Text Button</OButton>
+        </div>
+        <div class="row">
+          <OButton variant="outline" color="danger" disabled>Outline Button</OButton>
+          <OButton variant="solid" color="danger" disabled>Solid Button</OButton>
+          <OButton variant="text" color="danger" disabled>Text Button</OButton>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/upload/index.ts b/packages/opendesign/src/components/upload/index.ts
new file mode 100644
index 00000000..ee85ce68
--- /dev/null
+++ b/packages/opendesign/src/components/upload/index.ts
@@ -0,0 +1,11 @@
+import _OUpload from './OUpload.vue';
+import type { App } from 'vue';
+
+const OUpload = Object.assign(_OUpload, {
+  install(app: App) {
+    app.component(_OUpload.name, _OUpload);
+  },
+});
+
+export { OUpload };
+export * from './types';
diff --git a/packages/opendesign/src/components/upload/style/index.scss b/packages/opendesign/src/components/upload/style/index.scss
new file mode 100644
index 00000000..8f787dfb
--- /dev/null
+++ b/packages/opendesign/src/components/upload/style/index.scss
@@ -0,0 +1,4 @@
+@use './var.scss';
+
+.o-upload {
+}
diff --git a/packages/opendesign/src/components/upload/style/index.ts b/packages/opendesign/src/components/upload/style/index.ts
new file mode 100644
index 00000000..591b2fbd
--- /dev/null
+++ b/packages/opendesign/src/components/upload/style/index.ts
@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';
diff --git a/packages/opendesign/src/components/upload/style/var.scss b/packages/opendesign/src/components/upload/style/var.scss
new file mode 100644
index 00000000..b738e96b
--- /dev/null
+++ b/packages/opendesign/src/components/upload/style/var.scss
@@ -0,0 +1,2 @@
+.o-upload {
+}
diff --git a/packages/opendesign/src/components/upload/types.ts b/packages/opendesign/src/components/upload/types.ts
new file mode 100644
index 00000000..3b56e65d
--- /dev/null
+++ b/packages/opendesign/src/components/upload/types.ts
@@ -0,0 +1,51 @@
+import { ExtractPropTypes, PropType } from 'vue';
+import { SizeT, RoundT, ColorT, VariantT } from '../_shared/types';
+
+export const uploadProps = {
+  /**
+   * 颜色类型 ColorT
+   */
+  color: {
+    type: String as PropType<ColorT>,
+    default: 'normal',
+  },
+  /**
+   * 按钮类型 VariantT
+   */
+  variant: {
+    type: String as PropType<VariantT>,
+    default: 'outline',
+  },
+  /**
+   * 按钮尺寸 SizeT
+   */
+  size: {
+    type: String as PropType<SizeT>,
+  },
+  /**
+   * 圆角值 RoundT
+   */
+  round: {
+    type: String as PropType<RoundT>,
+  },
+  /**
+   * 是否为loading状态
+   */
+  loading: {
+    type: Boolean,
+  },
+  /**
+   * 是否为禁用状态
+   */
+  disabled: {
+    type: Boolean,
+  },
+  /**
+   * 链接跳转
+   */
+  href: {
+    type: String,
+  },
+};
+
+export type UploadPropsT = ExtractPropTypes<typeof uploadProps>;
-- 
Gitee


From 7b11af72dc76614ed681ce414d625299138ed564 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Thu, 11 May 2023 17:11:49 +0800
Subject: [PATCH 13/20] init

---
 .../upload/__demo__/UploadBasic.vue           | 80 +------------------
 1 file changed, 2 insertions(+), 78 deletions(-)

diff --git a/packages/opendesign/src/components/upload/__demo__/UploadBasic.vue b/packages/opendesign/src/components/upload/__demo__/UploadBasic.vue
index 32b8a5a6..bb7d5aec 100644
--- a/packages/opendesign/src/components/upload/__demo__/UploadBasic.vue
+++ b/packages/opendesign/src/components/upload/__demo__/UploadBasic.vue
@@ -1,85 +1,9 @@
 <script setup lang="ts">
-import { OButton } from '../index';
+import { OUpload } from '../index';
 import { IconAdd } from '../../icon';
 </script>
 <template>
   <h4>Variant & Color</h4>
-  <section style="align-items: flex-start">
-    <div>
-      <p>color: normal</p>
-      <div class="block">
-        <div class="row">
-          <OButton variant="outline">Outline Button</OButton>
-          <OButton variant="solid">Solid Button</OButton>
-          <OButton variant="text">Text Button</OButton>
-        </div>
-        <div class="row">
-          <OButton variant="outline" disabled>Outline Button</OButton>
-          <OButton variant="solid" disabled>Solid Button</OButton>
-          <OButton variant="text" disabled>Text Button</OButton>
-        </div>
-      </div>
-    </div>
-    <div>
-      <p>color: primary</p>
-      <div class="block">
-        <div class="row">
-          <OButton variant="outline" color="primary">Outline Button</OButton>
-          <OButton variant="solid" color="primary">Solid Button</OButton>
-          <OButton variant="text" color="primary">Text Button</OButton>
-        </div>
-        <div class="row">
-          <OButton variant="outline" color="primary" disabled>Outline Button</OButton>
-          <OButton variant="solid" color="primary" disabled>Solid Button</OButton>
-          <OButton variant="text" color="primary" disabled>Text Button</OButton>
-        </div>
-      </div>
-    </div>
-    <div>
-      <p>color: success</p>
-      <div class="block">
-        <div class="row">
-          <OButton variant="outline" color="success">Outline Button</OButton>
-          <OButton variant="solid" color="success">Solid Button</OButton>
-          <OButton variant="text" color="success">Text Button</OButton>
-        </div>
-        <div class="row">
-          <OButton variant="outline" color="success" disabled>Outline Button</OButton>
-          <OButton variant="solid" color="success" disabled>Solid Button</OButton>
-          <OButton variant="text" color="success" disabled>Text Button</OButton>
-        </div>
-      </div>
-    </div>
-    <div>
-      <p>color: warning</p>
-      <div class="block">
-        <div class="row">
-          <OButton variant="outline" color="warning">Outline Button</OButton>
-          <OButton variant="solid" color="warning">Solid Button</OButton>
-          <OButton variant="text" color="warning">Text Button</OButton>
-        </div>
-        <div class="row">
-          <OButton variant="outline" color="warning" disabled>Outline Button</OButton>
-          <OButton variant="solid" color="warning" disabled>Solid Button</OButton>
-          <OButton variant="text" color="warning" disabled>Text Button</OButton>
-        </div>
-      </div>
-    </div>
-    <div>
-      <p>color: danger</p>
-      <div class="block">
-        <div class="row">
-          <OButton variant="outline" color="danger">Outline Button</OButton>
-          <OButton variant="solid" color="danger">Solid Button</OButton>
-          <OButton variant="text" color="danger">Text Button</OButton>
-        </div>
-        <div class="row">
-          <OButton variant="outline" color="danger" disabled>Outline Button</OButton>
-          <OButton variant="solid" color="danger" disabled>Solid Button</OButton>
-          <OButton variant="text" color="danger" disabled>Text Button</OButton>
-        </div>
-      </div>
-    </div>
-  </section>
+  <section></section>
 </template>
 <style lang="scss"></style>
-- 
Gitee


From b0c8a3067fb3497dde2dc81c376227677efd4ce5 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 15 May 2023 10:03:42 +0800
Subject: [PATCH 14/20] =?UTF-8?q?figure=E6=94=AF=E6=8C=81preview?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/figure/OFigure.vue         | 23 +++++++++++++++++++
 .../figure/__demo__/FigureBasic.vue           | 22 ++++++++++++++++++
 .../src/components/figure/style/index.scss    | 11 +++++++++
 .../src/components/figure/style/index.ts      |  1 +
 .../opendesign/src/components/figure/types.ts |  6 +++++
 5 files changed, 63 insertions(+)

diff --git a/packages/opendesign/src/components/figure/OFigure.vue b/packages/opendesign/src/components/figure/OFigure.vue
index c90a51e4..16579c50 100644
--- a/packages/opendesign/src/components/figure/OFigure.vue
+++ b/packages/opendesign/src/components/figure/OFigure.vue
@@ -2,6 +2,7 @@
 import { ref, watch, computed, onMounted } from 'vue';
 import { defaultPrestColorPool } from '../_shared/global';
 import HtmlTag from '../_shared/components/html-tag';
+import OLayer from '../layer/OLayer.vue';
 
 import { figureProps } from './types';
 
@@ -56,6 +57,23 @@ onMounted(() => {
     onImgLoaded();
   }
 });
+
+// 全屏预览图片
+const previewVisible = ref(false);
+const preview = () => {
+  previewVisible.value = true;
+};
+const onPreviewChange = () => {};
+
+const onFigureClick = () => {
+  if (props.preview) {
+    preview();
+  }
+};
+
+defineExpose({
+  preview,
+});
 </script>
 <template>
   <HtmlTag
@@ -67,11 +85,13 @@ onMounted(() => {
       'is-error': isError,
       'is-colorful': props.colorful,
       'o-figure-hoverable': props.hoverable || !!props.href,
+      'o-figure-previewable': props.preview,
     }"
     :style="{
       '--figure-prest-color': prestColor,
       '--figure-padding-top': paddingTop,
     }"
+    @click="onFigureClick"
   >
     <template v-if="props.src">
       <div
@@ -97,5 +117,8 @@ onMounted(() => {
       <img v-else-if="!isError" ref="imgRef" :src="props.src" :alt="props.alt" class="o-figure-img" @load="onImgLoaded" @error="onImgError" />
     </template>
     <slot></slot>
+    <OLayer v-model:visible="previewVisible" class="o-figure-preview-layer" @change="onPreviewChange">
+      <div class="o-figure-preview-img"><img :src="props.src" /></div>
+    </OLayer>
   </HtmlTag>
 </template>
diff --git a/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue b/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue
index e2e59854..1198de04 100644
--- a/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue
+++ b/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue
@@ -1,6 +1,15 @@
 <script setup lang="ts">
 import { OFigure } from '../index';
+import { IconSearch } from '../../icon';
+import { ref } from 'vue';
 const img = 'https://www.openeuler.org/img/banners/20230418-odd.png';
+
+const figureRef = ref<typeof OFigure | null>(null);
+const preivewImg = () => {
+  if (figureRef.value) {
+    figureRef.value.preview();
+  }
+};
 </script>
 <template>
   <h4>基本</h4>
@@ -11,6 +20,10 @@ const img = 'https://www.openeuler.org/img/banners/20230418-odd.png';
     <OFigure class="img" :src="img" :ratio="16 / 9" fit="cover" background colorful />
     <OFigure class="img" hoverable :src="img" />
     <OFigure class="img" href="openEuler" target="__blank" :src="img" />
+    <OFigure class="img" :src="img" preview />
+    <OFigure ref="figureRef" class="img" :src="img">
+      <IconSearch class="zoomIn" @click="preivewImg" />
+    </OFigure>
   </section>
 </template>
 <style lang="scss">
@@ -22,5 +35,14 @@ const img = 'https://www.openeuler.org/img/banners/20230418-odd.png';
 .img {
   width: 25%;
   border: 1px solid #ddd;
+  position: relative;
+}
+.zoomIn {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  color: red;
+  font-size: 32px;
+  cursor: pointer;
 }
 </style>
diff --git a/packages/opendesign/src/components/figure/style/index.scss b/packages/opendesign/src/components/figure/style/index.scss
index 8a6c6412..c5e1375d 100644
--- a/packages/opendesign/src/components/figure/style/index.scss
+++ b/packages/opendesign/src/components/figure/style/index.scss
@@ -83,3 +83,14 @@
   height: 100%;
   --figure-fit: contain;
 }
+
+.o-figure-previewable {
+  cursor: pointer;
+}
+.o-figure-preview-img {
+  img {
+    vertical-align: top;
+    max-width: 100vw;
+    max-height: 100vh;
+  }
+}
diff --git a/packages/opendesign/src/components/figure/style/index.ts b/packages/opendesign/src/components/figure/style/index.ts
index 591b2fbd..49acbcec 100644
--- a/packages/opendesign/src/components/figure/style/index.ts
+++ b/packages/opendesign/src/components/figure/style/index.ts
@@ -1,2 +1,3 @@
 import '../../style';
+import '../../layer/style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/figure/types.ts b/packages/opendesign/src/components/figure/types.ts
index b6da1d14..3815ebab 100644
--- a/packages/opendesign/src/components/figure/types.ts
+++ b/packages/opendesign/src/components/figure/types.ts
@@ -43,6 +43,12 @@ export const figureProps = {
   colorful: {
     type: Boolean,
   },
+  /**
+   * 预览
+   */
+  preview: {
+    type: Boolean,
+  },
 };
 
 export type FigurePropsT = ExtractPropTypes<typeof figureProps>;
-- 
Gitee


From f5a6c531b92836e5617521e02d7b983ad2fe5cb0 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 16 May 2023 14:13:53 +0800
Subject: [PATCH 15/20] =?UTF-8?q?=E5=9B=BE=E6=A0=87icon=3D>icon-svgs;=20o-?=
 =?UTF-8?q?icon=20=3D>=20o-svg-icon=20=20;=20=E6=96=B0=E5=A2=9Eo-icon;?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/.gitignore                |   2 +-
 .../src/components/_shared/icons.ts           |  72 +++++----
 .../src/components/carousel/OCarousel.vue     |   6 +-
 .../opendesign/src/components/icon/OIcon.vue  |  11 ++
 .../components/icon/__demo__/IndexInput.vue   |  23 +++
 .../icon/__demo__/InputAutoWidth.vue          |  24 +++
 .../components/icon/__demo__/InputBasic.vue   | 139 ++++++++++++++++++
 .../components/icon/__demo__/InputEvent.vue   |  30 ++++
 .../components/icon/__demo__/InputMethod.vue  |  29 ++++
 .../components/icon/__demo__/InputRound.vue   |  67 +++++++++
 .../components/icon/__demo__/InputSlot.vue    |  39 +++++
 .../opendesign/src/components/icon/index.ts   |  10 ++
 .../icon.scss => icon/style/index.scss}       |  11 +-
 .../src/components/icon/style/index.ts        |   2 +
 .../src/components/icon/style/var.scss        |   4 +
 .../opendesign/src/components/icon/types.ts   |   9 ++
 packages/opendesign/src/components/index.ts   |   1 +
 .../src/components/message/OMessage.vue       |  10 +-
 .../opendesign/src/components/rate/ORate.vue  |  10 +-
 .../src/components/result/OResult.vue         |  14 +-
 .../src/components/style/index.scss           |   1 -
 .../src/components/upload/style/index.scss    | 113 +++++++++++++-
 .../src/components/upload/style/index.ts      |   2 +
 .../src/components/upload/style/var.scss      |  10 ++
 packages/opendesign/src/icons/icon.config.ts  |   2 +-
 packages/portal/src/components/TheHeader.vue  |   4 +-
 packages/portal/src/pages/TheIcons.vue        |  46 +++---
 packages/portal/src/router.ts                 |   6 +
 28 files changed, 622 insertions(+), 75 deletions(-)
 create mode 100644 packages/opendesign/src/components/icon/OIcon.vue
 create mode 100644 packages/opendesign/src/components/icon/__demo__/IndexInput.vue
 create mode 100644 packages/opendesign/src/components/icon/__demo__/InputAutoWidth.vue
 create mode 100644 packages/opendesign/src/components/icon/__demo__/InputBasic.vue
 create mode 100644 packages/opendesign/src/components/icon/__demo__/InputEvent.vue
 create mode 100644 packages/opendesign/src/components/icon/__demo__/InputMethod.vue
 create mode 100644 packages/opendesign/src/components/icon/__demo__/InputRound.vue
 create mode 100644 packages/opendesign/src/components/icon/__demo__/InputSlot.vue
 create mode 100644 packages/opendesign/src/components/icon/index.ts
 rename packages/opendesign/src/components/{style/icon.scss => icon/style/index.scss} (64%)
 create mode 100644 packages/opendesign/src/components/icon/style/index.ts
 create mode 100644 packages/opendesign/src/components/icon/style/var.scss
 create mode 100644 packages/opendesign/src/components/icon/types.ts

diff --git a/packages/opendesign/.gitignore b/packages/opendesign/.gitignore
index 6a2ad8ec..881bb93b 100644
--- a/packages/opendesign/.gitignore
+++ b/packages/opendesign/.gitignore
@@ -23,6 +23,6 @@ dist-ssr
 *.sln
 *.sw?
 
-src/components/icon
+src/components/icon-svgs
 es
 lib
\ No newline at end of file
diff --git a/packages/opendesign/src/components/_shared/icons.ts b/packages/opendesign/src/components/_shared/icons.ts
index 191cf0a0..63360fc5 100644
--- a/packages/opendesign/src/components/_shared/icons.ts
+++ b/packages/opendesign/src/components/_shared/icons.ts
@@ -3,82 +3,100 @@
  */
 import { Component, shallowRef } from 'vue';
 import {
-  IconLoading as _IconLoading,
-  IconLink as IconLink,
-  IconArrowRight,
-  IconX,
-  IconAdd as _IconAdd,
-  IconMinus as _IconMinus,
-  IconDone as _IconDone,
-  IconChevronUp as _IconChevronUp,
-  IconChevronDown as _IconChevronDown,
-  IconChevronLeft as _IconChevronLeft,
-  IconChevronRight as _IconChevronRight,
-  IconEllipsis as _IconEllipsis,
-  IconStar as _IconStar,
-} from '../icon';
+  OIconLoading,
+  OIconLink,
+  OIconArrowRight,
+  OIconX,
+  OIconAdd,
+  OIconMinus,
+  OIconDone,
+  OIconChevronUp,
+  OIconChevronDown,
+  OIconChevronLeft,
+  OIconChevronRight,
+  OIconEllipsis,
+  OIconStar,
+  OIconRefresh,
+  OIconDelete,
+  OIconPoint,
+} from '../icon-svgs';
 
 /**
  * 全局loading图标
  */
-export const IconLoading = shallowRef<Component>(_IconLoading);
+export const IconLoading = shallowRef<Component>(OIconLoading);
 
 /**
  * link前缀图标
  */
-export const IconLinkPrefix = shallowRef<Component>(IconLink);
+export const IconLinkPrefix = shallowRef<Component>(OIconLink);
 
 /**
  * link箭头图标
  */
-export const IconLinkArrow = shallowRef<Component>(IconArrowRight);
+export const IconLinkArrow = shallowRef<Component>(OIconArrowRight);
 
 /**
  * close图标
  */
-export const IconClose = shallowRef<Component>(IconX);
+export const IconClose = shallowRef<Component>(OIconX);
 
 /**
  * add图标
  */
-export const IconAdd = shallowRef<Component>(_IconAdd);
+export const IconAdd = shallowRef<Component>(OIconAdd);
 
 /**
  * minus图标
  */
-export const IconMinus = shallowRef<Component>(_IconMinus);
+export const IconMinus = shallowRef<Component>(OIconMinus);
 
 /**
  * up图标
  */
-export const IconChevronUp = shallowRef<Component>(_IconChevronUp);
+export const IconChevronUp = shallowRef<Component>(OIconChevronUp);
 
 /**
  * down图标
  */
-export const IconChevronDown = shallowRef<Component>(_IconChevronDown);
+export const IconChevronDown = shallowRef<Component>(OIconChevronDown);
 
 /**
  * left图标
  */
-export const IconChevronLeft = shallowRef<Component>(_IconChevronLeft);
+export const IconChevronLeft = shallowRef<Component>(OIconChevronLeft);
 
 /**
  * right图标
  */
-export const IconChevronRight = shallowRef<Component>(_IconChevronRight);
+export const IconChevronRight = shallowRef<Component>(OIconChevronRight);
 
 /**
  * done图标
  */
-export const IconDone = shallowRef<Component>(_IconDone);
+export const IconDone = shallowRef<Component>(OIconDone);
 
 /**
  * 更多...图标
  */
-export const IconEllipsis = shallowRef<Component>(_IconEllipsis);
+export const IconEllipsis = shallowRef<Component>(OIconEllipsis);
 
 /**
  * star图标
  */
-export const IconStar = shallowRef<Component>(_IconStar);
+export const IconStar = shallowRef<Component>(OIconStar);
+
+/**
+ * 刷新图标
+ */
+export const IconRefresh = shallowRef<Component>(OIconRefresh);
+
+/**
+ * 删除图标
+ */
+export const IconDelete = shallowRef<Component>(OIconDelete);
+
+/**
+ * 错误/失败图标
+ */
+export const IconError = shallowRef<Component>(OIconPoint);
diff --git a/packages/opendesign/src/components/carousel/OCarousel.vue b/packages/opendesign/src/components/carousel/OCarousel.vue
index fa4233fa..3aecb1d5 100644
--- a/packages/opendesign/src/components/carousel/OCarousel.vue
+++ b/packages/opendesign/src/components/carousel/OCarousel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watch, computed, onMounted, onUnmounted, provide } from 'vue';
-import { IconChevronLeft, IconChevronRight } from '../icon';
+import { OIconChevronLeft, OIconChevronRight } from '../icon-svgs';
 import Gallery from './gallery';
 import Toggle from './toggle';
 import { carouselInjectKey } from './provide';
@@ -251,7 +251,7 @@ defineExpose({
           <div class="o-carousel-arrow-prev">
             <div class="o-carousel-arrow-icon">
               <slot name="arrow-prev-icon">
-                <IconChevronLeft />
+                <OIconChevronLeft />
               </slot>
             </div>
           </div>
@@ -262,7 +262,7 @@ defineExpose({
           <div class="o-carousel-arrow-next">
             <div class="o-carousel-arrow-icon">
               <slot name="arrow-next-icon">
-                <IconChevronRight />
+                <OIconChevronRight />
               </slot>
             </div>
           </div>
diff --git a/packages/opendesign/src/components/icon/OIcon.vue b/packages/opendesign/src/components/icon/OIcon.vue
new file mode 100644
index 00000000..25f6a486
--- /dev/null
+++ b/packages/opendesign/src/components/icon/OIcon.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { iconProps } from './types';
+const props = defineProps(iconProps);
+</script>
+<template>
+  <div class="o-icon">
+    <slot>
+      <component :is="props.icon" />
+    </slot>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/icon/__demo__/IndexInput.vue b/packages/opendesign/src/components/icon/__demo__/IndexInput.vue
new file mode 100644
index 00000000..550adcad
--- /dev/null
+++ b/packages/opendesign/src/components/icon/__demo__/IndexInput.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import '../style';
+import '../../option/style';
+
+import InputBasic from './InputBasic.vue';
+import InputRound from './InputRound.vue';
+
+import InputEvent from './InputEvent.vue';
+import InputSlot from './InputSlot.vue';
+import InputMethod from './InputMethod.vue';
+import InputAutoWidth from './InputAutoWidth.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <InputBasic />
+    <InputRound />
+    <InputSlot />
+    <InputEvent />
+    <InputMethod />
+    <InputAutoWidth />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/icon/__demo__/InputAutoWidth.vue b/packages/opendesign/src/components/icon/__demo__/InputAutoWidth.vue
new file mode 100644
index 00000000..ebb62b94
--- /dev/null
+++ b/packages/opendesign/src/components/icon/__demo__/InputAutoWidth.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OInput } from '../index';
+
+const val1 = ref('max width: 300px');
+const val2 = ref('min width: 100px');
+setTimeout(() => {
+  val1.value = '123';
+}, 2000);
+</script>
+<template>
+  <h4>Auto Width</h4>
+  <section>
+    <div>
+      max-width: 300px:
+      <OInput v-model="val1" auto-width style="max-width: 300px" />
+    </div>
+    <div>
+      min-width: 200px:
+      <OInput v-model="val2" auto-width style="min-width: 200px" />
+    </div>
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/icon/__demo__/InputBasic.vue b/packages/opendesign/src/components/icon/__demo__/InputBasic.vue
new file mode 100644
index 00000000..78605e22
--- /dev/null
+++ b/packages/opendesign/src/components/icon/__demo__/InputBasic.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OInput } from '../index';
+import { IconDone } from '../../icon';
+
+const val1 = ref('');
+const val2 = ref('this is input value');
+const val3 = ref(`${12345}`);
+setTimeout(() => {
+  val2.value += '---';
+}, 2000);
+</script>
+<template>
+  <div>val1:{{ val1 }}</div>
+  <div>val2:{{ val2 }}</div>
+  <div>val3:{{ val3 }}</div>
+  <h4>type</h4>
+  <section>
+    <div>
+      <div class="row">
+        <p>text:</p>
+        <OInput />
+        <p>password:</p>
+        <OInput v-model="val3" type="password" />
+      </div>
+    </div>
+  </section>
+  <h4>color & variant</h4>
+  <section>
+    <div class="row">
+      <OInput v-model="val1" placeholder="outline + normal" />
+      <OInput v-model="val1" placeholder="outline + success" color="success" />
+      <OInput v-model="val1" placeholder="outline + warning" color="warning" />
+      <OInput v-model="val1" placeholder="outline + danger" color="danger" />
+    </div>
+    <div class="row">
+      <OInput v-model="val1" color="normal" placeholder="outline + normal">
+        <template #prepend>+86</template>
+        <template #append>手机</template>
+      </OInput>
+      <OInput v-model="val1" color="success" placeholder="outline + success">
+        <template #prepend>+86</template>
+        <template #append>手机</template>
+      </OInput>
+      <OInput v-model="val1" color="warning" placeholder="outline + warning">
+        <template #prepend>+86</template>
+        <template #append>手机</template>
+      </OInput>
+      <OInput v-model="val1" color="danger" placeholder="outline + danger">
+        <template #prepend>+86</template>
+        <template #append>手机</template>
+      </OInput>
+    </div>
+    <div class="row">
+      <OInput v-model="val1" variant="solid" placeholder="solid + normal" />
+      <OInput v-model="val1" variant="solid" placeholder="solid + success" color="success" />
+      <OInput v-model="val1" variant="solid" placeholder="solid + warning" color="warning" />
+      <OInput v-model="val1" variant="solid" placeholder="solid + danger" color="danger" />
+    </div>
+
+    <div class="row">
+      <OInput v-model="val1" color="normal" variant="solid" placeholder="solid + normal">
+        <template #prepend>+86</template>
+        <template #append>手机</template>
+      </OInput>
+      <OInput v-model="val1" color="success" variant="solid" placeholder="solid + success">
+        <template #prepend>+86</template>
+        <template #append>手机</template>
+      </OInput>
+      <OInput v-model="val1" color="warning" variant="solid" placeholder="solid + warning">
+        <template #prepend>+86</template>
+        <template #append>手机</template>
+      </OInput>
+      <OInput v-model="val1" color="danger" variant="solid" placeholder="solid + danger">
+        <template #prepend>+86</template>
+        <template #append>手机</template>
+      </OInput>
+    </div>
+  </section>
+  <h4>Size</h4>
+  <section>
+    <OInput v-model="val2" size="small" />
+    <OInput v-model="val2" />
+    <OInput v-model="val3" size="large" />
+  </section>
+  <h4>Readonly</h4>
+  <section>
+    <div>val1:{{ val1 }}</div>
+    <OInput v-model="val2" readonly />
+    <OInput v-model="val2" readonly>
+      <template #prefix>
+        <IconDone />
+      </template>
+    </OInput>
+    <OInput v-model="val2" readonly>
+      <template #suffix>
+        <IconDone />
+      </template>
+    </OInput>
+    <OInput v-model="val2" :clearable="false" readonly>
+      <template #suffix> 元 </template>
+    </OInput>
+  </section>
+  <h4>Disabled</h4>
+  <section>
+    <div class="row">
+      <OInput v-model="val3" placeholder="outline + normal" disabled />
+      <OInput v-model="val3" placeholder="outline + success" color="success" disabled />
+      <OInput v-model="val3" placeholder="outline + warning" color="warning" disabled />
+      <OInput v-model="val3" placeholder="outline + danger" color="danger" disabled />
+    </div>
+    <div class="row">
+      <OInput v-model="val3" variant="solid" placeholder="solid + normal" disabled />
+      <OInput v-model="val3" variant="solid" placeholder="solid + success" color="success" disabled />
+      <OInput v-model="val3" variant="solid" placeholder="solid + warning" color="warning" disabled />
+      <OInput v-model="val3" variant="solid" placeholder="solid + danger" color="danger" disabled />
+    </div>
+
+    <div class="row">
+      <OInput v-model="val1" color="normal" variant="solid" placeholder="solid + normal" disabled>
+        <template #prepend>+86</template>
+        <template #append>手机</template>
+      </OInput>
+      <OInput v-model="val1" color="success" variant="solid" placeholder="solid + success" disabled>
+        <template #prepend>+86</template>
+        <template #append>手机</template>
+      </OInput>
+      <OInput v-model="val1" color="warning" variant="solid" placeholder="solid + warning" disabled>
+        <template #prepend>+86</template>
+        <template #append>手机</template>
+      </OInput>
+      <OInput v-model="val1" color="danger" variant="solid" placeholder="solid + danger" disabled>
+        <template #prepend>+86</template>
+        <template #append>手机</template>
+      </OInput>
+    </div>
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/icon/__demo__/InputEvent.vue b/packages/opendesign/src/components/icon/__demo__/InputEvent.vue
new file mode 100644
index 00000000..88c1ac12
--- /dev/null
+++ b/packages/opendesign/src/components/icon/__demo__/InputEvent.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OInput } from '../index';
+
+const val2 = ref('this is input value');
+const event = ref('--');
+
+const printEvent = (evt: string, val?: string | number) => {
+  console.log(`[${evt}]`, val);
+  event.value = evt;
+};
+</script>
+<template>
+  <h4>Event</h4>
+  <section>
+    <OInput
+      v-model="val2"
+      @blur="(v) => printEvent('blur', v)"
+      @change="(v) => printEvent('change', v)"
+      @input="(v) => printEvent('input', v)"
+      @focus="(v) => printEvent('focus', v)"
+      @press-enter="(v) => printEvent('press-enter', v)"
+    >
+      <template #prepend>+86</template>
+      <template #append>RMB</template>
+    </OInput>
+    value: {{ val2 }}; event:{{ event }};
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/icon/__demo__/InputMethod.vue b/packages/opendesign/src/components/icon/__demo__/InputMethod.vue
new file mode 100644
index 00000000..ad6f74a1
--- /dev/null
+++ b/packages/opendesign/src/components/icon/__demo__/InputMethod.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OInput } from '../index';
+
+const val2 = ref('1234');
+const format = (val: string | number) => (val ? `$${val}` : '');
+const parse = (val: string) => val.replace(/^\$/g, '');
+
+const printEvent = (evt: string, val?: string | number) => {
+  console.log(`[${evt}]`, val);
+};
+</script>
+<template>
+  <h4>Parse & Format</h4>
+  <section>
+    <div>val2:{{ val2 }}</div>
+    <OInput
+      v-model="val2"
+      :format="format"
+      :parse="parse"
+      @blur="(v) => printEvent('blur', v)"
+      @change="(v) => printEvent('change', v)"
+      @input="(v) => printEvent('input', v)"
+      @focus="(v) => printEvent('focus', v)"
+      @press-enter="(v) => printEvent('press-enter', v)"
+    />
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/icon/__demo__/InputRound.vue b/packages/opendesign/src/components/icon/__demo__/InputRound.vue
new file mode 100644
index 00000000..441d6d09
--- /dev/null
+++ b/packages/opendesign/src/components/icon/__demo__/InputRound.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { OInput } from '../index';
+import { ref } from 'vue';
+const val1 = ref('');
+
+const r = ref(12);
+const placeholder = 'please input';
+const onClick = () => {
+  if (r.value <= 0) {
+    r.value += 16;
+  } else {
+    r.value -= 2;
+  }
+};
+</script>
+<template>
+  <h4>Round</h4>
+  <section>
+    <div>
+      <p>round="pill"</p>
+      <section>
+        <OInput v-model="val1" :placeholder="placeholder" round="pill" size="small" />
+        <OInput v-model="val1" :placeholder="placeholder" round="pill" />
+        <OInput v-model="val1" :placeholder="placeholder" round="pill" size="large" />
+        <OInput v-model="val1" round="pill" size="small">
+          <template #prepend>+86</template>
+          <template #append>手机</template>
+        </OInput>
+        <OInput v-model="val1" round="pill" color="danger">
+          <template #prepend>+86</template>
+          <template #append>手机</template>
+        </OInput>
+        <OInput v-model="val1" round="pill" size="large">
+          <template #prepend>+86</template>
+          <template #append>手机</template>
+        </OInput>
+      </section>
+    </div>
+    <div>
+      <p class="btn" @click="onClick">round="{{ r }}"</p>
+      <section>
+        <OInput v-model="val1" :placeholder="placeholder" :round="r + 'px'" size="small" />
+        <OInput v-model="val1" :placeholder="placeholder" :round="r + 'px'" />
+        <OInput v-model="val1" :placeholder="placeholder" :round="r + 'px'" size="large" />
+
+        <OInput v-model="val1" :round="r + 'px'" size="small">
+          <template #prepend>+86</template>
+          <template #append>手机</template>
+        </OInput>
+        <OInput v-model="val1" :round="r + 'px'">
+          <template #prepend>+86</template>
+          <template #append>手机</template>
+        </OInput>
+        <OInput v-model="val1" :round="r + 'px'" size="large">
+          <template #prepend>+86</template>
+          <template #append>手机</template>
+        </OInput>
+      </section>
+    </div>
+  </section>
+</template>
+<style lang="scss">
+.btn {
+  cursor: pointer;
+  user-select: none;
+}
+</style>
diff --git a/packages/opendesign/src/components/icon/__demo__/InputSlot.vue b/packages/opendesign/src/components/icon/__demo__/InputSlot.vue
new file mode 100644
index 00000000..18fea4ab
--- /dev/null
+++ b/packages/opendesign/src/components/icon/__demo__/InputSlot.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OInput } from '../index';
+import { IconDone } from '../../icon';
+
+const val1 = ref('');
+const val2 = ref('this is input value');
+</script>
+<template>
+  <h4>Prefix & Suffix</h4>
+  <section>
+    <div>val1:{{ val1 }}</div>
+    <OInput v-model="val2" />
+    <OInput v-model="val2">
+      <template #prefix>
+        <IconDone />
+      </template>
+    </OInput>
+    <OInput v-model="val2">
+      <template #suffix>
+        <IconDone />
+      </template>
+    </OInput>
+    <OInput v-model="val2">
+      <template #suffix> 元 </template>
+    </OInput>
+  </section>
+
+  <h4>Prepend & Append</h4>
+  <section>
+    <OInput v-model="val2">
+      <template #prepend>+86</template>
+    </OInput>
+    <OInput v-model="val2">
+      <template #append>RMB</template>
+    </OInput>
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/icon/index.ts b/packages/opendesign/src/components/icon/index.ts
new file mode 100644
index 00000000..c43aad7f
--- /dev/null
+++ b/packages/opendesign/src/components/icon/index.ts
@@ -0,0 +1,10 @@
+import _OIcon from './OIcon.vue';
+import type { App } from 'vue';
+
+const OIcon = Object.assign(_OIcon, {
+  install(app: App) {
+    app.component(_OIcon.name, _OIcon);
+  },
+});
+export { OIcon };
+export * from './types';
diff --git a/packages/opendesign/src/components/style/icon.scss b/packages/opendesign/src/components/icon/style/index.scss
similarity index 64%
rename from packages/opendesign/src/components/style/icon.scss
rename to packages/opendesign/src/components/icon/style/index.scss
index 1f8eb899..5998ab1f 100644
--- a/packages/opendesign/src/components/style/icon.scss
+++ b/packages/opendesign/src/components/icon/style/index.scss
@@ -1,10 +1,15 @@
+@use './var.scss';
+
 // icons
 .o-icon {
-  --icon-g1: var(--o-color-text1);
-  --icon-g2: var(--o-color-primary1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  height: 1em;
 }
 
-.o-icon {
+.o-svg-icon {
   display: inline-block;
   width: 1em;
   height: 1em;
diff --git a/packages/opendesign/src/components/icon/style/index.ts b/packages/opendesign/src/components/icon/style/index.ts
new file mode 100644
index 00000000..591b2fbd
--- /dev/null
+++ b/packages/opendesign/src/components/icon/style/index.ts
@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';
diff --git a/packages/opendesign/src/components/icon/style/var.scss b/packages/opendesign/src/components/icon/style/var.scss
new file mode 100644
index 00000000..44da65b8
--- /dev/null
+++ b/packages/opendesign/src/components/icon/style/var.scss
@@ -0,0 +1,4 @@
+.o-icon {
+  --icon-g1: var(--o-color-info1);
+  --icon-g2: var(--o-color-primary1);
+}
diff --git a/packages/opendesign/src/components/icon/types.ts b/packages/opendesign/src/components/icon/types.ts
new file mode 100644
index 00000000..e2ec1f5a
--- /dev/null
+++ b/packages/opendesign/src/components/icon/types.ts
@@ -0,0 +1,9 @@
+import { ExtractPropTypes, PropType } from 'vue';
+
+export const iconProps = {
+  icon: {
+    type: Object as PropType<any>,
+  },
+};
+
+export type IconPropsT = ExtractPropTypes<typeof iconProps>;
diff --git a/packages/opendesign/src/components/index.ts b/packages/opendesign/src/components/index.ts
index fb0bb52b..1c224ac0 100644
--- a/packages/opendesign/src/components/index.ts
+++ b/packages/opendesign/src/components/index.ts
@@ -3,6 +3,7 @@ export * from './hooks';
 export * from './directves';
 
 export * from './icon';
+export * from './icon-svgs';
 export * from './button';
 export * from './switch';
 export * from './link';
diff --git a/packages/opendesign/src/components/message/OMessage.vue b/packages/opendesign/src/components/message/OMessage.vue
index 13e3f545..fe93d8a0 100644
--- a/packages/opendesign/src/components/message/OMessage.vue
+++ b/packages/opendesign/src/components/message/OMessage.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted } from 'vue';
 import { messageProps } from './types';
-import { IconAlert, IconError, IconPoint, IconSuccess } from '../icon';
+import { OIconAlert, OIconError, OIconPoint, OIconSuccess } from '../icon-svgs';
 
 const props = defineProps(messageProps);
 
 const iconMap = {
-  info: IconPoint,
-  success: IconSuccess,
-  warning: IconAlert,
-  danger: IconError,
+  info: OIconPoint,
+  success: OIconSuccess,
+  warning: OIconAlert,
+  danger: OIconError,
 };
 
 const emits = defineEmits<{
diff --git a/packages/opendesign/src/components/rate/ORate.vue b/packages/opendesign/src/components/rate/ORate.vue
index d4618783..21e39e0f 100644
--- a/packages/opendesign/src/components/rate/ORate.vue
+++ b/packages/opendesign/src/components/rate/ORate.vue
@@ -4,7 +4,7 @@ import { computed, ref, watch } from 'vue';
 import { OPopover } from '../popover';
 import { rateProps } from './types';
 import { defaultSize } from '../_shared/global';
-import { IconStar } from '../icon';
+import { OIconStar } from '../icon-svgs';
 import { isArray, isUndefined } from '../_shared/is';
 
 const props = defineProps(rateProps);
@@ -94,12 +94,12 @@ const showLabel = computed(() => {
           <div class="o-rate-item" :class="{ 'is-full': iconStatus[key] === 'full', 'is-half': iconStatus[key] === 'half' }">
             <span class="o-rate-icon o-rate-icon-top" @mouseenter="setHoverIndex(key, true)" @click="setValue(key, true)">
               <slot name="icon" :index="item" :status="iconStatus[key]">
-                <IconStar />
+                <OIconStar />
               </slot>
             </span>
             <span class="o-rate-icon o-rate-icon-bottom" @mouseenter="setHoverIndex(key, false)" @click="setValue(key, false)">
               <slot name="icon" :index="item" :status="iconStatus[key]">
-                <IconStar />
+                <OIconStar />
               </slot>
             </span>
           </div>
@@ -117,12 +117,12 @@ const showLabel = computed(() => {
       >
         <span class="o-rate-icon o-rate-icon-top" @mouseenter="setHoverIndex(key, true)" @click="setValue(key, true)">
           <slot name="icon" :index="item" :status="iconStatus[key]">
-            <IconStar />
+            <OIconStar />
           </slot>
         </span>
         <span class="o-rate-icon o-rate-icon-bottom" @mouseenter="setHoverIndex(key, false)" @click="setValue(key, false)">
           <slot name="icon" :index="item" :status="iconStatus[key]">
-            <IconStar />
+            <OIconStar />
           </slot>
         </span>
       </div>
diff --git a/packages/opendesign/src/components/result/OResult.vue b/packages/opendesign/src/components/result/OResult.vue
index 205c60b6..b46da99a 100644
--- a/packages/opendesign/src/components/result/OResult.vue
+++ b/packages/opendesign/src/components/result/OResult.vue
@@ -1,19 +1,19 @@
 <script lang="ts" setup>
 import { resultProps } from './types';
-import { IconAlert, IconError, IconPoint, IconSuccess } from '../icon';
+import { OIconAlert, OIconError, OIconPoint, OIconSuccess } from '../icon-svgs';
 import { computed } from 'vue';
 
 const props = defineProps(resultProps);
 
-// TODO:修改图标命名-->IconInfo、IconSuccess、IconWarning、IconDanger、Icon500...支持全局配置图标
+// TODO:修改图标命名-->IconInfo、OIconSuccess、IconWarning、IconDanger、Icon500...支持全局配置图标
 const iconMap = {
-  info: IconPoint,
-  success: IconSuccess,
-  warning: IconAlert,
-  danger: IconError,
+  info: OIconPoint,
+  success: OIconSuccess,
+  warning: OIconAlert,
+  danger: OIconError,
 };
 
-const icon = computed(() => (props.status ? iconMap[props.status] : undefined));
+const icon: any = computed(() => (props.status ? iconMap[props.status] : undefined));
 </script>
 
 <template>
diff --git a/packages/opendesign/src/components/style/index.scss b/packages/opendesign/src/components/style/index.scss
index 72446433..6a26f4d3 100644
--- a/packages/opendesign/src/components/style/index.scss
+++ b/packages/opendesign/src/components/style/index.scss
@@ -1,6 +1,5 @@
 @use './animation.scss';
 @use './common.scss';
-@use './icon.scss';
 
 [class^='o-'] {
   box-sizing: border-box;
diff --git a/packages/opendesign/src/components/upload/style/index.scss b/packages/opendesign/src/components/upload/style/index.scss
index 8f787dfb..e8406a4d 100644
--- a/packages/opendesign/src/components/upload/style/index.scss
+++ b/packages/opendesign/src/components/upload/style/index.scss
@@ -1,4 +1,115 @@
 @use './var.scss';
 
-.o-upload {
+.o-upload-select {
+  position: relative;
+}
+.o-upload-select-input {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  opacity: 0;
+}
+.o-upload-file-item {
+  position: relative;
+}
+.o-upload-file-item-wrap {
+  display: flex;
+  // align-items: center;
+  margin-top: 8px;
+  padding: 0 4px;
+  color: var(--upload-file-item-color);
+  transition: background-color var(--o-easing-standard-in) var(--o-duration-m1);
+
+  > * {
+    margin-right: 8px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  &:hover {
+    background-color: var(--upload-file-item-bg-hover);
+  }
+  &.is-error {
+    color: var(--upload-file-item-color-error);
+  }
+
+  &:hover,
+  &.is-error {
+    .o-upload-icons {
+      opacity: 1;
+    }
+  }
+}
+
+.o-upload-file-label {
+  font-size: var(--o-font_size-text1);
+  line-height: var(--o-line_height-text1);
+  margin-right: auto;
+  padding: 5px 0;
+}
+.o-upload-icon-link {
+  font-size: var(--upload-icon-size);
+  display: flex;
+  align-items: center;
+}
+
+.o-upload-icons {
+  display: flex;
+  margin-left: 16px;
+}
+.o-upload-icon-retry,
+.o-upload-icon-delete {
+  font-size: var(--upload-icon-size);
+  color: var(--o-color-info2);
+  display: flex;
+  align-items: center;
+}
+.o-upload-icons {
+  opacity: 0;
+  transition: opacity var(--o-easing-standard-in) var(--o-duration-m1);
+}
+.o-upload-icon-retry,
+.o-upload-icon-delete {
+  cursor: pointer;
+  &:hover {
+    color: var(--o-color-primary1);
+  }
+}
+
+.o-upload-tip {
+  font-size: var(--o-font_size-tip1);
+  line-height: var(--o-line_height-tip1);
+  color: var(--o-color-info3);
+  margin-top: 8px;
+}
+.o-upload-file-item-tip {
+  font-size: var(--o-font_size-tip1);
+  line-height: var(--o-line_height-tip1);
+  color: var(--o-color-info1);
+  display: flex;
+  &.is-error {
+    color: var(--o-color-danger1);
+  }
+}
+.o-upload-icon-error {
+  color: var(--o-color-danger1);
+  margin-right: 8px;
+}
+
+.o-upload-file-progress {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: var(--upload-progress-height);
+  background-color: var(--upload-progress-bg-color);
+  border-radius: var(--upload-progress-radius);
+  overflow: hidden;
+}
+.o-upload-file-progress-bar {
+  height: 100%;
+  background-color: var(--upload-progress-value-bg-color);
+  border-radius: var(--upload-progress-radius);
+  transition: width var(--o-easing-linear) var(--o-duration-s);
 }
diff --git a/packages/opendesign/src/components/upload/style/index.ts b/packages/opendesign/src/components/upload/style/index.ts
index 591b2fbd..11305877 100644
--- a/packages/opendesign/src/components/upload/style/index.ts
+++ b/packages/opendesign/src/components/upload/style/index.ts
@@ -1,2 +1,4 @@
 import '../../style';
+import '../../button/style';
+import '../../popover/style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/upload/style/var.scss b/packages/opendesign/src/components/upload/style/var.scss
index b738e96b..54cfe851 100644
--- a/packages/opendesign/src/components/upload/style/var.scss
+++ b/packages/opendesign/src/components/upload/style/var.scss
@@ -1,2 +1,12 @@
 .o-upload {
+  --upload-icon-size: var(--o-icon_size-xs);
+
+  --upload-file-item-color: var(--o-color-info1);
+  --upload-file-item-color-error: var(--o-color-danger1);
+  --upload-file-item-bg-hover: var(--o-color-control2-light);
+
+  --upload-progress-height: 2px;
+  --upload-progress-radius: var(--upload-progress-height);
+  --upload-progress-bg-color: var(--o-color-control3-light);
+  --upload-progress-value-bg-color: var(--o-color-primary1);
 }
diff --git a/packages/opendesign/src/icons/icon.config.ts b/packages/opendesign/src/icons/icon.config.ts
index 5fdb8697..de587c37 100644
--- a/packages/opendesign/src/icons/icon.config.ts
+++ b/packages/opendesign/src/icons/icon.config.ts
@@ -1,4 +1,4 @@
 module.exports = {
   input: './svgs',
-  output: '../components/icon/',
+  output: '../components/icon-svgs/',
 };
diff --git a/packages/portal/src/components/TheHeader.vue b/packages/portal/src/components/TheHeader.vue
index 55efc543..4c8dcf04 100644
--- a/packages/portal/src/components/TheHeader.vue
+++ b/packages/portal/src/components/TheHeader.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { initIconLoading, initSize } from '@opensig/opendesign/src/components';
-import { IconAdd } from '@opensig/opendesign/src/components/icon';
+import { OIconAdd } from '@opensig/opendesign/src/components/icon-svgs';
 
 const title = 'opendesign';
 
 const globalSetting = () => {
-  initIconLoading(IconAdd);
+  initIconLoading(OIconAdd);
   initSize('large');
 };
 </script>
diff --git a/packages/portal/src/pages/TheIcons.vue b/packages/portal/src/pages/TheIcons.vue
index ebb01e6e..6f691107 100644
--- a/packages/portal/src/pages/TheIcons.vue
+++ b/packages/portal/src/pages/TheIcons.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import * as OIcons from '@components/icon';
+import { OIcon } from '@components/icon';
+import * as OIcons from '@components/icon-svgs';
 import '@components/style';
+import '@components/icon/style';
 import { shallowRef } from 'vue';
 console.log(OIcons);
 
@@ -23,12 +25,14 @@ Object.keys(OIcons).forEach((k) => {
     <h4>Stoke</h4>
     <div class="icon-list">
       <div v-for="icon in stokes" :key="icon" class="icon-item">
-        <component
-          :is="icon"
-          :class="{
-            'o-rotating': icon.name === 'IconLoading',
-          }"
-        />
+        <OIcon>
+          <component
+            :is="icon"
+            :class="{
+              'o-rotating': icon.name === 'IconLoading',
+            }"
+          />
+        </OIcon>
         <div class="icon-name">{{ icon.name }}</div>
       </div>
     </div>
@@ -36,12 +40,14 @@ Object.keys(OIcons).forEach((k) => {
     <h4>Fill</h4>
     <div class="icon-list">
       <div v-for="icon in fills" :key="icon" class="icon-item">
-        <component
-          :is="icon"
-          :class="{
-            'o-rotating': icon.name === 'IconLoading',
-          }"
-        />
+        <OIcon>
+          <component
+            :is="icon"
+            :class="{
+              'o-rotating': icon.name === 'IconLoading',
+            }"
+          />
+        </OIcon>
         <div class="icon-name">{{ icon.name }}</div>
       </div>
     </div>
@@ -49,12 +55,14 @@ Object.keys(OIcons).forEach((k) => {
     <h4>Color</h4>
     <div class="icon-list">
       <div v-for="icon in colors" :key="icon" class="icon-item">
-        <component
-          :is="icon"
-          :class="{
-            'o-rotating': icon.name === 'IconLoading',
-          }"
-        />
+        <OIcon>
+          <component
+            :is="icon"
+            :class="{
+              'o-rotating': icon.name === 'IconLoading',
+            }"
+          />
+        </OIcon>
         <div class="icon-name">{{ icon.name }}</div>
       </div>
     </div>
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 168c2647..533030a3 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -231,6 +231,12 @@ export const routes = [
     label: '全局滚动条 Scroller-body',
     component: () => import('@components/scroller/__demo__/ScrollbarBody.vue'),
   },
+  {
+    path: '/upload',
+    name: 'Upload',
+    label: '上传 Upload',
+    component: () => import('@components/upload/__demo__/TheIndex.vue'),
+  },
   {
     path: '/resize-observer',
     name: 'ResizeObserver',
-- 
Gitee


From b4ca9ff2e0e10331a26a87b8d0c8f4ba9603a569 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 16 May 2023 14:23:48 +0800
Subject: [PATCH 16/20] =?UTF-8?q?=E5=9B=BE=E6=A0=87=E6=9E=84=E5=BB=BA?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=BB=84=E4=BB=B6=E7=B1=BB=E5=90=8D=E5=8F=8A?=
 =?UTF-8?q?=E5=89=8D=E7=BC=80=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/scripts/src/gen-icon/config.ts | 24 ++++++++++++++++++++----
 packages/scripts/src/gen-icon/index.ts  |  6 +++++-
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/packages/scripts/src/gen-icon/config.ts b/packages/scripts/src/gen-icon/config.ts
index da72fe1c..a2ae5510 100644
--- a/packages/scripts/src/gen-icon/config.ts
+++ b/packages/scripts/src/gen-icon/config.ts
@@ -8,6 +8,8 @@ export interface IconsConfig {
   };
   input: string;
   output: string;
+  prefix: string; // 'o-'
+  componentClass: string;
   template: typeof template;
 }
 export const basePlugins: PluginConfig[] = [
@@ -91,14 +93,26 @@ const colorSvgoConfig: Config = {
   ],
 };
 
-const template = ({ name, componentName, svg, type }: { name: string; componentName: string; svg: string; type: 'fill' | 'stroke' | 'color' }) => {
+const template = ({
+  name,
+  componentName,
+  svg,
+  type,
+  componentClass,
+}: {
+  name: string;
+  componentName: string;
+  svg: string;
+  type: 'fill' | 'stroke' | 'color';
+  componentClass: string;
+}) => {
   return `<script lang="ts">
 import { defineComponent } from 'vue';
 export default defineComponent({
   name: '${componentName}',
   svgType: '${type}',
   setup() {
-    const classnames = ['o-icon', 'o-${name}', 'type-${type}'];
+    const classnames = ['${componentClass}', '${name}', 'type-${type}'];
     return {
       classnames,
     };
@@ -116,7 +130,9 @@ export const defaultConfig: IconsConfig = {
     stroke: strokeSvgoConfig,
     fill: fillSvgoConfig,
   },
-  input: './src/icons/svgs',
-  output: './src/components/icons/',
+  input: './svgs',
+  output: './components/',
+  componentClass: 'svg-icon',
+  prefix: '',
   template,
 };
diff --git a/packages/scripts/src/gen-icon/index.ts b/packages/scripts/src/gen-icon/index.ts
index 76f44a02..449270cb 100644
--- a/packages/scripts/src/gen-icon/index.ts
+++ b/packages/scripts/src/gen-icon/index.ts
@@ -17,6 +17,9 @@ async function readConfig(cfg: string) {
 
   const config = Object.assign(defaultConfig, configData);
 
+  console.log('[input]', config.input);
+  console.log('[output]', config.output);
+
   config.input = path.resolve(cfgDir, config.input);
   config.output = path.resolve(cfgDir, config.output);
 
@@ -52,7 +55,7 @@ function readSvgData(cfg: IconsConfig) {
     });
 
     files.forEach((file) => {
-      const name = `icon-${path.basename(file.replace(/\s/g, ''), '.svg')}`;
+      const name = `${cfg.prefix}icon-${path.basename(file.replace(/\s/g, ''), '.svg')}`;
       svgs.push({
         type: key,
         name: name,
@@ -89,6 +92,7 @@ function generateIconComponents(icons: Array<IconItem>, cfg: IconsConfig) {
       componentName: item.componentName,
       svg: rlt.data,
       type: item.type,
+      componentClass: cfg.componentClass,
     });
 
     fs.outputFile(path.resolve(cfg.output, `${item.componentName}/${item.componentName}.vue`), content, (err) => {
-- 
Gitee


From 59d02c8a83597e333107725dee8837d5fc5a6b14 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 16 May 2023 14:33:39 +0800
Subject: [PATCH 17/20] v10 -script

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

diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index 81fe1890..36958182 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opensig/opensig-scripts",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "opendesign component Scripts",
   "main": "dist/index.js",
   "bin": "dist/index.js",
-- 
Gitee


From 93be9b56f80aae61a8533a15a1f3646e05b64be0 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 16 May 2023 14:39:20 +0800
Subject: [PATCH 18/20] =?UTF-8?q?=E5=9B=BE=E6=A0=87=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/icon/__demo__/IndexInput.vue   |  23 ---
 .../icon/__demo__/InputAutoWidth.vue          |  24 ---
 .../components/icon/__demo__/InputBasic.vue   | 139 ------------------
 .../components/icon/__demo__/InputEvent.vue   |  30 ----
 .../components/icon/__demo__/InputMethod.vue  |  29 ----
 .../components/icon/__demo__/InputRound.vue   |  67 ---------
 .../components/icon/__demo__/InputSlot.vue    |  39 -----
 .../src/components/icon/__demo__/TheIndex.vue |  92 ++++++++++++
 .../src/components/icon/style/var.scss        |   2 +-
 packages/opendesign/src/icons/icon.config.ts  |   2 +
 packages/portal/src/router.ts                 |   2 +-
 11 files changed, 96 insertions(+), 353 deletions(-)
 delete mode 100644 packages/opendesign/src/components/icon/__demo__/IndexInput.vue
 delete mode 100644 packages/opendesign/src/components/icon/__demo__/InputAutoWidth.vue
 delete mode 100644 packages/opendesign/src/components/icon/__demo__/InputBasic.vue
 delete mode 100644 packages/opendesign/src/components/icon/__demo__/InputEvent.vue
 delete mode 100644 packages/opendesign/src/components/icon/__demo__/InputMethod.vue
 delete mode 100644 packages/opendesign/src/components/icon/__demo__/InputRound.vue
 delete mode 100644 packages/opendesign/src/components/icon/__demo__/InputSlot.vue
 create mode 100644 packages/opendesign/src/components/icon/__demo__/TheIndex.vue

diff --git a/packages/opendesign/src/components/icon/__demo__/IndexInput.vue b/packages/opendesign/src/components/icon/__demo__/IndexInput.vue
deleted file mode 100644
index 550adcad..00000000
--- a/packages/opendesign/src/components/icon/__demo__/IndexInput.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import '../style';
-import '../../option/style';
-
-import InputBasic from './InputBasic.vue';
-import InputRound from './InputRound.vue';
-
-import InputEvent from './InputEvent.vue';
-import InputSlot from './InputSlot.vue';
-import InputMethod from './InputMethod.vue';
-import InputAutoWidth from './InputAutoWidth.vue';
-</script>
-<template>
-  <div class="page-demo">
-    <InputBasic />
-    <InputRound />
-    <InputSlot />
-    <InputEvent />
-    <InputMethod />
-    <InputAutoWidth />
-  </div>
-</template>
-<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/icon/__demo__/InputAutoWidth.vue b/packages/opendesign/src/components/icon/__demo__/InputAutoWidth.vue
deleted file mode 100644
index ebb62b94..00000000
--- a/packages/opendesign/src/components/icon/__demo__/InputAutoWidth.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { OInput } from '../index';
-
-const val1 = ref('max width: 300px');
-const val2 = ref('min width: 100px');
-setTimeout(() => {
-  val1.value = '123';
-}, 2000);
-</script>
-<template>
-  <h4>Auto Width</h4>
-  <section>
-    <div>
-      max-width: 300px:
-      <OInput v-model="val1" auto-width style="max-width: 300px" />
-    </div>
-    <div>
-      min-width: 200px:
-      <OInput v-model="val2" auto-width style="min-width: 200px" />
-    </div>
-  </section>
-</template>
-<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/icon/__demo__/InputBasic.vue b/packages/opendesign/src/components/icon/__demo__/InputBasic.vue
deleted file mode 100644
index 78605e22..00000000
--- a/packages/opendesign/src/components/icon/__demo__/InputBasic.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { OInput } from '../index';
-import { IconDone } from '../../icon';
-
-const val1 = ref('');
-const val2 = ref('this is input value');
-const val3 = ref(`${12345}`);
-setTimeout(() => {
-  val2.value += '---';
-}, 2000);
-</script>
-<template>
-  <div>val1:{{ val1 }}</div>
-  <div>val2:{{ val2 }}</div>
-  <div>val3:{{ val3 }}</div>
-  <h4>type</h4>
-  <section>
-    <div>
-      <div class="row">
-        <p>text:</p>
-        <OInput />
-        <p>password:</p>
-        <OInput v-model="val3" type="password" />
-      </div>
-    </div>
-  </section>
-  <h4>color & variant</h4>
-  <section>
-    <div class="row">
-      <OInput v-model="val1" placeholder="outline + normal" />
-      <OInput v-model="val1" placeholder="outline + success" color="success" />
-      <OInput v-model="val1" placeholder="outline + warning" color="warning" />
-      <OInput v-model="val1" placeholder="outline + danger" color="danger" />
-    </div>
-    <div class="row">
-      <OInput v-model="val1" color="normal" placeholder="outline + normal">
-        <template #prepend>+86</template>
-        <template #append>手机</template>
-      </OInput>
-      <OInput v-model="val1" color="success" placeholder="outline + success">
-        <template #prepend>+86</template>
-        <template #append>手机</template>
-      </OInput>
-      <OInput v-model="val1" color="warning" placeholder="outline + warning">
-        <template #prepend>+86</template>
-        <template #append>手机</template>
-      </OInput>
-      <OInput v-model="val1" color="danger" placeholder="outline + danger">
-        <template #prepend>+86</template>
-        <template #append>手机</template>
-      </OInput>
-    </div>
-    <div class="row">
-      <OInput v-model="val1" variant="solid" placeholder="solid + normal" />
-      <OInput v-model="val1" variant="solid" placeholder="solid + success" color="success" />
-      <OInput v-model="val1" variant="solid" placeholder="solid + warning" color="warning" />
-      <OInput v-model="val1" variant="solid" placeholder="solid + danger" color="danger" />
-    </div>
-
-    <div class="row">
-      <OInput v-model="val1" color="normal" variant="solid" placeholder="solid + normal">
-        <template #prepend>+86</template>
-        <template #append>手机</template>
-      </OInput>
-      <OInput v-model="val1" color="success" variant="solid" placeholder="solid + success">
-        <template #prepend>+86</template>
-        <template #append>手机</template>
-      </OInput>
-      <OInput v-model="val1" color="warning" variant="solid" placeholder="solid + warning">
-        <template #prepend>+86</template>
-        <template #append>手机</template>
-      </OInput>
-      <OInput v-model="val1" color="danger" variant="solid" placeholder="solid + danger">
-        <template #prepend>+86</template>
-        <template #append>手机</template>
-      </OInput>
-    </div>
-  </section>
-  <h4>Size</h4>
-  <section>
-    <OInput v-model="val2" size="small" />
-    <OInput v-model="val2" />
-    <OInput v-model="val3" size="large" />
-  </section>
-  <h4>Readonly</h4>
-  <section>
-    <div>val1:{{ val1 }}</div>
-    <OInput v-model="val2" readonly />
-    <OInput v-model="val2" readonly>
-      <template #prefix>
-        <IconDone />
-      </template>
-    </OInput>
-    <OInput v-model="val2" readonly>
-      <template #suffix>
-        <IconDone />
-      </template>
-    </OInput>
-    <OInput v-model="val2" :clearable="false" readonly>
-      <template #suffix> 元 </template>
-    </OInput>
-  </section>
-  <h4>Disabled</h4>
-  <section>
-    <div class="row">
-      <OInput v-model="val3" placeholder="outline + normal" disabled />
-      <OInput v-model="val3" placeholder="outline + success" color="success" disabled />
-      <OInput v-model="val3" placeholder="outline + warning" color="warning" disabled />
-      <OInput v-model="val3" placeholder="outline + danger" color="danger" disabled />
-    </div>
-    <div class="row">
-      <OInput v-model="val3" variant="solid" placeholder="solid + normal" disabled />
-      <OInput v-model="val3" variant="solid" placeholder="solid + success" color="success" disabled />
-      <OInput v-model="val3" variant="solid" placeholder="solid + warning" color="warning" disabled />
-      <OInput v-model="val3" variant="solid" placeholder="solid + danger" color="danger" disabled />
-    </div>
-
-    <div class="row">
-      <OInput v-model="val1" color="normal" variant="solid" placeholder="solid + normal" disabled>
-        <template #prepend>+86</template>
-        <template #append>手机</template>
-      </OInput>
-      <OInput v-model="val1" color="success" variant="solid" placeholder="solid + success" disabled>
-        <template #prepend>+86</template>
-        <template #append>手机</template>
-      </OInput>
-      <OInput v-model="val1" color="warning" variant="solid" placeholder="solid + warning" disabled>
-        <template #prepend>+86</template>
-        <template #append>手机</template>
-      </OInput>
-      <OInput v-model="val1" color="danger" variant="solid" placeholder="solid + danger" disabled>
-        <template #prepend>+86</template>
-        <template #append>手机</template>
-      </OInput>
-    </div>
-  </section>
-</template>
-<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/icon/__demo__/InputEvent.vue b/packages/opendesign/src/components/icon/__demo__/InputEvent.vue
deleted file mode 100644
index 88c1ac12..00000000
--- a/packages/opendesign/src/components/icon/__demo__/InputEvent.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { OInput } from '../index';
-
-const val2 = ref('this is input value');
-const event = ref('--');
-
-const printEvent = (evt: string, val?: string | number) => {
-  console.log(`[${evt}]`, val);
-  event.value = evt;
-};
-</script>
-<template>
-  <h4>Event</h4>
-  <section>
-    <OInput
-      v-model="val2"
-      @blur="(v) => printEvent('blur', v)"
-      @change="(v) => printEvent('change', v)"
-      @input="(v) => printEvent('input', v)"
-      @focus="(v) => printEvent('focus', v)"
-      @press-enter="(v) => printEvent('press-enter', v)"
-    >
-      <template #prepend>+86</template>
-      <template #append>RMB</template>
-    </OInput>
-    value: {{ val2 }}; event:{{ event }};
-  </section>
-</template>
-<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/icon/__demo__/InputMethod.vue b/packages/opendesign/src/components/icon/__demo__/InputMethod.vue
deleted file mode 100644
index ad6f74a1..00000000
--- a/packages/opendesign/src/components/icon/__demo__/InputMethod.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { OInput } from '../index';
-
-const val2 = ref('1234');
-const format = (val: string | number) => (val ? `$${val}` : '');
-const parse = (val: string) => val.replace(/^\$/g, '');
-
-const printEvent = (evt: string, val?: string | number) => {
-  console.log(`[${evt}]`, val);
-};
-</script>
-<template>
-  <h4>Parse & Format</h4>
-  <section>
-    <div>val2:{{ val2 }}</div>
-    <OInput
-      v-model="val2"
-      :format="format"
-      :parse="parse"
-      @blur="(v) => printEvent('blur', v)"
-      @change="(v) => printEvent('change', v)"
-      @input="(v) => printEvent('input', v)"
-      @focus="(v) => printEvent('focus', v)"
-      @press-enter="(v) => printEvent('press-enter', v)"
-    />
-  </section>
-</template>
-<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/icon/__demo__/InputRound.vue b/packages/opendesign/src/components/icon/__demo__/InputRound.vue
deleted file mode 100644
index 441d6d09..00000000
--- a/packages/opendesign/src/components/icon/__demo__/InputRound.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<script setup lang="ts">
-import { OInput } from '../index';
-import { ref } from 'vue';
-const val1 = ref('');
-
-const r = ref(12);
-const placeholder = 'please input';
-const onClick = () => {
-  if (r.value <= 0) {
-    r.value += 16;
-  } else {
-    r.value -= 2;
-  }
-};
-</script>
-<template>
-  <h4>Round</h4>
-  <section>
-    <div>
-      <p>round="pill"</p>
-      <section>
-        <OInput v-model="val1" :placeholder="placeholder" round="pill" size="small" />
-        <OInput v-model="val1" :placeholder="placeholder" round="pill" />
-        <OInput v-model="val1" :placeholder="placeholder" round="pill" size="large" />
-        <OInput v-model="val1" round="pill" size="small">
-          <template #prepend>+86</template>
-          <template #append>手机</template>
-        </OInput>
-        <OInput v-model="val1" round="pill" color="danger">
-          <template #prepend>+86</template>
-          <template #append>手机</template>
-        </OInput>
-        <OInput v-model="val1" round="pill" size="large">
-          <template #prepend>+86</template>
-          <template #append>手机</template>
-        </OInput>
-      </section>
-    </div>
-    <div>
-      <p class="btn" @click="onClick">round="{{ r }}"</p>
-      <section>
-        <OInput v-model="val1" :placeholder="placeholder" :round="r + 'px'" size="small" />
-        <OInput v-model="val1" :placeholder="placeholder" :round="r + 'px'" />
-        <OInput v-model="val1" :placeholder="placeholder" :round="r + 'px'" size="large" />
-
-        <OInput v-model="val1" :round="r + 'px'" size="small">
-          <template #prepend>+86</template>
-          <template #append>手机</template>
-        </OInput>
-        <OInput v-model="val1" :round="r + 'px'">
-          <template #prepend>+86</template>
-          <template #append>手机</template>
-        </OInput>
-        <OInput v-model="val1" :round="r + 'px'" size="large">
-          <template #prepend>+86</template>
-          <template #append>手机</template>
-        </OInput>
-      </section>
-    </div>
-  </section>
-</template>
-<style lang="scss">
-.btn {
-  cursor: pointer;
-  user-select: none;
-}
-</style>
diff --git a/packages/opendesign/src/components/icon/__demo__/InputSlot.vue b/packages/opendesign/src/components/icon/__demo__/InputSlot.vue
deleted file mode 100644
index 18fea4ab..00000000
--- a/packages/opendesign/src/components/icon/__demo__/InputSlot.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { OInput } from '../index';
-import { IconDone } from '../../icon';
-
-const val1 = ref('');
-const val2 = ref('this is input value');
-</script>
-<template>
-  <h4>Prefix & Suffix</h4>
-  <section>
-    <div>val1:{{ val1 }}</div>
-    <OInput v-model="val2" />
-    <OInput v-model="val2">
-      <template #prefix>
-        <IconDone />
-      </template>
-    </OInput>
-    <OInput v-model="val2">
-      <template #suffix>
-        <IconDone />
-      </template>
-    </OInput>
-    <OInput v-model="val2">
-      <template #suffix> 元 </template>
-    </OInput>
-  </section>
-
-  <h4>Prepend & Append</h4>
-  <section>
-    <OInput v-model="val2">
-      <template #prepend>+86</template>
-    </OInput>
-    <OInput v-model="val2">
-      <template #append>RMB</template>
-    </OInput>
-  </section>
-</template>
-<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/icon/__demo__/TheIndex.vue b/packages/opendesign/src/components/icon/__demo__/TheIndex.vue
new file mode 100644
index 00000000..30e14da2
--- /dev/null
+++ b/packages/opendesign/src/components/icon/__demo__/TheIndex.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { OIcon } from '../index';
+import * as OIcons from '../../icon-svgs';
+import '../style';
+import { shallowRef } from 'vue';
+console.log(OIcons);
+
+const stokes = shallowRef<any[]>([]);
+const fills = shallowRef<any[]>([]);
+const colors = shallowRef<any[]>([]);
+Object.keys(OIcons).forEach((k) => {
+  const c = OIcons[k as keyof typeof OIcons];
+  if (c.svgType === 'stroke') {
+    stokes.value.push(c);
+  } else if (c.svgType === 'fill') {
+    fills.value.push(c);
+  } else {
+    colors.value.push(c);
+  }
+});
+</script>
+<template>
+  <div class="page-demo">
+    <h4>Stoke</h4>
+    <div class="icon-list">
+      <div v-for="icon in stokes" :key="icon" class="icon-item">
+        <OIcon>
+          <component
+            :is="icon"
+            :class="{
+              'o-rotating': icon.name === 'IconLoading',
+            }"
+          />
+        </OIcon>
+        <div class="icon-name">{{ icon.name }}</div>
+      </div>
+    </div>
+
+    <h4>Fill</h4>
+    <div class="icon-list">
+      <div v-for="icon in fills" :key="icon" class="icon-item">
+        <OIcon>
+          <component
+            :is="icon"
+            :class="{
+              'o-rotating': icon.name === 'IconLoading',
+            }"
+          />
+        </OIcon>
+        <div class="icon-name">{{ icon.name }}</div>
+      </div>
+    </div>
+
+    <h4>Color</h4>
+    <div class="icon-list">
+      <div v-for="icon in colors" :key="icon" class="icon-item">
+        <OIcon>
+          <component
+            :is="icon"
+            :class="{
+              'o-rotating': icon.name === 'IconLoading',
+            }"
+          />
+        </OIcon>
+        <div class="icon-name">{{ icon.name }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.icon-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.icon-item {
+  color: #000;
+  font-size: 32px;
+  width: 140px;
+  border: 1px solid #ccc;
+  text-align: center;
+  margin: 4px;
+  padding: 8px;
+  > svg {
+    margin: 16px;
+    stroke-width: 1px;
+  }
+}
+.icon-name {
+  font-size: 14px;
+  word-wrap: break-word;
+}
+</style>
diff --git a/packages/opendesign/src/components/icon/style/var.scss b/packages/opendesign/src/components/icon/style/var.scss
index 44da65b8..23b92a45 100644
--- a/packages/opendesign/src/components/icon/style/var.scss
+++ b/packages/opendesign/src/components/icon/style/var.scss
@@ -1,4 +1,4 @@
-.o-icon {
+.o-svg-icon {
   --icon-g1: var(--o-color-info1);
   --icon-g2: var(--o-color-primary1);
 }
diff --git a/packages/opendesign/src/icons/icon.config.ts b/packages/opendesign/src/icons/icon.config.ts
index de587c37..bdc72c2a 100644
--- a/packages/opendesign/src/icons/icon.config.ts
+++ b/packages/opendesign/src/icons/icon.config.ts
@@ -1,4 +1,6 @@
 module.exports = {
   input: './svgs',
   output: '../components/icon-svgs/',
+  componentClass: 'o-svg-icon',
+  prefix: 'o-',
 };
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 533030a3..f7602054 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -18,7 +18,7 @@ export const routes = [
     path: '/icons',
     name: 'Icons',
     label: '图标 Icon',
-    component: () => import('./pages/TheIcons.vue'),
+    component: () => import('@components/icon/__demo__/TheIndex.vue'),
   },
   {
     path: '/button',
-- 
Gitee


From 85a8b49451da649015545e8f20e756befacaf606 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 16 May 2023 17:52:05 +0800
Subject: [PATCH 19/20] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E5=BC=95=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/badge/__demo__/BadgeSlot.vue   |  4 +-
 .../__demo__/BreadcrumbSeparator.vue          |  8 ++--
 .../components/button/__demo__/BtnBasic.vue   |  1 -
 .../button/__demo__/BtnIconSize.vue           | 42 +++++++++----------
 .../components/button/__demo__/BtnLoading.vue |  4 +-
 .../components/button/__demo__/BtnRound.vue   | 20 ++++-----
 .../components/card/__demo__/CardBasic.vue    | 18 ++++----
 .../figure/__demo__/FigureBasic.vue           |  4 +-
 .../opendesign/src/components/icon/OIcon.vue  |  8 +++-
 .../src/components/icon/style/index.scss      | 22 ++++------
 .../src/components/icon/style/var.scss        |  7 ++--
 .../opendesign/src/components/icon/types.ts   |  3 ++
 .../components/input/__demo__/InputBasic.vue  |  6 +--
 .../components/input/__demo__/InputSlot.vue   |  6 +--
 .../components/link/__demo__/LinkBasic.vue    |  6 +--
 .../loading/__demo__/LoadingBasic.vue         |  6 +--
 .../menu/__demo__/MenuAccordion.vue           | 10 ++---
 .../components/menu/__demo__/MenuBasic.vue    | 10 ++---
 .../message/__demo__/MessageBasic.vue         |  6 +--
 .../src/components/pagination/OPagination.vue |  6 +--
 .../progress/__demo__/ProgressBasic.vue       |  6 +--
 .../progress/__demo__/ProgressCircle.vue      |  6 +--
 .../progress/__demo__/ProgressColor.vue       |  6 +--
 .../progress/__demo__/ProgressCustom.vue      |  6 +--
 .../progress/__demo__/ProgressLabelInside.vue |  6 +--
 .../progress/__demo__/ProgressStrokeWidth.vue |  6 +--
 .../src/components/rate/__demo__/RateIcon.vue |  8 ++--
 .../src/components/style/common.scss          | 19 +++++++++
 .../switch/__demo__/SwitchSlots.vue           | 10 ++---
 .../src/components/tab/__demo__/TabBasic.vue  |  6 +--
 .../src/components/tag/__demo__/TagBasic.vue  |  4 +-
 packages/portal/src/main.ts                   |  2 +-
 32 files changed, 151 insertions(+), 131 deletions(-)

diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue b/packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue
index 7b416478..19373a8a 100644
--- a/packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue
+++ b/packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { OButton } from '../../button';
 import '../../button/style';
-import { IconAdd } from '../../icon';
+import { OIconAdd } from '../../icon-svgs';
 import { OBadge } from '../index';
 </script>
 
@@ -11,7 +11,7 @@ import { OBadge } from '../index';
     <OBadge color="danger">
       <OButton variant="solid" />
       <template #content>
-        <IconAdd />
+        <OIconAdd />
       </template>
     </OBadge>
   </section>
diff --git a/packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbSeparator.vue b/packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbSeparator.vue
index be79574a..7c16901a 100644
--- a/packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbSeparator.vue
+++ b/packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbSeparator.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { IconAdd } from '../../icon';
+import { OIconAdd } from '../../icon-svgs';
 import { OBreadcrumb, OBreadcrumbItem } from '../index';
 
 const handleClick = () => {
@@ -20,19 +20,19 @@ const handleClick = () => {
       <OBreadcrumbItem :to="{ name: 'Home' }" @click="handleClick">
         首页
         <template #separator>
-          <IconAdd />
+          <OIconAdd />
         </template>
       </OBreadcrumbItem>
       <OBreadcrumbItem href="http://devin-cwd.gitee.io/design-token-editor/#/token-color" target="_blank" @click="handleClick">
         Token
         <template #separator>
-          <IconAdd />
+          <OIconAdd />
         </template>
       </OBreadcrumbItem>
       <OBreadcrumbItem @click="handleClick">
         面包屑
         <template #separator>
-          <IconAdd />
+          <OIconAdd />
         </template>
       </OBreadcrumbItem>
     </OBreadcrumb>
diff --git a/packages/opendesign/src/components/button/__demo__/BtnBasic.vue b/packages/opendesign/src/components/button/__demo__/BtnBasic.vue
index 32b8a5a6..7f6d08ea 100644
--- a/packages/opendesign/src/components/button/__demo__/BtnBasic.vue
+++ b/packages/opendesign/src/components/button/__demo__/BtnBasic.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { OButton } from '../index';
-import { IconAdd } from '../../icon';
 </script>
 <template>
   <h4>Variant & Color</h4>
diff --git a/packages/opendesign/src/components/button/__demo__/BtnIconSize.vue b/packages/opendesign/src/components/button/__demo__/BtnIconSize.vue
index 627b4969..6a60ae86 100644
--- a/packages/opendesign/src/components/button/__demo__/BtnIconSize.vue
+++ b/packages/opendesign/src/components/button/__demo__/BtnIconSize.vue
@@ -1,74 +1,74 @@
 <script setup lang="ts">
 import { OButton } from '../index';
-import { IconAdd } from '../../icon';
+import { OIconAdd } from '../../icon-svgs';
 </script>
 <template>
   <h4>Icon + Size</h4>
   <section>
     <div class="row">
       <OButton variant="solid" size="mini">
-        <template #icon><IconAdd /></template>Primary Button
+        <template #icon><OIconAdd /></template>Primary Button
       </OButton>
       <OButton variant="solid" size="small">
-        <template #icon><IconAdd /></template>Primary Button
+        <template #icon><OIconAdd /></template>Primary Button
       </OButton>
       <OButton variant="solid" size="medium">
-        <template #icon><IconAdd /></template>Primary Button
+        <template #icon><OIconAdd /></template>Primary Button
       </OButton>
       <OButton variant="solid" size="large">
-        <template #icon><IconAdd /></template>Primary Button
+        <template #icon><OIconAdd /></template>Primary Button
       </OButton>
     </div>
     <div class="row">
       <OButton variant="outline" size="mini">
-        <template #icon><IconAdd /></template>Outline Button
+        <template #icon><OIconAdd /></template>Outline Button
       </OButton>
       <OButton variant="outline" size="small">
-        <template #icon><IconAdd /></template>Outline Button
+        <template #icon><OIconAdd /></template>Outline Button
       </OButton>
       <OButton variant="outline">
-        <template #icon><IconAdd /></template>Outline Button
+        <template #icon><OIconAdd /></template>Outline Button
       </OButton>
       <OButton variant="outline" size="large">
-        <template #icon><IconAdd /></template>Outline Button
+        <template #icon><OIconAdd /></template>Outline Button
       </OButton>
     </div>
     <div class="row">
       <OButton variant="text" size="mini">
-        <template #icon><IconAdd /></template>
+        <template #icon><OIconAdd /></template>
       </OButton>
       <OButton variant="text" size="small">
-        <template #icon><IconAdd /></template>
+        <template #icon><OIconAdd /></template>
       </OButton>
       <OButton variant="text">
-        <template #icon><IconAdd /></template>
+        <template #icon><OIconAdd /></template>
       </OButton>
       <OButton variant="text" size="large">
-        <template #icon><IconAdd /></template>
+        <template #icon><OIconAdd /></template>
       </OButton>
       <OButton variant="outline" size="mini" round="pill">
-        <template #icon><IconAdd /></template>
+        <template #icon><OIconAdd /></template>
       </OButton>
       <OButton variant="outline" size="small" round="pill">
-        <template #icon><IconAdd /></template>
+        <template #icon><OIconAdd /></template>
       </OButton>
       <OButton variant="outline" round="pill">
-        <template #icon><IconAdd /></template>
+        <template #icon><OIconAdd /></template>
       </OButton>
       <OButton variant="outline" size="large" round="pill">
-        <template #icon><IconAdd /></template>
+        <template #icon><OIconAdd /></template>
       </OButton>
       <OButton variant="solid" size="mini" round="pill">
-        <template #icon><IconAdd /></template>
+        <template #icon><OIconAdd /></template>
       </OButton>
       <OButton variant="solid" size="small" round="pill">
-        <template #icon><IconAdd /></template>
+        <template #icon><OIconAdd /></template>
       </OButton>
       <OButton variant="solid" round="pill">
-        <template #icon><IconAdd /></template>
+        <template #icon><OIconAdd /></template>
       </OButton>
       <OButton variant="solid" size="large" round="pill">
-        <template #icon><IconAdd /></template>
+        <template #icon><OIconAdd /></template>
       </OButton>
     </div>
   </section>
diff --git a/packages/opendesign/src/components/button/__demo__/BtnLoading.vue b/packages/opendesign/src/components/button/__demo__/BtnLoading.vue
index 91f4ec8c..16a66ea1 100644
--- a/packages/opendesign/src/components/button/__demo__/BtnLoading.vue
+++ b/packages/opendesign/src/components/button/__demo__/BtnLoading.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { reactive } from 'vue';
-import { IconAdd } from '../../icon';
+import { OIconAdd } from '../../icon-svgs';
 import { OButton } from '../index';
 const rlt = reactive({
   loading1: false,
@@ -19,7 +19,7 @@ const showLoading = (key: 'loading1' | 'loading2' | 'loading3', val: boolean) =>
   <section>
     <OButton color="primary" :loading="rlt.loading1" @click="showLoading('loading1', true)">Primary Button</OButton>
     <OButton variant="outline" :loading="rlt.loading2" @click="showLoading('loading2', true)">
-      <template #icon><IconAdd /></template>Outline Button
+      <template #icon><OIconAdd /></template>Outline Button
     </OButton>
     <OButton variant="text" :loading="rlt.loading3" @click="showLoading('loading3', true)">Text Button</OButton>
     <OButton :loading="!rlt.loading3" href="https://hiascend.com" target="__blank">Link Button</OButton>
diff --git a/packages/opendesign/src/components/button/__demo__/BtnRound.vue b/packages/opendesign/src/components/button/__demo__/BtnRound.vue
index 3c8b0c65..503162ac 100644
--- a/packages/opendesign/src/components/button/__demo__/BtnRound.vue
+++ b/packages/opendesign/src/components/button/__demo__/BtnRound.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { OButton } from '../index';
-import { IconAdd } from '../../icon';
+import { OIconAdd } from '../../icon-svgs';
 import { ref } from 'vue';
 
 const r = ref(12);
@@ -19,23 +19,23 @@ const onClick = () => {
       <p>round="pill"</p>
       <section>
         <OButton variant="solid" size="large" round="pill">
-          <template #icon><IconAdd /></template>
+          <template #icon><OIconAdd /></template>
         </OButton>
         <OButton variant="outline" round="pill">
-          <template #icon><IconAdd /></template>
+          <template #icon><OIconAdd /></template>
         </OButton>
         <OButton variant="text" size="small" round="pill">
-          <template #icon><IconAdd /></template>
+          <template #icon><OIconAdd /></template>
         </OButton>
 
         <OButton variant="solid" size="large" round="pill">
-          <template #icon><IconAdd /></template>Round Button
+          <template #icon><OIconAdd /></template>Round Button
         </OButton>
         <OButton variant="outline" round="pill">
-          <template #icon><IconAdd /></template>Round Button
+          <template #icon><OIconAdd /></template>Round Button
         </OButton>
         <OButton variant="text" size="small" round="pill">
-          <template #icon><IconAdd /></template>Round Button
+          <template #icon><OIconAdd /></template>Round Button
         </OButton>
       </section>
     </div>
@@ -43,13 +43,13 @@ const onClick = () => {
       <p>round="{{ r }}px"</p>
       <section>
         <OButton variant="solid" size="large" :round="r + 'px'" @click="onClick">
-          <template #icon><IconAdd /></template>Click To Change Round
+          <template #icon><OIconAdd /></template>Click To Change Round
         </OButton>
         <OButton variant="outline" :round="r + 'px'">
-          <template #icon><IconAdd /></template>Round Button
+          <template #icon><OIconAdd /></template>Round Button
         </OButton>
         <OButton variant="text" size="small" :round="r + 'px'">
-          <template #icon><IconAdd /></template>Round Button
+          <template #icon><OIconAdd /></template>Round Button
         </OButton>
       </section>
     </div>
diff --git a/packages/opendesign/src/components/card/__demo__/CardBasic.vue b/packages/opendesign/src/components/card/__demo__/CardBasic.vue
index efd39017..a7e396f9 100644
--- a/packages/opendesign/src/components/card/__demo__/CardBasic.vue
+++ b/packages/opendesign/src/components/card/__demo__/CardBasic.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { OCard } from '../index';
-import { IconStar } from '../../icon';
+import { OIconStar } from '../../icon-svgs';
 
 const card = {
   cover: 'https://www.openeuler.org/img/banners/20230418-odd.png',
@@ -33,7 +33,7 @@ const card = {
           <div class="actions">
             <div class="date">2023/02/09</div>
             <div class="btns">
-              <div class="btn"><IconStar /> 文本</div>
+              <div class="btn"><OIconStar /> 文本</div>
             </div>
           </div>
         </template>
@@ -53,7 +53,7 @@ const card = {
           <div class="actions">
             <div class="date">2023/02/09</div>
             <div class="btns">
-              <div class="btn"><IconStar /> 文本</div>
+              <div class="btn"><OIconStar /> 文本</div>
             </div>
           </div>
         </template>
@@ -74,7 +74,7 @@ const card = {
           <div class="actions">
             <div class="date">2023/02/09</div>
             <div class="btns">
-              <div class="btn"><IconStar /> 文本</div>
+              <div class="btn"><OIconStar /> 文本</div>
             </div>
           </div>
         </template>
@@ -88,7 +88,7 @@ const card = {
           <div class="actions">
             <div class="date">2023/02/09</div>
             <div class="btns">
-              <div class="btn"><IconStar /> 文本</div>
+              <div class="btn"><OIconStar /> 文本</div>
             </div>
           </div>
         </template>
@@ -98,7 +98,7 @@ const card = {
       <OCard class="card col3" hoverable style="height: 350px">
         <template #main>
           <div class="card-icon">
-            <div class="icon"><IconStar /></div>
+            <div class="icon"><OIconStar /></div>
             <div>
               <div class="title">{{ card.title }}</div>
               <div class="btns">{{ card.content }}</div>
@@ -132,9 +132,9 @@ const card = {
   display: flex;
   justify-content: space-between;
 }
-.card2 {
-  // height: 260px;
-}
+// .card2 {
+// height: 260px;
+// }
 .card-icon {
   display: flex;
   align-items: flex-start;
diff --git a/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue b/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue
index 1198de04..689dec66 100644
--- a/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue
+++ b/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { OFigure } from '../index';
-import { IconSearch } from '../../icon';
+import { OIconSearch } from '../../icon-svgs';
 import { ref } from 'vue';
 const img = 'https://www.openeuler.org/img/banners/20230418-odd.png';
 
@@ -22,7 +22,7 @@ const preivewImg = () => {
     <OFigure class="img" href="openEuler" target="__blank" :src="img" />
     <OFigure class="img" :src="img" preview />
     <OFigure ref="figureRef" class="img" :src="img">
-      <IconSearch class="zoomIn" @click="preivewImg" />
+      <OIconSearch class="zoomIn" @click="preivewImg" />
     </OFigure>
   </section>
 </template>
diff --git a/packages/opendesign/src/components/icon/OIcon.vue b/packages/opendesign/src/components/icon/OIcon.vue
index 25f6a486..ba5b4f19 100644
--- a/packages/opendesign/src/components/icon/OIcon.vue
+++ b/packages/opendesign/src/components/icon/OIcon.vue
@@ -3,7 +3,13 @@ import { iconProps } from './types';
 const props = defineProps(iconProps);
 </script>
 <template>
-  <div class="o-icon">
+  <div
+    class="o-icon"
+    :class="{
+      'o-icon-btn': props.button,
+    }"
+    tabindex="-1"
+  >
     <slot>
       <component :is="props.icon" />
     </slot>
diff --git a/packages/opendesign/src/components/icon/style/index.scss b/packages/opendesign/src/components/icon/style/index.scss
index 5998ab1f..0f4c9ef7 100644
--- a/packages/opendesign/src/components/icon/style/index.scss
+++ b/packages/opendesign/src/components/icon/style/index.scss
@@ -1,26 +1,18 @@
 @use './var.scss';
 
-// icons
 .o-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1em;
-  height: 1em;
 }
 
-.o-svg-icon {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.2em;
-  color: inherit;
-  font-style: normal;
-  outline: none;
-  &.type-stroke {
-    stroke: currentColor;
+.o-icon-btn {
+  color: var(--icon-btn-color);
+  cursor: pointer;
+  &:hover {
+    color: var(--icon-btn-color-hover);
   }
-  &.type-fill {
-    fill: currentColor;
+  &:active {
+    color: var(--icon-btn-color-active);
   }
 }
diff --git a/packages/opendesign/src/components/icon/style/var.scss b/packages/opendesign/src/components/icon/style/var.scss
index 23b92a45..6a01aae7 100644
--- a/packages/opendesign/src/components/icon/style/var.scss
+++ b/packages/opendesign/src/components/icon/style/var.scss
@@ -1,4 +1,5 @@
-.o-svg-icon {
-  --icon-g1: var(--o-color-info1);
-  --icon-g2: var(--o-color-primary1);
+.o-icon {
+  --icon-btn-color: var(--o-color-info1);
+  --icon-btn-color-hover: var(--o-color-info2);
+  --icon-btn-color-active: var(--o-color-info3);
 }
diff --git a/packages/opendesign/src/components/icon/types.ts b/packages/opendesign/src/components/icon/types.ts
index e2ec1f5a..c701a38c 100644
--- a/packages/opendesign/src/components/icon/types.ts
+++ b/packages/opendesign/src/components/icon/types.ts
@@ -4,6 +4,9 @@ export const iconProps = {
   icon: {
     type: Object as PropType<any>,
   },
+  button: {
+    type: Boolean,
+  },
 };
 
 export type IconPropsT = ExtractPropTypes<typeof iconProps>;
diff --git a/packages/opendesign/src/components/input/__demo__/InputBasic.vue b/packages/opendesign/src/components/input/__demo__/InputBasic.vue
index 78605e22..491db021 100644
--- a/packages/opendesign/src/components/input/__demo__/InputBasic.vue
+++ b/packages/opendesign/src/components/input/__demo__/InputBasic.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { OInput } from '../index';
-import { IconDone } from '../../icon';
+import { OIconDone } from '../../icon-svgs';
 
 const val1 = ref('');
 const val2 = ref('this is input value');
@@ -89,12 +89,12 @@ setTimeout(() => {
     <OInput v-model="val2" readonly />
     <OInput v-model="val2" readonly>
       <template #prefix>
-        <IconDone />
+        <OIconDone />
       </template>
     </OInput>
     <OInput v-model="val2" readonly>
       <template #suffix>
-        <IconDone />
+        <OIconDone />
       </template>
     </OInput>
     <OInput v-model="val2" :clearable="false" readonly>
diff --git a/packages/opendesign/src/components/input/__demo__/InputSlot.vue b/packages/opendesign/src/components/input/__demo__/InputSlot.vue
index 18fea4ab..07c2222f 100644
--- a/packages/opendesign/src/components/input/__demo__/InputSlot.vue
+++ b/packages/opendesign/src/components/input/__demo__/InputSlot.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { OInput } from '../index';
-import { IconDone } from '../../icon';
+import { OIconDone } from '../../icon-svgs';
 
 const val1 = ref('');
 const val2 = ref('this is input value');
@@ -13,12 +13,12 @@ const val2 = ref('this is input value');
     <OInput v-model="val2" />
     <OInput v-model="val2">
       <template #prefix>
-        <IconDone />
+        <OIconDone />
       </template>
     </OInput>
     <OInput v-model="val2">
       <template #suffix>
-        <IconDone />
+        <OIconDone />
       </template>
     </OInput>
     <OInput v-model="val2">
diff --git a/packages/opendesign/src/components/link/__demo__/LinkBasic.vue b/packages/opendesign/src/components/link/__demo__/LinkBasic.vue
index 9f97d332..d11bedcd 100644
--- a/packages/opendesign/src/components/link/__demo__/LinkBasic.vue
+++ b/packages/opendesign/src/components/link/__demo__/LinkBasic.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { OLink } from '../index';
-import { IconAdd, IconDone } from '../../icon';
+import { OIconAdd, OIconDone } from '../../icon-svgs';
 
 const link = '#/link';
 
@@ -62,10 +62,10 @@ const onLinkClick2 = () => {
     <OLink :href="link" icon-prefix status="primary">icon-prefix</OLink>
     <OLink :href="link" icon-suffix>icon-suffix</OLink>
     <OLink :href="link">
-      <template #iconPrefix><IconDone /></template>自定义图标链接slot:iconPrefix
+      <template #iconPrefix><OIconDone /></template>自定义图标链接slot:iconPrefix
     </OLink>
     <OLink :href="link">
-      自定义图标链接slot:iconSuffix<template #iconSuffix><IconAdd /></template>
+      自定义图标链接slot:iconSuffix<template #iconSuffix><OIconAdd /></template>
     </OLink>
   </section>
   <h4>点击事件</h4>
diff --git a/packages/opendesign/src/components/loading/__demo__/LoadingBasic.vue b/packages/opendesign/src/components/loading/__demo__/LoadingBasic.vue
index 9f9429f0..0dd3c458 100644
--- a/packages/opendesign/src/components/loading/__demo__/LoadingBasic.vue
+++ b/packages/opendesign/src/components/loading/__demo__/LoadingBasic.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { OLoading, vLoading, useLoading } from '../index';
 import { OButton } from '../../button';
 import '../../button/style';
-import { IconAdd } from '../../icon';
+import { OIconAdd } from '../../icon-svgs';
 
 const show1 = ref(false);
 const showLoading1 = () => {
@@ -21,7 +21,7 @@ const box1 = ref();
 const l1 = useLoading();
 const l2 = useLoading(box1, {
   label: 'loading',
-  icon: IconAdd,
+  icon: OIconAdd,
   iconRotating: true,
 });
 const toggleLoading1 = () => {
@@ -47,7 +47,7 @@ const toggleLoading2 = () => {
     </div>
     <div class="box">
       show2
-      <OLoading v-model:visible="show2" :wrapper="null">自定义<IconAdd class="o-rotating" /></OLoading>
+      <OLoading v-model:visible="show2" :wrapper="null">自定义<OIconAdd class="o-rotating" /></OLoading>
     </div>
   </section>
   <h4>指令</h4>
diff --git a/packages/opendesign/src/components/menu/__demo__/MenuAccordion.vue b/packages/opendesign/src/components/menu/__demo__/MenuAccordion.vue
index 1a6f9fbd..353f494d 100644
--- a/packages/opendesign/src/components/menu/__demo__/MenuAccordion.vue
+++ b/packages/opendesign/src/components/menu/__demo__/MenuAccordion.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { IconMore } from '../../icon';
+import { OIconMore } from '../../icon-svgs';
 import { OMenu, OSubMenu, OMenuItem } from '../index';
 
 const expandedArr = ref(['2']);
@@ -13,7 +13,7 @@ const activeVal = ref('2-1');
     <OMenu v-model="activeVal" v-model:expanded="expandedArr" accordion>
       <OSubMenu value="1">
         <template #title>一级菜单1</template>
-        <template #icon><IconMore /></template>
+        <template #icon><OIconMore /></template>
         <OMenuItem value="1-1">二级菜单1-1</OMenuItem>
         <OMenuItem value="1-2">二级菜单1-2</OMenuItem>
         <OMenuItem value="1-3">二级菜单1-3</OMenuItem>
@@ -21,7 +21,7 @@ const activeVal = ref('2-1');
       </OSubMenu>
       <OSubMenu value="2">
         <template #title>一级菜单2</template>
-        <template #icon><IconMore /></template>
+        <template #icon><OIconMore /></template>
         <OMenuItem value="2-1">二级菜单2-1</OMenuItem>
         <OMenuItem value="2-2">二级菜单2-2</OMenuItem>
         <OMenuItem value="2-3">二级菜单2-3</OMenuItem>
@@ -29,10 +29,10 @@ const activeVal = ref('2-1');
       </OSubMenu>
       <OSubMenu value="3">
         <template #title>一级菜单3</template>
-        <template #icon><IconMore /></template>
+        <template #icon><OIconMore /></template>
         <OSubMenu value="3-1">
           <template #title>二级菜单3-1</template>
-          <template #icon><IconMore /></template>
+          <template #icon><OIconMore /></template>
           <OMenuItem value="3-1-1">三级菜单3-1-1</OMenuItem>
           <OMenuItem value="3-1-2">三级菜单3-1-2</OMenuItem>
           <OMenuItem value="3-1-3">三级菜单3-1-3</OMenuItem>
diff --git a/packages/opendesign/src/components/menu/__demo__/MenuBasic.vue b/packages/opendesign/src/components/menu/__demo__/MenuBasic.vue
index 4651ebdf..abab7283 100644
--- a/packages/opendesign/src/components/menu/__demo__/MenuBasic.vue
+++ b/packages/opendesign/src/components/menu/__demo__/MenuBasic.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { IconMore } from '../../icon';
+import { OIconMore } from '../../icon-svgs';
 import { OMenu, OSubMenu, OMenuItem } from '../index';
 
 const expandedArr = ref(['1']);
@@ -23,7 +23,7 @@ const activeVal2 = ref('1-1');
       <OMenu v-model="activeVal" v-model:expanded="expandedArr" @change="handleChange" @expanded-change="handleExpandedChange">
         <OSubMenu value="1">
           <template #title>一级菜单1一级菜单1一级菜单1</template>
-          <template #icon><IconMore /></template>
+          <template #icon><OIconMore /></template>
           <OMenuItem value="1-1">二级菜单1-1</OMenuItem>
           <OMenuItem value="1-2" disabled>二级菜单1-2</OMenuItem>
           <OMenuItem value="1-3">二级菜单1-3</OMenuItem>
@@ -31,7 +31,7 @@ const activeVal2 = ref('1-1');
         </OSubMenu>
         <OSubMenu value="2">
           <template #title>一级菜单2</template>
-          <template #icon><IconMore /></template>
+          <template #icon><OIconMore /></template>
           <OMenuItem value="2-1">二级菜单2-1</OMenuItem>
           <OMenuItem value="2-2">二级菜单2-2</OMenuItem>
           <OMenuItem value="2-3">二级菜单2-3</OMenuItem>
@@ -39,10 +39,10 @@ const activeVal2 = ref('1-1');
         </OSubMenu>
         <OSubMenu value="3">
           <template #title>一级菜单3</template>
-          <template #icon><IconMore /></template>
+          <template #icon><OIconMore /></template>
           <OSubMenu value="3-1">
             <template #title>二级菜单3-1</template>
-            <template #icon><IconMore /></template>
+            <template #icon><OIconMore /></template>
             <OMenuItem value="3-1-1">三级菜单3-1-1</OMenuItem>
             <OMenuItem value="3-1-2">三级菜单3-1-2</OMenuItem>
             <OMenuItem value="3-1-3">三级菜单3-1-3</OMenuItem>
diff --git a/packages/opendesign/src/components/message/__demo__/MessageBasic.vue b/packages/opendesign/src/components/message/__demo__/MessageBasic.vue
index 7c5ab047..fb3bbe62 100644
--- a/packages/opendesign/src/components/message/__demo__/MessageBasic.vue
+++ b/packages/opendesign/src/components/message/__demo__/MessageBasic.vue
@@ -3,7 +3,7 @@ import { h } from 'vue';
 
 import '../style';
 import useMessage from '../use-message';
-import { IconAdd, IconLoading } from '../../icon';
+import { OIconAdd, OIconLoading } from '../../icon-svgs';
 
 import { OButton } from '../../button';
 import '../../button/style';
@@ -38,7 +38,7 @@ const handleInfoBtnClick2 = () => {
   message.open({
     content: '自定义Icon',
     status: 'info',
-    icon: IconAdd,
+    icon: OIconAdd,
   });
 };
 
@@ -46,7 +46,7 @@ const handleInfoWarningClick2 = () => {
   message.open({
     content: '排队中，请稍后',
     status: 'warning',
-    icon: h(IconLoading, { class: 'o-rotating' }),
+    icon: h(OIconLoading, { class: 'o-rotating' }),
   });
 };
 </script>
diff --git a/packages/opendesign/src/components/pagination/OPagination.vue b/packages/opendesign/src/components/pagination/OPagination.vue
index 82e59d33..498dba92 100644
--- a/packages/opendesign/src/components/pagination/OPagination.vue
+++ b/packages/opendesign/src/components/pagination/OPagination.vue
@@ -142,7 +142,7 @@ defineExpose({
           :class="{
             'is-disabled': currentPage === 1,
           }"
-          tabindex="1"
+          tabindex="-1"
           @click="() => currentPage !== 1 && clickPageBtn(false)"
         >
           <IconChevronLeft />
@@ -168,7 +168,7 @@ defineExpose({
               :key="item.value"
               class="o-pagination-item"
               :class="{ active: item.value === currentPage }"
-              tabindex="1"
+              tabindex="-1"
               @click="selectPage(item.value)"
             >
               <span v-if="!item.isMore">{{ item.value }}</span>
@@ -190,7 +190,7 @@ defineExpose({
           :class="{
             'is-disabled': currentPage === totalPage,
           }"
-          tabindex="1"
+          tabindex="-1"
           @click="() => currentPage !== totalPage && clickPageBtn(true)"
         >
           <IconChevronRight />
diff --git a/packages/opendesign/src/components/progress/__demo__/ProgressBasic.vue b/packages/opendesign/src/components/progress/__demo__/ProgressBasic.vue
index 98708977..5126f68e 100644
--- a/packages/opendesign/src/components/progress/__demo__/ProgressBasic.vue
+++ b/packages/opendesign/src/components/progress/__demo__/ProgressBasic.vue
@@ -5,7 +5,7 @@ import { OProgress } from '../index';
 
 import '../../button/style';
 import { OButton } from '../../button';
-import { IconAdd, IconMinus } from '../../icon';
+import { OIconAdd, OIconMinus } from '../../icon-svgs';
 
 const val = ref(10);
 const increaseVal = () => {
@@ -22,10 +22,10 @@ const decreaseVal = () => {
   <section>
     <div class="progress-btn">
       <OButton color="primary" size="small" @click="increaseVal">
-        <IconAdd />
+        <OIconAdd />
       </OButton>
       <OButton color="primary" size="small" @click="decreaseVal">
-        <IconMinus />
+        <OIconMinus />
       </OButton>
     </div>
     <OProgress :percentage="val" :width="200" :style="{ width: '300px' }" />
diff --git a/packages/opendesign/src/components/progress/__demo__/ProgressCircle.vue b/packages/opendesign/src/components/progress/__demo__/ProgressCircle.vue
index 777bfeb8..14b3c0e8 100644
--- a/packages/opendesign/src/components/progress/__demo__/ProgressCircle.vue
+++ b/packages/opendesign/src/components/progress/__demo__/ProgressCircle.vue
@@ -5,7 +5,7 @@ import { OProgress } from '../index';
 
 import '../../button/style';
 import { OButton } from '../../button';
-import { IconAdd, IconMinus } from '../../icon';
+import { OIconAdd, OIconMinus } from '../../icon-svgs';
 
 const val = ref(60);
 const increaseVal = () => {
@@ -22,10 +22,10 @@ const decreaseVal = () => {
   <section class="progress-container">
     <div class="progress-btn">
       <OButton color="primary" size="small" @click="increaseVal">
-        <IconAdd />
+        <OIconAdd />
       </OButton>
       <OButton color="primary" size="small" @click="decreaseVal">
-        <IconMinus />
+        <OIconMinus />
       </OButton>
     </div>
 
diff --git a/packages/opendesign/src/components/progress/__demo__/ProgressColor.vue b/packages/opendesign/src/components/progress/__demo__/ProgressColor.vue
index 39863a96..fee5bdb8 100644
--- a/packages/opendesign/src/components/progress/__demo__/ProgressColor.vue
+++ b/packages/opendesign/src/components/progress/__demo__/ProgressColor.vue
@@ -5,7 +5,7 @@ import { OProgress } from '../index';
 
 import '../../button/style';
 import { OButton } from '../../button';
-import { IconAdd, IconMinus } from '../../icon';
+import { OIconAdd, OIconMinus } from '../../icon-svgs';
 
 const val = ref(60);
 const increaseVal = () => {
@@ -22,10 +22,10 @@ const decreaseVal = () => {
   <section>
     <div class="progress-btn">
       <OButton color="primary" size="small" @click="increaseVal">
-        <IconAdd />
+        <OIconAdd />
       </OButton>
       <OButton color="primary" size="small" @click="decreaseVal">
-        <IconMinus />
+        <OIconMinus />
       </OButton>
     </div>
 
diff --git a/packages/opendesign/src/components/progress/__demo__/ProgressCustom.vue b/packages/opendesign/src/components/progress/__demo__/ProgressCustom.vue
index e1c4cd9d..199ebf98 100644
--- a/packages/opendesign/src/components/progress/__demo__/ProgressCustom.vue
+++ b/packages/opendesign/src/components/progress/__demo__/ProgressCustom.vue
@@ -5,7 +5,7 @@ import { OProgress } from '../index';
 
 import '../../button/style';
 import { OButton } from '../../button';
-import { IconAdd, IconMinus } from '../../icon';
+import { OIconAdd, OIconMinus } from '../../icon-svgs';
 
 const val = ref(10);
 
@@ -28,10 +28,10 @@ const format = (percentage: number) => {
   <section class="progress-container">
     <div class="progress-btn">
       <OButton color="primary" size="small" @click="increaseVal">
-        <IconAdd />
+        <OIconAdd />
       </OButton>
       <OButton color="primary" size="small" @click="decreaseVal">
-        <IconMinus />
+        <OIconMinus />
       </OButton>
     </div>
 
diff --git a/packages/opendesign/src/components/progress/__demo__/ProgressLabelInside.vue b/packages/opendesign/src/components/progress/__demo__/ProgressLabelInside.vue
index 964ba2ce..22bd5e91 100644
--- a/packages/opendesign/src/components/progress/__demo__/ProgressLabelInside.vue
+++ b/packages/opendesign/src/components/progress/__demo__/ProgressLabelInside.vue
@@ -5,7 +5,7 @@ import { OProgress } from '../index';
 
 import '../../button/style';
 import { OButton } from '../../button';
-import { IconAdd, IconMinus } from '../../icon';
+import { OIconAdd, OIconMinus } from '../../icon-svgs';
 
 const val = ref(30);
 const increaseVal = () => {
@@ -22,10 +22,10 @@ const decreaseVal = () => {
   <section>
     <div class="progress-btn">
       <OButton color="primary" @click="increaseVal">
-        <IconAdd />
+        <OIconAdd />
       </OButton>
       <OButton color="primary" @click="decreaseVal">
-        <IconMinus />
+        <OIconMinus />
       </OButton>
     </div>
 
diff --git a/packages/opendesign/src/components/progress/__demo__/ProgressStrokeWidth.vue b/packages/opendesign/src/components/progress/__demo__/ProgressStrokeWidth.vue
index 65957ed2..27581e62 100644
--- a/packages/opendesign/src/components/progress/__demo__/ProgressStrokeWidth.vue
+++ b/packages/opendesign/src/components/progress/__demo__/ProgressStrokeWidth.vue
@@ -5,7 +5,7 @@ import { OProgress } from '../index';
 
 import '../../button/style';
 import { OButton } from '../../button';
-import { IconAdd, IconMinus } from '../../icon';
+import { OIconAdd, OIconMinus } from '../../icon-svgs';
 
 const val = ref(60);
 const increaseVal = () => {
@@ -22,10 +22,10 @@ const decreaseVal = () => {
   <section>
     <div class="progress-btn">
       <OButton color="primary" @click="increaseVal">
-        <IconAdd />
+        <OIconAdd />
       </OButton>
       <OButton color="primary" @click="decreaseVal">
-        <IconMinus />
+        <OIconMinus />
       </OButton>
     </div>
 
diff --git a/packages/opendesign/src/components/rate/__demo__/RateIcon.vue b/packages/opendesign/src/components/rate/__demo__/RateIcon.vue
index 0c705b36..b582eaf9 100644
--- a/packages/opendesign/src/components/rate/__demo__/RateIcon.vue
+++ b/packages/opendesign/src/components/rate/__demo__/RateIcon.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { ORate } from '../index';
-import { IconAdd } from '../../icon';
-import { IconX } from '../../icon';
+import { OIconAdd } from '../../icon-svgs';
+import { OIconX } from '../../icon-svgs';
 
 const rateVal1 = ref(4);
 const rateVal2 = ref(0);
@@ -13,12 +13,12 @@ const rateVal2 = ref(0);
   <section>
     <ORate v-model="rateVal1">
       <template #icon>
-        <IconAdd />
+        <OIconAdd />
       </template>
     </ORate>
     <ORate :default-value="rateVal2" allow-half>
       <template #icon>
-        <IconX />
+        <OIconX />
       </template>
     </ORate>
   </section>
diff --git a/packages/opendesign/src/components/style/common.scss b/packages/opendesign/src/components/style/common.scss
index c27cd72d..51db64c5 100644
--- a/packages/opendesign/src/components/style/common.scss
+++ b/packages/opendesign/src/components/style/common.scss
@@ -13,3 +13,22 @@ $text-types: display1, display2, display3, display4, display5, h1, h2, h3, h4, t
     display: none;
   }
 }
+
+.o-svg-icon {
+  --icon-g1: var(--o-color-info1);
+  --icon-g2: var(--o-color-primary1);
+
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.2em;
+  color: inherit;
+  font-style: normal;
+  outline: none;
+  &.type-stroke {
+    stroke: currentColor;
+  }
+  &.type-fill {
+    fill: currentColor;
+  }
+}
diff --git a/packages/opendesign/src/components/switch/__demo__/SwitchSlots.vue b/packages/opendesign/src/components/switch/__demo__/SwitchSlots.vue
index 5edecb99..047fd54c 100644
--- a/packages/opendesign/src/components/switch/__demo__/SwitchSlots.vue
+++ b/packages/opendesign/src/components/switch/__demo__/SwitchSlots.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { OSWitch } from '../index';
-import { IconDone, IconX } from '../../icon';
+import { OIconDone, OIconX } from '../../icon-svgs';
 
 const switchVal1 = ref(false);
 const switchVal2 = ref(true);
@@ -16,8 +16,8 @@ const switchVal2 = ref(true);
     </OSWitch>
 
     <OSWitch v-model="switchVal1">
-      <template #on><IconDone /></template>
-      <template #off><IconX /></template>
+      <template #on><OIconDone /></template>
+      <template #off><OIconX /></template>
     </OSWitch>
 
     <OSWitch v-model="switchVal2" round="pill">
@@ -26,8 +26,8 @@ const switchVal2 = ref(true);
     </OSWitch>
 
     <OSWitch v-model="switchVal2" round="pill">
-      <template #on><IconDone /></template>
-      <template #off><IconX /></template>
+      <template #on><OIconDone /></template>
+      <template #off><OIconX /></template>
     </OSWitch>
   </section>
 </template>
diff --git a/packages/opendesign/src/components/tab/__demo__/TabBasic.vue b/packages/opendesign/src/components/tab/__demo__/TabBasic.vue
index 31d75a24..3095124d 100644
--- a/packages/opendesign/src/components/tab/__demo__/TabBasic.vue
+++ b/packages/opendesign/src/components/tab/__demo__/TabBasic.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, reactive } from 'vue';
 import { OTab, OTabPane } from '../index';
-import { IconSearch } from '../../icon';
+import { OIconSearch } from '../../icon-svgs';
 const activeTab = ref('Tab A');
 const activeTab2 = ref('1');
 const tabChange = (val: string | number, oldVal?: string | number) => {
@@ -77,7 +77,7 @@ const updateTab = (v: string) => {
       <OTabPane value="Tab A" class="pane"><template #nav>Nav 1</template>pane 1 </OTabPane>
       <OTabPane value="Tab B" class="pane">pane 2</OTabPane>
       <OTabPane value="Tab C" class="pane">
-        <template #nav><IconSearch /> Nav 3</template>pane 3
+        <template #nav><OIconSearch /> Nav 3</template>pane 3
       </OTabPane>
       <OTabPane value="Tab D" class="pane">pane 4</OTabPane>
     </OTab>
@@ -88,7 +88,7 @@ const updateTab = (v: string) => {
       <OTabPane value="Tab A" class="pane"><template #nav>Nav 1</template>pane 1 </OTabPane>
       <OTabPane value="Tab B" class="pane">pane 2</OTabPane>
       <OTabPane value="Tab C" class="pane">
-        <template #nav><IconSearch /> Nav 3</template>pane 3
+        <template #nav><OIconSearch /> Nav 3</template>pane 3
       </OTabPane>
       <OTabPane value="Tab D" class="pane">pane 4</OTabPane>
     </OTab>
diff --git a/packages/opendesign/src/components/tag/__demo__/TagBasic.vue b/packages/opendesign/src/components/tag/__demo__/TagBasic.vue
index 9bd63bde..1d2312ec 100644
--- a/packages/opendesign/src/components/tag/__demo__/TagBasic.vue
+++ b/packages/opendesign/src/components/tag/__demo__/TagBasic.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { OTag } from '../index';
-import { IconAdd } from '../../icon';
+import { OIconAdd } from '../../icon-svgs';
 </script>
 
 <template>
@@ -9,7 +9,7 @@ import { IconAdd } from '../../icon';
     <OTag>Tag1</OTag>
     <OTag>Tag2</OTag>
     <OTag>
-      <template #icon><IconAdd /></template>
+      <template #icon><OIconAdd /></template>
       Icon Tag
     </OTag>
   </section>
diff --git a/packages/portal/src/main.ts b/packages/portal/src/main.ts
index 48a5f9f8..3ac343b0 100644
--- a/packages/portal/src/main.ts
+++ b/packages/portal/src/main.ts
@@ -1,7 +1,7 @@
 import { createApp } from 'vue';
 import './style.scss';
 import 'normalize.css';
-// import '@opensig/opendesign/src/components/style';
+// import '@opensig/opendesign/src/components/icon/style';
 import '@opensig/opendesign/src/components/style/default-light.token.css';
 import '@opensig/opendesign/src/components/style/dark.token.css';
 
-- 
Gitee


From ce03fa54fa5647003043baa1fe1027edad07f3d9 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 16 May 2023 19:03:52 +0800
Subject: [PATCH 20/20] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/upload/OUpload.vue         | 201 +++++++++++++++++-
 .../components/upload/__demo__/TheIndex.vue   |   2 +
 .../upload/__demo__/UploadBasic.vue           |  33 ++-
 .../upload/__demo__/UploadSlots.vue           |  73 +++++++
 .../src/components/upload/__demo__/upload.ts  |  88 ++++++++
 .../src/components/upload/style/index.scss    |  44 ++--
 .../src/components/upload/style/index.ts      |   1 +
 .../opendesign/src/components/upload/types.ts |  70 +++++-
 8 files changed, 478 insertions(+), 34 deletions(-)
 create mode 100644 packages/opendesign/src/components/upload/__demo__/UploadSlots.vue
 create mode 100644 packages/opendesign/src/components/upload/__demo__/upload.ts

diff --git a/packages/opendesign/src/components/upload/OUpload.vue b/packages/opendesign/src/components/upload/OUpload.vue
index 404dcbc6..deacaa08 100644
--- a/packages/opendesign/src/components/upload/OUpload.vue
+++ b/packages/opendesign/src/components/upload/OUpload.vue
@@ -1,10 +1,205 @@
 <script setup lang="ts">
 import { defaultSize } from '../_shared/global';
-import { IconLoading } from '../_shared/icons';
-import { uploadProps } from './types';
+import { IconLoading, IconAdd, IconLinkPrefix, IconRefresh, IconDelete } from '../_shared/icons';
+import { uploadProps, UploadFileT } from './types';
+import OButton from '../button/OButton.vue';
+import { computed, ref } from 'vue';
+import { isFunction } from '../_shared/is';
+import { OIcon } from '../icon';
 
 const props = defineProps(uploadProps);
+
+const Label = {
+  upload: '上传文件',
+};
+const selectLabel = computed(() => {
+  if (props.selectLabel !== undefined) {
+    return props.selectLabel;
+  }
+  return Label.upload;
+});
+
+const inputRef = ref<HTMLInputElement | null>(null);
+const onSelectClick = () => {
+  inputRef.value?.click();
+};
+
+const fileList = ref<UploadFileT[]>([]);
+
+/**
+ * 发起上传请求
+ */
+const requestUploadFile = (file: UploadFileT) => {
+  if (isFunction(props.uploadRequest)) {
+    file.status = 'uploading';
+
+    file.request = props.uploadRequest({
+      file: file,
+      onProgress(percent: number) {
+        file.percent = percent;
+      },
+      onSuccess() {
+        file.status = 'finished';
+        file.retry = false;
+      },
+      onError(response?: any, retry?: boolean) {
+        file.status = 'failed';
+        file.message = response?.message;
+        file.retry = retry;
+        file.percent = 0;
+      },
+    });
+  }
+};
+
+/**
+ * 上传单个文件
+ */
+const doUploadFile = (file: UploadFileT) => {
+  if (isFunction(props.onBeforeUpload)) {
+    props.onBeforeUpload(file).then((res) => {
+      if (res === false) {
+        return;
+      }
+
+      if (res instanceof File) {
+        file.file = res;
+      }
+
+      requestUploadFile(file);
+    });
+  } else {
+    requestUploadFile(file);
+  }
+};
+
+/**
+ * 上传所有文件
+ */
+const doUpload = () => {
+  if (fileList.value.length === 0) {
+    return;
+  }
+
+  fileList.value.forEach((f) => {
+    doUploadFile(f);
+  });
+};
+
+const onInputChange = function (e: Event) {
+  const target = e.target as HTMLInputElement;
+  if (!target.files) {
+    return;
+  }
+  if (target.files.length === 0) {
+    return;
+  }
+
+  if (isFunction(props.onAfterSelect)) {
+    props.onAfterSelect(target.files).then((files) => {
+      fileList.value = files;
+
+      if (!props.lazyUpload) {
+        doUpload();
+      }
+    });
+  } else {
+    fileList.value = Array.from(target.files).map((item) => {
+      return {
+        id: item.name,
+        name: item.name,
+        file: item,
+      };
+    });
+    if (!props.lazyUpload) {
+      doUpload();
+    }
+  }
+};
+
+const onFileRemove = (file: UploadFileT) => {
+  if (isFunction(props.onBeforeRemove)) {
+    props.onBeforeRemove(file).then((res) => {
+      if (res !== false) {
+        fileList.value = fileList.value.filter((f) => f.file.name !== file.file.name);
+        if (file.request) {
+          file.request.abort();
+        }
+      }
+    });
+  }
+};
+
+const onFileUploadRetry = (file: UploadFileT) => {
+  console.log('retry file upload', file.file.name);
+  file.retry = false;
+  file.message = '';
+  doUploadFile(file);
+};
+
+defineExpose({
+  upload: doUpload,
+});
 </script>
 <template>
-  <div class="o-upload"></div>
+  <div class="o-upload">
+    <div class="o-upload-select" @click="onSelectClick">
+      <input ref="inputRef" type="file" class="o-upload-select-input" :multiple="props.multiple" @change="onInputChange" />
+      <slot name="select">
+        <OButton>
+          <template #icon><IconAdd /></template>{{ selectLabel }}
+        </OButton>
+      </slot>
+    </div>
+    <div v-if="$slots.tip" class="o-upload-tip">
+      <slot name="tip"></slot>
+    </div>
+    <div class="o-upload-file-result">
+      <div v-for="item in fileList" :key="item.id" class="o-upload-file-item">
+        <slot name="file-item" :item="item">
+          <div
+            class="o-upload-file-item-wrap"
+            :class="{
+              'is-error': item.status === 'failed',
+            }"
+          >
+            <slot name="file-item-prefix" :item="item"> </slot>
+            <div v-if="item.icon !== false" class="o-upload-icon-link">
+              <component :is="item.icon" v-if="item.icon" />
+              <IconLinkPrefix v-else />
+            </div>
+            <div class="o-upload-file-label">{{ item.name }}</div>
+            <div class="o-upload-icons">
+              <OIcon v-if="item.retry" button class="o-upload-icon o-upload-icon-retry" @click="onFileUploadRetry(item)">
+                <IconRefresh />
+              </OIcon>
+              <OIcon button class="o-upload-icon o-upload-icon-remove" @click="onFileRemove(item)">
+                <IconDelete />
+              </OIcon>
+            </div>
+
+            <OIcon v-if="props.showUploadingIcon && item.status === 'uploading'" class="o-upload-icon-loading">
+              <IconLoading class="o-rotating" />
+            </OIcon>
+            <div v-if="item.status === 'uploading'" class="o-upload-file-progress">
+              <div class="o-upload-file-progress-bar" :style="{ width: item.percent + '%' }"></div>
+            </div>
+            <slot name="file-item-suffix" :item="item"></slot>
+          </div>
+
+          <slot name="file-item-tip" :item="item">
+            <div
+              v-if="item.message"
+              class="o-upload-file-item-tip"
+              :class="{
+                'is-error': item.status === 'failed',
+              }"
+            >
+              {{ item.message }}
+            </div>
+          </slot>
+        </slot>
+      </div>
+    </div>
+  </div>
 </template>
diff --git a/packages/opendesign/src/components/upload/__demo__/TheIndex.vue b/packages/opendesign/src/components/upload/__demo__/TheIndex.vue
index 3873d2c5..1a1271a0 100644
--- a/packages/opendesign/src/components/upload/__demo__/TheIndex.vue
+++ b/packages/opendesign/src/components/upload/__demo__/TheIndex.vue
@@ -2,10 +2,12 @@
 import '../style';
 
 import UploadBasic from './UploadBasic.vue';
+import UploadSlots from './UploadSlots.vue';
 </script>
 <template>
   <div class="page-demo">
     <UploadBasic />
+    <UploadSlots />
   </div>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/upload/__demo__/UploadBasic.vue b/packages/opendesign/src/components/upload/__demo__/UploadBasic.vue
index bb7d5aec..cf7dc1fa 100644
--- a/packages/opendesign/src/components/upload/__demo__/UploadBasic.vue
+++ b/packages/opendesign/src/components/upload/__demo__/UploadBasic.vue
@@ -1,9 +1,34 @@
 <script setup lang="ts">
 import { OUpload } from '../index';
-import { IconAdd } from '../../icon';
+import { onAfterSelect, uploadRequest, onBeforeUpload, onBeforeRemove } from './upload';
 </script>
 <template>
-  <h4>Variant & Color</h4>
-  <section></section>
+  <h4>Basic</h4>
+  <section style="flex-wrap: wrap; align-items: flex-start">
+    <div class="upload-item">
+      <OUpload :on-after-select="onAfterSelect" :upload-request="uploadRequest" select-label="上传(单选)" />
+    </div>
+    <div class="upload-item">
+      <OUpload multiple select-label="上传(多选)" :on-after-select="onAfterSelect" :upload-request="uploadRequest" :on-before-upload="onBeforeUpload" />
+    </div>
+    <div class="upload-item">
+      <p>上传显示加载图标 show-uploading-icon</p>
+      <OUpload multiple :upload-request="uploadRequest" show-uploading-icon />
+    </div>
+    <div class="upload-item">
+      <p>删除前确认 onBeforeRemove</p>
+      <OUpload multiple :upload-request="uploadRequest" :on-before-upload="onBeforeUpload" :on-before-remove="onBeforeRemove" />
+    </div>
+  </section>
 </template>
-<style lang="scss"></style>
+<style lang="scss" scoped>
+p {
+  font-size: 14px;
+  margin: 16px 0 12px;
+  color: var(--o-color-info2);
+}
+.upload-item {
+  width: calc(50% - 16px);
+  flex-shrink: 0;
+}
+</style>
diff --git a/packages/opendesign/src/components/upload/__demo__/UploadSlots.vue b/packages/opendesign/src/components/upload/__demo__/UploadSlots.vue
new file mode 100644
index 00000000..d2ea67c1
--- /dev/null
+++ b/packages/opendesign/src/components/upload/__demo__/UploadSlots.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+import { OUpload, UploadFileT } from '../index';
+import { OIcon } from '../../icon';
+import { OIconDone, OIconStar, OIconCalendar } from '../../icon-svgs';
+import { uploadRequest } from './upload';
+
+const onAfterSelect2 = (fileList: FileList): Promise<UploadFileT[]> => {
+  return Promise.resolve(
+    Array.from(fileList).map((file) => {
+      return {
+        id: file.name,
+        name: file.name,
+        file: file,
+        retry: false,
+        icon: shallowRef(OIconCalendar),
+      };
+    })
+  );
+};
+</script>
+<template>
+  <h4>Slots</h4>
+  <section>
+    <div class="upload-item">
+      <p>上传说明</p>
+      <OUpload :upload-request="uploadRequest" show-uploading-icon>
+        <template #tip>这是上传说明</template>
+      </OUpload>
+    </div>
+    <div class="upload-item">
+      <p>自定义文件列表图标</p>
+      <OUpload multiple :upload-request="uploadRequest" show-uploading-icon>
+        <template #file-item-suffix="{ item }">
+          <OIcon class="diy-icon"><OIconStar /></OIcon>
+          <OIcon v-if="item.status === 'finished'" class="diy-icon done"><OIconDone /></OIcon>
+        </template>
+      </OUpload>
+    </div>
+    <div class="upload-item">
+      <p>通过slot添加文件列表前缀图标</p>
+      <OUpload multiple :upload-request="uploadRequest" show-uploading-icon>
+        <template #file-item-prefix="{ item }">
+          <OIcon class="prefix-icon" :class="item.name"><OIconStar /></OIcon>
+        </template>
+      </OUpload>
+    </div>
+    <div class="upload-item">
+      <p>通过自定义文件列表文件图标2</p>
+      <OUpload multiple :on-after-select="onAfterSelect2" :upload-request="uploadRequest" show-uploading-icon />
+    </div>
+  </section>
+</template>
+<style lang="scss" scoped>
+p {
+  font-size: 14px;
+  margin: 16px 0 12px;
+  color: var(--o-color-info2);
+}
+.upload-item {
+  width: calc(50% - 16px);
+  flex-shrink: 0;
+}
+.diy-icon {
+  margin-left: 8px;
+}
+.prefix-icon {
+  margin-right: 8px;
+}
+.done {
+  color: green;
+}
+</style>
diff --git a/packages/opendesign/src/components/upload/__demo__/upload.ts b/packages/opendesign/src/components/upload/__demo__/upload.ts
new file mode 100644
index 00000000..9d178463
--- /dev/null
+++ b/packages/opendesign/src/components/upload/__demo__/upload.ts
@@ -0,0 +1,88 @@
+import { UploadRequestOptionT, UploadFileT } from '../index';
+
+export const onAfterSelect = (fileList: FileList): Promise<UploadFileT[]> => {
+  const files: File[] = [];
+  const nofiles: string[] = [];
+  Array.from(fileList).forEach((f) => {
+    if (f.size < 1024 * 1024 * 5) {
+      files.push(f);
+    } else {
+      nofiles.push(f.name);
+    }
+  });
+
+  if (nofiles.length > 0) {
+    console.warn(`Filterd by size: ${nofiles.join(', ')}`);
+  }
+  return Promise.resolve(
+    files.map((file) => {
+      return {
+        id: file.name,
+        name: file.name,
+        file: file,
+        retry: false,
+      };
+    })
+  );
+};
+
+export const mockUpload = (file: File, onProgress: (p: number) => void, onFinished: (success: boolean) => void) => {
+  let c = 0;
+  const size = file.size;
+  const speed = Math.floor(size * 0.01);
+  const timer = setInterval(() => {
+    const r = Math.random();
+    if (r > 0.999) {
+      console.log(r);
+
+      clearInterval(timer);
+      onFinished(false);
+    } else {
+      c += speed;
+      if (c >= size) {
+        onProgress(100);
+        clearInterval(timer);
+        onFinished(true);
+      } else {
+        onProgress(Math.floor((c * 100) / size));
+      }
+    }
+  }, 200);
+  return () => {
+    clearInterval(timer);
+    onFinished(false);
+  };
+};
+
+export const uploadRequest = (options: UploadRequestOptionT) => {
+  const { onSuccess, onProgress, onError, file } = options;
+
+  const abort = mockUpload(file.file, onProgress, (success) => {
+    if (success) {
+      onSuccess(success);
+    } else {
+      onError(
+        {
+          message:
+            '上传失败上传失败上传失败上传失败上传失败上传失败上传失败上传失败上传失败上传失败上传失败上传失败上传失败上传失败上传失败上传失败上传失败上传失败上传失败上传失败上传失败上传失败上传失败上传失败上传失败上传失败上传失败',
+        },
+        true
+      );
+    }
+  });
+
+  return {
+    abort: () => {
+      abort();
+    },
+  };
+};
+
+export const onBeforeUpload = (file: UploadFileT) => {
+  return Promise.resolve(file.file);
+};
+
+export const onBeforeRemove = (file: UploadFileT) => {
+  const r = window.confirm(`确认删除文件:${file.name}`);
+  return Promise.resolve(r);
+};
diff --git a/packages/opendesign/src/components/upload/style/index.scss b/packages/opendesign/src/components/upload/style/index.scss
index e8406a4d..9e39e158 100644
--- a/packages/opendesign/src/components/upload/style/index.scss
+++ b/packages/opendesign/src/components/upload/style/index.scss
@@ -21,12 +21,6 @@
   color: var(--upload-file-item-color);
   transition: background-color var(--o-easing-standard-in) var(--o-duration-m1);
 
-  > * {
-    margin-right: 8px;
-    &:last-child {
-      margin-right: 0;
-    }
-  }
   &:hover {
     background-color: var(--upload-file-item-bg-hover);
   }
@@ -52,31 +46,35 @@
   font-size: var(--upload-icon-size);
   display: flex;
   align-items: center;
+  margin-right: 8px;
 }
 
 .o-upload-icons {
   display: flex;
   margin-left: 16px;
+  opacity: 0;
+  transition: opacity var(--o-easing-standard-in) var(--o-duration-m1);
+
+  > * + * {
+    margin-left: 8px;
+  }
 }
-.o-upload-icon-retry,
-.o-upload-icon-delete {
-  font-size: var(--upload-icon-size);
-  color: var(--o-color-info2);
+
+.o-upload-icon {
   display: flex;
   align-items: center;
-}
-.o-upload-icons {
-  opacity: 0;
-  transition: opacity var(--o-easing-standard-in) var(--o-duration-m1);
+  justify-content: center;
 }
 .o-upload-icon-retry,
-.o-upload-icon-delete {
-  cursor: pointer;
-  &:hover {
-    color: var(--o-color-primary1);
-  }
+.o-upload-icon-remove {
+  font-size: var(--upload-icon-size);
+  display: flex;
+  align-items: center;
 }
 
+.o-upload-icon-loading {
+  margin-left: 8px;
+}
 .o-upload-tip {
   font-size: var(--o-font_size-tip1);
   line-height: var(--o-line_height-tip1);
@@ -88,19 +86,22 @@
   line-height: var(--o-line_height-tip1);
   color: var(--o-color-info1);
   display: flex;
+  padding-left: 24px;
   &.is-error {
     color: var(--o-color-danger1);
   }
 }
 .o-upload-icon-error {
+  margin-top: 1px;
   color: var(--o-color-danger1);
   margin-right: 8px;
+  font-size: var(--upload-icon-size);
 }
 
 .o-upload-file-progress {
   position: absolute;
-  left: 0;
-  right: 0;
+  left: 4px;
+  right: 4px;
   bottom: 0;
   height: var(--upload-progress-height);
   background-color: var(--upload-progress-bg-color);
@@ -108,6 +109,7 @@
   overflow: hidden;
 }
 .o-upload-file-progress-bar {
+  width: 0%;
   height: 100%;
   background-color: var(--upload-progress-value-bg-color);
   border-radius: var(--upload-progress-radius);
diff --git a/packages/opendesign/src/components/upload/style/index.ts b/packages/opendesign/src/components/upload/style/index.ts
index 11305877..da24215e 100644
--- a/packages/opendesign/src/components/upload/style/index.ts
+++ b/packages/opendesign/src/components/upload/style/index.ts
@@ -1,4 +1,5 @@
 import '../../style';
 import '../../button/style';
 import '../../popover/style';
+import '../../icon/style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/upload/types.ts b/packages/opendesign/src/components/upload/types.ts
index 3b56e65d..2ebe0c70 100644
--- a/packages/opendesign/src/components/upload/types.ts
+++ b/packages/opendesign/src/components/upload/types.ts
@@ -1,6 +1,28 @@
 import { ExtractPropTypes, PropType } from 'vue';
 import { SizeT, RoundT, ColorT, VariantT } from '../_shared/types';
 
+export interface UploadRequestT {
+  abort: () => void; // 取消上传
+}
+
+export interface UploadFileT {
+  id: string;
+  name: string;
+  file: File; // 上传文件
+  status?: 'pending' | 'uploading' | 'finished' | 'failed'; // 校验/上传结果
+  message?: string; // 提示
+  retry?: boolean; // 是否重新上传
+  percent?: number; // 上传进度 0~100,
+  request?: UploadRequestT;
+  icon?: any;
+}
+export interface UploadRequestOptionT {
+  onProgress: (percent: number, event?: ProgressEvent) => void;
+  onSuccess: (response?: any) => void;
+  onError: (response?: any, retry?: boolean) => void;
+  file: UploadFileT;
+}
+
 export const uploadProps = {
   /**
    * 颜色类型 ColorT
@@ -29,23 +51,59 @@ export const uploadProps = {
     type: String as PropType<RoundT>,
   },
   /**
-   * 是否为loading状态
+   * 是否为禁用状态
    */
-  loading: {
+  disabled: {
     type: Boolean,
   },
   /**
-   * 是否为禁用状态
+   * 是否支持多选
    */
-  disabled: {
+  multiple: {
     type: Boolean,
   },
   /**
-   * 链接跳转
+   * 选择后触发
    */
-  href: {
+  onAfterSelect: {
+    type: Function as PropType<(fileList: FileList) => Promise<Array<UploadFileT>>>,
+  },
+  /**
+   * 选择按钮文本
+   */
+  selectLabel: {
     type: String,
   },
+  /**
+   * 自定义上传请求
+   */
+  uploadRequest: {
+    type: Function as PropType<(options: UploadRequestOptionT) => UploadRequestT>,
+  },
+  /**
+   * true 选择完成后，手动触发上传；false 选择完成后自动上传
+   */
+  lazyUpload: {
+    type: Boolean,
+  },
+  /**
+   * 上传前触发
+   */
+  onBeforeUpload: {
+    type: Function as PropType<(file: UploadFileT) => Promise<boolean | File>>,
+  },
+  /**
+   * 删除前触发
+   */
+  onBeforeRemove: {
+    type: Function as PropType<(file: UploadFileT) => Promise<boolean>>,
+  },
+  /**
+   * 是否显示上传loading图标
+   */
+  showUploadingIcon: {
+    type: Boolean,
+  },
 };
 
 export type UploadPropsT = ExtractPropTypes<typeof uploadProps>;
-- 
Gitee