fix: fixed api reference path error.

apps/vue/src/components/FlowDesign/src/components/OrgPicker.vue

@@ -129,9 +129,9 @@
   } from '@ant-design/icons-vue';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { isNullOrWhiteSpace } from '/@/utils/strings';
-  import { findByUserName } from '/@/api/identity/userLookup';
+  import { findByUserName } from '/@/api/identity/users-lookup';
-  import { getList as getUsers } from '/@/api/identity/user';
+  import { getList as getUsers } from '/@/api/identity/users';
-  import { getList as getRoles } from '/@/api/identity/role';
+  import { getList as getRoles } from '/@/api/identity/roles';
   import { getList as getOrganizationUnits } from '/@/api/identity/organization-units';
   import Ellipsis from './Ellipsis.vue';
 

apps/vue/src/components/Form/src/componentMap.ts

@@ -20,6 +20,7 @@ import {
   Rate,
   Divider,
 } from 'ant-design-vue';
+import { ColorPicker } from 'vue3-colorpicker';
 
 import ApiRadioGroup from './components/ApiRadioGroup.vue';
 import RadioButtonGroup from './components/RadioButtonGroup.vue';
@@ -80,6 +81,8 @@ componentMap.set('WeekPicker', DatePicker.WeekPicker);
 componentMap.set('TimePicker', TimePicker);
 componentMap.set('Divider', Divider);
 
+componentMap.set('ColorPicker', ColorPicker);
+
 componentMap.set('ExtraPropertyDictionary', ExtraPropertyDictionary);
 componentMap.set('LocalizableInput', LocalizableInput);
 

apps/vue/src/components/Form/src/types/index.ts

@@ -117,4 +117,5 @@ export type ComponentType =
   | 'ApiTransfer'
   | 'CodeEditorX'
   | 'ExtraPropertyDictionary'
-  | 'LocalizableInput';
+  | 'LocalizableInput'
+  | 'ColorPicker';

apps/vue/src/hooks/abp/useDefineSettings.ts

@@ -5,7 +5,10 @@ import { useSettings as useAbpSettings, ISettingProvider } from '/@/hooks/abp/us
 
 type SettingValue = NameValue<string>;
 
