diff --git a/src/api/charge.js b/src/api/participate.js
similarity index 89%
rename from src/api/charge.js
rename to src/api/participate.js
index 38a58fe..a043a3a 100644
--- a/src/api/charge.js
+++ b/src/api/participate.js
@@ -12,7 +12,7 @@ const api = 'http://nbxt.oa.x-lf.cn'
  * @param token 访问令牌
  * @returns {Promise<AxiosResponse<any>> | *}
  */
-export const  getChargeProjectList = (token)=> {
+export const  getParticipateProjectList = (token)=> {
     return axios({
         method: 'get',
         url: `${api}/project/participate/get`,
diff --git a/src/router/modules/manage.ts b/src/router/modules/manage.ts
index ace0dc2..7dd06da 100644
--- a/src/router/modules/manage.ts
+++ b/src/router/modules/manage.ts
@@ -15,9 +15,9 @@ const manageRouter = {
     },
     children: [
       {
-        path: 'participate',
-        component: () => import('@/views/personal/project/participate.vue'),
-        name: 'participate',
+        path: 'charge',
+        component: () => import('@/views/personal/project/charge.vue'),
+        name: 'Charge',
         meta: { title: '我负责的', icon: 'user', affix: true }
       },
       //我管理的以及子页面
@@ -50,28 +50,28 @@ const manageRouter = {
       },
       //我参与的以及子界面
       {
-        path: 'charge',
-        component: () => import('@/views/personal/project/charge.vue'),
-        name: 'Charge',
+        path: 'participate',
+        component: () => import('@/views/personal/project/participate.vue'),
+        name: 'Participate',
         meta: { title: '我参与的', icon: 'user', affix: true }
       },
       {
-        path: 'childSysCharge',
-        component: () => import('@/views/personal/project/childSystem/charge.vue'),
-        name: 'ChildSysCharge',
+        path: 'childSysParticipate',
+        component: () => import('@/views/personal/project/childSystem/participate.vue'),
+        name: 'ChildSysParticipate',
         meta: { title: '我参与的 / 子系统', breadcrumb: true , hidden: true  ,affix:false},  
        
       },
       {
-        path: 'childModCharge',
-        component: () => import('@/views/personal/project/childModel/charge.vue'),
-        name: 'ChildModCharge',
+        path: 'childModParticipate',
+        component: () => import('@/views/personal/project/childModel/participate.vue'),
+        name: 'ChildModParticipate',
         meta: { title: '我参与的 / 子系统 / 子模块', breadcrumb: true , hidden: true  }  
       },
       {
-        path: 'chargeDetail',
-        component:()=>import('@/views/personal/project/detail/charge.vue'),
-        name: 'ChargeDetail',
+        path: 'participateDetail',
+        component:()=>import('@/views/personal/project/detail/participate.vue'),
+        name: 'ParticipateDetail',
         meta: { title: '我参与的 / 子系统 / 子模块 /详情', breadcrumb: true , hidden: true  }  
       }
     ]
diff --git a/src/views/personal/project/charge.vue b/src/views/personal/project/charge.vue
index 607a418..5cd477b 100644
--- a/src/views/personal/project/charge.vue
+++ b/src/views/personal/project/charge.vue
@@ -1,199 +1,3 @@
 <template>
-  <div style=" width:100%">
-    <el-card style="max-width: 100vw;margin: 1.5vw;">
-      <template #header><strong>我参与的</strong></template>
-      <div style="display:flex;flex-direction:row;justify-content: space-around ">
-        <div>
-          名称
-          <el-input v-model="input1" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
-        </div>
-        <div>
-          状态
-          <el-input v-model="input2" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
-        </div>
-        <div>
-          <el-button type="primary" style="width:80px" @click="search">查询</el-button>
-          <el-button style="width:80px" @click="reset">重置</el-button>
-        </div>
-      </div>
-    </el-card>
-    <el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
-      <div style="display:flex;flex-direction: row;justify-content: space-between">
-        <el-button text type=''>项目列表</el-button>
-      </div>
-      <el-table ref="multipleTableRef" :data="tableData" style="max-width: 100vw;"
-        @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" />
-        <el-table-column label="序号" width="120">
-          <template #default="scope">{{ scope.row.date }}</template>
-        </el-table-column>
-        <el-table-column property="name" label="项目名称" width="120" />
-        <el-table-column property="workLoad" label="工作量" show-overflow-tooltip />
-        <el-table-column property="cycle" label="周期" />
-        <el-table-column property="principalUser" label="负责人" />
-        <el-table-column property="isFinish" label="状态" />
-
-
-        <el-table-column property="address" label="项目简介" />
-        <el-table-column property="address" label="截止时间" />
-        <el-table-column property="address" label="操作">
-          <el-button link style="color:deepskyblue" @click="toChildSystem">查看详情</el-button>
-        </el-table-column>
-      </el-table>
-      <el-pagination larger background layout="prev, pager, next" :total="50" class="mt-4"
-        style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh" />
-    </el-card>
-
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import { ElTable } from 'element-plus';
-import { useRouter } from 'vue-router';
-import { getChargeProjectList } from '@/api/charge.js';
-import { getToken } from '@/utils/auth';
-const router = useRouter();
-
-
-
-
-
-
-
-
-interface User {
-  id: number;
-  cycle: number;
-  name: string;
-  description: string;
-  workLoad: number;
-  card: string;
-  isFinish: number;
-  principalUser: string;
-  dateline: string;
-}
-
-// 响应式数据
-const input1 = ref('');
-const input2 = ref('');
-const tableData = ref<User[]>([
-  {
-    id: 4,
-    cycle: 2,
-    name: "项目2",
-    description: "xxxxxxx",
-    workLoad: 12,
-    card: "java",
-    isFinish: 3,
-    principalUser: "teacher_user",
-    dateline: "2021-12-31"
-  },
-  {
-    id: 4,
-    cycle: 2,
-    name: "项目2",
-    description: "xxxxxxx",
-    workLoad: 12,
-    card: "java",
-    isFinish: 1,
-    principalUser: "teacher_user",
-    dateline: "2021-12-31"
-  }
-
-]);
-const initialTableData = ref<User[]>([]);
-
-// 处理接口数据 
-const fetchData = () => {
-  const project = getChargeProjectList(getToken());
-  project.then(res => {
-    const data = res.data;
-    if (data) {
-      // 假设 data 是从接口返回的数据，这里做一个示例
-      const dataProject: User = {
-        id: 4,
-        cycle: 2,
-        name: "项目3",
-        description: "xxxxxxx",
-        workLoad: 12,
-        card: "java",
-        isFinish: 2,
-        principalUser: "teacher_user",
-        dateline: "2021-12-31"
-      };
-
-      tableData.value.push(dataProject);
-      initialTableData.value = tableData.value.slice();  // 将tableData的内容赋值给initialTableData
-    } else {
-      console.log("没有数据");
-    }
-  }).catch(err => {
-    console.log(err);
-  });
-};
-
-// 调用获取数据的函数
-fetchData();
-
-// 处理路由跳转
-const toChildSystem = () => {
-  router.push({ name: 'ChildSysCharge' });
-};
-
-// 监听表格行选择事件
-const multipleTableRef = ref<InstanceType<typeof ElTable>>();
-const multipleSelection = ref<User[]>([]);
-
-const handleSelectionChange = (val: User[]) => {
-  multipleSelection.value = val;
-};
-
-// 统一检索函数
-const search = () => {
-  const keyword = input1.value.trim().toLowerCase();
-  const status = parseInt(input2.value);
-
-  // 如果搜索关键词和状态都为空，则恢复初始数据
-  if (keyword === '' && isNaN(status)) {
-    tableData.value = initialTableData.value.slice();
-    return; 
-  }
-
-  // 根据关键词和状态进行检索
-  tableData.value = initialTableData.value.filter(item => {
-    const matchKeyword = (keyword === '' || item.name.toLowerCase().includes(keyword));
-    const matchStatus = (isNaN(status) || item.isFinish === status);
-    return matchKeyword && matchStatus;
-  });
-};
-
-
-// 重置检索条件
-const reset = () => {
-  input1.value = '';
-  input2.value = '';
-  tableData.value = initialTableData.value.slice();  // 恢复初始数据
-};
-
-</script>
-<style>
-.my-autocomplete li {
-  line-height: normal;
-  padding: 7px;
-}
-
-.my-autocomplete li .name {
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.my-autocomplete li .addr {
-  font-size: 12px;
-  color: #b4b4b4;
-}
-
-.my-autocomplete li .highlighted .addr {
-  color: #ddd;
-}
-</style>
\ No newline at end of file
+    hi
+</template>
\ No newline at end of file
diff --git a/src/views/personal/project/childSystem/charge.vue b/src/views/personal/project/childSystem/participate.vue
similarity index 98%
rename from src/views/personal/project/childSystem/charge.vue
rename to src/views/personal/project/childSystem/participate.vue
index ca5b038..b340fd4 100644
--- a/src/views/personal/project/childSystem/charge.vue
+++ b/src/views/personal/project/childSystem/participate.vue
@@ -73,7 +73,7 @@
   const router = useRouter();
 
   const toChildModel = () => {
-    router.push({name:'ChildModCharge'})
+    router.push({name:'ChildModParticipate'})
   };
 
   const input = ref('');
diff --git a/src/views/personal/project/childmodel/charge.vue b/src/views/personal/project/childmodel/participate.vue
similarity index 97%
rename from src/views/personal/project/childmodel/charge.vue
rename to src/views/personal/project/childmodel/participate.vue
index e38d1e1..5c79f30 100644
--- a/src/views/personal/project/childmodel/charge.vue
+++ b/src/views/personal/project/childmodel/participate.vue
@@ -77,7 +77,7 @@
 
   // 路由跳转
   const toDetail = () => {
-    router.push({ name: 'ChargeDetail' }); // 跳转到子系统详情页面
+    router.push({ name: 'ParticipateDetail' }); // 跳转到子系统详情页面
   };
 
   interface User {
diff --git a/src/views/personal/project/detail/charge.vue b/src/views/personal/project/detail/participate.vue
similarity index 100%
rename from src/views/personal/project/detail/charge.vue
rename to src/views/personal/project/detail/participate.vue
diff --git a/src/views/personal/project/participate.vue b/src/views/personal/project/participate.vue
index 5cd477b..7483a84 100644
--- a/src/views/personal/project/participate.vue
+++ b/src/views/personal/project/participate.vue
@@ -1,3 +1,240 @@
 <template>
-    hi
-</template>
\ No newline at end of file
+  <div style=" width:100%">
+    <el-card style="max-width: 100vw;margin: 1.5vw;">
+      <template #header><strong>我参与的</strong></template>
+      <div style="display:flex;flex-direction:row;justify-content: space-around ">
+        <div>
+          名称
+          <el-input v-model="input1" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+        </div>
+        <div>
+          状态
+          <el-input v-model="input2" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+        </div>
+        <div>
+          <el-button type="primary" style="width:80px" @click="search">查询</el-button>
+          <el-button style="width:80px" @click="reset">重置</el-button>
+        </div>
+      </div>
+    </el-card>
+    <el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
+      <div style="display:flex;flex-direction: row;justify-content: space-between">
+        <el-button text type=''>项目列表</el-button>
+      </div>
+      <el-table ref="multipleTableRef" :data="tableData" style="max-width: 100vw;"
+        @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column label="序号" width="120">
+          <template v-slot="{ $index }">{{ $index + 1 }}</template>
+        </el-table-column>
+        <el-table-column property="name" label="项目名称" width="120" />
+        <el-table-column property="workLoad" label="工作量" show-overflow-tooltip />
+        <el-table-column property="cycle" label="周期" />
+        <el-table-column property="principalUser" label="负责人" />
+        <el-table-column property="status" label="状态" />
+        <el-table-column property="tags" label="标签">
+          <template #default="{ row }">
+            <el-tag v-for="tag in row.tags" :key="tag">{{ tag.toString() }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column property="files" label="文档(点击下载)">
+          <template #default="{ row }">
+            <template v-if="row.files && row.files.URI">
+              <a :href="row.files.URI" target="_blank" style="color: deepskyblue">
+                下载文档
+              </a>
+            </template>
+            <template v-else>
+              无
+            </template>
+          </template>
+        </el-table-column>
+
+        <el-table-column property="description" label="项目简介" />
+        <el-table-column property="deadline" label="截止时间" />
+        <el-table-column property="address" label="操作">
+          <el-button link style="color:deepskyblue" @click="toChildSystem">查看详情</el-button>
+        </el-table-column>
+      </el-table>
+      <el-pagination larger background layout="prev, pager, next" :total="total" class="mt-4" :page-size="pageSize"
+        style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh" />
+    </el-card>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { ElTable } from 'element-plus';
+import { useRouter } from 'vue-router';
+import { getParticipateProjectList } from '@/api/participate.js';
+import { getToken } from '@/utils/auth';
+
+const router = useRouter();
+
+//设置页码
+const total = ref(2);
+const pageSize = ref(3);
+
+
+
+
+interface User {
+  id: number;
+  cycle: number;
+  name: string;
+  description: string;
+  workLoad: number;
+  files: { URI: string };
+  status: string
+  principalUser: string;
+  deadline: string;
+  tags: Array<any>;
+}
+
+// 响应式数据
+const input1 = ref('');
+const input2 = ref('');
+const tableData = ref<User[]>([
+  {
+    id: 4,
+    cycle: 2,
+    name: "项目2",
+    description: "xxxxxxx",
+    workLoad: 12,
+    files: { URI: 'http://www.baidu.com' },
+    status: "暂停",
+    principalUser: "teacher_user",
+    deadline: "2021-12-31",
+    tags: ["java", "spring"]
+
+  },
+  {
+    id: 4,
+    cycle: 2,
+    name: "项目2",
+    description: "xxxxxxx",
+    workLoad: 12,
+    files: { URI: 'http://www.baidu.com' },
+    status: "进行中",
+    principalUser: "teacher_user",
+    deadline: "2021-12-31",
+    tags: ["java", "spring"]
+
+  }
+
+]);
+const initialTableData = ref<User[]>([]);
+
+//处理返回数据函数
+const parseData = (data) => {
+  const files = JSON.parse(data.files);
+  const tags = JSON.parse(data.tags);
+
+  return {
+    id: data.id,
+    cycle: data.cycle,
+    name: data.name,
+    description: data.description,
+    workLoad: data.workLoad,
+    files: files,
+    status: data.status,
+    principalUser: data.principalUser,
+    deadline: data.deadLine,
+    tags: tags,
+
+
+
+  }
+}
+
+// 处理接口数据 
+const fetchData = () => {
+  const project = getParticipateProjectList(getToken());
+  console.log(project);
+
+  project.then(res => {
+    const data = res.data.data.list;
+
+
+    if (data) {
+      // 假设 data 是从接口返回的数据，这里做一个示例
+      const dataProject = data.map(item => parseData(item));
+      console.log(dataProject);
+
+      tableData.value = [...dataProject, ...tableData.value];  // 将接口数据和现有数据合并
+      console.log(tableData.value);
+      initialTableData.value = tableData.value.slice();  // 将tableData的内容赋值给initialTableData
+    } else {
+      console.log("没有数据");
+    }
+  }).catch(err => {
+    console.log(err);
+  });
+};
+
+// 调用获取数据的函数
+fetchData();
+
+// 处理路由跳转
+const toChildSystem = () => {
+  router.push({ name: 'ChildSysParticipate' });
+};
+
+// 监听表格行选择事件
+const multipleTableRef = ref<InstanceType<typeof ElTable>>();
+const multipleSelection = ref<User[]>([]);
+
+const handleSelectionChange = (val: User[]) => {
+  multipleSelection.value = val;
+};
+
+// 统一检索函数
+const search = () => {
+  const keyword = input1.value.trim().toLowerCase();
+  const status = input2.value.trim().toLowerCase();
+
+  // 如果搜索关键词和状态都为空，则恢复初始数据
+  if (keyword === '' && status === '') {
+    tableData.value = initialTableData.value.slice();
+    return;
+  }
+
+  // 根据关键词和状态进行检索
+  tableData.value = initialTableData.value.filter(item => {
+    const matchKeyword = (keyword === '' || item.name.toLowerCase().includes(keyword));
+    const matchStatus = (status === '' || item.status.toLowerCase().includes(status));
+    return matchKeyword && matchStatus;
+  });
+};
+
+
+
+// 重置检索条件
+const reset = () => {
+  input1.value = '';
+  input2.value = '';
+  tableData.value = initialTableData.value.slice();  // 恢复初始数据
+};
+
+</script>
+<style>
+.my-autocomplete li {
+  line-height: normal;
+  padding: 7px;
+}
+
+.my-autocomplete li .name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.my-autocomplete li .addr {
+  font-size: 12px;
+  color: #b4b4b4;
+}
+
+.my-autocomplete li .highlighted .addr {
+  color: #ddd;
+}
+</style>
\ No newline at end of file