redesign: runner header (#435)

* redisign: runner header

* loading & button handler

* UIModalClose: size large

spx-gui/src/components/project/runner/RunnerContainer.vue

@@ -1,26 +1,25 @@
 <template>
   <div class="container">
     <div class="header">
-      <div>
+      <div class="header-left"></div>
+      <div class="project-name">
         {{ project?.name }}
       </div>
-      <UITooltip placement="bottom">
-        <template #trigger>
-          <button>
-            <UIIcon type="rotate" @click="handleRerun" />
-          </button>
-        </template>
-        {{ $t({ en: 'Rerun', zh: '重新运行' }) }}
-      </UITooltip>
-      <UITooltip placement="bottom">
-        <template #trigger>
-          <button>
-            <UIIcon type="share" @click="handleShare" />
-          </button>
-        </template>
-        {{ $t({ en: 'Share', zh: '分享' }) }}
-      </UITooltip>
-      <UIModalClose v-if="mode === 'debug'" class="close" @click="emit('close')" />
+      <div class="header-right">
+        <UIButton class="button" icon="rotate" @click="handleRerun">
+          {{ $t({ en: 'Rerun', zh: '重新运行' }) }}
+        </UIButton>
+        <UIButton
+          class="button"
+          type="boring"
+          icon="share"
+          :loading="handleShare.isLoading.value"
+          @click="handleShare.fn"
+        >
+          {{ $t({ en: 'Share', zh: '分享' }) }}
+        </UIButton>
+        <UIModalClose v-if="mode === 'debug'" class="close" @click="emit('close')" />
+      </div>
     </div>
     <div :class="['main', displayMode, { expanded }]">
       <div class="runner-container">
@@ -63,7 +62,8 @@ import dayjs from 'dayjs'
 import type { Project } from '@/models/project'
 import ProjectRunner from './ProjectRunner.vue'
 import { useSaveAndShareProject, useShareProject } from '@/components/project'
-import { UIIcon, UIModalClose, UITooltip } from '@/components/ui'
+import { UIButton, UIIcon, UIModalClose } from '@/components/ui'
+import { useMessageHandle } from '@/utils/exception'
 
 const props = defineProps<{ project: Project; mode: 'debug' | 'share' }>()
 const emit = defineEmits<{
@@ -124,13 +124,16 @@ const handleRerun = () => {
 
 const saveAndShareProject = useSaveAndShareProject()
 const shareProject = useShareProject()
-const handleShare = () => {
-  if (props.mode === 'debug') {
-    saveAndShareProject(props.project)
-  } else {
-    shareProject(props.project)
-  }
-}
+const handleShare = useMessageHandle(
+  () => {
+    if (props.mode === 'debug') {
+      return saveAndShareProject(props.project)
+    } else {
+      return shareProject(props.project)
+    }
+  },
+  { en: 'Failed to share project', zh: '分享项目失败' }
+)
 </script>
 <style lang="scss" scoped>
 button {
@@ -140,15 +143,8 @@ button {
   padding: 0;
 }
 
-.header button > .ui-icon {
-  width: 24px;
-  height: 24px;
-  color: var(--ui-color-primary-500);
-}
-
 .close {
-  position: absolute;
-  right: 20px;
+  transform: scale(1.2);
 }
 
 .container {
@@ -157,19 +153,42 @@ button {
   height: 100vh;
   overflow: hidden;
 }
+
 .header {
   display: flex;
-  justify-content: center;
   align-items: center;
-  gap: 40px;
+  gap: 32px;
   font-size: 16px;
   font-weight: 500;
   border-bottom: 1px solid var(--ui-color-grey-400);
   height: 56px;
-  position: relative;
   color: var(--ui-color-title);
 }
 
+.header-left {
+  flex: 1;
+  flex-basis: 30%;
+}
+
+.project-name {
+  flex: 1;
+  flex-basis: 40%;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.header-right {
+  flex: 1;
+  flex-basis: 30%;
+  display: flex;
+  gap: 20px;
+  justify-content: flex-end;
+  align-items: center;
+  padding-right: 20px;
+}
+
 .runner-container {
   overflow: hidden;
   flex: 1;

spx-gui/src/components/ui/modal/UIModalClose.vue

@@ -1,17 +1,24 @@
 <template>
-  <div class="ui-modal-close">
+  <div :class="['ui-modal-close', `size-${size}`]">
     <UIIcon type="close" class="icon" />
   </div>
 </template>
 
 <script setup lang="ts">
 import UIIcon from '../icons/UIIcon.vue'
+
+withDefaults(
+  defineProps<{
+    size?: 'medium' | 'large'
+  }>(),
+  {
+    size: 'medium'
+  }
+)
 </script>
 
 <style scoped lang="scss">
 .ui-modal-close {
-  width: 28px;
-  height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -26,10 +33,25 @@ import UIIcon from '../icons/UIIcon.vue'
   &:active {
     background-color: var(--ui-color-grey-500);
   }
-}
 
-.icon {
-  width: 20px;
-  height: 20px;
+  &.size-medium {
+    width: 28px;
+    height: 28px;
+
+    .icon {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  &.size-large {
+    width: 32px;
+    height: 32px;
+
+    .icon {
+      width: 24px;
+      height: 24px;
+    }
+  }
 }
 </style>