github/poster-design
1
0
Fork 0
mirror of https://github.com/palxiao/poster-design.git synced 2025-07-15 16:02:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

merge: feat-upgrade-vue3

Browse Source
This commit is contained in:
IchliebedichZhu 2024-03-26 14:28:08 +00:00
commit 6196680eec
19 changed files with 135 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -2,6 +2,7 @@
node_modules
/dist
config.json
/.vite
screenshot/node_modules/
screenshot/dist/

15
src/assets/styles/main.less
View File

@ -26,9 +26,14 @@ body {
border-style: solid;
border-color: #e5e7eb;
// font-size: 14px;
scrollbar-width: none; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
// scrollbar-width: none; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
-ms-overflow-style: none; /* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
}
@-moz-document url-prefix() {
* {
scrollbar-width: none;
}
}
// html ::-webkit-scrollbar {
// display: none; /* Chrome Safari */
// }
@ -40,12 +45,13 @@ body {
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: #ccd4de;
background-color: #d9dcdf;
cursor: pointer;
// box-shadow: 0 0 1px hsl(0deg 0% 100% / 50%);
}
&::-webkit-scrollbar-track {
background-color: #f0f1f3;
// background-color: transparent;
// background-color: #f0f1f3;
background-color: transparent;
// border-radius: 3px;
}
@ -129,6 +135,7 @@ p {
position: fixed;
z-index: 99999;
pointer-events: none;
opacity: .9;
}
.hide {
opacity: 0 !important;

5
src/common/methods/DesignFeatures/setWidgetData.ts
View File

@ -2,8 +2,8 @@
* @Author: ShawnPhang
* @Date: 2022-02-22 15:06:14
* @Description: 设置元素时根据类型处理
* @LastEditors: ShawnPhang <site: book.palxp.com>
* @LastEditTime: 2023-07-03 10:10:53
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2024-03-22 16:00:17
*/
// import store from '@/store'
// import { getImage } from '../getImgDetail'
@ -29,7 +29,6 @@ export default async function(type: string, item: TCommonItemData, data: Record<
setting.width = img.width
setting.height = img.height // parseInt(100 / item.value.ratio, 10)
setting.imgUrl = item.value.url
console.log("setting", setting)
}
if (type === 'mask') {
setting.mask = item.value.url

14
src/components/modules/layout/designBoard/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div id="page-design" ref="page_design" :style="{ paddingTop: dPaddingTop + 'px' }">
<!-- <el-scrollbar> -->
<div id="main">
<div id="page-design" ref="page_design" :style="{ paddingTop: dPaddingTop + 'px', minWidth: (dPage.width * dZoom) / 100 + 120 + 'px' }" >
<div
id="out-page"
class="out-page"
@ -55,7 +55,7 @@
<!-- <size-control v-if="dSelectWidgets.length === 0" /> -->
</div>
</div>
<!-- </el-scrollbar> -->
</div>
</div>
</template>
@ -338,13 +338,17 @@ function getChilds(uuid: string) {
</script>
<style lang="less" scoped>
#main {
overflow: auto; position: relative;
}
#page-design {
height: 100%;
scrollbar-width: none;
min-height: 100%;
// display: flex;
// align-items: center;
overflow: auto;
position: relative;
width: 100%;
// width: 100%;
.out-page {
margin: 0 auto;
padding: 60px;

2
src/components/modules/layout/zoomControl/data.ts
View File

@ -34,7 +34,7 @@ export const ZoomList: TZoomData[] = [
value: 200,
},
{
text: '最佳尺寸',
text: '适应屏幕',
value: -1,
// icon: 'icon-best-size',
},

7
src/components/modules/layout/zoomControl/index.vue
View File

@ -257,10 +257,9 @@ async function autoFixTop() {
const presetPadding = 60
const el = document.getElementById('out-page')
if (!el) return
// const clientHeight = document.body.clientHeight - 54
const parentHeight = (el.offsetParent as HTMLElement).offsetHeight - 54
let padding = (parentHeight - el.offsetHeight) / 2
const clientHeight = window.innerHeight - 54
// const parentHeight = (el.offsetParent as HTMLElement).offsetHeight - 54
let padding = (clientHeight - el.offsetHeight) / 2
if (typeof curAction.value === 'undefined') {
padding += presetPadding / 2
}

10
src/components/modules/panel/stylePanel.vue
View File

@ -78,23 +78,23 @@ function layerChange(newLayer: Record<string, any>[]) {
</script>
<style lang="less" scoped>
@color0: #ffffff; // Appears 5 times
@color1: #999999; // Appears 3 times
@color2: #d7d7d7; // Appears 2 times
@color0: #ffffff;
@color1: #999999;
@background-color-transparent: rgba(0,0,0,.08);
#style-panel ::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
#style-panel {
background-color: @color0;
border-left: 1px solid @color2;
border-left: 1px solid @background-color-transparent;
display: flex;
flex-direction: column;
height: 100%;
position: relative;
width: 280px;
.style-tab {
box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: row;
text-align: center;

5
src/components/modules/panel/wrap/CompListWrap.vue
View File

@ -259,6 +259,11 @@ defineExpose({
.infinite-list {
height: 100%;
padding-bottom: 150px;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.infinite-list::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.list {
width: 100%;

5
src/components/modules/panel/wrap/GraphListWrap.vue
View File

@ -236,6 +236,11 @@ async function dragStart(e: MouseEvent, item: TGetListData) {
.infinite-list {
height: 100%;
padding-bottom: 150px;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.infinite-list::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.list {
width: 100%;

7
src/components/modules/panel/wrap/TempListWrap.vue
View File

@ -2,7 +2,7 @@
* @Author: ShawnPhang
* @Date: 2021-08-27 15:16:07
* @Description: 模板列表
* @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @Date: 2024-03-06 21:16:00
-->
<template>
@ -199,6 +199,11 @@ defineExpose({
height: 100%;
margin-top: 1rem;
padding-bottom: 150px;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.infinite-list::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
// .list {
// width: 100%;

18
src/components/modules/panel/wrap/TextListWrap.vue
View File

@ -11,7 +11,6 @@
}"
draggable="true"
@click="selectBasicText(item)"
@dragstart="dragStart($event, item)"
>
{{ item.text }}
</div>
@ -26,7 +25,8 @@
// const NAME = 'text-list-wrap'
import { storeToRefs } from 'pinia';
import wText from '../../widgets/wText/wText.vue'
// import wText from '../../widgets/wText/wText.vue'
import { wTextSetting } from '../../widgets/wText/wTextSetting'
import { useStore } from 'vuex'
import { usePageStore } from '@/pinia';
@ -43,7 +43,7 @@ const { dPage } = storeToRefs(usePageStore())
const selectBasicText = (item: TBasicTextData) => {
store.commit('setShowMoveable', false) // 清理掉上一次的选择
let setting = JSON.parse(JSON.stringify(wText.setting))
let setting = JSON.parse(JSON.stringify(wTextSetting))
setting.text = '双击编辑文字' // item.text
setting.width = item.fontSize * setting.text.length
setting.fontSize = item.fontSize
@ -52,13 +52,12 @@ const selectBasicText = (item: TBasicTextData) => {
setting.left = pW / 2 - item.fontSize * 3
setting.top = pH / 2 - item.fontSize / 2
store.dispatch('addWidget', setting)
// addWidget(setting)
}
const dragStart = (_: MouseEvent, item: any) => {
store.commit('setDraging', true)
store.commit('selectItem', { data: { value: item }, type: 'text' })
}
// const dragStart = (_: MouseEvent, item: any) => {
// store.commit('setDraging', true)
// store.commit('selectItem', { data: { value: item }, type: 'text' })
// }
const basicTextList: TBasicTextData[] = [
// {
@ -89,7 +88,6 @@ const basicTextList: TBasicTextData[] = [
]
defineExpose({
selectBasicText,
dragStart,
})
// ...mapActions(['addWidget'])
@ -109,7 +107,7 @@ defineExpose({
.basic-text-item {
color: #33383e;
background-color: #f1f2f4;
cursor: grab;
cursor: pointer;
user-select: none;
border-bottom: 1px solid rgba(255, 255, 255, 0);
border-top: 1px solid rgba(255, 255, 255, 0);

7
src/components/modules/panel/wrap/components/classHeader.vue
View File

@ -27,7 +27,7 @@ export type TClassHeaderTypeData = {
}
type TProps = {
types: TClassHeaderTypeData[]
types?: TClassHeaderTypeData[]
isBack?: boolean
}
@ -56,6 +56,11 @@ defineExpose({ select, back })
height: 100%;
overflow: auto;
padding-bottom: 100px;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
&__wrap::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
}
.types {

5
src/components/modules/panel/wrap/components/photoList.vue
View File

@ -218,6 +218,11 @@ defineExpose({
.img-list-wrap {
height: 100%;
overflow: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.img-list-wrap::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.img {
transform-origin: center;

17
src/components/modules/settings/colorSelect.vue
View File

@ -65,9 +65,7 @@ let first = true
// })
onMounted(() => {
if (props.modelValue) {
state.innerColor = props.modelValue + (props.modelValue.length === 7 ? 'ff' : '')
}
checkColorLength()
})
const dropColor = async (color: string) => {
@ -90,6 +88,7 @@ watch(
() => props.modelValue,
(val) => {
val !== state.innerColor && (state.innerColor = val)
checkColorLength()
},
)
@ -105,12 +104,12 @@ const onChange = () => {
emit('finish', state.innerColor)
}
// const addHistory = debounce(300, false, async (value) => {
// store.dispatch('pushColorToHistory', value)
// })
// const colorChange = debounce(150, false, async (e) => {
// state.innerColor = e + (e.length === 7 ? 'ff' : '')
// })
function checkColorLength() {
if (!props.modelValue) {
return
}
state.innerColor = props.modelValue + (props.modelValue.length === 7 ? 'ff' : '')
}
const inputBlur = (color: string) => {
state.innerColor = color

5
src/components/modules/settings/numberSlider.vue
View File

@ -50,6 +50,7 @@ const props = withDefaults(defineProps<TProps>(), {
const emit = defineEmits<TEmits>()
const innerValue = ref<number>(props.minValue)
innerValue.value = props.modelValue
watch(
() => innerValue.value,
@ -67,10 +68,6 @@ watch(
}
)
onMounted(() => {
innerValue.value = props.modelValue
})
function changeValue(value: number | number[]) {
emit('finish', value)
}

12
src/components/modules/widgets/wImage/wImageStyle.vue
View File

@ -3,7 +3,7 @@
* @Date: 2021-08-09 11:41:53
* @Description:
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-10-09 00:59:44
* @LastEditTime: 2024-03-22 16:14:48
-->
<template>
<div id="w-image-style">
@ -71,7 +71,7 @@
<script lang="ts" setup>
// 图片组件样式
// const NAME = 'w-image-style'
import { nextTick, reactive, ref, watch } from 'vue'
import { nextTick, reactive, ref, watch, onBeforeUnmount } from 'vue'
import { useStore } from 'vuex'
import numberInput from '../../settings/numberInput.vue'
import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
@ -145,14 +145,18 @@ let lastUuid: string | undefined = undefined
let tag: boolean
let toolBarStyle: { left: string, top: string } | null = null
onBeforeUnmount(() => {
imgCrop(false)
cropHandle()
})
watch(
() => dActiveElement.value,
(newValue, oldValue) => {
change()
// 失焦取消编辑模式
if (newValue.uuid != lastUuid && typeof lastUuid !== 'undefined') {
state.innerElement.cropEdit = false
store.commit('setShowRotatable', true) // 失焦会导致大小变化锁定的错误
imgCrop(false)
}
lastUuid = newValue.uuid
},

2
src/config.ts
View File

@ -13,7 +13,7 @@ export default {
// API_URL: isDev ? 'http://localhost:9998' : '${API}',
API_URL: 'https://palxp.cn:8887', // 服务端地址
SCREEN_URL: isDev ? 'http://localhost:7001' : '#{SCREEN_URL}', // 截图服务地址
IMG_URL: 'https://store.palxp.com/', // 七牛云资源地址
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',

3
src/store/modules/design/actions.ts
View File

@ -341,8 +341,7 @@ export default {
store.state.dSelectWidgets = []
}, 10)
} else {
// TODO: 不清空会引起mask的bug，原因还不清楚..
store.state.dActiveElement = {}
// store.state.dActiveElement = {}
setTimeout(() => {
store.state.dActiveElement = widget
}, 10)

4
src/views/Index.vue
View File

@ -191,8 +191,8 @@ function loadData() {
if (!optionsRef.value) return
optionsRef.value.load(id, tempid, tempType, async () => {
if (!zoomControlRef.value) return
zoomControlRef.value.screenChange()
await nextTick()
// await nextTick()
// zoomControlRef.value.screenChange()
// 初始化激活的控件为page
store.dispatch('selectWidget', { uuid: '-1' })
// selectWidget({