study/uTools-quickcommand
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-quickcommand.git synced 2025-06-29 12:22:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化 AxiosConfigEditor 和 ubrowser 组件的样式和布局

Browse Source
This commit is contained in:
fofolee 2025-02-09 22:10:50 +08:00
parent 5a0675d913
commit 742b5122c2
2 changed files with 22 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/composer/network/AxiosConfigEditor.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm axios-config-editor">
<!-- 基础配置 --> <!-- 基础配置 -->
<div class="col-12"> <div class="col-12">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
@ -64,7 +64,7 @@
<q-tab-panels v-model="activeTab" animated class="q-px-none"> <q-tab-panels v-model="activeTab" animated class="q-px-none">
<!-- Headers tab --> <!-- Headers tab -->
<q-tab-panel name="headers" class="q-pa-sm"> <q-tab-panel name="headers" class="q-pa-none q-pt-sm">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<div class="col-12"> <div class="col-12">
<q-select <q-select
@ -112,14 +112,18 @@
</q-tab-panel> </q-tab-panel>
<!-- 请求体和URL参数 tabs --> <!-- 请求体和URL参数 tabs -->
<q-tab-panel v-if="hasRequestData" name="data" class="q-pa-sm"> <q-tab-panel
v-if="hasRequestData"
name="data"
class="q-pa-none q-pt-sm"
>
<DictEditor <DictEditor
v-model="argvs.data" v-model="argvs.data"
@update:model-value="updateArgvs('data', $event)" @update:model-value="updateArgvs('data', $event)"
/> />
</q-tab-panel> </q-tab-panel>
<q-tab-panel name="params" class="q-pa-sm"> <q-tab-panel name="params" class="q-pa-none q-pt-sm">
<DictEditor <DictEditor
v-model="argvs.params" v-model="argvs.params"
@update:model-value="updateArgvs('params', $event)" @update:model-value="updateArgvs('params', $event)"
@ -128,7 +132,7 @@
<!-- 其他通用 panels --> <!-- 其他通用 panels -->
<template v-for="panel in commonPanels" :key="panel.name"> <template v-for="panel in commonPanels" :key="panel.name">
<q-tab-panel :name="panel.name" class="q-pa-sm"> <q-tab-panel :name="panel.name" class="q-pa-none q-pt-sm">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<div <div
v-for="field in panel.fields" v-for="field in panel.fields"
@ -501,3 +505,9 @@ export default defineComponent({
}, },
}); });
</script> </script>
<style scoped>
.axios-config-editor :deep(.q-tab-panel) {
overflow: hidden;
}
</style>

23
src/components/composer/ubrowser/UBrowserEditor.vue
View File

@ -119,7 +119,7 @@ export default {
}; };
</script> </script>
<style> <style scoped>
.ubrowser-editor { .ubrowser-editor {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -142,8 +142,8 @@ export default {
overflow: auto; overflow: auto;
} }
.panel-content { .ubrowser-editor :deep(.panel-content) {
padding: 12px; padding: 8px 0 0 0;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
} }
@ -154,15 +154,6 @@ export default {
background-color: var(--q-card-background); background-color: var(--q-card-background);
} }
.ubrowser-editor :deep(.q-tab) {
min-height: 36px;
padding: 0 12px;
font-size: 13px;
font-weight: 500;
text-transform: none;
opacity: 0.7;
}
.ubrowser-editor :deep(.q-tab--active) { .ubrowser-editor :deep(.q-tab--active) {
opacity: 1; opacity: 1;
} }
@ -172,14 +163,14 @@ export default {
margin-right: 4px; margin-right: 4px;
} }
.ubrowser-editor :deep(.q-tab__label) {
line-height: 1.2;
}
.ubrowser-editor :deep(.q-tab__indicator) { .ubrowser-editor :deep(.q-tab__indicator) {
height: 2px; height: 2px;
} }
.ubrowser-editor :deep(.q-tab__label) {
font-size: 13px;
}
/* 暗色模式适配 */ /* 暗色模式适配 */
.body--dark .ubrowser-editor { .body--dark .ubrowser-editor {
background-color: var(--q-dark); background-color: var(--q-dark);