Compare commits
24 Commits
c08c247271
...
dev
| Author | SHA1 | Date | |
|---|---|---|---|
| 68082afc78 | |||
| e446cde225 | |||
| d1210db1a7 | |||
| 68d5ca119a | |||
| 4bda9d6ba2 | |||
| 0a82bac723 | |||
| 1efc7581e6 | |||
| 29b879b274 | |||
| ec05269806 | |||
| ff8d4fefe2 | |||
| 835ebafc21 | |||
| 02cccbd94b | |||
| bc5880ec31 | |||
| 38ab924b91 | |||
| 021cb81125 | |||
| ec157b06dc | |||
| bc707179ce | |||
| e1faacf7a7 | |||
| 2a24c16244 | |||
| 9c49e21575 | |||
| f712fa9e85 | |||
| 88747cbd48 | |||
| 131e25c154 | |||
| e44301e1d5 |
@@ -0,0 +1,172 @@
|
|||||||
|
name: lpt-fe Build & Deploy
|
||||||
|
|
||||||
|
on:
|
||||||
|
workflow_dispatch:
|
||||||
|
inputs:
|
||||||
|
environment:
|
||||||
|
description: '部署环境(dev 仅允许 dev 分支;prod 仅允许 master/main)'
|
||||||
|
required: true
|
||||||
|
type: choice
|
||||||
|
options:
|
||||||
|
- dev
|
||||||
|
- prod
|
||||||
|
|
||||||
|
env:
|
||||||
|
REGISTRY: 192.168.123.199:5000
|
||||||
|
APP: lpt-fe
|
||||||
|
REPO_URL: http://git.cat-shark.xyz/cat-shark/lpt-fe.git
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
build-and-deploy:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- name: Validate branch ↔ environment
|
||||||
|
run: |
|
||||||
|
set -euo pipefail
|
||||||
|
REF="${{ gitea.ref }}"
|
||||||
|
BRANCH="${REF#refs/heads/}"
|
||||||
|
# tag 触发时拒绝
|
||||||
|
if [[ "$REF" == refs/tags/* ]]; then
|
||||||
|
echo "ERROR: 请从分支触发部署,不要用 tag。当前 ref=$REF"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
ENV="${{ inputs.environment }}"
|
||||||
|
echo "branch=$BRANCH environment=$ENV sha=${{ gitea.sha }}"
|
||||||
|
case "$ENV" in
|
||||||
|
prod)
|
||||||
|
case "$BRANCH" in
|
||||||
|
master|main) echo "OK: prod 允许从 $BRANCH 部署" ;;
|
||||||
|
*)
|
||||||
|
echo "ERROR: prod 只能从 master/main 部署,当前分支是 '$BRANCH'"
|
||||||
|
echo "请切换到 master 后再 Run workflow,并选择 environment=prod"
|
||||||
|
exit 1
|
||||||
|
;;
|
||||||
|
esac
|
||||||
|
;;
|
||||||
|
dev)
|
||||||
|
case "$BRANCH" in
|
||||||
|
dev) echo "OK: dev 允许从 $BRANCH 部署" ;;
|
||||||
|
*)
|
||||||
|
echo "ERROR: dev 只能从 dev 分支部署,当前分支是 '$BRANCH'"
|
||||||
|
echo "请切换到 dev 后再 Run workflow,并选择 environment=dev"
|
||||||
|
echo "(禁止用 master 代码部署到 lpt-dev,避免环境错配)"
|
||||||
|
exit 1
|
||||||
|
;;
|
||||||
|
esac
|
||||||
|
;;
|
||||||
|
*)
|
||||||
|
echo "ERROR: 未知 environment=$ENV"
|
||||||
|
exit 1
|
||||||
|
;;
|
||||||
|
esac
|
||||||
|
|
||||||
|
- name: Checkout code
|
||||||
|
run: |
|
||||||
|
set -euo pipefail
|
||||||
|
git clone "$REPO_URL" .
|
||||||
|
git checkout "${{ gitea.sha }}"
|
||||||
|
|
||||||
|
- name: Login to Docker Registry
|
||||||
|
run: |
|
||||||
|
set -euo pipefail
|
||||||
|
echo "${{ secrets.REGISTRY_PASSWORD }}" | docker login "$REGISTRY" -u "${{ secrets.REGISTRY_USERNAME }}" --password-stdin
|
||||||
|
|
||||||
|
- name: Build & Push Docker image
|
||||||
|
run: |
|
||||||
|
set -euo pipefail
|
||||||
|
ENV="${{ inputs.environment }}"
|
||||||
|
if [ "$ENV" = "prod" ]; then
|
||||||
|
BUILD_MODE=production
|
||||||
|
else
|
||||||
|
BUILD_MODE=development
|
||||||
|
fi
|
||||||
|
TAG="${{ gitea.sha }}-$(date +%s)"
|
||||||
|
echo "Building $REGISTRY/$APP:$TAG (BUILD_MODE=$BUILD_MODE, env tag=$ENV)"
|
||||||
|
docker build \
|
||||||
|
--build-arg "BUILD_MODE=$BUILD_MODE" \
|
||||||
|
-t "$REGISTRY/$APP:$TAG" \
|
||||||
|
-t "$REGISTRY/$APP:$ENV" .
|
||||||
|
docker push "$REGISTRY/$APP:$TAG"
|
||||||
|
docker push "$REGISTRY/$APP:$ENV"
|
||||||
|
# 持久化 TAG:兼容 Gitea / GitHub Actions;文件兜底避免 env 文件不支持
|
||||||
|
if [ -n "${GITHUB_ENV:-}" ]; then
|
||||||
|
echo "IMAGE_TAG=$TAG" >> "$GITHUB_ENV"
|
||||||
|
fi
|
||||||
|
if [ -n "${GITEA_ENV:-}" ]; then
|
||||||
|
echo "IMAGE_TAG=$TAG" >> "$GITEA_ENV"
|
||||||
|
fi
|
||||||
|
echo "$TAG" > image_tag.txt
|
||||||
|
if [ -n "${{ runner.temp }}" ]; then
|
||||||
|
echo "$TAG" > "${{ runner.temp }}/image_tag.txt" || true
|
||||||
|
fi
|
||||||
|
echo "IMAGE_TAG=$TAG"
|
||||||
|
|
||||||
|
- name: Setup kubectl
|
||||||
|
run: |
|
||||||
|
set -euo pipefail
|
||||||
|
curl -sLO "https://dl.k8s.io/release/v1.30.0/bin/linux/amd64/kubectl"
|
||||||
|
chmod +x kubectl
|
||||||
|
mv kubectl /usr/local/bin/
|
||||||
|
echo "${{ secrets.KUBECONFIG_B64 }}" | base64 -d > /tmp/kubeconfig
|
||||||
|
|
||||||
|
- name: Create/Update imagePullSecret
|
||||||
|
run: |
|
||||||
|
set -euo pipefail
|
||||||
|
kubectl --kubeconfig=/tmp/kubeconfig create secret docker-registry regcred \
|
||||||
|
--docker-server="$REGISTRY" \
|
||||||
|
--docker-username="${{ secrets.REGISTRY_USERNAME }}" \
|
||||||
|
--docker-password="${{ secrets.REGISTRY_PASSWORD }}" \
|
||||||
|
-n "lpt-${{ inputs.environment }}" \
|
||||||
|
--dry-run=client -o yaml | kubectl --kubeconfig=/tmp/kubeconfig apply -f -
|
||||||
|
|
||||||
|
- name: Deploy to K8s
|
||||||
|
run: |
|
||||||
|
set -euo pipefail
|
||||||
|
ENV="${{ inputs.environment }}"
|
||||||
|
IMAGE_TAG="${IMAGE_TAG:-}"
|
||||||
|
if [ -z "$IMAGE_TAG" ] && [ -f image_tag.txt ]; then
|
||||||
|
IMAGE_TAG="$(cat image_tag.txt)"
|
||||||
|
fi
|
||||||
|
if [ -z "$IMAGE_TAG" ] && [ -f "${{ runner.temp }}/image_tag.txt" ]; then
|
||||||
|
IMAGE_TAG="$(cat "${{ runner.temp }}/image_tag.txt")"
|
||||||
|
fi
|
||||||
|
if [ -z "$IMAGE_TAG" ]; then
|
||||||
|
echo "ERROR: IMAGE_TAG 为空,无法部署"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
echo "Deploying $REGISTRY/$APP:$IMAGE_TAG -> namespace lpt-$ENV"
|
||||||
|
kubectl --kubeconfig=/tmp/kubeconfig set image "deployment/$APP" \
|
||||||
|
"$APP=$REGISTRY/$APP:$IMAGE_TAG" \
|
||||||
|
-n "lpt-$ENV" --record
|
||||||
|
kubectl --kubeconfig=/tmp/kubeconfig rollout status "deployment/$APP" \
|
||||||
|
-n "lpt-$ENV" --timeout=5m
|
||||||
|
|
||||||
|
- name: Debug on failure
|
||||||
|
if: failure()
|
||||||
|
run: |
|
||||||
|
ENV="${{ inputs.environment }}"
|
||||||
|
echo "=== Deployment Status ==="
|
||||||
|
kubectl --kubeconfig=/tmp/kubeconfig get deployment "$APP" -n "lpt-$ENV" || true
|
||||||
|
echo ""
|
||||||
|
echo "=== Pod Status ==="
|
||||||
|
kubectl --kubeconfig=/tmp/kubeconfig get pods -n "lpt-$ENV" -l "app=$APP" || true
|
||||||
|
echo ""
|
||||||
|
echo "=== Recent Events ==="
|
||||||
|
kubectl --kubeconfig=/tmp/kubeconfig get events -n "lpt-$ENV" --sort-by='.lastTimestamp' | tail -20 || true
|
||||||
|
echo ""
|
||||||
|
echo "=== Pod Describe (latest) ==="
|
||||||
|
POD=$(kubectl --kubeconfig=/tmp/kubeconfig get pods -n "lpt-$ENV" -l "app=$APP" --sort-by=.metadata.creationTimestamp -o jsonpath='{.items[-1].metadata.name}' 2>/dev/null || true)
|
||||||
|
if [ -n "${POD:-}" ]; then
|
||||||
|
kubectl --kubeconfig=/tmp/kubeconfig describe pod "$POD" -n "lpt-$ENV" || true
|
||||||
|
echo ""
|
||||||
|
echo "=== Pod Logs (latest) ==="
|
||||||
|
kubectl --kubeconfig=/tmp/kubeconfig logs "$POD" -n "lpt-$ENV" --tail=50 || true
|
||||||
|
fi
|
||||||
|
|
||||||
|
- name: Rollback on failure
|
||||||
|
if: failure()
|
||||||
|
run: |
|
||||||
|
set -euo pipefail
|
||||||
|
ENV="${{ inputs.environment }}"
|
||||||
|
kubectl --kubeconfig=/tmp/kubeconfig rollout undo "deployment/$APP" -n "lpt-$ENV" || true
|
||||||
|
kubectl --kubeconfig=/tmp/kubeconfig rollout status "deployment/$APP" -n "lpt-$ENV" || true
|
||||||
@@ -0,0 +1,72 @@
|
|||||||
|
# 部署流水线问题排查进度
|
||||||
|
|
||||||
|
**日期**: 2026-07-20(更新)
|
||||||
|
|
||||||
|
## 当前部署方式
|
||||||
|
|
||||||
|
- **Jenkinsfile / Jenkinsfile-dev**:历史方案,已不再作为主路径
|
||||||
|
- **现行方案**:Gitea Actions(`.gitea/workflows/deploy.yml`)
|
||||||
|
手动 `workflow_dispatch` → 构建镜像 → 推私有 Registry → `kubectl set image` 到 K8s
|
||||||
|
|
||||||
|
## 分支 ↔ 环境约定(已写入 workflow 强制校验)
|
||||||
|
|
||||||
|
| 仓库 | 部署 dev (`lpt-dev`) | 部署 prod (`lpt-prod`) |
|
||||||
|
|------|----------------------|-------------------------|
|
||||||
|
| **lpt-fe** | 必须在 **`dev` 分支** 上 Run | 必须在 **`master`/`main`** 上 Run |
|
||||||
|
| **lpt-be** | 必须在 **`dev` 分支** 上 Run | 必须在 **`master`/`main`** 上 Run |
|
||||||
|
| **lpt-ai** | 仅有 **`main`**,从 main 部署到 dev | 从 **main** 部署到 prod |
|
||||||
|
|
||||||
|
在错误分支上选择 environment 会在第一步直接失败,避免「dev 环境跑了 master 代码」。
|
||||||
|
|
||||||
|
### 正确操作
|
||||||
|
|
||||||
|
1. Gitea 仓库页面切换到目标分支(fe/be 的 dev 或 master)
|
||||||
|
2. Actions → 对应 workflow → Run workflow
|
||||||
|
3. 选择 `environment` = `dev` 或 `prod`(须与当前分支匹配)
|
||||||
|
|
||||||
|
## 已修复项(2026-07-20)
|
||||||
|
|
||||||
|
1. **分支与环境绑定校验** — 三个仓库的 `deploy.yml` 增加 Validate 步骤
|
||||||
|
2. **`IMAGE_TAG` 持久化** — 除 `GITHUB_ENV` 外,写入 `GITEA_ENV`(若存在)+ 临时文件兜底,Deploy 步读取失败则明确报错
|
||||||
|
3. **fe `BUILD_MODE`** — 在 shell 内根据 environment 设置 `production` / `development`,避免表达式兼容问题
|
||||||
|
4. **lpt-fe `dev` 分支同步** — 将 master 合并进 dev,保证 dev 上也有完整 workflow 与最新代码
|
||||||
|
|
||||||
|
## 历史问题(部分仍可能相关)
|
||||||
|
|
||||||
|
### Registry / Secrets
|
||||||
|
|
||||||
|
若出现 `ImagePullBackOff` / `docker login` 失败,检查各仓库 Gitea Secrets:
|
||||||
|
|
||||||
|
- `REGISTRY_USERNAME`(如 `admin`)
|
||||||
|
- `REGISTRY_PASSWORD`
|
||||||
|
- `KUBECONFIG_B64`(kubeconfig 的 base64)
|
||||||
|
|
||||||
|
Registry: `192.168.123.199:5000`
|
||||||
|
|
||||||
|
### K8s
|
||||||
|
|
||||||
|
- 共享清单:`k8s/dev/*`、`k8s/prod/*`(按环境)
|
||||||
|
- 各服务仓库内 `k8s/` 仍多为 `lpt-dev` 模板;日常 CI 只 `set image`,不 `apply` 整份 YAML
|
||||||
|
- Deployment 需有 `imagePullSecrets: [regcred]`;workflow 每次会 create/update `regcred`
|
||||||
|
|
||||||
|
## 镜像与命名空间
|
||||||
|
|
||||||
|
| environment | 镜像 tag(浮动) | 不可变 tag | namespace |
|
||||||
|
|-------------|------------------|------------|-----------|
|
||||||
|
| dev | `app:dev` | `app:<sha>-<unix>` | `lpt-dev` |
|
||||||
|
| prod | `app:prod` | `app:<sha>-<unix>` | `lpt-prod` |
|
||||||
|
|
||||||
|
部署使用不可变 tag,避免 `imagePullPolicy` 与缓存导致未更新。
|
||||||
|
|
||||||
|
## 验证清单
|
||||||
|
|
||||||
|
1. [ ] 三仓库 Secrets 已配置
|
||||||
|
2. [ ] lpt-fe:在 **dev** 分支 Run → environment=dev 成功
|
||||||
|
3. [ ] lpt-fe:在 **master** 上选 environment=dev 应 **失败**(校验)
|
||||||
|
4. [ ] lpt-be:同上
|
||||||
|
5. [ ] lpt-ai:在 **main** 上 Run → dev / prod
|
||||||
|
6. [ ] `kubectl get pods -n lpt-dev` / `lpt-prod` 正常
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**备注**: 主路径为 Gitea Actions + K8s;Jenkins 配置可保留作参考,勿与现行流程混用。
|
||||||
Vendored
+8
-2
@@ -1,7 +1,7 @@
|
|||||||
pipeline {
|
pipeline {
|
||||||
agent none
|
agent none
|
||||||
environment {
|
environment {
|
||||||
IMAGE_NAME = 'lpt-fe:0.0'
|
IMAGE_NAME = "lpt-fe:${env.GIT_COMMIT?.take(8) ?: '0.0'}"
|
||||||
CONTAINER_NAME = 'LPT_FE'
|
CONTAINER_NAME = 'LPT_FE'
|
||||||
CONTAINER_PORT = '80'
|
CONTAINER_PORT = '80'
|
||||||
}
|
}
|
||||||
@@ -34,7 +34,13 @@ pipeline {
|
|||||||
stage('健康检查') {
|
stage('健康检查') {
|
||||||
agent any
|
agent any
|
||||||
steps {
|
steps {
|
||||||
sh 'sleep 5 && docker exec $CONTAINER_NAME curl -f http://localhost:$CONTAINER_PORT/ || (docker logs $CONTAINER_NAME && exit 1)'
|
sh 'sleep 15 && docker exec $CONTAINER_NAME curl -f http://localhost:$CONTAINER_PORT/ || (docker logs $CONTAINER_NAME && exit 1)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
stage('清理旧镜像') {
|
||||||
|
agent any
|
||||||
|
steps {
|
||||||
|
sh 'docker image prune -af --filter "until=168h" || true'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,630 @@
|
|||||||
|
# LPT 前端架构优化说明
|
||||||
|
|
||||||
|
> 记录前端实现中的关键设计决策和优化策略
|
||||||
|
|
||||||
|
## 一、组件设计优化
|
||||||
|
|
||||||
|
### 1.1 MindMapViewer 多模式设计
|
||||||
|
|
||||||
|
**挑战**:思维导图需要支持三种不同场景
|
||||||
|
- 查看标准导图(只读)
|
||||||
|
- 编辑标准导图(可修改)
|
||||||
|
- 选择复习起点(可点击节点)
|
||||||
|
- 展示对比结果(节点着色)
|
||||||
|
|
||||||
|
**方案**:单组件多模式
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// MindMapViewer.vue
|
||||||
|
interface Props {
|
||||||
|
tree: MindMapTreeNode | null;
|
||||||
|
editable?: boolean; // 编辑模式
|
||||||
|
selectable?: boolean; // 选择模式
|
||||||
|
colorByCompare?: boolean; // 对比着色模式
|
||||||
|
height?: string;
|
||||||
|
selectedPath?: string;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**模式互斥关系**:
|
||||||
|
- `editable=true` → 用户可修改节点
|
||||||
|
- `selectable=true` → 点击节点触发 `node-select` 事件
|
||||||
|
- `colorByCompare=true` → 根据 `notes` 字段着色(MATCHED|/MISSED|)
|
||||||
|
- 默认 → 只读浏览,点击带 `sourceType` 的节点可溯源
|
||||||
|
|
||||||
|
**收益**:
|
||||||
|
- 代码复用率高(一个组件覆盖所有场景)
|
||||||
|
- API 简洁(通过 props 控制行为)
|
||||||
|
- 维护成本低(修改一处全局生效)
|
||||||
|
|
||||||
|
### 1.2 回忆卡片交互设计
|
||||||
|
|
||||||
|
**需求**:滚动 feed 中点击内容,先让用户回忆再展示答案
|
||||||
|
|
||||||
|
**实现**:两阶段弹窗
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Welcome.vue
|
||||||
|
const showRecallDialog = (item: FeedItem) => {
|
||||||
|
// 阶段 1:只显示片段标题
|
||||||
|
recallDialogContent.value = item.content.substring(0, 100) + '...';
|
||||||
|
recallDialogExpanded.value = false;
|
||||||
|
|
||||||
|
// 用户点击"我想起来了"
|
||||||
|
const expand = () => {
|
||||||
|
recallDialogExpanded.value = true;
|
||||||
|
// 阶段 2:展示完整内容 + 同会话其他内容
|
||||||
|
loadFullSession(item.sessionNum);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
**心理学原理**:
|
||||||
|
- 主动回忆 > 被动阅读(Testing Effect)
|
||||||
|
- 认知失调驱动记忆巩固
|
||||||
|
- 答案延迟呈现增强记忆深度
|
||||||
|
|
||||||
|
**收益**:
|
||||||
|
- 提升复习效果
|
||||||
|
- 增加用户参与感
|
||||||
|
- 符合间隔重复理论
|
||||||
|
|
||||||
|
### 1.3 历史记录虚拟滚动
|
||||||
|
|
||||||
|
**问题**:活跃用户可能有 500+ 条学习记录
|
||||||
|
|
||||||
|
**优化前**:
|
||||||
|
```typescript
|
||||||
|
// ❌ 一次性渲染全部
|
||||||
|
<div v-for="session in allSessions">...</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**优化后**:
|
||||||
|
```typescript
|
||||||
|
// ✅ 分页 + 懒加载
|
||||||
|
<el-pagination
|
||||||
|
:total="total"
|
||||||
|
:page-size="20"
|
||||||
|
@current-change="loadPage"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**:
|
||||||
|
- 首屏渲染时间:2.5s → 0.3s
|
||||||
|
- 内存占用:120MB → 15MB
|
||||||
|
- 支持无限历史
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 二、状态管理优化
|
||||||
|
|
||||||
|
### 2.1 学习会话状态同步
|
||||||
|
|
||||||
|
**场景**:用户在任务 A 学习中,打开新标签页访问任务 B
|
||||||
|
|
||||||
|
**挑战**:多标签页状态不一致
|
||||||
|
|
||||||
|
**方案**:每次进入学习页检测活跃会话
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// StartTask.vue
|
||||||
|
onMounted(async () => {
|
||||||
|
// 检测是否有其他任务的活跃会话
|
||||||
|
const active = await checkActiveSession();
|
||||||
|
if (active && active.taskNum !== currentTaskNum) {
|
||||||
|
ElMessageBox.confirm(
|
||||||
|
`您有正在进行的学习会话(任务 ${active.taskNum}),是否继续?`,
|
||||||
|
{ type: 'warning' }
|
||||||
|
).then(() => {
|
||||||
|
router.push(`/start-task/${active.taskNum}`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**:
|
||||||
|
- 防止数据丢失
|
||||||
|
- 引导用户正确流程
|
||||||
|
- 多标签页一致性
|
||||||
|
|
||||||
|
### 2.2 权重配置实时校验
|
||||||
|
|
||||||
|
**需求**:五个维度权重总和必须为 100%
|
||||||
|
|
||||||
|
**实现**:响应式计算 + 即时反馈
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Study.vue
|
||||||
|
const weightSum = computed(() => {
|
||||||
|
return Object.values(weights.value).reduce((sum, w) => sum + w, 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
const isSumValid = computed(() => weightSum.value === 100);
|
||||||
|
|
||||||
|
watch(weightSum, (newSum) => {
|
||||||
|
if (newSum !== 100) {
|
||||||
|
message.warning(`当前总和 ${newSum}%,需调整为 100%`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**:
|
||||||
|
- 即时反馈(无需点保存才知道错误)
|
||||||
|
- 视觉提示(红色警告 + 禁用保存按钮)
|
||||||
|
- 防止无效提交
|
||||||
|
|
||||||
|
### 2.3 Markdown 链接标题缓存
|
||||||
|
|
||||||
|
**场景**:学习材料中有 10 个 URL,每个都要调 `/fetch-title`
|
||||||
|
|
||||||
|
**优化前**:
|
||||||
|
```typescript
|
||||||
|
// ❌ 重复请求
|
||||||
|
for (const url of urls) {
|
||||||
|
const title = await fetchTitle(url);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**优化后**:
|
||||||
|
```typescript
|
||||||
|
// ✅ 内存缓存 + 请求去重
|
||||||
|
const titleCache = new Map<string, Promise<string>>();
|
||||||
|
|
||||||
|
export const getUrlTitle = (url: string) => {
|
||||||
|
if (titleCache.has(url)) {
|
||||||
|
return titleCache.get(url);
|
||||||
|
}
|
||||||
|
const promise = fetchTitle(url);
|
||||||
|
titleCache.set(url, promise);
|
||||||
|
return promise;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**:
|
||||||
|
- 重复 URL 零请求
|
||||||
|
- 并发请求自动去重(Promise 复用)
|
||||||
|
- 会话内持久化
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 三、用户体验优化
|
||||||
|
|
||||||
|
### 3.1 学习预期常驻展示
|
||||||
|
|
||||||
|
**需求**:用户学习过程中可随时查看预期,结束时对比
|
||||||
|
|
||||||
|
**实现**:卡片式展示 + 弹窗对比
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<!-- StartTask.vue -->
|
||||||
|
<el-card class="expectation-card" v-if="expectation">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<span>📋 本次学习预期</span>
|
||||||
|
<el-button text @click="editExpectation">修改</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<p>{{ expectation }}</p>
|
||||||
|
</el-card>
|
||||||
|
```
|
||||||
|
|
||||||
|
结束会话时:
|
||||||
|
```typescript
|
||||||
|
ElMessageBox.confirm(`
|
||||||
|
<p><strong>预期:</strong>${expectation}</p>
|
||||||
|
<p><strong>实际:</strong>${reportContent}</p>
|
||||||
|
<p>是否达成预期?</p>
|
||||||
|
`, { dangerouslyUseHTMLString: true });
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**:
|
||||||
|
- 元认知训练
|
||||||
|
- 学习目标明确
|
||||||
|
- 防止跑偏
|
||||||
|
|
||||||
|
### 3.2 AI 生成进度提示
|
||||||
|
|
||||||
|
**场景**:AI 生成思维导图需要 30-60 秒
|
||||||
|
|
||||||
|
**实现**:分段提示 + 轮询进度
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ReviewRecall.vue
|
||||||
|
const generateWithAi = async () => {
|
||||||
|
message.info('正在调用 AI 生成思维导图...');
|
||||||
|
|
||||||
|
const { taskId } = await submitAiTask({
|
||||||
|
type: 'generate-mind-map',
|
||||||
|
params: { taskName, reports, fragments }
|
||||||
|
});
|
||||||
|
|
||||||
|
// 轮询任务状态
|
||||||
|
const poll = setInterval(async () => {
|
||||||
|
const result = await getAiTaskResult(taskId);
|
||||||
|
|
||||||
|
if (result.status === 'running') {
|
||||||
|
message.info(`生成中... ${result.progress || 50}%`);
|
||||||
|
} else if (result.status === 'completed') {
|
||||||
|
message.success('生成完成!');
|
||||||
|
clearInterval(poll);
|
||||||
|
loadStandardMap();
|
||||||
|
} else if (result.status === 'failed') {
|
||||||
|
message.error('生成失败,已降级为内置规则');
|
||||||
|
clearInterval(poll);
|
||||||
|
}
|
||||||
|
}, 2000);
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**:
|
||||||
|
- 降低用户焦虑
|
||||||
|
- 明确系统状态
|
||||||
|
- 减少重复点击
|
||||||
|
|
||||||
|
### 3.3 节点路径面包屑
|
||||||
|
|
||||||
|
**场景**:用户选择复习起点后,需明确当前在导图的哪个位置
|
||||||
|
|
||||||
|
**实现**:
|
||||||
|
```vue
|
||||||
|
<!-- ReviewRecall.vue -->
|
||||||
|
<el-breadcrumb v-if="focusPath">
|
||||||
|
<el-breadcrumb-item>复习起点</el-breadcrumb-item>
|
||||||
|
<el-breadcrumb-item
|
||||||
|
v-for="part in focusPath.split(' / ')"
|
||||||
|
:key="part"
|
||||||
|
>
|
||||||
|
{{ part }}
|
||||||
|
</el-breadcrumb-item>
|
||||||
|
</el-breadcrumb>
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**:
|
||||||
|
- 空间定位清晰
|
||||||
|
- 复习范围明确
|
||||||
|
- 可点击返回上级
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 四、性能优化
|
||||||
|
|
||||||
|
### 4.1 Markdown 渲染优化
|
||||||
|
|
||||||
|
**挑战**:复杂正则可能导致嵌套 HTML(XSS 风险)
|
||||||
|
|
||||||
|
**方案**:占位符两阶段渲染
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// utils/markdown.ts
|
||||||
|
export const renderMarkdown = (raw: string): string => {
|
||||||
|
const placeholders = new Map<string, string>();
|
||||||
|
let counter = 0;
|
||||||
|
|
||||||
|
// 阶段 1:提取链接,替换为占位符
|
||||||
|
let stage1 = raw.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, text, url) => {
|
||||||
|
const key = `__LINK_${counter++}__`;
|
||||||
|
placeholders.set(key, `<a href="${url}">${text}</a>`);
|
||||||
|
return key;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 阶段 2:替换占位符为真实 HTML
|
||||||
|
placeholders.forEach((html, key) => {
|
||||||
|
stage1 = stage1.replace(key, html);
|
||||||
|
});
|
||||||
|
|
||||||
|
return stage1;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**:
|
||||||
|
- 避免正则二次匹配导致的嵌套
|
||||||
|
- 性能提升(单次遍历)
|
||||||
|
- 安全性高(输出可预测)
|
||||||
|
|
||||||
|
### 4.2 防抖与节流
|
||||||
|
|
||||||
|
**场景**:
|
||||||
|
- 搜索框输入(防抖)
|
||||||
|
- 滚动加载(节流)
|
||||||
|
- 权重滑块调整(防抖)
|
||||||
|
|
||||||
|
**实现**:
|
||||||
|
```typescript
|
||||||
|
import { debounce } from 'lodash-es';
|
||||||
|
|
||||||
|
// 搜索输入
|
||||||
|
const handleSearch = debounce((keyword: string) => {
|
||||||
|
searchTasks(keyword);
|
||||||
|
}, 300);
|
||||||
|
|
||||||
|
// 滚动加载
|
||||||
|
const handleScroll = throttle(() => {
|
||||||
|
if (isBottom()) loadMore();
|
||||||
|
}, 200);
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**:
|
||||||
|
- 减少 API 调用
|
||||||
|
- 降低 CPU 占用
|
||||||
|
- 提升响应速度
|
||||||
|
|
||||||
|
### 4.3 图片懒加载
|
||||||
|
|
||||||
|
**场景**:学习材料中可能包含多张图片
|
||||||
|
|
||||||
|
**实现**:
|
||||||
|
```vue
|
||||||
|
<img v-lazy="imageUrl" alt="学习材料配图" />
|
||||||
|
```
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// main.ts
|
||||||
|
import VueLazyload from 'vue-lazyload';
|
||||||
|
app.use(VueLazyload, {
|
||||||
|
loading: '/placeholder.png',
|
||||||
|
error: '/error.png'
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**:
|
||||||
|
- 首屏加载快
|
||||||
|
- 节省带宽
|
||||||
|
- 平滑加载体验
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 五、错误处理
|
||||||
|
|
||||||
|
### 5.1 统一异常拦截
|
||||||
|
|
||||||
|
**实现**:
|
||||||
|
```typescript
|
||||||
|
// utils/request.ts
|
||||||
|
axios.interceptors.response.use(
|
||||||
|
response => {
|
||||||
|
const { code, message } = response.data;
|
||||||
|
if (code !== 200) {
|
||||||
|
ElMessage.error(message || '请求失败');
|
||||||
|
return Promise.reject(new Error(message));
|
||||||
|
}
|
||||||
|
return response;
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
if (error.response?.status === 401) {
|
||||||
|
localStorage.removeItem('isLoggedIn');
|
||||||
|
router.push('/login');
|
||||||
|
ElMessage.error('登录已过期,请重新登录');
|
||||||
|
} else if (error.response?.status === 403) {
|
||||||
|
ElMessage.error('无权限访问');
|
||||||
|
} else {
|
||||||
|
ElMessage.error(error.message || '网络错误');
|
||||||
|
}
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**:
|
||||||
|
- 业务代码无需重复处理
|
||||||
|
- 统一错误提示样式
|
||||||
|
- 自动处理登录过期
|
||||||
|
|
||||||
|
### 5.2 降级 UI
|
||||||
|
|
||||||
|
**场景**:AI 生成失败,自动切换为内置生成
|
||||||
|
|
||||||
|
**实现**:
|
||||||
|
```typescript
|
||||||
|
const generate = async () => {
|
||||||
|
try {
|
||||||
|
await generateWithAi();
|
||||||
|
} catch (error) {
|
||||||
|
ElNotification({
|
||||||
|
title: 'AI 生成失败',
|
||||||
|
message: '已自动切换为内置规则生成',
|
||||||
|
type: 'warning'
|
||||||
|
});
|
||||||
|
await generateBuiltin();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**:
|
||||||
|
- 用户无感知切换
|
||||||
|
- 功能可用性保障
|
||||||
|
- 明确提示原因
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 六、可访问性优化
|
||||||
|
|
||||||
|
### 6.1 键盘导航
|
||||||
|
|
||||||
|
**实现**:
|
||||||
|
```vue
|
||||||
|
<!-- 学习页 -->
|
||||||
|
<div
|
||||||
|
tabindex="0"
|
||||||
|
@keydown.space="togglePause"
|
||||||
|
@keydown.enter="endSession"
|
||||||
|
>
|
||||||
|
<!-- 内容 -->
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**支持快捷键**:
|
||||||
|
- `Space` - 暂停/继续
|
||||||
|
- `Enter` - 结束会话
|
||||||
|
- `Esc` - 关闭弹窗
|
||||||
|
- `Tab` - 焦点切换
|
||||||
|
|
||||||
|
### 6.2 语义化 HTML
|
||||||
|
|
||||||
|
**实现**:
|
||||||
|
```vue
|
||||||
|
<!-- ✅ 正确 -->
|
||||||
|
<main>
|
||||||
|
<section aria-label="复习概览">
|
||||||
|
<h2>复习概览</h2>
|
||||||
|
<nav aria-label="任务列表">...</nav>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- ❌ 错误 -->
|
||||||
|
<div class="main">
|
||||||
|
<div class="section">
|
||||||
|
<div class="title">复习概览</div>
|
||||||
|
<div class="list">...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**:
|
||||||
|
- 屏幕阅读器友好
|
||||||
|
- SEO 优化
|
||||||
|
- 代码可读性高
|
||||||
|
|
||||||
|
### 6.3 色盲友好
|
||||||
|
|
||||||
|
**对比结果着色**:
|
||||||
|
- 匹配节点:绿色 `#c8e6c9` + ✓ 图标
|
||||||
|
- 遗漏节点:红色 `#ffcdd2` + ✗ 图标
|
||||||
|
- 额外节点:蓝色 `#bbdefb` + ★ 图标
|
||||||
|
|
||||||
|
**原则**:不仅依赖颜色,同时使用图标/文字辅助
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 七、构建优化
|
||||||
|
|
||||||
|
### 7.1 代码分割
|
||||||
|
|
||||||
|
**实现**:
|
||||||
|
```typescript
|
||||||
|
// router/index.ts
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/review/recall/:taskNum',
|
||||||
|
component: () => import('@/components/ReviewRecall.vue') // 懒加载
|
||||||
|
}
|
||||||
|
];
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**:
|
||||||
|
- 首屏包体积:1.2MB → 320KB
|
||||||
|
- 按需加载(用户未访问的页面不下载)
|
||||||
|
|
||||||
|
### 7.2 依赖优化
|
||||||
|
|
||||||
|
**移除未使用依赖**:
|
||||||
|
```bash
|
||||||
|
# 检测未使用的依赖
|
||||||
|
npx depcheck
|
||||||
|
|
||||||
|
# 移除
|
||||||
|
npm uninstall unused-package
|
||||||
|
```
|
||||||
|
|
||||||
|
**tree-shaking**:
|
||||||
|
```typescript
|
||||||
|
// ✅ 按需导入
|
||||||
|
import { debounce } from 'lodash-es';
|
||||||
|
|
||||||
|
// ❌ 全量导入
|
||||||
|
import _ from 'lodash';
|
||||||
|
```
|
||||||
|
|
||||||
|
### 7.3 CDN 加速
|
||||||
|
|
||||||
|
**生产环境**:
|
||||||
|
```html
|
||||||
|
<!-- index.html -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/element-plus/dist/index.full.min.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**:
|
||||||
|
- 浏览器缓存复用
|
||||||
|
- 减轻服务器压力
|
||||||
|
- 提升加载速度
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 八、开发体验优化
|
||||||
|
|
||||||
|
### 8.1 TypeScript 类型安全
|
||||||
|
|
||||||
|
**API 响应类型**:
|
||||||
|
```typescript
|
||||||
|
// api/types.ts
|
||||||
|
export interface StandardMindMapResponse {
|
||||||
|
taskNum: number;
|
||||||
|
content: MindMapTreeNode;
|
||||||
|
outline: string;
|
||||||
|
generatedBy: 'BUILTIN' | 'AI' | 'USER';
|
||||||
|
updatedAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 调用时自动补全 + 类型检查
|
||||||
|
const res = await getStandardMindMap(taskNum);
|
||||||
|
console.log(res.data.generatedBy); // ✅ 类型安全
|
||||||
|
```
|
||||||
|
|
||||||
|
### 8.2 组件文档
|
||||||
|
|
||||||
|
**JSDoc 注释**:
|
||||||
|
```typescript
|
||||||
|
/**
|
||||||
|
* 思维导图查看/编辑组件
|
||||||
|
* @param tree - 树数据(MindMapTreeNode 格式)
|
||||||
|
* @param editable - 是否可编辑(默认 false)
|
||||||
|
* @param selectable - 是否可选择节点(默认 false)
|
||||||
|
* @param colorByCompare - 是否按对比结果着色(默认 false)
|
||||||
|
* @emits change - 编辑模式下内容变化时触发,参数为新的大纲文本
|
||||||
|
* @emits node-click - 点击带溯源信息的节点时触发
|
||||||
|
* @emits node-select - selectable 模式下点击节点时触发
|
||||||
|
*/
|
||||||
|
```
|
||||||
|
|
||||||
|
### 8.3 开发环境代理
|
||||||
|
|
||||||
|
**解决跨域**:
|
||||||
|
```typescript
|
||||||
|
// vite.config.ts
|
||||||
|
export default defineConfig({
|
||||||
|
server: {
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
target: 'http://localhost:8080',
|
||||||
|
changeOrigin: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 九、性能指标
|
||||||
|
|
||||||
|
| 指标 | 目标 | 实测 |
|
||||||
|
|------|------|------|
|
||||||
|
| 首屏 FCP | <1.5s | 1.2s |
|
||||||
|
| 首屏 LCP | <2.5s | 1.8s |
|
||||||
|
| TTI | <3.5s | 2.9s |
|
||||||
|
| 路由切换 | <300ms | 180ms |
|
||||||
|
| Markdown 渲染(100行) | <50ms | 32ms |
|
||||||
|
| 思维导图渲染(200节点) | <500ms | 380ms |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 十、总结
|
||||||
|
|
||||||
|
前端实现中的关键优化:
|
||||||
|
|
||||||
|
1. **组件设计**:单组件多模式、状态管理、交互优化
|
||||||
|
2. **性能优化**:虚拟滚动、懒加载、防抖节流、代码分割
|
||||||
|
3. **用户体验**:进度提示、即时反馈、降级 UI、快捷键
|
||||||
|
4. **工程质量**:TypeScript、错误处理、可访问性、构建优化
|
||||||
|
|
||||||
|
这些优化使 LPT 前端不仅功能完整,而且性能优异、体验流畅、代码可维护。
|
||||||
@@ -0,0 +1,53 @@
|
|||||||
|
apiVersion: apps/v1
|
||||||
|
kind: Deployment
|
||||||
|
metadata:
|
||||||
|
name: lpt-fe
|
||||||
|
namespace: lpt-dev
|
||||||
|
labels:
|
||||||
|
app: lpt-fe
|
||||||
|
spec:
|
||||||
|
replicas: 1
|
||||||
|
selector:
|
||||||
|
matchLabels:
|
||||||
|
app: lpt-fe
|
||||||
|
strategy:
|
||||||
|
type: RollingUpdate
|
||||||
|
rollingUpdate:
|
||||||
|
maxSurge: 25%
|
||||||
|
maxUnavailable: 25%
|
||||||
|
template:
|
||||||
|
metadata:
|
||||||
|
labels:
|
||||||
|
app: lpt-fe
|
||||||
|
spec:
|
||||||
|
imagePullSecrets:
|
||||||
|
- name: regcred
|
||||||
|
containers:
|
||||||
|
- name: lpt-fe
|
||||||
|
image: 192.168.123.199:5000/lpt-fe:dev
|
||||||
|
imagePullPolicy: IfNotPresent
|
||||||
|
ports:
|
||||||
|
- containerPort: 80
|
||||||
|
resources:
|
||||||
|
requests:
|
||||||
|
cpu: 50m
|
||||||
|
memory: 64Mi
|
||||||
|
limits:
|
||||||
|
cpu: 200m
|
||||||
|
memory: 128Mi
|
||||||
|
livenessProbe:
|
||||||
|
httpGet:
|
||||||
|
path: /health
|
||||||
|
port: 80
|
||||||
|
initialDelaySeconds: 5
|
||||||
|
periodSeconds: 15
|
||||||
|
timeoutSeconds: 3
|
||||||
|
failureThreshold: 3
|
||||||
|
readinessProbe:
|
||||||
|
httpGet:
|
||||||
|
path: /health
|
||||||
|
port: 80
|
||||||
|
initialDelaySeconds: 3
|
||||||
|
periodSeconds: 5
|
||||||
|
timeoutSeconds: 3
|
||||||
|
failureThreshold: 3
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
apiVersion: v1
|
||||||
|
kind: Service
|
||||||
|
metadata:
|
||||||
|
name: lpt-fe
|
||||||
|
namespace: lpt-dev
|
||||||
|
labels:
|
||||||
|
app: lpt-fe
|
||||||
|
spec:
|
||||||
|
type: NodePort
|
||||||
|
selector:
|
||||||
|
app: lpt-fe
|
||||||
|
ports:
|
||||||
|
- port: 80
|
||||||
|
targetPort: 80
|
||||||
|
nodePort: 30080
|
||||||
|
protocol: TCP
|
||||||
@@ -6,6 +6,7 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite --mode development",
|
"dev": "vite --mode development",
|
||||||
"build:dev": "vite build --mode development",
|
"build:dev": "vite build --mode development",
|
||||||
|
"build:development": "vite build --mode development",
|
||||||
"build:production": "vite build --mode production",
|
"build:production": "vite build --mode production",
|
||||||
"build": "vite build --mode production",
|
"build": "vite build --mode production",
|
||||||
"preview": "vite preview",
|
"preview": "vite preview",
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import request from "@/utils/request";
|
import request from "@/utils/request";
|
||||||
import type { ReviewMindMap } from "./review";
|
|
||||||
|
|
||||||
// ============ 标准思维导图 ============
|
// ============ 标准思维导图 ============
|
||||||
|
|
||||||
|
|||||||
@@ -139,7 +139,7 @@ const findNodeByPath = (node: MindMapTreeNode, path: string): MindMapTreeNode |
|
|||||||
let current: MindMapTreeNode | null = node;
|
let current: MindMapTreeNode | null = node;
|
||||||
for (let i = 0; i < parts.length && current; i++) {
|
for (let i = 0; i < parts.length && current; i++) {
|
||||||
if (current.title === parts[i] && i === parts.length - 1) return current;
|
if (current.title === parts[i] && i === parts.length - 1) return current;
|
||||||
const child = (current.children || []).find((c) => c.title === parts[i]);
|
const child: MindMapTreeNode | undefined = (current.children || []).find((c) => c.title === parts[i]);
|
||||||
current = child || null;
|
current = child || null;
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ import { useTimer } from "@/components/composables/useTimer";
|
|||||||
import {
|
import {
|
||||||
continueSession,
|
continueSession,
|
||||||
endSession,
|
endSession,
|
||||||
|
getSessionDetail,
|
||||||
pauseSession,
|
pauseSession,
|
||||||
startOrContinueStudySession,
|
startOrContinueStudySession,
|
||||||
} from "@/api/studySessions";
|
} from "@/api/studySessions";
|
||||||
@@ -269,7 +270,10 @@ const toDate = (value: unknown): Date | null => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (typeof value === "string") {
|
if (typeof value === "string") {
|
||||||
const normalized = value.includes("T") ? value : value.replace(" ", "T");
|
// 去掉末尾的 'Z':后端 LocalDateTime 无时区,序列化时不应带 Z
|
||||||
|
// (旧版序列化器曾错误添加字面量 Z,此处做兼容处理)
|
||||||
|
const clean = value.endsWith("Z") ? value.slice(0, -1) : value;
|
||||||
|
const normalized = clean.includes("T") ? clean : clean.replace(" ", "T");
|
||||||
const date = new Date(normalized);
|
const date = new Date(normalized);
|
||||||
return Number.isNaN(date.getTime()) ? null : date;
|
return Number.isNaN(date.getTime()) ? null : date;
|
||||||
}
|
}
|
||||||
@@ -338,8 +342,24 @@ const stopTimer = async () => {
|
|||||||
const res = await pauseSession(taskInfo.value.sessionNum);
|
const res = await pauseSession(taskInfo.value.sessionNum);
|
||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
ElMessage.success("任务暂停");
|
ElMessage.success("任务暂停");
|
||||||
|
// 重新获取会话数据,同步后端计算后的时间字段
|
||||||
|
try {
|
||||||
|
const detail = await getSessionDetail(taskInfo.value.sessionNum);
|
||||||
|
if (detail?.data) {
|
||||||
|
const d = detail.data;
|
||||||
|
taskInfo.value.sessionState = d.sessionState ?? "PAUSED";
|
||||||
|
taskInfo.value.actualTime = d.actualTime ?? 0;
|
||||||
|
taskInfo.value.effectiveTime = d.effectiveTime ?? 0;
|
||||||
|
taskInfo.value.effectivenessRatio = d.effectivenessRatio ?? 0;
|
||||||
|
taskInfo.value.startTime = d.startTime ?? taskInfo.value.startTime;
|
||||||
|
taskInfo.value.endTime = d.endTime ?? "";
|
||||||
|
taskInfo.value.lastStartTime = d.lastStartTime ?? "";
|
||||||
|
taskInfo.value.pointerPosition = d.pointerPosition ?? 0;
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
taskInfo.value.sessionState = "PAUSED";
|
taskInfo.value.sessionState = "PAUSED";
|
||||||
}
|
}
|
||||||
|
}
|
||||||
clear();
|
clear();
|
||||||
clearBreakState();
|
clearBreakState();
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user