Merge branch 'main' into deploy

Author: luckfunc

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Roll
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -15,3 +15,5 @@ This project is based on [vue-color-avatar](https://github.com/Codennnn/vue-colo
 <img src="./src/images/img.png" alt="website-cover" />
 </a>
 
+## LICENSE 
+Have a look at the [license file](./LICENSE) for details

package.json

@@ -1,7 +1,7 @@
 {
   "name": "avatar",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/react-color-avatar/index.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, useEffect, useState } from 'react';
+import { CSSProperties, RefObject, useEffect, useState } from 'react';
 import { Background } from '@/components/widgets';
 import { WidgetType, WrapperShape } from '@/enums';
 import { AvatarOption } from '@/types';
@@ -10,11 +10,12 @@ interface IReactColorAvatarProps {
     option: AvatarOption,
     size: 280,
     style: CSSProperties,
-    colorAvatarRef: any
+    colorAvatarRef: RefObject<HTMLDivElement>
 }
 export default function ReactColorAvatar(props: IReactColorAvatarProps) {
    const { option: avatarOption, size: avatarSize, style, colorAvatarRef } = props;
-   const [svgContent, setSvgContent] = useState('');
+    const [svgContent, setSvgContent] = useState('');
+
    useEffect(() => {
        (async () => {
            const sortedList = Object.entries(avatarOption.widgets).sort(
@@ -93,14 +94,11 @@ export default function ReactColorAvatar(props: IReactColorAvatarProps) {
        }
    }
     const shapeClassNames = getWrapperShapeClassName();
-    const trueShape = Object.keys(shapeClassNames).find((shape: any) => {
-        // TODO any type
-        // @ts-ignore
-        return shapeClassNames[shape];
+    const trueShape = Object.keys(shapeClassNames).find((shape: string) => {
+        return shapeClassNames[shape as WrapperShape];
     });
 
 
-
     return (
         <div className={`react-color-avatar ${trueShape}`} ref={colorAvatarRef} style={{ width: avatarSize, height: avatarSize, ...style }}>
             <Background color={avatarOption.background.color}/>

src/layouts/container/index.tsx

@@ -15,8 +15,7 @@ export default function Container(props: IProps) {
     const { avatarOption, setAvatarOption } = props;
     const [flipped, setFlipped] = useState(false);
     const [downloading, setDownloading] = useState(false);
-    // const [imageDataURL, setImageDataURL] = useState('');
-    const colorAvatarRef = useRef(null);
+    const colorAvatarRef = useRef<HTMLDivElement>(null);
     const onRandomAvatar = () => {
         if (Math.random() <= TRIGGER_PROBABILITY) {
             let colorfulOption = getSpecialAvatarOption()

src/layouts/footer/index.tsx

@@ -1,3 +1,4 @@
+import { version } from '../../../package.json';
 import './style.less'
 
 export default function Footer() {
@@ -20,6 +21,10 @@ export default function Footer() {
             <div className='divider'>|</div>
 
             <div className='locale' >简体中文</div>
+
+            <div className='divider'>|</div>
+
+            <div className='version' >{ version }</div>
         </footer>
     )
 }

src/store/index.ts

@@ -2,6 +2,7 @@ import { combineReducers, legacy_createStore } from 'redux';
 import { getRandomAvatarOption } from '@/utils';
 import { WrapperShape } from '@/enums';
 import { SCREEN } from '@/constants';
+import { ActionTypes } from '@/types';
 import { REDO, SET_AVATAR_OPTION, SET_SIDER_STATUS, UNDO } from './mutation-type';
 
 
@@ -16,7 +17,7 @@ const initialState = {
 };
 
 // Reducer
-const historyReducer = (state = initialState.history, action: any) => {
+const historyReducer = (state = initialState.history, action: ActionTypes) => {
     switch (action.type) {
         case SET_AVATAR_OPTION:
             return {
@@ -51,8 +52,7 @@ const historyReducer = (state = initialState.history, action: any) => {
     }
 };
 
-const isSiderCollapsedReducer = (state = initialState.isCollapsed, action: any) => {
-    // TOOD any类型
+const isSiderBarCollapsedReducer = (state = initialState.isCollapsed, action: ActionTypes) => {
     switch (action.type) {
         case SET_SIDER_STATUS:
             return action.payload;
@@ -64,7 +64,7 @@ const isSiderCollapsedReducer = (state = initialState.isCollapsed, action: any)
 // Combine Reducers
 const rootReducer = combineReducers({
     history: historyReducer,
-    isCollapsed: isSiderCollapsedReducer,
+    isCollapsed: isSiderBarCollapsedReducer,
 });
 const store = legacy_createStore(rootReducer);
 // Store

src/types/index.ts

@@ -14,6 +14,7 @@ import {
     type TopsShape,
     type WrapperShape,
 } from '@/enums'
+import { REDO, SET_AVATAR_OPTION, SET_SIDER_STATUS, UNDO } from '@/store/mutation-type';
 
 export type None = typeof NONE
 
@@ -80,3 +81,9 @@ export interface AppState {
     }
     isCollapsed: boolean
 }
+
+// reducer action type
+export type ActionTypes = {
+    type: typeof REDO | typeof SET_AVATAR_OPTION | typeof SET_SIDER_STATUS | typeof UNDO,
+    payload: boolean
+};

src/utils/dynamic-data.ts

@@ -11,7 +11,7 @@ import {
     NoseShape,
     TopsShape,
     WidgetType,
-} from '../enums'
+} from '@/enums'
 
 /** @internal */
 type Data = Readonly<{