Feat add file adapt

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'
+  }
+}

packages/editor/jsconfig.json

@@ -3,7 +3,8 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "allowJs": true
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules"]

packages/editor/package.json

@@ -6,6 +6,7 @@
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "preview": "serve ./dist/",
+    "start:editor": "vue-cli-service serve",
     "start": "concurrently -r \"yarn start:api\" \"vue-cli-service serve\"",
     "start:api": "cd ../local-server && yarn start"
   },
@@ -44,6 +45,7 @@
     "vue": "^2.6.11",
     "vue-demi": "^0.7.4",
     "vue-router": "^3.2.0",
+    "vue-smooth-dnd": "^0.8.1",
     "vuex": "^3.4.0",
     "y-prosemirror": "^1.0.14",
     "y-websocket": "^1.3.18",

packages/editor/src/components/CollectionCatalogue.vue

@@ -73,7 +73,6 @@ export default defineComponent({
       'setDrawerType',
       'setChildDrawerType',
     ]),
-    ...mapActions('toc', ['fetchToc']),
     onClickCatalogueItem(articleId) {
       this.setNowArticleId(articleId);
       this.$router
@@ -98,8 +97,8 @@ export default defineComponent({
       this.setChildDrawerType(drawerType);
     },
     onToggleToc() {
-      this.setTocVisible(true);
-      this.fetchToc();
+      const { id } = this.$route.params;
+      this.$router.push({ path: `/toc?collectionId=${id}` });
     },
   },
 });

packages/editor/src/components/toc/StepAllocation.vue

@@ -1,129 +1,146 @@
 <template>
-  <a-modal
-    title="步骤编排"
-    width="70%"
-    :visible="tocVisible"
-    :confirm-loading="tocSaving"
-    @ok="handleOk"
-    @cancel="handleCancel"
-  >
-    <a-spin :spinning="tocLoading">
-      <div class="w-auto m-auto">
-        <a-row>
-          <a-col :span="8" class="box-border">
-            <div class="pl-6 pr-6">
-              <div class="pb-4 border-b">
-                <h5 class="text-base">待分配步骤</h5>
-                <p class="text-sm font-normal mt-2">
-                  把步骤分配给目录中对应的文章
-                </p>
-              </div>
-            </div>
-            <div class="menu-body">
-              <div class="w-full my-4">
-                <a-input-search
-                  placeholder="搜索步骤的标题"
-                  style="height: 40px"
-                />
-              </div>
-              <ul class="list-none">
-                <li
-                  v-for="step in releasedSteps"
-                  :key="step.id"
-                  class="step-list-item px-4 h-12"
-                >
-                  <span>
-                    <OutdatedTag v-if="step.outdated"></OutdatedTag>
-                    <span class="step-title">{{ step.name }}</span>
-                  </span>
-                  <span>
-                    <a-popconfirm
-                      class="mr-1"
-                      v-if="step.outdated"
-                      title="确定删除此过时步骤吗？"
-                      @confirm="deleteReleasedStep(step.id)"
-                    >
-                      <a-icon type="delete"></a-icon>
-                    </a-popconfirm>
-                    <span
-                      class="list-item-action hidden"
-                      @click="assignStep(step)"
-                    >
-                      <span class="mr-1">添加</span>
-                      <a-icon type="double-right"></a-icon>
-                    </span>
-                  </span>
-                </li>
-              </ul>
-            </div>
-          </a-col>
-          <a-col
-            :span="16"
-            class="box-border bg-white border border-gray-50 px-12"
+  <div class="grid grid-cols-4 gap-4 px-4 pt-6 h-full">
+    <div class=" box-border px-6 py-8 bg-white rounded-sm">
+      <div>
+        <div class="pb-4 border-b">
+          <h5 class="text-base">待分配步骤</h5>
+          <p class="text-sm font-normal mt-2">
+            把步骤分配给目录中对应的文章
+          </p>
+        </div>
+      </div>
+      <div class="">
+        <div class="w-full my-4">
+          <a-input-search placeholder="搜索步骤的标题" style="height: 40px" />
+        </div>
+        <ul class="list-none">
+          <li
+            v-for="step in releasedSteps"
+            :key="step.id"
+            class="step-list-item px-4 h-12"
+          >
+            <span>
+              <OutdatedTag v-if="step.outdated"></OutdatedTag>
+              <span class="step-title">{{ step.name }}</span>
+            </span>
+            <span>
+              <a-popconfirm
+                class="mr-1"
+                v-if="step.outdated"
+                title="确定删除此过时步骤吗？"
+                @confirm="deleteReleasedStep(step.id)"
+              >
+                <a-icon type="delete"></a-icon>
+              </a-popconfirm>
+              <span class="list-item-action hidden" @click="assignStep(step)">
+                <span class="mr-1">添加</span>
+                <a-icon type="double-right"></a-icon>
+              </span>
+            </span>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div
+      class="col-span-2 box-border bg-white border border-gray-50 px-8 py-8 rounded-sm"
+    >
+      <div class="border-b border-gray-100 pb-4">
+        <h1 class="text-2xl">文集目录</h1>
+        <p class="text-sm mt-2 font-normal text-gray-400">
+          选择文章，点击添加或拖拽左边的步骤进行分配
+        </p>
+      </div>
+      <div>
+        <ul class="list-none pl-0">
+          <li
+            v-for="item in articleSteps"
+            v-show="item.type === 'article' || item.articleId === activeArticle"
+            :key="item.id"
+            class="step-list-item h-10 px-4"
+            :class="{
+              'ml-6': item.type === 'step',
+              'border-green-600': item.id === activeArticle,
+            }"
+            @click="toggleActiveArticle(item)"
+          >
+            <span>
+              <a-icon
+                v-if="item.type === 'article'"
+                :type="activeArticle == item.id ? 'caret-down' : 'caret-right'"
+              ></a-icon>
+              <OutdatedTag
+                v-if="item.type === 'step' && item.outdated"
+              ></OutdatedTag>
+              <span
+                class="step-title"
+                :style="{ width: item.outdated ? '390px' : '430px' }"
+              >
+                {{ item.name }}
+              </span>
+            </span>
+            <span
+              v-if="item.type === 'step'"
+              class="list-item-action list-item-tail"
+              >步骤</span
+            >
+            <span class="list-item-action hidden">
+              <a-popconfirm
+                title="确认要删除文章吗？"
+                v-if="item.type === 'article'"
+                @confirm="deleteArticle(item)"
+              >
+                <a-icon type="delete"></a-icon>
+              </a-popconfirm>
+              <span v-else @click="releaseStep(item)">
+                <a-icon type="delete"></a-icon>
+              </span>
+            </span>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="px-6 py-8 bg-white h-full rounded-sm">
+      <div>
+        <div class="pb-4 border-b">
+          <h5 class="text-base">移动文件</h5>
+          <p class="text-sm font-normal mt-2">
+            对选中步骤中的文件位置进行调整
+          </p>
+        </div>
+      </div>
+      <div class="">
+        <div class="w-full my-4">
+          <a-input-search placeholder="搜索步骤的标题" style="height: 40px" />
+        </div>
+        <ul class="list-none">
+          <li
+            v-for="step in releasedSteps"
+            :key="step.id"
+            class="step-list-item px-4 h-12"
           >
