chore: 新增创可贴编辑图片

package.json

@@ -15,6 +15,7 @@
     "cert": "node ./cert.js"
   },
   "dependencies": {
+    "@chuangkit/chuangkit-design": "^2.0.5",
     "@element-plus/icons-vue": "^2.3.1",
     "@fortaine/fetch-event-source": "^3.0.6",
     "@tinymce/tinymce-vue": "^5.0.1",

src/modules/material/all/components/ChuangKitDesign.vue

+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+import CktDesign from '@chuangkit/chuangkit-design'
+import md5 from 'blueimp-md5'
+import { useUserStore } from '@/stores/user'
+import { uploadFileByUrl } from '@/utils/upload'
+
+const model = defineModel()
+const emit = defineEmits(['close'])
+
+const userStore = useUserStore()
+
+/**
+ * 构建签名
+ * @param obj 参数对象，对象中的所有属性全部参与签名的生成
+ * @returns {string} 签名
+ */
+const buildSign = obj => {
+  let signParameterArray = []
+  for (let key in obj) {
+    signParameterArray.push(`${key}=${obj[key]}`)
+  }
+
+  let signPlaintext = signParameterArray.sort().join('&')
+  return md5(signPlaintext).toUpperCase()
+}
+
+/**
+ * 构建2.0版本签名
+ * @param appId 第三方企业id
+ * @param expireTime 时间戳，取当前时间即可
+ * @param userFlag 用户标记
+ * @param appSecret 企业密钥
+ * @returns {string} 签名
+ */
+const buildVersion2Sign = (appId, expireTime, userFlag, appSecret) => {
+  let signParameterObj = {
+    app_id: appId,
+    expire_time: expireTime,
+    user_flag: userFlag,
+    app_secret: appSecret
+  }
+
+  return buildSign(signParameterObj)
+}
+
+window.chuangkitComplete = async result => {
+  if (!result.cktMessage) {
+    return
+  }
+  if (result.kind == 2) {
+    for (const url of result['source-urls']) {
+      const uploadedURL = await uploadFileByUrl(url)
+      model.value = uploadedURL
+    }
+  }
+  if ([1, 2, 3].includes(result.kind)) {
+    emit('close')
+  }
+  console.log('编辑器加载完成，回调函数...', result)
+}
+
+let cktInstance
+function openDesignPage() {
+  const appId = 'f184cee934e648ac989b795fcffdeceb'
+  const appSecret = '5E6DC58007D6567817A88809740CE4D2'
+  const userFlag = userStore.user.id
+  const expireTime = Date.now()
+  const sign = buildVersion2Sign(appId, expireTime, userFlag, appSecret)
+  let params = {
+    app_id: appId,
+    expire_time: expireTime,
+    user_flag: userFlag,
+    device_type: 1,
+    kind_id: 447,
+    version: '2.0',
+    sign: sign
+  }
+
+  cktInstance = new CktDesign(params)
+  cktInstance.open()
+  console.log(cktInstance)
+}
+
+function closeDesignPage() {
+  if (cktInstance) {
+    cktInstance.close()
+  }
+}
+
+onMounted(() => openDesignPage())
+onUnmounted(() => closeDesignPage())
+</script>
+
+<template>
+  <div id="ckt-design-page"></div>
+</template>

src/modules/material/all/components/StepOne.vue

@@ -25,6 +25,16 @@ async function handleNext() {
   await handleValidate()
   emit('next')
 }
+
+function wayDisabled(item, type) {
+  if (item.value == 1) {
+    return !['1', '2'].includes(type)
+  }
+  if (item.value == 3) {
+    return !['2', '8'].includes(type)
+  }
+  return false
+}
 </script>
 
 <template>
@@ -41,7 +51,7 @@ async function handleNext() {
       </el-form-item>
       <el-form-item label="创作方式" prop="way">
         <el-radio-group v-model="form.way">
-          <el-radio v-for="item in materialMethodList" :key="item.value" :value="item.value" :disabled="item.value == 1 && !['1', '2'].includes(form.type)">{{
+          <el-radio v-for="item in materialMethodList" :key="item.value" :value="item.value" :disabled="wayDisabled(item, form.type)">{{
             item.label
           }}</el-radio>
         </el-radio-group>

src/modules/material/all/components/StepThree.vue

@@ -3,6 +3,7 @@ import { useMapStore } from '@/stores/map'
 import { getNameByValue, materialMethodList } from '@/utils/dictionary'
 import AppUpload from '@/components/base/AppUpload.vue'
 import AIChat from './AIChat.vue'
+import ChuangKitDesign from './ChuangKitDesign.vue'
 
 defineProps(['action'])
 
@@ -34,6 +35,8 @@ async function handleSubmit() {
   await handleValidate()
   emit('submit')
 }
+
+const designVisible = ref(false)
 </script>
 
 <template>
@@ -56,8 +59,11 @@ async function handleSubmit() {
             <el-input type="textarea" rows="14" v-model="form.content"></el-input>
           </template>
           <template v-if="['2', '6', '7', '8'].includes(form.type)">
-            <!-- 图片|二维码|小程序｜卡券 -->
-            <AppUpload v-model="form.content" accept="image/*"></AppUpload>
+            <div>
+              <!-- 图片|二维码|小程序｜卡券 -->
+              <AppUpload v-model="form.content" accept="image/*"></AppUpload>
+              <el-button type="primary" @click="designVisible = true" v-if="form.way == 3">打开编辑器</el-button>
+            </div>
           </template>
           <template v-if="form.type == 3">
             <!-- 语音 -->
@@ -93,6 +99,7 @@ async function handleSubmit() {
         <el-button type="primary" @click="handleSubmit" v-if="action !== 'view'">提交</el-button>
       </el-row>
     </el-card>
+    <ChuangKitDesign v-model="form.content" @close="designVisible = false" v-if="designVisible"></ChuangKitDesign>
   </div>
 </template>