read configs from env

src/components/Markdowns/MarkdownEditor.css

@@ -45,6 +45,8 @@
     border-radius: 6px;
     border: 1px solid #dcdcdc;
     transition: border-color 0.3s ease, box-shadow 0.3s ease;
+    height: 70vh !important;
+    resize: vertical;
 }
 
 .markdown-editor-form .input:focus,

src/components/Markdowns/MarkdownEditor.js

@@ -8,8 +8,9 @@ import rehypeKatex from "rehype-katex";
 import rehypeRaw from "rehype-raw";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { okaidia } from "react-syntax-highlighter/dist/esm/styles/prism";
-import "katex/dist/katex.min.css"; // LaTeX 样式
+import "katex/dist/katex.min.css";
 import "./MarkdownEditor.css";
+import config from "../../config";
 
 const MarkdownEditor = () => {
     const { roles } = useContext(AuthContext);
@@ -34,7 +35,7 @@ const MarkdownEditor = () => {
     }, [id]);
 
     const handleSave = () => {
-        const url = id ? `/api/markdown/${id}` : "/api/markdown";
+        const url = id ? `${config.BACKEND_HOST}/api/markdown/${id}` : `${config.BACKEND_HOST}/api/markdown`;
         const method = id ? "PUT" : "POST";
         fetch(url, {
             method,
@@ -102,6 +103,7 @@ const MarkdownEditor = () => {
                             <label className="label">Content</label>
                             <div className="control">
                                 <textarea
+                                    style={{ height: "70vh" }}
                                     className="textarea"
                                     placeholder="Enter Markdown content"
                                     value={content}
@@ -128,7 +130,7 @@ const MarkdownEditor = () => {
                 {/* Preview Column */}
                 <div className="column is-half">
                     <h3 className="subtitle is-5">Preview</h3>
-                    <div className="content markdown-preview">
+                    <div className="content markdown-preview" style={{ height: "70vh" }}>
                         <ReactMarkdown
                             children={content}
                             remarkPlugins={[remarkMath]}

src/components/Navigations/SideNavigation.js

@@ -5,13 +5,14 @@ import { Link } from "react-router-dom";
 import "./SideNavigation.css";
 import {fetchWithCache} from "../../utils/fetchWithCache";
 import PermissionGuard from "../PermissionGuard";
+import config from "../../config";
 
 const SideNavigation = () => {
     const [markdowns, setMarkdowns] = useState([]);
     const [tree, setTree] = useState(null);
 
     useEffect(() => {
-        fetchWithCache("http://127.0.0.1:5000/api/markdown/")
+        fetchWithCache(`${config.BACKEND_HOST}/api/markdown/`)
             .then((data) => {
                 setMarkdowns(data);
                 setTree(buildTree(data));
@@ -51,7 +52,7 @@ const SideNavigation = () => {
                     if (value.markdown) {
                         return (
                             <li key={value.markdown.id}>
-                                <Link to={`http://127.0.0.1:5000/markdown/${value.markdown.id}`}>
+                                <Link to={`${config.BACKEND_HOST}/markdown/${value.markdown.id}`}>
                                     {value.markdown.title}
                                 </Link>
                             </li>