lixinran
/
XinXiKuaiBaoYuan
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

移除左侧侧边栏和顶部header，简化界面布局 

- 移除App.vue中的Sidebar组件引用
- 删除所有页面中的移动端侧边栏按钮
- 移除所有页面的顶部header区域
- 简化布局结构，主内容区域占据全屏
- 保持所有核心功能正常工作
This commit is contained in:
lixinran 2025-10-15 13:50:44 +08:00
parent e7ea6b98c8
commit c1bb676e5c
13 changed files with 7 additions and 297 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
vue-info-reporter/src/App.vue
View File

@ -1,32 +1,12 @@
<template>
<div id="app" class="h-screen bg-gray-50 flex">
<!-- 侧边栏 -->
<Sidebar />
<div id="app" class="h-screen bg-gray-50">
<!-- 主内容区域 -->
<div class="flex-1 flex flex-col min-w-0">
<div class="flex flex-col min-w-0 h-full">
<router-view />
</div>
<!-- 报告抽屉 -->
<ReportDrawer />
<!-- 移动端遮罩层 -->
<div
v-if="mobileSidebarOpen"
class="fixed inset-0 bg-black bg-opacity-50 z-30 lg:hidden"
@click="toggleMobileSidebar"
/>
</div>
</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/stores/app'
import Sidebar from '@/components/Sidebar.vue'
import ReportDrawer from '@/components/ReportDrawer.vue'
const appStore = useAppStore()
const { mobileSidebarOpen } = storeToRefs(appStore)
const { toggleMobileSidebar } = appStore
// 不需要导入任何组件，ReportDrawer 在需要的地方单独使用
</script>

19
vue-info-reporter/src/views/Analytics.vue
View File

@ -1,25 +1,6 @@
<template>
<div class="flex-1 flex flex-col min-h-0">
<!-- 顶部导航栏 -->
<header class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<button
@click="toggleMobileSidebar"
class="lg:hidden p-2 rounded-md hover:bg-gray-100"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div>
<h1 class="text-2xl font-bold text-gray-900">数据分析</h1>
<p class="text-sm text-gray-600">查看系统运行数据和分析报告</p>
</div>
</div>
</div>
</header>
<!-- 主内容区域 -->
<main class="flex-1 p-6 overflow-auto">

40
vue-info-reporter/src/views/Home.vue
View File

