ace-front-end 1.0.0

package/ace-app-manager-ui/src/views/appManage/i18nDefine/Editor.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import {
+    type AppMessage,
+    createAxiosWithoutCache,
+    LocaleType, type UpdateAppMessageCommand,
+    useAppMessageApi, useLoading
+} from "@jari-ace/app-bolts";
+import {JaButton, JaForm, useBackendValidations} from "@jari-ace/element-plus-component";
+import {ref} from "vue";
+
+const visible = defineModel<boolean>({
+    default: false
+})
+const axios = createAxiosWithoutCache()
+const loading = useLoading(axios)
+const api = useAppMessageApi(axios);
+const validator = useBackendValidations(Object.keys(newForm()), axios);
+const props = defineProps<{
+    message?: AppMessage
+}>();
+const state = ref<{
+    formData: UpdateAppMessageCommand
+}>({
+    formData: newForm()
+});
+const emits = defineEmits(['success']);
+const form = ref<InstanceType<typeof JaForm>>();
+
+function newForm() {
+    return {
+        id: '0',
+        key: "",
+        dataVersion: 0,
+        locale: LocaleType.ZH_CN,
+        message: '',
+        releaseSource: ""
+    };
+}
+
+function onOpen() {
+    state.value.formData = props.message!;
+}
+
+function submit() {
+    form.value?.validate(() => api.update(state.value.formData).then(() => {
+        emits("success");
+        visible.value = false;
+    }))
+}
+
+</script>
+
+<template>
+    <el-drawer append-to-body v-model="visible" title="编辑国际化文本"
+               @open="onOpen">
+        <ja-form :validator="validator" :model="state" ref="form">
+            <ja-form-item prop="key" label="文本键" required>
+                <ja-input disabled></ja-input>
+            </ja-form-item>
+            <ja-form-item prop="locale" label="语言">
+                <ja-input disabled></ja-input>
+            </ja-form-item>
+            <ja-form-item prop="message" label="文本内容">
+                <ja-input type="textarea" v-focus :rows="4"></ja-input>
+            </ja-form-item>
+        </ja-form>
+        <template #footer>
+            <ja-button type="primary" @click="submit" shortcut="Alt+Enter" :loading="loading"
+                       :disabled="loading">确定
+            </ja-button>
+            <el-button plain @click="visible=false">取消</el-button>
+        </template>
+    </el-drawer>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/ace-app-manager-ui/src/views/appManage/i18nDefine/I18nDefine.vue

