From d0f74172dccb6c59ce1a8085593f92436943230a Mon Sep 17 00:00:00 2001 From: Neila Date: Thu, 1 Feb 2024 14:31:34 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=A9=20SingleCollocation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/locales/zh-CN.json | 11 +++- src/app/setting/option/Module.tsx | 35 ++++++++++ src/app/setting/option/page.tsx | 29 +-------- src/app/setting/theme/defaults.tsx | 6 ++ src/app/setting/theme/hues.tsx | 20 ++++++ src/app/setting/theme/page.tsx | 76 ++-------------------- src/app/setting/theme/shades.tsx | 18 +++++ src/app/tools/pillar/SingleCollocation.tsx | 32 +++++++++ src/app/tools/pillar/page.tsx | 58 +++++++++++++++-- 9 files changed, 180 insertions(+), 105 deletions(-) create mode 100644 src/app/setting/option/Module.tsx create mode 100644 src/app/setting/theme/defaults.tsx create mode 100644 src/app/setting/theme/hues.tsx create mode 100644 src/app/setting/theme/shades.tsx create mode 100644 src/app/tools/pillar/SingleCollocation.tsx diff --git a/src/app/locales/zh-CN.json b/src/app/locales/zh-CN.json index 1e61012f..1d9baee7 100644 --- a/src/app/locales/zh-CN.json +++ b/src/app/locales/zh-CN.json @@ -252,7 +252,14 @@ "types": { "0": "只有中间有柱子", "1": "一端和中间有柱子", - "2": "两端金额中间有柱子" - } + "2": "两端和中间有柱子" + }, + "collocationShow": { + "0": "柱子长度", + "1": "柱子个数", + "2": "间隔长度", + "3": "间隔个数" + }, + "distance": "间隔" } } \ No newline at end of file diff --git a/src/app/setting/option/Module.tsx b/src/app/setting/option/Module.tsx new file mode 100644 index 00000000..7684acaa --- /dev/null +++ b/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 ( + + { + 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} + + + ); +} diff --git a/src/app/setting/option/page.tsx b/src/app/setting/option/page.tsx index d213f657..4c0a6af6 100644 --- a/src/app/setting/option/page.tsx +++ b/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 ( - - { - 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} - - - ); -} +import Module from "./Module"; const PureDialog = dynamic(() => import("../../components/dialog/PureDialog")), ghURL = "https://github.com/neila-a/verkfi/"; export type option = [Context, string]; diff --git a/src/app/setting/theme/defaults.tsx b/src/app/setting/theme/defaults.tsx new file mode 100644 index 00000000..999701f8 --- /dev/null +++ b/src/app/setting/theme/defaults.tsx @@ -0,0 +1,6 @@ +"use client"; +const defaults = { + primary: '#2196f3', + secondary: '#f50057', +}; +export default defaults; diff --git a/src/app/setting/theme/hues.tsx b/src/app/setting/theme/hues.tsx new file mode 100644 index 00000000..884738db --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/app/setting/theme/page.tsx b/src/app/setting/theme/page.tsx index 125de99e..88b178ba 100644 --- a/src/app/setting/theme/page.tsx +++ b/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() { -