Skip to content

Dev/page color #358

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Sep 25, 2025
Merged

Dev/page color #358

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ce8368b
feat(ui): new sidebar
luoling8192 Sep 16, 2025
79bbece
fix: count size
hahaQWQ Sep 17, 2025
2df8911
feat: new ui
luoling8192 Sep 17, 2025
a84b704
chore: banner color
luoling8192 Sep 17, 2025
a7de077
[autofix.ci] apply automated fixes
autofix-ci[bot] Sep 17, 2025
1b373db
feat: hidden database settings when working on core mode
hahaQWQ Sep 17, 2025
b89a7c6
feat: modfiy pages color to new style
hahaQWQ Sep 17, 2025
505ff45
[autofix.ci] apply automated fixes
autofix-ci[bot] Sep 17, 2025
e020435
Merge branch 'dev/new-sidebar' into dev/page-color
luoling8192 Sep 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/stage-ui/src/components/ui/Stepper.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ defineProps<{
<div
class="h-12 w-12 flex items-center justify-center border-2 rounded-full text-xl font-bold transition"
:class="{
'bg-primary text-white border-primary shadow-lg': currentStep === step.value,
'bg-neutral-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 border-muted dark:border-gray-600': steps.findIndex(s => s.value === currentStep) !== idx,
'bg-[var(--gs-color-accent)] text-[var(--gs-color-text-inverse)] border-[var(--gs-color-accent)] shadow-lg': currentStep === step.value,
'gs-bg-surface-muted gs-text-secondary gs-border': steps.findIndex(s => s.value === currentStep) !== idx,
}"
>
<span>{{ idx + 1 }}</span>
Expand Down
34 changes: 17 additions & 17 deletions packages/stage-ui/src/pages/login.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,33 +90,33 @@ async function handleLogin() {
</script>

<template>
<div class="min-h-screen flex items-center justify-center bg-background dark:bg-gray-900">
<div class="max-w-md w-full rounded-2xl bg-card p-10 shadow-2xl dark:bg-gray-800">
<h1 class="mb-6 text-center text-3xl text-gray-900 font-bold tracking-tight dark:text-gray-100">
<div class="gs-bg-app min-h-screen flex items-center justify-center">
<div class="gs-bg-surface gs-shadow-sidebar max-w-md w-full rounded-2xl p-10">
<h1 class="gs-text-primary mb-6 text-center text-3xl font-bold tracking-tight">
{{ t('login.telegramLogin') }}
</h1>
<Stepper :steps="steps" :current-step="state.currentStep" />
<p class="mb-8 text-center text-lg text-gray-600 font-medium dark:text-gray-400">
<p class="gs-text-secondary mb-8 text-center text-lg font-medium">
{{ steps.find(s => s.value === state.currentStep)?.description }}
</p>

<!-- 手机号码表单 -->
<form v-if="state.currentStep === 'phone'" class="space-y-6" @submit.prevent="handleLogin">
<div>
<label for="phoneNumber" class="mb-2 block text-base text-gray-900 font-semibold dark:text-gray-100">{{ t('login.phoneNumber') }}</label>
<label for="phoneNumber" class="gs-text-primary mb-2 block text-base font-semibold">{{ t('login.phoneNumber') }}</label>
<input
id="phoneNumber"
v-model="state.phoneNumber"
type="tel"
:placeholder="t('login.phoneNumberPlaceholder')"
class="w-full border border-neutral-200 rounded-xl bg-neutral-100 px-5 py-4 text-xl text-gray-900 transition disabled:cursor-not-allowed dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-offset-gray-800"
class="gs-border gs-bg-surface-muted gs-text-primary w-full rounded-xl px-5 py-4 text-xl transition disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-[var(--gs-color-accent)]"
required
:disabled="authStore.auth.isLoading"
>
</div>
<button
type="submit"
class="w-full flex items-center justify-center rounded-xl bg-primary py-4 text-lg text-white font-bold transition disabled:cursor-not-allowed disabled:bg-gray-300 hover:bg-primary/90 dark:disabled:bg-gray-700"
class="w-full flex items-center justify-center rounded-xl bg-[var(--gs-color-accent)] py-4 text-lg text-[var(--gs-color-text-inverse)] font-bold transition disabled:cursor-not-allowed hover:bg-[var(--gs-color-accent)]/90 disabled:opacity-50"
:disabled="authStore.auth.isLoading"
>
<span v-if="authStore.auth.isLoading" class="i-lucide-loader-2 mr-2 animate-spin" />
Expand All @@ -127,23 +127,23 @@ async function handleLogin() {
<!-- 验证码表单 -->
<form v-if="state.currentStep === 'code'" class="space-y-6" @submit.prevent="handleLogin">
<div>
<label for="verificationCode" class="mb-2 block text-base text-gray-900 font-semibold dark:text-gray-100">{{ t('login.verificationCode') }}</label>
<label for="verificationCode" class="gs-text-primary mb-2 block text-base font-semibold">{{ t('login.verificationCode') }}</label>
<input
id="verificationCode"
v-model="state.verificationCode"
type="text"
:placeholder="t('login.verificationCodePlaceholder')"
class="w-full border border-neutral-200 rounded-xl bg-neutral-100 px-5 py-4 text-xl text-gray-900 transition disabled:cursor-not-allowed dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-offset-gray-800"
class="gs-border gs-bg-surface-muted gs-text-primary w-full rounded-xl px-5 py-4 text-xl transition disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-[var(--gs-color-accent)]"
required
:disabled="authStore.auth.isLoading"
>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
<p class="gs-text-secondary mt-2 text-sm">
{{ t('login.verificationCodeDescription') }}
</p>
</div>
<button
type="submit"
class="w-full flex items-center justify-center rounded-xl bg-primary py-4 text-lg text-white font-bold transition disabled:cursor-not-allowed disabled:bg-gray-300 hover:bg-primary/90 dark:disabled:bg-gray-700"
class="w-full flex items-center justify-center rounded-xl bg-[var(--gs-color-accent)] py-4 text-lg text-[var(--gs-color-text-inverse)] font-bold transition disabled:cursor-not-allowed hover:bg-[var(--gs-color-accent)]/90 disabled:opacity-50"
:disabled="authStore.auth.isLoading"
>
<span v-if="authStore.auth.isLoading" class="i-lucide-loader-2 mr-2 animate-spin" />
Expand All @@ -154,20 +154,20 @@ async function handleLogin() {
<!-- 两步验证密码表单 -->
<form v-if="state.currentStep === 'password'" class="space-y-6" @submit.prevent="handleLogin">
<div>
<label for="twoFactorPassword" class="mb-2 block text-base text-gray-900 font-semibold dark:text-gray-100">{{ t('login.twoFactorPassword') }}</label>
<label for="twoFactorPassword" class="gs-text-primary mb-2 block text-base font-semibold">{{ t('login.twoFactorPassword') }}</label>
<input
id="twoFactorPassword"
v-model="state.twoFactorPassword"
type="password"
:placeholder="t('login.twoFactorPasswordPlaceholder')"
class="w-full border border-neutral-200 rounded-xl bg-neutral-100 px-5 py-4 text-xl text-gray-900 transition disabled:cursor-not-allowed dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-offset-gray-800"
class="gs-border gs-bg-surface-muted gs-text-primary w-full rounded-xl px-5 py-4 text-xl transition disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-[var(--gs-color-accent)]"
required
:disabled="authStore.auth.isLoading"
>
</div>
<button
type="submit"
class="w-full flex items-center justify-center rounded-xl bg-primary py-4 text-lg text-white font-bold transition disabled:cursor-not-allowed disabled:bg-gray-300 hover:bg-primary/90 dark:disabled:bg-gray-700"
class="w-full flex items-center justify-center rounded-xl bg-[var(--gs-color-accent)] py-4 text-lg text-[var(--gs-color-text-inverse)] font-bold transition disabled:cursor-not-allowed hover:bg-[var(--gs-color-accent)]/90 disabled:opacity-50"
:disabled="authStore.auth.isLoading"
>
<span v-if="authStore.auth.isLoading" class="i-lucide-loader-2 mr-2 animate-spin" />
Expand All @@ -180,14 +180,14 @@ async function handleLogin() {
<div class="mb-4 text-3xl">
🎉
</div>
<h2 class="text-xl text-gray-900 font-bold dark:text-gray-100">
<h2 class="gs-text-primary text-xl font-bold">
{{ t('login.loginSuccess') }}
</h2>
<p class="mt-2 text-lg text-gray-600 dark:text-gray-400">
<p class="gs-text-secondary mt-2 text-lg">
{{ t('login.loginSuccessDescription') }}
</p>
<button
class="mt-6 w-full rounded-xl bg-primary py-4 text-lg text-white font-bold transition hover:bg-primary/90"
class="mt-6 w-full rounded-xl bg-[var(--gs-color-accent)] py-4 text-lg text-[var(--gs-color-text-inverse)] font-bold transition hover:bg-[var(--gs-color-accent)]/90"
@click="redirectRoot"
>
{{ t('login.enterHome') }}
Expand Down
10 changes: 5 additions & 5 deletions packages/stage-ui/src/pages/settings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ onMounted(() => {
<template>
<header class="flex items-center border-b border-b-secondary p-4 px-4 dark:border-b-gray-700">
<div class="flex items-center gap-2">
<span class="text-lg text-gray-900 font-medium dark:text-gray-100">{{ t('settings.settings') }}</span>
<span class="gs-text-primary text-lg font-medium">{{ t('settings.settings') }}</span>
</div>

<div class="ml-auto flex items-center gap-2">
Expand Down Expand Up @@ -118,14 +118,14 @@ onMounted(() => {
</div>

<!-- API settings -->
<div class="border border-neutral-200 rounded-lg bg-card p-4 dark:border-gray-600 dark:bg-gray-800">
<h2 class="mb-4 text-xl text-gray-900 font-semibold dark:text-gray-100">
<div class="gs-border gs-bg-surface rounded-lg p-4">
<h2 class="gs-text-primary mb-4 text-xl font-semibold">
{{ t('settings.apiSettings') }}
</h2>
<div class="space-y-4">
<!-- Telegram API -->
<div>
<h3 class="mb-2 text-lg text-gray-900 font-medium dark:text-gray-100">
<h3 class="gs-text-primary mb-2 text-lg font-medium">
{{ t('settings.telegramApi') }}
</h3>
<div class="grid gap-4 md:grid-cols-2">
Expand All @@ -152,7 +152,7 @@ onMounted(() => {

<!-- OpenAI API -->
<div>
<h3 class="mb-2 text-lg text-gray-900 font-medium dark:text-gray-100">
<h3 class="gs-text-primary mb-2 text-lg font-medium">
{{ t('settings.embedding') }}
</h3>
<div class="grid gap-4">
Expand Down