Merge pull request #1182 from colinin/vben5-text-template

Vben5 text template
2 years ago · 0935b5f8f5
22 changed files with 1419 additions and 0 deletions
--- a/apps/vben5/apps/app-antd/package.json
+++ b/apps/vben5/apps/app-antd/package.json
@ -42,6 +42,7 @@
    "@abp/saas": "workspace:*",
    "@abp/settings": "workspace:*",
    "@abp/tasks": "workspace:*",
+    "@abp/text-templating": "workspace:*",
    "@abp/ui": "workspace:*",
    "@abp/webhooks": "workspace:*",
    "@vben/access": "workspace:*",
--- a/apps/vben5/apps/app-antd/src/locales/langs/en-US/abp.json
+++ b/apps/vben5/apps/app-antd/src/locales/langs/en-US/abp.json
@ -120,5 +120,9 @@
    "definitions": "Definitions",
    "subscriptions": "Subscriptions",
    "sendAttempts": "Send Attempts"
+  },
+  "textTemplating": {
+    "title": "Text Templating",
+    "definitions": "Definitions"
  }
 }
--- a/apps/vben5/apps/app-antd/src/locales/langs/zh-CN/abp.json
+++ b/apps/vben5/apps/app-antd/src/locales/langs/zh-CN/abp.json
@ -120,5 +120,9 @@
    "definitions": "Webhook定义",
    "subscriptions": "管理订阅",
    "sendAttempts": "发送记录"
+  },
+  "textTemplating": {
+    "title": "文本模板",
+    "definitions": "模板定义"
  }
 }
--- a/apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts
+++ b/apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts
@ -496,6 +496,26 @@ const routes: RouteRecordRaw[] = [
          },
        ],
      },
+      {
+        meta: {
+          title: $t('abp.textTemplating.title'),
+          icon: 'tdesign:template',
+        },
+        name: 'TextTemplating',
+        path: '/text-templating',
+        children: [
+          {
+            meta: {
+              title: $t('abp.textTemplating.definitions'),
+              icon: 'qlementine-icons:template-16',
+            },
+            name: 'TemplateDefinitions',
+            path: '/text-templating/definitions',
+            component: () =>
+              import('#/views/text-templating/definitions/index.vue'),
+          },
+        ],
+      },
      {
        name: 'AbpDemo',
        path: '/abp/demos',
--- a/apps/vben5/apps/app-antd/src/views/text-templating/definitions/index.vue
+++ b/apps/vben5/apps/app-antd/src/views/text-templating/definitions/index.vue
@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+
+import { TemplateDefinitionTable } from '@abp/text-templating';
+
+defineOptions({
+  name: 'TemplateDefinitions',
+});
+</script>
+
+<template>
+  <Page>
+    <TemplateDefinitionTable />
+  </Page>
+</template>
--- a/apps/vben5/packages/@abp/components/src/vditor/Viewer.vue
+++ b/apps/vben5/packages/@abp/components/src/vditor/Viewer.vue
@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onDeactivated,
+  ref,
+  unref,
+  watch,
+} from 'vue';
+
+import { preferences } from '@vben/preferences';
+
+import VditorPreview from 'vditor';
+
+const props = defineProps<{
+  class?: string;
+  value: string;
+}>();
+const viewerRef = ref<HTMLDivElement>();
+const vditorPreviewRef = ref<VditorPreview>();
+
+const skinName = computed(() => {
+  return preferences.theme.mode === 'light' ? 'light' : 'dark';
+});
+
+function init() {
+  const viewerEl = unref(viewerRef) as HTMLDivElement;
+  const isDark = skinName.value === 'dark';
+  VditorPreview.preview(viewerEl, props.value, {
+    hljs: {
+      style: isDark ? 'dracula' : 'github',
+    },
+    mode: isDark ? 'dark' : 'light',
+    theme: {
+      current: isDark ? 'dark' : 'light',
+    },
+  });
+}
+
+watch(
+  () => skinName.value,
+  (val) => {
+    const isDark = val === 'dark';
+    VditorPreview.setContentTheme(isDark ? 'dark' : 'light', '');
+    VditorPreview.setCodeTheme(isDark ? 'dracula' : 'github');
+    init();
+  },
+);
+
+watch(
+  () => props.value,
+  (v, oldValue) => {
+    v !== oldValue && nextTick(init);
+  },
+  {
+    immediate: true,
+  },
+);
+
+function destroy() {
+  const vditorInstance = unref(vditorPreviewRef);
+  if (!vditorInstance) return;
+  try {
+    vditorInstance?.destroy?.();
+  } catch {}
+  vditorPreviewRef.value = undefined;
+}
+
+onBeforeUnmount(destroy);
+onDeactivated(destroy);
+</script>
+
+<template>
+  <div ref="viewerRef" id="markdownViewer" :class="$props.class"></div>
+</template>
+
+<style scoped>
+.markdown-viewer {
+  width: 100%;
+}
+</style>
--- a/apps/vben5/packages/@abp/components/src/vditor/index.ts
+++ b/apps/vben5/packages/@abp/components/src/vditor/index.ts
@ -1 +1,2 @@
 export { default as MarkdownEditor } from './Editor.vue';
