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

fix UI & token copy

Browse Source
This commit is contained in:
Sakurasan
2025-04-20 02:03:13 +08:00
parent 54246c542a
commit ed42f3ded7
23 changed files with 488 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
frontend/src/views/dashboard/Keys.vue
View File

@@ -2,12 +2,12 @@
<div class="min-h-screen bg-base-100 p-4">
<!-- Breadcrumb and Title -->
<BreadcrumbHeader />
<!-- <div v-if="keyStore.loading" class="loading loading-spinner loading-lg"></div> -->
<div class="flex flex-wrap gap-2 mb-4" v-if="keys">
<div class="flex flex-1 items-center space-x-2">
<input
class="flex rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 h-8 w-[150px] lg:w-[250px]"
class="flex rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 h-8 w-[120px] lg:w-[250px]"
placeholder="Filter" value="">
<div class="dropdown">
@@ -33,7 +33,8 @@
</div>
<button class="btn btn-outline btn-success btn-sm gap-1" onclick="myModal.showModal()">
<div class="flex flex-1 items-center justify-end space-x-2">
<button class="btn btn-outline btn-success btn-sm gap-1" onclick="myModal.showModal()">
<PlusIcon class="w-3.5 h-3.5" />New
</button>
<dialog id="myModal" class="modal" ref="modalRef">
@@ -48,6 +49,7 @@
<button>关闭</button>
</form>
</dialog>
</div>
<div class="dropdown dropdown-end dropdown-hover">
<div tabindex="0" role="button" class="btn btn-ghost btn-sm p-1 h-8 w-8">
@@ -85,13 +87,15 @@
<thead>
<tr>
<th>
<input type="checkbox" class="checkbox checkbox-xs" v-model="selectAll" @change="toggleSelectAll" />
<div class="flex gap-1 items-center">
<input type="checkbox" class="checkbox checkbox-xs" v-model="selectAll" @change="toggleSelectAll" />
</div>
</th>
<th>Type</th>
<th>Name</th>
<th>Active</th>
<th>Key</th>
<th>Endpoint</th>
<!-- <th>Key</th> -->
<!-- <th>Endpoint</th> -->
<th></th>
</tr>
</thead>
@@ -100,27 +104,38 @@
<tr v-for="key in keys" :key="key.id"
class="hover:bg-gray-500/50 dark:hover:bg-neutral-600 transition-colors">
<td>
<input type="checkbox" class="checkbox checkbox-xs" v-model="key.selected"
@change="toggleUserSelection(key)" />
<div class="flex gap-1 items-center">
<input type="checkbox" class="checkbox checkbox-xs" v-model="key.selected"
@change="toggleUserSelection(key)" />
</div>
</td>
<td class="text-xs dark:text-white">
<div class="flex gap-1 items-center">
<span class="backdrop-blur-lg glass rounded-full border-none"> <img :src="displayIcon(key.type)"
class="w-5 h-5" alt=""></span>
{{ key.type }}
</div>
</td>
<td class="text-xs dark:text-white">{{ key.type }}</td>
<td class="text-xs dark:text-white">{{ key.name }}</td>
<td>
<input type="checkbox" class="toggle toggle-xs" :class="key.active ? 'toggle-success' : 'toggle-error'"
v-model="key.active" @change="updateStatus(key)" />
<div class="flex gap-1">
<input type="checkbox" class="toggle toggle-xs" :class="key.active ? 'toggle-success' : 'toggle-error'"
v-model="key.active" @change="updateStatus(key)" />
</div>
</td>
<td class="text-xs dark:text-white">{{ key.apikey }}</td>
<td class="text-xs dark:text-white">{{ key.endpoint }}</td>
<!-- <td class="text-xs dark:text-white">{{ key.apikey }}</td> -->
<!-- <td class="text-xs dark:text-white">{{ key.endpoint }}</td> -->
<td>
<div class="flex gap-1">
<div class="lg:tooltip lg:tooltip-top lg:tooltip-open" data-tip="预览">
<button class="btn btn-ghost btn-xs btn-square " @click="viewKey(key)">
<EyeIcon class="w-3.5 h-3.5 dark:text-white" />
<EyeIcon class="w-4 h-4 dark:text-white" />
</button>
</div>
<div class="lg:tooltip lg:tooltip-top lg:tooltip-open" data-tip="删除">
<button class="btn btn-ghost btn-xs btn-square text-error hover:bg-error/30" @click="confirmDeleteKey(key)">
<TrashIcon class="w-3.5 h-3.5 dark:text-white" />
<button class="btn btn-ghost btn-xs btn-square text-error hover:bg-error/30"
@click="confirmDeleteKey(key)">
<TrashIcon class="w-4 h-4 dark:text-white" />
</button>
</div>
</div>
@@ -133,7 +148,7 @@
<!-- Pagination -->
<Pagination :currentPage="currentPage" :totalItems="totalItems" :pageSize="pageSize"
:pageSizeOptions="[ 10, 20, 50, 100]" @changePage="changePage" @changePageSize="changePageSize" />
:pageSizeOptions="[10, 20, 50, 100]" @changePage="changePage" @changePageSize="changePageSize" />
</div>
</template>
@@ -305,6 +320,24 @@ const deleteKey = async (key) => {
}
};
const displayIcon = (apitype) => {
switch (apitype) {
case 'openai':
return '/assets/openai.svg';
case 'claude':
return '/assets/claude.svg';
case 'gemini':
return '/assets/gemini.svg'
case 'azure':
return '/assets/azure.svg';
case 'github':
return '/assets/github.svg';
default:
return '/assets/logo.svg';
}
}
// 关闭模态框
const modalRef = ref(null);
const closeModal = async () => {