modify style

This commit is contained in:
MaysWind
2025-07-07 23:15:26 +08:00
parent b05a53ffe3
commit 5c9eb5dc5a
3 changed files with 45 additions and 34 deletions
+19
View File
@@ -133,6 +133,14 @@ input[type=number] {
height: 10px;
}
.bidirectional-switch {
cursor: pointer;
}
.bidirectional-switch.v-input--horizontal .v-input__prepend {
margin-right: 10px; /* same as the padding-left of `.v-switch .v-label` */
}
.code-container {
background-color: #efefef;
}
@@ -163,6 +171,17 @@ input[type=number] {
cursor: pointer !important;
}
.always-cursor-text,
.always-cursor-text.v-input.v-input--readonly input,
.always-cursor-text.v-input.v-input--readonly textarea,
.always-cursor-text.v-input.v-input--readonly .v-field .v-text-field__prefix,
.always-cursor-text.v-input.v-input--readonly .v-field .v-text-field__suffix,
.always-cursor-text.v-input.v-input--readonly .v-field .v-field__input,
.always-cursor-text.v-input.v-input--readonly .v-field.v-field,
.always-cursor-text.v-input.v-input--readonly .cursor-pointer {
cursor: text !important;
}
.v-table {
th {
background: rgb(var(--v-table-header-background)) !important;
@@ -30,7 +30,7 @@
</template>
<v-card-text class="py-0 w-100 d-flex justify-center">
<v-switch class="export-data-display-switch" color="secondary"
<v-switch class="bidirectional-switch" color="secondary"
:label="tt('Raw Data')"
v-model="showRawData"
@click="showRawData = !showRawData">
@@ -46,7 +46,7 @@
fixed-footer
multi-sort
density="compact"
height="365"
height="360"
:headers="dataTableHeaders"
:items="dataTableItems"
:hover="true"
@@ -55,8 +55,9 @@
:no-data-text="tt('No data')"
v-if="!showRawData"
></v-data-table>
<div class="w-100 pl-2 code-container" v-if="showRawData">
<textarea class="w-100" style="outline: none; height: 360px" :readonly="true" :value="exportedData"></textarea>
<div class="w-100 code-container" v-if="showRawData">
<v-textarea class="w-100 always-cursor-text" style="height: 360px" :readonly="true"
:value="exportedData"></v-textarea>
</div>
</v-card-text>
@@ -217,13 +218,3 @@ defineExpose({
open
});
</script>
<style>
.export-data-display-switch {
cursor: pointer;
}
.export-data-display-switch.v-input--horizontal .v-input__prepend {
margin-right: 10px; /* same as the padding-left of `.v-switch .v-label` */
}
</style>
@@ -8,7 +8,7 @@
</template>
<v-card-text class="py-0 w-100 d-flex justify-center" v-if="generatedToken && serverUrl">
<v-switch class="export-data-display-switch" color="secondary"
<v-switch class="bidirectional-switch" color="secondary"
:label="tt('Configuration')"
v-model="showConfiguration"
@click="showConfiguration = !showConfiguration">
@@ -18,24 +18,25 @@
</v-switch>
</v-card-text>
<v-card-text>
<v-row>
<v-col cols="12" md="12" v-if="!generatedToken">
<v-text-field
autocomplete="current-password"
type="password"
:disabled="generating"
:label="tt('Current Password')"
:placeholder="tt('Current Password')"
v-model="currentPassword"
@keyup.enter="generateToken"
/>
</v-col>
<v-col cols="12" md="12" v-if="generatedToken">
<v-textarea :readonly="true" :rows="4" :value="generatedToken" v-if="!showConfiguration || !serverUrl" />
<v-textarea :readonly="true" :rows="15" :value="mcpServerConfiguration" v-if="showConfiguration && serverUrl" />
</v-col>
</v-row>
<v-card-text class="my-md-4 w-100 d-flex justify-center">
<div class="w-100" v-if="!generatedToken">
<v-text-field
autocomplete="current-password"
type="password"
:autofocus="true"
:disabled="generating"
:label="tt('Current Password')"
:placeholder="tt('Current Password')"
v-model="currentPassword"
@keyup.enter="generateToken"
/>
</div>
<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="!showConfiguration || !serverUrl" />
<v-textarea class="w-100 always-cursor-text" :readonly="true"
:rows="15" :value="mcpServerConfiguration" v-if="showConfiguration && serverUrl" />
</div>
</v-card-text>
<v-card-text class="overflow-y-visible">
<div ref="buttonContainer" class="w-100 d-flex justify-center gap-4">
@@ -45,7 +46,7 @@
</v-btn>
<v-btn color="secondary" variant="tonal" :disabled="generating"
@click="cancel" v-if="!generatedToken">{{ tt('Cancel') }}</v-btn>
<v-btn @click="copy" v-if="generatedToken">{{ tt('Copy') }}</v-btn>
<v-btn variant="tonal" @click="copy" v-if="generatedToken">{{ tt('Copy') }}</v-btn>
<v-btn color="secondary" variant="tonal" @click="close" v-if="generatedToken">{{ tt('Close') }}</v-btn>
</div>
</v-card-text>