perf(views): 初步编写"组织架构"组件

src/components/OrganizationalStructure.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import type { DataNode } from 'ant-design-vue/es/tree';
+
+const treeStructure = ref<DataNode[]>([
+  {
+    title: '父节点 1',
+    key: '0-0',
+    children: [
+      {
+        title: '子节点 1',
+        key: '0-0-0',
+        children: [
+          { title: '孙子节点 1', key: '0-0-0-0' },
+          { title: '孙子节点 2', key: '0-0-0-1' },
+        ],
+      },
+      { title: '子节点 2', key: '0-0-1' },
+    ],
+  },
+]);
+const expandedKeys = ref<string[]>(['0-0', '0-0-0']); // 初始展开父节点
+const addMenu = () => {};
+</script>
+
+<template>
+  <div>
+    <div class="content">
+      <div class="content-text">组织架构</div>
+      <ATree
+        v-model:expanded-keys="expandedKeys"
+        :tree-data="treeStructure"
+        block-node
+        @check="addMenu"
+        class="tree-organization"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.content) {
+  .ant-tree .ant-tree-treenode {
+    margin-bottom: 6px;
+  }
+}
+
+.content-text {
+  margin-bottom: 25px;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px;
+  color: #333;
+  text-align: left;
+}
+
+.content {
+  width: 246px;
+  height: calc(100vh - 80px);
+  padding: 16px;
+  margin-right: 16px;
+  background: #fff;
+  border-radius: 16px;
+}
+</style>