From ddd495fb48cfc3982dce695926307f635cd46431 Mon Sep 17 00:00:00 2001
From: erio <asakifeng@gmail.com>
Date: Tue, 31 Mar 2026 21:21:03 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E6=B8=A0=E9=81=93=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E7=8A=B6=E6=80=81=E5=88=97=E6=94=B9=E4=B8=BA=20Toggle?=
 =?UTF-8?q?=20=E5=BC=80=E5=85=B3=EF=BC=8C=E6=94=AF=E6=8C=81=E7=9B=B4?=
 =?UTF-8?q?=E6=8E=A5=E5=90=AF=E7=94=A8/=E7=A6=81=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/admin/ChannelsView.vue | 29 ++++++++++++++---------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/frontend/src/views/admin/ChannelsView.vue b/frontend/src/views/admin/ChannelsView.vue
index 6fcb1aeb..1f2cd9f5 100644
--- a/frontend/src/views/admin/ChannelsView.vue
+++ b/frontend/src/views/admin/ChannelsView.vue
@@ -57,17 +57,11 @@
             <span class="text-sm text-gray-600 dark:text-gray-400">{{ value || '-' }}</span>
           </template>
 
-          <template #cell-status="{ value }">
-            <span
-              :class="[
-                'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
-                value === 'active'
-                  ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
-                  : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
-              ]"
-            >
-              {{ value === 'active' ? t('admin.channels.statusActive', 'Active') : t('admin.channels.statusDisabled', 'Disabled') }}
-            </span>
+          <template #cell-status="{ row }">
+            <Toggle
+              :modelValue="row.status === 'active'"
+              @update:modelValue="toggleChannelStatus(row)"
+            />
           </template>
 
           <template #cell-group_count="{ row }">
@@ -434,6 +428,7 @@ import EmptyState from '@/components/common/EmptyState.vue'
 import Select from '@/components/common/Select.vue'
 import Icon from '@/components/icons/Icon.vue'
 import PlatformIcon from '@/components/common/PlatformIcon.vue'
+import Toggle from '@/components/common/Toggle.vue'
 import PricingEntryCard from '@/components/admin/channel/PricingEntryCard.vue'
 import { getPersistedPageSize } from '@/composables/usePersistedPageSize'
 
@@ -950,6 +945,18 @@ async function handleSubmit() {
   }
 }
 
+// ── Toggle status ──
+async function toggleChannelStatus(channel: Channel) {
+  const newStatus = channel.status === 'active' ? 'disabled' : 'active'
+  try {
+    await adminAPI.channels.update(channel.id, { status: newStatus })
+    channel.status = newStatus
+  } catch (error) {
+    appStore.showError(t('admin.channels.updateError', 'Failed to update channel'))
+    console.error('Error toggling channel status:', error)
+  }
+}
+
 // ── Delete ──
 function handleDelete(channel: Channel) {
   deletingChannel.value = channel