aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复页面bug

Browse Source
This commit is contained in:
X1627315083
2025-08-26 10:14:34 +08:00
parent cfe449f094
commit b6b554424b
49 changed files with 501 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/component/Canvas/CanvasEditor/components/TextEditorPanel.vue
View File

@@ -1,18 +1,20 @@
<!-- filepath: /Users/aaron/work/pc/air/canvasEdit/src/components/CanvasEditor/components/TextEditorPanel.vue -->
<template>
<div v-if="visible" class="text-editor-panel" :class="{ 'is-active': visible }">
<div v-if="visible" class="text-editor-panel" :class="{ 'is-active': visible,active:!closePanel }">
<div class="btn" @click="setClosePanel"><i class="fi fi-br-angle-left"></i></div>
<div class="text-editor-panel-header">
<div class="header-btn import-btn">编辑文本样式</div>
<div class="header-btn import-btn">{{ $t('Canvas.EditTextStyle') }}</div>
<div class="header-actions">
<div class="header-btn cancel-btn" @click="close">取消</div>
<div class="header-btn confirm-btn" @click="confirmEdit">完成</div>
<div class="header-btn cancel-btn" @click="close">{{ $t('Canvas.close') }}</div>
<div class="header-btn confirm-btn" @click="confirmEdit">{{ $t('Canvas.confirmEdit') }}</div>
</div>
</div>
<div class="text-editor-content">
<!-- 字体选择列表 -->
<div class="edit-column font-column">
<div class="column-header">字体</div>
<div class="column-header">{{ $t('Canvas.fontFamily') }}</div>
<div class="font-list">
<div
v-for="font in availableFonts"
@@ -28,7 +30,7 @@
<!-- 样式选择区域 -->
<div class="edit-column style-column">
<div class="column-header">样式</div>
<div class="column-header">{{ $t('Canvas.fontStyle') }}</div>
<div class="style-preview">
<div class="style-name">Regular</div>
<div class="style-sample" :style="{ fontFamily }">Regular</div>
@@ -37,10 +39,10 @@
<!-- 设计参数区域 -->
<div class="edit-column design-column">
<div class="column-header">设计</div>
<div class="column-header">{{ $t('Canvas.design') }}</div>
<div class="param-item">
<div class="param-label">尺寸</div>
<div class="param-label">{{ $t('Canvas.size') }}</div>
<div class="param-control">
<input
type="range"
@@ -55,7 +57,7 @@
</div>
<div class="param-item">
<div class="param-label">字符间距</div>
<div class="param-label">{{ $t('Canvas.charSpacing') }}</div>
<div class="param-control">
<input
type="range"
@@ -71,7 +73,7 @@
</div>
<div class="param-item">
<div class="param-label">行距</div>
<div class="param-label">{{ $t('Canvas.lineHeight') }}</div>
<div class="param-control">
<input
type="range"
@@ -102,7 +104,7 @@
</div> -->
<div class="param-item">
<div class="param-label">不透明度</div>
<div class="param-label">{{ $t('Canvas.opacity') }}</div>
<div class="param-control">
<input
type="range"
@@ -120,7 +122,7 @@
<!-- 字体属性区域 -->
<div class="edit-column props-column">
<div class="column-header">字体属性</div>
<div class="column-header">{{ $t('Canvas.property') }}</div>
<div class="text-alignment">
<div
@@ -178,7 +180,7 @@
</div>
<!-- 添加字体色控制区域 -->
<div class="background-controls">
<div class="bg-header">字体色</div>
<div class="bg-header">{{ $t('Canvas.fontColor') }}</div>
<div class="bg-options">
<div class="style-btn color-btn" @click="openColorPicker('text')">
<div class="style-icon color-icon" :style="{ backgroundColor: textColor }"></div>
@@ -187,7 +189,7 @@
</div>
<!-- 添加背景色控制区域 -->
<div class="background-controls">
<div class="bg-header">背景色</div>
<div class="bg-header">{{ $t('Canvas.BGColor') }}</div>
<div class="bg-options">
<div class="style-btn color-btn" @click="openColorPicker('background')">
<div
@@ -207,7 +209,7 @@
:class="{ active: hasTransparentBg }"
@click="setTransparentBackground"
>
透明
{{ $t('Canvas.BGOpacity') }}
</div>
</div>
</div>
@@ -218,7 +220,7 @@
<div v-if="showColorPicker" class="color-picker-modal">
<div class="color-picker-container">
<div class="color-picker-header">
<span>{{ colorPickerMode === "text" ? "选择文字颜色" : "选择背景颜色" }}</span>
<span>{{ colorPickerMode === "text" ? $t('Canvas.SelectTextColor') : $t('Canvas.SelectBGColor') }}</span>
<div class="close-color-picker" @click="closeColorPicker">×</div>
</div>
<div class="color-picker-content">
@@ -232,7 +234,7 @@
@click="selectPresetColor(color)"
></div>
</div>
<div class="confirm-color-btn" @click="confirmColorSelection">确定</div>
<div class="confirm-color-btn" @click="confirmColorSelection">{{ $t('Canvas.ok') }}</div>
</div>
</div>
</div>
@@ -349,6 +351,11 @@ export default {
return Math.round(lineHeight.value * fontSize.value);
});
//打开隐藏操作面板
const closePanel = ref(false)
const setClosePanel = ()=>{
closePanel.value = !closePanel.value
}
// 方法
const showEditor = (event) => {
const { textObject: eventTextObject, layer: eventLayer } = event.detail;
@@ -362,6 +369,8 @@ export default {
// 显示面板
visible.value = true;
closePanel.value = true
};
const close = () => {
@@ -626,6 +635,8 @@ export default {
textColor,
backgroundColor,
opacity,
setClosePanel,
closePanel,
hasTransparentBg,
fontWeight,
fontStyle,
@@ -692,6 +703,25 @@ export default {
border-top: 1px solid rgba(0, 0, 0, 0.05);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
overflow: hidden;
&.active{
transform: translateY(100%);
> .btn{
> i{
transform: rotate(90deg);
}
}
}
> .btn{
width: 100%;
text-align: center;
cursor: pointer;
> i{
font-size: 1.4rem;
display: block;
transform: rotate(270deg);
}
}
}
.text-editor-panel.is-active {