@@ -0,0 +1,173 @@
+<template>
+    <app-manage-layout :body-scrollbar="false">
+        <template #title>
+            国际化文本
+            <el-tooltip>
+                <template #content>
+                    支持应用内文本国际化
+                </template>
+                <el-icon>
+                    <question-filled></question-filled>
+                </el-icon>
+            </el-tooltip>
+            <div
+                style="flex:1; display: flex; flex-direction: row-reverse; gap: 8px;
+                     width: 100%">
+                <ja-button :icon="Refresh" plain @click="loadData"
+                           :loading="loading"
+                           tooltip="重新加载数据" shortcut="Alt+R"> 刷新
+                </ja-button>
+                <ja-button type="success" :icon="Plus" :loading="loading"
+                           @click="createNewBundle" tooltip="创建国际化文本" shortcut="Alt+N">新建
+                </ja-button>
+                <el-input :suffix-icon="Search" v-model="queryKey" style="width:280px"
+                          placeholder="请输入文本键名查询"
+                          @input="debounceLoadData"></el-input>
+            </div>
+        </template>
+        <template #body>
+            <div style="height:100%; display: flex; flex-direction: column;">
+                <div style="flex: auto;">
+                    <vxe-table
+                        :loading="loading"
+                        size="small"
+                        stripe
+                        ref="tableRef"
+                        height="100%"
+                        :column-config="{resizable: true}"
+                        :row-config="{ isHover: true, height:40 }"
+                        :data="messages"
+                        class="vxe-table--scrollbar">
+                        <!-- <vxe-column type="seq" width="60"></vxe-column> -->
+                        <vxe-column field="key" title="文本键" show-overflow width="250px"
+                                    show-header-overflow>
+                        </vxe-column>
+                        <vxe-column field="locale" title="语言" show-overflow
+                                    show-header-overflow>
+                        </vxe-column>
+                        <vxe-column field="message" title="语言" show-overflow
+                                    show-header-overflow>
+                        </vxe-column>
+                        <vxe-column title="操作" fixed="right" width="280px" show-overflow
+                                    show-header-overflow>
+                            <template #default="{ row }">
+                                <!-- row.disabled -->
+                                <el-button link type="warning" :icon="Edit"
+                                           @click="onEditClick(row)">编辑
+                                </el-button>
+                                <el-button link type="danger" :icon="Delete"
+                                           @click="onDeleteClick(row)">删除
+                                </el-button>
+                            </template>
+                        </vxe-column>
+                        <template #empty>
+                            <el-empty/>
+                        </template>
+                    </vxe-table>
+                </div>
+                <div style="flex:none; display: flex; flex-direction: row-reverse; padding: 12px">
+                    <el-pagination
+                        background
+                        :page-sizes="pageSizes"
+                        layout="total, sizes, prev, pager, next"
+                        v-model:page-size="pageSize"
+                        v-model:current-page="page"
+                        @current-change="loadData"
+                        @size-change="loadData"
+                        :total="total"/>
+                </div>
+            </div>
+        </template>
+    </app-manage-layout>
+    <bundle-editor :app-id="props.appId" v-model="bundleEditorVisible"
+                   @success="loadData"></bundle-editor>
+    <editor :message="editingMessage" v-model="editorVisible" @success="loadData"></editor>
+</template>
+
+<script setup lang="ts">
+import {
+    Delete, Edit,
+    Link,
+    PieChart,
+    Plus,
+    QuestionFilled,
+    Refresh,
+    Search
+} from "@element-plus/icons-vue";
+import {ElIcon, ElInput, ElMessageBox} from "element-plus";
+import {JaButton, useAppInstances} from "@jari-ace/element-plus-component";
+import AppManageLayout from "@/views/appManage/components/AppManageLayout.vue";
+import {type AppInstance, type AppMessage, useAppMessageApi, useLoading} from "@jari-ace/app-bolts";
+import {onUnmounted, ref, watch} from "vue";
+import {debounce} from "lodash-es";
+import {EditOutlined} from "@ant-design/icons-vue";
+import {pageSizes} from "@/hooks/usePageSize";
+import {VxeColumn, VxeTable} from "vxe-table";
+import BundleEditor from "@/views/appManage/i18nDefine/BundleEditor.vue";
+import Editor from "@/views/appManage/i18nDefine/Editor.vue";
+
+const props = defineProps<{
+    appId: string,
+    menuType: string
+}>();
+const api = useAppMessageApi();
+const loading = useLoading();
+const queryKey = ref("");
+const page = ref(1);
+const total = ref(0);
+const pageSize = ref(50);
+const messages = ref<AppMessage[]>([])
+const debounceLoadData = debounce(loadData, 500);
+const bundleEditorVisible = ref<boolean>(false);
+const editorVisible = ref(false);
+const editingMessage = ref<AppMessage>();
+const {getById: getAppById} = useAppInstances()
+const app = ref<AppInstance>()
+
+async function loadData() {
+    if (!props.appId) {
+        messages.value = []
+        total.value = 0
+        return;
+    }
+    if (queryKey.value && queryKey.value.length > 0) {
+
+        app.value = await getAppById(props.appId);
+        messages.value = await api.getByKey(app.value.name, queryKey.value);
+        total.value = messages.value.length;
+        if (page.value !== 1) page.value = 1;
+    } else {
+        const res = await api.getByApp(props.appId, page.value - 1, pageSize.value);
+        messages.value = res.content;
+        total.value = res.totalElements;
+    }
+}
+
+function createNewBundle() {
+    bundleEditorVisible.value = true;
+}
+
+function onEditClick(m: AppMessage) {
+    editingMessage.value = m;
+    editorVisible.value = true;
+}
+
+async function onDeleteClick(m: AppMessage) {
+    await ElMessageBox.confirm("确定删除此国际化文本？", "确认删除");
+    await api.delete([m]);
+    loadData();
+}
+
+watch(() => props.appId, loadData);
+loadData();
+
+onUnmounted(() => {
+    debounceLoadData.cancel()
+})
+</script>
+
+<style scoped>
+:deep(.vxe-table--border-line) {
+    border: 0 none !important;
+}
+</style>

