vue/src/views/settings/components/regular-tester.vue

<template>
    <a-modal width="90%" height="90%" v-model:visible="visible" title="正则测试" :footer="false" @cancel="handleCancel">
        <a-row class="wrapper">
            <a-col :span="24">
                <a-form ref="formRef" class="form" :label-col-props="{ span: 2 }" :wrapper-col-props="{ span: 21 }">
                    <a-form-item label="测试文本" placeholder="在此输入待匹配文本" row-class="keep-margin">
                        <a-textarea class="textarea" v-model="content" auto-size />
                        <template #extra>
                        </template>
                    </a-form-item>
                    <a-form-item label="正则" placeholder="需要匹配的正则表达式，一行一个" row-class="keep-margin">
                        <a-textarea class="textarea" :auto-size="{ minRows: 5, maxRows: 20 }" v-model="pattern" />
                        <template #extra>
                            <a-alert type="success" v-if="testResult === true">正则匹配</a-alert>
                            <a-alert type="error" v-else-if="testResult === false">正则不匹配</a-alert>
                            <a-alert type="error" v-else-if="testResult instanceof Error">
                                发生错误：{{ testResult.message }}</a-alert>
                        </template>
                    </a-form-item>

                    <a-form-item>
                        <a-space>
                            <a-button type="primary" @click="handleTester">测试</a-button>
                            <a-button type="secondary" @click="handleCancel">取消</a-button>
                        </a-space>
                    </a-form-item>
                </a-form>
            </a-col>
        </a-row>
    </a-modal>
</template>

<script lang="ts" setup>

import { defineEmits, ref } from 'vue';
import { Message } from '@arco-design/web-vue';
import {
    TkPoolParams,
    queryTkPool,
    TkPoolRecord,
} from '@/api/taobao';


const content = ref<string>('');
const pattern = defineModel<string>('pattern', { default: '', required: true })
const visible = defineModel<boolean>('visible', { default: false, required: true })

const testResult = ref<boolean | undefined | Error>(undefined)

const testPatterns = (text: string, patterns: string): boolean | Error => {
    try {
        const patternArray = patterns.split('\n').filter(p => p.trim() !== '');
        const regexes = patternArray.map(p => new RegExp(p, 'g'));

        return regexes.some(regex => regex.test(text));

    } catch (error: any) {
        const msg = (error as Error).message
        console.error("正则表达式无效:", msg)
        return error as Error
    }
};


const handleTester = () => {
    console.log('test');
    const msg = 'test'
    testResult.value = testPatterns(content.value, pattern.value)
};
const handleCancel = () => {
    testResult.value = undefined
    visible.value = false;
}

testResult.value = undefined

</script>

<style scoped lang="less">
.container {
    padding: 0 20px 20px 20px;
}

.wrapper {
    padding: 20px 0 0 20px;
    min-height: 580px;
    background-color: var(--color-bg-2);
    border-radius: 4px;
}

:deep(.section-title) {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 14px;
}

.form {
    margin: 0 auto;
}

.form .textarea {
    height: 100%;
    min-height: 200px;
}
</style>