chore: update Service module

web/src/locales/en-US/component.ts

@@ -42,6 +42,7 @@ export default {
   'component.global.loading': 'Loading',
   'component.global.list': 'List',
   'component.global.description': 'Description',
+  'component.global.description.required': 'Please enter the description',
   'component.global.labels': 'Labels',
   'component.global.version': 'Version',
   'component.global.operation': 'Operation',

web/src/locales/zh-CN/component.ts

@@ -41,7 +41,8 @@ export default {
   'component.global.edit.plugin': '配置插件',
   'component.global.loading': '加载中',
   'component.global.list': '列表',
-  'component.global.description': '描述信息',
+  'component.global.description': '描述',
+  'component.global.description.required': '请输入描述信息',
   'component.global.labels': '标签',
   'component.global.version': '路由版本',
   'component.global.operation': '操作',

web/src/pages/Service/Create.tsx

@@ -81,13 +81,12 @@ const Page: React.FC = (props) => {
     (serviceId ? update(serviceId, data) : create(data))
       .then(() => {
         notification.success({
-          message: `${
-            serviceId
-              ? formatMessage({ id: 'component.global.edit' })
-              : formatMessage({ id: 'component.global.create' })
-          } ${formatMessage({ id: 'menu.service' })} ${formatMessage({
-            id: 'component.status.success',
-          })}`,
+          message: `${serviceId
+            ? formatMessage({ id: 'component.global.edit' })
+            : formatMessage({ id: 'component.global.create' })
+            } ${formatMessage({ id: 'menu.service' })} ${formatMessage({
+              id: 'component.status.success',
+            })}`,
         });
         history.push('/service/list');
       })
@@ -115,11 +114,9 @@ const Page: React.FC = (props) => {
   return (
     <>
       <PageHeaderWrapper
-        title={`${
-          (props as any).match.params.serviceId
-            ? formatMessage({ id: 'component.global.edit' })
-            : formatMessage({ id: 'component.global.create' })
-        } ${formatMessage({ id: 'menu.service' })}`}
+        title={(props as any).match.params.serviceId
+          ? formatMessage({ id: 'page.service.configure' })
+          : formatMessage({ id: 'page.service.create' })}
       >
         <Card bordered={false}>
           <Steps current={step - 1} style={{ marginBottom: '25px' }}>

web/src/pages/Service/List.tsx

@@ -109,7 +109,7 @@ const Page: React.FC = () => {
   ];
 
   return (
-    <PageHeaderWrapper title={formatMessage({ id: 'page.service.list' })}>
+    <PageHeaderWrapper title={formatMessage({ id: 'page.service.list' })} content={formatMessage({ id: 'page.service.description' })}>
       <ProTable<ServiceModule.ResponseBody>
         actionRef={ref}
         rowKey="id"
@@ -129,12 +129,11 @@ const Page: React.FC = () => {
             <PlusOutlined />
             {formatMessage({ id: 'component.global.create' })}
           </Button>,
-          <Button type="primary" onClick={() => {
+          <Button type="default" onClick={() => {
             setVisible(true);
             setEditorMode('create');
             setRawData({});
           }}>
-            <PlusOutlined />
             {formatMessage({ id: 'component.global.data.editor' })}
           </Button>,
         ]}

web/src/pages/Service/components/Step1.tsx

@@ -45,11 +45,11 @@ const Step1: React.FC<ServiceModule.Step1PassProps> = ({
   return (
     <>
       <Form {...FORM_LAYOUT} form={form}>
-        <Form.Item name="name" label={formatMessage({ id: 'component.global.name' })}>
-          <Input disabled={disabled} />
+        <Form.Item name="name" label={formatMessage({ id: 'component.global.name' })} required>
+          <Input disabled={disabled} placeholder={formatMessage({ id: 'page.service.fields.name.required' })} />
         </Form.Item>
         <Form.Item name="desc" label={formatMessage({ id: 'component.global.description' })}>
-          <Input.TextArea disabled={disabled} />
+          <Input.TextArea disabled={disabled} placeholder={formatMessage({ id: 'component.global.description.required' })} />
         </Form.Item>
       </Form>
       <UpstreamForm

web/src/pages/Service/locales/en-US.ts

@@ -18,5 +18,8 @@ export default {
   'page.service.steps.stepTitle.basicInformation': 'Basic Information',
   'page.service.steps.stepTitle.pluginConfig': 'Plugin Config',
   'page.service.steps.stepTitle.preview': 'Preview',
-  'page.service.list': 'Service List'
+  'page.service.list': 'Service List',
+  'page.service.description': 'A service consists of a combination of public plugin configuration and upstream target information in a route. Services are associated with Routes and Upstreams, and a service can correspond to a set of upstream nodes and can be bound by multiple routes.',
+  'page.service.create': 'Create Service',
+  'page.service.configure': 'Configure Service'
 };

web/src/pages/Service/locales/zh-CN.ts

@@ -18,5 +18,9 @@ export default {
   'page.service.steps.stepTitle.basicInformation': '基本信息',
   'page.service.steps.stepTitle.pluginConfig': '插件配置',
   'page.service.steps.stepTitle.preview': '预览',
-  'page.service.list': '服务列表'
+  'page.service.list': '服务列表',
+  'page.service.description': '服务由路由中公共的插件配置、上游目标信息组合而成。服务与路由、上游关联，一个服务可对应一组上游节点、可被多条路由绑定。',
+  'page.service.fields.name.required': '请输入服务名称',
+  'page.service.create': '创建服务',
+  'page.service.configure': '配置服务'
 };