feat: 前端增加 msg-info 组件

frontend/components.d.ts

@@ -80,6 +80,7 @@ declare module 'vue' {
     Loading: typeof import('element-plus/es')['ElLoadingDirective']
     Logo: typeof import('./src/components/app-layout/menu/components/Logo.vue')['default']
     Menu: typeof import('./src/components/app-layout/menu/index.vue')['default']
+    MsgInfo: typeof import('./src/components/msg-info/index.vue')['default']
     Popover: typeof import('element-plus/es')['ElPopoverDirective']
     RouterButton: typeof import('./src/components/router-button/index.vue')['default']
     Status: typeof import('./src/components/status/index.vue')['default']

frontend/src/components/msg-info/index.vue

@@ -0,0 +1,34 @@
+<template>
+    <el-tooltip placement="top-start">
+        <template #content>
+            <div class="info-break" :style="{ width: width + 'px' }">{{ info }}</div>
+        </template>
+        <div class="info-hidden" :style="{ width: width + 'px' }">{{ info }}</div>
+    </el-tooltip>
+</template>
+<script lang="ts" setup>
+defineProps({
+    width: {
+        type: String,
+        default: '100',
+    },
+    info: {
+        type: String,
+        default: '',
+    },
+});
+</script>
+
+<style scoped>
+.info-hidden {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.info-break {
+    width: 100px;
+    word-break: break-all;
+    word-wrap: break-word;
+}
+</style>

frontend/src/styles/common.scss

@@ -286,3 +286,4 @@
     font-size: 14px;
     color: #646a73;
 }
+

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

@@ -7,9 +7,8 @@
         :title="$t('file.downloadProcess')"
     >
         <div v-for="(value, index) in res" :key="index">
-            <span>
-                {{ value['percent'] === 100 ? $t('file.downlodSuccess') : $t('file.downloading') }} {{ value['name'] }}
-            </span>
+            <span>{{ value['percent'] === 100 ? $t('file.downlodSuccess') : $t('file.downloading') }}</span>
+            <MsgInfo :info="value['name']" width="250" />
             <el-progress v-if="value['total'] == 0" :percentage="100" :indeterminate="true" :duration="1" />
             <el-progress v-else :text-inside="true" :stroke-width="15" :percentage="value['percent']"></el-progress>
             <span>
@@ -24,6 +23,7 @@
 import { FileKeys } from '@/api/modules/files';
 import { computeSize } from '@/utils/util';
 import { onBeforeUnmount, ref, toRefs } from 'vue';
+import MsgInfo from '@/components/msg-info/index.vue';
 
 const props = defineProps({
     open: {
@@ -63,8 +63,8 @@ const onClose = () => {};
 const initProcess = () => {
     let href = window.location.href;
     let protocol = href.split('//')[0] === 'http:' ? 'ws' : 'wss';
-    let ipLocal = href.split('//')[1].split('/')[0];
-    processSocket = new WebSocket(`${protocol}://${ipLocal}/api/v1/files/ws`);
+    // let ipLocal = href.split('//')[1].split('/')[0];
+    processSocket = new WebSocket(`${protocol}://localhost:9999/api/v1/files/ws`);
     processSocket.onopen = onOpenProcess;
     processSocket.onmessage = onMessage;
     processSocket.onerror = onerror;

frontend/src/views/website/website/index.vue

@@ -76,8 +76,13 @@
                         <template #default="{ row }">
                             <el-button link :icon="Promotion" @click="openUrl(row)"></el-button>
                             <span>
-                                <el-link type="primary" :underline="false" @click="openConfig(row.id)">
-                                    <span style="margin-left: 10px">{{ row.primaryDomain }}</span>
+                                <el-link
+                                    style="margin-left: 10px"
+                                    type="primary"
+                                    :underline="false"
+                                    @click="openConfig(row.id)"
+                                >
+                                    <MsgInfo :info="row.primaryDomain" width="120" />
                                 </el-link>
                             </span>
                         </template>
@@ -104,12 +109,11 @@
                             </el-button>
                         </template>
                     </el-table-column>
-                    <el-table-column
-                        :label="$t('website.remark')"
-                        show-overflow-tooltip
-                        fix
-                        prop="remark"
-                    ></el-table-column>
+                    <el-table-column :label="$t('website.remark')" fix prop="remark">
+                        <template #default="{ row }">
+                            <MsgInfo :info="row.remark" width="120" />
+                        </template>
+                    </el-table-column>
                     <el-table-column :label="$t('website.protocol')" prop="protocol"></el-table-column>
                     <el-table-column :label="$t('website.expireDate')">
                         <template #default="{ row, $index }">
@@ -187,6 +191,7 @@ import { dateFormatSimple } from '@/utils/util';
 import { MsgSuccess } from '@/utils/message';
 import { useI18n } from 'vue-i18n';
 import { Promotion, VideoPlay, VideoPause } from '@element-plus/icons-vue';
+import MsgInfo from '@/components/msg-info/index.vue';
 
 const shortcuts = [
     {