✨ cubic中可以更改每面的文字

neila-a · Apr 25, 2024 · f00586c · f00586c
1 parent 8e5e819
commit f00586c
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 8 deletions.
diff --git a/packages/core/src/app/components/dialog/InputDialog.tsx b/packages/core/src/app/components/dialog/InputDialog.tsx
@@ -37,7 +37,7 @@ export default function InputDialog(props: {
  <DialogContentText>
  {props.context}
  </DialogContentText>
- <TextField autoFocus margin="dense" label={props.label} fullWidth variant="standard" onChange={event => {
+ <TextField autoFocus margin="dense" label={props.label} fullWidth onChange={event => {
  setInput(event.target.value);
  }} />
  </DialogContent>

diff --git a/packages/core/src/app/index/EditToolsListDialog.tsx b/packages/core/src/app/index/EditToolsListDialog.tsx
@@ -23,10 +23,6 @@ import useToolsList from "./getToolsList";
 import {
  getTools
 } from "tools/info";
-import {
- useLiveQuery
-} from "dexie-react-hooks";
-import db from "db";
 import convertExtensionTools from "./convertExtensionTools";
 import {
  extensions,
@@ -90,7 +86,7 @@ export default function EditToolsListDialog(props: {
  setDialogListName("");
  setDialogOpen(false);
  }}>
- <TextField value={dialogListName} autoFocus margin="dense" label={get("category.分类名称")} fullWidth variant="standard" onChange={event => {
+ <TextField value={dialogListName} autoFocus margin="dense" label={get("category.分类名称")} fullWidth onChange={event => {
  setDialogListName(event.target.value);
  }} />
  <TransferList left={props.left} right={right} onLeftChange={context => {

diff --git a/packages/core/src/app/locales/zh-CN.json b/packages/core/src/app/locales/zh-CN.json
@@ -81,6 +81,9 @@
  "主页": "主页",
  "外观": "外观",
  "入口": "入口",
+ "cubic": {
+ "face": "第{face}面"
+ },
  "back": "返回",
  "close": "关闭",
  "drag": {

diff --git a/packages/core/src/app/tools/cubic/page.tsx b/packages/core/src/app/tools/cubic/page.tsx
@@ -7,7 +7,8 @@ import {
  OrbitControls
 } from '@react-three/drei'
 import {
- useRef, useState
+ useRef,
+ useState
 } from "react";
 import {
  BoxGeometry,
@@ -17,11 +18,19 @@ import {
  MeshPhongMaterial
 } from "three";
 import getTextCanvas from "./getTextCanvas";
+import {
+ FormGroup,
+ TextField
+} from "@mui/material";
+import {
+ get
+} from "react-intl-universal";
+type text = [string, string, string, string, string, string];
 export default function Cubic(): JSX.Element {
  const canvas = useRef<HTMLCanvasElement>(),
  camera = useRef<Camera>(),
  mesh = useRef<Mesh>(),
- [text, setText] = useState<[string, string, string, string, string, string]>(["A", "B", "C", "D", "E", "F"]),
+ [text, setText] = useState<text>(["A", "B", "C", "D", "E", "F"]),
  materials = [1, 2, 3, 4, 5, 6].map((item, index) => new MeshPhongMaterial({
  map: new CanvasTexture(getTextCanvas(text[index])),
  color: 0xffffff
@@ -37,6 +46,20 @@ export default function Cubic(): JSX.Element {
  <OrbitControls />
  <Stats />
  </Canvas>
+ <FormGroup>
+ {text.map((a, index) => (
+ <TextField value={a} margin="dense" label={get("cubic.face", {
+ face: index + 1
+ })} fullWidth onChange={event => {
+ setText(old => old.map((value, searchingIndex) => {
+ if (searchingIndex === index) {
+ return event.target.value;
+ }
+ return value;
+ }) as text);
+ }} />
+ ))}
+ </FormGroup>
  </>
  );
 };