feat: upload components Demo button

service/src/service/design.ts

@@ -3,7 +3,7 @@
  * @Date: 2024-05-16 18:25:10
  * @Description: 示例代码，仅供参考
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2024-08-12 16:05:33
+ * @LastEditTime: 2024-08-17 11:22:42
  */
 import { Request, Response } from 'express'
 const fs = require('fs')
@@ -38,7 +38,7 @@ module.exports = {
      * @apiGroup design
      */
     const { cate, type, id } = req.query
-    const dPath = type == 1 ? `../mock/components/detail/${id}.json` : `../mock/templates/poster${id}.json`
+    const dPath = type == 1 ? `../mock/components/detail/${id}.json` : `../mock/templates/${id}.json`
     try {
       const detail = fs.readFileSync(path.resolve(__dirname, dPath), 'utf8')
       send.success(res, JSON.parse(detail))
@@ -78,10 +78,12 @@ module.exports = {
      * @apiGroup design
      */
     let { id, title, data, width, height, type, cate, tag } = req.body
+    const folder = type == 1 ? 'components/detail' : 'templates'
+    const listPath = type == 1 ? 'components/list/comp.json' : 'templates/list.json'
     try {
       const isAdd = !id // 是否新增模板
       id = id || randomCode(8)
-      const savePath = path.resolve(__dirname, `../mock/templates/poster${id}.json`)
+      const savePath = path.resolve(__dirname, `../mock/${folder}/${id}.json`)
       const jsonData = {
         id,
         data,
@@ -96,10 +98,11 @@ module.exports = {
       await axios.get(fetchScreenshotUrl, { responseType: 'arraybuffer' })
       // 保存到其他地方可以设置 responseType: 'arraybuffer' 后操作buffer，这里只为了得到封面，发起请求就可以了
       if (isAdd) {
-        const listVal = fs.readFileSync(path.resolve(__dirname, `../mock/templates/list.json`), 'utf8')
+        const listVal = fs.readFileSync(path.resolve(__dirname, `../mock/${listPath}`), 'utf8')
         const list = JSON.parse(listVal)
-        list.unshift({ id, cover: FileUrl + `/${id}-cover.jpg`, title, width, height })
+        const cover = type == 1 ? FileUrl + `/${id}-screenshot.png` : FileUrl + `/${id}-cover.jpg`
-        fs.writeFileSync(path.resolve(__dirname, `../mock/templates/list.json`), JSON.stringify(list))
+        list.unshift({ id, cover, title, width, height })
+        fs.writeFileSync(path.resolve(__dirname, `../mock/${listPath}`), JSON.stringify(list))
       }
       send.success(res, { id })
     } catch (error) {

service/src/service/screenshots.ts

@@ -3,7 +3,7 @@
  * @Date: 2020-07-22 20:13:14
  * @Description: 服务端截图
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2024-08-12 11:03:07
+ * @LastEditTime: 2024-08-17 11:23:58
  */
 const { saveScreenshot } = require('../utils/download-single.ts')
 const uuid = require('../utils/uuid.ts')

src/components/modules/panel/wrap/TextListWrap.vue

@@ -15,6 +15,7 @@
         {{ item.text }}
       </div>
     </ul>
+    <el-button class="upload-psd" plain type="primary" @click="openPSD">导入 PSD 创建组合</el-button>
     <div class="other-text-wrap">
       <comp-list-wrap />
     </div>
@@ -27,8 +28,7 @@
 import { storeToRefs } from 'pinia';
 // import wText from '../../widgets/wText/wText.vue'
 import { wTextSetting } from '../../widgets/wText/wTextSetting'
-
+import { useRouter } from 'vue-router';
-
 import { useControlStore, useCanvasStore, useWidgetStore } from '@/store';
 
 type TBasicTextData = {
@@ -40,6 +40,7 @@ type TBasicTextData = {
 
 const controlStore = useControlStore()
 const widgetStore = useWidgetStore()
+const router = useRouter()
 
 const { dPage } = storeToRefs(useCanvasStore())
 
@@ -93,6 +94,11 @@ const basicTextList: TBasicTextData[] = [
   //   fontWeight: 'normal',
   // },
 ]
+
+const openPSD = () => {
+  window.open(router.resolve('/psd?type=1').href, '_blank')
+}
+
 defineExpose({
   selectBasicText,
 })
@@ -136,4 +142,8 @@ defineExpose({
     width: 100%;
   }
 }
+.upload-psd {
+  margin: 0 1rem;
+  width: calc(100% - 2rem);
+}
 </style>

src/views/Draw.vue

@@ -54,12 +54,12 @@ async function load() {
     let content = JSON.parse(data)
     const isGroupTemplate = Number(type) == 1
 
-    if (Array.isArray(content)) {
+    if (Array.isArray(content) && !isGroupTemplate) {
       const { global, layers } = content[index]
       content = {page: global, widgets: layers}
     }
     const widgets = isGroupTemplate ? content : content.widgets
-
+    
     if (isGroupTemplate) {
       dPage.value.width = width
       dPage.value.height = height

src/views/components/HeaderOptions.vue

@@ -3,7 +3,7 @@
  * @Date: 2022-01-12 11:26:53
  * @Description: 顶部操作按钮组
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2024-08-12 18:08:00
+ * @LastEditTime: 2024-08-17 09:49:01
 -->
 <template>
   <div class="top-title"><el-input v-model="state.title" placeholder="未命名的设计" class="input-wrap" /></div>
@@ -107,6 +107,7 @@ async function save(hasCover: boolean = false) {
 // 保存模板
 async function saveTemp() {
   const { tempid, tempType: type } = route.query
+  if (!tempid) return
   let res = null
   const data = widgetStore.dLayouts
   if (Number(type) == 1) {

src/views/components/UploadTemplate.vue

@@ -3,7 +3,7 @@
  * @Date: 2022-07-12 11:26:53
  * @Description: 上传用户模板
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2024-08-12 14:11:57
+ * @LastEditTime: 2024-08-17 10:51:11
 -->
 <template>
   <el-button v-show="isDone" type="primary" plain @click="prepare"><b>上传模板</b></el-button>
@@ -43,9 +43,9 @@ type TEmits = {
 }
 
 type TState = {
-  stateBollean: false,
+  stateBollean: false
-  title: '',
+  title: ''
-  loading: false,
+  loading: false
 }
 
 // const { dWidgets } = useSetupMapGetters(['dWidgets'])
@@ -71,17 +71,17 @@ const state = reactive<TState>({
 useFontStore.init() // 初始化加载字体
 
 // 生成封面
-const draw = () => {
+// const draw = () => {
-  return new Promise<string>((resolve) => {
+//   return new Promise<string>((resolve) => {
-    if (!canvasImage.value) {
+//     if (!canvasImage.value) {
-      resolve('')
+//       resolve('')
-    } else {
+//     } else {
-      canvasImage.value.createCover(({ key }: { key: string }) => {
+//       canvasImage.value.createCover(({ key }: { key: string }) => {
-        resolve(_config.IMG_URL + key)
+//         resolve(_config.IMG_URL + key)
-      })
+//       })
-    }
+//     }
-  })
+//   })
-}
+// }
 
 let addition = 0 // 累加大小
 let lenCount = 0 // 全部大小
@@ -90,10 +90,27 @@ const queue: TdWidgetData[] = [] // 队列
 let widgets: TdWidgetData[] = []
 let page: Record<string, any> = {}
 
+const { type } = route.query
+
 async function prepare() {
-  // store.commit('setShowMoveable', false) // 清理掉上一次的选择框
   controlStore.setShowMoveable(false) // 清理掉上一次的选择框
 
+  if (Number(type) == 1) {
+    // 保存组件，组合元素要保证在最后一位
+    if (dWidgets.value[0].type === 'w-group') {
+      const group: any = dWidgets.value.shift()
+      if (!group) return
+      group.record.width = 0
+      group.record.height = 0
+      dWidgets.value.push(group)
+    }
+    // TIP：上传组件必须将所有图层组合成组
+    if (!dWidgets.value.some((x: Record<string, any>) => x.type === 'w-group')) {
+      alert('请将所有图层组合成组再提交上传')
+      return
+    }
+  }
+
   addition = 0
   lenCount = 0
   widgets = dWidgets.value
@@ -106,7 +123,7 @@ async function prepare() {
 
   for (const item of widgets) {
     if (item.type === 'w-image') {
-      lenCount += (item.imgUrl?.length || 0)
+      lenCount += item.imgUrl?.length || 0
       queue.push(item)
     }
   }
@@ -119,7 +136,7 @@ async function uploadImgs() {
     const item = queue.pop()
     if (!item) return
     const url = await github.putPic((item?.imgUrl || '').split(',')[1])
-    addition += (item.imgUrl?.length || 0)
+    addition += item.imgUrl?.length || 0
     let downloadPercent: number | null = (addition / lenCount) * 100
     downloadPercent >= 100 && (downloadPercent = null)
     emit('change', { downloadPercent, downloadText: '上传资源中', downloadMsg: `已完成：${lens - queue.length} / ${lens}` })
@@ -130,14 +147,15 @@ async function uploadImgs() {
   }
 }
 
-    const uploadTemplate = async () => {
+const uploadTemplate = async () => {
-      emit('change', { downloadPercent: 95, downloadText: '正在处理封面', downloadMsg: '即将结束...' })
+  emit('change', { downloadPercent: 95, downloadText: '正在处理封面', downloadMsg: '即将结束...' })
-      // const cover = await draw()
+  // const cover = await draw()
-      const { id, stat, msg } = await api.home.saveTemp({ title: '自设计模板', data: JSON.stringify({ page, widgets }), width: page.width, height: page.height })
+  const data = Number(type) == 1 ? JSON.stringify(widgets) : JSON.stringify({ page, widgets })
-      stat !== 0 ? useNotification('保存成功', '') : useNotification('保存失败', msg, { type: 'error' })
+  const { id, stat, msg } = await api.home.saveTemp({ title: '自设计模板', type, data, width: page.width, height: page.height })
-      router.push({ path: '/psd', query: { id }, replace: true })
+  stat !== 0 ? useNotification('保存成功', '') : useNotification('保存失败', msg, { type: 'error' })
-      emit('change', { downloadPercent: 99.99, downloadText: '上传完成', cancelText: '' }) // 关闭弹窗
+  router.push({ path: '/psd', query: { id }, replace: true })
-    }
+  emit('change', { downloadPercent: 99.99, downloadText: '上传完成', cancelText: '' }) // 关闭弹窗
+}
 
 defineExpose({
   prepare,