diff --git a/src/api/github.ts b/src/api/github.ts index 4e19e71..5bcedd3 100644 --- a/src/api/github.ts +++ b/src/api/github.ts @@ -11,19 +11,20 @@ const cutToken = 'ghp_qpV8PUxwY7as4jc' const reader = new FileReader() function getBase64(file: File) { return new Promise((resolve) => { - reader.onload = function (event: any) { - const fileContent = event.target.result - resolve(fileContent.split(',')[1]) + reader.onload = function (event) { + const fileContent = event.target && event.target.result + resolve((fileContent as string).split(',')[1]) } reader.readAsDataURL(file) }) } -const putPic = async (file: any) => { +const putPic = async (file: File | string) => { 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 extra = typeof file === 'string' ? '.png' : file.name?.split('.').pop() + const path = `${d.getFullYear()}/${d.getMonth()}/${d.getTime()}${extra}` const imageUrl = 'https://api.github.com/repos/' + repo + '/contents/' + path const body = { branch: 'main', message: 'upload', content, path } const res = await fetch(imageUrl, body, 'put', { diff --git a/src/api/home.ts b/src/api/home.ts index 091bfab..dcdf957 100644 --- a/src/api/home.ts +++ b/src/api/home.ts @@ -41,12 +41,34 @@ type IGetTempListResult = TPageRequestResult // 获取模板列表 export const getTempList = (params: IGetTempListParam) => fetch('design/list', params, 'get') -type TGetTempDetail = { +export type TGetTempDetail = { id: number type?: number } -export const getTempDetail = (params: TGetTempDetail) => fetch<{data: string}>('design/temp', params, 'get') +export type TTempDetail = { + /** 分类 */ + category: number + /** 封面 */ + cover: string + /** 创建时间 */ + created_time: string + /** Template内容 */ + data: string + /** 高度 */ + height: number + id: number + /** 来源 */ + original: string + resource: string + state: string + tag: string | null + title: string + updated_time: string + width: number +} + +export const getTempDetail = (params: TGetTempDetail) => fetch('design/temp', params, 'get') type TGetCategoriesParams = { type?: number @@ -66,19 +88,61 @@ export const getCategories = (params: TGetCategoriesParams) => fetch fetch('design/edit', params, 'post') // export const delTemp = (params: Type.Object = {}) => fetch('/api/template/temp_del', params) +type TGetCompListParam = { + search?: string + page?: number + type?: number + pageSize: number + cate?: number | string +} + +/** 获取组件返回类型 */ +export type TGetCompListResult = { + cover: string + height: number + id: number + state: number + title: string + width: number + name?: string +} + +type getCompListReturn = TPageRequestResult + // 组件相关接口 -export const getCompList = (params: Type.Object = {}) => fetch('design/list', params, 'get') -export const removeComp = (params: Type.Object = {}) => fetch('design/del', params, 'post') +export const getCompList = (params: TGetCompListParam) => fetch('design/list', params, 'get') + +type TRemoveComp = { + id: string | number +} + +export const removeComp = (params: TRemoveComp) => fetch('design/del', params, 'post') // export const getCompDetail = (params: Type.Object = {}) => fetch('/api/template/temp_info', params, 'get') +type TSaveWorksParams = { + title: string + temp_id?: string + width: number + height: number + data: string + cover?: string + id?: string | number +} + +export type TSaveWorksResult = { + id: number | string, + stat?: number, + msg: string +} + // 保存作品 -export const saveWorks = (params: Type.Object = {}) => fetch('design/save', params, 'post') +export const saveWorks = (params: TSaveWorksParams) => fetch('design/save', params, 'post') // 保存个人模板 export const saveMyTemp = (params: Type.Object = {}) => fetch('design/user/temp', params, 'post') // 获取作品 -export const getWorks = (params: Type.Object = {}) => fetch('design/poster', params, 'get') +export const getWorks = (params: TGetTempDetail) => fetch('design/poster', params, 'get') type TGetMyDesignParams = { page: number diff --git a/src/api/material.ts b/src/api/material.ts index 14e720b..8765569 100644 --- a/src/api/material.ts +++ b/src/api/material.ts @@ -38,8 +38,6 @@ export type TGetListData = { export type TGetListResult = TPageRequestResult - - // 获取素材列表: export const getList = (params: TGetListParam) => fetch('design/material', params) @@ -60,7 +58,18 @@ export type TGetFontItemData = { // 获取字体 export const getFonts = (params: TGetFontParam = {}) => fetch>('design/fonts', params) -export const getFontSub = (params: Type.Object = {}, extra: any = {}) => fetch('design/font_sub', params, 'get', {}, extra) + +type TGetFontSubParam = { + font_id: string | number + id: string | number + content: string +} + +type TGetFontSubExtra = { + responseType?: string +} + +export const getFontSub = (params: TGetFontSubParam, extra: TGetFontSubExtra = {}) => fetch('design/font_sub', params, 'get', {}, extra) type TGetImageListParams = { page?: number @@ -74,16 +83,49 @@ export type TGetImageListResult = { url: string user_id: number id: string - thumb: string -} & IGetTempListData + thumb?: string +} & Partial // 图库列表 export const getImagesList = (params: TGetImageListParams) => fetch>('design/imgs', params, 'get') +type TMyPhotoParams = { + + page: number + pageSize?: number +} + +/** 获取我的资源管理返回 */ +export type TMyPhotoResult = { + created_time: string + height: number + id: number + url: string + user_id: number + width: number +} & IGetTempListData + // 我的上传列表 -export const getMyPhoto = (params: TGetImageListParams) => fetch>('design/user/image', params) -export const deleteMyPhoto = (params: Type.Object = {}) => fetch('design/user/image/del', params, 'post') -export const deleteMyWorks = (params: Type.Object = {}) => fetch('design/poster/del', params, 'post') +export const getMyPhoto = (params: TMyPhotoParams) => fetch>('design/user/image', params) + +type TDeleteMyPhotoParams = { + id: string | number + key: string +} + +export const deleteMyPhoto = (params: TDeleteMyPhotoParams) => fetch('design/user/image/del', params, 'post') + +type TDeleteMyWorksParams = { + id: string | number +} + +export const deleteMyWorks = (params: TDeleteMyWorksParams) => fetch('design/poster/del', params, 'post') + +type TAddMyPhotoParam = { + width: number + height: number + url: string +} // 添加图片 -export const addMyPhoto = (params: Type.Object = {}) => fetch('design/user/add_image', params) +export const addMyPhoto = (params: TAddMyPhotoParam) => fetch('design/user/add_image', params) diff --git a/src/components/modules/panel/wrap/CompListWrap.vue b/src/components/modules/panel/wrap/CompListWrap.vue index b20c423..270e0be 100644 --- a/src/components/modules/panel/wrap/CompListWrap.vue +++ b/src/components/modules/panel/wrap/CompListWrap.vue @@ -15,183 +15,212 @@ 推荐组件 --> - + -
    - {{ currentCategory.name }} +
      + {{ state.currentCategory.name }} -
      +
      -
      拼命加载中
      -
      全部加载完毕
      +
      拼命加载中
      +
      全部加载完毕
    - diff --git a/src/components/modules/panel/wrap/UserWrap.vue b/src/components/modules/panel/wrap/UserWrap.vue index 147dcc2..196d815 100644 --- a/src/components/modules/panel/wrap/UserWrap.vue +++ b/src/components/modules/panel/wrap/UserWrap.vue @@ -45,7 +45,7 @@ import api from '@/api' import wImage from '../../widgets/wImage/wImage.vue' import setImageData, { TItem2DataParam } from '@/common/methods/DesignFeatures/setImage' import useConfirm from '@/common/methods/confirm' -import { TGetImageListResult } from '@/api/material' +import { TGetImageListResult, TMyPhotoResult } from '@/api/material' import photoList from './components/photoList.vue' import imgWaterFall from './components/imgWaterFall.vue' import { TUploadDoneData } from '@/components/common/Uploader/index.vue' diff --git a/src/components/modules/settings/EffectSelect/TextWrap.vue b/src/components/modules/settings/EffectSelect/TextWrap.vue index 89ee73f..fbbb136 100644 --- a/src/components/modules/settings/EffectSelect/TextWrap.vue +++ b/src/components/modules/settings/EffectSelect/TextWrap.vue @@ -27,10 +27,10 @@ :key="efi + 'effect'" :style="{ color: ef.filling && ef.filling.enable && ef.filling.type === 0 ? ef.filling.color : 'transparent', - webkitTextStroke: ef.stroke && ef.stroke.enable ? `${ef.stroke.width / coefficient}px ${ef.stroke.color}` : '', + WebkitTextStroke: ef.stroke && ef.stroke.enable ? `${ef.stroke.width / coefficient}px ${ef.stroke.color}` : '', textShadow: ef.shadow && ef.shadow.enable ? `${ef.shadow.offsetX / coefficient}px ${ef.shadow.offsetY / coefficient}px ${ef.shadow.blur / coefficient}px ${ef.shadow.color}` : undefined, backgroundImage: ef.filling && ef.filling.enable ? (ef.filling.type === 0 ? undefined : getGradientOrImg(ef)) : undefined, - webkitBackgroundClip: ef.filling && ef.filling.enable ? (ef.filling.type === 0 ? undefined : 'text') : undefined, + WebkitBackgroundClip: ef.filling && ef.filling.enable ? (ef.filling.type === 0 ? undefined : 'text') : undefined, }" class="demo" > @@ -117,7 +117,9 @@ import numberInput from '../numberInput.vue' import draggable from 'vuedraggable' import api from '@/api' import getGradientOrImg from '../../widgets/wText/getGradientOrImg' -let froze_font_effect_list: Record[] = [] +import { TGetCompListResult } from '@/api/home' + +let froze_font_effect_list: TGetCompListResult[] = [] type TProps = { modelValue?: Record @@ -132,7 +134,7 @@ type TEmits = { type TState = { strength: number visiable: boolean - list: Record[] + list: TGetCompListResult[] layers: Record[] draging: boolean unfold: boolean diff --git a/src/utils/widgets/loadFontRule.ts b/src/utils/widgets/loadFontRule.ts index a35d0bb..9771f1d 100644 --- a/src/utils/widgets/loadFontRule.ts +++ b/src/utils/widgets/loadFontRule.ts @@ -28,7 +28,7 @@ export const font2style = async (fontContent: any, fontData: any = []) => { } try { const result = await api.material.getFontSub(params, extra) - fontContent[key] = font.oid ? result : await blob2Base64(result) + fontContent[key] = font.oid ? result : await blob2Base64(result as Blob) } catch (e) { console.log('字体获取失败', e) } diff --git a/src/views/components/HeaderOptions.vue b/src/views/components/HeaderOptions.vue index 8c4076e..7f7d5ea 100644 --- a/src/views/components/HeaderOptions.vue +++ b/src/views/components/HeaderOptions.vue @@ -82,7 +82,7 @@ async function save(hasCover: boolean = false) { const { id, tempid } = route.query const cover = hasCover ? await draw() : undefined const widgets = dWidgets.value // reviseData() - const { id: newId, stat, msg } = await api.home.saveWorks({ cover, id, title: state.title || '未命名设计', data: JSON.stringify({ page: dPage.value, widgets }), temp_id: tempid, width: dPage.value.width, height: dPage.value.height }) + const { id: newId, stat, msg } = await api.home.saveWorks({ cover, id: (id as string), title: state.title || '未命名设计', data: JSON.stringify({ page: dPage.value, widgets }), temp_id: (tempid as string), width: dPage.value.width, height: dPage.value.height }) stat !== 0 ? useNotification('保存成功', '可在"我的作品"中查看') : useNotification('保存失败', msg, { type: 'error' }) !id && router.push({ path: '/home', query: { id: newId }, replace: true }) store.commit('setShowMoveable', true) @@ -199,7 +199,7 @@ async function load(id: number, tempId: number, type: number, cb: () => void) { } function draw() { - return new Promise((resolve) => { + return new Promise((resolve) => { if (!canvasImage.value) resolve('') else { canvasImage.value.createCover(({ key }: {key: string}) => { diff --git a/src/views/components/UploadTemplate.vue b/src/views/components/UploadTemplate.vue index 3fb2562..202c61d 100644 --- a/src/views/components/UploadTemplate.vue +++ b/src/views/components/UploadTemplate.vue @@ -66,7 +66,7 @@ useFontStore.init() // 初始化加载字体 // 生成封面 const draw = () => { - return new Promise((resolve) => { + return new Promise((resolve) => { if (!canvasImage.value) { resolve('') } else {