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:
chuan_wuhao 2022-11-25 13:51:13 +08:00
parent a626e44e8b
commit 1129cc6e95
17 changed files with 113 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.cjs
View File

@ -66,7 +66,7 @@ module.exports = {
'no-extra-bind': 2, // 禁止不必要的函数绑定
'no-extra-boolean-cast': 2, // 禁止不必要的 `bool` 转换
'no-extra-parens': 0, // 禁止非必要的括号
'no-extra-semi': 2, // 忽略多余的冒号
semi: ['error', 'never', { beforeStatementContinuationChars: 'always' }],
'no-fallthrough': 1, // 禁止 `switch` 穿透
'no-func-assign': 2, // 禁止重复的函数声明
'no-implicit-coercion': 1, // 禁止隐式转换

1
components.d.ts vendored
View File

@ -7,7 +7,6 @@ export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
DraggableComponent: typeof import('./src/components/DraggableComponent/index.vue')['default']
RayTransitionComponent: typeof import('./src/components/RayTransitionComponent/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']

2
dist/production-dist/index.html vendored
View File

@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/ray.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ray template</title>
<script type="module" crossorigin src="/assets/index.f568b427.js"></script>
<script type="module" crossorigin src="/assets/index.7f217d89.js"></script>
<link rel="stylesheet" href="/assets/index.4a9527dd.css">
</head>
<body>

4
locales/en-US.json
View File

@ -9,7 +9,9 @@
"Reload": "Reload Current Page",
"Lock": "Lock",
"Setting": "Setting",
"Github": "Github"
"Github": "Github",
"FullScreen": "Full Screen",
"CancelFullScreen": "Cancel Full Screen"
},
"LayoutHeaderSettingOptions": {
"Title": "Configuration",

4
locales/zh-CN.json
View File

@ -9,7 +9,9 @@
"Reload": "刷新当前页面",
"Lock": "锁屏",
"Setting": "设置",
"Github": "Github"
"Github": "Github",
"FullScreen": "全屏",
"CancelFullScreen": "退出全屏"
},
"LayoutHeaderSettingOptions": {
"Title": "项目配置",

1
package.json
View File

@ -19,6 +19,7 @@
"pinia": "^2.0.17",
"pinia-plugin-persistedstate": "^2.4.0",
"sass": "^1.54.3",
"screenfull": "^6.0.2",
"scrollreveal": "^4.0.9",
"vue": "^3.2.37",
"vue-i18n": "^9.2.2",

25
src/components/DraggableComponent/index.vue
View File

@ -1,25 +0,0 @@
<script setup lang="ts">
import type { MaybeComputedRef } from '@vueuse/core'
const el = ref<HTMLElement | null>(null)
const { x, y, style } = useDraggable(el as MaybeComputedRef<HTMLElement>, {
initialValue: { x: 630, y: 14 },
})
</script>
<template>
<div ref="el" class="draggable-component" :style="style">
Drag me! I am at {{ x }}, {{ y }}
</div>
</template>
<style lang="scss" scope>
.draggable-component {
position: fixed;
padding: 8px 16px;
border: 1px solid rgba(156, 163, 175, 0.3);
cursor: move;
z-index: 10;
}
</style>

5
src/icons/cancel_fullscreen.svg Normal file
View File

@ -0,0 +1,5 @@
<svg t="1669351467526" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14248" width="200" height="200">
<path d="M724.81 225.5v454.85H162V225.5h562.81m64-64H98v582.85h690.8V161.5h0.01z" fill="currentColor" p-id="14249"></path>
<path d="M788.81 284.77V159.5H98v582.85h152.55V866.6h677.74V284.77H788.81zM162 223.5h562.8v454.85H162V223.5z m702.29 579.1H314.55v-60.26H788.8V348.77h75.49V802.6z" fill="currentColor" p-id="14250"></path>
<path d="M634.53 267.95L523.19 379.29v-67.45h-63.58V486.51h174.64v-63.58h-66.26l110.76-110.76-44.22-44.22zM523.19 422.93v-1.14l1.14 1.14h-1.14z" fill="currentColor" p-id="14251"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 674 B

3
src/icons/fullscreen.svg Normal file
View File

@ -0,0 +1,3 @@
<svg t="1669354557217" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15192" width="200" height="200">
<path fill="currentColor" d="M256 170.666667a128 128 0 0 0-128 128v213.333333a42.666667 42.666667 0 1 0 85.333333 0V298.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h213.333333a42.666667 42.666667 0 1 0 0-85.333333H256z m512 682.666666a128 128 0 0 0 128-128v-170.666666a42.666667 42.666667 0 1 0-85.333333 0v170.666666a42.666667 42.666667 0 0 1-42.666667 42.666667h-192a42.666667 42.666667 0 1 0 0 85.333333H768z" p-id="15193"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 598 B

13
src/layout/components/SiderBar/Components/SettingDrawer/index.tsx
View File

@ -37,7 +37,7 @@ const SettingDrawer = defineComponent({
const { t } = useI18n()
const settingStore = useSetting()
const { changeTheme, changePrimaryColor, changeMenuTagLog } = settingStore
const { changePrimaryColor, changeSwitcher } = settingStore
const { themeValue, primaryColorOverride, menuTagLog } =
storeToRefs(settingStore)
@ -57,11 +57,10 @@ const SettingDrawer = defineComponent({
ray: t,
handleRailStyle,
changePrimaryColor,
changeTheme,
themeValue,
primaryColorOverride,
changeMenuTagLog,
menuTagLog,
changeSwitcher,
}
},
render() {
@ -83,7 +82,9 @@ const SettingDrawer = defineComponent({
<NSwitch
v-model:value={this.themeValue}
railStyle={this.handleRailStyle.bind(this)}
onUpdateValue={this.changeTheme.bind(this)}
onUpdateValue={(bool: boolean) =>
this.changeSwitcher(bool, 'themeValue')
}
>
{{
'checked-icon': () =>
@ -129,7 +130,9 @@ const SettingDrawer = defineComponent({
<NDescriptionsItem label="显示多标签">
<NSwitch
v-model:value={this.menuTagLog}
onUpdateValue={this.changeMenuTagLog.bind(this)}
onUpdateValue={(bool: boolean) =>
this.changeSwitcher(bool, 'menuTagLog')
}
/>
</NDescriptionsItem>
</NDescriptions>

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

@ -6,8 +6,15 @@ import { useLanguageOptions } from '@/language/index'
import SettingDrawer from './Components/SettingDrawer/index'
import { useAvatarOptions } from './hook'
import { removeCache } from '@/utils/cache'
import screenfull from 'screenfull'
import type { IconEventMapOptions, IconEventMap } from './type'
import type { IconEventMapOptions, IconEventMap, IconOptions } from './type'
/**
*
* 本来想通过写数据配置化的方式实现顶部的功能小按钮, 结果事实发现...
* 但是我又不想改, 就这样吧
*/
const SiderBar = defineComponent({
name: 'SiderBar',
@ -15,7 +22,7 @@ const SiderBar = defineComponent({
const settingStore = useSetting()
const { t } = useI18n()
const { updateLocale, changeReloadLog } = settingStore
const { updateLocale, changeSwitcher } = settingStore
const modelDrawerPlacement = ref(settingStore.drawerPlacement)
const showSettings = ref(false)
@ -27,12 +34,18 @@ const SiderBar = defineComponent({
},
]
const rightIconOptions = [
{
name: 'fullscreen',
size: 18,
tooltip: '',
eventKey: 'screen',
},
{
name: 'language',
size: 18,
tooltip: '',
dropdown: {
methodName: 'handleSelect', // 默认为 `handleSelect`
eventKey: 'handleSelect', // 默认为 `handleSelect`
switch: true,
options: useLanguageOptions(),
handleSelect: (key: string | number) => updateLocale(String(key)),
@ -42,18 +55,20 @@ const SiderBar = defineComponent({
name: 'github',
size: 18,
tooltip: 'LayoutHeaderTooltipOptions.Github',
eventKey: 'github',
},
{
name: 'setting',
size: 18,
tooltip: 'LayoutHeaderTooltipOptions.Setting',
eventKey: 'setting',
},
{
name: 'ray',
size: 22,
tooltip: '',
dropdown: {
methodName: 'handleSelect', // 默认为 `handleSelect`
eventKey: 'handleSelect', // 默认为 `handleSelect`
switch: true,
options: useAvatarOptions(),
handleSelect: (key: string | number) => {
@ -80,9 +95,9 @@ const SiderBar = defineComponent({
]
const iconEventMap: IconEventMapOptions = {
reload: () => {
changeReloadLog(false)
changeSwitcher(false, 'reloadRouteLog')
setTimeout(() => changeReloadLog(true))
setTimeout(() => changeSwitcher(true, 'reloadRouteLog'))
},
setting: () => {
showSettings.value = true
@ -90,12 +105,40 @@ const SiderBar = defineComponent({
github: () => {
window.open('https://github.com/XiaoDaiGua-Ray/ray-template')
},
screen: () => {
if (screenfull.isEnabled) {
screenfull.toggle()
} else {
window.$message.warning('您的浏览器不支持全屏~')
}
},
}
const handleIconClick = (key: IconEventMap) => {
iconEventMap[key]?.()
}
const Icon = (curr: IconOptions) => (
<RayIcon
customClassName="layout-header__method--icon"
name={curr.name}
size={curr.size}
onClick={handleIconClick.bind(this, curr.eventKey ?? '')}
/>
)
const TooltipIcon = (curr: IconOptions) =>
curr.tooltip ? (
<NTooltip>
{{
trigger: () => Icon(curr),
default: () => t(curr.tooltip ?? ''),
}}
</NTooltip>
) : (
Icon(curr)
)
return {
leftIconOptions,
rightIconOptions,
@ -103,6 +146,8 @@ const SiderBar = defineComponent({
handleIconClick,
modelDrawerPlacement,
showSettings,
TooltipIcon,
Icon,
}
},
render() {
@ -136,29 +181,13 @@ const SiderBar = defineComponent({
<NDropdown
options={curr.dropdown.options}
onSelect={
curr.dropdown[curr.dropdown.methodName ?? 'handleSelect']
curr.dropdown[curr.dropdown.eventKey ?? 'handleSelect']
}
>
<RayIcon
customClassName="layout-header__method--icon"
name={curr.name}
size={curr.size}
/>
{this.Icon(curr)}
</NDropdown>
) : (
<NTooltip>
{{
trigger: () => (
<RayIcon
customClassName="layout-header__method--icon"
name={curr.name}
size={curr.size}
onClick={this.handleIconClick.bind(this, curr.name)}
/>
),
default: () => this.t(curr.tooltip),
}}
</NTooltip>
this.TooltipIcon(curr)
),
)}
</NSpace>

17
src/layout/components/SiderBar/type.ts
View File

@ -1,5 +1,22 @@
import type { DropdownOption } from 'naive-ui'
export interface IconEventMapOptions {
[propName: string]: (...args: unknown[]) => unknown
}
export type IconEventMap = keyof IconEventMapOptions
export interface IconDropdownOptions extends IUnknownObjectKey {
event?: string
switch: boolean
options: DropdownOption[]
eventKey?: string
}
export interface IconOptions {
name: string
size?: number
tooltip?: string
eventKey?: string
dropdown?: IconDropdownOptions
}

3
src/router/modules/index.ts
View File

@ -9,5 +9,8 @@ export default routes
/**
*
* 弃用自动导入路由模块方式
*
* 采用手动引入子路由模块方式
*
* 因为自动导入路由方式在实际体验后还是有一些小问题, 综合考虑后, 还是自己手动挡吧
*/

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

@ -19,34 +19,19 @@ export const useSetting = defineStore(
locale.value = key
}
const changeTheme = (bool: boolean) => {
settingState.themeValue = bool
}
const changePrimaryColor = (value: string) => {
settingState.primaryColorOverride.common.primaryColor = value
}
/**
*
* @param bool 刷新页面开关
*/
const changeReloadLog = (bool: boolean) =>
(settingState.reloadRouteLog = bool)
/**
*
* @param bool 刷新页面开关
*/
const changeMenuTagLog = (bool: boolean) => (settingState.menuTagLog = bool)
const changeSwitcher = (bool: boolean, key: keyof typeof settingState) => {
;(settingState[key] as unknown) = bool
}
return {
...toRefs(settingState),
updateLocale,
changeTheme,
changePrimaryColor,
changeReloadLog,
changeMenuTagLog,
changeSwitcher,
}
},
{

8
src/utils/element.ts
View File

@ -1,4 +1,4 @@
import { useValidteValueType } from '@use-utils/hook'
import { validteValueType } from '@use-utils/hook'
/**
*
@ -7,7 +7,7 @@ import { useValidteValueType } from '@use-utils/hook'
*
* @returns 目标节点下所有子节点
*/
export const useElementChildNodes = (
export const getElementChildNodes = (
el: HTMLElement,
target?: string[] | string,
) => {
@ -130,11 +130,11 @@ export const addStyle = (
styles: string | Partial<CSSStyleDeclaration>,
) => {
if (el) {
if (useValidteValueType(styles, 'Object')) {
if (validteValueType(styles, 'Object')) {
Object.keys(styles).forEach((item) => {
el.style[item] = styles[item]
})
} else if (useValidteValueType(styles, 'String')) {
} else if (validteValueType(styles, 'String')) {
const _styles = styles as string
_styles.split(';').forEach((item) => {

2
src/utils/hook.ts
View File

@ -34,7 +34,7 @@ export const useImagebufferToBase64 = (
* @param value 目标值
* @param type 类型
*/
export const useValidteValueType = <T>(value: T, type: ValidteValueType) => {
export const validteValueType = <T>(value: T, type: ValidteValueType) => {
const _v = Object.prototype.toString.call(value)
return _v.includes(type)

5
yarn.lock
View File

@ -3810,6 +3810,11 @@ sass@^1.54.3:
immutable "^4.0.0"
source-map-js ">=0.6.2 <2.0.0"
screenfull@^6.0.2:
version "6.0.2"
resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-6.0.2.tgz#3dbe4b8c4f8f49fb8e33caa8f69d0bca730ab238"
integrity sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw==
scrollreveal@^4.0.9:
version "4.0.9"
resolved "https://registry.yarnpkg.com/scrollreveal/-/scrollreveal-4.0.9.tgz#47866e1967ff604e64bac28818fe0dcea44f2c8b"