💩 SingleCollocation

src/app/locales/zh-CN.json

@@ -252,7 +252,14 @@
  "types": {
  "0": "只有中间有柱子",
  "1": "一端和中间有柱子",
- "2": "两端金额中间有柱子"
- }
+ "2": "两端和中间有柱子"
+ },
+ "collocationShow": {
+ "0": "柱子长度",
+ "1": "柱子个数",
+ "2": "间隔长度",
+ "3": "间隔个数"
+ },
+ "distance": "间隔"
  }
 }

src/app/setting/option/Module.tsx

@@ -0,0 +1,35 @@
+"use client";
+import {
+ Paper,
+ Grid
+} from "@mui/material";
+import {
+ sidebarMode
+} from "../../layout/layoutClient";
+import {
+ ReactNode,
+ useContext
+} from "react";
+export default function Module(props: {
+ children: ReactNode;
+ mode: sidebarMode;
+}) {
+ const mode = useContext(sidebarMode),
+ isThis = props.mode === mode.value;
+ return (
+ <Grid item>
+ <Paper onClick={event => {
+ mode.set(props.mode);
+ }} sx={{
+ p: 3,
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ boxShadow: theme => isThis ? `inset 0 0 0 3px ${theme.palette.primary[theme.palette.mode]}` : "",
+ borderColor: theme => isThis ? theme.palette.primary[theme.palette.mode] : ""
+ }}>
+ {props.children}
+ </Paper>
+ </Grid>
+ );
+}

src/app/setting/option/page.tsx

