@utogether/udp-core 1.0.1-beta.2 → 1.0.1-beta.20

package/src/components/udp/utils.ts

@@ -1,40 +1,405 @@
-import { useRender } from '@utogether/utils';
-
-export const getAttrs = attrs => {
-  const data = {};
-  Object.keys(attrs).forEach(key => {
-    const nKey = key.replace(/-(\w)/g, str => str.slice(1).toUpperCase());
-    data[nKey] = attrs[key];
-  });
-  return data;
-};
-
-export const formatItems = (items, status, span = 24) => {
-  const renderHook = useRender();
-
-  if (!items.length) return items;
-  return items.map(item => {
-    item.title = item.title || `message.${item.field}`;
-    item.span = item.span || span;
-    let disabled = false;
-    if (status === 'detail') {
-      disabled = true;
-      item.placeholder = null;
-    } else {
-      disabled =
-        item.disabled === false ? item.disabled : item.disabled || item.itemRender?.props?.disabled;
-    }
-    let itemRender = {
-      name: 'VxeInput',
-      props: { disabled, placeholder: disabled ? '' : item.placeholder }
-    };
-    if (item.code && !item.itemRender) {
-      itemRender = renderHook.renderDict(item.code);
-    }
-    item.itemRender = item.itemRender || itemRender;
-    item.itemRender['props'] = Object.assign(item.itemRender.props || {}, {
-      disabled
-    });
-    return item;
-  });
-};
+/*
+ * @Author: wei.li
+ * @Date: 2022-06-23 17:29:11
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-10-29 18:04:53
+ * @Description: file content
+ */
+// @ts-nocheck
+
+import { clone, isString, orderBy, isEmpty, toDateString, isObject, isFunction } from 'xe-utils';
+import { cookies, storageLocal } from '@utogether/utils';
+/** 系统配置的key */
+const kSYSCONFIG = 'kSysConfig';
+const kCOOKIES = 'kCookies_param';
+
+const sysConfig = storageLocal.getItem(kSYSCONFIG);
+
+/** 工具栏按钮标准化 */
+export const formatButton = (buttons, auth?) => {
+  buttons.forEach(btn => {
+    btn.auth = auth ? auth[btn.code] || btn.auth : btn.auth;
+    if (!btn.name) {
+      btn.name = `message.btn.${btn.code}`;
+    } else if (sysConfig?.i18nEnabled === 'Y' && !btn.name.startsWith('message.')) {
+      btn.name = `message.btn.${btn.name}`;
+    }
+    if (btn.dropdowns?.length) {
+      formatButton(btn.dropdowns, auth);
+    }
+  });
+  return buttons;
+};
+
+/**
+ * @description 查询10W数据,常用于Excel导出
+ * @param props 查询接口的路径
+ * @param http http实例
+ * @param form 查询条件
+ * @returns 查询返回的数据
+ */
+export const queryAll = (props, http, form) => {
+  const params = { pageNum: 1, pageSize: 100000 };
+  const commonParam = getCookieParam();
+  Object.assign(params, form, commonParam, props.defaultParams || {});
+  let query = formatMultipleParams(params, props.items);
+  query = formatDateRange(query, props.items);
+
+  const { url } = props;
+  if (!url) return null;
+  const requestURL = isString(url) ? url : url.fetch || url.restful;
+  if (!requestURL) return null;
+  const method = url.fetch ? 'post' : 'get';
+  return new Promise((resolve, reject) => {
+    http[method](requestURL, query)
+      .then((response: IResponseData) => {
+        resolve(response.list);
+      })
+      .catch((e: any) => {
+        reject(e);
+      });
+  });
+};
+
+/**
+ * @description 查询服务
+ * @param props 查询接口的路径
+ * @param form 查询条件
+ * @param page 分页参数
+ * @param http http实例
+ * @param isDoc doc文档
+ * @returns Promise
+ */
+export const query = (props, form, page, http, code, isDoc) => {
+  if (isDoc) return getDocData();
+  for (const key in form) {
+    if (form[key] && isString(form[key])) {
+      form[key] = form[key].trim();
+    }
+  }
+  const params = { pageNum: page.currentPage, pageSize: page.pageSize };
+  const commonParam = getCookieParam();
+  Object.assign(params, commonParam, props.defaultParams || {}, form);
+
+  let query = formatMultipleParams(params, props.items, form);
+  query = formatDateRange(query, props.items);
+  const { url } = props;
+  if (!url) return null;
+  const requestURL = isString(url) ? url : url.fetch || url.restful;
+  const method = url.fetch ? 'post' : 'get';
+  if (!requestURL) return null;
+  return http[method](requestURL, query);
+};
+
+/**
+ * @description 表格删除方法
+ * @param http http实例
+ * @param records 记录行
+ * @param props 删除接口的路径
+ * @returns Promise
+ */
+export const del = (http, records, props) => {
+  const { url } = props;
+  if (!url) return null;
+  const requestURL = isString(url) ? url : url.del || url.restful;
+  if (!requestURL) return null;
+  const method = url.del ? 'post' : 'delete';
+  return http[method](requestURL, records);
+};
+
+/** 更新服务 */
+export const save = (http, body, props) => {
+  const allService = [];
+  const { url } = props;
+  if (!url) return null;
+
+  const { insertRecords, updateRecords } = body;
+  if (!isEmpty(insertRecords)) {
+    const commonParam = getCookieParam();
+    insertRecords.forEach(m => {
+      !isEmpty(props?.defaultValue) && Object.assign(m, props.defaultValue);
+      Object.keys(commonParam)?.forEach(key => {
+        m[key] = m[key] || commonParam[key];
+      });
+    });
+    const requestURL = isString(url) ? url : url.add || url.restful;
+    requestURL && allService.push(http.post(requestURL, insertRecords));
+  }
+  if (!isEmpty(updateRecords)) {
+    const requestURL = isString(url) ? url : url.save || url.restful;
+    const method = url.save ? 'post' : 'put';
+    requestURL && allService.push(http[method](requestURL, updateRecords));
+  }
+  return allService;
+};
+
+/**
+ * 多选数据优化
+ * @param listQuery
+ * @param items
+ * @returns
+ */
+const formatMultipleParams = (listQuery: any, items) => {
+  const multipleItems = items.filter(f => f.itemRender?.props?.multiple || f.multiple);
+  if (isEmpty(multipleItems)) return listQuery;
+  const query = clone(listQuery, true);
+  multipleItems.forEach((element: any) => {
+    if (element.itemRender.name === '#select') {
+      // const data = query[`_${element.field}`] || query[`${element.field}`];
+      // query[element.field] = !isString(data) ? data?.join(',') : data;
+      delete query[`_${element.field}`];
+    }
+  });
+  return query;
+};
+
+const startFormatter = 'yyyy-MM-dd 00:00:00';
+const endFormatter = 'yyyy-MM-dd 23:59:59';
+// 时间范围优化
+const formatDateRange = (listQuery: any, items) => {
+  const dateRanges = items.filter(f => ['#SuDateRange', 'VxeDateRangePicker'].includes(f.itemRender?.name));
+  if (isEmpty(dateRanges)) return listQuery;
+  const query = clone(listQuery, true);
+  dateRanges.forEach((element: any) => {
+    const val = query[element.field];
+    if (val && element.itemRender.startField) {
+      query[element.itemRender.startField] = toDateString(query[element.itemRender.startField], startFormatter);
+      query[element.itemRender.endField] = toDateString(query[element.itemRender.endField], endFormatter);
+    } else if (val) {
+      query[`${element.field}From`] = toDateString(val[0], startFormatter);
+      query[`${element.field}To`] = toDateString(val[1], endFormatter);
+    }
+    delete query[element.field];
+  });
+  return query;
+};
+
+const getCookieParam = () => {
+  return cookies.get(kCOOKIES) ? JSON.parse(cookies.get(kCOOKIES)) : {};
+};
+
+/** 工具栏默认按钮组 */
+export const inlineButtons = [
+  {
+    code: 'insert_actived',
+    name: 'add',
+    status: 'u-cyan',
+    icon: 'vxe-icon-add',
+    auth: 'add',
+    sort: 1
+  },
+  {
+    code: 'delete',
+    status: 'danger',
+    icon: 'vxe-icon-delete',
+    auth: 'del',
+    sort: 2
+  },
+  {
+    code: 'save',
+    status: 'primary',
+    icon: 'vxe-icon-save',
+    auth: 'edit',
+    sort: 3
+  }
+];
+// form 模式按钮
+export const dialogButtons = [
+  {
+    code: 'add',
+    status: 'u-cyan',
+    icon: 'vxe-icon-add',
+    auth: 'add',
+    sort: 1
+  },
+  {
+    code: 'del',
+    status: 'danger',
+    icon: 'vxe-icon-delete',
+    auth: 'del',
+    sort: 2
+  }
+];
+
+export const defaultColums = [
+  { field: 'createdByName', width: 90, visible: false },
+  { field: 'creationDate', width: 140, visible: false },
+  { field: 'lastUpdatedByName', width: 90, visible: false },
+  { field: 'lastUpdateDate', width: 140, visible: false }
+];
+
+/** 导出配置 */
+export const getExportConfig = attrs => {
+  if (isObject(attrs.exportConfig)) return attrs.exportConfig;
+  return {
+    filename: attrs.fileName || '导出明细',
+    type: 'xlsx',
+    types: ['xlsx', 'csv'],
+    modes: ['current', 'selected', 'all'],
+    useStyle: true,
+    sheetMethod: ({ worksheet }) => (attrs.onSheetMethod ? attrs.onSheetMethod(worksheet) : onSheetMethod(worksheet)),
+    columnFilterMethod: ({ column }) =>
+      attrs.columnFilter
+        ? !!attrs.columnFilter(column)
+        : !['operate'].includes(column.field) && column.type !== 'checkbox'
+  };
+};
+
+export const getToolBarConfig = (data, props, attrs, hasAuthority) => {
+  const refreshOptions = {
+    icon: 'ri-refresh-line',
+    iconLoading: 'vxe-icon-spinner roll vxe-loading--default-icon'
+  };
+  // 不可编辑时
+  if (!props.editable) {
+    data.editConfig.editable = props.editable;
+    const hasExport = props.needExport && hasAuthority('export');
+    if (hasExport) {
+      data.exportConfig = getExportConfig(attrs);
+    }
+    data.toolbarConfig = {
+      buttons: [],
+      enabled: hasExport,
+      refreshOptions,
+      exportOptions: { icon: 'ri-download-2-line', code: 'export' },
+      export: hasExport,
+      custom: !!attrs.gridId,
+      refresh: true,
+      perfect: true
+    };
+    return data;
+  }
+
+  // 先设置传入的按钮
+  let buttons = clone(attrs.buttons || [], true);
+
+  buttons.forEach((button, idx) => {
+    button.sort = button.sort || idx + 10;
+  });
+
+  // 获取默认的按钮
+  const toolButtons = attrs.mode !== 'form' ? clone(inlineButtons, true) : clone(dialogButtons, true);
+  // 判断传入的按钮是否有默认按钮的auth,有就不加入按钮组中,相当于重写了默认的按钮
+  // reverse的原因是: 保持现有按钮顺序， 新增，保存，删除
+  toolButtons.reverse().forEach(btn => {
+    !buttons.some(s => s.code === btn.code) && buttons.unshift(btn);
+    if (attrs.authPrefix && !['printer', 'export'].includes(btn.auth)) {
+      btn.auth = attrs.authPrefix + btn.auth.slice(0, 1).toLocaleUpperCase() + btn.auth.slice(1).toLocaleLowerCase();
+    }
+  });
+
+  buttons = formatButton(buttons, props.auth).filter(button => {
+    const flag = button.auth ? hasAuthority(button.auth) : true;
+    if (button.dropdowns?.length) {
+      button.dropdowns = button.dropdowns.filter(btn => !btn.auth || (btn.auth && hasAuthority(btn.auth)));
+    }
+    return flag;
+  });
+  // inline 行内模式，单击行模式
+  const editConfig = { trigger: 'dblclick', mode: 'row', showStatus: true };
+  data.editConfig = attrs.mode !== 'form' ? editConfig : { enabled: false };
+  // 导出权限
+  const hasExport = props.needExport && hasAuthority('export');
+  let exportBtn = null;
+  if (hasExport) {
+    data.exportConfig = getExportConfig(attrs);
+    exportBtn = { icon: 'ri-download-2-line', code: 'export' };
+  }
+  data.toolbarConfig = {
+    buttons: orderBy(buttons, 'sort'),
+    enabled: true,
+    refreshOptions,
+    customOptions: attrs.gridId ? {} : null,
+    exportOptions: exportBtn,
+    custom: !!attrs.gridId,
+    export: hasExport,
+    refresh: true,
+    perfect: true
+  };
+  return data;
+};
+
+/**
+ * @description: 表格脚合并方法
+ * @param {*} columns 列数据
+ * @param {*} data 数据源
+ * @param {*} sum 合并属性
+ * @return {*} 合并脚方法
+ */
+export const footerSumMethod = ({ columns, data }, sum) => {
+  return [
+    columns.map((column, columnIdx) => {
+      if (columnIdx === (sum.index || 0)) {
+        return sum.label || '合计';
+      }
+      if (sum.fields?.includes(column.property)) {
+        const total = data.reduce((prev, cur) => {
+          return prev + Number(cur[column.property] || 0);
+        }, 0);
+        return total ? Number(total.toFixed(sum.decimal || 2)) : total;
+      }
+      return '';
+    })
+  ];
+};
+
+/**
+ * @description: checkbox是否可选
+ */
+export const onCheckMethod = (row, props) => {
+  if (isFunction(props.checkMethod)) {
+    return props.checkMethod(row);
+  }
+  return true;
+};
+
+/*** excel样式重置 */
+const onSheetMethod = ws => {
+  ws.eachRow((row, rowNumber) => {
+    row.font = { name: '微软雅黑', size: 9 };
+    row.border = {
+      top: { style: 'thin' },
+      left: { style: 'thin' },
+      bottom: { style: 'thin' },
+      right: { style: 'thin' }
+    };
+
+    if (rowNumber === 1) {
+      row.fill = {
+        type: 'pattern',
+        pattern: 'solid',
+        fgColor: { argb: '4F81BD' }
+      };
+      row.font = {
+        name: '微软雅黑',
+        size: 10,
+        bold: true,
+        color: { argb: 'FFFFFFFF' }
+      };
+    }
+  });
+};
+
+const getDocData = () => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      const list = [
+        { id: 1, name: 'Test1', sex: 'Man', age: 28, address: 'Shenzhen' },
+        { id: 2, name: 'Test2', sex: 'Women', age: 22, address: 'Guangzhou' },
+        { id: 3, name: 'Test3', sex: 'Man', age: 32, address: 'Shanghai' },
+        { id: 4, name: 'Test4', sex: 'Women', age: 23, address: 'test abc' },
+        { id: 5, name: 'Test5', sex: 'Women', age: 30, address: 'Shanghai' }
+      ];
+      resolve({ list, total: 5 });
+    }, 100);
+  });
+};
+
+export const getAttrs = attrs => {
+  const data = {};
+  Object.keys(attrs).forEach(key => {
+    const nKey = key.replace(/-(\w)/g, str => str.slice(1).toUpperCase());
+    data[nKey] = attrs[key];
+  });
+  return data;
+};

