xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf:优化样式

Browse Source
This commit is contained in:
Xwen
2023-12-24 16:07:13 +08:00
parent f391afaef8
commit 69cfb63d03
5 changed files with 89 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Yi.Bbs.Vue3/src/layout/AppBody.vue
View File

@@ -11,10 +11,8 @@
background-color: #f0f2f5; background-color: #f0f2f5;
} }
.content-main { .content-main {
margin: 0 auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 1300px;
min-height: 1150px; min-height: 1150px;
} }
</style> </style>

1
Yi.Bbs.Vue3/src/views/Article.vue
View File

@@ -393,7 +393,6 @@ watch(
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.article-box { .article-box {
position: absolute;
width: 1400px; width: 1400px;
height: 100%; height: 100%;
.comment { .comment {

2
Yi.Bbs.Vue3/src/views/Discuss.vue
View File

@@ -208,7 +208,7 @@ watch(
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.discuss-box { .discuss-box {
width: 100%; width: 1300px;
height: 100%; height: 100%;
.el-pagination { .el-pagination {
margin: 2rem 0rem 2rem 0rem; margin: 2rem 0rem 2rem 0rem;

163
Yi.Bbs.Vue3/src/views/EditArticle.vue
View File

@@ -1,7 +1,13 @@
<template> <template>
<div style="width: 100%"> <div style="width: 1300px">
<div class="body-div"> <div class="body-div">
<el-form label-width="120px" :model="editForm" label-position="left" :rules="rules" ref="ruleFormRef"> <el-form
label-width="120px"
:model="editForm"
label-position="left"
:rules="rules"
ref="ruleFormRef"
>
<el-form-item label="类型："> <el-form-item label="类型：">
<el-radio-group v-model="radio"> <el-radio-group v-model="radio">
<el-radio-button label="discuss">主题</el-radio-button> <el-radio-button label="discuss">主题</el-radio-button>
@@ -18,13 +24,18 @@
<el-radio-button label="User">部分用户可见</el-radio-button> <el-radio-button label="User">部分用户可见</el-radio-button>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="可见用户：" v-if="route.query.artType == 'discuss' && perRadio=='User'"> <el-form-item
<UserSelectInfo v-model="editForm.permissionUserIds"/> label="可见用户："
v-if="route.query.artType == 'discuss' && perRadio == 'User'"
>
<UserSelectInfo v-model="editForm.permissionUserIds" />
</el-form-item> </el-form-item>
<el-form-item
v-if="route.query.artType == 'article'"
<el-form-item v-if="route.query.artType == 'article'" label="子文章名称：" prop="name"> label="子文章名称："
prop="name"
>
<el-input placeholder="请输入" v-model="editForm.name" /> <el-input placeholder="请输入" v-model="editForm.name" />
</el-form-item> </el-form-item>
<el-form-item v-else label="标题：" prop="title"> <el-form-item v-else label="标题：" prop="title">
@@ -34,36 +45,48 @@
<el-input placeholder="请输入" v-model="editForm.introduction" /> <el-input placeholder="请输入" v-model="editForm.introduction" />
</el-form-item> </el-form-item>
<el-form-item label="内容：" prop="content"> <el-form-item label="内容：" prop="content">
<MavonEdit height="30rem" v-model="editForm.content" :codeStyle="codeStyle" /> <MavonEdit
height="30rem"
v-model="editForm.content"
:codeStyle="codeStyle"
/>
</el-form-item> </el-form-item>
<el-form-item label="封面：" v-if="route.query.artType == 'discuss'"> <el-form-item label="封面：" v-if="route.query.artType == 'discuss'">
<!-- 主题封面选择 -->
<!-- 主题封面选择 --> <el-upload
class="avatar-uploader"
<el-upload :action="fileUploadUrl"
class="avatar-uploader" :show-file-list="false"
:action="fileUploadUrl" :on-success="onSuccess"
:show-file-list="false" >
:on-success="onSuccess" <el-image
> v-if="dialogImageUrl"
<el-image v-if="dialogImageUrl" :src="getUrl(dialogImageUrl)" style="width: 178px;height: 178px;" class="avatar" /> :src="getUrl(dialogImageUrl)"
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> style="width: 178px; height: 178px"
</el-upload> class="avatar"
/>
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
</el-form-item> </el-form-item>
<el-form-item label="标签：" prop="types"> <el-form-item label="标签：" prop="types">
<el-input placeholder="请输入" v-model="editForm.types" /> <el-input placeholder="请输入" v-model="editForm.types" />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="submit(ruleFormRef)" class="submit-btn" type="primary">提交</el-button></el-form-item> <el-button
@click="submit(ruleFormRef)"
class="submit-btn"
type="primary"
>提交</el-button
></el-form-item
>
</el-form> </el-form>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import MavonEdit from "@/components/MavonEdit.vue"; import MavonEdit from "@/components/MavonEdit.vue";
import UserSelectInfo from '@/components/UserSelectInfo.vue' import UserSelectInfo from "@/components/UserSelectInfo.vue";
import { ref, reactive, onMounted } from "vue"; import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
@@ -82,24 +105,23 @@ import {
//数据定义 //数据定义
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const perRadio=ref("Public"); const perRadio = ref("Public");
const radio = ref(route.query.artType); const radio = ref(route.query.artType);
const codeStyle = "atom-one-dark"; const codeStyle = "atom-one-dark";
//封面完整显示的url //封面完整显示的url
const fileUploadUrl=`${import.meta.env.VITE_APP_BASEAPI}/file` const fileUploadUrl = `${import.meta.env.VITE_APP_BASEAPI}/file`;
//封面的url //封面的url
const dialogImageUrl = ref('') const dialogImageUrl = ref("");
//文件上传成功后 //文件上传成功后
const onSuccess=(response)=>{ const onSuccess = (response) => {
dialogImageUrl.value=response.data[0].id dialogImageUrl.value = response.data[0].id;
} };
//封面url //封面url
const getUrl= (str)=>{ const getUrl = (str) => {
return `${import.meta.env.VITE_APP_BASEAPI}/file/${str}` return `${import.meta.env.VITE_APP_BASEAPI}/file/${str}`;
} };
//整个页面上的表单 //整个页面上的表单
const editForm = reactive({ const editForm = reactive({
@@ -108,17 +130,14 @@ const editForm = reactive({
introduction: "", introduction: "",
content: "", content: "",
name: "", name: "",
permissionUserIds:[] permissionUserIds: [],
}); });
//组装主题内容： 需要更新主题信息 //组装主题内容： 需要更新主题信息
const discuss = { const discuss = {};
};
//组装文章内容：需要添加的文章信息 //组装文章内容：需要添加的文章信息
const article = { const article = {};
};
//定义效验规则 //定义效验规则
const ruleFormRef = ref(null); const ruleFormRef = ref(null);
@@ -127,9 +146,7 @@ const rules = reactive({
{ required: true, message: "请输入标题", trigger: "blur" }, { required: true, message: "请输入标题", trigger: "blur" },
{ min: 3, max: 40, message: "长度 3 到 20", trigger: "blur" }, { min: 3, max: 40, message: "长度 3 到 20", trigger: "blur" },
], ],
name: [ name: [{ required: true, message: "请输入子文章名称", trigger: "blur" }],
{ required: true, message: "请输入子文章名称", trigger: "blur" },
],
content: [ content: [
{ required: true, message: "请输入内容", trigger: "blur" }, { required: true, message: "请输入内容", trigger: "blur" },
{ min: 10, message: "长度 大于 10", trigger: "blur" }, { min: 10, message: "长度 大于 10", trigger: "blur" },
@@ -142,25 +159,23 @@ const submit = async (formEl) => {
if (valid) { if (valid) {
//dicuss主题处理 //dicuss主题处理
if (route.query.artType == "discuss") { if (route.query.artType == "discuss") {
discuss.title = editForm.title; discuss.title = editForm.title;
discuss.types = editForm.types; discuss.types = editForm.types;
discuss.introduction = editForm.introduction; discuss.introduction = editForm.introduction;
discuss.content = editForm.content; discuss.content = editForm.content;
discuss.plateId = discuss.plateId ?? route.query.plateId discuss.plateId = discuss.plateId ?? route.query.plateId;
discuss.cover=dialogImageUrl.value; discuss.cover = dialogImageUrl.value;
discuss.permissionType=perRadio.value; discuss.permissionType = perRadio.value;
discuss.permissionUserIds=editForm.permissionUserIds; discuss.permissionUserIds = editForm.permissionUserIds;
//主题创建 //主题创建
if (route.query.operType == "create") { if (route.query.operType == "create") {
const response = await discussAdd(discuss); const response = await discussAdd(discuss);
ElMessage({ ElMessage({
message: `[${discuss.title}]主题创建成功！`, message: `[${discuss.title}]主题创建成功！`,
type: 'success', type: "success",
}) });
var routerPer = { path: `/article/${response.data.id}` }; var routerPer = { path: `/article/${response.data.id}` };
router.push(routerPer); router.push(routerPer);
} }
@@ -170,8 +185,8 @@ const submit = async (formEl) => {
ElMessage({ ElMessage({
message: `[${discuss.title}]主题更新成功！`, message: `[${discuss.title}]主题更新成功！`,
type: 'success', type: "success",
}) });
var routerPer = { path: `/article/${route.query.discussId}` }; var routerPer = { path: `/article/${route.query.discussId}` };
router.push(routerPer); router.push(routerPer);
} }
@@ -183,15 +198,17 @@ const submit = async (formEl) => {
article.content = editForm.content; article.content = editForm.content;
article.name = editForm.name; article.name = editForm.name;
article.discussId = route.query.discussId; article.discussId = route.query.discussId;
article.parentId = route.query.parentArticleId article.parentId = route.query.parentArticleId;
//文章创建 //文章创建
if (route.query.operType == "create") { if (route.query.operType == "create") {
const response = await articleAdd(article); const response = await articleAdd(article);
ElMessage({ ElMessage({
message: `[${article.name}]文章创建成功！`, message: `[${article.name}]文章创建成功！`,
type: 'success', type: "success",
}) });
var routerPer = { path: `/article/${route.query.discussId}/${response.data.id}` }; var routerPer = {
path: `/article/${route.query.discussId}/${response.data.id}`,
};
router.push(routerPer); router.push(routerPer);
} }
//文章更新 //文章更新
@@ -199,9 +216,11 @@ const submit = async (formEl) => {
await articleUpdate(route.query.articleId, article); await articleUpdate(route.query.articleId, article);
ElMessage({ ElMessage({
message: `[${article.name}]文章更新成功！`, message: `[${article.name}]文章更新成功！`,
type: 'success', type: "success",
}) });
var routerPer = { path: `/article/${route.query.discussId}/${route.query.articleId}` }; var routerPer = {
path: `/article/${route.query.discussId}/${route.query.articleId}`,
};
router.push(routerPer); router.push(routerPer);
} }
} }
@@ -217,7 +236,6 @@ const submit = async (formEl) => {
onMounted(async () => { onMounted(async () => {
//如果是更新操作，需要先查询 //如果是更新操作，需要先查询
if (route.query.operType == "update") { if (route.query.operType == "update") {
//更新主题 //更新主题
if (route.query.artType == "discuss") { if (route.query.artType == "discuss") {
await loadDiscuss(); await loadDiscuss();
@@ -231,20 +249,20 @@ onMounted(async () => {
//加载主题 //加载主题
const loadDiscuss = async () => { const loadDiscuss = async () => {
const response = await discussGet(route.query.discussId); const response = await discussGet(route.query.discussId);
const res = response.data const res = response.data;
editForm.content = res.content; editForm.content = res.content;
editForm.title = res.title; editForm.title = res.title;
editForm.types = res.types; editForm.types = res.types;
editForm.introduction = res.introduction; editForm.introduction = res.introduction;
discuss.plateId = res.plateId; discuss.plateId = res.plateId;
dialogImageUrl.value= res.cover; dialogImageUrl.value = res.cover;
perRadio.value=res.permissionType; perRadio.value = res.permissionType;
editForm.permissionUserIds=res.permissionUserIds; editForm.permissionUserIds = res.permissionUserIds;
}; };
//加载文章 //加载文章
const loadArticle = async () => { const loadArticle = async () => {
const response = await articleGet(route.query.articleId); const response = await articleGet(route.query.articleId);
const res = response.data const res = response.data;
editForm.content = res.content; editForm.content = res.content;
editForm.name = res.name; editForm.name = res.name;
editForm.discussId = res.discussId; editForm.discussId = res.discussId;
@@ -262,19 +280,16 @@ const loadArticle = async () => {
padding: 1.5rem; padding: 1.5rem;
} }
.avatar-uploader >>> .el-upload {
.avatar-uploader >>>.el-upload {
border: 1px dashed var(--el-border-color); border: 1px dashed var(--el-border-color);
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
transition: var(--el-transition-duration-fast); transition: var(--el-transition-duration-fast);
} }
.avatar-uploader >>>.el-upload:hover { .avatar-uploader >>> .el-upload:hover {
border-color: var(--el-color-primary); border-color: var(--el-color-primary);
} }
@@ -285,10 +300,6 @@ const loadArticle = async () => {
height: 178px; height: 178px;
text-align: center; text-align: center;
} }
.el-upload .el-upload {
{
} }
</style> </style>

2
Yi.Bbs.Vue3/src/views/home/Index.vue
View File

@@ -160,7 +160,7 @@ const statisOptions = computed(() => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.home-box { .home-box {
width: 100%; width: 1300px;
height: 100%; height: 100%;
.introduce { .introduce {
color: rgba(0, 0, 0, 0.45); color: rgba(0, 0, 0, 0.45);