航线编辑样式修改

ruoyi-ui/src/views/dialogs/RouteEditDialog.vue

@@ -1,26 +1,32 @@
 <template>
   <el-dialog
-    title="编辑航线"
     :visible.sync="visible"
     width="560px"
     :close-on-click-modal="false"
     append-to-body
-    custom-class="blue-dialog route-edit-dialog"
+    custom-class="blue-dialog route-edit-dialog route-edit-dialog-no-title"
   >
-    <el-tabs v-model="activeTab" type="card" class="route-edit-tabs">
+    <div class="route-edit-tab-bar">
-      <el-tab-pane label="基础" name="basic">
+      <button type="button" class="tab-bar-item" :class="{ active: activeTab === 'basic' }" @click="activeTab = 'basic'">基础</button>
+      <button type="button" class="tab-bar-item" :class="{ active: activeTab === 'platform' }" @click="activeTab = 'platform'">平台</button>
+    </div>
+    <div v-show="activeTab === 'basic'" class="tab-pane-wrap">
         <div class="tab-pane-body basic-tab-content">
-        <el-form :model="form" label-width="88px" size="small" class="route-edit-form" @submit.native.prevent>
+        <el-form :model="form" label-width="88px" size="small" class="route-edit-form style-form" @submit.native.prevent>
+          <div class="form-section">
+            <div class="form-section-label">基本信息</div>
             <el-form-item label="航线名称">
               <el-input v-model="form.name" placeholder="请输入航线名称" clearable />
             </el-form-item>
-          <el-divider content-position="left">航点样式</el-divider>
+          </div>
+          <div class="form-section">
+            <div class="form-section-label">航点样式</div>
             <div class="form-row two-col">
               <el-form-item label="大小" class="col-item">
-              <el-slider v-model="styleForm.waypoint.pixelSize" :min="4" :max="20" :step="1" show-input />
+                <el-input-number v-model="styleForm.waypoint.pixelSize" :min="4" :max="20" :step="1" size="small" controls-position="right" style="width: 100%" />
               </el-form-item>
               <el-form-item label="边框粗细" class="col-item">
-              <el-slider v-model="styleForm.waypoint.outlineWidth" :min="1" :max="5" :step="1" show-input />
+                <el-input-number v-model="styleForm.waypoint.outlineWidth" :min="1" :max="5" :step="1" size="small" controls-position="right" style="width: 100%" />
               </el-form-item>
             </div>
             <div class="form-row two-col">
@@ -37,7 +43,9 @@
                 </div>
               </el-form-item>
             </div>
-          <el-divider content-position="left">航线样式</el-divider>
+          </div>
+          <div class="form-section">
+            <div class="form-section-label">航线样式</div>
             <div class="form-row two-col">
               <el-form-item label="线段样式" class="col-item">
                 <el-select v-model="styleForm.line.style" placeholder="请选择" style="width: 100%">
@@ -46,7 +54,7 @@
                 </el-select>
               </el-form-item>
               <el-form-item label="线宽" class="col-item">
-              <el-slider v-model="styleForm.line.width" :min="2" :max="12" :step="1" show-input />
+                <el-input-number v-model="styleForm.line.width" :min="2" :max="12" :step="1" size="small" controls-position="right" style="width: 100%" />
               </el-form-item>
             </div>
             <div class="form-row two-col">
@@ -63,100 +71,124 @@
                 </div>
               </el-form-item>
             </div>
+          </div>
         </el-form>
         </div>
-      </el-tab-pane>
+    </div>
-      <el-tab-pane label="平台" name="platform">
+    <div v-show="activeTab === 'platform'" class="tab-pane-wrap">
         <div class="tab-pane-body platform-tab-content">
           <div v-if="platformLoading" class="platform-loading">加载中...</div>
           <template v-else>
-            <el-tabs v-model="platformCategory" type="border-card" size="small">
+            <div class="platform-segmented">
-              <el-tab-pane label="空中" name="Air">
+              <button
-                <div class="platform-list">
+                type="button"
+                class="seg-item"
+                :class="{ active: platformCategory === 'Air' }"
+                @click="platformCategory = 'Air'"
+              >
+                <i class="seg-icon seg-icon-air"></i>
+                <span>空中</span>
+              </button>
+              <button
+                type="button"
+                class="seg-item"
+                :class="{ active: platformCategory === 'Sea' }"
+                @click="platformCategory = 'Sea'"
+              >
+                <i class="seg-icon seg-icon-sea"></i>
+                <span>海上</span>
+              </button>
+              <button
+                type="button"
+                class="seg-item"
+                :class="{ active: platformCategory === 'Ground' }"
+                @click="platformCategory = 'Ground'"
+              >
+                <i class="seg-icon seg-icon-ground"></i>
+                <span>地面</span>
+              </button>
+            </div>
+            <div v-show="platformCategory === 'Air'" class="platform-list">
               <div
                 v-for="platform in airPlatforms"
                 :key="platform.id"
