feat: 完成服务器页面和配置编辑页

global.d.ts

@@ -0,0 +1,4 @@
+declare const GIT_BRANCH: string;
+declare const GIT_COMMITHASH: string;
+declare const GIT_VERSION: string;
+declare const GIT_LASTCOMMITDATETIME: string;

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@mdi/js": "^7.4.47",
+    "ansi_up": "^6.0.2",
     "axios": "^1.7.9",
     "chart.js": "^4.4.7",
     "numeral": "^2.0.6",
@@ -24,6 +25,7 @@
     "@vue/eslint-config-prettier": "^8.0.0",
     "autoprefixer": "^10.4.20",
     "eslint-plugin-vue": "^9.32.0",
+    "git-revision-vite-plugin": "^0.0.11",
     "postcss": "^8.4.49",
     "postcss-import": "^15.1.0",
     "prettier": "^3.4.2",

src/App.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router';
+import NotificationContainer from './components/NotificationContainer.vue';
 </script>
 
 <template>
   <RouterView />
+  <NotificationContainer />
 </template>

src/components/CardBoxComponentEmpty.vue

@@ -1,5 +1,10 @@
+<script setup lang="ts">
+defineProps(['message']);
+</script>
+
 <template>
   <div class="text-center py-24 text-gray-500 dark:text-slate-400">
-    <p>Nothing's here…</p>
+    <p v-if="message">{{ message }}</p>
+    <p v-else>Nothing's here…</p>
   </div>
 </template>

src/components/CardBoxComponentHeader.vue

@@ -28,6 +28,7 @@ const buttonClick = (event) => {
     <div class="flex items-center py-3 grow font-bold" :class="[icon ? 'px-4' : 'px-6']">
       <BaseIcon v-if="icon" :path="icon" class="mr-3" />
       {{ title }}
+      <slot />
     </div>
     <button
       v-if="buttonIcon"

src/components/CardBoxModal.vue

@@ -75,7 +75,7 @@ window.addEventListener('keydown', (e) => {
       <template #footer>
         <BaseButtons>
           <BaseButton :label="buttonLabel" :color="button" @click="confirm" />
-          <BaseButton v-if="hasCancel" label="Cancel" :color="button" outline @click="cancel" />
+          <BaseButton v-if="hasCancel" label="取消" :color="button" outline @click="cancel" />
         </BaseButtons>
       </template>
     </CardBox>

src/components/Console.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { AnsiUp } from 'ansi_up';
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+const props = defineProps({
+  datas: {
+    type: Array,
+    require: true,
+    default: [],
+  },
+});
+
+const scrollToBottom = () =>
+  (consoleRef.value.scrollTop = consoleRef.value.scrollHeight ?? 0);
+
+const consoleRef = ref();
+const length = computed(() => props.datas.length);
+const ansiUp = new AnsiUp();
+ansiUp.use_classes = true;
+
+watch(length, () => nextTick(scrollToBottom));
+onMounted(scrollToBottom);
+</script>
+
+<template>
+  <div id="console" ref="consoleRef" class="py-1 overflow-y-scroll">
+    <div
+      class="whitespace-pre-wrap break-all hover:bg-[#8881] px-3 transition-colors"
+      v-for="line in datas"
+    >
+      <span v-html="ansiUp.ansi_to_html(line as string)"></span>
+    </div>
+  </div>
+</template>
+
+<style>
+div#console {
+  font-family: Consolas, 'Courier New', Courier, '微软雅黑';
+  height: 50vh;
+  min-height: 500px;
+  scrollbar-width: thin;
+  scrollbar-color: rgb(156, 163, 175) rgb(249, 250, 251);
+}
+
+div#console::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.dark div#console {
+  color-scheme: dark;
+  scrollbar-color: rgb(71, 85, 105) rgb(30, 41, 59);
+}
+</style>

src/components/FooterBar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { containerMaxW } from '@/config.js';
 import BaseLevel from '@/components/BaseLevel.vue';
+import { gitInfo } from '@/utils/constants';
 </script>
 
 <template>
@@ -13,8 +14,9 @@ import BaseLevel from '@/components/BaseLevel.vue';
           href="https://sereindev.github.io/"
           target="_blank"
           class="text-blue-600"
-          >Serein</a
-        >.
+          >Serein
+        </a>
+        <code :title="gitInfo.sha"> @ {{ gitInfo.shortSha }} </code>
       </div>
     </BaseLevel>
   </footer>

src/components/FormCheckRadio.vue

@@ -1,45 +1,61 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed } from 'vue';
 
 const props = defineProps({
   name: {
     type: String,
-    required: true
+    required: true,
   },
   type: {
     type: String,
     default: 'checkbox',
-    validator: (value) => ['checkbox', 'radio', 'switch'].includes(value as any)
+    validator: (value) =>
+      ['checkbox', 'radio', 'switch'].includes(value as any),
   },
   label: {
     type: String,
-    default: null
+    default: null,
   },
   modelValue: {
     type: [Array, String, Number, Boolean],
-    default: null
+    default: null,
   },
   inputValue: {
     type: [String, Number, Boolean],
-    required: true
-  }
-})
+    required: true,
+  },
+  disabled: Boolean,
+});
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue']);
 
 const computedValue = computed({
   get: () => props.modelValue,
   set: (value) => {
-    emit('update:modelValue', value)
-  }
-})
+    emit('update:modelValue', value);
+  },
+});
+
+const inputType = computed(() =>
+  props.type === 'radio' ? 'radio' : 'checkbox',
+);
 
-const inputType = computed(() => (props.type === 'radio' ? 'radio' : 'checkbox'))
+const classes = computed(() =>
+  props.disabled
+    ? ['opacity-70', 'cursor-not-allowed', props.type]
+    : [props.type],
+);
 </script>
 
 <template>
-  <label :class="type">
-    <input v-model="computedValue" :type="inputType" :name="name" :value="inputValue" />
+  <label :class="classes">
+    <input
+      v-model="computedValue"
+      :type="inputType"
+      :name="name"
+      :value="inputValue"
+      :disabled="disabled"
+    />
     <span class="check" />
     <span class="pl-2 select-none">{{ label }}</span>
   </label>