diff --git a/src/api/system/attMacManage.js b/src/api/system/attMacManage.js
new file mode 100644
index 0000000..8271e33
--- /dev/null
+++ b/src/api/system/attMacManage.js
@@ -0,0 +1,117 @@
+import request from '@/utils/request'
+
+// 获取工程和考勤机树形数据
+export function getProjectAndMacTreeAPI() {
+    return request({
+        url: '/bmw/kqManager/getProKqjTree',
+        method: 'get',
+    })
+}
+
+// 根据考勤机编号获取人员列表
+export function getPersonListByMacNoAPI(params) {
+    return request({
+        url: '/bmw/kqManager/getWorkerByDeviceId',
+        method: 'get',
+        params,
+    })
+}
+
+// 获取所有人员列表
+export function getAllPersonListAPI(params) {
+    return request({
+        url: '/bmw/kqManager/getProDeviceWorker',
+        method: 'get',
+        params,
+    })
+}
+
+// 删除人员
+export function deletePersonAPI(data) {
+    return request({
+        url: '/bmw/kqManager/delWorkerByDevice',
+        method: 'post',
+        data,
+    })
+}
+
+// 批量删除人员
+export function batchDeletePersonAPI(ids) {
+    return request({
+        url: '/system/attMacManage/batchDeletePerson',
+        method: 'post',
+        data: { ids },
+    })
+}
+
+// 下发
+export function sendDownAPI(data) {
+    return request({
+        url: '/bmw/kqManager/pushWorkerByDevice',
+        method: 'post',
+        data,
+    })
+}
+
+// 配置
+export function configAPI(data) {
+    return request({
+        url: '/system/attMacManage/config',
+        method: 'post',
+        data,
+    })
+}
+
+// 刷新
+export function refreshAPI(macNo) {
+    return request({
+        url: '/bmw/kqManager/refreshDevice',
+        method: 'post',
+        data: { deviceCode: macNo },
+    })
+}
+
+// 重启
+export function restartAPI(macNo) {
+    return request({
+        url: '/bmw/kqManager/restartDevice',
+        method: 'post',
+        data: { deviceCode: macNo },
+    })
+}
+
+// 获取任务列表
+export function getTaskListAPI(params) {
+    return request({
+        url: '/bmw/kqManager/getTaskList',
+        method: 'get',
+        params,
+    })
+}
+
+// 删除任务
+export function deleteTaskAPI(data) {
+    return request({
+        url: '/bmw/kqManager/delTaskById',
+        method: 'post',
+        data,
+    })
+}
+
+// 获取任务历史列表
+export function getTaskHistoryListAPI(params) {
+    return request({
+        url: '/bmw/kqManager/getHisTaskList',
+        method: 'get',
+        params,
+    })
+}
+
+// 批量删除任务
+export function batchDeleteTaskAPI(data) {
+    return request({
+        url: '/bmw/kqManager/delHisTaskById',
+        method: 'post',
+        data,
+    })
+}
diff --git a/src/views/system/AttMacManage/components/leftTree.vue b/src/views/system/AttMacManage/components/leftTree.vue
new file mode 100644
index 0000000..a58516b
--- /dev/null
+++ b/src/views/system/AttMacManage/components/leftTree.vue
@@ -0,0 +1,234 @@
+<template>
+    <el-card class="tree-card" shadow="hover">
+        <div class="tree-container">
+            <div class="head-container">
+                <el-input
+                    v-model="filterText"
+                    placeholder="请输入关键字"
+                    clearable
+                    size="small"
+                    prefix-icon="el-icon-search"
+                    style="margin-bottom: 20px"
+                />
+            </div>
+            <el-tree
+                :data="treeData"
+                :props="defaultProps"
+                :expand-on-click-node="false"
+                :filter-node-method="filterNode"
+                ref="tree"
+                node-key="id"
+                default-expand-all
+                highlight-current
+                @node-click="handleNodeClick"
+            >
+                <span
+                    class="custom-tree-node"
+                    :class="getNodeClass(node.data)"
+                    slot-scope="{ node }"
+                >
+                    <span class="node-content">
+                        <span
+                            v-if="node.data.level == 2"
+                            class="status-dot"
+                            :class="getStatusDotClass(node.data)"
+                        >
+                        </span>
+                        <el-tooltip
+                            :content="node.label"
+                            placement="top"
+                            :disabled="!isTextOverflow(node.label)"
+                        >
+                            <span
+                                class="node-label"
+                                :class="getNodeLabelClass(node.data)"
+                            >
+                                {{ node.label }}
+                            </span>
+                        </el-tooltip>
+                    </span>
+                </span>
+            </el-tree>
+        </div>
+    </el-card>
+</template>
+
+<script>
+import { getProjectAndMacTreeAPI } from '@/api/system/attMacManage.js'
+
+export default {
+    name: 'LeftTree',
+    data() {
+        return {
+            filterText: '',
+            treeData: [],
+            defaultProps: {
+                children: 'children',
+                label: 'name',
+            },
+        }
+    },
+    watch: {
+        filterText(val) {
+            this.$refs.tree.filter(val)
+        },
+    },
+    created() {
+        this.getTreeData()
+    },
+    methods: {
+        // 获取树形数据
+        async getTreeData() {
+            try {
+                const res = await getProjectAndMacTreeAPI()
+                if (res.code === 200) {
+                    this.treeData = res.data || []
+                }
+            } catch (error) {
+                console.error('获取树形数据失败:', error)
+            }
+        },
+        // 树节点过滤
+        filterNode(value, data) {
+            if (!value) return true
+            return data.name.indexOf(value) !== -1
+        },
+        // 树节点点击事件
+        handleNodeClick(data) {
+            this.$emit('node-click', data)
+        },
+        // 获取节点样式类
+        getNodeClass(data) {
+            if (data.level === 2 && data.onLine === 1) {
+                return 'node-online'
+            }
+            return ''
+        },
+        // 获取状态点样式类
+        getStatusDotClass(data) {
+            if (data.level == 2) {
+                if (data.onLine == 1) {
+                    return 'status-dot-online'
+                } else {
+                    return 'status-dot-offline'
+                }
+            }
+            return ''
+        },
+
+        getNodeLabelClass(data) {
+            if (data.level == 2) {
+                if (data.onLine == 1) {
+                    return 'node-label-online'
+                } else {
+                    return 'node-label-offline'
+                }
+            }
+            return ''
+        },
+        /**
+         * 判断文本是否溢出
+         * 业务背景：当节点名称过长时，需要显示 tooltip 提示完整名称
+         * 设计决策：通过检查文本长度来判断是否需要显示 tooltip，避免短文本也显示提示
+         * @param {string} text - 节点文本内容
+         * @returns {boolean} 是否溢出
+         */
+        isTextOverflow(text) {
+            if (!text) return false
+            // 根据实际容器宽度，这里假设超过 20 个字符可能需要省略
+            // 实际项目中可以根据容器宽度动态计算
+            return text.length > 20
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.tree-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+
+    ::v-deep .el-card__body {
+        flex: 1;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        padding: 20px;
+        min-height: 0;
+    }
+
+    .card-header {
+        font-weight: 600;
+        font-size: 16px;
+    }
+}
+
+.tree-container {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    min-height: 0;
+
+    .head-container {
+        margin-bottom: 10px;
+        flex-shrink: 0;
+    }
+}
+
+::v-deep .el-tree {
+    .custom-tree-node {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 14px;
+        padding-right: 8px;
+
+        .node-content {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .status-dot {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            flex-shrink: 0;
+        }
+
+        .status-dot-online {
+            background-color: #67c23a;
+            box-shadow: 0 0 4px rgba(103, 194, 58, 0.6);
+        }
+
+        .node-label-online {
+            color: #67c23a;
+        }
+
+        .status-dot-offline {
+            background-color: #f56c6c;
+            box-shadow: 0 0 4px rgba(245, 108, 108, 0.6);
+        }
+
+        .node-label {
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            display: inline-block;
+            max-width: 100%;
+        }
+
+        &.node-online {
+            .node-label {
+                color: #67c23a;
+                font-weight: 500;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/system/AttMacManage/components/rightTable.vue b/src/views/system/AttMacManage/components/rightTable.vue
new file mode 100644
index 0000000..725fd8a
--- /dev/null
+++ b/src/views/system/AttMacManage/components/rightTable.vue
@@ -0,0 +1,833 @@
+<template>
+    <div style="height: 100%; overflow: hidden">
+        <el-card class="table-card" shadow="hover">
+            <div class="table-container">
+                <TableModel
+                    :formLabel="formLabel"
+                    :columnsList="columnsList"
+                    :request-api="requestApi"
+                    :showOperation="true"
+                    :isSelectShow="true"
+                    :sendParams="sendParams"
+                    :isIndexShow="false"
+                    ref="tableRef"
+                    @selection-change="handleSelectionChange"
+                >
+                    <template slot="btn">
+                        <el-button
+                            size="mini"
+                            type="danger"
+                            icon="el-icon-delete"
+                            :disabled="selectedData.length === 0"
+                            @click="handleBatchDelete"
+                        >
+                            批量删除
+                        </el-button>
+                        <el-button
+                            size="mini"
+                            type="primary"
+                            icon="el-icon-download"
+                            @click="handleSendDown"
+                        >
+                            下发
+                        </el-button>
+                        <el-button
+                            size="mini"
+                            type="primary"
+                            icon="el-icon-setting"
+                            @click="handleConfig"
+                        >
+                            配置
+                        </el-button>
+                        <el-button
+                            size="mini"
+                            type="success"
+                            icon="el-icon-refresh"
+                            :disabled="refreshCountdown > 0"
+                            @click="handleRefresh"
+                        >
+                            {{
+                                refreshCountdown > 0
+                                    ? `刷新(${refreshCountdown}s)`
+                                    : '刷新'
+                            }}
+                        </el-button>
+                        <el-button
+                            size="mini"
+                            type="warning"
+                            icon="el-icon-switch-button"
+                            :disabled="restartCountdown > 0"
+                            @click="handleRestart"
+                        >
+                            {{
+                                restartCountdown > 0
+                                    ? `重启(${restartCountdown}s)`
+                                    : '重启'
+                            }}
+                        </el-button>
+                    </template>
+                    <template slot="handle" slot-scope="{ data }">
+                        <el-button
+                            size="mini"
+                            type="danger"
+                            icon="el-icon-delete"
+                            @click="handleDelete(data)"
+                        >
+                            删除
+                        </el-button>
+                    </template>
+
+                    <template slot="faceImage" slot-scope="{ data }">
+                        <ImagePreview
+                            :src="data.faceImage"
+                            height="60px"
+                            width="60px"
+                        />
+                    </template>
+
+                    <template slot="isOnDataBase" slot-scope="{ data }">
+                        <el-tag
+                            v-if="data.isOnDataBase == 1"
+                            size="mini"
+                            type="success"
+                        >
+                            在库
+                        </el-tag>
+                        <el-tag
+                            v-if="data.isOnDataBase == 0"
+                            size="mini"
+                            type="danger"
+                        >
+                            不在库
+                        </el-tag>
+                    </template>
+                </TableModel>
+            </div>
+        </el-card>
+
+        <!-- 下发弹框 -->
+        <DialogModel
+            :dialogConfig="sendDownDialogConfig"
+            @closeDialogOuter="handleCloseSendDownDialog"
+        >
+            <template slot="outerContent">
+                <el-form
+                    ref="sendDownFormRef"
+                    :model="sendDownFormData"
+                    :rules="sendDownFormRules"
+                    label-width="120px"
+                >
+                    <el-form-item
+                        :label="
+                            sendDownFormData.allSelect ? '取消全选' : '全选'
+                        "
+                    >
+                        <el-checkbox
+                            v-model="allSelect"
+                            @change="handleAllSelectChange"
+                        >
+                            {{ `${allSelect ? '取消全选' : '全选'}` }}
+                        </el-checkbox>
+                    </el-form-item>
+                    <el-form-item label="未下发人员：" prop="unSendPersonIds">
+                        <el-checkbox-group
+                            v-model="sendDownFormData.unSendPersonIds"
+                            @change="handleUnSendPersonChange"
+                        >
+                            <el-checkbox
+                                :key="item.id"
+                                :label="item.id"
+                                v-for="item in unSendPersonList"
+                            >
+                                {{ item.name }}
+                            </el-checkbox>
+                        </el-checkbox-group>
+                    </el-form-item>
+                    <el-form-item label="已下发人员：" prop="sentPersonIds">
+                        <el-checkbox-group
+                            v-model="sendDownFormData.sentPersonIds"
+                            @change="handleSentPersonChange"
+                        >
+                            <el-checkbox
+                                :key="item.id"
+                                :label="item.id"
+                                v-for="item in sentPersonList"
+                            >
+                                {{ item.name }}
+                            </el-checkbox>
+                        </el-checkbox-group>
+                    </el-form-item>
+                </el-form>
+                <el-row class="dialog-footer-btn">
+                    <el-button size="medium" @click="handleCloseSendDownDialog">
+                        取消
+                    </el-button>
+                    <el-button
+                        size="medium"
+                        type="primary"
+                        @click="handleSendDownSubmit"
+                    >
+                        确定
+                    </el-button>
+                </el-row>
+            </template>
+        </DialogModel>
+
+        <!-- 配置弹框 -->
+        <DialogModel
+            :dialogConfig="configDialogConfig"
+            @closeDialogOuter="handleCloseConfigDialog"
+        >
+            <template slot="outerContent">
+                <el-form
+                    ref="configFormRef"
+                    :model="configFormData"
+                    :rules="configFormRules"
+                    label-width="120px"
+                >
+                    <el-form-item label="选择人员：" prop="workerIds">
+                        <el-select
+                            v-model="configFormData.workerIds"
+                            multiple
+                            filterable
+                            placeholder="请选择人员"
+                            style="width: 100%"
+                            :loading="personListLoading"
+                        >
+                            <el-option
+                                v-for="item in personList"
+                                :key="item.id"
+                                :label="`${item.name}(${item.idNumber})`"
+                                :value="item.id"
+                            />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="配置项：" prop="configItem">
+                        <el-input
+                            v-model="configFormData.configItem"
+                            type="textarea"
+                            :autosize="{ minRows: 4, maxRows: 8 }"
+                            placeholder="请输入配置项"
+                            clearable
+                            maxlength="500"
+                            show-word-limit
+                        />
+                    </el-form-item>
+                </el-form>
+                <el-row class="dialog-footer-btn">
+                    <el-button size="medium" @click="handleCloseConfigDialog">
+                        取消
+                    </el-button>
+                    <el-button
+                        size="medium"
+                        type="primary"
+                        @click="handleConfigSubmit"
+                    >
+                        确定
+                    </el-button>
+                </el-row>
+            </template>
+        </DialogModel>
+    </div>
+</template>
+
+<script>
+import TableModel from '@/components/TableModel'
+import DialogModel from '@/components/DialogModel'
+import {
+    getPersonListByMacNoAPI,
+    getAllPersonListAPI,
+    deletePersonAPI,
+    batchDeletePersonAPI,
+    refreshAPI,
+    restartAPI,
+    sendDownAPI,
+    configAPI,
+} from '@/api/system/attMacManage.js'
+
+export default {
+    name: 'RightTable',
+    components: {
+        TableModel,
+        DialogModel,
+    },
+    props: {
+        macNo: {
+            type: String,
+            default: '',
+        },
+        proId: {
+            type: [String, Number],
+            default: '',
+        },
+        subId: {
+            type: [String, Number],
+            default: '',
+        },
+        teamId: {
+            type: [String, Number],
+            default: '',
+        },
+    },
+    data() {
+        return {
+            // 查询表单配置
+            formLabel: [
+                {
+                    f_label: '关键字',
+                    f_model: 'keyWord',
+                    f_type: 'ipt',
+                    f_width: '180px',
+                },
+                {
+                    f_label: '人员编号',
+                    f_model: 'userId',
+                    f_type: 'ipt',
+                    f_width: '180px',
+                },
+                {
+                    f_label: '是否在库',
+                    f_model: 'isOnDataBase',
+                    f_type: 'sel',
+                    f_width: '180px',
+                    f_selList: [
+                        {
+                            label: '在库',
+                            value: '1',
+                        },
+                        {
+                            label: '不在库',
+                            value: '0',
+                        },
+                    ],
+                },
+            ],
+            // 表格列配置
+            columnsList: [
+                {
+                    t_label: '人员编号',
+                    t_props: 'userId',
+                },
+                {
+                    t_label: '姓名',
+                    t_props: 'userName',
+                },
+                {
+                    t_label: '考勤机编号',
+                    t_props: 'devCode',
+                },
+
+                {
+                    t_label: '人脸图片',
+                    t_slot: 'faceImage',
+                },
+                {
+                    t_label: '是否在库',
+                    t_slot: 'isOnDataBase',
+                },
+                {
+                    t_label: '更新时间',
+                    t_props: 'updateTime',
+                },
+            ],
+            // 下发弹框配置
+            sendDownDialogConfig: {
+                outerVisible: false,
+                outerTitle: '下发',
+                outerWidth: '50%',
+                maxHeight: '80vh',
+            },
+            // 配置弹框配置
+            configDialogConfig: {
+                outerVisible: false,
+                outerTitle: '配置',
+                outerWidth: '50%',
+                maxHeight: '80vh',
+            },
+            // 下发表单数据
+            sendDownFormData: {
+                workerIds: [],
+
+                // 未下发人员
+                unSendPersonIds: [],
+                // 已下发人员
+                sentPersonIds: [],
+            },
+            // 配置表单数据
+            configFormData: {
+                workerIds: [],
+                configItem: '',
+            },
+            // 下发表单校验规则
+            sendDownFormRules: {
+                unSendPersonIds: [
+                    {
+                        required: true,
+                        message: '请选择人员',
+                        trigger: 'change',
+                    },
+                ],
+            },
+            // 配置表单校验规则
+            configFormRules: {
+                unSendPersonList: [
+                    {
+                        required: true,
+                        message: '请选择人员',
+                        trigger: 'change',
+                    },
+                ],
+                configItem: [
+                    {
+                        required: true,
+                        message: '请输入配置项',
+                        trigger: 'blur',
+                    },
+                ],
+            },
+            // 人员列表
+            personList: [],
+            personListLoading: false,
+            allSelect: false,
+            selectedData: [],
+            // 未下发人员
+            unSendPersonList: [],
+            // 已下发人员
+            sentPersonList: [],
+            // 刷新倒计时（秒）
+            refreshCountdown: 0,
+            // 刷新倒计时定时器
+            refreshTimer: null,
+            // 重启倒计时（秒）
+            restartCountdown: 0,
+            // 重启倒计时定时器
+            restartTimer: null,
+        }
+    },
+    computed: {
+        // 根据是否有考勤机编号决定使用哪个API
+        requestApi() {
+            return this.macNo
+                ? getPersonListByMacNoAPI
+                : getPersonListByMacNoAPI
+        },
+        // 传递给表格的查询参数
+        sendParams() {
+            return {
+                deviceCode: this.macNo || '',
+                proId: this.proId || '',
+            }
+        },
+    },
+    watch: {
+        macNo: {
+            handler() {
+                // 当考勤机编号变化时，刷新表格
+                this.$nextTick(() => {
+                    if (this.$refs.tableRef) {
+                        this.$refs.tableRef.getTableList()
+                    }
+                })
+            },
+            immediate: true,
+        },
+    },
+    /**
+     * 组件销毁前清理定时器
+     * 业务背景：避免组件销毁后定时器仍在运行导致的内存泄漏
+     * 设计决策：在组件销毁前清除所有定时器
+     */
+    beforeDestroy() {
+        if (this.refreshTimer) {
+            clearInterval(this.refreshTimer)
+            this.refreshTimer = null
+        }
+        if (this.restartTimer) {
+            clearInterval(this.restartTimer)
+            this.restartTimer = null
+        }
+    },
+    methods: {
+        // 获取表格列表（供父组件调用）
+        getTableList() {
+            if (this.$refs.tableRef) {
+                this.$refs.tableRef.getTableList()
+            }
+        },
+        // 删除
+        handleDelete(row) {
+            this.$modal
+                .confirm('确定要删除该人员吗？')
+                .then(() => {
+                    deletePersonAPI({
+                        deviceCode: this.macNo,
+                        workerIds: [row.userId],
+                    })
+                        .then((res) => {
+                            if (res.code === 200) {
+                                this.$modal.msgSuccess('删除成功')
+                                // 刷新考勤机
+                                this.handleRefresh()
+                                this.getTableList()
+                            }
+                        })
+                        .catch(() => {})
+                })
+                .catch(() => {})
+        },
+        // 批量删除
+        handleBatchDelete() {
+            if (this.selectedData.length === 0) {
+                this.$modal.msgWarning('请选择要删除的数据')
+                return
+            }
+            this.$modal
+                .confirm(
+                    '确定要删除选中的 ' +
+                        this.selectedData.length +
+                        ' 条数据吗？',
+                )
+                .then(() => {
+                    const ids = this.selectedData.map((item) => item.userId)
+                    deletePersonAPI({
+                        deviceCode: this.macNo,
+                        workerIds: ids,
+                    })
+                        .then((res) => {
+                            if (res.code === 200) {
+                                this.$modal.msgSuccess('批量删除成功')
+                                this.handleRefresh()
+                                this.getTableList()
+                            }
+                        })
+                        .catch(() => {})
+                })
+                .catch(() => {})
+        },
+        // 下发
+        handleSendDown() {
+            if (!this.macNo) {
+                this.$modal.msgWarning('请先选择考勤机')
+                return
+            }
+            this.sendDownDialogConfig.outerVisible = true
+            this.resetSendDownForm()
+            this.getPersonList()
+        },
+        // 配置
+        handleConfig() {
+            if (!this.macNo) {
+                this.$modal.msgWarning('请先选择考勤机')
+                return
+            }
+            this.configDialogConfig.outerVisible = true
+            this.resetConfigForm()
+            this.getPersonList()
+        },
+        // 获取人员列表
+        async getPersonList() {
+            this.personListLoading = true
+            try {
+                const res = await getAllPersonListAPI({
+                    proId: this.proId,
+                    deviceCode: this.macNo,
+                    subId: this.subId,
+                    teamId: this.teamId,
+                })
+                if (res.code === 200) {
+                    // this.unSendPersonList = res?.data.map((item) => ({
+                    //     id: item.workerId,
+                    //     name: item.workerName,
+                    //     isSelected: false,
+                    // }))
+
+                    this.unSendPersonList = res?.data
+                        .filter((item) => item.isIssue == 0)
+                        .map((item) => ({
+                            id: item.workerId,
+                            name: item.workerName,
+                            isSelected: false,
+                        }))
+
+                    this.sentPersonList = res?.data
+                        .filter((item) => item.isIssue == 1)
+                        .map((item) => ({
+                            id: item.workerId,
+                            name: item.workerName,
+                            isSelected: false,
+                        }))
+                }
+            } catch (error) {
+                console.error('获取人员列表失败:', error)
+            } finally {
+                this.personListLoading = false
+            }
+        },
+        // 关闭下发弹框
+        handleCloseSendDownDialog() {
+            this.sendDownDialogConfig.outerVisible = false
+            this.resetSendDownForm()
+        },
+        /**
+         * 重置下发表单
+         * 业务背景：关闭弹框或重新打开时需要清空表单数据
+         * 设计决策：需要重置所有表单字段，包括未下发和已下发人员ID数组，避免 undefined 导致的错误
+         */
+        resetSendDownForm() {
+            this.sendDownFormData = {
+                workerIds: [],
+                // 未下发人员
+                unSendPersonIds: [],
+                // 已下发人员
+                sentPersonIds: [],
+            }
+            this.allSelect = false
+            if (this.$refs.sendDownFormRef) {
+                this.$refs.sendDownFormRef.resetFields()
+            }
+        },
+        /**
+         * 提交下发表单
+         * 业务背景：将选中的未下发人员下发到考勤机
+         * 设计决策：使用 unSendPersonIds 作为提交参数，因为表单绑定的是该字段
+         */
+        handleSendDownSubmit() {
+            this.$refs.sendDownFormRef.validate((valid) => {
+                if (valid) {
+                    const params = {
+                        deviceCode: this.macNo,
+                        workerIds: this.sendDownFormData.unSendPersonIds,
+                    }
+                    sendDownAPI(params)
+                        .then((res) => {
+                            if (res.code === 200) {
+                                this.$modal.msgSuccess('下发成功')
+                                this.handleCloseSendDownDialog()
+                                this.handleRefresh()
+                                this.getTableList()
+                            }
+                        })
+                        .catch(() => {})
+                }
+            })
+        },
+        // 关闭配置弹框
+        handleCloseConfigDialog() {
+            this.configDialogConfig.outerVisible = false
+            this.resetConfigForm()
+        },
+        // 重置配置表单
+        resetConfigForm() {
+            this.configFormData = {
+                workerIds: [],
+                configItem: '',
+            }
+            if (this.$refs.configFormRef) {
+                this.$refs.configFormRef.resetFields()
+            }
+        },
+        // 提交配置表单
+        handleConfigSubmit() {
+            this.$refs.configFormRef.validate((valid) => {
+                if (valid) {
+                    const params = {
+                        macNo: this.macNo,
+                        workerIds: this.configFormData.workerIds,
+                        configItem: this.configFormData.configItem,
+                    }
+                    configAPI(params)
+                        .then((res) => {
+                            if (res.code === 200) {
+                                this.$modal.msgSuccess('配置成功')
+                                this.handleCloseConfigDialog()
+                                this.getTableList()
+                                this.$emit('refresh-tree')
+                            }
+                        })
+                        .catch(() => {})
+                }
+            })
+        },
+        /**
+         * 刷新考勤机
+         * 业务背景：刷新考勤机数据，获取最新的人员信息
+         * 设计决策：刷新成功后启动10秒倒计时，防止频繁刷新对服务器造成压力
+         */
+        handleRefresh() {
+            if (!this.macNo) {
+                this.$modal.msgWarning('请先选择考勤机')
+                return
+            }
+            // 如果正在倒计时，不允许刷新
+            if (this.refreshCountdown > 0) {
+                return
+            }
+            refreshAPI(this.macNo)
+                .then((res) => {
+                    if (res.code === 200) {
+                        this.$modal.msgSuccess('刷新成功')
+                        this.getTableList()
+                        // 启动倒计时
+                        this.startRefreshCountdown()
+                    }
+                })
+                .catch(() => {})
+        },
+        /**
+         * 启动刷新倒计时
+         * 业务背景：刷新成功后需要等待10秒才能再次刷新
+         * 设计决策：使用定时器每秒更新倒计时，倒计时结束后清除定时器
+         */
+        startRefreshCountdown() {
+            // 清除之前的定时器
+            if (this.refreshTimer) {
+                clearInterval(this.refreshTimer)
+                this.refreshTimer = null
+            }
+            // 设置倒计时为10秒
+            this.refreshCountdown = 10
+            // 启动定时器，每秒减1
+            this.refreshTimer = setInterval(() => {
+                this.refreshCountdown--
+                if (this.refreshCountdown <= 0) {
+                    // 倒计时结束，清除定时器
+                    clearInterval(this.refreshTimer)
+                    this.refreshTimer = null
+                }
+            }, 1000)
+        },
+        /**
+         * 重启考勤机
+         * 业务背景：重启考勤机设备，恢复设备状态
+         * 设计决策：重启成功后启动10秒倒计时，防止频繁重启对设备造成损害
+         */
+        handleRestart() {
+            if (!this.macNo) {
+                this.$modal.msgWarning('请先选择考勤机')
+                return
+            }
+            // 如果正在倒计时，不允许重启
+            if (this.restartCountdown > 0) {
+                return
+            }
+            this.$modal
+                .confirm('确定要重启该考勤机吗？')
+                .then(() => {
+                    restartAPI(this.macNo)
+                        .then((res) => {
+                            if (res.code === 200) {
+                                this.$modal.msgSuccess('重启成功')
+                                // 启动倒计时
+                                this.startRestartCountdown()
+                            }
+                        })
+                        .catch(() => {})
+                })
+                .catch(() => {})
+        },
+        /**
+         * 启动重启倒计时
+         * 业务背景：重启成功后需要等待10秒才能再次重启
+         * 设计决策：使用定时器每秒更新倒计时，倒计时结束后清除定时器
+         */
+        startRestartCountdown() {
+            // 清除之前的定时器
+            if (this.restartTimer) {
+                clearInterval(this.restartTimer)
+                this.restartTimer = null
+            }
+            // 设置倒计时为10秒
+            this.restartCountdown = 10
+            // 启动定时器，每秒减1
+            this.restartTimer = setInterval(() => {
+                this.restartCountdown--
+                if (this.restartCountdown <= 0) {
+                    // 倒计时结束，清除定时器
+                    clearInterval(this.restartTimer)
+                    this.restartTimer = null
+                }
+            }, 1000)
+        },
+
+        // 全选
+        handleAllSelectChange(val) {
+            if (val) {
+                this.sendDownFormData.unSendPersonIds =
+                    this.unSendPersonList.map((item) => item.id)
+
+                this.sendDownFormData.sentPersonIds = this.sentPersonList.map(
+                    (item) => item.id,
+                )
+            } else {
+                this.sendDownFormData.unSendPersonIds = []
+                this.sendDownFormData.sentPersonIds = []
+            }
+        },
+        // 未下发人员选择
+        handleUnSendPersonChange(value) {
+            if (
+                value.length == this.unSendPersonList.length &&
+                this.sendDownFormData.sentPersonIds.length ==
+                    this.sentPersonList.length
+            ) {
+                this.allSelect = true
+            } else {
+                this.allSelect = false
+            }
+        },
+
+        // 已下发人员选择
+        handleSentPersonChange(value) {
+            if (
+                value.length == this.sentPersonList.length &&
+                this.sendDownFormData.unSendPersonIds.length ==
+                    this.unSendPersonList.length
+            ) {
+                this.allSelect = true
+            } else {
+                this.allSelect = false
+            }
+        },
+
+        handleSelectionChange(e) {
+            this.selectedData = e
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.table-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+
+    ::v-deep .el-card__body {
+        flex: 1;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        padding: 20px;
+        min-height: 0;
+    }
+
+    .card-header {
+        font-weight: 600;
+        font-size: 16px;
+    }
+}
+
+.table-container {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    min-height: 0;
+    height: 0; // 关键：配合 flex: 1 使用，确保可以滚动
+}
+
+.dialog-footer-btn {
+    text-align: right;
+    padding-top: 20px;
+}
+</style>
diff --git a/src/views/system/AttMacManage/components/taskHistoryList.vue b/src/views/system/AttMacManage/components/taskHistoryList.vue
new file mode 100644
index 0000000..05a460e
--- /dev/null
+++ b/src/views/system/AttMacManage/components/taskHistoryList.vue
@@ -0,0 +1,274 @@
+<template>
+    <div style="height: 100%; overflow: hidden">
+        <el-card class="table-card" shadow="hover">
+            <div class="table-container">
+                <TableModel
+                    :formLabel="formLabel"
+                    :columnsList="columnsList"
+                    :request-api="requestApi"
+                    :showOperation="false"
+                    :isSelectShow="true"
+                    :sendParams="sendParams"
+                    :isIndexShow="false"
+                    ref="tableRef"
+                    :pageSizes="[100, 200, 500]"
+                    @selection-change="handleSelectionChange"
+                >
+                    <template slot="btn">
+                        <el-button
+                            size="mini"
+                            type="danger"
+                            icon="el-icon-delete"
+                            :disabled="selectedData.length === 0"
+                            @click="handleBatchDelete"
+                        >
+                            批量删除
+                        </el-button>
+                    </template>
+                    <template slot="transStatus" slot-scope="{ data }">
+                        <el-tag
+                            size="mini"
+                            type="info"
+                            v-if="data.transStatus == 0"
+                        >
+                            待执行
+                        </el-tag>
+                        <el-tag
+                            size="mini"
+                            type="primary"
+                            v-if="data.transStatus == 1"
+                        >
+                            执行中
+                        </el-tag>
+                        <el-tag
+                            size="mini"
+                            type="success"
+                            v-if="data.transStatus == 2"
+                        >
+                            已完成
+                        </el-tag>
+                        <el-tag
+                            size="mini"
+                            type="danger"
+                            v-if="data.transStatus == 3"
+                        >
+                            任务繁忙-人员占用
+                        </el-tag>
+                        <el-tag
+                            size="mini"
+                            type="danger"
+                            v-if="
+                                data.transStatus == 4 || data.transStatus == 5
+                            "
+                        >
+                            失败
+                        </el-tag>
+                    </template>
+                </TableModel>
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<script>
+import TableModel from '@/components/TableModel'
+import {
+    getTaskHistoryListAPI,
+    batchDeleteTaskAPI,
+} from '@/api/system/attMacManage.js'
+
+export default {
+    name: 'TaskHistoryList',
+    components: {
+        TableModel,
+    },
+    props: {
+        macNo: {
+            type: String,
+            default: '',
+        },
+        proId: {
+            type: [String, Number],
+            default: '',
+        },
+    },
+    data() {
+        return {
+            // 查询表单配置
+            formLabel: [
+                {
+                    f_label: '任务编码',
+                    f_model: 'cmdCode',
+                    f_type: 'ipt',
+                    f_width: '180px',
+                },
+                {
+                    f_label: '任务名称',
+                    f_model: 'cmdName',
+                    f_type: 'ipt',
+                    f_width: '180px',
+                },
+                {
+                    f_label: '执行状态',
+                    f_model: 'transStatus',
+                    f_type: 'sel',
+                    f_width: '180px',
+                    f_selList: [
+                        {
+                            label: '待执行',
+                            value: '0',
+                        },
+                        {
+                            label: '执行中',
+                            value: '1',
+                        },
+                        {
+                            label: '已完成',
+                            value: '2',
+                        },
+                        {
+                            label: '任务繁忙-人员占用',
+                            value: '3',
+                        },
+                        {
+                            label: '失败',
+                            value: '4',
+                        },
+                    ],
+                },
+            ],
+            // 表格列配置
+            columnsList: [
+                {
+                    t_label: '任务ID',
+                    t_props: 'taskId',
+                },
+                {
+                    t_label: '任务编号',
+                    t_props: 'cmdCode',
+                },
+                {
+                    t_label: '任务名称',
+                    t_props: 'cmdName',
+                },
+                {
+                    t_label: '请求参数',
+                    t_props: 'cmdParam',
+                },
+                {
+                    t_label: '执行时间',
+                    t_props: 'exeTime',
+                },
+                {
+                    t_label: '创建时间',
+                    t_props: 'createTime',
+                },
+                {
+                    t_label: '状态',
+                    t_slot: 'transStatus',
+                },
+                {
+                    t_label: '异常内容',
+                    t_props: 'msg',
+                },
+            ],
+            selectedData: [],
+        }
+    },
+    computed: {
+        // API接口
+        requestApi() {
+            return getTaskHistoryListAPI
+        },
+        // 传递给表格的查询参数
+        sendParams() {
+            return {
+                deviceCode: this.macNo || '',
+                pageSize: 100,
+            }
+        },
+    },
+    watch: {
+        macNo: {
+            handler() {
+                // 当考勤机编号变化时，刷新表格
+                this.$nextTick(() => {
+                    if (this.$refs.tableRef) {
+                        this.$refs.tableRef.getTableList()
+                    }
+                })
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        // 获取表格列表（供父组件调用）
+        getTableList() {
+            if (this.$refs.tableRef) {
+                this.$refs.tableRef.getTableList()
+            }
+        },
+
+        handleSelectionChange(val) {
+            this.selectedData = val
+        },
+        handleBatchDelete() {
+            if (this.selectedData.length === 0) {
+                this.$modal.msgWarning('请选择要删除的数据')
+                return
+            }
+            this.$modal
+                .confirm(
+                    '确定要删除选中的 ' +
+                        this.selectedData.length +
+                        ' 条数据吗？',
+                )
+                .then(() => {
+                    const ids = this.selectedData.map((item) => item.taskId)
+                    batchDeleteTaskAPI({
+                        taskId: ids.join(','),
+                    })
+                        .then((res) => {
+                            if (res.code === 200) {
+                                this.$modal.msgSuccess('批量删除成功')
+                                this.$refs.tableRef.getTableList()
+                            }
+                        })
+                        .catch(() => {})
+                })
+                .catch(() => {})
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.table-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+
+    ::v-deep .el-card__body {
+        flex: 1;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        padding: 20px;
+        min-height: 0;
+    }
+
+    .card-header {
+        font-weight: 600;
+        font-size: 16px;
+    }
+}
+
+.table-container {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    min-height: 0;
+    height: 0; // 关键：配合 flex: 1 使用，确保可以滚动
+}
+</style>
diff --git a/src/views/system/AttMacManage/components/taskList.vue b/src/views/system/AttMacManage/components/taskList.vue
new file mode 100644
index 0000000..8f46f2e
--- /dev/null
+++ b/src/views/system/AttMacManage/components/taskList.vue
@@ -0,0 +1,271 @@
+<template>
+    <div style="height: 100%; overflow: hidden">
+        <el-card class="table-card" shadow="hover">
+            <div class="table-container">
+                <TableModel
+                    :formLabel="formLabel"
+                    :columnsList="columnsList"
+                    :request-api="requestApi"
+                    :showOperation="false"
+                    :isSelectShow="true"
+                    :isIndexShow="false"
+                    :sendParams="sendParams"
+                    :pageSizes="[100, 200, 500]"
+                    ref="tableRef"
+                    @selection-change="handleSelectionChange"
+                >
+                    <template slot="btn">
+                        <el-button
+                            size="mini"
+                            type="danger"
+                            icon="el-icon-delete"
+                            :disabled="selectedData.length === 0"
+                            @click="handleBatchDelete"
+                        >
+                            批量删除
+                        </el-button>
+                    </template>
+                    <template slot="transStatus" slot-scope="{ data }">
+                        <el-tag
+                            size="mini"
+                            type="info"
+                            v-if="data.transStatus == 0"
+                        >
+                            待执行
+                        </el-tag>
+                        <el-tag
+                            size="mini"
+                            type="primary"
+                            v-if="data.transStatus == 1"
+                        >
+                            执行中
+                        </el-tag>
+                        <el-tag
+                            size="mini"
+                            type="success"
+                            v-if="data.transStatus == 2"
+                        >
+                            已完成
+                        </el-tag>
+                        <el-tag
+                            size="mini"
+                            type="danger"
+                            v-if="data.transStatus == 3"
+                        >
+                            任务繁忙-人员占用
+                        </el-tag>
+                        <el-tag
+                            size="mini"
+                            type="danger"
+                            v-if="
+                                data.transStatus == 4 || data.transStatus == 5
+                            "
+                        >
+                            失败
+                        </el-tag>
+                    </template>
+                </TableModel>
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<script>
+import TableModel from '@/components/TableModel'
+import { getTaskListAPI, deleteTaskAPI } from '@/api/system/attMacManage.js'
+
+export default {
+    name: 'TaskHistoryList',
+    components: {
+        TableModel,
+    },
+    props: {
+        macNo: {
+            type: String,
+            default: '',
+        },
+        proId: {
+            type: [String, Number],
+            default: '',
+        },
+    },
+    data() {
+        return {
+            // 查询表单配置
+            formLabel: [
+                {
+                    f_label: '任务编码',
+                    f_model: 'cmdCode',
+                    f_type: 'ipt',
+                    f_width: '180px',
+                },
+                {
+                    f_label: '任务名称',
+                    f_model: 'cmdName',
+                    f_type: 'ipt',
+                    f_width: '180px',
+                },
+                {
+                    f_label: '执行状态',
+                    f_model: 'transStatus',
+                    f_type: 'sel',
+                    f_width: '180px',
+                    f_selList: [
+                        {
+                            label: '待执行',
+                            value: '0',
+                        },
+                        {
+                            label: '执行中',
+                            value: '1',
+                        },
+                        {
+                            label: '已完成',
+                            value: '2',
+                        },
+                        {
+                            label: '任务繁忙-人员占用',
+                            value: '3',
+                        },
+                        {
+                            label: '失败',
+                            value: '4',
+                        },
+                    ],
+                },
+            ],
+            // 表格列配置
+            columnsList: [
+                {
+                    t_label: '任务ID',
+                    t_props: 'taskId',
+                },
+                {
+                    t_label: '任务编号',
+                    t_props: 'cmdCode',
+                },
+                {
+                    t_label: '任务名称',
+                    t_props: 'cmdName',
+                },
+                {
+                    t_label: '请求参数',
+                    t_props: 'cmdParam',
+                },
+                {
+                    t_label: '执行时间',
+                    t_props: 'exeTime',
+                },
+                {
+                    t_label: '创建时间',
+                    t_props: 'createTime',
+                },
+                {
+                    t_label: '状态',
+                    t_slot: 'transStatus',
+                },
+                {
+                    t_label: '异常内容',
+                    t_props: 'msg',
+                },
+            ],
+            selectedData: [],
+        }
+    },
+    computed: {
+        // API接口
+        requestApi() {
+            return getTaskListAPI
+        },
+        // 传递给表格的查询参数
+        sendParams() {
+            return {
+                deviceCode: this.macNo || '',
+                pageSize: 100,
+            }
+        },
+    },
+    watch: {
+        macNo: {
+            handler() {
+                // 当考勤机编号变化时，刷新表格
+                this.$nextTick(() => {
+                    if (this.$refs.tableRef) {
+                        this.$refs.tableRef.getTableList()
+                    }
+                })
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        // 获取表格列表（供父组件调用）
+        getTableList() {
+            if (this.$refs.tableRef) {
+                this.$refs.tableRef.getTableList()
+            }
+        },
+        handleSelectionChange(val) {
+            this.selectedData = val
+        },
+        handleBatchDelete() {
+            // console.log(this.selectedData)
+            if (this.selectedData.length === 0) {
+                this.$modal.msgWarning('请选择要删除的数据')
+                return
+            }
+            this.$modal
+                .confirm(
+                    '确定要删除选中的 ' +
+                        this.selectedData.length +
+                        ' 条数据吗？',
+                )
+                .then(() => {
+                    const ids = this.selectedData.map((item) => item.taskId)
+                    deleteTaskAPI({
+                        taskId: ids.join(','),
+                    })
+                        .then((res) => {
+                            if (res.code === 200) {
+                                this.$modal.msgSuccess('批量删除成功')
+                                this.$refs.tableRef.getTableList()
+                            }
+                        })
+                        .catch(() => {})
+                })
+                .catch(() => {})
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.table-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+
+    ::v-deep .el-card__body {
+        flex: 1;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        padding: 20px;
+        min-height: 0;
+    }
+
+    .card-header {
+        font-weight: 600;
+        font-size: 16px;
+    }
+}
+
+.table-container {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    min-height: 0;
+    height: 0; // 关键：配合 flex: 1 使用，确保可以滚动
+}
+</style>
diff --git a/src/views/system/AttMacManage/index.vue b/src/views/system/AttMacManage/index.vue
new file mode 100644
index 0000000..475a8e4
--- /dev/null
+++ b/src/views/system/AttMacManage/index.vue
@@ -0,0 +1,228 @@
+<template>
+    <div class="app-container">
+        <el-row :gutter="10">
+            <!-- 左侧树形组件 -->
+            <el-col :span="6" :xs="24">
+                <leftTree ref="leftTreeRef" @node-click="handleNodeClick" />
+            </el-col>
+            <!-- 右侧表格组件 -->
+            <el-col :span="18" :xs="24">
+                <div class="right-content">
+                    <!-- 切换按钮 -->
+                    <div class="tab-switch">
+                        <div class="tab-switch-left">
+                            <el-radio-group v-model="activeTab" size="medium">
+                                <el-radio-button label="person"
+                                    >人员列表</el-radio-button
+                                >
+                                <el-radio-button label="task"
+                                    >任务列表</el-radio-button
+                                >
+                                <el-radio-button label="taskHistory"
+                                    >任务历史</el-radio-button
+                                >
+                            </el-radio-group>
+                        </div>
+                        <div class="tab-switch-right">
+                            <div class="selected-node-info">
+                                <i class="el-icon-location-outline"></i>
+                                <span class="label">当前节点：</span>
+                                <span class="value">{{
+                                    selectedNodeName || '未选择'
+                                }}</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="right-content-table">
+                        <component
+                            :is="currentComponent"
+                            ref="currentTableRef"
+                            :mac-no="selectedMacNo"
+                            :pro-id="selectedProId"
+                            :sub-id="selectedSubId"
+                            :team-id="selectedTeamId"
+                            @refresh-tree="handleRefreshTree"
+                        />
+                    </div>
+                </div>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script>
+import leftTree from './components/leftTree.vue'
+import rightTable from './components/rightTable.vue'
+import taskList from './components/taskList.vue'
+import taskHistoryList from './components/taskHistoryList.vue'
+
+export default {
+    name: 'AttMacManage',
+    components: {
+        leftTree,
+        rightTable,
+        taskList,
+        taskHistoryList,
+    },
+    data() {
+        return {
+            selectedMacNo: '', // 选中的考勤机编号
+            selectedProId: '', // 选中的工程id
+            selectedSubId: '', // 选中的分包id
+            selectedTeamId: '', // 选中的班组id
+            selectedNodeName: '', // 选中的节点名称
+            activeTab: 'person', // 当前激活的标签页
+        }
+    },
+    computed: {
+        // 当前组件名称
+        currentComponent() {
+            const componentMap = {
+                person: 'rightTable',
+                task: 'taskList',
+                taskHistory: 'taskHistoryList',
+            }
+            return componentMap[this.activeTab] || 'rightTable'
+        },
+    },
+    methods: {
+        // 树节点点击事件
+        handleNodeClick(data) {
+            console.log('data选择的节点', data)
+
+            this.selectedMacNo = data.id
+            this.selectedProId = data.proId
+            this.selectedSubId = data.subId
+            this.selectedTeamId = data.teamId
+
+            this.selectedNodeName = data.name
+            // if (data.level === 2) {
+            //     // 二级节点（考勤机）
+            //     this.selectedMacNo = data.id
+            // } else {
+            //     // 一级节点（工程）或根节点，显示所有人员
+            //     this.selectedMacNo = ''
+            // }
+            // 刷新右侧表格
+            this.$nextTick(() => {
+                this.refreshCurrentTable()
+            })
+        },
+        // 刷新当前表格
+        refreshCurrentTable() {
+            const ref = this.$refs.currentTableRef
+            if (ref && ref.getTableList) {
+                ref.getTableList()
+            }
+        },
+        // 标签页切换
+        handleTabChange(val) {
+            console.log('val', val)
+            // 切换标签页后刷新当前表格
+            // this.$nextTick(() => {
+            //     this.refreshCurrentTable()
+            // })
+        },
+        // 刷新左侧树
+        handleRefreshTree() {
+            if (this.$refs.leftTreeRef) {
+                this.$refs.leftTreeRef.getTreeData()
+            }
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.app-container {
+    // height: calc(100vh - 120px);
+    display: flex;
+    flex-direction: column;
+}
+
+::v-deep .el-row {
+    flex: 1;
+    display: flex;
+    min-height: 0;
+}
+
+::v-deep .el-col {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.right-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
+.tab-switch {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+    margin-bottom: 10px;
+    padding: 12px 20px;
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+}
+
+.tab-switch-left {
+    flex: 1;
+}
+
+.tab-switch-right {
+    margin-left: 20px;
+    flex-shrink: 0;
+}
+
+.selected-node-info {
+    display: flex;
+    align-items: center;
+    padding: 6px 16px;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    border-radius: 20px;
+    font-size: 14px;
+    color: #606266;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+    i {
+        font-size: 16px;
+        color: #409eff;
+        margin-right: 6px;
+    }
+
+    .label {
+        color: #909399;
+        margin-right: 4px;
+        font-weight: 500;
+    }
+
+    .value {
+        color: #303133;
+        font-weight: 600;
+        max-width: 200px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+.right-content-table {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+::v-deep .el-radio-group {
+    .el-radio-button__inner {
+        padding: 10px 20px;
+    }
+}
+</style>