release: v1.4.0 — 标签系统、操作日志扩展与文档截图更新
- 每用户标签与彩色打标，图库 OR/AND 筛选与批量打标 - 操作日志记录登录、删除、设置与标签操作 - API 标签/打标接口；README 与文档站截图同步
This commit is contained in:
O96u committed
1 parent
f17d79b236
commit
0304dfad05
110 files changed
+5881
-778
No files matched your search
@@ -4,6 +4,24 @@
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
## [1.4.0] - 2026-09-09
|
||||
|
||||
### 新增
|
||||
|
||||
- **标签系统**：每用户独立标签与彩色标记；设置页管理（新建、改色、合并、删除）
|
||||
- **图片打标**：上传后单张/批量打标；图库按标签筛选（OR / AND）、批量打标与解标
|
||||
- **操作日志扩展**：记录登录、删除、设置变更、标签操作等；支持日期、用户、操作类型、来源与 IP 筛选
|
||||
- **API**：标签 CRUD、图片打标、`batch-tags`；上传支持 `tagIds`；列表/搜索/统计支持标签筛选
|
||||
|
||||
### 改进
|
||||
|
||||
- 操作日志页 UI 改版（操作/来源徽章、移除备注列）
|
||||
- 设置侧栏增加「标签管理」
|
||||
|
||||
### 文档
|
||||
|
||||
- README 与文档站截图更新（上传、图库、标签、操作日志等）
|
||||
|
||||
## [1.3.0] - 2026-09-07
|
||||
|
||||
### 新增
|
||||
|
||||
+13
-4
@@ -31,9 +31,13 @@
|
||||
|
||||
**main** has no public demo. **cloudflare** branch live demo: [pic.roven.cc](https://pic.roven.cc)
|
||||
|
||||
| API | Gallery (detail) |
|
||||
| :--: | :--------------: |
|
||||
|  |  |
|
||||
| Upload | Gallery |
|
||||
| :----: | :-----: |
|
||||
|  |  |
|
||||
|
||||
| API | Tag management |
|
||||
| :-: | :------------: |
|
||||
|  |  |
|
||||
|
||||
| Storage | Settings |
|
||||
| :-----: | :-------: |
|
||||
@@ -43,12 +47,17 @@
|
||||
| :--------------: | :-----------------: |
|
||||
|  |  |
|
||||
|
||||
| Activity log |
|
||||
| :----------: |
|
||||
|  |
|
||||
|
||||
## Features
|
||||
|
||||
- **Drag, click, or Ctrl+V paste** — server-side WebP, Referer hotlink protection
|
||||
- **Multi-user** — login with slider, Turnstile, or Cap verification; optional registration; users see only their images
|
||||
- **Multi-backend storage** — local disk + S3-compatible (R2 / COS / OSS / AWS); hybrid `proxy` / `public` URLs
|
||||
- **Gallery** — browse, search, filter by storage/source, grid/list views, batch delete; stats overview and source breakdown; image detail modal with link formats
|
||||
- **Gallery** — browse, search, filter by storage/source/tags, grid/list views, batch delete and batch tagging; stats overview and source breakdown; image detail modal with link formats
|
||||
- **Tags** — per-user colored tags; tag on upload (single or batch); manage in Settings (create, recolor, merge, delete); API supports `tagIds` and batch tagging
|
||||
- **Backup & migration** — full-site export/restore (`.phost.tar.gz`), cross-backend sync; restore from backup on uninitialized `/setup`
|
||||
- **API & Twikoo** — global / per-user tokens; `POST /api/index.php` compatible
|
||||
- **Zero-config Docker** — first-run web wizard, no secrets upfront
|
||||
|
||||
@@ -31,9 +31,13 @@
|
||||
|
||||
**main** 分支暂无公网演示；**cloudflare** 分支在线体验：[pic.roven.cc](https://pic.roven.cc)
|
||||
|
||||
| API | 图库（详情） |
|
||||
| 上传 | 图库 |
|
||||
| :--: | :--: |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|
||||
| API | 标签管理 |
|
||||
| :--: | :------: |
|
||||
|  |  |
|
||||
|
||||
| 存储 | 设置 |
|
||||
| :--: | :--: |
|
||||
@@ -43,12 +47,17 @@
|
||||
| :--: | :--: |
|
||||
|  |  |
|
||||
|
||||
| 操作日志 |
|
||||
| :------: |
|
||||
|  |
|
||||
|
||||
## 特性
|
||||
|
||||
- **拖拽 / 点击 / Ctrl+V 粘贴**上传；服务端 WebP 压缩、Referer 防盗链
|
||||
- **多用户**：账号密码登录（滑块 / Turnstile / Cap 人机验证）、可选开放注册；普通用户仅见自己的图片
|
||||
- **多后端存储**：本地磁盘 + S3 兼容（R2 / COS / OSS / AWS）；混合直链 `proxy` / `public`
|
||||
- **图库**：浏览、搜索、按存储/来源筛选、网格/列表切换、批量删除；统计概览与来源分布；点击图片查看详情与多格式链接
|
||||
- **图库**：浏览、搜索、按存储/来源/标签筛选、网格/列表切换、批量删除与批量打标；统计概览与来源分布；点击图片查看详情与多格式链接
|
||||
- **标签**：每用户独立标签、彩色标记；上传后单张/批量打标；设置页管理（新建、改色、合并、删除）；API 支持 `tagIds` 与批量打标
|
||||
- **备份与迁移**：整站导出/恢复（`.phost.tar.gz`）、跨后端同步；setup 未初始化时可从备份恢复
|
||||
- **API 与 Twikoo**：全局 / 个人 Token；`POST /api/index.php` 兼容
|
||||
- **Docker 零配置**：首次访问 Web 引导创建管理员
|
||||
|
||||
@@ -0,0 +1,112 @@
|
||||
<script setup lang="ts">
|
||||
import type { ImageTag } from '~/types/image'
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean
|
||||
tags: ImageTag[]
|
||||
selectedCount: number
|
||||
mode?: 'add' | 'remove'
|
||||
/** 仅添加标签，隐藏添加/移除切换（首页批量打标） */
|
||||
addOnly?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:open': [value: boolean]
|
||||
'confirm': [tagIds: number[], action: 'add' | 'remove']
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const action = ref<'add' | 'remove'>(props.mode ?? 'add')
|
||||
const selectedTagIds = ref<number[]>([])
|
||||
const { loadRecentIds } = useRecentTags()
|
||||
|
||||
watch(() => props.open, (open) => {
|
||||
if (open) {
|
||||
action.value = props.mode ?? 'add'
|
||||
selectedTagIds.value = []
|
||||
loadRecentIds()
|
||||
}
|
||||
})
|
||||
|
||||
function submit() {
|
||||
if (!selectedTagIds.value.length) return
|
||||
emit('confirm', selectedTagIds.value, action.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UModal
|
||||
:open="open"
|
||||
:title="addOnly ? t('tags.batchAddTitle') : t('tags.batchTitle')"
|
||||
:description="addOnly
|
||||
? t('tags.batchAddSubtitle', { n: selectedCount })
|
||||
: t('tags.batchSubtitle', { n: selectedCount })"
|
||||
:ui="{ content: 'max-w-md' }"
|
||||
@update:open="emit('update:open', $event)"
|
||||
>
|
||||
<template #body>
|
||||
<div class="space-y-4">
|
||||
<div
|
||||
v-if="!addOnly"
|
||||
class="flex gap-1 rounded-lg border border-default p-0.5"
|
||||
>
|
||||
<UButton
|
||||
type="button"
|
||||
size="xs"
|
||||
class="flex-1 justify-center"
|
||||
:variant="action === 'add' ? 'solid' : 'ghost'"
|
||||
:color="action === 'add' ? 'primary' : 'neutral'"
|
||||
:label="t('tags.batchAdd')"
|
||||
@click="() => { action = 'add' }"
|
||||
/>
|
||||
<UButton
|
||||
type="button"
|
||||
size="xs"
|
||||
class="flex-1 justify-center"
|
||||
:variant="action === 'remove' ? 'solid' : 'ghost'"
|
||||
:color="action === 'remove' ? 'primary' : 'neutral'"
|
||||
:label="t('tags.batchRemove')"
|
||||
@click="() => { action = 'remove' }"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TagAssignPanel
|
||||
v-model="selectedTagIds"
|
||||
:tags="tags"
|
||||
:allow-create="action === 'add'"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex w-full flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p
|
||||
v-if="addOnly"
|
||||
class="flex items-center gap-1.5 text-xs text-muted"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-info"
|
||||
class="size-3.5 shrink-0"
|
||||
/>
|
||||
{{ t('tags.classifyHint') }}
|
||||
</p>
|
||||
<div class="flex flex-1 justify-end gap-2">
|
||||
<UButton
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
@click="emit('update:open', false)"
|
||||
>
|
||||
{{ t('common.cancel') }}
|
||||
</UButton>
|
||||
<UButton
|
||||
color="primary"
|
||||
:disabled="!selectedTagIds.length"
|
||||
@click="submit"
|
||||
>
|
||||
{{ t('common.save') }}
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
</template>
|
||||
+150
-10
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import type { ImageItem } from '~/types/image'
|
||||
import type { CopyFormat } from '~/composables/useUploadPreferences'
|
||||
import { buildImageBbcode } from '~/utils/image-display'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
image: ImageItem
|
||||
@@ -11,19 +12,26 @@ const props = withDefaults(defineProps<{
|
||||
compact?: boolean
|
||||
gallery?: boolean
|
||||
allowDelete?: boolean
|
||||
showTags?: boolean
|
||||
showTagAction?: boolean
|
||||
}>(), {
|
||||
selectable: true,
|
||||
showKey: true,
|
||||
showStorage: false,
|
||||
compact: false,
|
||||
gallery: false,
|
||||
allowDelete: true
|
||||
allowDelete: true,
|
||||
showTags: false,
|
||||
showTagAction: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:selected': [value: boolean]
|
||||
'preview': []
|
||||
'delete': []
|
||||
'tag-click': [tagId: number]
|
||||
'untagged-click': []
|
||||
'edit-tags': []
|
||||
}>()
|
||||
|
||||
const { formatFileSize } = useFileSize()
|
||||
@@ -79,7 +87,8 @@ onUnmounted(clearRetryTimer)
|
||||
const copyFormatItems = computed(() => [
|
||||
{ label: t('copy.url'), value: 'url' as const },
|
||||
{ label: t('copy.markdown'), value: 'markdown' as const },
|
||||
{ label: t('copy.html'), value: 'html' as const }
|
||||
{ label: t('copy.html'), value: 'html' as const },
|
||||
{ label: t('copy.bbcode'), value: 'bbcode' as const }
|
||||
])
|
||||
|
||||
const uploadedLabel = computed(() => {
|
||||
@@ -96,6 +105,8 @@ const previewValue = computed(() => {
|
||||
return props.image.markdown
|
||||
case 'html':
|
||||
return props.image.html
|
||||
case 'bbcode':
|
||||
return buildImageBbcode(props.image.url)
|
||||
default:
|
||||
return props.image.url
|
||||
}
|
||||
@@ -107,6 +118,8 @@ const copySuccessTitle = computed(() => {
|
||||
return t('copy.copiedMarkdown')
|
||||
case 'html':
|
||||
return t('copy.copiedHtml')
|
||||
case 'bbcode':
|
||||
return t('copy.copiedBbcode')
|
||||
default:
|
||||
return t('copy.copiedUrl')
|
||||
}
|
||||
@@ -127,6 +140,34 @@ const uploadSourceLabel = computed(() => {
|
||||
}
|
||||
})
|
||||
|
||||
const uploadSourceIcon = computed(() => {
|
||||
switch (props.image.uploadSource) {
|
||||
case 'web':
|
||||
return 'i-lucide-globe'
|
||||
case 'api':
|
||||
return 'i-lucide-code-xml'
|
||||
default:
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
const GALLERY_INLINE_TAG_LIMIT = 3
|
||||
|
||||
const galleryTagDisplay = computed(() => {
|
||||
const tags = props.image.tags ?? []
|
||||
if (tags.length <= GALLERY_INLINE_TAG_LIMIT) {
|
||||
return { visible: tags, hidden: [] as typeof tags }
|
||||
}
|
||||
return {
|
||||
visible: tags.slice(0, GALLERY_INLINE_TAG_LIMIT),
|
||||
hidden: tags.slice(GALLERY_INLINE_TAG_LIMIT)
|
||||
}
|
||||
})
|
||||
const sessionVisibleTags = computed(() => props.image.tags ?? [])
|
||||
const sessionTagActionLabel = computed(() =>
|
||||
props.image.tags?.length ? t('tags.addTag') : t('tags.untagged')
|
||||
)
|
||||
|
||||
function toggleSelected(value: boolean | 'indeterminate') {
|
||||
emit('update:selected', value === true)
|
||||
}
|
||||
@@ -210,16 +251,61 @@ async function copyGalleryUrl() {
|
||||
<p class="truncate text-xs text-muted">
|
||||
{{ uploadedLabel }} · {{ formatFileSize(image.size) }}
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-if="showTags"
|
||||
class="flex flex-wrap items-center gap-1.5"
|
||||
>
|
||||
<template v-if="image.tags?.length">
|
||||
<TagBadge
|
||||
v-for="tag in galleryTagDisplay.visible"
|
||||
:key="tag.id"
|
||||
:tag="tag"
|
||||
clickable
|
||||
@click="emit('tag-click', tag.id)"
|
||||
/>
|
||||
<UPopover
|
||||
v-if="galleryTagDisplay.hidden.length"
|
||||
:content="{ side: 'bottom', align: 'start' }"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex rounded-md border border-default px-2 py-0.5 text-xs text-muted transition-colors hover:border-primary/40 hover:text-primary"
|
||||
:aria-label="t('tags.moreTags', { n: galleryTagDisplay.hidden.length })"
|
||||
@click.stop
|
||||
>
|
||||
+{{ galleryTagDisplay.hidden.length }}
|
||||
</button>
|
||||
<template #content>
|
||||
<div
|
||||
class="flex max-w-56 flex-wrap gap-1.5 p-2"
|
||||
@click.stop
|
||||
>
|
||||
<TagBadge
|
||||
v-for="tag in galleryTagDisplay.hidden"
|
||||
:key="tag.id"
|
||||
:tag="tag"
|
||||
clickable
|
||||
@click="emit('tag-click', tag.id)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</UPopover>
|
||||
</template>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="inline-flex rounded-md border border-dashed border-default px-2 py-0.5 text-xs text-muted transition-colors hover:border-primary/40 hover:text-primary"
|
||||
@click.stop="emit('untagged-click')"
|
||||
>
|
||||
{{ t('tags.unlabeled') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="uploadSourceLabel || (showStorage && image.storage)"
|
||||
class="flex flex-wrap gap-1.5"
|
||||
class="flex flex-wrap items-center gap-1.5"
|
||||
>
|
||||
<span
|
||||
v-if="uploadSourceLabel"
|
||||
class="inline-flex rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary"
|
||||
>
|
||||
{{ uploadSourceLabel }}
|
||||
</span>
|
||||
<span
|
||||
v-if="showStorage && image.storage"
|
||||
class="inline-flex max-w-full items-center gap-1 rounded-md border border-default px-2 py-0.5 text-xs text-muted"
|
||||
@@ -231,6 +317,16 @@ async function copyGalleryUrl() {
|
||||
/>
|
||||
<span class="truncate">{{ image.storage.name }}</span>
|
||||
</span>
|
||||
<span
|
||||
v-if="uploadSourceLabel && uploadSourceIcon"
|
||||
class="inline-flex max-w-full items-center gap-1 rounded-md border border-default px-2 py-0.5 text-xs text-muted"
|
||||
>
|
||||
<UIcon
|
||||
:name="uploadSourceIcon"
|
||||
class="size-3 shrink-0"
|
||||
/>
|
||||
<span class="truncate">{{ uploadSourceLabel }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -302,6 +398,21 @@ async function copyGalleryUrl() {
|
||||
@update:model-value="toggleSelected"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="allowDelete && showTagAction"
|
||||
class="absolute top-2 right-2"
|
||||
@click.stop
|
||||
>
|
||||
<UButton
|
||||
icon="i-lucide-trash-2"
|
||||
variant="solid"
|
||||
color="neutral"
|
||||
size="xs"
|
||||
class="bg-black/55 text-white hover:bg-black/70"
|
||||
:aria-label="t('common.delete')"
|
||||
@click="emit('delete')"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="image.owner"
|
||||
class="absolute bottom-2 left-2 max-w-[calc(50%-0.5rem)]"
|
||||
@@ -371,6 +482,20 @@ async function copyGalleryUrl() {
|
||||
>
|
||||
{{ image.originalName }}
|
||||
</p>
|
||||
|
||||
<button
|
||||
v-if="showTagAction && image.tags?.length"
|
||||
type="button"
|
||||
class="flex flex-wrap items-center gap-1.5 text-left"
|
||||
@click.stop="emit('edit-tags')"
|
||||
>
|
||||
<TagBadge
|
||||
v-for="tag in sessionVisibleTags"
|
||||
:key="tag.id"
|
||||
:tag="tag"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<p class="text-xs text-muted">
|
||||
{{ uploadedLabel }} · {{ formatFileSize(image.size) }}
|
||||
</p>
|
||||
@@ -396,13 +521,28 @@ async function copyGalleryUrl() {
|
||||
class="min-w-0 flex-1 font-mono text-xs"
|
||||
/>
|
||||
<CopyButton
|
||||
icon="i-lucide-copy"
|
||||
:label="t('common.copy')"
|
||||
:variant="showTagAction ? 'solid' : 'soft'"
|
||||
:color="showTagAction ? 'primary' : undefined"
|
||||
:icon="showTagAction ? undefined : 'i-lucide-copy'"
|
||||
:value="previewValue"
|
||||
:success-title="copySuccessTitle"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-if="showTagAction"
|
||||
type="button"
|
||||
class="inline-flex items-center gap-1 self-start text-xs text-muted transition-colors hover:text-primary"
|
||||
@click.stop="emit('edit-tags')"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-plus"
|
||||
class="size-3"
|
||||
/>
|
||||
{{ sessionTagActionLabel }}
|
||||
</button>
|
||||
|
||||
<p
|
||||
v-if="showKey"
|
||||
class="truncate text-xs text-dimmed"
|
||||
|
||||
@@ -13,6 +13,8 @@ const props = withDefaults(defineProps<{
|
||||
/** 图库：5 列 × 2 行，缩略图略扁 */
|
||||
gallery?: boolean
|
||||
allowDelete?: boolean
|
||||
showTags?: boolean
|
||||
showTagAction?: boolean
|
||||
}>(), {
|
||||
selectable: true,
|
||||
showKey: true,
|
||||
@@ -20,7 +22,9 @@ const props = withDefaults(defineProps<{
|
||||
dense: false,
|
||||
compact: false,
|
||||
gallery: false,
|
||||
allowDelete: true
|
||||
allowDelete: true,
|
||||
showTags: false,
|
||||
showTagAction: false
|
||||
})
|
||||
|
||||
const gridClass = computed(() => {
|
||||
@@ -37,6 +41,9 @@ const emit = defineEmits<{
|
||||
'update:selectedKeys': [value: Set<string>]
|
||||
'preview': [image: ImageItem]
|
||||
'delete': [image: ImageItem]
|
||||
'tag-click': [tagId: number]
|
||||
'untagged-click': []
|
||||
'edit-tags': [image: ImageItem]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
@@ -68,9 +75,14 @@ function updateSelection(key: string, selected: boolean) {
|
||||
:compact="compact"
|
||||
:gallery="gallery"
|
||||
:allow-delete="allowDelete"
|
||||
:show-tags="showTags"
|
||||
:show-tag-action="showTagAction"
|
||||
@update:selected="updateSelection(image.key, $event)"
|
||||
@preview="emit('preview', image)"
|
||||
@delete="emit('delete', image)"
|
||||
@tag-click="emit('tag-click', $event)"
|
||||
@untagged-click="emit('untagged-click')"
|
||||
@edit-tags="emit('edit-tags', image)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import type { ImageItem } from '~/types/image'
|
||||
import type { CopyFormat } from '~/composables/useUploadPreferences'
|
||||
import { formatImageDimensions } from '~/utils/image-display'
|
||||
|
||||
type EmbedFormat = CopyFormat | 'bbcode'
|
||||
import { buildImageBbcode, formatImageDimensions } from '~/utils/image-display'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
open: boolean
|
||||
image: ImageItem | null
|
||||
showStorage?: boolean
|
||||
showTags?: boolean
|
||||
deleting?: boolean
|
||||
allowDelete?: boolean
|
||||
}>(), {
|
||||
showStorage: false,
|
||||
showTags: false,
|
||||
allowDelete: true
|
||||
})
|
||||
|
||||
@@ -22,6 +22,7 @@ const emit = defineEmits<{
|
||||
}>()
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const { formatFileSize } = useFileSize()
|
||||
const { t, locale } = useI18n()
|
||||
const { copyFormat } = useUploadPreferences()
|
||||
@@ -30,7 +31,7 @@ const naturalWidth = ref<number | null>(null)
|
||||
const naturalHeight = ref<number | null>(null)
|
||||
const dimensionsLoaded = ref(false)
|
||||
const copyingUrl = ref(false)
|
||||
const embedFormat = ref<EmbedFormat>('url')
|
||||
const embedFormat = ref<CopyFormat>('url')
|
||||
|
||||
const embedFormatItems = computed(() => [
|
||||
{ label: t('copy.url'), value: 'url' as const },
|
||||
@@ -65,7 +66,7 @@ const sizeLabel = computed(() => {
|
||||
|
||||
const bbcodeValue = computed(() => {
|
||||
if (!props.image) return ''
|
||||
return `[img]${props.image.url}[/img]`
|
||||
return buildImageBbcode(props.image.url)
|
||||
})
|
||||
|
||||
const previewValue = computed(() => {
|
||||
@@ -110,6 +111,17 @@ const uploadSourceTag = computed(() => {
|
||||
}
|
||||
})
|
||||
|
||||
const uploadSourceIcon = computed(() => {
|
||||
switch (props.image?.uploadSource) {
|
||||
case 'web':
|
||||
return 'i-lucide-globe'
|
||||
case 'api':
|
||||
return 'i-lucide-code-xml'
|
||||
default:
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
const dimensionsLabel = computed(() => {
|
||||
const formatted = formatImageDimensions(naturalWidth.value, naturalHeight.value)
|
||||
if (formatted) return formatted
|
||||
@@ -128,11 +140,9 @@ watch(() => props.open, (open) => {
|
||||
}
|
||||
})
|
||||
|
||||
function selectEmbedFormat(value: EmbedFormat) {
|
||||
function selectEmbedFormat(value: CopyFormat) {
|
||||
embedFormat.value = value
|
||||
if (value !== 'bbcode') {
|
||||
copyFormat.value = value
|
||||
}
|
||||
copyFormat.value = value
|
||||
}
|
||||
|
||||
async function copyText(text: string, successTitle: string) {
|
||||
@@ -288,6 +298,32 @@ function onImageLoad(event: Event) {
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
<div
|
||||
v-if="showTags"
|
||||
class="flex gap-4 py-2.5"
|
||||
>
|
||||
<dt class="w-20 shrink-0 text-muted">
|
||||
{{ t('tags.column') }}
|
||||
</dt>
|
||||
<dd class="min-w-0 flex-1">
|
||||
<div
|
||||
v-if="image.tags?.length"
|
||||
class="flex flex-wrap gap-1.5"
|
||||
>
|
||||
<TagBadge
|
||||
v-for="tag in image.tags"
|
||||
:key="tag.id"
|
||||
:tag="tag"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
v-else
|
||||
class="inline-flex rounded-md border border-dashed border-default px-2 py-0.5 text-xs text-muted"
|
||||
>
|
||||
{{ t('tags.unlabeled') }}
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
<div
|
||||
v-if="uploadSourceTag"
|
||||
class="flex gap-4 py-2.5"
|
||||
@@ -296,7 +332,14 @@ function onImageLoad(event: Event) {
|
||||
{{ t('image.previewUploadSource') }}
|
||||
</dt>
|
||||
<dd class="min-w-0 flex-1">
|
||||
<span class="inline-flex rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
|
||||
<span
|
||||
v-if="uploadSourceIcon"
|
||||
class="inline-flex items-center gap-1 rounded-md border border-default px-2 py-0.5 text-xs text-muted"
|
||||
>
|
||||
<UIcon
|
||||
:name="uploadSourceIcon"
|
||||
class="size-3 shrink-0"
|
||||
/>
|
||||
{{ uploadSourceTag }}
|
||||
</span>
|
||||
</dd>
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
<script setup lang="ts">
|
||||
import type { ImageItem, ImageTag } from '~/types/image'
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean
|
||||
image: ImageItem | null
|
||||
tags: ImageTag[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:open': [value: boolean]
|
||||
'saved': [tags: ImageTag[]]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const toast = useToast()
|
||||
const { setImageTags, fetchTags } = useTags()
|
||||
const { recordRecent, loadRecentIds } = useRecentTags()
|
||||
|
||||
const selectedTagIds = ref<number[]>([])
|
||||
const saving = ref(false)
|
||||
|
||||
watch(() => props.open, (open) => {
|
||||
if (open) {
|
||||
selectedTagIds.value = props.image?.tags?.map(tag => tag.id) ?? []
|
||||
loadRecentIds()
|
||||
void fetchTags(true)
|
||||
}
|
||||
})
|
||||
|
||||
async function save() {
|
||||
if (!props.image || saving.value) return
|
||||
|
||||
saving.value = true
|
||||
try {
|
||||
const tags = await setImageTags(props.image.key, selectedTagIds.value)
|
||||
recordRecent(selectedTagIds.value)
|
||||
emit('saved', tags)
|
||||
emit('update:open', false)
|
||||
toast.add({ title: t('tags.saved'), color: 'success' })
|
||||
} catch (error: unknown) {
|
||||
const message = error instanceof Error ? error.message : t('tags.saveFailed')
|
||||
toast.add({ title: message, color: 'error' })
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function onTagCreated(tag: ImageTag) {
|
||||
if (!selectedTagIds.value.includes(tag.id)) {
|
||||
selectedTagIds.value = [...selectedTagIds.value, tag.id]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UModal
|
||||
:open="open"
|
||||
:title="t('tags.manageImageTitle')"
|
||||
:description="image?.originalName"
|
||||
:ui="{ content: 'max-w-md' }"
|
||||
@update:open="emit('update:open', $event)"
|
||||
>
|
||||
<template #body>
|
||||
<TagAssignPanel
|
||||
v-model="selectedTagIds"
|
||||
:tags="tags"
|
||||
:disabled="saving"
|
||||
@created="onTagCreated"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex w-full flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p class="flex items-center gap-1.5 text-xs text-muted">
|
||||
<UIcon
|
||||
name="i-lucide-info"
|
||||
class="size-3.5 shrink-0"
|
||||
/>
|
||||
{{ t('tags.classifyHint') }}
|
||||
</p>
|
||||
<div class="flex justify-end gap-2">
|
||||
<UButton
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
:disabled="saving"
|
||||
@click="emit('update:open', false)"
|
||||
>
|
||||
{{ t('common.cancel') }}
|
||||
</UButton>
|
||||
<UButton
|
||||
color="primary"
|
||||
:loading="saving"
|
||||
@click="save"
|
||||
>
|
||||
{{ t('common.save') }}
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
</template>
|
||||
@@ -0,0 +1,296 @@
|
||||
<script setup lang="ts">
|
||||
import type { ImageTag } from '~/types/image'
|
||||
import { pickRandomUnusedTagColor, tagPillStyle } from '~/utils/tag-colors'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
modelValue: number[]
|
||||
tags: ImageTag[]
|
||||
disabled?: boolean
|
||||
allowCreate?: boolean
|
||||
}>(), {
|
||||
disabled: false,
|
||||
allowCreate: true
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: number[]]
|
||||
'created': [tag: ImageTag]
|
||||
}>()
|
||||
|
||||
const COMMON_LIMIT = 12
|
||||
const { t } = useI18n()
|
||||
const toast = useToast()
|
||||
const { createTag } = useTags()
|
||||
const { recentIds, loadRecentIds } = useRecentTags()
|
||||
|
||||
const query = ref('')
|
||||
const creating = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
loadRecentIds()
|
||||
})
|
||||
|
||||
const isSearching = computed(() => query.value.trim().length > 0)
|
||||
|
||||
const selectedTags = computed(() =>
|
||||
props.tags.filter(tag => props.modelValue.includes(tag.id))
|
||||
)
|
||||
|
||||
const commonTags = computed(() =>
|
||||
[...props.tags]
|
||||
.sort((a, b) => (b.imageCount ?? 0) - (a.imageCount ?? 0))
|
||||
.slice(0, COMMON_LIMIT)
|
||||
)
|
||||
|
||||
const recentTags = computed(() =>
|
||||
recentIds.value
|
||||
.map(id => props.tags.find(tag => tag.id === id))
|
||||
.filter((tag): tag is ImageTag => Boolean(tag))
|
||||
)
|
||||
|
||||
const existingTags = computed(() => {
|
||||
const q = query.value.trim().toLowerCase()
|
||||
if (!q) return props.tags
|
||||
return props.tags.filter(tag => tag.name.toLowerCase().includes(q))
|
||||
})
|
||||
|
||||
const showCreateOption = computed(() => {
|
||||
if (!props.allowCreate) return false
|
||||
const q = query.value.trim()
|
||||
if (!q) return false
|
||||
return !props.tags.some(tag => tag.name === q)
|
||||
})
|
||||
|
||||
const allExistingSelected = computed(() =>
|
||||
existingTags.value.length > 0
|
||||
&& existingTags.value.every(tag => props.modelValue.includes(tag.id))
|
||||
)
|
||||
|
||||
function isSelected(tagId: number) {
|
||||
return props.modelValue.includes(tagId)
|
||||
}
|
||||
|
||||
function toggleTag(tagId: number) {
|
||||
if (props.disabled) return
|
||||
const next = new Set(props.modelValue)
|
||||
if (next.has(tagId)) next.delete(tagId)
|
||||
else next.add(tagId)
|
||||
emit('update:modelValue', [...next])
|
||||
}
|
||||
|
||||
function removeTag(tagId: number) {
|
||||
if (props.disabled) return
|
||||
emit('update:modelValue', props.modelValue.filter(id => id !== tagId))
|
||||
}
|
||||
|
||||
function clearSelected() {
|
||||
if (props.disabled) return
|
||||
emit('update:modelValue', [])
|
||||
}
|
||||
|
||||
function toggleSelectAllExisting() {
|
||||
if (props.disabled) return
|
||||
const visibleIds = existingTags.value.map(tag => tag.id)
|
||||
if (allExistingSelected.value) {
|
||||
emit('update:modelValue', props.modelValue.filter(id => !visibleIds.includes(id)))
|
||||
return
|
||||
}
|
||||
emit('update:modelValue', [...new Set([...props.modelValue, ...visibleIds])])
|
||||
}
|
||||
|
||||
async function createFromQuery() {
|
||||
const name = query.value.trim()
|
||||
if (!name || creating.value) return
|
||||
|
||||
creating.value = true
|
||||
try {
|
||||
const color = pickRandomUnusedTagColor(props.tags.map(tag => tag.color))
|
||||
const tag = await createTag(name, color)
|
||||
emit('created', tag)
|
||||
emit('update:modelValue', [...new Set([...props.modelValue, tag.id])])
|
||||
query.value = ''
|
||||
toast.add({ title: t('tags.created', { name: tag.name }), color: 'success' })
|
||||
} catch (error: unknown) {
|
||||
const message = error instanceof Error ? error.message : t('tags.createFailed')
|
||||
toast.add({ title: message, color: 'error' })
|
||||
} finally {
|
||||
creating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ reloadRecent: loadRecentIds })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<UInput
|
||||
v-model="query"
|
||||
size="md"
|
||||
icon="i-lucide-search"
|
||||
:placeholder="t('tags.searchOrCreate')"
|
||||
:disabled="disabled"
|
||||
@keydown.enter.prevent="showCreateOption ? createFromQuery() : undefined"
|
||||
/>
|
||||
|
||||
<button
|
||||
v-if="showCreateOption"
|
||||
type="button"
|
||||
class="flex w-full items-center gap-1.5 rounded-lg px-1 py-1 text-left text-sm text-primary hover:bg-primary/5"
|
||||
:disabled="disabled || creating"
|
||||
@click="createFromQuery"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-plus"
|
||||
class="size-4 shrink-0"
|
||||
/>
|
||||
{{ t('tags.createNamed', { name: query.trim() }) }}
|
||||
</button>
|
||||
|
||||
<div
|
||||
v-if="isSearching && existingTags.length"
|
||||
class="space-y-2"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('tags.existingLabel', { n: existingTags.length }) }}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
class="text-xs text-muted transition-colors hover:text-highlighted"
|
||||
:disabled="disabled"
|
||||
@click="toggleSelectAllExisting"
|
||||
>
|
||||
{{ allExistingSelected ? t('tags.deselectAll') : t('tags.selectAll') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<button
|
||||
v-for="tag in existingTags"
|
||||
:key="`existing-${tag.id}`"
|
||||
type="button"
|
||||
class="inline-flex min-w-0 items-center justify-center gap-1 rounded-full border px-2.5 py-1.5 text-xs font-medium transition-opacity hover:opacity-90"
|
||||
:style="tagPillStyle(tag.color, isSelected(tag.id))"
|
||||
:disabled="disabled"
|
||||
@click="toggleTag(tag.id)"
|
||||
>
|
||||
<UIcon
|
||||
v-if="isSelected(tag.id)"
|
||||
name="i-lucide-check"
|
||||
class="size-3 shrink-0"
|
||||
/>
|
||||
<span class="truncate">{{ tag.name }}</span>
|
||||
<UIcon
|
||||
v-if="isSelected(tag.id)"
|
||||
name="i-lucide-x"
|
||||
class="size-3 shrink-0 opacity-80"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<div
|
||||
v-if="selectedTags.length"
|
||||
class="space-y-2"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('tags.selectedLabel', { n: selectedTags.length }) }}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
class="text-xs text-muted transition-colors hover:text-highlighted"
|
||||
:disabled="disabled"
|
||||
@click="clearSelected"
|
||||
>
|
||||
{{ t('tags.clearSelected') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
v-for="tag in selectedTags"
|
||||
:key="tag.id"
|
||||
type="button"
|
||||
class="inline-flex max-w-full items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-opacity hover:opacity-90"
|
||||
:style="tagPillStyle(tag.color, true)"
|
||||
:disabled="disabled"
|
||||
@click="removeTag(tag.id)"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-check"
|
||||
class="size-3 shrink-0"
|
||||
/>
|
||||
<span class="truncate">{{ tag.name }}</span>
|
||||
<UIcon
|
||||
name="i-lucide-x"
|
||||
class="size-3 shrink-0 opacity-80"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="commonTags.length"
|
||||
class="space-y-2"
|
||||
>
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('tags.commonTags') }}
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
v-for="tag in commonTags"
|
||||
:key="tag.id"
|
||||
type="button"
|
||||
class="inline-flex max-w-full items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-opacity hover:opacity-90"
|
||||
:style="tagPillStyle(tag.color, isSelected(tag.id))"
|
||||
:disabled="disabled"
|
||||
@click="toggleTag(tag.id)"
|
||||
>
|
||||
<UIcon
|
||||
v-if="isSelected(tag.id)"
|
||||
name="i-lucide-check"
|
||||
class="size-3 shrink-0"
|
||||
/>
|
||||
<span class="truncate">{{ tag.name }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="recentTags.length"
|
||||
class="space-y-2"
|
||||
>
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('tags.recentTags') }}
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
v-for="tag in recentTags"
|
||||
:key="`recent-${tag.id}`"
|
||||
type="button"
|
||||
class="inline-flex max-w-full items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-opacity hover:opacity-90"
|
||||
:style="tagPillStyle(tag.color, isSelected(tag.id))"
|
||||
:disabled="disabled"
|
||||
@click="toggleTag(tag.id)"
|
||||
>
|
||||
<UIcon
|
||||
v-if="isSelected(tag.id)"
|
||||
name="i-lucide-check"
|
||||
class="size-3 shrink-0"
|
||||
/>
|
||||
<span class="truncate">{{ tag.name }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<p
|
||||
v-if="!tags.length && !showCreateOption"
|
||||
class="py-6 text-center text-sm text-muted"
|
||||
>
|
||||
{{ t('tags.emptyHint') }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,61 @@
|
||||
<script setup lang="ts">
|
||||
import type { ImageTag } from '~/types/image'
|
||||
import { defaultTagColor, resolveTagHexColor, tagPillStyle } from '~/utils/tag-colors'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
tag: ImageTag
|
||||
removable?: boolean
|
||||
clickable?: boolean
|
||||
size?: 'xs' | 'sm'
|
||||
}>(), {
|
||||
removable: false,
|
||||
clickable: false,
|
||||
size: 'xs'
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
remove: []
|
||||
click: []
|
||||
}>()
|
||||
|
||||
const displayColor = computed(() =>
|
||||
resolveTagHexColor(props.tag.color, defaultTagColor(props.tag.id))
|
||||
)
|
||||
|
||||
const pillStyle = computed(() => tagPillStyle(displayColor.value))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span
|
||||
class="inline-flex max-w-full items-center gap-1 rounded-md border px-2 py-0.5 font-medium"
|
||||
:class="[
|
||||
size === 'sm' ? 'text-sm' : 'text-xs',
|
||||
clickable ? 'cursor-pointer hover:opacity-90' : ''
|
||||
]"
|
||||
:style="pillStyle"
|
||||
:role="clickable ? 'button' : undefined"
|
||||
:tabindex="clickable ? 0 : undefined"
|
||||
@click="clickable ? emit('click') : undefined"
|
||||
@keydown.enter.prevent="clickable ? emit('click') : undefined"
|
||||
@keydown.space.prevent="clickable ? emit('click') : undefined"
|
||||
>
|
||||
<span
|
||||
class="size-1.5 shrink-0 rounded-full"
|
||||
:style="{ backgroundColor: displayColor }"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span class="truncate">{{ tag.name }}</span>
|
||||
<button
|
||||
v-if="removable"
|
||||
type="button"
|
||||
class="inline-flex shrink-0 rounded p-0.5 opacity-70 hover:opacity-100"
|
||||
:aria-label="`Remove ${tag.name}`"
|
||||
@click.stop="emit('remove')"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-x"
|
||||
class="size-3"
|
||||
/>
|
||||
</button>
|
||||
</span>
|
||||
</template>
|
||||
@@ -0,0 +1,127 @@
|
||||
<script setup lang="ts">
|
||||
import { TAG_COLOR_PRESETS, visibleTagColorPresets } from '~/utils/tag-colors'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
modelValue: string
|
||||
/** 已被其他标签占用的预设色，选择器中优先展示未占用颜色 */
|
||||
usedColors?: (string | null | undefined)[]
|
||||
/** 固定展示的备选色（新增 8 个 / 编辑 3 个） */
|
||||
candidates?: string[]
|
||||
/** 紧凑模式：不显示标题 */
|
||||
compact?: boolean
|
||||
}>(), {
|
||||
compact: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const colorInput = ref<HTMLInputElement | null>(null)
|
||||
|
||||
const normalizedValue = computed(() => normalizeHex(props.modelValue))
|
||||
|
||||
const presetColors = computed(() => {
|
||||
if (props.candidates?.length) {
|
||||
const seen = new Set<string>()
|
||||
const items: string[] = []
|
||||
for (const color of props.candidates) {
|
||||
const lower = color.toLowerCase()
|
||||
if (!seen.has(lower)) {
|
||||
seen.add(lower)
|
||||
items.push(lower)
|
||||
}
|
||||
}
|
||||
return items
|
||||
}
|
||||
if (!props.usedColors?.length) return TAG_COLOR_PRESETS
|
||||
return visibleTagColorPresets(props.usedColors, props.modelValue)
|
||||
})
|
||||
|
||||
const isPreset = computed(() =>
|
||||
TAG_COLOR_PRESETS.some(color => color.toLowerCase() === normalizedValue.value.toLowerCase())
|
||||
)
|
||||
|
||||
const isCustomSelected = computed(() => {
|
||||
if (props.candidates?.length) {
|
||||
return !presetColors.value.includes(normalizedValue.value)
|
||||
}
|
||||
return !isPreset.value
|
||||
})
|
||||
|
||||
function normalizeHex(value: string) {
|
||||
const trimmed = value.trim()
|
||||
if (/^#[0-9A-Fa-f]{6}$/.test(trimmed)) return trimmed.toLowerCase()
|
||||
return '#22c55e'
|
||||
}
|
||||
|
||||
function selectColor(color: string) {
|
||||
emit('update:modelValue', color.toLowerCase())
|
||||
}
|
||||
|
||||
function onNativeColorInput(event: Event) {
|
||||
const value = (event.target as HTMLInputElement).value
|
||||
if (value) emit('update:modelValue', value.toLowerCase())
|
||||
}
|
||||
|
||||
function openNativePicker() {
|
||||
colorInput.value?.click()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="compact ? '' : 'space-y-2'">
|
||||
<p
|
||||
v-if="!compact"
|
||||
class="text-xs font-medium text-muted"
|
||||
>
|
||||
{{ t('tags.pickColor') }}
|
||||
</p>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<button
|
||||
v-for="color in presetColors"
|
||||
:key="color"
|
||||
type="button"
|
||||
class="size-7 shrink-0 rounded-full border-2 transition-all hover:scale-110"
|
||||
:class="normalizedValue === color
|
||||
? 'border-highlighted ring-2 ring-primary/25 scale-110'
|
||||
: 'border-transparent'"
|
||||
:style="{ backgroundColor: color }"
|
||||
:aria-label="color"
|
||||
:title="color"
|
||||
@click="selectColor(color)"
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="relative size-7 shrink-0 overflow-hidden rounded-full border-2 transition-all hover:scale-110"
|
||||
:class="isCustomSelected
|
||||
? 'border-highlighted ring-2 ring-primary/25 scale-110'
|
||||
: 'border-dashed border-default'"
|
||||
:style="isCustomSelected ? { backgroundColor: normalizedValue } : undefined"
|
||||
:aria-label="t('tags.customColor')"
|
||||
:title="t('tags.customColor')"
|
||||
@click="openNativePicker"
|
||||
>
|
||||
<span
|
||||
v-if="!isCustomSelected"
|
||||
class="flex size-full items-center justify-center bg-muted/40"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-pipette"
|
||||
class="size-3.5 text-muted"
|
||||
/>
|
||||
</span>
|
||||
<input
|
||||
ref="colorInput"
|
||||
type="color"
|
||||
class="pointer-events-none absolute inset-0 size-full opacity-0"
|
||||
:value="normalizedValue"
|
||||
@input="onNativeColorInput"
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,158 @@
|
||||
<script setup lang="ts">
|
||||
import type { ImageTag } from '~/types/image'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
modelValue: number[]
|
||||
tagMode: 'or' | 'and'
|
||||
untaggedOnly: boolean
|
||||
tags: ImageTag[]
|
||||
disabled?: boolean
|
||||
}>(), {
|
||||
disabled: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: number[]]
|
||||
'update:tagMode': [value: 'or' | 'and']
|
||||
'update:untaggedOnly': [value: boolean]
|
||||
'manage': []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const selectedTags = computed(() =>
|
||||
props.tags.filter(tag => props.modelValue.includes(tag.id))
|
||||
)
|
||||
|
||||
const buttonLabel = computed(() => {
|
||||
if (props.untaggedOnly) return t('tags.untagged')
|
||||
if (!selectedTags.value.length) return t('tags.filterAll')
|
||||
if (selectedTags.value.length === 1) return selectedTags.value[0]!.name
|
||||
return t('tags.filterSelected', { n: selectedTags.value.length })
|
||||
})
|
||||
|
||||
const tagItems = computed(() =>
|
||||
props.tags.map(tag => ({
|
||||
label: tag.name,
|
||||
value: tag.id
|
||||
}))
|
||||
)
|
||||
|
||||
const selectValue = computed({
|
||||
get: () => (props.untaggedOnly ? [] : props.modelValue),
|
||||
set: (value: number[]) => {
|
||||
emit('update:untaggedOnly', false)
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
})
|
||||
|
||||
function findTag(tagId: number) {
|
||||
return props.tags.find(tag => tag.id === tagId)
|
||||
}
|
||||
|
||||
function selectUntagged() {
|
||||
emit('update:modelValue', [])
|
||||
emit('update:untaggedOnly', true)
|
||||
}
|
||||
|
||||
function clearFilter() {
|
||||
emit('update:modelValue', [])
|
||||
emit('update:untaggedOnly', false)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<USelect
|
||||
v-model="selectValue"
|
||||
multiple
|
||||
:items="tagItems"
|
||||
class="w-28 shrink-0"
|
||||
size="sm"
|
||||
:disabled="disabled"
|
||||
value-key="value"
|
||||
:content="{ align: 'start', sideOffset: 4 }"
|
||||
:ui="{
|
||||
content: 'w-72 max-w-[calc(100vw-2rem)]',
|
||||
viewport: 'max-h-44 overflow-y-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden',
|
||||
item: 'text-xs',
|
||||
itemLabel: 'text-xs',
|
||||
itemTrailingIcon: 'size-3.5 text-primary',
|
||||
placeholder: 'truncate pointer-events-none text-highlighted',
|
||||
value: 'truncate pointer-events-none text-highlighted'
|
||||
}"
|
||||
>
|
||||
<template #default>
|
||||
{{ buttonLabel }}
|
||||
</template>
|
||||
|
||||
<template #content-top>
|
||||
<div class="space-y-1.5 border-b border-default p-2 text-xs">
|
||||
<div class="flex items-center justify-between gap-2 px-0.5">
|
||||
<span class="font-medium text-highlighted">{{ t('tags.filterTitle') }}</span>
|
||||
<button
|
||||
type="button"
|
||||
class="text-primary hover:underline"
|
||||
@click="emit('manage')"
|
||||
>
|
||||
{{ t('tags.manage') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="modelValue.length > 1"
|
||||
class="flex gap-1 rounded-md border border-default p-0.5"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="flex-1 rounded px-2 py-1 text-center transition-colors"
|
||||
:class="tagMode === 'or' ? 'bg-primary text-white' : 'text-muted hover:bg-elevated'"
|
||||
@click="emit('update:tagMode', 'or')"
|
||||
>
|
||||
{{ t('tags.modeOr') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="flex-1 rounded px-2 py-1 text-center transition-colors"
|
||||
:class="tagMode === 'and' ? 'bg-primary text-white' : 'text-muted hover:bg-elevated'"
|
||||
@click="emit('update:tagMode', 'and')"
|
||||
>
|
||||
{{ t('tags.modeAnd') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-0.5">
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center rounded-md px-2 py-1 text-left hover:bg-elevated"
|
||||
:class="!untaggedOnly && !modelValue.length ? 'bg-primary/10 text-primary' : ''"
|
||||
@click="clearFilter"
|
||||
>
|
||||
{{ t('tags.filterAll') }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center rounded-md px-2 py-1 text-left hover:bg-elevated"
|
||||
:class="untaggedOnly ? 'bg-primary/10 text-primary' : ''"
|
||||
@click="selectUntagged"
|
||||
>
|
||||
{{ t('tags.untagged') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #item-leading="{ item }">
|
||||
<span
|
||||
class="size-2 shrink-0 rounded-full"
|
||||
:style="{ backgroundColor: findTag(item.value)?.color }"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #item-trailing="{ item }">
|
||||
<span class="text-[11px] tabular-nums text-muted">
|
||||
{{ findTag(item.value)?.imageCount ?? 0 }}
|
||||
</span>
|
||||
</template>
|
||||
</USelect>
|
||||
</template>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
import type { ImageTag } from '~/types/image'
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean
|
||||
tags: ImageTag[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:open': [value: boolean]
|
||||
'changed': []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const { fetchTags } = useTags()
|
||||
|
||||
watch(() => props.open, (open) => {
|
||||
if (open) void fetchTags(true)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UModal
|
||||
:open="open"
|
||||
:title="t('tags.manageTitle')"
|
||||
:description="t('tags.manageSubtitle')"
|
||||
:ui="{ content: 'max-w-5xl' }"
|
||||
@update:open="emit('update:open', $event)"
|
||||
>
|
||||
<template #body>
|
||||
<TagManagePanel
|
||||
:tags="tags"
|
||||
@changed="emit('changed')"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex w-full justify-end">
|
||||
<UButton
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
@click="emit('update:open', false)"
|
||||
>
|
||||
{{ t('common.cancel') }}
|
||||
</UButton>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
</template>
|
||||
@@ -0,0 +1,843 @@
|
||||
<script setup lang="ts">
|
||||
import type { ImageTag } from '~/types/image'
|
||||
import {
|
||||
defaultTagColor,
|
||||
pickDefaultTagColorFromCandidates,
|
||||
pickTagColorCandidates,
|
||||
resolveTagHexColor,
|
||||
TAG_COLOR_EDIT_CANDIDATE_COUNT
|
||||
} from '~/utils/tag-colors'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
tags: ImageTag[]
|
||||
embedded?: boolean
|
||||
}>(), {
|
||||
embedded: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
changed: []
|
||||
close: []
|
||||
}>()
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
const toast = useToast()
|
||||
const { createTag, updateTag, deleteTag, mergeTags } = useTags()
|
||||
|
||||
const creating = ref(false)
|
||||
const newName = ref('')
|
||||
const newColorCandidates = ref<string[]>(pickTagColorCandidates([]))
|
||||
const newColor = ref(pickDefaultTagColorFromCandidates(newColorCandidates.value, []))
|
||||
const search = ref('')
|
||||
const statusFilter = ref<'all' | 'used' | 'unused'>('all')
|
||||
const selectedIds = ref<Set<number>>(new Set())
|
||||
const renamingId = ref<number | null>(null)
|
||||
const renameValue = ref('')
|
||||
const colorPickerId = ref<number | null>(null)
|
||||
const colorValue = ref('#22c55e')
|
||||
const editColorCandidates = ref<string[]>([])
|
||||
const mergeOpen = ref(false)
|
||||
const mergeConfirmOpen = ref(false)
|
||||
const mergeMode = ref<'batch' | 'single'>('batch')
|
||||
const mergeSourceIds = ref<number[]>([])
|
||||
const mergeTargetId = ref<number | null>(null)
|
||||
const deleteOpen = ref(false)
|
||||
const deleteTarget = ref<ImageTag | null>(null)
|
||||
const saving = ref(false)
|
||||
const page = ref(1)
|
||||
const pageSize = ref(10)
|
||||
|
||||
const stats = computed(() => {
|
||||
const now = Date.now()
|
||||
const sevenDaysAgo = now - 7 * 24 * 60 * 60 * 1000
|
||||
let used = 0
|
||||
let unused = 0
|
||||
let newIn7Days = 0
|
||||
for (const tag of props.tags) {
|
||||
const count = tag.imageCount ?? 0
|
||||
if (count > 0) used++
|
||||
else unused++
|
||||
if (tag.createdAt && new Date(tag.createdAt).getTime() >= sevenDaysAgo) {
|
||||
newIn7Days++
|
||||
}
|
||||
}
|
||||
return {
|
||||
total: props.tags.length,
|
||||
used,
|
||||
unused,
|
||||
newIn7Days
|
||||
}
|
||||
})
|
||||
|
||||
const filteredTags = computed(() => {
|
||||
const q = search.value.trim().toLowerCase()
|
||||
return props.tags.filter((tag) => {
|
||||
if (statusFilter.value === 'used' && (tag.imageCount ?? 0) === 0) return false
|
||||
if (statusFilter.value === 'unused' && (tag.imageCount ?? 0) > 0) return false
|
||||
if (q && !tag.name.toLowerCase().includes(q)) return false
|
||||
return true
|
||||
}).sort((a, b) => (b.imageCount ?? 0) - (a.imageCount ?? 0) || a.name.localeCompare(b.name))
|
||||
})
|
||||
|
||||
const totalPages = computed(() => Math.max(1, Math.ceil(filteredTags.value.length / pageSize.value)))
|
||||
|
||||
const paginatedTags = computed(() => {
|
||||
const start = (page.value - 1) * pageSize.value
|
||||
return filteredTags.value.slice(start, start + pageSize.value)
|
||||
})
|
||||
|
||||
watch([search, statusFilter, pageSize], () => {
|
||||
page.value = 1
|
||||
})
|
||||
|
||||
watch(filteredTags, (list) => {
|
||||
if (page.value > Math.max(1, Math.ceil(list.length / pageSize.value))) {
|
||||
page.value = 1
|
||||
}
|
||||
})
|
||||
|
||||
const selectedList = computed(() =>
|
||||
[...selectedIds.value]
|
||||
.map(id => props.tags.find(tag => tag.id === id))
|
||||
.filter(Boolean) as ImageTag[]
|
||||
)
|
||||
|
||||
const selectedCount = computed(() => selectedIds.value.size)
|
||||
|
||||
const allPageSelected = computed(() =>
|
||||
paginatedTags.value.length > 0
|
||||
&& paginatedTags.value.every(tag => selectedIds.value.has(tag.id))
|
||||
)
|
||||
|
||||
const mergeSourceTags = computed(() =>
|
||||
mergeSourceIds.value
|
||||
.map(id => props.tags.find(tag => tag.id === id))
|
||||
.filter(Boolean) as ImageTag[]
|
||||
)
|
||||
|
||||
const mergeTargetCandidates = computed(() => {
|
||||
const sourceSet = new Set(mergeSourceIds.value)
|
||||
return props.tags
|
||||
.filter(tag => !sourceSet.has(tag.id))
|
||||
.sort((a, b) => (b.imageCount ?? 0) - (a.imageCount ?? 0) || a.name.localeCompare(b.name))
|
||||
})
|
||||
|
||||
const mergeTagsToDelete = computed(() => {
|
||||
if (!mergeTargetId.value) return []
|
||||
return mergeSourceTags.value.filter(tag => tag.id !== mergeTargetId.value)
|
||||
})
|
||||
|
||||
const mergeKeepTag = computed(() =>
|
||||
props.tags.find(tag => tag.id === mergeTargetId.value) ?? null
|
||||
)
|
||||
|
||||
const statusItems = computed(() => [
|
||||
{ label: t('tags.filterStatusAll'), value: 'all' },
|
||||
{ label: t('tags.filterStatusUsed'), value: 'used' },
|
||||
{ label: t('tags.filterStatusUnused'), value: 'unused' }
|
||||
])
|
||||
|
||||
const statValueClass = computed(() =>
|
||||
'mt-2 text-2xl font-semibold tabular-nums text-highlighted'
|
||||
)
|
||||
|
||||
const tableTextClass = computed(() => 'text-sm')
|
||||
|
||||
function formatLastUsed(tag: ImageTag) {
|
||||
if (!tag.lastUsedAt || (tag.imageCount ?? 0) === 0) {
|
||||
return t('tags.neverUsed')
|
||||
}
|
||||
const date = new Date(tag.lastUsedAt)
|
||||
if (Number.isNaN(date.getTime())) {
|
||||
return t('tags.neverUsed')
|
||||
}
|
||||
return date.toLocaleString(locale.value, {
|
||||
year: 'numeric',
|
||||
month: 'numeric',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false
|
||||
})
|
||||
}
|
||||
|
||||
function toggleSelect(id: number) {
|
||||
const next = new Set(selectedIds.value)
|
||||
if (next.has(id)) next.delete(id)
|
||||
else next.add(id)
|
||||
selectedIds.value = next
|
||||
}
|
||||
|
||||
function toggleSelectAll() {
|
||||
const next = new Set(selectedIds.value)
|
||||
if (allPageSelected.value) {
|
||||
for (const tag of paginatedTags.value) next.delete(tag.id)
|
||||
} else {
|
||||
for (const tag of paginatedTags.value) next.add(tag.id)
|
||||
}
|
||||
selectedIds.value = next
|
||||
}
|
||||
|
||||
function clearSelection() {
|
||||
selectedIds.value = new Set()
|
||||
}
|
||||
|
||||
function usedColorsExcept(tagId?: number) {
|
||||
return props.tags
|
||||
.filter(tag => tagId === undefined || tag.id !== tagId)
|
||||
.map(tag => tag.color)
|
||||
}
|
||||
|
||||
function refreshNewTagColor() {
|
||||
const used = usedColorsExcept()
|
||||
newColorCandidates.value = pickTagColorCandidates(used)
|
||||
newColor.value = pickDefaultTagColorFromCandidates(newColorCandidates.value, used)
|
||||
}
|
||||
|
||||
function toggleCreating() {
|
||||
if (creating.value) {
|
||||
creating.value = false
|
||||
return
|
||||
}
|
||||
newName.value = ''
|
||||
refreshNewTagColor()
|
||||
creating.value = true
|
||||
}
|
||||
|
||||
async function handleCreate() {
|
||||
const name = newName.value.trim()
|
||||
if (!name || saving.value) return
|
||||
saving.value = true
|
||||
try {
|
||||
await createTag(name, newColor.value)
|
||||
newName.value = ''
|
||||
creating.value = false
|
||||
refreshNewTagColor()
|
||||
emit('changed')
|
||||
toast.add({ title: t('tags.created', { name }), color: 'success' })
|
||||
} catch {
|
||||
toast.add({ title: t('tags.createFailed'), color: 'error' })
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function startRename(tag: ImageTag) {
|
||||
if (renamingId.value !== null && renamingId.value !== tag.id) {
|
||||
cancelRename()
|
||||
}
|
||||
renamingId.value = tag.id
|
||||
renameValue.value = tag.name
|
||||
}
|
||||
|
||||
function cancelRename() {
|
||||
renamingId.value = null
|
||||
renameValue.value = ''
|
||||
}
|
||||
|
||||
function onRenameBlur(tagId: number) {
|
||||
window.setTimeout(() => {
|
||||
if (renamingId.value === tagId) {
|
||||
void finishRename(tagId)
|
||||
}
|
||||
}, 0)
|
||||
}
|
||||
|
||||
async function finishRename(tagId: number) {
|
||||
if (renamingId.value !== tagId) return
|
||||
|
||||
const name = renameValue.value.trim()
|
||||
const tag = props.tags.find(item => item.id === tagId)
|
||||
renamingId.value = null
|
||||
renameValue.value = ''
|
||||
|
||||
if (!name || !tag || tag.name === name) return
|
||||
|
||||
saving.value = true
|
||||
try {
|
||||
await updateTag(tagId, { name })
|
||||
emit('changed')
|
||||
toast.add({ title: t('tags.renamed'), color: 'success' })
|
||||
} catch {
|
||||
toast.add({ title: t('tags.renameFailed'), color: 'error' })
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function openColorPicker(tag: ImageTag) {
|
||||
colorPickerId.value = tag.id
|
||||
colorValue.value = resolveTagHexColor(tag.color, defaultTagColor(tag.id))
|
||||
editColorCandidates.value = pickTagColorCandidates(
|
||||
usedColorsExcept(tag.id),
|
||||
TAG_COLOR_EDIT_CANDIDATE_COUNT
|
||||
)
|
||||
}
|
||||
|
||||
async function saveColor(tagId: number) {
|
||||
saving.value = true
|
||||
try {
|
||||
await updateTag(tagId, { color: colorValue.value })
|
||||
colorPickerId.value = null
|
||||
emit('changed')
|
||||
} catch {
|
||||
toast.add({ title: t('tags.colorFailed'), color: 'error' })
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function openDeleteConfirm(tag: ImageTag) {
|
||||
deleteTarget.value = tag
|
||||
deleteOpen.value = true
|
||||
}
|
||||
|
||||
async function confirmDelete() {
|
||||
const tag = deleteTarget.value
|
||||
if (!tag || saving.value) return
|
||||
saving.value = true
|
||||
try {
|
||||
await deleteTag(tag.id)
|
||||
deleteOpen.value = false
|
||||
deleteTarget.value = null
|
||||
selectedIds.value.delete(tag.id)
|
||||
selectedIds.value = new Set(selectedIds.value)
|
||||
emit('changed')
|
||||
toast.add({ title: t('tags.deleted', { name: tag.name }), color: 'success' })
|
||||
} catch {
|
||||
toast.add({ title: t('tags.deleteFailed'), color: 'error' })
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function openBatchMerge() {
|
||||
if (selectedIds.value.size < 2) {
|
||||
toast.add({ title: t('tags.mergeSelectAtLeast'), color: 'warning' })
|
||||
return
|
||||
}
|
||||
mergeMode.value = 'batch'
|
||||
mergeSourceIds.value = [...selectedIds.value]
|
||||
const sorted = selectedList.value.sort((a, b) => (b.imageCount ?? 0) - (a.imageCount ?? 0))
|
||||
mergeTargetId.value = sorted[0]?.id ?? null
|
||||
mergeOpen.value = true
|
||||
}
|
||||
|
||||
function openSingleMerge(tag: ImageTag) {
|
||||
mergeMode.value = 'single'
|
||||
mergeSourceIds.value = [tag.id]
|
||||
const fallback = props.tags
|
||||
.filter(item => item.id !== tag.id)
|
||||
.sort((a, b) => (b.imageCount ?? 0) - (a.imageCount ?? 0))[0]
|
||||
mergeTargetId.value = fallback?.id ?? null
|
||||
mergeOpen.value = true
|
||||
}
|
||||
|
||||
function requestMergeConfirm() {
|
||||
if (!mergeTargetId.value) return
|
||||
const sourceIds = mergeSourceIds.value.filter(id => id !== mergeTargetId.value)
|
||||
if (!sourceIds.length) return
|
||||
mergeConfirmOpen.value = true
|
||||
}
|
||||
|
||||
async function confirmMerge() {
|
||||
if (!mergeTargetId.value || saving.value) return
|
||||
const sourceIds = mergeSourceIds.value.filter(id => id !== mergeTargetId.value)
|
||||
if (!sourceIds.length) return
|
||||
saving.value = true
|
||||
try {
|
||||
await mergeTags(sourceIds, mergeTargetId.value)
|
||||
selectedIds.value = new Set()
|
||||
mergeConfirmOpen.value = false
|
||||
mergeOpen.value = false
|
||||
emit('changed')
|
||||
toast.add({ title: t('tags.merged'), color: 'success' })
|
||||
} catch {
|
||||
toast.add({ title: t('tags.mergeFailed'), color: 'error' })
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-5">
|
||||
<div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
|
||||
<div class="rounded-xl border border-default bg-elevated p-4">
|
||||
<div class="flex items-center gap-2 text-xs text-muted">
|
||||
<span class="flex size-7 items-center justify-center rounded-lg bg-primary/10 text-primary">
|
||||
<UIcon
|
||||
name="i-lucide-tags"
|
||||
class="size-4"
|
||||
/>
|
||||
</span>
|
||||
{{ t('tags.statTotal') }}
|
||||
</div>
|
||||
<p :class="statValueClass">
|
||||
{{ stats.total }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-xl border border-default bg-elevated p-4">
|
||||
<div class="flex items-center gap-2 text-xs text-muted">
|
||||
<span class="flex size-7 items-center justify-center rounded-lg bg-blue-500/10 text-blue-600 dark:text-blue-400">
|
||||
<UIcon
|
||||
name="i-lucide-image"
|
||||
class="size-4"
|
||||
/>
|
||||
</span>
|
||||
{{ t('tags.statUsed') }}
|
||||
</div>
|
||||
<p :class="statValueClass">
|
||||
{{ stats.used }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-xl border border-default bg-elevated p-4">
|
||||
<div class="flex items-center gap-2 text-xs text-muted">
|
||||
<span class="flex size-7 items-center justify-center rounded-lg bg-orange-500/10 text-orange-600 dark:text-orange-400">
|
||||
<UIcon
|
||||
name="i-lucide-tag"
|
||||
class="size-4"
|
||||
/>
|
||||
</span>
|
||||
{{ t('tags.statUnused') }}
|
||||
</div>
|
||||
<p :class="statValueClass">
|
||||
{{ stats.unused }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-xl border border-default bg-elevated p-4">
|
||||
<div class="flex items-center gap-2 text-xs text-muted">
|
||||
<span class="flex size-7 items-center justify-center rounded-lg bg-violet-500/10 text-violet-600 dark:text-violet-400">
|
||||
<UIcon
|
||||
name="i-lucide-trending-up"
|
||||
class="size-4"
|
||||
/>
|
||||
</span>
|
||||
{{ t('tags.statNew7d') }}
|
||||
</div>
|
||||
<p :class="statValueClass">
|
||||
{{ stats.newIn7Days }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<UInput
|
||||
v-model="search"
|
||||
size="sm"
|
||||
icon="i-lucide-search"
|
||||
:placeholder="t('tags.searchName')"
|
||||
class="min-w-44 flex-1 sm:max-w-xs"
|
||||
/>
|
||||
<USelect
|
||||
v-model="statusFilter"
|
||||
size="sm"
|
||||
:items="statusItems"
|
||||
class="w-32"
|
||||
/>
|
||||
<div class="ml-auto flex flex-wrap gap-2">
|
||||
<UButton
|
||||
type="button"
|
||||
size="sm"
|
||||
color="primary"
|
||||
icon="i-lucide-plus"
|
||||
@click="toggleCreating"
|
||||
>
|
||||
{{ t('tags.addTag') }}
|
||||
</UButton>
|
||||
<UButton
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
icon="i-lucide-merge"
|
||||
:disabled="selectedCount < 2"
|
||||
@click="openBatchMerge"
|
||||
>
|
||||
{{ t('tags.mergeTags') }}
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="selectedCount > 0"
|
||||
class="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary/25 bg-primary/5 px-3 py-2"
|
||||
>
|
||||
<span class="text-xs font-medium text-highlighted">
|
||||
{{ t('tags.mergeSelected', { n: selectedCount }) }}
|
||||
</span>
|
||||
<UButton
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
@click="clearSelection"
|
||||
>
|
||||
{{ t('tags.mergeClear') }}
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="creating"
|
||||
class="space-y-4 rounded-xl border border-default bg-elevated/50 p-4"
|
||||
>
|
||||
<div class="flex flex-wrap items-start gap-3">
|
||||
<div class="min-w-0 flex-1 space-y-3">
|
||||
<UInput
|
||||
v-model="newName"
|
||||
size="md"
|
||||
:placeholder="t('tags.namePlaceholder')"
|
||||
@keydown.enter.prevent="handleCreate"
|
||||
/>
|
||||
<TagColorPicker
|
||||
v-model="newColor"
|
||||
:candidates="newColorCandidates"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="newName.trim()"
|
||||
class="shrink-0 pt-1"
|
||||
>
|
||||
<p class="mb-1.5 text-xs text-muted">
|
||||
{{ t('tags.preview') }}
|
||||
</p>
|
||||
<TagBadge
|
||||
:tag="{ id: 0, name: newName.trim(), color: newColor }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end gap-2 border-t border-default pt-3">
|
||||
<UButton
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
@click="() => { creating = false }"
|
||||
>
|
||||
{{ t('common.cancel') }}
|
||||
</UButton>
|
||||
<UButton
|
||||
size="sm"
|
||||
color="primary"
|
||||
:loading="saving"
|
||||
:disabled="!newName.trim()"
|
||||
@click="handleCreate"
|
||||
>
|
||||
{{ t('common.save') }}
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-hidden rounded-xl border border-default">
|
||||
<div class="overflow-x-auto">
|
||||
<table
|
||||
class="min-w-full"
|
||||
:class="tableTextClass"
|
||||
>
|
||||
<thead class="border-b border-default bg-elevated/60 text-xs text-muted">
|
||||
<tr>
|
||||
<th class="w-10 px-3 py-3">
|
||||
<UCheckbox
|
||||
:model-value="allPageSelected"
|
||||
:disabled="!paginatedTags.length"
|
||||
@update:model-value="toggleSelectAll"
|
||||
/>
|
||||
</th>
|
||||
<th class="px-3 py-3 text-left font-medium">
|
||||
{{ t('tags.colName') }}
|
||||
</th>
|
||||
<th class="px-3 py-3 text-left font-medium">
|
||||
{{ t('tags.colImageCount') }}
|
||||
</th>
|
||||
<th class="px-3 py-3 text-left font-medium">
|
||||
{{ t('tags.colLastUsed') }}
|
||||
</th>
|
||||
<th class="px-3 py-3 text-right font-medium">
|
||||
{{ t('tags.colActions') }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="tag in paginatedTags"
|
||||
:key="tag.id"
|
||||
class="border-b border-default last:border-b-0"
|
||||
:class="selectedIds.has(tag.id) ? 'bg-primary/5' : 'hover:bg-elevated/40'"
|
||||
>
|
||||
<td class="px-3 py-3 align-middle">
|
||||
<UCheckbox
|
||||
:model-value="selectedIds.has(tag.id)"
|
||||
@update:model-value="toggleSelect(tag.id)"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-3 py-3 align-middle">
|
||||
<UInput
|
||||
v-if="renamingId === tag.id"
|
||||
v-model="renameValue"
|
||||
size="sm"
|
||||
class="max-w-xs"
|
||||
autofocus
|
||||
@keydown.enter.prevent="finishRename(tag.id)"
|
||||
@keydown.esc.prevent="cancelRename"
|
||||
@blur="onRenameBlur(tag.id)"
|
||||
/>
|
||||
<TagBadge
|
||||
v-else
|
||||
:tag="tag"
|
||||
size="sm"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-3 py-3 align-middle tabular-nums text-muted">
|
||||
{{ tag.imageCount ?? 0 }}
|
||||
</td>
|
||||
<td class="px-3 py-3 align-middle text-muted">
|
||||
{{ formatLastUsed(tag) }}
|
||||
</td>
|
||||
<td class="px-3 py-3 align-middle">
|
||||
<div class="flex items-center justify-end gap-0.5">
|
||||
<UButton
|
||||
type="button"
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
color="primary"
|
||||
icon="i-lucide-pencil"
|
||||
:aria-label="t('common.edit')"
|
||||
@click="startRename(tag)"
|
||||
/>
|
||||
<UPopover
|
||||
:open="colorPickerId === tag.id"
|
||||
:content="{ side: 'bottom', align: 'end' }"
|
||||
@update:open="(open) => { colorPickerId = open ? tag.id : null }"
|
||||
>
|
||||
<UButton
|
||||
type="button"
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
color="primary"
|
||||
icon="i-lucide-palette"
|
||||
:aria-label="t('tags.pickColor')"
|
||||
@click="() => openColorPicker(tag)"
|
||||
/>
|
||||
<template #content>
|
||||
<div
|
||||
class="flex items-center gap-2 p-2"
|
||||
@click.stop
|
||||
>
|
||||
<TagColorPicker
|
||||
v-model="colorValue"
|
||||
:candidates="editColorCandidates"
|
||||
compact
|
||||
/>
|
||||
<UButton
|
||||
icon="i-lucide-check"
|
||||
size="sm"
|
||||
color="primary"
|
||||
class="shrink-0"
|
||||
:aria-label="t('common.save')"
|
||||
:loading="saving"
|
||||
@click="saveColor(tag.id)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</UPopover>
|
||||
<UButton
|
||||
type="button"
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
color="primary"
|
||||
icon="i-lucide-merge"
|
||||
:aria-label="t('tags.mergeIntoAction')"
|
||||
:disabled="tags.length < 2"
|
||||
@click="openSingleMerge(tag)"
|
||||
/>
|
||||
<UButton
|
||||
type="button"
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
color="error"
|
||||
icon="i-lucide-trash-2"
|
||||
:aria-label="t('common.delete')"
|
||||
@click="openDeleteConfirm(tag)"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="!paginatedTags.length">
|
||||
<td
|
||||
colspan="5"
|
||||
class="px-3 py-12 text-center text-sm text-muted"
|
||||
>
|
||||
{{ tags.length ? t('tags.noMatch') : t('tags.emptyHint') }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PaginationBar
|
||||
v-if="filteredTags.length > 0"
|
||||
:page="page"
|
||||
:total-pages="totalPages"
|
||||
:total="filteredTags.length"
|
||||
:page-size="pageSize"
|
||||
:page-size-options="[10, 20, 30, 50]"
|
||||
@update:page="(value) => { page = value }"
|
||||
@update:page-size="(value) => { pageSize = value }"
|
||||
/>
|
||||
|
||||
<UModal
|
||||
v-model:open="mergeOpen"
|
||||
:title="mergeMode === 'single' ? t('tags.mergeIntoTitle') : t('tags.mergeTitle')"
|
||||
:description="mergeMode === 'single'
|
||||
? t('tags.mergeIntoSubtitle', { name: mergeSourceTags[0]?.name ?? '' })
|
||||
: t('tags.mergeSubtitle')"
|
||||
>
|
||||
<template #body>
|
||||
<template v-if="mergeMode === 'batch'">
|
||||
<p class="mb-2 text-sm text-muted">
|
||||
{{ t('tags.mergeChooseTarget') }}
|
||||
</p>
|
||||
<div class="merge-tag-list max-h-[16.5rem] space-y-2 overflow-y-auto">
|
||||
<label
|
||||
v-for="tag in mergeSourceTags"
|
||||
:key="tag.id"
|
||||
class="flex cursor-pointer items-center gap-3 rounded-lg border border-default px-3 py-2.5 transition-colors"
|
||||
:class="mergeTargetId === tag.id ? 'border-primary/40 bg-primary/5' : 'hover:bg-elevated'"
|
||||
>
|
||||
<input
|
||||
v-model="mergeTargetId"
|
||||
type="radio"
|
||||
:value="tag.id"
|
||||
class="accent-primary"
|
||||
>
|
||||
<TagBadge :tag="tag" />
|
||||
<span class="ml-auto text-sm text-muted">
|
||||
{{ t('common.countImages', { count: tag.imageCount ?? 0 }) }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<p class="mb-2 text-sm text-muted">
|
||||
{{ t('tags.mergeIntoChoose') }}
|
||||
</p>
|
||||
<div class="merge-tag-list max-h-[16.5rem] space-y-2 overflow-y-auto">
|
||||
<label
|
||||
v-for="tag in mergeTargetCandidates"
|
||||
:key="tag.id"
|
||||
class="flex cursor-pointer items-center gap-3 rounded-lg border border-default px-3 py-2.5 transition-colors"
|
||||
:class="mergeTargetId === tag.id ? 'border-primary/40 bg-primary/5' : 'hover:bg-elevated'"
|
||||
>
|
||||
<input
|
||||
v-model="mergeTargetId"
|
||||
type="radio"
|
||||
:value="tag.id"
|
||||
class="accent-primary"
|
||||
>
|
||||
<TagBadge :tag="tag" />
|
||||
<span class="ml-auto text-sm text-muted">
|
||||
{{ t('common.countImages', { count: tag.imageCount ?? 0 }) }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex w-full justify-end gap-2">
|
||||
<UButton
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
@click="() => { mergeOpen = false }"
|
||||
>
|
||||
{{ t('common.cancel') }}
|
||||
</UButton>
|
||||
<UButton
|
||||
color="primary"
|
||||
icon="i-lucide-merge"
|
||||
:disabled="!mergeTargetId"
|
||||
@click="requestMergeConfirm"
|
||||
>
|
||||
{{ t('tags.mergeConfirm') }}
|
||||
</UButton>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
|
||||
<UModal
|
||||
v-model:open="mergeConfirmOpen"
|
||||
:title="t('tags.mergeIrreversibleTitle')"
|
||||
:description="t('tags.mergeIrreversible')"
|
||||
>
|
||||
<template #body>
|
||||
<div class="space-y-3 text-sm">
|
||||
<p v-if="mergeKeepTag">
|
||||
{{ t('tags.mergeConfirmKeep', { name: mergeKeepTag.name }) }}
|
||||
</p>
|
||||
<p v-if="mergeTagsToDelete.length">
|
||||
{{ t('tags.mergeWillDelete', {
|
||||
names: mergeTagsToDelete.map(tag => tag.name).join('、')
|
||||
}) }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex w-full justify-end gap-2">
|
||||
<UButton
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
@click="() => { mergeConfirmOpen = false }"
|
||||
>
|
||||
{{ t('common.cancel') }}
|
||||
</UButton>
|
||||
<UButton
|
||||
color="primary"
|
||||
icon="i-lucide-merge"
|
||||
:loading="saving"
|
||||
@click="confirmMerge"
|
||||
>
|
||||
{{ t('tags.mergeConfirm') }}
|
||||
</UButton>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
|
||||
<UModal
|
||||
v-model:open="deleteOpen"
|
||||
:title="t('tags.deleteConfirmTitle')"
|
||||
:description="deleteTarget ? t('tags.deleteConfirmDesc', { name: deleteTarget.name }) : ''"
|
||||
>
|
||||
<template #footer>
|
||||
<div class="flex w-full justify-end gap-2">
|
||||
<UButton
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
@click="() => { deleteOpen = false }"
|
||||
>
|
||||
{{ t('common.cancel') }}
|
||||
</UButton>
|
||||
<UButton
|
||||
color="error"
|
||||
icon="i-lucide-trash-2"
|
||||
:loading="saving"
|
||||
@click="confirmDelete"
|
||||
>
|
||||
{{ t('common.delete') }}
|
||||
</UButton>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.merge-tag-list {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.merge-tag-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,233 @@
|
||||
<script setup lang="ts">
|
||||
import type { ImageTag } from '~/types/image'
|
||||
import { pickRandomUnusedTagColor } from '~/utils/tag-colors'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
modelValue: number[]
|
||||
tags: ImageTag[]
|
||||
disabled?: boolean
|
||||
placeholder?: string
|
||||
allowCreate?: boolean
|
||||
/** 在 Modal 内使用内联列表，避免 Popover 被遮罩挡住 */
|
||||
inline?: boolean
|
||||
/** 内联列表使用复选框样式 */
|
||||
checkbox?: boolean
|
||||
/** 隐藏已选标签徽章（弹窗内用复选框列表即可） */
|
||||
hideSelectedChips?: boolean
|
||||
}>(), {
|
||||
disabled: false,
|
||||
allowCreate: true,
|
||||
inline: false,
|
||||
checkbox: false,
|
||||
hideSelectedChips: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: number[]]
|
||||
'created': [tag: ImageTag]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const toast = useToast()
|
||||
const { createTag } = useTags()
|
||||
|
||||
const open = ref(false)
|
||||
const query = ref('')
|
||||
const creating = ref(false)
|
||||
|
||||
const selectedTags = computed(() =>
|
||||
props.tags.filter(tag => props.modelValue.includes(tag.id))
|
||||
)
|
||||
|
||||
const filteredTags = computed(() => {
|
||||
const q = query.value.trim().toLowerCase()
|
||||
if (!q) return props.tags
|
||||
return props.tags.filter(tag => tag.name.toLowerCase().includes(q))
|
||||
})
|
||||
|
||||
const showCreateOption = computed(() => {
|
||||
if (!props.allowCreate) return false
|
||||
const q = query.value.trim()
|
||||
if (!q) return false
|
||||
return !props.tags.some(tag => tag.name === q)
|
||||
})
|
||||
|
||||
function toggleTag(tagId: number) {
|
||||
const next = new Set(props.modelValue)
|
||||
if (next.has(tagId)) {
|
||||
next.delete(tagId)
|
||||
} else {
|
||||
next.add(tagId)
|
||||
}
|
||||
emit('update:modelValue', [...next])
|
||||
}
|
||||
|
||||
function removeTag(tagId: number) {
|
||||
emit('update:modelValue', props.modelValue.filter(id => id !== tagId))
|
||||
}
|
||||
|
||||
async function createFromQuery() {
|
||||
const name = query.value.trim()
|
||||
if (!name || creating.value) return
|
||||
|
||||
creating.value = true
|
||||
try {
|
||||
const color = pickRandomUnusedTagColor(props.tags.map(tag => tag.color))
|
||||
const tag = await createTag(name, color)
|
||||
emit('created', tag)
|
||||
emit('update:modelValue', [...new Set([...props.modelValue, tag.id])])
|
||||
query.value = ''
|
||||
toast.add({ title: t('tags.created', { name: tag.name }), color: 'success' })
|
||||
} catch (error: unknown) {
|
||||
const message = error instanceof Error ? error.message : t('tags.createFailed')
|
||||
toast.add({ title: message, color: 'error' })
|
||||
} finally {
|
||||
creating.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-2">
|
||||
<div
|
||||
v-if="selectedTags.length && !hideSelectedChips"
|
||||
class="flex flex-wrap gap-1.5"
|
||||
>
|
||||
<TagBadge
|
||||
v-for="tag in selectedTags"
|
||||
:key="tag.id"
|
||||
:tag="tag"
|
||||
removable
|
||||
@remove="removeTag(tag.id)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="inline"
|
||||
class="space-y-2 rounded-lg border border-default p-2"
|
||||
>
|
||||
<UInput
|
||||
v-model="query"
|
||||
size="sm"
|
||||
icon="i-lucide-search"
|
||||
:placeholder="checkbox ? t('tags.search') : t('tags.searchOrCreate')"
|
||||
:disabled="disabled"
|
||||
@keydown.enter.prevent="showCreateOption ? createFromQuery() : undefined"
|
||||
/>
|
||||
|
||||
<div class="max-h-48 space-y-1 overflow-y-auto">
|
||||
<button
|
||||
v-for="tag in filteredTags"
|
||||
:key="tag.id"
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-elevated"
|
||||
:class="modelValue.includes(tag.id) ? 'bg-primary/10' : ''"
|
||||
@click="toggleTag(tag.id)"
|
||||
>
|
||||
<UCheckbox
|
||||
v-if="checkbox"
|
||||
:model-value="modelValue.includes(tag.id)"
|
||||
class="pointer-events-none"
|
||||
@click.stop
|
||||
/>
|
||||
<span
|
||||
class="size-2 shrink-0 rounded-full"
|
||||
:style="{ backgroundColor: tag.color }"
|
||||
/>
|
||||
<span class="min-w-0 flex-1 truncate">{{ tag.name }}</span>
|
||||
<UIcon
|
||||
v-if="!checkbox && modelValue.includes(tag.id)"
|
||||
name="i-lucide-check"
|
||||
class="size-4 text-primary"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<p
|
||||
v-if="!filteredTags.length && !showCreateOption"
|
||||
class="px-2 py-3 text-center text-xs text-muted"
|
||||
>
|
||||
{{ tags.length ? t('tags.noMatch') : t('tags.emptyHint') }}
|
||||
</p>
|
||||
|
||||
<button
|
||||
v-if="showCreateOption"
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-primary hover:bg-elevated"
|
||||
:disabled="creating"
|
||||
@click="createFromQuery"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-plus"
|
||||
class="size-4"
|
||||
/>
|
||||
{{ t('tags.createNamed', { name: query.trim() }) }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UPopover
|
||||
v-else
|
||||
v-model:open="open"
|
||||
>
|
||||
<UButton
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
icon="i-lucide-plus"
|
||||
:disabled="disabled"
|
||||
>
|
||||
{{ placeholder ?? t('tags.addTag') }}
|
||||
</UButton>
|
||||
|
||||
<template #content>
|
||||
<div class="w-64 space-y-2 p-2">
|
||||
<UInput
|
||||
v-model="query"
|
||||
size="sm"
|
||||
icon="i-lucide-search"
|
||||
:placeholder="checkbox ? t('tags.search') : t('tags.searchOrCreate')"
|
||||
:disabled="disabled"
|
||||
@keydown.enter.prevent="showCreateOption ? createFromQuery() : undefined"
|
||||
/>
|
||||
|
||||
<div class="max-h-48 space-y-1 overflow-y-auto">
|
||||
<button
|
||||
v-for="tag in filteredTags"
|
||||
:key="tag.id"
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-elevated"
|
||||
:class="modelValue.includes(tag.id) ? 'bg-primary/10' : ''"
|
||||
@click="toggleTag(tag.id)"
|
||||
>
|
||||
<span
|
||||
class="size-2 shrink-0 rounded-full"
|
||||
:style="{ backgroundColor: tag.color }"
|
||||
/>
|
||||
<span class="min-w-0 flex-1 truncate">{{ tag.name }}</span>
|
||||
<UIcon
|
||||
v-if="modelValue.includes(tag.id)"
|
||||
name="i-lucide-check"
|
||||
class="size-4 text-primary"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="showCreateOption"
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-primary hover:bg-elevated"
|
||||
:disabled="creating"
|
||||
@click="createFromQuery"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-plus"
|
||||
class="size-4"
|
||||
/>
|
||||
{{ t('tags.createNamed', { name: query.trim() }) }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UPopover>
|
||||
</div>
|
||||
</template>
|
||||
@@ -23,7 +23,8 @@ const {
|
||||
const copyFormatItems = computed(() => [
|
||||
{ label: t('copy.url'), value: 'url' as const },
|
||||
{ label: t('copy.markdown'), value: 'markdown' as const },
|
||||
{ label: t('copy.html'), value: 'html' as const }
|
||||
{ label: t('copy.html'), value: 'html' as const },
|
||||
{ label: t('copy.bbcode'), value: 'bbcode' as const }
|
||||
])
|
||||
|
||||
const clientQualityLevel = computed(() => {
|
||||
@@ -32,7 +33,7 @@ const clientQualityLevel = computed(() => {
|
||||
return t('preferences.qualityLow')
|
||||
})
|
||||
|
||||
function setCopyFormat(value: 'url' | 'markdown' | 'html') {
|
||||
function setCopyFormat(value: 'url' | 'markdown' | 'html' | 'bbcode') {
|
||||
copyFormat.value = value
|
||||
}
|
||||
|
||||
|
||||
@@ -5,24 +5,39 @@ const props = withDefaults(defineProps<{
|
||||
storageBackendItems: Array<{ label: string, value: string }>
|
||||
uploadSource: string
|
||||
uploadSourceItems: Array<{ label: string, value: string }>
|
||||
tagIds?: number[]
|
||||
tagMode?: 'or' | 'and'
|
||||
untaggedOnly?: boolean
|
||||
tags?: Array<{ id: number, name: string, color: string, imageCount?: number }>
|
||||
viewMode: 'grid' | 'list'
|
||||
selectedCount?: number
|
||||
loading?: boolean
|
||||
showBatchDelete?: boolean
|
||||
showBatchTags?: boolean
|
||||
}>(), {
|
||||
selectedCount: 0,
|
||||
loading: false,
|
||||
showBatchDelete: true
|
||||
showBatchDelete: true,
|
||||
showBatchTags: false,
|
||||
tagIds: () => [],
|
||||
tags: () => [],
|
||||
tagMode: 'or',
|
||||
untaggedOnly: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:searchQuery': [value: string]
|
||||
'update:storageBackend': [value: string]
|
||||
'update:uploadSource': [value: string]
|
||||
'update:tagIds': [value: number[]]
|
||||
'update:tagMode': [value: 'or' | 'and']
|
||||
'update:untaggedOnly': [value: boolean]
|
||||
'update:viewMode': [mode: 'grid' | 'list']
|
||||
'search': []
|
||||
'reset': []
|
||||
'batch-delete': []
|
||||
'batch-tags': []
|
||||
'manage-tags': []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
@@ -74,6 +89,18 @@ function viewButtonClass(active: boolean) {
|
||||
@update:model-value="emit('update:uploadSource', $event)"
|
||||
/>
|
||||
|
||||
<TagFilterSelect
|
||||
:model-value="tagIds"
|
||||
:tag-mode="tagMode"
|
||||
:untagged-only="untaggedOnly"
|
||||
:tags="tags"
|
||||
:disabled="loading"
|
||||
@update:model-value="emit('update:tagIds', $event)"
|
||||
@update:tag-mode="emit('update:tagMode', $event)"
|
||||
@update:untagged-only="emit('update:untaggedOnly', $event)"
|
||||
@manage="emit('manage-tags')"
|
||||
/>
|
||||
|
||||
<UButton
|
||||
type="submit"
|
||||
icon="i-lucide-search"
|
||||
@@ -100,6 +127,20 @@ function viewButtonClass(active: boolean) {
|
||||
{{ t('stats.resetFilters') }}
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
v-if="showBatchTags"
|
||||
type="button"
|
||||
icon="i-lucide-tags"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
class="shrink-0"
|
||||
:disabled="!selectedCount || loading"
|
||||
@click="emit('batch-tags')"
|
||||
>
|
||||
{{ t('tags.batchAdd') }}
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
v-if="showBatchDelete"
|
||||
type="button"
|
||||
|
||||
@@ -1,16 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import type { ImageItem } from '~/types/image'
|
||||
import type { ImageItem, ImageTag } from '~/types/image'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
items: ImageItem[]
|
||||
selectedKeys: Set<string>
|
||||
selectable?: boolean
|
||||
showStorage?: boolean
|
||||
showTags?: boolean
|
||||
emptyText?: string
|
||||
showDelete?: boolean
|
||||
}>(), {
|
||||
selectable: false,
|
||||
showStorage: false,
|
||||
showTags: false,
|
||||
showDelete: true
|
||||
})
|
||||
|
||||
@@ -18,11 +20,15 @@ const emit = defineEmits<{
|
||||
'update:selectedKeys': [value: Set<string>]
|
||||
'preview': [image: ImageItem]
|
||||
'delete': [image: ImageItem]
|
||||
'tag-click': [tagId: number]
|
||||
'untagged-click': []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const { formatFileSize } = useFileSize()
|
||||
|
||||
const INLINE_TAG_LIMIT = 3
|
||||
|
||||
const displayEmptyText = computed(() => props.emptyText ?? t('image.empty'))
|
||||
|
||||
const allSelected = computed(() =>
|
||||
@@ -76,10 +82,33 @@ function sourceLabel(image: ImageItem) {
|
||||
}
|
||||
}
|
||||
|
||||
function typeLabel(image: ImageItem) {
|
||||
if (props.showStorage && image.storage) return image.storage.name
|
||||
return '—'
|
||||
function sourceIcon(image: ImageItem) {
|
||||
switch (image.uploadSource) {
|
||||
case 'web':
|
||||
return 'i-lucide-globe'
|
||||
case 'api':
|
||||
return 'i-lucide-code-xml'
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function storageIcon(image: ImageItem) {
|
||||
return image.storage?.type === 'local' ? 'i-lucide-hard-drive' : 'i-lucide-cloud'
|
||||
}
|
||||
|
||||
function tagDisplay(tags: ImageTag[] | undefined) {
|
||||
const list = tags ?? []
|
||||
if (list.length <= INLINE_TAG_LIMIT) {
|
||||
return { visible: list, hidden: [] as ImageTag[] }
|
||||
}
|
||||
return {
|
||||
visible: list.slice(0, INLINE_TAG_LIMIT),
|
||||
hidden: list.slice(INLINE_TAG_LIMIT)
|
||||
}
|
||||
}
|
||||
|
||||
const metaBadgeClass = 'inline-flex max-w-full items-center gap-1 rounded-md border border-default px-1.5 py-0.5 text-[11px] leading-4 text-muted'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -88,12 +117,12 @@ function typeLabel(image: ImageItem) {
|
||||
class="overflow-hidden rounded-xl border border-default bg-default"
|
||||
>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full text-sm">
|
||||
<thead class="border-b border-default text-xs text-muted">
|
||||
<table class="min-w-full text-xs">
|
||||
<thead class="border-b border-default bg-elevated/40 text-muted">
|
||||
<tr>
|
||||
<th
|
||||
v-if="selectable"
|
||||
class="w-10 px-4 py-3 text-left font-medium"
|
||||
class="w-10 px-3 py-2.5 text-left font-medium"
|
||||
>
|
||||
<UCheckbox
|
||||
:model-value="allSelected ? true : headerIndeterminate ? 'indeterminate' : false"
|
||||
@@ -101,22 +130,31 @@ function typeLabel(image: ImageItem) {
|
||||
@update:model-value="toggleAll"
|
||||
/>
|
||||
</th>
|
||||
<th class="min-w-[16rem] px-4 py-3 text-left font-medium">
|
||||
<th class="min-w-[14rem] px-3 py-2.5 text-left font-medium">
|
||||
{{ t('stats.colFilename') }}
|
||||
</th>
|
||||
<th class="hidden w-28 px-4 py-3 text-left font-medium sm:table-cell">
|
||||
<th class="hidden w-24 px-3 py-2.5 text-left font-medium sm:table-cell">
|
||||
{{ t('stats.colSource') }}
|
||||
</th>
|
||||
<th class="w-24 px-4 py-3 text-left font-medium">
|
||||
<th class="w-20 px-3 py-2.5 text-left font-medium">
|
||||
{{ t('stats.colSize') }}
|
||||
</th>
|
||||
<th class="hidden w-32 px-4 py-3 text-left font-medium md:table-cell">
|
||||
<th
|
||||
v-if="showStorage"
|
||||
class="hidden w-28 px-3 py-2.5 text-left font-medium md:table-cell"
|
||||
>
|
||||
{{ t('stats.colType') }}
|
||||
</th>
|
||||
<th class="hidden w-44 px-4 py-3 text-left font-medium lg:table-cell">
|
||||
<th class="hidden w-40 px-3 py-2.5 text-left font-medium lg:table-cell">
|
||||
{{ t('stats.colUploadedAt') }}
|
||||
</th>
|
||||
<th class="w-28 px-4 py-3 text-right font-medium">
|
||||
<th
|
||||
v-if="showTags"
|
||||
class="min-w-[9rem] px-3 py-2.5 text-left font-medium md:table-cell"
|
||||
>
|
||||
{{ t('tags.column') }}
|
||||
</th>
|
||||
<th class="w-24 px-3 py-2.5 text-right font-medium">
|
||||
{{ t('stats.colActions') }}
|
||||
</th>
|
||||
</tr>
|
||||
@@ -125,22 +163,23 @@ function typeLabel(image: ImageItem) {
|
||||
<tr
|
||||
v-for="image in items"
|
||||
:key="image.key"
|
||||
class="transition-colors hover:bg-muted/20"
|
||||
class="transition-colors hover:bg-elevated/50"
|
||||
:class="selectedKeys.has(image.key) ? 'bg-primary/5' : ''"
|
||||
>
|
||||
<td
|
||||
v-if="selectable"
|
||||
class="px-4 py-3"
|
||||
class="px-3 py-2"
|
||||
>
|
||||
<UCheckbox
|
||||
:model-value="selectedKeys.has(image.key)"
|
||||
@update:model-value="updateSelection(image.key, $event === true)"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<td class="px-3 py-2.5">
|
||||
<div class="flex min-w-0 items-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
class="relative size-10 shrink-0 overflow-hidden rounded-md border border-default bg-muted"
|
||||
class="relative size-12 shrink-0 overflow-hidden rounded-md border border-default bg-muted"
|
||||
:aria-label="t('image.openPreview')"
|
||||
@click="emit('preview', image)"
|
||||
>
|
||||
@@ -152,35 +191,108 @@ function typeLabel(image: ImageItem) {
|
||||
>
|
||||
</button>
|
||||
<p
|
||||
class="min-w-0 flex-1 truncate font-medium"
|
||||
class="min-w-0 flex-1 truncate text-highlighted"
|
||||
:title="image.originalName"
|
||||
>
|
||||
{{ image.originalName }}
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
<td class="hidden px-4 py-3 sm:table-cell">
|
||||
<td class="hidden px-3 py-2 sm:table-cell">
|
||||
<span
|
||||
v-if="sourceLabel(image)"
|
||||
class="inline-flex rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary"
|
||||
v-if="sourceLabel(image) && sourceIcon(image)"
|
||||
:class="metaBadgeClass"
|
||||
>
|
||||
{{ sourceLabel(image) }}
|
||||
<UIcon
|
||||
:name="sourceIcon(image)!"
|
||||
class="size-3 shrink-0"
|
||||
/>
|
||||
<span class="truncate">{{ sourceLabel(image) }}</span>
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="text-muted"
|
||||
>—</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-muted">
|
||||
<td class="px-3 py-2 tabular-nums text-muted">
|
||||
{{ formatFileSize(image.size) }}
|
||||
</td>
|
||||
<td class="hidden px-4 py-3 text-muted md:table-cell">
|
||||
<span class="truncate">{{ typeLabel(image) }}</span>
|
||||
<td
|
||||
v-if="showStorage"
|
||||
class="hidden px-3 py-2 md:table-cell"
|
||||
>
|
||||
<span
|
||||
v-if="image.storage"
|
||||
:class="metaBadgeClass"
|
||||
:title="image.storage.name"
|
||||
>
|
||||
<UIcon
|
||||
:name="storageIcon(image)"
|
||||
class="size-3 shrink-0"
|
||||
/>
|
||||
<span class="truncate">{{ image.storage.name }}</span>
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="text-muted"
|
||||
>—</span>
|
||||
</td>
|
||||
<td class="hidden px-4 py-3 text-muted lg:table-cell">
|
||||
<td class="hidden px-3 py-2 tabular-nums text-muted lg:table-cell">
|
||||
{{ formatUploadedAt(image.uploadedAt) }}
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<td
|
||||
v-if="showTags"
|
||||
class="px-3 py-2 md:table-cell"
|
||||
>
|
||||
<div
|
||||
v-if="image.tags?.length"
|
||||
class="flex flex-wrap items-center gap-1"
|
||||
>
|
||||
<TagBadge
|
||||
v-for="tag in tagDisplay(image.tags).visible"
|
||||
:key="tag.id"
|
||||
:tag="tag"
|
||||
clickable
|
||||
@click="emit('tag-click', tag.id)"
|
||||
/>
|
||||
<UPopover
|
||||
v-if="tagDisplay(image.tags).hidden.length"
|
||||
:content="{ side: 'bottom', align: 'start' }"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex rounded-md border border-default px-1.5 py-0.5 text-[11px] text-muted transition-colors hover:border-primary/40 hover:text-primary"
|
||||
:aria-label="t('tags.moreTags', { n: tagDisplay(image.tags).hidden.length })"
|
||||
@click.stop
|
||||
>
|
||||
+{{ tagDisplay(image.tags).hidden.length }}
|
||||
</button>
|
||||
<template #content>
|
||||
<div
|
||||
class="flex max-w-56 flex-wrap gap-1 p-2"
|
||||
@click.stop
|
||||
>
|
||||
<TagBadge
|
||||
v-for="tag in tagDisplay(image.tags).hidden"
|
||||
:key="tag.id"
|
||||
:tag="tag"
|
||||
clickable
|
||||
@click="emit('tag-click', tag.id)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</UPopover>
|
||||
</div>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="rounded-md border border-dashed border-default px-1.5 py-0.5 text-[11px] text-muted transition-colors hover:border-primary/40 hover:text-primary"
|
||||
@click.stop="emit('untagged-click')"
|
||||
>
|
||||
{{ t('tags.unlabeled') }}
|
||||
</button>
|
||||
</td>
|
||||
<td class="px-3 py-2">
|
||||
<div class="flex items-center justify-end gap-0.5 text-muted">
|
||||
<CopyButton
|
||||
icon="i-lucide-link"
|
||||
@@ -217,7 +329,7 @@ function typeLabel(image: ImageItem) {
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="rounded-xl border border-dashed border-default py-16 text-center text-sm text-muted"
|
||||
class="rounded-xl border border-dashed border-default py-16 text-center text-xs text-muted"
|
||||
>
|
||||
{{ displayEmptyText }}
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="divide-y divide-default overflow-hidden rounded-lg border border-default">
|
||||
<div class="divide-y divide-default">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import type { ActivityLogListResponse, ActivityLogStorage, LogAction, LogSource } from '~/types/logs'
|
||||
import type { ActivityLogListResponse, LogAction, LogSource, LogStatus } from '~/types/logs'
|
||||
|
||||
const { isAuthenticated, handleAuthError, isAdmin } = useAuth()
|
||||
const toast = useToast()
|
||||
@@ -8,36 +8,30 @@ const { formatFileSize } = useFileSize()
|
||||
|
||||
const loading = ref(true)
|
||||
const page = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const actionFilter = ref<'all' | LogAction>('all')
|
||||
const sourceFilter = ref<'all' | LogSource>('all')
|
||||
const userFilter = ref<'all' | number>('all')
|
||||
const dateFrom = ref('')
|
||||
const dateTo = ref('')
|
||||
const searchQuery = ref('')
|
||||
const activeSearch = ref('')
|
||||
const listData = ref<ActivityLogListResponse | null>(null)
|
||||
const imageLinkBase = ref('')
|
||||
const hideFolderInUrl = ref(false)
|
||||
|
||||
const pageSize = 10
|
||||
|
||||
const summaryLabel = computed(() => {
|
||||
const summary = listData.value?.summary
|
||||
if (!summary) return ''
|
||||
return t('logs.summaryAll', {
|
||||
total: summary.total,
|
||||
upload: summary.upload,
|
||||
delete: summary.delete
|
||||
})
|
||||
})
|
||||
|
||||
const actionItems = computed(() => [
|
||||
{ label: t('logs.filterActionAll'), value: 'all' as const },
|
||||
{ label: t('logs.actionUpload'), value: 'upload' as const },
|
||||
{ label: t('logs.actionDelete'), value: 'delete' as const }
|
||||
{ label: t('logs.actionDelete'), value: 'delete' as const },
|
||||
{ label: t('logs.actionLogin'), value: 'login' as const },
|
||||
{ label: t('logs.actionEdit'), value: 'edit' as const },
|
||||
{ label: t('logs.actionSettings'), value: 'settings' as const },
|
||||
{ label: t('logs.actionTags'), value: 'tags' as const }
|
||||
])
|
||||
|
||||
const sourceItems = computed(() => [
|
||||
{ label: t('logs.filterSourceAll'), value: 'all' as const },
|
||||
{ label: t('logs.sourceWeb'), value: 'web' as const },
|
||||
{ label: t('logs.sourceAdmin'), value: 'admin' as const },
|
||||
{ label: t('logs.sourceApi'), value: 'api' as const }
|
||||
])
|
||||
|
||||
@@ -73,66 +67,104 @@ function formatTimeShort(value: string) {
|
||||
}
|
||||
}
|
||||
|
||||
function actionLabel(action: LogAction) {
|
||||
const labels: Record<LogAction, string> = {
|
||||
upload: t('logs.actionUpload'),
|
||||
delete: t('logs.actionDelete'),
|
||||
login: t('logs.actionLogin'),
|
||||
edit: t('logs.actionEdit'),
|
||||
settings: t('logs.actionSettings'),
|
||||
tags: t('logs.actionTags')
|
||||
}
|
||||
return labels[action]
|
||||
}
|
||||
|
||||
function actionBadgeClass(action: LogAction) {
|
||||
const base = 'inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium whitespace-nowrap'
|
||||
return action === 'upload'
|
||||
? `${base} bg-success/10 text-success`
|
||||
: `${base} bg-error/10 text-error`
|
||||
switch (action) {
|
||||
case 'upload':
|
||||
return `${base} bg-success/10 text-success`
|
||||
case 'delete':
|
||||
return `${base} bg-error/10 text-error`
|
||||
case 'login':
|
||||
return `${base} bg-sky-500/10 text-sky-600 dark:text-sky-400`
|
||||
case 'edit':
|
||||
return `${base} bg-blue-500/10 text-blue-600 dark:text-blue-400`
|
||||
case 'settings':
|
||||
return `${base} bg-slate-500/10 text-slate-600 dark:text-slate-400`
|
||||
case 'tags':
|
||||
return `${base} bg-violet-500/10 text-violet-600 dark:text-violet-400`
|
||||
}
|
||||
}
|
||||
|
||||
function actionIcon(action: LogAction) {
|
||||
return action === 'upload' ? 'i-lucide-upload' : 'i-lucide-trash-2'
|
||||
switch (action) {
|
||||
case 'upload':
|
||||
return 'i-lucide-upload'
|
||||
case 'delete':
|
||||
return 'i-lucide-trash-2'
|
||||
case 'login':
|
||||
return 'i-lucide-log-in'
|
||||
case 'edit':
|
||||
return 'i-lucide-pencil'
|
||||
case 'settings':
|
||||
return 'i-lucide-settings'
|
||||
case 'tags':
|
||||
return 'i-lucide-tag'
|
||||
}
|
||||
}
|
||||
|
||||
function sourceIcon(source: LogSource) {
|
||||
switch (source) {
|
||||
case 'web':
|
||||
return 'i-lucide-monitor'
|
||||
case 'admin':
|
||||
return 'i-lucide-layout-dashboard'
|
||||
case 'api':
|
||||
return 'i-lucide-code-2'
|
||||
}
|
||||
}
|
||||
|
||||
function sourceLabel(source: LogSource) {
|
||||
switch (source) {
|
||||
case 'web':
|
||||
return t('logs.sourceWeb')
|
||||
case 'admin':
|
||||
return t('logs.sourceAdmin')
|
||||
case 'api':
|
||||
return t('logs.sourceApi')
|
||||
}
|
||||
}
|
||||
|
||||
function storageIcon(storage: ActivityLogStorage | null) {
|
||||
return storage?.type === 'local' ? 'i-lucide-hard-drive' : 'i-lucide-cloud'
|
||||
}
|
||||
|
||||
function publicPathFromKey(key: string) {
|
||||
if (hideFolderInUrl.value) {
|
||||
const slash = key.lastIndexOf('/')
|
||||
return slash >= 0 ? key.slice(slash + 1) : key
|
||||
function sourceBadgeClass(source: LogSource) {
|
||||
const base = 'inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium whitespace-nowrap'
|
||||
switch (source) {
|
||||
case 'web':
|
||||
return `${base} bg-primary/10 text-primary`
|
||||
case 'admin':
|
||||
return `${base} bg-orange-500/10 text-orange-600 dark:text-orange-400`
|
||||
case 'api':
|
||||
return `${base} bg-violet-500/10 text-violet-600 dark:text-violet-400`
|
||||
}
|
||||
const prefix = 'images/'
|
||||
return key.startsWith(prefix) ? key.slice(prefix.length) : key
|
||||
}
|
||||
|
||||
function imageUrl(key: string) {
|
||||
const base = imageLinkBase.value.replace(/\/$/, '')
|
||||
const path = publicPathFromKey(key)
|
||||
if (!base) return `/${path}`
|
||||
return `${base}/${path}`
|
||||
function statusLabel(status: LogStatus) {
|
||||
return status === 'failure' ? t('logs.resultFailure') : t('logs.resultSuccess')
|
||||
}
|
||||
|
||||
async function loadImageLinkBase() {
|
||||
try {
|
||||
if (isAdmin.value) {
|
||||
const data = await $fetch<{ effectiveImageBaseUrl: string, hideFolderInUrl: boolean }>('/api/settings', {
|
||||
credentials: 'include'
|
||||
})
|
||||
imageLinkBase.value = data.effectiveImageBaseUrl
|
||||
hideFolderInUrl.value = data.hideFolderInUrl
|
||||
return
|
||||
}
|
||||
const data = await $fetch<{ env: { imageBaseUrl: string, hideFolderInUrl: boolean } }>('/api/user/api-token', {
|
||||
credentials: 'include'
|
||||
})
|
||||
imageLinkBase.value = data.env.imageBaseUrl
|
||||
hideFolderInUrl.value = data.env.hideFolderInUrl
|
||||
} catch {
|
||||
if (import.meta.client) {
|
||||
imageLinkBase.value = window.location.origin
|
||||
}
|
||||
}
|
||||
function statusDotClass(status: LogStatus) {
|
||||
return status === 'failure' ? 'bg-error' : 'bg-success'
|
||||
}
|
||||
|
||||
function formatIp(value: string | null) {
|
||||
if (!value || value === '-') return '—'
|
||||
return value
|
||||
}
|
||||
|
||||
function formatSize(action: LogAction, size: number) {
|
||||
if (action !== 'upload' && action !== 'delete') return '—'
|
||||
if (action === 'delete' && size <= 0) return '—'
|
||||
return formatFileSize(size)
|
||||
}
|
||||
|
||||
async function loadLogs() {
|
||||
@@ -140,7 +172,7 @@ async function loadLogs() {
|
||||
try {
|
||||
const query: Record<string, string | number> = {
|
||||
page: page.value,
|
||||
limit: pageSize
|
||||
limit: pageSize.value
|
||||
}
|
||||
if (actionFilter.value !== 'all') {
|
||||
query.action = actionFilter.value
|
||||
@@ -154,6 +186,12 @@ async function loadLogs() {
|
||||
if (activeSearch.value) {
|
||||
query.q = activeSearch.value
|
||||
}
|
||||
if (dateFrom.value) {
|
||||
query.from = dateFrom.value
|
||||
}
|
||||
if (dateTo.value) {
|
||||
query.to = dateTo.value
|
||||
}
|
||||
|
||||
listData.value = await $fetch<ActivityLogListResponse>('/api/logs', {
|
||||
credentials: 'include',
|
||||
@@ -191,21 +229,32 @@ function handlePageChange(target: number) {
|
||||
void loadLogs()
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await loadImageLinkBase()
|
||||
await loadLogs()
|
||||
function handlePageSizeChange(size: number) {
|
||||
pageSize.value = size
|
||||
page.value = 1
|
||||
void loadLogs()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void loadLogs()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-w-0">
|
||||
<div class="flex flex-wrap items-start justify-between gap-3 border-b border-default px-5 py-4 sm:px-6">
|
||||
<div>
|
||||
<h2 class="text-sm font-semibold">
|
||||
{{ t('logs.pageTitle') }}
|
||||
</h2>
|
||||
<p class="mt-0.5 text-xs text-muted">
|
||||
{{ isAdmin ? t('logs.pageSubtitleAdmin') : t('logs.pageSubtitle') }}
|
||||
<div class="mb-6 flex items-start justify-between gap-4">
|
||||
<div class="min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
class="h-4 w-1 shrink-0 rounded-full bg-primary"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<h2 class="text-sm font-semibold text-highlighted">
|
||||
{{ t('logs.pageTitle') }}
|
||||
</h2>
|
||||
</div>
|
||||
<p class="mt-1.5 pl-3 text-xs leading-relaxed text-muted">
|
||||
{{ isAdmin ? t('settings.pageSubtitleLogs') : t('logs.pageSubtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
<UButton
|
||||
@@ -215,35 +264,45 @@ onMounted(async () => {
|
||||
size="sm"
|
||||
:label="t('common.refresh')"
|
||||
:loading="loading"
|
||||
class="shrink-0"
|
||||
@click="loadLogs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<form
|
||||
class="border-b border-default px-5 py-3 sm:px-6"
|
||||
class="mb-4 flex flex-col gap-3"
|
||||
@submit.prevent="submitSearch"
|
||||
>
|
||||
<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p
|
||||
v-if="summaryLabel"
|
||||
class="text-xs text-muted"
|
||||
>
|
||||
{{ summaryLabel }}
|
||||
</p>
|
||||
<p
|
||||
v-else
|
||||
class="text-xs text-muted"
|
||||
>
|
||||
{{ t('stats.counting') }}
|
||||
</p>
|
||||
<div class="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
|
||||
<div class="flex min-w-0 flex-wrap items-center gap-2">
|
||||
<UInput
|
||||
v-model="dateFrom"
|
||||
type="date"
|
||||
size="sm"
|
||||
class="min-w-0 w-full sm:w-36"
|
||||
:aria-label="t('logs.dateFrom')"
|
||||
:disabled="loading"
|
||||
@change="applyFilters"
|
||||
/>
|
||||
<span class="hidden text-xs text-muted sm:inline">{{ t('logs.dateRangeSeparator') }}</span>
|
||||
<UInput
|
||||
v-model="dateTo"
|
||||
type="date"
|
||||
size="sm"
|
||||
class="min-w-0 w-full sm:w-36"
|
||||
:aria-label="t('logs.dateTo')"
|
||||
:disabled="loading"
|
||||
@change="applyFilters"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex min-w-0 flex-wrap items-center gap-2 sm:justify-end">
|
||||
<div class="flex min-w-0 flex-wrap items-center gap-2 xl:justify-end">
|
||||
<USelect
|
||||
v-if="isAdmin"
|
||||
v-model="userFilter"
|
||||
:items="userItems"
|
||||
value-key="value"
|
||||
class="min-w-0 w-full sm:w-36"
|
||||
class="min-w-0 w-full sm:w-32"
|
||||
size="sm"
|
||||
@update:model-value="applyFilters"
|
||||
/>
|
||||
@@ -251,7 +310,7 @@ onMounted(async () => {
|
||||
v-model="actionFilter"
|
||||
:items="actionItems"
|
||||
value-key="value"
|
||||
class="min-w-0 w-[calc(50%-0.25rem)] sm:w-32"
|
||||
class="min-w-0 w-[calc(50%-0.25rem)] sm:w-28"
|
||||
size="sm"
|
||||
@update:model-value="applyFilters"
|
||||
/>
|
||||
@@ -259,7 +318,7 @@ onMounted(async () => {
|
||||
v-model="sourceFilter"
|
||||
:items="sourceItems"
|
||||
value-key="value"
|
||||
class="min-w-0 w-[calc(50%-0.25rem)] sm:w-36"
|
||||
class="min-w-0 w-[calc(50%-0.25rem)] sm:w-28"
|
||||
size="sm"
|
||||
@update:model-value="applyFilters"
|
||||
/>
|
||||
@@ -268,19 +327,17 @@ onMounted(async () => {
|
||||
v-model="searchQuery"
|
||||
icon="i-lucide-search"
|
||||
:placeholder="t('logs.searchPlaceholder')"
|
||||
class="min-w-0 flex-1 sm:w-40 sm:flex-none"
|
||||
class="min-w-0 flex-1 sm:w-44 sm:flex-none"
|
||||
size="sm"
|
||||
:disabled="loading"
|
||||
/>
|
||||
<UButton
|
||||
type="submit"
|
||||
icon="i-lucide-search"
|
||||
size="sm"
|
||||
class="shrink-0"
|
||||
:aria-label="t('common.search')"
|
||||
:loading="loading"
|
||||
>
|
||||
<span class="hidden sm:inline">{{ t('common.search') }}</span>
|
||||
{{ t('common.search') }}
|
||||
</UButton>
|
||||
<UButton
|
||||
v-if="activeSearch"
|
||||
@@ -292,263 +349,209 @@ onMounted(async () => {
|
||||
class="shrink-0"
|
||||
:aria-label="t('stats.clear')"
|
||||
@click="clearSearch"
|
||||
>
|
||||
<span class="hidden sm:inline">{{ t('stats.clear') }}</span>
|
||||
</UButton>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div
|
||||
v-if="loading"
|
||||
class="p-4 sm:p-6"
|
||||
>
|
||||
<div class="space-y-3 sm:hidden">
|
||||
<USkeleton
|
||||
v-for="n in 6"
|
||||
:key="`mobile-${n}`"
|
||||
class="h-24 rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
<div class="hidden space-y-2 sm:block">
|
||||
<USkeleton
|
||||
v-for="n in 8"
|
||||
:key="`desktop-${n}`"
|
||||
class="h-12 rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-else-if="listData && listData.items.length">
|
||||
<div class="min-w-0 sm:hidden">
|
||||
<div class="divide-y divide-default">
|
||||
<article
|
||||
v-for="row in listData.items"
|
||||
:key="row.id"
|
||||
class="min-w-0 px-4 py-3.5"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<time class="text-xs text-muted">
|
||||
{{ formatTimeShort(row.createdAt) }}
|
||||
</time>
|
||||
<span class="shrink-0 text-xs tabular-nums text-muted">
|
||||
{{ formatFileSize(row.size) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-2 flex min-w-0 max-w-full flex-wrap items-center gap-1.5">
|
||||
<span :class="actionBadgeClass(row.action)">
|
||||
<UIcon
|
||||
:name="actionIcon(row.action)"
|
||||
class="size-3 shrink-0"
|
||||
/>
|
||||
{{ row.action === 'upload' ? t('logs.actionUpload') : t('logs.actionDelete') }}
|
||||
</span>
|
||||
<span class="inline-flex items-center rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary whitespace-nowrap">
|
||||
{{ sourceLabel(row.source) }}
|
||||
</span>
|
||||
<span
|
||||
v-if="isAdmin"
|
||||
class="text-xs text-muted"
|
||||
>
|
||||
{{ row.username ?? '—' }}
|
||||
</span>
|
||||
<UBadge
|
||||
v-if="row.storage"
|
||||
color="neutral"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
class="max-w-full truncate"
|
||||
>
|
||||
<UIcon
|
||||
:name="storageIcon(row.storage)"
|
||||
class="mr-1 size-3"
|
||||
/>
|
||||
{{ row.storage.name }}
|
||||
</UBadge>
|
||||
</div>
|
||||
|
||||
<p
|
||||
class="mt-2 truncate text-sm"
|
||||
:title="row.originalName"
|
||||
>
|
||||
{{ row.originalName }}
|
||||
</p>
|
||||
|
||||
<div class="mt-2 flex min-w-0 items-center gap-1">
|
||||
<a
|
||||
v-if="row.action === 'upload'"
|
||||
:href="imageUrl(row.key)"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="min-w-0 flex-1 truncate font-mono text-xs text-primary hover:underline"
|
||||
:title="row.key"
|
||||
>
|
||||
{{ row.key }}
|
||||
</a>
|
||||
<span
|
||||
v-else
|
||||
class="min-w-0 flex-1 truncate font-mono text-xs text-dimmed"
|
||||
:title="row.key"
|
||||
>
|
||||
{{ row.key }}
|
||||
</span>
|
||||
<CopyButton
|
||||
icon="i-lucide-copy"
|
||||
icon-only
|
||||
class="shrink-0"
|
||||
:label="t('common.copy')"
|
||||
:value="row.key"
|
||||
:success-title="t('copy.copiedUrl')"
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
<div class="overflow-hidden rounded-xl border border-default bg-default">
|
||||
<div
|
||||
v-if="loading"
|
||||
class="p-4 sm:p-6"
|
||||
>
|
||||
<div class="space-y-3 sm:hidden">
|
||||
<USkeleton
|
||||
v-for="n in 6"
|
||||
:key="`mobile-${n}`"
|
||||
class="h-24 rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
<div class="hidden space-y-2 sm:block">
|
||||
<USkeleton
|
||||
v-for="n in 8"
|
||||
:key="`desktop-${n}`"
|
||||
class="h-12 rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden min-w-0 sm:block">
|
||||
<table class="w-full table-fixed text-left text-sm">
|
||||
<thead class="border-b border-default bg-muted/30 text-xs text-muted">
|
||||
<tr>
|
||||
<th class="w-36 px-4 py-3 font-medium sm:px-6">
|
||||
{{ t('logs.colTime') }}
|
||||
</th>
|
||||
<th
|
||||
v-if="isAdmin"
|
||||
class="w-20 px-4 py-3 font-medium"
|
||||
>
|
||||
{{ t('logs.colUser') }}
|
||||
</th>
|
||||
<th class="w-20 whitespace-nowrap px-4 py-3 font-medium">
|
||||
{{ t('logs.colAction') }}
|
||||
</th>
|
||||
<th class="w-16 whitespace-nowrap px-4 py-3 font-medium">
|
||||
{{ t('logs.colSource') }}
|
||||
</th>
|
||||
<th class="w-24 px-4 py-3 font-medium">
|
||||
{{ t('logs.colStorage') }}
|
||||
</th>
|
||||
<th class="hidden px-4 py-3 font-medium md:table-cell">
|
||||
{{ t('logs.colFile') }}
|
||||
</th>
|
||||
<th class="w-20 px-4 py-3 font-medium">
|
||||
{{ t('logs.colSize') }}
|
||||
</th>
|
||||
<th class="hidden px-4 py-3 font-medium xl:table-cell">
|
||||
{{ t('logs.colKey') }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-default">
|
||||
<tr
|
||||
<template v-else-if="listData && listData.items.length">
|
||||
<div class="min-w-0 sm:hidden">
|
||||
<div class="divide-y divide-default">
|
||||
<article
|
||||
v-for="row in listData.items"
|
||||
:key="row.id"
|
||||
class="hover:bg-muted/20"
|
||||
class="min-w-0 px-4 py-3.5"
|
||||
>
|
||||
<td class="px-4 py-3 text-xs text-muted sm:px-6">
|
||||
<span class="block truncate">{{ formatTime(row.createdAt) }}</span>
|
||||
</td>
|
||||
<td
|
||||
v-if="isAdmin"
|
||||
class="px-4 py-3 text-xs"
|
||||
>
|
||||
<span class="block truncate">{{ row.username ?? '—' }}</span>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-3">
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<time class="text-xs text-muted">
|
||||
{{ formatTimeShort(row.createdAt) }}
|
||||
</time>
|
||||
<span class="shrink-0 text-xs tabular-nums text-muted">
|
||||
{{ formatSize(row.action, row.size) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-2 flex min-w-0 max-w-full flex-wrap items-center gap-1.5">
|
||||
<span :class="actionBadgeClass(row.action)">
|
||||
<UIcon
|
||||
:name="actionIcon(row.action)"
|
||||
class="size-3 shrink-0"
|
||||
/>
|
||||
{{ row.action === 'upload' ? t('logs.actionUpload') : t('logs.actionDelete') }}
|
||||
{{ actionLabel(row.action) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-3">
|
||||
<span class="inline-flex items-center rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
|
||||
<span :class="sourceBadgeClass(row.source)">
|
||||
<UIcon
|
||||
:name="sourceIcon(row.source)"
|
||||
class="size-3 shrink-0"
|
||||
/>
|
||||
{{ sourceLabel(row.source) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-xs">
|
||||
<span
|
||||
v-if="row.storage"
|
||||
class="flex min-w-0 items-center gap-1"
|
||||
:title="row.storage.name"
|
||||
v-if="isAdmin"
|
||||
class="text-xs text-muted"
|
||||
>
|
||||
<UIcon
|
||||
:name="storageIcon(row.storage)"
|
||||
class="size-3.5 shrink-0 opacity-70"
|
||||
/>
|
||||
<span class="truncate">{{ row.storage.name }}</span>
|
||||
{{ row.username ?? '—' }}
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="text-muted"
|
||||
>—</span>
|
||||
</td>
|
||||
<td
|
||||
class="hidden max-w-0 truncate px-4 py-3 md:table-cell"
|
||||
</div>
|
||||
|
||||
<p
|
||||
class="mt-2 truncate text-sm"
|
||||
:title="row.originalName"
|
||||
>
|
||||
{{ row.originalName }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-3 tabular-nums text-muted">
|
||||
{{ formatFileSize(row.size) }}
|
||||
</td>
|
||||
<td class="hidden max-w-0 px-4 py-3 xl:table-cell">
|
||||
<div class="flex min-w-0 items-center gap-1">
|
||||
<a
|
||||
v-if="row.action === 'upload'"
|
||||
:href="imageUrl(row.key)"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="min-w-0 truncate font-mono text-xs text-primary hover:underline"
|
||||
:title="row.key"
|
||||
>
|
||||
{{ row.key }}
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<div class="mt-2 flex items-center justify-between gap-2 text-xs text-muted">
|
||||
<span>{{ formatIp(row.ipAddress) }}</span>
|
||||
<span class="inline-flex items-center gap-1.5">
|
||||
<span
|
||||
v-else
|
||||
class="min-w-0 truncate font-mono text-xs text-dimmed"
|
||||
:title="row.key"
|
||||
>
|
||||
{{ row.key }}
|
||||
</span>
|
||||
<CopyButton
|
||||
icon="i-lucide-copy"
|
||||
icon-only
|
||||
class="shrink-0"
|
||||
:label="t('common.copy')"
|
||||
:value="row.key"
|
||||
:success-title="t('copy.copiedUrl')"
|
||||
class="size-1.5 rounded-full"
|
||||
:class="statusDotClass(row.status)"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{{ statusLabel(row.status) }}
|
||||
</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden min-w-0 overflow-x-auto sm:block">
|
||||
<table class="w-full min-w-[56rem] text-left text-sm">
|
||||
<thead class="border-b border-default bg-muted/30 text-xs text-muted">
|
||||
<tr>
|
||||
<th class="whitespace-nowrap px-4 py-3 font-medium sm:px-5">
|
||||
{{ t('logs.colTime') }}
|
||||
</th>
|
||||
<th
|
||||
v-if="isAdmin"
|
||||
class="whitespace-nowrap px-4 py-3 font-medium"
|
||||
>
|
||||
{{ t('logs.colUser') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-3 font-medium">
|
||||
{{ t('logs.colAction') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-3 font-medium">
|
||||
{{ t('logs.colSource') }}
|
||||
</th>
|
||||
<th class="px-4 py-3 font-medium">
|
||||
{{ t('logs.colFile') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-3 font-medium">
|
||||
{{ t('logs.colSize') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-3 font-medium">
|
||||
{{ t('logs.colIp') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-3 font-medium sm:px-5">
|
||||
{{ t('logs.colResult') }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-default">
|
||||
<tr
|
||||
v-for="row in listData.items"
|
||||
:key="row.id"
|
||||
class="hover:bg-muted/20"
|
||||
>
|
||||
<td class="whitespace-nowrap px-4 py-3 text-xs text-muted sm:px-5">
|
||||
{{ formatTime(row.createdAt) }}
|
||||
</td>
|
||||
<td
|
||||
v-if="isAdmin"
|
||||
class="whitespace-nowrap px-4 py-3 text-xs"
|
||||
>
|
||||
{{ row.username ?? '—' }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-3">
|
||||
<span :class="actionBadgeClass(row.action)">
|
||||
<UIcon
|
||||
:name="actionIcon(row.action)"
|
||||
class="size-3 shrink-0"
|
||||
/>
|
||||
{{ actionLabel(row.action) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-3">
|
||||
<span :class="sourceBadgeClass(row.source)">
|
||||
<UIcon
|
||||
:name="sourceIcon(row.source)"
|
||||
class="size-3 shrink-0"
|
||||
/>
|
||||
{{ sourceLabel(row.source) }}
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="max-w-[12rem] truncate px-4 py-3"
|
||||
:title="row.originalName"
|
||||
>
|
||||
{{ row.originalName }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-3 tabular-nums text-muted">
|
||||
{{ formatSize(row.action, row.size) }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-3 font-mono text-xs text-muted">
|
||||
{{ formatIp(row.ipAddress) }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
|
||||
<span class="inline-flex items-center gap-1.5 text-xs">
|
||||
<span
|
||||
class="size-1.5 rounded-full"
|
||||
:class="statusDotClass(row.status)"
|
||||
/>
|
||||
{{ statusLabel(row.status) }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="px-4 py-16 text-center text-sm text-muted sm:px-6"
|
||||
>
|
||||
{{ t('logs.empty') }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="px-4 py-16 text-center text-sm text-muted sm:px-6"
|
||||
>
|
||||
{{ t('logs.empty') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="listData && listData.total > 0"
|
||||
class="border-t border-default px-4 py-4 sm:px-6"
|
||||
>
|
||||
<PaginationBar
|
||||
:page="listData.page"
|
||||
:total-pages="listData.totalPages"
|
||||
:total="listData.total"
|
||||
:unit="t('logs.entriesUnit')"
|
||||
:loading="loading"
|
||||
@update:page="handlePageChange"
|
||||
/>
|
||||
<div
|
||||
v-if="listData && listData.total > 0"
|
||||
class="border-t border-default px-4 py-4 sm:px-5"
|
||||
>
|
||||
<PaginationBar
|
||||
:page="listData.page"
|
||||
:total-pages="listData.totalPages"
|
||||
:total="listData.total"
|
||||
:unit="t('logs.entriesUnit')"
|
||||
:page-size="pageSize"
|
||||
:loading="loading"
|
||||
@update:page="handlePageChange"
|
||||
@update:page-size="handlePageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,29 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
icon: string
|
||||
title: string
|
||||
subtitle?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="mb-0 flex items-start gap-3 border-b border-default pb-6">
|
||||
<div class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary/10">
|
||||
<UIcon
|
||||
:name="icon"
|
||||
class="size-5 text-primary"
|
||||
/>
|
||||
</div>
|
||||
<div class="min-w-0 pt-0.5">
|
||||
<h1 class="text-lg font-semibold tracking-tight text-highlighted">
|
||||
{{ title }}
|
||||
</h1>
|
||||
<p
|
||||
v-if="subtitle"
|
||||
class="mt-1 text-xs leading-relaxed text-muted"
|
||||
>
|
||||
{{ subtitle }}
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
@@ -1,7 +1,5 @@
|
||||
<template>
|
||||
<div class="overflow-hidden rounded-xl border border-default bg-default p-5 sm:p-6">
|
||||
<div class="space-y-8">
|
||||
<slot />
|
||||
</div>
|
||||
<div class="mt-6 space-y-4">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
title: string
|
||||
hint?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="overflow-hidden rounded-xl border border-default bg-default">
|
||||
<div class="px-4 py-3">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<h2 class="text-sm font-semibold text-highlighted">
|
||||
{{ title }}
|
||||
</h2>
|
||||
<slot name="badge" />
|
||||
</div>
|
||||
<p
|
||||
v-if="hint"
|
||||
class="mt-1 text-xs leading-relaxed text-muted"
|
||||
>
|
||||
{{ hint }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="border-t border-default px-4 py-4">
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
export type SettingsRadioOption = {
|
||||
value: string
|
||||
label: string
|
||||
description?: string
|
||||
}
|
||||
|
||||
defineProps<{
|
||||
items: SettingsRadioOption[]
|
||||
}>()
|
||||
|
||||
const model = defineModel<string>({ required: true })
|
||||
|
||||
const radioUi = {
|
||||
fieldset: 'flex flex-col divide-y divide-default',
|
||||
item: 'flex items-start gap-4 py-4',
|
||||
wrapper: 'min-w-0 flex-1 pr-2',
|
||||
base: 'mt-0.5 shrink-0',
|
||||
label: 'block text-sm font-medium text-highlighted',
|
||||
description: 'mt-1 block text-xs leading-relaxed text-muted'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<URadioGroup
|
||||
v-model="model"
|
||||
:items="items"
|
||||
variant="list"
|
||||
:ui="radioUi"
|
||||
>
|
||||
<template #label="{ item }">
|
||||
<span class="text-sm font-medium text-highlighted">{{ item.label }}</span>
|
||||
</template>
|
||||
<template #description="{ item }">
|
||||
<span
|
||||
v-if="item.description"
|
||||
class="mt-1 block text-xs leading-relaxed text-muted"
|
||||
>{{ item.description }}</span>
|
||||
</template>
|
||||
</URadioGroup>
|
||||
</template>
|
||||
@@ -6,8 +6,8 @@ defineProps<{
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="space-y-4">
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<section class="overflow-hidden rounded-xl border border-default bg-default">
|
||||
<div class="flex items-start justify-between gap-4 px-4 py-3">
|
||||
<div class="min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
@@ -32,6 +32,8 @@ defineProps<{
|
||||
<slot name="action" />
|
||||
</div>
|
||||
</div>
|
||||
<slot />
|
||||
<div class="border-t border-default px-4">
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -6,6 +6,7 @@ defineProps<{
|
||||
|
||||
const emit = defineEmits<{
|
||||
save: []
|
||||
restore: []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
@@ -13,13 +14,19 @@ const { t } = useI18n()
|
||||
|
||||
<template>
|
||||
<div class="border-t border-default bg-default px-4 py-4 sm:px-6">
|
||||
<div class="flex items-center justify-end gap-3">
|
||||
<div class="flex flex-wrap items-center justify-end gap-3">
|
||||
<p
|
||||
v-if="hasChanges"
|
||||
class="mr-auto text-xs text-warning"
|
||||
>
|
||||
{{ t('settings.unsavedChanges') }}
|
||||
</p>
|
||||
<UButton
|
||||
:label="t('settings.restoreDefaults')"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
@click="emit('restore')"
|
||||
/>
|
||||
<UButton
|
||||
:label="t('settings.saveSettings')"
|
||||
icon="i-lucide-save"
|
||||
|
||||
@@ -1,39 +1,67 @@
|
||||
<script setup lang="ts">
|
||||
import type { SettingsTab } from '~/types/settings'
|
||||
|
||||
defineProps<{
|
||||
const props = defineProps<{
|
||||
modelValue: SettingsTab
|
||||
items: Array<{ id: SettingsTab, label: string, icon: string }>
|
||||
title: string
|
||||
subtitle: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [SettingsTab]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const searchQuery = ref('')
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
const q = searchQuery.value.trim().toLowerCase()
|
||||
if (!q) return props.items
|
||||
return props.items.filter(item => item.label.toLowerCase().includes(q))
|
||||
})
|
||||
|
||||
function selectTab(id: SettingsTab) {
|
||||
emit('update:modelValue', id)
|
||||
searchQuery.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="flex w-full shrink-0 flex-col border-b border-default bg-neutral-50 dark:bg-neutral-900/30 lg:w-56 lg:border-b-0 lg:border-r xl:w-60">
|
||||
<div class="border-b border-default px-4 py-5 sm:px-5">
|
||||
<h1 class="text-lg font-semibold tracking-tight text-highlighted">
|
||||
{{ title }}
|
||||
</h1>
|
||||
<p class="mt-1 text-xs leading-relaxed text-muted">
|
||||
{{ subtitle }}
|
||||
</p>
|
||||
<div class="border-b border-default p-3">
|
||||
<UInput
|
||||
v-model="searchQuery"
|
||||
size="sm"
|
||||
:placeholder="t('settings.searchPlaceholder')"
|
||||
icon="i-lucide-search"
|
||||
class="w-full"
|
||||
>
|
||||
<template #trailing>
|
||||
<UKbd
|
||||
size="sm"
|
||||
class="hidden sm:inline-flex"
|
||||
>
|
||||
⌘K
|
||||
</UKbd>
|
||||
</template>
|
||||
</UInput>
|
||||
</div>
|
||||
|
||||
<nav class="flex-1 space-y-0.5 p-3">
|
||||
<p
|
||||
v-if="searchQuery.trim() && !filteredItems.length"
|
||||
class="px-3 py-6 text-center text-xs text-muted"
|
||||
>
|
||||
{{ t('settings.searchEmpty') }}
|
||||
</p>
|
||||
<button
|
||||
v-for="item in items"
|
||||
v-for="item in filteredItems"
|
||||
:key="item.id"
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2.5 text-left text-sm transition-colors"
|
||||
:class="modelValue === item.id
|
||||
? 'bg-primary/10 font-medium text-primary'
|
||||
: 'text-muted hover:bg-muted/50 hover:text-highlighted'"
|
||||
@click="emit('update:modelValue', item.id)"
|
||||
@click="selectTab(item.id)"
|
||||
>
|
||||
<UIcon
|
||||
:name="item.icon"
|
||||
|
||||
@@ -4,32 +4,64 @@ defineProps<{
|
||||
updateAvailable: boolean
|
||||
latestVersion: string | null
|
||||
releaseUrl: string | null
|
||||
checking: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
checkUpdate: []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pl-3">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span class="text-sm font-medium text-highlighted">
|
||||
<div class="flex flex-wrap items-center justify-between gap-4 py-4">
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('settings.systemVersion') }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs leading-relaxed text-muted">
|
||||
{{ t('settings.systemVersionHint') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span class="text-sm font-medium tabular-nums text-highlighted">
|
||||
v{{ appVersion }}
|
||||
</span>
|
||||
<UBadge
|
||||
color="neutral"
|
||||
v-if="updateAvailable && latestVersion"
|
||||
color="warning"
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
>
|
||||
v{{ appVersion }}
|
||||
{{ t('settings.updateAvailable', { version: `v${latestVersion}` }) }}
|
||||
</UBadge>
|
||||
<UBadge
|
||||
v-else
|
||||
color="success"
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
>
|
||||
{{ t('settings.upToDate') }}
|
||||
</UBadge>
|
||||
<UButton
|
||||
:label="t('settings.checkUpdate')"
|
||||
icon="i-lucide-refresh-cw"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
size="sm"
|
||||
class="shrink-0"
|
||||
:loading="checking"
|
||||
@click="emit('checkUpdate')"
|
||||
/>
|
||||
<a
|
||||
v-if="updateAvailable && latestVersion"
|
||||
:href="releaseUrl || 'https://github.com/O96u/PicHost/releases'"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-xs text-warning hover:underline"
|
||||
class="text-xs text-primary hover:underline"
|
||||
>
|
||||
{{ t('settings.updateAvailable', { version: `v${latestVersion}` }) }}
|
||||
{{ t('settings.viewReleases') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
const { items: tags, loading, fetchTags } = useTags()
|
||||
|
||||
onMounted(() => {
|
||||
void fetchTags()
|
||||
})
|
||||
|
||||
async function handleChanged() {
|
||||
await fetchTags(true)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SettingsPanel>
|
||||
<div
|
||||
v-if="loading && !tags.length"
|
||||
class="flex justify-center py-16"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-loader-circle"
|
||||
class="size-6 animate-spin text-muted"
|
||||
/>
|
||||
</div>
|
||||
<TagManagePanel
|
||||
v-else
|
||||
:tags="tags"
|
||||
embedded
|
||||
@changed="handleChanged"
|
||||
/>
|
||||
</SettingsPanel>
|
||||
</template>
|
||||
@@ -9,7 +9,7 @@ const model = defineModel<boolean>({ required: true })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-start justify-between gap-4 px-4 py-4 sm:px-5">
|
||||
<div class="flex items-start justify-between gap-4 py-4">
|
||||
<div class="min-w-0 flex-1 pr-2">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
<slot name="title">
|
||||
|
||||
@@ -19,16 +19,11 @@ const {
|
||||
const copyFormatItems = computed(() => [
|
||||
{ label: t('copy.url'), value: 'url' as const },
|
||||
{ label: t('copy.markdown'), value: 'markdown' as const },
|
||||
{ label: t('copy.html'), value: 'html' as const }
|
||||
{ label: t('copy.html'), value: 'html' as const },
|
||||
{ label: t('copy.bbcode'), value: 'bbcode' as const }
|
||||
])
|
||||
|
||||
const clientQualityLevel = computed(() => {
|
||||
if (clientWebpQuality.value >= 85) return t('preferences.qualityHigh')
|
||||
if (clientWebpQuality.value >= 60) return t('preferences.qualityMedium')
|
||||
return t('preferences.qualityLow')
|
||||
})
|
||||
|
||||
function setCopyFormat(value: 'url' | 'markdown' | 'html') {
|
||||
function setCopyFormat(value: 'url' | 'markdown' | 'html' | 'bbcode') {
|
||||
copyFormat.value = value
|
||||
}
|
||||
|
||||
@@ -37,6 +32,11 @@ function onClientQualityInput(event: Event) {
|
||||
clientWebpQuality.value = Number.isFinite(value) ? value : 80
|
||||
}
|
||||
|
||||
function onClientQualityNumberInput(value: string | number) {
|
||||
const num = Number(value)
|
||||
clientWebpQuality.value = Number.isFinite(num) ? Math.min(100, Math.max(1, Math.round(num))) : 80
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadPreferences()
|
||||
void loadUserSettings()
|
||||
@@ -53,7 +53,7 @@ onMounted(() => {
|
||||
/>
|
||||
<div
|
||||
v-if="userSettings"
|
||||
class="flex items-start justify-between gap-4 px-4 py-4 sm:px-5"
|
||||
class="flex items-start justify-between gap-4 py-4"
|
||||
>
|
||||
<div class="min-w-0 flex-1 pr-2">
|
||||
<p class="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-sm font-medium text-highlighted">
|
||||
@@ -87,55 +87,61 @@ onMounted(() => {
|
||||
class="size-5 animate-spin text-muted"
|
||||
/>
|
||||
</div>
|
||||
<div class="px-4 py-4 sm:px-5">
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('preferences.webpQuality') }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs leading-relaxed text-muted">
|
||||
{{ t('preferences.webpQualityHint') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="shrink-0 text-right text-xs text-muted">
|
||||
<p>{{ t('preferences.current', { n: clientWebpQuality }) }}</p>
|
||||
<p class="mt-0.5">
|
||||
{{ clientQualityLevel }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="py-4">
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('preferences.webpQuality') }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs leading-relaxed text-muted">
|
||||
{{ t('preferences.webpQualityHint') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-3">
|
||||
<input
|
||||
type="range"
|
||||
min="1"
|
||||
max="100"
|
||||
:value="clientWebpQuality"
|
||||
class="h-1.5 min-w-0 flex-1 cursor-pointer appearance-none rounded-full bg-muted accent-primary"
|
||||
@input="onClientQualityInput"
|
||||
>
|
||||
<UInput
|
||||
:model-value="clientWebpQuality"
|
||||
type="number"
|
||||
min="1"
|
||||
max="100"
|
||||
size="xs"
|
||||
class="w-14 shrink-0 tabular-nums"
|
||||
@update:model-value="onClientQualityNumberInput"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="1"
|
||||
max="100"
|
||||
:value="clientWebpQuality"
|
||||
class="mt-3 h-1.5 w-full cursor-pointer appearance-none rounded-full bg-muted accent-primary"
|
||||
@input="onClientQualityInput"
|
||||
>
|
||||
</div>
|
||||
</SettingsGroup>
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection :title="t('settings.uploadConvenience')">
|
||||
<SettingsSection :title="t('preferences.title')">
|
||||
<SettingsGroup>
|
||||
<SettingsToggleRow
|
||||
v-model="autoCopyMarkdown"
|
||||
:title="t('preferences.autoCopy')"
|
||||
:hint="t('preferences.autoCopyHint')"
|
||||
/>
|
||||
<div class="flex flex-col gap-3 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-5">
|
||||
<div class="py-4">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('settings.defaultCopyFormat') }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs leading-relaxed text-muted">
|
||||
{{ t('settings.defaultCopyFormatHint') }}
|
||||
</p>
|
||||
<div
|
||||
class="flex w-full max-w-xs gap-1 rounded-lg border border-default p-0.5 sm:w-auto"
|
||||
class="mt-3 flex w-full max-w-md gap-1 rounded-lg border border-default p-0.5"
|
||||
:class="autoCopyMarkdown ? '' : 'pointer-events-none opacity-40'"
|
||||
>
|
||||
<UButton
|
||||
v-for="item in copyFormatItems"
|
||||
:key="item.value"
|
||||
size="xs"
|
||||
class="flex-1 justify-center sm:min-w-[4.5rem]"
|
||||
class="flex-1 justify-center"
|
||||
:variant="copyFormat === item.value ? 'solid' : 'ghost'"
|
||||
:color="copyFormat === item.value ? 'primary' : 'neutral'"
|
||||
:label="item.label"
|
||||
|
||||
@@ -20,6 +20,9 @@ export function useImageList() {
|
||||
const activeStorageBackend = ref('all')
|
||||
const activeContentType = ref('all')
|
||||
const activeUploadSource = ref('all')
|
||||
const activeTagIds = ref<number[]>([])
|
||||
const activeTagMode = ref<'or' | 'and'>('or')
|
||||
const activeUntaggedOnly = ref(false)
|
||||
const storageBackendOptions = ref<Array<{ id: string, name: string }>>([])
|
||||
|
||||
function storageQueryParams(): Record<string, string> {
|
||||
@@ -38,6 +41,14 @@ export function useImageList() {
|
||||
if (uploadSource && uploadSource !== 'all') {
|
||||
params.uploadSource = uploadSource
|
||||
}
|
||||
if (activeUntaggedOnly.value) {
|
||||
params.untagged = '1'
|
||||
} else if (activeTagIds.value.length) {
|
||||
params.tagIds = activeTagIds.value.join(',')
|
||||
if (activeTagMode.value === 'and' && activeTagIds.value.length > 1) {
|
||||
params.tagMode = 'and'
|
||||
}
|
||||
}
|
||||
return params
|
||||
}
|
||||
|
||||
@@ -181,12 +192,48 @@ export function useImageList() {
|
||||
}
|
||||
}
|
||||
|
||||
async function setActiveTagFilter(options: {
|
||||
tagIds?: number[]
|
||||
tagMode?: 'or' | 'and'
|
||||
untaggedOnly?: boolean
|
||||
}) {
|
||||
if (options.tagIds !== undefined) {
|
||||
activeTagIds.value = [...options.tagIds]
|
||||
}
|
||||
if (options.tagMode !== undefined) {
|
||||
activeTagMode.value = options.tagMode
|
||||
}
|
||||
if (options.untaggedOnly !== undefined) {
|
||||
activeUntaggedOnly.value = options.untaggedOnly
|
||||
}
|
||||
page.value = 1
|
||||
if (activeSearch.value) {
|
||||
await Promise.all([fetchSearch(1), fetchTotal()])
|
||||
} else {
|
||||
await Promise.all([fetchList(1), fetchTotal()])
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleTagFilter(tagId: number) {
|
||||
const next = new Set(activeTagIds.value)
|
||||
activeUntaggedOnly.value = false
|
||||
if (next.has(tagId)) {
|
||||
next.delete(tagId)
|
||||
} else {
|
||||
next.add(tagId)
|
||||
}
|
||||
await setActiveTagFilter({ tagIds: [...next] })
|
||||
}
|
||||
|
||||
async function resetFilters() {
|
||||
searchQuery.value = ''
|
||||
activeSearch.value = ''
|
||||
activeStorageBackend.value = 'all'
|
||||
activeContentType.value = 'all'
|
||||
activeUploadSource.value = 'all'
|
||||
activeTagIds.value = []
|
||||
activeTagMode.value = 'or'
|
||||
activeUntaggedOnly.value = false
|
||||
page.value = 1
|
||||
await Promise.all([fetchList(1), fetchTotal()])
|
||||
}
|
||||
@@ -278,6 +325,12 @@ export function useImageList() {
|
||||
return t('stats.summaryTotal', { total: count })
|
||||
})
|
||||
|
||||
function updateItemTags(key: string, tags: ImageItem['tags']) {
|
||||
items.value = items.value.map(item =>
|
||||
item.key === key ? { ...item, tags } : item
|
||||
)
|
||||
}
|
||||
|
||||
return {
|
||||
items,
|
||||
page,
|
||||
@@ -288,6 +341,9 @@ export function useImageList() {
|
||||
activeStorageBackend,
|
||||
activeContentType,
|
||||
activeUploadSource,
|
||||
activeTagIds,
|
||||
activeTagMode,
|
||||
activeUntaggedOnly,
|
||||
storageBackendOptions,
|
||||
searchQuery,
|
||||
activeSearch,
|
||||
@@ -300,12 +356,16 @@ export function useImageList() {
|
||||
setActiveStorageBackend,
|
||||
setActiveContentType,
|
||||
setActiveUploadSource,
|
||||
setActiveTagFilter,
|
||||
toggleTagFilter,
|
||||
resetFilters,
|
||||
loadStorageBackendOptions,
|
||||
submitSearch,
|
||||
goToPage,
|
||||
setPageSize,
|
||||
prependItems,
|
||||
removeItems
|
||||
removeItems,
|
||||
updateItemTags,
|
||||
listQueryParams
|
||||
}
|
||||
}
|
||||
@@ -10,14 +10,14 @@ const MAX_FILES = 10
|
||||
export function useImageUpload() {
|
||||
const toast = useToast()
|
||||
const { t } = useI18n()
|
||||
const { compressEnabled, clientWebpQuality } = useUploadPreferences()
|
||||
const { compressEnabled, clientWebpQuality, lastTagIds } = useUploadPreferences()
|
||||
const uploading = ref(false)
|
||||
const progressItems = ref<UploadProgressItem[]>([])
|
||||
const lastUploadResult = ref<UploadResponse | null>(null)
|
||||
|
||||
async function uploadFiles(
|
||||
files: File[],
|
||||
options?: { notify?: boolean }
|
||||
options?: { notify?: boolean, tagIds?: number[] }
|
||||
) {
|
||||
if (uploading.value) return
|
||||
|
||||
@@ -58,6 +58,12 @@ export function useImageUpload() {
|
||||
formData.append('files', file, file.name)
|
||||
}
|
||||
|
||||
const tagIds = options?.tagIds ?? lastTagIds.value
|
||||
if (tagIds.length) {
|
||||
formData.append('tagIds', JSON.stringify(tagIds))
|
||||
lastTagIds.value = tagIds
|
||||
}
|
||||
|
||||
const response = await $fetch<UploadResponse>('/api/images/upload', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
const STORAGE_KEY = 'pichost.recent-tag-ids'
|
||||
const MAX_RECENT = 12
|
||||
|
||||
function readRecentIds(): number[] {
|
||||
if (import.meta.server) return []
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY)
|
||||
if (!raw) return []
|
||||
const parsed = JSON.parse(raw)
|
||||
if (!Array.isArray(parsed)) return []
|
||||
return parsed.filter((id: unknown): id is number => Number.isInteger(id) && (id as number) > 0)
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
function writeRecentIds(ids: number[]) {
|
||||
if (import.meta.server) return
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(ids))
|
||||
}
|
||||
|
||||
export function useRecentTags() {
|
||||
const recentIds = useState<number[]>('recent-tag-ids', () => [])
|
||||
|
||||
function loadRecentIds() {
|
||||
recentIds.value = readRecentIds()
|
||||
}
|
||||
|
||||
if (import.meta.client && !recentIds.value.length) {
|
||||
loadRecentIds()
|
||||
}
|
||||
|
||||
function recordRecent(tagIds: number[]) {
|
||||
if (!tagIds.length) return
|
||||
const merged = [
|
||||
...tagIds,
|
||||
...recentIds.value.filter(id => !tagIds.includes(id))
|
||||
].slice(0, MAX_RECENT)
|
||||
recentIds.value = merged
|
||||
writeRecentIds(merged)
|
||||
}
|
||||
|
||||
return {
|
||||
recentIds,
|
||||
loadRecentIds,
|
||||
recordRecent
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
import type { ImageTag } from '~/types/image'
|
||||
|
||||
export interface TagListResponse {
|
||||
items: ImageTag[]
|
||||
}
|
||||
|
||||
export interface TagResponse {
|
||||
tag: ImageTag
|
||||
}
|
||||
|
||||
export function useTags() {
|
||||
const items = useState<ImageTag[]>('tags-list', () => [])
|
||||
const loading = ref(false)
|
||||
const loaded = ref(false)
|
||||
|
||||
async function fetchTags(force = false) {
|
||||
if (loaded.value && !force) return items.value
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await $fetch<TagListResponse>('/api/tags', {
|
||||
credentials: 'include'
|
||||
})
|
||||
items.value = data.items
|
||||
loaded.value = true
|
||||
return data.items
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function createTag(name: string, color?: string | null) {
|
||||
const data = await $fetch<TagResponse>('/api/tags', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
body: { name, color }
|
||||
})
|
||||
await fetchTags(true)
|
||||
return data.tag
|
||||
}
|
||||
|
||||
async function updateTag(id: number, patch: { name?: string, color?: string | null }) {
|
||||
const data = await $fetch<TagResponse>(`/api/tags/${id}`, {
|
||||
method: 'PATCH',
|
||||
credentials: 'include',
|
||||
body: patch
|
||||
})
|
||||
await fetchTags(true)
|
||||
return data.tag
|
||||
}
|
||||
|
||||
async function deleteTag(id: number) {
|
||||
await $fetch(`/api/tags/${id}`, {
|
||||
method: 'DELETE',
|
||||
credentials: 'include'
|
||||
})
|
||||
await fetchTags(true)
|
||||
}
|
||||
|
||||
async function mergeTags(sourceIds: number[], targetId: number) {
|
||||
const data = await $fetch<TagResponse>('/api/tags/merge', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
body: { sourceIds, targetId }
|
||||
})
|
||||
await fetchTags(true)
|
||||
return data.tag
|
||||
}
|
||||
|
||||
async function addTagsToImage(key: string, tagIds: number[]) {
|
||||
const data = await $fetch<{ tags: ImageTag[] }>('/api/images/tags', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
body: { key, tagIds }
|
||||
})
|
||||
return data.tags
|
||||
}
|
||||
|
||||
async function setImageTags(key: string, tagIds: number[]) {
|
||||
const data = await $fetch<{ tags: ImageTag[] }>('/api/images/tags', {
|
||||
method: 'PATCH',
|
||||
credentials: 'include',
|
||||
body: { key, tagIds }
|
||||
})
|
||||
return data.tags
|
||||
}
|
||||
|
||||
async function removeTagFromImage(key: string, tagId: number) {
|
||||
const data = await $fetch<{ tags: ImageTag[] }>('/api/images/tags', {
|
||||
method: 'DELETE',
|
||||
credentials: 'include',
|
||||
body: { key, tagId }
|
||||
})
|
||||
return data.tags
|
||||
}
|
||||
|
||||
async function batchUpdateTags(
|
||||
keys: string[],
|
||||
tagIds: number[],
|
||||
action: 'add' | 'remove' = 'add'
|
||||
) {
|
||||
return $fetch<{ success: boolean, updated: number }>('/api/images/batch-tags', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
body: { keys, tagIds, action }
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
items,
|
||||
loading,
|
||||
loaded,
|
||||
fetchTags,
|
||||
createTag,
|
||||
updateTag,
|
||||
deleteTag,
|
||||
mergeTags,
|
||||
addTagsToImage,
|
||||
setImageTags,
|
||||
removeTagFromImage,
|
||||
batchUpdateTags
|
||||
}
|
||||
}
|
||||
@@ -1,19 +1,21 @@
|
||||
const STORAGE_KEY = 'pichost.upload-preferences'
|
||||
|
||||
export type CopyFormat = 'url' | 'markdown' | 'html'
|
||||
export type CopyFormat = 'url' | 'markdown' | 'html' | 'bbcode'
|
||||
|
||||
export interface UploadPreferences {
|
||||
compressEnabled: boolean
|
||||
autoCopyMarkdown: boolean
|
||||
copyFormat: CopyFormat
|
||||
clientWebpQuality: number
|
||||
lastTagIds: number[]
|
||||
}
|
||||
|
||||
const DEFAULTS: UploadPreferences = {
|
||||
compressEnabled: false,
|
||||
autoCopyMarkdown: false,
|
||||
copyFormat: 'markdown',
|
||||
clientWebpQuality: 80
|
||||
clientWebpQuality: 80,
|
||||
lastTagIds: []
|
||||
}
|
||||
|
||||
function clampQuality(value: unknown): number {
|
||||
@@ -23,7 +25,7 @@ function clampQuality(value: unknown): number {
|
||||
}
|
||||
|
||||
function isCopyFormat(value: unknown): value is CopyFormat {
|
||||
return value === 'url' || value === 'markdown' || value === 'html'
|
||||
return value === 'url' || value === 'markdown' || value === 'html' || value === 'bbcode'
|
||||
}
|
||||
|
||||
function readStored(): UploadPreferences {
|
||||
@@ -37,7 +39,10 @@ function readStored(): UploadPreferences {
|
||||
compressEnabled: parsed.compressEnabled === true,
|
||||
autoCopyMarkdown: parsed.autoCopyMarkdown === true,
|
||||
copyFormat: isCopyFormat(parsed.copyFormat) ? parsed.copyFormat : DEFAULTS.copyFormat,
|
||||
clientWebpQuality: clampQuality(parsed.clientWebpQuality)
|
||||
clientWebpQuality: clampQuality(parsed.clientWebpQuality),
|
||||
lastTagIds: Array.isArray(parsed.lastTagIds)
|
||||
? parsed.lastTagIds.filter(id => Number.isInteger(id) && id > 0)
|
||||
: DEFAULTS.lastTagIds
|
||||
}
|
||||
} catch {
|
||||
return { ...DEFAULTS }
|
||||
@@ -54,6 +59,7 @@ export function useUploadPreferences() {
|
||||
const autoCopyMarkdown = useState('upload-pref-auto-md', () => DEFAULTS.autoCopyMarkdown)
|
||||
const copyFormat = useState<CopyFormat>('upload-pref-copy-format', () => DEFAULTS.copyFormat)
|
||||
const clientWebpQuality = useState('upload-pref-webp-quality', () => DEFAULTS.clientWebpQuality)
|
||||
const lastTagIds = useState<number[]>('upload-pref-last-tag-ids', () => DEFAULTS.lastTagIds)
|
||||
const loaded = useState('upload-pref-loaded', () => false)
|
||||
|
||||
function loadPreferences() {
|
||||
@@ -62,6 +68,7 @@ export function useUploadPreferences() {
|
||||
autoCopyMarkdown.value = stored.autoCopyMarkdown
|
||||
copyFormat.value = stored.copyFormat
|
||||
clientWebpQuality.value = stored.clientWebpQuality
|
||||
lastTagIds.value = stored.lastTagIds
|
||||
loaded.value = true
|
||||
}
|
||||
|
||||
@@ -74,11 +81,20 @@ export function useUploadPreferences() {
|
||||
compressEnabled: compressEnabled.value,
|
||||
autoCopyMarkdown: autoCopyMarkdown.value,
|
||||
copyFormat: copyFormat.value,
|
||||
clientWebpQuality: clampQuality(clientWebpQuality.value)
|
||||
clientWebpQuality: clampQuality(clientWebpQuality.value),
|
||||
lastTagIds: lastTagIds.value
|
||||
})
|
||||
}
|
||||
|
||||
watch([compressEnabled, autoCopyMarkdown, copyFormat, clientWebpQuality], () => {
|
||||
function resetToDefaults() {
|
||||
compressEnabled.value = DEFAULTS.compressEnabled
|
||||
autoCopyMarkdown.value = DEFAULTS.autoCopyMarkdown
|
||||
copyFormat.value = DEFAULTS.copyFormat
|
||||
clientWebpQuality.value = DEFAULTS.clientWebpQuality
|
||||
savePreferences()
|
||||
}
|
||||
|
||||
watch([compressEnabled, autoCopyMarkdown, copyFormat, clientWebpQuality, lastTagIds], () => {
|
||||
if (loaded.value) {
|
||||
savePreferences()
|
||||
}
|
||||
@@ -89,8 +105,10 @@ export function useUploadPreferences() {
|
||||
autoCopyMarkdown,
|
||||
copyFormat,
|
||||
clientWebpQuality,
|
||||
lastTagIds,
|
||||
loaded,
|
||||
loadPreferences,
|
||||
savePreferences
|
||||
savePreferences,
|
||||
resetToDefaults
|
||||
}
|
||||
}
|
||||
+112
-3
@@ -46,9 +46,17 @@ const {
|
||||
activeUploadSource,
|
||||
setActiveUploadSource,
|
||||
resetFilters,
|
||||
loadStorageBackendOptions
|
||||
loadStorageBackendOptions,
|
||||
activeTagIds,
|
||||
activeTagMode,
|
||||
activeUntaggedOnly,
|
||||
setActiveTagFilter,
|
||||
toggleTagFilter,
|
||||
listQueryParams
|
||||
} = useImageList()
|
||||
|
||||
const { items: tagItems, fetchTags, batchUpdateTags } = useTags()
|
||||
|
||||
const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus } = useAuth()
|
||||
const toast = useToast()
|
||||
const { t } = useI18n()
|
||||
@@ -66,6 +74,7 @@ const showScrollTop = ref(false)
|
||||
const previewOpen = ref(false)
|
||||
const previewImage = ref<ImageItem | null>(null)
|
||||
const viewMode = ref<'grid' | 'list'>('grid')
|
||||
const batchTagOpen = ref(false)
|
||||
|
||||
const currentUploadSource = ref('all')
|
||||
const currentStorageBackend = ref('all')
|
||||
@@ -96,7 +105,8 @@ function scrollToTop() {
|
||||
|
||||
async function fetchStats() {
|
||||
stats.value = await $fetch<StatsResponse>('/api/stats', {
|
||||
credentials: 'include'
|
||||
credentials: 'include',
|
||||
query: listQueryParams()
|
||||
})
|
||||
}
|
||||
|
||||
@@ -131,7 +141,8 @@ async function refreshAll() {
|
||||
await Promise.all([
|
||||
fetchStats(),
|
||||
reloadGallery(),
|
||||
loadStorageBackendOptions()
|
||||
loadStorageBackendOptions(),
|
||||
fetchTags()
|
||||
])
|
||||
currentUploadSource.value = activeUploadSource.value
|
||||
currentStorageBackend.value = activeStorageBackend.value
|
||||
@@ -174,11 +185,85 @@ async function handleResetFilters() {
|
||||
currentStorageBackend.value = 'all'
|
||||
try {
|
||||
await resetFilters()
|
||||
await fetchStats()
|
||||
} catch (error: unknown) {
|
||||
handleAuthError(error)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleTagIdsChange(tagIds: number[]) {
|
||||
if (!isAuthenticated.value) return
|
||||
selectedKeys.value = new Set()
|
||||
try {
|
||||
await setActiveTagFilter({ tagIds, untaggedOnly: false })
|
||||
await fetchStats()
|
||||
} catch (error: unknown) {
|
||||
handleAuthError(error)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleTagModeChange(tagMode: 'or' | 'and') {
|
||||
if (!isAuthenticated.value) return
|
||||
try {
|
||||
await setActiveTagFilter({ tagMode })
|
||||
await fetchStats()
|
||||
} catch (error: unknown) {
|
||||
handleAuthError(error)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleUntaggedOnlyChange(untaggedOnly: boolean) {
|
||||
if (!isAuthenticated.value) return
|
||||
selectedKeys.value = new Set()
|
||||
try {
|
||||
await setActiveTagFilter({ untaggedOnly, tagIds: [] })
|
||||
await fetchStats()
|
||||
} catch (error: unknown) {
|
||||
handleAuthError(error)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleTagFilterClick(tagId: number) {
|
||||
if (!isAuthenticated.value) return
|
||||
selectedKeys.value = new Set()
|
||||
try {
|
||||
await toggleTagFilter(tagId)
|
||||
await fetchStats()
|
||||
} catch (error: unknown) {
|
||||
handleAuthError(error)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleUntaggedFilterClick() {
|
||||
if (!isAuthenticated.value) return
|
||||
selectedKeys.value = new Set()
|
||||
try {
|
||||
await setActiveTagFilter({ untaggedOnly: true, tagIds: [] })
|
||||
await fetchStats()
|
||||
} catch (error: unknown) {
|
||||
handleAuthError(error)
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmBatchTags(tagIds: number[], action: 'add' | 'remove') {
|
||||
const keys = Array.from(selectedKeys.value)
|
||||
if (!keys.length || !tagIds.length) return
|
||||
try {
|
||||
await batchUpdateTags(keys, tagIds, action)
|
||||
batchTagOpen.value = false
|
||||
selectedKeys.value = new Set()
|
||||
toast.add({ title: t('tags.batchSuccess'), color: 'success' })
|
||||
await Promise.all([reloadGallery(), fetchStats(), fetchTags(true)])
|
||||
} catch (error: unknown) {
|
||||
handleAuthError(error)
|
||||
toast.add({ title: t('tags.batchFailed'), color: 'error' })
|
||||
}
|
||||
}
|
||||
|
||||
function goToTagSettings() {
|
||||
void navigateTo({ path: '/settings', query: { tab: 'tags' } })
|
||||
}
|
||||
|
||||
function updateSelectedKeys(keys: Set<string>) {
|
||||
selectedKeys.value = keys
|
||||
}
|
||||
@@ -398,16 +483,26 @@ watch(isAuthenticated, async (authed, prev) => {
|
||||
:storage-backend-items="storageBackendItems"
|
||||
:upload-source="currentUploadSource"
|
||||
:upload-source-items="uploadSourceItems"
|
||||
:tag-ids="activeTagIds"
|
||||
:tag-mode="activeTagMode"
|
||||
:untagged-only="activeUntaggedOnly"
|
||||
:tags="tagItems"
|
||||
:view-mode="viewMode"
|
||||
:selected-count="selectedCount"
|
||||
:loading="galleryLoading"
|
||||
:show-batch-delete="true"
|
||||
:show-batch-tags="selectedCount > 0"
|
||||
@update:storage-backend="handleStorageBackendChange"
|
||||
@update:upload-source="handleUploadSourceChange"
|
||||
@update:tag-ids="handleTagIdsChange"
|
||||
@update:tag-mode="handleTagModeChange"
|
||||
@update:untagged-only="handleUntaggedOnlyChange"
|
||||
@update:view-mode="viewMode = $event"
|
||||
@search="handleSearch"
|
||||
@reset="handleResetFilters"
|
||||
@batch-delete="requestBatchDelete"
|
||||
@batch-tags="batchTagOpen = true"
|
||||
@manage-tags="goToTagSettings"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -429,6 +524,7 @@ watch(isAuthenticated, async (authed, prev) => {
|
||||
gallery
|
||||
:show-key="false"
|
||||
show-storage
|
||||
show-tags
|
||||
:items="items"
|
||||
:selected-keys="selectedKeys"
|
||||
:selectable="true"
|
||||
@@ -436,11 +532,14 @@ watch(isAuthenticated, async (authed, prev) => {
|
||||
@update:selected-keys="updateSelectedKeys"
|
||||
@preview="openPreview"
|
||||
@delete="(image) => requestDelete(image.key)"
|
||||
@tag-click="handleTagFilterClick"
|
||||
@untagged-click="handleUntaggedFilterClick"
|
||||
/>
|
||||
|
||||
<GalleryImageList
|
||||
v-else
|
||||
show-storage
|
||||
show-tags
|
||||
:items="items"
|
||||
:selected-keys="selectedKeys"
|
||||
:selectable="true"
|
||||
@@ -448,12 +547,15 @@ watch(isAuthenticated, async (authed, prev) => {
|
||||
@update:selected-keys="updateSelectedKeys"
|
||||
@preview="openPreview"
|
||||
@delete="(image) => requestDelete(image.key)"
|
||||
@tag-click="handleTagFilterClick"
|
||||
@untagged-click="handleUntaggedFilterClick"
|
||||
/>
|
||||
|
||||
<ImagePreviewModal
|
||||
v-model:open="previewOpen"
|
||||
:image="previewImage"
|
||||
show-storage
|
||||
show-tags
|
||||
:deleting="previewImage ? deletingKeys.has(previewImage.key) : false"
|
||||
:allow-delete="true"
|
||||
@delete="requestPreviewDelete"
|
||||
@@ -479,6 +581,13 @@ watch(isAuthenticated, async (authed, prev) => {
|
||||
@confirm="confirmDelete"
|
||||
/>
|
||||
|
||||
<BatchTagModal
|
||||
v-model:open="batchTagOpen"
|
||||
:tags="tagItems"
|
||||
:selected-count="selectedCount"
|
||||
@confirm="confirmBatchTags"
|
||||
/>
|
||||
|
||||
<UButton
|
||||
v-show="showScrollTop"
|
||||
icon="i-lucide-arrow-up"
|
||||
|
||||
+85
-3
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { ImageItem } from '~/types/image'
|
||||
import type { ImageItem, ImageTag } from '~/types/image'
|
||||
import { buildImageBbcode } from '~/utils/image-display'
|
||||
|
||||
const { uploading, progressItems, uploadFiles } = useImageUpload()
|
||||
|
||||
@@ -9,6 +10,9 @@ const {
|
||||
loadPreferences
|
||||
} = useUploadPreferences()
|
||||
|
||||
const { items: tagItems, fetchTags, batchUpdateTags } = useTags()
|
||||
const { recordRecent } = useRecentTags()
|
||||
|
||||
const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus } = useAuth()
|
||||
const toast = useToast()
|
||||
const { t } = useI18n()
|
||||
@@ -17,6 +21,9 @@ const deletingKeys = ref<Set<string>>(new Set())
|
||||
const emptySelection = ref(new Set<string>())
|
||||
const previewOpen = ref(false)
|
||||
const previewImage = ref<ImageItem | null>(null)
|
||||
const tagModalOpen = ref(false)
|
||||
const tagModalImage = ref<ImageItem | null>(null)
|
||||
const batchTagOpen = ref(false)
|
||||
|
||||
const showProgress = computed(
|
||||
() =>
|
||||
@@ -47,7 +54,7 @@ onMounted(async () => {
|
||||
await checkSession()
|
||||
}
|
||||
if (isAuthenticated.value) {
|
||||
await loadPage()
|
||||
await Promise.all([loadPage(), fetchTags()])
|
||||
}
|
||||
})
|
||||
|
||||
@@ -66,6 +73,8 @@ function copyFormatLabel() {
|
||||
return t('copy.url')
|
||||
case 'html':
|
||||
return t('copy.html')
|
||||
case 'bbcode':
|
||||
return t('copy.bbcode')
|
||||
default:
|
||||
return t('copy.markdown')
|
||||
}
|
||||
@@ -108,7 +117,9 @@ async function handleUpload(files: File[]) {
|
||||
? first.url
|
||||
: copyFormat.value === 'html'
|
||||
? first.html
|
||||
: first.markdown
|
||||
: copyFormat.value === 'bbcode'
|
||||
? buildImageBbcode(first.url)
|
||||
: first.markdown
|
||||
if (text) await copyUploadLink(text)
|
||||
}
|
||||
}
|
||||
@@ -148,6 +159,50 @@ function requestPreviewDelete() {
|
||||
if (!previewImage.value) return
|
||||
void handleDelete(previewImage.value.key)
|
||||
}
|
||||
|
||||
function openTagModal(image: ImageItem) {
|
||||
tagModalImage.value = image
|
||||
tagModalOpen.value = true
|
||||
}
|
||||
|
||||
function updateSessionItemTags(key: string, tags: ImageItem['tags']) {
|
||||
sessionItems.value = sessionItems.value.map(item =>
|
||||
item.key === key ? { ...item, tags } : item
|
||||
)
|
||||
if (previewImage.value?.key === key) {
|
||||
previewImage.value = { ...previewImage.value, tags }
|
||||
}
|
||||
if (tagModalImage.value?.key === key) {
|
||||
tagModalImage.value = { ...tagModalImage.value, tags }
|
||||
}
|
||||
}
|
||||
|
||||
function handleTagSaved(tags: ImageTag[]) {
|
||||
if (!tagModalImage.value) return
|
||||
updateSessionItemTags(tagModalImage.value.key, tags)
|
||||
}
|
||||
|
||||
async function confirmBatchTags(tagIds: number[]) {
|
||||
const keys = sessionItems.value.map(item => item.key)
|
||||
if (!keys.length || !tagIds.length) return
|
||||
|
||||
try {
|
||||
await batchUpdateTags(keys, tagIds, 'add')
|
||||
batchTagOpen.value = false
|
||||
recordRecent(tagIds)
|
||||
toast.add({ title: t('tags.batchSuccess'), color: 'success' })
|
||||
await fetchTags(true)
|
||||
const addedTags = tagItems.value.filter(tag => tagIds.includes(tag.id))
|
||||
sessionItems.value = sessionItems.value.map((item) => {
|
||||
const merged = new Map((item.tags ?? []).map(tag => [tag.id, tag]))
|
||||
for (const tag of addedTags) merged.set(tag.id, tag)
|
||||
return { ...item, tags: [...merged.values()] }
|
||||
})
|
||||
} catch (error: unknown) {
|
||||
handleAuthError(error)
|
||||
toast.add({ title: t('tags.batchFailed'), color: 'error' })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -189,6 +244,14 @@ function requestPreviewDelete() {
|
||||
{{ t('upload.sessionTitle') }}
|
||||
<span class="ml-1 text-sm font-normal text-muted">({{ sessionItems.length }})</span>
|
||||
</h2>
|
||||
<UButton
|
||||
icon="i-lucide-tags"
|
||||
variant="outline"
|
||||
color="primary"
|
||||
size="sm"
|
||||
:label="t('tags.batchTagAll')"
|
||||
@click="() => { batchTagOpen = true }"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ImageGrid
|
||||
@@ -196,9 +259,13 @@ function requestPreviewDelete() {
|
||||
:selected-keys="emptySelection"
|
||||
:selectable="false"
|
||||
:show-key="false"
|
||||
:allow-delete="true"
|
||||
show-tag-action
|
||||
:empty-text="t('upload.sessionEmpty')"
|
||||
@update:selected-keys="() => {}"
|
||||
@preview="openPreview"
|
||||
@delete="(image) => handleDelete(image.key)"
|
||||
@edit-tags="openTagModal"
|
||||
/>
|
||||
</section>
|
||||
|
||||
@@ -209,6 +276,21 @@ function requestPreviewDelete() {
|
||||
:allow-delete="true"
|
||||
@delete="requestPreviewDelete"
|
||||
/>
|
||||
|
||||
<ImageTagModal
|
||||
v-model:open="tagModalOpen"
|
||||
:image="tagModalImage"
|
||||
:tags="tagItems"
|
||||
@saved="handleTagSaved"
|
||||
/>
|
||||
|
||||
<BatchTagModal
|
||||
v-model:open="batchTagOpen"
|
||||
:tags="tagItems"
|
||||
:selected-count="sessionItems.length"
|
||||
add-only
|
||||
@confirm="(tagIds) => confirmBatchTags(tagIds)"
|
||||
/>
|
||||
</AppShell>
|
||||
</div>
|
||||
</template>
|
||||
+225
-188
@@ -2,6 +2,7 @@
|
||||
import type { SettingsTab } from '~/types/settings'
|
||||
import { ADMIN_SETTINGS_TABS, USER_SETTINGS_TABS } from '~/types/settings'
|
||||
import { willActivateDomainSeparation } from '~/utils/domain-separation'
|
||||
import SettingsUserPreferencesFields from '~/components/settings/SettingsUserPreferencesFields.vue'
|
||||
|
||||
type SettingSource = 'env' | 'db' | 'none'
|
||||
type WebpQualitySource = 'env' | 'db' | 'default'
|
||||
@@ -51,7 +52,7 @@ const router = useRouter()
|
||||
|
||||
const allowedTabs = computed(() => (isAdmin.value ? ADMIN_SETTINGS_TABS : USER_SETTINGS_TABS))
|
||||
|
||||
const defaultTab = computed<SettingsTab>(() => (isAdmin.value ? 'basic' : 'logs'))
|
||||
const defaultTab = computed<SettingsTab>(() => (isAdmin.value ? 'basic' : 'tags'))
|
||||
|
||||
function parseTab(value: unknown): SettingsTab | null {
|
||||
if (typeof value !== 'string') return null
|
||||
@@ -69,26 +70,53 @@ const activeTab = computed<SettingsTab>({
|
||||
|
||||
const sidebarItems = computed(() => {
|
||||
const labels: Record<SettingsTab, { label: string, icon: string }> = {
|
||||
basic: { label: t('settings.navBasic'), icon: 'i-lucide-sliders-horizontal' },
|
||||
basic: { label: t('settings.navBasic'), icon: 'i-lucide-settings' },
|
||||
domains: { label: t('settings.navDomains'), icon: 'i-lucide-globe' },
|
||||
access: { label: t('settings.navAccess'), icon: 'i-lucide-shield' },
|
||||
tags: { label: t('settings.navTags'), icon: 'i-lucide-tags' },
|
||||
logs: { label: t('settings.navLogs'), icon: 'i-lucide-scroll-text' }
|
||||
}
|
||||
return allowedTabs.value.map(id => ({ id, ...labels[id] }))
|
||||
})
|
||||
|
||||
const tabPageHeader = computed(() => {
|
||||
const headers: Record<SettingsTab, { icon: string, title: string, subtitle: string }> = {
|
||||
basic: {
|
||||
icon: 'i-lucide-settings',
|
||||
title: t('settings.navBasic'),
|
||||
subtitle: t('settings.pageSubtitleBasic')
|
||||
},
|
||||
domains: {
|
||||
icon: 'i-lucide-globe',
|
||||
title: t('settings.navDomains'),
|
||||
subtitle: t('settings.pageSubtitleDomains')
|
||||
},
|
||||
access: {
|
||||
icon: 'i-lucide-shield',
|
||||
title: t('settings.navAccess'),
|
||||
subtitle: t('settings.pageSubtitleAccess')
|
||||
},
|
||||
tags: {
|
||||
icon: 'i-lucide-tags',
|
||||
title: t('settings.navTags'),
|
||||
subtitle: t('settings.pageSubtitleTags')
|
||||
},
|
||||
logs: {
|
||||
icon: 'i-lucide-scroll-text',
|
||||
title: t('settings.navLogs'),
|
||||
subtitle: t('settings.pageSubtitleLogs')
|
||||
}
|
||||
}
|
||||
return headers[activeTab.value]
|
||||
})
|
||||
|
||||
const showSaveBar = computed(() =>
|
||||
isAdmin.value && ['basic', 'domains', 'access'].includes(activeTab.value)
|
||||
)
|
||||
|
||||
const pageSubtitle = computed(() => {
|
||||
if (activeTab.value === 'basic') {
|
||||
return t('settings.pageSubtitleBasic')
|
||||
}
|
||||
return t('settings.pageSubtitle')
|
||||
})
|
||||
|
||||
const checkingRelease = ref(false)
|
||||
const { resetToDefaults: resetUploadPreferences } = useUploadPreferences()
|
||||
const { load: reloadUserSettings } = useUserAutoDeleteSettings()
|
||||
|
||||
const domainSeparationDocUrl = computed(() =>
|
||||
locale.value === 'en'
|
||||
@@ -339,21 +367,33 @@ async function checkLatestRelease(options: { notify?: boolean, refresh?: boolean
|
||||
}
|
||||
|
||||
const loginVerificationOptions = computed(() => [
|
||||
{ value: 'slider' as const, label: t('settings.loginVerificationSlider') },
|
||||
{ value: 'turnstile' as const, label: t('settings.loginVerificationTurnstile') },
|
||||
{ value: 'cap' as const, label: t('settings.loginVerificationCap') }
|
||||
{
|
||||
value: 'slider' as const,
|
||||
label: t('settings.loginVerificationSlider'),
|
||||
description: t('settings.loginVerificationSliderHint')
|
||||
},
|
||||
{
|
||||
value: 'turnstile' as const,
|
||||
label: t('settings.loginVerificationTurnstile'),
|
||||
description: t('settings.loginVerificationTurnstileHint')
|
||||
},
|
||||
{
|
||||
value: 'cap' as const,
|
||||
label: t('settings.loginVerificationCap'),
|
||||
description: t('settings.loginVerificationCapHint')
|
||||
}
|
||||
])
|
||||
|
||||
const loginVerificationHint = computed(() => {
|
||||
switch (loginVerificationMethodDraft.value) {
|
||||
case 'turnstile':
|
||||
return t('settings.loginVerificationTurnstileHint')
|
||||
case 'cap':
|
||||
return t('settings.loginVerificationCapHint')
|
||||
default:
|
||||
return t('settings.loginVerificationSliderHint')
|
||||
function restoreDefaults() {
|
||||
if (activeTab.value === 'basic') {
|
||||
resetUploadPreferences()
|
||||
void reloadUserSettings()
|
||||
}
|
||||
})
|
||||
if (settings.value) {
|
||||
applySettings(settings.value)
|
||||
}
|
||||
toast.add({ title: t('settings.restoredDefaults'), color: 'success' })
|
||||
}
|
||||
|
||||
async function loadPage() {
|
||||
if (isAdmin.value) {
|
||||
@@ -427,23 +467,22 @@ watch(isAdmin, () => {
|
||||
<SettingsSidebar
|
||||
v-model="activeTab"
|
||||
:items="sidebarItems"
|
||||
:title="t('settings.pageTitle')"
|
||||
:subtitle="pageSubtitle"
|
||||
/>
|
||||
|
||||
<div class="flex min-w-0 flex-1 flex-col bg-default">
|
||||
<div
|
||||
class="flex-1"
|
||||
:class="activeTab === 'logs' ? '' : 'p-4 sm:p-5'"
|
||||
>
|
||||
<div class="flex-1 p-5 text-sm sm:p-6">
|
||||
<SettingsPageHeader
|
||||
v-if="activeTab !== 'logs'"
|
||||
:icon="tabPageHeader.icon"
|
||||
:title="tabPageHeader.title"
|
||||
:subtitle="tabPageHeader.subtitle"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="activeTab === 'basic' && isAdmin"
|
||||
>
|
||||
<SettingsPanel v-if="settings">
|
||||
<SettingsSection
|
||||
:title="t('settings.featureToggles')"
|
||||
:hint="t('settings.featureTogglesHint')"
|
||||
>
|
||||
<SettingsSection :title="t('settings.featureToggles')">
|
||||
<SettingsGroup>
|
||||
<SettingsToggleRow
|
||||
v-model="allowRegistrationDraft"
|
||||
@@ -455,31 +494,17 @@ watch(isAdmin, () => {
|
||||
|
||||
<SettingsUserPreferencesFields />
|
||||
|
||||
<SettingsSection
|
||||
:title="t('settings.systemInfo')"
|
||||
:hint="t('settings.systemInfoHint')"
|
||||
>
|
||||
<template
|
||||
v-if="isAdmin"
|
||||
#action
|
||||
>
|
||||
<UButton
|
||||
:label="t('settings.checkUpdate')"
|
||||
icon="i-lucide-refresh-cw"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
size="sm"
|
||||
class="shrink-0"
|
||||
:loading="checkingRelease"
|
||||
@click="checkLatestRelease({ notify: true, refresh: true })"
|
||||
<SettingsSection :title="t('settings.systemInfo')">
|
||||
<SettingsGroup>
|
||||
<SettingsSystemInfo
|
||||
:app-version="settings.appVersion"
|
||||
:update-available="!!releaseCheck?.updateAvailable"
|
||||
:latest-version="releaseCheck?.latestVersion ?? null"
|
||||
:release-url="releaseCheck?.releaseUrl ?? null"
|
||||
:checking="checkingRelease"
|
||||
@check-update="checkLatestRelease({ notify: true, refresh: true })"
|
||||
/>
|
||||
</template>
|
||||
<SettingsSystemInfo
|
||||
:app-version="settings.appVersion"
|
||||
:update-available="!!releaseCheck?.updateAvailable"
|
||||
:latest-version="releaseCheck?.latestVersion ?? null"
|
||||
:release-url="releaseCheck?.releaseUrl ?? null"
|
||||
/>
|
||||
</SettingsGroup>
|
||||
</SettingsSection>
|
||||
</SettingsPanel>
|
||||
<div
|
||||
@@ -498,50 +523,60 @@ watch(isAdmin, () => {
|
||||
>
|
||||
<SettingsPanel v-if="settings">
|
||||
<SettingsSection :title="t('settings.domainSettings')">
|
||||
<p
|
||||
v-if="settings.runtime.currentOrigin"
|
||||
class="mb-3 pl-3 text-xs text-primary"
|
||||
>
|
||||
{{ t('settings.runtimeDetected', { url: settings.runtime.currentOrigin }) }}
|
||||
</p>
|
||||
<SettingsGroup>
|
||||
<div class="divide-y divide-default">
|
||||
<p
|
||||
v-if="settings.runtime.currentOrigin"
|
||||
class="py-4 text-xs text-primary"
|
||||
>
|
||||
<span class="rounded-lg bg-primary/5 px-3 py-2 inline-block">
|
||||
{{ t('settings.runtimeDetected', { url: settings.runtime.currentOrigin }) }}
|
||||
</span>
|
||||
</p>
|
||||
<SettingsToggleRow
|
||||
:model-value="domainSeparationDraft"
|
||||
:title="t('setup.domainSeparation')"
|
||||
:hint="t('setup.domainSeparationHint')"
|
||||
@update:model-value="onDomainSeparationDraftChange"
|
||||
/>
|
||||
</SettingsGroup>
|
||||
<div
|
||||
v-if="domainSeparationDraft"
|
||||
class="py-4"
|
||||
>
|
||||
<div class="flex flex-col gap-3 rounded-xl border border-warning/30 bg-warning/5 px-4 py-3 sm:flex-row sm:items-start">
|
||||
<UIcon
|
||||
name="i-lucide-triangle-alert"
|
||||
class="mt-0.5 size-4 shrink-0 text-warning"
|
||||
/>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-sm font-medium text-warning">
|
||||
{{ t('settings.domainSeparationProxyTitle') }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs leading-relaxed text-warning/90">
|
||||
{{ t('settings.domainSeparationProxyBody') }}
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
:href="domainSeparationDocUrl"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="shrink-0 text-xs text-primary hover:underline sm:pt-0.5"
|
||||
>
|
||||
{{ t('setup.domainSeparationProxyExample') }} →
|
||||
</a>
|
||||
</div>
|
||||
<UAlert
|
||||
v-if="settings.runtime.hostRole === 'unknown'"
|
||||
color="warning"
|
||||
variant="subtle"
|
||||
icon="i-lucide-triangle-alert"
|
||||
:title="t('settings.hostRoleUnknown')"
|
||||
class="mt-4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</SettingsSection>
|
||||
|
||||
<p
|
||||
v-if="domainSeparationDraft"
|
||||
class="rounded-xl border border-warning/25 bg-warning/5 px-4 py-3 text-xs leading-relaxed text-warning"
|
||||
>
|
||||
{{ t('setup.domainSeparationProxyHint') }}
|
||||
<a
|
||||
:href="domainSeparationDocUrl"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-primary hover:underline"
|
||||
>
|
||||
{{ t('setup.domainSeparationProxyExample') }}
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<UAlert
|
||||
v-if="domainSeparationDraft && settings.runtime.hostRole === 'unknown'"
|
||||
color="warning"
|
||||
variant="subtle"
|
||||
icon="i-lucide-triangle-alert"
|
||||
:title="t('settings.hostRoleUnknown')"
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<SettingsSection
|
||||
:title="t('settings.pathAndLink')"
|
||||
:hint="t('settings.pathAndLinkHint')"
|
||||
>
|
||||
<SettingsSection :title="t('settings.pathAndLink')">
|
||||
<SettingsGroup>
|
||||
<SettingsToggleRow
|
||||
:model-value="hideFolderInUrlDraft"
|
||||
@@ -590,33 +625,34 @@ watch(isAdmin, () => {
|
||||
</SettingsGroup>
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection :title="t('settings.imageBaseUrl')">
|
||||
<SettingsSection :title="t('settings.imageDomainSection')">
|
||||
<div
|
||||
v-if="domainSeparationDraft"
|
||||
class="grid gap-4 sm:grid-cols-2"
|
||||
class="grid gap-4 sm:grid-cols-2 sm:divide-x sm:divide-default"
|
||||
>
|
||||
<SettingsGroup>
|
||||
<div class="space-y-3 px-4 py-4 sm:px-5">
|
||||
<div class="space-y-3 py-4 sm:pr-4">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('settings.siteBaseUrl') }}
|
||||
</p>
|
||||
<UBadge
|
||||
:color="sourceBadge(settings.siteBaseUrlSource).color"
|
||||
color="success"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceBadge(settings.siteBaseUrlSource).label }}
|
||||
{{ t('settings.badgeEnabled') }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<p class="text-xs leading-relaxed text-muted">
|
||||
{{ t('settings.siteBaseUrlHint') }}
|
||||
{{ t('settings.siteBaseUrlRoleHint') }}
|
||||
</p>
|
||||
<div class="flex gap-2">
|
||||
<UInput
|
||||
v-model="siteBaseUrlDraft"
|
||||
size="sm"
|
||||
:placeholder="t('settings.siteBaseUrlPlaceholder')"
|
||||
class="min-w-0 flex-1 font-mono text-sm"
|
||||
class="min-w-0 flex-1 font-mono"
|
||||
/>
|
||||
<UButton
|
||||
v-if="settings.runtime.currentOrigin"
|
||||
@@ -630,7 +666,7 @@ watch(isAdmin, () => {
|
||||
</div>
|
||||
<p
|
||||
v-if="settings.effectiveSiteBaseUrl"
|
||||
class="truncate text-xs text-muted"
|
||||
class="truncate rounded-lg bg-muted/30 px-3 py-2 text-xs text-muted"
|
||||
:title="settings.effectiveSiteBaseUrl"
|
||||
>
|
||||
{{ t('settings.siteBaseUrlActive', { url: settings.effectiveSiteBaseUrl }) }}
|
||||
@@ -639,30 +675,31 @@ watch(isAdmin, () => {
|
||||
</SettingsGroup>
|
||||
|
||||
<SettingsGroup>
|
||||
<div class="space-y-3 px-4 py-4 sm:px-5">
|
||||
<div class="space-y-3 py-4 sm:pl-4">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('settings.imageBaseUrl') }}
|
||||
</p>
|
||||
<UBadge
|
||||
:color="sourceBadge(settings.imageBaseUrlSource).color"
|
||||
color="success"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceBadge(settings.imageBaseUrlSource).label }}
|
||||
{{ t('settings.badgeEnabled') }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<p class="text-xs leading-relaxed text-muted">
|
||||
{{ t('settings.imageBaseUrlHint') }}
|
||||
{{ t('settings.imageBaseUrlRoleHint') }}
|
||||
</p>
|
||||
<UInput
|
||||
v-model="imageBaseUrlDraft"
|
||||
size="sm"
|
||||
:placeholder="t('settings.imageBaseUrlPlaceholder')"
|
||||
class="w-full font-mono text-sm"
|
||||
class="w-full font-mono"
|
||||
/>
|
||||
<p
|
||||
v-if="settings.effectiveImageBaseUrl"
|
||||
class="truncate text-xs text-muted"
|
||||
class="truncate rounded-lg bg-muted/30 px-3 py-2 text-xs text-muted"
|
||||
:title="settings.effectiveImageBaseUrl"
|
||||
>
|
||||
{{ t('settings.imageBaseUrlActive', { url: settings.effectiveImageBaseUrl }) }}
|
||||
@@ -672,7 +709,7 @@ watch(isAdmin, () => {
|
||||
</div>
|
||||
|
||||
<SettingsGroup v-else>
|
||||
<div class="space-y-3 px-4 py-4 sm:px-5">
|
||||
<div class="space-y-3 py-4">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('settings.imageBaseUrl') }}
|
||||
@@ -698,12 +735,13 @@ watch(isAdmin, () => {
|
||||
</p>
|
||||
<UInput
|
||||
v-model="imageBaseUrlDraft"
|
||||
size="sm"
|
||||
:placeholder="t('settings.imageBaseUrlPlaceholder')"
|
||||
class="w-full font-mono text-sm"
|
||||
class="w-full font-mono"
|
||||
/>
|
||||
<p
|
||||
v-if="settings.effectiveImageBaseUrl"
|
||||
class="truncate text-xs text-muted"
|
||||
class="truncate rounded-lg bg-muted/30 px-3 py-2 text-xs text-muted"
|
||||
:title="settings.effectiveImageBaseUrl"
|
||||
>
|
||||
{{ t('settings.imageBaseUrlActive', { url: settings.effectiveImageBaseUrl }) }}
|
||||
@@ -728,98 +766,89 @@ watch(isAdmin, () => {
|
||||
class="settings-referer-section"
|
||||
>
|
||||
<SettingsPanel v-if="settings">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10">
|
||||
<UIcon
|
||||
name="i-lucide-shield"
|
||||
class="size-4 text-primary"
|
||||
/>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<h2 class="text-sm font-semibold text-highlighted">
|
||||
{{ t('settings.accessControl') }}
|
||||
</h2>
|
||||
<UBadge
|
||||
:color="refererDraft.trim() ? 'success' : 'neutral'"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ refererDraft.trim() ? t('settings.refererEnabled') : t('settings.refererUnrestricted') }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<p class="mt-1 text-xs leading-relaxed text-muted">
|
||||
{{ t('settings.refererHint') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<SettingsPlainSection
|
||||
:title="t('settings.refererProtection')"
|
||||
:hint="t('settings.refererHint')"
|
||||
>
|
||||
<template #badge>
|
||||
<UBadge
|
||||
:color="refererDraft.trim() ? 'success' : 'neutral'"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ refererDraft.trim() ? t('settings.refererEnabled') : t('settings.refererUnrestricted') }}
|
||||
</UBadge>
|
||||
</template>
|
||||
|
||||
<div class="mt-5 grid gap-5 lg:grid-cols-[minmax(0,1fr)_12rem] xl:grid-cols-[minmax(0,1fr)_14rem]">
|
||||
<div class="min-w-0 space-y-2">
|
||||
<label class="text-sm font-medium text-highlighted">
|
||||
{{ t('settings.refererDomainsLabel') }}
|
||||
</label>
|
||||
<UTextarea
|
||||
v-model="refererDraft"
|
||||
:placeholder="t('settings.refererPlaceholder')"
|
||||
:rows="7"
|
||||
:autoresize="false"
|
||||
class="settings-referer-field w-full font-mono text-sm"
|
||||
/>
|
||||
<div class="flex gap-2 rounded-lg border border-info/20 bg-info/5 px-3 py-2.5 text-xs leading-relaxed text-muted">
|
||||
<UIcon
|
||||
name="i-lucide-info"
|
||||
class="mt-0.5 size-3.5 shrink-0 text-info"
|
||||
<div class="grid gap-5 lg:grid-cols-[minmax(0,1fr)_12rem] xl:grid-cols-[minmax(0,1fr)_14rem]">
|
||||
<div class="min-w-0 space-y-3">
|
||||
<label class="block text-sm font-medium text-highlighted">
|
||||
{{ t('settings.refererDomainsLabel') }}
|
||||
</label>
|
||||
<UTextarea
|
||||
v-model="refererDraft"
|
||||
size="sm"
|
||||
:placeholder="t('settings.refererPlaceholder')"
|
||||
:rows="7"
|
||||
:autoresize="false"
|
||||
class="settings-referer-field w-full font-mono"
|
||||
/>
|
||||
<span>{{ t('settings.refererTip') }}</span>
|
||||
<div class="flex gap-2 rounded-lg border border-info/20 bg-info/5 px-3 py-2.5 text-xs leading-relaxed text-muted">
|
||||
<UIcon
|
||||
name="i-lucide-info"
|
||||
class="mt-0.5 size-3.5 shrink-0 text-info"
|
||||
/>
|
||||
<span>{{ t('settings.refererTip') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3 border-l border-default pl-4">
|
||||
<div>
|
||||
<p class="text-xs font-medium text-highlighted">
|
||||
{{ t('settings.refererExamplesTitle') }}
|
||||
</p>
|
||||
<p class="mt-2 font-mono text-xs text-muted">
|
||||
{{ t('settings.refererExamplesSample') }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-medium text-highlighted">
|
||||
{{ t('settings.refererScenarioTitle') }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs leading-relaxed text-muted">
|
||||
{{ t('settings.refererScenarioDesc') }}
|
||||
</p>
|
||||
<div class="space-y-4 border-l border-default pl-4">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('settings.refererExamplesTitle') }}
|
||||
</p>
|
||||
<p class="mt-2 font-mono text-xs text-muted">
|
||||
{{ t('settings.refererExamplesSample') }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('settings.refererScenarioTitle') }}
|
||||
</p>
|
||||
<ul class="mt-2 list-disc space-y-1 pl-4 text-xs leading-relaxed text-muted">
|
||||
<li>{{ t('settings.refererScenario1') }}</li>
|
||||
<li>{{ t('settings.refererScenario2') }}</li>
|
||||
<li>{{ t('settings.refererScenario3') }}</li>
|
||||
<li>{{ t('settings.refererScenario4') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SettingsPlainSection>
|
||||
|
||||
<SettingsSection
|
||||
:title="t('settings.loginVerification')"
|
||||
:hint="t('settings.loginVerificationHint')"
|
||||
>
|
||||
<SettingsGroup>
|
||||
<div class="space-y-4 px-4 py-4 sm:px-5">
|
||||
<URadioGroup
|
||||
v-model="loginVerificationMethodDraft"
|
||||
:items="loginVerificationOptions"
|
||||
/>
|
||||
<p class="text-xs leading-relaxed text-muted">
|
||||
{{ loginVerificationHint }}
|
||||
</p>
|
||||
<div
|
||||
v-if="loginVerificationMethodDraft === 'turnstile'"
|
||||
class="space-y-3 rounded-xl border border-default bg-muted/20 p-4"
|
||||
>
|
||||
<SettingsRadioGroup
|
||||
v-model="loginVerificationMethodDraft"
|
||||
:items="loginVerificationOptions"
|
||||
/>
|
||||
<div
|
||||
v-if="loginVerificationMethodDraft === 'turnstile'"
|
||||
class="py-4"
|
||||
>
|
||||
<div class="space-y-3 rounded-xl border border-default bg-muted/20 p-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium text-highlighted">
|
||||
{{ t('settings.turnstileSiteKey') }}
|
||||
</label>
|
||||
<UInput
|
||||
v-model="turnstileSiteKeyDraft"
|
||||
size="sm"
|
||||
:placeholder="t('settings.turnstileSiteKeyPlaceholder')"
|
||||
class="w-full font-mono text-sm"
|
||||
class="w-full font-mono"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
@@ -829,23 +858,27 @@ watch(isAdmin, () => {
|
||||
<UInput
|
||||
v-model="turnstileSecretKeyDraft"
|
||||
type="password"
|
||||
size="sm"
|
||||
:placeholder="t('settings.turnstileSecretKeyPlaceholder')"
|
||||
class="w-full font-mono text-sm"
|
||||
class="w-full font-mono"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="loginVerificationMethodDraft === 'cap'"
|
||||
class="space-y-3 rounded-xl border border-default bg-muted/20 p-4"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="loginVerificationMethodDraft === 'cap'"
|
||||
class="py-4"
|
||||
>
|
||||
<div class="space-y-3 rounded-xl border border-default bg-muted/20 p-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium text-highlighted">
|
||||
{{ t('settings.capApiEndpoint') }}
|
||||
</label>
|
||||
<UInput
|
||||
v-model="capApiEndpointDraft"
|
||||
size="sm"
|
||||
:placeholder="t('settings.capApiEndpointPlaceholder')"
|
||||
class="w-full font-mono text-sm"
|
||||
class="w-full font-mono"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
@@ -855,8 +888,9 @@ watch(isAdmin, () => {
|
||||
<UInput
|
||||
v-model="capSecretDraft"
|
||||
type="password"
|
||||
size="sm"
|
||||
:placeholder="t('settings.capSecretKeyPlaceholder')"
|
||||
class="w-full font-mono text-sm"
|
||||
class="w-full font-mono"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -875,6 +909,8 @@ watch(isAdmin, () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SettingsTagsPanel v-else-if="activeTab === 'tags'" />
|
||||
|
||||
<SettingsLogsPanel v-else-if="activeTab === 'logs'" />
|
||||
</div>
|
||||
|
||||
@@ -883,6 +919,7 @@ watch(isAdmin, () => {
|
||||
:has-changes="hasServerChanges"
|
||||
:saving="savingServer"
|
||||
@save="saveServerSettings"
|
||||
@restore="restoreDefaults"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -44,6 +44,17 @@ export interface ImageItem {
|
||||
}
|
||||
/** 上传来源：网页或 API（来自活动日志） */
|
||||
uploadSource?: 'web' | 'api'
|
||||
/** 图片标签 */
|
||||
tags?: ImageTag[]
|
||||
}
|
||||
|
||||
export interface ImageTag {
|
||||
id: number
|
||||
name: string
|
||||
color: string
|
||||
imageCount?: number
|
||||
createdAt?: string
|
||||
lastUsedAt?: string | null
|
||||
}
|
||||
|
||||
export interface UploadErrorItem {
|
||||
|
||||
+5
-2
@@ -1,5 +1,6 @@
|
||||
export type LogAction = 'upload' | 'delete'
|
||||
export type LogSource = 'web' | 'api'
|
||||
export type LogAction = 'upload' | 'delete' | 'login' | 'edit' | 'settings' | 'tags'
|
||||
export type LogSource = 'web' | 'api' | 'admin'
|
||||
export type LogStatus = 'success' | 'failure'
|
||||
|
||||
export interface ActivityLogStorage {
|
||||
id: string
|
||||
@@ -18,6 +19,8 @@ export interface ActivityLogItem {
|
||||
userId: number | null
|
||||
username: string | null
|
||||
storage: ActivityLogStorage | null
|
||||
ipAddress: string | null
|
||||
status: LogStatus
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
export type SettingsTab = 'basic' | 'domains' | 'access' | 'logs'
|
||||
export type SettingsTab = 'basic' | 'domains' | 'access' | 'tags' | 'logs'
|
||||
|
||||
export const ADMIN_SETTINGS_TABS: SettingsTab[] = ['basic', 'domains', 'access', 'logs']
|
||||
export const ADMIN_SETTINGS_TABS: SettingsTab[] = ['basic', 'domains', 'access', 'tags', 'logs']
|
||||
|
||||
export const USER_SETTINGS_TABS: SettingsTab[] = ['logs']
|
||||
export const USER_SETTINGS_TABS: SettingsTab[] = ['tags', 'logs']
|
||||
@@ -22,3 +22,7 @@ export function formatImageDimensions(width: number | null, height: number | nul
|
||||
if (!width || !height) return null
|
||||
return `${width} × ${height} px`
|
||||
}
|
||||
|
||||
export function buildImageBbcode(url: string): string {
|
||||
return `[img]${url}[/img]`
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
export const TAG_COLOR_PRESETS = [
|
||||
'#22c55e',
|
||||
'#3b82f6',
|
||||
'#f59e0b',
|
||||
'#ef4444',
|
||||
'#8b5cf6',
|
||||
'#06b6d4',
|
||||
'#ec4899',
|
||||
'#84cc16',
|
||||
'#f97316',
|
||||
'#6366f1',
|
||||
'#14b8a6',
|
||||
'#64748b'
|
||||
] as const
|
||||
|
||||
export const TAG_COLOR_CANDIDATE_COUNT = 8
|
||||
export const TAG_COLOR_EDIT_CANDIDATE_COUNT = 3
|
||||
|
||||
export function defaultTagColor(tagId: number): string {
|
||||
return TAG_COLOR_PRESETS[tagId % TAG_COLOR_PRESETS.length]!
|
||||
}
|
||||
|
||||
function normalizeHexColor(color: string | null | undefined): string | null {
|
||||
if (!color) return null
|
||||
const trimmed = color.trim().toLowerCase()
|
||||
if (!trimmed) return null
|
||||
const withHash = trimmed.startsWith('#') ? trimmed : `#${trimmed}`
|
||||
return /^#[0-9a-f]{6}$/.test(withHash) ? withHash : null
|
||||
}
|
||||
|
||||
/** 解析标签展示色，无效时回退到默认色 */
|
||||
export function resolveTagHexColor(
|
||||
color: string | null | undefined,
|
||||
fallback?: string
|
||||
): string {
|
||||
return normalizeHexColor(color) ?? fallback ?? TAG_COLOR_PRESETS[0]!
|
||||
}
|
||||
|
||||
export function usedPresetColorSet(usedColors: (string | null | undefined)[]): Set<string> {
|
||||
const used = new Set<string>()
|
||||
for (const color of usedColors) {
|
||||
const normalized = normalizeHexColor(color)
|
||||
if (!normalized) continue
|
||||
if (TAG_COLOR_PRESETS.some(preset => preset.toLowerCase() === normalized)) {
|
||||
used.add(normalized)
|
||||
}
|
||||
}
|
||||
return used
|
||||
}
|
||||
|
||||
function shuffleColors<T extends string>(colors: readonly T[]): T[] {
|
||||
const items = [...colors]
|
||||
for (let index = items.length - 1; index > 0; index--) {
|
||||
const swapIndex = Math.floor(Math.random() * (index + 1))
|
||||
const current = items[index]!
|
||||
items[index] = items[swapIndex]!
|
||||
items[swapIndex] = current
|
||||
}
|
||||
return items
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增标签时的备选色：优先从未占用预设中随机取满 count 个；
|
||||
* 不足时用其余预设随机补足（保证始终有 7～8 个可选项）。
|
||||
*/
|
||||
export function pickTagColorCandidates(
|
||||
usedColors: (string | null | undefined)[],
|
||||
count = TAG_COLOR_CANDIDATE_COUNT
|
||||
): string[] {
|
||||
const used = usedPresetColorSet(usedColors)
|
||||
const unused = shuffleColors(TAG_COLOR_PRESETS.filter(preset => !used.has(preset.toLowerCase())))
|
||||
const usedPresets = shuffleColors(TAG_COLOR_PRESETS.filter(preset => used.has(preset.toLowerCase())))
|
||||
|
||||
const candidates: string[] = []
|
||||
for (const color of unused) {
|
||||
if (candidates.length >= count) break
|
||||
candidates.push(color.toLowerCase())
|
||||
}
|
||||
for (const color of usedPresets) {
|
||||
if (candidates.length >= count) break
|
||||
candidates.push(color.toLowerCase())
|
||||
}
|
||||
|
||||
return candidates.length > 0 ? candidates : shuffleColors(TAG_COLOR_PRESETS).slice(0, count).map(c => c.toLowerCase())
|
||||
}
|
||||
|
||||
/** 从备选色中优先选未占用色作为默认；若均已占用则随机选一 */
|
||||
export function pickDefaultTagColorFromCandidates(
|
||||
candidates: string[],
|
||||
usedColors: (string | null | undefined)[]
|
||||
): string {
|
||||
if (!candidates.length) {
|
||||
return pickRandomUnusedTagColor(usedColors)
|
||||
}
|
||||
const used = usedPresetColorSet(usedColors)
|
||||
const unused = candidates.filter(color => !used.has(color.toLowerCase()))
|
||||
const pool = unused.length > 0 ? unused : candidates
|
||||
return pool[Math.floor(Math.random() * pool.length)]!.toLowerCase()
|
||||
}
|
||||
|
||||
/** 从未被占用的预设色中随机取一色；若预设色均已占用则退回全量随机 */
|
||||
export function pickRandomUnusedTagColor(usedColors: (string | null | undefined)[]): string {
|
||||
const used = usedPresetColorSet(usedColors)
|
||||
const available = TAG_COLOR_PRESETS.filter(preset => !used.has(preset.toLowerCase()))
|
||||
const pool = available.length > 0 ? available : TAG_COLOR_PRESETS
|
||||
return pool[Math.floor(Math.random() * pool.length)]!.toLowerCase()
|
||||
}
|
||||
|
||||
/** 颜色选择器展示的预设：排除已被其他标签占用的颜色，但保留当前选中色 */
|
||||
export function visibleTagColorPresets(
|
||||
usedColors: (string | null | undefined)[],
|
||||
currentColor?: string | null
|
||||
): readonly string[] {
|
||||
const used = usedPresetColorSet(usedColors)
|
||||
const current = normalizeHexColor(currentColor)
|
||||
return TAG_COLOR_PRESETS.filter((preset) => {
|
||||
const lower = preset.toLowerCase()
|
||||
return !used.has(lower) || lower === current
|
||||
})
|
||||
}
|
||||
|
||||
export function tagPillStyle(color: string | null | undefined, selected = false, fallback?: string) {
|
||||
const hex = resolveTagHexColor(color, fallback)
|
||||
if (selected) {
|
||||
return {
|
||||
backgroundColor: hex,
|
||||
borderColor: hex,
|
||||
color: '#ffffff'
|
||||
}
|
||||
}
|
||||
return {
|
||||
borderColor: `${hex}55`,
|
||||
backgroundColor: `${hex}18`,
|
||||
color: hex
|
||||
}
|
||||
}
|
||||
@@ -2,6 +2,8 @@
|
||||
|
||||
PicHost exposes REST endpoints and a Twikoo-compatible upload. After sign-in, open **API** in the nav: a sidebar lists endpoints and token controls, the center shows parameters and copyable cURL, and the right panel supports **live debugging**.
|
||||
|
||||
|
||||
|
||||
## Authentication
|
||||
|
||||
All REST calls use:
|
||||
@@ -28,9 +30,12 @@ Upload one or more images via `image`; also accepts `file`, `files`. Stored unde
|
||||
```bash
|
||||
curl -X POST "https://admin.example.com/api/images/upload" \
|
||||
-H "Auth-Token: YOUR_TOKEN" \
|
||||
-F "image=@./demo.png"
|
||||
-F "image=@./demo.png" \
|
||||
-F 'tagIds=[1,2]'
|
||||
```
|
||||
|
||||
Optional form field `tagIds`: JSON array string or repeated fields. Tags do **not** change storage paths under `images/`.
|
||||
|
||||
### 2. List images
|
||||
|
||||
`GET /api/images`
|
||||
@@ -42,6 +47,8 @@ curl "https://admin.example.com/api/images?limit=20&page=1" \
|
||||
-H "Auth-Token: YOUR_TOKEN"
|
||||
```
|
||||
|
||||
Optional query: `tagIds` (comma-separated, OR by default), `tagMode=and`, `untagged=1`. Each item includes a `tags` array.
|
||||
|
||||
### 3. Search images
|
||||
|
||||
`GET /api/images/search`
|
||||
@@ -77,6 +84,27 @@ curl -X POST "https://admin.example.com/api/images/batch-delete" \
|
||||
-d '{"keys":["images/2026/08/a.webp","images/2026/08/b.webp"]}'
|
||||
```
|
||||
|
||||
### 6. Tags
|
||||
|
||||
| Method | Path | Description |
|
||||
| ------ | ---- | ----------- |
|
||||
| `GET` | `/api/tags` | List current user’s tags |
|
||||
| `POST` | `/api/tags` | Create `{ "name": "work", "color": "#22c55e" }` |
|
||||
| `PATCH` | `/api/tags/:id` | Rename or recolor |
|
||||
| `DELETE` | `/api/tags/:id` | Delete tag (images remain) |
|
||||
| `POST` | `/api/tags/merge` | Merge tags into a target |
|
||||
|
||||
### 7. Image tags
|
||||
|
||||
| Method | Path | Description |
|
||||
| ------ | ---- | ----------- |
|
||||
| `POST` | `/api/images/tags` | Add tags to an image |
|
||||
| `PATCH` | `/api/images/tags` | Replace tag set |
|
||||
| `DELETE` | `/api/images/tags` | Remove one tag |
|
||||
| `POST` | `/api/images/batch-tags` | Batch add/remove |
|
||||
|
||||
`GET /api/stats` accepts the same tag filter query params as the list API.
|
||||
|
||||
## Errors
|
||||
|
||||
REST responses are JSON with `code` and `message` (`UNAUTHORIZED`, `FORBIDDEN`, `INVALID_REQUEST`, etc.). Twikoo uses EasyImage-compatible JSON.
|
||||
|
||||
@@ -4,6 +4,24 @@ Version history and notable changes. The full log is also in the repo root [CHAN
|
||||
|
||||
---
|
||||
|
||||
## [1.4.0] — 2026-09-09
|
||||
|
||||
### Added
|
||||
|
||||
- **Tags**: per-user colored tags; Settings management; batch tagging on upload/gallery; OR / AND gallery filters
|
||||
- **Activity log**: login, delete, settings, tag operations; date and user filters
|
||||
- **API**: tag and tagging endpoints; upload `tagIds`; list/stats tag filters
|
||||
|
||||
### Docs
|
||||
|
||||
- Screenshots and README updated for v1.4 UI
|
||||
|
||||
## [1.3.0] — 2026-09-07
|
||||
|
||||
### Added
|
||||
|
||||
- **Site backup / restore / cross-backend sync** with job center; CLI `backup-export`, `backup-restore`, `storage-sync`
|
||||
|
||||
## [1.2.8] — 2026-09-04
|
||||
|
||||
### Improved
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
# Environment variables
|
||||
|
||||
Configure PicHost via environment variables (Docker / `.env`) or the in-app **Settings** page. Admins use **Settings** (`/settings`) with sidebar sections **Basic**, **Domains & paths**, **Access control**, and **Activity log**. Most values prefer **SQLite** when saved; some env vars override or lock UI editing.
|
||||
Configure PicHost via environment variables (Docker / `.env`) or the in-app **Settings** page. Admins use **Settings** (`/settings`) with sidebar sections **Basic**, **Domains & paths**, **Access control**, **Tag management**, and **Activity log**. Most values prefer **SQLite** when saved; some env vars override or lock UI editing.
|
||||
|
||||
|
||||
|
||||
## Priority overview
|
||||
|
||||
|
||||
@@ -37,7 +37,9 @@ See `docker-compose.yml` in the repository.
|
||||
- **Create admin** — username, password, optional registration and dual-domain options.
|
||||
- **Restore backup** — upload a `.phost.tar.gz` full-site package (replaces current data; re-enter cloud storage secrets after restore).
|
||||
3. (Optional) Configure site URL, image URL, Referer rules — see [Environment variables](./configuration.md) and [Dual-domain separation](./domain-separation.md).
|
||||
4. Upload from the home page; use the top nav for **Gallery**, **Storage** (admin), **Settings**, and **API**.
|
||||
4. Upload from the home page via **drag-and-drop, file picker, or Ctrl+V**; copy direct/Markdown/HTML/BBCode links from the results panel and use **batch tagging**. Top nav: **Gallery**, **Storage** (admin), **Settings**, **API**.
|
||||
|
||||
|
||||
|
||||
| Create admin | Restore from backup |
|
||||
| :----------: | :-----------------: |
|
||||
|
||||
@@ -12,11 +12,23 @@ Welcome to the PicHost user guide. This site is the single source of truth; the
|
||||
|
||||
## Screenshots
|
||||
|
||||
**main** has no public demo. Below are current product screenshots (v1.3.0+).
|
||||
**main** has no public demo. Below are current product screenshots (v1.4.0+).
|
||||
|
||||
| API | Gallery (detail) |
|
||||
| :-: | :--------------: |
|
||||
|  |  |
|
||||
| Upload | Batch tagging |
|
||||
| :----: | :-----------: |
|
||||
|  |  |
|
||||
|
||||
| Upload results (tagged) | API |
|
||||
| :---------------------: | :-: |
|
||||
|  |  |
|
||||
|
||||
| Gallery (grid) | Gallery (list) |
|
||||
| :------------: | :------------: |
|
||||
|  |  |
|
||||
|
||||
| Image detail | Tag management |
|
||||
| :----------: | :------------: |
|
||||
|  |  |
|
||||
|
||||
| Storage | Settings |
|
||||
| :-----: | :-------: |
|
||||
|
||||
@@ -52,4 +52,4 @@ npm run docs:build
|
||||
npm run docs:preview
|
||||
```
|
||||
|
||||
Sources live in `docs-site/`; screenshot sources are in `docs/screenshots/` (including `login.png`, `setup.png`, `setup-restore.png`, etc.), copied to `docs-site/public/screenshots/` before build. Live docs: <https://o96u.github.io/PicHost/>
|
||||
Sources live in `docs-site/`; screenshot sources are in `docs/screenshots/` (including `upload.png`, `gallery.png`, `tags.png`, `api.png`, `storage.png`, `settings.png`, `logs.png`, `setup.png`, etc.), copied to `docs-site/public/screenshots/` before build. Live docs: <https://o96u.github.io/PicHost/>
|
||||
@@ -18,6 +18,8 @@ PicHost supports **local disk** and **S3-compatible object storage** (Cloudflare
|
||||
|
||||
All **keys** start with `images/`. The upload API does **not** accept a `folder` parameter.
|
||||
|
||||
**Classification** uses per-user **tags** in SQLite (`tags` / `image_tags`); disk paths are unchanged. See [API](./api.md#6-tags).
|
||||
|
||||
## Adding a backend
|
||||
|
||||
1. Sign in as admin → **Storage** → **Add backend**.
|
||||
@@ -54,7 +56,9 @@ Copied links use **IMAGE_BASE_URL**. “Hide folder prefix” may shorten URLs;
|
||||
## Usage & gallery filter
|
||||
|
||||
- Per-backend usage on the Storage page
|
||||
- Gallery filters by **storage backend** and **upload source**; grid/list view toggle; click a thumbnail for the detail modal (dimensions, storage path, link formats)
|
||||
- Gallery filters by **storage backend**, **upload source**, and **tags**; grid/list view toggle; click a thumbnail for the detail modal (dimensions, storage path, tags, link formats)
|
||||
|
||||
  
|
||||
|
||||
## Backup & migration (v1.3.0+)
|
||||
|
||||
|
||||
@@ -16,6 +16,7 @@ PicHost uses role-based access control (RBAC): **admin** and **user**. Enforceme
|
||||
| Global API token | ✓ | — |
|
||||
| Personal API token | ✓ | ✓ |
|
||||
| Gallery stats overview (incl. user count) | ✓ | partial |
|
||||
| Tag management (Settings → Tag management) | ✓ | — |
|
||||
| Activity log (Settings → Activity log) | ✓ | — |
|
||||
|
||||
Regular users see **API**, **Gallery** in the nav; user menu: **Change password**, **Sign out**.
|
||||
@@ -39,6 +40,20 @@ Regular users see **API**, **Gallery** in the nav; user menu: **Change password*
|
||||
- If verification is misconfigured: `docker exec pichost slider` resets to the local slider
|
||||
- Login rate limiting
|
||||
|
||||
## Tags
|
||||
|
||||
- Tags are **per-user**: regular users manage and filter only their own tags and images
|
||||
- After upload on the home page, **tag one image** or use **batch tagging**; the gallery supports tag filters (OR / AND) and batch tagging
|
||||
- Admins manage tags under **Settings → Tag management** (create, recolor, merge, delete). Tags classify images only and **do not change** `images/` storage paths
|
||||
|
||||
 
|
||||
|
||||
## Activity log
|
||||
|
||||
Admins review uploads, deletes, logins, settings changes, tag operations, and more under **Settings → Activity log**, with filters for date, user, action type, and source.
|
||||
|
||||
|
||||
|
||||
## Upload preferences & auto-delete
|
||||
|
||||
- **Upload preferences**: admins configure client compression and auto-copy in **Settings → Basic**; regular users can flip the home upload card for personal preferences
|
||||
|
||||
+37
-1
@@ -2,6 +2,8 @@
|
||||
|
||||
PicHost 提供 REST 接口与 Twikoo 兼容端点。登录后打开顶栏 **API** 页：左侧为接口目录与 Token 管理，中间为参数说明与 cURL 示例，右侧可 **在线调试** 发送请求。
|
||||
|
||||
|
||||
|
||||
## 鉴权
|
||||
|
||||
所有 REST 接口使用请求头：
|
||||
@@ -28,9 +30,12 @@ Auth-Token: YOUR_TOKEN
|
||||
```bash
|
||||
curl -X POST "https://admin.example.com/api/images/upload" \
|
||||
-H "Auth-Token: YOUR_TOKEN" \
|
||||
-F "image=@./demo.png"
|
||||
-F "image=@./demo.png" \
|
||||
-F 'tagIds=[1,2]'
|
||||
```
|
||||
|
||||
可选表单字段 `tagIds`：JSON 数组字符串（如 `[1,2]`）或重复字段，上传成功后自动打标。存储路径仍为 `images/年/月/id.webp`，**不会**因标签创建子目录。
|
||||
|
||||
### 2. 获取图片列表
|
||||
|
||||
`GET /api/images`
|
||||
@@ -42,6 +47,16 @@ curl "https://admin.example.com/api/images?limit=20&page=1" \
|
||||
-H "Auth-Token: YOUR_TOKEN"
|
||||
```
|
||||
|
||||
可选查询参数：
|
||||
|
||||
| 参数 | 说明 |
|
||||
| ---- | ---- |
|
||||
| `tagIds` | 逗号分隔的标签 ID，默认 **OR**（含任一标签） |
|
||||
| `tagMode` | `and` 时多标签取交集 |
|
||||
| `untagged` | `1` 仅返回无标签图片 |
|
||||
|
||||
响应 `items[]` 含 `tags` 数组（`id`、`name`、`color`）。
|
||||
|
||||
### 3. 搜索图片
|
||||
|
||||
`GET /api/images/search`
|
||||
@@ -77,6 +92,27 @@ curl -X POST "https://admin.example.com/api/images/batch-delete" \
|
||||
-d '{"keys":["images/2026/08/a.webp","images/2026/08/b.webp"]}'
|
||||
```
|
||||
|
||||
### 6. 标签管理
|
||||
|
||||
| 方法 | 路径 | 说明 |
|
||||
| ---- | ---- | ---- |
|
||||
| `GET` | `/api/tags` | 当前用户标签列表（含 `imageCount`） |
|
||||
| `POST` | `/api/tags` | 创建 `{ "name": "工作", "color": "#22c55e" }` |
|
||||
| `PATCH` | `/api/tags/:id` | 改名称/颜色 |
|
||||
| `DELETE` | `/api/tags/:id` | 删除标签（不删图片） |
|
||||
| `POST` | `/api/tags/merge` | `{ "sourceIds": [2,3], "targetId": 1 }` |
|
||||
|
||||
### 7. 图片打标
|
||||
|
||||
| 方法 | 路径 | 说明 |
|
||||
| ---- | ---- | ---- |
|
||||
| `POST` | `/api/images/tags` | `{ "key": "images/…", "tagIds": [1,2] }` 追加 |
|
||||
| `PATCH` | `/api/images/tags` | 整体替换标签集合 |
|
||||
| `DELETE` | `/api/images/tags` | `key` + `tagId` 移除单个 |
|
||||
| `POST` | `/api/images/batch-tags` | `{ "keys": [], "tagIds": [], "action": "add" \| "remove" }` |
|
||||
|
||||
`GET /api/stats` 支持与列表相同的 `tagIds` / `tagMode` / `untagged` 筛选，统计与当前筛选一致。
|
||||
|
||||
## 错误格式
|
||||
|
||||
REST 接口返回 JSON，含 `code` 与 `message`（如 `UNAUTHORIZED`、`FORBIDDEN`、`INVALID_REQUEST`）。Twikoo 端点使用 EasyImage 兼容 JSON 格式。
|
||||
|
||||
@@ -4,6 +4,24 @@ PicHost 版本历史与重要变更说明。完整记录亦见仓库根目录 [C
|
||||
|
||||
---
|
||||
|
||||
## [1.4.0] — 2026-09-09
|
||||
|
||||
### 新增
|
||||
|
||||
- **标签**：每用户彩色标签；设置页管理；上传/图库批量打标；图库 OR / AND 筛选
|
||||
- **操作日志**：登录、删除、设置、标签等操作；日期与用户筛选
|
||||
- **API**：标签与打标接口；上传 `tagIds`；列表/统计标签筛选
|
||||
|
||||
### 文档
|
||||
|
||||
- 截图与 README 同步 v1.4 界面
|
||||
|
||||
## [1.3.0] — 2026-09-07
|
||||
|
||||
### 新增
|
||||
|
||||
- **站点备份 / 恢复 / 跨后端同步** 与任务中心；运维 CLI `backup-export`、`backup-restore`、`storage-sync`
|
||||
|
||||
## [1.2.8] — 2026-09-04
|
||||
|
||||
### 改进
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
PicHost 支持通过环境变量（Docker / `.env`）与后台 **设置** 页配置。管理员在 **设置与偏好**（`/settings`）左侧切换 **基础设置**、**域名与路径**、**访问控制**、**操作日志**；多数项 **SQLite 优先**；部分项环境变量可覆盖或锁定后台编辑。
|
||||
PicHost 支持通过环境变量（Docker / `.env`）与后台 **设置** 页配置。管理员在 **设置与偏好**（`/settings`）左侧切换 **基础设置**、**域名与路径**、**访问控制**、**标签管理**、**操作日志**；多数项 **SQLite 优先**；部分项环境变量可覆盖或锁定后台编辑。
|
||||
|
||||
|
||||
|
||||
## 优先级总览
|
||||
|
||||
|
||||
@@ -37,7 +37,9 @@ docker compose up -d
|
||||
- **创建管理员**：填写用户名与密码，可选开放注册、双域名等。
|
||||
- **从备份恢复**：上传 `.phost.tar.gz` 整站备份包（覆盖当前数据；云存储密钥需恢复后重新填写）。
|
||||
3. （可选）配置网站域名、图片域名、防盗链等 — 详见 [环境变量](./configuration.md) 与 [双域名分离](./domain-separation.md)。
|
||||
4. 登录后可在首页上传图片；顶栏可进入 **图库**、**存储**（管理员）、**设置**、**API**。
|
||||
4. 登录后可在首页 **拖拽 / 点击 / Ctrl+V** 上传图片；上传结果区支持复制直链/Markdown/HTML/BBCode，并可 **批量打标签**。顶栏可进入 **图库**、**存储**（管理员）、**设置**、**API**。
|
||||
|
||||
|
||||
|
||||
| 创建管理员 | 从备份恢复 |
|
||||
| :--------: | :--------: |
|
||||
|
||||
@@ -12,15 +12,27 @@
|
||||
|
||||
## 截图预览
|
||||
|
||||
**main** 分支暂无公网演示，以下为当前产品界面（v1.3.0+）。
|
||||
**main** 分支暂无公网演示，以下为当前产品界面（v1.4.0+）。
|
||||
|
||||
| API | 图库（详情） |
|
||||
| 上传 | 批量打标 |
|
||||
| :-: | :-: |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|
||||
| 存储管理 | 设置与偏好 |
|
||||
| :------: | :--------: |
|
||||
|  |  |
|
||||
| 上传结果（含标签） | API |
|
||||
| :----------------: | :-: |
|
||||
|  |  |
|
||||
|
||||
| 图库（网格） | 图库（列表） |
|
||||
| :----------: | :----------: |
|
||||
|  |  |
|
||||
|
||||
| 图片详情 | 标签管理 |
|
||||
| :------: | :------: |
|
||||
|  |  |
|
||||
|
||||
| 存储管理 | 基础设置 |
|
||||
| :------: | :------: |
|
||||
|  |  |
|
||||
|
||||
| 首次设置 | 从备份恢复 |
|
||||
| :------: | :--------: |
|
||||
|
||||
@@ -52,4 +52,4 @@ npm run docs:build # 构建静态站点
|
||||
npm run docs:preview # 预览构建结果
|
||||
```
|
||||
|
||||
文档源码在 `docs-site/`；截图源文件在 `docs/screenshots/`（含 `login.png`、`setup.png`、`setup-restore.png` 等），构建前会复制到 `docs-site/public/screenshots/`。在线文档：<https://o96u.github.io/PicHost/>
|
||||
文档源码在 `docs-site/`；截图源文件在 `docs/screenshots/`（含 `upload.png`、`gallery.png`、`tags.png`、`api.png`、`storage.png`、`settings.png`、`logs.png`、`setup.png` 等），构建前会复制到 `docs-site/public/screenshots/`。在线文档：<https://o96u.github.io/PicHost/>
|
||||
@@ -18,6 +18,8 @@ PicHost 支持 **本地磁盘** 与 **S3 兼容对象存储**（Cloudflare R2、
|
||||
|
||||
所有图片 **key** 以 `images/` 开头。上传 API **不再接受** `folder` 参数。
|
||||
|
||||
**图片分类**使用每用户 **标签**（`tags` / `image_tags` 表），不改变磁盘路径。图库页按标签筛选；详见 [API 文档](./api.md#6-标签管理)。
|
||||
|
||||
## 添加存储后端
|
||||
|
||||
1. 以管理员登录，打开 **存储** → **添加存储**。
|
||||
@@ -56,7 +58,9 @@ PicHost 支持 **本地磁盘** 与 **S3 兼容对象存储**（Cloudflare R2、
|
||||
## 用量与筛选
|
||||
|
||||
- 存储页展示各后端用量（本地扫描目录，对象存储查询 API）
|
||||
- 图库可按 **存储后端**、**上传来源** 筛选，支持网格/列表视图切换；点击图片打开详情弹窗（尺寸、存储路径、多格式链接复制）
|
||||
- 图库可按 **存储后端**、**上传来源**、**标签** 筛选，支持网格/列表视图切换；点击图片打开详情弹窗（尺寸、存储路径、标签、多格式链接复制）
|
||||
|
||||
  
|
||||
|
||||
## 备份与迁移（v1.3.0+）
|
||||
|
||||
|
||||
@@ -16,6 +16,7 @@ PicHost 使用基于角色的访问控制（RBAC）：**管理员（admin）**
|
||||
| 全局 API Token 管理 | ✓ | — |
|
||||
| 个人 API Token | ✓ | ✓ |
|
||||
| 图库统计概览（含注册用户数） | ✓ | 部分 |
|
||||
| 标签管理（设置 → 标签管理） | ✓ | — |
|
||||
| 操作日志（设置 → 操作日志） | ✓ | — |
|
||||
|
||||
普通用户顶栏：**API**、**图库**；用户菜单：**修改密码**、**退出登录**。
|
||||
@@ -39,6 +40,20 @@ PicHost 使用基于角色的访问控制（RBAC）：**管理员（admin）**
|
||||
- 验证配置错误无法登录时：`docker exec pichost slider` 重置为本地滑块
|
||||
- 登录失败有速率限制
|
||||
|
||||
## 标签
|
||||
|
||||
- 标签按 **用户隔离**：普通用户仅管理、筛选自己的标签与图片
|
||||
- 首页上传完成后可 **单张打标** 或 **批量打标签**；图库支持按标签筛选（多标签 OR / AND）与批量打标
|
||||
- 管理员在 **设置 → 标签管理** 新建、改色、合并、删除标签；标签仅用于分类，**不改变** `images/` 存储路径
|
||||
|
||||
 
|
||||
|
||||
## 操作日志
|
||||
|
||||
管理员在 **设置 → 操作日志** 查看上传、删除、登录、设置变更、标签操作等记录，支持按日期、用户、操作类型、来源筛选。
|
||||
|
||||
|
||||
|
||||
## 上传偏好与自动删除
|
||||
|
||||
- **上传偏好**：管理员在 **设置 → 基础设置** 配置客户端预压缩、自动复制链接等；普通用户可在首页上传卡片背面调整个人偏好
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 125 KiB After Width: | Height: | Size: 120 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 209 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 209 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 101 KiB After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 146 KiB |
+137
-5
@@ -166,6 +166,104 @@
|
||||
"sessionTitle": "This session",
|
||||
"sessionEmpty": "No uploads in this session"
|
||||
},
|
||||
"tags": {
|
||||
"column": "Tags",
|
||||
"uploadLabel": "Tags (optional)",
|
||||
"addTag": "Add tag",
|
||||
"searchOrCreate": "Search or create tag",
|
||||
"createNamed": "Create tag \"{name}\"",
|
||||
"created": "Created tag \"{name}\"",
|
||||
"createFailed": "Failed to create tag",
|
||||
"updateFailed": "Failed to update tags",
|
||||
"filterAll": "All tags",
|
||||
"filterSelected": "{n} selected",
|
||||
"filterTitle": "Filter by tag",
|
||||
"manage": "Manage",
|
||||
"manageTitle": "Manage tags",
|
||||
"manageImageTitle": "Manage tags",
|
||||
"manageSubtitle": "Centralized tag management — add, edit, delete, and merge",
|
||||
"newTag": "New tag",
|
||||
"addTag": "Add tag",
|
||||
"mergeTags": "Merge tags",
|
||||
"searchName": "Search tag name",
|
||||
"filterStatusAll": "All statuses",
|
||||
"filterStatusUsed": "In use",
|
||||
"filterStatusUnused": "Unused",
|
||||
"statTotal": "Total tags",
|
||||
"statUsed": "Tags in use",
|
||||
"statUnused": "Unused tags",
|
||||
"statNew7d": "New in 7 days",
|
||||
"colName": "Tag name",
|
||||
"colImageCount": "Images",
|
||||
"colLastUsed": "Last used",
|
||||
"neverUsed": "Never used",
|
||||
"colActions": "Actions",
|
||||
"mergeIntoAction": "Merge into…",
|
||||
"mergeIntoTitle": "Merge into…",
|
||||
"mergeIntoSubtitle": "Merge tag \"{name}\" into another tag",
|
||||
"mergeIntoChoose": "Choose the target tag",
|
||||
"mergeIrreversibleTitle": "This cannot be undone",
|
||||
"mergeIrreversible": "Merged tags are permanently deleted and their images move to the kept tag. This action cannot be reversed.",
|
||||
"mergeConfirmKeep": "Keeping tag \"{name}\"",
|
||||
"mergeWillDelete": "These tags will be deleted: {names}",
|
||||
"totalCount": "{n} tags",
|
||||
"sortByCount": "By count",
|
||||
"sortByName": "By name",
|
||||
"search": "Search tags",
|
||||
"namePlaceholder": "Tag name",
|
||||
"customColor": "Custom color",
|
||||
"pickColor": "Pick a color",
|
||||
"preview": "Preview",
|
||||
"renamed": "Tag renamed",
|
||||
"renameFailed": "Rename failed",
|
||||
"colorFailed": "Failed to update color",
|
||||
"deleted": "Deleted tag \"{name}\"",
|
||||
"deleteFailed": "Failed to delete tag",
|
||||
"deleteConfirmTitle": "Delete tag",
|
||||
"deleteConfirmDesc": "Delete tag \"{name}\"? It will be removed from all images. This cannot be undone.",
|
||||
"mergeSelectAtLeast": "Select at least 2 tags",
|
||||
"mergeHint": "Select multiple tags to merge; images from other tags will move to the kept tag",
|
||||
"mergeSelected": "{n} tags selected",
|
||||
"mergeClear": "Clear selection",
|
||||
"mergeTitle": "Merge tags",
|
||||
"mergeSubtitle": "Combine multiple tags into one",
|
||||
"mergeNote": "Unselected tags will be deleted; their images move to the kept tag",
|
||||
"mergeChooseTarget": "Choose the tag to keep",
|
||||
"mergeAction": "Merge into…",
|
||||
"mergeRow": "Merge",
|
||||
"mergeConfirm": "Confirm merge",
|
||||
"merged": "Tags merged",
|
||||
"mergeFailed": "Merge failed",
|
||||
"untagged": "Untagged",
|
||||
"untaggedAction": "+ Untagged",
|
||||
"unlabeled": "Unlabeled",
|
||||
"selectedLabel": "Selected ({n})",
|
||||
"clearSelected": "Clear",
|
||||
"selectAll": "Select all",
|
||||
"deselectAll": "Deselect all",
|
||||
"existingLabel": "Existing tags ({n})",
|
||||
"commonTags": "Common tags",
|
||||
"recentTags": "Recently used",
|
||||
"moreTags": "{n} more tags",
|
||||
"classifyHint": "Tags are for organization only and do not affect storage paths",
|
||||
"saved": "Tags saved",
|
||||
"saveFailed": "Failed to save tags",
|
||||
"batchTagAll": "Batch tag",
|
||||
"batchAddTitle": "Add tags",
|
||||
"batchAddSubtitle": "{n} images selected",
|
||||
"modeOr": "Any",
|
||||
"modeAnd": "All",
|
||||
"batchTitle": "Batch tags",
|
||||
"batchSubtitle": "Update tags for {n} selected image(s)",
|
||||
"batchAdd": "Add tags",
|
||||
"batchRemove": "Remove tags",
|
||||
"batchSuccess": "Batch update complete",
|
||||
"batchFailed": "Batch update failed",
|
||||
"noMatch": "No matching tags",
|
||||
"emptyHint": "No tags yet — type a name to create one",
|
||||
"settingsLink": "Manage tags in the gallery (create, colors, merge, delete)",
|
||||
"openManage": "Open tag manager"
|
||||
},
|
||||
"copy": {
|
||||
"url": "URL",
|
||||
"markdown": "Markdown",
|
||||
@@ -206,12 +304,30 @@
|
||||
"title": "System settings",
|
||||
"pageTitle": "Settings & preferences",
|
||||
"pageSubtitle": "Manage system configuration and activity logs",
|
||||
"pageSubtitleBasic": "Manage system configuration and upload preferences",
|
||||
"pageSubtitleBasic": "Configure basic options so PicHost works better for you.",
|
||||
"pageSubtitleDomains": "Configure site and image URLs and upload path rules",
|
||||
"pageSubtitleAccess": "Configure image access policies to prevent hotlink abuse",
|
||||
"pageSubtitleLogs": "View uploads, deletions, edits, and configuration changes",
|
||||
"searchPlaceholder": "Search settings…",
|
||||
"searchEmpty": "No matches",
|
||||
"restoreDefaults": "Restore defaults",
|
||||
"restoredDefaults": "Defaults restored",
|
||||
"refererProtection": "Hotlink protection",
|
||||
"defaultCopyFormatHint": "Link format copied automatically after upload",
|
||||
"systemVersionHint": "Currently running PicHost version",
|
||||
"badgeEnabled": "Enabled",
|
||||
"domainSeparationProxyTitle": "Both domains must resolve to this host",
|
||||
"domainSeparationProxyBody": "Point the site and image URLs to this host and reverse-proxy to port 6892 (Nginx, Caddy, NPM, etc.).",
|
||||
"siteBaseUrlRoleHint": "URL for the admin UI",
|
||||
"imageBaseUrlRoleHint": "URL for serving and displaying images",
|
||||
"imageDomainSection": "Image domain",
|
||||
"navBasic": "Basic",
|
||||
"navDomains": "Domains & paths",
|
||||
"navAccess": "Access control",
|
||||
"navTags": "Tags",
|
||||
"navPreferences": "Preferences",
|
||||
"navLogs": "Activity log",
|
||||
"pageSubtitleTags": "Create, rename, merge, or delete tags",
|
||||
"systemVersion": "Version",
|
||||
"checkUpdate": "Check for updates",
|
||||
"saveSettings": "Save settings",
|
||||
@@ -231,6 +347,10 @@
|
||||
"refererExamplesSample": "example.com, static.example.com",
|
||||
"refererScenarioTitle": "Common use case",
|
||||
"refererScenarioDesc": "Allow your main site and static site to embed images",
|
||||
"refererScenario1": "Personal blog embedding images",
|
||||
"refererScenario2": "Corporate site and static CDN",
|
||||
"refererScenario3": "Local development",
|
||||
"refererScenario4": "Leave empty for no restriction",
|
||||
"refererEnabled": "Enabled",
|
||||
"refererUnrestricted": "Unrestricted",
|
||||
"loginVerification": "Login verification",
|
||||
@@ -594,20 +714,28 @@
|
||||
},
|
||||
"logs": {
|
||||
"pageTitle": "Activity log",
|
||||
"pageSubtitle": "Your upload and delete history",
|
||||
"pageSubtitleAdmin": "Upload and delete history for all users",
|
||||
"pageSubtitle": "Your activity history",
|
||||
"pageSubtitleAdmin": "Activity history for all users",
|
||||
"loadFailed": "Failed to load activity log",
|
||||
"empty": "No activity yet",
|
||||
"entriesUnit": "entries",
|
||||
"filterActionAll": "All actions",
|
||||
"filterSourceAll": "All sources",
|
||||
"filterUserAll": "All users",
|
||||
"searchPlaceholder": "Search filename",
|
||||
"searchPlaceholder": "Search filename, path, or IP",
|
||||
"dateFrom": "Start date",
|
||||
"dateTo": "End date",
|
||||
"dateRangeSeparator": "~",
|
||||
"summaryAll": "All · {total} entries, {upload} uploads, {delete} deletes",
|
||||
"actionUpload": "Upload",
|
||||
"actionDelete": "Delete",
|
||||
"actionLogin": "Login",
|
||||
"actionEdit": "Edit",
|
||||
"actionSettings": "Settings",
|
||||
"actionTags": "Tags",
|
||||
"sourceWeb": "Web",
|
||||
"sourceApi": "API",
|
||||
"sourceAdmin": "Admin",
|
||||
"colTime": "Time",
|
||||
"colUser": "User",
|
||||
"colStorage": "Storage",
|
||||
@@ -616,7 +744,11 @@
|
||||
"colFile": "File",
|
||||
"colFolder": "Folder",
|
||||
"colSize": "Size",
|
||||
"colKey": "Path"
|
||||
"colKey": "Path",
|
||||
"colIp": "IP address",
|
||||
"colResult": "Result",
|
||||
"resultSuccess": "Success",
|
||||
"resultFailure": "Failed"
|
||||
},
|
||||
"image": {
|
||||
"empty": "No images",
|
||||
|
||||
+156
-20
@@ -97,7 +97,7 @@
|
||||
"confirmPlaceholder": "再次输入密码",
|
||||
"allowRegistration": "允许其他用户注册",
|
||||
"domainSeparation": "启用后台与图片域名分离",
|
||||
"domainSeparationHint": "管理后台与 API 使用网站域名，图片直链使用独立图片域名",
|
||||
"domainSeparationHint": "启用后，可以使用不同的域名访问后台和图片资源，便于配置 CDN 和自定义域名。",
|
||||
"domainSeparationProxyHint": "需将两个域名解析到本机，并通过 Nginx、Caddy、NPM 等反代到端口 6892",
|
||||
"domainSeparationProxyExample": "查看示例",
|
||||
"siteBaseUrl": "网站域名",
|
||||
@@ -166,6 +166,104 @@
|
||||
"sessionTitle": "本次上传",
|
||||
"sessionEmpty": "暂无本次上传"
|
||||
},
|
||||
"tags": {
|
||||
"column": "标签",
|
||||
"uploadLabel": "标签（可选）",
|
||||
"addTag": "添加标签",
|
||||
"searchOrCreate": "搜索或创建标签",
|
||||
"createNamed": "创建标签 \"{name}\"",
|
||||
"created": "已创建标签「{name}」",
|
||||
"createFailed": "创建标签失败",
|
||||
"updateFailed": "更新标签失败",
|
||||
"filterAll": "全部标签",
|
||||
"filterSelected": "已选 {n} 个",
|
||||
"filterTitle": "按标签筛选",
|
||||
"manage": "管理",
|
||||
"manageTitle": "管理标签",
|
||||
"manageImageTitle": "管理标签",
|
||||
"manageSubtitle": "集中管理图片标签，支持新增、修改、删除与合并",
|
||||
"newTag": "新建标签",
|
||||
"addTag": "新增标签",
|
||||
"mergeTags": "合并标签",
|
||||
"searchName": "搜索标签名称",
|
||||
"filterStatusAll": "全部状态",
|
||||
"filterStatusUsed": "已使用",
|
||||
"filterStatusUnused": "未使用",
|
||||
"statTotal": "标签总数",
|
||||
"statUsed": "已使用标签",
|
||||
"statUnused": "未使用标签",
|
||||
"statNew7d": "最近 7 天新增",
|
||||
"colName": "标签名称",
|
||||
"colImageCount": "图片数",
|
||||
"colLastUsed": "最近使用",
|
||||
"neverUsed": "从未使用",
|
||||
"colActions": "操作",
|
||||
"mergeIntoAction": "合并到…",
|
||||
"mergeIntoTitle": "合并到…",
|
||||
"mergeIntoSubtitle": "将标签「{name}」合并到其他标签",
|
||||
"mergeIntoChoose": "选择要合并到的目标标签",
|
||||
"mergeIrreversibleTitle": "此操作不可恢复",
|
||||
"mergeIrreversible": "合并后，被合并的标签将被永久删除，其关联图片会归入保留的标签。此操作无法撤销。",
|
||||
"mergeConfirmKeep": "将保留标签「{name}」",
|
||||
"mergeWillDelete": "以下标签将被删除：{names}",
|
||||
"totalCount": "共 {n} 个标签",
|
||||
"sortByCount": "按数量",
|
||||
"sortByName": "按名称",
|
||||
"search": "搜索标签",
|
||||
"namePlaceholder": "标签名称",
|
||||
"customColor": "自定义颜色",
|
||||
"pickColor": "选择颜色",
|
||||
"preview": "预览",
|
||||
"renamed": "标签已重命名",
|
||||
"renameFailed": "重命名失败",
|
||||
"colorFailed": "更新颜色失败",
|
||||
"deleted": "已删除标签「{name}」",
|
||||
"deleteFailed": "删除标签失败",
|
||||
"deleteConfirmTitle": "确认删除标签",
|
||||
"deleteConfirmDesc": "确定删除标签「{name}」？图片上的该标签将被移除，此操作不可恢复。",
|
||||
"mergeSelectAtLeast": "请至少选择 2 个标签",
|
||||
"mergeHint": "勾选多个标签后可合并；其余标签的图片将归入保留的标签",
|
||||
"mergeSelected": "已选 {n} 个标签",
|
||||
"mergeClear": "取消选择",
|
||||
"mergeTitle": "合并标签",
|
||||
"mergeSubtitle": "将多个标签合并为一个",
|
||||
"mergeNote": "未选中的标签将被删除，其图片会归入保留的标签",
|
||||
"mergeChooseTarget": "选择要保留的标签",
|
||||
"mergeAction": "合并为…",
|
||||
"mergeRow": "合并",
|
||||
"mergeConfirm": "确认合并",
|
||||
"merged": "标签已合并",
|
||||
"mergeFailed": "合并失败",
|
||||
"untagged": "无标签",
|
||||
"untaggedAction": "+ 无标签",
|
||||
"unlabeled": "未标记",
|
||||
"selectedLabel": "已选标签 ({n})",
|
||||
"clearSelected": "清空",
|
||||
"selectAll": "全选",
|
||||
"deselectAll": "取消全选",
|
||||
"existingLabel": "已有标签 ({n})",
|
||||
"commonTags": "常用标签",
|
||||
"recentTags": "最近使用",
|
||||
"moreTags": "还有 {n} 个标签",
|
||||
"classifyHint": "标签仅用于分类，不影响图片实际存储路径",
|
||||
"saved": "标签已保存",
|
||||
"saveFailed": "保存标签失败",
|
||||
"batchTagAll": "批量打标签",
|
||||
"batchAddTitle": "添加标签",
|
||||
"batchAddSubtitle": "已选 {n} 张图片",
|
||||
"modeOr": "任一",
|
||||
"modeAnd": "全部",
|
||||
"batchTitle": "批量标签",
|
||||
"batchSubtitle": "为已选 {n} 张图片更新标签",
|
||||
"batchAdd": "添加标签",
|
||||
"batchRemove": "移除标签",
|
||||
"batchSuccess": "批量更新完成",
|
||||
"batchFailed": "批量更新失败",
|
||||
"noMatch": "无匹配标签",
|
||||
"emptyHint": "暂无标签，可输入名称创建",
|
||||
"settingsLink": "在图库中管理标签（新建、改色、合并、删除）",
|
||||
"openManage": "打开标签管理"
|
||||
},
|
||||
"copy": {
|
||||
"url": "直链",
|
||||
"markdown": "Markdown",
|
||||
@@ -188,30 +286,48 @@
|
||||
"back": "返回上传",
|
||||
"processing": "图片处理",
|
||||
"clientCompress": "客户端预压缩",
|
||||
"clientCompressHint": "上传前在浏览器端压缩（服务端仍会转 WebP）",
|
||||
"clientCompressHint": "在上传前于浏览器端压缩图片，减少上传体积（服务端仍会转 WebP）。",
|
||||
"autoDeletePrefix": "自动删除超过",
|
||||
"autoDeleteSuffix": "天的图片",
|
||||
"autoDeleteHint": "仅清理开启后上传的图片，不影响此前已存的图片",
|
||||
"autoDeleteHint": "自动清理指定天数前上传的图片，仅对开启后新上传的图片生效。",
|
||||
"webpQuality": "WebP 压缩质量",
|
||||
"webpQualityHint": "客户端预压缩质量（1–100），需开启「客户端预压缩」",
|
||||
"webpQualityHint": "转换为 WebP 格式时的图片质量，数值越高画质越好、体积越大。",
|
||||
"current": "当前：{n}",
|
||||
"qualityHigh": "高质量",
|
||||
"qualityMedium": "中等质量",
|
||||
"qualityLow": "有损压缩",
|
||||
"convenience": "便捷功能",
|
||||
"autoCopy": "上传成功自动复制链接",
|
||||
"autoCopyHint": "按所选格式复制到剪贴板"
|
||||
"autoCopyHint": "图片上传成功后，自动复制图片链接到剪贴板。"
|
||||
},
|
||||
"settings": {
|
||||
"title": "系统设置",
|
||||
"pageTitle": "设置与偏好",
|
||||
"pageSubtitle": "管理系统配置与操作日志",
|
||||
"pageSubtitleBasic": "管理系统配置与上传偏好",
|
||||
"pageSubtitleBasic": "配置系统的基本选项，让 PicHost 更好地为你服务。",
|
||||
"pageSubtitleDomains": "配置网站域名、图片域名以及图片存储路径等相关设置",
|
||||
"pageSubtitleAccess": "配置图片访问安全策略，防止资源被恶意盗用。",
|
||||
"pageSubtitleLogs": "查看用户上传、删除、修改与系统配置记录",
|
||||
"searchPlaceholder": "搜索设置项…",
|
||||
"searchEmpty": "无匹配项",
|
||||
"restoreDefaults": "恢复默认",
|
||||
"restoredDefaults": "已恢复默认设置",
|
||||
"refererProtection": "防盗链设置",
|
||||
"defaultCopyFormatHint": "设置上传后自动复制的链接格式。",
|
||||
"systemVersionHint": "当前运行的 PicHost 版本。",
|
||||
"badgeEnabled": "已启用",
|
||||
"domainSeparationProxyTitle": "需要将两个域名解析到本机",
|
||||
"domainSeparationProxyBody": "请将网站域名和图片域名都解析到本机，并通过 Nginx、Caddy、NPM 等反向代理到本机的 6892 端口。",
|
||||
"siteBaseUrlRoleHint": "用于访问后台管理界面的网站域名。",
|
||||
"imageBaseUrlRoleHint": "用于访问和显示图片资源的域名。",
|
||||
"imageDomainSection": "图片域名",
|
||||
"navBasic": "基础设置",
|
||||
"navDomains": "域名与路径",
|
||||
"navAccess": "访问控制",
|
||||
"navTags": "标签管理",
|
||||
"navPreferences": "偏好设置",
|
||||
"navLogs": "操作日志",
|
||||
"pageSubtitleTags": "创建、重命名、合并或删除标签",
|
||||
"systemVersion": "系统版本",
|
||||
"checkUpdate": "检查更新",
|
||||
"saveSettings": "保存设置",
|
||||
@@ -222,25 +338,29 @@
|
||||
"pathAndLinkHint": "控制图片直链格式与上传目录结构",
|
||||
"domainSeparationSection": "域名分离",
|
||||
"allowRegistration": "开放用户注册",
|
||||
"allowRegistrationHint": "允许新用户自行注册（普通用户仅可见自己的图片）",
|
||||
"allowRegistrationHint": "允许新用户自行注册账号。",
|
||||
"accessControl": "访问控制",
|
||||
"refererHint": "Referer 防盗链，逗号分隔允许引用的域名，留空不限制",
|
||||
"refererHint": "通过 Referer 防盗链，限制哪些网站可以引用你的图片。",
|
||||
"refererDomainsLabel": "允许引用的域名",
|
||||
"refererTip": "多个域名请使用英文逗号 (,) 分隔，不支持通配符",
|
||||
"refererExamplesTitle": "推荐示例",
|
||||
"refererExamplesSample": "example.com, static.example.com",
|
||||
"refererScenarioTitle": "常见场景",
|
||||
"refererScenarioDesc": "允许主站与静态站点引用图片",
|
||||
"refererScenario1": "个人博客引用本站图片",
|
||||
"refererScenario2": "企业官网与静态资源站",
|
||||
"refererScenario3": "开发环境本地调试",
|
||||
"refererScenario4": "留空表示不限制任何来源",
|
||||
"refererEnabled": "已开启",
|
||||
"refererUnrestricted": "未限制",
|
||||
"loginVerification": "登录验证",
|
||||
"loginVerificationHint": "登录与注册时使用的人机验证方式，三选一",
|
||||
"loginVerificationSlider": "本地滑块",
|
||||
"loginVerificationSliderHint": "内置滑块拼图，无需第三方服务",
|
||||
"loginVerificationSliderHint": "内置滑块验证，无需第三方服务。",
|
||||
"loginVerificationTurnstile": "Cloudflare Turnstile",
|
||||
"loginVerificationTurnstileHint": "在 Cloudflare 控制台创建 Widget，填写 Site Key 与 Secret Key",
|
||||
"loginVerificationTurnstileHint": "使用 Cloudflare 提供的人机验证服务，安全可靠。",
|
||||
"loginVerificationCap": "Cap POW",
|
||||
"loginVerificationCapHint": "自托管 Cap Standalone，填写 API Endpoint 与 Secret Key",
|
||||
"loginVerificationCapHint": "使用基于工作量证明的人机验证，适合无第三方服务的环境。",
|
||||
"turnstileSiteKey": "Turnstile Site Key",
|
||||
"turnstileSiteKeyPlaceholder": "0x4AAAAAAA…",
|
||||
"turnstileSecretKey": "Turnstile Secret Key",
|
||||
@@ -273,9 +393,9 @@
|
||||
"disableDomainSeparationConfirm": "确认关闭",
|
||||
"domainSeparationRequired": "启用域名分离时需同时填写网站域名与图片域名",
|
||||
"hideFolderInUrl": "使用简短图片链接",
|
||||
"hideFolderInUrlHint": "开启后链接仅含域名与文件名，例如 img.example.com/abc.webp；关闭后保留日期或自定义目录，例如 img.example.com/2026/08/abc.webp",
|
||||
"hideFolderInUrlHint": "启用后，生成的图片链接将使用简短格式（如 /abc123.png），不包含年月目录。",
|
||||
"storageUseDatePath": "上传目录按年/月分组",
|
||||
"storageUseDatePathHint": "开启后保存为 images/2026/08/xxx.webp；关闭则为 images/xxx.webp。仅影响启用后的新上传",
|
||||
"storageUseDatePathHint": "启用后，上传的图片将按 年/月 自动分组存储，如 2024/01/xxx.png，便于管理。",
|
||||
"badgeEnv": ".env",
|
||||
"badgeSaved": "已保存",
|
||||
"badgeDefault": "默认",
|
||||
@@ -287,7 +407,7 @@
|
||||
"apiTokenLine": "来源：{source}",
|
||||
"viewReleases": "查看发行版",
|
||||
"updateAvailable": "有新版本 {version}",
|
||||
"upToDate": "当前已是最新版本",
|
||||
"upToDate": "已是最新版本",
|
||||
"checkUpdateFailed": "检查更新失败，请稍后重试",
|
||||
"unsavedChanges": "有未保存的更改",
|
||||
"manageToken": "管理 Token",
|
||||
@@ -594,20 +714,28 @@
|
||||
},
|
||||
"logs": {
|
||||
"pageTitle": "操作日志",
|
||||
"pageSubtitle": "查看您的上传与删除记录",
|
||||
"pageSubtitleAdmin": "查看所有用户的上传与删除记录",
|
||||
"pageSubtitle": "查看您的操作记录",
|
||||
"pageSubtitleAdmin": "查看所有用户的操作记录",
|
||||
"loadFailed": "加载操作日志失败",
|
||||
"empty": "暂无操作记录",
|
||||
"entriesUnit": "条记录",
|
||||
"filterActionAll": "全部操作",
|
||||
"filterSourceAll": "全部来源",
|
||||
"filterUserAll": "全部用户",
|
||||
"searchPlaceholder": "搜索文件名",
|
||||
"searchPlaceholder": "搜索文件名、路径或 IP",
|
||||
"dateFrom": "开始日期",
|
||||
"dateTo": "结束日期",
|
||||
"dateRangeSeparator": "~",
|
||||
"summaryAll": "全部 · 共 {total} 条记录，上传 {upload} 条，删除 {delete} 条",
|
||||
"actionUpload": "上传",
|
||||
"actionDelete": "删除",
|
||||
"actionLogin": "登录",
|
||||
"actionEdit": "编辑",
|
||||
"actionSettings": "设置",
|
||||
"actionTags": "标签",
|
||||
"sourceWeb": "网页",
|
||||
"sourceApi": "API",
|
||||
"sourceAdmin": "管理后台",
|
||||
"colTime": "时间",
|
||||
"colUser": "用户",
|
||||
"colStorage": "存储",
|
||||
@@ -616,7 +744,11 @@
|
||||
"colFile": "文件名",
|
||||
"colFolder": "目录",
|
||||
"colSize": "大小",
|
||||
"colKey": "路径"
|
||||
"colKey": "路径",
|
||||
"colIp": "IP 地址",
|
||||
"colResult": "操作结果",
|
||||
"resultSuccess": "成功",
|
||||
"resultFailure": "失败"
|
||||
},
|
||||
"image": {
|
||||
"empty": "暂无图片",
|
||||
@@ -722,11 +854,15 @@
|
||||
"image": "上传图片，主字段",
|
||||
"file": "兼容字段，单图上传",
|
||||
"files": "兼容字段，多图上传",
|
||||
"token": "Twikoo 协议兼容，表单 token"
|
||||
"token": "Twikoo 协议兼容，表单 token",
|
||||
"tagIds": "可选，JSON 数组或重复字段，上传后自动打标"
|
||||
},
|
||||
"list": {
|
||||
"limit": "每页条数，默认 20，最大 100",
|
||||
"page": "页码，从 1 开始"
|
||||
"page": "页码，从 1 开始",
|
||||
"tagIds": "按标签筛选，逗号分隔 ID；与 untagged、tagMode 配合",
|
||||
"tagMode": "多标签时 or（默认）或 and",
|
||||
"untagged": "设为 1 仅显示无标签图片"
|
||||
},
|
||||
"search": {
|
||||
"q": "搜索关键词，必填"
|
||||
|
||||
Generated
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "pichost",
|
||||
"version": "1.2.8",
|
||||
"version": "1.4.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "pichost",
|
||||
"version": "1.2.8",
|
||||
"version": "1.4.0",
|
||||
"hasInstallScript": true,
|
||||
"license": "GPL-3.0-only",
|
||||
"dependencies": {
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "pichost",
|
||||
"version": "1.3.0",
|
||||
"version": "1.4.0",
|
||||
"description": "Self-hosted image hosting for your NAS / home server — Nuxt admin UI, local disk or S3-compatible storage, server-side WebP compression, referer protection, Twikoo/EasyImage compatible.",
|
||||
"homepage": "https://github.com/O96u/PicHost#readme",
|
||||
"repository": {
|
||||
|
||||
@@ -12,6 +12,7 @@ import {
|
||||
import { findUserByUsername } from '../../utils/db'
|
||||
import { getAdminSecret } from '../../utils/env'
|
||||
import { verifyLoginVerification, type VerificationBody } from '../../utils/login-verification'
|
||||
import { logActivity } from '../../utils/activity-log'
|
||||
import { clientIp, logInfo, logWarn } from '../../utils/logger'
|
||||
|
||||
interface LoginBody extends VerificationBody {
|
||||
@@ -81,6 +82,13 @@ export default defineEventHandler(async (event) => {
|
||||
|
||||
await createSession(event, user.id)
|
||||
logInfo('login success', { ip, username: user.username })
|
||||
logActivity(event, {
|
||||
action: 'login',
|
||||
key: 'auth/login',
|
||||
originalName: user.username,
|
||||
userId: user.id,
|
||||
source: 'web'
|
||||
})
|
||||
|
||||
return {
|
||||
success: true,
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import type { BatchDeleteResponse } from '~/types/image'
|
||||
import { requireApiOrAdminAuth, assertImageOwnership, resolveActivitySource } from '../../utils/access'
|
||||
import { requireApiOrAdminAuth, assertImageOwnership } from '../../utils/access'
|
||||
import { createApiError } from '../../utils/api-error'
|
||||
import { MAX_DELETE_BATCH } from '../../utils/constants'
|
||||
import { insertActivityLog } from '../../utils/db'
|
||||
import { logActivity } from '../../utils/activity-log'
|
||||
import { getImageIndexRow, deleteImageIndex } from '../../utils/image-index'
|
||||
import { toCanonicalImageKey, validateImageKey } from '../../utils/image-key'
|
||||
import { deleteImage, headImage, resolveStorageImageKey } from '../../utils/storage'
|
||||
@@ -67,13 +67,12 @@ export default defineEventHandler(async (event) => {
|
||||
if (storageKey !== key) deleteImageIndex(storageKey)
|
||||
|
||||
deleted.push(key)
|
||||
insertActivityLog({
|
||||
logActivity(event, {
|
||||
action: 'delete',
|
||||
key,
|
||||
originalName: indexed.original_name,
|
||||
size: indexed.size,
|
||||
contentType: indexed.content_type,
|
||||
source: resolveActivitySource(event),
|
||||
userId: indexed.user_id ?? null,
|
||||
backendId: indexed.backend_id ?? null
|
||||
})
|
||||
@@ -102,13 +101,12 @@ export default defineEventHandler(async (event) => {
|
||||
await deleteImage(storageKey, key)
|
||||
deleted.push(key)
|
||||
|
||||
insertActivityLog({
|
||||
logActivity(event, {
|
||||
action: 'delete',
|
||||
key,
|
||||
originalName: existing.originalName,
|
||||
size: existing.size,
|
||||
contentType: existing.contentType,
|
||||
source: resolveActivitySource(event),
|
||||
userId: existing.userId ?? null,
|
||||
backendId: existing.backendId ?? null
|
||||
})
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
import { requireApiOrAdminAuth } from '../../utils/access'
|
||||
import { logActivity } from '../../utils/activity-log'
|
||||
import { getCurrentUser } from '../../utils/auth'
|
||||
import { createApiError } from '../../utils/api-error'
|
||||
import { MAX_DELETE_BATCH } from '../../utils/constants'
|
||||
import { getImageIndexRow } from '../../utils/image-index'
|
||||
import { toCanonicalImageKey, validateImageKey } from '../../utils/image-key'
|
||||
import {
|
||||
addTagsToImage,
|
||||
removeTagFromImage
|
||||
} from '../../utils/tags'
|
||||
import { handleTagApiError } from '../../utils/tag-api'
|
||||
|
||||
interface BatchTagsBody {
|
||||
keys?: string[]
|
||||
tagIds?: number[]
|
||||
action?: 'add' | 'remove'
|
||||
}
|
||||
|
||||
function validateKeys(keys: string[]): void {
|
||||
for (const key of keys) {
|
||||
if (
|
||||
!validateImageKey(key)
|
||||
&& !toCanonicalImageKey(key)
|
||||
&& !getImageIndexRow(key)
|
||||
) {
|
||||
throw new Error(`INVALID_KEY:${key}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
await requireApiOrAdminAuth(event)
|
||||
const user = await getCurrentUser(event)
|
||||
const body = await readBody<BatchTagsBody>(event)
|
||||
|
||||
const keys = Array.isArray(body?.keys)
|
||||
? body.keys.filter(key => typeof key === 'string' && key.trim())
|
||||
: []
|
||||
const tagIds = Array.isArray(body?.tagIds)
|
||||
? body.tagIds.filter(id => Number.isInteger(id) && id > 0)
|
||||
: []
|
||||
const action = body?.action === 'remove' ? 'remove' : 'add'
|
||||
|
||||
if (!keys.length) {
|
||||
createApiError(event, 'INVALID_REQUEST', '请提供图片列表', 400)
|
||||
}
|
||||
if (!tagIds.length) {
|
||||
createApiError(event, 'INVALID_REQUEST', '请提供标签列表', 400)
|
||||
}
|
||||
if (keys.length > MAX_DELETE_BATCH) {
|
||||
createApiError(
|
||||
event,
|
||||
'INVALID_REQUEST',
|
||||
`每次最多处理 ${MAX_DELETE_BATCH} 张图片`,
|
||||
400
|
||||
)
|
||||
}
|
||||
|
||||
try {
|
||||
validateKeys(keys)
|
||||
} catch (error) {
|
||||
if (error instanceof Error && error.message.startsWith('INVALID_KEY:')) {
|
||||
createApiError(event, 'INVALID_IMAGE_KEY', `无效的图片路径: ${error.message.slice(12)}`, 400)
|
||||
}
|
||||
throw error
|
||||
}
|
||||
|
||||
let updated = 0
|
||||
try {
|
||||
for (const key of keys) {
|
||||
if (action === 'add') {
|
||||
addTagsToImage(key, tagIds, user!.id, user!.role === 'admin')
|
||||
} else {
|
||||
for (const tagId of tagIds) {
|
||||
removeTagFromImage(key, tagId, user!.id, user!.role === 'admin')
|
||||
}
|
||||
}
|
||||
updated++
|
||||
}
|
||||
} catch (error) {
|
||||
handleTagApiError(event, error)
|
||||
}
|
||||
|
||||
logActivity(event, {
|
||||
action: 'tags',
|
||||
key: 'images/batch-tags',
|
||||
originalName: action === 'add'
|
||||
? `批量打标（${keys.length} 张）`
|
||||
: `批量移除标签（${keys.length} 张）`,
|
||||
userId: user!.id
|
||||
})
|
||||
|
||||
return { success: true, updated }
|
||||
})
|
||||
@@ -1,5 +1,5 @@
|
||||
import { getImageUserFilter, requireApiOrAdminAuth } from '../../utils/access'
|
||||
import { readBackendIdQuery } from '../../utils/image-query'
|
||||
import { readBackendIdQuery, readTagFilterQuery } from '../../utils/image-query'
|
||||
import { createApiError } from '../../utils/api-error'
|
||||
import { countImages } from '../../utils/storage'
|
||||
|
||||
@@ -12,8 +12,12 @@ export default defineEventHandler(async (event) => {
|
||||
if (backendId === null) {
|
||||
createApiError(event, 'INVALID_REQUEST', '无效的存储后端', 400)
|
||||
}
|
||||
const tagFilter = readTagFilterQuery(query)
|
||||
if (tagFilter === null) {
|
||||
createApiError(event, 'INVALID_REQUEST', '无效的标签筛选参数', 400)
|
||||
}
|
||||
|
||||
const total = await countImages(userFilter, backendId)
|
||||
const total = await countImages(userFilter, backendId, tagFilter)
|
||||
|
||||
return { total }
|
||||
})
|
||||
@@ -1,7 +1,7 @@
|
||||
import type { DeleteResponse } from '~/types/image'
|
||||
import { requireApiOrAdminAuth, assertImageOwnership, resolveActivitySource } from '../../utils/access'
|
||||
import { requireApiOrAdminAuth, assertImageOwnership } from '../../utils/access'
|
||||
import { createApiError } from '../../utils/api-error'
|
||||
import { insertActivityLog } from '../../utils/db'
|
||||
import { logActivity } from '../../utils/activity-log'
|
||||
import { getImageIndexRow, deleteImageIndex } from '../../utils/image-index'
|
||||
import { toCanonicalImageKey, validateImageKey } from '../../utils/image-key'
|
||||
import { deleteImage, headImage, resolveStorageImageKey } from '../../utils/storage'
|
||||
@@ -40,13 +40,12 @@ export default defineEventHandler(async (event) => {
|
||||
deleteImageIndex(key)
|
||||
if (storageKey !== key) deleteImageIndex(storageKey)
|
||||
|
||||
insertActivityLog({
|
||||
logActivity(event, {
|
||||
action: 'delete',
|
||||
key,
|
||||
originalName: indexed.original_name,
|
||||
size: indexed.size,
|
||||
contentType: indexed.content_type,
|
||||
source: resolveActivitySource(event),
|
||||
userId: indexed.user_id ?? null,
|
||||
backendId: indexed.backend_id ?? null
|
||||
})
|
||||
@@ -69,13 +68,12 @@ export default defineEventHandler(async (event) => {
|
||||
createApiError(event, 'DELETE_FAILED', '删除失败', 500)
|
||||
}
|
||||
|
||||
insertActivityLog({
|
||||
logActivity(event, {
|
||||
action: 'delete',
|
||||
key,
|
||||
originalName: existing.originalName,
|
||||
size: existing.size,
|
||||
contentType: existing.contentType,
|
||||
source: resolveActivitySource(event),
|
||||
userId: existing.userId ?? null,
|
||||
backendId: existing.backendId ?? null
|
||||
})
|
||||
|
||||
@@ -7,9 +7,9 @@ import {
|
||||
} from '../../utils/constants'
|
||||
import { createApiError } from '../../utils/api-error'
|
||||
import { getUploadSourcesForKeys, listUserIdUsernameMap } from '../../utils/db'
|
||||
import { mapStoredImageToItem } from '../../utils/image-response'
|
||||
import { mapStoredImageToItem, attachTagsToImageItems } from '../../utils/image-response'
|
||||
import { listStorageBackendNameMap } from '../../utils/storage-backends'
|
||||
import { readBackendIdQuery, readContentTypeQuery, readUploadSourceQuery } from '../../utils/image-query'
|
||||
import { readBackendIdQuery, readContentTypeQuery, readTagFilterQuery, readUploadSourceQuery } from '../../utils/image-query'
|
||||
import { listImages } from '../../utils/storage'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
@@ -39,6 +39,10 @@ export default defineEventHandler(async (event) => {
|
||||
if (uploadSource === null) {
|
||||
createApiError(event, 'INVALID_REQUEST', '无效的上传来源', 400)
|
||||
}
|
||||
const tagFilter = readTagFilterQuery(query)
|
||||
if (tagFilter === null) {
|
||||
createApiError(event, 'INVALID_REQUEST', '无效的标签筛选参数', 400)
|
||||
}
|
||||
const userFilter = await getImageUserFilter(event)
|
||||
|
||||
const listing = await listImages({
|
||||
@@ -47,15 +51,18 @@ export default defineEventHandler(async (event) => {
|
||||
userFilter,
|
||||
backendId,
|
||||
contentType,
|
||||
uploadSource
|
||||
uploadSource,
|
||||
tagFilter
|
||||
})
|
||||
|
||||
const user = await getCurrentUser(event)
|
||||
const ownerMap = user?.role === 'admin' ? listUserIdUsernameMap() : undefined
|
||||
const backendMap = listStorageBackendNameMap()
|
||||
const sourceMap = getUploadSourcesForKeys(listing.items.map(item => item.key))
|
||||
const items = listing.items.map(stored =>
|
||||
mapStoredImageToItem(event, stored, { ownerMap, backendMap, sourceMap })
|
||||
const items = attachTagsToImageItems(
|
||||
listing.items.map(stored =>
|
||||
mapStoredImageToItem(event, stored, { ownerMap, backendMap, sourceMap })
|
||||
)
|
||||
)
|
||||
|
||||
items.sort((a, b) => b.uploadedAt.localeCompare(a.uploadedAt))
|
||||
|
||||
@@ -7,9 +7,9 @@ import {
|
||||
} from '../../utils/constants'
|
||||
import { createApiError } from '../../utils/api-error'
|
||||
import { getUploadSourcesForKeys, listUserIdUsernameMap } from '../../utils/db'
|
||||
import { mapStoredImageToItem } from '../../utils/image-response'
|
||||
import { mapStoredImageToItem, attachTagsToImageItems } from '../../utils/image-response'
|
||||
import { listStorageBackendNameMap } from '../../utils/storage-backends'
|
||||
import { readBackendIdQuery, readContentTypeQuery, readUploadSourceQuery } from '../../utils/image-query'
|
||||
import { readBackendIdQuery, readContentTypeQuery, readTagFilterQuery, readUploadSourceQuery } from '../../utils/image-query'
|
||||
import { searchImages } from '../../utils/storage'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
@@ -48,6 +48,10 @@ export default defineEventHandler(async (event) => {
|
||||
if (uploadSource === null) {
|
||||
createApiError(event, 'INVALID_REQUEST', '无效的上传来源', 400)
|
||||
}
|
||||
const tagFilter = readTagFilterQuery(query)
|
||||
if (tagFilter === null) {
|
||||
createApiError(event, 'INVALID_REQUEST', '无效的标签筛选参数', 400)
|
||||
}
|
||||
const userFilter = await getImageUserFilter(event)
|
||||
|
||||
const result = await searchImages({
|
||||
@@ -57,15 +61,18 @@ export default defineEventHandler(async (event) => {
|
||||
userFilter,
|
||||
backendId,
|
||||
contentType,
|
||||
uploadSource
|
||||
uploadSource,
|
||||
tagFilter
|
||||
})
|
||||
|
||||
const user = await getCurrentUser(event)
|
||||
const ownerMap = user?.role === 'admin' ? listUserIdUsernameMap() : undefined
|
||||
const backendMap = listStorageBackendNameMap()
|
||||
const sourceMap = getUploadSourcesForKeys(result.items.map(item => item.key))
|
||||
const items = result.items.map(stored =>
|
||||
mapStoredImageToItem(event, stored, { ownerMap, backendMap, sourceMap })
|
||||
const items = attachTagsToImageItems(
|
||||
result.items.map(stored =>
|
||||
mapStoredImageToItem(event, stored, { ownerMap, backendMap, sourceMap })
|
||||
)
|
||||
)
|
||||
|
||||
items.sort((a, b) => b.uploadedAt.localeCompare(a.uploadedAt))
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
import { requireApiOrAdminAuth } from '../../utils/access'
|
||||
import { logActivity } from '../../utils/activity-log'
|
||||
import { getCurrentUser } from '../../utils/auth'
|
||||
import { createApiError } from '../../utils/api-error'
|
||||
import { getImageIndexRow } from '../../utils/image-index'
|
||||
import { toCanonicalImageKey, validateImageKey } from '../../utils/image-key'
|
||||
import { removeTagFromImage } from '../../utils/tags'
|
||||
import { handleTagApiError } from '../../utils/tag-api'
|
||||
|
||||
interface ImageTagDeleteBody {
|
||||
key?: string
|
||||
tagId?: number
|
||||
}
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
await requireApiOrAdminAuth(event)
|
||||
const user = await getCurrentUser(event)
|
||||
|
||||
const query = getQuery(event)
|
||||
const body = await readBody<ImageTagDeleteBody>(event).catch(() => ({} as ImageTagDeleteBody))
|
||||
|
||||
const key = (typeof query.key === 'string' ? query.key : undefined) ?? body?.key?.trim()
|
||||
const tagId = Number(
|
||||
typeof query.tagId === 'string' ? query.tagId : body?.tagId
|
||||
)
|
||||
|
||||
if (
|
||||
!key
|
||||
|| (
|
||||
!validateImageKey(key)
|
||||
&& !toCanonicalImageKey(key)
|
||||
&& !getImageIndexRow(key)
|
||||
)
|
||||
) {
|
||||
createApiError(event, 'INVALID_IMAGE_KEY', '无效的图片路径', 400)
|
||||
}
|
||||
|
||||
if (!Number.isInteger(tagId) || tagId <= 0) {
|
||||
createApiError(event, 'INVALID_REQUEST', '无效的标签 ID', 400)
|
||||
}
|
||||
|
||||
try {
|
||||
const tags = removeTagFromImage(
|
||||
key,
|
||||
tagId,
|
||||
user!.id,
|
||||
user!.role === 'admin'
|
||||
)
|
||||
const indexed = getImageIndexRow(key)
|
||||
logActivity(event, {
|
||||
action: 'tags',
|
||||
key,
|
||||
originalName: indexed?.original_name ?? key,
|
||||
userId: user!.id
|
||||
})
|
||||
return { tags }
|
||||
} catch (error) {
|
||||
handleTagApiError(event, error)
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,54 @@
|
||||
import { requireApiOrAdminAuth } from '../../utils/access'
|
||||
import { logActivity } from '../../utils/activity-log'
|
||||
import { getCurrentUser } from '../../utils/auth'
|
||||
import { createApiError } from '../../utils/api-error'
|
||||
import { getImageIndexRow } from '../../utils/image-index'
|
||||
import { toCanonicalImageKey, validateImageKey } from '../../utils/image-key'
|
||||
import { setImageTags } from '../../utils/tags'
|
||||
import { handleTagApiError } from '../../utils/tag-api'
|
||||
|
||||
interface ImageTagsBody {
|
||||
key?: string
|
||||
tagIds?: number[]
|
||||
}
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
await requireApiOrAdminAuth(event)
|
||||
const user = await getCurrentUser(event)
|
||||
const body = await readBody<ImageTagsBody>(event)
|
||||
|
||||
const key = body?.key?.trim()
|
||||
if (
|
||||
!key
|
||||
|| (
|
||||
!validateImageKey(key)
|
||||
&& !toCanonicalImageKey(key)
|
||||
&& !getImageIndexRow(key)
|
||||
)
|
||||
) {
|
||||
createApiError(event, 'INVALID_IMAGE_KEY', '无效的图片路径', 400)
|
||||
}
|
||||
|
||||
const tagIds = Array.isArray(body?.tagIds)
|
||||
? body.tagIds.filter(id => Number.isInteger(id) && id > 0)
|
||||
: []
|
||||
|
||||
try {
|
||||
const tags = setImageTags(
|
||||
key,
|
||||
tagIds,
|
||||
user!.id,
|
||||
user!.role === 'admin'
|
||||
)
|
||||
const indexed = getImageIndexRow(key)
|
||||
logActivity(event, {
|
||||
action: 'tags',
|
||||
key,
|
||||
originalName: indexed?.original_name ?? key,
|
||||
userId: user!.id
|
||||
})
|
||||
return { tags }
|
||||
} catch (error) {
|
||||
handleTagApiError(event, error)
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,57 @@
|
||||
import { requireApiOrAdminAuth } from '../../utils/access'
|
||||
import { logActivity } from '../../utils/activity-log'
|
||||
import { getCurrentUser } from '../../utils/auth'
|
||||
import { createApiError } from '../../utils/api-error'
|
||||
import { getImageIndexRow } from '../../utils/image-index'
|
||||
import { toCanonicalImageKey, validateImageKey } from '../../utils/image-key'
|
||||
import { addTagsToImage } from '../../utils/tags'
|
||||
import { handleTagApiError } from '../../utils/tag-api'
|
||||
|
||||
interface ImageTagsBody {
|
||||
key?: string
|
||||
tagIds?: number[]
|
||||
}
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
await requireApiOrAdminAuth(event)
|
||||
const user = await getCurrentUser(event)
|
||||
const body = await readBody<ImageTagsBody>(event)
|
||||
|
||||
const key = body?.key?.trim()
|
||||
if (
|
||||
!key
|
||||
|| (
|
||||
!validateImageKey(key)
|
||||
&& !toCanonicalImageKey(key)
|
||||
&& !getImageIndexRow(key)
|
||||
)
|
||||
) {
|
||||
createApiError(event, 'INVALID_IMAGE_KEY', '无效的图片路径', 400)
|
||||
}
|
||||
|
||||
const tagIds = Array.isArray(body?.tagIds)
|
||||
? body.tagIds.filter(id => Number.isInteger(id) && id > 0)
|
||||
: []
|
||||
if (!tagIds.length) {
|
||||
createApiError(event, 'INVALID_REQUEST', '请提供要添加的标签', 400)
|
||||
}
|
||||
|
||||
try {
|
||||
const tags = addTagsToImage(
|
||||
key,
|
||||
tagIds,
|
||||
user!.id,
|
||||
user!.role === 'admin'
|
||||
)
|
||||
const indexed = getImageIndexRow(key)
|
||||
logActivity(event, {
|
||||
action: 'tags',
|
||||
key,
|
||||
originalName: indexed?.original_name ?? key,
|
||||
userId: user!.id
|
||||
})
|
||||
return { tags }
|
||||
} catch (error) {
|
||||
handleTagApiError(event, error)
|
||||
}
|
||||
})
|
||||
@@ -12,6 +12,7 @@ import {
|
||||
} from '../../utils/process-image-upload'
|
||||
import { createApiError } from '../../utils/api-error'
|
||||
import { checkUploadRateLimit } from '../../utils/rate-limit'
|
||||
import { parseTagIdsParam } from '../../utils/tags'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
await requireUploadAuth(event)
|
||||
@@ -30,6 +31,25 @@ export default defineEventHandler(async (event) => {
|
||||
const source = verifyApiUploadToken(event) ? 'api' : 'web'
|
||||
const uploadUserId = await getUploadUserId(event)
|
||||
|
||||
const tagIdsField = formData.find(part => part.name === 'tagIds')
|
||||
let uploadTagIds: number[] = []
|
||||
if (tagIdsField?.data?.length) {
|
||||
const raw = new TextDecoder().decode(tagIdsField.data).trim()
|
||||
try {
|
||||
const parsed = JSON.parse(raw) as unknown
|
||||
uploadTagIds = parseTagIdsParam(parsed)
|
||||
} catch {
|
||||
uploadTagIds = parseTagIdsParam(raw)
|
||||
}
|
||||
} else {
|
||||
const repeatFields = formData.filter(part => part.name === 'tagIds' && part.data?.length)
|
||||
if (repeatFields.length) {
|
||||
uploadTagIds = parseTagIdsParam(
|
||||
repeatFields.map(part => new TextDecoder().decode(part.data!).trim())
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// 兼容 image / file / files 字段名（图床脚本 / 通用客户端 / 网页多图）
|
||||
const fileParts = formData.filter(
|
||||
part => (part.name === 'image' || part.name === 'file' || part.name === 'files')
|
||||
@@ -83,7 +103,8 @@ export default defineEventHandler(async (event) => {
|
||||
bytes,
|
||||
filename: part.filename,
|
||||
source,
|
||||
userId: uploadUserId
|
||||
userId: uploadUserId,
|
||||
tagIds: uploadTagIds
|
||||
})
|
||||
|
||||
if ('error' in result) {
|
||||
|
||||
@@ -4,10 +4,9 @@ import { logException } from '../../utils/logger'
|
||||
import {
|
||||
listActivityLogs,
|
||||
listUserIdUsernameMap,
|
||||
summarizeActivityLogs,
|
||||
type LogAction,
|
||||
type LogSource
|
||||
summarizeActivityLogs
|
||||
} from '../../utils/db'
|
||||
import { isLogAction, isLogSource } from '../../utils/activity-log'
|
||||
import { ensureStorageSchema } from '../../utils/storage-backends'
|
||||
import {
|
||||
DEFAULT_LIST_LIMIT,
|
||||
@@ -25,14 +24,10 @@ export default defineEventHandler(async (event) => {
|
||||
: DEFAULT_LIST_LIMIT
|
||||
|
||||
const actionRaw = typeof query.action === 'string' ? query.action : ''
|
||||
const action = (actionRaw === 'upload' || actionRaw === 'delete')
|
||||
? actionRaw as LogAction
|
||||
: undefined
|
||||
const action = isLogAction(actionRaw) ? actionRaw : undefined
|
||||
|
||||
const sourceRaw = typeof query.source === 'string' ? query.source : ''
|
||||
const source = (sourceRaw === 'web' || sourceRaw === 'api')
|
||||
? sourceRaw as LogSource
|
||||
: undefined
|
||||
const source = isLogSource(sourceRaw) ? sourceRaw : undefined
|
||||
|
||||
const folder = typeof query.folder === 'string' && query.folder.trim()
|
||||
? query.folder.trim()
|
||||
@@ -41,6 +36,19 @@ export default defineEventHandler(async (event) => {
|
||||
const searchRaw = typeof query.q === 'string' ? query.q.trim() : ''
|
||||
const search = searchRaw || undefined
|
||||
|
||||
const dateFromRaw = typeof query.from === 'string' ? query.from.trim() : ''
|
||||
const dateToRaw = typeof query.to === 'string' ? query.to.trim() : ''
|
||||
const dateFrom = dateFromRaw && /^\d{4}-\d{2}-\d{2}$/.test(dateFromRaw)
|
||||
? `${dateFromRaw}T00:00:00.000Z`
|
||||
: undefined
|
||||
const dateTo = dateToRaw && /^\d{4}-\d{2}-\d{2}$/.test(dateToRaw)
|
||||
? (() => {
|
||||
const end = new Date(`${dateToRaw}T00:00:00.000Z`)
|
||||
end.setUTCDate(end.getUTCDate() + 1)
|
||||
return end.toISOString()
|
||||
})()
|
||||
: undefined
|
||||
|
||||
const pageRaw = Number(query.page ?? 1)
|
||||
const page = Number.isFinite(pageRaw) && pageRaw > 0
|
||||
? Math.floor(pageRaw)
|
||||
@@ -62,8 +70,25 @@ export default defineEventHandler(async (event) => {
|
||||
|
||||
try {
|
||||
ensureStorageSchema()
|
||||
const result = listActivityLogs({ limit, page, action, source, folder, userId, search })
|
||||
const summary = summarizeActivityLogs({ source, folder, userId, search })
|
||||
const result = listActivityLogs({
|
||||
limit,
|
||||
page,
|
||||
action,
|
||||
source,
|
||||
folder,
|
||||
userId,
|
||||
search,
|
||||
dateFrom,
|
||||
dateTo
|
||||
})
|
||||
const summary = summarizeActivityLogs({
|
||||
source,
|
||||
folder,
|
||||
userId,
|
||||
search,
|
||||
dateFrom,
|
||||
dateTo
|
||||
})
|
||||
const userMap = user.role === 'admin' ? listUserIdUsernameMap() : undefined
|
||||
|
||||
return {
|
||||
@@ -84,6 +109,8 @@ export default defineEventHandler(async (event) => {
|
||||
type: (row.backend_type === 'local' ? 'local' : 's3') as 'local' | 's3'
|
||||
}
|
||||
: null,
|
||||
ipAddress: row.ip_address,
|
||||
status: row.status === 'failure' ? 'failure' : 'success',
|
||||
createdAt: row.created_at
|
||||
})),
|
||||
total: result.total,
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { requireAdminAuth } from '../../utils/access'
|
||||
import { logActivity } from '../../utils/activity-log'
|
||||
import { createApiError } from '../../utils/api-error'
|
||||
import {
|
||||
getSetting,
|
||||
@@ -52,7 +53,7 @@ interface SettingsPatchBody {
|
||||
}
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
await requireAdminAuth(event)
|
||||
const user = await requireAdminAuth(event)
|
||||
|
||||
const body = await readBody<SettingsPatchBody>(event).catch(
|
||||
(): SettingsPatchBody => ({})
|
||||
@@ -248,5 +249,13 @@ export default defineEventHandler(async (event) => {
|
||||
setSetting(SETTINGS_CAP_SECRET, nextCapSecret)
|
||||
}
|
||||
|
||||
logActivity(event, {
|
||||
action: 'settings',
|
||||
key: 'settings/system',
|
||||
originalName: '系统设置',
|
||||
userId: user.id,
|
||||
source: 'admin'
|
||||
})
|
||||
|
||||
return getSettingsPayload(event)
|
||||
})
|
||||
@@ -2,6 +2,7 @@ import { getImageUserFilter, requireUserAuth } from '../utils/access'
|
||||
import { createApiError } from '../utils/api-error'
|
||||
import { logException } from '../utils/logger'
|
||||
import { countUsers, getActivityStats } from '../utils/db'
|
||||
import { readTagFilterQuery } from '../utils/image-query'
|
||||
import {
|
||||
countImages,
|
||||
getFolderStorageStats,
|
||||
@@ -39,13 +40,18 @@ async function resolveStorageUsage(usedBytes: number): Promise<StorageUsageStat>
|
||||
export default defineEventHandler(async (event) => {
|
||||
const user = await requireUserAuth(event)
|
||||
const userFilter = await getImageUserFilter(event)
|
||||
const query = getQuery(event)
|
||||
const tagFilter = readTagFilterQuery(query)
|
||||
if (tagFilter === null) {
|
||||
createApiError(event, 'INVALID_REQUEST', '无效的标签筛选参数', 400)
|
||||
}
|
||||
|
||||
try {
|
||||
if (userFilter === 'admin') {
|
||||
const activity = getActivityStats()
|
||||
const [storedCount, byFolder, storageUsage] = await Promise.all([
|
||||
countImages(),
|
||||
getFolderStorageStats(),
|
||||
countImages('admin', undefined, tagFilter),
|
||||
getFolderStorageStats('admin', tagFilter),
|
||||
resolveStorageUsage(activity.uploadBytesTotal)
|
||||
])
|
||||
|
||||
@@ -58,7 +64,7 @@ export default defineEventHandler(async (event) => {
|
||||
}
|
||||
}
|
||||
|
||||
const scoped = await getUserScopedStorageStats(user.id)
|
||||
const scoped = await getUserScopedStorageStats(user.id, tagFilter)
|
||||
const storageUsage = await resolveStorageUsage(scoped.uploadBytesTotal)
|
||||
|
||||
return {
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
import { requireUserAuth } from '../../utils/access'
|
||||
import { logActivity } from '../../utils/activity-log'
|
||||
import { createApiError } from '../../utils/api-error'
|
||||
import { deleteTag, getTagForUser } from '../../utils/tags'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const user = await requireUserAuth(event)
|
||||
const id = Number(getRouterParam(event, 'id'))
|
||||
|
||||
if (!Number.isInteger(id) || id <= 0) {
|
||||
createApiError(event, 'INVALID_REQUEST', '无效的标签 ID', 400)
|
||||
}
|
||||
|
||||
const existing = getTagForUser(user.id, id)
|
||||
if (!existing) {
|
||||
createApiError(event, 'INVALID_REQUEST', '标签不存在', 404)
|
||||
}
|
||||
|
||||
const deleted = deleteTag(user.id, id)
|
||||
if (!deleted) {
|
||||
createApiError(event, 'INVALID_REQUEST', '标签不存在', 404)
|
||||
}
|
||||
|
||||
logActivity(event, {
|
||||
action: 'tags',
|
||||
key: `tags/${id}`,
|
||||
originalName: existing.name,
|
||||
userId: user.id
|
||||
})
|
||||
|
||||
return { success: true }
|
||||
})
|
||||
@@ -0,0 +1,40 @@
|
||||
import { requireUserAuth } from '../../utils/access'
|
||||
import { logActivity } from '../../utils/activity-log'
|
||||
import { createApiError } from '../../utils/api-error'
|
||||
import { updateTag } from '../../utils/tags'
|
||||
import { handleTagApiError } from '../../utils/tag-api'
|
||||
|
||||
interface PatchTagBody {
|
||||
name?: string
|
||||
color?: string | null
|
||||
}
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const user = await requireUserAuth(event)
|
||||
const id = Number(getRouterParam(event, 'id'))
|
||||
|
||||
if (!Number.isInteger(id) || id <= 0) {
|
||||
createApiError(event, 'INVALID_REQUEST', '无效的标签 ID', 400)
|
||||
}
|
||||
|
||||
const body = await readBody<PatchTagBody>(event)
|
||||
if (body.name === undefined && body.color === undefined) {
|
||||
createApiError(event, 'INVALID_REQUEST', '请提供要更新的字段', 400)
|
||||
}
|
||||
|
||||
try {
|
||||
const tag = updateTag(user.id, id, {
|
||||
name: body.name,
|
||||
color: body.color
|
||||
})
|
||||
logActivity(event, {
|
||||
action: 'edit',
|
||||
key: `tags/${tag.id}`,
|
||||
originalName: tag.name,
|
||||
userId: user.id
|
||||
})
|
||||
return { tag }
|
||||
} catch (error) {
|
||||
handleTagApiError(event, error)
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,7 @@
|
||||
import { requireUserAuth } from '../../utils/access'
|
||||
import { listTagsForUser } from '../../utils/tags'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const user = await requireUserAuth(event)
|
||||
return { items: listTagsForUser(user.id) }
|
||||
})
|
||||
@@ -0,0 +1,32 @@
|
||||
import { requireUserAuth } from '../../utils/access'
|
||||
import { logActivity } from '../../utils/activity-log'
|
||||
import { createApiError } from '../../utils/api-error'
|
||||
import { createTag } from '../../utils/tags'
|
||||
import { handleTagApiError } from '../../utils/tag-api'
|
||||
|
||||
interface CreateTagBody {
|
||||
name?: string
|
||||
color?: string | null
|
||||
}
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const user = await requireUserAuth(event)
|
||||
const body = await readBody<CreateTagBody>(event)
|
||||
|
||||
if (!body?.name || typeof body.name !== 'string') {
|
||||
createApiError(event, 'INVALID_REQUEST', '请提供标签名称', 400)
|
||||
}
|
||||
|
||||
try {
|
||||
const tag = createTag(user.id, body.name, body.color)
|
||||
logActivity(event, {
|
||||
action: 'tags',
|
||||
key: `tags/${tag.id}`,
|
||||
originalName: tag.name,
|
||||
userId: user.id
|
||||
})
|
||||
return { tag }
|
||||
} catch (error) {
|
||||
handleTagApiError(event, error)
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,37 @@
|
||||
import { requireUserAuth } from '../../utils/access'
|
||||
import { logActivity } from '../../utils/activity-log'
|
||||
import { createApiError } from '../../utils/api-error'
|
||||
import { mergeTags } from '../../utils/tags'
|
||||
import { handleTagApiError } from '../../utils/tag-api'
|
||||
|
||||
interface MergeTagsBody {
|
||||
sourceIds?: number[]
|
||||
targetId?: number
|
||||
}
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const user = await requireUserAuth(event)
|
||||
const body = await readBody<MergeTagsBody>(event)
|
||||
|
||||
const sourceIds = Array.isArray(body?.sourceIds)
|
||||
? body.sourceIds.filter(id => Number.isInteger(id) && id > 0)
|
||||
: []
|
||||
const targetId = Number(body?.targetId)
|
||||
|
||||
if (!sourceIds.length || !Number.isInteger(targetId) || targetId <= 0) {
|
||||
createApiError(event, 'INVALID_REQUEST', '请提供有效的源标签与目标标签', 400)
|
||||
}
|
||||
|
||||
try {
|
||||
const tag = mergeTags(user.id, sourceIds, targetId)
|
||||
logActivity(event, {
|
||||
action: 'tags',
|
||||
key: `tags/${tag.id}`,
|
||||
originalName: `合并标签 → ${tag.name}`,
|
||||
userId: user.id
|
||||
})
|
||||
return { tag }
|
||||
} catch (error) {
|
||||
handleTagApiError(event, error)
|
||||
}
|
||||
})
|
||||
@@ -1,4 +1,5 @@
|
||||
import { requireUserAuth } from '../../utils/access'
|
||||
import { logActivity } from '../../utils/activity-log'
|
||||
import { createApiError } from '../../utils/api-error'
|
||||
import { getUserAutoDeletePolicy, setUserAutoDeletePolicy } from '../../utils/db'
|
||||
import { MAX_AUTO_DELETE_DAYS, parseAutoDeleteDays } from '../../utils/env'
|
||||
@@ -28,6 +29,16 @@ export default defineEventHandler(async (event) => {
|
||||
}
|
||||
|
||||
const policy = getUserAutoDeletePolicy(user.id)
|
||||
|
||||
if (body.autoDeleteDays !== undefined) {
|
||||
logActivity(event, {
|
||||
action: 'settings',
|
||||
key: 'user/settings',
|
||||
originalName: '上传偏好',
|
||||
userId: user.id
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
autoDeleteDays: policy.days
|
||||
}
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
import { mkdtempSync, rmSync } from 'node:fs'
|
||||
import { tmpdir } from 'node:os'
|
||||
import { join } from 'node:path'
|
||||
import { DatabaseSync } from 'node:sqlite'
|
||||
import { afterEach, describe, expect, it } from 'vitest'
|
||||
|
||||
const tempDirs: string[] = []
|
||||
|
||||
afterEach(() => {
|
||||
while (tempDirs.length) {
|
||||
const dir = tempDirs.pop()
|
||||
if (dir) rmSync(dir, { recursive: true, force: true })
|
||||
}
|
||||
process.env.DATA_DIR = undefined
|
||||
})
|
||||
|
||||
function useTempDataDir(): string {
|
||||
const dir = mkdtempSync(join(tmpdir(), 'pichost-smoke-'))
|
||||
tempDirs.push(dir)
|
||||
process.env.DATA_DIR = dir
|
||||
return dir
|
||||
}
|
||||
|
||||
async function loadDbModule() {
|
||||
const mod = await import('./db')
|
||||
mod.closeDb()
|
||||
return mod
|
||||
}
|
||||
|
||||
describe('activity log smoke', () => {
|
||||
it('migrates legacy activity_logs constraints and accepts new action types', async () => {
|
||||
const dir = useTempDataDir()
|
||||
const dbPath = join(dir, 'pichost.db')
|
||||
const legacy = new DatabaseSync(dbPath)
|
||||
legacy.exec(`
|
||||
CREATE TABLE activity_logs (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
action TEXT NOT NULL CHECK(action IN ('upload', 'delete')),
|
||||
key TEXT NOT NULL,
|
||||
original_name TEXT NOT NULL,
|
||||
size INTEGER NOT NULL DEFAULT 0,
|
||||
content_type TEXT NOT NULL DEFAULT '',
|
||||
source TEXT NOT NULL CHECK(source IN ('web', 'api')),
|
||||
created_at TEXT NOT NULL,
|
||||
user_id INTEGER,
|
||||
backend_id TEXT,
|
||||
ip_address TEXT,
|
||||
status TEXT NOT NULL DEFAULT 'success'
|
||||
);
|
||||
INSERT INTO activity_logs (action, key, original_name, size, content_type, source, created_at)
|
||||
VALUES ('upload', 'images/a.webp', 'a.webp', 100, 'image/webp', 'web', '2026-01-01T00:00:00.000Z');
|
||||
CREATE TABLE settings (
|
||||
key TEXT PRIMARY KEY,
|
||||
value TEXT NOT NULL,
|
||||
updated_at TEXT NOT NULL
|
||||
);
|
||||
`)
|
||||
legacy.close()
|
||||
|
||||
const { getDb, insertActivityLog, listActivityLogs, closeDb } = await loadDbModule()
|
||||
getDb()
|
||||
const { ensureStorageSchema } = await import('./storage-backends')
|
||||
ensureStorageSchema()
|
||||
|
||||
insertActivityLog({
|
||||
action: 'login',
|
||||
key: 'auth/login',
|
||||
originalName: 'admin',
|
||||
size: 0,
|
||||
contentType: '',
|
||||
source: 'web',
|
||||
userId: 1,
|
||||
ipAddress: '127.0.0.1'
|
||||
})
|
||||
insertActivityLog({
|
||||
action: 'tags',
|
||||
key: 'tags/1',
|
||||
originalName: '生活',
|
||||
size: 0,
|
||||
contentType: '',
|
||||
source: 'admin',
|
||||
userId: 1
|
||||
})
|
||||
|
||||
const result = listActivityLogs({ limit: 10, page: 1 })
|
||||
expect(result.total).toBe(3)
|
||||
expect(result.items.map(item => item.action).sort()).toEqual(['login', 'tags', 'upload'])
|
||||
|
||||
const migrated = getDb().prepare(`
|
||||
SELECT value FROM settings WHERE key = 'activity_logs_schema_v2'
|
||||
`).get() as { value: string } | undefined
|
||||
expect(migrated?.value).toBe('1')
|
||||
|
||||
closeDb()
|
||||
await new Promise(resolve => setTimeout(resolve, 50))
|
||||
})
|
||||
|
||||
it('opens the project data database without throwing', async () => {
|
||||
const projectData = join(process.cwd(), 'data')
|
||||
process.env.DATA_DIR = projectData
|
||||
|
||||
const { getDb, listActivityLogs, closeDb } = await loadDbModule()
|
||||
getDb()
|
||||
const result = listActivityLogs({ limit: 5, page: 1 })
|
||||
expect(result.page).toBeGreaterThan(0)
|
||||
expect(Array.isArray(result.items)).toBe(true)
|
||||
closeDb()
|
||||
await new Promise(resolve => setTimeout(resolve, 50))
|
||||
})
|
||||
})
|
||||
Loaded 100 of 110 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user