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; 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 { .code-container {
background-color: #efefef; background-color: #efefef;
} }
@@ -163,6 +171,17 @@ input[type=number] {
cursor: pointer !important; 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 { .v-table {
th { th {
background: rgb(var(--v-table-header-background)) !important; background: rgb(var(--v-table-header-background)) !important;
@@ -30,7 +30,7 @@
</template> </template>
<v-card-text class="py-0 w-100 d-flex justify-center"> <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')" :label="tt('Raw Data')"
v-model="showRawData" v-model="showRawData"
@click="showRawData = !showRawData"> @click="showRawData = !showRawData">
@@ -46,7 +46,7 @@
fixed-footer fixed-footer
multi-sort multi-sort
density="compact" density="compact"
height="365" height="360"
:headers="dataTableHeaders" :headers="dataTableHeaders"
:items="dataTableItems" :items="dataTableItems"
:hover="true" :hover="true"
@@ -55,8 +55,9 @@
:no-data-text="tt('No data')" :no-data-text="tt('No data')"
v-if="!showRawData" v-if="!showRawData"
></v-data-table> ></v-data-table>
<div class="w-100 pl-2 code-container" v-if="showRawData"> <div class="w-100 code-container" v-if="showRawData">
<textarea class="w-100" style="outline: none; height: 360px" :readonly="true" :value="exportedData"></textarea> <v-textarea class="w-100 always-cursor-text" style="height: 360px" :readonly="true"
:value="exportedData"></v-textarea>
</div> </div>
</v-card-text> </v-card-text>
@@ -217,13 +218,3 @@ defineExpose({
open open
}); });
</script> </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> </template>
<v-card-text class="py-0 w-100 d-flex justify-center" v-if="generatedToken && serverUrl"> <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')" :label="tt('Configuration')"
v-model="showConfiguration" v-model="showConfiguration"
@click="showConfiguration = !showConfiguration"> @click="showConfiguration = !showConfiguration">
@@ -18,24 +18,25 @@
</v-switch> </v-switch>
</v-card-text> </v-card-text>
<v-card-text> <v-card-text class="my-md-4 w-100 d-flex justify-center">
<v-row> <div class="w-100" v-if="!generatedToken">
<v-col cols="12" md="12" v-if="!generatedToken"> <v-text-field
<v-text-field autocomplete="current-password"
autocomplete="current-password" type="password"
type="password" :autofocus="true"
:disabled="generating" :disabled="generating"
:label="tt('Current Password')" :label="tt('Current Password')"
:placeholder="tt('Current Password')" :placeholder="tt('Current Password')"
v-model="currentPassword" v-model="currentPassword"
@keyup.enter="generateToken" @keyup.enter="generateToken"
/> />
</v-col> </div>
<v-col cols="12" md="12" v-if="generatedToken"> <div class="w-100 code-container" v-if="generatedToken">
<v-textarea :readonly="true" :rows="4" :value="generatedToken" v-if="!showConfiguration || !serverUrl" /> <v-textarea class="w-100 always-cursor-text" :readonly="true"
<v-textarea :readonly="true" :rows="15" :value="mcpServerConfiguration" v-if="showConfiguration && serverUrl" /> :rows="4" :value="generatedToken" v-if="!showConfiguration || !serverUrl" />
</v-col> <v-textarea class="w-100 always-cursor-text" :readonly="true"
</v-row> :rows="15" :value="mcpServerConfiguration" v-if="showConfiguration && serverUrl" />
</div>
</v-card-text> </v-card-text>
<v-card-text class="overflow-y-visible"> <v-card-text class="overflow-y-visible">
<div ref="buttonContainer" class="w-100 d-flex justify-center gap-4"> <div ref="buttonContainer" class="w-100 d-flex justify-center gap-4">
@@ -45,7 +46,7 @@
</v-btn> </v-btn>
<v-btn color="secondary" variant="tonal" :disabled="generating" <v-btn color="secondary" variant="tonal" :disabled="generating"
@click="cancel" v-if="!generatedToken">{{ tt('Cancel') }}</v-btn> @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> <v-btn color="secondary" variant="tonal" @click="close" v-if="generatedToken">{{ tt('Close') }}</v-btn>
</div> </div>
</v-card-text> </v-card-text>