Revert "feat: 图片占位方式更新，采用 css 原生属性，不再使用 js"

This reverts commit f46c352.

Author: MingcongBai

src/pages/afterglow/AfterglowIndex.vue

@@ -4,9 +4,10 @@ import CategorySecond from '../../components/CategorySecond.vue';
 import AppH2 from '../../components/AppH2.vue';
 import { useRoute } from 'vue-router';
 import highlightElement from '../../utils/animation';
+import { useHighBrightnessControllerStore } from '../../stores/miscellaneous';
 import AppSupport from '../../components/AppSupport.vue';
 import AccordionNavigation from '../../components/AccordionNavigation.vue';
-import { useHighlightWatch } from '../../utils/utils';
+import { onImgLoad, useHighlightWatch, useSeizeSeat } from '../../utils/utils';
 
 const route = useRoute();
 
@@ -55,6 +56,8 @@ const docList = reactive([
     path: '/afterglow/isa'
   }
 ]);
+
+const [observer, imgHeights] = useSeizeSeat('bgImg', 1.3333);
 </script>
 
 <template>
@@ -69,11 +72,11 @@ const docList = reactive([
       <div>
         <AccordionNavigation :navigation-list="navigationList" />
       </div>
-      <div ref="bgImg">
+      <div ref="bgImg" class="bg-img-height">
         <img
-         
+          @load="onImgLoad(observer, imgHeights[0])"
           src="/assets/afterglow/afterglow.zh-cn.jpg"
-          class="w-full imgScale1 mt-2"
+          class="w-full h-auto mt-2"
           alt="" />
       </div>
     </div>
@@ -105,8 +108,8 @@ const docList = reactive([
 </template>
 
 <style scoped>
-.imgScale1 {
-  aspect-ratio: 4/3;
+.bg-img-height {
+  height: v-bind('imgHeights[0].value');
 }
 </style>
 ./components/Header.vue

src/pages/aosc-os/AoscIndex.vue

@@ -6,7 +6,7 @@ import { useRoute } from 'vue-router';
 import highlightElement from '../../utils/animation';
 import AppSupport from '../../components/AppSupport.vue';
 import AccordionNavigation from '../../components/AccordionNavigation.vue';
-import { useHighlightWatch } from '../../utils/utils';
+import { onImgLoad, useHighlightWatch, useSeizeSeat } from '../../utils/utils';
 
 const route = useRoute();
 
@@ -64,6 +64,8 @@ const docList = reactive([
     url: '/'
   } */
 ]);
+
+const [observer, imgHeights] = useSeizeSeat('bgImg', 1.6006);
 </script>
 
 <template>
@@ -79,10 +81,11 @@ const docList = reactive([
       <div>
         <AccordionNavigation :navigation-list="navigationList" />
       </div>
-      <div ref="bgImg">
+      <div ref="bgImg" class="bg-img-height">
         <img
+          @load="onImgLoad(observer, imgHeights[0])"
           src="/assets/aosc-os/aosc-os.zh-cn.jpg"
-          class="w-full imgScale1 mt-2"
+          class="w-full h-auto mt-2"
           alt="" />
       </div>
     </div>
@@ -129,8 +132,8 @@ const docList = reactive([
 </template>
 
 <style scoped>
-.imgScale1 {
-  aspect-ratio: 8/5;
+.bg-img-height {
+  height: v-bind('imgHeights[0].value');
 }
 </style>
 ./components/Header.vue

src/pages/index/components/ContentMain.vue

@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue';
 import CategorySecond from '/src/components/CategorySecond.vue';
 import NewsCategoryList from '/src/pages/news/components/NewsCategoryList.vue';
-import { requestGetJson } from '../../../utils/utils';
+import { onImgLoad, requestGetJson, useSeizeSeat } from '../../../utils/utils';
 import { ElIcon } from 'element-plus';
 
 /**
@@ -50,14 +50,20 @@ const zhuanlanList = reactive([
       '我社一向以友好负责的支持工作著称，尊重用户的时间与精力是我们的工作准则。社区也是信息共享的强大后盾——在各社区聊天群组，我们时刻准备着为您排忧解难。'
   }
 ]);
+
+const [ observer, imgHeights ] = useSeizeSeat('bgImg', 1.4545);
 </script>
 
 <template>
   <div class="w-[62.5%] bg-content-main-bg p-0">
-    <app-link
+    <a
+      ref="bgImg"
       href="/download#aosc-os-download"
-      class="w-full flex">
-      <el-image class="w-full imgScale1" src="/assets/jumbotron/main1.svg">
+      class="bg-img-height w-full flex">
+      <el-image
+        @load="onImgLoad(observer, imgHeights[0])"
+        class="w-full"
+        src="/assets/jumbotron/main1.svg">
         <template #error>
           <div class="image-slot cursor-pointer">
             <el-icon>
@@ -66,7 +72,7 @@ const zhuanlanList = reactive([
           </div>
         </template>
       </el-image>
-    </app-link>
+    </a>
     <!-- 资讯要点 -->
     <div>
       <category-second title="资讯要点" />
@@ -114,8 +120,8 @@ const zhuanlanList = reactive([
 </template>
 
 <style scoped>
-.imgScale1 {
-  aspect-ratio: 16/11;
+.bg-img-height {
+  height: v-bind('imgHeights[0].value');
 }
 </style>
 ../../../components/CategorySecond.vue

src/pages/index/components/RightBar.vue

@@ -2,6 +2,7 @@
 import { reactive } from 'vue';
 import CategorySecond from '/src/components/CategorySecond.vue';
 import AppLink from '../../../components/AppLink.vue';
+import { onImgLoad, useSeizeSeat } from '../../../utils/utils';
 
 const distroList = reactive([
   {
@@ -57,20 +58,25 @@ const commonLinkList = reactive([
     title: '赞助硬件或服务'
   }
 ]);
+
+const [observer1, buffer] = useSeizeSeat('bgImg1', 1.7455);
+const [observer2, imgHeights] = useSeizeSeat('bgImg2', 1.7455, buffer);
 </script>
 
 <template>
   <div class="bg-right-bar-bg w-[37.5%] flex flex-col">
     <a href="/aosc-os/right-for-me" ref="bgImg1" class="bg-img-height1">
       <img
+        @load="onImgLoad(observer1, imgHeights[0])"
         ref="bgImg"
         src="/assets/jumbotron/minor1.svg"
-        class="w-full cursor-pointer imgScale1" />
+        class="w-full cursor-pointer" />
     </a>
     <a href="https://bbs.aosc.io/" ref="bgImg2" class="bg-img-height2">
       <img
+        @load="onImgLoad(observer2, imgHeights[1])"
         src="/assets/jumbotron/minor2.svg"
-        class="w-full cursor-pointer imgScale1"
+        class="w-full cursor-pointer"
         href="https://bbs.aosc.io/" />
     </a>
     <div class="flex flex-col flex-grow">
@@ -129,7 +135,10 @@ const commonLinkList = reactive([
 </template>
 
 <style scoped>
-.imgScale1 {
-  aspect-ratio: 96/55;
+.bg-img-height1 {
+  height: v-bind('imgHeights[0].value');
+}
+.bg-img-height2 {
+  height: v-bind('imgHeights[1].value');
 }
 </style>

src/pages/liblol/LiblolIndex.vue

@@ -3,6 +3,7 @@ import { reactive } from 'vue';
 import CategorySecond from '../../components/CategorySecond.vue';
 import AppSupport from '../../components/AppSupport.vue';
 import AccordionNavigation from '../../components/AccordionNavigation.vue';
+import { onImgLoad, useSeizeSeat } from '../../utils/utils';
 
 const navigationList = [
   {
@@ -49,6 +50,8 @@ const docList = reactive([
     url: 'https://liblol.aosc.io/docs/dev/design/'
   }
 ]);
+
+const [observer, imgHeights] = useSeizeSeat('bgImg', 2.8);
 </script>
 
 <template>
@@ -66,10 +69,13 @@ const docList = reactive([
       <div>
         <AccordionNavigation :navigation-list="navigationList" />
       </div>
-      <div ref="bgImg" class="bg-img-height">
+      <div
+        ref="bgImg"
+        class="bg-img-height">
         <img
+          @load="onImgLoad(observer, imgHeights[0])"
           src="/assets/liblol/liblol.svg"
-          class="w-full mt-2 imgScale1"
+          class="w-full h-auto mt-2"
           alt="" />
       </div>
     </div>
@@ -79,8 +85,8 @@ const docList = reactive([
 </template>
 
 <style scoped>
-.imgScale1 {
-  aspect-ratio: 14/5;
+.bg-img-height {
+  height: v-bind('imgHeights[0].value');
 }
 </style>
 ./components/Header.vue

src/pages/oma/OmaIndex.vue

@@ -3,6 +3,7 @@ import { reactive } from 'vue';
 import CategorySecond from '/src/components/CategorySecond.vue';
 import AppLink from '../../components/AppLink.vue';
 import AccordionNavigation from '../../components/AccordionNavigation.vue';
+import { onImgLoad, useSeizeSeat } from '../../utils/utils';
 const navigationList = [
   {
     title: '代码仓库',
@@ -33,6 +34,8 @@ const _docList = reactive([
     url: '#'
   }
 ]);
+
+const [observer, imgHeights] = useSeizeSeat('bgImg', 1.5167);
 </script>
 
 <template>
@@ -78,8 +81,12 @@ const _docList = reactive([
       <div>
         <AccordionNavigation :navigation-list="navigationList" />
       </div>
-      <div ref="bgImg">
-        <img src="/assets/oma/oma.png" class="w-full imgScale1 mt-2" alt=""
+      <div ref="bgImg" class="bg-img-height">
+        <img
+          @load="onImgLoad(observer, imgHeights[0])"
+          src="/assets/oma/oma.png"
+          class="w-full h-auto mt-2"
+          alt=""
       /></div>
     </div>
 
@@ -90,8 +97,8 @@ const _docList = reactive([
 </template>
 
 <style scoped>
-.imgScale1 {
-  aspect-ratio: 3/2; /* 91/60 近似值 */
+.bg-img-height {
+  height: v-bind('imgHeights[0].value');
 }
 </style>
 ./components/Header.vue

src/utils/utils.js

@@ -124,6 +124,64 @@ export const BToMB = (byteSize, fixed = 3) => {
   return (byteSize / 1024 / 1024).toFixed(fixed);
 };
 
+export const deObserver = (observers) => {
+  if (Array.isArray(observers)) {
+    observers.forEach((observer) => {
+      observer.disconnect();
+    });
+  } else if (observers) {
+    observers.disconnect();
+  }
+};
+
+export const imgPreOccupiedSpace = (
+  anchorImg,
+  imgHeight,
+  proportion,
+  fixedHeight
+) => {
+  const observer = new ResizeObserver(() => {
+    imgHeight.value = fixedHeight
+      ? fixedHeight
+      : (anchorImg.value.clientWidth / proportion).toFixed(2) + 'px';
+  });
+  observer.observe(anchorImg.value);
+  return observer;
+};
+
+export const onImgLoad = (observers, imgHeight) => {
+  deObserver(toValue(observers));
+  imgHeight.value = 'auto';
+};
+
+export const useSeizeSeat = (refName, proportion, imgHeights, fixedHeight) => {
+  const newHeights = ref(0);
+  if (imgHeights !== undefined) {
+    imgHeights.value.push(newHeights);
+  } else {
+    imgHeights = shallowRef([newHeights]);
+  }
+  const img = useTemplateRef(refName);
+
+  // 此处异步执行，如果不使用ref包裹返回的observer为null
+  let observer = ref();
+
+  onMounted(() => {
+    observer.value = imgPreOccupiedSpace(
+      img,
+      newHeights,
+      proportion,
+      fixedHeight
+    );
+  });
+
+  onUnmounted(() => {
+    // 在组件销毁前取消观察
+    deObserver(observer.value);
+  });
+  return [observer, imgHeights];
+};
+
 export const useHighlightWatch = (switchHash) => {
   const highBrightnessControllerStore = useHighBrightnessControllerStore();
   const route = useRoute();