From a927ad5a4dfeb5bc61ce45938ec9b3819e8a557b Mon Sep 17 00:00:00 2001 From: qingfeng1121 Date: Mon, 3 Nov 2025 16:14:55 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E7=99=BB=E5=BD=95):=20=E5=AE=8C=E5=96=84?= =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=80=BB=E8=BE=91=E5=92=8C=E7=94=A8=E6=88=B7?= =?UTF-8?q?=E4=BF=A1=E6=81=AF=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit refactor(文章): 重构文章创建和分类选择功能 style(布局): 调整主布局样式和响应式设计 fix(状态管理): 修正全局状态存储和清除逻辑 feat(登出): 添加登出功能按钮和逻辑 docs(类型): 扩展文章类型定义字段 --- src/layouts/MainLayout.vue | 51 ++-- src/layouts/establish.vue | 34 ++- src/services/articleService.js | 4 +- src/services/loginService.js | 2 + src/store/globalStore.js | 12 +- src/styles/MainLayout.css | 5 +- src/types/index.ts | 4 + src/views/articlesave.vue | 427 ++++++++++++++++++++++++++++++--- src/views/login.vue | 18 +- 9 files changed, 487 insertions(+), 70 deletions(-) diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue index 7d5f5b9..bb2e6d9 100644 --- a/src/layouts/MainLayout.vue +++ b/src/layouts/MainLayout.vue @@ -52,19 +52,21 @@

{{ heroText }}

- +
-

发癫中QAQ

+

{{Cardtitle}}

- +
+ +
- +
@@ -84,10 +86,13 @@ const router = useRouter(); const route = useRoute(); // 全局状态管理 import { useGlobalStore } from '@/store/globalStore' +import { Card } from 'ant-design-vue'; const globalStore = useGlobalStore() const Login = computed(() => globalStore.Login) // 响应式状态 +const Cardtitle = ref(''); +const isleftmodluecontainer = ref(true); const classhero = ref(false); const isconts = ref(false); const isScrollingleftmodlue = ref(false); @@ -97,7 +102,7 @@ const windowwidth = ref(true); const activeIndex = ref('home'); const localhome= 'home'; -let rpsliturl = route.path.split('/')[1]; +let rpsliturl = route.path.split('/'); // 搜索相关状态 const isSearchBoxOpen = ref(false); @@ -105,7 +110,7 @@ const searchKeyword = ref(''); let searchCloseTimer: number | undefined; // 打字机效果相关 -let fullHeroText = '测试打字机效果'; +let fullHeroText = '清疯不颠'; const heroText = ref(''); let heroIndex = 0; let heroTimer: number | undefined; @@ -218,7 +223,7 @@ const handleResize = () => { windowwidth.value = window.innerWidth > 768; // 根据屏幕大小调整内容区可见性 - if (rpsliturl === localhome) { + if (rpsliturl[1] === localhome) { isconts.value = window.innerWidth <= 768 ? true : false; } }; @@ -241,7 +246,7 @@ const handleScroll = () => { } // 首页内容区滚动动画 - if (rpsliturl === localhome) { + if (rpsliturl[1] === localhome) { isconts.value = window.scrollY > 200; isScrollingleftmodlue.value = window.scrollY > 600; } @@ -250,30 +255,34 @@ const handleScroll = () => { /** * 监听路由变化 */ -watch(() => route.path, (newPath) => { - rpsliturl = route.path.split('/')[1]; - updatePageState(rpsliturl); - setActiveIndex(rpsliturl); +watch(() => route.path, () => { + rpsliturl = route.path.split('/'); + updatePageState(rpsliturl[1]); + setActiveIndex(rpsliturl[1]); - const localname = route.path.split('/')[2]; + console.log(rpsliturl[1]) let articledata; // 优先使用attributeId参数（新接口） - if (localname==='aericletype') { + if (rpsliturl[2]==='aericletype') { articledata = globalStore.getValue('attribute') } // 搜索标题 - if (localname==='aericletitle') { + if (rpsliturl[2]==='aericletitle') { articledata = globalStore.getValue('title') } + if (rpsliturl[1]==='nonsense') { + articledata = "疯言疯语" + } // hero 标题 if (articledata) { - fullHeroText = articledata.name + Cardtitle.value = articledata.name + classhero.value = true; } // 跳转后回到顶部 window.scrollTo({ top: 0, behavior: 'smooth' }); // 首页内容区滚动动画仅大屏下生效 - if (newPath.split('/')[1] === localhome) { - isconts.value = window.innerWidth <= 768 ? true : false; + if (rpsliturl[1] === localhome && rpsliturl[2] == '') { + // isconts.value = window.innerWidth <= 768 ? true : false; // 首页时启动打字机效果 startTypewriter(); } else { @@ -281,6 +290,12 @@ watch(() => route.path, (newPath) => { heroText.value =fullHeroText; if (heroTimer) clearInterval(heroTimer); } + // 非首页时关闭左侧状态栏 + if (rpsliturl[1] == "articlesave") { + isleftmodluecontainer.value = false; + } else { + isleftmodluecontainer.value = true; + } }, { immediate: true }); /** diff --git a/src/layouts/establish.vue b/src/layouts/establish.vue index 8b5c369..31fc298 100644 --- a/src/layouts/establish.vue +++ b/src/layouts/establish.vue @@ -19,7 +19,7 @@ - diff --git a/src/views/login.vue b/src/views/login.vue index 00e6300..46a8427 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -144,24 +144,28 @@ const handleLogin = async () => { } try { // 模拟登录请求 - let user = await loginService.login(loginForm) + let user = await (await loginService.login(loginForm)).data if (!user) { ElMessage.error('登录失败，请检查用户名和密码') return } + console.log('登录成功', user) // 这里应该是实际的登录API调用 // console.log('登录请求数据:', loginForm) // 模拟登录成功 ElMessage.success('登录成功') // 登录成功后，设置全局状态为已登录 - globalStore.setLoginStatus(user.success) - globalStore.setLoading(user.success) + globalStore.setLoginStatus(true) console.log('globalStore.Login', globalStore.Login) - // 保存登录状态 - // if (loginForm.rememberMe) { - // localStorage.setItem('username', loginForm.username) - // } + // 保存登录状态token + if (user.token) { + localStorage.setItem('token', user.token) + } + if (user.username) { + // 记住用户名 + globalStore.setUsername(user.username) + } // 跳转到首页 router.push('/') } catch (error) {