qingfeng/MyfronyProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加分类创建功能并优化多个视图组件

Browse Source 
refactor(types): 将typename字段重命名为categoryname
style: 移除多余样式并调整页面布局
fix(login): 修复登录逻辑和状态管理
chore: 更新项目元数据和图标路径
This commit is contained in:
qingfeng1121
2026-01-08 11:01:09 +08:00
parent 3828a51aeb
commit 51607b945d
11 changed files with 47 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@@ -2,12 +2,15 @@
<html lang=""> <html lang="">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/blogicon.jpg"> <link rel="icon" href="./public/blogicon.jpg">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清疯不颠</title> <meta name="description" content="世界疯疯颠颠,我也疯疯颠颠。">
<title>清疯不颠 - 个人博客</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

16
src/layouts/MainLayout.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="elrow-top" :class="elrowtop"> <div class="elrow-top" v-if="islogin" :class="elrowtop">
<el-row justify="center"> <el-row justify="center">
<el-col :span="6" v-if="windowwidth"> <el-col :span="6" v-if="windowwidth">
<div class="grid-content ep-bg-purple-dark"> <div class="grid-content ep-bg-purple-dark">
@@ -54,7 +54,7 @@
</div> </div>
<!-- 内容区域 --> <!-- 内容区域 -->
<div id="content-section" :class="{ 'visible': iscontentvisible }"> <div id="content-section" :class="{ 'visible': iscontentvisible }">
<div class="nonsensetitle" v-if="classnonsenset"> <div class="nonsensetitle" v-if="classnonsenset">
<div class="nonsensetitleconst"> <div class="nonsensetitleconst">
<h1>{{ Cardtitle }}</h1> <h1>{{ Cardtitle }}</h1>
@@ -62,7 +62,7 @@
</div> </div>
<!-- 左侧模块 --> <!-- 左侧模块 -->
<div class="leftmodluecontainer" v-if="isleftmodluecontainer"> <div class="leftmodluecontainer" v-if="isleftmodluecontainer" >
<LeftModule class="leftmodluepage" @update-data="updateData" @CategoryModal="CategoryModal" <LeftModule class="leftmodluepage" @update-data="updateData" @CategoryModal="CategoryModal"
@AttributeModal="AttributeModal" :class="{ 'nonsensetmargintop': classmoduleorrouter }" v-if="windowwidth" /> @AttributeModal="AttributeModal" :class="{ 'nonsensetmargintop': classmoduleorrouter }" v-if="windowwidth" />
</div> </div>
@@ -71,7 +71,7 @@
<div class="RouterViewpage"> <div class="RouterViewpage">
<RouterView :class="{ 'forbidwidth': !isleftmodluecontainer, 'nonsensetmargintop': classmoduleorrouter }" /> <RouterView :class="{ 'forbidwidth': !isleftmodluecontainer, 'nonsensetmargintop': classmoduleorrouter }" />
<!-- 页脚 --> <!-- 页脚 -->
<Footer class="footer-container" v-if="windowwidth" /> <Footer class="footer-container" v-if="islogin" />
</div> </div>
</div> </div>
<!-- 分类蒙板组件 --> <!-- 分类蒙板组件 -->
@@ -156,6 +156,7 @@ const isleftmodluecontainer = ref(true);
const iscontentvisible = ref(false); const iscontentvisible = ref(false);
const isScrollingleftmodlue = ref(false); const isScrollingleftmodlue = ref(false);
const windowwidth = ref(true); const windowwidth = ref(true);
const islogin = ref(true);
// 导航相关状态 // 导航相关状态
const activeIndex = ref('home'); const activeIndex = ref('home');
@@ -413,7 +414,7 @@ const performSearch = () => {
*/ */
const handleResize = () => { const handleResize = () => {
// 更新窗口宽度状态 // 更新窗口宽度状态 大于768px时为桌面端
windowwidth.value = window.innerWidth > 768; windowwidth.value = window.innerWidth > 768;
// 首页特殊处理：小屏幕下默认显示内容区 // 首页特殊处理：小屏幕下默认显示内容区
@@ -519,6 +520,11 @@ const handleRouteChange = () => {
heroMarginBottom.value = `${2.5}%`; heroMarginBottom.value = `${2.5}%`;
heroTransform.value = ``; heroTransform.value = ``;
} }
// 登录界面不显示导航栏 登录界面不显示左侧模块 登录界面不显示底部模块
if (rpsliturl[1] === 'login') {
islogin.value = false;
windowwidth.value = false;
}
}; };
/** /**

16
src/layouts/establish.vue
View File

@@ -26,7 +26,7 @@
<div class="category-modal-body"> <div class="category-modal-body">
<el-select v-model="CategoryAttributeDto.categoryid" placeholder="请选择"> <el-select v-model="CategoryAttributeDto.categoryid" placeholder="请选择">
<el-option v-for="item in categories" :key="item.value" :label="item.label" :value="item.value"> <el-option v-for="item in categories" :key="item.categoryid" :label="item.categoryname" :value="item.categoryid">
</el-option> </el-option>
</el-select> </el-select>
@@ -90,7 +90,7 @@ const nonsenseContent = ref('')
* @type {import('vue').Ref<{categoryid: string, name: string}>} * @type {import('vue').Ref<{categoryid: string, name: string}>}
*/ */
const CategoryAttributeDto = ref({ const CategoryAttributeDto = ref({
categoryid: '', categoryid: 0,
name: '' name: ''
}) })
@@ -335,12 +335,12 @@ const createCategory = () => {
/** /**
* 保存分类 * 保存分类
* @param {string} typename - 分类名称 * @param {string} categoryname - 分类名称
*/ */
const saveCategory = (typename) => { const saveCategory = (categoryname) => {
// console.log('保存分类') // console.log('保存分类')
categoryService.createCategory({ categoryService.createCategory({
typename: typename categoryname: categoryname
}).then(response => { }).then(response => {
if (response.code === 200) { if (response.code === 200) {
ElMessage.success('分类创建成功'); ElMessage.success('分类创建成功');
@@ -359,11 +359,9 @@ const createAttribute = async () => {
showAttributes() showAttributes()
try { try {
const response = await categoryService.getAllCategories(); const response = await categoryService.getAllCategories();
console.log('response', response)
if (response.code === 200) { if (response.code === 200) {
categories.value = response.data.map(item => ({ categories.value = response.data
value: item.typeid,
label: item.typename
}))
} }
} catch (error) { } catch (error) {
handleErrorResponse(error, '获取分类失败'); handleErrorResponse(error, '获取分类失败');

2
src/services/apiService.js
View File

@@ -4,7 +4,7 @@ import { ElMessage } from 'element-plus'
// 创建axios实例 // 创建axios实例
const api = axios.create({ const api = axios.create({
baseURL: 'http://localhost:7071/api', baseURL: ' /api',
timeout: 10000, // 请求超时时间 timeout: 10000, // 请求超时时间
withCredentials: true // 允许跨域请求携带凭证（如cookies） withCredentials: true // 允许跨域请求携带凭证（如cookies）
}) })

4
src/services/categoryService.js
View File

@@ -18,6 +18,10 @@ class CategoryService {
getCategoryTree() { getCategoryTree() {
return api.get('/categories/tree') return api.get('/categories/tree')
} }
// 创建分类
createCategory(data) {
return api.post('/categories', data)
}
} }
// 创建并导出服务实例 // 创建并导出服务实例

4
src/types/index.ts
View File

@@ -80,7 +80,7 @@ export interface MessageDto {
*/ */
export interface Category { export interface Category {
Categoryid: number Categoryid: number
typename: string categoryname: string
description?: string description?: string
createdAt?: string createdAt?: string
updatedAt?: string updatedAt?: string
@@ -91,7 +91,7 @@ export interface Category {
* 分类DTO接口 * 分类DTO接口
*/ */
export interface CategoryDto { export interface CategoryDto {
typename: string categoryname: string
description?: string description?: string
} }

1
src/views/Footer.vue
View File

@@ -128,7 +128,6 @@ onUnmounted(() => {
.footer-content { .footer-content {
padding: 1rem; padding: 1rem;
margin: 0 1rem;
} }
.footer-content p { .footer-content p {

3
src/views/aboutme.vue
View File

@@ -123,8 +123,6 @@ const goToMessageBoard = () => {
<style scoped> <style scoped>
/* 主容器样式 */ /* 主容器样式 */
.about-page-container {
}
/* 内容包装器样式 */ /* 内容包装器样式 */
.about-content-wrapper { .about-content-wrapper {
@@ -286,7 +284,6 @@ const goToMessageBoard = () => {
border-bottom: none; border-bottom: none;
} }
.about-content-wrapper { .about-content-wrapper {
width: 100%;
padding: 20px; padding: 20px;
margin: 0 5%; margin: 0 5%;
} }

41
src/views/login.vue
View File

@@ -95,7 +95,7 @@ const errors = ref({
}) })
const loginForm = reactive({ const loginForm = reactive({
username: null, username: null,
password: null, password: null
}) })
// 切换密码显示状态 // 切换密码显示状态
@@ -143,17 +143,16 @@ const handleLogin = async () => {
if (!validateForm()) { if (!validateForm()) {
return return
} }
try { try {
// 模拟登录请求 // 模拟登录请求
let user = await (await loginService.login(loginForm)).data console.log('loginForm', loginForm)
if (!user) { let user = await loginService.login(loginForm)
console.log('user', user)
if (user.code !== 200) {
ElMessage.error('登录失败，请检查用户名和密码') ElMessage.error('登录失败，请检查用户名和密码')
return return
} }
// console.log('登录成功', user)
// 这里应该是实际的登录API调用
// console.log('登录请求数据:', loginForm)
// 模拟登录成功 // 模拟登录成功
ElMessage.success('登录成功') ElMessage.success('登录成功')
// 登录成功后，设置全局状态为已登录 // 登录成功后，设置全局状态为已登录
@@ -164,13 +163,8 @@ const handleLogin = async () => {
}) })
// console.log('globalStore.Login', globalStore.Login) // console.log('globalStore.Login', globalStore.Login)
// 保存登录状态token // 保存登录状态token
if (user.token) { localStorage.setItem('token', user.data.token)
localStorage.setItem('token', user.token) globalStore.setUsername(user.data.username)
}
if (user.username) {
// 记住用户名
globalStore.setUsername(user.username)
}
// 跳转到首页 // 跳转到首页
router.push('/') router.push('/')
} catch (error) { } catch (error) {
@@ -189,15 +183,6 @@ const handleForgotPassword = () => {
const handleSocialLogin = (provider) => { const handleSocialLogin = (provider) => {
ElMessage.info(`${provider} 登录功能开发中`) ElMessage.info(`${provider} 登录功能开发中`)
} }
// mounted() {
// // 从localStorage中恢复用户名
// const savedUsername = localStorage.getItem('username')
// if (savedUsername) {
// loginForm.username = savedUsername
// loginForm.rememberMe = true
// }
// }
</script> </script>
<style scoped> <style scoped>
@@ -206,16 +191,16 @@ const handleSocialLogin = (provider) => {
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; margin-left: 10%;
background-color: #f5f7fa; /* background-color: #f5f7fa; */
padding: 20px; padding: 20px;
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
/* 添加背景装饰 */ /* 添加背景装饰 */
.login-container::before, /* .login-container::before,
.login-container::after { .login-container::after {
content: ''; content: '';
position: absolute; position: absolute;
@@ -234,7 +219,7 @@ const handleSocialLogin = (provider) => {
.login-container::after { .login-container::after {
bottom: -100px; bottom: -100px;
left: -100px; left: -100px;
} } */
/* 登录表单包装器 */ /* 登录表单包装器 */
.login-form-wrapper { .login-form-wrapper {

7
src/views/messageboard.vue
View File

@@ -113,11 +113,10 @@
</el-form-item> </el-form-item>
<el-form-item prop="captcha"> <el-form-item prop="captcha">
<div class="captcha-input-wrapper"> <div class="captcha-input-wrapper">
<el-input v-model="form.captcha" placeholder="验证码" clearable :disabled="submitting" <el-input v-model="form.captcha" placeholder="验证码(点击刷新)" @click="generateCaptcha" clearable :disabled="submitting"
@focus="showCaptchaHint = true" @blur="showCaptchaHint = false" /> @focus="showCaptchaHint = true" @blur="showCaptchaHint = false" />
<div class="captcha-hint-popup" @click="generateCaptcha" v-show="showCaptchaHint"> <div class="captcha-hint-popup" v-show="showCaptchaHint">
{{ captchaHint }} {{ captchaHint }}
<span class="refresh-icon">↻</span>
</div> </div>
</div> </div>
</el-form-item> </el-form-item>
@@ -1037,7 +1036,7 @@ onMounted(() => {
/* 验证码提示弹窗 */ /* 验证码提示弹窗 */
.captcha-hint-popup { .captcha-hint-popup {
position: absolute; position: absolute;
top: -30px; top: -40px;
right: 0; right: 0;
background-color: #f0f9ff; background-color: #f0f9ff;
border: 1px solid #d9ecff; border: 1px solid #d9ecff;

3
src/views/nonsense.vue
View File

@@ -110,7 +110,6 @@ const loadNonsenseList = async () => {
displayedNonsenseList.value = response.data displayedNonsenseList.value = response.data
} else { } else {
ElMessage.error('加载吐槽内容失败') ElMessage.error('加载吐槽内容失败')
error.value = true
} }
} catch (err) { } catch (err) {
console.error('加载吐槽内容失败:', err) console.error('加载吐槽内容失败:', err)
@@ -368,7 +367,7 @@ onBeforeUnmount(() => {
.nonsense-item { .nonsense-item {
background-color: rgba(255, 255, 255, 0.85); background-color: rgba(255, 255, 255, 0.85);
border-radius: 10px; border-radius: 10px;
padding: 18px 20px 14px 20px; padding: 5px 20px 14px 20px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
position: relative; position: relative;
transition: box-shadow 0.2s, transform 0.2s ease; transition: box-shadow 0.2s, transform 0.2s ease;