kjqwdw/pixiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

svg统一管理

Browse Source
This commit is contained in:
kjqwer
2025-09-25 11:06:49 +08:00
parent b3dd41ec44
commit a9dcbc2578
25 changed files with 193 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/common/DownloadProgressWidget.vue
+4 -12
View File
@@ -3,12 +3,8 @@
<!-- 小圆点指示器 -->
<div class="widget-indicator" @click="toggleExpanded" :class="indicatorClass">
<div class="indicator-icon">
<svg v-if="activeTasks.length === 0" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
</svg>
<svg v-else viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
</svg>
<SvgIcon v-if="activeTasks.length === 0" name="bookmark-empty" />
<SvgIcon v-else name="bookmark-empty" />
</div>
<div v-if="activeTasks.length > 0" class="task-count">{{ activeTasks.length }}</div>
</div>
@@ -18,9 +14,7 @@
<div class="panel-header">
<h3>下载进度</h3>
<button @click="toggleExpanded" class="close-btn">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
</svg>
<SvgIcon name="close" />
</button>
</div>
@@ -31,9 +25,7 @@
</div>
<div v-else-if="activeTasks.length === 0" class="empty-section">
<svg viewBox="0 0 24 24" fill="currentColor" class="empty-icon">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
</svg>
<SvgIcon name="bookmark-empty" class="empty-icon" />
<span>暂无下载任务</span>
</div>
ui/src/components/common/ErrorMessage.vue
+2 -6
View File
@@ -1,18 +1,14 @@
<template>
<div v-if="error" class="error-message" :class="type">
<div class="error-icon">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
<SvgIcon name="bookmark-empty" />
</div>
<div class="error-content">
<div class="error-title">{{ title }}</div>
<div class="error-text">{{ error }}</div>
</div>
<button v-if="dismissible" @click="$emit('dismiss')" class="error-close">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
</svg>
<SvgIcon name="close" />
</button>
</div>
</template>
ui/src/components/common/SettingsWidget.vue
+4 -12
View File
@@ -2,10 +2,7 @@
<div class="settings-widget">
<!-- 设置按钮 -->
<button @click="toggleSettings" class="settings-toggle" :class="{ active: isOpen }" title="设置">
<svg viewBox="0 0 24 24" fill="currentColor" class="settings-icon">
<path
d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z" />
</svg>
<SvgIcon name="settings" class="settings-icon" />
</button>
<!-- 设置面板 -->
@@ -13,12 +10,9 @@
<div class="settings-header">
<h3>设置</h3>
<button @click="toggleSettings" class="close-btn" title="关闭">
<svg viewBox="0 0 24 24" fill="currentColor" class="close-icon">
<path
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
</svg>
<SvgIcon name="close" class="close-icon" />
</button>
</div>
</div>
<div class="settings-content">
<!-- 缓存设置 -->
@@ -36,9 +30,7 @@
<!-- 成功提示 -->
<div v-if="successMessage" class="success-message">
<div class="success-content">
<svg viewBox="0 0 24 24" fill="currentColor" class="success-icon">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
</svg>
<SvgIcon name="success" class="success-icon" />
<span>{{ successMessage }}</span>
</div>
</div>
ui/src/components/common/SvgIcon.vue
+25
View File
@@ -0,0 +1,25 @@
<template>
<svg :viewBox="viewBox" :fill="fill" v-bind="$attrs">
<path v-if="iconData" :d="iconData" />
</svg>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { iconRegistry } from '@/assets/icons'
interface Props {
name: string
viewBox?: string
fill?: string
}
const props = withDefaults(defineProps<Props>(), {
viewBox: '0 0 24 24',
fill: 'currentColor'
})
const iconData = computed(() => {
return iconRegistry[props.name] || ''
})
</script>
ui/src/components/common/UpdateChecker.vue
+7 -27
View File
@@ -5,13 +5,8 @@
:class="{ 'has-update': hasUpdate, 'checking': isChecking }" :title="hasUpdate ? '发现新版本！' : '检查更新'">
<!-- 更新提示小红点 -->
<span v-if="hasUpdate" class="update-dot"></span>
<svg v-if="!isChecking" viewBox="0 0 24 24" fill="currentColor" class="update-icon">
<path
d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z" />
</svg>
<svg v-else viewBox="0 0 24 24" fill="currentColor" class="update-icon spinning">
<path d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
</svg>
<SvgIcon v-if="!isChecking" name="update" class="update-icon" />
<SvgIcon v-else name="update" class="update-icon spinning" />
<span v-if="!hasUpdate">{{ isChecking ? '检查中...' : '检查更新' }}</span>
<span v-else class="update-available">有新版本</span>
</button>
@@ -22,17 +17,11 @@
<div class="modal-content" @click.stop>
<div class="modal-header">
<h3 class="modal-title">
<svg viewBox="0 0 24 24" fill="currentColor" class="modal-icon">
<path
d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z" />
</svg>
<SvgIcon name="update" class="modal-icon" />
版本检查结果
</h3>
<button @click="closeModal" class="modal-close">
<svg viewBox="0 0 24 24" fill="currentColor">
<path
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
</svg>
<SvgIcon name="close" class="modal-close" />
</button>
</div>
@@ -52,10 +41,7 @@
<div v-if="updateInfo?.hasUpdate" class="update-available-section">
<div class="update-status">
<svg viewBox="0 0 24 24" fill="currentColor" class="status-icon success">
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
</svg>
<SvgIcon name="success" class="status-icon success" />
<span class="status-text">发现新版本！</span>
</div>
@@ -99,20 +85,14 @@
<div v-else-if="updateInfo && !updateInfo.hasUpdate" class="no-update-section">
<div class="update-status">
<svg viewBox="0 0 24 24" fill="currentColor" class="status-icon info">
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
</svg>
<SvgIcon name="info" class="status-icon info" />
<span class="status-text">您使用的已是最新版本</span>
</div>
</div>
<div v-if="error" class="error-section">
<div class="update-status">
<svg viewBox="0 0 24 24" fill="currentColor" class="status-icon error">
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
</svg>
<SvgIcon name="error" class="status-icon error" />
<span class="status-text">检查更新失败</span>
</div>
<div class="error-message">{{ error }}</div>
ui/src/components/common/WatchlistWidget.vue
+22 -60
View File
@@ -2,10 +2,7 @@
<div class="watchlist-widget">
<!-- 待看名单按钮 -->
<button @click="toggleWatchlist" class="watchlist-toggle" :class="{ active: isOpen }" title="待看名单">
<svg viewBox="0 0 24 24" fill="currentColor" class="watchlist-icon">
<path
d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM10 17l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
</svg>
<SvgIcon name="watchlist" class="watchlist-icon" />
<div v-if="itemCount > 0" class="item-count">{{ itemCount }}</div>
</button>
@@ -15,19 +12,17 @@
loading: addLoading,
update: hasSameAuthorDifferentPage && !isCurrentPageAdded
}" :disabled="addLoading" :title="getAddButtonTitle()">
<svg v-if="!addLoading" viewBox="0 0 24 24" fill="currentColor" class="add-icon">
<!-- 加载状态：显示加载图标 -->
<SvgIcon v-if="addLoading" name="loading" class="loading-icon" />
<!-- 非加载状态：根据条件显示不同图标 -->
<template v-else>
<!-- 已添加：显示勾选图标 -->
<path v-if="isCurrentPageAdded" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
<SvgIcon v-if="isCurrentPageAdded" name="success" class="add-icon" />
<!-- 更新模式：显示更新图标 -->
<path v-else-if="hasSameAuthorDifferentPage"
d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z" />
<SvgIcon v-else-if="hasSameAuthorDifferentPage" name="watchlist-update" class="add-icon" />
<!-- 添加模式：显示加号图标 -->
<path v-else d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
</svg>
<svg v-else viewBox="0 0 24 24" fill="currentColor" class="loading-icon">
<path
d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z" />
</svg>
<SvgIcon v-else name="add" class="add-icon" />
</template>
</button>
<!-- 待看名单面板 -->
@@ -37,15 +32,10 @@
<div class="header-actions">
<span class="item-count-text">{{ itemCount }} 项</span>
<button @click="showAddModal" class="add-btn" title="手动添加">
<svg viewBox="0 0 24 24" fill="currentColor" class="add-icon">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
</svg>
<SvgIcon name="add" class="add-icon" />
</button>
<button @click="toggleWatchlist" class="close-btn" title="关闭">
<svg viewBox="0 0 24 24" fill="currentColor" class="close-icon">
<path
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
</svg>
<SvgIcon name="close" class="close-icon" />
</button>
</div>
</div>
@@ -53,24 +43,16 @@
<!-- 搜索和排序控制区域 -->
<div class="watchlist-controls">
<div class="search-box">
<svg viewBox="0 0 24 24" fill="currentColor" class="search-icon">
<path
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
</svg>
<SvgIcon name="search" class="search-icon" />
<input v-model="searchQuery" type="text" placeholder="搜索标题或URL..." class="search-input" />
<button v-if="searchQuery" @click="clearSearch" class="clear-search-btn" title="清除搜索">
<svg viewBox="0 0 24 24" fill="currentColor">
<path
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
</svg>
<SvgIcon name="close" class="close-icon" />
</button>
</div>
<div class="sort-controls">
<button @click="toggleSortOrder" class="sort-btn" :title="sortOrder === 'desc' ? '切换为升序' : '切换为降序'">
<svg viewBox="0 0 24 24" fill="currentColor" class="sort-icon">
<path v-if="sortOrder === 'desc'" d="M3 12l2-2 7 7 10-10 2 2L12 21z" />
<path v-else d="M12 3l10 10-2 2-7-7-7 7-2-2z" />
</svg>
<SvgIcon v-if="sortOrder === 'desc'" name="sort-desc" class="sort-icon" />
<SvgIcon v-else name="sort-asc" class="sort-icon" />
<span class="sort-text">{{ sortOrder === 'desc' ? '最新' : '最旧' }}</span>
</button>
</div>
@@ -83,28 +65,19 @@
</div>
<div v-else-if="error" class="error">
<svg viewBox="0 0 24 24" fill="currentColor" class="error-icon">
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
</svg>
<SvgIcon name="bookmark-empty" class="error-icon" />
<span>{{ error }}</span>
<button @click="fetchItems" class="retry-btn">重试</button>
</div>
<div v-else-if="filteredAndSortedItems.length === 0 && searchQuery" class="empty">
<svg viewBox="0 0 24 24" fill="currentColor" class="empty-icon">
<path
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
</svg>
<SvgIcon name="search" class="empty-icon" />
<span>没有找到匹配的项目</span>
<p>尝试调整搜索词或清除搜索条件</p>
</div>
<div v-else-if="items.length === 0" class="empty">
<svg viewBox="0 0 24 24" fill="currentColor" class="empty-icon">
<path
d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" />
</svg>
<SvgIcon name="empty" class="empty-icon" />
<span>暂无待看项目</span>
<p>点击右侧的 + 按钮添加当前页面</p>
</div>
@@ -126,15 +99,10 @@
<div class="item-actions">
<button @click="editItem(item)" class="action-btn edit-btn" title="编辑">
<svg viewBox="0 0 24 24" fill="currentColor">
<path
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
</svg>
<SvgIcon name="edit" class="edit-icon" />
</button>
<button @click="deleteItemById(item.id)" class="action-btn delete-btn" title="删除">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
</svg>
<SvgIcon name="delete" class="delete-icon" />
</button>
</div>
</div>
@@ -148,10 +116,7 @@
<div class="modal-header">
<h4>编辑待看项目</h4>
<button @click="cancelEdit" class="close-btn">
<svg viewBox="0 0 24 24" fill="currentColor">
<path
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
</svg>
<SvgIcon name="close" class="close-icon" />
</button>
</div>
<div class="modal-content">
@@ -177,10 +142,7 @@
<div class="modal-header">
<h4>添加待看项目</h4>
<button @click="cancelAdd" class="close-btn">
<svg viewBox="0 0 24 24" fill="currentColor">
<path
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
</svg>
<SvgIcon name="close" class="close-icon" />
</button>
</div>
<div class="modal-content">