v0.2.11 前端初始化sams-ui

v0.2o
bruce 2025-03-23 23:47:00 +08:00
parent 6232ada60d
commit 4c43bb94c4
24 changed files with 1799 additions and 7 deletions

24
sams-ui/.gitignore vendored 100644
View File

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

View File

@ -0,0 +1,5 @@
# Vue 3 + Vite
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).

13
sams-ui/index.html 100644
View File

@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

View File

@ -0,0 +1,22 @@
{
"name": "sams-ui",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.8.4",
"element-plus": "^2.9.7",
"pinia": "^3.0.1",
"vue": "^3.5.13",
"vue-router": "4"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.1",
"vite": "^6.2.0"
}
}

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1,13 @@
<!-- src/App.vue -->
<template>
<router-view />
</template>
<script setup>
</script>
<style>
body {
margin: 0;
}
</style>

View File

@ -0,0 +1,27 @@
import request from '@/utils/request'
/**
* 登录请求
* @param {Object} form 包含 account password
* @returns JWT token
*/
export function login(form) {
const { account, password } = form
const loginRequest = {
username: '',
schoolId: '',
email: '',
password
}
// 自动识别字段
if (account.includes('@')) {
loginRequest.email = account
} else if (/^\d{12}$/.test(account)) {
loginRequest.schoolId = account
} else {
loginRequest.username = account
}
return request.post('/auth/login', loginRequest).then(res => res.data)
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 457 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

After

Width:  |  Height:  |  Size: 496 B

View File

@ -0,0 +1,10 @@
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount('#app')

View File

@ -0,0 +1,25 @@
import { createRouter, createWebHistory } from 'vue-router'
import Login from '@/views/login/index.vue'
const routes = [
{
path: '/',
redirect: '/login' // 默认重定向到登录页
},
{
path: '/login',
component: Login
},
{
path: '/user/home',
component: () => import('@/views/home/UserHome.vue'),
meta: { roles: ['PARTICIPANT'] }
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router

View File

@ -0,0 +1,79 @@
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
.card {
padding: 2em;
}
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}

View File

@ -0,0 +1,27 @@
import axios from 'axios'
import { ElMessage } from 'element-plus'
const service = axios.create({
baseURL: '/api',
timeout: 5000
})
service.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) config.headers.Authorization = `Bearer ${token}`
return config
})
service.interceptors.response.use(
res => {
if (res.code === 200 || res.status === 200) return res
ElMessage.error(res.message || '请求出错')
return Promise.reject(new Error(res.message || 'Error'))
},
error => {
ElMessage.error(error.response?.data?.message || '服务器异常')
return Promise.reject(error)
}
)
export default service

View File

