解决冲突

2024-08-12 17:33:42 +08:00 · 2024-08-12 17:33:42 +08:00 · 511f6bf6c6
parent 3d4e0cf643 b09f10b8d1
commit 511f6bf6c6
19 changed files with 250 additions and 6264 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,16 @@
+dist
+node_modules
+public
+types/auto-imports.d.ts
+types/components.d.ts
+.husky
+.vscode
+.idea
+*.sh
+*.md
+
+src/assets
+
+.eslintrc.cjs
+.prettierrc.cjs
+.stylelintrc.cjs
--- a/.eslintrc-auto-import.json
+++ b/.eslintrc-auto-import.json
@ -4,8 +4,6 @@
    "ComponentPublicInstance": true,
    "ComputedRef": true,
    "EffectScope": true,
-    "ElMessage": true,
-    "ElMessageBox": true,
    "ExtractDefaultPropTypes": true,
    "ExtractPropTypes": true,
    "ExtractPublicPropTypes": true,
@ -285,6 +283,12 @@
    "watchThrottled": true,
    "watchTriggerable": true,
    "watchWithFilter": true,
+<<<<<<< HEAD
    "whenever": true
+=======
+    "whenever": true,
+    "ElMessageBox": true,
+    "ElMessage": true
+>>>>>>> master
  }
 }
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -0,0 +1,48 @@
+// /* eslint-env node */
+// require('@rushstack/eslint-patch/modern-module-resolution')
+
+// module.exports = {
+//   root: true,
+//   'extends': [
+//     'plugin:vue/vue3-essential',
+//     'eslint:recommended',
+//     '@vue/eslint-config-typescript',
+//     '@vue/eslint-config-prettier/skip-formatting',
+// 	"./.eslintrc-auto-import.json"
+//   ],
+//   parserOptions: {
+//     ecmaVersion: 'latest'
+//   }
+// }
+module.exports = {
+    env: {
+      browser: true,
+      es2021: true,
+      node: true,
+    },
+    parser: "vue-eslint-parser",
+    extends: [
+      // 参考vuejs官方的eslint配置： https://eslint.vuejs.org/user-guide/#usage
+      "plugin:vue/vue3-recommended",
+      "./.eslintrc-auto-import.json",
+      "prettier",
+    ],
+    parserOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      parser: "@typescript-eslint/parser",
+    },
+    plugins: ["vue", "@typescript-eslint"],
+    rules: {
+      "vue/multi-word-component-names": "off", // 关闭组件名必须多字： https://eslint.vuejs.org/rules/multi-word-component-names.html
+      "@typescript-eslint/no-empty-function": "off", // 关闭空方法检查
+      "@typescript-eslint/no-explicit-any": "off", // 关闭any类型的警告
+      "vue/no-v-model-argument": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+    },
+    // https://eslint.org/docs/latest/use/configure/language-options#specifying-globals
+    globals: {
+      DialogOption: "readonly",
+      OptionType: "readonly",
+    },
+  };
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,12 @@
+dist
+node_modules
+public
+types/auto-imports.d.ts
+types/components.d.ts
+.husky
+.vscode
+.idea
+*.sh
+*.md
+
+src/assets
--- a/.prettierrc.cjs
+++ b/.prettierrc.cjs
@ -0,0 +1,37 @@
+module.exports = {
+    // (x)=>{},单个参数箭头函数是否显示小括号。(always:始终显示;avoid:省略括号。默认:always)
+    arrowParens: "always",
+    // 开始标签的右尖括号是否跟随在最后一行属性末尾，默认false
+    bracketSameLine: false,
+    // 对象字面量的括号之间打印空格 (true - Example: { foo: bar } ; false - Example: {foo:bar})
+    bracketSpacing: true,
+    // 是否格式化一些文件中被嵌入的代码片段的风格(auto|off;默认auto)
+    embeddedLanguageFormatting: "auto",
+    // 指定 HTML 文件的空格敏感度 (css|strict|ignore;默认css)
+    htmlWhitespaceSensitivity: "css",
+    // 当文件已经被 Prettier 格式化之后，是否会在文件顶部插入一个特殊的 @format 标记，默认false
+    insertPragma: false,
+    // 在 JSX 中使用单引号替代双引号，默认false
+    jsxSingleQuote: false,
+    // 每行最多字符数量，超出换行(默认80)
+    printWidth: 180000000,
+    // 超出打印宽度 (always | never | preserve )
+    proseWrap: "preserve",
+    // 对象属性是否使用引号(as-needed | consistent | preserve;默认as-needed:对象的属性需要加引号才添加;)
+    quoteProps: "as-needed",
+    // 是否只格式化在文件顶部包含特定注释(@prettier| @format)的文件，默认false
+    requirePragma: false,
+    // 结尾添加分号
+    semi: true,
+    // 使用单引号 (true:单引号;false:双引号)
+    singleQuote: true,
+    // 缩进空格数，默认2个空格
+    tabWidth: 4,
+    // 元素末尾是否加逗号，默认es5: ES5中的 objects, arrays 等会添加逗号，TypeScript 中的 type 后不加逗号
+    trailingComma: "es5",
+    // 指定缩进方式，空格或tab，默认false，即使用空格
+    useTabs: false,
+    // vue 文件中是否缩进 <style> 和 <script> 标签，默认 false
+    vueIndentScriptAndStyle: false,
+  };
+  
--- a/package.json
+++ b/package.json
@ -1,5 +1,5 @@
 {
-  "name": "vue3-vite",
+  "name": "shopxo-diy",
  "version": "0.0.0",
  "private": true,
  "scripts": {
--- a/src/components/base/slider/index.vue
+++ b/src/components/base/slider/index.vue
@ -1,7 +1,7 @@
 <template>
    <div class="slider w">
-        <el-slider v-model="internal_value" :min="min" :max="max" :step="step" />
-        <input-number v-model="internal_value" class="slider-input" :min="min" :max="max"></input-number>
+        <el-slider v-model="modelValue" :min="min" :max="max" :step="step" />
+        <input-number v-model="modelValue" class="slider-input" :min="min" :max="max"></input-number>
    </div>
 </template>

@ -20,7 +20,7 @@ const props = defineProps({
        default: 1,
    },
 });
-const internal_value = defineModel({ type: Number, default: 0 });
+const modelValue = defineModel({ type: Number, default: 0 });
 </script>
 <style lang="scss" scoped>
 .slider {
--- a/src/components/common/common-styles/index.vue
+++ b/src/components/common/common-styles/index.vue
@ -126,7 +126,6 @@ const background_img_url_change = (arry: uploadList[]) => {
 };

 const margin_event = (val: number | undefined) => {
-    form.margin = Number(val);
    form.margin_top = Number(val);
    form.margin_bottom = Number(val);
    form.margin_left = Number(val);
--- a/src/components/common/hot/index.vue
+++ b/src/components/common/hot/index.vue
@ -11,10 +11,12 @@
                <div class="left-content flex-1 pa-20">
                    <el-scrollbar class="img-scrollbar">
                        <div class="img-container">
-                            <div ref="imgBoxRef" @mousedown.prevent="start_drag" @mousemove.prevent="move_drag" @mouseup.prevent="end_drag">
-                                <el-image :src="hot_list.img" class="w img" @selectstart.prevent @contextmenu.prevent @dragstart.prevent></el-image>
+                            <div ref="imgBoxRef" class="oh" @mousedown.prevent="start_drag" @mousemove.prevent="move_drag" @mouseup.prevent="end_drag">
+                                <div ref="imgRef">
+                                    <el-image :src="hot_list.img" class="w img" @selectstart.prevent @contextmenu.prevent @dragstart.prevent></el-image>
+                                </div>
                                <div ref="areaRef" class="area" :style="init_drag_style"></div>
-                                <div v-for="(item, index) in hot_list.hot" :key="index" class="area-box" :style="rect_style(item.drag_start, item.drag_end)" @mousedown.prevent="start_drag_area_box(index, $event)" @dblclick="dbl_drag_event(item, index)">
+                                <div v-for="(item, index) in hot_list.data" :key="index" class="area-box" :style="rect_style(item.drag_start, item.drag_end)" @mousedown.prevent="start_drag_area_box(index, $event)" @dblclick="dbl_drag_event(item, index)">
                                    <div class="del-btn" @click.stop="del_area_event(index)"><icon name="close"></icon></div>
                                    <div class="drag-btn" :data-index="index" @mousedown.prevent="start_drag_btn(index, $event)"></div>
                                    <div class="text">
@ -30,7 +32,7 @@
                    <div class="size-16 fw mb-10">图片热区</div>
                    <div class="size-12 cr-9 mb-20">框选热区范围，双击设置热区信息</div>
                    <div class="flex-col gap-20 item">
-                        <div v-for="(item, index) in hot_list.hot" :key="index" class="flex-row align-c gap-10">
+                        <div v-for="(item, index) in hot_list.data" :key="index" class="flex-row align-c gap-10">
                            <el-input v-model="item.name" class="name" placeholder="名称"></el-input>
                            <url-value v-model="item.link"></url-value>
                            <icon name="del" size="20" @click="del_event(index)"></icon>
@ -83,21 +85,18 @@ const app = getCurrentInstance();
 const props = defineProps({});
 const modelValue = defineModel({ type: Object as PropType<hotData>, default: {} });
 const dialog_visible = defineModel('visibleDialog', { type: Boolean, default: false });
+
 const hot_list = ref<hotData>({
    img: '',
-    hot: [],
+    img_height: 1,
+    img_width: 1,
+    data: [],
 });
 const hot_list_index = ref(0);
-watch(
-    () => modelValue.value,
-    (val) => {
-        hot_list.value = cloneDeep(val);
-    },
-    { immediate: true, deep: true }
-);

 //#region 左侧画布-----------------------------------------------start
 const imgBoxRef = ref<HTMLElement | null>(null);
+const imgRef = ref<HTMLElement | null>(null);
 const rect_start = ref<rectCoords>({ x: 0, y: 0, width: 0, height: 0 });
 const rect_end = ref<rectCoords>({ x: 0, y: 0, width: 0, height: 0 });
 const areaRef = ref<HTMLElement | null>(null);
@ -129,8 +128,8 @@ const end_drag = (event: MouseEvent) => {
    if (!imgBoxRef.value) return;
    init_drag_style.value = ``;
    if (rect_end.value.width > 16 && rect_end.value.height > 16) {
-        hot_list.value.hot.push({
-            name: '热区' + (hot_list.value.hot.length + 1),
+        hot_list.value.data.push({
+            name: '热区' + (hot_list.value.data.length + 1),
            link: {},
            drag_start: cloneDeep(rect_start.value),
            drag_end: cloneDeep(rect_end.value),
@ -138,6 +137,7 @@ const end_drag = (event: MouseEvent) => {
    }
    rect_end.value = { x: 0, y: 0, width: 0, height: 0 };
 };
+
 const area_box_point = ref({ x: 0, y: 0 });
 // area-box
 const dbl_drag_event = (item: hotListData, index: number) => {
@ -150,15 +150,15 @@ const start_drag_area_box = (index: number, event: MouseEvent) => {
    hot_list_index.value = index;
    event.stopPropagation();
    drag_box_bool.value = true;
-    let clone_drag_start = cloneDeep(hot_list.value.hot[hot_list_index.value].drag_start);
-    let clone_drag_end = cloneDeep(hot_list.value.hot[hot_list_index.value].drag_end);
+    let clone_drag_start = cloneDeep(hot_list.value.data[hot_list_index.value].drag_start);
+    let clone_drag_end = cloneDeep(hot_list.value.data[hot_list_index.value].drag_end);
    // 记录原始位置
    area_box_point.value = {
        x: clone_drag_start.x - event.clientX,
        y: clone_drag_start.y - event.clientY,
    };

-    // 当子元素拖拽方法触发后夫元素方法不触发
+    // 当子元素拖拽方法触发后父元素方法不触发
    document.onmousemove = (areaBoxEvent) => {
        areaBoxEvent.stopPropagation();
        if (drag_box_bool.value) {
@ -181,8 +181,8 @@ const start_drag_area_box = (index: number, event: MouseEvent) => {
            if (new_coordinate.y + Math.max(clone_drag_end.height, 1) > imgBoxRef.value.getBoundingClientRect().height) {
                new_coordinate.y = imgBoxRef.value.getBoundingClientRect().height - Math.max(clone_drag_end.height, 1) - 7;
            }
-            hot_list.value.hot[hot_list_index.value].drag_start.x = new_coordinate.x;
-            hot_list.value.hot[hot_list_index.value].drag_start.y = new_coordinate.y;
+            hot_list.value.data[hot_list_index.value].drag_start.x = new_coordinate.x;
+            hot_list.value.data[hot_list_index.value].drag_start.y = new_coordinate.y;
        }
    };
    document.onmouseup = (areaBoxEvent) => {
@ -195,8 +195,8 @@ const start_drag_btn = (index: number, event: MouseEvent) => {
    hot_list_index.value = index;
    event.stopPropagation();
    drag_box_scale_bool.value = true;
-    let clone_drag_start = hot_list.value.hot[hot_list_index.value].drag_start;
-    let clone_drag_end = hot_list.value.hot[hot_list_index.value].drag_end;
+    let clone_drag_start = hot_list.value.data[hot_list_index.value].drag_start;
+    let clone_drag_end = hot_list.value.data[hot_list_index.value].drag_end;
    document.onmousemove = (dragBtnEvent) => {
        dragBtnEvent.stopPropagation();
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
@ -204,7 +204,7 @@ const start_drag_btn = (index: number, event: MouseEvent) => {
            if (!imgBoxRef.value) return;
            clone_drag_end.x = dragBtnEvent.clientX - imgBoxRef.value.getBoundingClientRect().left;
            clone_drag_end.y = dragBtnEvent.clientY - imgBoxRef.value.getBoundingClientRect().top;
-            hot_list.value.hot[hot_list_index.value].drag_end = {
+            hot_list.value.data[hot_list_index.value].drag_end = {
                x: clone_drag_end.x,
                y: clone_drag_end.y,
                width: clone_drag_end.x - clone_drag_start.x > 0 ? clone_drag_end.x - clone_drag_start.x : 0,
@ -218,7 +218,7 @@ const start_drag_btn = (index: number, event: MouseEvent) => {
    };
 };
 const del_area_event = (index: number) => {
-    hot_list.value.hot.splice(index, 1);
+    hot_list.value.data.splice(index, 1);
 };
 const rect_style = computed(() => {
    return (start: rectCoords, end: rectCoords) => {
@ -229,7 +229,7 @@ const rect_style = computed(() => {

 //#region 右侧热区编辑-----------------------------------------------start
 const del_event = (index: number) => {
-    hot_list.value.hot.splice(index, 1);
+    hot_list.value.data.splice(index, 1);
 };
 //#endregion 右侧热区编辑-----------------------------------------------end

@ -243,8 +243,8 @@ const hot_close_event = () => {
    hot_dialog_visible.value = false;
 };
 const hot_confirm_event = () => {
-    hot_list.value.hot[hot_list_index.value].link = form.value.link;
-    hot_list.value.hot[hot_list_index.value].name = form.value.name;
+    hot_list.value.data[hot_list_index.value].link = form.value.link;
+    hot_list.value.data[hot_list_index.value].name = form.value.name;
    hot_close_event();
 };
 //#endregion 设置热区弹窗-----------------------------------------------end
@ -254,6 +254,7 @@ const hot_confirm_event = () => {
 const open_hot_event = () => {
    if (modelValue.value.img.length > 0) {
        dialog_visible.value = true;
+        hot_list.value = cloneDeep(modelValue.value);
    } else {
        ElMessage({
            type: 'warning',
@ -268,8 +269,30 @@ const close_event = () => {
 };
 // 确认回调
 const confirm_event = () => {
-    modelValue.value = hot_list.value;
-    close_event();
+    if (hot_list.value.data.length > 0) {
+        // 筛选数组hot中所有的link是否有空值，如果有则提示出来
+        if (is_obj_empty(hot_list.value.data)) {
+            ElMessage({
+                type: 'warning',
+                message: '请先设置热区',
+            });
+            return;
+        }
+        const no_link_list = hot_list.value.data.filter((item) => {
+            return is_obj_empty(item.link);
+        });
+        if (no_link_list.length > 0) {
+            ElMessage.error('请设置热区链接!');
+            return;
+        } else {
+            hot_list.value.img_height = imgRef.value?.clientHeight || 0;
+            hot_list.value.img_width = imgRef.value?.clientWidth || 0;
+            modelValue.value = cloneDeep(hot_list.value);
+            close_event();
+        }
+    } else {
+        ElMessage.error('至少选择一个热区!');
+    }
 };
 //#endregion 热区开启关闭确认取消回调 -----------------------------------------------end
 </script>
--- a/src/components/common/upload/index.vue
+++ b/src/components/common/upload/index.vue
@ -1,6 +1,6 @@
 <!-- 上传组件 -->
 <template>
-    <el-dialog v-model="dialogVisible" class="radius-lg" width="1168" append-to-body>
+    <el-dialog v-model="dialog_visible" class="radius-lg" width="1168" append-to-body>
        <template #header>
            <div class="title re">
                <el-radio-group v-model="upload_type" is-button @change="upload_type_change">
@ -13,11 +13,14 @@
        </template>
        <div class="upload-content pa-20 flex-row">
            <div class="left-content">
-                <el-input v-model="search_filter" class="mb-10" placeholder="请输入分类名称">
-                    <template #suffix>
-                        <icon name="search" size="18"></icon>
-                    </template>
-                </el-input>
+                <div class="flex-row align-c gap-10 mb-10">
+                    <el-input v-model="search_filter" placeholder="请输入分类名称">
+                        <template #suffix>
+                            <icon name="search" size="18"></icon>
+                        </template>
+                    </el-input>
+                    <icon name="add" size="18" @click="add_type"></icon>
+                </div>
                <el-scrollbar height="490px">
                    <el-tree ref="treeRef" class="filter-tree" :data="type_data" node-key="id" highlight-current :expand-on-click-node="false" :props="defaultProps" empty-text="无数据" default-expand-all :filter-node-method="filter_node" @node-click="tree_node_event" />
                </el-scrollbar>
@ -110,7 +113,7 @@
        </div>
        <template v-if="isCheckConfirm" #footer>
            <span class="dialog-footer">
-                <el-button class="plr-28 ptb-10" @click="dialogVisible = false">取消</el-button>
+                <el-button class="plr-28 ptb-10" @click="dialog_visible = false">取消</el-button>
                <el-button class="plr-28 ptb-10" type="primary" @click="confirm_event">确定</el-button>
            </span>
        </template>
@ -146,7 +149,7 @@
                        <div class="upload-btn-bottom-text">替换</div>
                    </template>
                </div>
-                <div v-if="limit !== modelValue.length" :class="'upload-btn upload-btn-style-' + styles" :style="'height:' + upload_size + ';width:' + upload_size + ';'" @click="dialogVisible = true">
+                <div v-if="limit !== modelValue.length" :class="'upload-btn upload-btn-style-' + styles" :style="'height:' + upload_size + ';width:' + upload_size + ';'" @click="dialog_visible = true">
                    <icon name="add" :size="Number(size) / 2 + ''" color="c"></icon>
                </div>
            </div>
@ -156,6 +159,7 @@
    <!-- 图片预览 -->
    <el-image-viewer v-if="preview_switch_img && upload_type == 'img'" :z-index="999999" :url-list="[preview_url]" :hide-on-click-modal="true" @close="preview_close"></el-image-viewer>
    <upload-model v-model="upload_model_visible" :type="upload_type" :exts="props.type == 'img' ? ext_img_name_list : props.type == 'video' ? ext_video_name_list : ext_file_name_list" @close="close_upload_model"></upload-model>
+    <!-- <el-dialog v-model="dialog_visible_" class="radius-lg" width="1168" append-to-body> </el-dialog> -->
 </template>
 <script lang="ts" setup>
 const app = getCurrentInstance();
@ -212,8 +216,8 @@ const modelValue = defineModel({ type: Array as PropType<uploadList[]>, default:

 const view_list_value = ref<uploadList[]>([]);
 // 弹窗显示
-// const dialogVisible = ref(props.visibleDialog);
-const dialogVisible = defineModel('visibleDialog', { type: Boolean, default: false });
+// const dialog_visible = ref(props.visibleDialog);
+const dialog_visible = defineModel('visibleDialog', { type: Boolean, default: false });

 // 文件后缀分类
 const ext_img_name_list = ref(['.png', '.jpg', '.jpeg', '.bmp', '.webp', '.gif']);
@ -321,7 +325,6 @@ const type_data: Tree[] = [
            {
                id: 2,
                label: '金刚区 1-1',
-                children: [{ id: 3, label: '金刚区 1-1-1' }],
            },
        ],
    },
@ -456,14 +459,16 @@ const search_data = ref({
 const get_list = () => {
    console.log('查询接口', search_data);
 };
+// 添加一级分类
+const add_type = () => {};
 // 左侧分类树结构节点点击事件
 const tree_node_event = (data: any) => {
-    search_filter.value = data.id;
+    // search_filter.value = data.id;
    get_list();
 };
 // 确认
 const confirm_event = () => {
-    dialogVisible.value = false;
+    dialog_visible.value = false;
    if (props.limit == 1) {
        modelValue.value = view_list_value.value;
    } else {
@ -493,7 +498,7 @@ const is_replace = ref(false);
 const replace_index = ref(-1);
 // 上传回显替换文件事件
 const replace_file_event = (index: number) => {
-    dialogVisible.value = true;
+    dialog_visible.value = true;
    is_replace.value = true;
    replace_index.value = index;
 };
@ -512,7 +517,7 @@ const handle_error = (index: number) => {
 // 关闭上传弹窗回调
 const close_upload_model = (data: any) => {
    if (props.isCheckConfirm) {
-        dialogVisible.value = false;
+        dialog_visible.value = false;
        if (data.web_image.length > 0) {
            const new_web_file = {
                url: data.web_image,
--- a/src/components/model-hot-zone/index.vue
+++ b/src/components/model-hot-zone/index.vue
@ -1,7 +1,8 @@
 <template>
-    <div :style="style_container">
-        <div class="video re" :style="style">
+    <div ref="containerRef" class="oh" :style="style_container">
+        <div ref="hotRef" class="hot re" :style="style">
            <image-empty v-model="img" class="w" error-img-style="width:10rem;height:10rem;" error-style="padding:15rem 0;"></image-empty>
+            <div v-for="(item, index) in hot_data" :key="index" class="hot_box" :style="rect_style(item.drag_start, item.drag_end)"></div>
        </div>
    </div>
 </template>
@ -13,24 +14,60 @@ const props = defineProps({
        default: () => ({}),
    },
 });
-
+const containerRef = ref<HTMLElement | null>(null);
+const hotRef = ref<HTMLElement | null>(null);
 const style = ref('');
 const style_container = ref('');
 const img = ref('');
+const hot_data = ref<hotListData[]>([]);
+// 热区组件图片的宽高
+const img_width = ref(1);
+const img_height = ref(1);
+// containerRef的宽高
+const w_scale1 = ref(1);
+const h_scale1 = ref(1);
+//  hotRef的宽高
+const w_scale2 = ref(1);
+const h_scale2 = ref(1);
 watch(
    props.value,
    (newVal, oldValue) => {
-        console.log(newVal);
        const new_content = newVal?.content || {};
        const new_style = newVal?.style || {};
        img.value = new_content?.img[0];
+        hot_data.value = new_content?.hot?.data || [];
+        img_width.value = new_content?.hot.img_width || 1;
+        img_height.value = new_content?.hot.img_height || 1;
        style_container.value = common_styles_computer(new_style.common_style);
+        nextTick(() => {
+            if (containerRef.value && hotRef.value) {
+                // 原图片的宽和高和实际展示的图片宽和高的比例
+                w_scale1.value = containerRef.value?.clientWidth / img_width.value;
+                h_scale1.value = containerRef.value?.clientHeight / img_height.value;
+
+                // 坐标缩小比例  containerRef的宽高除以hotRef的宽高
+                w_scale2.value = hotRef.value?.clientWidth / containerRef.value?.clientWidth;
+                h_scale2.value = hotRef.value?.clientHeight / containerRef.value?.clientHeight;
+            }
+        });
    },
    { immediate: true, deep: true }
 );
+
+const rect_style = computed(() => {
+    return (start: rectCoords, end: rectCoords) => {
+        return `left: ${start.x * w_scale1.value * w_scale2.value}px;top: ${start.y * h_scale1.value * h_scale2.value}px;width: ${Math.max(end.width * w_scale1.value * w_scale2.value, 1)}px;height: ${Math.max(end.height * h_scale1.value * h_scale2.value, 1)}px;display: flex;`;
+    };
+});
 </script>
 <style lang="scss" scoped>
-.video {
+.hot {
    min-height: 1rem;
+    .hot_box {
+        background: rgba(42, 148, 255, 0.25);
+        border: 1px dashed #8ec6ff;
+        position: absolute;
+        opacity: 0.6;
+    }
 }
 </style>
--- a/src/components/model-hot-zone/model-hot-zone-content.vue
+++ b/src/components/model-hot-zone/model-hot-zone-content.vue
@ -4,7 +4,7 @@
            <card-container class="common-content-height">
                <div class="mb-12">内容设置</div>
                <el-form-item label="上传照片">
-                    <upload v-model="form.img" :limit="1" is-tips tips-text="请先选择照片，图片宽度750px，高度不限" @update:model-value="update_hot_data"></upload>
+                    <upload v-model="form.img" :limit="1" is-tips tips-text="请先选择照片，图片宽度750px，高度不限" @update:model-value="update_upload_data"></upload>
                </el-form-item>
                <hot v-model="form.hot"></hot>
            </card-container>
@ -23,12 +23,13 @@ const props = defineProps({
 });
 const form = ref(props.value);

-const update_hot_data = (val: any) => {
+const update_upload_data = (val: any) => {
    if (val.length > 0) {
        form.value.hot.img = val[0].url;
    } else {
        form.value.hot.img = '';
    }
+    form.value.hot.data = [];
 };
 </script>
 <style lang="scss" scoped>
--- a/src/components/model-hot-zone/model-hot-zone-styles.vue
+++ b/src/components/model-hot-zone/model-hot-zone-styles.vue
@ -13,9 +13,9 @@ const props = defineProps({
    },
 });
 // 默认值
-let form = reactive(props.value);
+let form = ref(props.value);
 const common_styles_update = (val: Object) => {
-    form.common_style = val;
+    form.value.common_style = val;
 };
 </script>
 <style lang="scss" scoped>
--- a/src/layout/components/main/default/hot-zone.ts
+++ b/src/layout/components/main/default/hot-zone.ts
@ -15,8 +15,10 @@ const defaultHotZone: DefaultHotZone = {
        img: [],
        hot: {
            // /src/assets/images/components/model-user-info/avatar.png
+            img_height: 1,
+            img_width: 1,
            img: '',
-            hot: [],
+            data: [],
        },
    },
    style: {
--- a/src/layout/components/main/index.vue
+++ b/src/layout/components/main/index.vue
@ -186,7 +186,6 @@ watch(
 // 父组件调用的方法
 const emits = defineEmits(['rightUpdate']);
 const activeNames = reactive(['1', '2']);
-console.log(import.meta.url);
 const components = reactive([
    {
        title: '基础组件',
@ -602,11 +601,11 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
            }

            .model-drag {
+                overflow-y: auto;
+                max-height: 75.5rem;
                &::-webkit-scrollbar {
                    display: none;
                }
-                overflow-y: auto;
-                max-height: 75.5rem;
                .model-wall {
                    width: 39rem;
                    background: #f5f5f5;
--- a/src/layout/components/settings/index.vue
+++ b/src/layout/components/settings/index.vue
@ -63,7 +63,7 @@
            <template v-else-if="value.key == 'img-magic'">
                <model-img-magic-setting :type="radio" :value="value.com_data"></model-img-magic-setting>
            </template>
-            <!-- 自定义 -->
+            <!-- 热区 -->
            <template v-else-if="value.key == 'hot-zone'">
                <model-hot-zone-setting :type="radio" :value="value.com_data"></model-hot-zone-setting>
            </template>
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@ -568,282 +568,3 @@ declare module 'vue' {
    readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
  }
 }
-declare module '@vue/runtime-core' {
-  interface ComponentCustomProperties {
-    readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
-    readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
-    readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
-    readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
-    readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
-    readonly computed: UnwrapRef<typeof import('vue')['computed']>
-    readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
-    readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
-    readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
-    readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
-    readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
-    readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
-    readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
-    readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
-    readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
-    readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
-    readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
-    readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
-    readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
-    readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
-    readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
-    readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
-    readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
-    readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
-    readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
-    readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
-    readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
-    readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
-    readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
-    readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
-    readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
-    readonly h: UnwrapRef<typeof import('vue')['h']>
-    readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
-    readonly inject: UnwrapRef<typeof import('vue')['inject']>
-    readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
-    readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
-    readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
-    readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
-    readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
-    readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
-    readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
-    readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
-    readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
-    readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
-    readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
-    readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
-    readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
-    readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
-    readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
-    readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
-    readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']>
-    readonly onLongPress: UnwrapRef<typeof import('@vueuse/core')['onLongPress']>
-    readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
-    readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
-    readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
-    readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
-    readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
-    readonly onStartTyping: UnwrapRef<typeof import('@vueuse/core')['onStartTyping']>
-    readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
-    readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
-    readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
-    readonly provide: UnwrapRef<typeof import('vue')['provide']>
-    readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
-    readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
-    readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
-    readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
-    readonly reactiveComputed: UnwrapRef<typeof import('@vueuse/core')['reactiveComputed']>
-    readonly reactiveOmit: UnwrapRef<typeof import('@vueuse/core')['reactiveOmit']>
-    readonly reactivePick: UnwrapRef<typeof import('@vueuse/core')['reactivePick']>
-    readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
-    readonly ref: UnwrapRef<typeof import('vue')['ref']>
-    readonly refAutoReset: UnwrapRef<typeof import('@vueuse/core')['refAutoReset']>
-    readonly refDebounced: UnwrapRef<typeof import('@vueuse/core')['refDebounced']>
-    readonly refDefault: UnwrapRef<typeof import('@vueuse/core')['refDefault']>
-    readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
-    readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
-    readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
-    readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
-    readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
-    readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
-    readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
-    readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
-    readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']>
-    readonly syncRefs: UnwrapRef<typeof import('@vueuse/core')['syncRefs']>
-    readonly templateRef: UnwrapRef<typeof import('@vueuse/core')['templateRef']>
-    readonly throttledRef: UnwrapRef<typeof import('@vueuse/core')['throttledRef']>
-    readonly throttledWatch: UnwrapRef<typeof import('@vueuse/core')['throttledWatch']>
-    readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
-    readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
-    readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
-    readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
-    readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
-    readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
-    readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
-    readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
-    readonly tryOnMounted: UnwrapRef<typeof import('@vueuse/core')['tryOnMounted']>
-    readonly tryOnScopeDispose: UnwrapRef<typeof import('@vueuse/core')['tryOnScopeDispose']>
-    readonly tryOnUnmounted: UnwrapRef<typeof import('@vueuse/core')['tryOnUnmounted']>
-    readonly unref: UnwrapRef<typeof import('vue')['unref']>
-    readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']>
-    readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
-    readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
-    readonly useAnimate: UnwrapRef<typeof import('@vueuse/core')['useAnimate']>
-    readonly useArrayDifference: UnwrapRef<typeof import('@vueuse/core')['useArrayDifference']>
-    readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
-    readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
-    readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']>
-    readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']>
-    readonly useArrayFindLast: UnwrapRef<typeof import('@vueuse/core')['useArrayFindLast']>
-    readonly useArrayIncludes: UnwrapRef<typeof import('@vueuse/core')['useArrayIncludes']>
-    readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']>
-    readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
-    readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
-    readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
-    readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
-    readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
-    readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
-    readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
-    readonly useBase64: UnwrapRef<typeof import('@vueuse/core')['useBase64']>
-    readonly useBattery: UnwrapRef<typeof import('@vueuse/core')['useBattery']>
-    readonly useBluetooth: UnwrapRef<typeof import('@vueuse/core')['useBluetooth']>
-    readonly useBreakpoints: UnwrapRef<typeof import('@vueuse/core')['useBreakpoints']>
-    readonly useBroadcastChannel: UnwrapRef<typeof import('@vueuse/core')['useBroadcastChannel']>
-    readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
-    readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
-    readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
-    readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
-    readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
-    readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
-    readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
-    readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
-    readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
-    readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
-    readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
-    readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']>
-    readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']>
-    readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']>
-    readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
-    readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']>
-    readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']>
-    readonly useDebouncedRefHistory: UnwrapRef<typeof import('@vueuse/core')['useDebouncedRefHistory']>
-    readonly useDeviceMotion: UnwrapRef<typeof import('@vueuse/core')['useDeviceMotion']>
-    readonly useDeviceOrientation: UnwrapRef<typeof import('@vueuse/core')['useDeviceOrientation']>
-    readonly useDevicePixelRatio: UnwrapRef<typeof import('@vueuse/core')['useDevicePixelRatio']>
-    readonly useDevicesList: UnwrapRef<typeof import('@vueuse/core')['useDevicesList']>
-    readonly useDisplayMedia: UnwrapRef<typeof import('@vueuse/core')['useDisplayMedia']>
-    readonly useDocumentVisibility: UnwrapRef<typeof import('@vueuse/core')['useDocumentVisibility']>
-    readonly useDraggable: UnwrapRef<typeof import('@vueuse/core')['useDraggable']>
-    readonly useDropZone: UnwrapRef<typeof import('@vueuse/core')['useDropZone']>
-    readonly useElementBounding: UnwrapRef<typeof import('@vueuse/core')['useElementBounding']>
-    readonly useElementByPoint: UnwrapRef<typeof import('@vueuse/core')['useElementByPoint']>
-    readonly useElementHover: UnwrapRef<typeof import('@vueuse/core')['useElementHover']>
-    readonly useElementSize: UnwrapRef<typeof import('@vueuse/core')['useElementSize']>
-    readonly useElementVisibility: UnwrapRef<typeof import('@vueuse/core')['useElementVisibility']>
-    readonly useEventBus: UnwrapRef<typeof import('@vueuse/core')['useEventBus']>
-    readonly useEventListener: UnwrapRef<typeof import('@vueuse/core')['useEventListener']>
-    readonly useEventSource: UnwrapRef<typeof import('@vueuse/core')['useEventSource']>
-    readonly useEyeDropper: UnwrapRef<typeof import('@vueuse/core')['useEyeDropper']>
-    readonly useFavicon: UnwrapRef<typeof import('@vueuse/core')['useFavicon']>
-    readonly useFetch: UnwrapRef<typeof import('@vueuse/core')['useFetch']>
-    readonly useFileDialog: UnwrapRef<typeof import('@vueuse/core')['useFileDialog']>
-    readonly useFileSystemAccess: UnwrapRef<typeof import('@vueuse/core')['useFileSystemAccess']>
-    readonly useFocus: UnwrapRef<typeof import('@vueuse/core')['useFocus']>
-    readonly useFocusWithin: UnwrapRef<typeof import('@vueuse/core')['useFocusWithin']>
-    readonly useFps: UnwrapRef<typeof import('@vueuse/core')['useFps']>
-    readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
-    readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
-    readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
-    readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
-    readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
-    readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>
-    readonly useIntersectionObserver: UnwrapRef<typeof import('@vueuse/core')['useIntersectionObserver']>
-    readonly useInterval: UnwrapRef<typeof import('@vueuse/core')['useInterval']>
-    readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
-    readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
-    readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
-    readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
-    readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
-    readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
-    readonly useMediaControls: UnwrapRef<typeof import('@vueuse/core')['useMediaControls']>
-    readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']>
-    readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
-    readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
-    readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
-    readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
-    readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
-    readonly useMousePressed: UnwrapRef<typeof import('@vueuse/core')['useMousePressed']>
-    readonly useMutationObserver: UnwrapRef<typeof import('@vueuse/core')['useMutationObserver']>
-    readonly useNavigatorLanguage: UnwrapRef<typeof import('@vueuse/core')['useNavigatorLanguage']>
-    readonly useNetwork: UnwrapRef<typeof import('@vueuse/core')['useNetwork']>
-    readonly useNow: UnwrapRef<typeof import('@vueuse/core')['useNow']>
-    readonly useObjectUrl: UnwrapRef<typeof import('@vueuse/core')['useObjectUrl']>
-    readonly useOffsetPagination: UnwrapRef<typeof import('@vueuse/core')['useOffsetPagination']>
-    readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
-    readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
-    readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
-    readonly useParentElement: UnwrapRef<typeof import('@vueuse/core')['useParentElement']>
-    readonly usePerformanceObserver: UnwrapRef<typeof import('@vueuse/core')['usePerformanceObserver']>
-    readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
-    readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
-    readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
-    readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
-    readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']>
-    readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']>
-    readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
-    readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
-    readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
-    readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
-    readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
-    readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
-    readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
-    readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
-    readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
-    readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
-    readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
-    readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
-    readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
-    readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
-    readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
-    readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
-    readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
-    readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
-    readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
-    readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
-    readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
-    readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
-    readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
-    readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
-    readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
-    readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
-    readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>
-    readonly useTextareaAutosize: UnwrapRef<typeof import('@vueuse/core')['useTextareaAutosize']>
-    readonly useThrottle: UnwrapRef<typeof import('@vueuse/core')['useThrottle']>
-    readonly useThrottleFn: UnwrapRef<typeof import('@vueuse/core')['useThrottleFn']>
-    readonly useThrottledRefHistory: UnwrapRef<typeof import('@vueuse/core')['useThrottledRefHistory']>
-    readonly useTimeAgo: UnwrapRef<typeof import('@vueuse/core')['useTimeAgo']>
-    readonly useTimeout: UnwrapRef<typeof import('@vueuse/core')['useTimeout']>
-    readonly useTimeoutFn: UnwrapRef<typeof import('@vueuse/core')['useTimeoutFn']>
-    readonly useTimeoutPoll: UnwrapRef<typeof import('@vueuse/core')['useTimeoutPoll']>
-    readonly useTimestamp: UnwrapRef<typeof import('@vueuse/core')['useTimestamp']>
-    readonly useTitle: UnwrapRef<typeof import('@vueuse/core')['useTitle']>
-    readonly useToNumber: UnwrapRef<typeof import('@vueuse/core')['useToNumber']>
-    readonly useToString: UnwrapRef<typeof import('@vueuse/core')['useToString']>
-    readonly useToggle: UnwrapRef<typeof import('@vueuse/core')['useToggle']>
-    readonly useTransition: UnwrapRef<typeof import('@vueuse/core')['useTransition']>
-    readonly useUrlSearchParams: UnwrapRef<typeof import('@vueuse/core')['useUrlSearchParams']>
-    readonly useUserMedia: UnwrapRef<typeof import('@vueuse/core')['useUserMedia']>
-    readonly useVModel: UnwrapRef<typeof import('@vueuse/core')['useVModel']>
-    readonly useVModels: UnwrapRef<typeof import('@vueuse/core')['useVModels']>
-    readonly useVibrate: UnwrapRef<typeof import('@vueuse/core')['useVibrate']>
-    readonly useVirtualList: UnwrapRef<typeof import('@vueuse/core')['useVirtualList']>
-    readonly useWakeLock: UnwrapRef<typeof import('@vueuse/core')['useWakeLock']>
-    readonly useWebNotification: UnwrapRef<typeof import('@vueuse/core')['useWebNotification']>
-    readonly useWebSocket: UnwrapRef<typeof import('@vueuse/core')['useWebSocket']>
-    readonly useWebWorker: UnwrapRef<typeof import('@vueuse/core')['useWebWorker']>
-    readonly useWebWorkerFn: UnwrapRef<typeof import('@vueuse/core')['useWebWorkerFn']>
-    readonly useWindowFocus: UnwrapRef<typeof import('@vueuse/core')['useWindowFocus']>
-    readonly useWindowScroll: UnwrapRef<typeof import('@vueuse/core')['useWindowScroll']>
-    readonly useWindowSize: UnwrapRef<typeof import('@vueuse/core')['useWindowSize']>
-    readonly watch: UnwrapRef<typeof import('vue')['watch']>
-    readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
-    readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>
-    readonly watchDebounced: UnwrapRef<typeof import('@vueuse/core')['watchDebounced']>
-    readonly watchDeep: UnwrapRef<typeof import('@vueuse/core')['watchDeep']>
-    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
-    readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']>
-    readonly watchImmediate: UnwrapRef<typeof import('@vueuse/core')['watchImmediate']>
-    readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']>
-    readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']>
-    readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
-    readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
-    readonly watchThrottled: UnwrapRef<typeof import('@vueuse/core')['watchThrottled']>
-    readonly watchTriggerable: UnwrapRef<typeof import('@vueuse/core')['watchTriggerable']>
-    readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']>
-    readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
-  }
-}
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@ -102,7 +102,9 @@ declare global {
     */
    type hotData = {
        img: string;
-        hot: hotListData[];
+        img_width: number;
+        img_height: number;
+        data: hotListData[];
    };
    type rectCoords = {
        x: number;
--- a/yarn-error.log
+++ b/yarn-error.log