美化

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;
 }