diff --git a/src/api/diy.ts b/src/api/diy.ts
index 0f1b0043..f0ddfeaa 100644
--- a/src/api/diy.ts
+++ b/src/api/diy.ts
@@ -18,6 +18,25 @@ class DiyAPI {
             data,
         });
     }
+    /** diy导入 */
+    static import(data: FormData) {
+        return request({
+            url: `diyapi/diyupload`,
+            method: 'post',
+            data,
+            headers: {
+                'Content-Type': 'multipart/form-data',
+            },
+        });
+    }
+    /** diy导出 */
+    static export(data: diy) {
+        return request({
+            url: `diyapi/diydownload`,
+            method: 'post',
+            data,
+        });
+    }
 }
 
 export default DiyAPI;
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index 071eb677..3261c5df 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -9,10 +9,10 @@
                     </el-select>
                     <div v-if="!isEmpty(form.data_source_content)" class="flex-row mt-20 gap-20">
                         <div class="re flex align-c">
-                            <image-empty v-model="form.data_source_content[form.img_key]" style="width: 10rem; height: 10rem;"></image-empty>
+                            <image-empty v-model="form.data_source_content[form.img_key]" style="width: 10rem; height: 10rem"></image-empty>
                             <div class="plr-15 bg-f abs replace-data size-14" @click="replace_data">替换数据</div>
                         </div>
-                        <div class="flex-1 size-14 text-line-3">{{ form.data_source_content.title ||  form.data_source_content.name }}</div>
+                        <div class="flex-1 size-14 text-line-3">{{ form.data_source_content.title || form.data_source_content.name }}</div>
                     </div>
                 </el-form-item>
                 <div class="mb-20">内容设置</div>
@@ -40,7 +40,7 @@
                 </div>
             </div>
         </Dialog>
-        <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="[ form.data_source ]" @update:model-value="url_value_dialog_call_back" @close="url_value_close"></url-value-dialog>
+        <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="[form.data_source]" @update:model-value="url_value_dialog_call_back" @close="url_value_close"></url-value-dialog>
     </div>
 </template>
 <script setup lang="ts">
