feat: 更新商城前后端代码
This commit is contained in:
@@ -1,76 +1,103 @@
|
||||
<template>
|
||||
<div class="chat-panel-section">
|
||||
<div class="chat-panel-header">
|
||||
<h3>用户消息</h3>
|
||||
<button class="refresh-btn" @click="load" :disabled="loading">刷新</button>
|
||||
<div class="mt-8 max-md:mt-4">
|
||||
<div class="flex items-center gap-3 mb-3.5">
|
||||
<h3 class="text-lg font-bold text-apptext">用户消息</h3>
|
||||
<button
|
||||
class="px-3.5 py-1.5 rounded border border-white/35 bg-white/70 text-[13px] cursor-pointer text-apptext disabled:opacity-50"
|
||||
style="font-family: var(--font-serif);"
|
||||
@click="load" :disabled="loading"
|
||||
>刷新</button>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="chat-empty">加载中…</div>
|
||||
<div v-else-if="Object.keys(conversations).length === 0" class="chat-empty">暂无用户消息</div>
|
||||
<div v-if="loading" class="py-6 text-center text-muted text-sm">加载中…</div>
|
||||
<div v-else-if="Object.keys(conversations).length === 0" class="py-6 text-center text-muted text-sm">暂无用户消息</div>
|
||||
|
||||
<div v-else class="chat-layout">
|
||||
<!-- Left: conversation list -->
|
||||
<div class="conv-list">
|
||||
<div class="conv-list-title">对话列表</div>
|
||||
<div v-else class="grid h-[520px] rounded-xl border border-white/35 overflow-hidden bg-white/40 shadow-[0_8px_24px_rgba(33,33,40,0.08)] max-md:grid-cols-1 max-md:grid-rows-[auto,1fr]" style="grid-template-columns: 200px 1fr;">
|
||||
<!-- Conversation list -->
|
||||
<div class="border-r border-white/35 overflow-y-auto bg-white/65 flex flex-col max-md:border-r-0 max-md:border-b max-md:overflow-x-auto max-md:overflow-y-hidden max-md:flex-row max-md:max-h-[72px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
|
||||
<div class="px-3.5 py-3 pb-2 text-[11px] font-bold tracking-[0.8px] uppercase text-muted border-b border-white/35 flex-shrink-0 max-md:hidden">对话列表</div>
|
||||
<div
|
||||
v-for="(msgs, account) in conversations"
|
||||
:key="account"
|
||||
:class="['conv-item', selectedAccount === account ? 'conv-item--active' : '']"
|
||||
class="flex items-center gap-2.5 px-3 py-2.5 cursor-pointer border-b border-white/50 last:border-b-0 transition-colors hover:bg-[rgba(180,154,203,0.08)] max-md:flex-col max-md:flex-shrink-0 max-md:items-center max-md:min-w-[70px] max-md:max-w-20 max-md:px-1.5 max-md:py-2 max-md:border-b-0 max-md:border-r max-md:border-white/35 max-md:text-center"
|
||||
:class="selectedAccount === account ? '!bg-[rgba(180,154,203,0.14)] border-l-[3px] border-accent pl-[9px] max-md:border-l-0 max-md:border-b-[2px] max-md:pl-1.5' : ''"
|
||||
@click="selectConv(account, msgs)"
|
||||
>
|
||||
<div class="conv-avatar">{{ (getDisplayName(msgs) || account).slice(0, 1).toUpperCase() }}</div>
|
||||
<div class="conv-info">
|
||||
<div class="conv-name">{{ getDisplayName(msgs) || account }}</div>
|
||||
<div class="conv-preview">{{ latestMsg(msgs) }}</div>
|
||||
<div class="w-[34px] h-[34px] rounded-full bg-[#e8e8e8] text-[#444] text-sm font-bold flex items-center justify-center flex-shrink-0 max-md:w-7 max-md:h-7 max-md:text-xs">
|
||||
{{ (getDisplayName(msgs) || account).slice(0, 1).toUpperCase() }}
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 max-md:flex max-md:flex-col max-md:items-center">
|
||||
<div class="text-[13px] font-semibold text-apptext whitespace-nowrap overflow-hidden text-ellipsis max-md:text-[11px] max-md:max-w-16">{{ getDisplayName(msgs) || account }}</div>
|
||||
<div class="text-[11px] text-muted mt-0.5 whitespace-nowrap overflow-hidden text-ellipsis max-md:hidden">{{ latestMsg(msgs) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: message thread -->
|
||||
<div class="conv-thread" v-if="selectedAccount">
|
||||
<div class="thread-top">
|
||||
<div class="thread-user">
|
||||
<div class="thread-avatar">{{ (displayName || selectedAccount).slice(0, 1).toUpperCase() }}</div>
|
||||
<div class="thread-user-info">
|
||||
<span class="thread-name">{{ displayName || selectedAccount }}</span>
|
||||
<span class="thread-account">{{ selectedAccount }}</span>
|
||||
<!-- Thread -->
|
||||
<div v-if="selectedAccount" class="flex flex-col overflow-hidden bg-white/30">
|
||||
<!-- Thread top -->
|
||||
<div class="flex items-center justify-between px-4 py-2.5 border-b border-white/35 bg-white/75 flex-shrink-0">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="w-8 h-8 rounded-full bg-[#e8e8e8] text-[#444] text-[13px] font-bold flex items-center justify-center flex-shrink-0">
|
||||
{{ (displayName || selectedAccount).slice(0, 1).toUpperCase() }}
|
||||
</div>
|
||||
<div class="flex flex-col gap-0">
|
||||
<span class="text-sm font-bold text-apptext leading-[1.2]">{{ displayName || selectedAccount }}</span>
|
||||
<span class="text-[11px] text-muted">{{ selectedAccount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="clear-btn" @click="clearConv" :disabled="clearing">清除记录</button>
|
||||
<button
|
||||
class="px-3 py-1.5 rounded border border-[rgba(210,70,70,0.3)] bg-[rgba(210,70,70,0.06)] text-[#c04040] text-xs cursor-pointer whitespace-nowrap hover:bg-[rgba(210,70,70,0.14)] transition disabled:opacity-50"
|
||||
style="font-family: var(--font-serif);"
|
||||
@click="clearConv" :disabled="clearing"
|
||||
>清除记录</button>
|
||||
</div>
|
||||
|
||||
<div class="thread-messages" ref="threadEl">
|
||||
<!-- Messages -->
|
||||
<div class="flex-1 overflow-y-auto px-4 py-4 flex flex-col gap-3 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" ref="threadEl">
|
||||
<div
|
||||
v-for="msg in currentMessages"
|
||||
:key="msg.id"
|
||||
:class="['msg-row', msg.fromAdmin ? 'msg-row--admin' : 'msg-row--user']"
|
||||
class="flex"
|
||||
:class="msg.fromAdmin ? 'justify-end' : 'justify-start'"
|
||||
>
|
||||
<div class="msg-bubble">
|
||||
<div class="msg-meta">
|
||||
<span class="msg-from">{{ msg.fromAdmin ? '客服' : (msg.accountName || msg.accountId) }}</span>
|
||||
<span class="msg-time">{{ formatTime(msg.sentAt) }}</span>
|
||||
<div class="flex flex-col gap-0.5 max-w-[72%]" :class="msg.fromAdmin ? 'items-end' : ''">
|
||||
<div class="flex gap-1.5 items-baseline px-0.5">
|
||||
<span class="text-[11px] font-semibold text-muted">{{ msg.fromAdmin ? '客服' : (msg.accountName || msg.accountId) }}</span>
|
||||
<span class="text-[10px] text-muted opacity-75">{{ formatTime(msg.sentAt) }}</span>
|
||||
</div>
|
||||
<div class="msg-content">{{ msg.content }}</div>
|
||||
<div
|
||||
class="px-3.5 py-2.5 rounded-xl text-sm leading-[1.55] whitespace-pre-wrap break-words"
|
||||
:class="msg.fromAdmin
|
||||
? 'bg-[#2c2b2d] text-white rounded-br-[4px]'
|
||||
: 'bg-white/85 text-apptext border border-white/35 rounded-bl-[4px]'"
|
||||
>{{ msg.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="reply-row" @submit.prevent="sendReply">
|
||||
<!-- Reply input -->
|
||||
<form class="flex gap-2 px-3.5 py-2.5 border-t border-white/35 bg-white/70 flex-shrink-0" @submit.prevent="sendReply">
|
||||
<input
|
||||
v-model="replyText"
|
||||
class="reply-input"
|
||||
class="flex-1 px-3 py-2 rounded-lg border border-white/35 text-sm bg-white/90 text-apptext outline-none focus:border-accent transition"
|
||||
style="font-family: var(--font-serif);"
|
||||
placeholder="输入回复内容…"
|
||||
maxlength="500"
|
||||
:disabled="replying"
|
||||
/>
|
||||
<button class="reply-send-btn" type="submit" :disabled="replying || !replyText.trim()">发送</button>
|
||||
<button
|
||||
class="px-[18px] py-2 rounded-lg bg-[#2c2b2d] text-white border-none cursor-pointer text-sm font-semibold disabled:opacity-45 disabled:cursor-default hover:not-disabled:opacity-80 transition"
|
||||
style="font-family: var(--font-serif);"
|
||||
type="submit" :disabled="replying || !replyText.trim()"
|
||||
>发送</button>
|
||||
</form>
|
||||
<p v-if="replyError" class="reply-error">{{ replyError }}</p>
|
||||
<p v-if="replyError" class="text-xs text-[#d64848] px-3.5 pb-2 text-right">{{ replyError }}</p>
|
||||
</div>
|
||||
|
||||
<div class="conv-thread conv-thread--empty" v-else>
|
||||
<div class="empty-hint">
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="opacity:0.3"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||||
<div v-else class="flex items-center justify-center text-muted text-sm bg-white/30">
|
||||
<div class="flex flex-col items-center gap-2.5">
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="opacity-30"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||||
<p>选择左侧对话</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -80,16 +107,9 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, nextTick, onMounted, onUnmounted } from 'vue'
|
||||
import {
|
||||
fetchAdminAllConversations,
|
||||
fetchAdminConversation,
|
||||
adminSendChatReply,
|
||||
adminClearConversation
|
||||
} from '../../shared/api.js'
|
||||
import { fetchAdminAllConversations, fetchAdminConversation, adminSendChatReply, adminClearConversation } from '../../shared/api.js'
|
||||
|
||||
const props = defineProps({
|
||||
adminToken: { type: String, default: '' }
|
||||
})
|
||||
const props = defineProps({ adminToken: { type: String, default: '' } })
|
||||
|
||||
const conversations = ref({})
|
||||
const loading = ref(false)
|
||||
@@ -106,8 +126,7 @@ let pollTimer = null
|
||||
|
||||
const formatTime = (iso) => {
|
||||
if (!iso) return ''
|
||||
const d = new Date(iso)
|
||||
return d.toLocaleString('zh-CN', { hour12: false })
|
||||
return new Date(iso).toLocaleString('zh-CN', { hour12: false })
|
||||
}
|
||||
|
||||
const getDisplayName = (msgs) => {
|
||||
@@ -125,9 +144,7 @@ const latestMsg = (msgs) => {
|
||||
|
||||
const scrollThreadBottom = async () => {
|
||||
await nextTick()
|
||||
if (threadEl.value) {
|
||||
threadEl.value.scrollTop = threadEl.value.scrollHeight
|
||||
}
|
||||
if (threadEl.value) threadEl.value.scrollTop = threadEl.value.scrollHeight
|
||||
}
|
||||
|
||||
const load = async () => {
|
||||
@@ -135,14 +152,11 @@ const load = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
conversations.value = await fetchAdminAllConversations(props.adminToken)
|
||||
// 若当前已选中某个会话，则刷新其消息列表
|
||||
if (selectedAccount.value) {
|
||||
currentMessages.value = conversations.value[selectedAccount.value] || []
|
||||
await scrollThreadBottom()
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
} finally { loading.value = false }
|
||||
}
|
||||
|
||||
const selectConv = async (account, msgs) => {
|
||||
@@ -169,9 +183,7 @@ const sendReply = async () => {
|
||||
}
|
||||
} catch (err) {
|
||||
replyError.value = err?.response?.data?.error || '发送失败'
|
||||
} finally {
|
||||
replying.value = false
|
||||
}
|
||||
} finally { replying.value = false }
|
||||
}
|
||||
|
||||
const clearConv = async () => {
|
||||
@@ -183,423 +195,10 @@ const clearConv = async () => {
|
||||
delete conversations.value[selectedAccount.value]
|
||||
selectedAccount.value = ''
|
||||
currentMessages.value = []
|
||||
} catch {
|
||||
alert('清除失败，请重试')
|
||||
} finally {
|
||||
clearing.value = false
|
||||
}
|
||||
} catch { alert('清除失败，请重试') }
|
||||
finally { clearing.value = false }
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
load()
|
||||
pollTimer = setInterval(load, 8000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (pollTimer) clearInterval(pollTimer)
|
||||
})
|
||||
onMounted(() => { load(); pollTimer = setInterval(load, 8000) })
|
||||
onUnmounted(() => { if (pollTimer) clearInterval(pollTimer) })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chat-panel-section {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.chat-panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.chat-panel-header h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
padding: 5px 14px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255,255,255,0.7);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.chat-empty {
|
||||
padding: 24px 0;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.chat-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr;
|
||||
height: 520px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--line);
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
box-shadow: 0 8px 24px rgba(33, 33, 40, 0.08);
|
||||
}
|
||||
|
||||
/* Conversation list */
|
||||
.conv-list {
|
||||
border-right: 1px solid var(--line);
|
||||
overflow-y: auto;
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.conv-list-title {
|
||||
padding: 12px 14px 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.8px;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
border-bottom: 1px solid var(--line);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.conv-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.5);
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.conv-item:hover {
|
||||
background: rgba(180, 154, 203, 0.08);
|
||||
}
|
||||
|
||||
.conv-item--active {
|
||||
background: rgba(180, 154, 203, 0.14);
|
||||
border-left: 3px solid var(--accent);
|
||||
padding-left: 9px;
|
||||
}
|
||||
|
||||
.conv-avatar {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
background: #e8e8e8;
|
||||
color: #444;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.conv-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.conv-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.conv-preview {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
margin-top: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Message thread */
|
||||
.conv-thread {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.conv-thread--empty {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.thread-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.thread-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.thread-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: #e8e8e8;
|
||||
color: #444;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.thread-user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.thread-name {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.thread-account {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
padding: 5px 12px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(210, 70, 70, 0.3);
|
||||
background: rgba(210, 70, 70, 0.06);
|
||||
color: #c04040;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: background 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.clear-btn:hover:not(:disabled) {
|
||||
background: rgba(210, 70, 70, 0.14);
|
||||
}
|
||||
|
||||
.thread-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.msg-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.msg-row--user {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.msg-row--admin {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.msg-bubble {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
max-width: 72%;
|
||||
}
|
||||
|
||||
.msg-row--admin .msg-bubble {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.msg-meta {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: baseline;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.msg-from {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.msg-time {
|
||||
font-size: 10px;
|
||||
color: var(--muted);
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.msg-content {
|
||||
padding: 9px 13px;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.msg-row--user .msg-content {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--line);
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.msg-row--admin .msg-content {
|
||||
background: #2c2b2d;
|
||||
color: #fff;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.reply-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
border-top: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.reply-input {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
border-radius: 7px;
|
||||
border: 1px solid var(--line);
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: var(--text);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.reply-input:focus {
|
||||
border-color: var(--accent, #7c6af0);
|
||||
}
|
||||
|
||||
.reply-send-btn {
|
||||
padding: 8px 18px;
|
||||
border-radius: 7px;
|
||||
background: #2c2b2d;
|
||||
color: #fff;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
font-weight: 600;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.reply-send-btn:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.reply-send-btn:not(:disabled):hover {
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
.reply-error {
|
||||
font-size: 12px;
|
||||
color: #d64848;
|
||||
padding: 0 14px 8px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.chat-panel-section {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.chat-layout {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
height: 520px;
|
||||
}
|
||||
|
||||
.conv-list {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--line);
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
flex-direction: row;
|
||||
max-height: 72px;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.conv-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.conv-list-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.conv-item {
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 70px;
|
||||
max-width: 80px;
|
||||
padding: 8px 6px;
|
||||
border-bottom: none;
|
||||
border-right: 1px solid var(--line);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.conv-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.conv-name {
|
||||
font-size: 11px;
|
||||
max-width: 64px;
|
||||
}
|
||||
|
||||
.conv-preview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.conv-avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,25 +1,30 @@
|
||||
<template>
|
||||
<div class="maintenance-row">
|
||||
<div class="maintenance-left">
|
||||
<span class="maintenance-label">站点维护模式</span>
|
||||
<div class="flex items-center gap-4 flex-wrap mb-4 px-[18px] py-3.5 bg-white/50 border border-white/35 rounded-lg max-md:flex-col max-md:items-stretch max-md:px-3 max-md:py-2.5 max-md:gap-2.5">
|
||||
<!-- Left: label + toggle -->
|
||||
<div class="flex items-center gap-3 flex-shrink-0">
|
||||
<span class="text-[15px] font-semibold text-apptext whitespace-nowrap">站点维护模式</span>
|
||||
<button
|
||||
:class="['maintenance-toggle', enabled ? 'toggle-on' : 'toggle-off']"
|
||||
class="px-4 py-1.5 rounded-full text-sm font-semibold border-none cursor-pointer transition"
|
||||
:class="enabled
|
||||
? 'bg-[rgba(201,90,106,0.15)] text-[#c95a6a] hover:bg-[rgba(201,90,106,0.25)]'
|
||||
: 'bg-[rgba(100,185,140,0.15)] text-[#3a9a68] hover:bg-[rgba(100,185,140,0.25)]'"
|
||||
style="font-family: var(--font-serif);"
|
||||
type="button"
|
||||
@click="$emit('update:enabled', !enabled)"
|
||||
>
|
||||
{{ enabled ? '维护中' : '正常运行' }}
|
||||
</button>
|
||||
>{{ enabled ? '维护中' : '正常运行' }}</button>
|
||||
<span
|
||||
v-if="message"
|
||||
class="msg-tag"
|
||||
:class="{ error: message.includes('失败') }"
|
||||
class="text-[15px] px-2.5 py-1 rounded whitespace-nowrap"
|
||||
:class="message.includes('失败') ? 'text-[#c95a6a] bg-[rgba(201,90,106,0.08)]' : 'text-accent2 bg-[rgba(145,168,208,0.1)]'"
|
||||
>{{ message }}</span>
|
||||
</div>
|
||||
<div class="maintenance-right">
|
||||
<!-- Right: reason input + save -->
|
||||
<div class="flex items-center gap-2.5 flex-1 min-w-0 max-md:flex-nowrap">
|
||||
<input
|
||||
:value="reason"
|
||||
@input="$emit('update:reason', $event.target.value)"
|
||||
class="maintenance-reason-input"
|
||||
class="flex-1 min-w-0 px-3 py-2 rounded-lg border border-white/35 bg-white/70 text-[15px] outline-none focus:border-accent transition max-md:text-sm max-md:py-1.5"
|
||||
style="font-family: var(--font-serif);"
|
||||
placeholder="维护原因（选填）"
|
||||
/>
|
||||
<button class="ghost" type="button" @click="$emit('save')">保存</button>
|
||||
@@ -33,123 +38,5 @@ defineProps({
|
||||
reason: { type: String, default: '' },
|
||||
message: { type: String, default: '' }
|
||||
})
|
||||
|
||||
defineEmits(['update:enabled', 'update:reason', 'save'])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.maintenance-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 16px;
|
||||
padding: 14px 18px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.maintenance-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.maintenance-label {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.maintenance-toggle {
|
||||
padding: 6px 16px;
|
||||
border-radius: 999px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease, transform 0.15s ease;
|
||||
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
|
||||
}
|
||||
|
||||
.toggle-on {
|
||||
background: rgba(201, 90, 106, 0.15);
|
||||
color: #c95a6a;
|
||||
}
|
||||
|
||||
.toggle-on:hover {
|
||||
background: rgba(201, 90, 106, 0.25);
|
||||
}
|
||||
|
||||
.toggle-off {
|
||||
background: rgba(100, 185, 140, 0.15);
|
||||
color: #3a9a68;
|
||||
}
|
||||
|
||||
.toggle-off:hover {
|
||||
background: rgba(100, 185, 140, 0.25);
|
||||
}
|
||||
|
||||
.maintenance-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.maintenance-reason-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.maintenance-reason-input:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.msg-tag {
|
||||
font-size: 15px;
|
||||
color: var(--accent-2);
|
||||
padding: 4px 10px;
|
||||
border-radius: 5px;
|
||||
background: rgba(145, 168, 208, 0.1);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.msg-tag.error {
|
||||
color: #c95a6a;
|
||||
background: rgba(201, 90, 106, 0.08);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.maintenance-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 10px 12px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.maintenance-right {
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.maintenance-reason-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 14px;
|
||||
padding: 7px 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,81 +1,94 @@
|
||||
<template>
|
||||
<div class="orders-section">
|
||||
<div class="orders-header">
|
||||
<h3>下单记录</h3>
|
||||
<div class="mt-7 max-md:mt-3">
|
||||
<div class="flex items-baseline gap-3 mb-3">
|
||||
<h3 class="text-lg font-bold text-apptext">下单记录</h3>
|
||||
<p class="tag">共 {{ orders.length }} 条订单（含未登录用户）</p>
|
||||
</div>
|
||||
|
||||
<div v-if="orders.length === 0" class="empty-tip tag">暂无订单记录</div>
|
||||
<div v-if="orders.length === 0" class="py-5 text-center text-muted text-sm">暂无订单记录</div>
|
||||
|
||||
<div v-else class="table-wrap">
|
||||
<!-- Pagination toolbar (top) -->
|
||||
<div class="pagination-bar" v-if="totalPages > 1">
|
||||
<button class="page-btn" :disabled="currentPage === 1" @click="currentPage--">‹</button>
|
||||
<span class="page-info">第 {{ currentPage }} / {{ totalPages }} 页（共 {{ orders.length }} 条）</span>
|
||||
<button class="page-btn" :disabled="currentPage === totalPages" @click="currentPage++">›</button>
|
||||
<div v-else class="rounded-lg overflow-hidden border border-white/35">
|
||||
<!-- Pagination -->
|
||||
<div v-if="totalPages > 1" class="flex items-center gap-3 px-3.5 py-2.5 border-b border-white/35 bg-white/70 max-md:gap-2 max-md:px-2.5">
|
||||
<button
|
||||
class="px-3 py-1 rounded border border-white/35 bg-white/80 text-base cursor-pointer text-apptext disabled:opacity-35 disabled:cursor-default hover:not-disabled:bg-[rgba(124,106,240,0.1)] transition leading-none"
|
||||
style="font-family: var(--font-serif);"
|
||||
:disabled="currentPage === 1" @click="currentPage--"
|
||||
>‹</button>
|
||||
<span class="text-[13px] text-muted max-md:text-xs">第 {{ currentPage }} / {{ totalPages }} 页（共 {{ orders.length }} 条）</span>
|
||||
<button
|
||||
class="px-3 py-1 rounded border border-white/35 bg-white/80 text-base cursor-pointer text-apptext disabled:opacity-35 disabled:cursor-default hover:not-disabled:bg-[rgba(124,106,240,0.1)] transition leading-none"
|
||||
style="font-family: var(--font-serif);"
|
||||
:disabled="currentPage === totalPages" @click="currentPage++"
|
||||
>›</button>
|
||||
</div>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>商品</th>
|
||||
<th>用户</th>
|
||||
<th class="col-num">数量</th>
|
||||
<th>发货</th>
|
||||
<th>状态</th>
|
||||
<th>下单时间</th>
|
||||
<th class="col-action"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="order in pagedOrders" :key="order.id">
|
||||
<tr :class="{ 'row-pending': order.status === 'pending' }">
|
||||
<td>
|
||||
<div class="order-product">
|
||||
<span class="order-product-name">{{ order.productName }}</span>
|
||||
<span class="order-id">{{ order.id }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="order.userAccount" class="user-info">
|
||||
<span class="user-name">{{ order.userName || order.userAccount }}</span>
|
||||
<span class="user-account">{{ order.userAccount }}</span>
|
||||
</div>
|
||||
<span v-else class="anon-badge">匿名</span>
|
||||
</td>
|
||||
<td class="col-num">{{ order.quantity }}</td>
|
||||
<td>
|
||||
<span :class="['delivery-badge', order.deliveryMode === 'manual' ? 'delivery-manual' : 'delivery-auto']">
|
||||
{{ order.deliveryMode === 'manual' ? '手动' : '自动' }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span :class="['status-badge', order.status === 'completed' ? 'status-done' : 'status-wait']">
|
||||
{{ order.status === 'completed' ? '已完成' : '待付款' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="col-time">{{ formatTime(order.createdAt) }}</td>
|
||||
<td class="col-action">
|
||||
<button class="del-btn" @click="remove(order.id)" title="删除此订单">✕</button>
|
||||
</td>
|
||||
|
||||
<div class="overflow-x-auto max-md:[webkit-overflow-scrolling:touch]">
|
||||
<table class="table bg-white/45 max-md:min-w-[560px]">
|
||||
<thead>
|
||||
<tr class="bg-white/70 border-b-2 border-white/35">
|
||||
<th class="text-[13px] font-semibold uppercase tracking-[0.5px] text-muted px-3.5 py-2.5 max-md:px-2 max-md:py-1.5 max-md:text-xs">商品</th>
|
||||
<th class="text-[13px] font-semibold uppercase tracking-[0.5px] text-muted px-3.5 py-2.5 max-md:px-2 max-md:py-1.5 max-md:text-xs">用户</th>
|
||||
<th class="text-[13px] font-semibold uppercase tracking-[0.5px] text-muted px-3.5 py-2.5 text-center max-md:px-2 max-md:py-1.5 max-md:text-xs">数量</th>
|
||||
<th class="text-[13px] font-semibold uppercase tracking-[0.5px] text-muted px-3.5 py-2.5 max-md:px-2 max-md:py-1.5 max-md:text-xs">发货</th>
|
||||
<th class="text-[13px] font-semibold uppercase tracking-[0.5px] text-muted px-3.5 py-2.5 max-md:px-2 max-md:py-1.5 max-md:text-xs">状态</th>
|
||||
<th class="text-[13px] font-semibold uppercase tracking-[0.5px] text-muted px-3.5 py-2.5 max-md:hidden">下单时间</th>
|
||||
<th class="w-10 text-center px-3.5 py-2.5"></th>
|
||||
</tr>
|
||||
<tr v-if="order.note || order.contactPhone || order.contactEmail" class="extra-row">
|
||||
<td colspan="7">
|
||||
<div class="extra-info">
|
||||
<span v-if="order.note" class="extra-item">
|
||||
<span class="extra-label">备注：</span>{{ order.note }}
|
||||
</span>
|
||||
<span v-if="order.contactPhone" class="extra-item">
|
||||
<span class="extra-label">手机：</span>{{ order.contactPhone }}
|
||||
</span>
|
||||
<span v-if="order.contactEmail" class="extra-item">
|
||||
<span class="extra-label">邮箱：</span>{{ order.contactEmail }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="order in pagedOrders" :key="order.id">
|
||||
<tr
|
||||
class="border-b border-white/35 last:border-b-0 transition-colors hover:bg-white/70"
|
||||
:class="{ 'opacity-70': order.status === 'pending' }"
|
||||
>
|
||||
<td class="px-3.5 py-3 text-[15px] align-middle max-md:px-2 max-md:py-1.5 max-md:text-xs">
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<span class="font-semibold text-apptext text-[15px] max-md:text-xs">{{ order.productName }}</span>
|
||||
<span class="text-xs text-muted font-mono">{{ order.id }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-3.5 py-3 text-[15px] align-middle max-md:px-2 max-md:py-1.5 max-md:text-xs">
|
||||
<div v-if="order.userAccount" class="flex flex-col gap-0.5">
|
||||
<span class="font-semibold text-apptext max-md:text-xs">{{ order.userName || order.userAccount }}</span>
|
||||
<span class="text-xs text-muted">{{ order.userAccount }}</span>
|
||||
</div>
|
||||
<span v-else class="px-2.5 py-0.5 rounded-full bg-[rgba(140,140,145,0.12)] text-muted text-[13px]">匿名</span>
|
||||
</td>
|
||||
<td class="px-3.5 py-3 text-center align-middle max-md:px-2 max-md:py-1.5 max-md:text-xs">{{ order.quantity }}</td>
|
||||
<td class="px-3.5 py-3 align-middle max-md:px-2 max-md:py-1.5">
|
||||
<span
|
||||
class="inline-block px-2 py-0.5 rounded-full text-xs font-semibold"
|
||||
:class="order.deliveryMode === 'manual' ? 'bg-[rgba(90,120,200,0.12)] text-[#5a78c8]' : 'bg-[rgba(100,185,140,0.12)] text-[#3a9a68]'"
|
||||
>{{ order.deliveryMode === 'manual' ? '手动' : '自动' }}</span>
|
||||
</td>
|
||||
<td class="px-3.5 py-3 align-middle max-md:px-2 max-md:py-1.5">
|
||||
<span
|
||||
class="inline-block px-2.5 py-0.5 rounded-full text-[13px] font-semibold"
|
||||
:class="order.status === 'completed' ? 'bg-[rgba(100,185,140,0.15)] text-[#3a9a68]' : 'bg-[rgba(220,178,90,0.15)] text-[#b87e20]'"
|
||||
>{{ order.status === 'completed' ? '已完成' : '待付款' }}</span>
|
||||
</td>
|
||||
<td class="px-3.5 py-3 text-[13px] text-muted whitespace-nowrap align-middle max-md:hidden">{{ formatTime(order.createdAt) }}</td>
|
||||
<td class="px-3.5 py-3 text-center align-middle">
|
||||
<button
|
||||
class="bg-transparent border-none text-muted text-[13px] cursor-pointer px-1.5 py-0.5 rounded leading-none hover:text-[#d64848] hover:bg-[rgba(214,72,72,0.1)] transition"
|
||||
@click="remove(order.id)" title="删除此订单"
|
||||
>✕</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="order.note || order.contactPhone || order.contactEmail" class="border-b border-white/35 last:border-b-0">
|
||||
<td colspan="7" class="px-3.5 pb-2.5 pt-1.5 bg-[rgba(250,250,255,0.5)] max-md:px-2">
|
||||
<div class="flex flex-wrap gap-3 gap-x-5 text-[13px] text-apptext">
|
||||
<span v-if="order.note" class="inline-flex gap-0.5"><span class="text-muted font-semibold">备注：</span>{{ order.note }}</span>
|
||||
<span v-if="order.contactPhone" class="inline-flex gap-0.5"><span class="text-muted font-semibold">手机：</span>{{ order.contactPhone }}</span>
|
||||
<span v-if="order.contactEmail" class="inline-flex gap-0.5"><span class="text-muted font-semibold">邮箱：</span>{{ order.contactEmail }}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -83,10 +96,7 @@
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
orders: { type: Array, default: () => [] }
|
||||
})
|
||||
|
||||
const props = defineProps({ orders: { type: Array, default: () => [] } })
|
||||
const emit = defineEmits(['remove'])
|
||||
|
||||
const PAGE_SIZE = 10
|
||||
@@ -98,307 +108,14 @@ const pagedOrders = computed(() => {
|
||||
return props.orders.slice(start, start + PAGE_SIZE)
|
||||
})
|
||||
|
||||
// 订单列表变化时重置到第一页
|
||||
watch(() => props.orders.length, () => { currentPage.value = 1 })
|
||||
|
||||
const remove = (id) => {
|
||||
if (confirm('确认删除此订单记录？此操作不可撤销。')) {
|
||||
emit('remove', id)
|
||||
}
|
||||
if (confirm('确认删除此订单记录？此操作不可撤销。')) emit('remove', id)
|
||||
}
|
||||
|
||||
const formatTime = (iso) => {
|
||||
if (!iso) return '-'
|
||||
const d = new Date(iso)
|
||||
return d.toLocaleString('zh-CN', { hour12: false })
|
||||
return new Date(iso).toLocaleString('zh-CN', { hour12: false })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.orders-section {
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.orders-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.orders-header h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
.table thead tr {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border-bottom: 2px solid var(--line);
|
||||
}
|
||||
|
||||
.table th {
|
||||
padding: 11px 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.table td {
|
||||
padding: 12px 14px;
|
||||
font-size: 15px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table tbody tr {
|
||||
border-bottom: 1px solid var(--line);
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.table tbody tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.table tbody tr.row-pending {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.col-num {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.col-time {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.order-product {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.order-product-name {
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.order-id {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.user-account {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.anon-badge {
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(140, 140, 145, 0.12);
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-done {
|
||||
background: rgba(100, 185, 140, 0.15);
|
||||
color: #3a9a68;
|
||||
}
|
||||
|
||||
.status-wait {
|
||||
background: rgba(220, 178, 90, 0.15);
|
||||
color: #b87e20;
|
||||
}
|
||||
|
||||
.delivery-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.delivery-auto {
|
||||
background: rgba(100, 185, 140, 0.12);
|
||||
color: #3a9a68;
|
||||
}
|
||||
|
||||
.delivery-manual {
|
||||
background: rgba(90, 120, 200, 0.12);
|
||||
color: #5a78c8;
|
||||
}
|
||||
|
||||
.extra-row td {
|
||||
padding: 6px 14px 10px;
|
||||
background: rgba(250, 250, 255, 0.5);
|
||||
}
|
||||
|
||||
.extra-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px 20px;
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.extra-item {
|
||||
display: inline-flex;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.extra-label {
|
||||
color: var(--muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.col-action {
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.del-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
padding: 3px 6px;
|
||||
border-radius: 4px;
|
||||
line-height: 1;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.del-btn:hover {
|
||||
color: #d64848;
|
||||
background: rgba(214, 72, 72, 0.1);
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 14px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.pagination-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
padding: 4px 12px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
transition: background 0.15s;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.page-btn:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.page-btn:not(:disabled):hover {
|
||||
background: rgba(124, 106, 240, 0.1);
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.orders-section {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.table {
|
||||
min-width: 560px;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 7px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.col-time {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pagination-bar {
|
||||
padding: 6px 10px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,15 @@
|
||||
<template>
|
||||
<div v-if="open" class="modal-mask" @click.self="$emit('close')">
|
||||
<section class="modal-card">
|
||||
<div class="modal-header">
|
||||
<div
|
||||
v-if="open"
|
||||
class="fixed inset-0 z-40 flex items-start justify-center overflow-y-auto overscroll-contain p-6 bg-[rgba(30,28,32,0.35)] backdrop-blur-lg max-md:p-3"
|
||||
@click.self="$emit('close')"
|
||||
>
|
||||
<section
|
||||
class="flex w-[min(920px,100%)] max-h-[min(calc(100dvh-32px),calc(100vh-32px))] flex-col min-h-0 my-4 shrink-0 overflow-hidden rounded-xl border border-white/35 bg-white/95 p-7 shadow-[0_24px_60px_rgba(33,33,40,0.2)] max-md:my-3 max-md:max-h-[min(calc(100dvh-24px),calc(100vh-24px))] max-md:p-[18px]"
|
||||
@click.stop
|
||||
>
|
||||
<!-- Header -->
|
||||
<div class="flex shrink-0 items-start justify-between gap-4 pb-[22px]">
|
||||
<div>
|
||||
<h3>{{ form.id ? '编辑商品' : '添加新商品' }}</h3>
|
||||
<p class="tag">封面图和最多 5 张商品截图共用这一套编辑表单。</p>
|
||||
@@ -9,12 +17,14 @@
|
||||
<button class="ghost" @click="$emit('close')">关闭</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<!-- Body (scrolls; keeps footer actions reachable) -->
|
||||
<div class="flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto pr-1">
|
||||
<div class="form-field">
|
||||
<label>商品名称</label>
|
||||
<input v-model="form.name" placeholder="商品名称" />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
|
||||
<div class="grid grid-cols-2 gap-3 max-md:grid-cols-1">
|
||||
<div class="form-field">
|
||||
<label>原价（元）</label>
|
||||
<input v-model.number="form.price" type="number" step="0.01" />
|
||||
@@ -25,38 +35,40 @@
|
||||
<p class="tag">留空或不小于原价时，将不启用折扣。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label>封面链接（http）</label>
|
||||
<input v-model="form.coverUrl" placeholder="http://..." />
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<div class="field-head">
|
||||
<div class="flex items-center gap-3 flex-wrap">
|
||||
<label>商品库存</label>
|
||||
<span class="tag">共 {{ form.inventoryItems.length }} 条</span>
|
||||
<button class="ghost small" type="button" @click="addInventoryItem">添加商品库存</button>
|
||||
<button class="ghost px-3.5 py-1.5 text-[13px] rounded-full" type="button" @click="addInventoryItem">添加商品库存</button>
|
||||
</div>
|
||||
<p class="tag">每个输入框保存一条可发放内容，购买后会直接展示给用户。</p>
|
||||
<div class="inventory-list">
|
||||
<div v-for="(_, index) in form.inventoryItems" :key="index" class="inventory-row">
|
||||
<div class="flex flex-col gap-2 mt-1">
|
||||
<div v-for="(_, index) in form.inventoryItems" :key="index" class="flex items-center gap-2 max-md:flex-col max-md:items-stretch">
|
||||
<input
|
||||
:ref="(el) => setInventoryInputRef(el, index)"
|
||||
v-model="form.inventoryItems[index]"
|
||||
class="flex-1"
|
||||
placeholder="库存内容，可填卡密、下载链接等"
|
||||
/>
|
||||
<button
|
||||
v-if="form.inventoryItems.length > 1"
|
||||
class="ghost small"
|
||||
class="ghost px-3.5 py-1.5 text-[13px] rounded-full"
|
||||
type="button"
|
||||
@click="removeInventoryItem(index)"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
>删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label>商品截图链接（最多 5 个）</label>
|
||||
<div class="screenshot-grid">
|
||||
<div class="grid grid-cols-2 gap-2.5 max-md:grid-cols-1">
|
||||
<input
|
||||
v-for="(_, index) in screenshotInputSlots"
|
||||
:key="index"
|
||||
@@ -65,26 +77,30 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label>商品介绍（Markdown）</label>
|
||||
<textarea v-model="form.description"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label>商品标签（英文逗号分隔）</label>
|
||||
<input v-model="form.tagsText" placeholder="例如: chatgpt, linux, 域名" />
|
||||
<p class="tag">用于前端搜索与筛选，多个标签用英文逗号分开</p>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label>是否上架</label>
|
||||
<select v-model="form.active">
|
||||
<select v-model="form.active" class="rounded-lg border border-white/35 bg-white/70 px-3 py-2.5 text-[15px] outline-none" style="font-family: var(--font-serif);">
|
||||
<option :value="true">上架</option>
|
||||
<option :value="false">下架</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
|
||||
<div class="grid grid-cols-2 gap-3 max-md:grid-cols-1">
|
||||
<div class="form-field">
|
||||
<label>
|
||||
<input type="checkbox" v-model="form.requireLogin" class="inline-checkbox" />
|
||||
<label class="flex items-center font-semibold text-apptext cursor-default">
|
||||
<input type="checkbox" v-model="form.requireLogin" class="w-auto mr-1.5 accent-accent cursor-pointer" />
|
||||
需要登录才能购买
|
||||
</label>
|
||||
<p class="tag">开启后未登录用户将无法完成购买</p>
|
||||
@@ -94,26 +110,25 @@
|
||||
<input v-model.number="form.maxPerAccount" type="number" min="0" step="1" placeholder="0 表示不限制" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-field">
|
||||
<label>发货模式</label>
|
||||
<select v-model="form.deliveryMode">
|
||||
<option value="auto">自动发货（下单后自动提取内容）</option>
|
||||
<option value="manual">手动发货（管理员手动处理）</option>
|
||||
</select>
|
||||
<p class="tag">手动发货不会自动提取库存内容</p>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label>发货模式</label>
|
||||
<p class="rounded-lg border border-white/35 bg-white/70 px-3 py-2.5 text-[15px] text-apptext m-0" style="font-family: var(--font-serif);">
|
||||
自动发货（下单后自动提取库存内容）
|
||||
</p>
|
||||
<p class="tag">手动发货已暂时关闭，后续版本再开放</p>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
|
||||
<div class="grid grid-cols-2 gap-3 max-md:grid-cols-1">
|
||||
<div class="form-field">
|
||||
<label>
|
||||
<input type="checkbox" v-model="form.showNote" class="inline-checkbox" />
|
||||
<label class="flex items-center font-semibold text-apptext cursor-default">
|
||||
<input type="checkbox" v-model="form.showNote" class="w-auto mr-1.5 accent-accent cursor-pointer" />
|
||||
下单时显示备注输入框
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>
|
||||
<input type="checkbox" v-model="form.showContact" class="inline-checkbox" />
|
||||
<label class="flex items-center font-semibold text-apptext cursor-default">
|
||||
<input type="checkbox" v-model="form.showContact" class="w-auto mr-1.5 accent-accent cursor-pointer" />
|
||||
下单时显示联系方式输入框
|
||||
</label>
|
||||
<p class="tag">包含手机号和邮箱两个输入框</p>
|
||||
@@ -121,7 +136,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<!-- Actions -->
|
||||
<div class="flex shrink-0 gap-3 border-t border-white/35 bg-white/95 pt-4 mt-5">
|
||||
<button class="primary" @click="handleSubmit">{{ form.id ? '更新商品' : '新增商品' }}</button>
|
||||
<button class="ghost" @click="resetForm">重置表单</button>
|
||||
</div>
|
||||
@@ -144,86 +160,45 @@ const props = defineProps({
|
||||
|
||||
const emit = defineEmits(['close', 'submit'])
|
||||
|
||||
const createScreenshotSlots = (values = []) =>
|
||||
Array.from({ length: MAX_SCREENSHOT_URLS }, (_, i) => values[i] || '')
|
||||
const createScreenshotSlots = (values = []) => Array.from({ length: MAX_SCREENSHOT_URLS }, (_, i) => values[i] || '')
|
||||
|
||||
const createInventoryItems = (values = []) => {
|
||||
const items = values
|
||||
.map((v) => (v || '').trim())
|
||||
.filter((v) => v)
|
||||
.slice(0, MAX_INVENTORY_ITEMS)
|
||||
const items = values.map((v) => (v || '').trim()).filter((v) => v).slice(0, MAX_INVENTORY_ITEMS)
|
||||
return items.length ? items : ['']
|
||||
}
|
||||
|
||||
const normalizeInventoryItems = (values = []) =>
|
||||
values
|
||||
.map((item) => (item || '').trim())
|
||||
.filter((item) => item)
|
||||
.slice(0, MAX_INVENTORY_ITEMS)
|
||||
values.map((item) => (item || '').trim()).filter((item) => item).slice(0, MAX_INVENTORY_ITEMS)
|
||||
|
||||
const normalizeScreenshotUrls = (values = []) =>
|
||||
values.map((item) => item.trim()).filter(Boolean).slice(0, MAX_SCREENSHOT_URLS)
|
||||
|
||||
const makeEmptyForm = () => ({
|
||||
id: '',
|
||||
name: '',
|
||||
price: 0,
|
||||
discountPrice: 0,
|
||||
tagsText: '',
|
||||
coverUrl: '',
|
||||
screenshotUrls: createScreenshotSlots(),
|
||||
inventoryItems: createInventoryItems(),
|
||||
description: '',
|
||||
active: true,
|
||||
requireLogin: false,
|
||||
maxPerAccount: 0,
|
||||
deliveryMode: 'auto',
|
||||
showNote: false,
|
||||
showContact: false
|
||||
id: '', name: '', price: 0, discountPrice: 0, tagsText: '', coverUrl: '',
|
||||
screenshotUrls: createScreenshotSlots(), inventoryItems: createInventoryItems(),
|
||||
description: '', active: true, requireLogin: false, maxPerAccount: 0,
|
||||
deliveryMode: 'auto', showNote: true, showContact: true
|
||||
})
|
||||
|
||||
const form = reactive(makeEmptyForm())
|
||||
|
||||
const fillForm = (item) => {
|
||||
Object.assign(form, {
|
||||
id: item?.id || '',
|
||||
name: item?.name || '',
|
||||
price: item?.price || 0,
|
||||
discountPrice: item?.discountPrice || 0,
|
||||
tagsText: (item?.tags || []).join(','),
|
||||
coverUrl: item?.coverUrl || '',
|
||||
id: item?.id || '', name: item?.name || '', price: item?.price || 0, discountPrice: item?.discountPrice || 0,
|
||||
tagsText: (item?.tags || []).join(','), coverUrl: item?.coverUrl || '',
|
||||
screenshotUrls: createScreenshotSlots(item?.screenshotUrls || []),
|
||||
inventoryItems: createInventoryItems(item?.codes || []),
|
||||
description: item?.description || '',
|
||||
active: item?.active ?? true,
|
||||
requireLogin: item?.requireLogin ?? false,
|
||||
maxPerAccount: item?.maxPerAccount ?? 0,
|
||||
deliveryMode: item?.deliveryMode || 'auto',
|
||||
showNote: item?.showNote ?? false,
|
||||
showContact: item?.showContact ?? false
|
||||
description: item?.description || '', active: item?.active ?? true,
|
||||
requireLogin: item?.requireLogin ?? false, maxPerAccount: item?.maxPerAccount ?? 0,
|
||||
deliveryMode: 'auto', showNote: item?.showNote ?? true, showContact: item?.showContact ?? true
|
||||
})
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
Object.assign(form, makeEmptyForm())
|
||||
}
|
||||
const resetForm = () => { Object.assign(form, makeEmptyForm()) }
|
||||
|
||||
watch(
|
||||
() => props.editItem,
|
||||
(item) => {
|
||||
if (item) {
|
||||
fillForm(item)
|
||||
} else {
|
||||
resetForm()
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
watch(() => props.editItem, (item) => { if (item) { fillForm(item) } else { resetForm() } }, { immediate: true })
|
||||
|
||||
const setInventoryInputRef = (el, index) => {
|
||||
if (!el) return
|
||||
inventoryInputRefs.value[index] = el
|
||||
}
|
||||
const setInventoryInputRef = (el, index) => { if (!el) return; inventoryInputRefs.value[index] = el }
|
||||
|
||||
const addInventoryItem = async () => {
|
||||
form.inventoryItems.push('')
|
||||
@@ -235,10 +210,7 @@ const addInventoryItem = async () => {
|
||||
}
|
||||
|
||||
const removeInventoryItem = async (index) => {
|
||||
if (form.inventoryItems.length <= 1) {
|
||||
form.inventoryItems[0] = ''
|
||||
return
|
||||
}
|
||||
if (form.inventoryItems.length <= 1) { form.inventoryItems[0] = ''; return }
|
||||
form.inventoryItems.splice(index, 1)
|
||||
inventoryInputRefs.value.splice(index, 1)
|
||||
await nextTick()
|
||||
@@ -249,183 +221,13 @@ const removeInventoryItem = async (index) => {
|
||||
|
||||
const handleSubmit = () => {
|
||||
emit('submit', {
|
||||
id: form.id,
|
||||
name: form.name,
|
||||
price: form.price,
|
||||
discountPrice: form.discountPrice || 0,
|
||||
tags: form.tagsText,
|
||||
coverUrl: form.coverUrl,
|
||||
id: form.id, name: form.name, price: form.price, discountPrice: form.discountPrice || 0,
|
||||
tags: form.tagsText, coverUrl: form.coverUrl,
|
||||
codes: normalizeInventoryItems(form.inventoryItems),
|
||||
screenshotUrls: normalizeScreenshotUrls(form.screenshotUrls),
|
||||
description: form.description,
|
||||
active: form.active,
|
||||
requireLogin: form.requireLogin,
|
||||
maxPerAccount: form.maxPerAccount || 0,
|
||||
deliveryMode: form.deliveryMode || 'auto',
|
||||
showNote: form.showNote,
|
||||
showContact: form.showContact
|
||||
description: form.description, active: form.active, requireLogin: form.requireLogin,
|
||||
maxPerAccount: form.maxPerAccount || 0, deliveryMode: 'auto',
|
||||
showNote: form.showNote, showContact: form.showContact
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 40;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
background: rgba(30, 28, 32, 0.35);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
width: min(920px, 100%);
|
||||
max-height: calc(100vh - 48px);
|
||||
overflow: auto;
|
||||
padding: 28px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: 0 24px 60px rgba(33, 33, 40, 0.2);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.form-field input,
|
||||
.form-field textarea {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
padding: 10px 12px;
|
||||
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
|
||||
}
|
||||
|
||||
.form-field textarea {
|
||||
min-height: 120px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
select {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
padding: 10px 12px;
|
||||
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.field-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.inventory-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.inventory-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.inventory-row input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.screenshot-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.small {
|
||||
padding: 7px 13px;
|
||||
font-size: 13px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 14px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.inline-checkbox {
|
||||
width: auto;
|
||||
margin-right: 6px;
|
||||
accent-color: var(--accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-field label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.modal-mask {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
padding: 18px;
|
||||
max-height: calc(100vh - 24px);
|
||||
}
|
||||
|
||||
.form-row,
|
||||
.screenshot-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.field-head {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.inventory-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,60 +1,73 @@
|
||||
<template>
|
||||
<div class="table-wrap">
|
||||
<table class="table">
|
||||
<div class="rounded-lg overflow-x-auto border border-white/35 max-md:[webkit-overflow-scrolling:touch]">
|
||||
<table class="table bg-white/45 max-md:min-w-[580px]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>商品</th>
|
||||
<th>价格</th>
|
||||
<th class="col-num">库存</th>
|
||||
<th class="col-num">浏览量</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
<tr class="bg-white/70 border-b-2 border-white/35">
|
||||
<th class="px-4 py-3 text-sm font-semibold uppercase tracking-[0.6px] text-muted max-md:px-2.5 max-md:py-2 max-md:text-xs">商品</th>
|
||||
<th class="px-4 py-3 text-sm font-semibold uppercase tracking-[0.6px] text-muted max-md:px-2.5 max-md:py-2 max-md:text-xs">价格</th>
|
||||
<th class="px-4 py-3 text-sm font-semibold uppercase tracking-[0.6px] text-muted text-center max-md:px-2.5 max-md:py-2 max-md:text-xs">库存</th>
|
||||
<th class="px-4 py-3 text-sm font-semibold uppercase tracking-[0.6px] text-muted text-center max-md:px-2.5 max-md:py-2 max-md:text-xs">浏览量</th>
|
||||
<th class="px-4 py-3 text-sm font-semibold uppercase tracking-[0.6px] text-muted max-md:px-2.5 max-md:py-2 max-md:text-xs">状态</th>
|
||||
<th class="px-4 py-3 text-sm font-semibold uppercase tracking-[0.6px] text-muted max-md:px-2.5 max-md:py-2 max-md:text-xs">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in products" :key="item.id" :class="{ 'row-inactive': !item.active }">
|
||||
<td>
|
||||
<div class="admin-product-cell">
|
||||
<img class="admin-product-thumb" :src="item.coverUrl" :alt="item.name" />
|
||||
<div class="admin-product-info">
|
||||
<span class="product-name">{{ item.name }}</span>
|
||||
<span class="product-id">{{ item.id }}</span>
|
||||
<tr
|
||||
v-for="item in products"
|
||||
:key="item.id"
|
||||
class="border-b border-white/35 last:border-b-0 transition-colors hover:bg-white/70"
|
||||
:class="{ 'opacity-55': !item.active }"
|
||||
>
|
||||
<td class="px-4 py-3.5 align-middle max-md:px-2.5 max-md:py-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<img
|
||||
class="w-12 h-12 rounded-md object-cover border border-white/35 flex-shrink-0 shadow-[0_4px_10px_rgba(33,33,40,0.1)] max-md:w-9 max-md:h-9"
|
||||
:src="item.coverUrl" :alt="item.name"
|
||||
/>
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<span class="text-base font-semibold text-apptext max-md:text-[13px]">{{ item.name }}</span>
|
||||
<span class="text-[13px] text-muted font-mono max-md:text-[11px]">{{ item.id }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="item.price === 0" class="price-cell">
|
||||
<span class="price-free">免费</span>
|
||||
<td class="px-4 py-3.5 align-middle max-md:px-2.5 max-md:py-2">
|
||||
<div v-if="item.price === 0" class="font-black text-[#3a9a68] text-[17px]">免费</div>
|
||||
<div v-else-if="item.discountPrice > 0 && item.discountPrice < item.price" class="flex flex-col gap-0.5">
|
||||
<span class="line-through text-muted text-sm">¥{{ item.price.toFixed(2) }}</span>
|
||||
<span class="font-bold text-[#e8826a] text-[17px]">¥{{ item.discountPrice.toFixed(2) }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="item.discountPrice > 0 && item.discountPrice < item.price"
|
||||
class="price-cell"
|
||||
>
|
||||
<span class="price-original">¥{{ item.price.toFixed(2) }}</span>
|
||||
<span class="price-discount">¥{{ item.discountPrice.toFixed(2) }}</span>
|
||||
</div>
|
||||
<span v-else class="price-normal">¥{{ item.price.toFixed(2) }}</span>
|
||||
<span v-else class="font-semibold text-apptext">¥{{ item.price.toFixed(2) }}</span>
|
||||
</td>
|
||||
<td class="col-num">
|
||||
<span :class="['stock-badge', item.quantity === 0 ? 'stock-empty' : 'stock-ok']">
|
||||
{{ item.quantity }}
|
||||
</span>
|
||||
<td class="px-4 py-3.5 text-center align-middle max-md:px-2.5 max-md:py-2">
|
||||
<span
|
||||
class="inline-block px-2.5 py-0.5 rounded-full text-[15px] font-semibold"
|
||||
:class="item.quantity === 0 ? 'bg-[rgba(201,90,106,0.12)] text-[#c95a6a]' : 'bg-[rgba(100,185,140,0.15)] text-[#3a9a68]'"
|
||||
>{{ item.quantity }}</span>
|
||||
</td>
|
||||
<td class="col-num">
|
||||
<span class="view-count">{{ item.viewCount || 0 }}</span>
|
||||
<td class="px-4 py-3.5 text-center text-[15px] text-muted align-middle max-md:px-2.5 max-md:py-2">{{ item.viewCount || 0 }}</td>
|
||||
<td class="px-4 py-3.5 align-middle max-md:px-2.5 max-md:py-2">
|
||||
<span
|
||||
class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-semibold tracking-[0.3px]"
|
||||
:class="item.active ? 'bg-[rgba(100,185,140,0.15)] text-[#3a9a68]' : 'bg-[rgba(140,140,145,0.12)] text-muted'"
|
||||
>{{ item.active ? '上架' : '下架' }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span :class="['status-badge', item.active ? 'status-on' : 'status-off']">
|
||||
{{ item.active ? '上架' : '下架' }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="row-actions">
|
||||
<button class="act-edit" @click="$emit('edit', item)">编辑</button>
|
||||
<button class="act-toggle" @click="$emit('toggle', item)">
|
||||
{{ item.active ? '下架' : '上架' }}
|
||||
</button>
|
||||
<button class="act-delete" @click="$emit('remove', item)">删除</button>
|
||||
<td class="px-4 py-3.5 align-middle max-md:px-2.5 max-md:py-2">
|
||||
<div class="flex gap-1.5 items-center">
|
||||
<button
|
||||
class="px-3 py-1.5 rounded text-sm font-semibold border-none cursor-pointer transition bg-[rgba(145,168,208,0.15)] text-accent2 hover:bg-[rgba(145,168,208,0.28)] max-md:px-2 max-md:py-1 max-md:text-xs"
|
||||
style="font-family: var(--font-serif);"
|
||||
@click="$emit('edit', item)"
|
||||
>编辑</button>
|
||||
<button
|
||||
class="px-3 py-1.5 rounded text-sm font-semibold border-none cursor-pointer transition bg-[rgba(180,154,203,0.12)] text-accent hover:bg-[rgba(180,154,203,0.24)] max-md:px-2 max-md:py-1 max-md:text-xs"
|
||||
style="font-family: var(--font-serif);"
|
||||
@click="$emit('toggle', item)"
|
||||
>{{ item.active ? '下架' : '上架' }}</button>
|
||||
<button
|
||||
class="px-3 py-1.5 rounded text-sm font-semibold border-none cursor-pointer transition bg-[rgba(201,90,106,0.1)] text-[#c95a6a] hover:bg-[rgba(201,90,106,0.2)] max-md:px-2 max-md:py-1 max-md:text-xs"
|
||||
style="font-family: var(--font-serif);"
|
||||
@click="$emit('remove', item)"
|
||||
>删除</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -64,254 +77,6 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
products: { type: Array, default: () => [] }
|
||||
})
|
||||
|
||||
defineProps({ products: { type: Array, default: () => [] } })
|
||||
defineEmits(['edit', 'toggle', 'remove'])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-wrap {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
.table thead tr {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border-bottom: 2px solid var(--line);
|
||||
}
|
||||
|
||||
.table th {
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.table td {
|
||||
padding: 14px 16px;
|
||||
font-size: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table tbody tr {
|
||||
border-bottom: 1px solid var(--line);
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.table tbody tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.table tbody tr.row-inactive {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.col-num {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.admin-product-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.admin-product-thumb {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--line);
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 10px rgba(33, 33, 40, 0.1);
|
||||
}
|
||||
|
||||
.admin-product-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.product-id {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.price-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.price-original {
|
||||
text-decoration: line-through;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.price-discount {
|
||||
font-weight: 700;
|
||||
color: #e8826a;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.price-free {
|
||||
font-weight: 900;
|
||||
color: #3a9a68;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.price-normal {
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.stock-badge {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stock-ok {
|
||||
background: rgba(100, 185, 140, 0.15);
|
||||
color: #3a9a68;
|
||||
}
|
||||
|
||||
.stock-empty {
|
||||
background: rgba(201, 90, 106, 0.12);
|
||||
color: #c95a6a;
|
||||
}
|
||||
|
||||
.view-count {
|
||||
color: var(--muted);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.status-on {
|
||||
background: rgba(100, 185, 140, 0.15);
|
||||
color: #3a9a68;
|
||||
}
|
||||
|
||||
.status-off {
|
||||
background: rgba(140, 140, 145, 0.12);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.row-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.act-edit,
|
||||
.act-toggle,
|
||||
.act-delete {
|
||||
padding: 6px 12px;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s ease, transform 0.15s ease;
|
||||
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
|
||||
}
|
||||
|
||||
.act-edit {
|
||||
background: rgba(145, 168, 208, 0.15);
|
||||
color: var(--accent-2);
|
||||
}
|
||||
|
||||
.act-edit:hover {
|
||||
background: rgba(145, 168, 208, 0.28);
|
||||
}
|
||||
|
||||
.act-toggle {
|
||||
background: rgba(180, 154, 203, 0.12);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.act-toggle:hover {
|
||||
background: rgba(180, 154, 203, 0.24);
|
||||
}
|
||||
|
||||
.act-delete {
|
||||
background: rgba(201, 90, 106, 0.1);
|
||||
color: #c95a6a;
|
||||
}
|
||||
|
||||
.act-delete:hover {
|
||||
background: rgba(201, 90, 106, 0.2);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.table-wrap {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.table {
|
||||
min-width: 580px;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 8px 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.admin-product-thumb {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.product-id {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.act-edit,
|
||||
.act-toggle,
|
||||
.act-delete {
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,41 +1,54 @@
|
||||
<template>
|
||||
<div class="smtp-row">
|
||||
<div class="smtp-header">
|
||||
<span class="smtp-label">邮件通知配置</span>
|
||||
<span class="smtp-desc tag">下单/发货时自动给用户发送通知邮件（支持 QQ / 163 / Gmail / 自定义域名邮箱）</span>
|
||||
<span v-if="message" class="msg-tag" :class="{ error: message.includes('失败') }">{{ message }}</span>
|
||||
<div class="px-[18px] py-3.5 bg-white/50 border border-white/35 rounded-lg mb-4">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center gap-3 flex-wrap mb-3">
|
||||
<span class="text-[15px] font-semibold text-apptext whitespace-nowrap">邮件通知配置</span>
|
||||
<span class="text-[13px] text-muted">下单/发货时自动给用户发送通知邮件（支持 QQ / 163 / Gmail / 自定义域名邮箱）</span>
|
||||
<span
|
||||
v-if="message"
|
||||
class="text-sm px-2 py-0.5 rounded whitespace-nowrap"
|
||||
:class="message.includes('失败') ? 'text-[#c95a6a] bg-[rgba(201,90,106,0.08)]' : 'text-accent2 bg-[rgba(145,168,208,0.1)]'"
|
||||
>{{ message }}</span>
|
||||
</div>
|
||||
<div class="smtp-enable-row">
|
||||
<label class="smtp-toggle">
|
||||
<input type="checkbox" v-model="form.enabled" />
|
||||
|
||||
<!-- Enable toggle -->
|
||||
<div class="flex items-center gap-2.5 mb-3">
|
||||
<label class="flex items-center gap-1.5 cursor-pointer text-sm text-apptext font-medium">
|
||||
<input type="checkbox" v-model="form.enabled" class="w-4 h-4 accent-accent cursor-pointer" />
|
||||
<span>启用邮件通知</span>
|
||||
</label>
|
||||
<span class="smtp-status-tag" :class="form.enabled ? 'tag-on' : 'tag-off'">
|
||||
{{ form.enabled ? '已启用' : '已关闭' }}
|
||||
</span>
|
||||
<span
|
||||
class="text-xs font-semibold px-2 py-0.5 rounded-full"
|
||||
:class="form.enabled ? 'bg-[rgba(74,222,128,0.15)] text-[#2d8a4e]' : 'bg-black/[0.06] text-[#888]'"
|
||||
>{{ form.enabled ? '已启用' : '已关闭' }}</span>
|
||||
</div>
|
||||
<div class="smtp-fields" :class="{ 'smtp-fields-disabled': !form.enabled }">
|
||||
<label class="smtp-field">
|
||||
<span>发件邮箱</span>
|
||||
<input v-model="form.email" type="email" placeholder="noreply@yourdomain.com" :disabled="!form.enabled" />
|
||||
|
||||
<!-- Fields -->
|
||||
<div
|
||||
class="flex gap-2.5 flex-wrap items-end max-md:flex-col"
|
||||
:class="{ 'opacity-45 pointer-events-none': !form.enabled }"
|
||||
>
|
||||
<label class="flex flex-col gap-1 flex-1 min-w-[160px] max-md:min-w-0 max-md:w-full">
|
||||
<span class="text-[13px] text-muted">发件邮箱</span>
|
||||
<input v-model="form.email" type="email" placeholder="noreply@yourdomain.com" :disabled="!form.enabled" class="px-2.5 py-2 rounded-lg border border-white/35 bg-white/70 text-sm outline-none focus:border-accent transition w-full" style="font-family: var(--font-serif);" />
|
||||
</label>
|
||||
<label class="smtp-field">
|
||||
<span>SMTP 密码 / 授权码</span>
|
||||
<input v-model="form.password" type="password" placeholder="QQ/163 填授权码；其他填密码" autocomplete="new-password" :disabled="!form.enabled" />
|
||||
<label class="flex flex-col gap-1 flex-1 min-w-[160px] max-md:min-w-0 max-md:w-full">
|
||||
<span class="text-[13px] text-muted">SMTP 密码 / 授权码</span>
|
||||
<input v-model="form.password" type="password" placeholder="QQ/163 填授权码；其他填密码" autocomplete="new-password" :disabled="!form.enabled" class="px-2.5 py-2 rounded-lg border border-white/35 bg-white/70 text-sm outline-none focus:border-accent transition w-full" style="font-family: var(--font-serif);" />
|
||||
</label>
|
||||
<label class="smtp-field">
|
||||
<span>发件人名称</span>
|
||||
<input v-model="form.fromName" type="text" placeholder="萌芽小店" :disabled="!form.enabled" />
|
||||
<label class="flex flex-col gap-1 flex-1 min-w-[160px] max-md:min-w-0 max-md:w-full">
|
||||
<span class="text-[13px] text-muted">发件人名称</span>
|
||||
<input v-model="form.fromName" type="text" placeholder="萌芽小店" :disabled="!form.enabled" class="px-2.5 py-2 rounded-lg border border-white/35 bg-white/70 text-sm outline-none focus:border-accent transition w-full" style="font-family: var(--font-serif);" />
|
||||
</label>
|
||||
<label class="smtp-field">
|
||||
<span>SMTP 主机</span>
|
||||
<input v-model="form.host" type="text" placeholder="smtp.qq.com" :disabled="!form.enabled" />
|
||||
<label class="flex flex-col gap-1 flex-1 min-w-[160px] max-md:min-w-0 max-md:w-full">
|
||||
<span class="text-[13px] text-muted">SMTP 主机</span>
|
||||
<input v-model="form.host" type="text" placeholder="smtp.qq.com" :disabled="!form.enabled" class="px-2.5 py-2 rounded-lg border border-white/35 bg-white/70 text-sm outline-none focus:border-accent transition w-full" style="font-family: var(--font-serif);" />
|
||||
</label>
|
||||
<label class="smtp-field smtp-field-port">
|
||||
<span>端口</span>
|
||||
<input v-model="form.port" type="text" placeholder="465" :disabled="!form.enabled" />
|
||||
<label class="flex flex-col gap-1 w-[90px] flex-shrink-0 max-md:w-full">
|
||||
<span class="text-[13px] text-muted">端口</span>
|
||||
<input v-model="form.port" type="text" placeholder="465" :disabled="!form.enabled" class="px-2.5 py-2 rounded-lg border border-white/35 bg-white/70 text-sm outline-none focus:border-accent transition w-full" style="font-family: var(--font-serif);" />
|
||||
</label>
|
||||
<button class="primary smtp-save-btn" type="button" :disabled="saving" @click="save">
|
||||
<button class="primary self-end px-[18px] py-2 text-sm whitespace-nowrap" type="button" :disabled="saving" @click="save">
|
||||
{{ saving ? '保存中...' : '保存配置' }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -51,17 +64,9 @@ const props = defineProps({
|
||||
})
|
||||
|
||||
const emit = defineEmits(['save'])
|
||||
|
||||
const saving = ref(false)
|
||||
|
||||
const form = reactive({
|
||||
enabled: true,
|
||||
email: '',
|
||||
password: '',
|
||||
fromName: '',
|
||||
host: 'smtp.qq.com',
|
||||
port: '465'
|
||||
})
|
||||
const form = reactive({ enabled: true, email: '', password: '', fromName: '', host: 'smtp.qq.com', port: '465' })
|
||||
|
||||
watch(() => props.config, (cfg) => {
|
||||
if (!cfg) return
|
||||
@@ -75,165 +80,6 @@ watch(() => props.config, (cfg) => {
|
||||
|
||||
const save = async () => {
|
||||
saving.value = true
|
||||
try {
|
||||
await emit('save', { ...form })
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
try { await emit('save', { ...form }) } finally { saving.value = false }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.smtp-row {
|
||||
padding: 14px 18px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.smtp-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.smtp-label {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.smtp-desc {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.smtp-enable-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.smtp-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.smtp-toggle input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: var(--accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.smtp-status-tag {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.tag-on {
|
||||
background: rgba(74, 222, 128, 0.15);
|
||||
color: #2d8a4e;
|
||||
}
|
||||
|
||||
.tag-off {
|
||||
background: rgba(0,0,0,0.06);
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.smtp-fields {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.smtp-fields-disabled {
|
||||
opacity: 0.45;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.smtp-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.smtp-field-port {
|
||||
max-width: 90px;
|
||||
flex: 0 0 90px;
|
||||
}
|
||||
|
||||
.smtp-field span {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.smtp-field input {
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.smtp-field input:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.smtp-save-btn {
|
||||
align-self: flex-end;
|
||||
padding: 8px 18px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.msg-tag {
|
||||
font-size: 14px;
|
||||
color: var(--accent-2);
|
||||
padding: 3px 8px;
|
||||
border-radius: 5px;
|
||||
background: rgba(145, 168, 208, 0.1);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.msg-tag.error {
|
||||
color: #c95a6a;
|
||||
background: rgba(201, 90, 106, 0.08);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.smtp-fields {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.smtp-field {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.smtp-field-port {
|
||||
max-width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,21 +1,26 @@
|
||||
<template>
|
||||
<div v-if="show" class="token-row">
|
||||
<div class="form-field token-field">
|
||||
<div v-if="show" class="flex items-end gap-3.5 mb-4 p-4 bg-white/50 border border-white/35 rounded-lg flex-wrap max-md:flex-col max-md:items-stretch max-md:p-3">
|
||||
<div class="form-field flex-1 max-w-[460px] !mb-0 max-md:max-w-full">
|
||||
<label>管理 Token</label>
|
||||
<div class="token-input-wrap">
|
||||
<input :value="token" @input="$emit('update:token', $event.target.value)" placeholder="粘贴管理员令牌后自动加载…" />
|
||||
<div class="flex gap-2 items-center">
|
||||
<input
|
||||
class="flex-1"
|
||||
:value="token"
|
||||
@input="$emit('update:token', $event.target.value)"
|
||||
placeholder="粘贴管理员令牌后自动加载…"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
v-if="message"
|
||||
class="msg-tag"
|
||||
:class="{ error: message.includes('失败') || message.includes('错误') }"
|
||||
class="text-[15px] px-2.5 py-1 rounded bg-[rgba(145,168,208,0.1)] whitespace-nowrap"
|
||||
:class="message.includes('失败') || message.includes('错误') ? 'text-[#c95a6a] bg-[rgba(201,90,106,0.08)]' : 'text-accent2'"
|
||||
>{{ message }}</p>
|
||||
</div>
|
||||
<p
|
||||
v-if="inlineMessage"
|
||||
class="msg-inline"
|
||||
:class="{ error: inlineMessage.includes('失败') || inlineMessage.includes('错误') }"
|
||||
class="text-[15px] mb-3"
|
||||
:class="inlineMessage.includes('失败') || inlineMessage.includes('错误') ? 'text-[#c95a6a]' : 'text-accent2'"
|
||||
>{{ inlineMessage }}</p>
|
||||
</template>
|
||||
|
||||
@@ -26,77 +31,5 @@ defineProps({
|
||||
message: { type: String, default: '' },
|
||||
inlineMessage: { type: String, default: '' }
|
||||
})
|
||||
|
||||
defineEmits(['update:token'])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.token-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 14px;
|
||||
margin-bottom: 16px;
|
||||
padding: 16px 18px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.token-field {
|
||||
flex: 1;
|
||||
max-width: 460px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.token-input-wrap {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.token-input-wrap input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.msg-tag {
|
||||
font-size: 15px;
|
||||
color: var(--accent-2);
|
||||
padding: 4px 10px;
|
||||
border-radius: 5px;
|
||||
background: rgba(145, 168, 208, 0.1);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.msg-tag.error {
|
||||
color: #c95a6a;
|
||||
background: rgba(201, 90, 106, 0.08);
|
||||
}
|
||||
|
||||
.msg-inline {
|
||||
font-size: 15px;
|
||||
color: var(--accent-2);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.msg-inline.error {
|
||||
color: #c95a6a;
|
||||
}
|
||||
|
||||
.small {
|
||||
padding: 7px 13px;
|
||||
font-size: 13px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.token-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 12px 12px;
|
||||
}
|
||||
|
||||
.token-field {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user