5
5
import { Button , Form , Input , Message } from "@alicloud/console-components" ;
6
6
import React from "react" ;
7
7
import { PontUIService } from "../../service/UIService" ;
8
+ import { message } from "antd" ;
9
+ import { LoadingOutlined } from "@ant-design/icons" ;
8
10
9
11
export class ProfileManagerIndexProps { }
10
12
@@ -30,7 +32,10 @@ export const ProfileManagerIndex: React.FC<ProfileManagerIndexProps> = (props) =
30
32
</ div >
31
33
{ status === "success" ? (
32
34
< div className = "my-4 text-base" >
33
- < Message type = "success" > 新增成功!</ Message >
35
+ < div className = "flex w-[100%] rounded-sm bg-[#d8f5d8] px-4 py-2 text-sm" >
36
+ < div className = "codicon codicon-pass-filled success m-[2px] mr-1 leading-5 text-green-600" > </ div >
37
+ < div className = "text-[12px] leading-5 text-gray-600" > 新增成功!</ div >
38
+ </ div >
34
39
< div className = "my-8 flex justify-end" >
35
40
< Button
36
41
type = "primary"
@@ -51,72 +56,84 @@ export const ProfileManagerIndex: React.FC<ProfileManagerIndexProps> = (props) =
51
56
</ div >
52
57
</ div >
53
58
) : (
54
- < Form labelAlign = "left" >
55
- < Form . Item label = { < span className = "text-sm font-medium" > Profile 名称</ span > } required >
56
- < span className = "text-gray-500" > 用于区别不同的 profiles。</ span >
57
- < Input id = "profileName" name = "profileName" placeholder = "请输入字符串" />
58
- </ Form . Item >
59
- < Form . Item label = { < span className = "text-sm font-medium" > Access Key</ span > } required >
60
- < span className = "text-gray-500" >
61
- 获取方式请参见
62
- < a
63
- href = "https://help.aliyun.com/zh/ram/user-guide/create-an-accesskey-pair#title-ebf-nrl-l0i"
64
- target = "_blank"
65
- >
66
- 创建 RAM 用户的 AccessKey
67
- </ a >
68
- 。
69
- </ span >
70
- < Input id = "accessKey" name = "accessKey" placeholder = "指定您的AccessKey ID" />
71
- </ Form . Item >
72
- < Form . Item label = { < span className = "text-sm font-medium" > Secret Key</ span > } required >
73
- < span className = "text-gray-500" >
74
- 获取方式请参见
75
- < a
76
- href = "https://help.aliyun.com/zh/ram/user-guide/create-an-accesskey-pair#title-ebf-nrl-l0i"
77
- target = "_blank"
59
+ < div >
60
+ { status === "loading" ? (
61
+ < div className = "my-4 flex w-[100%] rounded-sm bg-[#f6f6f6] px-4 py-2 text-sm" >
62
+ < LoadingOutlined />
63
+ < div className = "ml-2 text-[12px] leading-5 text-gray-600" > 写入中...</ div >
64
+ </ div >
65
+ ) : null }
66
+ < Form labelAlign = "left" >
67
+ < Form . Item label = { < span className = "text-sm font-medium" > Profile 名称</ span > } required >
68
+ < span className = "text-gray-500" > 用于区别不同的 profiles。</ span >
69
+ < Input id = "profileName" name = "profileName" placeholder = "请输入字符串" />
70
+ </ Form . Item >
71
+ < Form . Item label = { < span className = "text-sm font-medium" > Access Key</ span > } required >
72
+ < span className = "text-gray-500" >
73
+ 获取方式请参见
74
+ < a
75
+ href = "https://help.aliyun.com/zh/ram/user-guide/create-an-accesskey-pair#title-ebf-nrl-l0i"
76
+ target = "_blank"
77
+ >
78
+ 创建 RAM 用户的 AccessKey
79
+ </ a >
80
+ 。
81
+ </ span >
82
+ < Input id = "accessKey" name = "accessKey" placeholder = "指定您的AccessKey ID" />
83
+ </ Form . Item >
84
+ < Form . Item label = { < span className = "text-sm font-medium" > Secret Key</ span > } required >
85
+ < span className = "text-gray-500" >
86
+ 获取方式请参见
87
+ < a
88
+ href = "https://help.aliyun.com/zh/ram/user-guide/create-an-accesskey-pair#title-ebf-nrl-l0i"
89
+ target = "_blank"
90
+ >
91
+ 创建 RAM 用户的 AccessKey
92
+ </ a >
93
+ 。
94
+ </ span >
95
+ < Input id = "secretKey" name = "secretKey" placeholder = "指定您的AccessKey Secret" />
96
+ </ Form . Item >
97
+ < Form . Item label = { < span className = "text-sm font-medium" > 默认 Region Id</ span > } required >
98
+ < span className = "text-gray-500" >
99
+ 阿里云支持的 Region Id ,请参见
100
+ < a
101
+ href = "https://help.aliyun.com/zh/ecs/product-overview/regions-and-zones#concept-2459516"
102
+ target = "_blank"
103
+ >
104
+ 地域和可用区
105
+ </ a >
106
+ 。
107
+ </ span >
108
+ < Input id = "defaultRegionId" name = "defaultRegionId" placeholder = "指定默认区域的Region Id" />
109
+ </ Form . Item >
110
+ < div className = "flex" >
111
+ < Form . Submit
112
+ validate
113
+ type = "primary"
114
+ onClick = { ( submitValue , errors ) => {
115
+ if ( errors ) {
116
+ return ;
117
+ } else {
118
+ setStatus ( "loading" ) ;
119
+ PontUIService . addNewAKProfile ( submitValue ) . then ( ( res ) => {
120
+ if ( res . success === true ) {
121
+ setStatus ( "success" ) ;
122
+ } else {
123
+ message . error ( "添加失败,请重试" ) ;
124
+ setStatus ( "edit" ) ;
125
+ }
126
+ } ) ;
127
+ }
128
+ } }
129
+ className = "text-right"
78
130
>
79
- 创建 RAM 用户的 AccessKey
80
- </ a >
81
- 。
82
- </ span >
83
- < Input id = "secretKey" name = "secretKey" placeholder = "指定您的AccessKey Secret" />
84
- </ Form . Item >
85
- < Form . Item label = { < span className = "text-sm font-medium" > 默认 Region Id</ span > } required >
86
- < span className = "text-gray-500" >
87
- 阿里云支持的 Region Id ,请参见
88
- < a
89
- href = "https://help.aliyun.com/zh/ecs/product-overview/regions-and-zones#concept-2459516"
90
- target = "_blank"
91
- >
92
- 地域和可用区
93
- </ a >
94
- 。
95
- </ span >
96
- < Input id = "defaultRegionId" name = "defaultRegionId" placeholder = "指定默认区域的Region Id" />
97
- </ Form . Item >
98
- < div className = "flex" >
99
- < Form . Submit
100
- validate
101
- type = "primary"
102
- onClick = { ( submitValue , errors ) => {
103
- if ( errors ) {
104
- return ;
105
- } else {
106
- PontUIService . addNewAKProfile ( submitValue ) . then ( ( res ) => {
107
- if ( res . success === true ) {
108
- setStatus ( "success" ) ;
109
- }
110
- } ) ;
111
- }
112
- } }
113
- className = "text-right"
114
- >
115
- 新增
116
- </ Form . Submit >
117
- < Form . Reset style = { { marginLeft : 10 } } > 重置</ Form . Reset >
118
- </ div >
119
- </ Form >
131
+ 新增
132
+ </ Form . Submit >
133
+ < Form . Reset style = { { marginLeft : 10 } } > 重置</ Form . Reset >
134
+ </ div >
135
+ </ Form >
136
+ </ div >
120
137
) }
121
138
</ div >
122
139
</ div >
0 commit comments