8 changed files with 437 additions and 217 deletions
--- a/src/components/CluesPage.vue
+++ b/src/components/CluesPage.vue
@ -0,0 +1,264 @@
+<template>
+	<el-container style="height:100%">
+		<el-header class = 'containerHead'>
+			<HeaderPage :pageTitle></HeaderPage>
+		</el-header>
+		<el-main class ='container_Tools_Main'>
+			<!-- <el-main class = 'container123'> -->
+			<el-header class ='containerTools'>
+				<el-button class = 'btnDelete'>
+					<el-icon><Delete /></el-icon>
+				</el-button>
+				<el-button>
+					<el-icon><Search /></el-icon>
+				</el-button>
+				<el-button>
+					<el-icon><More /></el-icon>
+				</el-button>
+			</el-header>
+			<el-main class = 'containerMain'>
+				<el-table class = 'containerTable' :data="formattedTableData" height="100%" style="width: 100%">
+                    <el-table-column type="selection" width="55" />
+                    <!-- 手动添加ID列 -->
+                    <!-- <el-table-column prop="id" label="ID" width="180" /> -->
+
+                    <!-- 动态生成其他列 -->
+                    <el-table-column 
+                        v-for="(column, index) in cols" 
+                        :key="index" 
+                        :prop="column.prop" 
+                        :label="column.label" 
+                    />
+                    <el-table-column>
+                        <template #header>
+                            <!-- <el-input v-model="search" size="small" placeholder="Type to search" /> -->
+                        </template>
+                        <template #default="scope">
+                            <!-- 使用插槽将数据传入到方法watchClue中 -->
+                            <el-button class = 'btnItemDelete' size="small" @click="deleteClue(scope.row)"> 删除 </el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+			</el-main>
+			<!-- </el-main> -->
+		</el-main>
+	</el-container>
+</template>
+
+<script>
+import HeaderPage from "@/views/HeaderPage.vue"
+
+export default{
+	components:{
+		HeaderPage
+	},
+    name:'CluesDetails',
+    data(){
+        // 接收传入的id
+        const clueId = this.$route.params.id;
+        console.log("接收到的线索库ID：", clueId)
+
+        const item = {
+            date: '2016-05-06',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+        };
+        return {
+			// 显示表头
+			pageTitle: "test_线索库名称",
+            // 模拟数据
+            tableData: Array(18).fill(item),
+            // 将id存在data中，方便后续使用
+            clueId,
+
+            // 存放所有列名 clueCols: [{id:'',name:''},{},{}...]
+            // clueCols:[],
+            // 某一线索库的数据 clueData: [{id:'', col_1:'',col_2:'',..},{},{}...]
+            // clueData:[]
+
+            // 模拟数据
+            clueCols:[
+                {
+                    col_id:'1',
+                    col_name:'fsd'
+                },
+                {
+                    col_id:'2',
+                    col_name:'grw'
+                },
+                {
+                    col_id:'3',
+                    col_name:'vsf'
+                },
+                {
+                    col_id:'4',
+                    col_name:'hfd'
+                }
+            ],
+            clueData:[
+                {
+                    col_id:'1',
+                    col_1:'1534',
+                    col_2:'681351',
+                    col_3:'03512',
+                    col_4:'867615'
+                },
+                {
+                    col_id:'2',
+                    col_1:'252',
+                    col_2:'82',
+                    col_3:'2454',
+                    col_4:'5455'
+                },
+                {
+                    col_id:'3',
+                    col_1:'212',
+                    col_2:'421',
+                    col_3:'120',
+                    col_4:'540'
+                }
+            ]
+        }
+    },
+    methods:{
+        // 获取所有列名
+        getClueCols(){
+            this.$axios.post('http://localhost:8000/showClueCol/', {table_id:this.clueId}).then(response=>{
+                this.clueCols = response.data;
+            })
+        },
+        // 获取某一线索库数据
+        getClueData(){
+            this.$axios.post('http://localhost:8000/showClue/',{table_id:this.clueId}).then(response=>{
+                this.clueData = response.data;
+            })
+        },
+        mergeCols(){
+            // 创建一个映射表，便于查找列名
+            const colMap = this.clueCols.reduce((acc, col) => {
+                acc[col.col_id] = col.col_name;
+                return acc;
+            }, {});
+
+            // 遍历clueData的第一个元素，构造新数组
+            // 注意：这里假设所有对象的结构一致，且至少有一个元素
+            const mergedColumns = Object.keys(this.clueData[0]).map(key => {
+                if (key.startsWith('col_')) {
+                    const colId = key.replace('col_', ''); // 提取数字部分
+                    if(colId != 'id'){//排除id列
+                        return { prop: key, label: colMap[colId] || '未知列名' };
+                    }
+                }
+                return null; // 或者忽略非col_开头的键
+            }).filter(Boolean); // 过滤掉null值
+
+            // 检查合并后的结果
+            console.log('合并之后的表头：',mergedColumns);
+            return mergedColumns;
+        },
+        deleteClue(row){
+            console.log(row.id);
+        }
+    },
+    computed: {
+        cols(){
+            if (this.clueCols.length && this.clueData.length) {
+                console.log('cols: ', this.mergeCols());
+                return this.mergeCols();
+            }
+            return []; // 或者返回一个空数组，直到数据加载完成
+        },
+        
+        formattedTableData() {
+            // 保留原始ID，同时格式化其他数据以匹配动态表头
+            const Data =  this.clueData.map(row => {
+                const newRow = { ...row }; // 复制row以避免修改原始数据
+                // 根据动态列，重新组织数据对象
+                this.cols.forEach(col => {
+                    if (col.label !== 'ID') {
+                        newRow[col.label] = newRow[col.prop];
+                        // console.log('newRow：',newRow)
+                        // delete newRow[col.label]; // 如果需要，可以删除原始格式的属性，按照label会去掉id，
+                    }
+                });
+                console.log('newRow: ', newRow)
+                return newRow;
+            });
+            console.log('展示的数据：', Data);
+            console.log('Data.col_id:', Data[0].col_id);
+            return Data;
+        }
+    },
+    //加载页面的时候获取数据
+    beforeMount() {
+        // this.getClueCols();
+        // this.getClueData();
+    }
+};
+</script>
+
+<style scoped>
+.el-container{
+	padding: 0;
+}
+.containerTools{
+	height:6%;
+	padding:0;
+	display:flex;
+	justify-content: flex-end;
+	align-items: center;
+	background-color: #f5f6fa;
+}
+.containerHead{
+	padding:0;
+	height:8%;
+	padding :0;
+}
+.container_Tools_Main{
+	padding:0;
+	background-color: #f5f6fa
+}
+.el-button{
+	background-color: transparent;
+	margin:5;
+	padding:3;
+	border: 0;
+	color: #0e5858;
+	font-size: 24px;
+}
+.el-button:hover{
+	background-color: rgba(255, 255, 255, 0.7);
+}
+/* 文字悬浮 */
+.textDelete{
+	/* 初始状态为透明 */
+	color: black;
+	opacity: 0;
+}
+
+.btnDelete:hover .textDelete{
+	opacity: 1;
+}
+/* 设置表格 */
+.containerMain{
+	background-color: #f5f6fa;
+	padding: 10px;
+}
+.btnItemDelete{
+	background-color: #1DAFAF;
+	color: white;
+	border-radius: 14px;
+	font-size: 12px;
+	font-weight: bold;
+}
+.btnItemDelete:hover{
+	background: #1dafafd2; 
+}
+.el-tab-coloumn{
+	background: black;
+}
+.containerTab{
+	display: flex;
+	justify-content: space-between;
+}
+</style>
--- a/src/components/ShowCluesTable.vue
+++ b/src/components/ShowCluesTable.vue
@ -3,17 +3,17 @@
  <div class="card-container">
    <el-card v-for="(item, index) in tableData" :key="index" class="card-item">
      <div class="card-content">
