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

Fix the problem of hot update error report caused by transition components

Browse Source
This commit is contained in:
chuan_wuhao 2022-08-29 11:54:29 +08:00
commit 2e63c1df5e
17 changed files with 95 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -55,7 +55,9 @@
- utils: 工具包 - utils: 工具包
- cache: 缓存方法 - cache: 缓存方法
- crypto: 常用的加密方法
- element: dom 相关操作方法 - element: dom 相关操作方法
- hook: 常用 hook 方法
- vite-plugin: 插件注册 - vite-plugin: 插件注册
``` ```

29
dist/assets/index.e8c4dc19.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
dist/assets/index.e8c4dc19.js.gz vendored Normal file
View File

Binary file not shown.

1
dist/assets/index.f748041f.css vendored Normal file
View File

@ -0,0 +1 @@
.fade-enter-active,.fade-leave-active{transition:opacity .28s var(--r-bezier)}.fade-enter-from,.fade-leave-active{opacity:0;transition:all .5s var(--r-bezier)}.fade-transform-leave-active,.fade-transform-enter-active{transition:all .5s var(--r-bezier)}.fade-transform-enter-from{opacity:0;transform:translate(-30px)}.fade-transform-leave-to{opacity:0;transform:translate(30px)}body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}ul,ol,li{list-style:none}fieldset,img{border:0;vertical-align:middle}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

15
dist/index.html vendored Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<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.e8c4dc19.js"></script>
<link rel="stylesheet" href="/assets/index.f748041f.css">
</head>
<body>
<div id="app"></div>
</body>
</html>

14
dist/ray.svg vendored Normal file
View File

