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/, ''),
        },
      },
    },
  };
});