refactor(deps): migrate to nuxt v4

2026-02-10 00:31:04 +08:00
parent f1b9cea060
commit 880b85f75d
88 changed files with 80 additions and 60 deletions
--- a/app/components/aigc/RatioSelector.vue
+++ b/app/components/aigc/RatioSelector.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  ratios: {
+    type: Array as PropType<
+      {
+        ratio: string
+        label?: string
+        value: string | number
+      }[]
+    >,
+    required: true,
+  },
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+})
+const emit = defineEmits(['update:modelValue'])
+
+const selected = ref<string | number>('')
+
+onMounted(() => {
+  if (props.modelValue) {
+    handle_select(props.modelValue)
+  } else {
+    handle_select(props.ratios[0].value)
+  }
+})
+
+const handle_select = (value: string | number) => {
+  selected.value = value
+  emit('update:modelValue', value)
+}
+
+const getRatio = (ratio: string) => {
+  const [w, h] = ratio.split(/[:\/]/).map(Number)
+  return {
+    w: w,
+    h: h,
+  }
+}
+
+const getShapeSize = (r: { w: number; h: number }, size: number) => {
+  const ratio = r.w / r.h
+  if (r.w > r.h) {
+    return {
+      w: size,
+      h: size / ratio,
+    }
+  } else {
+    return {
+      w: size * ratio,
+      h: size,
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="grid grid-cols-4 gap-2">
+    <div
+      v-for="(ratio, k) in ratios"
+      :key="ratio.value"
+      @click="handle_select(ratio.value)"
+      class="w-full aspect-square bg-neutral-200/50 dark:bg-neutral-700/50 rounded-lg py-1.5 flex flex-col justify-between items-center cursor-pointer select-none"
+      :class="[ratio.value === selected && 'bg-sky-200/50 dark:bg-sky-700/50']"
+    >
+      <div
+        class="bg-neutral-300/50 dark:bg-neutral-600/50 text-neutral-600 dark:text-neutral-300 rounded flex justify-center items-center"
+        :class="[
+          ratio.value === selected && 'bg-sky-300/50 dark:bg-sky-600/50',
+        ]"
+        :style="{
+          width: getShapeSize(getRatio(ratio.ratio), 30).w * 1.1 + 'px',
+          height: getShapeSize(getRatio(ratio.ratio), 30).h * 1.1 + 'px',
+        }"
+      >
+        <span class="text-xs font-thin font-mono">{{ ratio.ratio }}</span>
+      </div>
+      <span class="text-[10px]">
+        {{
+          ratio?.label || getRatio(ratio.ratio).w === getRatio(ratio.ratio).h
+            ? '正方形'
+            : getRatio(ratio.ratio).w > getRatio(ratio.ratio).h
+              ? '横向'
+              : '纵向'
+        }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>