juzhiyuan commented on a change in pull request #949:
URL: https://github.com/apache/apisix-dashboard/pull/949#discussion_r533904811
##########
File path: web/src/pages/Info/List.tsx
##########
@@ -0,0 +1,99 @@
+import React from 'react';
+import { PageContainer } from '@ant-design/pro-layout';
+import { useIntl } from 'umi';
+
+const Info: React.FC = () => {
+ const { formatMessage } = useIntl();
+
+ return (
+ <PageContainer title={formatMessage({ id: 'page.info.pageContainer.title'
})}>
+ <select className="selector" id="selector" style={{ backgroundColor:
"#fff", width: "100%", height: "24px", textAlign: "right", padding: "16px
24px", marginBottom: "15px" }}>
+ <option value="categoryA">CategoryA</option>
+ <option value="categoryB">CategoryB</option>
+ <option value="categoryC">CategoryC</option>
+ </select>
+ <div className="wrap" style={{ width: "100%", height: "740px", padding:
"16px 24px", margin: "0 auto", backgroundColor: "#fff" }}>
Review comment:
Using div and other HTML tags look good to me, but you should move those
inline style to a standalone file.
##########
File path: web/src/pages/Info/List.tsx
##########
@@ -0,0 +1,99 @@
+import React from 'react';
+import { PageContainer } from '@ant-design/pro-layout';
+import { useIntl } from 'umi';
+
+const Info: React.FC = () => {
+ const { formatMessage } = useIntl();
+
+ return (
+ <PageContainer title={formatMessage({ id: 'page.info.pageContainer.title'
})}>
+ <select className="selector" id="selector" style={{ backgroundColor:
"#fff", width: "100%", height: "24px", textAlign: "right", padding: "16px
24px", marginBottom: "15px" }}>
+ <option value="categoryA">CategoryA</option>
+ <option value="categoryB">CategoryB</option>
+ <option value="categoryC">CategoryC</option>
+ </select>
+ <div className="wrap" style={{ width: "100%", height: "740px", padding:
"16px 24px", margin: "0 auto", backgroundColor: "#fff" }}>
+ <table style={{ color: "rgba(0, 0, 0, 0.45)", width: "100%",
borderBottom: "1px solid grey", borderCollapse: "collapse", borderTop: "1px
solid grey" }}>
+ <thead>
+ <tr>
+ <th style={{ padding: "12px 8px" }}>categoryA</th>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr style={{ backgroundColor: "#f3f4f5" }}>
+ <td style={{ padding: "12px 8px" }}>key</td>
+ <td style={{ textAlign: "right", padding: "12px 8px"
}}>value</td>
+ </tr>
+ <tr>
+ <td style={{ padding: "12px 8px" }}>key</td>
+ <td style={{ textAlign: "right", padding: "12px 8px"
}}>value</td>
+ </tr>
+ <tr style={{ backgroundColor: "#f3f4f5" }}>
+ <td style={{ padding: "12px 8px" }}>key</td>
+ <td style={{ textAlign: "right", padding: "12px 8px"
}}>value</td>
+ </tr>
+ <tr>
+ <td style={{ padding: "12px 8px" }}>key</td>
+ <td style={{ textAlign: "right", padding: "12px 8px"
}}>value</td>
+ </tr>
+ </tbody>
+ </table>
+ <table style={{ color: "rgba(0, 0, 0, 0.45)", width: "100%",
borderBottom: "1px solid grey", borderCollapse: "collapse", }}>
+ <thead>
+ <tr>
+ <th style={{ padding: "12px 8px" }}>categoryA</th>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr style={{ backgroundColor: "#f3f4f5" }}>
+ <td style={{ padding: "12px 8px" }}>key</td>
+ <td style={{ textAlign: "right", padding: "12px 8px"
}}>value</td>
+ </tr>
+ <tr>
+ <td style={{ padding: "12px 8px" }}>key</td>
+ <td style={{ textAlign: "right", padding: "12px 8px"
}}>value</td>
+ </tr>
+ <tr style={{ backgroundColor: "#f3f4f5" }}>
+ <td style={{ padding: "12px 8px" }}>key</td>
+ <td style={{ textAlign: "right", padding: "12px 8px"
}}>value</td>
+ </tr>
+ <tr>
+ <td style={{ padding: "12px 8px" }}>key</td>
+ <td style={{ textAlign: "right", padding: "12px 8px"
}}>value</td>
+ </tr>
+ </tbody>
+ </table>
+ <table style={{ color: "rgba(0, 0, 0, 0.45)", width: "100%",
borderBottom: "1px solid grey", borderCollapse: "collapse", }}>
+ <thead>
+ <tr>
+ <th style={{ padding: "12px 8px" }}>categoryA</th>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr style={{ backgroundColor: "#f3f4f5" }}>
Review comment:
Why not use an array loop?
##########
File path: web/src/pages/Info/List.tsx
##########
@@ -0,0 +1,99 @@
+import React from 'react';
+import { PageContainer } from '@ant-design/pro-layout';
+import { useIntl } from 'umi';
+
+const Info: React.FC = () => {
+ const { formatMessage } = useIntl();
+
+ return (
+ <PageContainer title={formatMessage({ id: 'page.info.pageContainer.title'
})}>
+ <select className="selector" id="selector" style={{ backgroundColor:
"#fff", width: "100%", height: "24px", textAlign: "right", padding: "16px
24px", marginBottom: "15px" }}>
Review comment:
1. Use antd's Selector component;
##########
File path: web/src/pages/Info/styles.less
##########
@@ -0,0 +1,6 @@
+@import '~antd/es/style/themes/default.less';
+
+//未引入，将内联css放这里，待执行。
Review comment:
Only English is allowed for comments.
##########
File path: web/src/pages/Info/locales/en-US.ts
##########
@@ -0,0 +1,3 @@
+export default {
+ 'page.info.pageContainer.title': 'About Apache APISIX',
Review comment:
2 spaces
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
