blackteay/ray-template
1
0
Fork 0
mirror of https://github.com/XiaoDaiGua-Ray/ray-template.git synced 2025-04-06 03:57:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

新增加载动画

Browse Source
This commit is contained in:
ray_wuhao 2023-04-04 15:09:53 +08:00
parent ff91d9f1cc
commit 340c41a016
21 changed files with 744 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@ -1,7 +1,7 @@
#开发环境 #开发环境
NODE_ENV = 'development' NODE_ENV = 'development'
VITE_APP_URL = 'api/' VITE_APP_URL = '/api'
# office 服务代理地址 # office 服务代理地址
VITE_APP_OFFICE_PROXY_URL = '/office/' VITE_APP_OFFICE_PROXY_URL = '/office/'

2
.env.production
View File

@ -1,7 +1,7 @@
#生产环境 #生产环境
NODE_ENV = 'production' NODE_ENV = 'production'
VITE_APP_URL = 'api/' VITE_APP_URL = '/'
# office 服务代理地址 # office 服务代理地址
VITE_APP_OFFICE_PROXY_URL = 'https://office.yka.one/' VITE_APP_OFFICE_PROXY_URL = 'https://office.yka.one/'

2
.env.test
View File

@ -1,7 +1,7 @@
#测试环境 #测试环境
NODE_ENV = 'test' NODE_ENV = 'test'
VITE_APP_URL = 'api/' VITE_APP_URL = 'https://testray.yka.moe/doc-json/'
# office 服务代理地址 # office 服务代理地址
VITE_APP_OFFICE_PROXY_URL = 'https://office.yka.one/' VITE_APP_OFFICE_PROXY_URL = 'https://office.yka.one/'

6
CHANGELOG.md
View File

@ -5,6 +5,12 @@
### Fixes ### Fixes
- 修复移动端登陆页显示问题 - 修复移动端登陆页显示问题
- 改进了一些方法逻辑的问题
- 新增加载动画
### Feats
- 修改移动端自适应配置方案(现在使用 postcss-px-to-viewport)，默认不启用
## 3.1.5 ## 3.1.5

119
index.html
View File

@ -6,8 +6,127 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title> <title>Vite + Vue + TS</title>
</head> </head>
<style>
#pre-loading-animation {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #ffffff;
color: #2d8cf0;
text-align: center;
}
.ray-template--dark #pre-loading-animation {
background-color: #2a3146;
}
#pre-loading-animation .pre-loading-animation__wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#pre-loading-animation
.pre-loading-animation__wrapper
.pre-loading-animation__wrapper-title {
font-size: 30px;
padding-bottom: 48px;
}
#pre-loading-animation
.pre-loading-animation__wrapper
.pre-loading-animation__wrapper-loader {
margin: 0 0 2em;
height: 100px;
width: 20%;
text-align: center;
padding: 1em;
margin: 0 auto 1em;
display: inline-block;
vertical-align: top;
}
#pre-loading-animation
.pre-loading-animation__wrapper
.pre-loading-animation__wrapper-loader
svg
path,
#pre-loading-animation
.pre-loading-animation__wrapper
.pre-loading-animation__wrapper-loader
svg
rect {
fill: #ff6700;
}
#pre-loading-animation
.pre-loading-animation__wrapper
.pre-loading-animation__wrapper-loader
svg {
transform: scale(2);
}
</style>
<body> <body>
<div id="app"></div> <div id="app"></div>
<div id="pre-loading-animation">
<div class="pre-loading-animation__wrapper">
<div class="pre-loading-animation__wrapper-title">Ray Template</div>
<div class="pre-loading-animation__wrapper-loader">
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="24px"
height="30px"
viewBox="0 0 24 30"
style="enable-background: new 0 0 50 50"
xml:space="preserve"
>
<rect x="0" y="0" width="4" height="10" fill="#333">
<animateTransform
attributeType="xml"
attributeName="transform"
type="translate"
values="0 0; 0 20; 0 0"
begin="0"
dur="0.6s"
repeatCount="indefinite"
/>
</rect>
<rect x="10" y="0" width="4" height="10" fill="#333">
<animateTransform
attributeType="xml"
attributeName="transform"
type="translate"
values="0 0; 0 20; 0 0"
begin="0.2s"
dur="0.6s"
repeatCount="indefinite"
/>
</rect>
<rect x="20" y="0" width="4" height="10" fill="#333">
<animateTransform
attributeType="xml"
attributeName="transform"
type="translate"
values="0 0; 0 20; 0 0"
begin="0.4s"
dur="0.6s"
repeatCount="indefinite"
/>
</rect>
</svg>
</div>
</div>
</div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

