improve: webUI improve

ai365vip · May 27, 2024 · 3d767fa · 3d767fa
1 parent 177c3f0
commit 3d767fa
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 24 deletions.
diff --git a/web-user/src/assets/fonts/roboto-500.woff2 b/web-user/src/assets/fonts/roboto-500.woff2
diff --git a/web-user/src/assets/fonts/roboto-700.woff2 b/web-user/src/assets/fonts/roboto-700.woff2
diff --git a/web-user/src/assets/fonts/roboto-regular.woff2 b/web-user/src/assets/fonts/roboto-regular.woff2
diff --git a/web-user/src/assets/scss/_themes-vars.module.scss b/web-user/src/assets/scss/_themes-vars.module.scss
@@ -52,14 +52,14 @@ $tableBorderBottom: #f1f3f4;
 
 // paper & background
 $darkBackground: #2f333f; // level 3
-$darkPaper: #202525; // level 4
+$darkPaper: #384049; // level 4#181818
 
 $darkDivider: rgba(227, 232, 239, 0.2);
 $darkSelectedBack : rgba(124, 77, 255, 0.15);
 
 // dark 800 & 900
-$darkLevel1: #1f262a; // level 1
-$darkLevel2: #202525; // level 2
+$darkLevel1: #2f333f; // level 1
+$darkLevel2: #384049; // level 2
 
 // primary dark
 $darkPrimaryLight: #eef2f6;

