chore(platform): dropdown's dTrigger should be click when in header

Author: xiejay97

packages/platform/src/app/components/index.ts

@@ -6,6 +6,7 @@ export { AppDetailView } from './detail-view';
 
 export { AppFCPLoader } from './fcp-loader';
 
+export type { AppLanguageProps } from './language';
 export { AppLanguage } from './language';
 
 export type { AppListProps } from './list';

packages/platform/src/app/components/language/Language.tsx

@@ -10,7 +10,17 @@ import { DDropdown } from '@react-devui/ui';
 
 import { STORAGE_KEY } from '../../config/storage';
 
-export function AppLanguage(props: React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element | null {
+export interface AppLanguageProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+  aTrigger?: 'click' | 'hover';
+}
+
+export function AppLanguage(props: AppLanguageProps): JSX.Element | null {
+  const {
+    aTrigger,
+
+    ...restProps
+  } = props;
+
   const languageStorage = useStorage<DLang>(...STORAGE_KEY.language);
   const { t, i18n } = useTranslation();
 
@@ -31,12 +41,13 @@ export function AppLanguage(props: React.ButtonHTMLAttributes<HTMLButtonElement>
         ),
         type: 'item',
       }))}
+      dTrigger={aTrigger}
       onItemClick={(id) => {
         languageStorage.set(id);
         i18n.changeLanguage(id);
       }}
     >
-      <button {...props} aria-label={t('components.language.Change language')}>
+      <button {...restProps} aria-label={t('components.language.Change language')}>
         <DCustomIcon viewBox="0 0 24 24">
           <path d="M0 0h24v24H0z" fill="none"></path>
           <path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z "></path>

packages/platform/src/app/routes/layout/header/Header.tsx

@@ -95,7 +95,7 @@ export function AppHeader(props: AppHeaderProps): JSX.Element | null {
       </button>
       <AppNotification className={styles['app-header__button']} />
       <AppUser className={styles['app-header__button']} style={{ gap: '0 8px' }} />
-      <AppLanguage className={styles['app-header__button']} />
+      <AppLanguage className={styles['app-header__button']} aTrigger="click" />
     </header>
   );
 }

packages/platform/src/app/routes/layout/header/user/User.tsx

@@ -21,6 +21,7 @@ export function AppUser(props: React.ButtonHTMLAttributes<HTMLButtonElement>): J
         { id: 'setting', label: t('routes.layout.Account Settings'), type: 'item', icon: <SettingOutlined />, separator: true },
         { id: 'logout', label: t('routes.layout.Logout'), type: 'item', icon: <LogoutOutlined /> },
       ]}
+      dTrigger="click"
       onItemClick={(id) => {
         switch (id) {
           case 'logout':