-        <h3>线索库ID:{{ item.id }}</h3>
-        <p>线索库名:{{ item.name }}</p>
-        <el-button size="small" @click="watchClue(item)">
+        <h2 class = 'cdbID'>线索库ID:{{ item.id }}</h2>
+        <h1 class = 'cdbName'>线索库名:{{ item.name }}</h1>
+        <el-button size="small" round @click="watchClue(item)">
          查看
        </el-button>
-        <el-button size="small" @click="deleteClue(item)">
+        <el-button size="small" round @click="deleteClue(item)">
          删除
        </el-button>
      </div>
    </el-card>
-</div>
+  </div>
 </template>

 <script>
@ -27,10 +27,10 @@
      isFileUploaded: Boolean, // 声明接收的布尔型属性
    },
    data(){
-      const item = {
+      const item = [{
        id: '10',
        name: '线索库1'
-      };
+      }];
      return {
        cluesTableData:[],
        tableData: Array(18).fill(item)
@ -50,14 +50,14 @@
        console.log("数据记录", row.id);
        // 使用动态路由，将数据记录中的id传递给Details页面
        // Details与index.ts中的name对应
-        this.$router.push({name:'Details',params:{id:row.id}})
+        this.$router.push({name:'Details',params:{id:1}})
      },
      deleteClue(row){
        // 删除一个线索库
        // 使用动态路由，将数据记录中的id传递给Delete页面
        // Delete与index.ts中的name对应
        console.log('rowData:',row);
-        this.$router.push({name:'Delete',params:{id:row.id}})
+        this.$router.push({name:'Delete',params:{id:1}})
      }
    },
    //加载页面的时候获取数据
