src/App.css

@@ -48,25 +48,24 @@
 }
 
 .pane-btn {
-  border-radius: 8px;
+  border-radius: 4px;
-  border: 3px solid #494949;
+  border: 0;
   display: inline-block;
-  height: 62px;
+  height: 30px;
-  width: 62px;
+  line-height: 30px;
+  width: 150px;
   cursor: pointer;
   outline: none;
   font-weight: bold;
-  background: #494949;
-  color: #eee;
-  box-sizing: border-box;
 }
 
 .pane-btn.checked {
-  border: 3px solid #00DE7A;
+  background-color: #02b564;
+  color: white;
 }
 
 .pane-btn + .pane-btn {
-  margin-left: 14px;
+  margin-left: 10px;
 }
 
 .generate-btn {
@@ -86,16 +85,17 @@
   display: flex;
   align-items: center;
   position: fixed;
-  right: 24px;
+  right: 40px;
-  top: 24px;
+  top: 30px;
   z-index: 1000;
 }
 
 .language-select-container .language-select {
-  width: 156px;
+  margin-left: 10px;
-  height: 42px;
+  width: 135px;
-  background-color: #36383A;
+  height: 35px;
-  color: #EEEEEE;
+  background-color: #eef1f6;
+  color: #333333;
   font-size: 14px;
   display: flex;
   align-items: center;
@@ -103,16 +103,12 @@
 
 .language-select-warpper {
   position: relative;
-  border-radius: 5px;
-  background: #36383A;
-  border: 1px solid #5B5B5B;
-  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.3);
 }
 
 .language-select-warpper .language-icon {
   position: absolute;
-  left: 14px;
+  left: 18px;
-  top: 11px;
+  top: 8px;
   z-index: 2000;
 }
 

src/App.js

@@ -28,17 +28,6 @@ import queryString from "query-string";
 import { withTranslation } from "react-i18next";
 import i18n from "i18next";
 import languageImg from "./images/language.png";
