diff --git a/src/assets/demand/list.png b/src/assets/demand/list.png
new file mode 100644
index 0000000..8071f22
Binary files /dev/null and b/src/assets/demand/list.png differ
diff --git a/src/assets/demand/treeIcon.png b/src/assets/demand/treeIcon.png
new file mode 100644
index 0000000..b626d32
Binary files /dev/null and b/src/assets/demand/treeIcon.png differ
diff --git a/src/assets/demand/treeIcon1.png b/src/assets/demand/treeIcon1.png
new file mode 100644
index 0000000..68827ee
Binary files /dev/null and b/src/assets/demand/treeIcon1.png differ
diff --git a/src/utils/api.js b/src/utils/api.js
index 537014a..40ad61d 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -198,9 +198,49 @@ export const taskApi = {
 
 }
 export const demandApi = {
-    getDemandTree: (data) => request({
+    getVersionTree: (data) => request({
         url: `/projectVersion/tree`,
         method: 'get',
         params: data,
     }),
+    addVersion: (data) => request({
+        url: '/projectVersion/insert',
+        method: 'post',
+        data: data,
+    }),
+    // 删除版本号 
+    delVersion: (data) => request({
+        url: `/projectVersion/${data}`,
+        method: 'delete',
+    }),
+    editVersion: (data) => request({
+        url: '/projectVersion/update',
+        method: 'put',
+        data: data,
+    }),
+    getDemandList: (data) => request({
+        url: `/demand/list`,
+        method: 'get',
+        params: data,
+    }),
+    addDemand: (data) => request({
+        url: '/demand/insert',
+        method: 'post',
+        data: data,
+    }),
+    eidtDemand: (data) => request({
+        url: '/demand/update',
+        method: 'put',
+        data: data,
+    }),
+    delDemand: (data) => request({
+        url: `/demand//${data}`,
+        method: 'delete',
+    }),
+    delDemandBatch: (data) => request({
+        url: `/demand/remove/batch?ids=${data}`,
+        method: 'delete',
+    }),
+
+
 }
diff --git a/src/views/project/demandManage/components/MainContentTable.vue b/src/views/project/demandManage/components/MainContentTable.vue
new file mode 100644
index 0000000..9b0a0d5
--- /dev/null
+++ b/src/views/project/demandManage/components/MainContentTable.vue
@@ -0,0 +1,928 @@
+<template>
+  <div class="container">
+    <div class="topTitle">需求列表</div>
+    <!-- 搜索筛选区域 -->
+    <div class="search-filters">
+      <el-input
+        v-model="filters.title"
+        placeholder="请输入"
+        class="filter-input"
+      >
+        <template #prefix>
+          <div>标题名称</div>
+        </template>
+      </el-input>
+
+      <el-input
+        v-model="filters.responsiblePersonName"
+        placeholder="请选择负责人"
+        class="filter-input"
+        readonly
+        @focus="openUser('search')"
+      >
+        <template #prefix>负责人</template>
+      </el-input>
+
+      <el-select
+        v-model="filters.demandStatus"
+        placeholder="不限"
+        class="filter-select"
+      >
+        <template #prefix>需求状态</template>
+        <el-option
+          v-for="item in statusList"
+          :key="item.dictValue"
+          :label="item.dictLabel"
+          :value="item.dictValue"
+        />
+      </el-select>
+
+      <el-select
+        v-model="filters.priority"
+        placeholder="不限"
+        class="filter-select"
+      >
+        <template #prefix>优先级</template>
+        <el-option
+          v-for="item in priorityList"
+          :key="item.dictValue"
+          :label="item.dictLabel"
+          :value="item.dictValue"
+        />
+      </el-select>
+
+      <div class="filter-buttons">
+        <el-button type="primary" @click="handleSearch">查询</el-button>
+        <el-button @click="handleReset">重置</el-button>
+      </div>
+    </div>
+
+    <!-- 操作按钮区域 -->
+    <div class="table-operations">
+      <el-button type="primary" @click="handleAdd">
+        <el-icon class="el-icon-plus" />
+        新建需求
+      </el-button>
+      <el-button @click="handleBatchDelete">删除</el-button>
+    </div>
+
+    <!-- 表格区域 -->
+    <el-table
+      :data="tableData"
+      style="width: 100%"
+      @selection-change="handleSelectionChange"
+      class="tableBox"
+    >
+      <el-table-column type="selection" width="55" />
+      <el-table-column label="序号" width="70" prop="id" />
+      <el-table-column label="版本号" prop="versionNumber" />
+      <el-table-column label="标题" prop="title" />
+      <el-table-column label="需求状态">
+        <template #default="scope">
+          <div>
+            <el-dropdown
+              trigger="click"
+              placement="bottom"
+              @command="
+                (data) => {
+                  changeRow(data, 'demandStatus', scope.row);
+                }
+              "
+            >
+              <el-radio
+                v-model="scope.row.demandStatus"
+                :label="scope.row.demandStatus"
+                :class="['status-tag', getStatusClass(scope.row.demandStatus)]"
+              >
+                {{
+                  statusList[scope.row.demandStatus]
+                    ? statusList[scope.row.demandStatus].dictLabel
+                    : ""
+                }}</el-radio
+              >
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item
+                  v-for="item in statusList"
+                  :key="item.dictValue"
+                  :command="item.dictValue"
+                  :class="{
+                    tableSelect1: true,
+                    selectedItem1: item.dictValue == scope.row.demandStatus,
+                  }"
+                  ><el-radio
+                    v-model="scope.row.demandStatus"
+                    :label="scope.row.demandStatus"
+                    :class="['status-tag', getStatusClass(item.dictValue)]"
+                  >
+                    {{
+                      statusList[item.dictValue]
+                        ? statusList[item.dictValue].dictLabel
+                        : ""
+                    }}</el-radio
+                  ></el-dropdown-item
+                >
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="负责人" prop="responsiblePersonName">
+        <template #default="scope">
+          <div @click="openUser('change', scope.row)" style="cursor: pointer">
+            {{ scope.row.responsiblePersonName }}
+          </div>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="预计工时(天)" prop="estimatedWorkHours" />
+      <el-table-column label="开始时间" prop="createTime">
+        <template #default="scope">
+          {{ scope.row.createTime.split(" ")[0] }}
+        </template>
+      </el-table-column>
+      <el-table-column label="结束时间" prop="endTime">
+        <template #default="scope">
+          {{ scope.row.endTime.split(" ")[0] }}
+        </template>
+      </el-table-column>
+      <el-table-column label="优先级" prop="priority">
+        <template #default="scope">
+          <div>
+            <el-dropdown
+              trigger="click"
+              placement="bottom"
+              @command="
+                (data) => {
+                  changeRow(data, 'priority', scope.row);
+                }
+              "
+            >
+              <span class="el-dropdown-link">
+                {{
+                  priorityList.find(
+                    (ele) => ele.dictValue == scope.row.priority
+                  )
+                    ? priorityList.find(
+                        (ele) => ele.dictValue == scope.row.priority
+                      ).dictLabel
+                    : ""
+                }}
+                <i class="el-icon-arrow-down"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item
+                  v-for="item in priorityList"
+                  :key="item.dictValue"
+                  :command="item.dictValue"
+                  :class="{
+                    tableSelect2: true,
+                    selectedItem2: item.dictValue == scope.row.priority,
+                  }"
+                  >{{ item.dictLabel }}</el-dropdown-item
+                >
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="120">
+        <template #default="scope">
+          <div>
+            <el-button type="text" @click="handleEdit(scope.row)">
+              编辑
+            </el-button>
+            <el-button
+              type="text"
+              @click="handleDelete(scope.row)"
+              style="color: #666"
+            >
+              删除
+            </el-button>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <div class="pagination">
+      <span class="total">共 {{ total }} 条</span>
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :total="total"
+        @current-change="handlePageChange"
+      />
+    </div>
+    <SelectUser
+      :dialogVisible="userSelectDialogVisible"
+      :multiSelect="false"
+      :currentSelectedUser="currentSelectedUser"
+      @confirm="handleUserConfirm"
+      @close="handleUserClose"
+    />
+    <el-dialog
+      :title="checkedRow.id ? '新建需求' : '修改需求'"
+      :visible.sync="dialogVisibleAdd"
+      width="40%"
+    >
+      <el-form
+        :inline="true"
+        :rules="rules"
+        :model="editData"
+        label-width="80px"
+        class="addForm"
+        ref="ruleForm"
+      >
+        <el-form-item label="标题" class="longItem" prop="title">
+          <el-input v-model="editData.title"></el-input>
+        </el-form-item>
+        <el-form-item label="所属项目" prop="projectId">
+          <el-input v-model="editData.projectName" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="所属版本" prop="versionId">
+          <el-select
+            v-model="editData.versionId"
+            placeholder="请选择所属版本"
+            clearable
+          >
+            <el-option
+              v-for="item in versionList"
+              :key="item.nodeId"
+              :label="item.title"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="负责人" prop="responsiblePerson">
+          <el-input
+            v-model="editData.responsiblePersonName"
+            placeholder="请选择负责人"
+            class="filter-input"
+            readonly
+            @focus="openUser('add')"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item label="需求状态" prop="demandStatus">
+          <el-select
+            v-model="editData.demandStatus"
+            placeholder="请选择需求状态"
+          >
+            <el-option
+              v-for="item in statusList"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="优先级" prop="priority">
+          <el-select v-model="editData.priority" placeholder="请选择优先级">
+            <el-option
+              v-for="item in priorityList"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="预计工时" prop="estimatedWorkHours">
+          <el-select
+            v-model="editData.estimatedWorkHours"
+            filterable
+            allow-create
+            default-first-option
+            placeholder="请输入预计工时"
+            @change="changeTime"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="开始时间" prop="createTime">
+          <el-date-picker
+            @change="changeTime"
+            v-model="editData.createTime"
+            type="date"
+            placeholder="选择日期"
+            style="width: 240px"
+            value-format="yyyy-MM-dd 00:00:00"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="结束时间" prop="endTime">
+          <el-date-picker
+            v-model="editData.endTime"
+            type="date"
+            placeholder="选择日期"
+            value-format="yyyy-MM-dd 23:59:59"
+          >
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisibleAdd = false">取消</el-button>
+        <el-button type="primary" @click="confirmAddDemand">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { demandApi, systemApi } from "@/utils/api";
+import SelectUser from "@/components/SelectUser.vue";
+
+export default {
+  name: "MainContentTable",
+  components: {
+    SelectUser,
+  },
+  props: {
+    projectId: "",
+    version: {
+      type: Object,
+      default: {},
+    },
+    projectName: {
+      type: String,
+      default: "",
+    },
+    versionList: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      filters: {
+        title: "",
+        responsiblePersonName: "",
+        demandStatus: "",
+        priority: "",
+        responsiblePersonId: "",
+      },
+      tableData: [],
+      selectedRows: [],
+      checkedRow: {},
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      priorityList: [],
+      statusList: [],
+      userSelectDialogVisible: false,
+      dialogVisibleAdd: false,
+      currentSelectedUser: [],
+      editData: {
+        id: "",
+        title: "",
+        versionId: "",
+        demandStatus: "",
+        responsiblePerson: "",
+        estimatedWorkHours: "",
+        createTime: "",
+        endTime: "",
+        priority: "",
+        projectId: "",
+      },
+      rules: {
+        title: [
+          { required: true, message: "请输入标题", trigger: "blur" },
+          {
+            min: 3,
+            max: 50,
+            message: "长度在 3 到 50 个字符",
+            trigger: "blur",
+          },
+        ],
+        demandStatus: [
+          {
+            required: true,
+            message: "请选择需求状态",
+            trigger: "change",
+          },
+        ],
+        responsiblePerson: [
+          {
+            required: true,
+            message: "请选择责任人",
+            trigger: "change",
+          },
+        ],
+        estimatedWorkHours: [
+          {
+            required: true,
+            message: "请填写预计工时",
+            trigger: "change",
+          },
+        ],
+        createTime: [
+          { required: true, message: "请选择开始时间", trigger: "change" },
+        ],
+        endTime: [
+          { required: true, message: "请选择结束时间", trigger: "change" },
+        ],
+        priority: [
+          { required: true, message: "请选择优先级", trigger: "change" },
+        ],
+        projectId: [
+          { required: true, message: "请选择所属项目", trigger: "blur" },
+        ],
+      },
+      options: new Array(10).fill(0).map((ele, index) => ({
+        value: index + 1,
+        label: index + 1 + "天",
+      })),
+    };
+  },
+  watch: {
+    version(newVal) {
+      this.$nextTick(() => {
+        this.getDemandList();
+      });
+    },
+    projectId(newVal) {
+      this.editData.projectId = newVal;
+    },
+    projectName(newVal) {
+      this.editData.projectName = newVal;
+    },
+  },
+  methods: {
+    handleSearch() {
+      // 实现搜索逻辑
+      this.getDemandList();
+    },
+    handleReset() {
+      this.filters = {
+        title: "",
+        responsiblePersonName: "",
+        responsiblePersonId: "",
+        demandStatus: "",
+        priority: "",
+      };
+      this.currentPage = 1;
+      this.pageSize = 10;
+      this.getDemandList();
+    },
+    handleAdd() {
+      // 实现新增逻辑
+      this.dialogVisibleAdd = true;
+      this.editData = {
+        id: "",
+        title: "",
+        versionId: "",
+        demandStatus: "",
+        responsiblePerson: "",
+        estimatedWorkHours: "",
+        createTime: "",
+        endTime: "",
+        priority: "",
+        projectId: "",
+      };
+      this.editData.projectId = this.projectId;
+      if (this.version.type == 0) {
+        this.editData.versionId = this.version.id;
+      }
+      this.editData.projectName = this.projectName;
+    },
+    handleEdit(row) {
+      this.editData = row;
+      this.editData.projectId = this.projectId;
+      this.editData.projectName = this.projectName;
+      this.dialogVisibleAdd = true;
+      // 实现编辑逻辑
+    },
+    handleDelete(row) {
+      // 实现删除逻辑
+      this.$confirm("此操作将永久删除该版本号, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          demandApi.delDemand(row.id).then((res) => {
+            this.$message({
+              type: "success",
+              message: "删除成功!",
+            });
+            this.getDemandList();
+          });
+        })
+        .catch(() => {});
+    },
+    handleBatchDelete() {
+      if (!this.selectedRows.length) {
+        this.$message({
+          type: "warning",
+          message: "请选择数据!",
+        });
+        return;
+      }
+      // 实现批量删除逻辑
+      this.$confirm("此操作将永久删除该版本号, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        demandApi
+          .delDemandBatch(this.selectedRows.map((ele) => ele.id).join(","))
+          .then((res) => {
+            this.$message({
+              type: "success",
+              message: "删除成功!",
+            });
+            this.getDemandList();
+          });
+      });
+    },
+    handleSelectionChange(selection) {
+      this.selectedRows = selection;
+    },
+    handlePageChange(page) {
+      this.currentPage = page;
+      // 实现页码改变逻辑
+    },
+    getStatusClass(status) {
+      const classMap = {
+        0: "wait",
+        1: "pending",
+        2: "in-progress",
+        3: "completed",
+        4: "closed",
+      };
+      return classMap[status];
+    },
+    getDemandList() {
+      let param = {
+        ...this.filters,
+        pageSize: this.pageSize,
+        pageNum: this.currentPage,
+      };
+      if (this.version.type == 0) {
+        param.versionId = this.version.id;
+      } else {
+        param.id = this.version.id;
+      }
+      demandApi.getDemandList(param).then((res) => {
+        this.tableData = res.rows;
+        this.total = res.total;
+      });
+    },
+    openUser(type, data) {
+      this.selectType = type;
+      if (type == "search") {
+        this.currentSelectedUser = [
+          { userId: this.filters.responsiblePersonId },
+        ];
+      } else if (type == "change") {
+        this.checkedRow = data;
+        this.currentSelectedUser = [{ userId: data.responsiblePerson }];
+      } else if (type == "add") {
+        this.currentSelectedUser = [
+          { userId: this.editData.responsiblePerson },
+        ];
+      }
+      this.userSelectDialogVisible = true;
+    },
+    handleUserConfirm(data) {
+      if (this.selectType == "search") {
+        this.filters.responsiblePersonName = data[0].nickName;
+        this.filters.responsiblePersonId = data[0].userId;
+      } else if (this.selectType == "change") {
+        this.checkedRow.responsiblePerson = data[0].userId;
+        this.checkedRow.responsiblePersonName = data[0].nickName;
+        this.eidtDemand();
+      } else if (this.selectType == "add") {
+        this.editData.responsiblePersonName = data[0].nickName;
+        this.editData.responsiblePerson = data[0].userId;
+      }
+    },
+    handleUserClose() {
+      this.userSelectDialogVisible = false;
+    },
+    eidtDemandRow() {
+      demandApi.eidtDemand(this.checkedRow).then((res) => {
+        this.$message({
+          message: "修改成功",
+          type: "success",
+        });
+        this.getDemandList();
+      });
+    },
+    async getDictData() {
+      const res1 = await systemApi.getDictData("demand_status");
+      const res2 = await systemApi.getDictData("demand_priority");
+      this.statusList = res1.data;
+      this.priorityList = res2.data;
+    },
+    confirmAddDemand() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          if (
+            this.editData.estimatedWorkHours.replace("天", "") !=
+            parseFloat(this.editData.estimatedWorkHours)
+          ) {
+            this.$message({
+              message: "预计工时为数字",
+              type: "warning",
+            });
+            return;
+          }
+          if (
+            (this.editData.estimatedWorkHours * 10) % 5 != 0 ||
+            this.editData.estimatedWorkHours < 0.5
+          ) {
+            this.$message({
+              message: "预计工时最小间隔为0.5天",
+              type: "warning",
+            });
+            return;
+          }
+
+          if (this.editData.id) {
+            demandApi.eidtDemand(this.editData).then((res) => {
+              this.$message({
+                message: "操作成功",
+                type: "success",
+              });
+              this.resetList();
+            });
+          } else {
+            demandApi.addDemand(this.editData).then((res) => {
+              this.$message({
+                message: "操作成功",
+                type: "success",
+              });
+              this.resetList();
+            });
+          }
+        }
+      });
+    },
+    resetList() {
+      let refreshId = "";
+      if (this.editData.versionId) {
+        refreshId = this.versionList.find(
+          (ele) => this.editData.versionId == ele.id
+        ).nodeId;
+      } else {
+        refreshId = "-1";
+      }
+      this.$emit("refreshTree", refreshId);
+      this.dialogVisibleAdd = false;
+    },
+    changeRow(value, label, row) {
+      row[label] = value;
+      this.checkedRow = row;
+      this.$nextTick(() => {
+        this.eidtDemandRow(row);
+      });
+    },
+    changeTime(val) {
+      this.$nextTick(() => {
+        let day = (this.editData.estimatedWorkHours + "").replace("天", "");
+        if (day != parseFloat(day)&&day) {
+          this.$message({
+            message: "预计工时为数字",
+            type: "warning",
+          });
+          return;
+        }
+        if (this.editData.estimatedWorkHours && this.editData.createTime) {
+          if (day > 1) {
+            this.editData.endTime = this.moment(
+              new Date(this.editData.createTime).getTime()
+            )
+              .add(Math.ceil(day - 1), "days")
+              .format("YYYY-MM-DD 23:59:59");
+          } else {
+            this.editData.endTime = this.moment(
+              new Date(this.editData.createTime).getTime()
+            ).format("YYYY-MM-DD 23:59:59");
+          }
+
+          console.log(this.editData.endTime);
+        }
+      });
+    },
+  },
+  created() {
+    this.getDictData();
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.container {
+  padding: 0 20px 20px;
+  background-color: #ffffff;
+  min-width: 1200px;
+}
+
+.search-filters {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 20px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.filter-input,
+.filter-select {
+  width: 240px;
+}
+
+.filter-buttons {
+  display: flex;
+  gap: 10px;
+}
+
+.table-operations {
+  margin-bottom: 20px;
+  display: flex;
+  gap: 10px;
+}
+
+::v-deep .status-tag {
+  .el-radio__label {
+    padding-left: 5px !important;
+  }
+}
+::v-deep .status-tag .el-radio__inner {
+  height: 18px !important;
+  width: 18px !important;
+  line-height: 18px;
+  text-align: center;
+  margin-bottom: 1px;
+  background: #fff !important;
+  &::after {
+    height: 10px;
+    width: 10px;
+  }
+}
+::v-deep .status-tag.pending .el-radio__inner {
+  border-color: #ff7d00;
+  &::after {
+    background-color: #ff7d00 !important;
+  }
+}
+::v-deep .status-tag.in-progress .el-radio__inner {
+  border-color: #4096ff !important;
+  &::after {
+    background-color: #4096ff !important;
+  }
+}
+::v-deep .status-tag.completed .el-radio__inner {
+  border-color: #50b6aa !important;
+  &::after {
+    background-color: #50b6aa !important;
+  }
+}
+::v-deep .status-tag.closed .el-radio__inner,
+::v-deep .status-tag.wait .el-radio__inner {
+  border-color: #999999 !important;
+  &::after {
+    background-color: #999999 !important;
+  }
+}
+::v-deep .status-tag.pending .el-radio__label {
+  color: #ff7d00 !important;
+  // background-color: #fff7e6;
+}
+
+::v-deep .status-tag.in-progress .el-radio__label {
+  color: #4096ff !important;
+  // background-color: #e6f4ff;
+}
+
+::v-deep .status-tag.completed .el-radio__label {
+  color: #50b6aa !important;
+  // background-color: #e6f7f5;
+}
+
+::v-deep .status-tag.closed .el-radio__label,
+::v-deep .status-tag.wait .el-radio__label {
+  color: #999999 !important;
+  // background-color: #f5f5f5;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.total {
+  color: #666666;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+::v-deep .el-button {
+  border-radius: 4px;
+  font-weight: 600;
+}
+
+::v-deep .el-table {
+  border: 1px solid #eeeeee;
+}
+
+::v-deep .el-table th {
+  background-color: #fafafa !important;
+  color: #666666;
+  font-weight: 600;
+}
+
+::v-deep .el-table td {
+  color: #333333;
+}
+
+::v-deep .el-input__prefix {
+  color: #999999;
+  line-height: 35px;
+  padding-left: 10px !important;
+  font-weight: 600;
+}
+.search-filters ::v-deep .el-input__inner {
+  padding-left: 80px !important;
+  ::placeholder {
+    color: #bbb;
+  }
+}
+::v-deep .el-button--primary {
+  background-color: #4096ff;
+}
+
+::v-deep .el-pagination .el-pager li.is-active {
+  border-color: #4096ff;
+  background-color: #4096ff;
+}
+::v-deep .addForm {
+  .el-input__inner {
+    // width: 100%;
+    width: 240px;
+  }
+  .el-form-item {
+    width: 48%;
+  }
+  .el-input--prefix .el-input__inner {
+    padding-left: 40px;
+  }
+}
+::v-deep .longItem {
+  width: 100% !important;
+  .el-form-item__content {
+    width: 82.2%;
+    .el-input__inner {
+      width: 100%;
+    }
+  }
+}
+.tableSelect1 {
+  width: 150px;
+  text-align: left !important;
+}
+.tableSelect2 {
+  width: 100px;
+  text-align: left !important;
+}
+.selectedItem1 {
+  &::after {
+    content: "√";
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    right: 10px;
+    color: #4096ff;
+  }
+}
+.selectedItem2 {
+  color: #4096ff;
+  position: relative;
+  &::after {
+    content: "√";
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    right: 10px;
+    color: #4096ff;
+  }
+}
+.tableBox {
+  .el-radio {
+    margin-left: 0;
+  }
+}
+.topTitle {
+  padding: 0 20px 20px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+</style>
diff --git a/src/views/project/demandManage/components/SidebarTree.vue b/src/views/project/demandManage/components/SidebarTree.vue
new file mode 100644
index 0000000..e4e4389
--- /dev/null
+++ b/src/views/project/demandManage/components/SidebarTree.vue
@@ -0,0 +1,415 @@
+<template>
+  <div
+    class="sidebarTree"
+    :class="{
+      hidenLeft: !showFlag,
+    }"
+  >
+    <i
+      class="el-icon-arrow-right"
+      style="font-size: 24px; margin-top: 20px; cursor: pointer"
+      v-show="!showFlag"
+      @click.stop="changeShow()"
+    ></i>
+
+    <!-- 树形菜单 -->
+    <div class="treeTitle">版本列表</div>
+    <div class="topBox" v-show="showFlag">
+      <div class="topText" @click.stop="changeOpen">
+        <i v-show="openFlag" class="el-icon-caret-bottom"></i>
+        <i v-show="!openFlag" class="el-icon-caret-right"></i>
+        <img src="@/assets/demand/list.png" />
+        <span>全部版本</span>
+      </div>
+      <div class="topBtn">
+        <i
+          class="el-icon-plus"
+          @click.stop="dialogVisible = true"
+          style="font-size: 20px"
+        ></i>
+        <i
+          class="el-icon-arrow-left"
+          style="font-size: 20px"
+          @click.stop="changeShow()"
+        ></i>
+      </div>
+    </div>
+    <el-tree
+      v-show="showFlag"
+      :data="treeData"
+      :props="defaultProps"
+      :default-expanded-keys="defaultExpend"
+      node-key="nodeId"
+      class="tree"
+      ref="treeRef"
+      @node-click="handleNodeClick"
+      :expand-on-click-node="false"
+    >
+      <template #default="{ node, data }">
+        <div
+          class="treeNode"
+          @mousemove="data.hover = true"
+          @mouseout="data.hover = false"
+        >
+          <!-- 展开/收起图标 -->
+
+          <!-- 节点图标 -->
+          <img
+            v-if="
+              (data.nodeId === selectedId ? 'selected' : '') && data.type == 0
+            "
+            src="@/assets/demand/treeIcon.png"
+            class="nodeIcon"
+          />
+          <img
+            v-if="
+              (data.nodeId !== selectedId ? 'selected' : '') &&
+              data.id != 0 &&
+              data.type == 0
+            "
+            src="@/assets/demand/treeIcon1.png"
+            class="nodeIcon"
+          />
+          <!-- 节点文本 -->
+          <span
+            :class="['nodeLabel', data.nodeId === selectedId ? 'selected' : '']"
+          >
+            {{ data.title }}
+          </span>
+
+          <!-- 右侧数字标记 -->
+          <span
+            v-if="data.type == 0 && !data.hover"
+            :class="[
+              'count',
+              data.nodeId === selectedId ? 'selectedCount' : '',
+            ]"
+          >
+            {{ data.childrenList.length }}
+          </span>
+          <el-dropdown
+            v-show="data.type == 0 && data.hover"
+            trigger="click"
+            placement="bottom"
+            @command="
+              (val) => {
+                changeRow(val, data);
+              }
+            "
+          >
+            <i class="el-icon-more" style="font-size: 20px;"></i>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="add">新建需求</el-dropdown-item>
+              <el-dropdown-item command="edit">编辑</el-dropdown-item>
+              <el-dropdown-item command="del" style="color: #dd242a"
+                >删除</el-dropdown-item
+              >
+            </el-dropdown-menu>
+          </el-dropdown>
+          <!-- 右侧操作图标 -->
+          <img
+            v-if="data.actionIcon"
+            :src="data.actionIcon"
+            class="actionIcon"
+          />
+        </div>
+      </template>
+    </el-tree>
+    <el-dialog title="添加版本号" :visible.sync="dialogVisible" width="30%">
+      <el-form>
+        <el-form-item label="版本号">
+          <el-input v-model="demandData.name"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirmAddNode">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { demandApi } from "@/utils/api";
+export default {
+  name: "SidebarTree",
+  props: {
+    projectId: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      selectedId: "",
+      treeData: [],
+      defaultProps: {
+        children: "childrenList",
+        label: "title",
+      },
+      dialogVisible: false,
+      demandData: {
+        name: "",
+      },
+      openFlag: false,
+      showFlag: true,
+      defaultExpend: [],
+    };
+  },
+
+  methods: {
+    handleNodeClick(data) {
+      this.selectedId = data.nodeId;
+      this.changeVersion(data);
+    },
+    getVersionTree(defaultId) {
+      demandApi
+        .getVersionTree({
+          projectId: this.projectId,
+          demandStatusList: [],
+        })
+        .then((res) => {
+          if (!res.data.length) {
+            return;
+          }
+          res.data = res.data.map((ele) => {
+            ele.nodeId = ele.id + "_" + ele.type;
+            ele.hover = false;
+            return ele;
+          });
+          if (defaultId && defaultId != "all") {
+            if (defaultId == -1) {
+              this.defaultExpend = res.data[res.data.length - 1].nodeId;
+            } else {
+              this.defaultExpend = [defaultId];
+            }
+            this.selectedId = this.defaultExpend[0];
+            this.changeVersion(res.data.find((ele) => ele.nodeId == defaultId));
+          } else if (defaultId == "all") {
+          } else {
+            this.defaultExpend = [res.data[0].nodeId];
+            this.selectedId = this.defaultExpend[0];
+            this.setVersionList(res.data.filter((ele) => ele.type == 0));
+            this.changeVersion(
+              res.data.find((ele) => ele.nodeId == this.defaultExpend[0])
+            );
+          }
+          this.treeData = res.data;
+        });
+    },
+    changeVersion(data) {
+      this.$emit("changeVersion", data);
+    },
+    setVersionList(data) {
+      this.$emit("setVersionList", data);
+    },
+    confirmAddNode() {
+      if (!this.demandData.name) {
+        this.$message({
+          message: "请填写版本号",
+          type: "warning",
+        });
+        return;
+      }
+      let param = {
+        projectId: this.projectId,
+        versionNumber: this.demandData.name,
+      };
+      if (this.demandData.id) {
+        param.id = this.demandData.id;
+        demandApi.editVersion(param).then((res) => {
+          this.resetAdd(0);
+        });
+      } else {
+        demandApi.addVersion(param).then((res) => {
+          this.resetAdd(1);
+        });
+      }
+    },
+    resetAdd(add) {
+      this.$message({
+        message: add ? "添加成功" : "修改成功",
+        type: "success",
+      });
+      this.dialogVisible = false;
+      this.demandData.name = "";
+      this.demandData.id = "";
+      this.getVersionTree();
+    },
+    editDemand(data) {
+      this.demandData = {
+        name: data.title,
+        id: data.id,
+      };
+      this.dialogVisible = true;
+    },
+    delVersion(data) {
+      this.$confirm("此操作将永久删除该版本号, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          demandApi.delVersion(data.id).then((res) => {
+            this.$message({
+              type: "success",
+              message: "删除成功!",
+            });
+            this.getVersionTree();
+          });
+        })
+        .catch(() => {});
+    },
+    changeOpen() {
+      this.openFlag = !this.openFlag;
+      if (this.openFlag) {
+        this.defaultExpend = this.treeData.map((ele) => ele.nodeId);
+      } else {
+        this.defaultExpend = [];
+      }
+      this.getVersionTree("all");
+    },
+    changeShow() {
+      this.showFlag = !this.showFlag;
+    },
+    changeRow(type, row) {
+      if (type == "add") {
+        this.$emit("addDemand");
+      } else if (type == "edit") {
+        this.editDemand(row);
+      } else if (type == "del") {
+        this.delVersion(row);
+      }
+    },
+  },
+  watch: {
+    projectId(newVal) {
+      this.$nextTick(() => {
+        this.getVersionTree();
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.sidebarTree {
+  width: 100%;
+  max-width: 300px;
+  min-height: 100vh;
+  background-color: inherit;
+  padding-left: 20px;
+}
+.hidenLeft {
+  width: 40px;
+}
+.tree {
+  width: 100%;
+  height: 100%;
+}
+
+.treeNode {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 48px;
+  padding: 0 20px;
+  border-radius: 2px;
+}
+::v-deep .el-tree-node__children {
+  padding-left: 15px !important;
+}
+.expandIcon {
+  width: 10px;
+  height: 10px;
+  margin-right: 15px;
+}
+
+.nodeIcon {
+  width: 18px;
+  height: 18px;
+  margin-right: 15px;
+}
+
+.nodeLabel {
+  flex: 1;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 36px;
+  color: #333;
+}
+
+.selected {
+  color: #4096ff;
+}
+
+.count {
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 26px;
+  color: #999;
+  margin-right: 15px;
+}
+
+.selectedCount {
+  color: #4096ff;
+}
+
+.actionIcon {
+  width: 18px;
+  height: 18px;
+}
+.treeTitle {
+  padding: 20px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+/* 选中状态背景色 */
+// .treeNode:has(.selected) {
+//   background-color: #f6faff;
+// }
+
+::v-deep .el-tree-node {
+  min-height: 42px;
+  .el-tree-node__content {
+    height: 42px;
+  }
+  .el-tree-node__expand-icon{
+    font-size: 16px;
+    color: #333;
+  }
+}
+.topBox {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  .topText {
+    gap: 15px;
+    font-size: 16px;
+    font-weight: 600;
+    display: flex;
+    cursor: pointer;
+
+    img {
+      width: 18px;
+      height: 18px;
+    }
+  }
+  .topBtn {
+    display: flex;
+    gap: 10px;
+    i {
+      cursor: pointer;
+    }
+  }
+}
+// /* ��浮效果 */
+// .treeNode:hover {
+//   background-color: #f5f5f5;
+// }
+</style>
diff --git a/src/views/project/demandManage/demandManage.vue b/src/views/project/demandManage/demandManage.vue
index 7c91f3f..3272101 100644
--- a/src/views/project/demandManage/demandManage.vue
+++ b/src/views/project/demandManage/demandManage.vue
@@ -1,337 +1,87 @@
 <template>
-  <div class="container">
-    <!-- 左侧区域 -->
-    <transition name="slide">
-      <div class="left-panel" v-show="isTreeVisible">
-        <!-- 操作栏 -->
-        <div class="tree-controls">
-          <span>根节点数量: {{ rootNodeCount }}</span>
-          <div class="buttons">
-            <el-button size="mini" @click="addNode">添加</el-button>
-            <el-button size="mini" @click="collapseAll">收起所有节点</el-button>
-            <el-button size="mini" @click="toggleTreeVisibility">
-              {{ isTreeVisible ? "隐藏树形" : "显示树形" }}
-            </el-button>
-          </div>
-        </div>
-
-        <!-- 树形表格 -->
-        <div class="tree-view">
-          <el-table
-            :data="treeData"
-            row-key="id"
-            border
-            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-            ref="treeTable"
-          >
-            <el-table-column
-              prop="name"
-              label="需求名称"
-            ></el-table-column>
-          </el-table>
-        </div>
-      </div>
-    </transition>
-
-    <!-- 右侧表格 -->
-    <div
-      class="right-panel"
-      :style="{ flex: isTreeVisible ? '1' : '0 0 100%' }"
-    >
-      <el-button
-        v-show="!isTreeVisible"
-        size="mini"
-        @click="toggleTreeVisibility"
-      >
-        显示树形
-      </el-button>
-      <el-table :data="tableData" border>
-        <el-table-column type="selection" width="55"></el-table-column>
-        <el-table-column
-          prop="version"
-          label="版本号"
-  
-        ></el-table-column>
-        <el-table-column
-          prop="status"
-          label="需求状态"
- 
-        ></el-table-column>
-        <el-table-column
-          prop="owner"
-          label="负责人"
-  
-        ></el-table-column>
-        <el-table-column
-          prop="estimatedTime"
-          label="预计工时"
-       
-        ></el-table-column>
-        <el-table-column
-          prop="creationTime"
-          label="创建时间"
-
-        ></el-table-column>
-        <el-table-column
-          prop="endTime"
-          label="结束时间"
-  
-        ></el-table-column>
-        <el-table-column
-          prop="priority"
-          label="优先级"
-      
-        ></el-table-column>
-        <el-table-column label="操作" width="150">
-          <template slot-scope="scope">
-            <el-button size="mini" @click="handleEdit(scope.row)"
-              >编辑</el-button
-            >
-            <el-button
-              size="mini"
-              type="danger"
-              @click="handleDelete(scope.row)"
-              >删除</el-button
-            >
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-
-    <!-- 添加节点弹框 -->
-    <el-dialog title="添加节点" :visible.sync="dialogVisible">
-      <el-form :model="newNode">
-        <el-form-item label="节点名称">
-          <el-input v-model="newNode.name"></el-input>
-        </el-form-item>
-        <el-form-item label="状态">
-          <el-input v-model="newNode.status"></el-input>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="confirmAddNode">确定</el-button>
-      </div>
-    </el-dialog>
+  <div class="layout">
+    <!-- 左侧树形菜单 -->
+    <SidebarTree
+      :projectId="projectId"
+      class="sidebar"
+      @changeVersion="changeVersion"
+      @setVersionList="setVersionList"
+      @addDemand="addDemand"
+      ref="treeRef"
+    />
+    <!-- 右侧表格和筛选 -->
+    <MainContentTable
+      :projectId="projectId"
+      class="main-content"
+      :version="version"
+      :projectName="projectName"
+      @refreshTree="refreshTree"
+      :versionList="versionList"
+      ref="rightRef"
+    />
   </div>
 </template>
 
 <script>
-import { demandApi } from "@/utils/api";
+// 导入子组件
+import SidebarTree from "./components/SidebarTree.vue";
+import MainContentTable from "./components/MainContentTable.vue";
 
 export default {
+  name: "demandManage",
+  components: {
+    SidebarTree,
+    MainContentTable,
+  },
   data() {
     return {
-      // 树形表格数据
-      treeData: [
-        {
-          id: 1,
-          name: "产品需求1.0",
-          status: "进行中",
-          children: [
-            {
-              id: 11,
-              name: "用户模块",
-              status: "已完成",
-              children: [
-                {
-                  id: 111,
-                  name: "登录功能",
-                  status: "已完成",
-                },
-                {
-                  id: 112,
-                  name: "注册功能",
-                  status: "已完成",
-                },
-              ],
-            },
-            {
-              id: 12,
-              name: "订单模块",
-              status: "进行中",
-              children: [
-                {
-                  id: 121,
-                  name: "购物车",
-                  status: "进行中",
-                },
-                {
-                  id: 122,
-                  name: "支付功能",
-                  status: "待开始",
-                },
-              ],
-            },
-          ],
-        },
-        {
-          id: 2,
-          name: "产品需求2.0",
-          status: "待开始",
-          children: [
-            {
-              id: 21,
-              name: "数据分析模块",
-              status: "待开始",
-            },
-            {
-              id: 22,
-              name: "报表模块",
-              status: "待开始",
-            },
-          ],
-        },
-      ],
-
-      // 右侧表格数据
-      tableData: [
-        {
-          version: "v1.0.0",
-          status: "进行中",
-          owner: "张三",
-          estimatedTime: "40h",
-          creationTime: "2024-01-01",
-          endTime: "2024-01-15",
-          priority: "高",
-        },
-        {
-          version: "v1.0.1",
-          status: "已完成",
-          owner: "李四",
-          estimatedTime: "20h",
-          creationTime: "2024-01-16",
-          endTime: "2024-01-25",
-          priority: "中",
-        },
-        {
-          version: "v1.1.0",
-          status: "待开始",
-          owner: "王五",
-          estimatedTime: "60h",
-          creationTime: "2024-02-01",
-          endTime: "2024-02-28",
-          priority: "高",
-        },
-        {
-          version: "v1.2.0",
-          status: "规划中",
-          owner: "赵六",
-          estimatedTime: "80h",
-          creationTime: "2024-03-01",
-          endTime: "2024-03-31",
-          priority: "低",
-        },
-      ],
-      dialogVisible: false,
-      newNode: {
-        name: "",
-        status: "",
-      },
-      isTreeVisible: true,
+      projectId: "",
+      projectName: "",
+      versionList: [],
+      version: {},
     };
   },
-  computed: {
-    rootNodeCount() {
-      return this.treeData.length;
-    },
-  },
-  watch: {
-    isTreeVisible(newVal) {
-      this.$refs.treeTable.doLayout();
-    },
-  },
   methods: {
-    addNode() {
-      this.dialogVisible = true;
+    changeVersion(data) {
+      this.version = data;
     },
-    confirmAddNode() {
-      if (this.newNode.name && this.newNode.status) {
-        this.treeData.push({
-          id: Date.now(),
-          name: this.newNode.name,
-          status: this.newNode.status,
-          children: [],
-        });
-        this.dialogVisible = false;
-        this.newNode.name = "";
-        this.newNode.status = "";
-      }
+    setVersionList(data) {
+      this.versionList = data;
     },
-    collapseAll() {
-      this.treeData.forEach((node) => {
-        this.$refs.treeTable.toggleRowExpansion(node,false);
-      });
+    refreshTree(defaultId) {
+      this.$refs.treeRef.getVersionTree(defaultId);
     },
-    toggleTreeVisibility() {
-      this.isTreeVisible = !this.isTreeVisible;
+    addDemand() {
+      console.log(566);
+
+      this.$refs.rightRef.handleAdd();
     },
-    handleEdit(row) {
-      console.log("编辑行:", row);
-    },
-    handleDelete(row) {
-      console.log("删除行:", row);
-    },
-    getDemandTree(){
-        demandApi.getDemandTree({
-            projectId:this.projectId,
-            demandStatusList:[]
-        })
-    }
   },
-  mounted(){
-    this.projectId=this.$route.query.id
-    this.getDemandTree()
-  }
+  mounted() {
+    this.projectId = this.$route.query.id;
+    this.projectName = this.$route.query.projectName;
+  },
 };
 </script>
 
-<style scoped>
-.container {
+<style scoped lang="scss">
+.layout {
   display: flex;
-  height: 100vh;
+  width: 100%;
+  min-height: 100vh;
+  background-color: #f5f7fa;
 }
 
-.left-panel {
-  width: 20%;
-  display: flex;
-  flex-direction: column;
-  padding: 10px;
+.sidebar {
+  flex-grow: 1;
+  max-width: 300px;
+  height: 100%;
   background-color: #fff;
-  transition: width 0.3s ease;
 }
 
-.tree-controls {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.buttons {
-  display: flex;
-  gap: 5px;
-}
-
-.tree-view {
-  flex: 1;
-  overflow-y: auto;
-}
-
-.right-panel {
-  flex: 1;
-  transition: width 0.3s ease;
-  padding: 10px;
-  overflow-y: auto;
-}
-
-.slide-enter-active,
-.slide-leave-active {
-  transition: all 0.3s ease;
-}
-
-.slide-enter, .slide-leave-to /* .slide-leave-active in <2.1.8 */ {
-  width: 0;
-  opacity: 0;
+.main-content {
+  flex-grow: 3;
+  background-color: #ffffff;
+  padding: 20px;
 }
 </style>
diff --git a/src/views/project/list.vue b/src/views/project/list.vue
index 37b928f..d87ca9c 100644
--- a/src/views/project/list.vue
+++ b/src/views/project/list.vue
@@ -204,7 +204,7 @@ export default {
     handleDemand(row){
       this.$router.push({
         path: "/demandManage",
-        query: { id: row.projectId },
+        query: { id: row.projectId,projectName:row.projectName },
       });
       
     },
diff --git a/src/views/worklog/components/leftMonth.vue b/src/views/worklog/components/leftMonth.vue
new file mode 100644
index 0000000..0a12a2b
--- /dev/null
+++ b/src/views/worklog/components/leftMonth.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="leftBox">
+    <div class="topBox">
+      <el-date-picker
+        v-model="selectedDate"
+        type="month"
+        format="yyyy年MM月"
+        :clearable="false"
+        style="margin-bottom: 10px; width: 150px"
+        @change="changeMonth"
+        prefix-icon="false"
+      />
+      <div>
+        <i
+          class="el-icon-arrow-left"
+          style="font-size: 18px; font-weight: bold"
+          @click="preMonth"
+        ></i>
+        <i
+          class="el-icon-arrow-right"
+          style="font-size: 18px; font-weight: bold"
+          @click="nextMonth"
+        ></i>
+      </div>
+    </div>
+
+    <el-calendar v-model="selectedDate" />
+  </div>
+</template>
+
+<script>
+import { workLogApi, projectApi } from "@/utils/api";
+
+export default {
+  name: "LeftMonth",
+  data() {
+    return {
+      selectedDate: this.moment(new Date()).format("YYYY-MM-DD"),
+    };
+  },
+  methods: {
+    changeMonth() {},
+    preMonth() {
+      this.selectedDate = this.moment(this.selectedDate)
+        .subtract(1, "months")
+        .format("YYYY-MM-DD");
+    },
+    nextMonth() {
+      this.selectedDate = this.moment(this.selectedDate)
+        .add(1, "months")
+        .format("YYYY-MM-DD");
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.leftBox ::v-deep .el-calendar__header {
+  display: none;
+}
+.leftBox ::v-deep .el-date-editor {
+  .el-input__inner {
+    border: none;
+    padding-left: 0;
+    font-size: 18px;
+    color: #333333;
+    font-weight: 600;
+  }
+}
+.leftBox ::v-deep .el-calendar__body {
+  padding: 0 !important;
+  thead {
+    th {
+      font-family: PingFang SC;
+      font-weight: 400;
+      font-size: 16px;
+      color: #999999;
+    }
+  }
+  tbody {
+    td {
+      border: none;
+      padding: 10px 0;
+
+      .el-calendar-day {
+        text-align: center;
+        padding: 0 !important;
+        font-size: 16px;
+        span {
+          font-family: cursive !important;
+        }
+      }
+      &.next,
+      &.prev {
+        color: #333 !important;
+      }
+      &.is-selected .el-calendar-day {
+        border-radius: 50% !important;
+        background-color: #4096ff;
+        color: #fff;
+      }
+      .el-calendar-day {
+        height: 40px;
+        width: 40px;
+        line-height: 40px;
+
+        border-radius: 50% !important;
+        &:hover {
+          background-color: #88bdfd;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+.topBox {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  i {
+    margin-right: 10px;
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/worklog/components/rightTable.vue b/src/views/worklog/components/rightTable.vue
new file mode 100644
index 0000000..9326ea9
--- /dev/null
+++ b/src/views/worklog/components/rightTable.vue
@@ -0,0 +1,237 @@
+<template>
+  <div class="container">
+    <div class="topBox">
+      <div>
+        <div class="topTitle">当日日志</div>
+        <div class="topText">总计填报工时:<span>1</span>天</div>
+      </div>
+      <div>
+        <el-button type="primary" @click="handleAdd">
+          <el-icon class="el-icon-plus" />
+          添加日志
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 表格区域 -->
+    <el-table
+      :data="tableData"
+      style="width: 100%"
+      class="tableBox"
+    >
+      <el-table-column label="序号" width="70" prop="id" />
+      <el-table-column label="项目名称" prop="versionNumber">
+        <template #default="scope">
+          <div>
+            <el-dropdown
+              trigger="click"
+              placement="bottom"
+              @command="
+                (data) => {
+                  changeRow(data, 'demandStatus', scope.row);
+                }
+              "
+            >
+              <el-radio
+                v-model="scope.row.demandStatus"
+                :label="scope.row.demandStatus"
+                :class="['status-tag', getStatusClass(scope.row.demandStatus)]"
+              >
+                {{
+                  statusList[scope.row.demandStatus]
+                    ? statusList[scope.row.demandStatus].dictLabel
+                    : ""
+                }}</el-radio
+              >
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item
+                  v-for="item in statusList"
+                  :key="item.dictValue"
+                  :command="item.dictValue"
+                  :class="{
+                    tableSelect1: true,
+                    selectedItem1: item.dictValue == scope.row.demandStatus,
+                  }"
+                  ><el-radio
+                    v-model="scope.row.demandStatus"
+                    :label="scope.row.demandStatus"
+                    :class="['status-tag', getStatusClass(item.dictValue)]"
+                  >
+                    {{
+                      statusList[item.dictValue]
+                        ? statusList[item.dictValue].dictLabel
+                        : ""
+                    }}</el-radio
+                  ></el-dropdown-item
+                >
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="版本" prop="title">
+        <template #default="scope">
+          <div>
+            <el-dropdown
+              trigger="click"
+              placement="bottom"
+              @command="
+                (data) => {
+                  changeRow(data, 'demandStatus', scope.row);
+                }
+              "
+            >
+              <el-radio
+                v-model="scope.row.demandStatus"
+                :label="scope.row.demandStatus"
+                :class="['status-tag', getStatusClass(scope.row.demandStatus)]"
+              >
+                {{
+                  statusList[scope.row.demandStatus]
+                    ? statusList[scope.row.demandStatus].dictLabel
+                    : ""
+                }}</el-radio
+              >
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item
+                  v-for="item in statusList"
+                  :key="item.dictValue"
+                  :command="item.dictValue"
+                  :class="{
+                    tableSelect1: true,
+                    selectedItem1: item.dictValue == scope.row.demandStatus,
+                  }"
+                  ><el-radio
+                    v-model="scope.row.demandStatus"
+                    :label="scope.row.demandStatus"
+                    :class="['status-tag', getStatusClass(item.dictValue)]"
+                  >
+                    {{
+                      statusList[item.dictValue]
+                        ? statusList[item.dictValue].dictLabel
+                        : ""
+                    }}</el-radio
+                  ></el-dropdown-item
+                >
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="项目需求">
+        <template #default="scope">
+          <div>
+            <el-dropdown
+              trigger="click"
+              placement="bottom"
+              @command="
+                (data) => {
+                  changeRow(data, 'demandStatus', scope.row);
+                }
+              "
+            >
+              <el-radio
+                v-model="scope.row.demandStatus"
+                :label="scope.row.demandStatus"
+                :class="['status-tag', getStatusClass(scope.row.demandStatus)]"
+              >
+                {{
+                  statusList[scope.row.demandStatus]
+                    ? statusList[scope.row.demandStatus].dictLabel
+                    : ""
+                }}</el-radio
+              >
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item
+                  v-for="item in statusList"
+                  :key="item.dictValue"
+                  :command="item.dictValue"
+                  :class="{
+                    tableSelect1: true,
+                    selectedItem1: item.dictValue == scope.row.demandStatus,
+                  }"
+                  ><el-radio
+                    v-model="scope.row.demandStatus"
+                    :label="scope.row.demandStatus"
+                    :class="['status-tag', getStatusClass(item.dictValue)]"
+                  >
+                    {{
+                      statusList[item.dictValue]
+                        ? statusList[item.dictValue].dictLabel
+                        : ""
+                    }}</el-radio
+                  ></el-dropdown-item
+                >
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="工作内容" prop="responsiblePersonName">
+        <template #default="scope">
+          <div @click="openUser('change', scope.row)" style="cursor: pointer">
+            {{ scope.row.responsiblePersonName }}
+          </div>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="工时分配" prop="estimatedWorkHours" />
+      <el-table-column label="操作" width="120">
+        <template #default="scope">
+          <div>
+            <el-button type="text" @click="handleEdit(scope.row)">
+              编辑
+            </el-button>
+            <el-button
+              type="text"
+              @click="handleDelete(scope.row)"
+              style="color: #666"
+            >
+              删除
+            </el-button>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RightTable",
+  data() {
+    return {
+      statusList: [],
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.container {
+  padding: 20px;
+  background-color: #ffffff;
+  min-width: 1200px;
+}
+.topBox {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  .topTitle {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 5px;
+  }
+  .topText {
+    color: #999999;
+    font-weight: 600;
+    font-size: 16px;
+    span {
+      margin: 0 5px;
+      color: #333;
+    }
+  }
+}
+</style>
diff --git a/src/views/worklog/worklog.vue b/src/views/worklog/worklog.vue
new file mode 100644
index 0000000..d97af19
--- /dev/null
+++ b/src/views/worklog/worklog.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="layout">
+    <!-- 左侧树形菜单 -->
+    <LeftMonth class="sidebar" ref="leftRef" />
+    <!-- 右侧表格和筛选 -->
+    <RightTable class="main-content" ref="rightRef" />
+  </div>
+</template>
+
+<script>
+// 导入子组件
+import LeftMonth from "./components/leftMonth.vue";
+import RightTable from "./components/rightTable.vue";
+
+export default {
+  name: "worklog",
+  components: {
+    LeftMonth,
+    RightTable,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+  mounted() {},
+};
+</script>
+
+<style scoped lang="scss">
+.layout {
+  display: flex;
+  width: 100%;
+  min-height: 100vh;
+  background-color: #f5f7fa;
+}
+
+.sidebar {
+  flex-grow: 1;
+  max-width: 360px;
+  width: 360px;
+  height: 100vh;
+  background-color: #fff;
+  padding: 20px;
+}
+
+.main-content {
+  flex-grow: 3;
+  background-color: #ffffff;
+  padding: 20px;
+}
+</style>