添加web字体

src/configs/font.ts

@@ -0,0 +1,45 @@
+export const SYS_FONTS = [
+  { zh: '微软雅黑', en: 'Microsoft Yahei' },
+  { zh: '宋体', en: 'SimSun' },
+  { zh: '黑体', en: 'SimHei' },
+  { zh: '楷体', en: 'KaiTi' },
+  { zh: '新宋体', en: 'NSimSun' },
+  { zh: '仿宋', en: 'FangSong' },
+  { zh: '苹方', en: 'PingFang SC' },
+  { zh: '华文黑体', en: 'STHeiti' },
+  { zh: '华文楷体', en: 'STKaiti' },
+  { zh: '华文宋体', en: 'STSong' },
+  { zh: '华文仿宋', en: 'STFangSong' },
+  { zh: '华文中宋', en: 'STZhongSong' },
+  { zh: '华文琥珀', en: 'STHupo' },
+  { zh: '华文新魏', en: 'STXinwei' },
+  { zh: '华文隶书', en: 'STLiti' },
+  { zh: '华文行楷', en: 'STXingkai' },
+  { zh: '冬青黑体简', en: 'Hiragino Sans GB' },
+  { zh: '兰亭黑-简', en: 'Lantinghei SC' },
+  { zh: '偏偏体-简', en: 'Hanzipen SC' },
+  { zh: '手札体-简', en: 'Hannotate SC' },
+  { zh: '宋体-简', en: 'Songti SC' },
+  { zh: '娃娃体-简', en: 'Wawati SC' },
+  { zh: '行楷-简', en: 'Xingkai SC' },
+  { zh: '圆体-简', en: 'Yuanti SC' },
+  { zh: '华文细黑', en: 'STXihei' },
+  { zh: '幼圆', en: 'YouYuan' },
+  { zh: '隶书', en: 'LiSu' },
+  { zh: 'Arial', en: 'Arial' },
+]
+
+export const WEB_FONTS = [
+  { name: '仓耳小丸子' },
+  { name: '优设标题黑' },
+  { name: '峰广明锐体' },
+  { name: '摄图摩登小方体' },
+  { name: '站酷快乐体' },
+  { name: '站酷酷黑体' },
+  { name: '素材集市康康体' },
+  { name: '联盟起艺卢帅正锐黑体' },
+  { name: '谦度手写楷体' },
+  { name: '途牛类圆体' },
+  { name: '锐字真言体' },
+  { name: '问藏书房' },
+]

src/configs/fontName.ts

@@ -1,38 +0,0 @@
-export interface FontName {
-  source: string;
-  zh: string;
-  en: string;
-}
-
-export const FONT_NAMES: FontName[] = [
-  { source: 'windows', zh: '微软雅黑', en: 'Microsoft Yahei' },
-  { source: 'windows', zh: '宋体', en: 'SimSun' },
-  { source: 'windows', zh: '黑体', en: 'SimHei' },
-  { source: 'windows', zh: '楷体', en: 'KaiTi' },
-  { source: 'windows', zh: '新宋体', en: 'NSimSun' },
-  { source: 'windows', zh: '仿宋', en: 'FangSong' },
-
-  { source: 'osx', zh: '苹方', en: 'PingFang SC' },
-  { source: 'osx', zh: '华文黑体', en: 'STHeiti' },
-  { source: 'osx', zh: '华文楷体', en: 'STKaiti' },
-  { source: 'osx', zh: '华文宋体', en: 'STSong' },
-  { source: 'osx', zh: '华文仿宋', en: 'STFangSong' },
-  { source: 'osx', zh: '华文中宋', en: 'STZhongSong' },
-  { source: 'osx', zh: '华文琥珀', en: 'STHupo' },
-  { source: 'osx', zh: '华文新魏', en: 'STXinwei' },
-  { source: 'osx', zh: '华文隶书', en: 'STLiti' },
-  { source: 'osx', zh: '华文行楷', en: 'STXingkai' },
-  { source: 'osx', zh: '冬青黑体简', en: 'Hiragino Sans GB' },
-  { source: 'osx', zh: '兰亭黑-简', en: 'Lantinghei SC' },
-  { source: 'osx', zh: '偏偏体-简', en: 'Hanzipen SC' },
-  { source: 'osx', zh: '手札体-简', en: 'Hannotate SC' },
-  { source: 'osx', zh: '宋体-简', en: 'Songti SC' },
-  { source: 'osx', zh: '娃娃体-简', en: 'Wawati SC' },
-  { source: 'osx', zh: '行楷-简', en: 'Xingkai SC' },
-  { source: 'osx', zh: '圆体-简', en: 'Yuanti SC' },
-  
-  { source: 'office', zh: '华文细黑', en: 'STXihei' },
-  { source: 'office', zh: '幼圆', en: 'YouYuan' },
-  { source: 'office', zh: '隶书', en: 'LiSu' },
-  { source: '', zh: 'Arial', en: 'Arial' },
-]