@@ -70,12 +70,12 @@ interface data_list {
     name: string;
     field: string;
     type: string;
-};
+}
 interface data_source_content {
     name: string;
     data: data_list[];
     type: string;
-};
+}
 const getCustominit = () => {
     CustomAPI.getCustominit().then((res) => {
         const { data_source } = res.data;
@@ -84,7 +84,7 @@ const getCustominit = () => {
         // 数据处理
         processing_data(form.data_source);
     });
-}
+};
 
 onBeforeMount(() => {
     if (!data_source_store.is_data_source_api) {
@@ -97,13 +97,13 @@ onBeforeMount(() => {
     }
 });
 // 处理显示的图片和传递到下去的数据结构
-const model_data_source = ref<data_list[]>([])
+const model_data_source = ref<data_list[]>([]);
 const processing_data = (key: string) => {
-    const list = options.value.filter(item => item.type == key);
+    const list = options.value.filter((item) => item.type == key);
     if (list.length > 0) {
         model_data_source.value = list[0].data;
         // 从中取出包含图片的内容
-        const field_list = list[0].data.filter(item => item.type == 'images');
+        const field_list = list[0].data.filter((item) => item.type == 'images');
         // 取出图片的key
         if (field_list.length > 0) {
             form.img_key = field_list[0].field;
@@ -160,7 +160,7 @@ const changeDataSource = (key: string) => {
     if (!isEmpty(key)) {
         url_value_dialog_visible.value = true;
     }
-}
+};
 
 // 弹出框选择的内容
 const url_value_dialog_call_back = (item: any[]) => {
@@ -175,13 +175,13 @@ const url_value_close = () => {
     if (isEmpty(form.data_source_content)) {
         form.data_source = '';
     }
-}
+};
 // 替换数据
 const replace_data = () => {
     if (!isEmpty(form.data_source)) {
         url_value_dialog_visible.value = true;
     }
-}
+};
 //#endregion
 </script>
 <style lang="scss" scoped>
@@ -206,20 +206,20 @@ const replace_data = () => {
     padding: 0;
     overflow: hidden;
     .el-dialog__header {
-        padding: 3rem;
+        padding: 2.3rem 2rem;
         .el-dialog__title {
             font-size: 16px;
         }
         .el-dialog__headerbtn {
             font-size: 2.4rem;
-            padding: 3rem;
+            padding: 2rem;
             height: auto;
             width: auto;
         }
     }
     .el-dialog__body {
         background: #f5f5f5;
-        height: calc(100% - 16.4rem);
+        height: calc(100% - 15rem);
     }
     .el-dialog__footer {
         padding: 2.4rem 3rem;
diff --git a/src/components/model-user-info/index.vue b/src/components/model-user-info/index.vue
index 127b093f..ad380454 100644
--- a/src/components/model-user-info/index.vue
+++ b/src/components/model-user-info/index.vue
@@ -11,7 +11,7 @@
                 </div>
                 <div class="flex-row align-c" :class="'gap-' + base_data.img_space">
                     <div v-for="(item, index) in icon_setting" :key="index" :style="{ width: base_data.img_size + 'px', height: base_data.img_size + 'px' }">
-                        <image-empty v-if="item.src.length > 0" v-model="item.src[0]" :error-img-style="'width: ' + Number(base_data.img_size) / 2 + 'px;height:' + Number(base_data.img_size) / 2 + 'px;'"></image-empty>
+                        <image-empty v-if="item.img.length > 0" v-model="item.img[0]" :error-img-style="'width: ' + Number(base_data.img_size) / 2 + 'px;height:' + Number(base_data.img_size) / 2 + 'px;'"></image-empty>
                         <icon v-else :name="item.icon" :size="base_data.img_size + ''" color="6"></icon>
                     </div>
                 </div>
@@ -46,14 +46,14 @@ const stats_list = reactive([
 ]);
 interface icon_params {
     id: string;
-    src: uploadList[];
+    img: uploadList[];
     icon: string;
     link: string;
 }
 const user_info = ref<string[]>(['1', '2', '3', '4']);
 const icon_setting = ref<icon_params[]>([
-    { id: '1', src: [], icon: '', link: 'a' },
-    { id: '2', src: [], icon: '', link: 'a' },
+    { id: '1', img: [], icon: '', link: 'a' },
+    { id: '2', img: [], icon: '', link: 'a' },
 ]);
 const base_data = reactive({
     // 头像大小
diff --git a/src/components/model-user-info/model-user-info-content.vue b/src/components/model-user-info/model-user-info-content.vue
index 00d7f9b8..3e4b5135 100644
--- a/src/components/model-user-info/model-user-info-content.vue
+++ b/src/components/model-user-info/model-user-info-content.vue
@@ -16,7 +16,7 @@
                 <div class="nav-list">
                     <drag :data="form.icon_setting" :space-col="20" @remove="icon_setting_remove" @on-sort="icon_setting_sort">
                         <template #default="{ row }">
-                            <upload v-model="row.src" v-model:icon-value="row.icon" is-icon type="img" :limit="1" :styles="2" :size="30"></upload>
+                            <upload v-model="row.img" v-model:icon-value="row.icon" is-icon type="img" :limit="1" :styles="2" :size="30"></upload>
                             <url-value v-model="row.link"></url-value>
                         </template>
                     </drag>
@@ -52,7 +52,7 @@ const icon_setting_sort = (item: any) => {
 const add = () => {
     form.icon_setting.push({
         id: get_math(),
-        src: [],
+        img: [],
         icon: '',
         link: {},
     });
diff --git a/src/views/layout/components/main/default/footer-nav.ts b/src/views/layout/components/main/default/footer-nav.ts
index ed6dc53f..fbc1c4db 100644
--- a/src/views/layout/components/main/default/footer-nav.ts
+++ b/src/views/layout/components/main/default/footer-nav.ts
@@ -18,10 +18,10 @@ const defaultFooterNav = ref<DefaultFooterNav>({
         nav_style: '0',
         nav_type: '0',
         nav_content: [
-            { id: '1', name: '首页', img: [{ id: 1, url: new_url + 'home.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/home.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], link: {} },
-            { id: '2', name: '分类', img: [{ id: 1, url: new_url + 'category.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/category.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], link: {} },
-            { id: '3', name: '购物车', img: [{ id: 1, url: new_url + 'cart.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/cart.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], link: {} },
-            { id: '4', name: '我的', img: [{ id: 1, url: new_url + 'user.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/user.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], link: {} },
+            { id: '1', name: '首页', img: [{ id: 1, url: new_url + 'home.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/home.png', original: '', title: '', ext: '.png', type: 'img' }], link: {} },
+            { id: '2', name: '分类', img: [{ id: 1, url: new_url + 'category.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/category.png', original: '', title: '', ext: '.png', type: 'img' }], link: {} },
+            { id: '3', name: '购物车', img: [{ id: 1, url: new_url + 'cart.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/cart.png', original: '', title: '', ext: '.png', type: 'img' }], link: {} },
+            { id: '4', name: '我的', img: [{ id: 1, url: new_url + 'user.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/user.png', original: '', title: '', ext: '.png', type: 'img' }], link: {} },
         ],
     },
     style: {
diff --git a/src/views/layout/components/main/default/user-info.ts b/src/views/layout/components/main/default/user-info.ts
index 34570634..a2466700 100644
--- a/src/views/layout/components/main/default/user-info.ts
+++ b/src/views/layout/components/main/default/user-info.ts
@@ -2,7 +2,7 @@ import defaultCommon from './index';
 interface DefaultUserInfo {
     content: {
         user_info: string[];
-        icon_setting: { id: string; src: uploadList[]; link: object; icon: string }[];
+        icon_setting: { id: string; img: uploadList[]; link: object; icon: string }[];
     };
     style: {
         user_avatar_size: string;
@@ -29,8 +29,8 @@ const defaultUserInfo: DefaultUserInfo = {
     content: {
         user_info: ['1', '2', '3', '4', '5'],
         icon_setting: [
-            { id: '1', src: [], icon: 'applet-me-settings-acquiesce', link: {} },
-            { id: '2', src: [], icon: 'applet-me-message-acquiesce', link: {} },
+            { id: '1', img: [], icon: 'applet-me-settings-acquiesce', link: {} },
+            { id: '2', img: [], icon: 'applet-me-message-acquiesce', link: {} },
         ],
     },
     style: {
diff --git a/src/views/layout/components/main/index.scss b/src/views/layout/components/main/index.scss
index 127f1efc..a93cfd89 100644
--- a/src/views/layout/components/main/index.scss
+++ b/src/views/layout/components/main/index.scss
@@ -63,6 +63,7 @@
         z-index: 1;
         .el-button {
             border-radius: 0.4rem;
+            width: 11.8rem;
         }
         .el-button + .el-button {
             margin-left: 0;
diff --git a/src/views/layout/components/main/index.vue b/src/views/layout/components/main/index.vue
index e23b0253..b146160c 100644
--- a/src/views/layout/components/main/index.vue
+++ b/src/views/layout/components/main/index.vue
@@ -38,7 +38,11 @@
                 <div class="acticons">
                     <el-button size="large" class="" @click="page_settings">页面设置</el-button>
                     <el-button size="large" class="" @click="export_click">导出</el-button>
-                    <el-button size="large" class="" @click="import_click">导入</el-button>
+                    <el-upload ref="uploadRef" class="upload-demo" action="#" :accept="exts_text" :show-file-list="false" :auto-upload="false" :on-change="upload_change">
+                        <template #trigger>
+                            <el-button size="large">导入</el-button>
+                        </template>
+                    </el-upload>
                     <el-button size="large" class="" @click="clear_click">清空</el-button>
                 </div>
                 <!-- 拖拽区 -->
@@ -165,6 +169,7 @@
 </template>
 <script setup lang="ts">
 import { background_computer, get_math, gradient_computer, padding_computer, radius_computer } from '@/utils';
+import type { UploadFile, UploadFiles } from 'element-plus';
 import { cloneDeep } from 'lodash';
 import { SortableEvent, VueDraggable } from 'vue-draggable-plus';
 import defaultSettings from './index';
@@ -245,7 +250,7 @@ watch(
 );
 
 // 父组件调用的方法
-const emits = defineEmits(['rightUpdate']);
+const emits = defineEmits(['rightUpdate', 'import', 'export']);
 const activeNames = reactive(['base', 'plugins', 'tool']);
 interface componentsData {
     name: string;
@@ -535,9 +540,17 @@ const page_settings = () => {
     emits('rightUpdate', page_data.value, diy_data.value, page_data.value, footer_nav.value);
 };
 //导出
-const export_click = () => {};
+const export_click = () => {
+    emits('export');
+};
+
 //导入
-const import_click = () => {};
+const exts_text = ref('.zip');
+// 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
+const upload_change = async (uploadFile: UploadFile) => {
+    // console.log('文件状态改变时的钩子', uploadFile);
+    emits('import', uploadFile);
+};
 // 清空列表
 const clear_click = () => {
     app?.appContext.config.globalProperties.$common.message_box('清空后不可恢复，确定继续吗?', 'warning').then(() => {
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index a0c8c2ce..d0c78e33 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -3,17 +3,18 @@
         <template v-if="!is_empty">
             <navbar v-model="form.model" @preview="preview" @save="save" @save-close="save_close" />
             <div class="app-wrapper-content flex-row">
-                <app-main :diy-data="form.diy_data" :header="form.header" :footer="form.footer" @right-update="right_update"></app-main>
+                <app-main :diy-data="form.diy_data" :header="form.header" :footer="form.footer" @right-update="right_update" @import="import_data_event" @export="export_data_event"></app-main>
                 <settings :key="key" :value="diy_data_item"></settings>
             </div>
         </template>
         <template v-else>
-            <no-data height="100vh" img-width="300" size="40px" text="编辑数据有误"></no-data>
+            <no-data height="100vh" img-width="260px" size="16px" text="编辑数据有误"></no-data>
         </template>
     </div>
 </template>
 
 <script setup lang="ts">
+import type { UploadFile, UploadFiles } from 'element-plus';
 import { Navbar, Settings, AppMain } from './components/index';
 import defaultSettings from './components/main/index';
 import { cloneDeep } from 'lodash';
@@ -74,6 +75,35 @@ const right_update = (item: any, diy: [Array<any>], header: headerAndFooter, foo
     // 生成随机id
     key.value = Math.random().toString(36).substring(2);
 };
+const import_data_event = (uploadFile: UploadFile) => {
+    // 截取document.location.search字符串内id/后面的所有字段
+    const form_data = new FormData();
+    if (get_id()) {
+        form_data.append('id', get_id());
+    }
+    if (uploadFile && uploadFile.raw) {
+        form_data.append('file', uploadFile?.raw);
+    }
+    DiyAPI.import(form_data).then((res: any) => {
+        ElMessage.success(res.msg);
+        history.pushState({}, '', '?s=diy/saveinfo/id/' + res.data + '.html');
+        init();
+    });
+};
+const export_data_event = () => {
+    if (get_id()) {
+        ElMessageBox.confirm('导出前需先保存最新数据，是否继续？', '提示')
+            .then(() => {
+                const index = window.location.href.lastIndexOf('?s=');
+                const pro_url = window.location.href.substring(0, index);
+                const new_url = import.meta.env.VITE_APP_BASE_API == '/dev-api' ? import.meta.env.VITE_APP_BASE_API_URL : pro_url;
+                window.open(new_url + '?s=diyapi/diydownload/id/' + get_id() + '.html', '_blank');
+            })
+            .catch(() => {});
+    } else {
+        ElMessage.warning('请先保存,再导出');
+    }
+};
 //#region 页面初始化数据 ---------------------start
 // 页面加载
 onMounted(() => {
@@ -82,26 +112,16 @@ onMounted(() => {
 });
 const is_empty = ref(false);
 const init = () => {
-    // 截取document.location.search字符串内id/后面的所有字段
-    let new_data = { id: '' };
-    if (document.location.search.indexOf('id/') !== -1) {
-        new_data.id = document.location.search.substring(document.location.search.indexOf('id/') + 3);
-        // 去除字符串的.html
-        let html_index = new_data.id.indexOf('.html');
-        if (html_index !== -1) {
-            new_data.id = new_data.id.substring(0, html_index);
-        }
-        if (new_data.id) {
-            DiyAPI.getInit(new_data).then((res: any) => {
-                if (res.data) {
-                    form.value = form_data_transfor_diy_data(res.data);
-                    api_count.value += 1;
-                    loading_event(api_count.value);
-                } else {
-                    is_empty.value = true;
-                }
-            });
-        }
+    if (get_id()) {
+        DiyAPI.getInit({ id: get_id() }).then((res: any) => {
+            if (res.data) {
+                form.value = form_data_transfor_diy_data(res.data);
+            } else {
+                is_empty.value = true;
+            }
+            api_count.value += 1;
+            loading_event(api_count.value);
+        });
     } else {
         api_count.value = 1;
         loading_event(api_count.value);
@@ -160,13 +180,16 @@ const formmat_form_data = (data: diy_data_item, close: boolean = false) => {
     const new_data = diy_data_transfor_form_data(clone_form);
     DiyAPI.save(new_data).then((res) => {
         ElMessage.success('保存成功');
-        if (!close) return;
-        ElMessageBox.confirm('您确定要关闭本页吗？', '提示')
-            .then(() => {
-                // 关闭页面
-                window.close();
-            })
-            .catch(() => {});
+        if (close) {
+            ElMessageBox.confirm('您确定要关闭本页吗？', '提示')
+                .then(() => {
+                    // 关闭页面
+                    window.close();
+                })
+                .catch(() => {});
+        } else {
+            history.pushState({}, '', '?s=diy/saveinfo/id/' + res.data + '.html');
+        }
     });
 };
 //#endregion 顶部导航回调方法 ---------------------end
@@ -214,6 +237,22 @@ const form_data_transfor_diy_data = (clone_form: diyData) => {
         };
     }
 };
+
+// 截取document.location.search字符串内id/后面的所有字段
+const get_id = () => {
+    let new_id = '';
+    if (document.location.search.indexOf('id/') !== -1) {
+        new_id = document.location.search.substring(document.location.search.indexOf('id/') + 3);
+        // 去除字符串的.html
+        let html_index = new_id.indexOf('.html');
+        if (html_index !== -1) {
+            new_id = new_id.substring(0, html_index);
+        }
+        return new_id;
+    } else {
+        return new_id;
+    }
+};
 </script>
 
 <style scoped lang="scss">