From 44787637f2740b1cb4167e4520b7cbe20fbe9894 Mon Sep 17 00:00:00 2001 From: lyf <1910527151@qq.com> Date: Thu, 8 Aug 2024 21:07:03 +0800 Subject: [PATCH 1/6] tj --- app/components/markdown.tsx | 31 ++++++++++++++++++++++++++++++- app/styles/globals.scss | 12 +++++++++++- 2 files changed, 41 insertions(+), 2 deletions(-) diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx index 1531d2ff0e0..4b90bb70560 100644 --- a/app/components/markdown.tsx +++ b/app/components/markdown.tsx @@ -122,9 +122,29 @@ export function PreCode(props: { children: any }) { } }, []); + const [collapsed, setCollapsed] = useState(true); + const [showToggle, setShowToggle] = useState(false); + + useEffect(() => { + if (ref.current) { + // 获取代码块的实际高度 + const screenHeight = window.innerHeight; + const codeHeight = ref.current.scrollHeight; + setShowToggle(codeHeight > screenHeight * 0.3); + } + }, [props.children]); + + const toggleCollapsed = () => { + setCollapsed(!collapsed); + }; + console.log(props.children); + return ( <> - <pre ref={ref}> + <pre + ref={ref} + style={{ maxHeight: collapsed ? "30vh" : "none", overflow: "hidden" }} + > <span className="copy-code-button" onClick={() => { @@ -135,6 +155,15 @@ export function PreCode(props: { children: any }) { }} ></span> {props.children} + {showToggle && collapsed && ( + <p + style={{ margin: 0 }} + className="show-hide-button" + onClick={toggleCollapsed} + > + 展开全部 + </p> + )} </pre> {mermaidCode.length > 0 && ( <Mermaid code={mermaidCode} key={mermaidCode} /> diff --git a/app/styles/globals.scss b/app/styles/globals.scss index 3c59f2d44f7..679bac37ace 100644 --- a/app/styles/globals.scss +++ b/app/styles/globals.scss @@ -272,7 +272,6 @@ div.math { pre { position: relative; - &:hover .copy-code-button { pointer-events: all; transform: translateX(0px); @@ -302,6 +301,17 @@ pre { opacity: 1; } } + .show-hide-button { + width: 100%; + height: 20px; + line-height: 20px; + position: absolute; + text-align: center; + bottom: 0; + cursor: pointer; + color: white; + background: linear-gradient(rgba(0,0,0,.3), #1a1b26); + } } .clickable { From 8f759d1c3e2ba616427faf46df323190c2799fdb Mon Sep 17 00:00:00 2001 From: lyf <1910527151@qq.com> Date: Fri, 9 Aug 2024 14:55:25 +0800 Subject: [PATCH 2/6] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8A=98=E5=8F=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/markdown.tsx | 60 ++++++++++++++++++++----------------- app/styles/globals.scss | 33 +++++++++++++------- 2 files changed, 56 insertions(+), 37 deletions(-) diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx index 4b90bb70560..e011bd5f5ff 100644 --- a/app/components/markdown.tsx +++ b/app/components/markdown.tsx @@ -127,44 +127,50 @@ export function PreCode(props: { children: any }) { useEffect(() => { if (ref.current) { - // 获取代码块的实际高度 - const screenHeight = window.innerHeight; const codeHeight = ref.current.scrollHeight; - setShowToggle(codeHeight > screenHeight * 0.3); + setShowToggle(codeHeight > 400); + ref.current.scrollTop = ref.current.scrollHeight; } }, [props.children]); const toggleCollapsed = () => { setCollapsed(!collapsed); }; - console.log(props.children); return ( <> - <pre - ref={ref} - style={{ maxHeight: collapsed ? "30vh" : "none", overflow: "hidden" }} - > - <span - className="copy-code-button" - onClick={() => { - if (ref.current) { - const code = ref.current.innerText; - copyToClipboard(code); - } + <div style={{ position: "relative" }}> + <pre + ref={ref} + style={{ + maxHeight: collapsed ? "400px" : "none", + overflow: "hidden", }} - ></span> - {props.children} - {showToggle && collapsed && ( - <p - style={{ margin: 0 }} - className="show-hide-button" - onClick={toggleCollapsed} - > - 展开全部 - </p> - )} - </pre> + > + <span + className="copy-code-button" + onClick={() => { + if (ref.current) { + const code = ref.current.innerText; + copyToClipboard(code); + } + }} + ></span> + {props.children} + {showToggle && collapsed && ( + <div + className="show-hide-button" + style={{ + backgroundImage: collapsed + ? "linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,.06))" + : "none", + }} + > + <button onClick={toggleCollapsed}>查看全部</button> + </div> + )} + </pre> + </div> {mermaidCode.length > 0 && ( <Mermaid code={mermaidCode} key={mermaidCode} /> )} diff --git a/app/styles/globals.scss b/app/styles/globals.scss index 679bac37ace..14075a0a822 100644 --- a/app/styles/globals.scss +++ b/app/styles/globals.scss @@ -271,7 +271,7 @@ div.math { } pre { - position: relative; + // position: relative; &:hover .copy-code-button { pointer-events: all; transform: translateX(0px); @@ -301,19 +301,32 @@ pre { opacity: 1; } } + .show-hide-button { - width: 100%; - height: 20px; - line-height: 20px; - position: absolute; - text-align: center; - bottom: 0; - cursor: pointer; - color: white; - background: linear-gradient(rgba(0,0,0,.3), #1a1b26); + position: absolute; + top: 0; + width: 100%; + margin: auto; + height: fit-content; + display: inline-flex; + justify-content: center; + button{ + margin-top: 3em; + margin-bottom: 4em; + padding: 5px 16px; + border: 0; + cursor: pointer; + border-radius: 14px; + text-align: center; + color: white; + background: #464e4e; + } } + } + + .clickable { cursor: pointer; From 6f75ef8f0acb8a32dc27b771d0ca3414c54de6ca Mon Sep 17 00:00:00 2001 From: lyf <1910527151@qq.com> Date: Sat, 10 Aug 2024 12:45:50 +0800 Subject: [PATCH 3/6] addcd --- app/components/markdown.tsx | 82 +++++++++++++++++++++++++++---------- app/styles/globals.scss | 15 +++++-- 2 files changed, 72 insertions(+), 25 deletions(-) diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx index e011bd5f5ff..4d7ae7b9c0b 100644 --- a/app/components/markdown.tsx +++ b/app/components/markdown.tsx @@ -122,20 +122,20 @@ export function PreCode(props: { children: any }) { } }, []); - const [collapsed, setCollapsed] = useState(true); - const [showToggle, setShowToggle] = useState(false); + // const [collapsed, setCollapsed] = useState(true); + // const [showToggle, setShowToggle] = useState(false); - useEffect(() => { - if (ref.current) { - const codeHeight = ref.current.scrollHeight; - setShowToggle(codeHeight > 400); - ref.current.scrollTop = ref.current.scrollHeight; - } - }, [props.children]); + // useEffect(() => { + // if (ref.current) { + // const codeHeight = ref.current.scrollHeight; + // setShowToggle(codeHeight > 400); + // ref.current.scrollTop = ref.current.scrollHeight; + // } + // }, [props.children]); - const toggleCollapsed = () => { - setCollapsed(!collapsed); - }; + // const toggleCollapsed = () => { + // setCollapsed(collapsed=>!collapsed); + // }; return ( <> @@ -143,8 +143,8 @@ export function PreCode(props: { children: any }) { <pre ref={ref} style={{ - maxHeight: collapsed ? "400px" : "none", - overflow: "hidden", + // maxHeight: collapsed ? "400px" : "none", + overflowY: "hidden", }} > <span @@ -157,18 +157,13 @@ export function PreCode(props: { children: any }) { }} ></span> {props.children} - {showToggle && collapsed && ( + {/* {showToggle && collapsed && ( <div - className="show-hide-button" - style={{ - backgroundImage: collapsed - ? "linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,.06))" - : "none", - }} + className={`show-hide-button ${collapsed ? 'collapsed' : 'expanded'}`} > <button onClick={toggleCollapsed}>查看全部</button> </div> - )} + )} */} </pre> </div> {mermaidCode.length > 0 && ( @@ -191,6 +186,46 @@ export function PreCode(props: { children: any }) { ); } +function CustomCode(props: { children: any }) { + const ref = useRef<HTMLPreElement>(null); + const [collapsed, setCollapsed] = useState(true); + const [showToggle, setShowToggle] = useState(false); + + useEffect(() => { + if (ref.current) { + const codeHeight = ref.current.scrollHeight; + setShowToggle(codeHeight > 400); + ref.current.scrollTop = ref.current.scrollHeight; + } + }, [props.children]); + + const toggleCollapsed = () => { + setCollapsed((collapsed) => !collapsed); + }; + return ( + <> + <code + ref={ref} + style={{ + maxHeight: collapsed ? "400px" : "none", + overflowY: "hidden", + }} + > + {props.children} + {showToggle && collapsed && ( + <div + className={`show-hide-button ${ + collapsed ? "collapsed" : "expanded" + }`} + > + <button onClick={toggleCollapsed}>查看全部</button> + </div> + )} + </code> + </> + ); +} + function escapeDollarNumber(text: string) { let escapedText = ""; @@ -231,6 +266,8 @@ function _MarkDownContent(props: { content: string }) { return escapeBrackets(escapeDollarNumber(props.content)); }, [props.content]); + console.log(escapedContent, 11233); + return ( <ReactMarkdown remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]} @@ -246,6 +283,7 @@ function _MarkDownContent(props: { content: string }) { ]} components={{ pre: PreCode, + code: CustomCode, p: (pProps) => <p {...pProps} dir="auto" />, a: (aProps) => { const href = aProps.href || ""; diff --git a/app/styles/globals.scss b/app/styles/globals.scss index 14075a0a822..ce0e8281d9a 100644 --- a/app/styles/globals.scss +++ b/app/styles/globals.scss @@ -301,10 +301,15 @@ pre { opacity: 1; } } +} +code{ .show-hide-button { + border-radius: 10px; position: absolute; top: 0; + left: 0; + right: 0; width: 100%; margin: auto; height: fit-content; @@ -322,11 +327,15 @@ pre { background: #464e4e; } } - + + .expanded { + background-image: none; + } + .collapsed { + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.06)); + } } - - .clickable { cursor: pointer; From 356155fd30a7f4ec3aa6c339834c2160fe7ed60c Mon Sep 17 00:00:00 2001 From: lyf <1910527151@qq.com> Date: Mon, 12 Aug 2024 13:58:53 +0800 Subject: [PATCH 4/6] feature add zhedie --- app/components/markdown.tsx | 23 ----------------------- 1 file changed, 23 deletions(-) diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx index 4d7ae7b9c0b..ec413e51a2f 100644 --- a/app/components/markdown.tsx +++ b/app/components/markdown.tsx @@ -122,28 +122,12 @@ export function PreCode(props: { children: any }) { } }, []); - // const [collapsed, setCollapsed] = useState(true); - // const [showToggle, setShowToggle] = useState(false); - - // useEffect(() => { - // if (ref.current) { - // const codeHeight = ref.current.scrollHeight; - // setShowToggle(codeHeight > 400); - // ref.current.scrollTop = ref.current.scrollHeight; - // } - // }, [props.children]); - - // const toggleCollapsed = () => { - // setCollapsed(collapsed=>!collapsed); - // }; - return ( <> <div style={{ position: "relative" }}> <pre ref={ref} style={{ - // maxHeight: collapsed ? "400px" : "none", overflowY: "hidden", }} > @@ -157,13 +141,6 @@ export function PreCode(props: { children: any }) { }} ></span> {props.children} - {/* {showToggle && collapsed && ( - <div - className={`show-hide-button ${collapsed ? 'collapsed' : 'expanded'}`} - > - <button onClick={toggleCollapsed}>查看全部</button> - </div> - )} */} </pre> </div> {mermaidCode.length > 0 && ( From c3c3dd51546f1b533422ae2a1fe4c5ab1ce0a2c0 Mon Sep 17 00:00:00 2001 From: lyf <1910527151@qq.com> Date: Mon, 12 Aug 2024 14:06:21 +0800 Subject: [PATCH 5/6] feature add zhedie --- app/components/markdown.tsx | 31 +++++++++++-------------------- app/styles/globals.scss | 3 ++- 2 files changed, 13 insertions(+), 21 deletions(-) diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx index ec413e51a2f..5515164c44b 100644 --- a/app/components/markdown.tsx +++ b/app/components/markdown.tsx @@ -124,25 +124,18 @@ export function PreCode(props: { children: any }) { return ( <> - <div style={{ position: "relative" }}> - <pre - ref={ref} - style={{ - overflowY: "hidden", + <pre ref={ref}> + <span + className="copy-code-button" + onClick={() => { + if (ref.current) { + const code = ref.current.innerText; + copyToClipboard(code); + } }} - > - <span - className="copy-code-button" - onClick={() => { - if (ref.current) { - const code = ref.current.innerText; - copyToClipboard(code); - } - }} - ></span> - {props.children} - </pre> - </div> + ></span> + {props.children} + </pre> {mermaidCode.length > 0 && ( <Mermaid code={mermaidCode} key={mermaidCode} /> )} @@ -243,8 +236,6 @@ function _MarkDownContent(props: { content: string }) { return escapeBrackets(escapeDollarNumber(props.content)); }, [props.content]); - console.log(escapedContent, 11233); - return ( <ReactMarkdown remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]} diff --git a/app/styles/globals.scss b/app/styles/globals.scss index ce0e8281d9a..89f0a78e753 100644 --- a/app/styles/globals.scss +++ b/app/styles/globals.scss @@ -271,7 +271,8 @@ div.math { } pre { - // position: relative; + position: relative; + &:hover .copy-code-button { pointer-events: all; transform: translateX(0px); From 1980f43b9f634f658be05fcf5601d461a5435029 Mon Sep 17 00:00:00 2001 From: lyf <1910527151@qq.com> Date: Mon, 12 Aug 2024 16:31:12 +0800 Subject: [PATCH 6/6] feat(auth): xg feature --- app/styles/globals.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/app/styles/globals.scss b/app/styles/globals.scss index 89f0a78e753..96d6402dc83 100644 --- a/app/styles/globals.scss +++ b/app/styles/globals.scss @@ -308,9 +308,7 @@ code{ .show-hide-button { border-radius: 10px; position: absolute; - top: 0; - left: 0; - right: 0; + inset: 0 0 auto 0; width: 100%; margin: auto; height: fit-content;