[add] first init
This commit is contained in:
366
.eslintrc.json
Normal file
366
.eslintrc.json
Normal file
@@ -0,0 +1,366 @@
|
|||||||
|
{
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"es2021": true,
|
||||||
|
"jest": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"eslint:recommended",
|
||||||
|
"plugin:react/recommended",
|
||||||
|
"plugin:@typescript-eslint/recommended"
|
||||||
|
],
|
||||||
|
"overrides": [],
|
||||||
|
"parser": "@typescript-eslint/parser",
|
||||||
|
"parserOptions": {
|
||||||
|
"ecmaFeatures": {
|
||||||
|
"jsx": true
|
||||||
|
},
|
||||||
|
"ecmaVersion": "latest",
|
||||||
|
"sourceType": "module"
|
||||||
|
},
|
||||||
|
"plugins": [
|
||||||
|
"react",
|
||||||
|
"@typescript-eslint",
|
||||||
|
"react-hooks"
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
"no-alert": 0, //禁止使用alert confirm prompt
|
||||||
|
"no-bitwise": 0, //禁止使用按位运算符
|
||||||
|
"no-console": "off", //禁止使用console
|
||||||
|
"no-continue": 0, //禁止使用continue
|
||||||
|
"no-debugger": 2, //禁止使用debugger
|
||||||
|
"no-delete-var": 2, //不能对var声明的变量使用delete操作符
|
||||||
|
"no-div-regex": 1, //不能使用看起来像除法的正则表达式/=foo/
|
||||||
|
"no-dupe-args": 2, //函数参数不能重复
|
||||||
|
"no-duplicate-case": 2, //switch中的case标签不能重复
|
||||||
|
"no-else-return": "off", //如果if语句里面有return,后面不能跟else语句
|
||||||
|
"no-empty-label": "off", //禁止使用空label
|
||||||
|
"no-eq-null": "off", //禁止对null使用==或!=运算符
|
||||||
|
"no-extend-native": "off", //禁止扩展native对象
|
||||||
|
"no-extra-parens": "off", //禁止非必要的括号
|
||||||
|
"no-extra-semi": 2, //禁止多余的冒号
|
||||||
|
"no-floating-decimal": 2, //禁止省略浮点数中的0 .5 3.
|
||||||
|
"no-implicit-coercion": "off", //禁止隐式转换
|
||||||
|
"no-inline-comments": 0, //禁止行内备注
|
||||||
|
"no-invalid-this": 2, //禁止无效的this，只能用在构造器，类，对象字面量
|
||||||
|
"no-iterator": 2, //禁止使用__iterator__ 属性
|
||||||
|
"no-lonely-if": "off", //禁止else语句内只有if语句
|
||||||
|
"no-mixed-requires": [
|
||||||
|
0,
|
||||||
|
false
|
||||||
|
], //声明时不能混用声明类型
|
||||||
|
"no-mixed-spaces-and-tabs": "off", //禁止混用tab和空格
|
||||||
|
"no-multiple-empty-lines": [
|
||||||
|
1,
|
||||||
|
{
|
||||||
|
"max": 2
|
||||||
|
}
|
||||||
|
], //空行最多不能超过2行
|
||||||
|
"no-nested-ternary": 0, //禁止使用嵌套的三目运算
|
||||||
|
"no-new": "off", //禁止在使用new构造一个实例后不赋值
|
||||||
|
"no-new-require": 2, //禁止使用new require
|
||||||
|
"no-param-reassign": "off", //禁止给参数重新赋值
|
||||||
|
"no-path-concat": 0, //node中不能使用__dirname或__filename做路径拼接
|
||||||
|
"no-plusplus": 0, //禁止使用++，--
|
||||||
|
"no-process-env": 0, //禁止使用process.env
|
||||||
|
"no-process-exit": 0, //禁止使用process.exit()
|
||||||
|
"no-redeclare": "off", //禁止重复声明变量
|
||||||
|
"no-restricted-modules": 0, //如果禁用了指定模块，使用就会报错
|
||||||
|
"no-return-assign": "off", //return 语句中不能有赋值表达式
|
||||||
|
"no-self-compare": 2, //不能比较自身
|
||||||
|
"no-sequences": 0, //禁止使用逗号运算符
|
||||||
|
"no-shadow": "off", //外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
|
||||||
|
"no-sync": 0, //nodejs 禁止同步方法
|
||||||
|
"no-ternary": 0, //禁止使用三目运算符
|
||||||
|
"no-this-before-super": 0, //在调用super()之前不能使用this或super
|
||||||
|
"no-throw-literal": 2, //禁止抛出字面量错误 throw "error";
|
||||||
|
"no-undef": "off", //不能有未定义的变量
|
||||||
|
"no-undef-init": "off", //变量初始化时不能直接给它赋值为undefined
|
||||||
|
"no-undefined": "off", //不能使用undefined
|
||||||
|
"no-unexpected-multiline": 2, //避免多行表达式
|
||||||
|
"no-underscore-dangle": "off", //标识符不能以_开头或结尾
|
||||||
|
"no-unneeded-ternary": 2, //禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
|
||||||
|
"no-unused-expressions": "off", //禁止无用的表达式
|
||||||
|
"no-unused-vars": "off", //不能有声明后未被使用的变量或参数
|
||||||
|
"no-use-before-define": "off", //未定义前不能使用
|
||||||
|
"no-useless-call": "off", //禁止不必要的call和apply
|
||||||
|
"no-void": "off", //禁用void操作符
|
||||||
|
"no-var": 0, //禁用var，用let和const代替
|
||||||
|
"no-warning-comments": "off", //不能有警告备注
|
||||||
|
"no-array-constructor": "error", // 禁止使用数组构造器
|
||||||
|
"no-caller": "error", // 禁止使用arguments.caller或arguments.callee
|
||||||
|
"no-catch-shadow": "error", // 禁止catch子句参数与外部作用域变量同名
|
||||||
|
"no-class-assign": "error", // 禁止给类赋值
|
||||||
|
"no-cond-assign": [
|
||||||
|
"error",
|
||||||
|
"except-parens"
|
||||||
|
], // 禁止在条件表达式中使用赋值语句
|
||||||
|
"no-constant-condition": "error", // 禁止在条件中使用常量表达式 if(true) if(1)
|
||||||
|
"no-control-regex": "error", // 禁止在正则表达式中使用控制字符
|
||||||
|
"no-dupe-keys": "error", // 在创建对象字面量时不允许键重复 {a: 1, a: 1}
|
||||||
|
"no-empty": "error", // 块语句中的内容不能为空
|
||||||
|
"no-empty-character-class": "error", // 正则表达式中的[]内容不能为空
|
||||||
|
"no-eval": "error", // 禁止使用eval
|
||||||
|
"no-ex-assign": "error", // 禁止给catch语句中的异常参数赋值
|
||||||
|
"no-extra-bind": "error", // 禁止不必要的函数绑定
|
||||||
|
"no-extra-boolean-cast": "off", // 禁止不必要的bool转换
|
||||||
|
"no-fallthrough": "error", // 禁止switch穿透
|
||||||
|
"no-func-assign": "error", // 禁止重复的函数声明
|
||||||
|
"no-implied-eval": "error", // 禁止使用隐式eval
|
||||||
|
"no-inner-declarations": "off", // 禁止在块语句中使用声明函数
|
||||||
|
"no-invalid-regexp": "error", // 禁止无效的正则表达式
|
||||||
|
"no-irregular-whitespace": "error", // 不能有不规则的空格
|
||||||
|
"no-label-var": "error", // label名不能与var声明的变量名相同
|
||||||
|
"no-labels": "error", // 禁止标签声明
|
||||||
|
"no-lone-blocks": "error", // 禁止不必要的嵌套块
|
||||||
|
"no-loop-func": "error", // 禁止在循环中使用函数（如果没有引用外部变量不形成闭包就可以）
|
||||||
|
"no-multi-spaces": "error", // 不能用多余的空格
|
||||||
|
"no-multi-str": "error", // 字符串不能用\换行
|
||||||
|
"no-native-reassign": "error", // 不能重写native对象
|
||||||
|
"no-negated-in-lhs": "error", // in 操作符的左边不能有!
|
||||||
|
"no-new-func": "error", // 禁止使用new Function
|
||||||
|
"no-new-object": "error", // 禁止使用new Object()
|
||||||
|
"no-new-wrappers": "error", // 禁止使用new创建包装实例，new String new Boolean new Number
|
||||||
|
"no-obj-calls": "error", // 不能调用内置的全局对象，比如Math() JSON()
|
||||||
|
"no-octal": "error", // 禁止使用八进制数字(因为八进制数字以0开头)
|
||||||
|
"no-octal-escape": "error", // 禁止使用八进制转义序列
|
||||||
|
"no-proto": "error", // 禁止使用__proto__属性(按照标准，__proto__为私有属性，不应公开)
|
||||||
|
"no-regex-spaces": "error", // 禁止在正则表达式字面量中使用多个空格 /foo bar/
|
||||||
|
"no-script-url": "off", // 禁止使用javascript:void(0)
|
||||||
|
"no-shadow-restricted-names": "error", // 严格模式中规定的限制标识符不能作为声明时的变量名使用
|
||||||
|
"no-spaced-func": "error", // 函数调用时 函数名与()之间不能有空格
|
||||||
|
"no-sparse-arrays": "error", // 禁止稀疏数组， [1,,2]
|
||||||
|
"no-trailing-spaces": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
"skipBlankLines": true
|
||||||
|
}
|
||||||
|
], // 一行结束后面不要有空格( 空白行忽略 )
|
||||||
|
"no-unreachable": "error", // 不能有无法执行的代码
|
||||||
|
"no-const-assign": "error", // 禁止修改const声明的变量
|
||||||
|
"no-with": "error", // 禁用with
|
||||||
|
"comma-dangle": "off", // 数组或对象最后不允许出现多余的逗号
|
||||||
|
"comma-spacing": "error", // 逗号前面不允许有空格，后面还有东西的时候必须有一个空格
|
||||||
|
"curly": [
|
||||||
|
"error",
|
||||||
|
"multi-line"
|
||||||
|
], // 块级代码需要换行的时候必须使用 {}将代码裹起来
|
||||||
|
"eqeqeq": "off", // 必须使用全等
|
||||||
|
"indent": [
|
||||||
|
"off",
|
||||||
|
"tab",
|
||||||
|
{
|
||||||
|
"SwitchCase": 1
|
||||||
|
}
|
||||||
|
], // 缩进用tab
|
||||||
|
"key-spacing": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
"beforeColon": false,
|
||||||
|
"afterColon": true
|
||||||
|
}
|
||||||
|
], // 对象字面量中冒号的后面必须有空格，前面不允许有空格
|
||||||
|
"keyword-spacing": "off", // 关键字前后必须存在空格
|
||||||
|
"new-parens": "error", // new时必须加小括号 const person = new Person();
|
||||||
|
"quotes": [
|
||||||
|
"error",
|
||||||
|
"double",
|
||||||
|
{
|
||||||
|
"allowTemplateLiterals": true
|
||||||
|
}
|
||||||
|
], // 引号类型 ''
|
||||||
|
"semi": [
|
||||||
|
"error",
|
||||||
|
"always"
|
||||||
|
], // 语句必须分号结尾
|
||||||
|
"semi-spacing": [
|
||||||
|
0,
|
||||||
|
{
|
||||||
|
"before": false,
|
||||||
|
"after": true
|
||||||
|
}
|
||||||
|
], // 分号前面不允许有空格，后面有其他东西的时候必须空一空格
|
||||||
|
"space-before-blocks": [
|
||||||
|
"error",
|
||||||
|
"always"
|
||||||
|
], // 不以新行开始的块 { 前面要有空格
|
||||||
|
// "space-before-function-paren": ["error", "never"], // 函数定义时括号前面不允许有空格
|
||||||
|
"space-infix-ops": "error", // 中缀操作符周围必须有空格 a + b
|
||||||
|
"space-unary-ops": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
"words": true,
|
||||||
|
"nonwords": false
|
||||||
|
}
|
||||||
|
], // 一元运算符的前/后如果是单词则空一空格，如果是运算符则不需要空空格 new Foo √ 1++ √
|
||||||
|
// "spaced-comment": ["error", "always", { "markers": ["*!"] }], // 注释风格， 双斜杠后面空一格空格再写注释
|
||||||
|
"strict": [
|
||||||
|
"error",
|
||||||
|
"global"
|
||||||
|
], // 使用全局严格模式
|
||||||
|
"use-isnan": "error", // 禁止比较时使用NaN，只能用isNaN()
|
||||||
|
"arrow-parens": 0, //箭头函数用小括号括起来
|
||||||
|
"arrow-spacing": 0, //=>的前/后括号
|
||||||
|
"accessor-pairs": 0, //在对象中使用getter/setter
|
||||||
|
"block-scoped-var": 0, //块语句中使用var
|
||||||
|
"brace-style": "off", //大括号风格
|
||||||
|
"callback-return": "off", //避免多次调用回调什么的
|
||||||
|
"comma-style": [
|
||||||
|
"error",
|
||||||
|
"last"
|
||||||
|
], //逗号风格，换行时在行首还是行尾
|
||||||
|
"complexity": [
|
||||||
|
0,
|
||||||
|
11
|
||||||
|
], //循环复杂度
|
||||||
|
"computed-property-spacing": [
|
||||||
|
0,
|
||||||
|
"never"
|
||||||
|
], //是否允许计算后的键名什么的
|
||||||
|
"consistent-return": 0, //return 后面是否允许省略
|
||||||
|
"consistent-this": "off", //this别名
|
||||||
|
"constructor-super": 0, //非派生类不能调用super，派生类必须调用super
|
||||||
|
"default-case": "off", //switch语句最后必须有default
|
||||||
|
"dot-location": 0, //对象访问符的位置，换行的时候在行首还是行尾
|
||||||
|
"dot-notation": [
|
||||||
|
0,
|
||||||
|
{
|
||||||
|
"allowKeywords": true
|
||||||
|
}
|
||||||
|
], //避免不必要的方括号
|
||||||
|
"eol-last": 0, //文件以单一的换行符结束
|
||||||
|
"func-names": 0, //函数表达式必须有名字
|
||||||
|
"func-style": [
|
||||||
|
0,
|
||||||
|
"declaration"
|
||||||
|
], //函数风格，规定只能使用函数声明/函数表达式
|
||||||
|
"generator-star-spacing": 0, //生成器函数*的前后空格
|
||||||
|
"guard-for-in": 0, //for in循环要用if语句过滤
|
||||||
|
"handle-callback-err": 0, //nodejs 处理错误
|
||||||
|
"id-length": 0, //变量名长度
|
||||||
|
"init-declarations": 0, //声明时必须赋初值
|
||||||
|
"lines-around-comment": 0, //行前/行后备注
|
||||||
|
"max-depth": [
|
||||||
|
0,
|
||||||
|
4
|
||||||
|
], //嵌套块深度
|
||||||
|
"max-len": [
|
||||||
|
0,
|
||||||
|
80,
|
||||||
|
4
|
||||||
|
], //字符串最大长度
|
||||||
|
"max-nested-callbacks": [
|
||||||
|
0,
|
||||||
|
2
|
||||||
|
], //回调嵌套深度
|
||||||
|
"max-params": [
|
||||||
|
0,
|
||||||
|
3
|
||||||
|
], //函数最多只能有3个参数
|
||||||
|
"max-statements": [
|
||||||
|
0,
|
||||||
|
10
|
||||||
|
], //函数内最多有几个声明
|
||||||
|
"new-cap": "off", //函数名首行大写必须使用new方式调用，首行小写必须用不带new方式调用
|
||||||
|
"newline-after-var": "off", //变量声明后是否需要空一行
|
||||||
|
"object-shorthand": 0, //强制对象字面量缩写语法
|
||||||
|
"one-var": "off", //连续声明
|
||||||
|
"operator-assignment": [
|
||||||
|
0,
|
||||||
|
"always"
|
||||||
|
], //赋值运算符 += -=什么的
|
||||||
|
"operator-linebreak": "off", //换行时运算符在行尾还是行首
|
||||||
|
"padded-blocks": 0, //块语句内行首行尾是否要空行
|
||||||
|
"prefer-spread": 0, //首选展开运算
|
||||||
|
"prefer-reflect": 0, //首选Reflect的方法
|
||||||
|
"quote-props": "off", //对象字面量中的属性名是否强制双引号
|
||||||
|
"radix": "off", //parseInt必须指定第二个参数
|
||||||
|
"id-match": 0, //命名检测
|
||||||
|
"sort-vars": 0, //变量声明时排序
|
||||||
|
"space-after-keywords": [
|
||||||
|
0,
|
||||||
|
"always"
|
||||||
|
], //关键字后面是否要空一格
|
||||||
|
"space-before-function-paren": [
|
||||||
|
0,
|
||||||
|
"always"
|
||||||
|
], //函数定义时括号前面要不要有空格
|
||||||
|
"space-in-parens": [
|
||||||
|
0,
|
||||||
|
"never"
|
||||||
|
], //小括号里面要不要有空格
|
||||||
|
"space-return-throw-case": "off", //return throw case后面要不要加空格
|
||||||
|
"spaced-comment": 0, //注释风格不要有空格什么的
|
||||||
|
"valid-jsdoc": 0, //jsdoc规则
|
||||||
|
"valid-typeof": "error", //必须使用合法的typeof的值
|
||||||
|
"vars-on-top": "error", //var必须放在作用域顶部
|
||||||
|
"wrap-iife": [
|
||||||
|
"error",
|
||||||
|
"inside"
|
||||||
|
], //立即执行函数表达式的小括号风格
|
||||||
|
"wrap-regex": 0, //正则表达式字面量用小括号包起来
|
||||||
|
"yoda": [
|
||||||
|
"error",
|
||||||
|
"never"
|
||||||
|
], //禁止尤达条件
|
||||||
|
"linebreak-style": [
|
||||||
|
0,
|
||||||
|
"windows"
|
||||||
|
], //换行风格
|
||||||
|
"array-bracket-spacing": [
|
||||||
|
2,
|
||||||
|
"never"
|
||||||
|
], //是否允许非空数组里面有多余的空格
|
||||||
|
"react/react-in-jsx-scope": "off",
|
||||||
|
"camelcase": "off",
|
||||||
|
"block-spacing": "error",
|
||||||
|
"no-duplicate-imports": "error",
|
||||||
|
"require-yield": "off",
|
||||||
|
"prefer-const": "off",
|
||||||
|
"object-curly-spacing": [
|
||||||
|
"error",
|
||||||
|
"always"
|
||||||
|
],
|
||||||
|
"react/jsx-curly-spacing": [
|
||||||
|
"error",
|
||||||
|
"never"
|
||||||
|
],
|
||||||
|
"@typescript-eslint/no-namespace": "off",
|
||||||
|
"@typescript-eslint/no-inferrable-types": "off",
|
||||||
|
"@typescript-eslint/no-explicit-any": "off",
|
||||||
|
"@typescript-eslint/no-empty-function": "off",
|
||||||
|
"@typescript-eslint/ban-ts-comment": "off",
|
||||||
|
"@typescript-eslint/prefer-namespace-keyword": "off",
|
||||||
|
"@typescript-eslint/ban-types": "off",
|
||||||
|
"@typescript-eslint/no-this-alias": "off",
|
||||||
|
"@typescript-eslint/no-empty-interface": "off",
|
||||||
|
"@typescript-eslint/no-unused-vars": "off",
|
||||||
|
"@typescript-eslint/explicit-function-return-type": [
|
||||||
|
"off",
|
||||||
|
{
|
||||||
|
"allowExpressions": true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"@typescript-eslint/typedef": [
|
||||||
|
"warn",
|
||||||
|
{
|
||||||
|
"arrayDestructuring": false,
|
||||||
|
"arrowParameter": false,
|
||||||
|
"objectDestructuring": false,
|
||||||
|
"memberVariableDeclaration": true,
|
||||||
|
"parameter": true,
|
||||||
|
"propertyDeclaration": true,
|
||||||
|
"variableDeclaration": false,
|
||||||
|
"variableDeclarationIgnoreFunction": true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"settings": {
|
||||||
|
"import/resolver": {
|
||||||
|
"typescript": {}
|
||||||
|
},
|
||||||
|
"react": {
|
||||||
|
"version": "detect"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
30
README.md
Normal file
30
README.md
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
# React + TypeScript + Vite
|
||||||
|
|
||||||
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||||
|
|
||||||
|
Currently, two official plugins are available:
|
||||||
|
|
||||||
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||||
|
|
||||||
|
## Expanding the ESLint configuration
|
||||||
|
|
||||||
|
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
|
||||||
|
|
||||||
|
- Configure the top-level `parserOptions` property like this:
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
// other rules...
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 'latest',
|
||||||
|
sourceType: 'module',
|
||||||
|
project: ['./tsconfig.json', './tsconfig.node.json'],
|
||||||
|
tsconfigRootDir: __dirname,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
|
||||||
|
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
|
||||||
|
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
|
||||||
16
index.html
Normal file
16
index.html
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" href="./favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>羽球團</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="./src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
4361
package-lock.json
generated
Normal file
4361
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
34
package.json
Normal file
34
package.json
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
{
|
||||||
|
"name": "badminton",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"start": "npm run dev",
|
||||||
|
"dev": "vite --host --port 5000",
|
||||||
|
"build": "tsc && vite build",
|
||||||
|
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"antd": "^5.17.0",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-router-dom": "^6.23.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^20.12.11",
|
||||||
|
"@types/react": "^18.2.66",
|
||||||
|
"@types/react-dom": "^18.2.22",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^7.2.0",
|
||||||
|
"@typescript-eslint/parser": "^7.2.0",
|
||||||
|
"@vitejs/plugin-react": "^4.2.1",
|
||||||
|
"axios": "^1.6.8",
|
||||||
|
"dayjs": "^1.11.11",
|
||||||
|
"eslint": "^8.57.0",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.6",
|
||||||
|
"typescript": "^5.2.2",
|
||||||
|
"vite": "^5.2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
8
src/App.css
Normal file
8
src/App.css
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
table {
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
table th,
|
||||||
|
table td {
|
||||||
|
border: 1px solid black; /* 設置列邊框寬度和顏色 */
|
||||||
|
}
|
||||||
116
src/App.tsx
Normal file
116
src/App.tsx
Normal file
@@ -0,0 +1,116 @@
|
|||||||
|
import { Pagination } from 'antd';
|
||||||
|
import axios from 'axios';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { NavigateFunction, useNavigate } from "react-router-dom";
|
||||||
|
import './App.css';
|
||||||
|
import A from './Components/CustomA';
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
const navigate: NavigateFunction = useNavigate();
|
||||||
|
const [current, setCurrent] = useState(1);
|
||||||
|
const [totalDataLength, setTotalDataLength] = useState(50)
|
||||||
|
const [data, setData] = useState<any[][]>([[]])
|
||||||
|
const [showData, setShowData] = useState([])
|
||||||
|
|
||||||
|
function onChange(page: number): void {
|
||||||
|
setCurrent(page);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onClickPlay(data: any): void {
|
||||||
|
navigate(`/play/${data.id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getList(): void {
|
||||||
|
if (data[current]) {
|
||||||
|
setShowData(data[current])
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const reqData = JSON.stringify({
|
||||||
|
"page": current
|
||||||
|
});
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
method: 'post',
|
||||||
|
maxBodyLength: Infinity,
|
||||||
|
url: 'https://jianmiau.tk:21880/Badminton/gethistory',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
data: reqData
|
||||||
|
};
|
||||||
|
|
||||||
|
axios.request(config)
|
||||||
|
.then((response) => {
|
||||||
|
setData((value: any[][]) => {
|
||||||
|
value[current] = response.data;
|
||||||
|
setShowData(response.data)
|
||||||
|
return value;
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log(error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getListPage(): void {
|
||||||
|
const config = {
|
||||||
|
method: 'post',
|
||||||
|
maxBodyLength: Infinity,
|
||||||
|
url: 'https://jianmiau.tk:21880/Badminton/gethistorypage',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
axios.request(config)
|
||||||
|
.then((response) => {
|
||||||
|
setTotalDataLength(response.data[0].count);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error(error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
document.title = "羽球團"
|
||||||
|
getListPage();
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getList();
|
||||||
|
}, [current])
|
||||||
|
|
||||||
|
return <>
|
||||||
|
{showData.length
|
||||||
|
? <>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>時間</th>
|
||||||
|
<th>分數</th>
|
||||||
|
<th>人員</th>
|
||||||
|
<th></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{showData.map((value: any, idx: number) => {
|
||||||
|
const score: number[] = JSON.parse(value.score);
|
||||||
|
const team: string[] = JSON.parse(value.team);
|
||||||
|
return <tr key={idx}>
|
||||||
|
<td>{dayjs(value.time * 1000).format("YYYY-MM-DD HH:mm:ss")}</td>
|
||||||
|
<td>{score[0]}：{score[1]}</td>
|
||||||
|
<td>{team[0][0].padEnd(5, " ")}{team[0][1].padEnd(5, " ")} vs {team[1][0].padEnd(5, " ")}{team[1][1]}</td>
|
||||||
|
<td>
|
||||||
|
<A href="#" onClick={() => onClickPlay(value)}>詳細</A></td>
|
||||||
|
</tr>
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<Pagination current={current} onChange={onChange} total={totalDataLength} hideOnSinglePage />
|
||||||
|
</>
|
||||||
|
: <></>
|
||||||
|
}
|
||||||
|
</>
|
||||||
|
}
|
||||||
21
src/Components/CustomA.tsx
Normal file
21
src/Components/CustomA.tsx
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import { AnchorHTMLAttributes } from "react";
|
||||||
|
|
||||||
|
/** 阻止a標籤的href產生網頁跳轉 */
|
||||||
|
export default function A(props: IAnchor): JSX.Element {
|
||||||
|
const { useref, children, onClick } = props;
|
||||||
|
|
||||||
|
function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
|
||||||
|
event.preventDefault(); // 阻止默认点击行为
|
||||||
|
onClick && onClick(event);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<a {...props} ref={useref} onClick={handleClick}>
|
||||||
|
{children}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IAnchor extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
||||||
|
useref?: React.LegacyRef<HTMLAnchorElement>
|
||||||
|
}
|
||||||
100
src/Play.tsx
Normal file
100
src/Play.tsx
Normal file
@@ -0,0 +1,100 @@
|
|||||||
|
import axios from 'axios';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { NavigateFunction, useNavigate, useParams } from "react-router-dom";
|
||||||
|
import './App.css';
|
||||||
|
import A from './Components/CustomA';
|
||||||
|
|
||||||
|
export default function Play() {
|
||||||
|
const navigate: NavigateFunction = useNavigate();
|
||||||
|
const { id } = useParams();
|
||||||
|
const [data, setData] = useState<any>(null)
|
||||||
|
const [team, setTeam] = useState<string[]>([])
|
||||||
|
const [winTeam, setWinTeam] = useState<string>("")
|
||||||
|
const [score, setScore] = useState<string>("")
|
||||||
|
const [scoreList, setScoreList] = useState([])
|
||||||
|
|
||||||
|
function onClickLobby(): void {
|
||||||
|
navigate(`/`);
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const data = JSON.stringify({
|
||||||
|
"id": id
|
||||||
|
});
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
method: 'post',
|
||||||
|
maxBodyLength: Infinity,
|
||||||
|
url: 'https://jianmiau.tk:21880/Badminton/gethistorybyid',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
data: data
|
||||||
|
};
|
||||||
|
|
||||||
|
axios.request(config)
|
||||||
|
.then((response) => {
|
||||||
|
// console.log(JSON.stringify(response.data));
|
||||||
|
const data: any = response.data[0];
|
||||||
|
setData(data);
|
||||||
|
document.title = dayjs(data.time * 1000).format("YYYY-MM-DD HH:mm:ss")
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log(error);
|
||||||
|
});
|
||||||
|
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (data) {
|
||||||
|
const score: number[] = JSON.parse(data.score);
|
||||||
|
const win: number = score.indexOf(data.winScore);
|
||||||
|
const team: string[] = JSON.parse(data.team).flat();
|
||||||
|
const winTeam: string[] = JSON.parse(data.team)[win];
|
||||||
|
const scoreList: number[] = JSON.parse(data.scoreList);
|
||||||
|
setTeam(team);
|
||||||
|
setWinTeam(winTeam[0] + "、" + winTeam[1]);
|
||||||
|
setScore(score[0] + "：" + score[1]);
|
||||||
|
setScoreList(scoreList);
|
||||||
|
}
|
||||||
|
}, [data])
|
||||||
|
|
||||||
|
return <>
|
||||||
|
<A href="#" onClick={onClickLobby}><h1>返回</h1></A>
|
||||||
|
<h1>{winTeam} 勝利</h1>
|
||||||
|
<h1>比分 {score}</h1>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<td colSpan={7} style={{ textAlign: "center" }}><h3>{team[0]}、{team[1]} vs {team[2]}、{team[3]}</h3></td>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>局數</th>
|
||||||
|
<th>連勝</th>
|
||||||
|
<th>得分</th>
|
||||||
|
<th>發球</th>
|
||||||
|
<th>發球</th>
|
||||||
|
<th>得分</th>
|
||||||
|
<th>連勝</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{scoreList.map((value: number[], idx: number) => {
|
||||||
|
const [round, starter, winCount, winner] = value;
|
||||||
|
return <tr key={idx}>
|
||||||
|
<td>{round}</td>
|
||||||
|
<td>{winCount && [0, 1].includes(starter) ? `${winCount}連勝` : ""}</td>
|
||||||
|
<td>{winner === 0 && "O"}</td>
|
||||||
|
<td>{[0, 1].includes(starter) ? team[starter] + " 發球" : ""}</td>
|
||||||
|
<td>{[2, 3].includes(starter) ? team[starter] + " 發球" : ""}</td>
|
||||||
|
<td>{winner === 1 && "O"}</td>
|
||||||
|
<td>{winCount && [2, 3].includes(starter) ? `${winCount}連勝` : ""}</td>
|
||||||
|
</tr>
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</>
|
||||||
|
}
|
||||||
68
src/index.css
Normal file
68
src/index.css
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
/* :root {
|
||||||
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
background-color: #242424;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #646cff;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #535bf2;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.2em;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 0.6em 1.2em;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: inherit;
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.25s;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
border-color: #646cff;
|
||||||
|
}
|
||||||
|
button:focus,
|
||||||
|
button:focus-visible {
|
||||||
|
outline: 4px auto -webkit-focus-ring-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
color: #213547;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #747bff;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
} */
|
||||||
25
src/main.tsx
Normal file
25
src/main.tsx
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
import type { Router } from "@remix-run/router";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
import "dayjs/locale/zh-tw";
|
||||||
|
import ReactDOM from 'react-dom/client';
|
||||||
|
import { RouterProvider, createHashRouter } from "react-router-dom";
|
||||||
|
import App from './App.tsx';
|
||||||
|
import Play from "./Play.tsx";
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
dayjs.locale("zh-tw");
|
||||||
|
|
||||||
|
const hashRouter: Router = createHashRouter([
|
||||||
|
{
|
||||||
|
path: "/",
|
||||||
|
element: <App />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/play/:id",
|
||||||
|
element: <Play />,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||||
|
<RouterProvider router={hashRouter} />
|
||||||
|
)
|
||||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
25
tsconfig.json
Normal file
25
tsconfig.json
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": false,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
11
tsconfig.node.json
Normal file
11
tsconfig.node.json
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"strict": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
8
vite.config.ts
Normal file
8
vite.config.ts
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
base: "./",
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user