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

34
src/component/Canvas/CanvasEditor/components/LiquifyPanel.vue
View File

@@ -1,8 +1,9 @@
<template>
<transition name="fade">
<div v-if="visible" class="liquify-panel">
<div v-if="visible" class="liquify-panel" :class="{active:!closePanel}">
<div class="btn" @click="setClosePanel"><i class="fi fi-br-angle-left"></i></div>
<div class="liquify-panel-header">
<div class="header-title">液化工具</div>
<div class="header-title">{{ $t('liquifyPanel.LiquefactionTool') }}</div>
<!-- <div class="header-actions">
<button class="header-btn cancel-btn" @click="cancel">取消</button>
<button class="header-btn confirm-btn" @click="confirm">完成</button>
@@ -251,6 +252,12 @@ const showDistortion = computed(() => {
return ["crystal", "edge"].includes(currentMode.value);
});
//打开隐藏操作面板
const closePanel = ref(false)
const setClosePanel = ()=>{
closePanel.value = !closePanel.value
}
// 监听当前工具变化 - 参考 SelectionPanel 的实现方式
watch(
() => props.activeTool,
@@ -262,6 +269,7 @@ watch(
// 如果面板未显示且有合适的目标对象，则显示面板
if (!visible.value) {
visible.value = true;
closePanel.value = true
// 检查是否有可液化的对象
checkAndShowPanel();
}
@@ -451,6 +459,7 @@ function showPanel(event) {
console.log("未选择有效图像或图层不适合液化操作");
}
visible.value = true; // 仍然显示面板以便用户看到提示
closePanel.value = true
return;
}
@@ -463,6 +472,7 @@ function showPanel(event) {
if (!targetObj) {
console.log("未选择有效的图像对象");
visible.value = true; // 仍然显示面板以便显示提示
closePanel.value = true
return;
}
@@ -509,6 +519,7 @@ function showPanel(event) {
}
visible.value = true;
closePanel.value = true
isEditing.value = true;
// 初始化液化管理器并准备液化环境
@@ -1623,6 +1634,25 @@ function stopPressTimer() {
color: #333;
border: 1px solid rgba(0, 0, 0, 0.05);
padding-bottom: 12px;
&.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);
}
}
}
.fade-enter-active,

28
src/component/Canvas/CanvasEditor/components/SelectionPanel.vue
View File

@@ -1,6 +1,7 @@
<template>
<transition name="fade">
<div class="selection-toolbar" v-if="visible">
<div class="selection-toolbar" v-if="visible" :class="{active:!closePanel}">
<div class="btn" @click="setClosePanel"><i class="fi fi-br-angle-left"></i></div>
<!-- 顶部选区类型工具栏 -->
<div class="toolbar-section">
<div class="toolbar-header">
@@ -238,6 +239,11 @@ const fillColor = ref("#000000");
const hasSelection = ref(false);
const showFeatherDialog = ref(false);
const showColorPicker = ref(false);
//打开隐藏操作面板
const closePanel = ref(false)
const setClosePanel = ()=>{
closePanel.value = !closePanel.value
}
// 国际化
const { t } = useI18n();
@@ -289,6 +295,7 @@ watch(
*/
function show() {
visible.value = true;
closePanel.value = true
checkSelectionStatus();
}
@@ -512,6 +519,25 @@ function confirmColorPicker() {
color: #333;
border: 1px solid rgba(0, 0, 0, 0.05);
user-select: none;
&.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);
}
}
}
/* 平板和手机适配 */

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 {