perf: Optimize display for long website names (#11581)

frontend/src/views/cronjob/cronjob/operate/index.vue

@@ -255,10 +255,20 @@
                                                 :value="item.id + ''"
                                                 :label="item.primaryDomain"
                                             >
-                                                <span>{{ item.primaryDomain }}</span>
-                                                <el-tag class="tagClass">
-                                                    {{ item.alias }}
-                                                </el-tag>
+                                                <div class="option-content">
+                                                    <el-tooltip
+                                                        :content="item.primaryDomain"
+                                                        placement="top"
+                                                        :open-delay="500"
+                                                        effect="dark"
+                                                    >
+                                                        <span class="domain-text">{{ item.primaryDomain }}</span>
+                                                    </el-tooltip>
+
+                                                    <el-tag class="tagClass">
+                                                        {{ item.alias }}
+                                                    </el-tag>
+                                                </div>
                                             </el-option>
                                         </el-select>
                                         <span class="input-help" v-if="form.type === 'cutWebsiteLog'">
@@ -1624,4 +1634,22 @@ onMounted(() => {
     margin: 3px 0;
     border-top: 1px var(--el-border-color) var(--el-border-style);
 }
+
+.option-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.domain-text {
+    max-width: 200px;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    display: inline-block;
+    vertical-align: middle;
+}
 </style>

frontend/src/views/website/website/config/basic/other/index.vue

@@ -1,6 +1,6 @@
 <template>
     <el-row :gutter="20" v-loading="loading">
-        <el-col :xs="24" :sm="18" :md="8" :lg="8" :xl="8">
+        <el-col :xs="24" :sm="24" :md="18" :lg="14" :xl="8">
             <el-form ref="websiteForm" label-position="right" label-width="80px" :model="form" :rules="rules">
                 <el-form-item :label="$t('commons.table.name')" prop="primaryDomain">
                     <el-input v-model="form.primaryDomain"></el-input>