Skip to content

G
GraceTemplate
Commit 9d9d0c72 authored by haiyoucuv's avatar haiyoucuv
Browse files
Options

new 模板

parent 7e904621
Show whitespace changes
Inline Side-by-side
Showing with 1681 additions and 1691 deletions
config/.env.global
View file @ 9d9d0c72
UPLOAD_DIR=TNGD_GAMES/B_Client UPLOAD_DIR=db_games/spark/v3
\ No newline at end of file \ No newline at end of file
config/.env.production
View file @ 9d9d0c72
# .env.production # .env.production
CDN_DOMAIN=//gamification-sbx.tngdigital.com.my CDN_DOMAIN=//yun.duiba.com.cn
OSS_REGION=oss-ap-southeast-3 OSS_REGION=oss-cn-hangzhou
OSS_BUCKET=sbx-gamification-tngd OSS_BUCKET=duiba
OSS_ACCESS_KEY_ID=LTAI5tApBGwYWaj6zLmKUaTJ OSS_ACCESS_KEY_ID=LTAI5tPUSSxgkEmKPAfVXUQQ
OSS_ACCESS_SECRET=W3OvCDpbE3ywMaQnTNWzySnhPRK1We OSS_ACCESS_SECRET=6sk3EDd1BYrXlAUoh8maMuN7hOMkh1
\ No newline at end of file \ No newline at end of file
dist/index.html 0 → 100644
View file @ 9d9d0c72
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="dns-prefetch" href="//yun.duiba.com.cn" />
<link rel="preconnect" href="//embedlog.duiba.com.cn">
<title>活动标题</title>
<script type="text/javascript">
if (localStorage && localStorage.isWebp) {
document
.getElementsByTagName('html')[0]
.setAttribute('duiba-webp', 'true');
}
</script>
<script src="//yun.duiba.com.cn/js-libs/rem/1.1.3/rem.min.js"></script>
<script>
var CFG = CFG || {};
CFG.projectId = location.pathname.split('/')[2] || '1';
function getUrlParam(name) {
var search = window.location.search;
var matched = search
.slice(1)
.match(new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'));
return search.length ? matched && matched[2] : null;
}
CFG.appID = '${APPID}';
if (!getUrlParam("appID")) {
// alert("【警告】检测到活动url中没有appID参数\n缺少该参数会导致埋点、分享、app信息获取错误。")
}
</script>
<script type="module" crossorigin src="//yun.duiba.com.cn/db_games/spark/v3/1729238505291/assets/index-6Aqtw07R.js"></script>
<link rel="stylesheet" crossorigin href="//yun.duiba.com.cn/db_games/spark/v3/1729238505291/assets/index-B2EZ7m-P.css">
<script type="module">import.meta.url;import("_").catch(()=>1);(async function*(){})().next();if(location.protocol!="file:"){window.__vite_is_modern_browser=true}</script>
<script type="module">!function(){if(window.__vite_is_modern_browser)return;console.warn("vite: loading legacy chunks, syntax error above and the same error below should be ignored");var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");n.src=e.src,n.onload=function(){System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))},document.body.appendChild(n)}();</script>
</head>
<body>
<div id="root"></div>
<script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
<script nomodule crossorigin id="vite-legacy-polyfill" src="//yun.duiba.com.cn/db_games/spark/v3/1729238505291/assets/polyfills-legacy-DPMTo3qc.js"></script>
<script nomodule crossorigin id="vite-legacy-entry" data-src="//yun.duiba.com.cn/db_games/spark/v3/1729238505291/assets/index-legacy-BjxNED3H.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
</body>
</html>
package.json
View file @ 9d9d0c72
...@@ -16,12 +16,8 @@ ...@@ -16,12 +16,8 @@
"@spark/svgaplayer": "^2.0.5", "@spark/svgaplayer": "^2.0.5",
"@spark/ui": "^2.1.28", "@spark/ui": "^2.1.28",
"@spark/utils": "^2.0.88", "@spark/utils": "^2.0.88",
"@types/crypto-js": "^4.2.2",
"@types/node": "^22.5.1",
"ali-oss": "^6.21.0",
"chalk": "^5.3.0", "chalk": "^5.3.0",
"crypto-js": "^4.2.0", "crypto-js": "^4.2.0",
"dotenv": "^16.4.5",
"duiba-utils": "^2.0.2", "duiba-utils": "^2.0.2",
"less": "^4.2.0", "less": "^4.2.0",
"mobx": "^6.13.1", "mobx": "^6.13.1",
...@@ -35,20 +31,23 @@ ...@@ -35,20 +31,23 @@
"@babel/plugin-proposal-decorators": "^7.24.7", "@babel/plugin-proposal-decorators": "^7.24.7",
"@eslint/js": "^9.9.0", "@eslint/js": "^9.9.0",
"@types/ali-oss": "^6.16.11", "@types/ali-oss": "^6.16.11",
"@types/crypto-js": "^4.2.2",
"@types/postcss-pxtorem": "^6.0.3", "@types/postcss-pxtorem": "^6.0.3",
"@types/progress": "^2.0.7", "@types/progress": "^2.0.7",
"@types/react": "^18.3.3", "@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0", "@types/react-dom": "^18.3.0",
"@vitejs/plugin-legacy": "^5.4.2", "@vitejs/plugin-legacy": "^5.4.2",
"@vitejs/plugin-react": "^4.3.1", "@vitejs/plugin-react": "^4.3.1",
"ali-oss": "^6.21.0",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"dotenv": "^16.4.5",
"eslint": "^9.9.0", "eslint": "^9.9.0",
"eslint-plugin-react-hooks": "^5.1.0-rc.0", "eslint-plugin-react-hooks": "^5.1.0-rc.0",
"eslint-plugin-react-refresh": "^0.4.9", "eslint-plugin-react-refresh": "^0.4.9",
"globals": "^15.9.0", "globals": "^15.9.0",
"mockjs": "^1.1.0", "mockjs": "^1.1.0",
"postcss-pxtorem": "^6.1.0", "postcss-pxtorem": "^6.1.0",
"terser": "^5.31.6", "terser": "^5.36.0",
"typescript": "5.5.4", "typescript": "5.5.4",
"typescript-eslint": "^8.0.1", "typescript-eslint": "^8.0.1",
"vite": "5.4.2", "vite": "5.4.2",
......
src/App.tsx
View file @ 9d9d0c72
...@@ -23,8 +23,6 @@ class App extends Component { ...@@ -23,8 +23,6 @@ class App extends Component {
async componentDidMount() { async componentDidMount() {
await store.getFrontVariable(); await store.getFrontVariable();
console.log(import.meta.glob("./assets/**/*"));
} }
render() { render() {
......
src/pages/HomeDemo/HomeDemo.less
View file @ 9d9d0c72
@import "../../res.less"; @import "../../res.less";
.homeDemo {}
.homeDemo {
position: absolute;
.homeImg {
position: absolute;
left: 100px;
top: 400px;
width: 200px;
height: 200px;
.webpBg("LoadingPage/loadingIp.png");
}
.svga {
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 400px;
}
}
src/pages/HomeDemo/HomeDemo.tsx
View file @ 9d9d0c72
import React from 'react'; import React from 'react';
import {observer} from 'mobx-react'; import { observer } from 'mobx-react';
import './HomeDemo.less'; import './HomeDemo.less';
import { SvgaPlayer } from "@spark/svgaplayer";
import svga from "../../assets/LoadingPage/1红色标题.svga";
import png from "../../assets/LoadingPage/loadingIp.png";
@observer @observer
class HomeDemo extends React.Component { class HomeDemo extends React.Component {
componentDidMount() {
}
render() { render() {
return <div className="homeDemo"> return <div className="homeDemo">
<div className="homeImg" />
<img src={png} />
当前为活动首页 当前为活动首页
<SvgaPlayer className="svga" src={svga} />
</div>; </div>;
} }
} }
......
src/pages/LoadingDemo/LoadingDemo.less
View file @ 9d9d0c72
...@@ -7,12 +7,7 @@ ...@@ -7,12 +7,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
//background: linear-gradient(152deg, #AEE7FF 6%, #F1DEFC 43%, #F3E7FB 73%);
.webpBg("LoadingPage/loadingBg.jpg"); .webpBg("LoadingPage/loadingBg.jpg");
//background-image: url("../../assets/LoadingPage/loadingBg.jpg");
background-size: 750px 1624px;
.loading-ip { .loading-ip {
position: absolute; position: absolute;
......
src/pages/LoadingDemo/LoadingDemo.tsx
View file @ 9d9d0c72
import React from "react"; import React from "react";
import {observer} from "mobx-react"; import { observer } from "mobx-react";
import "./LoadingDemo.less"; import { PAGE_MAP } from "../../utils/constants";
// import {preloadAsset} from "../../utils/preload1.3";
import {PAGE_MAP} from "../../utils/constants";
import store from "../../store/store"; import store from "../../store/store";
import { preload } from "../../utils/preload.ts";
import "./LoadingDemo.less";
@observer @observer
class LoadingDemo extends React.Component { class LoadingDemo extends React.Component {
...@@ -14,7 +14,6 @@ class LoadingDemo extends React.Component { ...@@ -14,7 +14,6 @@ class LoadingDemo extends React.Component {
curPercentage = 0; curPercentage = 0;
intervalId: number = 0; intervalId: number = 0;
isEvenLoad = true; // 是否匀速加载进度条
componentDidMount() { componentDidMount() {
this.preloadAssetInit(); this.preloadAssetInit();
...@@ -26,20 +25,18 @@ class LoadingDemo extends React.Component { ...@@ -26,20 +25,18 @@ class LoadingDemo extends React.Component {
* 资源预加载 * 资源预加载
*/ */
preloadAssetInit = async () => { preloadAssetInit = async () => {
// const imageList = [];
// preloadAsset( const files = import.meta.glob("../../assets/**/*", {
// imageList, import: "default",
// 3, eager: true,
// this.onLoadingProgress, });
// ).then(() => {
// // 预加载资源完成 const urls = Object.values(files) as string[];
// // 异步加载默认关闭
// // setTimeout(() => { await preload(urls, (progress, loaded, total) => {
// // // 异步加载资源开始 const percentage = Math.floor(progress * 100);
// // const asyncImageList = assetList.asyncLoadImg; this.setEvenProgress(percentage);
// // preloadAsset(asyncImageList, 1) });
// // }, 5000);
// });
}; };
jump = () => { jump = () => {
...@@ -49,31 +46,13 @@ class LoadingDemo extends React.Component { ...@@ -49,31 +46,13 @@ class LoadingDemo extends React.Component {
}; };
/**
* 资源加载进度回调
* @param {*} progress
*/
onLoadingProgress = (progress) => {
const percentage = Math.floor(progress * 100);
console.log("progress", percentage);
if (this.isEvenLoad) {
this.setEvenProgress(percentage);
} else {
if (percentage == 100) {
this.jump();
}
}
};
/** /**
* 以1%匀速加载进度 * 以1%匀速加载进度
* @param {*} percentage * @param {*} percentage
*/ */
setEvenProgress = (percentage) => { setEvenProgress = (percentage) => {
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
this.intervalId && clearInterval(this.intervalId); this.intervalId && clearInterval(this.intervalId);
let curPercentage = this.curPercentage; let curPercentage = this.curPercentage;
// @ts-ignore
this.intervalId = setInterval(() => { this.intervalId = setInterval(() => {
if (curPercentage >= percentage) { if (curPercentage >= percentage) {
clearInterval(this.intervalId); clearInterval(this.intervalId);
...@@ -90,15 +69,15 @@ class LoadingDemo extends React.Component { ...@@ -90,15 +69,15 @@ class LoadingDemo extends React.Component {
render() { render() {
const {curPercentage} = this.state; const { curPercentage } = this.state;
return <div className="loading"> return <div className="loading">
<div className="loading-ip"/> <div className="loading-ip" />
<div className="progressBarBg"/> <div className="progressBarBg" />
<div className="progressBar"> <div className="progressBar">
<div className="progressBarFill" style={{ <div className="progressBarFill" style={{
transform: `translateX(${curPercentage - 100}%)` transform: `translateX(${curPercentage - 100}%)`
}}/> }} />
</div> </div>
<span className="progressTxt">金豆正在路上...... {curPercentage}%</span> <span className="progressTxt">金豆正在路上...... {curPercentage}%</span>
</div>; </div>;
......
src/res.less
View file @ 9d9d0c72
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
background-image: var(--p); background-image: var(--p);
[duiba-webp='true'] & { [duiba-webp='true'] & {
--p: url("@{RES_PATH}@{value}@{webp}");
background-image: var(--p); background-image: var(--p);
} }
} }
......
src/store/store.ts
View file @ 9d9d0c72
...@@ -18,8 +18,8 @@ class Store { ...@@ -18,8 +18,8 @@ class Store {
Did1NDA0NDc: "sharePage", Did1NDA0NDc: "sharePage",
myPrize: "myPrize", // TODO 举例子 新宿台奖品页 myPrize: "myPrize", // TODO 举例子 新宿台奖品页
index: PAGE_MAP.LOADING_PAGE, index: PAGE_MAP.HOME_PAGE,
}[skinId] || PAGE_MAP.HOME_PAGE; }[skinId] || PAGE_MAP.LOADING_PAGE;
pageData = {}; pageData = {};
......
src/utils/checkwebp.ts
View file @ 9d9d0c72
...@@ -30,4 +30,11 @@ ...@@ -30,4 +30,11 @@
} }
img.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=' img.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA='
} }
})() })();
export const webpQuery = "?x-oss-process=image/format,webp";
export function supportWebp() {
return !!localStorage?.isWebp;
}
\ No newline at end of file
src/utils/preload.ts 0 → 100644
View file @ 9d9d0c72
import { supportWebp, webpQuery } from "./checkwebp.ts";
export const svgaRegex = (/\.(svga)$/);
export const jpgRegex = (/\.(jpe?g)$/);
export const pngRegex = (/\.(png)$/);
export const webpRegex = (/\.(webp)$/);
export const gifRegex = (/\.(gif)$/);
export const imgRegex = (/\.(png|jpe?g|webp|gif)$/);
const typeRegex = (/\.([^.]+)$/);
const loaders = {
".jpg": loadImg,
".jpeg": loadImg,
".png": loadImg,
".webp": loadImg,
".gif": loadImg,
'.svga': loadSvga,
}
export async function preload(
urls: string[],
onProcess?: (progress: number, loaded: number, total: number) => void,
onComplete?: () => void
) {
const ps = [];
let loaded = 0;
const total = urls.length;
// 获取文件类型
urls.forEach((url) => {
const type = url.match(typeRegex)?.[0];
const loadFunc = loaders[type] || loadUnknown;
const p = loadFunc(url).then(() => {
loaded++;
const progress = loaded / total;
onProcess && onProcess(progress, loaded, total);
if (loaded >= total) {
onComplete && onComplete();
}
});
ps.push(p);
});
}
/**
* 加载一张图片
* @param {string} url 地址
*/
export function loadImg(url: string) {
return new Promise((resolve) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = err => {
console.warn('load', url, err);
resolve(null);
};
img.crossOrigin = 'anonymous';
img.src = url + (supportWebp() ? webpQuery : '');
});
}
export function loadSvga(url: string) {
return Promise.resolve();
}
export function loadUnknown(url: string) {
console.warn(`load unknown: ${url}`);
return Promise.resolve();
}
\ No newline at end of file
src/vite-env.d.ts
View file @ 9d9d0c72
/// <reference types="vite/client" /> /// <reference types="vite/client" />
declare module "*.svga" {
const src: string;
export default src;
}
\ No newline at end of file
tsconfig.app.json
View file @ 9d9d0c72
...@@ -20,7 +20,8 @@ ...@@ -20,7 +20,8 @@
"noImplicitAny": false, "noImplicitAny": false,
"noUnusedLocals": false, "noUnusedLocals": false,
"noUnusedParameters": false, "noUnusedParameters": false,
"noFallthroughCasesInSwitch": true "noFallthroughCasesInSwitch": true,
"types": ["node_modules/@types/node"]
}, },
"include": ["src"] "include": ["src"],
} }
vite.config.ts
View file @ 9d9d0c72
...@@ -5,14 +5,12 @@ import autoprefixer from "autoprefixer" ...@@ -5,14 +5,12 @@ import autoprefixer from "autoprefixer"
import postcsspxtorem from "postcss-pxtorem" import postcsspxtorem from "postcss-pxtorem"
import { viteMockServe } from "vite-plugin-mock"; import { viteMockServe } from "vite-plugin-mock";
import DuibaPublish from "./config/DuibaPublish/DuibaPublish.ts"; import DuibaPublish from "./config/DuibaPublish/DuibaPublish.ts";
import dotenv from 'dotenv'; import dotenv from 'dotenv';
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig(({mode}) => { export default defineConfig(({ mode }) => {
dotenv.config({path: [`./config/.env.global`, `./config/.env.${mode}`]}); dotenv.config({ path: [`./config/.env.global`, `./config/.env.${mode}`] });
const { const {
NODE_ENV, NODE_ENV,
...@@ -21,7 +19,7 @@ export default defineConfig(({mode}) => { ...@@ -21,7 +19,7 @@ export default defineConfig(({mode}) => {
OSS_ACCESS_KEY_ID, OSS_ACCESS_SECRET, OSS_ACCESS_KEY_ID, OSS_ACCESS_SECRET,
} = process.env; } = process.env;
console.log(UPLOAD_DIR, NODE_ENV, CDN_DOMAIN, OSS_REGION, OSS_BUCKET, OSS_ACCESS_KEY_ID, OSS_ACCESS_SECRET) // console.log(UPLOAD_DIR, NODE_ENV, CDN_DOMAIN, OSS_REGION, OSS_BUCKET, OSS_ACCESS_KEY_ID, OSS_ACCESS_SECRET)
const isDev = NODE_ENV == "development"; const isDev = NODE_ENV == "development";
...@@ -33,13 +31,15 @@ export default defineConfig(({mode}) => { ...@@ -33,13 +31,15 @@ export default defineConfig(({mode}) => {
base: !isDev ? prodBase : "", base: !isDev ? prodBase : "",
server: { server: {
// port: 3001 // port: 3001
open: true,
}, },
assetsInclude: [/\.(svga)$/],
plugins: [ plugins: [
react({ react({
babel: { babel: {
plugins: [ plugins: [
["@babel/plugin-proposal-decorators", {legacy: true}], ["@babel/plugin-proposal-decorators", { legacy: true }],
["@babel/plugin-proposal-class-properties", {loose: true}], ["@babel/plugin-proposal-class-properties", { loose: true }],
], ],
}, },
}), }),
...@@ -76,7 +76,7 @@ export default defineConfig(({mode}) => { ...@@ -76,7 +76,7 @@ export default defineConfig(({mode}) => {
}), }),
postcsspxtorem({ postcsspxtorem({
rootValue: 100, rootValue: 100,
// propList: ["*", "!border"], // 除 border 外所有px 转 rem propList: ["*", "!border"], // 除 border 外所有px 转 rem
selectorBlackList: [".noRem-"], // 过滤掉.noRem-开头的class，不进行rem转换 selectorBlackList: [".noRem-"], // 过滤掉.noRem-开头的class，不进行rem转换
}), }),
], ],
......
yarn.lock
View file @ 9d9d0c72
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment