diff --git a/src/utils/service_instance.ts b/src/utils/service_instance.ts
index 0e695b6a65..6c8bb5a7d4 100644
--- a/src/utils/service_instance.ts
+++ b/src/utils/service_instance.ts
@@ -29,4 +29,9 @@ export function getServiceName(serviceInstanceKey: string): string {
return serviceInstanceKey.split('@')[0]
}
+
+export function getDisplayInstanceName(instanceName: string, serviceNameSupplier: () => string): string {
+ return instanceName || serviceNameSupplier()
+}
+
export const INSTANCE_NAME_CONFIG_KEY = 'instanceName'
\ No newline at end of file
diff --git a/src/window/Config/pages/Service/Translate/ServiceItem/index.jsx b/src/window/Config/pages/Service/Translate/ServiceItem/index.jsx
index 725d193007..7a4568b659 100644
--- a/src/window/Config/pages/Service/Translate/ServiceItem/index.jsx
+++ b/src/window/Config/pages/Service/Translate/ServiceItem/index.jsx
@@ -7,7 +7,7 @@ import React from 'react';
import * as builtinServices from '../../../../../../services/translate';
import { useConfig } from '../../../../../../hooks';
-import { INSTANCE_NAME_CONFIG_KEY, ServiceSourceType, getServiceName, getServiceSouceType } from '../../../../../../utils/service_instance';
+import { INSTANCE_NAME_CONFIG_KEY, ServiceSourceType, getDisplayInstanceName, getServiceName, getServiceSouceType } from '../../../../../../utils/service_instance';
export default function ServiceItem(props) {
const { serviceInstanceKey, pluginList, deleteServiceInstance, setCurrentConfigKey, onConfigOpen, ...drag } = props;
@@ -39,7 +39,7 @@ export default function ServiceItem(props) {
draggable={false}
/>
-
{serviceInstanceConfig[INSTANCE_NAME_CONFIG_KEY] || t(`services.translate.${serviceName}.title`)}
+ {getDisplayInstanceName(serviceInstanceConfig[INSTANCE_NAME_CONFIG_KEY], () => t(`services.translate.${serviceName}.title`))}
>
)}
{serviceSourceType === ServiceSourceType.PLUGIN && (
@@ -50,7 +50,7 @@ export default function ServiceItem(props) {
draggable={false}
/>
- {`${serviceInstanceConfig[INSTANCE_NAME_CONFIG_KEY] || pluginList[serviceName].display} [${t('common.plugin')}]`}
+ {getDisplayInstanceName(serviceInstanceConfig[INSTANCE_NAME_CONFIG_KEY], () => pluginList[serviceName].display) + `[${t('common.plugin')}]`}
>
)}
diff --git a/src/window/Translate/components/TargetArea/index.jsx b/src/window/Translate/components/TargetArea/index.jsx
index 1c5090e076..1030676621 100644
--- a/src/window/Translate/components/TargetArea/index.jsx
+++ b/src/window/Translate/components/TargetArea/index.jsx
@@ -40,7 +40,7 @@ import * as builtinServices from '../../../../services/translate';
import * as builtinTtsServices from '../../../../services/tts';
import { store } from '../../../../utils/store';
-import { INSTANCE_NAME_CONFIG_KEY, getServiceName, whetherPluginService } from '../../../../utils/service_instance';
+import { INSTANCE_NAME_CONFIG_KEY, getDisplayInstanceName, getServiceName, whetherPluginService } from '../../../../utils/service_instance';
let translateID = [];
@@ -50,7 +50,7 @@ export default function TargetArea(props) {
const [currentTranslateServiceInstanceKey, setCurrentTranslateServiceInstanceKey] = useState(name);
function getInstanceName(instanceKey, serviceNameSupplier) {
const instanceConfig = serviceInstanceConfigMap[instanceKey] ?? {}
- return instanceConfig[INSTANCE_NAME_CONFIG_KEY] ?? serviceNameSupplier()
+ return getDisplayInstanceName(instanceConfig[INSTANCE_NAME_CONFIG_KEY], serviceNameSupplier)
}
const [appFontSize] = useConfig('app_font_size', 16);