-export function useDefineSettings(settingKey: string, api: (...args) => Promise<ListResultDto<SettingGroup>>) {
+export function useDefineSettings(
+  settingKey: string, 
+  api: (...args) => Promise<ListResultDto<SettingGroup>>,
+  onReady?: () => void) {
   const settingStore = useSettingManagementStoreWithOut();
   const { settingProvider: abpSettingProvider } = useAbpSettings();
   const getSettings = computed(() => {
@@ -14,7 +17,7 @@ export function useDefineSettings(settingKey: string, api: (...args) => Promise<
   });
 
   onMounted(() => {
-    settingStore.initlize(settingKey, api);
+    settingStore.initlize(settingKey, api, onReady);
   });
 
   function get(name: string): SettingValue | undefined {

apps/vue/src/hooks/web/useSignalR.ts

@@ -69,8 +69,12 @@ export function useSignalR(options: UseSignalR & SignalROptions) {
       return Promise.reject('unable to start, connection not initialized!');
     }
     emitter.emit('signalR:beforeStart');
-    await connection.start();
+    try {
-    emitter.emit('signalR:onStart');
+      await connection.start();
+      emitter.emit('signalR:onStart');
+    } catch(error) {
+      emitter.emit('signalR:onError', error);
+    }
   }
 
   async function stop(): Promise<void> {
@@ -78,8 +82,12 @@ export function useSignalR(options: UseSignalR & SignalROptions) {
       return Promise.reject('unable to stop, connection not initialized!');
     }
     emitter.emit('signalR:beforeStop');
-    await connection.stop();
+    try {
-    emitter.emit('signalR:onStop');
+      await connection.stop();
+      emitter.emit('signalR:onStop');
+    } catch(error) {
+      emitter.emit('signalR:onError', error);
+    }
   }
 
   function beforeStart<T = any>(callback: (event?: T) => void) {
@@ -98,6 +106,10 @@ export function useSignalR(options: UseSignalR & SignalROptions) {
     emitter.on('signalR:onStop', callback);
   }
 
+  function onError(callback: (error?: Error) => void) {
+    emitter.on('signalR:onError', callback);
+  }
+
   function on(methodName: string, newMethod: (...args: any[]) => void): void {
     connection?.on(methodName, newMethod);
   }
@@ -106,7 +118,7 @@ export function useSignalR(options: UseSignalR & SignalROptions) {
     connection?.off(methodName, method);
   }
 
-  function onclose(callback: (error?: Error) => void): void {
+  function onClose(callback: (error?: Error) => void): void {
     connection?.onclose(callback);
   }
 
@@ -128,7 +140,8 @@ export function useSignalR(options: UseSignalR & SignalROptions) {
     on,
     off,
     init,
-    onclose,
+    onError,
+    onClose,
     beforeStart,
     onStart,
     beforeStop,

apps/vue/src/store/modules/settings.ts

@@ -24,14 +24,16 @@ export const useSettingManagementStore = defineStore({
     },
   },
   actions: {
-    initlize(settingKey: string, api: (...args) => Promise<ListResultDto<SettingGroup>>) {
+    initlize(settingKey: string, api: (...args) => Promise<ListResultDto<SettingGroup>>, onReady?: () => void) {
       this.settingKey = settingKey;
       this.settings = ls.get(this.settingKey);
       if (!this.settings || this.settings.length === 0) {
-        this.refreshSettings(api);
+        this.refreshSettings(api, onReady);
+      } else {
+        onReady?.call(null);
       }
     },
-    refreshSettings(api: (...args) => Promise<ListResultDto<SettingGroup>>) {
+    refreshSettings(api: (...args) => Promise<ListResultDto<SettingGroup>>, onReady?: () => void) {
       api().then((res) => {
         const settings: SettingValue[] = [];
         res.items.forEach((group) => {
@@ -46,6 +48,7 @@ export const useSettingManagementStore = defineStore({
         });
         this.settings = settings;
         ls.set(this.settingKey, settings);
+        onReady?.call(null);
       });
     },
   },

apps/vue/src/views/auditing/components/EntityChangesDrawer.vue

@@ -0,0 +1,168 @@
+<template>
+    <BasicDrawer
+      v-bind="$attrs"
+      @register="registerDrawer"
+      width="50%"
+      :title="L('EntitiesChanged')"
+      :showFooter="false"
+    >
+      <Skeleton :loading="state.entityChangeLoading">
+        <Empty v-if="state.entityChanges.length === 0" />
+        <Timeline v-else mode="left">
+          <TimelineItem v-for="(entityChange) in state.entityChanges" :color="changeTypeColorMap[entityChange.entityChange.changeType]">
+            <Alert :type="changeTypeTypeMap[entityChange.entityChange.changeType]" :message="entityChange.entityChange.changeTime" />
+            <div class="entity-change-wrap">
+              <Card :title="L('Operation')">
+                <template #extra>
+                  <slot name="toolbar" :entityChange="entityChange"></slot>
+                </template>
+                <Descriptions bordered :labelStyle="{ width: 150 }">
+                  <DescriptionsItem :label="L('UserName')" :span="3">{{ entityChange.userName }}</DescriptionsItem>
+                  <DescriptionsItem :label="L('ChangeTime')" :span="3">{{ entityChange.entityChange.changeTime }}</DescriptionsItem>
+                  <DescriptionsItem :label="L('ChangeType')" :span="3">
+                    <Tag :color="changeTypeColorMap[entityChange.entityChange.changeType]">
+                      {{ changeTypeMessageMap[entityChange.entityChange.changeType] }}
+                    </Tag>
+                  </DescriptionsItem>
+                  <DescriptionsItem :label="L('EntityId')" :span="3">{{ entityChange.entityChange.entityId }}</DescriptionsItem>
+                  <DescriptionsItem :label="L('EntityTypeFullName')" :span="3">{{ entityChange.entityChange.entityTypeFullName }}</DescriptionsItem>
+                </Descriptions>
+              </Card>
+              <Card
+                v-if="entityChange.entityChange.propertyChanges && entityChange.entityChange.propertyChanges.length > 0"
+                :title="L('PropertyChanges')"
+              >
+                <BasicTable
+                  row-key="id"
+                  :columns="propertiesColumns"
+                  :data-source="entityChange.entityChange.propertyChanges"
+                  :pagination="false"
+                  :striped="false"
+                  :use-search-form="false"
+                  :show-table-stting="false"
+                  :bordered="true"
+                  :show-index-column="false"
+                  :can-resize="false"
+                  :immediate="false"
+                >
+                  <template #bodyCell="{ column, record }">
+                    <template v-if="column.key === 'propertyName'">
+                      <span>{{ `${L('DisplayName:' + record.propertyName)}` }}</span>
+                      <span>{{ `(${record.propertyName})` }}</span>
+                    </template>
+                  </template>
+                </BasicTable>
+              </Card>
+            </div>
+          </TimelineItem>
+        </Timeline>
+      </Skeleton>
+    </BasicDrawer>
+  </template>
+  
+  <script lang="ts" setup>
+    import { reactive } from 'vue';
+    import {
+      Alert,
+      Card,
+      Descriptions,
+      DescriptionsItem,
+      Empty,
+      Skeleton,
+      Tag,
+      Timeline,
+      TimelineItem
+    } from 'ant-design-vue';
+    import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+    import { BasicTable, BasicColumn } from '/@/components/Table';
+    import { useLocalization } from '/@/hooks/abp/useLocalization';
+    import { ChangeType, EntityChangeWithUsernameDto } from '/@/api/auditing/entity-changes/model';
+    import { GetWithUsernameAsyncByInput } from '/@/api/auditing/entity-changes';
+  
+    const props = defineProps({
+      entityTypeFullName: {
+        type: String,
+        required: true,
+      },
+      entityId: {
+        type: [String, Number],
+      },
+    });
+    const { L } = useLocalization(['AbpAuditLogging']);
+    const [registerDrawer] = useDrawerInner(refreshChanges);
+    const state = reactive({
+      entityChangeLoading: false,
+      entityChanges: [] as EntityChangeWithUsernameDto[],
+    });
+    const changeTypeColorMap: {[key: number]: string} = {
+      [ChangeType.Created]: '#87d068',
+      [ChangeType.Updated]: '#108ee9',
+      [ChangeType.Deleted]: 'red',
+    };
+    const changeTypeTypeMap: {[key: number]: 'success' | 'info' | 'error'} = {
+      [ChangeType.Created]: 'success',
+      [ChangeType.Updated]: 'info',
+      [ChangeType.Deleted]: 'error',
+    };
+    const changeTypeMessageMap: {[key: number]: string} = {
+      [ChangeType.Created]: L('Created'),
+      [ChangeType.Updated]: L('Updated'),
+      [ChangeType.Deleted]: L('Deleted'),
+    };
+    const propertiesColumns: BasicColumn[] = [
+      {
+        title: L('PropertyName'),
+        dataIndex: 'propertyName',
+        align: 'left',
+        width: 280,
+        sorter: true,
+      },
+      {
+        title: L('NewValue'),
+        dataIndex: 'newValue',
+        align: 'left',
+        width: 200,
+        sorter: true,
+      },
+      {
+        title: L('OriginalValue'),
+        dataIndex: 'originalValue',
+        align: 'left',
+        width: 200,
+        sorter: true,
+      },
+      {
+        title: L('PropertyTypeFullName'),
+        dataIndex: 'propertyTypeFullName',
+        align: 'left',
+        width: 300,
+        sorter: true,
+      },
+    ];
+  
+    function refreshChanges() {
+      if (!props.entityId) {
+        return;
+      }
+      state.entityChangeLoading = true;
+      GetWithUsernameAsyncByInput({
+        entityId: String(props.entityId),
+        entityTypeFullName: props.entityTypeFullName,
+      }).then((res) => {
+        state.entityChanges = res.items;
+      }).finally(() => {
+        state.entityChangeLoading = false;
+      });
+    }
+  
+    defineExpose({
+      refreshChanges,
+    });
+  </script>
+  
+  <style lang="less" scoped>
+    .entity-change-wrap {
+      background: #ececec;
+      padding: 10px
+    }
+  </style>