fix: 模型超参/驾驶舱编排内容卡片化(a-card 包裹,对齐 FBA 原生页观感)
This commit is contained in:
Binary file not shown.
@@ -29,12 +29,13 @@ const [Form, formApi] = useVbenForm({
|
|||||||
<template>
|
<template>
|
||||||
<Page title="模型超参配置" description="PRD 5.3 · 超参包 JSON(vben-form)">
|
<Page title="模型超参配置" description="PRD 5.3 · 超参包 JSON(vben-form)">
|
||||||
<div class="hyper-layout">
|
<div class="hyper-layout">
|
||||||
<Form class="hyper-form" />
|
<a-card title="超参表单" :bordered="false" class="hyper-form">
|
||||||
<div class="hyper-preview">
|
<Form />
|
||||||
<div class="preview-title">超参包 JSON 实时预览</div>
|
</a-card>
|
||||||
|
<a-card title="超参包 JSON 实时预览" :bordered="false" class="hyper-preview">
|
||||||
<pre class="preview-body">{{ preview || '提交表单后此处生成超参包 JSON' }}</pre>
|
<pre class="preview-body">{{ preview || '提交表单后此处生成超参包 JSON' }}</pre>
|
||||||
<VbenButton type="submit" variant="solid" @click="formApi.submitForm">保存超参包</VbenButton>
|
<VbenButton type="submit" variant="solid" @click="formApi.submitForm">保存超参包</VbenButton>
|
||||||
</div>
|
</a-card>
|
||||||
</div>
|
</div>
|
||||||
</Page>
|
</Page>
|
||||||
</template>
|
</template>
|
||||||
@@ -51,11 +52,6 @@ const [Form, formApi] = useVbenForm({
|
|||||||
.hyper-preview {
|
.hyper-preview {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
.preview-title {
|
|
||||||
font-size: 13px;
|
|
||||||
color: hsl(var(--muted-foreground));
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
.preview-body {
|
.preview-body {
|
||||||
background: hsl(var(--muted) / 0.6);
|
background: hsl(var(--muted) / 0.6);
|
||||||
color: hsl(var(--foreground));
|
color: hsl(var(--foreground));
|
||||||
|
|||||||
@@ -30,22 +30,20 @@ const layoutJson = () => JSON.stringify({ widgets: components.value.filter((c) =
|
|||||||
<template>
|
<template>
|
||||||
<Page title="驾驶舱布局编排" description="PRD 5.7 · 组件清单排序 / 启用 / 导出布局 JSON">
|
<Page title="驾驶舱布局编排" description="PRD 5.7 · 组件清单排序 / 启用 / 导出布局 JSON">
|
||||||
<div class="layout-row">
|
<div class="layout-row">
|
||||||
<div class="col">
|
<a-card title="组件库(点击 ↑ ↓ 调整顺序)" :bordered="false" class="col">
|
||||||
<div class="col-title">组件库(点击 ↑ ↓ 调整顺序)</div>
|
<a-list size="small" :bordered="false">
|
||||||
<a-list size="small" bordered>
|
|
||||||
<a-list-item v-for="(c, i) in components" :key="i">
|
<a-list-item v-for="(c, i) in components" :key="i">
|
||||||
<a-checkbox v-model:checked="c.enabled" />
|
<a-checkbox v-model:checked="c.enabled" />
|
||||||
<span class="item-title">{{ c.title }}</span>
|
<span class="item-title">{{ c.title }}</span>
|
||||||
<a-button size="small" @click="move(i, -1)">↑</a-button>
|
<a-button size="small" @click="move(i, -1)">↑</a-button>
|
||||||
<a-button size="small" style="margin-left: 4px" @click="move(i, 1)">↓</a-button>
|
<a-button size="small" class="ml-1" @click="move(i, 1)">↓</a-button>
|
||||||
</a-list-item>
|
</a-list-item>
|
||||||
</a-list>
|
</a-list>
|
||||||
</div>
|
</a-card>
|
||||||
<div class="col">
|
<a-card title="导出布局 JSON(由驾驶舱渲染)" :bordered="false" class="col">
|
||||||
<div class="col-title">导出布局 JSON(由驾驶舱渲染)</div>
|
|
||||||
<pre class="json-body">{{ layoutJson() }}</pre>
|
<pre class="json-body">{{ layoutJson() }}</pre>
|
||||||
<VbenButton variant="solid"><MaterialSymbolsEdit class="size-4" />发布布局(版本发布见「版本发布」页)</VbenButton>
|
<VbenButton variant="solid"><MaterialSymbolsEdit class="size-4" />发布布局(版本发布见「版本发布」页)</VbenButton>
|
||||||
</div>
|
</a-card>
|
||||||
</div>
|
</div>
|
||||||
</Page>
|
</Page>
|
||||||
</template>
|
</template>
|
||||||
@@ -59,11 +57,6 @@ const layoutJson = () => JSON.stringify({ widgets: components.value.filter((c) =
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
.col-title {
|
|
||||||
font-size: 13px;
|
|
||||||
color: hsl(var(--muted-foreground));
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
.item-title {
|
.item-title {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
|
|||||||
Reference in New Issue
Block a user