From 48ffaecfe87c4ba8758e3b98fc07c3bc16153cb7 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 5 Jan 2024 14:49:25 +0800
Subject: [PATCH 01/20] =?UTF-8?q?style:=20=E5=A2=9E=E5=8A=A0=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E5=9B=BE=E7=89=87=E9=BB=98=E8=AE=A4=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../opendesign/src/upload/__demo__/UploadBasic.vue     | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/opendesign/src/upload/__demo__/UploadBasic.vue b/packages/opendesign/src/upload/__demo__/UploadBasic.vue
index 6f5be72f..0b9257db 100644
--- a/packages/opendesign/src/upload/__demo__/UploadBasic.vue
+++ b/packages/opendesign/src/upload/__demo__/UploadBasic.vue
@@ -20,6 +20,7 @@ const defaultFileList: UploadFileT[] = [
     id: '1',
     name: 'test.png',
     status: 'finished',
+    imgUrl: 'https://www.hiascend.com/p/resource/202309/72a0d66939734783805e01302bb9f53d.png',
   },
 ];
 
@@ -104,7 +105,14 @@ const onSelect = (f: UploadFileT[]) => {
       </OUpload>
     </div>
     <div class="upload-item">
-      <OUpload multiple :on-after-select="onAfterSelect" :upload-request="uploadRequest" :on-before-upload="onBeforeUpload" list-type="picture-card" />
+      <OUpload
+        multiple
+        :on-after-select="onAfterSelect"
+        :upload-request="uploadRequest"
+        :on-before-upload="onBeforeUpload"
+        list-type="picture-card"
+        :default-file-list="defaultFileList"
+      />
     </div>
   </section>
   <section style="flex-wrap: wrap; align-items: flex-start">
-- 
Gitee


From d60fefcd7b35ff6cfac0061f5a0224032b3f42a8 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 15 Jan 2024 15:41:27 +0800
Subject: [PATCH 02/20] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Eform=EF=BC=8C?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E6=A0=B7=E5=BC=8F=E7=9B=B8=E5=85=B3API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/form/OForm.vue        | 34 ++++++-
 packages/opendesign/src/form/OFormItem.vue    | 48 ++++++++++
 .../src/form/__demo__/FormBasic.vue           | 89 +++++++++++++++++-
 .../src/form/__demo__/FormSlots.vue           | 53 +++++++++++
 .../__demo__/{IndexForm.vue => TheIndex.vue}  |  7 +-
 packages/opendesign/src/form/form.ts          | 14 +++
 packages/opendesign/src/form/index.ts         |  4 +-
 packages/opendesign/src/form/provide.ts       |  9 ++
 packages/opendesign/src/form/style/index.scss | 13 +--
 packages/opendesign/src/form/style/media.scss |  5 +
 packages/opendesign/src/form/style/style.scss | 77 ++++++++++++++++
 packages/opendesign/src/form/style/var.scss   | 13 +++
 packages/opendesign/src/form/types.ts         | 91 +++++++++++++++++++
 packages/portal/src/router.ts                 |  6 ++
 14 files changed, 443 insertions(+), 20 deletions(-)
 create mode 100644 packages/opendesign/src/form/OFormItem.vue
 create mode 100644 packages/opendesign/src/form/__demo__/FormSlots.vue
 rename packages/opendesign/src/form/__demo__/{IndexForm.vue => TheIndex.vue} (54%)
 create mode 100644 packages/opendesign/src/form/provide.ts
 create mode 100644 packages/opendesign/src/form/style/media.scss
 create mode 100644 packages/opendesign/src/form/style/style.scss
 create mode 100644 packages/opendesign/src/form/types.ts

diff --git a/packages/opendesign/src/form/OForm.vue b/packages/opendesign/src/form/OForm.vue
index d288ca86..dde785ae 100644
--- a/packages/opendesign/src/form/OForm.vue
+++ b/packages/opendesign/src/form/OForm.vue
@@ -1,4 +1,34 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { provide, ref, useSlots, onMounted, computed } from 'vue';
+import { formInjectKey } from './provide';
+import { formProps } from './types';
+import { getFlexValue } from './form';
+const props = defineProps(formProps);
+
+const labelWidth = computed(() => props.labelWidth);
+const align = computed(() => getFlexValue(props.labelAlign));
+const justify = computed(() => getFlexValue(props.labelJustify));
+
+provide(formInjectKey, {
+  labelWidth,
+});
+</script>
 <template>
-  <div class="o-form"></div>
+  <div
+    class="o-form"
+    :class="[
+      {
+        'o-form-has-required': props.required,
+      },
+      `o-form-layout-${props.layout}`,
+    ]"
+    :style="{
+      '--form-label-width': props.labelWidth,
+      '--form-label-align': props.labelAlign,
+      '--form-label-justify': justify,
+      '--form-item-align': align,
+    }"
+  >
+    <slot></slot>
+  </div>
 </template>
diff --git a/packages/opendesign/src/form/OFormItem.vue b/packages/opendesign/src/form/OFormItem.vue
new file mode 100644
index 00000000..f89f51d5
--- /dev/null
+++ b/packages/opendesign/src/form/OFormItem.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { inject, computed } from 'vue';
+import { formItemProps } from './types';
+import { formInjectKey } from './provide';
+import { getFlexValue } from './form';
+const props = defineProps(formItemProps);
+
+const align = computed(() => getFlexValue(props.labelAlign));
+const justify = computed(() => getFlexValue(props.labelJustify));
+const tabInjection = inject(formInjectKey, null);
+
+const requireSymbol = '*';
+</script>
+<template>
+  <div
+    class="o-form-item"
+    :class="[
+      {
+        'is-required': props.required,
+      },
+    ]"
+    :style="{
+      '--form-label-width': props.labelWidth,
+      '--form-label-align': align,
+      '--form-label-justify': justify,
+    }"
+  >
+    <div class="o-form-item-label">
+      <span
+        class="o-form-require-symbol"
+        :class="{
+          visible: props.required,
+        }"
+      >
+        <slot name="symbol">{{ requireSymbol }}</slot>
+      </span>
+      <slot name="name">
+        <span>{{ props.label }}</span>
+      </slot>
+    </div>
+    <div class="o-form-item-main">
+      <slot></slot>
+      <div v-if="$slots.extra" class="o-form-item-extra">
+        <slot name="extra"> </slot>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/opendesign/src/form/__demo__/FormBasic.vue b/packages/opendesign/src/form/__demo__/FormBasic.vue
index af2f495f..b0ea9802 100644
--- a/packages/opendesign/src/form/__demo__/FormBasic.vue
+++ b/packages/opendesign/src/form/__demo__/FormBasic.vue
@@ -1,5 +1,88 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OForm, OFormItem } from '../index';
+import '../../input/style';
+import { OInput } from '../../input';
+import '../../select/style';
+import { OSelect } from '../../select';
+import '../../option/style';
+import { OOption } from '../../option';
+import '../../textarea/style';
+import { OTextarea } from '../../textarea';
+
+const options = [
+  { label: 'option 1', value: 'opt1' },
+  { label: 'long long long long long long long long long long long long text option 2', value: 'opt2' },
+  { label: 'option 3', value: 'opt3' },
+  { label: 'option 4', value: 'opt4' },
+];
+const layout = ref<'h' | 'v' | 'inline'>('h');
+const changeLayout = (l: 'h' | 'v' | 'inline') => {
+  layout.value = l;
+};
+const labelAlign = ref<'top' | 'bottom' | 'center'>('top');
+const changelabelAlign = (l: 'top' | 'bottom' | 'center') => {
+  labelAlign.value = l;
+};
+const labelJustify = ref<'left' | 'right' | 'center'>('left');
+const changelabelJustify = (l: 'left' | 'right' | 'center') => {
+  labelJustify.value = l;
+};
+const labelWidth = ref<string>('30%');
+const changelabelWidth = (l: '30%' | '15%' | '200px') => {
+  labelWidth.value = l;
+};
+</script>
 <template>
-  <div class="page-demo"></div>
+  <h4>基本</h4>
+
+  <section>
+    <div class="row">
+      Layout:
+      <span class="link" :class="{ current: layout === 'h' }" @click="changeLayout('h')">水平</span>
+      <span class="link" :class="{ current: layout === 'v' }" @click="changeLayout('v')">垂直</span>
+      <span class="link" :class="{ current: layout === 'inline' }" @click="changeLayout('inline')">行内</span>
+
+      Label Align:
+      <span class="link" :class="{ current: labelAlign === 'top' }" @click="changelabelAlign('top')">顶部对齐</span>
+      <span class="link" :class="{ current: labelAlign === 'bottom' }" @click="changelabelAlign('bottom')">底部对齐</span>
+      <span class="link" :class="{ current: labelAlign === 'center' }" @click="changelabelAlign('center')">居中</span>
+
+      Label Justify:
+      <span class="link" :class="{ current: labelJustify === 'left' }" @click="changelabelJustify('left')">左对齐</span>
+      <span class="link" :class="{ current: labelJustify === 'right' }" @click="changelabelJustify('right')">右对齐</span>
+      <span class="link" :class="{ current: labelJustify === 'center' }" @click="changelabelJustify('center')">居中</span>
+    </div>
+    <div class="row">
+      Label Width:
+      <span class="link" :class="{ current: labelWidth === '30%' }" @click="changelabelWidth('30%')">30%</span>
+      <span class="link" :class="{ current: labelWidth === '15%' }" @click="changelabelWidth('15%')">15%</span>
+      <span class="link" :class="{ current: labelWidth === '200px' }" @click="changelabelWidth('200px')">200px</span>
+    </div>
+    <OForm class="form" required :layout="layout" :label-align="labelAlign" :label-justify="labelJustify" :label-width="labelWidth">
+      <OFormItem label="标题文本1" required>
+        <OInput />
+      </OFormItem>
+      <OFormItem label="标题文本2标题文本2标题文本2标题文本2标题文本2标题文本2标题文本2">
+        <OSelect>
+          <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </OSelect>
+      </OFormItem>
+      <OFormItem label="标题文本2 width：20%" label-width="20%">
+        <OTextarea />
+      </OFormItem>
+    </OForm>
+  </section>
 </template>
-<style lang="scss"></style>
+<style lang="scss">
+.form {
+  width: 100%;
+}
+.link {
+  cursor: pointer;
+  color: var(--o-color-success1);
+  &.current {
+    color: var(--o-color-danger1);
+  }
+}
+</style>
diff --git a/packages/opendesign/src/form/__demo__/FormSlots.vue b/packages/opendesign/src/form/__demo__/FormSlots.vue
new file mode 100644
index 00000000..ec43243a
--- /dev/null
+++ b/packages/opendesign/src/form/__demo__/FormSlots.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OForm, OFormItem } from '../index';
+import '../../input/style';
+import { OInput } from '../../input';
+import '../../select/style';
+import { OSelect } from '../../select';
+import '../../option/style';
+import { OOption } from '../../option';
+import '../../textarea/style';
+import { OTextarea } from '../../textarea';
+
+const options = [
+  { label: 'option 1', value: 'opt1' },
+  { label: 'long long long long long long long long long long long long text option 2', value: 'opt2' },
+  { label: 'option 3', value: 'opt3' },
+  { label: 'option 4', value: 'opt4' },
+];
+</script>
+<template>
+  <h4>插槽</h4>
+  <section>
+    <div class="row">
+      <OForm class="form" required layout="h">
+        <OFormItem label="标题文本1" required>
+          <OInput />
+          <template #extra> 这是一段额外的消息 </template>
+        </OFormItem>
+        <OFormItem label="标题文本2标题文本2标题文本2标题文本2标题文本2标题文本2标题文本2">
+          <OSelect>
+            <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+          </OSelect>
+        </OFormItem>
+        <OFormItem label="标题文本2 width：20%" label-width="20%">
+          <OTextarea />
+          <template #extra> 这是一段额外的消息 </template>
+        </OFormItem>
+      </OForm>
+    </div>
+  </section>
+</template>
+<style lang="scss">
+.form {
+  width: 100%;
+}
+.link {
+  cursor: pointer;
+  color: var(--o-color-success1);
+  &.current {
+    color: var(--o-color-danger1);
+  }
+}
+</style>
diff --git a/packages/opendesign/src/form/__demo__/IndexForm.vue b/packages/opendesign/src/form/__demo__/TheIndex.vue
similarity index 54%
rename from packages/opendesign/src/form/__demo__/IndexForm.vue
rename to packages/opendesign/src/form/__demo__/TheIndex.vue
index 8bc968ef..4a51a9e5 100644
--- a/packages/opendesign/src/form/__demo__/IndexForm.vue
+++ b/packages/opendesign/src/form/__demo__/TheIndex.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import '../style';
-import '../../option/style';
 
-import InputBasic from './InputBasic.vue';
+import FormBasic from './FormBasic.vue';
+import FormSlots from './FormSlots.vue';
 </script>
 <template>
   <div class="page-demo">
-    <InputBasic />
+    <FormBasic />
+    <FormSlots />
   </div>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/form/form.ts b/packages/opendesign/src/form/form.ts
index 66b05bed..b6e3dc07 100644
--- a/packages/opendesign/src/form/form.ts
+++ b/packages/opendesign/src/form/form.ts
@@ -6,3 +6,17 @@ export function toInputString(val: unknown): string {
   }
   return String(val);
 }
+
+export function getFlexValue(val?: 'top' | 'center' | 'bottom' | 'left' | 'center' | 'right'): string {
+  if (!val) {
+    return '';
+  }
+  if (['top', 'left'].includes(val)) {
+    return 'flex-start';
+  } else if (['bottom', 'right'].includes(val)) {
+    return 'flex-end';
+  } else if ('center' === val) {
+    return 'center';
+  }
+  return '';
+}
diff --git a/packages/opendesign/src/form/index.ts b/packages/opendesign/src/form/index.ts
index 02f3334b..97204104 100644
--- a/packages/opendesign/src/form/index.ts
+++ b/packages/opendesign/src/form/index.ts
@@ -1,9 +1,11 @@
 import _OForm from './OForm.vue';
+import OFormItem from './OFormItem.vue';
 import type { App } from 'vue';
 
 const OForm = Object.assign(_OForm, {
+  OFormItem,
   install(app: App) {
     app.component(_OForm.name, _OForm);
   },
 });
