From ab901e633b436e4f84a82743bf795faa6c9f5fd9 Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Wed, 4 Feb 2026 20:14:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=92=AD=E5=AE=A2?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=B8=8E=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/podcast/ProgramList.vue        | 154 ++++++
 src/renderer/components/podcast/RadioCard.vue | 112 ++++
 src/renderer/views/podcast/category.vue       | 111 ++++
 src/renderer/views/podcast/index.vue          | 488 ++++++++++++++++++
 src/renderer/views/podcast/radio.vue          | 305 +++++++++++
 5 files changed, 1170 insertions(+)
 create mode 100644 src/renderer/components/podcast/ProgramList.vue
 create mode 100644 src/renderer/components/podcast/RadioCard.vue
 create mode 100644 src/renderer/views/podcast/category.vue
 create mode 100644 src/renderer/views/podcast/index.vue
 create mode 100644 src/renderer/views/podcast/radio.vue

diff --git a/src/renderer/components/podcast/ProgramList.vue b/src/renderer/components/podcast/ProgramList.vue
new file mode 100644
index 0000000..e6575f5
--- /dev/null
+++ b/src/renderer/components/podcast/ProgramList.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { usePodcastHistory } from '@/hooks/PodcastHistoryHook';
+import { usePlayerStore } from '@/store';
+import type { SongResult } from '@/types/music';
+import type { DjProgram } from '@/types/podcast';
+import { formatNumber, getImgUrl, secondToMinute } from '@/utils';
+
+defineProps<{
+  programs: DjProgram[];
+  loading?: boolean;
+}>();
+
+const playerStore = usePlayerStore();
+const { addPodcast } = usePodcastHistory();
+
+const formatDate = (timestamp: number): string => {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+
+  if (diff < 86400000) {
+    const hours = Math.floor(diff / 3600000);
+    if (hours < 1) {
+      const minutes = Math.floor(diff / 60000);
+      return `${minutes}分钟前`;
+    }
+    return `${hours}小时前`;
+  }
+
+  return `${date.getMonth() + 1}月${date.getDate()}日`;
+};
+
+const playProgram = async (program: DjProgram) => {
+  try {
+    const songData: SongResult = {
+      id: program.mainSong.id,
+      name: program.mainSong.name || program.name || '播客节目',
+      duration: program.mainSong.duration,
+      picUrl: program.coverUrl,
+      ar: [
+        {
+          id: program.radio.id,
+          name: program.radio.name,
+          picId: 0,
+          img1v1Id: 0,
+          briefDesc: '',
+          picUrl: '',
+          img1v1Url: '',
+          albumSize: 0,
+          alias: [],
+          trans: '',
+          musicSize: 0,
+          topicPerson: 0
+        }
+      ],
+      al: {
+        id: program.radio.id,
+        name: program.radio.name,
+        picUrl: program.coverUrl,
+        type: '',
+        size: 0,
+        picId: 0,
+        blurPicUrl: '',
+        companyId: 0,
+        pic: 0,
+        picId_str: '',
+        publishTime: 0,
+        description: '',
+        tags: '',
+        company: '',
+        briefDesc: '',
+        artist: {
+          id: 0,
+          name: '',
+          picUrl: '',
+          alias: [],
+          albumSize: 0,
+          picId: 0,
+          img1v1Url: '',
+          img1v1Id: 0,
+          trans: '',
+          briefDesc: '',
+          musicSize: 0,
+          topicPerson: 0
+        },
+        songs: [],
+        alias: [],
+        status: 0,
+        copyrightId: 0,
+        commentThreadId: '',
+        artists: [],
+        subType: '',
+        onSale: false,
+        mark: 0
+      },
+      source: 'netease',
+      count: 0
+    };
+
+    await playerStore.setPlay(songData);
+    addPodcast(program);
+  } catch (error) {
+    console.error('播放节目失败:', error);
+  }
+};
+</script>
+
+<template>
+  <div class="program-list">
+    <n-spin :show="loading">
+      <div v-if="programs.length === 0" class="text-center py-12 text-gray-400">暂无节目</div>
+
+      <div v-else class="space-y-2">
+        <div
+          v-for="program in programs"
+          :key="program.id"
+          class="flex items-center gap-4 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer group"
+          @click="playProgram(program)"
+        >
+          <div class="relative flex-shrink-0 w-16 h-16">
+            <img
+              :src="getImgUrl(program.coverUrl, '100y100')"
+              :alt="program.mainSong.name"
+              class="w-full h-full rounded object-cover"
+            />
+            <div
+              class="absolute inset-0 bg-black/40 rounded opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
+            >
+              <i class="ri-play-fill text-white text-2xl"></i>
+            </div>
+          </div>
+
+          <div class="flex-1 min-w-0">
+            <h4 class="text-sm font-medium truncate">
+              {{ program.mainSong.name || program.name }}
+            </h4>
+            <p class="text-xs text-gray-500 dark:text-gray-400 truncate mt-1">
+              {{ program.description }}
+            </p>
+            <div class="text-xs text-gray-400 mt-1">
+              {{ formatDate(program.createTime) }} ·
+              {{ secondToMinute(program.mainSong.duration / 1000) }}
+            </div>
+          </div>
+
+          <div class="flex-shrink-0 text-xs text-gray-400 text-right">
+            <div>{{ formatNumber(program.listenerCount) }} {{ $t('podcast.listeners') }}</div>
+            <div class="mt-1">{{ formatNumber(program.commentCount) }} 评论</div>
+          </div>
+        </div>
+      </div>
+    </n-spin>
+  </div>
+</template>
diff --git a/src/renderer/components/podcast/RadioCard.vue b/src/renderer/components/podcast/RadioCard.vue
new file mode 100644
index 0000000..b68f074
--- /dev/null
+++ b/src/renderer/components/podcast/RadioCard.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { useMessage } from 'naive-ui';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import { usePodcastStore, useUserStore } from '@/store';
+import type { DjProgram, DjRadio } from '@/types/podcast';
+import { formatNumber, getImgUrl } from '@/utils';
+
+const props = defineProps<{
+  radio: DjRadio;
+  program?: DjProgram;
+  showSubscribeButton?: boolean;
+  animationDelay?: string;
+}>();
+
+const podcastStore = usePodcastStore();
+const userStore = useUserStore();
+const router = useRouter();
+const message = useMessage();
+const { t } = useI18n();
+
+const isSubscribed = computed(() => podcastStore.isRadioSubscribed(props.radio.id));
+
+const handleSubscribe = async (e: Event) => {
+  e.stopPropagation();
+  if (!userStore.user) {
+    message.warning(t('history.needLogin'));
+    return;
+  }
+  await podcastStore.toggleSubscribe(props.radio);
+};
+
+const goToDetail = () => {
+  router.push(`/podcast/radio/${props.radio.id}`);
+};
+</script>
+
+<template>
+  <div
+    class="radio-card animate-item group flex flex-col rounded-2xl bg-neutral-50 dark:bg-neutral-900/50 p-4 cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-800/50 transition-all duration-300"
+    :style="{ animationDelay }"
+    @click="goToDetail"
+  >
+    <div class="relative overflow-hidden rounded-xl">
+      <img
+        :src="getImgUrl(radio.picUrl || program?.coverUrl || '', '200y200')"
+        :alt="radio.name"
+        class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-500"
+      />
+      <div
+        v-if="showSubscribeButton && radio.subCount !== undefined"
+        class="absolute top-2 right-2 z-10"
+      >
+        <n-button
+          :type="isSubscribed ? 'default' : 'primary'"
+          size="small"
+          round
+          @click="handleSubscribe"
+        >
+          {{ isSubscribed ? t('podcast.subscribed') : t('podcast.subscribe') }}
+        </n-button>
+      </div>
+      <div
+        v-if="program"
+        class="absolute bottom-0 left-0 right-0 p-2 bg-black/40 backdrop-blur-sm text-white text-[10px] truncate"
+      >
+        {{ t('podcast.recentPlayed') }}: {{ program.mainSong?.name || program.name }}
+      </div>
+    </div>
+
+    <h3
+      class="mt-3 text-sm md:text-base font-semibold text-neutral-900 dark:text-white line-clamp-2 group-hover:text-primary transition-colors"
+      :title="radio.name"
+    >
+      {{ radio.name }}
+    </h3>
+
+    <p
+      v-if="radio.desc"
+      class="mt-1 text-xs md:text-sm text-neutral-500 dark:text-neutral-400 line-clamp-2"
+    >
+      {{ radio.desc }}
+    </p>
+
+    <div
+      v-if="radio.subCount !== undefined"
+      class="mt-2 flex items-center justify-between text-xs text-neutral-400"
+    >
+      <span>{{ formatNumber(radio.subCount) }} {{ t('podcast.subscribeCount') }}</span>
+      <span>{{ radio.programCount }} {{ t('podcast.programCount') }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.animate-item {
+  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>
diff --git a/src/renderer/views/podcast/category.vue b/src/renderer/views/podcast/category.vue
new file mode 100644
index 0000000..3af7766
--- /dev/null
+++ b/src/renderer/views/podcast/category.vue
@@ -0,0 +1,111 @@
+<template>
+  <div
+    class="category-page-container h-full w-full bg-white dark:bg-black transition-colors duration-500"
+  >
+    <n-scrollbar class="h-full">
+      <div class="category-page-content w-full pb-32 pt-6 px-4 sm:px-6 lg:px-8 lg:pl-0">
+        <!-- Hero Section -->
+        <div class="mb-8">
+          <h1
+            class="text-3xl md:text-4xl font-bold tracking-tight text-neutral-900 dark:text-white mb-2"
+          >
+            {{ currentCategory?.name || t('podcast.categoryRadios') }}
+          </h1>
+          <p class="text-neutral-500 dark:text-neutral-400">
+            {{ t('podcast.exploreCategoryRadios') }}
+          </p>
+        </div>
+
+        <!-- Radios Grid -->
+        <section>
+          <div class="mb-6 flex items-center justify-between">
+            <div class="flex items-center gap-3">
+              <h2
+                class="text-xl font-bold tracking-tight text-neutral-900 md:text-2xl dark:text-white"
+              >
+                {{ t('podcast.hotRadios') }}
+              </h2>
+              <div class="h-1.5 w-1.5 rounded-full bg-primary" />
+            </div>
+          </div>
+
+          <!-- Loading Skeletons -->
+          <div v-if="loading" class="grid gap-6" :style="gridStyle">
+            <div v-for="i in 15" :key="i" class="space-y-3">
+              <div
+                class="aspect-square animate-pulse rounded-2xl bg-neutral-200 dark:bg-neutral-800"
+              />
+              <div class="h-4 w-3/4 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
+              <div class="h-3 w-1/2 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
+            </div>
+          </div>
+
+          <!-- Radios Grid -->
+          <div v-else-if="radios.length > 0" class="grid gap-6" :style="gridStyle">
+            <radio-card
+              v-for="(radio, index) in radios"
+              :key="radio.id"
+              :radio="radio"
+              :show-subscribe-button="true"
+              :animation-delay="calculateAnimationDelay(index, 0.04)"
+            />
+          </div>
+
+          <!-- Empty State -->
+          <div v-else class="flex flex-col items-center justify-center py-20 text-neutral-400">
+            <i class="ri-radio-line mb-4 text-5xl opacity-20" />
+            <p class="text-sm font-medium">{{ t('podcast.noCategoryRadios') }}</p>
+          </div>
+        </section>
+      </div>
+    </n-scrollbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NScrollbar } from 'naive-ui';
+import { computed, onMounted, ref, shallowRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import { getDjRadioHot } from '@/api/podcast';
+import RadioCard from '@/components/podcast/RadioCard.vue';
+import { usePodcastStore } from '@/store';
+import type { DjRadio } from '@/types/podcast';
+import { calculateAnimationDelay } from '@/utils';
+
+defineOptions({
+  name: 'PodcastCategory'
+});
+
+const { t } = useI18n();
+const route = useRoute();
+const podcastStore = usePodcastStore();
+
+const categoryId = computed(() => Number(route.params.id));
+
+const radios = shallowRef<DjRadio[]>([]);
+const loading = ref(false);
+
+const gridStyle = computed(() => ({
+  gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))'
+}));
+
+const currentCategory = computed(() => {
+  return podcastStore.categories.find((c) => c.id === categoryId.value);
+});
+
+const fetchRadios = async () => {
+  try {
+    loading.value = true;
+    const res = await getDjRadioHot(categoryId.value);
+    radios.value = res.data?.djRadios || [];
+  } catch (error) {
+    console.error('获取分类电台失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(fetchRadios);
+</script>
diff --git a/src/renderer/views/podcast/index.vue b/src/renderer/views/podcast/index.vue
new file mode 100644
index 0000000..c7d9bd8
--- /dev/null
+++ b/src/renderer/views/podcast/index.vue
@@ -0,0 +1,488 @@
+<template>
+  <div
+    class="podcast-container h-full w-full bg-white dark:bg-black transition-colors duration-500"
+  >
+    <n-scrollbar class="h-full">
+      <div class="podcast-content w-full pb-32 pt-6 px-4 sm:px-6 lg:px-8 lg:pl-0">
+        <!-- Hero Section -->
+        <div class="mb-8 flex flex-col md:flex-row md:items-end justify-between gap-6">
+          <div>
+            <h1
+              class="text-3xl md:text-4xl font-bold tracking-tight text-neutral-900 dark:text-white mb-2"
+            >
+              {{ t('podcast.podcast') }}
+            </h1>
+            <p class="text-neutral-500 dark:text-neutral-400">
+              {{ t('podcast.discover') }}
+            </p>
+          </div>
+
+          <!-- Search Bar -->
+          <div class="relative w-full md:w-80 group">
+            <n-input
+              v-model:value="searchKeyword"
+              round
+              :placeholder="t('podcast.searchPlaceholder')"
+              class="!bg-neutral-100 dark:!bg-neutral-900 border-none transition-all duration-300 group-hover:shadow-lg focus:shadow-lg"
+              @keypress.enter="handleSearch"
+            >
+              <template #prefix>
+                <i class="ri-search-line text-neutral-400"></i>
+              </template>
+              <template #suffix>
+                <n-spin v-if="isSearching" size="small" />
+              </template>
+            </n-input>
+          </div>
+        </div>
+
+        <!-- Search Results Section -->
+        <div v-if="showSearchResults" class="content-sections mb-12">
+          <section>
+            <div class="mb-6 flex items-center justify-between">
+              <div class="flex items-center gap-3">
+                <h2
+                  class="text-xl font-bold tracking-tight text-neutral-900 md:text-2xl dark:text-white"
+                >
+                  {{ t('podcast.searchResults') }}
+                </h2>
+                <div class="h-1.5 w-1.5 rounded-full bg-primary" />
+              </div>
+              <n-button text class="text-neutral-400 hover:text-primary" @click="clearSearch">
+                {{ t('common.close') }}
+              </n-button>
+            </div>
+
+            <div
+              v-if="searchResults.length === 0 && !isSearching"
+              class="py-10 text-center text-neutral-400"
+            >
+              {{ t('common.noData') }}
+            </div>
+
+            <div v-else class="grid gap-6" :style="gridStyle">
+              <radio-card
+                v-for="(radio, index) in searchResults"
+                :key="radio.id"
+                :radio="radio"
+                :show-subscribe-button="true"
+                :animation-delay="calculateAnimationDelay(index, 0.04)"
+              />
+            </div>
+
+            <div v-if="hasMoreSearch && !isSearching" class="mt-8 flex justify-center">
+              <n-button secondary round @click="loadMoreSearch">
+                {{ t('common.loadMore') }}
+              </n-button>
+            </div>
+          </section>
+        </div>
+
+        <!-- Main Content Sections -->
+        <div
+          v-if="!showSearchResults"
+          class="content-sections space-y-10 md:space-y-8 lg:space-y-12"
+        >
+          <!-- Recently Played Section -->
+          <section v-if="displayRecentPrograms.length > 0">
+            <div class="mb-6 flex items-center justify-between">
+              <div class="flex items-center gap-3">
+                <h2
+                  class="text-xl font-bold tracking-tight text-neutral-900 md:text-2xl dark:text-white"
+                >
+                  {{ t('podcast.recentPlayed') }}
+                </h2>
+                <div class="h-1.5 w-1.5 rounded-full bg-primary" />
+              </div>
+              <div class="flex items-center gap-4">
+                <n-button
+                  v-if="!userStore.user"
+                  text
+                  class="text-xs text-neutral-400"
+                  @click="clearLocalHistory"
+                >
+                  {{ t('common.clear') }}
+                </n-button>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
+              <radio-card
+                v-for="(program, index) in displayRecentPrograms"
+                :key="program.id"
+                :radio="program.radio as any"
+                :program="program"
+                :animation-delay="calculateAnimationDelay(index, 0.04)"
+              />
+            </div>
+          </section>
+          <!-- Today's Perfered Section -->
+          <section v-if="podcastStore.todayPerfered.length > 0">
+            <div class="mb-6 flex items-center justify-between">
+              <div class="flex items-center gap-3">
+                <h2
+                  class="text-xl font-bold tracking-tight text-neutral-900 md:text-2xl dark:text-white"
+                >
+                  {{ t('podcast.todayPerfered') }}
+                </h2>
+                <div class="h-1.5 w-1.5 rounded-full bg-primary" />
+              </div>
+              <n-button
+                v-if="podcastStore.todayPerfered.length > 0"
+                type="primary"
+                secondary
+                round
+                size="small"
+                @click="handlePlayTodayPerfered"
+              >
+                <template #icon>
+                  <i class="ri-play-circle-line"></i>
+                </template>
+                {{ t('search.button.playAll') }}
+              </n-button>
+            </div>
+
+            <div class="space-y-3">
+              <div
+                v-for="(program, index) in podcastStore.todayPerfered.slice(0, 5)"
+                :key="program.id"
+                class="program-card flex items-center gap-4 p-4 rounded-xl bg-neutral-50 dark:bg-neutral-900/50 hover:bg-neutral-100 dark:hover:bg-neutral-800/50 cursor-pointer group transition-all duration-300 animate-item"
+                :style="{ animationDelay: calculateAnimationDelay(index, 0.04) }"
+                @click="playProgram(program)"
+              >
+                <div class="relative flex-shrink-0 w-16 h-16 md:w-20 md:h-20">
+                  <img
+                    :src="getImgUrl(program.coverUrl, '100y100')"
+                    :alt="program.mainSong.name"
+                    class="w-full h-full rounded-lg object-cover"
+                  />
+                  <div
+                    class="absolute inset-0 bg-black/40 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
+                  >
+                    <i class="ri-play-fill text-white text-2xl"></i>
+                  </div>
+                </div>
+
+                <div class="flex-1 min-w-0">
+                  <h4
+                    class="text-sm md:text-base font-semibold text-neutral-900 dark:text-white truncate"
+                  >
+                    {{ program.mainSong.name || program.name }}
+                  </h4>
+                  <p
+                    class="text-xs md:text-sm text-neutral-500 dark:text-neutral-400 truncate mt-1"
+                  >
+                    {{ program.description }}
+                  </p>
+                  <div class="flex items-center gap-3 text-xs text-neutral-400 mt-2">
+                    <span>{{ formatDate(program.createTime) }}</span>
+                    <span>{{ secondToMinute(program.mainSong.duration / 1000) }}</span>
+                    <span
+                      >{{ formatNumber(program.listenerCount) }} {{ t('podcast.listeners') }}</span
+                    >
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <!-- My Subscriptions Section -->
+          <section v-if="userStore.user">
+            <div class="mb-6 flex items-center justify-between">
+              <div class="flex items-center gap-3">
+                <h2
+                  class="text-xl font-bold tracking-tight text-neutral-900 md:text-2xl dark:text-white"
+                >
+                  {{ t('podcast.mySubscriptions') }}
+                </h2>
+                <div class="h-1.5 w-1.5 rounded-full bg-primary" />
+              </div>
+            </div>
+
+            <!-- Empty State -->
+            <div
+              v-if="podcastStore.subscribedRadios.length === 0"
+              class="flex flex-col items-center justify-center py-20 text-neutral-400"
+            >
+              <i class="ri-radio-line mb-4 text-5xl opacity-20" />
+              <p class="text-sm font-medium mb-4">{{ t('podcast.noSubscriptions') }}</p>
+              <n-button type="primary" @click="scrollToRecommended">
+                {{ t('podcast.goDiscover') }}
+              </n-button>
+            </div>
+
+            <!-- Subscribed Radios Grid -->
+            <div v-else class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
+              <radio-card
+                v-for="(radio, index) in podcastStore.subscribedRadios.slice(0, 10)"
+                :key="radio.id"
+                :radio="radio"
+                :show-subscribe-button="true"
+                :animation-delay="calculateAnimationDelay(index, 0.04)"
+              />
+            </div>
+          </section>
+
+          <!-- Recommended Radios Section -->
+          <section ref="recommendedSection">
+            <div class="mb-6 flex items-center justify-between">
+              <div class="flex items-center gap-3">
+                <h2
+                  class="text-xl font-bold tracking-tight text-neutral-900 md:text-2xl dark:text-white"
+                >
+                  {{ t('podcast.recommended') }}
+                </h2>
+                <div class="h-1.5 w-1.5 rounded-full bg-primary" />
+              </div>
+            </div>
+
+            <div
+              v-if="podcastStore.isLoading"
+              class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6"
+            >
+              <div v-for="i in 10" :key="i" class="space-y-3">
+                <div
+                  class="aspect-square animate-pulse rounded-2xl bg-neutral-200 dark:bg-neutral-800"
+                />
+                <div class="h-4 w-3/4 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
+                <div class="h-3 w-1/2 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
+              </div>
+            </div>
+
+            <div v-else class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
+              <radio-card
+                v-for="(radio, index) in podcastStore.recommendRadios.slice(0, 10)"
+                :key="radio.id"
+                :radio="radio"
+                :show-subscribe-button="true"
+                :animation-delay="calculateAnimationDelay(index, 0.04)"
+              />
+            </div>
+          </section>
+
+          <!-- Categories Section -->
+          <section>
+            <div class="mb-6 flex items-center justify-between">
+              <div class="flex items-center gap-3">
+                <h2
+                  class="text-xl font-bold tracking-tight text-neutral-900 md:text-2xl dark:text-white"
+                >
+                  {{ t('podcast.popularCategories') }}
+                </h2>
+                <div class="h-1.5 w-1.5 rounded-full bg-primary" />
+              </div>
+            </div>
+
+            <div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+              <div
+                v-for="(category, index) in podcastStore.categories.slice(0, 12)"
+                :key="category.id"
+                class="category-card flex flex-col items-center gap-3 p-4 rounded-xl bg-neutral-50 dark:bg-neutral-900/50 hover:bg-neutral-100 dark:hover:bg-neutral-800/50 cursor-pointer group transition-all duration-300 animate-item"
+                :style="{ animationDelay: calculateAnimationDelay(index, 0.03) }"
+                @click="router.push(`/podcast/category/${category.id}`)"
+              >
+                <img
+                  v-if="category.pic84x84Url"
+                  :src="category.pic84x84Url"
+                  :alt="category.name"
+                  class="w-12 h-12 md:w-16 md:h-16 rounded-full object-cover group-hover:scale-110 transition-transform duration-300"
+                />
+                <span
+                  class="text-xs md:text-sm text-center font-medium text-neutral-700 dark:text-neutral-300 group-hover:text-primary dark:group-hover:text-white transition-colors"
+                >
+                  {{ category.name }}
+                </span>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </n-scrollbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { createDiscreteApi, NButton, NInput, NScrollbar, NSpin } from 'naive-ui';
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import { getSearch } from '@/api/search';
+import RadioCard from '@/components/podcast/RadioCard.vue';
+import { usePodcastHistory } from '@/hooks/PodcastHistoryHook';
+import { usePlayerStore, usePlaylistStore, usePodcastStore, useUserStore } from '@/store';
+import type { DjProgram, DjRadio } from '@/types/podcast';
+import { calculateAnimationDelay, formatNumber, getImgUrl, secondToMinute } from '@/utils';
+import { mapDjProgramToSongResult } from '@/utils/podcastUtils';
+
+defineOptions({
+  name: 'Podcast'
+});
+
+const { t } = useI18n();
+const { message } = createDiscreteApi(['message']);
+const router = useRouter();
+const podcastStore = usePodcastStore();
+const playlistStore = usePlaylistStore();
+const playerStore = usePlayerStore();
+const userStore = useUserStore();
+const { addPodcast, podcastList, clearPodcastHistory } = usePodcastHistory();
+const recommendedSection = ref<HTMLElement | null>(null);
+
+// Search State
+const searchKeyword = ref('');
+const isSearching = ref(false);
+const searchResults = ref<DjRadio[]>([]);
+const searchPage = ref(0);
+const hasMoreSearch = ref(false);
+const showSearchResults = ref(false);
+
+const gridStyle = computed(() => ({
+  gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))'
+}));
+
+const displayRecentPrograms = computed(() => {
+  if (userStore.user) {
+    return podcastStore.recentPrograms.slice(0, 5);
+  }
+  return podcastList.value.slice(0, 5);
+});
+
+const handlePlayTodayPerfered = () => {
+  if (podcastStore.todayPerfered.length === 0) return;
+  const songList = podcastStore.todayPerfered.map((p) => mapDjProgramToSongResult(p));
+  playlistStore.setPlayList(songList);
+  if (songList[0]) {
+    playerStore.setPlay(songList[0]);
+  }
+};
+
+const handleSearch = async () => {
+  if (!searchKeyword.value.trim()) return;
+
+  isSearching.value = true;
+  showSearchResults.value = true;
+  searchPage.value = 0;
+  searchResults.value = [];
+
+  try {
+    const { data } = await getSearch({
+      keywords: searchKeyword.value,
+      type: 1009, // DJ Radio
+      limit: 30,
+      offset: 0
+    });
+
+    searchResults.value = data.result?.djRadios || [];
+    hasMoreSearch.value = data.result?.djRadioCount > searchResults.value.length;
+  } catch (error) {
+    console.error('搜索播客失败:', error);
+    message.error(t('common.searchFailed'));
+  } finally {
+    isSearching.value = false;
+  }
+};
+
+const loadMoreSearch = async () => {
+  if (isSearching.value) return;
+
+  isSearching.value = true;
+  searchPage.value++;
+
+  try {
+    const { data } = await getSearch({
+      keywords: searchKeyword.value,
+      type: 1009,
+      limit: 30,
+      offset: searchPage.value * 30
+    });
+
+    const newResults = data.result?.djRadios || [];
+    searchResults.value.push(...newResults);
+    hasMoreSearch.value = data.result?.djRadioCount > searchResults.value.length;
+  } catch (error) {
+    console.error('加载更多搜索结果失败:', error);
+  } finally {
+    isSearching.value = false;
+  }
+};
+
+const clearSearch = () => {
+  showSearchResults.value = false;
+  searchKeyword.value = '';
+  searchResults.value = [];
+};
+
+const clearLocalHistory = () => {
+  clearPodcastHistory();
+};
+
+const formatDate = (timestamp: number): string => {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+
+  if (diff < 86400000) {
+    const hours = Math.floor(diff / 3600000);
+    if (hours < 1) {
+      const minutes = Math.floor(diff / 60000);
+      return `${minutes}分钟前`;
+    }
+    return `${hours}小时前`;
+  }
+
+  return `${date.getMonth() + 1}月${date.getDate()}日`;
+};
+
+const playProgram = async (program: DjProgram) => {
+  try {
+    const songData = mapDjProgramToSongResult(program);
+    await playerStore.setPlay(songData);
+    addPodcast(program);
+  } catch (error) {
+    console.error('播放节目失败:', error);
+  }
+};
+
+const scrollToRecommended = () => {
+  if (recommendedSection.value) {
+    recommendedSection.value.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+};
+
+onMounted(async () => {
+  const tasks = [
+    podcastStore.fetchCategories(),
+    podcastStore.fetchRecommendRadios(),
+    podcastStore.fetchTodayPerfered()
+  ];
+
+  if (userStore.user) {
+    tasks.push(podcastStore.fetchSubscribedRadios());
+    tasks.push(podcastStore.fetchRecentPrograms());
+  }
+
+  await Promise.all(tasks);
+});
+</script>
+
+<style lang="scss" scoped>
+.podcast-container {
+  position: relative;
+}
+
+.animate-item {
+  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>
diff --git a/src/renderer/views/podcast/radio.vue b/src/renderer/views/podcast/radio.vue
new file mode 100644
index 0000000..7054cd1
--- /dev/null
+++ b/src/renderer/views/podcast/radio.vue
@@ -0,0 +1,305 @@
+<template>
+  <div
+    class="radio-detail-page h-full w-full bg-white dark:bg-black transition-colors duration-500"
+  >
+    <n-scrollbar class="h-full" @scroll="handleScroll">
+      <div class="radio-detail-content w-full pb-32">
+        <n-spin :show="podcastStore.isLoading && !podcastStore.currentRadio">
+          <div v-if="podcastStore.currentRadio" class="radio-content">
+            <!-- Hero Section -->
+            <section class="hero-section relative overflow-hidden rounded-tl-2xl">
+              <!-- Background Image with Blur -->
+              <div class="hero-bg absolute inset-0 -top-20">
+                <div
+                  class="absolute inset-0 bg-cover bg-center scale-110 blur-2xl opacity-40 dark:opacity-30"
+                  :style="{
+                    backgroundImage: `url(${getImgUrl(podcastStore.currentRadio.picUrl, '800y800')})`
+                  }"
+                />
+                <div
+                  class="absolute inset-0 bg-gradient-to-b from-transparent via-white/80 to-white dark:via-black/80 dark:to-black"
+                />
+              </div>
+
+              <!-- Hero Content -->
+              <div class="hero-content relative z-10 px-4 md:px-8 pt-4 md:pt-8 pb-6">
+                <div class="flex flex-col md:flex-row gap-6 md:gap-10 items-center md:items-end">
+                  <!-- Radio Cover -->
+                  <div class="radio-cover-wrapper relative group">
+                    <div
+                      class="cover-glow absolute -inset-2 rounded-2xl bg-gradient-to-br from-primary/30 via-primary/10 to-transparent blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+                    />
+                    <div
+                      class="cover-container relative w-48 h-48 md:w-56 md:h-56 rounded-2xl overflow-hidden shadow-2xl ring-4 ring-white/50 dark:ring-neutral-800/50"
+                    >
+                      <img
+                        :src="getImgUrl(podcastStore.currentRadio.picUrl, '500y500')"
+                        :alt="podcastStore.currentRadio.name"
+                        class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                      />
+                      <!-- Play overlay on cover -->
+                      <div
+                        class="absolute inset-0 flex items-center justify-center bg-transparent group-hover:bg-black/30 transition-all duration-300"
+                      >
+                        <div
+                          class="play-icon w-14 h-14 rounded-full bg-white/90 flex items-center justify-center opacity-0 scale-75 group-hover:opacity-100 group-hover:scale-100 transition-all duration-300 shadow-xl cursor-pointer hover:scale-110 active:scale-95"
+                          @click="handlePlayAll"
+                        >
+                          <i class="iconfont icon-playfill text-2xl text-neutral-900 ml-1" />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- Radio Info -->
+                  <div class="radio-info flex-1 text-center md:text-left">
+                    <div class="radio-badge mb-2 md:mb-3">
+                      <span
+                        class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-primary/10 dark:bg-primary/20 text-primary text-xs font-semibold uppercase tracking-wider"
+                      >
+                        <i class="ri-radio-line text-sm" />
+                        {{ podcastStore.currentRadio.category }}
+                      </span>
+                    </div>
+                    <h1
+                      class="radio-name text-2xl md:text-3xl lg:text-4xl font-bold text-neutral-900 dark:text-white tracking-tight"
+                    >
+                      {{ podcastStore.currentRadio.name }}
+                    </h1>
+
+                    <!-- Stats -->
+                    <div
+                      class="radio-stats flex flex-wrap items-center justify-center md:justify-start gap-4 md:gap-6 mt-4 md:mt-5"
+                    >
+                      <div class="stat-item flex items-center gap-2">
+                        <i class="ri-user-follow-line text-primary text-lg" />
+                        <span class="text-sm font-medium text-neutral-600 dark:text-neutral-300">
+                          <span class="font-bold text-neutral-900 dark:text-white">{{
+                            formatNumber(podcastStore.currentRadio.subCount)
+                          }}</span>
+                          {{ t('podcast.subscribeCount') }}
+                        </span>
+                      </div>
+                      <div class="stat-item flex items-center gap-2">
+                        <i class="ri-play-list-2-line text-primary text-lg" />
+                        <span class="text-sm font-medium text-neutral-600 dark:text-neutral-300">
+                          <span class="font-bold text-neutral-900 dark:text-white">{{
+                            podcastStore.currentRadio.programCount
+                          }}</span>
+                          {{ t('podcast.programCount') }}
+                        </span>
+                      </div>
+                    </div>
+
+                    <p
+                      class="mt-4 text-sm md:text-base text-neutral-600 dark:text-neutral-300 line-clamp-2 leading-relaxed max-w-2xl"
+                    >
+                      {{ podcastStore.currentRadio.desc }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <!-- Action Bar -->
+            <section
+              class="action-bar sticky top-0 z-20 px-4 md:px-8 py-3 md:py-4 bg-white/80 dark:bg-black/80 backdrop-blur-xl border-b border-neutral-100 dark:border-neutral-800/50"
+            >
+              <div class="flex items-center justify-between gap-3">
+                <div class="flex items-center gap-3">
+                  <!-- Play All Button -->
+                  <button
+                    class="play-all-btn flex items-center gap-2 px-6 py-2.5 rounded-full bg-primary hover:bg-primary/90 text-white font-semibold text-sm transition-all duration-200 hover:scale-105 active:scale-95 shadow-lg shadow-primary/25"
+                    @click="handlePlayAll"
+                  >
+                    <i class="iconfont icon-playfill text-lg" />
+                    <span>{{ t('search.button.playAll') }}</span>
+                  </button>
+
+                  <!-- Subscribe Button -->
+                  <button
+                    class="subscribe-btn flex items-center gap-2 px-6 py-2.5 rounded-full font-semibold text-sm transition-all duration-200 hover:scale-105 active:scale-95 shadow-sm"
+                    :class="
+                      isSubscribed
+                        ? 'bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-200'
+                        : 'bg-primary/10 dark:bg-primary/20 text-primary border border-primary/20'
+                    "
+                    @click="handleSubscribe"
+                  >
+                    <i
+                      :class="isSubscribed ? 'ri-checkbox-circle-line' : 'ri-add-line'"
+                      class="text-lg"
+                    />
+                    <span>{{
+                      isSubscribed ? t('podcast.subscribed') : t('podcast.subscribe')
+                    }}</span>
+                  </button>
+                </div>
+              </div>
+            </section>
+
+            <!-- Program List Section -->
+            <section class="tab-content px-4 md:px-8 py-6 md:py-8">
+              <div class="mb-6 flex items-center gap-3">
+                <h2
+                  class="text-xl font-bold tracking-tight text-neutral-900 md:text-2xl dark:text-white"
+                >
+                  {{ t('podcast.programList') }}
+                </h2>
+                <div class="h-1.5 w-1.5 rounded-full bg-primary" />
+              </div>
+
+              <program-list
+                :programs="podcastStore.currentPrograms"
+                :loading="podcastStore.isLoading"
+              />
+
+              <!-- Loading state for pagination -->
+              <div v-if="podcastStore.isLoading" class="mt-8 flex justify-center">
+                <n-spin size="small" />
+              </div>
+            </section>
+          </div>
+        </n-spin>
+      </div>
+    </n-scrollbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NScrollbar, NSpin, useMessage } from 'naive-ui';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import { getDjProgram } from '@/api/podcast';
+import ProgramList from '@/components/podcast/ProgramList.vue';
+import { usePlayerStore, usePlaylistStore, usePodcastStore, useUserStore } from '@/store';
+import type { SongResult } from '@/types/music';
+import { formatNumber, getImgUrl } from '@/utils';
+import { mapDjProgramToSongResult } from '@/utils/podcastUtils';
+
+defineOptions({
+  name: 'PodcastRadio'
+});
+
+const { t } = useI18n();
+const route = useRoute();
+const message = useMessage();
+const podcastStore = usePodcastStore();
+const playlistStore = usePlaylistStore();
+const playerStore = usePlayerStore();
+const userStore = useUserStore();
+
+const radioId = computed(() => Number(route.params.id));
+const isSubscribed = computed(() => podcastStore.isRadioSubscribed(radioId.value));
+
+const offset = ref(0);
+const hasMore = computed(() => {
+  if (!podcastStore.currentRadio) return false;
+  return podcastStore.currentPrograms.length < podcastStore.currentRadio.programCount;
+});
+
+const handleScroll = async (e: any) => {
+  const { scrollTop, scrollHeight, clientHeight } = e.target;
+  if (scrollTop + clientHeight >= scrollHeight - 100) {
+    if (!podcastStore.isLoading && hasMore.value) {
+      offset.value += 30;
+      await podcastStore.fetchRadioPrograms(radioId.value, offset.value);
+    }
+  }
+};
+
+const handlePlayAll = async () => {
+  if (!podcastStore.currentRadio) return;
+
+  const total = podcastStore.currentRadio.programCount;
+  try {
+    message.loading(t('common.loading'));
+    const { data } = await getDjProgram(radioId.value, total);
+    const allPrograms = data.programs || [];
+
+    const songList: SongResult[] = allPrograms.map((program) => mapDjProgramToSongResult(program));
+
+    playlistStore.setPlayList(songList);
+    if (songList[0]) {
+      playerStore.setPlay(songList[0]);
+    }
+  } catch (error) {
+    console.error('获取全部节目失败:', error);
+  }
+};
+
+onMounted(async () => {
+  await podcastStore.fetchRadioDetail(radioId.value);
+  await podcastStore.fetchRadioPrograms(radioId.value);
+});
+
+onUnmounted(() => {
+  podcastStore.clearCurrentRadio();
+});
+
+const handleSubscribe = async () => {
+  if (!userStore.user) {
+    message.warning(t('history.needLogin'));
+    return;
+  }
+  if (podcastStore.currentRadio) {
+    await podcastStore.toggleSubscribe(podcastStore.currentRadio);
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.radio-detail-page {
+  position: relative;
+}
+
+/* Hero Section */
+.hero-section {
+  min-height: 200px;
+}
+
+/* Action Bar Sticky Behavior */
+.action-bar {
+  transition:
+    background-color 0.3s,
+    box-shadow 0.3s;
+}
+
+.animate-item {
+  animation: fadeInUp 0.6s ease-out;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Mobile Optimizations */
+@media (max-width: 768px) {
+  .hero-section {
+    min-height: auto;
+  }
+
+  .action-bar {
+    @apply py-2;
+  }
+}
+
+/* Button micro-interactions */
+button {
+  @apply cursor-pointer;
+}
+
+/* Hero background enhancement */
+.hero-bg {
+  z-index: 0;
+}
+</style>