diff --git a/package.json b/package.json index 2aa8acd..05c29ca 100644 --- a/package.json +++ b/package.json @@ -35,12 +35,15 @@ "prepare": "husky install" }, "dependencies": { + "@emoji-mart/data": "1.1.2", + "@emoji-mart/react": "1.1.1", "@reduxjs/toolkit": "1.9.5", "@vercel/analytics": "1.0.1", "ahooks": "3.7.7", "antd": "5.5.0", "axios": "1.4.0", "dayjs": "1.11.7", + "emoji-mart": "5.5.2", "github-markdown-css": "5.2.0", "i18next": "22.5.0", "katex": "0.16.7", @@ -52,6 +55,7 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-i18next": "12.3.1", + "react-icons": "4.9.0", "react-markdown": "8.0.7", "react-redux": "8.0.5", "react-syntax-highlighter": "15.5.0", diff --git a/src/components/EmojiPicker/Button.tsx b/src/components/EmojiPicker/Button.tsx new file mode 100644 index 0000000..be80d00 --- /dev/null +++ b/src/components/EmojiPicker/Button.tsx @@ -0,0 +1,42 @@ +import React from 'react' +import { Button, Tooltip } from 'antd' +import EmojiPicker from './index' +import Image from 'next/image' + +const ButtonEmojiPicker = (props: { + value?: '' + readOnly?: boolean + onChange?: (val: any) => void + onEmojiClick?: (emoji: any) => void + theme?: 'auto' | 'light' | 'dark' + style?: 'native' | 'apple' | 'google' | 'facebook' +}) => { + const [_value, setValue] = React.useState(props.value) + return ( + { + props?.onEmojiClick?.(emoji) + props?.onChange?.(emoji.imageUrl) + setValue(emoji.imageUrl) + }} + /> + } + > + + + ) +} + +export default ButtonEmojiPicker diff --git a/src/components/EmojiPicker/index.tsx b/src/components/EmojiPicker/index.tsx new file mode 100644 index 0000000..9bf3c32 --- /dev/null +++ b/src/components/EmojiPicker/index.tsx @@ -0,0 +1,24 @@ +import React from 'react' +import data from '@emoji-mart/data' +import Picker from '@emoji-mart/react' + +export function getEmojiUrl(unified: string, style: string) { + return `https://cdn.staticfile.org/emoji-datasource-apple/14.0.0/img/${style}/64/${unified}.png` +} + +const EmojiPicker = (props: { onEmojiClick: (emoji: any) => void; theme: 'auto' | 'light' | 'dark'; style: 'native' | 'apple' | 'google' | 'facebook' }) => { + return ( + { + // 返回emoji图片链接 + emoji.imageUrl = getEmojiUrl(emoji.unified, props.style || 'apple') + console.log('onEmojiSelect', emoji) + props.onEmojiClick(emoji) + }} + /> + ) +} + +export default EmojiPicker diff --git a/src/components/pages/plugin/Store.tsx b/src/components/pages/plugin/Store.tsx index 0982760..94340e6 100644 --- a/src/components/pages/plugin/Store.tsx +++ b/src/components/pages/plugin/Store.tsx @@ -275,7 +275,7 @@ function OnlinePlugin() { /> setOpen(false)} extra={ diff --git a/src/components/pages/prompt/Edit.tsx b/src/components/pages/prompt/Edit.tsx index df86406..c686d87 100644 --- a/src/components/pages/prompt/Edit.tsx +++ b/src/components/pages/prompt/Edit.tsx @@ -1,6 +1,6 @@ import { useSiteContext } from '@/contexts/site' -import { Button, Form, Input, InputNumber, Popconfirm, Select, Space, theme as antdTheme, Typography, Divider, Tag, message } from 'antd' -import { DeleteOutlined, MinusCircleOutlined, PlusOutlined } from '@ant-design/icons' +import { Button, Form, Input, InputNumber, Popconfirm, Select, Space, theme as antdTheme, Typography, Divider, Tag, message, Tooltip } from 'antd' +import AntIcon, { DeleteOutlined, MinusCircleOutlined, PlusOutlined } from '@ant-design/icons' import { usePromptContext } from '@/contexts' import { Prompt } from '@/types/prompt' import { useTranslation } from '@/locales' @@ -8,6 +8,7 @@ import { uuidv4 } from '@/utils/uuid' import { useEffect, useState } from 'react' import { Model, ModelList, LanguageList } from '@/config/constant' import { useRouter } from 'next/router' +import ButtonEmojiPicker from '@/components/EmojiPicker/Button' function Edit(props: { action: string; page: boolean; prompt?: Prompt; edit: boolean }) { // const router = useRouter() @@ -122,6 +123,9 @@ function Edit(props: { action: string; page: boolean; prompt?: Prompt; edit: boo 文本 */} + + + @@ -226,16 +230,18 @@ function Edit(props: { action: string; page: boolean; prompt?: Prompt; edit: boo {/* */} - - - - - - + {edit && ( + + + + + + + )} ) diff --git a/src/components/pages/prompt/List.tsx b/src/components/pages/prompt/List.tsx index 79fc35e..2f985dc 100644 --- a/src/components/pages/prompt/List.tsx +++ b/src/components/pages/prompt/List.tsx @@ -132,7 +132,7 @@ function IndexPage(props: { setContent: Function; style?: React.CSSProperties }) ellipsis={{ rows: 1 }} style={{ marginBottom: '0.5em', fontSize: 12, textAlign: 'left', color: uuid == item.uuid ? token.colorPrimaryActive : token.colorText }} > - {item.description || 'No description'} + {item.intro || 'No intro'} } /> @@ -162,7 +162,7 @@ function IndexPage(props: { setContent: Function; style?: React.CSSProperties }) setOpen(false)} extra={