@ -0,0 +1,14 @@
<svg t="1659811416176" class="icon" viewBox="0 0 1147 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10290" width="64" height="64">
<path d="M472.342857 968.685714c-73.828571 0-130.171429-12-172.114286-36.571428-38.742857-22.742857-84.914286-68.685714-84.914285-158.057143-2.971429-141.942857 109.714286-259.542857 251.657143-262.514286 141.942857-2.971429 259.542857 109.714286 262.514285 251.657143 0.114286 3.657143 0.114286 7.2 0 10.857143 0 89.371429-46.171429 135.2-84.914285 158.057143-41.942857 24.685714-98.285714 36.571429-172.228572 36.571428z" fill="#25467A" p-id="10291"></path>
<path d="M766.742857 968.685714c-73.942857 0-130.171429-12-172.228571-36.571428-38.742857-22.742857-84.914286-68.685714-84.914286-158.057143 2.857143-141.942857 120.228571-254.742857 262.285714-252 137.942857 2.742857 249.142857 113.942857 252 252 0 89.371429-46.171429 135.2-84.914285 158.057143-42.057143 24.685714-98.4 36.571429-172.228572 36.571428z" fill="#25467A" p-id="10292"></path>
<path d="M512 940.571429c-153.257143 0-268.457143-24-352.457143-73.257143-50.971429-29.942857-90.514286-69.714286-117.142857-118.057143C14.285714 698.285714 0 637.028571 0 567.085714c0.114286-282.857143 229.6-512 512.457143-511.885714 205.6 0.114286 391.2 123.2 471.314286 312.571429 26.742857 63.085714 40.342857 130.857143 40.228571 199.314285 0 69.828571-14.285714 131.2-42.4 182.171429-26.742857 48.342857-66.171429 88.114286-117.142857 118.057143C780.571429 916.685714 665.257143 940.571429 512 940.571429z" fill="#25467A" p-id="10293"></path>
<path d="M48 567.085714c0-256.228571 207.771429-464 464-464s464 207.771429 464 464S768.228571 892.571429 512 892.571429 48 823.314286 48 567.085714z" fill="#FFF3E0" p-id="10294"></path>
<path d="M472.342857 943.542857c-69.257143 0-121.371429-10.857143-159.428571-33.142857-48.114286-28.228571-72.457143-74.171429-72.457143-136.342857 0-127.885714 104-232 232-232s232 104 232 232c0 62.171429-24.342857 108.114286-72.571429 136.342857-38.057143 22.4-90.171429 33.142857-159.542857 33.142857z" fill="#25467A" p-id="10295"></path>
<path d="M263.314286 774.057143c0-115.428571 93.485714-209.142857 209.028571-209.142857 115.428571 0 209.142857 93.485714 209.142857 209.028571v0.114286c0 115.428571-93.6 146.628571-209.142857 146.628571s-209.028571-31.085714-209.028571-146.628571z" fill="#FFF3E0" p-id="10296"></path>
<path d="M472.342857 652.8c-73.371429 0-132.8 51.771429-132.8 115.657143 0 18.514286 5.028571 33.142857 13.942857 44.571428-1.714286 10.971429-2.628571 22.057143-2.742857 33.142858 0 32.8 9.942857 38.971429 22.285714 38.971428s22.285714-6.285714 22.285715-38.971428c0-2.057143 0-4.228571-0.114286-6.285715 21.714286 7.085714 48.457143 9.714286 77.142857 9.714286 73.371429 0 132.8-17.257143 132.8-81.142857s-59.428571-115.657143-132.8-115.657143z" fill="#388E3C" p-id="10297"></path>
<path d="M766.742857 943.542857c-69.257143 0-121.371429-10.857143-159.428571-33.142857-48.114286-28.228571-72.571429-74.171429-72.571429-136.342857 0-127.885714 104.114286-232 232-232s232 104 232 232c0 62.171429-24.342857 108.114286-72.571428 136.342857-38.057143 22.4-90.171429 33.142857-159.428572 33.142857z" fill="#25467A" p-id="10298"></path>
<path d="M557.6 774.057143c0-115.428571 93.6-209.142857 209.142857-209.142857s209.142857 93.6 209.142857 209.142857c0 115.428571-93.6 146.628571-209.142857 146.628571s-209.142857-31.085714-209.142857-146.628571z" fill="#FFF3E0" p-id="10299"></path>
<path d="M766.742857 652.8c-73.371429 0-132.8 51.771429-132.8 115.657143 0 18.514286 5.028571 33.142857 13.942857 44.571428-1.714286 10.971429-2.628571 22.057143-2.742857 33.142858 0 32.8 9.942857 38.971429 22.285714 38.971428s22.285714-6.285714 22.285715-38.971428c0-2.057143 0-4.228571-0.114286-6.285715 21.714286 7.085714 48.342857 9.714286 77.142857 9.714286 73.371429 0 132.8-17.257143 132.8-81.142857S840 652.8 766.742857 652.8z" fill="#FBC02D" p-id="10300"></path>
<path d="M401.6 486.857143c-38.171429 0-69.142857-30.971429-69.142857-69.257143 0-7.657143 6.171429-13.828571 13.828571-13.828571 7.314286 0 13.485714 5.714286 13.828572 13.028571v0.8c-0.342857 22.971429 17.942857 41.828571 40.8 42.171429s41.828571-17.942857 42.171428-40.8v-1.371429c-0.228571-7.657143 5.828571-14.057143 13.371429-14.285714s14.057143 5.828571 14.285714 13.371428v0.8c0.114286 38.4-30.857143 69.371429-69.142857 69.371429zM221.714286 306.971429c-0.342857 22.971429 17.942857 41.828571 40.8 42.171428s41.828571-17.942857 42.171428-40.8v-1.371428c0.342857-22.971429-17.942857-41.828571-40.8-42.171429-22.971429-0.342857-41.828571 17.942857-42.171428 40.8v1.371429zM498.514286 306.971429c-0.342857 22.971429 17.828571 41.828571 40.8 42.285714 22.971429 0.342857 41.828571-17.828571 42.285714-40.8v-1.485714c0.342857-22.971429-17.942857-41.828571-40.8-42.171429-22.971429-0.342857-41.828571 17.942857-42.171429 40.8-0.114286 0.457143-0.114286 0.914286-0.114285 1.371429z" fill="#25467A" p-id="10301"></path>
<path d="M207.885714 376.228571h-55.314285c-15.314286-0.342857-27.885714 11.771429-28.228572 27.085715-0.342857 15.314286 11.771429 27.885714 27.085714 28.228571H208c15.314286 0.342857 27.885714-11.771429 28.228571-27.085714 0.342857-15.314286-11.771429-27.885714-27.085714-28.228572h-1.257143z m442.857143 0H595.428571c-15.314286 0-27.657143 12.342857-27.657142 27.657143s12.342857 27.657143 27.657142 27.657143h55.314286c15.314286 0.342857 27.885714-11.771429 28.228572-27.085714 0.342857-15.314286-11.771429-27.885714-27.085715-28.228572h-1.142857z" fill="#F8BBD0" p-id="10302"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

4
postcss.config.cjs
View File

