fix: improve Route module (#1634)

Author: qian0817

web/src/pages/Route/Create.less

@@ -112,8 +112,7 @@
 }
 
 .stepForm {
-  max-width: 700px;
-  margin: 40px auto 0;
+  margin-top: 40px;
   :global {
     .ant-form-item-with-help {
       margin-bottom: 24px;

web/src/pages/Route/Create.tsx

@@ -269,10 +269,9 @@ const Page: React.FC<Props> = (props) => {
   return (
     <>
       <PageHeaderWrapper
-        title={`${(props as any).match.params.rid
-          ? formatMessage({ id: 'component.global.edit' })
-          : formatMessage({ id: 'component.global.create' })
-          } ${formatMessage({ id: 'menu.routes' })}`}
+        title={(props as any).match.params.rid
+          ? formatMessage({ id: 'page.route.editRoute' })
+          : formatMessage({ id: 'page.route.createRoute' })}
       >
         <Card bordered={false}>
           <Steps current={step - 1} className={styles.steps}>

web/src/pages/Route/List.tsx

@@ -266,6 +266,7 @@ const Page: React.FC = () => {
           <Select
             mode="tags"
             style={{ width: '100%' }}
+            placeholder={formatMessage({ id: 'component.global.pleaseChoose' })}
             tagRender={(props) => {
               const { value, closable, onClose } = props;
               return (
@@ -307,7 +308,11 @@ const Page: React.FC = () => {
         }
 
         return (
-          <Select style={{ width: '100%' }} allowClear>
+          <Select
+            style={{ width: '100%' }}
+            placeholder={formatMessage({ id: 'component.global.pleaseChoose' })}
+            allowClear
+          >
             {Object.keys(labelList)
               .filter((item) => item === 'API_VERSION')
               .map((key) => {
@@ -344,7 +349,13 @@ const Page: React.FC = () => {
         }
 
         return (
-          <Select style={{ width: '100%' }} allowClear>
+          <Select
+            style={{ width: '100%' }}
+            placeholder={
+              `${formatMessage({ id: 'page.route.unpublished' })}/${formatMessage({ id: 'page.route.published' })}`
+            }
+            allowClear
+          >
             <Option key={RouteStatus.Offline} value={RouteStatus.Offline}>
               {formatMessage({ id: 'page.route.unpublished' })}
             </Option>

web/src/pages/Route/components/Step3/index.tsx

@@ -17,7 +17,7 @@
 import React, { useState } from 'react';
 import { Radio, Tooltip } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
-import { isChrome } from 'react-device-detect';
+import { isChrome, isChromium, isEdgeChromium } from 'react-device-detect';
 import { useIntl } from 'umi';
 
 import PluginOrchestration from '@/components/PluginOrchestration';
@@ -42,7 +42,8 @@ const Page: React.FC<Props> = ({ data, onChange, readonly = false, isForceHttps
   const { plugins = {}, script = {}, plugin_config_id = '' } = data;
 
   // NOTE: Currently only compatible with chrome
-  const disableDraw = !isChrome || isForceHttps || isProxyEnable;
+  const useSupportBrowser = isChrome || isEdgeChromium || isChromium;
+  const disableDraw = !useSupportBrowser || isForceHttps || isProxyEnable;
 
   const type = Object.keys(script || {}).length === 0 || disableDraw ? 'NORMAL' : 'DRAW';
 
@@ -72,7 +73,7 @@ const Page: React.FC<Props> = ({ data, onChange, readonly = false, isForceHttps
               title={() => {
                 // NOTE: forceHttps do not support DRAW mode
                 const titleArr: string[] = [];
-                if (!isChrome) {
+                if (!useSupportBrowser) {
                   titleArr.push(formatMessage({id: 'page.route.tooltip.pluginOrchOnlySuportChrome'}));
                 }
                 if (isForceHttps) {

web/src/pages/Route/constants.ts

@@ -26,17 +26,14 @@ export const HTTP_METHOD_OPTION_LIST: HttpMethod[] = [
 
 export const FORM_ITEM_LAYOUT = {
   labelCol: {
-    span: 6,
-  },
-  wrapperCol: {
-    span: 18,
-  },
+    span: 3,
+  }
 };
 
 export const FORM_ITEM_WITHOUT_LABEL = {
   wrapperCol: {
     xs: { span: 24, offset: 0 },
-    sm: { span: 20, offset: 6 },
+    sm: { span: 20, offset: 3 },
   },
 };
 

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

@@ -36,6 +36,8 @@ export default {
   'page.route.service': 'Service',
   'page.route.instructions': 'Instructions',
   'page.route.import': 'Import',
+  'page.route.createRoute': 'Create Route',
+  'page.route.editRoute': 'Edit Route',
 
   'page.route.input.placeholder.parameterNameHttpHeader': 'Request header name, for example: HOST',
   'page.route.input.placeholder.parameterNameRequestParameter': 'Parameter name, for example: id',

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

@@ -44,6 +44,8 @@ export default {
   'page.route.service': '服务',
   'page.route.instructions': '说明',
   'page.route.import': '导入',
+  'page.route.createRoute': '创建路由',
+  'page.route.editRoute': '编辑路由',
 
   // button
   'page.route.button.returnList': '返回路由列表',