diff --git a/src/components/MapBox.vue b/src/components/MapBox.vue
index 791fd19..38d5cdc 100644
--- a/src/components/MapBox.vue
+++ b/src/components/MapBox.vue
@@ -123,7 +123,9 @@ export default {
   },
   async mounted () {
     // 等待 异步 加载 后端地图源 地址
-    await this.$store.dispatch('fetchMapStyleList', this.$store.state.settings.host)
+    if (this.$store.state.mapStyleList.length === 0) {
+      await this.$store.dispatch('fetchMapStyleList', this.$store.state.settings.host)
+    }
     // 等待 异步 地图初始化
     await this.init()
 
diff --git a/src/router/index.js b/src/router/index.js
index 8e5a81e..f5edccd 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -16,6 +16,51 @@ const routes = [
       hidden: true
     }
   },
+  {
+    path: '/mapstyle',
+    component: Layout,
+    redirect: '/mapstyle/index',
+    meta: {
+      title: '地图类型',
+      icon: 'el-icon-map-location',
+      roles: ['master'],
+      hidden: true
+    },
+    children: [
+      {
+        path: '/mapstyle/index',
+        component: () => import('@/views/layout/components/main/mapstyle/index'),
+        meta: {
+          title: '地图列表',
+          icon: 'el-icon-tickets',
+          roles: ['master'],
+          hidden: true
+        }
+      },
+      {
+        path: '/mapstyle/add',
+        component: () => import('@/views/layout/components/main/mapstyle/add'),
+        meta: {
+          title: '地图添加',
+          icon: 'el-icon-plus',
+          roles: ['master'],
+          tapName: 'plane',
+          hidden: true
+        }
+      },
+      {
+        path: '/mapstyle/edit/:id',
+        component: () => import('@/views/layout/components/main/mapstyle/add'),
+        meta: {
+          title: '地图更新',
+          icon: 'el-icon-edit',
+          roles: ['master'],
+          tapName: 'plane',
+          hidden: true
+        }
+      }
+    ]
+  },
   {
     path: '/home',
     component: Layout,
diff --git a/src/store/index.js b/src/store/index.js
index 7eea0c6..89cd1b1 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1217,6 +1217,11 @@ const store = new Vuex.Store({
           const sourceKey = style.source_key || 'default'
 
           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`,
             glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
@@ -1241,6 +1246,23 @@ const store = new Vuex.Store({
         commit('setMapStyleList', [])
         Message.error(res.data.msg || '地图样式获取失败')
       }
+    },
+    /**
+     * @description: 地图样式排序
+     * @param {*} form { id, sort_order }
+     */
+    async fetchOrderMapStyle ({ dispatch }, form) {
+      const params = new URLSearchParams()
+      params.append('id', form.id)
+      params.append('sort_order', form.sort_order)
+      const res = await api.post('orderMapStyle', params, 'Plane')
+      if (res.data.status === 1) {
+        await dispatch('fetchMapStyleList') // 刷新样式列表
+        Message.success(res.data.msg || '排序已更新')
+      } else {
+        Message.error(res.data.msg || '排序更新失败')
+      }
+      return res
     }
   },
   modules: {
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 6189df9..10986d1 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -137,6 +137,10 @@ label {
   color: #606266 !important;
 }
 
+.el-form-item__content {
+  padding-left: 25px !important;
+}
+
 /* 当屏幕宽度小于等于480px时 */
 @media (max-width: 480px) {
   .el-dialog {
diff --git a/src/views/layout/components/main/home/set.vue b/src/views/layout/components/main/home/set.vue
index 2f8b206..e1dbfde 100644
--- a/src/views/layout/components/main/home/set.vue
+++ b/src/views/layout/components/main/home/set.vue
@@ -40,6 +40,16 @@
                 </el-checkbox-group>
               </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="地图样式" v-if="this.$store.state.user.power === 'master'">
+                <el-button type="text" @click="goMapStyle">前往地图样式</el-button>
+              </el-form-item>
+
             </el-form>
           </el-main>
         </el-container>
@@ -102,7 +112,12 @@ export default {
       this.$store.commit('settings/setLanguage', lang)
       this.$message.success(`语言已切换为：${lang === 'zh-CN' ? '简体中文' : lang}`)
       // 如果你用的是 vue-i18n，这里可能还需要调用 i18n.global.locale = lang
+    },
+    goMapStyle () {
+      this.$router.push('/mapstyle/index')
     }
   }
 }
 </script>
+<style lang="scss" scoped>
+</style>
diff --git a/src/views/layout/components/main/mapstyle/add.vue b/src/views/layout/components/main/mapstyle/add.vue
new file mode 100644
index 0000000..d9289d8
--- /dev/null
+++ b/src/views/layout/components/main/mapstyle/add.vue
@@ -0,0 +1,229 @@
+<template>
+  <div class="app-container">
+    <el-row class="m-t-0">
+      <el-col :span="24">
+        <el-container>
+          <el-header height="42px" class="l-h-42 p-l-10 p-r-10 border border-b-n">
+            <div class="l">
+              <i :class="pageState === 'add' ? 'el-icon-plus f-s-20' : 'el-icon-edit f-s-20'"></i>
+              <font class="m-l-10 f-s-18 fb">{{ $route.meta.title }}</font>
+            </div>
+          </el-header>
+          <el-main class="border p-20 m-b-20">
+            <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" :label-position="$store.state.app.isWideScreen ? 'top' : 'right'" class="w-80">
+
+              <!-- 基本信息 -->
+              <div class="p-b-5">
+                <el-divider content-position="left">
+                  <font class="fb f-s-18 normalFontColor">基本信息</font>
+                </el-divider>
+              </div>
+              <el-form-item label="样式名称" prop="name">
+                <el-input v-model="form.name" placeholder="例如：谷歌卫星瓦片" />
+              </el-form-item>
+              <el-form-item 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">
+                <el-switch v-model="form.is_active" :active-value="1" :inactive-value="0" />
+              </el-form-item>
+              <el-form-item label="排序" prop="sort_order">
+                <el-input-number v-model="form.sort_order" :min="0" :max="9999" :step="1" />
+              </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="sprite 路径" prop="sprite">
+                <el-input v-model="form.sprite" placeholder="可选：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"
+                  :rows="4"
+                  v-model="tilesInput"
+                  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>
+                <el-button type="primary" :icon="pageState === 'add' ? 'el-icon-plus' : 'el-icon-edit'" @click="handleSubmit">
+                  {{ pageState === 'add' ? '创建' : '更新' }}
+                </el-button>
+                <el-button v-if="pageState === 'add'" class="iconfont icon-qingchu" @click="resetForm">
+                  <font class="m-l-5">重填</font>
+                </el-button>
+              </el-form-item>
+
+            </el-form>
+          </el-main>
+        </el-container>
+      </el-col>
+    </el-row>
+  </div>
+  </template>
+
+<script>
+export default {
+  name: 'MapStyleAdd',
+  data () {
+    return {
+      form: {
+        id: null,
+        name: '',
+        sprite: '',
+        glyphs: '',
+        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
+      },
+      tilesInput: '', // 文本域字符串（行/JSON）
+      pageState: 'add',
+      mapStyleId: this.$route.params.id,
+      rules: {
+        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 () {
+    // 初始化页面状态与预填充
+    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))
+      if (item) {
+        this.fillFormFromItem(item)
+      } else {
+        this.$message.warning('未在列表中找到该样式，表单为空')
+      }
+    }
+  },
+  methods: {
+    // 校验 tiles 输入（行或JSON数组）
+    parseTilesInput (val) {
+      const text = (val || '').trim()
+      if (!text) return []
+      try {
+        const asJson = JSON.parse(text)
+        if (Array.isArray(asJson)) return asJson
+      } catch (e) {
+        // 不是JSON，按行解析
+      }
+      return text.split(/\r?\n/).map(s => s.trim()).filter(Boolean)
+    },
+    fillFormFromItem (item) {
+      this.form.name = item.name || ''
+      this.form.sprite = item.sprite || ''
+      this.form.glyphs = item.glyphs || ''
+      this.form.version = Number(item.version ?? 8)
+      this.form.source_name = item.source_name || ''
+      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
+      else if (typeof item.tiles === 'string') {
+        try { tiles = JSON.parse(item.tiles) } catch (e) { tiles = [] }
+      }
+      this.form.tiles = tiles
+      this.tilesInput = tiles.join('\n')
+      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)
+    },
+    resetForm () {
+      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) => {
+        if (!valid) return
+        // 准备 tiles
+        const tiles = this.parseTilesInput(this.tilesInput)
+        if (!tiles.length) {
+          this.$message.error('请至少填写一个瓦片URL')
+          return
+        }
+        this.form.tiles = tiles
+
+        // 提交占位：待接入 store actions: fetchAddMapStyle / fetchSaveMapStyle
+        this.$message.success(`${this.pageState === 'add' ? '创建' : '更新'}成功（示例页，待接入后端）`)
+        this.$router.replace('/mapstyle/index')
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/theme.scss";
+.w-80 { max-width: 880px; }
+</style>
diff --git a/src/views/layout/components/main/mapstyle/index.vue b/src/views/layout/components/main/mapstyle/index.vue
new file mode 100644
index 0000000..c895c69
--- /dev/null
+++ b/src/views/layout/components/main/mapstyle/index.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="app-container">
+    <!-- 操作按钮 -->
+    <el-button-group>
+      <el-button type="primary" icon="el-icon-plus" @click="$router.replace('/mapstyle/add')">添加</el-button>
+      <el-button type="warning" icon="el-icon-edit" @click="toEditPage()">编辑</el-button>
+    </el-button-group>
+
+    <!-- 样式表格 -->
+    <el-table class="m-t-20 w-100" ref="myTable" :data="styleListPaged" border tooltip-effect="dark">
+      <el-table-column align="center" type="selection" width="40" />
+      <el-table-column align="center" label="排序" width="120">
+        <template slot-scope="scope">
+          <el-input
+            v-model="scope.row.sort_order"
+            size="mini"
+            style="width: 80px;"
+            placeholder="排序"
+            @focus="tempSort = scope.row.sort_order"
+            @blur="blurOrder(scope.row)"
+          />
+        </template>
+      </el-table-column>
+      <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">
+        <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>
+        <template slot-scope="scope">{{ displayStyle(scope.row) }}</template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <el-pagination class="m-t-20" layout="prev, pager, next" :current-page.sync="currentPage" :page-size="pageSize"
+      :total="styleList.length" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MapStyleIndex',
+  data () {
+    return {
+      pageSize: 8,
+      currentPage: 1,
+      tempSort: ''
+    }
+  },
+  computed: {
+    // 来自全局 store 的地图样式列表（已被 MapBox 使用）
+    styleList () {
+      // 允许为数组或对象数组，尽量宽容显示
+      return Array.isArray(this.$store.state.mapStyleList) ? this.$store.state.mapStyleList : []
+    },
+    styleListPaged () {
+      const start = (this.currentPage - 1) * this.pageSize
+      return this.styleList.slice(start, start + this.pageSize)
+    }
+  },
+  created () {
+    setTimeout(() => {
+      console.log(this.styleList)
+    }, 1000)
+  },
+  methods: {
+    displayName (row, idx) {
+      // 兼容样式为字符串或对象（包含 name/title）
+      if (typeof row === 'string') return `样式 ${idx + 1}`
+      return row.name || row.title || `样式 ${idx + 1}`
+    },
+    displayStyle (row) {
+      if (typeof row === 'string') return row
+      // 常见字段：style/url/id
+      return row.style || row.url || JSON.stringify(row)
+    },
+    // 排序input失焦 更新排序
+    async blurOrder (row) {
+      if (this.tempSort !== row.sort_order) {
+        if (!row || row.id == null) {
+          this.$message.warning('该样式缺少ID，无法排序')
+          return
+        }
+        await this.$store.dispatch('fetchOrderMapStyle', {
+          id: row.id,
+          sort_order: row.sort_order
+        })
+      }
+    },
+    toEditPage () {
+      const sel = this.$refs.myTable.selection || []
+      if (!sel.length) {
+        this.$message.error('请选择一条需要编辑的记录')
+        return
+      }
+      if (sel.length > 1) {
+        this.$message.error('只能选择一条记录')
+        return
+      }
+      // 这里暂时用序号作为 id（样式可能没有后端 id），编辑页仅作占位
+      const row = sel[0]
+      const id = typeof row === 'object' && row.id != null ? row.id : this.styleList.indexOf(row)
+      this.$router.push('/mapstyle/edit/' + id)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/theme.scss";
+</style>
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index 722b454..1408d7e 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -122,7 +122,8 @@ export default {
       this.$store.dispatch('fetchSpuList'),
       this.$store.dispatch('fetchSkuList'),
       this.$store.dispatch('fetchPaidOrderList'),
-      this.$store.dispatch('fetchMessageList')
+      this.$store.dispatch('fetchMessageList'),
+      this.$store.dispatch('fetchMapStyleList', this.$store.state.settings.host)
     ]).then(() => {
       return this.$store.dispatch('fetchNoflyData', this.shop_id)
     })