-import Arrow from './images/arrow.svg'
-
-import SvgIcon from '@mui/material/SvgIcon';
-
-function CustomIcon(props) {
-  return (
-    <SvgIcon viewBox="0 0 24 24" {...props}>
-      <path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z" fill="white" />
-    </SvgIcon>
-  );
-}
 
 class App extends React.Component {
   constructor(props) {
@@ -296,7 +285,6 @@ class App extends React.Component {
               className="language-select"
               value={language}
               label={t("language")}
-              IconComponent={CustomIcon}
               onChange={(e) => {
                 let lang = e.target.value;
                 this.setState({

src/Components/deviceFrame/index.css

@@ -1,45 +1,33 @@
 .deviceFrameContainer {
   width: 100%;
-  height: 100vh;
   flex: 1 1 0%;
   align-items: center;
   position: relative;
   display: flex;
+  height: 100vh;
   justify-content: center;
   overflow: hidden;
-  background: #36383A;
 }
 
 .refreshButton {
   position: absolute;
-  right: 24px;
+  left: 30px;
-  bottom: 24px;
+  bottom: 30px;
   cursor: pointer;
 }
 
 .qrCode {
   position: absolute;
-  right: 24px;
+  right: 40px;
-  top: 82px;
+  top: 100px;
-  background: #DBDBDB;
-  width: 156px;
-  text-align: center;
-  border-radius: 5px;
-  padding-top: 14px;
-  padding-bottom: 11px;
 }
 
 .qrCode p {
   display: flex;
-  justify-content: center;
   align-items: center;
-  color: #666666;
+  padding-left: 23px;
-  font-size: 14px;
 }
 
 .qrCode img {
-}
+    margin-left: 6px;
-
-#deviceFrame {
-  border-radius: 10px;
 }

src/Components/deviceFrame/index.js

@@ -3,7 +3,7 @@ import androidHPng from "../../images/android-h.png";
 import androidVPng from "../../images/android-v.png";
 import iphoneHPng from "../../images/iphone-h.png";
 import iphoneVPng from "../../images/iphone-v.png";
-import ipadHPng from "../../images/ipad-horizontal.png";
+import ipadHPng from "../../images/iPad-h.png";
 import ipadVPng from "../../images/iPad-v.png";
 import copyPng from "../../images/copy.png";
 import refreshButtonPng from "../../images/refresh-button.png";
@@ -12,63 +12,41 @@ import React, { useEffect, useState } from "react";
 import { BaseUrl } from "../../constants";
 import { Alert, Snackbar } from "@mui/material";
 import { useTranslation } from "react-i18next";
-import zIndex from "@mui/material/styles/zIndex";
 
 var configMap = {
 	"android-h": {
-		bkg: androidVPng,
+		bkg: androidHPng,
-		rotate: true,
+		width: "512px",
-		width: "666px",
+		height: "286px",
-		height: "321px",
+		offsetv: "5px",
-		offsetv: "4px",
 	},
 	"android-v": {
 		bkg: androidVPng,
-		width: "321px",
+		width: "286px",
-		height: "666px",
+		height: "512px",
 		offsetv: "5px",
 	},
 	"iphone-h": {
-		bkg: iphoneVPng,
+		bkg: iphoneHPng,
-		rotate: true,
+		width: "628px",
-		width: "690px",
+		height: "322px",
-		height: "325px",
-		styles: {
-			borderRadius: '13px'
-		}
 	},
 	"iphone-v": {
 		bkg: iphoneVPng,
 		width: "322px",
-		height: "693px",
+		height: "628px",
-		styles: {
-			borderRadius: '13px'
-		}
 	},
 	"ipad-h": {
 		bkg: ipadHPng,
-		rotate: true,
+		width: "433px",
-		width: "458px",
 		height: "326px",
 		offsetv: "5px",
-		imgStyle: {
-			transform: 'rotate(-90deg) scale(1.4)',
-		},
-		styles: {
-			transform: "translate(-50%, -50%) scale(1.42)",
-		}
 	},
 	"ipad-v": {
-		bkg: ipadHPng,
+		bkg: ipadVPng,
-		width: "326px",
+		width: "324px",
-		height: "458px",
+		height: "433px",
 		offsetv: "5px",
-		imgStyle: {
-			transform: 'scale(1.4)',
-		},
-		styles: {
-			transform: "translate(-50%, -50%) scale(1.42)",
-		}
 	},
 };
 
@@ -97,14 +75,13 @@ function DeviceFrame(props) {
 			<img src={refreshButtonPng} alt="refresh" onClick={() => refresh()} className="refreshButton" />
 			{props.qrDataUrl && (
 				<div className="qrCode">
-					<img src={props.qrDataUrl} alt="qr code" />
+					<p style={{ margin: "0" }}>
-					<p style={{ margin: "0", }}>
 						{t("scan")}
 						<CopyToClipboard text={absoluteUrl} onCopy={() => setOpenPopup(true)}>
 							<img style={{ cursor: "pointer", width: "20px", height: "20px" }} src={copyPng} alt="复制链接" />
 						</CopyToClipboard>
 					</p>
-
+					<img src={props.qrDataUrl} alt="qr code" />
 				</div>
 			)}
 			<Snackbar
@@ -120,7 +97,7 @@ function DeviceFrame(props) {
 				</Alert>
 			</Snackbar>
 			<div>
-				<img src={config.bkg} alt="background" style={{ position: "relative", zIndex: 100, transform: config.rotate ? "rotate(-90deg)" : "", pointerEvents: 'none', ...config.imgStyle }} />
+				<img src={config.bkg} alt="background" />
 				{props.htmlUrl && (
 					<iframe
 						id="deviceFrame"
@@ -128,9 +105,8 @@ function DeviceFrame(props) {
 							position: "absolute",
 							top: "50%",
 							left: "50%",
-							transform: "translate(-50%, -50%) scale(1.007)",
+							transform: "translate(-50%, -50%)",
 							paddingBottom: config.offsetv,
-							...config.styles
 						}}
 						allow="clipboard-read; clipboard-write *"
 						title="preview"

src/Components/pane/index.css

@@ -1,58 +1,43 @@
 .Pane {
-  width: 370px;
+    width: 350px;
-  background-color: #535353;
+    background-color: rgb(52, 90, 176);
-  min-height: 100vh;
+    min-height: 100vh;
-  padding: 24px;
+    display: flex;
-  box-sizing: border-box;
+    flex-direction: column;
-  display: flex;
-  flex-direction: column;
-  position: relative;
 }
 
 .modeSelect {
-  width: 100%;
+    width: 100%;
-  border: none;
+    border: none;
 }
 
 .deviceIcon {
-  width: auto;
+    width: auto;
-  height: 76px;
+    height: 80px;
-  margin-bottom: 10px;
+    margin-right: 10px;
-  margin-top: 7px;
+    margin-bottom: -24px;
-}
-.deviceText {
 }
 
 .deviceContent {
-  height: 100%;
+    text-align: left;
-  color: #eeeeee;
+    color: white;
 }
 
 .deviceButtons {
-  height: 100%;
+    width: 160px;
-  display: flex;
+    display: flex;
-  justify-content: space-between;
+    justify-content: space-between;
 }
 
 .deviceButtons img {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .selectPager {
-  left: 25px !important;
+    left: 0 !important;
-  width: 319px !important;
+    width: 350px;
 }
 
 .bottomLogo {
-  position: absolute;
+    margin-top: auto;
-  width: 322px;
+}
-  bottom: 24px;
-  text-align: center;
-  img {
-    width: 280px;
-  }
-}
-
-.Mui-focused .MuiOutlinedInput-notchedOutline {
-  border: none;
-}

src/Components/pane/index.js

@@ -4,11 +4,8 @@ import MenuItem from "@mui/material/MenuItem";
 import { useEffect, useState } from "react";
 import { CircularProgress, List, ListItem } from "@mui/material";
 import ipadPng from "../../images/ipad.png";
-import ipadTextPng from "../../images/ipad-text.png";
 import iphonePng from "../../images/iphone.png";
-import iphoneTextPng from '../../images/iphone-text.png'
 import androidPng from "../../images/android.png";
-import androidTextPng from '../../images/android-text.png'
 import logoPanePng from "../../images/logo-pane.png";
 import horizentalChecked from "../../images/horizental-button-checked.png";
 import horizentalButton from "../../images/horizental-button.png";
@@ -16,35 +13,23 @@ import verticalChecked from "../../images/vertical-button-checked.png";
 import verticalButton from "../../images/vertical-button.png";
 import modeSelectPng from "../../images/mode-select.png";
 import { useTranslation } from "react-i18next";
-import SvgIcon from '@mui/material/SvgIcon';
-
-function CustomIcon(props) {
-	return (
-		<SvgIcon viewBox="0 0 24 24" {...props}>
-			<path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z" fill="white" />
-		</SvgIcon>
-	);
-}
 
 var deviceConfigs = [
 	{
 		name: "iPhone",
 		icon: iphonePng,
-		text: iphoneTextPng,
 		vertical: "iphone-v",
 		horizental: "iphone-h",
 	},
 	{
 		name: "Android Phone",
 		icon: androidPng,
-		text: androidTextPng,
 		vertical: "android-v",
 		horizental: "android-h",
 	},
 	{
 		name: "iPad",
 		icon: ipadPng,
-		text: ipadTextPng,
 		vertical: "ipad-v",
 		horizental: "ipad-h",
 	},
@@ -79,77 +64,39 @@ function Pane(props) {
 
 	return (
 		<div className="Pane">
-			<div>
+			<Select
-				{props.loading ? (
+				id="mode-select"
-					<CircularProgress color="inherit" />
+				value={mode}
-				) : (
+				onChange={(e) => modeChange(e)}
-					project && (
+				startAdornment={<img src={modeSelectPng} height={"30px"} alt="selected" />}
-						<Select
-							id="project-select"
-							value={project}
-							onChange={(e) => projectSelect(e)}
-							IconComponent={CustomIcon}
-							placeholder="选择项目"
-							sx={{
-								width: "100%",
-								height: '42px',
-								border: "1px solid #757575",
-								background: "#535353",
-								borderRadius: '5px',
-								color: "white",
-								boxShadow: '0px 3px 0px 0px rgba(0, 0, 0, 0.3)',
-								// '&.MuiOutlinedInput-notchedOutline': {
-								// 		borderColor: '#757575', // 设置焦点时的边框颜色为红色
-								// 	},
-								'&.Mui-focused': {
-									borderColor: '#757575',
-									'&.MuiOutlinedInput-notchedOutline': {
-										borderColor: '#757575 !important',
-									},
-								},
-							}}
-							MenuProps={{
-								classes: {
-									paper: "selectPager",
-								},
-							}}
-						>
-							{props.projects.map((pName, i) => (
-								<MenuItem key={i} value={pName}>
-									{pName}
-								</MenuItem>
-							))}
-						</Select>
-					)
-				)}
-			</div>
-
-			<List
 				sx={{
-					paddingTop: '20px'
+					width: "100%",
+					border: "none",
+					background: "rgb(69, 115, 191)",
+					color: "white",
+					fontWeight: "bold",
 				}}
-			>
+				MenuProps={{
+					classes: {
+						paper: "selectPager",
+					},
+				}}>
+				<MenuItem value={"normal"}>Normal Preview</MenuItem>
+				<MenuItem value={"dynamic"}>Dynamic Preview</MenuItem>
+			</Select>
+			<List>
 				{deviceConfigs.map((_device) => (
 					<ListItem
 						key={_device.name}
 						sx={{
 							display: "flex",
 							textAlign: "center",
-							justifyContent: "space-between",
-							borderRadius: '5px',
-							background: '#535353',
-							border: '1px solid #757575',
-							boxShadow: '0px 3px 0px 0px rgba(0, 0, 0, 0.3)',
-							paddingLeft: '23px',
-							paddingRight: '20px',
-							marginBottom: '14px'
-
 						}}>
-						<div style={{ display: "flex", flexDirection: 'column', justifyContent: 'center', alignItems: "center", width: '98px' }}>
+						<div style={{ width: "120px", alignItems: "center" }}>
-							<img className="deviceIcon" style={{ height: _device.name === 'iPad' ? '54px' : '76px' }} src={_device.icon} alt={_device.name} />
+							<img className="deviceIcon" src={_device.icon} alt={_device.name} />
-							<img className="deviceText" src={_device.text} alt={_device.name} />
 						</div>
 						<div className="deviceContent">
+							<p style={{ margin: "14px 0" }}>{_device.name}</p>
 							<div className="deviceButtons">
 								<button className={`pane-btn  ${device === _device.horizental ? "checked" : ""}`} onClick={() => deviceChange(_device.horizental)}>
 									{t("horizontal")}
@@ -164,8 +111,35 @@ function Pane(props) {
 					</ListItem>
 				))}
 			</List>
-
+			<div
-			{!props.hideLogo && <div className="bottomLogo"><img src={logoPanePng} alt="logo" width={"100%"} /></div>}
+				style={{
+					marginTop: "50px",
+					color: "white",
+				}}>
+				{props.loading ? (
+					<CircularProgress color="inherit" />
+				) : (
+					project && (
+						<Select
+							id="project-select"
+							value={project}
+							onChange={(e) => projectSelect(e)}
+							placeholder="选择项目"
+							sx={{
+								background: "rgb(115, 158, 211)",
+								width: "80%",
+								color: "white",
+							}}>
+							{props.projects.map((pName, i) => (
+								<MenuItem key={i} value={pName}>
+									{pName}
+								</MenuItem>
+							))}
+						</Select>
+					)
+				)}
+			</div>
+			{!props.hideLogo && <img src={logoPanePng} alt="logo" width={"100%"} className="bottomLogo" />}
 		</div>
 	);
 }

src/apis/loginApi.js

@@ -1,5 +1,4 @@
-// var BaseUrl = "https://api.soyootech.com/";
+var BaseUrl = "https://api.soyootech.com/";
-var BaseUrl = "api/";
 export async function UserLogin(loginForm) {
   try {
     var response = await fetch(BaseUrl + "SoyooUser/previewlogin", {

src/images/arrow.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="13.435028612613678" height="13.435028612613678" viewBox="0 0 13.435028612613678 13.435028612613678"><g transform="matrix(0.7071067690849304,-0.7071067690849304,0.7071067690849304,0.7071067690849304,-4.335786265016024,2.9675144346638707)"><path d="M0.41421353816986084,15.217514306306839L8.91421353816986,15.217514306306839L8.91421353816986,13.217514306306839L2.414213538169861,13.217514306306839L2.414213538169861,6.717514306306839L0.41421353816986084,6.717514306306839L0.41421353816986084,15.217514306306839Z" fill-rule="evenodd" fill="#D8D8D8" fill-opacity="1"/></g></svg>

src/images/svg/arrow.jsx

@@ -1,10 +0,0 @@
-import SvgIcon from '@mui/material/SvgIcon';
-import React from "react";
-
-export function ArrowIcon(props) {
-    return (
-      <SvgIcon viewBox="0 0 24 24" {...props}>
-        <path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z" fill="white" />
-      </SvgIcon>
-    );
-  }

src/locales/en.json

@@ -6,7 +6,7 @@
     "submit": "Submit",
     "noAuth": "No permission",
     "loginError": "Account or password is incorrect",
-    "horizontal": "Hor",
+    "horizontal": "Horizontal",
     "vertical": "Vertical",
     "scan": "Mobile preview",
     "none": "None",

src/setupProxy.js

@@ -1,12 +1,12 @@
 const { createProxyMiddleware } = require("http-proxy-middleware");
 
 module.exports = function (app) {
-	app.use(
+	// app.use(
-		"/api",
+	// 	"/api",
-		createProxyMiddleware({
+	// 	createProxyMiddleware({
-			target: "https://api.soyootech.com/",
+	// 		target: "https://api.soyootech.com/",
-			changeOrigin: true,
+	// 		changeOrigin: true,
-			pathRewrite: { "^/api": "" },
+	// 		pathRewrite: { "^/api": "" },
-		})
+	// 	})
-	);
+	// );
 };