Skip to content

Commit 4295266

Browse files
author
coderzi
committed
feat(v0): v0.2
1 parent c5d43fa commit 4295266

File tree

15 files changed

+29016
-29063
lines changed

15 files changed

+29016
-29063
lines changed

‎package-lock.json

Lines changed: 28621 additions & 28621 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/index.html

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,26 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.png" type="image/png" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<meta name="theme-color" content="#000000" />
8-
<meta
9-
name="description"
10-
content="Web site created using create-react-app"
11-
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<!--
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<link rel="icon" href="%PUBLIC_URL%/favicon.png" type="image/png" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<meta name="theme-color" content="#000000" />
9+
<meta name="description" content="Web site created using create-react-app" />
10+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
11+
<!--
1412
manifest.json provides metadata used when your web app is installed on a
1513
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1614
-->
17-
<!--<link rel=stylesheet
15+
<!--<link rel=stylesheet
1816
href=https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/codemirror.min.css>
1917
<link rel=stylesheet
2018
href=https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/theme/nord.min.css>
2119
<link rel=stylesheet
2220
href=https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/github.min.css>-->
23-
<link rel=stylesheet
24-
href=https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css>
25-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
26-
<!--
21+
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css>
22+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
23+
<!--
2724
Notice the use of %PUBLIC_URL% in the tags above.
2825
It will be replaced with the URL of the `public` folder during the build.
2926
Only files inside the `public` folder can be referenced from the HTML.
@@ -32,12 +29,13 @@
3229
work correctly both with client-side routing and a non-root public URL.
3330
Learn how to configure a non-root public URL by running `npm run build`.
3431
-->
35-
<title>React App</title>
36-
</head>
37-
<body>
38-
<noscript>You need to enable JavaScript to run this app.</noscript>
39-
<div id="root"></div>
40-
<!--
32+
<title>_coderzi</title>
33+
</head>
34+
35+
<body>
36+
<noscript>You need to enable JavaScript to run this app.</noscript>
37+
<div id="root"></div>
38+
<!--
4139
This HTML file is a template.
4240
If you open it directly in the browser, you will see an empty page.
4341
@@ -46,5 +44,7 @@
4644
4745
To begin the development, run `npm start` or `yarn start`.
4846
To create a production bundle, use `npm run build` or `yarn build`.
49-
--></body>
50-
</html>
47+
-->
48+
</body>
49+
50+
</html>

‎src/assets/doc/m.md

Lines changed: 19 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,25 @@
1+
- 贺子良/男
2+
- 本科/中南林业科技大学
3+
- 毕业时间:2019
4+
- 工作年限:4 年
15

6+
- 技术栈:`vue2` `vue3` `react` `angular`
27

8+
- Github:https://github.com/coderzii
39

4-
* 贺子良/男
5-
6-
* 本科/中南林业科技大学
7-
8-
* 毕业时间:2019
9-
10-
* 工作年限:3年
10+
- Tel:17091248698
11+
- 期望职位:Web 前端工程师
12+
- 期望薪资:面谈
1113

12-
* 技术栈:`vue2` `vue3` `react`
14+
- 居住地区:上海市闵行区
1315

14-
* Github:https://github.com/coderzii
16+
- 技能清单:
1517

16-
* Tel:17091248698
17-
18-
* 期望职位:Web前端工程师
19-
20-
* 期望薪资:面谈
21-
22-
* 居住地区:上海市浦东新区
23-
24-
* 技能清单:
25-
26-
- 熟练使用es6及es6+语法
27-
- 熟练使用react、vue2、vue3等框架,完成项目从0到1的搭建
28-
- 熟练掌握sass、less等预编译语言,开发遵守BEM命名规范
29-
- 熟练使用axios,、vue-router、vuex、pinia、react-router、redux-toolkit、styled-components等库
30-
- 熟练使用 element-ui、element-ui plus、ant-design for vue、vant、ant-design等ui组件库
31-
- 熟练搭建开发h5、pc 、后台管理系统等项目
32-
- 熟悉webpack、vite等构建工具; 熟悉Git代码管理工具;了解NodeJS、TypeScript
33-
- 具有完备的JS基础,有代码洁癖,开发注重代码质量,提升可维护性
34-
35-
* 一些补充:
36-
37-
- 此次寻找新的工作机会,主要是追求新的技术台阶和更快的技术成长
38-
- 性格温和,能在工作中保持学习的自驱力,热爱前端事业;
39-
- 喜欢尝试新技术,2021通过自学，主导尝试了vue3和react的项目开发。
40-
并且2022技术目标是NodeJS和TypeScript;
41-
- 此项目使用react、react-markdown完成,并通过gh-pages部署在github;
18+
- 熟练使用 es6 及 es6+语法
19+
- 熟练使用 angular、react、vue2、vue3 等框架,完成项目从 0 到 1 的搭建
20+
- 熟练掌握 sass、less 等预编译语言,开发遵守 BEM 命名规范
21+
- 熟练使用 axios、vue-router、vuex、pinia、react-router、redux-toolkit、styled-components 等库
22+
- 熟练使用 element-ui、element-ui plus、ant-design for vue、vant、ant-design 等 ui 组件库
23+
- 熟练搭建开发 app、h5、pc 、后台管理系统等项目
24+
- 熟悉 webpack、vite 等构建工具; 熟悉 Git 代码管理工具;了解 NodeJS、TypeScript
25+
- 具有完备的 JS 基础,有代码洁癖,开发注重代码质量,提升可维护性

