diff --git a/packages/designer/src/components/components/form-designer/form-designer.component.tsx b/packages/designer/src/components/components/form-designer/form-designer.component.tsx
index f3f68c284833f8f428196af89f00f56e2ca2acb7..44a863b7b181ab4c725c3f46e34b7df80acc596c 100644
--- a/packages/designer/src/components/components/form-designer/form-designer.component.tsx
+++ b/packages/designer/src/components/components/form-designer/form-designer.component.tsx
@@ -25,7 +25,6 @@ export default defineComponent({
         const propertyPanelInstance = ref();
         const schema = ref<any>(props.schema);
         const componentSchema = schema.value.module ? ref(schema.value.module.components[0]) : ref(schema.value);
-        const componentId = ref(componentSchema.value['id'] || 'root-component');
         const dragulaCompostion = ref();
         const fillTabs = ref(true);
         const controlTreeRef = ref();
@@ -57,7 +56,10 @@ export default defineComponent({
         const schemaUtil = inject('schemaService') as UseSchemaService;
         const formCommandService = inject('useFormCommand') as UseFormCommandService;
 
-        const useFormSchema: any = inject('useFormSchema') as UseFormSchema;
+        const useFormSchema: UseFormSchema = inject('useFormSchema') as UseFormSchema;
+        const pageComponents = designerContext.getPageComponents(useFormSchema);
+        const componentSchemaForCanvas = ref(pageComponents[0]);
+        const componentId = ref(componentSchemaForCanvas.value['id'] || 'root-component');
 
         function clearExternalComponentSelection(): void {
             externalComponentPanelRef.value?.clearSelection();
@@ -216,11 +218,28 @@ export default defineComponent({
          * @returns 
          */
         function changePageComponent(selectionNode: any) {
-            const isPageChanged = selectionNode.componentId && componentId.value !== selectionNode.componentId;
-            if (isPageChanged) {
-                componentId.value = selectionNode.componentId;
-                const selectPageComponent = useFormSchema.getComponentById(componentId.value);
-                componentSchema.value = selectPageComponent;
+            // 仅在移动设计器模式下处理页面切换
+            if (designerMode !== DesignerMode.Mobile) {
+                return;
+            }
+
+            // 获取选择的页面Id
+            const selectedPageId = useFormSchema.getPageIdByComponentId(selectionNode.componentId);
+            if (!selectedPageId) {
+                return;
+            }
+
+            // 检查页面是否发生变化
+            const isPageChanged = componentId.value !== selectedPageId;
+            if (!isPageChanged) {
+                return;
+            }
+
+            const selectPageComponent = useFormSchema.getComponentById(selectedPageId);
+            if (selectPageComponent) {
+                componentId.value = selectedPageId;
+                componentSchemaForCanvas.value = selectPageComponent;
+                canvasRef.value?.refreshCanvas();
             }
         }
 
@@ -316,7 +335,7 @@ export default defineComponent({
                             <div class="f-utils-fill">
                                 <div class="h-100 form-designer-view" hidden={showDesignerView.value('formDesigner')}>
                                     <FDesignerCanvas ref={canvasRef}
-                                        v-model={componentSchema.value}
+                                        v-model={componentSchemaForCanvas.value}
                                         onInit={onCanvasInitialized}
                                         onSelectionChange={onDesignItemClicked}
                                         onCanvasChanged={onCanvasChanged}
diff --git a/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts b/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts
index 3643eee3c74e848ced1f7c3db589da8d85957567..ef41dba0c1cb2369964cbf90efc641fa59f576a3 100644
--- a/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts
+++ b/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts
@@ -1,16 +1,11 @@
 import { DesignerMode, UseDesignerContext } from "../../types/designer-context";
 import ToolboxItems from '../../types/toolbox/mobile-toolbox.json';
-import SupportedControllers from '../../composition/command/supported-controllers/mobile-supported-controller.json';
+import SupportedControllers from '../../composition/command/supported-controllers/pc-supported-controller.json';
 
-import {
-    Component, PageContainer, PageHeaderContainer, PageBodyContainer, PageFooterContainer, Picker, NumberInput, Textarea, DatePicker, DateTimePicker, Lookup,
-    ContentContainer, Card, FloatContainer, Navbar, ListView, Form, FormItem, InputGroup, Button, registerDesignerComponents, Switch, CheckboxGroup, RadioGroup,
-    ButtonGroup,
-} from '@farris/mobile-ui-vue';
+import { registerDesignerComponents, registerComponents, components,DgControl } from '@farris/mobile-ui-vue';
 import { useMobileControlCreator } from "../control-creator/use-mobile-control-creator";
 import { FormComponent, UseFormSchema } from "../../../components/types";
 import ControllCategories from '../schema-repository/controller/mobile-categories';
-import axios from 'axios';
 import { useFormMetadata } from "../form-metadata.service";
 import { useCommandBuilderService as useCommandBuilder } from "../command-builder.service";
 
@@ -18,19 +13,17 @@ export function useMobileDesignerContext(): UseDesignerContext {
 
     /** 设计器模式 */
     const designerMode: DesignerMode = DesignerMode.Mobile;
+    
+    /** 控件清单 */
+    const dgControl: any = DgControl;
 
     /** 工具箱的数据 */
     const toolboxItems: any[] = ToolboxItems;
 
     /** 要注册的UI组件 */
-    const componentsToRegister: any[] = [
-        Component, PageContainer, PageHeaderContainer, PageBodyContainer, PageFooterContainer,
-        ContentContainer, Card, FloatContainer, Textarea, DatePicker, DateTimePicker, Lookup,
-        Navbar, ListView, Picker, NumberInput, Switch, CheckboxGroup, RadioGroup,
-        Form, FormItem, InputGroup,
-        Button, ButtonGroup,
-    ];
-    registerDesignerComponents(componentsToRegister);
+    const componentsToRegister: any[] = components;
+    registerDesignerComponents();
+    registerComponents();
 
     /** 支持的控制器 */
     const supportedControllers: any = SupportedControllers;
@@ -59,6 +52,7 @@ export function useMobileDesignerContext(): UseDesignerContext {
 
     return {
         designerMode,
+        dgControl,
         toolboxItems,
         componentsToRegister,
         supportedControllers,
diff --git a/packages/designer/src/components/composition/form-metadata.service.ts b/packages/designer/src/components/composition/form-metadata.service.ts
index ea1b1b9918fb3fbf93d9a0d5dca15304affab2d4..71cc98f135d79f5a7bd6259e2c980953b6d178fe 100644
--- a/packages/designer/src/components/composition/form-metadata.service.ts
+++ b/packages/designer/src/components/composition/form-metadata.service.ts
@@ -202,14 +202,7 @@ export function useFormMetadata(props: DesignerProps, useFormSchemaComposition:
         publishFormMetadata().then((publishInfo) => {
             if (publishInfo.result) {
                 loadingInstance.value.close();
-                let previewUrl;
-                if (designerContext.designerMode === DesignerMode.Mobile) {
-                    const component = useFormSchemaComposition.getComponents()[0];
-                    const uri = component?.route?.uri;
-                    previewUrl = `${window.location.origin}/platform/common/web/mobile-renderer/index.html#/${formCode}/${uri}?metadataPath=${metadataPath}&projectPath=${relativePath}&baseMetadataId=${metadataId}`;
-                } else {
-                    previewUrl = `${window.location.origin}/platform/common/web/renderer/index.html#/preview?metadataPath=${metadataPath}&projectPath=${relativePath}&baseMetadataId=${metadataId}`;
-                }
+                const previewUrl = `${window.location.origin}/platform/common/web/renderer/index.html#/preview?metadataPath=${metadataPath}&projectPath=${relativePath}&baseMetadataId=${metadataId}`;
                 const windowProxy = window.open(previewUrl);
                 if (!windowProxy) {
                     messageBoxService.error('运行失败，请调整浏览器安全设置后重试！');
diff --git a/packages/designer/src/components/composition/use-form-schema.ts b/packages/designer/src/components/composition/use-form-schema.ts
index 1a01e16f8f14092a58ebbf2b2063cbfe5d0e9af1..2814f97c669e5bc6912371097530cf5e33484e06 100644
--- a/packages/designer/src/components/composition/use-form-schema.ts
+++ b/packages/designer/src/components/composition/use-form-schema.ts
@@ -1280,6 +1280,28 @@ export function useFormSchema(): UseFormSchema {
 
         return false;
     }
+    /**
+     *  获取页面id
+     */
+    function getPageIdByComponentId(comonentId: string): string | undefined {
+        let currentComponent = getComponentById(comonentId);
+        while (currentComponent) {
+            if (currentComponent.componentType === 'page') {
+                return currentComponent.id;
+            }
+            const viewModel = getViewModelById(currentComponent.viewModel);
+            if (!viewModel || !viewModel.parent) {
+                break;
+            }
+            const parentViewModel = getViewModelById(viewModel.parent);
+            if(!parentViewModel){
+                break;
+            }
+            currentComponent = getComponentByViewModelId(parentViewModel.id);
+        }
+        return;
+    }
+
 
     return {
         getModule,
@@ -1327,6 +1349,7 @@ export function useFormSchema(): UseFormSchema {
         designerMode,
         removeCommunicationInComponent,
         getExternalComponents,
-        checkComponentExistInDrawer
+        checkComponentExistInDrawer,
+        getPageIdByComponentId
     };
 }
diff --git a/packages/designer/src/components/types/designer-context.ts b/packages/designer/src/components/types/designer-context.ts
index 4b8d19c5a3306d2983d2d9f71db6bac17a9f4e2d..0695060703bd8e357c84fc47a08023953535959e 100644
--- a/packages/designer/src/components/types/designer-context.ts
+++ b/packages/designer/src/components/types/designer-context.ts
@@ -1,6 +1,6 @@
 import { ElementPropertyConfig } from "@farris/ui-vue/components/property-panel";
 import { DesignerProps } from "../designer.props";
-import { FormComponent, UseControlCreator, UseFormMetadata, UseFormSchema, UseFormStateMachine, UseSchemaService } from "../types";
+import { FormComponent, UseControlCreator, UseFormMetadata, UseFormSchema, UseSchemaService } from "../types";
 import { UseCommandBuilderService } from "./command";
 
 /** 设计器模式 */
@@ -16,6 +16,7 @@ export enum DesignerMode {
 }
 
 export interface UseDesignerContext {
+    dgControl: any;
     instances?: Record<string, any>;
     designerMode: DesignerMode;
     toolboxItems: any[];
diff --git a/packages/designer/src/components/types/metadata.ts b/packages/designer/src/components/types/metadata.ts
index d1d2b3dc0f46849217a05829be46f67518abc48b..5d4467509cf70805f761d6e9f075a2c5aac1314a 100644
--- a/packages/designer/src/components/types/metadata.ts
+++ b/packages/designer/src/components/types/metadata.ts
@@ -254,6 +254,7 @@ export interface UseFormSchema {
     externalFormSchema: Map<string, ExternalFormMetadata>;
     getExternalComponents: () => any[];
     checkComponentExistInDrawer: (componentId: string) => boolean;
+    getPageIdByComponentId: (componentId: string) => string | undefined;
 }
 
 export interface UseSchemaService {
diff --git a/packages/designer/src/components/types/toolbox/mobile-toolbox.json b/packages/designer/src/components/types/toolbox/mobile-toolbox.json
index fdc942bfbc104417946f069a422db9c442decea6..a57dbd113a48ae8fe4d9ce303ab99713a111a65b 100644
--- a/packages/designer/src/components/types/toolbox/mobile-toolbox.json
+++ b/packages/designer/src/components/types/toolbox/mobile-toolbox.json
@@ -46,7 +46,7 @@
             },
             {
                 "id": "EnumField",
-                "type": "enum-field",
+                "type": "picker",
                 "name": "选择器",
                 "category": "input",
                 "icon": "input-group"
@@ -78,6 +78,12 @@
                 "name": "开关",
                 "category": "input",
                 "icon": "switch"
+            },
+            {
+                "id": "TimePicker",
+                "type": "time-picker",
+                "name": "时间选择",
+                "category": "input"
             }
         ]
     },
@@ -87,7 +93,7 @@
         "items": [
             {
                 "id": "NavigationBar",
-                "type": "navigation-bar",
+                "type": "navbar",
                 "name": "导航栏",
                 "category": "navigation",
                 "icon": "nav-tab"
@@ -143,14 +149,14 @@
         ]
     },
     {
-        "type": "display",
-        "name": "展示类控件",
+        "type": "dataCollection",
+        "name": "数据集合类控件",
         "items": [
             {
                 "id": "ListView",
                 "type": "list-view",
                 "name": "列表",
-                "category": "display",
+                "category": "dataCollection",
                 "icon": "list-view"
             }
         ]
diff --git a/packages/mobile-ui-vue/components/date-picker/src/composition/index.ts b/packages/mobile-ui-vue/components/date-picker/src/composition/index.ts
index 5cef12991855e35a5063cfe9ce7cea2462bf8c4e..6300c775998965a8d5181f89eaeb04e8296c5fdf 100644
--- a/packages/mobile-ui-vue/components/date-picker/src/composition/index.ts
+++ b/packages/mobile-ui-vue/components/date-picker/src/composition/index.ts
@@ -1,2 +1,3 @@
 export * from './type';
 export * from './use-date-columns';
+export * from './use-date-value';
diff --git a/packages/mobile-ui-vue/components/date-picker/src/composition/type.ts b/packages/mobile-ui-vue/components/date-picker/src/composition/type.ts
index 165d19c1c82d8c79441659e97d7f641489fe9ca4..be0cadffee82ad0a4b9b4e77822a9a2c31b4e197 100644
--- a/packages/mobile-ui-vue/components/date-picker/src/composition/type.ts
+++ b/packages/mobile-ui-vue/components/date-picker/src/composition/type.ts
@@ -1,3 +1,6 @@
+import { PickerChange } from "@farris/mobile-ui-vue/picker";
+import { Ref } from "vue";
+
 export enum DatePickerType {
   Year = 'year',
   YearMonth = 'year-month',
@@ -22,4 +25,18 @@ export type DateRecord = {
   day: number;
 };
 
+export interface UseDateValue {
+    textField : string;
+    valueField : string,
+    beginDate : Ref<DateRecord>,
+    endDate : Ref<DateRecord>,
+    realValue : Ref<number[] | null>,
+    selectedValue : Ref<number[] | null>,
+    getSelectedValue : (changes?: PickerChange) => string | Date | null;
+    getRealValue : () => string | Date | null;
+    getTextValue : () => string | Date | null;
+    resetSelectedValue : () => void;
+}
+
+
 export type ColumnsMap = ('year' | 'month' | 'day')[];
diff --git a/packages/mobile-ui-vue/components/date-picker/src/composition/use-date-columns.ts b/packages/mobile-ui-vue/components/date-picker/src/composition/use-date-columns.ts
index be87d29f85dcc2f7abd6794bbd18b98aa650e74d..317d858aba6bc83ae1e8660a74934b3625d240e2 100644
--- a/packages/mobile-ui-vue/components/date-picker/src/composition/use-date-columns.ts
+++ b/packages/mobile-ui-vue/components/date-picker/src/composition/use-date-columns.ts
@@ -1,20 +1,14 @@
-import { computed, watch, ref } from 'vue';
-import { Column, Columns, PickerChange } from '@farris/mobile-ui-vue/picker';
+import { computed } from 'vue';
+import { Column, Columns } from '@farris/mobile-ui-vue/picker';
 import {
-  compareDate,
-  formatDate,
   getDateRecord,
-  isDate,
   isLeap,
-  isString,
-  parseDate
 } from '@farris/mobile-ui-vue/common';
 import { DatePickerPanelProps } from '../date-picker-panel.props';
-import { ColumnsMap, DateColumn, DatePickerType, DateRecord, ModelValueType } from './type';
+import { ColumnsMap, DateColumn, DatePickerType, UseDateValue } from './type';
 
-export const useDateColumns = (props: DatePickerPanelProps) => {
-  const textField = 'text';
-  const valueField = 'value';
+export const useDateColumns = (props: DatePickerPanelProps, dateValueComposition: UseDateValue) => {
+  const { textField, valueField, beginDate, endDate, selectedValue } = dateValueComposition;
 
   const getColumn = (begin: number, end: number, type: string) => {
     const column: Column = [];
@@ -31,58 +25,6 @@ export const useDateColumns = (props: DatePickerPanelProps) => {
     return column;
   };
 
-  const NowDate = new Date();
-
-  const beginDate = ref<DateRecord>({ year: 0, month: 0, day: 0 });
-  const setBeginDate = () => {
-    if (props.minDate) {
-      beginDate.value = getDateRecord(props.minDate);
-      return;
-    }
-    const { year, month, day } = getDateRecord(NowDate);
-    beginDate.value = { year: year - 10, month, day };
-  };
-
-  watch(() => props.minDate, setBeginDate, { immediate: true });
-
-  const endDate = ref<DateRecord>({ year: 0, month: 0, day: 0 });
-  const setEndDate = () => {
-    if (props.maxDate) {
-      endDate.value = getDateRecord(props.maxDate);
-      return;
-    }
-    const { year, month, day } = getDateRecord(NowDate);
-    endDate.value = { year: year + 10, month, day };
-  };
-
-  watch(() => props.maxDate, setEndDate, { immediate: true });
-
-  const innerValue = ref<number[]>([]);
-
-  const formatValue = (value: string | Date) => {
-    let currentDate = new Date();
-    if (isString(value) && value) {
-      currentDate = parseDate(value, props.format);
-    } else if (isDate(value)) {
-      currentDate = value;
-    }
-    if (props.minDate && compareDate(currentDate, props.minDate) < 0) {
-      currentDate = props.minDate;
-    }
-    if (props.maxDate && compareDate(currentDate, props.maxDate) > 0) {
-      currentDate = props.maxDate;
-    }
-    const { year, month, day } = getDateRecord(currentDate);
-    innerValue.value = [year, month, day];
-  };
-
-  watch(() => props.modelValue, formatValue, { immediate: true });
-
-  const getCurrentDate = () => {
-    const [year, month, day] = innerValue.value;
-    return { year, month, day };
-  };
-
   const getYearColumn = () => {
     const beginYear = beginDate.value.year;
     const endYear = endDate.value.year;
@@ -136,6 +78,15 @@ export const useDateColumns = (props: DatePickerPanelProps) => {
     return type.split('-') as ColumnsMap;
   });
 
+  const getCurrentDate = () => {
+    if (!selectedValue.value) {
+      const { year, month, day } = getDateRecord(new Date());
+      selectedValue.value = [year, month, day];
+    }
+    const [year, month, day] = selectedValue.value;
+    return { year, month, day };
+  };
+
   const dateColumns = computed<Columns>(() => {
     const current = getCurrentDate();
 
@@ -157,49 +108,8 @@ export const useDateColumns = (props: DatePickerPanelProps) => {
     });
   });
 
-  const modelValueType = computed(()=>{
-    if(props.modelValueType) {
-      return props.modelValueType;
-    }
-    if(props.type === DatePickerType.Date || props.type === DatePickerType.YearMonthDay) {
-      return ModelValueType.Date;
-    } else {
-      return ModelValueType.String;
-    }
-  });
-
-  const getDateValue = (changes?: PickerChange) => {
-    const dates = [...innerValue.value];
-    if (changes) {
-      const { index, value } = changes;
-      dates[index] = value[valueField] as number;
-    }
-    const [year, month = 1, day = 1] = dates;
-
-    const result = new Date(year, month - 1, day);
-
-    if (modelValueType.value === ModelValueType.Date) {
-      return result;
-    } else {
-      return formatDate(result, props.format);
-    }
-  };
-
-  const getTextValue = () => {
-    const value = getDateValue();
-    if (isDate(value)) {
-      return formatDate(value, props.format);
-    }
-    return value;
-  };
-
   return {
-    textField,
-    valueField,
     columnsMap,
-    dateColumns,
-    innerValue,
-    getDateValue,
-    getTextValue
+    dateColumns
   };
 };
diff --git a/packages/mobile-ui-vue/components/date-picker/src/composition/use-date-value.ts b/packages/mobile-ui-vue/components/date-picker/src/composition/use-date-value.ts
new file mode 100644
index 0000000000000000000000000000000000000000..de5ef2b573b2ce6e4e110a190ace01d0c0983faf
--- /dev/null
+++ b/packages/mobile-ui-vue/components/date-picker/src/composition/use-date-value.ts
@@ -0,0 +1,156 @@
+import { computed, watch, ref } from 'vue';
+import { PickerChange } from '@farris/mobile-ui-vue/picker';
+import {
+  compareDate,
+  formatDate,
+  getDateRecord,
+  isDate,
+  isString,
+  parseDate
+} from '@farris/mobile-ui-vue/common';
+import { DatePickerPanelProps } from '../date-picker-panel.props';
+import { DatePickerType, DateRecord, ModelValueType, UseDateValue } from './type';
+
+export const useDateValue = (props: DatePickerPanelProps): UseDateValue => {
+  const textField = 'text';
+  const valueField = 'value';
+  // 真实值
+  const realValue = ref<number[] | null>([]);
+  // 当前选中的值
+  const selectedValue = ref<number[] | null>([]);
+
+  /**
+   * 开始日期
+   */
+  const beginDate = ref<DateRecord>({ year: 0, month: 0, day: 0 });
+  const setBeginDate = () => {
+    if (props.minDate) {
+      beginDate.value = getDateRecord(props.minDate);
+      return;
+    }
+    const { year, month, day } = getDateRecord(new Date());
+    beginDate.value = { year: year - 10, month, day };
+  };
+
+  watch(() => props.minDate, setBeginDate, { immediate: true });
+
+  /**
+   * 结束日期
+   */
+  const endDate = ref<DateRecord>({ year: 0, month: 0, day: 0 });
+  const setEndDate = () => {
+    if (props.maxDate) {
+      endDate.value = getDateRecord(props.maxDate);
+      return;
+    }
+    const { year, month, day } = getDateRecord(new Date());
+    endDate.value = { year: year + 10, month, day };
+  };
+
+  watch(() => props.maxDate, setEndDate, { immediate: true });
+
+
+  /**
+   * 格式化选中值
+   * @param value 
+   */
+  const formatSelectedValue = (value: string | Date | null) => {
+    let currentDate = new Date();
+    if (isString(value) && value) {
+      currentDate = parseDate(value, props.format);
+    } else if (isDate(value)) {
+      currentDate = value;
+    }
+    if (props.minDate && compareDate(currentDate, props.minDate) < 0) {
+      currentDate = props.minDate;
+    }
+    if (props.maxDate && compareDate(currentDate, props.maxDate) > 0) {
+      currentDate = props.maxDate;
+    }
+    const { year, month, day } = getDateRecord(currentDate);
+    selectedValue.value = [year, month, day];
+  };
+
+  watch(() => props.modelValue, (newValue: string | Date | null) => {
+    formatSelectedValue(newValue);
+    if (props.modelValue && selectedValue.value) {
+      realValue.value = [...selectedValue.value];
+    } else {
+      realValue.value = newValue as null;
+    }
+  }, { immediate: true });
+
+
+  const modelValueType = computed(() => {
+    if (props.modelValueType) {
+      return props.modelValueType;
+    }
+    if (props.type === DatePickerType.Date || props.type === DatePickerType.YearMonthDay) {
+      return ModelValueType.Date;
+    } else {
+      return ModelValueType.String;
+    }
+  });
+
+  const getDateValue = (value: number[] | null, changes?: PickerChange) => {
+    if (!value) {
+      return value;
+    }
+
+    const dates = [...value];
+
+    if (changes) {
+      const { index, value } = changes;
+      dates[index] = value[valueField] as number;
+    }
+    const [year, month = 1, day = 1] = dates;
+
+    const result = new Date(year, month - 1, day);
+
+    if (modelValueType.value === ModelValueType.Date) {
+      return result;
+    } else {
+      return formatDate(result, props.format);
+    }
+  };
+  
+  const getSelectedValue = (changes?: PickerChange) => {
+    return getDateValue(selectedValue.value, changes);
+  };
+
+  const getRealValue = () => {
+    return getDateValue(realValue.value);
+  };
+
+  /**
+   * 获取输入框显示文本，要用真实值
+   */
+  const getTextValue = () => {
+    const value = getRealValue();
+    if (isDate(value)) {
+      return formatDate(value, props.format);
+    }
+    return value;
+  };
+  const resetSelectedValue = () => {
+    if (realValue.value) {
+      selectedValue.value = [...realValue.value];
+    } else {
+      const { year, month, day } = getDateRecord(new Date());
+      selectedValue.value = [year, month, day];
+    }
+  };
+
+  return {
+    textField,
+    valueField,
+    beginDate,
+    endDate,
+    realValue,
+    selectedValue,
+    getSelectedValue,
+    getRealValue,
+    getTextValue,
+    resetSelectedValue
+  };
+};
diff --git a/packages/mobile-ui-vue/components/date-picker/src/date-picker-panel.component.tsx b/packages/mobile-ui-vue/components/date-picker/src/date-picker-panel.component.tsx
index 590679e78c00ce55ae07f6b7366ad23343a95859..380b186e636a308a69b339ec23c7e4a3f73dab8d 100644
--- a/packages/mobile-ui-vue/components/date-picker/src/date-picker-panel.component.tsx
+++ b/packages/mobile-ui-vue/components/date-picker/src/date-picker-panel.component.tsx
@@ -1,8 +1,9 @@
 import { defineComponent, SetupContext } from 'vue';
 import { PickerPanel, PickerChange } from '@farris/mobile-ui-vue/picker';
 import { useBem } from '@farris/mobile-ui-vue/common';
-import { useDateColumns } from './composition';
+import { useDateColumns, useDateValue } from './composition';
 import { datePickerPanelProps, DATE_PICKER_PANEL_NAME } from './date-picker-panel.props';
+import { nextTick } from 'process';
 
 export default defineComponent({
   name: DATE_PICKER_PANEL_NAME,
@@ -12,28 +13,40 @@ export default defineComponent({
   setup(props, context: SetupContext<("change" | "confirm" | "cancel")[]>) {
     const { emit, expose } = context;
 
-    const { dateColumns, innerValue, textField, valueField, getDateValue, getTextValue } = useDateColumns(props);
+    const dateValueComposition = useDateValue(props);
+    const { realValue, selectedValue, textField, valueField, getSelectedValue, getRealValue, getTextValue, resetSelectedValue } = dateValueComposition;
+    const { dateColumns } = useDateColumns(props, dateValueComposition);
 
-    expose({ getTextValue });
-
-    const handleChange = (changes: PickerChange)=>{
-      emit('change', getDateValue(changes));
+    const handleChange = (changes: PickerChange) => {
+      nextTick(() => {
+        const value = getSelectedValue(changes);
+        emit('change', value);
+      });
     };
 
-    const handleConfirm = ()=>{
-      emit('confirm', getDateValue());
+    const handleConfirm = () => {
+      nextTick(() => {
+        realValue.value = selectedValue.value;
+        const value = getRealValue();
+        emit('confirm', value);
+      });
     };
 
-    const handleCanCel = ()=>{
-      emit('cancel');
+    const handleCancel = () => {
+      nextTick(() => {
+        resetSelectedValue();
+        emit('cancel');
+      });
     };
 
+    expose({ getTextValue,resetSelectedValue });
+
     const { bem } = useBem(DATE_PICKER_PANEL_NAME);
 
     return () => (
       <PickerPanel
         class={bem()}
-        v-model={innerValue.value}
+        v-model={selectedValue.value}
         columns={dateColumns.value}
         valueField={valueField}
         textField={textField}
@@ -42,7 +55,7 @@ export default defineComponent({
         visiableOptionCount={props.visiableOptionCount}
         onChange={handleChange}
         onConfirm={handleConfirm}
-        onCancel={handleCanCel}
+        onCancel={handleCancel}
       ></PickerPanel>
     );
   }
diff --git a/packages/mobile-ui-vue/components/date-picker/src/date-picker.component.tsx b/packages/mobile-ui-vue/components/date-picker/src/date-picker.component.tsx
index 6f21b9e008a07258ecf3de9db49080afba2d6c06..823967aaad7acc01f9c4154f687a42a0d9fc11fa 100644
--- a/packages/mobile-ui-vue/components/date-picker/src/date-picker.component.tsx
+++ b/packages/mobile-ui-vue/components/date-picker/src/date-picker.component.tsx
@@ -1,4 +1,4 @@
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, watch } from 'vue';
 import { useBem } from '@farris/mobile-ui-vue/common';
 import { ButtonEdit } from '@farris/mobile-ui-vue/button-edit';
 import { usePickerState } from '@farris/mobile-ui-vue/picker';
@@ -32,6 +32,12 @@ export default defineComponent({
       };
     });
 
+    watch(() => showPopup.value, (newShowPopup) => {
+      if(!newShowPopup){
+        componentRef.value.resetSelectedValue();
+      }
+    })
+    
     return () => (
       <ButtonEdit
         {...buttonEditProps.value}
diff --git a/packages/mobile-ui-vue/components/date-picker/src/schema/date-picker.schema.json b/packages/mobile-ui-vue/components/date-picker/src/schema/date-picker.schema.json
index 7309b42382cfd6ed4e47c65a768e8d0d9ba6df00..738d5ae2f5664d8036a7862bed0eeba784617768 100644
--- a/packages/mobile-ui-vue/components/date-picker/src/schema/date-picker.schema.json
+++ b/packages/mobile-ui-vue/components/date-picker/src/schema/date-picker.schema.json
@@ -73,13 +73,8 @@
     "minDate": {
       "description": "最小日期",
       "type": "string"
-    },
-    "onUpdate:modelValue": {
-      "description": "值更新事件",
-      "type": "string"
     }
   },
-  "events": ["onUpdate:modelValue"],
   "required": ["type"],
   "ignore": ["id", "appearance"]
 }
diff --git a/packages/mobile-ui-vue/components/date-picker/src/schema/schema-mapper.ts b/packages/mobile-ui-vue/components/date-picker/src/schema/schema-mapper.ts
index d9199a0a93e5af8487bfcacc73cf4a30f6478afd..14508d8ee94126b34b43b3c8dfc2e9f040a08faf 100644
--- a/packages/mobile-ui-vue/components/date-picker/src/schema/schema-mapper.ts
+++ b/packages/mobile-ui-vue/components/date-picker/src/schema/schema-mapper.ts
@@ -2,7 +2,6 @@ import { MapperFunction, resolveAppearance } from '@farris/mobile-ui-vue/dynamic
 
 export const schemaMapper = new Map<string, string | MapperFunction>([
     ['appearance', resolveAppearance],
-    ['binding', 'modelValue'],
     ['displayType','type'],
     ['displayFormat','format'],
 ]);
diff --git a/packages/mobile-ui-vue/components/dynamic-form/src/composition/use-response-form-layout-setting.ts b/packages/mobile-ui-vue/components/dynamic-form/src/composition/use-response-form-layout-setting.ts
deleted file mode 100644
index 2cf2bb772a8014ddfdfc882b618daa5e6fb54f9e..0000000000000000000000000000000000000000
--- a/packages/mobile-ui-vue/components/dynamic-form/src/composition/use-response-form-layout-setting.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import { ResponseFormLayoutContext } from "@farris/mobile-ui-vue/response-layout-editor";
-import { FormUnifiedColumnLayout, UseResponseFormLayoutSetting } from "../types";
-import { DgControl } from "@farris/mobile-ui-vue/designer-canvas";
-import { useResponseLayoutEditorSetting } from
-    "../../../response-layout-editor/src/composition/converter/use-response-layout-editor-setting";
-
-export function useResponseFormLayoutSetting(formShemaService, componentId: string): UseResponseFormLayoutSetting {
-    function getFormNode(formSchemaId, formNode = null): any {
-        if (formNode) { return formNode; }
-        const componentNode = formShemaService.getComponentById(componentId);
-        return formShemaService.selectNode(componentNode, item => item.id === formSchemaId);
-    }
-    function checkIsInFormComponent(componentId: string): boolean {
-        const componentNode = formShemaService.getComponentById(componentId);
-        if (!componentNode || !componentNode.componentType || !componentNode.componentType.startsWith('form')) {
-            return false;
-        }
-        return true;
-
-    }
-    /**
-     * 组装每种屏幕下的宽度样式值，例如col-md-6，则uniqueColClassInMD为6
-     */
-    function assembleUnifiedLayoutContext(propertyData: any): FormUnifiedColumnLayout {
-
-        const formNode = getFormNode(propertyData.id);
-        const responseLayoutService = useResponseLayoutEditorSetting(formShemaService);
-        const responseLayoutConfig: ResponseFormLayoutContext[] = [];
-        responseLayoutService.getResonseFormLayoutConfig(formNode, responseLayoutConfig, 1);
-
-
-        // 收集每种屏幕下的列数
-        const columnInSMArray = responseLayoutConfig.map(config => config.columnInSM);
-        const columnInMDArray = responseLayoutConfig.map(config => config.columnInMD);
-        const columnInLGArray = responseLayoutConfig.map(config => config.columnInLG);
-        const columnInELArray = responseLayoutConfig.map(config => config.columnInEL);
-
-        /**
-         * 校验宽度样式值是否一致
-         */
-        function checkIsUniqueColumn(columnsInScreen: number[]) {
-            const keySet = new Set(columnsInScreen);
-            const exclusiveKeys = Array.from(keySet);
-
-            if (exclusiveKeys.length === 1) {
-                return true;
-            }
-            return false;
-        }
-
-        // 只有每个控件的宽度都一样时，才认为form上有统一宽度，否则认为是自定义的控件宽度，此处传递null
-        const uniqueColClassInSM = checkIsUniqueColumn(columnInSMArray) ? columnInSMArray[0] : 0;
-        const uniqueColClassInMD = checkIsUniqueColumn(columnInMDArray) ? columnInMDArray[0] : 0;
-        const uniqueColClassInLG = checkIsUniqueColumn(columnInLGArray) ? columnInLGArray[0] : 0;
-        const uniqueColClassInEL = checkIsUniqueColumn(columnInELArray) ? columnInELArray[0] : 0;
-
-        return {
-            uniqueColClassInSM,
-            uniqueColClassInMD,
-            uniqueColClassInLG,
-            uniqueColClassInEL
-        };
-    }
-
-    /**
-     * 校验宽度样式值是否一致
-     */
-    function checkIsUniqueColumn(columnsInScreen: number[]) {
-        const keySet = new Set(columnsInScreen);
-        const exclusiveKeys = Array.from(keySet);
-
-        if (exclusiveKeys.length === 1) {
-            return true;
-        }
-        return false;
-    }
-
-    /**
-     * 根据统一配置值，修改某一个控件的class样式
-     */
-    function changeControlClassInByColumn(controlClass: string, unifiedLayout: FormUnifiedColumnLayout) {
-        let originColClass;
-        let originColMDClass;
-        let originColXLClass;
-        let originColELClass;
-        let otherClassItems = [] as any;
-        if (controlClass) {
-            const controlClassArray = controlClass.split(' ');
-            const colClassItems = controlClassArray.filter(classItem => classItem.startsWith('col-'));
-            originColClass = colClassItems.find(item => /^col-([1-9]|10|11|12)$/.test(item));
-            originColMDClass = colClassItems.find(item => /^col-md-([1-9]|10|11|12)$/.test(item));
-            originColXLClass = colClassItems.find(item => /^col-xl-([1-9]|10|11|12)$/.test(item));
-            originColELClass = colClassItems.find(item => /^col-el-([1-9]|10|11|12)$/.test(item));
-            otherClassItems = controlClassArray.filter(classItem => !classItem.startsWith('col-'));
-        }
-        const colClass = unifiedLayout.uniqueColClassInSM ? 'col-' + unifiedLayout.uniqueColClassInSM : originColClass;
-        const colMDClass = unifiedLayout.uniqueColClassInMD ? 'col-md-' + unifiedLayout.uniqueColClassInMD : originColMDClass;
-        const colXLClass = unifiedLayout.uniqueColClassInLG ? 'col-xl-' + unifiedLayout.uniqueColClassInLG : originColXLClass;
-        const colELClass = unifiedLayout.uniqueColClassInEL ? 'col-el-' + unifiedLayout.uniqueColClassInEL : originColELClass;
-
-        const newClassItems = [colClass, colMDClass, colXLClass, colELClass].concat(otherClassItems);
-
-        return newClassItems.join(' ');
-    }
-
-    /**
-     * 根据统一配置值，修改卡片区域内所有控件的class样式
-     * @param formNode dom节点
-     * @param unifiedLayout 统一配置值
-     */
-    function changeFormControlsByUnifiedLayoutConfig(formNode: any, unifiedLayout: FormUnifiedColumnLayout, formSchemaId) {
-        formNode = getFormNode(formSchemaId, formNode);
-        formNode.contents.forEach(control => {
-            if (control.type === DgControl['fieldset'].type) {
-                changeFormControlsByUnifiedLayoutConfig(control, unifiedLayout, control.id);
-                return;
-            }
-            if (!control.appearance) {
-                control.appearance = {};
-            }
-            const controlClass = control.appearance.class;
-            control.appearance.class = changeControlClassInByColumn(controlClass, unifiedLayout);
-
-        });
-    }
-
-    return { checkIsInFormComponent, assembleUnifiedLayoutContext, changeFormControlsByUnifiedLayoutConfig };
-}
diff --git a/packages/mobile-ui-vue/components/dynamic-form/src/types.ts b/packages/mobile-ui-vue/components/dynamic-form/src/types.ts
deleted file mode 100644
index a155d102cd118d48a5c7e85aad709b4ac9c2b082..0000000000000000000000000000000000000000
--- a/packages/mobile-ui-vue/components/dynamic-form/src/types.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export type EditorType = 'button-edit' | 'check-box' | 'check-group' | 'combo-list' | 'combo-lookup' | 'combo-tree' |
-    'date-picker' | 'date-range' | 'datetime-picker' | 'datetime-range' | 'events-editor' | 'month-picker' | 'month-range' |
-    'year-picker' | 'year-range' | 'input-group' | 'lookup' | 'number-range' | 'number-spinner' | 'radio-group' | 'text' |
-    'response-layout-editor-setting' | 'switch' | 'grid-field-editor' | 'field-selector' | 'schema-selector' | 'mapping-editor' |
-    'textarea' | 'response-form-layout-setting'|'binding-selector' | 'query-solution-config' | 'solution-preset' | 'item-collection-editor';
-
-export interface EditorConfig {
-    /** 编辑器类型 */
-    type: EditorType;
-    /** 自定义样式 */
-    customClass?: string;
-    /** 禁用 */
-    disabled?: boolean;
-    /** 只读 */
-    readonly?: boolean;
-    /** 必填 */
-    required?: boolean;
-    /** 提示文本 */
-    placeholder?: string;
-    /** 其他属性 */
-    [key: string]: any;
-}
-export interface FormUnifiedColumnLayout {
-    uniqueColClassInSM: number;
-    uniqueColClassInMD: number;
-    uniqueColClassInLG: number;
-    uniqueColClassInEL: number;
-}
diff --git a/packages/mobile-ui-vue/components/dynamic-view/src/dynamic-view.component.tsx b/packages/mobile-ui-vue/components/dynamic-view/src/dynamic-view.component.tsx
index c4dcbf79e2a982d96f16800bb57f32f1098a7262..7fd3582897c6fb28b761eaa5f1f1bd95efae371d 100644
--- a/packages/mobile-ui-vue/components/dynamic-view/src/dynamic-view.component.tsx
+++ b/packages/mobile-ui-vue/components/dynamic-view/src/dynamic-view.component.tsx
@@ -91,7 +91,7 @@ const FDynamicView = defineComponent({
             const eventDispatcher = createEventDispatcher(setupContext, viewSchema);
             const Component = componentMap[componentKey];
             const eventResolver = createEventsResolver();
-            
+
             const resolver = resolverMap[componentKey];
             const editorResolver: EditorResolver = resolver ? resolver.editorResolver : null;
             if (editorResolver) {
@@ -197,7 +197,7 @@ const FDynamicView = defineComponent({
             const props = state.get(viewSchema.id)?.props || {};
             if (viewSchema.contents && viewSchema.contents.length > 0) {
                 return createNode(Component, props, [renderChildren()]);
-            }else if (viewSchema.slots) {
+            } else if (viewSchema.slots) {
                 return createNode(Component, props, [...Object.values(renderSlots(viewSchema.slots))]);
             } else {
                 return createNode(Component, props);
@@ -291,7 +291,7 @@ const FDynamicView = defineComponent({
             const editorResolver: EditorResolver = resolver ? resolver.editorResolver : null;
             if (editorResolver) {
                 const editor = editorResolver.resolve(viewSchema);
-                Object.assign(editor, eventProps, callbackProps, { modelValue:props.modelValue });   
+                Object.assign(editor, eventProps, callbackProps, { modelValue: props.modelValue });
 
             } else {
                 Object.assign(props, eventProps, callbackProps);
@@ -398,15 +398,20 @@ const FDynamicView = defineComponent({
             }
             convertModelValueToProps(viewSchema);
         });
-
-        watch(() => props.schema, (newSchema) => {
-            schema.value = newSchema;
-            const viewSchema = getFrameComponentSchema();
-            if (!viewSchema) {
-                return;
+        function resolveInitialSchema(newSchema: any) {
+            if (newSchema) {
+                schema.value = newSchema;
+                const viewSchema = getFrameComponentSchema();
+                if (!viewSchema) {
+                    return;
+                }
+                convertSchemaToProps(viewSchema);
             }
-            convertSchemaToProps(viewSchema);
+        }
+        watch(() => props.schema, (newSchema) => {
+            resolveInitialSchema(newSchema);
         });
+        resolveInitialSchema(props.schema);
 
         setupContext.expose({ componentManager, rerender, getProps, invoke, setProps, selectItemById, getSchema, setSchema, convertPartialSchemaToProps, getControlValue });
 
diff --git a/packages/mobile-ui-vue/components/filter/src/compositions/type.ts b/packages/mobile-ui-vue/components/filter/src/compositions/type.ts
index bbd65ecb51e76781babcad500c1f3539bf1f8839..79208d18efa8293d4a0e8e67d53cd659ec3ed743 100644
--- a/packages/mobile-ui-vue/components/filter/src/compositions/type.ts
+++ b/packages/mobile-ui-vue/components/filter/src/compositions/type.ts
@@ -4,7 +4,6 @@ export enum ControlType {
   InputGroup = 'input-group',
   DatePicker = 'date-picker',
   DatePickerRange = 'date-picker-range',
-  DateTimePicker = 'datetime-picker',
   Number = 'number',
   NumberRange = 'number-range',
   List = 'combo-list',
diff --git a/packages/mobile-ui-vue/components/input-group/src/input-group.component.tsx b/packages/mobile-ui-vue/components/input-group/src/input-group.component.tsx
index 5b4cd229ec435b93a0a49a9095f0bd542cfcd3a4..b52adb8f199dca568c26316ed7dc42906603d89e 100644
--- a/packages/mobile-ui-vue/components/input-group/src/input-group.component.tsx
+++ b/packages/mobile-ui-vue/components/input-group/src/input-group.component.tsx
@@ -130,7 +130,7 @@ export default defineComponent({
     });
 
     return () => (
-      <div class={inputClass.value}>
+      <div id={props.id} class={inputClass.value}>
         <div class={bodyClass.value}>
           {renderLeft()}
           { slots.input ? slots.input() : renderControl()}
diff --git a/packages/mobile-ui-vue/components/input-group/src/input-group.props.ts b/packages/mobile-ui-vue/components/input-group/src/input-group.props.ts
index 6db6873bb24969641bd4dfb24d6e67886a6d1a89..6a5376bc0d865bf797e4698c5065404df2ac8b01 100644
--- a/packages/mobile-ui-vue/components/input-group/src/input-group.props.ts
+++ b/packages/mobile-ui-vue/components/input-group/src/input-group.props.ts
@@ -8,6 +8,8 @@ import { schemaResolver } from './schema/schema-resolver';
 export const INPUT_NAME = 'fm-input-group';
 
 export const inputCommonProps = {
+  id: { type: String, default: '' },
+
   modelValue: { type: [String, Number], default: '' },
 
   name: { type: String, default: '' },
diff --git a/packages/mobile-ui-vue/components/picker/src/composition/use-picker-state.ts b/packages/mobile-ui-vue/components/picker/src/composition/use-picker-state.ts
index 543147b256f783c043e5366408145cc6cbfc8df1..1433a8034a3601fbbdc54ed68d880e335b80ef80 100644
--- a/packages/mobile-ui-vue/components/picker/src/composition/use-picker-state.ts
+++ b/packages/mobile-ui-vue/components/picker/src/composition/use-picker-state.ts
@@ -28,8 +28,9 @@ export const usePickerState = <T>(
 
   const handleConfirm = (value: any[]) => {
     showPopup.value = false;
-    updateInputValue();
-    const modelValue = value.join(props.separator);
+
+    const modelValue = value && Array.isArray(value) ? value.join(props.separator) : value;
+
     emit('confirm', value, modelValue);
     emit('update:modelValue', modelValue);
   };
diff --git a/packages/mobile-ui-vue/components/time-picker/src/composition/type.ts b/packages/mobile-ui-vue/components/time-picker/src/composition/type.ts
index 9cd9a523dfc6e4dfc8ee30093b606d32c064d00d..6895eea336a21d6d1dbef4a64f99c03c1da27263 100644
--- a/packages/mobile-ui-vue/components/time-picker/src/composition/type.ts
+++ b/packages/mobile-ui-vue/components/time-picker/src/composition/type.ts
@@ -1,3 +1,5 @@
+import { PickerChange } from "@farris/mobile-ui-vue/picker";
+import { Ref } from "vue";
 
 export enum TimePickerType {
   Hours = 'hours',
@@ -11,3 +13,16 @@ export enum TimeColumn {
   Minutes = 'minutes',
   Seconds= 'seconds',
 };
+
+export interface UseTimeValue {
+    textField : string;
+    valueField : string,
+    beginTime : Ref<{hours: number, minutes: number, seconds: number}>,
+    endTime : Ref<{hours: number, minutes: number, seconds: number}>,
+    realValue : Ref<number[] | null>,
+    selectedValue : Ref<number[] | null>,
+    getSelectedValue : (changes?: PickerChange<number>) => string | Date | null;
+    getRealValue : () => string | Date | null;
+    resetSelectedValue : () => void;
+}
+
diff --git a/packages/mobile-ui-vue/components/time-picker/src/composition/use-time-columns.ts b/packages/mobile-ui-vue/components/time-picker/src/composition/use-time-columns.ts
index 088c793bc2fc394df20063d06ea0902426d19e00..dc5f9fb336fca19248caff9d1c363c3fc19d7a7d 100644
--- a/packages/mobile-ui-vue/components/time-picker/src/composition/use-time-columns.ts
+++ b/packages/mobile-ui-vue/components/time-picker/src/composition/use-time-columns.ts
@@ -1,13 +1,14 @@
-import { computed, watch, ref } from 'vue';
-import { Columns, Column, PickerChange } from '@farris/mobile-ui-vue/picker';
-import { formatTime, getTimeRecord, } from "@farris/mobile-ui-vue/common";
+import { computed } from 'vue';
+import { Columns, Column } from '@farris/mobile-ui-vue/picker';
 import { TimePickerPanelProps } from "../time-picker-panel.props";
-import { TimeColumn, TimePickerType } from './type';
+import { TimeColumn, UseTimeValue } from './type';
+import { getDateRecord } from '@farris/mobile-ui-vue/common';
 
 
-export const useTimeColumns = (props: TimePickerPanelProps) => {
+export const useTimeColumns = (props: TimePickerPanelProps, timeValueComposition: UseTimeValue) => {
   const textField = 'text';
   const valueField = 'value';
+  const { beginTime, endTime, selectedValue } = timeValueComposition;
 
   const getColumn = (begin: number, end: number, type: string) => {
     const column: Column = [];
@@ -24,41 +25,17 @@ export const useTimeColumns = (props: TimePickerPanelProps) => {
     return column;
   };
 
-  const innerValue = ref<number[]>([]);
-
-  const formatValue = (value: string)=>{
-    const { hours, minutes, seconds } = getTimeRecord(value);
-    innerValue.value = [hours, minutes, seconds];
-  };
-
-  formatValue(props.modelValue);
-  watch(()=> props.modelValue, formatValue);
-
-  const getCurrentTime = ()=>{
-    const [hours, minutes, seconds] = innerValue.value;
-    return {hours, minutes, seconds};
-  };
-
-  const beginTime = ref({hours: 0, minutes: 0, seconds: 0});
-
-  const setBeginTime = ()=>{
-    if(props.minTime) {
-      beginTime.value = getTimeRecord(props.minTime);;
+  const getCurrentTime = () => {
+    if (!selectedValue.value) {
+      const { hours, minutes, seconds } = getDateRecord(new Date());
+      selectedValue.value = [hours, minutes, seconds];
+      return { hours, minutes, seconds };
     }
-  };
-
-  watch(()=> props.minTime, setBeginTime, { immediate: true});
 
-  const endTime = ref({hours: 23, minutes: 59, seconds: 59});
-
-  const setEndTime = ()=>{
-    if(props.maxTime) {
-      endTime.value = getTimeRecord(props.maxTime);
-    }
+    const [hours, minutes, seconds] = selectedValue.value;
+    return { hours, minutes, seconds };
   };
 
-  watch(()=> props.maxTime, setEndTime, { immediate: true});
-
   const getHoursColumn = () => {
     const beginHours = beginTime.value.hours;
     const endHours = endTime.value.hours;
@@ -72,10 +49,10 @@ export const useTimeColumns = (props: TimePickerPanelProps) => {
 
     const minutesRecord = { begin: 0, end: 59 };
 
-    if(hours <= _beginTime.hours) {
+    if (hours <= _beginTime.hours) {
       minutesRecord.begin = _beginTime.minutes;
     }
-    if(hours >= _endTime.hours) {
+    if (hours >= _endTime.hours) {
       minutesRecord.end = _endTime.minutes;
     }
 
@@ -88,10 +65,10 @@ export const useTimeColumns = (props: TimePickerPanelProps) => {
 
     const secondsRecord = { begin: 0, end: 59 };
 
-    if(hours <= _beginTime.hours && minutes <= _beginTime.minutes) {
+    if (hours <= _beginTime.hours && minutes <= _beginTime.minutes) {
       secondsRecord.begin = _beginTime.seconds;
     }
-    if(hours >= _endTime.hours && minutes >= _endTime.minutes) {
+    if (hours >= _endTime.hours && minutes >= _endTime.minutes) {
       secondsRecord.end = _endTime.seconds;
     }
 
@@ -100,8 +77,12 @@ export const useTimeColumns = (props: TimePickerPanelProps) => {
   };
 
   const columnsMap = computed(() => {
-    const type = props.type === TimePickerType.Time ? TimePickerType.HoursMinutesSeconds : props.type;
-    return type.split('-');
+    if (props.format === 'HH:mm:ss') {
+      return [TimeColumn.Hours, TimeColumn.Minutes, TimeColumn.Seconds];
+    } else {
+      return [TimeColumn.Hours, TimeColumn.Minutes];
+    }
+
   });
 
   const timeColumns = computed<Columns>(() => {
@@ -124,22 +105,9 @@ export const useTimeColumns = (props: TimePickerPanelProps) => {
     });
   });
 
-  const getTimeValue = (changes?: PickerChange<number>)=>{
-    const times = [...innerValue.value];
-    if(changes) {
-      const { index, value } = changes;
-      times[index] = value[valueField];
-    }
-    const [hours, minutes = 0, seconds = 0] = times;
-
-    return formatTime({hours, minutes, seconds}, props.format);
-  };
-
   return {
     textField,
     valueField,
-    timeColumns,
-    innerValue,
-    getTimeValue
+    timeColumns
   };
 };
diff --git a/packages/mobile-ui-vue/components/time-picker/src/composition/use-time-value.ts b/packages/mobile-ui-vue/components/time-picker/src/composition/use-time-value.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4ebb7ab0028f5dee447a37098420c6475e429a28
--- /dev/null
+++ b/packages/mobile-ui-vue/components/time-picker/src/composition/use-time-value.ts
@@ -0,0 +1,103 @@
+import { watch, ref } from 'vue';
+import { PickerChange } from '@farris/mobile-ui-vue/picker';
+import { formatTime, getDateRecord, getTimeRecord, } from "@farris/mobile-ui-vue/common";
+import { TimePickerPanelProps } from "../time-picker-panel.props";
+import { UseTimeValue } from './type';
+
+
+export const useTimeValue = (props: TimePickerPanelProps): UseTimeValue => {
+  const textField = 'text';
+  const valueField = 'value';
+  // 真实值
+  const realValue = ref<number[] | null>([]);
+  // 当前选中的值
+  const selectedValue = ref<number[] | null>([]);
+
+  /**
+   * 开始时间
+   */
+  const beginTime = ref({ hours: 0, minutes: 0, seconds: 0 });
+  const setBeginTime = () => {
+    if (props.minTime) {
+      beginTime.value = getTimeRecord(props.minTime);;
+    }
+  };
+  watch(() => props.minTime, setBeginTime, { immediate: true });
+
+  /**
+   * 结束时间
+   */
+  const endTime = ref({ hours: 23, minutes: 59, seconds: 59 });
+  const setEndTime = () => {
+    if (props.maxTime) {
+      endTime.value = getTimeRecord(props.maxTime);
+    }
+  };
+  watch(() => props.maxTime, setEndTime, { immediate: true });
+
+  /**
+   * 格式化选中值
+   */
+  const formatSelectedValue = (value: string | null) => {
+    if (!value) {
+      const { hours, minutes, seconds } = getDateRecord(new Date());
+      selectedValue.value = [hours, minutes, seconds];
+      return;
+    }
+
+    const { hours, minutes, seconds } = getTimeRecord(value);
+    selectedValue.value = [hours, minutes, seconds];
+  };
+
+  watch(() => props.modelValue, (newValue: string | null) => {
+    formatSelectedValue(newValue);
+    if (props.modelValue && selectedValue.value) {
+      realValue.value = [...selectedValue.value];
+    } else {
+      realValue.value = newValue as null;
+    }
+  });
+
+  const getTimeValue = (value: number[] | null, changes?: PickerChange<number>) => {
+    if (!value) {
+      return value;
+    }
+    const times = [...value];
+    if (changes) {
+      const { index, value } = changes;
+      times[index] = value[valueField];
+    }
+    const [hours, minutes = 0, seconds = 0] = times;
+
+    return formatTime({ hours, minutes, seconds }, props.format);
+  };
+  
+  const getSelectedValue = (changes?: PickerChange<number>) => {
+    return getTimeValue(selectedValue.value, changes);
+  };
+
+  const getRealValue = () => {
+    return getTimeValue(realValue.value);
+  };
+
+  const resetSelectedValue = () => {
+    if (realValue.value) {
+      selectedValue.value = [...realValue.value];
+    } else {
+      const { hours, minutes, seconds } = getDateRecord(new Date());
+      selectedValue.value = [hours, minutes, seconds];
+    }
+  };
+
+  return {
+    textField,
+    valueField,
+    beginTime,
+    endTime,
+    realValue,
+    selectedValue,
+    getSelectedValue,
+    getRealValue,
+    resetSelectedValue
+  };
+};
diff --git a/packages/mobile-ui-vue/components/time-picker/src/time-picker-panel.component.tsx b/packages/mobile-ui-vue/components/time-picker/src/time-picker-panel.component.tsx
index 0c59b8cb959830fa208b4f502907772c10e9d269..7740443af80847d4535dff4c9e7c906cc140a472 100644
--- a/packages/mobile-ui-vue/components/time-picker/src/time-picker-panel.component.tsx
+++ b/packages/mobile-ui-vue/components/time-picker/src/time-picker-panel.component.tsx
@@ -1,8 +1,9 @@
-import { defineComponent } from 'vue';
+import { defineComponent, nextTick } from 'vue';
 import { PickerPanel, PickerChange } from '@farris/mobile-ui-vue/picker';
-import { useBem } from '@farris/mobile-ui-vue/common';
+import { getDateRecord, useBem } from '@farris/mobile-ui-vue/common';
 import { useTimeColumns } from './composition';
 import { timePickerPanelProps, TIME_PICKER_PANEL_NAME } from './time-picker-panel.props';
+import { useTimeValue } from './composition/use-time-value';
 
 export default defineComponent({
   name: TIME_PICKER_PANEL_NAME,
@@ -12,27 +13,38 @@ export default defineComponent({
   setup(props, context) {
     const { emit, expose } = context;
 
-    const { timeColumns, innerValue, textField, valueField, getTimeValue } = useTimeColumns(props);
-
-    expose({ getTextValue: getTimeValue });
+    const timeValueComposition = useTimeValue(props);
+    const { textField, valueField, selectedValue, realValue, getSelectedValue, getRealValue, resetSelectedValue} = timeValueComposition;
+    const { timeColumns } = useTimeColumns(props, timeValueComposition);
 
+    
     const handleChange = (changes: PickerChange<number>)=>{
-      emit('change', getTimeValue(changes));
+      nextTick(()=>{
+        emit('change', getSelectedValue(changes));
+      });
     };
 
     const handleConfirm = ()=>{
-      emit('confirm', getTimeValue());
+      nextTick(()=>{
+        realValue.value = selectedValue.value;
+        emit('confirm', getRealValue());
+      });
     };
 
-    const handleCanCel = ()=>{
-      emit('cancel');
+    const handleCancel = ()=>{
+      nextTick(()=>{
+        resetSelectedValue();
+        emit('cancel');
+      });
     };
+    
+    expose({ getTextValue: getRealValue, resetSelectedValue});
 
     const { bem } = useBem(TIME_PICKER_PANEL_NAME);
 
     return () => (
       <PickerPanel
-        v-model={innerValue.value}
+        v-model={selectedValue.value}
         title={props.title}
         columns={timeColumns.value}
         class={bem()}
@@ -42,7 +54,7 @@ export default defineComponent({
         visiableOptionCount={props.visiableOptionCount}
         onChange={handleChange}
         onConfirm={handleConfirm}
-        onCancel={handleCanCel}
+        onCancel={handleCancel}
       ></PickerPanel>
     );
   }
diff --git a/packages/mobile-ui-vue/components/time-picker/src/time-picker-panel.props.ts b/packages/mobile-ui-vue/components/time-picker/src/time-picker-panel.props.ts
index 2759e6d31601e69ec85243a4f8ff828e3f5819ce..6bfc163f13d83c3a6d0fd8d4664952583f4a8f32 100644
--- a/packages/mobile-ui-vue/components/time-picker/src/time-picker-panel.props.ts
+++ b/packages/mobile-ui-vue/components/time-picker/src/time-picker-panel.props.ts
@@ -7,8 +7,6 @@ export const TIME_PICKER_PANEL_NAME = 'FmTimePickerPanel';
 export const timePickerPanelProps = {
   title: { type: String, default: '' },
 
-  type: { type: String as PropType<TimePickerType>, default: TimePickerType.Time },
-
   modelValue: { type: String, default: '' },
 
   format: { type: String, default: 'HH:mm:ss' },
diff --git a/packages/mobile-ui-vue/components/time-picker/src/time-picker.component.tsx b/packages/mobile-ui-vue/components/time-picker/src/time-picker.component.tsx
index 6ee1989f2c62c664c418695114a51eb1b8e8b1b6..20d650894b862fb223301c4082dcaf3681d3b8b2 100644
--- a/packages/mobile-ui-vue/components/time-picker/src/time-picker.component.tsx
+++ b/packages/mobile-ui-vue/components/time-picker/src/time-picker.component.tsx
@@ -1,4 +1,4 @@
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, watch } from 'vue';
 import { useBem } from '@farris/mobile-ui-vue/common';
 import ButtonEdit from '@farris/mobile-ui-vue/button-edit';
 import { usePickerState } from '@farris/mobile-ui-vue/picker';
@@ -23,6 +23,7 @@ export default defineComponent({
         format: props.format,
         maxTime: props.maxTime,
         minTime: props.minTime,
+        modelValue: props.modelValue,
         visiableOptionCount: props.visiableOptionCount,
         optionFormatter: props.optionFormatter,
         onChange: handleChange,
@@ -30,6 +31,12 @@ export default defineComponent({
         onCancel: () => showPopup.value = false
       };
     });
+    
+    watch(() => showPopup.value, (newShowPopup) => {
+      if(!newShowPopup){
+        componentRef.value.resetSelectedValue();
+      }
+    })
 
     return () => (
       <ButtonEdit
diff --git a/packages/ui-vue/components/designer-outline/src/composition/use-data-view.ts b/packages/ui-vue/components/designer-outline/src/composition/use-data-view.ts
index 09c7190ad5f643aa09373dfac36635d79beb56c6..93816fab422df5cab184ef9e29eb0db644f7424b 100644
--- a/packages/ui-vue/components/designer-outline/src/composition/use-data-view.ts
+++ b/packages/ui-vue/components/designer-outline/src/composition/use-data-view.ts
@@ -25,7 +25,9 @@ export function useDataView(
     /** 处理数据 */
     function handleInputData(components: any, findComponents: any, number: number, parentComponent: any, componentId: string) {
         components.forEach((componentsItem: any) => {
-
+            if (componentsItem.type === 'component') {
+                componentId = componentsItem.id;
+            }
             if (componentsItem.type === 'component-ref') {
                 handleChildComponent(componentsItem, findComponents, number, parentComponent, componentId);
                 return;
diff --git a/packages/ui-vue/components/designer-outline/src/composition/use-outline-node.ts b/packages/ui-vue/components/designer-outline/src/composition/use-outline-node.ts
index 0f21b8708dc6eab1468cc51c0d2c4e16a6d5838a..4c6901e71eb1848b88c21f5fd83f5bd7df3792b7 100644
--- a/packages/ui-vue/components/designer-outline/src/composition/use-outline-node.ts
+++ b/packages/ui-vue/components/designer-outline/src/composition/use-outline-node.ts
@@ -1,6 +1,6 @@
 
-import { DgControl } from '../../../designer-canvas/src/composition/dg-control';
-import { ref, SetupContext } from 'vue';
+import { DgControl as defaultDgControl } from '../../../designer-canvas/src/composition/dg-control';
+import { inject, ref, SetupContext } from 'vue';
 import { ComponentType } from '../types';
 import { UseOutlineNode } from './types';
 import { DesignerHostService } from '../../../designer-canvas/src/composition/types';
@@ -9,6 +9,8 @@ import { DesignerHostService } from '../../../designer-canvas/src/composition/ty
  * 组装控件树节点的展示文本、图标
  */
 export function useOutlineNode(designerHostService: DesignerHostService, context: SetupContext): UseOutlineNode {
+    const designerContext = inject('designerContext') as any;
+    const dgControl = designerContext && designerContext.dgControl ? designerContext.dgControl : defaultDgControl;
 
     /** 当前选中的树节点id */
     const currentSelectedNodeId = ref('');
@@ -19,20 +21,20 @@ export function useOutlineNode(designerHostService: DesignerHostService, context
      */
     function getIcon(componentsItem: any) {
         let classString = 'controlIcon fd-i-Family ';
+        let iconType = '';
 
-        let controlIcon = '';
         switch (componentsItem?.type) {
             // 输入类控件，根据editor来区分
             case 'form-group': {
-                controlIcon = componentsItem.editor && componentsItem.editor.type ? `fd_pc-${componentsItem.editor.type}` : '';
+                iconType = dgControl[componentsItem.type]?.icon || componentsItem.editor?.type || '';
                 break;
             }
             default: {
-                const iconType = DgControl[componentsItem.type]?.icon || componentsItem.type;
-                classString += `fd_pc-${iconType}`;
+                iconType = dgControl[componentsItem.type]?.icon || componentsItem.type;
             }
         }
 
+        const controlIcon = `fd_pc-${iconType}`;
         classString += controlIcon;
         return classString;
     }
@@ -110,7 +112,7 @@ export function useOutlineNode(designerHostService: DesignerHostService, context
                 return '根组件';
             }
             case ComponentType.dataGrid: {
-                const treeGrid = designerHostService?.formSchemaUtils.selectNode(componentsItem, (item) => item.type === (DgControl['tree-grid'] && DgControl['tree-grid'].type));
+                const treeGrid = designerHostService?.formSchemaUtils.selectNode(componentsItem, (item) => item.type === (dgControl['tree-grid'] && dgControl['tree-grid'].type));
                 if (treeGrid) {
                     return '树表格组件';
                 }
@@ -151,7 +153,7 @@ export function useOutlineNode(designerHostService: DesignerHostService, context
             case 'component':
                 return getComponentShowName(componentsItem);
             default: {
-                return DgControl[componentsItem.type] && DgControl[componentsItem.type].name || componentsItem.id;
+                return dgControl[componentsItem.type] && dgControl[componentsItem.type].name || componentsItem.id;
             }
         }
 
diff --git a/packages/ui-vue/components/designer-outline/src/designer-outline.props.ts b/packages/ui-vue/components/designer-outline/src/designer-outline.props.ts
index a983ffc33228009368f0a4971ff11abfa34eaec2..3c845f31fcb65c8f6467ace58d5baf8ccb074f77 100644
--- a/packages/ui-vue/components/designer-outline/src/designer-outline.props.ts
+++ b/packages/ui-vue/components/designer-outline/src/designer-outline.props.ts
@@ -19,6 +19,8 @@ export const designerOutlineProps = {
     lineColor: { type: String, default: '#9399a0' },
     /** 单元格高度 */
     cellHeight: { type: Number, default: 28 },
+    /** 控件信息 */
+    dgControl: { type: Object, default: {}},
 };
 
 export type DesignerOutlineProps = ExtractPropTypes<typeof designerOutlineProps>;