From 1c70908afbd763e60dc9788704350ff8dc7916d8 Mon Sep 17 00:00:00 2001 From: Zyronon Date: Tue, 21 Oct 2025 11:05:41 +0000 Subject: [PATCH] save --- src/components/BaseTable.vue | 321 +++++++++--------- src/components/WordItem.vue | 6 +- src/pages/word/PracticeWords.vue | 199 ++++++++--- src/pages/word/WordsPage.vue | 65 ++-- src/pages/word/components/Footer.vue | 2 +- .../word/components/PracticeSettingDialog.vue | 38 ++- .../components/PracticeWordListDialog.vue | 74 ++++ 7 files changed, 457 insertions(+), 248 deletions(-) create mode 100644 src/pages/word/components/PracticeWordListDialog.vue diff --git a/src/components/BaseTable.vue b/src/components/BaseTable.vue index 15b77136..21f3c569 100644 --- a/src/components/BaseTable.vue +++ b/src/components/BaseTable.vue @@ -20,6 +20,7 @@ let list = defineModel('list') const props = withDefaults(defineProps<{ loading?: boolean showToolbar?: boolean + showPagination?: boolean exportLoading?: boolean importLoading?: boolean del?: Function @@ -28,6 +29,7 @@ const props = withDefaults(defineProps<{ }>(), { loading: true, showToolbar: true, + showPagination: true, exportLoading: false, importLoading: false, del: () => void 0, @@ -71,6 +73,7 @@ let currentList = $computed(() => { if (searchKey) { return list.value.filter(v => v.word.includes(searchKey)) } + if (!props.showPagination) return list.value return list.value.slice((pageNo - 1) * pageSize, (pageNo - 1) * pageSize + pageSize) }) @@ -133,171 +136,173 @@ defineExpose({ closeImportDialog }) defineRender( - () => { - const d = (item) => toggleSelect(item)} - size="large"/> + () => { + const d = (item) => toggleSelect(item)} + size="large"/> - return ( -
+ return ( +
+ { + props.showToolbar &&
{ - props.showToolbar &&
- { - showSearchInput ? ( -
- searchKey = e)} - class="flex-1"> - {{ - subfix: () => - }} - - (showSearchInput = false, searchKey = '')}>取消 -
- ) : ( -
-
- toggleSelectAll()} - modelValue={selectAll} - size="large"/> - {selectIds.length} / {list.value.length} -
- -
- { - selectIds.length ? - - - - - - : null - } - showImportDialog = true} - title="导入"> - - - emit('exportData')} - title="导出"> - {props.exportLoading ? : } - - - - - showSortDialog = !showSortDialog} - > - - - showSearchInput = !showSearchInput} - title="搜索"> - - - showSortDialog = e} - style="width: 8rem;" - > -
- 列表顺序设置 -
-
- sort(Sort.reverse)}>翻转 - - sort(Sort.random)}>随机 -
- -
-
- ) - } + showSearchInput ? ( +
+ searchKey = e)} + class="flex-1"> + {{ + subfix: () => + }} + + (showSearchInput = false, searchKey = '')}>取消
- } - { - props.loading ? -
- + ) : ( +
+
+ toggleSelectAll()} + modelValue={selectAll} + size="large"/> + {selectIds.length} / {list.value.length}
- : currentList.length ? ( - <> -
listRef = e}> - {currentList.map((item, index) => { - return ( -
- {s.default({checkbox: d, item, index: (pageSize * (pageNo - 1)) + index + 1})} -
- ) - })} -
-
- pageSize = e} - pageSizes={[20, 50, 100, 200]} - layout="prev, pager, next" - total={list.value.length}/> -
- - ) : - } - -
-
请按照模板的格式来填写数据
-
单词项为必填，其他项可不填
-
翻译：一行一个翻译，前面词性，后面内容（如n.取消）；多个翻译请换行
-
例句：一行原文，一行译文；多个请换两行
-
短语：一行原文，一行译文；多个请换两行
-
同义词、同根词、词源：请前往官方字典，然后编辑其中某个单词，参考其格式
-
- 模板下载地址：单词导入模板 +
+ { + selectIds.length ? + + + + + + : null + } + showImportDialog = true} + title="导入"> + + + emit('exportData')} + title="导出"> + {props.exportLoading ? : } + + + + + showSortDialog = !showSortDialog} + > + + + showSearchInput = !showSearchInput} + title="搜索"> + + + showSortDialog = e} + style="width: 8rem;" + > +
+ 列表顺序设置 +
+
+ sort(Sort.reverse)}>翻转 + + sort(Sort.random)}>随机 +
+ +
-
- { - let d: HTMLDivElement = document.querySelector('#upload-trigger') - d.click() - }} - loading={props.importLoading}>导入 - emit('importData', e)} - class="w-0 h-0 opacity-0"/> -
-
- + ) + }
- ) - } + } + { + props.loading ? +
+ +
+ : currentList.length ? ( + <> +
listRef = e}> + {currentList.map((item, index) => { + return ( +
+ {s.default({checkbox: d, item, index: (pageSize * (pageNo - 1)) + index + 1})} +
+ ) + })} +
+ { + props.showPagination &&
+ pageSize = e} + pageSizes={[20, 50, 100, 200]} + layout="prev, pager, next" + total={list.value.length}/> +
+ } + + ) : + } + + +
+
请按照模板的格式来填写数据
+
单词项为必填，其他项可不填
+
翻译：一行一个翻译，前面词性，后面内容（如n.取消）；多个翻译请换行
+
例句：一行原文，一行译文；多个请换两行
+
短语：一行原文，一行译文；多个请换两行
+
同义词、同根词、词源：请前往官方字典，然后编辑其中某个单词，参考其格式
+
+ 模板下载地址：单词导入模板 +
+
+ { + let d: HTMLDivElement = document.querySelector('#upload-trigger') + d.click() + }} + loading={props.importLoading}>导入 + emit('importData', e)} + class="w-0 h-0 opacity-0"/> +
+
+ +
+ ) + } ) diff --git a/src/pages/word/components/PracticeWordListDialog.vue b/src/pages/word/components/PracticeWordListDialog.vue new file mode 100644 index 00000000..599521ef --- /dev/null +++ b/src/pages/word/components/PracticeWordListDialog.vue @@ -0,0 +1,74 @@ + + + + +