diff --git a/packages/opendesign/src/_utils/log.ts b/packages/opendesign/src/_utils/log.ts
new file mode 100644
index 0000000000000000000000000000000000000000..903fd9e64af4074709399f7f0b28899a8e539612
--- /dev/null
+++ b/packages/opendesign/src/_utils/log.ts
@@ -0,0 +1,48 @@
+const logFunction = {
+  info: console.info,
+  warn: console.warn,
+  error: console.error,
+};
+
+export type LogLevel = keyof typeof logFunction;
+
+function printLog(level: LogLevel, ...msg: any[]) {
+  const fn = logFunction[level];
+  if (fn) {
+    fn(...msg);
+  }
+}
+
+export class Log {
+  prefix: string;
+  constructor(namespace?: string) {
+    this.prefix = '';
+    if (namespace) {
+      this.prefix = `[${namespace}]`;
+    }
+  }
+  info(...msg: any[]) {
+    if (this.prefix) {
+      msg.unshift(this.prefix);
+    }
+    printLog('info', ...msg);
+  }
+
+  warn(...msg: any[]) {
+    if (this.prefix) {
+      msg.unshift(this.prefix);
+    }
+    printLog('warn', ...msg);
+  }
+
+  error(...msg: any[]) {
+    if (this.prefix) {
+      msg.unshift(this.prefix);
+    }
+    printLog('error', ...msg);
+  }
+}
+
+const logger = new Log();
+
+export default logger;
diff --git a/packages/opendesign/src/flex/OFlex.vue b/packages/opendesign/src/flex/OFlex.vue
index 6dbb2942afeadfcb043cdd41220d129c383c0144..276ba6b6bd76b85d7a7d97ec596d5388ce74a241 100644
--- a/packages/opendesign/src/flex/OFlex.vue
+++ b/packages/opendesign/src/flex/OFlex.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import logger from '../_utils/log';
 import { flexProps, FlexMediaT } from './types';
 import { computed } from 'vue';
 
