From e612fbb0ff641a89d69957860b78a0286c7e8e47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E9=98=B3?= <3311118881@qq.com>
Date: Wed, 25 Sep 2024 19:01:56 +0800
Subject: [PATCH] =?UTF-8?q?AI=E5=88=9B=E4=BD=9C=E5=9F=BA=E6=9C=AC=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Create/components/VditorMD/index.scss     |  12 +-
 .../Create/components/VditorMD/index.tsx      | 174 +++++++++++++++++-
 src/pages/Create/index.tsx                    |  21 ++-
 src/pages/Work/index.tsx                      |   2 +-
 4 files changed, 200 insertions(+), 9 deletions(-)

diff --git a/src/pages/Create/components/VditorMD/index.scss b/src/pages/Create/components/VditorMD/index.scss
index 6a6ae4f..1ef0590 100644
--- a/src/pages/Create/components/VditorMD/index.scss
+++ b/src/pages/Create/components/VditorMD/index.scss
@@ -5,12 +5,22 @@
         padding-left: 0 !important;
         background-color: transparent;
         border-bottom: none;
+
+        .vditor-tooltipped__ai {
+            padding: 0;
+
+            svg {
+                width: 25px;
+                height: 25px;
+                margin-left: 20px;
+            }
+        }
     }
 
     .vditor-reset {
         background-color: transparent !important;
 
-        .vditor-ir__marker--heading{
+        .vditor-ir__marker--heading {
             color: #727cf5;
         }
     }
diff --git a/src/pages/Create/components/VditorMD/index.tsx b/src/pages/Create/components/VditorMD/index.tsx
index a1f3e60..e1ed942 100644
--- a/src/pages/Create/components/VditorMD/index.tsx
+++ b/src/pages/Create/components/VditorMD/index.tsx
@@ -3,6 +3,174 @@ import Vditor from "vditor";
 import "vditor/dist/index.css";
 import "./index.scss"
 
+const toolbar = [
+    {
+        hotkey: "⌘H",
+        icon:
+            '<svg><use xlink:href="#vditor-icon-headings"></use></svg>',
+        name: "headings",
+        tipPosition: "ne",
+    },
+    {
+        hotkey: "⌘B",
+        icon: '<svg><use xlink:href="#vditor-icon-bold"></use></svg>',
+        name: "bold",
+        prefix: "**",
+        suffix: "**",
+        tipPosition: "ne",
+    },
+    {
+        hotkey: "⌘I",
+        icon: '<svg><use xlink:href="#vditor-icon-italic"></use></svg>',
+        name: "italic",
+        prefix: "*",
+        suffix: "*",
+        tipPosition: "ne",
+    },
+    {
+        hotkey: "⌘D",
+        icon: '<svg><use xlink:href="#vditor-icon-strike"></use></svg>',
+        name: "strike",
+        prefix: "~~",
+        suffix: "~~",
+        tipPosition: "ne",
+    },
+    {
+        hotkey: "⌘K",
+        icon: '<svg><use xlink:href="#vditor-icon-link"></use></svg>',
+        name: "link",
+        prefix: "[",
+        suffix: "](https://)",
+        tipPosition: "n",
+    },
+    {
+        name: "|",
+    },
+    {
+        hotkey: "⌘L",
+        icon: '<svg><use xlink:href="#vditor-icon-list"></use></svg>',
+        name: "list",
+        prefix: "* ",
+        tipPosition: "n",
+    },
+    {
+        hotkey: "⌘O",
+        icon:
+            '<svg><use xlink:href="#vditor-icon-ordered-list"></use></svg>',
+        name: "ordered-list",
+        prefix: "1. ",
+        tipPosition: "n",
+    },
+    {
+        hotkey: "⌘J",
+        icon: '<svg><use xlink:href="#vditor-icon-check"></use></svg>',
+        name: "check",
+        prefix: "* [ ] ",
+        tipPosition: "n",
+    },
+    {
+        hotkey: "⇧⌘I",
+        icon:
+            '<svg><use xlink:href="#vditor-icon-outdent"></use></svg>',
+        name: "outdent",
+        tipPosition: "n",
+    },
+    {
+        hotkey: "⇧⌘O",
+        icon: '<svg><use xlink:href="#vditor-icon-indent"></use></svg>',
+        name: "indent",
+        tipPosition: "n",
+    },
+    {
+        name: "|",
+    },
+    {
+        hotkey: "⌘;",
+        icon: '<svg><use xlink:href="#vditor-icon-quote"></use></svg>',
+        name: "quote",
+        prefix: "> ",
+        tipPosition: "n",
+    },
+    {
+        hotkey: "⇧⌘H",
+        icon: '<svg><use xlink:href="#vditor-icon-line"></use></svg>',
+        name: "line",
+        prefix: "---",
+        tipPosition: "n",
+    },
+    {
+        hotkey: "⌘U",
+        icon: '<svg><use xlink:href="#vditor-icon-code"></use></svg>',
+        name: "code",
+        prefix: "```",
+        suffix: "\n```",
+        tipPosition: "n",
+    },
+    {
+        hotkey: "⌘G",
+        icon:
+            '<svg><use xlink:href="#vditor-icon-inline-code"></use></svg>',
+        name: "inline-code",
+        prefix: "`",
+        suffix: "`",
+        tipPosition: "n",
+    },
+    {
+        name: "|",
+    },
+    {
+        icon: '<svg><use xlink:href="#vditor-icon-upload"></use></svg>',
+        name: "upload",
+        tipPosition: "n",
+    },
+    {
+        hotkey: "⌘M",
+        icon: '<svg><use xlink:href="#vditor-icon-table"></use></svg>',
+        name: "table",
+        prefix: "| col1",
+        suffix:
+            " | col2 | col3 |\n| --- | --- | --- |\n|  |  |  |\n|  |  |  |",
+        tipPosition: "n",
+    },
+    {
+        name: "|",
+    },
+    {
+        hotkey: "⌘Z",
+        icon: '<svg><use xlink:href="#vditor-icon-undo"></use></svg>',
+        name: "undo",
+        tipPosition: "nw",
+    },
+    {
+        hotkey: "⌘Y",
+        icon: '<svg><use xlink:href="#vditor-icon-redo"></use></svg>',
+        name: "redo",
+        tipPosition: "nw",
+    },
+    {
+        name: "|",
+    },
+    {
+        icon:
+            '<svg><use xlink:href="#vditor-icon-align-center"></use></svg>',
+        name: "outline",
+        tipPosition: "nw",
+    },
+    {
+        icon: '<svg><use xlink:href="#vditor-icon-theme"></use></svg>',
+        name: "content-theme",
+        tipPosition: "nw",
+    },
+    {
+        icon: '<svg><use xlink:href="#vditor-icon-code-theme"></use></svg>',
+        name: "code-theme",
+        tipPosition: "nw",
+    },
+    {
+        name: "br",
+    }
+]
+
 interface VditorProps {
     value?: string,
     getValue: (value: string) => void
@@ -14,11 +182,6 @@ const VditorEditor = ({ value, getValue }: VditorProps) => {
     useEffect(() => {
         const vditor = new Vditor("vditor", {
             minHeight: 550,
-            // 是否开启侧边栏目录
-            // outline: {
-            //     enable: true,
-            //     position: 'left'
-            // },
             // 禁止缓存数据
             cache: {
                 enable: false
@@ -27,6 +190,7 @@ const VditorEditor = ({ value, getValue }: VditorProps) => {
                 // 限制防抖时间
                 delay: 500
             },
+            toolbar,
             input: (value) => {
                 // 把数据传给父组件
                 getValue(value)
diff --git a/src/pages/Create/index.tsx b/src/pages/Create/index.tsx
index c7fa943..17bcce9 100644
--- a/src/pages/Create/index.tsx
+++ b/src/pages/Create/index.tsx
@@ -1,4 +1,4 @@
-import { Button, Card, Drawer, message } from 'antd';
+import { Button, Card, Drawer, Dropdown, MenuProps, message } from 'antd';
 import { BiSave } from "react-icons/bi";
 
 import VditorEditor from './components/VditorMD';
@@ -10,6 +10,21 @@ import { Article } from '@/types/app/article';
 import { getArticleDataAPI } from '@/api/Article'
 import { useSearchParams } from 'react-router-dom';
 
+const items: MenuProps['items'] = [
+  {
+    key: '1',
+    label: 'AI 续写',
+  },
+  {
+    key: '2',
+    label: 'AI 优化',
+  },
+  {
+    key: '3',
+    label: 'AI 生成',
+  },
+];
+
 const CreatePage = () => {
   const [params] = useSearchParams()
   const id = +params.get('id')!
@@ -48,7 +63,9 @@ const CreatePage = () => {
       <Title value="创作" />
 
       <Card className='relative mt-2'>
-        <div className='absolute top-12 right-[5%] w-22 z-10'>
+        <div className='absolute top-[4.5%] right-[5%] z-10 flex space-x-4'>
+          <Dropdown.Button menu={{ items }}>创作神器</Dropdown.Button>
+
           <Button type="primary" className='w-full flex justify-between' onClick={baseBtn} >
             <BiSave className='text-base' /> 保存
           </Button>
diff --git a/src/pages/Work/index.tsx b/src/pages/Work/index.tsx
index c97556d..07dd3d5 100644
--- a/src/pages/Work/index.tsx
+++ b/src/pages/Work/index.tsx
@@ -12,7 +12,7 @@ import dayjs from 'dayjs';
 
 export default () => {
     const activeSty = "bg-[#f9f9ff] text-primary"
-    const [active, setActive] = useState(0)
+    const [active, setActive] = useState(1)
     const [linkList, setLinkList] = useState<Web[]>([])
 
     const getLinkList = async () => {