Skip to content
This repository was archived by the owner on Nov 23, 2025. It is now read-only.

Commit d059d43

Browse files
ZerlightZerlight
committed
fix: Radix-ui-lib CSS errors
1 parent fcf4289 commit d059d43

File tree

5 files changed

+137
-80
lines changed

5 files changed

+137
-80
lines changed

‎packages/frontend/src/app/dashboard/setting/page.tsx‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,54 @@ import { OptionListItem, OptionListRoot } from '@/components/radix-ui-lib';
22

33
export default function AdminSettingPage() {
44
return (
5-
<OptionListItem
5+
<>
6+
<OptionListItem
67
schema={{
78
key: 'port',
89
label: '端口',
10+
description: '设置端口',
911
items: [
1012
{
1113
key: 'frontend',
1214
type: 'input',
1315
label: '前端端口',
16+
description: '设置前端端口',
1417
},
1518
{
1619
key: 'backend',
1720
type: 'input',
1821
label: '后端端口',
22+
description: '设置后端端口',
1923
},
24+
{
25+
key: '1',
26+
label: '原神人口普查',
27+
items: [
28+
{
29+
key: 'frontend',
30+
type: 'switch',
31+
label: '你氪金了没',
32+
description: '设置前端端口',
33+
},
34+
{
35+
key: 'backend',
36+
type: 'select',
37+
selectOptions: ['1', '2', '3'],
38+
label: '有几个五星',
39+
description: '设置后端端口',
40+
},
41+
]
42+
}
2043
],
2144
}}
2245
/>
46+
<OptionListItem schema={{
47+
key: '2',
48+
type: 'multi-input',
49+
label: '多输入',
50+
description: '设置多输入',
51+
keys: ['1', '2', '3'],
52+
}} />
53+
</>
2354
);
2455
}

‎packages/frontend/src/components/radix-ui-lib.tsx‎

Lines changed: 59 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

33
import { useState } from 'react';
4-
4+
import clsx from 'clsx';
55
import { MinusIcon, PlusIcon } from '@radix-ui/react-icons';
66
import { Button, Select, Switch, Table, TextField } from '@radix-ui/themes';
77

