【PPTist】组件结构设计、主题切换

一、组件结构

以下是代码中所有组件的定义：

• Editor (编辑器主界面)
  • index.vue (编辑器入口 - 整合所有子组件)
  • EditorHeader (顶部操作区域)
    • index.vue (顶部区域入口)
    • FileInput.vue (文件导入 - 支持导入PPT文件)
    • ExportButton.vue (导出功能 - 支持多种格式导出)
    • Toolbar.vue (主工具栏 - 包含常用编辑工具)
    • ToolbarButton.vue (工具栏按钮 - 可复用的工具按钮组件)
    • SaveButton.vue (保存按钮 - 保存当前编辑内容)
    • UndoRedo.vue (撤销重做 - 操作历史管理)
    • TitleBar.vue (标题栏 - 显示和编辑文档标题)
    • FullscreenButton.vue (全屏按钮 - 切换全屏模式)
    • TemplateSelect.vue (模板选择 - 预设模板管理)
  • EditorContent (主要内容区域)
    • index.vue (内容区入口)
    • Canvas (画布区域 - 核心编辑区)
      • index.vue (画布入口)
      • GridLines.vue (网格线 - 辅助对齐网格)
      • Rulers.vue (标尺 - 显示位置刻度)
      • AlignmentLines.vue (对齐参考线 - 智能对齐辅助)
      • EditableElement (可编辑元素集合)
        • index.vue (元素容器)
        • TextElement (文本元素)
          • index.vue
          • TextEditor.vue (富文本编辑器)
          • TextAttrs.vue (文本属性配置)
        • ImageElement (图片元素)
          • index.vue
          • ImageClip.vue (图片裁剪工具)
        • ShapeElement (形状元素 - 各类几何图形)
        • LineElement (线条元素 - 各类线条)
        • ChartElement (图表元素)
          • index.vue
          • ChartData.vue (图表数据编辑)
          • ChartOptions.vue (图表配置选项)
        • TableElement (表格元素)
          • index.vue
          • TableCells.vue (表格单元格编辑)
      • MultiSelectLayer.vue (多选操作层 - 框选功能)
      • ContextMenu.vue (右键菜单 - 快捷操作菜单)
    • Thumbnails (左侧缩略图区域)
      • index.vue (缩略图容器)
      • ThumbnailSlide.vue (单个幻灯片缩略图)
      • ThumbnailSlideList.vue (缩略图列表)
      • SlideSortable.vue (幻灯片拖拽排序)
    • Toolbar (右侧工具栏)
      • index.vue (工具栏容器)
      • ElementStylePanel (元素样式面板)
        • index.vue (样式面板容器)
        • TextStylePanel (文字样式配置)
          • index.vue
          • FontSelect.vue (字体选择器)
          • TextAlign.vue (文本对齐设置)
        • ImageStylePanel (图片样式配置)
          • index.vue
          • ImageFilter.vue (图片滤镜设置)
        • ShapeStylePanel.vue (形状样式配置)
        • LineStylePanel.vue (线条样式配置)
        • ChartStylePanel.vue (图表样式配置)
        • TableStylePanel.vue (表格样式配置)
      • SlideDesign (幻灯片设计面板)
        • index.vue (设计面板容器)
        • Background (背景设置)
          • index.vue
          • GradientSetting.vue (渐变背景配置)
        • Theme.vue (主题设置)
      • Animation (动画面板)
        • index.vue (动画面板容器)
        • AnimationList.vue (动画列表)
        • AnimationEditor.vue (动画参数编辑器)
  • EditorFooter (底部状态栏)
    • index.vue (底部栏容器)
    • ScaleSelect.vue (缩放比例选择)
    • SlideInfo.vue (幻灯片信息显示)
    • PlayButton.vue (放映控制按钮)
• Screen (放映页面)
  • index.vue (放映页面入口)
  • ScreenSlide.vue (幻灯片放映组件)
  • ScreenControls.vue (放映控制器 - 切换/暂停等)
