feat(#311): 系统设置增加编辑器设置，增加打字机模式控制

Author: codexu

messages/en.json

@@ -25,6 +25,12 @@
     "error": "Failed"
   },
   "settings": {
+    "editor": {
+      "title": "Editor Settings",
+      "desc": "Here, you can customize the Markdown editor, creating a writing experience tailored to your needs.",
+      "typewriterMode": "Typewriter Mode",
+      "typewriterModeDesc": "In typewriter mode, the editor will simulate a typewriter effect, helping you better immerse in writing."
+    },
     "uploadStore": {
       "uploadConfirm": "Upload configuration please ensure the sync repository is private, otherwise the data will be leaked!",
       "downloadConfirm": "Download configuration will cover local configuration and restart to take effect!",

messages/ja.json

@@ -23,6 +23,12 @@
     "error": "失敗"
   },
   "settings": {
+    "editor": {
+      "title": "エディタ設定です",
+      "desc": "ここでは、Markdown エディタをカスタマイズして、より適した書き込み体験を提供できます。",
+      "typewriterMode": "打字機モード",
+      "typewriterModeDesc": "打字機モード下、エディタは打字機の効果を模倣し、より深く浸かる書き込み体験を提供します。"
+    },
     "uploadStore": {
       "uploadConfirm": "同期リポジトリをプライベートに設定してください。",
       "downloadConfirm": "ダウンロード配置をローカル配置に上書きし、再起動して有効になります。",

messages/zh.json

@@ -23,6 +23,12 @@
     "error": "失败"
   },
   "settings": {
+    "editor": {
+      "title": "编辑器设置",
+      "desc": "在这里，你可以对 Markdown 编辑器进行自定义配置，打造更适合你的写作方式。",
+      "typewriterMode": "打字机模式",
+      "typewriterModeDesc": "打字机模式下，编辑器会模拟打字机效果，帮助你更好地沉浸在写作中。"
+    },
     "uploadStore": {
       "uploadConfirm": "上传配置请确保同步仓库为私有，否则数据将会泄露！",
       "downloadConfirm": "下载配置将会覆盖本地配置，并且重启生效！",

src/app/core/article/md-editor.tsx

@@ -44,7 +44,10 @@ export function MdEditor() {
     }
   }
 
-  function init() {
+  async function init() {
+    const store = await Store.load('store.json');
+    const typewriterMode = await store.get<boolean>('typewriterMode') || false
+
     let toolbarConfig = [
       { name: 'undo', tipPosition: 's' },
       { name: 'redo', tipPosition: 's' },
@@ -121,6 +124,7 @@ export function MdEditor() {
       cdn: '',
       theme: theme === 'dark' ? 'dark' : 'classic',
       toolbar: toolbarConfig,
+      typewriterMode,
       link: {
         isOpen: false,
         click: (dom: Element) => {

src/app/core/setting/components/setting-base.tsx

@@ -14,7 +14,7 @@ export function SettingType(
   </div>
 }
 export function SettingRow({border = false, children, className}: { border?: boolean, children: React.ReactNode, className?: string}) {
-  return <div className={`${border ? "border-b py-4" : ""} flex justify-between text-sm items-center ${className}`}>
+  return <div className={`${border ? "border-b py-4" : ""} flex justify-between text-sm items-start lg:items-center ${className}`}>
     {children}
   </div>
 }

src/app/core/setting/config.tsx

@@ -40,6 +40,10 @@ const baseConfig = [
     icon: <FolderOpen className="size-4 lg:size-6" />,
     anchor: 'file',
   },
+  {
+    icon: <UserRoundCog className="size-4 lg:size-6" />,
+    anchor: 'editor',
+  },
   {
     icon: <ScanText className="size-4 lg:size-6" />,
     anchor: 'ocr',

src/app/core/setting/dev/set-config.tsx

@@ -41,7 +41,7 @@ export default function SetConfig() {
       }
     }
     return (
-    <SettingRow border className="gap-4 flex-col lg:flex-row !items-start lg:items-center">
+    <SettingRow border className="gap-4 flex-col lg:flex-row items-start lg:items-center">
       <span>配置文件导入与导出，导入配置文件将覆盖当前配置，并且重启后生效。</span>
       <div className="flex gap-2">
         <Button onClick={handleImport}><HardDriveDownload />导入</Button>

src/app/core/setting/dev/setting-dev.tsx

@@ -70,15 +70,15 @@ export function SettingDev({id, icon}: {id: string, icon?: React.ReactNode}) {
 
   return (
     <SettingType id={id} icon={icon} title={t('settings.dev.title')}>
-      <SettingRow border className="gap-4 flex-col lg:flex-row !items-start lg:items-center">
+      <SettingRow border className="gap-4 flex-col lg:flex-row items-start lg:items-center">
         <span>{t('settings.dev.proxy')}</span>
         <Input className="max-w-[400px]" placeholder={t('settings.dev.proxyPlaceholder')} value={proxy} onChange={proxyChangeHandler} />
       </SettingRow>
-      <SettingRow border className="gap-4 flex-col lg:flex-row !items-start lg:items-center">
+      <SettingRow border className="gap-4 flex-col lg:flex-row items-start lg:items-center">
         <span>清理数据信息，包括系统配置信息、数据库（包含记录）。</span>
         <Button variant={"destructive"} onClick={handleClearData}>清理</Button>
       </SettingRow>
-      <SettingRow border className="gap-4 flex-col lg:flex-row !items-start lg:items-center">
+      <SettingRow border className="gap-4 flex-col lg:flex-row items-start lg:items-center">
         <span>清理文件，包括图片、文章。</span>
         <Button variant={"destructive"} onClick={handleClearFile}>清理</Button>
       </SettingRow>

src/app/core/setting/editor/page.tsx

@@ -0,0 +1,12 @@
+'use client';
+import { UserRoundCog } from "lucide-react"
+import { SettingType } from "../components/setting-base";
+import { useTranslations } from 'next-intl';
+import TypewriterMode from './typewriter-mode';
+
+export default function EditorSettingPage() {
+  const t = useTranslations('settings.editor');
+  return <SettingType id="editorSetting" icon={<UserRoundCog />} title={t('title')}>
+    <TypewriterMode />
+  </SettingType>
+}

src/app/core/setting/editor/typewriter-mode.tsx

@@ -0,0 +1,29 @@
+import { Switch } from "@/components/ui/switch";
+import { SettingPanel } from "../components/setting-base";
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from "react";
+import { Store } from "@tauri-apps/plugin-store";
+
+export default function TypewriterMode() {
+  const t = useTranslations('settings.editor');
+  const [state, setState] = useState(false)
+
+  useEffect(() => {
+    async function init() {
+      const store = await Store.load('store.json');
+      const typewriterMode = await store.get<boolean>('typewriterMode') || false
+      setState(typewriterMode)
+    }
+    init()
+  }, [])
+
+  async function setStateHandler(state: boolean) {
+    const store = await Store.load('store.json');
+    await store.set('typewriterMode', state)
+    setState(state)
+  }
+
+  return <SettingPanel title={t('typewriterMode')} desc={t('typewriterModeDesc')}>
+    <Switch checked={state} onCheckedChange={setStateHandler}/>
+  </SettingPanel>
+}