论坛移动端优化

This commit is contained in:
曙光 2024-10-02 12:11:12 +08:00
parent 488a01f4ee
commit 43767a8fb9
2 changed files with 159 additions and 47 deletions

View File

@ -20,7 +20,7 @@ export type OpenAPIConfig = {
}; };
export const OpenAPI: OpenAPIConfig = { export const OpenAPI: OpenAPIConfig = {
BASE: 'http://localhost:8101', BASE: 'http://oj.shuguangwl.com:8101',
VERSION: '1.0', VERSION: '1.0',
WITH_CREDENTIALS: true, WITH_CREDENTIALS: true,
CREDENTIALS: 'include', CREDENTIALS: 'include',

View File

@ -1,23 +1,28 @@
<template> <template>
<div class="forum-container"> <div class="forum-container">
<!-- 侧边栏 --> <!-- 侧边栏 -->
<aside class="sidebar" style="color: var(--text-color);"> <aside class="sidebar" :class="{ 'sidebar-hidden': isSidebarHidden }">
<h3 class="sidebar-title" style="color: var(--text-color);">分类</h3> <h3 class="sidebar-title">分类</h3>
<ul class="category-list" style="color: var(--text-color);"> <ul class="category-list">
<li <li
v-for="category in categories" v-for="category in categories"
:key="category.id" :key="category.id"
@click="selectCategory(category)" @click="selectCategory(category)"
:class="{ active: selectedCategory && selectedCategory.id === category.id }" :class="{ active: selectedCategory && selectedCategory.id === category.id }"
> >
{{ category.name }} {{ category.name }}
</li> </li>
</ul> </ul>
</aside> </aside>
<!-- 主内容区域 --> <!-- 主内容区域 -->
<main class="main-content"> <main class="main-content">
<!-- 发布帖子按钮 -->
<div class="post-button-container">
<a-button type="primary" @click="openPostModal">发布帖子</a-button>
<a-button class="sidebar-toggle" @click="toggleSidebar">切换侧边栏</a-button>
</div>
<a-list <a-list
class="list-demo-action-layout" class="list-demo-action-layout"
:bordered="false" :bordered="false"
@ -25,22 +30,17 @@
:pagination-props="paginationProps" :pagination-props="paginationProps"
> >
<template #item="{ item }"> <template #item="{ item }">
<a-list-item class="list-demo-item" action-layout="vertical" style="display: flex;flex-direction: row;justify-content: center;align-items: center;"> <a-list-item class="list-demo-item" action-layout="vertical" style="display: flex;
flex-direction: row;justify-content: center;
<template #actions> align-items: center;">
<template #actions>
<span><icon-heart />{{ item.thumbNum }}</span> <span><icon-heart />{{ item.thumbNum }}</span>
<span><icon-star />{{ item.favourNum }}</span> <span><icon-star />{{ item.favourNum }}</span>
<span><icon-message />收藏</span> <span><icon-message />收藏</span>
</template>
<template #content>
<div class="content-area">
你好你好你好你好你好你好你好你好你好你好你好你好你好你好
</div>
</template> </template>
<template #extra> <template #extra>
<div class="image-area"> <div class="image-area">
<img alt="arco-design" :src="item.imageSrc || `https://api.miaomc.cn/image/get?${Math.random()}`" /> <img alt="arco-design" :src="item.imageSrc || `https://api.miaomc.cn/image/get?${Math.random()}`" />
</div> </div>
</template> </template>
<a-list-item-meta :title="item.title" :description="item.content"> <a-list-item-meta :title="item.title" :description="item.content">
@ -53,17 +53,47 @@
</a-list-item> </a-list-item>
</template> </template>
</a-list> </a-list>
<!-- 发布帖子模态框 -->
<a-modal
v-model:visible="isModalVisible"
title="发布新帖子"
ok-text="发布"
cancel-text="取消"
@ok="submitPost"
>
<a-form layout="vertical" :model="newPost">
<a-form-item label="标题">
<a-input v-model="newPost.title" placeholder="请输入帖子标题" />
</a-form-item>
<a-form-item label="内容">
<!-- <a-textarea v-model="newPost.content" placeholder="请输入帖子内容" rows="4" /> -->
<MdEditor :value="newPost.content" :handle-change="contentChange"></MdEditor>
</a-form-item>
<a-form-item label="标签">
<a-input v-model="newPost.tags" placeholder="请输入标签(用逗号分隔)" />
</a-form-item>
</a-form>
</a-modal>
</main> </main>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, reactive, onMounted } from 'vue'; import { ref, reactive, onMounted } from 'vue';
import { PostControllerService } from '../../../generated'; // import { PostControllerService } from '../../../generated'; //
import MdEditor from '@/components/MdEditor.vue'
// //
const article = ref([]); // const article = ref([]); //
//
const isSidebarHidden = ref(false); //
// /
const toggleSidebar = () => {
isSidebarHidden.value = !isSidebarHidden.value;
};
// //
const categories = ref([ const categories = ref([
{ id: 1, name: "所有文章" }, { id: 1, name: "所有文章" },
@ -81,7 +111,7 @@ const paginationProps = reactive({
current: 1, current: 1,
onChange: (page) => fetchData(page), // onChange: (page) => fetchData(page), //
}); });
const getRandomImg=()=>{return }
// //
const fetchData = async (page = 1) => { const fetchData = async (page = 1) => {
try { try {
@ -91,6 +121,7 @@ const fetchData = async (page = 1) => {
categoryId: selectedCategory.value ? selectedCategory.value.id : null, // categoryId: selectedCategory.value ? selectedCategory.value.id : null, //
}); });
if (res.code === 0) { if (res.code === 0) {
paginationProps.page++
// //
article.value = res.data.records.map((item) => ({ article.value = res.data.records.map((item) => ({
...item, ...item,
@ -107,13 +138,53 @@ const fetchData = async (page = 1) => {
onMounted(() => { onMounted(() => {
fetchData(); fetchData();
}); });
const contentChange=(msg)=>{
newPost.content=msg
}
// //
const selectCategory = (category) => { const selectCategory = (category) => {
selectedCategory.value = category; selectedCategory.value = category;
fetchData(); // fetchData(); //
}; };
//
const isModalVisible = ref(false); //
const newPost = reactive({
title: '',
content: '',
tags: '',
});
const openPostModal = () => {
isModalVisible.value = true; //
};
const submitPost = async () => {
if (!newPost.title || !newPost.content) {
alert("请填写标题和内容");
return;
}
//
try {
const result = await PostControllerService.addPostUsingPost({
title: newPost.title,
content: newPost.content,
tags: newPost.tags.split(',').map(tag => tag.trim()),
});
if (result.code === 0) {
alert("帖子发布成功");
fetchData(); //
isModalVisible.value = false; //
} else {
alert("帖子发布失败: " + result.message);
}
} catch (error) {
console.error("发布帖子失败", error);
}
};
// dataSource // dataSource
const dataSource = article; const dataSource = article;
</script> </script>
@ -124,25 +195,29 @@ const dataSource = article;
display: flex; display: flex;
padding: 20px; padding: 20px;
gap: 20px; gap: 20px;
color:--text-color; color: var(--text-color);
min-height: 100vh;
} }
/* 侧边栏样式 */
.sidebar { .sidebar {
flex: 0 0 250px;
flex: 0 0 200px; background-color: var(--background-secondary-color);
background-color: --background-color;
padding: 15px; padding: 15px;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border: 0.5px solid #fff; transition: all 0.3s ease;
overflow: hidden;
}
.sidebar-hidden {
display: none; /* 隐藏侧边栏 */
} }
.sidebar-title { .sidebar-title {
font-size: 20px;
font-size: 18px;
font-weight: bold; font-weight: bold;
margin-bottom: 10px; margin-bottom: 15px;
text-align: center;
} }
.category-list { .category-list {
@ -152,31 +227,43 @@ const dataSource = article;
} }
.category-list li { .category-list li {
padding: 8px; padding: 10px;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 5px;
transition: background-color 0.3s; transition: background-color 0.3s, color 0.3s;
text-align: center;
font-weight: 500;
margin-bottom: 5px;
} }
.category-list li:hover { .category-list li:hover {
background-color: #d8d8d8; background-color: var(--primary-color-light);
color: white;
} }
.category-list li.active { .category-list li.active {
background-color: #1890ff; background-color: var(--primary-color);
color: white; color: white;
} }
/* 主内容区域样式 */ /* 主内容区域样式 */
.main-content { .main-content {
flex: 1; flex: 1;
padding: 20px;
background-color: var(--background-secondary-color);
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.post-button-container {
display: flex;
justify-content: space-between; /* 调整按钮位置 */
margin-bottom: 20px;
} }
.list-demo-action-layout { .list-demo-action-layout {
background-color: --background-color;
padding: 20px; padding: 20px;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
.list-demo-item { .list-demo-item {
@ -189,7 +276,8 @@ const dataSource = article;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 150px; width: 100%;
max-width: 300px; /* 设置最大宽度 */
height: 150px; height: 150px;
overflow: hidden; overflow: hidden;
border-radius: 8px; border-radius: 8px;
@ -198,7 +286,31 @@ const dataSource = article;
} }
.image-area img { .image-area img {
max-width: 100%; width: 100%;
max-height: 100%; height: auto;
object-fit: cover; /* 确保图片自适应显示 */
border-radius: 8px;
}
@media (max-width: 768px) {
.forum-container {
flex-direction: column; /* 将布局调整为垂直方向 */
padding: 10px;
}
.sidebar {
flex: 1;
width: 100%; /* 占满整个屏幕 */
}
.main-content {
width: 100%; /* 主内容也占满整个屏幕 */
}
.post-button-container {
justify-content: center;
}
} }
</style> </style>