mirror of
https://github.com/Megghy/vtsuru.live.git
synced 2025-12-07 02:46:55 +08:00
feat: 更新项目配置和组件，增强功能和用户体验
- 在 .gitignore 中添加了 .specstory 文件的忽略规则。 - 更新 tsconfig.json，修正了 vue-vine/types/macros 的引用路径。 - 在组件声明中新增了 NInput 组件的类型支持。 - 优化了 EventModel 接口，调整了 guard_level 的类型为 GuardLevel。 - 增加了 Follow 事件类型到 EventDataTypes 枚举中。 - 在 ClientAutoAction.vue 中引入了新的 store 和组件，增强了功能。 - 更新了多个设置组件，添加了关键词匹配类型和过滤模式的支持。 - 改进了模板编辑器和测试器的功能，支持更灵活的模板管理。 - 在弹幕客户端中新增了关注事件的处理逻辑，提升了事件响应能力。
This commit is contained in:
@@ -1,14 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import { NButton, NCard, NDivider, NHighlight, NInput, NList, NListItem, NPopconfirm, NScrollbar, NSpace, NTooltip, useMessage, NTabs, NTabPane, NFlex, NAlert, NIcon } from 'naive-ui';
|
||||
import { computed, ref } from 'vue';
|
||||
import { NButton, NCard, NDivider, NHighlight, NInput, NScrollbar, NSpace, NModal, useMessage, NTabs, NTabPane, NFlex, NAlert, NIcon, NCollapse, NCollapseItem, NBadge, NText } from 'naive-ui';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import TemplateHelper from './TemplateHelper.vue';
|
||||
import TemplateTester from './TemplateTester.vue';
|
||||
import { containsJsExpression, convertToJsExpressions } from '@/client/store/autoAction/expressionEvaluator';
|
||||
import { Info24Filled } from '@vicons/fluent';
|
||||
import { containsJsExpression, convertToJsExpressions, evaluateTemplateExpressions, extractJsExpressions, JS_EXPRESSION_REGEX } from '@/client/store/autoAction/expressionEvaluator';
|
||||
import { buildExecutionContext } from '@/client/store/autoAction/utils';
|
||||
import { AutoActionItem, TriggerType } from '@/client/store/autoAction/types';
|
||||
import { Info24Filled, Code24Regular, LiveOff24Regular } from '@vicons/fluent';
|
||||
import { EventDataTypes, EventModel } from '@/api/api-models';
|
||||
import GraphemeSplitter from 'grapheme-splitter';
|
||||
|
||||
const props = defineProps({
|
||||
templates: {
|
||||
type: Array as () => string[],
|
||||
action: {
|
||||
type: Object as () => AutoActionItem,
|
||||
required: true
|
||||
},
|
||||
title: {
|
||||
@@ -19,126 +23,216 @@ const props = defineProps({
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
placeholders: {
|
||||
type: Array as () => { name: string, description: string }[],
|
||||
default: () => []
|
||||
},
|
||||
// 新增：提供测试上下文对象
|
||||
testContext: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
user: { uid: 12345, name: '测试用户' },
|
||||
gift: { name: '测试礼物', count: 1, price: 100 }
|
||||
})
|
||||
checkLength: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
});
|
||||
|
||||
// 添加默认的弹幕相关占位符
|
||||
const emit = defineEmits(['update:template']);
|
||||
|
||||
const mergedPlaceholders = computed(() => {
|
||||
const defaultPlaceholders = [
|
||||
const basePlaceholders = [
|
||||
{ name: '{{user.name}}', description: '用户名称' },
|
||||
{ name: '{{user.uid}}', description: '用户ID' },
|
||||
{ name: '{{user.nameLength}}', description: '用户名长度' },
|
||||
{ name: '{{date.formatted}}', description: '当前日期格式化' },
|
||||
{ name: '{{timeOfDay()}}', description: '获取当前时段（早上/下午/晚上）' }
|
||||
{ name: '{{user.guardLevel}}', description: '用户舰队等级 (0:无, 1:总督, 2:提督, 3:舰长)' },
|
||||
{ name: '{{user.hasMedal}}', description: '用户是否佩戴粉丝勋章 (true/false)' },
|
||||
{ name: '{{user.medalLevel}}', description: '用户佩戴的粉丝勋章等级' },
|
||||
{ name: '{{user.medalName}}', description: '用户佩戴的粉丝勋章名称' },
|
||||
{ name: '{{date.formatted}}', description: '当前日期时间 (格式化)' },
|
||||
{ name: '{{date.year}}', description: '当前年份' },
|
||||
{ name: '{{date.month}}', description: '当前月份' },
|
||||
{ name: '{{date.day}}', description: '当前日期' },
|
||||
{ name: '{{date.hour}}', description: '当前小时 (0-23)' },
|
||||
{ name: '{{date.minute}}', description: '当前分钟' },
|
||||
{ name: '{{date.second}}', description: '当前秒数' },
|
||||
{ name: '{{timeOfDay}}', description: '当前时段 (凌晨/早上/上午/中午/下午/晚上/深夜)' },
|
||||
{ name: '{{event}}', description: '原始事件对象 (高级用法)' }
|
||||
];
|
||||
|
||||
// 合并自定义占位符和默认占位符
|
||||
return [...props.placeholders, ...defaultPlaceholders];
|
||||
const specificPlaceholders: { name: string, description: string }[] = [];
|
||||
|
||||
switch (props.action.triggerType) {
|
||||
case TriggerType.DANMAKU:
|
||||
specificPlaceholders.push(
|
||||
{ name: '{{message}}', description: '弹幕内容' },
|
||||
{ name: '{{danmaku}}', description: '弹幕事件对象' }
|
||||
);
|
||||
break;
|
||||
case TriggerType.GIFT:
|
||||
specificPlaceholders.push(
|
||||
{ name: '{{gift.name}}', description: '礼物名称' },
|
||||
{ name: '{{gift.count}}', description: '礼物数量' },
|
||||
{ name: '{{gift.price}}', description: '礼物单价(元)' },
|
||||
{ name: '{{gift.totalPrice}}', description: '礼物总价值(元)' },
|
||||
{ name: '{{gift.summary}}', description: '礼物概要 (例如: 5个小心心)' }
|
||||
);
|
||||
break;
|
||||
case TriggerType.GUARD:
|
||||
specificPlaceholders.push(
|
||||
{ name: '{{guard.level}}', description: '开通的舰队等级 (1:总督, 2:提督, 3:舰长)' },
|
||||
{ name: '{{guard.levelName}}', description: '开通的舰队等级名称' },
|
||||
{ name: '{{guard.giftCode}}', description: '舰长礼物代码 (预留字段)' }
|
||||
);
|
||||
break;
|
||||
case TriggerType.SUPER_CHAT:
|
||||
specificPlaceholders.push(
|
||||
{ name: '{{sc.message}}', description: 'SC留言内容' },
|
||||
{ name: '{{sc.price}}', description: 'SC金额(元)' }
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
const finalPlaceholders = [...specificPlaceholders, ...basePlaceholders];
|
||||
return Array.from(new Map(finalPlaceholders.map(item => [item.name, item])).values());
|
||||
});
|
||||
|
||||
const testContext = computed(() => {
|
||||
return buildExecutionContext({
|
||||
msg: '测试',
|
||||
time: 1713542400,
|
||||
num: 1,
|
||||
price: 100,
|
||||
guard_level: 1,
|
||||
uname: '测试用户',
|
||||
uface: 'https://example.com/test.jpg',
|
||||
uid: 12345,
|
||||
ouid: '1234567890',
|
||||
type: EventDataTypes.Message,
|
||||
open_id: '1234567890',
|
||||
fans_medal_level: 1,
|
||||
fans_medal_name: '测试粉丝勋章',
|
||||
fans_medal_wearing_status: true,
|
||||
guard_level_name: '测试舰队',
|
||||
guard_level_price: 100,
|
||||
|
||||
}, undefined, props.action.triggerType);
|
||||
});
|
||||
|
||||
const newTemplate = ref('');
|
||||
const message = useMessage();
|
||||
const activeTab = ref('editor'); // 新增：标签页控制
|
||||
const activeTab = ref('editor');
|
||||
const showLivePreview = ref(true);
|
||||
const splitter = new GraphemeSplitter();
|
||||
const showSyntaxModal = ref(false);
|
||||
|
||||
// 新增：跟踪编辑状态
|
||||
const isEditing = ref(false);
|
||||
const editIndex = ref(-1);
|
||||
const editTemplate = ref('');
|
||||
|
||||
// 新增：测试选中的模板
|
||||
const selectedTemplateForTest = ref('');
|
||||
|
||||
function addTemplate() {
|
||||
const val = newTemplate.value.trim();
|
||||
if (!val) return;
|
||||
if (props.templates.includes(val)) {
|
||||
message.warning('模板已存在');
|
||||
return;
|
||||
}
|
||||
props.templates.push(val);
|
||||
newTemplate.value = '';
|
||||
function countGraphemes(value: string) {
|
||||
return splitter.countGraphemes(value);
|
||||
}
|
||||
|
||||
function removeTemplate(index: number) {
|
||||
props.templates.splice(index, 1);
|
||||
}
|
||||
|
||||
// 新增：开始编辑模板
|
||||
function startEditTemplate(index: number) {
|
||||
editIndex.value = index;
|
||||
editTemplate.value = props.templates[index];
|
||||
isEditing.value = true;
|
||||
newTemplate.value = editTemplate.value;
|
||||
}
|
||||
|
||||
// 新增：取消编辑
|
||||
function cancelEdit() {
|
||||
isEditing.value = false;
|
||||
editIndex.value = -1;
|
||||
newTemplate.value = '';
|
||||
}
|
||||
|
||||
// 新增：保存编辑后的模板
|
||||
function saveEditedTemplate() {
|
||||
const val = newTemplate.value.trim();
|
||||
if (!val) {
|
||||
message.warning('模板内容不能为空');
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查是否与其他模板重复（排除当前编辑的模板）
|
||||
const otherTemplates = props.templates.filter((_, idx) => idx !== editIndex.value);
|
||||
if (otherTemplates.includes(val)) {
|
||||
message.warning('模板已存在');
|
||||
return;
|
||||
}
|
||||
|
||||
props.templates[editIndex.value] = val;
|
||||
message.success('模板更新成功');
|
||||
cancelEdit();
|
||||
}
|
||||
|
||||
// 新增：转换为表达式
|
||||
function convertPlaceholders() {
|
||||
if (!newTemplate.value) {
|
||||
if (!props.action.template) {
|
||||
message.warning('请先输入模板内容');
|
||||
return;
|
||||
}
|
||||
newTemplate.value = convertToJsExpressions(newTemplate.value, mergedPlaceholders.value);
|
||||
message.success('已转换占位符为表达式格式');
|
||||
const converted = convertToJsExpressions(props.action.template, mergedPlaceholders.value);
|
||||
if (converted !== props.action.template) {
|
||||
props.action.template = converted;
|
||||
message.success('已转换占位符为表达式格式');
|
||||
} else {
|
||||
message.info('模板中没有需要转换的占位符');
|
||||
}
|
||||
}
|
||||
|
||||
// 新增：测试模板
|
||||
function testTemplate(template: string) {
|
||||
selectedTemplateForTest.value = template;
|
||||
activeTab.value = 'test';
|
||||
}
|
||||
|
||||
// 新增：高亮JavaScript表达式
|
||||
function hasJsExpression(template: string): boolean {
|
||||
return containsJsExpression(template);
|
||||
}
|
||||
|
||||
// 新增：高亮规则
|
||||
const highlightPatterns = computed(() => {
|
||||
return [
|
||||
// 普通占位符高亮
|
||||
...mergedPlaceholders.value.map(p => p.name),
|
||||
// JS表达式高亮
|
||||
'{{js:'
|
||||
];
|
||||
const simplePlaceholders = mergedPlaceholders.value.map(p => p.name);
|
||||
const jsExpressionsInTemplate = extractJsExpressions(props.action.template || '');
|
||||
const allPatterns = [...new Set([...simplePlaceholders, ...jsExpressionsInTemplate])];
|
||||
return allPatterns;
|
||||
});
|
||||
|
||||
const MAX_LENGTH = 20;
|
||||
const WARNING_THRESHOLD = 16;
|
||||
|
||||
function evaluateTemplateForUI(template: string): string {
|
||||
const executionContext = buildExecutionContext(testContext.value.event, undefined, props.action.triggerType);
|
||||
try {
|
||||
return evaluateTemplateExpressions(template, executionContext);
|
||||
} catch (error) {
|
||||
console.error("Preview evaluation error:", error);
|
||||
return `[预览错误: ${(error as Error).message}]`;
|
||||
}
|
||||
}
|
||||
|
||||
const evaluatedTemplateResult = computed(() => {
|
||||
if (!props.action.template || !showLivePreview.value) return '';
|
||||
return evaluateTemplateForUI(props.action.template);
|
||||
});
|
||||
|
||||
const previewResult = computed(() => {
|
||||
return evaluatedTemplateResult.value;
|
||||
});
|
||||
|
||||
const lengthStatus = computed(() => {
|
||||
if (!props.action.template || !props.checkLength || !showLivePreview.value) {
|
||||
return { status: 'normal' as const, message: '' };
|
||||
}
|
||||
try {
|
||||
const formattedText = evaluatedTemplateResult.value;
|
||||
if (formattedText.startsWith('[预览错误:')) {
|
||||
return { status: 'normal' as const, message: '' };
|
||||
}
|
||||
|
||||
const formattedLength = countGraphemes(formattedText);
|
||||
if (formattedLength > MAX_LENGTH) {
|
||||
return { status: 'error' as const, message: `格式化后长度超出限制（${formattedLength}/${MAX_LENGTH}字）` };
|
||||
} else if (formattedLength >= WARNING_THRESHOLD) {
|
||||
return { status: 'warning' as const, message: `格式化后长度接近限制（${formattedLength}/${MAX_LENGTH}字）` };
|
||||
}
|
||||
return { status: 'normal' as const, message: '' };
|
||||
} catch (error) {
|
||||
return { status: 'normal' as const, message: '' };
|
||||
}
|
||||
});
|
||||
|
||||
const templateExamples = [
|
||||
{
|
||||
title: '基础变量',
|
||||
examples: [
|
||||
{ label: '用户名', template: '你好 {{user.name}}！' },
|
||||
{ label: '条件回复', template: '{{js: user.guardLevel > 0 ? "欢迎舰长" : "欢迎"}} {{user.name}}！' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '高级用法',
|
||||
examples: [
|
||||
{ label: '字符串操作', template: '{{js: user.name.toUpperCase()}} 有 {{js: user.name.length}} 个字' },
|
||||
{ label: '随机回复', template: '{{js: ["谢谢", "感谢", "收到"][Math.floor(Math.random() * 3)]}}！' },
|
||||
{ label: '日期时间', template: '{{js: new Date().toLocaleTimeString()}}，{{timeOfDay}}好！' },
|
||||
{
|
||||
label: '运行时计数',
|
||||
template: '{{js+: const count = (getData(\'messageCount\') || 0) + 1; setData(\'messageCount\', count); return `这是你本次对话的第 ${count} 条消息。`; }}'
|
||||
},
|
||||
{
|
||||
label: '运行时频率检查',
|
||||
template: '{{js+: const warns = (getData(\'warnings\') || 0) + 1; setData(\'warnings\', warns); return warns > 3 ? "发言太频繁啦！" : "收到你的消息~"; }}'
|
||||
},
|
||||
{
|
||||
label: '触发持久化计数 (异步)',
|
||||
template: '{{js+: const key = `user:${user.uid}:totalMessages`; getStorageData(key, 0).then(c => setStorageData(key, (c || 0) + 1)); return `正在为你累计总发言数...`; }}'
|
||||
},
|
||||
{
|
||||
label: '问候一次 (持久化)',
|
||||
template: '{{js+: const key = `greeted:${user.uid}`; hasStorageData(key).then(exists => { if (!exists) { setStorageData(key, true); /* 这里可以接发送欢迎消息的逻辑 */ } }); return \'检查问候状态...\'; }}'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '弹幕功能',
|
||||
examples: [
|
||||
{ label: '提取内容', template: '你说的是 "{{js: message.substring(0, 5)}}{{js: message.length > 5 ? "..." : ""}}" 吗？' },
|
||||
{ label: '回复问候', template: '{{js: message.includes("早上好") ? "早安" : "你好"}}，{{user.name}}！' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
function insertExample(template: string) {
|
||||
props.action.template = template;
|
||||
message.success('已插入示例模板');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -151,55 +245,18 @@ const highlightPatterns = computed(() => {
|
||||
v-if="mergedPlaceholders.length > 0"
|
||||
#header-extra
|
||||
>
|
||||
<NTooltip
|
||||
trigger="hover"
|
||||
placement="top"
|
||||
<NButton
|
||||
quaternary
|
||||
size="small"
|
||||
class="btn-with-transition"
|
||||
@click="showSyntaxModal = true"
|
||||
>
|
||||
<template #trigger>
|
||||
<NButton
|
||||
quaternary
|
||||
size="small"
|
||||
class="btn-with-transition"
|
||||
>
|
||||
变量说明
|
||||
</NButton>
|
||||
</template>
|
||||
|
||||
<NAlert
|
||||
type="info"
|
||||
closable
|
||||
style="margin-bottom: 8px"
|
||||
>
|
||||
<template #header>
|
||||
<div class="alert-header">
|
||||
<NIcon
|
||||
:component="Info24Filled"
|
||||
size="18"
|
||||
style="margin-right: 8px"
|
||||
/>
|
||||
模板支持简单的JavaScript表达式
|
||||
</div>
|
||||
</template>
|
||||
在模板中使用 <code>{{ '\{\{js:\}\}' }}</code> 语法可以执行简单的JavaScript表达式
|
||||
|
||||
<NFlex vertical>
|
||||
<span>
|
||||
<code>{{ '\{\{js: user.name.toUpperCase()\}\}' }}</code> → 将用户名转为大写
|
||||
</span>
|
||||
<span>
|
||||
<code>{{ '\{\{js: gift.count > 10 ? "大量" : "少量"\}\}' }}</code> → 根据数量显示不同文本
|
||||
</span>
|
||||
</NFlex>
|
||||
</NAlert>
|
||||
<NScrollbar style="max-height: 200px; max-width: 300px">
|
||||
<div
|
||||
v-for="(ph, idx) in mergedPlaceholders"
|
||||
:key="idx"
|
||||
>
|
||||
<strong>{{ ph.name }}</strong>: {{ ph.description }}
|
||||
</div>
|
||||
</NScrollbar>
|
||||
</NTooltip>
|
||||
<NIcon
|
||||
:component="Info24Filled"
|
||||
style="margin-right: 4px;"
|
||||
/>
|
||||
变量与语法说明
|
||||
</NButton>
|
||||
</template>
|
||||
|
||||
<p
|
||||
@@ -209,7 +266,7 @@ const highlightPatterns = computed(() => {
|
||||
{{ description }}
|
||||
</p>
|
||||
|
||||
<!-- 新增：添加标签页支持 -->
|
||||
<!-- 标签页支持 -->
|
||||
<NTabs
|
||||
v-model:value="activeTab"
|
||||
type="line"
|
||||
@@ -218,161 +275,244 @@ const highlightPatterns = computed(() => {
|
||||
>
|
||||
<NTabPane
|
||||
name="editor"
|
||||
tab="编辑模板"
|
||||
tab="编辑"
|
||||
>
|
||||
<!-- 新增：添加模板帮助组件 -->
|
||||
<transition
|
||||
name="fade"
|
||||
mode="out-in"
|
||||
appear
|
||||
<NFlex
|
||||
vertical
|
||||
:size="12"
|
||||
>
|
||||
<!-- 模板帮助组件 -->
|
||||
<TemplateHelper :placeholders="mergedPlaceholders" />
|
||||
</transition>
|
||||
|
||||
<NList
|
||||
bordered
|
||||
class="template-list"
|
||||
>
|
||||
<transition-group
|
||||
name="list-slide"
|
||||
tag="div"
|
||||
appear
|
||||
<!-- 当前模板预览 -->
|
||||
<NInput
|
||||
v-model:value="action.template"
|
||||
type="textarea"
|
||||
placeholder="输入模板内容... 使用 {{变量名}} 插入变量， {{js: 表达式}} 执行JS"
|
||||
:autosize="{ minRows: 3, maxRows: 6 }"
|
||||
:show-count="checkLength"
|
||||
:count-graphemes="countGraphemes"
|
||||
:status="checkLength && lengthStatus.status !== 'normal' ? (lengthStatus.status === 'error' ? 'error' : 'warning') : undefined"
|
||||
class="template-input"
|
||||
/>
|
||||
|
||||
<!-- 长度检查警告 -->
|
||||
<NAlert
|
||||
v-if="checkLength && lengthStatus.message && lengthStatus.status !== 'normal'"
|
||||
:type="lengthStatus.status === 'error' ? 'error' : 'warning'"
|
||||
class="length-alert"
|
||||
>
|
||||
<NListItem
|
||||
v-for="(template, index) in templates"
|
||||
:key="index"
|
||||
class="template-list-item"
|
||||
{{ lengthStatus.message }}
|
||||
</NAlert>
|
||||
|
||||
<!-- 实时预览 -->
|
||||
<NFlex
|
||||
align="center"
|
||||
justify="space-between"
|
||||
class="preview-toggle"
|
||||
>
|
||||
<NButton
|
||||
quaternary
|
||||
size="small"
|
||||
@click="showLivePreview = !showLivePreview"
|
||||
>
|
||||
<NSpace
|
||||
justify="space-between"
|
||||
align="center"
|
||||
style="width: 100%"
|
||||
<template #icon>
|
||||
<NIcon :component="showLivePreview ? LiveOff24Regular : Code24Regular" />
|
||||
</template>
|
||||
{{ showLivePreview ? '隐藏预览' : '显示预览' }}
|
||||
</NButton>
|
||||
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-if="showLivePreview && previewResult"
|
||||
class="live-preview"
|
||||
>
|
||||
<!-- 更新：使用自定义高亮规则 -->
|
||||
<div
|
||||
class="template-content"
|
||||
:class="{ 'has-js-expr': hasJsExpression(template) }"
|
||||
>
|
||||
<NHighlight
|
||||
:patterns="highlightPatterns"
|
||||
:text="template"
|
||||
/>
|
||||
<div
|
||||
v-if="hasJsExpression(template)"
|
||||
class="js-expr-badge"
|
||||
>
|
||||
JS
|
||||
</div>
|
||||
</div>
|
||||
<NBadge
|
||||
dot
|
||||
type="info"
|
||||
/> 实时预览:
|
||||
<NHighlight
|
||||
:text="previewResult"
|
||||
:patterns="highlightPatterns"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</NFlex>
|
||||
|
||||
<NSpace>
|
||||
<NButton
|
||||
size="small"
|
||||
class="btn-with-transition"
|
||||
@click="testTemplate(template)"
|
||||
>
|
||||
测试
|
||||
</NButton>
|
||||
<NButton
|
||||
size="small"
|
||||
class="btn-with-transition"
|
||||
@click="startEditTemplate(index)"
|
||||
>
|
||||
编辑
|
||||
</NButton>
|
||||
<NPopconfirm
|
||||
@positive-click="removeTemplate(index)"
|
||||
>
|
||||
<template #trigger>
|
||||
<NButton
|
||||
size="small"
|
||||
class="btn-with-transition"
|
||||
>
|
||||
删除
|
||||
</NButton>
|
||||
</template>
|
||||
确定要删除这个模板吗？
|
||||
</NPopconfirm>
|
||||
</NSpace>
|
||||
</NSpace>
|
||||
</NListItem>
|
||||
</transition-group>
|
||||
</NList>
|
||||
|
||||
<NDivider />
|
||||
|
||||
<transition
|
||||
name="fade-scale"
|
||||
appear
|
||||
>
|
||||
<NSpace
|
||||
vertical
|
||||
style="width: 100%"
|
||||
<!-- 操作按钮 -->
|
||||
<NFlex
|
||||
justify="end"
|
||||
:size="12"
|
||||
>
|
||||
<NInput
|
||||
v-model:value="newTemplate"
|
||||
type="textarea"
|
||||
placeholder="输入新模板"
|
||||
:autosize="{ minRows: 2, maxRows: 5 }"
|
||||
class="template-input"
|
||||
@keydown.enter.ctrl="isEditing ? saveEditedTemplate() : addTemplate()"
|
||||
/>
|
||||
<NButton
|
||||
type="default"
|
||||
size="small"
|
||||
class="btn-with-transition"
|
||||
@click="convertPlaceholders"
|
||||
>
|
||||
占位符转表达式
|
||||
</NButton>
|
||||
|
||||
<NSpace justify="space-between">
|
||||
<NSpace>
|
||||
<NButton
|
||||
type="default"
|
||||
class="btn-with-transition"
|
||||
@click="convertPlaceholders"
|
||||
>
|
||||
转换为表达式
|
||||
</NButton>
|
||||
</NSpace>
|
||||
<NButton
|
||||
type="primary"
|
||||
size="small"
|
||||
class="btn-with-transition"
|
||||
@click="activeTab = 'test'"
|
||||
>
|
||||
测试模板
|
||||
</NButton>
|
||||
</NFlex>
|
||||
|
||||
<NSpace>
|
||||
<NButton
|
||||
v-if="isEditing"
|
||||
class="btn-with-transition"
|
||||
@click="cancelEdit"
|
||||
<!-- 模板示例 -->
|
||||
<NCollapse
|
||||
class="template-examples"
|
||||
:default-expanded-names="['examples']"
|
||||
>
|
||||
<NCollapseItem
|
||||
name="examples"
|
||||
title="模板示例 (点击展开)"
|
||||
>
|
||||
<NFlex
|
||||
vertical
|
||||
:size="8"
|
||||
>
|
||||
<div
|
||||
v-for="(category, idx) in templateExamples"
|
||||
:key="idx"
|
||||
class="example-category"
|
||||
>
|
||||
取消
|
||||
</NButton>
|
||||
<NButton
|
||||
type="primary"
|
||||
class="btn-with-transition"
|
||||
@click="isEditing ? saveEditedTemplate() : addTemplate()"
|
||||
>
|
||||
{{ isEditing ? '保存' : '添加' }}
|
||||
</NButton>
|
||||
</NSpace>
|
||||
</NSpace>
|
||||
</NSpace>
|
||||
</transition>
|
||||
<h4>{{ category.title }}</h4>
|
||||
<NFlex
|
||||
wrap
|
||||
:size="8"
|
||||
>
|
||||
<NButton
|
||||
v-for="(example, i) in category.examples"
|
||||
:key="i"
|
||||
size="small"
|
||||
tertiary
|
||||
class="example-button"
|
||||
@click="insertExample(example.template)"
|
||||
>
|
||||
{{ example.label }}
|
||||
</NButton>
|
||||
</NFlex>
|
||||
</div>
|
||||
</NFlex>
|
||||
</NCollapseItem>
|
||||
</NCollapse>
|
||||
</NFlex>
|
||||
</NTabPane>
|
||||
|
||||
<NTabPane
|
||||
name="test"
|
||||
tab="测试模板"
|
||||
tab="测试"
|
||||
>
|
||||
<transition
|
||||
name="fade"
|
||||
mode="out-in"
|
||||
appear
|
||||
>
|
||||
<TemplateTester
|
||||
:default-template="selectedTemplateForTest"
|
||||
:context="testContext"
|
||||
:placeholders="mergedPlaceholders"
|
||||
/>
|
||||
</transition>
|
||||
<TemplateTester
|
||||
:default-template="action.template"
|
||||
:context="testContext"
|
||||
:placeholders="mergedPlaceholders"
|
||||
/>
|
||||
</NTabPane>
|
||||
</NTabs>
|
||||
|
||||
<!-- 新增 Modal 组件 -->
|
||||
<NModal
|
||||
v-model:show="showSyntaxModal"
|
||||
preset="card"
|
||||
title="模板语法与变量说明"
|
||||
:bordered="false"
|
||||
size="huge"
|
||||
style="width: 600px; max-width: 90vw;"
|
||||
:close-on-esc="true"
|
||||
:mask-closable="true"
|
||||
>
|
||||
<NScrollbar style="max-height: 80vh;">
|
||||
<NAlert
|
||||
title="模板语法说明"
|
||||
type="info"
|
||||
:show-icon="false"
|
||||
style="margin-bottom: 16px;"
|
||||
>
|
||||
模板支持插入变量和执行 JavaScript。
|
||||
<NDivider style="margin: 8px 0;" />
|
||||
<strong>1. 简单变量替换:</strong><br>
|
||||
直接使用 <code>{{ '\{\{变量名.属性\}\}' }}</code> 插入值。<br>
|
||||
示例: <code>{{ '\{\{user.name\}\}' }}</code> → 显示用户名
|
||||
<NDivider style="margin: 8px 0;" />
|
||||
<strong>2. JS 表达式求值 (<code>js:</code>):</strong><br>
|
||||
使用 <code>{{ '\{\{js: 表达式\}\}' }}</code> 执行单个 JS 表达式并插入结果 (隐式返回)。<br>
|
||||
适合简单计算、字符串操作、三元运算等。<br>
|
||||
示例: <code>{{ '\{\{js: user.guardLevel > 0 ? "舰长" : "非舰长\}\}' }}</code><br>
|
||||
示例: <code>{{ '\{\{js: gift.price * gift.count\}\}' }}</code>
|
||||
<NDivider style="margin: 8px 0;" />
|
||||
<strong>3. JS 代码块执行 (<code>js+:</code> 或 <code>js-run:</code>):</strong><br>
|
||||
使用 <code>{{ '\{\{js+: 代码...\}\}' }}</code> 或 <code>{{ '\{\{js-run: 代码...\}\}' }}</code> 执行多行 JS 代码。<br>
|
||||
<strong style="color: var(--warning-color);">需要显式使用 <code>return</code> 语句来指定输出到模板的值。</strong><br>
|
||||
适合需要临时变量、多步逻辑或调用 <code>getData/setData</code> 等函数的场景。<br>
|
||||
<pre><code>{{ '\{\{js+:\n const count = (getData(\'greetCount\') || 0) + 1;\n setData(\'greetCount\', count);\n return \`这是第 ${count} 次问候！\`;\n\}\}' }}</code></pre>
|
||||
</NAlert>
|
||||
|
||||
<NCollapse arrow-placement="right">
|
||||
<NCollapseItem
|
||||
title="数据存储函数说明 (在 js+ 或 js-run 中使用)"
|
||||
name="data-functions"
|
||||
>
|
||||
<NAlert
|
||||
type="warning"
|
||||
:bordered="false"
|
||||
size="small"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<strong>运行时数据</strong>仅在本次运行有效, 重启后就没了，且操作是<strong>同步</strong>的。
|
||||
</NAlert>
|
||||
<ul class="function-list">
|
||||
<li><code>getData(key, defaultValue?)</code>: 获取运行时数据。</li>
|
||||
<li><code>setData(key, value)</code>: 设置运行时数据。</li>
|
||||
<li><code>containsData(key)</code>: 检查运行时数据是否存在。</li>
|
||||
<li><code>removeData(key)</code>: 移除运行时数据。</li>
|
||||
</ul>
|
||||
|
||||
<NDivider style="margin: 12px 0;" />
|
||||
|
||||
<NAlert
|
||||
type="info"
|
||||
:bordered="false"
|
||||
size="small"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<strong>持久化数据</strong>会长期保留，但操作是<strong>异步</strong>的 (返回 Promise)。<br>
|
||||
在 <code>js+</code> 或 <code>js-run</code> 中使用 <code>await</code> 处理或使用 <code>.then()</code>。
|
||||
</NAlert>
|
||||
<ul class="function-list">
|
||||
<li><code>getStorageData(key, defaultValue?)</code>: 获取持久化数据 (异步)。</li>
|
||||
<li><code>setStorageData(key, value)</code>: 设置持久化数据 (异步)。</li>
|
||||
<li><code>hasStorageData(key)</code>: 检查持久化数据是否存在 (异步)。</li>
|
||||
<li><code>removeStorageData(key)</code>: 移除持久化数据 (异步)。</li>
|
||||
<li><code>clearStorageData()</code>: 清除所有用户持久化数据 (异步)。</li>
|
||||
</ul>
|
||||
<pre><code>{{ '\{\{js+:\n // 异步获取并设置持久化数据\n const key = \`user:${user.uid}:visitCount\`;\n const count = (await getStorageData(key, 0)) + 1;\n await setStorageData(key, count);\n return \`你是第 ${count} 次访问！\`;\n\}\}' }}</code></pre>
|
||||
</NCollapseItem>
|
||||
</NCollapse>
|
||||
<br>
|
||||
<strong>可用变量 (基础):</strong>
|
||||
|
||||
<div
|
||||
v-for="(ph, idx) in mergedPlaceholders"
|
||||
:key="idx"
|
||||
class="placeholder-item"
|
||||
>
|
||||
<NText code>
|
||||
{{ ph.name }}
|
||||
</NText>: {{ ph.description }}
|
||||
</div>
|
||||
</NScrollbar>
|
||||
</NModal>
|
||||
</NCard>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.template-editor-card {
|
||||
transition: all 0.3s ease;
|
||||
animation: card-appear 0.4s ease-out;
|
||||
}
|
||||
|
||||
@@ -388,105 +528,132 @@ const highlightPatterns = computed(() => {
|
||||
}
|
||||
|
||||
.template-description {
|
||||
margin-bottom: 16px;
|
||||
color: #666;
|
||||
transition: all 0.3s ease;
|
||||
margin-bottom: 12px;
|
||||
color: var(--n-text-color-disabled);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.editor-tabs {
|
||||
transition: all 0.3s ease;
|
||||
.alert-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.template-list {
|
||||
margin-top: 16px;
|
||||
transition: all 0.3s ease;
|
||||
.placeholder-item {
|
||||
margin-bottom: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.template-list-item {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.template-list-item:hover {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.template-content {
|
||||
position: relative;
|
||||
padding-right: 30px;
|
||||
word-break: break-all;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.has-js-expr {
|
||||
background-color: rgba(64, 158, 255, 0.05);
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.js-expr-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: #409EFF;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
.placeholder-item code {
|
||||
font-size: 13px;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.template-input {
|
||||
margin-top: 8px;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
.preview-toggle {
|
||||
margin-top: 4px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.length-alert {
|
||||
margin-top: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.live-preview {
|
||||
background-color: var(--n-color-target);
|
||||
border-radius: var(--n-border-radius);
|
||||
padding: 4px 8px;
|
||||
font-size: 13px;
|
||||
border-left: 3px solid var(--n-color-target);
|
||||
word-break: break-all;
|
||||
transition: all 0.3s ease;
|
||||
margin-left: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.template-input:focus {
|
||||
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
||||
.live-preview .n-badge {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
/* 列表动画 */
|
||||
.list-slide-enter-active,
|
||||
.list-slide-leave-active {
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
.list-slide-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
.list-slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
.list-slide-move {
|
||||
transition: transform 0.4s ease;
|
||||
.template-examples {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* 淡入缩放 */
|
||||
.fade-scale-enter-active,
|
||||
.fade-scale-leave-active {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.fade-scale-enter-from,
|
||||
.fade-scale-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
.example-category h4 {
|
||||
margin: 0 0 6px 0;
|
||||
font-size: 14px;
|
||||
color: var(--n-text-color-2);
|
||||
}
|
||||
|
||||
.example-button {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.example-button:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* 淡入淡出 */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 按钮过渡 */
|
||||
.btn-with-transition {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-with-transition:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.function-list {
|
||||
list-style: none;
|
||||
padding-left: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.function-list li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.function-list code {
|
||||
background-color: var(--n-code-color);
|
||||
padding: 1px 4px;
|
||||
border-radius: var(--n-border-radius);
|
||||
font-family: monospace;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.n-collapse {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.n-alert pre {
|
||||
margin: 4px 0 0 0;
|
||||
padding: 6px 8px;
|
||||
background-color: var(--n-code-color);
|
||||
border-radius: var(--n-border-radius);
|
||||
overflow-x: auto;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.n-alert code {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
font-family: monospace;
|
||||
font-size: inherit;
|
||||
}
|
||||
.n-alert pre code {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user