refactor: update deps and refactor types

一些用户想要修改这个主题以用于 ServerStatus-Hotaru 的自定义前端，由于包管理器的更新，加强了对 peerDependencies 的要求，可能会导致一些用户依赖无法安装成功。
由于 vue-cli 的废弃，并且本项目已时间久远，一些代码并不规范。如果你有一定前端基础，需要修改此项目用于其他用途（如移植主题等），推荐使用 Vite 作为打包工具并参考此处的代码：https://github.com/cokemine/nodestatus/tree/master/web/hotaru-theme

.eslintrc

@@ -31,6 +31,8 @@
     "object-curly-spacing": [
       1,
       "always"
-    ]
+    ],
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off"
   }
 }

package.json

@@ -15,23 +15,22 @@
     "axios": "^0.21.1",
     "core-js": "^3.8.3",
     "semantic-ui-css": "^2.4.1",
-    "vue": "^3.0.0"
+    "vue": "^3.2.37"
   },
   "devDependencies": {
     "@types/axios": "^0.14.0",
-    "@typescript-eslint/eslint-plugin": "^2.33.0",
-    "@typescript-eslint/parser": "^2.33.0",
-    "@vue/cli-plugin-babel": "~4.5.11",
-    "@vue/cli-plugin-eslint": "~4.5.11",
-    "@vue/cli-plugin-typescript": "^4.5.11",
-    "@vue/cli-service": "~4.5.11",
-    "@vue/compiler-sfc": "^3.0.5",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-plugin-typescript": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
     "@vue/eslint-config-typescript": "^7.0.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.19.0",
     "eslint-plugin-vue": "^7.5.0",
     "svg-sprite-loader": "^6.0.7",
-    "typescript": "~4.1.3"
+    "typescript": "^4.1.3"
   },
   "browserslist": [
     "> 1%",

src/App.vue

@@ -19,6 +19,7 @@ import ServersTable from '@/components/ServersTable.vue';
 import UpdateTime from '@/components/UpdateTime.vue';
 import ServersCard from '@/components/ServersCard.vue';
 import TheFooter from '@/components/TheFooter.vue';
+import { BoxItem, StatusItem } from '@/types';
 
 export default defineComponent({
   name: 'App',
@@ -41,7 +42,7 @@ export default defineComponent({
         updated.value = Number(res.data.updated);
       })
       .catch(err => console.log(err));
-    onMounted(() => runFetch() && (timer = setInterval(runFetch, interval * 1000)));
+    onMounted(() => (runFetch(), true) && (timer = setInterval(runFetch, interval * 1000)));
     onBeforeUnmount(() => clearInterval(timer));
     return {
       servers,

src/components/CardItem.vue

@@ -23,12 +23,13 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import useStatus from './useStatus';
+import { StatusItem } from '@/types';
 
 export default defineComponent({
   name: 'CardItem',
   props: {
     server: {
-      type: Object as PropType<StatusItem | BoxItem>,
+      type: Object as PropType<StatusItem>,
       default: () => ({})
     }
   },

src/components/ServersCard.vue

@@ -9,11 +9,12 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import CardItem from '@/components/CardItem.vue';
+import { StatusItem } from '@/types';
 
 export default defineComponent({
   name: 'ServersCard',
   props: {
-    servers: Array as PropType<Array<StatusItem | BoxItem>>
+    servers: Array as PropType<Array<StatusItem>>
   },
   components: {
     CardItem

src/components/ServersTable.vue

@@ -28,12 +28,13 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import TableItem from '@/components/TableItem.vue';
+import { StatusItem } from '@/types';
 
 export default defineComponent({
   name: 'ServersTable',
   props: {
     servers: {
-      type: Array as PropType<Array<StatusItem | BoxItem>>,
+      type: Array as PropType<Array<StatusItem>>,
       default: () => ([])
     }
   },

src/components/TableItem.vue

@@ -65,12 +65,13 @@
 <script lang="ts">
 import { defineComponent, ref, PropType } from 'vue';
 import useStatus from './useStatus';
+import { StatusItem } from '@/types';
 
 export default defineComponent({
   name: 'TableItem',
   props: {
     server: {
-      type: Object as PropType<StatusItem | BoxItem>,
+      type: Object as PropType<StatusItem>,
       default: () => ({})
     }
   },

src/components/useStatus.ts

@@ -1,4 +1,5 @@
 import { computed } from 'vue';
+import { BoxItem, StatusItem } from '@/types';
 
 interface Props {
   server: StatusItem | BoxItem;

src/types/index.ts

@@ -0,0 +1,37 @@
+export interface BoxItem {
+  name: string;
+  host: string;
+  type: string;
+  online4: boolean;
+  online6: boolean;
+  location: string;
+  region: string;
+}
+
+export interface StatusItem extends BoxItem {
+  uptime: string;
+  load: number;
+  cpu: number;
+  network_rx: number;
+  network_tx: number;
+  network_in: number;
+  network_out: number;
+  memory_total: number;
+  memory_used: number;
+  swap_total: number;
+  swap_used: number;
+  hdd_total: number;
+  hdd_used: number;
+  custom: string;
+}
+
+declare global {
+  interface Window {
+    __PRE_CONFIG__: {
+      header: string;
+      subHeader: string;
+      interval: number;
+      footer: string;
+    };
+  }
+}

types/shims-vue.d.ts → src/types/shims-vue.d.ts

@@ -1,6 +1,6 @@
-/* eslint-disable */
-declare module '*.vue' {
-    import type {DefineComponent} from 'vue'
-    const component: DefineComponent<{}, {}, any>
-    export default component
+/* eslint-disable */
+declare module '*.vue' {
+    import type {DefineComponent} from 'vue'
+    const component: DefineComponent<{}, {}, any>
+    export default component
 }

tsconfig.json

@@ -28,7 +28,6 @@
     ]
   },
   "include": [
-    "types/**/*.ts",
     "src/**/*.ts",
     "src/**/*.tsx",
     "src/**/*.vue",

vue.config.js

@@ -1,4 +1,5 @@
 const resolve = d => require('path').resolve(__dirname, d);
+
 module.exports = {
   publicPath: './',
   pages: {