206 lines
7.7 KiB
Plaintext
206 lines
7.7 KiB
Plaintext
<view class="container">
|
||
<!-- 顶部导航栏 -->
|
||
<view class="header-row">
|
||
<view class="logo-container">
|
||
<image class="logo" src="{{icons.logo}}" mode="aspectFit" />
|
||
</view>
|
||
<view class="app-title">TextToSVG</view>
|
||
|
||
<!-- 字体大小滑块 -->
|
||
<view class="font-size-control">
|
||
<image
|
||
class="font-size-icon"
|
||
src="{{icons.fontSizeDecrease}}"
|
||
mode="aspectFit"
|
||
bindtap="onDecreaseFontSize"
|
||
/>
|
||
<view class="font-slider-wrap">
|
||
<view class="font-size-value">{{fontSize}}</view>
|
||
<slider
|
||
class="font-slider"
|
||
min="20"
|
||
max="120"
|
||
step="1"
|
||
value="{{fontSize}}"
|
||
show-value="{{false}}"
|
||
activeColor="#9B6BC2"
|
||
backgroundColor="#E5E6EB"
|
||
block-size="18"
|
||
bindchanging="onFontSizeChanging"
|
||
bindchange="onFontSizeChange"
|
||
/>
|
||
</view>
|
||
<image
|
||
class="font-size-icon"
|
||
src="{{icons.fontSizeIncrease}}"
|
||
mode="aspectFit"
|
||
bindtap="onIncreaseFontSize"
|
||
/>
|
||
</view>
|
||
|
||
<view class="color-picker-btn" bindtap="onShowColorPicker">
|
||
<image class="color-icon" src="{{icons.chooseColor}}" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 输入栏 -->
|
||
<view class="input-row">
|
||
<image class="content-icon" src="{{icons.content}}" />
|
||
<view class="text-input-container">
|
||
<input
|
||
class="text-input"
|
||
value="{{inputText}}"
|
||
placeholder="此处输入内容"
|
||
bindinput="onInputText"
|
||
confirm-type="done"
|
||
bindconfirm="onRegenerate"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 效果预览区域 -->
|
||
<view class="preview-section">
|
||
<view class="section-title">效果预览</view>
|
||
<scroll-view class="preview-list" scroll-y>
|
||
<view wx:for="{{selectedFonts}}" wx:key="id" class="preview-item">
|
||
<view class="preview-header">
|
||
<image class="font-icon" src="{{icons.fontIcon}}" />
|
||
<view class="font-name-text">{{item.name}}</view>
|
||
<view class="export-btns-inline">
|
||
<image class="download-icon" src="{{icons.download}}" />
|
||
<view class="export-btn-sm export-svg-btn" bindtap="onExportSingleSvg" data-font-id="{{item.id}}">
|
||
<image class="export-icon-sm" src="{{icons.exportSvg}}" />
|
||
</view>
|
||
<view class="export-btn-sm export-png-btn" bindtap="onExportSinglePng" data-font-id="{{item.id}}">
|
||
<image class="export-icon-sm" src="{{icons.exportPng}}" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="preview-content" bindtap="onTogglePreviewFont" data-font-id="{{item.id}}">
|
||
<image
|
||
wx:if="{{item.previewSrc}}"
|
||
class="preview-image"
|
||
mode="widthFix"
|
||
src="{{item.previewSrc}}"
|
||
style="{{item.previewImageStyle}}"
|
||
/>
|
||
<view wx:elif="{{item.previewError}}" class="preview-error">{{item.previewError}}</view>
|
||
<view wx:else class="preview-loading">生成中...</view>
|
||
</view>
|
||
</view>
|
||
<view wx:if="{{!selectedFonts.length}}" class="preview-empty">请从下方选择字体</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 字体选择和已收藏字体 -->
|
||
<view class="bottom-section">
|
||
<!-- 字体选择 -->
|
||
<view class="font-selection">
|
||
<view class="selection-header">
|
||
<view class="section-title">选择</view>
|
||
<view class="search-container" wx:if="{{showSearch}}">
|
||
<image class="search-icon" src="{{icons.search}}" />
|
||
<input
|
||
class="search-input"
|
||
value="{{searchKeyword}}"
|
||
placeholder="搜索字体"
|
||
bindinput="onSearchInput"
|
||
/>
|
||
</view>
|
||
<view class="search-toggle" wx:if="{{!showSearch}}" bindtap="onToggleSearch">
|
||
<image class="search-icon" src="{{icons.search}}" />
|
||
</view>
|
||
</view>
|
||
<scroll-view class="font-tree" scroll-y>
|
||
<view wx:for="{{fontCategories}}" wx:key="category" class="font-category">
|
||
<view class="category-header" bindtap="onToggleCategory" data-category="{{item.category}}">
|
||
<image
|
||
class="expand-icon"
|
||
src="{{icons.expandIcon}}"
|
||
style="transform: rotate({{item.expanded ? '90deg' : '0deg'}})"
|
||
/>
|
||
<view class="category-name">{{item.category}}（{{item.fonts.length}}）</view>
|
||
</view>
|
||
<view wx:if="{{item.expanded && item.fonts.length > 0}}" class="tree-vertical-line" />
|
||
<view wx:if="{{item.expanded}}" class="font-list select-font-list">
|
||
<view
|
||
wx:for="{{item.fonts}}"
|
||
wx:for-item="font"
|
||
wx:key="id"
|
||
class="font-item select-font-item"
|
||
>
|
||
<view class="tree-horizontal-line" />
|
||
<image class="font-item-icon" src="{{icons.fontIcon}}" />
|
||
<view class="font-item-name">{{font.name}}</view>
|
||
<view class="font-item-actions">
|
||
<view class="font-checkbox" bindtap="onToggleFont" data-font-id="{{font.id}}">
|
||
<view class="checkbox-wrapper {{font.selected ? 'checked' : ''}}">
|
||
<image wx:if="{{font.selected}}" class="checkbox-icon-sm" src="{{icons.checkboxChecked}}" />
|
||
</view>
|
||
</view>
|
||
<view class="favorite-btn" bindtap="onToggleFavorite" data-font-id="{{font.id}}">
|
||
<image
|
||
class="favorite-icon"
|
||
src="{{icons.favoriteIcon}}"
|
||
style="opacity: {{font.isFavorite ? '1' : '0.3'}}"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 已收藏字体 -->
|
||
<view class="favorite-selection">
|
||
<view class="section-title">已收藏</view>
|
||
<scroll-view class="font-tree favorite-list" scroll-y>
|
||
<view wx:for="{{favoriteFonts}}" wx:key="id" class="font-item favorite-font-item">
|
||
<image class="font-item-icon" src="{{icons.fontIcon}}" />
|
||
<view class="font-item-name">{{item.name}}</view>
|
||
<view class="font-item-actions">
|
||
<view class="font-checkbox" bindtap="onToggleFont" data-font-id="{{item.id}}">
|
||
<view class="checkbox-wrapper {{item.selected ? 'checked' : ''}}">
|
||
<image wx:if="{{item.selected}}" class="checkbox-icon-sm" src="{{icons.checkboxChecked}}" />
|
||
</view>
|
||
</view>
|
||
<view class="favorite-btn" bindtap="onToggleFavorite" data-font-id="{{item.id}}">
|
||
<image class="favorite-icon" src="{{icons.favoriteIcon}}" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view wx:if="{{!favoriteFonts.length}}" class="empty-favorites">暂无收藏字体</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 颜色选择器弹窗 -->
|
||
<view wx:if="{{showColorPicker}}" class="color-picker-modal" bindtap="onHideColorPicker">
|
||
<view class="color-picker-content" catchtap="onStopPropagation">
|
||
<view class="color-palette">
|
||
<view
|
||
wx:for="{{colorPalette}}"
|
||
wx:key="*this"
|
||
class="color-dot"
|
||
style="background: {{item}}; border: {{textColor === item ? '3rpx solid #9B6BC2' : '2rpx solid rgba(0,0,0,0.1)'}}"
|
||
data-color="{{item}}"
|
||
bindtap="onPickColor"
|
||
/>
|
||
</view>
|
||
<view class="color-input-row">
|
||
<text>自定义颜色：</text>
|
||
<input
|
||
class="color-input"
|
||
type="text"
|
||
maxlength="7"
|
||
value="{{textColor}}"
|
||
bindinput="onColorInput"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<canvas id="exportCanvas" canvas-id="exportCanvas" type="2d" class="hidden-canvas" />
|
||
</view>
|