diff --git a/web_ui/src/api/subscription.ts b/web_ui/src/api/subscription.ts
index 8915df4f..02d60c48 100644
--- a/web_ui/src/api/subscription.ts
+++ b/web_ui/src/api/subscription.ts
@@ -32,6 +32,8 @@ export interface MpItem {
   mp_id: string
   mp_name: string
   avatar: string
+  id?: string
+  mp_cover?: string
 }
 
 export interface MpSearchResult {
diff --git a/web_ui/src/components/MpMultiSelect.vue b/web_ui/src/components/MpMultiSelect.vue
index fe04607f..208462c3 100644
--- a/web_ui/src/components/MpMultiSelect.vue
+++ b/web_ui/src/components/MpMultiSelect.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { searchMps } from '@/api/subscription'
+import type { MpItem } from '@/types/subscription'
 
 const formatCoverUrl = (url: string) => {
   if (!url) return ''
@@ -10,16 +11,10 @@ const formatCoverUrl = (url: string) => {
   return url
 }
 
-interface MpItem {
-  id: string
-  mp_name: string
-  mp_cover: string
-}
-
 const props = defineProps({
   modelValue: {
-    type: String,
-    default: () => ""
+    type: Array as () => MpItem[],
+    default: () => []
   }
 })
 
@@ -29,6 +24,9 @@ const searchKeyword = ref('')
 const loading = ref(false)
 const mpList = ref<MpItem[]>([])
 const selectedMps = ref<MpItem[]>([])
+const currentPage = ref(0)
+const hasMore = ref(true)
+const pageSize = 10
 
 const filteredMps = computed(() => {
   return mpList.value.filter(mp => 
@@ -36,18 +34,52 @@ const filteredMps = computed(() => {
   )
 })
 
-const fetchMps = async () => {
+const fetchMps = async (reset = true) => {
   loading.value = true
   try {
-    const res = await searchMps(searchKeyword.value)
-    mpList.value = res.list
+    if (reset) {
+      currentPage.value = 0
+      mpList.value = []
+    }
+    
+    const res = await searchMps(searchKeyword.value, { 
+      page: currentPage.value,
+      pageSize: pageSize
+    })
+    
+    // 将 API 返回的数据格式转换为组件内部使用的格式
+    const mappedList = res.list.map((item: any) => ({
+      id: item.mp_id || item.id,
+      mp_name: item.mp_name,
+      mp_cover: item.avatar || item.mp_cover
+    }))
+    
+    // 添加新加载的数据到列表，避免覆盖已有数据
+    if (reset) {
+      mpList.value = mappedList
+    } else {
+      // 合并数据，避免重复
+      const newMps = mappedList.filter(newMp => 
+        !mpList.value.some(existingMp => existingMp.id === newMp.id)
+      )
+      mpList.value = [...mpList.value, ...newMps]
+    }
+    
+    // 判断是否还有更多数据
+    hasMore.value = res.list.length === pageSize
+    
   } finally {
     loading.value = false
   }
 }
 
+const loadMore = async () => {
+  currentPage.value++
+  await fetchMps(false)
+}
+
 const handleSearch = () => {
-  fetchMps()
+  fetchMps(true)
 }
 
 const toggleSelect = (mp: MpItem) => {
@@ -80,9 +112,9 @@ const selectAll = () => {
 }
 
 const emitSelectedIds = () => {
-  // emit('update:modelValue', selectedMps.value.map(mp => mp.id).join(','))
   emit('update:modelValue', selectedMps.value)
 }
+
 const parseSelected = (data:MpItem[]) => {
   selectedMps.value = data.map(item => {
     const found = mpList.value.find(mp => mp.id === item.id)
@@ -100,7 +132,7 @@ defineExpose({
 
 onMounted(() => {
   fetchMps()
-  if (props.modelValue.length > 0) {
+  if (props.modelValue && props.modelValue.length > 0) {
     parseSelected(props.modelValue)
   }
 })
@@ -159,6 +191,12 @@ onMounted(() => {
             </a-space>
           </div>
         </div>
+        
+        <div v-if="hasMore" class="load-more">
+          <a-button type="text" @click="loadMore" :loading="loading">
+            加载更多
+          </a-button>
+        </div>
       </a-spin>
     </a-space>
   </a-card>
@@ -200,4 +238,10 @@ h4 {
 .mp-item:hover {
   background-color: var(--color-fill-2);
 }
+
+.load-more {
+  display: flex;
+  justify-content: center;
+  margin-top: 16px;
+}
 </style>
\ No newline at end of file
diff --git a/web_ui/src/types/messageTask.ts b/web_ui/src/types/messageTask.ts
index 5fbe07b0..343c332a 100644
--- a/web_ui/src/types/messageTask.ts
+++ b/web_ui/src/types/messageTask.ts
@@ -1,26 +1,34 @@
+import type { MpItem } from './subscription'
+
 export interface MessageTask {
   id: number
+  name: string
+  message_type: number
   message_template: string
   web_hook_url: string
-  mps_id: any // JSON类型
+  mps_id: string // JSON字符串，解析后为 MpItem[]
   status: number
-  cron_exp?: string
+  cron_exp: string
   created_at: string
   updated_at: string
 }
 
 export interface MessageTaskCreate {
+  name: string
+  message_type: number
   message_template: string
   web_hook_url: string
-  mps_id: any
-  status?: number
-  cron_exp?: string
+  mps_id: MpItem[]
+  status: number
+  cron_exp: string
 }
 
 export interface MessageTaskUpdate {
+  name?: string
+  message_type?: number
   message_template?: string
   web_hook_url?: string
-  mps_id?: any
+  mps_id?: MpItem[]
   status?: number
   cron_exp?: string
 }
\ No newline at end of file
diff --git a/web_ui/src/types/subscription.ts b/web_ui/src/types/subscription.ts
new file mode 100644
index 00000000..24052831
--- /dev/null
+++ b/web_ui/src/types/subscription.ts
@@ -0,0 +1,5 @@
+export interface MpItem {
+  id: string
+  mp_name: string
+  mp_cover: string
+} 
\ No newline at end of file
diff --git a/web_ui/src/views/MessageTaskForm.vue b/web_ui/src/views/MessageTaskForm.vue
index d37ef555..0cbbb45b 100644
--- a/web_ui/src/views/MessageTaskForm.vue
+++ b/web_ui/src/views/MessageTaskForm.vue
@@ -4,6 +4,7 @@ const formRef = ref()
 import { useRoute, useRouter } from 'vue-router'
 import { getMessageTask, createMessageTask, updateMessageTask } from '@/api/messageTask'
 import type { MessageTask, MessageTaskCreate } from '@/types/messageTask'
+import type { MpItem } from '@/types/subscription'
 import cronExpressionPicker from '@/components/cronExpressionPicker.vue'
 import MpMultiSelect from '@/components/MpMultiSelect.vue'
 import { Message } from '@arco-design/web-vue'
@@ -23,7 +24,7 @@ const formData = ref<MessageTaskCreate>({
   message_type: 0,
   message_template: '',
   web_hook_url: '',
-  mps_id: [],
+  mps_id: [] as MpItem[],
   status: 1,
   cron_exp: '*/5 * * * *'
 })
@@ -37,7 +38,7 @@ const fetchTaskDetail = async (id: string) => {
       message_type: res.message_type,
       message_template: res.message_template,
       web_hook_url: res.web_hook_url,
-      mps_id: JSON.parse(res.mps_id||[]),
+      mps_id: res.mps_id ? JSON.parse(res.mps_id) : [],
       status: res.status,
       cron_exp: res.cron_exp
     }
@@ -46,7 +47,7 @@ const fetchTaskDetail = async (id: string) => {
       if (cronPickerRef.value) {
         cronPickerRef.value.parseExpression(formData.value.cron_exp)
       }
-      if (mpSelectorRef.value) {
+      if (mpSelectorRef.value && formData.value.mps_id.length > 0) {
         mpSelectorRef.value.parseSelected(formData.value.mps_id)
       }
     })