#

luxiaotao1123

2025-02-09 c9fee651948d931769bc2697ae0a3c439324eef7

#

 rsf-admin/package-lock.json

@@ -15,6 +15,7 @@
        "axios": "^1.7.4",
        "date-fns": "^3.6.0",
        "lodash": "^4.17.21",
        "motion": "^12.4.1",
        "papaparse": "^5.4.1",
        "pixi.js": "^7.4.0",
        "react": "^18.3.0",
@@ -3787,6 +3788,39 @@
        "node": ">=0.4.x"
      }
    },
    "node_modules/framer-motion": {
      "version": "12.4.1",
      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.1.tgz",
      "integrity": "sha512-5Ijbea3topSZjadQ0hgc/TcWj2ldMZmNREM7RvAhvsThYOA1HHOA8TT1yKvMu1YXP3jWaFwoZ6Vo9Nw+DUZrzA==",
      "license": "MIT",
      "dependencies": {
        "motion-dom": "^12.0.0",
        "motion-utils": "^12.0.0",
        "tslib": "^2.4.0"
      },
      "peerDependencies": {
        "@emotion/is-prop-valid": "*",
        "react": "^18.0.0 || ^19.0.0",
        "react-dom": "^18.0.0 || ^19.0.0"
      },
      "peerDependenciesMeta": {
        "@emotion/is-prop-valid": {
          "optional": true
        },
        "react": {
          "optional": true
        },
        "react-dom": {
          "optional": true
        }
      }
    },
    "node_modules/framer-motion/node_modules/tslib": {
      "version": "2.8.1",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
      "license": "0BSD"
    },
    "node_modules/fs.realpath": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -4827,6 +4861,53 @@
        "node": "*"
      }
    },
    "node_modules/motion": {
      "version": "12.4.1",
      "resolved": "https://registry.npmjs.org/motion/-/motion-12.4.1.tgz",
      "integrity": "sha512-TBnf5NyZVZFOHOc87fyC6qTSU+6LUe09LwxA1Sna35YL7qgOv1EZv96mu6o7uQ2Rl1GvTSQLeyfrQAEG+zlh+w==",
      "license": "MIT",
      "dependencies": {
        "framer-motion": "^12.4.1",
        "tslib": "^2.4.0"
      },
      "peerDependencies": {
        "@emotion/is-prop-valid": "*",
        "react": "^18.0.0 || ^19.0.0",
        "react-dom": "^18.0.0 || ^19.0.0"
      },
      "peerDependenciesMeta": {
        "@emotion/is-prop-valid": {
          "optional": true
        },
        "react": {
          "optional": true
        },
        "react-dom": {
          "optional": true
        }
      }
    },
    "node_modules/motion-dom": {
      "version": "12.0.0",
      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz",
      "integrity": "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==",
      "license": "MIT",
      "dependencies": {
        "motion-utils": "^12.0.0"
      }
    },
    "node_modules/motion-utils": {
      "version": "12.0.0",
      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz",
      "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==",
      "license": "MIT"
    },
    "node_modules/motion/node_modules/tslib": {
      "version": "2.8.1",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
      "license": "0BSD"
    },
    "node_modules/ms": {
      "version": "2.1.2",
      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",

 rsf-admin/package.json

@@ -19,6 +19,7 @@
    "axios": "^1.7.4",
    "date-fns": "^3.6.0",
    "lodash": "^4.17.21",
    "motion": "^12.4.1",
    "papaparse": "^5.4.1",
    "pixi.js": "^7.4.0",
    "react": "^18.3.0",

 rsf-admin/src/i18n/en.js

@@ -220,6 +220,7 @@
        }
    },
    page: {
        welcome: '    Welcome to the RSF Management System',
        login: {
            title: 'Welcome',
            footer: 'Footer Goes Here',

 rsf-admin/src/i18n/zh.js

@@ -220,6 +220,7 @@
        }
    },
    page: {
        welcome: '    Welcome to the RSF Management System',
        login: {
            title: 'Welcome',
            footer: 'Footer Goes Here',

 rsf-admin/src/page/dashboard/WordEffect.jsx

New file
@@ -0,0 +1,71 @@
import { useEffect } from "react"
import { motion, stagger, useAnimate } from "framer-motion"

export const WordEffect = ({
    words,
    filter = true,
    duration = 0.5,
    delay = 0.1,
    color = "black",
}) => {
    const [scope, animate] = useAnimate()
    const wordsArray = words.split(" ")
    useEffect(() => {
        animate(
            "span",
            {
                opacity: 1,
                filter: filter ? "blur(0px)" : "none",
            },
            {
                duration: duration ?? 1,
                delay: stagger(delay ?? 0.1),
            },
        )
    }, [scope.current])

    const renderWords = () => {
        return (
            <motion.div ref={scope}>
                {wordsArray.map((word, idx) => {
                    return (
                        <motion.span
                            key={word + idx}
                            style={{
                                opacity: 0,
                                filter: filter ? "blur(10px)" : "none",
                                color: color,
                                fontWeight: 'bold',
                                display: 'inline-block',
                            }}
                        >
                            {word}&nbsp;
                        </motion.span>
                    )
                })}
            </motion.div>
        )
    }

    return (
        <div
            style={{
                fontWeight: 'bold',
            }}
        >
            <div style={{ marginTop: '1rem' }}>
                <div
                    style={{
                        color: 'black',
                        fontSize: '1.5rem',
                        lineHeight: '2rem',
                        letterSpacing: '0.05em',
                    }}
                >
                    {renderWords()}
                </div>
            </div>
        </div >
    )
}


 rsf-admin/src/page/dashboard/index.jsx

@@ -1,10 +1,14 @@
import React, { useState, useRef, useEffect, useMemo } from "react";
import { useNavigate } from 'react-router-dom';
import { useAuthProvider } from 'react-admin';
import { useTheme } from '@mui/material/styles';
import { useTranslate, useAuthProvider } from 'react-admin';
import { WordEffect } from './WordEffect'

const Dashboard = () => {
    const authProvider = useAuthProvider();
    const navigate = useNavigate();
    const theme = useTheme();
    const translate = useTranslate();

    useEffect(() => {
        authProvider.checkAuth().catch(() => {
@@ -14,7 +18,23 @@

    return (
        <>
            <h1>Dashboard</h1>
            <div
                style={{
                    boxSizing: 'border-box',
                    display: 'flex',
                    width: '100%',
                    height: '100%',
                    flexDirection: 'column',
                    justifyContent: 'flex-start',
                    alignItems: 'flex-start',
                    padding: '2rem 1rem',
                }}
            >
                <WordEffect
                    words={translate('page.welcome')}
                    color={theme.palette.mode === 'light' ? '#666' : '#eeeeee'}
                />
            </div>
        </>
    )
}