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="">
<head>
<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">
<title>清疯不颠</title>
<meta name="description" content="世界疯疯颠颠,我也疯疯颠颠。">
<title>清疯不颠 - 个人博客</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

14
src/layouts/MainLayout.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="elrow-top" :class="elrowtop">
<div class="elrow-top" v-if="islogin" :class="elrowtop">
<el-row justify="center">
<el-col :span="6" v-if="windowwidth">
<div class="grid-content ep-bg-purple-dark">
@@ -62,7 +62,7 @@
</div>
<!-- 左侧模块 -->
<div class="leftmodluecontainer" v-if="isleftmodluecontainer">
<div class="leftmodluecontainer" v-if="isleftmodluecontainer" >
<LeftModule class="leftmodluepage" @update-data="updateData" @CategoryModal="CategoryModal"
@AttributeModal="AttributeModal" :class="{ 'nonsensetmargintop': classmoduleorrouter }" v-if="windowwidth" />
</div>
@@ -71,7 +71,7 @@
<div class="RouterViewpage">
<RouterView :class="{ 'forbidwidth': !isleftmodluecontainer, 'nonsensetmargintop': classmoduleorrouter }" />
<!-- 页脚 -->
<Footer class="footer-container" v-if="windowwidth" />
<Footer class="footer-container" v-if="islogin" />
</div>
</div>
<!-- 分类蒙板组件 -->
@@ -156,6 +156,7 @@ const isleftmodluecontainer = ref(true);
const iscontentvisible = ref(false);
const isScrollingleftmodlue = ref(false);
const windowwidth = ref(true);
const islogin = ref(true);
// 导航相关状态
const activeIndex = ref('home');
@@ -413,7 +414,7 @@ const performSearch = () => {
*/
const handleResize = () => {
// 更新窗口宽度状态
// 更新窗口宽度状态 大于768px时为桌面端
windowwidth.value = window.innerWidth > 768;
// 首页特殊处理：小屏幕下默认显示内容区
@@ -519,6 +520,11 @@ const handleRouteChange = () => {
heroMarginBottom.value = `${2.5}%`;
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">
<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-select>
@@ -90,7 +90,7 @@ const nonsenseContent = ref('')
* @type {import('vue').Ref<{categoryid: string, name: string}>}
*/
const CategoryAttributeDto = ref({
categoryid: '',
categoryid: 0,
name: ''
})
@@ -335,12 +335,12 @@ const createCategory = () => {
/**
* 保存分类
* @param {string} typename - 分类名称
* @param {string} categoryname - 分类名称
*/
const saveCategory = (typename) => {
const saveCategory = (categoryname) => {
// console.log('保存分类')
categoryService.createCategory({
typename: typename
categoryname: categoryname
}).then(response => {
if (response.code === 200) {
ElMessage.success('分类创建成功');
@@ -359,11 +359,9 @@ const createAttribute = async () => {
showAttributes()
try {
const response = await categoryService.getAllCategories();
console.log('response', response)
if (response.code === 200) {
categories.value = response.data.map(item => ({
value: item.typeid,
label: item.typename
}))
categories.value = response.data
}
} catch (error) {
handleErrorResponse(error, '获取分类失败');

2
src/services/apiService.js
View File

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

4
src/services/categoryService.js
View File

@@ -18,6 +18,10 @@ class CategoryService {
getCategoryTree() {
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 {
Categoryid: number
typename: string
categoryname: string
description?: string
createdAt?: string
updatedAt?: string
@@ -91,7 +91,7 @@ export interface Category {
* 分类DTO接口
*/
export interface CategoryDto {
typename: string
categoryname: string
description?: string
}

1
src/views/Footer.vue
View File

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

3
src/views/aboutme.vue
View File

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

41
src/views/login.vue
View File

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

7
src/views/messageboard.vue
View File

@@ -113,11 +113,10 @@
</el-form-item>
<el-form-item prop="captcha">
<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" />
<div class="captcha-hint-popup" @click="generateCaptcha" v-show="showCaptchaHint">
<div class="captcha-hint-popup" v-show="showCaptchaHint">
{{ captchaHint }}
<span class="refresh-icon">↻</span>
</div>
</div>
</el-form-item>
@@ -1037,7 +1036,7 @@ onMounted(() => {
/* 验证码提示弹窗 */
.captcha-hint-popup {
position: absolute;
top: -30px;
top: -40px;
right: 0;
background-color: #f0f9ff;
border: 1px solid #d9ecff;

3
src/views/nonsense.vue
View File

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