当前位置：首页 > article >正文

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

article 2024/12/24 9:43:32

一、组件结构

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

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 }
},