feat(stage-web): new ui

This commit is contained in:
Neko Ayaka
2025-03-08 00:33:29 +08:00
parent 30062e5697
commit 413da96c56
6 changed files with 86 additions and 12 deletions
@@ -11,7 +11,7 @@ const router = useRouter()
</button>
<h1 relative>
<div absolute left-0 top-0 translate-y="[-80%]">
<span text="neutral-300 dark:neutral-800">Settings</span>
<span text="neutral-300 dark:neutral-500">Settings</span>
</div>
<div text-3xl font-semibold>
Models
@@ -7,25 +7,99 @@ const router = useRouter()
<template>
<div flex="~ row" items-center gap-2>
<button @click="router.back()">
<div i-solar:alt-arrow-left-line-duotone text-2xl />
<div i-solar:alt-arrow-left-line-duotone text-xl />
</button>
<h1 relative>
<div absolute left-0 top-0 translate-y="[-80%]">
<span text="neutral-300 dark:neutral-800">Modules</span>
<span text="neutral-300 dark:neutral-500">Modules</span>
</div>
<div text-3xl font-semibold>
Consciousness
</div>
</h1>
</div>
<div>
<div>
<span>Provider</span>
<div bg="neutral-100 dark:[rgba(0,0,0,0.3)]" rounded-xl p-4>
<div flex="~ col gap-4">
<div>
<div>
<span>OpenAI</span>
<h2 text-2xl>
Provider
</h2>
<div text="neutral-400 dark:neutral-400">
<span>Select the suitable LLM provider for consciousness</span>
</div>
</div>
<div max-w-full>
<!--
fieldset has min-width set to --webkit-min-container, in order to use over flow scroll,
we need to set the min-width to 0.
See also: https://stackoverflow.com/a/33737340
-->
<fieldset flex="~ row gap-4" :style="{ 'scrollbar-width': 'none' }" min-w-0 of-x-scroll scroll-smooth>
<label
bg="neutral-200 dark:neutral-800"
flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
>
<input type="radio" name="provider" value="provider-1">
<div flex="~ col" min-h-16 w-full items-center justify-center>
Provider 1
</div>
</label>
<label
bg="neutral-200 dark:neutral-800"
flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
>
<input type="radio" name="provider" value="provider-1">
<div flex="~ col" min-h-16 w-full items-center justify-center>
Provider 1
</div>
</label>
<label
bg="neutral-200 dark:neutral-800"
flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
>
<input type="radio" name="provider" value="provider-1">
<div flex="~ col" min-h-16 w-full items-center justify-center>
Provider 1
</div>
</label>
<label
bg="neutral-200 dark:neutral-800"
flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
>
<input type="radio" name="provider" value="provider-1">
<div flex="~ col" min-h-16 w-full items-center justify-center>
Provider 1
</div>
</label>
<label
bg="neutral-200 dark:neutral-800"
flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
>
<input type="radio" name="provider" value="provider-1">
<div flex="~ col" min-h-16 w-full items-center justify-center>
Provider 1
</div>
</label>
<label
bg="neutral-200 dark:neutral-800"
flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
>
<input type="radio" name="provider" value="provider-1">
<div flex="~ col" min-h-16 w-full items-center justify-center>
Provider 1
</div>
</label>
<label
bg="neutral-200 dark:neutral-800"
flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
>
<input type="radio" name="provider" value="provider-1">
<div flex="~ col" min-h-16 w-full items-center justify-center>
Provider 1
</div>
</label>
</fieldset>
</div>
</div>
</div>
<div fixed bottom-0 right-0 z--1 text="neutral-100/80 dark:neutral-500/20">
@@ -100,7 +100,7 @@ const modulesList = computed<Module[]>(() => [
</button>
<h1 relative>
<div absolute left-0 top-0 translate-y="[-80%]">
<span text="neutral-300 dark:neutral-800">Settings</span>
<span text="neutral-300 dark:neutral-500">Settings</span>
</div>
<div text-3xl font-semibold>
Modules
@@ -118,7 +118,7 @@ const providersList = computed<ModelProvider[]>(() => [
</button>
<h1 relative>
<div absolute left-0 top-0 translate-y="[-80%]">
<span text="neutral-300 dark:neutral-800">Settings</span>
<span text="neutral-300 dark:neutral-500">Settings</span>
</div>
<div text-3xl font-semibold>
Providers
@@ -39,7 +39,7 @@ watch([apiKey, baseUrl], () => {
</button>
<h1 relative>
<div absolute left-0 top-0 translate-y="[-80%]">
<span text="neutral-300 dark:neutral-800">Provider</span>
<span text="neutral-300 dark:neutral-500">Provider</span>
</div>
<div text-3xl font-semibold>
OpenRouter
@@ -11,7 +11,7 @@ const router = useRouter()
</button>
<h1 relative>
<div absolute left-0 top-0 translate-y="[-80%]">
<span text="neutral-300 dark:neutral-800">Settings</span>
<span text="neutral-300 dark:neutral-500">Settings</span>
</div>
<div text-3xl font-semibold>
Themes