diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 1e3738eb..eb4fc9e6 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -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, // 禁止隐式转换
diff --git a/components.d.ts b/components.d.ts
index 6bba88cd..3e725e7c 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -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']
diff --git a/dist/production-dist/index.html b/dist/production-dist/index.html
index ebf26c1f..df446961 100644
--- a/dist/production-dist/index.html
+++ b/dist/production-dist/index.html
@@ -5,7 +5,7 @@
ray template
-
+
diff --git a/locales/en-US.json b/locales/en-US.json
index 119f8788..009fcc50 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -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",
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
index df32458c..958f06d2 100644
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -9,7 +9,9 @@
"Reload": "刷新当前页面",
"Lock": "锁屏",
"Setting": "设置",
- "Github": "Github"
+ "Github": "Github",
+ "FullScreen": "全屏",
+ "CancelFullScreen": "退出全屏"
},
"LayoutHeaderSettingOptions": {
"Title": "项目配置",
diff --git a/package.json b/package.json
index 97421ecc..567d7b09 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/components/DraggableComponent/index.vue b/src/components/DraggableComponent/index.vue
deleted file mode 100644
index 8b1d7bbd..00000000
--- a/src/components/DraggableComponent/index.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-
- Drag me! I am at {{ x }}, {{ y }}
-
-
-
-
diff --git a/src/icons/cancel_fullscreen.svg b/src/icons/cancel_fullscreen.svg
new file mode 100644
index 00000000..9fe921ec
--- /dev/null
+++ b/src/icons/cancel_fullscreen.svg
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/src/icons/fullscreen.svg b/src/icons/fullscreen.svg
new file mode 100644
index 00000000..92f163c3
--- /dev/null
+++ b/src/icons/fullscreen.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/layout/components/SiderBar/Components/SettingDrawer/index.tsx b/src/layout/components/SiderBar/Components/SettingDrawer/index.tsx
index 6ef7e098..7334951c 100644
--- a/src/layout/components/SiderBar/Components/SettingDrawer/index.tsx
+++ b/src/layout/components/SiderBar/Components/SettingDrawer/index.tsx
@@ -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({
+ this.changeSwitcher(bool, 'themeValue')
+ }
>
{{
'checked-icon': () =>
@@ -129,7 +130,9 @@ const SettingDrawer = defineComponent({
+ this.changeSwitcher(bool, 'menuTagLog')
+ }
/>
diff --git a/src/layout/components/SiderBar/index.tsx b/src/layout/components/SiderBar/index.tsx
index 93e0a016..efed78be 100644
--- a/src/layout/components/SiderBar/index.tsx
+++ b/src/layout/components/SiderBar/index.tsx
@@ -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) => (
+
+ )
+
+ const TooltipIcon = (curr: IconOptions) =>
+ curr.tooltip ? (
+
+ {{
+ trigger: () => Icon(curr),
+ default: () => t(curr.tooltip ?? ''),
+ }}
+
+ ) : (
+ 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({
-
+ {this.Icon(curr)}
) : (
-
- {{
- trigger: () => (
-
- ),
- default: () => this.t(curr.tooltip),
- }}
-
+ this.TooltipIcon(curr)
),
)}
diff --git a/src/layout/components/SiderBar/type.ts b/src/layout/components/SiderBar/type.ts
index daf5ba5b..c0921423 100644
--- a/src/layout/components/SiderBar/type.ts
+++ b/src/layout/components/SiderBar/type.ts
@@ -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
+}
diff --git a/src/router/modules/index.ts b/src/router/modules/index.ts
index 389eb8a9..642161d3 100644
--- a/src/router/modules/index.ts
+++ b/src/router/modules/index.ts
@@ -9,5 +9,8 @@ export default routes
/**
*
* 弃用自动导入路由模块方式
+ *
* 采用手动引入子路由模块方式
+ *
+ * 因为自动导入路由方式在实际体验后还是有一些小问题, 综合考虑后, 还是自己手动挡吧
*/
diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts
index 1e9baac7..c15b3ed9 100644
--- a/src/store/modules/setting.ts
+++ b/src/store/modules/setting.ts
@@ -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,
}
},
{
diff --git a/src/utils/element.ts b/src/utils/element.ts
index 0c7deb57..1753678a 100644
--- a/src/utils/element.ts
+++ b/src/utils/element.ts
@@ -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,
) => {
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) => {
diff --git a/src/utils/hook.ts b/src/utils/hook.ts
index b44d74e2..54a5d1d6 100644
--- a/src/utils/hook.ts
+++ b/src/utils/hook.ts
@@ -34,7 +34,7 @@ export const useImagebufferToBase64 = (
* @param value 目标值
* @param type 类型
*/
-export const useValidteValueType = (value: T, type: ValidteValueType) => {
+export const validteValueType = (value: T, type: ValidteValueType) => {
const _v = Object.prototype.toString.call(value)
return _v.includes(type)
diff --git a/yarn.lock b/yarn.lock
index 60ea79df..3bb2c083 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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"