-
-
-
+
+
+
+
+
+
+ {{ step.name }}
+
+
+
+
+
+
+
+
+
+
- {{ step.name }}
+ {{ file.file }}
-
@@ -33,6 +50,13 @@ export default defineComponent({
},
computed: {
...mapState('toc', ['tocVisible', 'tocLoading', 'tocSaving', 'tocData']),
+ nowStepFiles() {
+ if (this.nowStepId && this.steps[this.nowStepId]) {
+ return this.steps[this.nowStepId].files || [];
+ }
+
+ return [];
+ },
},
// computed: {
// items() {
@@ -66,6 +90,11 @@ export default defineComponent({
},
data() {
return {
+ visible: false,
+ nowStepId: null,
+ // 在实现上还是文集拆分成多篇文章，每篇文章有多个 steps
+ // 至于每个 step 里面的文件顺序调整，这里考虑是打开一个 modal，然后跳转 file 的位置
+ // 那么 API 的设计要调整，每次进入到文章编排时
articles: [
{
id: 'article 1',
@@ -98,10 +127,22 @@ export default defineComponent({
})),
},
],
+ steps: {
+ '10': {
+ name: 'step 1',
+ files: generateItems(20, (i) => ({
+ id: '1' + i,
+ file: 'file 1 ' + i,
+ type: 'draggable',
+ })),
+ },
+ },
};
},
methods: {
...mapActions('toc', ['fetchToc']),
+ // 这里设置一个缓冲，在 N 秒内收到的 Drop 请求合并成一次请求
+ // 相当于是前端做一次变更，服务端做一次变更
onDrop(index, dropResult) {
console.log('dropResult', dropResult, index);
@@ -117,6 +158,25 @@ export default defineComponent({
return this.articles[index].steps[stepIndex];
};
},
+ addNewPage() {
+ const index = this.articles.length;
+ this.articles.push({
+ id: `article ${index + 1}`,
+ name: `article ${index + 1}`,
+ type: 'container',
+ steps: [],
+ });
+ },
+ handleOpenFileArrangeModal(stepId) {
+ debugger;
+ this.nowStepId = stepId;
+ this.visible = true;
+ },
+ onFileDrop(dropResult) {
+ const step = this.steps[this.nowStepId];
+
+ step.files = applyDrag(step.files, dropResult);
+ },
},
});
From ff638f5c835d3a821729ff410deb16183f7805d8 Mon Sep 17 00:00:00 2001
From: pftom <1043269994@qq.com>
Date: Sat, 9 Apr 2022 19:46:38 +0800
Subject: [PATCH 11/15] =?UTF-8?q?refactor(editor):=20=E9=85=8D=E7=BD=AE=20?=
=?UTF-8?q?eslint=20=E8=A7=84=E5=88=99=E4=BB=A5=E9=80=82=E5=BA=94=20Modal?=
=?UTF-8?q?=20=E7=9A=84=E4=BD=BF=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/editor/.eslintrc.js | 12 ++++++++++++
1 file changed, 12 insertions(+)
create mode 100644 packages/editor/.eslintrc.js
diff --git a/packages/editor/.eslintrc.js b/packages/editor/.eslintrc.js
new file mode 100644
index 00000000..05d95d02
--- /dev/null
+++ b/packages/editor/.eslintrc.js
@@ -0,0 +1,12 @@
+module.exports = {
+ extends: [
+ // add more generic rulesets here, such as:
+ // 'eslint:recommended',
+ // 'plugin:vue/vue3-recommended',
+ 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
+ ],
+ rules: {
+ // override/add rules settings here, such as:
+ 'vue/valid-v-model': 'off'
+ }
+}
\ No newline at end of file
From abd8fc29ec2d09d5ca9848b5a440268cbb0aeb53 Mon Sep 17 00:00:00 2001
From: pftom <1043269994@qq.com>
Date: Sat, 9 Apr 2022 21:05:40 +0800
Subject: [PATCH 12/15] =?UTF-8?q?feat(editor):=20=E5=AE=8C=E5=96=84?=
=?UTF-8?q?=E5=89=8D=E7=AB=AF=E5=85=B3=E4=BA=8E=E7=BC=96=E6=8E=92=E6=AD=A5?=
=?UTF-8?q?=E9=AA=A4/=E6=96=87=E4=BB=B6=E7=9A=84=E8=AF=B7=E6=B1=82?=
=?UTF-8?q?=E4=B8=8E=E5=93=8D=E5=BA=94=E5=A4=84=E7=90=86=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/editor/src/store/toc.js | 50 ++++++++++++++++++++++++
packages/editor/src/views/Toc.vue | 65 +++++++++++++++++++++++++++----
2 files changed, 108 insertions(+), 7 deletions(-)
diff --git a/packages/editor/src/store/toc.js b/packages/editor/src/store/toc.js
index 00549114..a5afe7fe 100644
--- a/packages/editor/src/store/toc.js
+++ b/packages/editor/src/store/toc.js
@@ -4,6 +4,8 @@ export const state = () => ({
tocVisible: false,
tocLoading: false,
tocSaving: false,
+ tocSucceed: false,
+ tocError: false,
tocData: {},
});
@@ -19,6 +21,12 @@ export const mutations = {
},
setTocData(state, data) {
state.tocData = data;
+ },
+ setTocSucceed(state, data) {
+ state.tocSucceed = data;
+ },
+ setError(state, data) {
+ state.tocError = data;
}
};
@@ -46,4 +54,46 @@ export const actions = {
commit('setTocSaving', false);
commit('setTocVisible', false);
},
+ async fetchStepRearrange({ commit }, { articleModifySteps }) {
+ commit('setTocLoading', true);
+
+ try {
+ // 这里是在服务端通过修改 ydoc 的方式，然后通过 WebSocket 自动同步到本端或者其他客户端
+ await fetch('fetchStepRearrange', {
+ method: 'PUT',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ articleModifySteps,
+ })
+ })
+
+ commit('setTocSucceed', true)
+ } catch (err) {
+ console.log('err', err);
+ commit('setTocError', true)
+ }
+ },
+ async fetchFileRearrange({ commit }, payload) {
+ commit('setTocLoading', true);
+
+ try {
+ // 这里是在服务端通过修改 ydoc 的方式，然后通过 WebSocket 自动同步到本端或者其他客户端
+ await fetch('fetchFileRearrange', {
+ method: 'PUT',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ ...payload,
+ })
+ })
+
+ commit('setTocSucceed', true)
+ } catch (err) {
+ console.log('err', err);
+ commit('setTocError', true)
+ }
+ },
};
diff --git a/packages/editor/src/views/Toc.vue b/packages/editor/src/views/Toc.vue
index 69250d2c..bdaa05f7 100644
--- a/packages/editor/src/views/Toc.vue
+++ b/packages/editor/src/views/Toc.vue
@@ -11,7 +11,7 @@
{{ step.name }}
@@ -37,19 +37,30 @@
import { defineComponent } from 'vue-demi';
import { mapActions, mapState } from 'vuex';
import { Container, Draggable, smoothDnD } from 'vue-smooth-dnd';
+import { debounce } from 'lodash';
+
import { applyDrag, generateItems } from '../utils/helpers';
-import StepAllocation from '@/components/toc/StepAllocation.vue';
+const REARRANGE_STATUS = {
+ STEP_REARRANGE: '步骤编排',
+ FILE_REARRANGE: '文件编排',
+};
export default defineComponent({
name: 'Groups',
components: {
- StepAllocation,
Container,
Draggable,
},
computed: {
- ...mapState('toc', ['tocVisible', 'tocLoading', 'tocSaving', 'tocData']),
+ // TODO: 后续在处理这些状态的更新
+ ...mapState('toc', [
+ 'tocVisible',
+ 'tocLoading',
+ 'tocSucceed',
+ 'tocError',
+ 'tocData',
+ ]),
nowStepFiles() {
if (this.nowStepId && this.steps[this.nowStepId]) {
return this.steps[this.nowStepId].files || [];
@@ -82,6 +93,30 @@ export default defineComponent({
// })
// }
// },
+ watch: {
+ articleModifySteps: debounce(function(newVal) {
+ // 更新服务端关于步骤编排
+ this.fetchStepRearrange(newVal);
+
+ this.nowFetchStatus = REARRANGE_STATUS.STEP_REARRANGE;
+ }, 1000),
+ fileModifySteps: debounce(function(newVal) {
+ // 更新服务端关于文件的编排
+ this.fetchFileRearrange({
+ articleId: this.nowArticleId,
+ stepId: this.nowStepId,
+ fileModifySteps: newVal,
+ });
+
+ this.nowFetchStatus = REARRANGE_STATUS.FILE_REARRANGE;
+ }, 1000),
+ tocSucceed(newVal) {
+ if (newVal) this.$message.success(`${this.nowFetchStatus} 保存成功！`);
+ },
+ tocError(newVal) {
+ if (newVal) this.$message.error(`${this.nowFetchStatus} 保存失败！`);
+ },
+ },
mounted() {
const { id } = this.$route.params;
// this.fetchToc({
@@ -92,6 +127,10 @@ export default defineComponent({
return {
visible: false,
nowStepId: null,
+ nowArticleId: null,
+ nowFetchStatus: null,
+ articleModifySteps: [],
+ fileModifySteps: [],
// 在实现上还是文集拆分成多篇文章，每篇文章有多个 steps
// 至于每个 step 里面的文件顺序调整，这里考虑是打开一个 modal，然后跳转 file 的位置
// 那么 API 的设计要调整，每次进入到文章编排时
@@ -140,16 +179,24 @@ export default defineComponent({
};
},
methods: {
- ...mapActions('toc', ['fetchToc']),
+ ...mapActions('toc', [
+ 'fetchToc',
+ 'fetchStepRearrange',
+ 'fetchFileRearrange',
+ ]),
// 这里设置一个缓冲，在 N 秒内收到的 Drop 请求合并成一次请求
// 相当于是前端做一次变更，服务端做一次变更
onDrop(index, dropResult) {
console.log('dropResult', dropResult, index);
+ // 首先前端更新
this.articles[index].steps = applyDrag(
this.articles[index].steps,
dropResult,
);
+
+ // 然后服务端更新，这里走一个 debounce 做 batch update，具体体现在 watch.articleModifySteps
+ this.articleModifySteps.push(dropResult);
},
getChildPayload(index) {
console.log('index', index);
@@ -167,15 +214,19 @@ export default defineComponent({
steps: [],
});
},
- handleOpenFileArrangeModal(stepId) {
- debugger;
+ handleOpenFileArrangeModal(articleId, stepId) {
+ this.nowArticleId = articleId;
this.nowStepId = stepId;
this.visible = true;
},
onFileDrop(dropResult) {
const step = this.steps[this.nowStepId];
+ // 首先前端更新
step.files = applyDrag(step.files, dropResult);
+
+ // 然后服务端更新，这里走一个 debounce 做 batch update，具体体现在 watch.fileModifySteps
+ this.fileModifySteps.push(dropResult);
},
},
});
From c83817ec2352c96278cf30b200f0fbb3bcc7a2dc Mon Sep 17 00:00:00 2001
From: pftom <1043269994@qq.com>
Date: Sat, 9 Apr 2022 22:05:25 +0800
Subject: [PATCH 13/15] =?UTF-8?q?feat(editor):=20=E7=BB=86=E5=8C=96?=
=?UTF-8?q?=E6=AD=A5=E9=AA=A4/=E6=96=87=E4=BB=B6=E7=9A=84=E8=AF=B7?=
=?UTF-8?q?=E6=B1=82=E6=97=B6=E5=BA=8F=E4=B8=8E=E5=89=8D=E7=AB=AF=E6=8E=A7?=
=?UTF-8?q?=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/editor/src/store/toc.js | 42 +++++++++++++----
packages/editor/src/views/Toc.vue | 75 +++++++++++++++++++------------
2 files changed, 80 insertions(+), 37 deletions(-)
diff --git a/packages/editor/src/store/toc.js b/packages/editor/src/store/toc.js
index a5afe7fe..369a903d 100644
--- a/packages/editor/src/store/toc.js
+++ b/packages/editor/src/store/toc.js
@@ -6,7 +6,8 @@ export const state = () => ({
tocSaving: false,
tocSucceed: false,
tocError: false,
- tocData: {},
+ tocArticleSteps: {},
+ tocStepFiles: {},
});
export const mutations = {
@@ -19,8 +20,11 @@ export const mutations = {
setTocSaving(state, saving) {
state.tocSaving = saving;
},
- setTocData(state, data) {
- state.tocData = data;
+ setTocArticleSteps(state, data) {
+ state.tocArticleSteps = data;
+ },
+ setTocStepFiles(state, data) {
+ state.tocStepFiles = data;
},
setTocSucceed(state, data) {
state.tocSucceed = data;
@@ -31,12 +35,34 @@ export const mutations = {
};
export const actions = {
- async fetchToc({ commit }, { collectionId }) {
+ async fetchTocArticleSteps({ commit }, { collectionId }) {
+ commit('setTocLoading', true);
+
+ try {
+ const resp = await fetch(`/api/toc/articles?collectionId=${collectionId}`);
+ const data = await resp.json();
+
+ commit('setTocSucceed', true)
+ commit('setTocArticleSteps', data)
+ } catch (err) {
+ commit('setTocError', true);
+ }
+
+ commit('setTocLoading', false);
+ },
+ async fetchTocStepFiles({ commit }, { collectionId, articleId, stepId }) {
commit('setTocLoading', true);
- // const resp = await fetch(`/api/toc/${collectionId}`);
- // const { unassignedStepList, articleStepList } = await resp.json();
- const res = { "articles": [{ "id": "7c96a2d538c91", "name": "My Awesome Tutorial" }], "articleCommitMap": { "7c96a2d538c91": [{ "commit": "3dbe38f203a621c4a0ba7ff10c223fc90f004f9a", "articleId": "7c96a2d538c91", "id": "786f8709", "level": 2, "name": "first commit" }, { "commit": "b4b56b084bd2341107370e0fe7907c3810ef713f", "articleId": "7c96a2d538c91", "id": "e7623c55", "level": 2, "name": "second commit" }] }, "commitFileMap": { "3dbe38f203a621c4a0ba7ff10c223fc90f004f9a": [{ "file": "a.js" }], "b4b56b084bd2341107370e0fe7907c3810ef713f": [{ "file": "a.js" }] } }
- commit('setTocData', res);
+
+ try {
+ const resp = await fetch(`/api/toc/steps?collectionId=${collectionId}&articleId=${articleId}&stepId=${stepId}`);
+ const data = await resp.json();
+
+ commit('setTocSucceed', true)
+ commit('setTocStepFiles', data)
+ } catch (err) {
+ commit('setTocError', true);
+ }
+
commit('setTocLoading', false);
},
async saveToc({ state, commit }) {
diff --git a/packages/editor/src/views/Toc.vue b/packages/editor/src/views/Toc.vue
index bdaa05f7..2ce8a508 100644
--- a/packages/editor/src/views/Toc.vue
+++ b/packages/editor/src/views/Toc.vue
@@ -69,34 +69,39 @@ export default defineComponent({
return [];
},
},
- // computed: {
- // items() {
- // if (Object.keys(tocData).length === 0) return [];
-
- // let resItems = tocData.articles;
- // tocData.articles.map(article => {
- // article.items = tocData.articleCommitMap[article.id]
-
- // article.items = article.items.map(step => {
- // step.items = tocData.commitFileMap[step.commit];
-
- // return {
- // ...step,
- // type: 'container',
- // }
- // })
-
- // return {
- // ...article,
- // type: 'container'
- // }
- // })
- // }
- // },
+ computed: {
+ items() {
+ if (Object.keys(tocData).length === 0) return [];
+
+ let resItems = tocData.articles;
+ tocData.articles.map((article) => {
+ article.items = tocData.articleCommitMap[article.id];
+
+ article.items = article.items.map((step) => {
+ step.items = tocData.commitFileMap[step.commit];
+
+ return {
+ ...step,
+ type: 'container',
+ };
+ });
+
+ return {
+ ...article,
+ type: 'container',
+ };
+ });
+ },
+ },
watch: {
articleModifySteps: debounce(function(newVal) {
+ const { id } = this.$route.params;
+
// 更新服务端关于步骤编排
- this.fetchStepRearrange(newVal);
+ this.fetchStepRearrange({
+ collectionId: id,
+ articleModifySteps: newVal,
+ });
this.nowFetchStatus = REARRANGE_STATUS.STEP_REARRANGE;
}, 1000),
@@ -119,9 +124,11 @@ export default defineComponent({
},
mounted() {
const { id } = this.$route.params;
- // this.fetchToc({
- // collectionId: id,
- // });
+
+ // 只获取此 collectionId 下所有的文章，及其 steps
+ this.fetchTocArticleSteps({
+ collectionId: id,
+ });
},
data() {
return {
@@ -180,7 +187,8 @@ export default defineComponent({
},
methods: {
...mapActions('toc', [
- 'fetchToc',
+ 'fetchTocArticleSteps',
+ 'fetchTocStepFiles',
'fetchStepRearrange',
'fetchFileRearrange',
]),
@@ -217,6 +225,15 @@ export default defineComponent({
handleOpenFileArrangeModal(articleId, stepId) {
this.nowArticleId = articleId;
this.nowStepId = stepId;
+ const { id } = this.$route.params;
+
+ // 获取此 step 下的所有 file
+ // TODO: 这里后续有个 loading 的过程
+ this.fetchTocStepFiles({
+ collectionId: id,
+ articleId,
+ stepId,
+ });
this.visible = true;
},
onFileDrop(dropResult) {
From a3bd56dd6a3ffc76b5dfab858d358997a51a7f70 Mon Sep 17 00:00:00 2001
From: pftom <1043269994@qq.com>
Date: Sat, 9 Apr 2022 23:44:53 +0800
Subject: [PATCH 14/15] =?UTF-8?q?feat(core=20&=20server):=20=E5=AE=9E?=
=?UTF-8?q?=E7=8E=B0=E6=9C=8D=E5=8A=A1=E7=AB=AF=E5=9C=A8=E8=8E=B7=E5=8F=96?=
=?UTF-8?q?=E6=AD=A5=E9=AA=A4/=E6=96=87=E4=BB=B6=E6=97=B6=E7=9A=84=20API?=
=?UTF-8?q?=20=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/components/CollectionCatalogue.vue | 2 +-
packages/editor/src/router/index.js | 2 +-
packages/editor/src/store/toc.js | 6 +-
packages/editor/src/views/Toc.vue | 12 +-
packages/local-server/src/routes/toc.ts | 123 +++++++++++++-----
5 files changed, 104 insertions(+), 41 deletions(-)
diff --git a/packages/editor/src/components/CollectionCatalogue.vue b/packages/editor/src/components/CollectionCatalogue.vue
index a6947fc3..39072add 100644
--- a/packages/editor/src/components/CollectionCatalogue.vue
+++ b/packages/editor/src/components/CollectionCatalogue.vue
@@ -98,7 +98,7 @@ export default defineComponent({
},
onToggleToc() {
const { id } = this.$route.params;
- this.$router.push({ path: `/toc` });
+ this.$router.push({ path: `/toc?collectionId=${id}` });
},
},
});
diff --git a/packages/editor/src/router/index.js b/packages/editor/src/router/index.js
index 45591190..f2737ca1 100644
--- a/packages/editor/src/router/index.js
+++ b/packages/editor/src/router/index.js
@@ -11,7 +11,7 @@ const routes = [
{
path: '/',
name: 'Home',
- component: Toc,
+ component: Home,
},
{
path: '/toc',
diff --git a/packages/editor/src/store/toc.js b/packages/editor/src/store/toc.js
index 369a903d..f5f17642 100644
--- a/packages/editor/src/store/toc.js
+++ b/packages/editor/src/store/toc.js
@@ -39,9 +39,11 @@ export const actions = {
commit('setTocLoading', true);
try {
- const resp = await fetch(`/api/toc/articles?collectionId=${collectionId}`);
+ const resp = await fetch(`/api/toc/articleSteps?collectionId=${collectionId}`);
const data = await resp.json();
+ debugger;
+
commit('setTocSucceed', true)
commit('setTocArticleSteps', data)
} catch (err) {
@@ -54,7 +56,7 @@ export const actions = {
commit('setTocLoading', true);
try {
- const resp = await fetch(`/api/toc/steps?collectionId=${collectionId}&articleId=${articleId}&stepId=${stepId}`);
+ const resp = await fetch(`/api/toc/stepsFiles?collectionId=${collectionId}&articleId=${articleId}&stepId=${stepId}`);
const data = await resp.json();
commit('setTocSucceed', true)
diff --git a/packages/editor/src/views/Toc.vue b/packages/editor/src/views/Toc.vue
index 2ce8a508..78d44c93 100644
--- a/packages/editor/src/views/Toc.vue
+++ b/packages/editor/src/views/Toc.vue
@@ -95,11 +95,11 @@ export default defineComponent({
},
watch: {
articleModifySteps: debounce(function(newVal) {
- const { id } = this.$route.params;
+ const { collectionId } = this.$route.query;
// 更新服务端关于步骤编排
this.fetchStepRearrange({
- collectionId: id,
+ collectionId,
articleModifySteps: newVal,
});
@@ -123,11 +123,11 @@ export default defineComponent({
},
},
mounted() {
- const { id } = this.$route.params;
+ const { collectionId } = this.$route.query;
// 只获取此 collectionId 下所有的文章，及其 steps
this.fetchTocArticleSteps({
- collectionId: id,
+ collectionId,
});
},
data() {
@@ -225,12 +225,12 @@ export default defineComponent({
handleOpenFileArrangeModal(articleId, stepId) {
this.nowArticleId = articleId;
this.nowStepId = stepId;
- const { id } = this.$route.params;
+ const { collectionId } = this.$route.query;
// 获取此 step 下的所有 file
// TODO: 这里后续有个 loading 的过程
this.fetchTocStepFiles({
- collectionId: id,
+ collectionId,
articleId,
stepId,
});
diff --git a/packages/local-server/src/routes/toc.ts b/packages/local-server/src/routes/toc.ts
index 84fed2dc..2d14d747 100644
--- a/packages/local-server/src/routes/toc.ts
+++ b/packages/local-server/src/routes/toc.ts
@@ -21,7 +21,10 @@ type IArticle = {
type ICommit = {
id: string;
- name: string;
+ name?: string;
+ articleId?: string;
+ commit?: string;
+ level?: string;
};
type IFile = {
@@ -39,18 +42,18 @@ type ICommitFileMap = {
const router = Router();
-router.get('/', async (req, res) => {
+router.get('/articleSteps', async (req, res) => {
+ const { collectionId } = req.params;
+
let persistence = getDocPersistence();
- const db = getCollectionDb(req.params.collectionId);
+ const db = getCollectionDb(collectionId);
const { articles = [] } = db.data!;
let resObj = {
// 所有的文章
articles: [] as IArticle[],
articleCommitMap: {} as IArticleCommitMap,
- commitFileMap: {} as ICommitFileMap,
};
- let testRes = [] as any;
articles.forEach((article) =>
resObj.articles.push({
@@ -59,6 +62,84 @@ router.get('/', async (req, res) => {
}),
);
+ await Promise.all(
+ articles.map(async (article, index) => {
+ const ydoc = await persistence.getYDoc(article.id);
+ const fragment = ydoc.getXmlFragment('prosemirror');
+
+ let oneArticleCommit = {} as ICommit;
+
+ ydoc.transact(() => {
+ fragment.toArray().forEach((element) => {
+ if (element instanceof Y.XmlText || element instanceof Y.XmlHook) {
+ return;
+ }
+
+ console.log('element', element.nodeName);
+
+ switch (element.nodeName) {
+ case 'step_start': {
+ const commit = element.getAttribute('commit');
+ oneArticleCommit['commit'] = commit;
+ oneArticleCommit['articleId'] = article.id;
+
+ break;
+ }
+
+ case 'heading': {
+ const name = element.firstChild?.toJSON();
+ const id = element.getAttribute('id');
+ const level = element.getAttribute('level');
+
+ oneArticleCommit['id'] = id;
+ oneArticleCommit['level'] = level;
+ oneArticleCommit['name'] = name;
+
+ break;
+ }
+
+ case 'step_end': {
+ if (
+ resObj.articleCommitMap[article.id] &&
+ Array.isArray(resObj.articleCommitMap[article.id])
+ ) {
+ resObj.articleCommitMap[article.id].push(oneArticleCommit);
+ } else {
+ resObj.articleCommitMap[article.id] = [];
+ resObj.articleCommitMap[article.id].push(oneArticleCommit);
+ }
+
+ // 一次 Commit 遍历结束，置空此对象
+ oneArticleCommit = {} as ICommit;
+
+ break;
+ }
+
+ default: {
+ // 其他节点不进行处理
+ }
+ }
+ });
+ });
+ }),
+ );
+
+ res.json({ res: resObj });
+});
+
+router.get('/stepsFiles', async (req, res) => {
+ const { collectionId, articleId, stepId } = req.params;
+
+ let persistence = getDocPersistence();
+ const db = getCollectionDb(collectionId);
+ const { articles = [] } = db.data!;
+
+ let resObj = {
+ // 所有的文章
+ articleCommitMap: {} as IArticleCommitMap,
+ commitFileMap: {} as ICommitFileMap,
+ };
+
await Promise.all(
articles.map(async (article, index) => {
const ydoc = await persistence.getYDoc(article.id);
@@ -149,33 +230,13 @@ router.get('/', async (req, res) => {
}),
);
- // for (let article of articles) {
- // const articleItem: TocArticleItem = {
- // ...article,
- // type: 'article',
- // };
- // articleStepList.push(articleItem);
-
- // for (let step of article.steps) {
- // const stepDoc = loadStepSync(step.id);
- // const stepItem: TocStepItem = {
- // type: 'step',
- // ...stepDoc.attrs,
- // };
- // articleStepList.push(stepItem);
- // }
- // }
+ // 目前默认有
+ const filteredCommit = resObj.articleCommitMap[articleId].filter(
+ (item) => item.commit === stepId,
+ )[0];
- // for (let step of unassignedSteps) {
- // const stepDoc = loadStepSync(step.id);
- // const stepItem: TocStepItem = {
- // type: 'step',
- // ...stepDoc.attrs,
- // };
- // unassignedStepList.push(stepItem);
- // }
-
- res.json({ res: resObj });
+ // 返回最终的结果
+ res.json({ res: { ...filteredCommit, files: resObj.commitFileMap[stepId] } });
});
// 直接通过修改 ydoc 的方式，然后实现 ydoc 同步 Prosemirror
From 5e344245f9afe7628bfed4af156901e93abacdaf Mon Sep 17 00:00:00 2001
From: pftom <1043269994@qq.com>
Date: Wed, 13 Apr 2022 10:58:50 +0800
Subject: [PATCH 15/15] =?UTF-8?q?feat(editor=20&=20server):=20=E8=B0=83?=
=?UTF-8?q?=E9=80=9A=E6=8E=A5=E5=8F=A3=E5=92=8C=E5=89=8D=E7=AB=AF=E6=95=B0?=
=?UTF-8?q?=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/editor/src/store/toc.js | 83 +++++++++++---
packages/editor/src/views/Toc.vue | 140 +++++++++++-------------
packages/local-server/src/routes/toc.ts | 2 +-
3 files changed, 131 insertions(+), 94 deletions(-)
diff --git a/packages/editor/src/store/toc.js b/packages/editor/src/store/toc.js
index f5f17642..99fba7d5 100644
--- a/packages/editor/src/store/toc.js
+++ b/packages/editor/src/store/toc.js
@@ -31,21 +31,53 @@ export const mutations = {
},
setError(state, data) {
state.tocError = data;
- }
+ },
};
export const actions = {
async fetchTocArticleSteps({ commit }, { collectionId }) {
commit('setTocLoading', true);
+ console.log('hello');
try {
- const resp = await fetch(`/api/toc/articleSteps?collectionId=${collectionId}`);
- const data = await resp.json();
+ // const resp = await fetch(`/api/toc/articleSteps?collectionId=${collectionId}`);
+
+ // 这里因为服务端 IO 错误，TODO：后续排查，先临时拿最终结果来操作
+ // const data = await resp.json();
+ const data = {
+ res: {
+ articles: [{ id: 'ec365f5839d3f', name: 'My Awesome Tutorial' }],
+ articleCommitMap: {
+ ec365f5839d3f: [
+ {
+ commit: '340a5ce8255ea4f89f67644f5404879e8208388d',
+ articleId: 'ec365f5839d3f',
+ id: 'ade772a6',
+ level: 2,
+ name: 'first commit',
+ },
+ {
+ commit: '362eae41ffb474f69e6e51b89532ae79ad4fc601',
+ articleId: 'ec365f5839d3f',
+ id: '0441b4f9',
+ level: 2,
+ name: 'second commit',
+ },
+ ],
+ },
+ },
+ };
+
+ const resItem = data.res.articles;
+ const tocArticleSteps = resItem.map((article) => {
+ const steps = data.res.articleCommitMap[article.id];
+ article.steps = steps;
- debugger;
+ return article;
+ });
- commit('setTocSucceed', true)
- commit('setTocArticleSteps', data)
+ commit('setTocSucceed', true);
+ commit('setTocArticleSteps', tocArticleSteps);
} catch (err) {
commit('setTocError', true);
}
@@ -56,11 +88,26 @@ export const actions = {
commit('setTocLoading', true);
try {
- const resp = await fetch(`/api/toc/stepsFiles?collectionId=${collectionId}&articleId=${articleId}&stepId=${stepId}`);
- const data = await resp.json();
+ // const resp = await fetch(`/api/toc/stepsFiles?collectionId=${collectionId}&articleId=${articleId}&stepId=${stepId}`);
+ // const data = await resp.json();
+ const data = {
+ '362eae41ffb474f69e6e51b89532ae79ad4fc601': {
+ commit: '362eae41ffb474f69e6e51b89532ae79ad4fc601',
+ articleId: 'ac6e583be919a',
+ id: '1aa9ce7d',
+ level: 2,
+ name: 'first commit',
+ files: [
+ {
+ file: 'a.js',
+ id: '12345',
+ },
+ ],
+ },
+ };
- commit('setTocSucceed', true)
- commit('setTocStepFiles', data)
+ commit('setTocSucceed', true);
+ commit('setTocStepFiles', data);
} catch (err) {
commit('setTocError', true);
}
@@ -94,13 +141,13 @@ export const actions = {
},
body: JSON.stringify({
articleModifySteps,
- })
- })
+ }),
+ });
- commit('setTocSucceed', true)
+ commit('setTocSucceed', true);
} catch (err) {
console.log('err', err);
- commit('setTocError', true)
+ commit('setTocError', true);
}
},
async fetchFileRearrange({ commit }, payload) {
@@ -115,13 +162,13 @@ export const actions = {
},
body: JSON.stringify({
...payload,
- })
- })
+ }),
+ });
- commit('setTocSucceed', true)
+ commit('setTocSucceed', true);
} catch (err) {
console.log('err', err);
- commit('setTocError', true)
+ commit('setTocError', true);
}
},
};
diff --git a/packages/editor/src/views/Toc.vue b/packages/editor/src/views/Toc.vue
index 78d44c93..6614ee01 100644
--- a/packages/editor/src/views/Toc.vue
+++ b/packages/editor/src/views/Toc.vue
@@ -8,10 +8,10 @@
:get-child-payload="getChildPayload(index)"
@drop="onDrop(index, $event)"
>
-
+
{{ step.name }}
@@ -35,7 +35,7 @@