主页面的设计和分目录的跳转

在数字化法律服务领域，设计一个直观且功能强大的用户界面至关重要。本文将介绍一个基于 Vue.js 的法律助手前端实现方案，重点探讨其导航系统与主内容区域布局。

一、整体架构
该法律助手界面采用经典的左右分栏布局。左侧为导航栏，右侧为主内容区域。这种设计在信息密集型应用中十分常见，它允许用户在不同功能模块间快速切换，同时保持对核心内容的关注。

 <!-- 主内容区域 -->
    <div class="main-content">
      <div class="header">
        <div class="history">
          <i class="icon-history"></i>
          <span>历史记录</span>
        </div>
      </div>

二、左侧导航栏设计
左侧导航栏宽 200px，背景为白色，右侧有浅灰色边框。它包含以下元素：
顶部 Logo 区域 ：显示法律助手图标及名称，采用 flex 布局实现水平垂直居中。
导航项列表 ：使用 v-for 指令循环渲染导航项，包含案件分析、案件管理、法律文书、法律检索、智能摘要五个模块，每个导航项配有对应图标。
用户信息区域 ：暂未实现登录功能，当前展示为固定用户信息。
导航项的激活状态通过 activeNav 数据属性控制，点击导航项时更新 activeNav 值，并根据路由路径动态添加 active 类名。

data() {
  return {
    activeNav: 'search',
    navItems: [
      { key: 'analysis', label: '案件分析', icon: 'icon-analysis', path: 'analysis' },
      { key: 'management', label: '案件管理', icon: 'icon-management', path: 'management' },
      { key: 'documents', label: '法律文书', icon: 'icon-documents', path: 'documents' },
      { key: 'search', label: '法律检索', icon: 'icon-search', path: 'search' },
      { key: 'summary', label: '智能摘要', icon: 'icon-summary', path: 'summary' },
    ],
  };
},
methods: {
  changeNav(key) {
    this.activeNav = key;
    if (this.$route.path !== `/front/${key}`) {
      this.$router.push({ name: key.charAt(0).toUpperCase() + key.slice(1) })
    }
  },
},
watch: {
  '$route.path': {
    immediate: true,
    handler(newPath) {
      const path = newPath.split('/').pop();
      this.activeNav = path;
    },
  },
},

三、主内容区域布局
主内容区域占据剩余屏幕宽度，内边距为 20px，采用溢出自动滚动。
（一）顶部历史记录栏
还没设计完成
（二）动态视图区域
使用 Vue Router 的 router-view 组件实现动态内容加载，根据当前路由显示对应组件。通过 :key="$route.path" 确保路由变化时组件能正确重新渲染。

<router-view :key="$route.path"></router-view>

（三）个人登录设置（左下角）
还未设计成功
四、界面交互细节
通过 CSS 设置鼠标悬停时背景色变化，提供视觉反馈。当前激活的导航项采用浅蓝色背景及文字颜色，与其他项形成明显区分。

.nav-item:hover {
  background-color: #f5f5f5;
}
.nav-item.active {
  background-color: #e8f4ff;
  color: #1890ff;
}

五.默认状态下的主页面

在router界面中我们添加redirect: '/front/analysis', // 添加默认重定向代码可以使登录后已立即展示analysis页面。

最后是各个页面的展示

analysis页面：

manager页面：

documents页面：

search页面：

summary页面：