-            <div class="border-b border-gray-100 pb-4">
-              <h1 class="text-2xl">文集目录</h1>
-              <p class="text-sm mt-2 font-normal text-gray-400">
-                选择文章，点击添加或拖拽左边的步骤进行分配
-              </p>
-            </div>
-            <div>
-              <ul class="list-none mt-4">
-                <li
-                  v-for="item in articleSteps"
-                  v-show="
-                    item.type === 'article' || item.articleId === activeArticle
-                  "
-                  :key="item.id"
-                  class="step-list-item h-10 px-4"
-                  :class="{
-                    'ml-6': item.type === 'step',
-                    'border-green-600': item.id === activeArticle,
-                  }"
-                  @click="toggleActiveArticle(item)"
-                >
-                  <span>
-                    <a-icon
-                      v-if="item.type === 'article'"
-                      :type="
-                        activeArticle == item.id ? 'caret-down' : 'caret-right'
-                      "
-                    ></a-icon>
-                    <OutdatedTag
-                      v-if="item.type === 'step' && item.outdated"
-                    ></OutdatedTag>
-                    <span
-                      class="step-title"
-                      :style="{ width: item.outdated ? '390px' : '430px' }"
-                    >
-                      {{ item.name }}
-                    </span>
-                  </span>
-                  <span
-                    v-if="item.type === 'step'"
-                    class="list-item-action list-item-tail"
-                    >步骤</span
-                  >
-                  <span class="list-item-action hidden">
-                    <a-popconfirm
-                      title="确认要删除文章吗？"
-                      v-if="item.type === 'article'"
-                      @confirm="deleteArticle(item)"
-                    >
-                      <a-icon type="delete"></a-icon>
-                    </a-popconfirm>
-                    <span v-else @click="releaseStep(item)">
-                      <a-icon type="delete"></a-icon>
-                    </span>
-                  </span>
-                </li>
-              </ul>
-            </div>
-          </a-col>
-        </a-row>
+            <span>
+              <OutdatedTag v-if="step.outdated"></OutdatedTag>
+              <span class="step-title">{{ step.name }}</span>
+            </span>
+            <span>
+              <a-popconfirm
+                class="mr-1"
+                v-if="step.outdated"
+                title="确定删除此过时步骤吗？"
+                @confirm="deleteReleasedStep(step.id)"
+              >
+                <a-icon type="delete"></a-icon>
+              </a-popconfirm>
+              <span class="list-item-action hidden" @click="assignStep(step)">
+                <span class="mr-1">添加</span>
+                <a-icon type="double-right"></a-icon>
+              </span>
+            </span>
+          </li>
+        </ul>
       </div>
-    </a-spin>
-  </a-modal>
+    </div>
+  </div>
 </template>
 
 <script>

packages/editor/src/router/index.js

@@ -3,6 +3,7 @@ import VueRouter from 'vue-router';
 
 import Home from '../views/Home.vue';
 import Article from '../views/Article.vue';
+import Toc from '../views/Toc.vue';
 
 Vue.use(VueRouter);
 
@@ -12,6 +13,11 @@ const routes = [
     name: 'Home',
     component: Home,
   },
+  {
+    path: '/toc',
+    name: 'Toc',
+    component: Toc,
+  },
   {
     path: '/articles/:id',
     name: 'Article',
@@ -20,7 +26,6 @@ const routes = [
 ];
 
 const router = new VueRouter({
-  mode: 'history',
   base: process.env.BASE_URL,
   routes,
 });