<template>
  <div class="is-container">
    <!-- 左侧树形面板 -->
    <div class="left-panel">
      <TreePanel @node-click="handleNodeClick" />
    </div>

    <!-- 右侧功能表格 -->
    <div class="right-panel">
      <FunctionTable :selectNode="selectNode" />
    </div>
  </div>
</template>

<script setup>
import TreePanel from './TreePanel/TreePanel.vue'
import FunctionTable from './FunctionTable/FunctionTable.vue'

const selectNode = ref(null)
const handleNodeClick = (data) => {
  selectNode.value = data
}

</script>

<style scoped>
.is-container {
  display: flex;
  background-color: #f5f7fa;
  gap: 10px;
  width: 100%;
}

.left-panel {
  width: 300px;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.right-panel {
  flex: 1;
  padding: 20px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>