feat: 修改样式
parent
a0a9f49548
commit
19c5d15843
21
src/App.css
21
src/App.css
|
|
@ -52,6 +52,7 @@
|
|||
border: 0;
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
width: 150px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
|
|
@ -91,8 +92,24 @@
|
|||
|
||||
.language-select-container .language-select {
|
||||
margin-left: 10px;
|
||||
width: 120px;
|
||||
height: 30px;
|
||||
width: 135px;
|
||||
height: 35px;
|
||||
background-color: #eef1f6;
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.language-select-warpper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.language-select-warpper .language-icon {
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
top: 8px;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.language-select-container .language-select fieldset {
|
||||
|
|
|
|||
88
src/App.js
88
src/App.js
|
|
@ -8,7 +8,12 @@ import waterMarkPng from "./images/water-mark.png";
|
|||
import React from "react";
|
||||
import SettingFrame from "./Components/settingsFrame";
|
||||
import QrCode from "qrcode";
|
||||
import { getLoginInfo, getProjectSettingValue, setLoginInfo, setProjectSetting } from "./storage";
|
||||
import {
|
||||
getLoginInfo,
|
||||
getProjectSettingValue,
|
||||
setLoginInfo,
|
||||
setProjectSetting,
|
||||
} from "./storage";
|
||||
import Select from "@mui/material/Select";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import Button from "@mui/material/Button";
|
||||
|
|
@ -22,6 +27,7 @@ import FormControlLabel from "@mui/material/FormControlLabel";
|
|||
import queryString from "query-string";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import i18n from "i18next";
|
||||
import languageImg from "./images/language.png";
|
||||
|
||||
class App extends React.Component {
|
||||
constructor(props) {
|
||||
|
|
@ -50,7 +56,8 @@ class App extends React.Component {
|
|||
componentDidMount() {
|
||||
const loginInfo = getLoginInfo();
|
||||
var tenant = utils.getTenant();
|
||||
const hideLogo = queryString.parseUrl(window.location.href)?.query?.hideLogo;
|
||||
const hideLogo = queryString.parseUrl(window.location.href)?.query
|
||||
?.hideLogo;
|
||||
this.setState({ hideLogo: !!hideLogo });
|
||||
if (loginInfo && loginInfo.permissionPages.includes(tenant)) {
|
||||
this.fetchData();
|
||||
|
|
@ -96,9 +103,13 @@ class App extends React.Component {
|
|||
|
||||
get selectedProjectUrl() {
|
||||
var { selectedProject } = this.state;
|
||||
var settingValue = getProjectSettingValue(selectedProject?.Name) || [1, 1, 1];
|
||||
var rawUrl = selectedProject?.HtmlUrl ? encodeURI(selectedProject?.HtmlUrl) : "";
|
||||
rawUrl = rawUrl.replace("http:", () => "https:")
|
||||
var settingValue = getProjectSettingValue(selectedProject?.Name) || [
|
||||
1, 1, 1,
|
||||
];
|
||||
var rawUrl = selectedProject?.HtmlUrl
|
||||
? encodeURI(selectedProject?.HtmlUrl)
|
||||
: "";
|
||||
rawUrl = rawUrl.replace("http:", () => "https:");
|
||||
if (rawUrl) {
|
||||
rawUrl += `?datanumber=${settingValue[0]}&datanumber1=${settingValue[1]}&datanumber2=${settingValue[2]}&lunaOrHtml=false`;
|
||||
}
|
||||
|
|
@ -178,11 +189,26 @@ class App extends React.Component {
|
|||
}
|
||||
|
||||
UpdateSetting(obj) {
|
||||
setProjectSetting(this.state.selectedProject.Name, [+obj.topType, +obj.centreType, +obj.middleType]);
|
||||
setProjectSetting(this.state.selectedProject.Name, [
|
||||
+obj.topType,
|
||||
+obj.centreType,
|
||||
+obj.middleType,
|
||||
]);
|
||||
}
|
||||
|
||||
render() {
|
||||
var { mode, device, projects, selectedProject, dataUrl, loading, loginOpen, loginForm, hideLogo, language } = this.state;
|
||||
var {
|
||||
mode,
|
||||
device,
|
||||
projects,
|
||||
selectedProject,
|
||||
dataUrl,
|
||||
loading,
|
||||
loginOpen,
|
||||
loginForm,
|
||||
hideLogo,
|
||||
language,
|
||||
} = this.state;
|
||||
const { t } = this.props;
|
||||
|
||||
return (
|
||||
|
|
@ -221,12 +247,20 @@ class App extends React.Component {
|
|||
color: "red",
|
||||
fontSize: "12px",
|
||||
margin: "0 auto 0 10px",
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
{t(this.state.loginErrorMessage)}
|
||||
</span>
|
||||
)}
|
||||
<FormControlLabel
|
||||
control={<Checkbox checked={loginForm.keepLogin} onChange={(_, checked) => this.setLoginForm({ keepLogin: checked })} />}
|
||||
control={
|
||||
<Checkbox
|
||||
checked={loginForm.keepLogin}
|
||||
onChange={(_, checked) =>
|
||||
this.setLoginForm({ keepLogin: checked })
|
||||
}
|
||||
/>
|
||||
}
|
||||
label={t("keepLoginStatus")}
|
||||
/>
|
||||
<Button onClick={() => this.login()}>{t("submit")}</Button>
|
||||
|
|
@ -245,16 +279,12 @@ class App extends React.Component {
|
|||
onDeviceChange={(_device) => this.setDevice(_device)}
|
||||
/>
|
||||
<div className="language-select-container">
|
||||
<div>{t("language")}:</div>
|
||||
<div className="language-select-warpper">
|
||||
<img className="language-icon" src={languageImg} style={{ width: "18px" }} alt="" />
|
||||
<Select
|
||||
className="language-select"
|
||||
value={language}
|
||||
label={t("language")}
|
||||
sx={{
|
||||
background: "rgb(115, 158, 211)",
|
||||
width: "80%",
|
||||
color: "white",
|
||||
}}
|
||||
onChange={(e) => {
|
||||
let lang = e.target.value;
|
||||
this.setState({
|
||||
|
|
@ -262,11 +292,17 @@ class App extends React.Component {
|
|||
});
|
||||
i18n.changeLanguage(lang);
|
||||
localStorage.setItem("lang", lang);
|
||||
}}>
|
||||
<MenuItem value="en">English</MenuItem>
|
||||
<MenuItem value="zh">Chinese</MenuItem>
|
||||
}}
|
||||
>
|
||||
<MenuItem style={{ fontSize: "14px" }} value="en">
|
||||
English
|
||||
</MenuItem>
|
||||
<MenuItem style={{ fontSize: "14px" }} value="zh">
|
||||
简体中文
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
|
|
@ -276,11 +312,21 @@ class App extends React.Component {
|
|||
backgroundPositionX: "right",
|
||||
backgroundPositionY: "bottom",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
{mode === "normal" ? (
|
||||
<DeviceFrame htmlUrl={this.selectedProjectUrl} device={device} qrDataUrl={dataUrl} refreshQrCode={() => this.refreshQrCode()} />
|
||||
<DeviceFrame
|
||||
htmlUrl={this.selectedProjectUrl}
|
||||
device={device}
|
||||
qrDataUrl={dataUrl}
|
||||
refreshQrCode={() => this.refreshQrCode()}
|
||||
/>
|
||||
) : (
|
||||
<SettingFrame setting={selectedProject?.TextObjStr} settingValue={this.projectSettingValue} generate={(value) => this.UpdateSetting(value)} />
|
||||
<SettingFrame
|
||||
setting={selectedProject?.TextObjStr}
|
||||
settingValue={this.projectSettingValue}
|
||||
generate={(value) => this.UpdateSetting(value)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { Alert, Grid, List, ListItem, Snackbar } from "@mui/material";
|
|||
import { useEffect, useState } from "react";
|
||||
import "./index.css";
|
||||
import checkPng from "../../images/check.png";
|
||||
import generateButtonPng from "../../images/generate-button.png";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
var rows = ["TopText", "CentText", "MiddText"];
|
||||
|
|
@ -20,7 +19,8 @@ function SettingFrame(props) {
|
|||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<Snackbar
|
||||
open={openPopup}
|
||||
onClose={() => setOpenPopup(false)}
|
||||
|
|
@ -28,18 +28,28 @@ function SettingFrame(props) {
|
|||
anchorOrigin={{
|
||||
vertical: "top",
|
||||
horizontal: "right",
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<Alert severity="success" sx={{ width: "100%" }}>
|
||||
{t("saveSuccess")}
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
<List>
|
||||
<List style={{ width: "80%", margin: "auto" }}>
|
||||
{rows.map((rowKey, rowIndex) => (
|
||||
<ListItem key={rowIndex}>
|
||||
<span>{t(rowTitles[rowIndex])}</span>
|
||||
<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
|
||||
{(props.setting && props.setting[rowKey] ? Array.from(t(props.setting[rowKey]).split("|")) : [t("none"), t("none"), t("none")]).map((text, index) => (
|
||||
<Grid item xs={2} sm={4} md={4} key={index}>
|
||||
<span style={{ display: "inline-block", width: "40px" }}>
|
||||
{t(rowTitles[rowIndex])}
|
||||
</span>
|
||||
<Grid
|
||||
container
|
||||
spacing={{ xs: 2, md: 3 }}
|
||||
columns={{ xs: 4, sm: 8, md: 12 }}
|
||||
>
|
||||
{(props.setting && props.setting[rowKey]
|
||||
? Array.from(t(props.setting[rowKey]).split("|"))
|
||||
: [t("none"), t("none"), t("none")]
|
||||
).map((text, index) => (
|
||||
<Grid item xs={4} sm={4} md={4} key={index}>
|
||||
<div
|
||||
className="setting-card"
|
||||
style={{
|
||||
|
|
@ -55,7 +65,8 @@ function SettingFrame(props) {
|
|||
var newSetting = settingArr.slice();
|
||||
newSetting[rowIndex] = index + 1;
|
||||
setSettingArr(newSetting);
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
<img
|
||||
src={checkPng}
|
||||
|
|
@ -64,7 +75,8 @@ function SettingFrame(props) {
|
|||
position: "absolute",
|
||||
right: "10px",
|
||||
top: "10px",
|
||||
display: index + 1 === settingArr[rowIndex] ? "block" : "none",
|
||||
display:
|
||||
index + 1 === settingArr[rowIndex] ? "block" : "none",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -76,10 +88,12 @@ function SettingFrame(props) {
|
|||
</List>
|
||||
<div
|
||||
style={{
|
||||
width: "80%",
|
||||
alignItems: "center",
|
||||
cursor: "pointer",
|
||||
marginTop: "30px",
|
||||
}}>
|
||||
margin: "30px auto 0",
|
||||
}}
|
||||
>
|
||||
{props.setting && (
|
||||
<button
|
||||
className="generate-btn"
|
||||
|
|
@ -91,7 +105,8 @@ function SettingFrame(props) {
|
|||
});
|
||||
|
||||
setOpenPopup(true);
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
{t("generate")}
|
||||
</button>
|
||||
)}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Loading…
Reference in New Issue