Edom
1ba126c92b
站点按 bloub 三栏做自定义、动画时间线和设置，支持序列导出。 形体只留常见几种并配中文名；动画页右栏拉满时间线旁空位，滚动条隐藏。 机芯补 GROK.create / <grok-bot>，以及暂停冻结。
52 lines
1.4 KiB
Vue
52 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import BotTile from '@/components/BotTile.vue'
|
|
import { stateName, t } from '@/i18n'
|
|
import { stateGroups } from '@/replica/catalog'
|
|
|
|
const emit = defineEmits<{ pick: [state: string] }>()
|
|
const current = defineModel<string>({ required: true })
|
|
|
|
const props = defineProps<{
|
|
shape: string
|
|
color: string
|
|
ready?: boolean
|
|
}>()
|
|
|
|
const groups = computed(() => {
|
|
void props.ready
|
|
return stateGroups()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<h2 class="text-sm font-semibold">{{ t('panel.animations') }}</h2>
|
|
<section v-for="group in groups" :key="group.key" class="mt-4">
|
|
<h3 class="text-xs font-medium tracking-wide text-[var(--muted)] uppercase">
|
|
{{
|
|
group.key === 'lifecycle'
|
|
? t('panel.group_lifecycle')
|
|
: group.key === 'reactions'
|
|
? t('panel.group_reactions')
|
|
: group.key === 'agent'
|
|
? t('panel.group_agent')
|
|
: t('panel.group_product')
|
|
}}
|
|
</h3>
|
|
<div class="mt-2 grid grid-cols-4 gap-1.5">
|
|
<BotTile
|
|
v-for="id in group.states"
|
|
:key="id"
|
|
:label="stateName(id)"
|
|
:selected="id === current"
|
|
:state="id"
|
|
:shape="shape"
|
|
:color="color"
|
|
@click="emit('pick', id)"
|
|
/>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|