feat: enhance Tag component with closeable functionality and improved visibility

Author: Ayideyia

frontend/src/components/Modal/index.vue

@@ -133,13 +133,13 @@ provide('submit', handleSubmit)
             <div class="ml-auto">
               <slot name="toolbar"></slot>
               <!-- <Button v-if="toolbar.minimize" @click="toggleMinimize" icon="minimize" type="text" /> -->
-              <Button
-                v-if="toolbar.maximize"
-                @click="toggleMaximize"
-                :class="isMaximize ? '' : 'rotate-180'"
-                icon="arrowDown"
-                type="text"
-              />
+              <Button v-if="toolbar.maximize" @click="toggleMaximize" type="text">
+                <Icon
+                  :class="{ maximize: isMaximize }"
+                  icon="arrowDown"
+                  class="origin-center duration-200"
+                />
+              </Button>
             </div>
           </div>
           <div class="flex-1 overflow-auto mx-16">
@@ -190,4 +190,8 @@ provide('submit', handleSubmit)
     background-color: var(--modal-bg);
   }
 }
+
+.maximize {
+  transform: rotate(-180deg);
+}
 </style>

frontend/src/components/Tag/index.vue

@@ -1,20 +1,40 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+
 interface Props {
   color?: 'cyan' | 'green' | 'red' | 'default' | 'primary'
   size?: 'small' | 'default'
+  closeable?: boolean
 }
 
 withDefaults(defineProps<Props>(), {
   color: 'default',
+  closable: false,
 })
+
+const emit = defineEmits(['close'])
+
+const show = ref(true)
+const handleClose = () => {
+  emit('close')
+  show.value = false
+}
 </script>
 
 <template>
   <div
+    v-if="show"
     :class="[color, size]"
-    class="gui-tag px-8 mx-4 rounded-6 inline-block text-12 white-space-nowrap"
+    class="gui-tag px-8 mx-4 rounded-6 inline-block text-12 white-space-nowrap inline-flex items-center"
   >
     <slot></slot>
+    <Icon
+      v-if="closeable"
+      @click="handleClose"
+      :size="size === 'small' ? 12 : 14"
+      icon="close"
+      class="ml-2"
+    />
   </div>
 </template>