ai-char/ai-service-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
xds
2026-02-04 14:43:22 +03:00
commit 4f460b2876
40 changed files with 11425 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/views/CharactersView.vue Normal file
View File

@@ -0,0 +1,110 @@
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { dataService } from '../services/dataService'
import Skeleton from 'primevue/skeleton'
const router = useRouter()
const characters = ref([])
const loading = ref(true)
const API_URL = import.meta.env.VITE_API_URL
onMounted(async () => {
loading.value = true
try {
characters.value = await dataService.getCharacters()
} catch (e) {
console.error('Failed to load characters', e)
} finally {
loading.value = false
}
})
const goBack = () => {
router.push('/')
}
const goToDetail = (id) => {
router.push(`/characters/${id}`)
}
</script>
<template>
<div class="flex h-screen bg-slate-900 overflow-hidden">
<!-- Sidebar -->
<nav class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10">
<div class="mb-12 cursor-pointer" @click="goBack">
<div
class="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center font-bold text-white text-xl transition-all duration-300 hover:bg-white/20">
←
</div>
</div>
<div class="flex-1 flex flex-col gap-6 w-full items-center">
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/')">
<span class="text-2xl">🏠</span>
</div>
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/assets')">
<span class="text-2xl">📂</span>
</div>
<div
class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50">
<span class="text-2xl">👥</span>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="flex-1 p-8 overflow-y-auto flex flex-col">
<!-- Top Bar -->
<header class="flex justify-between items-end mb-8">
<div>
<h1 class="text-4xl font-bold m-0">Characters</h1>
<p class="mt-2 mb-0 text-slate-400">Manage your AI personas</p>
</div>
</header>
<!-- Loading State -->
<div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div v-for="i in 6" :key="i" class="glass-panel rounded-2xl p-6 flex items-center gap-6">
<Skeleton shape="circle" size="5rem" />
<div class="flex-1">
<Skeleton class="mb-2" height="1.5rem" />
<Skeleton height="1rem" />
</div>
</div>
</div>
<!-- Characters Grid -->
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div v-for="char in characters" :key="char.id"
class="glass-panel rounded-2xl p-6 flex items-center gap-6 transition-all duration-300 cursor-pointer border border-white/5 hover:-translate-y-1 hover:bg-white/5 hover:border-white/10"
@click="goToDetail(char.id)">
<div class="w-20 h-20 rounded-full overflow-hidden flex-shrink-0 border-3 border-white/10">
<img :src="API_URL + char.avatar_image || 'https://via.placeholder.com/150'" :alt="char.name"
class="w-full h-full object-cover" />
</div>
<div class="flex-1 overflow-hidden">
<h3 class="m-0 mb-2 text-xl font-semibold">{{ char.name }}</h3>
<p class="m-0 text-sm text-slate-400 line-clamp-2">
{{ char.character_bio }}
</p>
</div>
</div>
</div>
</main>
</div>
</template>
<style scoped>
/* Line clamp utility for older browsers */
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>