Skip to content

Commit

Permalink
chore(CustomReply): 调整自定义回复项样式
Browse files Browse the repository at this point in the history
  • Loading branch information
@JustAnotherID
JustAnotherID committed May 26, 2024
1 parent 986031b commit e10e4c7
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 51 deletions.
57 changes: 30 additions & 27 deletions src/components/utils/custom-reply-condition.vue
View file
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -8,6 +9,9 @@ const props = defineProps<{
key: number
}>();
const breakpoints = useBreakpoints(breakpointsTailwind)
const notMobile = breakpoints.greater('sm')
const emit = defineEmits(['delete']);
const deleteSelf = () => {
Expand All @@ -18,68 +22,67 @@ 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"/>
</el-select>
</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>
Expand Down
61 changes: 37 additions & 24 deletions src/components/utils/nested.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -18,61 +18,70 @@
<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)"/>

<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;">
Expand Down Expand Up @@ -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(
'确认删除此项？',
Expand Down

0 comments on commit e10e4c7

Please sign in to comment.