perf:支持手机等窄屏，允许修改颜色

Heuluck · Dec 28, 2023 · 6da8969 · 6da8969
1 parent 6904fc2
commit 6da8969
Show file tree

Hide file tree

Showing 9 changed files with 357 additions and 50 deletions.
diff --git a/README.md b/README.md
@@ -5,11 +5,39 @@ Create Infoboxes in a simple way. (Refactoring with React)
 
 # 展示地址 / Demo
 
-请使用电脑打开
-
-Plz use your PC rather than mobile phones
-
-[Github Pages](https://heuluck.github.io/Create-infoboxes-in-Mediawiki-Remake/)
+[Github Pages上的 MediaWiki 原生信息栏生成器](https://heuluck.github.io/Create-infoboxes-in-Mediawiki-Remake/)
+
+# 安装 / Install
+本项目使用了node与npm。需要先配置相应环境。/ This project uses node and npm.
+
+git clone本仓库后，执行以下命令 / After git clone this repository, execute the following command
+```
+npm install
+npm run dev
+```
+
+# 使用方法 / Usage
+## 中文
+1. 进入页面后，在最上方的左侧栏输入标题
+2. 接着输入每一项内容的标题（譬如名字，年龄，特殊能力等）
+3. 如需自定义颜色，可以在下面修改
+4. 点击“完成”
+5. 复制“模板页”的内容，粘贴到Wiki中以“模板”(template)作为名字空间的项目
+6. 在需要使用信息栏的页面粘贴“模板引用”的内容，并填写详细信息
+7. 完成！
+## English
+1. Once you have entered the page, enter the title in the left-hand column at the top.
+2. Then enter the title of each item(e.g. Name, Age, Ability, etc)
+3. If you want to customize the color, you can change it below.
+4. Click "完成".
+5. Copy the content of the "模板页" and paste it into the wiki page with "template" as the namespace.
+6. Paste the content of the "模板引用" on the page where you want to use the infobox, and fill in the details.
+7. Finish!
+
+# 本次更新内容 / Update
+- 允许修改标题颜色
+- 左侧栏可折叠
+- 支持手机（beta）
 
 # 原项目 / The Original Project
 
@@ -22,4 +50,4 @@ Plz use your PC rather than mobile phones
 - [ ] 支持新版 Infobox / Support new version of Infobox
 - [ ] 支持自定义颜色 / Support custom colors
 - [ ] 多语言支持 / Multi-language support
-- [ ] 支持更多参数 / Support more parameters
+- [ ] 支持更多参数 / Support more parameters
diff --git a/dist/assets/index-891irJ2T.css b/dist/assets/index-891irJ2T.css
diff --git a/dist/assets/index-FBTC47Fk.js b/dist/assets/index-FBTC47Fk.js
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="zh-cn">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="./vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MW自助信息栏</title>
+    <script type="module" crossorigin src="./assets/index-FBTC47Fk.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-891irJ2T.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

diff --git a/dist/vite.svg b/dist/vite.svg
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>MW自助信息栏</title>
+    <title>MediaWiki原生信息栏生成器</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,5 @@
-import { useState,useEffect } from 'react'
-import { Layout} from "antd"
+import { useState, useEffect } from 'react'
+import { Layout } from "antd"
 import './App.css'
 const { Header, Content, Footer, Sider } = Layout;
 import InputArea from './components/Left/InputArea';
@@ -16,39 +16,44 @@ function App() {
   )
 }
 
-function Index(){
-  const [count, setCount] = useState(0)
+function Index() {
+  const [collapsed, setCollapsed] = useState(false);
   const [title, setTitle] = useState('标题待输入')
   const [content, setContent] = useState([])
   const [contentRef, setContentRef] = useState([])
-    const [showCode,setShow] = useState(false)
-    const [previewContent,setPreviewContent] = useState([])
-    function getWindowSize() {
-    const {innerWidth, innerHeight} = window;
-    return {innerWidth, innerHeight};
+  const [previewContent, setPreviewContent] = useState([])
+  const [titleColor, setTitleColor] = useState('#3366CC')
+  const [showCode, setShow] = useState(false)
+  function getWindowSize() {
+    const { innerWidth, innerHeight } = window;
+    return { innerWidth, innerHeight };
   }
   const [windowSize, setWindowSize] = useState(getWindowSize());
 
   useEffect(() => {
     function handleWindowResize() {
       setWindowSize(getWindowSize());
-    } 
+    }
     window.addEventListener('resize', handleWindowResize);
     return () => {
       window.removeEventListener('resize', handleWindowResize);
     };
   }, []);
-  return(
+  return (
     <Layout style={{ minHeight: '100vh' }}>
-        <Sider width={"22%"} style={{overflowY:"scroll",height:windowSize.innerHeight}} >
-          <InputArea setTitle={setTitle} setContent={setContent} setContentRef={setContentRef} setShowCode={setShow} setPreviewContent={setPreviewContent} />
-        </Sider>
-        <Layout>
-          <Content style={{overflowY:"scroll",height:windowSize.innerHeight,flex:"none"}}>
-            <OutputArea title={title} content={content} contentRef={contentRef} showCode={showCode} previewContent={previewContent} />
-          </Content>
-        </Layout>
+      <Sider width={"400px"} collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} breakpoint="lg"
+        collapsedWidth="0"
+        onBreakpoint={(broken) => {
+          console.log(broken);
+        }}>
+        <InputArea setTitle={setTitle} setContent={setContent} setContentRef={setContentRef} setShowCode={setShow} setPreviewContent={setPreviewContent} setTitleColor={setTitleColor} />
+      </Sider>
+      <Layout>
+        <Content style={{ overflowY: "scroll", height: windowSize.innerHeight, flex: "none" }}>
+          <OutputArea title={title} content={content} contentRef={contentRef} showCode={showCode} previewContent={previewContent} titleColor={titleColor} />
+        </Content>
       </Layout>
+    </Layout>
   )
 }
 

diff --git a/src/components/Content/OutputArea.jsx b/src/components/Content/OutputArea.jsx
@@ -3,7 +3,7 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { useAutoAnimate } from '@formkit/auto-animate/react'
 import { Space } from 'antd';
-import {FileImageOutlined} from '@ant-design/icons';
+import { FileImageOutlined } from '@ant-design/icons';
 import "./style.css"
 
 class Code extends React.Component {
@@ -22,9 +22,10 @@ class Code extends React.Component {
 
 export default function OutputArea(prop) {
     const [parent, enableAnimations] = useAutoAnimate()
+    const [table, enableTableAnimations] = useAutoAnimate()
     let code = `
 {| class="wikitable" style="width: 25em; color:#72777D; font-size: 90%; border: 1px solid #aaaaaa; margin-bottom: 0.5em; margin-left: 1em; padding: 0.2em; float: right; clear: right; text-align:right;"
-! style="text-align: center; background-color:#3366CC; color:white;" colspan="2" |<span style="font-size:150%;font-weight:bold;"><i>{{PAGENAME}}</i></span>
+! style="text-align: center; background-color:${prop.titleColor}; color:white;" colspan="2" |<span style="font-size:150%;font-weight:bold;"><i>{{PAGENAME}}</i></span>
 |-
 | colspan="2" class="image" | [[File:{{{图片|No Image Available.png}}}|缩略图|居中|link=]]${prop.content.length != 0 ? prop.content.join('') : ""}
 |}
@@ -35,7 +36,7 @@ export default function OutputArea(prop) {
 }}
     `
     return (
-        <div style={{ margin: "24px 30px 0", }} ref={parent}>
+        <div style={{ margin: "24px 50px 0", }} ref={parent}>
             {prop.showCode ? <>
                 <pre><h1>模板页</h1>
                     <Code lang="jsx">
@@ -50,17 +51,20 @@ export default function OutputArea(prop) {
             </> :
                 <><h1>预览</h1>
                     <table className='wikiTable'>
-                        <tbody><tr>
-                            <th style={{ textAlign: "center", backgroundColor: "#3366CC", color: "white" }} colSpan="2">
-                                <span style={{ fontSize: "150%", fontWeight: "bold" }}><i>
-                                    {prop.title ? prop.title : "出现错误：title未定义"}
-                                </i></span>
-                            </th></tr>
+                        <tbody ref={table}>
+                            <tr>
+                                <th style={{ textAlign: "center", backgroundColor:prop.titleColor, color: "white" }} colSpan="2">
+                                    <span style={{ fontSize: "150%", fontWeight: "bold" }}><i>
+                                        {prop.title ? prop.title : "出现错误：title未定义"}
+                                    </i></span>
+                                </th>
+                            </tr>
                             <tr>
                                 <td colSpan="2" className="image"><div className="center"><div className="thumb tnone"><div className="thumbinner" style={{ width: "182px" }}>
-                                    <a title="文件:No Image Available.png"><FileImageOutlined style={{fontSize:"100px"}} /></a>
+                                    <a title="文件:No Image Available.png"><FileImageOutlined style={{ fontSize: "100px" }} /></a>
                                     <div className="thumbcaption"></div></div></div></div>
-                                </td></tr>
+                                </td>
+                            </tr>
                             {prop.previewContent}
                         </tbody>
                     </table>

diff --git a/src/components/Left/InputArea.jsx b/src/components/Left/InputArea.jsx
@@ -1,12 +1,12 @@
-import { Space, Input, Button, Progress, Tooltip } from "antd"
+import { Space, Input, Button, Progress, Tooltip, ColorPicker } from "antd"
 import { useState } from "react"
 import { useAutoAnimate } from '@formkit/auto-animate/react'
 import React from "react"
 import { InfoCircleOutlined } from '@ant-design/icons';
 
 class CenterIt extends React.Component {
     render() {
-        return <Space.Compact style={{ width: '100%', margin: "40px auto", alignItems: "center", justifyContent: "center" }}>
+        return <Space.Compact style={{ width: '100%', margin: "40px auto 10px", alignItems: "center", justifyContent: "center" }}>
             {this.props.children}
         </Space.Compact>
     }
@@ -48,36 +48,37 @@ export default function InputArea(prop) {
         prop.setContentRef(current => [...current,
         `\n|${content} =`])
 
-        prop.setPreviewContent(current=>[...current,<tr>
+        prop.setPreviewContent(current => [...current, <tr>
             <td className="left">{content}
             </td>
             <td className="right">数据将显示于此
             </td>
         </tr>])
         inputSingle()
-        setPercent(current=>current<90?current+2:current)
-        setCount(current=>current+1)
+        setPercent(current => current < 90 ? current + 2 : current)
+        setCount(current => current + 1)
         setComfirmVisibility(true)
     }
 
     return (
         <div ref={parent}>
-            {contentVisibility&&<><Space.Compact style={{ width: '98%', margin: "5px auto", alignItems: "center", justifyContent: "center", padding: "25px" }}><Progress percent={percent} size={["default", 20]} /></Space.Compact>
-            <p style={{ textAlign: "center" }}>在下方填写相关信息</p></>}
+            {contentVisibility && <><Space.Compact style={{ width: '98%', margin: "5px auto", alignItems: "center", justifyContent: "center", padding: "25px" }}><Progress percent={percent} size={["default", 20]} /></Space.Compact>
+                <p style={{ textAlign: "center" }}>在下方填写相关信息</p></>}
             {titleVisibility && <CenterIt>
                 <Input addonBefore="标题" placeholder="请输入Infobox的标题" style={{ width: "70%" }} allowClear suffix={
                     <Tooltip title="也就是模板页的页面标题">
                         <InfoCircleOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
                     </Tooltip>} value={title} onChange={(e) => inputTitle(e.target.value)} onPressEnter={() => { titleSubmitHandler() }} />
                 <Button type="primary" onClick={() => { titleSubmitHandler() }}>提交</Button>
             </CenterIt>}
-            {contentVisibility&&<CenterIt>
-                <Input addonBefore={`第${count}条内容`}placeholder={`请输入第${count}条内容`} style={{ width: "70%" }} disabled={contentAvailability} allowClear
-                    value={singleContent} onChange={(e) => inputSingle(e.target.value)} onPressEnter={() => { contentSubmitHandler(singleContent) /*在这里传入防止一些奇怪问题*/ }}/>
+            {contentVisibility && <><CenterIt>
+                <Input addonBefore={`第${count}条内容`} placeholder={`请输入第${count}条内容`} style={{ width: "70%" }} disabled={contentAvailability} allowClear
+                    value={singleContent} onChange={(e) => inputSingle(e.target.value)} onPressEnter={() => { contentSubmitHandler(singleContent) /*在这里传入防止一些奇怪问题*/ }} />
                 <Button type="primary" onClick={() => { contentSubmitHandler(singleContent) /*在这里传入防止一些奇怪问题*/ }} disabled={contentAvailability}>提交</Button>
-            </CenterIt>}
-            {comfirmVisibility && <Center><Button type="primary" onClick={()=>{prop.setShowCode(true);setContentVisibility(false);setComfirmVisibility(false);setPercent(100)}} block>完成</Button></Center>}
-            <CenterIt><Progress type="circle" percent={percent} /></CenterIt>
+            </CenterIt>
+                <Center><ColorPicker defaultValue="#3366CC" onChange={(e)=>{prop.setTitleColor(e.toHexString())}} showText={(color) => <span>标题颜色：{color.toHexString()}</span>}  disabled={contentAvailability} /></Center></>}
+            {comfirmVisibility && <Center><Button type="primary" onClick={() => { prop.setShowCode(true); setContentVisibility(false); setComfirmVisibility(false); setPercent(100) }} block>完成</Button></Center>}
+            <CenterIt><Progress type="circle" percent={percent} style={{ backgroundColor: "white", borderRadius: "80px" }} /></CenterIt>
         </div>
     )
 }