docs: 补充代码注释

src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue

@@ -62,6 +62,7 @@ export default defineComponent({
     const selectedRange = ref([0, 0])
     const tempRangeSize = ref({ width: 0, height: 0 })
 
+    // 当前选区的边框线条位置
     const rangeLines = computed(() => {
       const width = selectedRange.value[0] * CELL_WIDTH
       const height = selectedRange.value[1] * CELL_HEIGHT
@@ -73,12 +74,14 @@ export default defineComponent({
       ]
     })
 
+    // 当前选区的缩放点位置
     const resizablePointStyle = computed(() => {
       const width = selectedRange.value[0] * CELL_WIDTH
       const height = selectedRange.value[1] * CELL_HEIGHT
       return { left: width + 'px', top: height + 'px' }
     })
 
+    // 初始化图表数据：将数据格式化并填充到DOM
     const initData = () => {
       const _data: string[][] = []
 
@@ -107,12 +110,14 @@ export default defineComponent({
 
     onMounted(initData)
 
+    // 获取当前图表DOM中的数据，整理格式化后传递出去
     const getTableData = () => {
       const [col, row] = selectedRange.value
 
       const labels: string[] = []
       const series: number[][] = []
 
+      // 第一列为系列名，实际数据从第二列开始
       for (let rowIndex = 0; rowIndex < row; rowIndex++) {
         let labelsItem = `类别${rowIndex + 1}`
         const labelInputRef = document.querySelector(`#cell-${rowIndex}-0`) as HTMLInputElement
@@ -136,8 +141,10 @@ export default defineComponent({
       emit('save', data)
     }
 
+    // 关闭图表数据编辑器
     const closeEditor = () => emit('close')
 
+    // 鼠标拖拽修改选中的数据范围
     const changeSelectRange = (e: MouseEvent) => {
       let isMouseDown = true
 
@@ -172,6 +179,7 @@ export default defineComponent({
 
         if (startPageX === endPageX && startPageY === endPageY) return
 
+        // 拖拽结束时，范围超过格子一半自动扩大到下一格（如拖动到一格半多的位置，会自动扩展到两格，横竖都同理）
         let width = tempRangeSize.value.width
         let height = tempRangeSize.value.height
         if (width % CELL_WIDTH > CELL_WIDTH * 0.5) width = width + (CELL_WIDTH - width % CELL_WIDTH)

src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue

@@ -159,6 +159,7 @@ export default defineComponent({
       gridColor.value = handleElement.value.gridColor || 'rgba(0, 0, 0, 0.4)'
     }, { deep: true, immediate: true })
 
+    // 设置图表数据
     const updateData = (data: ChartData) => {
       chartDataEditorVisible.value = false
       const props = { data }
@@ -166,12 +167,14 @@ export default defineComponent({
       addHistorySnapshot()
     }
 
+    // 设置填充色
     const updateFill = (value: string) => {
       const props = { fill: value }
       store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
       addHistorySnapshot()
     }
 
+    // 设置其他选项：柱状图转条形图、折线图转面积图、折线图转散点图、饼图转环形图、折线图开关平滑曲线
     const updateOptions = (optionProps: ILineChartOptions & IBarChartOptions & IPieChartOptions) => {
       const options = handleElement.value.options || {}
       const newOptions = { ...options, ...optionProps }
@@ -180,12 +183,14 @@ export default defineComponent({
       addHistorySnapshot()
     }
 
+    // 设置主题色
     const updateTheme = (themeColor: string) => {
       const props = { themeColor }
       store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
       addHistorySnapshot()
     }
 
+    // 设置网格颜色
     const updateGridColor = (gridColor: string) => {
       const props = { gridColor }
       store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })

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

@@ -171,6 +171,7 @@ export default defineComponent({
 
     const { addHistorySnapshot } = useHistorySnapshot()
 
+    // 设置滤镜
     const updateFilter = (filter: FilterOption, value: number) => {
       const originFilters = handleElement.value.filters || {}
       const filters = { ...originFilters, [filter.key]: `${value}${filter.unit}` }
@@ -179,20 +180,22 @@ export default defineComponent({
       addHistorySnapshot()
     }
 
+    // 打开自由裁剪
     const clipImage = () => {
       store.commit(MutationTypes.SET_CLIPING_IMAGE_ELEMENT_ID, handleElement.value.id)
       clipPanelVisible.value = false
     }
 
+    // 获取原始图片的位置大小
     const getImageElementDataBeforeClip = () => {
-      // 图片当前宽高位置、裁剪范围
+
+      // 图片当前的位置大小和裁剪范围
       const imgWidth = handleElement.value.width
       const imgHeight = handleElement.value.height
       const imgLeft = handleElement.value.left
       const imgTop = handleElement.value.top
       const originClipRange = handleElement.value.clip ? handleElement.value.clip.range : [[0, 0], [100, 100]]
 
-      // 图片原本未裁剪过时的宽高位置
       const originWidth = imgWidth / ((originClipRange[1][0] - originClipRange[0][0]) / 100)
       const originHeight = imgHeight / ((originClipRange[1][1] - originClipRange[0][1]) / 100)
       const originLeft = imgLeft - originWidth * (originClipRange[0][0] / 100)
@@ -207,6 +210,7 @@ export default defineComponent({
       }
     }
 
+    // 预设裁剪
     const presetImageClip = (shape: string, ratio = 0) => {
       const {
         originClipRange,
@@ -216,7 +220,7 @@ export default defineComponent({
         originTop,
       } = getImageElementDataBeforeClip()
       
-      // 设置形状和纵横比
+      // 纵横比裁剪（形状固定为矩形）
       if (ratio) {
         const imageRatio = originHeight / originWidth
 
@@ -243,7 +247,7 @@ export default defineComponent({
           },
         })
       }
-      // 仅设置形状（维持目前的裁剪范围）
+      // 形状裁剪（保持当前裁剪范围）
       else {
         store.commit(MutationTypes.UPDATE_ELEMENT, {
           id: handleElement.value.id,
@@ -256,6 +260,7 @@ export default defineComponent({
       addHistorySnapshot()
     }
 
+    // 替换图片（保持当前的样式）
     const replaceImage = (files: File[]) => {
       const imageFile = files[0]
       if (!imageFile) return
@@ -266,6 +271,7 @@ export default defineComponent({
       addHistorySnapshot()
     }
 
+    // 重置图片：清除全部样式
     const resetImage = () => {
       if (handleElement.value.clip) {
         const {
@@ -293,6 +299,7 @@ export default defineComponent({
       addHistorySnapshot()
     }
 
+    // 将图片设置为背景
     const setBackgroundImage = () => {
       const background = {
         ...currentSlide.value.background,

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

@@ -118,6 +118,7 @@ export default defineComponent({
 
     const { addHistorySnapshot } = useHistorySnapshot()
 
+    // 设置填充类型：渐变、纯色
     const updateFillType = (type: 'gradient' | 'fill') => {
       if (type === 'fill') {
         store.commit(MutationTypes.REMOVE_ELEMENT_PROPS, {
@@ -132,12 +133,14 @@ export default defineComponent({
       addHistorySnapshot()
     }
 
+    // 设置渐变填充
     const updateGradient = (gradientProps: Partial<ShapeGradient>) => {
       const props = { gradient: { ...gradient.value, ...gradientProps } }
       store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
       addHistorySnapshot()
     }
 
+    // 设置填充色
     const updateFill = (value: string) => {
       const props = { fill: value }
       store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })

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

@@ -206,6 +206,11 @@ export default defineComponent({
   setup() {
     const store = useStore()
     const handleElement = computed<PPTTableElement>(() => store.getters.handleElement)
+    
+    const availableFonts = computed(() => store.state.availableFonts)
+    const fontSizeOptions = [
+      '12px', '14px', '16px', '18px', '20px', '22px', '24px', '28px', '32px',
+    ]
 
     const textAttrs = ref({
       bold: false,
@@ -239,8 +244,11 @@ export default defineComponent({
       minColCount.value = handleElement.value.data[0].length
     }, { deep: true, immediate: true })
 
+    const { addHistorySnapshot } = useHistorySnapshot()
+
     const selectedCells = ref<string[]>([])
 
+    // 更新当前选中单元格的文本样式状态
     const updateTextAttrState = () => {
       if (!handleElement.value) return
 
@@ -281,6 +289,7 @@ export default defineComponent({
       }
     }
 
+    // 监听并更新当前选中的单元格
     const updateSelectedCells = (cells: string[]) => {
       selectedCells.value = cells
       updateTextAttrState()
@@ -291,13 +300,7 @@ export default defineComponent({
       emitter.off(EmitterEvents.UPDATE_TABLE_SELECTED_CELL, cells => updateSelectedCells(cells))
     })
 
-    const availableFonts = computed(() => store.state.availableFonts)
+    // 设置单元格内容文本样式
-    const fontSizeOptions = [
-      '12px', '14px', '16px', '18px', '20px', '22px', '24px', '28px', '32px',
-    ]
-
-    const { addHistorySnapshot } = useHistorySnapshot()
-
     const updateTextAttrs = (textAttrProp: Partial<TableCellStyle>) => {
       const data: TableCell[][] = JSON.parse(JSON.stringify(handleElement.value.data))
 
@@ -316,6 +319,7 @@ export default defineComponent({
       updateTextAttrState()
     }
 
+    // 更新表格主题：主题色、标题行、汇总行、第一列、最后一列
     const updateTheme = (themeProp: Partial<TableTheme>) => {
       const currentTheme = theme.value || {}
       const props = { theme: { ...currentTheme, ...themeProp } }
@@ -323,6 +327,7 @@ export default defineComponent({
       addHistorySnapshot()
     }
 
+    // 开启/关闭表格主题
     const toggleTheme = (checked: boolean) => {
       if (checked) {
         const props = {
@@ -342,6 +347,7 @@ export default defineComponent({
       addHistorySnapshot()
     }
 
+    // 设置表格行数（只能增加）
     const setTableRow = (e: KeyboardEvent) => {
       const value = +(e.target as HTMLInputElement).value
       const rowCount = handleElement.value.data.length
@@ -360,6 +366,8 @@ export default defineComponent({
       addHistorySnapshot()
     }
 
+
+    // 设置表格列数（只能增加）
     const setTableCol = (e: KeyboardEvent) => {
       const value = +(e.target as HTMLInputElement).value
       const colCount = handleElement.value.data[0].length

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

@@ -360,6 +360,7 @@ export default defineComponent({
     const lineHeightOptions = [0.9, 1.0, 1.15, 1.2, 1.4, 1.5, 1.8, 2.0, 2.5, 3.0]
     const wordSpaceOptions = [0, 1, 2, 3, 4, 5, 6, 8, 10]
 
+    // 接收并更新当前光标所在位置的富文本状态
     const updateRichTextAttrs = (attr: TextAttrs) => richTextAttrs.value = attr
 
     emitter.on(EmitterEvents.UPDATE_TEXT_STATE, attr => updateRichTextAttrs(attr))
@@ -367,28 +368,33 @@ export default defineComponent({
       emitter.off(EmitterEvents.UPDATE_TEXT_STATE, attr => updateRichTextAttrs(attr))
     })
 
+    // 发射富文本设置命令
     const emitRichTextCommand = (command: string, value?: string) => {
       emitter.emit(EmitterEvents.EXEC_TEXT_COMMAND, { command, value })
     }
 
+    // 发射富文本设置命令（批量）
     const emitBatchRichTextCommand = (payload: CommandPayload[]) => {
       emitter.emit(EmitterEvents.EXEC_TEXT_COMMAND, payload)
     }
 
     const { addHistorySnapshot } = useHistorySnapshot()
 
+    // 设置行高
     const updateLineHeight = (value: number) => {
       const props = { lineHeight: value }
       store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
       addHistorySnapshot()
     }
 
+    // 设置字间距
     const updateWordSpace = (value: number) => {
       const props = { wordSpace: value }
       store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
       addHistorySnapshot()
     }
 
+    // 设置文本框填充
     const updateFill = (value: string) => {
       const props = { fill: value }
       store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })