fix: Fix issue where saving throws an error after entering a decimal in frequency access limit (#7997)

Author: zhengkunwang223

frontend/src/directives/index.ts

@@ -0,0 +1,16 @@
+import { App, Directive } from 'vue';
+import integerInput from './modules/integer';
+
+const directivesList: { [key: string]: Directive } = {
+    'integer-input': integerInput,
+};
+
+const directives = {
+    install: function (app: App<Element>) {
+        Object.keys(directivesList).forEach((key) => {
+            app.directive(key, directivesList[key]);
+        });
+    },
+};
+
+export default directives;

frontend/src/directives/modules/integer.ts

@@ -0,0 +1,23 @@
+import type { Directive, DirectiveBinding } from 'vue';
+
+const integerInput: Directive = {
+    mounted(el: HTMLElement, binding: DirectiveBinding) {
+        const { value } = binding;
+        el.addEventListener('input', (event: Event) => {
+            const inputElement = event.target as HTMLInputElement;
+            let inputValue = inputElement.value;
+            inputValue = inputValue.replace(/\..*/, '');
+            if (value?.min !== undefined && Number(inputValue) < value.min) {
+                inputValue = value.min.toString();
+            }
+            if (value?.max !== undefined && Number(inputValue) > value.max) {
+                inputValue = value.max.toString();
+            }
+            inputElement.value = inputValue;
+            const inputEvent = new Event('input', { bubbles: true });
+            inputElement.dispatchEvent(inputEvent);
+        });
+    },
+};
+
+export default integerInput;

frontend/src/main.ts

@@ -28,6 +28,8 @@ import hljsVuePlugin from '@highlightjs/vue-plugin';
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 import VirtualScroller from 'vue-virtual-scroller';
 
+import directives from '@/directives/index';
+
 const app = createApp(App);
 app.use(hljsVuePlugin);
 app.component('SvgIcon', SvgIcon);
@@ -43,4 +45,6 @@ app.use(router);
 app.use(i18n);
 app.use(pinia);
 app.use(Components);
+app.use(directives);
+
 app.mount('#app');

frontend/src/views/host/file-management/process/index.vue

@@ -24,7 +24,7 @@
                         </div>
                         <div class="w-full">
                             <el-progress
-                                v-if="value.total === 0"
+                                v-if="value.total === 0 && value.percent != 100"
                                 :percentage="100"
                                 :indeterminate="true"
                                 :duration="1"