-export { OForm };
+export { OForm, OFormItem };
diff --git a/packages/opendesign/src/form/provide.ts b/packages/opendesign/src/form/provide.ts
new file mode 100644
index 00000000..fb3eb0d8
--- /dev/null
+++ b/packages/opendesign/src/form/provide.ts
@@ -0,0 +1,9 @@
+import { InjectionKey, ComputedRef } from 'vue';
+
+export const formInjectKey: InjectionKey<{
+  labelWidth?: ComputedRef<string | undefined>;
+}> = Symbol('provide-form');
+
+export const formItemInjectKey: InjectionKey<{
+  labelWidth?: ComputedRef<string | undefined>;
+}> = Symbol('provide-form-item');
diff --git a/packages/opendesign/src/form/style/index.scss b/packages/opendesign/src/form/style/index.scss
index b0631398..504d59c4 100644
--- a/packages/opendesign/src/form/style/index.scss
+++ b/packages/opendesign/src/form/style/index.scss
@@ -1,11 +1,2 @@
-@use '../../_styles/mixin.scss' as *;
-@use './var.scss';
-
-.o-form {
-  cursor: pointer;
-  color: var(--input-color);
-  display: inline-flex;
-  height: var(--input-height);
-  font-size: var(--input-text-size);
-  line-height: var(--input-text-height);
-}
+@use './style.scss' as *;
+@use './media.scss' as *;
diff --git a/packages/opendesign/src/form/style/media.scss b/packages/opendesign/src/form/style/media.scss
new file mode 100644
index 00000000..d7abf91f
--- /dev/null
+++ b/packages/opendesign/src/form/style/media.scss
@@ -0,0 +1,5 @@
+@use '../../_styles/mixin.scss' as *;
+@use './var.scss';
+
+.o-form {
+}
diff --git a/packages/opendesign/src/form/style/style.scss b/packages/opendesign/src/form/style/style.scss
new file mode 100644
index 00000000..ea15b567
--- /dev/null
+++ b/packages/opendesign/src/form/style/style.scss
@@ -0,0 +1,77 @@
+@use '../../_styles/mixin.scss' as *;
+@use './var.scss';
+
+.o-form-layout-inline {
+  display: flex;
+  flex-wrap: wrap;
+  .o-form-item {
+    margin: 0 var(--form-item-gap) var(--form-item-gap) 0;
+  }
+}
+.o-form-layout-h {
+  &.o-form-has-required {
+    .o-form-require-symbol {
+      display: block;
+    }
+  }
+}
+
+.o-form-layout-h,
+.o-form-layout-v {
+  .o-form-item + .o-form-item {
+    margin-top: var(--form-item-gap);
+  }
+}
+.o-form-layout-v {
+  .o-form-item {
+    display: block;
+  }
+}
+.o-form-item {
+  display: var(--form-item-display, flex);
+  align-items: var(--form-item-align);
+}
+
+.o-form-item-label {
+  display: inline-flex;
+  align-items: center;
+  max-width: var(--form-label-max-width);
+  justify-content: var(--form-label-justify);
+  flex: 0 0 var(--form-label-width);
+  width: var(--form-label-width);
+  .o-form-layout-h &,
+  .o-form-layout-inline & {
+    margin: var(--form-label-gap-top) 0;
+
+    + .o-form-item-main {
+      margin-left: var(--form-label-main-gap);
+    }
+  }
+}
+
+.o-form-require-symbol {
+  color: var(--o-color-danger1);
+  font-size: var(--o-font_size-tip2);
+  line-height: 1;
+  margin-right: 4px;
+  font-family: monospace;
+  opacity: 0;
+  transition: opacity var(--o-easing-linear) var(--o-duration-m3);
+  display: none;
+  font-weight: bold;
+  &.visible {
+    opacity: 1;
+    display: block;
+  }
+}
+
+.o-form-item-main {
+  flex: 1;
+}
+
+.o-form-item-extra {
+  margin-top: 4px;
+  font-size: var(--o-font_size-tip2);
+  line-height: var(--o-line_height-tip2);
+  color: var(--o-color-info3);
+}
diff --git a/packages/opendesign/src/form/style/var.scss b/packages/opendesign/src/form/style/var.scss
index 447b3517..c9fd2faa 100644
--- a/packages/opendesign/src/form/style/var.scss
+++ b/packages/opendesign/src/form/style/var.scss
@@ -1,2 +1,15 @@
 .o-form {
+  --form-item-display: flex;
+  --form-item-gap: 24px;
+  --form-label-main-gap: 32px;
+  --form-label-gap-top: 4px;
+}
+.o-form-layout-h {
+  --form-label-width: 20%;
+  --form-label-max-width: 240px;
+  --form-item-align: flex-start;
+}
+.o-form-layout-v {
+  --form-label-width: 100%;
+  --form-label-justify: flex-start;
 }
diff --git a/packages/opendesign/src/form/types.ts b/packages/opendesign/src/form/types.ts
new file mode 100644
index 00000000..69770fa9
--- /dev/null
+++ b/packages/opendesign/src/form/types.ts
@@ -0,0 +1,91 @@
+import { ExtractPropTypes, PropType } from 'vue';
+import type { SizeT } from '../_utils/types';
+
+export const TabVariantTypes = ['solid', 'text'] as const;
+export type TabVariantT = (typeof TabVariantTypes)[number];
+
+export const formProps = {
+  /**
+   * 类型 TabVariantT
+   */
+  variant: {
+    type: String as PropType<TabVariantT>,
+    default: 'text',
+  },
+  /**
+   * 大小 SizeT
+   */
+  size: {
+    type: String as PropType<SizeT>,
+  },
+  /**
+   * 子项是否包含必选，主要用于控制左对齐
+   */
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 布局
+   */
+  layout: {
+    type: String as PropType<'h' | 'v' | 'inline'>,
+    default: 'h',
+  },
+  /**
+   * 表单项文本垂直对齐方式
+   */
+  labelAlign: {
+    type: String as PropType<'top' | 'center' | 'bottom'>,
+  },
+  /**
+   * 表单项文本水平对齐方式
+   */
+  labelJustify: {
+    type: String as PropType<'left' | 'center' | 'right'>,
+  },
+  /**
+   * 表单项文本宽度,全局
+   */
+  labelWidth: {
+    type: String,
+  },
+};
+export type FormPropsT = ExtractPropTypes<typeof formProps>;
+
+export const formItemProps = {
+  /**
+   * 是否必选
+   */
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 表单项文本
+   */
+  label: {
+    type: String,
+    default: undefined,
+  },
+  /**
+   * 表单项文本垂直对齐方式
+   */
+  labelAlign: {
+    type: String as PropType<'top' | 'center' | 'bottom'>,
+  },
+  /**
+   * 表单项文本水平对齐方式
+   */
+  labelJustify: {
+    type: String as PropType<'left' | 'center' | 'right'>,
+  },
+  /**
+   * 表单项文本宽度
+   */
+  labelWidth: {
+    type: String,
+  },
+};
+
+export type FormItemPropsT = ExtractPropTypes<typeof formItemProps>;
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 70f64362..9f5d19d2 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -14,6 +14,12 @@ export const routes = [
     label: '日期选择器 DatePicker',
     component: () => import('@components/date-picker/__demo__/TheIndex.vue'),
   },
+  {
+    path: '/form',
+    name: 'Form',
+    label: '表单 Form',
+    component: () => import('@components/form/__demo__/TheIndex.vue'),
+  },
   {
     path: '/text',
     name: 'Text',
-- 
Gitee


From 32deee15443ea009ac592ef2ae85dde61c1adf69 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 19 Jan 2024 15:27:03 +0800
Subject: [PATCH 03/20] =?UTF-8?q?feat:=20form=E6=94=AF=E6=8C=81input?=
 =?UTF-8?q?=E6=A0=A1=E9=AA=8C=E5=8F=8A=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/_utils/helper.ts      |  13 +++
 packages/opendesign/src/_utils/typeHelp.ts    |   0
 packages/opendesign/src/_utils/types.ts       |   1 +
 packages/opendesign/src/form/OForm.vue        |   2 +-
 packages/opendesign/src/form/OFormItem.vue    |  80 +++++++++++--
 .../src/form/__demo__/FormBasic.vue           |   2 +-
 .../src/form/__demo__/FormRules.vue           | 105 ++++++++++++++++++
 .../src/form/__demo__/FormSlots.vue           |   4 +-
 .../opendesign/src/form/__demo__/TheIndex.vue |   2 +
 packages/opendesign/src/form/form.ts          |  36 +++++-
 packages/opendesign/src/form/provide.ts       |  13 ++-
 packages/opendesign/src/form/style/style.scss |  26 ++++-
 packages/opendesign/src/form/types.ts         |  41 ++++++-
 packages/opendesign/src/input/OInput.vue      |  17 ++-
 packages/opendesign/src/select/types.ts       |   2 +-
 pnpm-lock.yaml                                |  15 +--
 16 files changed, 323 insertions(+), 36 deletions(-)
 create mode 100644 packages/opendesign/src/_utils/typeHelp.ts
 create mode 100644 packages/opendesign/src/form/__demo__/FormRules.vue

diff --git a/packages/opendesign/src/_utils/helper.ts b/packages/opendesign/src/_utils/helper.ts
index 119942b0..a10728a8 100644
--- a/packages/opendesign/src/_utils/helper.ts
+++ b/packages/opendesign/src/_utils/helper.ts
@@ -98,3 +98,16 @@ export function chunk(arr: any[] = [], size = 1) {
     (v, i) => arr.slice(i * size, i * size + size)
   );
 }
+
+export async function asyncSome(array: Array<any>, judgeFn: (arrayItem: any) => Promise<boolean | undefined>) {
+  for (const iterator of array) {
+    try {
+      if (await judgeFn(iterator)) {
+        return true;
+      }
+    } catch (error) {
+      return false;
+    }
+  }
+  return false;
+}
diff --git a/packages/opendesign/src/_utils/typeHelp.ts b/packages/opendesign/src/_utils/typeHelp.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/opendesign/src/_utils/types.ts b/packages/opendesign/src/_utils/types.ts
index d22b38dc..83eec424 100644
--- a/packages/opendesign/src/_utils/types.ts
+++ b/packages/opendesign/src/_utils/types.ts
@@ -37,5 +37,6 @@ export type VariantT = (typeof VariantTypes)[number];
 export const ColorTypes = ['normal', 'primary', 'success', 'warning', 'danger'] as const;
 export type ColorT = (typeof ColorTypes)[number];
 
+// 颜色 表单元素
 export const Color2Types = ['normal', 'success', 'warning', 'danger'] as const;
 export type Color2T = (typeof ColorTypes)[number];
diff --git a/packages/opendesign/src/form/OForm.vue b/packages/opendesign/src/form/OForm.vue
index dde785ae..43c61fcc 100644
--- a/packages/opendesign/src/form/OForm.vue
+++ b/packages/opendesign/src/form/OForm.vue
@@ -18,7 +18,7 @@ provide(formInjectKey, {
     class="o-form"
     :class="[
       {
-        'o-form-has-required': props.required,
+        'o-form-has-required': props.hasRequired,
       },
       `o-form-layout-${props.layout}`,
     ]"
diff --git a/packages/opendesign/src/form/OFormItem.vue b/packages/opendesign/src/form/OFormItem.vue
index f89f51d5..e75ff1e5 100644
--- a/packages/opendesign/src/form/OFormItem.vue
+++ b/packages/opendesign/src/form/OFormItem.vue
@@ -1,22 +1,78 @@
 <script setup lang="ts">
-import { inject, computed } from 'vue';
-import { formItemProps } from './types';
-import { formInjectKey } from './provide';
-import { getFlexValue } from './form';
+import { computed, ref, provide } from 'vue';
+import { RequiredRuleT, formItemProps, TriggerT, FieldResultT } from './types';
+import { formItemInjectKey } from './provide';
+import { getFlexValue, normalizeRules } from './form';
+import { isArray } from '../_utils/is';
+import { asyncSome } from '../_utils/helper';
+
+const requireSymbol = '*';
+
 const props = defineProps(formItemProps);
 
 const align = computed(() => getFlexValue(props.labelAlign));
 const justify = computed(() => getFlexValue(props.labelJustify));
-const tabInjection = inject(formInjectKey, null);
+const isRequired = computed(() => {
+  if (props.required) {
+    return true;
+  } else if (isArray(props.rules)) {
+    return props.rules.some((item) => (item as RequiredRuleT).required === true);
+  }
+  return false;
+});
+const rules = computed(() => normalizeRules(props.rules));
 
-const requireSymbol = '*';
+const fieldResult = ref<FieldResultT>();
+
+const runValidate = (trigger: TriggerT, value: any) => {
+  fieldResult.value = undefined;
+  return asyncSome(rules.value, async (item) => {
+    if (item.triggers?.includes(trigger)) {
+      const rlt = await item.validator?.(value);
+      console.log(rlt);
+      if (rlt?.type === 'danger') {
+        fieldResult.value = {
+          type: 'danger',
+          message: [rlt.message],
+        };
+        return true;
+      } else if (rlt?.type === 'warning') {
+        if (!fieldResult.value) {
+          fieldResult.value = {
+            type: 'warning',
+            message: [rlt.message],
+          };
+        } else if (rlt.message) {
+          fieldResult.value.message?.push(rlt.message);
+        }
+        return false;
+      }
+      return false;
+    }
+  });
+};
+
+const fieldHandlers = {
+  onChange(val: any) {
+    runValidate('change', val).then((r) => {
+      console.log('fieldResult', r, fieldResult.value);
+    });
+  },
+};
+
+provide(formItemInjectKey, {
+  fieldHandlers,
+  fieldResult,
+});
 </script>
 <template>
   <div
     class="o-form-item"
     :class="[
       {
-        'is-required': props.required,
+        'is-required': isRequired,
+        'o-form-item-danger': fieldResult?.type === 'danger',
+        'o-form-item-warning': fieldResult?.type === 'warning',
       },
     ]"
     :style="{
@@ -29,7 +85,7 @@ const requireSymbol = '*';
       <span
         class="o-form-require-symbol"
         :class="{
-          visible: props.required,
+          visible: isRequired,
         }"
       >
         <slot name="symbol">{{ requireSymbol }}</slot>
@@ -40,6 +96,14 @@ const requireSymbol = '*';
     </div>
     <div class="o-form-item-main">
       <slot></slot>
+      <div v-if="fieldResult?.message" class="o-form-item-message" :class="`type-${fieldResult.type}`">
+        <slot name="message" :message="fieldResult?.message" :type="fieldResult?.type">
+          <div v-if="!isArray(fieldResult?.message)">{{ fieldResult?.message }}</div>
+          <template v-else>
+            <div v-for="item in fieldResult?.message" :key="item">{{ item }}</div>
+          </template>
+        </slot>
+      </div>
       <div v-if="$slots.extra" class="o-form-item-extra">
         <slot name="extra"> </slot>
       </div>
