mirrors2/opencatd-open
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

redesign: site-wide UI/UX overhaul per web-interface-guidelines

Browse Source 
- 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
2026-08-30 01:35:10 +08:00
parent ac0a6808ec
commit 1e07c5903f
26 changed files with 2189 additions and 2323 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/dashboard/KeyView.vue
+91 -113
View File
@@ -1,166 +1,140 @@
<template>
<div class="min-h-screen bg-base-100 p-2 md:p-6">
<BreadcrumbHeader title="Key Details" />
<div class="space-y-5">
<BreadcrumbHeader title="渠道详情" />
<div class="divider mt-1 mb-0"></div>
<div class="card border border-base-300/40 shadow-sm"v-if="key" >
<form @submit.prevent="updateKey" 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="name" class="label">
<span class="label-text">
Name <span class="text-red-500">*</span>
</span>
<div v-if="key" class="space-y-5">
<div class="card border border-base-300/60 bg-base-100 shadow-sm">
<form @submit.prevent="updateKey" class="card-body gap-5 p-4 sm:p-6">
<section class="space-y-4">
<h2 class="text-xs font-semibold uppercase tracking-wider text-base-content/50">Basic Information</h2>
<div class="grid grid-cols-1 gap-x-4 gap-y-4 md:grid-cols-2">
<div>
<label for="key-name" class="mb-1 block text-sm font-medium">
Name <span class="text-error" aria-hidden="true">*</span>
</label>
<input id="name" type="text" v-model="key.name" placeholder="API Key Name"
class="input input-sm input-bordered w-full" required />
<input id="key-name" name="name" type="text" v-model="key.name" autocomplete="off" spellcheck="false"
class="input input-bordered w-full" required />
</div>
<div class="form-control">
<label for="apitype" class="label">
<span class="label-text">
Type <span class="text-red-500">*</span>
</span>
<div>
<label for="key-type" class="mb-1 block text-sm font-medium">
Type <span class="text-error" aria-hidden="true">*</span>
</label>
<div class="relative">
<select id="apitype" v-model="key.type" class="select select-sm select-bordered w-full pl-10"
required>
<option class="disabled" value="" selected>Select API Type</option>
<select id="key-type" name="type" v-model="key.type" required
class="select select-bordered w-full pl-10">
<option disabled value="">Select provider</option>
<option value="openai">OpenAI</option>
<option value="claude">Claude</option>
<option value="gemini">Gemini</option>
<option value="azure">Azure</option>
<option value="github">Github</option>
<option value="github">GitHub</option>
<option value="openai-compatible">OpenAI Compatible</option>
</select>
<button type="button" class="absolute inset-y-0 left-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="password-visibility-toggle">
<img :src="apiKeyImageUrl(key.type)" class="w-5 h-5" alt="">
</button>
<img :src="apiKeyImageUrl(key.type)" alt="" width="20" height="20"
class="pointer-events-none absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 rounded-full bg-base-200 p-0.5" />
</div>
</div>
<div class="form-control">
<label for="apikey" class="label">
<span class="label-text">
API Key <span class="text-red-500">*</span>
</span>
<div>
<label for="key-apikey" class="mb-1 block text-sm font-medium">
API Key <span class="text-error" aria-hidden="true">*</span>
</label>
<input id="apikey" type="text" v-model="key.apikey" placeholder="Your API Key"
class="input input-sm input-bordered w-full" required />
<input id="key-apikey" name="apikey" type="text" v-model="key.apikey" autocomplete="off"
spellcheck="false" class="input input-bordered w-full font-mono text-sm" required />
</div>
<div class="form-control">
<label for="endpoint" class="label">
<span class="label-text">Endpoint</span>
</label>
<input id="endpoint" type="text" v-model="key.endpoint" placeholder="API Endpoint URL"
class="input input-sm input-bordered w-full" />
<div>
<label for="key-endpoint" class="mb-1 block text-sm font-medium">Endpoint</label>
<input id="key-endpoint" name="endpoint" type="url" v-model="key.endpoint" spellcheck="false"
class="input input-bordered w-full font-mono text-sm" />
</div>
</div>
</div>
</section>
<div class="collapse collapse-arrow">
<section class="collapse collapse-arrow rounded-lg border border-base-300/60">
<input type="checkbox" checked class="min-h-0 py-2" />
<div class="collapse-title text-base font-medium min-h-0 py-1 px-0">
<div class="collapse-title min-h-0 px-3 py-2 text-sm font-medium">
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="resource_name" class="label">
<span class="label-text">Resource Name</span>
</label>
<input id="resource_name" type="text" v-model="key.resource_name" placeholder="Resource Name"
class="input input-sm input-bordered w-full" />
<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="key-resource" class="mb-1 block text-sm font-medium">Resource Name</label>
<input id="key-resource" name="resource_name" type="text" v-model="key.resource_name"
autocomplete="off" spellcheck="false" class="input input-bordered w-full" />
</div>
<!-- <div class="form-control">
<label for="deployment_name" class="label">
<span class="label-text">Deployment Name</span>
</label>
<input id="deployment_name" type="text" v-model="key.deployment_name"
placeholder="Deployment Name" class="input input-sm input-bordered w-full" />
</div> -->
<div class="form-control">
<label for="api_secret" class="label">
<span class="label-text">API Secret</span>
</label>
<input id="api_secret" type="text" v-model="key.api_secret" placeholder="API Secret"
class="input input-sm input-bordered w-full" />
<div>
<label for="key-secret" class="mb-1 block text-sm font-medium">API Secret</label>
<input id="key-secret" name="api_secret" type="text" v-model="key.api_secret" autocomplete="off"
spellcheck="false" class="input input-bordered w-full font-mono text-sm" />
</div>
<div class="form-control">
<label for="model_prefix" class="label">
<span class="label-text">Model Prefix</span>
</label>
<input id="model_prefix" type="text" v-model="key.model_prefix" placeholder="Model Prefix"
class="input input-sm input-bordered w-full" />
<div>
<label for="key-prefix" class="mb-1 block text-sm font-medium">Model Prefix</label>
<input id="key-prefix" name="model_prefix" type="text" v-model="key.model_prefix" autocomplete="off"
spellcheck="false" class="input input-bordered w-full" />
</div>
<div class="form-control">
<label for="model_alias" class="label">
<span class="label-text">Model Alias</span>
</label>
<textarea id="model_alias" v-model="key.model_alias" placeholder="{}"
class="textarea textarea-sm textarea-bordered w-full"></textarea>
<div>
<label for="key-alias" class="mb-1 block text-sm font-medium">Model Alias</label>
<textarea id="key-alias" name="model_alias" v-model="key.model_alias" rows="2" placeholder='{}'
spellcheck="false" class="textarea textarea-bordered w-full font-mono text-sm"></textarea>
</div>
<div class="form-control">
<label for="parameters" class="label">
<span class="label-text">Parameters (JSON)</span>
</label>
<textarea id="parameters" v-model="key.parameters" placeholder="{}"
class="textarea textarea-sm textarea-bordered w-full"></textarea>
<div>
<label for="key-parameters" class="mb-1 block text-sm font-medium">Parameters (JSON)</label>
<textarea id="key-parameters" name="parameters" v-model="key.parameters" rows="2" placeholder="{}"
spellcheck="false" class="textarea textarea-bordered w-full font-mono text-sm"></textarea>
</div>
<div class="md:col-span-2 form-control">
<label for="support_models" class="label">
<span class="label-text">Support Models</span>
</label>
<!-- <textarea id="support_models" v-model="key.support_models_text"
placeholder='["model1", "model2"]' class="textarea textarea-sm textarea-bordered w-full"></textarea> -->
<TagInput v-model="key.support_models_array" clearable
placeholder="Please input" @change="onchange_supportmodel" />
</div>
<label class="block">
<span class="mb-1 block text-sm font-medium">Support Models</span>
<TagInput v-model="key.support_models_array" clearable placeholder="Type a model and press Enter"
@change="onchange_supportmodel" />
</label>
<div class="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="key.active"
:class="`toggle toggle-sm ${key.active ? 'toggle-success' : 'toggle-error'}`" />
<span class="text-sm text-base-content/90">
<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="key.active" role="switch" class="toggle toggle-sm"
:class="key.active ? 'toggle-success' : 'toggle-error'" aria-label="Key active" />
<span class="text-sm text-base-content/70">
{{ key.active ? 'Active' : 'Inactive' }}
</span>
</div>
</div>
</div>
</div>
</div>
<div class="flex justify-end pt-4 items-center gap-2">
<button @click="cancel" class="btn btn-sm btn-outline">Back</button>
<button type="submit" class="btn btn-outline btn-sm px-4 text-sm font-medium btn-success">
Update
</section>
<div class="flex items-center justify-end gap-3 border-t border-base-300/40 pt-4">
<button type="button" @click="cancel" class="btn btn-ghost btn-sm">Back</button>
<button type="submit" class="btn btn-primary btn-sm px-5" :disabled="updating">
<span v-if="updating" class="loading loading-spinner loading-xs" aria-hidden="true"></span>
Save Changes
</button>
</div>
</form>
</div>
</div>
<!-- Loading state -->
<div v-else class="card border border-base-300/60 bg-base-100 shadow-sm">
<div class="card-body">
<div class="flex items-center justify-center py-10" role="status" aria-label="Loading key details">
<span class="loading loading-spinner loading-lg text-primary"></span>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed, onMounted, reactive } from 'vue';
import { computed, onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useKeyStore } from '@/stores/key';
import { useKeyStore } from '../../stores/key';
import BreadcrumbHeader from '@/components/dashboard/BreadcrumbHeader.vue';
import TagInput from '@/components/common/TagInput.vue';
import { useToast } from '@/composables/toast';
@@ -169,6 +143,7 @@ const route = useRoute();
const router = useRouter();
const keyStore = useKeyStore();
const { setToast } = useToast();
const updating = ref(false);
const keyId = computed(() => route.query.id);
@@ -210,6 +185,7 @@ const onchange_supportmodel = () => {
const updateKey = async () => {
if (!key.value) return;
updating.value = true;
try {
const res = await keyStore.updateKey(key.value);
console.log('updateKey', res)
@@ -219,6 +195,8 @@ const updateKey = async () => {
await keyStore.refreshKey(key.value.id);
} catch (err: any) {
console.error('Error updating key:', err);
} finally {
updating.value = false;
}
};
@@ -226,4 +204,4 @@ const cancel = () => {
router.push({ name: 'ApiKey' });
}
</script>
</script>