chore: 创可贴在线设计获取原图

.env

-VITE_API_URL_WORD = https://zijingebook.ezijing.com/file/
+# VITE_API_URL_WORD = https://zijingebook.ezijing.com/file/
+VITE_API_URL_WORD = https://book-admin-web.ezijing.com/api
+
 VITE_API_BASE_API_PREFFIX = /api
-VITE_API_WEBSOCKET_URL = wss://zijingebook.ezijing.com
+
+# VITE_API_WEBSOCKET_URL = wss://zijingebook.ezijing.com
+VITE_API_WEBSOCKET_URL = wss://book-admin-web.ezijing.com/ws
+
 VITE_API_OPENAI_URL = https://model-platform-skyagents.tiangong.cn
\ No newline at end of file

.env.ali

-VITE_API_URL_WORD = http://8.141.148.247:7419
-VITE_API_BASE_API_PREFFIX = /api
-VITE_API_WEBSOCKET_URL = ws://8.141.148.247:7420
-VITE_API_OPENAI_URL = https://model-platform-skyagents.tiangong.cn

.env.development

-# VITE_API_URL_WORD = https://zijingebook.ezijing.com/api
+# VITE_API_URL_WORD = https://zijingebook.ezijing.com/file/
 VITE_API_URL_WORD = https://book-admin-web.ezijing.com/api
-# VITE_API_URL_WORD = http://ebook-pc.ezijing.com:7419
+
 VITE_API_BASE_API_PREFFIX = /api
-VITE_API_WEBSOCKET_URL = wss://zijingebook.ezijing.com
+
+# VITE_API_WEBSOCKET_URL = wss://zijingebook.ezijing.com
+VITE_API_WEBSOCKET_URL = wss://book-admin-web.ezijing.com/ws
+
 VITE_API_OPENAI_URL = https://model-platform-skyagents.tiangong.cn
\ No newline at end of file

package.json

@@ -7,17 +7,18 @@
     "dev": "vite",
     "build": "vite build",
     "build:dev": "vite build --mode development",
