debug

2023-12-04 22:59:33 +08:00
parent c368833d10
commit 71b467b814
15 changed files with 475 additions and 451 deletions
--- a/src/components/Input.vue
+++ b/src/components/Input.vue
@@ -2,7 +2,8 @@
 import {$ref} from "vue/macros";
 import {Icon} from "@iconify/vue";
 import Close from "@/components/icon/Close.vue";
-import {useWindowClick} from "@/hooks/event.ts";
+import {useDisableEventListener, useWindowClick} from "@/hooks/event.ts";
+import {watch} from "vue";

 defineProps<{
  modelValue: string
@@ -17,6 +18,8 @@ useWindowClick((e: PointerEvent) => {
  focus = inputEl.contains(e.target as any);
 })

+useDisableEventListener(() => focus)
+
 </script>

 <template>
@@ -30,7 +33,9 @@ useWindowClick((e: PointerEvent) => {
           :value="modelValue"
           @input="e=>$emit('update:modelValue',e.target.value)"
    >
-    <Close @click="$emit('update:modelValue','')"/>
+    <transition name="fade">
+      <Close v-if="modelValue" @click="$emit('update:modelValue','')"/>
+    </transition>
  </div>
 </template>

--- a/src/components/article/EditArticle.vue
+++ b/src/components/article/EditArticle.vue
@@ -448,7 +448,7 @@ defineExpose({save, getEditArticle: () => cloneDeep(editArticle)})
    border-radius: 8rem;

    .section {
-      background: var(--color-item-bg);
+      background: var(--color-textarea-bg);
      margin-bottom: 20rem;
      padding: var(--space);
      border-radius: 8rem;
--- a/src/components/article/EditSingleArticleModal.vue
+++ b/src/components/article/EditSingleArticleModal.vue
@@ -4,6 +4,7 @@ import {Article, DefaultArticle} from "@/types.ts";
 import {cloneDeep} from "lodash-es";
 import Dialog from "@/components/dialog/Dialog.vue";
 import EditArticle from "@/components/article/EditArticle.vue";
+import {useDisableEventListener} from "@/hooks/event.ts";

 interface IProps {
  article?: Article
@@ -16,14 +17,18 @@ const props = withDefaults(defineProps<IProps>(), {
 })
 const emit = defineEmits<{
  save: [val: Article]
+  'update:modelValue': [val: boolean]
 }>()

+useDisableEventListener(() => props.modelValue)
+
 </script>

 <template>
  <Dialog
      :header="false"
      :model-value="props.modelValue"
+      @close="emit('update:modelValue',false)"
      :full-screen="true"
  >
    <div class="wrapper">
--- a/src/components/dialog/ArticleContentDialog.vue
+++ b/src/components/dialog/ArticleContentDialog.vue
@@ -65,7 +65,7 @@ onUnmounted(() => {
  display: flex;
  gap: var(--space);
  padding: var(--space);
-
+  color: var(--color-font-1);

  .article-content {
    flex: 1;
--- a/src/components/dialog/DictDiglog.vue
+++ b/src/components/dialog/DictDiglog.vue
@@ -108,10 +108,6 @@ function changeDict() {
  close()
 }

-function clickEvent(e) {
-  console.log('e', e)
-}
-
 const dictIsArticle = $computed(() => {
  return isArticle(runtimeStore.editDict.type)
 })
@@ -128,7 +124,7 @@ function showAllWordModal() {
  })
 }

-function resetChapterList(v) {
+function resetChapterList(v:number) {
  const temp = () => {
    runtimeStore.editDict.chapterWordNumber = v
    runtimeStore.editDict.chapterWords = chunk(runtimeStore.editDict.words, runtimeStore.editDict.chapterWordNumber)
@@ -158,7 +154,7 @@ function changeSort(v, notice: boolean = true) {
    } else {
      runtimeStore.editDict.words = reverse(cloneDeep(runtimeStore.editDict.originWords))
    }
-    resetChapterList()
+    resetChapterList(runtimeStore.editDict.chapterWordNumber)
    notice && ElMessage.success('已重新排序')
  }
  if (runtimeStore.editDict.isCustom) {
@@ -280,14 +276,16 @@ function handleChangeArticleChapterIndex(val) {
                            :title="`添加${dictIsArticle?'文章':'单词'}`"
                  />
                </div>
-                <div class="text">开始日期：-</div>
-                <div class="text">花费时间：-</div>
-                <div class="text">累积错误：-</div>
-                <div class="text">进度：
-                  <el-progress :percentage="0"
-                               :stroke-width="8"
-                               :show-text="false"/>
-                </div>
+                <template v-if="false">
+                  <div class="text">开始日期：-</div>
+                  <div class="text">花费时间：-</div>
+                  <div class="text">累积错误：-</div>
+                  <div class="text">进度：
+                    <el-progress :percentage="0"
+                                 :stroke-width="8"
+                                 :show-text="false"/>
+                  </div>
+                </template>
              </div>
              <div class="center-column">
                <div class="common-title">学习设置</div>
@@ -385,63 +383,52 @@ function handleChangeArticleChapterIndex(val) {
                      :title="`管理${dictIsArticle?'文章':'章节'}`"
                  />
                </div>
-                <template v-if="dictIsArticle">
-                  <ArticleList
-                      v-if="runtimeStore.editDict.articles.length"
-                      :isActive="false"
-                      v-loading="loading"
-                      :show-border="true"
-                      @title="(val:any) => emitter.emit(EventKey.openArticleContentModal,val.item)"
-                      @click="handleChangeArticleChapterIndex"
-                      :active-id="activeId"
-                      :list="runtimeStore.editDict.articles">
-                    <template v-slot:prefix="{item,index}">
-                      <input type="radio" :checked="activeId === item.id">
-                    </template>
-                  </ArticleList>
-                  <Empty v-else/>
-                </template>
-                <template v-else>
-                  <BaseList
-                      ref="chapterListRef"
-                      v-if="chapterList2.length"
-                      :list="chapterList2"
-                      :show-border="true"
-                      @click="(val:any) => runtimeStore.editDict.chapterIndex = val.index"
-                      :active-index="runtimeStore.editDict.chapterIndex"
-                  >
-                    <template v-slot:prefix="{ item, index }">
-                      <input type="radio" :checked="runtimeStore.editDict.chapterIndex === item.id">
-                    </template>
-                    <template v-slot="{ item, index }">
-                      <div class="item-title" @click.stop="showWordListModal({item,index})">
-                        <span>第{{ item.id + 1 }}章</span>&nbsp;&nbsp;&nbsp;
-                        <span>{{ runtimeStore.editDict.chapterWords[item.id]?.length }}词</span>
-                      </div>
-                    </template>
-                  </BaseList>
-                  <Empty v-else/>
-                </template>
+                <div class="list-content">
+                  <template v-if="dictIsArticle">
+                    <ArticleList
+                        v-if="runtimeStore.editDict.articles.length"
+                        :isActive="false"
+                        v-loading="loading"
+                        :show-border="true"
+                        @title="(val:any) => emitter.emit(EventKey.openArticleContentModal,val.item)"
+                        @click="handleChangeArticleChapterIndex"
+                        :active-id="activeId"
+                        :list="runtimeStore.editDict.articles">
+                      <template v-slot:prefix="{item,index}">
+                        <input type="radio" :checked="activeId === item.id">
+                      </template>
+                    </ArticleList>
+                    <Empty v-else/>
+                  </template>
+                  <template v-else>
+                    <BaseList
+                        ref="chapterListRef"
+                        v-if="chapterList2.length"
+                        :list="chapterList2"
+                        :show-border="true"
+                        @click="(val:any) => runtimeStore.editDict.chapterIndex = val.index"
+                        :active-index="runtimeStore.editDict.chapterIndex"
+                    >
+                      <template v-slot:prefix="{ item, index }">
+                        <input type="radio" :checked="runtimeStore.editDict.chapterIndex === item.id">
+                      </template>
+                      <template v-slot="{ item, index }">
+                        <div class="item-title" @click.stop="showWordListModal({item,index})">
+                          <span>第{{ item.id + 1 }}章</span>&nbsp;&nbsp;&nbsp;
+                          <span>{{ runtimeStore.editDict.chapterWords[item.id]?.length }}词</span>
+                        </div>
+                      </template>
+                    </BaseList>
+                    <Empty v-else/>
+                  </template>
+                </div>
+                <div class="footer">
+                  <!--            <BaseButton @click="step = 0">导出</BaseButton>-->
+                  <BaseButton @click="close">关闭</BaseButton>
+                  <BaseButton @click="changeDict">切换</BaseButton>
+                </div>
              </div>
            </div>
-            <div v-if="false" class="activity">
-              <ActivityCalendar
-                  :data="[{ date: '2023-05-22', count: 5 }]"
-                  :width="40"
-                  :height="7"
-                  :cellLength="16"
-                  :cellInterval="8"
-                  :fontSize="12"
-                  :showLevelFlag="false"
-                  :showWeekDayFlag="false"
-                  :clickEvent="clickEvent"
-              />
-            </div>
-            <div class="footer">
-              <!--            <BaseButton @click="step = 0">导出</BaseButton>-->
-              <BaseButton @click="close">关闭</BaseButton>
-              <BaseButton @click="changeDict">切换</BaseButton>
-            </div>
          </div>
        </div>
      </Slide>
@@ -505,17 +492,21 @@ $header-height: 60rem;
      display: flex;
      position: relative;

-      .left-column {
-        overflow: auto;
-        flex: 6;
+      .column {
+        background: var(--color-second-bg);
+        color: var(--color-font-1);
        display: flex;
        flex-direction: column;
+      }
+
+      .left-column {
+        flex: 5;
        gap: 10rem;
-        min-height: 100rem;
        position: relative;
-        color: var(--color-font-1);
        font-size: 14rem;
        padding-right: var(--space);
+        @extend .column;
+

        .name {
          font-size: 24rem;
@@ -542,10 +533,7 @@ $header-height: 60rem;
      .center-column {
        overflow: auto;
        flex: 7;
-        background: white;
-        border-radius: 10rem;
-        background: var(--color-second-bg);
-        color: var(--color-font-1);
+        @extend .column;

        .setting {
          .row {
@@ -575,58 +563,20 @@ $header-height: 60rem;
            font-size: 13rem;
          }
        }
-
      }

      .right-column {
        flex: 7;
-        border-radius: 10rem;
-        background: var(--color-second-bg);
-        color: var(--color-font-1);
-        display: flex;
-        flex-direction: column;
+        @extend .column;

-        .tabs {
+        .list-content {
+          flex: 1;
+          overflow: hidden;
          display: flex;
-          margin-bottom: 10rem;
-
-          .tab {
-            font-size: 20rem;
-            color: var(--color-font-3);
-            flex: 1;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            span {
-              cursor: pointer;
-              border-bottom: 3px solid transparent;
-              padding-bottom: 10rem;
-              transition: all .3s;
-            }
-
-            &.active {
-              color: var(--color-font-1);
-
-              span {
-                border-bottom: 3px solid var(--color-main-active);
-              }
-            }
-          }
-
-        }
-
-        .scroll {
-          height: calc(100% - 45rem);
        }
      }
    }

-    .activity {
-      display: flex;
-      justify-content: center;
-    }
-
    .footer {
      box-sizing: content-box;
      display: flex;
@@ -634,7 +584,7 @@ $header-height: 60rem;
      justify-content: flex-end;
      gap: var(--space);
      padding-right: var(--space);
-      margin-bottom: 20rem;
+      margin: var(--space) 0;
    }
  }
 }
--- a/src/components/list/DictItem.vue
+++ b/src/components/list/DictItem.vue
@@ -109,15 +109,15 @@ const emit = defineEmits<{
    position: absolute;
    bottom: 0;
    left: 0;
-    height: 50rem;
-    width: 50rem;
+    height: 55rem;
+    width: 55rem;
    color: white;  background-color: skyblue;
    clip-path: polygon(0 10%, 0% 100%, 100% 100%);
    font-size: 12rem;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
-    padding: 5rem;
+    padding: 3rem;
    box-sizing: border-box;
  }
 }