feat(vben5): add @abp/localization package

apps/vben5/apps/app-antd/package.json

@@ -31,6 +31,7 @@
     "@abp/core": "workspace:*",
     "@abp/features": "workspace:*",
     "@abp/identity": "workspace:*",
+    "@abp/localization": "workspace:*",
     "@abp/notifications": "workspace:*",
     "@abp/openiddict": "workspace:*",
     "@abp/permissions": "workspace:*",

apps/vben5/apps/app-antd/src/locales/langs/en-US/abp.json

@@ -45,6 +45,10 @@
       "myNotifilers": "My Notifilers",
       "groups": "Groups",
       "definitions": "Definitions"
+    },
+    "localization": {
+      "title": "Localization",
+      "resources": "Resources"
     }
   },
   "openiddict": {

apps/vben5/apps/app-antd/src/locales/langs/zh-CN/abp.json

@@ -45,6 +45,10 @@
       "myNotifilers": "我的通知",
       "groups": "通知分组",
       "definitions": "通知定义"
+    },
+    "localization": {
+      "title": "本地化管理",
+      "resources": "资源管理"
     }
   },
   "openiddict": {

apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts

@@ -175,6 +175,26 @@ const routes: RouteRecordRaw[] = [
               },
             ],
           },
+          {
+            meta: {
+              title: $t('abp.manage.localization.title'),
+              icon: 'ion:globe-outline',
+            },
+            name: 'LocalizationManagement',
+            path: '/manage/localization',
+            children: [
+              {
+                meta: {
+                  title: $t('abp.manage.localization.resources'),
+                  icon: 'grommet-icons:resources',
+                },
+                name: 'LocalizationResources',
+                path: '/manage/localization/resources',
+                component: () =>
+                  import('#/views/localization/resources/index.vue'),
+              },
+            ],
+          },
           {
             meta: {
               title: $t('abp.manage.identity.auditLogs'),

apps/vben5/apps/app-antd/src/views/localization/resources/index.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+
+import { LocalizationResourceTable } from '@abp/localization';
+
+defineOptions({
+  name: 'LocalizationResources',
+});
+</script>
+
+<template>
+  <Page>
+    <LocalizationResourceTable />
+  </Page>
+</template>

apps/vben5/packages/@abp/localization/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@abp/localization",
+  "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/localization"
+  },
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@abp/components": "workspace:*",
+    "@abp/core": "workspace:*",
+    "@abp/request": "workspace:*",
+    "@abp/signalr": "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:",
+    "dayjs": "catalog:",
+    "vue": "catalog:*",
+    "vxe-table": "catalog:"
+  }
+}

apps/vben5/packages/@abp/localization/src/api/index.ts

@@ -0,0 +1,2 @@
+export { useLocalizationsApi } from './useLocalizationsApi';
+export { useResourcesApi } from './useResourcesApi';

apps/vben5/packages/@abp/localization/src/api/useLocalizationsApi.ts

@@ -0,0 +1,28 @@
+import type { ApplicationLocalizationDto } from '@abp/core';
+
+import { useRequest } from '@abp/request';
+
+export function useLocalizationsApi() {
+  const { cancel, request } = useRequest();
+  /**
+   * 获取应用程序语言
+   * @returns 本地化配置
+   */
+  function getLocalizationApi(options: {
+    cultureName: string;
+    onlyDynamics?: boolean;
+  }): Promise<ApplicationLocalizationDto> {
+    return request<ApplicationLocalizationDto>(
+      '/api/abp/application-localization',
+      {
+        method: 'GET',
+        params: options,
+      },
+    );
+  }
+
+  return {
+    cancel,
+    getLocalizationApi,
+  };
+}

apps/vben5/packages/@abp/localization/src/api/useResourcesApi.ts