-    "build:ali": "vite build --mode ali",
     "preview": "vite preview",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx --fix --ignore-path .gitignore ./src"
   },
   "dependencies": {
     "@ant-design/icons": "^5.3.7",
+    "@chuangkit/chuangkit-design": "^2.0.8",
     "@fortaine/fetch-event-source": "^3.0.6",
     "@reduxjs/toolkit": "^1.9.7",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-react": "^1.0.6",
     "@wangeditor/plugin-link-card": "^1.0.0",
+    "ahooks": "^3.8.0",
     "ali-oss": "^6.20.0",
     "antd": "^5.18.1",
     "axios": "^1.6.2",

src/api/chuangkit.js

 import axios from '@/utils/axios'
 
 // 查询我的设计
-export function getChuangKitDesigns(data) {
+export function getDesignList(data) {
   return axios.post('/api/ai/chuangKit/designs', data)
 }
+
+// 下载图片
+export function getSourceImage(data) {
+  return axios.post('/api/ai/chuangKit/getSourceImage', data)
+}
+
+// 下载图片
+export function getDesignDownloadList(data) {
+  return axios.post('/api/ai/chuangKit/getDesignDownloadList', data)
+}

src/common/wangeditor-customer/components/onlineImageList.jsx

-import { getChuangKitDesigns } from '@/api/chuangkit'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { useSelector } from 'react-redux'
 import { Spin, Empty } from 'antd'
+import { useWebSocket, useInterval } from 'ahooks'
+import { getDesignList, getSourceImage } from '@/api/chuangkit'
+import { uploadFileByUrl } from '@/utils/oss'
 
 export default function OnlineImageList({ imgUrl, onChange }) {
   const [isLoading, setLoading] = useState(false)
   const [list, setList] = useState([])
   const { userInfo } = useSelector((state) => state.user)
-  useEffect(() => {
+
+  const fetchDesignList = useCallback(async () => {
     setLoading(true)
-    getChuangKitDesigns({ params: { time_order: 1, user_flag: userInfo.id, page_no: 1, page_size: 1000 } })
-      .then((res) => {
-        setList(res.data.list)
+    try {
+      const res = await getDesignList({
+        params: {
+          time_order: 1,
+          user_flag: userInfo.id,
+          page_no: 1,
+          page_size: 1000
+        }
       })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [userInfo])
+      setList(res.data.list)
+    } catch (error) {
+      console.error('Failed to fetch design list:', error)
+    } finally {
+      setLoading(false)
+    }
+  }, [userInfo.id])
+
+  useEffect(() => {
+    fetchDesignList()
+  }, [fetchDesignList])
+
+  const { readyState, latestMessage, sendMessage, disconnect } = useWebSocket('wss://book-admin-web.ezijing.com/ws')
+
+  useEffect(() => {
+    if (readyState === 1) {
+      sendMessage(JSON.stringify({ user_id: userInfo.id }))
+    }
+    return () => {
+      if (readyState === 1) {
+        disconnect()
+      }
+    }
+  }, [readyState, sendMessage, userInfo.id, disconnect])
+
+  useInterval(() => {
+    if (readyState === 1) {
+      sendMessage(JSON.stringify({ heart: 1 }))
+    }
+  }, 5000)
+
+  const handleMessage = useCallback(
+    async (message) => {
+      const data = JSON.parse(message.data)
+      const designId = data.data?.designId || ''
+      const downloadUrls = data.data?.downloadUrls || []
+      if (designId && downloadUrls.length) {
+        const [firstUrl = ''] = downloadUrls
+        const url = await uploadFileByUrl(firstUrl)
+        setList((prevList) =>
+          prevList.map((item) =>
+            item.designId === designId
+              ? {
+                  ...item,
+                  thumbUrl: url,
+                  isDownload: true
+                }
+              : item
+          )
+        )
+        onChange(url)
+      }
+    },
+    [onChange]
+  )
+
+  useEffect(() => {
+    if (latestMessage) handleMessage(latestMessage)
+  }, [latestMessage, handleMessage])
+
+  const handleClick = useCallback(
+    async (item) => {
+      onChange(item.thumbUrl)
+      if (!item.isDownload) {
+        await getSourceImage({
+          params: {
+            userFlag: userInfo.id,
+            designId: item.designId
+          }
+        })
+      }
+    },
+    [onChange, userInfo.id]
+  )
+
   return (
     <Spin spinning={isLoading}>
       <div className="online-image-list">
         {list.length ? (
-          list.map((item) => {
-            return (
-              <div
-                className={'online-image-list-item ' + (imgUrl === item.thumbUrl ? 'is-active' : '')}
-                key={item.designId}
-                onClick={() => onChange(item.thumbUrl)}>
-                <img src={item.thumbUrl} />
-              </div>
-            )
-          })
+          list.map((item) => (
+            <div className={`online-image-list-item ${imgUrl === item.thumbUrl ? 'is-active' : ''}`} key={item.designId} onClick={() => handleClick(item)}>
+              <img src={item.thumbUrl} alt="" />
+            </div>
+          ))
         ) : (
           <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
         )}

src/pages/books/design/index.jsx

 import md5 from 'js-md5'
-import qs from 'qs'
+import CktDesign from '@chuangkit/chuangkit-design'
 import { useSelector } from 'react-redux'
+import { useEffect } from 'react'
 
 export default function Design() {
   /**
@@ -8,7 +9,7 @@ export default function Design() {
    * @param obj 参数对象，对象中的所有属性全部参与签名的生成
    * @returns {string} 签名
    */
-  const buildSign = obj => {
+  const buildSign = (obj) => {
     let signParameterArray = []
     for (let key in obj) {
       signParameterArray.push(`${key}=${obj[key]}`)
@@ -37,8 +38,11 @@ export default function Design() {
     return buildSign(signParameterObj)
   }
 
-  const { userInfo } = useSelector(state => state.user)
-  const buildQueryString = () => {
+  const { userInfo } = useSelector((state) => state.user)
+
+  let cktInstance
+
+  const openDesignPage = () => {
     const appId = '54d9adec77d0402794018d166110f3dd'
     const appSecret = '08097010E0EF4B85EE2B8CE438328249'
     const userFlag = userInfo.id
@@ -56,13 +60,27 @@ export default function Design() {
       taxpayer_name: 'chuangkit',
       taxpayer_phone: '13820659475',
       taxpayer_number: '91120116636067462H',
-      env: 'prod',
-      reptile: 1
+      render: 'ckt-design-page'
     }
-    return qs.stringify(params)
+    cktInstance = new CktDesign(params)
+    cktInstance.open()
+    console.log(cktInstance)
+  }
+
+  const closeDesignPage = () => {
+    cktInstance && cktInstance.close()
   }
 
-  const src = `https://www.chuangkit.com/apiauthorize?${buildQueryString()}`
+  useEffect(() => {
+    openDesignPage()
+    return () => {
+      closeDesignPage()
+    }
+  }, [])
+
+  window.chuangkitComplete = (data) => {
+    console.log(data)
+  }
 
-  return <iframe src={src} style={{ border: 0, width: '100% ', height: '100%' }}></iframe>
+  return <div id="ckt-design-page" style={{ width: '100%', height: '100%' }}></div>
 }

src/utils/oss.js

+import axios from 'axios'
 import OSS from 'ali-oss'
 import { getSTSToken } from '@/api/base'
 
-// 获取token
-export async function getToken() {
-  const { data } = await getSTSToken()
-  return { ...data, accessKeyId: data.AccessKeyId, accessKeySecret: data.AccessKeySecret, stsToken: data.SecurityToken }
+let ossInstance = null
+
+// 获取STS Token的包装函数
+async function getOSSConfig() {
+  try {
+    const { data } = await getSTSToken()
+    return {
+      ...data,
+      accessKeyId: data.AccessKeyId,
+      accessKeySecret: data.AccessKeySecret,
+      stsToken: data.SecurityToken
+    }
+  } catch (error) {
+    handleError(error, 'Failed to retrieve STS token')
+  }
+}
+
+// 创建OSS实例
+async function createOSSInstance() {
+  if (ossInstance) {
+    return ossInstance
+  }
+  try {
+    const config = await getOSSConfig()
+    ossInstance = new OSS({
+      bucket: 'zxts-book-file',
+      ...config,
+      refreshSTSToken: async () => {
+        return await getOSSConfig()
+      },
+      refreshSTSTokenInterval: 14 * 60 * 1000
+    })
+    return ossInstance
+  } catch (error) {
+    handleError(error, 'Failed to create OSS instance')
+  }
+}
+
+// 上传文件
+export async function uploadFile(file) {
+  try {
+    const oss = await createOSSInstance()
+    const fileName = `${new Date().getTime()}-${Math.random() * 1000}.jpg`
+    const result = await oss.put(fileName, file)
+    return result.url
+  } catch (error) {
+    handleError(error, 'Failed to upload file')
+  }
+}
+
+// 上传通过URL获取的文件
+export async function uploadFileByUrl(url) {
+  try {
+    const res = await axios.get(url, { responseType: 'blob' })
+    return await uploadFile(res.data)
+  } catch (error) {
+    handleError(error, 'Failed to upload file from URL')
+  }
 }
 
-// 创建oss
-export async function createOSS() {
-  const store = new OSS({
-    bucket: 'zxts-book-file',
-    ...(await getToken()),
-    refreshSTSToken: async () => {
-      return await getToken()
-    },
-    refreshSTSTokenInterval: 14 * 60 * 1000
-  })
-  return store
+// 通用错误处理函数
+function handleError(error, message) {
+  console.error(message, error)
+  throw new Error(`${message}: ${error.message}`)
 }