group form style
This commit is contained in:
hptangxi
@@ -13,7 +13,6 @@ import {
|
|||||||
NInputNumber,
|
NInputNumber,
|
||||||
NModal,
|
NModal,
|
||||||
NSelect,
|
NSelect,
|
||||||
NSpace,
|
|
||||||
useMessage,
|
useMessage,
|
||||||
} from "naive-ui";
|
} from "naive-ui";
|
||||||
import { reactive, ref, watch } from "vue";
|
import { reactive, ref, watch } from "vue";
|
||||||
@@ -309,7 +308,9 @@ async function handleSubmit() {
|
|||||||
v-model:value="formData.description"
|
v-model:value="formData.description"
|
||||||
type="textarea"
|
type="textarea"
|
||||||
placeholder="可选，分组描述信息"
|
placeholder="可选，分组描述信息"
|
||||||
:rows="3"
|
:rows="2"
|
||||||
|
:autosize="{ minRows: 2, maxRows: 2 }"
|
||||||
|
style="resize: none"
|
||||||
/>
|
/>
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
|
|
||||||
@@ -335,7 +336,7 @@ async function handleSubmit() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 上游地址 -->
|
<!-- 上游地址 -->
|
||||||
<div class="form-section">
|
<div class="form-section" style="margin-top: 10px">
|
||||||
<h4 class="section-title">上游地址</h4>
|
<h4 class="section-title">上游地址</h4>
|
||||||
|
|
||||||
<n-form-item
|
<n-form-item
|
||||||
@@ -345,36 +346,40 @@ async function handleSubmit() {
|
|||||||
:path="`upstreams[${index}].url`"
|
:path="`upstreams[${index}].url`"
|
||||||
:rule="{
|
:rule="{
|
||||||
required: true,
|
required: true,
|
||||||
message: '请输入上游地址',
|
message: '',
|
||||||
trigger: ['blur', 'input'],
|
trigger: ['blur', 'input'],
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<n-space style="width: 100%">
|
<div class="flex items-center gap-2" style="width: 100%">
|
||||||
<n-input
|
<n-input
|
||||||
v-model:value="upstream.url"
|
v-model:value="upstream.url"
|
||||||
placeholder="https://api.openai.com"
|
placeholder="https://api.openai.com"
|
||||||
style="flex: 1"
|
style="flex: 1"
|
||||||
/>
|
/>
|
||||||
|
<span class="form-label">权重</span>
|
||||||
<n-input-number
|
<n-input-number
|
||||||
v-model:value="upstream.weight"
|
v-model:value="upstream.weight"
|
||||||
:min="1"
|
:min="1"
|
||||||
placeholder="权重"
|
placeholder="权重"
|
||||||
style="width: 80px"
|
style="width: 100px"
|
||||||
/>
|
/>
|
||||||
<n-button
|
<div style="width: 40px">
|
||||||
v-if="formData.upstreams.length > 1"
|
<n-button
|
||||||
@click="removeUpstream(index)"
|
v-if="formData.upstreams.length > 1"
|
||||||
type="error"
|
@click="removeUpstream(index)"
|
||||||
quaternary
|
type="error"
|
||||||
circle
|
quaternary
|
||||||
>
|
circle
|
||||||
<template #icon>
|
style="margin-left: 10px"
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
>
|
||||||
<path d="M19 13H5v-2h14v2z" />
|
<template #icon>
|
||||||
</svg>
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||||
</template>
|
<path d="M19 13H5v-2h14v2z" />
|
||||||
</n-button>
|
</svg>
|
||||||
</n-space>
|
</template>
|
||||||
|
</n-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
|
|
||||||
<n-form-item>
|
<n-form-item>
|
||||||
@@ -390,7 +395,7 @@ async function handleSubmit() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 高级配置 -->
|
<!-- 高级配置 -->
|
||||||
<div class="form-section">
|
<div class="form-section" style="margin-top: 10px">
|
||||||
<n-collapse>
|
<n-collapse>
|
||||||
<n-collapse-item title="高级配置" name="advanced">
|
<n-collapse-item title="高级配置" name="advanced">
|
||||||
<div class="config-section">
|
<div class="config-section">
|
||||||
@@ -405,11 +410,11 @@ async function handleSubmit() {
|
|||||||
:path="`configItems[${index}].key`"
|
:path="`configItems[${index}].key`"
|
||||||
:rule="{
|
:rule="{
|
||||||
required: true,
|
required: true,
|
||||||
message: '请选择配置参数',
|
message: '',
|
||||||
trigger: ['blur', 'change'],
|
trigger: ['blur', 'change'],
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<n-space style="width: 100%" align="center">
|
<div class="flex items-center" style="width: 100%">
|
||||||
<n-select
|
<n-select
|
||||||
v-model:value="configItem.key"
|
v-model:value="configItem.key"
|
||||||
:options="
|
:options="
|
||||||
@@ -429,7 +434,7 @@ async function handleSubmit() {
|
|||||||
<n-input-number
|
<n-input-number
|
||||||
v-model:value="configItem.value"
|
v-model:value="configItem.value"
|
||||||
placeholder="参数值"
|
placeholder="参数值"
|
||||||
style="width: 150px"
|
style="width: 180px; margin-left: 15px"
|
||||||
:precision="0"
|
:precision="0"
|
||||||
/>
|
/>
|
||||||
<n-button
|
<n-button
|
||||||
@@ -438,6 +443,7 @@ async function handleSubmit() {
|
|||||||
quaternary
|
quaternary
|
||||||
circle
|
circle
|
||||||
size="small"
|
size="small"
|
||||||
|
style="margin-left: 10px"
|
||||||
>
|
>
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||||
@@ -445,23 +451,25 @@ async function handleSubmit() {
|
|||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
</n-button>
|
</n-button>
|
||||||
</n-space>
|
</div>
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<n-button
|
<div style="margin-top: 12px; padding-left: 120px">
|
||||||
@click="addConfigItem"
|
<n-button
|
||||||
dashed
|
@click="addConfigItem"
|
||||||
style="width: 100%; margin-top: 12px"
|
dashed
|
||||||
:disabled="formData.configItems.length >= configOptions.length"
|
style="width: 100%"
|
||||||
>
|
:disabled="formData.configItems.length >= configOptions.length"
|
||||||
<template #icon>
|
>
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
<template #icon>
|
||||||
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||||
</svg>
|
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
|
||||||
</template>
|
</svg>
|
||||||
添加配置参数
|
</template>
|
||||||
</n-button>
|
添加配置参数
|
||||||
|
</n-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="config-section">
|
<div class="config-section">
|
||||||
<h5 class="config-title">参数覆盖</h5>
|
<h5 class="config-title">参数覆盖</h5>
|
||||||
@@ -471,7 +479,7 @@ async function handleSubmit() {
|
|||||||
v-model:value="formData.param_overrides"
|
v-model:value="formData.param_overrides"
|
||||||
type="textarea"
|
type="textarea"
|
||||||
placeholder="JSON 格式的参数覆盖配置"
|
placeholder="JSON 格式的参数覆盖配置"
|
||||||
:rows="8"
|
:rows="4"
|
||||||
/>
|
/>
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
</div>
|
</div>
|
||||||
@@ -499,7 +507,7 @@ async function handleSubmit() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.form-section {
|
.form-section {
|
||||||
margin-top: 24px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
@@ -515,6 +523,10 @@ async function handleSubmit() {
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(.n-form-item-blank) {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
:deep(.n-input) {
|
:deep(.n-input) {
|
||||||
--n-border-radius: 6px;
|
--n-border-radius: 6px;
|
||||||
}
|
}
|
||||||
@@ -529,10 +541,21 @@ async function handleSubmit() {
|
|||||||
|
|
||||||
:deep(.n-card-header) {
|
:deep(.n-card-header) {
|
||||||
border-bottom: 1px solid rgba(239, 239, 245, 0.8);
|
border-bottom: 1px solid rgba(239, 239, 245, 0.8);
|
||||||
|
padding: 10px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.n-card-footer) {
|
:deep(.n-card__content) {
|
||||||
|
max-height: calc(100vh - 68px - 61px - 50px);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.n-card__footer) {
|
||||||
border-top: 1px solid rgba(239, 239, 245, 0.8);
|
border-top: 1px solid rgba(239, 239, 245, 0.8);
|
||||||
|
padding: 10px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.n-form-item-feedback-wrapper) {
|
||||||
|
min-height: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.config-section {
|
.config-section {
|
||||||
@@ -546,12 +569,13 @@ async function handleSubmit() {
|
|||||||
margin: 0 0 12px 0;
|
margin: 0 0 12px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* .empty-config {
|
.form-label {
|
||||||
color: #9ca3af;
|
margin-left: 25px;
|
||||||
font-style: italic;
|
margin-right: 10px;
|
||||||
text-align: center;
|
height: 34px;
|
||||||
padding: 20px 0;
|
line-height: 34px;
|
||||||
} */
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
.config-item {
|
.config-item {
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
|
|||||||
Reference in New Issue
Block a user