style(logo): 样式调整

适配私有部署时，更加方便的，少改动的进行 logo 文案替换

src/icons/ConsoleLogo.tsx

@@ -14,17 +14,18 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
+import { Box } from "@mui/material";
 import React, { SVGProps } from "react";
-import LoginMinIOLogo from "./LoginMinIOLogo";
+import LOGO from "../icons/menu_logo.png";
 
 const ConsoleLogo = (props: SVGProps<SVGSVGElement>) => {
   return (
-    <div style={{ display: "flex" }}>
-      <LoginMinIOLogo style={{ width: 35, height: 35 }} />
-      <div style={{ color: "#ffffff", fontSize: "25px", marginLeft: "5px" }}>
+    <Box sx={{ display: "flex" }}>
+      <img src={LOGO} alt="" style={{ width: 35, height: 35 }} />
+      <Box sx={{ color: "#ffffff", fontSize: "25px", marginLeft: "5px" }}>
         土星云
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 };
 

src/icons/LoginMinIOLogo.tsx

@@ -15,21 +15,12 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import * as React from "react";
-import { SVGProps } from "react";
-import tsIcon from "../icons/tuxingyunlogo.png";
+import LOGO from "../icons/login_logo.png";
 
-const LoginMinIOLogo = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="150"
-    height="150"
-    viewBox="0 0 150 150"
-    className={"min-icon"}
-    fill={"currentcolor"}
-    {...props}
-  >
-    <image style={{ width: "100%" }} xlinkHref={tsIcon}></image>
-  </svg>
+type IProps = React.ImgHTMLAttributes<HTMLImageElement>;
+
+const LoginMinIOLogo = (props: IProps) => (
+  <img alt="" {...props} style={{ maxHeight: 150 }} src={LOGO} />
 );
 
 export default LoginMinIOLogo;

src/icons/OperatorLogo.tsx

@@ -14,36 +14,25 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
+import { Box } from "@mui/material";
 import React, { SVGProps } from "react";
-import tsIcon from "../icons/tuxingyunlogo.png";
+import LOGO from "../icons/menu_logo.png";
 
 const OperatorLogo = (props: SVGProps<SVGSVGElement>) => {
   return (
-    // <svg
-    //   {...props}
-    //   className={`min-icon`}
-    //   fill={"currentcolor"}
-    //   xmlns="http://www.w3.org/2000/svg"
-    //   viewBox="0 0 606.583 134.691"
-    // >
-    //   <g id="prefix__Layer_2" data-name="Layer 2">
-    //     <g id="prefix__Layer_1-2" data-name="Layer 1">
-    //       <path
-    //         className="prefix__cls-1"
-    //         d="M79.695 95.063c0 23.03-16.763 39.628-39.848 39.628C16.763 134.69 0 118.092 0 95.063s16.763-39.628 39.847-39.628c23.085 0 39.848 16.599 39.848 39.628zm-69.582 0c0 18.083 12.806 30.339 29.734 30.339 16.929 0 29.735-12.256 29.735-30.34 0-18.081-12.806-30.338-29.735-30.338-16.928 0-29.734 12.257-29.734 30.339zM106.895 102.758v30.779H97.22V56.589h29.24c17.368 0 27.206 8.685 27.206 23.084 0 14.4-9.838 23.085-27.206 23.085zm0-37.045v27.921h19.346c11.377 0 17.368-4.617 17.368-13.96 0-9.344-5.99-13.96-17.368-13.96zM224.784 133.537h-54.632V56.589h54.082v9.07h-44.409v24.567h42.98v9.124h-42.98v25.118h44.96zM275.07 56.59c17.368 0 26.931 7.804 26.931 21.82 0 13.355-10.387 21.93-26.876 21.93h-.604l27.096 33.197h-11.982l-26.437-33.198h-9.013v33.198h-9.674V56.589zm-20.885 9.069v25.886h20.665c11.322 0 17.093-4.506 17.093-13.135 0-8.52-5.935-12.751-17.093-12.751zM384.716 133.537h-10.388l-8.464-20.996h-37.32l-8.409 20.996h-10.058l31.274-76.948h12.036zm-52.49-30.174h29.955l-14.95-37.21zM445.114 65.768h-26.217v67.769h-9.673V65.768h-26.272v-9.179h62.162zM531.566 95.063c0 23.03-16.763 39.628-39.847 39.628s-39.848-16.599-39.848-39.628 16.764-39.628 39.848-39.628 39.847 16.599 39.847 39.628zm-69.582 0c0 18.083 12.807 30.339 29.735 30.339 16.928 0 29.735-12.256 29.735-30.34 0-18.081-12.807-30.338-29.735-30.338-16.928 0-29.735 12.257-29.735 30.339zM579.652 56.59c17.368 0 26.931 7.804 26.931 21.82 0 13.355-10.388 21.93-26.876 21.93h-.605l27.096 33.197h-11.981l-26.437-33.198h-9.014v33.198h-9.673V56.589zm-20.886 9.069v25.886h20.666c11.322 0 17.093-4.506 17.093-13.135 0-8.52-5.936-12.751-17.093-12.751zM72.292.762h11.75v34.419h-11.75zM58.159 1.087l-23.85 14.566a1.06 1.06 0 01-1.106 0L9.352 1.087a3.272 3.272 0 00-1.705-.48h-.03a3.27 3.27 0 00-3.27 3.27v31.304H16.09V20.327a1.175 1.175 0 011.787-1.002l13.366 8.177a4.188 4.188 0 004.304.04l14.104-8.273a1.174 1.174 0 011.769 1.013v14.9h11.742V3.876a3.27 3.27 0 00-3.27-3.27h-.03a3.266 3.266 0 00-1.703.48zM142.742.753h-11.916v15.794a1.175 1.175 0 01-1.727 1.037L98.22 1.137A3.268 3.268 0 0096.68.753h-.02a3.27 3.27 0 00-3.27 3.27v31.158h11.82V19.64a1.174 1.174 0 011.725-1.038l31.004 16.445a3.27 3.27 0 001.533.381 3.27 3.27 0 003.27-3.27V.753zM152.279 35.173V.753h5.463v34.42zM189.208 35.926c-14.545 0-24.863-6.9-24.863-17.963C164.345 6.962 174.725 0 189.208 0c14.482 0 24.924 6.899 24.924 17.963s-10.194 17.963-24.924 17.963zm0-31.327c-10.815 0-19.145 4.724-19.145 13.364 0 8.702 8.33 13.363 19.145 13.363s19.206-4.662 19.206-13.363c0-8.64-8.392-13.364-19.206-13.364z"
-    //       />
-    //     </g>
-    //   </g>
-    // </svg>
-    <div style={{display: "flex"}}>
-      <img
-          width="35"
-        height="35"
-          src={tsIcon}
-          alt={"preview"}
-        />
-        <div style={{color: "rgba(0, 0, 0, 0.77)", fontSize: "25px",fontWeight:"500",marginLeft:"5px"}} >土星云</div>
-      </div>
+    <Box sx={{ display: "flex" }}>
+      <img width="35" height="35" src={LOGO} alt={"preview"} />
+      <Box
+        sx={{
+          color: "rgba(0, 0, 0, 0.77)",
+          fontSize: "25px",
+          fontWeight: "500",
+          marginLeft: "5px",
+        }}
+      >
+        土星云
+      </Box>
+    </Box>
   );
 };
 

src/icons/VersionIcon.tsx

@@ -16,15 +16,10 @@
 
 import * as React from "react";
 import { SVGProps } from "react";
-import tsIcon from "../icons/tuxingyunlogo.png";
+import LOGO from "../icons/menu_logo.png";
 
 const VersionIcon = (props: SVGProps<SVGSVGElement>) => (
-  <img
-          width="35"
-        height="35"
-          src={tsIcon}
-          alt={"preview"}
-        />
+  <img width="35" height="35" src={LOGO} alt={"preview"} />
 );
 
 export default VersionIcon;

src/screens/LoginPage/LoginPage.tsx

@@ -114,20 +114,12 @@ const styles = (theme: Theme) =>
         "& .left-items": {
           margin: "auto",
           textAlign: "left",
-          paddingRight: 240,
-          paddingBottom: 200,
-          "@media (max-width: 1400px)": {
-            paddingBottom: 120,
-            paddingRight: 50,
-          },
-          "@media (max-width: 900px)": {
-            paddingBottom: 0,
-            paddingRight: 0,
-          },
-          "@media (max-width: 600px)": {
-            paddingBottom: 0,
-            paddingRight: 0,
-          },
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
         },
         "& .left-logo": {
           "& .min-icon": {

src/setupProxy.js

@@ -5,7 +5,7 @@ module.exports = function (app) {
     "/api/v1/",
     createProxyMiddleware({
       target:
-        "https://open-52398f05-7e35-4388-a8d5-f7f8ad25faa3-console.kube.ucas/",
+        "https://open-1ebd2eca-38fc-4ad7-bb20-98fa78f440af-console.kube.ucas/",
       changeOrigin: true,
       secure: false,
       pathRewrite: { "": "" },