fix:重构写作帖子样式 (#165)

src/router/index.ts

@@ -75,6 +75,10 @@ const routes: RouteRecordRaw[] = [
     path: '/test/editor',
     component: () => import('../views/test-posts/text-editor.vue'),
   },
+  {
+    path: '/test/write',
+    component: () => import('../views/test-posts/write.vue'),
+  }
 ]
 
 const router = createRouter({

src/views/test-posts/posts.vue

@@ -50,37 +50,37 @@
                     </nav>
                 </div>
                 <div class="posts">
-                    <div class="posts-select" >
-                        <div 
-                            class="zone"
-                            v-for="(zone) in zoneList"
-                            :key="zone.zoneId"
-                        >
-                            <input 
-                                type="radio"
-                                name="zone"
-                                :id="zone.zoneId"
-                                :value="zone.zoneId"
-                                v-model="zoneFatherId"
+                    <el-scrollbar height="100px">
+                        <div class="posts-select">
+                            <div 
+                                class="zone"
+                                v-for="(zone) in zoneList"
+                                :key="zone.zoneId"
                             >
-                            <label 
-                                :for="zone.zoneId" 
-                                @mouseover="mouseoverZone($event)"
-                                @mouseout="mouseoutZone($event)"
-                            >{{ zone.value }}</label>
-                        </div>
-                        <div 
-                            v-if="isShowZonePop"
-                            class="zone-pop"
-                            :style="{top: zonePopTop + 'px', left: zonePopLeft + 'px'}"
-                            @mouseover="isShowZonePop = true"
-                            @mouseout="isShowZonePop = false"
-                        >
-                            <ul>
-                                <li>二级分区1</li>
-                            </ul>
+                                <input 
+                                    type="radio"
+                                    name="zone"
+                                    :id="zone.zoneId"
+                                    :value="zone.zoneId"
+                                    v-model="zoneFatherId"
+                                >
+                                <label 
+                                    :for="zone.zoneId" 
+                                >{{ zone.value }}</label>
+                            </div>
+                            <div 
+                                v-if="isShowZonePop"
+                                class="zone-pop"
+                                :style="{top: zonePopTop + 'px', left: zonePopLeft + 'px'}"
+                                @mouseover="isShowZonePop = true"
+                                @mouseout="isShowZonePop = false"
+                            >
+                                <ul>
+                                    <li>二级分区1</li>
+                                </ul>
+                            </div>
                         </div>
-                    </div>
+                    </el-scrollbar>
                     <div class="posts-contents">
                         <div 
                             class="content"
@@ -100,7 +100,7 @@
                 </div>
                 <div class="rank-create">
                     <div class="create-post">
-                        <button @click="router.push('/test/editor')">创建帖子</button>
+                        <button @click="router.push('/test/write')">创建帖子</button>
                     </div>
                     <div class="post-rank">
                         <div class="post-rank-title">
@@ -181,14 +181,14 @@ import { errorMsg } from "@/utils/message";
 import { useStore } from "@/store";
 import { post } from '@/utils/request'
 import { TargetType, RelationType } from '@/utils/consts'
-import { t } from '@wangeditor/editor';
 
 const store = useStore()
 const navSelect = ref('all')
 const zoneFatherId = ref('root')
 const noMoreUsers = ref(false)
 const noMorePosts = ref(false)
 const isShowZonePop = ref(false)
+const ismouseover = ref<Array<boolean>>([])
 const userRankList = ref<HotUser[]>([])
 const postRankList = ref<HotPost[]>([])
     const postsList = ref<responseGetOtherPosts>({
@@ -197,7 +197,7 @@ const postRankList = ref<HotPost[]>([])
 const zonePopTop = ref(0)
 const zonePopLeft = ref(0)
 const zoneList = ref<Zone[]>([])
-const pageSize = 10; // 假设每页加载10项
+const pageSize = 99999; // 假设每页加载10项
 let userPage = 1; // 当前用户列表页码
 let postPage = 1; // 当前帖子列表页码
 
@@ -208,27 +208,6 @@ onMounted(async() => {
     postsList.value = await getOtherPosts()
 })
 
-//移入移出分区
-const mouseoverZone = (event: MouseEvent) => {
-    isShowZonePop.value = true
-    zonePopTop.value = event.clientY - 65
-    zonePopLeft.value = event.clientX - 20
-}
-const mouseoutZone = (event: any) => {
-    const pop = document.querySelector('.zone-pop')
-    if (pop) {
-        pop.addEventListener('mouseover', () => {
-            isShowZonePop.value = true
-        })
-        pop.addEventListener('mouseout', () => {
-            isShowZonePop.value = false
-        })
-    }
-    else if (event.target.className !== 'zone-pop') {
-        isShowZonePop.value = false
-    }
-}
-
 const splitDescription = (text: string) => {
     if (text.length > 6) return text.slice(0, 6) + '...'
     return text
@@ -380,10 +359,9 @@ const unfollowerUser = (user: any) => {
     
                 .posts-select {
                     max-height: 100px;
-                    overflow-y: auto;
-                    border-bottom: 1px solid #f0f0f0;
-                    display: flex;
-                    flex-wrap: wrap;
+                    display: grid;
+                    grid-template-columns: repeat(auto-fill, 1fr);
+                    grid-template-rows: repeat(auto-fill, 50px);
     
                     .zone {
                         height: 25px;
@@ -432,6 +410,7 @@ const unfollowerUser = (user: any) => {
                 }
     
                 .posts-contents {
+                    border-top: 1px solid #f0f0f0;
                     .content {
                         padding: 10px;
                         border-bottom: 1px solid #f0f0f0;

src/views/test-posts/text-editor.vue

@@ -1,10 +1,9 @@
 <template>
     <div class="editor-box">
         <div class="header">
-            <input type="text" placeholder="输入标题..." />
+            <input type="text" placeholder="输入标题..." v-model="title"/>
             <div class="options">
-                <button>存入草稿</button>
-                <button>设置帖子相关信息</button>
+                <button class="button-setting" @click="sendEditorMsg">{{ operateType }}帖子相关信息</button>
                 <img src="../../assets/images/logo.png" alt="">
             </div>
         </div>
@@ -17,7 +16,14 @@ import Vditor from 'vditor'
 import "vditor/dist/index.css"
 import { onMounted, ref } from 'vue';
 
-const vditor = ref({})
+const props = defineProps<{
+    sendOperateType: string
+}>()
+const vditor = ref()
+const title = ref<string>('')
+const operateType = ref<string>('')
+const emit = defineEmits(['sendEditorContents'])
+
 onMounted(() => {
     vditor.value = new Vditor('vditor', {
         placeholder: '输入...',
@@ -81,7 +87,18 @@ onMounted(() => {
             }
         ],
     })
+    if (props.sendOperateType !== '') {
+        operateType.value = props.sendOperateType
+    }
 })
+
+const sendEditorMsg = () => {
+    const text = vditor.value.getValue()
+    emit('sendEditorContents', {
+        title: title.value,
+        text
+    })
+}
 </script>
 
 <style scoped lang="css">
@@ -94,7 +111,6 @@ onMounted(() => {
 
     .header {
         display: flex;
-        justify-content: space-between;
         align-items: center;
 
         input {
@@ -116,23 +132,22 @@ onMounted(() => {
             align-items: center;
             gap: 20px;
 
-            button {
+            .button-setting {
                 padding: 10px 20px;
                 border: none;
                 outline: none;
                 cursor: pointer;
                 font-size: 20px;
-            }
-            button:first-child {
-                background-color: #f0f0f0;
-                border-radius: 5px;
-                color: #adadad;
-            }
-            button:nth-child(2) {
                 background-color: #7ebcff;
                 border-radius: 5px;
                 color: #ffffff;
             }
+            .button-setting:hover {
+                background-color: #5e9bfc;
+            }
+            .button-setting:active {
+                background-color: #4d8af9;
+            }
 
             img {
                 transform: scale(0.6);