diff --git a/app/admin/controller/channel/Manage.php b/app/admin/controller/channel/Manage.php
new file mode 100644
index 0000000..7d9b7a3
--- /dev/null
+++ b/app/admin/controller/channel/Manage.php
@@ -0,0 +1,89 @@
+<?php
+
+namespace app\admin\controller\channel;
+
+use Throwable;
+use app\common\controller\Backend;
+
+/**
+ * 渠道管理
+ */
+class Manage extends Backend
+{
+    /**
+     * ChannelManage模型对象
+     * @var object|null
+     * @phpstan-var \app\common\model\ChannelManage|null
+     */
+    protected ?object $model = null;
+
+    protected array|string $preExcludeFields = ['id', 'create_time', 'update_time', 'secret'];
+
+    protected array $withJoinTable = ['admin'];
+
+    protected string|array $quickSearchField = ['id'];
+
+    protected bool $autoFillAdminId = true;
+
+    public function initialize(): void
+    {
+        parent::initialize();
+        $this->model = new \app\common\model\ChannelManage();
+    }
+
+    /**
+     * 查看
+     * @throws Throwable
+     */
+    public function index(\Webman\Http\Request $request): \support\Response
+    {
+        $response = $this->initializeBackend($request);
+        if ($response !== null) {
+            return $response;
+        }
+
+        if ($request->get('select') || $request->post('select')) {
+            $this->_select();
+            return $this->success();
+        }
+
+        /**
+         * 1. withJoin 不可使用 alias 方法设置表别名，别名将自动使用关联模型名称（小写下划线命名规则）
+         * 2. 以下的别名设置了主表别名，同时便于拼接查询参数等
+         * 3. paginate 数据集可使用链式操作 each(function($item, $key) {}) 遍历处理
+         */
+        list($where, $alias, $limit, $order) = $this->queryBuilder();
+        $res = $this->model
+            ->withJoin($this->withJoinTable, $this->withJoinType)
+            ->visible(['admin' => ['username']])
+            ->alias($alias)
+            ->where($where)
+            ->order($order)
+            ->paginate($limit);
+
+        return $this->success('', [
+            'list'   => $res->items(),
+            'total'  => $res->total(),
+            'remark' => get_route_remark(),
+        ]);
+    }
+
+    /**
+     * 白名单（页面按钮规则，用于菜单规则中配置按钮权限）
+     * 实际编辑通过 edit 接口提交 ip_white 字段
+     */
+    public function whitelist(\Webman\Http\Request $request): \support\Response
+    {
+        $response = $this->initializeBackend($request);
+        if ($response !== null) {
+            return $response;
+        }
+        return $this->success();
+    }
+
+    /**
+     * add、edit、del、sortable 已由父类 Backend 实现，无需重写即可直接使用
+     * 若需重写，请确保调用 initializeBackend($request) 并传入 Request 参数
+     * 若模型有 admin_id 字段需自动填充，可设置 protected bool $autoFillAdminId = true
+     */
+}
\ No newline at end of file
diff --git a/app/common/model/ChannelManage.php b/app/common/model/ChannelManage.php
new file mode 100644
index 0000000..cd1621e
--- /dev/null
+++ b/app/common/model/ChannelManage.php
@@ -0,0 +1,84 @@
+<?php
+
+namespace app\common\model;
+
+use support\think\Model;
+
+/**
+ * ChannelManage
+ */
+class ChannelManage extends Model
+{
+    // 表名
+    protected $name = 'channel_manage';
+
+    // 自动写入时间戳字段
+    protected $autoWriteTimestamp = true;
+
+    // 字段类型转换
+    protected $type = [
+        'create_time' => 'integer',
+        'update_time' => 'integer',
+        'ip_white'    => 'json',
+    ];
+
+
+    /**
+     * 获取 IP 白名单，统一返回字符串数组格式
+     * 兼容：["127.0.0.1"]、[{"value":"127.0.0.1"}]、[{"127.0.0.1":""}]
+     */
+    public function getipWhiteAttr($value): array
+    {
+        $arr = is_array($value) ? $value : (!$value ? [] : json_decode($value, true));
+        if (!is_array($arr)) {
+            return [];
+        }
+        $result = [];
+        foreach ($arr as $item) {
+            if (is_string($item)) {
+                $result[] = $item;
+            } elseif (is_array($item)) {
+                if (isset($item['value'])) {
+                    $result[] = $item['value'];
+                } else {
+                    $key = array_key_first($item);
+                    if ($key !== null && $key !== '') {
+                        $result[] = $key;
+                    }
+                }
+            }
+        }
+        return array_values(array_filter($result));
+    }
+
+    /**
+     * 写入 IP 白名单，存储格式 ["127.0.0.1","192.168.1.1"]
+     */
+    public function setipWhiteAttr($value): array
+    {
+        $arr = is_array($value) ? $value : [];
+        $result = [];
+        foreach ($arr as $ip) {
+            $ip = is_string($ip) ? trim($ip) : '';
+            if ($ip !== '') {
+                $result[] = $ip;
+            }
+        }
+        return array_values($result);
+    }
+
+    /**
+     * 创建时自动生成密钥：strtoupper(md5(name+id))
+     */
+    protected static function onAfterInsert($model): void
+    {
+        $pk = $model->getPk();
+        $secret = strtoupper(md5($model->name . $model->$pk));
+        $model->where($pk, $model->$pk)->update(['secret' => $secret]);
+    }
+
+    public function admin(): \think\model\relation\BelongsTo
+    {
+        return $this->belongsTo(\app\admin\model\Admin::class, 'admin_id', 'id');
+    }
+}
\ No newline at end of file
diff --git a/app/common/validate/ChannelManage.php b/app/common/validate/ChannelManage.php
new file mode 100644
index 0000000..5e0b3b3
--- /dev/null
+++ b/app/common/validate/ChannelManage.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace app\common\validate;
+
+use think\Validate;
+
+class ChannelManage extends Validate
+{
+    protected $failException = true;
+
+    /**
+     * 验证规则
+     */
+    protected $rule = [
+    ];
+
+    /**
+     * 提示消息
+     */
+    protected $message = [
+    ];
+
+    /**
+     * 验证场景
+     */
+    protected $scene = [
+        'add'  => [],
+        'edit' => [],
+    ];
+
+}
diff --git a/web/src/components/table/fieldRender/ipWhiteList.vue b/web/src/components/table/fieldRender/ipWhiteList.vue
new file mode 100644
index 0000000..ef5224d
--- /dev/null
+++ b/web/src/components/table/fieldRender/ipWhiteList.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="ba-ip-white-display">
+        <template v-if="displayIps.length">
+            <div v-for="(ip, idx) in displayIps" :key="idx" class="ba-ip-white-line">{{ ip }}</div>
+        </template>
+        <span v-else>-</span>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { TableColumnCtx } from 'element-plus'
+import { computed } from 'vue'
+import { getCellValue } from '/@/components/table/index'
+
+interface Props {
+    row: TableRow
+    field: TableColumn
+    column: TableColumnCtx<TableRow>
+    index: number
+}
+
+const props = defineProps<Props>()
+
+const cellValue = getCellValue(props.row, props.field, props.column, props.index)
+
+const displayIps = computed(() => {
+    if (!cellValue || !Array.isArray(cellValue)) return []
+    return cellValue.map((item) => (typeof item === 'string' ? item : item?.value ?? '')).filter(Boolean)
+})
+</script>
+
+<style scoped lang="scss">
+.ba-ip-white-display {
+    white-space: pre-line;
+    line-height: 1.6;
+}
+.ba-ip-white-line {
+    margin: 2px 0;
+}
+</style>
diff --git a/web/src/lang/backend/en/channel/manage.ts b/web/src/lang/backend/en/channel/manage.ts
new file mode 100644
index 0000000..ff9514b
--- /dev/null
+++ b/web/src/lang/backend/en/channel/manage.ts
@@ -0,0 +1,15 @@
+export default {
+    id: 'id',
+    name: 'name',
+    ip_white: 'ip_white',
+    ip_placeholder: 'Please enter IP address',
+    whitelist: 'Whitelist',
+    title: 'title',
+    remark: 'remark',
+    admin_id: 'admin_id',
+    admin__username: 'username',
+    secret: 'secret',
+    create_time: 'create_time',
+    update_time: 'update_time',
+    'quick Search Fields': 'id',
+}
diff --git a/web/src/lang/backend/zh-cn/channel/manage.ts b/web/src/lang/backend/zh-cn/channel/manage.ts
new file mode 100644
index 0000000..d508bef
--- /dev/null
+++ b/web/src/lang/backend/zh-cn/channel/manage.ts
@@ -0,0 +1,15 @@
+export default {
+    id: 'ID',
+    name: '渠道名',
+    ip_white: 'IP白名单',
+    ip_placeholder: '请输入IP地址',
+    whitelist: '白名单',
+    title: '标题',
+    remark: '备注',
+    admin_id: '管理员',
+    admin__username: '用户名',
+    secret: '密钥',
+    create_time: '创建时间',
+    update_time: '修改时间',
+    'quick Search Fields': 'ID',
+}
diff --git a/web/src/views/backend/channel/manage/index.vue b/web/src/views/backend/channel/manage/index.vue
new file mode 100644
index 0000000..d00f750
--- /dev/null
+++ b/web/src/views/backend/channel/manage/index.vue
@@ -0,0 +1,182 @@
+<template>
+    <div class="default-main ba-table-box">
+        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />
+
+        <!-- 表格顶部菜单 -->
+        <!-- 自定义按钮请使用插槽，甚至公共搜索也可以使用具名插槽渲染，参见文档 -->
+        <TableHeader
+            :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
+            :quick-search-placeholder="t('Quick search placeholder', { fields: t('channel.manage.quick Search Fields') })"
+        ></TableHeader>
+
+        <!-- 表格 -->
+        <!-- 表格列有多种自定义渲染方式，比如自定义组件、具名插槽等，参见文档 -->
+        <!-- 要使用 el-table 组件原有的属性，直接加在 Table 标签上即可 -->
+        <Table ref="tableRef"></Table>
+
+        <!-- 表单 -->
+        <PopupForm />
+        <!-- 白名单弹窗 -->
+        <WhitelistPopup v-model:row="whitelistRow" @saved="baTable.getData()" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, provide, ref, useTemplateRef } from 'vue'
+import { useI18n } from 'vue-i18n'
+import PopupForm from './popupForm.vue'
+import WhitelistPopup from './whitelistPopup.vue'
+import { baTableApi } from '/@/api/common'
+import { defaultOptButtons } from '/@/components/table'
+import TableHeader from '/@/components/table/header/index.vue'
+import Table from '/@/components/table/index.vue'
+import baTableClass from '/@/utils/baTable'
+
+defineOptions({
+    name: 'channel/manage',
+})
+
+const { t } = useI18n()
+const tableRef = useTemplateRef('tableRef')
+const whitelistRow = ref<TableRow | null>(null)
+
+function openWhitelistDialog(row: TableRow) {
+    whitelistRow.value = row
+}
+
+const optButtons: OptButton[] = [
+    ...defaultOptButtons(['edit', 'delete']),
+    {
+        render: 'tipButton',
+        name: 'whitelist',
+        title: 'channel.manage.whitelist',
+        text: '',
+        type: 'success',
+        icon: 'fa fa-list',
+        class: 'table-row-whitelist',
+        disabledTip: false,
+        display: (_row, _field) => baTable.auth('whitelist'),
+        click: (row: TableRow) => openWhitelistDialog(row),
+    },
+]
+
+/**
+ * baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
+ */
+const baTable = new baTableClass(
+    new baTableApi('/admin/channel.Manage/'),
+    {
+        pk: 'id',
+        column: [
+            { type: 'selection', align: 'center', operator: false },
+            { label: t('channel.manage.id'), prop: 'id', align: 'center', width: 70, operator: 'RANGE', sortable: 'custom' },
+            {
+                label: t('channel.manage.name'),
+                prop: 'name',
+                align: 'center',
+                operatorPlaceholder: t('Fuzzy query'),
+                sortable: false,
+                operator: 'LIKE',
+            },
+            {
+                label: t('channel.manage.title'),
+                prop: 'title',
+                align: 'center',
+                operatorPlaceholder: t('Fuzzy query'),
+                sortable: false,
+                operator: 'LIKE',
+            },
+            {
+                label: t('channel.manage.admin__username'),
+                prop: 'admin.username',
+                align: 'center',
+                operatorPlaceholder: t('Fuzzy query'),
+                render: 'tags',
+                operator: 'LIKE',
+                comSearchRender: 'string',
+            },
+            {
+                label: t('channel.manage.secret'),
+                prop: 'secret',
+                align: 'center',
+                operatorPlaceholder: t('Fuzzy query'),
+                sortable: false,
+                operator: 'LIKE',
+            },
+            {
+                label: t('channel.manage.remark'),
+                prop: 'remark',
+                align: 'center',
+                minWidth: '100',
+                showOverflowTooltip: true,
+                operatorPlaceholder: t('Fuzzy query'),
+                sortable: false,
+                operator: 'LIKE',
+            },
+            {
+                label: t('channel.manage.ip_white'),
+                prop: 'ip_white',
+                align: 'center',
+                minWidth: '120',
+                render: 'tags',
+                operatorPlaceholder: t('Fuzzy query'),
+                sortable: false,
+                operator: 'LIKE',
+            },
+            {
+                label: t('channel.manage.create_time'),
+                prop: 'create_time',
+                align: 'center',
+                render: 'datetime',
+                operator: 'RANGE',
+                comSearchRender: 'datetime',
+                sortable: 'custom',
+                width: 160,
+                timeFormat: 'yyyy-mm-dd hh:MM:ss',
+            },
+            {
+                label: t('channel.manage.update_time'),
+                prop: 'update_time',
+                align: 'center',
+                render: 'datetime',
+                operator: 'RANGE',
+                comSearchRender: 'datetime',
+                sortable: 'custom',
+                width: 160,
+                timeFormat: 'yyyy-mm-dd hh:MM:ss',
+            },
+            { label: t('Operate'), align: 'center', width: 130, render: 'buttons', buttons: optButtons, operator: false },
+        ],
+        dblClickNotEditColumn: [undefined],
+    },
+    {
+        defaultItems: { ip_white: [] },
+        before: {
+            onSubmit: () => {
+                const items = baTable.form.items
+                if (!items) return
+                // 从 popupForm 的 ipWhiteList 同步到 form.items（避免 watch 循环）
+                const ipWhiteRef = baTable.form.extend?.ipWhiteListRef
+                if (ipWhiteRef?.value) {
+                    items.ip_white = ipWhiteRef.value.filter((ip: string) => ip && String(ip).trim() !== '')
+                } else if (Array.isArray(items.ip_white)) {
+                    items.ip_white = items.ip_white.filter((ip: string) => ip && String(ip).trim() !== '')
+                }
+            },
+        },
+    }
+)
+
+provide('baTable', baTable)
+
+onMounted(() => {
+    baTable.table.ref = tableRef.value
+    baTable.mount()
+    baTable.getData()?.then(() => {
+        baTable.initSort()
+        baTable.dragSort()
+    })
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/web/src/views/backend/channel/manage/popupForm.vue b/web/src/views/backend/channel/manage/popupForm.vue
new file mode 100644
index 0000000..c778936
--- /dev/null
+++ b/web/src/views/backend/channel/manage/popupForm.vue
@@ -0,0 +1,154 @@
+<template>
+    <!-- 对话框表单 -->
+    <!-- 建议使用 Prettier 格式化代码 -->
+    <!-- el-form 内可以混用 el-form-item、FormItem、ba-input 等输入组件 -->
+    <el-dialog
+        class="ba-operate-dialog"
+        :close-on-click-modal="false"
+        :model-value="['Add', 'Edit'].includes(baTable.form.operate!)"
+        @close="baTable.toggleForm"
+    >
+        <template #header>
+            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
+                {{ baTable.form.operate ? t(baTable.form.operate) : '' }}
+            </div>
+        </template>
+        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
+            <div
+                class="ba-operate-form"
+                :class="'ba-' + baTable.form.operate + '-form'"
+                :style="config.layout.shrink ? '' : 'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
+            >
+                <el-form
+                    v-if="!baTable.form.loading"
+                    ref="formRef"
+                    @submit.prevent=""
+                    @keyup.enter="baTable.onSubmit(formRef)"
+                    :model="baTable.form.items"
+                    :label-position="config.layout.shrink ? 'top' : 'right'"
+                    :label-width="baTable.form.labelWidth + 'px'"
+                    :rules="rules"
+                >
+                    <FormItem
+                        :label="t('channel.manage.name')"
+                        type="string"
+                        v-model="baTable.form.items!.name"
+                        prop="name"
+                        :placeholder="t('Please input field', { field: t('channel.manage.name') })"
+                    />
+                    <el-form-item :label="t('channel.manage.ip_white')" prop="ip_white">
+                        <div class="ba-ip-white-list">
+                            <div class="ba-ip-white-item" v-for="(ip, idx) in ipWhiteList" :key="idx">
+                                <el-input v-model="ipWhiteList[idx]" :placeholder="t('channel.manage.ip_placeholder')" clearable />
+                                <el-button @click="onDelIpWhite(idx)" size="small" icon="el-icon-Delete" circle />
+                            </div>
+                            <el-button v-blur class="ba-add-ip-white" @click="onAddIpWhite" icon="el-icon-Plus">{{ t('Add') }}</el-button>
+                        </div>
+                    </el-form-item>
+                    <FormItem
+                        :label="t('channel.manage.title')"
+                        type="string"
+                        v-model="baTable.form.items!.title"
+                        prop="title"
+                        :placeholder="t('Please input field', { field: t('channel.manage.title') })"
+                    />
+                    <FormItem
+                        :label="t('channel.manage.remark')"
+                        type="textarea"
+                        v-model="baTable.form.items!.remark"
+                        prop="remark"
+                        :input-attr="{ rows: 3 }"
+                        @keyup.enter.stop=""
+                        @keyup.ctrl.enter="baTable.onSubmit(formRef)"
+                        :placeholder="t('Please input field', { field: t('channel.manage.remark') })"
+                    />
+                    <FormItem
+                        :label="t('channel.manage.admin_id')"
+                        type="remoteSelect"
+                        v-model="baTable.form.items!.admin_id"
+                        prop="admin_id"
+                        :input-attr="{ pk: 'admin.id', field: 'username', remoteUrl: '/admin/auth.Admin/index' }"
+                        :placeholder="t('Please select field', { field: t('channel.manage.admin_id') })"
+                    />
+                </el-form>
+            </div>
+        </el-scrollbar>
+        <template #footer>
+            <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
+                <el-button @click="baTable.toggleForm()">{{ t('Cancel') }}</el-button>
+                <el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)" type="primary">
+                    {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? t('Save and edit next item') : t('Save') }}
+                </el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import type { FormItemRule } from 'element-plus'
+import { inject, reactive, ref, useTemplateRef, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import FormItem from '/@/components/formItem/index.vue'
+import { useConfig } from '/@/stores/config'
+import type baTableClass from '/@/utils/baTable'
+import { buildValidatorData } from '/@/utils/validate'
+
+const config = useConfig()
+const formRef = useTemplateRef('formRef')
+const baTable = inject('baTable') as baTableClass
+
+const { t } = useI18n()
+
+/** 将后端数据转为 IP 字符串数组（兼容旧格式 [{key,value}] 和新格式 [ip]） */
+function normalizeIpWhite(val: unknown): string[] {
+    if (!val || !Array.isArray(val)) return []
+    return val.map((item) => (typeof item === 'string' ? item : (item?.value ?? '')))
+}
+
+const ipWhiteList = ref<string[]>([])
+
+// 仅当表单加载时从 form.items 同步到 ipWhiteList，避免双向 watch 导致循环更新
+watch(
+    () => baTable.form.items?.ip_white,
+    (val) => {
+        ipWhiteList.value = normalizeIpWhite(val)
+    },
+    { immediate: true }
+)
+
+const onAddIpWhite = () => {
+    ipWhiteList.value.push('')
+}
+
+const onDelIpWhite = (idx: number) => {
+    ipWhiteList.value.splice(idx, 1)
+}
+
+// 将 ipWhiteList 暴露给 baTable，供提交时同步
+if (!baTable.form.extend) baTable.form.extend = {}
+baTable.form.extend.ipWhiteListRef = ipWhiteList
+const rules: Partial<Record<string, FormItemRule[]>> = reactive({
+    name: [buildValidatorData({ name: 'required', title: t('channel.manage.name') })],
+    title: [buildValidatorData({ name: 'required', title: t('channel.manage.title') })],
+    admin_id: [buildValidatorData({ name: 'required', title: t('channel.manage.admin_id') })],
+    create_time: [buildValidatorData({ name: 'date', title: t('channel.manage.create_time') })],
+    update_time: [buildValidatorData({ name: 'date', title: t('channel.manage.update_time') })],
+})
+</script>
+
+<style scoped lang="scss">
+.ba-ip-white-list {
+    .ba-ip-white-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 8px;
+        .el-input {
+            flex: 1;
+        }
+    }
+    .ba-add-ip-white {
+        margin-top: 4px;
+    }
+}
+</style>
diff --git a/web/src/views/backend/channel/manage/whitelistPopup.vue b/web/src/views/backend/channel/manage/whitelistPopup.vue
new file mode 100644
index 0000000..28e4584
--- /dev/null
+++ b/web/src/views/backend/channel/manage/whitelistPopup.vue
@@ -0,0 +1,107 @@
+<template>
+    <el-dialog
+        class="ba-operate-dialog"
+        :close-on-click-modal="false"
+        :model-value="!!row"
+        :title="t('channel.manage.whitelist')"
+        @close="close"
+    >
+        <el-scrollbar v-loading="loading" class="ba-table-form-scrollbar">
+            <div class="ba-operate-form">
+                <div class="ba-ip-white-list">
+                    <div class="ba-ip-white-item" v-for="(ip, idx) in ipWhiteList" :key="idx">
+                        <el-input v-model="ipWhiteList[idx]" :placeholder="t('channel.manage.ip_placeholder')" clearable />
+                        <el-button @click="onDelIpWhite(idx)" size="small" icon="el-icon-Delete" circle />
+                    </div>
+                    <el-button v-blur class="ba-add-ip-white" @click="onAddIpWhite" icon="el-icon-Plus">{{ t('Add') }}</el-button>
+                </div>
+            </div>
+        </el-scrollbar>
+        <template #footer>
+            <el-button @click="close">{{ t('Cancel') }}</el-button>
+            <el-button v-blur :loading="submitLoading" @click="onSave" type="primary">{{ t('Save') }}</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { baTableApi } from '/@/api/common'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+    row: TableRow | null
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:row', val: TableRow | null): void
+    (e: 'saved'): void
+}>()
+
+const api = new baTableApi('/admin/channel.Manage/')
+const loading = ref(false)
+const submitLoading = ref(false)
+
+/** 将后端数据转为 IP 字符串数组（兼容旧格式 [{key,value}] 和新格式 [ip]） */
+function normalizeIpWhite(val: unknown): string[] {
+    if (!val || !Array.isArray(val)) return []
+    return val.map((item) => (typeof item === 'string' ? item : item?.value ?? ''))
+}
+
+const ipWhiteList = ref<string[]>([])
+
+watch(
+    () => props.row,
+    (val) => {
+        ipWhiteList.value = val ? normalizeIpWhite(val.ip_white) : []
+    },
+    { immediate: true }
+)
+
+const onAddIpWhite = () => {
+    ipWhiteList.value.push('')
+}
+
+const onDelIpWhite = (idx: number) => {
+    ipWhiteList.value.splice(idx, 1)
+}
+
+const close = () => {
+    emit('update:row', null)
+}
+
+const onSave = async () => {
+    if (!props.row) return
+    const ips = ipWhiteList.value.filter((ip) => ip.trim() !== '')
+    submitLoading.value = true
+    try {
+        await api.postData('edit', {
+            id: props.row.id,
+            ip_white: ips,
+        })
+        emit('saved')
+        close()
+    } finally {
+        submitLoading.value = false
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.ba-ip-white-list {
+    .ba-ip-white-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 8px;
+        .el-input {
+            flex: 1;
+        }
+    }
+    .ba-add-ip-white {
+        margin-top: 4px;
+    }
+}
+</style>