💫 workflow(all): fix details

2495867729 · 2495867729 · commit fb6eb263a3a1 · 2022-03-16T12:59:45.000+08:00
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,3 +1,5 @@
+import { useEffect } from "react";
+
 import { Routes, Route } from "react-router-dom";
 import "./App.css";
 
@@ -9,7 +11,10 @@ import ProjectsDetail from "./pages/projects/detail";
 import Work from "./pages/work";
 import NoMatch from "./pages/nomatch";
 
+import { printLog } from "./utils/screenlog.js";
+
 function App() {
+    useEffect(printLog, []);
     return (
         <Routes>
             <Route path="/" element={<Layout />}>
diff --git a/src/assets/doc/m.md b/src/assets/doc/m.md
@@ -13,9 +13,11 @@
 
 * Github:https://github.com/coderzii
 
-* Tel:18616240038
+* Tel:17091248698
   
 * 期望职位:Web前端工程师 
+  
+* 期望薪资:面谈
 
 * 居住地区:上海市浦东新区
 
@@ -28,4 +30,12 @@
     - 熟练使用 element-ui、element-ui plus、ant-design for vue、vant、ant-design等ui组件库
     - 熟练搭建开发h5、pc 、后台管理系统等项目
     - 熟悉webpack、vite等构建工具; 熟悉Git代码管理工具;了解NodeJS、TypeScript
-    - 具有完备的JS基础,有代码洁癖,开发注重代码质量,提升可维护性
+    - 具有完备的JS基础,有代码洁癖,开发注重代码质量,提升可维护性
+
+* 一些补充:
+
+    - 此次寻找新的工作机会,主要是追求新的技术台阶和更快的技术成长
+    - 性格温和,能在工作中保持学习的自驱力,热爱前端事业;
+    - 喜欢尝试新技术,2021通过自学，主导尝试了vue3和react的项目开发。
+并且2022技术目标是NodeJS和TypeScript;
+    - 此项目使用react、react-markdown完成,并通过gh-pages部署在github;
diff --git a/src/assets/doc/p1.md b/src/assets/doc/p1.md
@@ -1,5 +1,5 @@
 
-###  [项目名称](https://www.baidu.com/)
+###  [Buykop Admin 后台管理系统](https://oms.prd.buykop.com/)
 
  * 开发周期: 2022/02 - 2022/02
 
@@ -9,10 +9,10 @@
 
  * 初期，我主要负责了此项目基于架构层面的整体重构，搭建项目框架工作，中后期则是团队内各模块的协同开发。此项目技术栈基于vue2+element-ui，结合业务特点，部分实现如下:
 
-    - 使用webpak require.context api,实现了/components/global下组件全局注册自动化;
-    - permission.js下通过全局路由守卫BeforeEach,实现登录鉴权、退出登录的缓存清除等系列操作;
-    - request.js下封装axios实例,实现请求拦截器里的header配置和响应拦截器的错误捕获无权限处理等操作;
-    - 基于el-upload组件二次封装,实现图片批量上传、拖动排序以及结合aliyun-oss-sdk的视频上传等功能;
-    - 基于el-tree,el-select,el-input,实现支持树形结构菜单的自定义操作(增删改)组件;
-    - 基于项目结构,书写了README.md文档,主要包括项目的结构目录、功能模块的说明和风格规范;
+    - 使用 webpak `require.context` api,实现了 `/components/global` 下组件全局注册自动化;
+    - `permission.js` 下通过全局路由守卫BeforeEach,实现登录鉴权、退出登录的缓存清除等系列操作;
+    - `request.js` 下封装axios实例,实现请求拦截器里的header配置和响应拦截器的错误捕获无权限处理等操作;
+    - 基于 `el-upload` 组件二次封装,实现图片批量上传、拖动排序以及结合 `aliyun-oss-sdk` 的视频上传等功能;
+    - 基于 `el-tree`, `el-select`, `el-input`,实现支持树形结构菜单的自定义操作(增删改)组件;
+    - 基于项目结构,书写了 `README.md` 文档,主要包括项目的结构目录、功能模块的说明和代码的风格规范;
 
diff --git a/src/assets/doc/p2.md b/src/assets/doc/p2.md
@@ -1,16 +1,16 @@
 
-###  [Buykop Mall](https://www.baidu.com/)
+###  [Buykop Mall 商城](https://www.buykop.com/)
 
  * 开发周期: 2022/02 - Present
 
  * 技术栈: `vue3` `vue-router` `pinia` `vant ui` `sass`
 
- * 概览: 此项目作为buykop的商城网站，是自建站的商城网站。此项目包括首页、商品详情、下单付款、搜索、个人中心和关于我们等功能页面，实现了数据埋点统计及语言翻译功能。
+ * 概览: 此项目作为buykop的商城网站，包括PC和移动端两个端的项目。此项目包括首页、商品详情、下单付款、搜索、个人中心和关于我们等功能页面，实现了数据埋点统计及语言翻译功能。
 
- * 我初期主要负责了项目搭建,页面上实现了首页、搜索和个人中心等页面。此项目技术栈基于vue3+vant-ui，结合业务特点，实现如下:
+ * 我初期主要负责了项目搭建,页面上实现了首页、商品详情、商品搜索和个人中心等页面。此项目技术栈基于vue3+vant-ui，结合业务特点，实现如下:
 
     - 使用better-scroll、插槽和van-list封装支持上划加载的公用列表滚动组件;
     - 使用google-translate sdk和ip-api，实现不同ip下的对应语言自动翻译功能;
-    - 使用：root覆盖vant ui底层css变量，从而实现组件库主题的定制；并结合sass,sass-resource-loader，实现全局sass变量和mixin函数封装;
+    - 使用:root覆盖vant ui底层css变量，从而实现组件库主题的定制；并结合sass,sass-resource-loader，实现全局sass变量和mixin函数封装;
     - 使用pinia对首页、留言、账号验证等模块进行扁平化的状态存储管理;
     - 使用requestAnimFrame，实现逐帧动画，从而达到更顺滑的页面滚动效果;
diff --git a/src/assets/doc/p3.md b/src/assets/doc/p3.md
@@ -1,15 +1,15 @@
 
-###  [Buykop OMS](https://www.baidu.com/)
+###  [Buykop OMS 运营管理系统](https://oms.prd.buykop.com/)
 
  * 开发周期: 2021/07 - Present
 
  * 技术栈: `vue2` `vue-router` `ant design for vue` `antv/g2` `less`
 
- * 概览: 此项目作为buykop的运营管理平台，包括运营分析、客户管理、推广营销、品牌站管理等功能页面。
+ * 概览: 此项目作为buykop的运营管理平台，是给buykop运营人员对独立站和商城进行管理的平台。包括运营分析、客户管理、推广营销、品牌站管理等功能页面。
 
- * 我初期主要负责了项目搭建,之后主要负责首页dashboard、推广营销等模块页面。此项目技术栈基于vue2、ant-design for vue，团队协同开发完成。实现如下:
+ * 我初期主要负责了项目搭建,之后主要负责首页dashboard、推广营销等模块页面。此项目技术栈基于`vue2`、`ant-design for vue`，团队协同开发完成。实现如下:
 
-    - 使用 @antv/g2实现首页各类数据图表展示
-    - 配置babel.config.js,生产环境下添加 transform-remove-console ;
-    - 使用 debounce 优化推广营销模块中渠道的搜索查询;
-    - 实现 utils.js工具函数、requet.js http请求封装、filters.js 过滤器等；
+    - 使用 `@antv/g2`实现首页各类数据图表展示
+    - 配置 `babel.config.js`,生产环境下添加 `transform-remove-console` ;
+    - 使用 `debounce` 优化推广营销模块中渠道的搜索查询;
+    - 实现` utils.js`工具函数、`requet.js` http请求封装、`filters.js` 过滤器等；
diff --git a/src/assets/doc/p4.md b/src/assets/doc/p4.md
@@ -1,14 +1,14 @@
 
-###  [Buykop Meta](https://meta.prd.buykop.com)
+###  [Buykop Meta 广告平台](https://meta.prd.buykop.com)
 
  * 开发周期: 2022/01 - 2022/01
 
  * 技术栈: `react` `react-router` `mobx` `ant design` `styled-components`
   
- * 概览: 此项目作为buykop的广告投放合作平台，此项目技术栈基于react、ant-design，团队协同开发完成。
+ * 概览: 此项目作为buykop的广告投放合作平台，此项目作为buykop的广告投放合作平台,是开放给自建站用户进行广告分发合作的平台。此项目技术栈基于react、ant-design，团队协同开发完成。此项目技术栈基于`react`、`ant-design`，团队协同开发完成。
 
  * 我主要负责了广告创建修改页、广告搜索查询页，实现如下:
 
-    - 使用styled-components书写样式，并通过attrs和$回调实现样式的动态更改；
-    - 封装排序sorter组件，实现条件列表的自定义传入；并使用propTypes对传入属性进行函数校验；
-    - 使用 createContext  实现深层组件的数据共享;
+    - 使用 `styled-components` 书写样式，并通过attrs和$回调实现样式的动态更改；
+    - 封装排序 `sorter` 组件，实现条件列表的自定义传入；并使用 `propTypes` 对传入属性进行函数校验；
+    - 使用 `createContext` 实现深层组件的数据共享;
diff --git a/src/assets/doc/w.md b/src/assets/doc/w.md
@@ -1,24 +1,24 @@
 
-###  [某某公司](https://www.baidu.com/)
+###  [馥润信息科技](https://www.buykop.com/)
 
  工作时间: 2021/03 - Present
 
  职位: 前端开发
 
- 职责: 请问请问其二请问请问切勿去而且为去
+ 职责: 工作初期主要负责独立站后台管理系统的重构工作,中后期同团队协同开发了10余个子项目,包括H5、PC、后台管理系统等项目,并持续进行迭代和维护;
 
-###  [某某公司](https://www.baidu.com/)
+###  [艾洛互动](http://www.elloworld.com/)
 
  工作时间: 2020/12 - 2021/03
 
  职位: 前端开发
 
- 职责: 请问请问其二请问请问切勿去而且为去
-###  [某某公司](https://www.baidu.com/)
+ 职责: 负责H5项目的开发工作
+###  不凡网络科技
 
  工作时间: 2019/06 - 2020/12
 
  职位: 前端开发
 
- 职责: 请问请问其二请问请问切勿去而且为去
+ 职责: 外包项目性质,负责各类项目的开发工作
 
diff --git a/src/assets/images/admin-logo.png b/src/assets/images/admin-logo.png
diff --git a/src/assets/images/log-avatar.jpg b/src/assets/images/log-avatar.jpg
diff --git a/src/assets/images/meta-logo.png b/src/assets/images/meta-logo.png
diff --git a/src/components/Markdown.jsx b/src/components/Markdown.jsx
@@ -31,8 +31,8 @@ export const MarkdownNavWrapper = styled.div`
 
 const markdownMap = new Map();
 markdownMap.set("p1", p1);
-markdownMap.set("p2", p1);
-markdownMap.set("p3", p1);
+markdownMap.set("p2", p2);
+markdownMap.set("p3", p3);
 markdownMap.set("w", w);
 markdownMap.set("m", m);
 
@@ -52,13 +52,13 @@ export function Markdown(props) {
             .then((txt) => {
                 setMd(txt);
             });
-        console.log("useEffect=>", md);
+        //console.log("useEffect=>", md);
     }, [md]);
     return (
         <>
-            <MarkdownNavWrapper className="markdown-nav">
+            {/*<MarkdownNavWrapper className="markdown-nav">
                 <MarkNav source={md} />
-            </MarkdownNavWrapper>
+            </MarkdownNavWrapper>*/}
             <ReactMarkdown
                 className="markdown-body"
                 children={md}
diff --git a/src/layout/index.jsx b/src/layout/index.jsx
@@ -94,10 +94,10 @@ export default function Layout() {
                         </div>
                     </div>
                     <div className="footer-nav">
-                        <a className="footer-nav__link">contact</a>
+                        {/*<a className="footer-nav__link">contact</a>
                         <a className="footer-nav__link">github</a>
                         <a className="footer-nav__link">dribbble</a>
-                        <a className="footer-nav__link">stack overflow</a>
+                        <a className="footer-nav__link">stack overflow</a>*/}
                     </div>
                 </div>
             </div>
diff --git a/src/pages/projects/list/index.jsx b/src/pages/projects/list/index.jsx
@@ -3,9 +3,12 @@
  * @Description:
  */
 import { ProjectsListWrapper, ProjectItemWrapper } from "./styles";
-import { Link } from "react-router-dom";
+//import { Link } from "react-router-dom";
 import { useNavigate } from "react-router";
 
+import p1 from "../../../assets/images/admin-logo.png";
+import p4 from "../../../assets/images/meta-logo.png";
+
 export default function ProjectsList() {
     const navigate = useNavigate();
 
@@ -15,7 +18,7 @@ export default function ProjectsList() {
 
     return (
         <ProjectsListWrapper>
-            <ProjectItemWrapper index={0}>
+            <ProjectItemWrapper index={0} p={p1}>
                 <div
                     className="section"
                     onClick={() => onClickProjectItem("p1")}
@@ -27,21 +30,17 @@ export default function ProjectsList() {
                     <div className="section-text">
                         <h2 className="section-text__title">
                             <span>
-                                tandem exchange
+                                Buykop Admin
                                 <figure className="line line3"></figure>
                             </span>
                         </h2>
                         <p className="section-text__description">
-                            A few years back, my brother was living in Berlin
-                            and learning German. After trying a bunch of
-                            different language learning tools and systems, he
-                            found that while traditional approaches like
-                            textbooks and tools like Rosetta Stone are good for…
+                            此项目作为buykop的商城网站，包括PC和移动端两个端的项目。此项目包括首页、商品详情、下单付款、商品搜索、个人中心和关于我们等功能页面，实现了数据埋点统计及语言翻译功能。
                         </p>
                     </div>
                 </div>
             </ProjectItemWrapper>
-            <ProjectItemWrapper index={1}>
+            <ProjectItemWrapper index={1} p={p1}>
                 <div
                     className="section"
                     onClick={() => onClickProjectItem("p2")}
@@ -53,21 +52,17 @@ export default function ProjectsList() {
                     <div className="section-text">
                         <h2 className="section-text__title">
                             <span>
-                                tandem exchange
+                                Buykop Mall
                                 <figure className="line line3"></figure>
                             </span>
                         </h2>
                         <p className="section-text__description">
-                            A few years back, my brother was living in Berlin
-                            and learning German. After trying a bunch of
-                            different language learning tools and systems, he
-                            found that while traditional approaches like
-                            textbooks and tools like Rosetta Stone are good for…
+                            此项目作为buykop的商城网站，包括PC和移动端两个端的项目。此项目包括首页、商品详情、下单付款、搜索、个人中心和关于我们等功能页面，实现了数据埋点统计及语言翻译功能。
                         </p>
                     </div>
                 </div>
             </ProjectItemWrapper>
-            <ProjectItemWrapper index={2}>
+            <ProjectItemWrapper index={2} p={p1}>
                 <div
                     className="section"
                     onClick={() => onClickProjectItem("p3")}
@@ -79,21 +74,17 @@ export default function ProjectsList() {
                     <div className="section-text">
                         <h2 className="section-text__title">
                             <span>
-                                tandem exchange
+                                Buykop OMS
                                 <figure className="line line3"></figure>
                             </span>
                         </h2>
                         <p className="section-text__description">
-                            A few years back, my brother was living in Berlin
-                            and learning German. After trying a bunch of
-                            different language learning tools and systems, he
-                            found that while traditional approaches like
-                            textbooks and tools like Rosetta Stone are good for…
+                            此项目作为buykop的运营管理平台，是给buykop运营人员对独立站和商城进行管理的平台。包括运营分析、客户管理、推广营销、品牌站管理等功能页面。
                         </p>
                     </div>
                 </div>
             </ProjectItemWrapper>
-            <ProjectItemWrapper index={3}>
+            <ProjectItemWrapper index={3} p={p4}>
                 <div
                     className="section"
                     onClick={() => onClickProjectItem("p4")}
@@ -105,16 +96,12 @@ export default function ProjectsList() {
                     <div className="section-text">
                         <h2 className="section-text__title">
                             <span>
-                                tandem exchange
+                                Buykop Meta
                                 <figure className="line line3"></figure>
                             </span>
                         </h2>
                         <p className="section-text__description">
-                            A few years back, my brother was living in Berlin
-                            and learning German. After trying a bunch of
-                            different language learning tools and systems, he
-                            found that while traditional approaches like
-                            textbooks and tools like Rosetta Stone are good for…
+                            此项目作为buykop的广告投放合作平台，此项目作为buykop的广告投放合作平台,是开放给自建站用户进行广告分发合作的平台。此项目技术栈基于react、ant-design，团队协同开发完成。此项目技术栈基于`react`、`ant-design`，团队协同开发完成。
                         </p>
                     </div>
                 </div>
diff --git a/src/pages/projects/list/styles.js b/src/pages/projects/list/styles.js
@@ -53,16 +53,19 @@ export const ProjectItemWrapper = styled.div.attrs(({ index }) => ({
             order: ${({ isEven }) => (isEven ? 0 : 1)};
             filter: none;
             background-color: rgb(243, 243, 243);
-            background-image: url(${p1});
+            background-image: url(${({ p }) => p});
+            background-position: center center;
+            background-size: 60% auto;
+            background-repeat: no-repeat;
 
             /* c */
             position: relative;
             flex: 0 0 auto;
             width: 68%;
             max-width: 447px;
             height: 276px;
-            background-size: cover;
-            background-position: 50%;
+            /*background-size: cover;*/
+            /*background-position: 50%;*/
         }
 
         .section-text {
@@ -77,8 +80,8 @@ export const ProjectItemWrapper = styled.div.attrs(({ index }) => ({
                 }
             }
             .section-text__description {
-                line-height: 1.5;
-                font-size: 12.8px;
+                line-height: 2;
+                font-size: 14px;
                 color: #9b9b9b;
                 -webkit-transition: all 0.25s;
                 transition: all 0.25s;
diff --git a/src/utils/screenlog.js b/src/utils/screenlog.js
@@ -0,0 +1,15 @@
+/*
+ * @Date: 2022-03-16
+ * @Description:
+ */
+
+export function printLog() {
+    console.log("[resumer] created");
+
+    console.log(
+        "%c    ",
+        "background: url(https://img.bosszhipin.com/beijin/upload/avatar/20220315/607f1f3d68754fd05ef7d5a912f04ae8da9c4365fa5e2dfb802dfdb9bdf7eb28ace1fd7312e0f24a_s.jpg) no-repeat left center;font-size: 160px;",
+        "\n"
+    );
+    console.log("[resumer] Thanks!");
+}
