Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit2714dde

Browse files
committed
[Fix] unlicensed environment page UI
1 parente54c63f commit2714dde

File tree

1 file changed

+134
-101
lines changed

1 file changed

+134
-101
lines changed

‎client/packages/lowcoder/src/pages/setting/environments/components/UnlicensedEnvironmentView.tsx‎

Lines changed: 134 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,15 @@ import {
66
ArrowLeftOutlined,
77
CloseCircleOutlined,
88
ExclamationCircleOutlined,
9-
WarningOutlined
9+
WarningOutlined,
10+
CloudServerOutlined
1011
}from'@ant-design/icons';
1112
import{Environment}from'../types/environment.types';
1213
importContactLowcoderModalfrom'./ContactLowcoderModal';
14+
importModernBreadcrumbsfrom'./ModernBreadcrumbs';
15+
importEnvironmentHeaderfrom'./EnvironmentHeader';
16+
importStatsCardfrom'./StatsCard';
17+
import{Level1SettingPageContent}from"../../styled";
1318
importhistoryfrom"@lowcoder-ee/util/history";
1419

1520
const{ Title, Text}=Typography;
@@ -20,7 +25,7 @@ interface UnlicensedEnvironmentViewProps {
2025
}
2126

2227
/**
23-
*Modern UI for unlicensed environments
28+
*Consistent UI for unlicensed environments matching other environment pages
2429
*/
2530
constUnlicensedEnvironmentView:React.FC<UnlicensedEnvironmentViewProps>=({
2631
environment,
@@ -65,84 +70,110 @@ const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
6570
}
6671
};
6772

