Compare commits
No commits in common. "f0d66aff65ae33a9a2f49d1daf9ae436c2294071" and "8ffeb5209053efba68eed22cb6ce1132ea58d218" have entirely different histories.
f0d66aff65
...
8ffeb52090
File diff suppressed because it is too large
Load Diff
12
package.json
12
package.json
|
|
@ -2,23 +2,19 @@
|
|||
"name": "playable-preview",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"homepage": "/preview",
|
||||
"homepage": "/topwar",
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.10.4",
|
||||
"@emotion/styled": "^11.10.4",
|
||||
"@mui/material": "^5.10.3",
|
||||
"@emotion/react": "^11.7.1",
|
||||
"@emotion/styled": "^11.6.0",
|
||||
"@mui/material": "^5.2.5",
|
||||
"@testing-library/jest-dom": "^5.16.1",
|
||||
"@testing-library/react": "^12.1.2",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"ali-oss": "^6.17.1",
|
||||
"axios": "^0.24.0",
|
||||
"localstorage-slim": "^2.2.0",
|
||||
"qrcode": "^1.5.0",
|
||||
"query-string": "^7.1.1",
|
||||
"react": "^17.0.2",
|
||||
"react-copy-to-clipboard": "^5.0.4",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-modal-login": "^2.0.7",
|
||||
"react-scripts": "5.0.0",
|
||||
"web-vitals": "^2.1.2"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -38,11 +38,3 @@
|
|||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.MuiFormControlLabel-label {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.MuiDialog-root {
|
||||
background-color: white;
|
||||
}
|
||||
311
src/App.js
311
src/App.js
|
|
@ -1,289 +1,150 @@
|
|||
import "./App.css";
|
||||
import * as ProjectApi from "./apis/projectApi";
|
||||
import * as LoginApi from "./apis/loginApi";
|
||||
import * as utils from "./utils";
|
||||
import Pane from "./Components/pane";
|
||||
import DeviceFrame from "./Components/deviceFrame";
|
||||
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 Button from "@mui/material/Button";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import Dialog from "@mui/material/Dialog";
|
||||
import DialogActions from "@mui/material/DialogActions";
|
||||
import DialogContent from "@mui/material/DialogContent";
|
||||
import DialogTitle from "@mui/material/DialogTitle";
|
||||
import Checkbox from "@mui/material/Checkbox";
|
||||
import FormControlLabel from "@mui/material/FormControlLabel";
|
||||
import queryString from "query-string";
|
||||
import './App.css';
|
||||
import Pane from './Components/pane';
|
||||
import DeviceFrame from './Components/deviceFrame';
|
||||
import waterMarkPng from './images/water-mark.png'
|
||||
import React from 'react';
|
||||
import SettingFrame from './Components/settingsFrame';
|
||||
import QrCode from 'qrcode'
|
||||
import { BaseUrl } from './constants';
|
||||
|
||||
var project = "topwar";
|
||||
class App extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
mode: "normal",
|
||||
mode: 'normal',
|
||||
projects: [],
|
||||
selectedProject: {},
|
||||
selectedProjectName: "",
|
||||
device: "android-h",
|
||||
htmlUrl: "",
|
||||
dataUrl: "",
|
||||
loading: false,
|
||||
loginOpen: false,
|
||||
loginErrorMessage: "",
|
||||
hideLogo: false,
|
||||
loginForm: {
|
||||
account: "",
|
||||
password: "",
|
||||
keepLogin: false,
|
||||
},
|
||||
};
|
||||
device: 'android-h',
|
||||
htmlUrl: '',
|
||||
dataUrl: '',
|
||||
loading: false
|
||||
}
|
||||
}
|
||||
componentDidMount() {
|
||||
const loginInfo = getLoginInfo();
|
||||
var tenant = utils.getTenant();
|
||||
const hideLogo = queryString.parseUrl(window.location.href)?.query
|
||||
?.hideLogo;
|
||||
this.setState({ hideLogo: !!hideLogo });
|
||||
if (loginInfo && loginInfo.permissionPages.includes(tenant)) {
|
||||
this.fetchData();
|
||||
this.refreshQrCode();
|
||||
} else {
|
||||
this.setState({ loginOpen: true });
|
||||
loginInfo &&
|
||||
this.setState({ loginErrorMessage: "无权限访问，请切换账号" });
|
||||
this.refreshQrCode()
|
||||
}
|
||||
}
|
||||
|
||||
login = async () => {
|
||||
var { account, password, keepLogin } = this.state.loginForm;
|
||||
var user = await LoginApi.UserLogin({ account, password });
|
||||
var tenant = utils.getTenant();
|
||||
|
||||
if (user && user.permissionPages.includes(tenant)) {
|
||||
this.setState({
|
||||
loginOpen: false,
|
||||
});
|
||||
if (keepLogin) {
|
||||
setLoginInfo(user);
|
||||
}
|
||||
this.fetchData();
|
||||
this.refreshQrCode();
|
||||
} else {
|
||||
this.setState({
|
||||
loginErrorMessage: user
|
||||
? `无权限访问${tenant}，请切换账号`
|
||||
: "账号或密码错误",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
refreshQrCode() {
|
||||
var {selectedProject} = this.state;
|
||||
selectedProject.HtmlUrl &&
|
||||
QrCode.toDataURL([{ data: this.selectedProjectUrl, mode: "byte" }], {
|
||||
width: 120,
|
||||
}).then((dataUrl) => {
|
||||
var rawUrl = encodeURI(!selectedProject?.HtmlUrl?.startsWith("http") ? BaseUrl + selectedProject.HtmlUrl : selectedProject.HtmlUrl)
|
||||
selectedProject.HtmlUrl && QrCode.toDataURL([{ data: rawUrl, mode: 'byte'}], { width: 120 })
|
||||
.then((dataUrl) => {
|
||||
this.setState({
|
||||
dataUrl: dataUrl,
|
||||
});
|
||||
});
|
||||
dataUrl: dataUrl
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
get selectedProjectUrl() {
|
||||
var { selectedProject } = this.state;
|
||||
var settingValue = getProjectSettingValue(selectedProject?.Name) || [
|
||||
1, 1, 1,
|
||||
];
|
||||
var rawUrl = selectedProject?.HtmlUrl
|
||||
? encodeURI(selectedProject?.HtmlUrl)
|
||||
: "";
|
||||
if (rawUrl) {
|
||||
rawUrl += `?datanumber=${settingValue[0]}&datanumber1=${settingValue[1]}&datanumber2=${settingValue[2]}&lunaOrHtml=false`;
|
||||
}
|
||||
|
||||
return rawUrl;
|
||||
}
|
||||
|
||||
async setSelectedProject(selectedProjectName) {
|
||||
setSelectedProject(selected) {
|
||||
this.setState({
|
||||
selectedProjectName: selectedProjectName,
|
||||
});
|
||||
console.log("selected:", selectedProjectName);
|
||||
await this.updateSelectedProject(selectedProjectName);
|
||||
}
|
||||
|
||||
async updateSelectedProject(projectName) {
|
||||
var projectSetting = await ProjectApi.getProjectSetting(projectName);
|
||||
this.setState({
|
||||
selectedProject: projectSetting,
|
||||
selectedProject: selected
|
||||
});
|
||||
}
|
||||
|
||||
setDevice(selected) {
|
||||
this.setState({
|
||||
device: selected,
|
||||
device: selected
|
||||
});
|
||||
}
|
||||
|
||||
setMode(mode) {
|
||||
this.setState({
|
||||
mode: mode,
|
||||
});
|
||||
}
|
||||
|
||||
setLoginForm(form) {
|
||||
this.setState({
|
||||
loginForm: {
|
||||
...this.state.loginForm,
|
||||
...form,
|
||||
},
|
||||
mode: mode
|
||||
});
|
||||
}
|
||||
|
||||
async fetchData() {
|
||||
this.setState({
|
||||
loading: true,
|
||||
});
|
||||
loading: true
|
||||
})
|
||||
|
||||
var projectNames = (await this.fetchProjects()) || ["无项目"];
|
||||
var projects = await this.fetchProjects();
|
||||
this.setState({
|
||||
projects: projectNames,
|
||||
selectedProjectName: projectNames[0],
|
||||
loading: false,
|
||||
projects,
|
||||
selectedProject: projects[0],
|
||||
loading: false
|
||||
});
|
||||
await this.updateSelectedProject(projectNames[0]);
|
||||
this.refreshQrCode();
|
||||
this.refreshQrCode()
|
||||
}
|
||||
|
||||
async fetchProjects() {
|
||||
return await ProjectApi.getProjects();
|
||||
var url = project
|
||||
? `${BaseUrl}home/GetServerProjectJsonData?project=${project}`
|
||||
: `${BaseUrl}home/GetServerJsonData`;
|
||||
var response = await fetch(url, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
});
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
get projectSettingValue() {
|
||||
return getProjectSettingValue(this.state.selectedProjectName);
|
||||
async refreshProject() {
|
||||
var { selectedProject } = this.state;
|
||||
var projects = await this.fetchProjects();
|
||||
if (selectedProject) {
|
||||
var updatedSelectedProject = projects.find(p => p.HtmlUrl === selectedProject.HtmlUrl)
|
||||
console.log(updatedSelectedProject);
|
||||
if (updatedSelectedProject) {
|
||||
this.setState({
|
||||
selectedProject: updatedSelectedProject
|
||||
})
|
||||
}
|
||||
}
|
||||
this.setState({
|
||||
projects,
|
||||
})
|
||||
}
|
||||
|
||||
UpdateSetting(obj) {
|
||||
setProjectSetting(this.state.selectedProject.Name, [
|
||||
+obj.topType,
|
||||
+obj.centreType,
|
||||
+obj.middleType,
|
||||
]);
|
||||
var body = {
|
||||
...obj,
|
||||
fileName: this.state.selectedProject.Name,
|
||||
};
|
||||
var query = Object.keys(body).map(k => `${k}=${body[k]}`).join('&')
|
||||
fetch(`${BaseUrl}home/UpdateFileContentNew?${query}`)
|
||||
.then(() => this.refreshProject())
|
||||
.catch(e => console.log('update fails', e));
|
||||
}
|
||||
|
||||
render() {
|
||||
var {
|
||||
mode,
|
||||
device,
|
||||
projects,
|
||||
selectedProject,
|
||||
dataUrl,
|
||||
loading,
|
||||
loginOpen,
|
||||
loginForm,
|
||||
hideLogo,
|
||||
} = this.state;
|
||||
var { mode, device, projects, selectedProject, dataUrl, loading } = this.state;
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<Dialog open={loginOpen}>
|
||||
<DialogTitle>登录</DialogTitle>
|
||||
<DialogContent>
|
||||
<TextField
|
||||
autoFocus
|
||||
margin="dense"
|
||||
id="name"
|
||||
label="账号"
|
||||
fullWidth
|
||||
value={loginForm.account}
|
||||
variant="standard"
|
||||
onChange={(e) => this.setLoginForm({ account: e.target.value })}
|
||||
onKeyDown={(e) => e.keyCode === 13 && this.login()}
|
||||
/>
|
||||
<TextField
|
||||
autoFocus
|
||||
margin="dense"
|
||||
id="name"
|
||||
label="密码"
|
||||
type={"password"}
|
||||
fullWidth
|
||||
value={loginForm.password}
|
||||
variant="standard"
|
||||
onChange={(e) => this.setLoginForm({ password: e.target.value })}
|
||||
onKeyDown={(e) => e.keyCode === 13 && this.login()}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
{this.state.loginErrorMessage && (
|
||||
<span
|
||||
style={{
|
||||
color: "red",
|
||||
fontSize: "12px",
|
||||
margin: "0 auto 0 10px",
|
||||
}}
|
||||
>
|
||||
{this.state.loginErrorMessage}
|
||||
</span>
|
||||
)}
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={loginForm.keepLogin}
|
||||
onChange={(_, checked) =>
|
||||
this.setLoginForm({ keepLogin: checked })
|
||||
}
|
||||
/>
|
||||
}
|
||||
label="保持登录状态7天"
|
||||
/>
|
||||
<Button onClick={() => this.login()}>提交</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
<Pane
|
||||
mode={mode}
|
||||
onModeChange={(_mode) => this.setMode(_mode) }
|
||||
projects={projects}
|
||||
device={device}
|
||||
loading={loading}
|
||||
hideLogo={hideLogo}
|
||||
onProjectSelect={(project) => {
|
||||
this.setSelectedProject(project);
|
||||
this.setSelectedProject(project)
|
||||
}}
|
||||
onDeviceChange={(_device) => this.setDevice(_device)}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
onDeviceChange={(_device) => this.setDevice(_device)}/>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
backgroundImage: hideLogo ? "" : `url(${waterMarkPng})`,
|
||||
backgroundPositionX: "right",
|
||||
backgroundPositionY: "bottom",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}
|
||||
>
|
||||
{mode === "normal" ? (
|
||||
<DeviceFrame
|
||||
htmlUrl={this.selectedProjectUrl}
|
||||
alignItems: 'center',
|
||||
backgroundImage: `url('${waterMarkPng}')`,
|
||||
backgroundPositionX: 'right',
|
||||
backgroundPositionY: 'bottom',
|
||||
backgroundRepeat: 'no-repeat'
|
||||
}}>
|
||||
{
|
||||
mode === "normal"
|
||||
? <DeviceFrame
|
||||
htmlUrl={selectedProject.HtmlUrl}
|
||||
device={device}
|
||||
qrDataUrl={dataUrl}
|
||||
refreshQrCode={() => this.refreshQrCode()}
|
||||
/>
|
||||
) : (
|
||||
<SettingFrame
|
||||
setting={selectedProject?.TextObjStr}
|
||||
settingValue={this.projectSettingValue}
|
||||
generate={(value) => this.UpdateSetting(value)}
|
||||
/>
|
||||
)}
|
||||
refreshQrCode={() => this.refreshQrCode()}/>
|
||||
: <SettingFrame
|
||||
setting={selectedProject.TextObjStr}
|
||||
settingValue={selectedProject.OldSlectType ? selectedProject.OldSlectType.split('|').map(v => +v) : [1, 1, 1]}
|
||||
generate={(value) => this.UpdateSetting(value)}/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -102,9 +102,8 @@ function DeviceFrame(props) {
|
|||
transform: 'translate(-50%, -50%)',
|
||||
paddingBottom: config.offsetv
|
||||
}}
|
||||
allow="clipboard-read; clipboard-write *"
|
||||
title='preview'
|
||||
src={absoluteUrl + '&cacheKey=' + cacheKey}
|
||||
src={absoluteUrl + '?cacheKey=' + cacheKey}
|
||||
width={config.width}
|
||||
height={config.height}
|
||||
frameBorder={'0'}/>
|
||||
|
|
|
|||
|
|
@ -1,64 +1,65 @@
|
|||
import "./index.css";
|
||||
import Select from "@mui/material/Select";
|
||||
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 iphonePng from "../../images/iphone.png";
|
||||
import androidPng from "../../images/android.png";
|
||||
import logoPanePng from "../../images/logo-pane.png";
|
||||
import horizentalChecked from "../../images/horizental-button-checked.png";
|
||||
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 './index.css';
|
||||
import Select from '@mui/material/Select';
|
||||
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 iphonePng from '../../images/iphone.png'
|
||||
import androidPng from '../../images/android.png'
|
||||
import logoPanePng from '../../images/logo-pane.png'
|
||||
import horizentalChecked from '../../images/horizental-button-checked.png'
|
||||
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'
|
||||
|
||||
var deviceConfigs = [
|
||||
{
|
||||
name: "iPhone",
|
||||
name: 'iPhone',
|
||||
icon: iphonePng,
|
||||
vertical: "iphone-v",
|
||||
horizental: "iphone-h",
|
||||
vertical: 'iphone-v',
|
||||
horizental: 'iphone-h'
|
||||
},
|
||||
{
|
||||
name: "Android Phone",
|
||||
name: 'Android Phone',
|
||||
icon: androidPng,
|
||||
vertical: "android-v",
|
||||
horizental: "android-h",
|
||||
vertical: 'android-v',
|
||||
horizental: 'android-h'
|
||||
},
|
||||
{
|
||||
name: "iPad",
|
||||
name: 'iPad',
|
||||
icon: ipadPng,
|
||||
vertical: "ipad-v",
|
||||
horizental: "ipad-h",
|
||||
vertical: 'ipad-v',
|
||||
horizental: 'ipad-h'
|
||||
},
|
||||
];
|
||||
|
||||
function Pane(props) {
|
||||
var [mode, setMode] = useState(props.mode);
|
||||
var [device, setDevice] = useState(props.device);
|
||||
var [project, setProject] = useState(props.project);
|
||||
var [device, setDevice] = useState(props.device)
|
||||
var [project, setProject] = useState(props.project)
|
||||
|
||||
var modeChange = (e) => {
|
||||
var _mode = e.target.value;
|
||||
setMode(_mode);
|
||||
props.onModeChange(e.target.value);
|
||||
props.onModeChange(e.target.value)
|
||||
};
|
||||
|
||||
var deviceChange = (_device) => {
|
||||
setDevice(_device);
|
||||
props.onDeviceChange(_device);
|
||||
props.onDeviceChange(_device)
|
||||
};
|
||||
|
||||
var projectSelect = (e) => {
|
||||
var projectName = e.target.value;
|
||||
setProject(projectName);
|
||||
props.onProjectSelect(projectName);
|
||||
};
|
||||
var projectName = e.target.value
|
||||
setProject(projectName)
|
||||
var projectObj = props.projects.find((p) => p.Name === projectName)
|
||||
props.onProjectSelect(projectObj)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
props.projects.length && !project && setProject(props.projects[0]);
|
||||
}, [props.projects]);
|
||||
props.projects.length && !project && setProject(props.projects[0].Name);
|
||||
}, [props.projects])
|
||||
|
||||
return (
|
||||
<div className="Pane">
|
||||
|
|
@ -66,105 +67,76 @@ function Pane(props) {
|
|||
id="mode-select"
|
||||
value={mode}
|
||||
onChange={(e) => modeChange(e)}
|
||||
startAdornment={
|
||||
<img src={modeSelectPng} height={"30px"} alt="selected" />
|
||||
}
|
||||
startAdornment={<img src={modeSelectPng} height={'30px'} alt='selected'/>}
|
||||
sx={{
|
||||
width: "100%",
|
||||
border: "none",
|
||||
background: "rgb(69, 115, 191)",
|
||||
color: "white",
|
||||
fontWeight: "bold",
|
||||
width: '100%',
|
||||
border: 'none',
|
||||
background: 'rgb(69, 115, 191)',
|
||||
color: 'white',
|
||||
fontWeight: 'bold'
|
||||
}}
|
||||
MenuProps={{
|
||||
classes: {
|
||||
paper: "selectPager",
|
||||
},
|
||||
paper: 'selectPager'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<MenuItem value={"normal"}>Normal Preview</MenuItem>
|
||||
<MenuItem value={"dynamic"}>Dynamic Preview</MenuItem>
|
||||
<MenuItem value={'normal'}>Normal Preview</MenuItem>
|
||||
<MenuItem value={'dynamic'}>Dynamic Preview</MenuItem>
|
||||
</Select>
|
||||
<List>
|
||||
{deviceConfigs.map((_device) => (
|
||||
{
|
||||
deviceConfigs.map(_device =>
|
||||
<ListItem
|
||||
key={_device.name}
|
||||
sx={{
|
||||
display: "flex",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<div style={{ width: "120px", alignItems: "center" }}>
|
||||
<img
|
||||
className="deviceIcon"
|
||||
src={_device.icon}
|
||||
alt={_device.name}
|
||||
/>
|
||||
display: 'flex',
|
||||
textAlign: 'center'
|
||||
}}>
|
||||
<div style={{ width: '120px', alignItems: 'center' }}>
|
||||
<img className='deviceIcon' src={_device.icon} alt={_device.name}/>
|
||||
</div>
|
||||
<div className="deviceContent">
|
||||
<div className='deviceContent'>
|
||||
<p style={{ margin: "14px 0"}}>{_device.name}</p>
|
||||
<div className="deviceButtons">
|
||||
<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 className='deviceButtons'>
|
||||
<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>
|
||||
))}
|
||||
</ListItem>)
|
||||
}
|
||||
</List>
|
||||
<div
|
||||
style={{
|
||||
marginTop: "50px",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
{props.loading ? (
|
||||
<CircularProgress color="inherit" />
|
||||
) : (
|
||||
project && (
|
||||
<Select
|
||||
<div style={{
|
||||
marginTop: '50px',
|
||||
color: 'white'
|
||||
}}>
|
||||
{
|
||||
props.loading
|
||||
?
|
||||
<CircularProgress color='inherit'/>
|
||||
:
|
||||
project && <Select
|
||||
id="project-select"
|
||||
value={project}
|
||||
onChange={(e) => projectSelect(e)}
|
||||
placeholder="选择项目"
|
||||
placeholder='选择项目'
|
||||
sx={{
|
||||
background: "rgb(115, 158, 211)",
|
||||
width: "80%",
|
||||
color: "white",
|
||||
background: 'rgb(115, 158, 211)',
|
||||
width: '80%',
|
||||
color: 'white'
|
||||
}}
|
||||
>
|
||||
{props.projects.map((pName, i) => (
|
||||
<MenuItem key={i} value={pName}>
|
||||
{pName}
|
||||
</MenuItem>
|
||||
))}
|
||||
{
|
||||
props.projects.map((p, i) => <MenuItem key={i} value={p.Name}>{p.Name}</MenuItem>)
|
||||
}
|
||||
</Select>
|
||||
)
|
||||
)}
|
||||
}
|
||||
</div>
|
||||
{!props.hideLogo && (
|
||||
<img
|
||||
src={logoPanePng}
|
||||
alt="logo"
|
||||
width={"100%"}
|
||||
className="bottomLogo"
|
||||
/>
|
||||
)}
|
||||
<img src={logoPanePng} alt='logo' width={'100%'} className='bottomLogo'/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ var rowTitles = ['开头', '中间', '结尾']
|
|||
function SettingFrame(props) {
|
||||
var [settingArr, setSettingArr] = useState([1, 2, 3])
|
||||
var [openPopup, setOpenPopup] = useState(false);
|
||||
console.log(props.settingValue)
|
||||
useEffect(() => {
|
||||
setSettingArr(props.settingValue)
|
||||
}, [props.settingValue])
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
var BaseUrl = "http://api.soyootech.com/";
|
||||
export async function UserLogin(loginForm) {
|
||||
try {
|
||||
var response = await fetch(BaseUrl + "SoyooUser/previewlogin", {
|
||||
body: JSON.stringify({
|
||||
account: loginForm.account,
|
||||
password: loginForm.password,
|
||||
}),
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
method: "POST",
|
||||
});
|
||||
var result = await response.json();
|
||||
result.permissionPages = result.permissionPages.map((permission) =>
|
||||
permission.toLowerCase()
|
||||
);
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
import aliOss from "ali-oss"
|
||||
import * as utils from "../utils"
|
||||
|
||||
var client = new aliOss({
|
||||
region: 'oss-cn-shanghai',
|
||||
// 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
|
||||
accessKeyId: 'LTAI5t7sVPM6mQwEubZ1Hw36',
|
||||
accessKeySecret: 'g0rZC9rTUvQw2jyNe8ibrFtIioOwST',
|
||||
// 填写Bucket名称。
|
||||
bucket: 'web-preview',
|
||||
});
|
||||
|
||||
const baseBucketUrl = `http://web-preview.soyootech.com/`
|
||||
|
||||
function getTenantPrefix () {
|
||||
var tenant = utils.getTenant()
|
||||
return tenant === "funplus" ? "" : `_${tenant}/`
|
||||
}
|
||||
|
||||
// see more in https://www.npmjs.com/package/ali-oss#listquery-options
|
||||
export async function getProjects() {
|
||||
var prefix = getTenantPrefix()
|
||||
if (!prefix) {
|
||||
return client.list({ delimiter: "/"})
|
||||
.then(result =>
|
||||
result.prefixes.filter(item => !item.startsWith("_"))
|
||||
.map(item => item.slice(0, item.length - 1))
|
||||
)
|
||||
} else {
|
||||
return client.list({ prefix: prefix, delimiter: '/' })
|
||||
.then(result =>
|
||||
result.prefixes?.map(item => item.slice(prefix.length, item.length - 1)))
|
||||
.catch(() => []);
|
||||
}
|
||||
}
|
||||
|
||||
export async function getProjectSetting(projectName) {
|
||||
return fetch(`${baseBucketUrl}${getTenantPrefix()}${projectName}/project.json?time=${new Date().getTime()}`).then(response => {
|
||||
return response.body;
|
||||
}).then(stream => {
|
||||
return new Response(stream, { headers: { "Content-Type": "text/plain" } }).text();
|
||||
})
|
||||
.then(result => {
|
||||
return JSON.parse(result);
|
||||
});;
|
||||
}
|
||||
|
|
@ -1,2 +1 @@
|
|||
export var BaseUrl = "http://123.56.161.61:1157/";
|
||||
// export var BaseUrl = "https://localhost:44380/";
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import ls from "localstorage-slim";
|
||||
import * as Utils from "./utils";
|
||||
|
||||
const settingPrefix = "ps_";
|
||||
|
||||
export const setProjectSetting = (projectName, settingValueArr) => {
|
||||
var tenant = Utils.getTenant();
|
||||
ls.set(settingPrefix + tenant + "_" + projectName, settingValueArr, {
|
||||
ttl: 3600 * 24 * 90,
|
||||
});
|
||||
};
|
||||
|
||||
export const getProjectSettingValue = (projectName) => {
|
||||
var tenant = Utils.getTenant();
|
||||
return ls.get(settingPrefix + tenant + "_" + projectName) || [1, 1, 1];
|
||||
};
|
||||
|
||||
export const setLoginInfo = (loginInfo) => {
|
||||
ls.set("loginInfo", loginInfo, { ttl: 3600 * 24 * 7 });
|
||||
};
|
||||
|
||||
export const getLoginInfo = () => {
|
||||
return ls.get("loginInfo");
|
||||
};
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import queryString from "query-string";
|
||||
|
||||
export function getTenant() {
|
||||
const tenant = queryString.parseUrl(window.location.href)?.query?.tenant;
|
||||
return tenant?.toLowerCase() || "funplus";
|
||||
}
|
||||
Loading…
Reference in New Issue