XuanShengHua/xsh-assistant-next
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎨chore: 使用 oxlint, oxfmt&格式化代码

Browse Source
This commit is contained in:
Timothy Yin
2026-02-08 21:16:25 +08:00
parent 9d35c6a9d8
commit 3a801ba016
78 changed files with 3367 additions and 1468 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
components/aigc/RatioSelector.vue
View File

@@ -1,13 +1,15 @@
<script setup lang="ts">
import type {PropType} from 'vue';
import type { PropType } from 'vue'
const props = defineProps({
ratios: {
type: Array as PropType<{
ratio: string,
label?: string,
value: string | number
}[]>,
type: Array as PropType<
{
ratio: string
label?: string
value: string | number
}[]
>,
required: true,
},
modelValue: {
@@ -40,7 +42,7 @@ const getRatio = (ratio: string) => {
}
}
const getShapeSize = (r: { w: number, h: number }, size: number) => {
const getShapeSize = (r: { w: number; h: number }, size: number) => {
const ratio = r.w / r.h
if (r.w > r.h) {
return {
@@ -58,25 +60,36 @@ const getShapeSize = (r: { w: number, h: number }, size: number) => {
<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'
}">
<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 ? '横向' : '纵向')
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>
<style scoped></style>