feat: Optimize frontend structure

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"

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 = {

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);
 };

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';

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';

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

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';

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);
 };

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);

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) => {

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,

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({

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">

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">

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">

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[]>([]);
 

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[]>([]);

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>

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>