save

components.d.ts

@@ -19,6 +19,7 @@ declare module 'vue' {
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
@@ -26,6 +27,8 @@ declare module 'vue' {
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTableV2: typeof import('element-plus/es')['ElTableV2']
     Empty: typeof import('./src/components/Empty.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/hooks/dict.ts

@@ -107,7 +107,7 @@ export function syncMyDictList(dict: Dict, isCustom = true) {
 }
 
 export function getCurrentStudyWord() {
-  console.time()
+  // console.time()
   const store = useBaseStore()
   let data = {new: [], review: [], write: []}
   let dict = store.currentStudyWordDict;

src/pages/pc/components/BaseTable.vue

@@ -0,0 +1,207 @@
+<script setup lang="ts">
+
+import {useSettingStore} from "@/stores/setting.ts";
+import {nextTick} from "vue";
+import VolumeIcon from "@/components/icon/VolumeIcon.vue";
+import {Sort} from "@/types.ts";
+import MiniDialog from "@/pages/pc/components/dialog/MiniDialog.vue";
+import BaseIcon from "@/components/BaseIcon.vue";
+import BaseButton from "@/components/BaseButton.vue";
+import {cloneDeep, reverse, shuffle} from "lodash-es";
+import Input from "@/pages/pc/components/Input.vue";
+
+let list = defineModel('list')
+
+const props = withDefaults(defineProps<{
+  activeIndex?: number,
+  activeId?: string,
+  isActive?: boolean
+  showBorder?: boolean
+}>(), {
+  activeIndex: -1,
+  activeId: '',
+  isActive: false,
+  showBorder: false,
+})
+
+const emit = defineEmits<{
+  click: [val: {
+    item: any,
+    index: number
+  }],
+}>()
+
+const settingStore = useSettingStore()
+const listRef: any = $ref()
+
+function scrollToBottom() {
+  nextTick(() => {
+    listRef?.scrollTo(0, listRef.scrollHeight)
+  })
+}
+
+function scrollToItem(index: number) {
+  nextTick(() => {
+    listRef?.children[index]?.scrollIntoView({block: 'center', behavior: 'smooth'})
+  })
+}
+
+function itemIsActive(item: any, index: number) {
+  return props.activeId ?
+      props.activeId === item.id
+      : props.activeIndex === index
+}
+
+defineExpose({scrollToBottom, scrollToItem})
+
+let pageNo = $ref(1)
+let pageSize = $ref(50)
+let currentList = $computed({
+  get() {
+    if (searchKey) {
+      return list.value.filter(v => v.word.includes(searchKey))
+    }
+    return list.value.slice((pageNo - 1) * pageSize, (pageNo - 1) * pageSize + pageSize)
+  },
+  set(v) {
+    list.value = v
+  }
+})
+
+let selectIds = $ref([])
+let selectAll = $computed(()=>{
+  return !!selectIds.length
+})
+
+function toggleSelect(item) {
+  let rIndex = selectIds.findIndex(v => v === item.id)
+  if (rIndex > -1) {
+    selectIds.splice(rIndex, 1)
+  } else {
+    selectIds.push(item.id)
+  }
+}
+
+function toggleSelectAll() {
+  if (selectAll) {
+    selectIds = []
+  } else {
+    selectIds = currentList.map(v => v.id)
+  }
+}
+
+let searchKey = $ref('')
+let showSortDialog = $ref(false)
+let showSearchInput = $ref(false)
+
+function sort(type: Sort) {
+  if (type === Sort.reverse) {
+    ElMessage.success('已翻转排序')
+    list.value = reverse(cloneDeep(list.value))
+  }
+  if (type === Sort.random) {
+    ElMessage.success('已随机排序')
+    list.value = shuffle(cloneDeep(list.value))
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <div class="">
+      <div
+          v-if="showSearchInput"
+          class="flex gap-2"
+      >
+        <Input v-model="searchKey"
+               class="flex-1"/>
+        <BaseButton @click="showSearchInput = false">取消</BaseButton>
+      </div>
+      <div class="flex justify-between " v-else>
+        <el-checkbox
+            @click="toggleSelectAll"
+            :model-value="selectAll"
+            size="large"/>
+        <div class="flex gap-2 relative">
+          <BaseIcon
+              v-if="selectIds.length"
+              @click="emit('del')"
+              class="del"
+              title="删除"
+              icon="solar:trash-bin-minimalistic-linear"/>
+          <BaseIcon
+              @click="emit('add')"
+              icon="fluent:add-20-filled"
+              title="添加单词"/>
+          <BaseIcon
+              title="改变顺序"
+              icon="icon-park-outline:sort-two"
+              @click="showSortDialog = !showSortDialog"
+          />
+          <BaseIcon
+              @click="showSearchInput = !showSearchInput"
+              title="搜索"
+              icon="fluent:search-24-regular"/>
+          <MiniDialog
+              v-model="showSortDialog"
+              style="width: 8rem;"
+          >
+            <div class="mini-row-title">
+              列表顺序设置
+            </div>
+            <div class="mini-row">
+              <BaseButton size="small" @click="sort(Sort.reverse)">翻转</BaseButton>
+              <BaseButton size="small" @click="sort(Sort.random)">随机</BaseButton>
+            </div>
+          </MiniDialog>
+        </div>
+      </div>
+    </div>
+    <div
+        class="flex-1 overflow-auto"
+        ref="listRef">
+      <div class="list-item-wrapper"
+           v-for="(item,index) in currentList"
+           :key="item.id"
+      >
+        <div class="common-list-item"
+             :class="{
+            active:itemIsActive(item,index),
+            border:showBorder
+          }"
+             @click="emit('click',{item,index})"
+        >
+          <div class="left">
+            <el-checkbox
+                :model-value="selectIds.includes(item.id)"
+                @change="toggleSelect(item)"
+                size="large"/>
+            <div class="title-wrapper">
+              <div class="item-title">
+                <span class="word">{{ item.word }}</span>
+                <span class="phonetic">{{ item.phonetic0 }}</span>
+                <VolumeIcon class="volume"></VolumeIcon>
+              </div>
+              <div class="item-sub-title">
+                <div v-for="v in item.trans">{{ (v.pos ? v.pos + '.' : '') + (v.cn || v.en) }}</div>
+              </div>
+            </div>
+          </div>
+          <div class="right">
+            <slot name="suffix" :item="item" :index="index"></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-end">
+      <el-pagination background
+                     v-model:current-page="pageNo"
+                     v-model:page-size="pageSize"
+                     layout="prev, pager, next" :total="list.length"/>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/pages/pc/word/EditWordDict-three.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+
+import {onMounted} from "vue";
+import {useRoute} from "vue-router";
+import {useRuntimeStore} from "@/stores/runtime.ts";
+import {cloneDeep} from "lodash-es";
+import {_checkDictWords} from "@/utils";
+import WordList from "@/pages/pc/components/list/WordList.vue";
+import {getDefaultDict} from "@/types.ts";
+import BasePage from "@/pages/pc/components/BasePage.vue";
+
+const runtimeStore = useRuntimeStore()
+const route = useRoute()
+let dict = $ref(getDefaultDict())
+
+onMounted(() => {
+  switch (Number(route.query.type)) {
+    case -1:
+      if (runtimeStore.routeData) {
+        dict = cloneDeep(runtimeStore.routeData)
+        _checkDictWords(dict)
+      }
+      break
+  }
+})
+
+</script>
+
+<template>
+  <BasePage>
+    <div class="h-100 flex  ">
+      <WordList
+          ref="listRef"
+          :list="dict.words"
+      >
+      </WordList>
+    </div>
+  </BasePage>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/pages/pc/word/EditWordDict.vue

@@ -1,37 +1,226 @@
 <script setup lang="ts">
 
-import {onMounted} from "vue";
+import BasePage from "@/pages/pc/components/BasePage.vue";
+import {onMounted, reactive} from "vue";
 import {useRoute} from "vue-router";
 import {useRuntimeStore} from "@/stores/runtime.ts";
-import {cloneDeep} from "lodash-es";
-import {_checkDictWords} from "@/utils";
-import WordList from "@/pages/pc/components/list/WordList.vue";
-import {getDefaultDict} from "@/types.ts";
+import {useBaseStore} from "@/stores/base.ts";
+import {assign, cloneDeep, reverse, shuffle} from "lodash-es";
+import {Sort, Word} from "@/types.ts";
+import {nanoid} from "nanoid";
+import BaseIcon from "@/components/BaseIcon.vue";
+import {_checkDictWords, useNav} from "@/utils";
+import {FormInstance, FormRules} from "element-plus";
+import MiniDialog from "@/pages/pc/components/dialog/MiniDialog.vue";
+import BaseButton from "@/components/BaseButton.vue";
+import VolumeIcon from "@/components/icon/VolumeIcon.vue";
+import BaseList from "@/pages/pc/components/list/BaseList.vue";
+import BaseTable from "@/pages/pc/components/BaseTable.vue";
 
 const runtimeStore = useRuntimeStore()
+const store = useBaseStore()
 const route = useRoute()
-let dict = $ref(getDefaultDict())
+
+let list = $computed({
+  get() {
+    return runtimeStore.editDict.words
+  },
+  set(v) {
+    runtimeStore.editDict.words = v
+  }
+})
 
 onMounted(() => {
   switch (Number(route.query.type)) {
     case -1:
-      if (runtimeStore.routeData) {
-        dict = cloneDeep(runtimeStore.routeData)
-        _checkDictWords(dict)
-      }
+      runtimeStore.editDict = cloneDeep(runtimeStore.routeData)
+      _checkDictWords(runtimeStore.editDict)
+      break
+    case 0:
+      runtimeStore.editDict = cloneDeep(store.collectWord)
+      break
+    case 1:
+      runtimeStore.editDict = cloneDeep(store.wrong)
+      break
+    case 2:
+      runtimeStore.editDict = cloneDeep(store.simple)
+      break
+    case 3:
+      runtimeStore.editDict = cloneDeep(store.master)
+      break
+    default:
       break
   }
 })
+const {back} = useNav()
+
+let wordFormData = $ref({
+  where: '',
+  type: '',
+  id: '',
+  index: 0
+})
+
+enum FormMode {
+  None = '',
+  Add = 'Add',
+  Edit = 'Edit',
+}
+
+const DefaultFormWord = {
+  word: '',
+  phonetic0: '',
+  phonetic1: '',
+  trans: '',
+}
+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'},
+  ],
+})
+
+//TODO trans结构变了，
+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 (wordFormData.type === FormMode.Add) {
+        data.id = nanoid(6)
+        data.checked = false
+        let r = list.find(v => v.word === wordForm.word)
+        // if (r) return ElMessage.warning('已有相同名称单词！')
+        // else list.push(data)
+        list.push(data)
+        ElMessage.success('添加成功')
+        wordForm = cloneDeep(DefaultFormWord)
+        // setTimeout(wordListRef?.scrollToBottom, 100)
+      } else {
+        let r = list.find(v => v.id === wordFormData.id)
+        if (r) assign(r, data)
+        r = list.find(v => v.id === wordFormData.id)
+        if (r) assign(r, data)
+        ElMessage.success('修改成功')
+      }
+    } else {
+      ElMessage.warning('请填写完整')
+    }
+  })
+}
+
+function delWord(val: {
+  item: Word
+}) {
+  let rIndex2 = list.findIndex(v => v.id === val.item.id)
+  if (rIndex2 > -1) {
+    list.splice(rIndex2, 1)
+  }
+  if (wordFormData.type === FormMode.Edit && wordForm.word === val.item.word) {
+    closeWordForm()
+  }
+}
+
+function batchDelWord() {
+  console.log('multipleSelection', multipleSelection)
+  multipleSelection.map(v => delWord({item: v}))
+}
+
+function editWord(word: Word,) {
+  wordFormData.type = FormMode.Edit
+  wordFormData.id = word.id
+  wordForm.word = word.word
+  wordForm.phonetic1 = word.phonetic1
+  wordForm.phonetic0 = word.phonetic0
+  wordForm.trans = word.trans.join('\n')
+}
+
+function addWord() {
+  // setTimeout(wordListRef?.scrollToBottom, 100)
+  wordFormData.type = FormMode.Add
+  wordForm = cloneDeep(DefaultFormWord)
+}
+
+function closeWordForm() {
+  wordFormData.type = FormMode.None
+  wordForm = cloneDeep(DefaultFormWord)
+}
+
 
 </script>
 
 <template>
