feat: 优化

src/components/Dropdown/index.vue

@@ -1,15 +1,19 @@
 <template>
-  <div class="dropdown-wrap">
-    <div
-      class="btn"
-      @click="emits('update:modelValue', !modelValue)"
-    >
+  <div
+    class="dropdown-wrap"
+    :class="{ hover: props.trigger === 'hover' }"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @click="handleClick"
+  >
+    <div class="btn">
       <slot name="btn"></slot>
     </div>
     <div
       class="container"
+      :class="{ [props.positon]: 1 }"
       :style="{
-        display: !isMobile() ? 'auto' : modelValue ? 'block' : 'none',
+        display: show ? 'block' : 'none',
       }"
     >
       <div class="wrap">
@@ -20,22 +24,50 @@
 </template>
 
 <script lang="ts" setup>
-import { isMobile } from 'billd-utils';
+import { ref } from 'vue';
+
+const show = ref(false);
 
-defineProps({
-  modelValue: { type: Boolean, default: false },
-});
-const emits = defineEmits(['update:modelValue']);
+const props = withDefaults(
+  defineProps<{
+    trigger?: 'hover' | 'click';
+    positon?: 'left' | 'right';
+  }>(),
+  {
+    trigger: 'hover',
+    positon: 'right',
+  }
+);
+
+function handleClick() {
+  console.log('handleClick');
+  show.value = true;
+}
+function handleMouseEnter() {
+  console.log('handleMouseEnter');
+  if (props.trigger === 'hover') {
+    show.value = true;
+  }
+}
+function handleMouseLeave() {
+  console.log('handleMouseLeave');
+  show.value = false;
+}
 </script>
 
 <style lang="scss" scoped>
 .dropdown-wrap {
+  display: inline-block;
   position: relative;
-  &:hover {
-    .container {
-      display: block;
+  cursor: initial;
+  &.hover {
+    &:hover {
+      .container {
+        display: block;
+      }
     }
   }
+
   .btn {
     cursor: pointer;
     user-select: none;
@@ -46,6 +78,12 @@ const emits = defineEmits(['update:modelValue']);
     right: 0;
     z-index: 3;
     display: none;
+    &.right {
+      right: 0;
+    }
+    &.left {
+      left: 0;
+    }
     .wrap {
       box-sizing: border-box;
       margin-top: 5px;

src/layout/pc/head/index.vue

@@ -71,7 +71,6 @@
       </div>
       <div class="right">
         <Dropdown
-          v-model="dropdownDoc"
           class="doc"
           v-if="MODULE_CONFIG_SWITCH.appdownload"
         >
@@ -119,7 +118,6 @@
         </Dropdown>
 
         <Dropdown
-          v-model="dropdownSys"
           class="ecosystem"
           v-if="MODULE_CONFIG_SWITCH.ecosystem"
         >
@@ -164,7 +162,6 @@
         </Dropdown>
 
         <Dropdown
-          v-model="dropdownAbout"
           class="about"
           v-if="MODULE_CONFIG_SWITCH.about"
         >
@@ -330,9 +327,6 @@ const router = useRouter();
 const userStore = useUserStore();
 const appStore = useAppStore();
 const githubStar = ref('');
-const dropdownDoc = ref(false);
-const dropdownSys = ref(false);
-const dropdownAbout = ref(false);
 
 const about = ref([
   {

src/views/pull/index.vue

@@ -179,11 +179,33 @@
         >
           <template v-if="item.msgType === DanmuMsgTypeEnum.danmu">
             <span class="name">
-              <span v-if="item.userInfo">
+              <span
+                v-if="
+                  item.userInfo && userStore.userInfo?.id === item.userInfo.id
+                "
+              >
                 {{ item.userInfo.username }}[{{
                   item.userInfo.roles?.map((v) => v.role_name).join()
                 }}]
               </span>
+              <Dropdown
+                trigger="click"
+                positon="left"
+                v-else-if="item.userInfo"
+              >
+                <template #btn>
+                  {{ item.userInfo.username }}[{{
+                    item.userInfo.roles?.map((v) => v.role_name).join()
+                  }}]
+                </template>
+                <template #list>
+                  <div class="list">
+                    <div class="item">{{ item.userInfo.username }}</div>
+                    <div class="item operator">禁言该用户</div>
+                    <div class="item operator">踢掉该用户</div>
+                  </div>
+                </template>
+              </Dropdown>
               <span v-else>{{ item.socket_id }}[游客]</span>
             </span>
             <span>：</span>
@@ -799,6 +821,16 @@ function handleScrollTop() {
           &.system {
             color: red;
           }
+          .list {
+            .item {
+              &:hover {
+                &.operator {
+                  cursor: pointer;
+                  color: $theme-color-gold;
+                }
+              }
+            }
+          }
         }
         .msg {
           margin-top: 4px;