97 lines
2.4 KiB
Vue
97 lines
2.4 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-4">
|
|
<div v-if="editable" class="flex flex-col gap-4">
|
|
<ResponseSelect v-if="!baseInfo.type" v-model="type" :items="typeOptions">
|
|
<template #prefix>
|
|
<span>{{ $t('modelType') }}</span>
|
|
</template>
|
|
</ResponseSelect>
|
|
|
|
<ResponseSelect class="w-full" v-model="pathIndex" :items="pathOptions">
|
|
</ResponseSelect>
|
|
|
|
<ResponseInput
|
|
v-model.trim="basename"
|
|
class="-mr-2 text-right"
|
|
update-trigger="blur"
|
|
>
|
|
<template #suffix>
|
|
<span class="text-base opacity-60">
|
|
{{ extension }}
|
|
</span>
|
|
</template>
|
|
</ResponseInput>
|
|
</div>
|
|
|
|
<table class="w-full table-fixed border-collapse border">
|
|
<colgroup>
|
|
<col class="w-32" />
|
|
<col />
|
|
</colgroup>
|
|
<tbody>
|
|
<tr
|
|
v-for="item in information"
|
|
:key="item.key"
|
|
class="h-8 whitespace-nowrap border-b"
|
|
>
|
|
<td class="border-r bg-gray-300 px-4 dark:bg-gray-800">
|
|
{{ $t(`info.${item.key}`) }}
|
|
</td>
|
|
<td class="overflow-hidden text-ellipsis break-all px-4">
|
|
{{ item.display }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import ResponseInput from 'components/ResponseInput.vue'
|
|
import ResponseSelect from 'components/ResponseSelect.vue'
|
|
import { useConfig } from 'hooks/config'
|
|
import { useModelBaseInfo } from 'hooks/model'
|
|
import { computed } from 'vue'
|
|
|
|
const editable = defineModel<boolean>('editable')
|
|
|
|
const { modelFolders } = useConfig()
|
|
|
|
const { baseInfo, pathIndex, basename, extension, type } = useModelBaseInfo()
|
|
|
|
const typeOptions = computed(() => {
|
|
return Object.keys(modelFolders.value).map((curr) => {
|
|
return {
|
|
value: curr,
|
|
label: curr,
|
|
command: () => {
|
|
type.value = curr
|
|
pathIndex.value = 0
|
|
},
|
|
}
|
|
})
|
|
})
|
|
|
|
const pathOptions = computed(() => {
|
|
return (modelFolders.value[type.value] ?? []).map((folder, index) => {
|
|
return {
|
|
value: index,
|
|
label: folder,
|
|
command: () => {
|
|
pathIndex.value = index
|
|
},
|
|
}
|
|
})
|
|
})
|
|
|
|
const information = computed(() => {
|
|
return Object.values(baseInfo.value).filter((row) => {
|
|
if (editable.value) {
|
|
const hiddenKeys = ['fullname', 'pathIndex']
|
|
return !hiddenKeys.includes(row.key)
|
|
}
|
|
return true
|
|
})
|
|
})
|
|
</script>
|