refactor(model-coupon-setting): 使用在线URL获取动态图片路径

重构model-coupon-setting组件，使其能够通过异步函数从在线服务器获取动态图片路径，并将其用于coupon images的源URL。此外，优化utils模块中的online_url函数，使其在VITE_APP_BASE_API为'/dev-api'时返回正确的附件主机目录。

fix(layout): 修复footer数据更新导致的错误

修复由于footer数据更新未正确处理而引发的错误。此修复涉及删除和重新组织Vue组件中的watcher，以确保footer数据的更改能够被正确捕获和处理。同时，根据提供的代码差异，似乎还对drawer容器的样式和行为进行了一些调整。

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' }],
         },
     },
 };

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;
     }
 };

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;
 };
@@ -551,7 +552,6 @@ const page_settings = () => {
             item.show_tabs = '0';
         });
     }
-
     emits('rightUpdate', page_data.value, diy_data.value, page_data.value, footer_nav.value);
 };
 //导出

src/views/layout/index.vue

@@ -64,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);
 };
@@ -100,10 +100,20 @@ const export_data_event = () => {
     }
 };
 //#region 页面初始化数据 ---------------------start
+watch(
+    () => form.value.footer,
+    (new_value) => {
+        console.log('layout:', new_value);
+    },
+    { deep: true }
+);
+
 // 页面加载
+onBeforeMount(async () => {
+    await common_init();
+});
 onMounted(() => {
     init();
-    common_init();
 });
 const is_empty = ref(false);
 const init = () => {