Repository: yangtao5201314/my-blog
Branch: main
Commit: b81e1947fcff
Files: 60
Total size: 94.6 KB
Directory structure:
gitextract_rj4jn2nz/
├── .idea/
│ ├── .gitignore
│ ├── inspectionProfiles/
│ │ └── Project_Default.xml
│ ├── modules.xml
│ ├── my-blog.iml
│ └── vcs.xml
├── Docker/
│ ├── Dockerfile
│ └── nginx/
│ └── nginx.conf
├── README.md
├── commitlint.config.js
├── index.html
├── package.json
├── src/
│ ├── App.vue
│ ├── assets/
│ │ └── iconfont/
│ │ └── iconfont.css
│ ├── components/
│ │ └── nav-menu.vue
│ ├── main.ts
│ ├── router/
│ │ └── index.ts
│ ├── style/
│ │ └── style.css
│ ├── views/
│ │ ├── contact/
│ │ │ └── index.vue
│ │ ├── dataCenter/
│ │ │ └── index.vue
│ │ ├── homepage/
│ │ │ ├── canvas.ts
│ │ │ ├── components/
│ │ │ │ └── typewriter.vue
│ │ │ └── index.vue
│ │ ├── navigation/
│ │ │ ├── data/
│ │ │ │ ├── index.ts
│ │ │ │ └── list/
│ │ │ │ ├── _b_vue.ts
│ │ │ │ ├── _c_react.ts
│ │ │ │ ├── _d_css.ts
│ │ │ │ ├── _e1_javascript.ts
│ │ │ │ ├── _e2_typescript.ts
│ │ │ │ ├── _f_node.ts
│ │ │ │ ├── _g_officialDocuments.ts
│ │ │ │ ├── _h_charts.ts
│ │ │ │ ├── _i_codeManager.ts
│ │ │ │ ├── _j_buildTools.ts
│ │ │ │ ├── _k_micro.ts
│ │ │ │ ├── _k_test.ts
│ │ │ │ ├── _l_devTools.ts
│ │ │ │ ├── _m_otherTools.ts
│ │ │ │ ├── _n_technologicalGrowth.ts
│ │ │ │ ├── _o_community.ts
│ │ │ │ ├── w_drawPicture.ts
│ │ │ │ ├── x_audioVideo.ts
│ │ │ │ ├── y_navigation.ts
│ │ │ │ └── z_something.ts
│ │ │ └── index.vue
│ │ ├── warblerCenter/
│ │ │ ├── component/
│ │ │ │ ├── resume-job.vue
│ │ │ │ ├── resume-link.vue
│ │ │ │ ├── resume-skills.vue
│ │ │ │ └── resume-warbler.vue
│ │ │ ├── hooks/
│ │ │ │ ├── getUserInfo.ts
│ │ │ │ └── juejin.ts
│ │ │ ├── index.vue
│ │ │ └── part/
│ │ │ ├── left-part.vue
│ │ │ ├── middle-part.vue
│ │ │ └── right-part.vue
│ │ ├── warblerCli/
│ │ │ └── index.vue
│ │ └── warblerJs/
│ │ └── index.vue
│ └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
================================================
FILE CONTENTS
================================================
================================================
FILE: .idea/.gitignore
================================================
# 默认忽略的文件
/shelf/
/workspace.xml
# 基于编辑器的 HTTP 客户端请求
/httpRequests/
================================================
FILE: .idea/inspectionProfiles/Project_Default.xml
================================================
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile>
</component>
================================================
FILE: .idea/modules.xml
================================================
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/my-blog.iml" filepath="$PROJECT_DIR$/.idea/my-blog.iml" />
</modules>
</component>
</project>
================================================
FILE: .idea/my-blog.iml
================================================
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
================================================
FILE: .idea/vcs.xml
================================================
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>
================================================
FILE: Docker/Dockerfile
================================================
# 基于哪个镜像的基础上进行构建
# FROM node:16
# 工作目录
# WORKDIR /
# 拷贝当前目录下的文件 到 /app 中 .dockerignore 文件中可以声明忽略拷贝的文件
# COPY . /
# RUN npm set registry https://registry.npmmirror.com
# RUN npm install
# RUN npm run build
# COPY warbler-fe:/dist/ /home/work/warbler-fe/warbler-fe/
# 拉取 nginx 镜像
FROM nginx
COPY dist /usr/share/nginx/html
COPY Docker/nginx/nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx","-g","daemon off;"]
# docker build -f ./Docker/Dockerfile -t warbler-fe . --no-cache
# docker run -d --name warbler-fe-instance -p 80:80 --restart=always warbler-fe
================================================
FILE: Docker/nginx/nginx.conf
================================================
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
gzip on; #开启gzip压缩功能
gzip_min_length 10k; #设置允许压缩的页面最小字节数; 这里表示如果文件小于10个字节，就不用压缩，因为没有意义，本来就很小.
gzip_buffers 4 16k; #设置压缩缓冲区大小，此处设置为4个16K内存作为压缩结果流缓存
gzip_http_version 1.1; #压缩版本
gzip_comp_level 6; #设置压缩比率，最小为1，处理速度快，传输速度慢；9为最大压缩比，处理速度慢，传输速度快; 这里表示压缩级别，可以是0到9中的任一个，级别越高，压缩就越小，节省了带宽资源，但同时也消耗CPU资源，所以一般折中为6
gzip_types text/css text/xml application/javascript; #制定压缩的类型,线上配置时尽可能配置多的压缩类型!
gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
gzip_vary on; #选择支持vary header；改选项可以让前端的缓存服务器缓存经过gzip压缩的页面; 这个可以不写，表示在传送数据时，给客户端说明我使用了gzip压缩
include mime.types;
default_type application/octet-stream;
client_max_body_size 10m;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 80;
server_name www.yangtao.xyz; # 修改为docker服务宿主机的ip
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
# server {
# listen 80;
# server_name js.yangtao.top;
# try_files $uri $uri/ /index.html;
# location / {
# root /usr/share/nginx/js;
# index index.html index.htm;
# }
# }
# server {
# listen 80;
# server_name cli.yangtao.top;
# try_files $uri $uri/ /index.html;
# location / {
# root /usr/share/nginx/cli;
# index index.html index.htm;
# }
# }
# HTTPS server
#
#server {
# listen 443 ssl;
# server_name localhost;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
# location / {
# root html;
# index index.html index.htm;
# }
#}
}
================================================
FILE: README.md
================================================
## 网站首页
👉👉 [江城开朗的豌豆]([https://tinyurl.com/yangtaoWeb](https://yangtao.xyz/#/))
## 开发者
**江城开朗的豌豆**
👉👉 [掘金](https://juejin.cn/user/3307789418773736)
👉👉 [github](https://github.com/yangtao5201314)
👉👉 [个人博客](https://blog.csdn.net/qq_48652579?type=lately)
### 安装 yarn 并启动项目
- 安装依赖
```bash
yarn install
```
- 运行项目
```bash
yarn run dev
```
- 打包项目
```bash
yarn run build
```
================================================
FILE: commitlint.config.js
================================================
module.exports = {
extends: ['cz'],
rules: {
// 'type-empty': [2, 'never'],
// 'subject-empty': [2, 'never'],
},
};
================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="https://turbo.build/images/docs/repo/repo-hero-logo-dark.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>江城开朗的豌豆 | 让前端再简单一点</title>
<!-- <style>
.audio {
position: absolute;
z-index: 10;
visibility: hidden;
}
</style> -->
</head>
<body>
<!-- <audio controls autoplay ref="audio" class="audio" playsinline loop>
<source src="https://img.tukuppt.com/newpreview_music/09/01/69/5c8a0553e18db46234.mp3" type="audio/mpeg" />
</audio> -->
<div id="app"></div>
<div class="spinner-box" id="spinner">
<div class="spinner"></div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
================================================
FILE: package.json
================================================
{
"name": "myblog",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite --open --port 5173",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"commit": "git-cz",
"commit:all": "git add . && git-cz",
"prepare": "husky install"
},
"dependencies": {
"axios": "^1.3.5",
"express": "^4.18.2",
"modern-normalize": "^1.1.0",
"vue": "^3.2.47",
"vue-router": "^4.1.6"
},
"repository": {
"type": "git",
"url": "git+https://github.com/yangtao5201314/my-blog"
},
"homepage": "https://tinyurl.com/yangtaoWeb",
"devDependencies": {
"@commitlint/config-conventional": "^17.4.4",
"@typescript-eslint/eslint-plugin": "^5.56.0",
"@typescript-eslint/parser": "^5.56.0",
"@vitejs/plugin-vue": "^4.1.0",
"commitizen": "^4.3.0",
"commitlint": "^17.4.4",
"commitlint-config-cz": "^0.13.3",
"cz-customizable": "^7.0.0",
"eslint": "^8.36.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-vue": "^9.9.0",
"husky": "^8.0.3",
"lint-staged": "^13.2.0",
"sass": "^1.59.3",
"typescript": "*",
"vite": "^4.2.0",
"vue-eslint-parser": "^9.1.0",
"vue-tsc": "^1.2.0"
},
"lint-staged": {
"*.{js,jsx,ts,tsx,vue,json}": [
"eslint --fix"
]
},
"config": {
"commitizen": {
"path": "node_modules/cz-customizable"
}
}
}
================================================
FILE: src/App.vue
================================================
<template>
<nav-menu></nav-menu>
<router-view></router-view>
</template>
<script setup lang="ts">
import NavMenu from '@c/nav-menu.vue';
import { onMounted } from 'vue';
onMounted(() => {
// 页面渲染完成的时候把 loading 隐藏掉
const ele = document.getElementById('spinner');
ele!.style.display = 'none';
});
</script>
<style lang="scss" scoped>
</style>
================================================
FILE: src/assets/iconfont/iconfont.css
================================================
@font-face {
font-family: "iconfont"; /* Project id 3948807 */
src: url('iconfont.woff2?t=1681302822777') format('woff2'),
url('iconfont.woff?t=1681302822777') format('woff'),
url('iconfont.ttf?t=1681302822777') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-juejin:before {
content: "\e603";
}
.icon-huaban88:before {
content: "\e61a";
}
.icon-daohang:before {
content: "\e77d";
}
.icon-jianli:before {
content: "\e609";
}
.icon-weixin:before {
content: "\e600";
}
================================================
FILE: src/components/nav-menu.vue
================================================
<template>
<div class="nav-menu">
<div class="mask"></div>
<div class="logo cp" @click="goToHome">
<div class="logo-img-box">
<img src="https://turbo.build/images/docs/repo/repo-hero-logo-dark.svg" class="logo-img" />
</div>
<div class="logo-title fwb">江城开朗的豌豆</div>
</div>
<div class="navs show-title">
<div
v-for="(nav, index) in navs"
:key="index"
:class="{ active: index === currentIndex }"
class="nav cp"
@click="changeCurrentNab(nav.path)">
{{ nav.title }}
</div>
</div>
<!-- 移动端 -->
<div class="navs show-icon">
<div class="icon-bg" title="前端导航" @click="router.push({ path: '/navigation' })">
<i class="iconfont icon-daohang"></i>
</div>
<!-- <div class="icon-bg" title="warbler-cli" @click="router.push({ path: '/warbler/cli' })">
<div>cli</div>
</div> -->
<div class="icon-bg" title="yangtao-js" @click="router.push({ path: '/warbler/js' })">
<div>js</div>
</div>
<div class="icon-bg" title="江城开朗的豌豆" @click="router.push({ path: '/warblerCenter' })">
<i class="iconfont icon-jianli"></i>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
// 导航列表
const navs = [
{
title: '前端导航',
path: '/navigation',
},
{
title: 'yangtao-js',
path: '/warbler/js',
},
// {
// title: 'yangtao-cli',
// path: '/warbler/cli',
// },
// {
// title: '数据中心',
// path: '/dataCenter',
// },
{
title: '江城开朗的豌豆',
path: '/warblerCenter',
},
];
const router = useRouter();
const route = useRoute();
// 点击 Tab 切换页面
const changeCurrentNab = (path: string) => {
router.push({ path });
};
// 回到首页
const goToHome = () => {
router.push({ path: '/' });
};
// 动态计算当前激活的导航，用来高亮当前导航
const currentIndex = computed(() => navs.findIndex((nav) => nav.path === route.path));
</script>
<style lang="scss" scoped>
.nav-menu {
width: 100%;
height: var(--warbler-header-height);
position: fixed;
top: 0;
.show-title {
@media (max-width: 700px) {
display: none !important;
}
}
.show-icon {
@media (min-width: 700px) {
display: none !important;
}
.icon-bg {
width: 32px;
height: 32px;
font-size: 14px;
background-color: var(--warbler-bg-soft);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-left: 4px;
cursor: pointer;
}
}
.mask {
width: 100%;
height: 100%;
background-color: var(--warbler-bg-half-opacity);
box-shadow: 0 -1px 0 hsla(0, 0%, 100%, 0.1) inset;
backdrop-filter: blur(12px);
}
.logo {
display: flex;
justify-content: flex-start;
align-items: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: var(--page-padding);
.logo-img-box {
width: 32px;
height: 32px;
}
.logo-img {
width: 100%;
height: 100%;
}
.logo-title {
font-size: 24px;
margin-left: 8px;
background: linear-gradient(-60deg, #8700ff 0, #ff009e 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.navs {
display: flex;
justify-content: flex-start;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: var(--page-padding);
.nav {
margin-left: 16px;
&:hover {
color: var(--warbler-brand);
}
}
.active {
color: var(--warbler-brand);
}
}
}
</style>
================================================
FILE: src/main.ts
================================================
import { createApp } from 'vue';
import App from './App.vue';
import router from '@/router/index';
// reset css
import 'modern-normalize';
import '@/style/style.css';
// 阿里图标库
import './assets/iconfont/iconfont.css';
const app = createApp(App);
app.use(router);
app.mount('#app');
================================================
FILE: src/router/index.ts
================================================
import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router';
const routes = [
{
path: '/',
name: 'homepage',
component: () => import(/* webpackChunkName: "homepage" */ '../views/homepage/index.vue'),
children: [],
},
{
path: '/navigation',
name: 'navigation',
component: () => import(/* webpackChunkName: "navigation" */ '@v/navigation/index.vue'),
children: [],
},
{
path: '/warbler/js',
name: 'warblerJS',
component: () => import(/* webpackChunkName: "warblerJS" */ '@v/warblerJs/index.vue'),
children: [],
},
{
path: '/warbler/cli',
name: 'warblerCli',
component: () => import(/* webpackChunkName: "warblerCli" */ '@v/warblerCli/index.vue'),
children: [],
},
{
path: '/dataCenter',
name: 'dataCenter',
component: () => import(/* webpackChunkName: "dataCenter" */ '@v/dataCenter/index.vue'),
children: [],
},
{
path: '/warblerCenter',
name: 'warblerCenter',
component: () => import(/* webpackChunkName: "warblerCenter" */ '@v/warblerCenter/index.vue'),
children: [],
},
{
path: '/contact',
name: 'contact',
component: () => import(/* webpackChunkName: "contact" */ '@v/contact/index.vue'),
children: [],
},
];
const router = createRouter({
routes,
history: createWebHashHistory(),
});
export default router;
================================================
FILE: src/style/style.css
================================================
html,
body,
#app {
width: 100%;
height: 100%;
background-color: var(--warbler-bg);
font-family: var(--warbler-font-family-base);
font-size: 16px;
color: var(--warbler-text-2);
}
/* 阿里图标库初始化 */
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
/* 基础颜色 */
:root {
--warbler-white: #ffffff;
--warbler-black: #000000;
--warbler-black-half-opacity: RGBA(0, 0, 0, 0.5);
--warbler-brand: #646cff;
--warbler-brand-light: #747bff;
--warbler-brand-lighter: #9499ff;
--warbler-brand-lightest: #bcc0ff;
--warbler-brand-dark: #535bf2;
--warbler-brand-darker: #454ce1;
--warbler-brand-dimm: rgba(100, 108, 255, 0.08);
}
/* 页面两边的空白距离 */
:root {
--page-padding: 32px;
}
@media (max-width: 900px) {
:root {
--page-padding: 16px;
}
}
/* 背景颜色 */
:root {
--warbler-bg: #1e1e20;
--warbler-bg-soft: #161618;
--warbler-bg-half-opacity: RGBA(30, 30, 32, 0.5);
}
/* 高度 */
:root {
--warbler-header-height: 64px;
}
/* 文字颜色 */
:root {
--warbler-text-1: var(--warbler-white);
--warbler-text-2: #fffff5db;
--warbler-text-3: var(--warbler-brand);
}
/* 边框颜色 */
:root {
--warbler-border-color-1: rgba(82, 82, 89, 0.32);
--warbler-border-1: 1px solid var(--warbler-border-color-1);
}
/* 滚动条相关颜色 */
:root {
--warbler-scroll-thumb-color: #686868;
--warbler-scroll-track-color: #424242;
}
/* 字体 */
:root {
--warbler-font-family-base: 'Inter var', 'Inter', ui-sans-serif, system-ui, -apple-system,
BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'Noto Sans',
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--warbler-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace;
}
::-webkit-scrollbar {
/*滚动条整体样式*/
width: 8px;
/*高宽分别对应横竖滚动条的尺寸*/
}
::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
background-color: var(--warbler-scroll-thumb-color);
border-radius: 20px;
}
::-webkit-scrollbar-track {
/*滚动条里面轨道*/
/* 阴影 */
-webkit-box-shadow: inset 0 0 5px var(--warbler-black);
background: var(--warbler-scroll-track-color);
}
.fs12 {
font-size: 12px;
}
.fs14 {
font-size: 14px;
}
.fwb {
font-weight: bold;
}
.text-over-flow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cp {
cursor: pointer;
}
.spinner-box {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.spinner {
height: 50px;
width: 50px;
background: transparent;
border: red 3px solid;
border-top: transparent;
border-radius: 50%;
animation: animate81323 0.8s linear infinite;
}
@keyframes animate81323 {
0% {
border: 3px solid rgb(255, 75, 75);
border-top: transparent;
border-left: transparent;
transform: rotate(0deg);
}
50% {
border: 3px dashed rgb(240, 41, 240);
border-top: transparent;
border-left: transparent;
transform: rotate(270deg);
}
100% {
border: 3px dotted rgb(28, 228, 28);
border-top: transparent;
border-left: transparent;
transform: rotate(360deg);
}
}
================================================
FILE: src/views/contact/index.vue
================================================
<template>
<div class="contact">
<div class="wechat">
<img src="@/assets/image/wechat.jpeg" />
</div>
</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
.contact {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.wechat img {
width: 300px;
}
}
</style>
================================================
FILE: src/views/dataCenter/index.vue
================================================
<template>
<div class="data-center">数据中心</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
.data-center {
padding-top: var(--warbler-header-height);
width: 100%;
height: 100%;
overflow: auto;
}
</style>
================================================
FILE: src/views/homepage/canvas.ts
================================================
/* eslint-disable no-plusplus */
/* eslint-disable max-classes-per-file */
const E = {
friction: 0.5,
trails: 20,
size: 50,
dampening: 0.25,
tension: 0.98,
};
class Wave {
phase = 0;
offset = 0;
frequency = 0.001;
amplitude = 1;
constructor(e: Partial<Pick<Wave, 'phase' | 'offset' | 'frequency' | 'amplitude'>>) {
// 设置相位
this.phase = e.phase || 0;
// 设置偏移量
this.offset = e.offset || 0;
// 设置频率
this.frequency = e.frequency || 0.001;
// 设置振幅
this.amplitude = e.amplitude || 1;
}
update() {
this.phase += this.frequency;
return this.offset + Math.sin(this.phase) * this.amplitude;
}
}
class Node {
x = 0;
y = 0;
vy = 0;
vx = 0;
}
class Line {
spring = 0.1;
friction = 0.01;
nodes: Node[] = [];
// eslint-disable-next-line no-unused-vars
constructor(e: { spring: number }, private pos: { x: number; y: number }) {
this.spring = e.spring + 0.1 * Math.random() - 0.05;
this.friction = E.friction + 0.01 * Math.random() - 0.005;
this.nodes = [];
for (let i = 0; i < E.size; i++) {
const t = new Node();
t.x = this.pos.x;
t.y = this.pos.y;
this.nodes.push(t);
}
}
update() {
let { spring } = this;
let node = this.nodes[0];
node.vx += (this.pos.x - node.x) * spring;
node.vy += (this.pos.y - node.y) * spring;
let prevNode: Node;
for (let i = 0; i < this.nodes.length; i++) {
node = this.nodes[i];
if (i > 0) {
prevNode = this.nodes[i - 1];
node.vx += (prevNode.x - node.x) * spring;
node.vy += (prevNode.y - node.y) * spring;
node.vx += prevNode.vx * E.dampening;
node.vy += prevNode.vy * E.dampening;
}
node.vx *= this.friction;
node.vy *= this.friction;
node.x += node.vx;
node.y += node.vy;
spring *= E.tension;
}
}
draw(ctx: CanvasRenderingContext2D) {
let currNode;
let nextNode;
let { x } = this.nodes[0];
let { y } = this.nodes[0];
ctx.beginPath();
ctx.moveTo(x, y);
let i;
for (i = 1; i < this.nodes.length - 2; i++) {
currNode = this.nodes[i];
nextNode = this.nodes[i + 1];
x = 0.5 * (currNode.x + nextNode.x);
y = 0.5 * (currNode.y + nextNode.y);
ctx.quadraticCurveTo(currNode.x, currNode.y, x, y);
}
currNode = this.nodes[i];
nextNode = this.nodes[i + 1];
ctx.quadraticCurveTo(currNode.x, currNode.y, nextNode.x, nextNode.y);
ctx.stroke();
ctx.closePath();
}
}
export const renderCanvas = () => {
const canvas = document.getElementById('canvas') as HTMLCanvasElement;
// 获取canvas的2D上下文
const ctx: CanvasRenderingContext2D = canvas!.getContext('2d')!;
// 创建一个空的线数组
let lines: Line[] = [];
// 创建一个位置对象
const pos = { x: 0, y: 0 };
// 创建一个波浪对象
const wave = new Wave({
phase: Math.random() * 2 * Math.PI,
amplitude: 85,
frequency: 0.0015,
offset: 285,
});
// 创建一个布尔值，用来控制波浪的运行状态
let running = true;
// 创建一个函数，用来调整画布的大小
function resizeCanvas() {
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
}
resizeCanvas();
function animate() {
if (running) {
// 设置全局混合模式
ctx.globalCompositeOperation = 'source-over';
// 清除画布
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// 设置全局混合模式
ctx.globalCompositeOperation = 'lighter';
// 设置画笔颜色
ctx.strokeStyle = `hsla(${Math.round(wave.update())},90%,50%,0.25)`;
// 设置画笔线宽
ctx.lineWidth = 1;
// 遍历每一条线
for (let i = 0; i < E.trails; i++) {
const line = lines[i];
// 更新每条线的属性
line.update();
// 绘制每条线
line.draw(ctx);
}
// 请求动画帧
window.requestAnimationFrame(animate);
}
}
function bindMouseMove(event: Event) {
function drawLine() {
lines = [];
for (let i = 0; i < E.trails; i++) {
lines.push(new Line({ spring: 0.45 + (i / E.trails) * 0.025 }, pos));
}
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function move(e: any) {
e.preventDefault();
if (e.touches) {
pos.x = e.touches[0].pageX;
pos.y = e.touches[0].pageY;
} else {
pos.x = e.clientX;
pos.y = e.clientY;
}
}
function start(e: TouchEvent) {
if (e.touches.length === 1) {
pos.x = e.touches[0].pageX;
pos.y = e.touches[0].pageY;
}
}
document.removeEventListener('mousemove', bindMouseMove);
document.removeEventListener('touchstart', bindMouseMove);
document.addEventListener('mousemove', move);
document.addEventListener('touchmove', move);
document.addEventListener('touchstart', start);
move(event);
drawLine();
animate();
}
// 监听鼠标移动事件，绑定鼠标移动函数
document.addEventListener('mousemove', bindMouseMove);
// 监听触摸开始事件，绑定鼠标移动函数
document.addEventListener('touchstart', bindMouseMove);
// 监听设备方向改变事件，重新绘制画布
document.body.addEventListener('orientationchange', resizeCanvas);
// 监听窗口大小改变事件，重新绘制画布
window.addEventListener('resize', resizeCanvas);
// 监听窗口获取焦点事件，如果未运行，则运行动画
window.addEventListener('focus', () => {
if (!running) {
running = true;
animate();
}
});
// 监听窗口失去焦点事件，将运行状态设置为true
window.addEventListener('blur', () => {
running = true;
});
};
================================================
FILE: src/views/homepage/components/typewriter.vue
================================================
<template>
<div class="typewriter-box">
<div class="typewriter">
<div class="text">
江城开朗的豌豆，
<span class="Chinese ">
<span >让</span>
<span >前</span>
<span >端</span>
<span >再</span>
<span >简</span>
<span >单</span>
<span >一</span>
<span >点</span>
<span >。</span>
</span>
</div>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style lang="scss" scoped>
@keyframes waviy {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
:root {
--i: 1;
}
.waviy{
position: relative;
-webkit-box-reflect: below -10px linear-gradient(transparent,rgba(0,0,0,.2));
font-size: 36px;
}
.waviy span{
font-family: '微软雅黑',cursive;
position: relative;
display: inline-block;
text-transform: uppercase;
animation: waviy 1s uppercase;
animation-delay: calc(.1s * var(--i));
}
.typewriter-box {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
.text {
overflow: hidden;
white-space: nowrap;
animation: typeEffect 1s steps(70);
font-size: 36px;
@media (max-width: 900px) {
font-size: 24px;
}
@media (max-width: 500px) {
font-size: 16px;
}
font-weight: bold;
}
.Chinese {
letter-spacing: 0.05em;
}
@keyframes typeEffect {
from {
width: 0;
}
to {
width: 100%;
}
}
</style>
================================================
FILE: src/views/homepage/index.vue
================================================
<template>
<div class="homepage-view">
<canvas id="canvas" class="canvas"></canvas>
<typewriter></typewriter>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import typewriter from './components/typewriter.vue';
import { renderCanvas } from './canvas';
onMounted(() => {
renderCanvas();
});
</script>
<style lang="scss" scoped>
canvas {
display: block;
}
</style>
================================================
FILE: src/views/navigation/data/index.ts
================================================
import { ref } from 'vue';
export interface NavItem {
icon: string;
name: string;
link: string;
iconErrorText: string;
}
export type NavList = Array<NavItem>;
export interface NavGroup {
title: string;
list: NavList;
isPrivate?: boolean;
}
export type NavData = Array<NavGroup>;
export class NavListGetter {
// eslint-disable-next-line no-use-before-define
static navListGetter: NavListGetter = new NavListGetter();
// 获取 data 所在目录
getDataPath() {
return import.meta.glob('./list/*.ts', { eager: true });
}
// 获取目录下所有的文件
getAllData() {
// 获取 data 所在目录
const dataDirPath = this.getDataPath() as any;
// 定义响应式变量
const completeList = ref<NavData>([]);
Object.keys(dataDirPath).forEach((data) => {
// 动态添加数据
const {
default: { title, list, isPrivate = false },
} = dataDirPath[data];
completeList.value.push({
title,
list,
isPrivate,
});
});
return completeList;
}
}
export default NavListGetter.navListGetter.getAllData();
================================================
FILE: src/views/navigation/data/list/_b_vue.ts
================================================
import type { NavList } from '../index';
const list: NavList = [
{
icon: 'https://cn.vuejs.org/logo.svg',
name: 'Vue.js',
link: 'https://cn.vuejs.org/',
iconErrorText: '',
},
{
icon: 'https://cn.vuejs.org/logo.svg',
name: 'Vuex',
link: 'https://vuex.vuejs.org/zh/index.html',
iconErrorText: '',
},
{
icon: 'https://cn.vuejs.org/logo.svg',
name: 'Vue Router',
link: 'https://router.vuejs.org/zh/',
iconErrorText: '',
},
{
icon: 'https://cn.vuejs.org/logo.svg',
name: 'Vue CLI',
link: 'https://cli.vuejs.org/zh/guide/',
iconErrorText: '',
},
{
icon: 'https://cn.vuejs.org/logo.svg',
name: 'Vue I18n',
link: 'https://kazupon.github.io/vue-i18n/zh/',
iconErrorText: '',
},
{
icon: 'https://cn.vuejs.org/logo.svg',
name: 'VuePress',
link: 'https://v2.vuepress.vuejs.org/zh/',
iconErrorText: '',
},
{
icon: 'https://cn.vuejs.org/logo.svg',
name: 'VitePress',
link: 'https://vitepress.dev/',
iconErrorText: '',
},
{
icon: 'https://cn.vuejs.org/logo.svg',
name: 'eslint-plugin-vue',
link: 'https://eslint.vuejs.org/',
iconErrorText: '',
},
{
icon: 'https://cn.vuejs.org/logo.svg',
name: 'Vue Test Utils',
link: 'https://test-utils.vuejs.org/',
iconErrorText: '',
},
{
icon: 'https://vueuse.org/favicon-32x32.png',
name: 'VueUse 官网',
link: 'https://vueuse.org/',
iconErrorText: '',
},
{
icon: 'https://vueuse.org/favicon-32x32.png',
name: 'VueUse 中文',
link: 'https://www.vueusejs.com/',
iconErrorText: '',
},
{
icon: 'https://static.vue-js.com/6280b990-ff19-11ea-85f6-6fac77c0c9b3.png',
name: 'Vue3 One Piece',
link: 'https://vue3js.cn/',
iconErrorText: '',
},
{
icon: 'https://nuxt.com/icon.png',
name: 'Nuxt',
link: 'https://nuxt.com/',
iconErrorText: '',
},
{
icon: 'https://nuxt.com/icon.png',
name: 'Nuxt3 中文',
link: 'https://nuxt.com.cn/',
iconErrorText: '',
},
{
icon: 'https://pinia.vuejs.org/logo.svg',
name: 'Pinia',
link: 'https://pinia.vuejs.org/zh/',
iconErrorText: '',
},
{
icon: 'https://element-plus.gitee.io/images/element-plus-logo-small.svg',
name: 'Element Plus',
link: 'https://element-plus.gitee.io/zh-CN/',
iconErrorText: '',
},
{
icon: 'https://file.iviewui.com/view-design-logo.png',
name: 'View Design',
link: 'https://www.iviewui.com/',
iconErrorText: '',
},
{
icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',
name: 'Vant',
link: 'https://vant-contrib.gitee.io/vant/#/zh-CN/',
iconErrorText: '',
},
{
icon: 'https://aliyuncdn.antdv.com/favicon.ico',
name: 'Ant Design Vue',
link: 'https://www.antdv.com/components/overview-cn',
iconErrorText: '',
},
{
icon: 'https://www.naiveui.com/assets/naivelogo-93278402.svg',
name: 'Naive UI',
link: 'https://www.naiveui.com/zh-CN/light',
iconErrorText: '',
},
{
icon: 'https://vxetable.cn/v4/logo.png',
name: 'vxe-table',
link: 'https://vxetable.cn/',
iconErrorText: '',
},
{
icon: 'https://res.hc-cdn.com/tinyui-design/1.0.7.20230818162939/home/favicon.ico',
name: 'OpenTiny',
link: 'https://opentiny.design/',
iconErrorText: '',
},
{
icon: 'https://cdn.quasar.dev/logo-v2/favicon/favicon-128x128.png',
name: 'Quasar',
link: 'https://quasar.dev/',
iconErrorText: '',
},
];
const listData = {
title: 'Vue',
list,
};
export default listData;
================================================
FILE: src/views/navigation/data/list/_c_react.ts
================================================
import type { NavList } from '../index';
const list: NavList = [
{
icon: 'https://react.zcopy.site/favicon.ico',
name: 'React',
link: 'https://react.zcopy.site/',
iconErrorText: '',
},
{
icon: 'https://react.zcopy.site/favicon.ico',
name: 'React 中文网',
link: 'https://react.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://react.zcopy.site/favicon.ico',
name: 'React Native',
link: 'https://www.react-native.cn/',
iconErrorText: '',
},
{
icon: 'https://react.zcopy.site/favicon.ico',
name: 'Create React App',
link: 'https://cra.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://reactrouter.com/favicon-dark.png',
name: 'React Router',
link: 'https://reactrouter.com/en/main',
iconErrorText: '',
},
{
icon: 'https://cn.redux.js.org/img/favicon/favicon.ico',
name: 'Redux',
link: 'https://cn.redux.js.org/',
iconErrorText: '',
},
{
icon: 'https://img.alicdn.com/tfs/TB1YHEpwUT1gK0jSZFhXXaAtVXa-28-27.svg',
name: 'UmiJS',
link: 'https://umijs.org/',
iconErrorText: '',
},
{
icon: 'https://www.nextjs.cn/static/favicon/favicon-32x32.png',
name: 'Next.js',
link: 'https://www.nextjs.cn/',
iconErrorText: '',
},
{
icon: 'https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png',
name: 'Ant Design of React',
link: 'https://ant.design/docs/react/introduce-cn',
iconErrorText: '',
},
{
icon: 'https://ahooks.gitee.io/simple-logo.svg',
name: 'ahooks',
link: 'https://ahooks.gitee.io/zh-CN',
iconErrorText: '',
},
{
icon: 'https://img.alicdn.com/imgextra/i3/O1CN01XtT3Tv1Wd1b5hNVKy_!!6000000002810-55-tps-360-360.svg',
name: 'Alibaba Formily',
link: 'https://v2.formilyjs.org/zh-CN',
iconErrorText: '',
},
{
icon: 'https://recoiljs.org/zh-hans/img/favicon.png',
name: 'Recoil',
link: 'https://recoiljs.org/zh-hans/',
iconErrorText: '',
},
{
icon: 'https://lf9-static.semi.design/obj/semi-tos/images/favicon.ico',
name: 'Semi Design',
link: 'https://semi.design/zh-CN/',
iconErrorText: '',
},
{
icon: 'https://remix.run/favicon-192.png',
name: 'Remix',
link: 'https://remix.run/',
iconErrorText: '',
},
{
icon: 'https://docusaurus.nodejs.cn/img/docusaurus.ico',
name: 'Docusaurus',
link: 'https://docusaurus.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://preact.nodejs.cn/favicon.ico',
name: 'Preact',
link: 'https://preact.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://mobx.nodejs.cn/img/favicon.png',
name: 'MobX',
link: 'https://mobx.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://swr.nodejs.cn/favicon/favicon-32x32.png',
name: 'SWR',
link: 'https://swr.nodejs.cn/',
iconErrorText: '',
},
];
const listData = {
title: 'React',
list,
};
export default listData;
================================================
FILE: src/views/navigation/data/list/_d_css.ts
================================================
import type { NavList } from '../index';
const list: NavList = [
{
icon: 'https://sass.nodejs.cn/icon.png',
name: 'Sass',
link: 'https://sass.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://less.nodejs.cn/public/ico/favicon.ico',
name: 'Less',
link: 'https://less.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://www.stylus-lang.cn/favicon.ico',
name: 'Stylus',
link: 'https://stylus.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'http://postcss.docschina.org/_/web_modules/LayoutContainer/favicon-192x192.png',
name: 'PostCSS',
link: 'https://postcss.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://www.tailwindcss.cn/favicons/favicon-16x16.png?v=3',
name: 'Tailwind CSS',
link: 'https://tailwind.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://unocss.dev/favicon.svg',
name: 'UnoCSS',
link: 'https://unocss.dev/',
iconErrorText: '',
},
{
icon: 'https://windicss.org/assets/logo.svg',
name: 'Windi CSS',
link: 'https://windicss.org/',
iconErrorText: '',
},
{
icon: 'https://animate.style/img/favicon.ico',
name: 'Animate.css',
link: 'https://animate.style/',
iconErrorText: '',
},
{
icon: 'https://bootstrap.nodejs.cn/docs/5.3/assets/img/favicons/favicon-32x32.png',
name: 'Bootstrap',
link: 'https://bootstrap.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://neumorphism.io/favicon.ico',
name: '新拟态生成器',
link: 'https://neumorphism.io/',
iconErrorText: '',
},
{
icon: 'https://hype4.academy/favicon/apple-icon-60x60.png',
name: '三种拟态生成器',
link: 'https://hype4.academy/tools',
iconErrorText: '',
},
{
icon: 'https://error404.fun/img/favicon-32x32.png',
name: '404 Illustrations',
link: 'https://error404.fun/',
iconErrorText: '',
},
{
icon: 'https://cssgridgarden.com/favicon.ico',
name: 'Grid Garden',
link: 'https://cssgridgarden.com/#zh-cn',
iconErrorText: '',
},
{
icon: 'https://flexboxfroggy.com/favicon.ico',
name: 'Flexbox Froggy',
link: 'https://flexboxfroggy.com/#zh-cn',
iconErrorText: '',
},
{
icon: 'https://caniuse.com/img/favicon-128.png',
name: 'Can I use',
link: 'https://caniuse.com/',
iconErrorText: '',
},
{
icon: 'https://coolbackgrounds.io/images/favicon-fe5a0ff5.png',
name: 'Cool Backgrounds',
link: 'https://coolbackgrounds.io/',
iconErrorText: '',
},
{
icon: 'https://animista.net/favicon.ico',
name: '在线制作css动画',
link: 'https://animista.net/',
iconErrorText: '',
},
{
icon: 'https://cssgradient.io/images/favicon-23859487.png',
name: '渐变色制作',
link: 'https://cssgradient.io/',
iconErrorText: '',
},
{
icon: 'https://cssvalues.com/favicon.ico',
name: 'CSS属性速查',
link: 'https://cssvalues.com/',
iconErrorText: '',
},
{
icon: 'https://bennettfeely.com/clippy/pics/favicon.png',
name: 'CSS clip-path maker',
link: 'https://www.techbrood.com/tool?p=css-clip-path',
iconErrorText: '',
},
];
const listData = {
title: 'Css',
list,
};
export default listData;
================================================
FILE: src/views/navigation/data/list/_e1_javascript.ts
================================================
import type { NavList } from '../index';
const list: NavList = [
{
icon: 'https://www.lodashjs.com/img/favicon.ico',
name: 'Lodash',
link: 'https://www.lodashjs.com/',
iconErrorText: '',
},
{
icon: 'https://smartprocure.github.io/futil-js/icon.svg',
name: 'Futil',
link: 'https://smartprocure.github.io/futil-js/#overNone',
iconErrorText: '',
},
{
icon: 'https://es6.ruanyifeng.com/favicon.ico',
name: '阮一峰ES6',
link: 'https://es6.ruanyifeng.com/#docs/style',
iconErrorText: '',
},
{
icon: 'https://moment.nodejs.cn/static/img/moment-favicon.png',
name: 'Moment.js',
link: 'https://moment.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://dayjs.fenxianglu.cn/assets/favicon.png',
name: 'Day.js',
link: 'https://day.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://img-blog.csdnimg.cn/img_convert/291ca37b2f33b30ec6db6f2f9762d6e8.png',
name: 'swiper',
link: 'https://www.swiper.com.cn/',
iconErrorText: '',
},
{
icon: 'http://mockjs.com/assets/img/logo-2.svg',
name: 'Mock.js',
link: 'http://mockjs.com/',
iconErrorText: '',
},
{
icon: 'https://ejs.bootcss.com/assets/images/ejs-logo.png',
name: 'EJS',
link: 'https://ejs.bootcss.com/#promo',
iconErrorText: '',
},
{
icon: 'https://handlebars.nodejs.cn/images/favicon.png',
name: 'Handlebars',
link: 'https://handlebars.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://pug.nodejs.cn/images/favicon-32x32.png',
name: 'Pug',
link: 'https://pug.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://mathjs.org/favicon.ico',
name: 'Math.js',
link: 'https://mathjs.org/',
iconErrorText: '',
},
{
icon: 'https://printjs.crabbly.com/assets/favicon.ico',
name: 'Print.js',
link: 'https://printjs.crabbly.com/',
iconErrorText: '',
},
{
icon: 'http://mozilla.github.io/pdf.js/images/favicon.ico',
name: 'PDF.js',
link: 'http://mozilla.github.io/pdf.js/',
iconErrorText: '',
},
{
icon: 'https://xlsx.nodejs.cn/img/favicon.ico',
name: 'SheetJS',
link: 'https://xlsx.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'http://cdn.dooring.cn/dr/xijs.png',
name: 'xijs',
link: 'http://h5.dooring.cn/xijs',
iconErrorText: '',
},
{
icon: 'https://axios.nodejs.cn/assets/favicon.ico',
name: 'Axios',
link: 'https://axios.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://rx.nodejs.cn/assets/images/favicons/favicon.ico',
name: 'RxJS',
link: 'https://rx.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://floating-ui.com/favicon.ico',
name: 'Floating UI',
link: 'https://floating.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://cheerio.nodejs.cn/img/favicon.ico',
name: 'Cheerio',
link: 'https://cheerio.nodejs.cn/',
iconErrorText: '',
},
{
icon: '',
name: 'localForage',
link: 'https://localforage.docschina.org/',
iconErrorText: '',
},
];
const listData = {
title: 'JavaScript',
list,
};
export default listData;
================================================
FILE: src/views/navigation/data/list/_e2_typescript.ts
================================================
import type { NavList } from '../index';
const list: NavList = [
{
icon: 'https://www.typescriptlang.org/favicon-32x32.png?v=8944a05a8b601855de116c8a56d3b3ae',
name: 'TypeScript',
link: 'https://ts.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://ts.xcatliu.com/favicon.png',
name: 'TypeScript 入门教程',
link: 'https://ts.xcatliu.com/',
iconErrorText: '',
},
{
icon: 'https://ts.xcatliu.com/favicon.png',
name: '深入理解 TypeScript',
link: 'https://jkchao.github.io/typescript-book-chinese/',
iconErrorText: '',
},
{
icon: 'https://tsch.js.org/favicon.svg',
name: 'TypeScript 类型挑战',
link: 'https://tsch.js.org/',
iconErrorText: '',
},
];
const listData = {
title: 'Typescript',
list,
};
export default listData;
================================================
FILE: src/views/navigation/data/list/_f_node.ts
================================================
import type { NavList } from '../index';
const list: NavList = [
{
icon: 'https://img.nodejs.cn/favicon.png',
name: 'Node.js 中文文档',
link: 'https://nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://img.nodejs.cn/favicon.png',
name: 'Node.js 英文官网',
link: 'https://nodejs.org/en',
iconErrorText: '',
},
{
icon: 'https://www.expressjs.com.cn/images/favicon.png',
name: 'Express',
link: 'https://express.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://koa.nodejs.cn/public/favicon.png',
name: 'koa',
link: 'https://koa.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://www.eggjs.org/logo.svg',
name: 'Egg',
link: 'https://www.eggjs.org/zh-CN',
iconErrorText: '',
},
{
icon: 'https://docs.nestjs.com/favicon.ico',
name: 'Nest',
link: 'https://nest.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://nodejstoolbox.com/favicon-32x32.png',
name: 'Node.js Toolbox',
link: 'https://nodejstoolbox.com/',
iconErrorText: '',
},
{
icon: 'https://pptr.nodejs.cn/img/favicon.ico',
name: 'Puppeteer',
link: 'https://pptr.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://www.prisma.io/images/favicon-32x32.png',
name: 'Prisma',
link: 'https://prisma.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://graphql.nodejs.cn/favicon.ico',
name: 'GraphQL',
link: 'https://graphql.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://sequelize.nodejs.cn/img/logo.svg',
name: 'Sequelize',
link: 'https://sequelize.nodejs.cn/',
iconErrorText: '',
},
];
const listData = {
title: 'NodeJS',
list,
};
export default listData;
================================================
FILE: src/views/navigation/data/list/_g_officialDocuments.ts
================================================
import type { NavList } from '../index';
const list: NavList = [
{
icon: 'https://developer.mozilla.org/apple-touch-icon.6803c6f0.png',
name: 'MDN Web Docs',
link: 'https://developer.mozilla.org/zh-CN/',
iconErrorText: '',
},
{
icon: 'https://static.sitestack.cn/uploads/icons/2851629677557.png',
name: 'Socket.IO',
link: 'https://socket.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://www.sveltejs.cn/favicon.ico',
name: 'Svelte',
link: 'https://www.sveltejs.cn/',
iconErrorText: '',
},
{
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/d23e842c-58fc-4574-998d-17fdc7811cc3.png?v=1556263038788',
name: 'uni-app',
link: 'https://uniapp.dcloud.net.cn/',
iconErrorText: '',
},
{
icon: 'https://angular.cn/assets/images/favicons/favicon.ico',
name: 'Angular',
link: 'https://angular.cn/',
iconErrorText: '',
},
{
icon: 'https://www.solidjs.cn/img/favicons/favicon-32x32.png',
name: 'solid',
link: 'https://www.solidjs.cn/',
iconErrorText: '',
},
{
icon: 'https://www.electronjs.org/zh/assets/img/favicon.ico',
name: 'Electron',
link: 'https://www.electronjs.org/zh/',
iconErrorText: '',
},
{
icon: 'https://tauri.app/zh-cn/meta/favicon-96x96.png',
name: 'tauri',
link: 'https://tauri.app/zh-cn/',
iconErrorText: '',
},
{
icon: 'https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico',
name: '微信小程序',
link: 'https://developers.weixin.qq.com/miniprogram/dev/framework/',
iconErrorText: '',
},
{
icon: 'https://cdn.docschina.org/home/logo/taro.png',
name: 'Taro',
link: 'https://taro-docs.jd.com/docs',
iconErrorText: '',
},
{
icon: 'https://doc.flutterchina.club/images/favicon.png',
name: 'Flutter',
link: 'https://flutterchina.club/',
iconErrorText: '',
},
{
icon: 'https://npm.nodejs.cn/favicon-32x32.png?v=f44ec608ba91563f864a30a276cd9065',
name: 'NPM 中文网',
link: 'https://npm.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://flow.nodejs.cn/img/favicon.png',
name: 'FLOW',
link: 'https://flow.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://www.dartcn.com/assets/shared/dart/icon/64.png',
name: 'Dart',
link: 'https://www.dartcn.com/',
iconErrorText: '',
},
{
icon: 'https://quarkc.hellobike.com/assets/favicon.7b83b3c2.ico',
name: 'Quarkc',
link: 'https://quarkc.hellobike.com/#/',
iconErrorText: '',
},
{
icon: 'https://astro.build/favicon.svg',
name: 'Astro',
link: 'https://astro.build/',
iconErrorText: '',
},
{
icon: 'https://qwik.builder.io/favicons/favicon.svg',
name: 'Qwik',
link: 'https://qwik.builder.io/',
iconErrorText: '',
},
{
icon: 'https://www.rust-lang.org/static/images/rust-logo-blk.svg',
name: 'Rust',
link: 'https://www.rust-lang.org/zh-CN/',
iconErrorText: '',
},
{
icon: 'https://mdx.nodejs.cn/icon.svg',
name: 'MDX',
link: 'https://mdx.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://assemblyscript.nodejs.cn/favicon.ico',
name: 'AssemblyScript',
link: 'https://assemblyscript.nodejs.cn/',
iconErrorText: '',
},
];
const listData = {
title: '官方文档',
list,
};
export default listData;
================================================
FILE: src/views/navigation/data/list/_h_charts.ts
================================================
import type { NavList } from '../index';
const list: NavList = [
{
icon: 'https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1',
name: 'Apache ECharts',
link: 'https://echarts.apache.org/zh/index.html',
iconErrorText: '',
},
{
icon: 'https://chart.nodejs.cn/favicon.ico',
name: 'Chart.js',
link: 'https://chart.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://www.isqqw.com/favicon.ico',
name: 'ECharts 图表集',
link: 'https://www.isqqw.com/',
iconErrorText: '',
},
{
icon: 'https://threejs.org/files/favicon_white.ico',
name: 'three.js',
link: 'https://threejs.org/docs/index.html#manual/zh/introduction/Installation',
iconErrorText: '',
},
{
icon: 'http://fabricjs.com/favicon.ico',
name: 'Fabric.js',
link: 'http://fabricjs.com/',
iconErrorText: '',
},
{
icon: 'https://s1.jscdn.com.cn/highcharts/images/favicon.ico',
name: 'Highcharts',
link: 'https://www.hcharts.cn/',
iconErrorText: '',
},
{
icon: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7svFR6wkPMoAAAAAAAAAAAAADmJ7AQ/original',
name: 'AntV',
link: 'https://antv.vision/',
iconErrorText: '',
},
{
icon: 'https://d3js.org/logo.png',
name: 'D3.js',
link: 'https://d3js.org/',
iconErrorText: '',
},
{
icon: 'https://apexcharts.com/wp-content/themes/apexcharts/favicon.ico',
name: 'ApexCharts',
link: 'https://apexcharts.com/',
iconErrorText: '',
},
{
icon: 'http://ppchart.com/favicon.ico',
name: 'PPChart',
link: 'http://ppchart.com/#/',
iconErrorText: '',
},
];
const listData = {
title: '视觉图表库',
list,
};
export default listData;
================================================
FILE: src/views/navigation/data/list/_i_codeManager.ts
================================================
import type { NavList } from '../index';
const list: NavList = [
{
icon: 'https://img2.baidu.com/it/u=83310884,27671367&fm=253&fmt=auto&app=138&f=PNG?w=256&h=256',
name: 'Github',
link: 'https://github.com/',
iconErrorText: '',
},
{
icon: 'https://git-scm.com/favicon.ico',
name: 'Git',
link: 'https://github.com/',
iconErrorText: '',
},
{
icon: 'https://gitee.com/favicon.ico',
name: 'Gitee',
link: 'https://git-scm.com/',
iconErrorText: '',
},
{
icon: 'https://static.npmjs.com/7a7ffabbd910fc60161bc04f2cee4160.png',
name: 'NPM',
link: 'https://www.npmjs.com/',
iconErrorText: '',
},
{
icon: 'https://npm-stat.com/favicon.ico',
name: 'NPM下载量查询',
link: 'https://npm-stat.com/',
iconErrorText: '',
},
{
icon: 'https://about.gitlab.com/nuxt-images/ico/favicon-192x192.png?cache=2022041',
name: 'Gitlab',
link: 'https://about.gitlab.com/',
iconErrorText: '',
},
{
icon: 'https://www.travis-ci.com/wp-content/uploads/2022/05/travis-ci-mascot-1-300x300.png',
name: 'Travis-CI',
link: 'https://www.travis-ci.com/',
iconErrorText: '',
},
{
icon: 'https://www.yarnpkg.cn/favicon-32x32.png?v=6143f50112ddba9fdb635b0af2f32aff',
name: 'Yarn',
link: 'https://yarn.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://d33wubrfki0l68.cloudfront.net/2f3acb83b7d2349f2194bc38c0f22f295908dc33/6a6e6/zh/img/pnpm-no-name-with-frame.svg',
name: 'pnpm',
link: 'https://pnpm.io/zh/',
iconErrorText: '',
},
{
icon: 'https://lerna.nodejs.cn/images/favicon.ico',
name: 'Lerna',
link: 'https://lerna.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://zh-hans.eslint.org/favicon.ico',
name: 'ESlint',
link: 'https://zh-hans.eslint.org/',
iconErrorText: '',
},
{
icon: 'https://prettier.nodejs.cn/icon.png',
name: 'Prettier',
link: 'https://prettier.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://stylelint.nodejs.cn/img/favicon.ico',
name: 'Stylelint',
link: 'https://stylelint.nodejs.cn/',
iconErrorText: '',
},
];
const listData = {
title: '代码管理',
list,
};
export default listData;
================================================
FILE: src/views/navigation/data/list/_j_buildTools.ts
================================================
import type { NavList } from '../index';
const list: NavList = [
{
icon: 'https://cn.vitejs.dev/logo.svg',
name: 'Vite',
link: 'https://cn.vitejs.dev',
iconErrorText: '',
},
{
icon: 'https://www.webpackjs.com/icon_144x144.png',
name: 'webpack',
link: 'https://webpack.docschina.org/',
iconErrorText: '',
},
{
icon: 'https://www.gulpjs.com.cn/img/favicon.png',
name: 'gulp',
link: 'https://gulp.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://turbo.build/images/favicon-light/favicon-32x32.png',
name: 'Turbopack',
link: 'https://turbo.build/pack',
iconErrorText: '',
},
{
icon: 'https://www.babeljs.cn/img/favicon.png',
name: 'Babel',
link: 'https://babel.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://www.rollupjs.com/img/favicon.png',
name: 'Rollup',
link: 'https://www.rollupjs.com/',
iconErrorText: '',
},
{
icon: 'https://parceljs.org/favicon.fe6f9d11.ico',
name: 'Parcel',
link: 'https://parcel.nodejs.cn/',
iconErrorText: '',
},
];
const listData = {
title: '构建工具',
list,
};
export default listData;
================================================
FILE: src/views/navigation/data/list/_k_micro.ts
================================================
import type { NavList } from '../index';
const list: NavList = [
{
icon: 'https://zeroing.jd.com/micro-app/favicon.ico',
name: 'MicroApp',
link: 'https://zeroing.jd.com/micro-app/',
iconErrorText: '',
},
{
icon: 'https://zh-hans.single-spa.js.org/img/logo-blue-favicon.ico',
name: 'single-spa',
link: 'https://zh-hans.single-spa.js.org/',
iconErrorText: '',
},
{
icon: 'https://gw.alipayobjects.com/mdn/rms_655822/afts/img/A*4sIUQpcos_gAAAAAAAAAAAAAARQnAQ',
name: 'qiankun',
link: 'https://qiankun.umijs.org/zh',
iconErrorText: '',
},
{
icon: 'https://micro-frontends.ice.work/img/favicon.ico',
name: 'icestark',
link: 'https://micro-frontends.ice.work/',
iconErrorText: '',
},
{
icon: 'https://wujie-micro.github.io/doc//favicon.ico',
name: '无界',
link: 'https://wujie-micro.github.io/doc/',
iconErrorText: '',
},
{
icon: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/dhozeh7vhpebvog/open-garfish/icons/icon.png',
name: 'Garfish',
link: 'https://www.garfishjs.org/',
iconErrorText: '',
},
];
const listData = {
title: '微前端',
list,
};
export default listData;
================================================
FILE: src/views/navigation/data/list/_k_test.ts
================================================
import type { NavList } from '../index';
const list: NavList = [
{
icon: 'https://jestjs.io/zh-Hans/img/favicon/favicon.ico',
name: 'Jest',
link: 'https://jestjs.io/zh-Hans/',
iconErrorText: '',
},
{
icon: 'https://mocha.nodejs.cn/favicon.ico',
name: 'Mocha',
link: 'https://mocha.nodejs.cn/',
iconErrorText: '',
},
{
icon: 'https://playwright.nodejs.cn/img/playwright-logo.svg',
name: 'Playwright',
link: 'https://playwright.nodejs.cn/',
iconErrorText: '',
},
];
const listData = {
title: '测试库',
list,
};
export default listData;
================================================
FILE: src/views/navigation/data/list/_l_devTools.ts
================================================
import type { NavList } from '../index';
const list: NavList = [
{
icon: 'https://regexr.com/assets/icons/apple-touch-icon.png',
name: '正则表达式',
link: 'https://regexr.com/',
iconErrorText: '',
},
{
icon: 'https://uiverse.io/favicon-32x32.png',
name: 'uiverse 组件',
link: 'https://uiverse.io/',
iconErrorText: '',
},
{
icon: 'https://img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg',
name: '阿里巴巴图标库',
link: 'https://www.iconfont.cn/',
iconErrorText: '',
},
{
icon: 'https://tinypng.com/images/favicon.ico',
name: 'TinyPNG 图片压缩',
link: 'https://tinypng.com/',
iconErrorText: '',
},
{
icon: 'https://www.yalijuda.com/qfy-content/uploads/2020/05/81a83783c78bbe2002d50d4a16c55e21.png',
name: 'yalijuda 图片压缩',
link: 'https://www.yalijuda.com/',
iconErrorText: '',
},
{
icon: 'http://www.aseoe.com/favicon.ico',
name: 'Emmet快捷方式查询',
link: 'http://www.aseoe.com/special/emmet/',
iconErrorText: '',
},
{
icon: 'https://carbon.now.sh/favicon.ico',
name: 'carbon',
link: 'https://carbon.now.sh/',
iconErrorText: '',
},
{
icon: 'http://jsonplaceholder.typicode.com/favicon.ico',
name: 'JSONPlaceholder ',
link: 'http://jsonplaceholder.typicode.com/',
iconErrorText: '',
},
{
icon: 'https://c.staticblitz.com/assets/favicon_sb-148f9e9aced4a6363b4a8232686c3d8998d3eabaab1a06385fd3f1996baf3a3e.png',
name: '代码在线编辑',
link: 'https://stackblitz.com/',
iconErrorText: '',
},
{
icon: 'https://transfonter.org/favicon.ico',
name: '字体格式转换',
link: 'https://transfonter.org/',
iconErrorText: '',
},
{
icon: 'https://ts.xcatliu.com/favicon.png',
name: 'TS转JS代码',
link: 'https://www.typescriptlang.org/zh/play?',
iconErrorText: '',
},
{
icon: 'https://overapi.com/favicon.ico',
name: 'OverAPI',
link: 'https://overapi.com/',
iconErrorText: '',
},
{
icon: 'https://www.bootcdn.cn/assets/ico/favicon.ico?1644166305141',
name: 'BootCDN',
link: 'https://www.bootcdn.cn/',
iconErrorText: '',
},
{
icon: 'https://sunpma.com/other/rgb/favicon.ico',
name: '颜色转换工具',
link: 'https://sunpma.com/other/rgb/',
iconErrorText: '',
},
{
icon: 'https://any86.github.io/any-rule/favicon.ico',
name: '正则大全',
link: 'https://any86.github.io/any-rule/',
iconErrorText: '',
},
{
icon: 'https://www.toptal.com/developers/css/sprite-generator/static/images/favicon.png',
name: '制作精灵图',
link: 'https://www.toptal.com/developers/css/sprite-generator',
iconErrorText: '',
},
];
const listData = {
title: '开发工具',
list,
};
export default listData;
================================================
FILE: src/views/navigation/data/list/_m_otherTools.ts
================================================
import type { NavList } from '../index';
const list: NavList = [
{
icon: 'https://tool.browser.qq.com/favicon.ico',
name: '腾讯帮小忙',
link: 'https://tool.browser.qq.com/',
iconErrorText: '',
},
{
icon: 'https://www.runjs.cool/favicon-32x32.png',
name: '前端工具箱',
link: 'https://www.runjs.cool/',
iconErrorText: '',
},
{
icon: '',
name: '万能命令',
link: 'https://wannengrun.net/zh/',
iconErrorText: '',
},
{
icon: '',
name: '网页转换助手',
link: 'http://www.html22.com/zh/',
iconErrorText: '',
},
{
icon: 'https://static.runoob.com/images/c-runoob-logo.ico',
name: '菜鸟工具',
link: 'https://c.runoob.com/',
iconErrorText: '',
},
{
icon: 'https://tools.miku.ac/favicon.ico',
name: 'MikuTools',
link: 'https://tools.miku.ac/',
iconErrorText: '',
},
{
icon: 'https://tool.lu/favicon.ico',
name: '在线工具',
link: 'https://tool.lu/',
iconErrorText: '',
},
{
icon: 'https://static.clewm.net/static/images/favicon.ico',
name: '草料二维码',
link: 'https://cli.im/',
iconErrorText: '',
},
{
icon: 'https://www.aconvert.com/favicon.ico',
name: '格式转换',
link: 'https://www.aconvert.com/cn/',
iconErrorText: '',
},
{
icon: 'https://tools.pdf24.org/static/img/pdf24.png?v=5cf19973',
name: 'PDF24 Tools',
link: 'https://tools.pdf24.org/zh/all-tools',
iconErrorText: '',
},
];
const listData = {
title: '其它工具',
list,
};
export default listData;
================================================
FILE: src/views/navigation/data/list/_n_technologicalGrowth.ts
================================================
import type { NavList } from '../index';
const list: NavList = [
{
icon: 'https://1loc.dev/assets/favicon.png',
name: '1loc',
link: 'https://phuoc.ng/collection/1-loc/',
iconErrorText: '',
},
{
icon: 'https://fenxianglu.cn/build/images/favicon.png',
name: '技术开发分享录',
link: 'https://fenxianglu.cn/',
iconErrorText: '',
},
{
icon: 'https://static.sitestack.cn/static/images/cate.png',
name: '书栈网',
link: 'https://www.bookstack.cn/',
iconErrorText: '',
},
{
icon: 'https://www.imooc.com/static/img/common/touch-icon-ipad.png',
name: '慕课网',
link: 'https://www.imooc.com/',
iconErrorText: '',
},
{
icon: 'https://zh.javascript.info/img/favicon/favicon.png',
name: '现代 JavaScript 教程',
link: 'https://zh.javascript.info/',
iconErrorText: '',
},
{
icon: 'https://static.nowcoder.com/fe/common/share-logo.png',
name: '牛客网',
link: 'https://www.nowcoder.com/',
iconErrorText: '',
},
{
icon: 'https://leetcode.cn/favicon.ico',
name: '力扣',
link: 'https://leetcode.cn/',
iconErrorText: '',
},
{
icon: 'https://www.runoob.com/favicon.ico',
name: '菜鸟教程',
link: 'https://www.runoob.com/',
iconErrorText: '',
},
{
icon: 'https://senior-frontend.pages.dev/logo.png',
name: 'web全栈体系',
link: 'https://senior-frontend.pages.dev/',
iconErrorText: '',
},
{
icon: 'https://www.w3school.com.cn/ui2019/logo-16-red.png',
name: 'w3school',
link: 'https://www.w3school.com.cn/index.html',
iconErrorText: '',
},
{
icon: 'https://docschina.org/favicon.ico',
name: '印记中文',
link: 'https://docschina.org/',
iconErrorText: '',
},
{
icon: 'https://www.ruanyifeng.com/favicon.ico',
name: '阮一峰博客',
link: 'https://www.ruanyifeng.com/blog/',
iconErrorText: '',
},
{
icon: 'https://www.eveningwater.com/static/image/icon.jpg',
name: '剑指offer算法题',
link: 'https://eveningwater.github.io/to-offer/#/',
iconErrorText: '',
},
];
const listData = {
title: '技术成长',
list,
};
export default listData;
================================================
FILE: src/views/navigation/data/list/_o_community.ts
================================================
import type { NavList } from '../index';
const list: NavList = [
{
icon: '//img10.360buyimg.com/imgzone/jfs/t1/186536/13/4431/3960/60a78f0bE4ad7f0a3/171ce78b77cc7e6a.png',
name: '稀土掘金',
link: 'https://juejin.cn',
iconErrorText: '',
},
{
icon: '//img10.360buyimg.com/imgzone/jfs/t1/183316/16/5315/4826/60a78f0bE6e6ab8c1/6ffac998c8ac18b3.png',
name: 'CSDN',
link: 'https://blog.csdn.net',
iconErrorText: '',
},
{
icon: '//img10.360buyimg.com/imgzone/jfs/t1/179072/12/5303/3635/60a78f0bE1f852fa0/ee5324fbf9a8a6ac.png',
name: '知乎',
link: 'https://www.zhihu.com',
iconErrorText: '',
},
{
icon: '//img10.360buyimg.com/imgzone/jfs/t1/175106/7/10878/4308/60a78f0bEe6f042bf/51a6d7e23be70abb.png',
name: '简书',
link: 'https://www.jianshu.com',
iconErrorText: '',
},
{
icon: '//img10.360buyimg.com/imgzone/jfs/t1/171853/3/11304/4673/60ab1010E35acf458/3a07a327d7610b7a.png',
name: '吾爱论坛',
link: 'https://www.52pojie.cn/',
iconErrorText: '',
},
{
icon: 'https://img0.baidu.com/it/u=79953717,2799506716&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
name: '博客园',
link: 'https://www.cnblogs.com/',
iconErrorText: '',
},
{
icon: 'https://static.segmentfault.com/main_site_next/42386ea6/touch-icon.png',
name: 'segmentfault',
link: 'https://segmentfault.com/',
iconErrorText: '',
},
{
icon: 'https://static2.cnodejs.org/public/images/cnode_icon_32.png',
name: 'CNode',
link: 'https://cnodejs.org/',
iconErrorText: '',
},
{
icon: 'https://static.oschina.net/new-osc/img/favicon.ico',
name: '开源中国',
link: 'https://www.oschina.net/',
iconErrorText: '',
},
];
const listData = {
title: '技术社区',
list,
};
export default listData;
================================================
FILE: src/views/navigation/data/list/w_drawPicture.ts
================================================
import type { NavList } from '../index';
const list: NavList = [
{
icon: 'https://nrdstudio.cn/res/logo.png',
name: '享岚脑图',
link: 'https://nrdstudio.cn/',
iconErrorText: '',
},
{
icon: 'https://www.gaituya.com/favicon.ico',
name: '改图鸭',
link: 'https://www.gaituya.com/',
iconErrorText: '',
},
{
icon: 'https://www.processon.com/favicon.ico',
name: 'ProcessOn',
link: 'https://www.processon.com/',
iconErrorText: '',
},
{
icon: 'https://www.isheji.com/isheji_favicon.ico',
name: '智能抠图',
link: 'https://www.isheji.com/cutout/workbench?img_id=60c9b7284a9a3',
iconErrorText: '',
},
{
icon: 'https://app.diagrams.net/images/favicon-32x32.png',
name: 'Draw.io',
link: 'https://app.diagrams.net/',
iconErrorText: '',
},
{
icon: 'https://imgse.com/content/images/system/favicon_1587118523486_91617a.png',
name: '路过图床',
link: 'https://imgse.com/',
iconErrorText: '',
},
{
icon: 'http://zhongguose.com/favicon.ico',
name: '中国传统颜色',
link: 'http://zhongguose.com/',
iconErrorText: '',
},
{
icon: 'https://www.pexels.com/assets/static/images/meta/apple-touch-icon.png',
name: 'Pexels',
link: 'https://www.pexels.com/zh-cn/',
iconErrorText: '',
},
{
icon: 'https://616pic.com/favicon.ico',
name: '图精灵',
link: 'https://616pic.com/',
iconErrorText: '',
},
{
icon: 'https://wall.alphacoders.com/favicon.ico',
name: 'allpaper Abyss',
link: 'https://wall.alphacoders.com/',
iconErrorText: '',
},
{
icon: 'https://pic.netbian.com/favicon.ico',
name: '彼岸图网',
link: 'https://pic.netbian.com/',
iconErrorText: '',
},
{
icon: 'https://unsplash.com/favicon.ico',
name: 'unsplash',
link: 'https://unsplash.com/',
iconErrorText: '',
},
{
icon: 'https://www.fontspace.com/favicon.ico',
name: '免费字体',
link: 'https://www.fontspace.com/',
iconErrorText: '',
},
{
icon: 'https://wallhaven.cc/favicon.ico',
name: 'Awesome Wallpapers',
link: 'https://wallhaven.cc/',
iconErrorText: '',
},
{
icon: 'https://www.qijishow.com/img/ico.ico',
name: '奇迹秀',
link: 'https://www.qijishow.com/',
iconErrorText: '',
},
{
icon: 'https://ps.gaoding.com/favicon.ico',
name: '在线PS',
link: 'https://ps.gaoding.com/#/',
iconErrorText: '',
},
{
icon: 'https://www.pixilart.com/images/favicon/favicon-32x32.png?v=jw6qNMPWz4',
name: '像素风格制作',
link: 'https://www.pixilart.com/draw',
iconErrorText: '',
},
{
icon: 'https://c-ssl.dtstatic.com/uploads/icons/duitang_favicon.ico',
name: '堆糖',
link: 'https://www.duitang.com/',
iconErrorText: '',
},
];
const listData = {
title: '找图作图',
list,
};
export default listData;
================================================
FILE: src/views/navigation/data/list/x_audioVideo.ts
================================================
import type { NavList } from '../index';
const list: NavList = [
{
icon: 'https://www.nkvod.com/mxtheme/images/favicon.png',
name: '耐看点播',
link: 'https://www.nkvod.com/',
iconErrorText: '',
},
{
icon: '',
name: 'Listen1',
link: 'https://listen1.github.io/listen1/',
iconErrorText: '',
},
{
icon: '',
name: 'VIP视频在线解析',
link: 'https://www.yijingying.com/html/video/',
iconErrorText: '',
},
{
icon: 'https://lxmusic.toside.cn/img/favicon.ico',
name: 'LX Music',
link: 'https://lxmusic.toside.cn/',
iconErrorText: '',
},
{
icon: 'https://www.manmankan.com/favicon.ico',
name: '漫漫看',
link: 'https://www.manmankan.com/dy2013/',
iconErrorText: '',
},
{
icon: 'https://www.meijutt.tv/favicon.ico',
name: '美剧天堂',
link: 'https://www.meijutt.tv/',
iconErrorText: '',
},
{
icon: 'https://img95.699pic.com/xsj/03/gv/6e.jpg%21/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast',
name: '电影天堂',
link: 'https://dy.dytt8.net/index2.htm',
iconErrorText: '',
},
{
icon: '//img10.360buyimg.com/imgzone/jfs/t1/175602/32/10753/6436/60a788aaEcd9d368c/c70edec8e418ef15.png',
name: '优酷视频',
link: 'https://www.youku.com',
iconErrorText: '',
},
{
icon: '//img10.360buyimg.com/imgzone/jfs/t1/174971/9/10559/3897/60a789e9E06a8ff80/1d76f1a9a1948bab.png',
name: '爱奇艺视频',
link: 'https://www.iqiyi.com',
iconErrorText: '',
},
{
icon: '//img10.360buyimg.com/imgzone/jfs/t1/178133/4/5313/5149/60a789e9E53ca6456/93962a3ad2207a1f.png',
name: '芒果视频',
link: 'https://www.mgtv.com',
iconErrorText: '',
},
{
icon: '//img10.360buyimg.com/imgzone/jfs/t1/174642/31/11085/4236/60ab0e5eEae1f6f4e/4de8481661d812e3.png',
name: '哔哩哔哩',
link: 'https://www.bilibili.com',
iconErrorText: '',
},
{
icon: '//img10.360buyimg.com/imgzone/jfs/t1/193408/32/4343/6479/60a78929E4303368d/c342786431ace070.png',
name: '腾讯视频',
link: 'https://v.qq.com',
iconErrorText: '',
},
{
icon: 'https://lol.qq.com/favicon.ico',
name: '英雄联盟赛事官网',
link: 'https://lpl.qq.com',
iconErrorText: '',
},
{
icon: '//img10.360buyimg.com/imgzone/jfs/t1/187918/2/5444/8610/60b0bc77Edf1444c4/f714caae245d0d79.png',
name: '虎牙直播',
link: 'https://www.huya.com',
iconErrorText: '',
},
{
icon: '//img10.360buyimg.com/imgzone/jfs/t1/196801/11/5211/8955/60b0bc77Ed6fa9536/c2bc9d6ec1217ee0.png',
name: '斗鱼直播',
link: 'https://www.douyu.com',
iconErrorText: '',
},
];
const listData = {
title: '影视音乐',
list,
};
export default listData;
================================================
FILE: src/views/navigation/data/list/y_navigation.ts
================================================
import type { NavList } from '../index';
const list: NavList = [
{
icon: 'https://www.zkdh.net/wp-content/uploads/2020/05/ic_launcher.png',
name: '掌酷影音导航',
link: 'https://www.zkdh.net/',
iconErrorText: '',
},
{
icon: 'https://media.ailongmiao.com/uploads/2021/09/favicon.png',
name: '龙猫网址导航',
link: 'https://ailongmiao.com/web/',
iconErrorText: '',
},
{
icon: 'https://image.uisdc.com/wp-content/uploads/2018/09/nav-dkt-new2018.jpg',
name: '优设网址导航',
link: 'https://hao.uisdc.com/',
iconErrorText: '',
},
{
icon: 'http://www.sankedan.com/static/assets/demo/default/media/img/logo/favicon.ico',
name: '三颗蛋导航',
link: 'http://www.sankedan.com/',
iconErrorText: '',
},
{
icon: 'https://mp-b28966cb-26bc-43ae-b98b-aa286fad0729.cdn.bspapp.com/cloudstorage/31e91b77-d492-4f27-9ce1-d20ad54ad8e2.ico',
name: '前端导航',
link: 'https://www.5cv.top/',
iconErrorText: '',
},
];
const listData = {
title: '导航集合',
list,
};
export default listData;
================================================
FILE: src/views/navigation/data/list/z_something.ts
================================================
import type { NavList } from '../index';
const list: NavList = [
{
icon: 'http://user.vipmall.cc/Public/H5/images/favicon.ico',
name: '低价会员商城',
link: 'http://user.vipmall.cc/',
iconErrorText: '',
},
{
icon: 'https://cat2.imiku.me/favicon-32x32.png',
name: '文心AI',
link: 'https://cat2.imiku.me/',
iconErrorText: '',
},
{
icon: 'https://www.mujicv.com/favicon.ico',
name: '木及简历',
link: 'https://www.mujicv.com/',
iconErrorText: '',
},
{
icon: 'https://static-public.infinitytab.com/sites-resource/extfans/61ea85a31aec3f3365dbe165/icon_1642759665914.jpg',
name: 'Chrome插件下载',
link: 'https://www.extfans.com/favicon.ico',
iconErrorText: '',
},
{
icon: 'https://www.yutu.cn/favicon.ico',
name: '羽兔网软件下载',
link: 'https://www.yutu.cn/',
iconErrorText: '',
},
{
icon: 'https://codeium.com/favicon.ico',
name: 'codeium',
link: 'https://codeium.com/',
iconErrorText: '',
},
{
icon: 'https://search.tiangong.cn/favicon.ico',
name: '天工AI搜索',
link: 'https://search.tiangong.cn/',
iconErrorText: '',
},
];
const listData = {
title: '奇奇怪怪',
list,
};
export default listData;
================================================
FILE: src/views/navigation/index.vue
================================================
<template>
<div ref="navigation" class="navigation-view">
<div class="container">
<div class="sidebar-list">
<div
v-for="(sidebarItem, sidebarIndex) in sidebarList"
:key="sidebarIndex"
class="sidebar-item cp"
:class="{ active: sidebarIndex === currentIndex }"
@click="jumpToClickNavBlock(sidebarIndex)">
{{ sidebarItem }}
</div>
</div>
<div class="nav-block-list">
<template v-for="(blockItem, navBlockIndex) in data">
<div
v-if="!blockItem.isPrivate || isShowPrivate"
ref="navBlockItem"
:key="navBlockIndex"
class="nav-block-item">
<div class="nav-block-title fwb">{{ blockItem.title }}</div>
<div class="nav-instance-list">
<div
v-for="(navItem, navIndex) in blockItem.list"
:key="navIndex"
class="nav-instance-item text-over-flow">
<div class="curser-part cp" @click="handleGoToLink(navItem.link)">
<img
v-if="!navItem.iconErrorText"
:src="navItem.icon"
class="icon"
@error="handlerImgError(navBlockIndex, navIndex, navItem.name)" />
<div v-else class="icon-error-text">{{ navItem.iconErrorText }}</div>
<span class="name"> {{ navItem.name }}</span>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
<div class="footer"></div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed, nextTick } from 'vue';
import { useRoute } from 'vue-router';
import data from './data';
const route = useRoute();
// margin 的高度
const MARGIN_HEIGHT = 32;
// header 的高度
const HEADER_HEIGHT = 64;
// 获取整个页面元素(除header外)
const navigation = ref<null | HTMLDivElement>(null);
// 获取所有的导航块
const navBlockItem = ref<Array<null | HTMLDivElement>>([]);
// 保存所有的导航块需要滚动的高度
const scrollHeightArr = ref<number[]>([]);
// 当前激活的导航块
const currentIndex = ref<number>(0);
// 是否显示私有部分
const isShowPrivate = computed(() => route.query.private || false);
// 侧边栏列表
const sidebarList = computed(() => {
let res = [];
if (isShowPrivate.value) {
res = data.value.map((item) => item.title);
} else {
res = data.value.filter((item) => !item.isPrivate).map((item) => item.title);
}
return res;
});
// 页面监听的滚动事件
const handleScroll = (e: Event) => {
const { scrollTop } = e.target as HTMLDivElement;
// 节流函数
requestAnimationFrame(() => {
// 根据当前滚动的高度和每个导航块需要滚动的高度进行对比, 获取当前激活的导航块索引
currentIndex.value = scrollHeightArr.value.findIndex((item) => scrollTop < item);
});
};
// 计算所有导航块需要滚动的高度
const getScrollHeightArr = () => {
navBlockItem.value.forEach((item) => {
// 通过 getBoundingClientRect 方法, 获取每个导航块到顶部的距离
const { top } = JSON.parse(JSON.stringify(item?.getBoundingClientRect()));
// 因为只需要滚动到 header 下面就算切换, 而不需要完全滚动到页面之外, 所以需要去掉 header 的高度
scrollHeightArr.value.push(top - HEADER_HEIGHT);
});
};
// 跳转到点击的导航块
const jumpToClickNavBlock = (clickIndex: number) => {
// 保存下点击的 index
currentIndex.value = clickIndex;
// 跳转到对应的导航块
navigation.value?.scrollTo({
// 平滑过渡
behavior: 'smooth',
// 加上一个 margin 的距离比较好看
top: scrollHeightArr.value[currentIndex.value] - MARGIN_HEIGHT,
});
};
// 图片发生错误的时候替换词名字的第一个字
const handlerImgError = (navBlockIndex: number, navIndex: number, name: string) => {
const [changeName] = name;
data.value[navBlockIndex].list[navIndex].iconErrorText = changeName;
};
// 跳转到对应的连接
const handleGoToLink = (link: string) => {
window.open(link);
};
onMounted(() => {
// 监听 navigation 的滚动事件
navigation.value?.addEventListener('scroll', handleScroll, false);
// 在页面渲染完成后计算所有导航块需要滚动的高度
nextTick(() => {
getScrollHeightArr();
});
});
onBeforeUnmount(() => {
// 在页面销毁的时候移除监听的事件
navigation.value?.removeEventListener('scroll', handleScroll, false);
});
</script>
<style lang="scss" scoped>
.navigation-view {
padding-top: var(--warbler-header-height);
width: 100%;
height: 100%;
overflow: auto;
.container {
width: 100%;
display: flex;
.sidebar-list {
@media (max-width: 900px) {
display: none;
}
position: fixed;
width: 100px;
height: 80vh;
overflow: auto;
top: 96px;
left: 32px;
&::-webkit-scrollbar {
// 隐藏滚动条
display: none;
}
.sidebar-item {
margin-bottom: 8px;
font-size: 14px;
&:hover {
color: var(--warbler-brand);
}
}
.active {
color: var(--warbler-brand);
}
}
.nav-block-list {
flex: 1;
padding-right: 15%;
padding-left: 15%;
@media (max-width: 900px) {
padding-left: 16px;
padding-right: 16px;
}
display: flex;
flex-direction: column;
width: 100%;
.nav-block-item {
width: 100%;
min-height: 100px;
border-radius: 10px;
margin-top: 32px;
background-color: var(--warbler-bg-soft);
.nav-block-title {
border-bottom: var(--warbler-border-1);
padding: 16px 32px;
}
.nav-instance-list {
padding: 8px 32px;
display: grid;
justify-content: space-between;
grid-template-columns: repeat(auto-fill, 200px);
grid-gap: 16px;
}
.nav-instance-item {
height: 32px;
display: flex;
justify-content: flex-start;
align-items: center;
.curser-part {
display: flex;
justify-content: flex-start;
align-items: center;
}
.icon {
width: 20px;
height: 20px;
margin-right: 8px;
}
.icon-error-text {
width: 20px;
height: 20px;
margin-right: 8px;
text-align: center;
line-height: 20px;
background-color: var(--warbler-brand-dark);
border-radius: 50%;
font-size: 12px;
}
.name {
&:hover {
color: var(--warbler-brand-dark);
}
}
}
}
}
}
.footer {
width: 100%;
height: 32px;
}
}
</style>
================================================
FILE: src/views/warblerCenter/component/resume-job.vue
================================================
<template>
<div class="projects">
<div class="title">工作经历</div>
<div class="job mt8">
<div class="header">
<!-- <div class="company">北京理想研发总部（组员）</div> -->
<div class="time">
<!-- 2023 年 6 月至今 -->
</div>
</div>
<div class="job-content">
<div class="job-content-item"><span>·</span>简历目前是个初版，还未完善，以下只是极小部分</div>
</div>
</div>
<div class="job mt8">
<div class="header">
<div class="company">启迪万众网络 - 信息集成（团队负责人，3人）</div>
<div class="time">2022 年 3 月至 至今</div>
</div>
<div class="job-content">
<div class="job-content-item">
<span>·</span>负责页面开发和维护，任务分配，代码审查，设计原型；
</div>
<div class="job-content-item">
<span>·</span>通过 <strong>vue-cli</strong> ， 结合
<strong>eslint + prettier + husky + lint-staged + commitlint </strong>
搭建现代化前端工程；
</div>
<div class="job-content-item">
<span>·</span>制定前端开发规范，通过 <strong>Pull Requests</strong> 进行代码审查 ,
定期组织 <strong>Code Review</strong> 会议；
</div>
<div class="job-content-item">
<span>·</span>二次封装
<strong>axios</strong>
，通过配置请求，响应拦截器，统一处理接口返回结果，添加全局的 loading，message；
</div>
<div class="job-content-item">
<span>·</span>通过<strong> echars </strong>实现数据可视化以及地图部分的需求；
</div>
<div class="job-content-item">
<span>·</span>通过<strong> antv-x6 </strong>实现流程图部分的需求；
</div>
<div class="job-content-item">
<span>·</span>通过<strong> fabric.js </strong>实现视频，图片标注部分的需求；
</div>
<div class="job-content-item">
<span>·</span>通过<strong> vite-press </strong>搭建用户帮助文档；
</div>
<div class="job-content-item">
<span>·</span>通过<strong> Axure</strong> 完成原型设计，与 UI 人员进行交涉。
</div>
</div>
</div>
<div class="job mt8">
<div class="header">
<div class="company">陕西繁星智达数字科技有限公司 - 云鹿CRM（组员）</div>
<div class="time">2019 年 8 月 ~ 2022 年 2 月</div>
</div>
<div class="job-content">
<div class="job-content-item">
<span>·</span>独立负责 pc 端活动配置页面以及移动端活动的开发和维护；
</div>
<div class="job-content-item">
<span>·</span>使用动态组件完成动态表单，通过配置文件让不同的活动拥有不同的表单内容；
</div>
<div class="job-content-item">
<span>·</span>开发公用基础组件，如九宫格 ， 大转盘等供团队使用。
</div>
</div>
</div>
</div>
<div class="open mt16 mb16">
<div class="title">开源作品</div>
<div class="job">
<div class="header">
<div class="company">江城开朗的豌豆</div>
<div class="time">成为前端开发工程师至今</div>
</div>
<div class="job-content">
<div class="job-content-item">
<span>·</span>前端导航页面：通过监听 scroll 事件及高度的计算，完成双向滚动；
</div>
<div class="job-content-item">
<span>·</span>warbler-cli：通过 Commander 实现快速创建项目的脚手架工具；
</div>
<div class="job-content-item">
<span>·</span>warbler-js：一个 JavaScript 函数工具库，上传至 NPM 供其他人使用；
</div>
<div class="job-content-item">
<span>·</span>warbler-favorites：通过 Vue3 实现的一个网页收藏工具；
</div>
<div class="job-content-item">
<span>·</span>通过 VitePress 完成 warbler-cli 和 warbler-js 的在线文档。
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
.mt8 {
margin-top: 8px;
}
.mt16 {
margin-top: 16px;
}
.mb16 {
margin-bottom: 16px;
}
strong {
color: var(--warbler-brand);
margin: 0 5px;
}
.projects,
.open {
.title {
width: 100%;
font-size: 20px;
padding-bottom: 16px;
margin-bottom: 8px;
box-shadow: 0 -1px 0 hsla(0, 0%, 100%, 0.1) inset;
}
.job {
background-color: var(--warbler-bg);
padding: 16px;
border-radius: 4px;
.header {
display: flex;
justify-content: space-between;
margin: 0 0 16px 0;
font-size: 16px;
opacity: 0.7;
}
.job-content-item {
margin: 8px 16px;
align-items: center;
span {
font-size: 12px;
display: inline-block;
transform: scale(3);
margin-right: 8px;
color: var(--warbler-brand);
}
}
}
}
</style>
================================================
FILE: src/views/warblerCenter/component/resume-link.vue
================================================
<template>
<div class="resume-link">
<div class="title">相关连接</div>
<div v-for="(item, index) in map" :key="index" class="link-content-item">
<div class="left">
<span>·</span>
<div class="name" @click="goToLink(item?.nameLink)">{{ item.name }}</div>
</div>
<div class="right">
<div v-if="item.online" class="online" @click="goToLink(item?.online)">在线体验</div>
<div v-if="item.source" class="source" @click="goToLink(item?.source)">源码地址</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
interface Link {
name: string;
nameLink?: string;
online?: string;
source?: string;
}
const map: Array<Link> = [
{
name: 'CSDN',
nameLink: 'https://blog.csdn.net/qq_48652579?type=lately',
online: 'https://blog.csdn.net/qq_48652579?type=lately',
// source: 'https://github.com/alanhzw/warbler-homepage',
},
{
name: 'Github',
nameLink: 'https://github.com/yangtao5201314',
online: 'https://github.com/yangtao5201314',
},
{
name: 'Gitee',
nameLink: 'https://gitee.com/yangtaoqwer_admin_admin',
online: 'https://gitee.com/yangtaoqwer_admin_admin',
},
{
name: '掘金社区',
nameLink: 'https://juejin.cn/user/3307789418773736',
online: 'https://juejin.cn/user/3307789418773736',
},
{
name: 'UNIAPP',
nameLink: 'https://ext.dcloud.net.cn/plugin?id=11251',
online: 'https://ext.dcloud.net.cn/plugin?id=11251',
},
{
name: '微信公众号',
nameLink: 'https://tinyurl.com/gongZhonghao',
online: 'https://tinyurl.com/gongZhonghao',
},
{
name: '哔哩哔哩',
nameLink: 'https://space.bilibili.com/560080179',
online: 'https://space.bilibili.com/560080179',
},
{
name: '个人网站',
nameLink: 'https://tinyurl.com/yangtaoWeb',
online: 'https://tinyurl.com/yangtaoWeb',
source: 'https://github.com/yangtao5201314/my-blog',
},
{
name: 'yangtao-js',
nameLink: 'https://7072-prod-4gapv4gl33a8a0ff-1305990777.tcb.qcloud.la/index.html?sign=cb4a9bd3d466506cf838f5149f68007c&t=1698832416',
online: 'https://7072-prod-4gapv4gl33a8a0ff-1305990777.tcb.qcloud.la/index.html?sign=cb4a9bd3d466506cf838f5149f68007c&t=1698832416',
source: 'https://github.com/yangtao5201314/yangtao-js',
},
// {
// name: 'warbler-cli',
// nameLink: 'http://www.warblerfe.top/warbler/cli',
// online: 'http://www.warblerfe.top/warbler/cli',
// source: 'https://github.com/alanhzw/warbler-cli',
// },
// {
// name: '个人主页(旧版)',
// nameLink: 'https://alanhzw.github.io/',
// online: 'https://alanhzw.github.io/',
// source: 'https://github.com/alanhzw/warbler-homepage'
// },
];
const goToLink = (link?: string) => {
if (link) {
window.open(link);
}
};
</script>
<style lang="scss" scoped>
.resume-link {
width: 100%;
margin-bottom: 16px;
.mt8 {
margin-top: 8px;
}
.mt16 {
margin-top: 16px;
}
strong {
color: var(--warbler-brand);
margin: 0 5px;
}
.title {
width: 100%;
font-size: 20px;
padding-bottom: 16px;
margin-bottom: 8px;
box-shadow: 0 -1px 0 hsla(0, 0%, 100%, 0.1) inset;
}
.link-content-item {
background-color: var(--warbler-bg);
padding: 16px;
border-radius: 4px;
margin: 8px 0px;
align-items: center;
display: flex;
justify-content: space-between;
.left {
display: flex;
justify-content: flex-start;
align-items: center;
.name {
cursor: pointer;
&:hover {
color: var(--warbler-brand);
}
}
}
.right {
display: none;
@media (min-width: 1600px) or (max-width: 1500px) {
display: flex;
justify-content: flex-end;
align-items: center;
}
.online {
color: var(--warbler-brand-lighter);
cursor: pointer;
&:hover {
color: var(--warbler-brand);
}
}
.source {
color: var(--warbler-brand-lightest);
margin-left: 8px;
cursor: pointer;
&:hover {
color: var(--warbler-brand);
}
}
}
span {
font-size: 12px;
display: inline-block;
transform: scale(3);
margin-right: 8px;
color: var(--warbler-brand);
}
}
}</style>
================================================
FILE: src/views/warblerCenter/component/resume-skills.vue
================================================
<template>
<div class="resume-skills">
<div class="title">技能</div>
<div class="skill-box">
<div class="skill-content-item">
<span>·</span>熟悉<strong> Vue </strong>，有多个实际项目开发经验，包括
<strong> Vue2 </strong>，<strong> Vue3 </strong>，<strong> Nuxt </strong>，<strong>
VitePress
</strong>
等；
</div>
<div class="skill-content-item">
<span>·</span>熟悉<strong> ES6+ </strong>语法，了解 <strong>TypeScript</strong>；
</div>
<div class="skill-content-item">
<span>·</span> 能够利用 <strong>commander </strong>等第三方库进行脚手架开发，了解<strong>
lerna </strong
>多仓库管理；
</div>
<div class="skill-content-item">
<span>·</span>了解<strong> nodejs </strong>，可以使用 <strong> express </strong> ，<strong>
koa </strong
>， <strong> egg </strong>框架进行接口开发；
</div>
<div class="skill-content-item">
<span>·</span>了解 <strong> mysql </strong>，<strong> mongodb </strong>，<strong>
redis </strong
>，掌握基本增删改查；
</div>
<div class="skill-content-item">
<span>·</span>了解 <strong> docker </strong>，
<strong> github actions </strong>，前端静态化部署；
</div>
<div class="skill-content-item">
<span>·</span>了解<strong> Photoshop </strong>，<strong> Axure </strong
>等工具，能够进行简易的原型设计。
</div>
</div>
</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
.resume-skills {
width: 100%;
margin-bottom: 16px;
.mt8 {
margin-top: 8px;
}
.mt16 {
margin-top: 16px;
}
strong {
color: var(--warbler-brand);
margin: 0 5px;
}
.title {
width: 100%;
font-size: 20px;
padding-bottom: 16px;
margin-bottom: 8px;
box-shadow: 0 -1px 0 hsla(0, 0%, 100%, 0.1) inset;
}
.skill-box {
background-color: var(--warbler-bg);
padding: 16px;
border-radius: 4px;
.skill-content-item {
margin: 8px 16px;
align-items: center;
span {
font-size: 12px;
display: inline-block;
transform: scale(3);
margin-right: 8px;
color: var(--warbler-brand);
}
}
}
}
</style>
================================================
FILE: src/views/warblerCenter/component/resume-warbler.vue
================================================
<template>
<div class="resume-warbler">
<div class="header">
<div class="avatar"></div>
<div class="job">前端工程师</div>
</div>
<div class="info">
<div class="info-item">姓名：杨涛</div>
<div class="info-item">昵称：江城开朗的豌豆</div>
<div class="info-item">年龄：24</div>
<div class="info-item">坐标：西安</div>
<div class="info-item">邮箱：yang_tao_web@163.com</div>
<div class="info-item">微信：y_t_t_t_</div>
<div class="info-item">学校：西安理工大学</div>
<div class="info-item">专业：计算机科学与技术</div>
</div>
<div class="contact">
<div class="words">
江城开朗的豌豆是一个前端开发工程师，性格开朗，热爱分享和书写技术博客，
平时玩的游戏有QQ飞车，王者荣耀，和平精英，
<strong>目前正在启迪万众网络科技（北京）有限公司工作</strong>，如果你对我或我的技术感兴趣 ， 欢迎联系我
</div>
</div>
<div class="icons">
<i class="iconfont icon icon-juejin" @click="goToLink('juejin')"></i>
<i class="iconfont icon icon-huaban88" @click="goToLink('github')"></i>
<i class="iconfont icon icon-weixin" @click="goToLink('wechat')"></i>
</div>
</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
const goToLink = (type: string) => {
if (type === 'juejin') window.open('https://juejin.cn/user/3307789418773736');
if (type === 'github') window.open('https://github.com/yangtao5201314');
if (type === 'wechat') router.push({ path: '/contact' });
};
</script>
<style lang="scss" scoped>
.resume-warbler {
width: 100%;
strong {
color: var(--warbler-brand);
margin: 0 5px;
}
.header {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
box-shadow: 0 -1px 0 hsla(0, 0%, 100%, 0.1) inset;
.avatar {
width: 200px;
height: 200px;
border-radius: 50%;
background: url('@/assets/image/warbler1.jpeg');
background-size: 109%;
background-repeat: no-repeat;
background-position: -17px 0px;
}
.avatar:hover{
transform: rotate(666turn);
transition-delay: 1s;
transition-property: all;
transition-duration: 59s;
transition-timing-function: cubic-bezier(.34,0,.84,1);
}
.job {
font-size: 24px;
margin: 16px 0;
font-weight: bold;
}
}
.info {
margin: 8px 0 16px 0;
box-shadow: 0 -1px 0 hsla(0, 0%, 100%, 0.1) inset;
padding-bottom: 16px;
@media (min-width: 900px) {
display: flex;
flex-direction: column;
}
@media (max-width: 900px) {
display: grid;
justify-content: space-between;
grid-template-columns: repeat(auto-fill, 220px);
}
.info-item {
margin-top: 8px;
}
}
.contact {
.words {
line-height: 1.4;
letter-spacing: 1px;
}
}
.icons {
margin-top: 32px;
display: flex;
justify-content: center;
.icon {
cursor: pointer;
font-size: 24px;
margin: 8px;
&:hover {
color: var(--warbler-brand);
}
}
}
}
</style>
================================================
FILE: src/views/warblerCenter/hooks/getUserInfo.ts
================================================
import { ref } from 'vue';
import service from './juejin';
const userInfo = ref({});
const useGetUserInfo = () => {
const getUserInfo = async () => {
const res = await service.get('/user', {
id: '4099422807393901',
});
console.log('🚀🚀 ~ res:', res);
};
return {
userInfo,
getUserInfo,
};
};
export default useGetUserInfo;
================================================
FILE: src/views/warblerCenter/hooks/juejin.ts
================================================
import axios from 'axios';
import type { AxiosInstance } from 'axios';
const BASE_URL = '/juejin_api';
class GiteeRequest {
instance!: AxiosInstance;
// eslint-disable-next-line no-use-before-define
static service: GiteeRequest = new GiteeRequest();
constructor() {
this.instance = axios.create({
baseURL: BASE_URL,
timeout: 500000,
});
this.instance.interceptors.response.use(
(response) => response.data,
(error) => {
Promise.reject(error);
},
);
}
get(url: string, params?: Record<string, any>, headers?: Record<string, any>) {
return this.instance({
url,
params: {
...params,
},
method: 'get',
headers,
});
}
post(url: string, data?: Record<string, any>, headers?: Record<string, any>) {
return this.instance({
url,
params: {},
data,
method: 'post',
headers,
});
}
}
export default GiteeRequest.service;
================================================
FILE: src/views/warblerCenter/index.vue
================================================
<template>
<div class="warbler-center">
<div class="layout">
<left-part></left-part>
<middle-part></middle-part>
<right-part></right-part>
</div>
</div>
</template>
<script setup lang="ts">
import leftPart from './part/left-part.vue';
import middlePart from './part/middle-part.vue';
import rightPart from './part/right-part.vue';
</script>
<style lang="scss" scoped>
.warbler-center {
display: flex;
padding-top: var(--warbler-header-height);
width: 100%;
height: 100%;
min-height: 600px;
.layout {
width: 100%;
height: 100%;
display: flex;
padding: 32px;
@media (max-width: 900px) {
padding: 16px;
}
}
}
</style>
================================================
FILE: src/views/warblerCenter/part/left-part.vue
================================================
<template>
<div class="left-part">
<resume-warbler></resume-warbler>
</div>
</template>
<script setup lang="ts">
import resumeWarbler from '../component/resume-warbler.vue';
</script>
<style lang="scss" scoped>
.left-part {
@media (max-width: 900px) {
display: none;
}
width: 250px;
height: 100%;
background-color: var(--warbler-bg-soft);
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 16px;
overflow: auto;
position: relative;
&::-webkit-scrollbar {
// 隐藏滚动条
display: none;
}
}
</style>
================================================
FILE: src/views/warblerCenter/part/middle-part.vue
================================================
<template>
<div class="middle-part">
<resume-warbler class="resume-warbler-component"></resume-warbler>
<resume-skills class="resume-skills-component"></resume-skills>
<resume-job></resume-job>
<resume-link class="resume-link-component"></resume-link>
</div>
</template>
<script setup lang="ts">
import resumeWarbler from '../component/resume-warbler.vue';
import resumeSkills from '../component/resume-skills.vue';
import resumeJob from '../component/resume-job.vue';
import resumeLink from '../component/resume-link.vue';
</script>
<style lang="scss" scoped>
.resume-skills-component,
.resume-link-component {
@media (min-width: 1500px) {
display: none;
}
}
.resume-warbler-component {
@media (min-width: 900px) {
display: none;
}
}
.middle-part {
height: 100%;
@media (max-width: 1500px) {
flex: 1;
}
@media (max-width: 900px) {
margin-left: 0px;
}
margin-left: 16px;
background-color: var(--warbler-bg-soft);
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 16px;
overflow: auto;
&::-webkit-scrollbar {
// 隐藏滚动条
display: none;
}
}
</style>
================================================
FILE: src/views/warblerCenter/part/right-part.vue
================================================
<template>
<div class="right-part">
<resume-skills></resume-skills>
<resume-link></resume-link>
</div>
</template>
<script setup lang="ts">
import resumeSkills from '../component/resume-skills.vue';
import resumeLink from '../component/resume-link.vue';
</script>
<style lang="scss" scoped>
.right-part {
flex: 1;
margin-left: 16px;
height: 100%;
background-color: var(--warbler-bg-soft);
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 16px;
overflow: auto;
&::-webkit-scrollbar {
// 隐藏滚动条
display: none;
}
@media (max-width: 1500px) {
display: none;
}
}
</style>
================================================
FILE: src/views/warblerCli/index.vue
================================================
<template>
<iframe
ref="iframe"
:src="domain"
style="display: block"
background="transparent"
width="100%"
allow="clipboard-read;clipboard-write"
height="100%"
frameborder="0"></iframe>
<div v-if="loading" class="spinner-box">
<div class="spinner"></div>
</div>
</template>
<script setup lang="ts">
import { computed, ref, onMounted } from 'vue';
const domain = computed(() => import.meta.env.VITE_WARBLER_CLI_DOMAIN);
const iframe = ref<null | HTMLElement>(null);
const loading = ref(true);
onMounted(() => {
iframe.value!.onload = () => {
loading.value = false;
};
});
</script>
<style lang="scss" scoped>
.spinner-box {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
</style>
================================================
FILE: src/views/warblerJs/index.vue
================================================
<template>
<iframe
ref="iframe"
style="display: block"
:src="domain"
width="100%"
allow="clipboard-read;clipboard-write"
height="100%"
frameborder="0"
background="transparent"></iframe>
<div v-if="loading" class="spinner-box">
<div class="spinner"></div>
</div>
</template>
<script setup lang="ts">
import { computed, ref, onMounted } from 'vue';
// const domain = computed(() => import.meta.env.VITE_WARBLER_JS_DOMAIN);
const domain = 'https://tinyurl.com/yangtao-js';
const iframe = ref<null | HTMLElement>(null);
const loading = ref(true);
onMounted(() => {
iframe.value!.onload = () => {
loading.value = false;
};
});
</script>
<style lang="scss" scoped>
.spinner-box {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
</style>
================================================
FILE: src/vite-env.d.ts
================================================
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_WARBLER_JS_DOMAIN: string;
readonly VITE_WARBLER_CLI_DOMAIN: string;
}
================================================
FILE: tsconfig.json
================================================
{
"compilerOptions": {
// 编译之后的 es 版本
"target": "ESNext",
// 是否保留 class 未赋值的属性
"useDefineForClassFields": true,
// 编译之后的文件采用的模块规范
"module": "ESNext",
/*
moduleResolution 模块解析
模块解析是 typescript 编译器用何种方式来确定导入所指内容。
moduleResolution: "node" =>采用 node 模块解析的方式查找文件。[从内层到最高目录的外层查找 import 引入的文件]
moduleResolution:"classic"=> 采用 classic 模块解析的方式查找文件。[从外层到内层方式查找查找 import 引入的文件]
moduleResolution": "node"
*/
"moduleResolution": "Node",
// 开启严格模式
"strict": true,
// 使用 jsx 语法
"jsx": "preserve",
// 允许引入 ts 文件
"resolveJsonModule": true,
// ts 文件必须导出模块 ,并且导出类型必须添加 type
"isolatedModules": true,
// 有些依赖库底层 为了在CommonJs、AMD这二者的规范中相互兼容，使用了 export =，将二者规范统一。
// 表示允许依赖库中出现 export = 这种兼容规范导出的格式，TS 可以用 import from 导入
"esModuleInterop": true,
// 允许访问的底层依赖库
"lib": ["ESNext", "DOM"],
// 对声明文件不进行类型检查
"skipLibCheck": true,
// 禁用从编译中发出文件
"noEmit": true,
// 基础url
"baseUrl": "",
// 设置别名
"paths": {
"@/*": ["src/*"],
"@v/*": ["src/views/*"],
"@c/*": ["src/components/*"],
"@u/*": ["src/utils/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
================================================
FILE: tsconfig.node.json
================================================
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
================================================
FILE: vite.config.ts
================================================
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
//
export default defineConfig(({ mode, command }) => {
// 获取当前的模式
console.log('🚀🚀 ~ 当前阶段', command);
console.log('🚀🚀 ~ 当前运行环境', mode);
return {
// base: './',
base: '/myblog/',
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'@v': path.resolve(__dirname, 'src/views'),
'@c': path.resolve(__dirname, 'src/components'),
'@u': path.resolve(__dirname, 'src/utils'),
},
},
server: {
proxy: {
'/juejin_api/': {
target: 'https://juejin.palxp.com/',
changeOrigin: true,
rewrite: (apiPath: string) => apiPath.replace(/^\/juejin_api/, ''),
},
},
},
};
});
gitextract_rj4jn2nz/ ├── .idea/ │ ├── .gitignore │ ├── inspectionProfiles/ │ │ └── Project_Default.xml │ ├── modules.xml │ ├── my-blog.iml │ └── vcs.xml ├── Docker/ │ ├── Dockerfile │ └── nginx/ │ └── nginx.conf ├── README.md ├── commitlint.config.js ├── index.html ├── package.json ├── src/ │ ├── App.vue │ ├── assets/ │ │ └── iconfont/ │ │ └── iconfont.css │ ├── components/ │ │ └── nav-menu.vue │ ├── main.ts │ ├── router/ │ │ └── index.ts │ ├── style/ │ │ └── style.css │ ├── views/ │ │ ├── contact/ │ │ │ └── index.vue │ │ ├── dataCenter/ │ │ │ └── index.vue │ │ ├── homepage/ │ │ │ ├── canvas.ts │ │ │ ├── components/ │ │ │ │ └── typewriter.vue │ │ │ └── index.vue │ │ ├── navigation/ │ │ │ ├── data/ │ │ │ │ ├── index.ts │ │ │ │ └── list/ │ │ │ │ ├── _b_vue.ts │ │ │ │ ├── _c_react.ts │ │ │ │ ├── _d_css.ts │ │ │ │ ├── _e1_javascript.ts │ │ │ │ ├── _e2_typescript.ts │ │ │ │ ├── _f_node.ts │ │ │ │ ├── _g_officialDocuments.ts │ │ │ │ ├── _h_charts.ts │ │ │ │ ├── _i_codeManager.ts │ │ │ │ ├── _j_buildTools.ts │ │ │ │ ├── _k_micro.ts │ │ │ │ ├── _k_test.ts │ │ │ │ ├── _l_devTools.ts │ │ │ │ ├── _m_otherTools.ts │ │ │ │ ├── _n_technologicalGrowth.ts │ │ │ │ ├── _o_community.ts │ │ │ │ ├── w_drawPicture.ts │ │ │ │ ├── x_audioVideo.ts │ │ │ │ ├── y_navigation.ts │ │ │ │ └── z_something.ts │ │ │ └── index.vue │ │ ├── warblerCenter/ │ │ │ ├── component/ │ │ │ │ ├── resume-job.vue │ │ │ │ ├── resume-link.vue │ │ │ │ ├── resume-skills.vue │ │ │ │ └── resume-warbler.vue │ │ │ ├── hooks/ │ │ │ │ ├── getUserInfo.ts │ │ │ │ └── juejin.ts │ │ │ ├── index.vue │ │ │ └── part/ │ │ │ ├── left-part.vue │ │ │ ├── middle-part.vue │ │ │ └── right-part.vue │ │ ├── warblerCli/ │ │ │ └── index.vue │ │ └── warblerJs/ │ │ └── index.vue │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts
SYMBOL INDEX (24 symbols across 4 files)
FILE: src/views/homepage/canvas.ts
class Wave (line 12) | class Wave {
method constructor (line 21) | constructor(e: Partial<Pick<Wave, 'phase' | 'offset' | 'frequency' | '...
method update (line 32) | update() {
class Node (line 38) | class Node {
class Line (line 48) | class Line {
method constructor (line 56) | constructor(e: { spring: number }, private pos: { x: number; y: number...
method update (line 68) | update() {
method draw (line 95) | draw(ctx: CanvasRenderingContext2D) {
function resizeCanvas (line 140) | function resizeCanvas() {
function animate (line 147) | function animate() {
function bindMouseMove (line 172) | function bindMouseMove(event: Event) {
FILE: src/views/navigation/data/index.ts
type NavItem (line 3) | interface NavItem {
type NavList (line 10) | type NavList = Array<NavItem>;
type NavGroup (line 12) | interface NavGroup {
type NavData (line 18) | type NavData = Array<NavGroup>;
class NavListGetter (line 20) | class NavListGetter {
method getDataPath (line 25) | getDataPath() {
method getAllData (line 30) | getAllData() {
FILE: src/views/warblerCenter/hooks/juejin.ts
constant BASE_URL (line 4) | const BASE_URL = '/juejin_api';
class GiteeRequest (line 5) | class GiteeRequest {
method constructor (line 11) | constructor() {
method get (line 24) | get(url: string, params?: Record<string, any>, headers?: Record<string...
method post (line 35) | post(url: string, data?: Record<string, any>, headers?: Record<string,...
FILE: src/vite-env.d.ts
type ImportMetaEnv (line 2) | interface ImportMetaEnv {
Condensed preview — 60 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (112K chars).
[
{
"path": ".idea/.gitignore",
"chars": 68,
"preview": "# 默认忽略的文件\n/shelf/\n/workspace.xml\n# 基于编辑器的 HTTP 客户端请求\n/httpRequests/\n"
},
{
"path": ".idea/inspectionProfiles/Project_Default.xml",
"chars": 251,
"preview": "<component name=\"InspectionProjectProfileManager\">\n <profile version=\"1.0\">\n <option name=\"myName\" value=\"Project De"
},
{
"path": ".idea/modules.xml",
"chars": 266,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<project version=\"4\">\n <component name=\"ProjectModuleManager\">\n <modules>\n "
},
{
"path": ".idea/my-blog.iml",
"chars": 458,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<module type=\"WEB_MODULE\" version=\"4\">\n <component name=\"NewModuleRootManager\">\n"
},
{
"path": ".idea/vcs.xml",
"chars": 167,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<project version=\"4\">\n <component name=\"VcsDirectoryMappings\">\n <mapping dire"
},
{
"path": "Docker/Dockerfile",
"chars": 573,
"preview": "# 基于哪个镜像的基础上进行构建\n# FROM node:16\n# 工作目录\n# WORKDIR /\n# 拷贝当前目录下的文件 到 /app 中 .dockerignore 文件中可以声明忽略拷贝的文件\n# COPY . /\n\n# RU"
},
{
"path": "Docker/nginx/nginx.conf",
"chars": 2910,
"preview": "\r\n#user nobody;\r\nworker_processes 1;\r\n\r\n#error_log logs/error.log;\r\n#error_log logs/error.log notice;\r\n#error_log "
},
{
"path": "README.md",
"chars": 379,
"preview": "## 网站首页\n\n👉👉 [江城开朗的豌豆]([https://tinyurl.com/yangtaoWeb](https://yangtao.xyz/#/))\n\n## 开发者\n\n**江城开朗的豌豆**\n\n👉👉 [掘金](https://ju"
},
{
"path": "commitlint.config.js",
"chars": 131,
"preview": "\nmodule.exports = {\n extends: ['cz'],\n rules: {\n // 'type-empty': [2, 'never'],\n // 'subject-empty': [2, 'never'"
},
{
"path": "index.html",
"chars": 831,
"preview": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n <meta charset=\"UTF-8\" />\r\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"h"
},
{
"path": "package.json",
"chars": 1487,
"preview": "{\r\n \"name\": \"myblog\",\r\n \"private\": true,\r\n \"version\": \"0.0.0\",\r\n \"scripts\": {\r\n \"dev\": \"vite --open --port 5173\","
},
{
"path": "src/App.vue",
"chars": 359,
"preview": "<template>\n \n <nav-menu></nav-menu>\n <router-view></router-view>\n\n</template>\n\n<script setup lang=\"ts\">\nimport NavMen"
},
{
"path": "src/assets/iconfont/iconfont.css",
"chars": 652,
"preview": "@font-face {\n font-family: \"iconfont\"; /* Project id 3948807 */\n src: url('iconfont.woff2?t=1681302822777') format('wo"
},
{
"path": "src/components/nav-menu.vue",
"chars": 3702,
"preview": "\n<template>\n <div class=\"nav-menu\">\n \n <div class=\"mask\"></div>\n <div class=\"logo cp\" @click=\"goToHome\">\n <"
},
{
"path": "src/main.ts",
"chars": 286,
"preview": "import { createApp } from 'vue';\nimport App from './App.vue';\nimport router from '@/router/index';\n\n// reset css\nimport "
},
{
"path": "src/router/index.ts",
"chars": 1378,
"preview": "import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router';\n\nconst routes = [\n {\n path: '/',\n "
},
{
"path": "src/style/style.css",
"chars": 3225,
"preview": "html,\nbody,\n#app {\n width: 100%;\n height: 100%;\n background-color: var(--warbler-bg);\n font-family: var(--warbler-fo"
},
{
"path": "src/views/contact/index.vue",
"chars": 360,
"preview": "<template>\n <div class=\"contact\">\n <div class=\"wechat\">\n <img src=\"@/assets/image/wechat.jpeg\" />\n </div>\n "
},
{
"path": "src/views/dataCenter/index.vue",
"chars": 245,
"preview": "\n<template>\n <div class=\"data-center\">数据中心</div>\n</template>\n\n<script setup lang=\"ts\"></script>\n\n<style lang=\"scss\" sco"
},
{
"path": "src/views/homepage/canvas.ts",
"chars": 5381,
"preview": "/* eslint-disable no-plusplus */\n/* eslint-disable max-classes-per-file */\n\nconst E = {\n friction: 0.5,\n trails: 20,\n "
},
{
"path": "src/views/homepage/components/typewriter.vue",
"chars": 1520,
"preview": "<template>\n <div class=\"typewriter-box\">\n \n <div class=\"typewriter\">\n <div class=\"text\">\n 江城开朗的豌豆，\n "
},
{
"path": "src/views/homepage/index.vue",
"chars": 414,
"preview": "\n<template>\n <div class=\"homepage-view\">\n <canvas id=\"canvas\" class=\"canvas\"></canvas>\n <typewriter></typewriter>"
},
{
"path": "src/views/navigation/data/index.ts",
"chars": 1052,
"preview": "import { ref } from 'vue';\n\nexport interface NavItem {\n icon: string;\n name: string;\n link: string;\n iconErrorText: "
},
{
"path": "src/views/navigation/data/list/_b_vue.ts",
"chars": 3580,
"preview": "import type { NavList } from '../index';\n\nconst list: NavList = [\n {\n icon: 'https://cn.vuejs.org/logo.svg',\n nam"
},
{
"path": "src/views/navigation/data/list/_c_react.ts",
"chars": 2954,
"preview": "import type { NavList } from '../index';\n\nconst list: NavList = [\n {\n icon: 'https://react.zcopy.site/favicon.ico',\n"
},
{
"path": "src/views/navigation/data/list/_d_css.ts",
"chars": 3201,
"preview": "import type { NavList } from '../index';\n\nconst list: NavList = [\n {\n icon: 'https://sass.nodejs.cn/icon.png',\n n"
},
{
"path": "src/views/navigation/data/list/_e1_javascript.ts",
"chars": 3157,
"preview": "import type { NavList } from '../index';\n\nconst list: NavList = [\n {\n icon: 'https://www.lodashjs.com/img/favicon.ic"
},
{
"path": "src/views/navigation/data/list/_e2_typescript.ts",
"chars": 795,
"preview": "import type { NavList } from '../index';\n\nconst list: NavList = [\n {\n icon: 'https://www.typescriptlang.org/favicon-"
},
{
"path": "src/views/navigation/data/list/_f_node.ts",
"chars": 1733,
"preview": "import type { NavList } from '../index';\n\nconst list: NavList = [\n {\n icon: 'https://img.nodejs.cn/favicon.png',\n "
},
{
"path": "src/views/navigation/data/list/_g_officialDocuments.ts",
"chars": 3371,
"preview": "import type { NavList } from '../index';\n\nconst list: NavList = [\n {\n icon: 'https://developer.mozilla.org/apple-tou"
},
{
"path": "src/views/navigation/data/list/_h_charts.ts",
"chars": 1721,
"preview": "import type { NavList } from '../index';\n\nconst list: NavList = [\n {\n icon: 'https://echarts.apache.org/zh/images/fa"
},
{
"path": "src/views/navigation/data/list/_i_codeManager.ts",
"chars": 2230,
"preview": "import type { NavList } from '../index';\n\nconst list: NavList = [\n {\n icon: 'https://img2.baidu.com/it/u=83310884,27"
},
{
"path": "src/views/navigation/data/list/_j_buildTools.ts",
"chars": 1164,
"preview": "import type { NavList } from '../index';\n\nconst list: NavList = [\n {\n icon: 'https://cn.vitejs.dev/logo.svg',\n na"
},
{
"path": "src/views/navigation/data/list/_k_micro.ts",
"chars": 1187,
"preview": "import type { NavList } from '../index';\n\nconst list: NavList = [\n {\n icon: 'https://zeroing.jd.com/micro-app/favico"
},
{
"path": "src/views/navigation/data/list/_k_test.ts",
"chars": 598,
"preview": "import type { NavList } from '../index';\n\nconst list: NavList = [\n {\n icon: 'https://jestjs.io/zh-Hans/img/favicon/f"
},
{
"path": "src/views/navigation/data/list/_l_devTools.ts",
"chars": 2753,
"preview": "import type { NavList } from '../index';\n\nconst list: NavList = [\n {\n icon: 'https://regexr.com/assets/icons/apple-t"
},
{
"path": "src/views/navigation/data/list/_m_otherTools.ts",
"chars": 1510,
"preview": "import type { NavList } from '../index';\n\nconst list: NavList = [\n {\n icon: 'https://tool.browser.qq.com/favicon.ico"
},
{
"path": "src/views/navigation/data/list/_n_technologicalGrowth.ts",
"chars": 2118,
"preview": "import type { NavList } from '../index';\n\nconst list: NavList = [\n {\n icon: 'https://1loc.dev/assets/favicon.png',\n "
},
{
"path": "src/views/navigation/data/list/_o_community.ts",
"chars": 1791,
"preview": "import type { NavList } from '../index';\n\nconst list: NavList = [\n {\n icon: '//img10.360buyimg.com/imgzone/jfs/t1/18"
},
{
"path": "src/views/navigation/data/list/w_drawPicture.ts",
"chars": 2827,
"preview": "import type { NavList } from '../index';\n\nconst list: NavList = [\n {\n icon: 'https://nrdstudio.cn/res/logo.png',\n "
},
{
"path": "src/views/navigation/data/list/x_audioVideo.ts",
"chars": 2664,
"preview": "import type { NavList } from '../index';\n\nconst list: NavList = [\n {\n icon: 'https://www.nkvod.com/mxtheme/images/fa"
},
{
"path": "src/views/navigation/data/list/y_navigation.ts",
"chars": 1036,
"preview": "import type { NavList } from '../index';\n\nconst list: NavList = [\n {\n icon: 'https://www.zkdh.net/wp-content/uploads"
},
{
"path": "src/views/navigation/data/list/z_something.ts",
"chars": 1207,
"preview": "import type { NavList } from '../index';\n\nconst list: NavList = [\n {\n icon: 'http://user.vipmall.cc/Public/H5/images"
},
{
"path": "src/views/navigation/index.vue",
"chars": 6673,
"preview": "\r\n<template>\r\n <div ref=\"navigation\" class=\"navigation-view\">\r\n <div class=\"container\">\r\n <div class=\"sidebar-l"
},
{
"path": "src/views/warblerCenter/component/resume-job.vue",
"chars": 4280,
"preview": "\n<template>\n <div class=\"projects\">\n <div class=\"title\">工作经历</div>\n <div class=\"job mt8\">\n <div class=\"heade"
},
{
"path": "src/views/warblerCenter/component/resume-link.vue",
"chars": 4300,
"preview": "\n<template>\n <div class=\"resume-link\">\n <div class=\"title\">相关连接</div>\n <div v-for=\"(item, index) in map\" :key=\"in"
},
{
"path": "src/views/warblerCenter/component/resume-skills.vue",
"chars": 2178,
"preview": "\n<template>\n <div class=\"resume-skills\">\n <div class=\"title\">技能</div>\n <div class=\"skill-box\">\n <div class=\""
},
{
"path": "src/views/warblerCenter/component/resume-warbler.vue",
"chars": 3013,
"preview": "\n<template>\n <div class=\"resume-warbler\">\n <div class=\"header\">\n <div class=\"avatar\"></div>\n <div class=\"j"
},
{
"path": "src/views/warblerCenter/hooks/getUserInfo.ts",
"chars": 361,
"preview": "\nimport { ref } from 'vue';\n\nimport service from './juejin';\n\nconst userInfo = ref({});\n\nconst useGetUserInfo = () => {\n"
},
{
"path": "src/views/warblerCenter/hooks/juejin.ts",
"chars": 970,
"preview": "import axios from 'axios';\nimport type { AxiosInstance } from 'axios';\n\nconst BASE_URL = '/juejin_api';\nclass GiteeReque"
},
{
"path": "src/views/warblerCenter/index.vue",
"chars": 692,
"preview": "\n<template>\n <div class=\"warbler-center\">\n <div class=\"layout\">\n <left-part></left-part>\n <middle-part></m"
},
{
"path": "src/views/warblerCenter/part/left-part.vue",
"chars": 613,
"preview": "\n<template>\n <div class=\"left-part\">\n <resume-warbler></resume-warbler>\n </div>\n</template>\n\n<script setup lang=\"ts"
},
{
"path": "src/views/warblerCenter/part/middle-part.vue",
"chars": 1178,
"preview": "\n<template>\n <div class=\"middle-part\">\n <resume-warbler class=\"resume-warbler-component\"></resume-warbler>\n <resu"
},
{
"path": "src/views/warblerCenter/part/right-part.vue",
"chars": 694,
"preview": "\n<template>\n <div class=\"right-part\">\n <resume-skills></resume-skills>\n <resume-link></resume-link>\n </div>\n</te"
},
{
"path": "src/views/warblerCli/index.vue",
"chars": 844,
"preview": "<template>\n <iframe\n ref=\"iframe\"\n :src=\"domain\"\n style=\"display: block\"\n background=\"transparent\"\n widt"
},
{
"path": "src/views/warblerJs/index.vue",
"chars": 902,
"preview": "<template>\n <iframe\n ref=\"iframe\"\n style=\"display: block\"\n :src=\"domain\"\n width=\"100%\"\n allow=\"clipboard"
},
{
"path": "src/vite-env.d.ts",
"chars": 153,
"preview": "/// <reference types=\"vite/client\" />\ninterface ImportMetaEnv {\n readonly VITE_WARBLER_JS_DOMAIN: string;\n readonly VI"
},
{
"path": "tsconfig.json",
"chars": 1337,
"preview": "{\r\n \"compilerOptions\": {\r\n // 编译之后的 es 版本\r\n \"target\": \"ESNext\",\r\n // 是否保留 class 未赋值的属性\r\n \"useDefineForClass"
},
{
"path": "tsconfig.node.json",
"chars": 184,
"preview": "{\n \"compilerOptions\": {\n \"composite\": true,\n \"module\": \"ESNext\",\n \"moduleResolution\": \"Node\",\n \"allowSynthe"
},
{
"path": "vite.config.ts",
"chars": 814,
"preview": "import { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport path from 'path';\n//\nexport default de"
}
]
About this extraction
This page contains the full source code of the yangtao5201314/my-blog GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 60 files (94.6 KB), approximately 32.2k tokens, and a symbol index with 24 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.