2
package.json
View File

@ -66,7 +66,7 @@
"husky": "^8.0.3", "husky": "^8.0.3",
"lint-staged": "^13.1.0", "lint-staged": "^13.1.0",
"postcss": "^8.1.0", "postcss": "^8.1.0",
"postcss-pxtorem": "^6.0.0", "postcss-px-to-viewport": "^1.1.1",
"prettier": "^2.7.1", "prettier": "^2.7.1",
"rollup-plugin-visualizer": "^5.8.3", "rollup-plugin-visualizer": "^5.8.3",
"svg-sprite-loader": "^6.0.11", "svg-sprite-loader": "^6.0.11",

22
postcss.config.cjs
View File

@ -11,11 +11,21 @@ module.exports = {
], ],
grid: true, grid: true,
}, },
'postcss-pxtorem': { // 'postcss-px-to-viewport': {
rootValue: 16, // 根元素字体大小或根据 `input` 参数返回根元素字体大小 // /** 视窗的宽度(设计稿的宽度) */
unitPrecision: 5, // viewportWidth: 1920,
propList: ['font', 'font-size', 'line-height', 'letter-spacing'], // 可以从 `px` 更改为 `rem` 的属性 // /** 视窗的高度(设计稿高度, 一般无需指定) */
selectorBlackList: [], // 要忽略并保留为 `px` 的选择器 // viewportHeight: 1080,
}, // /** 指定 px 转换为视窗单位值的小数位数 */
// unitPrecision: 3,
// /** 指定需要转换成的视窗单位 */
// viewportUnit: 'vw',
// /** 指定不转换为视窗单位的类 */
// selectorBlackList: ['.ignore'],
// /** 小于或等于 1px 不转换为视窗单位 */
// minPixelValue: 1,
// /** 允许在媒体查询中转换 px */
// mediaQuery: false,
// },
}, },
} }

14
src/App.tsx
View File

