图标大改

This commit is contained in:
2026-05-10 10:25:27 +08:00
parent 021be8f22b
commit d9adab89ac
17 changed files with 1042 additions and 270 deletions
+25 -40
View File
@@ -4,6 +4,14 @@ import type { ExtendedPreset, PresetType } from '../../types';
import IconPresetType from '../icons/IconPresetType.vue';
import IconArrowLeft from '../icons/IconArrowLeft.vue';
import IconArrowRight from '../icons/IconArrowRight.vue';
import IconHeart from '../icons/IconHeart.vue';
import IconCheck from '../icons/IconCheck.vue';
import IconCopy from '../icons/IconCopy.vue';
import IconMore from '../icons/IconMore.vue';
import IconShare from '../icons/IconShare.vue';
import IconEditor from '../icons/IconEditor.vue';
import IconTrash from '../icons/IconTrash.vue';
import IconEmptyState from '../icons/IconEmptyState.vue';
const props = defineProps<{
presets: ExtendedPreset[];
@@ -187,8 +195,8 @@ function formatDate(dateStr: string) {
<template>
<div class="preset-list-container" ref="containerRef" @scroll="emit('view-state-change')">
<div v-if="presets.length === 0" class="empty-state">
<div class="empty-icon">📭</div>
<div v-if="presets.length === 0" class="empty-state">
<IconEmptyState class="empty-icon" />
<p class="empty-text">暂无预设</p>
</div>
@@ -234,53 +242,30 @@ function formatDate(dateStr: string) {
</div>
<h4 class="preset-name" :title="preset.name">{{ preset.name }}</h4>
<div class="preset-actions">
<button @click="emit('toggle-favorite', preset)" class="action-btn" :class="{ 'is-favorite': preset.isFavorite }" title="收藏">
<svg width="14" height="14" viewBox="0 0 24 24" :fill="preset.isFavorite ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
<button @click="emit('toggle-favorite', preset)" class="action-btn" :class="{ 'is-favorite': preset.isFavorite }" title="收藏">
<IconHeart :active="preset.isFavorite" width="14" height="14" />
</button>
<button @click="emit('apply', preset)" class="action-btn apply-btn" title="应用预设">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="20,6 9,17 4,12"/>
</svg>
<button @click="emit('apply', preset)" class="action-btn apply-btn" title="应用到提示词">
<IconCheck width="14" height="14" />
</button>
<button @click="emit('copy', preset)" class="action-btn" title="复制内容">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
<path d="m5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
</svg>
<button @click="emit('copy', preset)" class="action-btn" title="复制内容">
<IconCopy width="14" height="14" />
</button>
<div class="dropdown-menu">
<button class="action-btn more-btn">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="1"/>
<circle cx="19" cy="12" r="1"/>
<circle cx="5" cy="12" r="1"/>
</svg>
<button class="action-btn more-btn">
<IconMore width="14" height="14" />
</button>
<div class="dropdown-content">
<button @click="emit('share', preset)">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="18" cy="5" r="3"/>
<circle cx="6" cy="12" r="3"/>
<circle cx="18" cy="19" r="3"/>
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
</svg>
<button @click="emit('share', preset)">
<IconShare width="14" height="14" />
分享
</button>
<button @click="emit('edit', preset)">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
<path d="m18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
</svg>
<button @click="emit('edit', preset)">
<IconEditor width="14" height="14" />
编辑
</button>
<button @click="emit('delete', preset)" class="delete-item">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="3,6 5,6 21,6"/>
<path d="m19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>
<button @click="emit('delete', preset)" class="delete-item">
<IconTrash width="14" height="14" />
删除
</button>
</div>
@@ -355,8 +340,8 @@ function formatDate(dateStr: string) {
}
.empty-icon {
font-size: 3rem;
margin-bottom: 1rem;
color: var(--color-text-tertiary);
}
.preset-grid {