图标大改
This commit is contained in:
@@ -7,6 +7,13 @@ import PresetSidebar from './preset/PresetSidebar.vue';
|
|||||||
import PresetList from './preset/PresetList.vue';
|
import PresetList from './preset/PresetList.vue';
|
||||||
import FolderSelector from './preset/FolderSelector.vue';
|
import FolderSelector from './preset/FolderSelector.vue';
|
||||||
import TypeSelector from './preset/TypeSelector.vue';
|
import TypeSelector from './preset/TypeSelector.vue';
|
||||||
|
import IconMenu from './icons/IconMenu.vue';
|
||||||
|
import IconSearch from './icons/IconSearch.vue';
|
||||||
|
import IconSort from './icons/IconSort.vue';
|
||||||
|
import IconPlus from './icons/IconPlus.vue';
|
||||||
|
import IconShare from './icons/IconShare.vue';
|
||||||
|
import IconExport from './icons/IconExport.vue';
|
||||||
|
import IconImport from './icons/IconImport.vue';
|
||||||
|
|
||||||
const store = usePromptStore();
|
const store = usePromptStore();
|
||||||
const PRESET_MANAGER_VIEW_STATE_KEY = 'preset-manager-view-state';
|
const PRESET_MANAGER_VIEW_STATE_KEY = 'preset-manager-view-state';
|
||||||
@@ -893,18 +900,11 @@ onBeforeUnmount(() => {
|
|||||||
<div class="pm-main">
|
<div class="pm-main">
|
||||||
<div class="pm-toolbar">
|
<div class="pm-toolbar">
|
||||||
<button class="btn-icon mobile-menu-btn" @click="showMobileSidebar = true">
|
<button class="btn-icon mobile-menu-btn" @click="showMobileSidebar = true">
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
<IconMenu width="24" height="24" />
|
||||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
|
||||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
|
||||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
|
||||||
</svg>
|
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="search-box">
|
<div class="search-box">
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<IconSearch width="16" height="16" />
|
||||||
<circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
|
|
||||||
<path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="2"/>
|
|
||||||
</svg>
|
|
||||||
<input v-model="searchQuery" placeholder="搜索预设..." />
|
<input v-model="searchQuery" placeholder="搜索预设..." />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -931,13 +931,7 @@ onBeforeUnmount(() => {
|
|||||||
@click="toggleSortDirection"
|
@click="toggleSortDirection"
|
||||||
:title="`切换为${sortDirection === 'asc' ? '倒序' : '正序'}`"
|
:title="`切换为${sortDirection === 'asc' ? '倒序' : '正序'}`"
|
||||||
>
|
>
|
||||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
<IconSort width="14" height="14" />
|
||||||
<path d="M7 4v16"></path>
|
|
||||||
<path d="M4 7l3-3 3 3"></path>
|
|
||||||
<path d="M13 8h7"></path>
|
|
||||||
<path d="M13 12h5"></path>
|
|
||||||
<path d="M13 16h3"></path>
|
|
||||||
</svg>
|
|
||||||
<span>{{ sortDirectionLabel }}</span>
|
<span>{{ sortDirectionLabel }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -945,32 +939,19 @@ onBeforeUnmount(() => {
|
|||||||
|
|
||||||
<div class="action-group">
|
<div class="action-group">
|
||||||
<button @click="createPreset" class="btn-primary">
|
<button @click="createPreset" class="btn-primary">
|
||||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<IconPlus width="14" height="14" />
|
||||||
<line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2"/>
|
|
||||||
<line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2"/>
|
|
||||||
</svg>
|
|
||||||
新建预设
|
新建预设
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="import-export">
|
<div class="import-export">
|
||||||
<button @click="openShareDialog()" class="btn-icon" title="云端分享/导入">
|
<button @click="openShareDialog()" class="btn-icon" title="云端分享/导入">
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
<IconShare width="16" height="16" />
|
||||||
<path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path>
|
|
||||||
</svg>
|
|
||||||
</button>
|
</button>
|
||||||
<button @click="exportPresets" class="btn-icon" title="导出预设">
|
<button @click="exportPresets" class="btn-icon" title="导出预设">
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<IconExport width="16" height="16" />
|
||||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2"/>
|
|
||||||
<polyline points="7,10 12,15 17,10" stroke="currentColor" stroke-width="2"/>
|
|
||||||
<line x1="12" y1="15" x2="12" y2="3" stroke="currentColor" stroke-width="2"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
</button>
|
||||||
<label class="btn-icon" title="导入预设">
|
<label class="btn-icon" title="导入预设">
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<IconImport width="16" height="16" />
|
||||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2"/>
|
|
||||||
<polyline points="17,8 12,3 7,8" stroke="currentColor" stroke-width="2"/>
|
|
||||||
<line x1="12" y1="3" x2="12" y2="15" stroke="currentColor" stroke-width="2"/>
|
|
||||||
</svg>
|
|
||||||
<input type="file" accept=".json" @change="importPresets" style="display: none;">
|
<input type="file" accept=".json" @change="importPresets" style="display: none;">
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,50 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
defineProps<{
|
||||||
|
width?: string | number
|
||||||
|
height?: string | number
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
:width="width || 24"
|
||||||
|
:height="height || 24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2.25"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="icon-check"
|
||||||
|
>
|
||||||
|
<circle class="check-ring" cx="12" cy="12" r="9" />
|
||||||
|
<path class="check-mark" d="M7 12.5 10.2 15.7 17 8.9" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.icon-check {
|
||||||
|
overflow: visible;
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-ring,
|
||||||
|
.check-mark {
|
||||||
|
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, stroke-dashoffset 0.35s ease;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-mark {
|
||||||
|
stroke-dasharray: 18;
|
||||||
|
stroke-dashoffset: 18;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.action-btn:hover) .check-ring,
|
||||||
|
:deep(.action-btn:hover) .check-mark,
|
||||||
|
.icon-check:hover .check-ring,
|
||||||
|
.icon-check:hover .check-mark {
|
||||||
|
transform: scale(1.06);
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
defineProps<{
|
||||||
|
width?: string | number
|
||||||
|
height?: string | number
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
:width="width || 24"
|
||||||
|
:height="height || 24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="icon-copy"
|
||||||
|
>
|
||||||
|
<rect class="copy-back" x="7" y="7" width="11" height="11" rx="2" />
|
||||||
|
<rect class="copy-front" x="4" y="4" width="11" height="11" rx="2" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.icon-copy {
|
||||||
|
overflow: visible;
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-back,
|
||||||
|
.copy-front {
|
||||||
|
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.action-btn:hover) .copy-back,
|
||||||
|
.icon-copy:hover .copy-back {
|
||||||
|
transform: translate(1px, 1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.action-btn:hover) .copy-front,
|
||||||
|
.icon-copy:hover .copy-front {
|
||||||
|
transform: translate(-1px, -1px) rotate(-4deg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,57 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
defineProps<{
|
||||||
|
width?: string | number
|
||||||
|
height?: string | number
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
:width="width || 48"
|
||||||
|
:height="height || 48"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="icon-empty-state"
|
||||||
|
>
|
||||||
|
<path class="empty-box" d="M4 7h16v10H4z" />
|
||||||
|
<path class="empty-line" d="M7 11h10" />
|
||||||
|
<path class="empty-line" d="M7 14h6" />
|
||||||
|
<circle class="empty-spark spark-1" cx="17" cy="8" r="1" fill="currentColor" />
|
||||||
|
<circle class="empty-spark spark-2" cx="8" cy="6" r="1" fill="currentColor" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.icon-empty-state {
|
||||||
|
overflow: visible;
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-box,
|
||||||
|
.empty-line,
|
||||||
|
.empty-spark {
|
||||||
|
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-spark {
|
||||||
|
opacity: 0.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-empty-state:hover .empty-box {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-empty-state:hover .spark-1 {
|
||||||
|
transform: translateY(-1px) scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-empty-state:hover .spark-2 {
|
||||||
|
transform: translateY(1px) scale(1.2);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
defineProps<{
|
||||||
|
width?: string | number
|
||||||
|
height?: string | number
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
:width="width || 24"
|
||||||
|
:height="height || 24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="icon-export"
|
||||||
|
>
|
||||||
|
<path class="tray" d="M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4" />
|
||||||
|
<path class="arrow" d="M12 3v12" />
|
||||||
|
<path class="arrow-head" d="M7 8l5-5 5 5" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.icon-export {
|
||||||
|
overflow: visible;
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tray,
|
||||||
|
.arrow,
|
||||||
|
.arrow-head {
|
||||||
|
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.btn-icon:hover) .arrow,
|
||||||
|
.icon-export:hover .arrow {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.btn-icon:hover) .arrow-head,
|
||||||
|
.icon-export:hover .arrow-head {
|
||||||
|
transform: translateY(-1px) scale(1.06);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,101 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
withDefaults(defineProps<{
|
||||||
|
width?: string | number
|
||||||
|
height?: string | number
|
||||||
|
active?: boolean
|
||||||
|
}>(), {
|
||||||
|
active: false,
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
:width="width || 24"
|
||||||
|
:height="height || 24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="icon-heart"
|
||||||
|
:class="{ 'is-active': active }"
|
||||||
|
>
|
||||||
|
<path class="heart-glow" d="M12 20.5 10.9 19.5C6.1 15.4 3.4 12.9 3.4 9.6 3.4 7.1 5.4 5 7.9 5c1.5 0 2.8.7 3.6 1.9.8-1.2 2.1-1.9 3.6-1.9 2.5 0 4.5 2.1 4.5 4.6 0 3.3-2.7 5.8-7.5 9.9L12 20.5Z" />
|
||||||
|
<path class="heart-fill" fill="currentColor" d="M12 20.5 10.9 19.5C6.1 15.4 3.4 12.9 3.4 9.6 3.4 7.1 5.4 5 7.9 5c1.5 0 2.8.7 3.6 1.9.8-1.2 2.1-1.9 3.6-1.9 2.5 0 4.5 2.1 4.5 4.6 0 3.3-2.7 5.8-7.5 9.9L12 20.5Z" />
|
||||||
|
<path class="heart-outline" d="M12 20.5 10.9 19.5C6.1 15.4 3.4 12.9 3.4 9.6 3.4 7.1 5.4 5 7.9 5c1.5 0 2.8.7 3.6 1.9.8-1.2 2.1-1.9 3.6-1.9 2.5 0 4.5 2.1 4.5 4.6 0 3.3-2.7 5.8-7.5 9.9L12 20.5Z" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.icon-heart {
|
||||||
|
overflow: visible;
|
||||||
|
color: currentColor;
|
||||||
|
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.heart-glow,
|
||||||
|
.heart-fill,
|
||||||
|
.heart-outline {
|
||||||
|
transform-origin: center;
|
||||||
|
transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, fill 0.25s ease, stroke 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heart-glow {
|
||||||
|
fill: currentColor;
|
||||||
|
opacity: 0;
|
||||||
|
stroke: none;
|
||||||
|
filter: blur(1.25px);
|
||||||
|
transform: scale(0.86);
|
||||||
|
}
|
||||||
|
|
||||||
|
.heart-fill {
|
||||||
|
fill: currentColor;
|
||||||
|
opacity: 0;
|
||||||
|
stroke: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heart-outline {
|
||||||
|
fill: none;
|
||||||
|
stroke: currentColor;
|
||||||
|
stroke-width: 2;
|
||||||
|
opacity: 0.92;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-heart.is-active .heart-fill {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1.01);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-heart.is-active .heart-outline {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-heart:hover,
|
||||||
|
:deep(.action-btn:hover) .icon-heart,
|
||||||
|
:deep(.action-btn.is-favorite:hover) .icon-heart {
|
||||||
|
transform: translateY(-1px) scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-heart:hover .heart-outline,
|
||||||
|
:deep(.action-btn:hover) .heart-outline {
|
||||||
|
transform: scale(1.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-heart:hover .heart-glow,
|
||||||
|
:deep(.action-btn:hover) .heart-glow {
|
||||||
|
opacity: 0.2;
|
||||||
|
transform: scale(1.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-heart.is-active:hover .heart-fill,
|
||||||
|
:deep(.action-btn.is-favorite:hover) .heart-fill {
|
||||||
|
transform: scale(1.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-heart.is-active:hover .heart-glow,
|
||||||
|
:deep(.action-btn.is-favorite:hover) .heart-glow {
|
||||||
|
opacity: 0.24;
|
||||||
|
transform: scale(1.22);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
defineProps<{
|
||||||
|
width?: string | number
|
||||||
|
height?: string | number
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
:width="width || 24"
|
||||||
|
:height="height || 24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="icon-import"
|
||||||
|
>
|
||||||
|
<path class="tray" d="M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4" />
|
||||||
|
<path class="arrow" d="M12 3v12" />
|
||||||
|
<path class="arrow-head" d="m7 10 5 5 5-5" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.icon-import {
|
||||||
|
overflow: visible;
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tray,
|
||||||
|
.arrow,
|
||||||
|
.arrow-head {
|
||||||
|
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.btn-icon:hover) .arrow,
|
||||||
|
.icon-import:hover .arrow {
|
||||||
|
transform: translateY(1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.btn-icon:hover) .arrow-head,
|
||||||
|
.icon-import:hover .arrow-head {
|
||||||
|
transform: translateY(1px) scale(1.06);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
defineProps<{
|
||||||
|
width?: string | number
|
||||||
|
height?: string | number
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
:width="width || 24"
|
||||||
|
:height="height || 24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="icon-menu"
|
||||||
|
>
|
||||||
|
<path class="menu-line line-1" d="M4 7h16" />
|
||||||
|
<path class="menu-line line-2" d="M4 12h16" />
|
||||||
|
<path class="menu-line line-3" d="M4 17h16" />
|
||||||
|
<circle class="menu-spark" cx="19" cy="7" r="1" fill="currentColor" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.icon-menu {
|
||||||
|
overflow: visible;
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-line,
|
||||||
|
.menu-spark {
|
||||||
|
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.mobile-menu-btn:hover) .line-1,
|
||||||
|
.icon-menu:hover .line-1 {
|
||||||
|
transform: translateY(-1px) rotate(4deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.mobile-menu-btn:hover) .line-2,
|
||||||
|
.icon-menu:hover .line-2 {
|
||||||
|
transform: scaleX(0.86);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.mobile-menu-btn:hover) .line-3,
|
||||||
|
.icon-menu:hover .line-3 {
|
||||||
|
transform: translateY(1px) rotate(-4deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.mobile-menu-btn:hover) .menu-spark,
|
||||||
|
.icon-menu:hover .menu-spark {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1.4);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
defineProps<{
|
||||||
|
width?: string | number
|
||||||
|
height?: string | number
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
:width="width || 24"
|
||||||
|
:height="height || 24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="icon-more"
|
||||||
|
>
|
||||||
|
<circle class="more-dot dot-1" cx="5" cy="12" r="1.2" fill="currentColor" />
|
||||||
|
<circle class="more-dot dot-2" cx="12" cy="12" r="1.2" fill="currentColor" />
|
||||||
|
<circle class="more-dot dot-3" cx="19" cy="12" r="1.2" fill="currentColor" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.icon-more {
|
||||||
|
overflow: visible;
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-dot {
|
||||||
|
transform-origin: center;
|
||||||
|
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.more-btn:hover) .dot-1,
|
||||||
|
.icon-more:hover .dot-1 {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.more-btn:hover) .dot-2,
|
||||||
|
.icon-more:hover .dot-2 {
|
||||||
|
transform: translateY(1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.more-btn:hover) .dot-3,
|
||||||
|
.icon-more:hover .dot-3 {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
defineProps<{
|
||||||
|
width?: string | number
|
||||||
|
height?: string | number
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
:width="width || 24"
|
||||||
|
:height="height || 24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2.25"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="icon-plus"
|
||||||
|
>
|
||||||
|
<circle class="plus-ring" cx="12" cy="12" r="9" />
|
||||||
|
<path class="plus-vert" d="M12 7v10" />
|
||||||
|
<path class="plus-horz" d="M7 12h10" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.icon-plus {
|
||||||
|
overflow: visible;
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plus-ring,
|
||||||
|
.plus-vert,
|
||||||
|
.plus-horz {
|
||||||
|
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, stroke-dashoffset 0.35s ease;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.btn-primary:hover) .plus-ring,
|
||||||
|
.icon-plus:hover .plus-ring {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.btn-primary:hover) .plus-vert,
|
||||||
|
.icon-plus:hover .plus-vert {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.btn-primary:hover) .plus-horz,
|
||||||
|
.icon-plus:hover .plus-horz {
|
||||||
|
transform: scaleX(1.12);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -4,50 +4,50 @@
|
|||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
class="icon-preset-type"
|
class="icon-preset-type"
|
||||||
:class="type"
|
:class="type"
|
||||||
>
|
>
|
||||||
<!-- Positive: Sparkles/Magic -->
|
|
||||||
<template v-if="type === 'positive'">
|
<template v-if="type === 'positive'">
|
||||||
<path class="star-main" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
<path class="positive-wand wand-shadow" d="M7.1 17.2 16.8 7.5" />
|
||||||
|
<path class="positive-wand wand-body" d="M6.4 16.5 16.1 6.8" />
|
||||||
|
<path class="positive-cap" d="M16.1 6.8 18.2 4.7" />
|
||||||
|
<path class="positive-tip tip-1" d="M17.7 3.1 18.3 4.5 19.7 5.1 18.3 5.7 17.7 7.1 17.1 5.7 15.7 5.1 17.1 4.5Z" />
|
||||||
|
<path class="positive-tip tip-2" d="M9.2 6.3 9.6 7.3 10.6 7.7 9.6 8.1 9.2 9.1 8.8 8.1 7.8 7.7 8.8 7.3Z" />
|
||||||
|
<circle class="positive-tip dot-1" cx="14.1" cy="10.9" r="0.7" />
|
||||||
|
<circle class="positive-tip dot-2" cx="6.9" cy="18.1" r="0.8" />
|
||||||
|
<path class="positive-spark spark-1" d="M19.6 10.6 20 11.7 21.1 12.1 20 12.5 19.6 13.6 19.2 12.5 18.1 12.1 19.2 11.7Z" />
|
||||||
|
<path class="positive-spark spark-2" d="M4.8 10.8 5.2 11.6 6 12 5.2 12.4 4.8 13.2 4.4 12.4 3.6 12 4.4 11.6Z" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- Negative: Ban/Stop -->
|
|
||||||
<template v-else-if="type === 'negative'">
|
<template v-else-if="type === 'negative'">
|
||||||
<circle class="circle" cx="12" cy="12" r="10" />
|
<circle class="negative-ring" cx="12" cy="12" r="9.2" />
|
||||||
<line class="slash" x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
|
<line class="negative-slash" x1="5" y1="5" x2="19" y2="19" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- Setting: Gear -->
|
|
||||||
<template v-else-if="type === 'setting'">
|
<template v-else-if="type === 'setting'">
|
||||||
<path class="gear" d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L3.16 8.87c-.09.17-.05.39.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.58 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.09-.17.05-.39-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
|
<path class="setting-gear" d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L3.16 8.87c-.09.17-.05.39.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.58 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.09-.17.05-.39-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- Style: Brush -->
|
|
||||||
<template v-else-if="type === 'style'">
|
<template v-else-if="type === 'style'">
|
||||||
<path class="brush-handle" d="M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3z"/>
|
<path class="style-brush" d="M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3z"/>
|
||||||
<path class="brush-tip" d="M20.71 4.63l-1.34-1.34a.996.996 0 0 0-1.41 0L9 12.25 11.75 15l8.96-8.96a.996.996 0 0 0 0-1.41z"/>
|
<path class="style-tip" d="M20.71 4.63l-1.34-1.34a.996.996 0 0 0-1.41 0L9 12.25 11.75 15l8.96-8.96a.996.996 0 0 0 0-1.41z"/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- Character: User/Face -->
|
|
||||||
<template v-else-if="type === 'character'">
|
<template v-else-if="type === 'character'">
|
||||||
<path class="user-body" d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
<path class="character-body" d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
||||||
<circle class="user-head" cx="12" cy="7" r="4" />
|
<circle class="character-head" cx="12" cy="7" r="4" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- Scene: Image/Landscape -->
|
|
||||||
<template v-else-if="type === 'scene'">
|
<template v-else-if="type === 'scene'">
|
||||||
<rect class="scene-frame" x="3" y="3" width="18" height="18" rx="2" ry="2" />
|
<rect class="scene-frame" x="3" y="3" width="18" height="18" rx="2" ry="2" />
|
||||||
<circle class="scene-sun" cx="8.5" cy="8.5" r="1.5" />
|
<circle class="scene-sun" cx="8.5" cy="8.5" r="1.5" />
|
||||||
<polyline class="scene-mountain" points="21 15 16 10 5 21" />
|
<polyline class="scene-mountain" points="21 15 16 10 5 21" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- Custom: Puzzle -->
|
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<path class="puzzle-piece" d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5A2.5 2.5 0 0 0 10.5 1 2.5 2.5 0 0 0 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5a2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5z"/>
|
<path class="custom-piece" d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5A2.5 2.5 0 0 0 10.5 1 2.5 2.5 0 0 0 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5a2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5z"/>
|
||||||
</template>
|
</template>
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
@@ -62,93 +62,158 @@ defineProps<{
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.icon-preset-type {
|
.icon-preset-type {
|
||||||
transition: all 0.3s ease;
|
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
|
color: currentColor;
|
||||||
|
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Positive: Sparkle/Twinkle */
|
.positive-wand,
|
||||||
.positive .star-main {
|
.positive-cap,
|
||||||
|
.positive-tip,
|
||||||
|
.positive-spark,
|
||||||
|
.negative-ring,
|
||||||
|
.negative-slash,
|
||||||
|
.setting-gear,
|
||||||
|
.style-brush,
|
||||||
|
.style-tip,
|
||||||
|
.character-body,
|
||||||
|
.character-head,
|
||||||
|
.scene-frame,
|
||||||
|
.scene-sun,
|
||||||
|
.scene-mountain,
|
||||||
|
.custom-piece {
|
||||||
transform-origin: center;
|
transform-origin: center;
|
||||||
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, stroke-dashoffset 0.35s ease, fill 0.25s ease;
|
||||||
}
|
}
|
||||||
:deep(.nav-btn:hover) .positive .star-main,
|
|
||||||
.positive:hover .star-main {
|
.positive-wand {
|
||||||
transform: scale(1.1) rotate(15deg);
|
stroke-width: 3.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.positive-wand.wand-shadow {
|
||||||
|
opacity: 0.18;
|
||||||
|
filter: blur(0.2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.positive-wand.wand-body {
|
||||||
|
stroke-width: 2.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.positive-cap {
|
||||||
|
stroke-width: 2.7;
|
||||||
|
opacity: 0.95;
|
||||||
|
}
|
||||||
|
|
||||||
|
.positive-tip {
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
fill-opacity: 0.2;
|
stroke: none;
|
||||||
|
opacity: 0.95;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Negative: Shake */
|
.positive-spark {
|
||||||
.negative .slash {
|
fill: currentColor;
|
||||||
|
stroke: none;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.negative-ring {
|
||||||
|
opacity: 0.92;
|
||||||
|
}
|
||||||
|
|
||||||
|
.negative-slash {
|
||||||
transform-origin: center;
|
transform-origin: center;
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
:deep(.nav-btn:hover) .negative,
|
|
||||||
.negative:hover {
|
|
||||||
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
|
|
||||||
}
|
|
||||||
@keyframes shake {
|
|
||||||
10%, 90% { transform: translate3d(-1px, 0, 0); }
|
|
||||||
20%, 80% { transform: translate3d(2px, 0, 0); }
|
|
||||||
30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
|
|
||||||
40%, 60% { transform: translate3d(4px, 0, 0); }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Setting: Rotate */
|
.setting-gear {
|
||||||
.setting .gear {
|
|
||||||
transform-origin: center;
|
transform-origin: center;
|
||||||
transition: transform 0.5s ease;
|
|
||||||
}
|
|
||||||
:deep(.nav-btn:hover) .setting .gear,
|
|
||||||
.setting:hover .gear {
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Style: Brush Wiggle */
|
.style-tip {
|
||||||
.style .brush-tip {
|
transform-origin: 10px 13px;
|
||||||
transform-origin: bottom left;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
:deep(.nav-btn:hover) .style .brush-tip,
|
|
||||||
.style:hover .brush-tip {
|
|
||||||
transform: rotate(-10deg) translateY(-2px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Character: Bounce */
|
.character-head {
|
||||||
.character .user-head {
|
|
||||||
transform-origin: center;
|
transform-origin: center;
|
||||||
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
||||||
}
|
|
||||||
:deep(.nav-btn:hover) .character .user-head,
|
|
||||||
.character:hover .user-head {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Scene: Zoom */
|
.scene-frame {
|
||||||
.scene .scene-mountain {
|
opacity: 0.95;
|
||||||
transform-origin: bottom;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
.scene .scene-sun {
|
|
||||||
transform-origin: center;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
:deep(.nav-btn:hover) .scene .scene-mountain,
|
|
||||||
.scene:hover .scene-mountain {
|
|
||||||
transform: scaleY(1.1);
|
|
||||||
}
|
|
||||||
:deep(.nav-btn:hover) .scene .scene-sun,
|
|
||||||
.scene:hover .scene-sun {
|
|
||||||
transform: translateY(-2px) scale(1.1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Custom: Puzzle Fit */
|
.scene-sun {
|
||||||
.custom .puzzle-piece {
|
fill: currentColor;
|
||||||
transform-origin: center;
|
opacity: 0.9;
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
}
|
||||||
:deep(.nav-btn:hover) .custom .puzzle-piece,
|
|
||||||
.custom:hover .puzzle-piece {
|
.icon-preset-type:hover,
|
||||||
transform: scale(1.1) rotate(-5deg);
|
:deep(.nav-btn:hover) .icon-preset-type {
|
||||||
|
transform: translateY(-1px) scale(1.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-preset-type.positive:hover .positive-wand,
|
||||||
|
:deep(.nav-btn:hover) .icon-preset-type.positive .positive-wand {
|
||||||
|
transform: translate(-0.2px, -0.2px) rotate(-8deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-preset-type.positive:hover .wand-shadow,
|
||||||
|
:deep(.nav-btn:hover) .icon-preset-type.positive .wand-shadow {
|
||||||
|
opacity: 0.26;
|
||||||
|
transform: translate(0.6px, 0.6px) rotate(-8deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-preset-type.positive:hover .positive-tip,
|
||||||
|
:deep(.nav-btn:hover) .icon-preset-type.positive .positive-tip {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(-0.5px) scale(1.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-preset-type.positive:hover .positive-spark,
|
||||||
|
:deep(.nav-btn:hover) .icon-preset-type.positive .positive-spark {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-preset-type.positive:hover .spark-1,
|
||||||
|
:deep(.nav-btn:hover) .icon-preset-type.positive .spark-1 {
|
||||||
|
transform: translate(0.6px, -0.4px) scale(1.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-preset-type.positive:hover .spark-2,
|
||||||
|
:deep(.nav-btn:hover) .icon-preset-type.positive .spark-2 {
|
||||||
|
transform: translate(-0.4px, 0.4px) scale(1.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-preset-type.negative:hover .negative-slash,
|
||||||
|
:deep(.nav-btn:hover) .icon-preset-type.negative .negative-slash {
|
||||||
|
transform: rotate(3deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-preset-type.setting:hover .setting-gear,
|
||||||
|
:deep(.nav-btn:hover) .icon-preset-type.setting .setting-gear {
|
||||||
|
transform: rotate(70deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-preset-type.style:hover .style-tip,
|
||||||
|
:deep(.nav-btn:hover) .icon-preset-type.style .style-tip {
|
||||||
|
transform: translate(1px, -1px) rotate(-8deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-preset-type.character:hover .character-head,
|
||||||
|
:deep(.nav-btn:hover) .icon-preset-type.character .character-head {
|
||||||
|
transform: translateY(-1.5px) scale(1.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-preset-type.scene:hover .scene-mountain,
|
||||||
|
:deep(.nav-btn:hover) .icon-preset-type.scene .scene-mountain {
|
||||||
|
transform: translateY(-0.5px) scaleY(1.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-preset-type.scene:hover .scene-sun,
|
||||||
|
:deep(.nav-btn:hover) .icon-preset-type.scene .scene-sun {
|
||||||
|
transform: translateY(-1px) scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-preset-type.custom:hover .custom-piece,
|
||||||
|
:deep(.nav-btn:hover) .icon-preset-type.custom .custom-piece {
|
||||||
|
transform: rotate(-5deg) scale(1.06);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -0,0 +1,56 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
defineProps<{
|
||||||
|
width?: string | number
|
||||||
|
height?: string | number
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
:width="width || 24"
|
||||||
|
:height="height || 24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="icon-search"
|
||||||
|
>
|
||||||
|
<circle class="search-lens" cx="11" cy="11" r="7" />
|
||||||
|
<path class="search-handle" d="m16 16 4 4" />
|
||||||
|
<circle class="search-glint" cx="9" cy="9" r="1" fill="currentColor" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.icon-search {
|
||||||
|
overflow: visible;
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-lens,
|
||||||
|
.search-handle,
|
||||||
|
.search-glint {
|
||||||
|
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, stroke-dashoffset 0.35s ease;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.search-box:hover) .search-lens,
|
||||||
|
.icon-search:hover .search-lens {
|
||||||
|
transform: scale(1.06);
|
||||||
|
stroke-dasharray: 40 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.search-box:hover) .search-handle,
|
||||||
|
.icon-search:hover .search-handle {
|
||||||
|
transform: translate(1px, 1px) rotate(12deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.search-box:hover) .search-glint,
|
||||||
|
.icon-search:hover .search-glint {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1.4);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,58 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
defineProps<{
|
||||||
|
width?: string | number
|
||||||
|
height?: string | number
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
:width="width || 24"
|
||||||
|
:height="height || 24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="icon-share"
|
||||||
|
>
|
||||||
|
<circle class="share-node node-1" cx="18" cy="5" r="3" />
|
||||||
|
<circle class="share-node node-2" cx="6" cy="12" r="3" />
|
||||||
|
<circle class="share-node node-3" cx="18" cy="19" r="3" />
|
||||||
|
<path class="share-link link-1" d="M8.59 13.51 15.42 17.49" />
|
||||||
|
<path class="share-link link-2" d="M15.41 6.51 8.59 10.49" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.icon-share {
|
||||||
|
overflow: visible;
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-node,
|
||||||
|
.share-link {
|
||||||
|
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.btn-icon:hover) .share-node,
|
||||||
|
:deep(.dropdown-content button:hover) .share-node,
|
||||||
|
.icon-share:hover .share-node {
|
||||||
|
transform: scale(1.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.btn-icon:hover) .link-1,
|
||||||
|
:deep(.dropdown-content button:hover) .link-1,
|
||||||
|
.icon-share:hover .link-1 {
|
||||||
|
transform: translateY(-1px) rotate(2deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.btn-icon:hover) .link-2,
|
||||||
|
:deep(.dropdown-content button:hover) .link-2,
|
||||||
|
.icon-share:hover .link-2 {
|
||||||
|
transform: translateY(1px) rotate(-2deg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
defineProps<{
|
||||||
|
width?: string | number
|
||||||
|
height?: string | number
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
:width="width || 24"
|
||||||
|
:height="height || 24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="icon-sort"
|
||||||
|
>
|
||||||
|
<path class="sort-arrow" d="M7 4v16" />
|
||||||
|
<path class="sort-arrow-head" d="M4 7l3-3 3 3" />
|
||||||
|
<path class="sort-bars bar-1" d="M13 8h7" />
|
||||||
|
<path class="sort-bars bar-2" d="M13 12h5" />
|
||||||
|
<path class="sort-bars bar-3" d="M13 16h3" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.icon-sort {
|
||||||
|
overflow: visible;
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sort-arrow,
|
||||||
|
.sort-arrow-head,
|
||||||
|
.sort-bars {
|
||||||
|
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.sort-direction-btn:hover) .sort-arrow-head,
|
||||||
|
.icon-sort:hover .sort-arrow-head {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.sort-direction-btn:hover) .sort-bars.bar-1,
|
||||||
|
.icon-sort:hover .sort-bars.bar-1 {
|
||||||
|
transform: translateX(1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.sort-direction-btn:hover) .sort-bars.bar-2,
|
||||||
|
.icon-sort:hover .sort-bars.bar-2 {
|
||||||
|
transform: translateX(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.sort-direction-btn:hover) .sort-bars.bar-3,
|
||||||
|
.icon-sort:hover .sort-bars.bar-3 {
|
||||||
|
transform: translateX(3px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+102
-104
@@ -1,52 +1,37 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
defineProps<{
|
import { computed } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
isDark: boolean
|
isDark: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
const rootClass = computed(() => ({
|
||||||
|
'is-dark': props.isDark,
|
||||||
|
}))
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="icon-theme-container">
|
<div class="icon-theme-container" :class="rootClass">
|
||||||
<div class="moon-glow" :class="{ 'is-active': isDark }"></div>
|
<svg class="theme-sun" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||||
|
<circle class="sun-core" cx="12" cy="12" r="4.5" />
|
||||||
<svg
|
<path class="sun-ray ray-1" d="M12 1.8v3.2" />
|
||||||
class="icon-sun"
|
<path class="sun-ray ray-2" d="M12 19v3.2" />
|
||||||
:class="{ 'is-hidden': isDark }"
|
<path class="sun-ray ray-3" d="M4.9 4.9l2.3 2.3" />
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<path class="sun-ray ray-4" d="M16.8 16.8l2.3 2.3" />
|
||||||
viewBox="0 0 24 24"
|
<path class="sun-ray ray-5" d="M1.8 12h3.2" />
|
||||||
fill="none"
|
<path class="sun-ray ray-6" d="M19 12h3.2" />
|
||||||
stroke="currentColor"
|
<path class="sun-ray ray-7" d="M4.9 19.1l2.3-2.3" />
|
||||||
stroke-width="2"
|
<path class="sun-ray ray-8" d="M16.8 7.2l2.3-2.3" />
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<circle cx="12" cy="12" r="5" />
|
|
||||||
<line x1="12" y1="1" x2="12" y2="3" />
|
|
||||||
<line x1="12" y1="21" x2="12" y2="23" />
|
|
||||||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
|
|
||||||
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
|
|
||||||
<line x1="1" y1="12" x2="3" y2="12" />
|
|
||||||
<line x1="21" y1="12" x2="23" y2="12" />
|
|
||||||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
|
|
||||||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<svg
|
<svg class="theme-moon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||||
class="icon-moon"
|
<path class="moon-core" d="M20 14.5A8.5 8.5 0 1 1 9.5 4a7 7 0 0 0 10.5 10.5Z" />
|
||||||
:class="{ 'is-visible': isDark }"
|
<path class="moon-rim" d="M20 14.5A8.5 8.5 0 1 1 9.5 4a7 7 0 0 0 10.5 10.5Z" />
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<path class="moon-ring ring-1" d="M16.5 6.5l.4 1.1 1.1.4-1.1.4-.4 1.1-.4-1.1-1.1-.4 1.1-.4z" />
|
||||||
viewBox="0 0 24 24"
|
<path class="moon-ring ring-2" d="M18.2 10.2l.3.9.9.3-.9.3-.3.9-.3-.9-.9-.3.9-.3z" />
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
|
||||||
<g class="stars" stroke="none" stroke-width="0" fill="currentColor">
|
|
||||||
<path class="star star-1" d="M17 8 L17.5 9.5 L19 10 L17.5 10.5 L17 12 L16.5 10.5 L15 10 L16.5 9.5 Z" />
|
|
||||||
<path class="star star-2" d="M13 3.5 L13.3 4.5 L14.3 4.8 L13.3 5.1 L13 6.1 L12.7 5.1 L11.7 4.8 L12.7 4.5 Z" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
|
<span class="theme-glow"></span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -55,99 +40,112 @@ defineProps<{
|
|||||||
position: relative;
|
position: relative;
|
||||||
width: 1.25rem;
|
width: 1.25rem;
|
||||||
height: 1.25rem;
|
height: 1.25rem;
|
||||||
display: flex;
|
display: grid;
|
||||||
align-items: center;
|
place-items: center;
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.moon-glow {
|
svg,
|
||||||
|
.theme-glow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
inset: 0;
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%) scale(0.5);
|
|
||||||
width: 200%;
|
|
||||||
height: 200%;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: radial-gradient(closest-side, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
|
|
||||||
opacity: 0;
|
|
||||||
transition: all 0.4s ease;
|
|
||||||
z-index: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-theme-container:hover .moon-glow.is-active {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate(-50%, -50%) scale(1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
position: absolute;
|
overflow: visible;
|
||||||
width: 100%;
|
transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
|
||||||
height: 100%;
|
|
||||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-sun {
|
.theme-sun {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: rotate(0) scale(1);
|
transform: rotate(0deg) scale(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-sun.is-hidden {
|
.theme-moon {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: rotate(90deg) scale(0.5);
|
transform: rotate(-80deg) scale(0.55);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-moon {
|
.theme-glow {
|
||||||
|
border-radius: 50%;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: rotate(-90deg) scale(0.5);
|
transform: scale(0.5);
|
||||||
|
background: radial-gradient(circle, color-mix(in srgb, currentColor 24%, transparent) 0%, transparent 72%);
|
||||||
|
transition: opacity 0.35s ease, transform 0.45s ease;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-moon.is-visible {
|
.sun-core,
|
||||||
opacity: 1;
|
.sun-ray,
|
||||||
transform: rotate(0) scale(1);
|
.moon-core,
|
||||||
}
|
.moon-rim,
|
||||||
|
.moon-ring {
|
||||||
/* Star styles */
|
stroke: currentColor;
|
||||||
.star {
|
fill: currentColor;
|
||||||
transform-origin: center;
|
transform-origin: center;
|
||||||
opacity: 0;
|
transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
|
||||||
transition: opacity 0.3s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-moon.is-visible .star {
|
.sun-core,
|
||||||
|
.moon-core {
|
||||||
|
stroke-width: 2;
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moon-rim {
|
||||||
|
stroke-width: 2;
|
||||||
|
opacity: 0;
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moon-ring {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-theme-container:hover .theme-glow {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-theme-container:hover .theme-sun {
|
||||||
|
transform: rotate(45deg) scale(1.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-theme-container:hover .sun-ray {
|
||||||
|
transform: scaleX(1.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-theme-container.is-dark .theme-sun {
|
||||||
|
opacity: 0;
|
||||||
|
transform: rotate(90deg) scale(0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-theme-container.is-dark .theme-moon {
|
||||||
|
opacity: 1;
|
||||||
|
transform: rotate(0deg) scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-theme-container.is-dark .moon-rim {
|
||||||
|
opacity: 0.26;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-theme-container.is-dark .moon-ring {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hover effects */
|
.icon-theme-container:hover .theme-moon {
|
||||||
.icon-theme-container:hover .icon-sun:not(.is-hidden) {
|
transform: rotate(-6deg) scale(1.04);
|
||||||
animation: spin 4s linear infinite;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-theme-container:hover .icon-moon.is-visible {
|
.icon-theme-container:hover .ring-1 {
|
||||||
animation: swing 2.5s ease-in-out infinite;
|
animation: twinkle 1.4s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-theme-container:hover .star-1 {
|
.icon-theme-container:hover .ring-2 {
|
||||||
animation: twinkle 1.5s infinite ease-in-out;
|
animation: twinkle 1.8s ease-in-out infinite 0.15s;
|
||||||
}
|
|
||||||
|
|
||||||
.icon-theme-container:hover .star-2 {
|
|
||||||
animation: twinkle 2s infinite ease-in-out 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
from { transform: rotate(0); }
|
|
||||||
to { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes swing {
|
|
||||||
0%, 100% { transform: rotate(0) scale(1); }
|
|
||||||
50% { transform: rotate(-10deg) scale(1.05); }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes twinkle {
|
@keyframes twinkle {
|
||||||
0%, 100% { opacity: 0.5; transform: scale(0.8); }
|
0%, 100% { transform: scale(0.85); opacity: 0.45; }
|
||||||
50% { opacity: 1; transform: scale(1.2); }
|
50% { transform: scale(1.25); opacity: 1; }
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -0,0 +1,51 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
defineProps<{
|
||||||
|
width?: string | number
|
||||||
|
height?: string | number
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
:width="width || 24"
|
||||||
|
:height="height || 24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="icon-trash"
|
||||||
|
>
|
||||||
|
<path class="trash-lid" d="M3 6h18" />
|
||||||
|
<path class="trash-body" d="m6 6 1 14h10l1-14" />
|
||||||
|
<path class="trash-handle" d="M9 6V4h6v2" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.icon-trash {
|
||||||
|
overflow: visible;
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trash-lid,
|
||||||
|
.trash-body,
|
||||||
|
.trash-handle {
|
||||||
|
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.action-btn:hover) .trash-lid,
|
||||||
|
:deep(.dropdown-content button:hover) .trash-lid,
|
||||||
|
.icon-trash:hover .trash-lid {
|
||||||
|
transform: translateY(-1px) rotate(-4deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.action-btn:hover) .trash-handle,
|
||||||
|
:deep(.dropdown-content button:hover) .trash-handle,
|
||||||
|
.icon-trash:hover .trash-handle {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -4,6 +4,14 @@ import type { ExtendedPreset, PresetType } from '../../types';
|
|||||||
import IconPresetType from '../icons/IconPresetType.vue';
|
import IconPresetType from '../icons/IconPresetType.vue';
|
||||||
import IconArrowLeft from '../icons/IconArrowLeft.vue';
|
import IconArrowLeft from '../icons/IconArrowLeft.vue';
|
||||||
import IconArrowRight from '../icons/IconArrowRight.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<{
|
const props = defineProps<{
|
||||||
presets: ExtendedPreset[];
|
presets: ExtendedPreset[];
|
||||||
@@ -188,7 +196,7 @@ function formatDate(dateStr: string) {
|
|||||||
<template>
|
<template>
|
||||||
<div class="preset-list-container" ref="containerRef" @scroll="emit('view-state-change')">
|
<div class="preset-list-container" ref="containerRef" @scroll="emit('view-state-change')">
|
||||||
<div v-if="presets.length === 0" class="empty-state">
|
<div v-if="presets.length === 0" class="empty-state">
|
||||||
<div class="empty-icon">📭</div>
|
<IconEmptyState class="empty-icon" />
|
||||||
<p class="empty-text">暂无预设</p>
|
<p class="empty-text">暂无预设</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -235,52 +243,29 @@ function formatDate(dateStr: string) {
|
|||||||
<h4 class="preset-name" :title="preset.name">{{ preset.name }}</h4>
|
<h4 class="preset-name" :title="preset.name">{{ preset.name }}</h4>
|
||||||
<div class="preset-actions">
|
<div class="preset-actions">
|
||||||
<button @click="emit('toggle-favorite', preset)" class="action-btn" :class="{ 'is-favorite': preset.isFavorite }" title="收藏">
|
<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">
|
<IconHeart :active="preset.isFavorite" width="14" height="14" />
|
||||||
<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>
|
</button>
|
||||||
<button @click="emit('apply', preset)" class="action-btn apply-btn" title="应用预设">
|
<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">
|
<IconCheck width="14" height="14" />
|
||||||
<polyline points="20,6 9,17 4,12"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
</button>
|
||||||
<button @click="emit('copy', preset)" class="action-btn" title="复制内容">
|
<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">
|
<IconCopy width="14" height="14" />
|
||||||
<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>
|
</button>
|
||||||
<div class="dropdown-menu">
|
<div class="dropdown-menu">
|
||||||
<button class="action-btn more-btn">
|
<button class="action-btn more-btn">
|
||||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
<IconMore width="14" height="14" />
|
||||||
<circle cx="12" cy="12" r="1"/>
|
|
||||||
<circle cx="19" cy="12" r="1"/>
|
|
||||||
<circle cx="5" cy="12" r="1"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
</button>
|
||||||
<div class="dropdown-content">
|
<div class="dropdown-content">
|
||||||
<button @click="emit('share', preset)">
|
<button @click="emit('share', preset)">
|
||||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
<IconShare width="14" height="14" />
|
||||||
<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>
|
</button>
|
||||||
<button @click="emit('edit', preset)">
|
<button @click="emit('edit', preset)">
|
||||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
<IconEditor width="14" height="14" />
|
||||||
<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>
|
</button>
|
||||||
<button @click="emit('delete', preset)" class="delete-item">
|
<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">
|
<IconTrash width="14" height="14" />
|
||||||
<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>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -355,8 +340,8 @@ function formatDate(dateStr: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.empty-icon {
|
.empty-icon {
|
||||||
font-size: 3rem;
|
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.preset-grid {
|
.preset-grid {
|
||||||
|
|||||||
Reference in New Issue
Block a user