-                    class="platform-item"
+                class="platform-card"
               >
-                    <div class="platform-icon">
+                <div class="platform-card-icon">
-                      <img v-if="isImg(platform.imageUrl)" :src="formatImg(platform.imageUrl)" class="platform-img" />
+                  <img v-if="isImg(platform.imageUrl)" :src="formatImg(platform.imageUrl)" class="platform-img" alt="" />
-                      <i v-else :class="platform.icon || 'el-icon-picture-outline'"></i>
+                  <i v-else class="card-icon-placeholder el-icon-s-promotion"></i>
                 </div>
-                    <div class="platform-info">
+                <div class="platform-card-info">
-                      <div class="platform-name">{{ platform.name }}</div>
+                  <div class="platform-card-name">{{ platform.name }}</div>
+                  <div class="platform-card-desc">{{ platformTypeLabel(platform.type) }}</div>
                 </div>
-                    <el-button
+                <button
-                      size="mini"
+                  type="button"
-                      type="primary"
+                  class="platform-card-btn"
-                      :plain="selectedPlatformId !== platform.id"
+                  :class="{ selected: selectedPlatformId === platform.id }"
-                      class="select-btn"
                   @click="selectPlatform(platform)"
                 >
+                  <i :class="selectedPlatformId === platform.id ? 'el-icon-check' : 'el-icon-plus'"></i>
                   {{ selectedPlatformId === platform.id ? '已选择' : '选择' }}
-                    </el-button>
+                </button>
               </div>
               <div v-if="airPlatforms.length === 0" class="empty-tip">暂无空中平台</div>
             </div>
-              </el-tab-pane>
+            <div v-show="platformCategory === 'Sea'" class="platform-list">
-              <el-tab-pane label="海上" name="Sea">
-                <div class="platform-list">
               <div
                 v-for="platform in seaPlatforms"
                 :key="platform.id"
-                    class="platform-item"
+                class="platform-card"
               >
-                    <div class="platform-icon">
+                <div class="platform-card-icon">
-                      <img v-if="isImg(platform.imageUrl)" :src="formatImg(platform.imageUrl)" class="platform-img" />
+                  <img v-if="isImg(platform.imageUrl)" :src="formatImg(platform.imageUrl)" class="platform-img" alt="" />
-                      <i v-else :class="platform.icon || 'el-icon-picture-outline'"></i>
+                  <i v-else class="card-icon-placeholder el-icon-s-flag"></i>
                 </div>
-                    <div class="platform-info">
+                <div class="platform-card-info">
-                      <div class="platform-name">{{ platform.name }}</div>
+                  <div class="platform-card-name">{{ platform.name }}</div>
+                  <div class="platform-card-desc">{{ platformTypeLabel(platform.type) }}</div>
                 </div>
-                    <el-button
+                <button
-                      size="mini"
+                  type="button"
-                      type="primary"
+                  class="platform-card-btn"
-                      :plain="selectedPlatformId !== platform.id"
+                  :class="{ selected: selectedPlatformId === platform.id }"
-                      class="select-btn"
                   @click="selectPlatform(platform)"
                 >
+                  <i :class="selectedPlatformId === platform.id ? 'el-icon-check' : 'el-icon-plus'"></i>
                   {{ selectedPlatformId === platform.id ? '已选择' : '选择' }}
-                    </el-button>
+                </button>
               </div>
               <div v-if="seaPlatforms.length === 0" class="empty-tip">暂无海上平台</div>
             </div>
-              </el-tab-pane>
+            <div v-show="platformCategory === 'Ground'" class="platform-list">
-              <el-tab-pane label="地面" name="Ground">
-                <div class="platform-list">
               <div
                 v-for="platform in groundPlatforms"
                 :key="platform.id"
-                    class="platform-item"
+                class="platform-card"
               >
