diff --git a/src/components/Title/index.tsx b/src/components/Title/index.tsx index 0ef5c2a..7ada2c5 100644 --- a/src/components/Title/index.tsx +++ b/src/components/Title/index.tsx @@ -13,8 +13,8 @@ interface Props { export default ({ value, children, className }: Props) => { return ( <> - -
+ +

{value}

{children} diff --git a/src/layout/DefaultLayout.tsx b/src/layout/DefaultLayout.tsx index d981faf..e3f52d7 100644 --- a/src/layout/DefaultLayout.tsx +++ b/src/layout/DefaultLayout.tsx @@ -21,7 +21,7 @@ const DefaultLayout: React.FC<{ children: ReactNode }> = ({ children }) => { {/* */}
-
+
{children}
diff --git a/src/pages/Create/components/Editor/editor.scss b/src/pages/Create/components/Editor/editor.scss new file mode 100644 index 0000000..0d37850 --- /dev/null +++ b/src/pages/Create/components/Editor/editor.scss @@ -0,0 +1,204 @@ +.markdown-body { + color: #595959; + font-size: 15px; + font-family: -apple-system, system-ui, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; + // background-image: linear-gradient(90deg, rgba(60, 10, 30, 0.04) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(60, 10, 30, 0.04) 3%, rgba(0, 0, 0, 0) 3%); + // background-size: 20px 20px; + // background-position: center center; +} + +/* 段落 */ +.markdown-body p { + color: #595959; + font-size: 15px; + line-height: 2; + font-weight: 400; +} + +/* 段落间距控制 */ +.markdown-body p+p { + margin-top: 16px; +} + +/* 标题的通用设置 */ +.markdown-body h1, +.markdown-body h2, +.markdown-body h3, +.markdown-body h4, +.markdown-body h5, +.markdown-body h6 { + padding: 30px 0; + margin: 0; + color: #135ce0; +} + +/* 一级标题 */ +.markdown-body h1 { + position: relative; + text-align: center; + font-size: 32px; + margin: 50px 0; + padding: 0; +} + +/* 一级标题前缀，用来放背景图，支持透明度控制 */ +// .markdown-body h1:before { +// position: absolute; +// content: ""; +// top: -10px; +// left: 50%; +// width: 32px; +// height: 32px; +// transform: translateX(-50%); +// background-size: 100% 100%; +// opacity: .36; +// background-repeat: no-repeat; +// background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABfVBMVEX///8Ad/8AgP8AgP8AgP8Aff8AgP8Af/8AgP8AVf8Af/8Af/8AgP8AgP8Af/8Afv8AAP8Afv8Afv8Aef8AgP8AdP8Afv8AgP8AgP8Acf8Ae/8AgP8Af/8AgP8Af/8Af/8AfP8Afv8AgP8Af/8Af/8Afv8Afv8AgP8Afv8AgP8Af/8Af/8AgP8AgP8Afv8AgP8Af/8AgP8AgP8AgP8Ae/8Afv8Af/8AgP8Af/8AgP8Af/8Af/8Aff8Af/8Abf8AgP8Af/8AgP8Af/8Af/8Afv8AgP8AgP8Afv8Afv8AgP8Af/8Aff8AgP8Afv8AgP8Aff8AgP8AfP8AgP8Ae/8AgP8Af/8AgP8AgP8AgP8Afv8AgP8AgP8AgP8Afv8AgP8AgP8AgP8AgP8AgP8Af/8AgP8Af/8Af/8Aev8Af/8AgP8Aff8Afv8AgP8AgP8AgP8Af/8AgP8Af/8Af/8AgP8Afv8AgP8AgP8AgP8AgP8Af/8AeP8Af/8Af/8Af//////rzEHnAAAAfXRSTlMAD7CCAivatxIDx5EMrP19AXdLEwgLR+6iCR/M0yLRzyFF7JupSXn8cw6v60Q0QeqzKtgeG237HMne850/6Qeq7QaZ+WdydHtj+OM3qENCMRYl1B3K2U7wnlWE/mhlirjkODa9FN/BF7/iNV/2kASNZpX1Wlf03C4stRGxgUPclqoAAAABYktHRACIBR1IAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEaBzgZ4yeM3AAAAT9JREFUOMvNUldbwkAQvCAqsSBoABE7asSOBRUVVBQNNuy9996789+9cMFAMHnVebmdm+/bmdtbQv4dOFOW2UjPzgFyLfo6nweKfIMOBYWwFtmMPGz2Yj2pJI0JDq3udJW6VVbmKa9I192VQFV1ktXUAl5NB0cd4KpnORqsEO2ZIRpF9gJfE9Dckqq0KuZt7UAH5+8EPF3spjsRpCeQNO/tA/qDwIDA+OCQbBoKA8NOdjMySgcZGVM6jwcgRuUiSs0nlPFNSrEpJfU0jTLD6llqbvKxei7OzvkFNQohi0vAsj81+MoqsCaoPOQFgus/1LyxichW+hS2JWCHZ7VlF9jb187pIAYcHiViHAMnp5mTjJ8B5xeEXF4B1ze/fTh/C0h398DDI9HB07O8ci+vRBdvdGnfP4gBuM8vw7X/G3wDmFhFZEdxzjMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMDEtMjZUMDc6NTY6MjUrMDE6MDA67pVWAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTAxLTI2VDA3OjU2OjI1KzAxOjAwS7Mt6gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAWdEVYdFRpdGxlAGp1ZWppbl9sb2dvIGNvcHlxapmKAAAAV3pUWHRSYXcgcHJvZmlsZSB0eXBlIGlwdGMAAHic4/IMCHFWKCjKT8vMSeVSAAMjCy5jCxMjE0uTFAMTIESANMNkAyOzVCDL2NTIxMzEHMQHy4BIoEouAOoXEXTyQjWVAAAAAElFTkSuQmCC); +// } + +/* 二级标题 */ +.markdown-body h2 { + position: relative; + font-size: 20px; + border-left: 4px solid; + padding: 0 0 0 10px; + margin: 30px 0; +} + +/* 三级标题 */ +.markdown-body h3 { + font-size: 16px; +} + +/* 无序列表 */ +.markdown-body ul { + list-style: disc outside; + margin-left: 2em; + margin-top: 1em; +} + +/* 无序列表内容 */ +.markdown-body li { + line-height: 2; + color: #595959; + margin-bottom: 0; + list-style: inherit; +} + +.markdown-body img { + max-width: 100%; +} + +/* 已加载图片 */ +.markdown-body img.loaded { + margin: 0 auto; + display: block; +} + +/* 引用 */ +.markdown-body blockquote { + background: #fff9f9; + margin: 2em 0; + padding: 2px 20px; + border-left: 4px solid #b2aec5; +} + +/* 引用文字 */ +.markdown-body blockquote p { + color: #666; + line-height: 2; +} + +/* 链接 */ +.markdown-body a { + color: #036aca; + border-bottom: 1px solid rgba(3, 106, 202, .8); + font-weight: 400; + text-decoration: none; +} + +/* 加粗 */ +.markdown-body strong { + color: #036aca; +} + +/* 加粗斜体 */ +.markdown-body em strong { + color: #036aca; +} + +/* 分隔线 */ +.markdown-body hr { + border-top: 1px solid #135ce0; +} + +/* 代码 */ +.markdown-body pre { + overflow: auto; +} + +.markdown-body pre, +.markdown-body code { + overflow: auto; + position: relative; + line-height: 1.75; + font-family: Menlo, Monaco, Consolas, Courier New, monospace; +} + +.markdown-body pre>code { + font-size: 12px; + padding: 15px 12px; + margin: 0; + word-break: normal; + display: block; + overflow-x: auto; + color: #DCDCDC; + background: #1E1E1E; + border-radius: 5px; +} + +.markdown-body code { + word-break: break-word; + border-radius: 2px; + overflow-x: auto; + background-color: #fff5f5; + color: #ff502c; + font-size: .87em; + padding: .065em .4em; +} + +/* 表格 */ +.markdown-body table { + border-collapse: collapse; + margin: 1rem 0; + overflow-x: auto; +} + +.markdown-body table th, +.markdown-body table td { + border: 1px solid #dfe2e5; + padding: .6em 1em; +} + +.markdown-body table tr { + border-top: 1px solid #dfe2e5; +} + +.markdown-body table tr:nth-child(2n) { + background-color: #f6f8fa; +} + +/* + From: icewolf-sec (御坂19008号) + Description: 新增HTML5 键盘文字标签样式 + */ +.markdown-body kbd { + color: white; + background-color: #135ce0; + border: 1px solid #135ce0; + border-radius: 5px; + padding: 2px; + font-weight: bold; + margin: auto 5px auto; + font-size: small; +} \ No newline at end of file diff --git a/src/pages/Create/components/Editor/index.scss b/src/pages/Create/components/Editor/index.scss index 18b5737..432d4c6 100644 --- a/src/pages/Create/components/Editor/index.scss +++ b/src/pages/Create/components/Editor/index.scss @@ -1,207 +1,10 @@ -.markdown-body { - color: #595959; - font-size: 15px; - font-family: -apple-system, system-ui, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; - background-image: linear-gradient(90deg, rgba(60, 10, 30, 0.04) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(60, 10, 30, 0.04) 3%, rgba(0, 0, 0, 0) 3%); - background-size: 20px 20px; - background-position: center center; -} - -/* 段落 */ -.markdown-body p { - color: #595959; - font-size: 15px; - line-height: 2; - font-weight: 400; -} - -/* 段落间距控制 */ -.markdown-body p+p { - margin-top: 16px; -} - -/* 标题的通用设置 */ -.markdown-body h1, -.markdown-body h2, -.markdown-body h3, -.markdown-body h4, -.markdown-body h5, -.markdown-body h6 { - padding: 30px 0; - margin: 0; - color: #135ce0; -} - -/* 一级标题 */ -.markdown-body h1 { - position: relative; - text-align: center; - font-size: 22px; - margin: 50px 0; -} - -/* 一级标题前缀，用来放背景图，支持透明度控制 */ -.markdown-body h1:before { - position: absolute; - content: ""; - top: -10px; - left: 50%; - width: 32px; - height: 32px; - transform: translateX(-50%); - background-size: 100% 100%; - opacity: .36; - background-repeat: no-repeat; - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABfVBMVEX///8Ad/8AgP8AgP8AgP8Aff8AgP8Af/8AgP8AVf8Af/8Af/8AgP8AgP8Af/8Afv8AAP8Afv8Afv8Aef8AgP8AdP8Afv8AgP8AgP8Acf8Ae/8AgP8Af/8AgP8Af/8Af/8AfP8Afv8AgP8Af/8Af/8Afv8Afv8AgP8Afv8AgP8Af/8Af/8AgP8AgP8Afv8AgP8Af/8AgP8AgP8AgP8Ae/8Afv8Af/8AgP8Af/8AgP8Af/8Af/8Aff8Af/8Abf8AgP8Af/8AgP8Af/8Af/8Afv8AgP8AgP8Afv8Afv8AgP8Af/8Aff8AgP8Afv8AgP8Aff8AgP8AfP8AgP8Ae/8AgP8Af/8AgP8AgP8AgP8Afv8AgP8AgP8AgP8Afv8AgP8AgP8AgP8AgP8AgP8Af/8AgP8Af/8Af/8Aev8Af/8AgP8Aff8Afv8AgP8AgP8AgP8Af/8AgP8Af/8Af/8AgP8Afv8AgP8AgP8AgP8AgP8Af/8AeP8Af/8Af/8Af//////rzEHnAAAAfXRSTlMAD7CCAivatxIDx5EMrP19AXdLEwgLR+6iCR/M0yLRzyFF7JupSXn8cw6v60Q0QeqzKtgeG237HMne850/6Qeq7QaZ+WdydHtj+OM3qENCMRYl1B3K2U7wnlWE/mhlirjkODa9FN/BF7/iNV/2kASNZpX1Wlf03C4stRGxgUPclqoAAAABYktHRACIBR1IAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEaBzgZ4yeM3AAAAT9JREFUOMvNUldbwkAQvCAqsSBoABE7asSOBRUVVBQNNuy9996789+9cMFAMHnVebmdm+/bmdtbQv4dOFOW2UjPzgFyLfo6nweKfIMOBYWwFtmMPGz2Yj2pJI0JDq3udJW6VVbmKa9I192VQFV1ktXUAl5NB0cd4KpnORqsEO2ZIRpF9gJfE9Dckqq0KuZt7UAH5+8EPF3spjsRpCeQNO/tA/qDwIDA+OCQbBoKA8NOdjMySgcZGVM6jwcgRuUiSs0nlPFNSrEpJfU0jTLD6llqbvKxei7OzvkFNQohi0vAsj81+MoqsCaoPOQFgus/1LyxichW+hS2JWCHZ7VlF9jb187pIAYcHiViHAMnp5mTjJ8B5xeEXF4B1ze/fTh/C0h398DDI9HB07O8ci+vRBdvdGnfP4gBuM8vw7X/G3wDmFhFZEdxzjMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMDEtMjZUMDc6NTY6MjUrMDE6MDA67pVWAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTAxLTI2VDA3OjU2OjI1KzAxOjAwS7Mt6gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAWdEVYdFRpdGxlAGp1ZWppbl9sb2dvIGNvcHlxapmKAAAAV3pUWHRSYXcgcHJvZmlsZSB0eXBlIGlwdGMAAHic4/IMCHFWKCjKT8vMSeVSAAMjCy5jCxMjE0uTFAMTIESANMNkAyOzVCDL2NTIxMzEHMQHy4BIoEouAOoXEXTyQjWVAAAAAElFTkSuQmCC); -} - -/* 二级标题 */ -.markdown-body h2 { - position: relative; - font-size: 20px; - border-left: 4px solid; - padding: 0 0 0 10px; - margin: 30px 0; -} - -/* 三级标题 */ -.markdown-body h3 { - font-size: 16px; -} - -/* 无序列表 */ -.markdown-body ul { - list-style: disc outside; - margin-left: 2em; - margin-top: 1em; -} - -/* 无序列表内容 */ -.markdown-body li { - line-height: 2; - color: #595959; - margin-bottom: 0; - list-style: inherit; -} - -.markdown-body img { - max-width: 100%; -} - -/* 已加载图片 */ -.markdown-body img.loaded { - margin: 0 auto; - display: block; -} - -/* 引用 */ -.markdown-body blockquote { - background: #fff9f9; - margin: 2em 0; - padding: 2px 20px; - border-left: 4px solid #b2aec5; -} - -/* 引用文字 */ -.markdown-body blockquote p { - color: #666; - line-height: 2; -} - -/* 链接 */ -.markdown-body a { - color: #036aca; - border-bottom: 1px solid rgba(3, 106, 202, .8); - font-weight: 400; - text-decoration: none; -} - -/* 加粗 */ -.markdown-body strong { - color: #036aca; -} - -/* 加粗斜体 */ -.markdown-body em strong { - color: #036aca; -} - -/* 分隔线 */ -.markdown-body hr { - border-top: 1px solid #135ce0; -} - -/* 代码 */ -.markdown-body pre { - overflow: auto; -} - -.markdown-body pre, -.markdown-body code { - overflow: auto; - position: relative; - line-height: 1.75; - font-family: Menlo, Monaco, Consolas, Courier New, monospace; -} - -.markdown-body pre>code { - font-size: 12px; - padding: 15px 12px; - margin: 0; - word-break: normal; - display: block; - overflow-x: auto; - color: #DCDCDC; - background: #1E1E1E; - border-radius: 5px; -} - -.markdown-body code { - word-break: break-word; - border-radius: 2px; - overflow-x: auto; - background-color: #fff5f5; - color: #ff502c; - font-size: .87em; - padding: .065em .4em; -} - -/* 表格 */ -.markdown-body table { - border-collapse: collapse; - margin: 1rem 0; - overflow-x: auto; -} - -.markdown-body table th, -.markdown-body table td { - border: 1px solid #dfe2e5; - padding: .6em 1em; -} - -.markdown-body table tr { - border-top: 1px solid #dfe2e5; -} - -.markdown-body table tr:nth-child(2n) { - background-color: #f6f8fa; -} - -/* - From: icewolf-sec (御坂19008号) - Description: 新增HTML5 键盘文字标签样式 - */ -.markdown-body kbd { - color: white; - background-color: #135ce0; - border: 1px solid #135ce0; - border-radius: 5px; - padding: 2px; - font-weight: bold; - margin: auto 5px auto; - font-size: small; -} +@import url(./editor.scss); .bytemd { - height: 600px; + height: 700px; + border: none; + + .bytemd-toolbar { + background-color: transparent; + } } \ No newline at end of file diff --git a/src/pages/Create/index.tsx b/src/pages/Create/index.tsx index d4bd09b..5546efd 100644 --- a/src/pages/Create/index.tsx +++ b/src/pages/Create/index.tsx @@ -153,13 +153,13 @@ const CreatePage = () => { <> <div className='flex space-x-4'> - <Dropdown.Button menu={{ items }}>创作神器</Dropdown.Button> + <Dropdown.Button size='large' menu={{ items }}>创作神器</Dropdown.Button> - <Button className='w-full flex justify-between' onClick={saveBtn} > + <Button size='large' className='w-full flex justify-between' onClick={saveBtn} > <BiSave className='text-base' /> 保存 </Button> - <Button type="primary" className='w-full flex justify-between' onClick={nextBtn} > + <Button size='large' type="primary" className='w-full flex justify-between' onClick={nextBtn} > <GrFormNext className='text-2xl' /> 下一步 </Button> </div>