diff --git a/package.json b/package.json index dd835ee9fe..360da4ae11 100644 --- a/package.json +++ b/package.json @@ -141,6 +141,7 @@ "axios": "^1.7.3", "browser-image-compression": "^2.0.2", "color": "^5.0.0", + "country-flag-emoji-polyfill": "0.1.8", "dayjs": "^1.11.11", "dexie": "^4.0.8", "dexie-react-hooks": "^1.1.7", diff --git a/src/renderer/src/assets/fonts/country-flag-fonts/TwemojiCountryFlags.woff2 b/src/renderer/src/assets/fonts/country-flag-fonts/TwemojiCountryFlags.woff2 new file mode 100644 index 0000000000..7f5bebba53 Binary files /dev/null and b/src/renderer/src/assets/fonts/country-flag-fonts/TwemojiCountryFlags.woff2 differ diff --git a/src/renderer/src/assets/fonts/country-flag-fonts/flag.css b/src/renderer/src/assets/fonts/country-flag-fonts/flag.css new file mode 100644 index 0000000000..b3daed9da0 --- /dev/null +++ b/src/renderer/src/assets/fonts/country-flag-fonts/flag.css @@ -0,0 +1,13 @@ +@font-face { + font-family: 'Twemoji Country Flags'; + unicode-range: + U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F; + /*https://github.com/beyondkmp/country-flag-emoji-polyfill/blob/master/font/TwemojiCountryFlags.woff2 */ + src: url('TwemojiCountryFlags.woff2') format('woff2'); + font-display: swap; +} + +/* 国旗字体样式类 */ +.country-flag-font { + font-family: 'Twemoji Country Flags', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; +} diff --git a/src/renderer/src/assets/styles/font.scss b/src/renderer/src/assets/styles/font.scss index 9d2d139b53..5db6290bfc 100644 --- a/src/renderer/src/assets/styles/font.scss +++ b/src/renderer/src/assets/styles/font.scss @@ -1,12 +1,20 @@ -:root { - --font-family: - Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Oxygen, Cantarell, 'Open Sans', - 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', - 'Noto Color Emoji'; - - --font-family-serif: - serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Ubuntu, Roboto, Oxygen, Cantarell, 'Open Sans', - 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - - --code-font-family: 'Cascadia Code', 'Fira Code', 'Consolas', Menlo, Courier, monospace; -} +:root { + --font-family: + Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Oxygen, Cantarell, 'Open Sans', + 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; + + --font-family-serif: + serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Ubuntu, Roboto, Oxygen, Cantarell, 'Open Sans', + 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + + --code-font-family: 'Cascadia Code', 'Fira Code', 'Consolas', Menlo, Courier, monospace; +} + +// Windows系统专用字体配置 +body[os='windows'] { + --font-family: + 'Twemoji Country Flags', Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Oxygen, + Cantarell, 'Open Sans', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', + 'Segoe UI Symbol', 'Noto Color Emoji'; +} diff --git a/src/renderer/src/assets/styles/index.scss b/src/renderer/src/assets/styles/index.scss index c4bd23d1fc..62f7eae852 100644 --- a/src/renderer/src/assets/styles/index.scss +++ b/src/renderer/src/assets/styles/index.scss @@ -7,6 +7,7 @@ @use './animation.scss'; @import '../fonts/icon-fonts/iconfont.css'; @import '../fonts/ubuntu/ubuntu.css'; +@import '../fonts/country-flag-fonts/flag.css'; *, *::before, diff --git a/src/renderer/src/components/Avatar/EmojiAvatar.tsx b/src/renderer/src/components/Avatar/EmojiAvatar.tsx index 553869698a..e01024735a 100644 --- a/src/renderer/src/components/Avatar/EmojiAvatar.tsx +++ b/src/renderer/src/components/Avatar/EmojiAvatar.tsx @@ -44,6 +44,7 @@ const StyledEmojiAvatar = styled.div<{ $size: number; $fontSize: number }>` height: ${(props) => props.$size}px; font-size: ${(props) => props.$fontSize}px; transition: opacity 0.3s ease; + &:hover { opacity: 0.8; } diff --git a/src/renderer/src/components/EmojiPicker/index.tsx b/src/renderer/src/components/EmojiPicker/index.tsx index eb8a90dbde..406d6d1865 100644 --- a/src/renderer/src/components/EmojiPicker/index.tsx +++ b/src/renderer/src/components/EmojiPicker/index.tsx @@ -1,4 +1,6 @@ +import TwemojiCountryFlagsWoff2 from '@renderer/assets/fonts/country-flag-fonts/TwemojiCountryFlags.woff2?url' import { useTheme } from '@renderer/context/ThemeProvider' +import { polyfillCountryFlagEmojis } from 'country-flag-emoji-polyfill' import { FC, useEffect, useRef } from 'react' interface Props { @@ -9,6 +11,10 @@ const EmojiPicker: FC = ({ onEmojiClick }) => { const { theme } = useTheme() const ref = useRef(null) + useEffect(() => { + polyfillCountryFlagEmojis('Twemoji Mozilla', TwemojiCountryFlagsWoff2) + }, []) + useEffect(() => { if (ref.current) { ref.current.addEventListener('emoji-click', (event: any) => { diff --git a/src/renderer/src/pages/settings/AssistantSettings/AssistantPromptSettings.tsx b/src/renderer/src/pages/settings/AssistantSettings/AssistantPromptSettings.tsx index 22ff2a7d62..a473c683ed 100644 --- a/src/renderer/src/pages/settings/AssistantSettings/AssistantPromptSettings.tsx +++ b/src/renderer/src/pages/settings/AssistantSettings/AssistantPromptSettings.tsx @@ -65,7 +65,15 @@ const AssistantPromptSettings: React.FC = ({ assistant, updateAssistant } } arrow trigger="click"> - + {emoji && (