update at 2026-02-08 18:28:39
This commit is contained in:
douboer
217
miniprogram/pages/index/index.wxml
Normal file
217
miniprogram/pages/index/index.wxml
Normal file
@@ -0,0 +1,217 @@
|
||||
<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">
|
||||
<view class="text-input-container">
|
||||
<input
|
||||
class="text-input"
|
||||
value="{{inputText}}"
|
||||
placeholder="此处输入内容"
|
||||
bindinput="onInputText"
|
||||
confirm-type="done"
|
||||
bindconfirm="onRegenerate"
|
||||
/>
|
||||
</view>
|
||||
<view class="export-buttons">
|
||||
<view class="export-btn" bindtap="onShowExportOptions">
|
||||
<image class="export-icon" src="{{icons.export}}" />
|
||||
</view>
|
||||
<view class="export-btn" bindtap="onExportSvg">
|
||||
<image class="export-icon" src="{{icons.exportSvg}}" />
|
||||
</view>
|
||||
<view class="export-btn" bindtap="onExportPng">
|
||||
<image class="export-icon" src="{{icons.exportPng}}" />
|
||||
</view>
|
||||
</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="preview-checkbox" bindtap="onTogglePreviewFont" data-font-id="{{item.id}}">
|
||||
<view class="checkbox-wrapper {{item.showInPreview ? 'checked' : ''}}">
|
||||
<image wx:if="{{item.showInPreview}}" class="checkbox-icon" src="{{icons.checkbox}}" />
|
||||
</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: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" 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="{{item.expanded ? icons.collapseIcon : icons.expandIcon}}"
|
||||
/>
|
||||
<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.checkbox}}" />
|
||||
</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="{{item.expanded ? icons.collapseIcon : icons.expandIcon}}"
|
||||
/>
|
||||
<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.checkbox}}" />
|
||||
</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>
|
||||
Reference in New Issue
Block a user