[Improve]: header bar add Qrcode image & add language header (#3562)

apache · Feb 18, 2024 · f65a877 · f65a877
1 parent ae9c88b
commit f65a877
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/streampark-console/streampark-console-webapp/src/assets/images/join_wechat.png b/streampark-console/streampark-console-webapp/src/assets/images/join_wechat.png
diff --git a/streampark-console/streampark-console-webapp/src/layouts/default/header/index.vue b/streampark-console/streampark-console-webapp/src/layouts/default/header/index.vue
@@ -39,7 +39,16 @@
       </a-button>
       <Divider type="vertical" />
 
-      <Icon icon="ant-design:qrcode-outlined" :class="`${prefixCls}-action__item`" />
+      <Popover
+        placement="bottom"
+        trigger="hover"
+        arrow-point-at-center
+      >
+        <template #content>
+          <img src="/@/assets/images/join_wechat.png" alt="qrcode"  class="h-150px w-150px"/>
+        </template>
+        <Icon icon="ant-design:qrcode-outlined" :class="`${prefixCls}-action__item`" />
+      </Popover>
 
       <!-- Github info -->
       <Github :class="`${prefixCls}-action__item github-item`" />
@@ -69,7 +78,7 @@
   import { defineComponent, unref, computed } from 'vue';
 
   import { propTypes } from '/@/utils/propTypes';
-  import { Layout, Divider } from 'ant-design-vue';
+  import { Layout, Divider, Popover } from 'ant-design-vue';
   import { AppLogo } from '/@/components/Application';
   import LayoutMenu from '../menu/index.vue';
   import LayoutTrigger from '../trigger/index.vue';
@@ -121,6 +130,7 @@
       LockScreen,
       Divider,
       AppDarkModeToggle,
+      Popover
     },
     props: {
       fixed: propTypes.bool,

diff --git a/streampark-console/streampark-console-webapp/src/utils/http/axios/index.ts b/streampark-console/streampark-console-webapp/src/utils/http/axios/index.ts
@@ -15,6 +15,7 @@ import { useErrorLogStoreWithOut } from '/@/store/modules/errorLog';
 import { useI18n } from '/@/hooks/web/useI18n';
 import { joinTimestamp, formatRequestDate } from './helper';
 import { useUserStoreWithOut } from '/@/store/modules/user';
+import { useLocaleStoreWithOut } from '/@/store/modules/locale';
 import { AxiosRetry } from '/@/utils/http/axios/axiosRetry';
 import { errorHandler } from './errorHandle';
 
@@ -93,6 +94,8 @@ const transform: AxiosTransform = {
     const data = config.data || false;
     formatDate && data && !isString(data) && formatRequestDate(data);
     const teamId = getUserTeamId();
+    const localStore = useLocaleStoreWithOut();
+    config.headers = Object.assign(config.headers || {}, { 'language': localStore.getLocale });
     if (config.method?.toUpperCase() === RequestEnum.GET) {
       if (!isString(params)) {
         // Add a timestamp parameter to the get request to avoid taking data from the cache.