@ -5,7 +5,7 @@ import GlobalSpin from '@/spin/index'
import { getCache } from '@/utils/cache' import { getCache } from '@/utils/cache'
import { get } from 'lodash-es' import { get } from 'lodash-es'
import { useSetting } from '@/store' import { useSetting } from '@/store'
import { addClass, removeClass } from '@/utils/element' import { addClass, removeClass, addStyle } from '@/utils/element'
const App = defineComponent({ const App = defineComponent({
name: 'App', name: 'App',
@ -29,7 +29,19 @@ const App = defineComponent({
body.style.setProperty('--ray-theme-primary-color', _p || primaryColor) body.style.setProperty('--ray-theme-primary-color', _p || primaryColor)
} }
/** 隐藏加载动画 */
const hiddenLoadingAnimation = () => {
const el = document.getElementById('pre-loading-animation')
if (el) {
addStyle(el, {
display: 'none',
})
}
}
syncPrimaryColorToBody() syncPrimaryColorToBody()
hiddenLoadingAnimation()
watch( watch(
() => themeValue.value, () => themeValue.value,

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

@ -18,11 +18,11 @@ import SettingDrawer from './components/SettingDrawer/index'
import Breadcrumb from './components/Breadcrumb/index' import Breadcrumb from './components/Breadcrumb/index'
import { useSetting } from '@/store' import { useSetting } from '@/store'
import { useSignin } from '@/store'
import { localOptions } from '@/language/index' import { localOptions } from '@/language/index'
import { useAvatarOptions } from './hook' import { useAvatarOptions } from './hook'
import { getCache } from '@/utils/cache' import { getCache } from '@/utils/cache'
import screenfull from 'screenfull' import screenfull from 'screenfull'
import { logout } from '@/utils/user'
import type { IconEventMapOptions, IconEventMap } from './type' import type { IconEventMapOptions, IconEventMap } from './type'
@ -37,9 +37,11 @@ const SiderBar = defineComponent({
name: 'SiderBar', name: 'SiderBar',
setup() { setup() {
const settingStore = useSetting() const settingStore = useSetting()
const signinStore = useSignin()
const { t } = useI18n() const { t } = useI18n()
const { updateLocale, changeSwitcher } = settingStore const { updateLocale, changeSwitcher } = settingStore
const { logout } = signinStore
const { drawerPlacement, breadcrumbSwitch } = storeToRefs(settingStore) const { drawerPlacement, breadcrumbSwitch } = storeToRefs(settingStore)
const showSettings = ref(false) const showSettings = ref(false)
const person = getCache('person') const person = getCache('person')
@ -145,7 +147,11 @@ const SiderBar = defineComponent({
align="center" align="center"
justify="space-between" justify="space-between"
> >
<NSpace align="center" itemStyle={this.spaceItemStyle}> <NSpace
align="center"
wrapItem={false}
itemStyle={this.spaceItemStyle}
>
{this.leftIconOptions.map((curr) => ( {this.leftIconOptions.map((curr) => (
<NTooltip> <NTooltip>
{{ {{
@ -163,7 +169,11 @@ const SiderBar = defineComponent({
))} ))}
{this.breadcrumbSwitch ? <Breadcrumb /> : ''} {this.breadcrumbSwitch ? <Breadcrumb /> : ''}
</NSpace> </NSpace>
<NSpace align="center" itemStyle={this.spaceItemStyle}> <NSpace
align="center"
wrapItem={false}
itemStyle={this.spaceItemStyle}
>
{this.rightTooltipIconOptions.map((curr) => ( {this.rightTooltipIconOptions.map((curr) => (
<RayTooltipIcon <RayTooltipIcon
iconName={curr.name} iconName={curr.name}

3
src/layout/index.tsx
View File

@ -1,6 +1,6 @@
import './index.scss' import './index.scss'
import { NLayout, NLayoutContent, NSpin } from 'naive-ui' import { NLayout, NLayoutContent } from 'naive-ui'
import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue' import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue'
import LayoutMenu from './components/Menu/index' import LayoutMenu from './components/Menu/index'
import SiderBar from './components/SiderBar/index' import SiderBar from './components/SiderBar/index'
@ -15,7 +15,6 @@ const Layout = defineComponent({
const { height: windowHeight } = useWindowSize() const { height: windowHeight } = useWindowSize()
const { const {
themeValue,
reloadRouteSwitch: modelReloadRoute, reloadRouteSwitch: modelReloadRoute,
menuTagSwitch: modelMenuTagSwitch, menuTagSwitch: modelMenuTagSwitch,
} = storeToRefs(settingStore) } = storeToRefs(settingStore)

3
src/router/basic.ts
View File

@ -26,7 +26,8 @@ import { useSignin } from '@/store'
import { whiteRoutes, superAdmin } from './configuration' import { whiteRoutes, superAdmin } from './configuration'
export const validRole = (options: IMenuOptions) => { export const validRole = (options: IMenuOptions) => {
const { role } = storeToRefs(useSignin()) const { signinCallback } = storeToRefs(useSignin())
const role = computed(() => signinCallback.value.role)
const { meta, name } = options const { meta, name } = options
const hidden = const hidden =

4
src/router/permission.ts
View File

@ -34,6 +34,7 @@ export const permissionRouter = (router: Router) => {
rootRoute: { path }, rootRoute: { path },
} = __APP_CFG__ } = __APP_CFG__
/** 如果没有权限, 则重定向至首页 */
const redirectToDashboard = (next: NavigationGuardNext) => { const redirectToDashboard = (next: NavigationGuardNext) => {
next(path) next(path)
@ -43,7 +44,8 @@ export const permissionRouter = (router: Router) => {
beforeEach((to, from, next) => { beforeEach((to, from, next) => {
const token = getCache('token') const token = getCache('token')
const route = getCache('menuKey') const route = getCache('menuKey')
const { role } = storeToRefs(useSignin()) const { signinCallback } = storeToRefs(useSignin())
const role = computed(() => signinCallback.value.role)
const { meta } = to const { meta } = to
const hasRole = () => { const hasRole = () => {

25
src/store/index.ts
View File

@ -1,14 +1,33 @@
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' /**
*
* @author Ray <https://github.com/XiaoDaiGua-Ray>
*
* @date 2023-01-03
*
* @workspace ray-template
*
* @remark 今天也是元气满满撸代码的一天
*/
import type { App } from 'vue' /**
*
* 持久化存储 pinia 数据
* 但是不能正常持久化 function 属性
*
* 官网地址: https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/
*/
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
export { useSetting } from './modules/setting' // import { useSetting } from '@/store' 即可使用 export { useSetting } from './modules/setting' // import { useSetting } from '@/store' 即可使用
export { useMenu } from './modules/menu/index' export { useMenu } from './modules/menu/index'
export { useSignin } from './modules/signin' export { useSignin } from './modules/signin'
const store = createPinia() import type { App } from 'vue'
/** 设置并且注册 pinia */
export const setupStore = (app: App<Element>) => { export const setupStore = (app: App<Element>) => {
const store = createPinia()
app.use(store) app.use(store)
store.use(piniaPluginPersistedstate) store.use(piniaPluginPersistedstate)

37
src/store/modules/signin.ts
View File

@ -12,25 +12,34 @@
/** /**
* *
* 出于便捷性考虑, 将用户部分信息存于 pinia 仓库 * 出于便捷性考虑, 将用户部分信息存于 pinia 仓库
*
* 可以存储: 头像, 权限, 以及基于你项目实际情况的一些附带信息 * 可以存储: 头像, 权限, 以及基于你项目实际情况的一些附带信息
* *
* 如果检测权限发生变动, 则会强制重新登陆 * 使用 sessionStorage 缓存部分用户信息
*/ */
import { isEmpty } from 'lodash-es' import { isEmpty } from 'lodash-es'
import { logout } from '@/utils/user' import { removeCache } from '@/utils/cache'
export interface SigninForm extends IUnknownObjectKey { export interface SigninForm extends IUnknownObjectKey {
name: string name: string
pwd: string pwd: string
} }
export interface SigninCallback extends IUnknownObjectKey {
role: string
name: string
}
export const useSignin = defineStore( export const useSignin = defineStore(
'signin', 'signin',
() => { () => {
const state = reactive({ const state = reactive({
role: '', /**
*
* 登陆返回信息(可以存放用户名、权限、头像等一些信息)
* 路由鉴权依赖该属性中的 role 属性, 如果需要更改请同步更改: router/basic.ts、router/permission.ts
*/
signinCallback: {} as SigninCallback,
}) })
/** /**
@ -42,7 +51,10 @@ export const useSignin = defineStore(
*/ */
const signin = (signinForm: SigninForm) => { const signin = (signinForm: SigninForm) => {
if (!isEmpty(signinForm)) { if (!isEmpty(signinForm)) {
state.role = 'admin' state.signinCallback = {
role: 'admin',
name: signinForm.name,
}
return 0 return 0
} else { } else {
@ -50,14 +62,29 @@ export const useSignin = defineStore(
} }
} }
/**
*
* 退出登陆并且清空缓存数据
* 延迟 300ms 后强制刷新当前系统
*/
const logout = () => {
window.$message.info('账号退出中...')
removeCache('all-sessionStorage')
setTimeout(() => window.location.reload(), 300)
}
return { return {
...toRefs(state), ...toRefs(state),
signin, signin,
logout,
} }
}, },
{ {
persist: { persist: {
key: 'piniaSigninStore', key: 'piniaSigninStore',
paths: ['signinCallback'],
storage: sessionStorage,
}, },
}, },
) )

8
src/utils/cache.ts
View File

@ -18,8 +18,9 @@ export const setCache = <T = unknown>(
/** /**
* *
* @param key 需要获取目标缓存的key * @param key 需要获取目标缓存的key
*
* @returns 获取缓存值 * @returns 获取缓存值
*
* @remark 如果未匹配到目标值则返回字符串 'no'
*/ */
export const getCache = (key: string, type: CacheType = 'sessionStorage') => { export const getCache = (key: string, type: CacheType = 'sessionStorage') => {
const data = const data =
@ -33,6 +34,11 @@ export const getCache = (key: string, type: CacheType = 'sessionStorage') => {
/** /**
* *
* @param key 需要删除的缓存值key * @param key 需要删除的缓存值key
*
* key:
* - all: 删除所有缓存值
* - all-sessionStorage: 删除所有 sessionStorage 缓存值
* - all-localStorage: 删除所有 localStorage 缓存值
*/ */
export const removeCache = ( export const removeCache = (
key: string | 'all' | 'all-sessionStorage' | 'all-localStorage', key: string | 'all' | 'all-sessionStorage' | 'all-localStorage',

8
src/utils/crypto.ts
View File

@ -4,6 +4,14 @@ import AES from 'crypto-js/aes'
import MD5 from 'crypto-js/md5' import MD5 from 'crypto-js/md5'
import BASE64 from 'crypto-js/enc-base64' import BASE64 from 'crypto-js/enc-base64'
/**
*
* 这个玩意儿实际使用意义不大, 建议自己参考官网 demo 使用
* 我又不想删除, 所以留在这儿了
*
* 手动补上官网地址: http://github.com/brix/crypto-js
*/
/** /**
* *
* @param message 待加密信息 * @param message 待加密信息

12
src/utils/element.ts
View File

@ -11,6 +11,7 @@ export const getElementChildNodes = (
el: HTMLElement, el: HTMLElement,
target?: string[] | string, target?: string[] | string,
) => { ) => {
if (el) {
let nodes = Array.from(el.childNodes) let nodes = Array.from(el.childNodes)
if (Array.isArray(target)) { if (Array.isArray(target)) {
@ -22,6 +23,9 @@ export const getElementChildNodes = (
} }
return nodes return nodes
} else {
return []
}
} }
/** /**
@ -65,7 +69,7 @@ export const off = (
/** /**
* *
* @param element Target element dom * @param element Target element dom
* @param className 所需添加className，可: 'xxx xxx' | 'xxx'格式添加 * @param className 所需添加className，可: 'xxx xxx' | 'xxx' 格式添加(参考向元素绑定 css 语法)
* *
* @remark 添加元素className(可: 'xxx xxx' | 'xxx'格式添加) * @remark 添加元素className(可: 'xxx xxx' | 'xxx'格式添加)
*/ */
@ -84,7 +88,7 @@ export const addClass = (element: HTMLElement, className: string) => {
/** /**
* *
* @param element Target element dom * @param element Target element dom
* @param className 所需删除className，可: 'xxx xxx' | 'xxx'格式删除 * @param className 所需删除className，可: 'xxx xxx' | 'xxx' 格式删除(参考向元素绑定 css 语法)
* *
* @remark 删除元素className(可: 'xxx xxx' | 'xxx'格式删除) * @remark 删除元素className(可: 'xxx xxx' | 'xxx'格式删除)
* @remark 如果输入值为 removeAllClass 则会删除该元素所有 class name * @remark 如果输入值为 removeAllClass 则会删除该元素所有 class name
@ -113,11 +117,11 @@ export const removeClass = (
/** /**
* *
* @param element Target element dom * @param element Target element dom
* @param className 查询元素是否含有此className，可: 'xxx xxx' | 'xxx'格式查询 * @param className 查询元素是否含有此className，可: 'xxx xxx' | 'xxx' 格式查询(参考向元素绑定 css 语法)
* *
* @returns 返回boolean * @returns 返回boolean
* *
* @remark 元素是否含有某个className(可: 'xxx xxx' | 'xxx'格式查询) * @remark 元素是否含有某个className(可: 'xxx xxx' | 'xxx' 格式查询)
*/ */
export const hasClass = (element: HTMLElement, className: string) => { export const hasClass = (element: HTMLElement, className: string) => {
const elementClassName = element.className const elementClassName = element.className

2
src/utils/hook.ts
View File

@ -72,7 +72,7 @@ export const uuid = (length = 16, radix?: number) => {
for (i = 0; i < 36; i++) { for (i = 0; i < 36; i++) {
if (!arr[i]) { if (!arr[i]) {
r = 0 | (Math.random() * 16) r = 0 | (Math.random() * radix)
arr[i] = sad[i === 19 ? (r & 0x3) | 0x8 : r] arr[i] = sad[i === 19 ? (r & 0x3) | 0x8 : r]
} }

13
src/utils/user.ts
View File

@ -1,13 +0,0 @@
import { removeCache } from '@/utils/cache'
/**
*
* @remark 退出登陆并且清除所有非 localStorage 里所有缓存数据
*/
export const logout = () => {
window.$message.info('账号退出中...')
removeCache('all-sessionStorage')
setTimeout(() => window.location.reload(), 300)
}

6
src/utils/xlsx.ts
View File

@ -74,7 +74,8 @@ export const exportFileToXLSX = async (
config: ExportXLSXConfig = {}, config: ExportXLSXConfig = {},
) => { ) => {
await new Promise<void>((resolve, reject) => { await new Promise<void>((resolve, reject) => {
if (dataSource?.length) { if (Array.isArray(dataSource)) {
if (dataSource.length) {
const sheetHeader = setupSheetHeader(columns ?? []) // 获取所有列(设置为 `excel` 表头) const sheetHeader = setupSheetHeader(columns ?? []) // 获取所有列(设置为 `excel` 表头)
const sheetData = utils.json_to_sheet(dataSource) // 将所有数据转换为表格数据类型 const sheetData = utils.json_to_sheet(dataSource) // 将所有数据转换为表格数据类型
const workBook = utils.book_new() const workBook = utils.book_new()
@ -93,6 +94,9 @@ export const exportFileToXLSX = async (
writeFileXLSX(workBook, filename) // 输出表格 writeFileXLSX(workBook, filename) // 输出表格
resolve() resolve()
} else {
resolve()
}
} else { } else {
reject() reject()
} }

462
vite.config.ts.timestamp-1680592192926.mjs Normal file
View File

File diff suppressed because one or more lines are too long