achenc1013/ThriveX-Admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AI创作基本布局

Browse Source
This commit is contained in:
宇阳
2024-09-25 19:01:56 +08:00
parent ac263b4cec
commit e612fbb0ff
4 changed files with 200 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/Create/components/VditorMD/index.scss
View File

@@ -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;
}
}

174
src/pages/Create/components/VditorMD/index.tsx
View File

@@ -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)

21
src/pages/Create/index.tsx
View File

@@ -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>

2
src/pages/Work/index.tsx
View File

@@ -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 () => {