diff --git a/src/api/diy.ts b/src/api/diy.ts
index f0ddfeaa..c6b507b4 100644
--- a/src/api/diy.ts
+++ b/src/api/diy.ts
@@ -45,11 +45,22 @@ interface diy {
     /** 主键 */
     id: string;
 }
+export interface headerAndFooter {
+    name: string;
+    show_tabs: string;
+    key: string;
+    com_data: any;
+}
+export interface diyConfig {
+    diy_data: Array<any>;
+    footer: headerAndFooter;
+    header: headerAndFooter;
+}
 export interface diyData {
     id: string;
     logo: string;
     name: string;
     describe: string;
-    config: string;
+    config: diyConfig | string;
     is_enable: string;
 }
diff --git a/src/components/model-coupon/model-coupon-setting.vue b/src/components/model-coupon/model-coupon-setting.vue
index f1961fe0..9be21e89 100644
--- a/src/components/model-coupon/model-coupon-setting.vue
+++ b/src/components/model-coupon/model-coupon-setting.vue
@@ -9,6 +9,7 @@
     </div>
 </template>
 <script setup lang="ts">
+import { online_url } from '@/utils';
 const props = defineProps({
     type: {
         type: String,
@@ -19,6 +20,7 @@ const props = defineProps({
         default: () => {},
     },
 });
+const new_url = await online_url('/static/plugins/coupon/images/diy/').then((res) => res);
 const form = ref(props.value);
 const default_config = {
     style: {
@@ -194,7 +196,7 @@ const default_config = {
             background_img: [],
         },
         theme_2: {
-            background_img: [{ url: 'http://shopxo.com/static/upload/images/common/2024/08/28/1724815957918121.png' }],
+            background_img: [{ url: new_url + 'theme-2-bg.png' }],
         },
     },
 };
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 12d0a860..7f5dd53f 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,11 +1,12 @@
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import { commonStore } from '@/store';
+import CommonAPI from '@/api/common';
 import App from '@/App.vue';
 const app = createApp(App);
 const pinia = createPinia();
 app.use(pinia);
-const { common } = commonStore();
+const { common, set_common } = commonStore();
 // 定义一组预定义的颜色数组，用于在各种场景中轻松引用这些颜色
 // 这些颜色包括从白色到黑色的不同灰度，以及一些鲜艳的颜色，格式有十六进制、RGB、RGBA、HSV、HSL等
 export const predefine_colors = ['#fff', '#ddd', '#ccc', '#999', '#666', '#333', '#000', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#c71585', 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)', 'hsl(181, 100%, 37%)', '#1F93FF', '#c7158577'];
@@ -341,11 +342,17 @@ export const tabs_style = (color: string, style: string | number | boolean | und
  * @returns {Promise<string>} 返回一个Promise，解析为包含资源URL的字符串
  */
 export const online_url = async (directory: string) => {
-    const attachemnt_host = common.config.attachment_host;
     if (import.meta.env.VITE_APP_BASE_API == '/dev-api') {
         let temp_data = await import(import.meta.env.VITE_APP_BASE_API == '/dev-api' ? '../../temp.d' : '../../temp_pro.d');
         return temp_data.default.temp_attachment_host + directory;
     } else {
+        let attachemnt_host = common.config.attachment_host;
+        if (!attachemnt_host) {
+            await CommonAPI.getInit().then((res: any) => {
+                set_common(res.data);
+                attachemnt_host = res.data.config.attachment_host;
+            });
+        }
         return attachemnt_host + directory;
     }
 };
diff --git a/src/views/layout/components/main/index.vue b/src/views/layout/components/main/index.vue
index 3d5a1d1d..ec22ed69 100644
--- a/src/views/layout/components/main/index.vue
+++ b/src/views/layout/components/main/index.vue
@@ -15,7 +15,7 @@
             </el-collapse-item>
         </el-collapse>
     </div>
-    <div class="drawer-container" :style="`width: ${ drawer_selected ? '12.8rem' : '0px'}`">
+    <div class="drawer-container" :style="`width: ${drawer_selected ? '12.8rem' : '0px'}`">
         <div class="drawer-content pt-5" :style="{ left: drawer_selected ? '0' : '-100%' }">
             <div class="size-14 cr-3 fw pl-12 drawer-title" :style="{ opacity: drawer_selected ? '1' : '0' }">已选组件({{ diy_data.length }})</div>
             <div ref="left_scrollTop" class="drawer-drag-area">
@@ -214,6 +214,13 @@ watch(
         page_settings();
     }
 );
+
+watch(
+    () => props.footer,
+    (newValue) => {
+        footer_nav.value = newValue;
+    }
+);
 const top_padding = ref(90);
 const top_margin = ref(0);
 const content_style = ref('');
@@ -246,12 +253,6 @@ watchEffect(() => {
     }
 });
 
-watch(
-    () => props.footer,
-    (newValue) => {
-        footer_nav.value = newValue;
-    }
-);
 // 已选组件逻辑处理
 const drawer_selected = ref(false);
 watchEffect(() => {
@@ -260,7 +261,7 @@ watchEffect(() => {
     } else {
         drawer_selected.value = false;
     }
-})
+});
 const toggle_drawer = () => {
     drawer_selected.value = !drawer_selected.value;
 };
@@ -565,7 +566,6 @@ const page_settings = () => {
             item.show_tabs = '0';
         });
     }