-                    <div class="platform-icon">
+                <div class="platform-card-icon">
-                      <img v-if="isImg(platform.imageUrl)" :src="formatImg(platform.imageUrl)" class="platform-img" />
+                  <img v-if="isImg(platform.imageUrl)" :src="formatImg(platform.imageUrl)" class="platform-img" alt="" />
-                      <i v-else :class="platform.icon || 'el-icon-picture-outline'"></i>
+                  <i v-else class="card-icon-placeholder el-icon-van"></i>
                 </div>
-                    <div class="platform-info">
+                <div class="platform-card-info">
-                      <div class="platform-name">{{ platform.name }}</div>
+                  <div class="platform-card-name">{{ platform.name }}</div>
+                  <div class="platform-card-desc">{{ platformTypeLabel(platform.type) }}</div>
                 </div>
-                    <el-button
+                <button
-                      size="mini"
+                  type="button"
-                      type="primary"
+                  class="platform-card-btn"
-                      :plain="selectedPlatformId !== platform.id"
+                  :class="{ selected: selectedPlatformId === platform.id }"
-                      class="select-btn"
                   @click="selectPlatform(platform)"
                 >
+                  <i :class="selectedPlatformId === platform.id ? 'el-icon-check' : 'el-icon-plus'"></i>
                   {{ selectedPlatformId === platform.id ? '已选择' : '选择' }}
-                    </el-button>
+                </button>
               </div>
               <div v-if="groundPlatforms.length === 0" class="empty-tip">暂无地面平台</div>
             </div>
-              </el-tab-pane>
-            </el-tabs>
           </template>
         </div>
-      </el-tab-pane>
+    </div>
-    </el-tabs>
 
     <span slot="footer" class="dialog-footer">
       <el-button size="mini" @click="visible = false">取 消</el-button>
@@ -272,6 +304,10 @@ export default {
       const backendUrl = process.env.VUE_APP_BACKEND_URL || ''
       return backendUrl + cleanPath
     },
