💊 修改细节问题

package.json

@@ -17,8 +17,8 @@
   "dependencies": {
     "@imengyu/imengyu-utils": "^0.0.14",
     "@imengyu/imengyu-web-shared": "^0.0.1",
-    "@imengyu/js-request-transform": "^0.3.5",
-    "@imengyu/vue-dynamic-form": "^0.1.1",
+    "@imengyu/js-request-transform": "^0.3.6",
+    "@imengyu/vue-dynamic-form": "^0.1.3",
     "@imengyu/vue-scroll-rect": "^0.1.3",
     "@tinymce/tinymce-vue": "^6.3.0",
     "@vuemap/vue-amap": "^2.1.12",

src/assets/scss/fix.scss

@@ -13,7 +13,7 @@
   background-color: #fff;
   border-radius: 15px;
 
-  > h3 {
+  > h5 {
     text-align: center;
   }
 }

src/components/dynamicf/SelectCity.vue

@@ -0,0 +1,67 @@
+<template>
+  <a-cascader
+    v-model:value="value"
+    :options="data"
+    :field-names="{ label: 'text', value: useCode ? 'value' : 'text' }"
+    :style="{ width: '100%' }"
+    placeholder="请选择省市"
+    @change="handleChange"
+  />
+</template>
+
+<script setup lang="ts">
+import NotConfigue from '@/api/NotConfigue';
+import { onMounted, ref, computed, watch } from 'vue';
+
+const data = ref<Array<any>>([]);
+const localValue = ref<Array<string | number>>([]);
+
+const props = defineProps({
+  modelValue: {
+    type: Array as () => Array<string | number>,
+    default: () => []
+  },
+  useCode: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+// 计算属性用于双向绑定
+const value = computed({
+  get() {
+    return props.modelValue || localValue.value;
+  },
+  set(newValue) {
+    localValue.value = newValue;
+    emit('update:modelValue', newValue);
+  }
+})
+
+// 监听外部modelValue变化
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue && JSON.stringify(newValue) !== JSON.stringify(localValue.value)) {
+      localValue.value = [...newValue];
+    }
+  },
+  { deep: true }
+)
+
+onMounted(() => {
+  NotConfigue.get('https://mn.wenlvti.net/app_static/xiangan/city-data.json', '', undefined).then((res) => {
+    data.value = res.data as any[];
+    // 如果有初始值，设置到本地状态
+    if (props.modelValue && props.modelValue.length > 0) {
+      localValue.value = [...props.modelValue];
+    }
+  })
+});
+
+function handleChange(values: Array<string | number>) {
+  emit('update:modelValue', values);
+}
+</script>

src/components/dynamicf/index.ts

@@ -0,0 +1,34 @@
+import { configDefaultDynamicFormOptions, DynamicFormItemRegistry } from "@imengyu/vue-dynamic-form";
+import { Form, FormItem, type FormProps } from "ant-design-vue";
+import { markRaw } from "vue";
+import SelectCity from "./SelectCity.vue";
+
+export function configDynamicForm() {
+  
+  configDefaultDynamicFormOptions({
+    formAdditionaProps: {
+      layout: 'vertical',
+    } as FormProps,
+    internalWidgets: {
+      Form: {
+        component: markRaw(Form),
+        propsMap: {
+          rules: 'rules',
+          wrapperCol: 'wrapperCol',
+          labelCol: 'labelCol',
+        },
+      },
+      FormItem: {
+        component: markRaw(FormItem),
+        propsMap: {
+          name: 'name',
+          wrapperCol: 'wrapperCol',
+          labelCol: 'labelCol',
+        },
+      },
+    },
+  });
+
+  DynamicFormItemRegistry
+    .register('select-city', markRaw(SelectCity), {}, 'modelValue')
+}

src/main.ts

@@ -10,11 +10,12 @@ import { createPinia } from 'pinia'
 
 import App from './App.vue'
 import router from './router'
+import NProgress from 'nprogress';
+import ImengyuCommon from '@imengyu/imengyu-web-shared';
 import { registryConvert } from '@/common/ConvertRgeistry'
 import { initAMapApiLoader } from '@vuemap/vue-amap';
-import NProgress from 'nprogress';
 import { QuillEditor } from '@vueup/vue-quill'
-import ImengyuCommon from '@imengyu/imengyu-web-shared'
+import { configDynamicForm } from './components/dynamicf';
 
 initAMapApiLoader({
   key: '212b86dc49a5116a34e945d31da7ad14',
@@ -28,7 +29,9 @@ app.use(createPinia())
 app.use(router)
 app.use(ImengyuCommon, {})
 app.component('QuillEditor', QuillEditor);
-app.mount('#app');
+app.mount('#app').$nextTick(() => {
+  configDynamicForm();
+});
 
 router.beforeEach((to, from, next) => {
   NProgress.start();