ai-ppt-edit-component

AI PPT 编辑器组件

本目录是从 src/views/ppt-editor 抽离出来的 纯 JS 版本 编辑器组件包。已包含 Editor 相关的页面、组件、composables、stores、shared、configs、apis、assets 等文件，支持作为独立依赖直接接入任意 Vue 3 项目。

约束：本目录内所有文件均为 JS/SCSS/Vue，无 TS。

作为 npm 组件发布与使用

本组件支持打包为 npm 依赖，发布后可在其他 Vue 3 项目中直接安装使用。

1. 构建产物

pnpm run -C packages/ai-ppt-edit-component build

打包产物输出到 packages/ai-ppt-edit-component/es 与 packages/ai-ppt-edit-component/lib。

2. 安装方式（使用方）

pnpm add ai-ppt-edit-component

使用时从包名直接引入：

import { EditPlugin } from 'ai-ppt-edit-component'

3. 发布说明

• public/template 与 public/mocks 会在构建时打包为静态资源，运行时自动加载，无需手动拷贝到宿主项目。

快速开始（推荐）

1. 安装依赖

pnpm add ai-ppt-edit-component

2. 入口文件注册

在你的 main.js（或 main.ts）中注册插件并引入样式：

import { createApp } from 'vue'
import App from './App.vue'
import { EditPlugin } from 'ai-ppt-edit-component'
import 'ai-ppt-edit-component/index.css'

const app = createApp(App)
app.use(EditPlugin, {
  serverBaseUrl: 'XXX', // 接口请求基础地址
  assetsUrl: 'XXXX', // 静态文件（模板）目录
})
app.mount('#app')

资源地址配置（assetsUrl）

组件默认从 /ai/ppt/ai-ppt-assets 读取模板与字体资源。如果宿主项目的资源部署路径不同，可通过 assetsUrl 覆盖：

const app = createApp(App)
app.use(EditPlugin, {
  serverBaseUrl: 'XXX', // 接口请求基础地址
  assetsUrl: 'XXXX', // 静态文件（模板）目录
})
app.mount('#app')

作用范围：

• 模板与图片请求：${assetsUrl}/template/*
• 字体请求：${assetsUrl}/fonts/*.woff2

3. 页面中使用

<template>
  <EditComponent :ppt-id="pptId" />
</template>

<script setup>
const pptId = 'your-ppt-id'
</script>

直接使用组件（不注册插件）

如果不想用 EditPlugin，你可以直接导入组件，但需要自行注册图标和指令。推荐按以下方式接入：

1) 手动注册指令与图标组件

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import Editor from 'ai-ppt-edit-component'

import Icon from 'ai-ppt-edit-component/plugins/icon.js'
import Directive from 'ai-ppt-edit-component/plugins/directive/index.js'

const app = createApp(App)
app.use(Icon)
app.use(Directive)
app.component('EditComponent', Editor)
app.mount('#app')

2) 页面内使用

<script setup>
import Editor from 'ai-ppt-edit-component'
</script>

<template>
  <Editor :ppt-id="pptId" />
</template>

3) 指令与图标缺失的常见表现

• v-tooltip / v-contextmenu / v-click-outside 无效
• 顶部/工具栏图标不显示或报错

如果出现上述问题，请确认已执行 app.use(Icon) 与 app.use(Directive)。

国际化（内置文案包）

组件内置了中英文文案包，默认根据浏览器语言（zh/en）自动切换。你也可以在注册插件时传入 t/locale/messages 覆盖默认行为。

方式一：通过 EditPlugin 注入

import { createApp } from 'vue'
import App from './App.vue'
import { EditPlugin } from 'ai-ppt-edit-component'

const app = createApp(App)
app.use(EditPlugin, {
  locale: 'zh-cn', // 或 'en'
  // messages: { 'zh-cn': { ... }, en: { ... } }, // 可选，合并到内置文案
  // t: (key, params) => i18n.global.t(key, params), // 可选，完全接管翻译
})
app.mount('#app')

方式二：不注册插件时手动注入

import { setI18n } from 'ai-ppt-edit-component'

setI18n({
  locale: 'zh-cn',
  // messages: { 'zh-cn': { ... }, en: { ... } },
  // t: (key, params) => i18n.global.t(key, params),
})

Props

• pptId（可选）：PPT id。未传时会尝试读取路由 query.id。

注意事项

• 本组件内部使用 Pinia，但在 EditPlugin 内部已自动创建并注册，无需在宿主应用额外创建。
• 模板与 mock 资源已内置并自动加载，无需手动拷贝。
• 若宿主项目未安装 Vue Router，请务必显式传入 pptId。
• 样式依赖较多，建议按“快速开始”完整引入。
• 本地调试需要根项目在vite添加配置，注入 SCSS 全局变量

const rootDir = fileURLToPath(new URL('.', import.meta.url))
const aiPptStyleDir = path.resolve(
  rootDir,
  '../../../custom-library/packages/ai-ppt-edit-component/assets/styles',
)
const aiPptScssGlobals = [
  `@use "${path.resolve(aiPptStyleDir, 'variable.scss')}" as *;`,
  `@use "${path.resolve(aiPptStyleDir, 'mixin.scss')}" as *;`,
].join('\n')

...
    css: {
      preprocessorOptions: {
        scss: {
          // ....
          additionalData: aiPptScssGlobals
        }
      }
    }
...

目录结构简述

• ai-ppt-edit-component/views/ppt-editor：核心编辑器页面
• ai-ppt-edit-component/views/ppt-components：编辑器内部用到的元素组件
• ai-ppt-edit-component/components：基础 UI 组件
• ai-ppt-edit-component/composables：业务 composables
• ai-ppt-edit-component/stores：Pinia store
• ai-ppt-edit-component/apis：接口请求层
• ai-ppt-edit-component/shared：通用工具与解析器
• ai-ppt-edit-component/assets：全局样式