diff --git a/frontend/package.json b/frontend/package.json
index fea747ce8a07..a42c31327d2b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -7,7 +7,8 @@
         "dev": "node --max-old-space-size=8192 ./node_modules/.bin/vite --host",
         "serve": "vite",
         "build:dev": "vite build --mode development",
-        "build:test": "vue-tsc --noEmit && vite build --mode test",
+        "type-check": "node --max-old-space-size=8192 ./node_modules/vue-tsc/bin/vue-tsc.js --noEmit",
+        "build:test": "npm run type-check && vite build --mode test",
         "build:pro": "vite build --mode production",
         "preview": "vite preview",
         "lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
@@ -68,6 +69,7 @@
         "@vitejs/plugin-vue-jsx": "^5.1.1",
         "autoprefixer": "^10.4.7",
         "commitizen": "^4.2.4",
+        "esbuild": "^0.27.3",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^8.10.0",
         "eslint-plugin-prettier": "^4.2.1",
@@ -88,7 +90,6 @@
         "vite-plugin-compression": "^0.5.1",
         "vite-plugin-eslint2": "^5.0.3",
         "vite-plugin-html": "^3.2.2",
-        "vite-plugin-monaco-editor": "^1.1.0",
         "vite-plugin-vue-setup-extend": "^0.4.0",
         "vite-svg-loader": "^5.1.0",
         "vue-tsc": "^0.29.8"
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index 637b730a1a41..7aeb6cef65ca 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -8,8 +8,7 @@ import { MsgError } from '@/utils/message';
 import { Base64 } from 'js-base64';
 import i18n from '@/lang';
 import { changeToLocal } from '@/utils/node';
