refactor(deps): migrate to nuxt v4

app/components/aigc/chat/ChatItem.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { ChatSession } from '~/typings/llm'
+
+const props = defineProps({
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  chatSession: {
+    type: Object as PropType<ChatSession>,
+    required: true,
+  },
+})
+const emit = defineEmits<{
+  (e: 'remove', session: ChatSession): void
+}>()
+
+const dayjs = useDayjs()
+</script>
+
+<template>
+  <div
+    class="chat-card group"
+    :class="{ active: active }"
+    :title="chatSession.subject"
+  >
+    <div class="chat-card-title">
+      <Icon
+        v-if="!!chatSession.assistant"
+        name="i-tabler-masks-theater"
+        class="text-lg mr-1"
+      />
+      <span class="flex-1 text-ellipsis overflow-x-hidden">
+        {{
+          !!chatSession.assistant
+            ? chatSession.assistant.tpl_name
+            : chatSession.subject
+        }}
+      </span>
+    </div>
+    <div class="chat-card-meta">
+      <div>{{ chatSession.messages.length }}条对话</div>
+      <div>
+        {{ dayjs(chatSession.create_at * 1000).format('YYYY-MM-DD HH:mm:ss') }}
+      </div>
+    </div>
+    <div
+      @click.stop="emit('remove', chatSession)"
+      class="chat-card-remove-btn text-neutral-400 group-hover:opacity-100 md:group-hover:-translate-x-0.5"
+    >
+      <Icon name="i-tabler-trash" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.chat-card {
+  @apply flex flex-col gap-2 bg-white dark:bg-neutral-800 px-4 py-3 rounded-lg relative border-2 border-transparent shadow-card;
+  @apply transition-none duration-150 hover:bg-cyan-300/5;
+  @apply select-none;
+
+  &.active {
+    @apply border-cyan-500;
+  }
+
+  &-title {
+    @apply w-[calc(100%-16px)] inline-flex items-center text-sm font-medium text-ellipsis text-nowrap overflow-x-hidden;
+  }
+
+  &-meta {
+    @apply flex justify-between items-center text-xs text-neutral-400;
+  }
+
+  &-remove-btn {
+    @apply absolute top-0.5 right-0 md:opacity-0;
+    @apply transition duration-300 hover:text-red-400;
+    @apply cursor-pointer;
+  }
+}
+</style>