redesign: site-wide UI/UX overhaul per web-interface-guidelines
- unified design system: focus-visible rings, reduced-motion, color-scheme, theme persistence, tightened emerald radius tokens (checkbox circle bug) - redesigned all pages: Home/Login/Signup/404, dashboard shell, Overview hero (time-based gradient), list pages with empty states, form modals, detail pages - role-scoped navigation: console menu vs admin console with cross-switch entries, Chinese route titles and breadcrumbs - theme switcher (light/dark/auto) via composables/theme, home + dashboard - state-driven dropdowns (touch-safe logout), menu divider pointer-events fix - btn-primary unified to black-on-white / white-on-black per theme - update REFACTOR_PLAN.md (increments 2-6)
This commit is contained in:
Sakurasan
@@ -1,143 +1,113 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-base-100 p-2 md:p-6">
|
||||
<BreadcrumbHeader />
|
||||
<div class="mx-auto w-full max-w-3xl">
|
||||
<header class="mb-4 pr-8">
|
||||
<h2 class="text-lg font-semibold tracking-tight">Create New Token</h2>
|
||||
<p class="mt-0.5 text-sm text-base-content/60">Tokens authenticate OpenAI-compatible clients with your team.</p>
|
||||
</header>
|
||||
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="mb-6 text-center md:text-left">
|
||||
<h1 class="text-2xl font-semibold text-base-content">
|
||||
Create New Token
|
||||
</h1>
|
||||
<p class="text-sm text-base-content/70 mt-1">
|
||||
Enter the token's details below.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="error" role="alert" class="alert shadow-lg bg-rose-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div>
|
||||
<span>Error! {{ error }}</span>
|
||||
</div>
|
||||
<button class="btn btn-sm" @click="error = null">X</button>
|
||||
</div>
|
||||
|
||||
<div class="card border border-base-300/40 shadow-sm">
|
||||
<form @submit.prevent="createToken" class="card-body space-y-5 p-3 sm:p-8">
|
||||
<div class="space-y-4">
|
||||
<h2 class="text-base font-medium text-base-content border-b border-base-300/30 pb-2 mb-4">
|
||||
Basic Information
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-4">
|
||||
<div class="form-control">
|
||||
<label for="username" class="label">
|
||||
<span class="label-text">
|
||||
Name <span class="text-red-500">*</span>
|
||||
</span>
|
||||
</label>
|
||||
<input id="username" type="text" v-model="newToken.name" placeholder="New Token Name"
|
||||
class="input input-sm input-bordered w-full" required />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="collapse collapse-arrow">
|
||||
<input type="checkbox" v-model="showAdvancedOptions" value="false" class="min-h-0 py-2" />
|
||||
<div class="collapse-title text-base font-medium min-h-0 py-1 px-0">
|
||||
Advanced Options
|
||||
</div>
|
||||
<div class="collapse-content px-0">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-4 pt-3">
|
||||
<div class="form-control">
|
||||
<label for="password" class="label">
|
||||
<span class="label-text">
|
||||
Key
|
||||
</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input id="token" :type="isTokenVisible ? 'text' : 'password'" v-model="newToken.key"
|
||||
class="input input-sm input-bordered w-full" />
|
||||
<button type="button" @click="toggleTokenVisibility"
|
||||
class="absolute inset-y-0 right-0 px-3 flex items-center text-base-content/60 hover:text-base-content/80 focus:outline-none focus:ring-0 rounded-r-md"
|
||||
id="token-visibility-toggle">
|
||||
|
||||
<template v-if="!isTokenVisible">
|
||||
<EyeOff class="w-5 h-5" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<Eye class="w-5 h-5" />
|
||||
</template>
|
||||
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label label-text text-xs">Expired at</label>
|
||||
<div class="flex items-center space-x-3">
|
||||
<input type="date" v-model="newToken.format_expired_at" class="input input-bordered input-sm w-full"
|
||||
placeholder="年/月/日" :disabled="newToken.never_expired" />
|
||||
<label class="flex items-center space-x-2 cursor-pointer whitespace-nowrap">
|
||||
<input type="checkbox" v-model="newToken.never_expired" class="checkbox checkbox-sm" />
|
||||
<span class="text-sm text-base-content/90">Never</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label for="quota" class="label">
|
||||
<span class="label-text">Quota</span>
|
||||
</label>
|
||||
<div class="flex items-center space-x-3">
|
||||
<input id="quota" type="number" v-model="newToken.quota" placeholder="Enter quota amount"
|
||||
class="input input-sm input-bordered w-1/2 flex-grow" :disabled="newToken.unlimited_quota" />
|
||||
<label class="flex items-center space-x-2 cursor-pointer whitespace-nowrap">
|
||||
<input type="checkbox" v-model="newToken.unlimited_quota" class="checkbox checkbox-sm" />
|
||||
<span class="text-sm text-base-content/90">Unlimited</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:col-span-2 form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Status</span>
|
||||
</label>
|
||||
<div class="flex items-center space-x-3 h-9">
|
||||
<input type="checkbox" v-model="newToken.active"
|
||||
:class="`toggle toggle-sm ${newToken.active ? 'toggle-success' : 'toggle-error'}`" />
|
||||
<span class="text-sm text-base-content/90">
|
||||
{{ newToken.active ? 'Active' : 'Inactive' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end pt-4 gap-5">
|
||||
<button type="button" class="btn btn-outline btn-error btn-sm h-9 px-4 text-sm font-medium" @click="cancel">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-outline btn-sm h-9 px-4 text-sm font-medium" :disabled="!isFormValid">
|
||||
Create
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div v-if="error" role="alert" class="alert alert-error mb-4 text-sm">
|
||||
<CircleAlert class="h-4 w-4 shrink-0" aria-hidden="true" />
|
||||
<span class="flex-1">Error: {{ error }}</span>
|
||||
<button type="button" class="btn btn-ghost btn-xs" aria-label="Dismiss error" @click="error = null">✕</button>
|
||||
</div>
|
||||
|
||||
<form class="card border border-base-300/60 bg-base-100 shadow-sm" @submit.prevent="createToken">
|
||||
<div class="card-body gap-5 p-4 sm:p-6">
|
||||
<section class="space-y-4">
|
||||
<h3 class="text-xs font-semibold uppercase tracking-wider text-base-content/50">Basic Information</h3>
|
||||
<div class="grid grid-cols-1 gap-x-4 gap-y-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label for="token-name" class="mb-1 block text-sm font-medium">
|
||||
Name <span class="text-error" aria-hidden="true">*</span>
|
||||
</label>
|
||||
<input id="token-name" name="name" type="text" v-model="newToken.name"
|
||||
placeholder="e.g. my-laptop" autocomplete="off"
|
||||
class="input input-bordered w-full" required />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="collapse collapse-arrow rounded-lg border border-base-300/60">
|
||||
<input type="checkbox" v-model="showAdvancedOptions" class="min-h-0 py-2" />
|
||||
<div class="collapse-title min-h-0 px-3 py-2 text-sm font-medium">
|
||||
Advanced Options
|
||||
</div>
|
||||
<div class="collapse-content px-3">
|
||||
<div class="grid grid-cols-1 gap-x-4 gap-y-4 pt-3 md:grid-cols-2">
|
||||
<div>
|
||||
<label for="token-key" class="mb-1 block text-sm font-medium">Key</label>
|
||||
<div class="relative">
|
||||
<input id="token-key" name="key" :type="isTokenVisible ? 'text' : 'password'" v-model="newToken.key"
|
||||
autocomplete="off" spellcheck="false" placeholder="Leave blank to generate"
|
||||
class="input input-bordered w-full pr-10" />
|
||||
<button type="button" @click="toggleTokenVisibility"
|
||||
class="absolute inset-y-0 right-0 flex items-center px-3 text-base-content/60 hover:text-base-content"
|
||||
:aria-label="isTokenVisible ? 'Hide token key' : 'Show token key'"
|
||||
id="token-visibility-toggle">
|
||||
<EyeOff v-if="!isTokenVisible" class="h-4 w-4" aria-hidden="true" />
|
||||
<Eye v-else class="h-4 w-4" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="token-expired" class="mb-1 block text-sm font-medium">Expired at</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<input id="token-expired" name="expired_at" type="date" v-model="newToken.format_expired_at"
|
||||
class="input input-bordered w-full" :disabled="newToken.never_expired" />
|
||||
<label class="flex cursor-pointer items-center gap-1.5 whitespace-nowrap text-sm">
|
||||
<input type="checkbox" name="never_expired" v-model="newToken.never_expired" class="checkbox checkbox-sm" />
|
||||
Never
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="token-quota" class="mb-1 block text-sm font-medium">Quota</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<input id="token-quota" name="quota" type="number" inputmode="numeric" v-model="newToken.quota"
|
||||
placeholder="e.g. 10" autocomplete="off"
|
||||
class="input input-bordered w-full flex-grow" :disabled="newToken.unlimited_quota" />
|
||||
<label class="flex cursor-pointer items-center gap-1.5 whitespace-nowrap text-sm">
|
||||
<input type="checkbox" name="unlimited_quota" v-model="newToken.unlimited_quota" class="checkbox checkbox-sm" />
|
||||
Unlimited
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="mb-1 block text-sm font-medium">Status</span>
|
||||
<div class="flex h-9 items-center gap-3">
|
||||
<input type="checkbox" name="active" v-model="newToken.active" role="switch"
|
||||
class="toggle toggle-sm" :class="newToken.active ? 'toggle-success' : 'toggle-error'"
|
||||
aria-label="Token active" />
|
||||
<span class="text-sm text-base-content/70">
|
||||
{{ newToken.active ? 'Active' : 'Inactive' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="flex items-center justify-end gap-3 border-t border-base-300/40 pt-4">
|
||||
<button type="button" class="btn btn-ghost btn-sm" @click="cancel">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary btn-sm px-5" :disabled="!isFormValid || creating">
|
||||
<span v-if="creating" class="loading loading-spinner loading-xs" aria-hidden="true"></span>
|
||||
Create Token
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import BreadcrumbHeader from '@/components/dashboard/BreadcrumbHeader.vue';
|
||||
import { Eye, EyeOff } from '@lucide/vue'
|
||||
import { Eye, EyeOff, CircleAlert } from '@lucide/vue'
|
||||
import { dateToUnix } from '@/utils/format-date';
|
||||
import { useToast } from '@/composables/toast';
|
||||
import type { TokenPayload } from '@/types';
|
||||
@@ -145,6 +115,7 @@ import type { TokenPayload } from '@/types';
|
||||
const authStore = useAuthStore()
|
||||
const { setToast } = useToast()
|
||||
const error = ref<string | null>(null)
|
||||
const creating = ref(false)
|
||||
const user = computed(() => authStore.user);
|
||||
|
||||
const showAdvancedOptions = ref(false)
|
||||
@@ -205,12 +176,13 @@ const createToken = async () => {
|
||||
return
|
||||
}
|
||||
|
||||
creating.value = true
|
||||
try {
|
||||
const res = await authStore.createToken(newToken.value)
|
||||
if (res.data?.code === 200) {
|
||||
error.value = null;
|
||||
resetnewToken();
|
||||
setToast(`Token ${newToken.value.name} created`, 'success')
|
||||
setToast('Token created successfully.', 'success')
|
||||
emit('closeModal', true)
|
||||
} else {
|
||||
console.log(res)
|
||||
@@ -219,6 +191,8 @@ const createToken = async () => {
|
||||
} catch (err: any) {
|
||||
error.value = err.response?.data?.error || 'Failed to create token'
|
||||
|
||||
} finally {
|
||||
creating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
@@ -239,12 +213,3 @@ const emit = defineEmits<{
|
||||
}>()
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Minimal custom styles if absolutely necessary */
|
||||
.collapse .collapse-title {
|
||||
min-height: 0;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user