@@ -0,0 +1,89 @@
+import type { ListResultDto } from '@abp/core';
+
+import type {
+  ResourceCreateDto,
+  ResourceDto,
+  ResourceGetListInput,
+  ResourceUpdateDto,
+} from '../types/resources';
+
+import { useRequest } from '@abp/request';
+
+export function useResourcesApi() {
+  const { cancel, request } = useRequest();
+
+  /**
+   * 查询资源列表
+   * @param input 参数
+   * @returns 资源列表
+   */
+  function getListApi(
+    input?: ResourceGetListInput,
+  ): Promise<ListResultDto<ResourceDto>> {
+    return request<ListResultDto<ResourceDto>>(
+      '/api/abp/localization/resources',
+      {
+        method: 'GET',
+        params: input,
+      },
+    );
+  }
+
+  /**
+   * 查询资源
+   * @param name 资源名称
+   * @returns 查询的资源
+   */
+  function getApi(name: string): Promise<ResourceDto> {
+    return request<ResourceDto>(`/api/localization/resources/${name}`, {
+      method: 'GET',
+    });
+  }
+
+  /**
+   * 删除资源
+   * @param name 资源名称
+   */
+  function deleteApi(name: string): Promise<void> {
+    return request(`/api/localization/resources/${name}`, {
+      method: 'DELETE',
+    });
+  }
+
+  /**
+   * 创建资源
+   * @param input 参数
+   * @returns 创建的资源
+   */
+  function createApi(input: ResourceCreateDto): Promise<ResourceDto> {
+    return request<ResourceDto>(`/api/localization/resources`, {
+      data: input,
+      method: 'POST',
+    });
+  }
+
+  /**
+   * 编辑资源
+   * @param name 资源名称
+   * @param input 参数
+   * @returns 编辑的资源
+   */
+  function updateApi(
+    name: string,
+    input: ResourceUpdateDto,
+  ): Promise<ResourceDto> {
+    return request<ResourceDto>(`/api/localization/resources/${name}`, {
+      data: input,
+      method: 'PUT',
+    });
+  }
+
+  return {
+    cancel,
+    createApi,
+    deleteApi,
+    getApi,
+    getListApi,
+    updateApi,
+  };
+}

apps/vben5/packages/@abp/localization/src/components/index.ts

@@ -0,0 +1 @@
+export { default as LocalizationResourceTable } from './resources/LocalizationResourceTable.vue';

apps/vben5/packages/@abp/localization/src/components/resources/LocalizationResourceModal.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import type { FormInstance } from 'ant-design-vue';
+
+import type { ResourceDto } from '../../types/resources';
+
+import { defineEmits, defineOptions, ref, toValue, useTemplateRef } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { Checkbox, Form, Input, message } from 'ant-design-vue';
+
+import { useResourcesApi } from '../../api/useResourcesApi';
+
+defineOptions({
+  name: 'LocalizationResourceModal',
+});
+const emits = defineEmits<{
+  (event: 'change', data: ResourceDto): void;
+}>();
+
+const FormItem = Form.Item;
+
+const defaultModel = {
+  displayName: '',
+  enable: true,
+  name: '',
+} as ResourceDto;
+
+const form = useTemplateRef<FormInstance>('form');
+const formModel = ref<ResourceDto>({ ...defaultModel });
+
+const { cancel, createApi, getApi, updateApi } = useResourcesApi();
+const [Modal, modalApi] = useVbenModal({
+  class: 'w-1/2',
+  draggable: true,
+  fullscreenButton: false,
+  onCancel() {
+    modalApi.close();
+  },
+  onClosed() {
+    cancel('LocalizationResourceModal has closed!');
+  },
+  onConfirm: onSubmit,
+  onOpenChange: async (isOpen: boolean) => {
+    if (isOpen) {
+      formModel.value = { ...defaultModel };
+      modalApi.setState({
+        title: $t('LocalizationManagement.Resource:AddNew'),
+      });
+      const { name } = modalApi.getData<ResourceDto>();
+      name && (await onGet(name));
+    }
+  },
+  title: $t('LocalizationManagement.Resource:AddNew'),
+});
+async function onGet(name: string) {
+  try {
+    modalApi.setState({ loading: true });
+    const dto = await getApi(name);
+    formModel.value = dto;
+    modalApi.setState({
+      title: `${$t('AbpLocalization.Resources')} - ${dto.name}`,
+    });
+  } finally {
+    modalApi.setState({ loading: false });
+  }
+}
+async function onSubmit() {
+  await form.value?.validate();
+  try {
+    modalApi.setState({ submitting: true });
+    const input = toValue(formModel);
+    const api = input.id ? updateApi(input.name, input) : createApi(input);
+    const dto = await api;
+    message.success($t('AbpUi.SavedSuccessfully'));
+    emits('change', dto);
+    modalApi.close();
+  } finally {
+    modalApi.setState({ submitting: false });
+  }
+}
+</script>
+
+<template>
+  <Modal>
+    <Form
+      ref="form"
+      :label-col="{ span: 6 }"
+      :model="formModel"
+      :wrapper-col="{ span: 18 }"
+    >
+      <FormItem
+        :label="$t('LocalizationManagement.DisplayName:Enable')"
+        name="enable"
+      >
+        <Checkbox v-model:checked="formModel.enable">
+          {{ $t('LocalizationManagement.DisplayName:Enable') }}
+        </Checkbox>
+      </FormItem>
+      <FormItem
+        :label="$t('AbpLocalization.DisplayName:ResourceName')"
+        name="name"
+        required
+      >
+        <Input v-model:value="formModel.name" autocomplete="off" />
+      </FormItem>
+      <FormItem
+        :label="$t('AbpLocalization.DisplayName:DisplayName')"
+        name="displayName"
+        required
+      >
+        <Input v-model:value="formModel.displayName" autocomplete="off" />
+      </FormItem>
+      <FormItem
+        :label="$t('AbpLocalization.DisplayName:Description')"
+        name="description"
+      >
+        <Input v-model:value="formModel.description" autocomplete="off" />
+      </FormItem>
+    </Form>
+  </Modal>
+</template>
+
+<style scoped></style>

