unified service display name

Author: xtyuns

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'

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}
                             />
                             <Spacer x={2} />
-                            <h2 className='my-auto'>{serviceInstanceConfig[INSTANCE_NAME_CONFIG_KEY] || t(`services.translate.${serviceName}.title`)}</h2>
+                            <h2 className='my-auto'>{getDisplayInstanceName(serviceInstanceConfig[INSTANCE_NAME_CONFIG_KEY], () => t(`services.translate.${serviceName}.title`))}</h2>
                         </>
                     )}
                     {serviceSourceType === ServiceSourceType.PLUGIN && (
@@ -50,7 +50,7 @@ export default function ServiceItem(props) {
                                 draggable={false}
                             />
                             <Spacer x={2} />
-                            <h2 className='my-auto'>{`${serviceInstanceConfig[INSTANCE_NAME_CONFIG_KEY] || pluginList[serviceName].display} [${t('common.plugin')}]`}</h2>
+                            <h2 className='my-auto'>{getDisplayInstanceName(serviceInstanceConfig[INSTANCE_NAME_CONFIG_KEY], () => pluginList[serviceName].display) +  `[${t('common.plugin')}]`}</h2>
                         </>
                     )}
                 </div>

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);