diff --git a/packages/opendesign/src/form/__demo__/FormBasic.vue b/packages/opendesign/src/form/__demo__/FormBasic.vue
index b0ea9802..8b59aaec 100644
--- a/packages/opendesign/src/form/__demo__/FormBasic.vue
+++ b/packages/opendesign/src/form/__demo__/FormBasic.vue
@@ -59,7 +59,7 @@ const changelabelWidth = (l: '30%' | '15%' | '200px') => {
       <span class="link" :class="{ current: labelWidth === '15%' }" @click="changelabelWidth('15%')">15%</span>
       <span class="link" :class="{ current: labelWidth === '200px' }" @click="changelabelWidth('200px')">200px</span>
     </div>
-    <OForm class="form" required :layout="layout" :label-align="labelAlign" :label-justify="labelJustify" :label-width="labelWidth">
+    <OForm class="form" has-required :layout="layout" :label-align="labelAlign" :label-justify="labelJustify" :label-width="labelWidth">
       <OFormItem label="标题文本1" required>
         <OInput />
       </OFormItem>
diff --git a/packages/opendesign/src/form/__demo__/FormRules.vue b/packages/opendesign/src/form/__demo__/FormRules.vue
new file mode 100644
index 00000000..c3c50643
--- /dev/null
+++ b/packages/opendesign/src/form/__demo__/FormRules.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { OForm, OFormItem } from '../index';
+import '../../input/style';
+import { OInput } from '../../input';
+import '../../select/style';
+import { OSelect } from '../../select';
+import '../../option/style';
+import { OOption } from '../../option';
+import '../../textarea/style';
+import { OTextarea } from '../../textarea';
+import { RulesT } from '../types';
+
+const options = [
+  { label: 'option 1', value: 'opt1' },
+  { label: 'long long long long long long long long long long long long text option 2', value: 'opt2' },
+  { label: 'option 3', value: 'opt3' },
+  { label: 'option 4', value: 'opt4' },
+];
+
+const rules: RulesT[] = [
+  {
+    required: true,
+    message: 'required message',
+  },
+  {
+    validator: (value?: any) => {
+      if (value === '123') {
+        return {
+          type: 'danger',
+          message: '不能输入123',
+        };
+      }
+    },
+  },
+  {
+    validator: (value?: any) => {
+      if (isNaN(Number(value))) {
+        return {
+          type: 'danger',
+          message: '需要输入数字',
+        };
+      }
+    },
+  },
+
+  {
+    validator: (value?: any) => {
+      const n = Number(value);
+      if (n > 10) {
+        return {
+          type: 'warning',
+          message: '需要大于10数字',
+        };
+      }
+    },
+  },
+
+  {
+    validator: (value?: any) => {
+      const n = Number(value);
+      if (n % 2 !== 0) {
+        return {
+          type: 'warning',
+          message: '需要输入偶数',
+        };
+      }
+    },
+  },
+];
+</script>
+<template>
+  <h4>校验</h4>
+
+  <section>
+    <OForm class="form" has-required>
+      <OFormItem label="标题文本1" :rules="rules">
+        <OInput />
+      </OFormItem>
+      <OFormItem label="标题文本1" :rules="rules">
+        <OInput />
+        <template #message="{ type, message }"> type: {{ type }} <br />message: {{ message.join('|') }} </template>
+      </OFormItem>
+      <OFormItem label="标题文本2">
+        <OSelect>
+          <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </OSelect>
+      </OFormItem>
+      <OFormItem label="标题文本3">
+        <OTextarea />
+      </OFormItem>
+    </OForm>
+  </section>
+</template>
+<style lang="scss">
+.form {
+  width: 100%;
+}
+.link {
+  cursor: pointer;
+  color: var(--o-color-success1);
+  &.current {
+    color: var(--o-color-danger1);
+  }
+}
+</style>
diff --git a/packages/opendesign/src/form/__demo__/FormSlots.vue b/packages/opendesign/src/form/__demo__/FormSlots.vue
index ec43243a..76cce950 100644
--- a/packages/opendesign/src/form/__demo__/FormSlots.vue
+++ b/packages/opendesign/src/form/__demo__/FormSlots.vue
@@ -21,7 +21,7 @@ const options = [
   <h4>插槽</h4>
   <section>
     <div class="row">
-      <OForm class="form" required layout="h">
+      <OForm class="form" has-required layout="h">
         <OFormItem label="标题文本1" required>
           <OInput />
           <template #extra> 这是一段额外的消息 </template>
@@ -31,7 +31,7 @@ const options = [
             <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
           </OSelect>
         </OFormItem>
-        <OFormItem label="标题文本2 width：20%" label-width="20%">
+        <OFormItem label="标题文本2 ">
           <OTextarea />
           <template #extra> 这是一段额外的消息 </template>
         </OFormItem>
diff --git a/packages/opendesign/src/form/__demo__/TheIndex.vue b/packages/opendesign/src/form/__demo__/TheIndex.vue
index 4a51a9e5..bb167a92 100644
--- a/packages/opendesign/src/form/__demo__/TheIndex.vue
+++ b/packages/opendesign/src/form/__demo__/TheIndex.vue
@@ -3,9 +3,11 @@ import '../style';
 
 import FormBasic from './FormBasic.vue';
 import FormSlots from './FormSlots.vue';
+import FormRules from './FormRules.vue';
 </script>
 <template>
   <div class="page-demo">
+    <FormRules />
     <FormBasic />
     <FormSlots />
   </div>
diff --git a/packages/opendesign/src/form/form.ts b/packages/opendesign/src/form/form.ts
index b6e3dc07..97a8e2a1 100644
--- a/packages/opendesign/src/form/form.ts
+++ b/packages/opendesign/src/form/form.ts
@@ -1,4 +1,5 @@
-import { isNull, isUndefined } from '../_utils/is';
+import { isArray, isFunction, isNull, isUndefined } from '../_utils/is';
+import { RequiredRuleT, RulesT, TypeRuleT, ValidatorRuleT } from './types';
 
 export function toInputString(val: unknown): string {
   if (isUndefined(val) || isNull(val) || (typeof val === 'number' && isNaN(val as number))) {
@@ -20,3 +21,36 @@ export function getFlexValue(val?: 'top' | 'center' | 'bottom' | 'left' | 'cente
   }
   return '';
 }
+
+export function normalizeRules(rules?: RulesT[]): Array<ValidatorRuleT> {
+  if (isArray(rules)) {
+    return rules.map((item) => {
+      const triggers = isArray(item.triggers) ? item.triggers : [item.triggers ?? 'change'];
+      if ((item as RequiredRuleT).required) {
+        return {
+          triggers,
+          validator: (value: any) => ({
+            type: !isNull(value) && !isUndefined(value) && value !== '' ? 'success' : 'danger',
+            message: (item as RequiredRuleT).message,
+          }),
+        };
+      } else if ((item as TypeRuleT).type) {
+        return {
+          triggers,
+          validator: (value: any) => ({
+            type: typeof value === (item as TypeRuleT).type ? 'success' : 'danger',
+            message: (item as TypeRuleT).message,
+          }),
+        };
+      } else if (isFunction((item as ValidatorRuleT).validator)) {
+        return {
+          triggers,
+          validator: (item as ValidatorRuleT).validator,
+        };
+      } else {
+        return {};
+      }
+    });
+  }
+  return [];
+}
diff --git a/packages/opendesign/src/form/provide.ts b/packages/opendesign/src/form/provide.ts
index fb3eb0d8..2ba64f7f 100644
--- a/packages/opendesign/src/form/provide.ts
+++ b/packages/opendesign/src/form/provide.ts
@@ -1,9 +1,18 @@
-import { InjectionKey, ComputedRef } from 'vue';
+import { InjectionKey, ComputedRef, Ref } from 'vue';
+import { FieldResultT } from './types';
+
+type FieldHandlersT = {
+  onChange?: (value: any, event?: Event) => void;
+  onInput?: (value: any, event?: Event) => void;
+  onFocus?: (value: any, event?: FocusEvent) => void;
+  onBlur?: (value: any, event?: FocusEvent) => void;
+};
 
 export const formInjectKey: InjectionKey<{
   labelWidth?: ComputedRef<string | undefined>;
 }> = Symbol('provide-form');
 
 export const formItemInjectKey: InjectionKey<{
-  labelWidth?: ComputedRef<string | undefined>;
+  fieldHandlers: FieldHandlersT;
+  fieldResult: Ref<FieldResultT | undefined>;
 }> = Symbol('provide-form-item');
diff --git a/packages/opendesign/src/form/style/style.scss b/packages/opendesign/src/form/style/style.scss
index ea15b567..a77c46b9 100644
--- a/packages/opendesign/src/form/style/style.scss
+++ b/packages/opendesign/src/form/style/style.scss
@@ -18,8 +18,17 @@
 
 .o-form-layout-h,
 .o-form-layout-v {
-  .o-form-item + .o-form-item {
-    margin-top: var(--form-item-gap);
+  .o-form-item {
+    margin-bottom: var(--form-item-gap);
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+.o-form-item-danger,
+.o-form-item-warning {
+  &.o-form-item {
+    margin-bottom: 0;
   }
 }
 .o-form-layout-v {
@@ -75,3 +84,16 @@
   line-height: var(--o-line_height-tip2);
   color: var(--o-color-info3);
 }
+.o-form-item-message {
+  padding-top: 4px;
+  font-size: var(--o-font_size-tip2);
+  line-height: var(--o-line_height-tip2);
+  color: var(--o-color-info3);
+  min-height: var(--form-item-gap);
+  &.type-warning {
+    color: var(--o-color-warning1);
+  }
+  &.type-danger {
+    color: var(--o-color-danger1);
+  }
+}
diff --git a/packages/opendesign/src/form/types.ts b/packages/opendesign/src/form/types.ts
index 69770fa9..6c959d79 100644
--- a/packages/opendesign/src/form/types.ts
+++ b/packages/opendesign/src/form/types.ts
@@ -3,6 +3,37 @@ import type { SizeT } from '../_utils/types';
 
 export const TabVariantTypes = ['solid', 'text'] as const;
 export type TabVariantT = (typeof TabVariantTypes)[number];
+export type ValidatorReusltT = 'danger' | 'warning' | 'success';
+export type TriggerT = 'change' | 'input' | 'blur' | 'focus';
+
+type ValidatorResultT = {
+  type: ValidatorReusltT;
+  message?: string;
+};
+export type ValidatorT = (value: any) => ValidatorResultT | void;
+
+export type ValidatorRuleT = {
+  triggers?: TriggerT | TriggerT[];
+  validator?: ValidatorT;
+};
+
+export type FieldResultT = {
+  type: 'warning' | 'danger';
+  message?: string[];
+};
+
+export type RequiredRuleT = {
+  required: boolean;
+  message?: string;
+  triggers?: TriggerT | TriggerT[];
+};
+export type TypeRuleT = {
+  type: 'string' | 'number' | 'boolean' | 'array' | 'object';
+  message?: string;
+  triggers?: TriggerT | TriggerT[];
+};
+
+export type RulesT = ValidatorRuleT | RequiredRuleT | TypeRuleT;
 
 export const formProps = {
   /**
@@ -19,9 +50,9 @@ export const formProps = {
     type: String as PropType<SizeT>,
   },
   /**
-   * 子项是否包含必选，主要用于控制左对齐
+   * 子项是否包含必选，主要用于控制文本左对齐样式
    */
-  required: {
+  hasRequired: {
     type: Boolean,
     default: false,
   },
@@ -86,6 +117,12 @@ export const formItemProps = {
   labelWidth: {
     type: String,
   },
+  /**
+   * 表单验证规则
+   */
+  rules: {
+    type: Array as PropType<Array<RulesT>>,
+  },
 };
 
 export type FormItemPropsT = ExtractPropTypes<typeof formItemProps>;
diff --git a/packages/opendesign/src/input/OInput.vue b/packages/opendesign/src/input/OInput.vue
index 9b0e9742..f514bb9a 100644
--- a/packages/opendesign/src/input/OInput.vue
+++ b/packages/opendesign/src/input/OInput.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, inject } from 'vue';
 import { defaultSize } from '../_utils/global';
 import { isFunction } from '../_utils/is';
 import { IconClose, IconEyeOn, IconEyeOff } from '../_utils/icons';
@@ -11,6 +11,7 @@ import { getRoundClass } from '../_utils/style-class';
 import ClientOnly from '../_components/client-only';
 import { uniqueId } from '../_utils/helper';
 import { useComposition } from '../hooks/use-composition';
+import { formItemInjectKey } from '../form/provide';
 
 const props = defineProps(inputProps);
 
@@ -27,6 +28,16 @@ const emits = defineEmits<{
 const inputId = uniqueId('input');
 const inputType = ref(props.type);
 
+const formItemInjection = inject(formItemInjectKey, null);
+
+const color = computed(() => {
+  if (formItemInjection?.fieldResult.value) {
+    return formItemInjection?.fieldResult.value?.type;
+  } else {
+    return props.color;
+  }
+});
+
 const formatFun = computed(() => (isFunction(props.format) ? props.format : (v: string) => v));
 const parseFun = computed(() => (isFunction(props.parse) ? props.parse : (v: string) => v));
 const checkValidFun = computed(() => (isFunction(props.checkValid) ? props.checkValid : () => true));
@@ -132,6 +143,7 @@ function updateValue(val: string) {
     emits('change', value);
     lastValue = value;
     lastValidInputText = value;
+    formItemInjection?.fieldHandlers.onChange?.(value);
   }
   return value;
 }
@@ -149,6 +161,7 @@ const onBlur = (e: FocusEvent) => {
 
 const onKeyDown = (e: KeyboardEvent) => {
   const keyCode = e.key || e.code;
+  // 处理回车
   if (!composition.isComposing.value && keyCode === Enter.key) {
     const val = (e.target as HTMLInputElement)?.value;
     const v = updateValue(val);
@@ -213,7 +226,7 @@ const onEyeMouseDown = () => {
   <label
     class="o-input"
     :class="[
-      `o-input-${props.color}`,
+      `o-input-${color}`,
       `o-input-${props.variant}`,
       `o-input-${props.size || defaultSize}`,
       round.class.value,
diff --git a/packages/opendesign/src/select/types.ts b/packages/opendesign/src/select/types.ts
index 7a562730..5f441751 100644
--- a/packages/opendesign/src/select/types.ts
+++ b/packages/opendesign/src/select/types.ts
@@ -46,7 +46,7 @@ export const selectProps = {
     default: 'normal',
   },
   /**
-   * 按钮类型：ColorT
+   * 按钮类型：VariantT
    */
   variant: {
     type: String as PropType<VariantT>,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 42bfefc3..5d1c0a98 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,7 +62,7 @@ importers:
         version: registry.npmmirror.com/vue@3.2.45
       vue-router:
         specifier: ^4.1.6
-        version: 4.1.6(vue@3.2.45)
+        version: registry.npmmirror.com/vue-router@4.1.6(vue@3.2.45)
     devDependencies:
       '@vitejs/plugin-vue':
         specifier: ^3.2.0
@@ -493,10 +493,6 @@ packages:
       '@volar/vue-language-core': registry.npmmirror.com/@volar/vue-language-core@1.0.13
     dev: true
 
-  /@vue/devtools-api@6.4.5:
-    resolution: {integrity: sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==}
-    dev: false
-
   /@vue/reactivity@3.2.45:
     resolution: {integrity: sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==}
     dependencies:
@@ -1648,15 +1644,6 @@ packages:
       - supports-color
     dev: true
 
-  /vue-router@4.1.6(vue@3.2.45):
-    resolution: {integrity: sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==}
-    peerDependencies:
-      vue: ^3.2.0
-    dependencies:
-      '@vue/devtools-api': 6.4.5
-      vue: registry.npmmirror.com/vue@3.2.45
-    dev: false
-
   /vue-template-compiler@2.7.14:
     resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==}
     dependencies:
-- 
Gitee


From 388511b182ab8d6768c98135c6806b0c90cf6ad4 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 19 Jan 2024 15:35:24 +0800
Subject: [PATCH 04/20] =?UTF-8?q?style:demo=E4=BE=8B=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/form/OFormItem.vue          | 1 -
 packages/opendesign/src/form/__demo__/FormRules.vue | 5 +++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/opendesign/src/form/OFormItem.vue b/packages/opendesign/src/form/OFormItem.vue
index e75ff1e5..749f23ce 100644
--- a/packages/opendesign/src/form/OFormItem.vue
+++ b/packages/opendesign/src/form/OFormItem.vue
@@ -29,7 +29,6 @@ const runValidate = (trigger: TriggerT, value: any) => {
   return asyncSome(rules.value, async (item) => {
     if (item.triggers?.includes(trigger)) {
       const rlt = await item.validator?.(value);
-      console.log(rlt);
       if (rlt?.type === 'danger') {
         fieldResult.value = {
           type: 'danger',
diff --git a/packages/opendesign/src/form/__demo__/FormRules.vue b/packages/opendesign/src/form/__demo__/FormRules.vue
index c3c50643..4e9f3174 100644
--- a/packages/opendesign/src/form/__demo__/FormRules.vue
+++ b/packages/opendesign/src/form/__demo__/FormRules.vue
@@ -9,7 +9,9 @@ import { OOption } from '../../option';
 import '../../textarea/style';
 import { OTextarea } from '../../textarea';
 import { RulesT } from '../types';
+import { ref } from 'vue';
 
+const textValue = ref('');
 const options = [
   { label: 'option 1', value: 'opt1' },
   { label: 'long long long long long long long long long long long long text option 2', value: 'opt2' },
@@ -54,7 +56,6 @@ const rules: RulesT[] = [
       }
     },
   },
-
   {
     validator: (value?: any) => {
       const n = Number(value);
@@ -86,7 +87,7 @@ const rules: RulesT[] = [
         </OSelect>
       </OFormItem>
       <OFormItem label="标题文本3">
-        <OTextarea />
+        <OTextarea v-model="textValue" />
       </OFormItem>
     </OForm>
   </section>
-- 
Gitee


From fbed5ccf04da159e3cf1f35b0a851c4ba1636510 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 19 Jan 2024 15:38:18 +0800
Subject: [PATCH 05/20] =?UTF-8?q?fix:=20=E8=A1=A8=E5=8D=95=E6=A0=A1?=
 =?UTF-8?q?=E9=AA=8C=E7=BB=93=E6=9E=9C=E7=B1=BB=E5=9E=8B=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/form/OFormItem.vue | 4 ++--
 packages/opendesign/src/form/provide.ts    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/opendesign/src/form/OFormItem.vue b/packages/opendesign/src/form/OFormItem.vue
index 749f23ce..21a655ae 100644
--- a/packages/opendesign/src/form/OFormItem.vue
+++ b/packages/opendesign/src/form/OFormItem.vue
@@ -22,10 +22,10 @@ const isRequired = computed(() => {
 });
 const rules = computed(() => normalizeRules(props.rules));
 
-const fieldResult = ref<FieldResultT>();
+const fieldResult = ref<FieldResultT | null>(null);
 
 const runValidate = (trigger: TriggerT, value: any) => {
-  fieldResult.value = undefined;
+  fieldResult.value = null;
   return asyncSome(rules.value, async (item) => {
     if (item.triggers?.includes(trigger)) {
       const rlt = await item.validator?.(value);
diff --git a/packages/opendesign/src/form/provide.ts b/packages/opendesign/src/form/provide.ts
index 2ba64f7f..db3be409 100644
--- a/packages/opendesign/src/form/provide.ts
+++ b/packages/opendesign/src/form/provide.ts
@@ -14,5 +14,5 @@ export const formInjectKey: InjectionKey<{
 
 export const formItemInjectKey: InjectionKey<{
   fieldHandlers: FieldHandlersT;
-  fieldResult: Ref<FieldResultT | undefined>;
+  fieldResult: Ref<FieldResultT | null>;
 }> = Symbol('provide-form-item');
-- 
Gitee


From c13c241555f288485c3cd9e878595b5deda722fc Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 24 Jan 2024 14:52:47 +0800
Subject: [PATCH 06/20] =?UTF-8?q?fix[pagination]:=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=8F=AA=E6=9C=891=E9=A1=B5=E6=97=B6=EF=BC=8C=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/pagination/OPagination.vue            | 4 ++--
 .../opendesign/src/pagination/__demo__/PaginationBasic.vue    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/opendesign/src/pagination/OPagination.vue b/packages/opendesign/src/pagination/OPagination.vue
index 6e10892c..dc12f804 100644
--- a/packages/opendesign/src/pagination/OPagination.vue
+++ b/packages/opendesign/src/pagination/OPagination.vue
@@ -145,7 +145,7 @@ defineExpose({
       <!-- total -->
       <div v-if="layout.includes('total')" class="o-pagination-total">{{ Labels.total }}&nbsp;{{ props.total }}</div>
       <!-- sizes -->
-      <template v-if="layout.includes('pagesize') && totalPage > 1">
+      <template v-if="layout.includes('pagesize')">
         <div class="o-pagination-size">
           <OSelect
             v-if="pageSizeList.length > 1"
@@ -231,7 +231,7 @@ defineExpose({
         </div>
       </div>
       <!-- jumper -->
-      <template v-if="layout.includes('jumper') && totalPage > 1">
+      <template v-if="layout.includes('jumper')">
         <div class="o-pagination-goto">
           <span>{{ Labels.goto }}</span>
           <OInputNumber
diff --git a/packages/opendesign/src/pagination/__demo__/PaginationBasic.vue b/packages/opendesign/src/pagination/__demo__/PaginationBasic.vue
index 3d55c5d1..127d58bd 100644
--- a/packages/opendesign/src/pagination/__demo__/PaginationBasic.vue
+++ b/packages/opendesign/src/pagination/__demo__/PaginationBasic.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { OPagination } from '../index';
 const currentPage = ref(5);
-const total = ref(400);
+const total = ref(30);
 
 const pageSize = 8;
 const pageSizes = [8, 16, 32, 64];
-- 
Gitee


From 71454c64e5135acaeea108f9a21a24b8b90689eb Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 24 Jan 2024 15:24:53 +0800
Subject: [PATCH 07/20] =?UTF-8?q?fix(textarea):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E6=97=A0v-model=E6=97=B6=E8=BE=93=E5=85=A5=E6=97=A0=E6=B3=95?=
 =?UTF-8?q?=E7=94=9F=E6=95=88=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/textarea/OTextarea.vue    | 10 ++++++++--
 packages/opendesign/src/textarea/style/style.scss | 10 ++++++----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/opendesign/src/textarea/OTextarea.vue b/packages/opendesign/src/textarea/OTextarea.vue
index c7e34623..10874da5 100644
--- a/packages/opendesign/src/textarea/OTextarea.vue
+++ b/packages/opendesign/src/textarea/OTextarea.vue
@@ -35,8 +35,10 @@ const textareaText = ref(realValue.value);
 watch(
   () => props.modelValue,
   (val) => {
-    realValue.value = toInputString(val);
-    textareaText.value = `${realValue.value}\r\n`;
+    if (realValue.value !== val) {
+      realValue.value = toInputString(val);
+      textareaText.value = `${realValue.value}\r\n`;
+    }
   }
 );
 
@@ -65,6 +67,8 @@ let lastValue: string = realValue.value;
 
 const updateValue = (val: string) => {
   emits('update:modelValue', val);
+  realValue.value = val;
+  textareaText.value = `${realValue.value}\r\n`;
 
   if (lastValue !== val) {
     emits('change', val);
@@ -98,6 +102,8 @@ const onInput = (e: Event) => {
   }
   const val = (e.target as HTMLInputElement)?.value;
   emits('input', val, e);
+  realValue.value = val;
+
   textareaText.value = `${val}\r\n`;
 
   emits('update:modelValue', val);
diff --git a/packages/opendesign/src/textarea/style/style.scss b/packages/opendesign/src/textarea/style/style.scss
index 50b28107..2e10c441 100644
--- a/packages/opendesign/src/textarea/style/style.scss
+++ b/packages/opendesign/src/textarea/style/style.scss
@@ -20,6 +20,12 @@
   justify-items: stretch;
   width: 100%;
   height: 100%;
+  @include hover {
+    .o-textarea-textarea {
+      border-color: var(--textarea-bd-color-hover);
+      background-color: var(--textarea-bg-color-hover);
+    }
+  }
 }
 .o-textarea-round-pill {
   .o-textarea-textarea {
@@ -45,10 +51,6 @@
   border-radius: var(--textarea-radius);
   background-color: var(--textarea-bg-color);
 
-  @include hover {
-    border-color: var(--textarea-bd-color-hover);
-    background-color: var(--textarea-bg-color-hover);
-  }
   &.is-focus {
     border-color: var(--textarea-bd-color-focus);
     background-color: var(--textarea-bg-color-focus);
-- 
Gitee


From 09e7572aecb8101a61fb6270157982897d2a42c0 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 24 Jan 2024 16:49:43 +0800
Subject: [PATCH 08/20] =?UTF-8?q?feat(form/textarea):form=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81textarea=E8=A7=84=E5=88=99=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../opendesign/src/form/__demo__/FormRules.vue    |  8 ++++----
 packages/opendesign/src/textarea/OTextarea.vue    | 15 +++++++++++++--
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/opendesign/src/form/__demo__/FormRules.vue b/packages/opendesign/src/form/__demo__/FormRules.vue
index 4e9f3174..1c7fa2e7 100644
--- a/packages/opendesign/src/form/__demo__/FormRules.vue
+++ b/packages/opendesign/src/form/__demo__/FormRules.vue
@@ -51,7 +51,7 @@ const rules: RulesT[] = [
       if (n > 10) {
         return {
           type: 'warning',
-          message: '需要大于10数字',
+          message: '需要小于10数字',
         };
       }
     },
@@ -81,12 +81,12 @@ const rules: RulesT[] = [
         <OInput />
         <template #message="{ type, message }"> type: {{ type }} <br />message: {{ message.join('|') }} </template>
       </OFormItem>
-      <OFormItem label="标题文本2">
-        <OSelect>
+      <OFormItem label="标题文本2" :rules="rules">
+        <OSelect clearable>
           <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </OSelect>
       </OFormItem>
-      <OFormItem label="标题文本3">
+      <OFormItem label="标题文本3" :rules="rules">
         <OTextarea v-model="textValue" />
       </OFormItem>
     </OForm>
diff --git a/packages/opendesign/src/textarea/OTextarea.vue b/packages/opendesign/src/textarea/OTextarea.vue
index 10874da5..609254c6 100644
--- a/packages/opendesign/src/textarea/OTextarea.vue
+++ b/packages/opendesign/src/textarea/OTextarea.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, inject } from 'vue';
 import { defaultSize } from '../_utils/global';
 import { isFunction } from '../_utils/is';
 import { IconClose } from '../_utils/icons';
@@ -10,6 +10,7 @@ import { textareaProps } from './types';
 import { getRoundClass } from '../_utils/style-class';
 import ClientOnly from '../_components/client-only';
 import { uniqueId } from '../_utils/helper';
+import { formItemInjectKey } from '../form/provide';
 
 const props = defineProps(textareaProps);
 
@@ -56,9 +57,18 @@ const getValueLength = (val: string): number => {
 const currentLength = computed(() => getValueLength(realValue.value));
 const isOutLengthLimit = computed(() => (props.maxLength !== undefined ? currentLength.value > props.maxLength : false));
 
+const formItemInjection = inject(formItemInjectKey, null);
+
 const color = computed(() => {
-  return isOutLengthLimit.value ? 'danger' : props.color;
+  if (isOutLengthLimit.value) {
+    return 'danger';
+  } else if (formItemInjection?.fieldResult.value) {
+    return formItemInjection?.fieldResult.value?.type;
+  } else {
+    return props.color;
+  }
 });
+
 const round = getRoundClass(props, 'textarea');
 
 // 是否聚焦状态
@@ -73,6 +83,7 @@ const updateValue = (val: string) => {
   if (lastValue !== val) {
     emits('change', val);
     lastValue = val;
+    formItemInjection?.fieldHandlers.onChange?.(val);
   }
   return val;
 };
-- 
Gitee


From c1fb15e8e379b52036c87f580af4a549ec494ebd Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Sat, 27 Jan 2024 15:37:06 +0800
Subject: [PATCH 09/20] =?UTF-8?q?feat(form/select):select=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E8=A1=A8=E5=8D=95=E8=A7=84=E5=88=99=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/form/__demo__/FormRules.vue           | 31 ++++++++++---
 packages/opendesign/src/select/OSelect.vue    | 43 +++++++++++++------
 .../opendesign/src/textarea/OTextarea.vue     |  1 +
 3 files changed, 57 insertions(+), 18 deletions(-)

diff --git a/packages/opendesign/src/form/__demo__/FormRules.vue b/packages/opendesign/src/form/__demo__/FormRules.vue
index 1c7fa2e7..fc497481 100644
--- a/packages/opendesign/src/form/__demo__/FormRules.vue
+++ b/packages/opendesign/src/form/__demo__/FormRules.vue
@@ -13,10 +13,10 @@ import { ref } from 'vue';
 
 const textValue = ref('');
 const options = [
-  { label: 'option 1', value: 'opt1' },
-  { label: 'long long long long long long long long long long long long text option 2', value: 'opt2' },
-  { label: 'option 3', value: 'opt3' },
-  { label: 'option 4', value: 'opt4' },
+  { label: 'option 1', value: 1 },
+  { label: 'option 2', value: 2 },
+  { label: 'option 3', value: 3 },
+  { label: 'option 4', value: 4 },
 ];
 
 const rules: RulesT[] = [
@@ -68,6 +68,27 @@ const rules: RulesT[] = [
     },
   },
 ];
+const selectRules: RulesT[] = [
+  {
+    required: true,
+    message: 'required message',
+  },
+  {
+    validator: (value?: any) => {
+      if (value !== 1) {
+        return {
+          type: value > 3 ? 'success' : 'warning',
+          message: '建议大于3',
+        };
+      } else {
+        return {
+          type: 'danger',
+          message: '不能小于2',
+        };
+      }
+    },
+  },
+];
 </script>
 <template>
   <h4>校验</h4>
@@ -81,7 +102,7 @@ const rules: RulesT[] = [
         <OInput />
         <template #message="{ type, message }"> type: {{ type }} <br />message: {{ message.join('|') }} </template>
       </OFormItem>
-      <OFormItem label="标题文本2" :rules="rules">
+      <OFormItem label="标题文本2" :rules="selectRules">
         <OSelect clearable>
           <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </OSelect>
diff --git a/packages/opendesign/src/select/OSelect.vue b/packages/opendesign/src/select/OSelect.vue
index 7a0c5946..a8685317 100644
--- a/packages/opendesign/src/select/OSelect.vue
+++ b/packages/opendesign/src/select/OSelect.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, provide, ref, watch, watchEffect } from 'vue';
+import { computed, provide, ref, watch, watchEffect, inject } from 'vue';
 import { defaultSize, isPhonePad } from '../_utils/global';
 import { IconChevronDown, IconClose, IconLoading } from '../_utils/icons';
 import { OPopup } from '../popup';
@@ -13,6 +13,7 @@ import { OScroller } from '../scroller';
 import { isArray, isFunction } from '../_utils/is';
 import SelectOption, { OptionSlotNames } from './SelectOption.vue';
 import { filterSlots } from '../upload/util';
+import { formItemInjectKey } from '../form/provide';
 
 // TODO 下拉展开时，选中值默认在视口里
 const props = defineProps(selectProps);
@@ -47,6 +48,17 @@ watch(
   }
 );
 
+// 表单注入，用于规则校验
+const formItemInjection = inject(formItemInjectKey, null);
+
+const color = computed(() => {
+  if (formItemInjection?.fieldResult.value) {
+    return formItemInjection?.fieldResult.value?.type;
+  } else {
+    return props.color;
+  }
+});
+
 // 存储每个value对应的label
 const optionLabels = ref<Record<string | number, string>>({});
 
@@ -54,16 +66,17 @@ const optionLabels = ref<Record<string | number, string>>({});
 const valueList = ref<Array<string | number>>([]); // 选项选中的记录
 const finalValueList = ref<Array<string | number>>([]); // 最终选择值
 // 初始化valuelist
-if (props.multiple) {
-  if (isArray(props.modelValue)) {
-    valueList.value = [...props.modelValue];
-  } else if (isArray(props.defaultValue)) {
-    valueList.value = [...props.defaultValue];
+if (isArray(props.modelValue)) {
+  valueList.value = [...props.modelValue];
+} else if (isArray(props.defaultValue)) {
+  valueList.value = [...props.defaultValue];
+} else {
+  const mrValue = props.modelValue ?? props.defaultValue;
+  if (mrValue) {
+    valueList.value = [mrValue];
   } else {
     valueList.value = [];
   }
-} else {
-  valueList.value = [((props.modelValue ?? props.defaultValue) as string | number) ?? ''];
 }
 finalValueList.value = [...valueList.value];
 
@@ -117,6 +130,10 @@ watchEffect(() => {
 
 const isClearable = computed(() => props.clearable && !props.disabled && valueList.value.length > 0);
 
+const emitChange = (value: SelectValueT) => {
+  emits('change', value);
+  formItemInjection?.fieldHandlers.onChange?.(value);
+};
 // 清除值
 const clearClick = (e: Event) => {
   e.stopPropagation();
@@ -124,7 +141,7 @@ const clearClick = (e: Event) => {
   valueList.value = [];
   emits('clear', e);
 
-  emits('change', [...valueList.value]);
+  emitChange([...valueList.value]);
   emits('update:modelValue', [...valueList.value]);
 };
 const beforeSelect = async (value: string | number) => {
@@ -155,7 +172,7 @@ provide(selectOptionInjectKey, {
         //单选
 
         if (valueList.value[0] !== toValue) {
-          emits('change', toValue);
+          emitChange(toValue);
 
           valueList.value[0] = toValue as string | number;
         }
@@ -178,7 +195,7 @@ provide(selectOptionInjectKey, {
         });
 
         if (!isResponding.value) {
-          emits('change', [...valueList.value]);
+          emitChange([...valueList.value]);
           emits('update:modelValue', [...valueList.value]);
         }
       }
@@ -201,7 +218,7 @@ const onRemoveTag = (value: string | number, e: MouseEvent) => {
   if (idx > -1) {
     valueList.value.splice(idx, 1);
 
-    emits('change', [...valueList.value]);
+    emitChange([...valueList.value]);
     emits('update:modelValue', [...valueList.value]);
   }
 };
@@ -260,7 +277,7 @@ const selectDlgAction: DialogActionT[] = [
     ref="selectRef"
     class="o-select"
     :class="[
-      `o-select-${props.color}`,
+      `o-select-${color}`,
       `o-select-${props.variant}`,
       `o-select-${props.size || defaultSize}`,
       round.class.value,
diff --git a/packages/opendesign/src/textarea/OTextarea.vue b/packages/opendesign/src/textarea/OTextarea.vue
index 609254c6..ae1b7677 100644
--- a/packages/opendesign/src/textarea/OTextarea.vue
+++ b/packages/opendesign/src/textarea/OTextarea.vue
@@ -57,6 +57,7 @@ const getValueLength = (val: string): number => {
 const currentLength = computed(() => getValueLength(realValue.value));
 const isOutLengthLimit = computed(() => (props.maxLength !== undefined ? currentLength.value > props.maxLength : false));
 
+// 表单注入，用于规则校验
 const formItemInjection = inject(formItemInjectKey, null);
 
 const color = computed(() => {
-- 
Gitee


From 890a75972affd1fe5df1f70de79447dab210b219 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Sat, 27 Jan 2024 16:48:12 +0800
Subject: [PATCH 10/20] =?UTF-8?q?feat(form/checkbox):checkbox=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E8=A1=A8=E5=8D=95=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/_utils/helper.ts      |  2 +-
 .../src/checkbox-group/OCheckboxGroup.vue     |  8 ++-
 .../src/checkbox-group/style/index.scss       |  1 +
 packages/opendesign/src/form/OFormItem.vue    | 39 ++++++++------
 .../src/form/__demo__/FormRules.vue           | 54 ++++++++++++++++---
 packages/opendesign/src/form/types.ts         |  2 +-
 6 files changed, 82 insertions(+), 24 deletions(-)

diff --git a/packages/opendesign/src/_utils/helper.ts b/packages/opendesign/src/_utils/helper.ts
index a10728a8..0d9a2439 100644
--- a/packages/opendesign/src/_utils/helper.ts
+++ b/packages/opendesign/src/_utils/helper.ts
@@ -99,7 +99,7 @@ export function chunk(arr: any[] = [], size = 1) {
   );
 }
 
-export async function asyncSome(array: Array<any>, judgeFn: (arrayItem: any) => Promise<boolean | undefined>) {
+export async function asyncSome<T>(array: Array<T>, judgeFn: (arrayItem: T) => Promise<boolean | undefined>) {
   for (const iterator of array) {
     try {
       if (await judgeFn(iterator)) {
diff --git a/packages/opendesign/src/checkbox-group/OCheckboxGroup.vue b/packages/opendesign/src/checkbox-group/OCheckboxGroup.vue
index 8fd0af07..b719b77c 100644
--- a/packages/opendesign/src/checkbox-group/OCheckboxGroup.vue
+++ b/packages/opendesign/src/checkbox-group/OCheckboxGroup.vue
@@ -1,9 +1,11 @@
 <script lang="ts" setup>
-import { computed, provide, ref, toRef, watch } from 'vue';
+import { computed, provide, ref, toRef, watch, inject } from 'vue';
 import { checkboxGroupProps } from './types';
 import { checkboxGroupInjectKey } from './provide';
 import { isArray, isUndefined } from '../_utils/is';
 
+import { formItemInjectKey } from '../form/provide';
+
 const props = defineProps(checkboxGroupProps);
 
 const emits = defineEmits<{
@@ -13,6 +15,9 @@ const emits = defineEmits<{
 
 const realValue = ref(isArray(props.modelValue) ? props.modelValue : props.defaultValue);
 
+// 表单注入，用于规则校验
+const formItemInjection = inject(formItemInjectKey, null);
+
 watch(
   () => props.modelValue,
   (val) => {
@@ -33,6 +38,7 @@ const updateModelValue = (val: Array<string | number>) => {
 
 const onChange = (val: Array<string | number>, ev: Event) => {
   emits('change', val, ev);
+  formItemInjection?.fieldHandlers.onChange?.(val);
 };
 
 provide(checkboxGroupInjectKey, {
diff --git a/packages/opendesign/src/checkbox-group/style/index.scss b/packages/opendesign/src/checkbox-group/style/index.scss
index 18afaab9..fe3754c0 100644
--- a/packages/opendesign/src/checkbox-group/style/index.scss
+++ b/packages/opendesign/src/checkbox-group/style/index.scss
@@ -4,6 +4,7 @@
 .o-checkbox-group {
   display: inline-flex;
   flex-wrap: wrap;
+  vertical-align: middle;
 }
 
 .o-checkbox-group-h {
diff --git a/packages/opendesign/src/form/OFormItem.vue b/packages/opendesign/src/form/OFormItem.vue
index 21a655ae..0d507202 100644
--- a/packages/opendesign/src/form/OFormItem.vue
+++ b/packages/opendesign/src/form/OFormItem.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { computed, ref, provide } from 'vue';
-import { RequiredRuleT, formItemProps, TriggerT, FieldResultT } from './types';
+import { RequiredRuleT, formItemProps, TriggerT, FieldResultT, ValidatorResultT } from './types';
 import { formItemInjectKey } from './provide';
 import { getFlexValue, normalizeRules } from './form';
 import { isArray } from '../_utils/is';
 import { asyncSome } from '../_utils/helper';
+import logger from '../_utils/log';
 
 const requireSymbol = '*';
 
@@ -28,24 +29,32 @@ const runValidate = (trigger: TriggerT, value: any) => {
   fieldResult.value = null;
   return asyncSome(rules.value, async (item) => {
     if (item.triggers?.includes(trigger)) {
-      const rlt = await item.validator?.(value);
-      if (rlt?.type === 'danger') {
-        fieldResult.value = {
-          type: 'danger',
-          message: [rlt.message],
-        };
-        return true;
-      } else if (rlt?.type === 'warning') {
-        if (!fieldResult.value) {
+      if (!item.validator) {
+        return false;
+      }
+      try {
+        const rlt = await item.validator?.(value);
+        if (rlt?.type === 'danger') {
           fieldResult.value = {
-            type: 'warning',
-            message: [rlt.message],
+            type: 'danger',
+            message: rlt.message ? [rlt.message] : [],
           };
-        } else if (rlt.message) {
-          fieldResult.value.message?.push(rlt.message);
+          return true;
+        } else if (rlt?.type === 'warning') {
+          if (!fieldResult.value) {
+            fieldResult.value = {
+              type: 'warning',
+              message: rlt.message ? [rlt.message] : [],
+            };
+          } else if (rlt.message) {
+            fieldResult.value.message?.push(rlt.message);
+          }
+          return false;
         }
-        return false;
+      } catch (e) {
+        logger.error('failed to validate rules');
       }
+
       return false;
     }
   });
diff --git a/packages/opendesign/src/form/__demo__/FormRules.vue b/packages/opendesign/src/form/__demo__/FormRules.vue
index fc497481..52d72dbc 100644
--- a/packages/opendesign/src/form/__demo__/FormRules.vue
+++ b/packages/opendesign/src/form/__demo__/FormRules.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { OForm, OFormItem } from '../index';
+import { RulesT } from '../types';
+import { ref } from 'vue';
 import '../../input/style';
 import { OInput } from '../../input';
 import '../../select/style';
@@ -8,8 +10,10 @@ import '../../option/style';
 import { OOption } from '../../option';
 import '../../textarea/style';
 import { OTextarea } from '../../textarea';
-import { RulesT } from '../types';
-import { ref } from 'vue';
+import '../../checkbox/style';
+import { OCheckbox } from '../../checkbox';
+import '../../checkbox-group/style';
+import { OCheckboxGroup } from '../../checkbox-group';
 
 const textValue = ref('');
 const options = [
@@ -19,7 +23,11 @@ const options = [
   { label: 'option 4', value: 4 },
 ];
 
-const rules: RulesT[] = [
+const submit = () => {
+  console.log('submit');
+};
+
+const inputRules: RulesT[] = [
   {
     required: true,
     message: 'required message',
@@ -89,16 +97,40 @@ const selectRules: RulesT[] = [
     },
   },
 ];
+
+const checkBoxVal = [1];
+const checkboxRules: RulesT[] = [
+  {
+    required: true,
+    message: 'required message',
+  },
+  {
+    validator: (value?: any[]) => {
+      if (!value?.includes(1)) {
+        return {
+          type: 'danger',
+          message: '1必选',
+        };
+      }
+      if (!value?.includes(2)) {
+        return {
+          type: 'warning',
+          message: '建议选择2',
+        };
+      }
+    },
+  },
+];
 </script>
 <template>
   <h4>校验</h4>
 
   <section>
     <OForm class="form" has-required>
-      <OFormItem label="标题文本1" :rules="rules">
+      <OFormItem label="标题文本1" :rules="inputRules">
         <OInput />
       </OFormItem>
-      <OFormItem label="标题文本1" :rules="rules">
+      <OFormItem label="标题文本1" required>
         <OInput />
         <template #message="{ type, message }"> type: {{ type }} <br />message: {{ message.join('|') }} </template>
       </OFormItem>
@@ -107,9 +139,19 @@ const selectRules: RulesT[] = [
           <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </OSelect>
       </OFormItem>
-      <OFormItem label="标题文本3" :rules="rules">
+      <OFormItem label="标题文本3" :rules="inputRules">
         <OTextarea v-model="textValue" />
       </OFormItem>
+      <OFormItem label="标题文本3" :rules="checkboxRules">
+        <OCheckboxGroup v-model="checkBoxVal">
+          <OCheckbox ref="checkBoxRef2" :value="1">选项1</OCheckbox>
+          <OCheckbox :value="2">选项2</OCheckbox>
+          <OCheckbox :value="3">选项3</OCheckbox>
+        </OCheckboxGroup>
+      </OFormItem>
+      <div>
+        <button @click="submit">提交</button>
+      </div>
     </OForm>
   </section>
 </template>
diff --git a/packages/opendesign/src/form/types.ts b/packages/opendesign/src/form/types.ts
index 6c959d79..4b48bda9 100644
--- a/packages/opendesign/src/form/types.ts
+++ b/packages/opendesign/src/form/types.ts
@@ -6,7 +6,7 @@ export type TabVariantT = (typeof TabVariantTypes)[number];
 export type ValidatorReusltT = 'danger' | 'warning' | 'success';
 export type TriggerT = 'change' | 'input' | 'blur' | 'focus';
 
-type ValidatorResultT = {
+export type ValidatorResultT = {
   type: ValidatorReusltT;
   message?: string;
 };
-- 
Gitee


From eabbd98537894a23af9384242f1c2b0b91696d4b Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Sat, 27 Jan 2024 17:44:57 +0800
Subject: [PATCH 11/20] =?UTF-8?q?feat(form/radio):=20radio=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E8=A1=A8=E5=8D=95=E9=AA=8C=E8=AF=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/_utils/is.ts          |  8 +++++
 packages/opendesign/src/form/OFormItem.vue    |  4 ++-
 .../src/form/__demo__/FormRules.vue           | 30 +++++++++++++++++++
 .../opendesign/src/form/__demo__/TheIndex.vue |  4 +--
 packages/opendesign/src/form/form.ts          |  4 +--
 packages/opendesign/src/form/style/style.scss |  7 +++++
 packages/opendesign/src/form/types.ts         |  6 ++++
 .../src/radio-group/ORadioGroup.vue           |  6 +++-
 8 files changed, 63 insertions(+), 6 deletions(-)

diff --git a/packages/opendesign/src/_utils/is.ts b/packages/opendesign/src/_utils/is.ts
index a956c90f..d16231b1 100644
--- a/packages/opendesign/src/_utils/is.ts
+++ b/packages/opendesign/src/_utils/is.ts
@@ -27,6 +27,14 @@ export function isFunction(val: unknown): val is Function {
 export function isArray(val: unknown): val is Array<any> {
   return Array.isArray(val);
 }
+
+export function isEmptyArray(val: unknown): val is Array<any> {
+  return isArray(val) && val.length === 0;
+}
+
+export function isEmptyObject(val: unknown): val is {} {
+  return opt.call(val) === '[object object]' && Object.keys(val as Object).length === 0;
+}
 /**
  * 判断日期是否合法
  * @param d
diff --git a/packages/opendesign/src/form/OFormItem.vue b/packages/opendesign/src/form/OFormItem.vue
index 0d507202..e9206c33 100644
--- a/packages/opendesign/src/form/OFormItem.vue
+++ b/packages/opendesign/src/form/OFormItem.vue
@@ -103,7 +103,9 @@ provide(formItemInjectKey, {
       </slot>
     </div>
     <div class="o-form-item-main">
-      <slot></slot>
+      <div class="o-form-item-main-wrap">
+        <slot></slot>
+      </div>
       <div v-if="fieldResult?.message" class="o-form-item-message" :class="`type-${fieldResult.type}`">
         <slot name="message" :message="fieldResult?.message" :type="fieldResult?.type">
           <div v-if="!isArray(fieldResult?.message)">{{ fieldResult?.message }}</div>
diff --git a/packages/opendesign/src/form/__demo__/FormRules.vue b/packages/opendesign/src/form/__demo__/FormRules.vue
index 52d72dbc..8a347d13 100644
--- a/packages/opendesign/src/form/__demo__/FormRules.vue
+++ b/packages/opendesign/src/form/__demo__/FormRules.vue
@@ -14,6 +14,10 @@ import '../../checkbox/style';
 import { OCheckbox } from '../../checkbox';
 import '../../checkbox-group/style';
 import { OCheckboxGroup } from '../../checkbox-group';
+import '../../radio/style';
+import { ORadio } from '../../radio';
+import '../../radio-group/style';
+import { ORadioGroup } from '../../radio-group';
 
 const textValue = ref('');
 const options = [
@@ -121,6 +125,25 @@ const checkboxRules: RulesT[] = [
     },
   },
 ];
+
+const radioVal = 1;
+
+const radioRules: RulesT[] = [
+  {
+    required: true,
+    message: 'required message',
+  },
+  {
+    validator: (value: number) => {
+      if (value < 3) {
+        return {
+          type: 'warning',
+          message: '建议选项小于3',
+        };
+      }
+    },
+  },
+];
 </script>
 <template>
   <h4>校验</h4>
@@ -149,6 +172,13 @@ const checkboxRules: RulesT[] = [
           <OCheckbox :value="3">选项3</OCheckbox>
         </OCheckboxGroup>
       </OFormItem>
+      <OFormItem label="标题文本3" :rules="radioRules">
+        <ORadioGroup v-model="radioVal">
+          <ORadio ref="ORadioRef2" :value="1">选项1</ORadio>
+          <ORadio :value="2">选项2</ORadio>
+          <ORadio :value="3">选项3</ORadio>
+        </ORadioGroup>
+      </OFormItem>
       <div>
         <button @click="submit">提交</button>
       </div>
diff --git a/packages/opendesign/src/form/__demo__/TheIndex.vue b/packages/opendesign/src/form/__demo__/TheIndex.vue
index bb167a92..5ce120f9 100644
--- a/packages/opendesign/src/form/__demo__/TheIndex.vue
+++ b/packages/opendesign/src/form/__demo__/TheIndex.vue
@@ -8,8 +8,8 @@ import FormRules from './FormRules.vue';
 <template>
   <div class="page-demo">
     <FormRules />
-    <FormBasic />
-    <FormSlots />
+    <!-- <FormBasic /> -->
+    <!-- <FormSlots /> -->
   </div>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/form/form.ts b/packages/opendesign/src/form/form.ts
index 97a8e2a1..9a979872 100644
--- a/packages/opendesign/src/form/form.ts
+++ b/packages/opendesign/src/form/form.ts
@@ -1,4 +1,4 @@
-import { isArray, isFunction, isNull, isUndefined } from '../_utils/is';
+import { isArray, isEmptyArray, isEmptyObject, isFunction, isNull, isUndefined } from '../_utils/is';
 import { RequiredRuleT, RulesT, TypeRuleT, ValidatorRuleT } from './types';
 
 export function toInputString(val: unknown): string {
@@ -30,7 +30,7 @@ export function normalizeRules(rules?: RulesT[]): Array<ValidatorRuleT> {
         return {
           triggers,
           validator: (value: any) => ({
-            type: !isNull(value) && !isUndefined(value) && value !== '' ? 'success' : 'danger',
+            type: !isNull(value) && !isUndefined(value) && value !== '' && !isEmptyArray(value) && !isEmptyObject(value) ? 'success' : 'danger',
             message: (item as RequiredRuleT).message,
           }),
         };
diff --git a/packages/opendesign/src/form/style/style.scss b/packages/opendesign/src/form/style/style.scss
index a77c46b9..775ef709 100644
--- a/packages/opendesign/src/form/style/style.scss
+++ b/packages/opendesign/src/form/style/style.scss
@@ -77,6 +77,13 @@
 .o-form-item-main {
   flex: 1;
 }
+.o-form-item-main-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  min-height: 32px;
+}
 
 .o-form-item-extra {
   margin-top: 4px;
diff --git a/packages/opendesign/src/form/types.ts b/packages/opendesign/src/form/types.ts
index 4b48bda9..cf7e1df5 100644
--- a/packages/opendesign/src/form/types.ts
+++ b/packages/opendesign/src/form/types.ts
@@ -117,6 +117,12 @@ export const formItemProps = {
   labelWidth: {
     type: String,
   },
+  /**
+   * 表单项内容类名
+   */
+  mainClass: {
+    type: [String, Array] as PropType<string | any[]>,
+  },
   /**
    * 表单验证规则
    */
diff --git a/packages/opendesign/src/radio-group/ORadioGroup.vue b/packages/opendesign/src/radio-group/ORadioGroup.vue
index 90c7e98a..726c6c50 100644
--- a/packages/opendesign/src/radio-group/ORadioGroup.vue
+++ b/packages/opendesign/src/radio-group/ORadioGroup.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-import { provide, ref, toRef, watch } from 'vue';
+import { provide, ref, toRef, watch, inject } from 'vue';
 import { radioGroupProps } from './types';
 import { radioGroupInjectKey } from './provide';
 import { isUndefined } from '../_utils/is';
+import { formItemInjectKey } from '../form/provide';
 
 const props = defineProps(radioGroupProps);
 
@@ -13,6 +14,8 @@ const emits = defineEmits<{
 
 const realValue = ref(props.modelValue ?? props.defaultValue);
 
+// 表单注入，用于规则校验
+const formItemInjection = inject(formItemInjectKey, null);
 watch(
   () => props.modelValue,
   (val) => {
@@ -29,6 +32,7 @@ const updateModelValue = (val: string | number | boolean) => {
 
 const onChange = (val: string | number | boolean, ev: Event) => {
   emits('change', val, ev);
+  formItemInjection?.fieldHandlers.onChange?.(val);
 };
 
 provide(radioGroupInjectKey, {
-- 
Gitee


From 06e225e51132dbbde6cb4a1069fcbe5a9d5d928c Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Sat, 27 Jan 2024 18:06:14 +0800
Subject: [PATCH 12/20] =?UTF-8?q?feat(form/upload):upload=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E8=A1=A8=E5=8D=95=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/form/__demo__/FormRules.vue           | 24 ++++++++++++++++++-
 .../src/radio-group/ORadioGroup.vue           |  1 +
 packages/opendesign/src/upload/OUpload.vue    | 10 +++++++-
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/packages/opendesign/src/form/__demo__/FormRules.vue b/packages/opendesign/src/form/__demo__/FormRules.vue
index 8a347d13..647c2f0b 100644
--- a/packages/opendesign/src/form/__demo__/FormRules.vue
+++ b/packages/opendesign/src/form/__demo__/FormRules.vue
@@ -18,6 +18,8 @@ import '../../radio/style';
 import { ORadio } from '../../radio';
 import '../../radio-group/style';
 import { ORadioGroup } from '../../radio-group';
+import '../../upload/style';
+import { OUpload, UploadFileT } from '../../upload';
 
 const textValue = ref('');
 const options = [
@@ -126,7 +128,7 @@ const checkboxRules: RulesT[] = [
   },
 ];
 
-const radioVal = 1;
+const radioVal = 0;
 
 const radioRules: RulesT[] = [
   {
@@ -144,6 +146,23 @@ const radioRules: RulesT[] = [
     },
   },
 ];
+
+const uploadRules: RulesT[] = [
+  {
+    required: true,
+    message: '请至少上传一个文件',
+  },
+  {
+    validator: (value: UploadFileT[]) => {
+      if (value.length <= 2) {
+        return {
+          type: 'warning',
+          message: '建议上传多与2个文件',
+        };
+      }
+    },
+  },
+];
 </script>
 <template>
   <h4>校验</h4>
@@ -179,6 +198,9 @@ const radioRules: RulesT[] = [
           <ORadio :value="3">选项3</ORadio>
         </ORadioGroup>
       </OFormItem>
+      <OFormItem label="标题文本3" :rules="uploadRules">
+        <OUpload btn-label="上传(单选)" multiple color="normal" variant="solid" />
+      </OFormItem>
       <div>
         <button @click="submit">提交</button>
       </div>
diff --git a/packages/opendesign/src/radio-group/ORadioGroup.vue b/packages/opendesign/src/radio-group/ORadioGroup.vue
index 726c6c50..a27be282 100644
--- a/packages/opendesign/src/radio-group/ORadioGroup.vue
+++ b/packages/opendesign/src/radio-group/ORadioGroup.vue
@@ -16,6 +16,7 @@ const realValue = ref(props.modelValue ?? props.defaultValue);
 
 // 表单注入，用于规则校验
 const formItemInjection = inject(formItemInjectKey, null);
+
 watch(
   () => props.modelValue,
   (val) => {
diff --git a/packages/opendesign/src/upload/OUpload.vue b/packages/opendesign/src/upload/OUpload.vue
index 97cfada2..28083126 100644
--- a/packages/opendesign/src/upload/OUpload.vue
+++ b/packages/opendesign/src/upload/OUpload.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { uploadProps, UploadFileT } from './types';
-import { computed, ref } from 'vue';
+import { computed, ref, inject } from 'vue';
 import { isFunction } from '../_utils/is';
 import UploadItem, { ItemSlotNames } from './UploadItem.vue';
 import { UploadLabel, doUploadFileList, doUploadFile, filterSlots, generateImageDataUrl, isPictureType } from './util';
 import UploadSelect, { selectSlotNames } from './UploadSelect.vue';
 import { IconAdd } from '../_utils/icons';
 import InputSelect from './InputSelect.vue';
+import { formItemInjectKey } from '../form/provide';
 
 const props = defineProps(uploadProps);
 const emits = defineEmits<{
@@ -20,6 +21,9 @@ const emits = defineEmits<{
 // 先不做受控模式
 const fileList = ref<UploadFileT[]>(props.defaultFileList || []);
 
+// 表单注入，用于规则校验
+const formItemInjection = inject(formItemInjectKey, null);
+
 let fileId = 1;
 
 const uploadOption = computed(() => {
@@ -64,6 +68,7 @@ const afterSelected = (files: UploadFileT[]) => {
       replaceId = '';
 
       emits('select', fileList.value);
+      formItemInjection?.fieldHandlers.onChange?.(fileList.value);
 
       if (!props.lazyUpload) {
         doUploadFile(fileList.value[idx], uploadOption.value);
@@ -82,6 +87,7 @@ const afterSelected = (files: UploadFileT[]) => {
     }
 
     emits('select', fileList.value);
+    formItemInjection?.fieldHandlers.onChange?.(fileList.value);
 
     if (!props.lazyUpload) {
       doUploadFileList(fileList.value.slice(s, s + l), uploadOption.value);
@@ -131,6 +137,8 @@ const removeFile = async (file: UploadFileT) => {
   file.request?.abort();
   fileList.value = fileList.value.filter((f) => f.id !== file.id);
 
+  formItemInjection?.fieldHandlers.onChange?.(fileList.value);
+
   return true;
 };
 const removeFileByIndex = (index: number) => {
-- 
Gitee


From f8bfcc7d66b32b6380d7d8e9046e64611ab4d3d7 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 29 Jan 2024 11:27:19 +0800
Subject: [PATCH 13/20] =?UTF-8?q?feat(form/input-number):=20input-number?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=A1=A8=E5=8D=95=E8=A7=84=E5=88=99=E6=A0=A1?=
 =?UTF-8?q?=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../opendesign/src/_components/provide.ts     |  5 ++++
 .../src/form/__demo__/FormRules.vue           | 29 +++++++++++++++++++
 .../src/input-number/OInputNumber.vue         | 29 ++++++++++++++++---
 packages/opendesign/src/input/OInput.vue      |  5 +++-
 4 files changed, 63 insertions(+), 5 deletions(-)
 create mode 100644 packages/opendesign/src/_components/provide.ts

diff --git a/packages/opendesign/src/_components/provide.ts b/packages/opendesign/src/_components/provide.ts
new file mode 100644
index 00000000..b793f432
--- /dev/null
+++ b/packages/opendesign/src/_components/provide.ts
@@ -0,0 +1,5 @@
+import { InjectionKey } from 'vue';
+
+export const innerComponentInjectKey: InjectionKey<{
+  isInnerInput: Boolean;
+}> = Symbol('provide-inner-component');
diff --git a/packages/opendesign/src/form/__demo__/FormRules.vue b/packages/opendesign/src/form/__demo__/FormRules.vue
index 647c2f0b..00f3ed29 100644
--- a/packages/opendesign/src/form/__demo__/FormRules.vue
+++ b/packages/opendesign/src/form/__demo__/FormRules.vue
@@ -4,6 +4,8 @@ import { RulesT } from '../types';
 import { ref } from 'vue';
 import '../../input/style';
 import { OInput } from '../../input';
+import '../../input-number/style';
+import { OInputNumber } from '../../input-number';
 import '../../select/style';
 import { OSelect } from '../../select';
 import '../../option/style';
@@ -104,6 +106,30 @@ const selectRules: RulesT[] = [
   },
 ];
 
+const inputNumberVal = 11;
+const inputNumberRules: RulesT[] = [
+  {
+    required: true,
+    message: 'required message',
+  },
+  {
+    validator: (value: number) => {
+      if (value % 2 === 0) {
+        return {
+          type: 'danger',
+          message: '必须是奇数',
+        };
+      }
+      if (value > 10) {
+        return {
+          type: 'warning',
+          message: '数字建议小于10',
+        };
+      }
+    },
+  },
+];
+
 const checkBoxVal = [1];
 const checkboxRules: RulesT[] = [
   {
@@ -172,6 +198,9 @@ const uploadRules: RulesT[] = [
       <OFormItem label="标题文本1" :rules="inputRules">
         <OInput />
       </OFormItem>
+      <OFormItem label="标题文本1" :rules="inputNumberRules">
+        <OInputNumber v-model="inputNumberVal" />
+      </OFormItem>
       <OFormItem label="标题文本1" required>
         <OInput />
         <template #message="{ type, message }"> type: {{ type }} <br />message: {{ message.join('|') }} </template>
diff --git a/packages/opendesign/src/input-number/OInputNumber.vue b/packages/opendesign/src/input-number/OInputNumber.vue
index 46a66c05..00b64749 100644
--- a/packages/opendesign/src/input-number/OInputNumber.vue
+++ b/packages/opendesign/src/input-number/OInputNumber.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue';
+import { ref, watch, computed, inject, provide } from 'vue';
 import { defaultSize } from '../_utils/global';
 import { IconMinus, IconAdd, IconChevronUp, IconChevronDown } from '../_utils/icons';
 import { OInput } from '../input';
 import { isValidNumber, correctValue, string2number, number2string } from './input-number';
 import { isFunction, isUndefined } from '../_utils/is';
 import { inputNumberPorps } from './types';
+import { formItemInjectKey } from '../form/provide';
+import { innerComponentInjectKey } from '../_components/provide';
 
 const props = defineProps(inputNumberPorps);
 
@@ -38,6 +40,16 @@ watch(
   }
 );
 
+const formItemInjection = inject(formItemInjectKey, null);
+
+const color = computed(() => {
+  if (formItemInjection?.fieldResult.value) {
+    return formItemInjection?.fieldResult.value?.type;
+  } else {
+    return props.color;
+  }
+});
+
 const parseFun = (v: string) => {
   let val = string2number(v);
   if (props.parse) {
@@ -78,13 +90,17 @@ const canMinus = computed(() => {
   return true;
 });
 
+const emitChange = () => {
+  emits('change', currentValue.value);
+  formItemInjection?.fieldHandlers.onChange?.(currentValue.value);
+};
 const updateValue = (val: number) => {
   inputValue.value = number2string(val);
 
   emits('update:modelValue', currentValue.value);
 
   if (currentValue.value !== lastValue) {
-    emits('change', currentValue.value);
+    emitChange();
     lastValue = currentValue.value;
   }
   return currentValue.value;
@@ -107,7 +123,7 @@ const onPressEnter = (val: string, evt: Event): void => {
 
 const onChange = (val: string) => {
   inputValue.value = val;
-  emits('change', currentValue.value);
+  emitChange();
 };
 
 const onUpdateModelValue = (val: string) => {
@@ -134,6 +150,11 @@ const controlClick = (type: 'plus' | 'minus', e: MouseEvent) => {
     emits('minus', v, e);
   }
 };
+
+// 表明是否为嵌套子组件
+provide(innerComponentInjectKey, {
+  isInnerInput: true,
+});
 </script>
 <template>
   <OInput
@@ -145,7 +166,7 @@ const controlClick = (type: 'plus' | 'minus', e: MouseEvent) => {
     :on-invalid-change="onInvalidChange"
     :size="props.size"
     :placeholder="props.placeholder"
-    :color="props.color"
+    :color="color"
     :variant="props.variant"
     :round="props.round"
     :disabled="props.disabled"
diff --git a/packages/opendesign/src/input/OInput.vue b/packages/opendesign/src/input/OInput.vue
index f514bb9a..45312ce2 100644
--- a/packages/opendesign/src/input/OInput.vue
+++ b/packages/opendesign/src/input/OInput.vue
@@ -12,6 +12,7 @@ import ClientOnly from '../_components/client-only';
 import { uniqueId } from '../_utils/helper';
 import { useComposition } from '../hooks/use-composition';
 import { formItemInjectKey } from '../form/provide';
+import { innerComponentInjectKey } from '../_components/provide';
 
 const props = defineProps(inputProps);
 
@@ -28,7 +29,9 @@ const emits = defineEmits<{
 const inputId = uniqueId('input');
 const inputType = ref(props.type);
 
-const formItemInjection = inject(formItemInjectKey, null);
+const innerComponentInject = inject(innerComponentInjectKey, null);
+const isInnerInput = innerComponentInject?.isInnerInput;
+const formItemInjection = isInnerInput ? null : inject(formItemInjectKey, null);
 
 const color = computed(() => {
   if (formItemInjection?.fieldResult.value) {
-- 
Gitee


From 7e99b3c1f636b6cc15be45913b97bb097e646c46 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 29 Jan 2024 11:59:07 +0800
Subject: [PATCH 14/20] =?UTF-8?q?feat(form):=20=E5=A2=9E=E5=8A=A0input\inp?=
 =?UTF-8?q?ut-number\textarea=E7=9A=84focuse=E3=80=81blur=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6=E7=9A=84=E6=A3=80=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/form/OFormItem.vue            | 10 +++++++---
 packages/opendesign/src/input-number/OInputNumber.vue |  2 ++
 packages/opendesign/src/input/OInput.vue              |  2 ++
 packages/opendesign/src/textarea/OTextarea.vue        |  2 ++
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/opendesign/src/form/OFormItem.vue b/packages/opendesign/src/form/OFormItem.vue
index e9206c33..14a6a0a3 100644
--- a/packages/opendesign/src/form/OFormItem.vue
+++ b/packages/opendesign/src/form/OFormItem.vue
@@ -62,9 +62,13 @@ const runValidate = (trigger: TriggerT, value: any) => {
 
 const fieldHandlers = {
   onChange(val: any) {
-    runValidate('change', val).then((r) => {
-      console.log('fieldResult', r, fieldResult.value);
-    });
+    runValidate('change', val);
+  },
+  onFocus(val: any) {
+    runValidate('focus', val);
+  },
+  onBlur(val: any) {
+    runValidate('blur', val);
   },
 };
 
diff --git a/packages/opendesign/src/input-number/OInputNumber.vue b/packages/opendesign/src/input-number/OInputNumber.vue
index 00b64749..143d3bad 100644
--- a/packages/opendesign/src/input-number/OInputNumber.vue
+++ b/packages/opendesign/src/input-number/OInputNumber.vue
@@ -113,9 +113,11 @@ const onInput = (val: string, evt: Event) => {
 
 const onFocus = (val: string, evt: FocusEvent) => {
   emits('focus', currentValue.value, evt);
+  formItemInjection?.fieldHandlers.onFocus?.(currentValue.value);
 };
 const onBlur = (val: string, evt: FocusEvent) => {
   emits('blur', currentValue.value, evt);
+  formItemInjection?.fieldHandlers.onBlur?.(currentValue.value);
 };
 const onPressEnter = (val: string, evt: Event): void => {
   emits('pressEnter', currentValue.value, evt);
diff --git a/packages/opendesign/src/input/OInput.vue b/packages/opendesign/src/input/OInput.vue
index 45312ce2..ab8625cf 100644
--- a/packages/opendesign/src/input/OInput.vue
+++ b/packages/opendesign/src/input/OInput.vue
@@ -121,6 +121,7 @@ const onFocus = (e: FocusEvent) => {
     inputText.value = realValue.value;
   }
   emits('focus', realValue.value, e);
+  formItemInjection?.fieldHandlers.onFocus?.(realValue.value);
 };
 
 function updateValue(val: string) {
@@ -160,6 +161,7 @@ const onBlur = (e: FocusEvent) => {
   const val = (e.target as HTMLInputElement)?.value;
   const v = updateValue(val);
   emits('blur', v, e);
+  formItemInjection?.fieldHandlers.onBlur?.(v);
 };
 
 const onKeyDown = (e: KeyboardEvent) => {
diff --git a/packages/opendesign/src/textarea/OTextarea.vue b/packages/opendesign/src/textarea/OTextarea.vue
index ae1b7677..f21757e8 100644
--- a/packages/opendesign/src/textarea/OTextarea.vue
+++ b/packages/opendesign/src/textarea/OTextarea.vue
@@ -128,6 +128,7 @@ const onFocus = (e: FocusEvent) => {
   }
   isFocus.value = true;
   emits('focus', realValue.value, e);
+  formItemInjection?.fieldHandlers.onFocus?.(realValue.value);
 };
 
 const onBlur = (e: FocusEvent) => {
@@ -139,6 +140,7 @@ const onBlur = (e: FocusEvent) => {
   const val = (e.target as HTMLInputElement)?.value;
   const v = updateValue(val);
   emits('blur', v, e);
+  formItemInjection?.fieldHandlers.onBlur?.(v);
 };
 
 const onKeyDown = (e: KeyboardEvent) => {
-- 
Gitee


From d712efbc80b61ed631f27fb8e76c673ef71939a4 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 29 Jan 2024 17:07:09 +0800
Subject: [PATCH 15/20] =?UTF-8?q?fix(dialog):=20=E5=A2=9E=E5=8A=A0with-foo?=
 =?UTF-8?q?ter=E7=B1=BB=EF=BC=8C=E6=B6=88=E9=99=A4:has=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E5=99=A8=EF=BC=8C=E6=8F=90=E5=8D=87=E7=BB=84=E4=BB=B6=E5=85=BC?=
 =?UTF-8?q?=E5=AE=B9=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/dialog/ODialog.vue     | 18 ++++++++++++++++--
 .../opendesign/src/dialog/style/style.scss     |  2 +-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/opendesign/src/dialog/ODialog.vue b/packages/opendesign/src/dialog/ODialog.vue
index bd261ad1..bc04a68b 100644
--- a/packages/opendesign/src/dialog/ODialog.vue
+++ b/packages/opendesign/src/dialog/ODialog.vue
@@ -16,6 +16,7 @@ const emits = defineEmits<{
   (e: 'change', visible: boolean): void;
   (e: 'update:visible', value: boolean, evt?: MouseEvent): void;
 }>();
+
 const layerRef = ref<InstanceType<typeof OLayer> | null>(null);
 
 const onCloseClick = () => {
@@ -72,10 +73,23 @@ defineExpose({
     <div v-if="$slots.header" class="o-dlg-header">
       <slot name="header"></slot>
     </div>
-    <OScroller v-if="isBodyScroller" class="o-dlg-body" size="small" show-type="hover" v-bind="bodyScrollerOptions">
+    <OScroller
+      v-if="isBodyScroller"
+      class="o-dlg-body"
+      size="small"
+      show-type="hover"
+      v-bind="bodyScrollerOptions"
+      :class="{ 'with-footer': $slots.footer || props.actions }"
+    >
       <slot></slot>
     </OScroller>
-    <div v-else class="o-dlg-body">
+    <div
+      v-else
+      class="o-dlg-body"
+      :class="{
+        'with-footer': $slots.footer || props.actions,
+      }"
+    >
       <slot></slot>
     </div>
     <div v-if="$slots.footer || props.actions" class="o-dlg-footer">
diff --git a/packages/opendesign/src/dialog/style/style.scss b/packages/opendesign/src/dialog/style/style.scss
index df29cf7f..502b4284 100644
--- a/packages/opendesign/src/dialog/style/style.scss
+++ b/packages/opendesign/src/dialog/style/style.scss
@@ -59,7 +59,7 @@
     border-top-right-radius: 0;
     padding-top: var(--dlg-padding-body-top);
   }
-  &:has(+ .o-dlg-footer) {
+  &.with-footer {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     padding-bottom: var(--dlg-padding-body-bottom);
-- 
Gitee


From 229437aeb0880184d7301a08bad8613fbfcba00e Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 29 Jan 2024 17:07:43 +0800
Subject: [PATCH 16/20] =?UTF-8?q?style:=20dialog=20demo=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/dialog/__demo__/DialogBasic.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/opendesign/src/dialog/__demo__/DialogBasic.vue b/packages/opendesign/src/dialog/__demo__/DialogBasic.vue
index dc4f900e..c3fe1a08 100644
--- a/packages/opendesign/src/dialog/__demo__/DialogBasic.vue
+++ b/packages/opendesign/src/dialog/__demo__/DialogBasic.vue
@@ -87,7 +87,7 @@ const onChane = (v: boolean) => {
   <h4>基本</h4>
   <OButton @click="toggleHeadOrFoot('head')">show Header</OButton>
   <OButton @click="toggleHeadOrFoot('foot')">show Footer</OButton>
-  <OButton @click="toggleHalfFull('foot')">Phone half full</OButton>
+  <OButton @click="toggleHalfFull()">Phone half full</OButton>
 
   <section class="wrap">
     <OButton @click="toggle(true, 'auto')">Open auto</OButton>
-- 
Gitee


From 833741a86d87ba7f9b2c084b4c6977214c9b6f29 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Thu, 1 Feb 2024 23:10:21 +0800
Subject: [PATCH 17/20] =?UTF-8?q?fix(button):=20=E4=BF=AE=E5=A4=8Da?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E5=9C=A8safari=E6=B5=8F=E8=A7=88=E5=99=A8?=
 =?UTF-8?q?=E4=BD=8E=E7=89=88=E6=9C=AC=E6=A0=B7=E5=BC=8F=E5=8F=97button?=
 =?UTF-8?q?=E5=BD=B1=E5=93=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/button/OButton.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/opendesign/src/button/OButton.vue b/packages/opendesign/src/button/OButton.vue
index cb7fc5e6..676cbf04 100644
--- a/packages/opendesign/src/button/OButton.vue
+++ b/packages/opendesign/src/button/OButton.vue
@@ -5,6 +5,7 @@ import { getRoundClass } from '../_utils/style-class';
 import { buttonProps } from './types';
 import HtmlTag from '../_components/html-tag';
 import { isEmptySlot } from '../_utils/vue-utils';
+import { computed } from 'vue';
 
 const props = defineProps(buttonProps);
 
@@ -12,6 +13,8 @@ const emit = defineEmits<{
   (e: 'click', evt: MouseEvent): void;
 }>();
 
+const tag = computed(() => (!!props.href ? 'a' : props.tag));
+
 const round = getRoundClass(props, 'btn');
 
 const onClick = (e: MouseEvent) => {
@@ -23,9 +26,9 @@ const onClick = (e: MouseEvent) => {
 </script>
 <template>
   <HtmlTag
-    :tag="!!props.href ? 'a' : props.tag"
+    :tag="tag"
     :href="props.href"
-    type="button"
+    :type="tag === 'button' ? 'button' : ''"
     class="o-btn"
     :class="[
       `o-btn-${props.color}`,
-- 
Gitee


From cafc464fa777f0d34e014770365b3e52a96ad80c Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 23 Feb 2024 12:00:41 +0800
Subject: [PATCH 18/20] =?UTF-8?q?feat(form):=20=E8=A1=A8=E5=8D=95=E6=A0=A1?=
 =?UTF-8?q?=E9=AA=8C=E6=94=AF=E6=8C=81=E8=AE=BE=E7=BD=AE=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E9=A1=B9filed=EF=BC=8C=E6=94=AF=E6=8C=81=E4=B8=BB=E5=8A=A8?=
 =?UTF-8?q?=E6=A0=A1=E9=AA=8C=E3=80=81=E6=B8=85=E9=99=A4=E6=A0=A1=E9=AA=8C?=
 =?UTF-8?q?=E3=80=81=E9=87=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/_utils/helper.ts      | 61 ++++++++++++++
 packages/opendesign/src/form/OForm.vue        | 64 ++++++++++++--
 packages/opendesign/src/form/OFormItem.vue    | 81 +++++++++++++++---
 .../src/form/__demo__/FormRules.vue           | 83 ++++++++++++-------
 packages/opendesign/src/form/form.ts          | 62 +++++++-------
 packages/opendesign/src/form/provide.ts       | 20 +++--
 packages/opendesign/src/form/types.ts         | 23 ++++-
 7 files changed, 308 insertions(+), 86 deletions(-)

diff --git a/packages/opendesign/src/_utils/helper.ts b/packages/opendesign/src/_utils/helper.ts
index 0d9a2439..4f8e7fdd 100644
--- a/packages/opendesign/src/_utils/helper.ts
+++ b/packages/opendesign/src/_utils/helper.ts
@@ -1,3 +1,4 @@
+import { isObject, isUndefined } from './is';
 // 防抖 时间为一个一帧
 export function debounceRAF<T extends (...args: Array<unknown>) => any>(fn: T) {
   let handle = 0;
@@ -99,6 +100,11 @@ export function chunk(arr: any[] = [], size = 1) {
   );
 }
 
+/**
+ * 异步some
+ * @param array 遍历数组
+ * @param judgeFn 判断函数
+ */
 export async function asyncSome<T>(array: Array<T>, judgeFn: (arrayItem: T) => Promise<boolean | undefined>) {
   for (const iterator of array) {
     try {
@@ -111,3 +117,58 @@ export async function asyncSome<T>(array: Array<T>, judgeFn: (arrayItem: T) => P
   }
   return false;
 }
+
+/**
+ * 根据path从对象中获取值
+ */
+export function getValueByPath(obj: object, path: string) {
+  if (!obj || !path) {
+    return;
+  }
+
+  const keys = path.split('.');
+  if (keys.length === 0) {
+    return;
+  }
+
+  let temp = obj;
+  for (let i = 0; i < keys.length; i++) {
+    if (!isObject(temp)) {
+      return;
+    }
+    temp = temp[keys[i] as keyof typeof temp];
+    if (i === keys.length - 1) {
+      return temp;
+    }
+  }
+}
+
+/**
+ * 根据path设置对象中的值
+ */
+export function setValueByPath(obj: { [k: string]: any }, path: string, value: any) {
+  if (!obj || !path) {
+    return;
+  }
+
+  const keys = path.split('.');
+  if (keys.length === 0) {
+    return;
+  }
+
+  let temp = obj;
+  for (let i = 0; i < keys.length; i++) {
+    if (!isObject(temp)) {
+      throw new TypeError(`Cannot set properties of non-object (setting '${keys[i]}')!`);
+    }
+    const k = keys[i] as keyof typeof temp;
+    if (i === keys.length - 1) {
+      temp[k] = value;
+    } else {
+      if (isUndefined(temp[k])) {
+        temp[k] = Number(keys[i + 1]) ? [] : {};
+      }
+      temp = temp[k];
+    }
+  }
+}
diff --git a/packages/opendesign/src/form/OForm.vue b/packages/opendesign/src/form/OForm.vue
index 43c61fcc..31da588b 100644
--- a/packages/opendesign/src/form/OForm.vue
+++ b/packages/opendesign/src/form/OForm.vue
@@ -1,20 +1,71 @@
 <script setup lang="ts">
-import { provide, ref, useSlots, onMounted, computed } from 'vue';
+import { provide, computed } from 'vue';
 import { formInjectKey } from './provide';
-import { formProps } from './types';
+import { formProps, FiledInfoT } from './types';
 import { getFlexValue } from './form';
+import { isFunction } from '../_utils/is';
 const props = defineProps(formProps);
 
-const labelWidth = computed(() => props.labelWidth);
 const align = computed(() => getFlexValue(props.labelAlign));
 const justify = computed(() => getFlexValue(props.labelJustify));
 
+const filedList: FiledInfoT[] = [];
+
+const addFiled = (filedItem: FiledInfoT) => {
+  filedList.push(filedItem);
+};
+const removeFiled = (filed: string) => {
+  const idx = filedList.findIndex((item) => item.filed === filed);
+  filedList.splice(idx, 1);
+};
+
+const doValidate = (filed?: string | string[]) => {
+  const filedNames = filed ? ([] as string[]).concat(filed) : [];
+
+  filedList.forEach((item) => {
+    if (filedNames.length === 0 || (item.filed && filedNames.includes(item.filed))) {
+      item?.validate?.('change');
+    }
+  });
+};
+const clearValidate = (filed?: string | string[], onClear?: (filed: FiledInfoT) => void) => {
+  const filedNames = filed ? ([] as string[]).concat(filed) : [];
+  filedList.forEach((item) => {
+    if (filedNames.length === 0 || (item.filed && filedNames.includes(item.filed))) {
+      item.clearValidate();
+      if (isFunction(onClear)) {
+        onClear(item);
+      }
+    }
+  });
+};
+const resetFields = (filed?: string | string[]) => {
+  clearValidate(filed, (item: FiledInfoT) => {
+    item.resetFiled();
+  });
+  console.log('rest fileds');
+  // todo 重置表单
+};
+
+const onSubmit = () => {
+  console.log('submit');
+  doValidate();
+};
+
 provide(formInjectKey, {
-  labelWidth,
+  model: props.model,
+  addFiled,
+  removeFiled,
+});
+
+defineExpose({
+  validate: doValidate,
+  resetFields,
+  clearValidate,
 });
 </script>
 <template>
-  <div
+  <form
     class="o-form"
     :class="[
       {
@@ -28,7 +79,8 @@ provide(formInjectKey, {
       '--form-label-justify': justify,
       '--form-item-align': align,
     }"
+    @submit.prevent="onSubmit"
   >
     <slot></slot>
-  </div>
+  </form>
 </template>
diff --git a/packages/opendesign/src/form/OFormItem.vue b/packages/opendesign/src/form/OFormItem.vue
index 14a6a0a3..927d26bd 100644
--- a/packages/opendesign/src/form/OFormItem.vue
+++ b/packages/opendesign/src/form/OFormItem.vue
@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import { computed, ref, provide } from 'vue';
-import { RequiredRuleT, formItemProps, TriggerT, FieldResultT, ValidatorResultT } from './types';
-import { formItemInjectKey } from './provide';
+import { computed, ref, provide, inject, onMounted, onBeforeUnmount } from 'vue';
+import { RequiredRuleT, formItemProps, TriggerT, FieldResultT } from './types';
+import { formItemInjectKey, formInjectKey, formCtx } from './provide';
 import { getFlexValue, normalizeRules } from './form';
 import { isArray } from '../_utils/is';
-import { asyncSome } from '../_utils/helper';
+import { asyncSome, getValueByPath, setValueByPath } from '../_utils/helper';
 import logger from '../_utils/log';
 
 const requireSymbol = '*';
 
 const props = defineProps(formItemProps);
 
+const formInject = inject<Partial<formCtx>>(formInjectKey, {});
+
 const align = computed(() => getFlexValue(props.labelAlign));
 const justify = computed(() => getFlexValue(props.labelJustify));
 const isRequired = computed(() => {
@@ -21,11 +23,33 @@ const isRequired = computed(() => {
   }
   return false;
 });
-const rules = computed(() => normalizeRules(props.rules));
+
+const rules = computed(() => normalizeRules(props.rules, props.required));
+const ruleTriggers = computed(() => {
+  let triggers: TriggerT[] = [];
+  rules.value.forEach((item) => {
+    if (item.triggers) {
+      triggers = triggers.concat(item.triggers);
+    }
+  });
+  return Array.from(new Set(triggers));
+});
 
 const fieldResult = ref<FieldResultT | null>(null);
 
-const runValidate = (trigger: TriggerT, value: any) => {
+const initialVal = formInject.model && props.field ? getValueByPath(formInject.model, props.field) : void 0;
+
+const runValidate = (trigger: TriggerT = 'change') => {
+  if (!props.field || !formInject.model) {
+    return;
+  }
+  // 判断该事件是否存在校验规则
+  if (!ruleTriggers.value.includes(trigger)) {
+    return;
+  }
+  const value = getValueByPath(formInject.model, props.field);
+  // logger.info(trigger, props.field, value);
+
   fieldResult.value = null;
   return asyncSome(rules.value, async (item) => {
     if (item.triggers?.includes(trigger)) {
@@ -60,18 +84,49 @@ const runValidate = (trigger: TriggerT, value: any) => {
   });
 };
 
+const clearValidate = () => {
+  if (!props.field || !formInject.model) {
+    return;
+  }
+  fieldResult.value = null;
+};
+
+const resetFiled = () => {
+  if (formInject.model && props.field) {
+    setValueByPath(formInject.model, props.field, initialVal);
+  }
+};
+
 const fieldHandlers = {
-  onChange(val: any) {
-    runValidate('change', val);
+  onChange() {
+    runValidate('change');
   },
-  onFocus(val: any) {
-    runValidate('focus', val);
+  onFocus() {
+    runValidate('focus');
   },
-  onBlur(val: any) {
-    runValidate('blur', val);
+  onBlur() {
+    runValidate('blur');
   },
 };
 
+onMounted(() => {
+  if (props.field) {
+    formInject.addFiled?.({
+      filed: props.field,
+      validate: runValidate,
+      clearValidate,
+      resetFiled,
+    });
+    // logger.info('addFiled', props.field);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (props.field) {
+    formInject.removeFiled?.(props.field);
+    // logger.info('removeFiled', props.field);
+  }
+});
 provide(formItemInjectKey, {
   fieldHandlers,
   fieldResult,
@@ -82,7 +137,7 @@ provide(formItemInjectKey, {
     class="o-form-item"
     :class="[
       {
-        'is-required': isRequired,
+        'o-form-item-required': isRequired,
         'o-form-item-danger': fieldResult?.type === 'danger',
         'o-form-item-warning': fieldResult?.type === 'warning',
       },
diff --git a/packages/opendesign/src/form/__demo__/FormRules.vue b/packages/opendesign/src/form/__demo__/FormRules.vue
index 00f3ed29..f828621c 100644
--- a/packages/opendesign/src/form/__demo__/FormRules.vue
+++ b/packages/opendesign/src/form/__demo__/FormRules.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { ref, reactive, computed } from 'vue';
 import { OForm, OFormItem } from '../index';
 import { RulesT } from '../types';
-import { ref } from 'vue';
 import '../../input/style';
 import { OInput } from '../../input';
 import '../../input-number/style';
@@ -22,8 +22,9 @@ import '../../radio-group/style';
 import { ORadioGroup } from '../../radio-group';
 import '../../upload/style';
 import { OUpload, UploadFileT } from '../../upload';
+import '../../button/style';
+import { OButton } from '../../button';
 
-const textValue = ref('');
 const options = [
   { label: 'option 1', value: 1 },
   { label: 'option 2', value: 2 },
@@ -35,10 +36,24 @@ const submit = () => {
   console.log('submit');
 };
 
+const formModel = reactive({
+  a: {
+    input1: '',
+  },
+  inputNumber: 1,
+  input2: '123',
+  select1: '',
+  textarea1: '',
+  checkbox: [],
+  radio: '',
+  upload: [],
+});
+
 const inputRules: RulesT[] = [
   {
     required: true,
     message: 'required message',
+    triggers: ['blur', 'change'],
   },
   {
     validator: (value?: any) => {
@@ -106,12 +121,7 @@ const selectRules: RulesT[] = [
   },
 ];
 
-const inputNumberVal = 11;
 const inputNumberRules: RulesT[] = [
-  {
-    required: true,
-    message: 'required message',
-  },
   {
     validator: (value: number) => {
       if (value % 2 === 0) {
@@ -130,7 +140,6 @@ const inputNumberRules: RulesT[] = [
   },
 ];
 
-const checkBoxVal = [1];
 const checkboxRules: RulesT[] = [
   {
     required: true,
@@ -154,8 +163,6 @@ const checkboxRules: RulesT[] = [
   },
 ];
 
-const radioVal = 0;
-
 const radioRules: RulesT[] = [
   {
     required: true,
@@ -189,49 +196,69 @@ const uploadRules: RulesT[] = [
     },
   },
 ];
+
+const values = computed(() =>
+  Object.keys(formModel).map((k) => {
+    return `${k}: ${JSON.stringify(formModel[k as keyof typeof formModel])}`;
+  })
+);
+console.log(values);
+
+const formRef = ref<InstanceType<typeof OForm>>();
+const reset = () => {
+  formRef.value?.resetFields();
+};
+const clear = () => {
+  formRef.value?.clearValidate();
+};
 </script>
 <template>
   <h4>校验</h4>
 
   <section>
-    <OForm class="form" has-required>
-      <OFormItem label="标题文本1" :rules="inputRules">
-        <OInput />
+    <OForm ref="formRef" class="form" has-required :model="formModel">
+      <OFormItem label="必选文本1" required field="input2">
+        <OInput v-model="formModel.input2" />
+        <template #message="{ type, message }"> type: {{ type }} | message: {{ message.join('|') }} </template>
       </OFormItem>
-      <OFormItem label="标题文本1" :rules="inputNumberRules">
-        <OInputNumber v-model="inputNumberVal" />
+      <OFormItem label="标题文本1" :rules="inputRules" field="a.input1">
+        <OInput v-model="formModel.a.input1" />
       </OFormItem>
-      <OFormItem label="标题文本1" required>
-        <OInput />
-        <template #message="{ type, message }"> type: {{ type }} <br />message: {{ message.join('|') }} </template>
+      <OFormItem label="标题文本1" :rules="inputNumberRules" field="inputNumber">
+        <OInputNumber v-model="formModel.inputNumber" />
       </OFormItem>
-      <OFormItem label="标题文本2" :rules="selectRules">
-        <OSelect clearable>
+      <OFormItem label="标题文本2" :rules="selectRules" field="select1">
+        <OSelect v-model="formModel.select1" clearable>
           <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </OSelect>
       </OFormItem>
-      <OFormItem label="标题文本3" :rules="inputRules">
-        <OTextarea v-model="textValue" />
+      <OFormItem label="标题文本3" :rules="inputRules" field="textarea1">
+        <OTextarea v-model="formModel.textarea1" />
       </OFormItem>
-      <OFormItem label="标题文本3" :rules="checkboxRules">
-        <OCheckboxGroup v-model="checkBoxVal">
+      <OFormItem label="标题文本3" :rules="checkboxRules" field="checkbox">
+        <OCheckboxGroup v-model="formModel.checkbox">
           <OCheckbox ref="checkBoxRef2" :value="1">选项1</OCheckbox>
           <OCheckbox :value="2">选项2</OCheckbox>
           <OCheckbox :value="3">选项3</OCheckbox>
         </OCheckboxGroup>
       </OFormItem>
-      <OFormItem label="标题文本3" :rules="radioRules">
-        <ORadioGroup v-model="radioVal">
+      <OFormItem label="标题文本3" :rules="radioRules" field="radio">
+        <ORadioGroup v-model="formModel.radio">
           <ORadio ref="ORadioRef2" :value="1">选项1</ORadio>
           <ORadio :value="2">选项2</ORadio>
           <ORadio :value="3">选项3</ORadio>
         </ORadioGroup>
       </OFormItem>
-      <OFormItem label="标题文本3" :rules="uploadRules">
+      <OFormItem label="标题文本3" :rules="uploadRules" field="upload">
         <OUpload btn-label="上传(单选)" multiple color="normal" variant="solid" />
       </OFormItem>
       <div>
-        <button @click="submit">提交</button>
+        <OButton type="submit">提交</OButton>
+        <OButton @click="reset">重置</OButton>
+        <OButton @click="clear">清除校验</OButton>
+      </div>
+      <div class="values">
+        <p v-for="item in values" :key="item">{{ item }}</p>
       </div>
     </OForm>
   </section>
diff --git a/packages/opendesign/src/form/form.ts b/packages/opendesign/src/form/form.ts
index 9a979872..168a3287 100644
--- a/packages/opendesign/src/form/form.ts
+++ b/packages/opendesign/src/form/form.ts
@@ -22,35 +22,39 @@ export function getFlexValue(val?: 'top' | 'center' | 'bottom' | 'left' | 'cente
   return '';
 }
 
-export function normalizeRules(rules?: RulesT[]): Array<ValidatorRuleT> {
-  if (isArray(rules)) {
-    return rules.map((item) => {
-      const triggers = isArray(item.triggers) ? item.triggers : [item.triggers ?? 'change'];
-      if ((item as RequiredRuleT).required) {
-        return {
-          triggers,
-          validator: (value: any) => ({
-            type: !isNull(value) && !isUndefined(value) && value !== '' && !isEmptyArray(value) && !isEmptyObject(value) ? 'success' : 'danger',
-            message: (item as RequiredRuleT).message,
-          }),
-        };
-      } else if ((item as TypeRuleT).type) {
-        return {
-          triggers,
-          validator: (value: any) => ({
-            type: typeof value === (item as TypeRuleT).type ? 'success' : 'danger',
-            message: (item as TypeRuleT).message,
-          }),
-        };
-      } else if (isFunction((item as ValidatorRuleT).validator)) {
-        return {
-          triggers,
-          validator: (item as ValidatorRuleT).validator,
-        };
-      } else {
-        return {};
-      }
+export function normalizeRules(rules?: RulesT[], required?: boolean): Array<ValidatorRuleT> {
+  const _rules = rules || [];
+  if (required && (_rules.length == 0 || _rules.some((item) => !(item as RequiredRuleT).required))) {
+    _rules.unshift({
+      required: true,
+      message: 'required',
     });
   }
-  return [];
+  return _rules.map((item) => {
+    const triggers = isArray(item.triggers) ? item.triggers : [item.triggers ?? 'change'];
+    if ((item as RequiredRuleT).required) {
+      return {
+        triggers,
+        validator: (value: any) => ({
+          type: !isNull(value) && !isUndefined(value) && value !== '' && !isEmptyArray(value) && !isEmptyObject(value) ? 'success' : 'danger',
+          message: (item as RequiredRuleT).message,
+        }),
+      };
+    } else if ((item as TypeRuleT).type) {
+      return {
+        triggers,
+        validator: (value: any) => ({
+          type: typeof value === (item as TypeRuleT).type ? 'success' : 'danger',
+          message: (item as TypeRuleT).message,
+        }),
+      };
+    } else if (isFunction((item as ValidatorRuleT).validator)) {
+      return {
+        triggers,
+        validator: (item as ValidatorRuleT).validator,
+      };
+    } else {
+      return {};
+    }
+  });
 }
diff --git a/packages/opendesign/src/form/provide.ts b/packages/opendesign/src/form/provide.ts
index db3be409..4ad612b6 100644
--- a/packages/opendesign/src/form/provide.ts
+++ b/packages/opendesign/src/form/provide.ts
@@ -1,5 +1,5 @@
-import { InjectionKey, ComputedRef, Ref } from 'vue';
-import { FieldResultT } from './types';
+import { InjectionKey, Ref } from 'vue';
+import { FieldResultT, FiledInfoT } from './types';
 
 type FieldHandlersT = {
   onChange?: (value: any, event?: Event) => void;
@@ -7,12 +7,16 @@ type FieldHandlersT = {
   onFocus?: (value: any, event?: FocusEvent) => void;
   onBlur?: (value: any, event?: FocusEvent) => void;
 };
+export interface formCtx {
+  // labelWidth?: ComputedRef<string | undefined>;
+  model?: object;
+  addFiled: (filed: FiledInfoT) => void;
+  removeFiled: (filed: string) => void;
+}
 
-export const formInjectKey: InjectionKey<{
-  labelWidth?: ComputedRef<string | undefined>;
-}> = Symbol('provide-form');
-
-export const formItemInjectKey: InjectionKey<{
+export const formInjectKey: InjectionKey<formCtx> = Symbol('provide-form');
+export interface formItemCtx {
   fieldHandlers: FieldHandlersT;
   fieldResult: Ref<FieldResultT | null>;
-}> = Symbol('provide-form-item');
+}
+export const formItemInjectKey: InjectionKey<formItemCtx> = Symbol('provide-form-item');
diff --git a/packages/opendesign/src/form/types.ts b/packages/opendesign/src/form/types.ts
index cf7e1df5..6a0873ea 100644
--- a/packages/opendesign/src/form/types.ts
+++ b/packages/opendesign/src/form/types.ts
@@ -18,8 +18,8 @@ export type ValidatorRuleT = {
 };
 
 export type FieldResultT = {
-  type: 'warning' | 'danger';
-  message?: string[];
+  type: 'warning' | 'danger' | '';
+  message: string[];
 };
 
 export type RequiredRuleT = {
@@ -35,7 +35,20 @@ export type TypeRuleT = {
 
 export type RulesT = ValidatorRuleT | RequiredRuleT | TypeRuleT;
 
+export interface FiledInfoT {
+  filed?: string;
+  validate?: (trigger: TriggerT) => Promise<boolean> | undefined;
+  clearValidate: () => void;
+  resetFiled: () => void;
+}
+
 export const formProps = {
+  /**
+   * 表单数据对象
+   */
+  model: {
+    type: Object,
+  },
   /**
    * 类型 TabVariantT
    */
@@ -85,6 +98,12 @@ export const formProps = {
 export type FormPropsT = ExtractPropTypes<typeof formProps>;
 
 export const formItemProps = {
+  /**
+   * 表单项在数据对象中的path
+   */
+  field: {
+    type: String,
+  },
   /**
    * 是否必选
    */
-- 
Gitee


From f2b66c539a927a06e5ff58b5757a8cbaa031f02a Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 23 Feb 2024 14:11:37 +0800
Subject: [PATCH 19/20] =?UTF-8?q?style(form):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/form/OForm.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/opendesign/src/form/OForm.vue b/packages/opendesign/src/form/OForm.vue
index 31da588b..21c4e7fa 100644
--- a/packages/opendesign/src/form/OForm.vue
+++ b/packages/opendesign/src/form/OForm.vue
@@ -41,14 +41,12 @@ const clearValidate = (filed?: string | string[], onClear?: (filed: FiledInfoT)
 };
 const resetFields = (filed?: string | string[]) => {
   clearValidate(filed, (item: FiledInfoT) => {
+    // 重置表单
     item.resetFiled();
   });
-  console.log('rest fileds');
-  // todo 重置表单
 };
 
 const onSubmit = () => {
-  console.log('submit');
   doValidate();
 };
 
-- 
Gitee


From 3960bd069cc72fa2a4cbfdc1037f2b7b4db6a457 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 23 Feb 2024 16:54:59 +0800
Subject: [PATCH 20/20] =?UTF-8?q?feat(form):=20slot=20=E5=A2=9E=E5=8A=A0la?=
 =?UTF-8?q?bel=EF=BC=9B=20=E4=BF=AE=E5=A4=8Dupload=E6=A0=A1=E9=AA=8C?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/form/OFormItem.vue          | 2 +-
 packages/opendesign/src/form/__demo__/FormRules.vue | 5 ++++-
 packages/opendesign/src/form/__demo__/FormSlots.vue | 5 +++++
 packages/opendesign/src/form/__demo__/TheIndex.vue  | 4 ++--
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/opendesign/src/form/OFormItem.vue b/packages/opendesign/src/form/OFormItem.vue
index 927d26bd..5792a1b6 100644
--- a/packages/opendesign/src/form/OFormItem.vue
+++ b/packages/opendesign/src/form/OFormItem.vue
@@ -157,7 +157,7 @@ provide(formItemInjectKey, {
       >
         <slot name="symbol">{{ requireSymbol }}</slot>
       </span>
-      <slot name="name">
+      <slot name="label">
         <span>{{ props.label }}</span>
       </slot>
     </div>
diff --git a/packages/opendesign/src/form/__demo__/FormRules.vue b/packages/opendesign/src/form/__demo__/FormRules.vue
index f828621c..7f6aa017 100644
--- a/packages/opendesign/src/form/__demo__/FormRules.vue
+++ b/packages/opendesign/src/form/__demo__/FormRules.vue
@@ -196,6 +196,9 @@ const uploadRules: RulesT[] = [
     },
   },
 ];
+const onUploadChange = (value: UploadFileT[]) => {
+  (formModel.upload as UploadFileT[]) = value;
+};
 
 const values = computed(() =>
   Object.keys(formModel).map((k) => {
@@ -250,7 +253,7 @@ const clear = () => {
         </ORadioGroup>
       </OFormItem>
       <OFormItem label="标题文本3" :rules="uploadRules" field="upload">
-        <OUpload btn-label="上传(单选)" multiple color="normal" variant="solid" />
+        <OUpload btn-label="上传(单选)" multiple color="normal" variant="solid" @select="onUploadChange" />
       </OFormItem>
       <div>
         <OButton type="submit">提交</OButton>
diff --git a/packages/opendesign/src/form/__demo__/FormSlots.vue b/packages/opendesign/src/form/__demo__/FormSlots.vue
index 76cce950..e948e506 100644
--- a/packages/opendesign/src/form/__demo__/FormSlots.vue
+++ b/packages/opendesign/src/form/__demo__/FormSlots.vue
@@ -22,6 +22,11 @@ const options = [
   <section>
     <div class="row">
       <OForm class="form" has-required layout="h">
+        <OFormItem label="标题文本1" required>
+          <template #label> 自定义label</template>
+          <OInput />
+          <template #extra> 这是一段额外的消息 </template>
+        </OFormItem>
         <OFormItem label="标题文本1" required>
           <OInput />
           <template #extra> 这是一段额外的消息 </template>
diff --git a/packages/opendesign/src/form/__demo__/TheIndex.vue b/packages/opendesign/src/form/__demo__/TheIndex.vue
index 5ce120f9..bb167a92 100644
--- a/packages/opendesign/src/form/__demo__/TheIndex.vue
+++ b/packages/opendesign/src/form/__demo__/TheIndex.vue
@@ -8,8 +8,8 @@ import FormRules from './FormRules.vue';
 <template>
   <div class="page-demo">
     <FormRules />
-    <!-- <FormBasic /> -->
-    <!-- <FormSlots /> -->
+    <FormBasic />
+    <FormSlots />
   </div>
 </template>
 <style lang="scss"></style>
-- 
Gitee