From 69cfb63d03fa1aee8fa19383ff51b327c4f97b48 Mon Sep 17 00:00:00 2001
From: Xwen <929716663@qq.com>
Date: Sun, 24 Dec 2023 16:07:13 +0800
Subject: [PATCH] =?UTF-8?q?perf:=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Yi.Bbs.Vue3/src/layout/AppBody.vue    |   2 -
 Yi.Bbs.Vue3/src/views/Article.vue     |   1 -
 Yi.Bbs.Vue3/src/views/Discuss.vue     |   2 +-
 Yi.Bbs.Vue3/src/views/EditArticle.vue | 163 ++++++++++++++------------
 Yi.Bbs.Vue3/src/views/home/Index.vue  |   2 +-
 5 files changed, 89 insertions(+), 81 deletions(-)

diff --git a/Yi.Bbs.Vue3/src/layout/AppBody.vue b/Yi.Bbs.Vue3/src/layout/AppBody.vue
index 5cc8df80..4d22ac05 100644
--- a/Yi.Bbs.Vue3/src/layout/AppBody.vue
+++ b/Yi.Bbs.Vue3/src/layout/AppBody.vue
@@ -11,10 +11,8 @@
   background-color: #f0f2f5;
 }
 .content-main {
-  margin: 0 auto;
   display: flex;
   justify-content: center;
-  width: 1300px;
   min-height: 1150px;
 }
 </style>
