feat(spx-gui): uITag adapted for the new UI specification (#2585)

* feat(spx-giu): ui-tag adapted for the new UI specification

* refactor(spx-gui): enhance UITag with checkable functionality

* refactor(spx-gui): beta tag to UITag

* refactor(spx-gui): merge checkable and checked into a single object prop

* docs(spx-gui): added comments to the UIChip and UITag components

Author: Overu

spx-gui/src/components/asset/library/AssetLibraryModal.vue

@@ -20,21 +20,21 @@
     </template>
     <section class="body">
       <div class="sider">
-        <UITag
+        <UIChip
           :type="category.value === categoryPersonal.value ? 'primary' : 'boring'"
           @click="handleSelectCategory(categoryPersonal)"
         >
           {{ $t(categoryPersonal.message) }}
-        </UITag>
+        </UIChip>
         <UIDivider />
-        <UITag
+        <UIChip
           v-for="c in categories"
           :key="c.value"
           :type="c.value === category.value ? 'primary' : 'boring'"
           @click="handleSelectCategory(c)"
         >
           {{ $t(c.message) }}
-        </UITag>
+        </UIChip>
       </div>
       <main class="main">
         <h3 class="title">{{ $t(category.message) }}</h3>
@@ -85,7 +85,7 @@
 
 <script lang="ts" setup>
 import { computed, ref, shallowReactive, shallowRef, watch } from 'vue'
-import { UITextInput, UIIcon, UITag, UIPagination, UIButton, UISearchableModal, UIDivider } from '@/components/ui'
+import { UITextInput, UIIcon, UIChip, UIPagination, UIButton, UISearchableModal, UIDivider } from '@/components/ui'
 import { listAsset, AssetType, type AssetData, Visibility } from '@/apis/asset'
 import { debounce } from 'lodash'
 import { useMessageHandle } from '@/utils/exception'

spx-gui/src/components/asset/library/management/AssetLibraryManagementModal.vue

@@ -8,7 +8,7 @@ import { listAsset, AssetType, type AssetData, Visibility, updateAsset, deleteAs
 import {
   UITextInput,
   UIIcon,
-  UITag,
+  UIChip,
   UIPagination,
   UISearchableModal,
   useModal,
@@ -196,14 +196,14 @@ const handleRemove = useMessageHandle(
     </template>
     <section class="body">
       <div class="sider">
-        <UITag
+        <UIChip
           v-for="c in categories"
           :key="c.value"
           :type="c.value === category.value ? 'primary' : 'boring'"
           @click="handleSelectCategory(c)"
         >
           {{ $t(c.message) }}
-        </UITag>
+        </UIChip>
       </div>
       <main class="main">
         <h3 class="title">{{ $t(category.message) }}</h3>

spx-gui/src/components/editor/common/AnglePicker.vue

@@ -4,6 +4,7 @@ import { useDraggableAngleForElement } from '@/utils/dom'
 import { makeArcPathString } from '@/utils/svg'
 import { nomalizeDegree, useDebouncedModel } from '@/utils/utils'
 import { specialDirections } from '@/utils/spx'
+import { UITag } from '@/components/ui'
 
 const props = defineProps<{
   modelValue: number
@@ -30,14 +31,14 @@ watch(angle, (v) => (modelValue.value = nomalizeDegree(v)))
 
 <template>
   <div class="angle-picker">
-    <!-- TODO: temporary, will be handled uniformly after the tag design specification is complete -->
-    <span
+    <UITag
       v-for="direction in specialDirections"
       :key="direction.name"
-      class="text"
-      :class="[direction.name.toLowerCase(), { active: modelValue === direction.value }]"
+      :class="[direction.name.toLowerCase()]"
+      :checkable="{ checked: modelValue === direction.value }"
+      variant="none"
       @click="modelValue = direction.value"
-      >{{ direction.name }}</span
+      >{{ direction.name }}</UITag
     >
     <svg
       ref="svgEl"
@@ -131,18 +132,6 @@ watch(angle, (v) => (modelValue.value = nomalizeDegree(v)))
   text-align: center;
 }
 
-.text {
-  font-size: 12px;
-  color: var(--ui-color-grey-900);
-  width: fit-content;
-  cursor: pointer;
-
-  &.active,
-  &:hover {
-    color: var(--ui-color-turquoise-500);
-  }
-}
-
 .picker {
   grid-column: 2;
   grid-row: 2;

spx-gui/src/components/editor/common/viewer/custom-transformer/rotate-circle.png

@@ -26,8 +26,7 @@
               <span class="item-text">
                 {{ $t({ en: 'Import Scratch project file...', zh: '导入 Scratch 项目文件...' }) }}
               </span>
-              <!-- TODO: temporary, will be handled uniformly after the tag design specification is complete -->
-              <div class="beta">Beta</div>
+              <UITag>Beta</UITag>
             </UIMenuItem>
             <UIMenuItem @click="handleImportAssetsFromScratch">
               <template #icon><img :src="importAssetsScratchSvg" /></template>
@@ -144,7 +143,8 @@ import {
   useConfirmDialog,
   useMessage,
   UIButtonGroup,
-  UIButtonGroupItem
+  UIButtonGroupItem,
+  UITag
 } from '@/components/ui'
 import { useMessageHandle } from '@/utils/exception'
 import { useI18n, type LocaleMessage } from '@/utils/i18n'
@@ -397,18 +397,6 @@ const autoSaveStateIcon = computed<AutoSaveStateIcon | null>(() => {
     flex: 1;
     margin-right: 8px;
   }
-
-  .beta {
-    margin-left: 24px;
-    height: 20px;
-    border-radius: 4px;
-    border: 1px solid var(--ui-color-grey-400);
-    background: var(--ui-color-grey-300);
-    padding: 0 8px;
-    font-size: 12px;
-    line-height: 20px;
-    color: var(--ui-color-grey-900);
-  }
 }
 
 .owner-info,

spx-gui/src/components/editor/navbar/EditorNavbar.vue

@@ -0,0 +1,42 @@
+<template>
+  <button class="ui-chip" :class="`type-${type}`">
+    <slot></slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+export type ChipType = 'primary' | 'boring'
+
+defineProps<{
+  type: ChipType
+}>()
+</script>
+
+<style lang="scss" scoped>
+.ui-chip {
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  height: 32px; // TODO: support different sizes
+  padding: 0 16px;
+  color: var(--ui-color-grey-100);
+  background: var(--ui-color-grey-600);
+  border: 1px solid var(--ui-color-grey-600);
+  border-radius: var(--ui-border-radius-2);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: 0.3s;
+
+  &.type-primary {
+    color: var(--ui-color-grey-100);
+    background: var(--ui-color-primary-main);
+    border-color: var(--ui-color-primary-main);
+  }
+
+  &.type-boring {
+    color: var(--ui-color-grey-900);
+    background: var(--ui-color-grey-300);
+    border-color: var(--ui-color-grey-300);
+  }
+}
+</style>