feat: TaskForm 学习材料 Markdown 预览

- materialURL 重命名为 materialUrl - 新增预览/编辑切换按钮，实时 Markdown 渲染预览 - 保存前自动将裸 URL 转换为 [标题](url) 格式 - 新增 convertMaterialUrls 函数批量抓取链接标题 - 预览区样式与页面风格统一（绿色链接 + 箭头图标） - textarea 行数从 3 增至 6，placeholder 更新为 Markdown 示例
2026-07-12 13:49:43 +08:00
parent 9c3c1f0d26
commit 032317da7b
1 changed files with 150 additions and 8 deletions
@@ -22,7 +22,7 @@ const isUpdateMode = computed(() => route.meta.action === "update");
 const taskNum = ref("");
 const taskName = ref("");
 const taskDescription = ref("");
-const materialURL = ref("");
+const materialUrl = ref("");
 const priority = ref({
  urgency: 0,
  importance: 0,
@@ -139,12 +139,35 @@ const removeApplication = async (item: TaskApplication) => {
  }
 };

+const convertMaterialUrls = async () => {
+  const raw = materialUrl.value || "";
+  if (!raw.trim()) return;
+  const bareUrls = new Set<string>();
+  raw.replace(/https?:\/\/[^\s)\u3001\uFF09\u300D\u300B<>]+/g, (url) => {
+    const clean = url.replace(/[.。,，;；!！?？）】」』\]]+$/, "");
+    if (!raw.includes(`](${clean})`)) bareUrls.add(clean);
+    return url;
+  });
+  if (bareUrls.size === 0) return;
+  const titles: Record<string, string> = {};
+  const results = await Promise.all([...bareUrls].map(async (u) => ({ u, t: await getUrlTitle(u) })));
+  results.forEach(({ u, t }) => { titles[u] = t; });
+  let result = raw;
+  for (const u of bareUrls) {
+    if (titles[u] && titles[u] !== u) {
+      result = result.replace(u, `[${titles[u].replace(/]/g, "\\]")}](${u})`);
+    }
+  }
+  materialUrl.value = result;
+};
+
 const createTask = () => {
+  convertMaterialUrls().then(() => {
    request
    .post("/tasks", {
      taskName: taskName.value,
      taskDescription: taskDescription.value,
-      materialURL: materialURL.value,
+      materialUrl: materialUrl.value,
      ...priority.value,
    })
    .then((result) => {
@@ -155,6 +178,7 @@ const createTask = () => {
        ElMessage.error("任务创建失败：" + result.message);
      }
    });
+  });
 };

 const loadTask = () => {
@@ -165,7 +189,7 @@ const loadTask = () => {
        taskNum.value = data.taskNum || "";
        taskName.value = data.taskName;
        taskDescription.value = data.taskDescription;
-        materialURL.value = data.materialURL || data.materialUrl || "";
+        materialUrl.value = data.materialUrl || "";
        priority.value = {
          urgency: data.urgency,
          importance: data.importance,
@@ -184,12 +208,13 @@ const loadTask = () => {
 };

 const updateTask = () => {
+  convertMaterialUrls().then(() => {
    request
    .put("/tasks/" + taskId, {
      id: taskId,
      taskName: taskName.value,
      taskDescription: taskDescription.value,
-      materialURL: materialURL.value,
+      materialUrl: materialUrl.value,
      ...priority.value,
    })
    .then((result) => {
@@ -200,6 +225,7 @@ const updateTask = () => {
        ElMessage.error("任务更新失败：" + result.message);
      }
    });
+  });
 };

 const cancelTask = () => {
@@ -236,6 +262,57 @@ onMounted(() => {
 onUnmounted(() => window.removeEventListener("resize", updateWidth));

 const isMobile = computed(() => screenWidth.value <= 900);
+
+// 学习材料 Markdown 预览
+const showPreview = ref(false);
+const materialPreview = ref("");
+const previewLoading = ref(false);
+
+const escapeHtml = (s: string) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+const escapeAttr = (s: string) => s.replace(/"/g, "&quot;").replace(/&/g, "&amp;");
+
+function renderMarkdown(raw: string, urlTitles: Record<string, string> = {}): string {
+  if (!raw.trim()) return "";
+  let html = raw;
+  const links: string[] = [];
+  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_m: string, text: string, url: string) => {
+    const tag = `<a href="${escapeAttr(url)}" target="_blank" rel="noopener">${escapeHtml(text)}</a>`;
+    links.push(tag);
+    return `__LINK_${links.length - 1}__`;
+  });
+  html = html.replace(/https?:\/\/[^\s)\u3001\uFF09\u300D\u300B<>]+/g, (url) => {
+    const clean = url.replace(/[.。,，;；!！?？）】」』\]]+$/, "");
+    const label = urlTitles[clean] || url;
+    const tag = `<a href="${escapeAttr(clean)}" target="_blank" rel="noopener">${escapeHtml(label)}</a>`;
+    links.push(tag);
+    return `__LINK_${links.length - 1}__`;
+  });
+  html = html.replace(/\n/g, "<br>");
+  for (let i = 0; i < links.length; i++) {
+    html = html.replace(`__LINK_${i}__`, links[i]);
+  }
+  return html;
+}
+
+async function previewMaterial() {
+  showPreview.value = true;
+  const raw = materialUrl.value || "";
+  if (!raw.trim()) { materialPreview.value = ""; return; }
+  previewLoading.value = true;
+  try {
+    const titles: Record<string, string> = {};
+    const bareUrls = new Set<string>();
+    raw.replace(/https?:\/\/[^\s)\u3001\uFF09\u300D\u300B<>]+/g, (url) => {
+      bareUrls.add(url.replace(/[.。,，;；!！?？）】」』\]]+$/, ""));
+      return url;
+    });
+    const results = await Promise.all([...bareUrls].map(async (u) => ({ u, t: await getUrlTitle(u) })));
+    results.forEach(({ u, t }) => { titles[u] = t; });
+    materialPreview.value = renderMarkdown(raw, titles);
+  } finally {
+    previewLoading.value = false;
+  }
+}
 </script>

 <template>
@@ -249,8 +326,30 @@ const isMobile = computed(() => screenWidth.value <= 900);
        <el-form-item label="任务描述">
          <el-input v-model="taskDescription" type="textarea" :rows="5" placeholder="请输入任务描述" />
        </el-form-item>
-        <el-form-item label="学习材料地址">
-          <el-input v-model="materialURL" type="textarea" :rows="3" placeholder="每行输入一个链接&#10;例如：https://vuejs.org/guide&#10;https://github.com/vuejs/core" />
+        <el-form-item>
+          <template #label>
+            <div class="material-label">
+              <span>学习材料地址</span>
+              <el-button
+                v-if="!showPreview"
+                text
+                size="small"
+                type="primary"
+                @click="previewMaterial()"
+              >预览</el-button>
+              <el-button
+                v-else
+                text
+                size="small"
+                @click="showPreview = false"
+              >编辑</el-button>
+              <span class="material-hint" v-if="!showPreview">[链接文字](url) 或直接粘贴链接</span>
+              <span class="material-hint" v-else>链接会自动获取标题展示</span>
+            </div>
+          </template>
+          <el-input
+            v-if="!showPreview"
+          <el-input v-model="materialUrl" type="textarea" :rows="6" placeholder="支持 Markdown 格式&#10;例如：&#10;参考 [Vue.js 文档](https://vuejs.org/guide)&#10;源码在 https://github.com/vuejs/core" />
        </el-form-item>
      </div>

@@ -365,6 +464,49 @@ const isMobile = computed(() => screenWidth.value <= 900);
  color: var(--green-900);
 }

+.material-label {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+}
+
+.material-label .material-hint {
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-weight: 400;
+}
+
+.material-preview {
+  min-height: 120px;
+  padding: 14px 16px;
+  border: 1px solid var(--border-soft);
+  border-radius: 8px;
+  background: #fafdfb;
+  font-size: 14px;
+  line-height: 1.8;
+  word-break: break-word;
+  color: var(--text-primary);
+}
+
+.material-preview :deep(a) {
+  color: var(--green-600);
+  text-decoration: none;
+  border-bottom: 1px dashed var(--green-400);
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.material-preview :deep(a:hover) {
+  color: var(--green-800);
+  border-bottom-style: solid;
+}
+
+.material-preview :deep(a)::after {
+  content: " \u2197";
+  font-size: 11px;
+  opacity: 0.5;
+}
+
 .priority-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));