@@ -7,7 +7,6 @@ import {
  Button,
  ButtonGroup,
  Typography,
- Paper,
  Box,
  Grid,
  Theme
@@ -22,15 +21,13 @@ import {
  colorMode,
  forkMeOnGitHub,
  lang as langContext,
- locales,
- sidebarMode
+ locales
 } from "../../layout/layoutClient";
 import {
  get
 } from "react-intl-universal";
 import {
  Context,
- ReactNode,
  useContext,
  useState
 } from "react";
@@ -41,29 +38,7 @@ import dynamic from 'next/dynamic';
 import {
  useRouter
 } from "next/navigation";
-function Module(props: {
- children: ReactNode;
- mode: sidebarMode;
-}) {
- const mode = useContext(sidebarMode),
- isThis = props.mode === mode.value;
- return (
- <Grid item>
- <Paper onClick={event => {
- mode.set(props.mode);
- }} sx={{
- p: 3,
- display: "flex",
- flexDirection: "column",
- alignItems: "center",
- boxShadow: theme => isThis ? `inset 0 0 0 3px ${theme.palette.primary[theme.palette.mode]}` : "",
- borderColor: theme => isThis ? theme.palette.primary[theme.palette.mode] : ""
- }}>
- {props.children}
- </Paper>
- </Grid>
- );
-}
+import Module from "./Module";
 const PureDialog = dynamic(() => import("../../components/dialog/PureDialog")),
  ghURL = "https://github.com/neila-a/verkfi/";
 export type option = [Context<any>, string];

src/app/setting/theme/defaults.tsx

@@ -0,0 +1,6 @@
+"use client";
+const defaults = {
+ primary: '#2196f3',
+ secondary: '#f50057',
+};
+export default defaults;

src/app/setting/theme/hues.tsx

@@ -0,0 +1,20 @@
+"use client";
+const hues = [
+ 'red',
+ 'pink',
+ 'purple',
+ 'deepPurple',
+ 'indigo',
+ 'blue',
+ 'lightBlue',
+ 'cyan',
+ 'teal',
+ 'green',
+ 'lightGreen',
+ 'lime',
+ 'yellow',
+ 'amber',
+ 'orange',
+ 'deepOrange'
+];
+export default hues;

src/app/setting/theme/page.tsx

@@ -8,9 +8,6 @@ import * as colors from '@mui/material/colors';
 import {
  Check as CheckIcon
 } from '@mui/icons-material';
-import {
- capitalize
-} from '@mui/material/utils';
 import {
  get
 } from "react-intl-universal";
@@ -28,50 +25,14 @@ import {
  Radio,
  Tooltip,
  Typography,
- Slider,
- InputLabel
+ Slider
 } from '@mui/material';
 import {
  Switcher
 } from '../Switcher';
-const defaults = {
- primary: '#2196f3',
- secondary: '#f50057',
-};
-const hues = [
- 'red',
- 'pink',
- 'purple',
- 'deepPurple',
- 'indigo',
- 'blue',
- 'lightBlue',
- 'cyan',
- 'teal',
- 'green',
- 'lightGreen',
- 'lime',
- 'yellow',
- 'amber',
- 'orange',
- 'deepOrange'
-];
-const shades = [
- 900,
- 800,
- 700,
- 600,
- 500,
- 400,
- 300,
- 200,
- 100,
- 50,
- 'A700',
- 'A400',
- 'A200',
- 'A100',
-];
+import defaults from './defaults';
+import hues from './hues';
+import shades from './shades';
 function ColorTool() {
  const palette = React.useContext(paletteColors);
  const theme = useTheme();
@@ -98,33 +59,6 @@ function ColorTool() {
  palette.set(JSON.stringify(paletteColors));
  return now;
  }, JSON.parse(value));
- const handleChangeColor = (name) => (event) => {
- const isRgb = (string) =>
- /rgb\([0-9]{1,3}\s*,\s*[0-9]{1,3}\s*,\s*[0-9]{1,3}\)/i.test(string);
- const isHex = (string) => /^#?([0-9a-f]{3})$|^#?([0-9a-f]){6}$/i.test(string);
- let {
- target: { value: color },
- } = event;
- setState((prevState) => ({
- ...prevState,
- [`${name}Input`]: color,
- }));
- let isValidColor = false;
- if (isRgb(color)) {
- isValidColor = true;
- } else if (isHex(color)) {
- isValidColor = true;
- if (color.indexOf('#') === -1) {
- color = `#${color}`;
- }
- }
- if (isValidColor) {
- setState((prevState) => ({
- ...prevState,
- [name]: color,
- }));
- }
- };
  const handleChangeHue = (name) => (event) => {
  const hue = event.target.value;
  const color = colors[hue][shades[state[`${name}Shade`]]];
@@ -288,7 +222,7 @@ function ColorTool() {
  <ColorPicker intent="primary" />
  <ColorPicker intent="secondary" />
  </Grid>
- <Button fullWidth variant="contained" onClick={event => {
+ <Button fullWidth variant="contained" onClick={() => {
  palette.set("__none__");
  setState(JSON.parse(defaultState));
  }}>

src/app/setting/theme/shades.tsx

@@ -0,0 +1,18 @@
+"use client";
+const shades = [
+ 900,
+ 800,
+ 700,
+ 600,
+ 500,
+ 400,
+ 300,
+ 200,
+ 100,
+ 50,
+ 'A700',
+ 'A400',
+ 'A200',
+ 'A100',
+];
+export default shades;

src/app/tools/pillar/SingleCollocation.tsx

@@ -0,0 +1,32 @@
+"use client";
+import {
+ Paper,
+ Typography
+} from "@mui/material";
+import {
+ useState
+} from "react";
+import {
+ get
+} from "react-intl-universal";
+import {
+ collocation
+} from "./page";
+export default function SingleCollocation(props: {
+ collocation: collocation;
+}) {
+ const [elevation, setElevation] = useState<number>(2);
+ return (
+ <Paper sx={{
+ p: 2
+ }} elevation={elevation} onMouseEnter={event => {
+ setElevation(8);
+ }} onMouseLeave={event => {
+ setElevation(2); // reset to default
+ }}>
+ {props.collocation.map((value, index) => <Typography sx={{
+ mb: index === 1 ? 1 : ""
+ }} key={index}>{get(`pillar.collocationShow.${index}`)}: {value}</Typography>)}
+ </Paper>
+ );
+}

src/app/tools/pillar/page.tsx

@@ -1,36 +1,84 @@
 "use client";
 import {
+ Box,
  FormControl,
  FormControlLabel,
  FormGroup,
  FormLabel,
  Radio,
  RadioGroup,
- TextField
+ TextField,
+ Typography
 } from "@mui/material";
 import {
+ useMemo,
  useState
 } from "react";
 import {
  get
 } from "react-intl-universal";
+import SingleCollocation from "./SingleCollocation";
+type type = 0 | 1 | 2;
+/**
+ * 0：间隔 
+ * 1：柱子
+ */
+const examples: (0 | 1)[][] = [[0, 1, 0], [1, 0, 1, 0], [1, 0, 1]];
+/**
+ * 0：柱子长度
+ * 1：柱子个数
+ * 2：间隔长度
+ * 3：间隔个数
+ */
+export type collocation = [number, number, number, number];
 export default function Pillar(): JSX.Element {
- const [type, setType] = useState<0 | 1 | 2>(2);
+ const [type, setType] = useState<type>(2),
+ [length, setLength] = useState<number>(0),
+ pillars = useMemo<collocation[]>(() => [[1, 1, 1, 1]], [type, length]);
  return (
  <>
  <FormGroup>
  <FormControl sx={{
  mb: "9px"
  }}>
- <TextField label={get("pillar.length")} variant="outlined" type="number" />
+ <TextField
+ value={length}
+ onChange={event => setLength(Number(event.target.value))}
+ label={get("pillar.length")}
+ variant="outlined"
+ type="number"
+ />
  </FormControl>
  <FormControl>
  <FormLabel id="chooses-label">{get("pillar.position")}</FormLabel>
- <RadioGroup aria-labelledby="chooses-label" defaultValue={0} name="chooses-group">
- {[0, 1, 2].map((single) => <FormControlLabel value={single} key={single} control={<Radio />} label={get(`pillar.types.${single}`)} />)}
+ <RadioGroup aria-labelledby="chooses-label" value={type} onChange={(event, value) => setType(Number(value) as type)} name="chooses-group">
+ {[0, 1, 2].map((single) => (
+ <Box key={single} sx={{
+ display: "flex"
+ }}>
+ <FormControlLabel value={single} control={<Radio />} label={get(`pillar.types.${single}`)} />
+ {examples[single].map((block, index) => {
+ const pillar = block === 1;
+ return (
+ <Box key={index} sx={{
+ mb: 1,
+ width: 48,
+ height: 48,
+ display: "inline-flex",
+ alignItems: "center",
+ justifyContent: "center",
+ boxShadow: theme => `inset 0 0 0 3px ${theme.palette[pillar ? "primary" : "secondary"][theme.palette.mode]}`,
+ }}>
+ <Typography>{pillar ? get("pillar.name") : get("pillar.distance")}</Typography>
+ </Box>
+ );
+ })}
+ </Box>
+ ))}
  </RadioGroup>
  </FormControl>
  </FormGroup>
+ {pillars.map(single => <SingleCollocation key={single.toString()} collocation={single} />)}
  </>
  );
 };