@ -1,44 +1,6 @@
<template>
<div class="flex-1 flex flex-col min-h-0">
<!-- 顶部导航栏 -->
<header class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<!-- 移动端菜单按钮 -->
<button
@click="toggleMobileSidebar"
class="lg:hidden p-2 rounded-md hover:bg-gray-100"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div>
<h1 class="text-2xl font-bold text-gray-900">智能体主页</h1>
<p class="text-sm text-gray-600">智能体任务管理和报告中心</p>
</div>
</div>
<div class="flex items-center gap-4">
<!-- 快捷操作 -->
<router-link
to="/agents/info-reporter"
class="bg-primary-600 text-white px-4 py-2 rounded-lg hover:bg-primary-700 transition-colors text-sm font-medium"
>
信息快报员
</router-link>
<!-- 通知按钮 -->
<button class="p-2 rounded-full hover:bg-gray-100 relative">
<svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-5 5v-5z" />
</svg>
<span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></span>
</button>
</div>
</div>
</header>
<!-- 主内容区域 -->
<main class="flex-1 p-6 overflow-auto">
@ -203,7 +165,7 @@ import { useAppStore } from '@/stores/app'
const appStore = useAppStore()
const { runningTasks, completedTasks, reports } = storeToRefs(appStore)
const { toggleMobileSidebar, openReportDrawer, selectTask } = appStore
const { openReportDrawer, selectTask } = appStore
const getStatusText = (status: string) => {
const statusMap = {

17
vue-info-reporter/src/views/KnowledgeBase.vue
View File

@ -1,22 +1,5 @@
<template>
<div class="flex-1 flex flex-col min-h-0">
<header class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center gap-4">
<button
@click="toggleMobileSidebar"
class="lg:hidden p-2 rounded-md hover:bg-gray-100"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div>
<h1 class="text-2xl font-bold text-gray-900">知识库</h1>
<p class="text-sm text-gray-600">知识管理和检索系统</p>
</div>
</div>
</header>
<main class="flex-1 p-6 overflow-auto">
<div class="max-w-4xl mx-auto">

17
vue-info-reporter/src/views/KnowledgeCollection.vue
View File

@ -1,22 +1,5 @@
<template>
<div class="flex-1 flex flex-col min-h-0">
<header class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center gap-4">
<button
@click="toggleMobileSidebar"
class="lg:hidden p-2 rounded-md hover:bg-gray-100"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div>
<h1 class="text-2xl font-bold text-gray-900">知识采集</h1>
<p class="text-sm text-gray-600">智能信息采集和处理系统</p>
</div>
</div>
</header>
<main class="flex-1 p-6 overflow-auto">
<div class="max-w-4xl mx-auto">

19
vue-info-reporter/src/views/Personal.vue
View File

@ -1,22 +1,5 @@
<template>
<div class="flex-1 flex flex-col min-h-0">
<header class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center gap-4">
<button
@click="toggleMobileSidebar"
class="lg:hidden p-2 rounded-md hover:bg-gray-100"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div>
<h1 class="text-2xl font-bold text-gray-900">个人空间</h1>
<p class="text-sm text-gray-600">管理个人信息和偏好设置</p>
</div>
</div>
</header>
<main class="flex-1 p-6 overflow-auto">
<div class="max-w-4xl mx-auto">
@ -36,5 +19,5 @@
import { useAppStore } from '@/stores/app'
const appStore = useAppStore()
const { toggleMobileSidebar } = appStore
// const { toggleMobileSidebar } = appStore
</script>

25
vue-info-reporter/src/views/Reports.vue
View File

@ -1,29 +1,6 @@
<template>
<div class="flex-1 flex flex-col min-h-0">
<!-- 顶部导航栏 -->
<header class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<button
@click="toggleMobileSidebar"
class="lg:hidden p-2 rounded-md hover:bg-gray-100"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div>
<h1 class="text-2xl font-bold text-gray-900">报告中心</h1>
<p class="text-sm text-gray-600">查看和管理所有生成的报告</p>
</div>
</div>
<button class="bg-primary-600 text-white px-4 py-2 rounded-lg hover:bg-primary-700 transition-colors">
导出全部
</button>
</div>
</header>
<!-- 主内容区域 -->
<main class="flex-1 p-6 overflow-auto">
@ -153,7 +130,7 @@ import ReportsIcon from '@/components/icons/ReportsIcon.vue'
const appStore = useAppStore()
const { reports, tasks } = storeToRefs(appStore)
const { toggleMobileSidebar, openReportDrawer } = appStore
const { openReportDrawer } = appStore
const typeFilter = ref('')
const taskFilter = ref('')

19
vue-info-reporter/src/views/Settings.vue
View File

@ -1,25 +1,6 @@
<template>
<div class="flex-1 flex flex-col min-h-0">
<!-- 顶部导航栏 -->
<header class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<button
@click="toggleMobileSidebar"
class="lg:hidden p-2 rounded-md hover:bg-gray-100"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div>
<h1 class="text-2xl font-bold text-gray-900">设置</h1>
<p class="text-sm text-gray-600">管理系统配置和个人偏好</p>
</div>
</div>
</div>
</header>
<!-- 主内容区域 -->
<main class="flex-1 p-6 overflow-auto">

25
vue-info-reporter/src/views/Tasks.vue
View File

@ -1,29 +1,6 @@
<template>
<div class="flex-1 flex flex-col min-h-0">
<!-- 顶部导航栏 -->
<header class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<button
@click="toggleMobileSidebar"
class="lg:hidden p-2 rounded-md hover:bg-gray-100"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div>
<h1 class="text-2xl font-bold text-gray-900">任务管理</h1>
<p class="text-sm text-gray-600">管理和监控所有信息采集任务</p>
</div>
</div>
<button class="bg-primary-600 text-white px-4 py-2 rounded-lg hover:bg-primary-700 transition-colors">
新建任务
</button>
</div>
</header>
<!-- 主内容区域 -->
<main class="flex-1 p-6 overflow-auto">
@ -141,7 +118,7 @@ import TasksIcon from '@/components/icons/TasksIcon.vue'
const appStore = useAppStore()
const { tasks, runningTasks, completedTasks } = storeToRefs(appStore)
const { toggleMobileSidebar, selectTask } = appStore
const { selectTask } = appStore
const statusFilter = ref('')
const searchQuery = ref('')

17
vue-info-reporter/src/views/agents/AiAssistant.vue
View File

@ -1,22 +1,5 @@
<template>
<div class="flex-1 flex flex-col min-h-0">
<header class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center gap-4">
<button
@click="toggleMobileSidebar"
class="lg:hidden p-2 rounded-md hover:bg-gray-100"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div>
<h1 class="text-2xl font-bold text-gray-900">AI 助手</h1>
<p class="text-sm text-gray-600">智能对话助手</p>
</div>
</div>
</header>
<main class="flex-1 p-6 overflow-auto">
<div class="max-w-4xl mx-auto">

46
vue-info-reporter/src/views/agents/InfoReporter.vue
View File

@ -1,48 +1,5 @@
<template>
<div class="flex-1 flex flex-col min-h-0 bg-gray-50">
<!-- 顶部导航栏 -->
<header class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<button
@click="toggleMobileSidebar"
class="lg:hidden p-2 rounded-md hover:bg-gray-100"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h1 class="text-2xl font-bold text-gray-900">信息快报员</h1>
</div>
</div>
<div class="flex items-center gap-4">
<!-- 搜索框 -->
<div class="relative">
<input
type="text"
placeholder="AI搜索"
class="w-48 pl-8 pr-3 py-1.5 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm"
>
<svg class="w-4 h-4 text-gray-400 absolute left-2 top-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<!-- 语言切换 -->
<button class="px-2 py-1 text-xs text-gray-600 hover:bg-gray-100 rounded">EN</button>
<button class="px-2 py-1 text-xs text-gray-600 hover:bg-gray-100 rounded">王</button>
</div>
</div>
</header>
<!-- 主内容区域 -->
<main class="flex-1 p-4 overflow-hidden">
<!-- 任务列表和今日报告合并区域 -->
@ -546,9 +503,6 @@ import ReportDrawer from '../../components/ReportDrawer.vue'
// const { toggleMobileSidebar, selectTask } = appStore
// 暂时注释掉store相关功能，直接使用本地状态
const toggleMobileSidebar = () => {
console.log('切换移动端侧边栏')
}
const selectTask = (taskId: string) => {
console.log('选择任务:', taskId)

17
vue-info-reporter/src/views/agents/PptGenerator.vue
View File

@ -1,22 +1,5 @@
<template>
<div class="flex-1 flex flex-col min-h-0">
<header class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center gap-4">
<button
@click="toggleMobileSidebar"
class="lg:hidden p-2 rounded-md hover:bg-gray-100"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div>
<h1 class="text-2xl font-bold text-gray-900">PPT 生成</h1>
<p class="text-sm text-gray-600">智能演示文档生成工具</p>
</div>
</div>
</header>
<main class="flex-1 p-6 overflow-auto">
<div class="max-w-4xl mx-auto">

17
vue-info-reporter/src/views/agents/WordGenerator.vue
View File

@ -1,22 +1,5 @@
<template>
<div class="flex-1 flex flex-col min-h-0">
<header class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center gap-4">
<button
@click="toggleMobileSidebar"
class="lg:hidden p-2 rounded-md hover:bg-gray-100"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div>
<h1 class="text-2xl font-bold text-gray-900">Word 生成</h1>
<p class="text-sm text-gray-600">智能文档生成工具</p>
</div>
</div>
</header>
<main class="flex-1 p-6 overflow-auto">
<div class="max-w-4xl mx-auto">