package/ace-app-manager-ui/src/views/appManage/messageTemplate/Editor.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import {
+    type AppInstance,
+    createAxiosWithoutCache,
+    type CreateMessageTemplateCommand,
+    type ProjectedMessageTemplate,
+    type ProjectedMessenger, type UpdateMessageTemplateCommand, useLoading, useMessageTemplateApi,
+    useMessengerApi
+} from "@jari-ace/app-bolts";
+import {
+    JaButton,
+    JaForm,
+    useAppInstances,
+    useBackendValidations
+} from "@jari-ace/element-plus-component";
+import { JaChannelPicker } from "@jari-ace/element-plus-component";
+
+const props = defineProps<{
+    appName: string,
+    mode: 'create' | 'update',
+    template?: ProjectedMessageTemplate
+}>();
+const visible = defineModel<boolean>({
+    default: false
+})
+const axios = createAxiosWithoutCache();
+const api = useMessageTemplateApi(axios);
+const loading = useLoading(axios)
+const validator = useBackendValidations(Object.keys(newMessageTemplate()), axios);
+const form = ref<InstanceType<typeof JaForm>>();
+const emit = defineEmits(["success"]);
+const state = ref<{
+    formData: CreateMessageTemplateCommand | UpdateMessageTemplateCommand
+}>({
+    formData: newMessageTemplate()
+});
+const messengerApi = useMessengerApi(axios);
+const messengers = ref<ProjectedMessenger[]>([]);
+const tags = ref<string[]>();
+let app: AppInstance;
+const appInstances = useAppInstances();
+
+function newMessageTemplate() {
+    return {
+        /**
+         * 所属应用名
+         */
+        appName: props.appName,
+        /**
+         * 模板名，用于引用此模板
+         */
+        name: "",
+        /**
+         * 消息体模板
+         */
+        bodyTemplate: '',
+        /**
+         * 严重级别
+         */
+        severity: "INFO",
+        /**
+         * 占位符类型
+         */
+        placeHolderType: 'NAMED',
+        /**
+         * 消息标签
+         */
+        tags: [],
+        /**
+         * 推送通道ID
+         */
+        channel: undefined,
+        /**
+         * 是否启用错峰发送
+         */
+        enableOffPeakSending: false,
+        /**
+         * 错峰发送时，是否立即发送第一个消息包
+         */
+        sendFirstImmediately: false,
+        /**
+         * 错峰发送时的分批的每批数量
+         */
+        batchSize: 500,
+        /**
+         * 错峰分批发送时间间隔，单位（秒）
+         */
+        interval: 300
+    } as CreateMessageTemplateCommand;
+}
+
+async function onOpen() {
+    messengers.value = await messengerApi.getAll();
+    if (props.mode === 'create') {
+        state.value.formData = newMessageTemplate();
+    } else {
+        const r = await api.getById(props.template!.id);
+        state.value.formData = r as UpdateMessageTemplateCommand;
+    }
+    await loadTags();
+}
+
+async function loadTags() {
+    tags.value = await api.getTags();
+}
+
+function submit() {
+    if (props.mode === 'create') {
+        form.value?.validate(() => api.create(state.value.formData as CreateMessageTemplateCommand)
+            .then(() => {
+                visible.value = false;
+                emit('success');
+            }))
+    } else {
+        form.value?.validate(() => api.update(state.value.formData as UpdateMessageTemplateCommand)
+            .then(() => {
+                visible.value = false;
+                emit('success');
+            }))
+    }
+}
+
+watch(() => props.appName, async () => {
+    if (props.appName) {
+        app = await appInstances.getByName(props.appName)
+    }
+}, {
+    immediate: true
+})
+</script>
+
+<template>
+    <el-drawer append-to-body v-model="visible" @open="onOpen" destroy-on-close
+        :title="props.mode === 'create' ? '创建消息模板' : '修改消息模板'">
+        <ja-form :model="state" :validator="validator" ref="form">
+            <ja-form-item label="模板名称" prop="name" required>
+                <ja-input v-focus :disabled="props.mode === 'update'"></ja-input>
+            </ja-form-item>
+            <ja-form-item label="严重级别" prop="severity">
+                <ja-select>
+                    <el-option label="信息" value="INFO"></el-option>
+                    <el-option label="警告" value="WARN"></el-option>
+                    <el-option label="错误" value="错误"></el-option>
+                </ja-select>
+            </ja-form-item>
+            <ja-form-item label="占位符类型" prop="placeHolderType" required label-remark="
+1. 命名占位符，使用 `${}`作为占位符，例如模板：`Hello, ${userName}, please join meeting ${meetingNo}`，占位符包裹的文本为`Map`对象键名。<br/>
+2. 序号占位符，使用`{}`作为占位符，例如模板：`Hello, {0}，please join meeting {1}`，占位符包裹的数字为数组索引值。">
+                <ja-select>
+                    <el-option label="命名" value="NAMED"></el-option>
+                    <el-option label="编号" value="ORDERED"></el-option>
+                </ja-select>
+            </ja-form-item>
+            <ja-form-item label="模板内容" prop="bodyTemplate" required>
+                <ja-input-i18n-raw :app-id="app.id" size="small" textarea
+                    v-model="state.formData.bodyTemplate"></ja-input-i18n-raw>
+            </ja-form-item>
+            <ja-form-item label="业务标签" prop="tags">
+                <ja-select filterable allow-create multiple reserve-keyword="false">
+                    <el-option v-for="t in tags" :key="t" :label="t" :value="t"></el-option>
+                </ja-select>
+            </ja-form-item>
+            <ja-form-item label="发送通道" prop="channel">
+                <ja-channel-picker :app-name="props.appName" clearable></ja-channel-picker>
+            </ja-form-item>
+            <ja-form-item label="启用错峰发送" prop="enableOffPeakSending" label-remark="延时分批发送大批量消息，以平缓用户集中点击消息引起的请求峰值">
+                <ja-switch></ja-switch>
+            </ja-form-item>
+            <template v-if="state.formData.enableOffPeakSending">
+                <ja-form-item label="错峰发送间隔(秒)" prop="interval">
+                    <ja-input-number></ja-input-number>
+                </ja-form-item>
+                <ja-form-item label="每批次发送消息量" prop="batchSize">
+                    <ja-input-number></ja-input-number>
+                </ja-form-item>
+                <ja-form-item label="是否立即发送首批消息" prop="sendFirstImmediately">
+                    <ja-switch></ja-switch>
+                </ja-form-item>
+            </template>
+
+        </ja-form>
+        <template #footer>
+            <ja-button type="primary" @click="submit" shortcut="Alt+Enter" :loading="loading" :disabled="loading">确定
+            </ja-button>
+            <el-button plain @click="visible = false">取消</el-button>
+        </template>
+    </el-drawer>
+</template>
+
+<style scoped lang="scss"></style>