apps/vben5/packages/@abp/localization/src/components/resources/LocalizationResourceTable.vue

@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import type { VbenFormProps, VxeGridListeners, VxeGridProps } from '@abp/ui';
+
+import type { ResourceDto } from '../../types/resources';
+
+import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import {
+  useAbpStore,
+  useLocalization,
+  useLocalizationSerializer,
+} from '@abp/core';
+import { useVbenVxeGrid } from '@abp/ui';
+import {
+  DeleteOutlined,
+  EditOutlined,
+  PlusOutlined,
+} from '@ant-design/icons-vue';
+import { Button, message, Modal } from 'ant-design-vue';
+
+import { useLocalizationsApi } from '../../api/useLocalizationsApi';
+import { useResourcesApi } from '../../api/useResourcesApi';
+import { ResourcesPermissions } from '../../constants/permissions';
+
+defineOptions({
+  name: 'LocalizationResourceTable',
+});
+
+const permissionGroups = ref<ResourceDto[]>([]);
+const pageState = reactive({
+  current: 1,
+  size: 10,
+  total: 0,
+});
+
+const abpStore = useAbpStore();
+const { Lr } = useLocalization();
+const { deserialize } = useLocalizationSerializer();
+const { deleteApi, getListApi } = useResourcesApi();
+const { getLocalizationApi } = useLocalizationsApi();
+
+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'),
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: true,
+};
+
+const gridOptions: VxeGridProps<ResourceDto> = {
+  columns: [
+    {
+      align: 'left',
+      field: 'name',
+      minWidth: 150,
+      title: $t('AbpFeatureManagement.DisplayName:Name'),
+    },
+    {
+      align: 'left',
+      field: 'displayName',
+      minWidth: 150,
+      title: $t('AbpFeatureManagement.DisplayName:DisplayName'),
+    },
+    {
+      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<ResourceDto> = {
+  pageChange(params) {
+    pageState.current = params.currentPage;
+    pageState.size = params.pageSize;
+    onPageChange();
+  },
+};
+
+const [LocalizationResourceModal, modalApi] = useVbenModal({
+  connectedComponent: defineAsyncComponent(
+    () => import('./LocalizationResourceModal.vue'),
+  ),
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridEvents,
+  gridOptions,
+});
+
+async function onGet(input?: Record<string, string>) {
+  try {
+    gridApi.setLoading(true);
+    const { items } = await getListApi(input);
+    pageState.total = items.length;
+    permissionGroups.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 = permissionGroups.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: ResourceDto) {
+  modalApi.setData(row);
+  modalApi.open();
+}
+
+function onDelete(row: ResourceDto) {
+  Modal.confirm({
+    centered: true,
+    content: `${$t('AbpUi.ItemWillBeDeletedMessageWithFormat', [row.name])}`,
+    onOk: async () => {
+      await deleteApi(row.name);
+      message.success($t('AbpUi.DeletedSuccessfully'));
+      onChange();
+    },
+    title: $t('AbpUi.AreYouSure'),
+  });
+}
+
+async function onChange() {
+  gridApi.query();
+  // 资源变化刷新本地多语言缓存
+  const cultureName = abpStore.localization!.currentCulture.cultureName;
+  const localization = await getLocalizationApi({
+    cultureName,
+  });
+  abpStore.setLocalization(localization);
+}
+
+onMounted(onGet);
+</script>
+
+<template>
+  <Grid :table-title="$t('AbpLocalization.Resources')">
+    <template #toolbar-tools>
+      <Button
+        :icon="h(PlusOutlined)"
+        type="primary"
+        v-access:code="[ResourcesPermissions.Create]"
+        @click="onCreate"
+      >
+        {{ $t('LocalizationManagement.Resource:AddNew') }}
+      </Button>
+    </template>
+    <template #action="{ row }">
+      <div class="flex flex-row">
+        <Button
+          :icon="h(EditOutlined)"
+          block
+          type="link"
+          v-access:code="[ResourcesPermissions.Update]"
+          @click="onUpdate(row)"
+        >
+          {{ $t('AbpUi.Edit') }}
+        </Button>
+        <Button
+          v-if="!row.isStatic"
+          :icon="h(DeleteOutlined)"
+          block
+          danger
+          type="link"
+          v-access:code="[ResourcesPermissions.Delete]"
+          @click="onDelete(row)"
+        >
+          {{ $t('AbpUi.Delete') }}
+        </Button>
+      </div>
+    </template>
+  </Grid>
+  <LocalizationResourceModal @change="onChange" />
+</template>
+
+<style scoped></style>

apps/vben5/packages/@abp/localization/src/constants/index.ts

@@ -0,0 +1 @@
+export * from './permissions';

apps/vben5/packages/@abp/localization/src/constants/permissions.ts

@@ -0,0 +1,10 @@
+/** 资源管理权限 */
+export const ResourcesPermissions = {
+  /** 新增 */
+  Create: 'LocalizationManagement.Resource.Create',
+  Default: 'LocalizationManagement.Resource',
+  /** 删除 */
+  Delete: 'LocalizationManagement.Resource.Delete',
+  /** 更新 */
+  Update: 'LocalizationManagement.Resource.Update',
+};

apps/vben5/packages/@abp/localization/src/index.ts

@@ -0,0 +1,3 @@
+export * from './api';
+export * from './components';
+export * from './types';

apps/vben5/packages/@abp/localization/src/types/index.ts

@@ -0,0 +1 @@
+export * from './resources';

apps/vben5/packages/@abp/localization/src/types/resources.ts

@@ -0,0 +1,33 @@
+import type { AuditedEntityDto } from '@abp/core';
+
+interface ResourceDto extends AuditedEntityDto<string> {
+  defaultCultureName?: string;
+  description?: string;
+  displayName: string;
+  enable: boolean;
+  name: string;
+}
+
+interface ResourceCreateOrUpdateDto {
+  defaultCultureName?: string;
+  description?: string;
+  displayName: string;
+  enable: boolean;
+}
+
+interface ResourceCreateDto extends ResourceCreateOrUpdateDto {
+  name: string;
+}
+
+type ResourceUpdateDto = ResourceCreateOrUpdateDto;
+
+interface ResourceGetListInput {
+  filter?: string;
+}
+
+export type {
+  ResourceCreateDto,
+  ResourceDto,
+  ResourceGetListInput,
+  ResourceUpdateDto,
+};

apps/vben5/packages/@abp/localization/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}