‎src/assets/doc/p1.md

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,13 @@
1+
### [星潮]运营后台管理系统
12

2-
### [Buykop Admin 后台管理系统](https://oms.prd.buykop.com/)
3+
- 开发周期: 2022/04 - 2022/12
34

4-
* 开发周期: 2022/02 - 2022/02
5-
6-
* 技术栈: `vue2` `vue-router` `vuex` `element-ui` `sass`
7-
8-
* 概览: 此项目作为独立站的后台管理系统,承担了商家管理独立站前台网站的功能。此项目主要包括登录注册、商品管理、订单管理、评价管理、模板配置、营销数据、商店设置、用户设置、店铺管理等功能页面。
9-
10-
* 初期，我主要负责了此项目基于架构层面的整体重构，搭建项目框架工作，中后期则是团队内各模块的协同开发。此项目技术栈基于vue2+element-ui，结合业务特点，部分实现如下:
11-
12-
- 使用 webpak `require.context` api,实现了 `/components/global` 下组件全局注册自动化;
13-
- `permission.js` 下通过全局路由守卫BeforeEach,实现登录鉴权、退出登录的缓存清除等系列操作;
14-
- `request.js` 下封装axios实例,实现请求拦截器里的header配置和响应拦截器的错误捕获无权限处理等操作;
15-
- 基于 `el-upload` 组件二次封装,实现图片批量上传、拖动排序以及结合 `aliyun-oss-sdk` 的视频上传等功能;
16-
- 基于 `el-tree`, `el-select`, `el-input`,实现支持树形结构菜单的自定义操作(增删改)组件;
17-
- 基于项目结构,书写了 `README.md` 文档,主要包括项目的结构目录、功能模块的说明和代码的风格规范;
5+
- 技术栈: `vue3` `vue-router` `pinia` `element-ui` `sass`
186

7+
- 概览: 此项目供运营团队使用，其中个人中心、商品管理、订单管理和配置管理等模块，提供了基础的电商运营管理功能;除此之外，资料库提供了潮玩商品各维度属性的分类管理。
8+
- 1、基于后端控制的权限模式,实现了页面和按钮层的权限系统，功能上包括菜单、按钮、角色、成员和角色模块的增删改查；
9+
- 2、抽离脚手架、业务、网络请求等各层面的配置，保证项目配置的可维护性及灵活性;
10+
- 3、协同后端设计实现资料库模块(包括属性表、属性值表、分组表、品类表、系列表等)，可定制化添加/管理潮玩商品的各维度属性，完成输入框动态渲染和表单动态校验;
11+
- 4、接入七牛云，封装 QiniuUploader 类，实现了 web 端自主上传文件,解决了后端接口层的速率限制;
12+
- 5、配置 CROSS-ENV，实现了针对不同的线上环境(如 DEV、TEST)管理常量；
13+
- 6、接入微信 SDK，实现了微信快捷登录及用户在个人中心内的微信绑定及解绑。

‎src/assets/doc/p2.md

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,9 @@
1+
### [星潮]商家后台管理系统
12

2-
### [Buykop Mall 商城](https://www.buykop.com/)
3+
- 开发周期: 2022/04 - 2023/12
34

4-
* 开发周期: 2022/02 - Present
5+
- 技术栈: `vue3` `vue-router` `pinia` `element-ui` `sass`
56

