feat: add image component with adjustable aspect ratio

webui/src/components/ab-image.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { ErrorPicture } from '@icon-park/vue-next';
+
+withDefaults(
+  defineProps<{
+    src?: string;
+    aspectRatio?: number;
+    objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+  }>(),
+  {
+    objectFit: 'cover',
+  }
+);
+</script>
+
+<template>
+  <div rel>
+    <template v-if="aspectRatio">
+      <div
+        w-full
+        :style="{ paddingBottom: `calc(${1 / aspectRatio} * 100%)` }"
+      ></div>
+
+      <img
+        v-if="src"
+        :src="src"
+        alt="poster"
+        abs
+        top-0
+        left-0
+        :style="{ objectFit }"
+        wh-full
+      />
+    </template>
+
+    <template v-else>
+      <img v-if="src" :src="src" alt="poster" :style="{ objectFit }" wh-full />
+
+      <div v-else wh-full f-cer border="1 white">
+        <ErrorPicture theme="outline" size="24" fill="#333" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scope></style>

webui/types/dts/components.d.ts

@@ -19,6 +19,7 @@ declare module '@vue/runtime-core' {
     AbContainer: typeof import('./../../src/components/ab-container.vue')['default']
     AbEditRule: typeof import('./../../src/components/ab-edit-rule.vue')['default']
     AbFoldPanel: typeof import('./../../src/components/ab-fold-panel.vue')['default']
+    AbImage: typeof import('./../../src/components/ab-image.vue')['default']
     AbLabel: typeof import('./../../src/components/ab-label.vue')['default']
     AbPageTitle: typeof import('./../../src/components/basic/ab-page-title.vue')['default']
     AbPopup: typeof import('./../../src/components/ab-popup.vue')['default']