mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-16 07:57:33 +08:00
reduce dialog margins and make the action buttons always at the bottom of the dialog
This commit is contained in:
MaysWind
@@ -1,56 +1,64 @@
|
||||
<template>
|
||||
<v-dialog width="800" :persistent="true" v-model="showState">
|
||||
<v-card class="pa-2 pa-sm-4 pa-md-4">
|
||||
<v-card class="pa-sm-1 pa-md-2">
|
||||
<template #title>
|
||||
<div class="d-flex align-center justify-center">
|
||||
<div class="d-flex flex-wrap align-center justify-center">
|
||||
<h4 class="text-h4">{{ tt('Generate Token') }}</h4>
|
||||
<v-spacer/>
|
||||
<v-tooltip :text="tt('Token Type')">
|
||||
<template #activator="{ props }">
|
||||
<div v-bind="props" class="d-inline-block">
|
||||
<v-switch class="bidirectional-switch ms-2 pt-1" color="secondary"
|
||||
:disabled="generating || !isAPITokenEnabled() || !isMCPServerEnabled()"
|
||||
:label="tt('MCP Token')"
|
||||
:model-value="tokenType === 'mcp'"
|
||||
@click="tokenType = tokenType === 'api' ? 'mcp' : 'api'"
|
||||
v-if="!generatedToken">
|
||||
<template #prepend>
|
||||
<span>{{ tt('API Token') }}</span>
|
||||
</template>
|
||||
</v-switch>
|
||||
</div>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
<v-switch class="bidirectional-switch ms-2 pt-1" color="secondary"
|
||||
:label="tt('Example')"
|
||||
v-model="showAPIExample"
|
||||
@click="showAPIExample = !showAPIExample"
|
||||
v-if="tokenType === 'api' && generatedToken && serverUrl">
|
||||
<template #prepend>
|
||||
<span>{{ tt('Token') }}</span>
|
||||
</template>
|
||||
</v-switch>
|
||||
<v-switch class="bidirectional-switch ms-2 pt-1" color="secondary"
|
||||
:label="tt('Configuration')"
|
||||
v-model="showMCPConfiguration"
|
||||
@click="showMCPConfiguration = !showMCPConfiguration"
|
||||
v-if="tokenType === 'mcp' && generatedToken && serverUrl">
|
||||
<template #prepend>
|
||||
<span>{{ tt('Token') }}</span>
|
||||
</template>
|
||||
</v-switch>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<v-card-text class="py-0 w-100 d-flex justify-center" v-if="tokenType === 'api' && generatedToken && serverUrl">
|
||||
<v-switch class="bidirectional-switch" color="secondary"
|
||||
:label="tt('Example')"
|
||||
v-model="showAPIExample"
|
||||
@click="showAPIExample = !showAPIExample">
|
||||
<template #prepend>
|
||||
<span>{{ tt('Token') }}</span>
|
||||
</template>
|
||||
</v-switch>
|
||||
<v-card-text v-if="(tokenExpirationTime === 0 || (tokenExpirationTime < 0 && tokenCustomExpirationTime === 0)) || tokenType === 'mcp'">
|
||||
<v-alert type="warning" variant="tonal">
|
||||
<span v-if="tokenExpirationTime === 0 || (tokenExpirationTime < 0 && tokenCustomExpirationTime === 0)">{{ tt('Your token does not expire, please keep it secure.') }}</span>
|
||||
<span v-if="tokenType === 'mcp'">{{ tt('When connecting to third-party apps, be aware that they and any large language models they use can access your private data.') }}</span>
|
||||
</v-alert>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-text class="py-0 w-100 d-flex justify-center" v-if="tokenType === 'mcp' && generatedToken && serverUrl">
|
||||
<v-switch class="bidirectional-switch" color="secondary"
|
||||
:label="tt('Configuration')"
|
||||
v-model="showMCPConfiguration"
|
||||
@click="showMCPConfiguration = !showMCPConfiguration">
|
||||
<template #prepend>
|
||||
<span>{{ tt('Token') }}</span>
|
||||
</template>
|
||||
</v-switch>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-text class="mt-md-4 w-100 d-flex justify-center">
|
||||
<div class="w-100" v-if="!generatedToken">
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
<v-select
|
||||
item-title="name"
|
||||
item-value="value"
|
||||
:disabled="generating"
|
||||
:label="tt('Token Type')"
|
||||
:placeholder="tt('Token Type')"
|
||||
:items="tokenTypeOptions"
|
||||
v-model="tokenType"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" :md="tokenExpirationTime >= 0 ? 12 : 6">
|
||||
<v-select
|
||||
item-title="displayName"
|
||||
item-value="value"
|
||||
:disabled="generating"
|
||||
:label="tt('Expiration Time')"
|
||||
:placeholder="tt('Expiration Time')"
|
||||
:items="[
|
||||
<v-card-text class="mt-md-2 pt-0" v-if="!generatedToken">
|
||||
<v-row>
|
||||
<v-col cols="12" :md="tokenExpirationTime >= 0 ? 12 : 6">
|
||||
<v-select
|
||||
item-title="displayName"
|
||||
item-value="value"
|
||||
:disabled="generating"
|
||||
:label="tt('Expiration Time')"
|
||||
:placeholder="tt('Expiration Time')"
|
||||
:items="[
|
||||
{ displayName: tt('No Expiration'), value: 0 },
|
||||
{ displayName: tt('format.misc.nHour', { n: formatNumberToLocalizedNumerals(1) }), value: 3600 },
|
||||
{ displayName: tt('format.misc.nDays', { n: formatNumberToLocalizedNumerals(1) }), value: 86400 },
|
||||
@@ -61,56 +69,50 @@
|
||||
{ displayName: tt('format.misc.nDays', { n: formatNumberToLocalizedNumerals(365) }), value: 31536000 },
|
||||
{ displayName: tt('Custom'), value: -1 }
|
||||
]"
|
||||
v-model="tokenExpirationTime"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6" v-if="tokenExpirationTime < 0">
|
||||
<number-input
|
||||
:persistent-placeholder="true"
|
||||
:disabled="generating"
|
||||
:label="tt('Custom Expiration Time (Seconds)')"
|
||||
:placeholder="tt('Custom Expiration Time (Seconds)')"
|
||||
:max-decimal-count="0"
|
||||
:min-value="0"
|
||||
:max-value="4294967295"
|
||||
v-model="tokenCustomExpirationTime"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="12">
|
||||
<v-text-field
|
||||
autocomplete="current-password"
|
||||
type="password"
|
||||
persistent-placeholder
|
||||
:autofocus="true"
|
||||
:disabled="generating"
|
||||
:label="tt('Current Password')"
|
||||
:placeholder="tt('Current Password')"
|
||||
v-model="currentPassword"
|
||||
@keyup.enter="generateToken"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
v-model="tokenExpirationTime"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6" v-if="tokenExpirationTime < 0">
|
||||
<number-input
|
||||
:persistent-placeholder="true"
|
||||
:disabled="generating"
|
||||
:label="tt('Custom Expiration Time (Seconds)')"
|
||||
:placeholder="tt('Custom Expiration Time (Seconds)')"
|
||||
:max-decimal-count="0"
|
||||
:min-value="0"
|
||||
:max-value="4294967295"
|
||||
v-model="tokenCustomExpirationTime"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="12">
|
||||
<v-text-field
|
||||
autocomplete="current-password"
|
||||
type="password"
|
||||
persistent-placeholder
|
||||
:autofocus="true"
|
||||
:disabled="generating"
|
||||
:label="tt('Current Password')"
|
||||
:placeholder="tt('Current Password')"
|
||||
v-model="currentPassword"
|
||||
@keyup.enter="generateToken"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
||||
<div class="w-100 code-container" v-if="generatedToken">
|
||||
<v-textarea class="w-100 always-cursor-text" :readonly="true"
|
||||
:rows="4" :value="generatedToken" v-if="(tokenType === 'api' && (!showAPIExample || !serverUrl)) || (tokenType === 'mcp' && (!showMCPConfiguration || !serverUrl))" />
|
||||
<v-textarea class="w-100 always-cursor-text" :readonly="true"
|
||||
:rows="5" :value="apiExample" v-if="tokenType === 'api' && showAPIExample && serverUrl" />
|
||||
<v-textarea class="w-100 always-cursor-text" :readonly="true"
|
||||
:rows="15" :value="mcpServerConfiguration" v-if="tokenType === 'mcp' && showMCPConfiguration && serverUrl" />
|
||||
<v-card-text class="flex-grow-1 overflow-y-auto" :style="codeContainerStyle" v-if="generatedToken">
|
||||
<div class="w-100 h-100 code-container">
|
||||
<v-textarea class="w-100 h-100 always-cursor-text" :readonly="true"
|
||||
:value="generatedToken" v-if="(tokenType === 'api' && (!showAPIExample || !serverUrl)) || (tokenType === 'mcp' && (!showMCPConfiguration || !serverUrl))" />
|
||||
<v-textarea class="w-100 h-100 always-cursor-text" :readonly="true"
|
||||
:value="apiExample" v-if="tokenType === 'api' && showAPIExample && serverUrl" />
|
||||
<v-textarea class="w-100 h-100 always-cursor-text" :readonly="true"
|
||||
:value="mcpServerConfiguration" v-if="tokenType === 'mcp' && showMCPConfiguration && serverUrl" />
|
||||
</div>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-text class="w-100" v-if="(tokenExpirationTime === 0 || (tokenExpirationTime < 0 && tokenCustomExpirationTime === 0)) || tokenType === 'mcp'">
|
||||
<v-alert type="warning" variant="tonal">
|
||||
<span v-if="tokenExpirationTime === 0 || (tokenExpirationTime < 0 && tokenCustomExpirationTime === 0)">{{ tt('Your token does not expire, please keep it secure.') }}</span>
|
||||
<span v-if="tokenType === 'mcp'">{{ tt('When connecting to third-party apps, be aware that they and any large language models they use can access your private data.') }}</span>
|
||||
</v-alert>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-text class="overflow-y-visible">
|
||||
<div ref="buttonContainer" class="w-100 d-flex justify-center gap-4">
|
||||
<v-card-text>
|
||||
<div ref="buttonContainer" class="w-100 d-flex justify-center flex-wrap mt-sm-1 mt-md-2 gap-4">
|
||||
<v-btn :disabled="generating || !currentPassword" @click="generateToken" v-if="!generatedToken">
|
||||
{{ tt('Generate') }}
|
||||
<v-progress-circular indeterminate size="22" class="ms-2" v-if="generating"></v-progress-circular>
|
||||
@@ -136,7 +138,6 @@ import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
import { useTokensStore } from '@/stores/token.ts';
|
||||
|
||||
import { type NameValue } from '@/core/base.ts';
|
||||
import { type TokenGenerateAPIResponse, type TokenGenerateMCPResponse } from '@/models/token.ts';
|
||||
|
||||
import { isAPITokenEnabled, isMCPServerEnabled } from '@/lib/server_settings.ts';
|
||||
@@ -165,18 +166,14 @@ const showMCPConfiguration = ref<boolean>(false);
|
||||
const serverUrl = ref<string>('');
|
||||
const generatedToken = ref<string>('');
|
||||
|
||||
const tokenTypeOptions = computed<NameValue[]>(() => {
|
||||
const options: NameValue[] = [];
|
||||
|
||||
if (isAPITokenEnabled()) {
|
||||
options.push({ name: tt('API Token'), value: 'api' });
|
||||
const codeContainerStyle = computed<string>(() => {
|
||||
if (tokenType.value === 'api' && showAPIExample.value && serverUrl.value) {
|
||||
return 'height: 160px';
|
||||
} else if (tokenType.value === 'mcp' && showMCPConfiguration.value && serverUrl.value) {
|
||||
return 'height: 390px';
|
||||
} else {
|
||||
return 'height: 160px';
|
||||
}
|
||||
|
||||
if (isMCPServerEnabled()) {
|
||||
options.push({ name: tt('MCP Token'), value: 'mcp' });
|
||||
}
|
||||
|
||||
return options;
|
||||
});
|
||||
|
||||
const apiExample = computed<string>(() => {
|
||||
|
||||
Reference in New Issue
Block a user