-
     emits('rightUpdate', page_data.value, diy_data.value, page_data.value, footer_nav.value);
 };
 //导出
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index 0404a894..83f65c74 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -14,20 +14,15 @@
 </template>
 
 <script setup lang="ts">
-import type { UploadFile, UploadFiles } from 'element-plus';
+import type { UploadFile } from 'element-plus';
+import { is_obj } from '@/utils';
 import { Navbar, Settings, AppMain } from './components/index';
 import defaultSettings from './components/main/index';
 import { cloneDeep } from 'lodash';
-import DiyAPI, { diyData } from '@/api/diy';
+import DiyAPI, { diyData, headerAndFooter, diyConfig } from '@/api/diy';
 import CommonAPI from '@/api/common';
 import { commonStore } from '@/store';
 const common_store = commonStore();
-interface headerAndFooter {
-    name: string;
-    show_tabs: string;
-    key: string;
-    com_data: any;
-}
 interface diy_data_item {
     id: string;
     model: {
@@ -69,9 +64,9 @@ const api_count = ref(0);
 
 const right_update = (item: any, diy: [Array<any>], header: headerAndFooter, footer: headerAndFooter) => {
     diy_data_item.value = item;
-    form.value.diy_data = diy;
-    form.value.header = header;
-    form.value.footer = footer;
+    // form.value.diy_data = diy;
+    // form.value.header = header;
+    // form.value.footer = footer;
     // 生成随机id
     key.value = Math.random().toString(36).substring(2);
 };
@@ -106,9 +101,11 @@ const export_data_event = () => {
 };
 //#region 页面初始化数据 ---------------------start
 // 页面加载
+onBeforeMount(async () => {
+    await common_init();
+});
 onMounted(() => {
     init();
-    common_init();
 });
 const is_empty = ref(false);
 const init = () => {
@@ -212,6 +209,7 @@ const diy_data_transfor_form_data = (clone_form: diy_data_item) => {
     };
 };
 const form_data_transfor_diy_data = (clone_form: diyData) => {
+    let temp_config = clone_form.config;
     try {
         return {
             id: clone_form.id,
@@ -221,9 +219,9 @@ const form_data_transfor_diy_data = (clone_form: diyData) => {
                 is_enable: clone_form.is_enable,
                 describe: clone_form.describe,
             },
-            header: JSON.parse(clone_form.config).header,
-            footer: JSON.parse(clone_form.config).footer,
-            diy_data: JSON.parse(clone_form.config).diy_data,
+            header: is_obj(temp_config) ? (temp_config as diyConfig).header : JSON.parse(temp_config as string).header,
+            footer: is_obj(temp_config) ? (temp_config as diyConfig).footer : JSON.parse(temp_config as string).footer,
+            diy_data: is_obj(temp_config) ? (temp_config as diyConfig).diy_data : JSON.parse(temp_config as string).diy_data,
         };
     } catch (error) {
         return {