@@ -50,6 +51,8 @@ const smGap = computed(() => {
 const xsGap = computed(() => {
   return getMediaGap(props.xs);
 });
+
+logger.warn('component OFlex|OFlexItem is deprecated, please use ORow|OCol instead');
 </script>
 <template>
   <div
diff --git a/packages/opendesign/src/index.ts b/packages/opendesign/src/index.ts
index 8e7884f31f259d28c8a4617b4870d8bdf18cc4e6..6edef90c133cbc53291292e9fc78af1b9db5ed28 100644
--- a/packages/opendesign/src/index.ts
+++ b/packages/opendesign/src/index.ts
@@ -38,7 +38,7 @@ export * from './card';
 export * from './message';
 export * from './carousel';
 export * from './cascader';
-export * from './flex';
+export * from './flex'; // deprecated
 export * from './grid';
 export * from './result';
 export * from './scroller';
diff --git a/packages/opendesign/src/select/OSelect.vue b/packages/opendesign/src/select/OSelect.vue
index 08fc2f4ad4edca2be120dc14d664ac4ca79823aa..7a0c5946938e627d8373b583fa178a4ad09a25fc 100644
--- a/packages/opendesign/src/select/OSelect.vue
+++ b/packages/opendesign/src/select/OSelect.vue
@@ -123,6 +123,9 @@ const clearClick = (e: Event) => {
 
   valueList.value = [];
   emits('clear', e);
+
+  emits('change', [...valueList.value]);
+  emits('update:modelValue', [...valueList.value]);
 };
 const beforeSelect = async (value: string | number) => {
   if (isFunction(props.beforeSelect)) {
@@ -197,6 +200,9 @@ const onRemoveTag = (value: string | number, e: MouseEvent) => {
   const idx = valueList.value.indexOf(value);
   if (idx > -1) {
     valueList.value.splice(idx, 1);
+
+    emits('change', [...valueList.value]);
+    emits('update:modelValue', [...valueList.value]);
   }
 };
 const onFoldTagClick = (e: MouseEvent) => {
diff --git a/packages/opendesign/src/select/__demo__/SelectBasic.vue b/packages/opendesign/src/select/__demo__/SelectBasic.vue
index e67c1c94f076e6d685474dee3fed83bd44bc82c8..28bf9c20662eb1c8443c0270b42807cd94403b32 100644
--- a/packages/opendesign/src/select/__demo__/SelectBasic.vue
+++ b/packages/opendesign/src/select/__demo__/SelectBasic.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { OSelect } from '../index';
+import { OSelect, SelectValueT } from '../index';
 import { OOption } from '../../option';
 const options = [
   { label: 'option 1', value: 'opt1' },
@@ -23,13 +23,17 @@ const selectVal1 = ref('opt1');
 const changeVal = () => {
   selectVal1.value = 'opt3';
 };
+
+const onChange = (value: SelectValueT) => {
+  console.log(value);
+};
 </script>
 <template>
   <h4>Color & Variant</h4>
   <section>
     <div @click="changeVal">Text</div>
     <div class="row">
-      <OSelect v-model="selectVal1" variant="text" placeholder="normal + outline" loading>
+      <OSelect v-model="selectVal1" variant="text" placeholder="normal + outline">
         <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
       </OSelect>
       <OSelect v-model="selectVal1" variant="text" color="success" placeholder="normal + success" option-title="请选择">
@@ -44,16 +48,16 @@ const changeVal = () => {
     </div>
     <div @click="changeVal">Outline</div>
     <div class="row">
-      <OSelect v-model="selectVal1" placeholder="normal + outline" loading>
+      <OSelect v-model="selectVal1" placeholder="normal + outline" loading @change="onChange">
         <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
       </OSelect>
-      <OSelect v-model="selectVal1" color="success" placeholder="normal + success">
+      <OSelect v-model="selectVal1" color="success" placeholder="normal + success" clearable @change="onChange">
         <OOption v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
       </OSelect>
-      <OSelect v-model="selectVal1" color="warning" placeholder="normal + warning">
+      <OSelect v-model="selectVal1" color="warning" placeholder="normal + warning" @change="onChange">
         <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
       </OSelect>
-      <OSelect v-model="selectVal1" color="danger" placeholder="normal + danger">
+      <OSelect v-model="selectVal1" color="danger" placeholder="normal + danger" @change="onChange">
         <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
       </OSelect>
     </div>
diff --git a/packages/opendesign/src/select/__demo__/SelectMultiple.vue b/packages/opendesign/src/select/__demo__/SelectMultiple.vue
index 624999980360d34fc2e5a704db98f686de7be277..54804a535318b0c1d37f414b49d4f5ae1af97f27 100644
--- a/packages/opendesign/src/select/__demo__/SelectMultiple.vue
+++ b/packages/opendesign/src/select/__demo__/SelectMultiple.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { OSelect, SelectOptionT } from '../index';
+import { OSelect, SelectOptionT, SelectValueT } from '../index';
 import { OOption } from '../../option';
 import { ref } from 'vue';
 const options = [
@@ -18,11 +18,15 @@ const val = ref(['1', '4', '3', '5']);
 const exceededLabel = (tags: SelectOptionT[]) => {
   return tags.map((item) => item.label).join(',');
 };
+
+const onChange = (value: SelectValueT) => {
+  console.log(value);
+};
 </script>
 <template>
   <h3>多选</h3>
   <section>
-    <OSelect v-model="val" placeholder="多选" style="width: 240px" multiple :max-tag-count="3">
+    <OSelect v-model="val" placeholder="多选" style="width: 240px" multiple :max-tag-count="3" clearable @change="onChange">
       <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled">++{{ item.label }}++</OOption>
     </OSelect>
     <OSelect v-model="val" placeholder="多选" style="width: 240px" multiple size="large" :max-tag-count="2" :fold-label="exceededLabel">
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index f1bb4b55ab321ab5e7f7e5a28978f10537e9c892..70f6436222846f6e5cccf8f52ade2790d3680c19 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -215,7 +215,7 @@ export const routes = [
   {
     path: '/flex',
     name: 'Flex',
-    label: '布局 Flex',
+    label: '布局 Flex(已废弃)',
     component: () => import('@components/flex/__demo__/TheIndex.vue'),
   },
   {