hy-dispatch-ui-v3 0.2.66 → 0.2.68

package/lib/components/hyTree/js/index.js

@@ -23,9 +23,7 @@ const useAppTreeWrapper = (hy) => {
     // 用实例的 provides 链覆盖应用级 provides，才能拿到 ElConfigProvider 注入的 namespace
     provides: instance.provides
   } : null;
-  const permissionIdList = JSON.parse(
-    window.sessionStorage.getItem("permissionIdList") || "[]"
-  );
+  const permissionIdList = JSON.parse(window.sessionStorage.getItem("permissionIdList") || "[]");
   let virtualTree = null;
   const filterValue = vue.ref("");
   const disableSelectionMap = vue.ref(null);
@@ -34,10 +32,46 @@ const useAppTreeWrapper = (hy) => {
   const selectFilterType = vue.ref(null);
   const selectFilterList = vue.ref([]);
   const loading = vue.ref(true);
+  const noTreeSelData = vue.ref([]);
+  function getSelectedDataKey(data) {
+    if (!data) return void 0;
+    if (props.treeType === "device" || props.treeType === "channel") {
+      return data.channelId || data.deviceId;
+    }
+    if (props.treeType) {
+      return data.id;
+    }
+    return data[props.treeProps?.value];
+  }
+  function deleteNoTreeSelData(item) {
+    const index = hy.noTreeSelData.value.findIndex((v) => hy.getSelectedDataKey(v) === hy.getSelectedDataKey(item));
+    if (index !== -1) {
+      hy.noTreeSelData.value.splice(index, 1);
+    }
+  }
+  function updateNoTreeSelData(dataList) {
+    let selList = [];
+    if (props.treeType) {
+      selList = hy.virtualTree?.getCheckedBusinessNodes(true) || [];
+    } else {
+      selList = hy.virtualTree?.getCheckedNodes(true) || [];
+    }
+    const treeMap = /* @__PURE__ */ new Map();
+    selList.forEach((item) => {
+      const key = hy.getSelectedDataKey(item);
+      if (key) {
+        treeMap.set(key, true);
+      }
+    });
+    hy.noTreeSelData.value = dataList.filter((item) => !treeMap.get(hy.getSelectedDataKey(item)));
+  }
+  function mergeNoTreeSelData(dataList) {
+    return [...hy.noTreeSelData.value, ...dataList];
+  }
   vue.watch(
     () => props.showCheckbox,
     (newVal) => {
-      virtualTree?.setRowSelection({
+      hy.virtualTree?.setRowSelection({
         type: props.showCheckbox ? "checkbox" : "radio"
       });
     }
@@ -46,43 +80,43 @@ const useAppTreeWrapper = (hy) => {
     return new Promise((resolve) => {
       hy.loading.value = true;
       if (props.disableSelection?.length) {
-        setDisAbleSelectionMap();
+        hy.setDisAbleSelectionMap();
       }
-      if (!virtualTree) {
-        virtualTree = new VirtualTree({
+      if (!hy.virtualTree) {
+        hy.virtualTree = new VirtualTree({
           // 指定容器
           container: treeRef.value,
           // 数据
           data: dataList,
           // 每一项的高度
-          itemHeight: 30,
+          // itemHeight: 30, // 使用全局配置
           // 可视区域外的缓冲项数量
-          bufferSize: 10,
+          // bufferSize: 10, // 使用全局配置
           // 相邻级节点间的水平缩进，单位为像素
-          indent: 16,
+          // indent: 16, // 使用全局配置
           emptyText: "\u6682\u65E0\u6570\u636E",
           // 树形业务类型
           business: props.treeType,
           // 自定义整体的插槽
-          renderItem: props.treeType === treeConfig.treeTypeConfig.user ? (data, node) => setUserSlot(data, node) : setSlot("treeParentSlot"),
+          renderItem: props.treeType === treeConfig.treeTypeConfig.user ? (data, node) => hy.setUserSlot(data, node) : props.treeType === treeConfig.treeTypeConfig.group ? (data, node) => hy.setGroupRenderItem(data, node) : hy.setSlot("treeParentSlot"),
           // // 自定义状态右侧插槽
           renderRight: (data) => {
-            let renderRight = setSlot("renderRight");
+            let renderRight = hy.setSlot("renderRight");
             if (renderRight) return renderRight(data);
             if (data.dataType === 1) {
-              let departmentRight = setSlot("departmentRight");
+              let departmentRight = hy.setSlot("departmentRight");
               if (departmentRight) {
                 return departmentRight(data);
               }
             }
             if (data.dataType === 3) {
-              let deviceOnlineRight = setSlot("deviceOnlineRight");
+              let deviceOnlineRight = hy.setSlot("deviceOnlineRight");
               if (deviceOnlineRight) {
                 return deviceOnlineRight(data);
               }
             }
             if ([11].includes(data.dataType)) {
-              let planGroupRight = setSlot("planGroupRight");
+              let planGroupRight = hy.setSlot("planGroupRight");
               if (planGroupRight) {
                 return planGroupRight(data);
               }
@@ -90,16 +124,16 @@ const useAppTreeWrapper = (hy) => {
             return true;
           },
           // // 自定义状态模块
-          renderStatus: props.treeType === treeConfig.treeTypeConfig.device || props.treeType === treeConfig.treeTypeConfig.channel ? (data) => setRenderStatus(data) : null,
+          renderStatus: props.treeType === treeConfig.treeTypeConfig.device || props.treeType === treeConfig.treeTypeConfig.channel ? (data) => hy.setRenderStatus(data) : null,
           // 暂无数据插槽
           renderEmpty: () => {
             if (!props.showCustomEmpty || hy.filterValue.value) return true;
-            let renderEmpty = setSlot("renderEmpty");
+            let renderEmpty = hy.setSlot("renderEmpty");
             if (renderEmpty) {
               const target = renderEmpty();
               return target.el;
             }
-            return setEmpty();
+            return hy.setEmpty();
           },
           props: {
             // 是否显示右侧业务状态
@@ -134,7 +168,6 @@ const useAppTreeWrapper = (hy) => {
             showSelectBox: props.showSelectBox,
             // 选中回调
             onCheckChange: (data, info, checked) => {
-              console.log("onCheckChange", info);
               if (data.dataType === 3 && !checked) {
                 emits("on-click-delete", JSON.parse(JSON.stringify(data)));
               } else if (data.dataType === 3) {
@@ -142,9 +175,7 @@ const useAppTreeWrapper = (hy) => {
               }
               emits(
                 "on-check-tree",
-                JSON.parse(
-                  JSON.stringify(info.checkedBusinessNodes || info.checkedNodes)
-                ),
+                JSON.parse(JSON.stringify(hy.mergeNoTreeSelData(info.checkedBusinessNodes || info.checkedNodes))),
                 {
                   data,
                   info,
@@ -221,9 +252,7 @@ const useAppTreeWrapper = (hy) => {
                   }
                 ]);
               } else {
-                const channelList = data.videoChannelList?.filter(
-                  (v) => v.onlineState === 1
-                );
+                const channelList = data.videoChannelList?.filter((v) => v.onlineState === 1);
                 if (channelList && channelList.length) {
                   emits(
                     "on-dblclick",
@@ -248,16 +277,16 @@ const useAppTreeWrapper = (hy) => {
             document.body.click();
           },
           onLoad: () => {
-            if (props.showOnlineOnly && !virtualTree._flattenTree?.length && !hy.filterValue.value) {
+            if (props.showOnlineOnly && !hy.virtualTree._flattenTree?.length && !hy.filterValue.value) {
               elementPlus.ElMessage.warning("\u6682\u65E0\u8BBE\u5907\u5904\u4E8E\u5728\u7EBF\u72B6\u6001");
             }
             if (props.defaultSelectedOrgID && props.showCheckbox && props.treeType === "device") {
-              setSelectedOrg(dataList);
+              hy.setSelectedOrg(dataList);
             } else if (props.selectedByDefault?.length) {
-              setCheckedKeys(props.selectedByDefault);
+              hy.setCheckedKeys(props.selectedByDefault);
             }
             if (hy.filterValue.value) {
-              getFilterValue();
+              hy.getFilterValue();
             }
             setTimeout(() => {
               hy.loading.value = false;
@@ -266,7 +295,7 @@ const useAppTreeWrapper = (hy) => {
           }
         });
       } else {
-        virtualTree.setData(
+        hy.virtualTree.setData(
           {
             data: dataList,
             businessConfig: {
@@ -276,11 +305,11 @@ const useAppTreeWrapper = (hy) => {
             }
           },
           () => {
-            if (props.showOnlineOnly && !virtualTree._flattenTree?.length && !hy.filterValue.value) {
+            if (props.showOnlineOnly && !hy.virtualTree._flattenTree?.length && !hy.filterValue.value) {
               elementPlus.ElMessage.success("\u6682\u65E0\u8BBE\u5907\u5904\u4E8E\u5728\u7EBF\u72B6\u6001");
             }
             if (hy.filterValue.value) {
-              getFilterValue();
+              hy.getFilterValue();
             }
             setTimeout(() => {
               hy.loading.value = false;
@@ -318,7 +347,7 @@ const useAppTreeWrapper = (hy) => {
     return content;
   }
   function getFilterValue() {
-    virtualTree.filter({ filterValue: hy.filterValue.value }, false);
+    hy.virtualTree.filter({ filterValue: hy.filterValue.value }, false);
   }
   function setDisAbleSelectionMap() {
     const map = /* @__PURE__ */ new Map();
@@ -332,7 +361,7 @@ const useAppTreeWrapper = (hy) => {
     emits("on-refreshData");
   }
   function setRenderStatus(data) {
-    const slot = setSlot("renderStatus");
+    const slot = hy.setSlot("renderStatus");
     if (slot) {
       return slot(data);
     }
@@ -362,22 +391,24 @@ const useAppTreeWrapper = (hy) => {
   }
   function setUserSlot(data) {
     if (data.dataType === 1) {
-      const slot2 = setSlot("treeParentSlot");
+      const slot2 = hy.setSlot("treeParentSlot");
       if (slot2) {
         return slot2(data);
       }
       return true;
     }
-    const slot = setSlot("treeSelectedSlot");
+    const slot = hy.setSlot("treeSelectedSlot");
     if (slot) {
       return slot(data);
     }
     return true;
   }
   function setGroupRenderItem(data, node) {
-    const slot = setSlot("treeParentSlot");
-    if (slot) {
-      return slot(data, node);
+    if (data.dataType === 4) {
+      const slot = hy.setSlot("treeGroupSlot");
+      if (slot) {
+        return slot(data, node);
+      }
     }
     return true;
   }
@@ -422,87 +453,86 @@ const useAppTreeWrapper = (hy) => {
     emits("on-addDevice");
   }
   function setDeviceStatus(payload) {
-    virtualTree?.updateData([payload]);
+    hy.virtualTree?.updateData([payload]);
   }
   function singleRemovalFn(row, isForce = false) {
     if (props.treeType === "device" || props.treeType === "channel") {
-      virtualTree.setChecked(row.channelId || row.deviceId, false, true);
+      hy.virtualTree.setChecked(row.channelId || row.deviceId, false, true);
     } else if (props.treeType) {
-      virtualTree.setChecked(row.id, false, true, isForce);
+      hy.virtualTree.setChecked(row.id, false, true, isForce);
     } else if (!props.treeType && props.treeProps) {
-      virtualTree.setChecked(
-        row[`${props.treeProps.value}`],
-        false,
-        true,
-        isForce
-      );
+      hy.virtualTree.setChecked(row[`${props.treeProps.value}`], false, true, isForce);
     }
+    hy.deleteNoTreeSelData(row);
   }
   function setCheckedKeys(dataList, isForce = false) {
     if (props.treeType === "device" || props.treeType === "channel") {
-      virtualTree?.setCheckedKeys(
+      hy.virtualTree?.setCheckedKeys(
         dataList.map((v) => v.channelId || v.deviceId),
         true,
         isForce
       );
     } else if (props.treeType) {
-      virtualTree?.setCheckedKeys(
+      hy.virtualTree?.setCheckedKeys(
         dataList.map((v) => v.id),
         true,
         isForce
       );
     } else if (!props.treeType && props.treeProps) {
-      console.log(
-        "\u9009\u4E2D\u56DE\u8C03",
-        dataList.map((v) => v[`${props.treeProps.value}`])
-      );
-      virtualTree?.setCheckedKeys(
+      hy.virtualTree?.setCheckedKeys(
         dataList.map((v) => v[`${props.treeProps.value}`]),
         false,
         isForce
       );
     }
+    hy.updateNoTreeSelData(dataList);
     if (props.isBackDefaultSelected) {
       setTimeout(() => {
-        const deviceList = virtualTree?.getCheckedBusinessNodes(true) || [];
-        emits("on-selectedDataList", deviceList);
+        let deviceList = [];
+        if (props.treeType) {
+          deviceList = hy.virtualTree?.getCheckedBusinessNodes(true) || [];
+        } else {
+          deviceList = hy.virtualTree?.getCheckedNodes(true) || [];
+        }
+        emits("on-selectedDataList", hy.mergeNoTreeSelData(deviceList));
       });
     }
   }
   function setChecked(data, type = true) {
     if (props.treeType === "device") {
-      virtualTree?.setChecked(data.channelId || data.deviceId, type, true);
+      hy.virtualTree?.setChecked(data.channelId || data.deviceId, type, true);
     } else if (props.treeType) {
-      virtualTree?.setChecked(data.id, type, true);
+      hy.virtualTree?.setChecked(data.id, type, true);
     } else if (!props.treeType && props.treeProps) {
-      virtualTree?.setChecked(data[`${props.treeProps.value}`], type, false);
+      hy.virtualTree?.setChecked(data[`${props.treeProps.value}`], type, false);
+    }
+    if (!type) {
+      hy.deleteNoTreeSelData(data);
     }
   }
   function setSelectedOrg(deviceList) {
     for (let i = 0; i < deviceList.length; i++) {
       if (props.defaultSelectedOrgID === deviceList[i].id) {
         if (deviceList[i].deviceList?.length) {
-          setCheckedKeys(deviceList[i].deviceList);
+          hy.setCheckedKeys(deviceList[i].deviceList);
         }
         return true;
       }
       if (deviceList[i].children?.length) {
-        const org = setSelectedOrg(deviceList[i].children);
+        const org = hy.setSelectedOrg(deviceList[i].children);
         if (org) return true;
       }
     }
   }
   function getSelectedDataList(leafOnly = false) {
     if (props.treeType) {
-      return virtualTree?.getCheckedBusinessNodes(leafOnly) || [];
+      return hy.mergeNoTreeSelData(hy.virtualTree?.getCheckedBusinessNodes(leafOnly) || []);
     }
-    return virtualTree?.getCheckedNodes(leafOnly) || [];
+    return hy.mergeNoTreeSelData(hy.virtualTree?.getCheckedNodes(leafOnly) || []);
   }
   function setFilterListType(type) {
     if (props.selectFilterList?.length) {
-      hy.selectFilterList.value = JSON.parse(
-        JSON.stringify(props.selectFilterList)
-      );
+      hy.selectFilterList.value = JSON.parse(JSON.stringify(props.selectFilterList));
       return;
     }
     if (props.treeType === "device") {
@@ -544,9 +574,7 @@ const useAppTreeWrapper = (hy) => {
     }
   }
   const getInputPlaceholder = vue.computed(() => {
-    const item = hy.selectFilterList.value.find(
-      (v) => v.value === hy.selectFilterType.value
-    );
+    const item = hy.selectFilterList.value.find((v) => v.value === hy.selectFilterType.value);
     if (item && item.placeholder) {
       return item.placeholder;
     }
@@ -558,7 +586,7 @@ const useAppTreeWrapper = (hy) => {
     }
   }
   function getNode(id) {
-    return virtualTree.getNode(id);
+    return hy.virtualTree.getNode(id);
   }
   return {
     filterValue,
@@ -566,6 +594,7 @@ const useAppTreeWrapper = (hy) => {
     permissionIdList,
     disableSelectionMap,
     addDeviceDom,
+    setDisAbleSelectionMap,
     getData,
     getFilterValue,
     refreshData,
@@ -573,6 +602,11 @@ const useAppTreeWrapper = (hy) => {
     setCheckedKeys,
     setChecked,
     setFilterListType,
+    setSelectedOrg,
+    setUserSlot,
+    setSlot,
+    setRenderStatus,
+    setEmpty,
     getInputPlaceholder,
     onChange,
     selectFilterList,
@@ -580,7 +614,14 @@ const useAppTreeWrapper = (hy) => {
     selectedDataList,
     getSelectedDataList,
     loading,
-    getNode
+    getNode,
+    noTreeSelData,
+    updateNoTreeSelData,
+    mergeNoTreeSelData,
+    getSelectedDataKey,
+    deleteNoTreeSelData,
+    setDeviceStatus,
+    setGroupRenderItem
   };
 };
 function filterNodeMethod(data, value, { selectFilterType, treeFilterParam = [], treeType }) {

package/lib/components/hyTree/style/index.css

@@ -1 +1 @@
-@import url('hy-virtual-tree/style');
+@import url('hy-virtual-tree/style');

package/lib/components/hyTree/tree.vue.js

@@ -120,7 +120,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
     // 是否高亮选中节点
     highlight: {
       type: Boolean,
-      default: false
+      default: true
     },
     // 是否严格的遵循父子不互相关联
     checkStrictly: {
@@ -206,7 +206,8 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       onChange,
       getSelectedDataList,
       loading,
-      getNode
+      getNode,
+      setDeviceStatus
     } = useMixins.useMixins(
       {
         props,
@@ -229,14 +230,15 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       setChecked,
       getSelectedDataList,
       refreshData,
-      getNode
+      getNode,
+      setDeviceStatus
     });
     return (_ctx, _cache) => {
       const _directive_loading = vue.resolveDirective("loading");
       return vue.openBlock(), vue.createElementBlock(
         "div",
         {
-          class: "w-full flex flex-col",
+          class: "w-full flex flex-col box-border",
           style: vue.normalizeStyle({ height: `${__props.treeHeight}px` })
         },
         [
@@ -249,7 +251,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
               "show-after": 500
             }, {
               default: vue.withCtx(() => [
-                vue.createElementVNode("div", { class: "search_lightColor flex min-w-full z-[3]" }, [
+                vue.createElementVNode("div", { class: "search_lightColor flex min-w-full z-[3] box-border" }, [
                   vue.createVNode(vue.unref(elementPlus.ElInput), {
                     size: "small",
                     clearable: "",
@@ -286,7 +288,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
               placement: "bottom-start"
             }, {
               default: vue.withCtx(() => [
-                vue.createElementVNode("div", { class: "flex search_lightColor w-full" }, [
+                vue.createElementVNode("div", { class: "flex search_lightColor w-full box-border" }, [
                   vue.createElementVNode("div", { class: "flex flex-grow w-0" }, [
                     vue.createVNode(vue.unref(elementPlus.ElSelect), {
                       class: "!w-[37%] box-border rounded-[6px] flex-shrink-0",
@@ -339,18 +341,19 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
             }, 8, ["content"])
           ])) : vue.createCommentVNode("v-if", true),
           vue.renderSlot(_ctx.$slots, "input-bottom"),
-          vue.withDirectives(vue.createElementVNode(
-            "div",
-            {
-              ref_key: "treeRef",
-              ref: treeRef,
-              style: { "width": "100%" },
-              class: "flex-grow h-0 w-full"
-            },
-            null,
-            512
-            /* NEED_PATCH */
-          ), [
+          vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", { class: "flex-grow h-0 w-full px-[10px] box-border" }, [
+            vue.createElementVNode(
+              "div",
+              {
+                ref_key: "treeRef",
+                ref: treeRef,
+                class: "w-full h-full"
+              },
+              null,
+              512
+              /* NEED_PATCH */
+            )
+          ])), [
             [_directive_loading, vue.unref(loading)]
           ])
         ],

package/lib/components/hyUserAvatar/userAvatar.vue.js

@@ -6,9 +6,9 @@ var vue = require('vue');
 require('../../utils/index.js');
 require('../../hooks/index.js');
 require('../index.js');
-var useLocale = require('../../hooks/useLocale.js');
 var useUserAvatarMap = require('../../hooks/useUserAvatarMap.js');
 var adaptive = require('../../utils/adaptive.js');
+var useLocale = require('../../hooks/useLocale.js');
 var index = require('../hyIcon/index.js');
 
 import "./style/userAvatar.scss";
@@ -61,7 +61,6 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const { t } = useLocale.useLocale();
     const { userAvatarMap } = useUserAvatarMap.useUserAvatarMap();
     const isGbDevice = vue.computed(
       () => props.device?.gbDevice === 1 && (props.device?.deviceType || props.device?.type) !== 13
@@ -111,7 +110,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
             headImg.value ? (vue.openBlock(), vue.createElementBlock("img", {
               key: 0,
               src: headImg.value,
-              alt: vue.unref(t)("userAvatar.userAvatar")
+              alt: vue.unref(useLocale.$t)("userAvatar.userAvatar")
             }, null, 8, ["src", "alt"])) : __props.device?.onlineState === 1 ? (vue.openBlock(), vue.createBlock(vue.unref(index.HyIcon), {
               key: 1,
               "svg-name": __props.initSelectSvgName,
@@ -126,9 +125,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
             "span",
             {
               key: 2,
-              class: vue.normalizeClass(
-                __props.device?.onlineState === 1 ? "bg-success shadow-[0_0_4px_0] shadow-success" : "bg-info"
-              )
+              class: vue.normalizeClass(__props.device?.onlineState === 1 ? "bg-success shadow-[0_0_4px_0] shadow-success" : "bg-info")
             },
             null,
             2

package/lib/components/hyVideoPlayer/js/index.js

@@ -6,8 +6,8 @@ require('dayjs');
 require('../../../hooks/index.js');
 require('../../../utils/index.js');
 require('../../index.js');
-var useLocale = require('../../../hooks/useLocale.js');
 var useVideoPlayerConfig = require('../../../hooks/useVideoPlayerConfig.js');
+var useLocale = require('../../../hooks/useLocale.js');
 var date = require('../../../utils/date.js');
 var is = require('../../../utils/is.js');
 var index = require('../../hyConfirmDialog/index.js');
@@ -15,7 +15,6 @@ var handler = require('../../../utils/handler.js');
 
 const useVideoPlayer = (hy) => {
   const { props, emits, videoRef, videoWrapperRef } = hy;
-  const { t } = useLocale.useLocale();
   const { videoPlayerConfig } = useVideoPlayerConfig.useVideoPlayerConfig();
   const speed = vue.ref(1);
   const playRules = vue.ref(1);
@@ -41,17 +40,17 @@ const useVideoPlayer = (hy) => {
   const playRulesList = [
     {
       value: 1,
-      label: t("videoPlayer.stopAfterPlayback"),
+      label: useLocale.$t("videoPlayer.stopAfterPlayback"),
       svgName: "ops-audio-media-center-stop-playing"
     },
     {
       value: 2,
-      label: t("videoPlayer.continuousPlayback"),
+      label: useLocale.$t("videoPlayer.continuousPlayback"),
       svgName: "ops-audio-media-center-autoplay"
     },
     {
       value: 3,
-      label: t("videoPlayer.loopPlayback"),
+      label: useLocale.$t("videoPlayer.loopPlayback"),
       svgName: "ops-audio-media-center-loop-playback"
     }
   ];
@@ -60,7 +59,7 @@ const useVideoPlayer = (hy) => {
   });
   const speedLabel = vue.computed(() => {
     if (speed.value === 1) {
-      return t("videoPlayer.multiples");
+      return useLocale.$t("videoPlayer.multiples");
     } else {
       return speedList.find((item) => item.value === speed.value).label;
     }
@@ -190,15 +189,13 @@ const useVideoPlayer = (hy) => {
   }
   function playPrevious() {
     if (props.type === "default") {
-      const index = props.playList.findIndex(
-        (item) => item.id === videoItem.value.id
-      );
+      const index = props.playList.findIndex((item) => item.id === videoItem.value.id);
       if (index > 0 && index !== props.playList.length) {
         const item = props.playList[index - 1];
         playVideo(item.filePath, item);
         emits("play-previous");
       } else {
-        elementPlus.ElMessage.warning(t("videoPlayer.currentIsTheFirstItem"));
+        elementPlus.ElMessage.warning(useLocale.$t("videoPlayer.currentIsTheFirstItem"));
       }
     } else if (isAnalyseType.value) {
       if (!isCanPlay.value) return;
@@ -207,15 +204,13 @@ const useVideoPlayer = (hy) => {
   }
   function playNext() {
     if (props.type === "default") {
-      const index = props.playList.findIndex(
-        (item) => item.id === videoItem.value.id
-      );
+      const index = props.playList.findIndex((item) => item.id === videoItem.value.id);
       if (index !== props.playList.length - 1) {
         const item = props.playList[index + 1];
         playVideo(item.filePath, item);
         emits("play-next");
       } else {
-        elementPlus.ElMessage.warning(t("videoPlayer.currentIsTheLastItem"));
+        elementPlus.ElMessage.warning(useLocale.$t("videoPlayer.currentIsTheLastItem"));
       }
     } else if (isAnalyseType.value) {
       if (!isCanPlay.value) return;
@@ -320,14 +315,12 @@ const useVideoPlayer = (hy) => {
     const url = `${props.vlcProtocol}:${videoUrl.value}`;
     window.protocolCheck(url, () => {
       hasVLC.value = false;
-      elementPlus.ElMessage.error(t("videoPlayer.notInstallVlcTips"));
+      elementPlus.ElMessage.error(useLocale.$t("videoPlayer.notInstallVlcTips"));
     });
   }
   function downloadVLC() {
     if (!props.vlcAddress) {
-      elementPlus.ElMessage.warning(
-        t("videoPlayer.pleaseConfigureTheAddressForDownloadingVLC")
-      );
+      elementPlus.ElMessage.warning(useLocale.$t("videoPlayer.pleaseConfigureTheAddressForDownloadingVLC"));
       return;
     }
     const newOpenWindow = window.open("about:blank");
@@ -335,16 +328,14 @@ const useVideoPlayer = (hy) => {
       newOpenWindow.location = props.vlcAddress;
     }
     if (newOpenWindow) {
-      elementPlus.ElMessage.success(t("videoPlayer.operationSuccessful"));
+      elementPlus.ElMessage.success(useLocale.$t("videoPlayer.operationSuccessful"));
     } else {
       index.HyConfirmDialog.confirm({
         title: "\u8DF3\u8F6C\u63D0\u793A",
-        content: `<div><p>${t(
-          "videoPlayer.theCurrentBrowserBlocksTheOpeningOfNewWindows"
-        )}</p><p>${t(
+        content: `<div><p>${t("videoPlayer.theCurrentBrowserBlocksTheOpeningOfNewWindows")}</p><p>${t(
           "videoPlayer.pleaseGoToTheBrowserSettingsAndClickOnTheDownloadOrCopyLinkToOpenInTheBrowser"
         )}</p></div>`,
-        submitText: t("videoPlayer.copyLink"),
+        submitText: useLocale.$t("videoPlayer.copyLink"),
         onSubmit: async () => {
           await handler.copyText(props.vlcAddress);
         }