mirror of
https://github.com/XiaoDaiGua-Ray/ray-template.git
synced 2025-04-05 19:42:07 +08:00
部分细节更改
This commit is contained in:
chuan_wuhao
parent
4af5d743f1
commit
0f77070848
@ -55,7 +55,9 @@
|
||||
|
||||
- utils: 工具包
|
||||
- cache: 缓存方法
|
||||
- crypto: 常用的加密方法
|
||||
- element: dom 相关操作方法
|
||||
- hook: 常用 hook 方法
|
||||
|
||||
- vite-plugin: 插件注册
|
||||
```
|
||||
|
||||
29
dist/assets/index.e8c4dc19.js
vendored
Normal file
29
dist/assets/index.e8c4dc19.js
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
dist/assets/index.e8c4dc19.js.gz
vendored
Normal file
BIN
dist/assets/index.e8c4dc19.js.gz
vendored
Normal file
Binary file not shown.
1
dist/assets/index.f748041f.css
vendored
Normal file
1
dist/assets/index.f748041f.css
vendored
Normal 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
15
dist/index.html
vendored
Normal 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
14
dist/ray.svg
vendored
Normal 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>
|
||||
|
After Width: | Height: | Size: 5.4 KiB |
@ -12,9 +12,11 @@ module.exports = {
|
||||
grid: true,
|
||||
},
|
||||
'postcss-pxtorem': {
|
||||
rootValue: 37.5,
|
||||
rootValue: 16, // 根元素字体大小或根据 `input` 参数返回根元素字体大小
|
||||
propList: ['*'],
|
||||
unitPrecision: 5,
|
||||
propList: ['font', 'font-size', 'line-height', 'letter-spacing'], // 可以从 `px` 更改为 `rem` 的属性
|
||||
selectorBlackList: [], // 要忽略并保留为 `px` 的选择器
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
10
src/App.tsx
10
src/App.tsx
@ -2,7 +2,6 @@ import { defineComponent } from 'vue'
|
||||
import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue' // 以封装动画路由组件
|
||||
import DraggableComponent from '@/components/DraggableComponent/index.vue'
|
||||
import RayScrollReveal from '@/components/RayScrollReveal/index'
|
||||
import { useAxiosTest } from '@use-api/test'
|
||||
import R from '@/icons/ray.svg' // 使用 vite-svg-loader 作为 svg 使用插件, 故而不需要使用 RayIcon 作为组件引入
|
||||
|
||||
const App = defineComponent({
|
||||
@ -11,21 +10,12 @@ const App = defineComponent({
|
||||
const { x, y } = useMouse()
|
||||
const { height: windowHeight } = useWindowSize()
|
||||
const { t } = useI18n()
|
||||
const inputRef = ref<HTMLInputElement>()
|
||||
|
||||
const handleFileChange = () => {
|
||||
const file = (inputRef.value as HTMLInputElement).files?.[0]
|
||||
|
||||
useAxiosTest(file as File)
|
||||
}
|
||||
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
windowHeight,
|
||||
ray: t,
|
||||
handleFileChange,
|
||||
inputRef,
|
||||
}
|
||||
},
|
||||
render() {
|
||||
|
||||
@ -1,12 +1,9 @@
|
||||
import request from '../request'
|
||||
|
||||
export const useAxiosTest = (file: File) => {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file!.slice())
|
||||
|
||||
export const useAxiosTest = () => {
|
||||
return request({
|
||||
method: 'post',
|
||||
url: 'https://api.freezonecoin.com/identity/images/v1/upload',
|
||||
data: formData,
|
||||
url: '',
|
||||
data: '',
|
||||
})
|
||||
}
|
||||
|
||||
@ -56,7 +56,7 @@ export default RayScrollReveal
|
||||
/**
|
||||
*
|
||||
* 滚动加载过度组件, 来回滚动时, 可以重复触发效果
|
||||
* 只需要将 dom 插入在 RayScrollReveal 组件下即可
|
||||
* 如果需要使用重新注册加载脚本或者有新的 dom 插入, 调用 scrollRevealCallback 函数即可捕获添加到 dom 的任何新元素
|
||||
* 只需要将 `dom` 插入在 `RayScrollReveal` 组件下即可
|
||||
* 如果需要使用重新注册加载脚本或者有新的 `dom` 插入, 调用 `scrollRevealCallback` 函数即可捕获添加到 `dom` 的任何新元素
|
||||
* 注意: 插件始终是以显示屏为窗口作为判断元素是否显示, 所以自定义滚动条滚动加载元素不生效
|
||||
*/
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
</router-view>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// 带过渡动画 RouterView 组件
|
||||
// 带过渡动画 `RouterView` 组件
|
||||
// 如果子路由需要做动画切换，则需要此组件
|
||||
// 为什么必须为 vue 文件，因为 tsx 文件在解析的时候会抛出警告不好看
|
||||
// 只需要像使用 RouterView 组件时一样使用即可, 但是不能对于子路由生效, 所以需要在子路由显示的地方替换 RouterView 组件
|
||||
// 为什么必须为 `vue` 文件，因为 `tsx` 文件在解析的时候会抛出警告不好看
|
||||
// 只需要像使用 `RouterView` 组件时一样使用即可, 但是不能对于子路由生效, 所以需要在子路由显示的地方替换 `RouterView` 组件
|
||||
</script>
|
||||
|
||||
@ -2,7 +2,7 @@ import { createApp } from 'vue'
|
||||
|
||||
import '@/styles/base.scss'
|
||||
|
||||
import 'amfe-flexible'
|
||||
// import 'amfe-flexible' // 如果为移动端项目, 解开该注释即可
|
||||
|
||||
import App from './App'
|
||||
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
// 文字溢出变为：......
|
||||
@mixin overflow-ellipsis {
|
||||
// 文字溢出变为: ......
|
||||
@mixin overflowEllipsis {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// 滚动条样式
|
||||
@mixin scroll-style {
|
||||
@mixin scrollStyle {
|
||||
::-webkit-scrollbar {
|
||||
/*改变纵向滚动条宽度*/
|
||||
// 改变纵向滚动条宽度
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
transition: background-color 0.2s var(--r-scrollbar-bezier);
|
||||
@ -16,26 +16,20 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
/*改变滚动条轨道颜色*/
|
||||
// 改变滚动条轨道颜色
|
||||
border-radius: 5px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
/*改变滚动条滑轨相关的样式*/
|
||||
// 改变滚动条滑轨相关的样式
|
||||
border-radius: 5px;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
/* 移入鼠标效果 */
|
||||
// 移入鼠标效果
|
||||
border-radius: 5px;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@ export const useSetCache = <T>(
|
||||
*
|
||||
* @param key 需要获取目标缓存的key
|
||||
*
|
||||
* @returns 所获取的缓存值
|
||||
* @returns 获取缓存值
|
||||
*/
|
||||
export const useGetCache = (
|
||||
key: string,
|
||||
|
||||
@ -65,9 +65,9 @@ export const off = (
|
||||
/**
|
||||
*
|
||||
* @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) => {
|
||||
if (element) {
|
||||
@ -84,9 +84,9 @@ export const addClass = (element: HTMLElement, className: string) => {
|
||||
/**
|
||||
*
|
||||
* @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) => {
|
||||
if (element) {
|
||||
@ -103,11 +103,11 @@ export const removeClass = (element: HTMLElement, className: string) => {
|
||||
/**
|
||||
*
|
||||
* @param element Target element dom
|
||||
* @param className 查询元素是否含有此className，可：'xxx xxx' | 'xxx'格式查询
|
||||
* @param className 查询元素是否含有此className，可: 'xxx xxx' | 'xxx'格式查询
|
||||
*
|
||||
* @returns 返回boolean
|
||||
*
|
||||
* @handle 元素是否含有某个className(可：'xxx xxx' | 'xxx'格式查询)
|
||||
* @handle 元素是否含有某个className(可: 'xxx xxx' | 'xxx'格式查询)
|
||||
*/
|
||||
export const hasClass = (element: HTMLElement, className: string) => {
|
||||
const elementClassName = element.className
|
||||
@ -160,7 +160,7 @@ export const removeStyle = (el: HTMLElement, styles: string[]) => {
|
||||
/**
|
||||
*
|
||||
* @param element Target element dom
|
||||
* @param styleProp Element style properties
|
||||
* @param styleProp Element style properties
|
||||
*
|
||||
* @returns CSSStyleDeclaration
|
||||
*/
|
||||
|
||||
@ -24,10 +24,7 @@
|
||||
"@use-images/*": ["src/assets/images"]
|
||||
},
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"types": [
|
||||
"vite-plugin-svg-icons/client",
|
||||
"@intlify/unplugin-vue-i18n/messages"
|
||||
]
|
||||
"types": ["@intlify/unplugin-vue-i18n/messages"]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
|
||||
@ -190,8 +190,8 @@ export const useEnvBuildOutput = (mode: string) => {
|
||||
sourcemap: true,
|
||||
terserOptions: {
|
||||
compress: {
|
||||
drop_console: false, // 打包后移除console
|
||||
drop_debugger: false, // 打包后移除debugger
|
||||
drop_console: false,
|
||||
drop_debugger: false,
|
||||
},
|
||||
},
|
||||
}
|
||||
@ -203,8 +203,8 @@ export const useEnvBuildOutput = (mode: string) => {
|
||||
sourcemap: true,
|
||||
terserOptions: {
|
||||
compress: {
|
||||
drop_console: false, // 打包后移除console
|
||||
drop_debugger: false, // 打包后移除debugger
|
||||
drop_console: false,
|
||||
drop_debugger: false,
|
||||
},
|
||||
},
|
||||
}
|
||||
@ -216,8 +216,8 @@ export const useEnvBuildOutput = (mode: string) => {
|
||||
sourcemap: false,
|
||||
terserOptions: {
|
||||
compress: {
|
||||
drop_console: true, // 打包后移除console
|
||||
drop_debugger: true, // 打包后移除debugger
|
||||
drop_console: true,
|
||||
drop_debugger: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@ -28,14 +28,16 @@ export default defineConfig(async ({ mode }) => {
|
||||
plugins: [
|
||||
vue({ reactivityTransform: true }),
|
||||
vueJsx(),
|
||||
ViteInspect(), // 仅适用于开发模式(检查 Vite 插件的中间状态)
|
||||
ViteInspect(), // 仅适用于开发模式(检查 `Vite` 插件的中间状态)
|
||||
VueI18nPlugin(),
|
||||
useAutoImport(),
|
||||
useViteComponents(),
|
||||
useViteCompression(),
|
||||
useVueI18nPlugin(),
|
||||
useHTMLTitlePlugin(),
|
||||
viteSvgLoader(),
|
||||
viteSvgLoader({
|
||||
defaultImport: 'component', // 默认以 `componetn` 形式导入 `svg`
|
||||
}),
|
||||
],
|
||||
optimizeDeps: {
|
||||
include: ['vue', 'vue-router', 'pinia', 'vue-i18n', '@vueuse/core'],
|
||||
@ -46,7 +48,7 @@ export default defineConfig(async ({ mode }) => {
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
additionalData: '@import "./src/styles/mixins.scss";', // 全局mixin
|
||||
additionalData: '@import "./src/styles/mixins.scss";', // 全局 `mixin` (根据自己需要取舍)
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user