src/App.css

@@ -15,34 +15,6 @@
   }
 }
 
-@media only screen and (orientation: landscape) {
-  #abc {
-    width: 200px;
-    height: 200px;
-    background-color: red;
-  }
-}
-
-/* 竖屏 */
-@media only screen and (orientation: portrait) {
-  #abc {
-    width: 200px;
-    height: 200px;
-    background-color: blue;
-  }
-}
-
-.pane_mobile {
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 200px;
-  height: 100vh;
-  background-color: #535353;
-  z-index: 1000;
-}
-
 .App-header {
   background-color: #282c34;
   min-height: 100vh;
@@ -90,7 +62,7 @@
 }
 
 .pane-btn.checked {
-  border: 3px solid #00de7a;
+  border: 3px solid #00DE7A;
 }
 
 .pane-btn + .pane-btn {
@@ -122,8 +94,8 @@
 .language-select-container .language-select {
   width: 156px;
   height: 42px;
-  background-color: #36383a;
+  background-color: #36383A;
-  color: #eeeeee;
+  color: #EEEEEE;
   font-size: 14px;
   display: flex;
   align-items: center;
@@ -132,8 +104,8 @@
 .language-select-warpper {
   position: relative;
   border-radius: 5px;
-  background: #36383a;
+  background: #36383A;
-  border: 1px solid #5b5b5b;
+  border: 1px solid #5B5B5B;
   box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.3);
 }
 

src/App.js

@@ -29,8 +29,6 @@ import { withTranslation } from "react-i18next";
 import i18n from "i18next";
 import languageImg from "./images/language.png";
 import Arrow from './images/arrow.svg'
-import logoPanePng from "./images/logo-pane.png";
-
 
 import SvgIcon from '@mui/material/SvgIcon';
 
@@ -42,14 +40,11 @@ function CustomIcon(props) {
   );
 }
 
-const isMobile = () => {
-  return /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
-}
-
 class App extends React.Component {
   constructor(props) {
     super();
     this.state = {
+      mode: "normal",
       projects: [],
       selectedProject: {},
       selectedProjectName: "",
@@ -66,16 +61,10 @@ class App extends React.Component {
         keepLogin: false,
       },
       language: localStorage.getItem("lang") ?? "zh",
-      isMobile: isMobile(),
     };
     this.t = props.t;
   }
-
   componentDidMount() {
-    window.addEventListener('resize', () => {
-      this.setState({ isMobile: isMobile() });
-    })
-
     const loginInfo = getLoginInfo();
     var tenant = utils.getTenant();
     const hideLogo = queryString.parseUrl(window.location.href)?.query
@@ -172,6 +161,12 @@ class App extends React.Component {
     });
   }
 