• components (通用基础组件)
  • Modal (模态框 - 弹窗容器)
  • ColorPicker (颜色选择器)
  • InputNumber (数字输入框)
  • Dropdown (下拉菜单)
  • Button (按钮组件)
  • Divider (分割线)
  • Icon (图标组件)
  • Tooltip (文字提示)
  • Form (表单组件集)
  • Menu (菜单组件)
  • Select (选择器)
  • Slider (滑块组件)
  • Switch (开关组件)
  • Upload (文件上传)
  • Dialog (对话框组件)

主要的工作区域大致分为三个部分：

• 顶部操作区（EditorHeader）：提供全局操作功能
• 内容编辑区（EditorContent）：核心的编辑功能区域
• 底部状态栏（EditorFooter）：显示状态信息和快捷操作

二、主题切换

就是这个地方，预置的主题

预置主题的定义在 src/configs/theme.ts，以其中一个为例

  {
    background: '#ffffff',
    fontColor: '#333333',
    fontname: 'Microsoft Yahei',
    colors: ['#5b9bd5', '#ed7d31', '#a5a5a5', '#ffc000', '#4472c4', '#70ad47'],
  },

里面的 fontname 都是微软雅黑。那么我们给第一个元素的字体换一个花哨的字体试一试

字体的定义：src/configs/font.ts，就换一个 "仓耳小丸子" 吧

可以看到，第一个主题的字体已经改变了，卡哇伊~

应用全局的话，就成功修改所有的字体啦

不过我有一个疑问，显然，默认的主题的配色方案使用的是第一个，但是为什么默认的字体不是第一个主题也就是我设置的这个字体呢？那要找一下默认的主题是在哪里呢？

是在这里 src/mocks/slides.ts 定义的一个默认展示的幻灯片数据，只是配色和第一个主题颜色一样

然后设置主题的时候，看一下是怎么执行的，将主题应用到当前幻灯片和应用全部的方法在src/hooks/useSlideTheme.ts
applyPresetThemeToSingleSlide 和 applyPresetThemeToAllSlides。这俩处理逻辑差不多，其中主要执行了三个步骤

• setSlideTheme 设置幻灯片主题
  这个方法也在当前文件中，接收两个参数：Slide 和 PresetTheme。里面的处理逻辑也非常的朴实无华，就是挨个改一下元素的可能被修改的属性
  例如如果是文字的话

if (el.type === 'text') {
  if (el.fill) el.fill = colorMap[tinycolor(el.fill).toRgbString()] || el.fill
  el.defaultColor = theme.fontColor
  el.defaultFontName = theme.fontname
}

会修改 fill、defaultColor、defaultFontName 这三个属性。

在文字的组件中 src/views/components/element/TextElement/BaseTextElement.vue，在模版中使用这几个属性

<div 
  class="element-content"
  :style="{
    width: elementInfo.vertical ? 'auto' : elementInfo.width + 'px',
    height: elementInfo.vertical ? elementInfo.height + 'px' : 'auto',
    backgroundColor: elementInfo.fill,
    opacity: elementInfo.opacity,
    textShadow: shadowStyle,
    lineHeight: elementInfo.lineHeight,
    letterSpacing: (elementInfo.wordSpace || 0) + 'px',
    color: elementInfo.defaultColor,
    fontFamily: elementInfo.defaultFontName,
    writingMode: elementInfo.vertical ? 'vertical-rl' : 'horizontal-tb',
  }"
>

fill 就是背景颜色

• slidesStore.updateSlide 更新当前幻灯片

updateSlide(props: Partial<Slide>, slideId?: string) {
  const slideIndex = slideId ? this.slides.findIndex(item => item.id === slideId) : this.slideIndex
  this.slides[slideIndex] = { ...this.slides[slideIndex], ...props }
},

• addHistorySnapshot 添加到历史快照中
  这个方法在上一篇文章中介绍过，【PPTist】历史记录功能，凡是可以回退或者重做的操作都需要执行这个方法。