diff --git a/src/api/mp/account/index.ts b/src/api/mp/account/index.ts
index 0ab6c79f..e1d772be 100644
--- a/src/api/mp/account/index.ts
+++ b/src/api/mp/account/index.ts
@@ -1,5 +1,10 @@
 import { defHttp } from '@/utils/http/axios'
 
+export interface AccountVO {
+  id?: number
+  name: string
+}
+
 // 创建公众号账号
 export function createAccount(data) {
   return defHttp.post({ url: '/mp/account/create', data })
diff --git a/src/views/mp/components/WxAccountSelect/index.vue b/src/views/mp/components/WxAccountSelect/index.vue
new file mode 100644
index 00000000..6261b350
--- /dev/null
+++ b/src/views/mp/components/WxAccountSelect/index.vue
@@ -0,0 +1,43 @@
+<template>
+  <Select v-model:value="account.id" placeholder="请选择公众号" class="!w-240px" @change="onChanged">
+    <SelectOption v-for="item in accountList" :key="item.id" :label="item.name" :value="item.id" />
+  </Select>
+</template>
+<script lang="ts" setup name="WxAccountSelect">
+import { Select } from 'ant-design-vue'
+import { AccountVO, getSimpleAccounts } from '@/api/mp/account'
+import { onMounted, reactive, ref } from 'vue'
+
+const SelectOption = Select.Option
+const account = reactive<AccountVO>({
+  id: undefined,
+  name: ''
+})
+const accountList = ref<AccountVO[]>([])
+const emit = defineEmits(['change'])
+
+async function handleQuery() {
+  accountList.value = await getSimpleAccounts()
+  // 默认选中第一个
+  if (accountList.value.length > 0) {
+    account.id = accountList.value[0].id
+    if (account.id) {
+      account.name = accountList.value[0].name
+      emit('change', account.id, account.name)
+    }
+  }
+}
+
+function onChanged(id?: number) {
+  const found = accountList.value.find((v) => v.id === id)
+  if (account.id) {
+    account.name = found ? found.name : ''
+    emit('change', account.id, account.name)
+  }
+}
+
+/** 初始化 */
+onMounted(() => {
+  handleQuery()
+})
+</script>
diff --git a/src/views/mp/components/WxLocation/index.vue b/src/views/mp/components/WxLocation/index.vue
new file mode 100644
index 00000000..d0ee02be
--- /dev/null
+++ b/src/views/mp/components/WxLocation/index.vue
@@ -0,0 +1,65 @@
+import { Image } from 'ant-design-vue';
+
+<template>
+  <div>
+    <a-button
+      type="link"
+      target="_blank"
+      :href="
+        'https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=' +
+        locationY +
+        '&pointy=' +
+        locationX +
+        '&name=' +
+        label +
+        '&ref=yudao'
+      "
+    >
+      <Image
+        :src="
+          'https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|' +
+          locationX +
+          ',' +
+          locationY +
+          '&key=' +
+          qqMapKey +
+          '&size=250*180'
+        "
+      />
+      <Icon icon="ep:location" />
+      {{ label }}
+    </a-button>
+  </div>
+</template>
+<script lang="ts" setup name="WxLocation">
+import { Image } from 'ant-design-vue'
+import Icon from '@/components/Icon'
+
+const props = defineProps({
+  locationX: {
+    required: true,
+    type: Number
+  },
+  locationY: {
+    required: true,
+    type: Number
+  },
+  label: {
+    // 地名
+    required: true,
+    type: String
+  },
+  qqMapKey: {
+    // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
+    required: false,
+    type: String,
+    default: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E' // 需要自定义
+  }
+})
+defineExpose({
+  locationX: props.locationX,
+  locationY: props.locationY,
+  label: props.label,
+  qqMapKey: props.qqMapKey
+})
+</script>
diff --git a/src/views/mp/components/WxMaterialSelect/index.vue b/src/views/mp/components/WxMaterialSelect/index.vue
new file mode 100644
index 00000000..8453dc6c
--- /dev/null
+++ b/src/views/mp/components/WxMaterialSelect/index.vue
@@ -0,0 +1 @@
+<template><span>123</span> </template>
diff --git a/src/views/mp/components/WxMaterialSelect/type.ts b/src/views/mp/components/WxMaterialSelect/type.ts
new file mode 100644
index 00000000..d4add1d5
--- /dev/null
+++ b/src/views/mp/components/WxMaterialSelect/type.ts
@@ -0,0 +1,11 @@
+export enum NewsType {
+  Draft = '2',
+  Published = '1'
+}
+
+export enum MaterialType {
+  Image = 'image',
+  Voice = 'voice',
+  Video = 'video',
+  News = 'news'
+}
diff --git a/src/views/mp/components/WxMsg/index.vue b/src/views/mp/components/WxMsg/index.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/mp/components/WxMusic/index.vue b/src/views/mp/components/WxMusic/index.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/mp/components/WxNews/index.vue b/src/views/mp/components/WxNews/index.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/mp/components/WxReply/index.vue b/src/views/mp/components/WxReply/index.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/mp/components/WxVideoPlay/index.vue b/src/views/mp/components/WxVideoPlay/index.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/mp/components/WxVoicePlay/index.vue b/src/views/mp/components/WxVoicePlay/index.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/mp/components/index.ts b/src/views/mp/components/index.ts
new file mode 100644
index 00000000..4160db6c
--- /dev/null
+++ b/src/views/mp/components/index.ts
@@ -0,0 +1,3 @@
+import wxAccountSelect from './WxAccountSelect/index.vue'
+
+export { wxAccountSelect }
diff --git a/src/views/mp/components/index.vue b/src/views/mp/components/index.vue
deleted file mode 100644
index 3b64cfc4..00000000
--- a/src/views/mp/components/index.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div>开发中</div>
-</template>