From 73055fd2624cd7f158f54c129fba309fb93fe61c Mon Sep 17 00:00:00 2001 From: ray_wuhao <443547225@qq.com> Date: Thu, 18 May 2023 17:12:23 +0800 Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E5=88=86=E7=BB=86=E8=8A=82=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- auto-imports.d.ts | 11 +++ package.json | 25 +++++- src/components/RayLink/index.tsx | 4 +- .../src/components/TableSetting/index.tsx | 6 +- src/layout/components/MenuTag/index.tsx | 16 +++- .../SiderBar/Components/GlobalSeach/index.tsx | 4 +- .../SiderBar/Components/LockScreen/index.scss | 12 +++ .../SiderBar/Components/LockScreen/index.tsx | 87 +++++++++++++++++++ .../SiderBar/Components/SettingDrawer/hook.ts | 1 + src/layout/components/SiderBar/index.tsx | 14 ++- src/locales/index.ts | 1 + src/locales/useI18n.ts | 1 - src/lock/index.tsx | 34 -------- src/store/modules/setting.ts | 4 + src/views/rely/views/rely-about/index.tsx | 4 +- 16 files changed, 177 insertions(+), 49 deletions(-) create mode 100644 src/layout/components/SiderBar/Components/LockScreen/index.scss create mode 100644 src/layout/components/SiderBar/Components/LockScreen/index.tsx delete mode 100644 src/lock/index.tsx diff --git a/README.md b/README.md index 8224b494..e4a90294 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ ## 感谢 -> 感谢 对于本人的支持。 +> 感谢 对于本人的支持。 ## 预览地址 diff --git a/auto-imports.d.ts b/auto-imports.d.ts index 58e06e8c..a0e4a019 100644 --- a/auto-imports.d.ts +++ b/auto-imports.d.ts @@ -50,6 +50,8 @@ declare global { const nextTick: typeof import('vue')['nextTick'] const onActivated: typeof import('vue')['onActivated'] const onBeforeMount: typeof import('vue')['onBeforeMount'] + const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave'] + const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate'] const onBeforeUnmount: typeof import('vue')['onBeforeUnmount'] const onBeforeUpdate: typeof import('vue')['onBeforeUpdate'] const onClickOutside: typeof import('@vueuse/core')['onClickOutside'] @@ -81,6 +83,7 @@ declare global { const refThrottled: typeof import('@vueuse/core')['refThrottled'] const refWithControl: typeof import('@vueuse/core')['refWithControl'] const resolveComponent: typeof import('vue')['resolveComponent'] + const resolveDirective: typeof import('vue')['resolveDirective'] const resolveRef: typeof import('@vueuse/core')['resolveRef'] const resolveUnref: typeof import('@vueuse/core')['resolveUnref'] const setActivePinia: typeof import('pinia')['setActivePinia'] @@ -112,10 +115,12 @@ declare global { const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter'] const useArrayFind: typeof import('@vueuse/core')['useArrayFind'] const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex'] + const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast'] const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin'] const useArrayMap: typeof import('@vueuse/core')['useArrayMap'] const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce'] const useArraySome: typeof import('@vueuse/core')['useArraySome'] + const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique'] const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue'] const useAsyncState: typeof import('@vueuse/core')['useAsyncState'] const useAttrs: typeof import('vue')['useAttrs'] @@ -127,6 +132,7 @@ declare global { const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation'] const useCached: typeof import('@vueuse/core')['useCached'] const useClipboard: typeof import('@vueuse/core')['useClipboard'] + const useCloned: typeof import('@vueuse/core')['useCloned'] const useColorMode: typeof import('@vueuse/core')['useColorMode'] const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog'] const useCounter: typeof import('@vueuse/core')['useCounter'] @@ -177,6 +183,7 @@ declare global { const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn'] const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier'] const useLastChanged: typeof import('@vueuse/core')['useLastChanged'] + const useLink: typeof import('vue-router')['useLink'] const useLoadingBar: typeof import('naive-ui')['useLoadingBar'] const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage'] const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys'] @@ -202,11 +209,14 @@ declare global { const useParallax: typeof import('@vueuse/core')['useParallax'] const usePermission: typeof import('@vueuse/core')['usePermission'] const usePointer: typeof import('@vueuse/core')['usePointer'] + const usePointerLock: typeof import('@vueuse/core')['usePointerLock'] const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe'] const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme'] + const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast'] const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark'] const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages'] const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion'] + const usePrevious: typeof import('@vueuse/core')['usePrevious'] const useRafFn: typeof import('@vueuse/core')['useRafFn'] const useRefHistory: typeof import('@vueuse/core')['useRefHistory'] const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver'] @@ -220,6 +230,7 @@ declare global { const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage'] const useShare: typeof import('@vueuse/core')['useShare'] const useSlots: typeof import('vue')['useSlots'] + const useSorted: typeof import('@vueuse/core')['useSorted'] const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition'] const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis'] const useStepper: typeof import('@vueuse/core')['useStepper'] diff --git a/package.json b/package.json index 2845845a..a526ffc4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ray-template", - "private": true, + "private": false, "version": "3.1.7", "type": "module", "scripts": { @@ -82,5 +82,26 @@ "vite-plugin-svg-icons": "^2.0.1", "vite-svg-loader": "^3.4.0", "vue-tsc": "^1.0.9" - } + }, + "description": "", + "main": "index.js", + "repository": { + "type": "git", + "url": "git+https://github.com/XiaoDaiGua-Ray/xiaodaigua-ray.github.io.git" + }, + "keywords": [ + "ray-template", + "vue3.2模板", + "vue3-tsx-vite-pinia", + "ray template", + "Ray Template", + "admin template", + "中后台模板" + ], + "author": "Ray", + "license": "ISC", + "bugs": { + "url": "https://github.com/XiaoDaiGua-Ray/xiaodaigua-ray.github.io/issues" + }, + "homepage": "https://github.com/XiaoDaiGua-Ray/xiaodaigua-ray.github.io#readme" } diff --git a/src/components/RayLink/index.tsx b/src/components/RayLink/index.tsx index 4bc02c89..67459166 100644 --- a/src/components/RayLink/index.tsx +++ b/src/components/RayLink/index.tsx @@ -69,7 +69,9 @@ const RayLink = defineComponent({ round src={curr.icon} style={['cursor: pointer']} - onClick={this.handleLinkClick.bind(this, curr)} + {...{ + onClick: this.handleLinkClick.bind(this, curr), + }} objectFit="cover" size={24} /> diff --git a/src/components/RayTable/src/components/TableSetting/index.tsx b/src/components/RayTable/src/components/TableSetting/index.tsx index 5e72c9a7..1aeadbce 100644 --- a/src/components/RayTable/src/components/TableSetting/index.tsx +++ b/src/components/RayTable/src/components/TableSetting/index.tsx @@ -151,8 +151,10 @@ const TableSetting = defineComponent({ class={['ray-table__setting-option--draggable']} v-model={this.settingOptions} itemKey="key" - disabled={!this.disableDraggable} - onEnd={this.handleDraggableEnd.bind(this)} + {...{ + disabled: !this.disableDraggable, + onEnd: this.handleDraggableEnd.bind(this), + }} > {{ item: ({ diff --git a/src/layout/components/MenuTag/index.tsx b/src/layout/components/MenuTag/index.tsx index 7d3e8250..3c1e1ec3 100644 --- a/src/layout/components/MenuTag/index.tsx +++ b/src/layout/components/MenuTag/index.tsx @@ -386,7 +386,13 @@ const MenuTag = defineComponent({ customClassName="menu-tag__left-arrow" onClick={this.handleScrollX.bind(this, 'left')} /> - + 1 } - onClose={() => this.closeCurrentMenuTag(idx)} + onClose={this.closeCurrentMenuTag.bind(this, idx)} type={curr.key === this.menuKey ? 'primary' : 'default'} - onClick={this.handleTagClick.bind(this, curr)} bordered={false} - onContextmenu={this.handleContextMenu.bind(this, idx)} + {...{ + onClick: this.handleTagClick.bind(this, curr), + onContextmenu: this.handleContextMenu.bind(this, idx), + }} > {typeof curr.label === 'function' ? curr.label() diff --git a/src/layout/components/SiderBar/Components/GlobalSeach/index.tsx b/src/layout/components/SiderBar/Components/GlobalSeach/index.tsx index 28ca7d41..41bbc0d6 100644 --- a/src/layout/components/SiderBar/Components/GlobalSeach/index.tsx +++ b/src/layout/components/SiderBar/Components/GlobalSeach/index.tsx @@ -162,7 +162,9 @@ const GlobalSeach = defineComponent({ align="center" wrapItem={false} class="content-item" - onClick={this.handleSearchItemClick.bind(this, curr)} + {...{ + onClick: this.handleSearchItemClick.bind(this, curr), + }} >
{curr?.meta?.icon ? ( diff --git a/src/layout/components/SiderBar/Components/LockScreen/index.scss b/src/layout/components/SiderBar/Components/LockScreen/index.scss new file mode 100644 index 00000000..a7320a89 --- /dev/null +++ b/src/layout/components/SiderBar/Components/LockScreen/index.scss @@ -0,0 +1,12 @@ +.lock-screen { + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + + & .lock-screen__content { + width: 100%; + height: 100%; + } +} diff --git a/src/layout/components/SiderBar/Components/LockScreen/index.tsx b/src/layout/components/SiderBar/Components/LockScreen/index.tsx new file mode 100644 index 00000000..e40d3e47 --- /dev/null +++ b/src/layout/components/SiderBar/Components/LockScreen/index.tsx @@ -0,0 +1,87 @@ +/** + * + * @author Ray + * + * @date 2023-05-13 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import './index.scss' + +import { NModal, NInput, NForm, NFormItem, NButton } from 'naive-ui' + +import { useSetting } from '@/store' +import { getCache, setCache } from '@/utils/cache' + +import type { FormInst } from 'naive-ui' + +const LockScreen = defineComponent({ + name: 'LockScreen', + setup() { + const formRef = ref() + + const settingStore = useSetting() + const { lockScreenSwitch, lockScreenInputSwitch } = + storeToRefs(settingStore) + + const state = reactive({ + lockCondition: { + pwd: null, + }, + }) + const rules = { + pwd: {}, + } + const isLock = + getCache('isLockScreen') === 'no' ? false : getCache('isLockScreen') + + return { + lockScreenSwitch, + lockScreenInputSwitch, + rules, + ...toRefs(state), + isLock, + } + }, + render() { + return ( + + {!this.isLock ? ( + /** 输入界面 */ +
+ + + + + + 锁屏 + + +
+ ) : ( + /** 锁屏界面 */ +
+
+
+ )} + + ) + }, +}) + +export default LockScreen diff --git a/src/layout/components/SiderBar/Components/SettingDrawer/hook.ts b/src/layout/components/SiderBar/Components/SettingDrawer/hook.ts index 9263a5a4..0ac9549b 100644 --- a/src/layout/components/SiderBar/Components/SettingDrawer/hook.ts +++ b/src/layout/components/SiderBar/Components/SettingDrawer/hook.ts @@ -4,4 +4,5 @@ export const useSwatchesColorOptions = () => [ '#2d8cf0', '#F0A020', 'rgba(208, 48, 80, 1)', + 'rgba(60, 53, 222, 1)', ] diff --git a/src/layout/components/SiderBar/index.tsx b/src/layout/components/SiderBar/index.tsx index b33747e0..471af0d8 100644 --- a/src/layout/components/SiderBar/index.tsx +++ b/src/layout/components/SiderBar/index.tsx @@ -17,9 +17,9 @@ import RayTooltipIcon from '@/components/RayTooltipIcon/index' import SettingDrawer from './components/SettingDrawer/index' import Breadcrumb from './components/Breadcrumb/index' import GlobalSeach from './components/GlobalSeach/index' +import LockScreen from './components/LockScreen/index' -import { useSetting } from '@/store' -import { useSignin } from '@/store' +import { useSetting, useSignin } from '@/store' import { localOptions } from '@/locales/index' import { useAvatarOptions } from './hook' import { getCache } from '@/utils/cache' @@ -75,6 +75,12 @@ const SiderBar = defineComponent({ tooltip: t('headerTooltip.Search'), eventKey: 'search', }, + { + name: 'lock', + size: 18, + tooltip: t('headerTooltip.Lock'), + eventKey: 'lock', + }, { name: 'fullscreen', size: 18, @@ -116,6 +122,9 @@ const SiderBar = defineComponent({ search: () => { globalSearchShown.value = true }, + lock: () => { + changeSwitcher(true, 'lockScreenSwitch') + }, } const handleIconClick = (key: IconEventMap) => { @@ -157,6 +166,7 @@ const SiderBar = defineComponent({ return ( + {/* */} { if (!namespace) { diff --git a/src/lock/index.tsx b/src/lock/index.tsx deleted file mode 100644 index 331beda6..00000000 --- a/src/lock/index.tsx +++ /dev/null @@ -1,34 +0,0 @@ -/** - * - * @author Ray - * - * @date 2023-03-14 - * - * @workspace ray-template - * - * @remark 今天也是元气满满撸代码的一天 - */ - -/** - * - * TODO: - * - 全屏锁屏功能 - * - 输入密码解锁 - * - 可以重定向至登陆页 - * - 显示当前时间(YYYY-MM-DD HH:mm) - */ - -import type { PropType } from 'vue' - -const LockScreen = defineComponent({ - name: 'LockScreen', - // props: {}, - setup() { - return {} - }, - render() { - return
- }, -}) - -export default LockScreen diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts index 4c267a6f..f9381029 100644 --- a/src/store/modules/setting.ts +++ b/src/store/modules/setting.ts @@ -17,6 +17,8 @@ interface SettingState { breadcrumbSwitch: boolean localeLanguage: string invertSwitch: boolean + lockScreenSwitch: boolean + lockScreenInputSwitch: boolean } export const useSetting = defineStore( @@ -42,6 +44,8 @@ export const useSetting = defineStore( invertSwitch: false, // 反转色模式 breadcrumbSwitch: true, // 面包屑开关 localeLanguage: getDefaultLocal(), + lockScreenSwitch: false, // 锁屏开关 + lockScreenInputSwitch: false, // 锁屏输入状态开关 }) /** 修改当前语言 */ diff --git a/src/views/rely/views/rely-about/index.tsx b/src/views/rely/views/rely-about/index.tsx index 73edc5cd..c272d08b 100644 --- a/src/views/rely/views/rely-about/index.tsx +++ b/src/views/rely/views/rely-about/index.tsx @@ -102,7 +102,9 @@ const RelyAbout = defineComponent({ {curr.label}