Skip to content

Commit

Permalink
style: 配置页面样式微调
Browse files Browse the repository at this point in the history
  • Loading branch information
@bietiaop
bietiaop committed Jan 21, 2025
1 parent c3b311e commit 362c9cc
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 84 deletions.
146 changes: 68 additions & 78 deletions packages/web/src/components/dynamic_form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export interface DynamicFormProps {
setExpandedSections: (sections: Set<Key>) => void
}

function EmptyTip ({ fields }: { fields: unknown[] }) {
function EmptyTip({ fields }: { fields: unknown[] }) {
return (
fields.length === 0 && (
<div className="text-sm text-content4-foreground text-center col-span-2">
Expand All @@ -32,7 +32,7 @@ function EmptyTip ({ fields }: { fields: unknown[] }) {
)
}

function ArrayField ({
function ArrayField({
control,
field,
fullPath,
Expand Down Expand Up @@ -89,7 +89,7 @@ function ArrayField ({
)
}

function ObjectArrayField ({
function ObjectArrayField({
control,
field,
fullPath,
Expand Down Expand Up @@ -153,7 +153,7 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
errors,
formConfig,
expandedSections,
setExpandedSections
setExpandedSections,
}) => {
// 渲染表单字段
const renderField = (field: FormField, path: string = '') => {
Expand All @@ -163,11 +163,7 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
// 创建一个通用的描述渲染函数
const renderDescription = (description?: string) => {
if (!description) return null
return (
<div className="text-sm text-content4-foreground mt-1">
{description}
</div>
)
return <div className="text-sm text-content4-foreground mt-1">{description}</div>
}

switch (field.type) {
Expand All @@ -181,8 +177,9 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
return (
<Accordion
key={key}
selectionMode="multiple"
selectedKeys={expandedSections}
onSelectionChange={(keys) => {
onSelectionChange={keys => {
if (typeof keys === 'string') {
const newSet = new Set(expandedSections)
if (newSet.has(field.key)) {
Expand All @@ -196,11 +193,7 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
}
}}
>
<AccordionItem
key={field.key}
title={field.label}
textValue={field.label}
>
<AccordionItem key={field.key} title={field.label} textValue={field.label}>
<div className="space-y-4">
{field.children.map((subField, subIndex) => (
<React.Fragment key={subField.key ?? subIndex}>
Expand All @@ -214,96 +207,95 @@ const DynamicForm: React.FC<DynamicFormProps> = ({

case 'text':
return (
<div key={key}>
<Input
label={field.label}
defaultValue={field.defaultValue}
{...register(fullPath, { required: field.required })}
className="w-full"
errorMessage={errors[field.key]?.message?.toString()}
description={field.description}
/>
{renderDescription(field.description)}
</div>
<Input
key={key}
label={field.label}
defaultValue={field.defaultValue}
{...register(fullPath, { required: field.required })}
className="w-full"
errorMessage={errors[field.key]?.message?.toString()}
description={field.description}
/>
)

case 'number':
return (
<div key={key}>
<Input
label={field.label}
type="number"
defaultValue={field.defaultValue?.toString()}
{...register(fullPath, { required: field.required })}
className="w-full"
description={field.description}
/>
{renderDescription(field.description)}
</div>
<Input
key={key}
label={field.label}
type="number"
defaultValue={field.defaultValue?.toString()}
{...register(fullPath, { required: field.required })}
className="w-full"
description={field.description}
/>
)

case 'switch':
return (
<div key={key}>
<Switch key={key} {...register(fullPath)} defaultChecked={field.defaultValue}>
{field.label}
</Switch>
<Switch key={key} {...register(fullPath)} defaultChecked={field.defaultValue}>
<div>{field.label}</div>
{renderDescription(field.description)}
</div>
</Switch>
)

case 'checkbox':
return (
<div key={key}>
<Card key={key}>
<CheckboxGroup
label={field.label}
defaultValue={field.defaultValue?.map(String)}
description={field.description}
>
{field.options.map(option => (
<Checkbox key={option.value} value={option.value.toString()} {...register(fullPath)}>
<Checkbox
key={option.value}
value={option.value.toString()}
{...register(fullPath)}
>
{option.label}
</Checkbox>
))}
</CheckboxGroup>
{renderDescription(field.description)}
</div>
</Card>
)

case 'radio':
return (
<div key={key}>
<RadioGroup
label={field.label}
defaultValue={field.options[0]?.value?.toString()}
>
{field.options.map(option => (
<Radio key={option.value} value={option.value.toString()} {...register(fullPath)}>
{option.label}
</Radio>
))}
</RadioGroup>
{renderDescription(field.description)}
</div>
<Card key={key}>
<CardBody>
<RadioGroup
label={field.label}
defaultValue={field.options[0]?.value?.toString()}
description={field.description}
>
{field.options.map(option => (
<Radio key={option.value} value={option.value.toString()} {...register(fullPath)}>
{option.label}
</Radio>
))}
</RadioGroup>
</CardBody>
</Card>
)

case 'select':
return (
<div key={key}>
<Select
label={field.label}
defaultSelectedKeys={[]}
items={field.options}
multiple={field.multiple}
{...register(fullPath)}
>
{option => (
<SelectItem key={option.value} value={option.value.toString()}>
{option.label}
</SelectItem>
)}
</Select>
{renderDescription(field.description)}
</div>
<Select
label={field.label}
defaultSelectedKeys={[]}
items={field.options}
multiple={field.multiple}
key={key}
description={field.description}
{...register(fullPath)}
>
{option => (
<SelectItem key={option.value} value={option.value.toString()}>
{option.label}
</SelectItem>
)}
</Select>
)

case 'array':
Expand Down Expand Up @@ -335,9 +327,7 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
<div>
<h2>{field.label}</h2>
{field.description && (
<div className="text-sm text-content4-foreground">
{field.description}
</div>
<div className="text-sm text-content4-foreground">{field.description}</div>
)}
</div>
</CardHeader>
Expand Down
16 changes: 10 additions & 6 deletions packages/web/src/pages/dashboard/config.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,9 +99,9 @@ const ConfigPage: React.FC = () => {

return (
<section className="pt-20 md:pt-8">
<div className="max-w-2xl mx-auto flex items-center sticky top-0 z-10 bg-content1 rounded-full bg-opacity-50 backdrop-blur-md p-4">
<div className="max-w-2xl mx-auto flex items-center sticky top-0 z-20 bg-content1 rounded-b-3xl bg-opacity-50 backdrop-blur-md py-4 px-2 overflow-hidden mb-4 gap-2">
<Tabs
className="flex"
className="w-auto flex flex-shrink flex-grow overflow-x-auto"
selectedKey={activeTab}
onSelectionChange={setActiveTab}
radius="full"
Expand All @@ -115,13 +115,14 @@ const ConfigPage: React.FC = () => {
<Tab key="redis" title="redis配置" />
<Tab key="env" title="环境变量" />
</Tabs>
<div className="flex gap-2 ml-auto">
<div className="flex gap-2 ml-auto flex-grow-0 flex-shrink-0 items-center">
{hasSections && (
<Button
// 根据展开状态切换颜色
color={expandedSections.size > 0 ? "primary" : "default"}
color={expandedSections.size > 0 ? 'primary' : 'default'}
startContent={<MdUnfoldLess />}
radius="full"
size="sm"
variant="flat"
onPress={toggleAllSections}
>
{expandedSections.size > 0 ? '全部折叠' : '全部展开'}
Expand All @@ -142,7 +143,10 @@ const ConfigPage: React.FC = () => {
{configStructure.length === 0 ? (
<Spinner />
) : (
<form onSubmit={handleSubmit(onSubmit)} className="max-w-2xl mx-auto">
<form
onSubmit={handleSubmit(onSubmit)}
className="max-w-2xl mx-auto flex flex-col gap-4 px-2 pb-10"
>
<DynamicForm
register={register}
control={control}
Expand Down

0 comments on commit 362c9cc

Please sign in to comment.