blackteay/ray-template
1
0
Fork 0
mirror of https://github.com/XiaoDaiGua-Ray/ray-template.git synced 2025-04-05 19:42:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

部分细节优化

Browse Source
This commit is contained in:
ray_wuhao 2023-05-18 17:12:23 +08:00
parent dab763cf08
commit 73055fd262
16 changed files with 177 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

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

11
auto-imports.d.ts vendored
View File

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

25
package.json
View File

@ -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"
}

4
src/components/RayLink/index.tsx
View File

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

6
src/components/RayTable/src/components/TableSetting/index.tsx
View File

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

16
src/layout/components/MenuTag/index.tsx
View File

@ -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()

4
src/layout/components/SiderBar/Components/GlobalSeach/index.tsx
View File

@ -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 ? (

12
src/layout/components/SiderBar/Components/LockScreen/index.scss Normal file
View File

@ -0,0 +1,12 @@
.lock-screen {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
& .lock-screen__content {
width: 100%;
height: 100%;
}
}

87
src/layout/components/SiderBar/Components/LockScreen/index.tsx Normal file
View File

@ -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

1
src/layout/components/SiderBar/Components/SettingDrawer/hook.ts
View File

@ -4,4 +4,5 @@ export const useSwatchesColorOptions = () => [
'#2d8cf0',
'#F0A020',
'rgba(208, 48, 80, 1)',
'rgba(60, 53, 222, 1)',
]

14
src/layout/components/SiderBar/index.tsx
View File

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

1
src/locales/index.ts
View File

@ -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
/**

1
src/locales/useI18n.ts
View File

@ -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) {

34
src/lock/index.tsx
View File

@ -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

4
src/store/modules/setting.ts
View File

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

4
src/views/rely/views/rely-about/index.tsx
View File

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