diff --git a/web-user/src/assets/scss/fonts.scss b/web-user/src/assets/scss/fonts.scss
@@ -0,0 +1,32 @@
+
+/* roboto-regular */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Roboto'), url('../fonts/roboto-regular.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+
+  /* roboto-500 */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: local('Roboto'), url('../fonts/roboto-500.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+
+/* roboto-700 */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Roboto'), url('../fonts/roboto-700.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
diff --git a/web-user/src/assets/scss/style.scss b/web-user/src/assets/scss/style.scss
@@ -1,3 +1,4 @@
+@import 'fonts.scss';
 // color variants
 @import 'themes-vars.module.scss';
 

diff --git a/web-user/src/layout/MainLayout/Sidebar/MenuCard/index.js b/web-user/src/layout/MainLayout/Sidebar/MenuCard/index.js
@@ -113,7 +113,6 @@ const MenuCard = () => {
                   <Chip
                     icon={<MonetizationOnIcon />} // 在Chip内部使用图标
                     label={calculateQuota(inputs.quota)}
-                    color="secondary" // 设置颜色
                     size="small"
                     variant="outlined" // 设置变体，使其看起来更像按钮
                     sx={{ cursor: 'pointer' }} // 进一步强调可点击的视觉效果

diff --git a/web-user/src/ui-component/AdminContainer.js b/web-user/src/ui-component/AdminContainer.js
@@ -2,9 +2,10 @@ import { styled } from '@mui/material/styles';
 import { Container } from '@mui/material';
 
 const AdminContainer = styled(Container)(({ theme }) => ({
-  [theme.breakpoints.down('md')]: {
-    paddingLeft: '0px',
-    paddingRight: '0px'
+  paddingLeft: '0px !important',
+  paddingRight: '0px !important',
+  [theme.breakpoints.up('md')]: {
+    maxWidth: '1300px'
   }
 }));
 

diff --git a/web-user/src/views/Log/component/TableRow.js b/web-user/src/views/Log/component/TableRow.js
@@ -1,19 +1,22 @@
 import PropTypes from 'prop-types';
-import { TableRow, TableCell, Chip } from '@mui/material';
+import { TableRow, TableCell } from '@mui/material';
 import { timestamp2string, renderQuota, showSuccess, showError } from 'utils/common';
-
+import Label from 'ui-component/Label';
+import { amber, blue, grey, indigo, lightBlue, lime, orange, pink, purple, red, deepOrange, deepPurple, green, lightGreen, blueGrey, teal, yellow, brown, cyan } from '@mui/material/colors';
 function renderIsStream(bool) {
   return bool ? (
-    <Chip label="流" color="primary" size="small" variant="outlined" />
+    <Label style={{ color: blue[500], borderColor: blue[500] }} size="small" variant="outlined">流</Label>
   ) : (
-    <Chip label="非流" color="secondary" size="small" variant="outlined" />
+    <Label style={{ color: grey[500], borderColor: grey[500] }} size="small" variant="outlined">非流</Label>
   );
 }
 
 const colors = [
-  'amber', 'blue', 'cyan', 'green', 'grey', 'indigo',
-  'light-blue', 'lime', 'orange', 'pink', 'purple', 
-  'red', 'teal', 'violet', 'yellow'
+  amber[500], blue[500], grey[500], indigo[500],
+  lightBlue[500], lime[500], orange[500], pink[500], purple[500],
+  red[500], cyan[500], teal[500], yellow[500], 
+  brown[500], deepOrange[500], deepPurple[500], green[500], 
+  lightGreen[500], blueGrey[500]
 ];
 
 function stringToColor(str) {
@@ -28,26 +31,26 @@ function stringToColor(str) {
 function renderType(type) {
   switch (type) {
     case 1:
-      return <Chip label="充值" color="info" size="small" variant="outlined" />;
+      return <Label style={{ color: blue[500], borderColor: blue[500] }} size="small" variant="outlined" >充值</Label>;
     case 2:
-      return <Chip label="消费" color="success"  size="small" variant="outlined" />;
+      return <Label style={{ color: green[500], borderColor: green[500] }} size="small" variant="outlined" >消费</Label>;
     case 3:
-      return <Chip label="管理" color="warning" size="small" variant="outlined" />;
+      return <Label style={{ color: orange[500], borderColor: orange[500] }} size="small" variant="outlined" >管理</Label>;
     case 4:
-      return <Chip label="系统" color="error" size="small" variant="outlined" />;
+      return <Label style={{ color: red[500], borderColor: red[500] }} size="small" variant="outlined" >系统</Label>;
     default:
-      return <Chip label="未知" size="small" variant="outlined" />;
+      return <Label style={{ color: grey[500], borderColor: grey[500] }} size="small" variant="outlined" >未知</Label>;
   }
 }
 
 function renderUseTime(time) {
   const parsedTime = parseInt(time);
   if (parsedTime < 101) {
-    return <Chip label={`${time} s`} color="success" size="small"  variant="outlined" />;
+    return <Label style={{ color: green[500], borderColor: green[500] }} size="small" variant="outlined">{`${time} s`}</Label>;
   } else if (parsedTime < 300) {
-    return <Chip label={`${time} s`} color="warning" size="small"  variant="outlined" />;
+    return <Label style={{ color: orange[500], borderColor: orange[500] }} size="small" variant="outlined">{`${time} s`}</Label>;
   } else {
-    return <Chip label={`${time} s`} color="error" size="small"  variant="outlined" />;
+    return <Label style={{ color: red[500], borderColor: red[500] }} size="small" variant="outlined">{`${time} s`}</Label>;
   }
 }
 
@@ -66,11 +69,15 @@ export default function LogTableRow({ item }) {
     <TableRow tabIndex={item.id}>
       <TableCell>{timestamp2string(item.created_at)}</TableCell>
       <TableCell onClick={() => handleCopyToClipboard(item.token_name)} style={{ cursor: 'pointer' }}>
-        <Chip label={item.token_name} color="default" variant="outlined" />
+        <Label color="default" variant="outlined" >
+        {item.token_name}
+        </Label>
       </TableCell>
       <TableCell>{renderType(item.type)}</TableCell>
       <TableCell onClick={() => handleCopyToClipboard(item.model_name)} >
-        <Chip label={item.model_name} style={{ borderColor: stringToColor(item.model_name) }} variant="outlined" />
+        <Label style={{ color: stringToColor(item.model_name) }} variant="outlined" >
+        {item.model_name} 
+        </Label>
       </TableCell>
       <TableCell>
         {renderUseTime(item.use_time)}