-import { getCookie } from '@/utils/util';
-
+import { getCookie } from '@/utils/auth';
 const globalStore = GlobalStore();
 
 const config = {
diff --git a/frontend/src/api/modules/alert.ts b/frontend/src/api/modules/alert.ts
index 29c2b76005ce..7b26886f92af 100644
--- a/frontend/src/api/modules/alert.ts
+++ b/frontend/src/api/modules/alert.ts
@@ -1,8 +1,7 @@
 import http from '@/api';
 import { ResPage } from '@/api/interface';
 import { Alert } from '../interface/alert';
-import { deepCopy } from '@/utils/util';
-
+import { deepCopy } from '@/utils/misc';
 export const SearchAlerts = (req: Alert.AlertSearch) => {
     return http.post<ResPage<Alert.AlertInfo>>(`/alert/search`, req);
 };
diff --git a/frontend/src/api/modules/backup.ts b/frontend/src/api/modules/backup.ts
index 6a306be49829..553aa1d9eca6 100644
--- a/frontend/src/api/modules/backup.ts
+++ b/frontend/src/api/modules/backup.ts
@@ -1,5 +1,5 @@
 import http from '@/api';
-import { deepCopy } from '@/utils/util';
+import { deepCopy } from '@/utils/misc';
 import { Base64 } from 'js-base64';
 import { ResPage } from '../interface';
 import { Backup } from '../interface/backup';
diff --git a/frontend/src/api/modules/database.ts b/frontend/src/api/modules/database.ts
index 3dbd356d73e6..0cfe47950fb1 100644
--- a/frontend/src/api/modules/database.ts
+++ b/frontend/src/api/modules/database.ts
@@ -1,5 +1,5 @@
 import http from '@/api';
-import { deepCopy } from '@/utils/util';
+import { deepCopy } from '@/utils/misc';
 import { Base64 } from 'js-base64';
 import { ResPage, DescriptionUpdate } from '../interface';
 import { Database } from '../interface/database';
diff --git a/frontend/src/api/modules/host.ts b/frontend/src/api/modules/host.ts
index e7ac21a055ae..a79096d64fb9 100644
--- a/frontend/src/api/modules/host.ts
+++ b/frontend/src/api/modules/host.ts
@@ -2,7 +2,7 @@ import http from '@/api';
 import { ResPage, ReqPage } from '../interface';
 import { Host } from '../interface/host';
 import { TimeoutEnum } from '@/enums/http-enum';
-import { deepCopy } from '@/utils/util';
+import { deepCopy } from '@/utils/misc';
 import { Base64 } from 'js-base64';
 
 // firewall
diff --git a/frontend/src/api/modules/setting.ts b/frontend/src/api/modules/setting.ts
index df2e1651db78..4d1481fd8397 100644
--- a/frontend/src/api/modules/setting.ts
+++ b/frontend/src/api/modules/setting.ts
@@ -1,5 +1,5 @@
 import http from '@/api';
-import { deepCopy } from '@/utils/util';
+import { deepCopy } from '@/utils/misc';
 import { Base64 } from 'js-base64';
 import { ResPage, SearchWithPage, DescriptionUpdate, ReqPage } from '../interface';
 import { Setting } from '../interface/setting';
diff --git a/frontend/src/api/modules/terminal.ts b/frontend/src/api/modules/terminal.ts
index 428188828f7b..7d95071f8c9a 100644
--- a/frontend/src/api/modules/terminal.ts
+++ b/frontend/src/api/modules/terminal.ts
@@ -2,8 +2,7 @@ import http from '@/api';
 import { ResPage } from '../interface';
 import { Host } from '../interface/host';
 import { Base64 } from 'js-base64';
-import { deepCopy } from '@/utils/util';
-
+import { deepCopy } from '@/utils/misc';
 export const searchHosts = (params: Host.SearchWithPage) => {
     return http.postLocalNode<ResPage<Host.Host>>(`/hosts/search`, params);
 };
diff --git a/frontend/src/api/modules/toolbox.ts b/frontend/src/api/modules/toolbox.ts
index 3eb1744277e7..d4156ed399af 100644
--- a/frontend/src/api/modules/toolbox.ts
+++ b/frontend/src/api/modules/toolbox.ts
@@ -3,8 +3,7 @@ import { ReqPage, ResPage, UpdateByFile } from '../interface';
 import { Toolbox } from '../interface/toolbox';
 import { Base64 } from 'js-base64';
 import { TimeoutEnum } from '@/enums/http-enum';
-import { deepCopy } from '@/utils/util';
-
+import { deepCopy } from '@/utils/misc';
 // device
 export const getDeviceBase = () => {
     return http.post<Toolbox.DeviceBaseInfo>(`/toolbox/device/base`, {}, TimeoutEnum.T_60S);
diff --git a/frontend/src/api/modules/website.ts b/frontend/src/api/modules/website.ts
index 860ec860d1e9..08de4f23aa90 100644
--- a/frontend/src/api/modules/website.ts
+++ b/frontend/src/api/modules/website.ts
@@ -3,7 +3,7 @@ import { ReqPage, ResPage } from '../interface';
 import { Website } from '../interface/website';
 import { File } from '../interface/file';
 import { TimeoutEnum } from '@/enums/http-enum';
-import { deepCopy } from '@/utils/util';
+import { deepCopy } from '@/utils/misc';
 import { Base64 } from 'js-base64';
 
 export const searchWebsites = (req: Website.WebSiteSearch, node?: string) => {
diff --git a/frontend/src/components/backup/index.vue b/frontend/src/components/backup/index.vue
index d684d2ed83ab..7f834f7cfe29 100644
--- a/frontend/src/components/backup/index.vue
+++ b/frontend/src/components/backup/index.vue
@@ -173,7 +173,11 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
-import { computeSize, dateFormat, downloadFile, newUUID, transferTimeToSecond } from '@/utils/util';
+import { computeSize } from '@/utils/size';
+import { dateFormat } from '@/utils/date';
+import { downloadFile } from '@/utils/file';
+import { newUUID } from '@/utils/id';
+import { transferTimeToSecond } from '@/utils/validate';
 import {
     getLocalBackupDir,
     handleBackup,
diff --git a/frontend/src/components/copy-button/index.vue b/frontend/src/components/copy-button/index.vue
index f7e9e0c36107..9a0b343725f0 100644
--- a/frontend/src/components/copy-button/index.vue
+++ b/frontend/src/components/copy-button/index.vue
@@ -4,7 +4,7 @@
 </template>
 
 <script lang="ts" setup>
-import { copyText } from '@/utils/util';
+import { copyText } from '@/utils/clipboard';
 defineOptions({ name: 'CopyButton' });
 
 defineProps({
diff --git a/frontend/src/components/error-message/err_domain.vue b/frontend/src/components/error-message/err_domain.vue
index bf66f0c38fc8..819e9e69ad79 100644
--- a/frontend/src/components/error-message/err_domain.vue
+++ b/frontend/src/components/error-message/err_domain.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts" name="404">
-import { copyText } from '@/utils/util';
+import { copyText } from '@/utils/clipboard';
 </script>
 
 <style scoped lang="scss">
diff --git a/frontend/src/components/error-message/err_ip.vue b/frontend/src/components/error-message/err_ip.vue
index 31908f1d0fed..188a836338d9 100644
--- a/frontend/src/components/error-message/err_ip.vue
+++ b/frontend/src/components/error-message/err_ip.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts" name="404">
-import { copyText } from '@/utils/util';
+import { copyText } from '@/utils/clipboard';
 </script>
 
 <style scoped lang="scss">
diff --git a/frontend/src/components/error-message/unsafe.vue b/frontend/src/components/error-message/unsafe.vue
index 4eaea371cc7b..e4b78386c002 100644
--- a/frontend/src/components/error-message/unsafe.vue
+++ b/frontend/src/components/error-message/unsafe.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts" name="404">
-import { copyText } from '@/utils/util';
+import { copyText } from '@/utils/clipboard';
 </script>
 
 <style scoped lang="scss">
diff --git a/frontend/src/components/exist-file/index.vue b/frontend/src/components/exist-file/index.vue
index 193db2efec1d..2471dff28ec9 100644
--- a/frontend/src/components/exist-file/index.vue
+++ b/frontend/src/components/exist-file/index.vue
@@ -30,8 +30,7 @@
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { computeSize } from '@/utils/util';
-
+import { computeSize } from '@/utils/size';
 const dialogVisible = ref();
 const existFiles = ref<DialogProps[]>([]);
 
diff --git a/frontend/src/components/file-list/index.vue b/frontend/src/components/file-list/index.vue
index 37a05b402afe..0d2b69b4096d 100644
--- a/frontend/src/components/file-list/index.vue
+++ b/frontend/src/components/file-list/index.vue
@@ -178,8 +178,8 @@ import { nextTick, onUpdated, reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { MsgSuccess, MsgWarning } from '@/utils/message';
 import { useSearchableForSelect } from '@/views/host/file-management/hooks/searchable';
-import { computeSize, debounce } from '@/utils/util';
-
+import { computeSize } from '@/utils/size';
+import { debounce } from '@/utils/misc';
 const data = ref([]);
 const loading = ref(false);
 const paths = ref<string[]>([]);
diff --git a/frontend/src/components/fu/FuInputRwSwitch.vue b/frontend/src/components/fu/FuInputRwSwitch.vue
new file mode 100644
index 000000000000..d33226355ccf
--- /dev/null
+++ b/frontend/src/components/fu/FuInputRwSwitch.vue
@@ -0,0 +1,92 @@
+<template>
+    <div class="fu-input-rw-switch">
+        <div
+            v-if="!isWrite"
+            class="fu-input-rw-switch__read"
+            @click.stop="handleReadClick"
+            @dblclick.stop="handleReadDblClick"
+        >
+            <span class="fu-input-rw-switch__text">{{ displayValue }}</span>
+        </div>
+        <el-input
+            v-else
+            ref="inputRef"
+            v-bind="$attrs"
+            :model-value="modelValue"
+            @update:model-value="handleUpdate"
+            @input="handleInput"
+            @blur="handleBlur"
+            @keyup.enter="handleEnter"
+            @click.stop
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+
+defineOptions({ name: 'FuInputRwSwitch', inheritAttrs: false });
+
+const props = defineProps({
+    modelValue: {
+        type: [String, Number],
+        default: '',
+    },
+    writeTrigger: {
+        type: String,
+        default: 'onClick',
+    },
+});
+
+const emit = defineEmits(['update:modelValue', 'input', 'blur', 'enter']);
+
+const inputRef = ref();
+const isWrite = ref(false);
+
+const displayValue = computed(() => {
+    return props.modelValue === '' || props.modelValue === undefined || props.modelValue === null
+        ? '-'
+        : String(props.modelValue);
+});
+
+const openWrite = async () => {
+    isWrite.value = true;
+    await nextTick();
+    inputRef.value?.focus?.();
+    inputRef.value?.select?.();
+};
+
+const closeWrite = () => {
+    isWrite.value = false;
+};
+
+const handleReadClick = () => {
+    if (props.writeTrigger === 'onClick') {
+        openWrite();
+    }
+};
+
+const handleReadDblClick = () => {
+    if (props.writeTrigger === 'onDblclick') {
+        openWrite();
+    }
+};
+
+const handleUpdate = (value: string | number) => {
+    emit('update:modelValue', value);
+};
+
+const handleInput = (value: string) => {
+    emit('input', value);
+};
+
+const handleBlur = (event: FocusEvent) => {
+    emit('blur', event);
+    closeWrite();
+};
+
+const handleEnter = (event: KeyboardEvent) => {
+    emit('enter', event);
+    closeWrite();
+};
+</script>
diff --git a/frontend/src/components/fu/FuReadWriteSwitch.vue b/frontend/src/components/fu/FuReadWriteSwitch.vue
new file mode 100644
index 000000000000..e10293514e86
--- /dev/null
+++ b/frontend/src/components/fu/FuReadWriteSwitch.vue
@@ -0,0 +1,76 @@
+<template>
+    <div class="fu-read-write-switch">
+        <div
+            v-if="!isWrite"
+            class="fu-read-write-switch__read"
+            @click.stop="handleReadClick"
+            @dblclick.stop="handleReadDblClick"
+        >
+            <slot name="read" :write="openWrite">
+                <span class="fu-read-write-switch__text">{{ displayValue }}</span>
+            </slot>
+        </div>
+        <div v-else class="fu-read-write-switch__write" @click.stop>
+            <slot :read="closeWrite"></slot>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+defineOptions({ name: 'FuReadWriteSwitch' });
+
+const props = defineProps({
+    modelValue: {
+        type: [String, Number, Boolean, Object, Array],
+        default: '',
+    },
+    data: {
+        type: [String, Number, Boolean, Object, Array],
+        default: '',
+    },
+    writeTrigger: {
+        type: String,
+        default: 'onClick',
+    },
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const isWrite = ref(false);
+
+const displayValue = computed(() => {
+    const value = props.modelValue !== '' && props.modelValue !== undefined ? props.modelValue : props.data;
+    return value === '' || value === undefined || value === null ? '-' : String(value);
+});
+
+const openWrite = () => {
+    isWrite.value = true;
+};
+
+const closeWrite = (value?: any) => {
+    if (value !== undefined) {
+        emit('update:modelValue', value);
+        emit('change', value);
+    }
+    isWrite.value = false;
+};
+
+const handleReadClick = () => {
+    if (props.writeTrigger === 'onClick') {
+        openWrite();
+    }
+};
+
+const handleReadDblClick = () => {
+    if (props.writeTrigger === 'onDblclick') {
+        openWrite();
+    }
+};
+
+defineExpose({
+    write: openWrite,
+    read: closeWrite,
+});
+</script>
diff --git a/frontend/src/components/fu/FuSelectRwSwitch.vue b/frontend/src/components/fu/FuSelectRwSwitch.vue
new file mode 100644
index 000000000000..8ac5a94e64b0
--- /dev/null
+++ b/frontend/src/components/fu/FuSelectRwSwitch.vue
@@ -0,0 +1,104 @@
+<template>
+    <div class="fu-select-rw-switch">
+        <div
+            v-if="!isWrite"
+            class="fu-select-rw-switch__read"
+            @click.stop="handleReadClick"
+            @dblclick.stop="handleReadDblClick"
+        >
+            <slot name="read">
+                <span class="fu-select-rw-switch__text">{{ displayValue }}</span>
+            </slot>
+        </div>
+        <el-select
+            v-else
+            ref="selectRef"
+            v-bind="$attrs"
+            :model-value="modelValue"
+            @update:model-value="handleUpdate"
+            @change="handleChange"
+            @blur="handleBlur"
+            @visible-change="handleVisibleChange"
+            @click.stop
+        >
+            <slot></slot>
+        </el-select>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+
+defineOptions({ name: 'FuSelectRwSwitch', inheritAttrs: false });
+
+const props = defineProps({
+    modelValue: {
+        type: [String, Number, Boolean],
+        default: '',
+    },
+    blurTime: {
+        type: Number,
+        default: 150,
+    },
+    writeTrigger: {
+        type: String,
+        default: 'onClick',
+    },
+});
+
+const emit = defineEmits(['update:modelValue', 'input', 'blur', 'change']);
+
+const selectRef = ref();
+const isWrite = ref(false);
+
+const displayValue = computed(() => {
+    return props.modelValue === '' || props.modelValue === undefined || props.modelValue === null
+        ? '-'
+        : String(props.modelValue);
+});
+
+const openWrite = async () => {
+    isWrite.value = true;
+    await nextTick();
+    selectRef.value?.focus?.();
+};
+
+const closeWrite = () => {
+    window.setTimeout(() => {
+        isWrite.value = false;
+    }, props.blurTime);
+};
+
+const handleReadClick = () => {
+    if (props.writeTrigger === 'onClick') {
+        openWrite();
+    }
+};
+
+const handleReadDblClick = () => {
+    if (props.writeTrigger === 'onDblclick') {
+        openWrite();
+    }
+};
+
+const handleUpdate = (value: string | number | boolean) => {
+    emit('update:modelValue', value);
+    emit('input', value);
+};
+
+const handleChange = (value: string | number | boolean) => {
+    emit('change', value);
+    closeWrite();
+};
+
+const handleBlur = (event: FocusEvent) => {
+    emit('blur', event);
+    closeWrite();
+};
+
+const handleVisibleChange = (visible: boolean) => {
+    if (!visible) {
+        closeWrite();
+    }
+};
+</script>
diff --git a/frontend/src/components/fu/FuStep.ts b/frontend/src/components/fu/FuStep.ts
new file mode 100644
index 000000000000..a62ce7633384
--- /dev/null
+++ b/frontend/src/components/fu/FuStep.ts
@@ -0,0 +1,18 @@
+import { defineComponent, h } from 'vue';
+
+export default defineComponent({
+    name: 'FuStep',
+    props: {
+        id: {
+            type: String,
+            default: '',
+        },
+        title: {
+            type: String,
+            default: '',
+        },
+    },
+    setup(_props, { slots }) {
+        return () => h('div', slots.default?.());
+    },
+});
diff --git a/frontend/src/components/fu/FuSteps.ts b/frontend/src/components/fu/FuSteps.ts
new file mode 100644
index 000000000000..34bf60e97c23
--- /dev/null
+++ b/frontend/src/components/fu/FuSteps.ts
@@ -0,0 +1,213 @@
+import { computed, defineComponent, h, ref, watch, type PropType, type VNode } from 'vue';
+
+import { flattenVNodes, getVNodeComponentName } from './shared';
+
+interface FuStepItem {
+    id: string;
+    index: number;
+    title: string;
+    vnode: VNode;
+}
+
+const buildStepChildren = (vnode: VNode) => {
+    const children = vnode.children as Record<string, (() => VNode[]) | undefined> | null;
+    return children?.default?.() || [];
+};
+
+export default defineComponent({
+    name: 'FuSteps',
+    props: {
+        active: {
+            type: Number,
+            default: 0,
+        },
+        direction: {
+            type: String,
+            default: 'horizontal',
+        },
+        space: {
+            type: Number,
+            default: 0,
+        },
+        isLoading: {
+            type: Boolean,
+            default: false,
+        },
+        finishButtonText: {
+            type: String,
+            default: '',
+        },
+        beforeLeave: {
+            type: Function as PropType<
+                (step: { id: string; index: number; title: string }) => boolean | Promise<boolean>
+            >,
+            default: undefined,
+        },
+    },
+    emits: ['change'],
+    setup(props, { emit, slots, expose }) {
+        const activeIndex = ref(props.active);
+        const isRunningBeforeLeave = ref(false);
+
+        const stepItems = computed<FuStepItem[]>(() =>
+            flattenVNodes(slots.default?.() || [])
+                .filter((vnode) => getVNodeComponentName(vnode) === 'FuStep')
+                .map((vnode, index) => {
+                    const vnodeProps = (vnode.props || {}) as Record<string, any>;
+                    return {
+                        id: String(vnodeProps.id || index),
+                        index,
+                        title: String(vnodeProps.title || ''),
+                        vnode,
+                    };
+                }),
+        );
+
+        const emitChange = () => {
+            const currentStep = stepItems.value[activeIndex.value];
+            if (!currentStep) {
+                return;
+            }
+            emit('change', {
+                id: currentStep.id,
+                index: currentStep.index,
+                title: currentStep.title,
+            });
+        };
+
+        watch(
+            () => props.active,
+            (value) => {
+                activeIndex.value = value;
+            },
+        );
+
+        watch(
+            stepItems,
+            (items) => {
+                if (items.length === 0) {
+                    activeIndex.value = 0;
+                    return;
+                }
+                if (activeIndex.value > items.length - 1) {
+                    activeIndex.value = items.length - 1;
+                }
+                emitChange();
+            },
+            { immediate: true, deep: true },
+        );
+
+        const runBeforeLeave = async () => {
+            if (!props.beforeLeave) {
+                return true;
+            }
+            const currentStep = stepItems.value[activeIndex.value];
+            if (!currentStep) {
+                return true;
+            }
+            if (isRunningBeforeLeave.value) {
+                return true;
+            }
+            isRunningBeforeLeave.value = true;
+            try {
+                return (
+                    (await props.beforeLeave({
+                        id: currentStep.id,
+                        index: currentStep.index,
+                        title: currentStep.title,
+                    })) !== false
+                );
+            } finally {
+                isRunningBeforeLeave.value = false;
+            }
+        };
+
+        const changeTo = async (nextIndex: number, runGuard = true) => {
+            if (nextIndex < 0 || nextIndex >= stepItems.value.length || nextIndex === activeIndex.value) {
+                return false;
+            }
+            const currentIndex = activeIndex.value;
+            if (runGuard) {
+                const canLeave = await runBeforeLeave();
+                if (activeIndex.value !== currentIndex) {
+                    return true;
+                }
+                if (!canLeave) {
+                    return false;
+                }
+            }
+            activeIndex.value = nextIndex;
+            emitChange();
+            return true;
+        };
+
+        const next = async () => {
+            if (isRunningBeforeLeave.value) {
+                const nextIndex = Math.min(activeIndex.value + 1, stepItems.value.length - 1);
+                if (nextIndex !== activeIndex.value) {
+                    activeIndex.value = nextIndex;
+                    emitChange();
+                }
+                return true;
+            }
+            return changeTo(activeIndex.value + 1, true);
+        };
+
+        const prev = async () => {
+            return changeTo(activeIndex.value - 1, false);
+        };
+
+        expose({
+            next,
+            prev,
+            active: activeIndex,
+        });
+
+        return () => {
+            const currentStep = stepItems.value[activeIndex.value];
+            return h('div', { class: ['fu-steps', `fu-steps--${props.direction}`] }, [
+                h(
+                    'div',
+                    {
+                        class: 'fu-steps__nav',
+                        style: props.direction === 'vertical' && props.space ? { gap: `${props.space}px` } : undefined,
+                    },
+                    stepItems.value.map((step, index) =>
+                        h(
+                            'button',
+                            {
+                                key: step.id,
+                                class: [
+                                    'fu-steps__item',
+                                    {
+                                        'is-active': index === activeIndex.value,
+                                        'is-finished': index < activeIndex.value,
+                                    },
+                                ],
+                                type: 'button',
+                                disabled: props.isLoading,
+                                onClick: () => changeTo(step.index, step.index > activeIndex.value),
+                            },
+                            [
+                                h('span', { class: 'fu-steps__index' }, index + 1),
+                                h('span', { class: 'fu-steps__title' }, step.title),
+                            ],
+                        ),
+                    ),
+                ),
+                h('div', { class: 'fu-steps__content' }, currentStep ? buildStepChildren(currentStep.vnode) : []),
+                slots.footer
+                    ? h(
+                          'div',
+                          { class: 'fu-steps__footer' },
+                          slots.footer({
+                              active: currentStep,
+                              next,
+                              prev,
+                          }),
+                      )
+                    : null,
+            ]);
+        };
+    },
+});
diff --git a/frontend/src/components/fu/FuTable.ts b/frontend/src/components/fu/FuTable.ts
new file mode 100644
index 000000000000..7ce6b998de4c
--- /dev/null
+++ b/frontend/src/components/fu/FuTable.ts
@@ -0,0 +1,213 @@
+import { ElTable } from 'element-plus';
+import { computed, defineComponent, h, onMounted, ref, watch, type PropType, type VNode } from 'vue';
+
+import {
+    FU_TABLE_STORAGE_PREFIX,
+    flattenVNodes,
+    isElTableColumnVNode,
+    type FuTableColumnConfig,
+    updateArrayInPlace,
+} from './shared';
+
+const buildColumnKey = (vnode: VNode, index: number) => {
+    const props = (vnode.props || {}) as Record<string, any>;
+    return String(props.columnKey || props.prop || props.label || `column-${index}`);
+};
+
+const buildColumnConfig = (vnode: VNode, index: number): FuTableColumnConfig => {
+    const props = (vnode.props || {}) as Record<string, any>;
+    return {
+        key: buildColumnKey(vnode, index),
+        label: String(props.label || props.prop || `column-${index}`),
+        prop: props.prop,
+        show: true,
+        fixed: props.fixed ?? props.fix,
+    };
+};
+
+const isConfigurableColumn = (vnode: VNode) => {
+    if (!isElTableColumnVNode(vnode)) {
+        return false;
+    }
+    const props = (vnode.props || {}) as Record<string, any>;
+    if (['selection', 'index', 'expand'].includes(props.type)) {
+        return false;
+    }
+    return Boolean(props.label || props.prop);
+};
+
+export default defineComponent({
+    name: 'FuTable',
+    props: {
+        columns: {
+            type: Array as PropType<FuTableColumnConfig[]>,
+            default: undefined,
+        },
+        localKey: {
+            type: String,
+            default: '',
+        },
+        refresh: {
+            type: Boolean,
+            default: true,
+        },
+        refTable: {
+            type: Object as PropType<{ value?: unknown } | null>,
+            default: null,
+        },
+    },
+    setup(props, { attrs, slots, expose }) {
+        const refElTable = ref();
+        const storageLoaded = ref(false);
+        const storedColumns = ref<FuTableColumnConfig[]>([]);
+
+        const slotChildren = computed(() => flattenVNodes(slots.default?.() || []));
+
+        const slotColumns = computed(() =>
+            slotChildren.value.filter(isConfigurableColumn).map((vnode, index) => buildColumnConfig(vnode, index)),
+        );
+
+        const ensureStoredColumns = () => {
+            if (storageLoaded.value || !props.localKey || typeof window === 'undefined') {
+                storageLoaded.value = true;
+                return;
+            }
+            storageLoaded.value = true;
+            try {
+                const raw = localStorage.getItem(`${FU_TABLE_STORAGE_PREFIX}${props.localKey}`);
+                if (!raw) {
+                    return;
+                }
+                const parsed = JSON.parse(raw);
+                if (Array.isArray(parsed)) {
+                    storedColumns.value = parsed;
+                }
+            } catch {
+                storedColumns.value = [];
+            }
+        };
+
+        const syncColumns = (nextColumns: FuTableColumnConfig[]) => {
+            if (!props.columns) {
+                return;
+            }
+            ensureStoredColumns();
+            const currentColumns = props.columns as FuTableColumnConfig[];
+            const sourceColumns = currentColumns.length > 0 ? currentColumns : storedColumns.value;
+            const sourceByKey = new Map(sourceColumns.map((column) => [column.key, column]));
+            const sourceOrder = new Map(sourceColumns.map((column, index) => [column.key, index]));
+
+            const mergedColumns = nextColumns
+                .map((column, index) => ({
+                    ...column,
+                    show: sourceByKey.get(column.key)?.show ?? true,
+                    fixed: sourceByKey.get(column.key)?.fixed ?? column.fixed,
+                    __order: sourceOrder.get(column.key) ?? index,
+                }))
+                .sort((a, b) => a.__order - b.__order)
+                .map((column) => {
+                    const normalizedColumn = { ...column };
+                    delete (normalizedColumn as Partial<typeof normalizedColumn> & { __order?: number }).__order;
+                    return normalizedColumn;
+                });
+
+            updateArrayInPlace(currentColumns, mergedColumns);
+        };
+
+        const resolvedColumns = computed(() => {
+            if (props.columns && props.columns.length > 0) {
+                return props.columns;
+            }
+            if (storedColumns.value.length > 0) {
+                const storageMap = new Map(storedColumns.value.map((column) => [column.key, column]));
+                const orderMap = new Map(storedColumns.value.map((column, index) => [column.key, index]));
+                return [...slotColumns.value]
+                    .map((column, index) => ({
+                        ...column,
+                        show: storageMap.get(column.key)?.show ?? true,
+                        __order: orderMap.get(column.key) ?? index,
+                    }))
+                    .sort((a, b) => a.__order - b.__order)
+                    .map((column) => {
+                        const normalizedColumn = { ...column };
+                        delete (normalizedColumn as Partial<typeof normalizedColumn> & { __order?: number }).__order;
+                        return normalizedColumn;
+                    });
+            }
+            return slotColumns.value;
+        });
+
+        const orderedConfigurableChildren = computed(() => {
+            const columnNodeMap = new Map(
+                slotChildren.value
+                    .filter(isConfigurableColumn)
+                    .map((vnode, index) => [buildColumnKey(vnode, index), vnode]),
+            );
+            return resolvedColumns.value
+                .filter((column) => column.show !== false)
+                .map((column) => columnNodeMap.get(column.key))
+                .filter((column): column is VNode => Boolean(column));
+        });
+
+        const renderedChildren = computed(() => {
+            if (orderedConfigurableChildren.value.length === 0) {
+                return slotChildren.value;
+            }
+            const children: VNode[] = [];
+            let hasInsertedConfigurableColumns = false;
+            for (const child of slotChildren.value) {
+                if (isConfigurableColumn(child)) {
+                    if (!hasInsertedConfigurableColumns) {
+                        children.push(...orderedConfigurableChildren.value);
+                        hasInsertedConfigurableColumns = true;
+                    }
+                    continue;
+                }
+                children.push(child);
+            }
+            return children;
+        });
+
+        watch(slotColumns, (nextColumns) => syncColumns(nextColumns), {
+            immediate: true,
+            deep: true,
+        });
+
+        watch(
+            () => props.columns,
+            (nextColumns) => {
+                if (!props.localKey || !nextColumns || typeof window === 'undefined') {
+                    return;
+                }
+                localStorage.setItem(`${FU_TABLE_STORAGE_PREFIX}${props.localKey}`, JSON.stringify(nextColumns));
+            },
+            {
+                deep: true,
+            },
+        );
+
+        onMounted(() => {
+            ensureStoredColumns();
+            if (props.refTable) {
+                props.refTable.value = refElTable.value;
+            }
+        });
+
+        expose({ refElTable });
+
+        return () =>
+            h(
+                ElTable as any,
+                {
+                    ...attrs,
+                    ref: refElTable,
+                    class: ['fu-table', attrs.class],
+                    headerRowClassName: 'fu-table-header',
+                },
+                {
+                    ...slots,
+                    default: () => renderedChildren.value,
+                },
+            );
+    },
+});
diff --git a/frontend/src/components/fu/FuTableColumnSelect.vue b/frontend/src/components/fu/FuTableColumnSelect.vue
new file mode 100644
index 000000000000..c00f6c2d823c
--- /dev/null
+++ b/frontend/src/components/fu/FuTableColumnSelect.vue
@@ -0,0 +1,125 @@
+<template>
+    <div class="fu-search-bar fu-table-column-select">
+        <el-popover
+            v-model:visible="visible"
+            :trigger="trigger"
+            :popper-class="resolvedPopperClass"
+            placement="bottom-end"
+            :width="260"
+        >
+            <template #reference>
+                <el-button class="fu-search-bar-button" :icon="iconComponent" @click.stop>
+                    <span v-if="!onlyIcon">{{ resolvedTitle }}</span>
+                </el-button>
+            </template>
+            <div class="fu-table-column-select__panel" @click.stop>
+                <div class="fu-table-column-select__title">{{ resolvedTitle }}</div>
+                <div ref="listRef" class="fu-table-column-select__list">
+                    <div
+                        v-for="column in columns"
+                        :key="column.key"
+                        class="fu-table-column-select__item"
+                        :data-key="column.key"
+                    >
+                        <el-icon class="fu-table-column-select__drag"><Rank /></el-icon>
+                        <el-checkbox v-model="column.show" :disabled="isFixedColumn(column)">
+                            {{ column.label }}
+                        </el-checkbox>
+                    </div>
+                </div>
+            </div>
+        </el-popover>
+    </div>
+</template>
+
+<script setup lang="ts">
+import Sortable from 'sortablejs';
+import { Rank, Setting } from '@element-plus/icons-vue';
+import { computed, nextTick, onBeforeUnmount, ref, watch, type PropType } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import type { FuTableColumnConfig } from './shared';
+
+defineOptions({ name: 'FuTableColumnSelect' });
+
+const { t } = useI18n();
+
+const props = defineProps({
+    columns: {
+        type: Array as PropType<FuTableColumnConfig[]>,
+        default: () => [],
+    },
+    title: {
+        type: String,
+        default: '',
+    },
+    icon: {
+        type: [String, Object],
+        default: undefined,
+    },
+    onlyIcon: {
+        type: Boolean,
+        default: false,
+    },
+    trigger: {
+        type: String,
+        default: 'click',
+    },
+    popperClass: {
+        type: String,
+        default: '',
+    },
+});
+
+const visible = ref(false);
+const listRef = ref<HTMLElement | null>(null);
+let sortable: Sortable | undefined;
+
+const resolvedTitle = computed(() => props.title || t('fu.table.custom_table_rows'));
+const resolvedPopperClass = computed(() =>
+    ['fu-table-column-select__popover', props.popperClass].filter(Boolean).join(' '),
+);
+const iconComponent = computed(() => props.icon || Setting);
+
+const initSortable = async () => {
+    await nextTick();
+    sortable?.destroy();
+    if (!listRef.value) {
+        return;
+    }
+    sortable = Sortable.create(listRef.value, {
+        animation: 150,
+        handle: '.fu-table-column-select__drag',
+        onEnd: ({ oldIndex, newIndex }) => {
+            if (oldIndex === undefined || newIndex === undefined || oldIndex === newIndex) {
+                return;
+            }
+            const nextColumns = [...props.columns];
+            const [movedColumn] = nextColumns.splice(oldIndex, 1);
+            if (!movedColumn) {
+                return;
+            }
+            nextColumns.splice(newIndex, 0, movedColumn);
+            props.columns.splice(0, props.columns.length, ...nextColumns);
+        },
+    });
+};
+
+const isFixedColumn = (column: FuTableColumnConfig) => {
+    return Boolean(column.fixed);
+};
+
+watch(visible, (value) => {
+    if (value) {
+        initSortable();
+        return;
+    }
+    sortable?.destroy();
+    sortable = undefined;
+});
+
+onBeforeUnmount(() => {
+    sortable?.destroy();
+    sortable = undefined;
+});
+</script>
diff --git a/frontend/src/components/fu/FuTableOperations.vue b/frontend/src/components/fu/FuTableOperations.vue
new file mode 100644
index 000000000000..5c5cdc692f91
--- /dev/null
+++ b/frontend/src/components/fu/FuTableOperations.vue
@@ -0,0 +1,225 @@
+<template>
+    <el-table-column v-bind="$attrs" :label="label" :width="resolvedWidth" :align="align" :fixed="resolvedFixed">
+        <template #default="{ row }">
+            <div class="fu-table-operations" @click.stop>
+                <span
+                    v-for="button in getInlineButtons(row)"
+                    :key="buildButtonKey(button)"
+                    class="fu-table-operations__action"
+                >
+                    <el-button
+                        class="fu-table-operations__button"
+                        link
+                        :type="button.type || 'primary'"
+                        :disabled="isButtonDisabled(button, row)"
+                        @click.stop="handleButtonClick(button, row)"
+                    >
+                        <el-icon v-if="button.icon" class="mr-1">
+                            <component :is="button.icon" />
+                        </el-icon>
+                        <span>{{ button.label }}</span>
+                    </el-button>
+                </span>
+                <span v-if="getMoreButtons(row).length > 0" class="fu-table-operations__action">
+                    <el-dropdown
+                        class="fu-table-more-button"
+                        :trigger="trigger"
+                        @command="(button) => handleButtonClick(button, row)"
+                    >
+                        <span class="fu-table-operations__dropdown-trigger">
+                            <el-button class="fu-table-operations__button" link type="primary" @click.stop>
+                                {{ t('fu.table.more') }}
+                            </el-button>
+                        </span>
+                        <template #dropdown>
+                            <el-dropdown-menu :style="dropdownStyle">
+                                <el-dropdown-item
+                                    v-for="button in getMoreButtons(row)"
+                                    :key="buildButtonKey(button)"
+                                    :command="button"
+                                    :disabled="isButtonDisabled(button, row)"
+                                    :divided="button.divided"
+                                >
+                                    <el-icon v-if="button.icon" class="mr-1">
+                                        <component :is="button.icon" />
+                                    </el-icon>
+                                    <span>{{ button.label }}</span>
+                                </el-dropdown-item>
+                            </el-dropdown-menu>
+                        </template>
+                    </el-dropdown>
+                </span>
+            </div>
+        </template>
+    </el-table-column>
+</template>
+
+<script setup lang="ts">
+import { computed, type PropType } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { resolveMaybeFn, type FuTableOperationButton } from './shared';
+
+defineOptions({ name: 'FuTableOperations' });
+
+const { t } = useI18n();
+
+const normalizeWidth = (value?: string | number) => {
+    if (value === undefined || value === null || value === '') {
+        return undefined;
+    }
+    if (typeof value === 'number') {
+        return value;
+    }
+    const trimmed = value.trim();
+    if (!trimmed || trimmed === 'auto') {
+        return undefined;
+    }
+    return trimmed;
+};
+
+const props = defineProps({
+    buttons: {
+        type: Array as PropType<FuTableOperationButton[]>,
+        default: () => [],
+    },
+    label: {
+        type: String,
+        default: '',
+    },
+    width: {
+        type: [Number, String],
+        default: undefined,
+    },
+    minWidth: {
+        type: [Number, String],
+        default: undefined,
+    },
+    align: {
+        type: String,
+        default: 'center',
+    },
+    ellipsis: {
+        type: Number,
+        default: 2,
+    },
+    trigger: {
+        type: String,
+        default: 'hover',
+    },
+    fixed: {
+        type: [Boolean, String],
+        default: undefined,
+    },
+    fix: {
+        type: [Boolean, String],
+        default: undefined,
+    },
+    maxHeight: {
+        type: [Number, String],
+        default: undefined,
+    },
+});
+
+const resolvedFixed = computed(() => {
+    if (props.fixed !== undefined) {
+        return props.fixed;
+    }
+    if (typeof props.fix === 'string') {
+        return props.fix;
+    }
+    return props.fix ? 'right' : false;
+});
+
+const hasDynamicShow = computed(() => {
+    return props.buttons.some((button) => typeof button.show === 'function');
+});
+
+const staticVisibleCount = computed(() => {
+    return props.buttons.filter((button) => button.show !== false).length;
+});
+
+const hasMoreStatic = computed(() => {
+    return staticVisibleCount.value > props.ellipsis + 1;
+});
+
+const estimatedButtonCount = computed(() => {
+    if (staticVisibleCount.value === 0) {
+        return 0;
+    }
+    if (props.ellipsis <= 0) {
+        return 1;
+    }
+    if (hasDynamicShow.value || hasMoreStatic.value) {
+        return props.ellipsis + 1;
+    }
+    return staticVisibleCount.value;
+});
+
+const estimatedWidth = computed(() => {
+    const buttonCount = Math.max(estimatedButtonCount.value, 1);
+    const buttonsWidth = 24 + buttonCount * 56 + Math.max(buttonCount - 1, 0) * 5;
+    const minWidth = normalizeWidth(props.minWidth);
+    if (typeof minWidth === 'number') {
+        return Math.max(buttonsWidth, minWidth);
+    }
+    if (typeof minWidth === 'string') {
+        const parsed = Number(minWidth.replace('px', ''));
+        if (!Number.isNaN(parsed)) {
+            return Math.max(buttonsWidth, parsed);
+        }
+    }
+    return buttonsWidth;
+});
+
+const resolvedWidth = computed(() => {
+    return normalizeWidth(props.width) ?? estimatedWidth.value;
+});
+
+const dropdownStyle = computed(() => {
+    if (props.maxHeight === undefined || props.maxHeight === null || props.maxHeight === '') {
+        return undefined;
+    }
+    const maxHeight = typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight;
+    return {
+        maxHeight,
+        overflowY: 'auto',
+    };
+});
+
+const getVisibleButtons = (row: any) => {
+    return props.buttons.filter((button) => resolveMaybeFn(button.show ?? true, row));
+};
+
+const hasMore = (row: any) => {
+    return getVisibleButtons(row).length > props.ellipsis + 1;
+};
+
+const getInlineButtons = (row: any) => {
+    const visibleButtons = getVisibleButtons(row);
+    if (props.ellipsis <= 0) {
+        return [];
+    }
+    return hasMore(row) ? visibleButtons.slice(0, props.ellipsis) : visibleButtons;
+};
+
+const getMoreButtons = (row: any) => {
+    const visibleButtons = getVisibleButtons(row);
+    return hasMore(row) ? visibleButtons.slice(props.ellipsis) : [];
+};
+
+const isButtonDisabled = (button: FuTableOperationButton, row: any) => {
+    return Boolean(resolveMaybeFn(button.disabled ?? false, row));
+};
+
+const handleButtonClick = (button: FuTableOperationButton, row: any) => {
+    if (isButtonDisabled(button, row)) {
+        return;
+    }
+    button.click?.(row);
+};
+
+const buildButtonKey = (button: FuTableOperationButton) => {
+    return String(button.label || button.command || button.type || button.icon?.name || 'button');
+};
+</script>
diff --git a/frontend/src/components/fu/FuTablePagination.vue b/frontend/src/components/fu/FuTablePagination.vue
new file mode 100644
index 000000000000..3ad6900405d8
--- /dev/null
+++ b/frontend/src/components/fu/FuTablePagination.vue
@@ -0,0 +1,51 @@
+<template>
+    <el-pagination
+        v-bind="$attrs"
+        class="fu-table-pagination"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        :page-sizes="pageSizes"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+    />
+</template>
+
+<script setup lang="ts">
+import { type PropType } from 'vue';
+
+defineOptions({ name: 'FuTablePagination' });
+
+const props = defineProps({
+    currentPage: {
+        type: Number,
+        default: 1,
+    },
+    pageSize: {
+        type: Number,
+        default: 10,
+    },
+    pageSizes: {
+        type: Array as PropType<number[]>,
+        default: () => [10, 20, 50, 100],
+    },
+    total: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const emit = defineEmits(['update:pageSize', 'update:currentPage', 'size-change', 'current-change', 'change']);
+
+const handleSizeChange = (pageSize: number) => {
+    emit('update:pageSize', pageSize);
+    emit('size-change', pageSize);
+    emit('change', { currentPage: props.currentPage, pageSize });
+};
+
+const handleCurrentChange = (currentPage: number) => {
+    emit('update:currentPage', currentPage);
+    emit('current-change', currentPage);
+    emit('change', { currentPage, pageSize: props.pageSize });
+};
+</script>
diff --git a/frontend/src/components/fu/__compat-smoke__.ts b/frontend/src/components/fu/__compat-smoke__.ts
new file mode 100644
index 000000000000..e206e42101d8
--- /dev/null
+++ b/frontend/src/components/fu/__compat-smoke__.ts
@@ -0,0 +1,3 @@
+import FuCompatComponents from '@/components/fu';
+
+void FuCompatComponents;
diff --git a/frontend/src/components/fu/index.ts b/frontend/src/components/fu/index.ts
new file mode 100644
index 000000000000..e2ab9f74c248
--- /dev/null
+++ b/frontend/src/components/fu/index.ts
@@ -0,0 +1,31 @@
+import { type App } from 'vue';
+
+import FuInputRwSwitch from './FuInputRwSwitch.vue';
+import FuReadWriteSwitch from './FuReadWriteSwitch.vue';
+import FuSelectRwSwitch from './FuSelectRwSwitch.vue';
+import FuStep from './FuStep';
+import FuSteps from './FuSteps';
+import FuTable from './FuTable';
+import FuTableColumnSelect from './FuTableColumnSelect.vue';
+import FuTableOperations from './FuTableOperations.vue';
+import FuTablePagination from './FuTablePagination.vue';
+
+const components = [
+    FuTable,
+    FuTableOperations,
+    FuTablePagination,
+    FuInputRwSwitch,
+    FuReadWriteSwitch,
+    FuSelectRwSwitch,
+    FuSteps,
+    FuStep,
+    FuTableColumnSelect,
+];
+
+export default {
+    install(app: App) {
+        components.forEach((component) => {
+            app.component((component as any).name, component as any);
+        });
+    },
+};
diff --git a/frontend/src/components/fu/shared.ts b/frontend/src/components/fu/shared.ts
new file mode 100644
index 000000000000..e612a3065ad1
--- /dev/null
+++ b/frontend/src/components/fu/shared.ts
@@ -0,0 +1,68 @@
+import { Comment, Fragment, Text, type VNode } from 'vue';
+
+export interface FuTableColumnConfig {
+    key: string;
+    label: string;
+    prop?: string;
+    show: boolean;
+    fixed?: boolean | string;
+}
+
+export interface FuTableOperationButton {
+    label?: string | number;
+    click?: (row: any) => void;
+    disabled?: boolean | ((row: any) => boolean);
+    show?: boolean | ((row: any) => boolean);
+    type?: string;
+    icon?: any;
+    divided?: boolean;
+    [key: string]: any;
+}
+
+export const FU_TABLE_STORAGE_PREFIX = 'FU-T-';
+
+export const flattenVNodes = (nodes: VNode[] = []): VNode[] => {
+    const flattened: VNode[] = [];
+    for (const node of nodes) {
+        if (!node) {
+            continue;
+        }
+        if (Array.isArray(node)) {
+            flattened.push(...flattenVNodes(node));
+            continue;
+        }
+        if (node.type === Fragment) {
+            flattened.push(...flattenVNodes((node.children as VNode[]) || []));
+            continue;
+        }
+        if (node.type === Comment || node.type === Text) {
+            continue;
+        }
+        flattened.push(node);
+    }
+    return flattened;
+};
+
+export const getVNodeComponentName = (vnode: VNode) => {
+    const type = vnode.type as any;
+    return type?.name || type?.__name || type;
+};
+
+export const isElTableColumnVNode = (vnode: VNode) => {
+    const type = vnode.type as any;
+    return type === 'el-table-column' || type?.name === 'ElTableColumn' || type?.__name === 'ElTableColumn';
+};
+
+export const resolveMaybeFn = <T, R>(value: R | ((row: T) => R), row: T): R => {
+    if (typeof value === 'function') {
+        return (value as (row: T) => R)(row);
+    }
+    return value;
+};
+
+export const updateArrayInPlace = <T>(target: T[], next: T[]) => {
+    if (target.length === next.length && target.every((item, index) => item === next[index])) {
+        return;
+    }
+    target.splice(0, target.length, ...next);
+};
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index 5be84de6137e..353cd695840d 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -10,8 +10,10 @@ import CopyButton from '@/components/copy-button/index.vue';
 import MsgInfo from '@/components/msg-info/index.vue';
 import DrawerPro from '@/components/drawer-pro/index.vue';
 import DialogPro from '@/components/dialog-pro/index.vue';
+import FuComponents from '@/components/fu';
 export default {
     install(app: App) {
+        app.use(FuComponents);
         app.component(LayoutContent.name, LayoutContent);
         app.component(RouterButton.name, RouterButton);
         app.component(ComplexTable.name, ComplexTable);
diff --git a/frontend/src/components/input-tag/index.vue b/frontend/src/components/input-tag/index.vue
index b06e26febc33..ab78ebbe7ada 100644
--- a/frontend/src/components/input-tag/index.vue
+++ b/frontend/src/components/input-tag/index.vue
@@ -32,7 +32,7 @@
 
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue';
-import { copyText } from '@/utils/util';
+import { copyText } from '@/utils/clipboard';
 import FileList from '@/components/file-list/index.vue';
 const em = defineEmits(['update:tags']);
 
diff --git a/frontend/src/components/log/container/index.vue b/frontend/src/components/log/container/index.vue
index 31eb21a9f3d6..2f88284b19a0 100644
--- a/frontend/src/components/log/container/index.vue
+++ b/frontend/src/components/log/container/index.vue
@@ -75,7 +75,7 @@ import { FitAddon } from '@xterm/addon-fit';
 import { Terminal } from '@xterm/xterm';
 import '@xterm/xterm/css/xterm.css';
 import i18n from '@/lang';
-import { dateFormatForName } from '@/utils/util';
+import { dateFormatForName } from '@/utils/date';
 import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
 import { ElMessageBox } from 'element-plus';
 import { MsgError, MsgSuccess } from '@/utils/message';
diff --git a/frontend/src/components/log/file/index.vue b/frontend/src/components/log/file/index.vue
index 7e8ecd638d0c..5c30a4ee6351 100644
--- a/frontend/src/components/log/file/index.vue
+++ b/frontend/src/components/log/file/index.vue
@@ -50,7 +50,7 @@
 </template>
 <script lang="ts" setup>
 import { nextTick, onMounted, onUnmounted, reactive, ref, computed } from 'vue';
-import { downloadFile } from '@/utils/util';
+import { downloadFile } from '@/utils/file';
 import { readByLine } from '@/api/modules/files';
 import { GlobalStore } from '@/store';
 import bus from '@/global/bus';
diff --git a/frontend/src/components/port-jump/index.vue b/frontend/src/components/port-jump/index.vue
index f47c1cbca7f0..c6a7f3088a9e 100644
--- a/frontend/src/components/port-jump/index.vue
+++ b/frontend/src/components/port-jump/index.vue
@@ -19,7 +19,7 @@ import { ref } from 'vue';
 import { getAgentSettingInfo } from '@/api/modules/setting';
 import i18n from '@/lang';
 import { MsgError, MsgWarning } from '@/utils/message';
-import { jumpToPath } from '@/utils/util';
+import { jumpToPath } from '@/utils/router';
 import { useRouter } from 'vue-router';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
diff --git a/frontend/src/components/task-list/index.vue b/frontend/src/components/task-list/index.vue
index 1292947fed68..9e90d26442c6 100644
--- a/frontend/src/components/task-list/index.vue
+++ b/frontend/src/components/task-list/index.vue
@@ -50,7 +50,7 @@
 import TaskLog from '@/components/log/task/index.vue';
 import NodeSelect from '@/components/node-select/index.vue';
 
-import { dateFormat } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
 import { searchTasks } from '@/api/modules/log';
 import { reactive, ref } from 'vue';
 import { Log } from '@/api/interface/log';
diff --git a/frontend/src/components/upload/index.vue b/frontend/src/components/upload/index.vue
index 71b42db4e65d..3705be93e006 100644
--- a/frontend/src/components/upload/index.vue
+++ b/frontend/src/components/upload/index.vue
@@ -135,7 +135,9 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
-import { computeSize, newUUID, transferTimeToSecond } from '@/utils/util';
+import { computeSize } from '@/utils/size';
+import { newUUID } from '@/utils/id';
+import { transferTimeToSecond } from '@/utils/validate';
 import i18n from '@/lang';
 import { UploadFile, UploadFiles, UploadInstance, UploadProps, UploadRawFile, genFileId } from 'element-plus';
 import { File } from '@/api/interface/file';
diff --git a/frontend/src/components/v-charts/components/Line.vue b/frontend/src/components/v-charts/components/Line.vue
index 35c9957e22e8..6db8f967cfca 100644
--- a/frontend/src/components/v-charts/components/Line.vue
+++ b/frontend/src/components/v-charts/components/Line.vue
@@ -5,7 +5,7 @@
 import { onMounted, nextTick, watch, onBeforeUnmount, ref } from 'vue';
 import echarts from '@/utils/echarts';
 import { GlobalStore } from '@/store';
-import { computeSizeFromKBs, computeSizeFromKB, computeSizeFromMB } from '@/utils/util';
+import { computeSizeFromKBs, computeSizeFromKB, computeSizeFromMB } from '@/utils/size';
 import i18n from '@/lang';
 const globalStore = GlobalStore();
 const isDarkTheme = ref(false);
diff --git a/frontend/src/lang/fu.ts b/frontend/src/lang/fu.ts
new file mode 100644
index 000000000000..8a2235449edc
--- /dev/null
+++ b/frontend/src/lang/fu.ts
@@ -0,0 +1,148 @@
+type FuLocaleMessage = Record<string, unknown>;
+
+const fuLocales: Record<string, FuLocaleMessage> = {
+    en: {
+        fu: {
+            table: {
+                more: 'More',
+                custom_table_rows: 'Custom columns',
+            },
+            steps: {
+                cancel: 'Cancel',
+                prev: 'Previous',
+                next: 'Next',
+                finish: 'Finish',
+            },
+        },
+    },
+    'es-ES': {
+        fu: {
+            table: {
+                more: 'Más',
+                custom_table_rows: 'Columnas personalizadas',
+            },
+            steps: {
+                cancel: 'Cancelar',
+                prev: 'Anterior',
+                next: 'Siguiente',
+                finish: 'Finalizar',
+            },
+        },
+    },
+    ja: {
+        fu: {
+            table: {
+                more: 'もっと',
+                custom_table_rows: 'カスタム列',
+            },
+            steps: {
+                cancel: 'キャンセル',
+                prev: '前へ',
+                next: '次へ',
+                finish: '完了',
+            },
+        },
+    },
+    ko: {
+        fu: {
+            table: {
+                more: '더보기',
+                custom_table_rows: '사용자 지정 열',
+            },
+            steps: {
+                cancel: '취소',
+                prev: '이전',
+                next: '다음',
+                finish: '완료',
+            },
+        },
+    },
+    ms: {
+        fu: {
+            table: {
+                more: 'Lagi',
+                custom_table_rows: 'Lajur tersuai',
+            },
+            steps: {
+                cancel: 'Batal',
+                prev: 'Sebelumnya',
+                next: 'Seterusnya',
+                finish: 'Selesai',
+            },
+        },
+    },
+    'pt-BR': {
+        fu: {
+            table: {
+                more: 'Mais',
+                custom_table_rows: 'Colunas personalizadas',
+            },
+            steps: {
+                cancel: 'Cancelar',
+                prev: 'Anterior',
+                next: 'Próximo',
+                finish: 'Concluir',
+            },
+        },
+    },
+    ru: {
+        fu: {
+            table: {
+                more: 'Еще',
+                custom_table_rows: 'Настройка колонок',
+            },
+            steps: {
+                cancel: 'Отмена',
+                prev: 'Назад',
+                next: 'Далее',
+                finish: 'Готово',
+            },
+        },
+    },
+    tr: {
+        fu: {
+            table: {
+                more: 'Daha fazla',
+                custom_table_rows: 'Özel sütunlar',
+            },
+            steps: {
+                cancel: 'İptal',
+                prev: 'Önceki',
+                next: 'Sonraki',
+                finish: 'Tamamla',
+            },
+        },
+    },
+    zh: {
+        fu: {
+            table: {
+                more: '更多',
+                custom_table_rows: '自定义列',
+            },
+            steps: {
+                cancel: '取消',
+                prev: '上一步',
+                next: '下一步',
+                finish: '完成',
+            },
+        },
+    },
+    'zh-Hant': {
+        fu: {
+            table: {
+                more: '更多',
+                custom_table_rows: '自訂欄位',
+            },
+            steps: {
+                cancel: '取消',
+                prev: '上一步',
+                next: '下一步',
+                finish: '完成',
+            },
+        },
+    },
+};
+
+export const getFuLocaleMessage = (locale: string) => {
+    return fuLocales[locale] || fuLocales.en;
+};
diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index 29092170c5fb..9d447a6c01bc 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -1,4 +1,4 @@
-import fit2cloudEnLocale from 'fit2cloud-ui-plus/src/locale/lang/en';
+import { getFuLocaleMessage } from '@/lang/fu';
 
 const message = {
     commons: {
@@ -4468,6 +4468,6 @@ const message = {
 };
 
 export default {
-    ...fit2cloudEnLocale,
+    ...getFuLocaleMessage('en'),
     ...message,
 };
diff --git a/frontend/src/lang/modules/es-es.ts b/frontend/src/lang/modules/es-es.ts
index 04592ccb6c2d..3ce4d860f02c 100644
--- a/frontend/src/lang/modules/es-es.ts
+++ b/frontend/src/lang/modules/es-es.ts
@@ -1,4 +1,4 @@
-import fit2cloudEsEsLocale from 'fit2cloud-ui-plus/src/locale/lang/en';
+import { getFuLocaleMessage } from '@/lang/fu';
 
 const message = {
     commons: {
@@ -4413,6 +4413,6 @@ const message = {
 };
 
 export default {
-    ...fit2cloudEsEsLocale,
+    ...getFuLocaleMessage('es-ES'),
     ...message,
 };
diff --git a/frontend/src/lang/modules/ja.ts b/frontend/src/lang/modules/ja.ts
index ae673ab09a05..3f5c78f1cee7 100644
--- a/frontend/src/lang/modules/ja.ts
+++ b/frontend/src/lang/modules/ja.ts
@@ -1,4 +1,4 @@
-import fit2cloudEnLocale from 'fit2cloud-ui-plus/src/locale/lang/ja';
+import { getFuLocaleMessage } from '@/lang/fu';
 
 const message = {
     commons: {
@@ -4409,6 +4409,6 @@ const message = {
     },
 };
 export default {
-    ...fit2cloudEnLocale,
+    ...getFuLocaleMessage('ja'),
     ...message,
 };
diff --git a/frontend/src/lang/modules/ko.ts b/frontend/src/lang/modules/ko.ts
index 56915b2ca122..776744661984 100644
--- a/frontend/src/lang/modules/ko.ts
+++ b/frontend/src/lang/modules/ko.ts
@@ -1,4 +1,4 @@
-import fit2cloudKoLocale from 'fit2cloud-ui-plus/src/locale/lang/en';
+import { getFuLocaleMessage } from '@/lang/fu';
 
 const message = {
     commons: {
@@ -4306,6 +4306,6 @@ const message = {
 };
 
 export default {
-    ...fit2cloudKoLocale,
+    ...getFuLocaleMessage('ko'),
     ...message,
 };
diff --git a/frontend/src/lang/modules/ms.ts b/frontend/src/lang/modules/ms.ts
index 26950cd3f13f..25194a725e4f 100644
--- a/frontend/src/lang/modules/ms.ts
+++ b/frontend/src/lang/modules/ms.ts
@@ -1,4 +1,4 @@
-import fit2cloudEnLocale from 'fit2cloud-ui-plus/src/locale/lang/ms';
+import { getFuLocaleMessage } from '@/lang/fu';
 
 const message = {
     commons: {
@@ -4465,6 +4465,6 @@ const message = {
 };
 
 export default {
-    ...fit2cloudEnLocale,
+    ...getFuLocaleMessage('ms'),
     ...message,
 };
diff --git a/frontend/src/lang/modules/pt-br.ts b/frontend/src/lang/modules/pt-br.ts
index 3cddc5417e99..b9b50296616d 100644
--- a/frontend/src/lang/modules/pt-br.ts
+++ b/frontend/src/lang/modules/pt-br.ts
@@ -1,4 +1,4 @@
-import fit2cloudPtBrLocale from 'fit2cloud-ui-plus/src/locale/lang/pt-br';
+import { getFuLocaleMessage } from '@/lang/fu';
 
 const message = {
     commons: {
@@ -4617,6 +4617,6 @@ const message = {
 };
 
 export default {
-    ...fit2cloudPtBrLocale,
+    ...getFuLocaleMessage('pt-BR'),
     ...message,
 };
diff --git a/frontend/src/lang/modules/ru.ts b/frontend/src/lang/modules/ru.ts
index 2530b81525b5..54ee36fd0383 100644
--- a/frontend/src/lang/modules/ru.ts
+++ b/frontend/src/lang/modules/ru.ts
@@ -1,4 +1,4 @@
-import fit2cloudEnLocale from 'fit2cloud-ui-plus/src/locale/lang/ru';
+import { getFuLocaleMessage } from '@/lang/fu';
 
 const message = {
     commons: {
@@ -4474,6 +4474,6 @@ const message = {
 };
 
 export default {
-    ...fit2cloudEnLocale,
+    ...getFuLocaleMessage('ru'),
     ...message,
 };
diff --git a/frontend/src/lang/modules/tr.ts b/frontend/src/lang/modules/tr.ts
index 56ddd34e8b8d..7c4b20e7171b 100644
--- a/frontend/src/lang/modules/tr.ts
+++ b/frontend/src/lang/modules/tr.ts
@@ -1,4 +1,4 @@
-import fit2cloudEnLocale from 'fit2cloud-ui-plus/src/locale/lang/en';
+import { getFuLocaleMessage } from '@/lang/fu';
 
 const message = {
     commons: {
@@ -4463,6 +4463,6 @@ const message = {
 };
 
 export default {
-    ...fit2cloudEnLocale,
+    ...getFuLocaleMessage('tr'),
     ...message,
 };
diff --git a/frontend/src/lang/modules/zh-Hant.ts b/frontend/src/lang/modules/zh-Hant.ts
index 5a5448c27c70..07ee8f99f118 100644
--- a/frontend/src/lang/modules/zh-Hant.ts
+++ b/frontend/src/lang/modules/zh-Hant.ts
@@ -1,4 +1,4 @@
-import fit2cloudTwLocale from 'fit2cloud-ui-plus/src/locale/lang/zh-tw';
+import { getFuLocaleMessage } from '@/lang/fu';
 
 const message = {
     commons: {
@@ -4067,6 +4067,6 @@ const message = {
     },
 };
 export default {
-    ...fit2cloudTwLocale,
+    ...getFuLocaleMessage('zh-Hant'),
     ...message,
 };
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 6d8953f78bb8..1b1d9727850f 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -1,4 +1,4 @@
-import fit2cloudZhLocale from 'fit2cloud-ui-plus/src/locale/lang/zh-cn';
+import { getFuLocaleMessage } from '@/lang/fu';
 
 const message = {
     commons: {
@@ -4130,6 +4130,6 @@ const message = {
     },
 };
 export default {
-    ...fit2cloudZhLocale,
+    ...getFuLocaleMessage('zh'),
     ...message,
 };
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 7ce413ab89b2..c2e8398d43a5 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,6 +1,10 @@
-import { computed, createApp } from 'vue';
+import { createApp } from 'vue';
 import App from './App.vue';
 
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+import * as Icons from '@element-plus/icons-vue';
+
 import '@/styles/index.scss';
 import '@/styles/common.scss';
 import '@/assets/iconfont/iconfont.css';
@@ -16,10 +20,6 @@ import pinia from '@/store/index';
 import SvgIcon from './components/svg-icon/svg-icon.vue';
 import Components from '@/components';
 
-import ElementPlus from 'element-plus';
-import Fit2CloudPlus from 'fit2cloud-ui-plus';
-import * as Icons from '@element-plus/icons-vue';
-
 import directives from '@/directives/index';
 
 const bootstrap = async () => {
@@ -28,10 +28,8 @@ const bootstrap = async () => {
     await Promise.all([loadLocaleMessages(currentLocale), ensureFallbackLocale()]);
 
     const app = createApp(App);
-    const fit2cloudLocale = computed(() => i18n.global.getLocaleMessage(i18n.global.locale.value));
     app.component('SvgIcon', SvgIcon);
     app.use(ElementPlus);
-    app.use(Fit2CloudPlus, { locale: fit2cloudLocale });
 
     Object.keys(Icons).forEach((key) => {
         app.component(key, Icons[key as keyof typeof Icons]);
diff --git a/frontend/src/styles/fu.scss b/frontend/src/styles/fu.scss
new file mode 100644
index 000000000000..c57fa15149f2
--- /dev/null
+++ b/frontend/src/styles/fu.scss
@@ -0,0 +1,177 @@
+.fu-table {
+    width: 100%;
+}
+
+.fu-table-header {
+    font-weight: 600;
+}
+
+.fu-table-operations {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    justify-content: flex-start;
+    max-width: 100%;
+    vertical-align: middle;
+    flex-wrap: nowrap;
+}
+
+.fu-table-operations__action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex: 0 0 auto;
+}
+
+.fu-table-operations__button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    min-width: 0;
+    padding-inline: 0;
+    white-space: nowrap;
+}
+
+.fu-table-more-button {
+    display: inline-flex;
+}
+
+.fu-table-operations__dropdown-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    white-space: nowrap;
+}
+
+.fu-search-bar {
+    display: inline-flex;
+    align-items: center;
+}
+
+.fu-search-bar-button {
+    padding-inline: 8px;
+}
+
+.fu-table-column-select__panel {
+    min-width: 220px;
+}
+
+.fu-table-column-select__title {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 12px;
+}
+
+.fu-table-column-select__list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.fu-table-column-select__item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.fu-table-column-select__drag {
+    cursor: move;
+    color: var(--el-text-color-secondary);
+}
+
+.fu-read-write-switch,
+.fu-input-rw-switch,
+.fu-select-rw-switch {
+    width: 100%;
+    min-height: 32px;
+}
+
+.fu-read-write-switch__read,
+.fu-input-rw-switch__read,
+.fu-select-rw-switch__read {
+    width: 100%;
+    min-height: 32px;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.fu-read-write-switch__text,
+.fu-input-rw-switch__text,
+.fu-select-rw-switch__text {
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.fu-steps {
+    display: flex;
+    gap: 24px;
+}
+
+.fu-steps--vertical {
+    align-items: flex-start;
+}
+
+.fu-steps__nav {
+    display: flex;
+}
+
+.fu-steps--vertical .fu-steps__nav {
+    flex-direction: column;
+    min-width: 180px;
+}
+
+.fu-steps__item {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    border: 0;
+    background: transparent;
+    padding: 0;
+    color: var(--el-text-color-regular);
+    cursor: pointer;
+    text-align: left;
+}
+
+.fu-steps__item.is-active {
+    color: var(--el-color-primary);
+    font-weight: 600;
+}
+
+.fu-steps__item.is-finished .fu-steps__index {
+    background: var(--el-color-success);
+    color: var(--el-color-white);
+}
+
+.fu-steps__item:disabled {
+    cursor: not-allowed;
+}
+
+.fu-steps__index {
+    width: 28px;
+    height: 28px;
+    border-radius: 999px;
+    border: 1px solid var(--el-border-color);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.fu-steps__title {
+    line-height: 1.4;
+}
+
+.fu-steps__content {
+    flex: 1;
+    min-width: 0;
+}
+
+.fu-steps__footer {
+    width: 100%;
+    margin-top: 16px;
+}
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index dd2f475224eb..9769d4037616 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -1,6 +1,6 @@
-@use 'fit2cloud-ui-plus/src/styles/index.scss' as *;
 @use './element.scss';
 @use './element-dark.scss';
+@use './fu.scss';
 @use './moblie.scss';
 @use './reset.scss';
 @use './var.scss';
diff --git a/frontend/src/utils/app-store.ts b/frontend/src/utils/app-store.ts
new file mode 100644
index 000000000000..cdd5e58cb72d
--- /dev/null
+++ b/frontend/src/utils/app-store.ts
@@ -0,0 +1,55 @@
+import i18n from '@/lang';
+
+export function getLanguage() {
+    return localStorage.getItem('lang') || 'zh';
+}
+
+function normalizeAppLocaleKey(language: string) {
+    const localeMap: Record<string, string> = {
+        tw: 'zh-hant',
+        'zh-Hant': 'zh-hant',
+        'pt-BR': 'pt-br',
+        'es-ES': 'es-es',
+    };
+    return localeMap[language] || language.toLowerCase();
+}
+
+export function getLabel(row: any) {
+    const language = localStorage.getItem('lang') || 'zh';
+    const lang = normalizeAppLocaleKey(language);
+    if (row.label && typeof row.label[lang] === 'string' && row.label[lang] !== '') {
+        return row.label[lang];
+    }
+    if (language == 'zh' || language == 'tw') {
+        return row.labelZh;
+    }
+    return row.labelEn;
+}
+
+export function getDescription(row: any) {
+    const language = localStorage.getItem('lang') || 'zh';
+    const lang = normalizeAppLocaleKey(language);
+    if (row.description && typeof row.description[lang] === 'string' && row.description[lang] !== '') {
+        return row.description[lang];
+    }
+    return '';
+}
+
+export function getDBName(length: number): string {
+    const chars = 'abcdefhijkmnprstwxyz2345678';
+    let result = '';
+    for (let i = 0; i < length; i++) {
+        result += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return result;
+}
+
+export function getRuntimeLabel(type: string) {
+    if (type == 'appstore') {
+        return i18n.global.t('menu.apps');
+    }
+    if (type == 'local') {
+        return i18n.global.t('commons.table.local');
+    }
+    return '';
+}
diff --git a/frontend/src/utils/app.ts b/frontend/src/utils/app.ts
index c2c9ca544b24..d59910655416 100644
--- a/frontend/src/utils/app.ts
+++ b/frontend/src/utils/app.ts
@@ -1,4 +1,4 @@
-import { jumpToPath } from './util';
+import { jumpToPath } from './router';
 import router from '@/routers';
 import { GlobalStore } from '@/store';
 
diff --git a/frontend/src/utils/auth.ts b/frontend/src/utils/auth.ts
new file mode 100644
index 000000000000..82e361595260
--- /dev/null
+++ b/frontend/src/utils/auth.ts
@@ -0,0 +1,83 @@
+import CryptoJS from 'crypto-js';
+import JSEncrypt from 'jsencrypt';
+
+export function getCookie(name: string) {
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) return parts.pop()?.split(';').shift();
+}
+
+function rsaEncrypt(data: string, publicKey: string) {
+    if (!data) {
+        return data;
+    }
+    const jsEncrypt = new JSEncrypt();
+    jsEncrypt.setPublicKey(publicKey);
+    return jsEncrypt.encrypt(data);
+}
+
+function aesEncrypt(data: string, key: string) {
+    const keyBytes = CryptoJS.enc.Utf8.parse(key);
+    const iv = CryptoJS.lib.WordArray.random(16);
+    const encrypted = CryptoJS.AES.encrypt(data, keyBytes, {
+        iv: iv,
+        mode: CryptoJS.mode.CBC,
+        padding: CryptoJS.pad.Pkcs7,
+    });
+    return iv.toString(CryptoJS.enc.Base64) + ':' + encrypted.toString();
+}
+
+function urlDecode(value: string): string {
+    return decodeURIComponent(value.replace(/\+/g, ' '));
+}
+
+function generateAESKey(): string {
+    const keyLength = 16;
+    const randomBytes = new Uint8Array(keyLength);
+    crypto.getRandomValues(randomBytes);
+    return Array.from(randomBytes)
+        .map((b) => b.toString(16).padStart(2, '0'))
+        .join('');
+}
+
+export const encryptPassword = (password: string) => {
+    if (!password) {
+        return '';
+    }
+    let rsaPublicKeyText = getCookie('panel_public_key');
+    if (!rsaPublicKeyText) {
+        return password;
+    }
+    rsaPublicKeyText = urlDecode(rsaPublicKeyText);
+
+    const aesKey = generateAESKey();
+    rsaPublicKeyText = rsaPublicKeyText.replaceAll('"', '');
+    const rsaPublicKey = atob(rsaPublicKeyText);
+    const keyCipher = rsaEncrypt(aesKey, rsaPublicKey);
+    const passwordCipher = aesEncrypt(password, aesKey);
+    return `${keyCipher}:${passwordCipher}`;
+};
+
+export function base64UrlToBuffer(base64url: string): ArrayBuffer {
+    let base64 = base64url.replace(/-/g, '+').replace(/_/g, '/');
+    const pad = base64.length % 4;
+    if (pad) {
+        base64 += '='.repeat(4 - pad);
+    }
+    const binary = window.atob(base64);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) {
+        bytes[i] = binary.charCodeAt(i);
+    }
+    return bytes.buffer;
+}
+
+export function bufferToBase64Url(buffer: ArrayBuffer): string {
+    const bytes = new Uint8Array(buffer);
+    let binary = '';
+    bytes.forEach((byte) => {
+        binary += String.fromCharCode(byte);
+    });
+    const base64 = window.btoa(binary);
+    return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
diff --git a/frontend/src/utils/browser.ts b/frontend/src/utils/browser.ts
new file mode 100644
index 000000000000..c6bac6e8a994
--- /dev/null
+++ b/frontend/src/utils/browser.ts
@@ -0,0 +1,24 @@
+export const toLink = (link: string) => {
+    const ipv6Regex = /^https?:\/\/([a-f0-9:]+):(\d+)(\/?.*)?$/i;
+    try {
+        if (ipv6Regex.test(link)) {
+            const match = link.match(ipv6Regex);
+            if (match) {
+                const ipv6 = match[1];
+                const port = match[2];
+                const path = match[3] || '';
+                link = `${link.startsWith('https') ? 'https' : 'http'}://[${ipv6}]:${port}${path}`;
+            }
+        }
+        window.open(link, '_blank');
+    } catch (e) {}
+};
+
+export const preloadImage = (url: string): Promise<string> => {
+    return new Promise((resolve) => {
+        const img = new Image();
+        img.onload = () => resolve(url);
+        img.onerror = () => resolve(url);
+        img.src = url;
+    });
+};
diff --git a/frontend/src/utils/clipboard.ts b/frontend/src/utils/clipboard.ts
new file mode 100644
index 000000000000..0d0be0e502ef
--- /dev/null
+++ b/frontend/src/utils/clipboard.ts
@@ -0,0 +1,15 @@
+import i18n from '@/lang';
+import useClipboard from 'vue-clipboard3';
+
+import { MsgError, MsgSuccess } from '@/utils/message';
+
+const { toClipboard } = useClipboard();
+
+export async function copyText(content: string) {
+    try {
+        await toClipboard(content);
+        MsgSuccess(i18n.global.t('commons.msg.copySuccess'));
+    } catch (e) {
+        MsgError(i18n.global.t('commons.msg.copyFailed'));
+    }
+}
diff --git a/frontend/src/utils/date.ts b/frontend/src/utils/date.ts
new file mode 100644
index 000000000000..7868f02683bd
--- /dev/null
+++ b/frontend/src/utils/date.ts
@@ -0,0 +1,172 @@
+import i18n from '@/lang';
+
+export function loadUpTime(timeSince: string) {
+    if (!timeSince) {
+        return '';
+    }
+    const targetTime = new Date(timeSince);
+    const currentTime = new Date();
+    const uptime = (currentTime.getTime() - targetTime.getTime()) / 1000;
+    if (uptime <= 0) {
+        return '';
+    }
+    let days = Math.floor(uptime / 86400);
+    let hours = Math.floor((uptime % 86400) / 3600);
+    let minutes = Math.floor((uptime % 3600) / 60);
+    let seconds = Math.floor(uptime % 60);
+    if (days !== 0) {
+        return (
+            days +
+            i18n.global.t('commons.units.day') +
+            ' ' +
+            hours +
+            i18n.global.t('commons.units.hour') +
+            ' ' +
+            minutes +
+            i18n.global.t('commons.units.minute') +
+            ' ' +
+            seconds +
+            i18n.global.t('commons.units.second')
+        );
+    }
+    if (hours !== 0) {
+        return (
+            hours +
+            i18n.global.t('commons.units.hour') +
+            ' ' +
+            minutes +
+            i18n.global.t('commons.units.minute') +
+            ' ' +
+            seconds +
+            i18n.global.t('commons.units.second')
+        );
+    }
+    if (minutes !== 0) {
+        return minutes + i18n.global.t('commons.units.minute') + ' ' + seconds + i18n.global.t('commons.units.second');
+    }
+    return seconds + i18n.global.t('commons.units.second');
+}
+
+export function getCurrentDateFormatted() {
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = String(now.getMonth() + 1).padStart(2, '0');
+    const day = String(now.getDate()).padStart(2, '0');
+    const hours = String(now.getHours()).padStart(2, '0');
+    const minutes = String(now.getMinutes()).padStart(2, '0');
+    const seconds = String(now.getSeconds()).padStart(2, '0');
+    return `${year}${month}${day}${hours}${minutes}${seconds}`;
+}
+
+export function dateFormat(row: any, col: any, dataStr: any) {
+    const date = new Date(dataStr);
+    const y = date.getFullYear();
+    let m: string | number = date.getMonth() + 1;
+    m = m < 10 ? `0${String(m)}` : m;
+    let d: string | number = date.getDate();
+    d = d < 10 ? `0${String(d)}` : d;
+    let h: string | number = date.getHours();
+    h = h < 10 ? `0${String(h)}` : h;
+    let minute: string | number = date.getMinutes();
+    minute = minute < 10 ? `0${String(minute)}` : minute;
+    let second: string | number = date.getSeconds();
+    second = second < 10 ? `0${String(second)}` : second;
+    return `${String(y)}-${String(m)}-${String(d)}   ${String(h)}:${String(minute)}:${String(second)}`;
+}
+
+export function dateFormatSimple(dataStr: any) {
+    const date = new Date(dataStr);
+    const y = date.getFullYear();
+    let m: string | number = date.getMonth() + 1;
+    m = m < 10 ? `0${String(m)}` : m;
+    let d: string | number = date.getDate();
+    d = d < 10 ? `0${String(d)}` : d;
+    return `${String(y)}-${String(m)}-${String(d)}`;
+}
+
+export function dateFormatForName(dataStr: any) {
+    const date = new Date(dataStr);
+    const y = date.getFullYear();
+    let m: string | number = date.getMonth() + 1;
+    m = m < 10 ? `0${String(m)}` : m;
+    let d: string | number = date.getDate();
+    d = d < 10 ? `0${String(d)}` : d;
+    let h: string | number = date.getHours();
+    h = h < 10 ? `0${String(h)}` : h;
+    let minute: string | number = date.getMinutes();
+    minute = minute < 10 ? `0${String(minute)}` : minute;
+    let second: string | number = date.getSeconds();
+    second = second < 10 ? `0${String(second)}` : second;
+    return `${String(y)}${String(m)}${String(d)}${String(h)}${String(minute)}${String(second)}`;
+}
+
+export function dateFormatWithoutYear(dataStr: any) {
+    const date = new Date(dataStr);
+    let m: string | number = date.getMonth() + 1;
+    m = m < 10 ? `0${String(m)}` : m;
+    let d: string | number = date.getDate();
+    d = d < 10 ? `0${String(d)}` : d;
+    let h: string | number = date.getHours();
+    h = h < 10 ? `0${String(h)}` : h;
+    let minute: string | number = date.getMinutes();
+    minute = minute < 10 ? `0${String(minute)}` : minute;
+    let s: string | number = date.getSeconds();
+    s = s < 10 ? `0${String(s)}` : s;
+    return `${String(m)}-${String(d)}\n${String(h)}:${String(minute)}:${String(s)}`;
+}
+
+export function dateFormatForSecond(dataStr: any) {
+    const date = new Date(dataStr);
+    let h: string | number = date.getHours();
+    h = h < 10 ? `0${String(h)}` : h;
+    let minute: string | number = date.getMinutes();
+    minute = minute < 10 ? `0${String(minute)}` : minute;
+    let second: string | number = date.getSeconds();
+    second = second < 10 ? `0${String(second)}` : second;
+    return `${String(h)}:${String(minute)}:${String(second)}`;
+}
+
+export function loadZero(i: number) {
+    return i < 10 ? '0' + i : '' + i;
+}
+
+export function getAge(d1: string): string {
+    const dateBegin = new Date(d1);
+    const dateEnd = new Date();
+    const dateDiff = dateEnd.getTime() - dateBegin.getTime();
+    const dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));
+    const leave1 = dateDiff % (24 * 3600 * 1000);
+    const hours = Math.floor(leave1 / (3600 * 1000));
+    const leave2 = leave1 % (3600 * 1000);
+    const minutes = Math.floor(leave2 / (60 * 1000));
+
+    let res = '';
+    if (dayDiff > 0) {
+        res += String(dayDiff) + ' ' + i18n.global.t('commons.units.day', dayDiff) + ' ';
+        if (hours <= 0) {
+            return res;
+        }
+    }
+    if (hours > 0) {
+        res += String(hours) + ' ' + i18n.global.t('commons.units.hour', hours);
+        return res;
+    }
+    if (minutes > 0) {
+        res += String(minutes) + ' ' + i18n.global.t('commons.units.minute', minutes);
+        return res;
+    }
+    return i18n.global.t('app.less1Minute');
+}
+
+export function getDateStr() {
+    let now: Date = new Date();
+    let year: number = now.getFullYear();
+    let month: number = now.getMonth() + 1;
+    let date: number = now.getDate();
+    let hours: number = now.getHours();
+    let minutes: number = now.getMinutes();
+    let seconds: number = now.getSeconds();
+    return `${year}-${month < 10 ? '0' + month : month}-${date < 10 ? '0' + date : date}-${
+        hours < 10 ? '0' + hours : hours
+    }-${minutes < 10 ? '0' + minutes : minutes}-${seconds < 10 ? '0' + seconds : seconds}`;
+}
diff --git a/frontend/src/utils/docker.ts b/frontend/src/utils/docker.ts
index b233b1206c21..17c9be30a9e2 100644
--- a/frontend/src/utils/docker.ts
+++ b/frontend/src/utils/docker.ts
@@ -1,4 +1,4 @@
-import { isJson } from './util';
+import { isJson } from './misc';
 
 export function formatImageStdout(stdout: string) {
     let lines = stdout.split('\r\n');
diff --git a/frontend/src/utils/file.ts b/frontend/src/utils/file.ts
new file mode 100644
index 000000000000..f02e500e0e8e
--- /dev/null
+++ b/frontend/src/utils/file.ts
@@ -0,0 +1,154 @@
+const icons = new Map([
+    ['.zip', 'p-file-zip'],
+    ['.gz', 'p-file-zip'],
+    ['.tar.bz2', 'p-file-zip'],
+    ['.bz2', 'p-file-zip'],
+    ['.xz', 'p-file-zip'],
+    ['.tar.xz', 'p-file-zip'],
+    ['.tar', 'p-file-zip'],
+    ['.tar.gz', 'p-file-zip'],
+    ['.war', 'p-file-zip'],
+    ['.tgz', 'p-file-zip'],
+    ['.7z', 'p-file-zip'],
+    ['.rar', 'p-file-zip'],
+    ['.mp3', 'p-file-mp3'],
+    ['.svg', 'p-file-svg'],
+    ['.txt', 'p-file-txt'],
+    ['.html', 'p-file-html'],
+    ['.word', 'p-file-word'],
+    ['.ppt', 'p-file-ppt'],
+    ['.jpg', 'p-file-jpg'],
+    ['.jpeg', 'p-file-jpg'],
+    ['.png', 'p-file-png'],
+    ['.xlsx', 'p-file-excel'],
+    ['.doc', 'p-file-word'],
+    ['.xls', 'p-file-excel'],
+    ['.docx', 'p-file-word'],
+    ['.pdf', 'p-file-pdf'],
+    ['.bmp', 'p-file-png'],
+    ['.gif', 'p-file-png'],
+    ['.tiff', 'p-file-png'],
+    ['.ico', 'p-file-png'],
+    ['.webp', 'p-file-png'],
+    ['.mp4', 'p-file-video'],
+    ['.webm', 'p-file-video'],
+    ['.mov', 'p-file-video'],
+    ['.wmv', 'p-file-video'],
+    ['.mkv', 'p-file-video'],
+    ['.avi', 'p-file-video'],
+    ['.wma', 'p-file-video'],
+    ['.flv', 'p-file-video'],
+    ['.wav', 'p-file-mp3'],
+    ['.wma', 'p-file-mp3'],
+    ['.ape', 'p-file-mp3'],
+    ['.acc', 'p-file-mp3'],
+    ['.ogg', 'p-file-mp3'],
+    ['.flac', 'p-file-mp3'],
+]);
+
+const fileTypes = {
+    image: ['.jpg', '.jpeg', '.png', '.bmp', '.gif', '.tiff', '.ico', '.svg', '.webp'],
+    compress: ['.zip', '.rar', '.gz', '.war', '.tgz', '.7z', '.tar.gz', '.tar', '.bz2', '.xz', '.tar.bz2', '.tar.xz'],
+    video: ['.mp4', '.webm', '.mov', '.wmv', '.mkv', '.avi', '.wma', '.flv'],
+    audio: ['.mp3', '.wav', '.wma', '.ape', '.acc', '.ogg', '.flac'],
+    pdf: ['.pdf'],
+    word: ['.doc', '.docx'],
+    excel: ['.xls', '.xlsx'],
+    text: ['.iso', '.tiff', '.exe', '.so', '.bz', '.dmg', '.apk', '.pptx', '.ppt', '.xlsb'],
+};
+
+export function getIcon(extension: string): string {
+    if (icons.get(extension) != undefined) {
+        return String(icons.get(extension));
+    }
+    return 'p-file-normal';
+}
+
+export const getFileType = (extension: string) => {
+    let type = 'text';
+    Object.entries(fileTypes).forEach(([key, extensions]) => {
+        if (extensions.includes(extension.toLowerCase())) {
+            type = key;
+        }
+    });
+    return type;
+};
+
+const convertTypes = ['image', 'video', 'audio'] as const;
+type ConvertType = (typeof convertTypes)[number];
+
+export function isConvertible(extension: string, mimeType: string): boolean {
+    return convertTypes.includes(getFileType(extension) as ConvertType) && /^(image|audio|video)\//.test(mimeType);
+}
+
+export const isSensitiveLinuxPath = (path: string) => {
+    const sensitivePath = [
+        '/',
+        '/bin',
+        '/sbin',
+        '/usr/bin',
+        '/usr/sbin',
+        '/usr/local/bin',
+        '/etc',
+        '/lib',
+        '/lib64',
+        '/usr/lib',
+        '/home',
+        '/tmp',
+        '/var',
+        '/dev',
+        '/proc',
+        '/sys',
+    ];
+    return sensitivePath.indexOf(path) !== -1;
+};
+
+function buildFileDownloadUrl(filePath: string, currentNode: string): string {
+    const base = `${import.meta.env.VITE_API_URL as string}/files/download?operateNode=${currentNode}&`;
+    return base + 'path=' + encodeURIComponent(filePath);
+}
+
+export function buildFileSharePageUrl(code: string, currentNode: string): string {
+    const shareUrl = new URL(`/s/${encodeURIComponent(code)}`, window.location.origin);
+    shareUrl.searchParams.set('operateNode', currentNode);
+    return shareUrl.toString();
+}
+
+export function buildFileShareDownloadUrl(code: string, currentNode: string, password?: string): string {
+    const apiBase = import.meta.env.VITE_API_URL as string;
+    const normalizedBase = apiBase.replace(/\/$/, '');
+    const shareUrl = /^https?:\/\//i.test(normalizedBase)
+        ? new URL(`${normalizedBase}/files/share/download`)
+        : new URL(`${normalizedBase}/files/share/download`, window.location.origin);
+    shareUrl.searchParams.set('operateNode', currentNode);
+    shareUrl.searchParams.set('code', code);
+    if (password && password.length > 0) {
+        shareUrl.searchParams.set('password', password);
+    }
+    return shareUrl.toString();
+}
+
+export function buildFileShareQrCodeUrl(code: string, currentNode: string): string {
+    const apiBase = import.meta.env.VITE_API_URL as string;
+    const normalizedBase = apiBase.replace(/\/$/, '');
+    const shareUrl = /^https?:\/\//i.test(normalizedBase)
+        ? new URL(`${normalizedBase}/files/share/qrcode`)
+        : new URL(`${normalizedBase}/files/share/qrcode`, window.location.origin);
+    shareUrl.searchParams.set('operateNode', currentNode);
+    shareUrl.searchParams.set('code', code);
+    return shareUrl.toString();
+}
+
+export function downloadFile(filePath: string, currentNode: string) {
+    window.open(buildFileDownloadUrl(filePath, currentNode), '_blank');
+}
+
+export function downloadWithContent(content: string, fileName: string) {
+    const downloadUrl = window.URL.createObjectURL(new Blob([content]));
+    const a = document.createElement('a');
+    a.style.display = 'none';
+    a.href = downloadUrl;
+    a.download = fileName;
+    const event = new MouseEvent('click');
+    a.dispatchEvent(event);
+}
diff --git a/frontend/src/utils/id.ts b/frontend/src/utils/id.ts
new file mode 100644
index 000000000000..8a20849f3522
--- /dev/null
+++ b/frontend/src/utils/id.ts
@@ -0,0 +1,14 @@
+import { v4 as uuidv4 } from 'uuid';
+
+export function getRandomStr(length: number): string {
+    const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
+    let result = '';
+    for (let i = 0; i < length; i++) {
+        result += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return result;
+}
+
+export const newUUID = () => {
+    return uuidv4();
+};
diff --git a/frontend/src/utils/misc.ts b/frontend/src/utils/misc.ts
new file mode 100644
index 000000000000..925b186041a3
--- /dev/null
+++ b/frontend/src/utils/misc.ts
@@ -0,0 +1,79 @@
+import { toUnicode } from 'punycode';
+
+export function deepCopy<T>(obj: any): T {
+    let newObj: any;
+    try {
+        newObj = obj.push ? [] : {};
+    } catch (error) {
+        newObj = {};
+    }
+    for (let attr in obj) {
+        if (typeof obj[attr] === 'object') {
+            newObj[attr] = deepCopy(obj[attr]);
+        } else {
+            newObj[attr] = obj[attr];
+        }
+    }
+    return newObj;
+}
+
+export function debounce(func: Function, wait: number) {
+    let timeout: NodeJS.Timeout | null = null;
+    return function executedFunction(...args: any[]) {
+        const later = () => {
+            if (timeout) clearTimeout(timeout);
+            func(...args);
+        };
+        if (timeout) clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+export function isJson(str: string) {
+    try {
+        if (typeof JSON.parse(str) === 'object') {
+            return true;
+        }
+    } catch {
+        return false;
+    }
+}
+
+function compareById(a: any, b: any) {
+    return a.sort - b.sort;
+}
+
+export function sortMenu(arr: any[]) {
+    if (!arr || arr.length === 0) {
+        return;
+    }
+    arr.forEach((item) => {
+        if (item.children && Array.isArray(item.children)) {
+            item.children.sort(compareById);
+        }
+    });
+    arr.sort(compareById);
+}
+
+export function isPunycoded(domain: string): boolean {
+    return domain.includes('xn--');
+}
+
+export function GetPunyCodeDomain(domain: string): string {
+    if (!domain || typeof domain !== 'string') {
+        return '';
+    }
+    const lowerDomain = domain.toLowerCase();
+    if (!lowerDomain.includes('xn--')) {
+        return '';
+    }
+    try {
+        const decoded = toUnicode(domain);
+        if (decoded === domain) {
+            return '';
+        }
+        return decoded;
+    } catch (error) {
+        return '';
+    }
+}
diff --git a/frontend/src/utils/router.ts b/frontend/src/utils/router.ts
index 59812716770d..421194662143 100644
--- a/frontend/src/utils/router.ts
+++ b/frontend/src/utils/router.ts
@@ -26,6 +26,10 @@ export const routerToPathWithQuery = async (path: string, query: any) => {
     tabStoreMiddleWare();
 };
 
+export const jumpToPath = (router: any, path: string) => {
+    routerToPathWithQuery(path, { uncached: 'true' });
+};
+
 export const routerToNameWithParams = async (name: string, params: any) => {
     await router.push({ name: name, params: params });
     tabStoreMiddleWare();
diff --git a/frontend/src/utils/size.ts b/frontend/src/utils/size.ts
new file mode 100644
index 000000000000..0a1c3b39ade8
--- /dev/null
+++ b/frontend/src/utils/size.ts
@@ -0,0 +1,81 @@
+function formattedNumber(num: string) {
+    return num.endsWith('.00') ? Number(num.slice(0, -3)) : Number(num);
+}
+
+export function computeSize(size: number): string {
+    const num = 1024.0;
+    if (size < num) return size + ' B';
+    if (size < Math.pow(num, 2)) return formattedNumber((size / num).toFixed(2)) + ' KB';
+    if (size < Math.pow(num, 3)) return formattedNumber((size / Math.pow(num, 2)).toFixed(2)) + ' MB';
+    if (size < Math.pow(num, 4)) return formattedNumber((size / Math.pow(num, 3)).toFixed(2)) + ' GB';
+    return formattedNumber((size / Math.pow(num, 4)).toFixed(2)) + ' TB';
+}
+
+export function computeSizeForDocker(size: number): string {
+    const num = 1024.0;
+    if (size < num) return size + ' B';
+    if (size < Math.pow(num, 2)) return formattedNumber((size / num).toFixed(2)) + ' KiB';
+    if (size < Math.pow(num, 3)) return formattedNumber((size / Math.pow(num, 2)).toFixed(2)) + ' MiB';
+    if (size < Math.pow(num, 4)) return formattedNumber((size / Math.pow(num, 3)).toFixed(2)) + ' GiB';
+    return formattedNumber((size / Math.pow(num, 4)).toFixed(2)) + ' TiB';
+}
+
+export function computeSize2(size: number): string {
+    const num = 1000.0;
+    if (size < num) return size + ' B';
+    if (size < Math.pow(num, 2)) return formattedNumber((size / num).toFixed(2)) + ' KB';
+    if (size < Math.pow(num, 3)) return formattedNumber((size / Math.pow(num, 2)).toFixed(2)) + ' MB';
+    if (size < Math.pow(num, 4)) return formattedNumber((size / Math.pow(num, 3)).toFixed(2)) + ' GB';
+    return formattedNumber((size / Math.pow(num, 4)).toFixed(2)) + ' TB';
+}
+
+export function computeCPU(size: number): string {
+    const num = 1000;
+    if (size < num) return size + ' ns';
+    if (size < Math.pow(num, 2)) return formattedNumber((size / num).toFixed(2)) + ' μs';
+    if (size < Math.pow(num, 3)) return formattedNumber((size / Math.pow(num, 2)).toFixed(2)) + ' ms';
+    return formattedNumber((size / Math.pow(num, 3)).toFixed(2)) + ' s';
+}
+
+export function splitSize(size: number): any {
+    const num = 1024.0;
+    if (size < num) return { size: Number(size), unit: 'B' };
+    if (size < Math.pow(num, 2)) return { size: formattedNumber((size / num).toFixed(2)), unit: 'KB' };
+    if (size < Math.pow(num, 3))
+        return { size: formattedNumber((size / Number(Math.pow(num, 2).toFixed(2))).toFixed(2)), unit: 'MB' };
+    if (size < Math.pow(num, 4))
+        return { size: formattedNumber((size / Number(Math.pow(num, 3))).toFixed(2)), unit: 'GB' };
+    return { size: formattedNumber((size / Number(Math.pow(num, 4))).toFixed(2)), unit: 'TB' };
+}
+
+export function computeSizeFromMB(size: number): string {
+    const num = 1024.0;
+    if (size < num) return size + ' MB';
+    if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + ' GB';
+    return (size / Math.pow(num, 3)).toFixed(2) + ' TB';
+}
+
+export function computeSizeFromKB(size: number): string {
+    const num = 1024.0;
+    if (size < num) return size + ' KB';
+    if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + ' MB';
+    if (size < Math.pow(num, 3)) return (size / Math.pow(num, 2)).toFixed(2) + ' GB';
+    return (size / Math.pow(num, 3)).toFixed(2) + ' TB';
+}
+
+export function computeSizeFromByte(size: number): string {
+    const num = 1024.0;
+    if (size < num) return size + ' B';
+    if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + ' KB';
+    if (size < Math.pow(num, 3)) return (size / Math.pow(num, 2)).toFixed(2) + ' MB';
+    if (size < Math.pow(num, 4)) return (size / Math.pow(num, 2)).toFixed(2) + ' GB';
+    return (size / Math.pow(num, 5)).toFixed(2) + ' TB';
+}
+
+export function computeSizeFromKBs(size: number): string {
+    const num = 1024.0;
+    if (size < num) return size + ' KB/s';
+    if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + ' MB/s';
+    if (size < Math.pow(num, 3)) return (size / Math.pow(num, 2)).toFixed(2) + ' GB/s';
+    return (size / Math.pow(num, 3)).toFixed(2) + ' TB/s';
+}
diff --git a/frontend/src/utils/ssl.ts b/frontend/src/utils/ssl.ts
new file mode 100644
index 000000000000..c4a77ce81364
--- /dev/null
+++ b/frontend/src/utils/ssl.ts
@@ -0,0 +1,46 @@
+import { AcmeAccountTypes, DNSTypes, KeyTypes } from '@/global/mimetype';
+import i18n from '@/lang';
+
+export function getAccountName(type: string) {
+    for (const item of AcmeAccountTypes) {
+        if (item.value === type) {
+            return item.label;
+        }
+    }
+    return '';
+}
+
+export function getKeyName(type: string) {
+    for (const item of KeyTypes) {
+        if (item.value === type) {
+            return item.label;
+        }
+    }
+    return '';
+}
+
+export function getDNSName(type: string) {
+    for (const item of DNSTypes) {
+        if (item.value === type) {
+            return item.label;
+        }
+    }
+    return '';
+}
+
+export function getProvider(provider: string): string {
+    switch (provider) {
+        case 'dnsAccount':
+            return i18n.global.t('website.dnsAccount');
+        case 'dnsManual':
+            return i18n.global.t('website.dnsManual');
+        case 'http':
+            return 'HTTP';
+        case 'selfSigned':
+            return i18n.global.t('ssl.selfSigned');
+        case 'fromMaster':
+            return i18n.global.t('ssl.fromMaster');
+        default:
+            return i18n.global.t('ssl.manualCreate');
+    }
+}
diff --git a/frontend/src/utils/util.ts b/frontend/src/utils/util.ts
deleted file mode 100644
index 954c39dd2407..000000000000
--- a/frontend/src/utils/util.ts
+++ /dev/null
@@ -1,1018 +0,0 @@
-import { AcmeAccountTypes, DNSTypes, KeyTypes } from '@/global/mimetype';
-import i18n from '@/lang';
-import useClipboard from 'vue-clipboard3';
-const { toClipboard } = useClipboard();
-import { MsgError, MsgSuccess } from '@/utils/message';
-import { v4 as uuidv4 } from 'uuid';
-import JSEncrypt from 'jsencrypt';
-import CryptoJS from 'crypto-js';
-import { routerToPathWithQuery } from './router';
-import { toUnicode } from 'punycode';
-
-export function deepCopy<T>(obj: any): T {
-    let newObj: any;
-    try {
-        newObj = obj.push ? [] : {};
-    } catch (error) {
-        newObj = {};
-    }
-    for (let attr in obj) {
-        if (typeof obj[attr] === 'object') {
-            newObj[attr] = deepCopy(obj[attr]);
-        } else {
-            newObj[attr] = obj[attr];
-        }
-    }
-    return newObj;
-}
-export function randomNum(min: number, max: number): number {
-    let num = Math.floor(Math.random() * (min - max) + max);
-    return num;
-}
-
-export function debounce(func: Function, wait: number) {
-    let timeout: NodeJS.Timeout | null = null;
-    return function executedFunction(...args: any[]) {
-        const later = () => {
-            if (timeout) clearTimeout(timeout);
-            func(...args);
-        };
-        if (timeout) clearTimeout(timeout);
-        timeout = setTimeout(later, wait);
-    };
-}
-
-export function getBrowserLang() {
-    let browserLang = navigator.language ? navigator.language : navigator.browserLanguage;
-    let defaultBrowserLang = '';
-    if (
-        browserLang.toLowerCase() === 'cn' ||
-        browserLang.toLowerCase() === 'zh' ||
-        browserLang.toLowerCase() === 'zh-cn'
-    ) {
-        defaultBrowserLang = 'zh';
-    } else {
-        defaultBrowserLang = 'en';
-    }
-    return defaultBrowserLang;
-}
-
-export function loadUpTime(timeSince: string) {
-    if (!timeSince) {
-        return '';
-    }
-    const targetTime = new Date(timeSince);
-    const currentTime = new Date();
-    const uptime = (currentTime.getTime() - targetTime.getTime()) / 1000;
-    if (uptime <= 0) {
-        return '';
-    }
-    let days = Math.floor(uptime / 86400);
-    let hours = Math.floor((uptime % 86400) / 3600);
-    let minutes = Math.floor((uptime % 3600) / 60);
-    let seconds = Math.floor(uptime % 60);
-    if (days !== 0) {
-        return (
-            days +
-            i18n.global.t('commons.units.day') +
-            ' ' +
-            hours +
-            i18n.global.t('commons.units.hour') +
-            ' ' +
-            minutes +
-            i18n.global.t('commons.units.minute') +
-            ' ' +
-            seconds +
-            i18n.global.t('commons.units.second')
-        );
-    }
-    if (hours !== 0) {
-        return (
-            hours +
-            i18n.global.t('commons.units.hour') +
-            ' ' +
-            minutes +
-            i18n.global.t('commons.units.minute') +
-            ' ' +
-            seconds +
-            i18n.global.t('commons.units.second')
-        );
-    }
-    if (minutes !== 0) {
-        return minutes + i18n.global.t('commons.units.minute') + ' ' + seconds + i18n.global.t('commons.units.second');
-    }
-    return seconds + i18n.global.t('commons.units.second');
-}
-
-// 20250310
-export function getCurrentDateFormatted() {
-    const now = new Date();
-    const year = now.getFullYear();
-    const month = String(now.getMonth() + 1).padStart(2, '0');
-    const day = String(now.getDate()).padStart(2, '0');
-    const hours = String(now.getHours()).padStart(2, '0');
-    const minutes = String(now.getMinutes()).padStart(2, '0');
-    const seconds = String(now.getSeconds()).padStart(2, '0');
-
-    return `${year}${month}${day}${hours}${minutes}${seconds}`;
-}
-
-export function dateFormat(row: any, col: any, dataStr: any) {
-    const date = new Date(dataStr);
-    const y = date.getFullYear();
-    let m: string | number = date.getMonth() + 1;
-    m = m < 10 ? `0${String(m)}` : m;
-    let d: string | number = date.getDate();
-    d = d < 10 ? `0${String(d)}` : d;
-    let h: string | number = date.getHours();
-    h = h < 10 ? `0${String(h)}` : h;
-    let minute: string | number = date.getMinutes();
-    minute = minute < 10 ? `0${String(minute)}` : minute;
-    let second: string | number = date.getSeconds();
-    second = second < 10 ? `0${String(second)}` : second;
-    return `${String(y)}-${String(m)}-${String(d)}   ${String(h)}:${String(minute)}:${String(second)}`;
-}
-
-//2016-01-12
-export function dateFormatSimple(dataStr: any) {
-    const date = new Date(dataStr);
-    const y = date.getFullYear();
-    let m: string | number = date.getMonth() + 1;
-    m = m < 10 ? `0${String(m)}` : m;
-    let d: string | number = date.getDate();
-    d = d < 10 ? `0${String(d)}` : d;
-    return `${String(y)}-${String(m)}-${String(d)}`;
-}
-
-// 20221013151302
-export function dateFormatForName(dataStr: any) {
-    const date = new Date(dataStr);
-    const y = date.getFullYear();
-    let m: string | number = date.getMonth() + 1;
-    m = m < 10 ? `0${String(m)}` : m;
-    let d: string | number = date.getDate();
-    d = d < 10 ? `0${String(d)}` : d;
-    let h: string | number = date.getHours();
-    h = h < 10 ? `0${String(h)}` : h;
-    let minute: string | number = date.getMinutes();
-    minute = minute < 10 ? `0${String(minute)}` : minute;
-    let second: string | number = date.getSeconds();
-    second = second < 10 ? `0${String(second)}` : second;
-    return `${String(y)}${String(m)}${String(d)}${String(h)}${String(minute)}${String(second)}`;
-}
-
-// 10-13 \n 15:13
-export function dateFormatWithoutYear(dataStr: any) {
-    const date = new Date(dataStr);
-    let m: string | number = date.getMonth() + 1;
-    m = m < 10 ? `0${String(m)}` : m;
-    let d: string | number = date.getDate();
-    d = d < 10 ? `0${String(d)}` : d;
-    let h: string | number = date.getHours();
-    h = h < 10 ? `0${String(h)}` : h;
-    let minute: string | number = date.getMinutes();
-    minute = minute < 10 ? `0${String(minute)}` : minute;
-    let s: string | number = date.getSeconds();
-    s = s < 10 ? `0${String(s)}` : s;
-    return `${String(m)}-${String(d)}\n${String(h)}:${String(minute)}:${String(s)}`;
-}
-
-// 20221013151302
-export function dateFormatForSecond(dataStr: any) {
-    const date = new Date(dataStr);
-    let h: string | number = date.getHours();
-    h = h < 10 ? `0${String(h)}` : h;
-    let minute: string | number = date.getMinutes();
-    minute = minute < 10 ? `0${String(minute)}` : minute;
-    let second: string | number = date.getSeconds();
-    second = second < 10 ? `0${String(second)}` : second;
-    return `${String(h)}:${String(minute)}:${String(second)}`;
-}
-
-export function getRandomStr(e: number): string {
-    const t = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
-    const a = t.length;
-    let n = '';
-
-    for (let i = 0; i < e; i++) {
-        n += t.charAt(Math.floor(Math.random() * a));
-    }
-    return n;
-}
-
-export function getDBName(e: number): string {
-    const t = 'abcdefhijkmnprstwxyz2345678';
-    const a = t.length;
-    let n = '';
-
-    for (let i = 0; i < e; i++) {
-        n += t.charAt(Math.floor(Math.random() * a));
-    }
-    return n;
-}
-
-export function loadZero(i: number) {
-    return i < 10 ? '0' + i : '' + i;
-}
-
-export function computeSize(size: number): string {
-    const num = 1024.0;
-    if (size < num) return size + ' B';
-    if (size < Math.pow(num, 2)) return formattedNumber((size / num).toFixed(2)) + ' KB';
-    if (size < Math.pow(num, 3)) return formattedNumber((size / Math.pow(num, 2)).toFixed(2)) + ' MB';
-    if (size < Math.pow(num, 4)) return formattedNumber((size / Math.pow(num, 3)).toFixed(2)) + ' GB';
-    return formattedNumber((size / Math.pow(num, 4)).toFixed(2)) + ' TB';
-}
-
-export function computeSizeForDocker(size: number): string {
-    const num = 1024.0;
-    if (size < num) return size + ' B';
-    if (size < Math.pow(num, 2)) return formattedNumber((size / num).toFixed(2)) + ' KiB';
-    if (size < Math.pow(num, 3)) return formattedNumber((size / Math.pow(num, 2)).toFixed(2)) + ' MiB';
-    if (size < Math.pow(num, 4)) return formattedNumber((size / Math.pow(num, 3)).toFixed(2)) + ' GiB';
-    return formattedNumber((size / Math.pow(num, 4)).toFixed(2)) + ' TiB';
-}
-
-export function computeSize2(size: number): string {
-    const num = 1000.0;
-    if (size < num) return size + ' B';
-    if (size < Math.pow(num, 2)) return formattedNumber((size / num).toFixed(2)) + ' KB';
-    if (size < Math.pow(num, 3)) return formattedNumber((size / Math.pow(num, 2)).toFixed(2)) + ' MB';
-    if (size < Math.pow(num, 4)) return formattedNumber((size / Math.pow(num, 3)).toFixed(2)) + ' GB';
-    return formattedNumber((size / Math.pow(num, 4)).toFixed(2)) + ' TB';
-}
-
-export function computeCPU(size: number): string {
-    const num = 1000;
-    if (size < num) return size + ' ns';
-    if (size < Math.pow(num, 2)) return formattedNumber((size / num).toFixed(2)) + ' μs';
-    if (size < Math.pow(num, 3)) return formattedNumber((size / Math.pow(num, 2)).toFixed(2)) + ' ms';
-    return formattedNumber((size / Math.pow(num, 3)).toFixed(2)) + ' s';
-}
-
-export function splitSize(size: number): any {
-    const num = 1024.0;
-    if (size < num) return { size: Number(size), unit: 'B' };
-    if (size < Math.pow(num, 2)) return { size: formattedNumber((size / num).toFixed(2)), unit: 'KB' };
-    if (size < Math.pow(num, 3))
-        return { size: formattedNumber((size / Number(Math.pow(num, 2).toFixed(2))).toFixed(2)), unit: 'MB' };
-    if (size < Math.pow(num, 4))
-        return { size: formattedNumber((size / Number(Math.pow(num, 3))).toFixed(2)), unit: 'GB' };
-    return { size: formattedNumber((size / Number(Math.pow(num, 4))).toFixed(2)), unit: 'TB' };
-}
-
-export function formattedNumber(num: string) {
-    return num.endsWith('.00') ? Number(num.slice(0, -3)) : Number(num);
-}
-
-export function computeSizeFromMB(size: number): string {
-    const num = 1024.0;
-    if (size < num) return size + ' MB';
-    if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + ' GB';
-    return (size / Math.pow(num, 3)).toFixed(2) + ' TB';
-}
-
-export function computeSizeFromKB(size: number): string {
-    const num = 1024.0;
-    if (size < num) return size + ' KB';
-    if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + ' MB';
-    if (size < Math.pow(num, 3)) return (size / Math.pow(num, 2)).toFixed(2) + ' GB';
-    return (size / Math.pow(num, 3)).toFixed(2) + ' TB';
-}
-export function computeSizeFromByte(size: number): string {
-    const num = 1024.0;
-    if (size < num) return size + ' B';
-    if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + ' KB';
-    if (size < Math.pow(num, 3)) return (size / Math.pow(num, 2)).toFixed(2) + ' MB';
-    if (size < Math.pow(num, 4)) return (size / Math.pow(num, 2)).toFixed(2) + ' GB';
-    return (size / Math.pow(num, 5)).toFixed(2) + ' TB';
-}
-
-export function computeSizeFromKBs(size: number): string {
-    const num = 1024.0;
-    if (size < num) return size + ' KB/s';
-    if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + ' MB/s';
-    if (size < Math.pow(num, 3)) return (size / Math.pow(num, 2)).toFixed(2) + ' GB/s';
-    return (size / Math.pow(num, 3)).toFixed(2) + ' TB/s';
-}
-
-let icons = new Map([
-    ['.zip', 'p-file-zip'],
-    ['.gz', 'p-file-zip'],
-    ['.tar.bz2', 'p-file-zip'],
-    ['.bz2', 'p-file-zip'],
-    ['.xz', 'p-file-zip'],
-    ['.tar.xz', 'p-file-zip'],
-    ['.tar', 'p-file-zip'],
-    ['.tar.gz', 'p-file-zip'],
-    ['.war', 'p-file-zip'],
-    ['.tgz', 'p-file-zip'],
-    ['.7z', 'p-file-zip'],
-    ['.rar', 'p-file-zip'],
-    ['.mp3', 'p-file-mp3'],
-    ['.svg', 'p-file-svg'],
-    ['.txt', 'p-file-txt'],
-    ['.html', 'p-file-html'],
-    ['.word', 'p-file-word'],
-    ['.ppt', 'p-file-ppt'],
-    ['.jpg', 'p-file-jpg'],
-    ['.jpeg', 'p-file-jpg'],
-    ['.png', 'p-file-png'],
-    ['.xlsx', 'p-file-excel'],
-    ['.doc', 'p-file-word'],
-    ['.xls', 'p-file-excel'],
-    ['.docx', 'p-file-word'],
-    ['.pdf', 'p-file-pdf'],
-    ['.bmp', 'p-file-png'],
-    ['.gif', 'p-file-png'],
-    ['.tiff', 'p-file-png'],
-    ['.ico', 'p-file-png'],
-    ['.webp', 'p-file-png'],
-    ['.mp4', 'p-file-video'],
-    ['.webm', 'p-file-video'],
-    ['.mov', 'p-file-video'],
-    ['.wmv', 'p-file-video'],
-    ['.mkv', 'p-file-video'],
-    ['.avi', 'p-file-video'],
-    ['.wma', 'p-file-video'],
-    ['.flv', 'p-file-video'],
-    ['.wav', 'p-file-mp3'],
-    ['.wma', 'p-file-mp3'],
-    ['.ape', 'p-file-mp3'],
-    ['.acc', 'p-file-mp3'],
-    ['.ogg', 'p-file-mp3'],
-    ['.flac', 'p-file-mp3'],
-]);
-
-export function getIcon(extension: string): string {
-    if (icons.get(extension) != undefined) {
-        const icon = icons.get(extension);
-        return String(icon);
-    } else {
-        return 'p-file-normal';
-    }
-}
-
-export function checkIp(value: string): boolean {
-    if (value === '') {
-        return true;
-    }
-    const reg =
-        /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
-    if (!reg.test(value) && value !== '') {
-        return true;
-    } else {
-        return false;
-    }
-}
-
-export function checkDomain(value: string): boolean {
-    if (value === '') {
-        return true;
-    }
-    const reg = /^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
-    if (!reg.test(value) && value !== '') {
-        return true;
-    } else {
-        return false;
-    }
-}
-
-export function isDomain(value: string): boolean {
-    if (value === '') {
-        return true;
-    }
-    const reg = /^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]$/i;
-    if (value !== '' && reg.test(value)) {
-        return true;
-    } else {
-        return false;
-    }
-}
-
-export function checkIpV4V6(value: string): boolean {
-    if (value === '') {
-        return true;
-    }
-    const IPv4SegmentFormat = '(?:[0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])';
-    const IPv4AddressFormat = `(${IPv4SegmentFormat}[.]){3}${IPv4SegmentFormat}`;
-    const IPv4AddressRegExp = new RegExp(`^${IPv4AddressFormat}$`);
-    const IPv6SegmentFormat = '(?:[0-9a-fA-F]{1,4})';
-    const IPv6AddressRegExp = new RegExp(
-        '^(' +
-            `(?:${IPv6SegmentFormat}:){7}(?:${IPv6SegmentFormat}|:)|` +
-            `(?:${IPv6SegmentFormat}:){6}(?:${IPv4AddressFormat}|:${IPv6SegmentFormat}|:)|` +
-            `(?:${IPv6SegmentFormat}:){5}(?::${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,2}|:)|` +
-            `(?:${IPv6SegmentFormat}:){4}(?:(:${IPv6SegmentFormat}){0,1}:${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,3}|:)|` +
-            `(?:${IPv6SegmentFormat}:){3}(?:(:${IPv6SegmentFormat}){0,2}:${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,4}|:)|` +
-            `(?:${IPv6SegmentFormat}:){2}(?:(:${IPv6SegmentFormat}){0,3}:${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,5}|:)|` +
-            `(?:${IPv6SegmentFormat}:){1}(?:(:${IPv6SegmentFormat}){0,4}:${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,6}|:)|` +
-            `(?::((?::${IPv6SegmentFormat}){0,5}:${IPv4AddressFormat}|(?::${IPv6SegmentFormat}){1,7}|:))` +
-            ')(%[0-9a-zA-Z-.:]{1,})?$',
-    );
-    if (!IPv4AddressRegExp.test(value) && !IPv6AddressRegExp.test(value) && value !== '') {
-        return true;
-    } else {
-        return false;
-    }
-}
-
-export function checkIpV6(value: string): boolean {
-    if (value === '' || typeof value === 'undefined' || value == null) {
-        return true;
-    } else {
-        const IPv4SegmentFormat = '(?:[0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])';
-        const IPv4AddressFormat = `(${IPv4SegmentFormat}[.]){3}${IPv4SegmentFormat}`;
-        const IPv6SegmentFormat = '(?:[0-9a-fA-F]{1,4})';
-        const IPv6AddressRegExp = new RegExp(
-            '^(' +
-                `(?:${IPv6SegmentFormat}:){7}(?:${IPv6SegmentFormat}|:)|` +
-                `(?:${IPv6SegmentFormat}:){6}(?:${IPv4AddressFormat}|:${IPv6SegmentFormat}|:)|` +
-                `(?:${IPv6SegmentFormat}:){5}(?::${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,2}|:)|` +
-                `(?:${IPv6SegmentFormat}:){4}(?:(:${IPv6SegmentFormat}){0,1}:${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,3}|:)|` +
-                `(?:${IPv6SegmentFormat}:){3}(?:(:${IPv6SegmentFormat}){0,2}:${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,4}|:)|` +
-                `(?:${IPv6SegmentFormat}:){2}(?:(:${IPv6SegmentFormat}){0,3}:${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,5}|:)|` +
-                `(?:${IPv6SegmentFormat}:){1}(?:(:${IPv6SegmentFormat}){0,4}:${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,6}|:)|` +
-                `(?::((?::${IPv6SegmentFormat}){0,5}:${IPv4AddressFormat}|(?::${IPv6SegmentFormat}){1,7}|:))` +
-                ')(%[0-9a-zA-Z-.:]{1,})?$',
-        );
-        if (!IPv6AddressRegExp.test(value) && value !== '') {
-            return true;
-        } else {
-            return false;
-        }
-    }
-}
-
-export function checkCidr(value: string): boolean {
-    if (value === '') {
-        return true;
-    }
-    const reg =
-        /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\/([0-9]|[1-2][0-9]|3[0-2]))?$/;
-    if (!reg.test(value) && value !== '') {
-        return true;
-    } else {
-        return false;
-    }
-}
-export function checkCidrV6(value: string): boolean {
-    if (value === '') {
-        return true;
-    }
-    if (checkIpV6(value.split('/')[0])) {
-        return true;
-    }
-    const reg = /^(?:[0-9]|[1-9][0-9]|1[0-1][0-9]|12[0-8])$/;
-    if (!reg.test(value.split('/')[1])) {
-        return true;
-    }
-    return false;
-}
-
-export function checkPort(value: string): boolean {
-    if (Number(value) <= 0) {
-        return true;
-    }
-    const reg = /^([1-9](\d{0,3}))$|^([1-5]\d{4})$|^(6[0-4]\d{3})$|^(65[0-4]\d{2})$|^(655[0-2]\d)$|^(6553[0-5])$/;
-    return !reg.test(value) && value !== '';
-}
-
-export function getProvider(provider: string): string {
-    switch (provider) {
-        case 'dnsAccount':
-            return i18n.global.t('website.dnsAccount');
-        case 'dnsManual':
-            return i18n.global.t('website.dnsManual');
-        case 'http':
-            return 'HTTP';
-        case 'selfSigned':
-            return i18n.global.t('ssl.selfSigned');
-        case 'fromMaster':
-            return i18n.global.t('ssl.fromMaster');
-        default:
-            return i18n.global.t('ssl.manualCreate');
-    }
-}
-
-export function transferTimeToSecond(item: string): any {
-    if (item.indexOf('s') !== -1) {
-        return Number(item.replaceAll('s', ''));
-    }
-    if (item.indexOf('m') !== -1) {
-        return Number(item.replaceAll('m', '')) * 60;
-    }
-    if (item.indexOf('h') !== -1) {
-        return Number(item.replaceAll('h', '')) * 60 * 60;
-    }
-    if (item.indexOf('d') !== -1) {
-        return Number(item.replaceAll('d', '')) * 60 * 60 * 24;
-    }
-    return Number(item);
-}
-export function splitTime(item: string): any {
-    if (item.indexOf('s') !== -1) {
-        return { time: Number(item.replaceAll('s', '')), unit: 's' };
-    }
-    if (item.indexOf('m') !== -1) {
-        return { time: Number(item.replaceAll('m', '')), unit: 'm' };
-    }
-    if (item.indexOf('h') !== -1) {
-        return { time: Number(item.replaceAll('h', '')), unit: 'h' };
-    }
-    if (item.indexOf('d') !== -1) {
-        return { time: Number(item.replaceAll('d', '')), unit: 'd' };
-    }
-    if (item.indexOf('y') !== -1) {
-        return { time: Number(item.replaceAll('y', '')), unit: 'y' };
-    }
-    return { time: Number(item), unit: 's' };
-}
-export function transTimeUnit(val: string): any {
-    if (val.indexOf('s') !== -1) {
-        return val.replaceAll('s', i18n.global.t('commons.units.second'));
-    }
-    if (val.indexOf('m') !== -1) {
-        return val.replaceAll('m', i18n.global.t('commons.units.minute'));
-    }
-    if (val.indexOf('h') !== -1) {
-        return val.replaceAll('h', i18n.global.t('commons.units.hour'));
-    }
-    if (val.indexOf('d') !== -1) {
-        return val.replaceAll('d', i18n.global.t('commons.units.day'));
-    }
-    if (val.indexOf('y') !== -1) {
-        return val.replaceAll('y', i18n.global.t('commons.units.year'));
-    }
-    return val + i18n.global.t('commons.units.second');
-}
-export function splitTimeFromSecond(item: number): any {
-    if (item < 60) return { timeItem: item, timeUnit: 's' };
-    if (item < 3600) return { timeItem: item / 60, timeUnit: 'm' };
-    return { timeItem: item / 3600, timeUnit: 'h' };
-}
-
-export function splitHttp(url: string) {
-    if (url.indexOf('https://') != -1) {
-        return { proto: 'https', url: url.replaceAll('https://', '') };
-    }
-    if (url.indexOf('http://') != -1) {
-        return { proto: 'http', url: url.replaceAll('http://', '') };
-    }
-    return { proto: '', url: url };
-}
-export function spliceHttp(proto: string, url: string) {
-    return proto + '://' + url.replaceAll('https://', '').replaceAll('http://', '');
-}
-
-export function getAge(d1: string): string {
-    const dateBegin = new Date(d1);
-    const dateEnd = new Date();
-    const dateDiff = dateEnd.getTime() - dateBegin.getTime();
-    const dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));
-    const leave1 = dateDiff % (24 * 3600 * 1000);
-    const hours = Math.floor(leave1 / (3600 * 1000));
-    const leave2 = leave1 % (3600 * 1000);
-    const minutes = Math.floor(leave2 / (60 * 1000));
-
-    let res = '';
-    if (dayDiff > 0) {
-        res += String(dayDiff) + ' ' + i18n.global.t('commons.units.day', dayDiff) + ' ';
-        if (hours <= 0) {
-            return res;
-        }
-    }
-    if (hours > 0) {
-        res += String(hours) + ' ' + i18n.global.t('commons.units.hour', hours);
-        return res;
-    }
-    if (minutes > 0) {
-        res += String(minutes) + ' ' + i18n.global.t('commons.units.minute', minutes);
-        return res;
-    }
-    return i18n.global.t('app.less1Minute');
-}
-
-export function isJson(str: string) {
-    try {
-        if (typeof JSON.parse(str) === 'object') {
-            return true;
-        }
-    } catch {
-        return false;
-    }
-}
-
-export function toLowerCase(str: string) {
-    return str.toLowerCase();
-}
-
-export function buildFileDownloadUrl(filePath: string, currentNode: string): string {
-    const base = `${import.meta.env.VITE_API_URL as string}/files/download?operateNode=${currentNode}&`;
-    return base + 'path=' + encodeURIComponent(filePath);
-}
-
-export function buildFileSharePageUrl(code: string, currentNode: string): string {
-    const shareUrl = new URL(`/s/${encodeURIComponent(code)}`, window.location.origin);
-    shareUrl.searchParams.set('operateNode', currentNode);
-    return shareUrl.toString();
-}
-
-export function buildFileShareDownloadUrl(code: string, currentNode: string, password?: string): string {
-    const apiBase = import.meta.env.VITE_API_URL as string;
-    const normalizedBase = apiBase.replace(/\/$/, '');
-    const shareUrl = /^https?:\/\//i.test(normalizedBase)
-        ? new URL(`${normalizedBase}/files/share/download`)
-        : new URL(`${normalizedBase}/files/share/download`, window.location.origin);
-    shareUrl.searchParams.set('operateNode', currentNode);
-    shareUrl.searchParams.set('code', code);
-    if (password && password.length > 0) {
-        shareUrl.searchParams.set('password', password);
-    }
-    return shareUrl.toString();
-}
-
-export function buildFileShareQrCodeUrl(code: string, currentNode: string): string {
-    const apiBase = import.meta.env.VITE_API_URL as string;
-    const normalizedBase = apiBase.replace(/\/$/, '');
-    const shareUrl = /^https?:\/\//i.test(normalizedBase)
-        ? new URL(`${normalizedBase}/files/share/qrcode`)
-        : new URL(`${normalizedBase}/files/share/qrcode`, window.location.origin);
-    shareUrl.searchParams.set('operateNode', currentNode);
-    shareUrl.searchParams.set('code', code);
-    return shareUrl.toString();
-}
-
-export function downloadFile(filePath: string, currentNode: string) {
-    window.open(buildFileDownloadUrl(filePath, currentNode), '_blank');
-}
-
-export function downloadWithContent(content: string, fileName: string) {
-    const downloadUrl = window.URL.createObjectURL(new Blob([content]));
-    const a = document.createElement('a');
-    a.style.display = 'none';
-    a.href = downloadUrl;
-    a.download = fileName;
-    const event = new MouseEvent('click');
-    a.dispatchEvent(event);
-}
-export function getDateStr() {
-    let now: Date = new Date();
-
-    let year: number = now.getFullYear();
-    let month: number = now.getMonth() + 1;
-    let date: number = now.getDate();
-    let hours: number = now.getHours();
-    let minutes: number = now.getMinutes();
-    let seconds: number = now.getSeconds();
-
-    let timestamp: string = `${year}-${month < 10 ? '0' + month : month}-${date < 10 ? '0' + date : date}-${
-        hours < 10 ? '0' + hours : hours
-    }-${minutes < 10 ? '0' + minutes : minutes}-${seconds < 10 ? '0' + seconds : seconds}`;
-
-    return timestamp;
-}
-
-export function getAccountName(type: string) {
-    for (const i of AcmeAccountTypes) {
-        if (i.value === type) {
-            return i.label;
-        }
-    }
-    return '';
-}
-
-export function getKeyName(type: string) {
-    for (const i of KeyTypes) {
-        if (i.value === type) {
-            return i.label;
-        }
-    }
-    return '';
-}
-
-export function getDNSName(type: string) {
-    for (const i of DNSTypes) {
-        if (i.value === type) {
-            return i.label;
-        }
-    }
-    return '';
-}
-
-export async function copyText(content: string) {
-    try {
-        await toClipboard(content);
-        MsgSuccess(i18n.global.t('commons.msg.copySuccess'));
-    } catch (e) {
-        MsgError(i18n.global.t('commons.msg.copyFailed'));
-    }
-}
-
-export function getAction(action: string) {
-    if (action == '') {
-        return '';
-    }
-    return i18n.global.t(`xpack.waf.${action}`);
-}
-
-export function getLanguage() {
-    return localStorage.getItem('lang') || 'zh';
-}
-
-function normalizeAppLocaleKey(language: string) {
-    const localeMap: Record<string, string> = {
-        tw: 'zh-hant',
-        'zh-Hant': 'zh-hant',
-        'pt-BR': 'pt-br',
-        'es-ES': 'es-es',
-    };
-    return localeMap[language] || language.toLowerCase();
-}
-
-export function getLabel(row: any) {
-    const language = localStorage.getItem('lang') || 'zh';
-    const lang = normalizeAppLocaleKey(language);
-    if (row.label && typeof row.label[lang] === 'string' && row.label[lang] !== '') {
-        return row.label[lang];
-    }
-    if (language == 'zh' || language == 'tw') {
-        return row.labelZh;
-    } else {
-        return row.labelEn;
-    }
-}
-
-export function getDescription(row: any) {
-    const language = localStorage.getItem('lang') || 'zh';
-    const lang = normalizeAppLocaleKey(language);
-    if (row.description && typeof row.description[lang] === 'string' && row.description[lang] !== '') {
-        return row.description[lang];
-    }
-    return '';
-}
-
-export function emptyLineFilter(str: string, spilt: string) {
-    let list = str.split(spilt);
-    let results = [];
-    for (let i = 0; i < list.length; i++) {
-        if (list[i].trim() !== '') {
-            results.push(list[i]);
-        }
-    }
-    return results.join(spilt);
-}
-
-let fileTypes = {
-    image: ['.jpg', '.jpeg', '.png', '.bmp', '.gif', '.tiff', '.ico', '.svg', '.webp'],
-    compress: ['.zip', '.rar', '.gz', '.war', '.tgz', '.7z', '.tar.gz', '.tar', '.bz2', '.xz', '.tar.bz2', '.tar.xz'],
-    video: ['.mp4', '.webm', '.mov', '.wmv', '.mkv', '.avi', '.wma', '.flv'],
-    audio: ['.mp3', '.wav', '.wma', '.ape', '.acc', '.ogg', '.flac'],
-    pdf: ['.pdf'],
-    word: ['.doc', '.docx'],
-    excel: ['.xls', '.xlsx'],
-    text: ['.iso', '.tiff', '.exe', '.so', '.bz', '.dmg', '.apk', '.pptx', '.ppt', '.xlsb'],
-};
-
-export const getFileType = (extension: string) => {
-    let type = 'text';
-    Object.entries(fileTypes).forEach(([key, extensions]) => {
-        if (extensions.includes(extension.toLowerCase())) {
-            type = key;
-        }
-    });
-    return type;
-};
-
-export const newUUID = () => {
-    return uuidv4();
-};
-
-export const escapeProxyURL = (url: string): string => {
-    const encodeMap: { [key: string]: string } = {
-        ':': '%%3A',
-        '/': '%%2F',
-        '?': '%%3F',
-        '#': '%%23',
-        '[': '%%5B',
-        ']': '%%5D',
-        '@': '%%40',
-        '!': '%%21',
-        $: '%%24',
-        '&': '%%26',
-        "'": '%%27',
-        '(': '%%28',
-        ')': '%%29',
-        '*': '%%2A',
-        '+': '%%2B',
-        ',': '%%2C',
-        ';': '%%3B',
-        '=': '%%3D',
-        '%': '%%25',
-    };
-
-    return url.replace(/[\/:?#[\]@!$&'()*+,;=%~]/g, (match) => encodeMap[match] || match);
-};
-
-export function getRuntimeLabel(type: string) {
-    if (type == 'appstore') {
-        return i18n.global.t('menu.apps');
-    }
-    if (type == 'local') {
-        return i18n.global.t('commons.table.local');
-    }
-    return '';
-}
-
-export function getCookie(name: string) {
-    const value = `; ${document.cookie}`;
-    const parts = value.split(`; ${name}=`);
-    if (parts.length === 2) return parts.pop().split(';').shift();
-}
-
-function rsaEncrypt(data: string, publicKey: string) {
-    if (!data) {
-        return data;
-    }
-    const jsEncrypt = new JSEncrypt();
-    jsEncrypt.setPublicKey(publicKey);
-    return jsEncrypt.encrypt(data);
-}
-
-function aesEncrypt(data: string, key: string) {
-    const keyBytes = CryptoJS.enc.Utf8.parse(key);
-    const iv = CryptoJS.lib.WordArray.random(16);
-    const encrypted = CryptoJS.AES.encrypt(data, keyBytes, {
-        iv: iv,
-        mode: CryptoJS.mode.CBC,
-        padding: CryptoJS.pad.Pkcs7,
-    });
-    return iv.toString(CryptoJS.enc.Base64) + ':' + encrypted.toString();
-}
-
-function urlDecode(value: string): string {
-    return decodeURIComponent(value.replace(/\+/g, ' '));
-}
-
-function generateAESKey(): string {
-    const keyLength = 16;
-    const randomBytes = new Uint8Array(keyLength);
-    crypto.getRandomValues(randomBytes);
-    return Array.from(randomBytes)
-        .map((b) => b.toString(16).padStart(2, '0'))
-        .join('');
-}
-
-export const encryptPassword = (password: string) => {
-    if (!password) {
-        return '';
-    }
-    let rsaPublicKeyText = getCookie('panel_public_key');
-    if (!rsaPublicKeyText) {
-        return password;
-    }
-    rsaPublicKeyText = urlDecode(rsaPublicKeyText);
-
-    const aesKey = generateAESKey();
-    rsaPublicKeyText = rsaPublicKeyText.replaceAll('"', '');
-    const rsaPublicKey = atob(rsaPublicKeyText);
-    const keyCipher = rsaEncrypt(aesKey, rsaPublicKey);
-    const passwordCipher = aesEncrypt(password, aesKey);
-    return `${keyCipher}:${passwordCipher}`;
-};
-
-export async function loadJson(lang: string): Promise<Object> {
-    try {
-        lang = lang == 'zh' ? 'zh' : 'en';
-        const jsonModule = await import(`@/assets/json/china/${lang}.json`);
-        return jsonModule.default;
-    } catch (error) {
-        throw new Error(`Language file not found: ${lang}`);
-    }
-}
-
-export const jumpToPath = (router: any, path: string) => {
-    routerToPathWithQuery(path, { uncached: 'true' });
-};
-
-export const toLink = (link: string) => {
-    const ipv6Regex = /^https?:\/\/([a-f0-9:]+):(\d+)(\/?.*)?$/i;
-    try {
-        if (ipv6Regex.test(link)) {
-            const match = link.match(ipv6Regex);
-            if (match) {
-                const ipv6 = match[1];
-                const port = match[2];
-                const path = match[3] || '';
-                link = `${link.startsWith('https') ? 'https' : 'http'}://[${ipv6}]:${port}${path}`;
-            }
-        }
-        window.open(link, '_blank');
-    } catch (e) {}
-};
-
-export const preloadImage = (url: string): Promise<string> => {
-    return new Promise((resolve) => {
-        const img = new Image();
-        img.onload = () => resolve(url);
-        img.onerror = () => resolve(url);
-        img.src = url;
-    });
-};
-
-export const isSensitiveLinuxPath = (path) => {
-    let sensitivePath = [
-        '/',
-        '/bin',
-        '/sbin',
-        '/usr/bin',
-        '/usr/sbin',
-        '/usr/local/bin',
-        '/etc',
-        '/lib',
-        '/lib64',
-        '/usr/lib',
-        '/home',
-        '/tmp',
-        '/var',
-        '/dev',
-        '/proc',
-        '/sys',
-    ];
-    return sensitivePath.indexOf(path) !== -1;
-};
-
-const convertTypes = ['image', 'video', 'audio'] as const;
-type ConvertType = (typeof convertTypes)[number];
-
-export function isConvertible(extension: string, mimeType: string): boolean {
-    return convertTypes.includes(getFileType(extension) as ConvertType) && /^(image|audio|video)\//.test(mimeType);
-}
-
-function compareById(a, b) {
-    return a.sort - b.sort;
-}
-
-export function sortMenu(arr) {
-    if (!arr || arr.length === 0) {
-        return;
-    }
-    arr.forEach((item) => {
-        if (item.children && Array.isArray(item.children)) {
-            item.children.sort(compareById);
-        }
-    });
-
-    arr.sort(compareById);
-}
-
-export function isPunycoded(domain: string): boolean {
-    return domain.includes('xn--');
-}
-
-export function GetPunyCodeDomain(domain: string): string {
-    if (!domain || typeof domain !== 'string') {
-        return '';
-    }
-
-    const lowerDomain = domain.toLowerCase();
-    if (!lowerDomain.includes('xn--')) {
-        return '';
-    }
-
-    try {
-        const decoded = toUnicode(domain);
-
-        if (decoded === domain) {
-            return '';
-        }
-
-        return decoded;
-    } catch (error) {
-        return '';
-    }
-}
-
-export function base64UrlToBuffer(base64url: string): ArrayBuffer {
-    let base64 = base64url.replace(/-/g, '+').replace(/_/g, '/');
-    const pad = base64.length % 4;
-    if (pad) {
-        base64 += '='.repeat(4 - pad);
-    }
-    const binary = window.atob(base64);
-    const bytes = new Uint8Array(binary.length);
-    for (let i = 0; i < binary.length; i++) {
-        bytes[i] = binary.charCodeAt(i);
-    }
-    return bytes.buffer;
-}
-
-export function bufferToBase64Url(buffer: ArrayBuffer): string {
-    const bytes = new Uint8Array(buffer);
-    let binary = '';
-    bytes.forEach((byte) => {
-        binary += String.fromCharCode(byte);
-    });
-    const base64 = window.btoa(binary);
-    return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
-}
diff --git a/frontend/src/utils/validate.ts b/frontend/src/utils/validate.ts
new file mode 100644
index 000000000000..2f406c1da67e
--- /dev/null
+++ b/frontend/src/utils/validate.ts
@@ -0,0 +1,184 @@
+import i18n from '@/lang';
+
+export function checkIp(value: string): boolean {
+    if (value === '') {
+        return true;
+    }
+    const reg =
+        /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
+    return !reg.test(value) && value !== '';
+}
+
+export function checkDomain(value: string): boolean {
+    if (value === '') {
+        return true;
+    }
+    const reg = /^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
+    return !reg.test(value) && value !== '';
+}
+
+export function isDomain(value: string): boolean {
+    if (value === '') {
+        return true;
+    }
+    const reg = /^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]$/i;
+    return value !== '' && reg.test(value);
+}
+
+export function checkIpV4V6(value: string): boolean {
+    if (value === '') {
+        return true;
+    }
+    const IPv4SegmentFormat = '(?:[0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])';
+    const IPv4AddressFormat = `(${IPv4SegmentFormat}[.]){3}${IPv4SegmentFormat}`;
+    const IPv4AddressRegExp = new RegExp(`^${IPv4AddressFormat}$`);
+    const IPv6SegmentFormat = '(?:[0-9a-fA-F]{1,4})';
+    const IPv6AddressRegExp = new RegExp(
+        '^(' +
+            `(?:${IPv6SegmentFormat}:){7}(?:${IPv6SegmentFormat}|:)|` +
+            `(?:${IPv6SegmentFormat}:){6}(?:${IPv4AddressFormat}|:${IPv6SegmentFormat}|:)|` +
+            `(?:${IPv6SegmentFormat}:){5}(?::${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,2}|:)|` +
+            `(?:${IPv6SegmentFormat}:){4}(?:(:${IPv6SegmentFormat}){0,1}:${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,3}|:)|` +
+            `(?:${IPv6SegmentFormat}:){3}(?:(:${IPv6SegmentFormat}){0,2}:${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,4}|:)|` +
+            `(?:${IPv6SegmentFormat}:){2}(?:(:${IPv6SegmentFormat}){0,3}:${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,5}|:)|` +
+            `(?:${IPv6SegmentFormat}:){1}(?:(:${IPv6SegmentFormat}){0,4}:${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,6}|:)|` +
+            `(?::((?::${IPv6SegmentFormat}){0,5}:${IPv4AddressFormat}|(?::${IPv6SegmentFormat}){1,7}|:))` +
+            ')(%[0-9a-zA-Z-.:]{1,})?$',
+    );
+    return !IPv4AddressRegExp.test(value) && !IPv6AddressRegExp.test(value) && value !== '';
+}
+
+export function checkIpV6(value: string): boolean {
+    if (value === '' || typeof value === 'undefined' || value == null) {
+        return true;
+    }
+    const IPv4SegmentFormat = '(?:[0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])';
+    const IPv4AddressFormat = `(${IPv4SegmentFormat}[.]){3}${IPv4SegmentFormat}`;
+    const IPv6SegmentFormat = '(?:[0-9a-fA-F]{1,4})';
+    const IPv6AddressRegExp = new RegExp(
+        '^(' +
+            `(?:${IPv6SegmentFormat}:){7}(?:${IPv6SegmentFormat}|:)|` +
+            `(?:${IPv6SegmentFormat}:){6}(?:${IPv4AddressFormat}|:${IPv6SegmentFormat}|:)|` +
+            `(?:${IPv6SegmentFormat}:){5}(?::${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,2}|:)|` +
+            `(?:${IPv6SegmentFormat}:){4}(?:(:${IPv6SegmentFormat}){0,1}:${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,3}|:)|` +
+            `(?:${IPv6SegmentFormat}:){3}(?:(:${IPv6SegmentFormat}){0,2}:${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,4}|:)|` +
+            `(?:${IPv6SegmentFormat}:){2}(?:(:${IPv6SegmentFormat}){0,3}:${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,5}|:)|` +
+            `(?:${IPv6SegmentFormat}:){1}(?:(:${IPv6SegmentFormat}){0,4}:${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,6}|:)|` +
+            `(?::((?::${IPv6SegmentFormat}){0,5}:${IPv4AddressFormat}|(?::${IPv6SegmentFormat}){1,7}|:))` +
+            ')(%[0-9a-zA-Z-.:]{1,})?$',
+    );
+    return !IPv6AddressRegExp.test(value) && value !== '';
+}
+
+export function checkCidr(value: string): boolean {
+    if (value === '') {
+        return true;
+    }
+    const reg =
+        /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\/([0-9]|[1-2][0-9]|3[0-2]))?$/;
+    return !reg.test(value) && value !== '';
+}
+
+export function checkCidrV6(value: string): boolean {
+    if (value === '') {
+        return true;
+    }
+    if (checkIpV6(value.split('/')[0])) {
+        return true;
+    }
+    const reg = /^(?:[0-9]|[1-9][0-9]|1[0-1][0-9]|12[0-8])$/;
+    return !reg.test(value.split('/')[1]);
+}
+
+export function checkPort(value: string): boolean {
+    if (Number(value) <= 0) {
+        return true;
+    }
+    const reg = /^([1-9](\d{0,3}))$|^([1-5]\d{4})$|^(6[0-4]\d{3})$|^(65[0-4]\d{2})$|^(655[0-2]\d)$|^(6553[0-5])$/;
+    return !reg.test(value) && value !== '';
+}
+
+export function transferTimeToSecond(item: string): any {
+    if (item.indexOf('s') !== -1) {
+        return Number(item.replaceAll('s', ''));
+    }
+    if (item.indexOf('m') !== -1) {
+        return Number(item.replaceAll('m', '')) * 60;
+    }
+    if (item.indexOf('h') !== -1) {
+        return Number(item.replaceAll('h', '')) * 60 * 60;
+    }
+    if (item.indexOf('d') !== -1) {
+        return Number(item.replaceAll('d', '')) * 60 * 60 * 24;
+    }
+    return Number(item);
+}
+
+export function splitTime(item: string): any {
+    if (item.indexOf('s') !== -1) {
+        return { time: Number(item.replaceAll('s', '')), unit: 's' };
+    }
+    if (item.indexOf('m') !== -1) {
+        return { time: Number(item.replaceAll('m', '')), unit: 'm' };
+    }
+    if (item.indexOf('h') !== -1) {
+        return { time: Number(item.replaceAll('h', '')), unit: 'h' };
+    }
+    if (item.indexOf('d') !== -1) {
+        return { time: Number(item.replaceAll('d', '')), unit: 'd' };
+    }
+    if (item.indexOf('y') !== -1) {
+        return { time: Number(item.replaceAll('y', '')), unit: 'y' };
+    }
+    return { time: Number(item), unit: 's' };
+}
+
+export function transTimeUnit(val: string): any {
+    if (val.indexOf('s') !== -1) {
+        return val.replaceAll('s', i18n.global.t('commons.units.second'));
+    }
+    if (val.indexOf('m') !== -1) {
+        return val.replaceAll('m', i18n.global.t('commons.units.minute'));
+    }
+    if (val.indexOf('h') !== -1) {
+        return val.replaceAll('h', i18n.global.t('commons.units.hour'));
+    }
+    if (val.indexOf('d') !== -1) {
+        return val.replaceAll('d', i18n.global.t('commons.units.day'));
+    }
+    if (val.indexOf('y') !== -1) {
+        return val.replaceAll('y', i18n.global.t('commons.units.year'));
+    }
+    return val + i18n.global.t('commons.units.second');
+}
+
+export function splitTimeFromSecond(item: number): any {
+    if (item < 60) return { timeItem: item, timeUnit: 's' };
+    if (item < 3600) return { timeItem: item / 60, timeUnit: 'm' };
+    return { timeItem: item / 3600, timeUnit: 'h' };
+}
+
+export function splitHttp(url: string) {
+    if (url.indexOf('https://') != -1) {
+        return { proto: 'https', url: url.replaceAll('https://', '') };
+    }
+    if (url.indexOf('http://') != -1) {
+        return { proto: 'http', url: url.replaceAll('http://', '') };
+    }
+    return { proto: '', url: url };
+}
+
+export function spliceHttp(proto: string, url: string) {
+    return proto + '://' + url.replaceAll('https://', '').replaceAll('http://', '');
+}
+
+export function emptyLineFilter(str: string, spilt: string) {
+    let list = str.split(spilt);
+    let results = [];
+    for (let i = 0; i < list.length; i++) {
+        if (list[i].trim() !== '') {
+            results.push(list[i]);
+        }
+    }
+    return results.join(spilt);
+}
diff --git a/frontend/src/views/ai/agents/agent/add/index.vue b/frontend/src/views/ai/agents/agent/add/index.vue
index 3cf09d6e19be..1006a919a5f3 100644
--- a/frontend/src/views/ai/agents/agent/add/index.vue
+++ b/frontend/src/views/ai/agents/agent/add/index.vue
@@ -109,7 +109,7 @@ import { createAgent, getAgentProviders, pageAgentAccounts } from '@/api/modules
 import { AI } from '@/api/interface/ai';
 import { getAppByKey, getAppDetail } from '@/api/modules/app';
 import { getAgentSettingByKey } from '@/api/modules/setting';
-import { getRandomStr, newUUID } from '@/utils/util';
+import { getRandomStr, newUUID } from '@/utils/id';
 import {
     buildDefaultAllowedOrigin,
     getAgentProviderDisplayName,
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/useAgentPluginChannel.ts b/frontend/src/views/ai/agents/agent/config/tabs/channels/useAgentPluginChannel.ts
index 3ea0501d7a2b..6ad58dfafaaa 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/useAgentPluginChannel.ts
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/useAgentPluginChannel.ts
@@ -1,8 +1,7 @@
 import { ref } from 'vue';
 import { AI } from '@/api/interface/ai';
 import { checkAgentPlugin, installAgentPlugin, uninstallAgentPlugin, upgradeAgentPlugin } from '@/api/modules/ai';
-import { newUUID } from '@/utils/util';
-
+import { newUUID } from '@/utils/id';
 export const useAgentPluginChannel = (pluginType: AI.AgentPluginInstallReq['type']) => {
     const agentId = ref(0);
     const loading = ref(false);
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/weixin.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/weixin.vue
index dc74f6ce0175..8a45f77942b3 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/weixin.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/weixin.vue
@@ -30,7 +30,7 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { loginAgentWeixinChannel } from '@/api/modules/ai';
-import { newUUID } from '@/utils/util';
+import { newUUID } from '@/utils/id';
 import TaskLog from '@/components/log/task/index.vue';
 import { isOpenclawCurrentHTTPVersion } from '@/utils/agent';
 import PluginInstall from './components/plugin-install.vue';
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/skills.vue b/frontend/src/views/ai/agents/agent/config/tabs/skills.vue
index f69b999e806e..15dccbded9ab 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/skills.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/skills.vue
@@ -147,7 +147,7 @@ import { AI } from '@/api/interface/ai';
 import { installAgentSkill, listAgentSkills, searchAgentSkills, updateAgentSkill } from '@/api/modules/ai';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 import { MsgSuccess } from '@/utils/message';
-import { newUUID } from '@/utils/util';
+import { newUUID } from '@/utils/id';
 import { isOpenclawCurrentHTTPVersion } from '@/utils/agent';
 import TaskLog from '@/components/log/task/index.vue';
 import VersionSupport from './components/version-support.vue';
diff --git a/frontend/src/views/ai/agents/agent/delete/index.vue b/frontend/src/views/ai/agents/agent/delete/index.vue
index e22947df5b2f..ee4bf453e5ad 100644
--- a/frontend/src/views/ai/agents/agent/delete/index.vue
+++ b/frontend/src/views/ai/agents/agent/delete/index.vue
@@ -29,7 +29,7 @@
 import { FormInstance } from 'element-plus';
 import { ref } from 'vue';
 import { deleteAgent } from '@/api/modules/ai';
-import { newUUID } from '@/utils/util';
+import { newUUID } from '@/utils/id';
 import TaskLog from '@/components/log/task/index.vue';
 
 const open = ref(false);
diff --git a/frontend/src/views/ai/agents/agent/index.vue b/frontend/src/views/ai/agents/agent/index.vue
index 5aa5c862fb76..745dce5a6110 100644
--- a/frontend/src/views/ai/agents/agent/index.vue
+++ b/frontend/src/views/ai/agents/agent/index.vue
@@ -210,7 +210,8 @@ import { AI } from '@/api/interface/ai';
 import { App } from '@/api/interface/app';
 import { Website } from '@/api/interface/website';
 import { SearchWithPage } from '@/api/interface';
-import { dateFormat, newUUID } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
+import { newUUID } from '@/utils/id';
 import { MsgSuccess } from '@/utils/message';
 
 import AddDialog from '@/views/ai/agents/agent/add/index.vue';
diff --git a/frontend/src/views/ai/agents/model/index.vue b/frontend/src/views/ai/agents/model/index.vue
index 7b2962df5b2d..85b4cbe35abe 100644
--- a/frontend/src/views/ai/agents/model/index.vue
+++ b/frontend/src/views/ai/agents/model/index.vue
@@ -57,7 +57,7 @@ import AddDialog from '@/views/ai/agents/model/add/index.vue';
 import ModelPoolDialog from '@/views/ai/agents/model/pool/index.vue';
 import { ElMessageBox } from 'element-plus';
 import i18n from '@/lang';
-import { dateFormat } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
 import { getAgentProviderDisplayName } from '@/utils/agent';
 
 const items = ref<AI.AgentAccountItem[]>([]);
diff --git a/frontend/src/views/ai/gpu/history/index.vue b/frontend/src/views/ai/gpu/history/index.vue
index 0bd0bf9535bb..3a17b23fc9d0 100644
--- a/frontend/src/views/ai/gpu/history/index.vue
+++ b/frontend/src/views/ai/gpu/history/index.vue
@@ -168,7 +168,7 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed } from 'vue';
 import { loadGPUMonitor, getGPUOptions } from '@/api/modules/host';
-import { dateFormatWithoutYear } from '@/utils/util';
+import { dateFormatWithoutYear } from '@/utils/date';
 import RouterMenu from '@/views/ai/gpu/index.vue';
 import { GlobalStore } from '@/store';
 import { shortcuts } from '@/utils/shortcuts';
diff --git a/frontend/src/views/ai/mcp/server/bind/index.vue b/frontend/src/views/ai/mcp/server/bind/index.vue
index 8e971b54320e..3a7a8ccefd28 100644
--- a/frontend/src/views/ai/mcp/server/bind/index.vue
+++ b/frontend/src/views/ai/mcp/server/bind/index.vue
@@ -93,7 +93,8 @@ import { listSSL, searchAcmeAccount } from '@/api/modules/website';
 import { Rules } from '@/global/form-rules';
 import { FormInstance, FormRules } from 'element-plus';
 import { reactive, ref } from 'vue';
-import { getAccountName, dateFormatSimple } from '@/utils/util';
+import { getAccountName } from '@/utils/ssl';
+import { dateFormatSimple } from '@/utils/date';
 import { bindMcpDomain, getMcpDomain, updateMcpDomain } from '@/api/modules/ai';
 import { MsgSuccess } from '@/utils/message';
 import i18n from '@/lang';
diff --git a/frontend/src/views/ai/mcp/server/index.vue b/frontend/src/views/ai/mcp/server/index.vue
index e81f3e071c98..95d406f579a2 100644
--- a/frontend/src/views/ai/mcp/server/index.vue
+++ b/frontend/src/views/ai/mcp/server/index.vue
@@ -101,7 +101,7 @@ import { AI } from '@/api/interface/ai';
 import { deleteMcpServer, operateMcpServer, pageMcpServer } from '@/api/modules/ai';
 import RouterMenu from '@/views/ai/mcp/index.vue';
 import { computed, onMounted, reactive, ref } from 'vue';
-import { dateFormat } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
 import McpServerOperate from './operate/index.vue';
 import ComposeLogs from '@/components/log/compose/index.vue';
 import { GlobalStore } from '@/store';
diff --git a/frontend/src/views/ai/model/ollama/add/index.vue b/frontend/src/views/ai/model/ollama/add/index.vue
index 302356a734d2..99e05e7ed158 100644
--- a/frontend/src/views/ai/model/ollama/add/index.vue
+++ b/frontend/src/views/ai/model/ollama/add/index.vue
@@ -42,8 +42,7 @@ import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { MsgSuccess } from '@/utils/message';
 import { createOllamaModel } from '@/api/modules/ai';
-import { newUUID } from '@/utils/util';
-
+import { newUUID } from '@/utils/id';
 const drawerVisible = ref(false);
 const form = reactive({
     name: '',
diff --git a/frontend/src/views/ai/model/ollama/domain/index.vue b/frontend/src/views/ai/model/ollama/domain/index.vue
index 55968696966a..91c479a4e620 100644
--- a/frontend/src/views/ai/model/ollama/domain/index.vue
+++ b/frontend/src/views/ai/model/ollama/domain/index.vue
@@ -98,7 +98,8 @@ import { listSSL, searchAcmeAccount } from '@/api/modules/website';
 import { Rules } from '@/global/form-rules';
 import { FormInstance, FormRules } from 'element-plus';
 import { reactive, ref } from 'vue';
-import { getAccountName, dateFormatSimple } from '@/utils/util';
+import { getAccountName } from '@/utils/ssl';
+import { dateFormatSimple } from '@/utils/date';
 import { bindDomain, getBindDomain, updateBindDomain } from '@/api/modules/ai';
 import { MsgSuccess } from '@/utils/message';
 import i18n from '@/lang';
diff --git a/frontend/src/views/ai/model/ollama/index.vue b/frontend/src/views/ai/model/ollama/index.vue
index 66182e0612c2..ac261acfc62e 100644
--- a/frontend/src/views/ai/model/ollama/index.vue
+++ b/frontend/src/views/ai/model/ollama/index.vue
@@ -193,7 +193,8 @@ import {
 } from '@/api/modules/ai';
 import { AI } from '@/api/interface/ai';
 import { getAppPort } from '@/api/modules/app';
-import { dateFormat, newUUID } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
+import { newUUID } from '@/utils/id';
 import { MsgInfo, MsgSuccess } from '@/utils/message';
 import BindDomain from '@/views/ai/model/ollama/domain/index.vue';
 import { routerToNameWithQuery } from '@/utils/router';
diff --git a/frontend/src/views/ai/model/tensorrt/index.vue b/frontend/src/views/ai/model/tensorrt/index.vue
index af7617ffc054..b95cd4394f68 100644
--- a/frontend/src/views/ai/model/tensorrt/index.vue
+++ b/frontend/src/views/ai/model/tensorrt/index.vue
@@ -83,7 +83,7 @@ import PortJumpDialog from '@/components/port-jump/index.vue';
 import PortJump from '@/views/website/runtime/components/port-jump.vue';
 
 import { reactive, onMounted, ref } from 'vue';
-import { dateFormat } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
 import { AI } from '@/api/interface/ai';
 import { deleteTensorRTLLM, operateTensorRTLLM, pageTensorRTLLM } from '@/api/modules/ai';
 import { ElMessageBox } from 'element-plus';
diff --git a/frontend/src/views/app-store/apps/index.vue b/frontend/src/views/app-store/apps/index.vue
index 5e260e94112f..3b2213535771 100644
--- a/frontend/src/views/app-store/apps/index.vue
+++ b/frontend/src/views/app-store/apps/index.vue
@@ -74,7 +74,7 @@ import { searchApp, syncApp, syncCutomAppStore, syncLocalApp, getCurrentNodeCust
 import Install from '../detail/install/index.vue';
 import router from '@/routers';
 import { MsgSuccess } from '@/utils/message';
-import { newUUID } from '@/utils/util';
+import { newUUID } from '@/utils/id';
 import Detail from '../detail/index.vue';
 import TaskLog from '@/components/log/task/index.vue';
 import bus from '@/global/bus';
@@ -185,7 +185,9 @@ const sync = async () => {
         } else {
             res = await syncApp(syncReq);
         }
+        console.log(res);
         if (res.message != '' && res.message != 'success') {
+            console.log(res.message);
             MsgSuccess(res.message);
         } else {
             openTaskLog(taskID);
diff --git a/frontend/src/views/app-store/detail/form/index.vue b/frontend/src/views/app-store/detail/form/index.vue
index e95c95cc240e..c706597a3b5c 100644
--- a/frontend/src/views/app-store/detail/form/index.vue
+++ b/frontend/src/views/app-store/detail/form/index.vue
@@ -154,7 +154,7 @@ import { ref, watch } from 'vue';
 import Params from '../params/index.vue';
 import { Container } from '@/api/interface/container';
 import CodemirrorPro from '@/components/codemirror-pro/index.vue';
-import { computeSizeFromMB } from '@/utils/util';
+import { computeSizeFromMB } from '@/utils/size';
 import { loadResourceLimit } from '@/api/modules/container';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 import { loadOptionalComponent } from '@/extensions/optional';
diff --git a/frontend/src/views/app-store/detail/index.vue b/frontend/src/views/app-store/detail/index.vue
index 2eb6ad1ebb94..4b0187effeda 100644
--- a/frontend/src/views/app-store/detail/index.vue
+++ b/frontend/src/views/app-store/detail/index.vue
@@ -78,7 +78,7 @@ import MarkDownEditor from '@/components/mkdown-editor/index.vue';
 import { getAppByKey, getAppDetail, getAppIconUrl } from '@/api/modules/app';
 import { ref } from 'vue';
 import Install from './install/index.vue';
-import { computeSizeFromMB } from '@/utils/util';
+import { computeSizeFromMB } from '@/utils/size';
 import { jumpToInstall } from '@/utils/app';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 const { currentNode } = useGlobalStore();
diff --git a/frontend/src/views/app-store/detail/install/index.vue b/frontend/src/views/app-store/detail/install/index.vue
index 91f3e6fedc4a..262fe1ff03f8 100644
--- a/frontend/src/views/app-store/detail/install/index.vue
+++ b/frontend/src/views/app-store/detail/install/index.vue
@@ -25,7 +25,7 @@ import { useRouter } from 'vue-router';
 import AppInstallForm from '@/views/app-store/detail/form/index.vue';
 import { installApp } from '@/api/modules/app';
 import { MsgError } from '@/utils/message';
-import { newUUID } from '@/utils/util';
+import { newUUID } from '@/utils/id';
 import { routerToName } from '@/utils/router';
 import TaskLog from '@/components/log/task/index.vue';
 import i18n from '@/lang';
diff --git a/frontend/src/views/app-store/detail/params/index.vue b/frontend/src/views/app-store/detail/params/index.vue
index 74a1f3459f13..d32f779ccaa9 100644
--- a/frontend/src/views/app-store/detail/params/index.vue
+++ b/frontend/src/views/app-store/detail/params/index.vue
@@ -133,11 +133,11 @@
 </template>
 <script lang="ts" setup>
 import { computed, onMounted, reactive, ref } from 'vue';
-import { getRandomStr } from '@/utils/util';
+import { getRandomStr } from '@/utils/id';
 import { getAppService } from '@/api/modules/app';
 import { Rules } from '@/global/form-rules';
 import { App } from '@/api/interface/app';
-import { getDBName, getLabel, getDescription } from '@/utils/util';
+import { getDBName, getLabel, getDescription } from '@/utils/app-store';
 import { getPathByType } from '@/api/modules/files';
 import { loadFormatCollations } from '@/api/modules/database';
 
diff --git a/frontend/src/views/app-store/installed/app/info.vue b/frontend/src/views/app-store/installed/app/info.vue
index 816d887a5233..2d405d458fda 100644
--- a/frontend/src/views/app-store/installed/app/info.vue
+++ b/frontend/src/views/app-store/installed/app/info.vue
@@ -73,8 +73,8 @@
 
 <script lang="ts" setup>
 import { App } from '@/api/interface/app';
-import { getAge, toLink } from '@/utils/util';
-
+import { getAge } from '@/utils/date';
+import { toLink } from '@/utils/browser';
 interface Props {
     installed: App.AppInstalled;
     defaultLink: string;
diff --git a/frontend/src/views/app-store/installed/detail/index.vue b/frontend/src/views/app-store/installed/detail/index.vue
index e60628344f4b..95a886f2591e 100644
--- a/frontend/src/views/app-store/installed/detail/index.vue
+++ b/frontend/src/views/app-store/installed/detail/index.vue
@@ -187,7 +187,8 @@ import { reactive, ref } from 'vue';
 import { FormInstance } from 'element-plus';
 import { Rules, checkNumberRange } from '@/global/form-rules';
 import { MsgError, MsgSuccess } from '@/utils/message';
-import { getLabel, splitHttp, checkIpV4V6, checkDomain } from '@/utils/util';
+import { getLabel } from '@/utils/app-store';
+import { splitHttp, checkIpV4V6, checkDomain } from '@/utils/validate';
 import i18n from '@/lang';
 import { loadResourceLimit } from '@/api/modules/container';
 import { Container } from '@/api/interface/container';
diff --git a/frontend/src/views/app-store/installed/index.vue b/frontend/src/views/app-store/installed/index.vue
index 5e8c2708920f..72e59700790f 100644
--- a/frontend/src/views/app-store/installed/index.vue
+++ b/frontend/src/views/app-store/installed/index.vue
@@ -154,7 +154,7 @@ import Sortable from 'sortablejs';
 import i18n from '@/lang';
 import { ElMessageBox } from 'element-plus';
 import { App } from '@/api/interface/app';
-import { jumpToPath } from '@/utils/util';
+import { jumpToPath } from '@/utils/router';
 import { useRouter } from 'vue-router';
 import { MsgSuccess } from '@/utils/message';
 import { getAgentSettingByKey } from '@/api/modules/setting';
diff --git a/frontend/src/views/container/compose/index.vue b/frontend/src/views/container/compose/index.vue
index 1da93d418cc3..3fd1de566fcd 100644
--- a/frontend/src/views/container/compose/index.vue
+++ b/frontend/src/views/container/compose/index.vue
@@ -491,7 +491,8 @@ import i18n from '@/lang';
 import { Container } from '@/api/interface/container';
 import { routerToFileWithPath } from '@/utils/router';
 import { MsgError, MsgSuccess } from '@/utils/message';
-import { computeCPU, computeSize2, computeSizeForDocker, newUUID } from '@/utils/util';
+import { computeCPU, computeSize2, computeSizeForDocker } from '@/utils/size';
+import { newUUID } from '@/utils/id';
 import { Rules } from '@/global/form-rules';
 import { loadBaseDir } from '@/api/modules/setting';
 import { ElCheckbox, ElForm } from 'element-plus';
diff --git a/frontend/src/views/container/container/commit/index.vue b/frontend/src/views/container/container/commit/index.vue
index d999816ad7be..d0cf9a178aea 100644
--- a/frontend/src/views/container/container/commit/index.vue
+++ b/frontend/src/views/container/container/commit/index.vue
@@ -53,8 +53,7 @@ import i18n from '@/lang';
 import { commitContainer } from '@/api/modules/container';
 import TaskLog from '@/components/log/task/index.vue';
 import { MsgSuccess } from '@/utils/message';
-import { newUUID } from '@/utils/util';
-
+import { newUUID } from '@/utils/id';
 const drawerVisible = ref<boolean>(false);
 const emit = defineEmits<{ (e: 'search'): void }>();
 const loading = ref(false);
diff --git a/frontend/src/views/container/container/file-browser/index.vue b/frontend/src/views/container/container/file-browser/index.vue
index 1adf605a83b5..e58a03a8cdbc 100644
--- a/frontend/src/views/container/container/file-browser/index.vue
+++ b/frontend/src/views/container/container/file-browser/index.vue
@@ -124,8 +124,7 @@ import { MsgError, MsgSuccess, MsgWarning } from '@/utils/message';
 import i18n from '@/lang';
 import { ElInput, ElMessageBox, UploadFile, UploadInstance } from 'element-plus';
 import { Document, FolderOpened, HomeFilled } from '@element-plus/icons-vue';
-import { computeSize2 } from '@/utils/util';
-
+import { computeSize2 } from '@/utils/size';
 const visible = ref(false);
 const title = ref('');
 const containerID = ref('');
diff --git a/frontend/src/views/container/container/index.vue b/frontend/src/views/container/container/index.vue
index 7607530b93a0..119088551e82 100644
--- a/frontend/src/views/container/container/index.vue
+++ b/frontend/src/views/container/container/index.vue
@@ -418,7 +418,8 @@ import { MsgSuccess, MsgWarning } from '@/utils/message';
 import { GlobalStore } from '@/store';
 import { routerToName, routerToNameWithQuery } from '@/utils/router';
 import router from '@/routers';
-import { computeSize2, computeSizeForDocker, computeCPU, newUUID } from '@/utils/util';
+import { computeSize2, computeSizeForDocker, computeCPU } from '@/utils/size';
+import { newUUID } from '@/utils/id';
 import { updateCommonDescription } from '@/api/modules/setting';
 const globalStore = GlobalStore();
 
diff --git a/frontend/src/views/container/container/inspect/index.vue b/frontend/src/views/container/container/inspect/index.vue
index aa46f3a3ecb1..f079e4be5696 100644
--- a/frontend/src/views/container/container/inspect/index.vue
+++ b/frontend/src/views/container/container/inspect/index.vue
@@ -170,7 +170,7 @@
 import { ref } from 'vue';
 import CodemirrorPro from '@/components/codemirror-pro/index.vue';
 import { routerToFileWithPath } from '@/utils/router';
-import { copyText } from '@/utils/util';
+import { copyText } from '@/utils/clipboard';
 import i18n from '@/lang';
 
 const visible = ref(false);
diff --git a/frontend/src/views/container/container/monitor/index.vue b/frontend/src/views/container/container/monitor/index.vue
index a46d87b3db4d..549a1dfda3bf 100644
--- a/frontend/src/views/container/container/monitor/index.vue
+++ b/frontend/src/views/container/container/monitor/index.vue
@@ -59,7 +59,7 @@
 <script lang="ts" setup>
 import { onBeforeUnmount, ref } from 'vue';
 import { containerStats } from '@/api/modules/container';
-import { dateFormatForSecond } from '@/utils/util';
+import { dateFormatForSecond } from '@/utils/date';
 import VCharts from '@/components/v-charts/index.vue';
 import i18n from '@/lang';
 
diff --git a/frontend/src/views/container/container/operate/index.vue b/frontend/src/views/container/container/operate/index.vue
index 261f04f9a126..c70a658562a0 100644
--- a/frontend/src/views/container/container/operate/index.vue
+++ b/frontend/src/views/container/container/operate/index.vue
@@ -357,7 +357,8 @@ import {
 import { Container } from '@/api/interface/container';
 import { MsgError } from '@/utils/message';
 import TaskLog from '@/components/log/task/index.vue';
-import { checkIpV4V6, checkPort, newUUID } from '@/utils/util';
+import { checkIpV4V6, checkPort } from '@/utils/validate';
+import { newUUID } from '@/utils/id';
 import router from '@/routers';
 import TerminalDialog from '@/views/host/file-management/terminal/index.vue';
 import { routerToName, routerToNameWithQuery } from '@/utils/router';
diff --git a/frontend/src/views/container/container/prune/index.vue b/frontend/src/views/container/container/prune/index.vue
index 124268d86086..feeb0996330d 100644
--- a/frontend/src/views/container/container/prune/index.vue
+++ b/frontend/src/views/container/container/prune/index.vue
@@ -25,8 +25,7 @@
 import { containerPrune } from '@/api/modules/container';
 import TaskLog from '@/components/log/task/index.vue';
 import { ref } from 'vue';
-import { newUUID } from '@/utils/util';
-
+import { newUUID } from '@/utils/id';
 const loading = ref(false);
 const open = ref<boolean>(false);
 const taskLogRef = ref();
diff --git a/frontend/src/views/container/container/upgrade/index.vue b/frontend/src/views/container/container/upgrade/index.vue
index b0afddf62686..0b18ed76be46 100644
--- a/frontend/src/views/container/container/upgrade/index.vue
+++ b/frontend/src/views/container/container/upgrade/index.vue
@@ -69,7 +69,7 @@ import { Rules } from '@/global/form-rules';
 import TaskLog from '@/components/log/task/index.vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
-import { newUUID } from '@/utils/util';
+import { newUUID } from '@/utils/id';
 import { CheckboxValueType, ElForm } from 'element-plus';
 import { reactive, ref } from 'vue';
 
diff --git a/frontend/src/views/container/dashboard/index.vue b/frontend/src/views/container/dashboard/index.vue
index 9cd417f02d67..8fe0a0273d12 100644
--- a/frontend/src/views/container/dashboard/index.vue
+++ b/frontend/src/views/container/dashboard/index.vue
@@ -197,7 +197,8 @@
 import { containerItemStats, containerPrune, loadContainerStatus, loadDaemonJson } from '@/api/modules/container';
 import DockerStatus from '@/views/container/docker-status/index.vue';
 import { getSettingInfo } from '@/api/modules/setting';
-import { computeSize2, newUUID } from '@/utils/util';
+import { computeSize2 } from '@/utils/size';
+import { newUUID } from '@/utils/id';
 import TaskLog from '@/components/log/task/index.vue';
 import { routerToName } from '@/utils/router';
 import { onMounted, reactive, ref } from 'vue';
diff --git a/frontend/src/views/container/image/build/index.vue b/frontend/src/views/container/image/build/index.vue
index c3ae53118c7d..aceda466b23c 100644
--- a/frontend/src/views/container/image/build/index.vue
+++ b/frontend/src/views/container/image/build/index.vue
@@ -60,7 +60,7 @@ import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { imageBuild } from '@/api/modules/container';
 import TaskLog from '@/components/log/task/index.vue';
-import { newUUID } from '@/utils/util';
+import { newUUID } from '@/utils/id';
 import { MsgSuccess } from '@/utils/message';
 
 const drawerVisible = ref(false);
diff --git a/frontend/src/views/container/image/index.vue b/frontend/src/views/container/image/index.vue
index 9dc37766dc72..e5b23adf1358 100644
--- a/frontend/src/views/container/image/index.vue
+++ b/frontend/src/views/container/image/index.vue
@@ -157,7 +157,9 @@
 
 <script lang="ts" setup>
 import { reactive, ref, computed } from 'vue';
-import { dateFormat, newUUID, computeSize2 } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
+import { newUUID } from '@/utils/id';
+import { computeSize2 } from '@/utils/size';
 import { Container } from '@/api/interface/container';
 import Pull from '@/views/container/image/pull/index.vue';
 import Tag from '@/views/container/image/tag/index.vue';
diff --git a/frontend/src/views/container/image/load/index.vue b/frontend/src/views/container/image/load/index.vue
index f1d3865f2d33..0923eb9cc241 100644
--- a/frontend/src/views/container/image/load/index.vue
+++ b/frontend/src/views/container/image/load/index.vue
@@ -33,8 +33,7 @@ import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { imageLoad } from '@/api/modules/container';
 import { MsgSuccess } from '@/utils/message';
-import { newUUID } from '@/utils/util';
-
+import { newUUID } from '@/utils/id';
 const loading = ref(false);
 const fileRef = ref();
 const taskLogRef = ref();
diff --git a/frontend/src/views/container/image/prune/index.vue b/frontend/src/views/container/image/prune/index.vue
index 6ba356ff434e..993cb5deeb45 100644
--- a/frontend/src/views/container/image/prune/index.vue
+++ b/frontend/src/views/container/image/prune/index.vue
@@ -45,7 +45,7 @@
 import { containerPrune, imageRemove, listAllImage } from '@/api/modules/container';
 import TaskLog from '@/components/log/task/index.vue';
 import i18n from '@/lang';
-import { newUUID } from '@/utils/util';
+import { newUUID } from '@/utils/id';
 import { ref } from 'vue';
 
 const dialogVisible = ref(false);
diff --git a/frontend/src/views/container/image/pull/index.vue b/frontend/src/views/container/image/pull/index.vue
index 789eb5d953ef..9e9c0a1120e2 100644
--- a/frontend/src/views/container/image/pull/index.vue
+++ b/frontend/src/views/container/image/pull/index.vue
@@ -42,8 +42,7 @@ import { imagePull } from '@/api/modules/container';
 import { Container } from '@/api/interface/container';
 import TaskLog from '@/components/log/task/index.vue';
 import { MsgSuccess } from '@/utils/message';
-import { newUUID } from '@/utils/util';
-
+import { newUUID } from '@/utils/id';
 const drawerVisible = ref(false);
 const form = reactive({
     taskID: '',
diff --git a/frontend/src/views/container/image/push/index.vue b/frontend/src/views/container/image/push/index.vue
index 6ff799a3eb7f..0e6269b842be 100644
--- a/frontend/src/views/container/image/push/index.vue
+++ b/frontend/src/views/container/image/push/index.vue
@@ -44,8 +44,7 @@ import { imagePush } from '@/api/modules/container';
 import { Container } from '@/api/interface/container';
 import { MsgSuccess } from '@/utils/message';
 import TaskLog from '@/components/log/task/index.vue';
-import { newUUID } from '@/utils/util';
-
+import { newUUID } from '@/utils/id';
 const drawerVisible = ref(false);
 const taskLogRef = ref();
 const form = reactive({
diff --git a/frontend/src/views/container/image/save/index.vue b/frontend/src/views/container/image/save/index.vue
index 6e9ca407f7e3..86a2260fd70a 100644
--- a/frontend/src/views/container/image/save/index.vue
+++ b/frontend/src/views/container/image/save/index.vue
@@ -48,8 +48,7 @@ import { imageSave } from '@/api/modules/container';
 import { Container } from '@/api/interface/container';
 import TaskLog from '@/components/log/task/index.vue';
 import { MsgSuccess } from '@/utils/message';
-import { newUUID } from '@/utils/util';
-
+import { newUUID } from '@/utils/id';
 const loading = ref(false);
 const fileRef = ref();
 const taskLogRef = ref();
diff --git a/frontend/src/views/container/network/create/index.vue b/frontend/src/views/container/network/create/index.vue
index 6e5c3a2a5a00..b1797b4ebc6c 100644
--- a/frontend/src/views/container/network/create/index.vue
+++ b/frontend/src/views/container/network/create/index.vue
@@ -143,7 +143,7 @@ import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { createNetwork } from '@/api/modules/container';
 import { MsgSuccess } from '@/utils/message';
-import { checkIp, checkIpV6 } from '@/utils/util';
+import { checkIp, checkIpV6 } from '@/utils/validate';
 import { getNetworkOptions } from '@/api/modules/host';
 
 const loading = ref(false);
diff --git a/frontend/src/views/container/network/detail/index.vue b/frontend/src/views/container/network/detail/index.vue
index b12eca856b5a..d1a82a509b66 100644
--- a/frontend/src/views/container/network/detail/index.vue
+++ b/frontend/src/views/container/network/detail/index.vue
@@ -113,8 +113,7 @@
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
 import CodemirrorPro from '@/components/codemirror-pro/index.vue';
-import { copyText } from '@/utils/util';
-
+import { copyText } from '@/utils/clipboard';
 const visible = ref(false);
 const activeTab = ref('overview');
 const networkData = ref<any>(null);
diff --git a/frontend/src/views/container/network/index.vue b/frontend/src/views/container/network/index.vue
index 909c6de76a7b..9ea84b80c2dc 100644
--- a/frontend/src/views/container/network/index.vue
+++ b/frontend/src/views/container/network/index.vue
@@ -96,7 +96,8 @@
 import CreateDialog from '@/views/container/network/create/index.vue';
 import DetailDrawer from '@/views/container/network/detail/index.vue';
 import { reactive, ref } from 'vue';
-import { dateFormat, newUUID } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
+import { newUUID } from '@/utils/id';
 import { deleteNetwork, searchNetwork, inspect, containerPrune } from '@/api/modules/container';
 import { Container } from '@/api/interface/container';
 import TaskLog from '@/components/log/task/index.vue';
diff --git a/frontend/src/views/container/repo/index.vue b/frontend/src/views/container/repo/index.vue
index 15b5f2016024..818c77ee55c6 100644
--- a/frontend/src/views/container/repo/index.vue
+++ b/frontend/src/views/container/repo/index.vue
@@ -61,7 +61,7 @@
 <script lang="ts" setup>
 import OperatorDialog from '@/views/container/repo/operator/index.vue';
 import { reactive, ref } from 'vue';
-import { dateFormat } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
 import { Container } from '@/api/interface/container';
 import { checkRepoStatus, deleteImageRepo, searchImageRepo } from '@/api/modules/container';
 import DockerStatus from '@/views/container/docker-status/index.vue';
diff --git a/frontend/src/views/container/setting/ipv6/index.vue b/frontend/src/views/container/setting/ipv6/index.vue
index 66fc48d9f347..212c508c0677 100644
--- a/frontend/src/views/container/setting/ipv6/index.vue
+++ b/frontend/src/views/container/setting/ipv6/index.vue
@@ -53,7 +53,7 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { updateIpv6Option } from '@/api/modules/container';
-import { checkIpV6 } from '@/utils/util';
+import { checkIpV6 } from '@/utils/validate';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
 
diff --git a/frontend/src/views/container/setting/mirror/index.vue b/frontend/src/views/container/setting/mirror/index.vue
index d2c65baaf41d..e30b7ceb6ece 100644
--- a/frontend/src/views/container/setting/mirror/index.vue
+++ b/frontend/src/views/container/setting/mirror/index.vue
@@ -36,8 +36,7 @@ import { MsgSuccess } from '@/utils/message';
 import ConfirmDialog from '@/components/confirm-dialog/index.vue';
 import { updateDaemonJson } from '@/api/modules/container';
 import { FormInstance } from 'element-plus';
-import { emptyLineFilter } from '@/utils/util';
-
+import { emptyLineFilter } from '@/utils/validate';
 const emit = defineEmits<{ (e: 'search'): void }>();
 
 const confirmDialogRef = ref();
diff --git a/frontend/src/views/container/setting/registry/index.vue b/frontend/src/views/container/setting/registry/index.vue
index 3bb0d4233a5a..65f0d3a2ddf2 100644
--- a/frontend/src/views/container/setting/registry/index.vue
+++ b/frontend/src/views/container/setting/registry/index.vue
@@ -35,8 +35,7 @@ import { MsgSuccess } from '@/utils/message';
 import ConfirmDialog from '@/components/confirm-dialog/index.vue';
 import { updateDaemonJson } from '@/api/modules/container';
 import { FormInstance } from 'element-plus';
-import { emptyLineFilter } from '@/utils/util';
-
+import { emptyLineFilter } from '@/utils/validate';
 const emit = defineEmits<{ (e: 'search'): void }>();
 
 const confirmDialogRef = ref();
diff --git a/frontend/src/views/container/template/index.vue b/frontend/src/views/container/template/index.vue
index 96766ea16fe8..c82fd55c9c82 100644
--- a/frontend/src/views/container/template/index.vue
+++ b/frontend/src/views/container/template/index.vue
@@ -74,7 +74,8 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
-import { dateFormat, downloadWithContent, getCurrentDateFormatted } from '@/utils/util';
+import { dateFormat, getCurrentDateFormatted } from '@/utils/date';
+import { downloadWithContent } from '@/utils/file';
 import { Container } from '@/api/interface/container';
 import DetailDialog from '@/views/container/template/detail/index.vue';
 import ImportDialog from '@/views/container/template/import/index.vue';
diff --git a/frontend/src/views/container/volume/index.vue b/frontend/src/views/container/volume/index.vue
index 0dd35877b6e0..2cc8d092e8fe 100644
--- a/frontend/src/views/container/volume/index.vue
+++ b/frontend/src/views/container/volume/index.vue
@@ -125,7 +125,8 @@ import CreateDialog from '@/views/container/volume/create/index.vue';
 import CodemirrorDrawer from '@/components/codemirror-pro/drawer.vue';
 import DockerStatus from '@/views/container/docker-status/index.vue';
 import { reactive, ref, computed } from 'vue';
-import { dateFormat, newUUID } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
+import { newUUID } from '@/utils/id';
 import { deleteVolume, searchVolume, inspect, containerPrune } from '@/api/modules/container';
 import { Container } from '@/api/interface/container';
 import TaskLog from '@/components/log/task/index.vue';
diff --git a/frontend/src/views/cronjob/cronjob/backup/index.vue b/frontend/src/views/cronjob/cronjob/backup/index.vue
index a89b46ea3546..23b42590a8b6 100644
--- a/frontend/src/views/cronjob/cronjob/backup/index.vue
+++ b/frontend/src/views/cronjob/cronjob/backup/index.vue
@@ -54,7 +54,9 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
-import { computeSize, dateFormat, downloadFile } from '@/utils/util';
+import { computeSize } from '@/utils/size';
+import { dateFormat } from '@/utils/date';
+import { downloadFile } from '@/utils/file';
 import i18n from '@/lang';
 import { downloadBackupRecord, loadRecordSize, searchBackupRecordsByCronjob } from '@/api/modules/backup';
 import { Backup } from '@/api/interface/backup';
diff --git a/frontend/src/views/cronjob/cronjob/helper.ts b/frontend/src/views/cronjob/cronjob/helper.ts
index 94e3849c5ace..46ae342fa31b 100644
--- a/frontend/src/views/cronjob/cronjob/helper.ts
+++ b/frontend/src/views/cronjob/cronjob/helper.ts
@@ -1,7 +1,6 @@
 import { Cronjob } from '@/api/interface/cronjob';
 import i18n from '@/lang';
-import { loadZero } from '@/utils/util';
-
+import { loadZero } from '@/utils/date';
 export const specOptions = [
     { label: i18n.global.t('cronjob.perMonth'), value: 'perMonth' },
     { label: i18n.global.t('cronjob.perWeek'), value: 'perWeek' },
diff --git a/frontend/src/views/cronjob/cronjob/index.vue b/frontend/src/views/cronjob/cronjob/index.vue
index 9b0769fba6fe..222911c85ebf 100644
--- a/frontend/src/views/cronjob/cronjob/index.vue
+++ b/frontend/src/views/cronjob/cronjob/index.vue
@@ -236,7 +236,7 @@ import { ElMessageBox } from 'element-plus';
 import { MsgSuccess } from '@/utils/message';
 import { hasBackup, transSpecToStr } from './helper';
 import { GlobalStore } from '@/store';
-import { getCurrentDateFormatted } from '@/utils/util';
+import { getCurrentDateFormatted } from '@/utils/date';
 import { getGroupList } from '@/api/modules/group';
 import { routerToNameWithQuery } from '@/utils/router';
 
diff --git a/frontend/src/views/cronjob/cronjob/operate/index.vue b/frontend/src/views/cronjob/cronjob/operate/index.vue
index 1fc943864844..2671cfbf43f5 100644
--- a/frontend/src/views/cronjob/cronjob/operate/index.vue
+++ b/frontend/src/views/cronjob/cronjob/operate/index.vue
@@ -865,7 +865,7 @@ import { loadContainerUsers } from '@/api/modules/container';
 import { storeToRefs } from 'pinia';
 import { GlobalStore } from '@/store';
 import LicenseImport from '@/components/license-import/index.vue';
-import { splitTimeFromSecond, transferTimeToSecond } from '@/utils/util';
+import { splitTimeFromSecond, transferTimeToSecond } from '@/utils/validate';
 import { getGroupList } from '@/api/modules/group';
 import { routerToName, routerToPath } from '@/utils/router';
 import { loadBaseDir } from '@/api/modules/setting';
diff --git a/frontend/src/views/cronjob/cronjob/record/index.vue b/frontend/src/views/cronjob/cronjob/record/index.vue
index 75ae4a862f3b..3ad2ca209378 100644
--- a/frontend/src/views/cronjob/cronjob/record/index.vue
+++ b/frontend/src/views/cronjob/cronjob/record/index.vue
@@ -252,7 +252,7 @@
 import { reactive, ref } from 'vue';
 import { Cronjob } from '@/api/interface/cronjob';
 import { searchRecords, handleOnce, updateStatus, cleanRecords, stopCronjob } from '@/api/modules/cronjob';
-import { dateFormat } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
 import LogFile from '@/components/log/file/index.vue';
 import i18n from '@/lang';
 import { ElMessageBox } from 'element-plus';
diff --git a/frontend/src/views/cronjob/library/index.vue b/frontend/src/views/cronjob/library/index.vue
index 57c121eb8263..cd4305a5239b 100644
--- a/frontend/src/views/cronjob/library/index.vue
+++ b/frontend/src/views/cronjob/library/index.vue
@@ -120,7 +120,9 @@
 </template>
 
 <script setup lang="ts">
-import { dateFormat, deepCopy, getCurrentDateFormatted, newUUID } from '@/utils/util';
+import { dateFormat, getCurrentDateFormatted } from '@/utils/date';
+import { deepCopy } from '@/utils/misc';
+import { newUUID } from '@/utils/id';
 import GroupDialog from '@/components/group/index.vue';
 import TaskLog from '@/components/log/task/index.vue';
 import OperateDialog from '@/views/cronjob/library/operate/index.vue';
diff --git a/frontend/src/views/database/mysql/conn/index.vue b/frontend/src/views/database/mysql/conn/index.vue
index fe1394a5ec72..74530a5a0428 100644
--- a/frontend/src/views/database/mysql/conn/index.vue
+++ b/frontend/src/views/database/mysql/conn/index.vue
@@ -125,7 +125,8 @@ import { ElForm } from 'element-plus';
 import { getDatabase, loadRemoteAccess, updateMysqlAccess, updateMysqlPassword } from '@/api/modules/database';
 import { getAppConnInfo } from '@/api/modules/app';
 import { MsgSuccess } from '@/utils/message';
-import { getRandomStr, copyText } from '@/utils/util';
+import { getRandomStr } from '@/utils/id';
+import { copyText } from '@/utils/clipboard';
 import { getAgentSettingInfo } from '@/api/modules/setting';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
diff --git a/frontend/src/views/database/mysql/create/index.vue b/frontend/src/views/database/mysql/create/index.vue
index c6acc180fdab..2406e3f47723 100644
--- a/frontend/src/views/database/mysql/create/index.vue
+++ b/frontend/src/views/database/mysql/create/index.vue
@@ -76,8 +76,7 @@ import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { addMysqlDB, loadFormatCollations } from '@/api/modules/database';
 import { MsgSuccess } from '@/utils/message';
-import { getRandomStr } from '@/utils/util';
-
+import { getRandomStr } from '@/utils/id';
 const loading = ref();
 const createVisible = ref(false);
 const formatOptions = ref();
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index 1948205025e6..54be8326259a 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -278,7 +278,7 @@ import Backups from '@/components/backup/index.vue';
 import UploadDialog from '@/components/upload/index.vue';
 import PortJumpDialog from '@/components/port-jump/index.vue';
 import Tooltip from '@/components/tooltip/index.vue';
-import { dateFormat } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
 import { ElMessageBox } from 'element-plus';
 import { computed, onMounted, reactive, ref } from 'vue';
 import {
diff --git a/frontend/src/views/database/mysql/remote/index.vue b/frontend/src/views/database/mysql/remote/index.vue
index 0b5651eef0c0..f1f85ae511b5 100644
--- a/frontend/src/views/database/mysql/remote/index.vue
+++ b/frontend/src/views/database/mysql/remote/index.vue
@@ -74,7 +74,7 @@
 </template>
 
 <script lang="ts" setup>
-import { dateFormat } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
 import { onMounted, reactive, ref } from 'vue';
 import { deleteCheckDatabase, searchDatabases } from '@/api/modules/database';
 import AppResources from '@/views/database/mysql/check/index.vue';
diff --git a/frontend/src/views/database/mysql/setting/status/index.vue b/frontend/src/views/database/mysql/setting/status/index.vue
index b00db3733027..08f7e128540b 100644
--- a/frontend/src/views/database/mysql/setting/status/index.vue
+++ b/frontend/src/views/database/mysql/setting/status/index.vue
@@ -181,7 +181,7 @@
 </template>
 <script lang="ts" setup>
 import { loadMysqlStatus } from '@/api/modules/database';
-import { computeSize } from '@/utils/util';
+import { computeSize } from '@/utils/size';
 import { reactive } from 'vue';
 
 let mysqlStatus = reactive({
diff --git a/frontend/src/views/database/postgresql/conn/index.vue b/frontend/src/views/database/postgresql/conn/index.vue
index e8bdd20e3f04..034b2da40ad6 100644
--- a/frontend/src/views/database/postgresql/conn/index.vue
+++ b/frontend/src/views/database/postgresql/conn/index.vue
@@ -127,7 +127,8 @@ import { ElForm } from 'element-plus';
 import { getDatabase, updatePostgresqlPassword } from '@/api/modules/database';
 import { getAppConnInfo } from '@/api/modules/app';
 import { MsgSuccess } from '@/utils/message';
-import { getRandomStr, copyText } from '@/utils/util';
+import { getRandomStr } from '@/utils/id';
+import { copyText } from '@/utils/clipboard';
 import { getAgentSettingInfo } from '@/api/modules/setting';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
diff --git a/frontend/src/views/database/postgresql/create/index.vue b/frontend/src/views/database/postgresql/create/index.vue
index 0396de4d889d..ac542959f379 100644
--- a/frontend/src/views/database/postgresql/create/index.vue
+++ b/frontend/src/views/database/postgresql/create/index.vue
@@ -49,8 +49,7 @@ import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { addPostgresqlDB } from '@/api/modules/database';
 import { MsgSuccess } from '@/utils/message';
-import { getRandomStr } from '@/utils/util';
-
+import { getRandomStr } from '@/utils/id';
 const loading = ref();
 const createVisible = ref(false);
 const form = reactive({
diff --git a/frontend/src/views/database/postgresql/index.vue b/frontend/src/views/database/postgresql/index.vue
index 3f616155be69..f83e11c23856 100644
--- a/frontend/src/views/database/postgresql/index.vue
+++ b/frontend/src/views/database/postgresql/index.vue
@@ -246,7 +246,7 @@ import Backups from '@/components/backup/index.vue';
 import UploadDialog from '@/components/upload/index.vue';
 import PortJumpDialog from '@/components/port-jump/index.vue';
 import Tooltip from '@/components/tooltip/index.vue';
-import { dateFormat } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
 import { computed, onMounted, reactive, ref } from 'vue';
 import {
     deleteCheckPostgresqlDB,
diff --git a/frontend/src/views/database/postgresql/remote/index.vue b/frontend/src/views/database/postgresql/remote/index.vue
index cbec9a38586b..67eaec5b4d95 100644
--- a/frontend/src/views/database/postgresql/remote/index.vue
+++ b/frontend/src/views/database/postgresql/remote/index.vue
@@ -74,7 +74,7 @@
 </template>
 
 <script lang="ts" setup>
-import { dateFormat } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
 import { onMounted, reactive, ref } from 'vue';
 import { deleteCheckDatabase, searchDatabases } from '@/api/modules/database';
 import AppResources from '@/views/database/postgresql/check/index.vue';
diff --git a/frontend/src/views/database/redis/conn/index.vue b/frontend/src/views/database/redis/conn/index.vue
index a9a29b2ee67b..ce484c0ca342 100644
--- a/frontend/src/views/database/redis/conn/index.vue
+++ b/frontend/src/views/database/redis/conn/index.vue
@@ -118,7 +118,8 @@ import { changeRedisPassword, getDatabase } from '@/api/modules/database';
 import ConfirmDialog from '@/components/confirm-dialog/index.vue';
 import { getAppConnInfo } from '@/api/modules/app';
 import { MsgSuccess } from '@/utils/message';
-import { getRandomStr, copyText } from '@/utils/util';
+import { getRandomStr } from '@/utils/id';
+import { copyText } from '@/utils/clipboard';
 import { getAgentSettingInfo } from '@/api/modules/setting';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
diff --git a/frontend/src/views/database/redis/remote/index.vue b/frontend/src/views/database/redis/remote/index.vue
index 063b9756912d..c9292f24a707 100644
--- a/frontend/src/views/database/redis/remote/index.vue
+++ b/frontend/src/views/database/redis/remote/index.vue
@@ -73,7 +73,7 @@
 </template>
 
 <script lang="ts" setup>
-import { dateFormat } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
 import { onMounted, reactive, ref } from 'vue';
 import { deleteCheckDatabase, searchDatabases } from '@/api/modules/database';
 import AppResources from '@/views/database/redis/check/index.vue';
diff --git a/frontend/src/views/database/redis/setting/persistence/index.vue b/frontend/src/views/database/redis/setting/persistence/index.vue
index 3d7382cc873f..bb5394039381 100644
--- a/frontend/src/views/database/redis/setting/persistence/index.vue
+++ b/frontend/src/views/database/redis/setting/persistence/index.vue
@@ -122,7 +122,8 @@ import { Database } from '@/api/interface/database';
 import { redisPersistenceConf, updateRedisPersistenceConf } from '@/api/modules/database';
 import { deleteBackupRecord, handleBackup, handleRecover, searchBackupRecords } from '@/api/modules/backup';
 import { Rules } from '@/global/form-rules';
-import { dateFormat, newUUID } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
+import { newUUID } from '@/utils/id';
 import i18n from '@/lang';
 import { FormInstance } from 'element-plus';
 import { reactive, ref } from 'vue';
diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
index 22ba6b4e68e8..8bdeef92356f 100644
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@@ -434,7 +434,10 @@ import CardWithHeader from '@/components/card-with-header/index.vue';
 import MarkDownEditor from '@/components/mkdown-editor/index.vue';
 import i18n from '@/lang';
 import { Dashboard } from '@/api/interface/dashboard';
-import { dateFormatForSecond, computeSize, computeSizeFromKBs, loadUpTime, jumpToPath, copyText } from '@/utils/util';
+import { dateFormatForSecond, loadUpTime } from '@/utils/date';
+import { computeSize, computeSizeFromKBs } from '@/utils/size';
+import { jumpToPath } from '@/utils/router';
+import { copyText } from '@/utils/clipboard';
 import { useRouter } from 'vue-router';
 import { loadBaseInfo, loadCurrentInfo } from '@/api/modules/dashboard';
 import { getIOOptions, getNetworkOptions } from '@/api/modules/host';
diff --git a/frontend/src/views/home/status/index.vue b/frontend/src/views/home/status/index.vue
index 4ce7d46567b9..73293ebffafa 100644
--- a/frontend/src/views/home/status/index.vue
+++ b/frontend/src/views/home/status/index.vue
@@ -385,7 +385,7 @@
 
 <script setup lang="ts">
 import { Dashboard } from '@/api/interface/dashboard';
-import { computeSize } from '@/utils/util';
+import { computeSize } from '@/utils/size';
 import i18n from '@/lang';
 import { nextTick, onBeforeUnmount, ref } from 'vue';
 import { routerToFileWithPath, routerToName } from '@/utils/router';
diff --git a/frontend/src/views/host/file-management/code-editor/index.vue b/frontend/src/views/host/file-management/code-editor/index.vue
index 5ae6df77966e..3a0e1343c701 100644
--- a/frontend/src/views/host/file-management/code-editor/index.vue
+++ b/frontend/src/views/host/file-management/code-editor/index.vue
@@ -398,7 +398,8 @@ import type { TabPaneName } from 'element-plus';
 import { ElMessageBox, ElTreeV2 } from 'element-plus';
 import { ResultData } from '@/api/interface';
 import { File } from '@/api/interface/file';
-import { getIcon, newUUID } from '@/utils/util';
+import { getIcon } from '@/utils/file';
+import { newUUID } from '@/utils/id';
 import { TreeKey, TreeNodeData } from 'element-plus/es/components/tree-v2/src/types';
 import { DArrowLeft, DArrowRight, Refresh, Top } from '@element-plus/icons-vue';
 import { loadBaseDir } from '@/api/modules/setting';
diff --git a/frontend/src/views/host/file-management/convert/index.vue b/frontend/src/views/host/file-management/convert/index.vue
index 296ec99eedfc..d70cea5f8b07 100644
--- a/frontend/src/views/host/file-management/convert/index.vue
+++ b/frontend/src/views/host/file-management/convert/index.vue
@@ -139,7 +139,7 @@ import FileList from '@/components/file-list/index.vue';
 import { Plus } from '@element-plus/icons-vue';
 import { MsgWarning, MsgSuccess } from '@/utils/message';
 import { convertFiles, convertLogs, getFileContent } from '@/api/modules/files';
-import { getFileType, isConvertible } from '@/utils/util';
+import { getFileType, isConvertible } from '@/utils/file';
 import { v4 as uuidv4 } from 'uuid';
 import TaskLog from '@/components/log/task/index.vue';
 import { TabsPaneContext } from 'element-plus';
diff --git a/frontend/src/views/host/file-management/delete/index.vue b/frontend/src/views/host/file-management/delete/index.vue
index fe6a6d90b226..36a80941933d 100644
--- a/frontend/src/views/host/file-management/delete/index.vue
+++ b/frontend/src/views/host/file-management/delete/index.vue
@@ -57,7 +57,7 @@
 import i18n from '@/lang';
 import { ref } from 'vue';
 import { File } from '@/api/interface/file';
-import { getIcon } from '@/utils/util';
+import { getIcon } from '@/utils/file';
 import { deleteFile, deleteFileByNode, getRecycleStatus, getRecycleStatusByNode } from '@/api/modules/files';
 import { MsgSuccess, MsgWarning } from '@/utils/message';
 import { loadBaseDir } from '@/api/modules/setting';
diff --git a/frontend/src/views/host/file-management/detail/index.vue b/frontend/src/views/host/file-management/detail/index.vue
index 27dab26ac3b9..6c068968d9e4 100644
--- a/frontend/src/views/host/file-management/detail/index.vue
+++ b/frontend/src/views/host/file-management/detail/index.vue
@@ -43,10 +43,9 @@
 
 <script lang="ts" setup>
 import { computeDirSize, getFileContent } from '@/api/modules/files';
-import { computeSize } from '@/utils/util';
+import { computeSize } from '@/utils/size';
 import { ref } from 'vue';
-import { dateFormatSimple } from '@/utils/util';
-
+import { dateFormatSimple } from '@/utils/date';
 interface InfoProps {
     path: string;
 }
diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index ec7fd3ba0a75..26cad06065d8 100644
--- a/frontend/src/views/host/file-management/index.vue
+++ b/frontend/src/views/host/file-management/index.vue
@@ -691,16 +691,11 @@ import {
     searchFavorite,
     searchHostMount,
 } from '@/api/modules/files';
-import {
-    computeSize,
-    copyText,
-    dateFormat,
-    downloadFile,
-    getFileType,
-    getIcon,
-    getRandomStr,
-    isConvertible,
-} from '@/utils/util';
+import { computeSize } from '@/utils/size';
+import { copyText } from '@/utils/clipboard';
+import { dateFormat } from '@/utils/date';
+import { downloadFile, getFileType, getIcon, isConvertible } from '@/utils/file';
+import { getRandomStr } from '@/utils/id';
 import { File } from '@/api/interface/file';
 import { Languages, Mimetypes } from '@/global/mimetype';
 import { useRouter } from 'vue-router';
diff --git a/frontend/src/views/host/file-management/move/index.vue b/frontend/src/views/host/file-management/move/index.vue
index 8d48533c31c5..0c996de8ca44 100644
--- a/frontend/src/views/host/file-management/move/index.vue
+++ b/frontend/src/views/host/file-management/move/index.vue
@@ -74,7 +74,7 @@ import { FormInstance, FormRules } from 'element-plus';
 import { ref, reactive, computed, ComputedRef } from 'vue';
 import FileList from '@/components/file-list/index.vue';
 import { MsgSuccess } from '@/utils/message';
-import { getDateStr } from '@/utils/util';
+import { getDateStr } from '@/utils/date';
 import { File } from '@/api/interface/file';
 
 interface MoveProps {
diff --git a/frontend/src/views/host/file-management/process/index.vue b/frontend/src/views/host/file-management/process/index.vue
index 7dce42877680..623901a50441 100644
--- a/frontend/src/views/host/file-management/process/index.vue
+++ b/frontend/src/views/host/file-management/process/index.vue
@@ -62,7 +62,7 @@
 
 <script lang="ts" setup>
 import { fileWgetKeys, stopWgetFile } from '@/api/modules/files';
-import { computeSize } from '@/utils/util';
+import { computeSize } from '@/utils/size';
 import { onBeforeUnmount, ref } from 'vue';
 import MsgInfo from '@/components/msg-info/index.vue';
 import { GlobalStore } from '@/store';
diff --git a/frontend/src/views/host/file-management/recycle-bin/delete/index.vue b/frontend/src/views/host/file-management/recycle-bin/delete/index.vue
index 62895fb3a4bd..a564bfefaf93 100644
--- a/frontend/src/views/host/file-management/recycle-bin/delete/index.vue
+++ b/frontend/src/views/host/file-management/recycle-bin/delete/index.vue
@@ -29,7 +29,7 @@
 import i18n from '@/lang';
 import { ref } from 'vue';
 import { File } from '@/api/interface/file';
-import { getIcon } from '@/utils/util';
+import { getIcon } from '@/utils/file';
 import { deleteFile } from '@/api/modules/files';
 import { MsgSuccess } from '@/utils/message';
 
diff --git a/frontend/src/views/host/file-management/recycle-bin/index.vue b/frontend/src/views/host/file-management/recycle-bin/index.vue
index 756197a04446..12e3e3b14676 100644
--- a/frontend/src/views/host/file-management/recycle-bin/index.vue
+++ b/frontend/src/views/host/file-management/recycle-bin/index.vue
@@ -61,7 +61,8 @@
 <script lang="ts" setup>
 import { getRecycleStatus, clearRecycle, getRecycleList, reduceFile } from '@/api/modules/files';
 import { reactive, ref } from 'vue';
-import { dateFormat, computeSize } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
+import { computeSize } from '@/utils/size';
 import i18n from '@/lang';
 import Delete from './delete/index.vue';
 import Reduce from './reduce/index.vue';
diff --git a/frontend/src/views/host/file-management/recycle-bin/reduce/index.vue b/frontend/src/views/host/file-management/recycle-bin/reduce/index.vue
index 1eb7b95e0a45..8abc7512f30f 100644
--- a/frontend/src/views/host/file-management/recycle-bin/reduce/index.vue
+++ b/frontend/src/views/host/file-management/recycle-bin/reduce/index.vue
@@ -27,7 +27,7 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
-import { getIcon } from '@/utils/util';
+import { getIcon } from '@/utils/file';
 import { reduceFile } from '@/api/modules/files';
 import { MsgSuccess } from '@/utils/message';
 import i18n from '@/lang';
diff --git a/frontend/src/views/host/file-management/share-list/index.vue b/frontend/src/views/host/file-management/share-list/index.vue
index c33e55c584f0..a838b4a33204 100644
--- a/frontend/src/views/host/file-management/share-list/index.vue
+++ b/frontend/src/views/host/file-management/share-list/index.vue
@@ -27,7 +27,7 @@
 import { removeFileShare, searchFileShare } from '@/api/modules/files';
 import { File } from '@/api/interface/file';
 import i18n from '@/lang';
-import { dateFormat as formatDateTime } from '@/utils/util';
+import { dateFormat as formatDateTime } from '@/utils/date';
 import { computed, reactive, ref } from 'vue';
 
 const paginationConfig = reactive({
diff --git a/frontend/src/views/host/file-management/share/index.vue b/frontend/src/views/host/file-management/share/index.vue
index 64f7edf5f7d7..ac9d794d72ee 100644
--- a/frontend/src/views/host/file-management/share/index.vue
+++ b/frontend/src/views/host/file-management/share/index.vue
@@ -100,7 +100,9 @@ import { File } from '@/api/interface/file';
 import { CopyDocument, Download, Picture } from '@element-plus/icons-vue';
 import i18n from '@/lang';
 import { GlobalStore } from '@/store';
-import { buildFileSharePageUrl, buildFileShareQrCodeUrl, copyText, dateFormat as formatDateTime } from '@/utils/util';
+import { buildFileSharePageUrl, buildFileShareQrCodeUrl } from '@/utils/file';
+import { copyText } from '@/utils/clipboard';
+import { dateFormat as formatDateTime } from '@/utils/date';
 import type { FormInstance, FormRules } from 'element-plus';
 import { computed, reactive, ref, watch } from 'vue';
 
diff --git a/frontend/src/views/host/file-management/text-preview/index.vue b/frontend/src/views/host/file-management/text-preview/index.vue
index 820908c4b0c6..0d919cc8b62c 100644
--- a/frontend/src/views/host/file-management/text-preview/index.vue
+++ b/frontend/src/views/host/file-management/text-preview/index.vue
@@ -32,7 +32,7 @@
 <script lang="ts" setup>
 import { ref, computed, nextTick } from 'vue';
 import { getPreviewContent } from '@/api/modules/files';
-import { downloadFile } from '@/utils/util';
+import { downloadFile } from '@/utils/file';
 import { GlobalStore } from '@/store';
 import i18n from '@/lang';
 
diff --git a/frontend/src/views/host/firewall/advance/operate/index.vue b/frontend/src/views/host/firewall/advance/operate/index.vue
index d34dc3f9562b..724c04a21427 100644
--- a/frontend/src/views/host/firewall/advance/operate/index.vue
+++ b/frontend/src/views/host/firewall/advance/operate/index.vue
@@ -72,8 +72,7 @@ import { ElForm } from 'element-plus';
 import { MsgSuccess } from '@/utils/message';
 import { Host } from '@/api/interface/host';
 import { operateFilterRule } from '@/api/modules/host';
-import { checkCidr, checkCidrV6, checkIpV4V6 } from '@/utils/util';
-
+import { checkCidr, checkCidrV6, checkIpV4V6 } from '@/utils/validate';
 const loading = ref();
 
 interface DialogProps {
diff --git a/frontend/src/views/host/firewall/forward/index.vue b/frontend/src/views/host/firewall/forward/index.vue
index 48d804a65718..967cf4e75af1 100644
--- a/frontend/src/views/host/firewall/forward/index.vue
+++ b/frontend/src/views/host/firewall/forward/index.vue
@@ -105,8 +105,8 @@ import { operateForwardRule, searchFireRule } from '@/api/modules/host';
 import { Host } from '@/api/interface/host';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
-import { downloadWithContent, getCurrentDateFormatted } from '@/utils/util';
-
+import { downloadWithContent } from '@/utils/file';
+import { getCurrentDateFormatted } from '@/utils/date';
 const loading = ref();
 const activeTag = ref('forward');
 const selects = ref<any>([]);
diff --git a/frontend/src/views/host/firewall/forward/operate/index.vue b/frontend/src/views/host/firewall/forward/operate/index.vue
index 0f816b01b18b..38edf3585128 100644
--- a/frontend/src/views/host/firewall/forward/operate/index.vue
+++ b/frontend/src/views/host/firewall/forward/operate/index.vue
@@ -62,8 +62,8 @@ import { ElForm } from 'element-plus';
 import { MsgSuccess } from '@/utils/message';
 import { Host } from '@/api/interface/host';
 import { operateForwardRule, getNetworkOptions } from '@/api/modules/host';
-import { checkCidr, checkCidrV6, checkIp, checkPort, deepCopy } from '@/utils/util';
-
+import { checkCidr, checkCidrV6, checkIp, checkPort } from '@/utils/validate';
+import { deepCopy } from '@/utils/misc';
 const loading = ref();
 const oldRule = ref<Host.RuleForward>();
 
diff --git a/frontend/src/views/host/firewall/ip/index.vue b/frontend/src/views/host/firewall/ip/index.vue
index 3da92e9214e1..2b1d3e7c9cc1 100644
--- a/frontend/src/views/host/firewall/ip/index.vue
+++ b/frontend/src/views/host/firewall/ip/index.vue
@@ -129,8 +129,8 @@ import { Host } from '@/api/interface/host';
 import { ElMessageBox } from 'element-plus';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
-import { downloadWithContent, getCurrentDateFormatted } from '@/utils/util';
-
+import { downloadWithContent } from '@/utils/file';
+import { getCurrentDateFormatted } from '@/utils/date';
 const loading = ref();
 const activeTag = ref('address');
 const selects = ref<any>([]);
diff --git a/frontend/src/views/host/firewall/ip/operate/index.vue b/frontend/src/views/host/firewall/ip/operate/index.vue
index 3940cb5537df..bd063243518b 100644
--- a/frontend/src/views/host/firewall/ip/operate/index.vue
+++ b/frontend/src/views/host/firewall/ip/operate/index.vue
@@ -50,8 +50,8 @@ import { ElForm } from 'element-plus';
 import { MsgSuccess } from '@/utils/message';
 import { Host } from '@/api/interface/host';
 import { operateIPRule, updateAddrRule } from '@/api/modules/host';
-import { checkCidr, checkCidrV6, checkIpV4V6, deepCopy } from '@/utils/util';
-
+import { checkCidr, checkCidrV6, checkIpV4V6 } from '@/utils/validate';
+import { deepCopy } from '@/utils/misc';
 const loading = ref();
 const oldRule = ref<Host.RuleIP>();
 
diff --git a/frontend/src/views/host/firewall/port/index.vue b/frontend/src/views/host/firewall/port/index.vue
index 9877dbb9627a..5d5c98f95307 100644
--- a/frontend/src/views/host/firewall/port/index.vue
+++ b/frontend/src/views/host/firewall/port/index.vue
@@ -169,8 +169,8 @@ import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox } from 'element-plus';
 import { Expand } from '@element-plus/icons-vue';
 import { routerToName } from '@/utils/router';
-import { downloadWithContent, getCurrentDateFormatted } from '@/utils/util';
-
+import { downloadWithContent } from '@/utils/file';
+import { getCurrentDateFormatted } from '@/utils/date';
 const loading = ref();
 const activeTag = ref('port');
 const selects = ref<any>([]);
diff --git a/frontend/src/views/host/firewall/port/operate/index.vue b/frontend/src/views/host/firewall/port/operate/index.vue
index 222fa9f02a37..f1d687529849 100644
--- a/frontend/src/views/host/firewall/port/operate/index.vue
+++ b/frontend/src/views/host/firewall/port/operate/index.vue
@@ -64,8 +64,8 @@ import { ElForm } from 'element-plus';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { Host } from '@/api/interface/host';
 import { operatePortRule, updatePortRule } from '@/api/modules/host';
-import { checkCidr, checkCidrV6, checkIpV4V6, checkPort, deepCopy } from '@/utils/util';
-
+import { checkCidr, checkCidrV6, checkIpV4V6, checkPort } from '@/utils/validate';
+import { deepCopy } from '@/utils/misc';
 const loading = ref();
 const oldRule = ref<Host.RulePort>();
 
diff --git a/frontend/src/views/host/monitor/monitor/index.vue b/frontend/src/views/host/monitor/monitor/index.vue
index c0d690d3261d..e30ac57150b8 100644
--- a/frontend/src/views/host/monitor/monitor/index.vue
+++ b/frontend/src/views/host/monitor/monitor/index.vue
@@ -220,7 +220,8 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed } from 'vue';
 import { loadMonitor, getNetworkOptions, getIOOptions } from '@/api/modules/host';
-import { computeSize, computeSizeFromKBs, dateFormatWithoutYear } from '@/utils/util';
+import { computeSize, computeSizeFromKBs } from '@/utils/size';
+import { dateFormatWithoutYear } from '@/utils/date';
 import i18n from '@/lang';
 import MonitorRouter from '@/views/host/monitor/index.vue';
 import { GlobalStore } from '@/store';
diff --git a/frontend/src/views/host/monitor/setting/index.vue b/frontend/src/views/host/monitor/setting/index.vue
index 508da634a1bd..fa29e7814cd9 100644
--- a/frontend/src/views/host/monitor/setting/index.vue
+++ b/frontend/src/views/host/monitor/setting/index.vue
@@ -81,8 +81,7 @@ import Network from '@/views/host/monitor/setting/default-network/index.vue';
 import IO from '@/views/host/monitor/setting/default-io/index.vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
-import { splitTimeFromSecond, transTimeUnit } from '@/utils/util';
-
+import { splitTimeFromSecond, transTimeUnit } from '@/utils/validate';
 const loading = ref();
 const form = reactive({
     monitorStatus: 'Disable',
diff --git a/frontend/src/views/host/monitor/setting/interval/index.vue b/frontend/src/views/host/monitor/setting/interval/index.vue
index 71639331ccf1..a3a20d1e2b85 100644
--- a/frontend/src/views/host/monitor/setting/interval/index.vue
+++ b/frontend/src/views/host/monitor/setting/interval/index.vue
@@ -30,8 +30,7 @@ import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import { updateMonitorSetting } from '@/api/modules/host';
-import { transferTimeToSecond } from '@/utils/util';
-
+import { transferTimeToSecond } from '@/utils/validate';
 const emit = defineEmits<{ (e: 'search'): void }>();
 
 interface DialogProps {
diff --git a/frontend/src/views/host/ssh/log/log.vue b/frontend/src/views/host/ssh/log/log.vue
index e089a85ec8ac..326cf7c6c955 100644
--- a/frontend/src/views/host/ssh/log/log.vue
+++ b/frontend/src/views/host/ssh/log/log.vue
@@ -89,7 +89,8 @@
 </template>
 
 <script setup lang="ts">
-import { dateFormat, downloadFile } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
+import { downloadFile } from '@/utils/file';
 import { onMounted, reactive, ref } from 'vue';
 import { exportSSHLogs, loadSSHLogs } from '@/api/modules/host';
 import { GlobalStore } from '@/store';
diff --git a/frontend/src/views/host/ssh/ssh/address/index.vue b/frontend/src/views/host/ssh/ssh/address/index.vue
index e5f32f608579..e6e246e43039 100644
--- a/frontend/src/views/host/ssh/ssh/address/index.vue
+++ b/frontend/src/views/host/ssh/ssh/address/index.vue
@@ -43,8 +43,7 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import { updateSSH } from '@/api/modules/host';
-import { checkIp, checkIpV6 } from '@/utils/util';
-
+import { checkIp, checkIpV6 } from '@/utils/validate';
 const emit = defineEmits<{ (e: 'search'): void }>();
 
 interface DialogProps {
diff --git a/frontend/src/views/host/ssh/ssh/certification/index.vue b/frontend/src/views/host/ssh/ssh/certification/index.vue
index ea7e89a58f5b..b5aa84bfda09 100644
--- a/frontend/src/views/host/ssh/ssh/certification/index.vue
+++ b/frontend/src/views/host/ssh/ssh/certification/index.vue
@@ -98,7 +98,7 @@ import { deleteCert, searchCert, syncCert } from '@/api/modules/host';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import Operate from '@/views/host/ssh/ssh/certification/operate/index.vue';
-import { copyText } from '@/utils/util';
+import { copyText } from '@/utils/clipboard';
 import { Base64 } from 'js-base64';
 import { reactive, ref } from 'vue';
 
diff --git a/frontend/src/views/host/ssh/ssh/certification/operate/index.vue b/frontend/src/views/host/ssh/ssh/certification/operate/index.vue
index 5de43407b02c..097a60a2cbbc 100644
--- a/frontend/src/views/host/ssh/ssh/certification/operate/index.vue
+++ b/frontend/src/views/host/ssh/ssh/certification/operate/index.vue
@@ -120,7 +120,7 @@ import { ElForm, genFileId, UploadFile, UploadProps, UploadRawFile } from 'eleme
 import { Host } from '@/api/interface/host';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { Rules } from '@/global/form-rules';
-import { getRandomStr } from '@/utils/util';
+import { getRandomStr } from '@/utils/id';
 import { createCert, editCert } from '@/api/modules/host';
 import { Base64 } from 'js-base64';
 
diff --git a/frontend/src/views/log/login/index.vue b/frontend/src/views/log/login/index.vue
index 08c95e57b89c..315c07d6d3e3 100644
--- a/frontend/src/views/log/login/index.vue
+++ b/frontend/src/views/log/login/index.vue
@@ -46,7 +46,7 @@
 <script setup lang="ts">
 import ConfirmDialog from '@/components/confirm-dialog/index.vue';
 import LogRouter from '@/views/log/router/index.vue';
-import { dateFormat } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
 import { cleanLogs, getLoginLogs } from '@/api/modules/log';
 import { onMounted, reactive, ref } from 'vue';
 import i18n from '@/lang';
diff --git a/frontend/src/views/log/operation/index.vue b/frontend/src/views/log/operation/index.vue
index ea558828e2e4..116349f055cc 100644
--- a/frontend/src/views/log/operation/index.vue
+++ b/frontend/src/views/log/operation/index.vue
@@ -96,7 +96,7 @@
 <script setup lang="ts">
 import ConfirmDialog from '@/components/confirm-dialog/index.vue';
 import LogRouter from '@/views/log/router/index.vue';
-import { dateFormat } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
 import { cleanLogs, getOperationLogs } from '@/api/modules/log';
 import { onMounted, reactive, ref } from 'vue';
 import i18n from '@/lang';
diff --git a/frontend/src/views/log/task/index.vue b/frontend/src/views/log/task/index.vue
index ad8822cb7cf0..edd9c53e07f6 100644
--- a/frontend/src/views/log/task/index.vue
+++ b/frontend/src/views/log/task/index.vue
@@ -46,7 +46,7 @@
 
 <script setup lang="ts">
 import LogRouter from '@/views/log/router/index.vue';
-import { dateFormat } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
 import { searchTasks } from '@/api/modules/log';
 import { onMounted, reactive, ref } from 'vue';
 import { Log } from '@/api/interface/log';
diff --git a/frontend/src/views/login/components/login-form.vue b/frontend/src/views/login/components/login-form.vue
index da377312edb8..7ea4a4879bf7 100644
--- a/frontend/src/views/login/components/login-form.vue
+++ b/frontend/src/views/login/components/login-form.vue
@@ -251,7 +251,7 @@ import {
 import { GlobalStore, MenuStore, TabsStore } from '@/store';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { useI18n } from 'vue-i18n';
-import { encryptPassword, base64UrlToBuffer, bufferToBase64Url } from '@/utils/util';
+import { encryptPassword, base64UrlToBuffer, bufferToBase64Url } from '@/utils/auth';
 import { getXpackSettingForTheme } from '@/utils/xpack';
 import { routerToName } from '@/utils/router';
 import { changeToLocal, setDefaultNodeInfo } from '@/utils/node';
diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue
index b5e0a4cd9e25..ec42b185017c 100644
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@@ -29,8 +29,7 @@
 import LoginForm from './components/login-form.vue';
 import { ref, onMounted } from 'vue';
 import { GlobalStore } from '@/store';
-import { preloadImage } from '@/utils/util';
-
+import { preloadImage } from '@/utils/browser';
 const globalStore = GlobalStore();
 const backgroundOpacity = ref(1);
 const defaultLoginImage = new URL('@/assets/images/1panel-login.jpg', import.meta.url).href;
diff --git a/frontend/src/views/setting/alert/dash/task/index.vue b/frontend/src/views/setting/alert/dash/task/index.vue
index a1288c76e15b..c7f4ace49f95 100644
--- a/frontend/src/views/setting/alert/dash/task/index.vue
+++ b/frontend/src/views/setting/alert/dash/task/index.vue
@@ -388,8 +388,7 @@ import { getSettingInfo } from '@/api/modules/setting';
 import { GlobalStore } from '@/store';
 import { storeToRefs } from 'pinia';
 import { routerToName } from '@/utils/router';
-import { checkCidr, checkCidrV6, checkIpV4V6 } from '@/utils/util';
-
+import { checkCidr, checkCidrV6, checkIpV4V6 } from '@/utils/validate';
 const globalStore = GlobalStore();
 const { isMaster, isProductPro } = storeToRefs(globalStore);
 
diff --git a/frontend/src/views/setting/alert/log/index.vue b/frontend/src/views/setting/alert/log/index.vue
index 1b365cab07e9..dac4bc2b2406 100644
--- a/frontend/src/views/setting/alert/log/index.vue
+++ b/frontend/src/views/setting/alert/log/index.vue
@@ -77,7 +77,7 @@
 
 <script lang="ts" setup>
 import { onMounted, reactive, ref, computed } from 'vue';
-import { dateFormat } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
 import { MsgSuccess } from '@/utils/message';
 import i18n from '@/lang';
 import { GlobalStore } from '@/store';
diff --git a/frontend/src/views/setting/backup-account/index.vue b/frontend/src/views/setting/backup-account/index.vue
index 90855ac4bbc9..8bc5b1a43b4f 100644
--- a/frontend/src/views/setting/backup-account/index.vue
+++ b/frontend/src/views/setting/backup-account/index.vue
@@ -118,7 +118,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { dateFormat } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
 import { onMounted, ref } from 'vue';
 import { searchBackup, deleteBackup, refreshToken } from '@/api/modules/backup';
 import Operate from '@/views/setting/backup-account/operate/index.vue';
diff --git a/frontend/src/views/setting/backup-account/operate/index.vue b/frontend/src/views/setting/backup-account/operate/index.vue
index 05d20d885275..d79ed19cc45b 100644
--- a/frontend/src/views/setting/backup-account/operate/index.vue
+++ b/frontend/src/views/setting/backup-account/operate/index.vue
@@ -410,7 +410,9 @@ import { Backup } from '@/api/interface/backup';
 import FileList from '@/components/file-list/index.vue';
 import { addBackup, checkBackup, editBackup, getClientInfo, listBucket } from '@/api/modules/backup';
 import { cities } from './../helper';
-import { dateFormat, deepCopy, spliceHttp, splitHttp } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
+import { deepCopy } from '@/utils/misc';
+import { spliceHttp, splitHttp } from '@/utils/validate';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { Base64 } from 'js-base64';
 import { GlobalStore } from '@/store';
diff --git a/frontend/src/views/setting/license/index.vue b/frontend/src/views/setting/license/index.vue
index 0350e78ce74b..cdd151865670 100644
--- a/frontend/src/views/setting/license/index.vue
+++ b/frontend/src/views/setting/license/index.vue
@@ -105,7 +105,7 @@ import LicenseImport from '@/components/license-import/index.vue';
 import DockerProxy from '@/components/docker-proxy/index.vue';
 import BindFree from '@/views/setting/license/bind/free.vue';
 import BindXpack from '@/views/setting/license/bind/xpack.vue';
-import { dateFormat } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
 import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { GlobalStore } from '@/store';
diff --git a/frontend/src/views/setting/panel/api-interface/index.vue b/frontend/src/views/setting/panel/api-interface/index.vue
index e3b4a273baa5..ffc5bd44435d 100644
--- a/frontend/src/views/setting/panel/api-interface/index.vue
+++ b/frontend/src/views/setting/panel/api-interface/index.vue
@@ -68,7 +68,7 @@ import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox, FormInstance } from 'element-plus';
-import { checkCidr, checkCidrV6, checkIpV4V6 } from '@/utils/util';
+import { checkCidr, checkCidrV6, checkIpV4V6 } from '@/utils/validate';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
 
diff --git a/frontend/src/views/setting/panel/hidemenu/index.vue b/frontend/src/views/setting/panel/hidemenu/index.vue
index 96fcaf640930..0a8dee6e16a0 100644
--- a/frontend/src/views/setting/panel/hidemenu/index.vue
+++ b/frontend/src/views/setting/panel/hidemenu/index.vue
@@ -55,7 +55,7 @@ import { defaultMenu, updateMenu } from '@/api/modules/setting';
 import { MsgSuccess } from '@/utils/message';
 import { GlobalStore } from '@/store';
 import { ArrowRight } from '@element-plus/icons-vue';
-import { sortMenu } from '@/utils/util';
+import { sortMenu } from '@/utils/misc';
 const globalStore = GlobalStore();
 
 const drawerVisible = ref();
diff --git a/frontend/src/views/setting/panel/systemip/index.vue b/frontend/src/views/setting/panel/systemip/index.vue
index e5277eef9c97..a018ea379316 100644
--- a/frontend/src/views/setting/panel/systemip/index.vue
+++ b/frontend/src/views/setting/panel/systemip/index.vue
@@ -20,8 +20,7 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { updateAgentSetting } from '@/api/modules/setting';
 import { FormInstance } from 'element-plus';
-import { checkDomain, checkIpV4V6 } from '@/utils/util';
-
+import { checkDomain, checkIpV4V6 } from '@/utils/validate';
 const emit = defineEmits<{ (e: 'search'): void }>();
 
 interface DialogProps {
diff --git a/frontend/src/views/setting/safe/allowips/index.vue b/frontend/src/views/setting/safe/allowips/index.vue
index 7d21a622582a..4677e272d0ff 100644
--- a/frontend/src/views/setting/safe/allowips/index.vue
+++ b/frontend/src/views/setting/safe/allowips/index.vue
@@ -20,8 +20,7 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { updateSetting } from '@/api/modules/setting';
 import { ElMessageBox, FormInstance } from 'element-plus';
-import { checkCidr, checkCidrV6, checkIpV4V6 } from '@/utils/util';
-
+import { checkCidr, checkCidrV6, checkIpV4V6 } from '@/utils/validate';
 const emit = defineEmits<{ (e: 'search'): void }>();
 
 const form = reactive({
diff --git a/frontend/src/views/setting/safe/entrance/index.vue b/frontend/src/views/setting/safe/entrance/index.vue
index 197cbc52a25d..3f184586b1f0 100644
--- a/frontend/src/views/setting/safe/entrance/index.vue
+++ b/frontend/src/views/setting/safe/entrance/index.vue
@@ -29,7 +29,7 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { updateSetting } from '@/api/modules/setting';
 import { GlobalStore } from '@/store';
-import { getRandomStr } from '@/utils/util';
+import { getRandomStr } from '@/utils/id';
 import { FormInstance } from 'element-plus';
 import { clearDashboardCacheByPrefix } from '@/utils/dashboardCache';
 const globalStore = GlobalStore();
diff --git a/frontend/src/views/setting/safe/passkey/index.vue b/frontend/src/views/setting/safe/passkey/index.vue
index 76f566e3a13e..d9ccff5ba5f0 100644
--- a/frontend/src/views/setting/safe/passkey/index.vue
+++ b/frontend/src/views/setting/safe/passkey/index.vue
@@ -118,8 +118,7 @@ import {
 import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { Setting } from '@/api/interface/setting';
-import { base64UrlToBuffer, bufferToBase64Url } from '@/utils/util';
-
+import { base64UrlToBuffer, bufferToBase64Url } from '@/utils/auth';
 interface DrawerParams {
     bindDomain: string;
 }
diff --git a/frontend/src/views/setting/safe/ssl/index.vue b/frontend/src/views/setting/safe/ssl/index.vue
index e2ab4055ec37..cc24efa74214 100644
--- a/frontend/src/views/setting/safe/ssl/index.vue
+++ b/frontend/src/views/setting/safe/ssl/index.vue
@@ -118,7 +118,8 @@
 </template>
 <script lang="ts" setup>
 import { Website } from '@/api/interface/website';
-import { dateFormatSimple, getProvider } from '@/utils/util';
+import { dateFormatSimple } from '@/utils/date';
+import { getProvider } from '@/utils/ssl';
 import { listLocalNodeSSL } from '@/api/modules/website';
 import { reactive, ref } from 'vue';
 import i18n from '@/lang';
diff --git a/frontend/src/views/setting/snapshot/create/index.vue b/frontend/src/views/setting/snapshot/create/index.vue
index 9ab05620d708..57005dae4908 100644
--- a/frontend/src/views/setting/snapshot/create/index.vue
+++ b/frontend/src/views/setting/snapshot/create/index.vue
@@ -174,7 +174,9 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { loadBaseDir, loadSnapshotInfo, snapshotCreate } from '@/api/modules/setting';
-import { computeSize, newUUID, transferTimeToSecond } from '@/utils/util';
+import { computeSize } from '@/utils/size';
+import { newUUID } from '@/utils/id';
+import { transferTimeToSecond } from '@/utils/validate';
 import i18n from '@/lang';
 import TaskLog from '@/components/log/task/index.vue';
 import InputTag from '@/components/input-tag/index.vue';
diff --git a/frontend/src/views/setting/snapshot/index.vue b/frontend/src/views/setting/snapshot/index.vue
index e84a10cc0d49..8cb8cbc18628 100644
--- a/frontend/src/views/setting/snapshot/index.vue
+++ b/frontend/src/views/setting/snapshot/index.vue
@@ -231,7 +231,9 @@ import {
     updateSnapshotDescription,
 } from '@/api/modules/setting';
 import { onMounted, reactive, ref } from 'vue';
-import { computeSize, dateFormat, newUUID } from '@/utils/util';
+import { computeSize } from '@/utils/size';
+import { dateFormat } from '@/utils/date';
+import { newUUID } from '@/utils/id';
 import { ElForm } from 'element-plus';
 import i18n from '@/lang';
 import { Setting } from '@/api/interface/setting';
diff --git a/frontend/src/views/setting/snapshot/recover/index.vue b/frontend/src/views/setting/snapshot/recover/index.vue
index 1b5d5b7f5e9a..f13951d44eb5 100644
--- a/frontend/src/views/setting/snapshot/recover/index.vue
+++ b/frontend/src/views/setting/snapshot/recover/index.vue
@@ -63,8 +63,8 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import TaskLog from '@/components/log/task/index.vue';
 import { snapshotRecover, snapshotRollback } from '@/api/modules/setting';
-import { computeSize, newUUID } from '@/utils/util';
-
+import { computeSize } from '@/utils/size';
+import { newUUID } from '@/utils/id';
 let loading = ref(false);
 let open = ref(false);
 const recoverForm = ref<FormInstance>();
diff --git a/frontend/src/views/setting/snapshot/status/index.vue b/frontend/src/views/setting/snapshot/status/index.vue
index 8e0921ccf3a6..562267604b05 100644
--- a/frontend/src/views/setting/snapshot/status/index.vue
+++ b/frontend/src/views/setting/snapshot/status/index.vue
@@ -131,8 +131,7 @@ import { snapshotRollback } from '@/api/modules/setting';
 import { MsgSuccess } from '@/utils/message';
 import { loadOsInfo } from '@/api/modules/dashboard';
 import SnapRecover from '@/views/setting/snapshot/recover/index.vue';
-import { newUUID } from '@/utils/util';
-
+import { newUUID } from '@/utils/id';
 const drawerVisible = ref(false);
 const snapInfo = ref();
 const loading = ref();
diff --git a/frontend/src/views/share/index.vue b/frontend/src/views/share/index.vue
index 6b239d8d369c..654fe65afc97 100644
--- a/frontend/src/views/share/index.vue
+++ b/frontend/src/views/share/index.vue
@@ -42,7 +42,8 @@
 import { checkFileShare, getPublicFileShareInfo } from '@/api/modules/files';
 import { File } from '@/api/interface/file';
 import i18n, { loadLocaleMessages } from '@/lang';
-import { buildFileShareDownloadUrl, dateFormat } from '@/utils/util';
+import { buildFileShareDownloadUrl } from '@/utils/file';
+import { dateFormat } from '@/utils/date';
 import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
diff --git a/frontend/src/views/terminal/command/index.vue b/frontend/src/views/terminal/command/index.vue
index e8f8409483aa..c30295a3db46 100644
--- a/frontend/src/views/terminal/command/index.vue
+++ b/frontend/src/views/terminal/command/index.vue
@@ -109,8 +109,7 @@ import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { getGroupList } from '@/api/modules/group';
-import { downloadFile } from '@/utils/util';
-
+import { downloadFile } from '@/utils/file';
 const loading = ref();
 const data = ref();
 const selects = ref<any>([]);
diff --git a/frontend/src/views/toolbox/clam/operate/index.vue b/frontend/src/views/toolbox/clam/operate/index.vue
index d4f7f292a929..cb5551a1e16d 100644
--- a/frontend/src/views/toolbox/clam/operate/index.vue
+++ b/frontend/src/views/toolbox/clam/operate/index.vue
@@ -241,8 +241,7 @@ import { createClam, updateClam } from '@/api/modules/toolbox';
 import { storeToRefs } from 'pinia';
 import { GlobalStore } from '@/store';
 import { specOptions, transObjToSpec, transSpecToObj, weekOptions } from '@/views/cronjob/cronjob/helper';
-import { splitTimeFromSecond, transferTimeToSecond } from '@/utils/util';
-
+import { splitTimeFromSecond, transferTimeToSecond } from '@/utils/validate';
 const globalStore = GlobalStore();
 const licenseRef = ref();
 const scanDirRef = ref();
diff --git a/frontend/src/views/toolbox/clam/record/index.vue b/frontend/src/views/toolbox/clam/record/index.vue
index c2b2cf99387b..cf77a1232553 100644
--- a/frontend/src/views/toolbox/clam/record/index.vue
+++ b/frontend/src/views/toolbox/clam/record/index.vue
@@ -185,7 +185,7 @@ import i18n from '@/lang';
 import { ElMessageBox } from 'element-plus';
 import { MsgSuccess } from '@/utils/message';
 import { shortcuts } from '@/utils/shortcuts';
-import { dateFormat, dateFormatForName } from '@/utils/util';
+import { dateFormat, dateFormatForName } from '@/utils/date';
 import { Toolbox } from '@/api/interface/toolbox';
 import LogFile from '@/components/log/file/index.vue';
 import { cleanClamRecord, handleClamScan, searchClamRecord } from '@/api/modules/toolbox';
diff --git a/frontend/src/views/toolbox/clean/index.vue b/frontend/src/views/toolbox/clean/index.vue
index 7625e7d9f592..5a7e4f2f7b8e 100644
--- a/frontend/src/views/toolbox/clean/index.vue
+++ b/frontend/src/views/toolbox/clean/index.vue
@@ -256,7 +256,7 @@
 </template>
 <script lang="ts" setup>
 import { onMounted, reactive, ref } from 'vue';
-import { computeSize } from '@/utils/util';
+import { computeSize } from '@/utils/size';
 import { getSettingInfo } from '@/api/modules/setting';
 import { clean, scan } from '@/api/modules/toolbox';
 import i18n from '@/lang';
diff --git a/frontend/src/views/toolbox/device/index.vue b/frontend/src/views/toolbox/device/index.vue
index 8af349878d77..c4cab4023d49 100644
--- a/frontend/src/views/toolbox/device/index.vue
+++ b/frontend/src/views/toolbox/device/index.vue
@@ -110,7 +110,7 @@ import Hostname from '@/views/toolbox/device/hostname/index.vue';
 import Hosts from '@/views/toolbox/device/hosts/index.vue';
 import { getDeviceBase, updateDevice } from '@/api/modules/toolbox';
 import i18n from '@/lang';
-import { computeSize } from '@/utils/util';
+import { computeSize } from '@/utils/size';
 import { MsgSuccess } from '@/utils/message';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
diff --git a/frontend/src/views/toolbox/device/swap/index.vue b/frontend/src/views/toolbox/device/swap/index.vue
index 8799a87a1121..c7f794e7e8f9 100644
--- a/frontend/src/views/toolbox/device/swap/index.vue
+++ b/frontend/src/views/toolbox/device/swap/index.vue
@@ -87,7 +87,8 @@ import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { updateDeviceSwap, getDeviceBase } from '@/api/modules/toolbox';
-import { computeSize, newUUID, splitSize } from '@/utils/util';
+import { computeSize, splitSize } from '@/utils/size';
+import { newUUID } from '@/utils/id';
 import TaskLog from '@/components/log/task/index.vue';
 import { loadBaseDir } from '@/api/modules/setting';
 
diff --git a/frontend/src/views/toolbox/fail2ban/ban-time/index.vue b/frontend/src/views/toolbox/fail2ban/ban-time/index.vue
index 7e859fba9586..0b57449e284e 100644
--- a/frontend/src/views/toolbox/fail2ban/ban-time/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/ban-time/index.vue
@@ -31,8 +31,7 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { updateFail2ban } from '@/api/modules/toolbox';
-import { splitTime, transTimeUnit } from '@/utils/util';
-
+import { splitTime, transTimeUnit } from '@/utils/validate';
 const emit = defineEmits<{ (e: 'search'): void }>();
 
 interface DialogProps {
diff --git a/frontend/src/views/toolbox/fail2ban/find-time/index.vue b/frontend/src/views/toolbox/fail2ban/find-time/index.vue
index 18f8012ac292..3cf094de7645 100644
--- a/frontend/src/views/toolbox/fail2ban/find-time/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/find-time/index.vue
@@ -32,8 +32,7 @@ import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import { updateFail2ban } from '@/api/modules/toolbox';
-import { splitTime, transTimeUnit } from '@/utils/util';
-
+import { splitTime, transTimeUnit } from '@/utils/validate';
 const emit = defineEmits<{ (e: 'search'): void }>();
 
 interface DialogProps {
diff --git a/frontend/src/views/toolbox/fail2ban/index.vue b/frontend/src/views/toolbox/fail2ban/index.vue
index db8bbc0cfed4..0bd38d8fd43c 100644
--- a/frontend/src/views/toolbox/fail2ban/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/index.vue
@@ -166,7 +166,7 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { getFail2banConf, getFail2banBase, operateFail2ban, updateFail2banByFile } from '@/api/modules/toolbox';
 import { ElMessageBox } from 'element-plus';
-import { transTimeUnit } from '@/utils/util';
+import { transTimeUnit } from '@/utils/validate';
 import { GlobalStore } from '@/store';
 
 const globalStore = GlobalStore();
diff --git a/frontend/src/views/toolbox/fail2ban/ips/index.vue b/frontend/src/views/toolbox/fail2ban/ips/index.vue
index 757c9e2d947f..78742d4b933d 100644
--- a/frontend/src/views/toolbox/fail2ban/ips/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/ips/index.vue
@@ -26,8 +26,7 @@ import { operatorFail2banSSHD, searchFail2ban } from '@/api/modules/toolbox';
 import { FormInstance } from 'element-plus';
 import { MsgSuccess } from '@/utils/message';
 import i18n from '@/lang';
-import { checkCidr, checkIpV4V6 } from '@/utils/util';
-
+import { checkCidr, checkIpV4V6 } from '@/utils/validate';
 const emit = defineEmits<{ (e: 'search'): void }>();
 
 const drawerVisible = ref(false);
diff --git a/frontend/src/views/toolbox/ftp/index.vue b/frontend/src/views/toolbox/ftp/index.vue
index e31fcfe646fb..374e2c32f4fb 100644
--- a/frontend/src/views/toolbox/ftp/index.vue
+++ b/frontend/src/views/toolbox/ftp/index.vue
@@ -163,8 +163,7 @@ import LogDialog from '@/views/toolbox/ftp/log/index.vue';
 import { Toolbox } from '@/api/interface/toolbox';
 import { GlobalStore } from '@/store';
 import { routerToFileWithPath } from '@/utils/router';
-import { getRandomStr } from '@/utils/util';
-
+import { getRandomStr } from '@/utils/id';
 const globalStore = GlobalStore();
 
 const loading = ref();
diff --git a/frontend/src/views/toolbox/ftp/log/index.vue b/frontend/src/views/toolbox/ftp/log/index.vue
index 755cdf753ade..bb715b0a83f9 100644
--- a/frontend/src/views/toolbox/ftp/log/index.vue
+++ b/frontend/src/views/toolbox/ftp/log/index.vue
@@ -40,7 +40,7 @@
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
 import { searchFtpLog } from '@/api/modules/toolbox';
-import { computeSizeFromByte } from '@/utils/util';
+import { computeSizeFromByte } from '@/utils/size';
 import i18n from '@/lang';
 
 const paginationConfig = reactive({
diff --git a/frontend/src/views/toolbox/ftp/operate/index.vue b/frontend/src/views/toolbox/ftp/operate/index.vue
index 58b8ba2957ff..abe51b15bce6 100644
--- a/frontend/src/views/toolbox/ftp/operate/index.vue
+++ b/frontend/src/views/toolbox/ftp/operate/index.vue
@@ -50,8 +50,8 @@ import { ElForm } from 'element-plus';
 import { MsgSuccess } from '@/utils/message';
 import { Toolbox } from '@/api/interface/toolbox';
 import { createFtp, updateFtp } from '@/api/modules/toolbox';
-import { getRandomStr, isSensitiveLinuxPath } from '@/utils/util';
-
+import { getRandomStr } from '@/utils/id';
+import { isSensitiveLinuxPath } from '@/utils/file';
 interface DialogProps {
     title: string;
     rowData?: Toolbox.FtpInfo;
diff --git a/frontend/src/views/website/runtime/dotnet/index.vue b/frontend/src/views/website/runtime/dotnet/index.vue
index 9519c4f8d3d9..d8a543629045 100644
--- a/frontend/src/views/website/runtime/dotnet/index.vue
+++ b/frontend/src/views/website/runtime/dotnet/index.vue
@@ -99,7 +99,7 @@
 import { onMounted, reactive, ref, computed } from 'vue';
 import { Runtime } from '@/api/interface/runtime';
 import { RuntimeDeleteCheck, SearchRuntimes, SyncRuntime } from '@/api/modules/runtime';
-import { dateFormat } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
 import OperateDonet from '@/views/website/runtime/dotnet/operate/index.vue';
 import Delete from '@/views/website/runtime/delete/index.vue';
 import i18n from '@/lang';
diff --git a/frontend/src/views/website/runtime/go/index.vue b/frontend/src/views/website/runtime/go/index.vue
index 73275929b82a..a609f279d26c 100644
--- a/frontend/src/views/website/runtime/go/index.vue
+++ b/frontend/src/views/website/runtime/go/index.vue
@@ -99,7 +99,7 @@
 import { onMounted, reactive, ref } from 'vue';
 import { Runtime } from '@/api/interface/runtime';
 import { RuntimeDeleteCheck, SearchRuntimes, SyncRuntime } from '@/api/modules/runtime';
-import { dateFormat } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
 import Operate from '@/views/website/runtime/go/operate/index.vue';
 import Delete from '@/views/website/runtime/delete/index.vue';
 import i18n from '@/lang';
diff --git a/frontend/src/views/website/runtime/java/index.vue b/frontend/src/views/website/runtime/java/index.vue
index daa545776bc9..157a54812efb 100644
--- a/frontend/src/views/website/runtime/java/index.vue
+++ b/frontend/src/views/website/runtime/java/index.vue
@@ -99,7 +99,7 @@
 import { onMounted, reactive, ref } from 'vue';
 import { Runtime } from '@/api/interface/runtime';
 import { RuntimeDeleteCheck, SearchRuntimes, SyncRuntime } from '@/api/modules/runtime';
-import { dateFormat } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
 import OperateJava from '@/views/website/runtime/java/operate/index.vue';
 import Delete from '@/views/website/runtime/delete/index.vue';
 import i18n from '@/lang';
diff --git a/frontend/src/views/website/runtime/node/index.vue b/frontend/src/views/website/runtime/node/index.vue
index 8ea718de5dbc..bbd197750a2b 100644
--- a/frontend/src/views/website/runtime/node/index.vue
+++ b/frontend/src/views/website/runtime/node/index.vue
@@ -100,7 +100,7 @@
 import { onMounted, reactive, ref } from 'vue';
 import { Runtime } from '@/api/interface/runtime';
 import { RuntimeDeleteCheck, SearchRuntimes, SyncRuntime } from '@/api/modules/runtime';
-import { dateFormat } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
 import OperateNode from '@/views/website/runtime/node/operate/index.vue';
 import Delete from '@/views/website/runtime/delete/index.vue';
 import i18n from '@/lang';
diff --git a/frontend/src/views/website/runtime/php/create/index.vue b/frontend/src/views/website/runtime/php/create/index.vue
index dd9e2bf39f99..7bd969dc4937 100644
--- a/frontend/src/views/website/runtime/php/create/index.vue
+++ b/frontend/src/views/website/runtime/php/create/index.vue
@@ -213,7 +213,7 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { reactive, ref } from 'vue';
-import { getLabel } from '@/utils/util';
+import { getLabel } from '@/utils/app-store';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 const { globalStore } = useGlobalStore();
 
diff --git a/frontend/src/views/website/runtime/php/extension-management/index.vue b/frontend/src/views/website/runtime/php/extension-management/index.vue
index 5e38018c5f17..b0ebb61174f2 100644
--- a/frontend/src/views/website/runtime/php/extension-management/index.vue
+++ b/frontend/src/views/website/runtime/php/extension-management/index.vue
@@ -37,7 +37,7 @@ import { Runtime } from '@/api/interface/runtime';
 import { GetPHPExtensions, InstallPHPExtension, UnInstallPHPExtension } from '@/api/modules/runtime';
 import i18n from '@/lang';
 import { ref } from 'vue';
-import { newUUID } from '@/utils/util';
+import { newUUID } from '@/utils/id';
 import { MsgSuccess } from '@/utils/message';
 import TaskLog from '@/components/log/task/index.vue';
 
diff --git a/frontend/src/views/website/runtime/php/index.vue b/frontend/src/views/website/runtime/php/index.vue
index 65b72edccdb7..2deb8e604969 100644
--- a/frontend/src/views/website/runtime/php/index.vue
+++ b/frontend/src/views/website/runtime/php/index.vue
@@ -133,7 +133,8 @@
 import { onMounted, reactive, ref } from 'vue';
 import { Runtime } from '@/api/interface/runtime';
 import { DeleteRuntime, RuntimeDeleteCheck, SearchRuntimes } from '@/api/modules/runtime';
-import { dateFormat, newUUID } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
+import { newUUID } from '@/utils/id';
 import { ElMessageBox } from 'element-plus';
 import { containerPrune } from '@/api/modules/container';
 import TaskLog from '@/components/log/task/index.vue';
diff --git a/frontend/src/views/website/runtime/python/index.vue b/frontend/src/views/website/runtime/python/index.vue
index d7a408673ded..2434d18725f2 100644
--- a/frontend/src/views/website/runtime/python/index.vue
+++ b/frontend/src/views/website/runtime/python/index.vue
@@ -99,7 +99,7 @@
 import { onMounted, reactive, ref } from 'vue';
 import { Runtime } from '@/api/interface/runtime';
 import { RuntimeDeleteCheck, SearchRuntimes, SyncRuntime } from '@/api/modules/runtime';
-import { dateFormat } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
 import Operate from '@/views/website/runtime/python/operate/index.vue';
 import Delete from '@/views/website/runtime/delete/index.vue';
 import i18n from '@/lang';
diff --git a/frontend/src/views/website/ssl/acme-account/index.vue b/frontend/src/views/website/ssl/acme-account/index.vue
index 5dbd29019a2a..f88f342990f3 100644
--- a/frontend/src/views/website/ssl/acme-account/index.vue
+++ b/frontend/src/views/website/ssl/acme-account/index.vue
@@ -51,7 +51,7 @@ import { deleteAcmeAccount, searchAcmeAccount, updateAcmeAccount } from '@/api/m
 import i18n from '@/lang';
 import { reactive, ref } from 'vue';
 import Create from './create/index.vue';
-import { getAccountName, getKeyName } from '@/utils/util';
+import { getAccountName, getKeyName } from '@/utils/ssl';
 import { MsgSuccess } from '@/utils/message';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
diff --git a/frontend/src/views/website/ssl/ca/index.vue b/frontend/src/views/website/ssl/ca/index.vue
index 10ea1ad5b481..18856ebcd88b 100644
--- a/frontend/src/views/website/ssl/ca/index.vue
+++ b/frontend/src/views/website/ssl/ca/index.vue
@@ -40,7 +40,8 @@ import i18n from '@/lang';
 import { reactive, ref } from 'vue';
 import Create from './create/index.vue';
 import Detail from './detail/index.vue';
-import { getKeyName, dateFormat } from '@/utils/util';
+import { getKeyName } from '@/utils/ssl';
+import { dateFormat } from '@/utils/date';
 import Obtain from './obtain/index.vue';
 
 const open = ref(false);
diff --git a/frontend/src/views/website/ssl/create/index.vue b/frontend/src/views/website/ssl/create/index.vue
index 20fa68de5ee1..efb3fa0114df 100644
--- a/frontend/src/views/website/ssl/create/index.vue
+++ b/frontend/src/views/website/ssl/create/index.vue
@@ -177,7 +177,7 @@ import { FormInstance } from 'element-plus';
 import { computed, reactive, ref } from 'vue';
 import { MsgSuccess } from '@/utils/message';
 import { KeyTypes } from '@/global/mimetype';
-import { getDNSName, getAccountName } from '@/utils/util';
+import { getDNSName, getAccountName } from '@/utils/ssl';
 import { defineAsyncComponent } from 'vue';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 import { loadOptionalComponent } from '@/extensions/optional';
diff --git a/frontend/src/views/website/ssl/detail/index.vue b/frontend/src/views/website/ssl/detail/index.vue
index cbaa95d737df..629a4b8fe6a9 100644
--- a/frontend/src/views/website/ssl/detail/index.vue
+++ b/frontend/src/views/website/ssl/detail/index.vue
@@ -69,8 +69,8 @@
 <script lang="ts" setup>
 import { getSSL } from '@/api/modules/website';
 import { ref } from 'vue';
-import { dateFormatSimple, getProvider, getDNSName } from '@/utils/util';
-
+import { dateFormatSimple } from '@/utils/date';
+import { getProvider, getDNSName } from '@/utils/ssl';
 const open = ref(false);
 const id = ref(0);
 const curr = ref('detail');
diff --git a/frontend/src/views/website/ssl/dns-account/index.vue b/frontend/src/views/website/ssl/dns-account/index.vue
index 0439aa97bb14..732dde5a9ef8 100644
--- a/frontend/src/views/website/ssl/dns-account/index.vue
+++ b/frontend/src/views/website/ssl/dns-account/index.vue
@@ -38,8 +38,7 @@ import { Website } from '@/api/interface/website';
 import { deleteDnsAccount, searchDnsAccount } from '@/api/modules/website';
 import { onMounted, reactive, ref } from 'vue';
 import i18n from '@/lang';
-import { getDNSName } from '@/utils/util';
-
+import { getDNSName } from '@/utils/ssl';
 const paginationConfig = reactive({
     cacheSizeKey: 'dns-account-page-size',
     currentPage: 1,
diff --git a/frontend/src/views/website/ssl/index.vue b/frontend/src/views/website/ssl/index.vue
index 6204265a1927..42ef6faacafe 100644
--- a/frontend/src/views/website/ssl/index.vue
+++ b/frontend/src/views/website/ssl/index.vue
@@ -180,7 +180,8 @@ import AcmeAccount from './acme-account/index.vue';
 import CA from './ca/index.vue';
 import Create from './create/index.vue';
 import Detail from './detail/index.vue';
-import { dateFormat, getProvider } from '@/utils/util';
+import { dateFormat } from '@/utils/date';
+import { getProvider } from '@/utils/ssl';
 import i18n from '@/lang';
 import { Website } from '@/api/interface/website';
 import { MsgError, MsgSuccess } from '@/utils/message';
diff --git a/frontend/src/views/website/website/components/https/index.vue b/frontend/src/views/website/website/components/https/index.vue
index 1cb5593128ad..0ef246f1e9ca 100644
--- a/frontend/src/views/website/website/components/https/index.vue
+++ b/frontend/src/views/website/website/components/https/index.vue
@@ -147,7 +147,8 @@
 
 <script lang="ts" setup>
 import { computed, watch, onMounted, ref } from 'vue';
-import { getAccountName, dateFormatSimple } from '@/utils/util';
+import { getAccountName } from '@/utils/ssl';
+import { dateFormatSimple } from '@/utils/date';
 import WebsiteSSL from '@/views/website/website/components/website-ssl/index.vue';
 import { Website } from '@/api/interface/website';
 import { listSSL, searchAcmeAccount } from '@/api/modules/website';
diff --git a/frontend/src/views/website/website/components/website-ssl/index.vue b/frontend/src/views/website/website/components/website-ssl/index.vue
index 97a8b73ae71f..073c92626efc 100644
--- a/frontend/src/views/website/website/components/website-ssl/index.vue
+++ b/frontend/src/views/website/website/components/website-ssl/index.vue
@@ -28,7 +28,8 @@
 </template>
 
 <script lang="ts" setup>
-import { dateFormatSimple, getProvider } from '@/utils/util';
+import { dateFormatSimple } from '@/utils/date';
+import { getProvider } from '@/utils/ssl';
 defineProps({
     websiteSSL: {
         type: Object,
diff --git a/frontend/src/views/website/website/config/basic/auth-basic/create/index.vue b/frontend/src/views/website/website/config/basic/auth-basic/create/index.vue
index 3267b2736108..08945c0dc1f7 100644
--- a/frontend/src/views/website/website/config/basic/auth-basic/create/index.vue
+++ b/frontend/src/views/website/website/config/basic/auth-basic/create/index.vue
@@ -51,8 +51,7 @@ import { FormInstance } from 'element-plus';
 import { ref } from 'vue';
 import { MsgSuccess } from '@/utils/message';
 import { Website } from '@/api/interface/website';
-import { getRandomStr } from '@/utils/util';
-
+import { getRandomStr } from '@/utils/id';
 const proxyForm = ref<FormInstance>();
 const rules = ref({
     username: [Rules.requiredInput, Rules.name],
diff --git a/frontend/src/views/website/website/config/basic/domain/index.vue b/frontend/src/views/website/website/config/basic/domain/index.vue
index 95a64714f9e5..5d6fc10734bc 100644
--- a/frontend/src/views/website/website/config/basic/domain/index.vue
+++ b/frontend/src/views/website/website/config/basic/domain/index.vue
@@ -42,7 +42,7 @@ import { Promotion } from '@element-plus/icons-vue';
 import { GlobalStore } from '@/store';
 import { checkAppInstalled } from '@/api/modules/app';
 import { MsgSuccess } from '@/utils/message';
-import { GetPunyCodeDomain, isPunycoded } from '@/utils/util';
+import { GetPunyCodeDomain, isPunycoded } from '@/utils/misc';
 const globalStore = GlobalStore();
 
 const props = defineProps({
diff --git a/frontend/src/views/website/website/config/basic/php/composer/index.vue b/frontend/src/views/website/website/config/basic/php/composer/index.vue
index edd0d8d2c42f..d75e13603d0a 100644
--- a/frontend/src/views/website/website/config/basic/php/composer/index.vue
+++ b/frontend/src/views/website/website/config/basic/php/composer/index.vue
@@ -45,7 +45,7 @@
 <script setup lang="ts">
 import { execComposer, getWebsite } from '@/api/modules/website';
 import i18n from '@/lang';
-import { newUUID } from '@/utils/util';
+import { newUUID } from '@/utils/id';
 import TaskLog from '@/components/log/task/index.vue';
 import FileList from '@/components/file-list/index.vue';
 
diff --git a/frontend/src/views/website/website/config/basic/proxy/create/index.vue b/frontend/src/views/website/website/config/basic/proxy/create/index.vue
index bcdfd5cd78b3..83de041fbec9 100644
--- a/frontend/src/views/website/website/config/basic/proxy/create/index.vue
+++ b/frontend/src/views/website/website/config/basic/proxy/create/index.vue
@@ -249,7 +249,7 @@ import { ref, watch } from 'vue';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { Website } from '@/api/interface/website';
 import { Units } from '@/global/mimetype';
-import { isDomain } from '@/utils/util';
+import { isDomain } from '@/utils/validate';
 import { Delete, Plus } from '@element-plus/icons-vue';
 import CorsSetting from '@/views/website/website/cors/index.vue';
 
diff --git a/frontend/src/views/website/website/create/index.vue b/frontend/src/views/website/website/create/index.vue
index e9ae7e2d7207..12517ac2a11b 100644
--- a/frontend/src/views/website/website/create/index.vue
+++ b/frontend/src/views/website/website/create/index.vue
@@ -451,10 +451,12 @@ import { reactive, ref, watch } from 'vue';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { SearchRuntimes } from '@/api/modules/runtime';
 import { Runtime } from '@/api/interface/runtime';
-import { getRandomStr, getRuntimeLabel, dateFormatSimple } from '@/utils/util';
+import { getRandomStr } from '@/utils/id';
+import { getRuntimeLabel } from '@/utils/app-store';
+import { dateFormatSimple } from '@/utils/date';
 import { getAppService } from '@/api/modules/app';
 import { v4 as uuidv4 } from 'uuid';
-import { getAccountName } from '@/utils/util';
+import { getAccountName } from '@/utils/ssl';
 import { Website } from '@/api/interface/website';
 import { getPathByType } from '@/api/modules/files';
 import { getWebsiteTypes } from '@/global/mimetype';
diff --git a/frontend/src/views/website/website/domain/index.vue b/frontend/src/views/website/website/domain/index.vue
index b621b2716668..1f5347cbd1b6 100644
--- a/frontend/src/views/website/website/domain/index.vue
+++ b/frontend/src/views/website/website/domain/index.vue
@@ -69,8 +69,7 @@ import { listDomains } from '@/api/modules/website';
 import { Website } from '@/api/interface/website';
 import { routerToNameWithParams } from '@/utils/router';
 import { Rules } from '@/global/form-rules';
-import { GetPunyCodeDomain, isPunycoded } from '@/utils/util';
-
+import { GetPunyCodeDomain, isPunycoded } from '@/utils/misc';
 interface Props {
     row: Website.Website;
     isHovered: boolean;
diff --git a/frontend/src/views/website/website/index.vue b/frontend/src/views/website/website/index.vue
index 6e0d3f20e080..9394a4fd385e 100644
--- a/frontend/src/views/website/website/index.vue
+++ b/frontend/src/views/website/website/index.vue
@@ -315,7 +315,8 @@ import { batchOperate, opWebsite, searchWebsites, updateWebsite } from '@/api/mo
 import { Website } from '@/api/interface/website';
 import { App } from '@/api/interface/app';
 import { ElMessageBox } from 'element-plus';
-import { dateFormatSimple, newUUID } from '@/utils/util';
+import { dateFormatSimple } from '@/utils/date';
+import { newUUID } from '@/utils/id';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { useI18n } from 'vue-i18n';
 import { getAgentGroupList } from '@/api/modules/group';
diff --git a/frontend/src/views/website/website/nginx/module/build/index.vue b/frontend/src/views/website/website/nginx/module/build/index.vue
index d994e626639c..c4fda11f562e 100644
--- a/frontend/src/views/website/website/nginx/module/build/index.vue
+++ b/frontend/src/views/website/website/nginx/module/build/index.vue
@@ -36,7 +36,7 @@ import { ref } from 'vue';
 import { FormInstance } from 'element-plus';
 import { getNginxModules, buildNginx } from '@/api/modules/nginx';
 import i18n from '@/lang';
-import { newUUID } from '@/utils/util';
+import { newUUID } from '@/utils/id';
 import TaskLog from '@/components/log/task/index.vue';
 import { Rules } from '@/global/form-rules';
 
diff --git a/frontend/src/views/website/website/status/index.vue b/frontend/src/views/website/website/status/index.vue
index d068caefb9a5..d29ca2eb9899 100644
--- a/frontend/src/views/website/website/status/index.vue
+++ b/frontend/src/views/website/website/status/index.vue
@@ -21,7 +21,7 @@
 </template>
 <script lang="ts" setup>
 import Status from '@/components/status/index.vue';
-import { dateFormatSimple } from '@/utils/util';
+import { dateFormatSimple } from '@/utils/date';
 const props = defineProps({
     primaryDomain: {
         type: String,