mirror of
https://github.com/palxiao/poster-design.git
synced 2025-07-28 04:10:31 +08:00
feat: keyCode menu
This commit is contained in:
ShawnPhang
parent
50d193c067
commit
74b0395b66
8
package-lock.json
generated
8
package-lock.json
generated
@ -19,7 +19,7 @@
|
||||
"core-js": "^3.6.5",
|
||||
"cropperjs": "^1.6.1",
|
||||
"dayjs": "^1.10.7",
|
||||
"element-plus": "^2.3.7",
|
||||
"element-plus": "^2.6.3",
|
||||
"fontfaceobserver": "^2.1.0",
|
||||
"html2canvas": "^1.4.1",
|
||||
"mitt": "^3.0.1",
|
||||
@ -1972,9 +1972,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/element-plus": {
|
||||
"version": "2.6.1",
|
||||
"resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.6.1.tgz",
|
||||
"integrity": "sha512-6VRpLjwtIVdtUuITJPPKtpOH1NM6nuAkRE3q5O4Lrx0N1bYMhTkiqb2Jy7zfQuDPbOIkkF2OABTzegpNnzgsnQ==",
|
||||
"version": "2.6.3",
|
||||
"resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.6.3.tgz",
|
||||
"integrity": "sha512-U4L/mr+1r+EmAUYUHrs0V/8hHMdBGP07rPymSC72LZCN4jK1UwygQYICegTQ5us4mxeqBvW6wfoEfo003fwCqw==",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^3.4.1",
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
"core-js": "^3.6.5",
|
||||
"cropperjs": "^1.6.1",
|
||||
"dayjs": "^1.10.7",
|
||||
"element-plus": "^2.3.7",
|
||||
"element-plus": "^2.6.3",
|
||||
"fontfaceobserver": "^2.1.0",
|
||||
"html2canvas": "^1.4.1",
|
||||
"mitt": "^3.0.1",
|
||||
|
||||
@ -55,6 +55,16 @@
|
||||
&-item {
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
.icon {
|
||||
// font-size: 18px;
|
||||
color: #333333;
|
||||
}
|
||||
.text {
|
||||
font-weight: 600;
|
||||
margin-left: .4rem;
|
||||
}
|
||||
}
|
||||
.disable {
|
||||
cursor: not-allowed;
|
||||
@ -62,37 +72,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
// .top-title {
|
||||
// color: @color-black;
|
||||
// cursor: pointer;
|
||||
// flex: 1;
|
||||
// padding-left: 3.2rem;
|
||||
// // font-weight: bold;
|
||||
// .input-wrap {
|
||||
// width: 15rem;
|
||||
// :deep(input) {
|
||||
// border: none;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .top-icon-wrap {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// padding-right: 20px;
|
||||
// height: @height2;
|
||||
// .top-icon {
|
||||
// background-color: rgba(0, 0, 0, 0.4);
|
||||
// border-radius: 5px;
|
||||
// color: @color-white;
|
||||
// cursor: pointer;
|
||||
// font-weight: bold;
|
||||
// margin: 8px;
|
||||
// padding: 5px 8px;
|
||||
// &:hover {
|
||||
// background-color: rgba(0, 0, 0, 0.5);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
.primary-btn {
|
||||
font-weight: 600;
|
||||
transform: scale(0.95);
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-design-index-wrap {
|
||||
@ -109,21 +93,6 @@
|
||||
// .page-design-index-wrap ::-webkit-scrollbar {
|
||||
// display: none; /* Chrome Safari */
|
||||
// }
|
||||
|
||||
.extra-operation {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
margin-left: 52px;
|
||||
}
|
||||
.extra-operation::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: -50px;
|
||||
background: #e8eaec;
|
||||
height: 17px;
|
||||
width: 1px;
|
||||
margin: 7px 0 0 18px;
|
||||
}
|
||||
.shelter,
|
||||
.shelter-bg {
|
||||
position: absolute;
|
||||
|
||||
@ -1,578 +0,0 @@
|
||||
<!--
|
||||
* @Author: ShawnPhang
|
||||
* @Date: 2024-01-25 10:35:37
|
||||
* @Description: SD
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2024-02-27 21:52:57
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog v-model="show" align-center style="width: 88%; max-width: 980px" @close="handleClose">
|
||||
<template #header> AIGC（动漫风格大模型） </template>
|
||||
<div class="sd-box">
|
||||
<div class="left">
|
||||
<div class="input-wrap">
|
||||
<el-radio-group v-model="typeIndex" type="card" @change="typeChange">
|
||||
<el-radio-button :value="0">文生图</el-radio-button>
|
||||
<el-radio-button :value="1">图生图</el-radio-button>
|
||||
<el-radio-button disabled :value="2">后期处理</el-radio-button>
|
||||
</el-radio-group>
|
||||
<div v-show="typeIndex == 1" class="wrap">
|
||||
<h2 class="wrap-title">参考图</h2>
|
||||
<uploader :hold="true" :drag="true" :multiple="false" class="uploader" @load="selectFile">
|
||||
<div v-show="progress !== 0" class="mask">
|
||||
<el-progress type="circle" :percentage="progress" />
|
||||
</div>
|
||||
<img v-if="localImage" :src="localImage" />
|
||||
<div v-else class="uploader__box">
|
||||
<icon-upload style="width: 64px; height: 64px" />
|
||||
<div class="el-upload__text">在此拖入或选择<em>上传图片</em></div>
|
||||
<div class="el-upload__tip">支持 jpg/png 格式，大小不超过 500kb </div>
|
||||
</div>
|
||||
</uploader>
|
||||
<br />
|
||||
<number-slider v-model="controlNet.weight" style="font-size: 14px" label="权重" :step="0.05" :maxValue="2" />
|
||||
<el-radio-group v-model="controlNet.mode">
|
||||
<el-radio :value="0">均衡</el-radio>
|
||||
<el-radio :value="1">偏向提示词</el-radio>
|
||||
<el-radio :value="2">偏向原图</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<h2 class="wrap-title">提示词 (不支持中文)</h2>
|
||||
<el-input v-model="params.prompt" maxlength="300" :autosize="{ minRows: 4, maxRows: 6 }" placeholder="输入引导提示词，仅支持解析英文，若输入中文请翻译文本后再提交" show-word-limit type="textarea" @input="promptTyping" />
|
||||
<div style="display: flex; align-items: center; margin-top: 5px; justify-content: space-between">
|
||||
<el-button :loading="isLoading" type="primary" link @click="translation"><i v-show="!isLoading" style="margin-right: 5px" class="icon sd-fanyi" />翻译文本</el-button>
|
||||
<tool-tip :width="260" placement="bottom-end" effect="dark" :content="tips">
|
||||
<span v-show="tips" class="mini-text" style="margin-top: 2px">相关提示词</span>
|
||||
</tool-tip>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="typeIndex == 0" class="wrap">
|
||||
<h2 class="wrap-title">套用预设</h2>
|
||||
<div class="presuppose-box">
|
||||
<div v-for="p in presuppose" :key="p.value" :class="['presuppose', { p_select: p.value === params.depend }]" @click="setDepend(p)">
|
||||
<div class="img" :style="{ backgroundImage: `url(${p.url})` }">
|
||||
<div v-if="p.value === params.depend" class="cancel">取消</div>
|
||||
<div class="mask">{{ p.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<h2 class="wrap-title">图片比例</h2>
|
||||
<el-select v-model="params.ratio" placeholder="选择比例" style="width: 100%">
|
||||
<el-option v-for="item in ratios" :key="item.value" :label="item.label" :value="item.value">
|
||||
<span style="float: left"><i style="margin-right: 1em" :class="['icon', 'sd-scale' + item.value]" />{{ item.label }}</span>
|
||||
<span style="float: right" class="mini-text">{{ item.text }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<h2 class="wrap-title">高级设置</h2>
|
||||
<el-switch v-model="params.is_lcm" active-text="开启极速出图" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttom-wrap">
|
||||
<div class="mianze">
|
||||
<tool-tip :width="260" placement="top-end" effect="dark" content="本服务基于开源AI大模型开发，生成内容不代表本站观点，请遵守法规使用，并承担所有产生的责任。">
|
||||
<span style="display: flex"><InfoFilled width="14" />免责声明</span>
|
||||
</tool-tip>
|
||||
</div>
|
||||
<el-button type="primary" style="width: 100%" @click="submit">在线生成</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="images-box">
|
||||
<div class="box-header">
|
||||
<div style="flex: 1">
|
||||
<el-button :loading="listLoading" link @click="refreshList"><Refresh v-if="!listLoading" style="margin-right: 7px" width="14" />{{ listLoading ? '刷新中...' : '任务列表' }}</el-button>
|
||||
</div>
|
||||
<div class="limit"><span class="mini-text">空间容量:</span> {{ listData.length }} / {{ limit }}</div>
|
||||
</div>
|
||||
<ul v-if="listData.length > 0" ref="listRef" class="result-list" style="overflow: auto">
|
||||
<li v-for="i in listData" :key="'l' + i.id">
|
||||
<div class="mini-text title">
|
||||
{{ i.created_time }}
|
||||
<tool-tip placement="top" :hide-after="10" :offset="6" content="下载图片到本地">
|
||||
<el-button v-show="i.url" style="margin-left: 8px" type="info" link @click="donwload(i)"><icon-download style="margin-right: 4px" width="14" />{{ i.dp ? '下载进度:' + i.dp + '%' : '' }}</el-button>
|
||||
</tool-tip>
|
||||
<tool-tip placement="top" :hide-after="10" :offset="6" content="发送到「图生图」">
|
||||
<el-button v-show="i.url" style="margin-left: 0" type="info" link @click="exportToImg(i)"><icon-upload style="margin-right: 4px" width="14" /></el-button>
|
||||
</tool-tip>
|
||||
<tool-tip placement="top" :hide-after="10" :offset="6" content="导入设计器背景图">
|
||||
<el-button v-show="i.url" style="margin-left: 0" type="info" link @click="exportToPage(i)"><icon-switch style="margin-right: 4px" width="14" /></el-button>
|
||||
</tool-tip>
|
||||
<el-popconfirm title="是否确认删除?" confirm-button-text="确认" cancel-button-text="取消" @confirm="del(i.id)">
|
||||
<template #reference>
|
||||
<el-button v-show="i.state" style="margin-left: 0" type="info" link><icon-delete width="14" /></el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
<img v-if="i.nsfw" :style="{ width: '220px' }" src="https://store.palxp.cn/no_safe.jpg" />
|
||||
<el-progress v-else-if="!i.url" :percentage="i.progress" :status="i.state==2?'exception':''" :stroke-width="15" striped striped-flow :duration="10">
|
||||
<div v-if="i.state==2" style="padding: 0 12px 0 4px" class="mini-text">生成失败</div>
|
||||
<div v-else style="padding: 0 12px 0 4px" class="mini-text">{{ i.progress ? `生成中 ${i.progress} %` : '排队中...' }}</div>
|
||||
</el-progress>
|
||||
<el-image v-else :style="{ height: getViewHeight(i) }" class="result-image" :src="i.url.replace('.png', '_tiny.png')" fit="fill" hide-on-click-modal :lazy="true" :preview-src-list="[i.url]" />
|
||||
</li>
|
||||
</ul>
|
||||
<el-empty v-else v-loading="listLoading" style="height: 80%" description="还没有图片，请从左侧面板中点击生成" />
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, toRefs, ref } from 'vue'
|
||||
import { ElOption, ElSelect, ElEmpty, ElRadioGroup, ElRadioButton, ElRadio, ElProgress, ElPopconfirm } from 'element-plus'
|
||||
import { InfoFilled, Refresh, Delete as IconDelete, Download as IconDownload, Switch as IconSwitch, Picture as IconUpload } from '@element-plus/icons-vue'
|
||||
import toolTip from '@/components/common/PopoverTip.vue'
|
||||
import { useControlStore, useCanvasStore } from '@/store'
|
||||
import api from '@/api'
|
||||
import useNotification from '@/common/methods/notification'
|
||||
import ratios from './ratioOptions.ts'
|
||||
import presuppose from './presuppose.ts'
|
||||
import dayjs from 'dayjs'
|
||||
import downloadImg from '@/common/methods/download/download.ts'
|
||||
import uploader from '@/components/common/Uploader/index.vue'
|
||||
import numberSlider from '@/components/modules/settings/numberSlider.vue'
|
||||
|
||||
export default {
|
||||
components: { ElPopconfirm, ElOption, ElSelect, ElEmpty, toolTip, InfoFilled, ElRadioGroup, ElRadioButton, ElRadio, Refresh, IconDownload, IconDelete, ElProgress, IconSwitch, IconUpload, uploader, numberSlider },
|
||||
setup() {
|
||||
const controlStore = useControlStore()
|
||||
const pageStore = useCanvasStore()
|
||||
const promptRecord = ['','']
|
||||
const state = reactive({
|
||||
show: false,
|
||||
isLoading: false,
|
||||
listLoading: false,
|
||||
typeIndex: 0, // 0 文生图 1 图生图 2 高清修复
|
||||
params: { prompt: '', ratio: '1_1', is_lcm: true, img_url: '' },
|
||||
localImage: '', // 未提交上传的图片
|
||||
controlNet: { weight: 0.5, mode: 0 },
|
||||
progress: 0,
|
||||
limit: '-',
|
||||
listData: [],
|
||||
tips: '', // 预设提示词
|
||||
fileList: []
|
||||
})
|
||||
let localImageFile = null
|
||||
const listRef = ref(null)
|
||||
|
||||
const getListData = (toTop = true) => {
|
||||
state.listLoading = true
|
||||
api.ai
|
||||
.getTaskList()
|
||||
.then((res) => {
|
||||
state.limit = res.limit
|
||||
state.listData = res.list.map((x) => {
|
||||
x.created_time = dayjs(x.created_time).format('YYYY年MM月DD日 HH:mm:ss')
|
||||
return x
|
||||
})
|
||||
setTimeout(() => {
|
||||
listRef.value && toTop && (listRef.value.scrollTop = 0)
|
||||
state.listLoading = false
|
||||
}, 300)
|
||||
})
|
||||
.catch((e) => {
|
||||
state.listLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
const open = async () => {
|
||||
controlStore.setShowMoveable(false)
|
||||
state.show = true
|
||||
getListData()
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
controlStore.setShowMoveable(true)
|
||||
clearTimeout(curTimer)
|
||||
}
|
||||
|
||||
const submit = async () => {
|
||||
try {
|
||||
if (containsChinese(state.params.prompt)) {
|
||||
await translation()
|
||||
}
|
||||
let control_net = ''
|
||||
if (state.typeIndex == 1) {
|
||||
if (state.progress !== 0) {
|
||||
return
|
||||
} else {
|
||||
state.progress = 1
|
||||
await fileUpload()
|
||||
}
|
||||
const {weight, mode} = state.controlNet
|
||||
control_net = JSON.stringify([weight, mode])
|
||||
}
|
||||
const id = await api.ai.addTask({...state.params, type: state.typeIndex, control_net})
|
||||
useNotification('创建成功', '请在任务列表中查看', { type: 'success' })
|
||||
await getListData()
|
||||
taskTimerQueue.push({ id, count: 0 })
|
||||
startTaskRunner()
|
||||
} catch (error) {
|
||||
state.progress = 0
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
// 获取详情
|
||||
const taskTimerQueue = [] // task轮训队列
|
||||
let taskItem = {} // 正在修改的任务
|
||||
const reTryNum = 50 // 重试次数
|
||||
const timeInterval = 2000
|
||||
let curTimer = null // 当前定时器
|
||||
const startTaskRunner = () => {
|
||||
if (!curTimer) {
|
||||
const task = taskTimerQueue.shift()
|
||||
if (task) {
|
||||
curTimer = setTimeout(() => {
|
||||
getTask(task)
|
||||
}, timeInterval)
|
||||
}
|
||||
}
|
||||
}
|
||||
const getTask = async (task) => {
|
||||
const res = await api.ai.getTask({ id: task.id })
|
||||
taskItem = state.listData.find((x) => x.id == task.id)
|
||||
taskItem.progress = res.progress
|
||||
taskItem.state = res.state
|
||||
taskItem.nsfw = res.nsfw
|
||||
taskItem.url = res.url
|
||||
task.count += 1
|
||||
if (task.count > reTryNum || res.state) {
|
||||
curTimer = null
|
||||
startTaskRunner()
|
||||
} else {
|
||||
curTimer = setTimeout(() => {
|
||||
getTask(task)
|
||||
}, timeInterval)
|
||||
}
|
||||
}
|
||||
|
||||
// 翻译中英
|
||||
const translation = async () => {
|
||||
state.isLoading = true
|
||||
try {
|
||||
const res = await api.ai.translation({ text: state.params.prompt })
|
||||
state.params.prompt = res
|
||||
} catch (error) {}
|
||||
state.isLoading = false
|
||||
}
|
||||
|
||||
// 刷新列表
|
||||
const refreshList = () => {
|
||||
getListData()
|
||||
}
|
||||
|
||||
// 删除
|
||||
const del = async (id) => {
|
||||
await api.ai.delTask({ id })
|
||||
getListData(false)
|
||||
}
|
||||
|
||||
// 下载图片
|
||||
const donwload = (i) => {
|
||||
if (!i.dp) {
|
||||
downloadImg(i.url, (d) => {
|
||||
i.dp = d === 100 ? null : d.toFixed(2)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 导入画布
|
||||
const exportToPage = (i) => {
|
||||
const { url, width, height } = i
|
||||
pageStore.dPage.backgroundImage = url
|
||||
pageStore.dPage.width = width
|
||||
pageStore.dPage.height = height
|
||||
}
|
||||
// 导入图生图
|
||||
const exportToImg = ({url}) => {
|
||||
state.localImage = url.replace('.png', '_tiny.png')
|
||||
state.params.img_url = url
|
||||
state.typeIndex = 1
|
||||
}
|
||||
|
||||
// 选择图片
|
||||
const selectFile = async (file) => {
|
||||
state.progress = 0
|
||||
if (file.size > 1024 * 1024 / 2) {
|
||||
state.localImage = ''
|
||||
useNotification('上传图片超出限制', '请重新选择图片上传', { type: 'error' })
|
||||
return false
|
||||
}
|
||||
// 显示选择的图片
|
||||
localImageFile = file
|
||||
state.localImage = URL.createObjectURL(file)
|
||||
// 清空图片缓存
|
||||
state.params.img_url = ''
|
||||
}
|
||||
// 上传图片
|
||||
const fileUpload = async () => {
|
||||
if (!state.params.img_url && state.localImage) {
|
||||
// 上传本地图片
|
||||
const name = (new Date()).getTime()+'_'+(Math.floor(Math.random() * 990000) + 10000)
|
||||
const result = await api.material.upload({file: localImageFile, name}, (up, dp) => {
|
||||
if (up < 100) {
|
||||
state.progress = up
|
||||
} else {
|
||||
state.progress = 100
|
||||
setTimeout(() => {
|
||||
state.progress = 0
|
||||
}, 600);
|
||||
}
|
||||
})
|
||||
state.params.img_url = result.url
|
||||
} else state.progress = 0
|
||||
}
|
||||
|
||||
const setDepend = (p) => {
|
||||
state.params.depend = state.params.depend === p.value ? '' : p.value
|
||||
state.params.prompt = state.params.depend ? p.prompt : ''
|
||||
state.params.ratio = state.params.depend ? p.ratio : '1_1'
|
||||
state.tips = state.params.depend ? p.tips || '' : ''
|
||||
}
|
||||
|
||||
const getViewHeight = ({ width, height }) => 220 * (height / width) + 'px'
|
||||
|
||||
// 检测是否包含中文
|
||||
const containsChinese = (str) => /[\u4e00-\u9fa5]/.test(str)
|
||||
|
||||
// 打字中
|
||||
function promptTyping(v) {
|
||||
promptRecord[state.typeIndex] = v
|
||||
}
|
||||
function typeChange(index) {
|
||||
state.params.prompt = promptRecord[index]
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
open,
|
||||
handleClose,
|
||||
submit,
|
||||
setDepend,
|
||||
translation,
|
||||
presuppose,
|
||||
ratios,
|
||||
getListData,
|
||||
refreshList,
|
||||
listRef,
|
||||
del,
|
||||
donwload,
|
||||
exportToPage,
|
||||
exportToImg,
|
||||
getViewHeight,
|
||||
selectFile,
|
||||
promptTyping,
|
||||
typeChange
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
:deep(.el-dialog__body) {
|
||||
padding: 10px 24px 20px 24px !important;
|
||||
}
|
||||
:deep(.el-upload-dragger) {
|
||||
padding: 10px;
|
||||
}
|
||||
.sd-box {
|
||||
height: calc(95vh - 120px);
|
||||
display: flex;
|
||||
.left {
|
||||
position: relative;
|
||||
width: 348px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
.left::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 2px;
|
||||
background: #f0f1f4;
|
||||
}
|
||||
.input-wrap {
|
||||
height: calc(100% - 67px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.input-wrap::-webkit-scrollbar {
|
||||
display: none; /* Chrome Safari */
|
||||
}
|
||||
.wrap {
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
margin-top: 24px;
|
||||
padding: 16px 14px;
|
||||
background-color: rgb(243 244 249);
|
||||
}
|
||||
.wrap:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.wrap-title {
|
||||
user-select: none;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
.presuppose-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.p_select {
|
||||
border: 2px solid var(--el-color-primary);
|
||||
.img {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.presuppose {
|
||||
padding: 2px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
margin-bottom: 7px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
.cancel {
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.cancel:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.img {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0.9;
|
||||
background-size: 100%;
|
||||
background-position: center center;
|
||||
position: relative;
|
||||
}
|
||||
.img:hover {
|
||||
transition: all 0.3s;
|
||||
opacity: 1;
|
||||
background-size: 120%;
|
||||
// transform: scale3d(1.15, 1.15, 1);
|
||||
}
|
||||
.mask {
|
||||
border-radius: 0 0 8px 8px;
|
||||
position: absolute;
|
||||
text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 22px;
|
||||
width: 100%;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
}
|
||||
.presuppose:nth-child(3n-2),
|
||||
.presuppose:nth-child(3n-1) {
|
||||
margin-right: 13px;
|
||||
}
|
||||
.images-box {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding-left: 24px;
|
||||
.box-header {
|
||||
display: flex;
|
||||
// padding-bottom: 0px;
|
||||
.limit {
|
||||
user-select: none;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
.buttom-wrap {
|
||||
width: 100%;
|
||||
padding-top: 12px;
|
||||
}
|
||||
.mianze {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
height: 22px;
|
||||
span {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.result-list {
|
||||
height: calc(100% - 34px);
|
||||
padding: 0;
|
||||
margin: 12px 0;
|
||||
list-style: none;
|
||||
li {
|
||||
padding-top: 20px;
|
||||
}
|
||||
li:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
.title {
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.result-image {
|
||||
width: 220px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mini-text {
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.uploader {
|
||||
&__box {
|
||||
position: relative;
|
||||
padding: 30px 0;
|
||||
color: #a8abb2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.mask {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backdrop-filter: blur(2px);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(255, 255, 255, .6);
|
||||
}
|
||||
img {
|
||||
height: 240px;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -3,7 +3,7 @@
|
||||
* @Date: 2022-02-13 22:18:35
|
||||
* @Description: 我的
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2024-03-11 01:42:44
|
||||
* @LastEditTime: 2024-04-03 21:00:26
|
||||
-->
|
||||
<template>
|
||||
<div class="wrap">
|
||||
@ -13,9 +13,9 @@
|
||||
</el-tabs>
|
||||
<div v-show="state.tabActiveName === 'pics'">
|
||||
<uploader v-model="state.percent" class="upload" @done="uploadDone">
|
||||
<el-button class="upload-btn" plain>上传图片 <i class="iconfont icon-upload" /></el-button>
|
||||
<el-button class="upload-btn" plain><i class="iconfont icon-upload" /> 上传图片</el-button>
|
||||
</uploader>
|
||||
<el-button class="upload-btn upload-psd" plain type="primary" @click="openPSD">上传 PSD 模板</el-button>
|
||||
<el-button class="upload-btn upload-psd" plain type="primary" @click="openPSD">导入 PSD</el-button>
|
||||
<div style="margin: 1rem; height: 100vh">
|
||||
<photo-list
|
||||
ref="imgListRef"
|
||||
@ -294,11 +294,11 @@ defineExpose({
|
||||
margin: 0 0 0 1rem;
|
||||
display: inline-block;
|
||||
&-btn {
|
||||
width: 160px;
|
||||
width: 170px;
|
||||
font-size: 14px;
|
||||
}
|
||||
&-psd {
|
||||
width: 124px;
|
||||
width: 114px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@ export default {
|
||||
IMG_URL: 'https://store.palxp.cn/', // 七牛云资源地址
|
||||
// ICONFONT_URL: '//at.alicdn.com/t/font_3223711_74mlzj4jdue.css',
|
||||
ICONFONT_URL: '//at.alicdn.com/t/font_2717063_ypy8vprc3b.css?display=swap',
|
||||
ICONFONT_EXTRA: '//at.alicdn.com/t/c/font_3228074_42xym3extur.css',
|
||||
ICONFONT_EXTRA: '//at.alicdn.com/t/c/font_3228074_8r5ffak8d5q.css',
|
||||
QINIUYUN_PLUGIN: 'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/qiniu-js/2.5.5/qiniu.min.js',
|
||||
supportSubFont: true, // 是否开启服务端字体压缩
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
* @Date: 2022-03-09 14:20:09
|
||||
* @Description: 处理常用操作
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2023-11-30 10:09:55
|
||||
* @LastEditTime: 2024-04-04 00:33:01
|
||||
*/
|
||||
import { useControlStore, useWidgetStore } from '@/store'
|
||||
import { TdWidgetData } from '@/store/design/widget'
|
||||
@ -13,19 +13,19 @@ const controlStore = useControlStore()
|
||||
const widgetStore = useWidgetStore()
|
||||
|
||||
export default function keyCodeOptions(e: any, params: any) {
|
||||
const { f } = params
|
||||
const { range } = params
|
||||
switch (e.keyCode) {
|
||||
case 38:
|
||||
udlr('top', -1 * f, e)
|
||||
udlr('top', -1 * range, e)
|
||||
break
|
||||
case 40:
|
||||
udlr('top', Number(f), e)
|
||||
udlr('top', Number(range), e)
|
||||
break
|
||||
case 37:
|
||||
udlr('left', -1 * f, e)
|
||||
udlr('left', -1 * range, e)
|
||||
break
|
||||
case 39:
|
||||
udlr('left', Number(f), e)
|
||||
udlr('left', Number(range), e)
|
||||
break
|
||||
case 46:
|
||||
case 8:
|
||||
|
||||
70
src/mixins/scKeyCodes.ts
Normal file
70
src/mixins/scKeyCodes.ts
Normal file
@ -0,0 +1,70 @@
|
||||
/*
|
||||
* @Author: ShawnPhang
|
||||
* @Date: 2024-04-04 00:36:13
|
||||
* @Description: 快捷键支持列表
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2024-04-05 05:56:27
|
||||
*/
|
||||
const ctrlKey = isMacOS() ? `⌘` : `Ctrl`
|
||||
function isMacOS() {
|
||||
return navigator.userAgent.includes(`Macintosh`) || navigator.userAgent.includes(`Mac OS X`)
|
||||
}
|
||||
|
||||
export default [
|
||||
{
|
||||
feat: `拖拽画布`,
|
||||
info: `空格 + 鼠标拖拽`,
|
||||
},
|
||||
{
|
||||
feat: `画布缩小`,
|
||||
info: `${ctrlKey} - / ${ctrlKey} + 滚轮`,
|
||||
},
|
||||
{
|
||||
feat: `画布放大`,
|
||||
info: `${ctrlKey} + / ${ctrlKey} + 滚轮`,
|
||||
},
|
||||
{
|
||||
feat: `保存`,
|
||||
info: `${ctrlKey} + S`,
|
||||
},
|
||||
{
|
||||
feat: `撤销`,
|
||||
info: `${ctrlKey} + Z`,
|
||||
},
|
||||
{
|
||||
feat: `重做`,
|
||||
info: `${ctrlKey} + Shift + Z`,
|
||||
},
|
||||
{
|
||||
feat: `元素移动`,
|
||||
info: `← ↑ → ↓`,
|
||||
},
|
||||
{
|
||||
feat: `快速移动`,
|
||||
info: `Shift + ← ↑ → ↓`,
|
||||
},
|
||||
{
|
||||
feat: `复制`,
|
||||
info: `${ctrlKey} + C`,
|
||||
},
|
||||
{
|
||||
feat: `粘贴`,
|
||||
info: `${ctrlKey} + V`,
|
||||
},
|
||||
{
|
||||
feat: `删除`,
|
||||
info: `Delete / Backspace`,
|
||||
},
|
||||
{
|
||||
feat: `多选`,
|
||||
info: `${ctrlKey} / Shift + 点选`,
|
||||
},
|
||||
{
|
||||
feat: `成组`,
|
||||
info: `${ctrlKey} + G`,
|
||||
},
|
||||
{
|
||||
feat: `取消选中`,
|
||||
info: `ESC`,
|
||||
},
|
||||
]
|
||||
@ -3,12 +3,8 @@
|
||||
* @Date: 2021-08-01 14:12:08
|
||||
* @Description: 快捷键，目前是mixin形式放入views/index.vue中
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2023-09-19 17:29:06
|
||||
* @LastEditTime: 2024-04-04 00:36:19
|
||||
*/
|
||||
// import store from '@/store'
|
||||
// const _this: any = {}
|
||||
// _this.dHistoryParams = store.getters.dHistoryParams
|
||||
|
||||
import keyCodeOptions from './methods/keyCodeOptions'
|
||||
import dealWithCtrl from './methods/dealWithCtrl'
|
||||
import { TControlStore } from '@/store/design/control'
|
||||
@ -16,21 +12,6 @@ import { useControlStore, useWidgetStore } from '@/store'
|
||||
|
||||
const ignoreNode = ['INPUT', 'TEXTAREA']
|
||||
|
||||
// 系统组合键
|
||||
const systemKeyCode = [
|
||||
{
|
||||
// ctrl+r刷新
|
||||
key: ['ctrlKey', 'metaKey'],
|
||||
code: 82,
|
||||
},
|
||||
{
|
||||
// ctrl+alt+i打开开发者
|
||||
key: ['ctrlKey', 'metaKey'],
|
||||
key2: ['altKey'],
|
||||
code: 73,
|
||||
},
|
||||
]
|
||||
|
||||
let hadDown = false
|
||||
const appContainer: any = document.querySelector('#app')
|
||||
const controlStore = useControlStore()
|
||||
@ -53,11 +34,7 @@ const shortcuts = {
|
||||
const ctrl = e.key === 'Control' || e.key === 'Meta'
|
||||
const alt = e.key === 'Alt'
|
||||
const shift = e.key === 'Shift'
|
||||
// const dir = e.keyCode === 37 || e.keyCode === 38 || e.keyCode === 39 || e.keyCode === 40
|
||||
// const specialKey = ctrl || alt || shift || dir
|
||||
// if (specialKey || e.metaKey) {
|
||||
// hadDown = false
|
||||
// }
|
||||
|
||||
if (shift || ctrl) {
|
||||
store.updateAltDown(true)
|
||||
// store.dispatch('updateAltDown', true)
|
||||
@ -72,28 +49,6 @@ const shortcuts = {
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
// const systemKey = systemKeyCode.find((item) => {
|
||||
// let f = false
|
||||
// let f2 = false
|
||||
// for (let i = 0; i < item.key.length; ++i) {
|
||||
// f = e[item.key[i]]
|
||||
// if (f) {
|
||||
// break
|
||||
// }
|
||||
// }
|
||||
// if (item.key2) {
|
||||
// for (let i = 0; i < item.key2.length; ++i) {
|
||||
// f2 = e[item.key2[i]]
|
||||
// if (f2) {
|
||||
// break
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// return f && f2 && e.keyCode === item.code
|
||||
// })
|
||||
// if (systemKey) {
|
||||
// return
|
||||
// }
|
||||
const withCtrl = e.ctrlKey || e.metaKey
|
||||
if (withCtrl && !(ctrl || alt || shift)) {
|
||||
dealCtrl(e, instance)
|
||||
@ -104,20 +59,9 @@ const shortcuts = {
|
||||
// return
|
||||
// }
|
||||
const withShift = e.shiftKey
|
||||
// if (withShift && !specialKey) {
|
||||
// return
|
||||
// }
|
||||
// // TODO
|
||||
// if (!this.dActiveElement) {
|
||||
// return
|
||||
// }
|
||||
// if (this.dActiveElement.uuid === '-1') {
|
||||
// return
|
||||
// }
|
||||
// e.stopPropagation()
|
||||
// e.preventDefault()
|
||||
const f = withShift ? 10 : 1
|
||||
keyCodeOptions(e, { f })
|
||||
|
||||
const range = withShift ? 10 : 1
|
||||
keyCodeOptions(e, { range })
|
||||
}
|
||||
},
|
||||
handleKeyup(store: TControlStore, checkCtrl: number | undefined) {
|
||||
|
||||
@ -1,29 +1,25 @@
|
||||
/*
|
||||
* @Author: ShawnPhang
|
||||
* @Date: 2021-07-13 02:48:38
|
||||
* @Description: 本地测试项目请勿修改此文件
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
|
||||
* @LastEditTime: 2024-02-26 17:54:00
|
||||
* @Description: 本地测试用户身份写死
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2024-04-03 20:56:23
|
||||
*/
|
||||
import axios, { AxiosRequestConfig, AxiosResponse, AxiosStatic } from 'axios'
|
||||
// import store from '@/store'
|
||||
import app_config, { LocalStorageKey } from '@/config'
|
||||
import { useBaseStore, useUserStore } from '@/store/index';
|
||||
|
||||
axios.defaults.timeout = 30000
|
||||
axios.defaults.headers.authorization = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MTAwMDEsImV4cCI6MTc4ODU3NDc1MDU4NX0.L_t6DFD48Dm6rUPfgIgOWJkz18En1m_-hhMHcpbxliY';
|
||||
// axios.defaults.headers.authorization = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MTAwMDEsImV4cCI6MTc4ODU3NDc1MDU4NX0.L_t6DFD48Dm6rUPfgIgOWJkz18En1m_-hhMHcpbxliY';
|
||||
const defaultToken = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MTAwMDEsImV4cCI6MTc4ODU3NDc1MDU4NX0.L_t6DFD48Dm6rUPfgIgOWJkz18En1m_-hhMHcpbxliY';
|
||||
// const version = app_config.VERSION;
|
||||
const baseUrl = app_config.API_URL
|
||||
|
||||
// 请求拦截器
|
||||
axios.interceptors.request.use(
|
||||
(config: AxiosRequestConfig) => {
|
||||
// const access_token = store.state.currentUser.access_token;
|
||||
const url = config.url ?? ""
|
||||
const values = {}
|
||||
// values.access_token = access_token;
|
||||
// values.version = version;
|
||||
|
||||
if (!url.startsWith('http://') && !url.startsWith('https://')) {
|
||||
config.url = url.startsWith('/') ? baseUrl + url : config.url = baseUrl + '/' + url
|
||||
}
|
||||
@ -48,7 +44,6 @@ axios.interceptors.request.use(
|
||||
axios.interceptors.response.use((res: AxiosResponse<any>) => {
|
||||
// store.dispatch('hideLoading');
|
||||
// 接口规则：只有正确code为200时返回result结果对象，错误返回整个结果对象
|
||||
|
||||
if (!res.data) {
|
||||
return Promise.reject(res)
|
||||
}
|
||||
@ -95,9 +90,9 @@ const fetch = <T = any> (
|
||||
// store.commit('loading', '加载中..');
|
||||
}
|
||||
|
||||
const token = localStorage.getItem(LocalStorageKey.tokenKey)
|
||||
const token = defaultToken//localStorage.getItem(LocalStorageKey.tokenKey)
|
||||
const headerObject: Record<string, any> = {}
|
||||
token && (headerObject.authorization = token)
|
||||
token && (headerObject.Authorization = token)
|
||||
|
||||
if (type === 'get') {
|
||||
return axios.get(url, {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
* @Description:
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastUpdateContent: Support typescript
|
||||
* @LastEditTime: 2024-04-03 10:58:42
|
||||
* @LastEditTime: 2024-04-05 05:34:43
|
||||
-->
|
||||
<template>
|
||||
<div id="page-design-index" ref="pageDesignIndex" class="page-design-bg-color">
|
||||
@ -16,22 +16,29 @@
|
||||
<div :class="['operation-item', { disable: !undoable }]" @click="undoable ? handleHistory('undo') : ''"><i class="iconfont icon-undo" /></div>
|
||||
<div :class="['operation-item', { disable: !redoable }]" @click="redoable ? handleHistory('redo') : ''"><i class="iconfont icon-redo" /></div>
|
||||
</div>
|
||||
<el-tooltip effect="dark" content="标尺" placement="bottom">
|
||||
<i style="font-size: 20px" class="icon sd-biaochi extra-operation" @click="changeLineGuides" />
|
||||
</el-tooltip>
|
||||
<el-divider direction="vertical" />
|
||||
<Folder @select="dealWith" ref="ref1"> <div class="operation-item"><i class="icon sd-wenjian" /> <span class="text" >文件</span></div> </Folder>
|
||||
<Helper @select="dealWith"> <div class="operation-item"><i class="icon sd-bangzhu" /> <span class="text" >帮助</span></div> </Helper>
|
||||
<!-- <el-tooltip effect="dark" :show-after="300" :offset="0" content="标尺" placement="bottom">
|
||||
<i style="font-size: 20px" class="icon sd-biaochi operation-item" @click="changeLineGuides" />
|
||||
</el-tooltip> -->
|
||||
<el-divider direction="vertical" />
|
||||
</div>
|
||||
<HeaderOptions ref="optionsRef" v-model="state.isContinue" @change="optionsChange" />
|
||||
<HeaderOptions ref="optionsRef" v-model="state.isContinue" @change="optionsChange">
|
||||
<el-button size="large" class="primary-btn" @click="dealWith('save')">保存</el-button>
|
||||
<el-button ref="ref4" size="large" class="primary-btn" plain type="primary" @click="dealWith('download')">下载作品</el-button>
|
||||
</HeaderOptions>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-design-index-wrap">
|
||||
<widget-panel></widget-panel>
|
||||
<widget-panel ref="ref2"></widget-panel>
|
||||
<design-board class="page-design-wrap" pageDesignCanvasId="page-design-canvas">
|
||||
<!-- 用于挡住画布溢出部分，因为使用overflow有bug -->
|
||||
<div class="shelter" :style="{ width: Math.floor((dPage.width * dZoom) / 100) + 'px', height: Math.floor((dPage.height * dZoom) / 100) + 'px' }"></div>
|
||||
<!-- 提供一个背景图层 -->
|
||||
<div class="shelter-bg transparent-bg" :style="{ width: Math.floor((dPage.width * dZoom) / 100) + 'px', height: Math.floor((dPage.height * dZoom) / 100) + 'px' }"></div>
|
||||
</design-board>
|
||||
<style-panel></style-panel>
|
||||
<style-panel ref="ref3"></style-panel>
|
||||
</div>
|
||||
<!-- 标尺 -->
|
||||
<line-guides :show="state.showLineGuides" />
|
||||
@ -50,6 +57,8 @@
|
||||
@cancel="downloadCancel"
|
||||
@done="state.downloadPercent = 0"
|
||||
/>
|
||||
<!-- 漫游导航 -->
|
||||
<Tour ref="tourRef" :steps="[ref1, ref2, ref3, ref4]" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -67,12 +76,21 @@ import lineGuides from '@/components/modules/layout/lineGuides.vue'
|
||||
import shortcuts from '@/mixins/shortcuts'
|
||||
// import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
|
||||
import HeaderOptions from './components/HeaderOptions.vue'
|
||||
import Folder from './components/Folder.vue'
|
||||
import Helper from './components/Helper.vue'
|
||||
import ProgressLoading from '@/components/common/ProgressLoading/download.vue'
|
||||
// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useCanvasStore, useControlStore, useHistoryStore, useWidgetStore, useGroupStore } from '@/store'
|
||||
import type { ButtonInstance } from 'element-plus'
|
||||
import Tour from './components/Tour.vue'
|
||||
|
||||
const ref1 = ref<ButtonInstance>()
|
||||
const ref2 = ref<ButtonInstance>()
|
||||
const ref3 = ref<ButtonInstance>()
|
||||
const ref4 = ref<ButtonInstance>()
|
||||
|
||||
type TState = {
|
||||
style: CSSProperties
|
||||
@ -93,8 +111,7 @@ const groupStore = useGroupStore()
|
||||
const { dPage } = storeToRefs(useCanvasStore())
|
||||
const { dZoom } = storeToRefs(useCanvasStore())
|
||||
const { dHistoryParams } = storeToRefs(useHistoryStore())
|
||||
const { dActiveElement, dCopyElement } = storeToRefs(widgetStore)
|
||||
|
||||
// const { dActiveElement, dCopyElement } = storeToRefs(widgetStore)
|
||||
|
||||
const state = reactive<TState>({
|
||||
style: {
|
||||
@ -129,10 +146,6 @@ function jump2home() {
|
||||
window.open('https://xp.palxp.cn/')
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
jump2home,
|
||||
})
|
||||
|
||||
const undoable = computed(() => {
|
||||
return !(
|
||||
dHistoryParams.value.index === -1 ||
|
||||
@ -216,15 +229,32 @@ function fixTopBarScroll() {
|
||||
state.style.left = `-${scrollLeft}px`
|
||||
}
|
||||
|
||||
// function clickListener(e: Event) {
|
||||
// console.log('click listener', e)
|
||||
// }
|
||||
|
||||
function optionsChange({ downloadPercent, downloadText, downloadMsg }: { downloadPercent: number, downloadText: string, downloadMsg?: string }) {
|
||||
state.downloadPercent = downloadPercent
|
||||
state.downloadText = downloadText
|
||||
state.downloadMsg = downloadMsg
|
||||
}
|
||||
|
||||
const tourRef = ref<any>()
|
||||
const fns: any = {
|
||||
openTour: () => {
|
||||
tourRef.value.open()
|
||||
},
|
||||
save: () => {
|
||||
optionsRef.value?.save(false)
|
||||
},
|
||||
download: () => {
|
||||
optionsRef.value?.download()
|
||||
},
|
||||
changeLineGuides
|
||||
}
|
||||
const dealWith = (fnName: string, params?: any) => {
|
||||
fns[fnName](params)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
jump2home,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
* @Date: 2022-01-10 14:57:53
|
||||
* @Description: Psd文件解析
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2023-10-13 00:12:11
|
||||
* @LastEditTime: 2024-04-03 20:58:43
|
||||
-->
|
||||
<template>
|
||||
<div id="page-design-index" ref="pageDesignIndex">
|
||||
@ -13,7 +13,7 @@
|
||||
<div class="name" style="font-size: 15px">在线PSD解析</div>
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<el-button plain type="primary" @click="jump2word">说明文档及PSD规范</el-button>
|
||||
<el-button plain type="primary" @click="jump2word">说明文档及 PSD 规范</el-button>
|
||||
</div>
|
||||
<el-button v-show="state.isDone" @click="clear">清空模板</el-button>
|
||||
<div class="v-tips">
|
||||
@ -32,7 +32,7 @@
|
||||
style="margin-right: 1rem"
|
||||
src="https://cdn.dancf.com/design/svg/icon_psdimport.37e6f23e.svg"
|
||||
alt="upload"
|
||||
/> 在此拖入或选择PSD文件
|
||||
/> 在此拖入或选择 PSD 文件
|
||||
</div>
|
||||
</uploader>
|
||||
</design-board>
|
||||
|
||||
43
src/views/components/Folder.vue
Normal file
43
src/views/components/Folder.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<!--
|
||||
* @Author: ShawnPhang
|
||||
* @Date: 2024-04-03 19:15:21
|
||||
* @Description: 文件
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2024-04-05 06:01:20
|
||||
-->
|
||||
<template>
|
||||
<el-dropdown trigger="click" size="large" placement="bottom-start">
|
||||
<span class="el-dropdown-link">
|
||||
<slot />
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item><div class="item">创建设计</div></el-dropdown-item>
|
||||
<el-dropdown-item @click="openPSD">导入文件</el-dropdown-item>
|
||||
<el-dropdown-item @click="$emit('select', 'save')" divided>保存</el-dropdown-item>
|
||||
<el-dropdown-item @click="$emit('select', 'download')">导出文件</el-dropdown-item>
|
||||
<el-dropdown-item disabled>版本记录</el-dropdown-item>
|
||||
<el-dropdown-item disabled>批量套模板</el-dropdown-item>
|
||||
<el-dropdown-item @click="$emit('select', 'changeLineGuides')" divided>标尺与参考线</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// import { ref } from 'vue'
|
||||
import { useRouter} from 'vue-router'
|
||||
import { ElDropdown, ElDropdownItem, ElDropdownMenu } from 'element-plus'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const openPSD = () => {
|
||||
window.open(router.resolve('/psd').href, '_blank')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.item {
|
||||
width: 224px;
|
||||
}
|
||||
</style>
|
||||
@ -3,7 +3,7 @@
|
||||
* @Date: 2022-01-12 11:26:53
|
||||
* @Description: 顶部操作按钮组
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2024-04-03 12:21:25
|
||||
* @LastEditTime: 2024-04-05 05:37:53
|
||||
-->
|
||||
<template>
|
||||
<div class="top-title"><el-input v-model="state.title" placeholder="未命名的设计" class="input-wrap" /></div>
|
||||
@ -17,10 +17,10 @@
|
||||
<div class="divide__line">|</div>
|
||||
</template>
|
||||
<!-- <el-button @click="draw">绘制(测试)</el-button> -->
|
||||
<el-button size="large" class="primary-btn" :disabled="tempEditing" @click="save(false)">保存</el-button>
|
||||
<copyRight>
|
||||
<el-button :loading="state.loading" size="large" class="primary-btn" :disabled="tempEditing" plain type="primary" @click="download">下载作品</el-button>
|
||||
</copyRight>
|
||||
<!-- <copyRight> -->
|
||||
<slot />
|
||||
<!-- <el-button :loading="state.loading" size="large" class="primary-btn" :disabled="tempEditing" plain type="primary" @click="download">下载作品</el-button> -->
|
||||
<!-- </copyRight> -->
|
||||
</div>
|
||||
<!-- 生成图片组件 -->
|
||||
<SaveImage ref="canvasImage" />
|
||||
@ -34,7 +34,7 @@ import _dl from '@/common/methods/download'
|
||||
import useNotification from '@/common/methods/notification'
|
||||
import SaveImage from '@/components/business/save-download/CreateCover.vue'
|
||||
import { useFontStore } from '@/common/methods/fonts'
|
||||
import copyRight from './CopyRight.vue'
|
||||
// import copyRight from './CopyRight.vue'
|
||||
import _config from '@/config'
|
||||
import useConfirm from '@/common/methods/confirm'
|
||||
import { useControlStore, useHistoryStore, useCanvasStore, useUserStore, useWidgetStore } from '@/store/index'
|
||||
@ -136,6 +136,7 @@ async function saveTemp() {
|
||||
}
|
||||
async function download() {
|
||||
if (state.loading === true) {
|
||||
useNotification('作品导出中', '当前有作品正在导出，请稍候再试')
|
||||
return
|
||||
}
|
||||
// 临时提示
|
||||
@ -173,7 +174,11 @@ async function saveTemp() {
|
||||
state.loading = false
|
||||
}
|
||||
})
|
||||
emit('change', { downloadPercent: 100, downloadText: '作品下载成功', downloadMsg: '仅供学习、研究或欣赏等用途，暂不提供商业授权。' })
|
||||
emit('change', { downloadPercent: 100, downloadText: '作品下载成功', downloadMsg: '该作品仅供学习、研究或欣赏等用途，暂不提供商业授权。' })
|
||||
state.loading = false
|
||||
} else {
|
||||
emit('change', { downloadPercent: 0, downloadText: '请稍候..' })
|
||||
useNotification('作品为空', '无法下载，请先创建设计', { type: 'error' })
|
||||
state.loading = false
|
||||
}
|
||||
}, 100)
|
||||
@ -257,9 +262,10 @@ defineExpose({
|
||||
.top-title {
|
||||
color: @color-black;
|
||||
flex: 1;
|
||||
padding-left: 88px;
|
||||
padding-left: 20px;
|
||||
// font-weight: bold;
|
||||
.input-wrap {
|
||||
// box-shadow: none;
|
||||
width: 15rem;
|
||||
:deep(input) {
|
||||
border-color: #ffffff;
|
||||
@ -268,7 +274,7 @@ defineExpose({
|
||||
}
|
||||
.input-wrap:hover {
|
||||
:deep(input) {
|
||||
border-color: #e8eaec;
|
||||
// border-color: #e8eaec;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -277,7 +283,6 @@ defineExpose({
|
||||
transform: scale(0.95);
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.divide__line {
|
||||
margin: 0 1rem;
|
||||
color: #e8eaec;
|
||||
|
||||
94
src/views/components/Helper.vue
Normal file
94
src/views/components/Helper.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<!--
|
||||
* @Author: ShawnPhang
|
||||
* @Date: 2024-04-03 19:15:21
|
||||
* @Description: 文件
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2024-04-05 04:46:03
|
||||
-->
|
||||
<template>
|
||||
<el-dropdown ref="dropdownRef" max-height="70vh" :hide-on-click="false" trigger="click" size="large" placement="bottom-start">
|
||||
<span class="el-dropdown-link">
|
||||
<slot />
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<div v-show="type === 'shortkey'" class="help-list">
|
||||
<div @click="type = 'menu'" class="back">
|
||||
<span class="icon-box"><i class="iconfont icon-right"></i></span> <b>快捷键</b>
|
||||
</div>
|
||||
<el-divider />
|
||||
<div v-for="(sc, si) in scKeyCodes" :key="'sc' + si" class="item">
|
||||
<span class="title">{{ sc.feat }}</span
|
||||
><span class="instruct">{{ sc.info }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-dropdown-menu v-show="type === 'menu'">
|
||||
<el-dropdown-item @click="type = 'shortkey'">快捷键</el-dropdown-item>
|
||||
<el-dropdown-item @click="openTour">新手引导</el-dropdown-item>
|
||||
<el-dropdown-item @click="openIssues"><div class="menu-item">反馈或建议</div></el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ElDropdown, ElDropdownItem, ElDropdownMenu } from 'element-plus'
|
||||
import scKeyCodes from '@/mixins/scKeyCodes'
|
||||
const emit = defineEmits()
|
||||
|
||||
const type = ref('menu')
|
||||
const dropdownRef = ref()
|
||||
|
||||
const openTour = () => {
|
||||
emit('select', 'openTour')
|
||||
dropdownRef.value?.handleClose()
|
||||
}
|
||||
|
||||
const openIssues = () => {
|
||||
window.open('https://github.com/palxiao/poster-design/issues', '_blank')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
:deep(.el-divider--horizontal) {
|
||||
margin: 12px 0;
|
||||
}
|
||||
.menu-item {
|
||||
width: 170px;
|
||||
}
|
||||
.help-list {
|
||||
user-select: none;
|
||||
.back {
|
||||
margin-top: 4px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: 8px 16px 0 6px;
|
||||
.icon-box {
|
||||
display: inline-block;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
.item {
|
||||
width: 240px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 16px;
|
||||
margin-bottom: 0;
|
||||
color: #4c535c;
|
||||
white-space: nowrap;
|
||||
.title {
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.instruct {
|
||||
padding: 7px 8px;
|
||||
margin-left: 14px;
|
||||
color: #222529;
|
||||
background: #f1f2f4;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
40
src/views/components/Tour.vue
Normal file
40
src/views/components/Tour.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<!--
|
||||
* @Author: ShawnPhang
|
||||
* @Date: 2024-04-04 03:05:45
|
||||
* @Description: 漫游导航
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2024-04-05 05:31:01
|
||||
-->
|
||||
<template>
|
||||
<el-tour v-model="isShow">
|
||||
<el-tour-step :target="steps[0]?.$el" title="文件管理">
|
||||
<div>点击文件菜单，管理你的设计，设置页面视图等操作。</div>
|
||||
</el-tour-step>
|
||||
<el-tour-step placement="right" :target="steps[1]?.$el" title="左侧工具栏" description="在这里可以选择模板开始设计，或是挑选文字、图片等素材拖拽至画布中。" />
|
||||
<el-tour-step placement="left" :target="steps[2]?.$el" title="右侧属性栏" description="当选中画布中的元素时，在此处会显示相应的编辑界面；同时也可以切换到“图层”管理。" />
|
||||
<el-tour-step :target="steps[3]?.$el" title="下载作品" description="点击此处即可导出当前作品，赶紧试试吧。" />
|
||||
</el-tour>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElTour, ElTourStep } from 'element-plus'
|
||||
import { ref } from 'vue'
|
||||
|
||||
type TProps = {
|
||||
steps: any,
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<TProps>(), {
|
||||
steps: [],
|
||||
})
|
||||
|
||||
const isShow = ref(false)
|
||||
|
||||
const open = () => {
|
||||
isShow.value = true
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
</script>
|
||||
@ -2,8 +2,8 @@
|
||||
* @Author: ShawnPhang
|
||||
* @Date: 2022-07-12 11:26:53
|
||||
* @Description: 上传用户模板
|
||||
* @LastEditors: ShawnPhang <site: book.palxp.com>
|
||||
* @LastEditTime: 2023-07-14 09:17:56
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2024-04-03 20:57:29
|
||||
-->
|
||||
<template>
|
||||
<el-button v-show="isDone" type="primary" plain @click="prepare"><b>上传模板</b></el-button>
|
||||
@ -136,7 +136,7 @@ async function uploadImgs() {
|
||||
const { id, stat, msg } = await api.home.saveWorks({ cover, title: '自设计模板', data: JSON.stringify({ page, widgets }), width: page.width, height: page.height })
|
||||
stat !== 0 ? useNotification('保存成功', '可在"我的模板"中查看') : useNotification('保存失败', msg, { type: 'error' })
|
||||
router.push({ path: '/psd', query: { id }, replace: true })
|
||||
emit('change', { downloadPercent: 99.99, downloadText: '上传完成', cancelText: '查看我的作品' }) // 关闭弹窗
|
||||
emit('change', { downloadPercent: 99.99, downloadText: '上传完成', cancelText: '点击查看作品' }) // 关闭弹窗
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user