✨ 仓库可滚动

README.md

@@ -4,21 +4,22 @@
 > 
 > 使用 vue + electron 开发
 
-<img src="./result.png" alt="展示图" style="zoom: 50%;" />
+<img src="./show.jpg" alt="展示图" style="zoom: 50%;" />
 
 ## 介绍
 
-- 按钮作用(从左至右)
+- 按钮作用 (从左至右
  - 关闭
  - 最小化
  - 置顶/取消置顶
- - 网络异常（隐藏
+ - 
+ - 网络异常
  - 设置用户
 - 展示信息（从上至下，从左至右
  - 你的 follower 数量
  - 你获得的总 star 数量
  - 你获得的总 fork 数量
- - 按照 star 数，展示仓库
+ - 按照 star 排序展示仓库 (可滚动
 
 > 注: 每 60s 发送一次请求
 
@@ -30,4 +31,6 @@
 - [x] 保存信息
 - [x] 自定义用户
 - [x] 无网络提示
-- [ ] 消息通知
+- [x] 仓库可滚动
+- [ ] 消息通知
+- [ ] 接入更多平台

package.json

@@ -1,6 +1,6 @@
 {
  "name": "monit",
- "version": "0.1.3",
+ "version": "0.1.4",
  "private": true,
  "scripts": {
  "serve": "vue-cli-service serve",
@@ -13,7 +13,7 @@
  },
  "main": "background.js",
  "dependencies": {
- "@tailwindcss/postcss7-compat": "npm:@tailwindcss/postcss7-compat@^2.2.17",
+ "@tailwindcss/postcss7-compat": "^2.2.17",
  "autoprefixer": "^9",
  "axios": "^0.24.0",
  "core-js": "^3.6.5",

src/App.vue

@@ -21,11 +21,18 @@ body {
  /* 允许用户拖拽 */
  -webkit-app-region: drag; 
 }
+
 svg,
 span,
 input,
 button{
- /* 禁止用户拖拽 */
+ /* 禁止拖拽 允许点击 */
  -webkit-app-region: no-drag; 
 }
+
+/* 隐藏滚动条 */
+::-webkit-scrollbar {
+ display: none;
+}
+
 </style>

src/background.js

@@ -7,7 +7,7 @@ import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
 // Scheme must be registered before the app is ready
-protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }])
+protocol.registerSchemesAsPrivileged([{ scheme: 'monit', privileges: { secure: true, standard: true } }])
 
 // 存储数据
 const store = new Store()

src/components/Index.vue

@@ -1,7 +1,7 @@
 <template>
- <div class="h-screen relative grid grid-cols-10 grid-rows-5 text-white">
+ <div class="h-screen relative grid grid-cols-10 grid-rows-5 py-3 text-white">
  <!-- 窗口控制器 -->
- <div class="absolute top-0.5 left-2 space-x-1">
+ <div class="absolute left-2 space-x-1">
  <!-- 关闭窗口 -->
  <svg
  xmlns="http://www.w3.org/2000/svg"
@@ -43,7 +43,7 @@
  </svg>
  </div>
  <!-- 设置 -->
- <div class="absolute top-0.5 right-2 space-x-2">
+ <div class="absolute right-2 space-x-2">
  <!-- 断网提示 -->
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" height="13" class="inline" v-show="!network">
  <path
@@ -84,18 +84,25 @@
  </div>
  </div>
  <!-- follower -->
- <div class="flex-col-center col-span-6 row-span-3 mt-5">
+ <div class="flex-col-center col-span-6 row-span-3">
  <div class="text-intro m-0.5">follower</div>
  <div class="flex-row-center-bottom">
  <!-- github ico -->
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="80%" class="mb-1 mr-1">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 496 512"
+ class="mb-1 mr-1"
+ :class="{ 'h-12': follower < 1000, 'h-10': follower > 999 }"
+ >
  <path
  d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
  fill="#60A5FA"
  ></path>
  </svg>
  <!-- follower number -->
- <div class="text-5xl" :class="{ 'text-4xl': follower > 9999, 'text-6xl': follower < 999 }">{{ follower }}</div>
+ <div :class="{ 'text-6xl': follower < 1000, 'text-5xl': follower > 999 }">
+ {{ follower }}
+ </div>
  <!-- follower change -->
  <span
  class="text-4xl text-gray-400"
@@ -107,7 +114,7 @@
  </div>
  </div>
  <!-- repo -->
- <div class="flex-col-center-left col-span-4 row-span-5 mt-1 ml-2">
+ <div class="flex-col-center-left col-span-4 row-span-5 ml-2 overflow-y-scroll">
  <div class="flex-row-center" v-for="(value, index) in repoChange" :key="index" @click="handleRepo(value.repo)">
  <!-- star ico -->
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="13" class="mr-1.5">
@@ -127,18 +134,25 @@
  </div>
  </div>
  <!-- star -->
- <div class="flex-col-center col-span-3 row-span-2 mb-3">
+ <div class="flex-col-center col-span-3 row-span-2">
  <div class="text-intro">star</div>
  <div class="flex-row-center-bottom">
  <!-- star ico -->
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="23" class="mb-1.5">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 576 512"
+ class="mr-0.5 mb-1.5"
+ :class="{ 'h-6': star < 1000, 'h-5': star > 999 }"
+ >
  <path
  d="M287.9 0C297.1 0 305.5 5.25 309.5 13.52L378.1 154.8L531.4 177.5C540.4 178.8 547.8 185.1 550.7 193.7C553.5 202.4 551.2 211.9 544.8 218.2L433.6 328.4L459.9 483.9C461.4 492.9 457.7 502.1 450.2 507.4C442.8 512.7 432.1 513.4 424.9 509.1L287.9 435.9L150.1 509.1C142.9 513.4 133.1 512.7 125.6 507.4C118.2 502.1 114.5 492.9 115.1 483.9L142.2 328.4L31.11 218.2C24.65 211.9 22.36 202.4 25.2 193.7C28.03 185.1 35.5 178.8 44.49 177.5L197.7 154.8L266.3 13.52C270.4 5.249 278.7 0 287.9 0L287.9 0zM287.9 78.95L235.4 187.2C231.9 194.3 225.1 199.3 217.3 200.5L98.98 217.9L184.9 303C190.4 308.5 192.9 316.4 191.6 324.1L171.4 443.7L276.6 387.5C283.7 383.7 292.2 383.7 299.2 387.5L404.4 443.7L384.2 324.1C382.9 316.4 385.5 308.5 391 303L476.9 217.9L358.6 200.5C350.7 199.3 343.9 194.3 340.5 187.2L287.9 78.95z"
  fill="#FBBF24"
  ></path>
  </svg>
  <!-- star number -->
- <div class="text-2xl" :class="{ 'text-xl': star > 9999, 'text-3xl': star < 999 }">{{ star }}</div>
+ <div :class="{ 'text-3xl': star < 1000, 'text-2xl': star > 999 }">
+ {{ star }}
+ </div>
  <!-- star change -->
  <span
  class="text-2xl text-gray-400"
@@ -149,18 +163,23 @@
  </div>
  </div>
  <!-- fork -->
- <div class="flex-col-center col-span-3 row-span-2 mb-3">
+ <div class="flex-col-center col-span-3 row-span-2">
  <div class="text-intro">fork</div>
  <div class="flex-row-center-bottom">
  <!-- fork ico -->
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="22" class="mr-0.5 mb-1.5">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 448 512"
+ class="mr-1 mb-1.5"
+ :class="{ 'h-6': fork < 1000, 'h-5': fork > 999 }"
+ >
  <path
  d="M160 80C160 112.8 140.3 140.1 112 153.3V192C112 209.7 126.3 224 144 224H304C321.7 224 336 209.7 336 192V153.3C307.7 140.1 288 112.8 288 80C288 35.82 323.8 0 368 0C412.2 0 448 35.82 448 80C448 112.8 428.3 140.1 400 153.3V192C400 245 357 288 304 288H256V358.7C284.3 371 304 399.2 304 432C304 476.2 268.2 512 224 512C179.8 512 144 476.2 144 432C144 399.2 163.7 371 192 358.7V288H144C90.98 288 48 245 48 192V153.3C19.75 140.1 0 112.8 0 80C0 35.82 35.82 0 80 0C124.2 0 160 35.82 160 80V80zM80 104C93.25 104 104 93.25 104 80C104 66.75 93.25 56 80 56C66.75 56 56 66.75 56 80C56 93.25 66.75 104 80 104zM368 104C381.3 104 392 93.25 392 80C392 66.75 381.3 56 368 56C354.7 56 344 66.75 344 80C344 93.25 354.7 104 368 104zM224 408C210.7 408 200 418.7 200 432C200 445.3 210.7 456 224 456C237.3 456 248 445.3 248 432C248 418.7 237.3 408 224 408z"
  fill="#F87171"
  ></path>
  </svg>
  <!-- fork number -->
- <div class="text-2xl" :class="{ 'text-xl': star > 9999, 'text-3xl': star < 999 }">{{ fork }}</div>
+ <div :class="{ 'text-3xl': fork < 1000, 'text-2xl': fork > 999 }">{{ fork }}</div>
  <!-- fork change -->
  <span
  class="text-2xl text-gray-400"
@@ -263,7 +282,7 @@ export default {
  repoInfo.sort((a, b) => {
  return b.star - a.star
  })
- return repoInfo.slice(0, 7)
+ return repoInfo
  },
  },
  methods: {
@@ -404,13 +423,13 @@ export default {
 }
 
 .flex-col-center-left {
- @apply flex flex-col flex-wrap justify-center items-start;
+ @apply flex flex-col flex-nowrap items-start;
 }
 .flex-row-center {
  @apply flex flex-row flex-nowrap justify-center items-center;
 }
 .flex-row-center-bottom {
- @apply flex flex-row flex-nowrap justify-center items-end;
+ @apply flex flex-row flex-nowrap items-end;
 }
 .text-intro {
  @apply font-mono text-gray-400;

yarn.lock

@@ -1130,7 +1130,7 @@
  dependencies:
  defer-to-connect "^1.0.1"
 
-"@tailwindcss/postcss7-compat@npm:@tailwindcss/postcss7-compat@^2.2.17", "tailwindcss@npm:@tailwindcss/postcss7-compat@^2.2.17":
+"@tailwindcss/postcss7-compat@^2.2.17", "tailwindcss@npm:@tailwindcss/postcss7-compat@^2.2.17":
  version "2.2.17"
  resolved "https://registry.npmmirror.com/@tailwindcss/postcss7-compat/-/postcss7-compat-2.2.17.tgz#dc78f3880a2af84163150ff426a39e42b9ae8922"
  integrity sha512-3h2svqQAqYHxRZ1KjsJjZOVTQ04m29LjfrLjXyZZEJuvUuJN+BCIF9GI8vhE1s0plS0mogd6E6YLg6mu4Wv/Vw==
@@ -4969,7 +4969,7 @@ flush-write-stream@^1.0.0:
  inherits "^2.0.3"
  readable-stream "^2.3.6"
 
-follow-redirects@^1.0.0, follow-redirects@^1.14.4, follow-redirects@^1.14.8:
+follow-redirects@^1.0.0, follow-redirects@^1.14.4:
  version "1.14.9"
  resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
  integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==
@@ -7136,11 +7136,6 @@ node-forge@^0.10.0:
  resolved "https://registry.npmmirror.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3"
  integrity sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==
 
-node-forge@^1.0.0:
- version "1.2.1"
- resolved "https://registry.npmmirror.com/node-forge/-/node-forge-1.2.1.tgz#82794919071ef2eb5c509293325cec8afd0fd53c"
- integrity sha512-Fcvtbb+zBcZXbTTVwqGA5W+MKBj56UjVRevvchv5XrcyXbmNdesfZL37nlcWOfpgHhgmxApw3tQbTr4CqNmX4w==
-
 node-ipc@^9.1.1:
  version "9.2.1"
  resolved "https://registry.npmmirror.com/node-ipc/-/node-ipc-9.2.1.tgz#b32f66115f9d6ce841dc4ec2009d6a733f98bb6b"