From b61d2352216f3ad731e5762a3ea34a1ce4a3f3a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9B=AE=E6=A3=83?= <BT-Muli@outlook.com>
Date: Fri, 28 Mar 2025 14:15:44 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E8=B0=83=E6=95=B4=E5=9B=9E?=
 =?UTF-8?q?=E5=A4=8D=E6=B5=AE=E7=AA=97=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/viewPost/vp-btn-reply.vue | 122 +++++++++++++++--------
 1 file changed, 79 insertions(+), 43 deletions(-)

diff --git a/src/components/viewPost/vp-btn-reply.vue b/src/components/viewPost/vp-btn-reply.vue
index 2a604599..73fa9362 100644
--- a/src/components/viewPost/vp-btn-reply.vue
+++ b/src/components/viewPost/vp-btn-reply.vue
@@ -22,24 +22,31 @@
       </template>
       <div class="tpr-main-reply">
         <div class="tpr-main-filter">
-          <div class="tpr-title" @click="handleDebug">回复列表</div>
-          <v-switch
-            v-model="onlyLz"
-            color="primary"
-            :hide-details="true"
-            title="只看楼主"
-            @change="reloadReply"
-          />
-          <v-select
-            class="tpr-select"
-            density="compact"
-            v-model="orderType"
-            :items="orderList"
-            item-title="label"
-            item-value="value"
-            title="排序方式"
-          />
-          <v-btn @click="showOverlay = false" icon="mdi-close" class="tpr-btn-close" size="32" />
+          <div class="tpr-title">
+            <span title="刷新" @click="handleDebug">回复列表</span>
+            <v-btn @click="showOverlay = false" icon="mdi-close" class="tpr-btn-close" size="32" />
+          </div>
+          <div class="tpr-subtitle">
+            <div class="tpr-switch" @click="switchOnlyLz()">
+              <v-icon v-if="onlyLz" color="var(--tgc-od-green)">
+                mdi-checkbox-marked-circle-outline
+              </v-icon>
+              <v-icon v-else color="var(--tgc-od-white)">mdi-circle</v-icon>
+              <span>只看楼主</span>
+            </div>
+            <div class="tpr-select">
+              <v-select
+                :hide-details="true"
+                variant="outlined"
+                density="compact"
+                v-model="orderType"
+                :items="orderList"
+                item-title="label"
+                item-value="value"
+                label="排序方式"
+              />
+            </div>
+          </div>
         </div>
         <v-list class="tpr-reply-list">
           <VpReplyItem
@@ -114,6 +121,11 @@ async function showReply(): Promise<void> {
   await loadReply();
 }
 
+async function switchOnlyLz(): Promise<void> {
+  onlyLz.value = !onlyLz.value;
+  await reloadReply();
+}
+
 async function reloadReply(): Promise<void> {
   lastId.value = undefined;
   reply.value = [];
@@ -155,7 +167,7 @@ async function handleDebug(): Promise<void> {
   await reloadReply();
 }
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
 .tpr-main-box {
   position: fixed;
   bottom: 20px;
@@ -169,17 +181,10 @@ async function handleDebug(): Promise<void> {
   align-items: center;
   justify-content: center;
   border: 2px solid var(--common-shadow-8);
-}
 
-.tpr-btn:hover {
-  opacity: 0.8;
-}
-
-.tpr-btn-close {
-  border: 1px solid var(--common-shadow-2);
-  margin-left: auto;
-  background: var(--tgc-btn-1);
-  color: var(--btn-text);
+  &:hover {
+    opacity: 0.8;
+  }
 }
 
 .tpr-main-reply {
@@ -201,31 +206,62 @@ async function handleDebug(): Promise<void> {
 }
 
 .tpr-main-filter {
+  position: relative;
   display: flex;
+  flex-direction: column;
   width: 100%;
-  height: 40px;
-  align-items: center;
-  justify-content: flex-start;
+  align-items: flex-start;
+  justify-content: center;
   color: var(--app-page-content);
-  column-gap: 4px;
+  row-gap: 4px;
 }
 
 .tpr-title {
   position: relative;
-  padding: 2px 4px;
-  border-radius: 4px;
-  background: var(--tgc-od-blue);
-  color: var(--tgc-white-1);
-  cursor: pointer;
-  font-family: var(--font-title);
-  white-space: nowrap;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  span {
+    padding: 2px 4px;
+    border-radius: 4px;
+    background: var(--tgc-od-blue);
+    color: var(--tgc-white-1);
+    cursor: pointer;
+    font-family: var(--font-title);
+    white-space: nowrap;
+  }
+}
+
+.tpr-btn-close {
+  border: 1px solid var(--common-shadow-2);
+  margin-left: auto;
+  background: var(--tgc-btn-1);
+  color: var(--btn-text);
+}
+
+.tpr-subtitle {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .tpr-select {
   position: relative;
-  max-width: 100px;
-  height: 40px;
-  font-size: 12px;
+  width: 120px;
+}
+
+.tpr-switch {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 18px;
+  font-family: var(--font-title);
 }
 
 .tpr-reply-list {