style: modify theme style.

2026-01-10 15:28:47 +08:00 · 2022-09-05 17:27:50 +08:00
parent 8d33e4dab2
commit 8720638f9d
12 changed files with 86 additions and 95 deletions
--- a/README.md
+++ b/README.md
@@ -2,10 +2,12 @@
  <h1 align="center">微信公众号 Markdown 编辑器</h1>
 </div>

-![微信公众号 Markdown 编辑器](https://user-images.githubusercontent.com/1680273/188264183-a6b8cb6a-92e1-4a73-afc5-4f0234b26ed3.png)
+[![微信公众号 Markdown 编辑器](https://user-images.githubusercontent.com/1680273/188264183-a6b8cb6a-92e1-4a73-afc5-4f0234b26ed3.png)](https://jaywcjlove.github.io/wxmp)

 微信公众号文章 Markdown 在线编辑器，使用 markdown 语法创建一篇简介美观大方的微信公众号图文。由于发版本麻烦，和一些功能无法扩展停滞开发了，未来不再开发 Chrome 的插件(暂存在 chrome 分支)，通过 web 版本定制更丰富的功能。

+[![Markdown 编辑器桌面应用](https://user-images.githubusercontent.com/1680273/188407235-ead43d61-2ef8-416a-926f-396d8b824b33.png)](https://jaywcjlove.github.io/wxmp)
+
 ## 功能特性

 开发计划和一些功能介绍，有需求可以在 issue 中提，使得工具变得更加完善。下面示例用于 web 应用中效果展示。
@@ -19,7 +21,7 @@
 - [ ] 支持色盘取色，快速替换文章整体色调
 - [x] 支持 URL 参数加载 Markdown 内容。
 - [x] 支持 URL 参数选择预览主题。
- [x] 使用 electron 生成桌面应用。
+- [x] CI 自动生成 Electron 桌面应用。

 ### 支持代码块样式

@@ -126,7 +128,7 @@ Markdown URL 地址: https://raw.githubusercontent.com/jaywcjlove/c-tutorial/mas

 ## 主题定制

-在目录 `src/themes` 中存放默认主题，在 `src/store/context.tsx` 中配置主题，主题使用 css 定义样式，不支持复杂的选择器。提供在线主题编辑器，欢迎修改并 PR 进仓库供大家使用。
+在目录 `website/src/themes` 中存放默认主题，在 `website/src/store/context.tsx` 中配置主题，主题使用 `css` 定义样式，不支持复杂的选择器。提供在线主题编辑器，欢迎修改并 `PR` 进仓库供大家使用。

 ```css
 /* 1~6 标题样式定义 */
--- a/electron/main/src/app.ts
+++ b/electron/main/src/app.ts
@@ -14,15 +14,16 @@ export class App {
  async createWindow(options: Options = {}, loadURL?: string) {
    await app.whenReady();
    const opts: Options = {
-      titleBarStyle: 'hidden', // 无标题栏
-      frame: false, // 创建无边窗口
-      width: 800,
+      // titleBarStyle: 'hiddenInset', // 无标题栏
+      // frame: false, // 创建无边窗口
+      width: 850,
      height: 600,
      minWidth: 850,
+      minHeight: 600,
      center: true,
-      maximizable: true,
-      minimizable: true,
-      resizable: true,
+      // maximizable: true,
+      // minimizable: true,
+      // resizable: true,
      webPreferences: {
        // 多线程
        nodeIntegrationInWorker: true,
--- a/electron/preload/src/index.ts
+++ b/electron/preload/src/index.ts
@@ -1,18 +1,4 @@
-const styleStr = `.siderbar {
-  -webkit-app-region: drag;
-}
-.siderbar header h1 a, github-corners {
-  display: none;
-}
-article.content:before {
-  -webkit-app-region: drag;
-  position: absolute;
-  content: ' ';
-  display: block;
-  height: 41px;
-  width: 100%;
-  z-index: -1;
-}`;
+const styleStr = `.header .logo {}`;

 document.addEventListener('DOMContentLoaded', () => {
  const head = document.querySelector('head');
--- a/website/src/components/Layout.tsx
+++ b/website/src/components/Layout.tsx
@@ -8,14 +8,22 @@ import { ReactComponent as Loading } from '../assets/tail-spin.svg';
 import { Context } from '../store/context';

 const Warpper = styled.div``;
+const HeaderPlace = styled.div`
+  position: relative;
+  height: 2.8rem;
+`;

 const Header = styled.header`
  -webkit-app-region: drag;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
+  background: var(--color-canvas-default);
  border-bottom: 1px solid var(--color-border-muted);
-  padding: 0.5rem 0.6rem 0.5rem 1rem;
+  padding: 0.5rem 0.6rem 0.5rem 0.8rem;
+  position: fixed;
+  width: 100%;
+  z-index: 9;
 `;

 const Article = styled.article`
@@ -82,25 +90,27 @@ export function Layout() {
  const { isLoading } = useContext(Context);
  return (
    <Warpper className="wmde-markdown-color">
-      <Header>
-        <Article>
-          <Logo width={28} height={28} />
-          <Title>
-            微信公众号排版编辑器
-            <sup> v{VERSION} </sup>
-          </Title>
-          {isLoading && <Loading />}
-        </Article>
-        <Section>
-          <NavLink to="/">首页</NavLink>
-          <NavLink to="/editor/theme">编辑主题</NavLink>
-          <NavLink to="/doc">文档</NavLink>
-          <dark-mode permanent dark="Dark" light="Light" />
-          <a href="https://github.com/jaywcjlove/wxmp" target="__blank">
-            <GithubIcon width={23} height={23} />
-          </a>
-        </Section>
-      </Header>
+      <HeaderPlace>
+        <Header className="header">
+          <Article className="logo">
+            <Logo width={28} height={28} />
+            <Title>
+              微信公众号排版编辑器
+              <sup> v{VERSION} </sup>
+            </Title>
+            {isLoading && <Loading />}
+          </Article>
+          <Section>
+            <NavLink to="/">首页</NavLink>
+            <NavLink to="/editor/theme">编辑主题</NavLink>
+            <NavLink to="/doc">文档</NavLink>
+            <dark-mode permanent dark="Dark" light="Light" />
+            <a href="https://github.com/jaywcjlove/wxmp" target="__blank">
+              <GithubIcon width={23} height={23} />
+            </a>
+          </Section>
+        </Header>
+      </HeaderPlace>
      <Outlet />
    </Warpper>
  );
--- a/website/src/pages/home/Preview.tsx
+++ b/website/src/pages/home/Preview.tsx
@@ -5,11 +5,12 @@ import { Context } from '../../store/context';

 import { markdownToHTML } from '../../utils/markdownToHTML';

-const Warpper = styled.div`
+export const Warpper = styled.div`
  width: 375px;
  padding: 20px;
  box-shadow: 0 0 60px rgb(0 0 0 / 10%);
  min-height: 100%;
+  font-size: 17px;
 `;

 export const Preview = (props: MarkdownPreviewProps) => {
--- a/website/src/pages/home/index.tsx
+++ b/website/src/pages/home/index.tsx
@@ -1,37 +1,30 @@
 import MarkdownEditor, { getCommands } from '@uiw/react-markdown-editor';
 import { useContext } from 'react';
 import { EditorView } from '@codemirror/view';
-import styled from 'styled-components';
 import { Preview } from './Preview';
 import { copy } from '../../commands/copy';
 import { theme as themeCommand, previeTheme } from '../../commands/theme';
 import { cssCommand } from '../../commands/css';
 import { Context, themes } from '../../store/context';

-export const Warpper = styled.div`
-  height: calc(100vh - 2.9rem);
-`;
-
 export const HomePage = () => {
  const commands = [...getCommands(), themeCommand];
  const { theme, markdown, isLoading, setMarkdown } = useContext(Context);
  const themeValue = themes[theme].value;
  const handleChange = (value: string) => setMarkdown(value);
  return (
-    <Warpper>
-      <MarkdownEditor
-        value={markdown}
-        toolbars={commands}
-        theme={themeValue}
-        readOnly={isLoading}
-        toolbarsMode={[cssCommand, previeTheme, copy, 'fullscreen', 'preview']}
-        extensions={[EditorView.lineWrapping]}
-        renderPreview={Preview}
-        previewWidth="420px"
-        onChange={handleChange}
-        visible={true}
-        height="calc(100vh - 4.70rem)"
-      />
-    </Warpper>
+    <MarkdownEditor
+      value={markdown}
+      toolbars={commands}
+      theme={themeValue}
+      readOnly={isLoading}
+      toolbarsMode={[cssCommand, previeTheme, copy, 'fullscreen', 'preview']}
+      extensions={[EditorView.lineWrapping]}
+      renderPreview={Preview}
+      previewWidth="420px"
+      onChange={handleChange}
+      visible={true}
+      height="calc(100vh - 4.6rem)"
+    />
  );
 };
--- a/website/src/pages/theme/Preview.tsx
+++ b/website/src/pages/theme/Preview.tsx
@@ -1,16 +1,9 @@
 import { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
-import styled from 'styled-components';
 import { useContext } from 'react';
 import { Context } from '../../store/context';

 import { markdownToHTML } from '../../utils/markdownToHTML';
-
-const Warpper = styled.div`
-  width: 375px;
-  padding: 20px;
-  box-shadow: 0 0 60px rgb(0 0 0 / 10%);
-  min-height: 100%;
-`;
+import { Warpper } from '../home/Preview';

 export const Preview = (props: MarkdownPreviewProps) => {
  const { css, markdown } = useContext(Context);
--- a/website/src/pages/theme/editor.tsx
+++ b/website/src/pages/theme/editor.tsx
@@ -8,7 +8,6 @@ import { previousCommand } from '../../commands/css';
 import { themeTitle } from '../../commands/title';
 import { theme as themeCommand, previeTheme } from '../../commands/theme';
 import { Context, themes } from '../../store/context';
-import { Warpper } from '../home';

 export const EditorPage = () => {
  const commands = [themeTitle, themeCommand, previousCommand];
@@ -17,20 +16,18 @@ export const EditorPage = () => {
  const value = themes[theme].value;
  const handleChange = (value: string) => setCss(value);
  return (
-    <Warpper>
-      <MarkdownEditor
-        value={css}
-        theme={value}
-        readOnly={isLoading}
-        toolbars={commands}
-        toolbarsMode={toolbarsMode}
-        reExtensions={[EditorView.lineWrapping, cssLang()]}
-        renderPreview={Preview}
-        previewWidth="420px"
-        onChange={handleChange}
-        visible={true}
-        height="calc(100vh - 4.92rem)"
-      />
-    </Warpper>
+    <MarkdownEditor
+      value={css}
+      theme={value}
+      readOnly={isLoading}
+      toolbars={commands}
+      toolbarsMode={toolbarsMode}
+      reExtensions={[EditorView.lineWrapping, cssLang()]}
+      renderPreview={Preview}
+      previewWidth="420px"
+      onChange={handleChange}
+      visible={true}
+      height="calc(100vh - 4.6rem)"
+    />
  );
 };
--- a/website/src/themes/base.md.css
+++ b/website/src/themes/base.md.css
@@ -33,6 +33,7 @@ h4 {
 p {
  color: initial;
  font-size: 0.85em;
+  line-height: 1.5em;
 }

 ul {
@@ -46,12 +47,14 @@ ol {
 li {
  margin: 0;
  font-size: 0.85em;
+  line-height: 1.5em;
 }

 blockquote {
  font-style: normal;
  border-left: none;
  margin: 1em 0;
+  line-height: 1.5em;
 }

 pre {
--- a/website/src/themes/default.md.css
+++ b/website/src/themes/default.md.css
@@ -36,6 +36,7 @@ h2 {

 p {
  font-size: 0.85em;
+  line-height: 1.5em;
 }

 h3 {
@@ -64,11 +65,11 @@ li {
  line-height: 1.5em;
  color: rgb(30 41 59);
  font-size: 0.85em;
+  line-height: 1.5em;
 }

 blockquote {
  text-align: left;
-  line-height: 1.75;
  font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
  font-size: 0.85em;
@@ -78,6 +79,7 @@ blockquote {
  border-radius: 4px;
  background: rgba(27, 31, 35, 0.05);
  margin: 1rem 0;
+  line-height: 1.5em;
 }

 pre {
@@ -143,7 +145,7 @@ th {
  text-align: left;
  line-height: 1;
  white-space: initial;
-  color: #009874;
+  color: #333;
  background: rgba(27, 31, 35, 0.05);
  padding: 0.1em 0.3em;
  border-radius: 0.3em;
--- a/website/src/themes/simple.md.css
+++ b/website/src/themes/simple.md.css
@@ -36,6 +36,7 @@ h2 {

 p {
  font-size: 0.85em;
+  line-height: 1.5em;
 }

 h3 {
@@ -64,11 +65,11 @@ li {
  line-height: 1.5em;
  color: rgb(30 41 59);
  font-size: 0.85em;
+  line-height: 1.5em;
 }

 blockquote {
  text-align: left;
-  line-height: 1.75;
  font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
  font-size: 0.85em;
@@ -78,6 +79,7 @@ blockquote {
  border-radius: 4px;
  background: rgba(27, 31, 35, 0.05);
  margin: 1rem 0;
+  line-height: 1.5em;
 }

 pre {
--- a/website/src/themes/underscore.md.css
+++ b/website/src/themes/underscore.md.css
@@ -33,6 +33,7 @@ h2 {

 p {
  font-size: 0.85em;
+  line-height: 1.5em;
 }

 h3 {
@@ -65,7 +66,7 @@ li {

 blockquote {
  text-align: left;
-  line-height: 1.75;
+  line-height: 1.5em;
  font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
  font-size: 0.85em;
@@ -140,12 +141,12 @@ th {
  text-align: left;
  line-height: 1;
  white-space: initial;
-  color: #ffb11b;
+  color: #333;
  background: rgba(27, 31, 35, 0.05);
  padding: 0.1em 0.3em;
  border-radius: 0.3em;
  font-weight: bold;
-  font-size: 1em;
+  font-size: 0.85em;
  top: -0.1em;
  position: relative;
 }