Add skill selection functionality to QrCode component, enhance SelectList with icon support, and update styles for improved user experience.

app/components/popup/QrCode.vue

@@ -16,6 +16,15 @@ const {
   handleCopyLink,
   handleSaveImage,
 } = useQrCodePopup()
+const { open: openSelectListPopup, state: selectListState } = useSelectListPopup()
+
+const handleSkillSelect = () => {
+  openSelectListPopup({
+    options: [
+      { label: 'Skill 1', value: 'skill1', icon: 'https://lanu-public-test-1377959011.cos.ap-guangzhou.myqcloud.com/examples/user-avatar.png' },
+    ],
+  })
+}
 
 const handleUpdateShow = (value: boolean) => {
   if (!value) {
@@ -45,7 +54,10 @@ const handleAmountInput = (event: Event) => {
   >
     <div class="qr-popup__container">
       <!-- Header: game info -->
-      <div class="qr-popup__header">
+      <div
+        class="qr-popup__header"
+        @click="handleSkillSelect"
+      >
         <div class="qr-popup__header-left">
           <div class="qr-popup__avatar">
             <img
@@ -58,6 +70,12 @@ const handleAmountInput = (event: Event) => {
           <span class="qr-popup__title">
             {{ state.title }}
           </span>
+          <van-icon
+            name="arrow"
+            class="qr-popup__header-arrow"
+            :class="{ 'qr-popup__header-arrow--active': selectListState.visible }"
+            size="14"
+          />
         </div>
       </div>
 
@@ -263,29 +281,12 @@ const handleAmountInput = (event: Event) => {
     color: #1d2129;
   }
 
-  &__header-link {
-    display: inline-flex;
-    align-items: center;
-    gap: 2px;
-    padding: 0;
-    border: none;
-    background: none;
-    cursor: default;
-  }
-
-  &__header-link-text {
-    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-    font-size: 11px;
-    color: #4e5969;
-  }
+  &__header-arrow {
+    transition: transform 0.2s ease;
 
-  &__header-link-arrow {
-    @include size(14px);
-    border-radius: 999px;
-    border: 1px solid #4e5969;
-    border-left: none;
-    border-top: none;
-    transform: rotate(-45deg);
+    &--active {
+      transform: rotate(90deg);
+    }
   }
 
   &__tabs {

app/components/popup/SelectList.vue

@@ -37,6 +37,12 @@ const handleUpdateShow = (value: boolean) => {
           @click="select(item)"
         >
           <span class="select-list-popup__item-label">
+            <img
+              v-if="item.icon"
+              :src="item.icon"
+              :alt="item.label"
+              loading="lazy"
+            >
             {{ item.label }}
           </span>
 
@@ -107,10 +113,16 @@ const handleUpdateShow = (value: boolean) => {
   }
 
   &__item-label {
-    font-family: var(--font-title);
     font-size: 14px;
     font-weight: 600;
     color: var(--color-text-primary);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    img {
+      @include size(24px);
+    }
   }
 
   &__indicator {

app/composables/useSelectListPopup.ts

@@ -5,6 +5,8 @@ export interface SelectListOption {
   value: string | number
   /** 展示文案 */
   label: string
+  /** 可选 icon */
+  icon?: string
 }
 
 export interface SelectListPopupOptions {
@@ -73,5 +75,3 @@ export const useSelectListPopup = () => {
     select,
   }
 }
-
-