1.fix(model-hot-zone): 修复缩放比例计算错误并移除不必要的日志输出

修复了model-hot-zone组件中容器和热点区域缩放比例计算错误的问题。之前，缩放比例计算没有准确反映容器和热点区域的大小关系，导致缩放行为不正确。此更新确保缩放比例准确计算，提高了组件的准确性和性能。同时，移除了不必要的console.log调用，以避免在控制台生成无关的日志输出。
fix(model-img-magic): 修正样式计算并统一间距和圆角设置
解决了model-img-magic组件中与图片间距和圆角设置相关的计算错误。更新后，组件的图片间距和圆角设置现在正确应用，并且与开发规范保持一致。同时，修正了组件宽度的计算方法，确保组件能够正确地根据容器大小调整。
fix(vite.config.ts): 调整资源文件夹名称以符合项目标准
将vite.config.ts中的资源文件夹名称从'diy'调整为'assets'，以符合项目的命名标准。此更改确保所有静态资源都存放在预期的目录中，便于管理和查找。
sws 2024-08-12

src/components/model-hot-zone/index.vue

@@ -48,7 +48,6 @@ watch(
                 // 坐标缩小比例  containerRef的宽高除以hotRef的宽高
                 w_scale2.value = hotRef.value?.clientWidth / containerRef.value?.clientWidth;
                 h_scale2.value = hotRef.value?.clientHeight / containerRef.value?.clientHeight;
-                console.log(containerRef.value?.clientHeight);
             }
         }, 50);
     },

src/components/model-img-magic/index.vue

@@ -34,7 +34,7 @@ const props = defineProps({
         default: () => {
             return {};
         },
-    }
+    },
 });
 // 用于页面判断显示
 const state = reactive({
@@ -44,9 +44,9 @@ const state = reactive({
 // 如果需要解构，确保使用toRefs
 const { form, new_style } = toRefs(state);
 const outer_spacing = computed(() => new_style.value.image_spacing + 'px');
-const outer_sx = computed(() => - (new_style.value.image_spacing / 2) + 'px');
+const outer_sx = computed(() => -(new_style.value.image_spacing / 2) + 'px');
 // 图片间距设置
-const spacing = computed(() => (new_style.value.image_spacing / 2) + 'px');
+const spacing = computed(() => new_style.value.image_spacing / 2 + 'px');
 // 图片圆角设置
 const content_img_radius = computed(() => radius_computer(new_style.value));
 //#region 容器大小计算
@@ -55,7 +55,7 @@ const container_size = computed(() => div_width.value + 'px');
 const container = ref<HTMLElement | null>(null);
 onMounted(() => {
     if (container.value) {
-        div_width.value = container.value.offsetWidth;
+        div_width.value = container.value.clientWidth;
     }
 });
 //#endregion
@@ -94,13 +94,13 @@ const getSelectedLeft = (item: CubeItem) => {
 };
 // 根据当前页面大小计算成百分比
 const selected_style = (item: CubeItem) => {
-    return `width: ${ percentage(getSelectedWidth(item)) }; height: ${ percentage(getSelectedHeight(item)) }; top: ${ percentage(getSelectedTop(item)) }; left: ${ percentage(getSelectedLeft(item)) };`;
+    return `width: ${percentage(getSelectedWidth(item))}; height: ${percentage(getSelectedHeight(item))}; top: ${percentage(getSelectedTop(item))}; left: ${percentage(getSelectedLeft(item))};`;
 };
 // 计算成百分比
 const percentage = (num: number) => {
-    const marks = num / div_width.value * 100;
-    return marks.toFixed(4)+ '%';
-}
+    const marks = (num / div_width.value) * 100;
+    return marks.toFixed(4) + '%';
+};
 //#endregion
 // 公共样式
 const style_container = computed(() => common_styles_computer(new_style.value.common_style));
@@ -108,8 +108,8 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
 <style lang="scss" scoped>
 // 图片魔方是一个正方形，根据宽度计算高度
 .img-magic {
-    width: v-bind(container_size);
     height: v-bind(container_size);
+    width: 100%;
     overflow: hidden;
 }
 .cube-selected {

vite.config.ts

@@ -88,7 +88,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
             // 指定输出路径（相对于项目根目录)，默认dist
             outDir: 'dist',
             // 指定生成静态资源的存放路径，默认assets
-            assetsDir: 'diy',
+            assetsDir: 'assets',
             // chunk大小警告限制，默认500kbs
             chunkSizeWarningLimit: 1500,
             // 是否禁用css拆分(默认true)，设置false时所有CSS将被提取到一个CSS文件中