src/main.ts

@@ -48,6 +48,7 @@ app.component('Popover', Popover)
 app.component('Slider', Slider)
 app.component('Select', Select)
 app.component('SelectOption', Select.Option)
+app.component('SelectOptGroup', Select.OptGroup)
 app.component('Switch', Switch)
 app.component('Radio', Radio)
 app.component('RadioGroup', Radio.Group)

src/store/index.ts

@@ -8,7 +8,7 @@ import { Slide, SlideTheme } from '@/types/slides'
 import { CreatingElement } from '@/types/edit'
 import { ToolbarState } from '@/types/toolbar'
 import { slides } from '@/mocks/index'
-import { FontName } from '@/configs/fontName'
+import { SYS_FONTS } from '@/configs/font'
 
 export { MutationTypes, ActionTypes }
 
@@ -22,7 +22,7 @@ export interface State {
   disableHotkeys: boolean;
   showGridLines: boolean;
   creatingElement: CreatingElement | null;
-  availableFonts: FontName[];
+  availableFonts: typeof SYS_FONTS;
   toolbarState: ToolbarState;
   theme: SlideTheme;
   slides: Slide[];

src/store/mutations.ts

@@ -4,7 +4,7 @@ import { MutationTypes } from './constants'
 import { State } from './index'
 import { Slide, PPTElement, SlideTheme } from '@/types/slides'
 import { CreatingElement } from '@/types/edit'
-import { FONT_NAMES } from '@/configs/fontName'
+import { SYS_FONTS } from '@/configs/font'
 import { isSupportFontFamily } from '@/utils/fontFamily'
 
 interface RemoveElementPropData {
@@ -61,7 +61,7 @@ export const mutations: MutationTree<State> = {
   },
 
   [MutationTypes.SET_AVAILABLE_FONTS](state) {
-    state.availableFonts = FONT_NAMES.filter(font => isSupportFontFamily(font.en))
+    state.availableFonts = SYS_FONTS.filter(font => isSupportFontFamily(font.en))
   },
 
   [MutationTypes.SET_TOOLBAR_STATE](state, type) {

src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue

@@ -19,9 +19,16 @@
         @change="value => emitRichTextCommand('fontname', value)"
       >
         <template #suffixIcon><IconFontSize /></template>
-        <SelectOption v-for="font in availableFonts" :key="font.en" :value="font.en">
-          <span :style="{ fontFamily: font.en }">{{font.zh}}</span>
-        </SelectOption>
+        <SelectOptGroup label="系统字体">
+          <SelectOption v-for="font in availableFonts" :key="font.en" :value="font.en">
+            <span :style="{ fontFamily: font.en }">{{font.zh}}</span>
+          </SelectOption>
+        </SelectOptGroup>
+        <SelectOptGroup label="在线字体">
+          <SelectOption v-for="font in webFonts" :key="font.name" :value="font.name">
+            <span>{{font.name}}</span>
+          </SelectOption>
+        </SelectOptGroup>
       </Select>
       <Select
         style="flex: 2;"
@@ -217,6 +224,7 @@ import { MutationTypes, State } from '@/store'
 import { PPTTextElement } from '@/types/slides'
 import emitter, { EmitterEvents } from '@/utils/emitter'
 import { TextAttrs } from '@/prosemirror/utils'
+import { WEB_FONTS } from '@/configs/font'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ElementOpacity from '../common/ElementOpacity.vue'
@@ -296,6 +304,8 @@ const presetStyles = [
   },
 ]
 
+const webFonts = WEB_FONTS
+
 interface CommandPayload {
   command: string;
   value?: string;
@@ -391,6 +401,7 @@ export default defineComponent({
       wordSpace,
       richTextAttrs,
       availableFonts,
+      webFonts,
       fontSizeOptions,
       lineHeightOptions,
       wordSpaceOptions,