feat: Add texture management features and update UI components
This commit is contained in:
bighuixiang
@@ -6,12 +6,10 @@
|
||||
:class="{ 'is-active': visible }"
|
||||
>
|
||||
<div class="text-editor-panel-header">
|
||||
<button class="header-btn import-btn">导入字体</button>
|
||||
<div class="header-btn import-btn">编辑文本样式</div>
|
||||
<div class="header-actions">
|
||||
<button class="header-btn cancel-btn" @click="close">取消</button>
|
||||
<button class="header-btn confirm-btn" @click="confirmEdit">
|
||||
完成
|
||||
</button>
|
||||
<div class="header-btn cancel-btn" @click="close">取消</div>
|
||||
<div class="header-btn confirm-btn" @click="confirmEdit">完成</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -76,22 +74,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="param-item">
|
||||
<div class="param-label">字符间距</div>
|
||||
<div class="param-control">
|
||||
<input
|
||||
type="range"
|
||||
v-model.number="textSpacing"
|
||||
min="-50"
|
||||
max="100"
|
||||
step="0.1"
|
||||
@input="updateTextSpacing"
|
||||
class="slider-control"
|
||||
/>
|
||||
<div class="param-value">{{ textSpacing.toFixed(1) }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="param-item">
|
||||
<div class="param-label">行距</div>
|
||||
<div class="param-control">
|
||||
@@ -108,7 +90,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="param-item">
|
||||
<!-- <div class="param-item">
|
||||
<div class="param-label">基线</div>
|
||||
<div class="param-control">
|
||||
<input
|
||||
@@ -121,7 +103,7 @@
|
||||
/>
|
||||
<div class="param-value">{{ baseline }}pt</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="param-item">
|
||||
<div class="param-label">不透明度</div>
|
||||
@@ -145,71 +127,76 @@
|
||||
<div class="column-header">字体属性</div>
|
||||
|
||||
<div class="text-alignment">
|
||||
<button
|
||||
<div
|
||||
class="align-btn"
|
||||
:class="{ active: textAlign === 'left' }"
|
||||
@click="setTextAlign('left')"
|
||||
>
|
||||
<div class="align-icon align-left"></div>
|
||||
</button>
|
||||
<button
|
||||
<svg-icon name="CFleft" size="20" />
|
||||
</div>
|
||||
<div
|
||||
class="align-btn"
|
||||
:class="{ active: textAlign === 'center' }"
|
||||
@click="setTextAlign('center')"
|
||||
>
|
||||
<div class="align-icon align-center"></div>
|
||||
</button>
|
||||
<button
|
||||
<svg-icon name="CFcenter" size="20" />
|
||||
</div>
|
||||
<div
|
||||
class="align-btn"
|
||||
:class="{ active: textAlign === 'right' }"
|
||||
@click="setTextAlign('right')"
|
||||
>
|
||||
<div class="align-icon align-right"></div>
|
||||
</button>
|
||||
<button
|
||||
<svg-icon name="CFright" size="20" />
|
||||
</div>
|
||||
<div
|
||||
class="align-btn"
|
||||
:class="{ active: textAlign === 'justify' }"
|
||||
@click="setTextAlign('justify')"
|
||||
>
|
||||
<div class="align-icon align-justify"></div>
|
||||
</button>
|
||||
<svg-icon name="CFjustify" size="26" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-styles">
|
||||
<button
|
||||
<div
|
||||
class="style-btn"
|
||||
:class="{ active: underline }"
|
||||
@click="toggleStyle('underline', !underline)"
|
||||
>
|
||||
<div class="style-icon underline-icon">U</div>
|
||||
</button>
|
||||
<button
|
||||
</div>
|
||||
<div
|
||||
class="style-btn"
|
||||
:class="{ active: overline }"
|
||||
@click="toggleStyle('overline', !overline)"
|
||||
>
|
||||
<div class="style-icon overline-icon">O</div>
|
||||
</button>
|
||||
<button
|
||||
</div>
|
||||
<div
|
||||
class="style-btn"
|
||||
:class="{ active: linethrough }"
|
||||
@click="toggleStyle('linethrough', !linethrough)"
|
||||
>
|
||||
<div class="style-icon linethrough-icon">S</div>
|
||||
</button>
|
||||
<button class="style-btn color-btn" @click="openColorPicker('text')">
|
||||
<div
|
||||
class="style-icon color-icon"
|
||||
:style="{ backgroundColor: textColor }"
|
||||
></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加字体色控制区域 -->
|
||||
<div class="background-controls">
|
||||
<div class="bg-header">字体色</div>
|
||||
<div class="bg-options">
|
||||
<div class="style-btn color-btn" @click="openColorPicker('text')">
|
||||
<div
|
||||
class="style-icon color-icon"
|
||||
:style="{ backgroundColor: textColor }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加背景色控制区域 -->
|
||||
<div class="background-controls">
|
||||
<div class="bg-header">背景色</div>
|
||||
<div class="bg-options">
|
||||
<button
|
||||
<div
|
||||
class="style-btn color-btn"
|
||||
@click="openColorPicker('background')"
|
||||
>
|
||||
@@ -228,14 +215,14 @@
|
||||
backgroundPosition: hasTransparentBg ? '0 0, 4px 4px' : '0 0',
|
||||
}"
|
||||
></div>
|
||||
</button>
|
||||
<button
|
||||
</div>
|
||||
<div
|
||||
class="transparent-btn"
|
||||
:class="{ active: hasTransparentBg }"
|
||||
@click="setTransparentBackground"
|
||||
>
|
||||
透明
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -248,9 +235,7 @@
|
||||
<span>{{
|
||||
colorPickerMode === "text" ? "选择文字颜色" : "选择背景颜色"
|
||||
}}</span>
|
||||
<button class="close-color-picker" @click="closeColorPicker">
|
||||
×
|
||||
</button>
|
||||
<div class="close-color-picker" @click="closeColorPicker">×</div>
|
||||
</div>
|
||||
<div class="color-picker-content">
|
||||
<input
|
||||
@@ -268,9 +253,9 @@
|
||||
@click="selectPresetColor(color)"
|
||||
></div>
|
||||
</div>
|
||||
<button class="confirm-color-btn" @click="confirmColorSelection">
|
||||
<div class="confirm-color-btn" @click="confirmColorSelection">
|
||||
确定
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -991,6 +976,7 @@ export default {
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.bg-options {
|
||||
|
||||
Reference in New Issue
Block a user