diff --git a/src/api/im/channel/material/index.ts b/src/api/im/channel/material/index.ts
new file mode 100644
index 000000000..5023f0481
--- /dev/null
+++ b/src/api/im/channel/material/index.ts
@@ -0,0 +1,18 @@
+import request from '@/config/axios'
+
+// 用户端能看到的频道素材详情
+export interface ImChannelMaterialRespVO {
+  id: number
+  channelId: number
+  type: number
+  title: string
+  coverUrl?: string
+  summary?: string
+  content?: string
+  url?: string
+}
+
+// 获取频道素材详情；用于客户端点击图文卡片渲染详情页
+export const getChannelMaterial = (id: number) => {
+  return request.get<ImChannelMaterialRespVO>({ url: '/im/channel/material/get?id=' + id })
+}
diff --git a/src/api/im/message/channel/index.ts b/src/api/im/message/channel/index.ts
index 9a69fb3b2..b57242258 100644
--- a/src/api/im/message/channel/index.ts
+++ b/src/api/im/message/channel/index.ts
@@ -9,18 +9,6 @@ export interface ImChannelMessageRespVO {
   sendTime: string
 }
 
-// 用户端能看到的频道素材详情
-export interface ImChannelMaterialRespVO {
-  id: number
-  channelId: number
-  type: number
-  title: string
-  coverUrl?: string
-  summary?: string
-  content?: string
-  url?: string
-}
-
 // 拉取当前用户应收的频道消息（离线增量）；按 minId 游标分页
 export const pullChannelMessages = (params: { minId: number; size?: number }) => {
   return request.get<ImChannelMessageRespVO[]>({
@@ -28,9 +16,3 @@ export const pullChannelMessages = (params: { minId: number; size?: number }) =>
     params
   })
 }
