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/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') }}