部分细节优化

README.md

@@ -8,7 +8,7 @@
 
 ## 感谢
 
-> 感谢 <https://yunkuangao.me/> 对于本人的支持。
+> 感谢 <https://me.yka.moe/> 对于本人的支持。
 
 ## 预览地址
 

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']

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": "<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->",
+  "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"
 }

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}
                 />

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: ({

src/layout/components/MenuTag/index.tsx

@@ -386,7 +386,13 @@ const MenuTag = defineComponent({
               customClassName="menu-tag__left-arrow"
               onClick={this.handleScrollX.bind(this, 'left')}
             />
-            <NScrollbar xScrollable ref="scrollRef" id={this.scrollBarUUID}>
+            <NScrollbar
+              xScrollable
+              ref="scrollRef"
+              {...{
+                id: this.scrollBarUUID,
+              }}
+            >
               <NSpace
                 class="menu-tag-wrapper"
                 wrap={false}
@@ -399,11 +405,13 @@ const MenuTag = defineComponent({
                       curr.key !== this.rootPath &&
                       this.modelMenuTagOptions.length > 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()

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),
+                        }}
                       >
                         <div class="content-item-icon">
                           {curr?.meta?.icon ? (

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%;
+  }
+}

src/layout/components/SiderBar/Components/LockScreen/index.tsx

@@ -0,0 +1,87 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-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<FormInst>()
+
+    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 (
+      <NModal
+        v-model:show={this.lockScreenSwitch}
+        transform-origin="center"
+        show
+        // closeOnEsc={false}
+        autoFocus={false}
+        maskClosable={false}
+        preset={!this.isLock ? 'dialog' : undefined}
+        title="锁定屏幕"
+      >
+        {!this.isLock ? (
+          /** 输入界面 */
+          <div class="lock-screen__input">
+            <NForm model={this.lockCondition} rules={this.rules} inline>
+              <NFormItem label="锁屏密码">
+                <NInput
+                  v-model:value={this.lockCondition.pwd}
+                  type="password"
+                />
+              </NFormItem>
+              <NFormItem>
+                <NButton type="primary">锁屏</NButton>
+              </NFormItem>
+            </NForm>
+          </div>
+        ) : (
+          /** 锁屏界面 */
+          <div class="lock-screen">
+            <div class="lock-screen__content"></div>
+          </div>
+        )}
+      </NModal>
+    )
+  },
+})
+
+export default LockScreen

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)',
 ]

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 { useSetting, useSignin } from '@/store'
-import { 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 (
       <NLayoutHeader class="layout-header" bordered>
         <GlobalSeach v-model:show={this.globalSearchShown} />
+        {/* <LockScreen /> */}
         <NSpace
           class="layout-header__method"
           align="center"

src/locales/index.ts

@@ -34,6 +34,7 @@ export { naiveLocales, localOptions } from './language'
 import type { App } from 'vue'
 import type { I18n } from 'vue-i18n'
 
+/** i18n 实例 */
 export let i18n: I18n
 
 /**

src/locales/useI18n.ts

@@ -1,7 +1,6 @@
 import { i18n } from './index'
 
 import type { WritableComputedRef } from 'vue'
-import type { useI18n as _useI18n } from 'vue-i18n'
 
 const getI18nKey = (namespace: string | undefined, key: string) => {
   if (!namespace) {

src/lock/index.tsx

@@ -1,34 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-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 <div class="lock-screen"></div>
-  },
-})
-
-export default LockScreen

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, // 锁屏输入状态开关
     })
 
     /** 修改当前语言 */

src/views/rely/views/rely-about/index.tsx

@@ -102,7 +102,9 @@ const RelyAbout = defineComponent({
                 <NTag
                   bordered={false}
                   type="info"
-                  onClick={this.handleTagClick.bind(this, curr)}
+                  {...{
+                    onClick: this.handleTagClick.bind(this, curr),
+                  }}
                   style={[curr.url ? 'cursor: pointer' : '']}
                 >
                   {curr.label}