From 1d3d620c0a5ea7e7b5259a18d9e4856e5edae0c8 Mon Sep 17 00:00:00 2001 From: cnwhy Date: Tue, 25 Jun 2024 19:14:57 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4JsonForm=EF=BC=9B=E6=BB=9A?= =?UTF-8?q?=E5=8A=A8=E6=9D=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.css | 13 ---- src/Pages/Manage.tsx | 2 +- src/components/Forms/AddButton.tsx | 34 +++++--- src/components/Forms/Json.tsx | 37 +++------ src/components/Forms/index.less | 5 ++ src/components/List/Public.tsx | 5 +- src/components/ListCard/index.tsx | 4 +- src/components/viewer/chain.tsx | 4 +- src/components/viewer/node.tsx | 4 +- src/index.css | 76 ------------------ src/index.less | 120 +++++++++++++++++++++++++++++ src/main.tsx | 2 +- 12 files changed, 170 insertions(+), 136 deletions(-) create mode 100644 src/components/Forms/index.less delete mode 100644 src/index.css create mode 100644 src/index.less diff --git a/src/App.css b/src/App.css index f8eb48e..433bfa1 100644 --- a/src/App.css +++ b/src/App.css @@ -24,19 +24,6 @@ body { } } -.ant-space-item > .ant-tag { - margin-inline-end: inherit; -} - -.ant-tag.editor-json { - cursor: pointer; -} - -.antd-cord-boxShadow { - box-shadow: 0 1px 2px -2px #00000029,0 3px 6px #0000001f,0 5px 12px 4px #00000017; - border-color: transparent; -} - .home-form { width: 380px; max-width: 100%; diff --git a/src/Pages/Manage.tsx b/src/Pages/Manage.tsx index 459765a..8cb52ad 100644 --- a/src/Pages/Manage.tsx +++ b/src/Pages/Manage.tsx @@ -249,7 +249,7 @@ const Manage = () => { overflow: "auto", }} > - + {/* */} {/* */} diff --git a/src/components/Forms/AddButton.tsx b/src/components/Forms/AddButton.tsx index 3ef8368..4506eac 100644 --- a/src/components/Forms/AddButton.tsx +++ b/src/components/Forms/AddButton.tsx @@ -20,18 +20,32 @@ const AddButton: React.FC = (props) => { const { comm } = useContext(CardCtx); const templates = UseTemplates({ name: keyName! }); + const _props = { + title: t("title.add", { name: title }), + templates: templates, + onFinish: async (values: any) => { + const { value } = values; + const json = jsonParse(value); + await comm!.addValue(json); + return true; + }, + }; + + // return ( + // } size="small" />} + // {..._props} + // > + // ); + return ( - } size="small" />} - onFinish={async (values: any) => { - const { value } = values; - const json = jsonParse(value); - await comm!.addValue(json); - return true; + - */ -} - -// const TemplateBar = (props: any) => { -// const { templates, onhandle } = props; -// return ; -// }; type JsonFromProps = ModalFormProps & { templates?: Template[]; }; -const JsonForm: React.FC = (props) => { - const { templates, ...other } = props; +interface Jsonform extends React.FC { + show: (props: JsonFromProps) => void; +} + +const JsonForm: Jsonform = (props) => { + const { templates, modalProps, ...other } = props; const { t } = useTranslation(); const formRef = useRef>(); const templateHandle = (json: string) => { @@ -102,13 +91,11 @@ const JsonForm: React.FC = (props) => { modalProps={{ destroyOnClose: true, maskClosable: false, + ...modalProps, }} > {hasTemplate ? ( - + {t("terms.template")}: {templates.map((template, index) => { if (template.children?.length) { @@ -204,7 +191,7 @@ const JsonForm: React.FC = (props) => { ); }; -export const showJsonForm = (props: JsonFromProps) => { +JsonForm.show = (props: JsonFromProps) => { const { onOpenChange, open: propOpen, ...other } = props; let timeoutId: ReturnType; const container = document.createDocumentFragment(); @@ -236,8 +223,4 @@ export const showJsonForm = (props: JsonFromProps) => { }); }; -// export const showUpModelForm = (props: any) => { -// const { name, root, model } = props; -// }; - export default JsonForm; diff --git a/src/components/Forms/index.less b/src/components/Forms/index.less new file mode 100644 index 0000000..c15716b --- /dev/null +++ b/src/components/Forms/index.less @@ -0,0 +1,5 @@ +.template-box { + padding-bottom: 5px; + width: 100%; + overflow: auto; +} \ No newline at end of file diff --git a/src/components/List/Public.tsx b/src/components/List/Public.tsx index fbf0042..46cc819 100644 --- a/src/components/List/Public.tsx +++ b/src/components/List/Public.tsx @@ -8,7 +8,7 @@ import React, { import { Button, Popconfirm, Space, Table, App } from "antd"; import { red, green } from "@ant-design/colors"; import { getRESTfulApi } from "../../api"; -import { showJsonForm } from "../Forms/Json"; +import JsonForm from "../Forms/Json"; import { jsonFormatValue, jsonParse } from "../../uitls"; import { CheckCircleOutlined, @@ -22,6 +22,7 @@ import Ctx, { CardCtx } from "../../uitls/ctx"; import { useListData1, UseTemplates } from "../ListCard/hooks"; import { configEvent } from "../../uitls/events"; import { useTranslation } from "react-i18next"; +const showJsonForm = JsonForm.show; export type PublicListProps = { name: string; @@ -135,7 +136,7 @@ const PublicList: React.FC = (props) => { return () => { configEvent.off(`edit:${name}`, onEdit); }; - }, []); + }, [name, t, updateLocal, updateValue]); return (
= (props) => { }, ...props, }; - }, [props]); + }, [props, t]); const [keyword, setKeyword] = useState(""); const _prop = { title: subTitle || "", @@ -154,7 +154,7 @@ const ListCard: React.FC = (props) => { // updateLocalList?.(); }, }; - }, [api, dataSource, localApi, name]); + }, [api, dataSource, localApi, name, t]); useEffect(() => { return commBindEvent(name, comm); diff --git a/src/components/viewer/chain.tsx b/src/components/viewer/chain.tsx index 28c8aed..6596779 100644 --- a/src/components/viewer/chain.tsx +++ b/src/components/viewer/chain.tsx @@ -2,7 +2,7 @@ import { Space, Tag, Tooltip } from "antd"; import { ChainConfig, Config, HopConfig } from "../../api/types"; import { ViewHop, viewHops } from "./hop"; import { RightOutlined } from "@ant-design/icons"; -import { showJsonForm } from "../Forms/Json"; +import JsonForm from "../Forms/Json"; import { jsonFormatValue, jsonParse } from "../../uitls"; import { useContext } from "react"; import { UpdateCtx } from "../List/Public"; @@ -34,7 +34,7 @@ export function ViewHops(props: { hops: HopConfig[]; root: any }) { className="editor-json" title={t("text.doubleClickEdit")} onDoubleClick={() => { - showJsonForm({ + JsonForm.show({ title: t('base.cmd.edit'), initialValues: { value: jsonFormatValue(hop) }, onFinish: async (values: any) => { diff --git a/src/components/viewer/node.tsx b/src/components/viewer/node.tsx index a212a21..f3295a7 100644 --- a/src/components/viewer/node.tsx +++ b/src/components/viewer/node.tsx @@ -3,7 +3,7 @@ import { Config, ForwardNodeConfig, NodeConfig } from "../../api/types"; import { useContext, useMemo } from "react"; import Ctx, { CardCtx } from "../../uitls/ctx"; import { Space, Tag, Tooltip } from "antd"; -import { showJsonForm } from "../Forms/Json"; +import JsonForm from "../Forms/Json"; import { jsonFormatValue, jsonParse } from "../../uitls"; import { UpdateCtx } from "../List/Public"; import { useTranslation } from "react-i18next"; @@ -62,7 +62,7 @@ export function ViewNode({ return { className: "editor-json", onDoubleClick: () => { - showJsonForm({ + JsonForm.show({ title: t("base.cmd.edit"), initialValues: { value: jsonFormatValue(node) }, onFinish: async (values: any) => { diff --git a/src/index.css b/src/index.css deleted file mode 100644 index a4df90f..0000000 --- a/src/index.css +++ /dev/null @@ -1,76 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - color-scheme: light dark; - font-synthesis: none; - background-color: #FFF; - /* text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; */ - transition: all .5s; -} - -:root.theme-dark { - color-scheme: dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; -} - -/* @media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} */ - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} - -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; - align-items: stretch; -} - -/* h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} */ - diff --git a/src/index.less b/src/index.less new file mode 100644 index 0000000..57c92d1 --- /dev/null +++ b/src/index.less @@ -0,0 +1,120 @@ +@dark-base-color: #242424; +@light-base-color: #fff; + +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + color-scheme: light dark; + font-synthesis: none; + background-color: @light-base-color; + /* text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; */ + transition: all .5s; + --scroll-track-color: darken(@light-base-color, 10%); + --scroll-thumb-color: darken(@light-base-color, 30%); + --scroll-hover-color: darken(@light-base-color, 50%); + --scroll-active-color: darken(@light-base-color, 80%); + --shadow-color: #000; +} + +:root.theme-dark { + color-scheme: dark; + color: rgba(255, 255, 255, 0.87); + background-color: @dark-base-color; + --scroll-track-color: lighten(@dark-base-color, 10%); + --scroll-thumb-color: lighten(@dark-base-color, 30%); + --scroll-hover-color: lighten(@dark-base-color, 50%); + --scroll-active-color: lighten(@dark-base-color, 80%); + --shadow-color: #FFF; + // --scrollbar-background-color: #313131; + // --scrollbar-background-color: var; + // --scrollbar-background-color: #313131; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} + +a:hover { + color: #535bf2; +} + +.base-scroll(@size:6px) { + // ::-webkit-scrollbar {width: 6px;} /* 滚动条 */ + // ::-webkit-scrollbar-track { background-color: #eee; } /* 滚动条的滑轨背景颜色 */ + // ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); } /* 滑块颜色 */ + // ::-webkit-scrollbar-button { background-color: #eee; } /* 滑轨两头的监听按钮颜色 */ + // ::-webkit-scrollbar-corner { background-color: black; } /* 横向滚动条和纵向滚动条相交处尖角的颜色 */ + &::-webkit-scrollbar { + width: @size; + height: @size; + } + + &::-webkit-scrollbar-track-piece { + background-color: var(--scroll-track-color); + border-radius: (@size / 2); + } + + &::-webkit-scrollbar-thumb { + background-color: var(--scroll-thumb-color); + border-radius: (@size / 2); + + &:hover { + background-color: var(--scroll-hover-color); + } + + &:active { + background-color: var(--scroll-active-color);; + } + } + + &:hover { + &::-webkit-scrollbar { + width: @size; + height: @size; + } + } +} + +* { + .base-scroll(); + &.scroll-auto-hide { + &::-webkit-scrollbar { + width: 0; + height: 0; + } + } +} + +.scroll-small { + .base-scroll(4px); + &.scroll-auto-hide { + &::-webkit-scrollbar { + width: 0; + height: 0; + } + } +} + +.ant-table-body { + scrollbar-width: auto; + scrollbar-color: auto; +} + +.ant-space-item > .ant-tag { + margin-inline-end: inherit; +} + +.ant-tag.editor-json { + cursor: pointer; +} + +.antd-cord-boxShadow { + box-shadow: 0 1px 2px -2px #00000029,0 3px 6px #0000001f,0 5px 12px 4px #00000017; + border-color: transparent; +} \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index f880370..87032ea 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,6 +1,6 @@ import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App.tsx"; -import './index.css'; +import './index.less'; ReactDOM.createRoot(document.getElementById("root")!).render();