+export { default as MarkdownViewer } from './Viewer.vue';
--- a/apps/vben5/packages/@abp/text-templating/package.json
+++ b/apps/vben5/packages/@abp/text-templating/package.json
@ -0,0 +1,40 @@
+{
+  "name": "@abp/text-templating",
+  "version": "9.0.4",
+  "homepage": "https://github.com/colinin/abp-next-admin",
+  "bugs": "https://github.com/colinin/abp-next-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/colinin/abp-next-admin.git",
+    "directory": "packages/@abp/text-templating"
+  },
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@abp/components": "workspace:*",
+    "@abp/core": "workspace:*",
+    "@abp/localization": "workspace:*",
+    "@abp/request": "workspace:*",
+    "@abp/saas": "workspace:*",
+    "@abp/ui": "workspace:*",
+    "@ant-design/icons-vue": "catalog:",
+    "@vben/access": "workspace:*",
+    "@vben/common-ui": "workspace:*",
+    "@vben/hooks": "workspace:*",
+    "@vben/icons": "workspace:*",
+    "@vben/layouts": "workspace:*",
+    "@vben/locales": "workspace:*",
+    "ant-design-vue": "catalog:",
+    "vue": "catalog:*",
+    "vxe-table": "catalog:"
+  }
+}
--- a/apps/vben5/packages/@abp/text-templating/src/api/index.ts
+++ b/apps/vben5/packages/@abp/text-templating/src/api/index.ts
@ -0,0 +1,2 @@
+export { useTemplateContentsApi } from './useTemplateContentsApi';
+export { useTemplateDefinitionsApi } from './useTemplateDefinitionsApi';
--- a/apps/vben5/packages/@abp/text-templating/src/api/useTemplateContentsApi.ts
+++ b/apps/vben5/packages/@abp/text-templating/src/api/useTemplateContentsApi.ts
@ -0,0 +1,69 @@
+import type {
+  TextTemplateContentDto,
+  TextTemplateContentGetInput,
+  TextTemplateContentUpdateDto,
+  TextTemplateRestoreInput,
+} from '../types/contents';
+
+import { useRequest } from '@abp/request';
+
+export function useTemplateContentsApi() {
+  const { cancel, request } = useRequest();
+  /**
+   * 获取模板内容
+   * @param input 参数
+   * @returns 模板内容数据传输对象
+   */
+  function getApi(
+    input: TextTemplateContentGetInput,
+  ): Promise<TextTemplateContentDto> {
+    let url = '/api/text-templating/templates/content';
+    url += input.culture ? `/${input.culture}/${input.name}` : `/${input.name}`;
+    return request<TextTemplateContentDto>(url, {
+      method: 'GET',
+    });
+  }
+  /**
+   * 重置模板内容为默认值
+   * @param name 模板名称
+   * @param input 参数
+   * @returns 模板定义数据传输对象列表
+   */
+  function restoreToDefaultApi(
+    name: string,
+    input: TextTemplateRestoreInput,
+  ): Promise<void> {
+    return request(
+      `/api/text-templating/templates/content/${name}/restore-to-default`,
+      {
+        data: input,
+        method: 'PUT',
+      },
+    );
+  }
+  /**
+   * 更新模板内容
+   * @param name 模板名称
+   * @param input 参数
+   * @returns 模板内容数据传输对象
+   */
+  function updateApi(
+    name: string,
+    input: TextTemplateContentUpdateDto,
+  ): Promise<TextTemplateContentDto> {
+    return request<TextTemplateContentDto>(
+      `/api/text-templating/templates/content/${name}`,
+      {
+        data: input,
+        method: 'PUT',
+      },
+    );
+  }
+
+  return {
+    cancel,
+    getApi,
+    restoreToDefaultApi,
+    updateApi,
+  };
+}
--- a/apps/vben5/packages/@abp/text-templating/src/api/useTemplateDefinitionsApi.ts
+++ b/apps/vben5/packages/@abp/text-templating/src/api/useTemplateDefinitionsApi.ts
@ -0,0 +1,95 @@
+import type { ListResultDto } from '@abp/core';
+
+import type {
+  TextTemplateDefinitionCreateDto,
+  TextTemplateDefinitionDto,
+  TextTemplateDefinitionGetListInput,
+  TextTemplateDefinitionUpdateDto,
+} from '../types/definitions';
+
+import { useRequest } from '@abp/request';
+
+export function useTemplateDefinitionsApi() {
+  const { cancel, request } = useRequest();
+
+  /**
+   * 新增模板定义
+   * @param input 参数
+   * @returns 模板定义数据传输对象
+   */
+  function createApi(
+    input: TextTemplateDefinitionCreateDto,
+  ): Promise<TextTemplateDefinitionDto> {
+    return request<TextTemplateDefinitionDto>(
+      '/api/text-templating/template/definitions',
+      {
+        data: input,
+        method: 'POST',
+      },
+    );
+  }
+  /**
+   * 删除模板定义
+   * @param name 模板名称
+   */
+  function deleteApi(name: string): Promise<void> {
+    return request(`/api/text-templating/template/definitions/${name}`, {
+      method: 'DELETE',
+    });
+  }
+  /**
+   * 获取模板定义
+   * @param name 模板名称
+   * @returns 模板定义数据传输对象
+   */
+  function getApi(name: string): Promise<TextTemplateDefinitionDto> {
+    return request<TextTemplateDefinitionDto>(
+      `/api/text-templating/template/definitions/${name}`,
+      {
+        method: 'GET',
+      },
+    );
+  }
+  /**
+   * 获取模板定义列表
+   * @param input 过滤参数
+   * @returns 模板定义数据传输对象列表
+   */
+  function getListApi(
+    input?: TextTemplateDefinitionGetListInput,
+  ): Promise<ListResultDto<TextTemplateDefinitionDto>> {
+    return request<ListResultDto<TextTemplateDefinitionDto>>(
+      `/api/text-templating/template/definitions/${name}`,
+      {
+        method: 'GET',
+        params: input,
+      },
+    );
+  }
+  /**
+   * 更新模板定义
+   * @param name 模板名称
+   * @returns 模板定义数据传输对象
+   */
+  function updateApi(
+    name: string,
+    input: TextTemplateDefinitionUpdateDto,
+  ): Promise<TextTemplateDefinitionDto> {
+    return request<TextTemplateDefinitionDto>(
+      `/api/text-templating/template/definitions/${name}`,
+      {
+        data: input,
+        method: 'PUT',
+      },
+    );
+  }
+
+  return {
+    cancel,
+    createApi,
+    deleteApi,
+    getApi,
+    getListApi,
+    updateApi,
+  };
+}
--- a/apps/vben5/packages/@abp/text-templating/src/components/definitions/TemplateContentCurtuleModal.vue
+++ b/apps/vben5/packages/@abp/text-templating/src/components/definitions/TemplateContentCurtuleModal.vue
@ -0,0 +1,216 @@
+<script setup lang="ts">
+import type { ExtendedFormApi } from '@vben/common-ui';
+
+import type { TextTemplateContentDto } from '../../types';
+import type { TextTemplateDefinitionDto } from '../../types/definitions';
+
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { useAbpStore } from '@abp/core';
+import { Modal as AntdvModal, Button, Card, message } from 'ant-design-vue';
+
+import { useTemplateContentsApi } from '../../api';
+
+defineProps<{
+  title: string;
+}>();
+const emits = defineEmits<{
+  (event: 'change', data: TextTemplateContentDto): void;
+}>();
+const abpStore = useAbpStore();
+const { getApi, restoreToDefaultApi, updateApi } = useTemplateContentsApi();
+
+const [SourceForm, sourceFormApi] = useVbenForm({
+  commonConfig: {
+    colon: true,
+    componentProps: {
+      class: 'w-full',
+    },
+    disabled: true,
+  },
+  layout: 'vertical',
+  schema: [
+    {
+      component: 'Select',
+      componentProps: {
+        fieldNames: {
+          label: 'displayName',
+          value: 'cultureName',
+        },
+        onChange: (val?: string) => onCultureChange(sourceFormApi, val),
+      },
+      fieldName: 'culture',
+      label: $t('AbpTextTemplating.BaseCultureName'),
+      rules: 'required',
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        autoSize: {
+          minRows: 20,
+        },
+        showCount: true,
+      },
+      fieldName: 'content',
+      label: $t('AbpTextTemplating.BaseContent'),
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+});
+const [TargetForm, targetFormApi] = useVbenForm({
+  commonConfig: {
+    colon: true,
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  handleSubmit: onSubmit,
+  layout: 'vertical',
+  schema: [
+    {
+      component: 'Select',
+      componentProps: {
+        fieldNames: {
+          label: 'displayName',
+          value: 'cultureName',
+        },
+        onChange: (val?: string) => onCultureChange(targetFormApi, val),
+      },
+      fieldName: 'culture',
+      label: $t('AbpTextTemplating.TargetCultureName'),
+      rules: 'required',
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        autoSize: {
+          minRows: 20,
+        },
+        showCount: true,
+      },
+      fieldName: 'content',
+      label: $t('AbpTextTemplating.TargetContent'),
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+});
+const [Modal, modalApi] = useVbenModal({
+  confirmText: $t('AbpTextTemplating.SaveContent'),
+  fullscreen: true,
+  fullscreenButton: false,
+  async onConfirm() {
+    await targetFormApi.validateAndSubmitForm();
+  },
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      await onInit();
+    }
+  },
+});
+
+async function onInit() {
+  try {
+    modalApi.setState({ loading: true });
+    const culture =
+      abpStore.application?.localization.currentCulture.cultureName;
+    const languages = abpStore.application?.localization.languages ?? [];
+    sourceFormApi.updateSchema([
+      {
+        componentProps: {
+          options: languages,
+        },
+        fieldName: 'culture',
+      },
+    ]);
+    targetFormApi.updateSchema([
+      {
+        componentProps: {
+          options: languages,
+        },
+        fieldName: 'culture',
+      },
+    ]);
+    const { name } = modalApi.getData<TextTemplateDefinitionDto>();
+    const { content } = await getApi({
+      culture,
+      name,
+    });
+    sourceFormApi.setValues({
+      content,
+      culture,
+    });
+  } finally {
+    modalApi.setState({ loading: false });
+  }
+}
+
+async function onCultureChange(formApi: ExtendedFormApi, culture?: string) {
+  const { name } = modalApi.getData<TextTemplateDefinitionDto>();
+  const { content } = await getApi({
+    culture,
+    name,
+  });
+  formApi.setValues({
+    content,
+    culture,
+  });
+}
+
+async function onSubmit(values: Record<string, string>) {
+  try {
+    modalApi.setState({ submitting: true });
+    const { name } = modalApi.getData<TextTemplateDefinitionDto>();
+    const dto = await updateApi(name, {
+      content: values.content!,
+      culture: values.culture,
+    });
+    emits('change', dto);
+    message.success($t('AbpTextTemplating.TemplateContentUpdated'));
+    modalApi.close();
+  } finally {
+    modalApi.setState({ submitting: false });
+  }
+}
+
+function onRestoreToDefault() {
+  AntdvModal.confirm({
+    centered: true,
+    content: $t('AbpTextTemplating.RestoreToDefaultMessage'),
+    onOk: async () => {
+      const { name } = modalApi.getData<TextTemplateDefinitionDto>();
+      const formValues = await sourceFormApi.getValues();
+      await restoreToDefaultApi(name, {
+        culture: formValues.culture,
+      });
+      message.success($t('AbpTextTemplating.TemplateContentRestoredToDefault'));
+      await onInit();
+    },
+    title: $t('AbpTextTemplating.RestoreToDefault'),
+  });
+}
+</script>
+
+<template>
+  <Modal :title="$t('AbpTextTemplating.EditContents')">
+    <Card :title="title">
+      <template #extra>
+        <Button danger type="primary" @click="onRestoreToDefault">
+          {{ $t('AbpTextTemplating.RestoreToDefault') }}
+        </Button>
+      </template>
+      <div class="flex flex-row gap-3">
+        <div class="w-1/2">
+          <SourceForm />
+        </div>
+        <div class="w-1/2">
+          <TargetForm />
+        </div>
+      </div>
+    </Card>
+  </Modal>
+</template>
+
+<style scoped></style>
--- a/apps/vben5/packages/@abp/text-templating/src/components/definitions/TemplateContentModal.vue
+++ b/apps/vben5/packages/@abp/text-templating/src/components/definitions/TemplateContentModal.vue
@ -0,0 +1,171 @@
+<script setup lang="ts">
+import type {
+  TextTemplateContentDto,
+  TextTemplateDefinitionDto,
+} from '../../types';
+
+import { computed, defineAsyncComponent, ref } from 'vue';
+
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { MarkdownViewer } from '@abp/components/vditor';
+import { useAbpStore } from '@abp/core';
+import {
+  Alert,
+  Modal as AntdvModal,
+  Button,
+  Card,
+  message,
+} from 'ant-design-vue';
+
+import { useTemplateContentsApi } from '../../api/useTemplateContentsApi';
+
+const emits = defineEmits<{
+  (event: 'change', data: TextTemplateContentDto): void;
+}>();
+
+const { cancel, getApi, restoreToDefaultApi, updateApi } =
+  useTemplateContentsApi();
+
+const abpStore = useAbpStore();
+const textTemplate = ref<TextTemplateDefinitionDto>();
+
+const getCardTitle = computed(() => {
+  if (!textTemplate.value) {
+    return '';
+  }
+  return `${$t('AbpTextTemplating.DisplayName:Name')} - ${textTemplate.value.name}`;
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  handleSubmit: onSubmit,
+  layout: 'vertical',
+  schema: [
+    {
+      component: 'Textarea',
+      componentProps: {
+        autoSize: {
+          minRows: 20,
+        },
+        showCount: true,
+      },
+      fieldName: 'content',
+      label: $t('AbpTextTemplating.DisplayName:Content'),
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+});
+const [Modal, modalApi] = useVbenModal({
+  confirmText: $t('AbpTextTemplating.SaveContent'),
+  fullscreen: true,
+  fullscreenButton: false,
+  onCancel() {
+    modalApi.close();
+  },
+  onClosed() {
+    cancel('TemplateDefinitionModal has closed!');
+  },
+  onConfirm: async () => {
+    await formApi.validateAndSubmitForm();
+  },
+  onOpenChange: async (isOpen: boolean) => {
+    textTemplate.value = undefined;
+    if (isOpen) {
+      const textTemplateDefine = modalApi.getData<TextTemplateDefinitionDto>();
+      textTemplate.value = textTemplateDefine;
+      await onGet();
+    }
+  },
+});
+const [TemplateContentCurtuleModal, curtuleModalApi] = useVbenModal({
+  connectedComponent: defineAsyncComponent(
+    () => import('./TemplateContentCurtuleModal.vue'),
+  ),
+});
+
+async function onGet() {
+  try {
+    modalApi.setState({ loading: true });
+    const textTemplateDefine = modalApi.getData<TextTemplateDefinitionDto>();
+    const culture = textTemplateDefine.isInlineLocalized
+      ? undefined
+      : abpStore.application?.localization.currentCulture.cultureName;
+    const dto = await getApi({ culture, name: textTemplateDefine.name });
+    formApi.setFieldValue('content', dto.content);
+  } finally {
+    modalApi.setState({ loading: false });
+  }
+}
+
+function onRestoreToDefault() {
+  AntdvModal.confirm({
+    centered: true,
+    content: $t('AbpTextTemplating.RestoreToDefaultMessage'),
+    onOk: async () => {
+      await restoreToDefaultApi(textTemplate.value!.name, {});
+      message.success($t('AbpTextTemplating.TemplateContentRestoredToDefault'));
+      await onGet();
+    },
+    title: $t('AbpTextTemplating.RestoreToDefault'),
+  });
+}
+
+function onCustomizePerCulture() {
+  curtuleModalApi.setData(textTemplate.value);
+  curtuleModalApi.open();
+}
+
+async function onSubmit(values: Record<string, string>) {
+  try {
+    modalApi.setState({ submitting: true });
+    const textTemplateDefine = modalApi.getData<TextTemplateDefinitionDto>();
+    const culture = textTemplateDefine.isInlineLocalized
+      ? undefined
+      : abpStore.application?.localization.currentCulture.cultureName;
+    const dto = await updateApi(textTemplateDefine.name, {
+      content: values.content!,
+      culture,
+    });
+    emits('change', dto);
+    message.success($t('AbpTextTemplating.TemplateContentUpdated'));
+    modalApi.close();
+  } finally {
+    modalApi.setState({ submitting: false });
+  }
+}
+</script>
+
+<template>
+  <Modal :title="$t('AbpTextTemplating.EditContents')">
+    <Alert v-if="textTemplate?.isInlineLocalized" type="warning">
+      <template #message>
+        <MarkdownViewer
+          :value="$t('AbpTextTemplating.InlineContentDescription')"
+        />
+      </template>
+    </Alert>
+    <Card :title="getCardTitle">
+      <template #extra>
+        <div class="flex flex-row gap-2">
+          <Button danger type="primary" @click="onRestoreToDefault">
+            {{ $t('AbpTextTemplating.RestoreToDefault') }}
+          </Button>
+          <Button type="dashed" @click="onCustomizePerCulture">
+            {{ $t('AbpTextTemplating.CustomizePerCulture') }}
+          </Button>
+        </div>
+      </template>
+      <Form />
+    </Card>
+    <TemplateContentCurtuleModal :title="getCardTitle" />
+  </Modal>
+</template>
+
+<style scoped></style>
--- a/apps/vben5/packages/@abp/text-templating/src/components/definitions/TemplateDefinitionModal.vue
+++ b/apps/vben5/packages/@abp/text-templating/src/components/definitions/TemplateDefinitionModal.vue
@ -0,0 +1,289 @@
+<script setup lang="ts">
+import type { ResourceDto } from '@abp/localization';
+import type { PropertyInfo } from '@abp/ui';
+import type { FormInstance } from 'ant-design-vue';
+
+import type { TextTemplateDefinitionDto } from '../../types';
+
+import { computed, ref, useTemplateRef } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import {
+  isNullOrWhiteSpace,
+  useAbpStore,
+  useLocalization,
+  useLocalizationSerializer,
+} from '@abp/core';
+import { useResourcesApi } from '@abp/localization';
+import { LocalizableInput, PropertyTable } from '@abp/ui';
+import { Checkbox, Form, Input, message, Select, Tabs } from 'ant-design-vue';
+
+import { useTemplateDefinitionsApi } from '../../api';
+
+defineOptions({
+  name: 'TemplateDefinitionModal',
+});
+const emits = defineEmits<{
+  (event: 'change', data: TextTemplateDefinitionDto): void;
+}>();
+
+const FormItem = Form.Item;
+const TabPane = Tabs.TabPane;
+
+type TabKey = 'basic' | 'properties';
+
+const activeTabKey = ref<TabKey>('basic');
+const isEditModel = ref(false);
+const form = useTemplateRef<FormInstance>('form');
+const formModel = ref<TextTemplateDefinitionDto>();
+const textTemplateLayouts = ref<TextTemplateDefinitionDto[]>([]);
+const textTemplateResources = ref<ResourceDto[]>([]);
+
+const abpStore = useAbpStore();
+
+const { Lr } = useLocalization();
+const { hasAccessByCodes } = useAccess();
+const { deserialize } = useLocalizationSerializer();
+const { getListApi: getResourcesApi } = useResourcesApi();
+const { cancel, createApi, getApi, getListApi, updateApi } =
+  useTemplateDefinitionsApi();
+
+const getLanguageOptions = computed(() => {
+  const languages = abpStore.application?.localization.languages;
+  if (!languages) {
+    return [];
+  }
+  return languages.map((language) => {
+    return {
+      label: language.displayName,
+      value: language.cultureName,
+    };
+  });
+});
+
+const [Modal, modalApi] = useVbenModal({
+  class: 'w-1/2',
+  draggable: true,
+  fullscreenButton: false,
+  onCancel() {
+    modalApi.close();
+  },
+  onClosed() {
+    cancel('TemplateDefinitionModal has closed!');
+  },
+  onConfirm: async () => {
+    await form.value?.validate();
+    const api = isEditModel.value
+      ? updateApi(formModel.value!.name, formModel.value!)
+      : createApi(formModel.value!);
+    modalApi.setState({ submitting: true });
+    api
+      .then((res) => {
+        message.success($t('AbpUi.SavedSuccessfully'));
+        emits('change', res);
+        modalApi.close();
+      })
+      .finally(() => {
+        modalApi.setState({ submitting: false });
+      });
+  },
+  onOpenChange: async (isOpen: boolean) => {
+    if (isOpen) {
+      isEditModel.value = false;
+      activeTabKey.value = 'basic';
+      formModel.value = undefined;
+      await Promise.all([onGet(), onInitLayouts(), onInitResources()]);
+    }
+  },
+  title: $t('AbpTextTemplating.TextTemplates:AddNew'),
+});
+
+async function onGet() {
+  const { name } = modalApi.getData<TextTemplateDefinitionDto>();
+  if (isNullOrWhiteSpace(name)) {
+    modalApi.setState({ title: $t('AbpTextTemplating.TextTemplates:AddNew') });
+    formModel.value = {
+      displayName: '',
+      extraProperties: {},
+      isInlineLocalized: false,
+      isLayout: false,
+      isStatic: false,
+      name: '',
+    };
+    return;
+  }
+  try {
+    modalApi.setState({ loading: true });
+    formModel.value = await getApi(name);
+    modalApi.setState({
+      title: `${$t('AbpTextTemplating.TextTemplates')} - ${name}`,
+    });
+  } finally {
+    modalApi.setState({ loading: false });
+  }
+}
+
+async function onInitLayouts() {
+  const { items } = await getListApi({
+    isLayout: true,
+  });
+  textTemplateLayouts.value = items.map((item) => {
+    const localizableString = deserialize(item.displayName);
+    return {
+      ...item,
+      displayName: Lr(localizableString.resourceName, localizableString.name),
+    };
+  });
+}
+
+async function onInitResources() {
+  // TODO: 是否暴露localization、模块常量
+  if (!hasAccessByCodes(['LocalizationManagement.Resource'])) {
+    return;
+  }
+  const { items } = await getResourcesApi();
+  textTemplateResources.value = items;
+}
+
+function onIsInlineLocalizedChange(isInlineLocalized: boolean) {
+  if (isInlineLocalized) {
+    formModel.value!.localizationResourceName = undefined;
+  }
+}
+
+function onIsLayoutChange(isLayout: boolean) {
+  if (isLayout) {
+    formModel.value!.layout = undefined;
+  }
+}
+
+function onPropChange(prop: PropertyInfo) {
+  formModel.value!.extraProperties ??= {};
+  formModel.value!.extraProperties[prop.key] = prop.value;
+}
+
+function onPropDelete(prop: PropertyInfo) {
+  formModel.value!.extraProperties ??= {};
+  delete formModel.value!.extraProperties[prop.key];
+}
+</script>
+
+<template>
+  <Modal>
+    <Form
+      v-if="formModel"
+      ref="form"
+      :label-col="{ span: 6 }"
+      :model="formModel"
+      :wrapper-col="{ span: 18 }"
+    >
+      <Tabs v-model:active-key="activeTabKey">
+        <TabPane key="basic" :tab="$t('AbpTextTemplating.BasicInfo')">
+          <FormItem
+            name="name"
+            required
+            :label="$t('AbpTextTemplating.DisplayName:Name')"
+          >
+            <Input
+              allow-clear
+              autocomplete="off"
+              :disabled="!isEditModel || formModel.isStatic"
+              v-model:value="formModel.name"
+            />
+          </FormItem>
+          <FormItem
+            :label="$t('WebhooksManagement.DisplayName:DisplayName')"
+            name="displayName"
+            required
+          >
+            <LocalizableInput
+              v-model:value="formModel.displayName"
+              :disabled="formModel.isStatic"
+            />
+          </FormItem>
+          <FormItem
+            name="isInlineLocalized"
+            :label="$t('AbpTextTemplating.DisplayName:IsInlineLocalized')"
+          >
+            <Checkbox
+              :disabled="formModel.isStatic"
+              v-model:checked="formModel.isInlineLocalized"
+              @change="(e) => onIsInlineLocalizedChange(e.target.checked)"
+            >
+              {{ $t('AbpTextTemplating.DisplayName:IsInlineLocalized') }}
+            </Checkbox>
+          </FormItem>
+          <FormItem
+            v-if="!formModel.isInlineLocalized"
+            name="defaultCultureName"
+            :label="$t('AbpTextTemplating.DisplayName:DefaultCultureName')"
+          >
+            <Select
+              allow-clear
+              :disabled="formModel.isStatic"
+              v-model:value="formModel.defaultCultureName"
+              :options="getLanguageOptions"
+            />
+          </FormItem>
+          <FormItem
+            v-if="formModel.isInlineLocalized"
+            name="localizationResourceName"
+            :label="$t('AbpTextTemplating.LocalizationResource')"
+          >
+            <Select
+              allow-clear
+              :disabled="formModel.isStatic"
+              v-model:value="formModel.localizationResourceName"
+              :options="textTemplateResources"
+              :field-names="{
+                label: 'displayName',
+                value: 'name',
+              }"
+            />
+          </FormItem>
+          <FormItem
+            name="isLayout"
+            :label="$t('AbpTextTemplating.DisplayName:IsLayout')"
+          >
+            <Checkbox
+              :disabled="formModel.isStatic"
+              v-model:checked="formModel.isLayout"
+              @change="(e) => onIsLayoutChange(e.target.checked)"
+            >
+              {{ $t('AbpTextTemplating.DisplayName:IsLayout') }}
+            </Checkbox>
+          </FormItem>
+          <FormItem
+            v-if="!formModel.isLayout"
+            name="layout"
+            :label="$t('AbpTextTemplating.DisplayName:Layout')"
+          >
+            <Select
+              allow-clear
+              :disabled="formModel.isStatic"
+              v-model:value="formModel.layout"
+              :options="textTemplateLayouts"
+              :field-names="{
+                label: 'displayName',
+                value: 'name',
+              }"
+            />
+          </FormItem>
+        </TabPane>
+        <TabPane key="properties" :tab="$t('AbpTextTemplating.Properties')">
+          <PropertyTable
+            :data="formModel.extraProperties"
+            :disabled="formModel.isStatic"
+            @change="onPropChange"
+            @delete="onPropDelete"
+          />
+        </TabPane>
+      </Tabs>
+    </Form>
+  </Modal>
+</template>
+
+<style scoped></style>
--- a/apps/vben5/packages/@abp/text-templating/src/components/definitions/TemplateDefinitionTable.vue
+++ b/apps/vben5/packages/@abp/text-templating/src/components/definitions/TemplateDefinitionTable.vue
@ -0,0 +1,315 @@
+<script setup lang="ts">
+import type { VxeGridListeners, VxeGridProps } from '@abp/ui';
+import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { TextTemplateDefinitionDto } from '../../types/definitions';
+
+import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { useLocalization, useLocalizationSerializer } from '@abp/core';
+import { useVbenVxeGrid } from '@abp/ui';
+import {
+  CheckOutlined,
+  CloseOutlined,
+  DeleteOutlined,
+  EditOutlined,
+  EllipsisOutlined,
+  PlusOutlined,
+} from '@ant-design/icons-vue';
+import { Button, Dropdown, Menu, message, Modal } from 'ant-design-vue';
+
+import { useTemplateDefinitionsApi } from '../../api/useTemplateDefinitionsApi';
+import { WebhookDefinitionsPermissions } from '../../constants/permissions';
+
+defineOptions({
+  name: 'TemplateDefinitionTable',
+});
+
+const MenuItem = Menu.Item;
+
+const textTemplates = ref<TextTemplateDefinitionDto[]>([]);
+const pageState = reactive({
+  current: 1,
+  size: 10,
+  total: 0,
+});
+
+const { Lr } = useLocalization();
+const { hasAccessByCodes } = useAccess();
+const { deserialize } = useLocalizationSerializer();
+const { deleteApi, getListApi } = useTemplateDefinitionsApi();
+
+const formOptions: VbenFormProps = {
+  collapsed: false,
+  handleReset: onReset,
+  async handleSubmit(params) {
+    pageState.current = 1;
+    await onGet(params);
+  },
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'filter',
+      formItemClass: 'col-span-2 items-baseline',
+      label: $t('AbpUi.Search'),
+    },
+    {
+      component: 'Checkbox',
+      fieldName: 'isLayout',
+      label: $t('AbpTextTemplating.DisplayName:IsLayout'),
+    },
+  ],
+  showCollapseButton: true,
+  submitOnEnter: true,
+};
+
+const gridOptions: VxeGridProps<TextTemplateDefinitionDto> = {
+  columns: [
+    {
+      align: 'left',
+      field: 'name',
+      minWidth: 150,
+      title: $t('AbpTextTemplating.DisplayName:Name'),
+    },
+    {
+      align: 'left',
+      field: 'displayName',
+      minWidth: 150,
+      title: $t('AbpTextTemplating.DisplayName:DisplayName'),
+    },
+    {
+      align: 'center',
+      field: 'isStatic',
+      minWidth: 150,
+      slots: { default: 'isStatic' },
+      title: $t('AbpTextTemplating.DisplayName:IsStatic'),
+    },
+    {
+      align: 'center',
+      field: 'isInlineLocalized',
+      minWidth: 150,
+      slots: { default: 'isInlineLocalized' },
+      title: $t('AbpTextTemplating.DisplayName:IsInlineLocalized'),
+    },
+    {
+      align: 'center',
+      field: 'isLayout',
+      minWidth: 150,
+      slots: { default: 'isLayout' },
+      title: $t('AbpTextTemplating.DisplayName:IsLayout'),
+    },
+    {
+      align: 'left',
+      field: 'layout',
+      minWidth: 150,
+      title: $t('AbpTextTemplating.DisplayName:Layout'),
+    },
+    {
+      align: 'left',
+      field: 'defaultCultureName',
+      minWidth: 150,
+      title: $t('AbpTextTemplating.DisplayName:DefaultCultureName'),
+    },
+    {
+      align: 'left',
+      field: 'localizationResourceName',
+      minWidth: 150,
+      title: $t('AbpTextTemplating.LocalizationResource'),
+    },
+    {
+      field: 'action',
+      fixed: 'right',
+      slots: { default: 'action' },
+      title: $t('AbpUi.Actions'),
+      width: 220,
+    },
+  ],
+  exportConfig: {},
+  keepSource: true,
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: false,
+    zoom: true,
+  },
+};
+
+const gridEvents: VxeGridListeners<TextTemplateDefinitionDto> = {
+  pageChange(params) {
+    pageState.current = params.currentPage;
+    pageState.size = params.pageSize;
+    onPageChange();
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridEvents,
+  gridOptions,
+});
+
+const [TemplateDefinitionModal, modalApi] = useVbenModal({
+  connectedComponent: defineAsyncComponent(
+    () => import('./TemplateDefinitionModal.vue'),
+  ),
+});
+const [TemplateContentModal, contentModalApi] = useVbenModal({
+  connectedComponent: defineAsyncComponent(
+    () => import('./TemplateContentModal.vue'),
+  ),
+});
+
+async function onGet(input?: Record<string, string>) {
+  try {
+    gridApi.setLoading(true);
+    const { items } = await getListApi(input);
+    pageState.total = items.length;
+    textTemplates.value = items.map((item) => {
+      const localizableString = deserialize(item.displayName);
+      return {
+        ...item,
+        displayName: Lr(localizableString.resourceName, localizableString.name),
+      };
+    });
+    onPageChange();
+  } finally {
+    gridApi.setLoading(false);
+  }
+}
+
+async function onReset() {
+  await gridApi.formApi.resetForm();
+  const input = await gridApi.formApi.getValues();
+  await onGet(input);
+}
+
+function onPageChange() {
+  const items = textTemplates.value.slice(
+    (pageState.current - 1) * pageState.size,
+    pageState.current * pageState.size,
+  );
+  gridApi.setGridOptions({
+    data: items,
+    pagerConfig: {
+      currentPage: pageState.current,
+      pageSize: pageState.size,
+      total: pageState.total,
+    },
+  });
+}
+
+function onCreate() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+function onUpdate(row: TextTemplateDefinitionDto) {
+  modalApi.setData(row);
+  modalApi.open();
+}
+
+function onMenuClick(row: TextTemplateDefinitionDto, info: MenuInfo) {
+  switch (info.key) {
+    case 'contents': {
+      contentModalApi.setData(row);
+      contentModalApi.open();
+      break;
+    }
+  }
+}
+
+function onDelete(row: TextTemplateDefinitionDto) {
+  Modal.confirm({
+    centered: true,
+    content: `${$t('AbpUi.ItemWillBeDeletedMessageWithFormat', [row.name])}`,
+    onOk: async () => {
+      await deleteApi(row.name);
+      message.success($t('AbpUi.DeletedSuccessfully'));
+      onGet();
+    },
+    title: $t('AbpUi.AreYouSure'),
+  });
+}
+
+onMounted(onGet);
+</script>
+
+<template>
+  <Grid :table-title="$t('AbpTextTemplating.TextTemplates')">
+    <template #toolbar-tools>
+      <Button
+        :icon="h(PlusOutlined)"
+        type="primary"
+        v-access:code="[WebhookDefinitionsPermissions.Create]"
+        @click="onCreate"
+      >
+        {{ $t('AbpTextTemplating.TextTemplates:AddNew') }}
+      </Button>
+    </template>
+    <template #isStatic="{ row }">
+      <div class="flex flex-row justify-center">
+        <CheckOutlined v-if="row.isStatic" class="text-green-500" />
+        <CloseOutlined v-else class="text-red-500" />
+      </div>
+    </template>
+    <template #isInlineLocalized="{ row }">
+      <div class="flex flex-row justify-center">
+        <CheckOutlined v-if="row.isInlineLocalized" class="text-green-500" />
+        <CloseOutlined v-else class="text-red-500" />
+      </div>
+    </template>
+    <template #isLayout="{ row }">
+      <div class="flex flex-row justify-center">
+        <CheckOutlined v-if="row.isLayout" class="text-green-500" />
+        <CloseOutlined v-else class="text-red-500" />
+      </div>
+    </template>
+    <template #action="{ row }">
+      <div class="flex flex-row">
+        <Button
+          :icon="h(EditOutlined)"
+          block
+          type="link"
+          v-access:code="[WebhookDefinitionsPermissions.Update]"
+          @click="onUpdate(row)"
+        >
+          {{ $t('AbpUi.Edit') }}
+        </Button>
+        <Button
+          v-if="
+            !row.isStatic &&
+            hasAccessByCodes([WebhookDefinitionsPermissions.Delete])
+          "
+          :icon="h(DeleteOutlined)"
+          block
+          danger
+          type="link"
+          v-access:code="[WebhookDefinitionsPermissions.Delete]"
+          @click="onDelete(row)"
+        >
+          {{ $t('AbpUi.Delete') }}
+        </Button>
+        <Dropdown>
+          <template #overlay>
+            <Menu @click="(info) => onMenuClick(row, info)">
+              <MenuItem key="contents" :icon="h(EditOutlined)">
+                {{ $t('AbpTextTemplating.EditContents') }}
+              </MenuItem>
+            </Menu>
+          </template>
+          <Button :icon="h(EllipsisOutlined)" type="link" />
+        </Dropdown>
+      </div>
+    </template>
+  </Grid>
+  <TemplateDefinitionModal @change="() => onGet()" />
+  <TemplateContentModal />
+</template>
+
+<style scoped></style>
--- a/apps/vben5/packages/@abp/text-templating/src/components/index.ts
+++ b/apps/vben5/packages/@abp/text-templating/src/components/index.ts
@ -0,0 +1 @@
+export { default as TemplateDefinitionTable } from './definitions/TemplateDefinitionTable.vue';
--- a/apps/vben5/packages/@abp/text-templating/src/constants/permissions.ts
+++ b/apps/vben5/packages/@abp/text-templating/src/constants/permissions.ts
@ -0,0 +1,10 @@
+/** 模板定义权限 */
+export const WebhookDefinitionsPermissions = {
+  /** 新增 */
+  Create: 'AbpTextTemplating.TextTemplateDefinitions.Create',
+  Default: 'AbpTextTemplating.TextTemplateDefinitions',
+  /** 删除 */
+  Delete: 'AbpTextTemplating.TextTemplateDefinitions.Delete',
+  /** 更新 */
+  Update: 'AbpTextTemplating.TextTemplateDefinitions.Update',
+};
--- a/apps/vben5/packages/@abp/text-templating/src/index.ts
+++ b/apps/vben5/packages/@abp/text-templating/src/index.ts
@ -0,0 +1,3 @@
+export * from './api';
+export * from './components';
+export * from './types';
--- a/apps/vben5/packages/@abp/text-templating/src/types/contents.ts
+++ b/apps/vben5/packages/@abp/text-templating/src/types/contents.ts
@ -0,0 +1,26 @@
+interface TextTemplateContentDto {
+  content?: string;
+  culture?: string;
+  name: string;
+}
+
+interface TextTemplateContentGetInput {
+  culture?: string;
+  name: string;
+}
+
+interface TextTemplateRestoreInput {
+  culture?: string;
+}
+
+interface TextTemplateContentUpdateDto {
+  content: string;
+  culture?: string;
+}
+
+export type {
+  TextTemplateContentDto,
+  TextTemplateContentGetInput,
+  TextTemplateContentUpdateDto,
+  TextTemplateRestoreInput,
+};
--- a/apps/vben5/packages/@abp/text-templating/src/types/definitions.ts
+++ b/apps/vben5/packages/@abp/text-templating/src/types/definitions.ts
@ -0,0 +1,47 @@
+import type { ExtensibleObject, IHasConcurrencyStamp } from '@abp/core';
+
+interface TextTemplateDefinitionDto
+  extends ExtensibleObject,
+    IHasConcurrencyStamp {
+  defaultCultureName?: string;
+  displayName: string;
+  isInlineLocalized: boolean;
+  isLayout: boolean;
+  isStatic: boolean;
+  layout?: string;
+  localizationResourceName?: string;
+  name: string;
+  renderEngine?: string;
+}
+
+interface TextTemplateDefinitionCreateOrUpdateDto {
+  defaultCultureName?: string;
+  displayName: string;
+  isInlineLocalized: boolean;
+  isLayout: boolean;
+  layout?: string;
+  localizationResourceName?: string;
+  renderEngine?: string;
+}
+
+interface TextTemplateDefinitionCreateDto
+  extends TextTemplateDefinitionCreateOrUpdateDto {
+  name: string;
+}
+
+interface TextTemplateDefinitionUpdateDto
+  extends IHasConcurrencyStamp,
+    TextTemplateDefinitionCreateOrUpdateDto {}
+
+interface TextTemplateDefinitionGetListInput {
+  filter?: string;
+  isLayout?: boolean;
+  isStatic?: boolean;
+}
+
+export type {
+  TextTemplateDefinitionCreateDto,
+  TextTemplateDefinitionDto,
+  TextTemplateDefinitionGetListInput,
+  TextTemplateDefinitionUpdateDto,
+};
--- a/apps/vben5/packages/@abp/text-templating/src/types/index.ts
+++ b/apps/vben5/packages/@abp/text-templating/src/types/index.ts
@ -0,0 +1,2 @@
+export * from './contents';
+export * from './definitions';
--- a/apps/vben5/packages/@abp/text-templating/tsconfig.json
+++ b/apps/vben5/packages/@abp/text-templating/tsconfig.json
@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
			`@ -0,0 +1 @@`
			`export { default as TemplateDefinitionTable } from './definitions/TemplateDefinitionTable.vue';`