package/src/directives/permission/index.ts

@@ -8,7 +8,7 @@
  */
 import { usePermissionStoreHook } from '../../store/modules/permission';
 import type { Directive } from 'vue';
-import router from '../../router';
+import { router } from '../../router';
 import type { DirectiveBinding } from 'vue';
 
 export const auth: Directive = {

package/src/layout/components/lay-navbar/index.vue

@@ -2,11 +2,11 @@
  * @Author: wei.li
  * @Date: 2021-11-17 16:02:30
  * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-04-16 16:20:09
+ * @LastEditTime: 2025-08-29 08:57:37
  * @Description: file content
 -->
 <template>
-  <div class="system-navbar bg-[#fff] shadow-sm shadow-[rgba(0, 21, 41, 0.08)] dark:shadow-[#0d0d0d]">
+  <div class="system-navbar bg-white shadow-sm shadow-[rgba(0, 21, 41, 0.08)] dark:shadow-[#0d0d0d]">
     <Hamburger
       v-if="layout !== 'mix'"
       :is-active="appHook.sidebar.opened"
@@ -20,16 +20,14 @@
 
     <div v-if="layout === 'vertical'" class="vertical-header-right">
       <!-- 业务单元选择 -->
-      <OrgSelect />
+      <OrgSelect v-if="sysConfig['orgTaggle'] === 'Y'" />
       <!-- 菜单搜索 -->
       <Search />
       <!-- 通知 -->
       <!-- <Notice id="header-notice" /> -->
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigge·r="click">
-        <globalization
-          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
-        />
+        <globalization class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden" />
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
@@ -98,7 +96,7 @@ export default { name: 'NavBar' };
 </script>
 <script setup lang="ts">
 import { ref } from 'vue';
-// import { useRouter } from 'vue-router';
+import { storageLocal } from '@utogether/utils';
 import Hamburger from '../lay-sidebar/hamBurger.vue';
 import Breadcrumb from '../lay-sidebar/breadCrumb.vue';
 // import Notice from './lay-notice/index.vue';
@@ -109,6 +107,7 @@ import OrgSelect from '../lay-select-org/index.vue';
 import { useTranslationLang } from '../../hooks/useTranslationLang';
 import globalization from '../../../assets/svg/globalization.svg?component';
 import avatars from '../../../assets/images/avatars.jpg';
+import { kSYSCONFIG } from '../../../contant';
 
 // const router = useRouter();
 // const route = useRoute();
@@ -131,6 +130,9 @@ const {
 const { locale, translationCh, translationEn } = useTranslationLang();
 
 const record: IRecord = {};
+
+const sysConfig = storageLocal.getItem(kSYSCONFIG) || {};
+
 /**
  * @description: 重置密码
  */

package/src/layout/components/lay-panel/index.vue

@@ -2,7 +2,7 @@
  * @Author: wei.li
  * @Date: 2021-12-23 17:33:20
  * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-04-16 15:54:13
+ * @LastEditTime: 2025-07-31 10:15:40
  * @Description: 个性化设置页面
 -->
 <script setup lang="ts">
@@ -52,7 +52,7 @@ onBeforeUnmount(() => {
 <template>
   <div :class="{ show }">
     <div class="right-panel-background" />
-    <div ref="target" class="right-panel bg-bg_color">
+    <div ref="target" class="right-panel bg-bg_color bg-white">
       <div
         class="project-configuration border-0 border-b-[1px] border-solid border-[var(--pure-border-color)]"
       >
@@ -118,7 +118,7 @@ onBeforeUnmount(() => {
   position: fixed;
   top: 0;
   right: 0;
-  z-index: 40000;
+  z-index: 400000;
   width: 100%;
   max-width: 300px;
   box-shadow: 0 0 15px 0 rgb(0 0 0 / 5%);

package/src/layout/components/lay-search/index.vue

@@ -16,7 +16,7 @@ function handleSearch() {
 
 <template>
   <div
-    class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
+    class="search-container w-[40px] h-[48px] px-2 flex justify-center items-center cursor-pointer navbar-bg-hover"
     @click="handleSearch"
   >
     <IconifyIconOffline icon="ri:search-line" />

package/src/layout/components/lay-select-org/index.vue

@@ -2,7 +2,7 @@
  * @Author: wei.li
  * @Date: 2021-11-27 16:16:11
  * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-04-16 14:27:14
+ * @LastEditTime: 2025-09-22 09:47:39
  * @Description: file content
 -->
 
@@ -10,12 +10,7 @@
 <template>
   <div style="width: 240px">
     <el-select v-model="orgId" size="small" @change="onChange">
-      <el-option
-        v-for="element in orgList"
-        :key="element.id"
-        :label="element.orgName"
-        :value="element.id"
-      />
+      <el-option v-for="element in orgList" :key="element.id" :label="element.orgName" :value="element.id" />
     </el-select>
   </div>
 </template>
@@ -47,8 +42,8 @@ const onChange = async orgId => {
     const [err, data]: [Error, any] = await to(getServiceApi().get('/uums/cusOrganization', query));
     if (!err && data.list?.length) {
       useSystemStoreHook().setInvOrgList(data.list || []);
-      const invOrg = data.list.find(f => f.orgId === orgId);
-      organizationId = invOrg.id;
+      const invOrg = data?.list?.find(f => f.orgId === orgId);
+      organizationId = invOrg?.id;
       useSystemStoreHook().setOrganizationId(organizationId);
     }
     const param = { orgId, organizationId };

package/src/layout/components/lay-sidebar/breadCrumb.vue

@@ -119,7 +119,7 @@ watch(
 </script>
 
 <template>
-  <el-breadcrumb class="!leading-[50px] select-none" separator="/">
+  <el-breadcrumb class="!leading-[50px] select-none" separator="/" style="line-height: 50px">
     <transition-group name="breadcrumb">
       <el-breadcrumb-item v-for="item in levelList" :key="item.path" class="inline! items-stretch!">
         <a @click.prevent="handleLink(item)">

package/src/layout/components/lay-sidebar/horizontal.vue

@@ -21,6 +21,7 @@ const routeStore = usePermissionStoreHook();
 const sysConfig = storageLocal.getItem(kSYSCONFIG) || {};
 
 const logo = ref(sysConfig['logo'] || utogether);
+
 const {
   title,
   logout,
@@ -88,16 +89,14 @@ export default { name: 'LayoutHorizontal' };
     </el-scrollbar>
     <div class="horizontal-header-right flex-[2]">
       <!-- 业务单元选择 -->
-      <OrgSelect class="udp-horizontal" />
+      <OrgSelect v-if="sysConfig['orgTaggle'] === 'Y'" class="udp-horizontal" />
       <!-- 菜单搜索 -->
       <Search />
       <!-- 通知 -->
       <!-- <Notice id="header-notice" /> -->
       <!-- 国际化 -->
-      <el-dropdown id="header-translation" trigger="click">
-        <globalization
-          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
-        />
+      <el-dropdown id="header-translation" class="px-2" trigger="click">
+        <globalization class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden" />
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item

package/src/layout/components/lay-sidebar/mixNav.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, watch, toRaw, onMounted, nextTick } from 'vue';
+import { storageLocal } from '@utogether/utils';
 import OrgSelect from '../lay-select-org/index.vue';
 import Search from '../lay-search/index.vue';
 // import Notice from '../lay-notice/index.vue';
@@ -13,6 +14,7 @@ import { useNav } from '../../hooks/useNav';
 import { useTranslationLang } from '../../hooks/useTranslationLang';
 import { usePermissionStoreHook } from '../../../store/modules/permission';
 import globalization from '../../../assets/svg/globalization.svg?component';
+import { kSYSCONFIG } from '../../../contant';
 
 const menuRef = ref();
 const { route, locale, translationCh, translationEn } = useTranslationLang(menuRef);
@@ -38,6 +40,8 @@ const record: IRecord = {};
 
 const showModal = ref(false);
 
+const sysConfig = storageLocal.getItem(kSYSCONFIG) || {};
+
 function getDefaultActive(routePath) {
   const wholeMenus = usePermissionStoreHook().wholeMenus;
   // 当前路由的父级路径
@@ -135,16 +139,14 @@ const handleScroll = e => {
     </el-scrollbar>
     <div class="horizontal-header-right">
       <!-- 业务单元选择 -->
-      <OrgSelect />
+      <OrgSelect v-if="sysConfig['orgTaggle'] === 'Y'" />
       <!-- 菜单搜索 -->
       <Search />
       <!-- 通知 -->
       <!-- <Notice id="header-notice" /> -->
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
-        <globalization
-          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
-        />
+        <globalization class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden" />
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item