.husky/commit-msg
javascript
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
yarn commitlint --edit $1
.vscode/settings.json
javascript
"ahooks",
"aliyuncs",
"antd",
"commitlint", // 新增
"deadcode",
"denormalize",
"echarts",
"EDITMSG", // 新增
"favicons",
"iconfont",
"IIFE",
commitlint.config.ts
javascript
import type { UserConfig } from '@commitlint/types';
import { RuleConfigSeverity } from '@commitlint/types';
import dotenv from 'dotenv';
import fs from 'fs';
import path from 'path';
dotenv.config({ path: path.resolve(__dirname, '.env.local') });
const Configuration: UserConfig = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-case': [RuleConfigSeverity.Error, 'always', ['lower-case']],
'type-enum': [RuleConfigSeverity.Error, 'always', ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'build', 'ci', 'chore', 'revert']],
'subject-rule': [RuleConfigSeverity.Error, 'always']
},
plugins: [
{
rules: {
'type-enum': ({ type }) => {
const typeList = ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'build', 'ci', 'chore', 'revert'];
return [typeList.includes(type || ''), `类型错误,只允许提交类型为【${typeList}】的 commit, 例如:feat: 【1112223334445556667】xxx`];
},
'subject-rule': ({ type, subject }) => {
let _subject = subject || '';
const regRex = /^【[0-9]{19}】(?!\s*$).+/;
if (process.env.TASK_NO && !regRex.test(_subject)) {
const commitEditMsgPath = path.resolve(process.cwd(), '.git', 'COMMIT_EDITMSG');
const commitMsgContent = fs.readFileSync(commitEditMsgPath, 'utf-8');
const lines = commitMsgContent.split('\n');
_subject = `【${process.env.TASK_NO}】${subject}`;
if (lines.length > 0) {
lines[0] = `${type}: ${_subject}`;
}
fs.writeFileSync(commitEditMsgPath, lines.join('\n'));
}
return [regRex.test(_subject), '提交格式不符合规范,需要包含19位任务ID,且包含基础的 commit 信息, 例如:feat: 【1112223334445556667】xxx'];
}
}
}
]
};
export default Configuration;
package.json
javascript
"devDependencies": {
"@commitlint/cli": "^17.8.1", // 新增
"@commitlint/config-conventional": "^17.8.1", // 新增
"@types/lodash": "^4.14.202",
"@types/node": "^20.11.6",
"@types/react": "^18.0.33",
"@types/react-dom": "^18.0.11",
"chalk": "^4.1.2",
"cross-env": "^7.0.3",
"dotenv": "^16.4.5", // 新增
"eslint": "^8.54.0",
"eslint-config-prettier": "^9.0.0",
"eslint-import-resolver-alias": "^1.1.2",
...
}
.env.local
javascript
# .env 的本地版本,这里配置的环境变量会覆盖 .env 中的变量。
APP_ENV=sz-test1
# APP_ENV=sz-dev
# TASK_NO=1788498654317685432
TASK="[{"release/2024-07-18" : "1807622818796223578"}]"
.env
javascript
# 对应测试环境,值从 config/server.ts 中的 key 中选
# 开发时请在本地根目录新建一个 `.env.local` 文件,自行修改为需要的开发环境
# APP_ENV=sz-test
# 多语言相关接口的域名。
# 各环境统一走 生产jk.cc.cn 域名(环境由接口的env参数做区分)
# 这个值基本不会动,除非服务端需要调试特定环境的多语言接口。
# 在使用时:
# 1. 当 APP_ENV=production 时,不使用当前变量,固定走生产的域名 jk.cc.cn。
# 2. 测试环境用当前变量指定的域名,而不是随环境对应的域名。
# 3. 本地开发会忽略该变量,走本地开发域名以mock本地语料
# 自动添加任务编号到 Commit, TASK_NO 根据自己要求填写
# TASK_NO=1803607484162225644
README.md
markup
# 运营平台前端项目
## yarn
- 统一使用 yarn 作为包管理工具
## 配置本地开发环境
- 切换环境请按 `.env` 中关于 `APP_ENV` 的注释,在`.env.local` 中配置 `APP_ENV` 变量区分连接的环境。
- `yarn install` 时会自动创建一个空白的 `.env.local` 文件
## 代码校验
macos用户,需要在 `yarn install`之后,于项目目录下执行下面两行命令。使 husky 生效。
```sh
chmod ug+x .husky/*
chmod ug+x .git/hooks/*
UI库
- 依赖antd 4.24.x版本,但是不要直接从antd引入, UI相关的组件从核心库引入
js
// 错误引入方式:
import { Button } from 'antd';
// 正确引入方式
import { Button } from '@/component';
权限
- 抛弃umi的authority配置。菜单直接在路由里面配置权限code,具体权限code是什么,需要找后端
开发须知
- 请运行:
git config --global core.autocrlf false
去除 git 进入暂存区时自动转换为crlf
- 请运行:
git config --global core.ignorecase false
去除 git 忽略大小写 - 编辑器必须开启 eslint 检测和保存自动修复功能(具体配置详细看:编辑器配置 Eslint)
- master 是主分支,feature+版本号是开发分支,release+版本号是预发布分支
- 统一使用 yarn 作为包管理工具
野火本地开发
- 修改 hosts
txt
172.22.3.196 im.jk.cn
不同环境 ip 不同
business 和 test 服务修改 hosts 即可成功连接本地联调只有 workdev 环境可连接成功 ( 请求头 Origin 为 localhost 造成连接失败, 连接非 dev 的服务连接会被拒绝 )
其他
参考umi开发文档 Umi
styled-components 使用方法
基础
typescript
// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: #BF4F74;
`;
// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
// Use Title and Wrapper like any other React component -- except they're styled!
render(
<Wrapper>
<Title>
Hello World!
</Title>
</Wrapper>
);
根据属性进行调整
typescript
const Button = styled.button<{ $primary?: boolean; }>`
/* Adapt the colors based on primary prop */
background: ${props => props.$primary ? "#BF4F74" : "white"};
color: ${props => props.$primary ? "white" : "#BF4F74"};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid #BF4F74;
border-radius: 3px;
`;
render(
<div>
<Button>Normal</Button>
<Button $primary>Primary</Button>
</div>
);
扩展样式
typescript
// The Button from the last section without the interpolations
const Button = styled.button`
color: #BF4F74;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid #BF4F74;
border-radius: 3px;
`;
// A new component based on Button, but with some override styles
const TomatoButton = styled(Button)`
color: tomato;
border-color: tomato;
`;
render(
<div>
<Button>Normal Button</Button>
<TomatoButton>Tomato Button</TomatoButton>
</div>
);
伪元素、伪选择器和嵌套
typescript
const Thing = styled.div.attrs((/* props */) => ({ tabIndex: 0 }))`
color: blue;
&:hover {
color: red; // <Thing> when hovered
}
& ~ & {
background: tomato; // <Thing> as a sibling of <Thing>, but maybe not directly next to it
}
& + & {
background: lime; // <Thing> next to <Thing>
}
&.something {
background: orange; // <Thing> tagged with an additional CSS class ".something"
}
.something-else & {
border: 1px solid; // <Thing> inside another element labeled ".something-else"
}
`
render(
<React.Fragment>
<Thing>Hello world!</Thing>
<Thing>How ya doing?</Thing>
<Thing className="something">The sun is shining...</Thing>
<div>Pretty nice day today.</div>
<Thing>Don't you think?</Thing>
<div className="something-else">
<Thing>Splendid.</Thing>
</div>
</React.Fragment>
);
强制样式提升
typescript
const Thing = styled.div`
&& {
color: blue;
}
`
const GlobalStyle = createGlobalStyle`
div${Thing} {
color: red;
}
`
render(
<React.Fragment>
<GlobalStyle />
<Thing>
I'm blue, da ba dee da ba daa
</Thing>
</React.Fragment>
)