feat(h5): 初始化 frontend-h5 脚手架（Vite+Vue3+Tailwind+Pinia+Router）
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
parent
815e8df10b
commit
f410a95a3d
|
|
@ -0,0 +1,4 @@
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
.DS_Store
|
||||||
|
*.local
|
||||||
|
|
@ -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, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
|
||||||
|
<title>材料浏览</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"name": "mat3-h5",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"axios": "^1.6.8",
|
||||||
|
"pinia": "^2.1.7",
|
||||||
|
"vue": "^3.4.21",
|
||||||
|
"vue-router": "^4.3.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^5.0.4",
|
||||||
|
"autoprefixer": "^10.4.19",
|
||||||
|
"postcss": "^8.4.38",
|
||||||
|
"tailwindcss": "^3.4.3",
|
||||||
|
"vite": "^5.2.10"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
<template>
|
||||||
|
<router-view v-slot="{ Component }">
|
||||||
|
<transition name="page" mode="out-in">
|
||||||
|
<keep-alive :include="['Home', 'CategoryDetail']">
|
||||||
|
<component :is="Component" />
|
||||||
|
</keep-alive>
|
||||||
|
</transition>
|
||||||
|
</router-view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.page-enter-active,
|
||||||
|
.page-leave-active { transition: all 0.2s ease; }
|
||||||
|
.page-enter-from { transform: translateX(20px); opacity: 0; }
|
||||||
|
.page-leave-to { transform: translateX(-20px); opacity: 0; }
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
import api from './client'
|
||||||
|
|
||||||
|
export const login = async (payload) => (await api.post('/auth/login/', payload)).data
|
||||||
|
export const fetchCurrentUser = async () => (await api.get('/auth/user/')).data
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
const api = axios.create({ baseURL: '/api', timeout: 15000 })
|
||||||
|
|
||||||
|
api.interceptors.request.use((config) => {
|
||||||
|
const token = localStorage.getItem('h5_token')
|
||||||
|
if (token) config.headers.Authorization = `Bearer ${token}`
|
||||||
|
return config
|
||||||
|
})
|
||||||
|
|
||||||
|
api.interceptors.response.use(
|
||||||
|
(res) => res,
|
||||||
|
(err) => {
|
||||||
|
if (err.response?.status === 401) {
|
||||||
|
localStorage.removeItem('h5_token')
|
||||||
|
const current = window.location.pathname + window.location.search
|
||||||
|
if (!current.startsWith('/m/login')) {
|
||||||
|
window.location.href = `/m/login?redirect=${encodeURIComponent(current)}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return Promise.reject(err)
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
export default api
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
import api from './client'
|
||||||
|
|
||||||
|
export const fetchMaterials = async (params) => (await api.get('/material/', { params })).data
|
||||||
|
export const fetchMaterialDetail = async (id) => (await api.get(`/material/${id}/`)).data
|
||||||
|
export const fetchCategoriesByMajor = async (major_category) =>
|
||||||
|
(await api.get('/material/categories-by-major/', { params: { major_category } })).data
|
||||||
|
export const fetchSubcategoriesByCategory = async (major_category, material_category) =>
|
||||||
|
(await api.get('/material/subcategories-by-category/', { params: { major_category, material_category } })).data
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
import { createPinia } from 'pinia'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
import './styles/tailwind.css'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
app.use(createPinia())
|
||||||
|
app.use(router)
|
||||||
|
app.mount('#app')
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
import { useAuthStore } from '@/store/auth'
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{ path: '/login', name: 'Login', component: () => import('@/views/Login.vue'), meta: { public: true } },
|
||||||
|
{ path: '/', name: 'Home', component: () => import('@/views/Home.vue') },
|
||||||
|
{ path: '/category/:major/:category', name: 'CategoryDetail', component: () => import('@/views/CategoryDetail.vue'), props: true },
|
||||||
|
{ path: '/material/:id', name: 'MaterialDetail', component: () => import('@/views/MaterialDetail.vue'), props: true },
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory('/m/'),
|
||||||
|
routes,
|
||||||
|
scrollBehavior(to, from, saved) { return saved || { top: 0 } },
|
||||||
|
})
|
||||||
|
|
||||||
|
router.beforeEach((to) => {
|
||||||
|
if (to.meta.public) return true
|
||||||
|
const auth = useAuthStore()
|
||||||
|
if (!auth.isAuthed) {
|
||||||
|
return { name: 'Login', query: { redirect: to.fullPath } }
|
||||||
|
}
|
||||||
|
return true
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import * as authApi from '@/api/auth'
|
||||||
|
|
||||||
|
export const useAuthStore = defineStore('auth', {
|
||||||
|
state: () => ({
|
||||||
|
token: localStorage.getItem('h5_token') || '',
|
||||||
|
user: JSON.parse(localStorage.getItem('h5_user') || 'null'),
|
||||||
|
}),
|
||||||
|
getters: {
|
||||||
|
isAuthed: (s) => !!s.token,
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
async login(payload) {
|
||||||
|
const data = await authApi.login(payload)
|
||||||
|
this.token = data.access
|
||||||
|
this.user = data.user || null
|
||||||
|
localStorage.setItem('h5_token', this.token)
|
||||||
|
if (this.user) localStorage.setItem('h5_user', JSON.stringify(this.user))
|
||||||
|
},
|
||||||
|
async loadUser() {
|
||||||
|
this.user = await authApi.fetchCurrentUser()
|
||||||
|
localStorage.setItem('h5_user', JSON.stringify(this.user))
|
||||||
|
},
|
||||||
|
logout() {
|
||||||
|
this.token = ''
|
||||||
|
this.user = null
|
||||||
|
localStorage.removeItem('h5_token')
|
||||||
|
localStorage.removeItem('h5_user')
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
|
export const useUiStore = defineStore('ui', {
|
||||||
|
state: () => ({
|
||||||
|
selectedMajor: '',
|
||||||
|
categorySubTab: {},
|
||||||
|
scrollCache: {},
|
||||||
|
}),
|
||||||
|
actions: {
|
||||||
|
setMajor(v) { this.selectedMajor = v },
|
||||||
|
setSubTab(key, v) { this.categorySubTab[key] = v },
|
||||||
|
saveScroll(key, top) { this.scrollCache[key] = top },
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
html, body, #app {
|
||||||
|
@apply h-full bg-surface-alt text-neutral-900 font-sans antialiased;
|
||||||
|
}
|
||||||
|
body { -webkit-tap-highlight-color: transparent; }
|
||||||
|
.tnum { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
<script setup>defineOptions({ name: 'CategoryDetail' })</script>
|
||||||
|
<template><div class="p-4">CategoryDetail 占位</div></template>
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
<script setup>defineOptions({ name: 'Home' })</script>
|
||||||
|
<template><div class="p-4">Home 占位</div></template>
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
<script setup>defineOptions({ name: 'Login' })</script>
|
||||||
|
<template><div class="p-4">Login 占位</div></template>
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
<script setup>defineOptions({ name: 'MaterialDetail' })</script>
|
||||||
|
<template><div class="p-4">MaterialDetail 占位</div></template>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
export default {
|
||||||
|
content: ['./index.html', './src/**/*.{vue,js}'],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
brand: { DEFAULT: '#2F4F3F', dark: '#233C2F', light: '#6B8878' },
|
||||||
|
surface: { DEFAULT: '#FFFFFF', alt: '#FAFAFA', warm: '#F5F4F2' },
|
||||||
|
danger: '#D2584A',
|
||||||
|
info: '#5A7FB8',
|
||||||
|
muted: '#8A8A8A',
|
||||||
|
line: '#EEEEEE',
|
||||||
|
},
|
||||||
|
borderRadius: { card: '18px' },
|
||||||
|
boxShadow: { card: '0 1px 2px rgba(0,0,0,0.04)' },
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['-apple-system', 'BlinkMacSystemFont', '"PingFang SC"', '"Microsoft YaHei"', 'system-ui', 'sans-serif'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
base: '/m/',
|
||||||
|
plugins: [vue()],
|
||||||
|
resolve: {
|
||||||
|
alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) },
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
port: 5174,
|
||||||
|
proxy: { '/api': { target: 'http://localhost:8000', changeOrigin: true } },
|
||||||
|
},
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue