From fa3d5a158acdbbdc7f30f80a6b1233fa9759466a Mon Sep 17 00:00:00 2001
From: Rewrite0 <Rewrite0.me@gmail.com>
Date: Mon, 29 Jul 2024 17:31:30 +0800
Subject: [PATCH] feat: add image component with adjustable aspect ratio

---
 webui/src/components/ab-image.vue | 46 +++++++++++++++++++++++++++++++
 webui/types/dts/components.d.ts   |  1 +
 2 files changed, 47 insertions(+)
 create mode 100644 webui/src/components/ab-image.vue

diff --git a/webui/src/components/ab-image.vue b/webui/src/components/ab-image.vue
new file mode 100644
index 00000000..495d9b4b
--- /dev/null
+++ b/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>
diff --git a/webui/types/dts/components.d.ts b/webui/types/dts/components.d.ts
index 1c967c1a..b3938435 100644
--- a/webui/types/dts/components.d.ts
+++ b/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']