chiyi/image2api
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 易支付积分充值 + 站内公告 + OpenAI 视频修复 + grok/adobe 失败处理

Browse Source 
充值/订单(易支付 mapi):
- 订单表 + 30 分钟自动取消;支付弹窗(二维码/跳转监控、倒计时、轮询、5s 倒计时关闭)
- 系统设置可配:开关/商户ID/密钥/支付地址(根地址拼 /mapi)/支付方式/最低额/积分比例(默认 1元=100积分)
- 异步通知 MD5 验签、幂等到账;用户累计充值;前台/后台订单页(筛选+搜索+分页,前后台分风格);用户管理累计充值列

站内公告:
- Markdown 公告,登录用户首次访问/刷新弹出;内容哈希做版本,改了就重新推;管理员不弹;空内容=下线

OpenAI 视频(/v1/videos)修复:
- /content 拿不到视频:grok 资源 URL 需鉴权,改为用生成账号 token 取流;adobe/runway 公开 URL 直代理(不存 RustFS)
- size→分辨率用短边判定(1280x720 = 720p,之前误判 1080p 被拒)

失败处理:
- grok 429「Too many requests」/403 anti-bot 改判临时错误(不再误封号),真额度耗尽才算 quota
- adobe 视频 408 / system under load 归为临时错误 → tempAsDead 封号

