feat: adjust reply panel width

src/components/quill-editor/EditorFooter.vue

@@ -20,8 +20,8 @@ import { storeToRefs } from 'pinia'
 
 // 话题编辑界面 store
 const { textCount } = storeToRefs(useKUNGalgameEditStore())
-// 话题界面的 store，用于回复
-const { replyDraft } = storeToRefs(useKUNGalgameTopicStore())
+// 话题界面的 store，用于回复和调整回复面板宽度
+const { replyDraft, replyPanelWidth } = storeToRefs(useKUNGalgameTopicStore())
 
 // 当前的路由
 const route = useRoute()
@@ -60,7 +60,16 @@ const handelClickSettings = () => {
         <Icon icon="uiw:setting-o" />
       </span>
 
+      <!-- 帮助插槽 -->
       <slot name="help" />
+      <input
+        class="panel-width"
+        type="range"
+        min="50"
+        max="100"
+        step="1"
+        v-model="replyPanelWidth"
+      />
     </div>
 
     <!-- 文字计数 -->
@@ -133,6 +142,9 @@ const handelClickSettings = () => {
       }
     }
   }
+  .panel-width {
+    margin-left: 20px;
+  }
 }
 
 .count {

src/components/quill-editor/QuillEditor.vue

@@ -45,16 +45,12 @@ const routeName = computed(() => route.name as string)
 // 定义父组件传参
 /**
  * @param {boolean} isShowToolbar - 是否显示工具栏
- * @param {boolean} isShowAdvance - 是否显示高级编辑模式
  * @param {boolean} isShowTitle - 是否显示标题
- * @param {boolean} isShowSettings - 是否显示编辑器设置
  */
 
 const props = defineProps<{
   isShowToolbar: boolean
-  isShowAdvance: boolean
   isShowTitle: boolean
-  isShowSettings: boolean
 }>()
 
 // 编辑器实例

src/store/modules/edit.ts

@@ -73,6 +73,7 @@ export const useKUNGalgameEditStore = defineStore({
       })
     },
     resetTopicData() {
+      this.textCount = 0
       this.title = ''
       this.content = ''
       this.tags = []

src/store/modules/topic.ts

@@ -82,6 +82,8 @@ interface Topic {
   // 要滚动到的回复 id
   scrollToReplyId: number
 
+  // 回复面板的宽度
+  replyPanelWidth: number
   // 回复的缓存
   replyDraft: ReplyDraft
   // 获取回复的请求接口格式
@@ -103,6 +105,7 @@ export const useKUNGalgameTopicStore = defineStore({
     // 回复 id 从 0 开始，-1 只是为了监测数据变化，用于 watchEffect
     scrollToReplyId: -1,
 
+    replyPanelWidth: 90,
     replyDraft: {
       editorHeight: 200,
       textCount: 0,
@@ -217,6 +220,7 @@ export const useKUNGalgameTopicStore = defineStore({
     },
     // 设置回复草稿为原始值，用于发布按钮
     resetReplyDraft() {
+      this.replyDraft.textCount = 0
       this.replyDraft.tid = 0
       this.replyDraft.r_uid = 0
       this.replyDraft.replyUserName = ''

src/views/topic/components/ReplyPanel.vue

@@ -6,7 +6,7 @@ import { Icon } from '@iconify/vue'
 import 'animate.css'
 
 // 导入 Vue 异步函数
-import { computed, defineAsyncComponent } from 'vue'
+import { ref, computed, defineAsyncComponent } from 'vue'
 
 // 导入编辑器
 const QuillEditor = defineAsyncComponent(
@@ -26,7 +26,7 @@ import { useKUNGalgameTopicStore } from '@/store/modules/topic'
 import { storeToRefs } from 'pinia'
 
 // 使用话题页面的 store
-const { isShowAdvance, isEdit, replyDraft } = storeToRefs(
+const { isShowAdvance, isEdit, replyDraft, replyPanelWidth } = storeToRefs(
   useKUNGalgameTopicStore()
 )
 
@@ -34,6 +34,8 @@ const position = computed(() => {
   return replyDraft.value.to_floor === 0 ? 'master' : 'reply'
 })
 
+const panelWidth = computed(() => `${replyPanelWidth.value}%`)
+
 const handelClosePanel = () => {
   isShowAdvance.value = false
   isEdit.value = false
@@ -47,7 +49,7 @@ const handelClosePanel = () => {
       leave-active-class="animate__animated animate__fadeOutDown animate__faster"
     >
       <div class="root" v-if="isEdit">
-        <div class="container">
+        <div class="container" :style="`width: ${panelWidth}`">
           <!-- 回复面板回复给谁 -->
           <div class="title">
             <h3>
@@ -70,11 +72,8 @@ const handelClosePanel = () => {
           <!-- 回复的编辑器 -->
           <div class="content">
             <QuillEditor
-              :height="200"
               :is-show-toolbar="isShowAdvance"
-              :is-show-advance="false"
               :is-show-title="false"
-              :is-show-settings="false"
             />
           </div>
           <!-- 回复的页脚 -->
@@ -108,7 +107,7 @@ const handelClosePanel = () => {
   z-index: 1;
 }
 .container {
-  width: 90%;
+  transition: all 0.2s;
   max-width: 1000px;
   max-height: 77vh;
   overflow-y: scroll;

src/views/topic/components/ReplyPanelBtn.vue

@@ -96,6 +96,7 @@ const handleShowAdvance = () => {
   padding: 10px;
   width: 100%;
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
 }
@@ -103,12 +104,14 @@ const handleShowAdvance = () => {
 .btn-container button {
   margin: 10px 0;
   height: 40px;
-  width: 200px;
-  font-size: 20px;
+  width: 150px;
+  font-size: 17px;
   white-space: nowrap;
+  border-radius: 5px;
   overflow: hidden;
   cursor: pointer;
   flex-shrink: 0;
+  transition: all 0.2s;
   &:hover {
     color: var(--kungalgame-white);
   }
@@ -116,7 +119,7 @@ const handleShowAdvance = () => {
 /* 确认按钮的样式 */
 .confirm-btn {
   color: var(--kungalgame-blue-4);
-  background-color: var(--kungalgame-trans-blue-1);
+  background-color: var(--kungalgame-trans-white-9);
   border: 1px solid var(--kungalgame-blue-4);
 }
 .confirm-btn:hover {
@@ -126,7 +129,7 @@ const handleShowAdvance = () => {
 /* 保存按钮的样式 */
 .save-btn {
   color: var(--kungalgame-pink-4);
-  background-color: var(--kungalgame-trans-pink-1);
+  background-color: var(--kungalgame-trans-white-9);
   border: 1px solid var(--kungalgame-pink-4);
 }
 .save-btn:hover {
@@ -140,7 +143,7 @@ const handleShowAdvance = () => {
 /* 高级选项按钮的样式 */
 .advance-btn {
   color: var(--kungalgame-red-5);
-  background-color: var(--kungalgame-trans-red-1);
+  background-color: var(--kungalgame-trans-white-9);
   border: 1px solid var(--kungalgame-red-5);
 }
 .advance-btn:hover {
@@ -157,9 +160,5 @@ const handleShowAdvance = () => {
   .advance-btn {
     display: none;
   }
-  .btn-container button {
-    width: 150px;
-    font-size: 17px;
-  }
 }
 </style>