From c35566ded3fd78f71a0e9a55824147af4b79365c Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 7 Feb 2023 11:39:44 +0800
Subject: [PATCH 1/9] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/input/OInput.vue           | 10 ++-
 .../components/input/__demo__/InputBasic.vue  |  7 +++
 .../components/input/__demo__/InputMethod.vue |  3 +-
 .../components/input/__demo__/InputSlot.vue   |  2 +-
 .../src/components/input/provide.ts           |  6 ++
 .../src/components/input/style/index.scss     | 62 ++++++++++++++-----
 .../src/components/input/style/var.scss       | 12 ++++
 7 files changed, 81 insertions(+), 21 deletions(-)
 create mode 100644 packages/opendesign/src/components/input/provide.ts

diff --git a/packages/opendesign/src/components/input/OInput.vue b/packages/opendesign/src/components/input/OInput.vue
index cb46b01d..4cff5ce4 100644
--- a/packages/opendesign/src/components/input/OInput.vue
+++ b/packages/opendesign/src/components/input/OInput.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue';
+import { ref, computed } from 'vue';
 import { defaultSize, defaultShape, SizeT, ShapeT } from '../_shared/global';
 import { isFunction, isNull, isUndefined } from '../_shared/is';
 import { IconX } from '../icons';
@@ -24,6 +24,10 @@ interface InputPropT {
    * 提示文本
    */
   placeholder?: string;
+  /**
+   * 状态，显示指定，用于非表单场景
+   */
+  status?: 'success' | 'warning' | 'error';
   /**
    * 是否禁用
    */
@@ -59,6 +63,7 @@ const props = withDefaults(defineProps<InputPropT>(), {
   clearable: true,
   parse: undefined,
   format: undefined,
+  status: undefined,
 });
 
 const emits = defineEmits<{
@@ -81,6 +86,8 @@ const displayValue = computed(() => {
   return isFunction(props.format) ? props.format(currentValue.value) : currentValue.value;
 });
 
+const status = ref<undefined | 'warning' | 'warn' | 'error'>();
+
 const isFocus = ref(false);
 
 function updateValue(val: string) {
@@ -142,6 +149,7 @@ const clearClick = (e: Event) => {
   <label
     class="o-input"
     :class="[
+      `is-${status || props.status}`,
       `o-input-size-${props.size || defaultSize}`,
       `o-input-shape-${props.shape || defaultShape}`,
       {
diff --git a/packages/opendesign/src/components/input/__demo__/InputBasic.vue b/packages/opendesign/src/components/input/__demo__/InputBasic.vue
index e883ae21..cd120a7e 100644
--- a/packages/opendesign/src/components/input/__demo__/InputBasic.vue
+++ b/packages/opendesign/src/components/input/__demo__/InputBasic.vue
@@ -38,6 +38,13 @@ const printEvent = (event: string, val?: string | number) => {
     <OInput v-model:value="val2" />
     <OInput v-model:value="val3" size="large" />
   </section>
+  <h4>Status</h4>
+  <section>
+    <div>val1:{{ val1 }}</div>
+    <OInput v-model:value="val2" status="success" />
+    <OInput v-model:value="val2" status="warning" />
+    <OInput v-model:value="val2" status="error" />
+  </section>
   <h4>Disabled</h4>
   <section>
     <div>val1:{{ val1 }}</div>
diff --git a/packages/opendesign/src/components/input/__demo__/InputMethod.vue b/packages/opendesign/src/components/input/__demo__/InputMethod.vue
index 3d4f898e..f9098f9e 100644
--- a/packages/opendesign/src/components/input/__demo__/InputMethod.vue
+++ b/packages/opendesign/src/components/input/__demo__/InputMethod.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { OInput } from '../index';
-import { IconDone } from '../../icons';
 
 const val1 = ref('');
 const val2 = ref('this is input value');
@@ -9,7 +8,7 @@ const format = (val: string | number) => (val ? `$${val}` : '');
 const parse = (val: string) => val.replace(/^\$/g, '');
 </script>
 <template>
-  <h4>Format</h4>
+  <h4>Parse & Format</h4>
   <section>
     <div>val1:{{ val1 }}</div>
     <OInput v-model:value="val2" :format="format" :parse="parse" />
diff --git a/packages/opendesign/src/components/input/__demo__/InputSlot.vue b/packages/opendesign/src/components/input/__demo__/InputSlot.vue
index 846b883a..74f2f484 100644
--- a/packages/opendesign/src/components/input/__demo__/InputSlot.vue
+++ b/packages/opendesign/src/components/input/__demo__/InputSlot.vue
@@ -21,7 +21,7 @@ const val2 = ref('this is input value');
         <IconDone />
       </template>
     </OInput>
-    <OInput v-model:value="val2" :clearable="false">
+    <OInput v-model:value="val2">
       <template #suffix> 元 </template>
     </OInput>
   </section>
diff --git a/packages/opendesign/src/components/input/provide.ts b/packages/opendesign/src/components/input/provide.ts
new file mode 100644
index 00000000..dadbbb51
--- /dev/null
+++ b/packages/opendesign/src/components/input/provide.ts
@@ -0,0 +1,6 @@
+import { InjectionKey } from 'vue';
+
+export const tabsInjectKey: InjectionKey<{
+  validator: (value: string | number) => boolean
+}> = Symbol('provide-form-item');
+
diff --git a/packages/opendesign/src/components/input/style/index.scss b/packages/opendesign/src/components/input/style/index.scss
index e362c3a9..e6f54190 100644
--- a/packages/opendesign/src/components/input/style/index.scss
+++ b/packages/opendesign/src/components/input/style/index.scss
@@ -61,19 +61,48 @@
     border-color: var(--input-border-hover);
     background-color: var(--input-bg-hover);
   }
-  .o-input.is-focus & {
-    border-color: var(--input-border-active);
-    background-color: var(--input-bg-active);
+
+  &.has-prepend {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
   }
-  .o-input.is-disabled & {
-    color: var(--input-color-disabled);
-    cursor: not-allowed;
-    border-color: var(--input-border-disabled);
-    background-color: var(--input-bg-disabled);
+  &.has-append {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
   }
+}
+.o-input {
+  &:not(.is-disabled) {
+    &.is-success {
+      color: var(--input-success);
+      .o-input-wrap {
+        border-color: var(--input-border-success);
+        background-color: var(--input-bg-success);
+      }
+    }
+    &.is-warning {
+      color: var(--input-warning);
+      .o-input-wrap {
+        border-color: var(--input-border-warning);
+        background-color: var(--input-bg-warning);
+      }
+    }
+    &.is-error {
+      color: var(--input-error);
+      .o-input-wrap {
+        border-color: var(--input-border-error);
+        background-color: var(--input-bg-error);
+      }
+    }
+
+    &.is-focus {
+      .o-input-wrap {
+        border-color: var(--input-border-active);
+        background-color: var(--input-bg-active);
+      }
+    }
 
-  .o-input:not(.is-disabled) & {
-    &.clearable {
+    .o-input-wrap.clearable {
       &.has-suffix {
         .o-input-clear {
           position: absolute;
@@ -97,13 +126,12 @@
       }
     }
   }
-  &.has-prepend {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-  &.has-append {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+
+  &.is-disabled .o-input-wrap {
+    color: var(--input-color-disabled);
+    cursor: not-allowed;
+    border-color: var(--input-border-disabled);
+    background-color: var(--input-bg-disabled);
   }
 }
 
diff --git a/packages/opendesign/src/components/input/style/var.scss b/packages/opendesign/src/components/input/style/var.scss
index 68300ef2..c4972c06 100644
--- a/packages/opendesign/src/components/input/style/var.scss
+++ b/packages/opendesign/src/components/input/style/var.scss
@@ -28,4 +28,16 @@
   --input-color-disabled: var(--o-color-text4);
 
   --input-icon-color: var(--o-color-text3);
+
+  --input-border-success: var(--o-color-success1);
+  --input-border-warning: var(--o-color-warning1);
+  --input-border-error: var(--o-color-danger1);
+
+  --input-bg-success: var(--o-color-bg1);
+  --input-bg-warning: var(--o-color-bg1);
+  --input-bg-error: var(--o-color-bg1);
+
+  --input-color-success: var(--o-color-text2);
+  --input-color-warning: var(--o-color-text2);
+  --input-color-error: var(--o-color-text2);
 }
-- 
Gitee


From b4a8e6d8d48b155263c07b4ebcfd134313410137 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 8 Feb 2023 10:14:19 +0800
Subject: [PATCH 2/9] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=95=B0=E5=AD=97?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../input-number/NumberControls.vue           |   0
 .../components/input-number/OInputNumber.vue  | 229 ++++++++++--------
 .../__demo__/IndexInputNumber.vue             |   2 +
 .../__demo__/InputNumberBasic.vue             |  81 ++++---
 .../__demo__/InputNumberEvent.vue             |  30 +++
 .../input-number/__demo__/InputNumberSlot.vue |  20 +-
 .../components/input-number/input-number.ts   |  16 ++
 .../components/input-number/style/index.scss  |  47 +++-
 .../components/input-number/style/var.scss    |  32 +--
 .../src/components/input/OInput.vue           |  63 +++--
 .../components/input/__demo__/IndexInput.vue  |   2 +
 .../components/input/__demo__/InputBasic.vue  |  47 ++--
 .../components/input/__demo__/InputEvent.vue  |  32 +++
 .../components/input/__demo__/InputMethod.vue |   2 +-
 .../components/input/__demo__/InputSlot.vue   |  12 +-
 .../src/components/input/style/index.scss     |  66 ++++-
 packages/portal/src/style.scss                |   7 +
 17 files changed, 459 insertions(+), 229 deletions(-)
 create mode 100644 packages/opendesign/src/components/input-number/NumberControls.vue
 create mode 100644 packages/opendesign/src/components/input-number/__demo__/InputNumberEvent.vue
 create mode 100644 packages/opendesign/src/components/input-number/input-number.ts
 create mode 100644 packages/opendesign/src/components/input/__demo__/InputEvent.vue

diff --git a/packages/opendesign/src/components/input-number/NumberControls.vue b/packages/opendesign/src/components/input-number/NumberControls.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/opendesign/src/components/input-number/OInputNumber.vue b/packages/opendesign/src/components/input-number/OInputNumber.vue
index 2dcd107a..1e556c44 100644
--- a/packages/opendesign/src/components/input-number/OInputNumber.vue
+++ b/packages/opendesign/src/components/input-number/OInputNumber.vue
@@ -1,17 +1,25 @@
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue';
+import { ref, watch } from 'vue';
 import { defaultSize, defaultShape, SizeT, ShapeT } from '../_shared/global';
-import { isNull, isUndefined } from '../_shared/is';
-import { IconX } from '../icons';
-import { trigger } from '../_shared/event';
-import { Enter } from '../_shared/keycode';
+import { IconMinus, IconAdd } from '../icons';
+import { OInput } from '../input';
+import { isNumberString, getInputValueString, getRealValue } from './input-number';
 
 interface InputPropT {
   /**
    * 下拉框的值
    * v-model
    */
-  value: string | number;
+  modelValue?: string | number;
+  /**
+   * 下拉框的默认值
+   * 非受控
+   */
+  defaultValue?: string | number;
+  /**
+   * 大小
+   */
+  step?: number;
   /**
    * 大小
    */
@@ -24,6 +32,10 @@ interface InputPropT {
    * 提示文本
    */
   placeholder?: string;
+  /**
+   * 状态，显示指定，用于非表单场景
+   */
+  status?: 'success' | 'warning' | 'error';
   /**
    * 是否禁用
    */
@@ -31,147 +43,154 @@ interface InputPropT {
   /**
    * 是否只读
    */
-  readonly?: false;
+  readonly?: boolean;
   /**
    * 是否可以清除
    */
   clearable?: boolean;
+
+  /**
+   * 控制按钮位置
+   */
+  controls?: 'default' | 'right' | 'left' | 'none';
+  /**
+   * 是否在输入合法时，更新modelvalue
+   */
+  updateOnInput?: boolean;
+  /**
+   * 解析输入框的值
+   */
+  parse?: (value: string) => string;
+  /**
+   * 对值格式化，控制显示格式
+   * 需搭配parse处理，保证值的正确性
+   */
+  format?: (value: string | number) => string | number;
 }
 const props = withDefaults(defineProps<InputPropT>(), {
-  value: '',
+  modelValue: undefined,
+  defaultValue: '',
+  step: 1,
   size: undefined,
   shape: undefined,
   placeholder: '',
   clearable: true,
+  parse: undefined,
+  format: undefined,
+  status: undefined,
+  controls: 'default',
+  updateOnInput: true,
 });
 
 const emits = defineEmits<{
-  (e: 'update:value', value: string | number): void;
+  (e: 'update:modelValue', value: string | number): void;
   (e: 'change', value: string | number): void;
   (e: 'input', value: string | number, evt: Event): void;
   (e: 'blur', value: string | number, evt: FocusEvent): void;
   (e: 'focus', value: string | number, evt: FocusEvent): void;
-  (e: 'clear', evt: Event): void;
   (e: 'pressEnter', value: string | number, evt: Event): void;
+  (e: 'update:value', value: string | number, evt: Event): void;
 }>();
 
-const currentValue = ref(props.value);
-const isFocus = ref(false);
-
-function updateValue(val: string) {
-  currentValue.value = val;
-
-  emits('change', val);
-  emits('update:value', val);
-}
+const currentValue = ref<number | string>(getInputValueString(props.modelValue ?? props.defaultValue));
 
 watch(
-  () => props.value,
+  () => props.modelValue,
   (val) => {
-    if (isNull(val) || isUndefined(val)) {
-      currentValue.value = '';
-    }
-    if (currentValue.value !== val) {
-      currentValue.value = val;
-      emits('change', val);
-    }
+    currentValue.value = getInputValueString(val);
   }
 );
 
-// 正在输入中文，处理输入过程中触发input事件
-let isComposing = false;
+let realValue = getRealValue(currentValue.value);
+
+const isValid = ref(isNumberString(currentValue.value));
+let lastValidValue: number | string = '';
 
-const onInput = (e: Event) => {
-  if (isComposing) {
-    return;
+const parseValue = (val: string | number) => {
+  if (!isValid.value) {
+    currentValue.value = lastValidValue;
+  } else {
+    realValue = Number(val);
+    if (realValue !== currentValue.value) {
+      currentValue.value = realValue;
+
+      emits('update:modelValue', realValue);
+      emits('change', realValue);
+    }
   }
-  const val = (e.target as HTMLInputElement)?.value;
-  updateValue(val);
-  emits('input', currentValue.value, e);
+  isValid.value = true;
 };
+const updateValue = (val: string | number) => {
+  isValid.value = isNumberString(val);
+  currentValue.value = val;
 
-const onCompositionStart = () => {
-  isComposing = true;
-};
-const onCompositionEnd = (e: Event) => {
-  if (!isComposing) {
-    return;
+  if (isValid.value && props.updateOnInput) {
+    parseValue(val);
   }
-
-  isComposing = false;
-  trigger(e.target as HTMLElement, 'input');
 };
 
-const onFocus = (e: FocusEvent) => {
-  isFocus.value = true;
-  emits('focus', currentValue.value, e);
+const onInput = (val: string | number, evt: Event) => {
+  emits('input', val, evt);
 };
 
-const onBlur = (e: FocusEvent) => {
-  isFocus.value = false;
-  emits('blur', currentValue.value, e);
+const onFocus = (val: string | number, evt: FocusEvent) => {
+  lastValidValue = currentValue.value;
+  emits('focus', realValue, evt);
 };
-
-const onKeyDown = (e: KeyboardEvent) => {
-  const keyCode = e.key || e.code;
-  if (!isComposing && keyCode === Enter.key) {
-    emits('pressEnter', currentValue.value, e);
-  }
+const onBlur = (val: string | number, evt: FocusEvent) => {
+  parseValue(val);
+  emits('blur', realValue, evt);
+};
+const onPressEnter = (val: string | number, evt: FocusEvent) => {
+  parseValue(val);
+  emits('pressEnter', realValue, evt);
 };
 
-const clearClick = (e: Event) => {
-  updateValue('');
-  emits('clear', e);
+const constrolClick = (type: 'plus' | 'minus') => {
+  if (type === 'plus') {
+    realValue += props.step;
+  } else {
+    realValue -= props.step;
+  }
+  parseValue(realValue);
 };
 </script>
 <template>
-  <label
-    class="o-input"
-    :class="[
-      `o-input-size-${props.size || defaultSize}`,
-      `o-input-shape-${props.shape || defaultShape}`,
-      {
-        'is-disabled': props.disabled,
-        'is-focus': isFocus,
-      },
-    ]"
+  <OInput
+    :model-value="currentValue"
+    class="o-input-number"
+    :class="[`o-input-number-size-${props.size || defaultSize}`, { 'is-invalid': !isValid }]"
+    :size="props.size"
+    :shape="props.shape"
+    :placeholder="props.placeholder"
+    :status="props.status"
+    :disabled="props.disabled"
+    :readonly="props.readonly"
+    :clearable="false"
+    :parse="props.parse"
+    :format="props.format"
+    @input="onInput"
+    @blur="onBlur"
+    @focus="onFocus"
+    @press-enter="onPressEnter"
+    @update:model-value="updateValue"
   >
-    <span v-if="$slots.prepend" class="o-input-prepend">
-      <slot name="prepend"></slot>
-    </span>
-    <div
-      class="o-input-wrap"
-      :class="{
-        'has-suffix': $slots.suffix,
-        clearable: props.clearable && props.value !== '',
-        'has-prepend': $slots.prepend,
-        'has-append': $slots.append,
-      }"
-    >
-      <div v-if="$slots.prefix" class="o-input-prefix">
-        <slot name="prefix"></slot>
+    <template v-if="['default', 'left'].includes(props.controls)" #prepend>
+      <div class="o-input-number-btn" @click="constrolClick('minus')">
+        <slot name="control-left"><IconMinus /></slot>
       </div>
-      <input
-        :value="props.value ?? currentValue"
-        :placeholder="props.placeholder"
-        class="o-input-input"
-        :readonly="props.readonly || props.disabled"
-        @focus="onFocus"
-        @blur="onBlur"
-        @input="onInput"
-        @keydown="onKeyDown"
-        @compositionstart="onCompositionStart"
-        @compositionend="onCompositionEnd"
-      />
-      <div v-if="props.clearable || $slots.suffix" class="o-input-suffix">
-        <div v-if="props.clearable" class="o-input-clear" @click="clearClick"><IconX class="o-input-clear-icon" /></div>
-        <span v-if="$slots.suffix" class="o-input-suffix-wrap">
-          <slot name="suffix"></slot>
-        </span>
+    </template>
+    <template v-if="['default', 'right'].includes(props.controls)" #append>
+      <div class="o-input-number-btn" @click="constrolClick('plus')">
+        <slot name="control-right"><IconAdd /></slot>
       </div>
-    </div>
-    <span v-if="$slots.append" class="o-input-append">
-      <slot name="append"></slot>
-    </span>
-  </label>
+    </template>
+    <template v-if="$slots.prefix" #prefix>
+      <slot name="prefix"></slot>
+    </template>
+
+    <template v-if="$slots.suffix" #suffix>
+      <slot name="suffix"></slot>
+    </template>
+  </OInput>
 </template>
diff --git a/packages/opendesign/src/components/input-number/__demo__/IndexInputNumber.vue b/packages/opendesign/src/components/input-number/__demo__/IndexInputNumber.vue
index f43868a0..fbbf8d79 100644
--- a/packages/opendesign/src/components/input-number/__demo__/IndexInputNumber.vue
+++ b/packages/opendesign/src/components/input-number/__demo__/IndexInputNumber.vue
@@ -3,11 +3,13 @@ import '../style';
 import '../../option/style';
 
 import InputNumberBasic from './InputNumberBasic.vue';
+import InputNumberEvent from './InputNumberEvent.vue';
 import InputNumberSlot from './InputNumberSlot.vue';
 </script>
 <template>
   <div class="page-demo">
     <InputNumberBasic />
+    <InputNumberEvent />
     <InputNumberSlot />
   </div>
 </template>
diff --git a/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue b/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue
index 87cbc963..e03300c2 100644
--- a/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue
+++ b/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue
@@ -1,57 +1,66 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { OInputNumber } from '../index';
-import { IconDone } from '../../icons';
 
-const val1 = ref('');
-const val2 = ref('this is input value');
-const val3 = ref(`${12345}`);
-const val4 = ref(12345);
+const val1 = ref(0);
 setTimeout(() => {
-  val2.value += '---';
+  val1.value = 3;
 }, 2000);
-
-const printEvent = (event: string, val?: string | number) => {
-  console.log(event, val);
-};
+const val2 = ref(100);
+const val3 = ref(3333);
 </script>
 <template>
   <h4>Basic</h4>
+  <div>val1:{{ val1 }}</div>
   <section>
-    <div>val1:{{ val1 }}</div>
-    <OInputNumber v-model:value="val1" />
-    <OInputNumber
-      v-model:value="val2"
-      @blur="() => printEvent('blur')"
-      @change="(v) => printEvent('change', v)"
-      @input="(v) => printEvent('input', v)"
-      @focus="printEvent('focus')"
-      @press-enter="(v) => printEvent('press-enter', v)"
-    />
-    <OInputNumber v-model:value="val3" />
+    <div class="col">
+      v-model:
+      <OInputNumber v-model="val1" style="width: 150px" />
+    </div>
+    <div class="col">
+      model-value:
+      <OInputNumber :model-value="val1" style="width: 150px" />
+    </div>
+    <div class="col">
+      default-value:
+      <OInputNumber :default-value="val1" style="width: 150px" />
+    </div>
+  </section>
+  <section>
+    <div class="col">
+      readonly:
+      <OInputNumber v-model="val1" readonly />
+    </div>
+    <div class="col">
+      controls none:
+      <OInputNumber v-model="val1" controls="none" />
+    </div>
   </section>
   <h4>Size</h4>
+  <div>val1:{{ val2 }}</div>
   <section>
-    <div>val1:{{ val1 }}</div>
-    <OInputNumber v-model:value="val2" size="small" />
-    <OInputNumber v-model:value="val2" />
-    <OInputNumber v-model:value="val3" size="large" />
+    <OInputNumber v-model="val2" size="small" />
+    <OInputNumber v-model="val2" />
+    <OInputNumber v-model="val3" size="large" />
+  </section>
+  <h4>Shape</h4>
+  <section>
+    <OInputNumber v-model="val2" size="small" shape="round" />
+    <OInputNumber v-model="val2" shape="round" />
+    <OInputNumber v-model="val3" size="large" shape="round" />
+
+    <OInputNumber v-model="val2" size="small" shape="round" controls="none" />
+    <OInputNumber v-model="val2" shape="round" controls="none" />
+    <OInputNumber v-model="val3" size="large" shape="round" controls="none" />
   </section>
   <h4>Disabled</h4>
   <section>
     <div>val1:{{ val1 }}</div>
-    <OInputNumber v-model:value="val2" disabled />
-    <OInputNumber v-model:value="val2" disabled>
-      <template #prefix>
-        <IconDone />
-      </template>
-    </OInputNumber>
-    <OInputNumber v-model:value="val2" disabled>
-      <template #suffix>
-        <IconDone />
-      </template>
+    <OInputNumber v-model="val2" disabled />
+    <OInputNumber v-model="val2" disabled>
+      <template #prefix>$</template>
     </OInputNumber>
-    <OInputNumber v-model:value="val2" :clearable="false" disabled>
+    <OInputNumber v-model="val2" disabled style="width: 150px">
       <template #suffix> 元 </template>
     </OInputNumber>
   </section>
diff --git a/packages/opendesign/src/components/input-number/__demo__/InputNumberEvent.vue b/packages/opendesign/src/components/input-number/__demo__/InputNumberEvent.vue
new file mode 100644
index 00000000..345b8efa
--- /dev/null
+++ b/packages/opendesign/src/components/input-number/__demo__/InputNumberEvent.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OInputNumber } from '../index';
+
+const val1 = ref(0);
+const event = ref('--');
+
+const printEvent = (evt: string, val?: string | number) => {
+  console.log(evt, val);
+  event.value = evt;
+};
+</script>
+<template>
+  <h4>Event</h4>
+  <div>val1:{{ val1 }}</div>
+  <section>
+    <div>
+      <OInputNumber
+        v-model="val1"
+        @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)"
+      />
+      value: {{ val1 }}; event:{{ event }};
+    </div>
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/input-number/__demo__/InputNumberSlot.vue b/packages/opendesign/src/components/input-number/__demo__/InputNumberSlot.vue
index 174543b7..96555d07 100644
--- a/packages/opendesign/src/components/input-number/__demo__/InputNumberSlot.vue
+++ b/packages/opendesign/src/components/input-number/__demo__/InputNumberSlot.vue
@@ -1,27 +1,21 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { OInputNumber } from '../index';
-import { IconDone } from '../../icons';
 
 const val1 = ref('');
-const val2 = ref('this is input value');
+const val2 = ref(1000);
 </script>
 <template>
   <h4>Prefix & Suffix</h4>
   <section>
-    <div>val1:{{ val1 }}</div>
-    <OInputNumber v-model:value="val2" />
-    <OInputNumber v-model:value="val2">
-      <template #prefix>
-        <IconDone />
-      </template>
+    <OInputNumber v-model:value="val1" style="width: 150px">
+      <template #control-left>Plus</template>
+      <template #control-right>Minus</template>
     </OInputNumber>
-    <OInputNumber v-model:value="val2">
-      <template #suffix>
-        <IconDone />
-      </template>
+    <OInputNumber v-model:value="val2" style="width: 150px">
+      <template #prefix> $ </template>
     </OInputNumber>
-    <OInputNumber v-model:value="val2" :clearable="false">
+    <OInputNumber v-model:value="val2" :clearable="false" style="width: 150px">
       <template #suffix> 元 </template>
     </OInputNumber>
   </section>
diff --git a/packages/opendesign/src/components/input-number/input-number.ts b/packages/opendesign/src/components/input-number/input-number.ts
new file mode 100644
index 00000000..3315aa14
--- /dev/null
+++ b/packages/opendesign/src/components/input-number/input-number.ts
@@ -0,0 +1,16 @@
+import { isNumber } from '../_shared/is';
+
+export function isNumberString(val: string | number | undefined) {
+  if (isNumber(val) || !val || isNumber(Number(val))) {
+    return true;
+  }
+  return false;
+}
+
+export function getInputValueString(val: string | number | undefined) {
+  return isNumberString(val) ? Number(val) : '';
+}
+
+export function getRealValue(val: string | number) {
+  return isNumberString(val) ? Number(val) : 0;
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/components/input-number/style/index.scss b/packages/opendesign/src/components/input-number/style/index.scss
index 691856eb..6dd01e28 100644
--- a/packages/opendesign/src/components/input-number/style/index.scss
+++ b/packages/opendesign/src/components/input-number/style/index.scss
@@ -2,7 +2,48 @@
 @import '../../input/style/index.scss';
 
 .o-input-number {
-  cursor: pointer;
-  color: var(--input-color);
-  display: inline-flex;
+  .o-input-prepend,
+  .o-input-append {
+    font-size: 14px;
+
+    &:hover {
+      color: var(--input-number-btn-color);
+    }
+  }
+
+  &.is-disabled {
+    .o-input-prepend,
+    .o-input-append {
+      background-color: var(--input-number-btn-bg-disabled);
+      color: var(--input-number-btn-color-disabled);
+    }
+  }
+  &.is-invalid {
+    .o-input-input {
+      text-decoration: line-through;
+    }
+  }
+}
+.o-input-number-btn {
+  user-select: none;
+}
+.o-input-number-size-small {
+  width: 90px;
+  .o-input-number-btn {
+    // padding: 0 4px;
+  }
+}
+.o-input-number-size-normal {
+  width: 120px;
+
+  .o-input-number-btn {
+    // padding: 0 8px;
+  }
+}
+.o-input-number-size-large {
+  width: 160px;
+
+  .o-input-number-btn {
+    // padding: 0 12px;
+  }
 }
diff --git a/packages/opendesign/src/components/input-number/style/var.scss b/packages/opendesign/src/components/input-number/style/var.scss
index 4423942f..b57e42a5 100644
--- a/packages/opendesign/src/components/input-number/style/var.scss
+++ b/packages/opendesign/src/components/input-number/style/var.scss
@@ -1,31 +1,5 @@
 .o-input-number {
-  --input-text-size-s: var(--o-font_size-tip1);
-  --input-text-height-s: var(--o-line_height-tip1);
-  --input-text-size-m: var(--o-font_size-text);
-  --input-text-height-m: var(--o-line_height-text);
-  --input-text-size-l: var(--o-font_size-h4);
-  --input-text-height-l: var(--o-line_height-h4);
-
-  --input-height-s: var(--o-size-s);
-  --input-height-m: var(--o-size-m);
-  --input-height-l: var(--o-size-l);
-
-  --input-radius-s: var(--o-radius-s);
-  --input-radius-m: var(--o-radius-s);
-  --input-radius-l: var(--o-radius-s);
-
-  --input-border: var(--o-color-info1);
-  --input-border-hover: var(--o-color-primary2);
-  --input-border-active: var(--o-color-primary3);
-  --input-border-disabled: var(--o-color-info1);
-
-  --input-bg: var(--o-color-bg1);
-  --input-bg-hover: var(--o-color-bg3);
-  --input-bg-active: var(--o-color-bg3);
-  --input-bg-disabled: var(--o-color-info4);
-
-  --input-color: var(--o-color-text2);
-  --input-color-disabled: var(--o-color-text4);
-
-  --input-icon-color: var(--o-color-text3);
+  --input-number-btn-color: var(--o-color-primary1);
+  --input-number-btn-bg-disabled: var(--o-color-info4);
+  --input-number-btn-color-disabled: var(--o-color-text4);
 }
diff --git a/packages/opendesign/src/components/input/OInput.vue b/packages/opendesign/src/components/input/OInput.vue
index 4cff5ce4..521e1770 100644
--- a/packages/opendesign/src/components/input/OInput.vue
+++ b/packages/opendesign/src/components/input/OInput.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, nextTick } from 'vue';
 import { defaultSize, defaultShape, SizeT, ShapeT } from '../_shared/global';
 import { isFunction, isNull, isUndefined } from '../_shared/is';
 import { IconX } from '../icons';
@@ -11,7 +11,12 @@ interface InputPropT {
    * 下拉框的值
    * v-model
    */
-  value: string | number;
+  modelValue?: string | number;
+  /**
+   * 下拉框的默认值
+   * 非受控
+   */
+  defaultValue?: string | number;
   /**
    * 大小
    */
@@ -35,7 +40,7 @@ interface InputPropT {
   /**
    * 是否只读
    */
-  readonly?: false;
+  readonly?: boolean;
   /**
    * 是否可以清除
    */
@@ -55,7 +60,8 @@ interface InputPropT {
   format?: (value: string | number) => string | number;
 }
 const props = withDefaults(defineProps<InputPropT>(), {
-  value: '',
+  modelValue: undefined,
+  defaultValue: '',
   size: undefined,
   shape: undefined,
   placeholder: '',
@@ -67,7 +73,7 @@ const props = withDefaults(defineProps<InputPropT>(), {
 });
 
 const emits = defineEmits<{
-  (e: 'update:value', value: string | number): void;
+  (e: 'update:modelValue', value: string | number): void;
   (e: 'change', value: string | number): void;
   (e: 'input', value: string | number, evt: Event): void;
   (e: 'blur', value: string | number, evt: FocusEvent): void;
@@ -76,39 +82,47 @@ const emits = defineEmits<{
   (e: 'pressEnter', value: string | number, evt: Event): void;
 }>();
 
+const inputRef = ref<HTMLElement | null>(null);
 // 输入框值
-const currentValue = ref(props.value);
+const currentValue = ref(props.defaultValue);
+const computedValue = computed(() => {
+  return props.modelValue ?? currentValue.value;
+});
+
 // 输入框显示的字符串
 const displayValue = computed(() => {
-  if (isNull(currentValue.value) || isUndefined(currentValue.value)) {
+  if (isNull(computedValue.value) || isUndefined(computedValue.value)) {
     return '';
   }
-  return isFunction(props.format) ? props.format(currentValue.value) : currentValue.value;
+  return isFunction(props.format) ? props.format(computedValue.value) : computedValue.value;
 });
 
 const status = ref<undefined | 'warning' | 'warn' | 'error'>();
+const statusClass = computed(() => (status.value || props.status ? `is-${status.value || props.status}` : ''));
 
 const isFocus = ref(false);
 
 function updateValue(val: string) {
   currentValue.value = isFunction(props.parse) ? props.parse(val) : val;
 
-  emits('change', val);
-  emits('update:value', val);
+  emits('change', currentValue.value);
+  emits('update:modelValue', currentValue.value);
 }
 
 // 正在输入中文，处理输入过程中触发input事件
 let isComposing = false;
+let clickInside = false;
 
-const onInput = (e: InputEvent) => {
+const onInput = (e: Event) => {
   if (isComposing) {
     return;
   }
   const val = (e.target as HTMLInputElement)?.value;
-  console.log(e.data);
 
   updateValue(val);
-  emits('input', currentValue.value, e);
+  nextTick(() => {
+    emits('input', computedValue.value, e);
+  });
 };
 
 const onCompositionStart = () => {
@@ -124,19 +138,27 @@ const onCompositionEnd = (e: Event) => {
 };
 
 const onFocus = (e: FocusEvent) => {
+  clickInside = false;
+  if (isFocus.value) {
+    return;
+  }
   isFocus.value = true;
-  emits('focus', currentValue.value, e);
+  emits('focus', computedValue.value, e);
 };
 
 const onBlur = (e: FocusEvent) => {
+  if (clickInside) {
+    clickInside = false;
+    return;
+  }
   isFocus.value = false;
-  emits('blur', currentValue.value, e);
+  emits('blur', computedValue.value, e);
 };
 
 const onKeyDown = (e: KeyboardEvent) => {
   const keyCode = e.key || e.code;
   if (!isComposing && keyCode === Enter.key) {
-    emits('pressEnter', currentValue.value, e);
+    emits('pressEnter', computedValue.value, e);
   }
 };
 
@@ -144,12 +166,15 @@ const clearClick = (e: Event) => {
   updateValue('');
   emits('clear', e);
 };
+const onMouseDown = () => {
+  clickInside = true;
+};
 </script>
 <template>
   <label
     class="o-input"
     :class="[
-      `is-${status || props.status}`,
+      statusClass,
       `o-input-size-${props.size || defaultSize}`,
       `o-input-shape-${props.shape || defaultShape}`,
       {
@@ -157,6 +182,7 @@ const clearClick = (e: Event) => {
         'is-focus': isFocus,
       },
     ]"
+    @mousedown="onMouseDown"
   >
     <span v-if="$slots.prepend" class="o-input-prepend">
       <slot name="prepend"></slot>
@@ -165,7 +191,7 @@ const clearClick = (e: Event) => {
       class="o-input-wrap"
       :class="{
         'has-suffix': $slots.suffix,
-        clearable: props.clearable && props.value !== '',
+        clearable: props.clearable && computedValue !== '',
         'has-prepend': $slots.prepend,
         'has-append': $slots.append,
       }"
@@ -174,6 +200,7 @@ const clearClick = (e: Event) => {
         <slot name="prefix"></slot>
       </div>
       <input
+        ref="inputRef"
         :value="displayValue"
         :type="type"
         :placeholder="props.placeholder"
diff --git a/packages/opendesign/src/components/input/__demo__/IndexInput.vue b/packages/opendesign/src/components/input/__demo__/IndexInput.vue
index ebc32065..288cd57d 100644
--- a/packages/opendesign/src/components/input/__demo__/IndexInput.vue
+++ b/packages/opendesign/src/components/input/__demo__/IndexInput.vue
@@ -3,12 +3,14 @@ import '../style';
 import '../../option/style';
 
 import InputBasic from './InputBasic.vue';
+import InputEvent from './InputEvent.vue';
 import InputSlot from './InputSlot.vue';
 import InputMethod from './InputMethod.vue';
 </script>
 <template>
   <div class="page-demo">
     <InputBasic />
+    <InputEvent />
     <InputSlot />
     <InputMethod />
   </div>
diff --git a/packages/opendesign/src/components/input/__demo__/InputBasic.vue b/packages/opendesign/src/components/input/__demo__/InputBasic.vue
index cd120a7e..fee5eb2f 100644
--- a/packages/opendesign/src/components/input/__demo__/InputBasic.vue
+++ b/packages/opendesign/src/components/input/__demo__/InputBasic.vue
@@ -19,47 +19,62 @@ const printEvent = (event: string, val?: string | number) => {
   <h4>Basic</h4>
   <section>
     <div>val1:{{ val1 }}</div>
-    <OInput v-model:value="val1" />
+    <OInput v-model="val1" />
     <OInput
-      v-model:value="val2"
-      @blur="() => printEvent('blur')"
+      v-model="val2"
+      @blur="(v) => printEvent('blur', v)"
       @change="(v) => printEvent('change', v)"
       @input="(v) => printEvent('input', v)"
-      @focus="printEvent('focus')"
+      @focus="(v) => printEvent('focus', v)"
       @press-enter="(v) => printEvent('press-enter', v)"
     />
-    <OInput v-model:value="val3" />
-    <OInput v-model:value="val3" type="password" />
+    <OInput v-model="val3" />
+    <OInput v-model="val3" type="password" />
   </section>
   <h4>Size</h4>
   <section>
     <div>val1:{{ val1 }}</div>
-    <OInput v-model:value="val2" size="small" />
-    <OInput v-model:value="val2" />
-    <OInput v-model:value="val3" size="large" />
+    <OInput v-model="val2" size="small" />
+    <OInput v-model="val2" />
+    <OInput v-model="val3" size="large" />
+  </section>
+  <h4>Shape</h4>
+  <section>
+    <div>val1:{{ val1 }}</div>
+    <OInput v-model="val2" size="small" shape="round" />
+    <OInput v-model="val2" shape="round" />
+    <OInput v-model="val3" size="large" shape="round" />
+    <OInput v-model="val2" disabled shape="round">
+      <template #prefix><IconDone /></template>
+      <template #suffix> 元 </template>
+    </OInput>
+    <OInput v-model="val2" shape="round">
+      <template #prepend>+86</template>
+      <template #append>手机</template>
+    </OInput>
   </section>
   <h4>Status</h4>
   <section>
     <div>val1:{{ val1 }}</div>
-    <OInput v-model:value="val2" status="success" />
-    <OInput v-model:value="val2" status="warning" />
-    <OInput v-model:value="val2" status="error" />
+    <OInput v-model="val2" status="success" />
+    <OInput v-model="val2" status="warning" />
+    <OInput v-model="val2" status="error" />
   </section>
   <h4>Disabled</h4>
   <section>
     <div>val1:{{ val1 }}</div>
-    <OInput v-model:value="val2" disabled />
-    <OInput v-model:value="val2" disabled>
+    <OInput v-model="val2" disabled />
+    <OInput v-model="val2" disabled>
       <template #prefix>
         <IconDone />
       </template>
     </OInput>
-    <OInput v-model:value="val2" disabled>
+    <OInput v-model="val2" disabled>
       <template #suffix>
         <IconDone />
       </template>
     </OInput>
-    <OInput v-model:value="val2" :clearable="false" disabled>
+    <OInput v-model="val2" :clearable="false" disabled>
       <template #suffix> 元 </template>
     </OInput>
   </section>
diff --git a/packages/opendesign/src/components/input/__demo__/InputEvent.vue b/packages/opendesign/src/components/input/__demo__/InputEvent.vue
new file mode 100644
index 00000000..fab0e0e3
--- /dev/null
+++ b/packages/opendesign/src/components/input/__demo__/InputEvent.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OInput } from '../index';
+
+const val1 = ref('');
+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>
+    <div>val1:{{ val1 }}</div>
+    <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: {{ val1 }}; event:{{ event }};
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/input/__demo__/InputMethod.vue b/packages/opendesign/src/components/input/__demo__/InputMethod.vue
index f9098f9e..c70d5f59 100644
--- a/packages/opendesign/src/components/input/__demo__/InputMethod.vue
+++ b/packages/opendesign/src/components/input/__demo__/InputMethod.vue
@@ -11,7 +11,7 @@ const parse = (val: string) => val.replace(/^\$/g, '');
   <h4>Parse & Format</h4>
   <section>
     <div>val1:{{ val1 }}</div>
-    <OInput v-model:value="val2" :format="format" :parse="parse" />
+    <OInput v-model="val2" :format="format" :parse="parse" />
   </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/input/__demo__/InputSlot.vue b/packages/opendesign/src/components/input/__demo__/InputSlot.vue
index 74f2f484..be6b0f0e 100644
--- a/packages/opendesign/src/components/input/__demo__/InputSlot.vue
+++ b/packages/opendesign/src/components/input/__demo__/InputSlot.vue
@@ -10,28 +10,28 @@ const val2 = ref('this is input value');
   <h4>Prefix & Suffix</h4>
   <section>
     <div>val1:{{ val1 }}</div>
-    <OInput v-model:value="val2" />
-    <OInput v-model:value="val2">
+    <OInput v-model="val2" />
+    <OInput v-model="val2">
       <template #prefix>
         <IconDone />
       </template>
     </OInput>
-    <OInput v-model:value="val2">
+    <OInput v-model="val2">
       <template #suffix>
         <IconDone />
       </template>
     </OInput>
-    <OInput v-model:value="val2">
+    <OInput v-model="val2">
       <template #suffix> 元 </template>
     </OInput>
   </section>
 
   <h4>Prepend & Append</h4>
   <section>
-    <OInput v-model:value="val2">
+    <OInput v-model="val2">
       <template #prepend>+86</template>
     </OInput>
-    <OInput v-model:value="val2">
+    <OInput v-model="val2">
       <template #append>RMB</template>
     </OInput>
   </section>
diff --git a/packages/opendesign/src/components/input/style/index.scss b/packages/opendesign/src/components/input/style/index.scss
index e6f54190..1b3186eb 100644
--- a/packages/opendesign/src/components/input/style/index.scss
+++ b/packages/opendesign/src/components/input/style/index.scss
@@ -15,6 +15,17 @@
     padding-right: 6px;
     border-radius: var(--input-radius-s);
   }
+  .o-input-append {
+    border-top-right-radius: var(--input-radius-s);
+    border-bottom-right-radius: var(--input-radius-s);
+    padding: 0 4px;
+  }
+
+  .o-input-prepend {
+    padding: 0 4px;
+    border-top-left-radius: var(--input-radius-s);
+    border-bottom-left-radius: var(--input-radius-s);
+  }
 }
 
 .o-input-size-normal {
@@ -29,9 +40,11 @@
   .o-input-append {
     border-top-right-radius: var(--input-radius-m);
     border-bottom-right-radius: var(--input-radius-m);
+    padding: 0 8px;
   }
 
   .o-input-prepend {
+    padding: 0 8px;
     border-top-left-radius: var(--input-radius-m);
     border-bottom-left-radius: var(--input-radius-m);
   }
@@ -46,10 +59,57 @@
     padding-right: 16px;
     border-radius: var(--input-radius-l);
   }
+  .o-input-append {
+    border-top-right-radius: var(--input-radius-l);
+    border-bottom-right-radius: var(--input-radius-l);
+    padding: 0 12px;
+  }
+
+  .o-input-prepend {
+    padding: 0 12px;
+    border-top-left-radius: var(--input-radius-l);
+    border-bottom-left-radius: var(--input-radius-l);
+  }
 }
 
 .o-input-shape-round {
-  border-radius: 100px;
+  .o-input-wrap {
+    border-radius: 100px;
+  }
+  .o-input-prepend {
+    border-top-left-radius: 100px;
+    border-bottom-left-radius: 100px;
+  }
+
+  .o-input-append {
+    border-top-right-radius: 100px;
+    border-bottom-right-radius: 100px;
+  }
+
+  &.o-input-size-large {
+    .o-input-prepend {
+      padding-left: 18px;
+    }
+    .o-input-append {
+      padding-right: 18px;
+    }
+  }
+  &.o-input-size-normal {
+    .o-input-prepend {
+      padding-left: 12px;
+    }
+    .o-input-append {
+      padding-right: 12px;
+    }
+  }
+  &.o-input-size-small {
+    .o-input-prepend {
+      padding-left: 6px;
+    }
+    .o-input-append {
+      padding-right: 6px;
+    }
+  }
 }
 
 .o-input-wrap {
@@ -145,6 +205,7 @@
   width: 100%;
   caret-color: var(--o-color-primary1);
   padding: 4px 0;
+  line-height: inherit;
 }
 
 .o-input-clear {
@@ -179,15 +240,16 @@
 .o-input-prepend {
   display: flex;
   align-items: center;
-  padding: 0 8px;
 }
 
 .o-input-append {
   border: 1px solid var(--o-color-border2);
   border-left: 0;
+  flex-shrink: 0;
 }
 
 .o-input-prepend {
   border: 1px solid var(--o-color-border2);
   border-right: 0;
+  flex-shrink: 0;
 }
diff --git a/packages/portal/src/style.scss b/packages/portal/src/style.scss
index 3b5b7159..ae181fc2 100644
--- a/packages/portal/src/style.scss
+++ b/packages/portal/src/style.scss
@@ -34,6 +34,13 @@ body {
 .page-demo {
   padding: 8px 24px;
 }
+.col {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  gap: 8px;
+}
 section {
   border: 1px solid #eee;
   padding: var(--o-gap-4);
-- 
Gitee


From d16c2a80ff6373cd325aec32c400905fb3795bf7 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 8 Feb 2023 18:30:24 +0800
Subject: [PATCH 3/9] =?UTF-8?q?input=20=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/input.md                        | 46 +++++++++
 .../src/components/input/OInput.vue           | 95 ++++++++++++-------
 .../components/input/__demo__/InputBasic.vue  |  4 +-
 .../components/input/__demo__/InputEvent.vue  |  6 +-
 .../components/input/__demo__/InputMethod.vue | 20 +++-
 .../opendesign/src/components/input/input.ts  |  8 ++
 6 files changed, 136 insertions(+), 43 deletions(-)
 create mode 100644 packages/docs/input.md
 create mode 100644 packages/opendesign/src/components/input/input.ts

diff --git a/packages/docs/input.md b/packages/docs/input.md
new file mode 100644
index 00000000..77b3ab07
--- /dev/null
+++ b/packages/docs/input.md
@@ -0,0 +1,46 @@
+# Input 输入框
+
+## 说明
+
+> `realValue: number|string` 数字输入框当前值
+
+> `inputValue: string` 输入框框当前值
+
+> `displayValue: string` 输入框展示的值
+
+> 数字非法判断：非 number 字符串（Number 无法转换为数字）、不在[min, max]范围内；
+
+## 设计
+
+1. 初始化 realValue
+
+   `realValue = modelValue ?? defaultValue`
+
+- 如果 `modelValue` 非法，展示该值，并使用删除线样式;
+- 如果 `defaultValue` 非法，展示该值，并使用删除线样式;
+
+2. 聚焦时（鼠标点击，键盘 Tab 切换）
+
+- 触发 `focus` 事件，参数：`(realValue, e)`;
+
+3. 输入时
+
+- 触发`input`事件，参数：`(inputValue, event)`;
+- 如果无 `parse`, 赋值`realValue = inputValue`,触发`update:modelValue`事件，参数`(inputValue)`;
+
+4. 失焦时
+
+- 如果有 `format`, `displayValue = format(realValue)`;
+- 如果没有 `format`, `displayValue = realValue`;
+- 如果有 `parse`, `realValue = parse(inputValue)`;
+- 触发`blur`事件，参数：`(realValue, event)`;
+- 如果值改变，触发`change`事件，参数: `(realValue)`
+- 触发`update:modelValue`事件，参数: `(realValue)`
+
+5. Enter 键按下时
+
+- 如果有 `format`, `displayValue = format(inputValue)`;
+- 如果没有 `format`, `displayValue = inputValue`;
+- 触发`pressEnter`事件，参数：`(realValue, KeyboardEvent)`;
+- 如果值改变，触发`change`事件，参数: `(realValue)`
+- 触发`update:modelValue`事件，参数: `(realValue)`
diff --git a/packages/opendesign/src/components/input/OInput.vue b/packages/opendesign/src/components/input/OInput.vue
index 521e1770..fc524d93 100644
--- a/packages/opendesign/src/components/input/OInput.vue
+++ b/packages/opendesign/src/components/input/OInput.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { ref, computed, nextTick } from 'vue';
+import { ref, computed, watch, nextTick } from 'vue';
 import { defaultSize, defaultShape, SizeT, ShapeT } from '../_shared/global';
 import { isFunction, isNull, isUndefined } from '../_shared/is';
 import { IconX } from '../icons';
 import { trigger } from '../_shared/event';
 import { Enter } from '../_shared/keycode';
+import { toInputString } from './input';
 
 interface InputPropT {
   /**
@@ -75,59 +76,60 @@ const props = withDefaults(defineProps<InputPropT>(), {
 const emits = defineEmits<{
   (e: 'update:modelValue', value: string | number): void;
   (e: 'change', value: string | number): void;
-  (e: 'input', value: string | number, evt: Event): void;
+  (e: 'input', value: string, evt: Event): void;
   (e: 'blur', value: string | number, evt: FocusEvent): void;
   (e: 'focus', value: string | number, evt: FocusEvent): void;
   (e: 'clear', evt: Event): void;
-  (e: 'pressEnter', value: string | number, evt: Event): void;
+  (e: 'pressEnter', value: string | number, evt: KeyboardEvent): void;
 }>();
 
 const inputRef = ref<HTMLElement | null>(null);
-// 输入框值
-const currentValue = ref(props.defaultValue);
-const computedValue = computed(() => {
-  return props.modelValue ?? currentValue.value;
-});
+// 数字输入框当前值
+const realValue = ref(toInputString(props.modelValue ?? props.defaultValue));
+// 监听属性变化，刷新值
+watch(
+  () => props.modelValue,
+  (val) => {
+    // console.log('watch', val);
+    realValue.value = toInputString(val);
+  }
+);
 
 // 输入框显示的字符串
 const displayValue = computed(() => {
-  if (isNull(computedValue.value) || isUndefined(computedValue.value)) {
-    return '';
-  }
-  return isFunction(props.format) ? props.format(computedValue.value) : computedValue.value;
+  const v = isFunction(props.format) ? props.format(realValue.value) : realValue.value;
+  // console.log('displayValue', v, realValue.value);
+  return v;
 });
 
+// 输入框状态
 const status = ref<undefined | 'warning' | 'warn' | 'error'>();
 const statusClass = computed(() => (status.value || props.status ? `is-${status.value || props.status}` : ''));
 
+// 是否聚焦状态
 const isFocus = ref(false);
+let lastValue: number | string = realValue.value;
 
 function updateValue(val: string) {
-  currentValue.value = isFunction(props.parse) ? props.parse(val) : val;
+  const value = isFunction(props.parse) ? props.parse(val) : val;
+  emits('update:modelValue', value);
 
-  emits('change', currentValue.value);
-  emits('update:modelValue', currentValue.value);
+  if (lastValue !== value) {
+    emits('change', value);
+    lastValue = value;
+  }
+  return value;
 }
 
 // 正在输入中文，处理输入过程中触发input事件
 let isComposing = false;
 let clickInside = false;
 
-const onInput = (e: Event) => {
-  if (isComposing) {
-    return;
-  }
-  const val = (e.target as HTMLInputElement)?.value;
-
-  updateValue(val);
-  nextTick(() => {
-    emits('input', computedValue.value, e);
-  });
-};
-
+// 开始中文输入
 const onCompositionStart = () => {
   isComposing = true;
 };
+// 结束中文输入
 const onCompositionEnd = (e: Event) => {
   if (!isComposing) {
     return;
@@ -137,13 +139,29 @@ const onCompositionEnd = (e: Event) => {
   trigger(e.target as HTMLElement, 'input');
 };
 
+const onInput = (e: Event) => {
+  if (isComposing) {
+    return;
+  }
+  const val = (e.target as HTMLInputElement)?.value;
+  emits('input', val, e);
+  // console.log('input', val);
+
+  if (!props.parse) {
+    emits('update:modelValue', val);
+    // console.log('update:modelValue', val);
+  }
+};
+
 const onFocus = (e: FocusEvent) => {
   clickInside = false;
   if (isFocus.value) {
     return;
   }
+  console.log('onFocus', clickInside);
   isFocus.value = true;
-  emits('focus', computedValue.value, e);
+  emits('focus', realValue.value, e);
+  // console.log('focus', realValue.value);
 };
 
 const onBlur = (e: FocusEvent) => {
@@ -151,23 +169,32 @@ const onBlur = (e: FocusEvent) => {
     clickInside = false;
     return;
   }
+  console.log('onBlur', clickInside);
   isFocus.value = false;
-  emits('blur', computedValue.value, e);
+  const val = (e.target as HTMLInputElement)?.value;
+  const v = updateValue(val);
+  emits('blur', v, e);
+  // console.log('blur', v);
 };
 
 const onKeyDown = (e: KeyboardEvent) => {
   const keyCode = e.key || e.code;
   if (!isComposing && keyCode === Enter.key) {
-    emits('pressEnter', computedValue.value, e);
+    const val = (e.target as HTMLInputElement)?.value;
+    const v = updateValue(val);
+    emits('pressEnter', v, e);
+    // console.log('pressEnter', v);
   }
 };
-
+// 清除值
 const clearClick = (e: Event) => {
   updateValue('');
   emits('clear', e);
 };
-const onMouseDown = () => {
-  clickInside = true;
+const onMouseDown = (e: MouseEvent) => {
+  if ((e.target as HTMLInputElement) !== inputRef.value) {
+    clickInside = true;
+  }
 };
 </script>
 <template>
@@ -191,7 +218,7 @@ const onMouseDown = () => {
       class="o-input-wrap"
       :class="{
         'has-suffix': $slots.suffix,
-        clearable: props.clearable && computedValue !== '',
+        clearable: props.clearable && realValue !== '',
         'has-prepend': $slots.prepend,
         'has-append': $slots.append,
       }"
diff --git a/packages/opendesign/src/components/input/__demo__/InputBasic.vue b/packages/opendesign/src/components/input/__demo__/InputBasic.vue
index fee5eb2f..76bd5ccb 100644
--- a/packages/opendesign/src/components/input/__demo__/InputBasic.vue
+++ b/packages/opendesign/src/components/input/__demo__/InputBasic.vue
@@ -12,7 +12,7 @@ setTimeout(() => {
 }, 2000);
 
 const printEvent = (event: string, val?: string | number) => {
-  console.log(event, val);
+  console.log(`[${event}]`, val);
 };
 </script>
 <template>
@@ -20,12 +20,14 @@ const printEvent = (event: string, val?: string | number) => {
   <section>
     <div>val1:{{ val1 }}</div>
     <OInput v-model="val1" />
+    <div>val2:{{ val2 }}</div>
     <OInput
       v-model="val2"
       @blur="(v) => printEvent('blur', v)"
       @change="(v) => printEvent('change', v)"
       @input="(v) => printEvent('input', v)"
       @focus="(v) => printEvent('focus', v)"
+      @clear="(v) => printEvent('clear')"
       @press-enter="(v) => printEvent('press-enter', v)"
     />
     <OInput v-model="val3" />
diff --git a/packages/opendesign/src/components/input/__demo__/InputEvent.vue b/packages/opendesign/src/components/input/__demo__/InputEvent.vue
index fab0e0e3..88c1ac12 100644
--- a/packages/opendesign/src/components/input/__demo__/InputEvent.vue
+++ b/packages/opendesign/src/components/input/__demo__/InputEvent.vue
@@ -2,19 +2,17 @@
 import { ref } from 'vue';
 import { OInput } from '../index';
 
-const val1 = ref('');
 const val2 = ref('this is input value');
 const event = ref('--');
 
 const printEvent = (evt: string, val?: string | number) => {
-  console.log(evt, val);
+  console.log(`[${evt}]`, val);
   event.value = evt;
 };
 </script>
 <template>
   <h4>Event</h4>
   <section>
-    <div>val1:{{ val1 }}</div>
     <OInput
       v-model="val2"
       @blur="(v) => printEvent('blur', v)"
@@ -26,7 +24,7 @@ const printEvent = (evt: string, val?: string | number) => {
       <template #prepend>+86</template>
       <template #append>RMB</template>
     </OInput>
-    value: {{ val1 }}; event:{{ event }};
+    value: {{ val2 }}; event:{{ event }};
   </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/input/__demo__/InputMethod.vue b/packages/opendesign/src/components/input/__demo__/InputMethod.vue
index c70d5f59..ad6f74a1 100644
--- a/packages/opendesign/src/components/input/__demo__/InputMethod.vue
+++ b/packages/opendesign/src/components/input/__demo__/InputMethod.vue
@@ -2,16 +2,28 @@
 import { ref } from 'vue';
 import { OInput } from '../index';
 
-const val1 = ref('');
-const val2 = ref('this is input value');
+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>val1:{{ val1 }}</div>
-    <OInput v-model="val2" :format="format" :parse="parse" />
+    <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/input/input.ts b/packages/opendesign/src/components/input/input.ts
new file mode 100644
index 00000000..a5cc1e5f
--- /dev/null
+++ b/packages/opendesign/src/components/input/input.ts
@@ -0,0 +1,8 @@
+import { isNull, isUndefined, isNumber } from '../_shared/is';
+
+export function toInputString(val: unknown): string {
+  if (isUndefined(val) || isNull(val) || (isNumber(val as number) && isNaN(val as number))) {
+    return '';
+  }
+  return String(val);
+}
\ No newline at end of file
-- 
Gitee


From 26379c72dca664e5a19d3cfa8ccd3b4e99fbcf78 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Thu, 9 Feb 2023 11:17:23 +0800
Subject: [PATCH 4/9] =?UTF-8?q?=E4=BC=98=E5=8C=96input=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/input-number.md                 |  34 +++
 .../src/components/button/style/index.scss    |   2 +-
 .../checkbox-group/style/index.scss           |   2 +-
 .../src/components/checkbox/style/index.scss  |   2 +-
 .../src/components/divider/style/index.scss   |   2 +-
 packages/opendesign/src/components/index.scss |  10 +-
 .../components/input-number/OInputNumber.vue  |  53 ++--
 .../__demo__/InputNumberBasic.vue             |  20 +-
 .../components/input-number/input-number.ts   |  26 +-
 .../components/input-number/style/index.scss  |  24 +-
 .../src/components/input/OInput.vue           |  13 +-
 .../components/input/__demo__/InputBasic.vue  |   8 +
 .../src/components/input/style/index.scss     | 280 ++++++++----------
 .../src/components/input/style/var.scss       |  17 +-
 .../src/components/link/style/index.scss      |   2 +-
 .../src/components/option/style/index.scss    |   2 +-
 .../src/components/pagination/OPagination.vue |  12 +-
 .../components/pagination/style/index.scss    |  10 +-
 .../src/components/popover/style/index.scss   |   4 +-
 .../src/components/popup/style/index.scss     |   2 +-
 .../components/radio-group/style/index.scss   |   2 +-
 .../src/components/radio/style/index.scss     |   2 +-
 .../src/components/select/style/index.scss    |   4 +-
 .../src/components/style/index.scss           |   2 +-
 .../src/components/switch/style/index.scss    |   2 +-
 .../src/components/table/style/index.scss     |   2 +-
 .../src/components/tabs/style/index.scss      |   2 +-
 packages/portal/src/main.ts                   |   1 +
 28 files changed, 306 insertions(+), 236 deletions(-)
 create mode 100644 packages/docs/input-number.md

diff --git a/packages/docs/input-number.md b/packages/docs/input-number.md
new file mode 100644
index 00000000..6d4aa774
--- /dev/null
+++ b/packages/docs/input-number.md
@@ -0,0 +1,34 @@
+# Divider 分割线
+
+## 说明
+
+> currentValue: number|string 数字输入框当前值
+
+> realValue: number 数字输入框当前真实值
+
+> inputValue: string 输入框框当前值
+
+> 数字非法判断：非 number 字符串（Number 无法转换为数字）、不在[min, max]范围内；
+
+## 设计
+
+1. 初始化 currentValue
+
+   `currentValue = modelValue ?? defaultValue`
+
+- 如果 modelValue 非法，展示该值，并使用删除线样式
+- 如果 defaultValue 非法，展示该值，并使用删除线样式
+
+2. 聚焦时（鼠标点击，键盘 Tab 切换）
+
+- 触发 focus 事件，参数：(realValue, event)
+
+3. 输入时
+
+- 触发`input`事件，参数：(inputValue, event)
+- 如果输入值非法，展示该值，并使用删除线样式
+
+4. 失焦时
+
+-
+- 触发`blur`事件，参数：(currentValue, event)
diff --git a/packages/opendesign/src/components/button/style/index.scss b/packages/opendesign/src/components/button/style/index.scss
index 6fd6e64f..6b21916b 100644
--- a/packages/opendesign/src/components/button/style/index.scss
+++ b/packages/opendesign/src/components/button/style/index.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss';
 
 .o-btn {
   outline: none;
diff --git a/packages/opendesign/src/components/checkbox-group/style/index.scss b/packages/opendesign/src/components/checkbox-group/style/index.scss
index 296456cc..5a8c148c 100644
--- a/packages/opendesign/src/components/checkbox-group/style/index.scss
+++ b/packages/opendesign/src/components/checkbox-group/style/index.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss';
 
 .o-checkbox-group {
   display: inline-flex;
diff --git a/packages/opendesign/src/components/checkbox/style/index.scss b/packages/opendesign/src/components/checkbox/style/index.scss
index 1c64f4a1..0c0144e0 100644
--- a/packages/opendesign/src/components/checkbox/style/index.scss
+++ b/packages/opendesign/src/components/checkbox/style/index.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss';
 
 .o-checkbox {
   color: var(--checkbox-color);
diff --git a/packages/opendesign/src/components/divider/style/index.scss b/packages/opendesign/src/components/divider/style/index.scss
index b353041c..5a69e5d4 100644
--- a/packages/opendesign/src/components/divider/style/index.scss
+++ b/packages/opendesign/src/components/divider/style/index.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss';
 
 .o-divider-direction-horizontal {
   display: flex;
diff --git a/packages/opendesign/src/components/index.scss b/packages/opendesign/src/components/index.scss
index 98357b32..a9505035 100644
--- a/packages/opendesign/src/components/index.scss
+++ b/packages/opendesign/src/components/index.scss
@@ -1,5 +1,5 @@
-@import './style/index.scss';
-@import './button/style/index.scss';
-@import './switch/style/index.scss';
-@import './radio/style/index.scss';
-@import './radio-group/style/index.scss';
+@use './style/index.scss';
+@use './button/style/index.scss';
+@use './switch/style/index.scss';
+@use './radio/style/index.scss';
+@use './radio-group/style/index.scss';
diff --git a/packages/opendesign/src/components/input-number/OInputNumber.vue b/packages/opendesign/src/components/input-number/OInputNumber.vue
index 1e556c44..f833fa65 100644
--- a/packages/opendesign/src/components/input-number/OInputNumber.vue
+++ b/packages/opendesign/src/components/input-number/OInputNumber.vue
@@ -1,27 +1,35 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
-import { defaultSize, defaultShape, SizeT, ShapeT } from '../_shared/global';
+import { defaultSize, SizeT, ShapeT } from '../_shared/global';
 import { IconMinus, IconAdd } from '../icons';
 import { OInput } from '../input';
-import { isNumberString, getInputValueString, getRealValue } from './input-number';
+import { isValidNumber, getInputValueString, getRealValue } from './input-number';
 
 interface InputPropT {
   /**
-   * 下拉框的值
+   * 数字输入框的值
    * v-model
    */
   modelValue?: string | number;
   /**
-   * 下拉框的默认值
+   * 数字输入框的默认值
    * 非受控
    */
   defaultValue?: string | number;
   /**
-   * 大小
+   * 按钮点击时步长
    */
   step?: number;
   /**
-   * 大小
+   * 最小值
+   */
+  min?: number;
+  /**
+   * 最大值
+   */
+  max?: number;
+  /**
+   * 样式尺寸
    */
   size?: SizeT;
   /**
@@ -48,7 +56,6 @@ interface InputPropT {
    * 是否可以清除
    */
   clearable?: boolean;
-
   /**
    * 控制按钮位置
    */
@@ -71,6 +78,8 @@ const props = withDefaults(defineProps<InputPropT>(), {
   modelValue: undefined,
   defaultValue: '',
   step: 1,
+  min: undefined,
+  max: undefined,
   size: undefined,
   shape: undefined,
   placeholder: '',
@@ -92,25 +101,24 @@ const emits = defineEmits<{
   (e: 'update:value', value: string | number, evt: Event): void;
 }>();
 
-const currentValue = ref<number | string>(getInputValueString(props.modelValue ?? props.defaultValue));
+const currentValue = ref<number | string>(props.modelValue ?? props.defaultValue);
+const isValid = ref(isValidNumber(currentValue.value, props.min, props.max));
+let realValue = getRealValue(currentValue.value);
+let lastValidValue: number | string = '';
 
 watch(
   () => props.modelValue,
   (val) => {
     currentValue.value = getInputValueString(val);
+    isValid.value = isValidNumber(val, props.min, props.max);
   }
 );
 
-let realValue = getRealValue(currentValue.value);
-
-const isValid = ref(isNumberString(currentValue.value));
-let lastValidValue: number | string = '';
-
 const parseValue = (val: string | number) => {
   if (!isValid.value) {
     currentValue.value = lastValidValue;
   } else {
-    realValue = Number(val);
+    realValue = getRealValue(val);
     if (realValue !== currentValue.value) {
       currentValue.value = realValue;
 
@@ -121,7 +129,7 @@ const parseValue = (val: string | number) => {
   isValid.value = true;
 };
 const updateValue = (val: string | number) => {
-  isValid.value = isNumberString(val);
+  isValid.value = isValidNumber(val);
   currentValue.value = val;
 
   if (isValid.value && props.updateOnInput) {
@@ -139,14 +147,19 @@ const onFocus = (val: string | number, evt: FocusEvent) => {
 };
 const onBlur = (val: string | number, evt: FocusEvent) => {
   parseValue(val);
+  lastValidValue = realValue;
   emits('blur', realValue, evt);
 };
 const onPressEnter = (val: string | number, evt: FocusEvent) => {
   parseValue(val);
+  lastValidValue = realValue;
   emits('pressEnter', realValue, evt);
 };
 
-const constrolClick = (type: 'plus' | 'minus') => {
+const controlClick = (type: 'plus' | 'minus') => {
+  if (props.disabled) {
+    return;
+  }
   if (type === 'plus') {
     realValue += props.step;
   } else {
@@ -176,13 +189,13 @@ const constrolClick = (type: 'plus' | 'minus') => {
     @update:model-value="updateValue"
   >
     <template v-if="['default', 'left'].includes(props.controls)" #prepend>
-      <div class="o-input-number-btn" @click="constrolClick('minus')">
-        <slot name="control-left"><IconMinus /></slot>
+      <div v-if="props.controls === 'default'" class="o-input-number-btn" @click="controlClick('minus')">
+        <slot name="minus"><IconMinus /></slot>
       </div>
     </template>
     <template v-if="['default', 'right'].includes(props.controls)" #append>
-      <div class="o-input-number-btn" @click="constrolClick('plus')">
-        <slot name="control-right"><IconAdd /></slot>
+      <div v-if="props.controls === 'default'" class="o-input-number-btn" @click="controlClick('plus')">
+        <slot name="add"><IconAdd /></slot>
       </div>
     </template>
     <template v-if="$slots.prefix" #prefix>
diff --git a/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue b/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue
index e03300c2..931987e1 100644
--- a/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue
+++ b/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue
@@ -8,6 +8,7 @@ setTimeout(() => {
 }, 2000);
 const val2 = ref(100);
 const val3 = ref(3333);
+const val4 = ref('1px');
 </script>
 <template>
   <h4>Basic</h4>
@@ -37,7 +38,7 @@ const val3 = ref(3333);
     </div>
   </section>
   <h4>Size</h4>
-  <div>val1:{{ val2 }}</div>
+  <div>val2:{{ val2 }}</div>
   <section>
     <OInputNumber v-model="val2" size="small" />
     <OInputNumber v-model="val2" />
@@ -57,12 +58,27 @@ const val3 = ref(3333);
   <section>
     <div>val1:{{ val1 }}</div>
     <OInputNumber v-model="val2" disabled />
-    <OInputNumber v-model="val2" disabled>
+    <OInputNumber v-model="val2" disabled style="width: 150px">
       <template #prefix>$</template>
     </OInputNumber>
     <OInputNumber v-model="val2" disabled style="width: 150px">
       <template #suffix> 元 </template>
     </OInputNumber>
   </section>
+
+  <h4>Step & min & max</h4>
+  <section>
+    <div>val4:{{ val4 }}</div>
+    <OInputNumber v-model="val4" :step="2" />
+    <OInputNumber v-model="val4" :min="1" style="width: 150px">
+      <template #prefix>$</template>
+    </OInputNumber>
+    <OInputNumber v-model="val4" :max="5" style="width: 150px">
+      <template #suffix> 元 </template>
+    </OInputNumber>
+    <OInputNumber v-model="val4" :step="3" :min="3" :max="8" style="width: 150px">
+      <template #suffix> 元 </template>
+    </OInputNumber>
+  </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/input-number/input-number.ts b/packages/opendesign/src/components/input-number/input-number.ts
index 3315aa14..5e34b3eb 100644
--- a/packages/opendesign/src/components/input-number/input-number.ts
+++ b/packages/opendesign/src/components/input-number/input-number.ts
@@ -1,16 +1,34 @@
 import { isNumber } from '../_shared/is';
 
-export function isNumberString(val: string | number | undefined) {
+export function isValidNumber(val: string | number | undefined, min?: number, max?: number) {
   if (isNumber(val) || !val || isNumber(Number(val))) {
+    const v = Number(val);
+    if (min && v < min) {
+      return false;
+    }
+    if (max && v > max) {
+      return false;
+    }
+
     return true;
   }
   return false;
 }
 
-export function getInputValueString(val: string | number | undefined) {
-  return isNumberString(val) ? Number(val) : '';
+export function getInputValueString(val: string | number | undefined, min?: number, max?: number) {
+  let rlt: number | string = '';
+  if (isValidNumber(val)) {
+    rlt = Number(val);
+    if (min !== undefined) {
+      rlt = rlt < min ? min : rlt;
+    }
+    if (max !== undefined) {
+      rlt = rlt > max ? max : rlt;
+    }
+  }
+  return rlt;
 }
 
 export function getRealValue(val: string | number) {
-  return isNumberString(val) ? Number(val) : 0;
+  return isValidNumber(val) ? Number(val) : 0;
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/components/input-number/style/index.scss b/packages/opendesign/src/components/input-number/style/index.scss
index 6dd01e28..dff9f618 100644
--- a/packages/opendesign/src/components/input-number/style/index.scss
+++ b/packages/opendesign/src/components/input-number/style/index.scss
@@ -1,10 +1,12 @@
-@import './var.scss';
-@import '../../input/style/index.scss';
+@use './var.scss';
+@use '../../input/style/index.scss';
 
 .o-input-number {
   .o-input-prepend,
   .o-input-append {
     font-size: 14px;
+    // padding: 0;
+    align-items: stretch;
 
     &:hover {
       color: var(--input-number-btn-color);
@@ -26,24 +28,28 @@
 }
 .o-input-number-btn {
   user-select: none;
+  align-items: center;
+  display: flex;
 }
+
 .o-input-number-size-small {
   width: 90px;
   .o-input-number-btn {
-    // padding: 0 4px;
+    padding-left: 2px;
+  }
+  .o-input-number-btn-icon {
+    padding: 0 4px;
   }
 }
 .o-input-number-size-normal {
   width: 120px;
-
-  .o-input-number-btn {
-    // padding: 0 8px;
+  .o-input-number-btn-icon {
+    padding: 0 8px;
   }
 }
 .o-input-number-size-large {
   width: 160px;
-
-  .o-input-number-btn {
-    // padding: 0 12px;
+  .o-input-number-btn-icon {
+    padding: 0 12px;
   }
 }
diff --git a/packages/opendesign/src/components/input/OInput.vue b/packages/opendesign/src/components/input/OInput.vue
index fc524d93..3917df80 100644
--- a/packages/opendesign/src/components/input/OInput.vue
+++ b/packages/opendesign/src/components/input/OInput.vue
@@ -204,9 +204,10 @@ const onMouseDown = (e: MouseEvent) => {
       statusClass,
       `o-input-size-${props.size || defaultSize}`,
       `o-input-shape-${props.shape || defaultShape}`,
+      `o-input-status-${props.status}`,
       {
-        'is-disabled': props.disabled,
-        'is-focus': isFocus,
+        'o-input-disabled': props.disabled,
+        'o-input-focus': isFocus,
       },
     ]"
     @mousedown="onMouseDown"
@@ -217,10 +218,11 @@ const onMouseDown = (e: MouseEvent) => {
     <div
       class="o-input-wrap"
       :class="{
+        'o-input-clearable': props.clearable && realValue !== '' && !props.disabled,
         'has-suffix': $slots.suffix,
-        clearable: props.clearable && realValue !== '',
         'has-prepend': $slots.prepend,
         'has-append': $slots.append,
+        'is-focus': isFocus,
       }"
     >
       <div v-if="$slots.prefix" class="o-input-prefix">
@@ -232,7 +234,8 @@ const onMouseDown = (e: MouseEvent) => {
         :type="type"
         :placeholder="props.placeholder"
         class="o-input-input"
-        :readonly="props.readonly || props.disabled"
+        :readonly="props.readonly"
+        :disabled="props.disabled"
         @focus="onFocus"
         @blur="onBlur"
         @input="onInput"
@@ -241,10 +244,10 @@ const onMouseDown = (e: MouseEvent) => {
         @compositionend="onCompositionEnd"
       />
       <div v-if="props.clearable || $slots.suffix" class="o-input-suffix">
-        <div v-if="props.clearable" class="o-input-clear" @click="clearClick"><IconX class="o-input-clear-icon" /></div>
         <span v-if="$slots.suffix" class="o-input-suffix-wrap">
           <slot name="suffix"></slot>
         </span>
+        <div v-if="props.clearable" class="o-input-clear" @click="clearClick"><IconX class="o-input-clear-icon" /></div>
       </div>
     </div>
     <span v-if="$slots.append" class="o-input-append">
diff --git a/packages/opendesign/src/components/input/__demo__/InputBasic.vue b/packages/opendesign/src/components/input/__demo__/InputBasic.vue
index 76bd5ccb..765a1904 100644
--- a/packages/opendesign/src/components/input/__demo__/InputBasic.vue
+++ b/packages/opendesign/src/components/input/__demo__/InputBasic.vue
@@ -50,10 +50,18 @@ const printEvent = (event: string, val?: string | number) => {
       <template #prefix><IconDone /></template>
       <template #suffix> 元 </template>
     </OInput>
+    <OInput v-model="val2" shape="round" size="small">
+      <template #prepend>+86</template>
+      <template #append>手机</template>
+    </OInput>
     <OInput v-model="val2" shape="round">
       <template #prepend>+86</template>
       <template #append>手机</template>
     </OInput>
+    <OInput v-model="val2" shape="round" size="large">
+      <template #prepend>+86</template>
+      <template #append>手机</template>
+    </OInput>
   </section>
   <h4>Status</h4>
   <section>
diff --git a/packages/opendesign/src/components/input/style/index.scss b/packages/opendesign/src/components/input/style/index.scss
index 1b3186eb..f13d6948 100644
--- a/packages/opendesign/src/components/input/style/index.scss
+++ b/packages/opendesign/src/components/input/style/index.scss
@@ -1,126 +1,30 @@
-@import './var.scss';
-@import '../../popup/style/index.scss';
+@use './var.scss';
+@use '../../popup/style/index.scss';
 
 .o-input {
   cursor: pointer;
   color: var(--input-color);
   display: inline-flex;
-}
-.o-input-size-small {
-  height: var(--input-height-s);
-  font-size: var(--input-text-size-s);
-  line-height: var(--input-text-height-s);
-  .o-input-wrap {
-    padding-left: 6px;
-    padding-right: 6px;
-    border-radius: var(--input-radius-s);
-  }
-  .o-input-append {
-    border-top-right-radius: var(--input-radius-s);
-    border-bottom-right-radius: var(--input-radius-s);
-    padding: 0 4px;
-  }
-
-  .o-input-prepend {
-    padding: 0 4px;
-    border-top-left-radius: var(--input-radius-s);
-    border-bottom-left-radius: var(--input-radius-s);
-  }
-}
-
-.o-input-size-normal {
-  height: var(--input-height-m);
-  font-size: var(--input-text-size-m);
-  line-height: var(--input-text-height-m);
-  .o-input-wrap {
-    padding-left: 12px;
-    padding-right: 12px;
-    border-radius: var(--input-radius-m);
-  }
-  .o-input-append {
-    border-top-right-radius: var(--input-radius-m);
-    border-bottom-right-radius: var(--input-radius-m);
-    padding: 0 8px;
-  }
-
-  .o-input-prepend {
-    padding: 0 8px;
-    border-top-left-radius: var(--input-radius-m);
-    border-bottom-left-radius: var(--input-radius-m);
-  }
-}
-
-.o-input-size-large {
-  height: var(--input-height-l);
-  font-size: var(--input-text-size-l);
-  line-height: var(--input-text-height-l);
-  .o-input-wrap {
-    padding-left: 16px;
-    padding-right: 16px;
-    border-radius: var(--input-radius-l);
-  }
-  .o-input-append {
-    border-top-right-radius: var(--input-radius-l);
-    border-bottom-right-radius: var(--input-radius-l);
-    padding: 0 12px;
-  }
-
-  .o-input-prepend {
-    padding: 0 12px;
-    border-top-left-radius: var(--input-radius-l);
-    border-bottom-left-radius: var(--input-radius-l);
-  }
-}
-
-.o-input-shape-round {
-  .o-input-wrap {
-    border-radius: 100px;
-  }
-  .o-input-prepend {
-    border-top-left-radius: 100px;
-    border-bottom-left-radius: 100px;
-  }
-
-  .o-input-append {
-    border-top-right-radius: 100px;
-    border-bottom-right-radius: 100px;
-  }
-
-  &.o-input-size-large {
-    .o-input-prepend {
-      padding-left: 18px;
-    }
-    .o-input-append {
-      padding-right: 18px;
-    }
-  }
-  &.o-input-size-normal {
-    .o-input-prepend {
-      padding-left: 12px;
-    }
-    .o-input-append {
-      padding-right: 12px;
-    }
-  }
-  &.o-input-size-small {
-    .o-input-prepend {
-      padding-left: 6px;
-    }
-    .o-input-append {
-      padding-right: 6px;
-    }
-  }
+  height: var(--input-height);
+  font-size: var(--input-text-size);
+  line-height: var(--input-text-height);
 }
 
 .o-input-wrap {
   display: flex;
-  padding: 0 12px;
+  padding: var(--input-padding);
+  border-radius: var(--input-radius);
   border: 1px solid var(--input-border);
+  background-color: var(--input-bg);
 
   &:hover {
     border-color: var(--input-border-hover);
     background-color: var(--input-bg-hover);
   }
+  &.is-focus {
+    border-color: var(--input-border-focus);
+    background-color: var(--input-bg-focus);
+  }
 
   &.has-prepend {
     border-top-left-radius: 0;
@@ -131,63 +35,12 @@
     border-bottom-right-radius: 0;
   }
 }
-.o-input {
-  &:not(.is-disabled) {
-    &.is-success {
-      color: var(--input-success);
-      .o-input-wrap {
-        border-color: var(--input-border-success);
-        background-color: var(--input-bg-success);
-      }
-    }
-    &.is-warning {
-      color: var(--input-warning);
-      .o-input-wrap {
-        border-color: var(--input-border-warning);
-        background-color: var(--input-bg-warning);
-      }
-    }
-    &.is-error {
-      color: var(--input-error);
-      .o-input-wrap {
-        border-color: var(--input-border-error);
-        background-color: var(--input-bg-error);
-      }
-    }
 
-    &.is-focus {
-      .o-input-wrap {
-        border-color: var(--input-border-active);
-        background-color: var(--input-bg-active);
-      }
-    }
-
-    .o-input-wrap.clearable {
-      &.has-suffix {
-        .o-input-clear {
-          position: absolute;
-          right: 0;
-          height: 100%;
-        }
-
-        &:hover {
-          .o-input-suffix-wrap {
-            visibility: hidden;
-            opacity: 0;
-          }
-        }
-      }
-      &:hover {
-        .o-input-clear {
-          visibility: visible;
-          opacity: 1;
-          transform: scale(1);
-        }
-      }
-    }
+.o-input-disabled {
+  .o-input-clear {
+    display: none;
   }
-
-  &.is-disabled .o-input-wrap {
+  .o-input-wrap {
     color: var(--input-color-disabled);
     cursor: not-allowed;
     border-color: var(--input-border-disabled);
@@ -195,6 +48,20 @@
   }
 }
 
+.o-input-clearable {
+  &:hover {
+    .o-input-suffix-wrap {
+      visibility: hidden;
+      opacity: 0;
+    }
+    .o-input-clear {
+      visibility: visible;
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+
 .o-input-input {
   outline: none;
   border: none;
@@ -216,6 +83,15 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  color: var(--input-icon-color);
+  &:hover {
+    color: var(--input-icon-color-hover);
+  }
+  .o-input-suffix-wrap + & {
+    position: absolute;
+    right: 0;
+    height: 100%;
+  }
 }
 .o-input-suffix-wrap {
   transition: all var(var(--o-duration-m1)) var(--o-easing-standard-out);
@@ -229,9 +105,9 @@
 .o-input-prefix {
   display: flex;
   align-items: center;
-
   margin-right: 4px;
 }
+
 .o-input-clear-icon {
   stroke-width: 0.5px;
 }
@@ -246,10 +122,86 @@
   border: 1px solid var(--o-color-border2);
   border-left: 0;
   flex-shrink: 0;
+  padding: var(--input-append-padding);
+  border-top-right-radius: var(--input-append-prepend-border-radius);
+  border-bottom-right-radius: var(--input-append-prepend-border-radius);
 }
 
 .o-input-prepend {
   border: 1px solid var(--o-color-border2);
   border-right: 0;
   flex-shrink: 0;
+  padding: var(--input-prepend-padding);
+  border-top-left-radius: var(--input-append-prepend-border-radius);
+  border-bottom-left-radius: var(--input-append-prepend-border-radius);
+}
+.o-input-size-small {
+  --input-height: var(--input-height-s);
+  --input-text-size: var(--input-text-size-s);
+  --input-text-height: var(--input-text-height-s);
+  --input-append-prepend-border-radius: var(--input-radius-s);
+  --input-padding: 0 8px;
+  --input-radius: var(--input-radius-s);
+  --input-append-padding: 0 4px;
+  --input-prepend-padding: 0 4px;
+  &.o-input-shape-round {
+    --input-append-padding: 0 6px 0 4px;
+    --input-prepend-padding: 0 4px 0 6px;
+  }
+}
+.o-input-size-normal {
+  --input-height: var(--input-height-m);
+  --input-text-size: var(--input-text-size-m);
+  --input-text-height: var(--input-text-height-m);
+  --input-append-prepend-border-radius: var(--input-radius-m);
+  --input-padding: 0 12px;
+  --input-radius: var(--input-radius-m);
+  --input-append-padding: 0 8px;
+  --input-prepend-padding: 0 8px;
+  &.o-input-shape-round {
+    --input-append-padding: 0 12px 0 8px;
+    --input-prepend-padding: 0 8px 0 12px;
+  }
+}
+.o-input-size-large {
+  --input-height: var(--input-height-l);
+  --input-text-size: var(--input-text-size-l);
+  --input-text-height: var(--input-text-height-l);
+  --input-append-prepend-border-radius: var(--input-radius-l);
+  --input-padding: 0 16px;
+  --input-radius: var(--input-radius-l);
+  --input-append-padding: 0 12px;
+  --input-prepend-padding: 0 12px;
+  &.o-input-shape-round {
+    --input-append-padding: 0 16px 0 12px;
+    --input-prepend-padding: 0 12px 0 16px;
+  }
+}
+.o-input-shape-round {
+  --input-radius: 100px;
+  --input-append-prepend-border-radius: 100px;
+}
+.o-input-status-success {
+  --input-border: var(--input-border-success);
+  --input-border-hover: var(--input-border-success-hover);
+  --input-border-focus: var(--input-border-success-focus);
+  --input-bg: var(--input-bg-success);
+  --input-bg-hover: var(--input-bg-success-hover);
+  --input-bg-focus: var(--input-bg-success-focus);
+}
+.o-input-status-warning {
+  --input-border: var(--input-border-warning);
+  --input-border-hover: var(--input-border-warning-hover);
+  --input-border-focus: var(--input-border-warning-focus);
+  --input-bg: var(--input-bg-warning);
+  --input-bg-hover: var(--input-bg-warning-hover);
+  --input-bg-focus: var(--input-bg-warning-focus);
+}
+.o-input-status-error {
+  --input-border: var(--input-border-error);
+  --input-border-hover: var(--input-border-error-hover);
+  --input-border-focus: var(--input-border-error-focus);
+  --input-bg: var(--input-bg-error);
+  --input-bg-hover: var(--input-bg-error-hover);
+  --input-bg-focus: var(--input-bg-error-focus);
 }
diff --git a/packages/opendesign/src/components/input/style/var.scss b/packages/opendesign/src/components/input/style/var.scss
index c4972c06..04db1135 100644
--- a/packages/opendesign/src/components/input/style/var.scss
+++ b/packages/opendesign/src/components/input/style/var.scss
@@ -16,26 +16,39 @@
 
   --input-border: var(--o-color-info1);
   --input-border-hover: var(--o-color-primary2);
-  --input-border-active: var(--o-color-primary3);
+  --input-border-focus: var(--o-color-primary3);
   --input-border-disabled: var(--o-color-info1);
 
   --input-bg: var(--o-color-bg1);
   --input-bg-hover: var(--o-color-bg3);
-  --input-bg-active: var(--o-color-bg3);
+  --input-bg-focus: var(--o-color-bg3);
   --input-bg-disabled: var(--o-color-info4);
 
   --input-color: var(--o-color-text2);
   --input-color-disabled: var(--o-color-text4);
 
   --input-icon-color: var(--o-color-text3);
+  --input-icon-color-hover: var(--o-color-primary1);
 
   --input-border-success: var(--o-color-success1);
+  --input-border-success-hover: var(--o-color-success2);
+  --input-border-success-focus: var(--o-color-success3);
   --input-border-warning: var(--o-color-warning1);
+  --input-border-warning-hover: var(--o-color-warning2);
+  --input-border-warning-focus: var(--o-color-warning3);
   --input-border-error: var(--o-color-danger1);
+  --input-border-error-hover: var(--o-color-danger2);
+  --input-border-error-focus: var(--o-color-danger3);
 
   --input-bg-success: var(--o-color-bg1);
+  --input-bg-success-hover: var(--o-color-bg1);
+  --input-bg-success-focus: var(--o-color-bg1);
   --input-bg-warning: var(--o-color-bg1);
+  --input-bg-warning-hover: var(--o-color-bg1);
+  --input-bg-warning-focus: var(--o-color-bg1);
   --input-bg-error: var(--o-color-bg1);
+  --input-bg-error-hover: var(--o-color-bg1);
+  --input-bg-error-focus: var(--o-color-bg1);
 
   --input-color-success: var(--o-color-text2);
   --input-color-warning: var(--o-color-text2);
diff --git a/packages/opendesign/src/components/link/style/index.scss b/packages/opendesign/src/components/link/style/index.scss
index e90f42eb..bd197bae 100644
--- a/packages/opendesign/src/components/link/style/index.scss
+++ b/packages/opendesign/src/components/link/style/index.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss';
 
 .o-link {
   cursor: pointer;
diff --git a/packages/opendesign/src/components/option/style/index.scss b/packages/opendesign/src/components/option/style/index.scss
index b40e5d99..ab688a64 100644
--- a/packages/opendesign/src/components/option/style/index.scss
+++ b/packages/opendesign/src/components/option/style/index.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss';
 
 .o-option {
   cursor: pointer;
diff --git a/packages/opendesign/src/components/pagination/OPagination.vue b/packages/opendesign/src/components/pagination/OPagination.vue
index 1ca092dd..714d5702 100644
--- a/packages/opendesign/src/components/pagination/OPagination.vue
+++ b/packages/opendesign/src/components/pagination/OPagination.vue
@@ -2,7 +2,7 @@
 import { computed, ref } from 'vue';
 import { getPagerItem, PagerItemT, getSizeOptions } from './pagination';
 import { OPopover } from '../popover';
-import { OInput } from '../input';
+import { OInputNumber } from '../input-number';
 import { OSelect } from '../select';
 import { OOption } from '../option';
 
@@ -113,7 +113,7 @@ const goToChange = (val: string | number) => {
         <div class="o-pagination-pages">
           <template v-if="props.simple">
             <div class="o-pagination-simple">
-              <OInput v-model:value="currentPage" :clearable="false" class="o-pagination-input" />&nbsp;/&nbsp;<span>{{ totalPage }}</span>
+              <OInputNumber :model-value="currentPage" :clearable="false" class="o-pagination-input" controls="none" />&nbsp;/&nbsp;<span>{{ totalPage }}</span>
             </div>
           </template>
           <template v-else>
@@ -149,7 +149,13 @@ const goToChange = (val: string | number) => {
           </OSelect>
         </div>
         <div class="o-pagination-goto">
-          {{ Labels.goto }}&nbsp;<OInput :value="currentPage" class="o-pagination-input" :clearable="false" @blur="goToChange" @press-enter="goToChange" />
+          {{ Labels.goto }}&nbsp;<OInputNumber
+            :model-value="currentPage"
+            class="o-pagination-input"
+            controls="none"
+            @blur="goToChange"
+            @press-enter="goToChange"
+          />
         </div>
       </template>
     </div>
diff --git a/packages/opendesign/src/components/pagination/style/index.scss b/packages/opendesign/src/components/pagination/style/index.scss
index a1046108..dd50fa50 100644
--- a/packages/opendesign/src/components/pagination/style/index.scss
+++ b/packages/opendesign/src/components/pagination/style/index.scss
@@ -1,8 +1,8 @@
-@import './var.scss';
-@import '../../popover/style/index.scss';
-@import '../../input/style/index.scss';
-@import '../../select/style/index.scss';
-@import '../../option/style/index.scss';
+@use './var.scss';
+@use '../../popover/style/index.scss';
+@use '../../input-number/style/index.scss';
+@use '../../select/style/index.scss';
+@use '../../option/style/index.scss';
 
 .o-pagination-wrap {
   display: flex;
diff --git a/packages/opendesign/src/components/popover/style/index.scss b/packages/opendesign/src/components/popover/style/index.scss
index 3b6b426e..3b7e928c 100644
--- a/packages/opendesign/src/components/popover/style/index.scss
+++ b/packages/opendesign/src/components/popover/style/index.scss
@@ -1,5 +1,5 @@
-@import './var.scss';
-@import '../../popup/style/index.scss';
+@use './var.scss';
+@use '../../popup/style/index.scss';
 
 .o-popover-wrap {
   background-color: var(--popup-bg);
diff --git a/packages/opendesign/src/components/popup/style/index.scss b/packages/opendesign/src/components/popup/style/index.scss
index e2748664..221d58eb 100644
--- a/packages/opendesign/src/components/popup/style/index.scss
+++ b/packages/opendesign/src/components/popup/style/index.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss';
 
 .o-popup {
   position: absolute;
diff --git a/packages/opendesign/src/components/radio-group/style/index.scss b/packages/opendesign/src/components/radio-group/style/index.scss
index 65256e14..1de61546 100644
--- a/packages/opendesign/src/components/radio-group/style/index.scss
+++ b/packages/opendesign/src/components/radio-group/style/index.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss';
 
 .o-radio-group {
   display: inline-flex;
diff --git a/packages/opendesign/src/components/radio/style/index.scss b/packages/opendesign/src/components/radio/style/index.scss
index ff61404d..ade6f348 100644
--- a/packages/opendesign/src/components/radio/style/index.scss
+++ b/packages/opendesign/src/components/radio/style/index.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss';
 
 .o-radio {
   color: var(--radio-color);
diff --git a/packages/opendesign/src/components/select/style/index.scss b/packages/opendesign/src/components/select/style/index.scss
index cf6cafd6..4d6c96a8 100644
--- a/packages/opendesign/src/components/select/style/index.scss
+++ b/packages/opendesign/src/components/select/style/index.scss
@@ -1,5 +1,5 @@
-@import './var.scss';
-@import '../../popup/style/index.scss';
+@use './var.scss';
+@use '../../popup/style/index.scss';
 
 .o-select {
   border: 1px solid var(--select-border);
diff --git a/packages/opendesign/src/components/style/index.scss b/packages/opendesign/src/components/style/index.scss
index 910d07e8..924fc778 100644
--- a/packages/opendesign/src/components/style/index.scss
+++ b/packages/opendesign/src/components/style/index.scss
@@ -1,4 +1,4 @@
-@import './animation.scss';
+@use './animation.scss';
 
 [class^='o-'],
 [class^='o-'] * {
diff --git a/packages/opendesign/src/components/switch/style/index.scss b/packages/opendesign/src/components/switch/style/index.scss
index 4d11d5a1..f8a15e73 100644
--- a/packages/opendesign/src/components/switch/style/index.scss
+++ b/packages/opendesign/src/components/switch/style/index.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss';
 
 .o-switch {
   display: inline-block;
diff --git a/packages/opendesign/src/components/table/style/index.scss b/packages/opendesign/src/components/table/style/index.scss
index e4ac7544..07dc5cbe 100644
--- a/packages/opendesign/src/components/table/style/index.scss
+++ b/packages/opendesign/src/components/table/style/index.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss';
 
 .o-table {
   table {
diff --git a/packages/opendesign/src/components/tabs/style/index.scss b/packages/opendesign/src/components/tabs/style/index.scss
index e70ef06f..99011a04 100644
--- a/packages/opendesign/src/components/tabs/style/index.scss
+++ b/packages/opendesign/src/components/tabs/style/index.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss';
 
 .o-tabs-navs {
   display: flex;
diff --git a/packages/portal/src/main.ts b/packages/portal/src/main.ts
index b2e966ea..12026d81 100644
--- a/packages/portal/src/main.ts
+++ b/packages/portal/src/main.ts
@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 import './style.scss';
 import 'normalize.css';
+import '@opensig/opendesign/src/components/style';
 import '@opensig/opendesign/src/components/style/default-light.token.css';
 import '@opensig/opendesign/src/components/style/dark.token.css';
 
-- 
Gitee


From 5c654abddfecdf66bb84fd59443eea25325e175e Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Thu, 9 Feb 2023 11:41:13 +0800
Subject: [PATCH 5/9] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/input-number/OInputNumber.vue  |  4 +--
 .../components/input-number/style/index.scss  | 34 +++++++++----------
 .../components/input-number/style/var.scss    |  2 ++
 3 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/packages/opendesign/src/components/input-number/OInputNumber.vue b/packages/opendesign/src/components/input-number/OInputNumber.vue
index f833fa65..d082ad3e 100644
--- a/packages/opendesign/src/components/input-number/OInputNumber.vue
+++ b/packages/opendesign/src/components/input-number/OInputNumber.vue
@@ -189,12 +189,12 @@ const controlClick = (type: 'plus' | 'minus') => {
     @update:model-value="updateValue"
   >
     <template v-if="['default', 'left'].includes(props.controls)" #prepend>
-      <div v-if="props.controls === 'default'" class="o-input-number-btn" @click="controlClick('minus')">
+      <div v-if="props.controls === 'default'" class="o-input-number-btn prepend" @click="controlClick('minus')">
         <slot name="minus"><IconMinus /></slot>
       </div>
     </template>
     <template v-if="['default', 'right'].includes(props.controls)" #append>
-      <div v-if="props.controls === 'default'" class="o-input-number-btn" @click="controlClick('plus')">
+      <div v-if="props.controls === 'default'" class="o-input-number-btn append" @click="controlClick('plus')">
         <slot name="add"><IconAdd /></slot>
       </div>
     </template>
diff --git a/packages/opendesign/src/components/input-number/style/index.scss b/packages/opendesign/src/components/input-number/style/index.scss
index dff9f618..1c46c71d 100644
--- a/packages/opendesign/src/components/input-number/style/index.scss
+++ b/packages/opendesign/src/components/input-number/style/index.scss
@@ -5,12 +5,9 @@
   .o-input-prepend,
   .o-input-append {
     font-size: 14px;
-    // padding: 0;
+    padding: 0;
     align-items: stretch;
-
-    &:hover {
-      color: var(--input-number-btn-color);
-    }
+    overflow: hidden;
   }
 
   &.is-disabled {
@@ -29,27 +26,30 @@
 .o-input-number-btn {
   user-select: none;
   align-items: center;
+  justify-content: center;
   display: flex;
+  width: var(--input-height);
+  font-size: var(--input-number-icon-size);
+  &:hover {
+    color: var(--input-number-btn-color);
+    background-color: var(--input-number-btn-bg);
+  }
+  .o-input-shape-round & {
+    &.append {
+      padding-right: 2px;
+    }
+    &.prepend {
+      padding-left: 2px;
+    }
+  }
 }
 
 .o-input-number-size-small {
   width: 90px;
-  .o-input-number-btn {
-    padding-left: 2px;
-  }
-  .o-input-number-btn-icon {
-    padding: 0 4px;
-  }
 }
 .o-input-number-size-normal {
   width: 120px;
-  .o-input-number-btn-icon {
-    padding: 0 8px;
-  }
 }
 .o-input-number-size-large {
   width: 160px;
-  .o-input-number-btn-icon {
-    padding: 0 12px;
-  }
 }
diff --git a/packages/opendesign/src/components/input-number/style/var.scss b/packages/opendesign/src/components/input-number/style/var.scss
index b57e42a5..f9e25055 100644
--- a/packages/opendesign/src/components/input-number/style/var.scss
+++ b/packages/opendesign/src/components/input-number/style/var.scss
@@ -1,5 +1,7 @@
 .o-input-number {
+  --input-number-icon-size: 16px;
   --input-number-btn-color: var(--o-color-primary1);
+  --input-number-btn-bg: var(--o-color-bg2);
   --input-number-btn-bg-disabled: var(--o-color-info4);
   --input-number-btn-color-disabled: var(--o-color-text4);
 }
-- 
Gitee


From e411ea59459639c478515dfeb41960d83627c19c Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Thu, 9 Feb 2023 21:57:58 +0800
Subject: [PATCH 6/9] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=95=B0=E5=AD=97?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/input-number.md                 |   6 +
 .../input-number/NumberControls.vue           |   0
 .../components/input-number/OInputNumber.vue  | 181 +++++++++++++-----
 .../__demo__/IndexInputNumber.vue             |   4 +-
 .../__demo__/InputNumberBasic.vue             |   6 +-
 .../__demo__/InputNumberEvent.vue             |  32 +++-
 .../input-number/__demo__/InputNumberSlot.vue |   4 +-
 .../components/input-number/input-number.ts   |  39 ++--
 .../components/input-number/style/index.scss  |  21 +-
 .../src/components/input/OInput.vue           |  20 +-
 .../opendesign/src/components/input/input.ts  |   4 +-
 11 files changed, 223 insertions(+), 94 deletions(-)
 delete mode 100644 packages/opendesign/src/components/input-number/NumberControls.vue

diff --git a/packages/docs/input-number.md b/packages/docs/input-number.md
index 6d4aa774..0ceb8d2c 100644
--- a/packages/docs/input-number.md
+++ b/packages/docs/input-number.md
@@ -32,3 +32,9 @@
 
 -
 - 触发`blur`事件，参数：(currentValue, event)
+
+parse/format
+
+1. 当 change 事件时，执行 format
+
+2.
diff --git a/packages/opendesign/src/components/input-number/NumberControls.vue b/packages/opendesign/src/components/input-number/NumberControls.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/packages/opendesign/src/components/input-number/OInputNumber.vue b/packages/opendesign/src/components/input-number/OInputNumber.vue
index d082ad3e..196f683f 100644
--- a/packages/opendesign/src/components/input-number/OInputNumber.vue
+++ b/packages/opendesign/src/components/input-number/OInputNumber.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { ref, watch, computed } from 'vue';
 import { defaultSize, SizeT, ShapeT } from '../_shared/global';
 import { IconMinus, IconAdd } from '../icons';
 import { OInput } from '../input';
-import { isValidNumber, getInputValueString, getRealValue } from './input-number';
+import { isValidNumber, correctValue, getRealValue } from './input-number';
+import { isFunction, isUndefined } from '../_shared/is';
 
 interface InputPropT {
   /**
@@ -76,7 +77,7 @@ interface InputPropT {
 }
 const props = withDefaults(defineProps<InputPropT>(), {
   modelValue: undefined,
-  defaultValue: '',
+  defaultValue: undefined,
   step: 1,
   min: undefined,
   max: undefined,
@@ -92,80 +93,141 @@ const props = withDefaults(defineProps<InputPropT>(), {
 });
 
 const emits = defineEmits<{
-  (e: 'update:modelValue', value: string | number): void;
-  (e: 'change', value: string | number): void;
-  (e: 'input', value: string | number, evt: Event): void;
-  (e: 'blur', value: string | number, evt: FocusEvent): void;
-  (e: 'focus', value: string | number, evt: FocusEvent): void;
-  (e: 'pressEnter', value: string | number, evt: Event): void;
-  (e: 'update:value', value: string | number, evt: Event): void;
+  (e: 'update:modelValue', value: number): void;
+  (e: 'change', value: number): void;
+  (e: 'input', value: string, evt: Event): void;
+  (e: 'blur', value: number, evt: FocusEvent): void;
+  (e: 'focus', value: number, evt: FocusEvent): void;
+  (e: 'plus', value: number, evt: MouseEvent): void;
+  (e: 'minus', value: number, evt: MouseEvent): void;
+  (e: 'pressEnter', value: number, evt: Event): void;
 }>();
 
-const currentValue = ref<number | string>(props.modelValue ?? props.defaultValue);
+const currentValue = ref<number | string | undefined>(props.modelValue ?? props.defaultValue);
 const isValid = ref(isValidNumber(currentValue.value, props.min, props.max));
-let realValue = getRealValue(currentValue.value);
-let lastValidValue: number | string = '';
 
 watch(
   () => props.modelValue,
   (val) => {
-    currentValue.value = getInputValueString(val);
     isValid.value = isValidNumber(val, props.min, props.max);
+    // currentValue.value = val;
+    if (isFunction(props.format)) {
+      currentValue.value = props.format(val ?? '');
+    } else {
+      currentValue.value = val;
+    }
+    console.log('watch', val);
   }
 );
 
-const parseValue = (val: string | number) => {
-  if (!isValid.value) {
-    currentValue.value = lastValidValue;
+let numberValue = getRealValue(currentValue.value);
+let lastNumberValue = numberValue;
+
+const canAdd = computed(() => {
+  if (props.disabled) {
+    return false;
+  }
+  const n = Number(currentValue.value);
+  if (!isUndefined(props.max) && props.max <= n) {
+    return false;
+  }
+  return true;
+});
+const canMinus = computed(() => {
+  if (props.disabled) {
+    return false;
+  }
+  const n = Number(currentValue.value);
+  if (!isUndefined(props.min) && props.min >= n) {
+    return false;
+  }
+  return true;
+});
+
+const updateValue = (val: string) => {
+  const v = isFunction(props.parse) ? props.parse(val) : val;
+  // const v = val;
+
+  if (isValid.value) {
+    numberValue = getRealValue(v);
   } else {
-    realValue = getRealValue(val);
-    if (realValue !== currentValue.value) {
-      currentValue.value = realValue;
+    // 不合法数据矫正
+    numberValue = correctValue(v, lastNumberValue, props.min, props.max);
+    isValid.value = true;
+  }
+
+  emits('update:modelValue', numberValue);
 
-      emits('update:modelValue', realValue);
-      emits('change', realValue);
+  if (numberValue !== lastNumberValue) {
+    emits('change', numberValue);
+  } else {
+    if (isFunction(props.format)) {
+      currentValue.value = props.format(numberValue);
+    } else {
+      // 更新输入框显示的值
+      currentValue.value = numberValue;
     }
   }
-  isValid.value = true;
-};
-const updateValue = (val: string | number) => {
-  isValid.value = isValidNumber(val);
-  currentValue.value = val;
 
-  if (isValid.value && props.updateOnInput) {
-    parseValue(val);
-  }
+  lastNumberValue = numberValue;
+  return numberValue;
 };
 
-const onInput = (val: string | number, evt: Event) => {
+const onInput = (val: string, evt: Event) => {
   emits('input', val, evt);
 };
 
-const onFocus = (val: string | number, evt: FocusEvent) => {
-  lastValidValue = currentValue.value;
-  emits('focus', realValue, evt);
+const onFocus = (val: string, evt: FocusEvent) => {
+  lastNumberValue = numberValue;
+  emits('focus', numberValue, evt);
+  // console.log('focus', numberValue);
+};
+const onBlur = (val: string, evt: FocusEvent) => {
+  const v = updateValue(val);
+  emits('blur', v, evt);
 };
-const onBlur = (val: string | number, evt: FocusEvent) => {
-  parseValue(val);
-  lastValidValue = realValue;
-  emits('blur', realValue, evt);
+const onPressEnter = (val: string, evt: Event): void => {
+  const v = updateValue(val);
+
+  emits('pressEnter', v, evt);
 };
-const onPressEnter = (val: string | number, evt: FocusEvent) => {
-  parseValue(val);
-  lastValidValue = realValue;
-  emits('pressEnter', realValue, evt);
+
+const onChange = (val: string) => {
+  // console.log('change', val);
+  if (isValid.value) {
+    updateValue(val);
+  }
 };
 
-const controlClick = (type: 'plus' | 'minus') => {
+const onUpdateModelValue = (val: string) => {
+  console.log('update model');
+  isValid.value = isValidNumber(val, props.min, props.max, props.parse);
+
+  if (isValid.value) {
+    numberValue = getRealValue(val, undefined, undefined, props.parse);
+    if (!isFunction(props.format)) {
+      emits('update:modelValue', numberValue);
+      lastNumberValue = numberValue;
+    }
+  }
+  currentValue.value = val;
+};
+
+const controlClick = (type: 'plus' | 'minus', e: MouseEvent) => {
   if (props.disabled) {
     return;
   }
-  if (type === 'plus') {
-    realValue += props.step;
-  } else {
-    realValue -= props.step;
+  let v = Number.isNaN(numberValue) ? 0 : numberValue;
+
+  if (type === 'plus' && canAdd.value) {
+    v += props.step;
+    v = updateValue(String(v));
+    emits('plus', v, e);
+  } else if (type === 'minus' && canMinus.value) {
+    v -= props.step;
+    v = updateValue(String(v));
+    emits('minus', v, e);
   }
-  parseValue(realValue);
 };
 </script>
 <template>
@@ -180,21 +242,34 @@ const controlClick = (type: 'plus' | 'minus') => {
     :disabled="props.disabled"
     :readonly="props.readonly"
     :clearable="false"
-    :parse="props.parse"
-    :format="props.format"
     @input="onInput"
+    @change="onChange"
     @blur="onBlur"
     @focus="onFocus"
     @press-enter="onPressEnter"
-    @update:model-value="updateValue"
+    @update:model-value="onUpdateModelValue"
   >
     <template v-if="['default', 'left'].includes(props.controls)" #prepend>
-      <div v-if="props.controls === 'default'" class="o-input-number-btn prepend" @click="controlClick('minus')">
+      <div
+        v-if="props.controls === 'default'"
+        class="o-input-number-btn prepend"
+        :class="{
+          'is-disabled': !canMinus,
+        }"
+        @click="(e) => controlClick('minus', e)"
+      >
         <slot name="minus"><IconMinus /></slot>
       </div>
     </template>
     <template v-if="['default', 'right'].includes(props.controls)" #append>
-      <div v-if="props.controls === 'default'" class="o-input-number-btn append" @click="controlClick('plus')">
+      <div
+        v-if="props.controls === 'default'"
+        class="o-input-number-btn append"
+        :class="{
+          'is-disabled': !canAdd,
+        }"
+        @click="(e) => controlClick('plus', e)"
+      >
         <slot name="add"><IconAdd /></slot>
       </div>
     </template>
diff --git a/packages/opendesign/src/components/input-number/__demo__/IndexInputNumber.vue b/packages/opendesign/src/components/input-number/__demo__/IndexInputNumber.vue
index fbbf8d79..fce85853 100644
--- a/packages/opendesign/src/components/input-number/__demo__/IndexInputNumber.vue
+++ b/packages/opendesign/src/components/input-number/__demo__/IndexInputNumber.vue
@@ -4,13 +4,13 @@ import '../../option/style';
 
 import InputNumberBasic from './InputNumberBasic.vue';
 import InputNumberEvent from './InputNumberEvent.vue';
-import InputNumberSlot from './InputNumberSlot.vue';
+// import InputNumberSlot from './InputNumberSlot.vue';
 </script>
 <template>
   <div class="page-demo">
     <InputNumberBasic />
     <InputNumberEvent />
-    <InputNumberSlot />
+    <!-- <InputNumberSlot /> -->
   </div>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue b/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue
index 931987e1..7988604c 100644
--- a/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue
+++ b/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue
@@ -57,11 +57,11 @@ const val4 = ref('1px');
   <h4>Disabled</h4>
   <section>
     <div>val1:{{ val1 }}</div>
-    <OInputNumber v-model="val2" disabled />
-    <OInputNumber v-model="val2" disabled style="width: 150px">
+    <OInputNumber v-model="val1" disabled />
+    <OInputNumber v-model="val1" disabled style="width: 150px">
       <template #prefix>$</template>
     </OInputNumber>
-    <OInputNumber v-model="val2" disabled style="width: 150px">
+    <OInputNumber v-model="val1" disabled style="width: 150px">
       <template #suffix> 元 </template>
     </OInputNumber>
   </section>
diff --git a/packages/opendesign/src/components/input-number/__demo__/InputNumberEvent.vue b/packages/opendesign/src/components/input-number/__demo__/InputNumberEvent.vue
index 345b8efa..1e353858 100644
--- a/packages/opendesign/src/components/input-number/__demo__/InputNumberEvent.vue
+++ b/packages/opendesign/src/components/input-number/__demo__/InputNumberEvent.vue
@@ -2,13 +2,16 @@
 import { ref } from 'vue';
 import { OInputNumber } from '../index';
 
-const val1 = ref(0);
+const val1 = ref(NaN);
 const event = ref('--');
 
 const printEvent = (evt: string, val?: string | number) => {
-  console.log(evt, val);
+  console.log(`[${evt}]`, val);
   event.value = evt;
 };
+
+const format = (val: string | number) => (Number.isNaN(val) ? '' : `$${val ?? ''}`);
+const parse = (val: string) => val.replace(/^\$/g, '');
 </script>
 <template>
   <h4>Event</h4>
@@ -17,7 +20,32 @@ const printEvent = (evt: string, val?: string | number) => {
     <div>
       <OInputNumber
         v-model="val1"
+        :min="-2"
+        :max="5"
+        style="width: 200px"
+        @blur="(v) => printEvent('blur', v)"
+        @minus="(v) => printEvent('minus', v)"
+        @plus="(v) => printEvent('plus', v)"
+        @change="(v) => printEvent('change', v)"
+        @input="(v) => printEvent('input', v)"
+        @focus="(v) => printEvent('focus', v)"
+        @press-enter="(v) => printEvent('press-enter', v)"
+      />
+      value: {{ val1 }}; event:{{ event }};
+    </div>
+  </section>
+  <section>
+    <div>
+      <OInputNumber
+        v-model="val1"
+        :min="-2"
+        :max="15"
+        style="width: 200px"
+        :format="format"
+        :parse="parse"
         @blur="(v) => printEvent('blur', v)"
+        @minus="(v) => printEvent('minus', v)"
+        @plus="(v) => printEvent('plus', v)"
         @change="(v) => printEvent('change', v)"
         @input="(v) => printEvent('input', v)"
         @focus="(v) => printEvent('focus', v)"
diff --git a/packages/opendesign/src/components/input-number/__demo__/InputNumberSlot.vue b/packages/opendesign/src/components/input-number/__demo__/InputNumberSlot.vue
index 96555d07..9da03007 100644
--- a/packages/opendesign/src/components/input-number/__demo__/InputNumberSlot.vue
+++ b/packages/opendesign/src/components/input-number/__demo__/InputNumberSlot.vue
@@ -9,8 +9,8 @@ const val2 = ref(1000);
   <h4>Prefix & Suffix</h4>
   <section>
     <OInputNumber v-model:value="val1" style="width: 150px">
-      <template #control-left>Plus</template>
-      <template #control-right>Minus</template>
+      <template #minus>Plus</template>
+      <template #add>Minus</template>
     </OInputNumber>
     <OInputNumber v-model:value="val2" style="width: 150px">
       <template #prefix> $ </template>
diff --git a/packages/opendesign/src/components/input-number/input-number.ts b/packages/opendesign/src/components/input-number/input-number.ts
index 5e34b3eb..3d24dcf4 100644
--- a/packages/opendesign/src/components/input-number/input-number.ts
+++ b/packages/opendesign/src/components/input-number/input-number.ts
@@ -1,12 +1,16 @@
-import { isNumber } from '../_shared/is';
+import { isFunction, isNumber, isUndefined } from '../_shared/is';
 
-export function isValidNumber(val: string | number | undefined, min?: number, max?: number) {
-  if (isNumber(val) || !val || isNumber(Number(val))) {
-    const v = Number(val);
-    if (min && v < min) {
+export function isValidNumber(val?: string | number, min?: number, max?: number, parse?: (value: string) => string) {
+  if (Number.isNaN(val)) {
+    return true;
+  }
+  const value = isFunction(parse) ? parse(String(val)) : val;
+  if (isNumber(Number(value))) {
+    const v = Number(value);
+    if (!isUndefined(min) && v < min) {
       return false;
     }
-    if (max && v > max) {
+    if (!isUndefined(max) && v > max) {
       return false;
     }
 
@@ -15,10 +19,13 @@ export function isValidNumber(val: string | number | undefined, min?: number, ma
   return false;
 }
 
-export function getInputValueString(val: string | number | undefined, min?: number, max?: number) {
-  let rlt: number | string = '';
-  if (isValidNumber(val)) {
-    rlt = Number(val);
+export function getRealValue(val?: string | number, min?: number, max?: number, parse?: (value: string) => string) {
+
+  const value = isFunction(parse) ? parse(String(val)) : val;
+
+  let rlt: number = NaN;
+  if (value !== '' && isValidNumber(value, min, max)) {
+    rlt = Number(value);
     if (min !== undefined) {
       rlt = rlt < min ? min : rlt;
     }
@@ -29,6 +36,14 @@ export function getInputValueString(val: string | number | undefined, min?: numb
   return rlt;
 }
 
-export function getRealValue(val: string | number) {
-  return isValidNumber(val) ? Number(val) : 0;
+export function correctValue(val: string | number, lastVal: number, min?: number, max?: number) {
+  const v = Number(val);
+  if (isNumber(v)) {
+    if (!isUndefined(max) && v > max) {
+      return max;
+    } if (!isUndefined(min) && v < min) {
+      return min;
+    }
+  }
+  return lastVal;
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/components/input-number/style/index.scss b/packages/opendesign/src/components/input-number/style/index.scss
index 1c46c71d..f5fbb6e3 100644
--- a/packages/opendesign/src/components/input-number/style/index.scss
+++ b/packages/opendesign/src/components/input-number/style/index.scss
@@ -10,13 +10,13 @@
     overflow: hidden;
   }
 
-  &.is-disabled {
-    .o-input-prepend,
-    .o-input-append {
-      background-color: var(--input-number-btn-bg-disabled);
-      color: var(--input-number-btn-color-disabled);
-    }
-  }
+  // &.is-disabled {
+  //   .o-input-prepend,
+  //   .o-input-append {
+  //     background-color: var(--input-number-btn-bg-disabled);
+  //     color: var(--input-number-btn-color-disabled);
+  //   }
+  // }
   &.is-invalid {
     .o-input-input {
       text-decoration: line-through;
@@ -28,12 +28,17 @@
   align-items: center;
   justify-content: center;
   display: flex;
-  width: var(--input-height);
+  min-width: var(--input-height);
   font-size: var(--input-number-icon-size);
   &:hover {
     color: var(--input-number-btn-color);
     background-color: var(--input-number-btn-bg);
   }
+  &.is-disabled {
+    cursor: not-allowed;
+    background-color: var(--input-number-btn-bg-disabled);
+    color: var(--input-number-btn-color-disabled);
+  }
   .o-input-shape-round & {
     &.append {
       padding-right: 2px;
diff --git a/packages/opendesign/src/components/input/OInput.vue b/packages/opendesign/src/components/input/OInput.vue
index 3917df80..fd37793b 100644
--- a/packages/opendesign/src/components/input/OInput.vue
+++ b/packages/opendesign/src/components/input/OInput.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, computed, watch, nextTick } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { defaultSize, defaultShape, SizeT, ShapeT } from '../_shared/global';
-import { isFunction, isNull, isUndefined } from '../_shared/is';
+import { isFunction } from '../_shared/is';
 import { IconX } from '../icons';
 import { trigger } from '../_shared/event';
 import { Enter } from '../_shared/keycode';
@@ -74,13 +74,13 @@ const props = withDefaults(defineProps<InputPropT>(), {
 });
 
 const emits = defineEmits<{
-  (e: 'update:modelValue', value: string | number): void;
-  (e: 'change', value: string | number): void;
+  (e: 'update:modelValue', value: string): void;
+  (e: 'change', value: string): void;
   (e: 'input', value: string, evt: Event): void;
-  (e: 'blur', value: string | number, evt: FocusEvent): void;
-  (e: 'focus', value: string | number, evt: FocusEvent): void;
+  (e: 'blur', value: string, evt: FocusEvent): void;
+  (e: 'focus', value: string, evt: FocusEvent): void;
   (e: 'clear', evt: Event): void;
-  (e: 'pressEnter', value: string | number, evt: KeyboardEvent): void;
+  (e: 'pressEnter', value: string, evt: KeyboardEvent): void;
 }>();
 
 const inputRef = ref<HTMLElement | null>(null);
@@ -108,7 +108,7 @@ const statusClass = computed(() => (status.value || props.status ? `is-${status.
 
 // 是否聚焦状态
 const isFocus = ref(false);
-let lastValue: number | string = realValue.value;
+let lastValue: string = realValue.value;
 
 function updateValue(val: string) {
   const value = isFunction(props.parse) ? props.parse(val) : val;
@@ -158,7 +158,7 @@ const onFocus = (e: FocusEvent) => {
   if (isFocus.value) {
     return;
   }
-  console.log('onFocus', clickInside);
+  // console.log('onFocus', clickInside);
   isFocus.value = true;
   emits('focus', realValue.value, e);
   // console.log('focus', realValue.value);
@@ -169,7 +169,7 @@ const onBlur = (e: FocusEvent) => {
     clickInside = false;
     return;
   }
-  console.log('onBlur', clickInside);
+  // console.log('onBlur', clickInside);
   isFocus.value = false;
   const val = (e.target as HTMLInputElement)?.value;
   const v = updateValue(val);
diff --git a/packages/opendesign/src/components/input/input.ts b/packages/opendesign/src/components/input/input.ts
index a5cc1e5f..7c05e51f 100644
--- a/packages/opendesign/src/components/input/input.ts
+++ b/packages/opendesign/src/components/input/input.ts
@@ -1,7 +1,7 @@
-import { isNull, isUndefined, isNumber } from '../_shared/is';
+import { isNull, isUndefined } from '../_shared/is';
 
 export function toInputString(val: unknown): string {
-  if (isUndefined(val) || isNull(val) || (isNumber(val as number) && isNaN(val as number))) {
+  if (isUndefined(val) || isNull(val) || (typeof val === 'number' && isNaN(val as number))) {
     return '';
   }
   return String(val);
-- 
Gitee


From fe396ebd0051568542462bc7b7f630af39cd370c Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Thu, 9 Feb 2023 22:26:40 +0800
Subject: [PATCH 7/9] =?UTF-8?q?=E5=A2=9E=E5=8A=A0controls=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/input-number/OInputNumber.vue  | 47 +++++++++++++++++--
 .../__demo__/IndexInputNumber.vue             |  6 +--
 .../__demo__/InputNumberBasic.vue             |  8 ++++
 .../input-number/__demo__/InputNumberSlot.vue |  8 ++++
 .../components/input-number/style/index.scss  | 31 +++++++++++-
 .../components/input-number/style/var.scss    |  3 +-
 6 files changed, 93 insertions(+), 10 deletions(-)

diff --git a/packages/opendesign/src/components/input-number/OInputNumber.vue b/packages/opendesign/src/components/input-number/OInputNumber.vue
index 196f683f..5c7c265b 100644
--- a/packages/opendesign/src/components/input-number/OInputNumber.vue
+++ b/packages/opendesign/src/components/input-number/OInputNumber.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue';
 import { defaultSize, SizeT, ShapeT } from '../_shared/global';
-import { IconMinus, IconAdd } from '../icons';
+import { IconMinus, IconAdd, IconChevronDown, IconChevronUp } from '../icons';
 import { OInput } from '../input';
 import { isValidNumber, correctValue, getRealValue } from './input-number';
 import { isFunction, isUndefined } from '../_shared/is';
@@ -110,13 +110,12 @@ watch(
   () => props.modelValue,
   (val) => {
     isValid.value = isValidNumber(val, props.min, props.max);
-    // currentValue.value = val;
     if (isFunction(props.format)) {
       currentValue.value = props.format(val ?? '');
     } else {
       currentValue.value = val;
     }
-    console.log('watch', val);
+    // console.log('watch', val);
   }
 );
 
@@ -200,7 +199,7 @@ const onChange = (val: string) => {
 };
 
 const onUpdateModelValue = (val: string) => {
-  console.log('update model');
+  // console.log('update model');
   isValid.value = isValidNumber(val, props.min, props.max, props.parse);
 
   if (isValid.value) {
@@ -260,6 +259,26 @@ const controlClick = (type: 'plus' | 'minus', e: MouseEvent) => {
       >
         <slot name="minus"><IconMinus /></slot>
       </div>
+      <div v-if="props.controls === 'left'" class="o-input-number-btn is-vertical">
+        <div
+          class="o-input-number-btn-plus"
+          :class="{
+            'is-disabled': !canAdd,
+          }"
+          @click="(e) => controlClick('plus', e)"
+        >
+          <slot name="add"><IconChevronUp class="o-input-number-icon-plus" /></slot>
+        </div>
+        <div
+          class="o-input-number-btn-minus"
+          :class="{
+            'is-disabled': !canMinus,
+          }"
+          @click="(e) => controlClick('minus', e)"
+        >
+          <slot name="minus"><IconChevronDown class="o-input-number-icon-minus" /></slot>
+        </div>
+      </div>
     </template>
     <template v-if="['default', 'right'].includes(props.controls)" #append>
       <div
@@ -272,6 +291,26 @@ const controlClick = (type: 'plus' | 'minus', e: MouseEvent) => {
       >
         <slot name="add"><IconAdd /></slot>
       </div>
+      <div v-if="props.controls === 'right'" class="o-input-number-btn is-vertical">
+        <div
+          class="o-input-number-btn-plus"
+          :class="{
+            'is-disabled': !canAdd,
+          }"
+          @click="(e) => controlClick('plus', e)"
+        >
+          <slot name="add"><IconChevronUp class="o-input-number-icon-plus" /></slot>
+        </div>
+        <div
+          class="o-input-number-btn-minus"
+          :class="{
+            'is-disabled': !canMinus,
+          }"
+          @click="(e) => controlClick('minus', e)"
+        >
+          <slot name="minus"><IconChevronDown class="o-input-number-icon-minus" /></slot>
+        </div>
+      </div>
     </template>
     <template v-if="$slots.prefix" #prefix>
       <slot name="prefix"></slot>
diff --git a/packages/opendesign/src/components/input-number/__demo__/IndexInputNumber.vue b/packages/opendesign/src/components/input-number/__demo__/IndexInputNumber.vue
index fce85853..08c7f8cc 100644
--- a/packages/opendesign/src/components/input-number/__demo__/IndexInputNumber.vue
+++ b/packages/opendesign/src/components/input-number/__demo__/IndexInputNumber.vue
@@ -4,13 +4,13 @@ import '../../option/style';
 
 import InputNumberBasic from './InputNumberBasic.vue';
 import InputNumberEvent from './InputNumberEvent.vue';
-// import InputNumberSlot from './InputNumberSlot.vue';
+import InputNumberSlot from './InputNumberSlot.vue';
 </script>
 <template>
   <div class="page-demo">
     <InputNumberBasic />
-    <InputNumberEvent />
-    <!-- <InputNumberSlot /> -->
+    <!-- <InputNumberEvent /> -->
+    <InputNumberSlot />
   </div>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue b/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue
index 7988604c..28b350bb 100644
--- a/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue
+++ b/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue
@@ -36,6 +36,14 @@ const val4 = ref('1px');
       controls none:
       <OInputNumber v-model="val1" controls="none" />
     </div>
+    <div class="col">
+      controls left:
+      <OInputNumber v-model="val1" controls="left" />
+    </div>
+    <div class="right">
+      controls left:
+      <OInputNumber v-model="val1" controls="right" :max="5" />
+    </div>
   </section>
   <h4>Size</h4>
   <div>val2:{{ val2 }}</div>
diff --git a/packages/opendesign/src/components/input-number/__demo__/InputNumberSlot.vue b/packages/opendesign/src/components/input-number/__demo__/InputNumberSlot.vue
index 9da03007..982b5453 100644
--- a/packages/opendesign/src/components/input-number/__demo__/InputNumberSlot.vue
+++ b/packages/opendesign/src/components/input-number/__demo__/InputNumberSlot.vue
@@ -12,6 +12,14 @@ const val2 = ref(1000);
       <template #minus>Plus</template>
       <template #add>Minus</template>
     </OInputNumber>
+    <OInputNumber v-model:value="val1" controls="left" style="width: 150px">
+      <template #minus>+</template>
+      <template #add>-</template>
+    </OInputNumber>
+    <OInputNumber v-model:value="val1" controls="right" style="width: 150px">
+      <template #minus>+</template>
+      <template #add>-</template>
+    </OInputNumber>
     <OInputNumber v-model:value="val2" style="width: 150px">
       <template #prefix> $ </template>
     </OInputNumber>
diff --git a/packages/opendesign/src/components/input-number/style/index.scss b/packages/opendesign/src/components/input-number/style/index.scss
index f5fbb6e3..92b5be9b 100644
--- a/packages/opendesign/src/components/input-number/style/index.scss
+++ b/packages/opendesign/src/components/input-number/style/index.scss
@@ -30,8 +30,11 @@
   display: flex;
   min-width: var(--input-height);
   font-size: var(--input-number-icon-size);
-  &:hover {
-    color: var(--input-number-btn-color);
+  flex-wrap: wrap;
+  color: var(--input-number-btn-color);
+
+  &:not(.is-vertical):hover {
+    color: var(--input-number-btn-color-hover);
     background-color: var(--input-number-btn-bg);
   }
   &.is-disabled {
@@ -39,6 +42,7 @@
     background-color: var(--input-number-btn-bg-disabled);
     color: var(--input-number-btn-color-disabled);
   }
+
   .o-input-shape-round & {
     &.append {
       padding-right: 2px;
@@ -48,6 +52,29 @@
     }
   }
 }
+.o-input-number-btn-minus,
+.o-input-number-btn-plus {
+  width: 100%;
+  height: 50%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  overflow: hidden;
+  position: relative;
+  &:hover {
+    color: var(--input-number-btn-color-hover);
+    background-color: var(--input-number-btn-bg);
+  }
+}
+.o-input-number-icon-minus {
+  position: absolute;
+  margin-top: -4px;
+}
+.o-input-number-icon-plus {
+  position: absolute;
+  margin-bottom: -4px;
+}
 
 .o-input-number-size-small {
   width: 90px;
diff --git a/packages/opendesign/src/components/input-number/style/var.scss b/packages/opendesign/src/components/input-number/style/var.scss
index f9e25055..bea38d14 100644
--- a/packages/opendesign/src/components/input-number/style/var.scss
+++ b/packages/opendesign/src/components/input-number/style/var.scss
@@ -1,6 +1,7 @@
 .o-input-number {
   --input-number-icon-size: 16px;
-  --input-number-btn-color: var(--o-color-primary1);
+  --input-number-btn-color: var(--o-color-text3);
+  --input-number-btn-color-hover: var(--o-color-primary1);
   --input-number-btn-bg: var(--o-color-bg2);
   --input-number-btn-bg-disabled: var(--o-color-info4);
   --input-number-btn-color-disabled: var(--o-color-text4);
-- 
Gitee


From 1ada34ae1b4a858003a06f8091955551794ba562 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Thu, 9 Feb 2023 22:28:20 +0800
Subject: [PATCH 8/9] =?UTF-8?q?props=E6=9B=B4=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/input-number/OInputNumber.vue     | 12 ++++++------
 .../input-number/__demo__/IndexInputNumber.vue       |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/opendesign/src/components/input-number/OInputNumber.vue b/packages/opendesign/src/components/input-number/OInputNumber.vue
index 5c7c265b..651a3ce4 100644
--- a/packages/opendesign/src/components/input-number/OInputNumber.vue
+++ b/packages/opendesign/src/components/input-number/OInputNumber.vue
@@ -60,7 +60,7 @@ interface InputPropT {
   /**
    * 控制按钮位置
    */
-  controls?: 'default' | 'right' | 'left' | 'none';
+  controls?: 'both' | 'right' | 'left' | 'none';
   /**
    * 是否在输入合法时，更新modelvalue
    */
@@ -88,7 +88,7 @@ const props = withDefaults(defineProps<InputPropT>(), {
   parse: undefined,
   format: undefined,
   status: undefined,
-  controls: 'default',
+  controls: 'both',
   updateOnInput: true,
 });
 
@@ -248,9 +248,9 @@ const controlClick = (type: 'plus' | 'minus', e: MouseEvent) => {
     @press-enter="onPressEnter"
     @update:model-value="onUpdateModelValue"
   >
-    <template v-if="['default', 'left'].includes(props.controls)" #prepend>
+    <template v-if="['both', 'left'].includes(props.controls)" #prepend>
       <div
-        v-if="props.controls === 'default'"
+        v-if="props.controls === 'both'"
         class="o-input-number-btn prepend"
         :class="{
           'is-disabled': !canMinus,
@@ -280,9 +280,9 @@ const controlClick = (type: 'plus' | 'minus', e: MouseEvent) => {
         </div>
       </div>
     </template>
-    <template v-if="['default', 'right'].includes(props.controls)" #append>
+    <template v-if="['both', 'right'].includes(props.controls)" #append>
       <div
-        v-if="props.controls === 'default'"
+        v-if="props.controls === 'both'"
         class="o-input-number-btn append"
         :class="{
           'is-disabled': !canAdd,
diff --git a/packages/opendesign/src/components/input-number/__demo__/IndexInputNumber.vue b/packages/opendesign/src/components/input-number/__demo__/IndexInputNumber.vue
index 08c7f8cc..fbbf8d79 100644
--- a/packages/opendesign/src/components/input-number/__demo__/IndexInputNumber.vue
+++ b/packages/opendesign/src/components/input-number/__demo__/IndexInputNumber.vue
@@ -9,7 +9,7 @@ import InputNumberSlot from './InputNumberSlot.vue';
 <template>
   <div class="page-demo">
     <InputNumberBasic />
-    <!-- <InputNumberEvent /> -->
+    <InputNumberEvent />
     <InputNumberSlot />
   </div>
 </template>
-- 
Gitee


From 81d921833c879e95fefc1e6aa6361fff4d5fab01 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 10 Feb 2023 09:49:11 +0800
Subject: [PATCH 9/9] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=BC=95=E5=85=A5?=
 =?UTF-8?q?=E6=96=B9=E5=BC=8F=E4=BF=AE=E6=94=B9=EF=BC=8C=E9=81=BF=E5=85=8D?=
 =?UTF-8?q?=E9=87=8D=E5=A4=8D=E5=BC=95=E5=85=A5=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/components/button/style/index.ts     | 1 +
 .../opendesign/src/components/checkbox-group/style/index.ts  | 1 +
 packages/opendesign/src/components/checkbox/style/index.ts   | 1 +
 packages/opendesign/src/components/divider/style/index.ts    | 1 +
 .../opendesign/src/components/input-number/style/index.scss  | 1 -
 .../opendesign/src/components/input-number/style/index.ts    | 2 ++
 packages/opendesign/src/components/input/style/index.scss    | 1 -
 packages/opendesign/src/components/input/style/index.ts      | 1 +
 packages/opendesign/src/components/link/style/index.ts       | 1 +
 packages/opendesign/src/components/option/style/index.ts     | 1 +
 .../opendesign/src/components/pagination/style/index.scss    | 4 ----
 packages/opendesign/src/components/pagination/style/index.ts | 5 +++++
 packages/opendesign/src/components/popover/style/index.scss  | 1 -
 packages/opendesign/src/components/popover/style/index.ts    | 2 ++
 packages/opendesign/src/components/popup/style/index.ts      | 1 +
 .../opendesign/src/components/radio-group/style/index.ts     | 1 +
 packages/opendesign/src/components/radio/style/index.ts      | 1 +
 packages/opendesign/src/components/select/style/index.scss   | 1 -
 packages/opendesign/src/components/select/style/index.ts     | 2 ++
 packages/opendesign/src/components/style/index.scss          | 2 +-
 packages/opendesign/src/components/switch/style/index.ts     | 1 +
 packages/opendesign/src/components/table/style/index.ts      | 1 +
 packages/opendesign/src/components/tabs/style/index.ts       | 1 +
 packages/portal/src/main.ts                                  | 2 +-
 24 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/packages/opendesign/src/components/button/style/index.ts b/packages/opendesign/src/components/button/style/index.ts
index 67aac616..591b2fbd 100644
--- a/packages/opendesign/src/components/button/style/index.ts
+++ b/packages/opendesign/src/components/button/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/checkbox-group/style/index.ts b/packages/opendesign/src/components/checkbox-group/style/index.ts
index 67aac616..591b2fbd 100644
--- a/packages/opendesign/src/components/checkbox-group/style/index.ts
+++ b/packages/opendesign/src/components/checkbox-group/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/checkbox/style/index.ts b/packages/opendesign/src/components/checkbox/style/index.ts
index 67aac616..591b2fbd 100644
--- a/packages/opendesign/src/components/checkbox/style/index.ts
+++ b/packages/opendesign/src/components/checkbox/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/divider/style/index.ts b/packages/opendesign/src/components/divider/style/index.ts
index bf3c23ac..45135602 100644
--- a/packages/opendesign/src/components/divider/style/index.ts
+++ b/packages/opendesign/src/components/divider/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
\ No newline at end of file
diff --git a/packages/opendesign/src/components/input-number/style/index.scss b/packages/opendesign/src/components/input-number/style/index.scss
index 92b5be9b..b9806789 100644
--- a/packages/opendesign/src/components/input-number/style/index.scss
+++ b/packages/opendesign/src/components/input-number/style/index.scss
@@ -1,5 +1,4 @@
 @use './var.scss';
-@use '../../input/style/index.scss';
 
 .o-input-number {
   .o-input-prepend,
diff --git a/packages/opendesign/src/components/input-number/style/index.ts b/packages/opendesign/src/components/input-number/style/index.ts
index 67aac616..cb6997f1 100644
--- a/packages/opendesign/src/components/input-number/style/index.ts
+++ b/packages/opendesign/src/components/input-number/style/index.ts
@@ -1 +1,3 @@
+import '../../style';
+import '../../input/style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/input/style/index.scss b/packages/opendesign/src/components/input/style/index.scss
index f13d6948..c37f0eaa 100644
--- a/packages/opendesign/src/components/input/style/index.scss
+++ b/packages/opendesign/src/components/input/style/index.scss
@@ -1,5 +1,4 @@
 @use './var.scss';
-@use '../../popup/style/index.scss';
 
 .o-input {
   cursor: pointer;
diff --git a/packages/opendesign/src/components/input/style/index.ts b/packages/opendesign/src/components/input/style/index.ts
index 67aac616..591b2fbd 100644
--- a/packages/opendesign/src/components/input/style/index.ts
+++ b/packages/opendesign/src/components/input/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/link/style/index.ts b/packages/opendesign/src/components/link/style/index.ts
index 67aac616..591b2fbd 100644
--- a/packages/opendesign/src/components/link/style/index.ts
+++ b/packages/opendesign/src/components/link/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/option/style/index.ts b/packages/opendesign/src/components/option/style/index.ts
index 67aac616..591b2fbd 100644
--- a/packages/opendesign/src/components/option/style/index.ts
+++ b/packages/opendesign/src/components/option/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/pagination/style/index.scss b/packages/opendesign/src/components/pagination/style/index.scss
index dd50fa50..b470b419 100644
--- a/packages/opendesign/src/components/pagination/style/index.scss
+++ b/packages/opendesign/src/components/pagination/style/index.scss
@@ -1,8 +1,4 @@
 @use './var.scss';
-@use '../../popover/style/index.scss';
-@use '../../input-number/style/index.scss';
-@use '../../select/style/index.scss';
-@use '../../option/style/index.scss';
 
 .o-pagination-wrap {
   display: flex;
diff --git a/packages/opendesign/src/components/pagination/style/index.ts b/packages/opendesign/src/components/pagination/style/index.ts
index 67aac616..aa8a4285 100644
--- a/packages/opendesign/src/components/pagination/style/index.ts
+++ b/packages/opendesign/src/components/pagination/style/index.ts
@@ -1 +1,6 @@
+import '../../style';
+import '../../popover/style';
+import '../../input-number/style';
+import '../../select/style';
+import '../../option/style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/popover/style/index.scss b/packages/opendesign/src/components/popover/style/index.scss
index 3b7e928c..b25cd1c7 100644
--- a/packages/opendesign/src/components/popover/style/index.scss
+++ b/packages/opendesign/src/components/popover/style/index.scss
@@ -1,5 +1,4 @@
 @use './var.scss';
-@use '../../popup/style/index.scss';
 
 .o-popover-wrap {
   background-color: var(--popup-bg);
diff --git a/packages/opendesign/src/components/popover/style/index.ts b/packages/opendesign/src/components/popover/style/index.ts
index 67aac616..97806f75 100644
--- a/packages/opendesign/src/components/popover/style/index.ts
+++ b/packages/opendesign/src/components/popover/style/index.ts
@@ -1 +1,3 @@
+import '../../style';
+import '../../popup/style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/popup/style/index.ts b/packages/opendesign/src/components/popup/style/index.ts
index 67aac616..591b2fbd 100644
--- a/packages/opendesign/src/components/popup/style/index.ts
+++ b/packages/opendesign/src/components/popup/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/radio-group/style/index.ts b/packages/opendesign/src/components/radio-group/style/index.ts
index 67aac616..591b2fbd 100644
--- a/packages/opendesign/src/components/radio-group/style/index.ts
+++ b/packages/opendesign/src/components/radio-group/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/radio/style/index.ts b/packages/opendesign/src/components/radio/style/index.ts
index 67aac616..591b2fbd 100644
--- a/packages/opendesign/src/components/radio/style/index.ts
+++ b/packages/opendesign/src/components/radio/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/select/style/index.scss b/packages/opendesign/src/components/select/style/index.scss
index 4d6c96a8..b66148cc 100644
--- a/packages/opendesign/src/components/select/style/index.scss
+++ b/packages/opendesign/src/components/select/style/index.scss
@@ -1,5 +1,4 @@
 @use './var.scss';
-@use '../../popup/style/index.scss';
 
 .o-select {
   border: 1px solid var(--select-border);
diff --git a/packages/opendesign/src/components/select/style/index.ts b/packages/opendesign/src/components/select/style/index.ts
index 67aac616..97806f75 100644
--- a/packages/opendesign/src/components/select/style/index.ts
+++ b/packages/opendesign/src/components/select/style/index.ts
@@ -1 +1,3 @@
+import '../../style';
+import '../../popup/style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/style/index.scss b/packages/opendesign/src/components/style/index.scss
index 924fc778..910d07e8 100644
--- a/packages/opendesign/src/components/style/index.scss
+++ b/packages/opendesign/src/components/style/index.scss
@@ -1,4 +1,4 @@
-@use './animation.scss';
+@import './animation.scss';
 
 [class^='o-'],
 [class^='o-'] * {
diff --git a/packages/opendesign/src/components/switch/style/index.ts b/packages/opendesign/src/components/switch/style/index.ts
index 67aac616..591b2fbd 100644
--- a/packages/opendesign/src/components/switch/style/index.ts
+++ b/packages/opendesign/src/components/switch/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/table/style/index.ts b/packages/opendesign/src/components/table/style/index.ts
index 67aac616..591b2fbd 100644
--- a/packages/opendesign/src/components/table/style/index.ts
+++ b/packages/opendesign/src/components/table/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/tabs/style/index.ts b/packages/opendesign/src/components/tabs/style/index.ts
index 67aac616..591b2fbd 100644
--- a/packages/opendesign/src/components/tabs/style/index.ts
+++ b/packages/opendesign/src/components/tabs/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
diff --git a/packages/portal/src/main.ts b/packages/portal/src/main.ts
index 12026d81..d1c01396 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/style';
 import '@opensig/opendesign/src/components/style/default-light.token.css';
 import '@opensig/opendesign/src/components/style/dark.token.css';
 
-- 
Gitee