feat: add audio-setting icon

src/components/StageProgress.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="flex gap-5 w-full h-4">
+  <div class="flex gap-5 w-full h-3">
     <template v-for="i of props.stages">
       <template v-if="i?.children?.length && i.active">
-        <div class="flex gap-1 h-4" :style="{ width: i.ratio + '%' }">
+        <div class="flex gap-1" :style="{ width: i.ratio + '%' }">
           <template v-for="j of i.children">
             <Tooltip :title="j.name">
               <Progress

src/components/base/select/Select.vue

@@ -1,16 +1,5 @@
 <script setup lang="ts">
-import {
-  computed,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  provide,
-  ref,
-  useAttrs,
-  useSlots,
-  VNode,
-  watch,
-} from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, provide, ref, useSlots, VNode, watch } from 'vue'
 import { useWindowClick } from '@/hooks/event.ts'
 
 interface Option {
@@ -26,8 +15,7 @@ const props = defineProps<{
   options?: Option[]
 }>()
 
-const emit = defineEmits(['update:modelValue'])
-const attrs = useAttrs()
+const emit = defineEmits(['update:modelValue', 'toggle'])
 
 const isOpen = ref(false)
 const isReverse = ref(false)
@@ -69,6 +57,7 @@ const toggleDropdown = async () => {
   if (props.disabled) return
 
   isOpen.value = !isOpen.value
+  emit('toggle', isOpen.value)
 
   if (isOpen.value) {
     await nextTick()
@@ -81,6 +70,7 @@ const selectOption = (value: any, label: string) => {
   selectedOption.value = { value, label }
   emit('update:modelValue', value)
   isOpen.value = false
+  emit('toggle', isOpen.value)
 }
 
 let selectValue = ref(props.modelValue)
@@ -97,6 +87,7 @@ useWindowClick((e: PointerEvent) => {
     !dropdownRef.value.contains(e.target as Node)
   ) {
     isOpen.value = false
+    emit('toggle', isOpen.value)
   }
 })
 
@@ -158,26 +149,15 @@ onBeforeUnmount(() => {
 
 <template>
   <div class="select" ref="selectRef">
-    <div
-      class="select__wrapper"
-      :class="{ disabled: disabled, active: isOpen }"
-      @click="toggleDropdown"
-    >
+    <div class="select__wrapper" :class="{ disabled: disabled, active: isOpen }" @click="toggleDropdown">
       <div class="select__label" :class="{ 'is-placeholder': !selectedOption }">
         {{ displayValue }}
       </div>
-      <IconFluentChevronLeft20Filled
-        class="select__arrow"
-        :class="{ 'is-reverse': isOpen }"
-        width="16"
-      />
+      <IconFluentChevronLeft20Filled class="select__arrow" :class="{ 'is-reverse': isOpen }" width="16" />
     </div>
 
     <teleport to="body">
-      <transition
-        :name="isReverse ? 'zoom-in-bottom' : 'zoom-in-top'"
-        :key="isReverse ? 'bottom' : 'top'"
-      >
+      <transition :name="isReverse ? 'zoom-in-bottom' : 'zoom-in-top'" :key="isReverse ? 'bottom' : 'top'">
         <div class="select__dropdown" v-if="isOpen" ref="dropdownRef" :style="dropdownStyle">
           <slot></slot>
         </div>
@@ -237,9 +217,8 @@ onBeforeUnmount(() => {
 .select__dropdown {
   max-height: 200px;
   overflow-y: auto;
-  background-color: var(--color-third);
-  border-radius: 0.25rem;
-  @apply shadow-lg;
+  background-color: var(--color-card-bg);
+  @apply shadow-xl rounded-lg border border-gray-300 border-solid;
 }
 
 /* 往下展开的动画 */

src/components/dialog/MiniDialog.vue

@@ -35,37 +35,19 @@ watch(() => props.modelValue, (n) => {
 </template>
 
 <style lang="scss">
-
-
 .mini-row-title {
-  min-height: 2rem;
-  text-align: center;
-  font-size: 1rem;
-  font-weight: bold;
+  @apply text-center text-base font-bold mb-2;
   color: var(--color-font-1);
 }
 
 .mini-row {
-  min-height: 2rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--space);
+  @apply min-h-10 flex justify-between items-center gap-space text-base text-font-1 word-break-keep-all;
   color: var(--color-font-1);
-  word-break: keep-all;
 }
 
 .mini-modal {
-  position: absolute;
-  z-index: 9;
-  width: 12rem;
-  background: var(--color-second);
-  border-radius: .5rem;
-  box-shadow: 0 0 8px 2px var(--color-item-border);
-  padding: .6rem var(--space);
-  //top: 2.4rem;
-  left: 50%;
-  transform: translate3d(-50%, 0, 0);
-  //margin-top: 10rem;
+  background: var(--color-card-bg);
+  padding: var(--space) 1rem;
+  @apply z-9 absolute left-1/2 transform -translate-x-1/2 shadow-lg rounded-xl w-50;
 }
 </style>