doc: 信息补充

README.md

@@ -1,4 +1,8 @@
-<p>
+<p align="center">
+    <img src='/public/icons/android-chrome-192x192.png' />
+</p>
+
+<p align="center">
     <a href="https://www.github.com/pipipi-pikachu/PPTist/stargazers" target="_black">
         <img src="https://img.shields.io/github/stars/pipipi-pikachu/PPTist?logo=github" alt="stars" />
     </a>
@@ -25,7 +29,7 @@
 
 # 👀 前排提示
 1. 本项目的目标是打造一个 “在线幻灯片应用” ，而非 “低代码平台”、“H5 编辑器” 或 “图片编辑工具” 等。
-2. 本项目的目标受众是<b>有【Web 幻灯片】开发需求的开发者</b>，提供的链接只是一个演示地址，并不能作为工具使用，也不提供任何在线服务。
+2. 本项目的目标受众是<b>有【Web 幻灯片】开发需求的开发者</b>，提供的链接只是一个演示地址，不提供任何在线服务。你不应该直接将本项目作为工具使用，也不支持一键部署。
 如果你只是需要一个服务或工具，可以选择更优秀和成熟的产品，例如：[石墨文档](https://shimo.im/)、[金山文档](https://www.kdocs.cn/)、[Slidev](https://sli.dev/)、[revealjs](https://revealjs.com/) 等。
 3. 本项目是基于 DOM 的渲染方案，好处是简单。但是相比 Canvas 渲染的方案，在复杂场景下性能会存在一定的差距，所以如果你对性能有较高的要求，本项目可能不是一个好的参考方向。
 4. 这里总结了一些[常见问题](https://github.com/pipipi-pikachu/PPTist/blob/master/doc/Q&A.md)，第一次提 Issues 和 PR 时，务必提前阅读此文档。
@@ -170,7 +174,8 @@ npm run serve
 
 
 # 💻 贡献代码
-首先感谢每一位关注本项目的朋友，非常欢迎每一位对本项目感兴趣的朋友贡献代码。
+首先感谢关注本项目的朋友，非常欢迎每一位对本项目感兴趣的朋友贡献代码。
+
 ### 具体参考如下：
 - fork 源码，下载到本地并运行项目
 - 添加/修改代码

doc/Q&A.md

@@ -1,59 +1,63 @@
 ## 常见问题
 
-**Q. 为什么xxx快捷键没有作用？**
+#### Q. 为什么xxx快捷键没有作用？
 
 A. 部分快捷键需要聚焦到指定区域才会生效，例如焦点在左边缩略图列表才能使用操作页面的快捷键，焦点在画布区域才能使用操作元素的快捷键。
 
-**Q. 为什么粘贴没有作用？**
+#### Q. 为什么粘贴没有作用？
 
 A. 请注意允许浏览器访问系统剪贴板。
 
-**Q. 为什么浏览器刷新或重新打开后，之前做的PPT没有了？**
+#### Q. 为什么浏览器刷新或重新打开后，之前做的PPT没有了？
 
 A. 该演示项目是纯前端部署的，不会保存数据。
 
-**Q. 如何调整幻灯片页面的顺序？**
+#### Q. 如何调整幻灯片页面的顺序？
 
 A. 按住左侧缩略图可进行拖拽调整顺序。
 
-**Q. 为什么插入图片后会出现操作卡顿的情况？**
+#### Q. 为什么插入图片后会出现操作卡顿的情况？
 
 A. 由于本演示项目不依赖后端，插入本地图片实际引用的是Base64，导致数据体积非常大，在真正的生产环境中应该上传图片后引用图片地址，就不会出现这样的情况了。
 
-**Q. 为什么应用预置主题后没有效果？**
+#### Q. 为什么应用预置主题后没有效果？
 
 A. 设置预置主题的作用是使新添加的元素和页面应用主题样式，不会对已有的元素和页面生效，您可以使用“应用主题到全部”功能，将当前主题应用到全部页面中。
 
-**Q. 设置在线字体不生效？**
+#### Q. 设置在线字体不生效？
 
 A. 设置在线字体时会下载对应的字体文件，该文件较大，需要等待下载完成后才会应用新的字体。
 
-**Q. 关于导入导出PPTX文件**
+#### Q. 关于导入导出PPTX文件
 
 A. 作为一个在线幻灯片应用，导出、导入 PPTX 文件是非常重要的功能，但是经过调研发现，该功能实现起来的复杂度远超过了预期。由于个人能力和时间有限，这部分功能只能借助第三方的轮子来完成。
 
-目前导出功能主要基于 [PptxGenJS](https://github.com/gitbrent/PptxGenJS/) 完成，能够实现大多数基本元素的导出，但还有非常多的缺陷需要一点点完善。同时需要知晓的是：1、该功能依赖 PptxGenJS，对于该库本身无法实现的部分（如动画），本项目也无能为力；2、导出功能的目标只是【导出样式尽可能一致的元素】，而不是一比一将网页还原到PPT，一些样式差异是必然存在的。
+导出：目前导出功能主要基于 [PptxGenJS](https://github.com/gitbrent/PptxGenJS/) 完成，能够实现大多数基本元素的导出，但还有非常多的缺陷需要一点点完善。同时需要知晓的是：1、该功能依赖 PptxGenJS，对于该库本身无法实现的部分（如动画），本项目也无能为力；2、导出功能的目标只是【导出样式尽可能一致的元素】，而不是一比一将网页还原到PPT，一些样式差异是必然存在的。
 
-导入功能目前暂时没有合适的解决方案，还在调研和观望中。如果有感兴趣或做过相关内容的朋友，欢迎来 issues 中讨论。
+导入：导入功能目前暂时没有合适的解决方案，还在调研和观望中。如果有感兴趣或做过相关内容的朋友，欢迎来 issues 中讨论。
 
-> PS. 我做了一个 [pptx转json](https://github.com/pipipi-pikachu/pptx2json) 的实验，可做参考。
+> PS. 我做了一个 [pptx转json](https://github.com/pipipi-pikachu/pptx2json) 的实验，如果你急需实现导入PPTX文件功能，可以此为参考自行实现。
 
-同时补充一点，本项目不是 office PPT 的专属在线编辑器，本质上与 office PPT 没有任何关系。【导入/导出 ppt 文件】只是项目的一个功能而非目的。
+同时补充一点，本项目不是 office PPT 的专属在线编辑器，本质上与 office PPT 没有任何关系。【导入/导出 ppt 文件】只是项目的一个[功能]而非[目的]。
 
-**Q. 视频元素支持哪些格式？**
+#### Q. 视频元素支持哪些格式？
 
 A. 本项目只提供最基础的视频能力，正常状态下可以播放video标签本身支持的格式。
 
 此外，可以额外引入 [hls.js](https://github.com/video-dev/hls.js) 或 [flv.js](https://github.com/Bilibili/flv.js) 来支持对应的格式（.m3u8 .flv），你只需要在项目中引入对应的文件（如cdn）即可，无需其他配置。
 
-**Q. 关于导入JSON文件**
+#### Q. 关于导入JSON文件
 
 A. 首先，出于安全等原因，个人并不建议将这种功能在前端直接暴露给用户，或者说用户根本就不应该接触到JSON这种格式（甚至导出JSON功能的初衷也只是为了方便开发）。如果真的有相关的需求，请自行在服务端实现，核心在于做好进行数据的校验，前端实现也是一样。
 
-**Q. 打印 / 导出 PDF 样式与实际有出入**
+#### Q. 打印 / 导出 PDF 样式与实际有出入
 
 A. 请注意在浏览器弹出的打印窗口调整相关的设置。建议：设置边距为【默认】、取消勾选【页眉和页脚】、勾选【背景图形】
 
-**Q. 为什么移动端不支持 xxx 功能？**
+#### Q. 为什么移动端不支持 xxx 功能？
 
-A. 首先需要明确的一点，就是移动端无论怎么做，体验上都是必然大不如 PC 端的。因此个人将移动端定位为：简单进行一些临时处理的应急使用。真正的设计/制作幻灯片应在电脑上使用完整的功能。如实在有移动端的特殊需求，可尝试在移动端使用电脑模式打开（当然，体验会更槽糕），或者开发者自己进行二次开发。
+A. 首先需要明确的一点，就是移动端无论怎么做，体验上都是必然大不如 PC 端的。因此个人将移动端定位为：简单进行一些临时处理的应急使用。真正的设计/制作幻灯片应在电脑上使用完整的功能。如实在有移动端的特殊需求，可尝试在移动端使用电脑模式打开（当然，体验会更槽糕），或者开发者自己进行二次开发。
+
+#### Q. 关于兼容性？
+
+A. 本项目优先兼容Chrome、Firefox。在Safari下可能存在部分兼容性问题。不兼容IE。

public/index.html

@@ -5,6 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta name="description" content="基于 Vue3.x + TypeScript 的在线演示文稿（幻灯片）应用，还原了大部分 Office PowerPoint 常用功能，实现在线PPT的编辑、演示。支持导出PPT文件。" />
+    <meta name="keywords" content="ppt,powerpoint,office powerpoint,在线ppt,幻灯片,演示文稿,ppt在线制作,Vue3,TypeScript" />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>PPTIST - 在线演示文稿</title>
 

src/views/Editor/EditorHeader/index.vue

@@ -44,7 +44,8 @@
         <div class="menu-item"><IconHelpcenter /> <span class="text">帮助</span></div>
         <template #overlay>
           <Menu>
-            <MenuItem @click="goIssues()">意见反馈</MenuItem>
+            <MenuItem @click="goLink('https://github.com/pipipi-pikachu/PPTist/issues')">意见反馈</MenuItem>
+            <MenuItem @click="goLink('https://github.com/pipipi-pikachu/PPTist/blob/master/doc/Q&A.md')">常见问题</MenuItem>
             <MenuItem @click="hotkeyDrawerVisible = true">快捷键</MenuItem>
           </Menu>
         </template>
@@ -115,9 +116,7 @@ const openSelectPanel = () => {
 
 const hotkeyDrawerVisible = ref(false)
 
-const goIssues = () => {
+const goLink = (url: string) => window.open(url)
-  window.open('https://github.com/pipipi-pikachu/PPTist/issues')
-}
 </script>
 
 <style lang="scss" scoped>