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

fix UI

Browse Source
This commit is contained in:
Sakurasan
2025-04-17 23:09:57 +08:00
parent 20c3cda4a7
commit fca67cae40
15 changed files with 579 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/dashboard/TokenNew.vue
+47 -46
View File
@@ -1,5 +1,5 @@
<template>
<div class="min-h-screen bg-base-100 p-4 md:p-6">
<div class="min-h-screen bg-base-100 p-2 md:p-6">
<BreadcrumbHeader />
<div class="max-w-3xl mx-auto">
@@ -24,7 +24,7 @@
</div>
<div class="card border border-base-300/40 shadow-sm">
<form @submit.prevent="createToken" class="card-body space-y-5">
<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
@@ -36,33 +36,11 @@
Name <span class="text-red-500">*</span>
</span>
</label>
<input id="username" type="text" v-model="newToken.name" placeholder="Select a username"
<input id="username" type="text" v-model="newToken.name" placeholder="New Token Name"
class="input input-sm input-bordered w-full" required />
</div>
<div class="form-control">
<label for="password" class="label">
<span class="label-text">
Key
</span>
</label>
<div class="relative">
<input id="password" :type="isPasswordVisible ? 'text' : 'password'" v-model="newToken.key"
class="input input-sm input-bordered w-full" />
<button type="button" @click="togglePasswordVisibility"
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="password-visibility-toggle">
<template v-if="!isPasswordVisible">
<EyeOff class="w-5 h-5" />
</template>
<template v-else>
<Eye class="w-5 h-5" />
</template>
</button>
</div>
</div>
</div>
</div>
@@ -74,18 +52,41 @@
</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="!isPasswordVisible">
<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"/>
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>
@@ -112,7 +113,7 @@
</span>
</div>
</div>
</div>
</div>
</div>
@@ -133,7 +134,7 @@
</template>
<script setup>
import { ref, computed, inject ,watch } from 'vue'
import { ref, computed, inject, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import BreadcrumbHeader from '@/components/dashboard/BreadcrumbHeader.vue';
@@ -144,7 +145,7 @@ const router = useRouter()
const authStore = useAuthStore()
const { setToast } = inject('toast')
const error = ref(null)
const user = computed(() =>authStore.user);
const user = computed(() => authStore.user);
const showAdvancedOptions = ref(false)
@@ -153,12 +154,12 @@ const newToken = ref({
name: '',
key: '',
user_id: user.user_id,
active: true,
quota: 0,
active: true,
quota: 0,
unlimited_quota: true,
expired_at: 0,
expired_at: 0,
format_expired_at: '',
never_expired:true,
never_expired: true,
})
const resetnewToken = () => {
@@ -166,12 +167,12 @@ const resetnewToken = () => {
name: '',
key: '',
user_id: '',
active: true,
quota: 0,
unlimited_quota: true,
active: true,
quota: 0,
unlimited_quota: true,
expired_at: 0,
format_expired_at: '',
never_expired:true,
format_expired_at: '',
never_expired: true,
}
}
@@ -184,11 +185,11 @@ watch(
}
);
watch(
() =>newToken.value.format_expired_at,
(format_expired_at)=> {
if(!newToken.value.never_expired && format_expired_at) {
() => newToken.value.format_expired_at,
(format_expired_at) => {
if (!newToken.value.never_expired && format_expired_at) {
newToken.value.expired_at = dateToUnix(format_expired_at);
}else{
} else {
newToken.value.expired_at = 0;
}
}
@@ -231,10 +232,10 @@ const deleteToken = async (id) => {
}
// 显示密码
const isPasswordVisible = ref(false);
const isTokenVisible = ref(false);
function togglePasswordVisibility() {
isPasswordVisible.value = !isPasswordVisible.value;
function toggleTokenVisibility() {
isTokenVisible.value = !isTokenVisible.value;
}
const emit = defineEmits(['closeModal'])