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