feat: 新增消息模板页面
This commit is contained in:
parent
c6bfd5851d
commit
352e10ee39
@ -0,0 +1,139 @@
|
|||||||
|
/* @vitest-environment happy-dom */
|
||||||
|
|
||||||
|
/* eslint-disable no-template-curly-in-string */
|
||||||
|
|
||||||
|
import type { QqbotMessagePushApi } from '#/api/qqbot/message-push';
|
||||||
|
|
||||||
|
import { flushPromises, mount } from '@vue/test-utils';
|
||||||
|
|
||||||
|
import Mentions from 'antdv-next/dist/mentions/index';
|
||||||
|
import { describe, expect, it } from 'vitest';
|
||||||
|
|
||||||
|
import MessageTemplateMentions from './MessageTemplateMentions';
|
||||||
|
|
||||||
|
/** Creates one complete source-variable fixture for Mentions behavior. */
|
||||||
|
function createVariable(
|
||||||
|
overrides: Partial<QqbotMessagePushApi.SystemMessageSourceVariableDefinition> = {},
|
||||||
|
): QqbotMessagePushApi.SystemMessageSourceVariableDefinition {
|
||||||
|
return {
|
||||||
|
description: '组合后的完整服务端地址',
|
||||||
|
example: 'pal.kwitsukasa.top:38213',
|
||||||
|
key: 'endpoint',
|
||||||
|
label: '连接端点',
|
||||||
|
type: 'string',
|
||||||
|
...overrides,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('message template mentions', () => {
|
||||||
|
it('uses the installed runtime to insert exactly one complete token', async () => {
|
||||||
|
const wrapper = mount(MessageTemplateMentions, {
|
||||||
|
attachTo: document.body,
|
||||||
|
props: {
|
||||||
|
value: '$',
|
||||||
|
variables: [createVariable()],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const textarea = wrapper.get('textarea');
|
||||||
|
const element = textarea.element as HTMLTextAreaElement;
|
||||||
|
element.focus();
|
||||||
|
element.setSelectionRange(1, 1);
|
||||||
|
await textarea.trigger('keyup', { key: '$', keyCode: 52, which: 52 });
|
||||||
|
await textarea.trigger('keydown', {
|
||||||
|
key: 'Enter',
|
||||||
|
keyCode: 13,
|
||||||
|
which: 13,
|
||||||
|
});
|
||||||
|
await flushPromises();
|
||||||
|
|
||||||
|
expect(wrapper.emitted('update:value')?.at(-1)).toEqual(['${{endpoint}}']);
|
||||||
|
wrapper.unmount();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('forwards the locked option values and Mentions mechanics', () => {
|
||||||
|
const variables = [
|
||||||
|
createVariable(),
|
||||||
|
createVariable({ key: 'port', label: '公网端口' }),
|
||||||
|
];
|
||||||
|
const wrapper = mount(MessageTemplateMentions, {
|
||||||
|
props: { value: 'literal', variables },
|
||||||
|
});
|
||||||
|
const mentions = wrapper.getComponent(Mentions);
|
||||||
|
const options = mentions.props('options') || [];
|
||||||
|
|
||||||
|
expect(options).toEqual([
|
||||||
|
expect.objectContaining({ value: '{{endpoint}}' }),
|
||||||
|
expect.objectContaining({ value: '{{port}}' }),
|
||||||
|
]);
|
||||||
|
expect(mentions.props()).toMatchObject({
|
||||||
|
prefix: '$',
|
||||||
|
rows: 4,
|
||||||
|
split: '',
|
||||||
|
value: 'literal',
|
||||||
|
});
|
||||||
|
expect(wrapper.get('textarea').attributes('maxlength')).toBe('2000');
|
||||||
|
expect(options.some((option) => option.value === 'endpoint')).toBe(false);
|
||||||
|
expect(options.some((option) => option.value === '${{endpoint}}')).toBe(
|
||||||
|
false,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it.each([
|
||||||
|
['key', 'ENDpoint'],
|
||||||
|
['label', '连接端'],
|
||||||
|
['description', '完整服务'],
|
||||||
|
['example', 'KWITSUKASA'],
|
||||||
|
])('searches independently by %s', (_, query) => {
|
||||||
|
const wrapper = mount(MessageTemplateMentions, {
|
||||||
|
props: { variables: [createVariable()] },
|
||||||
|
});
|
||||||
|
const mentions = wrapper.getComponent(Mentions);
|
||||||
|
const option = (mentions.props('options') || [])[0];
|
||||||
|
const filter = mentions.props('filterOption') as (
|
||||||
|
input: string,
|
||||||
|
option: Record<string, unknown>,
|
||||||
|
) => boolean;
|
||||||
|
|
||||||
|
expect(option).toBeDefined();
|
||||||
|
if (!option) throw new Error('Expected one variable option');
|
||||||
|
const searchableOption = option as unknown as Record<string, unknown>;
|
||||||
|
expect(filter(query, searchableOption)).toBe(true);
|
||||||
|
expect(filter('unrelated-value', searchableOption)).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('keeps disabled, loading, and value controlled', async () => {
|
||||||
|
const wrapper = mount(MessageTemplateMentions, {
|
||||||
|
props: {
|
||||||
|
disabled: true,
|
||||||
|
loading: true,
|
||||||
|
value: 'server-owned',
|
||||||
|
variables: [createVariable()],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const mentions = wrapper.getComponent(Mentions);
|
||||||
|
|
||||||
|
expect(mentions.props()).toMatchObject({
|
||||||
|
disabled: true,
|
||||||
|
loading: true,
|
||||||
|
value: 'server-owned',
|
||||||
|
});
|
||||||
|
expect(wrapper.emitted('update:value')).toBeUndefined();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('emits CQ-looking content as literal controlled text', async () => {
|
||||||
|
const wrapper = mount(MessageTemplateMentions, {
|
||||||
|
props: {
|
||||||
|
value: '[CQ:at,qq=12345]',
|
||||||
|
variables: [createVariable()],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const mentions = wrapper.getComponent(Mentions);
|
||||||
|
mentions.vm.$emit('update:value', '[CQ:at,qq=12345] $literal');
|
||||||
|
await flushPromises();
|
||||||
|
|
||||||
|
expect(wrapper.emitted('update:value')?.at(-1)).toEqual([
|
||||||
|
'[CQ:at,qq=12345] $literal',
|
||||||
|
]);
|
||||||
|
expect(wrapper.html()).not.toContain('innerHTML');
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,115 @@
|
|||||||
|
import type { PropType } from 'vue';
|
||||||
|
|
||||||
|
import type { QqbotMessagePushApi } from '#/api/qqbot/message-push';
|
||||||
|
|
||||||
|
import { computed, defineComponent } from 'vue';
|
||||||
|
|
||||||
|
import Mentions from 'antdv-next/dist/mentions/index';
|
||||||
|
|
||||||
|
interface MessageTemplateMentionOption {
|
||||||
|
label: string;
|
||||||
|
value: string;
|
||||||
|
variable: QqbotMessagePushApi.SystemMessageSourceVariableDefinition;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'MessageTemplateMentions',
|
||||||
|
props: {
|
||||||
|
disabled: {
|
||||||
|
default: false,
|
||||||
|
type: Boolean,
|
||||||
|
},
|
||||||
|
loading: {
|
||||||
|
default: false,
|
||||||
|
type: Boolean,
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
default: '',
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
variables: {
|
||||||
|
default: () => [],
|
||||||
|
type: Array as PropType<
|
||||||
|
QqbotMessagePushApi.SystemMessageSourceVariableDefinition[]
|
||||||
|
>,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: {
|
||||||
|
/**
|
||||||
|
* Keeps the wrapper controlled and forwards only the complete plain-text value.
|
||||||
|
* @param value - Mentions textarea content after an explicit user update.
|
||||||
|
* @returns Always true because string payloads are the only supported update.
|
||||||
|
*/
|
||||||
|
'update:value': (value: string) => typeof value === 'string',
|
||||||
|
},
|
||||||
|
/** Creates a request-free controlled boundary around the installed Mentions. */
|
||||||
|
setup(props, { emit }) {
|
||||||
|
/** Maps server variables to the exact `{{key}}` values required after `$`. */
|
||||||
|
const options = computed<MessageTemplateMentionOption[]>(() =>
|
||||||
|
props.variables.map((variable) => ({
|
||||||
|
label: `${variable.key} · ${variable.label} · ${variable.description} · 示例：${variable.example}`,
|
||||||
|
value: `{{${variable.key}}}`,
|
||||||
|
variable,
|
||||||
|
})),
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Filters one option across the four server-owned variable descriptors.
|
||||||
|
* @param input - Case-insensitive query entered after the `$` prefix.
|
||||||
|
* @param option - Mentions option carrying the original variable definition.
|
||||||
|
* @returns Whether key, label, description, or example includes the query.
|
||||||
|
*/
|
||||||
|
function filterVariableOption(
|
||||||
|
input: string,
|
||||||
|
option: Record<string, unknown>,
|
||||||
|
) {
|
||||||
|
const variable = option.variable;
|
||||||
|
if (!isVariableDefinition(variable)) return false;
|
||||||
|
const query = input.toLocaleLowerCase();
|
||||||
|
return [
|
||||||
|
variable.key,
|
||||||
|
variable.label,
|
||||||
|
variable.description,
|
||||||
|
variable.example,
|
||||||
|
].some((field) => field.toLocaleLowerCase().includes(query));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Emits the installed component's controlled value without interpreting its text.
|
||||||
|
* @param value - Literal textarea value, including CQ-looking substrings.
|
||||||
|
*/
|
||||||
|
function handleValueUpdate(value: string) {
|
||||||
|
emit('update:value', value);
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => (
|
||||||
|
<Mentions
|
||||||
|
disabled={props.disabled}
|
||||||
|
filterOption={filterVariableOption}
|
||||||
|
loading={props.loading}
|
||||||
|
maxlength={2000}
|
||||||
|
onUpdate:value={handleValueUpdate}
|
||||||
|
options={options.value}
|
||||||
|
prefix="$"
|
||||||
|
rows={4}
|
||||||
|
split=""
|
||||||
|
value={props.value}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Narrows an unknown Mentions option payload to the server variable contract.
|
||||||
|
* @param value - Candidate option metadata supplied by the installed component.
|
||||||
|
* @returns Whether all searchable variable fields are strings.
|
||||||
|
*/
|
||||||
|
function isVariableDefinition(
|
||||||
|
value: unknown,
|
||||||
|
): value is QqbotMessagePushApi.SystemMessageSourceVariableDefinition {
|
||||||
|
if (!value || typeof value !== 'object') return false;
|
||||||
|
const candidate = value as Record<string, unknown>;
|
||||||
|
return ['description', 'example', 'key', 'label'].every(
|
||||||
|
(field) => typeof candidate[field] === 'string',
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,446 @@
|
|||||||
|
/* @vitest-environment happy-dom */
|
||||||
|
|
||||||
|
/* eslint-disable no-template-curly-in-string, vue/one-component-per-file */
|
||||||
|
|
||||||
|
import type { QqbotMessagePushApi } from '#/api/qqbot/message-push';
|
||||||
|
|
||||||
|
import { flushPromises, mount } from '@vue/test-utils';
|
||||||
|
import { defineComponent, h, nextTick } from 'vue';
|
||||||
|
|
||||||
|
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||||
|
|
||||||
|
import MessageTemplateMentions from './MessageTemplateMentions';
|
||||||
|
import MessageTemplateModal from './MessageTemplateModal';
|
||||||
|
|
||||||
|
const mocks = vi.hoisted(() => {
|
||||||
|
const formValues = {
|
||||||
|
content: '',
|
||||||
|
enabled: true,
|
||||||
|
name: '',
|
||||||
|
remark: '',
|
||||||
|
sourceKey: '',
|
||||||
|
};
|
||||||
|
const modalApi = {
|
||||||
|
close: vi.fn(async () => {}),
|
||||||
|
getData: vi.fn(),
|
||||||
|
lock: vi.fn(),
|
||||||
|
open: vi.fn(),
|
||||||
|
setData: vi.fn(),
|
||||||
|
unlock: vi.fn(),
|
||||||
|
};
|
||||||
|
const formApi = {
|
||||||
|
getValues: vi.fn(async () => ({ ...formValues })),
|
||||||
|
resetForm: vi.fn(async () => {}),
|
||||||
|
resetValidate: vi.fn(async () => {}),
|
||||||
|
setValues: vi.fn(async (values) => Object.assign(formValues, values)),
|
||||||
|
validate: vi.fn(async () => ({ valid: true })),
|
||||||
|
validateField: vi.fn(async () => ({ valid: true })),
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
create: vi.fn(),
|
||||||
|
detail: vi.fn(),
|
||||||
|
formApi,
|
||||||
|
formOptions: undefined as any,
|
||||||
|
formValues,
|
||||||
|
modalApi,
|
||||||
|
modalOptions: undefined as any,
|
||||||
|
preview: vi.fn(),
|
||||||
|
update: vi.fn(),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Creates a fluent no-op validation rule for schema behavior tests. */
|
||||||
|
function createRule(): any {
|
||||||
|
const rule: any = {};
|
||||||
|
for (const method of ['max', 'min', 'optional', 'or', 'trim']) {
|
||||||
|
rule[method] = vi.fn(() => rule);
|
||||||
|
}
|
||||||
|
return rule;
|
||||||
|
}
|
||||||
|
|
||||||
|
vi.mock('#/adapter/form', () => ({
|
||||||
|
useVbenForm: vi.fn((options) => {
|
||||||
|
mocks.formOptions = options;
|
||||||
|
const Form = defineComponent({
|
||||||
|
name: 'MockTemplateForm',
|
||||||
|
/** Renders the production schema's local content component with live props. */
|
||||||
|
setup() {
|
||||||
|
return () => {
|
||||||
|
const content = mocks.formOptions.schema.find(
|
||||||
|
(field: any) => field.fieldName === 'content',
|
||||||
|
);
|
||||||
|
const componentProps =
|
||||||
|
typeof content.componentProps === 'function'
|
||||||
|
? content.componentProps()
|
||||||
|
: content.componentProps;
|
||||||
|
return h('form', { 'data-testid': 'template-form' }, [
|
||||||
|
h(content.component, {
|
||||||
|
...componentProps,
|
||||||
|
value: mocks.formValues.content,
|
||||||
|
'onUpdate:value': (value: string) => {
|
||||||
|
mocks.formValues.content = value;
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return [Form, mocks.formApi];
|
||||||
|
}),
|
||||||
|
z: {
|
||||||
|
literal: vi.fn(createRule),
|
||||||
|
string: vi.fn(createRule),
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('@vben/common-ui', () => ({
|
||||||
|
useVbenModal: vi.fn((options) => {
|
||||||
|
mocks.modalOptions = options;
|
||||||
|
const Modal = defineComponent({
|
||||||
|
name: 'MockTemplateModal',
|
||||||
|
/** Renders the actual form plus the explicit prepend-footer action slot. */
|
||||||
|
setup(_, { slots }) {
|
||||||
|
return () =>
|
||||||
|
h('section', { 'data-testid': 'template-modal' }, [
|
||||||
|
slots.default?.(),
|
||||||
|
h('footer', slots['prepend-footer']?.()),
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return [Modal, mocks.modalApi];
|
||||||
|
}),
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('#/api/qqbot/message-push', () => ({
|
||||||
|
createMessageTemplate: mocks.create,
|
||||||
|
getMessagePushSourceDetail: mocks.detail,
|
||||||
|
previewMessageTemplate: mocks.preview,
|
||||||
|
updateMessageTemplate: mocks.update,
|
||||||
|
}));
|
||||||
|
|
||||||
|
/** Creates one source with a distinguishable variable catalog. */
|
||||||
|
function createSource(
|
||||||
|
sourceKey = 'source-a',
|
||||||
|
variableKey = 'endpoint',
|
||||||
|
): QqbotMessagePushApi.SystemMessageSourceDefinition {
|
||||||
|
return {
|
||||||
|
description: `${sourceKey} description`,
|
||||||
|
displayName: `${sourceKey} name`,
|
||||||
|
sourceKey,
|
||||||
|
subscriptionFields: [],
|
||||||
|
variables: [
|
||||||
|
{
|
||||||
|
description: `${variableKey} description`,
|
||||||
|
example: `${variableKey} example`,
|
||||||
|
key: variableKey,
|
||||||
|
label: `${variableKey} label`,
|
||||||
|
type: 'string',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
version: 1,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Creates one unsafe-integer string-ID editable template row. */
|
||||||
|
function createRow(): QqbotMessagePushApi.MessageTemplateView {
|
||||||
|
return {
|
||||||
|
content: 'old [CQ:at,qq=12345]',
|
||||||
|
createTime: '2026-07-24 10:00:00',
|
||||||
|
enabled: false,
|
||||||
|
id: '10000000000000001',
|
||||||
|
name: 'old template',
|
||||||
|
referenceCount: 0,
|
||||||
|
remark: 'old remark',
|
||||||
|
sourceKey: 'source-b',
|
||||||
|
sourceName: 'source-b name',
|
||||||
|
updateTime: '2026-07-24 10:00:00',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Mounts the modal with page-owned source labels. */
|
||||||
|
function mountModal(canPreview = true) {
|
||||||
|
return mount(MessageTemplateModal, {
|
||||||
|
props: {
|
||||||
|
canPreview,
|
||||||
|
sources: [createSource(), createSource('source-b', 'port')],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('message template modal', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.clearAllMocks();
|
||||||
|
Object.assign(mocks.formValues, {
|
||||||
|
content: '',
|
||||||
|
enabled: true,
|
||||||
|
name: '',
|
||||||
|
remark: '',
|
||||||
|
sourceKey: '',
|
||||||
|
});
|
||||||
|
mocks.modalApi.getData.mockImplementation(
|
||||||
|
() => mocks.modalApi.setData.mock.calls.at(-1)?.[0] || {},
|
||||||
|
);
|
||||||
|
mocks.modalApi.setData.mockImplementation(() => mocks.modalApi);
|
||||||
|
mocks.modalApi.open.mockImplementation(() => {
|
||||||
|
void mocks.modalOptions.onOpenChange?.(true);
|
||||||
|
return mocks.modalApi;
|
||||||
|
});
|
||||||
|
mocks.create.mockResolvedValue({});
|
||||||
|
mocks.update.mockResolvedValue({});
|
||||||
|
mocks.detail.mockImplementation(async (sourceKey: string) =>
|
||||||
|
createSource(sourceKey, sourceKey === 'source-a' ? 'endpoint' : 'port'),
|
||||||
|
);
|
||||||
|
mocks.preview.mockResolvedValue({
|
||||||
|
renderedMessage: 'server rendered',
|
||||||
|
variables: { endpoint: 'server.example:38213' },
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('registers the exact schema and actually renders the local Mentions form field', () => {
|
||||||
|
const wrapper = mountModal();
|
||||||
|
const fields = mocks.formOptions.schema.map(
|
||||||
|
(field: any) => field.fieldName,
|
||||||
|
);
|
||||||
|
const content = mocks.formOptions.schema.find(
|
||||||
|
(field: any) => field.fieldName === 'content',
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(fields).toEqual([
|
||||||
|
'sourceKey',
|
||||||
|
'name',
|
||||||
|
'content',
|
||||||
|
'enabled',
|
||||||
|
'remark',
|
||||||
|
]);
|
||||||
|
expect(content.component).toBe(MessageTemplateMentions);
|
||||||
|
expect(content.modelPropName).toBe('value');
|
||||||
|
expect(
|
||||||
|
wrapper
|
||||||
|
.get('[data-testid="template-form"]')
|
||||||
|
.findComponent(MessageTemplateMentions)
|
||||||
|
.exists(),
|
||||||
|
).toBe(true);
|
||||||
|
expect(
|
||||||
|
mocks.formOptions.schema.find((field: any) => field.fieldName === 'name')
|
||||||
|
.componentProps.maxlength,
|
||||||
|
).toBe(100);
|
||||||
|
expect(
|
||||||
|
mocks.formOptions.schema.find(
|
||||||
|
(field: any) => field.fieldName === 'remark',
|
||||||
|
).componentProps.maxlength,
|
||||||
|
).toBe(500);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('opens before reset/set/reset-validation and isolates edit then create', async () => {
|
||||||
|
const wrapper = mountModal();
|
||||||
|
mocks.formApi.resetForm.mockImplementation(async () => {
|
||||||
|
expect(mocks.modalApi.open).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
(wrapper.vm as any).openEdit(createRow());
|
||||||
|
await flushPromises();
|
||||||
|
(wrapper.vm as any).openCreate();
|
||||||
|
await flushPromises();
|
||||||
|
|
||||||
|
expect(mocks.formApi.setValues).toHaveBeenLastCalledWith({
|
||||||
|
content: '',
|
||||||
|
enabled: true,
|
||||||
|
name: '',
|
||||||
|
remark: '',
|
||||||
|
sourceKey: 'source-a',
|
||||||
|
});
|
||||||
|
const resetOrder =
|
||||||
|
mocks.formApi.resetForm.mock.invocationCallOrder.at(-1) || 0;
|
||||||
|
const setOrder =
|
||||||
|
mocks.formApi.setValues.mock.invocationCallOrder.at(-1) || 0;
|
||||||
|
const validateOrder =
|
||||||
|
mocks.formApi.resetValidate.mock.invocationCallOrder.at(-1) || 0;
|
||||||
|
expect(resetOrder).toBeLessThan(setOrder);
|
||||||
|
expect(setOrder).toBeLessThan(validateOrder);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('loads exact details and prevents a late source from overwriting the latest', async () => {
|
||||||
|
const deferred = new Map<
|
||||||
|
string,
|
||||||
|
{
|
||||||
|
promise: Promise<QqbotMessagePushApi.SystemMessageSourceDefinition>;
|
||||||
|
resolve: (
|
||||||
|
value: QqbotMessagePushApi.SystemMessageSourceDefinition,
|
||||||
|
) => void;
|
||||||
|
}
|
||||||
|
>();
|
||||||
|
mocks.detail.mockImplementation((sourceKey: string) => {
|
||||||
|
let resolve!: (
|
||||||
|
value: QqbotMessagePushApi.SystemMessageSourceDefinition,
|
||||||
|
) => void;
|
||||||
|
const promise =
|
||||||
|
new Promise<QqbotMessagePushApi.SystemMessageSourceDefinition>(
|
||||||
|
(done) => {
|
||||||
|
resolve = done;
|
||||||
|
},
|
||||||
|
);
|
||||||
|
deferred.set(sourceKey, { promise, resolve });
|
||||||
|
return promise;
|
||||||
|
});
|
||||||
|
const wrapper = mountModal();
|
||||||
|
(wrapper.vm as any).openCreate();
|
||||||
|
await flushPromises();
|
||||||
|
expect(mocks.detail).toHaveBeenNthCalledWith(1, 'source-a');
|
||||||
|
const switchPromise = mocks.formOptions.handleValuesChange(
|
||||||
|
{ ...mocks.formValues, sourceKey: 'source-b' },
|
||||||
|
['sourceKey'],
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(mocks.detail).toHaveBeenNthCalledWith(2, 'source-b');
|
||||||
|
const content = mocks.formOptions.schema.find(
|
||||||
|
(field: any) => field.fieldName === 'content',
|
||||||
|
);
|
||||||
|
expect(content.componentProps().variables).toEqual([]);
|
||||||
|
deferred.get('source-b')?.resolve(createSource('source-b', 'port'));
|
||||||
|
await switchPromise;
|
||||||
|
expect(content.componentProps().variables[0].key).toBe('port');
|
||||||
|
deferred.get('source-a')?.resolve(createSource('source-a', 'endpoint'));
|
||||||
|
await flushPromises();
|
||||||
|
expect(content.componentProps().variables[0].key).toBe('port');
|
||||||
|
expect(mocks.formApi.validateField).toHaveBeenCalledWith('content');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('deduplicates exact-key detail and evicts a rejected cache entry for retry', async () => {
|
||||||
|
let resolveSourceA!: (
|
||||||
|
source: QqbotMessagePushApi.SystemMessageSourceDefinition,
|
||||||
|
) => void;
|
||||||
|
mocks.detail.mockImplementationOnce(
|
||||||
|
() =>
|
||||||
|
new Promise<QqbotMessagePushApi.SystemMessageSourceDefinition>(
|
||||||
|
(resolve) => {
|
||||||
|
resolveSourceA = resolve;
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
|
const wrapper = mountModal();
|
||||||
|
(wrapper.vm as any).openCreate();
|
||||||
|
await flushPromises();
|
||||||
|
const collidingLoad = mocks.formOptions.handleValuesChange(
|
||||||
|
{ ...mocks.formValues, sourceKey: 'source-a' },
|
||||||
|
['sourceKey'],
|
||||||
|
);
|
||||||
|
expect(mocks.detail).toHaveBeenCalledTimes(1);
|
||||||
|
resolveSourceA(createSource('source-a', 'endpoint'));
|
||||||
|
await collidingLoad;
|
||||||
|
await flushPromises();
|
||||||
|
|
||||||
|
mocks.detail.mockRejectedValueOnce(new Error('detail failed'));
|
||||||
|
await expect(
|
||||||
|
mocks.formOptions.handleValuesChange(
|
||||||
|
{ ...mocks.formValues, sourceKey: 'source-b' },
|
||||||
|
['sourceKey'],
|
||||||
|
),
|
||||||
|
).rejects.toThrow('detail failed');
|
||||||
|
mocks.detail.mockResolvedValueOnce(createSource('source-b', 'port'));
|
||||||
|
await mocks.formOptions.handleValuesChange(
|
||||||
|
{ ...mocks.formValues, sourceKey: 'source-b' },
|
||||||
|
['sourceKey'],
|
||||||
|
);
|
||||||
|
expect(mocks.detail).toHaveBeenCalledTimes(3);
|
||||||
|
const content = mocks.formOptions.schema.find(
|
||||||
|
(field: any) => field.fieldName === 'content',
|
||||||
|
);
|
||||||
|
expect(content.componentProps().loading).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('allows preview only on explicit permitted click and clears it on content change', async () => {
|
||||||
|
const wrapper = mountModal(true);
|
||||||
|
Object.assign(mocks.formValues, {
|
||||||
|
content: '[CQ:at,qq=12345] ${{endpoint}}',
|
||||||
|
sourceKey: 'source-a',
|
||||||
|
});
|
||||||
|
expect(mocks.preview).not.toHaveBeenCalled();
|
||||||
|
|
||||||
|
await wrapper.get('footer button').trigger('click');
|
||||||
|
await flushPromises();
|
||||||
|
|
||||||
|
expect(mocks.preview).toHaveBeenCalledOnce();
|
||||||
|
expect(mocks.preview).toHaveBeenCalledWith({
|
||||||
|
content: '[CQ:at,qq=12345] ${{endpoint}}',
|
||||||
|
sourceKey: 'source-a',
|
||||||
|
});
|
||||||
|
expect(wrapper.text()).toContain('server rendered');
|
||||||
|
expect(wrapper.text()).toContain('server.example:38213');
|
||||||
|
|
||||||
|
await mocks.formOptions.handleValuesChange(
|
||||||
|
{ ...mocks.formValues, content: 'changed' },
|
||||||
|
['content'],
|
||||||
|
);
|
||||||
|
await nextTick();
|
||||||
|
expect(wrapper.text()).not.toContain('server rendered');
|
||||||
|
expect(mocks.detail).not.toHaveBeenCalled();
|
||||||
|
expect(mocks.preview).toHaveBeenCalledOnce();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('makes preview impossible without Preview permission or valid values', async () => {
|
||||||
|
const wrapper = mountModal(false);
|
||||||
|
expect(wrapper.find('footer button').exists()).toBe(false);
|
||||||
|
expect(mocks.preview).not.toHaveBeenCalled();
|
||||||
|
|
||||||
|
wrapper.unmount();
|
||||||
|
const permitted = mountModal(true);
|
||||||
|
Object.assign(mocks.formValues, { content: '', sourceKey: 'source-a' });
|
||||||
|
await permitted.get('footer button').trigger('click');
|
||||||
|
expect(mocks.preview).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('submits exact create/update payloads while preserving content and string ID', async () => {
|
||||||
|
const wrapper = mountModal();
|
||||||
|
Object.assign(mocks.formValues, {
|
||||||
|
content: ' [CQ:at,qq=12345]\n${{endpoint}} ',
|
||||||
|
enabled: 1,
|
||||||
|
name: ' template ',
|
||||||
|
remark: ' note ',
|
||||||
|
sourceKey: 'source-a',
|
||||||
|
});
|
||||||
|
(wrapper.vm as any).openCreate();
|
||||||
|
await flushPromises();
|
||||||
|
Object.assign(mocks.formValues, {
|
||||||
|
content: ' [CQ:at,qq=12345]\n${{endpoint}} ',
|
||||||
|
enabled: 1,
|
||||||
|
name: ' template ',
|
||||||
|
remark: ' note ',
|
||||||
|
sourceKey: 'source-a',
|
||||||
|
});
|
||||||
|
await mocks.modalOptions.onConfirm();
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
content: ' [CQ:at,qq=12345]\n${{endpoint}} ',
|
||||||
|
enabled: true,
|
||||||
|
name: 'template',
|
||||||
|
remark: 'note',
|
||||||
|
sourceKey: 'source-a',
|
||||||
|
};
|
||||||
|
expect(mocks.create).toHaveBeenCalledWith(payload);
|
||||||
|
|
||||||
|
(wrapper.vm as any).openEdit(createRow());
|
||||||
|
await flushPromises();
|
||||||
|
Object.assign(mocks.formValues, payload);
|
||||||
|
await mocks.modalOptions.onConfirm();
|
||||||
|
expect(mocks.update).toHaveBeenCalledWith('10000000000000001', payload);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('stays open/unlocked after failure and closes/emits once on retry success', async () => {
|
||||||
|
mocks.create.mockRejectedValueOnce(new Error('save failed'));
|
||||||
|
const wrapper = mountModal();
|
||||||
|
(wrapper.vm as any).openCreate();
|
||||||
|
await flushPromises();
|
||||||
|
|
||||||
|
await expect(mocks.modalOptions.onConfirm()).rejects.toThrow('save failed');
|
||||||
|
expect(mocks.modalApi.lock).toHaveBeenCalledOnce();
|
||||||
|
expect(mocks.modalApi.close).not.toHaveBeenCalled();
|
||||||
|
expect(wrapper.emitted('saved')).toBeUndefined();
|
||||||
|
expect(mocks.modalApi.unlock).toHaveBeenCalledOnce();
|
||||||
|
|
||||||
|
mocks.create.mockResolvedValueOnce({});
|
||||||
|
await mocks.modalOptions.onConfirm();
|
||||||
|
expect(mocks.modalApi.close).toHaveBeenCalledOnce();
|
||||||
|
expect(wrapper.emitted('saved')).toHaveLength(1);
|
||||||
|
expect(mocks.modalApi.unlock).toHaveBeenCalledTimes(2);
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,384 @@
|
|||||||
|
import type { PropType } from 'vue';
|
||||||
|
|
||||||
|
import type { VbenFormSchema } from '#/adapter/form';
|
||||||
|
import type { QqbotMessagePushApi } from '#/api/qqbot/message-push';
|
||||||
|
|
||||||
|
import { computed, defineComponent, markRaw, ref } from 'vue';
|
||||||
|
|
||||||
|
import { useVbenModal } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import Button from 'antdv-next/dist/button/index';
|
||||||
|
|
||||||
|
import { useVbenForm, z } from '#/adapter/form';
|
||||||
|
import {
|
||||||
|
createMessageTemplate,
|
||||||
|
getMessagePushSourceDetail,
|
||||||
|
previewMessageTemplate,
|
||||||
|
updateMessageTemplate,
|
||||||
|
} from '#/api/qqbot/message-push';
|
||||||
|
|
||||||
|
import MessageTemplateMentions from './MessageTemplateMentions';
|
||||||
|
|
||||||
|
const AButton = Button as any;
|
||||||
|
|
||||||
|
export interface MessageTemplateModalExposed {
|
||||||
|
openCreate: () => void;
|
||||||
|
openEdit: (row: QqbotMessagePushApi.MessageTemplateView) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface MessageTemplateFormValues {
|
||||||
|
content: string;
|
||||||
|
enabled: boolean;
|
||||||
|
name: string;
|
||||||
|
remark?: string;
|
||||||
|
sourceKey: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface MessageTemplateModalData {
|
||||||
|
values: MessageTemplateFormValues;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'MessageTemplateModal',
|
||||||
|
props: {
|
||||||
|
canPreview: {
|
||||||
|
required: true,
|
||||||
|
type: Boolean,
|
||||||
|
},
|
||||||
|
sources: {
|
||||||
|
required: true,
|
||||||
|
type: Array as PropType<
|
||||||
|
QqbotMessagePushApi.SystemMessageSourceDefinition[]
|
||||||
|
>,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: ['saved'],
|
||||||
|
/** Owns one isolated template edit session, source detail cache, and preview. */
|
||||||
|
setup(props, { emit, expose }) {
|
||||||
|
const editingRow = ref<QqbotMessagePushApi.MessageTemplateView>();
|
||||||
|
const variables = ref<
|
||||||
|
QqbotMessagePushApi.SystemMessageSourceVariableDefinition[]
|
||||||
|
>([]);
|
||||||
|
const detailLoading = ref(false);
|
||||||
|
const previewLoading = ref(false);
|
||||||
|
const preview = ref<QqbotMessagePushApi.MessageTemplatePreview>();
|
||||||
|
const selectedSourceKey = ref('');
|
||||||
|
const detailCache = new Map<
|
||||||
|
string,
|
||||||
|
Promise<QqbotMessagePushApi.SystemMessageSourceDefinition>
|
||||||
|
>();
|
||||||
|
let sourceRevision = 0;
|
||||||
|
let previewRevision = 0;
|
||||||
|
const [TemplateForm, formApi] = useVbenForm({
|
||||||
|
commonConfig: {
|
||||||
|
labelClass: 'w-24',
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Clears stale preview state and refreshes variables only for source changes.
|
||||||
|
* @param values - Current form values after the update.
|
||||||
|
* @param fieldsChanged - Exact fields changed by this form event.
|
||||||
|
*/
|
||||||
|
async handleValuesChange(values, fieldsChanged) {
|
||||||
|
if (fieldsChanged.includes('content')) clearPreview();
|
||||||
|
if (!fieldsChanged.includes('sourceKey')) return;
|
||||||
|
const sourceKey =
|
||||||
|
typeof values.sourceKey === 'string' ? values.sourceKey : '';
|
||||||
|
selectedSourceKey.value = sourceKey;
|
||||||
|
await loadSourceDetail(sourceKey);
|
||||||
|
},
|
||||||
|
layout: 'horizontal',
|
||||||
|
schema: createFormSchema(
|
||||||
|
props,
|
||||||
|
variables,
|
||||||
|
detailLoading,
|
||||||
|
selectedSourceKey,
|
||||||
|
),
|
||||||
|
showDefaultActions: false,
|
||||||
|
wrapperClass: 'grid-cols-1',
|
||||||
|
});
|
||||||
|
/** Tracks the title from isolated create/edit identity only. */
|
||||||
|
const modalTitle = computed(() =>
|
||||||
|
editingRow.value ? '编辑消息模板' : '新建消息模板',
|
||||||
|
);
|
||||||
|
const [Modal, modalApi] = useVbenModal({
|
||||||
|
class: 'w-[760px]',
|
||||||
|
fullscreenButton: false,
|
||||||
|
/** Validates and persists the exact five-field template payload. */
|
||||||
|
async onConfirm() {
|
||||||
|
await submit();
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Resets every mounted form/session state before loading authoritative detail.
|
||||||
|
* @param isOpen - Whether destroy-on-close modal content is mounted.
|
||||||
|
*/
|
||||||
|
async onOpenChange(isOpen: boolean) {
|
||||||
|
if (!isOpen) return;
|
||||||
|
const { values } = modalApi.getData<MessageTemplateModalData>();
|
||||||
|
invalidateSession();
|
||||||
|
selectedSourceKey.value = values.sourceKey;
|
||||||
|
await resetForm(values);
|
||||||
|
await loadSourceDetail(values.sourceKey);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Opens a fresh create session without values from the preceding edit. */
|
||||||
|
function openCreate() {
|
||||||
|
editingRow.value = undefined;
|
||||||
|
modalApi
|
||||||
|
.setData({
|
||||||
|
values: {
|
||||||
|
content: '',
|
||||||
|
enabled: true,
|
||||||
|
name: '',
|
||||||
|
remark: '',
|
||||||
|
sourceKey: props.sources[0]?.sourceKey || '',
|
||||||
|
},
|
||||||
|
} satisfies MessageTemplateModalData)
|
||||||
|
.open();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Opens an edit session with only the five user-editable values.
|
||||||
|
* @param row - Template row selected from the page-owned KtTable.
|
||||||
|
*/
|
||||||
|
function openEdit(row: QqbotMessagePushApi.MessageTemplateView) {
|
||||||
|
editingRow.value = row;
|
||||||
|
modalApi
|
||||||
|
.setData({
|
||||||
|
values: {
|
||||||
|
content: row.content,
|
||||||
|
enabled: row.enabled,
|
||||||
|
name: row.name,
|
||||||
|
remark: row.remark || '',
|
||||||
|
sourceKey: row.sourceKey,
|
||||||
|
},
|
||||||
|
} satisfies MessageTemplateModalData)
|
||||||
|
.open();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Resets and installs the current session values in the required order.
|
||||||
|
* @param values - Exact editable values stored before the modal opened.
|
||||||
|
*/
|
||||||
|
async function resetForm(values: MessageTemplateFormValues) {
|
||||||
|
await formApi.resetForm();
|
||||||
|
await formApi.setValues(values);
|
||||||
|
await formApi.resetValidate();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Invalidates stale source/preview work and clears every transient display. */
|
||||||
|
function invalidateSession() {
|
||||||
|
sourceRevision += 1;
|
||||||
|
detailLoading.value = false;
|
||||||
|
variables.value = [];
|
||||||
|
clearPreview();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Clears authoritative preview data and invalidates any in-flight preview. */
|
||||||
|
function clearPreview() {
|
||||||
|
previewRevision += 1;
|
||||||
|
preview.value = undefined;
|
||||||
|
previewLoading.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reuses an exact-key in-flight/resolved source detail promise.
|
||||||
|
* @param sourceKey - Stable exact source identity selected in the form.
|
||||||
|
* @returns Authoritative source detail promise, evicted when rejected.
|
||||||
|
*/
|
||||||
|
function getCachedSourceDetail(sourceKey: string) {
|
||||||
|
const cached = detailCache.get(sourceKey);
|
||||||
|
if (cached) return cached;
|
||||||
|
const request = getMessagePushSourceDetail(sourceKey);
|
||||||
|
detailCache.set(sourceKey, request);
|
||||||
|
request.catch(() => {
|
||||||
|
if (detailCache.get(sourceKey) === request) {
|
||||||
|
detailCache.delete(sourceKey);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return request;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Replaces suggestions only when this exact source request remains latest.
|
||||||
|
* @param sourceKey - Newly selected source identity.
|
||||||
|
*/
|
||||||
|
async function loadSourceDetail(sourceKey: string) {
|
||||||
|
const revision = ++sourceRevision;
|
||||||
|
clearPreview();
|
||||||
|
variables.value = [];
|
||||||
|
detailLoading.value = !!sourceKey;
|
||||||
|
if (!sourceKey) {
|
||||||
|
await formApi.validateField('content');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const source = await getCachedSourceDetail(sourceKey);
|
||||||
|
if (
|
||||||
|
revision === sourceRevision &&
|
||||||
|
selectedSourceKey.value === sourceKey
|
||||||
|
) {
|
||||||
|
variables.value = source.variables;
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
if (
|
||||||
|
revision === sourceRevision &&
|
||||||
|
selectedSourceKey.value === sourceKey
|
||||||
|
) {
|
||||||
|
detailLoading.value = false;
|
||||||
|
await formApi.validateField('content');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Requests server-authoritative preview only after an explicit valid click. */
|
||||||
|
async function handlePreview() {
|
||||||
|
if (!props.canPreview) return;
|
||||||
|
const values = await formApi.getValues<MessageTemplateFormValues>();
|
||||||
|
if (!values.sourceKey || !values.content) return;
|
||||||
|
const revision = ++previewRevision;
|
||||||
|
preview.value = undefined;
|
||||||
|
previewLoading.value = true;
|
||||||
|
try {
|
||||||
|
const result = await previewMessageTemplate({
|
||||||
|
content: values.content,
|
||||||
|
sourceKey: values.sourceKey,
|
||||||
|
});
|
||||||
|
if (revision === previewRevision) preview.value = result;
|
||||||
|
} finally {
|
||||||
|
if (revision === previewRevision) previewLoading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Persists content byte-for-byte and closes/emits only after success. */
|
||||||
|
async function submit() {
|
||||||
|
const { valid } = await formApi.validate();
|
||||||
|
if (!valid) return;
|
||||||
|
const values = await formApi.getValues<MessageTemplateFormValues>();
|
||||||
|
const payload: QqbotMessagePushApi.MessageTemplateInput = {
|
||||||
|
content: values.content,
|
||||||
|
enabled: !!values.enabled,
|
||||||
|
name: values.name.trim(),
|
||||||
|
remark: values.remark?.trim() || '',
|
||||||
|
sourceKey: values.sourceKey,
|
||||||
|
};
|
||||||
|
modalApi.lock();
|
||||||
|
try {
|
||||||
|
await (editingRow.value
|
||||||
|
? updateMessageTemplate(editingRow.value.id, payload)
|
||||||
|
: createMessageTemplate(payload));
|
||||||
|
await modalApi.close();
|
||||||
|
emit('saved');
|
||||||
|
} finally {
|
||||||
|
modalApi.unlock();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Renders the permission-gated explicit preview action. */
|
||||||
|
function renderPreviewAction() {
|
||||||
|
return props.canPreview ? (
|
||||||
|
<AButton loading={previewLoading.value} onClick={handlePreview}>
|
||||||
|
示例预览
|
||||||
|
</AButton>
|
||||||
|
) : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Renders server-returned preview text and variables as escaped text nodes. */
|
||||||
|
function renderPreview() {
|
||||||
|
const result = preview.value;
|
||||||
|
if (!result) return null;
|
||||||
|
return (
|
||||||
|
<section class="mx-2 mt-4 rounded border p-3">
|
||||||
|
<div class="mb-2 text-sm font-medium">服务端预览</div>
|
||||||
|
<pre class="whitespace-pre-wrap break-words">
|
||||||
|
{result.renderedMessage}
|
||||||
|
</pre>
|
||||||
|
<div class="mt-2 text-xs text-gray-500">
|
||||||
|
{Object.entries(result.variables).map(([key, value]) => (
|
||||||
|
<div key={key}>{`${key}: ${value}`}</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
expose({ openCreate, openEdit } satisfies MessageTemplateModalExposed);
|
||||||
|
|
||||||
|
return () => (
|
||||||
|
<Modal
|
||||||
|
title={modalTitle.value}
|
||||||
|
v-slots={{ 'prepend-footer': renderPreviewAction }}
|
||||||
|
>
|
||||||
|
<TemplateForm class="mx-2" />
|
||||||
|
{renderPreview()}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Builds the exact template schema with a local controlled Mentions component.
|
||||||
|
* @param props - Page-owned source labels and preview permission.
|
||||||
|
* @param variables - Variables from the latest exact source detail.
|
||||||
|
* @param loading - Source-detail loading state forwarded to Mentions.
|
||||||
|
* @param selectedSourceKey - Current source identity used to disable no-source input.
|
||||||
|
* @returns Five fields in the locked source/name/content/enabled/remark order.
|
||||||
|
*/
|
||||||
|
function createFormSchema(
|
||||||
|
props: Readonly<{
|
||||||
|
canPreview: boolean;
|
||||||
|
sources: QqbotMessagePushApi.SystemMessageSourceDefinition[];
|
||||||
|
}>,
|
||||||
|
variables: Readonly<{
|
||||||
|
value: QqbotMessagePushApi.SystemMessageSourceVariableDefinition[];
|
||||||
|
}>,
|
||||||
|
loading: Readonly<{ value: boolean }>,
|
||||||
|
selectedSourceKey: Readonly<{ value: string }>,
|
||||||
|
): VbenFormSchema[] {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
component: 'Select',
|
||||||
|
componentProps: () => ({
|
||||||
|
options: props.sources.map((source) => ({
|
||||||
|
label: `${source.displayName} · ${source.sourceKey}`,
|
||||||
|
value: source.sourceKey,
|
||||||
|
})),
|
||||||
|
}),
|
||||||
|
fieldName: 'sourceKey',
|
||||||
|
label: '消息源',
|
||||||
|
rules: z.string().min(1),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: { allowClear: true, maxlength: 100 },
|
||||||
|
fieldName: 'name',
|
||||||
|
label: '模板名称',
|
||||||
|
rules: z.string().trim().min(1).max(100),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: markRaw(MessageTemplateMentions),
|
||||||
|
componentProps: () => ({
|
||||||
|
disabled: !selectedSourceKey.value,
|
||||||
|
loading: loading.value,
|
||||||
|
variables: variables.value,
|
||||||
|
}),
|
||||||
|
fieldName: 'content',
|
||||||
|
label: '模板内容',
|
||||||
|
modelPropName: 'value',
|
||||||
|
rules: z.string().min(1).max(2000),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Switch',
|
||||||
|
defaultValue: true,
|
||||||
|
fieldName: 'enabled',
|
||||||
|
label: '启用',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Textarea',
|
||||||
|
componentProps: { allowClear: true, maxlength: 500, rows: 3 },
|
||||||
|
fieldName: 'remark',
|
||||||
|
label: '备注',
|
||||||
|
rules: z.string().max(500).optional().or(z.literal('')),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
@ -0,0 +1,402 @@
|
|||||||
|
/* @vitest-environment happy-dom */
|
||||||
|
|
||||||
|
/* eslint-disable vue/one-component-per-file */
|
||||||
|
|
||||||
|
import type { QqbotMessagePushApi } from '#/api/qqbot/message-push';
|
||||||
|
|
||||||
|
import { flushPromises, mount } from '@vue/test-utils';
|
||||||
|
import { defineComponent, h } from 'vue';
|
||||||
|
|
||||||
|
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||||
|
|
||||||
|
import MessageTemplateList from './list';
|
||||||
|
|
||||||
|
const mocks = vi.hoisted(() => {
|
||||||
|
const registerTable = vi.fn();
|
||||||
|
const tableApi = {
|
||||||
|
reload: vi.fn(async () => {
|
||||||
|
if (!mocks.tableOptions) {
|
||||||
|
throw new Error('[MockKtTable]: table is not registered yet');
|
||||||
|
}
|
||||||
|
return mocks.tableOptions.api.list({ pageNo: 1, pageSize: 10 });
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
accessCodes: new Set<string>(),
|
||||||
|
api: {
|
||||||
|
delete: vi.fn(),
|
||||||
|
detail: vi.fn(),
|
||||||
|
getList: vi.fn(),
|
||||||
|
getSources: vi.fn(),
|
||||||
|
preview: vi.fn(),
|
||||||
|
toggle: vi.fn(),
|
||||||
|
},
|
||||||
|
modalOpenCreate: vi.fn(),
|
||||||
|
modalOpenEdit: vi.fn(),
|
||||||
|
registerTable,
|
||||||
|
tableApi,
|
||||||
|
tableOptions: undefined as any,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
vi.mock('@vben/access', () => ({
|
||||||
|
useAccess: () => ({
|
||||||
|
hasAccessByCodes: (codes: string[]) =>
|
||||||
|
codes.every((code) => mocks.accessCodes.has(code)),
|
||||||
|
}),
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('@vben/common-ui', () => ({
|
||||||
|
Page: defineComponent({
|
||||||
|
name: 'MockPage',
|
||||||
|
props: { autoContentHeight: Boolean },
|
||||||
|
/** Renders one stable route root and exposes the height contract. */
|
||||||
|
setup(props, { slots }) {
|
||||||
|
return () =>
|
||||||
|
h(
|
||||||
|
'main',
|
||||||
|
{
|
||||||
|
'data-auto-content-height': String(props.autoContentHeight),
|
||||||
|
'data-testid': 'page-root',
|
||||||
|
},
|
||||||
|
slots.default?.(),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('@vben/icons', () => ({
|
||||||
|
Plus: defineComponent({ render: () => h('i') }),
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('antdv-next/dist/tag/index', () => ({
|
||||||
|
default: defineComponent({
|
||||||
|
name: 'MockTag',
|
||||||
|
/** Renders tag children as ordinary escaped text. */
|
||||||
|
setup(_, { slots }) {
|
||||||
|
return () => h('span', slots.default?.());
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('#/api/qqbot/message-push', () => ({
|
||||||
|
deleteMessageTemplate: mocks.api.delete,
|
||||||
|
getMessagePushSourceDetail: mocks.api.detail,
|
||||||
|
getMessagePushSources: mocks.api.getSources,
|
||||||
|
getMessageTemplateList: mocks.api.getList,
|
||||||
|
previewMessageTemplate: mocks.api.preview,
|
||||||
|
setMessageTemplateEnabled: mocks.api.toggle,
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('#/components/ktTable', () => ({
|
||||||
|
KtTable: defineComponent({
|
||||||
|
name: 'MockKtTable',
|
||||||
|
emits: ['register'],
|
||||||
|
/** Emits the actual registration event before exposing refresh/list rendering. */
|
||||||
|
setup(_, { emit, slots }) {
|
||||||
|
emit('register', { registered: true });
|
||||||
|
return () =>
|
||||||
|
h('section', { 'data-testid': 'template-table' }, [
|
||||||
|
h(
|
||||||
|
'button',
|
||||||
|
{
|
||||||
|
'data-testid': 'explicit-refresh',
|
||||||
|
onClick: () => mocks.tableApi.reload(),
|
||||||
|
},
|
||||||
|
'refresh',
|
||||||
|
),
|
||||||
|
slots.bodyCell?.({
|
||||||
|
column: { key: 'contentSummary' },
|
||||||
|
record: createRow({ content: '[CQ:at,qq=12345] <plain>' }),
|
||||||
|
}),
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
useKtTable: vi.fn((options) => {
|
||||||
|
mocks.tableOptions = undefined;
|
||||||
|
mocks.registerTable.mockImplementation(() => {
|
||||||
|
mocks.tableOptions = options;
|
||||||
|
});
|
||||||
|
return [mocks.registerTable, mocks.tableApi];
|
||||||
|
}),
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('./components/MessageTemplateModal', () => ({
|
||||||
|
default: defineComponent({
|
||||||
|
name: 'MockMessageTemplateModal',
|
||||||
|
props: {
|
||||||
|
canPreview: Boolean,
|
||||||
|
sources: {
|
||||||
|
default: () => [],
|
||||||
|
type: Array,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: ['saved'],
|
||||||
|
/** Exposes create/edit and a saved trigger through the rendered modal marker. */
|
||||||
|
setup(props, { emit, expose }) {
|
||||||
|
expose({
|
||||||
|
openCreate: mocks.modalOpenCreate,
|
||||||
|
openEdit: mocks.modalOpenEdit,
|
||||||
|
});
|
||||||
|
return () =>
|
||||||
|
h(
|
||||||
|
'button',
|
||||||
|
{
|
||||||
|
'data-can-preview': String(props.canPreview),
|
||||||
|
'data-testid': 'modal-saved',
|
||||||
|
onClick: () => emit('saved'),
|
||||||
|
},
|
||||||
|
'saved',
|
||||||
|
);
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
}));
|
||||||
|
|
||||||
|
/** Creates one template row while preserving unsafe-integer IDs as strings. */
|
||||||
|
function createRow(
|
||||||
|
overrides: Partial<QqbotMessagePushApi.MessageTemplateView> = {},
|
||||||
|
): QqbotMessagePushApi.MessageTemplateView {
|
||||||
|
return {
|
||||||
|
content: 'content',
|
||||||
|
createTime: '2026-07-24 10:00:00',
|
||||||
|
enabled: true,
|
||||||
|
id: '10000000000000001',
|
||||||
|
name: 'template',
|
||||||
|
referenceCount: 0,
|
||||||
|
remark: null,
|
||||||
|
sourceKey: 'network.stun.mapping-port-changed',
|
||||||
|
sourceName: 'STUN 映射端口变更',
|
||||||
|
updateTime: '2026-07-24 10:00:00',
|
||||||
|
...overrides,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Creates the page-lifetime source directory fixture. */
|
||||||
|
function createSources(): QqbotMessagePushApi.SystemMessageSourceDefinition[] {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
description: 'STUN mapping changed',
|
||||||
|
displayName: 'STUN 映射端口变更',
|
||||||
|
sourceKey: 'network.stun.mapping-port-changed',
|
||||||
|
subscriptionFields: [],
|
||||||
|
variables: [],
|
||||||
|
version: 1,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('message template list', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.useFakeTimers();
|
||||||
|
vi.clearAllMocks();
|
||||||
|
mocks.tableOptions = undefined;
|
||||||
|
mocks.accessCodes = new Set([
|
||||||
|
'QqBot:MessageTemplate:Create',
|
||||||
|
'QqBot:MessageTemplate:Delete',
|
||||||
|
'QqBot:MessageTemplate:List',
|
||||||
|
'QqBot:MessageTemplate:Preview',
|
||||||
|
'QqBot:MessageTemplate:Toggle',
|
||||||
|
'QqBot:MessageTemplate:Update',
|
||||||
|
]);
|
||||||
|
mocks.api.getList.mockResolvedValue({
|
||||||
|
items: [createRow()],
|
||||||
|
total: 1,
|
||||||
|
});
|
||||||
|
mocks.api.getSources.mockResolvedValue(createSources());
|
||||||
|
mocks.api.toggle.mockResolvedValue({});
|
||||||
|
mocks.api.delete.mockResolvedValue(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
vi.useRealTimers();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders one stable Page root and requires native KtTable registration', async () => {
|
||||||
|
const wrapper = mount(MessageTemplateList);
|
||||||
|
await flushPromises();
|
||||||
|
|
||||||
|
expect(wrapper.get('[data-testid="page-root"]').attributes()).toMatchObject(
|
||||||
|
{
|
||||||
|
'data-auto-content-height': 'true',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
expect(wrapper.findAll('[data-testid="page-root"]')).toHaveLength(1);
|
||||||
|
expect(wrapper.find('[data-testid="template-table"]').exists()).toBe(true);
|
||||||
|
expect(mocks.tableOptions.immediate).toBe(false);
|
||||||
|
expect(mocks.tableOptions.rowKey).toBe('id');
|
||||||
|
expect(mocks.registerTable).toHaveBeenCalledOnce();
|
||||||
|
expect(mocks.api.getList).toHaveBeenCalledOnce();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('pins exact filters, columns, and the unchanged strict page result', async () => {
|
||||||
|
mount(MessageTemplateList);
|
||||||
|
await flushPromises();
|
||||||
|
const result = { items: [createRow()], total: 1 };
|
||||||
|
mocks.api.getList.mockResolvedValueOnce(result);
|
||||||
|
|
||||||
|
await expect(
|
||||||
|
mocks.tableOptions.api.list({
|
||||||
|
enabled: true,
|
||||||
|
name: 'template',
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
sourceKey: 'network.stun.mapping-port-changed',
|
||||||
|
}),
|
||||||
|
).resolves.toBe(result);
|
||||||
|
expect(
|
||||||
|
mocks.tableOptions.formOptions.schema.map(
|
||||||
|
(field: any) => field.fieldName,
|
||||||
|
),
|
||||||
|
).toEqual(['name', 'sourceKey', 'enabled']);
|
||||||
|
expect(mocks.tableOptions.columns.map((column: any) => column.key)).toEqual(
|
||||||
|
[
|
||||||
|
'name',
|
||||||
|
'source',
|
||||||
|
'contentSummary',
|
||||||
|
'referenceCount',
|
||||||
|
'enabled',
|
||||||
|
'updateTime',
|
||||||
|
],
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('makes zero requests and registration side paths without List permission', async () => {
|
||||||
|
mocks.accessCodes = new Set([
|
||||||
|
'QqBot:MessageTemplate:Create',
|
||||||
|
'QqBot:MessageTemplate:Preview',
|
||||||
|
]);
|
||||||
|
const wrapper = mount(MessageTemplateList);
|
||||||
|
await flushPromises();
|
||||||
|
|
||||||
|
expect(mocks.registerTable).not.toHaveBeenCalled();
|
||||||
|
expect(mocks.tableApi.reload).not.toHaveBeenCalled();
|
||||||
|
expect(mocks.api.getList).not.toHaveBeenCalled();
|
||||||
|
expect(mocks.api.getSources).not.toHaveBeenCalled();
|
||||||
|
expect(mocks.api.detail).not.toHaveBeenCalled();
|
||||||
|
expect(mocks.api.preview).not.toHaveBeenCalled();
|
||||||
|
expect(wrapper.find('[data-testid="template-table"]').exists()).toBe(false);
|
||||||
|
expect(wrapper.find('[data-testid="modal-saved"]').exists()).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('loads list/source once and stays request/timer-free for 60 seconds', async () => {
|
||||||
|
mount(MessageTemplateList);
|
||||||
|
await flushPromises();
|
||||||
|
|
||||||
|
expect(mocks.tableApi.reload).toHaveBeenCalledOnce();
|
||||||
|
expect(mocks.api.getList).toHaveBeenCalledOnce();
|
||||||
|
expect(mocks.api.getSources).toHaveBeenCalledOnce();
|
||||||
|
expect(mocks.api.detail).not.toHaveBeenCalled();
|
||||||
|
expect(mocks.api.preview).not.toHaveBeenCalled();
|
||||||
|
vi.advanceTimersByTime(60_000);
|
||||||
|
await flushPromises();
|
||||||
|
expect(mocks.tableApi.reload).toHaveBeenCalledOnce();
|
||||||
|
expect(mocks.api.getList).toHaveBeenCalledOnce();
|
||||||
|
expect(mocks.api.getSources).toHaveBeenCalledOnce();
|
||||||
|
expect(mocks.api.detail).not.toHaveBeenCalled();
|
||||||
|
expect(mocks.api.preview).not.toHaveBeenCalled();
|
||||||
|
expect(vi.getTimerCount()).toBe(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('assigns all exact permissions and passes Preview independently to modal', async () => {
|
||||||
|
const wrapper = mount(MessageTemplateList);
|
||||||
|
await flushPromises();
|
||||||
|
|
||||||
|
expect(mocks.tableOptions.buttons[0].permissionCodes).toEqual([
|
||||||
|
'QqBot:MessageTemplate:Create',
|
||||||
|
]);
|
||||||
|
expect(
|
||||||
|
Object.fromEntries(
|
||||||
|
mocks.tableOptions.rowActions.map((action: any) => [
|
||||||
|
action.key,
|
||||||
|
action.permissionCodes,
|
||||||
|
]),
|
||||||
|
),
|
||||||
|
).toEqual({
|
||||||
|
delete: ['QqBot:MessageTemplate:Delete'],
|
||||||
|
edit: ['QqBot:MessageTemplate:Update'],
|
||||||
|
toggle: ['QqBot:MessageTemplate:Toggle'],
|
||||||
|
});
|
||||||
|
expect(
|
||||||
|
wrapper.get('[data-testid="modal-saved"]').attributes('data-can-preview'),
|
||||||
|
).toBe('true');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('disables referenced delete with a count reason and keeps confirmation otherwise', () => {
|
||||||
|
mount(MessageTemplateList);
|
||||||
|
const remove = mocks.tableOptions.rowActions.find(
|
||||||
|
(action: any) => action.key === 'delete',
|
||||||
|
);
|
||||||
|
const referenced = createRow({ referenceCount: 3 });
|
||||||
|
const unreferenced = createRow({ referenceCount: 0 });
|
||||||
|
|
||||||
|
expect(remove.disabled(referenced)).toBe(true);
|
||||||
|
expect(remove.disabledReason(referenced)).toContain('3');
|
||||||
|
expect(remove.disabled(unreferenced)).toBe(false);
|
||||||
|
expect(remove.disabledReason(unreferenced)).toBeUndefined();
|
||||||
|
expect(remove.confirm(unreferenced)).toContain('template');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('reloads successful row mutations once and rejected mutations zero times', async () => {
|
||||||
|
mount(MessageTemplateList);
|
||||||
|
const row = createRow();
|
||||||
|
const context = { reload: vi.fn(async () => {}) };
|
||||||
|
const toggle = mocks.tableOptions.rowActions.find(
|
||||||
|
(action: any) => action.key === 'toggle',
|
||||||
|
);
|
||||||
|
const remove = mocks.tableOptions.rowActions.find(
|
||||||
|
(action: any) => action.key === 'delete',
|
||||||
|
);
|
||||||
|
|
||||||
|
await toggle.onClick(row, context);
|
||||||
|
await remove.onClick(row, context);
|
||||||
|
expect(mocks.api.toggle).toHaveBeenCalledWith('10000000000000001', false);
|
||||||
|
expect(mocks.api.delete).toHaveBeenCalledWith('10000000000000001');
|
||||||
|
expect(context.reload).toHaveBeenCalledTimes(2);
|
||||||
|
|
||||||
|
context.reload.mockClear();
|
||||||
|
mocks.api.toggle.mockRejectedValueOnce(new Error('toggle failed'));
|
||||||
|
mocks.api.delete.mockRejectedValueOnce(new Error('delete failed'));
|
||||||
|
await expect(toggle.onClick(row, context)).rejects.toThrow('toggle failed');
|
||||||
|
await expect(remove.onClick(row, context)).rejects.toThrow('delete failed');
|
||||||
|
expect(context.reload).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('opens modal, reloads once after saved, and refreshes list metadata-free', async () => {
|
||||||
|
const wrapper = mount(MessageTemplateList);
|
||||||
|
await flushPromises();
|
||||||
|
mocks.tableApi.reload.mockClear();
|
||||||
|
mocks.api.getList.mockClear();
|
||||||
|
const row = createRow();
|
||||||
|
|
||||||
|
await mocks.tableOptions.buttons[0].onClick({});
|
||||||
|
await mocks.tableOptions.rowActions
|
||||||
|
.find((action: any) => action.key === 'edit')
|
||||||
|
.onClick(row, { reload: vi.fn() });
|
||||||
|
await wrapper.get('[data-testid="modal-saved"]').trigger('click');
|
||||||
|
await flushPromises();
|
||||||
|
expect(mocks.modalOpenCreate).toHaveBeenCalledOnce();
|
||||||
|
expect(mocks.modalOpenEdit).toHaveBeenCalledWith(row);
|
||||||
|
expect(mocks.tableApi.reload).toHaveBeenCalledOnce();
|
||||||
|
expect(mocks.api.getList).toHaveBeenCalledOnce();
|
||||||
|
expect(mocks.api.getSources).toHaveBeenCalledOnce();
|
||||||
|
expect(mocks.api.detail).not.toHaveBeenCalled();
|
||||||
|
expect(mocks.api.preview).not.toHaveBeenCalled();
|
||||||
|
|
||||||
|
mocks.tableApi.reload.mockClear();
|
||||||
|
mocks.api.getList.mockClear();
|
||||||
|
await wrapper.get('[data-testid="explicit-refresh"]').trigger('click');
|
||||||
|
await flushPromises();
|
||||||
|
expect(mocks.tableApi.reload).toHaveBeenCalledOnce();
|
||||||
|
expect(mocks.api.getList).toHaveBeenCalledOnce();
|
||||||
|
expect(mocks.api.getSources).toHaveBeenCalledOnce();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders CQ-looking summaries as escaped plain text', async () => {
|
||||||
|
const wrapper = mount(MessageTemplateList);
|
||||||
|
await flushPromises();
|
||||||
|
|
||||||
|
expect(wrapper.text()).toContain('[CQ:at,qq=12345] <plain>');
|
||||||
|
expect(wrapper.html()).toContain('<plain>');
|
||||||
|
expect(wrapper.html()).not.toContain('innerHTML');
|
||||||
|
});
|
||||||
|
});
|
||||||
282
apps/web-antdv-next/src/views/qqbot/message-template/list.tsx
Normal file
282
apps/web-antdv-next/src/views/qqbot/message-template/list.tsx
Normal file
@ -0,0 +1,282 @@
|
|||||||
|
import type { TableColumnType } from 'antdv-next';
|
||||||
|
|
||||||
|
import type { MessageTemplateModalExposed } from './components/MessageTemplateModal';
|
||||||
|
|
||||||
|
import type { QqbotMessagePushApi } from '#/api/qqbot/message-push';
|
||||||
|
import type {
|
||||||
|
KtTableApi,
|
||||||
|
KtTableButton,
|
||||||
|
KtTableContext,
|
||||||
|
KtTableRowAction,
|
||||||
|
} from '#/components/ktTable';
|
||||||
|
|
||||||
|
import { defineComponent, onMounted, ref } from 'vue';
|
||||||
|
|
||||||
|
import { useAccess } from '@vben/access';
|
||||||
|
import { Page } from '@vben/common-ui';
|
||||||
|
import { Plus } from '@vben/icons';
|
||||||
|
|
||||||
|
import Tag from 'antdv-next/dist/tag/index';
|
||||||
|
|
||||||
|
import {
|
||||||
|
deleteMessageTemplate,
|
||||||
|
getMessagePushSources,
|
||||||
|
getMessageTemplateList,
|
||||||
|
setMessageTemplateEnabled,
|
||||||
|
} from '#/api/qqbot/message-push';
|
||||||
|
import { KtTable, useKtTable } from '#/components/ktTable';
|
||||||
|
|
||||||
|
import MessageTemplateModal from './components/MessageTemplateModal';
|
||||||
|
|
||||||
|
const AKtTable = KtTable as any;
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'QqBotMessageTemplateList',
|
||||||
|
/** Owns the permission-gated template list, source labels, and row mutations. */
|
||||||
|
setup() {
|
||||||
|
const { hasAccessByCodes } = useAccess();
|
||||||
|
const canList = hasAccessByCodes(['QqBot:MessageTemplate:List']);
|
||||||
|
const canPreview = hasAccessByCodes(['QqBot:MessageTemplate:Preview']);
|
||||||
|
const modalRef = ref<MessageTemplateModalExposed>();
|
||||||
|
const sources = ref<QqbotMessagePushApi.SystemMessageSourceDefinition[]>(
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
const columns: Array<
|
||||||
|
TableColumnType<QqbotMessagePushApi.MessageTemplateView>
|
||||||
|
> = [
|
||||||
|
{ dataIndex: 'name', key: 'name', title: '模板名称', width: 180 },
|
||||||
|
{ key: 'source', title: '消息源', width: 260 },
|
||||||
|
{ key: 'contentSummary', title: '内容摘要', width: 320 },
|
||||||
|
{
|
||||||
|
dataIndex: 'referenceCount',
|
||||||
|
key: 'referenceCount',
|
||||||
|
title: '引用数量',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{ dataIndex: 'enabled', key: 'enabled', title: '状态', width: 90 },
|
||||||
|
{
|
||||||
|
dataIndex: 'updateTime',
|
||||||
|
key: 'updateTime',
|
||||||
|
title: '更新时间',
|
||||||
|
width: 180,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const api: KtTableApi<QqbotMessagePushApi.MessageTemplateView> = {
|
||||||
|
/** Passes the caller's strict `{ items, total }` page through unchanged. */
|
||||||
|
list: async (params) => await getMessageTemplateList(params),
|
||||||
|
};
|
||||||
|
const buttons: Array<
|
||||||
|
KtTableButton<QqbotMessagePushApi.MessageTemplateView>
|
||||||
|
> = [
|
||||||
|
{
|
||||||
|
icon: <Plus class="kt-table__button-icon" />,
|
||||||
|
key: 'create',
|
||||||
|
label: '新建模板',
|
||||||
|
onClick: openCreate,
|
||||||
|
permissionCodes: ['QqBot:MessageTemplate:Create'],
|
||||||
|
type: 'primary',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const rowActions: Array<
|
||||||
|
KtTableRowAction<QqbotMessagePushApi.MessageTemplateView>
|
||||||
|
> = [
|
||||||
|
{
|
||||||
|
key: 'edit',
|
||||||
|
label: '编辑',
|
||||||
|
onClick: openEdit,
|
||||||
|
permissionCodes: ['QqBot:MessageTemplate:Update'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'toggle',
|
||||||
|
label: '启停',
|
||||||
|
onClick: handleToggle,
|
||||||
|
permissionCodes: ['QqBot:MessageTemplate:Toggle'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
confirm: getDeleteConfirm,
|
||||||
|
danger: true,
|
||||||
|
disabled: (row) => row.referenceCount > 0,
|
||||||
|
disabledReason: getDeleteDisabledReason,
|
||||||
|
key: 'delete',
|
||||||
|
label: '删除',
|
||||||
|
onClick: handleDelete,
|
||||||
|
permissionCodes: ['QqBot:MessageTemplate:Delete'],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const [registerTable, tableApi] =
|
||||||
|
useKtTable<QqbotMessagePushApi.MessageTemplateView>({
|
||||||
|
api,
|
||||||
|
buttons,
|
||||||
|
columns,
|
||||||
|
formOptions: {
|
||||||
|
schema: [
|
||||||
|
{
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: { allowClear: true },
|
||||||
|
fieldName: 'name',
|
||||||
|
label: '模板名称',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Select',
|
||||||
|
componentProps: () => ({
|
||||||
|
allowClear: true,
|
||||||
|
options: sources.value.map((source) => ({
|
||||||
|
label: source.displayName,
|
||||||
|
value: source.sourceKey,
|
||||||
|
})),
|
||||||
|
}),
|
||||||
|
fieldName: 'sourceKey',
|
||||||
|
label: '消息源',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Select',
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
options: [
|
||||||
|
{ label: '启用', value: true },
|
||||||
|
{ label: '停用', value: false },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
fieldName: 'enabled',
|
||||||
|
label: '启用状态',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
immediate: false,
|
||||||
|
rowActions,
|
||||||
|
rowActionVisibleCount: 3,
|
||||||
|
rowKey: 'id',
|
||||||
|
tableTitle: '消息模板',
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Opens a blank template session through the page-owned exposed ref. */
|
||||||
|
function openCreate() {
|
||||||
|
modalRef.value?.openCreate();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Opens one row without copying page-only runtime state into the modal.
|
||||||
|
* @param row - Template selected from KtTable.
|
||||||
|
*/
|
||||||
|
function openEdit(row: QqbotMessagePushApi.MessageTemplateView) {
|
||||||
|
modalRef.value?.openEdit(row);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Builds KtTable confirmation for one currently unreferenced template.
|
||||||
|
* @param row - Template awaiting delete confirmation.
|
||||||
|
* @returns Confirmation text containing the template name.
|
||||||
|
*/
|
||||||
|
function getDeleteConfirm(row: QqbotMessagePushApi.MessageTemplateView) {
|
||||||
|
return `确认删除消息模板「${row.name}」吗？`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Explains why a referenced template cannot be deleted from the current row.
|
||||||
|
* @param row - Template whose current reference count controls the action.
|
||||||
|
* @returns Count-bearing reason, or undefined when delete is enabled.
|
||||||
|
*/
|
||||||
|
function getDeleteDisabledReason(
|
||||||
|
row: QqbotMessagePushApi.MessageTemplateView,
|
||||||
|
) {
|
||||||
|
return row.referenceCount > 0
|
||||||
|
? `已有 ${row.referenceCount} 个发布绑定引用，无法删除`
|
||||||
|
: undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggles one row and reloads only its KtTable context after success.
|
||||||
|
* @param row - Template whose enabled state is inverted.
|
||||||
|
* @param context - Row-action context owning the affected list.
|
||||||
|
*/
|
||||||
|
async function handleToggle(
|
||||||
|
row: QqbotMessagePushApi.MessageTemplateView,
|
||||||
|
context: KtTableContext<QqbotMessagePushApi.MessageTemplateView>,
|
||||||
|
) {
|
||||||
|
await setMessageTemplateEnabled(row.id, !row.enabled);
|
||||||
|
await context.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Deletes one row and reloads only its KtTable context after success.
|
||||||
|
* @param row - Unreferenced template confirmed through KtTable.
|
||||||
|
* @param context - Row-action context owning the affected list.
|
||||||
|
*/
|
||||||
|
async function handleDelete(
|
||||||
|
row: QqbotMessagePushApi.MessageTemplateView,
|
||||||
|
context: KtTableContext<QqbotMessagePushApi.MessageTemplateView>,
|
||||||
|
) {
|
||||||
|
await deleteMessageTemplate(row.id);
|
||||||
|
await context.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Reloads the mutable list exactly once after one successful modal save. */
|
||||||
|
async function handleModalSaved() {
|
||||||
|
await tableApi.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Loads the page-lifetime source directory once for an authorized mount. */
|
||||||
|
async function loadSources() {
|
||||||
|
sources.value = await getMessagePushSources();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Starts the only automatic list/source load for this route mount. */
|
||||||
|
async function activatePage() {
|
||||||
|
if (!canList) return;
|
||||||
|
await Promise.all([tableApi.reload(), loadSources()]);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Renders source, literal content summary, and enabled presentation.
|
||||||
|
* @param slot - KtTable body-cell payload.
|
||||||
|
* @param slot.column - Column requesting a custom presentation.
|
||||||
|
* @param slot.record - Template row rendered by the table.
|
||||||
|
* @returns Escaped text/status content or undefined for native rendering.
|
||||||
|
*/
|
||||||
|
function renderBodyCell(slot: {
|
||||||
|
column: TableColumnType<QqbotMessagePushApi.MessageTemplateView>;
|
||||||
|
record: QqbotMessagePushApi.MessageTemplateView;
|
||||||
|
}) {
|
||||||
|
const { column, record } = slot;
|
||||||
|
if (column.key === 'source') {
|
||||||
|
return `${record.sourceName} · ${record.sourceKey}`;
|
||||||
|
}
|
||||||
|
if (column.key === 'contentSummary') {
|
||||||
|
return (
|
||||||
|
<span class="line-clamp-2 whitespace-pre-wrap break-words">
|
||||||
|
{record.content}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (column.key === 'enabled') {
|
||||||
|
return (
|
||||||
|
<Tag color={record.enabled ? 'success' : 'default'}>
|
||||||
|
{record.enabled ? '启用' : '停用'}
|
||||||
|
</Tag>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(activatePage);
|
||||||
|
|
||||||
|
return () => (
|
||||||
|
<Page autoContentHeight>
|
||||||
|
{canList ? (
|
||||||
|
<>
|
||||||
|
<AKtTable
|
||||||
|
onRegister={registerTable}
|
||||||
|
v-slots={{ bodyCell: renderBodyCell }}
|
||||||
|
/>
|
||||||
|
<MessageTemplateModal
|
||||||
|
canPreview={canPreview}
|
||||||
|
onSaved={handleModalSaved}
|
||||||
|
ref={modalRef}
|
||||||
|
sources={sources.value}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
</Page>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user