@ -72,20 +72,41 @@
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
+  padding: 0;
 }

 .card-item {
-  margin-bottom: 20px;
+  margin-bottom: 10px; /* 控制卡片上下距离 */
+  padding-top: 0;
  width: calc(33.33% - 20px); /* 为了适应三张卡片一行，但还需调整高度以确保方形 */
  height: 200px; /* 示例高度，根据内容自适应调整 */
  display: flex;
-  flex-direction: column;
-  justify-content: space-between; /* 确保内容垂直居中 */
+  justify-content: center; /* 确保内容垂直居中 */
  align-items: center; /* 水平居中内容 */
 }

 .card-content {
  text-align: center; /* 使文本居中 */
+  height:100%;
+}
+
+.cdbID{
+  margin-bottom: 20px;
+}
+
+.cdbName{
+  margin-bottom: 10px;
+}
+.el-button{
+  size: large;
+  background-color: #1DAFAF;
+  color:white;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-weight: bold;
+}
+.el-button:hover{
+  background-color: rgb(14, 150, 150);
+  width:60px;
 }

 </style>
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -26,7 +26,7 @@ const routes: Array<RouteRecordRaw> = [
        // 动态路由， 添加:id（必须添加否则传不进参数），获取点击按钮时传来的线索库id
        path:'/Details/:id',
        name:'Details',
-        component:()=>import('@/components/CluesDetails.vue')
+        component:()=>import('@/components/CluesPage.vue')
      },
      {
        path:'/Delete/:id',
--- a/src/views/AsideMenu.vue
+++ b/src/views/AsideMenu.vue
@ -1,3 +1,4 @@
+<!-- /**用于显示sidebar的页面 */ -->
 <template>
  <el-container style="height: 100%; border: 0px solid #eee">
    <el-header class = "containerSystemName">
@ -63,6 +64,7 @@ export default{
  font-weight: bolder; /** 字体加粗 */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /*设置字体*/
  font-size: 14px;  /**字体大小 */
+  height:8%;
 }
 .containerSelections{
  color: white;
@ -70,15 +72,7 @@ export default{
  height: 100%;
  border:0px;
 }
-.containerUploadBtn{
-  color: white;
-  background-color: #1DAFAF;
-  height: 20%;
-  display: flex;  /** 采用flex布局方式 */
-  flex-direction: column; /**垂直堆叠子元素 */
-  justify-content: flex-end;
-  align-items: center;
-}
+
 .el-menu-item{
  color:white;
  font-weight: bold;
--- a/src/views/HeaderPage.vue
+++ b/src/views/HeaderPage.vue
@ -1,23 +1,8 @@
+<!-- /***用于显示边栏的页面 */ -->
 <template>
-  <div class="toolbar" style="display: flex;line-height: 60px;">
-    <div style="margin-top: 12px;">
-      <el-icon :size="20" @click="collapse"><Fold /></el-icon>
-    </div>
-    <div style="flex: 1;text-align: center;font-size: 20px;">
-      <span>线索库前端界面</span>
-    </div>
-    <el-dropdown>
-      <el-icon style="margin-right: 8px; margin-top: 1px">
-        <ArrowDownBold />
-      </el-icon>
-      <template #dropdown>
-        <el-dropdown-menu >
-        <el-dropdown-item @click="toUser">个人中心</el-dropdown-item>
-        <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
-      </el-dropdown-menu>
-      </template>
-    </el-dropdown>
-    <span>系统管理</span>
+  <div class="toolbar">
+    <el-icon @click="collapse"><Fold /></el-icon>
+    <span class = "pageName">{{ pageTitle }}</span>
  </div>
 </template>

@ -25,6 +10,7 @@
 export default {
  name: 'HeaderPage',
  props:{
+    pageTitle: String,
    icon:String
  },
  methods:{
@ -42,11 +28,22 @@ export default {
 </script>

 <style scoped>
-.toolbar {
-  display: inline-flex;
+.toolbar{
+  display: flex;
+  background-color: white;
+  color: #6B6363;
+  height:100%;
  align-items: center;
-  justify-content: center;
-  height: 100%;
-  right: 20px;
+  justify-content: space-between;
+}
+.el-icon{
+  color: #0E5858;
+  font-size: 28px;
+  margin-right: 40%;
+}
+.pageName{
+  flex-grow: 1;
+  font-size: 24px;
+  font-weight: bold;
 }
 </style>
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@ -1,100 +1,81 @@
 <template>
-  <div>
-    <el-container>
-      <el-header style="line-height: 40px;padding: 0;display: flex;justify-content: space-between;">
-        <div style="flex: 1;text-align: center;font-size: 20px;margin-right: auto;margin-left: 60px;"
-        >
-          <span>线索库总览</span>
-        </div>
-        <div style=" margin-right: 5px;margin-top: 5px;">
-          <el-button type="primary" @click="openDialog">
-            上传文档<el-icon><DocumentAdd /></el-icon>
+  <el-container class = "containerAll">
+    <!--这是头栏部件-->
+    <el-header class = 'containerHead'>
+      <HeaderPage :pageTitle = 'pageTitle'>
+      </HeaderPage>
+    </el-header>
+    <el-main style="padding:0; height:92%" >
+      <el-container class = "container_Tools_Main" >
+        <!--这是主体的头栏用于防止工具等-->
+        <el-header class = 'containerTools'>
+          <!--这是上传文档按钮-->
+          <el-button class = 'uploadBtn' type = 'primary' @click='openDialog'>
+              <el-icon><DocumentAdd/></el-icon>
          </el-button>
          <el-dialog
-            v-model="dialogVisible"
-            title="上传文档"
-            width="500"
-            align-center
+          v-model="dialogVisible"
+          title="上传文档"
+          width="500"
+          align-center
          >
-            <!-- 打开的弹窗中包含上传页面，没做组件分离 -->
-            <div>
-              <!-- 
-
-               -->
-              <!-- <el-upload
-                class="upload-demo"
-                drag
-                :limit="limit"
-                multiple
-                :http-request="uploadFiles"
-              >
-                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-                <div class="el-upload__text">
-                  拖拽文件到这里或者 <em>点击上传</em>
-                </div>
-                <template #tip>
-                  <div class="el-upload__tip">
-                    上传csv文档
-                  </div>
-                </template>
-              </el-upload> -->
-              <el-form>
-                <el-form-item>
-                  <el-input v-model="fileName" style="width: 240px" placeholder="输入文件名" />
-                </el-form-item>
-                <el-form-item >
-                  <el-upload
-                    class="upload-demo"
-                    ref="upload"
-                    :http-request="uploadFiles"
-                    :on-exceed="handleExceed"
-                    :limit="1"
-                    accept=".csv"
-                  >
-                    <template #trigger>
-                      <el-button type="primary">选取文件</el-button>
-                    </template>
-                    
-                    <template #tip>上传.csv文件</template>
-                  </el-upload>
-                </el-form-item>
-              </el-form>
+          <div>
+            <el-form>
+              <el-form-item>
+                <el-input v-model="fileName" style="width: 240px" placeholder="输入文件名" />
+              </el-form-item>
+              <el-form-item >
+                <el-upload
+                  class="upload-demo"
+                  ref="upload"
+                  :http-request="uploadFiles"
+                  :on-exceed="handleExceed"
+                  :limit="1"
+                  accept=".csv"
+                >
+                  <template #trigger>
+                    <el-button type="primary">选取文件</el-button>
+                  </template>
+                  
+                  <template #tip>上传.csv文件</template>
+                </el-upload>
+              </el-form-item>
+            </el-form>
+          </div>
+          <template #footer>
+            <div class="dialog-footer">
+              <el-button @click="dialogVisible = false">取消</el-button>
+              <el-button type="primary" @click="submitImportForm">
+                确认上传
+              </el-button>
            </div>
-            <template #footer>
-              <div class="dialog-footer">
-                <el-button @click="dialogVisible = false">取消</el-button>
-                <el-button type="primary" @click="submitImportForm">
-                  确认上传
-                </el-button>
-              </div>
-            </template>
+          </template>
          </el-dialog>
-        </div>
-      </el-header>

-      <el-main style="padding: 0; border-top: 1px solid #ccc">
-        <!-- 显示所有数据库表的界面 -->
-        <ShowCluesTable 
-          :is-file-uploaded="isFileUploaded" 
-        >
-        </ShowCluesTable>
-      </el-main>
-    </el-container>
-  </div>
+        </el-header>
+        <el-main class = 'containerMain'>
+            <Clues_Database_Display />
+        </el-main>
+      </el-container>
+    </el-main>
+  </el-container>
 </template>

 <script>
-  import router from '@/router';
-  import { ref } from 'vue'
-
-  import ShowCluesTable from '@/components/ShowCluesTable.vue'
-
-  export default{
-    components:{
-      ShowCluesTable
+/** 引入所有线索库的展示部件 */
+import Clues_Database_Display from '@/components/ShowCluesTable.vue'
+/** 映入头栏的展示部件 */
+import HeaderPage from '@/views/HeaderPage.vue'
+import { ElContainer } from 'element-plus'
+import {ref} from 'vue'
+export default{
+    components:{  
+      HeaderPage,
+      Clues_Database_Display
    },
    data(){
      return{
+        pageTitle: '线索库总览',
        dialogVisible:false,
        limit:1,
        fileList:[],
@ -173,6 +154,41 @@
  let limit = 1;
 </script>

-<style>
+<style scoped>
+/** 工具栏的样式 */
+.containerAll{
+  /* 只有调整父部件的高度，子部件的高度才能按照100%调控 */
+  height: 100vh;  
+  padding:0;
+  
+}
+/* 头栏样式表 */
+.containerHead{
+  width: 100%;
+  padding: 0; 
+  height: 8%;
+}
+.containerTools{
+  padding-right: 1; /**让按钮与卡片最左侧对齐 */
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;

+}
+/* 工具栏和主体样式 */
+.container_Tools_Main{
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  height:100%;
+  background-color: #f5f6fa;  
+}
+/* 上传按钮样式 */
+.uploadBtn{
+  color: #0E5858;
+  background-color: transparent;
+  border: 0;
+  font-size:30px;
+}
 </style>
--- a/src/views/IndexPage.vue
+++ b/src/views/IndexPage.vue
@ -4,33 +4,29 @@
    <el-aside :width="aside_width">
      <AsideMenu :isCollapse="isCollapse"></AsideMenu>
    </el-aside>
-    
-    <el-container>
-      <el-header>
-        <HeaderPage @doCollapse="doCollapse"></HeaderPage>
-      </el-header>
-      
-      <el-main>
-        <!-- <MainPage></MainPage> -->
-        <!-- 设置为路由的父组件 -->
-        <router-view></router-view>
-      </el-main>
-    </el-container>
+    <el-main class = 'containerRight'>
+      <router-view></router-view>
+    </el-main>
  </el-container>
 </template>

+<style scoped>  
+/* 使用Vue 3的::v-deep穿透Scoped CSS */  
+::v-deep .el-header + .el-main {  
+  margin-top: 0 !important;  
+  padding-top: 0 !important; 
+}  
+</style>
+
 <script>
 import router from '@/router';
 import AsideMenu from './AsideMenu.vue'
-import HeaderPage from './HeaderPage.vue'
-// import MainPage from './MainPage.vue'
-//import UploadMenu from './UploadMenu.vue'

 export default {
  name: 'IndexPage',
  components: {
    AsideMenu,
-    HeaderPage,
+    // HeaderPage,
    // MainPage
    //UploadMenu
  },
@ -58,7 +54,7 @@ export default {
 .containerAll{
  height:100vh;
 }
-.el-main{
-  background-color: #F5F6FA;
+.containerRight{
+  padding: 0;
 }
 </style>
--- a/src/views/MainPage.vue
+++ b/src/views/MainPage.vue
@ -1,68 +0,0 @@
-<template>
-  <div>
-    <!--根据数据库中的列名动态生成表头-->
-    <el-table :data="tableData" >
-      <el-table-column
-          v-for="column in cols"
-          :key="column.prop"
-          :prop="column.prop"
-          :label="column.label"
-          width="200"
-      >
-      </el-table-column>
-    </el-table>
-
-  </div>
-</template>
-
-<script>
-
-export default {
-  // 数据
-  data() {
-    return {
-      tableData: [],//表格数据
-      colProps: ['userID', 'userName', 'email', 'age'], //数据库中的列名
-      colLabel:['ID','姓名','邮箱','年龄'], // 表头
-      // cols: [
-      //   { prop: 'userID', label: 'ID' },
-      //   { prop: 'userName', label: '姓名' },
-      //   { prop: 'email', label: '邮箱' },
-      //   { prop: 'age', label: '年龄' }
-      //   { prop: 'col_1', label: 'name' }
-      // ]
-    }
-  },
-  computed: {
-    // 根据数据库中的列名动态生成表头
-    cols(){
-      // 判断两个数组长度是否相等
-      if(this.colProps.length !== this.colLabel.length) {
-        return [];
-      }
-      // 将两个数组合并成对象数组
-      return this.colProps.map((prop,index)=>({
-        prop,
-        label:this.colLabel[index]
-      }));
-    }
-  },
-  methods: {
-    // 获取表数据
-    loadGet(){
-      this.$axios.get('http://localhost:8090/demo/all').then(res=>res.data).then(res=>{
-        console.log(res)
-        this.tableData = res;
-      })
-    }
-  },
-  //获取数据，created也可以
-  beforeMount() {
-    this.loadGet();
-  }
-};
-</script>
-
-<style>
-/*注释*/
-</style>