-
-// 获取频道素材详情；用于客户端点击图文卡片渲染详情页
-// TODO @AI：这个地址，也要改把。
-export const getChannelMaterial = (id: number) => {
-  return request.get<ImChannelMaterialRespVO>({ url: '/im/channel/material/get?id=' + id })
-}
diff --git a/src/views/im/home/index.vue b/src/views/im/home/index.vue
index 138e2ac7e..94485666f 100644
--- a/src/views/im/home/index.vue
+++ b/src/views/im/home/index.vue
@@ -81,12 +81,13 @@ onMounted(async () => {
   // 1.1 整段 loading=true 阻断 saveConversations 抖动写盘 + WebSocket 普通消息进缓冲，避免 connect 到 pullOnce 之间收到的实时消息推进 maxId 导致 pull 跳过断线积压消息
   conversationStore.loading = true
   try {
-    // 1.2 四个 store 并发从 IDB 读取本地缓存（loadConversations / loadDrafts 返回 void；load{Friends,Groups} 返回是否命中缓存）
-    const [, hasCachedFriends, hasCachedGroups] = await Promise.all([
+    // 1.2 五个 store 并发从 IDB 读取本地缓存（loadConversations / loadDrafts 返回 void；load{Friends,Groups,Channels} 返回是否命中缓存）
+    const [, hasCachedFriends, hasCachedGroups, , hasCachedChannels] = await Promise.all([
       conversationStore.loadConversations(),
       friendStore.loadFriends(),
       groupStore.loadGroups(),
-      draftStore.loadDrafts()
+      draftStore.loadDrafts(),
+      channelStore.loadChannels()
     ])
 
     // 2.1 有缓存：异步背景刷新，失败仅记日志（IDB 数据已经够撑首屏，pullOnce 也能正常入库）
@@ -103,10 +104,11 @@ onMounted(async () => {
     } else {
       requiredFetches.push(groupStore.fetchGroups())
     }
-    // TODO @AI：这里的“// 频道列表无 IDB 缓存；首屏后台异步拉一次，失败不阻塞 pull”；是不是要和上面的 2.1 2.2 综合起来？不然孤独的，有点奇怪？
-    // 频道列表无 IDB 缓存；首屏后台异步拉一次，失败不阻塞 pull
-    void channelStore.fetchChannels().catch((e) => console.warn('[IM] 拉取频道列表失败', e))
-    // 2.3 TODO @AI：这里加个注释，会不会有间隔感一点？
+    if (hasCachedChannels) {
+      void channelStore.fetchChannels().catch((e) => console.warn('[IM] 后台刷频道列表失败', e))
+    } else {
+      requiredFetches.push(channelStore.fetchChannels())
+    }
     if (requiredFetches.length > 0) {
       await Promise.all(requiredFetches)
     }
diff --git a/src/views/im/home/pages/conversation/components/message/MaterialBubble.vue b/src/views/im/home/pages/conversation/components/message/MaterialBubble.vue
new file mode 100644
index 000000000..6f077569f
--- /dev/null
+++ b/src/views/im/home/pages/conversation/components/message/MaterialBubble.vue
@@ -0,0 +1,243 @@
+<template>
+  <!-- TODO @AI：要不使用 model 组件，弹窗。用户允许手动弹窗； -->
+  <div class="material-card" @click="onClick">
+    <div class="title">{{ payload.title || '(无标题)' }}</div>
+    <img v-if="payload.coverUrl" class="cover" :src="payload.coverUrl" />
+    <div v-if="payload.summary" class="summary">{{ payload.summary }}</div>
+    <span class="link">{{ payload.url ? '外链' : '查看详情' }}</span>
+  </div>
+
+  <!-- 全屏文章详情：仿微信公众号文章打开 -->
+  <el-dialog
+    v-model="detailVisible"
+    :show-close="false"
+    fullscreen
+    append-to-body
+    destroy-on-close
+    class="material-detail-dialog"
+  >
+    <template #header>
+      <div class="detail-header">
+        <button class="back-btn" @click="detailVisible = false">
+          <Icon icon="ant-design:close-outlined" :size="18" />
+        </button>
+        <span class="detail-title">{{ payload.title || '详情' }}</span>
+        <span class="placeholder"></span>
+      </div>
+    </template>
+    <div v-loading="detailLoading" class="detail-body">
+      <div class="article-title">{{ payload.title || '' }}</div>
+      <div v-if="detailHtml" class="article-content" v-html="detailHtml"></div>
+      <div v-else-if="!detailLoading" class="article-empty">暂无正文</div>
+    </div>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { ElDialog } from 'element-plus'
+import type { PropType } from 'vue'
+import Icon from '@/components/Icon/src/Icon.vue'
+import { getChannelMaterial } from '@/api/im/channel/material'
+import { parseMessage, type MaterialMessage } from '@/views/im/utils/message'
+
+interface MessageInfo {
+  materialId?: number
+  content: string
+}
+
+const props = defineProps({
+  message: { type: Object as PropType<MessageInfo>, required: true }
+})
+
+/** 反序列化 content JSON 为 payload 对象 */
+const payload = computed<MaterialMessage>(
+  () => parseMessage<MaterialMessage>(props.message.content) ?? {}
+)
+
+const detailVisible = ref(false)
+const detailLoading = ref(false)
+const detailHtml = ref('')
+
+/** 点击行为：url 非空跳外链；为空则按 materialId 拉富文本正文，全屏 dialog 渲染 */
+const onClick = async () => {
+  if (payload.value.url) {
+    window.open(payload.value.url, '_blank')
+    return
+  }
+  if (!props.message.materialId) {
+    return
+  }
+  detailVisible.value = true
+  detailLoading.value = true
+  detailHtml.value = ''
+  try {
+    const material = await getChannelMaterial(props.message.materialId)
+    detailHtml.value = material?.content ?? ''
+  } catch (e) {
+    console.error('[Material] 拉取正文失败', e)
+  } finally {
+    detailLoading.value = false
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.material-card {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 14px 16px 12px;
+  background: var(--el-bg-color);
+  border-radius: 8px;
+  border: 1px solid var(--el-border-color-lighter);
+  cursor: pointer;
+  transition: box-shadow 0.15s ease;
+
+  &:hover {
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  }
+
+  .title {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.4;
+    color: var(--el-text-color-primary);
+    margin-bottom: 10px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .cover {
+    width: 100%;
+    max-height: 200px;
+    object-fit: cover;
+    border-radius: 4px;
+    background: var(--el-fill-color-light);
+  }
+
+  .summary {
+    margin-top: 10px;
+    font-size: 13px;
+    color: var(--el-text-color-regular);
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .link {
+    margin-top: 10px;
+    padding-top: 8px;
+    border-top: 1px solid var(--el-border-color-lighter);
+    font-size: 12px;
+    color: var(--el-color-primary);
+  }
+}
+</style>
+
+<style lang="scss">
+/* 全屏文章详情样式（非 scoped；el-dialog 全屏后 header / body 在 teleport 子树） */
+.material-detail-dialog {
+  .el-dialog__header {
+    margin: 0;
+    padding: 0;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+  }
+
+  .el-dialog__body {
+    padding: 0;
+  }
+
+  .detail-header {
+    display: flex;
+    align-items: center;
+    height: 52px;
+    padding: 0 12px;
+    background: var(--el-bg-color);
+
+    .back-btn {
+      width: 36px;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      border: none;
+      border-radius: 50%;
+      cursor: pointer;
+      color: var(--el-text-color-primary);
+
+      &:hover {
+        background: var(--el-fill-color-light);
+      }
+    }
+
+    .detail-title {
+      flex: 1;
+      text-align: center;
+      font-size: 15px;
+      font-weight: 500;
+      color: var(--el-text-color-primary);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .placeholder {
+      width: 36px;
+    }
+  }
+
+  .detail-body {
+    max-width: 720px;
+    margin: 0 auto;
+    padding: 24px 20px 80px;
+    min-height: calc(100vh - 52px);
+
+    .article-title {
+      font-size: 22px;
+      font-weight: 600;
+      line-height: 1.4;
+      color: var(--el-text-color-primary);
+      margin-bottom: 20px;
+    }
+
+    .article-content {
+      font-size: 15px;
+      line-height: 1.75;
+      color: var(--el-text-color-primary);
+
+      :deep(img),
+      img {
+        max-width: 100%;
+        height: auto;
+      }
+
+      :deep(p),
+      p {
+        margin: 12px 0;
+      }
+
+      :deep(h1),
+      :deep(h2),
+      :deep(h3),
+      h1,
+      h2,
+      h3 {
+        margin: 20px 0 12px;
+        font-weight: 600;
+      }
+    }
+
+    .article-empty {
+      text-align: center;
+      color: var(--el-text-color-secondary);
+      margin-top: 80px;
+    }
+  }
+}
+</style>
diff --git a/src/views/im/home/store/channelStore.ts b/src/views/im/home/store/channelStore.ts
new file mode 100644
index 000000000..6844427b5
--- /dev/null
+++ b/src/views/im/home/store/channelStore.ts
@@ -0,0 +1,101 @@
+import { defineStore, acceptHMRUpdate } from 'pinia'
+import { store } from '@/store'
+import { getEnabledChannelList, type ImManagerChannelVO } from '@/api/im/manager/channel'
+import { useConversationStore } from './conversationStore'
+import { ImConversationType } from '../../utils/constants'
+import { getCurrentUserId, imStorage, setQuietly, StorageKeys } from '../../utils/storage'
+
+/**
+ * IM 频道 Store
+ *
+ * 负责：缓存当前用户能看到的频道精简列表（含 id / code / name / avatar），
+ * 供会话列表 / 卡片渲染时反查频道名称 + 头像，避免显示「频道 1」这种占位
+ */
+export const useChannelStore = defineStore('imChannelStore', {
+  state: () => ({
+    channels: [] as ImManagerChannelVO[],
+    loaded: false
+  }),
+
+  getters: {
+    getChannel(state): (id: number) => ImManagerChannelVO | undefined {
+      return (id: number) => state.channels.find((c) => c.id === id)
+    }
+  },
+
+  actions: {
+    // ==================== 本地缓存 ====================
+
+    /** 从 IDB 恢复频道列表；命中返回 true 让首屏立刻有真实名 / 头像 */
+    async loadChannels(): Promise<boolean> {
+      const userId = getCurrentUserId()
+      if (!userId) {
+        return false
+      }
+      try {
+        const cached = await imStorage.getItem<ImManagerChannelVO[]>(StorageKeys.channels(userId))
+        if (!cached || cached.length === 0) {
+          return false
+        }
+        this.channels = cached
+        return true
+      } catch (e) {
+        console.warn('[IM channelStore] 本地频道缓存读取失败', e)
+        return false
+      }
+    },
+
+    /** 整桶持久化频道列表（量级小，不维护增量） */
+    saveChannels(): void {
+      const userId = getCurrentUserId()
+      if (!userId) {
+        return
+      }
+      setQuietly(StorageKeys.channels(userId), this.channels, '[IM channelStore] 本地频道缓存写入失败')
+    },
+
+    // ==================== 远端拉取 ====================
+
+    /** 拉取启用的频道精简列表；成功后回填会话列表已有的频道 name / avatar，覆盖 IDB 旧占位 */
+    async fetchChannels(force = false) {
+      if (this.loaded && !force) {
+        return
+      }
+      try {
+        this.channels = (await getEnabledChannelList()) || []
+        this.loaded = true
+        this.syncConversationMetadata()
+        this.saveChannels()
+      } catch (e) {
+        console.warn('[IM channelStore] fetchChannels 失败', e)
+      }
+    },
+
+    /** 用最新的频道信息覆盖已有 CHANNEL 会话的 name / avatar；conversationStore 持久化的旧占位被刷掉 */
+    syncConversationMetadata() {
+      const conversationStore = useConversationStore()
+      const indexed = new Map(this.channels.map((c) => [c.id, c]))
+      conversationStore.conversations.forEach((conversation) => {
+        if (conversation.type !== ImConversationType.CHANNEL) {
+          return
+        }
+        const channel = indexed.get(conversation.targetId)
+        if (!channel) {
+          return
+        }
+        if (channel.name) {
+          conversation.name = channel.name
+        }
+        if (channel.avatar) {
+          conversation.avatar = channel.avatar
+        }
+      })
+    }
+  }
+})
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useChannelStore, import.meta.hot))
+}
+
+export const useImChannelStore = () => useChannelStore(store)
diff --git a/src/views/im/manager/channel/channel/ChannelForm.vue b/src/views/im/manager/channel/channel/ChannelForm.vue
new file mode 100644
index 000000000..f8b345a46
--- /dev/null
+++ b/src/views/im/manager/channel/channel/ChannelForm.vue
@@ -0,0 +1,129 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="520">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="频道编码" prop="code">
+        <el-input
+          v-model="formData.code"
+          placeholder="如 system_notice"
+          :disabled="formType === 'update'"
+        />
+      </el-form-item>
+      <el-form-item label="频道名称" prop="name">
+        <el-input v-model="formData.name" placeholder="如 系统公告" />
+      </el-form-item>
+      <!-- TODO @AI：使用上传组件，必须传递； -->
+      <el-form-item label="频道头像" prop="avatar">
+        <el-input v-model="formData.avatar" placeholder="头像 URL" />
+      </el-form-item>
+      <el-form-item label="排序" prop="sort">
+        <el-input-number v-model="formData.sort" :min="0" controls-position="right" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import * as ChannelApi from '@/api/im/manager/channel'
+import { CommonStatusEnum } from '@/utils/constants'
+
+defineOptions({ name: 'ImChannelForm' })
+
+const { t } = useI18n()
+const message = useMessage()
+
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+const formLoading = ref(false)
+const formType = ref('')
+const formData = ref({
+  id: undefined as number | undefined,
+  code: '',
+  name: '',
+  avatar: '',
+  sort: 0,
+  status: CommonStatusEnum.ENABLE
+})
+const formRules = reactive({
+  code: [
+    { required: true, message: '频道编码不能为空', trigger: 'blur' },
+    { pattern: /^[a-z][a-z0-9_]*$/, message: '只能由小写字母 / 数字 / 下划线组成，且以字母开头', trigger: 'blur' }
+  ],
+  name: [{ required: true, message: '频道名称不能为空', trigger: 'blur' }],
+  sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
+})
+const formRef = ref()
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ChannelApi.getManagerChannel(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open })
+
+const emit = defineEmits(['success'])
+
+/** 提交 */
+const submitForm = async () => {
+  await formRef.value.validate()
+  formLoading.value = true
+  try {
+    const data = formData.value as ChannelApi.ImManagerChannelVO
+    if (formType.value === 'create') {
+      await ChannelApi.createManagerChannel(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ChannelApi.updateManagerChannel(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    code: '',
+    name: '',
+    avatar: '',
+    sort: 0,
+    status: CommonStatusEnum.ENABLE
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/im/manager/channel/channel/index.vue b/src/views/im/manager/channel/channel/index.vue
new file mode 100644
index 000000000..287394555
--- /dev/null
+++ b/src/views/im/manager/channel/channel/index.vue
@@ -0,0 +1,182 @@
+<template>
+  <ContentWrap>
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="编码" prop="code">
+        <el-input
+          v-model="queryParams.code"
+          placeholder="频道业务码"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-200px"
+        />
+      </el-form-item>
+      <el-form-item label="名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="频道名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-200px"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择" clearable class="!w-200px">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" />搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['im:manager:channel:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" />新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="编号" align="center" prop="id" width="80" />
+      <el-table-column label="头像" align="center" prop="avatar" width="70">
+        <template #default="scope">
+          <el-image
+            v-if="scope.row.avatar"
+            :src="scope.row.avatar"
+            class="w-32px h-32px rounded"
+            fit="contain"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="编码" align="center" prop="code" width="160" show-overflow-tooltip />
+      <el-table-column label="名称" align="center" prop="name" min-width="120" show-overflow-tooltip />
+      <el-table-column label="排序" align="center" prop="sort" width="80" />
+      <el-table-column label="状态" align="center" prop="status" width="80">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="170"
+        :formatter="dateFormatter"
+      />
+      <el-table-column label="操作" align="center" width="160" fixed="right">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['im:manager:channel:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['im:manager:channel:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <ChannelForm ref="formRef" @success="getList" />
+</template>
+
+<script lang="ts" setup>
+// TOOD @AI：注释风格，对齐 system user index
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import * as ChannelApi from '@/api/im/manager/channel'
+import ChannelForm from './ChannelForm.vue'
+
+defineOptions({ name: 'ImChannel' })
+
+const message = useMessage()
+const { t } = useI18n()
+
+const loading = ref(true)
+const total = ref(0)
+const list = ref<ChannelApi.ImManagerChannelVO[]>([])
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  code: undefined as string | undefined,
+  name: undefined as string | undefined,
+  status: undefined as number | undefined
+})
+const queryFormRef = ref()
+
+/** 查询频道分页 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ChannelApi.getManagerChannelPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 打开新增 / 编辑弹窗 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除 */
+const handleDelete = async (id: number) => {
+  try {
+    await message.delConfirm()
+  } catch {
+    return
+  }
+  await ChannelApi.deleteManagerChannel(id)
+  message.success(t('common.delSuccess'))
+  await getList()
+}
+
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/src/views/im/manager/channel/material/index.vue b/src/views/im/manager/channel/material/index.vue
new file mode 100644
index 000000000..4a5a4b3c3
--- /dev/null
+++ b/src/views/im/manager/channel/material/index.vue
@@ -0,0 +1,180 @@
+<template>
+  <ContentWrap>
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="频道" prop="channelId">
+        <el-select v-model="queryParams.channelId" placeholder="全部" clearable class="!w-200px">
+          <el-option v-for="c in channelList" :key="c.id" :label="c.name" :value="c.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="标题" prop="title">
+        <el-input
+          v-model="queryParams.title"
+          placeholder="标题关键字"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" />搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['im:manager:channel-material:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" />新增素材
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="编号" align="center" prop="id" width="80" />
+      <el-table-column label="封面" align="center" prop="coverUrl" width="80">
+        <template #default="scope">
+          <el-image
+            v-if="scope.row.coverUrl"
+            :src="scope.row.coverUrl"
+            class="w-40px h-40px rounded"
+            fit="cover"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="频道" align="center" prop="channelName" width="120" />
+      <el-table-column
+        label="标题"
+        align="left"
+        prop="title"
+        min-width="180"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        label="摘要"
+        align="left"
+        prop="summary"
+        min-width="180"
+        show-overflow-tooltip
+      />
+      <el-table-column label="跳转" align="center" prop="url" width="80">
+        <template #default="scope">
+          <el-link v-if="scope.row.url" type="primary" :href="scope.row.url" target="_blank"
+            >外链</el-link
+          >
+          <el-tag v-else type="info" size="small">站内</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="170"
+        :formatter="dateFormatter"
+      />
+      <el-table-column label="操作" align="center" width="160" fixed="right">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['im:manager:channel-material:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['im:manager:channel-material:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <ChannelMaterialForm ref="formRef" :channel-list="channelList" @success="getList" />
+</template>
+
+<script lang="ts" setup>
+// TOOD @AI：注释风格，对齐 system user index
+import { dateFormatter } from '@/utils/formatTime'
+import * as MaterialApi from '@/api/im/manager/channel/material'
+import * as ChannelApi from '@/api/im/manager/channel'
+import ChannelMaterialForm from './ChannelMaterialForm.vue'
+
+defineOptions({ name: 'ImChannelMaterial' })
+
+const message = useMessage()
+const { t } = useI18n()
+
+const loading = ref(true)
+const total = ref(0)
+const list = ref<MaterialApi.ImManagerChannelMaterialVO[]>([])
+const channelList = ref<ChannelApi.ImManagerChannelVO[]>([])
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  channelId: undefined as number | undefined,
+  title: undefined as string | undefined
+})
+const queryFormRef = ref()
+
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await MaterialApi.getManagerChannelMaterialPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+const handleDelete = async (id: number) => {
+  try {
+    await message.delConfirm()
+  } catch {
+    return
+  }
+  await MaterialApi.deleteManagerChannelMaterial(id)
+  message.success(t('common.delSuccess'))
+  await getList()
+}
+
+onMounted(async () => {
+  // TOOD @AI：注释风格，ChannelApi 列表，让 channel/components 抽个组件，复用一下；
+  channelList.value = await ChannelApi.getEnabledChannelList()
+  getList()
+})
+</script>
diff --git a/src/views/im/manager/channel/message/ChannelMessageSendForm.vue b/src/views/im/manager/channel/message/ChannelMessageSendForm.vue
new file mode 100644
index 000000000..24a15d144
--- /dev/null
+++ b/src/views/im/manager/channel/message/ChannelMessageSendForm.vue
@@ -0,0 +1,144 @@
+<template>
+  <Dialog title="立即推送频道消息" v-model="dialogVisible" width="640">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="110px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="所属频道" prop="channelId">
+        <el-select
+          v-model="formData.channelId"
+          placeholder="请选择频道（用于加载素材）"
+          class="!w-full"
+          @change="onChannelChange"
+        >
+          <el-option v-for="c in props.channelList" :key="c.id" :label="c.name" :value="c.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="素材" prop="materialId">
+        <el-select
+          v-model="formData.materialId"
+          placeholder="请选择素材"
+          class="!w-full"
+          :disabled="!formData.channelId"
+        >
+          <el-option
+            v-for="m in materialList"
+            :key="m.id"
+            :label="m.title"
+            :value="m.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="受众">
+        <el-radio-group v-model="targetType">
+          <el-radio value="all">全员</el-radio>
+          <el-radio value="users">指定用户</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <!-- TODO @AI：userselect 组件 -->
+      <el-form-item v-if="targetType === 'users'" label="接收用户" prop="receiverUserIds">
+        <el-input
+          v-model="receiverInput"
+          placeholder="多个用户编号用英文逗号分隔，如 1,1024,2048"
+          type="textarea"
+          :rows="2"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确认推送</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+// TODO @AI：注释风格，对齐 user form；
+import * as MessageApi from '@/api/im/manager/channel/message'
+import * as MaterialApi from '@/api/im/manager/channel/material'
+import type { ImManagerChannelVO } from '@/api/im/manager/channel'
+
+defineOptions({ name: 'ImChannelMessageSendForm' })
+
+const props = defineProps<{ channelList: ImManagerChannelVO[] }>()
+
+const { t } = useI18n()
+const message = useMessage()
+
+const dialogVisible = ref(false)
+const formLoading = ref(false)
+const formData = ref({
+  channelId: undefined as number | undefined,
+  materialId: undefined as number | undefined
+})
+const targetType = ref<'all' | 'users'>('all')
+const receiverInput = ref('')
+const materialList = ref<MaterialApi.ImManagerChannelMaterialVO[]>([])
+
+const formRules = reactive({
+  channelId: [{ required: true, message: '请选择频道', trigger: 'change' }],
+  materialId: [{ required: true, message: '请选择素材', trigger: 'change' }]
+})
+const formRef = ref()
+
+const open = () => {
+  dialogVisible.value = true
+  resetForm()
+}
+defineExpose({ open })
+
+const emit = defineEmits(['success'])
+
+/** 切换频道时加载该频道下的素材列表 */
+const onChannelChange = async (channelId: number | undefined) => {
+  formData.value.materialId = undefined
+  materialList.value = []
+  if (!channelId) return
+  const page = await MaterialApi.getManagerChannelMaterialPage({
+    pageNo: 1,
+    pageSize: 100,
+    channelId
+  } as any)
+  materialList.value = page.list
+}
+
+const submitForm = async () => {
+  await formRef.value.validate()
+  let receiverUserIds: number[] | undefined
+  if (targetType.value === 'users') {
+    receiverUserIds = receiverInput.value
+      .split(',')
+      .map((s) => s.trim())
+      .filter((s) => s.length > 0)
+      .map((s) => Number(s))
+      .filter((n) => Number.isFinite(n))
+    if (!receiverUserIds || receiverUserIds.length === 0) {
+      message.error('请输入至少一个接收用户编号')
+      return
+    }
+  }
+  formLoading.value = true
+  try {
+    await MessageApi.sendManagerChannelMessage({
+      materialId: formData.value.materialId!,
+      receiverUserIds
+    })
+    message.success('推送成功')
+    dialogVisible.value = false
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+const resetForm = () => {
+  formData.value = { channelId: undefined, materialId: undefined }
+  targetType.value = 'all'
+  receiverInput.value = ''
+  materialList.value = []
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/im/manager/channel/message/index.vue b/src/views/im/manager/channel/message/index.vue
new file mode 100644
index 000000000..8d1d52586
--- /dev/null
+++ b/src/views/im/manager/channel/message/index.vue
@@ -0,0 +1,159 @@
+<template>
+  <ContentWrap>
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="频道" prop="channelId">
+        <el-select v-model="queryParams.channelId" placeholder="全部" clearable class="!w-200px">
+          <el-option v-for="c in channelList" :key="c.id" :label="c.name" :value="c.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="发送时间" prop="sendTime">
+        <el-date-picker
+          v-model="queryParams.sendTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始"
+          end-placeholder="结束"
+          class="!w-300px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" />搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openSendForm"
+          v-hasPermi="['im:manager:channel-message:send']"
+        >
+          <Icon icon="ep:promotion" class="mr-5px" />立即推送
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="编号" align="center" prop="id" width="80" />
+      <el-table-column label="频道" align="center" prop="channelName" width="120" />
+      <el-table-column
+        label="素材标题"
+        align="left"
+        prop="materialTitle"
+        min-width="180"
+        show-overflow-tooltip
+      />
+      <el-table-column label="接收人" align="center" prop="receiverUserIds" width="120">
+        <template #default="scope">
+          <el-tag
+            v-if="!scope.row.receiverUserIds || scope.row.receiverUserIds.length === 0"
+            type="warning"
+            size="small"
+          >
+            全员
+          </el-tag>
+          <span v-else>{{ scope.row.receiverUserIds.length }} 人</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="发送时间"
+        align="center"
+        prop="sendTime"
+        width="170"
+        :formatter="dateFormatter"
+      />
+      <el-table-column label="操作" align="center" width="100" fixed="right">
+        <template #default="scope">
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['im:manager:channel-message:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <ChannelMessageSendForm ref="sendFormRef" :channel-list="channelList" @success="getList" />
+</template>
+
+<script lang="ts" setup>
+// TODO @AI：补充一些注释，对齐 system user index；
+import { dateFormatter } from '@/utils/formatTime'
+import * as MessageApi from '@/api/im/manager/channel/message'
+import * as ChannelApi from '@/api/im/manager/channel'
+import ChannelMessageSendForm from './ChannelMessageSendForm.vue'
+
+defineOptions({ name: 'ImChannelMessage' })
+
+const message = useMessage()
+const { t } = useI18n()
+
+const loading = ref(true)
+const total = ref(0)
+const list = ref<MessageApi.ImManagerChannelMessageVO[]>([])
+const channelList = ref<ChannelApi.ImManagerChannelVO[]>([])
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  channelId: undefined as number | undefined,
+  sendTime: [] as string[]
+})
+const queryFormRef = ref()
+
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await MessageApi.getManagerChannelMessagePage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+const sendFormRef = ref()
+const openSendForm = () => {
+  sendFormRef.value.open()
+}
+
+const handleDelete = async (id: number) => {
+  try {
+    await message.delConfirm()
+  } catch {
+    return
+  }
+  await MessageApi.deleteManagerChannelMessage(id)
+  message.success(t('common.delSuccess'))
+  await getList()
+}
+
+onMounted(async () => {
+  channelList.value = await ChannelApi.getEnabledChannelList()
+  getList()
+})
+</script>
diff --git a/src/views/im/utils/storage.ts b/src/views/im/utils/storage.ts
index 3307737fc..7536d468c 100644
--- a/src/views/im/utils/storage.ts
+++ b/src/views/im/utils/storage.ts
@@ -56,6 +56,8 @@ export const StorageKeys = {
   friends: (userId: number | string) => `friends:${userId}`,
   /** 群列表整桶（不含 members，剥离到独立 key），保证整桶写不带成员爆量 */
   groups: (userId: number | string) => `groups:${userId}`,
+  /** 频道列表整桶；频道量级很小，整桶整写够用 */
+  channels: (userId: number | string) => `channels:${userId}`,
   /** 单群成员，按 groupId 分桶——单群可上百-千级，跟懒加载粒度对齐；群解散时物理删 */
   groupMembers: (userId: number | string, groupId: number) =>
     `groupMembers:${userId}:${groupId}`,