+  setMode(mode) {
+    this.setState({
+      mode: mode,
+    });
+  }
+
   setLoginForm(form) {
     this.setState({
       loginForm: {
@@ -213,7 +208,18 @@ class App extends React.Component {
   }
 
   render() {
-    const { device, projects, dataUrl, loading, loginOpen, loginForm, hideLogo, language, isMobile } = this.state;
+    var {
+      mode,
+      device,
+      projects,
+      selectedProject,
+      dataUrl,
+      loading,
+      loginOpen,
+      loginForm,
+      hideLogo,
+      language,
+    } = this.state;
     const { t } = this.props;
 
     return (
@@ -271,52 +277,44 @@ class App extends React.Component {
             <Button onClick={() => this.login()}>{t("submit")}</Button>
           </DialogActions>
         </Dialog>
-
+        <Pane
-        {
+          mode={mode}
-          <Pane
+          onModeChange={(_mode) => this.setMode(_mode)}
-            isMobile={isMobile}
+          projects={projects}
-            projects={projects}
+          device={device}
-            device={device}
+          loading={loading}
-            loading={loading}
+          hideLogo={hideLogo}
-            hideLogo={hideLogo}
+          onProjectSelect={(project) => {
-            onProjectSelect={(project) => {
+            this.setSelectedProject(project);
-              this.setSelectedProject(project);
+          }}
-            }}
+          onDeviceChange={(_device) => this.setDevice(_device)}
-            onDeviceChange={(_device) => this.setDevice(_device)}
+        />
-          />
+        <div className="language-select-container">
-        }
+          <div className="language-select-warpper">
-
+            <img className="language-icon" src={languageImg} style={{ width: "18px" }} alt="" />
-        {
+            <Select
-          !isMobile &&
+              className="language-select"
-          <div className="language-select-container">
+              value={language}
-            <div className="language-select-warpper">
+              label={t("language")}
-              <img className="language-icon" src={languageImg} style={{ width: "18px" }} alt="" />
+              IconComponent={CustomIcon}
-              <Select
+              onChange={(e) => {
-                className="language-select"
+                let lang = e.target.value;
-                value={language}
+                this.setState({
-                label={t("language")}
+                  language: lang,
-                IconComponent={CustomIcon}
+                });
-                onChange={(e) => {
+                i18n.changeLanguage(lang);
-                  let lang = e.target.value;
+                localStorage.setItem("lang", lang);
-                  this.setState({
+              }}
-                    language: lang,
+            >
-                  });
+              <MenuItem style={{ fontSize: "14px" }} value="en">
-                  i18n.changeLanguage(lang);
+                English
-                  localStorage.setItem("lang", lang);
+              </MenuItem>
-                }}
+              <MenuItem style={{ fontSize: "14px" }} value="zh">
-              >
+                简体中文
-                <MenuItem style={{ fontSize: "14px" }} value="en">
+              </MenuItem>
-                  English
+            </Select>
-                </MenuItem>
-                <MenuItem style={{ fontSize: "14px" }} value="zh">
-                  简体中文
-                </MenuItem>
-              </Select>
-            </div>
           </div>
-        }
+        </div>
-
-
         <div
           style={{
             display: "flex",
@@ -328,13 +326,20 @@ class App extends React.Component {
             backgroundRepeat: "no-repeat",
           }}
         >
-          <DeviceFrame
+          {mode === "normal" ? (
-            isMobile={isMobile}
+            <DeviceFrame
-            htmlUrl={this.selectedProjectUrl}
+              htmlUrl={this.selectedProjectUrl}
-            device={device}
+              device={device}
-            qrDataUrl={dataUrl}
+              qrDataUrl={dataUrl}
-            refreshQrCode={() => this.refreshQrCode()}
+              refreshQrCode={() => this.refreshQrCode()}
-          />
+            />
+          ) : (
+            <SettingFrame
+              setting={selectedProject?.TextObjStr}
+              settingValue={this.projectSettingValue}
+              generate={(value) => this.UpdateSetting(value)}
+            />
+          )}
         </div>
       </div>
     );

src/Components/deviceFrame/index.css

@@ -15,7 +15,6 @@
   right: 24px;
   bottom: 24px;
   cursor: pointer;
-  z-index: 1000;
 }
 
 .qrCode {

src/Components/deviceFrame/index.js

@@ -21,18 +21,12 @@ var configMap = {
 		width: "666px",
 		height: "321px",
 		offsetv: "4px",
-		imgStyle: {
-			marginTop: '-5px',
-		},
 	},
 	"android-v": {
 		bkg: androidVPng,
 		width: "321px",
 		height: "666px",
 		offsetv: "5px",
-		imgStyle: {
-			marginLeft: '2px',
-		},
 	},
 	"iphone-h": {
 		bkg: iphoneVPng,
@@ -45,37 +39,35 @@ var configMap = {
 	},
 	"iphone-v": {
 		bkg: iphoneVPng,
-		width: "325px",
+		width: "322px",
-		height: "690px",
+		height: "693px",
 		styles: {
 			borderRadius: '13px'
-		},
+		}
 	},
 	"ipad-h": {
 		bkg: ipadHPng,
 		rotate: true,
-		width: "646px",
+		width: "458px",
-		height: "478px",
+		height: "326px",
 		offsetv: "5px",
 		imgStyle: {
-			marginTop: '-2px',
+			transform: 'rotate(-90deg) scale(1.4)',
-			transform: 'translate(-50%, -50%) rotate(-90deg)',
 		},
 		styles: {
-			transform: "translate(-50%, -50%)",
+			transform: "translate(-50%, -50%) scale(1.42)",
 		}
 	},
 	"ipad-v": {
 		bkg: ipadHPng,
-		width: "478px",
+		width: "326px",
-		height: "646px",
+		height: "458px",
 		offsetv: "5px",
 		imgStyle: {
-			marginTop: '-2px',
+			transform: 'scale(1.4)',
-			transform: 'translate(-50%, -50%)',
 		},
 		styles: {
-			transform: "translate(-50%, -50%)",
+			transform: "translate(-50%, -50%) scale(1.42)",
 		}
 	},
 };
@@ -85,44 +77,11 @@ function DeviceFrame(props) {
 	var [cacheKey, setCacheKey] = useState(new Date().getTime());
 	var [openPopup, setOpenPopup] = useState(false);
 	var [absoluteUrl, setAbsoluteUrl] = useState("");
-	var [isMobile, setIsMobile] = useState(props.isMobile);
 	const { t } = useTranslation();
 
 	useEffect(() => {
-		// 将宽度和高度的值转换为数字，并增加10%
+		setConfig(configMap[props.device]);
-		const current = JSON.parse(JSON.stringify(configMap[props.device]))
+	}, [props.device, config]);
-		const w = parseFloat(current.width)
-		const h = parseFloat(current.height)
-		current.width = (w * 1.1) + 'px';
-		current.height = (h * 1.1) + 'px';
-		let bgW = (w * 1.1) + 32;
-		let bgH = (h * 1.1) + 32;
-		// 竖屏
-		if (props.device === 'android-v') {
-			bgW -= 12;
-		} else if (props.device === 'android-h') {
-			// 横屏
-			bgH -= 12;
-		}
-
-		// 平板
-		if (props.device === 'ipad-v') {
-			bgW += 28;
-			bgH += 28;
-		} else if (props.device === 'ipad-h') {
-			// 横屏
-			bgW += 28;
-			bgH += 28;
-		}
-
-		if (current.rotate) {
-			current.imgStyle = Object.assign({ height: bgW, width: bgH }, current.imgStyle || {})
-		} else {
-			current.imgStyle = Object.assign({ width: bgW, height: bgH }, current.imgStyle || {})
-		}
-		setConfig(current);
-		// setConfig(configMap[props.device]);
-	}, [props.device]);
 
 	var refresh = () => setCacheKey(new Date().getTime());
 
@@ -135,22 +94,19 @@ function DeviceFrame(props) {
 
 	return (
 		<div className="deviceFrameContainer">
-
 			<img src={refreshButtonPng} alt="refresh" onClick={() => refresh()} className="refreshButton" />
-			{props.qrDataUrl && !isMobile && (
+			{props.qrDataUrl && (
 				<div className="qrCode">
 					<img src={props.qrDataUrl} alt="qr code" />
 					<p style={{ margin: "0", }}>
 						{t("scan")}
 						<CopyToClipboard text={absoluteUrl} onCopy={() => setOpenPopup(true)}>
-							<img style={{ cursor: "pointer", width: "20px", height: "20px", marginLeft: '4px' }} src={copyPng} alt="复制链接" />
+							<img style={{ cursor: "pointer", width: "20px", height: "20px" }} src={copyPng} alt="复制链接" />
 						</CopyToClipboard>
 					</p>
 
 				</div>
 			)}
-
-
 			<Snackbar
 				open={openPopup}
 				onClose={() => setOpenPopup(false)}
@@ -163,57 +119,28 @@ function DeviceFrame(props) {
 					{t("copySuccess")}
 				</Alert>
 			</Snackbar>
-
+			<div>
-			{
+				<img src={config.bkg} alt="background" style={{ position: "relative", zIndex: 100, transform: config.rotate ? "rotate(-90deg)" : "", pointerEvents: 'none', ...config.imgStyle }} />
-
+				{props.htmlUrl && (
-				!isMobile ?
+					<iframe
-					<div>
+						id="deviceFrame"
-						<img src={config.bkg} alt="background" style={{
+						style={{
 							position: "absolute",
 							top: "50%",
 							left: "50%",
-							zIndex: 100,
+							transform: "translate(-50%, -50%) scale(1.007)",
-							transform: `translate(-50%, -50%) ${config.rotate ? "rotate(-90deg)" : ''}`,
+							paddingBottom: config.offsetv,
-							pointerEvents: 'none',
+							...config.styles
-							...config.imgStyle
+						}}
-						}} />
+						allow="clipboard-read; clipboard-write *"
-						{props.htmlUrl && (
+						title="preview"
-							<iframe
+						src={absoluteUrl + "&cacheKey=" + cacheKey}
-								id="deviceFrame"
+						width={config.width}
-								style={{
+						height={config.height}
-									position: "absolute",
+						frameBorder={"0"}
-									top: "50%",
+					/>
-									left: "50%",
+				)}
-									transform: "translate(-50%, -50%) scale(1.007)",
+			</div>
-									paddingBottom: config.offsetv,
-									...config.styles
-								}}
-								allow="clipboard-read; clipboard-write *"
-								title="preview"
-								src={absoluteUrl + "&cacheKey=" + cacheKey}
-								width={config.width}
-								height={config.height}
-								frameBorder={"0"}
-							/>
-						)}
-					</div> : <div>
-						{
-							props.htmlUrl && <iframe
-								id="deviceFrame_mobile"
-								allow="clipboard-read; clipboard-write *"
-								title="preview"
-								src={absoluteUrl + "&cacheKey=" + cacheKey}
-								style={{
-									position: 'fixed',
-									inset: 0,
-									width: '100vw',
-									height: window.innerHeight,
-								}}
-								frameBorder={"0"}
-							/>
-						}
-					</div>
-			}
 		</div>
 	);
 }

src/Components/pane/index.css

@@ -9,56 +9,6 @@
   position: relative;
 }
 
-.selectPager {
-  left: 25px !important;
-  /* width: 319px !important; */
-}
-
-.Pane.mobile {
-  position: relative;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 60vw;
-  height: 100vh;
-  background-color: #535353;
-  z-index: 1000;
-  overflow: hidden;
-  transition: width 0.2s linear;
-}
-
-.flod-menu-btn-warpper {
-  position: fixed;
-  right: 12px;
-  top: 10px;
-  padding: 6px;
-  border-radius: 6px;
-  z-index: 1000;
-  display: flex;
-  background-color: #535353;
-}
-
-.flod-menu-btn-warpper .flod-menu-btn {
-  width: 28px;
-  height: 28px;
-  transition: all 0.2s linear;
-}
-
-.Pane.mobile.fold {
-  padding: 0;
-  width: 0;
-}
-
-.logo_mobile {
-  position: absolute;
-  width: 90%;
-  bottom: 20px;
-  left: 0;
-  right: 0;
-  margin: auto;
-  display: block;
-}
-
 .modeSelect {
   width: 100%;
   border: none;
@@ -88,6 +38,11 @@
   cursor: pointer;
 }
 
+.selectPager {
+  left: 25px !important;
+  width: 319px !important;
+}
+
 .bottomLogo {
   position: absolute;
   width: 322px;

src/Components/pane/index.js

@@ -15,7 +15,6 @@ import horizentalButton from "../../images/horizental-button.png";
 import verticalChecked from "../../images/vertical-button-checked.png";
 import verticalButton from "../../images/vertical-button.png";
 import modeSelectPng from "../../images/mode-select.png";
-import menuIcon from "../../images/menu.png";
 import { useTranslation } from "react-i18next";
 import SvgIcon from '@mui/material/SvgIcon';
 
@@ -27,7 +26,7 @@ function CustomIcon(props) {
 	);
 }
 
-const deviceConfigs = [
+var deviceConfigs = [
 	{
 		name: "iPhone",
 		icon: iphonePng,
@@ -52,13 +51,17 @@ const deviceConfigs = [
 ];
 
 function Pane(props) {
-	var [isMobile] = useState(props.isMobile);
+	var [mode, setMode] = useState(props.mode);
 	var [device, setDevice] = useState(props.device);
 	var [project, setProject] = useState(props.project);
-
-	const [foldPanel, setFoldPanel] = useState(props.isMobile ? true : false);
 	const { t } = useTranslation();
 
+	var modeChange = (e) => {
+		var _mode = e.target.value;
+		setMode(_mode);
+		props.onModeChange(e.target.value);
+	};
+
 	var deviceChange = (_device) => {
 		setDevice(_device);
 		props.onDeviceChange(_device);
@@ -67,7 +70,6 @@ function Pane(props) {
 	var projectSelect = (e) => {
 		var projectName = e.target.value;
 		setProject(projectName);
-		setFoldPanel(true)
 		props.onProjectSelect(projectName);
 	};
 
@@ -75,26 +77,8 @@ function Pane(props) {
 		props.projects.length && !project && setProject(props.projects[0]);
 	}, [props.projects]);
 
-
 	return (
-		<div className={`Pane ${isMobile ? 'mobile' : ''} ${foldPanel ? 'fold' : ''}`} style={{ height: window.innerHeight }}>
+		<div className="Pane">
-			{
-				isMobile &&
-				<div className="flod-menu-btn-warpper">
-					<img
-						onClick={() => {
-							setFoldPanel(!foldPanel)
-						}}
-						src={menuIcon}
-						alt="menu"
-						className="flod-menu-btn"
-						style={{
-							transform: !foldPanel ? 'rotate(-90deg)' : '',
-						}}
-					/>
-				</div>
-			}
-
 			<div>
 				{props.loading ? (
 					<CircularProgress color="inherit" />
@@ -114,6 +98,9 @@ function Pane(props) {
 								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': {
@@ -137,52 +124,48 @@ function Pane(props) {
 				)}
 			</div>
 
+			<List
+				sx={{
+					paddingTop: '20px'
+				}}
+			>
+				{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'
 
-			{
+						}}>
-				!isMobile && <List
+						<div style={{ display: "flex", flexDirection: 'column', justifyContent: 'center', alignItems: "center", width: '98px' }}>
-					sx={{
+							<img className="deviceIcon" style={{ height: _device.name === 'iPad' ? '54px' : '76px' }} src={_device.icon} alt={_device.name} />
-						paddingTop: '20px'
+							<img className="deviceText" src={_device.text} alt={_device.name} />
-					}}
+						</div>
-				>
+						<div className="deviceContent">
-					{deviceConfigs.map((_device) => (
+							<div className="deviceButtons">
-						<ListItem
+								<button className={`pane-btn  ${device === _device.horizental ? "checked" : ""}`} onClick={() => deviceChange(_device.horizental)}>
-							key={_device.name}
+									{t("horizontal")}
-							sx={{
+								</button>
-								display: "flex",
+								<button className={`pane-btn  ${device === _device.vertical ? "checked" : ""}`} onClick={() => deviceChange(_device.vertical)}>
-								textAlign: "center",
+									{t("vertical")}
-								justifyContent: "space-between",
+								</button>
-								borderRadius: '5px',
+								{/* <img src={device === _device.horizental ? horizentalChecked : horizentalButton} alt="horizental" onClick={() => deviceChange(_device.horizental)} />
-								background: '#535353',
+								<img src={device === _device.vertical ? verticalChecked : verticalButton} alt="vertical" onClick={() => deviceChange(_device.vertical)} /> */}
-								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' }}>
-								<img className="deviceIcon" style={{ height: _device.name === 'iPad' ? '54px' : '76px' }} src={_device.icon} alt={_device.name} />
-								<img className="deviceText" src={_device.text} alt={_device.name} />
 							</div>
-							<div className="deviceContent">
+						</div>
-								<div className="deviceButtons">
+					</ListItem>
-									<button className={`pane-btn  ${device === _device.horizental ? "checked" : ""}`} onClick={() => deviceChange(_device.horizental)}>
+				))}
-										{t("horizontal")}
+			</List>
-									</button>
-									<button className={`pane-btn  ${device === _device.vertical ? "checked" : ""}`} onClick={() => deviceChange(_device.vertical)}>
-										{t("vertical")}
-									</button>
-									{/* <img src={device === _device.horizental ? horizentalChecked : horizentalButton} alt="horizental" onClick={() => deviceChange(_device.horizental)} />
-							<img src={device === _device.vertical ? verticalChecked : verticalButton} alt="vertical" onClick={() => deviceChange(_device.vertical)} /> */}
-								</div>
-							</div>
-						</ListItem>
-					))}
-				</List>
-			}
 
-			{(!props.hideLogo && !isMobile) && <div className="bottomLogo"><img src={logoPanePng} alt="logo" width={"100%"} /></div>}
+			{!props.hideLogo && <div className="bottomLogo"><img src={logoPanePng} alt="logo" width={"100%"} /></div>}
-			{(!props.hideLogo && isMobile) && <img src={logoPanePng} className="logo_mobile" alt="logo" width={"100%"} />}
 		</div>
 	);
 }

src/apis/loginApi.js

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