From e10e4c7f7564a0c15c58e098ebab34d234b3aa38 Mon Sep 17 00:00:00 2001
From: JustAnotherID <just-another-id@outlook.com>
Date: Mon, 27 May 2024 02:26:01 +0800
Subject: [PATCH] =?UTF-8?q?chore(CustomReply):=20=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E5=9B=9E=E5=A4=8D=E9=A1=B9=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../utils/custom-reply-condition.vue          | 57 +++++++++--------
 src/components/utils/nested.vue               | 61 +++++++++++--------
 2 files changed, 67 insertions(+), 51 deletions(-)

diff --git a/src/components/utils/custom-reply-condition.vue b/src/components/utils/custom-reply-condition.vue
index 02579f5a..37a632cb 100644
--- a/src/components/utils/custom-reply-condition.vue
+++ b/src/components/utils/custom-reply-condition.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {Delete, QuestionFilled} from "@element-plus/icons-vue";
+import {breakpointsTailwind, useBreakpoints} from "@vueuse/core";
 
 const condModel = defineModel();
 const cond: any = condModel.value
@@ -8,6 +9,9 @@ const props = defineProps<{
   key: number
 }>();
 
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const notMobile = breakpoints.greater('sm')
+
 const emit = defineEmits(['delete']);
 
 const deleteSelf = () => {
@@ -18,28 +22,34 @@ const deleteSelf = () => {
 
 <template>
   <div class="mb-3 pl-2 border-l-2 border-orange-500">
-    <div style="display: flex; justify-content: space-between;">
-      <el-select v-model="cond.condType">
-        <el-option
-            v-for="item in [{ 'label': '文本匹配', value: 'textMatch' }, { 'label': '文本长度', value: 'textLenLimit' }, { 'label': '表达式为真', value: 'exprTrue' }]"
-            :key="item.value" :label="item.label" :value="item.value"/>
-      </el-select>
+    <div class="pb-2 flex justify-between border-b">
+      <el-space>
+        <el-text>模式</el-text>
+        <el-radio-group size="small" v-model="cond.condType">
+          <el-radio-button value="textMatch" label="文本匹配"/>
+          <el-radio-button value="textLenLimit" label="文本长度"/>
+          <el-radio-button value="exprTrue" label="表达式为真"/>
+        </el-radio-group>
+      </el-space>
       <el-button type="danger" :icon="Delete" size="small" plain
-                 @click="deleteSelf">删除条件
+                 @click="deleteSelf">
+        <template #default v-if="notMobile">
+          删除条件
+        </template>
       </el-button>
     </div>
 
     <div v-if="cond.condType === 'textMatch'" style="display: flex;" class="mobile-changeline">
       <div style="width: 7rem; margin-right: 0.5rem;">
-        <div>方式：
+        <el-text>方式
           <el-tooltip raw-content
                       content="匹配方式一览:<br/>精确匹配: 完全相同时触发。<br/>任意相符: 如aa|bb，则aa或bb都能触发。<br/>包含文本: 包含此文本触发。<br/>不含文本: 不包含此文本触发。<br/>模糊匹配: 文本相似时触发<br/>正则匹配: 正则表达式匹配，语法请自行查阅<br/>前缀匹配: 文本以内容为开头<br/>后缀匹配: 文本以此内容为结尾">
             <el-icon>
               <question-filled/>
             </el-icon>
           </el-tooltip>
-        </div>
-        <el-select v-model="cond.matchType" placeholder="Select">
+        </el-text>
+        <el-select size="small" v-model="cond.matchType" placeholder="选择方式">
           <el-option
               v-for="item in [{ 'label': '精确匹配', value: 'matchExact' }, { 'label': '任意相符', value: 'matchMulti' }, { 'label': '包含文本', value: 'matchContains' }, { 'label': '不含文本', value: 'matchNotContains' }, { 'label': '模糊匹配', value: 'matchFuzzy' }, { 'label': '正则匹配', value: 'matchRegex' }, { 'label': '前缀匹配', value: 'matchPrefix' }, { 'label': '后缀匹配', value: 'matchSuffix' }]"
               :key="item.value" :label="item.label" :value="item.value"/>
@@ -47,39 +57,32 @@ const deleteSelf = () => {
       </div>
 
       <div style="flex: 1">
-        <div>内容：</div>
+        <el-text>内容</el-text>
         <el-input v-model="cond.value"/>
       </div>
     </div>
 
     <div v-else-if="cond.condType === 'exprTrue'" style="display: flex;" class="mobile-changeline">
       <div style="flex: 1">
-        <div>表达式：
+        <el-text>表达式
           <el-tooltip raw-content
                       content="举例：<br>$t1 == '张三' // 正则匹配的第一个组内容是张三<br>$m个人计数器 >= 10<br>友情提醒，匹配失败时无提示，请先自行在“指令测试”测好">
             <el-icon>
               <question-filled/>
             </el-icon>
           </el-tooltip>
-        </div>
+        </el-text>
         <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 10 }" v-model="cond.value"/>
       </div>
     </div>
 
-    <div v-else-if="cond.condType === 'textLenLimit'" style="display: flex;" class="mobile-changeline">
-      <div style="width: 7rem; margin-right: 0.5rem;">
-        <div>方式：</div>
-        <el-select v-model="cond.matchOp" placeholder="Select">
-          <el-option v-for="item in [{ 'label': '大于等于', value: 'ge' }, { 'label': '小于等于', value: 'le' }]"
-                     :key="item.value" :label="item.label" :value="item.value"/>
-        </el-select>
-      </div>
-
-      <div style="flex: 1">
-        <div>文本字数：</div>
-        <el-input v-model="cond.value" type="number"/>
-      </div>
-    </div>
+    <el-space v-else-if="cond.condType === 'textLenLimit'" class="mt-2 flex">
+      <el-radio-group size="small" v-model="cond.matchOp">
+        <el-radio-button value="ge" label="大于等于"/>
+        <el-radio-button value="le" label="小于等于"/>
+      </el-radio-group>
+      <el-input-number v-model="cond.value" :min="0"/>
+    </el-space>
   </div>
 
 </template>
diff --git a/src/components/utils/nested.vue b/src/components/utils/nested.vue
index f78ed7ec..7f6c2f95 100644
--- a/src/components/utils/nested.vue
+++ b/src/components/utils/nested.vue
@@ -1,7 +1,7 @@
 <template>
   <draggable class="dragArea" tag="div" :list="tasks" handle=".handle" :group="{ name: 'g1' }" item-key="name">
     <template #item="{ element: el, index }">
-      <li class="reply-item" style="padding-right: .5rem; list-style: none; margin-bottom: 0.5rem;">
+      <li class="reply-item list-none mb-2">
         <foldable-card type="div" :default-fold="true" compact>
           <template #title>
             <el-checkbox v-model="el.enable">开启</el-checkbox>
@@ -18,24 +18,24 @@
           <template #unfolded-extra>
             <div class="pl-4 border-l-4 border-orange-500">
               <div v-for="(cond, index2) in (el.conditions || [])" :key="index2">
-                <div v-if="cond.condType === 'textMatch'" style="display: flex;" class="mobile-changeline">
-                  文本匹配: {{ cond.value }}
-                </div>
-                <div v-else-if="cond.condType === 'exprTrue'" style="display: flex;" class="mobile-changeline">
+                <el-text size="large" v-if="cond.condType === 'textMatch'" style="display: flex;" class="mobile-changeline">
+                  文本匹配：{{ cond.value }}
+                </el-text>
+                <el-text size="large" v-else-if="cond.condType === 'exprTrue'" style="display: flex;" class="mobile-changeline">
                   <div style="flex: 1">
                     表达式：{{ cond.value }}
                   </div>
-                </div>
-                <div v-else-if="cond.condType === 'textLenLimit'" style="display: flex;" class="mobile-changeline">
+                </el-text>
+                <el-text size="large" v-else-if="cond.condType === 'textLenLimit'" style="display: flex;" class="mobile-changeline">
                   <div style="flex: 1">
                     长度：{{ cond.matchOp === 'ge' ? '大于等于' : '' }}{{ cond.matchOp === 'le' ? '小于等于' : '' }} {{ cond.value }}
                   </div>
-                </div>
+                </el-text>
               </div>
             </div>
           </template>
 
-          <div>条件（需同时满足，即and）：</div>
+          <el-text class="block mb-2" size="large">条件（需同时满足，即 and）</el-text>
           <div class="pl-4 border-l-4 border-orange-500">
             <custom-reply-condition v-for="(_, index2) in (el.conditions || [])" :key="index2"
                                     v-model="el.conditions[index2]" @delete="deleteAnyItem(el.conditions, index2)"/>
@@ -43,36 +43,45 @@
             <el-button type="success" size="small" :icon="Plus" @click="addCond(el.conditions)">增加</el-button>
           </div>
 
-          <div>结果（顺序执行）：</div>
+          <el-text class="block my-2" size="large">结果（顺序执行）</el-text>
           <div class="pl-4 border-l-4 border-blue-500">
             <div v-for="(i, index) in (el.results || [])" :key="index"
                  class="mb-3 pl-2 border-l-2 border-blue-500">
               <div style="display: flex; justify-content: space-between;">
-                <el-select v-model="i.resultType">
-                  <el-option
-                      v-for="item in [{ 'label': '回复', value: 'replyToSender' }, { 'label': '私聊回复', value: 'replyPrivate' }, { 'label': '群内回复', value: 'replyGroup' }]"
-                      :key="item.value" :label="item.label" :value="item.value" />
-                </el-select>
+                <el-space>
+                  <el-text>模式</el-text>
+                  <el-radio-group size="small" v-model="i.resultType">
+                    <el-radio-button value="replyToSender" label="回复"/>
+                    <el-radio-button value="replyPrivate" label="私聊回复"/>
+                    <el-radio-button value="replyGroup" label="群内回复"/>
+                  </el-radio-group>
+                </el-space>
+
                 <el-button type="danger" :icon="Delete" size="small" plain
-                           @click="deleteAnyItem(el.results, index)">删除结果</el-button>
+                           @click="deleteAnyItem(el.results, index)">
+                  <template #default v-if="notMobile">
+                    删除结果
+                  </template>
+                </el-button>
               </div>
 
               <div v-if="['replyToSender', 'replyPrivate', 'replyGroup'].includes(i.resultType)">
-                <div style="display: flex; justify-content: space-between;" class="mobile-changeline">
+                <div class="flex justify-between my-2 mobile-changeline">
                   <div style="display: flex; align-items: center;">
-                    <div>回复文本（随机选择）：</div>
+                    <el-text>回复文本（随机选择）</el-text>
                   </div>
-                  <div>
-                    <div style="display: inline-block">延迟
+                  <el-space>
+                    <el-text>
+                      延迟
                       <el-tooltip raw-content content="文本将在此延迟后发送，单位秒，可小数。<br />注意随机延迟仍会被加入，如果你希望保证发言顺序，记得考虑这点。">
                         <el-icon><question-filled /></el-icon>
                       </el-tooltip>
-                    </div>
-                    <el-input type="number" v-model="i.delay" style="width: 4rem"></el-input>
-                  </div>
+                    </el-text>
+                    <el-input size="small" type="number" v-model="i.delay" style="width: 4rem"></el-input>
+                  </el-space>
                 </div>
 
-                <div v-for="k2, index in i.message" :key="index" style="width: 100%; margin-bottom: .5rem;">
+                <div v-for="(k2, index) in i.message" :key="index" class="w-full my-2">
                   <!-- 这里面是单条修改项 -->
                   <div style="display: flex;">
                     <div style="display: flex; align-items: center; width: 1.3rem; margin-left: .2rem;">
@@ -111,9 +120,13 @@ import {
 import draggable from "vuedraggable";
 import { ElMessageBox } from 'element-plus'
 import CustomReplyCondition from "~/components/utils/custom-reply-condition.vue";
+import {breakpointsTailwind, useBreakpoints} from "@vueuse/core";
 
 const props = defineProps<{ tasks: Array<any> }>();
 
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const notMobile = breakpoints.greater('sm')
+
 const deleteItem = (index: number) => {
   ElMessageBox.confirm(
     '确认删除此项？',