shumengya/mengyastore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: sync

Browse Source
This commit is contained in:
树萌芽
2026-03-18 22:06:17 +08:00
parent 9b04338e5f
commit 7cb7aeabcb
28 changed files with 3634 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

388
mengyastore-frontend/src/modules/admin/AdminPage.vue Normal file
View File

@@ -0,0 +1,388 @@
<template>
<section class="page-card">
<div class="hero">
<div>
<h2>管理员后台</h2>
<p class="tag">默认地址：/admin?token=shumengya520</p>
</div>
<div class="admin-actions">
<button class="primary" @click="openCreate">添加新商品</button>
<button class="ghost" @click="refresh">刷新列表</button>
<button class="primary" @click="autoGetToken">自动获取 Token</button>
</div>
</div>
<div class="token-row">
<div class="form-field token-field">
<label>管理 Token</label>
<input v-model="token" placeholder="请输入 token" />
</div>
<p class="tag" v-if="message">{{ message }}</p>
</div>
<table class="table">
<thead>
<tr>
<th>商品</th>
<th>价格</th>
<th>库存</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in products" :key="item.id">
<td>
<div>{{ item.name }}</div>
<div class="tag">{{ item.id }}</div>
</td>
<td>¥ {{ item.price.toFixed(2) }}</td>
<td>{{ item.quantity }}</td>
<td>
<span class="badge">{{ item.active ? '上架' : '下架' }}</span>
</td>
<td>
<div class="admin-actions">
<button class="ghost" @click="openEdit(item)">编辑</button>
<button class="ghost" @click="toggle(item)">
{{ item.active ? '下架' : '上架' }}
</button>
<button class="ghost" @click="remove(item)">删除</button>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<div v-if="editorOpen" class="modal-mask" @click.self="closeEditor">
<section class="modal-card">
<div class="modal-header">
<div>
<h3>{{ form.id ? '编辑商品' : '添加新商品' }}</h3>
<p class="tag">封面图和最多 10 张商品截图共用这一套编辑表单。</p>
</div>
<button class="ghost" @click="closeEditor">关闭</button>
</div>
<div class="modal-body">
<div class="form-field">
<label>商品名称</label>
<input v-model="form.name" placeholder="商品名称" />
</div>
<div class="form-row">
<div class="form-field">
<label>价格（元）</label>
<input v-model.number="form.price" type="number" step="0.01" />
</div>
<div class="form-field">
<label>库存数量</label>
<input v-model.number="form.quantity" type="number" />
</div>
</div>
<div class="form-field">
<label>封面链接（http）</label>
<input v-model="form.coverUrl" placeholder="http://..." />
</div>
<div class="form-field">
<label>商品截图链接（最多 10 个）</label>
<div class="screenshot-grid">
<input
v-for="(_, index) in screenshotInputSlots"
:key="index"
v-model="form.screenshotUrls[index]"
:placeholder="`截图链接 ${index + 1}（http://...）`"
/>
</div>
</div>
<div class="form-field">
<label>商品介绍（Markdown）</label>
<textarea v-model="form.description"></textarea>
</div>
<div class="form-field">
<label>是否上架</label>
<select v-model="form.active">
<option :value="true">上架</option>
<option :value="false">下架</option>
</select>
</div>
</div>
<div class="modal-actions">
<button class="primary" @click="submit">{{ form.id ? '更新商品' : '新增商品' }}</button>
<button class="ghost" @click="reset">重置表单</button>
</div>
</section>
</div>
</template>
<script setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
fetchAdminProducts,
fetchAdminToken,
createProduct,
updateProduct,
toggleProduct,
deleteProduct
} from '../shared/api'
const route = useRoute()
const router = useRouter()
const token = ref(route.query.token || '')
const products = ref([])
const message = ref('')
const editorOpen = ref(false)
const MAX_SCREENSHOT_URLS = 10
const screenshotInputSlots = Array.from({ length: MAX_SCREENSHOT_URLS })
const createScreenshotSlots = (values = []) =>
Array.from({ length: MAX_SCREENSHOT_URLS }, (_, index) => values[index] || '')
const normalizeScreenshotUrls = (values = []) =>
values.map((item) => item.trim()).filter(Boolean).slice(0, MAX_SCREENSHOT_URLS)
const emptyForm = () => ({
id: '',
name: '',
price: 0,
quantity: 0,
coverUrl: '',
screenshotUrls: createScreenshotSlots(),
description: '',
active: true
})
const form = reactive(emptyForm())
const syncQuery = () => {
if (token.value) {
router.replace({ query: { token: token.value } })
}
}
const refresh = async () => {
if (!token.value) {
message.value = '请先输入 token'
return
}
try {
products.value = await fetchAdminProducts(token.value)
message.value = '数据已更新'
} catch (error) {
message.value = '获取失败，请检查 token'
}
}
const autoGetToken = async () => {
const fetched = await fetchAdminToken()
token.value = fetched
syncQuery()
await refresh()
}
const submit = async () => {
if (!token.value) {
message.value = '请先输入 token'
return
}
try {
if (form.id) {
await updateProduct(token.value, form.id, {
name: form.name,
price: form.price,
quantity: form.quantity,
coverUrl: form.coverUrl,
screenshotUrls: normalizeScreenshotUrls(form.screenshotUrls),
description: form.description,
active: form.active
})
message.value = '已更新商品'
} else {
await createProduct(token.value, {
name: form.name,
price: form.price,
quantity: form.quantity,
coverUrl: form.coverUrl,
screenshotUrls: normalizeScreenshotUrls(form.screenshotUrls),
description: form.description,
active: form.active
})
message.value = '已新增商品'
}
reset()
closeEditor()
await refresh()
} catch (error) {
message.value = '操作失败，请检查输入'
}
}
const fillForm = (item) => {
Object.assign(form, {
id: item?.id || '',
name: item?.name || '',
price: item?.price || 0,
quantity: item?.quantity || 0,
coverUrl: item?.coverUrl || '',
screenshotUrls: createScreenshotSlots(item?.screenshotUrls || []),
description: item?.description || '',
active: item?.active ?? true
})
}
const openCreate = () => {
reset()
editorOpen.value = true
}
const openEdit = (item) => {
fillForm(item)
editorOpen.value = true
}
const closeEditor = () => {
editorOpen.value = false
}
const toggle = async (item) => {
if (!token.value) {
message.value = '请先输入 token'
return
}
await toggleProduct(token.value, item.id, !item.active)
await refresh()
}
const remove = async (item) => {
if (!token.value) {
message.value = '请先输入 token'
return
}
await deleteProduct(token.value, item.id)
await refresh()
}
const reset = () => {
fillForm()
}
watch(token, () => {
syncQuery()
})
onMounted(async () => {
if (token.value) {
await refresh()
}
})
</script>
<style scoped>
.hero {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 22px;
}
.token-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.token-field {
width: min(420px, 100%);
margin-bottom: 0;
}
select {
border-radius: 14px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.7);
padding: 10px 12px;
}
.form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.screenshot-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.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: 24px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid var(--line);
box-shadow: 0 24px 60px rgba(33, 33, 40, 0.18);
}
.modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.modal-body {
display: flex;
flex-direction: column;
gap: 2px;
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 16px;
}
@media (max-width: 900px) {
.hero,
.token-row,
.modal-header {
flex-direction: column;
align-items: stretch;
}
.form-row,
.screenshot-grid {
grid-template-columns: 1fr;
}
.modal-mask {
padding: 12px;
}
.modal-card {
padding: 18px;
max-height: calc(100vh - 24px);
}
}
</style>