docs: update rembg

README.md

@@ -12,13 +12,13 @@
 
 - 丝滑的操作体验，丰富的交互细节，基础功能完善
 - 采用服务端生成图片，确保多端出图统一性，支持各种 CSS 特性
-- 支持将上传的 PSD 文件解析成模板，方便导入已有设计图
+- 简易 AI 抠图工具，上传图片一键去除背景
 - 技术栈：Vue3 、Vite2 、Vuex 、ElementPlus
 - 图片生成：Puppeteer、Express
 
 ### 支持功能
 
-- 导入 PSD 设计稿，导出图片下载
+- 导入 PSD 文件解析成模板、在线导出图片下载
 - 元素拖拽、组合、缩放、层级调整、对齐等操作。
 - 图片素材插入、替换、裁剪，图片容器等功能。
 - SVG 素材颜色、透明度编辑，文字花字组合。
@@ -62,24 +62,30 @@ npm run serve
 
 ### 打包
 
-| 前端页面          | 图片生成服务                          |
+| 前端页面          | 截图服务                              |
 | ----------------- | ------------------------------------- |
 | `npm run v-build` | `cd sreenshot` <br /> `npm run build` |
 
-### 后端
+### 截图服务
-
-根据你的具体场景自行实现，目前本项目中的所有服务端接口可参考：[接口 API 文档](https://xp.palxp.com/apidoc/index.html)。
-
-### 图片生成服务
 
 代码位于 [screenshots/](https://github.com/palxiao/poster-design/tree/main/screenshot) 目录下，查看[接口 API 文档](https://xp.palxp.com/apidoc/screenshot.html)。
 
 > 打包注意事项与服务器配置相关请进入该目录下查看 README 文件说明。
 
-### Docker 容器部署
+### 截图服务 Docker 部署
 
 可以通过 Docker 运行一个带 Linux 浏览器的容器，[参考说明](https://xp.palxp.com/#/articles/1689319644311?id=docker%e5%ae%b9%e5%99%a8)。
 
+### 服务端
+
+根据你的具体场景自行实现，目前本项目中的所有后端接口可参考：[接口 API 文档](https://xp.palxp.com/apidoc/index.html)。
+
+### 抠图服务部署
+
+```
+docker run -d -p 5000:5000 --restart always danielgatis/rembg s
+```
+
 ### 感谢
 
 本项目使用或参考了一些优秀开源项目，包括但不限于：
@@ -104,7 +110,7 @@ A：考虑到服务端的开发语言、数据库类型都可能不尽相同，
 
 项目最早使用 Vue2 开发，后改用 Vue3 重构，所以有部分代码混合了 Options 写法。
 
-或许你在工作中有这类需求，这个项目能给到你一些微薄帮助的话，那就再好不过了！
+或许你在工作中有类似的研发需求，或者对开发编辑器感兴趣，希望这个项目能给到你一些微薄帮助！
 
 目前本项目也还在不断迭代中，有很多的不足之处，我也是一边学习一边成长。开源不易，希望看到这里的你可以给本项目点个 **Star** 支持一下~ 感谢！
 

src/api/github.ts

@@ -3,13 +3,12 @@
  * @Date: 2023-07-13 17:01:37
  * @Description: github api
  * @LastEditors: ShawnPhang <site: book.palxp.com>
- * @LastEditTime: 2023-07-14 00:01:05
+ * @LastEditTime: 2023-08-10 10:33:59
  */
 import fetch from '@/utils/axios'
-const reader = new FileReader()
+const cutToken = 'ghp_qpV8PUxwY7as4jc'
-const knock = 'qpV8PUxwY7as4jc'
-const cut = 'AqYfNFb6G2f2OVl4IVFOY'
 
+const reader = new FileReader()
 function getBase64(file: File) {
   return new Promise((resolve) => {
     reader.onload = function (event: any) {
@@ -21,22 +20,17 @@ function getBase64(file: File) {
 }
 
 const putPic = async (file: any) => {
-  const content = typeof file === 'string' ? file : await getBase64(file)
   const repo = 'shawnphang/files'
   const d = new Date()
+  const content = typeof file === 'string' ? file : await getBase64(file)
   const path = `${d.getFullYear()}/${d.getMonth()}/${d.getTime()}${file.name?.split('.').pop() || '.png'}`
   const imageUrl = 'https://api.github.com/repos/' + repo + '/contents/' + path
-  const body = {
+  const body = { branch: 'main', message: 'upload', content, path }
-    branch: 'main',
+  const res = await fetch(imageUrl, body, 'put', {
-    message: 'upload',
+    Authorization: `token ${cutToken}AqYfNFb6G2f2OVl4IVFOY`,
-    content,
-    path,
-  }
-  await fetch(imageUrl, body, 'put', {
-    Authorization: 'token ' + 'ghp_' + knock + cut,
     'Content-Type': 'application/json; charset=utf-8',
   })
-  return `https://fastly.jsdelivr.net/gh/shawnphang/files@main/${path}`
+  return res?.content?.download_url || `https://fastly.jsdelivr.net/gh/shawnphang/files@main/${path}`
 }
 
 export default { putPic }

src/components/modules/panel/widgetPanel.vue

@@ -7,6 +7,7 @@
           <p>{{ item.name }}</p>
         </li>
       </ul>
+      <a href="https://github.com/palxiao/poster-design" target="_blank" class="github"><img src="https://fe-doc.palxp.com/images/github.svg" alt="Github" title="Github" /> 源码</a>
     </div>
     <div v-show="active" class="widget-wrap">
       <temp-list-wrap :style="getStyle(0)" />
@@ -109,6 +110,7 @@ export default {
   position: relative;
   // width: 360px;
   .widget-classify {
+    position: relative;
     border-right: 1px solid rgba(0, 0, 0, 0.07);
     background-color: #ffffff;
     height: 100%;
@@ -212,4 +214,20 @@ export default {
     }
   }
 }
+
+.github {
+  cursor: pointer;
+  position: absolute;
+  bottom: 12px;
+  font-size: 12px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  width: 100%;
+  img {
+    width: 21px;
+    height: 21px;
+    margin: 0 2px;
+  }
+}
 </style>

src/views/components/CopyRight.vue

@@ -3,7 +3,7 @@
  * @Date: 2022-03-25 15:19:02
  * @Description: 版权声明
  * @LastEditors: ShawnPhang <site: book.palxp.com>
- * @LastEditTime: 2023-07-06 16:48:12
+ * @LastEditTime: 2023-08-08 10:09:59
 -->
 <template>
   <tool-tip title="免责声明" :width="340" :content="content">
@@ -20,7 +20,7 @@ import toolTip from '@/components/common/PopoverTip.vue'
 export default defineComponent({
   components: { toolTip },
   setup() {
-    const content = '本站为个人项目，素材资源均来源于网络，不提供任何版权保障，下载之作品仅供学习研究或欣赏目的而使用，请于24h内自行删除。'
+    const content = '本站为个人项目，所使用素材图片等均为网络收集而来，下载之作品仅供学习研究或欣赏目的而使用，无法提供商用授权哦。'
     return {
       content,
     }