package/ace-app-manager-ui/src/views/appManage/messageTemplate/MessageTemplate.vue

@@ -0,0 +1,142 @@
+<template>
+    <app-manage-layout :body-scrollbar="false">
+        <template #title>
+            注册消息模板
+            <el-tooltip>
+                <template #content>
+                    消息模板定义了待发送的消息内容，模板中预留了插值位置，运行时将通过替换插值变量生成最终消息内容。
+                </template>
+                <el-icon>
+                    <question-filled></question-filled>
+                </el-icon>
+            </el-tooltip>
+            <div style="flex:1; display: flex; flex-direction: row-reverse; gap: 8px;
+                     width: 100%">
+                <ja-button type="info" :icon="Refresh" plain @click="loadData" :loading="loading" tooltip="重新加载数据"
+                    shortcut="Alt+R">
+                    刷新
+                </ja-button>
+                <ja-button type="success" :icon="Plus" :loading="loading" @click="onCreateNewClick" tooltip="新建通道"
+                    shortcut="Alt+N">新建
+                </ja-button>
+            </div>
+        </template>
+        <template #body>
+            <div style="height:100%; display: flex; flex-direction: column;">
+                <div style="flex: auto;">
+                    <vxe-table :loading="loading" size="small" stripe ref="tableRef" height="100%"
+                        :column-config="{ resizable: true }" :row-config="{ isHover: true, height: 40 }"
+                        :data="templates" class="vxe-table--scrollbar">
+                        <!-- <vxe-column type="seq" width="60"></vxe-column> -->
+                        <vxe-column field="name" title="模板名称" show-overflow width="250px" show-header-overflow>
+                        </vxe-column>
+                        <vxe-column field="severity" title="严重级别" show-overflow show-header-overflow>
+                            <template #default="{ row }">
+                                <el-tag v-if="row.severity === 'INFO'" type="primary">信息</el-tag>
+                                <el-tag v-if="row.severity === 'WARN'" type="warning">警告</el-tag>
+                                <el-tag v-if="row.severity === 'ERROR'" type="danger">错误</el-tag>
+                            </template>
+                        </vxe-column>
+                        <vxe-column field="placeHolderType" title="占位符类型" show-overflow show-header-overflow>
+                            <template #default="{ row }">
+                                <el-tag v-if="row.placeHolderType === 'NAMED'" type="primary">命名
+                                </el-tag>
+                                <el-tag v-if="row.placeHolderType === 'ORDERED'" type="success">序号
+                                </el-tag>
+                            </template>
+                        </vxe-column>
+                        <vxe-column title="操作" fixed="right" width="280px" show-overflow show-header-overflow>
+                            <template #default="{ row }">
+                                <!-- row.disabled -->
+                                <el-button link type="warning" :icon="Edit" @click="onEditClick(row)">编辑
+                                </el-button>
+                                <el-button link type="danger" :icon="Delete" @click="onDeleteClick(row)">删除
+                                </el-button>
+                            </template>
+                        </vxe-column>
+                        <template #empty>
+                            <el-empty />
+                        </template>
+                    </vxe-table>
+                </div>
+                <div style="flex:none; display: flex; flex-direction: row-reverse; padding: 12px">
+                    <el-pagination background :page-sizes="pageSizes" layout="total, sizes, prev, pager, next"
+                        v-model:page-size="pageSize" v-model:current-page="page" @current-change="loadData"
+                        @size-change="loadData" :total="total" />
+                </div>
+            </div>
+        </template>
+    </app-manage-layout>
+    <editor :app-name="appName" v-model="editorVisible" :mode="editMode" :template="editingTemplate"
+        @success="loadData">
+    </editor>
+</template>
+
+<script setup lang="ts">
+import {
+    Delete, Edit, Link, PieChart,
+    Plus,
+    QuestionFilled,
+    Refresh,
+} from "@element-plus/icons-vue";
+import AppManageLayout from "@/views/appManage/components/AppManageLayout.vue";
+import { JaButton, useAppInstances } from "@jari-ace/element-plus-component";
+import { ElIcon, ElMessageBox } from "element-plus";
+import { ref, watch } from "vue";
+import {
+    type ProjectedMessageTemplate,
+    useLoading,
+    useMessageTemplateApi
+} from "@jari-ace/app-bolts";
+import { VxeColumn, VxeTable } from "vxe-table";
+import { pageSizes } from "@/hooks/usePageSize";
+import Editor from "./Editor.vue";
+
+const props = defineProps<{
+    appId: string
+}>();
+const loading = useLoading();
+const api = useMessageTemplateApi();
+const templates = ref<ProjectedMessageTemplate[]>();
+const apps = useAppInstances();
+const appName = ref<string>("");
+const page = ref(1);
+const pageSize = ref(50);
+const total = ref(0);
+const editingTemplate = ref<ProjectedMessageTemplate>();
+const editorVisible = ref(false);
+const editMode = ref<'create' | 'update'>('create');
+
+async function loadData() {
+    appName.value = (
+        await apps.getById(props.appId)
+    ).name;
+    const res = await api.getByApp(appName.value, page.value - 1, pageSize.value);
+    templates.value = res.content;
+    total.value = res.totalElements;
+}
+
+function onEditClick(row: ProjectedMessageTemplate) {
+    editingTemplate.value = row;
+    editMode.value = 'update';
+    editorVisible.value = true;
+}
+
+function onCreateNewClick() {
+    editingTemplate.value = undefined;
+    editMode.value = 'create';
+    editorVisible.value = true;
+}
+
+async function onDeleteClick(row: ProjectedMessageTemplate) {
+    await ElMessageBox.confirm('确定要删除指定的通道吗？', '确认删除');
+    await api.delete(row);
+    loadData();
+}
+
+watch(() => props.appId, loadData);
+
+loadData();
+</script>
+
+<style scoped></style>