Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 O96u
|
6cc4f27f7d | ||
|
O96u
|
d0eb364645 | ||
|
O96u
|
91d71a1b40 | ||
|
O96u
|
737235acff | ||
|
O96u
|
f17d79b236 | ||
|
O96u
|
b05d572221 | ||
|
O96u
|
4789d19d06 | ||
|
O96u
|
430c4de0f4 | ||
|
O96u
|
8408d01197 | ||
|
O96u
|
ac65c1eb9d |
No files matched your search
@@ -30,8 +30,21 @@
|
||||
# 服务端 WebP 压缩质量 1-100（默认 80；也可在设置页配置）
|
||||
# WEBP_QUALITY=80
|
||||
|
||||
# 上传限制（也可在设置 → 访问控制配置；环境变量优先级更高）
|
||||
# UPLOAD_MAX_FILE_SIZE_MB=10
|
||||
# ALLOWED_MIME_TYPES=image/jpeg,image/png,image/webp,image/gif,image/svg+xml,image/x-icon
|
||||
# UPLOAD_RATE_IP_MAX=60
|
||||
# UPLOAD_RATE_TOKEN_MAX=120
|
||||
# UPLOAD_RATE_WINDOW_MINUTES=15
|
||||
# LOGIN_RATE_MAX=10
|
||||
# LOGIN_RATE_WINDOW_MINUTES=15
|
||||
# PRESERVE_ORIGINAL_UPLOAD=false
|
||||
|
||||
# 自动删除超过 N 天的图片（0 表示关闭；也可在设置页配置）
|
||||
# AUTO_DELETE_DAYS=0
|
||||
|
||||
# 仅本地开发：设为 true 可绕过登录验证（跳过 /setup，一般无需开启）
|
||||
# DEV_BYPASS_ACCESS=false
|
||||
|
||||
# 登录人机验证（滑块 / Turnstile / Cap）在后台「设置 → 访问控制」配置，无环境变量。
|
||||
# 配置错误无法登录时：docker exec pichost slider（或 npm run slider）恢复为本地滑块。
|
||||
+88
-1
@@ -4,6 +4,94 @@
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
## [1.4.1] - 2026-09-16
|
||||
|
||||
### 新增
|
||||
|
||||
- **上传策略（设置 → 基础）**：单文件大小、允许格式、上传/登录限流、保留原图（关闭服务端 WebP 转换）；支持 `.env` 覆盖
|
||||
- **上传 API**：可选 `tagNames`（名称不存在则创建，存在则复用）；与 `tagIds` 可并用
|
||||
|
||||
### 改进
|
||||
|
||||
- 登录接口接入可配置的登录限流
|
||||
- 设置页将全站上传策略并入「上传偏好 / 图片处理」；访问控制保留登录限流
|
||||
- API 文档补充 `tagIds` / `tagNames` 参数说明
|
||||
|
||||
## [1.4.0] - 2026-09-09
|
||||
|
||||
### 新增
|
||||
|
||||
- **标签系统**：每用户独立标签与彩色标记；设置页管理（新建、改色、合并、删除）
|
||||
- **图片打标**：上传后单张/批量打标；图库按标签筛选（OR / AND）、批量打标与解标
|
||||
- **操作日志扩展**：记录登录、删除、设置变更、标签操作等；支持日期、用户、操作类型、来源与 IP 筛选
|
||||
- **API**：标签 CRUD、图片打标、`batch-tags`；上传支持 `tagIds`；列表/搜索/统计支持标签筛选
|
||||
|
||||
### 改进
|
||||
|
||||
- 操作日志页 UI 改版（操作/来源徽章、移除备注列）
|
||||
- 设置侧栏增加「标签管理」
|
||||
|
||||
### 文档
|
||||
|
||||
- README 与文档站截图更新（上传、图库、标签、操作日志等）
|
||||
|
||||
## [1.3.0] - 2026-09-07
|
||||
|
||||
### 新增
|
||||
|
||||
- **站点备份**：存储页导出 `.phost.tar.gz`（含 `pichost.db` 与全部图片），支持下载与任务进度
|
||||
- **站点恢复**：存储页或 setup 未初始化时从备份包恢复，支持预检与跳过/覆盖冲突
|
||||
- **跨后端同步**：在已配置存储后端之间拷贝图片并更新索引；后端卡片快捷「迁入 / 迁出」
|
||||
- **任务中心**：`backup_jobs` 记录最近导出/恢复/同步任务，失败可重试；列表分页
|
||||
- 运维 CLI：`backup-export`、`backup-restore`、`storage-sync`（`docker exec pichost …`）
|
||||
|
||||
### 移除
|
||||
|
||||
- 遗留目录迁移 CLI `migrate` / `migrate-to-single-images.mjs`（由启动索引同步与整站备份恢复替代）
|
||||
|
||||
### 文档
|
||||
|
||||
- [存储](./docs-site/guide/storage.md) 补充备份与迁移说明；更新截图；移除 v1.2 迁移专页
|
||||
|
||||
## [1.2.8] - 2026-09-04
|
||||
|
||||
### 改进
|
||||
|
||||
- 双域名：保存或初始化时弹出风险确认（说明可能锁死及 `clear-domains` 恢复方式），不再强制校验当前 Host
|
||||
|
||||
### 新增
|
||||
|
||||
- 运维 CLI `clear-domains`：清除数据库中的网站域 / 图片域配置（`docker exec pichost clear-domains`）
|
||||
|
||||
### 文档
|
||||
|
||||
- FAQ、双域名、反向代理文档补充锁死原因与恢复步骤
|
||||
|
||||
## [1.2.7] - 2026-09-03
|
||||
|
||||
### 新增
|
||||
|
||||
- 登录/注册人机验证：本地滑块、Cloudflare Turnstile、Cap；管理员在「设置 → 访问控制」中切换
|
||||
- 运维 CLI `slider`：将登录验证重置为本地滑块（`docker exec pichost slider`）
|
||||
|
||||
### 改进
|
||||
|
||||
- 登出后登录页验证码可正常重新加载
|
||||
|
||||
## [1.2.6] - 2026-09-01
|
||||
|
||||
### 新增
|
||||
|
||||
- 设置、API、图库、存储页 UI 重构（侧栏导航、统计卡片、在线调试等）
|
||||
- 图库筛选增加存储后端下拉
|
||||
- 新建对象存储后端按类型生成存储标识：`r2-*`、`cos-*`、`oss-*`、`s3-*`
|
||||
|
||||
### 改进
|
||||
|
||||
- 操作日志表格：操作/来源标签同行展示，路径列省略号截断、无横向滚动条
|
||||
- 存储后端卡片：存储标识与类型同一行左对齐排列
|
||||
- README 与文档站截图、导航说明同步新界面
|
||||
|
||||
## [1.2.5] - 2026-08-31
|
||||
|
||||
### 新增
|
||||
@@ -80,7 +168,6 @@
|
||||
- CLI 迁移工具：`docker exec pichost migrate` / `migrate --apply`（`server/cli/migrate-to-single-images.mjs`）
|
||||
- 扫描 `data/` 下除 `images` 外所有顶层目录中的图片，输出 `data/mapping.json`
|
||||
- 启动时自动同步图片索引（扫描磁盘、归一化遗留 key、清理孤儿记录），并打印同步日志
|
||||
- 迁移文档：[文档站 · v1.2 迁移](https://o96u.github.io/PicHost/guide/migration)
|
||||
|
||||
### 改进
|
||||
|
||||
|
||||
+9
-1
@@ -23,8 +23,16 @@ ENV NODE_ENV=production \
|
||||
DATA_DIR=/data
|
||||
|
||||
COPY --from=build /app/.output ./.output
|
||||
COPY --from=build /app/server/utils ./server/utils
|
||||
COPY --from=build /app/node_modules ./node_modules
|
||||
COPY --from=build /app/package.json ./package.json
|
||||
COPY server/cli/reset-password.mjs ./server/cli/reset-password.mjs
|
||||
COPY server/cli/migrate-to-single-images.mjs ./server/cli/migrate-to-single-images.mjs
|
||||
COPY server/cli/slider.mjs ./server/cli/slider.mjs
|
||||
COPY server/cli/clear-domains.mjs ./server/cli/clear-domains.mjs
|
||||
COPY server/cli/backup-cli-loader.mjs ./server/cli/backup-cli-loader.mjs
|
||||
COPY server/cli/backup-export.mjs ./server/cli/backup-export.mjs
|
||||
COPY server/cli/backup-restore.mjs ./server/cli/backup-restore.mjs
|
||||
COPY server/cli/storage-sync.mjs ./server/cli/storage-sync.mjs
|
||||
COPY docker-entrypoint.sh /docker-entrypoint.sh
|
||||
RUN chmod +x /docker-entrypoint.sh
|
||||
|
||||
|
||||
+22
-8
@@ -31,20 +31,34 @@
|
||||
|
||||
**main** has no public demo. **cloudflare** branch live demo: [pic.roven.cc](https://pic.roven.cc)
|
||||
|
||||
| Home | Storage |
|
||||
| :--: | :-----: |
|
||||
|  |  |
|
||||
| Upload | Gallery |
|
||||
| :----: | :-----: |
|
||||
|  |  |
|
||||
|
||||
| Stats | Settings |
|
||||
| :---: | :-------: |
|
||||
|  |  |
|
||||
| API | Tag management |
|
||||
| :-: | :------------: |
|
||||
|  |  |
|
||||
|
||||
| Storage | Settings |
|
||||
| :-----: | :-------: |
|
||||
|  |  |
|
||||
|
||||
| First-time setup | Restore from backup |
|
||||
| :--------------: | :-----------------: |
|
||||
|  |  |
|
||||
|
||||
| Activity log |
|
||||
| :----------: |
|
||||
|  |
|
||||
|
||||
## Features
|
||||
|
||||
- **Drag, click, or Ctrl+V paste** — server-side WebP, Referer hotlink protection
|
||||
- **Multi-user** — login with slider captcha, optional registration; users see only their images
|
||||
- **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 & stats** — browse, search, batch delete; upload trends and source breakdown
|
||||
- **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,20 +31,34 @@
|
||||
|
||||
**main** 分支暂无公网演示；**cloudflare** 分支在线体验：[pic.roven.cc](https://pic.roven.cc)
|
||||
|
||||
| 首页 | 存储 |
|
||||
| 上传 | 图库 |
|
||||
| :--: | :--: |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|
||||
| 统计 | 设置 |
|
||||
| API | 标签管理 |
|
||||
| :--: | :------: |
|
||||
|  |  |
|
||||
|
||||
| 存储 | 设置 |
|
||||
| :--: | :--: |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|
||||
| 首次设置 | 从备份恢复 |
|
||||
| :--: | :--: |
|
||||
|  |  |
|
||||
|
||||
| 操作日志 |
|
||||
| :------: |
|
||||
|  |
|
||||
|
||||
## 特性
|
||||
|
||||
- **拖拽 / 点击 / 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 引导创建管理员
|
||||
|
||||
@@ -74,7 +88,7 @@ docker run -d \
|
||||
|
||||
浏览器打开 `http://<主机IP>:6892`，按引导完成设置即可。
|
||||
|
||||
**详细说明**（环境变量、升级迁移、双域名、API、Twikoo、反向代理、本地开发等）见 **[用户文档](https://o96u.github.io/PicHost/)**。
|
||||
**详细说明**（环境变量、双域名、API、Twikoo、反向代理、本地开发等）见 **[用户文档](https://o96u.github.io/PicHost/)**。
|
||||
|
||||
| 分支 | 说明 |
|
||||
| ---- | ---- |
|
||||
|
||||
@@ -106,3 +106,21 @@
|
||||
.upload-settings-btn:hover .upload-settings-icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.api-debug-response {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgb(82 82 82) transparent;
|
||||
}
|
||||
|
||||
.api-debug-response::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.api-debug-response::-webkit-scrollbar-thumb {
|
||||
border-radius: 9999px;
|
||||
background-color: rgb(82 82 82);
|
||||
}
|
||||
|
||||
.api-debug-response::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import logoLight from '~/assets/image/logo-light.png'
|
||||
import logoDark from '~/assets/image/logo-dark.png'
|
||||
import type { LoginVerificationPayload } from '~/types/auth'
|
||||
|
||||
const router = useRouter()
|
||||
const { login, fetchStatus, authStatus } = useAuth()
|
||||
@@ -11,45 +12,53 @@ const username = ref('')
|
||||
const password = ref('')
|
||||
const secret = ref('')
|
||||
const loading = ref(false)
|
||||
const captchaRef = ref<{ reset: () => Promise<void> } | null>(null)
|
||||
const captchaPayload = ref<{ captchaId: string, captchaPosition: number } | null>(null)
|
||||
const verificationRef = ref<{ reset: () => Promise<void> } | null>(null)
|
||||
const verificationPayload = ref<LoginVerificationPayload | null>(null)
|
||||
const verificationMountKey = ref(0)
|
||||
|
||||
const legacyMode = computed(() => authStatus.value?.legacyMode ?? false)
|
||||
const allowRegistration = computed(() => authStatus.value?.allowRegistration ?? false)
|
||||
const loginVerification = computed(() =>
|
||||
authStatus.value?.loginVerification ?? { method: 'slider' as const }
|
||||
)
|
||||
|
||||
const canSubmit = computed(() =>
|
||||
Boolean(captchaPayload.value)
|
||||
Boolean(verificationPayload.value)
|
||||
&& (legacyMode.value ? Boolean(secret.value) : Boolean(username.value && password.value))
|
||||
)
|
||||
|
||||
function onCaptchaVerified(payload: { id: string, positionPercent: number }) {
|
||||
captchaPayload.value = {
|
||||
captchaId: payload.id,
|
||||
captchaPosition: payload.positionPercent
|
||||
}
|
||||
function onVerificationVerified(payload: LoginVerificationPayload) {
|
||||
verificationPayload.value = payload
|
||||
}
|
||||
|
||||
async function resetCaptcha() {
|
||||
captchaPayload.value = null
|
||||
await captchaRef.value?.reset()
|
||||
function onVerificationCleared() {
|
||||
verificationPayload.value = null
|
||||
}
|
||||
|
||||
async function resetVerification() {
|
||||
verificationPayload.value = null
|
||||
await verificationRef.value?.reset()
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
verificationPayload.value = null
|
||||
verificationMountKey.value += 1
|
||||
const status = await fetchStatus()
|
||||
if (!status.initialized && !status.legacyMode) {
|
||||
await router.replace('/setup')
|
||||
return
|
||||
}
|
||||
})
|
||||
|
||||
async function submit() {
|
||||
if (!canSubmit.value || loading.value || !captchaPayload.value) return
|
||||
if (!canSubmit.value || loading.value || !verificationPayload.value) return
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
const captcha = captchaPayload.value
|
||||
const verification = verificationPayload.value
|
||||
const result = legacyMode.value
|
||||
? await login({ secret: secret.value }, captcha)
|
||||
: await login({ username: username.value.trim(), password: password.value }, captcha)
|
||||
? await login({ secret: secret.value }, verification)
|
||||
: await login({ username: username.value.trim(), password: password.value }, verification)
|
||||
|
||||
if (result.ok) {
|
||||
if (result.needsMigration) {
|
||||
@@ -59,10 +68,10 @@ async function submit() {
|
||||
username.value = ''
|
||||
password.value = ''
|
||||
secret.value = ''
|
||||
await resetCaptcha()
|
||||
await resetVerification()
|
||||
toast.add({ title: t('auth.loginSuccess'), color: 'success' })
|
||||
} else {
|
||||
await resetCaptcha()
|
||||
await resetVerification()
|
||||
toast.add({
|
||||
title: result.error ?? (legacyMode.value ? t('auth.loginFailedSecret') : t('auth.loginFailedCredentials')),
|
||||
color: 'error'
|
||||
@@ -170,9 +179,14 @@ async function submit() {
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<SliderCaptcha
|
||||
ref="captchaRef"
|
||||
@verified="onCaptchaVerified"
|
||||
<LoginVerification
|
||||
:key="verificationMountKey"
|
||||
ref="verificationRef"
|
||||
:method="loginVerification.method"
|
||||
:turnstile-site-key="loginVerification.turnstileSiteKey"
|
||||
:cap-api-endpoint="loginVerification.capApiEndpoint"
|
||||
@verified="onVerificationVerified"
|
||||
@cleared="onVerificationCleared"
|
||||
/>
|
||||
|
||||
<UButton
|
||||
|
||||
@@ -3,9 +3,11 @@ const props = withDefaults(
|
||||
defineProps<{
|
||||
code: string
|
||||
scrollable?: boolean
|
||||
lang?: string
|
||||
}>(),
|
||||
{
|
||||
scrollable: true
|
||||
scrollable: true,
|
||||
lang: ''
|
||||
}
|
||||
)
|
||||
|
||||
@@ -34,6 +36,12 @@ async function copyCode() {
|
||||
<span class="size-3 rounded-full border border-black/15 bg-[#ff5f56]" />
|
||||
<span class="size-3 rounded-full border border-black/15 bg-[#ffbd2e]" />
|
||||
<span class="size-3 rounded-full border border-black/15 bg-[#27c93f]" />
|
||||
<span
|
||||
v-if="lang"
|
||||
class="ml-1 text-[10px] font-medium tracking-wide text-neutral-500 uppercase"
|
||||
>
|
||||
{{ lang }}
|
||||
</span>
|
||||
</div>
|
||||
<UButton
|
||||
icon="i-lucide-copy"
|
||||
@@ -47,7 +55,7 @@ async function copyCode() {
|
||||
</div>
|
||||
<pre
|
||||
class="overflow-auto p-4 text-xs leading-relaxed text-neutral-100"
|
||||
:class="props.scrollable ? 'max-h-80' : ''"
|
||||
><code class="font-mono">{{ props.code }}</code></pre>
|
||||
:class="scrollable ? 'max-h-80' : ''"
|
||||
><code class="font-mono whitespace-pre">{{ code }}</code></pre>
|
||||
</div>
|
||||
</template>
|
||||
@@ -17,17 +17,12 @@ const navItems = computed(() => {
|
||||
]
|
||||
if (isAdmin.value) {
|
||||
items.push({ label: t('nav.storage'), to: '/storage', icon: 'i-lucide-hard-drive' })
|
||||
items.push({ label: t('nav.settings'), to: '/settings', icon: 'i-lucide-settings' })
|
||||
}
|
||||
items.push({ label: t('nav.settings'), to: '/settings', icon: 'i-lucide-settings' })
|
||||
return items
|
||||
})
|
||||
|
||||
const accountMenuItems = computed<DropdownMenuItem[]>(() => [
|
||||
{
|
||||
label: t('nav.logs'),
|
||||
icon: 'i-lucide-scroll-text',
|
||||
to: '/logs'
|
||||
},
|
||||
{
|
||||
label: t('nav.changePassword'),
|
||||
icon: 'i-lucide-key-round',
|
||||
@@ -48,7 +43,7 @@ const desktopUserMenuItems = computed<DropdownMenuItem[][]>(() => [
|
||||
|
||||
function isNavActive(to: string) {
|
||||
if (to === '/settings') {
|
||||
return route.path === '/settings'
|
||||
return route.path.startsWith('/settings')
|
||||
}
|
||||
return route.path.startsWith(to)
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
@@ -0,0 +1,50 @@
|
||||
<script setup lang="ts">
|
||||
import 'cap-widget'
|
||||
|
||||
const props = defineProps<{
|
||||
apiEndpoint: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
verified: [payload: { capToken: string }]
|
||||
cleared: []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const widgetRef = ref<HTMLElement | null>(null)
|
||||
|
||||
function onSolve(event: Event) {
|
||||
const token = (event as CustomEvent<{ token: string }>).detail?.token
|
||||
if (token) {
|
||||
emit('verified', { capToken: token })
|
||||
}
|
||||
}
|
||||
|
||||
function onError() {
|
||||
emit('cleared')
|
||||
}
|
||||
|
||||
function reset() {
|
||||
const widget = widgetRef.value as (HTMLElement & { reset?: () => void }) | null
|
||||
widget?.reset?.()
|
||||
emit('cleared')
|
||||
}
|
||||
|
||||
defineExpose({ reset })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientOnly>
|
||||
<cap-widget
|
||||
ref="widgetRef"
|
||||
:data-cap-api-endpoint="props.apiEndpoint"
|
||||
:data-cap-i18n-initial-state="t('auth.capInitialState')"
|
||||
:data-cap-i18n-verifying-label="t('auth.capVerifying')"
|
||||
:data-cap-i18n-solved-label="t('auth.capSolved')"
|
||||
:data-cap-i18n-error-label="t('auth.capError')"
|
||||
@solve="onSolve"
|
||||
@error="onError"
|
||||
/>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
@@ -6,6 +6,8 @@ const props = defineProps<{
|
||||
icon?: string
|
||||
block?: boolean
|
||||
successTitle?: string
|
||||
variant?: 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost' | 'link'
|
||||
color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -76,7 +78,8 @@ async function copy() {
|
||||
<template>
|
||||
<UButton
|
||||
size="xs"
|
||||
variant="soft"
|
||||
:variant="variant ?? 'soft'"
|
||||
:color="color"
|
||||
:loading="copying"
|
||||
:disabled="!value"
|
||||
:label="iconOnly ? undefined : label"
|
||||
|
||||
@@ -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
|
||||
@@ -9,20 +10,33 @@ const props = withDefaults(defineProps<{
|
||||
showKey?: boolean
|
||||
showStorage?: boolean
|
||||
compact?: boolean
|
||||
gallery?: boolean
|
||||
allowDelete?: boolean
|
||||
showTags?: boolean
|
||||
showTagAction?: boolean
|
||||
}>(), {
|
||||
selectable: true,
|
||||
showKey: true,
|
||||
showStorage: false,
|
||||
compact: false
|
||||
compact: false,
|
||||
gallery: false,
|
||||
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()
|
||||
const { t, locale } = useI18n()
|
||||
const toast = useToast()
|
||||
const { copyFormat } = useUploadPreferences()
|
||||
const imageError = ref(false)
|
||||
const retryCount = ref(0)
|
||||
@@ -73,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(() => {
|
||||
@@ -90,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
|
||||
}
|
||||
@@ -101,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')
|
||||
}
|
||||
@@ -110,13 +129,241 @@ const storageIcon = computed(() =>
|
||||
props.image.storage?.type === 'local' ? 'i-lucide-hard-drive' : 'i-lucide-cloud'
|
||||
)
|
||||
|
||||
const uploadSourceLabel = computed(() => {
|
||||
switch (props.image.uploadSource) {
|
||||
case 'web':
|
||||
return t('stats.tagWeb')
|
||||
case 'api':
|
||||
return t('stats.tagApi')
|
||||
default:
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
const copyingUrl = ref(false)
|
||||
|
||||
async function copyGalleryUrl() {
|
||||
if (copyingUrl.value || !props.image.url) return
|
||||
copyingUrl.value = true
|
||||
try {
|
||||
if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
|
||||
await navigator.clipboard.writeText(props.image.url)
|
||||
} else {
|
||||
const textarea = document.createElement('textarea')
|
||||
textarea.value = props.image.url
|
||||
textarea.setAttribute('readonly', '')
|
||||
textarea.style.position = 'fixed'
|
||||
textarea.style.left = '-9999px'
|
||||
document.body.appendChild(textarea)
|
||||
textarea.select()
|
||||
document.execCommand('copy')
|
||||
document.body.removeChild(textarea)
|
||||
}
|
||||
toast.add({ title: t('copy.copiedUrl'), color: 'success' })
|
||||
} catch {
|
||||
toast.add({ title: t('copy.failedManual'), color: 'error' })
|
||||
} finally {
|
||||
copyingUrl.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col overflow-hidden rounded-xl border border-default bg-elevated shadow-sm">
|
||||
<div
|
||||
v-if="gallery"
|
||||
class="flex flex-col overflow-hidden rounded-xl border border-default bg-elevated"
|
||||
>
|
||||
<div class="relative aspect-[4/3] shrink-0 overflow-hidden bg-muted">
|
||||
<img
|
||||
v-if="!imageError"
|
||||
:key="`${image.key}-${retryCount}`"
|
||||
:src="previewSrc"
|
||||
:alt="image.originalName"
|
||||
loading="lazy"
|
||||
class="size-full cursor-zoom-in object-cover object-center"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
:aria-label="t('image.openPreview')"
|
||||
@click="emit('preview')"
|
||||
@keydown.enter="emit('preview')"
|
||||
@keydown.space.prevent="emit('preview')"
|
||||
@error="onPreviewError"
|
||||
>
|
||||
<div
|
||||
v-else
|
||||
class="flex size-full items-center justify-center text-xs text-muted"
|
||||
>
|
||||
{{ t('image.previewFailed') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="selectable"
|
||||
class="absolute top-2 left-2"
|
||||
@click.stop
|
||||
>
|
||||
<UCheckbox
|
||||
:model-value="selected"
|
||||
:ui="{ base: 'shadow-none' }"
|
||||
@update:model-value="toggleSelected"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1.5 p-3">
|
||||
<p
|
||||
class="truncate text-sm font-semibold"
|
||||
:title="image.originalName"
|
||||
>
|
||||
{{ image.originalName }}
|
||||
</p>
|
||||
<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 items-center gap-1.5"
|
||||
>
|
||||
<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"
|
||||
:title="image.storage.name"
|
||||
>
|
||||
<UIcon
|
||||
:name="storageIcon"
|
||||
class="size-3 shrink-0"
|
||||
/>
|
||||
<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>
|
||||
|
||||
<div class="flex items-center justify-around border-t border-default px-2 py-2 text-muted">
|
||||
<UButton
|
||||
icon="i-lucide-link"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
size="sm"
|
||||
:loading="copyingUrl"
|
||||
:aria-label="t('common.copy')"
|
||||
@click="copyGalleryUrl"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-lucide-eye"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
size="sm"
|
||||
:aria-label="t('image.openPreview')"
|
||||
@click="emit('preview')"
|
||||
/>
|
||||
<UButton
|
||||
v-if="allowDelete"
|
||||
icon="i-lucide-trash-2"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
size="sm"
|
||||
:aria-label="t('common.delete')"
|
||||
@click="emit('delete')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="flex flex-col overflow-hidden rounded-xl border border-default bg-elevated shadow-sm"
|
||||
>
|
||||
<div
|
||||
class="relative aspect-square shrink-0 overflow-hidden bg-muted"
|
||||
role="button"
|
||||
@@ -151,6 +398,21 @@ function toggleSelected(value: boolean | 'indeterminate') {
|
||||
@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)]"
|
||||
@@ -220,6 +482,20 @@ function toggleSelected(value: boolean | 'indeterminate') {
|
||||
>
|
||||
{{ 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>
|
||||
@@ -245,13 +521,28 @@ function toggleSelected(value: boolean | 'indeterminate') {
|
||||
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"
|
||||
|
||||
@@ -10,17 +10,40 @@ const props = withDefaults(defineProps<{
|
||||
emptyText?: string
|
||||
dense?: boolean
|
||||
compact?: boolean
|
||||
/** 图库：5 列 × 2 行，缩略图略扁 */
|
||||
gallery?: boolean
|
||||
allowDelete?: boolean
|
||||
showTags?: boolean
|
||||
showTagAction?: boolean
|
||||
}>(), {
|
||||
selectable: true,
|
||||
showKey: true,
|
||||
showStorage: false,
|
||||
dense: false,
|
||||
compact: false
|
||||
compact: false,
|
||||
gallery: false,
|
||||
allowDelete: true,
|
||||
showTags: false,
|
||||
showTagAction: false
|
||||
})
|
||||
|
||||
const gridClass = computed(() => {
|
||||
if (props.gallery) {
|
||||
return 'grid items-start grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5'
|
||||
}
|
||||
if (props.dense) {
|
||||
return 'grid items-start grid-cols-2 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
|
||||
}
|
||||
return 'grid items-start grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
|
||||
})
|
||||
|
||||
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()
|
||||
@@ -38,8 +61,8 @@ function updateSelection(key: string, selected: boolean) {
|
||||
<template>
|
||||
<div
|
||||
v-if="items.length"
|
||||
class="grid items-start sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
|
||||
:class="dense ? 'grid-cols-2 gap-3' : 'grid-cols-1 gap-4'"
|
||||
class="items-start"
|
||||
:class="gridClass"
|
||||
>
|
||||
<ImageCard
|
||||
v-for="image in items"
|
||||
@@ -50,8 +73,16 @@ function updateSelection(key: string, selected: boolean) {
|
||||
:show-key="showKey"
|
||||
:show-storage="showStorage"
|
||||
: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,15 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import type { ImageItem } from '~/types/image'
|
||||
import type { CopyFormat } from '~/composables/useUploadPreferences'
|
||||
import { formatImageDimensions, getFileExtension } from '~/utils/image-display'
|
||||
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
|
||||
showStorage: false,
|
||||
showTags: false,
|
||||
allowDelete: true
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -17,6 +21,8 @@ const emit = defineEmits<{
|
||||
'delete': []
|
||||
}>()
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const { formatFileSize } = useFileSize()
|
||||
const { t, locale } = useI18n()
|
||||
const { copyFormat } = useUploadPreferences()
|
||||
@@ -24,40 +30,67 @@ const { copyFormat } = useUploadPreferences()
|
||||
const naturalWidth = ref<number | null>(null)
|
||||
const naturalHeight = ref<number | null>(null)
|
||||
const dimensionsLoaded = ref(false)
|
||||
const copyingUrl = ref(false)
|
||||
const embedFormat = ref<CopyFormat>('url')
|
||||
|
||||
const copyFormatItems = computed(() => [
|
||||
const embedFormatItems = 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(() => {
|
||||
if (!props.image) return '—'
|
||||
try {
|
||||
return new Date(props.image.uploadedAt).toLocaleString(locale.value, { hour12: false })
|
||||
const date = new Date(props.image.uploadedAt)
|
||||
const y = date.getFullYear()
|
||||
const m = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const d = String(date.getDate()).padStart(2, '0')
|
||||
const h = String(date.getHours()).padStart(2, '0')
|
||||
const min = String(date.getMinutes()).padStart(2, '0')
|
||||
const s = String(date.getSeconds()).padStart(2, '0')
|
||||
return `${y}/${m}/${d} ${h}:${min}:${s}`
|
||||
} catch {
|
||||
return props.image.uploadedAt
|
||||
}
|
||||
})
|
||||
|
||||
const sizeLabel = computed(() => {
|
||||
if (!props.image) return '—'
|
||||
return t('image.previewSizeDetail', {
|
||||
size: formatFileSize(props.image.size),
|
||||
bytes: props.image.size.toLocaleString(locale.value)
|
||||
})
|
||||
})
|
||||
|
||||
const bbcodeValue = computed(() => {
|
||||
if (!props.image) return ''
|
||||
return buildImageBbcode(props.image.url)
|
||||
})
|
||||
|
||||
const previewValue = computed(() => {
|
||||
if (!props.image) return ''
|
||||
switch (copyFormat.value) {
|
||||
switch (embedFormat.value) {
|
||||
case 'markdown':
|
||||
return props.image.markdown
|
||||
case 'html':
|
||||
return props.image.html
|
||||
case 'bbcode':
|
||||
return bbcodeValue.value
|
||||
default:
|
||||
return props.image.url
|
||||
}
|
||||
})
|
||||
|
||||
const copySuccessTitle = computed(() => {
|
||||
switch (copyFormat.value) {
|
||||
switch (embedFormat.value) {
|
||||
case 'markdown':
|
||||
return t('copy.copiedMarkdown')
|
||||
case 'html':
|
||||
return t('copy.copiedHtml')
|
||||
case 'bbcode':
|
||||
return t('copy.copiedBbcode')
|
||||
default:
|
||||
return t('copy.copiedUrl')
|
||||
}
|
||||
@@ -67,11 +100,26 @@ const storageIcon = computed(() =>
|
||||
props.image?.storage?.type === 'local' ? 'i-lucide-hard-drive' : 'i-lucide-cloud'
|
||||
)
|
||||
|
||||
const uploadSourceLabel = computed(() => {
|
||||
if (!props.image?.uploadSource) return t('image.uploadSourceUnknown')
|
||||
return props.image.uploadSource === 'api'
|
||||
? t('stats.sourceApi')
|
||||
: t('stats.sourceWeb')
|
||||
const uploadSourceTag = computed(() => {
|
||||
switch (props.image?.uploadSource) {
|
||||
case 'web':
|
||||
return t('stats.tagWeb')
|
||||
case 'api':
|
||||
return t('stats.tagApi')
|
||||
default:
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
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(() => {
|
||||
@@ -80,45 +128,67 @@ const dimensionsLabel = computed(() => {
|
||||
return dimensionsLoaded.value ? '—' : t('image.previewDimensionsUnknown')
|
||||
})
|
||||
|
||||
const detailRows = computed(() => {
|
||||
if (!props.image) return []
|
||||
|
||||
const image = props.image
|
||||
const rows: Array<{ label: string, value: string, mono?: boolean, storage?: boolean }> = [
|
||||
{ label: t('image.previewOriginalName'), value: image.originalName },
|
||||
{ label: t('image.previewExtension'), value: getFileExtension(image.originalName) },
|
||||
{ label: t('image.previewUploadedAt'), value: uploadedLabel.value },
|
||||
{ label: t('image.previewSize'), value: formatFileSize(image.size) },
|
||||
{ label: t('image.previewContentType'), value: image.contentType },
|
||||
{ label: t('image.previewDimensions'), value: dimensionsLabel.value },
|
||||
{ label: t('image.previewUploadSource'), value: uploadSourceLabel.value }
|
||||
]
|
||||
|
||||
if (image.owner) {
|
||||
rows.push({ label: t('image.previewOwner'), value: image.owner.username })
|
||||
}
|
||||
|
||||
if (props.showStorage && image.storage) {
|
||||
rows.push({ label: t('image.previewStorage'), value: image.storage.name, storage: true })
|
||||
}
|
||||
|
||||
rows.push({ label: t('image.previewKey'), value: image.key, mono: true })
|
||||
|
||||
return rows
|
||||
})
|
||||
|
||||
watch(() => props.image?.key, () => {
|
||||
naturalWidth.value = null
|
||||
naturalHeight.value = null
|
||||
dimensionsLoaded.value = false
|
||||
})
|
||||
|
||||
function close() {
|
||||
emit('update:open', false)
|
||||
watch(() => props.open, (open) => {
|
||||
if (open) {
|
||||
embedFormat.value = copyFormat.value
|
||||
}
|
||||
})
|
||||
|
||||
function selectEmbedFormat(value: CopyFormat) {
|
||||
embedFormat.value = value
|
||||
copyFormat.value = value
|
||||
}
|
||||
|
||||
function selectCopyFormat(value: CopyFormat) {
|
||||
copyFormat.value = value
|
||||
async function copyText(text: string, successTitle: string) {
|
||||
if (!text) return false
|
||||
try {
|
||||
if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
|
||||
await navigator.clipboard.writeText(text)
|
||||
toast.add({ title: successTitle, color: 'success' })
|
||||
return true
|
||||
}
|
||||
} catch {
|
||||
// fallback below
|
||||
}
|
||||
|
||||
const textarea = document.createElement('textarea')
|
||||
textarea.value = text
|
||||
textarea.setAttribute('readonly', '')
|
||||
textarea.style.position = 'fixed'
|
||||
textarea.style.left = '-9999px'
|
||||
document.body.appendChild(textarea)
|
||||
textarea.select()
|
||||
let ok = false
|
||||
try {
|
||||
ok = document.execCommand('copy')
|
||||
} catch {
|
||||
ok = false
|
||||
} finally {
|
||||
document.body.removeChild(textarea)
|
||||
}
|
||||
|
||||
if (ok) {
|
||||
toast.add({ title: successTitle, color: 'success' })
|
||||
} else {
|
||||
toast.add({ title: t('copy.failedManual'), color: 'error' })
|
||||
}
|
||||
return ok
|
||||
}
|
||||
|
||||
async function copyLink() {
|
||||
if (!props.image?.url || copyingUrl.value) return
|
||||
copyingUrl.value = true
|
||||
try {
|
||||
await copyText(props.image.url, t('copy.copiedUrl'))
|
||||
} finally {
|
||||
copyingUrl.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function openInNewTab() {
|
||||
@@ -126,6 +196,15 @@ function openInNewTab() {
|
||||
window.open(props.image.url, '_blank', 'noopener,noreferrer')
|
||||
}
|
||||
|
||||
function downloadOriginal() {
|
||||
if (!props.image?.url) return
|
||||
const link = document.createElement('a')
|
||||
link.href = props.image.url
|
||||
link.download = props.image.originalName || 'image'
|
||||
link.rel = 'noopener'
|
||||
link.click()
|
||||
}
|
||||
|
||||
function requestDelete() {
|
||||
emit('delete')
|
||||
}
|
||||
@@ -142,6 +221,7 @@ function onImageLoad(event: Event) {
|
||||
<UModal
|
||||
:open="open && !!image"
|
||||
:title="t('image.previewTitle')"
|
||||
:description="t('image.previewSubtitle')"
|
||||
:ui="{ content: 'max-w-5xl' }"
|
||||
@update:open="emit('update:open', $event)"
|
||||
>
|
||||
@@ -149,65 +229,171 @@ function onImageLoad(event: Event) {
|
||||
v-if="image"
|
||||
#body
|
||||
>
|
||||
<div class="grid gap-5 md:grid-cols-[minmax(0,1.15fr)_minmax(0,1fr)] md:items-stretch">
|
||||
<div class="flex min-h-[14rem] items-center justify-center overflow-hidden rounded-xl border border-default bg-muted/15 p-3 md:min-h-[22rem]">
|
||||
<div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)] lg:items-start">
|
||||
<div class="preview-checkerboard flex items-center justify-center overflow-hidden rounded-xl border border-default p-4">
|
||||
<img
|
||||
:src="image.url"
|
||||
:alt="image.originalName"
|
||||
class="max-h-[min(70vh,32rem)] w-full object-contain"
|
||||
class="max-h-[min(60vh,24rem)] w-full object-contain"
|
||||
@load="onImageLoad"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex min-h-0 flex-col gap-4">
|
||||
<dl class="grid gap-2.5 sm:grid-cols-2">
|
||||
<div
|
||||
v-for="row in detailRows"
|
||||
:key="row.label"
|
||||
class="min-w-0 rounded-lg border border-default/60 bg-muted/10 px-3 py-2"
|
||||
:class="row.mono ? 'sm:col-span-2' : ''"
|
||||
>
|
||||
<dt class="text-xs text-muted">
|
||||
{{ row.label }}
|
||||
<div class="flex min-w-0 flex-col gap-5">
|
||||
<dl class="divide-y divide-default text-sm">
|
||||
<div class="flex gap-4 py-2.5 first:pt-0">
|
||||
<dt class="w-20 shrink-0 text-muted">
|
||||
{{ t('image.previewOriginalName') }}
|
||||
</dt>
|
||||
<dd
|
||||
class="mt-0.5 break-all text-sm"
|
||||
:class="row.mono ? 'font-mono text-xs text-dimmed' : 'font-medium'"
|
||||
>
|
||||
<span
|
||||
v-if="row.storage && image.storage"
|
||||
class="inline-flex items-center gap-1.5"
|
||||
>
|
||||
<dd class="min-w-0 flex-1 break-all font-medium">
|
||||
{{ image.originalName }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex gap-4 py-2.5">
|
||||
<dt class="w-20 shrink-0 text-muted">
|
||||
{{ t('image.previewUploadedAt') }}
|
||||
</dt>
|
||||
<dd class="min-w-0 flex-1">
|
||||
{{ uploadedLabel }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex gap-4 py-2.5">
|
||||
<dt class="w-20 shrink-0 text-muted">
|
||||
{{ t('image.previewSize') }}
|
||||
</dt>
|
||||
<dd class="min-w-0 flex-1">
|
||||
{{ sizeLabel }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex gap-4 py-2.5">
|
||||
<dt class="w-20 shrink-0 text-muted">
|
||||
{{ t('image.previewDimensions') }}
|
||||
</dt>
|
||||
<dd class="min-w-0 flex-1">
|
||||
{{ dimensionsLabel }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex gap-4 py-2.5">
|
||||
<dt class="w-20 shrink-0 text-muted">
|
||||
{{ t('image.previewContentType') }}
|
||||
</dt>
|
||||
<dd class="min-w-0 flex-1">
|
||||
{{ image.contentType }}
|
||||
</dd>
|
||||
</div>
|
||||
<div
|
||||
v-if="showStorage && image.storage"
|
||||
class="flex gap-4 py-2.5"
|
||||
>
|
||||
<dt class="w-20 shrink-0 text-muted">
|
||||
{{ t('image.previewStorage') }}
|
||||
</dt>
|
||||
<dd class="min-w-0 flex-1">
|
||||
<span class="inline-flex items-center gap-1.5">
|
||||
<UIcon
|
||||
:name="storageIcon"
|
||||
class="size-3.5 shrink-0"
|
||||
class="size-3.5 shrink-0 text-muted"
|
||||
/>
|
||||
{{ row.value }}
|
||||
{{ image.storage.name }}
|
||||
</span>
|
||||
<template v-else>
|
||||
{{ row.value }}
|
||||
</template>
|
||||
</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"
|
||||
>
|
||||
<dt class="w-20 shrink-0 text-muted">
|
||||
{{ t('image.previewUploadSource') }}
|
||||
</dt>
|
||||
<dd class="min-w-0 flex-1">
|
||||
<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>
|
||||
</div>
|
||||
<div
|
||||
v-if="image.owner"
|
||||
class="flex gap-4 py-2.5"
|
||||
>
|
||||
<dt class="w-20 shrink-0 text-muted">
|
||||
{{ t('image.previewOwner') }}
|
||||
</dt>
|
||||
<dd class="min-w-0 flex-1">
|
||||
{{ image.owner.username }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex gap-4 py-2.5 last:pb-0">
|
||||
<dt class="w-20 shrink-0 text-muted">
|
||||
{{ t('image.previewKey') }}
|
||||
</dt>
|
||||
<dd class="flex min-w-0 flex-1 items-start gap-2">
|
||||
<span class="min-w-0 flex-1 break-all font-mono text-xs text-dimmed">
|
||||
{{ image.key }}
|
||||
</span>
|
||||
<CopyButton
|
||||
icon="i-lucide-copy"
|
||||
icon-only
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
class="shrink-0"
|
||||
:label="t('common.copy')"
|
||||
:value="image.key"
|
||||
:success-title="t('copy.copied')"
|
||||
/>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div class="mt-auto space-y-2 rounded-xl border border-default/70 bg-muted/10 p-3">
|
||||
<p class="text-xs font-medium text-muted">
|
||||
<div class="border-t border-default pt-4">
|
||||
<p class="mb-2.5 text-sm font-medium">
|
||||
{{ t('image.previewLinks') }}
|
||||
</p>
|
||||
<div class="flex gap-1 rounded-lg border border-default bg-default p-0.5">
|
||||
<UButton
|
||||
v-for="item in copyFormatItems"
|
||||
v-for="item in embedFormatItems"
|
||||
:key="item.value"
|
||||
size="xs"
|
||||
class="flex-1 justify-center"
|
||||
:variant="copyFormat === item.value ? 'solid' : 'ghost'"
|
||||
:color="copyFormat === item.value ? 'primary' : 'neutral'"
|
||||
:variant="embedFormat === item.value ? 'solid' : 'ghost'"
|
||||
:color="embedFormat === item.value ? 'primary' : 'neutral'"
|
||||
:label="item.label"
|
||||
@click="selectCopyFormat(item.value)"
|
||||
@click="selectEmbedFormat(item.value)"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="mt-2 flex items-center gap-2">
|
||||
<UInput
|
||||
:model-value="previewValue"
|
||||
readonly
|
||||
@@ -215,42 +401,69 @@ function onImageLoad(event: Event) {
|
||||
class="min-w-0 flex-1 font-mono text-xs"
|
||||
/>
|
||||
<CopyButton
|
||||
icon="i-lucide-copy"
|
||||
:label="t('common.copy')"
|
||||
:value="previewValue"
|
||||
:success-title="copySuccessTitle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap justify-end gap-2 border-t border-default pt-3">
|
||||
<UButton
|
||||
:label="t('image.previewOpen')"
|
||||
icon="i-lucide-external-link"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@click="openInNewTab"
|
||||
/>
|
||||
<UButton
|
||||
:label="t('common.delete')"
|
||||
icon="i-lucide-trash-2"
|
||||
color="error"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:loading="deleting"
|
||||
@click="requestDelete"
|
||||
/>
|
||||
<UButton
|
||||
:label="t('image.previewClose')"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@click="close"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template
|
||||
v-if="image"
|
||||
#footer
|
||||
>
|
||||
<div class="flex w-full flex-wrap justify-end gap-1.5">
|
||||
<UButton
|
||||
:label="t('image.previewOpen')"
|
||||
icon="i-lucide-external-link"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@click="openInNewTab"
|
||||
/>
|
||||
<UButton
|
||||
:label="t('image.previewDownload')"
|
||||
icon="i-lucide-download"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@click="downloadOriginal"
|
||||
/>
|
||||
<UButton
|
||||
:label="t('image.previewCopyLink')"
|
||||
icon="i-lucide-link"
|
||||
color="primary"
|
||||
size="sm"
|
||||
:loading="copyingUrl"
|
||||
@click="copyLink"
|
||||
/>
|
||||
<UButton
|
||||
v-if="allowDelete"
|
||||
:label="t('common.delete')"
|
||||
icon="i-lucide-trash-2"
|
||||
color="error"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:loading="deleting"
|
||||
@click="requestDelete"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.preview-checkerboard {
|
||||
background-color: var(--ui-bg-muted);
|
||||
background-image:
|
||||
linear-gradient(45deg, color-mix(in oklab, var(--ui-border) 28%, transparent) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, color-mix(in oklab, var(--ui-border) 28%, transparent) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, color-mix(in oklab, var(--ui-border) 28%, transparent) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, color-mix(in oklab, var(--ui-border) 28%, transparent) 75%);
|
||||
background-size: 14px 14px;
|
||||
background-position: 0 0, 0 7px, 7px -7px, -7px 0;
|
||||
}
|
||||
</style>
|
||||
@@ -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,90 @@
|
||||
<script setup lang="ts">
|
||||
import type {
|
||||
LoginVerificationMethod,
|
||||
LoginVerificationPayload
|
||||
} from '~/types/auth'
|
||||
|
||||
const props = defineProps<{
|
||||
method: LoginVerificationMethod
|
||||
turnstileSiteKey?: string
|
||||
capApiEndpoint?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
verified: [payload: LoginVerificationPayload]
|
||||
cleared: []
|
||||
}>()
|
||||
|
||||
const sliderRef = ref<{ reset: () => Promise<void> } | null>(null)
|
||||
const turnstileRef = ref<{ reset: () => void } | null>(null)
|
||||
const capRef = ref<{ reset: () => void } | null>(null)
|
||||
|
||||
function onSliderVerified(payload: { id: string, positionPercent: number }) {
|
||||
emit('verified', {
|
||||
method: 'slider',
|
||||
captchaId: payload.id,
|
||||
captchaPosition: payload.positionPercent
|
||||
})
|
||||
}
|
||||
|
||||
function onTurnstileVerified(payload: { turnstileToken: string }) {
|
||||
emit('verified', {
|
||||
method: 'turnstile',
|
||||
turnstileToken: payload.turnstileToken
|
||||
})
|
||||
}
|
||||
|
||||
function onCapVerified(payload: { capToken: string }) {
|
||||
emit('verified', {
|
||||
method: 'cap',
|
||||
capToken: payload.capToken
|
||||
})
|
||||
}
|
||||
|
||||
function onCleared() {
|
||||
emit('cleared')
|
||||
}
|
||||
|
||||
async function reset() {
|
||||
emit('cleared')
|
||||
if (props.method === 'slider') {
|
||||
await sliderRef.value?.reset()
|
||||
return
|
||||
}
|
||||
if (props.method === 'turnstile') {
|
||||
turnstileRef.value?.reset()
|
||||
return
|
||||
}
|
||||
capRef.value?.reset()
|
||||
}
|
||||
|
||||
defineExpose({ reset })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SliderCaptcha
|
||||
v-if="method === 'slider'"
|
||||
ref="sliderRef"
|
||||
@verified="onSliderVerified"
|
||||
/>
|
||||
<TurnstileCaptcha
|
||||
v-else-if="method === 'turnstile' && turnstileSiteKey"
|
||||
ref="turnstileRef"
|
||||
:site-key="turnstileSiteKey"
|
||||
@verified="onTurnstileVerified"
|
||||
@cleared="onCleared"
|
||||
/>
|
||||
<CapCaptcha
|
||||
v-else-if="method === 'cap' && capApiEndpoint"
|
||||
ref="capRef"
|
||||
:api-endpoint="capApiEndpoint"
|
||||
@verified="onCapVerified"
|
||||
@cleared="onCleared"
|
||||
/>
|
||||
<p
|
||||
v-else
|
||||
class="rounded-lg border border-warning/25 bg-warning/5 px-3 py-2 text-xs text-warning"
|
||||
>
|
||||
{{ $t('auth.verificationMisconfigured') }}
|
||||
</p>
|
||||
</template>
|
||||
@@ -136,24 +136,6 @@ function toggleOpen() {
|
||||
{{ t('nav.account') }}
|
||||
</h3>
|
||||
<div class="space-y-2">
|
||||
<NuxtLink
|
||||
to="/logs"
|
||||
class="flex items-center justify-between rounded-lg border border-default px-3.5 py-2.5 text-sm text-highlighted transition-colors hover:bg-elevated"
|
||||
@click="open = false"
|
||||
>
|
||||
<span class="flex items-center gap-2.5">
|
||||
<UIcon
|
||||
name="i-lucide-scroll-text"
|
||||
class="size-4 opacity-70"
|
||||
/>
|
||||
{{ t('nav.logs') }}
|
||||
</span>
|
||||
<UIcon
|
||||
name="i-lucide-chevron-right"
|
||||
class="size-4 text-muted"
|
||||
/>
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink
|
||||
to="/account/password"
|
||||
class="flex items-center justify-between rounded-lg border border-default px-3.5 py-2.5 text-sm text-highlighted transition-colors hover:bg-elevated"
|
||||
|
||||
@@ -1,124 +1,250 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
type PageItem = number | 'ellipsis'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
page: number
|
||||
totalPages: number
|
||||
total: number
|
||||
unit?: string
|
||||
loading?: boolean
|
||||
}>()
|
||||
pageSize?: number
|
||||
pageSizeOptions?: number[]
|
||||
}>(), {
|
||||
loading: false,
|
||||
pageSizeOptions: () => [10, 20, 30, 50]
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:page': [page: number]
|
||||
'update:pageSize': [pageSize: number]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const unitLabel = computed(() => props.unit ?? t('common.itemsUnit'))
|
||||
const jumpInput = ref('')
|
||||
const jumpPageInput = ref('')
|
||||
|
||||
const showMobilePageNumbers = computed(() => props.totalPages <= 5)
|
||||
|
||||
const visiblePages = computed<PageItem[]>(() => {
|
||||
const total = Math.max(1, props.totalPages)
|
||||
const current = Math.min(Math.max(1, props.page), total)
|
||||
|
||||
if (total <= 7) {
|
||||
return Array.from({ length: total }, (_, index) => index + 1)
|
||||
}
|
||||
|
||||
const pages = new Set<number>([1, total])
|
||||
for (let page = current - 1; page <= current + 1; page++) {
|
||||
if (page >= 1 && page <= total) pages.add(page)
|
||||
}
|
||||
|
||||
const sorted = [...pages].sort((a, b) => a - b)
|
||||
const items: PageItem[] = []
|
||||
|
||||
for (let index = 0; index < sorted.length; index++) {
|
||||
const page = sorted[index]!
|
||||
const prev = sorted[index - 1]
|
||||
if (prev !== undefined && page - prev > 1) {
|
||||
items.push('ellipsis')
|
||||
}
|
||||
items.push(page)
|
||||
}
|
||||
|
||||
return items
|
||||
})
|
||||
|
||||
const pageSizeItems = computed(() =>
|
||||
props.pageSizeOptions.map(size => ({
|
||||
label: t('pagination.perPage', { size }),
|
||||
value: size
|
||||
}))
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.page,
|
||||
(page) => {
|
||||
jumpPageInput.value = String(page)
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
function goTo(target: number) {
|
||||
if (target < 1 || target > props.totalPages || props.loading) {
|
||||
return
|
||||
}
|
||||
if (target === props.page) {
|
||||
jumpInput.value = ''
|
||||
return
|
||||
}
|
||||
if (target < 1 || target > props.totalPages || props.loading) return
|
||||
if (target === props.page) return
|
||||
emit('update:page', target)
|
||||
}
|
||||
|
||||
function submitJump() {
|
||||
const raw = String(jumpInput.value ?? '').trim()
|
||||
if (!raw) return
|
||||
const parsed = Number.parseInt(raw, 10)
|
||||
if (!Number.isFinite(parsed)) return
|
||||
goTo(parsed)
|
||||
function onPageSizeChange(value: unknown) {
|
||||
const size = Number(value)
|
||||
if (!Number.isFinite(size) || size <= 0 || size === props.pageSize) return
|
||||
emit('update:pageSize', size)
|
||||
}
|
||||
|
||||
watch(() => props.page, () => {
|
||||
jumpInput.value = ''
|
||||
})
|
||||
function jumpToPage() {
|
||||
const target = Number.parseInt(jumpPageInput.value, 10)
|
||||
if (!Number.isFinite(target)) return
|
||||
goTo(target)
|
||||
}
|
||||
|
||||
function pageButtonClass(target: number) {
|
||||
return target === props.page
|
||||
? 'border-primary bg-primary/10 text-primary font-medium'
|
||||
: 'border-default bg-elevated text-default hover:bg-muted'
|
||||
}
|
||||
|
||||
const navButtonClass = 'inline-flex items-center justify-center rounded-md border border-default bg-elevated text-default transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-40'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="total > 0"
|
||||
class="flex flex-col items-center gap-2 border-t border-default pt-4 sm:flex-row sm:justify-between"
|
||||
class="border-t border-default pt-4"
|
||||
>
|
||||
<p
|
||||
v-if="totalPages > 1"
|
||||
class="text-sm text-muted"
|
||||
>
|
||||
{{ t('pagination.pageOf', { page, totalPages, total, unit: unitLabel }) }}
|
||||
</p>
|
||||
<p
|
||||
v-else
|
||||
class="text-sm text-muted"
|
||||
>
|
||||
{{ t('pagination.totalOnly', { total, unit: unitLabel }) }}
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-if="totalPages > 1"
|
||||
class="flex flex-wrap items-center justify-center gap-1"
|
||||
>
|
||||
<UButton
|
||||
icon="i-lucide-chevrons-left"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:aria-label="t('pagination.first')"
|
||||
:disabled="page <= 1 || loading"
|
||||
@click="goTo(1)"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-lucide-chevron-left"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:aria-label="t('pagination.prev')"
|
||||
:disabled="page <= 1 || loading"
|
||||
@click="goTo(page - 1)"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-lucide-chevron-right"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:aria-label="t('pagination.next')"
|
||||
:disabled="page >= totalPages || loading"
|
||||
@click="goTo(page + 1)"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-lucide-chevrons-right"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:aria-label="t('pagination.last')"
|
||||
:disabled="page >= totalPages || loading"
|
||||
@click="goTo(totalPages)"
|
||||
/>
|
||||
<form
|
||||
class="ml-1 flex items-center gap-1"
|
||||
@submit.prevent="submitJump"
|
||||
>
|
||||
<UInput
|
||||
v-model="jumpInput"
|
||||
type="number"
|
||||
:min="1"
|
||||
:max="totalPages"
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex items-center justify-between gap-2 sm:hidden">
|
||||
<p class="text-sm text-muted">
|
||||
{{ t('pagination.totalCount', { total, unit: unitLabel }) }}
|
||||
</p>
|
||||
<USelect
|
||||
v-if="pageSize !== undefined"
|
||||
:model-value="pageSize"
|
||||
:items="pageSizeItems"
|
||||
value-key="value"
|
||||
size="sm"
|
||||
class="w-16"
|
||||
:placeholder="t('pagination.pagePlaceholder')"
|
||||
class="w-[6.5rem] shrink-0"
|
||||
:aria-label="t('pagination.pageSize')"
|
||||
:disabled="loading"
|
||||
:aria-label="t('pagination.pagePlaceholder')"
|
||||
@keyup.enter="submitJump"
|
||||
@update:model-value="onPageSizeChange"
|
||||
/>
|
||||
<UButton
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
:label="t('pagination.goTo')"
|
||||
:disabled="loading || !String(jumpInput ?? '').trim()"
|
||||
@click="submitJump"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p class="hidden text-sm text-muted sm:block">
|
||||
{{ t('pagination.totalCount', { total, unit: unitLabel }) }}
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-end sm:gap-3">
|
||||
<USelect
|
||||
v-if="pageSize !== undefined"
|
||||
:model-value="pageSize"
|
||||
:items="pageSizeItems"
|
||||
value-key="value"
|
||||
size="sm"
|
||||
class="hidden w-[7.5rem] shrink-0 sm:block"
|
||||
:aria-label="t('pagination.pageSize')"
|
||||
:disabled="loading"
|
||||
@update:model-value="onPageSizeChange"
|
||||
/>
|
||||
|
||||
<div class="flex items-center justify-center gap-1 sm:justify-end">
|
||||
<button
|
||||
type="button"
|
||||
:class="[navButtonClass, 'hidden size-8 sm:inline-flex']"
|
||||
:aria-label="t('pagination.first')"
|
||||
:disabled="page <= 1 || loading"
|
||||
@click="goTo(1)"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-chevrons-left"
|
||||
class="size-4"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="[navButtonClass, 'size-9 sm:size-8']"
|
||||
:aria-label="t('pagination.prev')"
|
||||
:disabled="page <= 1 || loading"
|
||||
@click="goTo(page - 1)"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-chevron-left"
|
||||
class="size-4"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<p
|
||||
v-if="!showMobilePageNumbers"
|
||||
class="min-w-[5.5rem] px-1 text-center text-sm text-muted sm:hidden"
|
||||
>
|
||||
{{ t('pagination.pageStatus', { page, totalPages }) }}
|
||||
</p>
|
||||
|
||||
<template
|
||||
v-for="(target, index) in visiblePages"
|
||||
:key="`${target}-${index}`"
|
||||
>
|
||||
<span
|
||||
v-if="target === 'ellipsis'"
|
||||
class="inline-flex size-9 items-center justify-center text-sm text-muted sm:size-8"
|
||||
:class="showMobilePageNumbers ? '' : 'hidden sm:inline-flex'"
|
||||
aria-hidden="true"
|
||||
>
|
||||
…
|
||||
</span>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="inline-flex items-center justify-center rounded-md border text-sm transition-colors disabled:pointer-events-none disabled:opacity-40"
|
||||
:class="[
|
||||
pageButtonClass(target),
|
||||
showMobilePageNumbers ? 'size-9 sm:size-8' : 'hidden size-8 sm:inline-flex'
|
||||
]"
|
||||
:aria-label="t('pagination.pageNumber', { page: target })"
|
||||
:aria-current="target === page ? 'page' : undefined"
|
||||
:disabled="loading"
|
||||
@click="goTo(target)"
|
||||
>
|
||||
{{ target }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
:class="[navButtonClass, 'size-9 sm:size-8']"
|
||||
:aria-label="t('pagination.next')"
|
||||
:disabled="page >= totalPages || loading"
|
||||
@click="goTo(page + 1)"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-chevron-right"
|
||||
class="size-4"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="[navButtonClass, 'hidden size-8 sm:inline-flex']"
|
||||
:aria-label="t('pagination.last')"
|
||||
:disabled="page >= totalPages || loading"
|
||||
@click="goTo(totalPages)"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-chevrons-right"
|
||||
class="size-4"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form
|
||||
class="hidden items-center gap-1.5 text-sm text-muted sm:flex"
|
||||
@submit.prevent="jumpToPage"
|
||||
>
|
||||
<span>{{ t('pagination.goToPrefix') }}</span>
|
||||
<UInput
|
||||
v-model="jumpPageInput"
|
||||
type="number"
|
||||
min="1"
|
||||
:max="totalPages"
|
||||
size="sm"
|
||||
class="w-14"
|
||||
:aria-label="t('pagination.pagePlaceholder')"
|
||||
:disabled="loading"
|
||||
@blur="jumpToPage"
|
||||
/>
|
||||
<span v-if="t('pagination.goToSuffix')">{{ t('pagination.goToSuffix') }}</span>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
@@ -0,0 +1,120 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
siteKey: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
verified: [payload: { turnstileToken: string }]
|
||||
cleared: []
|
||||
}>()
|
||||
|
||||
interface TurnstileRenderOptions {
|
||||
'sitekey': string
|
||||
'action'?: string
|
||||
'callback'?: (token: string) => void
|
||||
'expired-callback'?: () => void
|
||||
'error-callback'?: () => void
|
||||
}
|
||||
|
||||
interface TurnstileApi {
|
||||
render: (container: HTMLElement, options: TurnstileRenderOptions) => string
|
||||
reset: (widgetId?: string) => void
|
||||
remove: (widgetId: string) => void
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
turnstile?: TurnstileApi
|
||||
onTurnstileLoad?: () => void
|
||||
}
|
||||
}
|
||||
|
||||
const containerRef = ref<HTMLElement | null>(null)
|
||||
const widgetId = ref<string | null>(null)
|
||||
const scriptLoaded = ref(false)
|
||||
|
||||
function onVerified(token: string) {
|
||||
if (token) {
|
||||
emit('verified', { turnstileToken: token })
|
||||
}
|
||||
}
|
||||
|
||||
function onCleared() {
|
||||
emit('cleared')
|
||||
}
|
||||
|
||||
function renderWidget() {
|
||||
if (!containerRef.value || !window.turnstile || !props.siteKey) return
|
||||
if (widgetId.value) {
|
||||
window.turnstile.remove(widgetId.value)
|
||||
widgetId.value = null
|
||||
}
|
||||
widgetId.value = window.turnstile.render(containerRef.value, {
|
||||
'sitekey': props.siteKey,
|
||||
'action': 'login',
|
||||
'callback': onVerified,
|
||||
'expired-callback': onCleared,
|
||||
'error-callback': onCleared
|
||||
})
|
||||
}
|
||||
|
||||
function tryRenderWidget() {
|
||||
if (scriptLoaded.value) {
|
||||
renderWidget()
|
||||
}
|
||||
}
|
||||
|
||||
function loadScript() {
|
||||
if (window.turnstile) {
|
||||
scriptLoaded.value = true
|
||||
tryRenderWidget()
|
||||
return
|
||||
}
|
||||
window.onTurnstileLoad = () => {
|
||||
scriptLoaded.value = true
|
||||
tryRenderWidget()
|
||||
}
|
||||
const existing = document.querySelector('script[data-turnstile]')
|
||||
if (existing) {
|
||||
if (window.turnstile) {
|
||||
scriptLoaded.value = true
|
||||
tryRenderWidget()
|
||||
}
|
||||
return
|
||||
}
|
||||
const script = document.createElement('script')
|
||||
script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit&onload=onTurnstileLoad'
|
||||
script.async = true
|
||||
script.defer = true
|
||||
script.dataset.turnstile = 'true'
|
||||
document.head.appendChild(script)
|
||||
}
|
||||
|
||||
function reset() {
|
||||
if (window.turnstile && widgetId.value) {
|
||||
window.turnstile.reset(widgetId.value)
|
||||
}
|
||||
onCleared()
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
loadScript()
|
||||
await nextTick()
|
||||
tryRenderWidget()
|
||||
})
|
||||
|
||||
watch([containerRef, () => props.siteKey, scriptLoaded], () => {
|
||||
tryRenderWidget()
|
||||
}, { flush: 'post' })
|
||||
|
||||
defineExpose({ reset })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientOnly>
|
||||
<div
|
||||
ref="containerRef"
|
||||
class="flex min-h-16 items-center justify-center"
|
||||
/>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
@@ -1,13 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
embedded?: boolean
|
||||
}>(),
|
||||
{
|
||||
embedded: false
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
back: []
|
||||
}>()
|
||||
@@ -32,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(() => {
|
||||
@@ -41,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
|
||||
}
|
||||
|
||||
@@ -57,17 +49,8 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col overflow-hidden max-sm:overflow-visible"
|
||||
:class="
|
||||
embedded
|
||||
? ''
|
||||
: 'upload-card-surface upload-card-surface--panel max-sm:min-h-0 sm:h-full'
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="flex items-start justify-between gap-3 border-b border-default px-5 py-4 sm:px-6"
|
||||
>
|
||||
<div class="upload-card-surface upload-card-surface--panel flex max-sm:min-h-0 flex-col overflow-hidden max-sm:overflow-visible sm:h-full">
|
||||
<div class="flex items-start justify-between gap-3 border-b border-default px-5 py-4 sm:px-6">
|
||||
<div class="flex min-w-0 items-start gap-2">
|
||||
<UIcon
|
||||
name="i-lucide-settings-2"
|
||||
@@ -83,7 +66,6 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
<UButton
|
||||
v-if="!embedded"
|
||||
:label="t('common.back')"
|
||||
icon="i-lucide-arrow-left"
|
||||
variant="ghost"
|
||||
@@ -95,10 +77,7 @@ onMounted(() => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-5 sm:p-6"
|
||||
:class="embedded ? '' : 'flex flex-1 flex-col justify-center'"
|
||||
>
|
||||
<div class="flex flex-1 flex-col justify-center p-5 sm:p-6">
|
||||
<div class="grid gap-5 sm:grid-cols-3 sm:gap-6">
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-sm font-semibold">
|
||||
@@ -128,9 +107,7 @@ onMounted(() => {
|
||||
class="mt-0.5"
|
||||
/>
|
||||
<span class="min-w-0 flex-1">
|
||||
<span
|
||||
class="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-sm"
|
||||
>
|
||||
<span class="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-sm">
|
||||
<span>{{ t('preferences.autoDeletePrefix') }}</span>
|
||||
<UInput
|
||||
v-model.number="userAutoDeleteDaysDraft"
|
||||
@@ -139,11 +116,7 @@ onMounted(() => {
|
||||
max="3650"
|
||||
size="xs"
|
||||
class="w-14 tabular-nums"
|
||||
:class="
|
||||
userAutoDeleteEnabled
|
||||
? ''
|
||||
: 'pointer-events-none opacity-40'
|
||||
"
|
||||
:class="userAutoDeleteEnabled ? '' : 'pointer-events-none opacity-40'"
|
||||
/>
|
||||
<span>{{ t('preferences.autoDeleteSuffix') }}</span>
|
||||
</span>
|
||||
@@ -171,9 +144,7 @@ onMounted(() => {
|
||||
<p class="text-xs leading-relaxed text-muted">
|
||||
{{ t('preferences.webpQualityHint') }}
|
||||
</p>
|
||||
<div
|
||||
class="flex items-center justify-between gap-2 text-sm text-muted"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-2 text-sm text-muted">
|
||||
<span>{{ t('preferences.current', { n: clientWebpQuality }) }}</span>
|
||||
<span>{{ clientQualityLevel }}</span>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,379 @@
|
||||
<script setup lang="ts">
|
||||
import type { ApiDocEndpoint, ApiDocParam } from '~/composables/useApiDocs'
|
||||
|
||||
const props = defineProps<{
|
||||
endpoint: ApiDocEndpoint
|
||||
token: string
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const toast = useToast()
|
||||
|
||||
const authToken = ref('')
|
||||
const paramValues = ref<Record<string, string>>({})
|
||||
const fileValues = ref<Record<string, File | null>>({})
|
||||
const fileInputRefs = ref<Record<string, HTMLInputElement | null>>({})
|
||||
const sending = ref(false)
|
||||
const responseStatus = ref<number | null>(null)
|
||||
const responseBody = ref('')
|
||||
const responseError = ref(false)
|
||||
|
||||
function isDebugParam(param: ApiDocParam) {
|
||||
if (param.name === 'token' && props.endpoint.requiresAuth) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
const debugQueryParams = computed(() =>
|
||||
props.endpoint.params.filter(p => p.location === 'query' && isDebugParam(p))
|
||||
)
|
||||
|
||||
const debugBodyParams = computed(() =>
|
||||
props.endpoint.params.filter(p =>
|
||||
(p.location === 'form-data' || p.location === 'body') && isDebugParam(p)
|
||||
)
|
||||
)
|
||||
|
||||
const showAuthHeader = computed(() => props.endpoint.requiresAuth)
|
||||
|
||||
watch(
|
||||
() => props.endpoint.id,
|
||||
() => {
|
||||
resetForm()
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.token,
|
||||
(value) => {
|
||||
if (value) {
|
||||
authToken.value = value
|
||||
if (!props.endpoint.requiresAuth && 'token' in paramValues.value) {
|
||||
paramValues.value.token = value
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
function resetForm() {
|
||||
const values: Record<string, string> = {}
|
||||
const files: Record<string, File | null> = {}
|
||||
for (const param of props.endpoint.params) {
|
||||
if (!isDebugParam(param)) continue
|
||||
if (param.type === 'file') {
|
||||
files[param.name] = null
|
||||
} else if (param.name === 'keys') {
|
||||
values[param.name] = '["images/2026/08/example.webp"]'
|
||||
} else if (param.name === 'token' && props.token) {
|
||||
values[param.name] = props.token
|
||||
} else {
|
||||
values[param.name] = ''
|
||||
}
|
||||
}
|
||||
paramValues.value = values
|
||||
fileValues.value = files
|
||||
responseStatus.value = null
|
||||
responseBody.value = ''
|
||||
responseError.value = false
|
||||
}
|
||||
|
||||
function fileLabel(name: string) {
|
||||
return fileValues.value[name]?.name ?? t('api.debug.noFileSelected')
|
||||
}
|
||||
|
||||
function triggerFilePick(name: string) {
|
||||
fileInputRefs.value[name]?.click()
|
||||
}
|
||||
|
||||
function onFileChange(name: string, event: Event) {
|
||||
const input = event.target as HTMLInputElement
|
||||
fileValues.value[name] = input.files?.[0] ?? null
|
||||
}
|
||||
|
||||
function isParamFilled(param: ApiDocParam) {
|
||||
if (param.type === 'file') {
|
||||
return fileValues.value[param.name] != null
|
||||
}
|
||||
const value = paramValues.value[param.name]?.trim() ?? ''
|
||||
if (!value) return false
|
||||
if (param.location === 'body' && param.name === 'keys') {
|
||||
try {
|
||||
const parsed = JSON.parse(value) as { keys?: unknown }
|
||||
return Array.isArray(parsed.keys) && parsed.keys.length > 0
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
const canSendRequest = computed(() => {
|
||||
if (sending.value) return false
|
||||
if (showAuthHeader.value && !authToken.value.trim()) return false
|
||||
const params = [...debugQueryParams.value, ...debugBodyParams.value]
|
||||
return params.every(param => !param.required || isParamFilled(param))
|
||||
})
|
||||
|
||||
function buildUrl() {
|
||||
const url = new URL(props.endpoint.path, window.location.origin)
|
||||
for (const param of debugQueryParams.value) {
|
||||
const value = paramValues.value[param.name]?.trim()
|
||||
if (value) {
|
||||
url.searchParams.set(param.name, value)
|
||||
}
|
||||
}
|
||||
return url.toString()
|
||||
}
|
||||
|
||||
async function sendRequest() {
|
||||
if (!canSendRequest.value) return
|
||||
sending.value = true
|
||||
responseStatus.value = null
|
||||
responseBody.value = ''
|
||||
responseError.value = false
|
||||
|
||||
try {
|
||||
const headers: Record<string, string> = {}
|
||||
if (showAuthHeader.value && authToken.value.trim()) {
|
||||
headers['Auth-Token'] = authToken.value.trim()
|
||||
}
|
||||
|
||||
let body: BodyInit | undefined
|
||||
|
||||
if (debugBodyParams.value.some(p => p.location === 'form-data')) {
|
||||
const formData = new FormData()
|
||||
for (const param of debugBodyParams.value) {
|
||||
if (param.location !== 'form-data') continue
|
||||
if (param.type === 'file') {
|
||||
const file = fileValues.value[param.name]
|
||||
if (file) formData.append(param.name, file)
|
||||
} else {
|
||||
const value = paramValues.value[param.name]?.trim()
|
||||
if (value) formData.append(param.name, value)
|
||||
}
|
||||
}
|
||||
body = formData
|
||||
} else if (debugBodyParams.value.some(p => p.location === 'body')) {
|
||||
headers['Content-Type'] = 'application/json'
|
||||
try {
|
||||
body = JSON.stringify(JSON.parse(paramValues.value.keys || '{}'))
|
||||
} catch {
|
||||
toast.add({ title: t('api.debug.invalidJson'), color: 'error' })
|
||||
sending.value = false
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const response = await fetch(buildUrl(), {
|
||||
method: props.endpoint.method,
|
||||
headers,
|
||||
body,
|
||||
credentials: 'include'
|
||||
})
|
||||
|
||||
responseStatus.value = response.status
|
||||
const text = await response.text()
|
||||
try {
|
||||
responseBody.value = JSON.stringify(JSON.parse(text), null, 2)
|
||||
} catch {
|
||||
responseBody.value = text
|
||||
}
|
||||
responseError.value = !response.ok
|
||||
} catch {
|
||||
responseError.value = true
|
||||
responseBody.value = t('api.debug.networkError')
|
||||
toast.add({ title: t('api.debug.sendFailed'), color: 'error' })
|
||||
} finally {
|
||||
sending.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const responseScrollable = computed(() => responseBody.value.split('\n').length > 14)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="flex w-full shrink-0 flex-col border-t border-default bg-default lg:w-72 lg:border-t-0 lg:border-l xl:w-80">
|
||||
<div class="flex items-start gap-2 border-b border-default px-5 py-4 sm:px-6">
|
||||
<UIcon
|
||||
name="i-lucide-flask-conical"
|
||||
class="mt-0.5 size-5 shrink-0 text-primary"
|
||||
/>
|
||||
<div class="min-w-0">
|
||||
<h3 class="text-base font-semibold">
|
||||
{{ t('api.debug.title') }}
|
||||
</h3>
|
||||
<div class="mt-1.5 flex flex-wrap items-center gap-2">
|
||||
<ApiMethodBadge
|
||||
:method="endpoint.method"
|
||||
size="sm"
|
||||
/>
|
||||
<code class="truncate font-mono text-xs text-muted">
|
||||
{{ endpoint.path }}
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-1 flex-col">
|
||||
<div class="space-y-3 p-5 sm:p-6">
|
||||
<section
|
||||
v-if="showAuthHeader"
|
||||
class="rounded-xl border border-default p-3 sm:p-4"
|
||||
>
|
||||
<h4 class="mb-3 text-xs font-semibold text-highlighted">
|
||||
{{ t('api.debug.headers') }}
|
||||
</h4>
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-xs text-muted">
|
||||
Auth-Token
|
||||
<span class="text-error">*</span>
|
||||
</label>
|
||||
<UInput
|
||||
v-model="authToken"
|
||||
size="sm"
|
||||
class="font-mono text-xs"
|
||||
:placeholder="t('api.debug.tokenPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
v-if="debugQueryParams.length"
|
||||
class="rounded-xl border border-default p-3 sm:p-4"
|
||||
>
|
||||
<h4 class="mb-3 text-xs font-semibold text-highlighted">
|
||||
{{ t('api.debug.query') }}
|
||||
</h4>
|
||||
<div class="space-y-3">
|
||||
<div
|
||||
v-for="param in debugQueryParams"
|
||||
:key="param.name"
|
||||
class="space-y-1.5"
|
||||
>
|
||||
<label class="text-xs text-muted">
|
||||
{{ param.name }}
|
||||
<span
|
||||
v-if="param.required"
|
||||
class="text-error"
|
||||
>*</span>
|
||||
</label>
|
||||
<UInput
|
||||
v-model="paramValues[param.name]"
|
||||
size="sm"
|
||||
class="font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
v-if="debugBodyParams.length"
|
||||
class="rounded-xl border border-default p-3 sm:p-4"
|
||||
>
|
||||
<h4 class="mb-3 text-xs font-semibold text-highlighted">
|
||||
{{ t('api.debug.body') }}
|
||||
</h4>
|
||||
<div class="space-y-3">
|
||||
<div
|
||||
v-for="param in debugBodyParams"
|
||||
:key="param.name"
|
||||
class="space-y-1.5"
|
||||
>
|
||||
<label class="text-xs text-muted">
|
||||
{{ param.name }}
|
||||
<span
|
||||
v-if="param.required"
|
||||
class="text-error"
|
||||
>*</span>
|
||||
</label>
|
||||
|
||||
<div
|
||||
v-if="param.type === 'file'"
|
||||
class="flex items-center gap-2"
|
||||
>
|
||||
<input
|
||||
:ref="(el) => { fileInputRefs[param.name] = el as HTMLInputElement }"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
class="hidden"
|
||||
@change="onFileChange(param.name, $event)"
|
||||
>
|
||||
<UButton
|
||||
size="xs"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
:label="t('api.debug.selectFile')"
|
||||
@click="triggerFilePick(param.name)"
|
||||
/>
|
||||
<span class="min-w-0 truncate text-xs text-muted">
|
||||
{{ fileLabel(param.name) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<UTextarea
|
||||
v-else-if="param.location === 'body'"
|
||||
v-model="paramValues[param.name]"
|
||||
:rows="3"
|
||||
size="sm"
|
||||
class="font-mono text-xs"
|
||||
/>
|
||||
<UInput
|
||||
v-else
|
||||
v-model="paramValues[param.name]"
|
||||
size="sm"
|
||||
class="font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<UButton
|
||||
icon="i-lucide-send"
|
||||
:label="t('api.debug.send')"
|
||||
color="primary"
|
||||
block
|
||||
:loading="sending"
|
||||
:disabled="!canSendRequest"
|
||||
@click="sendRequest"
|
||||
/>
|
||||
|
||||
<section
|
||||
v-if="responseStatus !== null || responseBody"
|
||||
class="overflow-hidden rounded-xl border border-default"
|
||||
>
|
||||
<div class="flex items-center justify-between border-b border-default px-3 py-2">
|
||||
<span class="text-xs font-semibold text-highlighted">
|
||||
{{ t('api.debug.response') }}
|
||||
</span>
|
||||
<UBadge
|
||||
v-if="responseStatus !== null"
|
||||
:color="responseError ? 'error' : 'success'"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ responseStatus }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<pre
|
||||
class="api-debug-response bg-neutral-950 p-3 text-xs leading-relaxed text-neutral-100"
|
||||
:class="responseScrollable ? 'max-h-64 overflow-y-auto' : ''"
|
||||
><code class="font-mono whitespace-pre">{{ responseBody }}</code></pre>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto border-t border-default p-5 sm:p-6">
|
||||
<h4 class="mb-2 text-xs font-semibold">
|
||||
{{ t('api.debug.notesTitle') }}
|
||||
</h4>
|
||||
<ul class="space-y-1 text-xs leading-relaxed text-muted">
|
||||
<li>{{ t('api.debug.noteSuccess') }}</li>
|
||||
<li>{{ t('api.debug.noteError') }}</li>
|
||||
<li>{{ t('api.debug.noteLimit') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
@@ -0,0 +1,121 @@
|
||||
<script setup lang="ts">
|
||||
import type { ApiDocEndpoint } from '~/composables/useApiDocs'
|
||||
|
||||
defineProps<{
|
||||
endpoint: ApiDocEndpoint
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="p-5 sm:p-6">
|
||||
<h2 class="text-base font-semibold">
|
||||
{{ t(endpoint.titleKey) }}
|
||||
</h2>
|
||||
|
||||
<div class="mt-2 flex flex-wrap items-center gap-2">
|
||||
<ApiMethodBadge
|
||||
:method="endpoint.method"
|
||||
size="sm"
|
||||
/>
|
||||
<code class="rounded-md border border-primary/20 bg-primary/10 px-2 py-0.5 font-mono text-sm font-medium text-primary">
|
||||
{{ endpoint.path }}
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<p class="mt-3 text-sm leading-relaxed text-muted">
|
||||
{{ t(endpoint.descKey) }}
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-if="endpoint.params.length"
|
||||
class="mt-5 overflow-hidden rounded-xl border border-default"
|
||||
>
|
||||
<div class="border-b border-default bg-muted/20 px-4 py-2.5">
|
||||
<h3 class="text-sm font-medium">
|
||||
{{ t('api.requestParams') }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full min-w-[32rem] text-left text-sm">
|
||||
<thead>
|
||||
<tr class="border-b border-default text-xs text-muted">
|
||||
<th class="px-4 py-2.5 font-medium">
|
||||
{{ t('api.paramName') }}
|
||||
</th>
|
||||
<th class="px-4 py-2.5 font-medium">
|
||||
{{ t('api.paramType') }}
|
||||
</th>
|
||||
<th class="px-4 py-2.5 font-medium">
|
||||
{{ t('api.paramLocation') }}
|
||||
</th>
|
||||
<th class="px-4 py-2.5 font-medium">
|
||||
{{ t('api.paramRequired') }}
|
||||
</th>
|
||||
<th class="px-4 py-2.5 font-medium">
|
||||
{{ t('api.paramDescription') }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="param in endpoint.params"
|
||||
:key="param.name"
|
||||
class="border-b border-default last:border-b-0"
|
||||
>
|
||||
<td class="px-4 py-2.5 font-mono text-xs">
|
||||
{{ param.name }}
|
||||
<span
|
||||
v-if="param.required"
|
||||
class="text-error"
|
||||
>*</span>
|
||||
</td>
|
||||
<td class="px-4 py-2.5 text-muted">
|
||||
{{ param.type }}
|
||||
</td>
|
||||
<td class="px-4 py-2.5 text-muted">
|
||||
{{ param.location }}
|
||||
</td>
|
||||
<td class="px-4 py-2.5">
|
||||
<UBadge
|
||||
:color="param.required ? 'primary' : 'neutral'"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ param.required ? t('api.required') : t('api.optional') }}
|
||||
</UBadge>
|
||||
</td>
|
||||
<td class="px-4 py-2.5 text-muted">
|
||||
{{ t(param.descriptionKey) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 space-y-4">
|
||||
<div>
|
||||
<p class="mb-2 text-xs font-medium text-muted">
|
||||
{{ t('api.requestExample') }}
|
||||
</p>
|
||||
<ApiCurlBlock
|
||||
:code="endpoint.curl"
|
||||
lang="cURL"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-xs font-medium text-muted">
|
||||
{{ t('api.responseExample') }}
|
||||
<span class="font-normal">200 OK</span>
|
||||
</p>
|
||||
<ApiCurlBlock
|
||||
:code="endpoint.responseExample"
|
||||
lang="JSON"
|
||||
:scrollable="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
import type { ApiDocMethod } from '~/composables/useApiDocs'
|
||||
|
||||
const props = defineProps<{
|
||||
method: ApiDocMethod
|
||||
size?: 'xs' | 'sm'
|
||||
}>()
|
||||
|
||||
const colorClass = computed(() => {
|
||||
switch (props.method) {
|
||||
case 'GET':
|
||||
return 'bg-sky-500/15 text-sky-700 dark:text-sky-300'
|
||||
case 'POST':
|
||||
return 'bg-primary/15 text-primary'
|
||||
case 'DELETE':
|
||||
return 'bg-red-500/15 text-red-700 dark:text-red-300'
|
||||
default:
|
||||
return 'bg-muted text-muted'
|
||||
}
|
||||
})
|
||||
|
||||
const sizeClass = computed(() =>
|
||||
props.size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-1.5 py-0.5 text-[10px]'
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span
|
||||
class="inline-flex shrink-0 rounded font-mono font-semibold leading-none"
|
||||
:class="[colorClass, sizeClass]"
|
||||
>
|
||||
{{ method }}
|
||||
</span>
|
||||
</template>
|
||||
@@ -0,0 +1,148 @@
|
||||
<script setup lang="ts">
|
||||
import type { ApiDocCategory, ApiDocEndpoint } from '~/composables/useApiDocs'
|
||||
|
||||
const props = defineProps<{
|
||||
endpoints: ApiDocEndpoint[]
|
||||
activeId: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
select: [id: string]
|
||||
}>()
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
const search = ref('')
|
||||
const docsUrl = computed(() =>
|
||||
locale.value === 'en'
|
||||
? 'https://o96u.github.io/PicHost/en/guide/api.html'
|
||||
: 'https://o96u.github.io/PicHost/guide/api.html'
|
||||
)
|
||||
|
||||
const categories: { key: ApiDocCategory, labelKey: string }[] = [
|
||||
{ key: 'image', labelKey: 'api.categories.image' },
|
||||
{ key: 'extension', labelKey: 'api.categories.extension' },
|
||||
{ key: 'system', labelKey: 'api.categories.system' }
|
||||
]
|
||||
|
||||
const filteredEndpoints = computed(() => {
|
||||
const q = search.value.trim().toLowerCase()
|
||||
if (!q) return props.endpoints
|
||||
return props.endpoints.filter((endpoint) => {
|
||||
const title = t(endpoint.titleKey).toLowerCase()
|
||||
const path = endpoint.path.toLowerCase()
|
||||
return title.includes(q) || path.includes(q) || endpoint.method.toLowerCase().includes(q)
|
||||
})
|
||||
})
|
||||
|
||||
function endpointsForCategory(category: ApiDocCategory) {
|
||||
return filteredEndpoints.value.filter(endpoint => endpoint.category === category)
|
||||
}
|
||||
|
||||
function onSelect(id: string) {
|
||||
emit('select', id)
|
||||
}
|
||||
|
||||
function onSearchKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape') {
|
||||
search.value = ''
|
||||
event.preventDefault()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const onGlobalKeydown = (event: KeyboardEvent) => {
|
||||
if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
|
||||
event.preventDefault()
|
||||
document.getElementById('api-endpoint-search')?.focus()
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', onGlobalKeydown)
|
||||
onUnmounted(() => window.removeEventListener('keydown', onGlobalKeydown))
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="flex w-full shrink-0 flex-col border-b border-default bg-default lg:w-52 lg:border-b-0 lg:border-r lg:bg-neutral-50 dark:lg:bg-neutral-900/30 xl:w-56">
|
||||
<div class="border-b border-default p-3 sm:p-4">
|
||||
<UInput
|
||||
id="api-endpoint-search"
|
||||
v-model="search"
|
||||
:placeholder="t('api.searchPlaceholder')"
|
||||
icon="i-lucide-search"
|
||||
size="sm"
|
||||
@keydown="onSearchKeydown"
|
||||
>
|
||||
<template #trailing>
|
||||
<UKbd
|
||||
size="sm"
|
||||
class="hidden sm:inline-flex"
|
||||
>
|
||||
⌘K
|
||||
</UKbd>
|
||||
</template>
|
||||
</UInput>
|
||||
</div>
|
||||
|
||||
<nav class="flex-1 overflow-y-auto p-2 sm:p-3">
|
||||
<div
|
||||
v-for="category in categories"
|
||||
:key="category.key"
|
||||
class="mb-4"
|
||||
>
|
||||
<p
|
||||
v-if="endpointsForCategory(category.key).length"
|
||||
class="mb-1.5 px-2 text-xs font-medium text-muted"
|
||||
>
|
||||
{{ t(category.labelKey) }}
|
||||
</p>
|
||||
<ul class="space-y-0.5">
|
||||
<li
|
||||
v-for="endpoint in endpointsForCategory(category.key)"
|
||||
:key="endpoint.id"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left text-sm transition-colors"
|
||||
:class="activeId === endpoint.id
|
||||
? 'bg-primary/10 font-medium text-primary'
|
||||
: 'text-muted hover:bg-muted/40 hover:text-highlighted'"
|
||||
@click="onSelect(endpoint.id)"
|
||||
>
|
||||
<ApiMethodBadge :method="endpoint.method" />
|
||||
<span class="min-w-0 truncate">{{ t(endpoint.titleKey) }}</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="hidden border-t border-default p-3 sm:p-4 lg:block">
|
||||
<div class="rounded-xl border border-primary/15 bg-primary/5 p-3">
|
||||
<div class="flex items-start gap-2.5">
|
||||
<UIcon
|
||||
name="i-lucide-book-open"
|
||||
class="mt-0.5 size-4 shrink-0 text-primary"
|
||||
/>
|
||||
<div class="min-w-0 space-y-2">
|
||||
<p class="text-xs font-medium text-highlighted">
|
||||
{{ t('api.helpTitle') }}
|
||||
</p>
|
||||
<p class="text-xs leading-relaxed text-muted">
|
||||
{{ t('api.helpSubtitle') }}
|
||||
</p>
|
||||
<UButton
|
||||
:label="t('api.viewDocs')"
|
||||
icon="i-lucide-external-link"
|
||||
size="xs"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
:to="docsUrl"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
@@ -0,0 +1,146 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
token: string
|
||||
loading: boolean
|
||||
regenerating: boolean
|
||||
canRegenerate: boolean
|
||||
tokenSource?: 'env' | 'db' | 'none'
|
||||
envTokenOverride?: boolean
|
||||
isAdmin?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
regenerate: []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const toast = useToast()
|
||||
const tokenVisible = ref(false)
|
||||
const copying = ref(false)
|
||||
|
||||
function toggleTokenVisible() {
|
||||
tokenVisible.value = !tokenVisible.value
|
||||
}
|
||||
|
||||
const displayValue = computed(() => {
|
||||
if (!props.token) return t('common.notConfigured')
|
||||
if (tokenVisible.value) return props.token
|
||||
return '•'.repeat(Math.min(props.token.length, 40))
|
||||
})
|
||||
|
||||
function tokenSourceLabel(source: 'env' | 'db' | 'none' | undefined) {
|
||||
switch (source) {
|
||||
case 'env':
|
||||
return t('api.tokenSourceEnv')
|
||||
case 'db':
|
||||
return t('api.tokenSourceDb')
|
||||
default:
|
||||
return t('api.tokenSourceNone')
|
||||
}
|
||||
}
|
||||
|
||||
async function copyToken() {
|
||||
if (!props.token || copying.value) return
|
||||
copying.value = true
|
||||
try {
|
||||
await navigator.clipboard.writeText(props.token)
|
||||
toast.add({ title: t('copy.copied'), color: 'success' })
|
||||
} catch {
|
||||
toast.add({ title: t('copy.failed'), color: 'error' })
|
||||
} finally {
|
||||
copying.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="border-b border-default">
|
||||
<div class="flex items-center gap-2 border-b border-default px-5 py-4 sm:px-6">
|
||||
<UIcon
|
||||
name="i-lucide-key-round"
|
||||
class="size-5 shrink-0 text-primary"
|
||||
/>
|
||||
<h2 class="text-base font-semibold">
|
||||
{{ t('api.tokenTitle') }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 p-5 sm:p-6">
|
||||
<UAlert
|
||||
v-if="envTokenOverride"
|
||||
color="warning"
|
||||
variant="subtle"
|
||||
icon="i-lucide-triangle-alert"
|
||||
:title="t('api.envOverrideTitle')"
|
||||
:description="t('api.envOverrideDesc')"
|
||||
/>
|
||||
|
||||
<UAlert
|
||||
v-else-if="!isAdmin"
|
||||
color="info"
|
||||
variant="subtle"
|
||||
icon="i-lucide-info"
|
||||
:title="t('api.personalTitle')"
|
||||
:description="t('api.personalDesc')"
|
||||
/>
|
||||
|
||||
<UAlert
|
||||
v-else-if="!token && !loading"
|
||||
color="info"
|
||||
variant="subtle"
|
||||
icon="i-lucide-info"
|
||||
:title="t('api.notConfiguredTitle')"
|
||||
:description="t('api.notConfiguredDesc')"
|
||||
/>
|
||||
|
||||
<div class="flex flex-col gap-2 sm:flex-row sm:items-stretch">
|
||||
<UInput
|
||||
:model-value="displayValue"
|
||||
readonly
|
||||
class="min-w-0 flex-1 font-mono text-xs sm:text-sm"
|
||||
:loading="loading"
|
||||
/>
|
||||
<div class="flex gap-2">
|
||||
<UButton
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
:label="tokenVisible ? t('api.hideToken') : t('api.showToken')"
|
||||
@click="toggleTokenVisible"
|
||||
/>
|
||||
<UButton
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
:label="t('common.copy')"
|
||||
:loading="copying"
|
||||
:disabled="!token"
|
||||
@click="copyToken"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-lucide-refresh-cw"
|
||||
:label="t('api.regenerate')"
|
||||
color="primary"
|
||||
variant="soft"
|
||||
size="sm"
|
||||
:loading="regenerating"
|
||||
:disabled="!canRegenerate"
|
||||
@click="emit('regenerate')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-if="tokenSource"
|
||||
class="text-xs text-muted"
|
||||
>
|
||||
{{ tokenSourceLabel(tokenSource) }}
|
||||
· {{ t('api.tokenHeader') }}
|
||||
<code class="font-mono">Auth-Token: <token></code>
|
||||
<template v-if="token && !envTokenOverride">
|
||||
· {{ t('api.tokenInvalidate') }}
|
||||
</template>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,193 @@
|
||||
<script setup lang="ts">
|
||||
const props = withDefaults(defineProps<{
|
||||
searchQuery: string
|
||||
storageBackend: string
|
||||
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,
|
||||
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()
|
||||
|
||||
function setViewMode(mode: 'grid' | 'list') {
|
||||
if (mode === props.viewMode || props.loading) return
|
||||
emit('update:viewMode', mode)
|
||||
}
|
||||
|
||||
function viewButtonClass(active: boolean) {
|
||||
return active
|
||||
? 'border-primary bg-primary/10 text-primary'
|
||||
: 'border-transparent bg-elevated text-muted hover:bg-muted hover:text-default'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form
|
||||
class="flex flex-nowrap items-center gap-2 overflow-x-auto pb-1"
|
||||
@submit.prevent="emit('search')"
|
||||
>
|
||||
<UInput
|
||||
:model-value="searchQuery"
|
||||
icon="i-lucide-search"
|
||||
:placeholder="t('stats.searchPlaceholder')"
|
||||
class="w-40 shrink-0 sm:w-48"
|
||||
size="sm"
|
||||
:disabled="loading"
|
||||
@update:model-value="emit('update:searchQuery', $event)"
|
||||
/>
|
||||
|
||||
<USelect
|
||||
:model-value="storageBackend"
|
||||
:items="storageBackendItems"
|
||||
class="w-28 shrink-0"
|
||||
size="sm"
|
||||
:aria-label="t('stats.storage')"
|
||||
:disabled="loading"
|
||||
@update:model-value="emit('update:storageBackend', $event)"
|
||||
/>
|
||||
|
||||
<USelect
|
||||
:model-value="uploadSource"
|
||||
:items="uploadSourceItems"
|
||||
class="w-28 shrink-0"
|
||||
size="sm"
|
||||
:aria-label="t('stats.filterSource')"
|
||||
:disabled="loading"
|
||||
@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"
|
||||
size="sm"
|
||||
color="primary"
|
||||
class="shrink-0"
|
||||
:aria-label="t('common.search')"
|
||||
:loading="loading"
|
||||
>
|
||||
{{ t('common.search') }}
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
type="button"
|
||||
icon="i-lucide-rotate-ccw"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
class="shrink-0"
|
||||
:aria-label="t('stats.resetFilters')"
|
||||
:disabled="loading"
|
||||
@click="emit('reset')"
|
||||
>
|
||||
{{ 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"
|
||||
icon="i-lucide-trash-2"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="error"
|
||||
class="shrink-0"
|
||||
:disabled="!selectedCount || loading"
|
||||
@click="emit('batch-delete')"
|
||||
>
|
||||
{{ t('stats.batchDelete') }}
|
||||
</UButton>
|
||||
|
||||
<div
|
||||
class="inline-flex shrink-0 overflow-hidden rounded-md border border-default"
|
||||
role="group"
|
||||
:aria-label="t('stats.viewMode')"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex size-8 items-center justify-center border-r border-default transition-colors disabled:pointer-events-none disabled:opacity-40"
|
||||
:class="viewButtonClass(viewMode === 'grid')"
|
||||
:aria-label="t('stats.viewGrid')"
|
||||
:aria-pressed="viewMode === 'grid'"
|
||||
:disabled="loading"
|
||||
@click="setViewMode('grid')"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-layout-grid"
|
||||
class="size-4"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex size-8 items-center justify-center transition-colors disabled:pointer-events-none disabled:opacity-40"
|
||||
:class="viewButtonClass(viewMode === 'list')"
|
||||
:aria-label="t('stats.viewList')"
|
||||
:aria-pressed="viewMode === 'list'"
|
||||
:disabled="loading"
|
||||
@click="setViewMode('list')"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-list"
|
||||
class="size-4"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
@@ -0,0 +1,336 @@
|
||||
<script setup lang="ts">
|
||||
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
|
||||
})
|
||||
|
||||
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(() =>
|
||||
props.items.length > 0 && props.items.every(item => props.selectedKeys.has(item.key))
|
||||
)
|
||||
|
||||
const someSelected = computed(() =>
|
||||
props.items.some(item => props.selectedKeys.has(item.key))
|
||||
)
|
||||
|
||||
const headerIndeterminate = computed(() => someSelected.value && !allSelected.value)
|
||||
|
||||
function updateSelection(key: string, selected: boolean) {
|
||||
const next = new Set(props.selectedKeys)
|
||||
if (selected) next.add(key)
|
||||
else next.delete(key)
|
||||
emit('update:selectedKeys', next)
|
||||
}
|
||||
|
||||
function toggleAll(value: boolean | 'indeterminate') {
|
||||
if (value === true) {
|
||||
emit('update:selectedKeys', new Set(props.items.map(item => item.key)))
|
||||
return
|
||||
}
|
||||
emit('update:selectedKeys', new Set())
|
||||
}
|
||||
|
||||
function formatUploadedAt(value: string) {
|
||||
try {
|
||||
const date = new Date(value)
|
||||
const y = date.getFullYear()
|
||||
const m = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const d = String(date.getDate()).padStart(2, '0')
|
||||
const h = String(date.getHours()).padStart(2, '0')
|
||||
const min = String(date.getMinutes()).padStart(2, '0')
|
||||
const s = String(date.getSeconds()).padStart(2, '0')
|
||||
return `${y}/${m}/${d} ${h}:${min}:${s}`
|
||||
} catch {
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
function sourceLabel(image: ImageItem) {
|
||||
switch (image.uploadSource) {
|
||||
case 'web':
|
||||
return t('stats.tagWeb')
|
||||
case 'api':
|
||||
return t('stats.tagApi')
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
<div
|
||||
v-if="items.length"
|
||||
class="overflow-hidden rounded-xl border border-default bg-default"
|
||||
>
|
||||
<div class="overflow-x-auto">
|
||||
<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-3 py-2.5 text-left font-medium"
|
||||
>
|
||||
<UCheckbox
|
||||
:model-value="allSelected ? true : headerIndeterminate ? 'indeterminate' : false"
|
||||
:aria-label="t('stats.selectAll')"
|
||||
@update:model-value="toggleAll"
|
||||
/>
|
||||
</th>
|
||||
<th class="min-w-[14rem] px-3 py-2.5 text-left font-medium">
|
||||
{{ t('stats.colFilename') }}
|
||||
</th>
|
||||
<th class="hidden w-24 px-3 py-2.5 text-left font-medium sm:table-cell">
|
||||
{{ t('stats.colSource') }}
|
||||
</th>
|
||||
<th class="w-20 px-3 py-2.5 text-left font-medium">
|
||||
{{ t('stats.colSize') }}
|
||||
</th>
|
||||
<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-40 px-3 py-2.5 text-left font-medium lg:table-cell">
|
||||
{{ t('stats.colUploadedAt') }}
|
||||
</th>
|
||||
<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>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-default">
|
||||
<tr
|
||||
v-for="image in items"
|
||||
:key="image.key"
|
||||
class="transition-colors hover:bg-elevated/50"
|
||||
:class="selectedKeys.has(image.key) ? 'bg-primary/5' : ''"
|
||||
>
|
||||
<td
|
||||
v-if="selectable"
|
||||
class="px-3 py-2"
|
||||
>
|
||||
<UCheckbox
|
||||
:model-value="selectedKeys.has(image.key)"
|
||||
@update:model-value="updateSelection(image.key, $event === true)"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-3 py-2.5">
|
||||
<div class="flex min-w-0 items-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
class="relative size-12 shrink-0 overflow-hidden rounded-md border border-default bg-muted"
|
||||
:aria-label="t('image.openPreview')"
|
||||
@click="emit('preview', image)"
|
||||
>
|
||||
<img
|
||||
:src="image.url"
|
||||
:alt="image.originalName"
|
||||
loading="lazy"
|
||||
class="size-full object-cover"
|
||||
>
|
||||
</button>
|
||||
<p
|
||||
class="min-w-0 flex-1 truncate text-highlighted"
|
||||
:title="image.originalName"
|
||||
>
|
||||
{{ image.originalName }}
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
<td class="hidden px-3 py-2 sm:table-cell">
|
||||
<span
|
||||
v-if="sourceLabel(image) && sourceIcon(image)"
|
||||
:class="metaBadgeClass"
|
||||
>
|
||||
<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-3 py-2 tabular-nums text-muted">
|
||||
{{ formatFileSize(image.size) }}
|
||||
</td>
|
||||
<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-3 py-2 tabular-nums text-muted lg:table-cell">
|
||||
{{ formatUploadedAt(image.uploadedAt) }}
|
||||
</td>
|
||||
<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"
|
||||
icon-only
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
:label="t('common.copy')"
|
||||
:value="image.url"
|
||||
:success-title="t('copy.copiedUrl')"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-lucide-eye"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
size="xs"
|
||||
:aria-label="t('image.openPreview')"
|
||||
@click="emit('preview', image)"
|
||||
/>
|
||||
<UButton
|
||||
v-if="showDelete"
|
||||
icon="i-lucide-trash-2"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
size="xs"
|
||||
:aria-label="t('common.delete')"
|
||||
@click="emit('delete', image)"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="rounded-xl border border-dashed border-default py-16 text-center text-xs text-muted"
|
||||
>
|
||||
{{ displayEmptyText }}
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,55 @@
|
||||
<script setup lang="ts">
|
||||
import type { ImageItem } from '~/types/image'
|
||||
|
||||
const props = defineProps<{
|
||||
items: ImageItem[]
|
||||
selectedKeys: Set<string>
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:selectedKeys': [value: Set<string>]
|
||||
'clear': []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const allSelected = computed(() =>
|
||||
props.items.length > 0 && props.items.every(item => props.selectedKeys.has(item.key))
|
||||
)
|
||||
|
||||
const someSelected = computed(() =>
|
||||
props.items.some(item => props.selectedKeys.has(item.key))
|
||||
)
|
||||
|
||||
const indeterminate = computed(() => someSelected.value && !allSelected.value)
|
||||
|
||||
function toggleAll(value: boolean | 'indeterminate') {
|
||||
if (value === true) {
|
||||
emit('update:selectedKeys', new Set(props.items.map(item => item.key)))
|
||||
return
|
||||
}
|
||||
emit('update:selectedKeys', new Set())
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex min-w-0 items-center gap-3">
|
||||
<UCheckbox
|
||||
:model-value="allSelected ? true : indeterminate ? 'indeterminate' : false"
|
||||
:disabled="!items.length"
|
||||
:aria-label="t('stats.selectAll')"
|
||||
@update:model-value="toggleAll"
|
||||
/>
|
||||
<p class="text-sm text-muted">
|
||||
{{ t('stats.selectedItems', { n: selectedKeys.size }) }}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
class="text-sm text-primary hover:underline disabled:pointer-events-none disabled:opacity-40"
|
||||
:disabled="selectedKeys.size === 0"
|
||||
@click="emit('clear')"
|
||||
>
|
||||
{{ t('stats.clear') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,238 @@
|
||||
<script setup lang="ts">
|
||||
export interface GalleryStatsData {
|
||||
uploadToday: number
|
||||
uploadYesterday: number
|
||||
uploadMonth: number
|
||||
uploadLastMonth: number
|
||||
uploadTotal: number
|
||||
storedCount: number
|
||||
uploadBytesTotal: number
|
||||
bySource: {
|
||||
web: number
|
||||
api: number
|
||||
}
|
||||
storageUsage: {
|
||||
usedBytes: number
|
||||
totalBytes: number | null
|
||||
percent: number | null
|
||||
}
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
stats: GalleryStatsData | null
|
||||
loading?: boolean
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const { formatFileSize } = useFileSize()
|
||||
|
||||
const SOURCE_COLORS = ['var(--ui-primary)', '#10b981'] as const
|
||||
|
||||
const sourceItems = computed(() => {
|
||||
const bySource = props.stats?.bySource
|
||||
if (!bySource) return []
|
||||
return [
|
||||
{ key: 'web', label: t('stats.sourceWeb'), count: bySource.web, color: SOURCE_COLORS[0] },
|
||||
{ key: 'api', label: t('stats.sourceApi'), count: bySource.api, color: SOURCE_COLORS[1] }
|
||||
]
|
||||
})
|
||||
|
||||
const sourceTotal = computed(() =>
|
||||
sourceItems.value.reduce((sum, item) => sum + item.count, 0)
|
||||
)
|
||||
|
||||
function sourcePercent(count: number) {
|
||||
if (!sourceTotal.value) return 0
|
||||
return Math.round((count / sourceTotal.value) * 100)
|
||||
}
|
||||
|
||||
function formatTrend(current: number, previous: number) {
|
||||
if (previous === 0) {
|
||||
if (current === 0) {
|
||||
return { text: t('stats.trendFlat'), tone: 'muted' as const }
|
||||
}
|
||||
return { text: t('stats.trendUp', { p: 100 }), tone: 'up' as const }
|
||||
}
|
||||
const change = Math.round(((current - previous) / previous) * 100)
|
||||
if (change > 0) {
|
||||
return { text: t('stats.trendUp', { p: change }), tone: 'up' as const }
|
||||
}
|
||||
if (change < 0) {
|
||||
return { text: t('stats.trendDown', { p: Math.abs(change) }), tone: 'down' as const }
|
||||
}
|
||||
return { text: t('stats.trendFlat'), tone: 'muted' as const }
|
||||
}
|
||||
|
||||
const todayTrend = computed(() =>
|
||||
formatTrend(props.stats?.uploadToday ?? 0, props.stats?.uploadYesterday ?? 0)
|
||||
)
|
||||
|
||||
const monthTrend = computed(() =>
|
||||
formatTrend(props.stats?.uploadMonth ?? 0, props.stats?.uploadLastMonth ?? 0)
|
||||
)
|
||||
|
||||
const usageLabel = computed(() => {
|
||||
const usage = props.stats?.storageUsage
|
||||
if (!usage) return '—'
|
||||
const used = formatFileSize(usage.usedBytes)
|
||||
if (usage.totalBytes) {
|
||||
return `${used} / ${formatFileSize(usage.totalBytes)}`
|
||||
}
|
||||
return used
|
||||
})
|
||||
|
||||
const usagePercent = computed(() => {
|
||||
const percent = props.stats?.storageUsage.percent
|
||||
if (percent == null) return null
|
||||
return Math.min(percent, 100)
|
||||
})
|
||||
|
||||
const usageBarWidth = computed(() => {
|
||||
const usage = props.stats?.storageUsage
|
||||
if (!usage?.totalBytes || usagePercent.value == null) return 0
|
||||
return Math.max(usagePercent.value, usage.usedBytes > 0 ? 4 : 0)
|
||||
})
|
||||
|
||||
function displayValue(value: number | undefined) {
|
||||
if (props.loading) return '—'
|
||||
return value ?? '—'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-6">
|
||||
<div class="rounded-xl border border-default bg-elevated p-4">
|
||||
<p class="text-xs text-muted">
|
||||
{{ t('stats.uploadToday') }}
|
||||
</p>
|
||||
<p class="mt-2 text-2xl font-semibold tabular-nums text-highlighted">
|
||||
{{ displayValue(stats?.uploadToday) }}
|
||||
</p>
|
||||
<p
|
||||
class="mt-2 text-xs"
|
||||
:class="{
|
||||
'text-primary': todayTrend.tone === 'up',
|
||||
'text-muted': todayTrend.tone === 'muted',
|
||||
'text-orange-600 dark:text-orange-400': todayTrend.tone === 'down'
|
||||
}"
|
||||
>
|
||||
{{ t('stats.vsYesterday') }} {{ todayTrend.text }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-default bg-elevated p-4">
|
||||
<p class="text-xs text-muted">
|
||||
{{ t('stats.uploadMonth') }}
|
||||
</p>
|
||||
<p class="mt-2 text-2xl font-semibold tabular-nums text-highlighted">
|
||||
{{ displayValue(stats?.uploadMonth) }}
|
||||
</p>
|
||||
<p
|
||||
class="mt-2 text-xs"
|
||||
:class="{
|
||||
'text-primary': monthTrend.tone === 'up',
|
||||
'text-muted': monthTrend.tone === 'muted',
|
||||
'text-orange-600 dark:text-orange-400': monthTrend.tone === 'down'
|
||||
}"
|
||||
>
|
||||
{{ t('stats.vsLastMonth') }} {{ monthTrend.text }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-default bg-elevated p-4">
|
||||
<p class="text-xs text-muted">
|
||||
{{ t('stats.uploadTotal') }}
|
||||
</p>
|
||||
<p class="mt-2 text-2xl font-semibold tabular-nums text-highlighted">
|
||||
{{ displayValue(stats?.uploadTotal) }}
|
||||
</p>
|
||||
<p class="mt-2 text-xs text-muted">
|
||||
{{ t('stats.totalFiles') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-default bg-elevated p-4">
|
||||
<p class="text-xs text-muted">
|
||||
{{ t('stats.storedCount') }}
|
||||
</p>
|
||||
<p class="mt-2 text-2xl font-semibold tabular-nums text-highlighted">
|
||||
{{ displayValue(stats?.storedCount) }}
|
||||
</p>
|
||||
<p class="mt-2 text-xs text-muted">
|
||||
{{ stats ? t('stats.totalOccupied', { size: formatFileSize(stats.uploadBytesTotal) }) : '—' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-default bg-elevated p-4">
|
||||
<p class="text-xs text-muted">
|
||||
{{ t('stats.storageUsage') }}
|
||||
</p>
|
||||
<p class="mt-2 text-sm font-semibold tabular-nums text-highlighted sm:text-base">
|
||||
{{ usageLabel }}
|
||||
</p>
|
||||
<div
|
||||
v-if="stats?.storageUsage.totalBytes"
|
||||
class="mt-3 space-y-1"
|
||||
>
|
||||
<div class="h-1.5 overflow-hidden rounded-full bg-muted/50">
|
||||
<div
|
||||
class="h-full rounded-full bg-primary transition-all"
|
||||
:style="{ width: `${usageBarWidth}%` }"
|
||||
/>
|
||||
</div>
|
||||
<p class="text-right text-xs tabular-nums text-muted">
|
||||
{{ usagePercent }}%
|
||||
</p>
|
||||
</div>
|
||||
<p
|
||||
v-else
|
||||
class="mt-2 text-xs text-muted"
|
||||
>
|
||||
{{ t('stats.noQuota') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-span-2 rounded-xl border border-default bg-elevated p-4 sm:col-span-1">
|
||||
<p class="text-xs text-muted">
|
||||
{{ t('stats.sourceDistribution') }}
|
||||
</p>
|
||||
<div
|
||||
v-if="!sourceTotal"
|
||||
class="mt-4 text-xs text-muted"
|
||||
>
|
||||
{{ t('stats.noData') }}
|
||||
</div>
|
||||
<ul
|
||||
v-else
|
||||
class="mt-3 space-y-3"
|
||||
>
|
||||
<li
|
||||
v-for="item in sourceItems"
|
||||
:key="item.key"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-2 text-xs">
|
||||
<span class="flex min-w-0 items-center gap-1.5">
|
||||
<span
|
||||
class="size-2 shrink-0 rounded-full"
|
||||
:style="{ background: item.color }"
|
||||
/>
|
||||
<span class="truncate">{{ item.label }}</span>
|
||||
</span>
|
||||
<span class="shrink-0 tabular-nums text-muted">
|
||||
{{ item.count }} ({{ sourcePercent(item.count) }}%)
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-1.5 h-1.5 overflow-hidden rounded-full bg-muted/40">
|
||||
<div
|
||||
class="h-full rounded-full transition-[width]"
|
||||
:style="{
|
||||
width: `${sourcePercent(item.count)}%`,
|
||||
backgroundColor: item.color
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div class="divide-y divide-default">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,557 @@
|
||||
<script setup lang="ts">
|
||||
import type { ActivityLogListResponse, LogAction, LogSource, LogStatus } from '~/types/logs'
|
||||
|
||||
const { isAuthenticated, handleAuthError, isAdmin } = useAuth()
|
||||
const toast = useToast()
|
||||
const { t, locale } = useI18n()
|
||||
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 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.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 }
|
||||
])
|
||||
|
||||
const userItems = computed(() => {
|
||||
const items: Array<{ label: string, value: 'all' | number }> = [
|
||||
{ label: t('logs.filterUserAll'), value: 'all' }
|
||||
]
|
||||
for (const user of listData.value?.users ?? []) {
|
||||
items.push({ label: user.username, value: user.id })
|
||||
}
|
||||
return items
|
||||
})
|
||||
|
||||
function formatTime(value: string) {
|
||||
try {
|
||||
return new Date(value).toLocaleString(locale.value, { hour12: false })
|
||||
} catch {
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
function formatTimeShort(value: string) {
|
||||
try {
|
||||
return new Date(value).toLocaleString(locale.value, {
|
||||
month: 'numeric',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false
|
||||
})
|
||||
} catch {
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
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'
|
||||
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) {
|
||||
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 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`
|
||||
}
|
||||
}
|
||||
|
||||
function statusLabel(status: LogStatus) {
|
||||
return status === 'failure' ? t('logs.resultFailure') : t('logs.resultSuccess')
|
||||
}
|
||||
|
||||
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() {
|
||||
loading.value = true
|
||||
try {
|
||||
const query: Record<string, string | number> = {
|
||||
page: page.value,
|
||||
limit: pageSize.value
|
||||
}
|
||||
if (actionFilter.value !== 'all') {
|
||||
query.action = actionFilter.value
|
||||
}
|
||||
if (sourceFilter.value !== 'all') {
|
||||
query.source = sourceFilter.value
|
||||
}
|
||||
if (isAdmin.value && userFilter.value !== 'all') {
|
||||
query.userId = userFilter.value
|
||||
}
|
||||
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',
|
||||
query
|
||||
})
|
||||
page.value = listData.value.page
|
||||
} catch (error: unknown) {
|
||||
handleAuthError(error)
|
||||
if (isAuthenticated.value) {
|
||||
toast.add({ title: t('logs.loadFailed'), color: 'error' })
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function applyFilters() {
|
||||
page.value = 1
|
||||
void loadLogs()
|
||||
}
|
||||
|
||||
function submitSearch() {
|
||||
activeSearch.value = searchQuery.value.trim()
|
||||
applyFilters()
|
||||
}
|
||||
|
||||
function clearSearch() {
|
||||
searchQuery.value = ''
|
||||
activeSearch.value = ''
|
||||
applyFilters()
|
||||
}
|
||||
|
||||
function handlePageChange(target: number) {
|
||||
page.value = target
|
||||
void 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="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
|
||||
icon="i-lucide-refresh-cw"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
size="sm"
|
||||
:label="t('common.refresh')"
|
||||
:loading="loading"
|
||||
class="shrink-0"
|
||||
@click="loadLogs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<form
|
||||
class="mb-4 flex flex-col gap-3"
|
||||
@submit.prevent="submitSearch"
|
||||
>
|
||||
<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 xl:justify-end">
|
||||
<USelect
|
||||
v-if="isAdmin"
|
||||
v-model="userFilter"
|
||||
:items="userItems"
|
||||
value-key="value"
|
||||
class="min-w-0 w-full sm:w-32"
|
||||
size="sm"
|
||||
@update:model-value="applyFilters"
|
||||
/>
|
||||
<USelect
|
||||
v-model="actionFilter"
|
||||
:items="actionItems"
|
||||
value-key="value"
|
||||
class="min-w-0 w-[calc(50%-0.25rem)] sm:w-28"
|
||||
size="sm"
|
||||
@update:model-value="applyFilters"
|
||||
/>
|
||||
<USelect
|
||||
v-model="sourceFilter"
|
||||
:items="sourceItems"
|
||||
value-key="value"
|
||||
class="min-w-0 w-[calc(50%-0.25rem)] sm:w-28"
|
||||
size="sm"
|
||||
@update:model-value="applyFilters"
|
||||
/>
|
||||
<div class="flex min-w-0 w-full items-center gap-2 sm:w-auto">
|
||||
<UInput
|
||||
v-model="searchQuery"
|
||||
icon="i-lucide-search"
|
||||
:placeholder="t('logs.searchPlaceholder')"
|
||||
class="min-w-0 flex-1 sm:w-44 sm:flex-none"
|
||||
size="sm"
|
||||
:disabled="loading"
|
||||
/>
|
||||
<UButton
|
||||
type="submit"
|
||||
size="sm"
|
||||
class="shrink-0"
|
||||
:loading="loading"
|
||||
>
|
||||
{{ t('common.search') }}
|
||||
</UButton>
|
||||
<UButton
|
||||
v-if="activeSearch"
|
||||
type="button"
|
||||
icon="i-lucide-x"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
class="shrink-0"
|
||||
:aria-label="t('stats.clear')"
|
||||
@click="clearSearch"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<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>
|
||||
|
||||
<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">
|
||||
{{ 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"
|
||||
/>
|
||||
{{ actionLabel(row.action) }}
|
||||
</span>
|
||||
<span :class="sourceBadgeClass(row.source)">
|
||||
<UIcon
|
||||
:name="sourceIcon(row.source)"
|
||||
class="size-3 shrink-0"
|
||||
/>
|
||||
{{ sourceLabel(row.source) }}
|
||||
</span>
|
||||
<span
|
||||
v-if="isAdmin"
|
||||
class="text-xs text-muted"
|
||||
>
|
||||
{{ row.username ?? '—' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p
|
||||
class="mt-2 truncate text-sm"
|
||||
:title="row.originalName"
|
||||
>
|
||||
{{ row.originalName }}
|
||||
</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
|
||||
class="size-1.5 rounded-full"
|
||||
:class="statusDotClass(row.status)"
|
||||
/>
|
||||
{{ 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>
|
||||
|
||||
<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>
|
||||
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<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>
|
||||
@@ -0,0 +1,39 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
title: string
|
||||
hint?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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
|
||||
class="h-4 w-1 shrink-0 rounded-full bg-primary"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<h2 class="text-sm font-semibold text-highlighted">
|
||||
{{ title }}
|
||||
</h2>
|
||||
</div>
|
||||
<p
|
||||
v-if="hint"
|
||||
class="mt-1.5 pl-3 text-xs leading-relaxed text-muted"
|
||||
>
|
||||
{{ hint }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
v-if="$slots.action"
|
||||
class="shrink-0"
|
||||
>
|
||||
<slot name="action" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-default px-4">
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
hasChanges: boolean
|
||||
saving: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
save: []
|
||||
restore: []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="border-t border-default bg-default px-4 py-4 sm:px-6">
|
||||
<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"
|
||||
color="primary"
|
||||
:loading="saving"
|
||||
:disabled="!hasChanges"
|
||||
@click="emit('save')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,75 @@
|
||||
<script setup lang="ts">
|
||||
import type { SettingsTab } from '~/types/settings'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: SettingsTab
|
||||
items: Array<{ id: SettingsTab, label: string, icon: 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 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 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="selectTab(item.id)"
|
||||
>
|
||||
<UIcon
|
||||
:name="item.icon"
|
||||
class="size-4 shrink-0"
|
||||
:class="modelValue === item.id ? 'text-primary' : 'opacity-70'"
|
||||
/>
|
||||
<span>{{ item.label }}</span>
|
||||
</button>
|
||||
</nav>
|
||||
</aside>
|
||||
</template>
|
||||
@@ -0,0 +1,68 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
appVersion: string
|
||||
updateAvailable: boolean
|
||||
latestVersion: string | null
|
||||
releaseUrl: string | null
|
||||
checking: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
checkUpdate: []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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
|
||||
v-if="updateAvailable && latestVersion"
|
||||
color="warning"
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
>
|
||||
{{ 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-primary hover:underline"
|
||||
>
|
||||
{{ t('settings.viewReleases') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
title?: string
|
||||
hint?: string
|
||||
disabled?: boolean
|
||||
}>()
|
||||
|
||||
const model = defineModel<boolean>({ required: true })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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">
|
||||
{{ title }}
|
||||
</slot>
|
||||
</p>
|
||||
<p
|
||||
v-if="hint || $slots.hint"
|
||||
class="mt-1 text-xs leading-relaxed text-muted"
|
||||
>
|
||||
<slot name="hint">
|
||||
{{ hint }}
|
||||
</slot>
|
||||
</p>
|
||||
</div>
|
||||
<USwitch
|
||||
v-model="model"
|
||||
:disabled="disabled"
|
||||
class="mt-0.5 shrink-0"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,329 @@
|
||||
<script setup lang="ts">
|
||||
type PolicySource = 'env' | 'db' | 'default'
|
||||
type MimeType = 'image/jpeg' | 'image/png' | 'image/webp' | 'image/gif' | 'image/svg+xml' | 'image/x-icon'
|
||||
|
||||
defineProps<{
|
||||
part: 'upload-preference' | 'image-processing' | 'login-rate'
|
||||
uploadMaxFileSizeMbSource?: PolicySource
|
||||
allowedMimeTypesSource?: PolicySource
|
||||
uploadRateIpMaxSource?: PolicySource
|
||||
uploadRateTokenMaxSource?: PolicySource
|
||||
uploadRateWindowMinutesSource?: PolicySource
|
||||
loginRateMaxSource?: PolicySource
|
||||
loginRateWindowMinutesSource?: PolicySource
|
||||
preserveOriginalUploadSource?: PolicySource
|
||||
mimeTypeOptions?: ReadonlyArray<{ mime: MimeType, label: string }>
|
||||
}>()
|
||||
|
||||
const uploadMaxFileSizeMbDraft = defineModel<number>('uploadMaxFileSizeMb')
|
||||
const allowedMimeTypesDraft = defineModel<MimeType[]>('allowedMimeTypes')
|
||||
const uploadRateIpMaxDraft = defineModel<number>('uploadRateIpMax')
|
||||
const uploadRateTokenMaxDraft = defineModel<number>('uploadRateTokenMax')
|
||||
const uploadRateWindowMinutesDraft = defineModel<number>('uploadRateWindowMinutes')
|
||||
const loginRateMaxDraft = defineModel<number>('loginRateMax')
|
||||
const loginRateWindowMinutesDraft = defineModel<number>('loginRateWindowMinutes')
|
||||
const preserveOriginalUploadDraft = defineModel<boolean>('preserveOriginalUpload')
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
function sourceBadge(source: PolicySource) {
|
||||
switch (source) {
|
||||
case 'env':
|
||||
return { label: t('settings.badgeEnv'), color: 'warning' as const }
|
||||
case 'db':
|
||||
return { label: t('settings.badgeSaved'), color: 'success' as const }
|
||||
default:
|
||||
return { label: t('settings.badgeDefault'), color: 'neutral' as const }
|
||||
}
|
||||
}
|
||||
|
||||
function toggleMime(mime: MimeType, checked: boolean) {
|
||||
if (!allowedMimeTypesDraft.value) return
|
||||
if (checked) {
|
||||
if (!allowedMimeTypesDraft.value.includes(mime)) {
|
||||
allowedMimeTypesDraft.value = [...allowedMimeTypesDraft.value, mime]
|
||||
}
|
||||
return
|
||||
}
|
||||
if (allowedMimeTypesDraft.value.length <= 1) return
|
||||
allowedMimeTypesDraft.value = allowedMimeTypesDraft.value.filter(item => item !== mime)
|
||||
}
|
||||
|
||||
function isMimeChecked(mime: MimeType): boolean {
|
||||
return allowedMimeTypesDraft.value?.includes(mime) ?? false
|
||||
}
|
||||
|
||||
function clampUploadMaxFileSizeMb(value: unknown): number {
|
||||
const num = Number(value)
|
||||
if (!Number.isFinite(num)) return uploadMaxFileSizeMbDraft.value ?? 10
|
||||
return Math.min(100, Math.max(1, Math.round(num)))
|
||||
}
|
||||
|
||||
function onUploadMaxFileSizeInput(event: Event) {
|
||||
uploadMaxFileSizeMbDraft.value = clampUploadMaxFileSizeMb(
|
||||
(event.target as HTMLInputElement).value
|
||||
)
|
||||
}
|
||||
|
||||
function onUploadMaxFileSizeNumberInput(value: string | number) {
|
||||
uploadMaxFileSizeMbDraft.value = clampUploadMaxFileSizeMb(value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="part === 'upload-preference'">
|
||||
<div class="py-4">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('settings.uploadMaxFileSize') }}
|
||||
</p>
|
||||
<UBadge
|
||||
v-if="uploadMaxFileSizeMbSource"
|
||||
:color="sourceBadge(uploadMaxFileSizeMbSource).color"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceBadge(uploadMaxFileSizeMbSource).label }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<p class="mt-1 text-xs leading-relaxed text-muted">
|
||||
{{ t('settings.uploadMaxFileSizeHint') }}
|
||||
</p>
|
||||
<div
|
||||
class="mt-3 flex items-center gap-3"
|
||||
:class="uploadMaxFileSizeMbSource === 'env' ? 'pointer-events-none opacity-60' : ''"
|
||||
>
|
||||
<input
|
||||
type="range"
|
||||
min="1"
|
||||
max="100"
|
||||
:value="uploadMaxFileSizeMbDraft"
|
||||
class="h-1.5 min-w-0 flex-1 cursor-pointer appearance-none rounded-full bg-muted accent-primary"
|
||||
:disabled="uploadMaxFileSizeMbSource === 'env'"
|
||||
@input="onUploadMaxFileSizeInput"
|
||||
>
|
||||
<div class="flex shrink-0 items-center gap-1.5">
|
||||
<UInput
|
||||
:model-value="uploadMaxFileSizeMbDraft"
|
||||
type="number"
|
||||
:min="1"
|
||||
:max="100"
|
||||
size="xs"
|
||||
class="w-14 tabular-nums"
|
||||
:disabled="uploadMaxFileSizeMbSource === 'env'"
|
||||
@update:model-value="onUploadMaxFileSizeNumberInput"
|
||||
/>
|
||||
<span class="text-xs text-muted">MB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-4">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('settings.allowedMimeTypes') }}
|
||||
</p>
|
||||
<UBadge
|
||||
v-if="allowedMimeTypesSource"
|
||||
:color="sourceBadge(allowedMimeTypesSource).color"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceBadge(allowedMimeTypesSource).label }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<p class="mt-1 text-xs leading-relaxed text-muted">
|
||||
{{ t('settings.allowedMimeTypesHint') }}
|
||||
</p>
|
||||
<div
|
||||
class="mt-3 flex flex-wrap gap-2"
|
||||
:class="allowedMimeTypesSource === 'env' ? 'pointer-events-none opacity-60' : ''"
|
||||
>
|
||||
<label
|
||||
v-for="option in mimeTypeOptions ?? []"
|
||||
:key="option.mime"
|
||||
class="inline-flex cursor-pointer items-center gap-2 rounded-lg border px-3 py-2 text-sm transition-colors"
|
||||
:class="isMimeChecked(option.mime)
|
||||
? 'border-primary/40 bg-primary/5'
|
||||
: 'border-default bg-muted/20 hover:bg-muted/40'"
|
||||
:title="option.mime"
|
||||
>
|
||||
<UCheckbox
|
||||
:model-value="isMimeChecked(option.mime)"
|
||||
@update:model-value="(v) => toggleMime(option.mime, v === true)"
|
||||
@click.stop
|
||||
/>
|
||||
<span class="font-medium text-highlighted">{{ option.label }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-4">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('settings.uploadRateGroup') }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs leading-relaxed text-muted">
|
||||
{{ t('settings.uploadRateFootnote') }}
|
||||
</p>
|
||||
<div class="mt-3 grid gap-4 sm:grid-cols-3">
|
||||
<div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<p class="text-xs font-medium text-muted">
|
||||
{{ t('settings.uploadRateIpMax') }}
|
||||
</p>
|
||||
<UBadge
|
||||
v-if="uploadRateIpMaxSource"
|
||||
:color="sourceBadge(uploadRateIpMaxSource).color"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceBadge(uploadRateIpMaxSource).label }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<UInput
|
||||
v-model.number="uploadRateIpMaxDraft"
|
||||
type="number"
|
||||
:min="1"
|
||||
:max="1000"
|
||||
size="sm"
|
||||
class="mt-2 w-full tabular-nums"
|
||||
:disabled="uploadRateIpMaxSource === 'env'"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<p class="text-xs font-medium text-muted">
|
||||
{{ t('settings.uploadRateTokenMax') }}
|
||||
</p>
|
||||
<UBadge
|
||||
v-if="uploadRateTokenMaxSource"
|
||||
:color="sourceBadge(uploadRateTokenMaxSource).color"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceBadge(uploadRateTokenMaxSource).label }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<UInput
|
||||
v-model.number="uploadRateTokenMaxDraft"
|
||||
type="number"
|
||||
:min="1"
|
||||
:max="5000"
|
||||
size="sm"
|
||||
class="mt-2 w-full tabular-nums"
|
||||
:disabled="uploadRateTokenMaxSource === 'env'"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<p class="text-xs font-medium text-muted">
|
||||
{{ t('settings.uploadRateWindowMinutes') }}
|
||||
</p>
|
||||
<UBadge
|
||||
v-if="uploadRateWindowMinutesSource"
|
||||
:color="sourceBadge(uploadRateWindowMinutesSource).color"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceBadge(uploadRateWindowMinutesSource).label }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center gap-2">
|
||||
<UInput
|
||||
v-model.number="uploadRateWindowMinutesDraft"
|
||||
type="number"
|
||||
:min="1"
|
||||
:max="1440"
|
||||
size="sm"
|
||||
class="w-full tabular-nums"
|
||||
:disabled="uploadRateWindowMinutesSource === 'env'"
|
||||
/>
|
||||
<span class="shrink-0 text-xs text-muted">{{ t('settings.minutesUnit') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<SettingsToggleRow
|
||||
v-else-if="part === 'image-processing'"
|
||||
v-model="preserveOriginalUploadDraft!"
|
||||
:disabled="preserveOriginalUploadSource === 'env'"
|
||||
>
|
||||
<template #title>
|
||||
<span class="inline-flex flex-wrap items-center gap-2">
|
||||
{{ t('settings.preserveOriginalUpload') }}
|
||||
<UBadge
|
||||
v-if="preserveOriginalUploadSource"
|
||||
:color="sourceBadge(preserveOriginalUploadSource).color"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceBadge(preserveOriginalUploadSource).label }}
|
||||
</UBadge>
|
||||
</span>
|
||||
</template>
|
||||
<template #hint>
|
||||
{{ t('settings.preserveOriginalUploadHint') }}
|
||||
</template>
|
||||
</SettingsToggleRow>
|
||||
|
||||
<template v-else-if="part === 'login-rate'">
|
||||
<div class="grid gap-4 py-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('settings.loginRateMax') }}
|
||||
</p>
|
||||
<UBadge
|
||||
v-if="loginRateMaxSource"
|
||||
:color="sourceBadge(loginRateMaxSource).color"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceBadge(loginRateMaxSource).label }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<UInput
|
||||
v-model.number="loginRateMaxDraft"
|
||||
type="number"
|
||||
:min="1"
|
||||
:max="100"
|
||||
size="sm"
|
||||
class="mt-2 w-full tabular-nums"
|
||||
:disabled="loginRateMaxSource === 'env'"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('settings.loginRateWindowMinutes') }}
|
||||
</p>
|
||||
<UBadge
|
||||
v-if="loginRateWindowMinutesSource"
|
||||
:color="sourceBadge(loginRateWindowMinutesSource).color"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceBadge(loginRateWindowMinutesSource).label }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center gap-2">
|
||||
<UInput
|
||||
v-model.number="loginRateWindowMinutesDraft"
|
||||
type="number"
|
||||
:min="1"
|
||||
:max="1440"
|
||||
size="sm"
|
||||
class="w-full tabular-nums"
|
||||
:disabled="loginRateWindowMinutesSource === 'env'"
|
||||
/>
|
||||
<span class="shrink-0 text-xs text-muted">{{ t('settings.minutesUnit') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="pb-4 text-xs leading-relaxed text-muted">
|
||||
{{ t('settings.loginRateFootnote') }}
|
||||
</p>
|
||||
</template>
|
||||
</template>
|
||||
@@ -0,0 +1,154 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
part: 'upload-preference' | 'image-processing'
|
||||
}>()
|
||||
|
||||
const {
|
||||
compressEnabled,
|
||||
autoCopyMarkdown,
|
||||
copyFormat,
|
||||
clientWebpQuality,
|
||||
loadPreferences
|
||||
} = useUploadPreferences()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const {
|
||||
userSettings,
|
||||
enabled: userAutoDeleteEnabled,
|
||||
daysDraft: userAutoDeleteDaysDraft,
|
||||
load: loadUserSettings
|
||||
} = useUserAutoDeleteSettings()
|
||||
|
||||
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.bbcode'), value: 'bbcode' as const }
|
||||
])
|
||||
|
||||
function setCopyFormat(value: 'url' | 'markdown' | 'html' | 'bbcode') {
|
||||
copyFormat.value = value
|
||||
}
|
||||
|
||||
function onClientQualityInput(event: Event) {
|
||||
const value = Number((event.target as HTMLInputElement).value)
|
||||
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()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="part === 'image-processing'">
|
||||
<SettingsToggleRow
|
||||
v-model="compressEnabled"
|
||||
:title="t('preferences.clientCompress')"
|
||||
:hint="t('preferences.clientCompressHint')"
|
||||
/>
|
||||
<div
|
||||
v-if="userSettings"
|
||||
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">
|
||||
<span>{{ t('preferences.autoDeletePrefix') }}</span>
|
||||
<UInput
|
||||
v-model.number="userAutoDeleteDaysDraft"
|
||||
type="number"
|
||||
min="1"
|
||||
max="3650"
|
||||
size="xs"
|
||||
class="w-14 tabular-nums"
|
||||
:class="userAutoDeleteEnabled ? '' : 'pointer-events-none opacity-40'"
|
||||
/>
|
||||
<span>{{ t('preferences.autoDeleteSuffix') }}</span>
|
||||
</p>
|
||||
<p class="mt-1 text-xs leading-relaxed text-muted">
|
||||
{{ t('preferences.autoDeleteHint') }}
|
||||
</p>
|
||||
</div>
|
||||
<USwitch
|
||||
v-model="userAutoDeleteEnabled"
|
||||
class="mt-0.5 shrink-0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex justify-center py-4"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-loader-circle"
|
||||
class="size-5 animate-spin text-muted"
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<SettingsToggleRow
|
||||
v-model="autoCopyMarkdown"
|
||||
:title="t('preferences.autoCopy')"
|
||||
:hint="t('preferences.autoCopyHint')"
|
||||
/>
|
||||
<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="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"
|
||||
:variant="copyFormat === item.value ? 'solid' : 'ghost'"
|
||||
:color="copyFormat === item.value ? 'primary' : 'neutral'"
|
||||
:label="item.label"
|
||||
@click="setCopyFormat(item.value)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
@@ -0,0 +1,444 @@
|
||||
<script setup lang="ts">
|
||||
import type { BackendSyncPreview, SyncDraft } from '~/types/backup'
|
||||
import type { StorageBackendItem } from '~/types/storage'
|
||||
|
||||
const props = defineProps<{
|
||||
backends: StorageBackendItem[]
|
||||
syncDraft: SyncDraft | null
|
||||
highlighted?: boolean
|
||||
busy: boolean
|
||||
disabled?: boolean
|
||||
activeJob?: { progress: number, total: number, message: string } | null
|
||||
previewSync: (body: { fromBackendId: string, toBackendId: string }) => Promise<BackendSyncPreview>
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
sync: [body: {
|
||||
fromBackendId: string
|
||||
toBackendId: string
|
||||
deleteSource: boolean
|
||||
setDefault: boolean
|
||||
}]
|
||||
}>()
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
const { formatFileSize } = useFileSize()
|
||||
const toast = useToast()
|
||||
|
||||
const fromBackendId = ref('')
|
||||
const toBackendId = ref('')
|
||||
const deleteSource = ref(false)
|
||||
const setDefault = ref(false)
|
||||
const preview = ref<BackendSyncPreview | null>(null)
|
||||
const previewLoading = ref(false)
|
||||
const statsLoading = ref(false)
|
||||
const confirmOpen = ref(false)
|
||||
const userTouched = ref(false)
|
||||
|
||||
let statsTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
const backendOptions = computed(() =>
|
||||
props.backends.map(backend => ({
|
||||
label: backend.name,
|
||||
value: backend.id
|
||||
}))
|
||||
)
|
||||
|
||||
const backendNameById = computed(() =>
|
||||
new Map(props.backends.map(backend => [backend.id, backend.name]))
|
||||
)
|
||||
|
||||
const needsMoreBackends = computed(() => props.backends.length < 2)
|
||||
|
||||
const syncDisabled = computed(() =>
|
||||
props.disabled || props.busy || needsMoreBackends.value
|
||||
)
|
||||
|
||||
function formatCount(value: number) {
|
||||
return value.toLocaleString(locale.value)
|
||||
}
|
||||
|
||||
function initDefaultSelection() {
|
||||
if (userTouched.value || props.syncDraft) return
|
||||
const defaultBackend = props.backends.find(backend => backend.isDefault)
|
||||
const target = props.backends.find(backend => !backend.isDefault && backend.enabled)
|
||||
if (defaultBackend && target) {
|
||||
fromBackendId.value = defaultBackend.id
|
||||
toBackendId.value = target.id
|
||||
return
|
||||
}
|
||||
if (props.backends.length >= 2) {
|
||||
fromBackendId.value = props.backends[0]!.id
|
||||
toBackendId.value = props.backends[1]!.id
|
||||
}
|
||||
}
|
||||
|
||||
function canLoadStats(): boolean {
|
||||
return !needsMoreBackends.value
|
||||
&& Boolean(fromBackendId.value)
|
||||
&& Boolean(toBackendId.value)
|
||||
&& fromBackendId.value !== toBackendId.value
|
||||
}
|
||||
|
||||
async function refreshStats(immediate = false) {
|
||||
if (!canLoadStats()) {
|
||||
preview.value = null
|
||||
return
|
||||
}
|
||||
if (immediate) {
|
||||
if (statsTimer) clearTimeout(statsTimer)
|
||||
await loadStats()
|
||||
return
|
||||
}
|
||||
scheduleStatsLoad()
|
||||
}
|
||||
|
||||
async function loadStats() {
|
||||
if (needsMoreBackends.value || !fromBackendId.value || !toBackendId.value) {
|
||||
preview.value = null
|
||||
return
|
||||
}
|
||||
if (fromBackendId.value === toBackendId.value) {
|
||||
preview.value = null
|
||||
return
|
||||
}
|
||||
statsLoading.value = true
|
||||
try {
|
||||
preview.value = await props.previewSync({
|
||||
fromBackendId: fromBackendId.value,
|
||||
toBackendId: toBackendId.value
|
||||
})
|
||||
} catch {
|
||||
preview.value = null
|
||||
} finally {
|
||||
statsLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function scheduleStatsLoad() {
|
||||
if (statsTimer) clearTimeout(statsTimer)
|
||||
statsTimer = setTimeout(() => {
|
||||
void loadStats()
|
||||
}, 400)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.backends,
|
||||
async () => {
|
||||
initDefaultSelection()
|
||||
await nextTick()
|
||||
await refreshStats(true)
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.syncDraft,
|
||||
async (draft) => {
|
||||
if (!draft) return
|
||||
fromBackendId.value = draft.fromBackendId
|
||||
toBackendId.value = draft.toBackendId
|
||||
userTouched.value = true
|
||||
await refreshStats(true)
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
watch([fromBackendId, toBackendId], () => {
|
||||
void refreshStats()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (statsTimer) clearTimeout(statsTimer)
|
||||
})
|
||||
|
||||
function applyDraft(draft: SyncDraft) {
|
||||
fromBackendId.value = draft.fromBackendId
|
||||
toBackendId.value = draft.toBackendId
|
||||
userTouched.value = true
|
||||
void refreshStats(true)
|
||||
}
|
||||
|
||||
defineExpose({ applyDraft })
|
||||
|
||||
function backendName(id: string) {
|
||||
return backendNameById.value.get(id) ?? id
|
||||
}
|
||||
|
||||
function validateSelection(): boolean {
|
||||
if (needsMoreBackends.value) {
|
||||
toast.add({ title: t('storage.backup.syncNeedTwoBackends'), color: 'warning' })
|
||||
return false
|
||||
}
|
||||
if (!fromBackendId.value || !toBackendId.value) {
|
||||
toast.add({ title: t('storage.backup.syncSelectRequired'), color: 'warning' })
|
||||
return false
|
||||
}
|
||||
if (fromBackendId.value === toBackendId.value) {
|
||||
toast.add({ title: t('storage.backup.syncSameBackend'), color: 'warning' })
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
if (!validateSelection()) return
|
||||
previewLoading.value = true
|
||||
try {
|
||||
preview.value = await props.previewSync({
|
||||
fromBackendId: fromBackendId.value,
|
||||
toBackendId: toBackendId.value
|
||||
})
|
||||
confirmOpen.value = true
|
||||
} catch {
|
||||
toast.add({ title: t('storage.backup.previewFailed'), color: 'error' })
|
||||
} finally {
|
||||
previewLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function confirmSync() {
|
||||
emit('sync', {
|
||||
fromBackendId: fromBackendId.value,
|
||||
toBackendId: toBackendId.value,
|
||||
deleteSource: deleteSource.value,
|
||||
setDefault: setDefault.value
|
||||
})
|
||||
confirmOpen.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article
|
||||
class="flex h-full flex-col rounded-xl border bg-elevated p-4 transition-colors sm:p-5"
|
||||
:class="highlighted ? 'border-primary ring-2 ring-primary/25' : 'border-default'"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-info/10 text-info">
|
||||
<UIcon
|
||||
name="i-lucide-arrow-left-right"
|
||||
class="size-5"
|
||||
/>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<h3 class="text-base font-semibold">
|
||||
{{ t('storage.backup.syncTitle') }}
|
||||
</h3>
|
||||
<p class="mt-0.5 text-sm text-muted">
|
||||
{{ t('storage.backup.syncSubtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex flex-1 flex-col">
|
||||
<UAlert
|
||||
v-if="needsMoreBackends"
|
||||
color="warning"
|
||||
variant="subtle"
|
||||
icon="i-lucide-triangle-alert"
|
||||
:description="t('storage.backup.syncNeedTwoBackends')"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="flex flex-1 flex-col space-y-3"
|
||||
>
|
||||
<div class="grid gap-3 sm:grid-cols-[1fr_auto_1fr] sm:items-end">
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-xs text-muted">{{ t('storage.backup.syncFrom') }}</label>
|
||||
<USelect
|
||||
v-model="fromBackendId"
|
||||
:items="backendOptions"
|
||||
size="sm"
|
||||
class="w-full"
|
||||
:disabled="syncDisabled"
|
||||
@update:model-value="userTouched = true"
|
||||
/>
|
||||
</div>
|
||||
<UIcon
|
||||
name="i-lucide-arrow-right"
|
||||
class="hidden size-4 shrink-0 text-muted sm:mb-2.5 sm:block"
|
||||
/>
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-xs text-muted">{{ t('storage.backup.syncTo') }}</label>
|
||||
<USelect
|
||||
v-model="toBackendId"
|
||||
:items="backendOptions"
|
||||
size="sm"
|
||||
class="w-full"
|
||||
:disabled="syncDisabled"
|
||||
@update:model-value="userTouched = true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dl class="space-y-1.5 rounded-lg bg-muted/25 px-3 py-2.5 text-sm">
|
||||
<div class="flex items-baseline justify-between gap-2">
|
||||
<dt class="text-muted">
|
||||
{{ t('storage.backup.syncPendingImages') }}
|
||||
</dt>
|
||||
<dd class="font-medium tabular-nums">
|
||||
<template v-if="statsLoading">
|
||||
…
|
||||
</template>
|
||||
<template v-else-if="preview">
|
||||
{{ formatCount(preview.imageCount) }}
|
||||
</template>
|
||||
<template v-else>
|
||||
—
|
||||
</template>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex items-baseline justify-between gap-2">
|
||||
<dt class="text-muted">
|
||||
{{ t('storage.backup.syncPendingSize') }}
|
||||
</dt>
|
||||
<dd class="font-medium tabular-nums">
|
||||
<template v-if="statsLoading">
|
||||
…
|
||||
</template>
|
||||
<template v-else-if="preview">
|
||||
{{ formatFileSize(preview.imageBytes) }}
|
||||
</template>
|
||||
<template v-else>
|
||||
—
|
||||
</template>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div class="space-y-2 text-xs">
|
||||
<label class="flex cursor-pointer items-center gap-2">
|
||||
<UCheckbox
|
||||
v-model="deleteSource"
|
||||
:disabled="syncDisabled"
|
||||
/>
|
||||
<span class="text-muted">{{ t('storage.backup.syncDeleteSource') }}</span>
|
||||
</label>
|
||||
<label class="flex cursor-pointer items-center gap-2">
|
||||
<UCheckbox
|
||||
v-model="setDefault"
|
||||
:disabled="syncDisabled"
|
||||
/>
|
||||
<span class="text-muted">{{ t('storage.backup.syncSetDefault') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto rounded-lg bg-muted/15 px-3 py-2.5">
|
||||
<p class="text-xs font-medium text-default">
|
||||
{{ t('storage.backup.syncIncludesTitle') }}
|
||||
</p>
|
||||
<ul class="mt-2 space-y-1.5 text-xs leading-relaxed text-muted">
|
||||
<li class="flex items-start gap-2">
|
||||
<UIcon
|
||||
name="i-lucide-check"
|
||||
class="mt-0.5 size-3.5 shrink-0 text-info"
|
||||
/>
|
||||
<span>{{ t('storage.backup.syncIncludesCopy') }}</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<UIcon
|
||||
name="i-lucide-check"
|
||||
class="mt-0.5 size-3.5 shrink-0 text-info"
|
||||
/>
|
||||
<span>{{ t('storage.backup.syncIncludesIndex') }}</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<UIcon
|
||||
name="i-lucide-minus"
|
||||
class="mt-0.5 size-3.5 shrink-0 text-muted"
|
||||
/>
|
||||
<span>{{ t('storage.backup.syncIncludesConfig') }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<StorageBackupJobProgress
|
||||
v-if="busy && activeJob"
|
||||
class="mt-auto"
|
||||
:message="activeJob.message"
|
||||
:progress="activeJob.progress"
|
||||
:total="activeJob.total"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="!needsMoreBackends"
|
||||
class="mt-auto border-t border-default pt-4"
|
||||
>
|
||||
<UButton
|
||||
:label="t('storage.backup.syncPreview')"
|
||||
icon="i-lucide-play"
|
||||
size="sm"
|
||||
:loading="previewLoading || busy"
|
||||
:disabled="syncDisabled"
|
||||
@click="submit"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<UModal
|
||||
v-model:open="confirmOpen"
|
||||
:ui="{ content: 'max-w-md' }"
|
||||
>
|
||||
<template #content>
|
||||
<div class="p-5 sm:p-6">
|
||||
<h2 class="text-base font-semibold">
|
||||
{{ t('storage.backup.syncConfirmTitle') }}
|
||||
</h2>
|
||||
<p class="mt-2 text-sm text-muted">
|
||||
{{ backendName(fromBackendId) }} → {{ backendName(toBackendId) }}
|
||||
</p>
|
||||
|
||||
<dl
|
||||
v-if="preview"
|
||||
class="mt-4 grid grid-cols-2 gap-3 text-sm"
|
||||
>
|
||||
<div>
|
||||
<dt class="text-xs text-muted">
|
||||
{{ t('storage.backup.previewImages') }}
|
||||
</dt>
|
||||
<dd class="mt-0.5 font-semibold tabular-nums">
|
||||
{{ formatCount(preview.imageCount) }}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-xs text-muted">
|
||||
{{ t('storage.backup.previewSize') }}
|
||||
</dt>
|
||||
<dd class="mt-0.5 font-semibold tabular-nums">
|
||||
{{ formatFileSize(preview.imageBytes) }}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<UAlert
|
||||
v-if="deleteSource"
|
||||
class="mt-4"
|
||||
color="warning"
|
||||
variant="subtle"
|
||||
icon="i-lucide-triangle-alert"
|
||||
:description="t('storage.backup.syncDeleteWarning')"
|
||||
/>
|
||||
|
||||
<div class="mt-5 flex justify-end gap-2">
|
||||
<UButton
|
||||
:label="t('common.cancel')"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
@click="() => { confirmOpen = false }"
|
||||
/>
|
||||
<UButton
|
||||
:label="t('storage.backup.syncConfirm')"
|
||||
size="sm"
|
||||
icon="i-lucide-play"
|
||||
:loading="busy"
|
||||
@click="confirmSync"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
</article>
|
||||
</template>
|
||||
@@ -0,0 +1,141 @@
|
||||
<script setup lang="ts">
|
||||
import type { BackupEstimate } from '~/types/backup'
|
||||
|
||||
defineProps<{
|
||||
estimate: BackupEstimate | null
|
||||
loading: boolean
|
||||
busy: boolean
|
||||
disabled?: boolean
|
||||
activeJob?: { progress: number, total: number, message: string } | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
export: []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const { formatFileSize } = useFileSize()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article class="flex h-full flex-col rounded-xl border border-default bg-elevated p-4 sm:p-5">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
|
||||
<UIcon
|
||||
name="i-lucide-archive"
|
||||
class="size-5"
|
||||
/>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<h3 class="text-base font-semibold">
|
||||
{{ t('storage.backup.exportTitle') }}
|
||||
</h3>
|
||||
<p class="mt-0.5 text-sm text-muted">
|
||||
{{ t('storage.backup.exportSubtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex flex-1 flex-col space-y-2">
|
||||
<div
|
||||
v-if="loading"
|
||||
class="flex items-center gap-2 text-sm text-muted"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-loader-circle"
|
||||
class="size-4 animate-spin"
|
||||
/>
|
||||
{{ t('storage.backup.estimateLoading') }}
|
||||
</div>
|
||||
|
||||
<dl
|
||||
v-else-if="estimate"
|
||||
class="space-y-1.5 rounded-lg bg-muted/25 px-3 py-2.5 text-sm"
|
||||
>
|
||||
<div class="flex items-baseline justify-between gap-2">
|
||||
<dt class="text-muted">
|
||||
{{ t('storage.backup.estimateImageCountLabel') }}
|
||||
</dt>
|
||||
<dd class="font-medium tabular-nums">
|
||||
{{ estimate.imageCount }} · {{ formatFileSize(estimate.imageBytes) }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex items-baseline justify-between gap-2">
|
||||
<dt class="text-muted">
|
||||
{{ t('storage.backup.estimateDatabaseSnapshotLabel') }}
|
||||
</dt>
|
||||
<dd class="font-medium tabular-nums">
|
||||
{{ formatFileSize(estimate.databaseBytes) }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex items-baseline justify-between gap-2 border-t border-default/40 pt-1.5">
|
||||
<dt class="font-medium text-default">
|
||||
{{ t('storage.backup.estimatePackageSizeLabel') }}
|
||||
</dt>
|
||||
<dd class="font-semibold tabular-nums">
|
||||
{{ formatFileSize(estimate.totalBytes) }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex items-baseline justify-between gap-2 border-t border-default/40 pt-1.5">
|
||||
<dt class="text-muted">
|
||||
{{ t('storage.backup.estimateStoragePathLabel') }}
|
||||
</dt>
|
||||
<dd class="truncate font-mono text-xs font-medium">
|
||||
{{ t('storage.backup.estimateStoragePathValue') }}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div
|
||||
v-if="estimate && !loading"
|
||||
class="mt-auto rounded-lg bg-muted/15 px-3 py-2.5"
|
||||
>
|
||||
<p class="text-xs font-medium text-default">
|
||||
{{ t('storage.backup.exportIncludesTitle') }}
|
||||
</p>
|
||||
<ul class="mt-2 space-y-1.5 text-xs leading-relaxed text-muted">
|
||||
<li class="flex items-start gap-2">
|
||||
<UIcon
|
||||
name="i-lucide-check"
|
||||
class="mt-0.5 size-3.5 shrink-0 text-primary"
|
||||
/>
|
||||
<span>{{ t('storage.backup.exportIncludesDb') }}</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<UIcon
|
||||
name="i-lucide-check"
|
||||
class="mt-0.5 size-3.5 shrink-0 text-primary"
|
||||
/>
|
||||
<span>{{ t('storage.backup.exportIncludesImages', { count: estimate.imageCount }) }}</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<UIcon
|
||||
name="i-lucide-minus"
|
||||
class="mt-0.5 size-3.5 shrink-0 text-muted"
|
||||
/>
|
||||
<span>{{ t('storage.backup.exportExcludesSecrets') }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<StorageBackupJobProgress
|
||||
v-if="busy && activeJob"
|
||||
class="mt-2"
|
||||
:message="activeJob.message"
|
||||
:progress="activeJob.progress"
|
||||
:total="activeJob.total"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto border-t border-default pt-4">
|
||||
<UButton
|
||||
:label="t('storage.backup.exportAction')"
|
||||
icon="i-lucide-download"
|
||||
size="sm"
|
||||
:loading="busy"
|
||||
:disabled="disabled || busy"
|
||||
@click="emit('export')"
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
@@ -0,0 +1,32 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
message: string
|
||||
progress: number
|
||||
total: number
|
||||
}>()
|
||||
|
||||
const percent = computed(() => {
|
||||
if (!props.total) return 0
|
||||
return Math.min(100, Math.round((props.progress / props.total) * 100))
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-1.5">
|
||||
<div class="flex items-center justify-between gap-2 text-xs text-muted">
|
||||
<span class="truncate">{{ message }}</span>
|
||||
<span
|
||||
v-if="total > 0"
|
||||
class="shrink-0 tabular-nums"
|
||||
>
|
||||
{{ progress }} / {{ total }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="h-1 overflow-hidden rounded-full bg-muted">
|
||||
<div
|
||||
class="h-full rounded-full bg-primary transition-all duration-300"
|
||||
:style="{ width: `${percent}%` }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,257 @@
|
||||
<script setup lang="ts">
|
||||
import type { BackupJobItem } from '~/types/backup'
|
||||
|
||||
defineProps<{
|
||||
jobs: BackupJobItem[]
|
||||
polling: boolean
|
||||
page: number
|
||||
totalPages: number
|
||||
total: number
|
||||
pageSize: number
|
||||
loading?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'retry': [jobId: string]
|
||||
'download': [jobId: string]
|
||||
'cancel': [jobId: string]
|
||||
'view': [job: BackupJobItem]
|
||||
'update:page': [page: number]
|
||||
'update:pageSize': [pageSize: number]
|
||||
}>()
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
function typeLabel(type: BackupJobItem['type']): string {
|
||||
const map: Record<BackupJobItem['type'], string> = {
|
||||
full_export: t('storage.backup.jobTypeExport'),
|
||||
full_restore: t('storage.backup.jobTypeRestore'),
|
||||
backend_sync: t('storage.backup.jobTypeSync')
|
||||
}
|
||||
return map[type]
|
||||
}
|
||||
|
||||
function statusColor(status: BackupJobItem['status']): 'success' | 'error' | 'warning' | 'neutral' {
|
||||
if (status === 'done') return 'success'
|
||||
if (status === 'failed') return 'error'
|
||||
if (status === 'running') return 'warning'
|
||||
return 'neutral'
|
||||
}
|
||||
|
||||
function statusLabel(status: BackupJobItem['status']): string {
|
||||
const map: Record<BackupJobItem['status'], string> = {
|
||||
pending: t('storage.backup.statusPending'),
|
||||
running: t('storage.backup.statusRunning'),
|
||||
done: t('storage.backup.statusDone'),
|
||||
failed: t('storage.backup.statusFailed')
|
||||
}
|
||||
return map[status]
|
||||
}
|
||||
|
||||
function progressPercent(job: BackupJobItem): number {
|
||||
if (!job.total) return job.status === 'done' ? 100 : 0
|
||||
return Math.min(100, Math.round((job.progress / job.total) * 100))
|
||||
}
|
||||
|
||||
function jobMessage(job: BackupJobItem): string {
|
||||
if (job.status === 'failed') {
|
||||
return job.error || job.message || t('storage.backup.jobFailedUnknown')
|
||||
}
|
||||
if (job.status === 'running' || job.status === 'pending') {
|
||||
return job.message
|
||||
}
|
||||
if (job.status === 'done' && job.message) {
|
||||
return job.message
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
function canRetry(job: BackupJobItem): boolean {
|
||||
return job.type === 'backend_sync' && job.status === 'failed'
|
||||
}
|
||||
|
||||
function canCancel(job: BackupJobItem): boolean {
|
||||
return job.status === 'running' || job.status === 'pending'
|
||||
}
|
||||
|
||||
function canView(job: BackupJobItem): boolean {
|
||||
return job.type === 'full_restore' && job.status === 'done' && Boolean(job.message)
|
||||
}
|
||||
|
||||
function formatTime(value: string) {
|
||||
if (!value) return '—'
|
||||
return new Date(value).toLocaleString(locale.value, { hour12: false })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="overflow-hidden rounded-xl border border-default bg-elevated">
|
||||
<header class="flex items-center justify-between gap-3 border-b border-default/50 px-4 py-4 sm:px-5">
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold">
|
||||
{{ t('storage.backup.jobsTitle') }}
|
||||
</h3>
|
||||
<p class="mt-0.5 text-xs text-muted">
|
||||
{{ t('storage.backup.jobsSubtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
<UIcon
|
||||
v-if="polling"
|
||||
name="i-lucide-loader-circle"
|
||||
class="size-4 shrink-0 animate-spin text-muted"
|
||||
/>
|
||||
</header>
|
||||
|
||||
<div
|
||||
v-if="!jobs.length && !loading"
|
||||
class="flex flex-col items-center gap-2 px-4 py-12 text-center sm:px-5"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-clipboard-list"
|
||||
class="size-7 text-muted"
|
||||
/>
|
||||
<p class="text-sm text-muted">
|
||||
{{ t('storage.backup.jobsEmpty') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="overflow-x-auto"
|
||||
>
|
||||
<table class="w-full min-w-[800px] text-left text-sm">
|
||||
<thead>
|
||||
<tr class="border-b border-default/50 text-xs text-muted">
|
||||
<th class="px-4 py-3 font-medium sm:px-5">
|
||||
{{ t('storage.backup.colTask') }}
|
||||
</th>
|
||||
<th class="px-4 py-3 font-medium sm:px-5">
|
||||
{{ t('storage.backup.colStatus') }}
|
||||
</th>
|
||||
<th class="px-4 py-3 font-medium sm:px-5">
|
||||
{{ t('storage.backup.colMessage') }}
|
||||
</th>
|
||||
<th class="px-4 py-3 font-medium sm:px-5">
|
||||
{{ t('storage.backup.colProgress') }}
|
||||
</th>
|
||||
<th class="px-4 py-3 font-medium sm:px-5">
|
||||
{{ t('storage.backup.colCreated') }}
|
||||
</th>
|
||||
<th class="px-4 py-3 font-medium sm:px-5">
|
||||
{{ t('storage.backup.colActions') }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="job in jobs"
|
||||
:key="job.id"
|
||||
class="border-b border-default/40 last:border-0"
|
||||
>
|
||||
<td class="px-4 py-3.5 whitespace-nowrap font-medium sm:px-5">
|
||||
{{ typeLabel(job.type) }}
|
||||
</td>
|
||||
<td class="px-4 py-3.5 sm:px-5">
|
||||
<UBadge
|
||||
:color="statusColor(job.status)"
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
>
|
||||
{{ statusLabel(job.status) }}
|
||||
</UBadge>
|
||||
</td>
|
||||
<td class="max-w-xs px-4 py-3.5 sm:px-5">
|
||||
<p
|
||||
v-if="jobMessage(job)"
|
||||
class="line-clamp-2 text-xs leading-relaxed"
|
||||
:class="job.status === 'failed' ? 'text-error' : 'text-muted'"
|
||||
:title="jobMessage(job)"
|
||||
>
|
||||
{{ jobMessage(job) }}
|
||||
</p>
|
||||
<span
|
||||
v-else
|
||||
class="text-xs text-dimmed"
|
||||
>—</span>
|
||||
</td>
|
||||
<td class="min-w-32 px-4 py-3.5 sm:px-5">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="h-1 min-w-0 flex-1 overflow-hidden rounded-full bg-muted">
|
||||
<div
|
||||
class="h-full rounded-full bg-primary transition-all"
|
||||
:class="{ 'animate-pulse': job.status === 'running' }"
|
||||
:style="{ width: `${progressPercent(job)}%` }"
|
||||
/>
|
||||
</div>
|
||||
<span class="shrink-0 text-xs tabular-nums text-muted">
|
||||
<template v-if="job.total">{{ job.progress }}/{{ job.total }}</template>
|
||||
<template v-else-if="job.status === 'done'">100%</template>
|
||||
<template v-else>—</template>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3.5 whitespace-nowrap text-xs text-muted sm:px-5">
|
||||
{{ formatTime(job.createdAt) }}
|
||||
</td>
|
||||
<td class="px-4 py-3.5 sm:px-5">
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<UButton
|
||||
v-if="job.downloadable"
|
||||
:label="t('storage.backup.download')"
|
||||
icon="i-lucide-download"
|
||||
size="xs"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
@click="emit('download', job.id)"
|
||||
/>
|
||||
<UButton
|
||||
v-if="canView(job)"
|
||||
:label="t('storage.backup.jobView')"
|
||||
icon="i-lucide-eye"
|
||||
size="xs"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
@click="emit('view', job)"
|
||||
/>
|
||||
<UButton
|
||||
v-if="canCancel(job)"
|
||||
:label="t('storage.backup.cancel')"
|
||||
icon="i-lucide-x"
|
||||
size="xs"
|
||||
variant="outline"
|
||||
color="warning"
|
||||
@click="emit('cancel', job.id)"
|
||||
/>
|
||||
<UButton
|
||||
v-if="canRetry(job)"
|
||||
:label="t('storage.backup.retry')"
|
||||
icon="i-lucide-rotate-ccw"
|
||||
size="xs"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
@click="emit('retry', job.id)"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="total > 0"
|
||||
class="border-t border-default/50 px-4 py-4 sm:px-5"
|
||||
>
|
||||
<PaginationBar
|
||||
:page="page"
|
||||
:total-pages="totalPages"
|
||||
:total="total"
|
||||
:page-size="pageSize"
|
||||
:loading="loading"
|
||||
:unit="t('storage.backup.jobsUnit')"
|
||||
@update:page="emit('update:page', $event)"
|
||||
@update:page-size="emit('update:pageSize', $event)"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,305 @@
|
||||
<script setup lang="ts">
|
||||
import type { BackupPackageItem, BackupRestorePreview } from '~/types/backup'
|
||||
|
||||
const props = defineProps<{
|
||||
packages: BackupPackageItem[]
|
||||
busy: boolean
|
||||
disabled?: boolean
|
||||
restoreBusy?: boolean
|
||||
activeJob?: { progress: number, total: number, message: string } | null
|
||||
previewRestore: (input: { file?: File, archiveName?: string }) => Promise<BackupRestorePreview>
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
restore: [input: { file?: File, archiveName?: string, conflictMode: 'skip' | 'overwrite' }]
|
||||
}>()
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
const { formatFileSize } = useFileSize()
|
||||
const toast = useToast()
|
||||
|
||||
const fileInput = ref<HTMLInputElement | null>(null)
|
||||
const selectedFile = ref<File | null>(null)
|
||||
const selectedPackage = ref<string>('')
|
||||
const conflictMode = ref<'skip' | 'overwrite'>('skip')
|
||||
const preview = ref<BackupRestorePreview | null>(null)
|
||||
const previewLoading = ref(false)
|
||||
const confirmOpen = ref(false)
|
||||
|
||||
const conflictItems = computed(() => [
|
||||
{ label: t('storage.backup.conflictSkip'), value: 'skip' },
|
||||
{ label: t('storage.backup.conflictOverwrite'), value: 'overwrite' }
|
||||
])
|
||||
|
||||
const selectMenuUi = {
|
||||
content: 'min-w-[var(--reka-select-trigger-width)] w-max max-w-[min(100vw-2rem,24rem)]',
|
||||
item: 'whitespace-normal',
|
||||
itemLabel: 'whitespace-normal'
|
||||
}
|
||||
|
||||
const packageOptions = computed(() =>
|
||||
props.packages.map(pkg => ({
|
||||
label: `${shortenName(pkg.name)} (${formatFileSize(pkg.bytes)})`,
|
||||
value: pkg.name
|
||||
}))
|
||||
)
|
||||
|
||||
function shortenName(name: string) {
|
||||
if (name.length <= 36) return name
|
||||
return `${name.slice(0, 22)}…${name.slice(-10)}`
|
||||
}
|
||||
|
||||
function formatTime(value: string) {
|
||||
if (!value) return '—'
|
||||
return new Date(value).toLocaleString(locale.value, { hour12: false })
|
||||
}
|
||||
|
||||
function pickFile() {
|
||||
fileInput.value?.click()
|
||||
}
|
||||
|
||||
function onFileChange(event: Event) {
|
||||
const input = event.target as HTMLInputElement
|
||||
const file = input.files?.[0] ?? null
|
||||
if (!file) return
|
||||
selectedFile.value = file
|
||||
selectedPackage.value = ''
|
||||
preview.value = null
|
||||
if (input) input.value = ''
|
||||
}
|
||||
|
||||
function selectPackage(name: string | null) {
|
||||
if (!name) {
|
||||
selectedPackage.value = ''
|
||||
return
|
||||
}
|
||||
selectedPackage.value = name
|
||||
selectedFile.value = null
|
||||
preview.value = null
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
if (!selectedFile.value && !selectedPackage.value) {
|
||||
toast.add({ title: t('storage.backup.restoreSelectRequired'), color: 'warning' })
|
||||
return
|
||||
}
|
||||
previewLoading.value = true
|
||||
try {
|
||||
preview.value = await props.previewRestore({
|
||||
file: selectedFile.value ?? undefined,
|
||||
archiveName: selectedPackage.value || undefined
|
||||
})
|
||||
confirmOpen.value = true
|
||||
} catch {
|
||||
toast.add({ title: t('storage.backup.previewFailed'), color: 'error' })
|
||||
} finally {
|
||||
previewLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function confirmRestore() {
|
||||
emit('restore', {
|
||||
file: selectedFile.value ?? undefined,
|
||||
archiveName: selectedPackage.value || undefined,
|
||||
conflictMode: conflictMode.value
|
||||
})
|
||||
confirmOpen.value = false
|
||||
selectedFile.value = null
|
||||
selectedPackage.value = ''
|
||||
preview.value = null
|
||||
}
|
||||
|
||||
const sourceLabel = computed(() => selectedFile.value?.name || selectedPackage.value || '')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article class="flex h-full flex-col rounded-xl border border-default bg-elevated p-4 sm:p-5">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-warning/10 text-warning">
|
||||
<UIcon
|
||||
name="i-lucide-upload"
|
||||
class="size-5"
|
||||
/>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<h3 class="text-base font-semibold">
|
||||
{{ t('storage.backup.restoreTitle') }}
|
||||
</h3>
|
||||
<p class="mt-0.5 text-sm text-muted">
|
||||
{{ t('storage.backup.restoreSubtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex flex-1 flex-col space-y-3">
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-xs text-muted">{{ t('storage.backup.restoreUploadLabel') }}</label>
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full flex-col items-center gap-1.5 rounded-lg border-2 border-dashed px-3 py-2.5 text-center transition-colors disabled:cursor-not-allowed disabled:opacity-60"
|
||||
:class="selectedFile
|
||||
? 'border-primary/50 bg-primary/5'
|
||||
: 'border-warning/40 bg-warning/5 hover:border-warning/60 hover:bg-warning/10'"
|
||||
:disabled="disabled || busy"
|
||||
@click="pickFile"
|
||||
>
|
||||
<div
|
||||
class="flex size-8 items-center justify-center rounded-full"
|
||||
:class="selectedFile ? 'bg-primary/15 text-primary' : 'bg-warning/15 text-warning'"
|
||||
>
|
||||
<UIcon
|
||||
:name="selectedFile ? 'i-lucide-check' : 'i-lucide-upload'"
|
||||
class="size-4.5"
|
||||
/>
|
||||
</div>
|
||||
<span class="max-w-full truncate text-sm font-medium text-default">
|
||||
{{ selectedFile?.name ?? t('storage.backup.restoreUpload') }}
|
||||
</span>
|
||||
<span
|
||||
v-if="!selectedFile"
|
||||
class="text-xs text-muted"
|
||||
>
|
||||
{{ t('storage.backup.restoreUploadHint') }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="packages.length"
|
||||
class="space-y-1.5"
|
||||
>
|
||||
<label class="text-xs text-muted">{{ t('storage.backup.restoreServerPackages') }}</label>
|
||||
<USelect
|
||||
:model-value="selectedPackage || undefined"
|
||||
:items="packageOptions"
|
||||
size="sm"
|
||||
class="w-full"
|
||||
:ui="selectMenuUi"
|
||||
:placeholder="t('storage.backup.restoreServerSelectPlaceholder')"
|
||||
:disabled="disabled || busy"
|
||||
@update:model-value="selectPackage"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs text-muted">{{ t('storage.backup.conflictMode') }}</label>
|
||||
<URadioGroup
|
||||
v-model="conflictMode"
|
||||
:items="conflictItems"
|
||||
:disabled="disabled || busy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<StorageBackupJobProgress
|
||||
v-if="restoreBusy && activeJob"
|
||||
class="mt-auto"
|
||||
:message="activeJob.message"
|
||||
:progress="activeJob.progress"
|
||||
:total="activeJob.total"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto border-t border-default pt-4">
|
||||
<UButton
|
||||
:label="t('storage.backup.restorePreviewConfirm')"
|
||||
icon="i-lucide-search"
|
||||
size="sm"
|
||||
:loading="previewLoading || restoreBusy"
|
||||
:disabled="disabled || busy"
|
||||
@click="submit"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
accept=".phost.tar.gz,.tar.gz"
|
||||
class="hidden"
|
||||
@change="onFileChange"
|
||||
>
|
||||
|
||||
<UModal
|
||||
v-model:open="confirmOpen"
|
||||
:ui="{ content: 'max-w-md' }"
|
||||
>
|
||||
<template #content>
|
||||
<div class="p-5 sm:p-6">
|
||||
<h2 class="text-base font-semibold">
|
||||
{{ t('storage.backup.restoreConfirmTitle') }}
|
||||
</h2>
|
||||
<p
|
||||
v-if="sourceLabel"
|
||||
class="mt-2 truncate font-mono text-xs text-muted"
|
||||
:title="sourceLabel"
|
||||
>
|
||||
{{ sourceLabel }}
|
||||
</p>
|
||||
|
||||
<dl
|
||||
v-if="preview"
|
||||
class="mt-4 grid grid-cols-2 gap-3 text-sm"
|
||||
>
|
||||
<div>
|
||||
<dt class="text-xs text-muted">
|
||||
{{ t('storage.backup.previewImages') }}
|
||||
</dt>
|
||||
<dd class="mt-0.5 font-semibold tabular-nums">
|
||||
{{ preview.imageCount }}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-xs text-muted">
|
||||
{{ t('storage.backup.previewNew') }}
|
||||
</dt>
|
||||
<dd class="mt-0.5 font-semibold tabular-nums">
|
||||
{{ preview.newImages }}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-xs text-muted">
|
||||
{{ t('storage.backup.previewConflicts') }}
|
||||
</dt>
|
||||
<dd class="mt-0.5 font-semibold tabular-nums">
|
||||
{{ preview.conflictingImages }}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-xs text-muted">
|
||||
{{ t('storage.backup.previewCreated') }}
|
||||
</dt>
|
||||
<dd class="mt-0.5 text-xs">
|
||||
{{ formatTime(preview.createdAt) }}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<UAlert
|
||||
v-if="conflictMode === 'overwrite'"
|
||||
class="mt-4"
|
||||
color="warning"
|
||||
variant="subtle"
|
||||
icon="i-lucide-triangle-alert"
|
||||
:description="t('storage.backup.restoreOverwriteWarning')"
|
||||
/>
|
||||
|
||||
<div class="mt-5 flex justify-end gap-2">
|
||||
<UButton
|
||||
:label="t('common.cancel')"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
@click="() => { confirmOpen = false }"
|
||||
/>
|
||||
<UButton
|
||||
:label="t('storage.backup.restoreConfirm')"
|
||||
size="sm"
|
||||
color="warning"
|
||||
:loading="restoreBusy"
|
||||
@click="confirmRestore"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
</article>
|
||||
</template>
|
||||
@@ -1,20 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import type { StorageBackendItem } from '~/types/storage'
|
||||
|
||||
type CardAction = {
|
||||
key: string
|
||||
icon: string
|
||||
label: string
|
||||
shortLabel: string
|
||||
danger?: boolean
|
||||
disabled?: boolean
|
||||
onClick: () => void
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
backend: StorageBackendItem
|
||||
envOverride?: boolean
|
||||
busy?: boolean
|
||||
showMigrateIn?: boolean
|
||||
showMigrateOut?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -23,6 +15,8 @@ const emit = defineEmits<{
|
||||
test: []
|
||||
toggleEnabled: []
|
||||
delete: []
|
||||
migrateIn: []
|
||||
migrateOut: []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
@@ -35,181 +29,172 @@ const typeLabel = computed(() =>
|
||||
props.backend.type === 'local' ? t('storage.backendLocal') : t('storage.backendCloud')
|
||||
)
|
||||
|
||||
const servingLabel = computed(() =>
|
||||
props.backend.servingMode === 'public'
|
||||
? t('storage.servingPublic')
|
||||
: t('storage.servingProxy')
|
||||
)
|
||||
|
||||
const bucketLine = computed(() => {
|
||||
if (props.backend.type !== 's3') return null
|
||||
return props.backend.config.bucket || t('storage.notConfigured')
|
||||
})
|
||||
|
||||
const actionsDisabled = computed(() => props.envOverride || props.busy)
|
||||
|
||||
const actions = computed<CardAction[]>(() => {
|
||||
const isLocal = props.backend.type === 'local'
|
||||
const items: CardAction[] = []
|
||||
const isLocal = computed(() => props.backend.type === 'local')
|
||||
|
||||
if (!props.backend.isDefault && props.backend.enabled) {
|
||||
items.push({
|
||||
key: 'default',
|
||||
icon: 'i-lucide-star',
|
||||
label: t('storage.setDefault'),
|
||||
shortLabel: isLocal ? t('storage.setDefault') : t('storage.actionSetDefault'),
|
||||
onClick: () => emit('setDefault')
|
||||
})
|
||||
}
|
||||
function canSetDefault() {
|
||||
return !props.backend.isDefault && props.backend.enabled
|
||||
}
|
||||
|
||||
if (props.backend.type === 's3') {
|
||||
items.push({
|
||||
key: 'edit',
|
||||
icon: 'i-lucide-pencil',
|
||||
label: t('common.edit'),
|
||||
shortLabel: t('common.edit'),
|
||||
onClick: () => emit('edit')
|
||||
})
|
||||
}
|
||||
function canEdit() {
|
||||
return props.backend.type === 's3'
|
||||
}
|
||||
|
||||
items.push({
|
||||
key: 'test',
|
||||
icon: 'i-lucide-plug-zap',
|
||||
label: t('storage.testConnection'),
|
||||
shortLabel: isLocal ? t('storage.testConnection') : t('storage.actionTest'),
|
||||
onClick: () => emit('test')
|
||||
})
|
||||
function canToggle() {
|
||||
return props.backend.type !== 'local'
|
||||
}
|
||||
|
||||
if (props.backend.type !== 'local') {
|
||||
items.push({
|
||||
key: 'toggle',
|
||||
icon: props.backend.enabled ? 'i-lucide-pause' : 'i-lucide-play',
|
||||
label: props.backend.enabled ? t('storage.disable') : t('storage.enable'),
|
||||
shortLabel: props.backend.enabled ? t('storage.disable') : t('storage.enable'),
|
||||
disabled: props.backend.isDefault && props.backend.enabled,
|
||||
onClick: () => emit('toggleEnabled')
|
||||
})
|
||||
}
|
||||
|
||||
if (props.backend.type !== 'local' && !props.backend.isDefault) {
|
||||
items.push({
|
||||
key: 'delete',
|
||||
icon: 'i-lucide-trash-2',
|
||||
label: t('common.delete'),
|
||||
shortLabel: t('common.delete'),
|
||||
danger: true,
|
||||
onClick: () => emit('delete')
|
||||
})
|
||||
}
|
||||
|
||||
return items
|
||||
})
|
||||
|
||||
const actionGridClass = computed(() => {
|
||||
switch (actions.value.length) {
|
||||
case 1: return 'grid-cols-1'
|
||||
case 2: return 'grid-cols-2'
|
||||
case 3: return 'grid-cols-3'
|
||||
case 4: return 'grid-cols-4'
|
||||
default: return 'grid-cols-5'
|
||||
}
|
||||
})
|
||||
function canDelete() {
|
||||
return props.backend.type !== 'local' && !props.backend.isDefault
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article
|
||||
class="flex h-full flex-col rounded-2xl border border-default bg-elevated p-4 shadow-sm"
|
||||
:class="{
|
||||
'ring-2 ring-primary/30': backend.isDefault,
|
||||
'opacity-75': !backend.enabled
|
||||
}"
|
||||
class="flex h-full flex-col rounded-xl border border-default bg-elevated p-4 sm:p-5"
|
||||
:class="{ 'opacity-75': !backend.enabled }"
|
||||
>
|
||||
<div class="mb-3 flex items-start justify-between gap-2">
|
||||
<div class="flex min-w-0 items-start gap-2.5">
|
||||
<div
|
||||
class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="flex min-w-0 items-center gap-3">
|
||||
<div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
|
||||
<UIcon
|
||||
:name="typeIcon"
|
||||
class="size-4.5"
|
||||
class="size-5"
|
||||
/>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<h3 class="truncate text-sm font-semibold">
|
||||
{{ backend.name }}
|
||||
</h3>
|
||||
<p class="mt-0.5 text-xs text-muted">
|
||||
{{ typeLabel }}
|
||||
<template v-if="bucketLine">
|
||||
· {{ bucketLine }}
|
||||
</template>
|
||||
</p>
|
||||
</div>
|
||||
<h3 class="truncate text-base font-semibold">
|
||||
{{ backend.name }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="flex shrink-0 flex-wrap justify-end gap-1">
|
||||
<UBadge
|
||||
v-if="backend.enabled"
|
||||
color="success"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
<div class="flex shrink-0 flex-wrap justify-end gap-1.5">
|
||||
<span
|
||||
v-if="backend.isDefault"
|
||||
class="inline-flex rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary"
|
||||
>
|
||||
{{ t('storage.badgeDefaultStorage') }}
|
||||
</span>
|
||||
<span
|
||||
v-if="isLocal"
|
||||
class="inline-flex rounded-md border border-default bg-default px-2 py-0.5 text-xs font-medium text-muted"
|
||||
>
|
||||
{{ t('storage.badgeLocal') }}
|
||||
</span>
|
||||
<span
|
||||
v-else-if="backend.enabled"
|
||||
class="inline-flex rounded-md border border-default bg-default px-2 py-0.5 text-xs font-medium text-muted"
|
||||
>
|
||||
{{ t('storage.badgeEnabled') }}
|
||||
</UBadge>
|
||||
<UBadge
|
||||
v-if="backend.isDefault"
|
||||
color="primary"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ t('storage.badgeDefault') }}
|
||||
</UBadge>
|
||||
<UBadge
|
||||
v-if="!backend.enabled"
|
||||
color="warning"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="inline-flex rounded-md bg-muted px-2 py-0.5 text-xs font-medium text-muted"
|
||||
>
|
||||
{{ t('storage.badgeDisabled') }}
|
||||
</UBadge>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<StorageUsageBar
|
||||
:capacity="backend.capacity"
|
||||
:index-bytes="backend.usage.bytes"
|
||||
/>
|
||||
<div class="mt-4">
|
||||
<StorageUsageBar
|
||||
:capacity="backend.capacity"
|
||||
:index-bytes="backend.usage.bytes"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="mt-3 text-xs text-muted">
|
||||
{{ t('storage.servingMode') }}: {{ servingLabel }}
|
||||
</p>
|
||||
|
||||
<div class="mt-4 border-t border-default pt-4">
|
||||
<div
|
||||
class="grid gap-1.5"
|
||||
:class="actionGridClass"
|
||||
>
|
||||
<button
|
||||
v-for="action in actions"
|
||||
:key="action.key"
|
||||
type="button"
|
||||
class="flex flex-col items-center justify-center gap-1 rounded-lg border px-1 py-2 transition disabled:cursor-not-allowed disabled:opacity-40"
|
||||
:class="action.danger
|
||||
? 'border-error/30 text-error hover:bg-error/5'
|
||||
: 'border-default text-muted hover:bg-muted/40 hover:text-highlighted'"
|
||||
:title="action.label"
|
||||
:aria-label="action.label"
|
||||
:disabled="actionsDisabled || action.disabled"
|
||||
@click="action.onClick"
|
||||
>
|
||||
<UIcon
|
||||
:name="action.icon"
|
||||
class="size-4 shrink-0"
|
||||
/>
|
||||
<span class="w-full truncate text-center text-[11px] leading-none">
|
||||
{{ action.shortLabel }}
|
||||
</span>
|
||||
</button>
|
||||
<div class="mt-4 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted">
|
||||
<div class="flex min-w-0 items-center gap-2">
|
||||
<span class="shrink-0">{{ t('storage.storageId') }}:</span>
|
||||
<code class="min-w-0 truncate font-mono text-dimmed">{{ backend.id }}</code>
|
||||
<CopyButton
|
||||
icon="i-lucide-copy"
|
||||
icon-only
|
||||
variant="ghost"
|
||||
color="primary"
|
||||
class="shrink-0"
|
||||
:label="t('common.copy')"
|
||||
:value="backend.id"
|
||||
:success-title="t('copy.copied')"
|
||||
/>
|
||||
</div>
|
||||
<span>
|
||||
{{ t('storage.storageType') }}: {{ typeLabel }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex flex-wrap gap-2 border-t border-default pt-4">
|
||||
<UButton
|
||||
v-if="canSetDefault()"
|
||||
:label="t('storage.setDefault')"
|
||||
icon="i-lucide-star"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
:disabled="actionsDisabled"
|
||||
@click="emit('setDefault')"
|
||||
/>
|
||||
<UButton
|
||||
v-if="showMigrateIn"
|
||||
:label="t('storage.backup.migrateIn')"
|
||||
:title="t('storage.backup.migrateInHint')"
|
||||
icon="i-lucide-import"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
:disabled="actionsDisabled"
|
||||
@click="emit('migrateIn')"
|
||||
/>
|
||||
<UButton
|
||||
v-if="showMigrateOut"
|
||||
:label="t('storage.backup.migrateOut')"
|
||||
:title="t('storage.backup.migrateOutHint')"
|
||||
icon="i-lucide-arrow-up-from-line"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
:disabled="actionsDisabled"
|
||||
@click="emit('migrateOut')"
|
||||
/>
|
||||
<UButton
|
||||
v-if="canEdit()"
|
||||
:label="t('common.edit')"
|
||||
icon="i-lucide-pencil"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
:disabled="actionsDisabled"
|
||||
@click="emit('edit')"
|
||||
/>
|
||||
<UButton
|
||||
:label="t('storage.testConnection')"
|
||||
:icon="isLocal ? 'i-lucide-wand-sparkles' : 'i-lucide-activity'"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
:loading="busy"
|
||||
:disabled="actionsDisabled"
|
||||
@click="emit('test')"
|
||||
/>
|
||||
<UButton
|
||||
v-if="canToggle()"
|
||||
:label="backend.enabled ? t('storage.disable') : t('storage.enable')"
|
||||
:icon="backend.enabled ? 'i-lucide-pause' : 'i-lucide-play'"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
:disabled="actionsDisabled || (backend.isDefault && backend.enabled)"
|
||||
@click="emit('toggleEnabled')"
|
||||
/>
|
||||
<UButton
|
||||
v-if="canDelete()"
|
||||
:label="t('common.delete')"
|
||||
icon="i-lucide-trash-2"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="error"
|
||||
:disabled="actionsDisabled"
|
||||
@click="emit('delete')"
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
@@ -6,6 +6,7 @@ type StorageProvider = 'r2' | 'cos' | 'oss' | 'aws' | 'custom'
|
||||
|
||||
export interface StorageFormPayload {
|
||||
name: string
|
||||
provider: StorageProvider
|
||||
config: {
|
||||
endpoint: string
|
||||
region: string
|
||||
@@ -158,6 +159,7 @@ watch(provider, (value) => {
|
||||
function handleSubmit() {
|
||||
emit('submit', {
|
||||
name: name.value.trim() || providerLabel(provider.value),
|
||||
provider: provider.value,
|
||||
config: {
|
||||
endpoint: endpoint.value.trim(),
|
||||
region: region.value.trim() || 'auto',
|
||||
|
||||
@@ -0,0 +1,178 @@
|
||||
<script setup lang="ts">
|
||||
import type { BackupJobItem, SyncDraft } from '~/types/backup'
|
||||
import type { StorageBackendItem } from '~/types/storage'
|
||||
|
||||
const props = defineProps<{
|
||||
backends: StorageBackendItem[]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const toast = useToast()
|
||||
const {
|
||||
jobs,
|
||||
jobsPage,
|
||||
jobsPageSize,
|
||||
jobsTotal,
|
||||
jobsTotalPages,
|
||||
jobsLoading,
|
||||
estimate,
|
||||
packages,
|
||||
loadingEstimate,
|
||||
polling,
|
||||
hasActiveJob,
|
||||
getActiveJob,
|
||||
loadJobs,
|
||||
setJobsPage,
|
||||
setJobsPageSize,
|
||||
loadEstimate,
|
||||
startPolling,
|
||||
createExport,
|
||||
previewRestore,
|
||||
confirmRestore,
|
||||
previewSync,
|
||||
startSync,
|
||||
retryJob,
|
||||
cancelJob,
|
||||
downloadUrl
|
||||
} = useBackup()
|
||||
|
||||
const syncDraft = ref<SyncDraft | null>(null)
|
||||
const syncCardRef = ref<{ applyDraft: (draft: SyncDraft) => void } | null>(null)
|
||||
const panelRef = ref<HTMLElement | null>(null)
|
||||
const syncHighlighted = ref(false)
|
||||
|
||||
const activeJob = computed(() => getActiveJob())
|
||||
const exportBusy = computed(() => activeJob.value?.type === 'full_export')
|
||||
const restoreBusy = computed(() => activeJob.value?.type === 'full_restore')
|
||||
const syncBusy = computed(() => activeJob.value?.type === 'backend_sync')
|
||||
const anyJobBusy = computed(() => Boolean(activeJob.value))
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([loadJobs(), loadEstimate()])
|
||||
if (hasActiveJob()) {
|
||||
startPolling()
|
||||
}
|
||||
})
|
||||
|
||||
function applySyncDraft(draft: SyncDraft) {
|
||||
syncDraft.value = draft
|
||||
syncCardRef.value?.applyDraft(draft)
|
||||
syncHighlighted.value = true
|
||||
window.setTimeout(() => {
|
||||
syncHighlighted.value = false
|
||||
}, 2500)
|
||||
nextTick(() => {
|
||||
panelRef.value?.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
})
|
||||
toast.add({ title: t('storage.backup.syncDraftApplied'), color: 'info' })
|
||||
}
|
||||
|
||||
defineExpose({ applySyncDraft })
|
||||
|
||||
async function onExport() {
|
||||
await createExport()
|
||||
}
|
||||
|
||||
async function onRestore(input: {
|
||||
file?: File
|
||||
archiveName?: string
|
||||
conflictMode: 'skip' | 'overwrite'
|
||||
}) {
|
||||
await confirmRestore(input)
|
||||
}
|
||||
|
||||
async function onCancel(jobId: string) {
|
||||
await cancelJob(jobId)
|
||||
}
|
||||
|
||||
async function onSync(body: {
|
||||
fromBackendId: string
|
||||
toBackendId: string
|
||||
deleteSource: boolean
|
||||
setDefault: boolean
|
||||
}) {
|
||||
await startSync(body)
|
||||
}
|
||||
|
||||
function onDownload(jobId: string) {
|
||||
window.open(downloadUrl(jobId), '_blank')
|
||||
}
|
||||
|
||||
async function onRetry(jobId: string) {
|
||||
await retryJob(jobId)
|
||||
}
|
||||
|
||||
function onViewJob(job: BackupJobItem) {
|
||||
toast.add({
|
||||
title: t('storage.backup.jobTypeRestore'),
|
||||
description: job.message,
|
||||
color: 'info'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section
|
||||
ref="panelRef"
|
||||
class="scroll-mt-20 space-y-4 border-t border-default pt-5"
|
||||
>
|
||||
<header>
|
||||
<h2 class="text-base font-semibold">
|
||||
{{ t('storage.backup.sectionTitle') }}
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-muted">
|
||||
{{ t('storage.backup.sectionSubtitle') }}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 items-stretch gap-4 xl:grid-cols-3">
|
||||
<StorageBackupExportCard
|
||||
class="h-full"
|
||||
:estimate="estimate"
|
||||
:loading="loadingEstimate"
|
||||
:busy="exportBusy"
|
||||
:active-job="exportBusy ? activeJob : null"
|
||||
:disabled="anyJobBusy && !exportBusy"
|
||||
@export="onExport"
|
||||
/>
|
||||
<StorageBackupRestoreCard
|
||||
class="h-full"
|
||||
:packages="packages"
|
||||
:busy="anyJobBusy"
|
||||
:restore-busy="restoreBusy"
|
||||
:active-job="restoreBusy ? activeJob : null"
|
||||
:disabled="anyJobBusy && !restoreBusy"
|
||||
:preview-restore="previewRestore"
|
||||
@restore="onRestore"
|
||||
/>
|
||||
<StorageBackendSyncCard
|
||||
ref="syncCardRef"
|
||||
class="h-full"
|
||||
:backends="props.backends"
|
||||
:sync-draft="syncDraft"
|
||||
:highlighted="syncHighlighted"
|
||||
:busy="syncBusy"
|
||||
:active-job="syncBusy ? activeJob : null"
|
||||
:disabled="anyJobBusy && !syncBusy"
|
||||
:preview-sync="previewSync"
|
||||
@sync="onSync"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<StorageBackupJobTable
|
||||
:jobs="jobs"
|
||||
:polling="polling"
|
||||
:page="jobsPage"
|
||||
:total-pages="jobsTotalPages"
|
||||
:total="jobsTotal"
|
||||
:page-size="jobsPageSize"
|
||||
:loading="jobsLoading"
|
||||
@update:page="setJobsPage"
|
||||
@update:page-size="setJobsPageSize"
|
||||
@download="onDownload"
|
||||
@retry="onRetry"
|
||||
@cancel="onCancel"
|
||||
@view="onViewJob"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,184 @@
|
||||
<script setup lang="ts">
|
||||
import type { StorageBackendItem } from '~/types/storage'
|
||||
|
||||
const props = defineProps<{
|
||||
backends: StorageBackendItem[]
|
||||
loading?: boolean
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const { formatFileSize } = useFileSize()
|
||||
|
||||
const CHART_COLORS = [
|
||||
'var(--ui-primary)',
|
||||
'#3b82f6',
|
||||
'#6366f1',
|
||||
'#f59e0b',
|
||||
'#ec4899',
|
||||
'#8b5cf6'
|
||||
] as const
|
||||
|
||||
function backendUsedBytes(backend: StorageBackendItem) {
|
||||
return backend.capacity.source === 'disk'
|
||||
? backend.capacity.usedBytes
|
||||
: backend.usage.bytes
|
||||
}
|
||||
|
||||
const totalCapacityBytes = computed(() => {
|
||||
let total = 0
|
||||
let hasTotal = false
|
||||
for (const backend of props.backends) {
|
||||
if (backend.capacity.totalBytes != null && backend.capacity.totalBytes > 0) {
|
||||
total += backend.capacity.totalBytes
|
||||
hasTotal = true
|
||||
}
|
||||
}
|
||||
return hasTotal ? total : null
|
||||
})
|
||||
|
||||
const totalUsedBytes = computed(() =>
|
||||
props.backends.reduce((sum, backend) => sum + backendUsedBytes(backend), 0)
|
||||
)
|
||||
|
||||
const totalFreeBytes = computed(() => {
|
||||
if (!totalCapacityBytes.value) return null
|
||||
return Math.max(0, totalCapacityBytes.value - totalUsedBytes.value)
|
||||
})
|
||||
|
||||
const usagePercent = computed(() => {
|
||||
if (!totalCapacityBytes.value) return null
|
||||
return Math.min(Math.round((totalUsedBytes.value / totalCapacityBytes.value) * 1000) / 10, 100)
|
||||
})
|
||||
|
||||
const usageBarWidth = computed(() => {
|
||||
if (usagePercent.value == null) return 0
|
||||
return Math.max(usagePercent.value, totalUsedBytes.value > 0 ? 4 : 0)
|
||||
})
|
||||
|
||||
const distributionItems = computed(() => {
|
||||
if (!totalCapacityBytes.value) return []
|
||||
|
||||
return props.backends
|
||||
.filter(backend => backend.capacity.totalBytes != null && backend.capacity.totalBytes > 0)
|
||||
.map((backend, index) => ({
|
||||
id: backend.id,
|
||||
name: backend.name,
|
||||
color: CHART_COLORS[index % CHART_COLORS.length]!,
|
||||
percent: Math.round((backend.capacity.totalBytes! / totalCapacityBytes.value!) * 1000) / 10
|
||||
}))
|
||||
})
|
||||
|
||||
const donutStyle = computed(() => {
|
||||
const items = distributionItems.value
|
||||
if (!items.length) return { background: 'var(--ui-bg-muted)' }
|
||||
|
||||
let cursor = 0
|
||||
const segments = items.map((item) => {
|
||||
const start = cursor
|
||||
cursor += item.percent
|
||||
return `${item.color} ${start}% ${cursor}%`
|
||||
})
|
||||
|
||||
return { background: `conic-gradient(${segments.join(', ')})` }
|
||||
})
|
||||
|
||||
function displaySize(bytes: number | null) {
|
||||
if (props.loading) return '—'
|
||||
if (bytes == null) return '—'
|
||||
return formatFileSize(bytes)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="rounded-xl border border-default bg-elevated p-4 sm:p-5">
|
||||
<h2 class="text-sm font-semibold">
|
||||
{{ t('storage.overviewTitle') }}
|
||||
</h2>
|
||||
<p class="mt-0.5 text-xs text-muted">
|
||||
{{ t('storage.overviewSubtitle') }}
|
||||
</p>
|
||||
|
||||
<div class="mt-4 grid gap-5 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center">
|
||||
<div>
|
||||
<div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
|
||||
<div>
|
||||
<p class="text-xs text-muted">
|
||||
{{ t('storage.overviewTotal') }}
|
||||
</p>
|
||||
<p class="mt-1 text-lg font-semibold tabular-nums">
|
||||
{{ displaySize(totalCapacityBytes) }}
|
||||
</p>
|
||||
<div
|
||||
v-if="totalCapacityBytes"
|
||||
class="mt-2 h-1 overflow-hidden rounded-full bg-muted/50"
|
||||
>
|
||||
<div
|
||||
class="h-full rounded-full bg-primary transition-all"
|
||||
:style="{ width: `${usageBarWidth}%` }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-muted">
|
||||
{{ t('storage.overviewUsed') }}
|
||||
</p>
|
||||
<p class="mt-1 text-lg font-semibold tabular-nums">
|
||||
{{ displaySize(totalUsedBytes) }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-muted">
|
||||
{{ t('storage.overviewFree') }}
|
||||
</p>
|
||||
<p class="mt-1 text-lg font-semibold tabular-nums">
|
||||
{{ displaySize(totalFreeBytes) }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-muted">
|
||||
{{ t('storage.overviewUsageRate') }}
|
||||
</p>
|
||||
<p class="mt-1 text-lg font-semibold tabular-nums">
|
||||
{{ usagePercent != null ? `${usagePercent}%` : '—' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<div
|
||||
class="relative size-24 shrink-0 rounded-full p-2"
|
||||
:style="donutStyle"
|
||||
>
|
||||
<div class="flex size-full items-center justify-center rounded-full bg-elevated px-2 text-center">
|
||||
<p class="text-[10px] leading-tight text-muted">
|
||||
{{ t('storage.capacityDistribution') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul
|
||||
v-if="distributionItems.length"
|
||||
class="min-w-[8rem] space-y-2"
|
||||
>
|
||||
<li
|
||||
v-for="item in distributionItems"
|
||||
:key="item.id"
|
||||
class="flex items-center justify-between gap-3 text-xs"
|
||||
>
|
||||
<span class="flex min-w-0 items-center gap-1.5">
|
||||
<span
|
||||
class="size-2 shrink-0 rounded-full"
|
||||
:style="{ background: item.color }"
|
||||
/>
|
||||
<span class="truncate">{{ item.name }}</span>
|
||||
</span>
|
||||
<span class="shrink-0 tabular-nums text-muted">
|
||||
{{ item.percent }}%
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,62 @@
|
||||
<script setup lang="ts">
|
||||
const { t } = useI18n()
|
||||
|
||||
const items = computed(() => [
|
||||
{
|
||||
icon: 'i-lucide-hard-drive',
|
||||
iconClass: 'text-primary',
|
||||
boxClass: 'border-primary/20 bg-primary/5',
|
||||
title: t('storage.backendLocal'),
|
||||
desc: t('storage.supportedLocalDesc')
|
||||
},
|
||||
{
|
||||
icon: 'i-lucide-cloud',
|
||||
iconClass: 'text-orange-500',
|
||||
boxClass: 'border-orange-500/20 bg-orange-500/5',
|
||||
title: 'Cloudflare R2',
|
||||
desc: t('storage.supportedR2Desc')
|
||||
},
|
||||
{
|
||||
icon: 'i-lucide-server',
|
||||
iconClass: 'text-blue-500',
|
||||
boxClass: 'border-blue-500/20 bg-blue-500/5',
|
||||
title: t('storage.supportedS3Title'),
|
||||
desc: t('storage.supportedS3Desc')
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="rounded-xl border border-default bg-elevated p-4 sm:p-5">
|
||||
<h2 class="text-sm font-semibold">
|
||||
{{ t('storage.supportedTitle') }}
|
||||
</h2>
|
||||
|
||||
<div class="mt-4 grid grid-cols-1 gap-3 lg:grid-cols-3">
|
||||
<div
|
||||
v-for="item in items"
|
||||
:key="item.title"
|
||||
class="flex items-start gap-3 rounded-lg border border-default bg-muted/30 px-4 py-3"
|
||||
>
|
||||
<div
|
||||
class="flex size-10 shrink-0 items-center justify-center rounded-lg border"
|
||||
:class="item.boxClass"
|
||||
>
|
||||
<UIcon
|
||||
:name="item.icon"
|
||||
class="size-5"
|
||||
:class="item.iconClass"
|
||||
/>
|
||||
</div>
|
||||
<div class="min-w-0 pt-0.5">
|
||||
<p class="text-sm font-semibold">
|
||||
{{ item.title }}
|
||||
</p>
|
||||
<p class="mt-0.5 text-xs leading-relaxed text-muted">
|
||||
{{ item.desc }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -36,56 +36,53 @@ function formatOptional(bytes: number | null): string {
|
||||
|
||||
<template>
|
||||
<div class="space-y-3">
|
||||
<div class="grid grid-cols-3 gap-2 text-center text-xs">
|
||||
<div class="rounded-lg bg-muted/30 px-2 py-2">
|
||||
<p class="text-muted">
|
||||
{{ $t('storage.statTotal') }}
|
||||
</p>
|
||||
<p class="mt-1 font-medium tabular-nums text-highlighted">
|
||||
{{ formatOptional(capacity.totalBytes) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-lg bg-muted/30 px-2 py-2">
|
||||
<p class="text-muted">
|
||||
<div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
||||
<div>
|
||||
<p class="text-xs text-muted">
|
||||
{{ $t('storage.statUsed') }}
|
||||
</p>
|
||||
<p class="mt-1 font-medium tabular-nums text-highlighted">
|
||||
<p class="mt-1 text-sm font-semibold tabular-nums">
|
||||
{{ formatFileSize(displayUsedBytes) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-lg bg-muted/30 px-2 py-2">
|
||||
<p class="text-muted">
|
||||
<div>
|
||||
<p class="text-xs text-muted">
|
||||
{{ $t('storage.statTotal') }}
|
||||
</p>
|
||||
<p class="mt-1 text-sm font-semibold tabular-nums">
|
||||
{{ formatOptional(capacity.totalBytes) }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-muted">
|
||||
{{ $t('storage.statFree') }}
|
||||
</p>
|
||||
<p
|
||||
class="mt-1 font-medium tabular-nums"
|
||||
:class="overQuota ? 'text-error' : 'text-highlighted'"
|
||||
class="mt-1 text-sm font-semibold tabular-nums"
|
||||
:class="overQuota ? 'text-error' : ''"
|
||||
>
|
||||
{{ formatOptional(capacity.freeBytes) }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-muted">
|
||||
{{ $t('storage.usageRate') }}
|
||||
</p>
|
||||
<p class="mt-1 text-sm font-semibold tabular-nums">
|
||||
{{ hasBar ? `${displayPercent}%` : '—' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="hasBar"
|
||||
class="space-y-1"
|
||||
class="h-1 overflow-hidden rounded-full bg-muted/50"
|
||||
>
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<span class="text-muted">{{ $t('storage.usageRate') }}</span>
|
||||
<span
|
||||
class="tabular-nums font-medium"
|
||||
:class="overQuota ? 'text-error' : ''"
|
||||
>
|
||||
{{ displayPercent }}%
|
||||
</span>
|
||||
</div>
|
||||
<div class="h-1.5 overflow-hidden rounded-full bg-muted/50">
|
||||
<div
|
||||
class="h-full rounded-full transition-all"
|
||||
:class="overQuota ? 'bg-error/80' : 'bg-primary/70'"
|
||||
:style="{ width: `${barWidth}%` }"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="h-full rounded-full transition-all"
|
||||
:class="overQuota ? 'bg-error/80' : 'bg-primary'"
|
||||
:style="{ width: `${barWidth}%` }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,338 @@
|
||||
export type ApiDocMethod = 'GET' | 'POST' | 'DELETE'
|
||||
export type ApiDocCategory = 'image' | 'extension' | 'system'
|
||||
export type ApiParamLocation = 'form-data' | 'query' | 'header' | 'body'
|
||||
|
||||
export interface ApiDocParam {
|
||||
name: string
|
||||
type: string
|
||||
location: ApiParamLocation
|
||||
required: boolean
|
||||
descriptionKey: string
|
||||
}
|
||||
|
||||
export interface ApiDocEndpoint {
|
||||
id: string
|
||||
category: ApiDocCategory
|
||||
method: ApiDocMethod
|
||||
path: string
|
||||
titleKey: string
|
||||
descKey: string
|
||||
params: ApiDocParam[]
|
||||
requiresAuth: boolean
|
||||
curl: string
|
||||
responseExample: string
|
||||
}
|
||||
|
||||
interface ApiDocsContext {
|
||||
baseUrl: string
|
||||
authHeader: string
|
||||
}
|
||||
|
||||
function authFlag(authHeader: string) {
|
||||
return `-H 'Auth-Token: ${authHeader}'`
|
||||
}
|
||||
|
||||
export function buildApiDocs(ctx: ApiDocsContext): ApiDocEndpoint[] {
|
||||
const { baseUrl, authHeader } = ctx
|
||||
const auth = authFlag(authHeader)
|
||||
|
||||
return [
|
||||
{
|
||||
id: 'upload',
|
||||
category: 'image',
|
||||
method: 'POST',
|
||||
path: '/api/images/upload',
|
||||
titleKey: 'api.docs.upload.title',
|
||||
descKey: 'api.docs.upload.desc',
|
||||
requiresAuth: true,
|
||||
params: [
|
||||
{
|
||||
name: 'image',
|
||||
type: 'file',
|
||||
location: 'form-data',
|
||||
required: true,
|
||||
descriptionKey: 'api.params.upload.image'
|
||||
},
|
||||
{
|
||||
name: 'file',
|
||||
type: 'file',
|
||||
location: 'form-data',
|
||||
required: false,
|
||||
descriptionKey: 'api.params.upload.file'
|
||||
},
|
||||
{
|
||||
name: 'files',
|
||||
type: 'file',
|
||||
location: 'form-data',
|
||||
required: false,
|
||||
descriptionKey: 'api.params.upload.files'
|
||||
},
|
||||
{
|
||||
name: 'token',
|
||||
type: 'string',
|
||||
location: 'form-data',
|
||||
required: false,
|
||||
descriptionKey: 'api.params.upload.token'
|
||||
},
|
||||
{
|
||||
name: 'tagIds',
|
||||
type: 'string',
|
||||
location: 'form-data',
|
||||
required: false,
|
||||
descriptionKey: 'api.params.upload.tagIds'
|
||||
},
|
||||
{
|
||||
name: 'tagNames',
|
||||
type: 'string',
|
||||
location: 'form-data',
|
||||
required: false,
|
||||
descriptionKey: 'api.params.upload.tagNames'
|
||||
}
|
||||
],
|
||||
curl: `curl -X POST "${baseUrl}/api/images/upload" \\
|
||||
${auth} \\
|
||||
-F "image=@./demo.png" \\
|
||||
-F 'tagNames=["博客","截图"]'`,
|
||||
responseExample: `{
|
||||
"success": true,
|
||||
"items": [
|
||||
{
|
||||
"key": "images/2026/08/abc123.webp",
|
||||
"url": "https://pic.example.com/abc123.webp",
|
||||
"originalName": "demo.png",
|
||||
"contentType": "image/webp",
|
||||
"size": 12345,
|
||||
"uploadedAt": "2026-08-01T12:00:00.000Z",
|
||||
"markdown": "",
|
||||
"html": "<img src=\\"https://pic.example.com/abc123.webp\\" alt=\\"demo.png\\">"
|
||||
}
|
||||
],
|
||||
"errors": []
|
||||
}`
|
||||
},
|
||||
{
|
||||
id: 'list',
|
||||
category: 'image',
|
||||
method: 'GET',
|
||||
path: '/api/images',
|
||||
titleKey: 'api.docs.list.title',
|
||||
descKey: 'api.docs.list.desc',
|
||||
requiresAuth: true,
|
||||
params: [
|
||||
{
|
||||
name: 'limit',
|
||||
type: 'number',
|
||||
location: 'query',
|
||||
required: false,
|
||||
descriptionKey: 'api.params.list.limit'
|
||||
},
|
||||
{
|
||||
name: 'page',
|
||||
type: 'number',
|
||||
location: 'query',
|
||||
required: false,
|
||||
descriptionKey: 'api.params.list.page'
|
||||
},
|
||||
{
|
||||
name: 'backendId',
|
||||
type: 'string',
|
||||
location: 'query',
|
||||
required: false,
|
||||
descriptionKey: 'api.params.backendId'
|
||||
}
|
||||
],
|
||||
curl: `curl "${baseUrl}/api/images?limit=20&page=1" \\
|
||||
${auth}`,
|
||||
responseExample: `{
|
||||
"items": [
|
||||
{
|
||||
"key": "images/2026/08/abc123.webp",
|
||||
"url": "https://pic.example.com/abc123.webp",
|
||||
"originalName": "demo.png",
|
||||
"contentType": "image/webp",
|
||||
"size": 12345,
|
||||
"uploadedAt": "2026-08-01T12:00:00.000Z",
|
||||
"markdown": "",
|
||||
"html": "<img src=\\"https://pic.example.com/abc123.webp\\" alt=\\"demo.png\\">"
|
||||
}
|
||||
],
|
||||
"total": 1,
|
||||
"page": 1,
|
||||
"pageSize": 20,
|
||||
"totalPages": 1
|
||||
}`
|
||||
},
|
||||
{
|
||||
id: 'search',
|
||||
category: 'image',
|
||||
method: 'GET',
|
||||
path: '/api/images/search',
|
||||
titleKey: 'api.docs.search.title',
|
||||
descKey: 'api.docs.search.desc',
|
||||
requiresAuth: true,
|
||||
params: [
|
||||
{
|
||||
name: 'q',
|
||||
type: 'string',
|
||||
location: 'query',
|
||||
required: true,
|
||||
descriptionKey: 'api.params.search.q'
|
||||
},
|
||||
{
|
||||
name: 'limit',
|
||||
type: 'number',
|
||||
location: 'query',
|
||||
required: false,
|
||||
descriptionKey: 'api.params.list.limit'
|
||||
},
|
||||
{
|
||||
name: 'page',
|
||||
type: 'number',
|
||||
location: 'query',
|
||||
required: false,
|
||||
descriptionKey: 'api.params.list.page'
|
||||
},
|
||||
{
|
||||
name: 'backendId',
|
||||
type: 'string',
|
||||
location: 'query',
|
||||
required: false,
|
||||
descriptionKey: 'api.params.backendId'
|
||||
}
|
||||
],
|
||||
curl: `curl "${baseUrl}/api/images/search?q=demo&limit=20&page=1" \\
|
||||
${auth}`,
|
||||
responseExample: `{
|
||||
"items": [],
|
||||
"total": 0,
|
||||
"page": 1,
|
||||
"pageSize": 20,
|
||||
"totalPages": 0
|
||||
}`
|
||||
},
|
||||
{
|
||||
id: 'delete',
|
||||
category: 'image',
|
||||
method: 'DELETE',
|
||||
path: '/api/images',
|
||||
titleKey: 'api.docs.delete.title',
|
||||
descKey: 'api.docs.delete.desc',
|
||||
requiresAuth: true,
|
||||
params: [
|
||||
{
|
||||
name: 'key',
|
||||
type: 'string',
|
||||
location: 'query',
|
||||
required: true,
|
||||
descriptionKey: 'api.params.delete.key'
|
||||
}
|
||||
],
|
||||
curl: `curl -X DELETE "${baseUrl}/api/images?key=images/2026/08/xxxx.webp" \\
|
||||
${auth}`,
|
||||
responseExample: `{
|
||||
"success": true
|
||||
}`
|
||||
},
|
||||
{
|
||||
id: 'batchDelete',
|
||||
category: 'image',
|
||||
method: 'POST',
|
||||
path: '/api/images/batch-delete',
|
||||
titleKey: 'api.docs.batchDelete.title',
|
||||
descKey: 'api.docs.batchDelete.desc',
|
||||
requiresAuth: true,
|
||||
params: [
|
||||
{
|
||||
name: 'keys',
|
||||
type: 'string[]',
|
||||
location: 'body',
|
||||
required: true,
|
||||
descriptionKey: 'api.params.batchDelete.keys'
|
||||
}
|
||||
],
|
||||
curl: `curl -X POST "${baseUrl}/api/images/batch-delete" \\
|
||||
${auth} \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-d '{"keys":["images/2026/08/a.webp","images/2026/08/b.webp"]}'`,
|
||||
responseExample: `{
|
||||
"success": true,
|
||||
"deleted": ["images/2026/08/a.webp"],
|
||||
"failed": []
|
||||
}`
|
||||
},
|
||||
{
|
||||
id: 'twikoo',
|
||||
category: 'extension',
|
||||
method: 'POST',
|
||||
path: '/api/index.php',
|
||||
titleKey: 'api.docs.twikoo.title',
|
||||
descKey: 'api.docs.twikoo.desc',
|
||||
requiresAuth: false,
|
||||
params: [
|
||||
{
|
||||
name: 'image',
|
||||
type: 'file',
|
||||
location: 'form-data',
|
||||
required: true,
|
||||
descriptionKey: 'api.params.twikoo.image'
|
||||
},
|
||||
{
|
||||
name: 'token',
|
||||
type: 'string',
|
||||
location: 'form-data',
|
||||
required: true,
|
||||
descriptionKey: 'api.params.twikoo.token'
|
||||
}
|
||||
],
|
||||
curl: `curl -X POST "${baseUrl}/api/index.php" \\
|
||||
-F "token=${authHeader}" \\
|
||||
-F "image=@./demo.png"`,
|
||||
responseExample: `{
|
||||
"result": "success",
|
||||
"code": 200,
|
||||
"url": "https://pic.example.com/abc123.webp"
|
||||
}`
|
||||
},
|
||||
{
|
||||
id: 'config',
|
||||
category: 'system',
|
||||
method: 'GET',
|
||||
path: '/api/auth/config',
|
||||
titleKey: 'api.docs.config.title',
|
||||
descKey: 'api.docs.config.desc',
|
||||
requiresAuth: false,
|
||||
params: [],
|
||||
curl: `curl "${baseUrl}/api/auth/config"`,
|
||||
responseExample: `{
|
||||
"initialized": true,
|
||||
"allowRegistration": false,
|
||||
"legacyMode": false,
|
||||
"adminSecretConfigured": false,
|
||||
"apiUploadTokenConfigured": true
|
||||
}`
|
||||
},
|
||||
{
|
||||
id: 'count',
|
||||
category: 'system',
|
||||
method: 'GET',
|
||||
path: '/api/images/count',
|
||||
titleKey: 'api.docs.count.title',
|
||||
descKey: 'api.docs.count.desc',
|
||||
requiresAuth: true,
|
||||
params: [
|
||||
{
|
||||
name: 'backendId',
|
||||
type: 'string',
|
||||
location: 'query',
|
||||
required: false,
|
||||
descriptionKey: 'api.params.backendId'
|
||||
}
|
||||
],
|
||||
curl: `curl "${baseUrl}/api/images/count" \\
|
||||
${auth}`,
|
||||
responseExample: `{
|
||||
"total": 42
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
+37
-10
@@ -1,3 +1,5 @@
|
||||
import type { LoginVerificationPayload } from '~/types/auth'
|
||||
|
||||
export type AuthStatus = 'checking' | 'authenticated' | 'unauthenticated'
|
||||
|
||||
export type UserRole = 'admin' | 'user'
|
||||
@@ -8,11 +10,18 @@ export interface AuthUser {
|
||||
role: UserRole
|
||||
}
|
||||
|
||||
export interface LoginVerificationPublicConfig {
|
||||
method: 'slider' | 'turnstile' | 'cap'
|
||||
turnstileSiteKey?: string
|
||||
capApiEndpoint?: string
|
||||
}
|
||||
|
||||
export interface AuthStatusResponse {
|
||||
initialized: boolean
|
||||
allowRegistration: boolean
|
||||
legacyMode: boolean
|
||||
needsMigration: boolean
|
||||
loginVerification: LoginVerificationPublicConfig
|
||||
user: AuthUser | null
|
||||
}
|
||||
|
||||
@@ -66,9 +75,19 @@ export function getFetchErrorMessage(error: unknown, fallback: string): string {
|
||||
|
||||
export type AuthActionResult = { ok: true } | { ok: false, error: string }
|
||||
|
||||
export interface LoginCaptchaPayload {
|
||||
captchaId: string
|
||||
captchaPosition: number
|
||||
export type { LoginVerificationPayload }
|
||||
|
||||
function buildVerificationBody(verification: LoginVerificationPayload): Record<string, unknown> {
|
||||
if (verification.method === 'slider') {
|
||||
return {
|
||||
captchaId: verification.captchaId,
|
||||
captchaPosition: verification.captchaPosition
|
||||
}
|
||||
}
|
||||
if (verification.method === 'turnstile') {
|
||||
return { turnstileToken: verification.turnstileToken }
|
||||
}
|
||||
return { capToken: verification.capToken }
|
||||
}
|
||||
|
||||
export function useAuth() {
|
||||
@@ -123,7 +142,7 @@ export function useAuth() {
|
||||
async function login(
|
||||
credentials: { username: string, password: string }
|
||||
| { secret: string },
|
||||
captcha: LoginCaptchaPayload
|
||||
verification: LoginVerificationPayload
|
||||
): Promise<{ ok: boolean, needsMigration?: boolean, error?: string }> {
|
||||
try {
|
||||
const result = await $fetch<{
|
||||
@@ -135,8 +154,7 @@ export function useAuth() {
|
||||
credentials: 'include',
|
||||
body: {
|
||||
...credentials,
|
||||
captchaId: captcha.captchaId,
|
||||
captchaPosition: captcha.captchaPosition
|
||||
...buildVerificationBody(verification)
|
||||
}
|
||||
})
|
||||
if (result.needsMigration) {
|
||||
@@ -159,7 +177,8 @@ export function useAuth() {
|
||||
|
||||
async function register(
|
||||
username: string,
|
||||
password: string
|
||||
password: string,
|
||||
verification: LoginVerificationPayload
|
||||
): Promise<AuthActionResult> {
|
||||
const validationError = validateAuthInput(username, password)
|
||||
if (validationError) {
|
||||
@@ -172,7 +191,11 @@ export function useAuth() {
|
||||
{
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
body: { username: username.trim(), password }
|
||||
body: {
|
||||
username: username.trim(),
|
||||
password,
|
||||
...buildVerificationBody(verification)
|
||||
}
|
||||
}
|
||||
)
|
||||
user.value = result.user
|
||||
@@ -291,15 +314,19 @@ export function useAuth() {
|
||||
|
||||
async function logout() {
|
||||
try {
|
||||
await $fetch('/api/auth/logout', { method: 'POST' })
|
||||
await $fetch('/api/auth/logout', { method: 'POST', credentials: 'include' })
|
||||
} catch {
|
||||
// 忽略登出失败
|
||||
} finally {
|
||||
status.value = 'unauthenticated'
|
||||
user.value = null
|
||||
authStatus.value = null
|
||||
hasValidatedOnce.value = true
|
||||
}
|
||||
try {
|
||||
await fetchStatus()
|
||||
} catch {
|
||||
// 保留既有公开配置（loginVerification 等）
|
||||
}
|
||||
}
|
||||
|
||||
function handleAuthError(error: unknown) {
|
||||
|
||||
@@ -0,0 +1,319 @@
|
||||
import type {
|
||||
BackupEstimate,
|
||||
BackupJobItem,
|
||||
BackupPackageItem,
|
||||
BackupRestorePreview,
|
||||
BackendSyncPreview
|
||||
} from '~/types/backup'
|
||||
|
||||
const jobs = ref<BackupJobItem[]>([])
|
||||
const jobsPage = ref(1)
|
||||
const jobsPageSize = ref(10)
|
||||
const jobsTotal = ref(0)
|
||||
const jobsTotalPages = ref(1)
|
||||
const jobsLoading = ref(false)
|
||||
const activeJobState = ref<BackupJobItem | null>(null)
|
||||
const estimate = ref<BackupEstimate | null>(null)
|
||||
const packages = ref<BackupPackageItem[]>([])
|
||||
const loadingEstimate = ref(false)
|
||||
const polling = ref(false)
|
||||
let pollTimer: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
export function useBackup() {
|
||||
const toast = useToast()
|
||||
const { t } = useI18n()
|
||||
|
||||
function stopPolling() {
|
||||
if (pollTimer) {
|
||||
clearInterval(pollTimer)
|
||||
pollTimer = null
|
||||
}
|
||||
polling.value = false
|
||||
}
|
||||
|
||||
function hasActiveJob(): boolean {
|
||||
return activeJobState.value !== null
|
||||
}
|
||||
|
||||
function getActiveJob(): BackupJobItem | null {
|
||||
return activeJobState.value
|
||||
}
|
||||
|
||||
async function cancelJob(jobId: string) {
|
||||
try {
|
||||
await $fetch(`/api/admin/backup/jobs/${jobId}/cancel`, {
|
||||
method: 'POST',
|
||||
credentials: 'include'
|
||||
})
|
||||
await loadJobs()
|
||||
toast.add({ title: t('storage.backup.cancelDone'), color: 'success' })
|
||||
} catch (error: unknown) {
|
||||
handleError(error, t('storage.backup.cancelFailed'))
|
||||
}
|
||||
}
|
||||
|
||||
async function loadJobs(options?: { page?: number, pageSize?: number }) {
|
||||
if (options?.page !== undefined) jobsPage.value = options.page
|
||||
if (options?.pageSize !== undefined) jobsPageSize.value = options.pageSize
|
||||
jobsLoading.value = true
|
||||
try {
|
||||
const data = await $fetch<{
|
||||
jobs: BackupJobItem[]
|
||||
total: number
|
||||
page: number
|
||||
pageSize: number
|
||||
totalPages: number
|
||||
activeJob: BackupJobItem | null
|
||||
}>('/api/admin/backup/jobs', {
|
||||
credentials: 'include',
|
||||
query: {
|
||||
pageNum: jobsPage.value,
|
||||
pageSize: jobsPageSize.value
|
||||
}
|
||||
})
|
||||
jobs.value = data.jobs
|
||||
jobsTotal.value = data.total
|
||||
jobsPage.value = data.page
|
||||
jobsPageSize.value = data.pageSize
|
||||
jobsTotalPages.value = data.totalPages
|
||||
activeJobState.value = data.activeJob
|
||||
if (!data.activeJob) {
|
||||
stopPolling()
|
||||
void loadEstimate().catch(() => {})
|
||||
}
|
||||
return data.jobs
|
||||
} finally {
|
||||
jobsLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function setJobsPage(page: number) {
|
||||
jobsPage.value = page
|
||||
return loadJobs()
|
||||
}
|
||||
|
||||
async function setJobsPageSize(pageSize: number) {
|
||||
jobsPageSize.value = pageSize
|
||||
jobsPage.value = 1
|
||||
return loadJobs()
|
||||
}
|
||||
|
||||
async function refreshJobsFirstPage() {
|
||||
jobsPage.value = 1
|
||||
return loadJobs()
|
||||
}
|
||||
|
||||
async function loadEstimate() {
|
||||
loadingEstimate.value = true
|
||||
try {
|
||||
const data = await $fetch<{
|
||||
estimate: BackupEstimate
|
||||
packages: BackupPackageItem[]
|
||||
backupsDir: string
|
||||
}>('/api/admin/backup/estimate', { credentials: 'include' })
|
||||
estimate.value = data.estimate
|
||||
packages.value = data.packages
|
||||
return data
|
||||
} finally {
|
||||
loadingEstimate.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function startPolling() {
|
||||
if (pollTimer) return
|
||||
polling.value = true
|
||||
pollTimer = setInterval(() => {
|
||||
void loadJobs().catch(() => {})
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
async function createExport() {
|
||||
try {
|
||||
const data = await $fetch<{ job: BackupJobItem, estimate: BackupEstimate }>(
|
||||
'/api/admin/backup/export',
|
||||
{ method: 'POST', credentials: 'include' }
|
||||
)
|
||||
estimate.value = data.estimate
|
||||
await refreshJobsFirstPage()
|
||||
startPolling()
|
||||
toast.add({ title: t('storage.backup.exportStarted'), color: 'success' })
|
||||
return data.job
|
||||
} catch (error: unknown) {
|
||||
handleError(error, t('storage.backup.exportFailed'))
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
async function previewRestore(input: {
|
||||
file?: File
|
||||
archiveName?: string
|
||||
}): Promise<BackupRestorePreview> {
|
||||
if (input.file) {
|
||||
const form = new FormData()
|
||||
form.append('file', input.file)
|
||||
form.append('dryRun', 'true')
|
||||
const data = await $fetch<{ preview: BackupRestorePreview }>(
|
||||
'/api/admin/backup/restore',
|
||||
{ method: 'POST', credentials: 'include', body: form }
|
||||
)
|
||||
return data.preview
|
||||
}
|
||||
|
||||
const data = await $fetch<{ preview: BackupRestorePreview }>(
|
||||
'/api/admin/backup/restore',
|
||||
{
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
body: {
|
||||
archiveName: input.archiveName,
|
||||
dryRun: true
|
||||
}
|
||||
}
|
||||
)
|
||||
return data.preview
|
||||
}
|
||||
|
||||
async function confirmRestore(input: {
|
||||
file?: File
|
||||
archiveName?: string
|
||||
conflictMode: 'skip' | 'overwrite'
|
||||
}) {
|
||||
try {
|
||||
if (input.file) {
|
||||
const form = new FormData()
|
||||
form.append('file', input.file)
|
||||
form.append('conflictMode', input.conflictMode)
|
||||
const data = await $fetch<{ job: BackupJobItem }>(
|
||||
'/api/admin/backup/restore',
|
||||
{ method: 'POST', credentials: 'include', body: form }
|
||||
)
|
||||
await refreshJobsFirstPage()
|
||||
startPolling()
|
||||
toast.add({ title: t('storage.backup.restoreStarted'), color: 'success' })
|
||||
return data.job
|
||||
}
|
||||
|
||||
const data = await $fetch<{ job: BackupJobItem }>(
|
||||
'/api/admin/backup/restore',
|
||||
{
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
body: {
|
||||
archiveName: input.archiveName,
|
||||
conflictMode: input.conflictMode,
|
||||
dryRun: false
|
||||
}
|
||||
}
|
||||
)
|
||||
await refreshJobsFirstPage()
|
||||
startPolling()
|
||||
toast.add({ title: t('storage.backup.restoreStarted'), color: 'success' })
|
||||
return data.job
|
||||
} catch (error: unknown) {
|
||||
handleError(error, t('storage.backup.restoreFailed'))
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
async function previewSync(body: {
|
||||
fromBackendId: string
|
||||
toBackendId: string
|
||||
}): Promise<BackendSyncPreview> {
|
||||
const data = await $fetch<{ preview: BackendSyncPreview }>(
|
||||
'/api/admin/storage/sync',
|
||||
{
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
body: { ...body, dryRun: true }
|
||||
}
|
||||
)
|
||||
return data.preview
|
||||
}
|
||||
|
||||
async function startSync(body: {
|
||||
fromBackendId: string
|
||||
toBackendId: string
|
||||
deleteSource?: boolean
|
||||
setDefault?: boolean
|
||||
}) {
|
||||
try {
|
||||
const data = await $fetch<{ job: BackupJobItem }>(
|
||||
'/api/admin/storage/sync',
|
||||
{
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
body
|
||||
}
|
||||
)
|
||||
await refreshJobsFirstPage()
|
||||
startPolling()
|
||||
toast.add({ title: t('storage.backup.syncStarted'), color: 'success' })
|
||||
return data.job
|
||||
} catch (error: unknown) {
|
||||
handleError(error, t('storage.backup.syncFailed'))
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
async function retryJob(jobId: string) {
|
||||
try {
|
||||
await $fetch(`/api/admin/backup/jobs/${jobId}/retry`, {
|
||||
method: 'POST',
|
||||
credentials: 'include'
|
||||
})
|
||||
await refreshJobsFirstPage()
|
||||
startPolling()
|
||||
toast.add({ title: t('storage.backup.retryStarted'), color: 'success' })
|
||||
} catch (error: unknown) {
|
||||
handleError(error, t('storage.backup.retryFailed'))
|
||||
}
|
||||
}
|
||||
|
||||
function downloadUrl(jobId: string): string {
|
||||
return `/api/admin/backup/jobs/${jobId}/download`
|
||||
}
|
||||
|
||||
function handleError(error: unknown, fallback: string) {
|
||||
const status = typeof error === 'object' && error !== null && 'statusCode' in error
|
||||
? (error as { statusCode: number }).statusCode
|
||||
: 0
|
||||
if (status === 409) {
|
||||
toast.add({ title: t('storage.backup.jobRunning'), color: 'warning' })
|
||||
return
|
||||
}
|
||||
toast.add({ title: fallback, color: 'error' })
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
stopPolling()
|
||||
})
|
||||
|
||||
return {
|
||||
jobs,
|
||||
jobsPage,
|
||||
jobsPageSize,
|
||||
jobsTotal,
|
||||
jobsTotalPages,
|
||||
jobsLoading,
|
||||
estimate,
|
||||
packages,
|
||||
loadingEstimate,
|
||||
polling,
|
||||
hasActiveJob,
|
||||
getActiveJob,
|
||||
loadJobs,
|
||||
setJobsPage,
|
||||
setJobsPageSize,
|
||||
loadEstimate,
|
||||
startPolling,
|
||||
stopPolling,
|
||||
createExport,
|
||||
previewRestore,
|
||||
confirmRestore,
|
||||
previewSync,
|
||||
startSync,
|
||||
retryJob,
|
||||
cancelJob,
|
||||
downloadUrl
|
||||
}
|
||||
}
|
||||
@@ -3,12 +3,13 @@ import type {
|
||||
ImageListResponse
|
||||
} from '~/types/image'
|
||||
|
||||
const PAGE_SIZE = 12
|
||||
const PAGE_SIZE_DEFAULT = 10
|
||||
|
||||
export function useImageList() {
|
||||
const { t } = useI18n()
|
||||
const items = ref<ImageItem[]>([])
|
||||
const page = ref(1)
|
||||
const pageSize = ref(PAGE_SIZE_DEFAULT)
|
||||
const totalPages = ref(1)
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
@@ -17,6 +18,11 @@ export function useImageList() {
|
||||
const searchQuery = ref('')
|
||||
const activeSearch = ref('')
|
||||
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> {
|
||||
@@ -25,8 +31,29 @@ export function useImageList() {
|
||||
return { backendId }
|
||||
}
|
||||
|
||||
function filterQueryParams(): Record<string, string> {
|
||||
const params: Record<string, string> = { ...storageQueryParams() }
|
||||
const contentType = activeContentType.value.trim()
|
||||
if (contentType && contentType !== 'all') {
|
||||
params.contentType = contentType
|
||||
}
|
||||
const uploadSource = activeUploadSource.value.trim()
|
||||
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
|
||||
}
|
||||
|
||||
function listQueryParams(): Record<string, string> {
|
||||
return storageQueryParams()
|
||||
return filterQueryParams()
|
||||
}
|
||||
|
||||
function matchesActiveStorage(item: ImageItem) {
|
||||
@@ -72,7 +99,7 @@ export function useImageList() {
|
||||
const response = await $fetch<ImageListResponse>('/api/images', {
|
||||
credentials: 'include',
|
||||
query: {
|
||||
limit: PAGE_SIZE,
|
||||
limit: pageSize.value,
|
||||
page: targetPage,
|
||||
...listQueryParams()
|
||||
}
|
||||
@@ -100,7 +127,7 @@ export function useImageList() {
|
||||
credentials: 'include',
|
||||
query: {
|
||||
q,
|
||||
limit: PAGE_SIZE,
|
||||
limit: pageSize.value,
|
||||
page: targetPage,
|
||||
...listQueryParams()
|
||||
}
|
||||
@@ -141,6 +168,76 @@ export function useImageList() {
|
||||
}
|
||||
}
|
||||
|
||||
async function setActiveContentType(contentType: string) {
|
||||
const next = contentType.trim() || 'all'
|
||||
if (next === activeContentType.value) return
|
||||
activeContentType.value = next
|
||||
page.value = 1
|
||||
if (activeSearch.value) {
|
||||
await Promise.all([fetchSearch(1), fetchTotal()])
|
||||
} else {
|
||||
await Promise.all([fetchList(1), fetchTotal()])
|
||||
}
|
||||
}
|
||||
|
||||
async function setActiveUploadSource(uploadSource: string) {
|
||||
const next = uploadSource.trim() || 'all'
|
||||
if (next === activeUploadSource.value) return
|
||||
activeUploadSource.value = next
|
||||
page.value = 1
|
||||
if (activeSearch.value) {
|
||||
await Promise.all([fetchSearch(1), fetchTotal()])
|
||||
} else {
|
||||
await Promise.all([fetchList(1), fetchTotal()])
|
||||
}
|
||||
}
|
||||
|
||||
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()])
|
||||
}
|
||||
|
||||
async function submitSearch() {
|
||||
const q = searchQuery.value.trim()
|
||||
activeSearch.value = q
|
||||
@@ -161,6 +258,17 @@ export function useImageList() {
|
||||
}
|
||||
}
|
||||
|
||||
async function setPageSize(size: number) {
|
||||
if (!Number.isFinite(size) || size <= 0 || size === pageSize.value) return
|
||||
pageSize.value = size
|
||||
page.value = 1
|
||||
if (activeSearch.value) {
|
||||
await Promise.all([fetchSearch(1), fetchTotal()])
|
||||
} else {
|
||||
await Promise.all([fetchList(1), fetchTotal()])
|
||||
}
|
||||
}
|
||||
|
||||
function prependItems(newItems: ImageItem[]) {
|
||||
const matched = newItems.filter(item => matchesActiveStorage(item))
|
||||
if (!matched.length || page.value !== 1) return
|
||||
@@ -217,13 +325,25 @@ 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,
|
||||
pageSize,
|
||||
totalPages,
|
||||
total,
|
||||
loading,
|
||||
activeStorageBackend,
|
||||
activeContentType,
|
||||
activeUploadSource,
|
||||
activeTagIds,
|
||||
activeTagMode,
|
||||
activeUntaggedOnly,
|
||||
storageBackendOptions,
|
||||
searchQuery,
|
||||
activeSearch,
|
||||
@@ -234,10 +354,18 @@ export function useImageList() {
|
||||
refreshList,
|
||||
initializeList,
|
||||
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
|
||||
}
|
||||
}
|
||||
+36
-265
@@ -12,15 +12,6 @@ interface SettingsResponse {
|
||||
}
|
||||
}
|
||||
|
||||
interface ApiDocItem {
|
||||
index: number
|
||||
method: 'GET' | 'POST' | 'DELETE'
|
||||
path: string
|
||||
title: string
|
||||
description: string
|
||||
curl: string
|
||||
}
|
||||
|
||||
const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus, isAdmin } = useAuth()
|
||||
const toast = useToast()
|
||||
const { t } = useI18n()
|
||||
@@ -31,6 +22,7 @@ const regenerating = ref(false)
|
||||
const confirmRegenerateOpen = ref(false)
|
||||
const regenerateResultOpen = ref(false)
|
||||
const newToken = ref('')
|
||||
const activeEndpointId = ref('upload')
|
||||
|
||||
const baseUrl = computed(() => {
|
||||
const configured = settings.value?.env.siteBaseUrl
|
||||
@@ -43,106 +35,24 @@ const baseUrl = computed(() => {
|
||||
|
||||
const tokenDisplay = computed(() => settings.value?.apiUploadToken ?? '')
|
||||
const hasToken = computed(() => tokenDisplay.value.length > 0)
|
||||
const canRegenerate = computed(() => !settings.value?.envTokenOverride && !loading.value)
|
||||
const canRegenerate = computed(() =>
|
||||
!settings.value?.envTokenOverride && !loading.value
|
||||
)
|
||||
|
||||
const authHeader = computed(() =>
|
||||
hasToken.value ? tokenDisplay.value : 'YOUR-TOKEN'
|
||||
)
|
||||
|
||||
const authHeaderFlag = computed(() => `-H 'Auth-Token: ${authHeader.value}'`)
|
||||
const apiDocs = computed(() =>
|
||||
buildApiDocs({
|
||||
baseUrl: baseUrl.value,
|
||||
authHeader: authHeader.value
|
||||
})
|
||||
)
|
||||
|
||||
const apiDocs = computed<ApiDocItem[]>(() => {
|
||||
const uploadDescription = t('api.docs.upload.desc')
|
||||
const uploadCurl = `curl -X POST "${baseUrl.value}/api/images/upload" \\
|
||||
${authHeaderFlag.value} \\
|
||||
-F "image=@./demo.png"`
|
||||
|
||||
const listDescription = t('api.docs.list.desc')
|
||||
const listCurl = `curl "${baseUrl.value}/api/images?limit=20&page=1" \\
|
||||
${authHeaderFlag.value}`
|
||||
|
||||
return [
|
||||
{
|
||||
index: 1,
|
||||
method: 'POST',
|
||||
path: '/api/images/upload',
|
||||
title: t('api.docs.upload.title'),
|
||||
description: uploadDescription,
|
||||
curl: uploadCurl
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
method: 'GET',
|
||||
path: '/api/images',
|
||||
title: t('api.docs.list.title'),
|
||||
description: listDescription,
|
||||
curl: listCurl
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
method: 'GET',
|
||||
path: '/api/images/search',
|
||||
title: t('api.docs.search.title'),
|
||||
description: t('api.docs.search.desc'),
|
||||
curl: `curl "${baseUrl.value}/api/images/search?q=demo&limit=20&page=1" \\
|
||||
${authHeaderFlag.value}`
|
||||
},
|
||||
{
|
||||
index: 4,
|
||||
method: 'DELETE',
|
||||
path: '/api/images',
|
||||
title: t('api.docs.delete.title'),
|
||||
description: t('api.docs.delete.desc'),
|
||||
curl: `curl -X DELETE "${baseUrl.value}/api/images?key=images/2026/08/xxxx.webp" \\
|
||||
${authHeaderFlag.value}`
|
||||
},
|
||||
{
|
||||
index: 5,
|
||||
method: 'POST',
|
||||
path: '/api/images/batch-delete',
|
||||
title: t('api.docs.batchDelete.title'),
|
||||
description: t('api.docs.batchDelete.desc'),
|
||||
curl: `curl -X POST "${baseUrl.value}/api/images/batch-delete" \\
|
||||
${authHeaderFlag.value} \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-d '{"keys":["images/2026/08/a.webp","images/2026/08/b.webp"]}'`
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const twikooDoc = computed(() => ({
|
||||
method: 'POST' as const,
|
||||
path: '/api/index.php',
|
||||
title: t('api.docs.twikoo.title'),
|
||||
description: t('api.docs.twikoo.desc'),
|
||||
curl: `curl -X POST "${baseUrl.value}/api/index.php" \\
|
||||
-F "token=${authHeader.value}" \\
|
||||
-F "image=@./demo.png"`
|
||||
}))
|
||||
|
||||
function tokenSourceLabel(source: SettingsResponse['tokenSource']) {
|
||||
switch (source) {
|
||||
case 'env':
|
||||
return t('api.tokenSourceEnv')
|
||||
case 'db':
|
||||
return t('api.tokenSourceDb')
|
||||
default:
|
||||
return t('api.tokenSourceNone')
|
||||
}
|
||||
}
|
||||
|
||||
function methodBadgeColor(method: ApiDocItem['method']) {
|
||||
switch (method) {
|
||||
case 'GET':
|
||||
return 'info' as const
|
||||
case 'POST':
|
||||
return 'warning' as const
|
||||
case 'DELETE':
|
||||
return 'error' as const
|
||||
default:
|
||||
return 'neutral' as const
|
||||
}
|
||||
}
|
||||
const activeEndpoint = computed(() =>
|
||||
apiDocs.value.find(endpoint => endpoint.id === activeEndpointId.value) ?? apiDocs.value[0]
|
||||
)
|
||||
|
||||
async function loadSettings() {
|
||||
loading.value = true
|
||||
@@ -251,175 +161,36 @@ watch(isAuthenticated, async (authed, prev) => {
|
||||
|
||||
<AppShell v-else>
|
||||
<section class="overflow-hidden rounded-2xl border border-default bg-elevated shadow-sm">
|
||||
<div class="flex items-center gap-2 border-b border-default px-5 py-4 sm:px-6">
|
||||
<UIcon
|
||||
name="i-lucide-key-round"
|
||||
class="size-5 text-primary"
|
||||
/>
|
||||
<h2 class="text-base font-semibold">
|
||||
{{ t('api.tokenTitle') }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 p-5 sm:p-6">
|
||||
<UAlert
|
||||
v-if="settings?.envTokenOverride"
|
||||
color="warning"
|
||||
variant="subtle"
|
||||
icon="i-lucide-triangle-alert"
|
||||
:title="t('api.envOverrideTitle')"
|
||||
:description="t('api.envOverrideDesc')"
|
||||
<div class="flex flex-col lg:flex-row lg:items-stretch">
|
||||
<ApiSidebar
|
||||
:endpoints="apiDocs"
|
||||
:active-id="activeEndpointId"
|
||||
@select="activeEndpointId = $event"
|
||||
/>
|
||||
|
||||
<UAlert
|
||||
v-else-if="!isAdmin"
|
||||
color="info"
|
||||
variant="subtle"
|
||||
icon="i-lucide-info"
|
||||
:title="t('api.personalTitle')"
|
||||
:description="t('api.personalDesc')"
|
||||
/>
|
||||
|
||||
<UAlert
|
||||
v-else-if="settings && !hasToken"
|
||||
color="info"
|
||||
variant="subtle"
|
||||
icon="i-lucide-info"
|
||||
:title="t('api.notConfiguredTitle')"
|
||||
:description="t('api.notConfiguredDesc')"
|
||||
/>
|
||||
|
||||
<div class="flex flex-col gap-2 sm:flex-row sm:items-stretch">
|
||||
<UInput
|
||||
:model-value="hasToken ? tokenDisplay : t('common.notConfigured')"
|
||||
readonly
|
||||
class="min-w-0 flex-1 font-mono text-xs sm:text-sm"
|
||||
<div class="flex min-w-0 flex-1 flex-col bg-default lg:border-r lg:border-default">
|
||||
<ApiTokenCard
|
||||
:token="tokenDisplay"
|
||||
:loading="loading"
|
||||
:regenerating="regenerating"
|
||||
:can-regenerate="canRegenerate"
|
||||
:token-source="settings?.tokenSource"
|
||||
:env-token-override="settings?.envTokenOverride"
|
||||
:is-admin="isAdmin"
|
||||
@regenerate="requestRegenerate"
|
||||
/>
|
||||
|
||||
<ApiDocView
|
||||
v-if="activeEndpoint"
|
||||
:endpoint="activeEndpoint"
|
||||
/>
|
||||
<div class="flex gap-2">
|
||||
<CopyButton
|
||||
:label="t('common.copy')"
|
||||
:value="tokenDisplay"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-lucide-refresh-cw"
|
||||
:label="t('api.regenerate')"
|
||||
color="warning"
|
||||
variant="soft"
|
||||
:loading="regenerating"
|
||||
:disabled="!canRegenerate"
|
||||
@click="requestRegenerate"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-if="settings"
|
||||
class="text-xs text-muted"
|
||||
>
|
||||
{{ tokenSourceLabel(settings.tokenSource) }}
|
||||
· {{ t('api.tokenHeader') }}
|
||||
<code class="font-mono">Auth-Token: <token></code>
|
||||
<template v-if="hasToken && !settings.envTokenOverride">
|
||||
· {{ t('api.tokenInvalidate') }}
|
||||
</template>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="overflow-hidden rounded-2xl border border-default bg-elevated shadow-sm">
|
||||
<div class="flex items-center gap-2 border-b border-default px-5 py-4 sm:px-6">
|
||||
<UIcon
|
||||
name="i-lucide-book-open"
|
||||
class="size-5 text-primary"
|
||||
<ApiDebugger
|
||||
v-if="activeEndpoint"
|
||||
:endpoint="activeEndpoint"
|
||||
:token="tokenDisplay"
|
||||
/>
|
||||
<h2 class="text-base font-semibold">
|
||||
{{ t('api.docsTitle') }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="divide-y divide-default">
|
||||
<article
|
||||
v-for="doc in apiDocs"
|
||||
:key="doc.index"
|
||||
class="space-y-4 p-5 sm:p-6"
|
||||
>
|
||||
<div class="flex gap-3">
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-sm font-semibold text-primary"
|
||||
>
|
||||
{{ doc.index }}
|
||||
</span>
|
||||
<div class="min-w-0 space-y-2">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<UBadge
|
||||
:color="methodBadgeColor(doc.method)"
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
>
|
||||
{{ doc.method }}
|
||||
</UBadge>
|
||||
<code class="rounded-md border border-primary/20 bg-primary/10 px-2 py-0.5 font-mono text-sm font-medium text-primary">
|
||||
{{ doc.path }}
|
||||
</code>
|
||||
<span class="text-sm font-medium">
|
||||
{{ doc.title }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm leading-relaxed text-muted">
|
||||
{{ doc.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="mb-2 text-xs font-medium text-muted">
|
||||
{{ t('api.curlExample') }}
|
||||
</p>
|
||||
<ApiCurlBlock :code="doc.curl" />
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="overflow-hidden rounded-2xl border border-dashed border-default bg-muted/20">
|
||||
<div class="space-y-4 p-5 sm:p-6">
|
||||
<div class="flex gap-3">
|
||||
<UIcon
|
||||
name="i-lucide-message-square"
|
||||
class="mt-0.5 size-5 shrink-0 text-muted"
|
||||
/>
|
||||
<div class="min-w-0 space-y-2">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<UBadge
|
||||
:color="methodBadgeColor(twikooDoc.method)"
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
>
|
||||
{{ twikooDoc.method }}
|
||||
</UBadge>
|
||||
<code class="rounded-md border border-primary/20 bg-primary/10 px-2 py-0.5 font-mono text-sm font-medium text-primary">
|
||||
{{ twikooDoc.path }}
|
||||
</code>
|
||||
<span class="text-sm font-medium">
|
||||
{{ twikooDoc.title }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm leading-relaxed text-muted">
|
||||
{{ twikooDoc.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="mb-2 text-xs font-medium text-muted">
|
||||
{{ t('api.curlExample') }}
|
||||
</p>
|
||||
<ApiCurlBlock
|
||||
:code="twikooDoc.curl"
|
||||
:scrollable="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</AppShell>
|
||||
|
||||
+234
-266
@@ -3,7 +3,9 @@ import type { ImageItem } from '~/types/image'
|
||||
|
||||
interface StatsResponse {
|
||||
uploadToday: number
|
||||
uploadYesterday: number
|
||||
uploadMonth: number
|
||||
uploadLastMonth: number
|
||||
deleteToday: number
|
||||
deleteMonth: number
|
||||
uploadTotal: number
|
||||
@@ -15,32 +17,47 @@ interface StatsResponse {
|
||||
web: number
|
||||
api: number
|
||||
}
|
||||
storageUsage: {
|
||||
usedBytes: number
|
||||
totalBytes: number | null
|
||||
percent: number | null
|
||||
}
|
||||
}
|
||||
|
||||
const {
|
||||
items,
|
||||
page: galleryPage,
|
||||
pageSize: galleryPageSize,
|
||||
totalPages: galleryTotalPages,
|
||||
total: galleryTotal,
|
||||
loading: galleryLoading,
|
||||
searchQuery,
|
||||
activeSearch,
|
||||
listSummary,
|
||||
refreshList,
|
||||
fetchList,
|
||||
fetchSearch,
|
||||
fetchTotal,
|
||||
submitSearch,
|
||||
goToPage,
|
||||
setPageSize,
|
||||
removeItems,
|
||||
activeStorageBackend,
|
||||
storageBackendOptions,
|
||||
setActiveStorageBackend,
|
||||
loadStorageBackendOptions
|
||||
storageBackendOptions,
|
||||
activeUploadSource,
|
||||
setActiveUploadSource,
|
||||
resetFilters,
|
||||
loadStorageBackendOptions,
|
||||
activeTagIds,
|
||||
activeTagMode,
|
||||
activeUntaggedOnly,
|
||||
setActiveTagFilter,
|
||||
toggleTagFilter,
|
||||
listQueryParams
|
||||
} = useImageList()
|
||||
|
||||
const { formatFileSize } = useFileSize()
|
||||
const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus, isAdmin } = useAuth()
|
||||
const { items: tagItems, fetchTags, batchUpdateTags } = useTags()
|
||||
|
||||
const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus } = useAuth()
|
||||
const toast = useToast()
|
||||
const { t } = useI18n()
|
||||
|
||||
@@ -54,11 +71,21 @@ const deleteModalOpen = ref(false)
|
||||
const deleteTargetKeys = ref<string[]>([])
|
||||
const batchDeleting = ref(false)
|
||||
const showScrollTop = ref(false)
|
||||
const currentStorage = ref('all')
|
||||
const previewOpen = ref(false)
|
||||
const previewImage = ref<ImageItem | null>(null)
|
||||
const viewMode = ref<'grid' | 'list'>('grid')
|
||||
const batchTagOpen = ref(false)
|
||||
|
||||
const storageSelectItems = computed(() => [
|
||||
const currentUploadSource = ref('all')
|
||||
const currentStorageBackend = ref('all')
|
||||
|
||||
const uploadSourceItems = computed(() => [
|
||||
{ label: t('stats.filterSourceAll'), value: 'all' },
|
||||
{ label: t('stats.sourceWeb'), value: 'web' },
|
||||
{ label: t('stats.sourceApi'), value: 'api' }
|
||||
])
|
||||
|
||||
const storageBackendItems = computed(() => [
|
||||
{ label: t('stats.filterStorageAll'), value: 'all' },
|
||||
...storageBackendOptions.value.map(backend => ({
|
||||
label: backend.name,
|
||||
@@ -68,47 +95,6 @@ const storageSelectItems = computed(() => [
|
||||
|
||||
const selectedCount = computed(() => selectedKeys.value.size)
|
||||
|
||||
const SOURCE_CHART_COLORS = [
|
||||
'var(--ui-primary)',
|
||||
'#10b981'
|
||||
]
|
||||
|
||||
const sourceUploadItems = computed(() => {
|
||||
const bySource = stats.value?.bySource
|
||||
if (!bySource) return []
|
||||
return [
|
||||
{ key: 'web', label: t('stats.sourceWeb'), count: bySource.web, color: SOURCE_CHART_COLORS[0]! },
|
||||
{ key: 'api', label: t('stats.sourceApi'), count: bySource.api, color: SOURCE_CHART_COLORS[1]! }
|
||||
]
|
||||
})
|
||||
|
||||
const sourceUploadTotal = computed(() =>
|
||||
sourceUploadItems.value.reduce((sum, item) => sum + item.count, 0)
|
||||
)
|
||||
|
||||
function sourcePercent(count: number) {
|
||||
const total = sourceUploadTotal.value
|
||||
if (!total) return 0
|
||||
return Math.round((count / total) * 100)
|
||||
}
|
||||
|
||||
const statCards = computed(() => {
|
||||
const s = stats.value
|
||||
const base = [
|
||||
{ label: t('stats.uploadToday'), value: s?.uploadToday ?? '—' },
|
||||
{ label: t('stats.uploadMonth'), value: s?.uploadMonth ?? '—' },
|
||||
{ label: t('stats.uploadTotal'), value: s?.uploadTotal ?? '—' },
|
||||
{ label: t('stats.storedCount'), value: s?.storedCount ?? '—' },
|
||||
{ label: t('stats.deleteToday'), value: s?.deleteToday ?? '—' },
|
||||
{ label: t('stats.deleteMonth'), value: s?.deleteMonth ?? '—' },
|
||||
isAdmin.value
|
||||
? { label: t('stats.userCount'), value: s?.userCount ?? '—' }
|
||||
: { label: t('stats.deleteTotal'), value: s?.deleteTotal ?? '—' },
|
||||
{ label: t('stats.uploadBytes'), value: s ? formatFileSize(s.uploadBytesTotal) : '—' }
|
||||
]
|
||||
return base
|
||||
})
|
||||
|
||||
function onWindowScroll() {
|
||||
showScrollTop.value = window.scrollY > 400
|
||||
}
|
||||
@@ -119,7 +105,8 @@ function scrollToTop() {
|
||||
|
||||
async function fetchStats() {
|
||||
stats.value = await $fetch<StatsResponse>('/api/stats', {
|
||||
credentials: 'include'
|
||||
credentials: 'include',
|
||||
query: listQueryParams()
|
||||
})
|
||||
}
|
||||
|
||||
@@ -137,17 +124,6 @@ async function refreshStats() {
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshGallery() {
|
||||
if (!isAuthenticated.value) return
|
||||
selectedKeys.value = new Set()
|
||||
try {
|
||||
await Promise.all([refreshList(), loadStorageBackendOptions()])
|
||||
currentStorage.value = activeStorageBackend.value
|
||||
} catch (error: unknown) {
|
||||
handleAuthError(error)
|
||||
}
|
||||
}
|
||||
|
||||
async function reloadGallery() {
|
||||
if (activeSearch.value) {
|
||||
await fetchSearch(galleryPage.value)
|
||||
@@ -165,9 +141,11 @@ async function refreshAll() {
|
||||
await Promise.all([
|
||||
fetchStats(),
|
||||
reloadGallery(),
|
||||
loadStorageBackendOptions()
|
||||
loadStorageBackendOptions(),
|
||||
fetchTags()
|
||||
])
|
||||
currentStorage.value = activeStorageBackend.value
|
||||
currentUploadSource.value = activeUploadSource.value
|
||||
currentStorageBackend.value = activeStorageBackend.value
|
||||
} catch (error: unknown) {
|
||||
handleAuthError(error)
|
||||
if (isAuthenticated.value) {
|
||||
@@ -178,9 +156,9 @@ async function refreshAll() {
|
||||
}
|
||||
}
|
||||
|
||||
async function handleStorageChange(backendId: string) {
|
||||
async function handleStorageBackendChange(backendId: string) {
|
||||
if (!isAuthenticated.value) return
|
||||
currentStorage.value = backendId
|
||||
currentStorageBackend.value = backendId
|
||||
selectedKeys.value = new Set()
|
||||
try {
|
||||
await setActiveStorageBackend(backendId)
|
||||
@@ -189,6 +167,107 @@ async function handleStorageChange(backendId: string) {
|
||||
}
|
||||
}
|
||||
|
||||
async function handleUploadSourceChange(uploadSource: string) {
|
||||
if (!isAuthenticated.value) return
|
||||
currentUploadSource.value = uploadSource
|
||||
selectedKeys.value = new Set()
|
||||
try {
|
||||
await setActiveUploadSource(uploadSource)
|
||||
} catch (error: unknown) {
|
||||
handleAuthError(error)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleResetFilters() {
|
||||
if (!isAuthenticated.value) return
|
||||
selectedKeys.value = new Set()
|
||||
currentUploadSource.value = 'all'
|
||||
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
|
||||
}
|
||||
|
||||
async function handleSearch() {
|
||||
if (!isAuthenticated.value) return
|
||||
selectedKeys.value = new Set()
|
||||
@@ -199,12 +278,6 @@ async function handleSearch() {
|
||||
}
|
||||
}
|
||||
|
||||
async function clearSearch() {
|
||||
searchQuery.value = ''
|
||||
if (!activeSearch.value) return
|
||||
await refreshGallery()
|
||||
}
|
||||
|
||||
function requestDelete(key: string) {
|
||||
if (!isAuthenticated.value) return
|
||||
previewOpen.value = false
|
||||
@@ -223,19 +296,6 @@ function requestBatchDelete() {
|
||||
deleteModalOpen.value = true
|
||||
}
|
||||
|
||||
function selectAllOnPage() {
|
||||
selectedKeys.value = new Set(items.value.map(item => item.key))
|
||||
}
|
||||
|
||||
function invertSelectionOnPage() {
|
||||
const next = new Set(selectedKeys.value)
|
||||
for (const item of items.value) {
|
||||
if (next.has(item.key)) next.delete(item.key)
|
||||
else next.add(item.key)
|
||||
}
|
||||
selectedKeys.value = next
|
||||
}
|
||||
|
||||
function clearSelection() {
|
||||
selectedKeys.value = new Set()
|
||||
}
|
||||
@@ -311,6 +371,17 @@ async function handleGalleryPageChange(targetPage: number) {
|
||||
}
|
||||
}
|
||||
|
||||
async function handleGalleryPageSizeChange(size: number) {
|
||||
selectedKeys.value = new Set()
|
||||
previewOpen.value = false
|
||||
previewImage.value = null
|
||||
try {
|
||||
await setPageSize(size)
|
||||
} catch (error: unknown) {
|
||||
handleAuthError(error)
|
||||
}
|
||||
}
|
||||
|
||||
function openPreview(image: ImageItem) {
|
||||
previewImage.value = image
|
||||
previewOpen.value = true
|
||||
@@ -392,213 +463,101 @@ watch(isAuthenticated, async (authed, prev) => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section class="grid gap-3 lg:grid-cols-3 lg:items-stretch">
|
||||
<div class="grid grid-cols-2 gap-3 lg:col-span-2 lg:grid-cols-4">
|
||||
<div
|
||||
v-for="item in statCards"
|
||||
:key="item.label"
|
||||
class="rounded-xl border border-default bg-elevated p-4"
|
||||
>
|
||||
<p class="text-xs text-muted">
|
||||
{{ item.label }}
|
||||
</p>
|
||||
<p class="mt-1 text-2xl font-semibold tabular-nums">
|
||||
{{ item.value }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<GalleryStatsOverview
|
||||
:stats="stats"
|
||||
:loading="statsLoading"
|
||||
/>
|
||||
|
||||
<div class="flex h-full min-h-0 flex-col rounded-xl border border-default bg-elevated p-4 lg:col-span-1">
|
||||
<h2 class="shrink-0 text-sm font-medium text-muted">
|
||||
{{ t('stats.sourceDistribution') }}
|
||||
</h2>
|
||||
<div
|
||||
v-if="!sourceUploadTotal"
|
||||
class="flex flex-1 items-center justify-center text-center text-xs text-muted"
|
||||
>
|
||||
{{ t('stats.noData') }}
|
||||
</div>
|
||||
<ul
|
||||
v-else
|
||||
class="mt-4 flex min-h-0 flex-1 flex-col"
|
||||
>
|
||||
<li
|
||||
v-for="item in sourceUploadItems"
|
||||
:key="item.key"
|
||||
class="flex flex-1 flex-col justify-center gap-2 py-1"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-2 text-xs">
|
||||
<span class="flex min-w-0 items-center gap-1.5">
|
||||
<span
|
||||
class="size-2 shrink-0 rounded-full"
|
||||
:style="{ background: item.color }"
|
||||
/>
|
||||
<span class="truncate">{{ item.label }}</span>
|
||||
</span>
|
||||
<span class="shrink-0 tabular-nums text-muted">
|
||||
{{ item.count }} ({{ sourcePercent(item.count) }}%)
|
||||
</span>
|
||||
</div>
|
||||
<div class="h-2 rounded-full bg-muted/40">
|
||||
<div
|
||||
class="h-full rounded-full transition-[width]"
|
||||
:style="{
|
||||
width: `${sourcePercent(item.count)}%`,
|
||||
backgroundColor: item.color
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section class="space-y-3">
|
||||
<div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
|
||||
<GallerySelectionBar
|
||||
:items="items"
|
||||
:selected-keys="selectedKeys"
|
||||
@update:selected-keys="updateSelectedKeys"
|
||||
@clear="clearSelection"
|
||||
/>
|
||||
|
||||
<section class="space-y-4">
|
||||
<div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-3">
|
||||
<div class="min-w-0">
|
||||
<h2 class="text-lg font-medium">
|
||||
{{ t('stats.imagesSection') }}
|
||||
</h2>
|
||||
<p
|
||||
v-if="!galleryLoading"
|
||||
class="mt-0.5 text-sm text-muted"
|
||||
>
|
||||
{{ listSummary }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form
|
||||
class="flex flex-wrap items-center justify-end gap-2"
|
||||
@submit.prevent="handleSearch"
|
||||
>
|
||||
<UBadge
|
||||
v-if="selectedCount"
|
||||
color="primary"
|
||||
variant="subtle"
|
||||
class="shrink-0"
|
||||
>
|
||||
{{ t('stats.selected', { n: selectedCount }) }}
|
||||
</UBadge>
|
||||
<USelect
|
||||
v-model="currentStorage"
|
||||
:items="storageSelectItems"
|
||||
class="w-[6.5rem] shrink-0 sm:w-36"
|
||||
size="sm"
|
||||
:aria-label="t('stats.storage')"
|
||||
@update:model-value="handleStorageChange"
|
||||
/>
|
||||
<UInput
|
||||
v-model="searchQuery"
|
||||
icon="i-lucide-search"
|
||||
:placeholder="t('stats.searchPlaceholder')"
|
||||
class="w-36 shrink-0 sm:w-44"
|
||||
size="sm"
|
||||
:disabled="galleryLoading"
|
||||
/>
|
||||
<UButton
|
||||
type="submit"
|
||||
icon="i-lucide-search"
|
||||
size="sm"
|
||||
class="shrink-0"
|
||||
:aria-label="t('common.search')"
|
||||
:loading="galleryLoading"
|
||||
>
|
||||
<span class="hidden sm:inline">{{ t('common.search') }}</span>
|
||||
</UButton>
|
||||
<UButton
|
||||
v-if="activeSearch"
|
||||
type="button"
|
||||
icon="i-lucide-x"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
class="shrink-0"
|
||||
:aria-label="t('stats.clear')"
|
||||
@click="clearSearch"
|
||||
>
|
||||
<span class="hidden sm:inline">{{ t('stats.clear') }}</span>
|
||||
</UButton>
|
||||
<UButton
|
||||
type="button"
|
||||
icon="i-lucide-check-check"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
class="shrink-0"
|
||||
:disabled="!items.length || galleryLoading"
|
||||
:aria-label="t('stats.selectAll')"
|
||||
@click="selectAllOnPage"
|
||||
>
|
||||
<span class="hidden sm:inline">{{ t('stats.selectAll') }}</span>
|
||||
</UButton>
|
||||
<UButton
|
||||
type="button"
|
||||
icon="i-lucide-shuffle"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
class="shrink-0"
|
||||
:disabled="!items.length || galleryLoading"
|
||||
:aria-label="t('stats.invertSelection')"
|
||||
@click="invertSelectionOnPage"
|
||||
>
|
||||
<span class="hidden sm:inline">{{ t('stats.invertSelection') }}</span>
|
||||
</UButton>
|
||||
<UButton
|
||||
v-if="selectedCount"
|
||||
type="button"
|
||||
icon="i-lucide-x-circle"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
class="shrink-0"
|
||||
:aria-label="t('stats.clearSelection')"
|
||||
@click="clearSelection"
|
||||
>
|
||||
<span class="hidden sm:inline">{{ t('stats.clearSelection') }}</span>
|
||||
</UButton>
|
||||
<UButton
|
||||
type="button"
|
||||
icon="i-lucide-trash-2"
|
||||
color="error"
|
||||
variant="soft"
|
||||
size="sm"
|
||||
class="shrink-0"
|
||||
:aria-label="t('stats.batchDelete')"
|
||||
:disabled="!selectedCount"
|
||||
@click="requestBatchDelete"
|
||||
>
|
||||
<span class="hidden sm:inline">{{ t('stats.batchDelete') }}</span>
|
||||
</UButton>
|
||||
</form>
|
||||
<GalleryFilterBar
|
||||
v-model:search-query="searchQuery"
|
||||
:storage-backend="currentStorageBackend"
|
||||
: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>
|
||||
|
||||
<div
|
||||
v-if="galleryLoading"
|
||||
class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
|
||||
:class="viewMode === 'grid'
|
||||
? 'grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5'
|
||||
: 'space-y-2'"
|
||||
>
|
||||
<USkeleton
|
||||
v-for="n in 12"
|
||||
v-for="n in 10"
|
||||
:key="n"
|
||||
class="aspect-square rounded-lg"
|
||||
:class="viewMode === 'grid' ? 'aspect-[4/3] rounded-lg' : 'h-16 rounded-lg'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ImageGrid
|
||||
v-else
|
||||
v-else-if="viewMode === 'grid'"
|
||||
gallery
|
||||
:show-key="false"
|
||||
show-storage
|
||||
show-tags
|
||||
:items="items"
|
||||
:selected-keys="selectedKeys"
|
||||
@update:selected-keys="selectedKeys = $event"
|
||||
:selectable="true"
|
||||
:allow-delete="true"
|
||||
@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"
|
||||
:show-delete="true"
|
||||
@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"
|
||||
/>
|
||||
|
||||
@@ -607,9 +566,11 @@ watch(isAuthenticated, async (authed, prev) => {
|
||||
:page="galleryPage"
|
||||
:total-pages="galleryTotalPages"
|
||||
:total="galleryTotal"
|
||||
:page-size="galleryPageSize"
|
||||
:unit="t('common.imagesUnit')"
|
||||
:loading="galleryLoading"
|
||||
@update:page="handleGalleryPageChange"
|
||||
@update:page-size="handleGalleryPageSizeChange"
|
||||
/>
|
||||
</section>
|
||||
|
||||
@@ -620,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"
|
||||
|
||||
+86
-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>
|
||||
|
||||
@@ -206,8 +273,24 @@ function requestPreviewDelete() {
|
||||
v-model:open="previewOpen"
|
||||
:image="previewImage"
|
||||
:deleting="previewImage ? deletingKeys.has(previewImage.key) : false"
|
||||
: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>
|
||||
+2
-616
@@ -1,621 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import type { ActivityLogListResponse, ActivityLogStorage, LogAction, LogSource } from '~/types/logs'
|
||||
|
||||
const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus, isAdmin } = useAuth()
|
||||
const toast = useToast()
|
||||
const { t, locale } = useI18n()
|
||||
const { formatFileSize } = useFileSize()
|
||||
|
||||
const loading = ref(true)
|
||||
const page = ref(1)
|
||||
const actionFilter = ref<'all' | LogAction>('all')
|
||||
const sourceFilter = ref<'all' | LogSource>('all')
|
||||
const userFilter = ref<'all' | number>('all')
|
||||
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 }
|
||||
])
|
||||
|
||||
const sourceItems = computed(() => [
|
||||
{ label: t('logs.filterSourceAll'), value: 'all' as const },
|
||||
{ label: t('logs.sourceWeb'), value: 'web' as const },
|
||||
{ label: t('logs.sourceApi'), value: 'api' as const }
|
||||
])
|
||||
|
||||
const userItems = computed(() => {
|
||||
const items: Array<{ label: string, value: 'all' | number }> = [
|
||||
{ label: t('logs.filterUserAll'), value: 'all' }
|
||||
]
|
||||
for (const user of listData.value?.users ?? []) {
|
||||
items.push({ label: user.username, value: user.id })
|
||||
}
|
||||
return items
|
||||
})
|
||||
|
||||
function formatTime(value: string) {
|
||||
try {
|
||||
return new Date(value).toLocaleString(locale.value, { hour12: false })
|
||||
} catch {
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
function formatTimeShort(value: string) {
|
||||
try {
|
||||
return new Date(value).toLocaleString(locale.value, {
|
||||
month: 'numeric',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false
|
||||
})
|
||||
} catch {
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
function folderFromKey(key: string) {
|
||||
const slash = key.indexOf('/')
|
||||
return slash > 0 ? key.slice(0, slash) : '(root)'
|
||||
}
|
||||
|
||||
function actionColor(action: LogAction) {
|
||||
return action === 'upload' ? 'success' : 'error'
|
||||
}
|
||||
|
||||
function actionIcon(action: LogAction) {
|
||||
return action === 'upload' ? 'i-lucide-upload' : 'i-lucide-trash-2'
|
||||
}
|
||||
|
||||
function sourceLabel(source: LogSource) {
|
||||
switch (source) {
|
||||
case 'web':
|
||||
return t('logs.sourceWeb')
|
||||
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
|
||||
}
|
||||
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}`
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function loadLogs() {
|
||||
loading.value = true
|
||||
try {
|
||||
const query: Record<string, string | number> = {
|
||||
page: page.value,
|
||||
limit: pageSize
|
||||
}
|
||||
if (actionFilter.value !== 'all') {
|
||||
query.action = actionFilter.value
|
||||
}
|
||||
if (sourceFilter.value !== 'all') {
|
||||
query.source = sourceFilter.value
|
||||
}
|
||||
if (isAdmin.value && userFilter.value !== 'all') {
|
||||
query.userId = userFilter.value
|
||||
}
|
||||
if (activeSearch.value) {
|
||||
query.q = activeSearch.value
|
||||
}
|
||||
|
||||
listData.value = await $fetch<ActivityLogListResponse>('/api/logs', {
|
||||
credentials: 'include',
|
||||
query
|
||||
})
|
||||
page.value = listData.value.page
|
||||
} catch (error: unknown) {
|
||||
handleAuthError(error)
|
||||
if (isAuthenticated.value) {
|
||||
toast.add({ title: t('logs.loadFailed'), color: 'error' })
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function applyFilters() {
|
||||
page.value = 1
|
||||
void loadLogs()
|
||||
}
|
||||
|
||||
function submitSearch() {
|
||||
activeSearch.value = searchQuery.value.trim()
|
||||
applyFilters()
|
||||
}
|
||||
|
||||
function clearSearch() {
|
||||
searchQuery.value = ''
|
||||
activeSearch.value = ''
|
||||
applyFilters()
|
||||
}
|
||||
|
||||
function handlePageChange(target: number) {
|
||||
page.value = target
|
||||
void loadLogs()
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const status = await fetchStatus()
|
||||
if (!status.initialized && !status.legacyMode) {
|
||||
await navigateTo('/setup')
|
||||
return
|
||||
}
|
||||
await checkSession()
|
||||
if (!isAuthenticated.value) {
|
||||
await navigateTo('/')
|
||||
return
|
||||
}
|
||||
await loadImageLinkBase()
|
||||
await loadLogs()
|
||||
})
|
||||
|
||||
watch(isAuthenticated, async (authed, prev) => {
|
||||
if (authed && prev === false) {
|
||||
await loadImageLinkBase()
|
||||
await loadLogs()
|
||||
}
|
||||
})
|
||||
await navigateTo({ path: '/settings', query: { tab: 'logs' } }, { replace: true })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen">
|
||||
<div
|
||||
v-if="isChecking"
|
||||
class="flex min-h-screen items-center justify-center"
|
||||
>
|
||||
<div class="flex flex-col items-center gap-3 text-muted">
|
||||
<UIcon
|
||||
name="i-lucide-loader-circle"
|
||||
class="size-8 animate-spin"
|
||||
/>
|
||||
<p class="text-sm">
|
||||
{{ t('common.loadingSession') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AdminLoginGate v-else-if="!isAuthenticated" />
|
||||
|
||||
<AppShell v-else>
|
||||
<section class="min-w-0 overflow-x-hidden rounded-2xl border border-default bg-elevated shadow-sm">
|
||||
<div class="flex flex-wrap items-start justify-between gap-3 border-b border-default px-4 py-4 sm:px-6">
|
||||
<div class="flex items-start gap-2">
|
||||
<UIcon
|
||||
name="i-lucide-scroll-text"
|
||||
class="mt-0.5 size-5 shrink-0 text-primary"
|
||||
/>
|
||||
<div>
|
||||
<h1 class="text-base font-semibold">
|
||||
{{ t('logs.pageTitle') }}
|
||||
</h1>
|
||||
<p class="mt-0.5 text-xs text-muted">
|
||||
{{ isAdmin ? t('logs.pageSubtitleAdmin') : t('logs.pageSubtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<UButton
|
||||
icon="i-lucide-refresh-cw"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
size="sm"
|
||||
:aria-label="t('common.refresh')"
|
||||
:loading="loading"
|
||||
@click="loadLogs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<form
|
||||
class="border-b border-default px-4 py-3 sm:px-6"
|
||||
@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 min-w-0 flex-wrap items-center gap-2 sm:justify-end">
|
||||
<USelect
|
||||
v-if="isAdmin"
|
||||
v-model="userFilter"
|
||||
:items="userItems"
|
||||
value-key="value"
|
||||
class="min-w-0 w-full sm:w-36"
|
||||
size="sm"
|
||||
@update:model-value="applyFilters"
|
||||
/>
|
||||
<USelect
|
||||
v-model="actionFilter"
|
||||
:items="actionItems"
|
||||
value-key="value"
|
||||
class="min-w-0 w-[calc(50%-0.25rem)] sm:w-32"
|
||||
size="sm"
|
||||
@update:model-value="applyFilters"
|
||||
/>
|
||||
<USelect
|
||||
v-model="sourceFilter"
|
||||
:items="sourceItems"
|
||||
value-key="value"
|
||||
class="min-w-0 w-[calc(50%-0.25rem)] sm:w-36"
|
||||
size="sm"
|
||||
@update:model-value="applyFilters"
|
||||
/>
|
||||
<div class="flex min-w-0 w-full items-center gap-2 sm:w-auto">
|
||||
<UInput
|
||||
v-model="searchQuery"
|
||||
icon="i-lucide-search"
|
||||
:placeholder="t('logs.searchPlaceholder')"
|
||||
class="min-w-0 flex-1 sm:w-40 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>
|
||||
</UButton>
|
||||
<UButton
|
||||
v-if="activeSearch"
|
||||
type="button"
|
||||
icon="i-lucide-x"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
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">
|
||||
<UBadge
|
||||
:color="actionColor(row.action)"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
<UIcon
|
||||
:name="actionIcon(row.action)"
|
||||
class="mr-1 size-3"
|
||||
/>
|
||||
{{ row.action === 'upload' ? t('logs.actionUpload') : t('logs.actionDelete') }}
|
||||
</UBadge>
|
||||
<UBadge
|
||||
color="neutral"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceLabel(row.source) }}
|
||||
</UBadge>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="hidden overflow-x-auto sm:block">
|
||||
<table class="min-w-full text-left text-sm">
|
||||
<thead class="border-b border-default bg-muted/30 text-xs text-muted">
|
||||
<tr>
|
||||
<th class="px-4 py-3 font-medium sm:px-6">
|
||||
{{ t('logs.colTime') }}
|
||||
</th>
|
||||
<th
|
||||
v-if="isAdmin"
|
||||
class="px-4 py-3 font-medium"
|
||||
>
|
||||
{{ t('logs.colUser') }}
|
||||
</th>
|
||||
<th class="px-4 py-3 font-medium">
|
||||
{{ t('logs.colAction') }}
|
||||
</th>
|
||||
<th class="px-4 py-3 font-medium">
|
||||
{{ t('logs.colSource') }}
|
||||
</th>
|
||||
<th class="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="hidden px-4 py-3 font-medium lg:table-cell">
|
||||
{{ t('logs.colFolder') }}
|
||||
</th>
|
||||
<th class="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
|
||||
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-6">
|
||||
{{ formatTime(row.createdAt) }}
|
||||
</td>
|
||||
<td
|
||||
v-if="isAdmin"
|
||||
class="px-4 py-3 text-xs"
|
||||
>
|
||||
{{ row.username ?? '—' }}
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<UBadge
|
||||
:color="actionColor(row.action)"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
<UIcon
|
||||
:name="actionIcon(row.action)"
|
||||
class="mr-1 size-3"
|
||||
/>
|
||||
{{ row.action === 'upload' ? t('logs.actionUpload') : t('logs.actionDelete') }}
|
||||
</UBadge>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<UBadge
|
||||
color="neutral"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceLabel(row.source) }}
|
||||
</UBadge>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-xs">
|
||||
<span
|
||||
v-if="row.storage"
|
||||
class="inline-flex max-w-[8rem] items-center gap-1 truncate"
|
||||
:title="row.storage.name"
|
||||
>
|
||||
<UIcon
|
||||
:name="storageIcon(row.storage)"
|
||||
class="size-3.5 shrink-0 opacity-70"
|
||||
/>
|
||||
<span class="truncate">{{ row.storage.name }}</span>
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="text-muted"
|
||||
>—</span>
|
||||
</td>
|
||||
<td
|
||||
class="hidden max-w-[12rem] truncate px-4 py-3 md:table-cell"
|
||||
:title="row.originalName"
|
||||
>
|
||||
{{ row.originalName }}
|
||||
</td>
|
||||
<td class="hidden px-4 py-3 font-mono text-xs text-muted lg:table-cell">
|
||||
{{ folderFromKey(row.key) }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-3 tabular-nums text-muted">
|
||||
{{ formatFileSize(row.size) }}
|
||||
</td>
|
||||
<td class="hidden px-4 py-3 xl:table-cell">
|
||||
<div class="flex max-w-[16rem] items-center gap-1">
|
||||
<a
|
||||
v-if="row.action === 'upload'"
|
||||
:href="imageUrl(row.key)"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="truncate font-mono text-xs text-primary hover:underline"
|
||||
:title="row.key"
|
||||
>
|
||||
{{ row.key }}
|
||||
</a>
|
||||
<span
|
||||
v-else
|
||||
class="truncate font-mono text-xs text-dimmed"
|
||||
:title="row.key"
|
||||
>
|
||||
{{ row.key }}
|
||||
</span>
|
||||
<CopyButton
|
||||
icon="i-lucide-copy"
|
||||
icon-only
|
||||
:label="t('common.copy')"
|
||||
:value="row.key"
|
||||
:success-title="t('copy.copiedUrl')"
|
||||
/>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
</section>
|
||||
</AppShell>
|
||||
</div>
|
||||
<div />
|
||||
</template>
|
||||
+39
-4
@@ -2,9 +2,10 @@
|
||||
import logoLight from '~/assets/image/logo-light.png'
|
||||
import logoDark from '~/assets/image/logo-dark.png'
|
||||
import { isPasswordValid } from '~/utils/password-strength'
|
||||
import type { LoginVerificationPayload } from '~/types/auth'
|
||||
|
||||
const router = useRouter()
|
||||
const { register, fetchStatus } = useAuth()
|
||||
const { register, fetchStatus, authStatus } = useAuth()
|
||||
const toast = useToast()
|
||||
const { t } = useI18n()
|
||||
|
||||
@@ -12,14 +13,34 @@ const username = ref('')
|
||||
const password = ref('')
|
||||
const confirmPassword = ref('')
|
||||
const loading = ref(false)
|
||||
const verificationRef = ref<{ reset: () => Promise<void> } | null>(null)
|
||||
const verificationPayload = ref<LoginVerificationPayload | null>(null)
|
||||
|
||||
const loginVerification = computed(() =>
|
||||
authStatus.value?.loginVerification ?? { method: 'slider' as const }
|
||||
)
|
||||
|
||||
const canSubmit = computed(() =>
|
||||
Boolean(username.value && password.value && confirmPassword.value)
|
||||
Boolean(verificationPayload.value)
|
||||
&& Boolean(username.value && password.value && confirmPassword.value)
|
||||
&& password.value === confirmPassword.value
|
||||
&& isPasswordValid(password.value)
|
||||
&& AUTH_USERNAME_PATTERN.test(username.value.trim())
|
||||
)
|
||||
|
||||
function onVerificationVerified(payload: LoginVerificationPayload) {
|
||||
verificationPayload.value = payload
|
||||
}
|
||||
|
||||
function onVerificationCleared() {
|
||||
verificationPayload.value = null
|
||||
}
|
||||
|
||||
async function resetVerification() {
|
||||
verificationPayload.value = null
|
||||
await verificationRef.value?.reset()
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const status = await fetchStatus()
|
||||
if (!status.initialized && !status.legacyMode) {
|
||||
@@ -32,7 +53,7 @@ onMounted(async () => {
|
||||
})
|
||||
|
||||
async function submit() {
|
||||
if (!canSubmit.value || loading.value) return
|
||||
if (!canSubmit.value || loading.value || !verificationPayload.value) return
|
||||
|
||||
if (password.value !== confirmPassword.value) {
|
||||
toast.add({ title: t('auth.passwordMismatch'), color: 'error' })
|
||||
@@ -41,11 +62,16 @@ async function submit() {
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const result = await register(username.value.trim(), password.value)
|
||||
const result = await register(
|
||||
username.value.trim(),
|
||||
password.value,
|
||||
verificationPayload.value
|
||||
)
|
||||
if (result.ok) {
|
||||
toast.add({ title: t('auth.registerSuccess'), color: 'success' })
|
||||
await router.replace('/')
|
||||
} else {
|
||||
await resetVerification()
|
||||
toast.add({ title: result.error, color: 'error' })
|
||||
}
|
||||
} finally {
|
||||
@@ -142,6 +168,15 @@ async function submit() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<LoginVerification
|
||||
ref="verificationRef"
|
||||
:method="loginVerification.method"
|
||||
:turnstile-site-key="loginVerification.turnstileSiteKey"
|
||||
:cap-api-endpoint="loginVerification.capApiEndpoint"
|
||||
@verified="onVerificationVerified"
|
||||
@cleared="onVerificationCleared"
|
||||
/>
|
||||
|
||||
<UButton
|
||||
type="submit"
|
||||
:label="t('auth.register')"
|
||||
|
||||
+789
-356
File diff suppressed because it is too large.
Load diff
+222
-1
@@ -2,6 +2,7 @@
|
||||
import logoLight from '~/assets/image/logo-light.png'
|
||||
import logoDark from '~/assets/image/logo-dark.png'
|
||||
import { isPasswordValid } from '~/utils/password-strength'
|
||||
import { willActivateDomainSeparation } from '~/utils/domain-separation'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
@@ -26,6 +27,102 @@ const domainSeparation = ref(false)
|
||||
const siteBaseUrl = ref('')
|
||||
const imageBaseUrl = ref('')
|
||||
const loading = ref(false)
|
||||
const domainSeparationConfirmOpen = ref(false)
|
||||
|
||||
const setupMode = ref<'init' | 'restore'>('init')
|
||||
const restoreFile = ref<File | null>(null)
|
||||
const restoreFileInput = ref<HTMLInputElement | null>(null)
|
||||
const restoreLoading = ref(false)
|
||||
const restoreJobId = ref<string | null>(null)
|
||||
const restoreProgress = ref({ progress: 0, total: 0, message: '' })
|
||||
let restorePollTimer: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
function stopRestorePolling() {
|
||||
if (restorePollTimer) {
|
||||
clearInterval(restorePollTimer)
|
||||
restorePollTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
function pickRestoreFile() {
|
||||
restoreFileInput.value?.click()
|
||||
}
|
||||
|
||||
function onRestoreFileChange(event: Event) {
|
||||
const input = event.target as HTMLInputElement
|
||||
restoreFile.value = input.files?.[0] ?? null
|
||||
if (input) input.value = ''
|
||||
}
|
||||
|
||||
async function pollRestoreJob(jobId: string) {
|
||||
try {
|
||||
const data = await $fetch<{ job: { status: string, progress: number, total: number, message: string, error: string | null } }>(
|
||||
`/api/setup/restore/${jobId}`
|
||||
)
|
||||
restoreProgress.value = {
|
||||
progress: data.job.progress,
|
||||
total: data.job.total,
|
||||
message: data.job.message
|
||||
}
|
||||
if (data.job.status === 'done') {
|
||||
stopRestorePolling()
|
||||
restoreLoading.value = false
|
||||
toast.add({
|
||||
title: t('setup.restoreSuccess'),
|
||||
description: t('setup.restoreSecretsHint'),
|
||||
color: 'success'
|
||||
})
|
||||
await router.replace('/')
|
||||
return
|
||||
}
|
||||
if (data.job.status === 'failed') {
|
||||
stopRestorePolling()
|
||||
restoreLoading.value = false
|
||||
toast.add({
|
||||
title: t('setup.restoreFailed'),
|
||||
description: data.job.error ?? data.job.message,
|
||||
color: 'error'
|
||||
})
|
||||
}
|
||||
} catch {
|
||||
stopRestorePolling()
|
||||
restoreLoading.value = false
|
||||
toast.add({ title: t('setup.restoreFailed'), color: 'error' })
|
||||
}
|
||||
}
|
||||
|
||||
async function submitRestore() {
|
||||
if (!restoreFile.value || restoreLoading.value) return
|
||||
restoreLoading.value = true
|
||||
try {
|
||||
const form = new FormData()
|
||||
form.append('file', restoreFile.value)
|
||||
const data = await $fetch<{ job: { id: string } }>('/api/setup/restore', {
|
||||
method: 'POST',
|
||||
body: form
|
||||
})
|
||||
restoreJobId.value = data.job.id
|
||||
restorePollTimer = setInterval(() => {
|
||||
void pollRestoreJob(data.job.id)
|
||||
}, 1500)
|
||||
await pollRestoreJob(data.job.id)
|
||||
} catch {
|
||||
restoreLoading.value = false
|
||||
toast.add({ title: t('setup.restoreFailed'), color: 'error' })
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
stopRestorePolling()
|
||||
})
|
||||
|
||||
const domainSeparationWouldActivate = computed(() =>
|
||||
willActivateDomainSeparation(
|
||||
domainSeparation.value,
|
||||
siteBaseUrl.value,
|
||||
imageBaseUrl.value
|
||||
)
|
||||
)
|
||||
|
||||
const canSubmit = computed(() => {
|
||||
if (!username.value || !password.value || !confirmPassword.value) return false
|
||||
@@ -33,7 +130,7 @@ const canSubmit = computed(() => {
|
||||
if (!isPasswordValid(password.value)) return false
|
||||
if (!AUTH_USERNAME_PATTERN.test(username.value.trim())) return false
|
||||
if (domainSeparation.value) {
|
||||
return Boolean(siteBaseUrl.value.trim() && imageBaseUrl.value.trim())
|
||||
if (!siteBaseUrl.value.trim() || !imageBaseUrl.value.trim()) return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
@@ -63,6 +160,18 @@ async function submit() {
|
||||
return
|
||||
}
|
||||
|
||||
if (domainSeparationWouldActivate.value) {
|
||||
domainSeparationConfirmOpen.value = true
|
||||
return
|
||||
}
|
||||
|
||||
await performSubmit()
|
||||
}
|
||||
|
||||
async function performSubmit() {
|
||||
domainSeparationConfirmOpen.value = false
|
||||
if (!canSubmit.value || loading.value) return
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const payload = {
|
||||
@@ -127,7 +236,28 @@ async function submit() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 flex rounded-lg border border-default p-1">
|
||||
<button
|
||||
type="button"
|
||||
class="flex-1 rounded-md px-3 py-2 text-sm font-medium transition-colors"
|
||||
:class="setupMode === 'init' ? 'bg-primary text-inverted' : 'text-muted hover:text-default'"
|
||||
@click="setupMode = 'init'"
|
||||
>
|
||||
{{ t('setup.modeInit') }}
|
||||
</button>
|
||||
<button
|
||||
v-if="!isMigrate"
|
||||
type="button"
|
||||
class="flex-1 rounded-md px-3 py-2 text-sm font-medium transition-colors"
|
||||
:class="setupMode === 'restore' ? 'bg-primary text-inverted' : 'text-muted hover:text-default'"
|
||||
@click="setupMode = 'restore'"
|
||||
>
|
||||
{{ t('setup.modeRestore') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form
|
||||
v-if="setupMode === 'init'"
|
||||
class="flex w-full flex-col gap-5"
|
||||
@submit.prevent="submit"
|
||||
>
|
||||
@@ -247,6 +377,97 @@ async function submit() {
|
||||
:disabled="!canSubmit"
|
||||
/>
|
||||
</form>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="flex w-full flex-col gap-5"
|
||||
>
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-xs text-muted">{{ t('storage.backup.restoreUploadLabel') }}</label>
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full flex-col items-center gap-1.5 rounded-lg border-2 border-dashed px-3 py-4 text-center transition-colors disabled:cursor-not-allowed disabled:opacity-60"
|
||||
:class="restoreFile
|
||||
? 'border-primary/50 bg-primary/5'
|
||||
: 'border-warning/40 bg-warning/5 hover:border-warning/60 hover:bg-warning/10'"
|
||||
:disabled="restoreLoading"
|
||||
@click="pickRestoreFile"
|
||||
>
|
||||
<div
|
||||
class="flex size-8 items-center justify-center rounded-full"
|
||||
:class="restoreFile ? 'bg-primary/15 text-primary' : 'bg-warning/15 text-warning'"
|
||||
>
|
||||
<UIcon
|
||||
:name="restoreFile ? 'i-lucide-check' : 'i-lucide-upload'"
|
||||
class="size-4.5"
|
||||
/>
|
||||
</div>
|
||||
<span class="max-w-full truncate text-sm font-medium text-default">
|
||||
{{ restoreFile?.name ?? t('storage.backup.restoreUpload') }}
|
||||
</span>
|
||||
<span
|
||||
v-if="!restoreFile"
|
||||
class="text-xs text-muted"
|
||||
>
|
||||
{{ t('storage.backup.restoreUploadHint') }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg bg-muted/15 px-3 py-2.5 text-xs leading-relaxed text-muted">
|
||||
{{ t('setup.restoreHint') }}
|
||||
</div>
|
||||
|
||||
<StorageBackupJobProgress
|
||||
v-if="restoreLoading"
|
||||
:message="restoreProgress.message || t('setup.restoreSubmit')"
|
||||
:progress="restoreProgress.progress"
|
||||
:total="restoreProgress.total"
|
||||
/>
|
||||
|
||||
<UButton
|
||||
:label="t('setup.restoreSubmit')"
|
||||
icon="i-lucide-upload"
|
||||
size="lg"
|
||||
block
|
||||
class="w-full"
|
||||
:loading="restoreLoading"
|
||||
:disabled="!restoreFile"
|
||||
@click="submitRestore"
|
||||
/>
|
||||
|
||||
<input
|
||||
ref="restoreFileInput"
|
||||
type="file"
|
||||
accept=".phost.tar.gz,.tar.gz"
|
||||
class="hidden"
|
||||
@change="onRestoreFileChange"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UModal
|
||||
:open="domainSeparationConfirmOpen"
|
||||
:title="t('domainSeparationConfirm.title')"
|
||||
:description="t('domainSeparationConfirm.description')"
|
||||
@update:open="(v) => { if (!v) domainSeparationConfirmOpen = false }"
|
||||
>
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
<UButton
|
||||
:label="t('common.cancel')"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
@click="() => { domainSeparationConfirmOpen = false }"
|
||||
/>
|
||||
<UButton
|
||||
:label="t('domainSeparationConfirm.confirm')"
|
||||
color="warning"
|
||||
:loading="loading"
|
||||
@click="performSubmit"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
</div>
|
||||
</template>
|
||||
+117
-49
@@ -21,6 +21,58 @@ const deleteTarget = ref<StorageBackendItem | null>(null)
|
||||
const deleteConfirmName = ref('')
|
||||
const deleting = ref(false)
|
||||
|
||||
const backupPanelRef = ref<{ applySyncDraft: (draft: { fromBackendId: string, toBackendId: string }) => void } | null>(null)
|
||||
|
||||
function onMigrateIn(backend: StorageBackendItem) {
|
||||
const defaultBackend = storageData.value?.backends.find(item => item.isDefault)
|
||||
if (!defaultBackend || defaultBackend.id === backend.id) return
|
||||
backupPanelRef.value?.applySyncDraft({
|
||||
fromBackendId: defaultBackend.id,
|
||||
toBackendId: backend.id
|
||||
})
|
||||
}
|
||||
|
||||
function onMigrateOut(backend: StorageBackendItem) {
|
||||
const backends = storageData.value?.backends ?? []
|
||||
if (backend.isDefault) {
|
||||
const target = backends.find(item => !item.isDefault && item.enabled)
|
||||
if (!target) return
|
||||
backupPanelRef.value?.applySyncDraft({
|
||||
fromBackendId: backend.id,
|
||||
toBackendId: target.id
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
const defaultBackend = backends.find(item => item.isDefault)
|
||||
if (!defaultBackend) return
|
||||
backupPanelRef.value?.applySyncDraft({
|
||||
fromBackendId: backend.id,
|
||||
toBackendId: defaultBackend.id
|
||||
})
|
||||
}
|
||||
|
||||
function showMigrateIn(backend: StorageBackendItem): boolean {
|
||||
const backends = storageData.value?.backends ?? []
|
||||
return !backend.isDefault
|
||||
&& backend.enabled
|
||||
&& backends.some(item => item.isDefault)
|
||||
}
|
||||
|
||||
function showMigrateOut(backend: StorageBackendItem): boolean {
|
||||
const backends = storageData.value?.backends ?? []
|
||||
if (backend.usage.count === 0) return false
|
||||
if (backend.isDefault) {
|
||||
return backends.some(item => !item.isDefault && item.enabled)
|
||||
}
|
||||
return backends.some(item => item.isDefault)
|
||||
}
|
||||
|
||||
const defaultBackendName = computed(() => {
|
||||
const backend = storageData.value?.backends.find(item => item.isDefault)
|
||||
return backend?.name ?? t('storage.backendLocal')
|
||||
})
|
||||
|
||||
async function loadStorage() {
|
||||
loading.value = true
|
||||
try {
|
||||
@@ -43,6 +95,7 @@ function buildPatchBody(payload: StorageFormPayload) {
|
||||
const quotaBytes = quotaToBytes(payload.quotaValue, payload.quotaUnit)
|
||||
const body: Record<string, unknown> = {
|
||||
name: payload.name,
|
||||
provider: payload.provider,
|
||||
servingMode: payload.servingMode,
|
||||
publicUrl: payload.publicUrl,
|
||||
quotaBytes,
|
||||
@@ -232,77 +285,92 @@ watch(isAuthenticated, async (authed) => {
|
||||
<AdminLoginGate v-else-if="!isAuthenticated" />
|
||||
|
||||
<AppShell v-else-if="isAdmin">
|
||||
<section class="overflow-hidden rounded-2xl border border-default bg-elevated shadow-sm">
|
||||
<div class="flex flex-wrap items-start justify-between gap-3 border-b border-default px-5 py-4 sm:px-6">
|
||||
<div class="flex items-start gap-2">
|
||||
<UIcon
|
||||
name="i-lucide-hard-drive"
|
||||
class="mt-0.5 size-5 shrink-0 text-primary"
|
||||
/>
|
||||
<div>
|
||||
<h1 class="text-base font-semibold">
|
||||
{{ t('storage.pageTitle') }}
|
||||
</h1>
|
||||
<p class="mt-0.5 text-xs text-muted">
|
||||
{{ t('storage.pageSubtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<UButton
|
||||
:label="t('storage.addBackend')"
|
||||
icon="i-lucide-plus"
|
||||
size="sm"
|
||||
:disabled="storageData?.envOverride"
|
||||
@click="openCreate"
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="min-w-0">
|
||||
<h1 class="text-2xl font-semibold tracking-tight">
|
||||
{{ t('storage.pageTitle') }}
|
||||
</h1>
|
||||
<p class="text-sm text-muted">
|
||||
{{ t('storage.pageSubtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<UButton
|
||||
:label="t('storage.addBackend')"
|
||||
icon="i-lucide-plus"
|
||||
size="sm"
|
||||
:disabled="storageData?.envOverride"
|
||||
@click="openCreate"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section class="mt-5 space-y-5">
|
||||
<UAlert
|
||||
v-if="storageData?.envOverride"
|
||||
color="warning"
|
||||
variant="subtle"
|
||||
:title="t('storage.envOverride')"
|
||||
icon="i-lucide-triangle-alert"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="loading"
|
||||
class="flex justify-center py-16"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-loader-circle"
|
||||
class="size-6 animate-spin text-muted"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="p-5 sm:p-6">
|
||||
<UAlert
|
||||
v-if="storageData?.envOverride"
|
||||
color="warning"
|
||||
variant="subtle"
|
||||
class="mb-5"
|
||||
:title="t('storage.envOverride')"
|
||||
icon="i-lucide-triangle-alert"
|
||||
<template v-else-if="storageData">
|
||||
<StorageOverview
|
||||
:backends="storageData.backends"
|
||||
:loading="loading"
|
||||
/>
|
||||
|
||||
<p class="mb-5 text-xs text-muted">
|
||||
{{ t('storage.switchHint') }}
|
||||
</p>
|
||||
<UAlert
|
||||
v-if="!storageData.envOverride"
|
||||
color="success"
|
||||
variant="subtle"
|
||||
icon="i-lucide-info"
|
||||
:description="t('storage.defaultStorageTip', { name: defaultBackendName })"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="loading"
|
||||
class="flex justify-center py-16"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-loader-circle"
|
||||
class="size-6 animate-spin text-muted"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="storageData"
|
||||
class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3"
|
||||
>
|
||||
<div class="grid grid-cols-1 gap-4 xl:grid-cols-2">
|
||||
<StorageBackendCard
|
||||
v-for="backend in storageData.backends"
|
||||
:key="backend.id"
|
||||
:backend="backend"
|
||||
:env-override="storageData.envOverride"
|
||||
:busy="busyId === backend.id"
|
||||
:show-migrate-in="showMigrateIn(backend)"
|
||||
:show-migrate-out="showMigrateOut(backend)"
|
||||
@set-default="setDefault(backend)"
|
||||
@edit="openEdit(backend)"
|
||||
@test="testBackend(backend)"
|
||||
@toggle-enabled="toggleEnabled(backend)"
|
||||
@delete="confirmDelete(backend)"
|
||||
@migrate-in="onMigrateIn(backend)"
|
||||
@migrate-out="onMigrateOut(backend)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<StorageBackupPanel
|
||||
v-if="!storageData.envOverride"
|
||||
ref="backupPanelRef"
|
||||
:backends="storageData.backends"
|
||||
/>
|
||||
|
||||
<StorageSupportedBackends />
|
||||
</template>
|
||||
</section>
|
||||
</AppShell>
|
||||
|
||||
<UModal v-model:open="formOpen">
|
||||
<UModal
|
||||
v-model:open="formOpen"
|
||||
:ui="{ content: 'max-w-2xl sm:max-w-3xl' }"
|
||||
>
|
||||
<template #content>
|
||||
<div class="p-5 sm:p-6">
|
||||
<h2 class="mb-4 text-base font-semibold">
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
export type LoginVerificationMethod = 'slider' | 'turnstile' | 'cap'
|
||||
|
||||
export interface LoginVerificationPublicConfig {
|
||||
method: LoginVerificationMethod
|
||||
turnstileSiteKey?: string
|
||||
capApiEndpoint?: string
|
||||
}
|
||||
|
||||
export type LoginVerificationPayload = {
|
||||
method: 'slider'
|
||||
captchaId: string
|
||||
captchaPosition: number
|
||||
} | {
|
||||
method: 'turnstile'
|
||||
turnstileToken: string
|
||||
} | {
|
||||
method: 'cap'
|
||||
capToken: string
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
export type BackupJobType = 'full_export' | 'full_restore' | 'backend_sync'
|
||||
export type BackupJobStatus = 'pending' | 'running' | 'done' | 'failed'
|
||||
|
||||
export interface BackupJobItem {
|
||||
id: string
|
||||
type: BackupJobType
|
||||
status: BackupJobStatus
|
||||
progress: number
|
||||
total: number
|
||||
message: string
|
||||
payload: Record<string, unknown>
|
||||
outputPath: string | null
|
||||
archiveName: string | null
|
||||
downloadable: boolean
|
||||
error: string | null
|
||||
createdAt: string
|
||||
finishedAt: string | null
|
||||
}
|
||||
|
||||
export interface BackupEstimate {
|
||||
imageCount: number
|
||||
imageBytes: number
|
||||
databaseBytes: number
|
||||
totalBytes: number
|
||||
}
|
||||
|
||||
export interface BackupPackageItem {
|
||||
name: string
|
||||
bytes: number
|
||||
modifiedAt: string
|
||||
}
|
||||
|
||||
export interface BackupRestorePreview {
|
||||
imageCount: number
|
||||
imageBytes: number
|
||||
newImages: number
|
||||
conflictingImages: number
|
||||
formatVersion: number
|
||||
appVersion: string
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
export interface BackendSyncPreview {
|
||||
imageCount: number
|
||||
imageBytes: number
|
||||
fromBackendId: string
|
||||
toBackendId: string
|
||||
}
|
||||
|
||||
export interface SyncDraft {
|
||||
fromBackendId: string
|
||||
toBackendId: string
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
export type SettingsTab = 'basic' | 'domains' | 'access' | 'tags' | 'logs'
|
||||
|
||||
export const ADMIN_SETTINGS_TABS: SettingsTab[] = ['basic', 'domains', 'access', 'tags', 'logs']
|
||||
|
||||
export const USER_SETTINGS_TABS: SettingsTab[] = ['tags', 'logs']
|
||||
@@ -0,0 +1,24 @@
|
||||
export function hostnameFromBaseUrl(value: string): string | null {
|
||||
const trimmed = value.trim()
|
||||
if (!trimmed) return null
|
||||
try {
|
||||
return new URL(trimmed).hostname.toLowerCase()
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
/** 勾选分离且网站域、图片域主机名不同 → 保存后将启用双域名中间件隔离 */
|
||||
export function willActivateDomainSeparation(
|
||||
enabled: boolean,
|
||||
siteBaseUrl: string,
|
||||
imageBaseUrl: string
|
||||
): boolean {
|
||||
if (!enabled) return false
|
||||
const site = siteBaseUrl.trim()
|
||||
const image = imageBaseUrl.trim()
|
||||
if (!site || !image) return false
|
||||
const siteHost = hostnameFromBaseUrl(site)
|
||||
const imageHost = hostnameFromBaseUrl(image)
|
||||
return Boolean(siteHost && imageHost && siteHost !== imageHost)
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
+1
-1
@@ -10,7 +10,7 @@ services:
|
||||
- "6892:6892"
|
||||
# 首次访问 Web 引导创建管理员，无需预先配置环境变量
|
||||
# 可选：environment 中设置 API_UPLOAD_TOKEN、ALLOWED_REFERER_HOSTS 等
|
||||
# 运维：docker exec pichost reset-password | migrate [--apply]
|
||||
# 运维：docker exec pichost reset-password | slider | clear-domains | backup-export | backup-restore | storage-sync
|
||||
volumes:
|
||||
# 冒号左边改成 NAS 上的实际存图目录（飞牛示例：/vol1/1000/pichost-data）
|
||||
- ./data:/data
|
||||
+18
-2
@@ -5,8 +5,24 @@ if [ "$1" = "reset-password" ]; then
|
||||
exec node /app/server/cli/reset-password.mjs "${@:2}"
|
||||
fi
|
||||
|
||||
if [ "$1" = "migrate" ]; then
|
||||
exec node /app/server/cli/migrate-to-single-images.mjs "${@:2}"
|
||||
if [ "$1" = "slider" ]; then
|
||||
exec node /app/server/cli/slider.mjs "${@:2}"
|
||||
fi
|
||||
|
||||
if [ "$1" = "clear-domains" ]; then
|
||||
exec node /app/server/cli/clear-domains.mjs "${@:2}"
|
||||
fi
|
||||
|
||||
if [ "$1" = "backup-export" ]; then
|
||||
exec node /app/server/cli/backup-export.mjs "${@:2}"
|
||||
fi
|
||||
|
||||
if [ "$1" = "backup-restore" ]; then
|
||||
exec node /app/server/cli/backup-restore.mjs "${@:2}"
|
||||
fi
|
||||
|
||||
if [ "$1" = "storage-sync" ]; then
|
||||
exec node /app/server/cli/storage-sync.mjs "${@:2}"
|
||||
fi
|
||||
|
||||
exec node /app/.output/server/index.mjs "$@"
|
||||
@@ -34,7 +34,6 @@ const zhSidebar = [
|
||||
text: '升级',
|
||||
items: [
|
||||
{ text: '更新日志', link: '/guide/changelog' },
|
||||
{ text: 'v1.2 迁移', link: '/guide/migration' },
|
||||
{ text: '常见问题', link: '/guide/faq' }
|
||||
]
|
||||
}
|
||||
@@ -71,7 +70,6 @@ const enSidebar = [
|
||||
text: 'Upgrade',
|
||||
items: [
|
||||
{ text: 'Changelog', link: '/en/guide/changelog' },
|
||||
{ text: 'v1.2 migration', link: '/en/guide/migration' },
|
||||
{ text: 'FAQ', link: '/en/guide/faq' }
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
# API
|
||||
|
||||
PicHost exposes REST endpoints and a Twikoo-compatible upload. After deployment, open the in-app **API** page for your token and copyable cURL snippets.
|
||||
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
|
||||
|
||||
@@ -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,74 @@ Version history and notable changes. The full log is also in the repo root [CHAN
|
||||
|
||||
---
|
||||
|
||||
## [1.4.1] — 2026-09-16
|
||||
|
||||
### Added
|
||||
|
||||
- **Upload policy (Settings → Basic)**: max size, allowed formats, rate limits, preserve originals; env override
|
||||
- **Upload API**: optional `tagNames` for tagging by name (create or reuse)
|
||||
|
||||
### Improved
|
||||
|
||||
- Configurable login rate limits; settings layout updates
|
||||
|
||||
## [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
|
||||
|
||||
- **Dual-domain**: confirm dialog on save/setup with lockout risks and `clear-domains` recovery; no longer blocks save based on current Host
|
||||
|
||||
### Added
|
||||
|
||||
- **Ops CLI**: `clear-domains` clears site/image URL settings from DB (`docker exec pichost clear-domains`)
|
||||
|
||||
### Docs
|
||||
|
||||
- FAQ and dual-domain / reverse-proxy guides updated with recovery steps
|
||||
|
||||
## [1.2.7] — 2026-09-03
|
||||
|
||||
### Added
|
||||
|
||||
- **Login verification**: slider, Cloudflare Turnstile, or Cap on login/register; configure under Settings → Access
|
||||
- **Ops CLI**: `slider` resets verification to the local slider (`docker exec pichost slider`)
|
||||
|
||||
### Improved
|
||||
|
||||
- Login captcha reloads correctly after logout
|
||||
|
||||
## [1.2.6] — 2026-09-01
|
||||
|
||||
### Added
|
||||
|
||||
- **Admin UI**: redesigned Settings, API, Gallery, and Storage pages; API page includes live debugging
|
||||
- **Gallery filter**: filter by storage backend
|
||||
- **Storage IDs**: new R2 / COS / OSS / S3 backends get `r2-*`, `cos-*`, `oss-*`, or `s3-*` prefixes
|
||||
|
||||
### Improved
|
||||
|
||||
- Activity log table styling and path truncation
|
||||
- Storage backend card metadata layout
|
||||
- Docs site and README screenshots updated
|
||||
|
||||
## [1.2.5] — 2026-08-31
|
||||
|
||||
### Added
|
||||
@@ -120,15 +188,12 @@ Version history and notable changes. The full log is also in the repo root [CHAN
|
||||
|
||||
### Changed
|
||||
|
||||
- All images under `data/images/`; legacy `blog/` / `twikoo/` need migration
|
||||
- All images under `data/images/`; parallel top-level folders beside `images` are no longer used
|
||||
|
||||
### Added
|
||||
|
||||
- CLI: `docker exec pichost migrate` / `migrate --apply`
|
||||
- Startup index sync (disk scan, legacy key normalization, orphan cleanup)
|
||||
|
||||
See [v1.2 migration](./migration.md).
|
||||
|
||||
---
|
||||
|
||||
## [1.1.x] summary
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
# Environment variables
|
||||
|
||||
Configure PicHost via environment variables (Docker / `.env`) or the in-app **Settings** page. 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
|
||||
|
||||
@@ -13,6 +15,7 @@ Configure PicHost via environment variables (Docker / `.env`) or the in-app **Se
|
||||
| Short image links | SQLite → env → default false | No |
|
||||
| Date-based paths | SQLite → env → default true | No |
|
||||
| Global auto-delete days | SQLite → env → default 0 | No |
|
||||
| Login verification | SQLite (Settings → Access control) | No |
|
||||
|
||||
## Variables
|
||||
|
||||
@@ -64,6 +67,18 @@ Delete images older than N days globally; `0` disables. Affects **new uploads af
|
||||
|
||||
Local dev only: `true` bypasses login. Never use in production.
|
||||
|
||||
### Login verification (Settings only)
|
||||
|
||||
Configure under **Settings → Access control** (stored in SQLite; no env vars):
|
||||
|
||||
| Method | Notes |
|
||||
| ------ | ----- |
|
||||
| **Local slider** (default) | No third-party service |
|
||||
| **Cloudflare Turnstile** | Site key + secret key |
|
||||
| **Cap** | API endpoint + secret |
|
||||
|
||||
Login and registration share the same method. If misconfigured: `docker exec pichost slider` (or `npm run slider`) resets to the slider.
|
||||
|
||||
### Storage backends (optional)
|
||||
|
||||
Admins usually add backends in **Storage** UI; env vars such as `STORAGE_BACKEND=s3` and `S3_*` are also supported. See [Storage](./storage.md).
|
||||
@@ -99,5 +114,6 @@ Restart the container after changing env vars.
|
||||
| Date-based paths | `STORAGE_USE_DATE_PATH` / `STORAGE_LAYOUT` |
|
||||
| WebP quality | `WEBP_QUALITY` |
|
||||
| Auto-delete | `AUTO_DELETE_DAYS` |
|
||||
| Login verification | (Settings → Access control only) |
|
||||
|
||||
Template: [`.env.example`](https://github.com/O96u/PicHost/blob/main/.env.example) in the repo root.
|
||||
@@ -69,10 +69,21 @@ This is independent of hyphenated or long domain names. Older versions did not b
|
||||
|
||||
1. Configure `server_name` only for the site and image hosts; add a **default server** to reject other Host values and bare IP access (see Nginx example above; complements app-layer blocking)
|
||||
2. With Cloudflare **orange-cloud** DNS, restrict the origin firewall to **[Cloudflare IP ranges](https://www.cloudflare.com/ips/)** so traffic cannot bypass the CDN
|
||||
3. Sign in only on the **site hostname** from Settings; do not mix `localhost`, IP, or unlisted domains
|
||||
4. Do **not** put Cloudflare Pages / Workers in front of PicHost as a **full-site reverse proxy** (`IMAGE_BASE_URL` may point at a CDN URL, but the app itself should run on Docker/VPS)
|
||||
5. If you must proxy at the edge, preserve the client **`Host` or `X-Forwarded-Host`** or host isolation will fail
|
||||
6. PicHost **cannot** run as-is on Pages/Workers (needs `node-server`, SQLite, `sharp`, local `data/`). Keep Docker/VPS; use orange-cloud DNS and optional R2 storage on CF
|
||||
3. **Before saving**, read the risk confirmation in Settings / setup; saving via IP, LAN, or a proxy that does not forward Host correctly may lock you out — see **Recovery when locked out** below
|
||||
4. Sign in only on the **site hostname** from Settings; do not mix `localhost`, IP, or unlisted domains
|
||||
5. Do **not** put Cloudflare Pages / Workers in front of PicHost as a **full-site reverse proxy** (`IMAGE_BASE_URL` may point at a CDN URL, but the app itself should run on Docker/VPS)
|
||||
6. If you must proxy at the edge, preserve the client **`Host` or `X-Forwarded-Host`** (Lucky/NPM “force hostname” must match PicHost settings) or isolation fails or you get locked out after save
|
||||
7. PicHost **cannot** run as-is on Pages/Workers (needs `node-server`, SQLite, `sharp`, local `data/`). Keep Docker/VPS; use orange-cloud DNS and optional R2 storage on CF
|
||||
|
||||
### Recovery when locked out
|
||||
|
||||
If IP / LAN access returns 404 after a bad save:
|
||||
|
||||
```bash
|
||||
docker exec pichost clear-domains
|
||||
```
|
||||
|
||||
Local: `npm run clear-domains`. Then reconfigure using the site hostname and verify proxy `Host` headers.
|
||||
|
||||
### Cloudflare orange cloud (incl. preferred edge IPs)
|
||||
|
||||
|
||||
+28
-10
@@ -19,6 +19,24 @@ Local: `npm run reset-password`. See [Quick start](./getting-started.md#forgot-p
|
||||
|
||||
Check the **Referer whitelist** (`ALLOWED_REFERER_HOSTS` or Settings). Referring sites must be listed; PicHost’s own hosts and dual-domain pair are allowed automatically.
|
||||
|
||||
## Admin 404 / locked out after dual-domain setup?
|
||||
|
||||
**Cause:** With dual-domain enabled, PicHost returns **404 for every request** whose Host is not the configured site or image hostname. Common triggers:
|
||||
|
||||
1. Saving dual-domain URLs while browsing via IP or an internal address
|
||||
2. Reverse proxy “force hostname” or wrong `Host` header so PicHost sees a different host than configured
|
||||
|
||||
**Recovery (when locked out):**
|
||||
|
||||
```bash
|
||||
docker exec pichost clear-domains
|
||||
# Site URL only: docker exec pichost clear-domains --site
|
||||
```
|
||||
|
||||
Local dev: `npm run clear-domains`. Then reopen admin via your previous IP/internal URL and reconfigure using the [dual-domain guide](./domain-separation.md#middleware-isolation-and-third-hosts).
|
||||
|
||||
**Prevention:** Read the risk confirmation when saving dual-domain settings; proxy must send `Host $host` and `X-Forwarded-Proto`. See [Dual-domain separation](./domain-separation.md#middleware-isolation-and-third-hosts).
|
||||
|
||||
## Why can admin load on pages.dev / workers.dev / IP with dual-domain?
|
||||
|
||||
**From v1.2.2:** when dual-domain is on, PicHost returns **404** for Host values **other than** the configured site and image hostnames (`localhost` / `127.0.0.1` exempt in development). See [Changelog](./changelog.md#1-2-2-2026-08-30).
|
||||
@@ -43,21 +61,21 @@ Recommended: run PicHost on origin; use **proxied DNS** (and optional **R2** sto
|
||||
- Always open admin on the **site hostname**, not mixed with `localhost`
|
||||
- See [Dual-domain separation](./domain-separation.md)
|
||||
|
||||
## Undeletable gallery items after v1.2 upgrade?
|
||||
## Undeletable gallery items?
|
||||
|
||||
Likely **orphan index** rows (no file on disk). Startup sync removes them on restart. See [v1.2 migration](./migration.md#step-2-startup-index-sync-automatic).
|
||||
Likely **orphan index** rows (no file on disk). Startup sync removes them on restart; you can also delete them from the gallery.
|
||||
|
||||
## Do I still need `data/blog/` after migration?
|
||||
## How do I back up or migrate the full site?
|
||||
|
||||
After `migrate --apply`, files live under `data/images/blog/`. Remove leftover empty dirs after backup if you like; dirs with non-image files are kept by the CLI.
|
||||
From v1.3.0, use **Storage → Backup & migration**, or CLI:
|
||||
|
||||
## Object storage only — run migrate?
|
||||
```bash
|
||||
docker exec pichost backup-export
|
||||
docker exec pichost backup-restore /data/backups/pichost-xxx.phost.tar.gz
|
||||
docker exec pichost storage-sync --from local --to s3-xxx --dry-run
|
||||
```
|
||||
|
||||
No. Skip the CLI; startup sync focuses on local `data/images/` scanning.
|
||||
|
||||
## Replace old image URLs in posts?
|
||||
|
||||
Use `data/mapping.json` from `migrate` preview. Keys are **storage paths**, not full legacy URLs. See [Migration](./migration.md#urls).
|
||||
Packages include the database and all images but **not** cloud storage secrets — re-enter them on the Storage page after restore. See [Storage → Backup & migration](./storage.md#backup--migration-v130).
|
||||
|
||||
## Skip login during development?
|
||||
|
||||
|
||||
@@ -33,17 +33,39 @@ See `docker-compose.yml` in the repository.
|
||||
## First-time setup
|
||||
|
||||
1. Open your instance URL (Docker default `http://<host>:6892`).
|
||||
2. Complete `/setup` with admin username and password.
|
||||
2. On `/setup`, choose **Create admin** or **Restore backup**:
|
||||
- **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; admins can open **Storage**, **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 |
|
||||
| :----------: | :-----------------: |
|
||||
|  |  |
|
||||
|
||||
For an already-initialized instance, use [Storage → Backup & migration](./storage.md#backup--migration-v130) instead of `/setup`.
|
||||
|
||||
## Sign in
|
||||
|
||||
Management pages (upload, stats, settings, etc.) require login. Enter username and password, **drag the slider to align with the gap**, then click **Sign in**.
|
||||
Management pages (upload, gallery, settings, etc.) require login. Enter username and password, complete the verification challenge, then click **Sign in**.
|
||||
|
||||
The default is a **local slider** (align the thumb with the gap). Admins can switch to **Cloudflare Turnstile** or **Cap** under **Settings → Access control**, with the matching site key / secret or API endpoint.
|
||||
|
||||
|
||||
|
||||
If registration is enabled, create an account from the register page. Legacy deployments may still use a secret key (see the on-screen hint).
|
||||
If registration is enabled, create an account from the register page (same verification). Legacy deployments may still use a secret key (see the on-screen hint).
|
||||
|
||||
### Locked out of verification
|
||||
|
||||
If Turnstile / Cap is misconfigured and you cannot sign in, reset to the local slider on the server:
|
||||
|
||||
```bash
|
||||
docker exec pichost slider
|
||||
```
|
||||
|
||||
Local dev: `npm run slider`
|
||||
|
||||
## Forgot password
|
||||
|
||||
@@ -58,11 +80,15 @@ A random password is printed. Change it after login.
|
||||
|
||||
Local dev: `npm run reset-password` or `npm run reset-password -- <username>`
|
||||
|
||||
## Upgrading to v1.2.0
|
||||
## Dual-domain lockout
|
||||
|
||||
If `data/` has legacy top-level folders next to `images` (e.g. `blog/`, `twikoo/`), read the [v1.2 migration guide](./migration.md) first.
|
||||
If dual-domain is enabled and IP / LAN access returns 404:
|
||||
|
||||
Object-storage-only or files already under `data/images/` — pull the new image and restart.
|
||||
```bash
|
||||
docker exec pichost clear-domains
|
||||
```
|
||||
|
||||
Local: `npm run clear-domains`. See [FAQ — Admin 404 after dual-domain setup](./faq.md#admin-404--locked-out-after-dual-domain-setup).
|
||||
|
||||
## Next steps
|
||||
|
||||
|
||||
@@ -12,20 +12,32 @@ Welcome to the PicHost user guide. This site is the single source of truth; the
|
||||
|
||||
## Screenshots
|
||||
|
||||
**main** has no public demo. Below are v1.2.0 product screenshots.
|
||||
**main** has no public demo. Below are current product screenshots (v1.4.0+).
|
||||
|
||||
| First-time setup | Login |
|
||||
| :--------------: | :---: |
|
||||
|  |  |
|
||||
| Upload | Batch tagging |
|
||||
| :----: | :-----------: |
|
||||
|  |  |
|
||||
|
||||
| API | Stats & gallery |
|
||||
| :-: | :-------------: |
|
||||
|  |  |
|
||||
| Upload results (tagged) | API |
|
||||
| :---------------------: | :-: |
|
||||
|  |  |
|
||||
|
||||
| Gallery (grid) | Gallery (list) |
|
||||
| :------------: | :------------: |
|
||||
|  |  |
|
||||
|
||||
| Image detail | Tag management |
|
||||
| :----------: | :------------: |
|
||||
|  |  |
|
||||
|
||||
| Storage | Settings |
|
||||
| :-----: | :------: |
|
||||
| :-----: | :-------: |
|
||||
|  |  |
|
||||
|
||||
| First-time setup | Restore from backup |
|
||||
| :--------------: | :-----------------: |
|
||||
|  |  |
|
||||
|
||||
| Activity log |
|
||||
| :----------: |
|
||||
|  |
|
||||
|
||||
@@ -28,7 +28,8 @@ Open `http://localhost:3000/setup` to create the admin account. Data directory d
|
||||
| `npm run typecheck` | Type check |
|
||||
| `npm test` | Unit tests |
|
||||
| `npm run reset-password` | Reset password (optional username) |
|
||||
| `npm run migrate` | Preview legacy dir migration (`-- --apply` to run) |
|
||||
| `npm run slider` | Reset login verification to local slider |
|
||||
| `npm run clear-domains` | Clear site/image URL settings from DB (recover from dual-domain lockout) |
|
||||
|
||||
## Dev-only variables
|
||||
|
||||
@@ -51,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`), 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/>
|
||||
@@ -1,129 +0,0 @@
|
||||
# v1.2.0 local disk migration guide
|
||||
|
||||
From v1.2.0, **all local image files** live under `data/images/`; SQLite `keys` also start with `images/`. Legacy top-level folders next to `images` (e.g. `data/blog/`, `data/twikoo/`) are no longer used.
|
||||
|
||||
Migration is **two steps**: run the **CLI** to move files on disk, then let **startup sync** align the SQLite index.
|
||||
|
||||
---
|
||||
|
||||
## Migrating from other image hosts (EasyImage, Lsky, Chevereto, …)
|
||||
|
||||
There is **no** dedicated “pull from URLs” or “import via vendor API” tool. Moving from **legacy PicHost** or **another self-hosted** install uses the same **local file** workflow:
|
||||
|
||||
1. Locate the **image files** on the old server (copy the tree, not just the database).
|
||||
2. Place them under PicHost `data/` as a **top-level folder** next to `images` (any name — it becomes `images/{name}/...`).
|
||||
3. Run `migrate` / `migrate --apply`, then restart PicHost.
|
||||
|
||||
| Source | Typical path on old server | After copy into PicHost |
|
||||
| ------ | -------------------------- | ----------------------- |
|
||||
| PicHost v1.1.x | `data/blog/`, `data/twikoo/` | Already under `data/` → run `migrate` |
|
||||
| EasyImage(s) | `i/` or `upload/` | e.g. `data/easyimage/` → `migrate` |
|
||||
| Lsky | `public/uploads/` etc. | e.g. `data/lsky/` → `migrate` |
|
||||
| Chevereto etc. | `images/` or `content/` | e.g. `data/chevereto/` → `migrate` |
|
||||
| Custom | your folder name | `data/your-folder/` → `migrate` |
|
||||
|
||||
The CLI scans **every top-level directory under `data/` except `images`**, not only `blog` / `twikoo`.
|
||||
|
||||
**Limits:** files only — accounts, tokens, and old public URLs are not imported. `mapping.json` maps old **storage keys**, not full old-site URLs. For S3/R2-only legacy hosts, sync blobs to `data/…` or attach the bucket in PicHost **Storage** settings.
|
||||
|
||||
---
|
||||
|
||||
## Layout before and after
|
||||
|
||||
### Before (typical v1.1.x)
|
||||
|
||||
```
|
||||
/data
|
||||
├── pichost.db
|
||||
├── blog/
|
||||
│ └── 2026/08/TeKJ2fD6cB6j.webp
|
||||
├── twikoo/
|
||||
└── images/
|
||||
```
|
||||
|
||||
Index keys might look like `blog/2026/08/TeKJ2fD6cB6j.webp`.
|
||||
|
||||
### After (v1.2.0)
|
||||
|
||||
```
|
||||
/data
|
||||
├── pichost.db
|
||||
├── mapping.json
|
||||
└── images/
|
||||
├── blog/
|
||||
│ └── 2026/08/TeKJ2fD6cB6j.webp
|
||||
└── twikoo/
|
||||
```
|
||||
|
||||
Index key: `images/blog/2026/08/TeKJ2fD6cB6j.webp`.
|
||||
|
||||
---
|
||||
|
||||
## Step 1: CLI file migration
|
||||
|
||||
Run **before or after** upgrading the image; backup `data/` first.
|
||||
|
||||
```bash
|
||||
docker exec pichost migrate # preview + mapping.json
|
||||
docker exec pichost migrate --apply # move files
|
||||
```
|
||||
|
||||
Local: `npm run migrate` / `npm run migrate -- --apply`.
|
||||
|
||||
| Item | Behavior |
|
||||
| ---- | -------- |
|
||||
| Scan | Every top-level directory under `data/` **except `images`** |
|
||||
| Target | `data/images/{original-top-dir}/{relative-path}` |
|
||||
| Extensions | jpg, jpeg, png, webp, gif, svg, ico |
|
||||
| Sidecar | `.meta.json` next to an image is moved if present |
|
||||
| Other files | Not moved; parent directory kept if anything remains |
|
||||
| Mapping | `data/mapping.json` — old key → new key |
|
||||
|
||||
Script: `server/cli/migrate-to-single-images.mjs`.
|
||||
|
||||
---
|
||||
|
||||
## Step 2: Startup index sync (automatic)
|
||||
|
||||
Runs on every start (`npm run dev`, Docker). No manual command.
|
||||
|
||||
```text
|
||||
[INFO] 开始同步图片索引：扫描本地磁盘 ...
|
||||
[INFO] 磁盘扫描完成：...
|
||||
[INFO] 开始归一化遗留图片路径 ...
|
||||
[INFO] 开始校验索引与磁盘一致性，清理无文件的孤儿记录
|
||||
[INFO] 图片索引同步结束
|
||||
```
|
||||
|
||||
| Step | Purpose |
|
||||
| ---- | ------- |
|
||||
| Scan `data/images/` | Insert missing index rows for files on disk |
|
||||
| Normalize legacy keys | `blog/...` → `images/blog/...` when files are in place |
|
||||
| Purge orphans | Remove index rows with no file on disk |
|
||||
| Repair Content-Type | Fix `application/octet-stream` entries |
|
||||
|
||||
The CLI only **moves files**. Index alignment runs at startup — **restart** after `migrate --apply`.
|
||||
|
||||
---
|
||||
|
||||
## Recommended upgrade flow
|
||||
|
||||
1. Backup `data/`.
|
||||
2. `docker exec pichost migrate` — review output and `mapping.json`.
|
||||
3. `docker exec pichost migrate --apply`.
|
||||
4. Deploy v1.2.0 and restart.
|
||||
5. Check logs for successful index sync.
|
||||
6. Use `mapping.json` to update external URLs if needed.
|
||||
|
||||
Skip step 1 if you only use object storage or everything is already under `data/images/`.
|
||||
|
||||
---
|
||||
|
||||
## URLs
|
||||
|
||||
| Old key | `blog/TeKJ2fD6cB6j.webp` |
|
||||
| New key | `images/blog/TeKJ2fD6cB6j.webp` |
|
||||
|
||||
With “hide folder” mode, short URLs like `/TeKJ2fD6cB6j.webp` may still resolve by filename. Use `mapping.json` for bulk replacements.
|
||||
|
||||
Chinese version: [v1.2 迁移指南](/guide/migration)
|
||||
@@ -57,12 +57,14 @@ See [Cloudflare deployment](./cloudflare-deployment.md).
|
||||
|
||||
## Origin hardening (dual-domain)
|
||||
|
||||
PicHost middleware does **not** reject unlisted Host values. Complement with:
|
||||
Complement PicHost middleware with:
|
||||
|
||||
1. **`server_name` allowlist** — site + image hosts only; `default_server` blocks bare IP and unknown Host
|
||||
2. **Do not expose 6892 on the public Internet** — only local reverse proxy; public 80/443 only
|
||||
3. **Orange cloud** — origin firewall limited to Cloudflare IP ranges
|
||||
|
||||
**From v1.2.2**, when dual-domain is active PicHost also returns **404 at the app layer** for Host values other than the configured site and image names (complementing, not replacing, a default server block). If misconfiguration locks you out, run `docker exec pichost clear-domains` — see [FAQ](./faq.md#admin-404--locked-out-after-dual-domain-setup).
|
||||
|
||||
## Caddy
|
||||
|
||||
```caddy
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Storage
|
||||
|
||||
PicHost supports **local disk** and **S3-compatible object storage** (Cloudflare R2, Tencent COS, Alibaba OSS, AWS S3, etc.). Admins manage backends at **Storage** (`/storage`); new uploads go to the **default** backend.
|
||||
PicHost supports **local disk** and **S3-compatible object storage** (Cloudflare R2, Tencent COS, Alibaba OSS, AWS S3, etc.). Admins manage backends at **Storage** (`/storage`); new uploads go to the **default** backend. The page shows a **storage overview** (total, used, remaining, usage rate, capacity chart) plus per-backend cards and supported backend types.
|
||||
|
||||
|
||||
|
||||
@@ -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**.
|
||||
@@ -25,6 +27,8 @@ All **keys** start with `images/`. The upload API does **not** accept a `folder`
|
||||
3. Enter connection details (bucket, endpoint, keys).
|
||||
4. **Set as default** so new uploads use it.
|
||||
|
||||
New object-storage backends get an auto-generated **storage ID** prefix: `local` for disk; `r2-*` for R2; `cos-*` for COS; `oss-*` for OSS; `s3-*` for AWS S3 and custom S3-compatible endpoints (immutable after creation; the image index references this ID).
|
||||
|
||||
### Cloudflare R2
|
||||
|
||||
| Field | Value |
|
||||
@@ -52,13 +56,50 @@ Copied links use **IMAGE_BASE_URL**. “Hide folder prefix” may shorten URLs;
|
||||
## Usage & gallery filter
|
||||
|
||||
- Per-backend usage on the Storage page
|
||||
- Gallery filter by backend (admin)
|
||||
- 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
|
||||
  
|
||||
|
||||
Back up `data/images/`, `data/pichost.db`, and bucket objects.
|
||||
## Backup & migration (v1.3.0+)
|
||||
|
||||
Upgrading from v1.1.x with parallel folders: [v1.2 migration](./migration.md).
|
||||
The **Backup & migration** panel has three action cards and a paginated **Recent jobs** table below:
|
||||
|
||||
| Feature | Description |
|
||||
| ------- | ------------- |
|
||||
| **Create site backup** | Export `.phost.tar.gz` with `pichost.db` and all images (including objects on cloud backends); shows estimated size and package contents |
|
||||
| **Restore from backup** | Upload locally or pick an existing package under `data/backups/`, preview, then confirm; skip or overwrite conflicting images |
|
||||
| **Cross-backend sync** | Copy images between configured backends and update the index; shows pending count/size, dry-run, optional delete-source and set-default |
|
||||
|
||||
|
||||
|
||||
- Exports are saved under `data/backups/`; only one backup/migration job may run at a time
|
||||
- Job list supports pagination; download exports, view restore summaries, retry failed sync jobs
|
||||
- Packages **do not** include cloud storage secrets — re-enter them on the Storage page after restore
|
||||
- Uninitialized instances can use the **Restore backup** tab on `/setup` (always overwrite mode)
|
||||
|
||||
|
||||
|
||||
### CLI
|
||||
|
||||
```bash
|
||||
docker exec pichost backup-export
|
||||
docker exec pichost backup-restore /data/backups/pichost-xxx.phost.tar.gz
|
||||
docker exec pichost backup-restore /data/backups/pichost-xxx.phost.tar.gz --overwrite
|
||||
docker exec pichost storage-sync --from local --to s3-xxx --dry-run
|
||||
docker exec pichost storage-sync --from local --to s3-xxx --set-default
|
||||
```
|
||||
|
||||
Local development (project root):
|
||||
|
||||
```bash
|
||||
npm run backup-export
|
||||
npm run backup-restore -- data/backups/pichost-xxx.phost.tar.gz
|
||||
npm run storage-sync -- --from local --to s3-xxx --dry-run
|
||||
```
|
||||
|
||||
### Manual backup
|
||||
|
||||
You can still back up `data/images/`, `data/pichost.db`, and bucket objects directly; prefer the full-site export above.
|
||||
|
||||
## See also
|
||||
|
||||
|
||||
Loaded 100 of 218 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user