其它:
- 充值默认关闭;签到格子浅色可见;登录验证码按钮浅色可读;并发/账户信息展示
- 创作记录/画图台只显示画图台作品(排除 API);日志页 API 视频预览显示 —
- 视频去画中画/下载/投屏(全局);图片缩略图改背景图规避 Edge 视觉搜索
- 订单/兑换码/配置/日志菜单文案与图标;充值版块样式

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
chiyi
2026-07-01 01:32:33 +08:00
co-authored by Claude Opus 4.8
parent 5cf6206ee9
commit 8ec4562f81
39 changed files with 2237 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.vue
+17 -3
View File
@@ -2,13 +2,25 @@
// App shell is layout-driven: each top-level route renders its own layout
// (PublicLayout for /, /user; AdminLayout for /admin/*). The login modal is
// mounted here so it can overlay any page instead of being a separate route.
import { onMounted } from 'vue'
import { onMounted, watch } from 'vue'
import LoginModal from './components/LoginModal.vue'
import AnnouncementModal from './components/AnnouncementModal.vue'
import PaymentModal from './components/PaymentModal.vue'
import { auth, refreshMe, openRegister } from './auth'
import { loadAnnouncement } from './announcement'
// Pull the 公告 whenever a user is (or becomes) logged in — at first paint AND
// after a fresh login. It pops up only if this user hasn't seen the latest one.
watch(() => auth.user?.id, (id) => { if (id) loadAnnouncement() }, { immediate: true })
// An invite link (/?ref=CODE) should drop a guest straight into registration
// with the code attached. Logged-in users just ignore the ref.
onMounted(async () => {
// Validate the stored session on every page load / refresh — even on public
// pages where the router guard doesn't. This populates auth.user, which fires
// the watch above → the 公告 check runs on a plain refresh (no re-login).
if (auth.token && !auth.ready) await refreshMe()
// An invite link (/?ref=CODE) should drop a guest straight into registration
// with the code attached. Logged-in users just ignore the ref.
const code = new URLSearchParams(location.search).get('ref')
if (!code) return
if (!auth.ready) await refreshMe()
@@ -19,4 +31,6 @@ onMounted(async () => {
<template>
<router-view />
<LoginModal />
<AnnouncementModal />
<PaymentModal />
</template>
frontend/src/announcement.js
+28
View File
@@ -0,0 +1,28 @@
// Site-wide 公告 (admin-authored markdown). Visible only to logged-in users; pops
// up whenever the current user hasn't seen the latest version — at login AND on
// any normal visit. An admin edit changes the version (content hash) so it
// re-pops for everyone who hasn't seen the new text.
import { reactive } from 'vue'
import { api, jsonBody } from './api'
export const announcement = reactive({ content: '', version: '', show: false })
// Fetch the current announcement + this user's seen-state; show it if unseen.
export async function loadAnnouncement() {
try {
const r = await api('/announcement')
if (r.ok && r.data) {
announcement.content = r.data.content || ''
announcement.version = r.data.version || ''
announcement.show = !r.data.seen && !!announcement.content.trim()
}
} catch { /* offline — skip */ }
}
// Dismiss: hide + remember this version server-side so it won't re-pop.
export async function dismissAnnouncement() {
announcement.show = false
if (announcement.version) {
try { await api('/announcement/seen', jsonBody('POST', { version: announcement.version })) } catch { /* ignore */ }
}
}
frontend/src/components/AnnouncementModal.vue
+62
View File
@@ -0,0 +1,62 @@
<script setup>
import { computed } from 'vue'
import { marked } from 'marked'
import { announcement, dismissAnnouncement } from '../announcement'
import Icon from './Icon.vue'
marked.setOptions({ breaks: true, gfm: true })
const html = computed(() => marked.parse(announcement.content || ''))
</script>
<template>
<transition name="ann-fade">
<div v-if="announcement.show"
class="fixed inset-0 z-[80] bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4"
@click.self="dismissAnnouncement">
<div class="w-full max-w-lg rounded-2xl bg-white text-slate-800 shadow-2xl overflow-hidden flex flex-col max-h-[80vh]">
<div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between gap-3 shrink-0">
<div class="flex items-center gap-2">
<span class="w-7 h-7 rounded-lg bg-violet-500/15 text-violet-600 grid place-items-center">
<Icon name="spark" class="w-4 h-4" />
</span>
<h2 class="text-base font-semibold">公告</h2>
</div>
<button @click="dismissAnnouncement" class="text-slate-400 hover:text-slate-700 transition-colors">
<Icon name="close" class="w-5 h-5" />
</button>
</div>
<div class="ann-body px-6 py-5 overflow-y-auto" v-html="html"></div>
<div class="px-6 py-4 border-t border-slate-100 flex justify-end shrink-0">
<button @click="dismissAnnouncement"
class="rounded-lg bg-slate-900 text-white hover:bg-slate-700 px-5 py-2 text-sm font-medium transition-colors">
我知道了
</button>
</div>
</div>
</div>
</transition>
</template>
<style scoped>
.ann-fade-enter-active, .ann-fade-leave-active { transition: opacity 0.2s ease; }
.ann-fade-enter-from, .ann-fade-leave-to { opacity: 0; }
/* Minimal markdown typography for the announcement body. */
.ann-body { font-size: 0.9rem; line-height: 1.65; color: rgb(51 65 85); }
.ann-body :deep(h1) { font-size: 1.25rem; font-weight: 700; margin: 0.6em 0 0.4em; color: rgb(15 23 42); }
.ann-body :deep(h2) { font-size: 1.1rem; font-weight: 700; margin: 0.6em 0 0.4em; color: rgb(15 23 42); }
.ann-body :deep(h3) { font-size: 1rem; font-weight: 600; margin: 0.6em 0 0.3em; color: rgb(15 23 42); }
.ann-body :deep(p) { margin: 0.5em 0; }
.ann-body :deep(ul), .ann-body :deep(ol) { margin: 0.5em 0; padding-left: 1.4em; }
.ann-body :deep(ul) { list-style: disc; }
.ann-body :deep(ol) { list-style: decimal; }
.ann-body :deep(li) { margin: 0.2em 0; }
.ann-body :deep(a) { color: rgb(124 58 237); text-decoration: underline; }
.ann-body :deep(strong) { font-weight: 700; color: rgb(15 23 42); }
.ann-body :deep(code) { background: rgb(241 245 249); padding: 0.1em 0.35em; border-radius: 0.3rem; font-size: 0.85em; }
.ann-body :deep(pre) { background: rgb(241 245 249); padding: 0.8em; border-radius: 0.5rem; overflow-x: auto; margin: 0.6em 0; }
.ann-body :deep(pre code) { background: none; padding: 0; }
.ann-body :deep(blockquote) { border-left: 3px solid rgb(196 181 253); padding-left: 0.9em; color: rgb(100 116 139); margin: 0.6em 0; }
.ann-body :deep(hr) { border: none; border-top: 1px solid rgb(226 232 240); margin: 1em 0; }
.ann-body :deep(img) { max-width: 100%; border-radius: 0.5rem; margin: 0.5em 0; }
</style>
frontend/src/components/Icon.vue
+1
View File
@@ -21,6 +21,7 @@ const PATHS = {
chevron: '<path d="m6 9 6 6 6-6"/>',
check: '<path d="M20 6 9 17l-5-5"/>',
shield: '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>',
receipt: '<path d="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z"/><path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"/><path d="M12 17.5v-11"/>',
}
defineProps({ name: { type: String, required: true } })
frontend/src/components/LoginModal.vue
+6 -3
View File
@@ -347,12 +347,15 @@ html.dark .fld:-webkit-autofill:focus {
min-width: 5.5rem; /* keep width stable between text / spinner */
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.75rem; white-space: nowrap;
color: rgb(196 181 253 / 0.95);
background: rgb(167 139 250 / 0.1); border: 1px solid rgb(167 139 250 / 0.3);
color: rgb(124 58 237); /* violet-600 — readable on the light card */
background: rgb(167 139 250 / 0.12); border: 1px solid rgb(167 139 250 / 0.4);
transition: background 0.15s, opacity 0.15s;
}
html.dark .code-btn { color: rgb(196 181 253 / 0.95); background: rgb(167 139 250 / 0.1); border-color: rgb(167 139 250 / 0.3); }
.code-btn:hover:not(:disabled) { background: rgb(167 139 250 / 0.2); }
.code-btn:disabled { opacity: 0.45; cursor: not-allowed; color: rgb(255 255 255 / 0.5); border-color: rgb(255 255 255 / 0.12); }
/* Disabled (sending / countdown): just dim — keep the theme text color so it
never washes out to invisible white on the light card. */
.code-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.code-spin { width: 1.05rem; height: 1.05rem; animation: code-spin 0.7s linear infinite; }
@keyframes code-spin { to { transform: rotate(360deg); } }
frontend/src/components/PaymentModal.vue
+172
View File
@@ -0,0 +1,172 @@
<script setup>
import { ref, computed, watch, onUnmounted } from 'vue'
import QRCode from 'qrcode'
import { api } from '../api'
import { refreshMe } from '../auth'
import { payment, closePayment } from '../payment'
import Icon from './Icon.vue'
const qrUrl = ref('')
const remaining = ref(0) // seconds until expiry
const paid = ref(false)
const closeIn = ref(5) // post-paid auto-close countdown
let pollTimer = null, tickTimer = null, closeTimer = null
let serverOffset = 0 // (client epoch − server epoch); makes the countdown clock-skew-proof
const order = computed(() => payment.order || {})
const isJump = computed(() => order.value.pay_info_type === 'jump')
// Dead = the order can no longer be paid: cancelled server-side, or the countdown
// has hit zero (the QR is invalid even before the sweep flips the status).
const dead = computed(() => !paid.value && (order.value.status === 'cancelled' || remaining.value <= 0))
const methodLabel = computed(() => ({ wxpay: '微信支付', alipay: '支付宝' }[order.value.pay_type] || order.value.pay_type || ''))
const statusLabel = computed(() => ({ pending: '待支付', paid: '已支付', cancelled: '已取消' }[order.value.status] || order.value.status))
const mmss = computed(() => {
const s = Math.max(0, remaining.value)
return `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}`
})
function fmtTime(unix) {
if (!unix) return '—'
const d = new Date(unix * 1000)
const p = (n) => String(n).padStart(2, '0')
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`
}
function clearTimers() {
clearInterval(pollTimer); clearInterval(tickTimer); clearInterval(closeTimer)
pollTimer = tickTimer = closeTimer = null
}
async function renderQR() {
qrUrl.value = ''
const info = order.value.pay_info
if (!info) return
try { qrUrl.value = await QRCode.toDataURL(info, { width: 220, margin: 1 }) } catch { qrUrl.value = '' }
}
async function poll() {
if (!order.value.id || paid.value) return
const r = await api(`/pay/orders/${order.value.id}`)
if (r.ok && r.data) {
payment.order = { ...payment.order, ...r.data }
if (r.data.status === 'paid') onPaid()
else if (r.data.status === 'cancelled') { clearInterval(pollTimer); pollTimer = null }
}
}
function onPaid() {
if (paid.value) return
paid.value = true
clearTimers()
refreshMe() // pull the new credits / 累计充值
closeIn.value = 5
closeTimer = setInterval(() => {
closeIn.value -= 1
if (closeIn.value <= 0) finish()
}, 1000)
}
function finish() {
clearTimers()
// Only run the onPaid callback (e.g. navigate to 设置) when the order was
// actually paid — closing the popup without paying must not navigate.
const cb = paid.value ? payment.onPaid : null
closePayment()
if (cb) cb()
}
function tick() {
const serverNow = Date.now() / 1000 - serverOffset
remaining.value = Math.max(0, Math.floor((order.value.expires_at || 0) - serverNow))
}
watch(() => payment.show, (show) => {
clearTimers()
paid.value = false
if (!show) return
// Anchor the countdown to the server clock so a wrong local clock can't make
// 30 minutes read as 32.
serverOffset = order.value.server_now ? (Date.now() / 1000 - order.value.server_now) : 0
if (order.value.status === 'paid') { onPaid(); return }
if (isJump.value && order.value.pay_info) {
window.open(order.value.pay_info, '_blank') // auto-jump to the cashier
} else {
renderQR()
}
tick(); tickTimer = setInterval(tick, 1000)
poll(); pollTimer = setInterval(poll, 3000)
})
onUnmounted(clearTimers)
</script>
<template>
<transition name="pay-fade">
<div v-if="payment.show" class="fixed inset-0 z-[85] bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4"
@click.self="!paid && finish()">
<div class="w-full max-w-sm rounded-2xl bg-white text-slate-800 shadow-2xl overflow-hidden">
<div class="px-5 py-4 border-b border-slate-100 flex items-center justify-between">
<h2 class="text-base font-semibold">{{ paid ? '支付成功' : dead ? '支付超时' : (isJump ? '支付监控中' : '扫码支付') }}</h2>
<button v-if="!paid" @click="finish" class="text-slate-400 hover:text-slate-700"><Icon name="close" class="w-5 h-5" /></button>
</div>
<!-- paid -->
<div v-if="paid" class="px-6 py-10 text-center">
<div class="w-16 h-16 mx-auto rounded-full bg-emerald-100 text-emerald-600 grid place-items-center mb-4">
<Icon name="spark" class="w-8 h-8" />
</div>
<p class="text-lg font-semibold text-slate-800">充值成功</p>
<p class="text-sm text-slate-500 mt-1">已到账 <strong class="text-emerald-600">{{ order.points }}</strong> 积分</p>
<p class="text-xs text-slate-400 mt-4">{{ closeIn }} 秒后自动关闭</p>
</div>
<!-- expired / cancelled -->
<div v-else-if="dead" class="px-6 py-10 text-center">
<div class="w-16 h-16 mx-auto rounded-full bg-slate-100 text-slate-400 grid place-items-center mb-4">
<Icon name="close" class="w-8 h-8" />
</div>
<p class="text-lg font-semibold text-slate-700">支付超时</p>
<p class="text-sm text-slate-500 mt-1">二维码已失效,订单已取消</p>
<p class="text-xs text-slate-400 mt-1">如需充值请重新下单</p>
<button @click="finish" class="mt-5 rounded-lg bg-slate-900 text-white hover:bg-slate-700 px-5 py-2 text-sm font-medium transition-colors">关闭</button>
</div>
<!-- pending -->
<div v-else class="px-6 py-5">
<!-- qrcode: scan to pay -->
<template v-if="!isJump">
<div class="flex justify-center mb-3">
<div class="w-[228px] h-[228px] rounded-2xl ring-1 ring-slate-200 shadow-sm grid place-items-center overflow-hidden bg-white p-3.5">
<img v-if="qrUrl" :src="qrUrl" alt="支付二维码" class="w-full h-full rounded-lg" />
<span v-else class="text-xs text-slate-400">二维码生成中…</span>
</div>
</div>
<p class="text-center text-xs text-slate-500 mb-4">请使用<strong class="text-slate-700">{{ methodLabel }}</strong>扫码支付</p>
</template>
<!-- jump (no qrcode): the cashier opened in a new tab — just monitor -->
<template v-else>
<div class="flex flex-col items-center justify-center py-7 mb-2">
<div class="w-12 h-12 rounded-full border-2 border-violet-200 border-t-violet-500 animate-spin mb-3"></div>
<p class="text-sm font-medium text-slate-700">支付监控中…</p>
<p class="text-xs text-slate-400 mt-1">已打开支付页面,完成后自动到账</p>
</div>
</template>
<dl class="text-sm space-y-2">
<div class="flex justify-between"><dt class="text-slate-400">订单号</dt><dd class="font-mono text-xs text-slate-700">{{ order.id }}</dd></div>
<div class="flex justify-between"><dt class="text-slate-400">状态</dt><dd class="text-amber-600 font-medium">{{ statusLabel }}</dd></div>
<div class="flex justify-between"><dt class="text-slate-400">金额</dt><dd class="font-semibold text-slate-800">¥{{ order.amount }}</dd></div>
<div class="flex justify-between"><dt class="text-slate-400">充值积分</dt><dd class="text-violet-600 font-semibold">{{ order.points }}</dd></div>
<div class="flex justify-between"><dt class="text-slate-400">下单时间</dt><dd class="text-xs text-slate-600">{{ fmtTime(order.created_at) }}</dd></div>
<div class="flex justify-between"><dt class="text-slate-400">支付倒计时</dt><dd class="tabular-nums font-medium" :class="remaining > 0 ? 'text-slate-700' : 'text-rose-500'">{{ remaining > 0 ? mmss : '已超时' }}</dd></div>
</dl>
<p class="text-[11px] text-slate-400 mt-4 text-center">支付完成后将自动到账,请勿关闭本窗口</p>
</div>
</div>
</div>
</transition>
</template>
<style scoped>
.pay-fade-enter-active, .pay-fade-leave-active { transition: opacity 0.2s ease; }
.pay-fade-enter-from, .pay-fade-leave-to { opacity: 0; }
</style>
frontend/src/layouts/AdminLayout.vue
+4 -3
View File
@@ -14,12 +14,13 @@ const tabs = [
{ label: '账号管理', to: '/admin/accounts', icon: 'plug' },
{ label: '用户管理', to: '/admin/users', icon: 'accounts' },
{ label: '并发分组', to: '/admin/concurrency', icon: 'shield' },
{ label: '兑换码', to: '/admin/cdks', icon: 'spark' },
{ label: '订单管理', to: '/admin/orders', icon: 'receipt' },
{ label: '兑换码管理', to: '/admin/cdks', icon: 'spark' },
{ label: '邀请日志', to: '/admin/invites', icon: 'accounts' },
{ label: '图片管理', to: '/admin/images', icon: 'files' },
{ label: '首页内容', to: '/admin/showcase', icon: 'spark' },
{ label: '日志', to: '/admin/logs', icon: 'log' },
{ label: '配置', to: '/admin/config', icon: 'config' },
{ label: '日志管理', to: '/admin/logs', icon: 'log' },
{ label: '系统配置', to: '/admin/config', icon: 'config' },
]
const currentLabel = computed(() => route.meta?.label || '')
frontend/src/layouts/PublicLayout.vue
+2 -1
View File
@@ -19,6 +19,7 @@ const nav = computed(() => {
items.push({ to: '/logs', label: '图片', icon: 'files' })
items.push({ to: '/mylogs', label: '日志', icon: 'log' })
items.push({ to: '/invite', label: '邀请', icon: 'accounts' })
items.push({ to: '/orders', label: '订单', icon: 'receipt' })
}
// 文档 + 关于 are public — visible to guests too.
items.push({ to: '/docs', label: '文档', icon: 'log' })
@@ -87,7 +88,7 @@ const currentLabel = computed(() => {
</button>
<router-link to="/settings" title="设置" @click="onSettings"
:class="$route.path === '/settings' ? 'rail-bottom active' : 'rail-bottom'">
<Icon name="config" class="w-4 h-4" />
<Icon name="accounts" class="w-4 h-4" />
</router-link>
</div>
</aside>
frontend/src/main.js
+30 -4
View File
@@ -13,6 +13,8 @@ import PlaygroundView from './views/PlaygroundView.vue'
import UserLogsView from './views/UserLogsView.vue'
import UserLogsTableView from './views/UserLogsTableView.vue'
import SettingsView from './views/SettingsView.vue'
import OrdersView from './views/OrdersView.vue'
import AdminOrdersView from './views/AdminOrdersView.vue'
import InviteView from './views/InviteView.vue'
import DocsView from './views/DocsView.vue'
import AboutView from './views/AboutView.vue'
@@ -40,6 +42,7 @@ const routes = [
{ path: 'invite', component: InviteView, meta: { label: '邀请' } },
{ path: 'docs', component: DocsView, meta: { label: '文档' } },
{ path: 'about', component: AboutView, meta: { label: '关于' } },
{ path: 'orders', component: OrdersView, meta: { label: '订单' } },
{ path: 'settings', component: SettingsView, meta: { label: '设置' } },
],
},
@@ -53,12 +56,13 @@ const routes = [
{ path: 'accounts', component: AccountsView, meta: { label: '账号管理' } },
{ path: 'users', component: UsersView, meta: { label: '用户管理' } },
{ path: 'concurrency', component: ConcurrencyView, meta: { label: '并发分组' } },
{ path: 'cdks', component: CdksView, meta: { label: '兑换码' } },
{ path: 'orders', component: AdminOrdersView, meta: { label: '订单管理' } },
{ path: 'cdks', component: CdksView, meta: { label: '兑换码管理' } },
{ path: 'invites', component: InvitesAdminView, meta: { label: '邀请日志' } },
{ path: 'images', component: ImagesView, meta: { label: '图片管理' } },
{ path: 'showcase', component: ShowcaseView, meta: { label: '首页内容' } },
{ path: 'logs', component: LogsView, meta: { label: '日志' } },
{ path: 'config', component: ConfigView, meta: { label: '配置' } },
{ path: 'logs', component: LogsView, meta: { label: '日志管理' } },
{ path: 'config', component: ConfigView, meta: { label: '系统配置' } },
],
},
// legacy redirects
@@ -83,7 +87,7 @@ const router = createRouter({
// Pages that require a login. The home page (/) stays public; everything a
// signed-in user touches (画图/记录/设置) and the whole admin area is gated.
const PROTECTED = ['/user', '/logs', '/invite', '/settings']
const PROTECTED = ['/user', '/logs', '/invite', '/settings', '/orders']
function isProtected(path) {
return path.startsWith('/admin') || PROTECTED.includes(path)
}
@@ -119,3 +123,25 @@ router.afterEach(applyTitle)
loadSite().then(() => applyTitle(router.currentRoute.value))
createApp(App).use(router).mount('#app')
// Globally strip the browser's video extras (画中画/PiP、下载、投屏、播放速率/增强菜单)
// from EVERY <video> — applied to existing nodes + anything Vue renders later.
// (Edge's image "视觉搜索" is handled by rendering thumbnails as CSS background
// images instead of <img>, since there's no attribute to disable it.)
function hardenVideo(v) {
try {
v.disablePictureInPicture = true
v.disableRemotePlayback = true
v.setAttribute('controlslist', 'nodownload noremoteplayback noplaybackrate')
} catch { /* ignore */ }
}
new MutationObserver((muts) => {
for (const m of muts) {
for (const n of m.addedNodes) {
if (n.nodeType !== 1) continue
if (n.tagName === 'VIDEO') hardenVideo(n)
else n.querySelectorAll && n.querySelectorAll('video').forEach(hardenVideo)
}
}
}).observe(document.documentElement, { childList: true, subtree: true })
document.querySelectorAll('video').forEach(hardenVideo)
frontend/src/payment.js
+18
View File
@@ -0,0 +1,18 @@
// Global payment-popup state. openPayment() shows the QR-scan modal for an order
// (returned by POST /pay/recharge or /pay/orders/:id/continue); the modal polls
// status and fires onPaid when the order is paid.
import { reactive } from 'vue'
export const payment = reactive({ show: false, order: null, onPaid: null })
export function openPayment(order, opts = {}) {
payment.order = order
payment.onPaid = typeof opts.onPaid === 'function' ? opts.onPaid : null
payment.show = true
}
export function closePayment() {
payment.show = false
payment.order = null
payment.onPaid = null
}
frontend/src/style.css
+7
View File
@@ -1,5 +1,12 @@
@import "tailwindcss";
/* Edge: suppress the hover "visual search / 视觉搜索" overlay icon on images and
videos (legacy-Edge -ms-touch-action trick). Doesn't affect clicks. */
img,
video {
-ms-touch-action: none;
}
:root {
font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
--tw-ring-color: rgb(15 23 42 / 0.08);
frontend/src/views/AdminOrdersView.vue
+152
View File
@@ -0,0 +1,152 @@
<script setup>
// Admin 订单 page — all recharge orders, dark admin look (filter pills + search +
// numbered pagination), read-only with 用户名.
import { ref, computed, onMounted } from 'vue'
import { api } from '../api'
import Icon from '../components/Icon.vue'
const items = ref([])
const total = ref(0)
const loading = ref(false)
const status = ref('')
const search = ref('')
const page = ref(1)
const pageSize = 20
const STATUS = { pending: '待支付', paid: '已支付', cancelled: '已取消' }
const METHOD = { wxpay: '微信', alipay: '支付宝' }
const chipClass = (s) => ({
paid: 'fp-emerald', pending: 'fp-amber', cancelled: '',
}[s] || '')
function fmt(unix) {
if (!unix) return '—'
const d = new Date(unix * 1000)
const p = (n) => String(n).padStart(2, '0')
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
}
async function load() {
loading.value = true
const qs = new URLSearchParams({ limit: String(pageSize), offset: String((page.value - 1) * pageSize) })
if (status.value) qs.set('status', status.value)
const r = await api('/pay/admin/orders?' + qs.toString())
loading.value = false
if (r.ok) {
items.value = r.data?.data || []
total.value = Number(r.data?.total ?? items.value.length)
}
}
onMounted(load)
const displayed = computed(() => {
const q = search.value.trim().toLowerCase()
if (!q) return items.value
return items.value.filter((o) =>
(o.id || '').toLowerCase().includes(q) ||
(o.user_name || '').toLowerCase().includes(q) ||
String(o.amount).includes(q))
})
const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize)))
const pageStart = computed(() => total.value === 0 ? 0 : (page.value - 1) * pageSize + 1)
const pageEnd = computed(() => Math.min(total.value, page.value * pageSize))
function setStatus(v) { status.value = v; page.value = 1; load() }
const pageNumbers = computed(() => {
const n = totalPages.value, cur = page.value
if (n <= 7) return Array.from({ length: n }, (_, i) => i + 1)
const want = new Set([1, n, cur - 1, cur, cur + 1])
if (cur <= 3) { want.add(2); want.add(3); want.add(4) }
if (cur >= n - 2) { want.add(n - 1); want.add(n - 2); want.add(n - 3) }
const list = [...want].filter((x) => x >= 1 && x <= n).sort((a, b) => a - b)
const out = []
for (let i = 0; i < list.length; i++) {
if (i > 0 && list[i] - list[i - 1] > 1) out.push(null)
out.push(list[i])
}
return out
})
function goPage(n) {
const t = Math.max(1, Math.min(totalPages.value, n))
if (t === page.value) return
page.value = t; load()
}
</script>
<template>
<section class="theme-text space-y-4">
<div class="card p-4 flex items-center justify-between gap-3 flex-wrap">
<div>
<h2 class="text-sm font-semibold">订单管理</h2>
<p class="text-xs text-white/45 mt-0.5">{{ total }} 笔充值订单</p>
</div>
<div class="flex items-center gap-3 flex-wrap">
<div class="flex items-center gap-1.5">
<button v-for="s in [['','全部'],['pending','待支付'],['paid','已支付'],['cancelled','已取消']]" :key="s[0]"
@click="setStatus(s[0])" class="fp" :class="status === s[0] && 'fp-on'">{{ s[1] }}</button>
</div>
<input v-model="search" class="field !py-1.5 text-xs !w-52" placeholder="搜索 订单号 / 用户名 / 金额…" />
<button @click="load" class="btn-soft"><Icon name="refresh" class="w-3.5 h-3.5" /> 刷新</button>
</div>
</div>
<div v-if="loading && !items.length" class="card text-center text-sm text-white/40 py-20">加载中…</div>
<div v-else-if="!total" class="card text-center text-sm text-white/40 py-20">暂无订单</div>
<div v-else class="card overflow-x-auto !p-0">
<table class="w-full text-sm log-table min-w-[820px]">
<thead>
<tr class="text-[10px] uppercase tracking-[0.18em] text-white/40 border-b border-white/[0.06]">
<th class="text-left px-5 py-3 font-medium">订单号</th>
<th class="text-left px-3 py-3 font-medium">用户名</th>
<th class="text-left px-3 py-3 font-medium">下单时间</th>
<th class="text-left px-3 py-3 font-medium">支付时间</th>
<th class="text-right px-3 py-3 font-medium">金额</th>
<th class="text-right px-3 py-3 font-medium">充值积分</th>
<th class="text-left px-3 py-3 font-medium">状态</th>
</tr>
</thead>
<tbody>
<tr v-for="o in displayed" :key="o.id" class="log-row">
<td class="px-5 py-3.5 align-middle font-mono text-xs text-white/80">{{ o.id }}</td>
<td class="px-3 py-3.5 align-middle text-white/85 truncate max-w-[140px]" :title="o.user_name">{{ o.user_name || '—' }}</td>
<td class="px-3 py-3.5 align-middle text-xs text-white/55 whitespace-nowrap">{{ fmt(o.created_at) }}</td>
<td class="px-3 py-3.5 align-middle text-xs text-white/55 whitespace-nowrap">{{ fmt(o.paid_at) }}</td>
<td class="px-3 py-3.5 align-middle text-right tabular-nums text-white/85">¥{{ o.amount }}</td>
<td class="px-3 py-3.5 align-middle text-right tabular-nums text-violet-300">{{ o.points }}</td>
<td class="px-3 py-3.5 align-middle">
<span class="chip" :class="chipClass(o.status)">{{ STATUS[o.status] }}<span class="opacity-50 ml-1">· {{ METHOD[o.pay_type] || o.pay_type }}</span></span>
</td>
</tr>
</tbody>
</table>
<div v-if="total && totalPages > 1"
class="flex items-center justify-between gap-3 border-t border-white/[0.06] px-5 py-3 text-xs text-white/50">
<div><span class="tabular-nums text-white/75">{{ pageStart }}–{{ pageEnd }}</span><span class="ml-1">/ {{ total }} 笔</span></div>
<div class="flex items-center gap-1">
<template v-for="(n, i) in pageNumbers" :key="i">
<span v-if="n === null" class="px-1 text-white/30">…</span>
<button v-else @click="goPage(n)" class="pg" :class="page === n && 'pg-on'">{{ n }}</button>
</template>
</div>
</div>
</div>
</section>
</template>
<style scoped>
.fp { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; font-size: 0.72rem; border-radius: 0.55rem; color: rgb(255 255 255 / 0.65); background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); transition: background 0.15s, color 0.15s; }
.fp:hover { background: rgb(255 255 255 / 0.09); color: white; }
.fp-on { background: rgb(255 255 255 / 0.92); color: rgb(15 23 42); box-shadow: none; }
.fp-emerald { background: rgb(16 185 129 / 0.22); color: rgb(110 231 183); box-shadow: inset 0 0 0 1px rgb(110 231 183 / 0.45); }
.fp-amber { background: rgb(245 158 11 / 0.22); color: rgb(252 211 77); box-shadow: inset 0 0 0 1px rgb(252 211 77 / 0.45); }
.chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.55rem; font-size: 0.7rem; font-weight: 500; border-radius: 9999px; white-space: nowrap; background: rgb(255 255 255 / 0.06); color: rgb(255 255 255 / 0.55); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.log-table { border-collapse: separate; border-spacing: 0; }
.log-row td { border-bottom: 1px solid rgb(255 255 255 / 0.04); transition: background-color 0.15s ease, box-shadow 0.15s ease; }
.log-row:hover td { background: rgb(255 255 255 / 0.025); }
.log-row:hover td:first-child { box-shadow: inset 2px 0 0 rgb(167 139 250 / 0.55); }
.log-row:last-child td { border-bottom: none; }
.pg { min-width: 1.75rem; padding: 0.3rem 0.55rem; font-size: 0.72rem; font-weight: 500; text-align: center; border-radius: 0.45rem; color: rgb(255 255 255 / 0.7); background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); transition: background 0.15s, color 0.15s; }
.pg:hover:not(.pg-on) { background: rgb(255 255 255 / 0.1); color: white; }
.pg-on { background: rgb(255 255 255 / 0.92); color: rgb(15 23 42); box-shadow: none; }
</style>
frontend/src/views/ConfigView.vue
+95 -1
View File
@@ -120,6 +120,42 @@ const smtpBusy = ref(false); const smtpSaved = ref(false)
const credits = reactive({ checkin_enabled: true, checkin_reward: 3, invite_enabled: true, invite_reward: 3, cdk_redeem_enabled: true })
const credBusy = ref(false); const credSaved = ref(false)
// ---- announcement (公告, markdown; re-pops for users who haven't seen edits) ----
const ann = reactive({ content: '' })
const annBusy = ref(false); const annSaved = ref(false)
async function loadAnnouncement() {
const r = await api('/settings/announcement')
if (r.ok && r.data) ann.content = r.data.content || ''
}
async function saveAnnouncement() {
annBusy.value = true; annSaved.value = false
const r = await api('/settings/announcement', jsonBody('PUT', { content: ann.content }))
annBusy.value = false
if (r.ok) { annSaved.value = true; setTimeout(() => (annSaved.value = false), 2000) }
}
// ---- payment (易支付 充值) ----
const pay = reactive({ enabled: false, pid: '', key: '', api_base: '', methods: ['wxpay', 'alipay'], min_amount: 1, points_ratio: 100 })
const payBusy = ref(false); const paySaved = ref(false); const payErr = ref('')
const PAY_METHODS = [{ v: 'wxpay', label: '微信' }, { v: 'alipay', label: '支付宝' }]
async function loadPay() {
const r = await api('/settings/pay')
if (r.ok && r.data) Object.assign(pay, r.data, { methods: r.data.methods || [] })
}
function togglePayMethod(m) {
const i = pay.methods.indexOf(m)
if (i >= 0) pay.methods.splice(i, 1); else pay.methods.push(m)
}
async function savePay() {
payBusy.value = true; paySaved.value = false; payErr.value = ''
const r = await api('/settings/pay', jsonBody('PUT', {
...pay, min_amount: Number(pay.min_amount) || 0, points_ratio: Number(pay.points_ratio) || 100,
}))
payBusy.value = false
if (r.ok) { paySaved.value = true; setTimeout(() => (paySaved.value = false), 2000) }
else payErr.value = r.data?.detail || '保存失败'
}
// ---- proxy (carried when calling upstream during generation) ----
const proxy = reactive({ proxy: '' })
const proxyBusy = ref(false); const proxySaved = ref(false)
@@ -233,7 +269,7 @@ async function saveCredits() {
if (r.ok) { credSaved.value = true; setTimeout(() => (credSaved.value = false), 2000) }
}
onMounted(() => { loadSite(); loadReg(); loadSmtp(); loadCredits(); loadProxy(); loadLogs(); loadMedia() })
onMounted(() => { loadSite(); loadReg(); loadSmtp(); loadCredits(); loadAnnouncement(); loadPay(); loadProxy(); loadLogs(); loadMedia() })
</script>
<template>
@@ -426,6 +462,64 @@ onMounted(() => { loadSite(); loadReg(); loadSmtp(); loadCredits(); loadProxy();
<div class="mt-4"><button @click="saveCredits" :disabled="credBusy" class="btn-primary">{{ credBusy ? '保存中…' : '保存设置' }}</button></div>
</div>
<!-- announcement (公告) -->
<div class="card p-5">
<div class="flex items-center justify-between mb-1">
<h2 class="text-sm font-semibold">公告</h2>
<span v-if="annSaved" class="text-xs text-emerald-500">已保存</span>
</div>
<p class="text-xs text-slate-400 mb-3">支持 Markdown。登录用户会在首次访问时弹出;<strong class="text-slate-500">更新内容后</strong>,所有没看过新版本的用户会重新弹出。留空则不显示。</p>
<textarea v-model="ann.content" rows="8" placeholder="# 标题&#10;&#10;支持 **加粗**、列表、[链接](https://...)、`代码` 等 Markdown 语法。"
class="field font-mono text-xs leading-relaxed" style="resize:vertical"></textarea>
<div class="mt-4"><button @click="saveAnnouncement" :disabled="annBusy" class="btn-primary">{{ annBusy ? '保存中…' : '保存设置' }}</button></div>
</div>
<!-- payment (易支付充值) -->
<div class="card p-5">
<div class="flex items-center justify-between mb-1">
<h2 class="text-sm font-semibold">充值 (易支付)</h2>
<span v-if="paySaved" class="text-xs text-emerald-500">已保存</span>
</div>
<p class="text-xs text-slate-400 mb-3">对接易支付。关闭后用户看不到充值入口。商户ID、密钥、支付地址不能为空。</p>
<div class="space-y-3">
<label class="row">
<span><span class="lbl">开启充值</span><span class="hint">关闭后前台不显示充值入口,且无法下单。</span></span>
<input type="checkbox" v-model="pay.enabled" class="sw" />
</label>
<label class="row">
<span><span class="lbl">支付地址</span><span class="hint">易支付 API 根地址,自动拼 /mapi。</span></span>
<input v-model="pay.api_base" placeholder="https://pay.v8jisu.cn/api/pay" class="field !w-64" />
</label>
<label class="row">
<span><span class="lbl">商户ID (PID)</span></span>
<input v-model="pay.pid" class="field !w-64" />
</label>
<label class="row">
<span><span class="lbl">商户密钥</span></span>
<input v-model="pay.key" type="password" class="field !w-64" />
</label>
<div class="row">
<span><span class="lbl">支付方式</span><span class="hint">勾选哪些,前台就只显示哪些。</span></span>
<div class="flex gap-3">
<label v-for="m in PAY_METHODS" :key="m.v" class="inline-flex items-center gap-1.5 text-sm cursor-pointer">
<input type="checkbox" :checked="pay.methods.includes(m.v)" @change="togglePayMethod(m.v)" />
{{ m.label }}
</label>
</div>
</div>
<label class="row">
<span><span class="lbl">最低充值金额 (元)</span></span>
<input type="number" min="0" step="0.01" v-model.number="pay.min_amount" class="num" />
</label>
<label class="row">
<span><span class="lbl">积分充值比例</span><span class="hint">1 元 = 多少积分。例如 100 → 充 10 元到账 1000 积分。</span></span>
<input type="number" min="1" v-model.number="pay.points_ratio" class="num" />
</label>
</div>
<p v-if="payErr" class="text-xs text-rose-500 mt-3">{{ payErr }}</p>
<div class="mt-4"><button @click="savePay" :disabled="payBusy" class="btn-primary">{{ payBusy ? '保存中…' : '保存设置' }}</button></div>
</div>
<!-- logs retention -->
<div class="card p-5">
<div class="flex items-center justify-between mb-4">
frontend/src/views/ImagesView.vue
+3 -2
View File
@@ -144,8 +144,9 @@ onUnmounted(() => window.removeEventListener('keydown', onKey))
@mouseenter="$event.target.play && $event.target.play()"
@mouseleave="$event.target.pause && $event.target.pause()" />
</template>
<img v-else :src="generatedUrl(f.name)" loading="lazy"
class="absolute inset-0 w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" />
<!-- background-image (not <img>) so Edge shows no 视觉搜索 overlay icon. -->
<div v-else :style="{ backgroundImage: `url(${generatedUrl(f.name)})` }"
class="absolute inset-0 w-full h-full bg-cover bg-center transition-transform duration-300 group-hover:scale-105"></div>
<!-- gradient veil (always visible so the prompt overlay reads) -->
<div class="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/85 via-black/40 to-transparent pointer-events-none"></div>
frontend/src/views/OrdersView.vue
+191
View File
@@ -0,0 +1,191 @@
<script setup>
// Front-end 订单 page — the signed-in user's own recharge orders. Same light look
// as the 日志 page: filter pills + search + numbered pagination. Unpaid/cancelled
// orders can be resumed via 继续支付.
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { api, jsonBody } from '../api'
import { openPayment } from '../payment'
import { refreshMe } from '../auth'
import Icon from '../components/Icon.vue'
const router = useRouter()
const items = ref([])
const total = ref(0)
const loading = ref(false)
const status = ref('') // '' | pending | paid | cancelled
const search = ref('')
const page = ref(1)
const pageSize = 20
const STATUS = { pending: '待支付', paid: '已支付', cancelled: '已取消' }
const METHOD = { wxpay: '微信', alipay: '支付宝' }
const statusPill = (s) => ({
paid: 'bg-emerald-50 text-emerald-700 ring-emerald-200',
pending: 'bg-amber-50 text-amber-700 ring-amber-200',
cancelled: 'bg-slate-100 text-slate-500 ring-slate-200',
}[s] || 'bg-slate-100 text-slate-500 ring-slate-200')
const statusDot = (s) => ({ paid: 'bg-emerald-500', pending: 'bg-amber-500', cancelled: 'bg-slate-400' }[s] || 'bg-slate-400')
function fmt(unix) {
if (!unix) return '—'
const d = new Date(unix * 1000)
const p = (n) => String(n).padStart(2, '0')
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
}
async function load() {
loading.value = true
const qs = new URLSearchParams({ limit: String(pageSize), offset: String((page.value - 1) * pageSize) })
if (status.value) qs.set('status', status.value)
const r = await api('/pay/orders?' + qs.toString())
loading.value = false
if (r.ok) {
items.value = r.data?.data || []
total.value = Number(r.data?.total ?? items.value.length)
}
}
onMounted(load)
const displayed = computed(() => {
const q = search.value.trim().toLowerCase()
if (!q) return items.value
return items.value.filter((o) =>
(o.id || '').toLowerCase().includes(q) ||
String(o.amount).includes(q) ||
(METHOD[o.pay_type] || '').includes(q))
})
const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize)))
const pageStart = computed(() => total.value === 0 ? 0 : (page.value - 1) * pageSize + 1)
const pageEnd = computed(() => Math.min(total.value, page.value * pageSize))
function setStatus(v) { status.value = v; page.value = 1; load() }
const pageNumbers = computed(() => {
const n = totalPages.value, cur = page.value
if (n <= 7) return Array.from({ length: n }, (_, i) => i + 1)
const want = new Set([1, n, cur - 1, cur, cur + 1])
if (cur <= 3) { want.add(2); want.add(3); want.add(4) }
if (cur >= n - 2) { want.add(n - 1); want.add(n - 2); want.add(n - 3) }
const list = [...want].filter((x) => x >= 1 && x <= n).sort((a, b) => a - b)
const out = []
for (let i = 0; i < list.length; i++) {
if (i > 0 && list[i] - list[i - 1] > 1) out.push(null)
out.push(list[i])
}
return out
})
function goPage(n) {
const t = Math.max(1, Math.min(totalPages.value, n))
if (t === page.value) return
page.value = t; load()
}
const continuingId = ref('')
async function cont(o) {
if (continuingId.value) return
continuingId.value = o.id
try {
const r = await api(`/pay/orders/${o.id}/continue`, jsonBody('POST', {}))
if (!r.ok) return
openPayment(r.data, { onPaid: () => { refreshMe(); router.push('/settings') } })
} finally {
continuingId.value = ''
}
}
</script>
<template>
<section class="space-y-5 log-page">
<div class="flex items-end justify-between flex-wrap gap-3">
<div>
<h1 class="text-2xl font-semibold tracking-tight text-slate-900">订单</h1>
<p class="text-sm text-slate-500 mt-1">{{ total }} 笔充值订单 · 未支付可继续支付</p>
</div>
<button @click="router.push('/settings')" class="btn-primary"><Icon name="spark" class="w-4 h-4" /> 去充值</button>
</div>
<!-- Filter bar -->
<div class="card p-3 flex items-center gap-3 flex-wrap">
<div class="flex items-center gap-1.5">
<button v-for="s in [['','全部'],['pending','待支付'],['paid','已支付'],['cancelled','已取消']]" :key="s[0]"
@click="setStatus(s[0])"
class="text-xs rounded-lg px-2.5 py-1.5 transition-colors"
:class="status === s[0] ? 'bg-slate-900 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'">{{ s[1] }}</button>
</div>
<div class="flex-1 min-w-[180px]">
<input v-model="search" class="field !py-1.5 text-xs" placeholder="搜索 订单号 / 金额 / 方式…" />
</div>
<button @click="load" class="btn-soft"><Icon name="refresh" class="w-3.5 h-3.5" /> 刷新</button>
</div>
<div v-if="loading && !items.length" class="card text-center text-sm text-slate-400 py-24">加载中…</div>
<div v-else-if="!total" class="card flex flex-col items-center gap-3 text-slate-400 py-24">
<span class="w-14 h-14 rounded-2xl bg-slate-100 grid place-items-center"><Icon name="log" class="w-6 h-6" /></span>
<span class="text-sm">还没有充值订单</span>
</div>
<div v-else class="card overflow-hidden !p-0">
<table class="w-full text-sm log-table">
<thead>
<tr class="text-[10px] uppercase tracking-[0.18em] text-slate-400 border-b border-slate-200">
<th class="text-left px-4 py-3 font-medium">订单号</th>
<th class="text-left px-3 py-3 font-medium">下单时间</th>
<th class="text-left px-3 py-3 font-medium">支付时间</th>
<th class="text-right px-3 py-3 font-medium">金额</th>
<th class="text-right px-3 py-3 font-medium">充值积分</th>
<th class="text-left px-3 py-3 font-medium">状态</th>
<th class="text-right px-4 py-3 font-medium">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="o in displayed" :key="o.id" class="log-row">
<td class="px-4 py-3 align-middle font-mono text-xs text-slate-700">{{ o.id }}</td>
<td class="px-3 py-3 align-middle text-xs text-slate-500 whitespace-nowrap">{{ fmt(o.created_at) }}</td>
<td class="px-3 py-3 align-middle text-xs text-slate-500 whitespace-nowrap">{{ fmt(o.paid_at) }}</td>
<td class="px-3 py-3 align-middle text-right tabular-nums text-slate-800 font-medium">¥{{ o.amount }}</td>
<td class="px-3 py-3 align-middle text-right tabular-nums text-violet-600 font-medium">{{ o.points }}</td>
<td class="px-3 py-3 align-middle">
<span class="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium ring-1 whitespace-nowrap" :class="statusPill(o.status)">
<span class="w-1.5 h-1.5 rounded-full" :class="statusDot(o.status)"></span>{{ STATUS[o.status] }}
<span class="text-slate-400">· {{ METHOD[o.pay_type] || o.pay_type }}</span>
</span>
</td>
<td class="px-4 py-3 align-middle text-right">
<button v-if="o.status === 'pending'" @click="cont(o)" :disabled="continuingId === o.id"
class="rounded-lg bg-violet-600 text-white hover:bg-violet-500 disabled:opacity-60 disabled:cursor-not-allowed px-3 py-1.5 text-xs font-medium transition-colors inline-flex items-center gap-1.5">
<span v-if="continuingId === o.id" class="w-3 h-3 rounded-full border-2 border-white/40 border-t-white animate-spin"></span>
{{ continuingId === o.id ? '处理中…' : '继续支付' }}
</button>
<span v-else class="text-xs text-slate-300">—</span>
</td>
</tr>
</tbody>
</table>
<div v-if="total && totalPages > 1"
class="flex items-center justify-between gap-3 border-t border-slate-200 px-5 py-3 text-xs text-slate-500">
<div><span class="tabular-nums text-slate-700">{{ pageStart }}–{{ pageEnd }}</span><span class="ml-1">/ {{ total }} 笔</span></div>
<div class="flex items-center gap-1">
<template v-for="(n, i) in pageNumbers" :key="i">
<span v-if="n === null" class="px-1 text-slate-300">…</span>
<button v-else @click="goPage(n)" class="pg" :class="page === n && 'pg-on'">{{ n }}</button>
</template>
</div>
</div>
</div>
</section>
</template>
<style scoped>
.log-table { border-collapse: separate; border-spacing: 0; }
.log-row td { border-bottom: 1px solid rgb(15 23 42 / 0.06); transition: background-color 0.15s ease, box-shadow 0.15s ease; }
.log-row:hover td { background: rgb(15 23 42 / 0.025); }
.log-row:hover td:first-child { box-shadow: inset 2px 0 0 rgb(124 58 237 / 0.6); }
.log-row:last-child td { border-bottom: none; }
.pg {
min-width: 1.75rem; padding: 0.3rem 0.55rem; font-size: 0.72rem; font-weight: 500; text-align: center;
border-radius: 0.45rem; color: rgb(71 85 105); background: rgb(241 245 249);
box-shadow: inset 0 0 0 1px rgb(15 23 42 / 0.06); transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.pg:hover:not(.pg-on) { background: rgb(226 232 240); color: rgb(15 23 42); }
.pg-on { background: rgb(15 23 42); color: white; box-shadow: none; }
</style>
frontend/src/views/PlaygroundView.vue
+31 -27
View File
@@ -360,7 +360,7 @@ let prevPending = 0
async function loadHistory() {
// Server-side filter: status IN (pending, success), newest 12 — exactly the
// rows the grid shows, in one query (no client over-fetch).
const r = await api('/logs?limit=10&statuses=pending,success')
const r = await api('/logs?limit=10&statuses=pending,success&source=user')
if (!r.ok) return
history.value = (r.data?.data || [])
.filter((e) => e.status === 'pending' || e.file)
@@ -432,20 +432,16 @@ function lastFrameDataUrl(url) {
})
}
// Click a generated VIDEO. For a 首尾帧 (frame) model, set the video's LAST frame
// as the 首帧 (first reference) — to continue the scene. Otherwise just zoom.
async function onVideoClick(item) {
if (refMode.value === 'frame' && maxRefs.value > 0 && item.url) {
const dataUrl = await lastFrameDataUrl(item.url)
if (dataUrl) {
const ref = { name: 'frame', dataUrl }
if (refImages.value.length === 0) refImages.value = [ref]
else refImages.value.splice(0, 1, ref) // replace the 首帧 slot
flash('已把视频末帧设为首帧')
return
}
}
lightbox.value = item
// Use a generated VIDEO's LAST frame as the 首帧 (first reference) — 首尾帧
// (frame) models only. Triggered by the small button; clicking the video zooms.
async function useVideoFrame(item) {
if (!item || !item.url) return
const dataUrl = await lastFrameDataUrl(item.url)
if (!dataUrl) { flash('截取末帧失败'); return }
const ref = { name: 'frame', dataUrl }
if (refImages.value.length === 0) refImages.value = [ref]
else refImages.value.splice(0, 1, ref) // replace the 首帧 slot
flash('已把视频末帧设为首帧')
}
function onKey(e) { if (e.key === 'Escape') lightbox.value = null }
@@ -639,26 +635,28 @@ onUnmounted(() => {
<!-- done: media + caption -->
<template v-if="item.status === 'done' && item.url">
<video v-if="item.kind === 'video'" :src="item.url" muted loop preload="metadata"
@click="onVideoClick(item)"
:title="refMode === 'frame' && maxRefs > 0 ? '点击:把末帧设为首帧' : '点击放大'"
class="absolute inset-0 w-full h-full object-cover cursor-pointer"
@click="lightbox = item" title="点击放大"
class="absolute inset-0 w-full h-full object-cover cursor-zoom-in"
@mouseenter="$event.target.play && $event.target.play()"
@mouseleave="$event.target.pause && $event.target.pause()" />
<img v-else :src="item.url" loading="lazy" @click="useAsRef(item)"
:title="maxRefs > 0 ? '点击作为参考图' : ''"
class="absolute inset-0 w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
:class="maxRefs > 0 ? 'cursor-pointer' : 'cursor-default'" />
<!-- background-image (not <img>) so Edge shows no 视觉搜索 overlay icon. -->
<div v-else @click="lightbox = item" title="点击放大"
:style="{ backgroundImage: `url(${item.url})` }"
class="absolute inset-0 w-full h-full bg-cover bg-center cursor-zoom-in transition-transform duration-300 group-hover:scale-105"></div>
<div class="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/85 via-black/30 to-transparent pointer-events-none"></div>
<!-- hover action: just zoom (clicking the image itself = 参考图) -->
<!-- hover action: 上参考图. Image → use as reference; video → 末帧设为首帧
(only shown when the model supports 首尾帧). Clicking the media zooms. -->
<div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
<button @click.stop="lightbox = item" title="放大"
<button v-if="item.kind === 'video' ? (refMode === 'frame' && maxRefs > 0) : (maxRefs > 0)"
@click.stop="item.kind === 'video' ? useVideoFrame(item) : useAsRef(item)"
:title="item.kind === 'video' ? '把末帧设为首帧' : '作为参考图'"
class="w-7 h-7 rounded-lg bg-black/50 ring-1 ring-white/10 hover:bg-black/70 text-white grid place-items-center">
<Icon name="open" class="w-3.5 h-3.5" />
<Icon name="plus" class="w-3.5 h-3.5" />
</button>
</div>
<div class="absolute inset-x-0 bottom-0 p-2.5 pointer-events-none">
<div class="text-[11px] leading-tight text-white font-medium line-clamp-2" :title="item.prompt">{{ item.prompt }}</div>
<div class="text-[9px] text-white/55 mt-0.5 font-mono truncate">{{ item.model }}<span v-if="item.elapsed_ms"> · {{ (item.elapsed_ms / 1000).toFixed(1) }}s</span></div>
<div class="pg-cap text-[11px] leading-tight font-medium line-clamp-2" :title="item.prompt">{{ item.prompt }}</div>
<div class="pg-cap-sub text-[9px] mt-0.5 font-mono truncate">{{ item.model }}<span v-if="item.elapsed_ms"> · {{ (item.elapsed_ms / 1000).toFixed(1) }}s</span></div>
</div>
</template>
<!-- pending / running -->
@@ -705,4 +703,10 @@ onUnmounted(() => {
<style scoped>
.fade-enter-active, .fade-leave-active { transition: opacity 0.15s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
/* Card captions sit on a dark gradient — keep them white even in light theme.
The global `.theme-text` remap would otherwise darken them (it turns
over-image whites dark for the marketing pages), making them unreadable here. */
.pg-cap { color: #fff !important; }
.pg-cap-sub { color: rgb(255 255 255 / 0.62) !important; }
</style>
frontend/src/views/SettingsView.vue
+98 -2
View File
@@ -3,6 +3,7 @@ import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { auth, refreshMe, logout as authLogout } from '../auth'
import { api, jsonBody } from '../api'
import { openPayment } from '../payment'
import Icon from '../components/Icon.vue'
import { points, pointsLabel } from '../credits'
import { site } from '../site'
@@ -174,6 +175,41 @@ function toast(m) {
clearTimeout(toastTimer)
toastTimer = setTimeout(() => (toastMsg.value = ''), 2200)
}
// ---- Recharge (易支付) ----
const payCfg = ref({ enabled: false, methods: [], min_amount: 0, points_ratio: 100 })
const AMOUNTS = [10, 20, 50, 100]
const picked = ref(10) // a preset number, or 'custom'
const customAmount = ref('')
const payMethod = ref('')
const rechargeTotal = computed(() => Number(auth.user?.recharge_total || 0))
const methodName = (m) => ({ wxpay: '微信', alipay: '支付宝' }[m] || m)
const finalAmount = computed(() => Number(picked.value === 'custom' ? customAmount.value : picked.value) || 0)
const pointsPreview = computed(() => Math.round(finalAmount.value * (payCfg.value.points_ratio || 0)))
async function loadPayCfg() {
const r = await api('/pay/config')
if (r.ok && r.data) {
payCfg.value = r.data
if (r.data.methods?.length && !payMethod.value) payMethod.value = r.data.methods[0]
}
}
onMounted(loadPayCfg)
const recharging = ref(false)
async function recharge() {
if (recharging.value) return
const amt = finalAmount.value
if (!amt || amt <= 0) { toast('请输入有效金额'); return }
if (amt < payCfg.value.min_amount) { toast(`最低充值 ${payCfg.value.min_amount} 元`); return }
if (!payMethod.value) { toast('请选择支付方式'); return }
recharging.value = true
try {
const r = await api('/pay/recharge', jsonBody('POST', { amount: amt, method: payMethod.value }))
if (!r.ok) { toast(r.data?.detail || '下单失败'); return }
openPayment(r.data, { onPaid: refreshMe })
} finally {
recharging.value = false
}
}
</script>
<template>
@@ -214,6 +250,10 @@ function toast(m) {
<div class="text-[11px] text-white/40 uppercase tracking-wider mb-1">积分余额</div>
<div class="text-amber-300 font-semibold tabular-nums">{{ pointsLabel(balance) }}</div>
</div>
<div>
<div class="text-[11px] text-white/40 uppercase tracking-wider mb-1">累计充值</div>
<div class="text-emerald-300 font-semibold tabular-nums">¥{{ rechargeTotal }}</div>
</div>
<div>
<div class="text-[11px] text-white/40 uppercase tracking-wider mb-1">并发上限</div>
<div class="text-white/90 truncate" :title="concurrencyLabel">{{ concurrencyLabel }}</div>
@@ -302,9 +342,9 @@ function toast(m) {
<div v-for="(d, i) in last7" :key="d.ds"
class="flex-1 h-12 rounded-xl ring-1 transition-all flex flex-col items-center justify-center"
:class="d.lit
? 'bg-sky-400/25 ring-sky-300/50 text-sky-100'
? 'bg-sky-500 ring-sky-400 text-white'
: d.isToday
? (checkedToday ? 'bg-sky-400/25 ring-sky-300/50 text-sky-100' : 'bg-white/[0.05] ring-white/15 text-white/60')
? (checkedToday ? 'bg-sky-500 ring-sky-400 text-white' : 'bg-white/[0.05] ring-white/15 text-white/60')
: 'bg-white/[0.02] ring-white/[0.06] text-white/30'">
<Icon v-if="d.lit || (d.isToday && checkedToday)" name="spark" class="w-3 h-3" />
<span v-else class="text-[10px] uppercase">{{ d.isToday ? '今' : i + 1 }}</span>
@@ -317,6 +357,35 @@ function toast(m) {
</button>
</section>
<!-- RECHARGE (易支付) — hidden unless the admin enabled 充值 -->
<section v-if="payCfg.enabled" class="relative card p-7 md:p-8 overflow-hidden">
<div class="inline-grid w-10 h-10 rounded-xl bg-emerald-500/15 ring-1 ring-emerald-400/30 grid place-items-center text-emerald-300">
<Icon name="spark" class="w-4 h-4" />
</div>
<h2 class="text-xl font-bold mt-4">积分充值</h2>
<p class="text-sm text-white/50 mt-2">累计充值 <strong class="text-emerald-300">¥{{ rechargeTotal }}</strong> · {{ payCfg.points_ratio }} 积分 / 元</p>
<div class="grid grid-cols-3 sm:grid-cols-5 gap-2 mt-5">
<button v-for="a in AMOUNTS" :key="a" @click="picked = a" class="amt" :class="picked === a && 'amt-on'">{{ a }}元</button>
<button @click="picked = 'custom'" class="amt" :class="picked === 'custom' && 'amt-on'">自定义</button>
</div>
<input v-if="picked === 'custom'" v-model="customAmount" type="number" min="1" step="1" placeholder="输入金额(元)"
class="amt-input mt-3 w-full px-4 py-2.5 text-sm" />
<div class="flex gap-2 mt-4">
<button v-for="m in payCfg.methods" :key="m" @click="payMethod = m" class="amt flex-1" :class="payMethod === m && 'amt-on'">{{ methodName(m) }}</button>
</div>
<div class="mt-5 flex items-center justify-between gap-3">
<span class="text-sm text-white/60">到账 <strong class="text-violet-300 text-base tabular-nums">{{ pointsPreview }}</strong> 积分</span>
<button @click="recharge" :disabled="recharging"
class="rounded-xl bg-white text-black hover:bg-white/90 disabled:opacity-60 disabled:cursor-not-allowed px-6 py-2.5 text-sm font-semibold transition-colors inline-flex items-center gap-2">
<span v-if="recharging" class="w-3.5 h-3.5 rounded-full border-2 border-black/30 border-t-black animate-spin"></span>
{{ recharging ? '下单中…' : '立即充值' }}
</button>
</div>
</section>
<!-- CDK REDEEM — hidden when the admin turns the 兑换码 switch off -->
<section v-if="site.cdkRedeemEnabled" class="relative card p-7 md:p-8 overflow-hidden">
<div class="inline-grid w-10 h-10 rounded-xl bg-emerald-500/15 ring-1 ring-emerald-400/30 grid place-items-center text-emerald-300">
@@ -398,4 +467,31 @@ function toast(m) {
<style scoped>
.fade-enter-active, .fade-leave-active { transition: opacity 0.15s ease, transform 0.15s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; transform: translateY(8px); }
/* Recharge amount / method buttons — theme-aware (clean in light AND dark).
Selected uses the inverted solid-button color, not a harsh violet. */
.amt {
border-radius: 0.6rem;
padding: 0.6rem 0;
font-size: 0.875rem;
text-align: center;
color: var(--fg-2);
background: var(--surface-2);
box-shadow: inset 0 0 0 1px var(--hairline);
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.amt:hover { color: var(--fg); background: var(--hover); }
.amt-on {
background: var(--btn-solid-bg);
color: var(--btn-solid-fg);
box-shadow: none;
}
.amt-input {
border-radius: 0.7rem;
color: var(--fg);
background: var(--surface-2);
box-shadow: inset 0 0 0 1px var(--hairline);
outline: none;
}
.amt-input:focus { box-shadow: inset 0 0 0 1px var(--fg-3); }
</style>
frontend/src/views/UserLogsTableView.vue
+3 -1
View File
@@ -209,7 +209,9 @@ const params = (e) => {
<tbody>
<tr v-for="e in displayed" :key="e.id" class="log-row">
<td class="px-3 py-3 align-middle text-center">
<button v-if="e.status === 'success' && e.file" @click="lightbox = e"
<!-- API(v1) videos are no-store: file is an external provider URL
(not a RustFS path), so it can't be previewed in-browser — show —. -->
<button v-if="e.status === 'success' && e.file && !e.file.startsWith('http')" @click="lightbox = e"
class="block w-11 h-11 mx-auto rounded-lg overflow-hidden ring-1 ring-slate-200 hover:ring-fuchsia-300 transition-all">
<img v-if="e.kind !== 'video'" :src="generatedUrl(e.file)" loading="lazy" class="w-full h-full object-cover" />
<video v-else :src="generatedUrl(e.file)" muted preload="metadata" class="w-full h-full object-cover" />
frontend/src/views/UserLogsView.vue
+4 -2
View File
@@ -30,6 +30,7 @@ async function load() {
offset: String((page.value - 1) * pageSize),
status: 'success',
has_file: '1',
source: 'user', // 创作记录 = 画图台作品;排除 API(v1,无存储文件)+ 测试
})
if (kindFilter.value) qs.set('kind', kindFilter.value)
const r = await api('/logs?' + qs.toString())
@@ -160,8 +161,9 @@ onUnmounted(() => {
class="absolute inset-0 w-full h-full object-cover"
@mouseenter="$event.target.play && $event.target.play()"
@mouseleave="$event.target.pause && $event.target.pause()" />
<img v-else :src="generatedUrl(e.file)" loading="lazy"
class="absolute inset-0 w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" />
<!-- background-image (not <img>) so Edge shows no 视觉搜索 overlay icon. -->
<div v-else :style="{ backgroundImage: `url(${generatedUrl(e.file)})` }"
class="absolute inset-0 w-full h-full bg-cover bg-center transition-transform duration-300 group-hover:scale-105"></div>
<div class="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/85 via-black/40 to-transparent pointer-events-none"></div>
</template>
<!-- pending / failed placeholders -->
frontend/src/views/UsersView.vue
+6
View File
@@ -272,6 +272,7 @@ async function quickCredits(u, delta) {
<col class="w-20" /> <!-- role -->
<col class="w-16" /> <!-- status switch -->
<col class="w-24" /> <!-- credits -->
<col class="w-24" /> <!-- recharge total -->
<col class="w-20" /> <!-- generation count -->
<col class="w-28" /> <!-- registered -->
<col class="w-28" /> <!-- last login -->
@@ -291,6 +292,7 @@ async function quickCredits(u, delta) {
<th class="text-left px-3 py-3 font-medium">角色</th>
<th class="text-left px-3 py-3 font-medium">状态</th>
<th class="text-right px-3 py-3 font-medium">积分</th>
<th class="text-right px-3 py-3 font-medium">累计充值</th>
<th class="text-right px-3 py-3 font-medium">生图次数</th>
<th class="text-left px-3 py-3 font-medium">注册时间</th>
<th class="text-left px-3 py-3 font-medium">最近登录</th>
@@ -340,6 +342,10 @@ async function quickCredits(u, delta) {
<td class="px-3 py-3.5 align-middle text-right tabular-nums text-white/85 whitespace-nowrap">
{{ points(u.credits).toLocaleString('en-US') }}
</td>
<td class="px-3 py-3.5 align-middle text-right tabular-nums whitespace-nowrap"
:class="u.recharge_total > 0 ? 'text-emerald-300' : 'text-white/25'">
¥{{ (u.recharge_total || 0).toLocaleString('en-US') }}
</td>
<td class="px-3 py-3.5 align-middle text-right tabular-nums whitespace-nowrap"
:class="u.generation_count > 0 ? 'text-white/85' : 'text-white/25'">
{{ (u.generation_count || 0).toLocaleString('en-US') }}