From 4332aa1e32f342a3fc980e4907b5cafb5119c59b Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Fri, 6 Sep 2024 13:40:59 +0800
Subject: [PATCH] =?UTF-8?q?###=20=E4=BC=98=E5=8C=96=E4=B8=8E=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 优化加载动画：调整加载动画的时长设置，以增强用户体验。由500毫秒调整至1000毫秒，确保页面完全加载后动画再消失。
2. 修复图片路径引用：在`model-coupon-setting`组件中，修正图片路径引用方式。使用`ref`来异步获取图片路径，并解决在`onBeforeMount`钩子中设置路径的问题。
3. 调整文件输出路径：在`vite.config.ts`中，修改文件的输出路径以优化资源管理。将`chunk`和`entryFileNames`的路径从`static/admin/default/diy`调整为`static/diy`，以适应最新的资源组织结构。
4. 重构布局模板：在`layout/index.vue`中，对布局模板进行重构，以提高代码的可读性和维护性。通过`loading_content`状态管理加载动画的显示与隐藏，更清晰地控制页面的渲染流程。

通过这些改进，系统性能和稳定性得到进一步提升，同时也优化了开发和维护的便利性。
---
 .../model-coupon/model-coupon-setting.vue     |  7 ++++--
 src/views/layout/index.vue                    | 24 +++++++++++--------
 vite.config.ts                                |  6 ++---
 3 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/components/model-coupon/model-coupon-setting.vue b/src/components/model-coupon/model-coupon-setting.vue
index 9be21e89..2abe4355 100644
--- a/src/components/model-coupon/model-coupon-setting.vue
+++ b/src/components/model-coupon/model-coupon-setting.vue
@@ -20,7 +20,7 @@ const props = defineProps({
         default: () => {},
     },
 });
-const new_url = await online_url('/static/plugins/coupon/images/diy/').then((res) => res);
+const new_url = ref('');
 const form = ref(props.value);
 const default_config = {
     style: {
@@ -196,7 +196,7 @@ const default_config = {
             background_img: [],
         },
         theme_2: {
-            background_img: [{ url: new_url + 'theme-2-bg.png' }],
+            background_img: [{ url: new_url.value + 'theme-2-bg.png' }],
         },
     },
 };
@@ -210,4 +210,7 @@ const change_theme = (val: string) => {
         form.value.style = Object.assign({}, form.value.style, (<arrayIndex>default_config.style)[`theme_${Number(val)}`]);
     }
 };
+onBeforeMount(async () => {
+    new_url.value = await online_url('/static/plugins/coupon/images/diy/').then((res) => res);
+});
 </script>
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index 8c4df799..37f89269 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -1,14 +1,16 @@
 <template>
     <div v-loading.fullscreen.lock="loading" class="app-wrapper no-copy" element-loading-background="rgba(255,255,255,1)" element-loading-custom-class="loading-custom">
-        <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" @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="260px" size="16px" text="编辑数据有误"></no-data>
+        <template v-if="!loading_content">
+            <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" @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="260px" size="16px" text="编辑数据有误"></no-data>
+            </template>
         </template>
     </div>
 </template>
@@ -135,11 +137,13 @@ const common_init = () => {
 };
 // 加载动画
 const loading = ref(true);
+const loading_content = ref(true);
 const loading_event = (count: number) => {
     if (count == 2) {
+        loading_content.value = false;
         setTimeout(() => {
             loading.value = false;
-        }, 500);
+        }, 1000);
     }
 };
 //#endregion 页面初始化数据 ---------------------end
diff --git a/vite.config.ts b/vite.config.ts
index 6d61d4b2..16b848fe 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -113,11 +113,11 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
             rollupOptions: {
                 output: {
                     // 自定义 chunk 文件的输出路径和文件名格式
-                    chunkFileNames: 'static/admin/default/diy/js/chunk/[name]-[hash].js',
+                    chunkFileNames: 'static/diy/js/chunk/[name]-[hash].js',
                     // 自定义 entry chunk 的输出路径和文件名格式
-                    entryFileNames: 'static/admin/default/diy/js/entry/[name]-[hash].js',
+                    entryFileNames: 'static/diy/js/entry/[name]-[hash].js',
                     //非js文件夹，按照文件类型分类css,png,jpg
-                    assetFileNames: 'static/admin/default/diy/[ext]/[name]-[hash].[ext]',
+                    assetFileNames: 'static/diy/[ext]/[name]-[hash].[ext]',
                 },
             },
         },