【类 型】：factor

【原  因】：完善地图添加 编辑功能
【过  程】：
【影  响】：

src/store/index.js

@@ -1214,24 +1214,24 @@ const store = new Vuex.Store({
         const host = rootState.settings.host
         const list = res.data.mapStyleList.map(style => {
           const tiles = Array.isArray(style.tiles) ? style.tiles : JSON.parse(style.tiles)
-          const sourceKey = style.source_key || 'default'
+          const sourceKey = 'default'
+          const spriteUrl = style.sprite && String(style.sprite).trim() ? style.sprite : `${host}/Public/map/sprite`
 
           return {
             // 附带原始字段，便于管理端展示和操作
             id: style.id,
             is_active: Number(style.is_active ?? 1),
             sort_order: Number(style.sort_order ?? 0),
-            source_key: sourceKey,
             name: style.name,
-            sprite: `${host}/Public/map/sprite`,
+            sprite: spriteUrl,
             glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
             version: 8,
             sources: {
               [sourceKey]: {
                 type: 'raster',
-                tileSize: Number(style.tileSize || 256),
+                tileSize: 256,
                 tiles,
-                attribution: style.attribution || ''
+                attribution: ''
               }
             },
             layers: [{

src/views/layout/components/main/mapstyle/add.vue

@@ -21,7 +21,8 @@
               <el-form-item label="样式名称" prop="name">
                 <el-input v-model="form.name" placeholder="例如：谷歌卫星瓦片" />
               </el-form-item>
-              <el-form-item label="版本" prop="version">
+              <!-- 版本号固定为8，不显示 -->
+              <el-form-item v-show="false" label="版本" prop="version">
                 <el-input-number v-model="form.version" :min="1" :max="8" :step="1" />
               </el-form-item>
               <el-form-item label="是否启用" prop="is_active">
@@ -38,23 +39,12 @@
                 </el-divider>
               </div>
               <el-form-item label="sprite 路径" prop="sprite">
-                <el-input v-model="form.sprite" placeholder="可选：sprite 路径（如有）" />
+                <el-input v-model="form.sprite" :placeholder="form.sprite && form.sprite.includes('/Public/map/sprite') ? '使用默认路径 /Public/map/sprite' : '可选：sprite 路径（留空则使用默认路径）'" />
               </el-form-item>
               <el-form-item label="glyphs 路径" prop="glyphs">
                 <el-input v-model="form.glyphs" placeholder="可选：glyphs 路径（如有）" />
               </el-form-item>
-              <el-form-item label="source 名称" prop="source_name">
+              <!-- 固定使用默认值，不显示 -->
-                <el-input v-model="form.source_name" placeholder="例如：google、bing" />
-              </el-form-item>
-              <el-form-item label="source 类型" prop="source_type">
-                <el-select v-model="form.source_type" placeholder="请选择 source 类型">
-                  <el-option label="raster" value="raster" />
-                  <el-option label="vector" value="vector" />
-                </el-select>
-              </el-form-item>
-              <el-form-item label="瓦片大小" prop="tile_size">
-                <el-input-number v-model="form.tile_size" :min="1" :max="1024" :step="1" />
-              </el-form-item>
               <el-form-item label="瓦片URL列表" prop="tiles">
                 <el-input
                   type="textarea"
@@ -63,31 +53,7 @@
                   placeholder="每行一个URL，或粘贴JSON数组，例如：\nhttps://server.com/tiles/{z}/{x}/{y}.png"
                 />
               </el-form-item>
-              <el-form-item label="数据来源(署名)" prop="attribution">
+              <!-- 固定使用默认值，不显示 -->
-                <el-input type="textarea" :rows="2" v-model="form.attribution" placeholder="可选，如：© Google" />
-              </el-form-item>
-
-              <!-- 图层配置 -->
-              <div class="p-t-10 p-b-5">
-                <el-divider content-position="left">
-                  <font class="fb f-s-18 normalFontColor">图层配置</font>
-                </el-divider>
-              </div>
-              <el-form-item label="图层ID" prop="layer_id">
-                <el-input v-model="form.layer_id" placeholder="用于 map.addLayer 的 id" />
-              </el-form-item>
-              <el-form-item label="图层类型" prop="layer_type">
-                <el-select v-model="form.layer_type" placeholder="请选择图层类型">
-                  <el-option label="raster" value="raster" />
-                  <el-option label="background" value="background" />
-                  <el-option label="fill" value="fill" />
-                  <el-option label="line" value="line" />
-                  <el-option label="symbol" value="symbol" />
-                </el-select>
-              </el-form-item>
-              <el-form-item label="图层source" prop="layer_source">
-                <el-input v-model="form.layer_source" placeholder="通常与 source 名称一致" />
-              </el-form-item>
 
               <!-- 提交按钮 -->
               <el-form-item>
@@ -116,16 +82,9 @@ export default {
         id: null,
         name: '',
         sprite: '',
-        glyphs: '',
+        glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
         version: 8,
-        source_name: '',
-        source_type: 'raster',
-        tile_size: 256,
         tiles: [], // 存数组，表单用 tilesInput 辅助
-        attribution: '',
-        layer_id: '',
-        layer_type: 'raster',
-        layer_source: '',
         is_active: 1,
         sort_order: 0
       },
@@ -133,23 +92,23 @@ export default {
       pageState: 'add',
       mapStyleId: this.$route.params.id,
       rules: {
-        name: [{ required: true, message: '请输入样式名称', trigger: 'blur' }],
+        name: [{ required: true, message: '请输入样式名称', trigger: 'blur' }]
-        version: [{ type: 'number', required: true, message: '请输入版本', trigger: 'change' }],
-        source_name: [{ required: true, message: '请输入 source 名称', trigger: 'blur' }],
-        source_type: [{ required: true, message: '请选择 source 类型', trigger: 'change' }],
-        tile_size: [{ type: 'number', required: true, message: '请输入瓦片大小', trigger: 'change' }],
-        layer_id: [{ required: true, message: '请输入图层ID', trigger: 'blur' }],
-        layer_type: [{ required: true, message: '请选择图层类型', trigger: 'change' }],
-        layer_source: [{ required: true, message: '请输入图层source', trigger: 'blur' }]
       }
     }
   },
-  created () {
+  async created () {
     // 初始化页面状态与预填充
     if (this.mapStyleId != null) {
       this.pageState = 'edit'
       this.form.id = this.mapStyleId
-      const item = (this.$store.state.mapStyleList || []).find(i => String(i.id) === String(this.mapStyleId))
+      let item = (this.$store.state.mapStyleList || []).find(i => String(i.id) === String(this.mapStyleId))
+      if (!item) {
+        // 尝试拉取一次列表后再匹配（兼容刷新后store丢失）
+        try {
+          await this.$store.dispatch('fetchMapStyleList', this.$store.state.settings.host)
+          item = (this.$store.state.mapStyleList || []).find(i => String(i.id) === String(this.mapStyleId))
+        } catch (e) {}
+      }
       if (item) {
         this.fillFormFromItem(item)
       } else {
@@ -172,24 +131,23 @@ export default {
     },
     fillFormFromItem (item) {
       this.form.name = item.name || ''
-      this.form.sprite = item.sprite || ''
+      // 如果包含默认路径，设置为空字符串
-      this.form.glyphs = item.glyphs || ''
+      this.form.sprite = (item.sprite && item.sprite.includes('/Public/map/sprite')) ? '' : (item.sprite || '')
-      this.form.version = Number(item.version ?? 8)
+      this.form.glyphs = item.glyphs || 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf'
-      this.form.source_name = item.source_name || ''
+      this.form.version = 8
-      this.form.source_type = item.source_type || 'raster'
-      this.form.tile_size = Number(item.tile_size ?? 256)
       // tiles 兼容字符串JSON或数组
       let tiles = []
-      if (Array.isArray(item.tiles)) tiles = item.tiles
+      if (Array.isArray(item.tiles)) {
-      else if (typeof item.tiles === 'string') {
+        tiles = item.tiles
-        try { tiles = JSON.parse(item.tiles) } catch (e) { tiles = [] }
+      } else if (typeof item.tiles === 'string') {
+        try {
+          tiles = JSON.parse(item.tiles)
+        } catch (e) {
+          tiles = item.tiles.split('\n').filter(Boolean)
+        }
       }
       this.form.tiles = tiles
-      this.tilesInput = tiles.join('\n')
+      this.tilesInput = Array.isArray(tiles) ? tiles.join('\n') : tiles
-      this.form.attribution = item.attribution || ''
-      this.form.layer_id = item.layer_id || ''
-      this.form.layer_type = item.layer_type || 'raster'
-      this.form.layer_source = item.layer_source || ''
       this.form.is_active = Number(item.is_active ?? 1)
       this.form.sort_order = Number(item.sort_order ?? 0)
     },
@@ -197,26 +155,56 @@ export default {
       this.$refs.formRef && this.$refs.formRef.resetFields()
       this.tilesInput = ''
       this.form.version = 8
-      this.form.source_type = 'raster'
-      this.form.tile_size = 256
-      this.form.layer_type = 'raster'
       this.form.is_active = 1
       this.form.sort_order = 0
     },
     handleSubmit () {
-      this.$refs.formRef.validate((valid) => {
+      this.$refs.formRef.validate(valid => {
-        if (!valid) return
+        if (valid) {
-        // 准备 tiles
+          // 处理 tiles 输入
-        const tiles = this.parseTilesInput(this.tilesInput)
+          this.form.tiles = this.parseTilesInput(this.tilesInput)
-        if (!tiles.length) {
+          if (this.form.tiles.length === 0) {
-          this.$message.error('请至少填写一个瓦片URL')
+            this.$message.warning('请至少输入一个瓦片URL')
-          return
+            return
-        }
+          }
-        this.form.tiles = tiles
 
-        // 提交占位：待接入 store actions: fetchAddMapStyle / fetchSaveMapStyle
+          // 准备提交的数据，只包含必要的字段
-        this.$message.success(`${this.pageState === 'add' ? '创建' : '更新'}成功（示例页，待接入后端）`)
+          const submitData = {
-        this.$router.replace('/mapstyle/index')
+            name: this.form.name,
+            // 如果sprite为空，使用默认路径
+            sprite: this.form.sprite || '/Public/map/sprite',
+            glyphs: this.form.glyphs,
+            tiles: this.form.tiles,
+            is_active: this.form.is_active,
+            sort_order: this.form.sort_order
+          }
+
+          // 如果是编辑模式，添加ID
+          if (this.pageState === 'edit' && this.form.id) {
+            submitData.id = this.form.id
+          }
+
+          const loading = this.$loading({ lock: true })
+          const action = this.pageState === 'add'
+            ? this.$store.dispatch('addMapStyle', submitData)
+            : this.$store.dispatch('saveMapStyle', submitData)
+
+          action.then(res => {
+            if (res.data.status === 1) {
+              this.$message.success(res.data.msg)
+              this.$router.push('/layout/mapstyle')
+            } else {
+              this.$message.error(res.data.msg || '操作失败')
+            }
+          }).catch(e => {
+            this.$message.error(e.message || '请求出错')
+          }).finally(() => {
+            loading.close()
+          })
+        } else {
+          this.$message.warning('请正确填写表单')
+          return false
+        }
       })
     }
   }

src/views/layout/components/main/mapstyle/index.vue

@@ -24,7 +24,7 @@
       <el-table-column align="center" label="ID" width="60">
         <template slot-scope="scope">{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</template>
       </el-table-column>
-      <el-table-column prop="name" label="样式名称" min-width="160">
+      <el-table-column prop="name" label="样式名称" width="160" min-width="160">
         <template slot-scope="scope">{{ displayName(scope.row, scope.$index) }}</template>
       </el-table-column>
       <el-table-column prop="style" label="样式/URL" min-width="260" show-overflow-tooltip>
@@ -98,10 +98,12 @@ export default {
         this.$message.error('只能选择一条记录')
         return
       }
-      // 这里暂时用序号作为 id（样式可能没有后端 id），编辑页仅作占位
       const row = sel[0]
-      const id = typeof row === 'object' && row.id != null ? row.id : this.styleList.indexOf(row)
+      if (!row || row.id == null) {
-      this.$router.push('/mapstyle/edit/' + id)
+        this.$message.error('此样式缺少后端ID，无法编辑')
+        return
+      }
+      this.$router.push('/mapstyle/edit/' + row.id)
     }
   }
 }