+    platformTypeLabel(type) {
+      const map = { Air: '空中平台', Sea: '海上平台', Ground: '地面平台' }
+      return map[type] || type || ''
+    },
     selectPlatform(platform) {
       this.selectedPlatformId = platform.id
       this.selectedPlatform = { id: platform.id, name: platform.name, imageUrl: platform.imageUrl }
@@ -332,7 +368,56 @@ export default {
 }
 </script>
 
+<style>
+/* 无标题弹窗：隐藏“编辑航线”标题，仅保留关闭按钮 */
+.route-edit-dialog-no-title .el-dialog__title { display: none !important; }
+.route-edit-dialog-no-title .el-dialog__header { margin-bottom: 0; padding: 10px 20px 8px; }
+/* 弹窗垂直居中 */
+.route-edit-dialog .el-dialog {
+  margin-top: 50vh !important;
+  transform: translateY(-50%);
+}
+.route-edit-dialog .el-dialog__body { padding-top: 12px; }
+</style>
 <style scoped>
+.route-edit-tab-bar {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 0;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e4e7ed;
+}
+.tab-bar-item {
+  padding: 0;
+  border: none;
+  background: none;
+  font-size: 14px;
+  color: #909399;
+  cursor: pointer;
+  position: relative;
+  padding-bottom: 12px;
+  margin-bottom: -12px;
+  outline: none;
+}
+.tab-bar-item:hover {
+  color: #606266;
+}
+.tab-bar-item.active {
+  color: #008aff;
+  font-weight: 500;
+}
+.tab-bar-item.active::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2px;
+  background: #008aff;
+}
+.tab-pane-wrap {
+  padding-top: 4px;
+}
 .tab-pane-body {
   min-height: 380px;
   box-sizing: border-box;
@@ -340,6 +425,22 @@ export default {
 .basic-tab-content {
   padding-right: 4px;
 }
+.form-section {
+  background: #f8f9fb;
+  border-radius: 8px;
+  padding: 12px 14px;
+  margin-bottom: 14px;
+}
+.form-section:last-of-type {
+  margin-bottom: 0;
+}
+.form-section-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 10px;
+  padding-left: 2px;
+}
 .basic-tab-content .form-row {
   display: flex;
   gap: 16px;
@@ -355,74 +456,172 @@ export default {
 .basic-tab-content .form-row.two-col .el-form-item {
   margin-bottom: 14px;
 }
+.basic-tab-content .form-section .el-form-item:last-child {
+  margin-bottom: 0;
+}
 .color-picker-wrap {
   display: inline-flex;
   align-items: center;
   gap: 8px;
 }
+.route-edit-form .color-value {
+  font-size: 12px;
+  color: #909399;
+  vertical-align: middle;
+}
+.route-edit-form .el-slider {
+  margin-right: 12px;
+}
+
+/* 平台页：分段选择 */
 .platform-tab-content {
   min-height: 380px;
   max-height: 380px;
   overflow-y: auto;
 }
+.platform-segmented {
+  display: flex;
+  gap: 0;
+  background: #eef1f6;
+  border-radius: 8px;
+  padding: 4px;
+  margin-bottom: 14px;
+}
+.seg-item {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  color: #909399;
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.seg-item:hover {
+  color: #606266;
+}
+.seg-item.active {
+  background: #008aff;
+  color: #fff;
+  font-weight: 500;
+}
+.seg-icon {
+  width: 18px;
+  height: 18px;
+  display: inline-block;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  opacity: 0.9;
+}
+.seg-item.active .seg-icon {
+  opacity: 1;
+  filter: brightness(0) invert(1);
+}
+.seg-icon-air {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23909399'%3E%3Cpath d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E");
+}
+.seg-icon-sea {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23909399'%3E%3Cpath d='M20 21c-1.39 0-2.78-.47-4-1.32-2.44 1.71-5.56 1.71-8 0C6.78 20.53 5.39 21 4 21H2v2h2c1.38 0 2.74-.35 4-.99 2.52 1.29 5.48 1.29 8 0 1.26.65 2.62.99 4 .99h2v-2h-2zM3.95 19H4c1.6 0 3.02-.88 4-2 .98 1.12 2.4 2 4 2h.05l1.89-6.68c.08-.26.06-.54-.06-.78-.12-.24-.32-.42-.57-.5L20 10.62V6c0-1.1-.9-2-2-2h-3V1H9v3H6c-1.1 0-2 .9-2 2v4.62l-1.29.42c-.25.08-.45.26-.57.5-.12.24-.14.52-.06.78L3.95 19zM6 6h12v3.97L12 8 6 9.97V6z'/%3E%3C/svg%3E");
+}
+.seg-icon-ground {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23909399'%3E%3Cpath d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E");
+}
+
+/* 平台卡片列表 */
 .platform-loading,
 .empty-tip {
   padding: 20px;
   color: #909399;
   text-align: center;
+  font-size: 13px;
 }
 .platform-list {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
 }
-.platform-item {
+.platform-card {
   display: flex;
   align-items: center;
-  padding: 8px;
+  padding: 12px 14px;
-  border: 1px solid #ebeef5;
+  background: #f8f9fb;
-  border-radius: 4px;
+  border-radius: 8px;
+  border: 1px solid #eef1f6;
+  transition: border-color 0.2s;
+}
+.platform-card:hover {
+  border-color: #dcdfe6;
 }
-.platform-icon {
+.platform-card-icon {
-  width: 36px;
+  width: 44px;
-  height: 36px;
+  height: 44px;
+  min-width: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-right: 10px;
+  margin-right: 12px;
-  background: #f5f7fa;
+  background: #e0f0ff;
-  border-radius: 4px;
+  border-radius: 50%;
 }
-.platform-img {
+.platform-card-icon .platform-img {
-  max-width: 32px;
+  width: 28px;
-  max-height: 32px;
+  height: 28px;
   object-fit: contain;
 }
-.platform-info {
+.platform-card-icon .card-icon-placeholder {
+  font-size: 22px;
+  color: #008aff;
+}
+.platform-card-info {
   flex: 1;
   min-width: 0;
 }
-.platform-name {
+.platform-card-name {
-  font-size: 13px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 2px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.select-btn {
+.platform-card-desc {
-  flex-shrink: 0;
-}
-.route-edit-form .el-divider__text {
   font-size: 12px;
+  color: #909399;
+}
+.platform-card-btn {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 14px;
+  border-radius: 6px;
+  font-size: 13px;
+  border: 1px solid #dcdfe6;
+  background: #fff;
   color: #606266;
+  cursor: pointer;
+  transition: all 0.2s;
 }
-.route-edit-form .color-value {
+.platform-card-btn:hover {
-  font-size: 12px;
+  border-color: #008aff;
-  color: #909399;
+  color: #008aff;
-  vertical-align: middle;
 }
-.route-edit-form .el-slider {
+.platform-card-btn.selected {
-  margin-right: 12px;
+  background: #008aff;
+  border-color: #008aff;
+  color: #fff;
 }
+.platform-card-btn i {
+  font-size: 12px;
+}
+
 .blue-btn {
   background: #008aff;
   border-color: #008aff;