diff --git a/package.json b/package.json index 91aa499cb..f03cf3abb 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "typecheck": "tsc --noEmit && vue-tsc --noEmit --skipLibCheck", "svgo": "svgo -f src/assets/svg -o src/assets/svg", "cloc": "NODE_OPTIONS=--max-old-space-size=4096 cloc . --exclude-dir=node_modules --exclude-lang=YAML", - "clean:cache": "rm -rf node_modules && rm -rf .eslintcache && pnpm install", + "clean:cache": "rimraf node_modules && rimraf .eslintcache && pnpm install", "lint:eslint": "eslint --cache --max-warnings 0 \"{src,mock,build}/**/*.{vue,js,ts,tsx}\" --fix", "lint:prettier": "prettier --write \"src/**/*.{js,ts,json,tsx,css,scss,vue,html,md}\"", "lint:stylelint": "stylelint --cache --fix \"**/*.{html,vue,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/", diff --git a/src/components/ReIcon/src/Select.vue b/src/components/ReIcon/src/Select.vue index 22ca700b6..1851cbd96 100644 --- a/src/components/ReIcon/src/Select.vue +++ b/src/components/ReIcon/src/Select.vue @@ -105,7 +105,8 @@ watch( props.modelValue.indexOf(":") + 1 ); } - } + }, + { immediate: true } ); watch( () => { @@ -140,12 +141,11 @@ watch( - - - + - diff --git a/src/layout/components/search/components/SearchFooter.vue b/src/layout/components/search/components/SearchFooter.vue index 52cb51283..80165de99 100644 --- a/src/layout/components/search/components/SearchFooter.vue +++ b/src/layout/components/search/components/SearchFooter.vue @@ -1,3 +1,17 @@ + + - - diff --git a/src/layout/components/search/components/SearchModal.vue b/src/layout/components/search/components/SearchModal.vue index 4251e09e0..33b5ebba0 100644 --- a/src/layout/components/search/components/SearchModal.vue +++ b/src/layout/components/search/components/SearchModal.vue @@ -8,7 +8,7 @@ import { transformI18n } from "@/plugins/i18n"; import { ref, computed, shallowRef } from "vue"; import { useDebounceFn, onKeyStroke } from "@vueuse/core"; import { usePermissionStoreHook } from "@/store/modules/permission"; -import Search from "@iconify-icons/ep/search"; +import Search from "@iconify-icons/ri/search-line"; interface Props { /** 弹窗显隐 */ @@ -25,6 +25,8 @@ const props = withDefaults(defineProps(), {}); const router = useRouter(); const keyword = ref(""); +const scrollbarRef = ref(); +const resultRef = ref(); const activePath = ref(""); const inputRef = ref(null); const resultOptions = shallowRef([]); @@ -83,6 +85,11 @@ function handleClose() { }, 200); } +function scrollTo(index) { + const scrollTop = resultRef.value.handleScroll(index); + scrollbarRef.value.setScrollTop(scrollTop); +} + /** key up */ function handleUp() { const { length } = resultOptions.value; @@ -92,8 +99,10 @@ function handleUp() { ); if (index === 0) { activePath.value = resultOptions.value[length - 1].path; + scrollTo(resultOptions.value.length - 1); } else { activePath.value = resultOptions.value[index - 1].path; + scrollTo(index - 1); } } @@ -109,6 +118,7 @@ function handleDown() { } else { activePath.value = resultOptions.value[index + 1].path; } + scrollTo(index + 1); } /** key enter */ @@ -127,41 +137,55 @@ onKeyStroke("ArrowDown", handleDown); - - - + - - + + + + - + + diff --git a/src/layout/components/search/components/SearchResult.vue b/src/layout/components/search/components/SearchResult.vue index f73e94c08..f2ce8830a 100644 --- a/src/layout/components/search/components/SearchResult.vue +++ b/src/layout/components/search/components/SearchResult.vue @@ -1,6 +1,6 @@ - - - - {{ t(item.meta?.title) }} - - - + + + {{ t(item.meta?.title) }} + + diff --git a/src/style/dark.scss b/src/style/dark.scss index e93f889c2..374b5085c 100644 --- a/src/style/dark.scss +++ b/src/style/dark.scss @@ -139,6 +139,23 @@ html.dark { } } + /* 自定义菜单搜索样式 */ + .pure-search-dialog { + .el-dialog__footer { + box-shadow: 0 -1px 0 0 #555a64, 0 -3px 6px 0 rgb(69 98 155 / 12%); + } + + .search-footer { + .search-footer-item { + color: rgb(235 235 235 / 60%); + + .icon { + box-shadow: none; + } + } + } + } + /* ReSegmented 组件 */ .pure-segmented { color: rgb(255 255 255 / 65%); diff --git a/src/style/element-plus.scss b/src/style/element-plus.scss index 8b9e8c3cd..59b0c5f39 100644 --- a/src/style/element-plus.scss +++ b/src/style/element-plus.scss @@ -148,3 +148,24 @@ } } } + +/* 自定义菜单搜索样式 */ +.pure-search-dialog { + .el-dialog__header { + display: none; + } + + .el-dialog__body { + padding-top: 12px; + padding-bottom: 0; + } + + .el-input__inner { + font-size: 1.2em; + } + + .el-dialog__footer { + padding-bottom: 10px; + box-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgb(69 98 155 / 12%); + } +} diff --git a/src/views/login/utils/verifyCode.ts b/src/views/login/utils/verifyCode.ts index c2c16acae..b6d89a7bf 100644 --- a/src/views/login/utils/verifyCode.ts +++ b/src/views/login/utils/verifyCode.ts @@ -17,11 +17,12 @@ export const useVerifyCode = () => { await formEl.validateField(props, isValid => { if (isValid) { clearInterval(timer.value); + isDisabled.value = true; + text.value = `${time}`; timer.value = setInterval(() => { if (time > 0) { - text.value = `${time}`; - isDisabled.value = true; time -= 1; + text.value = `${time}`; } else { text.value = ""; isDisabled.value = false;