From b4ef6600c41dc51e9374981eb658f0c0889bad2b Mon Sep 17 00:00:00 2001
From: Frost-ZX <frost-zx@foxmail.com>
Date: Sun, 1 Sep 2024 01:10:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E7=BD=91=E5=9D=80?=
 =?UTF-8?q?=E5=AF=BC=E8=88=AA=E6=A8=A1=E5=9D=97=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/js/nav-links.js    |  48 ++++++++++
 src/views/NavView/NavView.vue | 159 +++++++++++++++++++++++++++++++++-
 2 files changed, 204 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/js/nav-links.js

diff --git a/src/assets/js/nav-links.js b/src/assets/js/nav-links.js
new file mode 100644
index 0000000..481d20e
--- /dev/null
+++ b/src/assets/js/nav-links.js
@@ -0,0 +1,48 @@
+/** 处理导航链接列表 */
+export function formatNavLinks() {
+
+  /** @type {NavLinkItem[]} */
+  let list0 = JSON.parse(JSON.stringify(window['NAV_LINK_LIST']));
+
+  /** @type {NavLinkItem[]} */
+  let list1 = [];
+
+  let index = 0;
+
+  (function fn(treeData, target) {
+    for (let i = 0; i < treeData.length; i++) {
+
+      let {
+        title, children, date, desc,
+        icon, isInvalid, showOnly, url,
+      } = treeData[i];
+
+      /** @type {NavLinkItem} */
+      let data = {
+        title: (typeof title === 'string' ? title : ''),
+        children: [],
+        date: (typeof date === 'string' ? date : ''),
+        desc: (typeof desc === 'string' ? desc : ''),
+        icon: (typeof icon === 'string' ? icon : ''),
+        isInvalid: (typeof isInvalid === 'boolean' ? isInvalid : false),
+        showOnly: (typeof showOnly === 'boolean' ? showOnly : false),
+        url: (typeof url === 'string' ? url : ''),
+        _key: `item_${++index}`,
+      };
+
+      // 添加项
+      target && target.push(data);
+
+      // 递归处理
+      if (children) {
+        fn(children, data.children);
+      } else {
+        data.children = null;
+      }
+
+    }
+  })(list0, list1);
+
+  return list1;
+
+}
diff --git a/src/views/NavView/NavView.vue b/src/views/NavView/NavView.vue
index 3982c8a..f61eba8 100644
--- a/src/views/NavView/NavView.vue
+++ b/src/views/NavView/NavView.vue
@@ -1,18 +1,171 @@
 <template>
-  <div class="nav-view">
+  <div class="nav-view flex-col">
     <div class="app-view-header">
       <span>{{ NAV_MODULE_TITLE }}</span>
     </div>
-    <div class="app-view-content is-transparent">
+    <div class="app-view-content">
+      <n-layout class="page-layout" :has-sider="true">
+        <n-layout-sider
+          class="left-aside"
+          collapse-mode="width"
+          show-trigger="bar"
+          :bordered="true"
+          :collapsed="isCollapsed"
+          :collapsed-width="64"
+          :native-scrollbar="false"
+          :width="240"
+          @collapse="isCollapsed = true"
+          @expand="isCollapsed = false"
+        >
+          <n-menu
+            v-model:value="navLinksTitle"
+            mode="vertical"
+            :collapsed="isCollapsed"
+            :collapsed-icon-size="24"
+            :collapsed-width="64"
+            :icon-size="24"
+            :indent="24"
+            :options="navLinksCategory"
+            :on-update:value="handleSelectCategory"
+          />
+        </n-layout-sider>
+        <n-layout class="right-content">
+          <div class="tree-data">
+            <n-tree
+              children-field="children"
+              key-field="_key"
+              label-field="title"
+              :block-line="true"
+              :data="navLinksCurr"
+              :render-label="renderTreeLabel"
+            />
+          </div>
+        </n-layout>
+      </n-layout>
     </div>
   </div>
 </template>
 
-<script setup>
+<script lang="jsx" setup>
+import {
+  NLayout, NLayoutSider, NMenu, NTree,
+} from 'naive-ui';
+
+import {
+  shallowRef, onBeforeMount,
+} from 'vue';
+
 import {
   NAV_MODULE_TITLE,
 } from '@/config/modules';
+
+import {
+  formatNavLinks,
+} from '@/assets/js/nav-links';
+
+/** 分类列表是否折叠 */
+const isCollapsed = shallowRef(false);
+
+/** 完整的链接列表 */
+const navLinksAll = formatNavLinks();
+
+/**
+ * @desc 链接分类列表
+ * @type { import('naive-ui').MenuOption[] }
+ */
+const navLinksCategory = navLinksAll.map((item) => {
+  return {
+    icon: () => <span class={item.icon}></span>,
+    key: item.title,
+    label: item.title,
+    _data: item,
+  };
+});
+
+/**
+ * @desc 当前显示的链接列表
+ * @type {VueRef<NavLinkItem[]>}
+ */
+const navLinksCurr = shallowRef([]);
+
+/** 当前显示的链接分类标题 */
+const navLinksTitle = shallowRef('');
+
+/**
+ * @description 切换链接列表
+ * @param {NavLinkItem} [data] 链接分类信息
+ */
+function changeList(data = null) {
+
+  let useData = data || navLinksAll[0] || null;
+
+  navLinksCurr.value = useData ? useData.children : [];
+  navLinksTitle.value = useData ? useData.title : '';
+
+}
+
+/**
+ * @description 处理选择链接分类
+ * @param {string}      key
+ * @param {NavLinkItem} item
+ */
+function handleSelectCategory(key, item) {
+  changeList(item._data);
+}
+
+/**
+ * @description 树形数据节点内容渲染函数
+ * @param {object}      info
+ * @param {NavLinkItem} info.option
+ */
+function renderTreeLabel(info) {
+  return info.option.title;
+}
+
+onBeforeMount(() => {
+  changeList(null);
+});
 </script>
 
 <style lang="less" scoped>
+.page-layout {
+  width: 100%;
+  height: 100%;
+}
+
+.left-aside {
+  :deep(.n-menu-item-content__icon) {
+    color: var(--color-text-2);
+  }
+
+  :deep(.n-menu-item-content-header) {
+    color: var(--color-text-2);
+  }
+}
+
+.right-content {
+  width: 0;
+  height: 100%;
+
+  > div {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.tree-data {
+  padding: 16px;
+  width: 100%;
+  height: 100%;
+
+  :deep(.n-tree-node) {
+    align-items: center;
+  }
+
+  :deep(.n-tree-node-content__text) {
+    display: flex;
+    align-items: center;
+    height: 32px;
+  }
+}
 </style>