214 lines
7.9 KiB
Plaintext
214 lines
7.9 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}}"
|
|
bindtap="onDecreaseFontSize"
|
|
/>
|
|
<slider
|
|
class="font-slider"
|
|
min="24"
|
|
max="320"
|
|
step="1"
|
|
value="{{fontSize}}"
|
|
show-value="false"
|
|
activeColor="#9B6BC2"
|
|
backgroundColor="#E5E6EB"
|
|
block-size="18"
|
|
bindchanging="onFontSizeChanging"
|
|
bindchange="onFontSizeChange"
|
|
/>
|
|
<image
|
|
class="font-size-icon"
|
|
src="{{icons.fontSizeIncrease}}"
|
|
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">
|
|
<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}}"
|
|
/>
|
|
<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}}</view>
|
|
</view>
|
|
<view wx:if="{{item.expanded}}" class="font-list">
|
|
<view
|
|
wx:for="{{item.fonts}}"
|
|
wx:for-item="font"
|
|
wx:key="id"
|
|
class="font-item"
|
|
>
|
|
<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" scroll-y>
|
|
<view wx:for="{{favoriteCategories}}" wx:key="category" class="font-category">
|
|
<view class="category-header" bindtap="onToggleFavoriteCategory" data-category="{{item.category}}">
|
|
<image
|
|
class="expand-icon"
|
|
src="{{icons.expandIcon}}"
|
|
style="transform: rotate({{item.expanded ? '90deg' : '0deg'}})"
|
|
/>
|
|
<view class="category-name">{{item.category}}</view>
|
|
</view>
|
|
<view wx:if="{{item.expanded}}" class="font-list">
|
|
<view
|
|
wx:for="{{item.fonts}}"
|
|
wx:for-item="font"
|
|
wx:key="id"
|
|
class="font-item"
|
|
>
|
|
<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}}" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view wx:if="{{!favoriteCategories.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>
|