✨ 改进扩展编辑框内的color、main和icon信息填写部分

neila-a · Mar 23, 2024 · 0eafabd · 0eafabd
1 parent bf47ac3
commit 0eafabd
Show file tree

Hide file tree

Showing 10 changed files with 134 additions and 72 deletions.
diff --git a/packages/verkfi-tool-demo/icon.jpg b/packages/verkfi-tool-demo/icon.jpg
diff --git a/packages/verkfi-tool-demo/package.json b/packages/verkfi-tool-demo/package.json
@@ -2,7 +2,7 @@
  "name": "laz_durno_kkehet",
  "to": "demovxt",
  "description": "A demo",
- "icon": "fav.png",
+ "icon": "icon.jpg",
  "scripts": {
  "build": "rm -f demo.vxt && asar pack ./ demo.vxt"
  },

diff --git a/src/app/WindowContainer.tsx b/src/app/WindowContainer.tsx
@@ -15,7 +15,9 @@ import {
 } from "react";
 export default function WindowContainer() {
  const colorContext = useContext(colorMode),
- windows = useContext(windowsContext).windows,
+ {
+ windows
+ } = useContext(windowsContext),
  color = colorContext.value,
  theme = useTheme();
  return (

diff --git a/src/app/components/dialog/PureDialog.tsx b/src/app/components/dialog/PureDialog.tsx
@@ -1,9 +1,10 @@
 import {
- DialogContent
+ DialogActions,
+ DialogContent,
+ DialogProps
 } from "@mui/material";
 import {
- ReactNode,
- useState
+ ReactNode
 } from "react";
 import BootstrapDialog from "./BootstrapDialog";
 import BootstrapDialogTitle from "./BootstrapDialogTitle";
@@ -17,21 +18,26 @@ export default function PureDialog(props: {
  * 内容
  */
  children: ReactNode;
+ action?: ReactNode;
  /**
  * 关闭后的回调
  */
  onClose: Function;
+ add?: Omit<DialogProps, "open">;
  open: boolean;
 }) {
  const handleClose = () => {
  props.onClose();
  };
  return (
- <BootstrapDialog onClose={handleClose} open={props.open} TransitionComponent={Transition}>
+ <BootstrapDialog {...props.add} onClose={handleClose} open={props.open} TransitionComponent={Transition}>
  <BootstrapDialogTitle onClose={handleClose}>{props.title}</BootstrapDialogTitle>
  <DialogContent dividers>
  {props.children}
  </DialogContent>
+ <DialogActions>
+ {props.action}
+ </DialogActions>
  </BootstrapDialog>
  );
 }
diff --git a/src/app/declare.ts b/src/app/declare.ts
@@ -56,7 +56,7 @@ export type setState<T> = Dispatch<SetStateAction<T>>;
 
 export namespace Hex {
  type HexDigit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | 'a' | 'b' | 'c' | 'd' | 'e' | 'f';
- type HexColor<T extends string> =
+ export type HexColor<T extends string> =
  T extends `${HexDigit}${HexDigit}${HexDigit}${infer Rest1}`
  ? (Rest1 extends `${HexDigit}${HexDigit}${HexDigit}`
  ? T // six-digit hex color

diff --git a/src/app/index/convertExtensionTools.tsx b/src/app/index/convertExtensionTools.tsx
@@ -13,7 +13,10 @@ const convertExtensionTools: (extensionTools: single[]) => tool[] = extensionToo
  name: single.name,
  to: `/tools/extension?tool=${single.to}` as Lowercase<string>,
  desc: single.desc,
- icon: () => <Image src={`/extensionfiles/${single.to}/${single.icon}`} alt={single.name} height={24} width={24} />,
+ /** 
+ * 这里的图片是直接从indexedDB加载来的，不需要且不能使用next/image的优化
+ */
+ icon: () => <img src={`/extensionfiles/${single.to}/${single.icon}`} alt={single.name} height={24} width={24} />,
  color: single.color as [Hex.Hex, Hex.Hex],
  isGoto: true
 }));

diff --git a/src/app/layout/layoutClient.tsx b/src/app/layout/layoutClient.tsx
@@ -136,55 +136,55 @@ export function WindowsProvider(props: {
  </windows.Provider>
  );
 }
+const defaultPalette = {
+ // 来自theme.tsx中palette的快照
+ "primary": {
+ "50": "#e3f2fd",
+ "100": "#bbdefb",
+ "200": "#90caf9",
+ "300": "#64b5f6",
+ "400": "#42a5f5",
+ "500": "#2196f3",
+ "600": "#1e88e5",
+ "700": "#1976d2",
+ "800": "#1565c0",
+ "900": "#0d47a1",
+ "A100": "#82b1ff",
+ "A200": "#448aff",
+ "A400": "#2979ff",
+ "A700": "#2962ff",
+ "main": "#2196f3"
+ },
+ "secondary": {
+ "50": "#fce4ec",
+ "100": "#f8bbd0",
+ "200": "#f48fb1",
+ "300": "#f06292",
+ "400": "#ec407a",
+ "500": "#e91e63",
+ "600": "#d81b60",
+ "700": "#c2185b",
+ "800": "#ad1457",
+ "900": "#880e4f",
+ "A100": "#ff80ab",
+ "A200": "#ff4081",
+ "A400": "#f50057",
+ "A700": "#c51162",
+ "main": "#f50057"
+ }
+};
 export default function ModifiedApp(props: {
  children: ReactNode;
 }) {
  const [mode, setMode] = useStoragedState<PaletteMode | "system">("darkmode", "暗色模式", "system"),
- [palette, setPalette] = useStoragedState<string>("palette", "调色板", JSON.stringify({
- // 来自theme.tsx中palette的快照
- "primary": {
- "50": "#e3f2fd",
- "100": "#bbdefb",
- "200": "#90caf9",
- "300": "#64b5f6",
- "400": "#42a5f5",
- "500": "#2196f3",
- "600": "#1e88e5",
- "700": "#1976d2",
- "800": "#1565c0",
- "900": "#0d47a1",
- "A100": "#82b1ff",
- "A200": "#448aff",
- "A400": "#2979ff",
- "A700": "#2962ff",
- "main": "#2196f3"
- },
- "secondary": {
- "50": "#fce4ec",
- "100": "#f8bbd0",
- "200": "#f48fb1",
- "300": "#f06292",
- "400": "#ec407a",
- "500": "#e91e63",
- "600": "#d81b60",
- "700": "#c2185b",
- "800": "#ad1457",
- "900": "#880e4f",
- "A100": "#ff80ab",
- "A200": "#ff4081",
- "A400": "#f50057",
- "A700": "#c51162",
- "main": "#f50057"
- }
- })),
+ [palette, setPalette] = useStoragedState<string>("palette", "调色板", JSON.stringify(defaultPalette)),
  [recentlyUsedState, setRecentlyUsed] = useStoragedState<string>("recently-tools", "最近使用的工具", "[]"),
  [mostUsedState, setMostUsed] = useStoragedState<string>("most-tools", "最常使用的工具", "{}"),
- realPalette = useMemo(() => (palette === "__none__" ? {} : JSON.parse(palette)), [palette]),
  theme = useMemo(
  () =>
  createTheme({
  palette: {
- ...realPalette,
+ ...(JSON.parse(palette)),
  mode: mode === "system" ? (isBrowser() ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light") : "light") : mode,
  },
  typography: {

diff --git a/src/app/locales/zh-CN.json b/src/app/locales/zh-CN.json
@@ -197,6 +197,7 @@
  },
  "theme": {
  "primary": "主要色",
+ "colorSteps": "色标",
  "secondary": "次要色",
  "shade": "阴影",
  "colors": {

diff --git a/src/app/setting/extensions/DialogInputs.tsx b/src/app/setting/extensions/DialogInputs.tsx
@@ -2,14 +2,18 @@
 import {
  Button,
  ButtonGroup,
- FormGroup
+ FormGroup,
+ MenuItem,
+ Select,
+ TextField
 } from "@mui/material";
 import {
  get
 } from "react-intl-universal";
 import db from "../../tools/extension/db";
 import InfoInput from "./infoInput";
 import {
+ Hex,
  setState
 } from "../../declare";
 import {
@@ -28,31 +32,51 @@ export default function DialogInputs(props: {
  return (
  <>
  <FormGroup>
- {[["name", "名称"], ["to", "ID"], ["desc", "描述"], ["icon", "图标"], ["color", "背景色"], ["main", "入口"]].map(item => <InfoInput
+ {[["name", "名称"], ["to", "ID"], ["desc", "描述"]].map(item => <InfoInput
  id={item[0]}
  key={item[0]}
  name={item[1]}
  info={props.fileInfo}
  setInfo={props.setFileInfo} />)}
  </FormGroup>
- <ButtonGroup fullWidth>
- {props.files.length !== 0 && <Button variant="contained" onClick={async (event) => {
- const id = await db.extensionTools.put({
- ...props.fileInfo,
- files: props.files,
- color: props.fileInfo.color
- });
- props.reset();
- }}>
- {props.type === "add" ? get("添加") : get("编辑")}
- </Button>}
- {props.type === "modify" && <Button variant="outlined" onClick={async (event) => {
- props.setModifyDialogOpen(false);
- props.setRemoveDialogOpen(true);
- }}>
- {get("删除")}
- </Button>}
- </ButtonGroup>
+ <FormGroup sx={{
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "space-between"
+ }}>
+ {[0, 1].map(item => (
+ <TextField sx={{
+ maxWidth: "49%"
+ }} key={item} margin="dense" variant="outlined" onChange={event => {
+ props.setFileInfo(old => {
+ const realOld = {
+ ...old
+ };
+ realOld.color[item] = Hex.hex(event.target.value as Hex.HexColor<string>);
+ return realOld;
+ });
+ }} value={props.fileInfo.color[item]} label={get("theme.colorSteps") + item} />
+ ))}
+ </FormGroup>
+ <FormGroup>
+ {[["icon", "图标"], ["main", "入口"]].map(item => (
+ <Select sx={{
+ mb: 1
+ }} key={item[0]} value={props.fileInfo[item[0]]} label={get(item[1])} onChange={event => {
+ props.setFileInfo(old => {
+ const realOld = {
+ ...old
+ };
+ realOld[item[0]] = event.target.value;
+ return realOld;
+ })
+ }}>
+ {props.files.map(file => (
+ <MenuItem key={file[0]} value={file[0]}>{file[0]}</MenuItem>
+ ))}
+ </Select>
+ ))}
+ </FormGroup>
  </>
  );
 }
diff --git a/src/app/setting/extensions/page.tsx b/src/app/setting/extensions/page.tsx
@@ -8,7 +8,10 @@ import {
  IconButton,
  Box,
  FormControlLabel,
- Checkbox
+ Checkbox,
+ useMediaQuery,
+ useTheme,
+ ButtonGroup
 } from "@mui/material";
 import {
  useContext,
@@ -37,7 +40,6 @@ import {
 import {
  useLiveQuery
 } from "dexie-react-hooks";
-import Image from "next/image";
 import db, {
  single
 } from "../../tools/extension/db";
@@ -66,6 +68,25 @@ export default function ExtensionManager() {
  [removeDialogOpen, setRemoveDialogOpen] = useState<boolean>(false),
  [modifyDialogOpen, setModifyDialogOpen] = useState<boolean>(false),
  [clearData, setClearData] = useState<boolean>(false),
+ theme = useTheme(),
+ fullScreen = useMediaQuery(theme.breakpoints.down('sm')),
+ dialogButtons = (type: "modify" | "add") => <ButtonGroup fullWidth>
+ {files.length !== 0 && <Button variant="contained" onClick={async (event) => {
+ const id = await db.extensionTools.put({
+ ...fileInfo,
+ files: files
+ });
+ reset();
+ }}>
+ {type === "add" ? get("添加") : get("编辑")}
+ </Button>}
+ {type === "modify" && <Button variant="outlined" onClick={async (event) => {
+ setModifyDialogOpen(false);
+ setRemoveDialogOpen(true);
+ }}>
+ {get("删除")}
+ </Button>}
+ </ButtonGroup>,
  recentlyUsed = useContext(recentlyUsedContext),
  mostUsed = useContext(mostUsedContext),
  reset = () => {
@@ -130,7 +151,8 @@ export default function ExtensionManager() {
  <Stack direction="row" divider={<Divider orientation="vertical" flexItem />} spacing={2}>
  <Stack direction="row" spacing={1}>
  <Box>
- <Image src={`/extensionfiles/${single.to}/${single.icon}`} alt={single.name} height={24} width={24} />
+ {/* 这里的图片是直接从indexedDB加载来的，不需要且不能使用next/image的优化 */}
+ <img src={`/extensionfiles/${single.to}/${single.icon}`} alt={single.name} height={24} width={24} />
  </Box>
  <Box>
  <Typography>
@@ -185,7 +207,9 @@ export default function ExtensionManager() {
  }} variant="outlined">
  {get("extensions.添加扩展")}
  </Button>
- <PureDialog open={modifyDialogOpen} onClose={event => {
+ <PureDialog action={dialogButtons("modify")} add={{
+ fullScreen: fullScreen
+ }} open={modifyDialogOpen} onClose={event => {
  setModifyDialogOpen(false);
  }} title={get("extensions.编辑扩展")}>
  {packagedDialogInputs("modify")}
@@ -201,7 +225,9 @@ export default function ExtensionManager() {
  }
  reset();
  }} open={removeDialogOpen} title={get("extensions.删除扩展")} description={`${get("extensions.确定删除扩展")}${fileInfo.name}?`} />
- <PureDialog open={addDialogOpen} onClose={() => reset()} title={get("extensions.添加扩展")}>
+ <PureDialog action={dialogButtons("add")} add={{
+ fullScreen: fullScreen
+ }} open={addDialogOpen} onClose={() => reset()} title={get("extensions.添加扩展")}>
  <FilePond
  files={fileArray as unknown as FilePondServerConfigProps["files"]}
  onupdatefiles={files => {