xsh-assistant-next/app/components/aigc/chat/NewSessionScreen.vue

<script setup lang="ts">
import type { Assistant } from '~/typings/llm'
import { useLazyAsyncData } from '#app'

const loginState = useLoginState()

const props = defineProps({
  nonBack: {
    type: Boolean,
    default: false,
  },
})
// noinspection JSUnusedLocalSymbols
const emit = defineEmits({
  select: (assistant: Assistant | null) => true,
  cancel: () => true,
})

const { data: assistantTemplates, pending: assistantTemplatesPending } =
  await useLazyAsyncData(
    'App.Assistant_Template.GetList',
    () =>
      useFetchWrapped<
        req.AssistantTemplateList & AuthedRequest,
        BaseResponse<PagedData<Assistant>>
      >('App.Assistant_Template.GetList', {
        user_id: loginState.user.id,
        token: loginState.token as string,
        page: 1,
        perpage: 20,
      }),
    {
      server: false,
    }
  )
</script>

<template>
  <div class="w-full h-full flex flex-col items-center gap-4 relative">
    <Transition name="loading-screen">
      <div
        v-if="assistantTemplatesPending"
        class="absolute inset-0 bg-white dark:bg-neutral-900 flex justify-center items-center z-1 text-primary"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="40"
          height="40"
          viewBox="0 0 24 24"
        >
          <defs>
            <filter id="svgSpinnersGooeyBalls20">
              <feGaussianBlur
                in="SourceGraphic"
                result="y"
                stdDeviation="1"
              />
              <feColorMatrix
                in="y"
                result="z"
                values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
              />
              <feBlend
                in="SourceGraphic"
                in2="z"
              />
            </filter>
          </defs>
          <g filter="url(#svgSpinnersGooeyBalls20)">
            <circle
              cx="5"
              cy="12"
              r="4"
              fill="currentColor"
            >
              <animate
                attributeName="cx"
                calcMode="spline"
                dur="2s"
                keySplines=".36,.62,.43,.99;.79,0,.58,.57"
                repeatCount="indefinite"
                values="5;8;5"
              />
            </circle>
            <circle
              cx="19"
              cy="12"
              r="4"
              fill="currentColor"
            >
              <animate
                attributeName="cx"
                calcMode="spline"
                dur="2s"
                keySplines=".36,.62,.43,.99;.79,0,.58,.57"
                repeatCount="indefinite"
                values="19;16;19"
              />
            </circle>
            <animateTransform
              attributeName="transform"
              dur="0.75s"
              repeatCount="indefinite"
              type="rotate"
              values="0 12 12;360 12 12"
            />
          </g>
        </svg>
      </div>
    </Transition>
    <div class="w-full p-2">
      <UButton
        v-if="!nonBack"
        variant="ghost"
        size="xs"
        @click="emit('cancel')"
      >
        <template #leading>
          <UIcon name="i-tabler-chevron-left" />
        </template>
        <span>返回</span>
      </UButton>
    </div>
    <div class="flex flex-col items-center gap-8">
      <h1 class="text-lg font-medium flex flex-col items-center gap-2">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="2em"
          height="2em"
          viewBox="0 0 24 24"
        >
          <g
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
          >
            <path
              d="M13.192 9h6.616a2 2 0 0 1 1.992 2.183l-.567 6.182A4 4 0 0 1 17.25 21h-1.5a4 4 0 0 1-3.983-3.635l-.567-6.182A2 2 0 0 1 13.192 9M15 13h.01M18 13h.01"
            />
            <path
              d="M15 16.5c1 .667 2 .667 3 0m-9.368-.518A4.037 4.037 0 0 1 8.25 16h-1.5a4 4 0 0 1-3.983-3.635L2.2 6.183A2 2 0 0 1 4.192 4h6.616a2 2 0 0 1 2 2M6 8h.01M9 8h.01"
            />
            <path d="M6 12c.764-.51 1.528-.63 2.291-.36" />
          </g>
        </svg>
        <span>选择智能助手</span>
      </h1>
      <UButton
        class="group ring-primary hover:ring-2 transition duration-300"
        variant="soft"
        size="lg"
        :ui="{ rounded-sm: 'rounded-full' }"
        @click="emit('select', null)"
      >
        <span class="-mt-0.5">直接开始</span>
        <template #trailing>
          <span
            class="group-hover:translate-x-1 transition duration-300 ease-out relative w-3 h-full -mt-0.5"
          >
            <UIcon
              name="i-tabler-arrow-right"
              class="w-5 h-5 absolute top-auto bottom-auto right-0 opacity-0 group-hover:opacity-100 transition duration-300"
            />
            <UIcon
              name="i-tabler-chevron-right"
              class="w-5 h-5 absolute top-auto bottom-auto right-0 -mr-[3.5px] group-hover:opacity-0 transition duration-300"
            />
          </span>
        </template>
      </UButton>
    </div>
    <div
      class="w-full md:w-3/4 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 overflow-y-auto p-4 md:p-8"
    >
      <div
        v-for="assistant in assistantTemplates?.data.items || []"
        :key="assistant.id"
        class="assistant-item select-none"
        @click="emit('select', assistant)"
      >
        <div class="flex flex-col gap-1">
          <div class="text-base font-medium">{{ assistant.tpl_name }}</div>
          <div class="text-sm text-neutral-500 dark:text-neutral-400">
            {{ assistant.des }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<!--suppress CssUnusedSymbol -->
<style scoped>
.loading-screen-leave-active {
  @apply transition duration-300;
}

.loading-screen-leave-to {
  @apply opacity-0;
}

.assistant-item {
  @apply w-full bg-white dark:bg-neutral-800 rounded-lg shadow-xs ring-primary ring-offset-2 dark:ring-offset-0 hover:ring-2 transition;
  @apply flex items-center gap-4 px-4 py-2 cursor-pointer border dark:border-neutral-700 hover:border-transparent;
}
</style>