@ -12,9 +12,11 @@ module.exports = {
grid: true, grid: true,
}, },
'postcss-pxtorem': { 'postcss-pxtorem': {
rootValue: 37.5, rootValue: 16, // 根元素字体大小或根据 `input` 参数返回根元素字体大小
propList: ['*'], propList: ['*'],
unitPrecision: 5, unitPrecision: 5,
propList: ['font', 'font-size', 'line-height', 'letter-spacing'], // 可以从 `px` 更改为 `rem` 的属性
selectorBlackList: [], // 要忽略并保留为 `px` 的选择器
}, },
}, },
} }

10
src/App.tsx
View File

@ -2,7 +2,6 @@ import { defineComponent } from 'vue'
import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue' // 以封装动画路由组件 import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue' // 以封装动画路由组件
import DraggableComponent from '@/components/DraggableComponent/index.vue' import DraggableComponent from '@/components/DraggableComponent/index.vue'
import RayScrollReveal from '@/components/RayScrollReveal/index' import RayScrollReveal from '@/components/RayScrollReveal/index'
import { useAxiosTest } from '@use-api/test'
import R from '@/icons/ray.svg' // 使用 vite-svg-loader 作为 svg 使用插件, 故而不需要使用 RayIcon 作为组件引入 import R from '@/icons/ray.svg' // 使用 vite-svg-loader 作为 svg 使用插件, 故而不需要使用 RayIcon 作为组件引入
const App = defineComponent({ const App = defineComponent({
@ -11,21 +10,12 @@ const App = defineComponent({
const { x, y } = useMouse() const { x, y } = useMouse()
const { height: windowHeight } = useWindowSize() const { height: windowHeight } = useWindowSize()
const { t } = useI18n() const { t } = useI18n()
const inputRef = ref<HTMLInputElement>()
const handleFileChange = () => {
const file = (inputRef.value as HTMLInputElement).files?.[0]
useAxiosTest(file as File)
}
return { return {
x, x,
y, y,
windowHeight, windowHeight,
ray: t, ray: t,
handleFileChange,
inputRef,
} }
}, },
render() { render() {

9
src/axios/api/test.ts
View File

@ -1,12 +1,9 @@
import request from '../request' import request from '../request'
export const useAxiosTest = (file: File) => { export const useAxiosTest = () => {
const formData = new FormData()
formData.append('file', file!.slice())
return request({ return request({
method: 'post', method: 'post',
url: 'https://api.freezonecoin.com/identity/images/v1/upload', url: '',
data: formData, data: '',
}) })
} }

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

@ -56,7 +56,7 @@ export default RayScrollReveal
/** /**
* *
* 滚动加载过度组件, 来回滚动时, 可以重复触发效果 * 滚动加载过度组件, 来回滚动时, 可以重复触发效果
* 只需要将 dom 插入在 RayScrollReveal 组件下即可 * 只需要将 `dom` 插入在 `RayScrollReveal` 组件下即可
* 如果需要使用重新注册加载脚本或者有新的 dom 插入, 调用 scrollRevealCallback 函数即可捕获添加到 dom 的任何新元素 * 如果需要使用重新注册加载脚本或者有新的 `dom` 插入, 调用 `scrollRevealCallback` 函数即可捕获添加到 `dom` 的任何新元素
* 注意: 插件始终是以显示屏为窗口作为判断元素是否显示, 所以自定义滚动条滚动加载元素不生效 * 注意: 插件始终是以显示屏为窗口作为判断元素是否显示, 所以自定义滚动条滚动加载元素不生效
*/ */

2
src/main.ts
View File

@ -2,7 +2,7 @@ import { createApp } from 'vue'
import '@/styles/base.scss' import '@/styles/base.scss'
import 'amfe-flexible' // import 'amfe-flexible' // 如果为移动端项目, 解开该注释即可
import App from './App' import App from './App'

20
src/styles/mixins.scss
View File

@ -1,14 +1,14 @@
// 文字溢出变为：...... // 文字溢出变为: ......
@mixin overflow-ellipsis { @mixin overflowEllipsis {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
} }
// 滚动条样式 // 滚动条样式
@mixin scroll-style { @mixin scrollStyle {
::-webkit-scrollbar { ::-webkit-scrollbar {
/*改变纵向滚动条宽度*/ // 改变纵向滚动条宽度
width: 5px; width: 5px;
height: 5px; height: 5px;
transition: background-color 0.2s var(--r-scrollbar-bezier); transition: background-color 0.2s var(--r-scrollbar-bezier);
@ -16,26 +16,20 @@
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
/*改变滚动条轨道颜色*/ // 改变滚动条轨道颜色
border-radius: 5px; border-radius: 5px;
background-color: transparent; background-color: transparent;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
/*改变滚动条滑轨相关的样式*/ // 改变滚动条滑轨相关的样式
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.2);
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
/* 移入鼠标效果 */ // 移入鼠标效果
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.3);
cursor: pointer; cursor: pointer;
} }
} }
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}

2
src/utils/cache.ts
View File

@ -17,7 +17,7 @@ export const useSetCache = <T>(
* *
* @param key 需要获取目标缓存的key * @param key 需要获取目标缓存的key
* *
* @returns 所获取的缓存值 * @returns 获取缓存值
*/ */
export const useGetCache = ( export const useGetCache = (
key: string, key: string,

14
src/utils/element.ts
View File

@ -65,9 +65,9 @@ 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'格式添加
* *
* @handle 添加元素className(可：'xxx xxx' | 'xxx'格式添加) * @handle 添加元素className(可: 'xxx xxx' | 'xxx'格式添加)
*/ */
export const addClass = (element: HTMLElement, className: string) => { export const addClass = (element: HTMLElement, className: string) => {
if (element) { if (element) {
@ -84,9 +84,9 @@ 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'格式删除
* *
* @handle 删除元素className(可：'xxx xxx' | 'xxx'格式删除) * @handle 删除元素className(可: 'xxx xxx' | 'xxx'格式删除)
*/ */
export const removeClass = (element: HTMLElement, className: string) => { export const removeClass = (element: HTMLElement, className: string) => {
if (element) { if (element) {
@ -103,11 +103,11 @@ export const removeClass = (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'格式查询
* *
* @returns 返回boolean * @returns 返回boolean
* *
* @handle 元素是否含有某个className(可：'xxx xxx' | 'xxx'格式查询) * @handle 元素是否含有某个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
@ -160,7 +160,7 @@ export const removeStyle = (el: HTMLElement, styles: string[]) => {
/** /**
* *
* @param element Target element dom * @param element Target element dom
* @param styleProp Element style properties * @param styleProp Element style properties
* *
* @returns CSSStyleDeclaration * @returns CSSStyleDeclaration
*/ */

5
tsconfig.json
View File

@ -24,10 +24,7 @@
"@use-images/*": ["src/assets/images"] "@use-images/*": ["src/assets/images"]
}, },
"suppressImplicitAnyIndexErrors": true, "suppressImplicitAnyIndexErrors": true,
"types": [ "types": ["@intlify/unplugin-vue-i18n/messages"]
"vite-plugin-svg-icons/client",
"@intlify/unplugin-vue-i18n/messages"
]
}, },
"include": [ "include": [
"src/**/*.ts", "src/**/*.ts",

12
vite-plugin/index.ts
View File

@ -190,8 +190,8 @@ export const useEnvBuildOutput = (mode: string) => {
sourcemap: true, sourcemap: true,
terserOptions: { terserOptions: {
compress: { compress: {
drop_console: false, // 打包后移除console drop_console: false,
drop_debugger: false, // 打包后移除debugger drop_debugger: false,
}, },
}, },
} }
@ -203,8 +203,8 @@ export const useEnvBuildOutput = (mode: string) => {
sourcemap: true, sourcemap: true,
terserOptions: { terserOptions: {
compress: { compress: {
drop_console: false, // 打包后移除console drop_console: false,
drop_debugger: false, // 打包后移除debugger drop_debugger: false,
}, },
}, },
} }
@ -216,8 +216,8 @@ export const useEnvBuildOutput = (mode: string) => {
sourcemap: false, sourcemap: false,
terserOptions: { terserOptions: {
compress: { compress: {
drop_console: true, // 打包后移除console drop_console: true,
drop_debugger: true, // 打包后移除debugger drop_debugger: true,
}, },
}, },
} }

4
vite.config.ts
View File

@ -35,7 +35,9 @@ export default defineConfig(async ({ mode }) => {
useViteCompression(), useViteCompression(),
useVueI18nPlugin(), useVueI18nPlugin(),
useHTMLTitlePlugin(), useHTMLTitlePlugin(),
viteSvgLoader(), viteSvgLoader({
defaultImport: 'component', // 默认以 `componetn` 形式导入 `svg`
}),
], ],
optimizeDeps: { optimizeDeps: {
include: ['vue', 'vue-router', 'pinia', 'vue-i18n', '@vueuse/core'], include: ['vue', 'vue-router', 'pinia', 'vue-i18n', '@vueuse/core'],