73+
// Stats data consistent with other environment pages
74+
conststatsData=[
75+
{
76+
title:"Type",
77+
value:environment.environmentType||"Unknown",
78+
icon:<CloudServerOutlined/>,
79+
color:"#1890ff"
80+
},
81+
{
82+
title:"Status",
83+
value:"Unlicensed",
84+
icon:<CloseCircleOutlined/>,
85+
color:"#ff4d4f"
86+
},
87+
{
88+
title:"Master Env",
89+
value:environment.isMaster ?"Yes" :"No",
90+
icon:<CloudServerOutlined/>,
91+
color:environment.isMaster ?"#722ed1" :"#8c8c8c"
92+
},
93+
{
94+
title:"License Issue",
95+
value:environment.licenseStatus==='error' ?"Error" :"Missing",
96+
icon:environment.licenseStatus==='error' ?<ExclamationCircleOutlined/> :<CloseCircleOutlined/>,
97+
color:environment.licenseStatus==='error' ?"#faad14" :"#ff4d4f"
98+
}
99+
];
100+
68101
return(
69-
<divstyle={{
70-
padding:"24px",
71-
flex:1,
72-
minWidth:'1000px',
73-
background:'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)'
74-
}}>
75-
<Rowjustify="center"style={{minHeight:'80vh'}}>
76-
<Colxs={24}sm={20}md={16}lg={14}xl={12}>
77-
<divstyle={{
78-
display:'flex',
79-
flexDirection:'column',
80-
justifyContent:'center',
81-
alignItems:'center',
82-
minHeight:'70vh',
83-
textAlign:'center'
84-
}}>
85-
{/* Main Status Card */}
86-
<Card
87-
style={{
88-
width:'100%',
89-
borderRadius:'16px',
90-
boxShadow:'0 20px 40px rgba(0,0,0,0.1)',
91-
border:'none',
92-
background:'white',
93-
overflow:'hidden'
94-
}}
95-
styles={{body:{padding:'48px 32px'}}}
96-
>
102+
<Level1SettingPageContentstyle={{minWidth:"1000px"}}>
103+
{/* Environment Header Component */}
104+
<EnvironmentHeader
105+
environment={environment}
106+
onEditClick={onEditClick}
107+
/>
108+
109+
{/* Stats Cards Row */}
110+
<Rowgutter={[16,16]}style={{marginBottom:"24px"}}>
111+
{statsData.map((stat,index)=>(
112+
<Colxs={24}sm={12}lg={6}key={index}>
113+
<StatsCard
114+
title={stat.title}
115+
value={stat.value}
116+
icon={stat.icon}
117+
color={stat.color}
118+
/>
119+
</Col>
120+
))}
121+
</Row>
122+
123+
{/* Breadcrumbs */}
124+
<ModernBreadcrumbs
125+
items={[
126+
{
127+
key:'environments',
128+
title:'Environments',
129+
onClick:()=>history.push('/setting/environments')
130+
},
131+
{
132+
key:'current',
133+
title:environment.environmentName||"Environment Detail"
134+
}
135+
]}
136+
/>
137+
138+
{/* License Issue Card */}
139+
<Card
140+
style={{
141+
marginBottom:"24px",
142+
borderRadius:'4px',
143+
border:'1px solid #f0f0f0',
144+
background:'white'
145+
}}
146+
styles={{body:{padding:'32px'}}}
147+
>
148+
<Rowjustify="center">
149+
<Colxs={24}sm={20}md={16}lg={12}>
150+
<divstyle={{
151+
display:'flex',
152+
flexDirection:'column',
153+
alignItems:'center',
154+
textAlign:'center'
155+
}}>
97156
{/* Status Icon */}
98157
<divstyle={{marginBottom:'24px'}}>
99158
{getLicenseIcon()}
100159
</div>
101160

102-
{/* Environment Info */}
103-
<divstyle={{marginBottom:'32px'}}>
104-
<Titlelevel={2}style={{marginBottom:'8px',color:'#262626'}}>
105-
{getLicenseTitle()}
106-
</Title>
107-
<Textstyle={{
108-
fontSize:'16px',
109-
color:'#595959',
110-
display:'block',
111-
marginBottom:'16px',
112-
lineHeight:'1.6'
113-
}}>
114-
{getLicenseDescription()}
115-
</Text>
116-
117-
{/* Environment Details */}
118-
<divstyle={{
119-
background:'#fafafa',
120-
padding:'16px',
121-
borderRadius:'8px',
122-
marginTop:'24px',
123-
border:'1px solid #f0f0f0'
124-
}}>
125-
<Textstrongstyle={{color:'#8c8c8c',fontSize:'14px'}}>Environment:</Text>
126-
<Textstyle={{
127-
display:'block',
128-
fontSize:'16px',
129-
color:'#262626',
130-
marginTop:'4px'
131-
}}>
132-
{environment.environmentName||'Unnamed Environment'}
133-
</Text>
134-
<Textstyle={{
135-
fontSize:'13px',
136-
color:'#8c8c8c',
137-
fontFamily:'monospace'
138-
}}>
139-
ID:{environment.environmentId}
140-
</Text>
141-
</div>
142-
</div>
161+
{/* License Issue Information */}
162+
<Titlelevel={2}style={{marginBottom:'12px',color:'#262626'}}>
163+
{getLicenseTitle()}
164+
</Title>
165+
<Textstyle={{
166+
fontSize:'16px',
167+
color:'#595959',
168+
marginBottom:'24px',
169+
lineHeight:'1.6',
170+
maxWidth:'500px'
171+
}}>
172+
{getLicenseDescription()}
173+
</Text>
143174

144175
{/* Action Buttons */}
145-
<Spacesize="large"direction="vertical"style={{width:'100%'}}>
176+
<Spacesize="large"direction="vertical"style={{width:'100%',maxWidth:'400px'}}>
146177
<Button
147178
type="primary"
148179
size="large"
@@ -151,12 +182,9 @@ const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
151182
style={{
152183
width:'100%',
153184
height:'48px',
154-
borderRadius:'8px',
185+
borderRadius:'4px',
155186
fontSize:'16px',
156-
fontWeight:500,
157-
background:'linear-gradient(135deg, #1890ff 0%, #0050b3 100%)',
158-
border:'none',
159-
boxShadow:'0 4px 12px rgba(24, 144, 255, 0.3)'
187+
fontWeight:500
160188
}}
161189
>
162190
Contact Lowcoder Team
@@ -169,11 +197,9 @@ const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
169197
style={{
170198
width:'100%',
171199
height:'48px',
172-
borderRadius:'8px',
200+
borderRadius:'4px',
173201
fontSize:'16px',
174-
fontWeight:500,
175-
borderColor:'#d9d9d9',
176-
color:'#595959'
202+
fontWeight:500
177203
}}
178204
>
179205
Edit Environment
@@ -186,39 +212,46 @@ const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
186212
style={{
187213
width:'100%',
188214
height:'48px',
189-
borderRadius:'8px',
215+
borderRadius:'4px',
190216
fontSize:'16px',
191-
fontWeight:500,
192-
borderColor:'#d9d9d9',
193-
color:'#8c8c8c'
217+
fontWeight:500
194218
}}
195219
>
196220
Back to Environments
197221
</Button>
198222
</Space>
199-
</Card>
200-
201-
{/* Footer Help Text */}
202-
<Textstyle={{
203-
marginTop:'24px',
204-
color:'#8c8c8c',
205-
fontSize:'14px',
206-
maxWidth:'400px',
207-
lineHeight:'1.5'
208-
}}>
209-
Need assistance? Contact our team for licensing support or edit the environment configuration to resolve this issue.
210-
</Text>
211-
</div>
212-
</Col>
213-
</Row>
223+
</div>
224+
</Col>
225+
</Row>
226+
</Card>
227+
228+
{/* Help Text */}
229+
<Card
230+
style={{
231+
borderRadius:'4px',
232+
border:'1px solid #f0f0f0',
233+
background:'#fafafa'
234+
}}
235+
styles={{body:{padding:'16px'}}}
236+
>
237+
<Textstyle={{
238+
color:'#8c8c8c',
239+
fontSize:'14px',
240+
textAlign:'center',
241+
display:'block',
242+
lineHeight:'1.5'
243+
}}>
244+
Need assistance? Contact our team for licensing support or edit the environment configuration to resolve this issue.
245+
</Text>
246+
</Card>
214247

215248
{/* Contact Lowcoder Modal */}
216249
<ContactLowcoderModal
217250
visible={isContactModalVisible}
218251
onClose={()=>setIsContactModalVisible(false)}
219252
environment={environment}
220253
/>
221-
</div>
254+
</Level1SettingPageContent>
222255
);
223256
};
224257

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp