init

2025-06-02 18:50:12 +08:00
commit 09195f8c18
32 changed files with 6053 additions and 0 deletions
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import request from "@/utils/request";
+
+const tasks = reactive([
+  { title: 'Axure学习', description: '视频链接：https://www.bilibili.com/video/BV1YX4117d67?p=5&vd_source=24feb80ad83d8f763cb11b36af13bbe6', progress: '10%', priority: 2 },
+  { title: 'Linux基础相关', description: '任务列出，任务需要按照流程和优先级排序', progress: '进行中', priority: 3 },
+  { title: 'Git使用技巧', description: '暂无描述', progress: '未开始', priority: 1 },
+]);
+
+/*const tasks = request.get("/tasks", {'pageSize':10,"pageNum":1}).then((res) => {
+  return res.data;
+});*/
+
+const selectedTask = ref(tasks[0]);
+
+const startTask = () => {
+  console.log('任务已开始：', selectedTask.value);
+};
+
+const addTask = () => {
+  tasks.push({ title: '新任务', description: '', progress: '未开始', priority: 0 });
+};
+
+const removeTask = () => {
+  const index = tasks.indexOf(selectedTask.value);
+  if (index > -1) {
+    tasks.splice(index, 1);
+    selectedTask.value = tasks[0] || null;
+  }
+};
+
+const selectTask = (task: any) => {
+  selectedTask.value = task;
+};
+</script>
+
+<template>
+  <el-row :gutter="5" class="task-layout">
+    <el-col :span="6">
+      <el-card class="task-card" :body-style="{ padding: '0' }">
+        <div class="task-header">任务列表</div>
+        <el-scrollbar height="300px">
+          <el-menu class="task-menu" @select="(key)  => selectTask(tasks[key])">
+            <el-menu-item
+                v-for="(task, index) in tasks"
+                :key="index"
+                :index="index.toString()"
+                class="task-item"
+            >
+              {{ task.title }}
+            </el-menu-item>
+          </el-menu>
+        </el-scrollbar>
+      </el-card>
+    </el-col>
+
+    <el-col :span="18">
+      <el-card class="task-card">
+        <h3>任务描述</h3>
+        <el-input type="textarea" v-model="selectedTask.description" rows="4" />
+
+        <h3 class="section-title">任务优先级</h3>
+        <el-radio-group v-model="selectedTask.priority">
+          <el-radio-button v-for="i in 6" :label="i - 1" :key="i">{{ i - 1 }}</el-radio-button>
+        </el-radio-group>
+
+        <h3 class="section-title">上次该任务学习情况</h3>
+        <el-descriptions border column="1">
+          <el-descriptions-item label="有效时间比">0.5</el-descriptions-item>
+          <el-descriptions-item label="实际用时">2小时</el-descriptions-item>
+          <el-descriptions-item label="有效学习时间">1小时</el-descriptions-item>
+          <el-descriptions-item label="备注">学习了“动态面板”的基本使用方式</el-descriptions-item>
+        </el-descriptions>
+
+        <el-space class="action-buttons">
+          <el-button type="primary" @click="startTask">开始任务</el-button>
+          <el-button @click="addTask">添加任务</el-button>
+          <el-button type="danger" @click="removeTask">删除任务</el-button>
+        </el-space>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<style scoped>
+
+html, body {
+  overflow-x: hidden;
+}
+
+.task-layout {
+  width: 100%;
+  max-width: 100vw;
+  overflow-x: hidden;
+  box-sizing: border-box;
+}
+
+.task-card {
+  padding: 0;
+}
+
+.task-header {
+  padding: 10px;
+  font-size: 16px;
+  font-weight: bold;
+  background-color: #f5f7fa;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.task-menu {
+  width: 100%;
+  padding: 0;
+}
+
+.task-item {
+  padding: 10px 12px;
+  white-space: normal;
+  word-break: break-word;
+}
+
+.section-title {
+  margin-top: 20px;
+}
+
+.action-buttons {
+  margin-top: 20px;
+}
+</style>