-  <WordList
-      ref="listRef"
-      :list="dict.words"
-      v-if="dict.words?.length"
-  >
-  </WordList>
+  <BasePage>
+    <header class="flex gap-4 mb-2 items-center">
+      <BaseIcon @click="back" icon="octicon:arrow-left-24" width="20"/>
+      <div class="left">
+        <div class="top">
+          <div class="text-xl">
+            {{ runtimeStore.editDict.name }}
+          </div>
+        </div>
+        <div class="desc" v-if="runtimeStore.editDict.description">{{ runtimeStore.editDict.description }}</div>
+      </div>
+    </header>
+    <div class="flex h-140">
+      <div class="w-1/2">
+        <BaseTable
+            class="h-full"
+            ref="listRef"
+            v-model:list="list">
+          <template v-slot:suffix="{ item, index }">
+            <BaseIcon
+                class="del"
+                @click="editWord(item)"
+                title="编辑"
+                icon="tabler:edit"/>
+            <BaseIcon
+                class="del"
+                @click="del({item,index})"
+                title="删除"
+                icon="solar:trash-bin-minimalistic-linear"/>
+          </template>
+        </BaseTable>
+      </div>
+      <div class="add w-1/2" v-if="wordFormData.type">
+        <div class="common-title">
+          {{ wordFormData.type === FormMode.Add ? '添加' : '修改' }}单词
+        </div>
+        <el-form
+            class="form"
+            ref="wordFormRef"
+            :rules="wordRules"
+            :model="wordForm"
+            label-width="6rem">
+          <el-form-item label="单词" prop="word">
+            <el-input v-model="wordForm.word"/>
+          </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.phonetic0"/>
+          </el-form-item>
+          <el-form-item label="音标/发音②">
+            <el-input v-model="wordForm.phonetic1"/>
+          </el-form-item>
+          <div class="flex-center">
+            <el-button @click="closeWordForm">关闭</el-button>
+            <el-button type="primary" @click="onSubmitWord">保存</el-button>
+          </div>
+        </el-form>
+      </div>
+    </div>
+  </BasePage>
 </template>
 
 <style scoped lang="scss">

src/utils/index.ts

@@ -187,8 +187,8 @@ export async function _checkDictWords(dict: Dict) {
         v.map(s => {
           s.id = nanoid(6)
         })
-        dict.words = Object.freeze(v)
-        // dict.words = v
+        // dict.words = Object.freeze(v)
+        dict.words = v
       }
     }
   }