nanakura/moeka-project
1
0
Fork 0
Code Issues Pull Requests 1 Actions 1 Packages Projects Releases Wiki Activity

fix(stage-web): interactive area

Browse Source
This commit is contained in:
Neko Ayaka
2025-07-06 23:03:46 +08:00
parent e6a1f12ac7
commit 4ffe2e4f99
3 changed files with 20 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/stage-web/src/components/Layouts/InteractiveArea.vue
+1 -43
View File
@@ -154,7 +154,7 @@ onAfterSend(async () => {
bg="hover:primary-100 dark:hover:primary-900"
text="primary-300 hover:primary-500 dark:primary-300/50 dark:hover:primary-500"
transition="all duration-250 ease-in-out"
cursor-pointer items-center gap-1 rounded-l-lg px-2
cursor-pointer items-center gap-1 rounded-lg px-2
>
<input v-model="tab" type="radio" name="tab" value="chat" hidden>
<div i-solar:dialog-2-bold-duotone text="2xl" transform="translate-y--2" />
@@ -162,48 +162,6 @@ onAfterSend(async () => {
<span min-w="3em">{{ t('stage.chat.tabs.chat') }}</span>
</div>
</label>
<label
:class="[
tab === 'custom' ? 'bg-primary-100 dark:bg-primary-900' : 'bg-white dark:bg-primary-950',
tab === 'custom' ? 'text-primary-500 dark:text-primary-500' : '',
{ 'transition-colors-none ': themeColorsHueDynamic },
]"
flex="~ row"
:checked="tab === 'custom'"
:aria-checked="tab === 'custom'"
border="solid t-2 b-2 primary-100 dark:primary-900"
bg="hover:primary-100 dark:hover:primary-900"
text="primary-300 hover:primary-500 dark:primary-300/50 dark:hover:primary-500"
transition="all duration-250 ease-in-out"
cursor-pointer items-center gap-1 px-2
>
<input v-model="tab" type="radio" name="tab" value="custom" hidden>
<div i-solar:star-fall-2-bold-duotone text="2xl" transform="translate-y--2" />
<div flex="~ row" items-center>
<span>{{ t('stage.chat.tabs.custom') }}</span>
</div>
</label>
<label
:class="[
tab === 'clothes' ? 'bg-primary-100 dark:bg-primary-900' : 'bg-white dark:bg-primary-950',
tab === 'clothes' ? 'text-primary-500 dark:text-primary-500' : '',
{ 'transition-colors-none ': themeColorsHueDynamic },
]"
flex="~ row"
:checked="tab === 'clothes'"
:aria-checked="tab === 'clothes'"
border="solid r-2 t-2 b-2 primary-100 dark:primary-900"
bg="hover:primary-100 dark:hover:primary-900"
text="primary-300 hover:primary-500 dark:primary-300/50 dark:hover:primary-500"
transition="all duration-250 ease-in-out"
cursor-pointer items-center gap-1 rounded-r-lg px-2
>
<input v-model="tab" type="radio" name="tab" value="clothes" hidden>
<div i-solar:magic-stick-3-bold-duotone text="2xl" transform="translate-y--2" />
<div flex="~ row" items-center>
<span>{{ t('stage.chat.tabs.clothes') }}</span>
</div>
</label>
</fieldset>
<div h-full max-h="[85vh]" w-full px="12 <md:0" py="4">
<div
apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue
+17 -19
View File
@@ -84,25 +84,23 @@ onMounted(() => {
</script>
<template>
<div>
<div relative w-full flex gap-1>
<MobileChatHistory absolute left-0 top-0 transform="translate-y-[-100%]" w-full />
<div flex flex-1>
<BasicTextarea
v-model="messageInput"
:placeholder="t('stage.message')"
border="solid 2 primary-100 dark:primary-400/20"
text="primary-300 hover:primary-500 dark:primary-300/50 dark:hover:primary-500 placeholder:primary-300 placeholder:hover:primary-500 placeholder:dark:primary-300/50 placeholder:dark:hover:primary-500"
bg="primary-100 dark:primary-400/20"
max-h="[10lh]" min-h="[1lh]"
w-full resize-none overflow-y-scroll rounded-xl p-2 font-medium outline-none
transition="all duration-250 ease-in-out placeholder:all placeholder:duration-250 placeholder:ease-in-out"
:class="{ 'transition-colors-none placeholder:transition-colors-none': themeColorsHueDynamic }"
@submit="handleSend"
@compositionstart="isComposing = true"
@compositionend="isComposing = false"
/>
</div>
<div fixed bottom-0 w-full flex gap-1>
<MobileChatHistory absolute left-0 top-0 transform="translate-y-[-100%]" w-full />
<div flex flex-1>
<BasicTextarea
v-model="messageInput"
:placeholder="t('stage.message')"
border="solid 2 primary-100 dark:primary-400/20"
text="primary-300 hover:primary-500 dark:primary-300/50 dark:hover:primary-500 placeholder:primary-300 placeholder:hover:primary-500 placeholder:dark:primary-300/50 placeholder:dark:hover:primary-500"
bg="primary-100 dark:primary-400/20"
max-h="[10lh]" min-h="[1lh]"
w-full resize-none overflow-y-scroll rounded-xl p-2 font-medium outline-none
transition="all duration-250 ease-in-out placeholder:all placeholder:duration-250 placeholder:ease-in-out"
:class="{ 'transition-colors-none placeholder:transition-colors-none': themeColorsHueDynamic }"
@submit="handleSend"
@compositionstart="isComposing = true"
@compositionend="isComposing = false"
/>
</div>
</div>
</template>
apps/stage-web/src/layouts/settings.vue
+2 -2
View File
@@ -121,14 +121,14 @@ const routeHeaderMetadata = computed(() => routeHeaderMetadataMap.value[route.pa
>
<!-- Header -->
<div
class="px-0 py-1 md:px-3 md:py-3"
class="px-0 py-1 hidden sm:block md:px-3 md:py-3"
w-full gap-2
bg="$bg-color"
>
<HeaderLink />
</div>
<!-- Content -->
<div class="px-3 py-2 md:px-5 md:py-5" flex="~ col" mx-auto max-w-screen-xl>
<div class="px-3 py-0 md:px-5 md:py-5" flex="~ col" mx-auto max-w-screen-xl>
<PageHeader
:title="routeHeaderMetadata?.title"
:subtitle="routeHeaderMetadata?.subtitle"