diff --git a/Yi.Bbs.Vue3/src/views/Article.vue b/Yi.Bbs.Vue3/src/views/Article.vue
index 1f8d5798..e9a12022 100644
--- a/Yi.Bbs.Vue3/src/views/Article.vue
+++ b/Yi.Bbs.Vue3/src/views/Article.vue
@@ -393,7 +393,6 @@ watch(
 </script>
 <style scoped lang="scss">
 .article-box {
-  position: absolute;
   width: 1400px;
   height: 100%;
   .comment {
diff --git a/Yi.Bbs.Vue3/src/views/Discuss.vue b/Yi.Bbs.Vue3/src/views/Discuss.vue
index 86a8a241..4f77a5bb 100644
--- a/Yi.Bbs.Vue3/src/views/Discuss.vue
+++ b/Yi.Bbs.Vue3/src/views/Discuss.vue
@@ -208,7 +208,7 @@ watch(
 </script>
 <style scoped lang="scss">
 .discuss-box {
-  width: 100%;
+  width: 1300px;
   height: 100%;
   .el-pagination {
     margin: 2rem 0rem 2rem 0rem;
diff --git a/Yi.Bbs.Vue3/src/views/EditArticle.vue b/Yi.Bbs.Vue3/src/views/EditArticle.vue
index db0649da..a850d7e1 100644
--- a/Yi.Bbs.Vue3/src/views/EditArticle.vue
+++ b/Yi.Bbs.Vue3/src/views/EditArticle.vue
@@ -1,7 +1,13 @@
 <template>
-  <div style="width: 100%">
+  <div style="width: 1300px">
     <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-radio-group v-model="radio">
             <el-radio-button label="discuss">主题</el-radio-button>
@@ -18,13 +24,18 @@
             <el-radio-button label="User">部分用户可见</el-radio-button>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="可见用户：" v-if="route.query.artType == 'discuss' && perRadio=='User'">
-          <UserSelectInfo v-model="editForm.permissionUserIds"/>
+        <el-form-item
+          label="可见用户："
+          v-if="route.query.artType == 'discuss' && perRadio == 'User'"
+        >
+          <UserSelectInfo v-model="editForm.permissionUserIds" />
         </el-form-item>
 
-
-
-        <el-form-item v-if="route.query.artType == 'article'" label="子文章名称：" prop="name">
+        <el-form-item
+          v-if="route.query.artType == 'article'"
+          label="子文章名称："
+          prop="name"
+        >
           <el-input placeholder="请输入" v-model="editForm.name" />
         </el-form-item>
         <el-form-item v-else label="标题：" prop="title">
@@ -34,36 +45,48 @@
           <el-input placeholder="请输入" v-model="editForm.introduction" />
         </el-form-item>
         <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 label="封面：" v-if="route.query.artType == 'discuss'">
+          <!-- 主题封面选择 -->
 
-<!-- 主题封面选择 -->
-
-<el-upload
-    class="avatar-uploader"
-    :action="fileUploadUrl"
-    :show-file-list="false"
-    :on-success="onSuccess"
-  >
-    <el-image v-if="dialogImageUrl" :src="getUrl(dialogImageUrl)"  style="width: 178px;height: 178px;" class="avatar" />
-    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
-  </el-upload>
-          
-
+          <el-upload
+            class="avatar-uploader"
+            :action="fileUploadUrl"
+            :show-file-list="false"
+            :on-success="onSuccess"
+          >
+            <el-image
+              v-if="dialogImageUrl"
+              :src="getUrl(dialogImageUrl)"
+              style="width: 178px; height: 178px"
+              class="avatar"
+            />
+            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+          </el-upload>
         </el-form-item>
         <el-form-item label="标签：" prop="types">
           <el-input placeholder="请输入" v-model="editForm.types" />
         </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>
     </div>
   </div>
 </template>
 <script setup>
 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 { useRoute, useRouter } from "vue-router";
 
@@ -82,24 +105,23 @@ import {
 //数据定义
 const route = useRoute();
 const router = useRouter();
-const perRadio=ref("Public");
+const perRadio = ref("Public");
 const radio = ref(route.query.artType);
 const codeStyle = "atom-one-dark";
 
 //封面完整显示的url
-const fileUploadUrl=`${import.meta.env.VITE_APP_BASEAPI}/file`
+const fileUploadUrl = `${import.meta.env.VITE_APP_BASEAPI}/file`;
 //封面的url
-const dialogImageUrl = ref('')
+const dialogImageUrl = ref("");
 
 //文件上传成功后
-const onSuccess=(response)=>{
-  dialogImageUrl.value=response.data[0].id
-}
+const onSuccess = (response) => {
+  dialogImageUrl.value = response.data[0].id;
+};
 //封面url
-const getUrl= (str)=>{
-return `${import.meta.env.VITE_APP_BASEAPI}/file/${str}`
-}
-
+const getUrl = (str) => {
+  return `${import.meta.env.VITE_APP_BASEAPI}/file/${str}`;
+};
 
 //整个页面上的表单
 const editForm = reactive({
@@ -108,17 +130,14 @@ const editForm = reactive({
   introduction: "",
   content: "",
   name: "",
-  permissionUserIds:[]
+  permissionUserIds: [],
 });
 
 //组装主题内容： 需要更新主题信息
-const discuss = {
-
-};
+const discuss = {};
 
 //组装文章内容：需要添加的文章信息
-const article = {
-};
+const article = {};
 
 //定义效验规则
 const ruleFormRef = ref(null);
@@ -127,9 +146,7 @@ const rules = reactive({
     { required: true, message: "请输入标题", trigger: "blur" },
     { min: 3, max: 40, message: "长度 3 到 20", trigger: "blur" },
   ],
-  name: [
-    { required: true, message: "请输入子文章名称", trigger: "blur" },
-  ],
+  name: [{ required: true, message: "请输入子文章名称", trigger: "blur" }],
   content: [
     { required: true, message: "请输入内容", trigger: "blur" },
     { min: 10, message: "长度 大于 10", trigger: "blur" },
@@ -142,25 +159,23 @@ const submit = async (formEl) => {
     if (valid) {
       //dicuss主题处理
       if (route.query.artType == "discuss") {
-
-
         discuss.title = editForm.title;
         discuss.types = editForm.types;
         discuss.introduction = editForm.introduction;
         discuss.content = editForm.content;
-        discuss.plateId = discuss.plateId ?? route.query.plateId
-        discuss.cover=dialogImageUrl.value;
-        discuss.permissionType=perRadio.value;
+        discuss.plateId = discuss.plateId ?? route.query.plateId;
+        discuss.cover = dialogImageUrl.value;
+        discuss.permissionType = perRadio.value;
 
-        discuss.permissionUserIds=editForm.permissionUserIds;
+        discuss.permissionUserIds = editForm.permissionUserIds;
         //主题创建
         if (route.query.operType == "create") {
           const response = await discussAdd(discuss);
 
           ElMessage({
             message: `[${discuss.title}]主题创建成功！`,
-            type: 'success',
-        })
+            type: "success",
+          });
           var routerPer = { path: `/article/${response.data.id}` };
           router.push(routerPer);
         }
@@ -170,8 +185,8 @@ const submit = async (formEl) => {
 
           ElMessage({
             message: `[${discuss.title}]主题更新成功！`,
-            type: 'success',
-        })
+            type: "success",
+          });
           var routerPer = { path: `/article/${route.query.discussId}` };
           router.push(routerPer);
         }
@@ -183,15 +198,17 @@ const submit = async (formEl) => {
         article.content = editForm.content;
         article.name = editForm.name;
         article.discussId = route.query.discussId;
-        article.parentId = route.query.parentArticleId
+        article.parentId = route.query.parentArticleId;
         //文章创建
         if (route.query.operType == "create") {
           const response = await articleAdd(article);
           ElMessage({
             message: `[${article.name}]文章创建成功！`,
-            type: 'success',
-        })
-          var routerPer = { path: `/article/${route.query.discussId}/${response.data.id}` };
+            type: "success",
+          });
+          var routerPer = {
+            path: `/article/${route.query.discussId}/${response.data.id}`,
+          };
           router.push(routerPer);
         }
         //文章更新
@@ -199,9 +216,11 @@ const submit = async (formEl) => {
           await articleUpdate(route.query.articleId, article);
           ElMessage({
             message: `[${article.name}]文章更新成功！`,
-            type: 'success',
-        })
-          var routerPer = { path: `/article/${route.query.discussId}/${route.query.articleId}` };
+            type: "success",
+          });
+          var routerPer = {
+            path: `/article/${route.query.discussId}/${route.query.articleId}`,
+          };
           router.push(routerPer);
         }
       }
@@ -217,7 +236,6 @@ const submit = async (formEl) => {
 onMounted(async () => {
   //如果是更新操作，需要先查询
   if (route.query.operType == "update") {
-
     //更新主题
     if (route.query.artType == "discuss") {
       await loadDiscuss();
@@ -231,20 +249,20 @@ onMounted(async () => {
 //加载主题
 const loadDiscuss = async () => {
   const response = await discussGet(route.query.discussId);
-  const res = response.data
+  const res = response.data;
   editForm.content = res.content;
   editForm.title = res.title;
   editForm.types = res.types;
   editForm.introduction = res.introduction;
   discuss.plateId = res.plateId;
-  dialogImageUrl.value= res.cover;
-  perRadio.value=res.permissionType;
-  editForm.permissionUserIds=res.permissionUserIds;
+  dialogImageUrl.value = res.cover;
+  perRadio.value = res.permissionType;
+  editForm.permissionUserIds = res.permissionUserIds;
 };
 //加载文章
 const loadArticle = async () => {
   const response = await articleGet(route.query.articleId);
-  const res = response.data
+  const res = response.data;
   editForm.content = res.content;
   editForm.name = res.name;
   editForm.discussId = res.discussId;
@@ -262,19 +280,16 @@ const loadArticle = async () => {
   padding: 1.5rem;
 }
 
-
-
-.avatar-uploader >>>.el-upload {
+.avatar-uploader >>> .el-upload {
   border: 1px dashed var(--el-border-color);
   border-radius: 6px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
   transition: var(--el-transition-duration-fast);
-  
 }
 
-.avatar-uploader >>>.el-upload:hover {
+.avatar-uploader >>> .el-upload:hover {
   border-color: var(--el-color-primary);
 }
 
@@ -285,10 +300,6 @@ const loadArticle = async () => {
   height: 178px;
   text-align: center;
 }
-.el-upload
-{
-  
-
-
+.el-upload {
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/Yi.Bbs.Vue3/src/views/home/Index.vue b/Yi.Bbs.Vue3/src/views/home/Index.vue
index 33a784bc..6e98376d 100644
--- a/Yi.Bbs.Vue3/src/views/home/Index.vue
+++ b/Yi.Bbs.Vue3/src/views/home/Index.vue
@@ -160,7 +160,7 @@ const statisOptions = computed(() => {
 </script>
 <style scoped lang="scss">
 .home-box {
-  width: 100%;
+  width: 1300px;
   height: 100%;
   .introduce {
     color: rgba(0, 0, 0, 0.45);