@ -0,0 +1,177 @@
<template>
<div class="user-home">
<!-- 顶部导航 -->
<el-menu mode="horizontal" class="top-nav" background-color="#2c3e50" text-color="#fff" active-text-color="#ffd04b">
<div class="nav-left">🏠 社团活动管理系统</div>
<el-menu-item index="1">首页</el-menu-item>
<el-menu-item index="2">社团中心</el-menu-item>
<el-menu-item index="3">活动</el-menu-item>
<el-menu-item index="4">公告</el-menu-item>
<el-menu-item index="5">个人中心</el-menu-item>
<div class="nav-right">欢迎你{{ nickname }}</div>
</el-menu>
<!-- 轮播图 -->
<el-carousel height="360px">
<el-carousel-item v-for="item in banners" :key="item">
<img :src="item" class="banner-img" />
</el-carousel-item>
</el-carousel>
<!-- 社团资讯和活动 -->
<div class="info-section">
<el-card class="info-box">
<div class="section-header">
<h3>社团资讯</h3>
<el-link>更多</el-link>
</div>
<el-timeline>
<el-timeline-item v-for="news in newsList" :key="news.id" :timestamp="news.date">
{{ news.title }}
</el-timeline-item>
</el-timeline>
</el-card>
<el-card class="info-box">
<div class="section-header">
<h3>社团活动</h3>
<el-link>更多</el-link>
</div>
<el-timeline>
<el-timeline-item v-for="act in activityList" :key="act.id" :timestamp="act.date">
{{ act.title }}
</el-timeline-item>
</el-timeline>
</el-card>
</div>
<!-- 优秀社团 -->
<el-card class="club-section">
<h3>优秀社团</h3>
<div class="club-list">
<div class="club-item" v-for="club in clubs" :key="club.id">
<img :src="club.logo" />
<p>{{ club.name }}</p>
</div>
</div>
</el-card>
<!-- 页脚 -->
<el-footer class="footer">
<div class="footer-cols">
<div>
<h4>关于我们</h4>
<p>致力于为用户提供优质的社团活动管理服务</p>
</div>
<div>
<h4>快速链接</h4>
<p>社团中心<br />公告</p>
</div>
<div>
<h4>联系方式</h4>
<p>电话: 400-123-4567<br />邮箱: contact@example.com</p>
</div>
<div>
<h4>关注我们</h4>
<p>🌐 📱 🧧</p>
</div>
</div>
<p class="footer-note">© 2024 社团活动管理系统. 保留所有权利.</p>
</el-footer>
</div>
</template>
<script setup>
import { ref } from 'vue'
const nickname = localStorage.getItem('nickname') || '学生'
const banners = ['/login-bg.jpg', '/login-bg.jpg'] //
const newsList = [
{ id: 1, title: '乒乓社招新啦!', date: '2023-11-14' },
{ id: 2, title: '街舞社重磅来袭!', date: '2023-11-14' },
]
const activityList = [
{ id: 1, title: '小小球员,等你来战!', date: '2023-11-14' },
{ id: 2, title: '舞蹈嗨翻,敬“梦”想!', date: '2023-11-14' },
]
const clubs = [
{ id: 1, name: '乒乓社', logo: '/pingpong.png' },
{ id: 2, name: '街舞社', logo: '/street.png' },
{ id: 3, name: '书法社', logo: '/calligraphy.png' },
{ id: 4, name: '英语社', logo: '/english.png' },
{ id: 5, name: '足球社', logo: '/soccer.png' },
]
</script>
<style scoped>
.user-home {
font-family: "Microsoft YaHei", sans-serif;
}
.top-nav {
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-left {
color: #fff;
font-size: 18px;
padding: 0 20px;
}
.nav-right {
padding: 0 20px;
color: #fff;
}
.banner-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.info-section {
display: flex;
gap: 20px;
padding: 20px;
}
.info-box {
flex: 1;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.club-section {
margin: 20px;
}
.club-list {
display: flex;
gap: 30px;
margin-top: 20px;
justify-content: start;
flex-wrap: wrap;
}
.club-item {
text-align: center;
}
.club-item img {
width: 70px;
height: 70px;
border-radius: 50%;
}
.footer {
background: #2c3e50;
color: #fff;
padding: 30px;
margin-top: 50px;
}
.footer-cols {
display: flex;
justify-content: space-between;
}
.footer-note {
text-align: center;
margin-top: 20px;
}
</style>

View File

@ -0,0 +1,114 @@
<template>
<div class="login-page">
<div class="login-left">
<div class="login-box">
<h2 class="title">欢迎登录</h2>
<el-form :model="loginForm" :rules="loginRules" ref="loginRef" label-position="top" size="large">
<el-form-item label="账号登录" prop="account">
<el-input v-model="loginForm.account" placeholder="请输入用户名 / 学号 / 邮箱" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="loginForm.password" type="password" show-password placeholder="请输入密码" />
</el-form-item>
<el-form-item>
<el-checkbox v-model="loginForm.remember">使</el-checkbox>
</el-form-item>
<el-form-item>
<el-button type="primary" class="login-btn" :loading="loading" @click="submitLogin"></el-button>
</el-form-item>
</el-form>
</div>
</div>
<div class="login-right">
<img src="@/assets/login-bg.png" class="bg-image" alt="login-bg" />
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { login } from '@/api/auth'
const router = useRouter()
const loginRef = ref(null)
const loading = ref(false)
const loginForm = ref({
account: '',
password: '',
remember: false
})
const loginRules = {
account: [{ required: true, message: '请输入用户名/学号/邮箱', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
const submitLogin = () => {
loginRef.value.validate(async (valid) => {
if (!valid) return
loading.value = true
try {
const token = await login(loginForm.value)
localStorage.setItem('token', token)
ElMessage.success('登录成功')
//
const payload = jwtDecode(token)
const roles = Array.isArray(payload.role) ? payload.role : [payload.role]
if (roles.includes('PARTICIPANT')) {
router.push('/user/home')
} else if (roles.includes('COLLEGE_ADMIN') ||roles.includes('DEPARTMENT_ADMIN') ||roles.includes('CLUB_ADMIN') ) {
router.push('/admin/home')
} else {
router.push('/403') //
}
} catch (e) {
ElMessage.error(e.message || '登录失败')
} finally {
loading.value = false
}
})
}
</script>
<style scoped>
.login-page {
display: flex;
height: 100vh;
}
.login-left {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
}
.login-box {
width: 350px;
}
.title {
font-size: 24px;
font-weight: bold;
margin-bottom: 32px;
text-align: center;
}
.login-btn {
width: 100%;
}
.login-right {
flex: 1;
background-color: #f5f5f5;
overflow: hidden;
}
.bg-image {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>

View File

@ -0,0 +1,26 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'node:path'
// https://vite.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src') // 添加这行:@ -> src
}
},
server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
}
})

View File

@ -9,6 +9,7 @@ import javax.crypto.SecretKey;
import java.nio.charset.StandardCharsets;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
public class TokenUtil {
@ -27,8 +28,9 @@ public class TokenUtil {
* @param user
* @return JWT
*/
public static String generateToken(User user) {
public static String generateToken(User user, List<String> roleKeys) {
HashMap<String, Object> claims = new HashMap<>();
claims.put("role", roleKeys);
return Jwts.builder()
.subject(String.valueOf(user.getUserId()))
.claims(claims)

View File

@ -18,7 +18,6 @@ public class AuthController {
@Autowired
private AuthService authService;
/**
*
*
@ -31,6 +30,4 @@ public class AuthController {
String token = authService.authenticate(loginRequest);
return AjaxResult.success("登录成功", token);
}
}

View File

@ -2,6 +2,7 @@ package com.bruce.sams.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.bruce.sams.domain.ams.Activity;
import org.apache.ibatis.annotations.Mapper;
/**
* @author bruce
@ -9,6 +10,7 @@ import com.bruce.sams.domain.ams.Activity;
* @createDate 2025-02-20 16:01:31
* @Entity com.bruce.sams.domain.ams.Activity
*/
@Mapper
public interface ActivityMapper extends BaseMapper<Activity> {
}

View File

@ -2,6 +2,7 @@ package com.bruce.sams.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.bruce.sams.domain.sys.File;
import org.apache.ibatis.annotations.Mapper;
/**
* @author bruce
@ -9,6 +10,7 @@ import com.bruce.sams.domain.sys.File;
* @createDate 2025-02-20 17:57:16
* @Entity com.bruce.sams.domain.sys.File
*/
@Mapper
public interface FileMapper extends BaseMapper<File> {
}

View File

@ -3,8 +3,11 @@ package com.bruce.sams.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.bruce.sams.domain.sys.Role;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import java.util.List;
/**
* @author bruce
* @description sys_role()Mapper
@ -14,8 +17,17 @@ import org.apache.ibatis.annotations.Select;
@Mapper
public interface RoleMapper extends BaseMapper<Role> {
@Select("SELECT * FROM sys_role WHERE role_id = #{roleId}")
Role findByRoleId(Long roleId);
Role findByRoleId(@Param("roleId")Long roleId);
/**
* role_key
* @param userId ID
* @return
*/
@Select("SELECT r.role_key FROM sys_role r " +
"JOIN sys_user_role ur ON r.role_id = ur.role_id " +
"WHERE ur.user_id = #{userId}")
List<String> getRoleKeysByUserId(@Param("userId") Long userId);
}

View File

@ -8,11 +8,16 @@ import com.bruce.sams.common.utils.PasswordUtil;
import com.bruce.sams.common.utils.TokenUtil;
import com.bruce.sams.domain.entity.LoginRequest;
import com.bruce.sams.domain.sys.User;
import com.bruce.sams.domain.sys.UserRole;
import com.bruce.sams.mapper.RoleMapper;
import com.bruce.sams.mapper.UserMapper;
import com.bruce.sams.mapper.UserRoleMapper;
import com.bruce.sams.service.AuthService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
/**
*
*/
@ -22,6 +27,9 @@ public class AuthServiceImpl implements AuthService {
@Autowired
private UserMapper userMapper;
@Autowired
private RoleMapper roleMapper;
/**
*
*
@ -54,8 +62,8 @@ public class AuthServiceImpl implements AuthService {
if (UserStatus.BANNED.equals(user.getStatus())) {
throw new AccountDisabledException();
}
List<String> roleKeys = roleMapper.getRoleKeysByUserId(user.getUserId());
// 生成 JWT 令牌
return TokenUtil.generateToken(user);
return TokenUtil.generateToken(user,roleKeys);
}
}

View File

@ -1,3 +1,5 @@
server:
port: 8080
spring:
application:
name: SAMS