From 3fe629c2098e3c61b1dd5442443761ab8980e1f4 Mon Sep 17 00:00:00 2001
From: angu_o <127409900+anguoo@users.noreply.github.com>
Date: Mon, 1 Apr 2024 20:28:22 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E9=87=8D=E6=9E=84=E5=86=99=E4=BD=9C?=
 =?UTF-8?q?=E5=B8=96=E5=AD=90=E6=A0=B7=E5=BC=8F=20(#165)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts                  |   4 +
 src/views/test-posts/modify.vue      |  10 -
 src/views/test-posts/posts.vue       |  93 ++++----
 src/views/test-posts/text-editor.vue |  41 ++--
 src/views/test-posts/write.vue       | 305 ++++++++++++++++++++++++++-
 5 files changed, 372 insertions(+), 81 deletions(-)
 delete mode 100644 src/views/test-posts/modify.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index 92ccca9..ce3f94a 100644
--- a/src/router/index.ts
+++ b/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({
diff --git a/src/views/test-posts/modify.vue b/src/views/test-posts/modify.vue
deleted file mode 100644
index f52b6a1..0000000
--- a/src/views/test-posts/modify.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-    <div>
-    </div>
-</template>
-
-<script setup lang="ts">
-</script>
-
-<style scoped lang="css">
-</style>
\ No newline at end of file
diff --git a/src/views/test-posts/posts.vue b/src/views/test-posts/posts.vue
index 7c1befe..f97b2b2 100644
--- a/src/views/test-posts/posts.vue
+++ b/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,7 +181,6 @@ 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')
@@ -189,6 +188,7 @@ 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;
diff --git a/src/views/test-posts/text-editor.vue b/src/views/test-posts/text-editor.vue
index 2c81dbc..b4fa5e4 100644
--- a/src/views/test-posts/text-editor.vue
+++ b/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);
diff --git a/src/views/test-posts/write.vue b/src/views/test-posts/write.vue
index f52b6a1..a11ce29 100644
--- a/src/views/test-posts/write.vue
+++ b/src/views/test-posts/write.vue
@@ -1,10 +1,313 @@
 <template>
-    <div>
+    <div class="write-box">
+        <Editor 
+            class="editor-box"
+            :sendOperateType="createPostData"
+            @sendEditorContents="getEditorText"
+        />
+        <div class="setting-box" v-if="isClickSettingButton">
+            <div class="setting-panel">
+                <h1>设置帖子相关信息</h1>
+                <div class="setting-image">
+                    <span>设置帖子封面</span>
+                    <div class="add-image-box" v-if="!isHasUploadImage">
+                        <label for="addImage" class="add-image">
+                            <span>+ 添加图片</span>
+                        </label>
+                        <input 
+                            type="file" 
+                            id="addImage"
+                            accept="image/*"
+                            @change="uploadCoverImage($event)"
+                        >
+                    </div>
+                    <div 
+                        class="operate-image-box" 
+                        v-if="isHasUploadImage"
+                        @mouseover="ishowImageOperate = true"
+                        @mouseleave="ishowImageOperate = false"
+                    >
+                        <img :src="coverImageUrl">
+                        <div class="change-image" v-show="ishowImageOperate">
+                            <input 
+                                type="file" 
+                                id="changeImage"
+                                accept="image/*"
+                            >
+                            <label for="changeImage">更换</label>
+                            <label>删除</label>
+                        </div>
+                    </div>
+                </div>
+                <div class="setting-tags">
+                    <span>设置帖子标签</span>
+                    <span class="tags-list">
+                        标签1
+                        <i class="iconfont icon-cuowu1"></i>
+                    </span>
+                    <span>
+                        <i 
+                            class="iconfont icon-jia add-tag-button" 
+
+                        ></i>
+                    </span>
+                </div>
+                <div class="setting-store">
+                    <span>设置存储位置</span>
+                    <input 
+                        type="radio" 
+                        name="place" 
+                        id="public"
+                    >
+                    <label for="public">本地</label>
+                    <input 
+                        type="radio" 
+                        name="place" 
+                        id="private"
+                    >
+                    <label for="private">私密</label>
+                    <input 
+                        type="radio" 
+                        name="place" 
+                        id="draft"
+                    >
+                    <label for="draft">草稿箱</label>
+                </div>
+                <div class="button">
+                    <button>取消</button>
+                    <button>发布</button>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
+import Editor from './text-editor.vue'
+import { ref, onBeforeMount } from 'vue'
+
+const createPostData = ref('')
+const coverImageUrl = ref('')
+const isHasUploadImage = ref(false)
+const ishowImageOperate = ref(false) 
+const isClickSettingButton = ref(false)
+
+onBeforeMount(() => {
+    const option = location.href.split('/').pop()
+    const type = option === 'write' ? '设置' : option === 'edit' ? '编辑' : ''
+    createPostData.value = type
+})
+
+const getEditorText = (sendEditorContents: any) => {
+    isClickSettingButton.value = true
+}
+const uploadCoverImage = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    const file = target.files?.[0]
+    if (file == null) return
+    isHasUploadImage.value = true
+    coverImageUrl.value = URL.createObjectURL(file)
+}
 </script>
 
 <style scoped lang="css">
+.write-box {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .setting-box {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        padding: 10px;
+        background-color: #00000078;
+        top: 0;
+        left: 0;
+        z-index: 100;
+        overflow-y: auto;
+        display: flex;
+        justify-content: center;
+
+        .setting-panel {
+            width: 800px;
+            background-color: #fff;
+            box-shadow: 0 0 10px 0 #00000078;
+            border-radius: 10px;
+            margin: auto;
+            padding: 20px;
+
+            h1 {
+                font-size: 25px;
+                margin: 0;
+                margin-bottom: 20px;
+                padding: 0;
+            }
+
+            .setting-image {
+                width: 100%;
+                margin-bottom: 20px;
+                display: flex;
+
+                .add-image-box {
+                    width: 220px;
+                    height: 130px;
+                    margin-left: 30px;
+                    border: 1px dashed #ccc;
+
+                    .add-image {
+                        width: 100%;
+                        height: 100%;
+                        cursor: pointer;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        span {
+                            font-size: 18px;
+                            color: #ccc;
+                        }
+                    }
+
+                    input {
+                        display: none;
+                    }
+                }
+
+                .operate-image-box {
+                    position: relative;
+                    width: 220px;
+                    height: 130px;
+                    margin-left: 30px;
+
+                    img {
+                        width: 100%;
+                        height: 100%;
+                        object-fit: cover;
+                        border-radius: 10px;
+                        cursor: pointer;
+                    }
+
+                    .change-image {
+                        position: absolute;
+                        width: 100%;
+                        height: 100%;
+                        top: 0;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+
+                        label {
+                            cursor: pointer;
+                            background-color: #0000007d;
+                            color: #fffffff4;
+                            padding: 5px 10px;
+                            border-radius: 5px;
+                            margin: 0 2px;
+                        }
+                        
+                        input {
+                            display: none;
+                        }
+                    }
+                    .change-image:hover {
+                        background-color: #00000078;
+                        border-radius: 10px;
+                    }
+                }
+            }
+
+            .setting-tags {
+                width: 100%;
+                margin-bottom: 20px;
+                display: flex;
+
+                .tags-list {
+                    height: 20px;
+                    border: 1px solid #fdcc91;
+                    color: #bc843f;
+                    font-size: 13px;
+                    padding: 0 10px;
+                    border-radius: 10px;
+                    user-select: none;
+                    display: block;
+                    gap: 10px;
+                    margin-right: 10px;
+
+                    i {
+                        cursor: pointer;
+                        font-size: 13px;
+                        color: #ccc;
+                        font-weight: 600;
+                    }
+                }
+
+                span {
+                    margin-right: 30px;
+                }
+                span:last-child {
+                    color: #ccc;
+                }
+
+                .add-tag-button {
+                    font-size: 25px;
+                    cursor: pointer;
+                }
+            }
+
+            .setting-store {
+                width: 100%;
+                margin-bottom: 20px;
+                display: flex;
+                align-items: center;
+
+                span {
+                    margin-right: 30px;
+                }
+
+                input {
+                    margin-right: 3px;
+                }
+
+                label {
+                    font-size: 15px;
+                    margin-right: 20px;
+                    cursor: pointer;
+                }
+            }
+
+            .button {
+                width: 100%;
+                display: flex;
+                justify-content: flex-end;
+                gap: 20px;
+
+                button {
+                    padding: 5px 20px;
+                    border: none;
+                    outline: none;
+                    cursor: pointer;
+                    font-size: 20px;
+                    background-color: #7ebcff;
+                    border-radius: 5px;
+                    color: #ffffff;
+                }
+                button:first-child {
+                    background-color: #ccc;
+                }
+                button:first-child:hover {
+                    background-color: #aaa;
+                }
+                button:first-child:active {
+                    background-color: #999;
+                }
+                button:last-child:hover {
+                    background-color: #5e9bfc;
+                }
+                button:last-child:active {
+                    background-color: #4d8af9;
+                }
+            }
+        }
+    }
+}
 </style>
\ No newline at end of file