@@ -45,6 +45,7 @@ export function OptionListItem(props: {
4545
</Table.Cell>
4646
<Table.Cell>
4747
<Button
48+
variant="outline"
4849
id={JSON.stringify(tableItems.length - 1)}
4950
onClick={(event) => {
5051
let tableList = tableItems;
@@ -97,58 +98,62 @@ export function OptionListItem(props: {
9798
}
9899

99100
return (
100-
<div className={styles['option-list-item']}>
101-
<div className={styles['item-info']}>
102-
<div className={styles['label']}>{props.schema.label}</div>
103-
<div className={styles['description']}>{props.schema.description}</div>
104-
</div>
105-
<div className={styles['item-value']}>
106-
{props.schema.type === 'switch' ? (
107-
<Switch
108-
key={getKeyTree().join('.')}
109-
onCheckedChange={(boolean) => {
110-
installStore.updateItemRamda(getKeyTree(), boolean);
111-
}}
112-
></Switch>
113-
) : props.schema.type === 'input' ? (
114-
<TextField.Input
115-
key={getKeyTree().join('.')}
116-
onChange={(event) => {
117-
installStore.updateItemRamda(getKeyTree(), event.target.value);
118-
}}
119-
></TextField.Input>
120-
) : props.schema.type === 'select' ? (
121-
<Select.Root
122-
key={getKeyTree().join('.')}
123-
onValueChange={(value) => {
124-
installStore.updateItemRamda(getKeyTree(), value);
125-
}}
126-
>
127-
<Select.Trigger />
128-
<Select.Content position="popper">
129-
{props.schema.selectOptions.map((option) => (
130-
<Select.Item key={option} value={option}>
131-
{option}
132-
</Select.Item>
133-
))}
134-
</Select.Content>
135-
</Select.Root>
136-
) : props.schema.type === 'multi-input' ||
137-
props.schema.type === 'list' ? (
138-
<Button
139-
onClick={() => {
140-
addSingleItem(
141-
props.schema.type === 'multi-input'
142-
? props.schema.keys
143-
: undefined,
144-
);
145-
}}
146-
>
147-
<PlusIcon />
148-
</Button>
149-
) : (
150-
''
151-
)}
101+
<div className={props.masterKeyTree ? clsx(styles['option-list-item-nested'], styles['option-list-item']) : styles['option-list-item']}>
102+
<div className={styles['item-main-area']}>
103+
<div className={styles['item-info']}>
104+
<div className={styles['label']}>{props.schema.label}</div>
105+
<div className={styles['description']}>{props.schema.description}</div>
106+
</div>
107+
<div className={styles['item-value']}>
108+
{props.schema.type === 'switch' ? (
109+
<Switch
110+
key={getKeyTree().join('.')}
111+
onCheckedChange={(boolean) => {
112+
installStore.updateItemRamda(getKeyTree(), boolean);
113+
}}
114+
></Switch>
115+
) : props.schema.type === 'input' ? (
116+
<TextField.Input
117+
width={160}
118+
key={getKeyTree().join('.')}
119+
onChange={(event) => {
120+
installStore.updateItemRamda(getKeyTree(), event.target.value);
121+
}}
122+
></TextField.Input>
123+
) : props.schema.type === 'select' ? (
124+
<Select.Root
125+
key={getKeyTree().join('.')}
126+
onValueChange={(value) => {
127+
installStore.updateItemRamda(getKeyTree(), value);
128+
}}
129+
>
130+
<Select.Trigger />
131+
<Select.Content position="popper">
132+
{props.schema.selectOptions.map((option) => (
133+
<Select.Item key={option} value={option}>
134+
{option}
135+
</Select.Item>
136+
))}
137+
</Select.Content>
138+
</Select.Root>
139+
) : props.schema.type === 'multi-input' ||
140+
props.schema.type === 'list' ? (
141+
<Button
142+
variant="outline"
143+
onClick={() => {
144+
addSingleItem(
145+
props.schema.type === 'multi-input'
146+
? props.schema.keys
147+
: undefined,
148+
);
149+
}}
150+
>
151+
<PlusIcon />
152+
</Button>
153+
) : (
154+
''
155+
)}
156+
</div>
152157
</div>
153158
<div className={styles['item-additional-area']}>
154159
{props.schema.items ? (
@@ -162,7 +167,7 @@ export function OptionListItem(props: {
162167
) : props.schema.type === 'multi-input' ||
163168
props.schema.type === 'list' ? (
164169
<Table.Root>
165-
{props.schema.type === 'multi-input' ? (
170+
{props.schema.type === 'multi-input' && tableItems.length !== 0 ? (
166171
<Table.Header>
167172
<Table.Row>
168173
{props.schema.keys.map((key) => (

‎packages/frontend/src/store/install.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { create } from 'zustand'
2-
import ramda from 'ramda'
2+
import * as ramda from 'ramda'
33

44
interface InstallStoreState {
55
items: { [key: string]: string | boolean | number | object | object[] | string[] | null };

‎packages/frontend/src/styles/module/radix-ui-lib.module.scss‎

Lines changed: 36 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -15,34 +15,49 @@
1515
.option-list-item {
1616
width: 100%;
1717
display: flex;
18+
flex-direction: column;
1819
justify-content: space-between;
1920
transition: all 0.3s ease-in-out;
2021

21-
&:hover {
22-
background-color: var(--gray-4);
23-
}
24-
25-
.item-info {
22+
.item-main-area {
23+
height: 70px;
24+
align-items: center;
2625
display: flex;
27-
flex-direction: column;
28-
align-items: start;
29-
30-
.label {
31-
font-size: 1.2rem;
32-
font-weight: 600;
33-
}
34-
35-
.description {
36-
font-size: 1rem;
37-
font-weight: 300;
26+
justify-content: space-between;
27+
padding: 10px;
28+
border-bottom: 1px solid var(--gray-4);
29+
transition: all 0.3s ease;
30+
31+
.item-info {
32+
display: flex;
33+
flex-direction: column;
34+
align-items: baseline;
35+
36+
.label {
37+
font-size: 1rem;
38+
font-weight: 600;
39+
}
40+
41+
.description {
42+
font-size: 0.8rem;
43+
font-weight: 300;
44+
margin-top: 5px;
45+
}
3846
}
3947

4048
.item-value {
41-
42-
43-
.item-additional-area {
44-
padding-left: 10px;
45-
}
49+
display: flex;
50+
align-items: center;
4651
}
4752
}
53+
54+
.item-additional-area {
55+
padding-left: 50px;
56+
}
4857
}
58+
59+
.option-list-item-nested {
60+
.item-main-area {
61+
62+
}
63+
}

‎pnpm-lock.yaml‎

Lines changed: 9 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)