6-
* 技术栈: `vue3` `vue-router` `pinia` `vant ui` `sass`
7-
8-
* 概览: 此项目作为buykop的商城网站，包括PC和移动端两个端的项目。此项目包括首页、商品详情、下单付款、搜索、个人中心和关于我们等功能页面，实现了数据埋点统计及语言翻译功能。
9-
10-
* 我初期主要负责了项目搭建,页面上实现了首页、商品详情、商品搜索和个人中心等页面。此项目技术栈基于vue3+vant-ui，结合业务特点，实现如下:
11-
12-
- 使用better-scroll、插槽和van-list封装支持上划加载的公用列表滚动组件;
13-
- 使用google-translate sdk和ip-api，实现不同ip下的对应语言自动翻译功能;
14-
- 使用:root覆盖vant ui底层css变量，从而实现组件库主题的定制；并结合sass,sass-resource-loader，实现全局sass变量和mixin函数封装;
15-
- 使用pinia对首页、留言、账号验证等模块进行扁平化的状态存储管理;
16-
- 使用requestAnimFrame，实现逐帧动画，从而达到更顺滑的页面滚动效果;
7+
- 概览:此项目供平台商户使用，其中包含商品管理、订单管理、优惠券管理等模块。
8+
- 1、基于前端控制的权限模式，实现了运营端对商户端的权限控制(页面级)；
9+
- 2、二次封装 WEditor 组件，实现了富文本的最大文本长度校验和图片上传尺寸限制提醒。

‎src/assets/doc/p3.md

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
1+
### [星潮]APP 分享/活动
12

2-
### [Buykop OMS 运营管理系统](https://oms.prd.buykop.com/)
3+
- 开发周期: 2022/07 - 2022/12
34

4-
* 开发周期: 2021/07 - Present
5+
- 技术栈: `vue3` `vue-router` `VantUi` `sass`
56

6-
* 技术栈: `vue2` `vue-router` `ant design for vue` `antv/g2` `less`
7-
8-
* 概览: 此项目作为buykop的运营管理平台，是给buykop运营人员对独立站和商城进行管理的平台。包括运营分析、客户管理、推广营销、品牌站管理等功能页面。
9-
10-
* 我初期主要负责了项目搭建,之后主要负责首页dashboard、推广营销等模块页面。此项目技术栈基于`vue2`、`ant-design for vue`，团队协同开发完成。实现如下:
11-
12-
- 使用 `@antv/g2`实现首页各类数据图表展示
13-
- 配置 `babel.config.js`,生产环境下添加 `transform-remove-console` ;
14-
- 使用 `debounce` 优化推广营销模块中渠道的搜索查询;
15-
- 实现` utils.js`工具函数、`requet.js` http请求封装、`filters.js` 过滤器等；
7+
- 概览: 此项目主要为实现 APP 的唤醒链路及活动展示。
8+
- 1、封装 CALL-APP，实现了 Android 和 iOS 两端在不同场景(浏览器不同、有无安装 APP)下的唤醒兼容;
9+
- 2、封转 JS Bridge，实现了客户端与前端 H5 的数据通信；
10+
- 3、接入微信 SDK，实现了二次分享至朋友圈/好友;
11+
- 4、应用 OPEN-TAG 开放标签，实现了微信场景下快捷唤醒。

‎src/assets/doc/p4.md

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
1+
### [星潮]商家助手
12

2-
### [Buykop Meta 广告平台](https://meta.prd.buykop.com)
3+
- 开发周期: 2022/07 - 2022/12
34

4-
* 开发周期: 2022/01 - 2022/01
5+
- 技术栈: `vue3` `vue-router` `VantUi` `sass`
56

6-
* 技术栈: `react` `react-router` `mobx` `ant design` `styled-components`
7-
8-
* 概览: 此项目作为buykop的广告投放合作平台，此项目作为buykop的广告投放合作平台,是开放给自建站用户进行广告分发合作的平台。此项目技术栈基于react、ant-design，团队协同开发完成。此项目技术栈基于`react`、`ant-design`，团队协同开发完成。
9-
10-
* 我主要负责了广告创建修改页、广告搜索查询页，实现如下:
11-
12-
- 使用 `styled-components` 书写样式，并通过attrs和$回调实现样式的动态更改；
13-
- 封装排序 `sorter` 组件，实现条件列表的自定义传入；并使用 `propTypes` 对传入属性进行函数校验；
14-
- 使用 `createContext` 实现深层组件的数据共享;
7+
- 概览: 此项目供平台商户使用,其中包含查看订单、筛选查询、拍照发货等模块。技术选型为 Vue3、VantUI、Pinia。
8+
- 1、通过前置路由守卫内的登录逻辑，实现了后台扫码及手机验证码两种登录方式;
9+
- 2、接入微信 SDK，实现了快递面单条形码识别并填充;
10+
- 3、封装 useArea Hooks，解决了由于 APP 端收货地址中省市区字段采用中文值而 UI 组件默认绑定地区数字编码，两者不一致需要相互转换的难题。

‎src/assets/doc/w.md

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,34 @@
1+
### [播呗网络科技](https://www.xingchao.com/)
12

2-
### [馥润信息科技](https://www.buykop.com/)
3+
工作时间: 2022/04 - 2023/02
34

4-
工作时间: 2021/03 - Present
5+
职位: 前端开发工程师
56

6-
职位: 前端开发
7+
职责:
78

