美化

ui/src/App.vue

@@ -52,19 +52,20 @@ provide('steps', steps)
     <n-spin v-if="loading" class="container">
       <template #description>加载中</template>
     </n-spin>
-    <n-tabs
-      v-else
-      type="card"
-      placement="left"
-      class="container"
-      :default-value="page"
-      @update:value="set_page"
-      :disabled="running"
-    >
-      <n-tab-pane name="init" tab="初始化"><init /></n-tab-pane>
-      <n-tab-pane name="update" tab="更新代码"><update /></n-tab-pane>
-      <n-tab-pane name="launch" tab="启动程序"><launch /></n-tab-pane>
-    </n-tabs>
+    <n-notification-provider v-else>
+      <n-tabs
+        type="card"
+        placement="left"
+        class="container"
+        :default-value="page"
+        @before-leave="!running"
+        @update:value="set_page"
+      >
+        <n-tab-pane name="init" tab="初始化"><init /></n-tab-pane>
+        <n-tab-pane name="update" tab="更新代码"><update /></n-tab-pane>
+        <n-tab-pane name="launch" tab="启动程序"><launch /></n-tab-pane>
+      </n-tabs>
+    </n-notification-provider>
     <n-global-style />
   </n-config-provider>
 </template>

ui/src/components/FloatButton.vue

@@ -8,6 +8,8 @@ const steps = inject('steps')
 const current_step = inject('current_step')
 const current_state = inject('current_state')
 
+const notification = useNotification()
+
 async function start() {
   log.value = ''
   running.value = true
@@ -20,25 +22,37 @@ async function start() {
   }
   current_state.value = 'finish'
   running.value = false
+  notification['info']({
+    content: '提示',
+    meta: '命令运行完成',
+    duration: 3000
+  })
 }
 </script>
 
 <template>
-  <n-button class="float" type="primary" :loading="running" :disabled="running" @click="start">
+  <n-button
+    class="float"
+    type="primary"
+    :loading="running"
+    :disabled="running"
+    @click="start"
+    circle
+    size="large"
+  >
     <template #icon>
       <n-icon>
         <play-icon />
       </n-icon>
     </template>
-    {{ running ? '' : '运行' }}
   </n-button>
 </template>
 
 <style scoped>
 .float {
   position: absolute;
-  right: 28px;
-  bottom: 28px;
+  right: 36px;
+  bottom: 36px;
   opacity: 0.8;
 }
 

ui/src/components/LogComponent.vue

@@ -7,8 +7,8 @@ const log_ele = inject('log_ele')
 
 <template>
   <n-config-provider :theme="darkTheme" class="provider">
-    <n-card class="full" ref="log_ele" content-style="height: 100%">
-      <n-log :log="log" class="full" />
+    <n-card class="full" content-style="height: 100%">
+      <n-log :log="log" class="full" ref="log_ele" />
     </n-card>
   </n-config-provider>
 </template>