Extract add config button and wrap selector with Flex
This commit is contained in:
parent
f90923736f
commit
9a7e6a8934
@ -1,7 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState, useCallback } from "react";
|
import { useState, useCallback } from "react";
|
||||||
import { Select, Button, Space, App } from "antd";
|
import { Select, Button, Space, Flex, App } from "antd";
|
||||||
import { EditOutlined, PlusOutlined } from "@ant-design/icons";
|
import { EditOutlined, PlusOutlined } from "@ant-design/icons";
|
||||||
import { ConfigModal } from "./ConfigModal";
|
import { ConfigModal } from "./ConfigModal";
|
||||||
import { getConfig } from "@/services/config";
|
import { getConfig } from "@/services/config";
|
||||||
@ -97,25 +97,27 @@ export function ConfigSelector({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Space.Compact style={{ width: "100%" }}>
|
<Flex gap="small" style={{ width: "100%" }}>
|
||||||
<Select
|
<Space.Compact style={{ flex: 1 }}>
|
||||||
style={{ flex: 1 }}
|
<Select
|
||||||
placeholder="选择配置…"
|
style={{ flex: 1 }}
|
||||||
loading={selecting}
|
placeholder="选择配置…"
|
||||||
value={selectedFile}
|
loading={selecting}
|
||||||
onChange={handleChange}
|
value={selectedFile}
|
||||||
options={configs.map((c) => ({
|
onChange={handleChange}
|
||||||
value: c.file,
|
options={configs.map((c) => ({
|
||||||
label: c.name,
|
value: c.file,
|
||||||
}))}
|
label: c.name,
|
||||||
/>
|
}))}
|
||||||
<Button icon={<EditOutlined />} onClick={openEdit}>
|
/>
|
||||||
修改配置
|
<Button icon={<EditOutlined />} onClick={openEdit}>
|
||||||
</Button>
|
修改配置
|
||||||
<Button icon={<PlusOutlined />} onClick={openAdd}>
|
</Button>
|
||||||
|
</Space.Compact>
|
||||||
|
<Button type="primary" icon={<PlusOutlined />} onClick={openAdd}>
|
||||||
添加配置
|
添加配置
|
||||||
</Button>
|
</Button>
|
||||||
</Space.Compact>
|
</Flex>
|
||||||
|
|
||||||
<ConfigModal
|
<ConfigModal
|
||||||
open={modalOpen}
|
open={modalOpen}
|
||||||
|
|||||||
@ -105,7 +105,6 @@ export function MainPage({ initialConfigs }: MainPageProps) {
|
|||||||
<Button
|
<Button
|
||||||
type="primary"
|
type="primary"
|
||||||
icon={<CloudUploadOutlined />}
|
icon={<CloudUploadOutlined />}
|
||||||
size="large"
|
|
||||||
onClick={() => setPublishOpen(true)}
|
onClick={() => setPublishOpen(true)}
|
||||||
disabled={!selectedConfig}
|
disabled={!selectedConfig}
|
||||||
>
|
>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user