Basic sticker & pack overview [skip ci]

This commit is contained in:
LittleSheep 2024-09-25 22:29:05 +08:00
parent dbcc12156c
commit e5a5463b63
11 changed files with 304 additions and 51 deletions

View File

@ -0,0 +1,28 @@
<template>
<v-menu>
<template v-slot:activator="{ props }">
<v-btn
size="small"
icon="mdi-translate"
v-bind="props"
/>
</template>
<v-list>
<v-list-item
class="w-48"
density="compact"
v-for="item in locales"
:key="item.code"
:value="item.code"
:active="locale == item.code"
@click.prevent.stop="setLocale(item.code)"
>
<v-list-item-title>{{ item.name }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</template>
<script lang="ts" setup>
const { locale, locales, setLocale } = useI18n()
</script>

View File

@ -0,0 +1,97 @@
<template>
<v-data-table-server
density="compact"
:headers="dataDefinitions.stickers"
:items="stickers"
:items-length="pagination.stickers.total"
:loading="reverting.stickers"
v-model:items-per-page="pagination.stickers.pageSize"
@update:options="readStickers"
item-value="id"
>
<template v-slot:item="{ item }: { item: any }">
<tr>
<td>{{ item.id }}</td>
<td>
<v-img
cover
aspect-ratio="1"
width="28"
height="28"
color="grey-lighten-2"
rounded="sm"
:src="`${config.public.solarNetworkApi}/cgi/uc/attachments/${item.attachment.rid}`"
>
<template v-slot:placeholder>
<div class="d-flex align-center justify-center fill-height">
<v-progress-circular
size="x-small"
width="3"
color="grey-lighten-4"
indeterminate
></v-progress-circular>
</div>
</template>
</v-img>
</td>
<td>{{ item.name }}</td>
<td>{{ props.packPrefix + item.alias }}</td>
<td>
</td>
</tr>
</template>
</v-data-table-server>
</template>
<script setup lang="ts">
import { solarFetch } from "~/utils/request"
const config = useRuntimeConfig()
const props = defineProps<{ packId: number, packPrefix?: string }>()
const error = ref<null | string>(null)
const dataDefinitions: { [id: string]: any[] } = {
stickers: [
{ align: "start", key: "id", title: "ID" },
{ align: "start", key: "attachment", title: "Texture" },
{ align: "start", key: "name", title: "Name" },
{ align: "start", key: "alias", title: "Alias" },
{ align: "start", key: "actions", title: "Actions", sortable: false },
],
}
const stickers = ref<any>([])
const reverting = reactive({ stickers: false })
const pagination = reactive({
stickers: { page: 1, pageSize: 5, total: 0 },
})
async function readStickers({ page, itemsPerPage }: { page?: number; itemsPerPage?: number }) {
if (itemsPerPage) pagination.stickers.pageSize = itemsPerPage
if (page) pagination.stickers.page = page
reverting.stickers = true
const res = await solarFetch(
"/cgi/uc/stickers?" +
new URLSearchParams({
pack: props.packId.toString(),
take: pagination.stickers.pageSize.toString(),
offset: ((pagination.stickers.page - 1) * pagination.stickers.pageSize).toString(),
}),
)
if (res.status !== 200) {
error.value = await res.text()
} else {
const data = await res.json()
stickers.value = data["data"]
pagination.stickers.total = data["count"]
}
reverting.stickers = false
}
onMounted(() => readStickers({}))
</script>

56
layouts/creator-hub.vue Normal file
View File

@ -0,0 +1,56 @@
<template>
<v-app-bar flat color="primary" scroll-behavior="hide" scroll-threshold="800">
<v-container fluid class="mx-auto d-flex align-center justify-center px-8">
<v-tooltip>
<template #activator="{ props }">
<div @click="openDrawer = !openDrawer" v-bind="props" class="cursor-pointer">
<v-img class="me-4 ms-1" width="32" height="32" alt="Logo" :src="Logo" />
</div>
</template>
Open / close drawer
</v-tooltip>
<nuxt-link to="/dev" exact>
<h2 class="mt-1">Creator Hub</h2>
</nuxt-link>
<v-spacer></v-spacer>
<locale-select />
<user-menu />
</v-container>
</v-app-bar>
<v-navigation-drawer v-model="openDrawer" location="left" width="300" floating>
<v-list density="compact" nav color="primary">
<v-list-item title="Back" prepend-icon="mdi-arrow-left" to="/" exact />
</v-list>
<v-divider class="border-opacity-50 my-1" />
<v-list density="compact" nav color="primary">
<v-list-item title="Stickers" prepend-icon="mdi-sticker-emoji" to="/creator/stickers" exact />
</v-list>
<v-divider class="border-opacity-50 mb-4 mt-1" />
<copyright no-centered service="capital" class="px-5" />
<footer-links class="px-5 mt-3" />
</v-navigation-drawer>
<v-main>
<slot />
</v-main>
</template>
<script setup lang="ts">
import Logo from "../assets/logo-w-shadow.png"
const { t } = useI18n()
const openDrawer = ref(false)
useHead({
titleTemplate: "%s | Solsynth Creator Hub"
})
</script>

View File

@ -17,29 +17,7 @@
<v-spacer></v-spacer>
<v-menu>
<template v-slot:activator="{ props }">
<v-btn
size="small"
icon="mdi-translate"
v-bind="props"
/>
</template>
<v-list>
<v-list-item
class="w-48"
density="compact"
v-for="item in locales"
:key="item.code"
:value="item.code"
:active="locale == item.code"
@click.prevent.stop="setLocale(item.code)"
>
<v-list-item-title>{{ item.name }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<locale-select />
<user-menu />
</v-container>
</v-app-bar>
@ -56,7 +34,7 @@
<v-list density="compact" nav color="primary">
<v-list-item title="Developer Portal" prepend-icon="mdi-code-tags" to="/dev" exact />
<v-list-item title="Creator Hub" prepend-icon="mdi-pencil" disabled exact />
<v-list-item title="Creator Hub" prepend-icon="mdi-pencil" to="/creator" exact />
</v-list>
<v-divider class="border-opacity-50 mb-4 mt-0.5" />
@ -74,7 +52,7 @@
<script setup lang="ts">
import Logo from "../assets/logo-w-shadow.png"
const { locale, locales, setLocale, t } = useI18n()
const { t } = useI18n()
const openDrawer = ref(false)
</script>

View File

@ -16,29 +16,7 @@
<v-spacer></v-spacer>
<v-menu>
<template v-slot:activator="{ props }">
<v-btn
size="small"
icon="mdi-translate"
v-bind="props"
/>
</template>
<v-list>
<v-list-item
class="w-48"
density="compact"
v-for="item in locales"
:key="item.code"
:value="item.code"
:active="locale == item.code"
@click.prevent.stop="setLocale(item.code)"
>
<v-list-item-title>{{ item.name }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<locale-select />
<user-menu />
</v-container>
</v-app-bar>
@ -69,7 +47,7 @@
<script setup lang="ts">
import Logo from "../assets/logo-w-shadow.png"
const { locale, locales, setLocale, t } = useI18n()
const { t } = useI18n()
const openDrawer = ref(false)
useHead({

24
pages/creator/index.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<v-container fluid class="h-[calc(100vh-80px)] flex flex-col justify-center items-center text-center">
<v-icon icon="mdi-brush" size="64" />
<div class="text-2xl">Hello, creator!</div>
<div class="max-w-[320px]">Switch page using navigator above to get start creating contents on Solar Network.</div>
<div class="text-xs font-mono text-grey mt-5">
@{{ auth.userinfo?.name }} · {{ auth.userinfo?.id.toString().padStart(8, "0") }}
</div>
</v-container>
</template>
<script setup lang="ts">
definePageMeta({
layout: "creator-hub",
middleware: ["auth"],
})
useHead({
title: "Landing",
})
const auth = useUserinfo()
</script>

View File

@ -0,0 +1,89 @@
<template>
<v-container class="px-12">
<div class="flex justify-between items-center mt-5">
<div class="flex items-end gap-2">
<h1 class="text-2xl">Stickers & packs</h1>
</div>
<div class="flex gap-2">
<v-btn
color="primary"
text="New"
append-icon="mdi-plus"
variant="tonal"
to="/dev/bots/new"
/>
</div>
</div>
<div class="mt-5">
<v-expansion-panels>
<v-expansion-panel
v-for="item in data"
:key="'sticker-pack#'+item.id"
>
<template #title>
<div class="flex items-center gap-2">
<p>{{ item.name }}</p>
<v-chip size="x-small" class="font-mono" rounded color="primary">#{{ item.id }}</v-chip>
</div>
</template>
<template #text>
<v-row>
<v-col cols="12">
<p><b>Description</b></p>
<p>{{ item.description }}</p>
</v-col>
<v-col cols="12" md="6" lg="4">
<p><b>Pack Prefix</b></p>
<v-code class="font-mono mt-0.5 px-3 w-fit">
<span v-if="item.prefix.length == 0"><i>no prefix</i></span>
<span v-else>{{ item.prefix }}</span>
</v-code>
</v-col>
<v-col cols="12">
<p><b>Stickers</b></p>
<v-card variant="outlined" class="mx-[-0.5ch] mt-1">
<creator-stickers-data-table :pack-id="item.id" :pack-prefix="item.prefix" />
</v-card>
</v-col>
</v-row>
</template>
</v-expansion-panel>
</v-expansion-panels>
</div>
</v-container>
</template>
<script setup lang="ts">
definePageMeta({
layout: "creator-hub",
middleware: ["auth"],
})
useHead({
title: "Stickers",
})
const loading = ref(false)
const error = ref<null | string>(null)
const data = ref<any[]>([])
async function readPacks() {
loading.value = true
const resp = await solarFetch(`/cgi/uc/stickers/packs?take=10&offset=${data.value.length}`)
if (resp.status != 200) {
error.value = await resp.text()
} else {
const out = await resp.json()
data.value.push(...out["data"])
}
loading.value = false
}
onMounted(() => readPacks())
</script>

View File

@ -99,6 +99,7 @@ import { solarFetch } from "~/utils/request"
definePageMeta({
layout: "dev-portal",
middleware: ["auth"],
})
useHead({

View File

@ -61,6 +61,7 @@
<script setup lang="ts">
definePageMeta({
layout: "dev-portal",
middleware: ["auth"],
})
useHead({

View File

@ -5,7 +5,7 @@
<div class="max-w-[320px]">Switch page using navigator above to get start developing with Solar Network.</div>
<div class="text-xs font-mono text-grey mt-5">
@{{ auth.userinfo?.name }} · {{ auth.userinfo?.id.toString().padStart(8, '0') }}
@{{ auth.userinfo?.name }} · {{ auth.userinfo?.id.toString().padStart(8, "0") }}
</div>
</v-container>
</template>
@ -13,6 +13,7 @@
<script setup lang="ts">
definePageMeta({
layout: "dev-portal",
middleware: ["auth"],
})
useHead({

View File

@ -32,7 +32,7 @@
</v-card-text>
</v-card>
<v-card class="w-28 aspect-square cursor-not-allowed" disabled>
<v-card class="w-28 aspect-square cursor-not-allowed" to="/creator">
<v-card-text class="flex flex-col justify-center items-center text-center h-full">
<v-icon icon="mdi-pencil" size="32" />
<span class="text-sm mt-1.75">Creator Hub</span>