chore: sync
This commit is contained in:
BIN
mengyastore-frontend/favicon.ico
Normal file
BIN
mengyastore-frontend/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
12
mengyastore-frontend/index.html
Normal file
12
mengyastore-frontend/index.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>萌芽小店</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
mengyastore-frontend/logo.png
Normal file
BIN
mengyastore-frontend/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 MiB |
1624
mengyastore-frontend/package-lock.json
generated
Normal file
1624
mengyastore-frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
22
mengyastore-frontend/package.json
Normal file
22
mengyastore-frontend/package.json
Normal file
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "mengyastore-frontend",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.6.8",
|
||||
"markdown-it": "^14.1.0",
|
||||
"pinia": "^2.1.7",
|
||||
"vue": "^3.4.21",
|
||||
"vue-router": "^4.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"vite": "^5.2.7"
|
||||
}
|
||||
}
|
||||
45
mengyastore-frontend/src/App.vue
Normal file
45
mengyastore-frontend/src/App.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div class="app">
|
||||
<header class="top-bar">
|
||||
<div class="brand">
|
||||
<div class="brand-mark"></div>
|
||||
<div>
|
||||
<h1>萌芽小店</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-actions">
|
||||
<button class="ghost" @click="goHome">商店</button>
|
||||
<button class="primary" @click="goAdmin">管理员后台</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main-content">
|
||||
<router-view />
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<span>萌芽小店 · @2025-2026</span>
|
||||
<a class="footer-mail" href="mailto:mail@smyhub.com">邮箱售后联系: mail@smyhub.com</a>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
import { fetchAdminToken } from './modules/shared/api'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const goHome = () => {
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
const goAdmin = async () => {
|
||||
try {
|
||||
const token = await fetchAdminToken()
|
||||
router.push(`/admin?token=${encodeURIComponent(token)}`)
|
||||
} catch (error) {
|
||||
router.push('/admin')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
334
mengyastore-frontend/src/assets/styles.css
Normal file
334
mengyastore-frontend/src/assets/styles.css
Normal file
@@ -0,0 +1,334 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Source+Sans+3:wght@300;400;600&display=swap');
|
||||
|
||||
:root {
|
||||
--bg-1: #f8f5f2;
|
||||
--bg-2: #e9f0f7;
|
||||
--bg-3: #f4eaf1;
|
||||
--glass: rgba(255, 255, 255, 0.55);
|
||||
--glass-strong: rgba(255, 255, 255, 0.72);
|
||||
--line: rgba(255, 255, 255, 0.35);
|
||||
--text: #2c2b2d;
|
||||
--muted: #6c6870;
|
||||
--accent: #b49acb;
|
||||
--accent-2: #91a8d0;
|
||||
--shadow: 0 20px 50px rgba(33, 33, 40, 0.12);
|
||||
--radius: 14px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
font-family: 'Source Sans 3', sans-serif;
|
||||
color: var(--text);
|
||||
background: radial-gradient(circle at top, var(--bg-2), transparent 60%),
|
||||
radial-gradient(circle at 10% 20%, var(--bg-3), transparent 55%),
|
||||
linear-gradient(140deg, var(--bg-1), #fefefe 65%);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
padding: 28px 5vw 36px;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
padding: 20px 26px;
|
||||
background: var(--glass);
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: blur(18px);
|
||||
position: sticky;
|
||||
top: 20px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.brand h1 {
|
||||
font-size: 26px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.brand p {
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(140deg, var(--accent), var(--accent-2));
|
||||
box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.top-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-family: 'Source Sans 3', sans-serif;
|
||||
padding: 10px 18px;
|
||||
border-radius: 12px;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
button.primary {
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
||||
color: white;
|
||||
box-shadow: 0 10px 30px rgba(145, 168, 208, 0.35);
|
||||
}
|
||||
|
||||
button.ghost {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding: 28px 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.footer-mail {
|
||||
color: var(--accent-2);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.footer-mail:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.page-card {
|
||||
background: var(--glass);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: 26px;
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 20px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 18px;
|
||||
border-radius: 14px;
|
||||
background: var(--glass-strong);
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: 0 12px 30px rgba(33, 33, 40, 0.1);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.product-card img {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
object-fit: cover;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.product-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-weight: 600;
|
||||
color: var(--accent-2);
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 4px 10px;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.admin-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.detail-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.detail-image {
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
object-fit: cover;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.detail-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.buy-button {
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
||||
color: white;
|
||||
padding: 12px 22px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.form-field input,
|
||||
.form-field textarea {
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
padding: 10px 12px;
|
||||
font-family: 'Source Sans 3', sans-serif;
|
||||
}
|
||||
|
||||
.form-field textarea {
|
||||
min-height: 120px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.admin-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
text-align: left;
|
||||
padding: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.table tr {
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.markdown {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
line-height: 1.6;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.app {
|
||||
padding: 18px 4vw 28px;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 16px 18px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.admin-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.detail-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.detail-image {
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.page-card {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.product-card img {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.markdown {
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
}
|
||||
10
mengyastore-frontend/src/main.js
Normal file
10
mengyastore-frontend/src/main.js
Normal file
@@ -0,0 +1,10 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import './assets/styles.css'
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
app.mount('#app')
|
||||
388
mengyastore-frontend/src/modules/admin/AdminPage.vue
Normal file
388
mengyastore-frontend/src/modules/admin/AdminPage.vue
Normal 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>
|
||||
48
mengyastore-frontend/src/modules/shared/api.js
Normal file
48
mengyastore-frontend/src/modules/shared/api.js
Normal file
@@ -0,0 +1,48 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: 'http://localhost:8080'
|
||||
})
|
||||
|
||||
export const fetchProducts = async () => {
|
||||
const { data } = await api.get('/api/products')
|
||||
return data.data || []
|
||||
}
|
||||
|
||||
export const fetchAdminToken = async () => {
|
||||
const { data } = await api.get('/api/admin/token')
|
||||
return data.token || ''
|
||||
}
|
||||
|
||||
export const fetchAdminProducts = async (token) => {
|
||||
const { data } = await api.get('/api/admin/products', { params: { token } })
|
||||
return data.data || []
|
||||
}
|
||||
|
||||
export const createProduct = async (token, payload) => {
|
||||
const { data } = await api.post('/api/admin/products', payload, {
|
||||
params: { token }
|
||||
})
|
||||
return data.data
|
||||
}
|
||||
|
||||
export const updateProduct = async (token, id, payload) => {
|
||||
const { data } = await api.put(`/api/admin/products/${id}`, payload, {
|
||||
params: { token }
|
||||
})
|
||||
return data.data
|
||||
}
|
||||
|
||||
export const toggleProduct = async (token, id, active) => {
|
||||
const { data } = await api.patch(`/api/admin/products/${id}/status`, { active }, {
|
||||
params: { token }
|
||||
})
|
||||
return data.data
|
||||
}
|
||||
|
||||
export const deleteProduct = async (token, id) => {
|
||||
const { data } = await api.delete(`/api/admin/products/${id}`, {
|
||||
params: { token }
|
||||
})
|
||||
return data
|
||||
}
|
||||
277
mengyastore-frontend/src/modules/store/ProductDetail.vue
Normal file
277
mengyastore-frontend/src/modules/store/ProductDetail.vue
Normal file
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<section class="page-card" v-if="!loading && product">
|
||||
<div class="detail-body">
|
||||
<div class="detail-summary">
|
||||
<h2>{{ product.name }}</h2>
|
||||
<p class="tag">库存：{{ product.quantity }}</p>
|
||||
<p class="product-price">¥ {{ product.price.toFixed(2) }}</p>
|
||||
</div>
|
||||
|
||||
<div class="markdown detail-description" v-html="renderMarkdown(product.description)"></div>
|
||||
|
||||
<div class="detail-gallery" v-if="galleryImages.length">
|
||||
<div class="detail-gallery-main">
|
||||
<button
|
||||
v-if="galleryImages.length > 1"
|
||||
class="gallery-nav prev"
|
||||
type="button"
|
||||
aria-label="上一张"
|
||||
@click="prevImage"
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
<img
|
||||
class="detail-image"
|
||||
:src="galleryImages[currentImageIndex].url"
|
||||
:alt="galleryImages[currentImageIndex].label"
|
||||
/>
|
||||
<button
|
||||
v-if="galleryImages.length > 1"
|
||||
class="gallery-nav next"
|
||||
type="button"
|
||||
aria-label="下一张"
|
||||
@click="nextImage"
|
||||
>
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="detail-gallery-meta">
|
||||
<span class="badge">{{ galleryImages[currentImageIndex].label }}</span>
|
||||
<span class="tag">{{ currentImageIndex + 1 }} / {{ galleryImages.length }}</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-thumbs" v-if="galleryImages.length > 1">
|
||||
<button
|
||||
v-for="(image, index) in galleryImages"
|
||||
:key="`${image.url}-${index}`"
|
||||
class="detail-thumb"
|
||||
:class="{ active: index === currentImageIndex }"
|
||||
type="button"
|
||||
@click="currentImageIndex = index"
|
||||
>
|
||||
<img :src="image.url" :alt="image.label" />
|
||||
<span>{{ image.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-actions">
|
||||
<button class="buy-button" @click="buy">立即购买</button>
|
||||
<button class="ghost" @click="goBack">返回商店首页</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="page-card" v-else-if="!loading && !product">
|
||||
<h2>未找到该商品</h2>
|
||||
<p class="tag">请返回商店查看其他商品。</p>
|
||||
<div class="detail-actions">
|
||||
<button class="ghost" @click="goBack">返回商店首页</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="page-card" v-else>
|
||||
<div class="status">加载中...</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import MarkdownIt from 'markdown-it'
|
||||
import { fetchProducts } from '../shared/api'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const md = new MarkdownIt()
|
||||
const loading = ref(true)
|
||||
const product = ref(null)
|
||||
const currentImageIndex = ref(0)
|
||||
|
||||
const renderMarkdown = (content) => md.render(content || '')
|
||||
|
||||
const galleryImages = computed(() => {
|
||||
if (!product.value) {
|
||||
return []
|
||||
}
|
||||
|
||||
const images = []
|
||||
const seen = new Set()
|
||||
const appendImage = (url, label) => {
|
||||
const trimmed = (url || '').trim()
|
||||
if (!trimmed || seen.has(trimmed)) {
|
||||
return
|
||||
}
|
||||
seen.add(trimmed)
|
||||
images.push({ url: trimmed, label })
|
||||
}
|
||||
|
||||
appendImage(product.value.coverUrl, '商品封面')
|
||||
|
||||
const screenshots = Array.isArray(product.value.screenshotUrls)
|
||||
? product.value.screenshotUrls
|
||||
: []
|
||||
|
||||
screenshots.forEach((url, index) => {
|
||||
appendImage(url, `商品截图 ${index + 1}`)
|
||||
})
|
||||
|
||||
return images
|
||||
})
|
||||
|
||||
const goBack = () => {
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
const buy = () => {
|
||||
alert('已加入购买清单（示例）')
|
||||
}
|
||||
|
||||
const prevImage = () => {
|
||||
if (!galleryImages.value.length) {
|
||||
return
|
||||
}
|
||||
currentImageIndex.value =
|
||||
(currentImageIndex.value - 1 + galleryImages.value.length) % galleryImages.value.length
|
||||
}
|
||||
|
||||
const nextImage = () => {
|
||||
if (!galleryImages.value.length) {
|
||||
return
|
||||
}
|
||||
currentImageIndex.value = (currentImageIndex.value + 1) % galleryImages.value.length
|
||||
}
|
||||
|
||||
watch(
|
||||
galleryImages,
|
||||
(images) => {
|
||||
if (!images.length || currentImageIndex.value >= images.length) {
|
||||
currentImageIndex.value = 0
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const list = await fetchProducts()
|
||||
product.value = list.find((item) => item.id === route.params.id) || null
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.detail-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.detail-summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.detail-description {
|
||||
display: block;
|
||||
color: var(--text);
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
-webkit-line-clamp: initial;
|
||||
-webkit-box-orient: initial;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.detail-gallery {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.detail-gallery-main {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 18px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
.gallery-nav {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 999px;
|
||||
padding: 0;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
color: var(--text);
|
||||
font-size: 28px;
|
||||
line-height: 1;
|
||||
transform: translateY(-50%);
|
||||
box-shadow: 0 10px 20px rgba(33, 33, 40, 0.12);
|
||||
}
|
||||
|
||||
.gallery-nav.prev {
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.gallery-nav.next {
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
.detail-gallery-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.detail-thumbs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.detail-thumb {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
background: rgba(255, 255, 255, 0.58);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.detail-thumb.active {
|
||||
border-color: var(--accent-2);
|
||||
box-shadow: 0 10px 24px rgba(145, 168, 208, 0.16);
|
||||
}
|
||||
|
||||
.detail-thumb img {
|
||||
width: 100%;
|
||||
height: 76px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.detail-thumb span {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 24px 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.detail-thumb {
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
108
mengyastore-frontend/src/modules/store/StorePage.vue
Normal file
108
mengyastore-frontend/src/modules/store/StorePage.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<section class="page-card">
|
||||
<div class="hero">
|
||||
<div>
|
||||
<h2>所有商品</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="status">加载中...</div>
|
||||
<div v-else>
|
||||
<div class="grid">
|
||||
<router-link
|
||||
v-for="item in pagedProducts"
|
||||
:key="item.id"
|
||||
:to="`/product/${item.id}`"
|
||||
class="product-link"
|
||||
>
|
||||
<article class="product-card">
|
||||
<img :src="item.coverUrl" :alt="item.name" />
|
||||
<div class="product-meta">
|
||||
<h3>{{ item.name }}</h3>
|
||||
<span class="product-price">¥ {{ item.price.toFixed(2) }}</span>
|
||||
</div>
|
||||
<div class="tag">库存：{{ item.quantity }}</div>
|
||||
<div class="markdown" v-html="renderMarkdown(item.description)"></div>
|
||||
</article>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="pagination" v-if="totalPages > 1">
|
||||
<button class="ghost" :disabled="page === 1" @click="page--">上一页</button>
|
||||
<span class="tag">第 {{ page }} / {{ totalPages }} 页</span>
|
||||
<button class="ghost" :disabled="page === totalPages" @click="page++">下一页</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import MarkdownIt from 'markdown-it'
|
||||
import { fetchProducts } from '../shared/api'
|
||||
|
||||
const products = ref([])
|
||||
const loading = ref(true)
|
||||
const md = new MarkdownIt()
|
||||
const page = ref(1)
|
||||
const perPage = ref(20)
|
||||
|
||||
const renderMarkdown = (content) => md.render(content || '')
|
||||
|
||||
const updatePerPage = () => {
|
||||
perPage.value = window.innerWidth <= 900 ? 6 : 20
|
||||
page.value = 1
|
||||
}
|
||||
|
||||
const totalPages = computed(() =>
|
||||
Math.max(1, Math.ceil(products.value.length / perPage.value))
|
||||
)
|
||||
|
||||
const pagedProducts = computed(() => {
|
||||
const start = (page.value - 1) * perPage.value
|
||||
return products.value.slice(start, start + perPage.value)
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
updatePerPage()
|
||||
window.addEventListener('resize', updatePerPage)
|
||||
try {
|
||||
products.value = await fetchProducts()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', updatePerPage)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hero {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.product-link {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 24px 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
</style>
|
||||
15
mengyastore-frontend/src/router/index.js
Normal file
15
mengyastore-frontend/src/router/index.js
Normal file
@@ -0,0 +1,15 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import StorePage from '../modules/store/StorePage.vue'
|
||||
import AdminPage from '../modules/admin/AdminPage.vue'
|
||||
import ProductDetail from '../modules/store/ProductDetail.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: [
|
||||
{ path: '/', name: 'store', component: StorePage },
|
||||
{ path: '/product/:id', name: 'product-detail', component: ProductDetail },
|
||||
{ path: '/admin', name: 'admin', component: AdminPage }
|
||||
]
|
||||
})
|
||||
|
||||
export default router
|
||||
9
mengyastore-frontend/vite.config.js
Normal file
9
mengyastore-frontend/vite.config.js
Normal file
@@ -0,0 +1,9 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
server: {
|
||||
port: 5173
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user