add setting page

src/App.js

@@ -3,6 +3,7 @@ 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';
 
 class App extends React.Component {
   constructor() {
@@ -49,6 +50,22 @@ class App extends React.Component {
       })));
   }
 
+  UpdateSetting(obj) {
+    var body = {
+      ...obj,
+      Name: this.state.selectedProject.Name,
+    };
+    var query = Object.keys(body).map(k => `${k}=${body[k]}`).join('&')
+    fetch(`http://123.56.161.61:1157/home/UpdateFileContentNew`, {
+      method: 'POST',
+      body: JSON.stringify(body)
+    })
+    .then(() =>
+      console.log('update success')
+    )
+    .catch(e => console.log('update fails', e));
+  }
+
   render() {
     var { mode, device, projects, selectedProject } = this.state;
 
@@ -77,7 +94,10 @@ class App extends React.Component {
           ? <DeviceFrame
               htmlUrl={selectedProject.HtmlUrl}
               device={device}/>
-          : <div>setting content</div>
+          : <SettingFrame
+              setting={selectedProject.TextObjStr}
+              settingValue={selectedProject.OldSlectType ? selectedProject.OldSlectType.split('|').map(v => +v) : [1, 1, 1]}
+              generate={(value) => this.UpdateSetting(value)}/>
         }
         </div>
       </div>

src/Components/settingsFrame/index.js

@@ -0,0 +1,81 @@
+import { Grid, List, ListItem } from '@mui/material';
+import { useEffect, useState } from 'react'
+import './index.css'
+import settingCardPng from '../../images/setting-card.png';
+import checkPng from '../../images/check.png';
+import generateButtonPng from '../../images/generate-button.png';
+
+var rows = ['TopText',  'CentText', 'MiddText']
+var rowTitles = ['开头', '中间', '结尾']
+function SettingFrame(props) {
+    var [settingArr, setSettingArr] = useState([1, 2, 3])
+    useEffect(() => {
+      setSettingArr(props.settingValue)
+    }, [props.settingValue])
+
+    return (
+        <div style={{
+            flex: 1
+        }}>
+          <List>
+            {
+              rows.map((rowKey, rowIndex) => (
+                <ListItem key={rowIndex}>
+                  <span>{rowTitles[rowIndex]}</span>
+                  <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
+                      {props.setting && props.setting[rowKey] && Array.from(props.setting[rowKey].split('|')).map((text, index) => (
+                        <Grid item xs={2} sm={4} md={4} key={index}>
+                            <div style={{
+                              backgroundImage: `url('${settingCardPng}')`,
+                              position: 'relative',
+                              backgroundRepeat: 'no-repeat',
+                              backgroundSize: '100% 100%',
+                              height: '120px',
+                              textAlign: 'center',
+                              justifyContent: 'center',
+                              display: 'flex',
+                              alignItems: 'center',
+                              cursor: 'pointer'
+                            }}
+                              onClick={() => {
+                                var newSetting = settingArr.slice()
+                                newSetting[rowIndex] = index + 1;
+                                setSettingArr(newSetting);
+                              }}>
+                              {text}
+                              <img src={checkPng} alt='check' style={{
+                                position: 'absolute',
+                                right: '10px',
+                                top: '10px',
+                                display: (index + 1) === settingArr[rowIndex] ? 'block' : 'none'
+                              }}/>
+                            </div>
+                        </Grid>
+                      ))}
+                  </Grid>
+                </ListItem>
+              ))
+            }
+          </List>
+          <div style={{
+                  alignItems: 'center',
+                  cursor: 'pointer',
+                  marginTop: '30px'
+                }}>
+              <img
+                src={generateButtonPng}
+                alt='generate'
+                style={{
+                  cursor: 'pointer'
+                }}
+                onClick={() => props.generate({
+                  topType: settingArr[0]+'',
+                  centreType: settingArr[1]+'',
+                  middleType: settingArr[2]+''
+                })}/>
+            </div>
+        </div>
+    )
+}
+
+export default SettingFrame;