8-
职责: 工作初期主要负责独立站后台管理系统的重构工作,中后期同团队协同开发了10余个子项目,包括H5、PC、后台管理系统等项目,并持续进行迭代和维护;
9+
- 1、独立负责 0-1 搭建星潮电商项目,包括后台管理系统、官网、H5；
10+
- 2、协同客户端，完成 APP 内嵌项目开发;
11+
- 3、负责项目的技术方案选型;
12+
- 4、统筹项目迭代并整体维护、优化。
913

10-
### [艾洛互动](http://www.elloworld.com/)
14+
### [馥润信息科技](https://www.buykop.com/)
1115

12-
工作时间: 2020/12 - 2021/03
16+
工作时间: 2021/03 - 2022/02
1317

14-
职位: 前端开发
18+
职位: 前端开发工程师
1519

16-
职责: 负责H5项目的开发工作
17-
### 不凡网络科技
20+
职责:
1821

19-
工作时间: 2019/06 - 2020/12
22+
- 1、负责跨境电商自建站项目的后台管理系统的重构及迭代工作;
23+
- 2、负责跨境电商自建站项目的平台商城 H5 端从 0 到 1 的搭建开发;
24+
- 3、负责跨境电商自建站项目的广告平台、运营管理系统等其余项目的协同开发。
2025

21-
职位: 前端开发
26+
### [不凡网络科技](https://www.bufan.com/)
2227

23-
职责: 外包项目性质,负责各类项目的开发工作
28+
工作时间: 2019/08 - 2020/11
2429

30+
职位: 前端开发工程师
31+
32+
职责:
33+
34+
- 1、负责电商项目的相关开发工作。

‎src/assets/images/admin-logo2.png

52.2 KB
Loading

‎src/assets/images/h5-index.png

361 KB
Loading

‎src/components/Markdown.jsx

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -13,57 +13,59 @@ import "markdown-navbar/dist/navbar.css";
1313
import p1 from "../assets/doc/p1.md";
1414
import p2 from "../assets/doc/p2.md";
1515
import p3 from "../assets/doc/p3.md";
16+
import p4 from "../assets/doc/p4.md";
1617
import w from "../assets/doc/w.md";
1718
import m from "../assets/doc/m.md";
1819

1920
export const MarkdownNavWrapper = styled.div`
20-
position: fixed;
21-
top: 118px;
22-
left: 10px;
21+
position: fixed;
22+
top: 118px;
23+
left: 10px;
2324
24-
.title-anchor {
25-
max-width: 220px;
26-
text-overflow: ellipsis;
27-
overflow: hidden;
28-
white-space: nowrap;
29-
}
25+
.title-anchor {
26+
max-width: 220px;
27+
text-overflow: ellipsis;
28+
overflow: hidden;
29+
white-space: nowrap;
30+
}
3031
`;
3132

3233
const markdownMap = new Map();
3334
markdownMap.set("p1", p1);
3435
markdownMap.set("p2", p2);
3536
markdownMap.set("p3", p3);
37+
markdownMap.set("p4", p4);
3638
markdownMap.set("w", w);
3739
markdownMap.set("m", m);
3840

3941
export function Markdown(props) {
40-
const [md, setMd] = useState("");
42+
const [md, setMd] = useState("");
4143

42-
const { id } = props;
44+
const { id } = props;
4345

44-
const mdFile = markdownMap.get(`${id}`);
46+
const mdFile = markdownMap.get(`${id}`);
4547

46-
//console.log("idid=>", id);
48+
//console.log("idid=>", id);
4749

48-
useEffect(() => {
49-
//fetch("/doc/help.md");
50-
fetch(mdFile)
51-
.then((resp) => resp.text())
52-
.then((txt) => {
53-
setMd(txt);
54-
});
55-
//console.log("useEffect=>", md);
56-
}, [md]);
57-
return (
58-
<>
59-
{/*<MarkdownNavWrapper className="markdown-nav">
50+
useEffect(() => {
51+
//fetch("/doc/help.md");
52+
fetch(mdFile)
53+
.then((resp) => resp.text())
54+
.then((txt) => {
55+
setMd(txt);
56+
});
57+
//console.log("useEffect=>", md);
58+
}, [md]);
59+
return (
60+
<>
61+
{/*<MarkdownNavWrapper className="markdown-nav">
6062
<MarkNav source={md} />
6163
</MarkdownNavWrapper>*/}
62-
<ReactMarkdown
63-
className="markdown-body"
64-
children={md}
65-
remarkPlugins={[remarkGfm]}
66-
/>
67-
</>
68-
);
64+
<ReactMarkdown
65+
className="markdown-body"
66+
children={md}
67+
remarkPlugins={[remarkGfm]}
68+
/>
69+
</>
70+
);
6971
}

0 commit comments

Comments
 (0)