From b35a81f9818f921963650ac9532226c43c76f09a Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Wed, 22 Nov 2023 22:42:26 +0800
Subject: [PATCH] save

---
 components.d.ts               |    3 -
 src/pages/dict/DictManage.vue | 1145 +++++++++++++++++++++++++++++++++
 src/pages/dict/index.vue      | 1120 +-------------------------------
 3 files changed, 1147 insertions(+), 1121 deletions(-)
 create mode 100644 src/pages/dict/DictManage.vue

diff --git a/components.d.ts b/components.d.ts
index 69266dcc..1db7a9f4 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -31,7 +31,6 @@ declare module 'vue' {
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
-    ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElOption: typeof import('element-plus/es')['ElOption']
@@ -53,8 +52,6 @@ declare module 'vue' {
     PopConfirm: typeof import('./src/components/PopConfirm.vue')['default']
     RepeatSetting: typeof import('./src/components/toolbar/RepeatSetting.vue')['default']
     Ring: typeof import('./src/components/Ring.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
     SettingDialog: typeof import('./src/components/dialog/SettingDialog.vue')['default']
     Slide: typeof import('./src/components/Slide.vue')['default']
     Toolbar: typeof import('./src/components/toolbar/index.vue')['default']
diff --git a/src/pages/dict/DictManage.vue b/src/pages/dict/DictManage.vue
new file mode 100644
index 00000000..922da5e1
--- /dev/null
+++ b/src/pages/dict/DictManage.vue
@@ -0,0 +1,1145 @@
+<script setup lang="ts">
+import {dictionaryResources} from '@/assets/dictionary.ts'
+import {useBaseStore} from "@/stores/base.ts"
+import {onMounted, reactive, watch} from "vue"
+import {DefaultDict, Dict, DictResource, DictType, languageCategoryOptions, Sort, Word} from "@/types.ts"
+import {chunk, cloneDeep, groupBy, reverse, shuffle} from "lodash-es";
+import {$computed, $ref} from "vue/macros";
+import {Icon} from '@iconify/vue';
+import DictGroup from "@/components/toolbar/DictGroup.vue";
+import {v4 as uuidv4} from "uuid";
+import "vue-activity-calendar/style.css";
+import WordListDialog from "@/components/dialog/WordListDialog.vue";
+import {isArticle} from "@/hooks/article.ts";
+import {useRuntimeStore} from "@/stores/runtime.ts";
+import {useSettingStore} from "@/stores/setting.ts";
+import {emitter, EventKey} from "@/utils/eventBus.ts";
+import Slide from "@/components/Slide.vue";
+import DictList from "@/components/list/DictList.vue";
+import {FormInstance, FormRules} from "element-plus";
+import Empty from "@/components/Empty.vue";
+import BaseIcon from "@/components/BaseIcon.vue";
+import EditBatchArticleModal from "@/components/article/EditBatchArticleModal.vue";
+import VolumeIcon from "@/components/icon/VolumeIcon.vue";
+import {usePlayWordAudio} from "@/hooks/sound.ts";
+import BaseButton from "@/components/BaseButton.vue";
+import VirtualWordList from "@/components/list/VirtualWordList.vue";
+import Dialog from "@/components/dialog/Dialog.vue";
+// import ArrowRight from 'ico'
+const store = useBaseStore()
+const settingStore = useSettingStore()
+const runtimeStore = useRuntimeStore()
+let currentLanguage = $ref('my')
+let currentTranslateLanguage = $ref('common')
+let groupByLanguage = groupBy(dictionaryResources, 'language')
+let translateLanguageList = $ref([])
+let wordList = $ref([])
+
+let step = $ref(0)
+let loading = $ref(false)
+let show = $ref(false)
+let chapterList2 = $ref([])
+let chapterWordNumber = $ref(settingStore.chapterWordNumber)
+
+function close() {
+  show = false
+}
+
+async function selectDict(val: {
+  dict: DictResource | Dict,
+  index: number
+}) {
+  let item = val.dict
+  console.log('item', item)
+  step = 1
+  isAddDict = false
+  wordFormMode = FormMode.None
+  loading = true
+  wordList = []
+  let find: Dict = store.myDictList.find((v: Dict) => v.id === item.id)
+  if (find) {
+    runtimeStore.editDict = cloneDeep(find)
+  } else {
+    runtimeStore.editDict = cloneDeep({
+      ...cloneDeep(DefaultDict),
+      ...item,
+    })
+  }
+
+  if ([DictType.collect, DictType.simple, DictType.wrong].includes(runtimeStore.editDict.type)) {
+    wordList = cloneDeep(runtimeStore.editDict.words)
+  } else {
+    let url = `./dicts/${runtimeStore.editDict.language}/${runtimeStore.editDict.type}/${runtimeStore.editDict.translateLanguage}/${runtimeStore.editDict.url}`;
+    if (runtimeStore.editDict.type === DictType.word) {
+      if (!runtimeStore.editDict.originWords.length) {
+        let r = await fetch(url)
+        let v = await r.json()
+        runtimeStore.editDict.originWords = cloneDeep(v)
+        changeSort(runtimeStore.editDict.sort)
+      }
+      wordList = cloneDeep(runtimeStore.editDict.words)
+    }
+
+    if (runtimeStore.editDict.type === DictType.customWord) {
+      if (!runtimeStore.editDict.words.length) {
+        changeSort(runtimeStore.editDict.sort)
+      }
+      wordList = cloneDeep(runtimeStore.editDict.words)
+    }
+
+    if (runtimeStore.editDict.type === DictType.article) {
+      if (!runtimeStore.editDict.articles.length) {
+        let r = await fetch(url)
+        let v = await r.json()
+        runtimeStore.editDict.articles = cloneDeep(v.map(s => {
+          s.id = uuidv4()
+          return s
+        }))
+      }
+    }
+  }
+
+  chapterList2 = Array.from({length: runtimeStore.editDict.chapterWords.length}).map((v, i) => ({id: i}))
+  loading = false
+}
+
+function changeDict() {
+  store.changeDict(runtimeStore.editDict)
+  close()
+}
+
+function groupByDictTags(dictList: DictResource[]) {
+  return dictList.reduce<Record<string, DictResource[]>>((result, dict) => {
+    dict.tags.forEach((tag) => {
+      if (Object.prototype.hasOwnProperty.call(result, tag)) {
+        result[tag].push(dict)
+      } else {
+        result[tag] = [dict]
+      }
+    })
+    return result
+  }, {})
+}
+
+const groupByTranslateLanguage = $computed(() => {
+  let data: any
+  if (currentLanguage === 'article') {
+    let articleList = dictionaryResources.filter(v => v.type === 'article')
+    data = groupBy(articleList, 'translateLanguage')
+  } else if (currentLanguage === 'my') {
+    data = {
+      common: store.myDictList.concat([{name: '',} as any])
+    }
+  } else {
+    data = groupBy(groupByLanguage[currentLanguage], 'translateLanguage')
+  }
+  // console.log('groupByTranslateLanguage', data)
+  translateLanguageList = Object.keys(data)
+  currentTranslateLanguage = translateLanguageList[0]
+  return data
+})
+
+const groupedByCategoryAndTag = $computed(() => {
+  const currentTranslateLanguageDictList = groupByTranslateLanguage[currentTranslateLanguage]
+  const groupByCategory = groupBy(currentTranslateLanguageDictList, 'category')
+
+  let data = []
+  for (const [key, value] of Object.entries(groupByCategory)) {
+    data.push([key, groupByDictTags(value)])
+  }
+  // console.log('groupedByCategoryAndTag', data)
+  return data
+})
+
+function clickEvent(e) {
+  console.log('e', e)
+}
+
+const dictIsArticle = $computed(() => {
+  return isArticle(runtimeStore.editDict.type)
+})
+
+const chapterList = $computed(() => {
+  return dictIsArticle ? runtimeStore.editDict.articles.length : runtimeStore.editDict.chapterWords.length
+})
+
+function changeSort(v) {
+  if (v === Sort.normal) {
+    runtimeStore.editDict.words = cloneDeep(runtimeStore.editDict.originWords)
+  } else if (v === Sort.random) {
+    runtimeStore.editDict.words = shuffle(cloneDeep(runtimeStore.editDict.originWords))
+  } else {
+    runtimeStore.editDict.words = reverse(cloneDeep(runtimeStore.editDict.originWords))
+  }
+  resetChapterList()
+}
+
+
+/**/
+/*词典相关*/
+/**/
+
+
+let isAddDict = $ref(false)
+let categoryList = {}
+let tagList = {}
+
+const DefaultDictForm = {
+  id: '',
+  name: '',
+  description: '',
+  category: '',
+  tags: [],
+  translateLanguage: 'zh-CN',
+  language: 'en',
+  type: DictType.customWord
+}
+let dictForm: any = $ref(cloneDeep(DefaultDictForm))
+const dictFormRef = $ref<FormInstance>()
+const dictRules = reactive<FormRules>({
+  name: [
+    {required: true, message: '请输入名称', trigger: 'blur'},
+    {max: 20, message: '名称不能超过20个字符', trigger: 'blur'},
+  ],
+  category: [{required: true, message: '请选择', trigger: 'change'}],
+  tags: [{required: true, message: '请选择', trigger: 'change'}],
+})
+
+watch(() => dictForm.language, () => isAddDict && (dictForm.category = ''))
+watch(() => dictForm.category, () => isAddDict && (dictForm.tags = []))
+
+function editDict() {
+  // dictForm.id = store.editDict.id
+  // dictForm.name = store.editDict.name
+  // dictForm.description = store.editDict.description
+  console.log('store.editDict', runtimeStore.editDict)
+  dictForm = cloneDeep(runtimeStore.editDict)
+  //直接复制，上面会watch到category，然后把tags 设置为空
+  setTimeout(() => isAddDict = true, 0)
+}
+
+function closeDictForm() {
+  if (dictForm.id) {
+    isAddDict = false
+    dictForm = cloneDeep(DefaultDictForm)
+  } else {
+    step = 0
+  }
+}
+
+async function onSubmit() {
+  await dictFormRef.validate((valid, fields) => {
+    if (valid) {
+      let data: Dict = {
+        ...DefaultDict,
+        ...dictForm,
+      }
+      //任意修改，都将其变为自定义词典
+      if (data.type === DictType.word) data.type = DictType.customWord
+      if (data.type === DictType.article) data.type = DictType.customArticle
+
+      if (data.id) {
+        let rIndex = store.myDictList.findIndex(v => v.id === data.id)
+        store.myDictList[rIndex] = cloneDeep(data)
+        runtimeStore.editDict = cloneDeep(data)
+        isAddDict = false
+        ElMessage.success('修改成功')
+      } else {
+        data.id = 'custom-dict-' + Date.now()
+        if (store.myDictList.find(v => v.name === dictForm.name)) {
+          return ElMessage.warning('已有相同名称词典！')
+        } else {
+          store.myDictList.push(cloneDeep(data))
+          runtimeStore.editDict = cloneDeep(data)
+          isAddDict = false
+          ElMessage.success('添加成功')
+        }
+      }
+      console.log('submit!', data)
+    } else {
+      ElMessage.warning('请填写完整')
+    }
+  })
+}
+
+/**/
+/*词典相关*/
+/**/
+
+
+/**/
+/* 单词修改相关*/
+/**/
+enum FormMode {
+  None = -1,
+  Add = -2,
+}
+
+const DefaultFormWord = {
+  name: '',
+  usphone: '',
+  ukphone: '',
+  trans: ''
+}
+
+let wordFormMode = $ref(FormMode.None)
+let wordForm = $ref(cloneDeep(DefaultFormWord))
+const wordFormRef = $ref<FormInstance>()
+const wordRules = reactive<FormRules>({
+  name: [
+    {required: true, message: '请输入单词', trigger: 'blur'},
+    {max: 30, message: '名称不能超过30个字符', trigger: 'blur'},
+  ],
+})
+let wordListRef: any = $ref()
+
+//同步到我的词典列表
+function syncMyDictList() {
+  //任意修改，都将其变为自定义词典
+  if (runtimeStore.editDict.type === DictType.word) runtimeStore.editDict.type = DictType.customWord
+  if (runtimeStore.editDict.type === DictType.article) runtimeStore.editDict.type = DictType.customArticle
+
+  let rIndex = store.myDictList.findIndex(v => v.id === runtimeStore.editDict.id)
+  if (rIndex > -1) {
+    store.myDictList[rIndex] = cloneDeep(runtimeStore.editDict)
+  } else {
+    store.myDictList.push(cloneDeep(runtimeStore.editDict))
+  }
+}
+
+async function onSubmitWord() {
+  await wordFormRef.validate((valid, fields) => {
+    if (valid) {
+      let data: any = cloneDeep(wordForm)
+      if (data.trans) {
+        data.trans = data.trans.split('\n');
+      } else {
+        data.trans = []
+      }
+      if (wordFormMode === FormMode.Add) {
+        if (wordList.find(v => v.name === wordForm.name)) {
+          return ElMessage.warning('已有相同名称单词！')
+        } else {
+          runtimeStore.editDict.originWords.push(data)
+          runtimeStore.editDict.words.push(data)
+          //因为虚拟列表，必须重新赋值才能检测到更新
+          wordList = cloneDeep(runtimeStore.editDict.words)
+
+          if (runtimeStore.editDict.chapterWords.length) {
+            runtimeStore.editDict.chapterWords[runtimeStore.editDict.chapterWords.length - 1].push(data)
+          } else {
+            runtimeStore.editDict.chapterWords.push([data])
+            runtimeStore.editDict.chapterIndex = 0
+          }
+
+          ElMessage.success('添加成功')
+          wordForm = cloneDeep(DefaultFormWord)
+          setTimeout(wordListRef?.scrollToBottom, 100)
+        }
+        console.log('runtimeStore.editDict', runtimeStore.editDict)
+      } else {
+        let oldData = cloneDeep(runtimeStore.editDict.words[wordFormMode])
+        runtimeStore.editDict.words[wordFormMode] = data
+        //因为虚拟列表，必须重新赋值才能检测到更新
+        wordList = cloneDeep(runtimeStore.editDict.words)
+        //同步到原始列表，因为word可能是随机的，所以需要自己寻找index去修改原始列表
+        let rIndex = runtimeStore.editDict.originWords.findIndex(v => v.name === oldData.name)
+        if (rIndex > -1) {
+          runtimeStore.editDict.originWords[rIndex] = data
+        }
+
+        runtimeStore.editDict.chapterWords = runtimeStore.editDict.chapterWords.map(list => {
+          let rIndex2 = list.findIndex(v => v.name === oldData.name)
+          if (rIndex2 > -1) {
+            list[rIndex2] = data
+          }
+          return list
+        })
+        console.log('runtimeStore.editDict.chapterWords', runtimeStore.editDict.chapterWords)
+        ElMessage.success('修改成功')
+      }
+      syncMyDictList()
+    } else {
+      ElMessage.warning('请填写完整')
+    }
+  })
+}
+
+function delWord(word: Word, index: number) {
+  //同步到原始列表，因为word可能是随机的，所以需要自己寻找index去修改原始列表
+  let rIndex = runtimeStore.editDict.originWords.findIndex(v => v.name === word.name)
+  if (rIndex > -1) {
+    runtimeStore.editDict.originWords.splice(rIndex, 1)
+  }
+
+  runtimeStore.editDict.chapterWords.map(list => {
+    let rIndex2 = list.findIndex(v => v.name === word.name)
+    if (rIndex2 > -1) {
+      list.splice(rIndex2, 1)
+    }
+  })
+
+  runtimeStore.editDict.chapterWords = runtimeStore.editDict.chapterWords.filter(v => v.length)
+  if (runtimeStore.editDict.chapterWords.length === 0) runtimeStore.editDict.chapterIndex = -1
+  else {
+    if (runtimeStore.editDict.chapterIndex >= runtimeStore.editDict.chapterWords.length) {
+      runtimeStore.editDict.chapterIndex = runtimeStore.editDict.chapterWords.length - 1
+    }
+  }
+
+  runtimeStore.editDict.words.splice(index, 1)
+  wordList = cloneDeep(runtimeStore.editDict.words)
+  syncMyDictList()
+
+  closeWordForm()
+}
+
+function editWord(val: {
+  word: Word,
+  index: number
+}) {
+  wordFormMode = val.index
+  wordForm.name = val.word.name
+  wordForm.ukphone = val.word.ukphone
+  wordForm.usphone = val.word.usphone
+  wordForm.trans = val.word.trans.join('\n')
+}
+
+function closeWordForm() {
+  wordFormMode = FormMode.None
+  wordForm = cloneDeep(DefaultFormWord)
+}
+
+function addWord() {
+  // setTimeout(wordListRef?.scrollToBottom, 100)
+  wordFormMode = FormMode.Add
+  wordForm = cloneDeep(DefaultFormWord)
+}
+
+function add() {
+  if (dictIsArticle) {
+
+  } else {
+    addWord()
+  }
+}
+
+/**/
+/* 单词修改相关*/
+/**/
+
+watch(() => step, v => {
+  if (v === 0) {
+    closeWordForm()
+    closeDictForm()
+    chapterWordNumber = settingStore.chapterWordNumber
+  }
+})
+
+const playWordAudio = usePlayWordAudio()
+
+onMounted(() => {
+  dictionaryResources.map(v => {
+    if (categoryList[v.language]) {
+      if (!categoryList[v.language].find(w => w === v.category)) {
+        categoryList[v.language].push(v.category)
+      }
+    } else {
+      categoryList[v.language] = [v.category]
+    }
+    if (tagList[v.category]) {
+      tagList[v.category] = Array.from(new Set(tagList[v.category].concat(v.tags)))
+    } else {
+      tagList[v.category] = v.tags
+    }
+  })
+
+  emitter.on(EventKey.openDictModal, (type: 'detail' | 'list' | 'my' | 'collect' | 'simple') => {
+    if (type === "detail") {
+      selectDict({dict: store.currentDict, index: 0})
+    }
+    if (type === "list") {
+      currentLanguage = 'en'
+      step = 0
+    }
+    if (type === "my") {
+      currentLanguage = 'my'
+      step = 0
+    }
+    if (type === "collect") {
+      selectDict({dict: store.collect, index: 0})
+      wordFormMode = FormMode.Add
+      addWord()
+    }
+    if (type === "simple") {
+      selectDict({dict: store.simple, index: 0})
+      addWord()
+    }
+
+    show = true
+  })
+
+  // console.log('categoryList', categoryList)
+  // console.log('tagList', tagList)
+})
+
+let chapterIndex = $ref(-1)
+let residueWordList = $ref([])
+
+let currentChapterWordListCheckAll = $ref(false)
+let currentChapterWordListIsIndeterminate = $ref(false)
+let residueWordListCheckAll = $ref(false)
+let residueWordListIsIndeterminate = $ref(false)
+
+let currentChapterWordList: any[] = $computed(() => {
+  return runtimeStore.editDict.chapterWords[chapterIndex] ?? []
+})
+
+function toResidueWordList() {
+  let list = currentChapterWordList.filter(v => v.checked)
+  runtimeStore.editDict.chapterWords[chapterIndex] = currentChapterWordList.filter(v => !v.checked)
+  list.map(v => v.checked = false)
+  residueWordList = residueWordList.concat(list)
+  currentChapterWordListIsIndeterminate = currentChapterWordListCheckAll = false
+}
+
+function toChapterWordList() {
+  let list = residueWordList.filter(v => v.checked)
+  residueWordList = residueWordList.filter(v => !v.checked)
+  list.map(v => v.checked = false)
+  runtimeStore.editDict.chapterWords[chapterIndex] = runtimeStore.editDict.chapterWords[chapterIndex].concat(list)
+  residueWordListCheckAll = residueWordListIsIndeterminate = false
+}
+
+function addNewChapter() {
+  runtimeStore.editDict.chapterWords.push([])
+  chapterList2 = Array.from({length: runtimeStore.editDict.chapterWords.length}).map((v, i) => ({id: i}))
+}
+
+function delWordChapter(index: number) {
+  let list = runtimeStore.editDict.chapterWords[index]
+  list.map(v => v.checked = false)
+  residueWordList = residueWordList.concat(list)
+  runtimeStore.editDict.chapterWords.splice(index, 1)
+  if (chapterIndex >= index) chapterIndex--
+  if (chapterIndex < 0) chapterIndex = 0
+
+  syncMyDictList()
+}
+
+let showAllocationChapterDialog = $ref(false)
+
+function resetChapterList() {
+  residueWordList = []
+  chapterIndex = -1
+  runtimeStore.editDict.words.map(v => v.checked = false)
+  runtimeStore.editDict.chapterWords = chunk(runtimeStore.editDict.words, chapterWordNumber)
+  chapterList2 = Array.from({length: runtimeStore.editDict.chapterWords.length}).map((v, i) => ({id: i}))
+}
+
+function handleCheckedChapterWordListChange(source: any) {
+  source.checked = !source.checked
+  currentChapterWordListCheckAll = currentChapterWordList.every(v => v.checked)
+  if (currentChapterWordListCheckAll) {
+    currentChapterWordListIsIndeterminate = false
+  } else {
+    currentChapterWordListIsIndeterminate = currentChapterWordList.some(v => v.checked)
+  }
+}
+
+function handleCurrentChapterWordListCheckAll() {
+  currentChapterWordList.map(v => v.checked = currentChapterWordListCheckAll)
+  currentChapterWordListIsIndeterminate = false
+}
+
+function handleCheckedResidueWordListChange(source: any) {
+  source.checked = !source.checked
+  residueWordListCheckAll = residueWordList.every(v => v.checked)
+  if (residueWordListCheckAll) {
+    residueWordListIsIndeterminate = false
+  } else {
+    residueWordListIsIndeterminate = residueWordList.some(v => v.checked)
+  }
+}
+
+function handleCurrentResidueWordListCheckAll() {
+  residueWordList.map(v => v.checked = residueWordListCheckAll)
+  residueWordListIsIndeterminate = false
+}
+
+</script>
+
+<template>
+  <div id="DictDialog">
+    <Slide :slide-count="2" :step="step">
+      <div class="dict-page">
+        <header>
+          <div class="tabs">
+            <div class="tab"
+                 :class="currentLanguage === item.id && 'active'"
+                 @click="currentLanguage = item.id"
+                 v-for="item in languageCategoryOptions">
+              <img :src='item.flag'/>
+              <span>{{ item.name }}</span>
+            </div>
+          </div>
+          <Icon @click="close"
+                class="hvr-grow pointer"
+                width="20" color="#929596"
+                icon="ion:close-outline"/>
+        </header>
+        <div class="page-content">
+          <div class="dict-list-wrapper">
+            <template v-if="currentLanguage === 'my'">
+              <DictList
+                  @add="step = 1;isAddDict = true"
+                  @selectDict="selectDict"
+                  :list="groupByTranslateLanguage['common']"/>
+            </template>
+            <template v-else>
+              <div class="translate">
+                <span>翻译：</span>
+                <el-radio-group v-model="currentTranslateLanguage">
+                  <el-radio-button border v-for="i in translateLanguageList" :label="i">{{ i }}</el-radio-button>
+                </el-radio-group>
+              </div>
+              <DictGroup
+                  v-for="item in groupedByCategoryAndTag"
+                  :select-dict-name="runtimeStore.editDict.resourceId"
+                  @selectDict="selectDict"
+                  @detail="step = 1"
+                  :groupByTag="item[1]"
+                  :category="item[0]"
+              />
+            </template>
+          </div>
+        </div>
+      </div>
+      <div class="dict-detail-page">
+        <header>
+          <div class="left" @click.stop="step = 0">
+            <Icon icon="octicon:arrow-left-24" class="go" width="20"/>
+            <div class="title">
+              {{ runtimeStore.editDict.name }}
+            </div>
+            <BaseIcon
+                v-if="![DictType.collect,DictType.wrong,DictType.simple].includes(runtimeStore.editDict.type)"
+                class-name="edit-icon"
+                icon="tabler:edit"
+                @click='editDict'
+            />
+          </div>
+          <Icon @click="close"
+                class="hvr-grow pointer"
+                width="20" color="#929596"
+                icon="ion:close-outline"/>
+        </header>
+        <div class="detail" v-if="!isAddDict">
+          <div class="page-content">
+            <div class="left-column">
+              <div class="header flex space-between">
+                <div class="common-title">章节管理</div>
+                <BaseButton @click="showAllocationChapterDialog = true">智能分配</BaseButton>
+                <BaseIcon
+                    @click="addNewChapter"
+                    icon="fluent:add-20-filled"
+                    title="新增章节"/>
+              </div>
+              <virtual-list class="virtual-list"
+                            v-loading="loading"
+                            v-if="chapterList2.length"
+                            :keeps="20"
+                            data-key="id"
+                            :data-sources="chapterList2"
+                            :estimate-size="45"
+              >
+                <template #={source,index}>
+                  <div class="common-list-item space15"
+                       :class="chapterIndex === index && 'active'"
+                       @click="chapterIndex = index">
+                    <div class="flex gap10 flex1 ">
+                      <input type="radio" :checked="chapterIndex === index">
+                      <div class="item-title flex flex1 space-between">
+                        <span>第{{ index + 1 }}章</span>
+                        <span>{{ runtimeStore.editDict.chapterWords[index].length }}词</span>
+                      </div>
+                    </div>
+                    <div class="right">
+                      <BaseIcon
+                          class-name="del"
+                          @click="delWordChapter(index)"
+                          title="移除"
+                          icon="solar:trash-bin-minimalistic-linear"/>
+                    </div>
+                  </div>
+                </template>
+              </virtual-list>
+              <Empty v-else :show-add="true" @add="add"/>
+            </div>
+            <div class="center-column">
+              <div class="common-title flex space-between">
+                <div class="left">
+                  <el-checkbox
+                      v-model="currentChapterWordListCheckAll"
+                      :indeterminate="currentChapterWordListIsIndeterminate"
+                      @change="handleCurrentChapterWordListCheckAll"
+                      size="large"/>
+                  <span>全选</span>
+                </div>
+                <span>{{ chapterIndex > -1 ? `第${chapterIndex + 1}章` : '' }} 单词列表</span>
+              </div>
+              <virtual-list class="virtual-list"
+                            v-loading="loading"
+                            v-if="currentChapterWordList.length"
+                            :keeps="20"
+                            data-key="name"
+                            :data-sources="currentChapterWordList"
+                            :estimate-size="45"
+              >
+                <template #={source,index}>
+                  <div class="common-list-item space15"
+                       @click="handleCheckedChapterWordListChange(source)">
+                    <div class="flex gap10">
+                      <el-checkbox v-model="source.checked"
+                                   @change="handleCheckedChapterWordListChange(source)"
+                                   size="large"/>
+                      <div class="left">
+                        <div class="item-title">
+                          <span class="word">{{ source.name }}</span>
+                          <span class="phonetic">{{ source.usphone }}</span>
+                          <VolumeIcon class="volume" @click="playWordAudio(source.name)"></VolumeIcon>
+                        </div>
+                        <div class="item-sub-title" v-if="source.trans.length">
+                          <div v-for="item in source.trans">{{ item }}</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </virtual-list>
+              <Empty v-else :show-add="true" @add="addWord"/>
+            </div>
+            <div class="options-column">
+              <BaseButton @click="toChapterWordList"
+                          :disabled="!residueWordListIsIndeterminate?!residueWordListCheckAll:false">
+                左
+              </BaseButton>
+              <BaseButton @click="toResidueWordList"
+                          :disabled="!currentChapterWordListIsIndeterminate?!currentChapterWordListCheckAll:false">
+                右
+              </BaseButton>
+            </div>
+            <div class="center-column">
+              <div class="common-title flex space-between">
+                <div class="left">
+                  <el-checkbox
+                      v-model="residueWordListCheckAll"
+                      :indeterminate="residueWordListIsIndeterminate"
+                      @change="handleCurrentResidueWordListCheckAll"
+                      size="large"/>
+                  <span>全选</span>
+                </div>
+                <span>未分配单词列表</span>
+                <BaseIcon
+                    @click="addWord"
+                    icon="fluent:add-20-filled"
+                    title="新增单词"/>
+              </div>
+              <virtual-list class="virtual-list"
+                            v-loading="loading"
+                            v-if="residueWordList.length"
+                            :keeps="20"
+                            data-key="name"
+                            :data-sources="residueWordList"
+                            :estimate-size="45"
+              >
+                <template #={source,index}>
+                  <div class="common-list-item space15"
+                       @click="handleCheckedResidueWordListChange(source)">
+                    <div class="flex gap10">
+                      <el-checkbox v-model="source.checked"
+                                   @change="handleCheckedResidueWordListChange(source)"
+                                   size="large"/>
+                      <div class="left">
+                        <div class="item-title">
+                          <span class="word">{{ source.name }}</span>
+                          <span class="phonetic">{{ source.usphone }}</span>
+                          <VolumeIcon class="volume" @click="playWordAudio(source.name)"></VolumeIcon>
+                        </div>
+                        <div class="item-sub-title" v-if="source.trans.length">
+                          <div v-for="item in source.trans">{{ item }}</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </virtual-list>
+              <Empty v-else :show-add="true" @add="addWord"/>
+            </div>
+            <div class="right-column">
+              <div class="add" v-if="wordFormMode !== FormMode.None">
+                <div class="common-title">
+                  {{ wordFormMode === FormMode.Add ? '添加' : '修改' }}单词
+                </div>
+                <el-form
+                    class="form"
+                    ref="wordFormRef"
+                    :rules="wordRules"
+                    :model="wordForm"
+                    label-width="140rem">
+                  <el-form-item label="单词" prop="name">
+                    <el-input v-model="wordForm.name"/>
+                  </el-form-item>
+                  <el-form-item label="翻译">
+                    <el-input v-model="wordForm.trans"
+                              placeholder="多个翻译请换行"
+                              :autosize="{ minRows: 2, maxRows: 6 }"
+                              type="textarea"/>
+                  </el-form-item>
+                  <el-form-item label="音标/发音/注音①">
+                    <el-input v-model="wordForm.usphone"/>
+                  </el-form-item>
+                  <el-form-item label="音标/发音/注音②">
+                    <el-input v-model="wordForm.ukphone"/>
+                  </el-form-item>
+                  <div class="flex-center">
+                    <el-button @click="closeWordForm">关闭</el-button>
+                    <el-button type="primary" @click="onSubmitWord">{{
+                        wordFormMode === FormMode.Add ? '添加' : '保存'
+                      }}
+                    </el-button>
+                  </div>
+                </el-form>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="edit-dict" v-else>
+          <div class="wrapper">
+            <div class="common-title">{{ dictForm.id ? '修改' : '添加' }}词典</div>
+            <el-form
+                ref="dictFormRef"
+                :rules="dictRules"
+                :model="dictForm"
+                label-width="120rem">
+              <el-form-item label="名称" prop="name">
+                <el-input v-model="dictForm.name"/>
+              </el-form-item>
+              <el-form-item label="描述">
+                <el-input v-model="dictForm.description" type="textarea"/>
+              </el-form-item>
+              <el-form-item label="语言">
+                <el-select v-model="dictForm.language" placeholder="请选择选项">
+                  <el-option label="英语" value="en"/>
+                  <el-option label="德语" value="de"/>
+                  <el-option label="日语" value="ja"/>
+                  <el-option label="代码" value="code"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="翻译语言">
+                <el-select v-model="dictForm.translateLanguage" placeholder="请选择选项">
+                  <!--                <el-option label="通用" value="common"/>-->
+                  <el-option label="中文" value="zh-CN"/>
+                  <el-option label="英语" value="en"/>
+                  <el-option label="德语" value="de"/>
+                  <el-option label="日语" value="ja"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="分类" prop="category">
+                <el-select v-model="dictForm.category" placeholder="请选择选项">
+                  <el-option :label="i" :value="i" v-for="i in categoryList[dictForm.language]"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="标签" prop="tags">
+                <el-select
+                    multiple
+                    v-model="dictForm.tags" placeholder="请选择选项">
+                  <el-option :label="i" :value="i" v-for="i in tagList[dictForm.category]"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="类型">
+                <el-select v-model="dictForm.type" placeholder="请选择选项">
+                  <el-option label="单词" :value="DictType.customWord"/>
+                  <el-option label="文章" :value="DictType.customArticle"/>
+                </el-select>
+              </el-form-item>
+              <div class="flex-center">
+                <el-button @click="closeDictForm">关闭</el-button>
+                <el-button type="primary" @click="onSubmit">确定</el-button>
+              </div>
+            </el-form>
+          </div>
+        </div>
+      </div>
+    </Slide>
+  </div>
+
+  <Dialog
+      title="智能分配单词"
+      :footer="true"
+      @ok="resetChapterList"
+      @cancel="chapterWordNumber = settingStore.chapterWordNumber"
+      v-model="showAllocationChapterDialog">
+    <div class="allocation-chapter">
+      <div class="desc">
+        <div>为您自动创建章节以及分配单词</div>
+        <div>注意：已存在的章节将被删除！</div>
+      </div>
+      <div class="row">
+        <div class="label">每章单词数</div>
+        <span class="text">最小:10</span>
+        <el-slider :min="10"
+                   :step="10"
+                   :max="runtimeStore.editDict.words.length ?? 10"
+                   v-model="chapterWordNumber"
+        />
+        <span class="text">最大:{{ runtimeStore.editDict.words.length ?? 10 }}</span>
+      </div>
+
+      <div class="notice">鼠标按住滑块，按键盘左右箭头可进行微调</div>
+
+      <div class="row">
+        <div class="label">将会创建</div>
+        <div class="option">
+          <span>{{ Math.ceil(runtimeStore.editDict.words.length / chapterWordNumber) }}章</span>
+        </div>
+      </div>
+      <div class="row">
+        <div class="label">每章</div>
+        <div class="option">
+          <span>{{ chapterWordNumber }}个单词</span>
+        </div>
+      </div>
+      <div class="row" :style="{opacity:runtimeStore.editDict.words.length % chapterWordNumber}">
+        <div class="label">最后一章</div>
+        <div class="option">
+          <span>{{ runtimeStore.editDict.words.length % chapterWordNumber }}个单词</span>
+        </div>
+      </div>
+    </div>
+  </Dialog>
+
+  <WordListDialog/>
+  <EditBatchArticleModal/>
+</template>
+
+<style scoped lang="scss">
+@import "@/assets/css/variable";
+
+$modal-mask-bg: rgba(#000, .15);
+$radius: 16rem;
+$time: 0.3s;
+$header-height: 60rem;
+
+#DictDialog {
+  font-size: 14rem;
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--color-second-bg);
+  z-index: 1;
+  width: 70vw;
+  height: 75vh;
+}
+
+.dict-page {
+  width: 50%;
+  height: 100%;
+  $header-height: 60rem;
+  padding: var(--space);
+  padding-top: 0;
+  box-sizing: border-box;
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: $header-height;
+
+    .tabs {
+      display: flex;
+      gap: 20rem;
+
+      .tab {
+        color: var(--color-font-1);
+        cursor: pointer;
+        padding: 10rem;
+        padding-bottom: 5rem;
+        transition: all .5s;
+        border-bottom: 2px solid transparent;
+        display: flex;
+        align-items: center;
+        gap: 6rem;
+
+        &.active {
+          border-bottom: 2px solid $main;
+        }
+
+        img {
+          height: 30rem;
+        }
+      }
+    }
+  }
+
+  .page-content {
+    display: flex;
+    height: calc(100% - $header-height);
+
+    .dict-list-wrapper {
+      flex: 1;
+      overflow: auto;
+      height: 100%;
+      padding-right: var(--space);
+
+      .translate {
+        display: flex;
+        align-items: center;
+        color: var(--color-font-1);
+        margin-bottom: 30rem;
+
+        & > span {
+          font-size: 22rem;
+        }
+      }
+    }
+  }
+}
+
+.dict-detail-page {
+  width: 50%;
+  height: 100%;
+  $header-height: 60rem;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  header {
+    cursor: pointer;
+    width: 100%;
+    display: flex;
+    box-sizing: border-box;
+    height: $header-height;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--color-font-3);
+    padding: 0 var(--space);
+
+    .left {
+      display: flex;
+      gap: 10rem;
+      align-items: center;
+    }
+  }
+
+  .detail {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .page-content {
+      flex: 1;
+      overflow: hidden;
+      display: flex;
+      position: relative;
+
+      .virtual-list {
+        height: 80%;
+      }
+
+      .left-column {
+        width: 250rem;
+        display: flex;
+        flex-direction: column;
+        min-height: 100rem;
+        position: relative;
+        color: var(--color-font-1);
+        font-size: 14rem;
+        position: relative;
+      }
+
+      .center-column {
+        flex: 1;
+        background: white;
+        border-radius: 10rem;
+        background: var(--color-second-bg);
+        background: #000;
+
+        color: var(--color-font-1);
+
+        .scroll {
+          height: calc(100% - 45rem);
+        }
+      }
+
+      .options-column {
+        width: 150rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 10rem;
+      }
+
+      .right-column {
+        flex: 1;
+        border-radius: 10rem;
+        background: var(--color-second-bg);
+        color: var(--color-font-1);
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+
+  .edit-dict {
+    flex: 1;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+
+    .wrapper {
+      width: 50%;
+    }
+
+    .el-select {
+      width: 100%;
+    }
+  }
+}
+
+.allocation-chapter {
+  width: 500rem;
+  padding: var(--space);
+  padding-top: 0;
+
+  .desc {
+    margin-top: 10rem;
+    margin-bottom: 35rem;
+    text-align: center;
+  }
+
+  .row {
+    display: flex;
+    align-items: center;
+    gap: 20rem;
+    margin-bottom: 15rem;
+    word-break: keep-all;
+
+    .label {
+      width: 90rem;
+    }
+
+    .text {
+      font-size: 12rem;
+    }
+  }
+
+  .notice{
+    transform: translate3d(110rem,-20rem,0);
+    font-size: 11rem;
+  }
+}
+</style>
+
diff --git a/src/pages/dict/index.vue b/src/pages/dict/index.vue
index 39a5f077..ff3e8795 100644
--- a/src/pages/dict/index.vue
+++ b/src/pages/dict/index.vue
@@ -1,1132 +1,16 @@
 <script setup lang="ts">
-import {dictionaryResources} from '@/assets/dictionary.ts'
-import {useBaseStore} from "@/stores/base.ts"
-import {onMounted, reactive, watch} from "vue"
-import {DefaultDict, Dict, DictResource, DictType, languageCategoryOptions, Sort, Word} from "@/types.ts"
-import {chunk, cloneDeep, groupBy, reverse, shuffle} from "lodash-es";
-import {$computed, $ref} from "vue/macros";
-import {Icon} from '@iconify/vue';
-import DictGroup from "@/components/toolbar/DictGroup.vue";
-import {v4 as uuidv4} from "uuid";
-import "vue-activity-calendar/style.css";
-import WordListDialog from "@/components/dialog/WordListDialog.vue";
-import {isArticle} from "@/hooks/article.ts";
-import {useRuntimeStore} from "@/stores/runtime.ts";
-import {useSettingStore} from "@/stores/setting.ts";
-import {emitter, EventKey} from "@/utils/eventBus.ts";
-import Slide from "@/components/Slide.vue";
-import DictList from "@/components/list/DictList.vue";
-import {FormInstance, FormRules} from "element-plus";
-import Empty from "@/components/Empty.vue";
-import BaseIcon from "@/components/BaseIcon.vue";
-import EditBatchArticleModal from "@/components/article/EditBatchArticleModal.vue";
-import VolumeIcon from "@/components/icon/VolumeIcon.vue";
-import {usePlayWordAudio} from "@/hooks/sound.ts";
-import BaseButton from "@/components/BaseButton.vue";
-import VirtualWordList from "@/components/list/VirtualWordList.vue";
-import Dialog from "@/components/dialog/Dialog.vue";
-// import ArrowRight from 'ico'
-const store = useBaseStore()
-const settingStore = useSettingStore()
-const runtimeStore = useRuntimeStore()
-let currentLanguage = $ref('en')
-let currentTranslateLanguage = $ref('common')
-let groupByLanguage = groupBy(dictionaryResources, 'language')
-let translateLanguageList = $ref([])
-let wordList = $ref([])
-
-let step = $ref(1)
-let loading = $ref(false)
-let show = $ref(false)
-let chapterList2 = $ref([])
-let chapterWordNumber = $ref(settingStore.chapterWordNumber)
-
-function close() {
-  show = false
-}
-
-async function selectDict(val: {
-  dict: DictResource | Dict,
-  index: number
-}) {
-  let item = val.dict
-  console.log('item', item)
-  step = 1
-  isAddDict = false
-  wordFormMode = FormMode.None
-  loading = true
-  wordList = []
-  let find: Dict = store.myDictList.find((v: Dict) => v.id === item.id)
-  if (find) {
-    runtimeStore.editDict = cloneDeep(find)
-  } else {
-    runtimeStore.editDict = cloneDeep({
-      ...cloneDeep(DefaultDict),
-      ...item,
-    })
-  }
-
-  if ([DictType.collect, DictType.simple, DictType.wrong].includes(runtimeStore.editDict.type)) {
-    wordList = cloneDeep(runtimeStore.editDict.words)
-  } else {
-    let url = `./dicts/${runtimeStore.editDict.language}/${runtimeStore.editDict.type}/${runtimeStore.editDict.translateLanguage}/${runtimeStore.editDict.url}`;
-    if (runtimeStore.editDict.type === DictType.word) {
-      if (!runtimeStore.editDict.originWords.length) {
-        let r = await fetch(url)
-        let v = await r.json()
-        runtimeStore.editDict.originWords = cloneDeep(v)
-        changeSort(runtimeStore.editDict.sort)
-      }
-      wordList = cloneDeep(runtimeStore.editDict.words)
-    }
-
-    if (runtimeStore.editDict.type === DictType.customWord) {
-      if (!runtimeStore.editDict.words.length) {
-        changeSort(runtimeStore.editDict.sort)
-      }
-      wordList = cloneDeep(runtimeStore.editDict.words)
-    }
-
-    if (runtimeStore.editDict.type === DictType.article) {
-      if (!runtimeStore.editDict.articles.length) {
-        let r = await fetch(url)
-        let v = await r.json()
-        runtimeStore.editDict.articles = cloneDeep(v.map(s => {
-          s.id = uuidv4()
-          return s
-        }))
-      }
-    }
-  }
-
-  chapterList2 = Array.from({length: runtimeStore.editDict.chapterWords.length}).map((v, i) => ({id: i}))
-  loading = false
-}
-
-function changeDict() {
-  store.changeDict(runtimeStore.editDict)
-  close()
-}
-
-function groupByDictTags(dictList: DictResource[]) {
-  return dictList.reduce<Record<string, DictResource[]>>((result, dict) => {
-    dict.tags.forEach((tag) => {
-      if (Object.prototype.hasOwnProperty.call(result, tag)) {
-        result[tag].push(dict)
-      } else {
-        result[tag] = [dict]
-      }
-    })
-    return result
-  }, {})
-}
-
-const groupByTranslateLanguage = $computed(() => {
-  let data: any
-  if (currentLanguage === 'article') {
-    let articleList = dictionaryResources.filter(v => v.type === 'article')
-    data = groupBy(articleList, 'translateLanguage')
-  } else if (currentLanguage === 'my') {
-    data = {
-      common: store.myDictList.concat([{name: '',} as any])
-    }
-  } else {
-    data = groupBy(groupByLanguage[currentLanguage], 'translateLanguage')
-  }
-  // console.log('groupByTranslateLanguage', data)
-  translateLanguageList = Object.keys(data)
-  currentTranslateLanguage = translateLanguageList[0]
-  return data
-})
-
-const groupedByCategoryAndTag = $computed(() => {
-  const currentTranslateLanguageDictList = groupByTranslateLanguage[currentTranslateLanguage]
-  const groupByCategory = groupBy(currentTranslateLanguageDictList, 'category')
-
-  let data = []
-  for (const [key, value] of Object.entries(groupByCategory)) {
-    data.push([key, groupByDictTags(value)])
-  }
-  // console.log('groupedByCategoryAndTag', data)
-  return data
-})
-
-function clickEvent(e) {
-  console.log('e', e)
-}
-
-const dictIsArticle = $computed(() => {
-  return isArticle(runtimeStore.editDict.type)
-})
-
-const chapterList = $computed(() => {
-  return dictIsArticle ? runtimeStore.editDict.articles.length : runtimeStore.editDict.chapterWords.length
-})
-
-function changeSort(v) {
-  if (v === Sort.normal) {
-    runtimeStore.editDict.words = cloneDeep(runtimeStore.editDict.originWords)
-  } else if (v === Sort.random) {
-    runtimeStore.editDict.words = shuffle(cloneDeep(runtimeStore.editDict.originWords))
-  } else {
-    runtimeStore.editDict.words = reverse(cloneDeep(runtimeStore.editDict.originWords))
-  }
-  resetChapterList()
-}
-
-
-/**/
-/*词典相关*/
-/**/
-
-
-let isAddDict = $ref(false)
-let categoryList = {}
-let tagList = {}
-
-const DefaultDictForm = {
-  id: '',
-  name: '',
-  description: '',
-  category: '',
-  tags: [],
-  translateLanguage: 'zh-CN',
-  language: 'en',
-  type: DictType.customWord
-}
-let dictForm: any = $ref(cloneDeep(DefaultDictForm))
-const dictFormRef = $ref<FormInstance>()
-const dictRules = reactive<FormRules>({
-  name: [
-    {required: true, message: '请输入名称', trigger: 'blur'},
-    {max: 20, message: '名称不能超过20个字符', trigger: 'blur'},
-  ],
-  category: [{required: true, message: '请选择', trigger: 'change'}],
-  tags: [{required: true, message: '请选择', trigger: 'change'}],
-})
-
-watch(() => dictForm.language, () => isAddDict && (dictForm.category = ''))
-watch(() => dictForm.category, () => isAddDict && (dictForm.tags = []))
-
-function editDict() {
-  // dictForm.id = store.editDict.id
-  // dictForm.name = store.editDict.name
-  // dictForm.description = store.editDict.description
-  console.log('store.editDict', runtimeStore.editDict)
-  dictForm = cloneDeep(runtimeStore.editDict)
-  //直接复制，上面会watch到category，然后把tags 设置为空
-  setTimeout(() => isAddDict = true, 0)
-}
-
-function closeDictForm() {
-  if (dictForm.id) {
-    isAddDict = false
-    dictForm = cloneDeep(DefaultDictForm)
-  } else {
-    step = 0
-  }
-}
-
-async function onSubmit() {
-  await dictFormRef.validate((valid, fields) => {
-    if (valid) {
-      let data: Dict = {
-        ...DefaultDict,
-        ...dictForm,
-      }
-      //任意修改，都将其变为自定义词典
-      if (data.type === DictType.word) data.type = DictType.customWord
-      if (data.type === DictType.article) data.type = DictType.customArticle
-
-      if (data.id) {
-        let rIndex = store.myDictList.findIndex(v => v.id === data.id)
-        store.myDictList[rIndex] = cloneDeep(data)
-        runtimeStore.editDict = cloneDeep(data)
-        isAddDict = false
-        ElMessage.success('修改成功')
-      } else {
-        data.id = 'custom-dict-' + Date.now()
-        if (store.myDictList.find(v => v.name === dictForm.name)) {
-          return ElMessage.warning('已有相同名称词典！')
-        } else {
-          store.myDictList.push(cloneDeep(data))
-          runtimeStore.editDict = cloneDeep(data)
-          isAddDict = false
-          ElMessage.success('添加成功')
-        }
-      }
-      console.log('submit!', data)
-    } else {
-      ElMessage.warning('请填写完整')
-    }
-  })
-}
-
-/**/
-/*词典相关*/
-/**/
-
-
-/**/
-/* 单词修改相关*/
-/**/
-enum FormMode {
-  None = -1,
-  Add = -2,
-}
-
-const DefaultFormWord = {
-  name: '',
-  usphone: '',
-  ukphone: '',
-  trans: ''
-}
-
-let wordFormMode = $ref(FormMode.None)
-let wordForm = $ref(cloneDeep(DefaultFormWord))
-const wordFormRef = $ref<FormInstance>()
-const wordRules = reactive<FormRules>({
-  name: [
-    {required: true, message: '请输入单词', trigger: 'blur'},
-    {max: 30, message: '名称不能超过30个字符', trigger: 'blur'},
-  ],
-})
-let wordListRef: any = $ref()
-
-//同步到我的词典列表
-function syncMyDictList() {
-  //任意修改，都将其变为自定义词典
-  if (runtimeStore.editDict.type === DictType.word) runtimeStore.editDict.type = DictType.customWord
-  if (runtimeStore.editDict.type === DictType.article) runtimeStore.editDict.type = DictType.customArticle
-
-  let rIndex = store.myDictList.findIndex(v => v.id === runtimeStore.editDict.id)
-  if (rIndex > -1) {
-    store.myDictList[rIndex] = cloneDeep(runtimeStore.editDict)
-  } else {
-    store.myDictList.push(cloneDeep(runtimeStore.editDict))
-  }
-}
-
-async function onSubmitWord() {
-  await wordFormRef.validate((valid, fields) => {
-    if (valid) {
-      let data: any = cloneDeep(wordForm)
-      if (data.trans) {
-        data.trans = data.trans.split('\n');
-      } else {
-        data.trans = []
-      }
-      if (wordFormMode === FormMode.Add) {
-        if (wordList.find(v => v.name === wordForm.name)) {
-          return ElMessage.warning('已有相同名称单词！')
-        } else {
-          runtimeStore.editDict.originWords.push(data)
-          runtimeStore.editDict.words.push(data)
-          //因为虚拟列表，必须重新赋值才能检测到更新
-          wordList = cloneDeep(runtimeStore.editDict.words)
-
-          if (runtimeStore.editDict.chapterWords.length) {
-            runtimeStore.editDict.chapterWords[runtimeStore.editDict.chapterWords.length - 1].push(data)
-          } else {
-            runtimeStore.editDict.chapterWords.push([data])
-            runtimeStore.editDict.chapterIndex = 0
-          }
-
-          ElMessage.success('添加成功')
-          wordForm = cloneDeep(DefaultFormWord)
-          setTimeout(wordListRef?.scrollToBottom, 100)
-        }
-        console.log('runtimeStore.editDict', runtimeStore.editDict)
-      } else {
-        let oldData = cloneDeep(runtimeStore.editDict.words[wordFormMode])
-        runtimeStore.editDict.words[wordFormMode] = data
-        //因为虚拟列表，必须重新赋值才能检测到更新
-        wordList = cloneDeep(runtimeStore.editDict.words)
-        //同步到原始列表，因为word可能是随机的，所以需要自己寻找index去修改原始列表
-        let rIndex = runtimeStore.editDict.originWords.findIndex(v => v.name === oldData.name)
-        if (rIndex > -1) {
-          runtimeStore.editDict.originWords[rIndex] = data
-        }
-
-        runtimeStore.editDict.chapterWords = runtimeStore.editDict.chapterWords.map(list => {
-          let rIndex2 = list.findIndex(v => v.name === oldData.name)
-          if (rIndex2 > -1) {
-            list[rIndex2] = data
-          }
-          return list
-        })
-        console.log('runtimeStore.editDict.chapterWords', runtimeStore.editDict.chapterWords)
-        ElMessage.success('修改成功')
-      }
-      syncMyDictList()
-    } else {
-      ElMessage.warning('请填写完整')
-    }
-  })
-}
-
-function delWord(word: Word, index: number) {
-  //同步到原始列表，因为word可能是随机的，所以需要自己寻找index去修改原始列表
-  let rIndex = runtimeStore.editDict.originWords.findIndex(v => v.name === word.name)
-  if (rIndex > -1) {
-    runtimeStore.editDict.originWords.splice(rIndex, 1)
-  }
-
-  runtimeStore.editDict.chapterWords.map(list => {
-    let rIndex2 = list.findIndex(v => v.name === word.name)
-    if (rIndex2 > -1) {
-      list.splice(rIndex2, 1)
-    }
-  })
-
-  runtimeStore.editDict.chapterWords = runtimeStore.editDict.chapterWords.filter(v => v.length)
-  if (runtimeStore.editDict.chapterWords.length === 0) runtimeStore.editDict.chapterIndex = -1
-  else {
-    if (runtimeStore.editDict.chapterIndex >= runtimeStore.editDict.chapterWords.length) {
-      runtimeStore.editDict.chapterIndex = runtimeStore.editDict.chapterWords.length - 1
-    }
-  }
-
-  runtimeStore.editDict.words.splice(index, 1)
-  wordList = cloneDeep(runtimeStore.editDict.words)
-  syncMyDictList()
-
-  closeWordForm()
-}
-
-function editWord(val: {
-  word: Word,
-  index: number
-}) {
-  wordFormMode = val.index
-  wordForm.name = val.word.name
-  wordForm.ukphone = val.word.ukphone
-  wordForm.usphone = val.word.usphone
-  wordForm.trans = val.word.trans.join('\n')
-}
-
-function closeWordForm() {
-  wordFormMode = FormMode.None
-  wordForm = cloneDeep(DefaultFormWord)
-}
-
-function addWord() {
-  // setTimeout(wordListRef?.scrollToBottom, 100)
-  wordFormMode = FormMode.Add
-  wordForm = cloneDeep(DefaultFormWord)
-}
-
-function add() {
-  if (dictIsArticle) {
-
-  } else {
-    addWord()
-  }
-}
-
-/**/
-/* 单词修改相关*/
-/**/
-
-watch(() => step, v => {
-  if (v === 0) {
-    closeWordForm()
-    closeDictForm()
-    chapterWordNumber = settingStore.chapterWordNumber
-  }
-})
-
-const playWordAudio = usePlayWordAudio()
-
-onMounted(() => {
-  dictionaryResources.map(v => {
-    if (categoryList[v.language]) {
-      if (!categoryList[v.language].find(w => w === v.category)) {
-        categoryList[v.language].push(v.category)
-      }
-    } else {
-      categoryList[v.language] = [v.category]
-    }
-    if (tagList[v.category]) {
-      tagList[v.category] = Array.from(new Set(tagList[v.category].concat(v.tags)))
-    } else {
-      tagList[v.category] = v.tags
-    }
-  })
-
-  emitter.on(EventKey.openDictModal, (type: 'detail' | 'list' | 'my' | 'collect' | 'simple') => {
-    if (type === "detail") {
-      selectDict({dict: store.currentDict, index: 0})
-    }
-    if (type === "list") {
-      currentLanguage = 'en'
-      step = 0
-    }
-    if (type === "my") {
-      currentLanguage = 'my'
-      step = 0
-    }
-    if (type === "collect") {
-      selectDict({dict: store.collect, index: 0})
-      wordFormMode = FormMode.Add
-      addWord()
-    }
-    if (type === "simple") {
-      selectDict({dict: store.simple, index: 0})
-      addWord()
-    }
-
-    show = true
-  })
-
-  // console.log('categoryList', categoryList)
-  // console.log('tagList', tagList)
-})
-
-let chapterIndex = $ref(-1)
-let residueWordList = $ref([])
-
-let currentChapterWordListCheckAll = $ref(false)
-let currentChapterWordListIsIndeterminate = $ref(false)
-let residueWordListCheckAll = $ref(false)
-let residueWordListIsIndeterminate = $ref(false)
-
-let currentChapterWordList: any[] = $computed(() => {
-  return runtimeStore.editDict.chapterWords[chapterIndex] ?? []
-})
-
-function toResidueWordList() {
-  let list = currentChapterWordList.filter(v => v.checked)
-  runtimeStore.editDict.chapterWords[chapterIndex] = currentChapterWordList.filter(v => !v.checked)
-  list.map(v => v.checked = false)
-  residueWordList = residueWordList.concat(list)
-  currentChapterWordListIsIndeterminate = currentChapterWordListCheckAll = false
-}
-
-function toChapterWordList() {
-  let list = residueWordList.filter(v => v.checked)
-  residueWordList = residueWordList.filter(v => !v.checked)
-  list.map(v => v.checked = false)
-  runtimeStore.editDict.chapterWords[chapterIndex] = runtimeStore.editDict.chapterWords[chapterIndex].concat(list)
-  residueWordListCheckAll = residueWordListIsIndeterminate = false
-}
-
-function addNewChapter() {
-  runtimeStore.editDict.chapterWords.push([])
-  chapterList2 = Array.from({length: runtimeStore.editDict.chapterWords.length}).map((v, i) => ({id: i}))
-}
-
-function delWordChapter(index: number) {
-  let list = runtimeStore.editDict.chapterWords[index]
-  list.map(v => v.checked = false)
-  residueWordList = residueWordList.concat(list)
-  runtimeStore.editDict.chapterWords.splice(index, 1)
-  if (chapterIndex >= index) chapterIndex--
-  if (chapterIndex < 0) chapterIndex = 0
-
-  syncMyDictList()
-}
-
-let showAllocationChapterDialog = $ref(false)
-
-function resetChapterList() {
-  residueWordList = []
-  chapterIndex = -1
-  runtimeStore.editDict.words.map(v => v.checked = false)
-  runtimeStore.editDict.chapterWords = chunk(runtimeStore.editDict.words, chapterWordNumber)
-  chapterList2 = Array.from({length: runtimeStore.editDict.chapterWords.length}).map((v, i) => ({id: i}))
-}
-
-function handleCheckedChapterWordListChange(source: any) {
-  source.checked = !source.checked
-  currentChapterWordListCheckAll = currentChapterWordList.every(v => v.checked)
-  if (currentChapterWordListCheckAll) {
-    currentChapterWordListIsIndeterminate = false
-  } else {
-    currentChapterWordListIsIndeterminate = currentChapterWordList.some(v => v.checked)
-  }
-}
-
-function handleCurrentChapterWordListCheckAll() {
-  currentChapterWordList.map(v => v.checked = currentChapterWordListCheckAll)
-  currentChapterWordListIsIndeterminate = false
-}
-
-function handleCheckedResidueWordListChange(source: any) {
-  source.checked = !source.checked
-  residueWordListCheckAll = residueWordList.every(v => v.checked)
-  if (residueWordListCheckAll) {
-    residueWordListIsIndeterminate = false
-  } else {
-    residueWordListIsIndeterminate = residueWordList.some(v => v.checked)
-  }
-}
-
-function handleCurrentResidueWordListCheckAll() {
-  residueWordList.map(v => v.checked = residueWordListCheckAll)
-  residueWordListIsIndeterminate = false
-}
 
 </script>
 
 <template>
-  <div id="DictDialog">
-    <Slide :slide-count="2" :step="step">
-      <div class="dict-page">
-        <header>
-          <div class="tabs">
-            <div class="tab"
-                 :class="currentLanguage === item.id && 'active'"
-                 @click="currentLanguage = item.id"
-                 v-for="item in languageCategoryOptions">
-              <img :src='item.flag'/>
-              <span>{{ item.name }}</span>
-            </div>
-          </div>
-          <Icon @click="close"
-                class="hvr-grow pointer"
-                width="20" color="#929596"
-                icon="ion:close-outline"/>
-        </header>
-        <div class="page-content">
-          <div class="dict-list-wrapper">
-            <template v-if="currentLanguage === 'my'">
-              <DictList
-                  @add="step = 1;isAddDict = true"
-                  @selectDict="selectDict"
-                  :list="groupByTranslateLanguage['common']"/>
-            </template>
-            <template v-else>
-              <div class="translate">
-                <span>翻译：</span>
-                <el-radio-group v-model="currentTranslateLanguage">
-                  <el-radio-button border v-for="i in translateLanguageList" :label="i">{{ i }}</el-radio-button>
-                </el-radio-group>
-              </div>
-              <DictGroup
-                  v-for="item in groupedByCategoryAndTag"
-                  :select-dict-name="runtimeStore.editDict.resourceId"
-                  @selectDict="selectDict"
-                  @detail="step = 1"
-                  :groupByTag="item[1]"
-                  :category="item[0]"
-              />
-            </template>
-          </div>
-        </div>
-      </div>
-      <div class="dict-detail-page">
-        <header>
-          <div class="left" @click.stop="step = 0">
-            <Icon icon="octicon:arrow-left-24" class="go" width="20"/>
-            <div class="title">
-              {{ runtimeStore.editDict.name }}
-            </div>
-            <BaseIcon
-                v-if="![DictType.collect,DictType.wrong,DictType.simple].includes(runtimeStore.editDict.type)"
-                class-name="edit-icon"
-                icon="tabler:edit"
-                @click='editDict'
-            />
-          </div>
-          <Icon @click="close"
-                class="hvr-grow pointer"
-                width="20" color="#929596"
-                icon="ion:close-outline"/>
-        </header>
-        <div class="detail" v-if="!isAddDict">
-          <div class="page-content">
-            <div class="left-column">
-              <div class="header flex space-between">
-                <div class="common-title">章节列表</div>
-                <BaseButton @click="showAllocationChapterDialog = true">智能分配</BaseButton>
-                <BaseIcon
-                    @click="addNewChapter"
-                    icon="fluent:add-20-filled"
-                    title="新增章节"/>
-              </div>
-              <virtual-list class="virtual-list"
-                            v-loading="loading"
-                            v-if="chapterList2.length"
-                            :keeps="20"
-                            data-key="id"
-                            :data-sources="chapterList2"
-                            :estimate-size="45"
-              >
-                <template #={source,index}>
-                  <div class="common-list-item space15"
-                       :class="chapterIndex === index && 'active'"
-                       @click="chapterIndex = index">
-                    <div class="flex gap10 flex1 ">
-                      <input type="radio" :checked="chapterIndex === index">
-                      <div class="item-title flex flex1 space-between">
-                        <span>第{{ index + 1 }}章</span>
-                        <span>{{ runtimeStore.editDict.chapterWords[index].length }}词</span>
-                      </div>
-                    </div>
-                    <div class="right">
-                      <BaseIcon
-                          class-name="del"
-                          @click="delWordChapter(index)"
-                          title="移除"
-                          icon="solar:trash-bin-minimalistic-linear"/>
-                    </div>
-                  </div>
-                </template>
-              </virtual-list>
-              <Empty v-else :show-add="true" @add="add"/>
-            </div>
-            <div class="center-column">
-              <div class="common-title flex space-between">
-                <div class="left">
-                  <el-checkbox
-                      v-model="currentChapterWordListCheckAll"
-                      :indeterminate="currentChapterWordListIsIndeterminate"
-                      @change="handleCurrentChapterWordListCheckAll"
-                      size="large"/>
-                  <span>全选</span>
-                </div>
-                <span>{{ chapterIndex > -1 ? `第${chapterIndex + 1}章` : '' }} 单词列表</span>
-              </div>
-              <virtual-list class="virtual-list"
-                            v-loading="loading"
-                            v-if="currentChapterWordList.length"
-                            :keeps="20"
-                            data-key="name"
-                            :data-sources="currentChapterWordList"
-                            :estimate-size="45"
-              >
-                <template #={source,index}>
-                  <div class="common-list-item space15"
-                       @click="handleCheckedChapterWordListChange(source)">
-                    <div class="flex gap10">
-                      <el-checkbox v-model="source.checked"
-                                   @change="handleCheckedChapterWordListChange(source)"
-                                   size="large"/>
-                      <div class="left">
-                        <div class="item-title">
-                          <span class="word">{{ source.name }}</span>
-                          <span class="phonetic">{{ source.usphone }}</span>
-                          <VolumeIcon class="volume" @click="playWordAudio(source.name)"></VolumeIcon>
-                        </div>
-                        <div class="item-sub-title" v-if="source.trans.length">
-                          <div v-for="item in source.trans">{{ item }}</div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </template>
-              </virtual-list>
-              <Empty v-else :show-add="true" @add="addWord"/>
-            </div>
-            <div class="options-column">
-              <BaseButton @click="toChapterWordList"
-                          :disabled="!residueWordListIsIndeterminate?!residueWordListCheckAll:false">
-                >左
-              </BaseButton>
-              <BaseButton @click="toResidueWordList"
-                          :disabled="!currentChapterWordListIsIndeterminate?!currentChapterWordListCheckAll:false">
-                右
-              </BaseButton>
-            </div>
-            <div class="center-column">
-              <div class="common-title flex space-between">
-                <div class="left">
-                  <el-checkbox
-                      v-model="residueWordListCheckAll"
-                      :indeterminate="residueWordListIsIndeterminate"
-                      @change="handleCurrentResidueWordListCheckAll"
-                      size="large"/>
-                  <span>全选</span>
-                </div>
-                <span>未分配单词列表</span>
-                <BaseIcon
-                    @click="addWord"
-                    icon="fluent:add-20-filled"
-                    title="新增单词"/>
-              </div>
-              <virtual-list class="virtual-list"
-                            v-loading="loading"
-                            v-if="residueWordList.length"
-                            :keeps="20"
-                            data-key="name"
-                            :data-sources="residueWordList"
-                            :estimate-size="45"
-              >
-                <template #={source,index}>
-                  <div class="common-list-item space15"
-                       @click="handleCheckedResidueWordListChange(source)">
-                    <div class="flex gap10">
-                      <el-checkbox v-model="source.checked"
-                                   @change="handleCheckedResidueWordListChange(source)"
-                                   size="large"/>
-                      <div class="left">
-                        <div class="item-title">
-                          <span class="word">{{ source.name }}</span>
-                          <span class="phonetic">{{ source.usphone }}</span>
-                          <VolumeIcon class="volume" @click="playWordAudio(source.name)"></VolumeIcon>
-                        </div>
-                        <div class="item-sub-title" v-if="source.trans.length">
-                          <div v-for="item in source.trans">{{ item }}</div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </template>
-              </virtual-list>
-              <Empty v-else :show-add="true" @add="addWord"/>
-            </div>
-            <div class="right-column">
-              <div class="add" v-if="wordFormMode !== FormMode.None">
-                <div class="common-title">
-                  {{ wordFormMode === FormMode.Add ? '添加' : '修改' }}单词
-                </div>
-                <el-form
-                    class="form"
-                    ref="wordFormRef"
-                    :rules="wordRules"
-                    :model="wordForm"
-                    label-width="140rem">
-                  <el-form-item label="单词" prop="name">
-                    <el-input v-model="wordForm.name"/>
-                  </el-form-item>
-                  <el-form-item label="翻译">
-                    <el-input v-model="wordForm.trans"
-                              placeholder="多个翻译请换行"
-                              :autosize="{ minRows: 2, maxRows: 6 }"
-                              type="textarea"/>
-                  </el-form-item>
-                  <el-form-item label="音标/发音/注音①">
-                    <el-input v-model="wordForm.usphone"/>
-                  </el-form-item>
-                  <el-form-item label="音标/发音/注音②">
-                    <el-input v-model="wordForm.ukphone"/>
-                  </el-form-item>
-                  <div class="flex-center">
-                    <el-button @click="closeWordForm">关闭</el-button>
-                    <el-button type="primary" @click="onSubmitWord">{{
-                        wordFormMode === FormMode.Add ? '添加' : '保存'
-                      }}
-                    </el-button>
-                  </div>
-                </el-form>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="edit-dict" v-else>
-          <div class="wrapper">
-            <div class="common-title">{{ dictForm.id ? '修改' : '添加' }}词典</div>
-            <el-form
-                ref="dictFormRef"
-                :rules="dictRules"
-                :model="dictForm"
-                label-width="120rem">
-              <el-form-item label="名称" prop="name">
-                <el-input v-model="dictForm.name"/>
-              </el-form-item>
-              <el-form-item label="描述">
-                <el-input v-model="dictForm.description" type="textarea"/>
-              </el-form-item>
-              <el-form-item label="语言">
-                <el-select v-model="dictForm.language" placeholder="请选择选项">
-                  <el-option label="英语" value="en"/>
-                  <el-option label="德语" value="de"/>
-                  <el-option label="日语" value="ja"/>
-                  <el-option label="代码" value="code"/>
-                </el-select>
-              </el-form-item>
-              <el-form-item label="翻译语言">
-                <el-select v-model="dictForm.translateLanguage" placeholder="请选择选项">
-                  <!--                <el-option label="通用" value="common"/>-->
-                  <el-option label="中文" value="zh-CN"/>
-                  <el-option label="英语" value="en"/>
-                  <el-option label="德语" value="de"/>
-                  <el-option label="日语" value="ja"/>
-                </el-select>
-              </el-form-item>
-              <el-form-item label="分类" prop="category">
-                <el-select v-model="dictForm.category" placeholder="请选择选项">
-                  <el-option :label="i" :value="i" v-for="i in categoryList[dictForm.language]"/>
-                </el-select>
-              </el-form-item>
-              <el-form-item label="标签" prop="tags">
-                <el-select
-                    multiple
-                    v-model="dictForm.tags" placeholder="请选择选项">
-                  <el-option :label="i" :value="i" v-for="i in tagList[dictForm.category]"/>
-                </el-select>
-              </el-form-item>
-              <el-form-item label="类型">
-                <el-select v-model="dictForm.type" placeholder="请选择选项">
-                  <el-option label="单词" :value="DictType.customWord"/>
-                  <el-option label="文章" :value="DictType.customArticle"/>
-                </el-select>
-              </el-form-item>
-              <div class="flex-center">
-                <el-button @click="closeDictForm">关闭</el-button>
-                <el-button type="primary" @click="onSubmit">确定</el-button>
-              </div>
-            </el-form>
-          </div>
-        </div>
-      </div>
-    </Slide>
+  <div class="dict">
+
   </div>
 
-  <Dialog
-      title="智能分配单词"
-      :footer="true"
-      @ok="resetChapterList"
-      @cancel="chapterWordNumber = settingStore.chapterWordNumber"
-      v-model="showAllocationChapterDialog">
-    <div class="allocation-chapter">
-      <div class="notice">
-        <div>为您自动创建章节以及分配单词</div>
-        <div>注意：已存在的章节将被删除！</div>
-      </div>
-      <div class="row">
-        <div class="label">每章单词数</div>
-        <span class="text">最小:10</span>
-        <el-slider :min="10"
-                   :step="10"
-                   :max="runtimeStore.editDict.words.length ?? 10"
-                   v-model="chapterWordNumber"
-        />
-        <span class="text">最大:{{ runtimeStore.editDict.words.length ?? 10 }}</span>
-      </div>
-
-      <div class="row">
-        <div class="label">将会创建</div>
-        <div class="option">
-          <span>{{ Math.round(runtimeStore.editDict.words.length / chapterWordNumber) }}章</span>
-        </div>
-      </div>
-      <div class="row">
-        <div class="label">每章</div>
-        <div class="option">
-          <span>{{ chapterWordNumber }}个单词</span>
-        </div>
-      </div>
-    </div>
-  </Dialog>
-
-  <WordListDialog/>
-  <EditBatchArticleModal/>
 </template>
 
 <style scoped lang="scss">
 @import "@/assets/css/variable";
 
-$modal-mask-bg: rgba(#000, .15);
-$radius: 16rem;
-$time: 0.3s;
-$header-height: 60rem;
-
-#DictDialog {
-  font-size: 14rem;
-  position: fixed;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  background: var(--color-second-bg);
-  z-index: 1;
-  width: 70vw;
-  height: 75vh;
-}
-
-.dict-page {
-  width: 50%;
-  height: 100%;
-  $header-height: 60rem;
-  padding: var(--space);
-  padding-top: 0;
-  box-sizing: border-box;
-
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: $header-height;
-
-    .tabs {
-      display: flex;
-      gap: 20rem;
-
-      .tab {
-        color: var(--color-font-1);
-        cursor: pointer;
-        padding: 10rem;
-        padding-bottom: 5rem;
-        transition: all .5s;
-        border-bottom: 2px solid transparent;
-        display: flex;
-        align-items: center;
-        gap: 6rem;
-
-        &.active {
-          border-bottom: 2px solid $main;
-        }
-
-        img {
-          height: 30rem;
-        }
-      }
-    }
-  }
-
-  .page-content {
-    display: flex;
-    height: calc(100% - $header-height);
-
-    .dict-list-wrapper {
-      flex: 1;
-      overflow: auto;
-      height: 100%;
-      padding-right: var(--space);
-
-      .translate {
-        display: flex;
-        align-items: center;
-        color: var(--color-font-1);
-        margin-bottom: 30rem;
-
-        & > span {
-          font-size: 22rem;
-        }
-      }
-    }
-  }
-}
-
-.dict-detail-page {
-  width: 50%;
-  height: 100%;
-  $header-height: 60rem;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-
-  header {
-    cursor: pointer;
-    width: 100%;
-    display: flex;
-    box-sizing: border-box;
-    height: $header-height;
-    align-items: center;
-    justify-content: space-between;
-    color: var(--color-font-3);
-    padding: 0 var(--space);
-
-    .left {
-      display: flex;
-      gap: 10rem;
-      align-items: center;
-    }
-  }
-
-  .detail {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-
-    .page-content {
-      flex: 1;
-      overflow: hidden;
-      display: flex;
-      position: relative;
-
-      .virtual-list {
-        height: 80%;
-      }
-
-      .left-column {
-        width: 250rem;
-        display: flex;
-        flex-direction: column;
-        min-height: 100rem;
-        position: relative;
-        color: var(--color-font-1);
-        font-size: 14rem;
-        position: relative;
-      }
-
-      .center-column {
-        flex: 1;
-        background: white;
-        border-radius: 10rem;
-        background: var(--color-second-bg);
-        background: #000;
-
-        color: var(--color-font-1);
-
-        .scroll {
-          height: calc(100% - 45rem);
-        }
-      }
-
-      .options-column {
-        width: 150rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 10rem;
-      }
-
-      .right-column {
-        flex: 1;
-        border-radius: 10rem;
-        background: var(--color-second-bg);
-        color: var(--color-font-1);
-        display: flex;
-        flex-direction: column;
-      }
-    }
-  }
-
-  .edit-dict {
-    flex: 1;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-
-    .wrapper {
-      width: 50%;
-    }
-
-    .el-select {
-      width: 100%;
-    }
-  }
-}
-
-.allocation-chapter {
-  width: 500rem;
-  padding: var(--space);
-  padding-top: 0;
-
-  .notice {
-    margin-top: 10rem;
-    margin-bottom: 35rem;
-    text-align: center;
-  }
-
-  .row {
-    display: flex;
-    align-items: center;
-    gap: 20rem;
-    margin-bottom: 15rem;
-    word-break: keep-all;
-
-    .label {
-      width: 90rem;
-    }
-
-    .text {
-      font-size: 12rem;
-    }
-  }
-}
 </style>