From ff483b874a673f1dd94f6c4f8e55bbcc16fb991f Mon Sep 17 00:00:00 2001
From: Tim <nagisa12164@163.com>
Date: Mon, 21 Jul 2025 10:34:38 +0800
Subject: [PATCH] Revert "feat: add mobile dropdown page and search"

This reverts commit 7a59f413b5dcc1723a31eacec137c8dce100895b.
---
 open-isle-cli/src/components/Dropdown.vue     |  50 +-----
 .../src/components/HeaderComponent.vue        |  45 +----
 open-isle-cli/src/router/index.js             |   6 -
 open-isle-cli/src/utils/mobileDropdown.js     |  15 --
 .../src/views/MobileDropdownPageView.vue      | 156 ------------------
 5 files changed, 9 insertions(+), 263 deletions(-)
 delete mode 100644 open-isle-cli/src/utils/mobileDropdown.js
 delete mode 100644 open-isle-cli/src/views/MobileDropdownPageView.vue

diff --git a/open-isle-cli/src/components/Dropdown.vue b/open-isle-cli/src/components/Dropdown.vue
index 16ab2318b..2eac4fbb4 100644
--- a/open-isle-cli/src/components/Dropdown.vue
+++ b/open-isle-cli/src/components/Dropdown.vue
@@ -58,10 +58,7 @@
 
 <script>
 import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
-import { useRouter } from 'vue-router'
 import { hatch } from 'ldrs'
-import { isMobile } from '../utils/screen'
-import { registerDropdownStore, removeDropdownStore } from '../utils/mobileDropdown'
 hatch.register()
 
 export default {
@@ -79,10 +76,7 @@ export default {
   },
   emits: ['update:modelValue'],
   setup(props, { emit }) {
-    const router = useRouter()
-    const storeId = Math.random().toString(36).substring(2)
     const open = ref(false)
-    const model = ref(props.modelValue)
     const search = ref('')
     const setSearch = (val) => {
       search.value = val
@@ -93,18 +87,7 @@ export default {
     const wrapper = ref(null)
 
     const toggle = () => {
-      if (isMobile.value) {
-        registerDropdownStore(storeId, {
-          value: model,
-          multiple: props.multiple,
-          fetchOptions: props.fetchOptions,
-          remote: props.remote,
-          showSearch: props.showSearch
-        })
-        router.push(`/mobile-dropdown/${storeId}`)
-      } else {
-        open.value = !open.value
-      }
+      open.value = !open.value
     }
 
     const close = () => {
@@ -113,16 +96,16 @@ export default {
 
     const select = id => {
       if (props.multiple) {
-        const arr = Array.isArray(model.value) ? [...model.value] : []
+        const arr = Array.isArray(props.modelValue) ? [...props.modelValue] : []
         const idx = arr.indexOf(id)
         if (idx > -1) {
           arr.splice(idx, 1)
         } else {
           arr.push(id)
         }
-        model.value = arr
+        emit('update:modelValue', arr)
       } else {
-        model.value = id
+        emit('update:modelValue', id)
         close()
       }
       search.value = ''
@@ -162,18 +145,6 @@ export default {
         }
       }
     )
-    watch(
-      () => props.modelValue,
-      val => {
-        model.value = val
-      }
-    )
-    watch(
-      () => model.value,
-      val => {
-        emit('update:modelValue', val)
-      }
-    )
 
     watch(open, async val => {
       if (val) {
@@ -192,26 +163,21 @@ export default {
     })
 
     onMounted(() => {
-      if (!isMobile.value) {
-        document.addEventListener('click', clickOutside)
-      }
+      document.addEventListener('click', clickOutside)
       if (!props.remote) {
         loadOptions()
       }
     })
 
     onBeforeUnmount(() => {
-      if (!isMobile.value) {
-        document.removeEventListener('click', clickOutside)
-      }
-      removeDropdownStore(storeId)
+      document.removeEventListener('click', clickOutside)
     })
 
     const selectedLabels = computed(() => {
       if (props.multiple) {
-        return options.value.filter(o => (model.value || []).includes(o.id))
+        return options.value.filter(o => (props.modelValue || []).includes(o.id))
       }
-      const match = options.value.find(o => o.id === model.value)
+      const match = options.value.find(o => o.id === props.modelValue)
       return match ? [match] : []
     })
 
diff --git a/open-isle-cli/src/components/HeaderComponent.vue b/open-isle-cli/src/components/HeaderComponent.vue
index 7ebe75fe4..601f4c9b7 100644
--- a/open-isle-cli/src/components/HeaderComponent.vue
+++ b/open-isle-cli/src/components/HeaderComponent.vue
@@ -13,9 +13,6 @@
       </div>
 
       <div v-if="isLogin" class="header-content-right">
-        <button v-if="isMobile" class="mobile-search-btn" @click="openMobileSearch">
-          <i class="fas fa-search"></i>
-        </button>
         <DropdownMenu ref="userMenu" :items="headerMenuItems">
           <template #trigger>
             <div class="avatar-container">
@@ -27,9 +24,6 @@
       </div>
 
       <div v-else class="header-content-right">
-        <button v-if="isMobile" class="mobile-search-btn" @click="openMobileSearch">
-          <i class="fas fa-search"></i>
-        </button>
         <div class="header-content-item-main" @click="goToLogin">登录</div>
         <div class="header-content-item-secondary" @click="goToSignup">注册</div>
       </div>
@@ -39,11 +33,8 @@
 
 <script>
 import { authState, clearToken, loadCurrentUser } from '../utils/auth'
-import { watch, ref } from 'vue'
+import { watch } from 'vue'
 import DropdownMenu from './DropdownMenu.vue'
-import { isMobile } from '../utils/screen'
-import { registerDropdownStore } from '../utils/mobileDropdown'
-import { API_BASE_URL } from '../main'
 
 export default {
   name: 'HeaderComponent',
@@ -63,9 +54,6 @@ export default {
     isLogin() {
       return authState.loggedIn
     },
-    isMobile() {
-      return isMobile.value
-    },
     headerMenuItems() {
       return [
         { text: '设置', onClick: this.goToSettings },
@@ -132,23 +120,6 @@ export default {
     goToLogout() {
       clearToken()
       this.$router.push('/login')
-    },
-    async openMobileSearch() {
-      const id = Math.random().toString(36).substring(2)
-      registerDropdownStore(id, {
-        value: ref(null),
-        multiple: false,
-        remote: true,
-        showSearch: true,
-        async fetchOptions(kw) {
-          if (!kw) return []
-          const res = await fetch(`${API_BASE_URL}/api/search/global?keyword=${encodeURIComponent(kw)}`)
-          if (!res.ok) return []
-          const data = await res.json()
-          return data.map(r => ({ id: r.id, name: r.text }))
-        }
-      })
-      this.$router.push(`/mobile-dropdown/${id}`)
     }
   }
 }
@@ -229,20 +200,6 @@ export default {
   cursor: pointer;
 }
 
-.mobile-search-btn {
-  background: none;
-  border: none;
-  color: inherit;
-  font-size: 20px;
-  cursor: pointer;
-}
-
-@media (min-width: 769px) {
-  .mobile-search-btn {
-    display: none;
-  }
-}
-
 .avatar-container {
   position: relative;
   display: flex;
diff --git a/open-isle-cli/src/router/index.js b/open-isle-cli/src/router/index.js
index f64aca9b2..877f6da9d 100644
--- a/open-isle-cli/src/router/index.js
+++ b/open-isle-cli/src/router/index.js
@@ -14,7 +14,6 @@ import NotFoundPageView from '../views/NotFoundPageView.vue'
 import GithubCallbackPageView from '../views/GithubCallbackPageView.vue'
 import DiscordCallbackPageView from '../views/DiscordCallbackPageView.vue'
 import TwitterCallbackPageView from '../views/TwitterCallbackPageView.vue'
-import MobileDropdownPageView from '../views/MobileDropdownPageView.vue'
 
 const routes = [
   {
@@ -87,11 +86,6 @@ const routes = [
     name: 'twitter-callback',
     component: TwitterCallbackPageView
   },
-  {
-    path: '/mobile-dropdown/:id',
-    name: 'mobile-dropdown',
-    component: MobileDropdownPageView
-  },
   {
     path: '/404',
     name: 'not-found',
diff --git a/open-isle-cli/src/utils/mobileDropdown.js b/open-isle-cli/src/utils/mobileDropdown.js
deleted file mode 100644
index 237e03997..000000000
--- a/open-isle-cli/src/utils/mobileDropdown.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { reactive } from 'vue'
-
-const stores = reactive({})
-
-export function registerDropdownStore(id, store) {
-  stores[id] = store
-}
-
-export function getDropdownStore(id) {
-  return stores[id]
-}
-
-export function removeDropdownStore(id) {
-  delete stores[id]
-}
diff --git a/open-isle-cli/src/views/MobileDropdownPageView.vue b/open-isle-cli/src/views/MobileDropdownPageView.vue
deleted file mode 100644
index 8a563b6f8..000000000
--- a/open-isle-cli/src/views/MobileDropdownPageView.vue
+++ /dev/null
@@ -1,156 +0,0 @@
-<template>
-  <div class="mobile-dropdown-page">
-    <div class="mobile-dropdown-header">
-      <i class="fas fa-arrow-left back-icon" @click="goBack"></i>
-      <div v-if="store && store.showSearch" class="search-container">
-        <input
-          type="text"
-          v-model="search"
-          placeholder="搜索"
-          @input="onSearch"
-        />
-      </div>
-    </div>
-    <div class="options" ref="scrollEl">
-      <div v-if="loading" class="loading-container">
-        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-      </div>
-      <template v-else>
-        <div
-          v-for="o in filteredOptions"
-          :key="o.id"
-          @click="select(o.id)"
-          :class="['option', { selected: isSelected(o.id) }]"
-        >
-          <span>{{ o.name }}</span>
-        </div>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { getDropdownStore, removeDropdownStore } from '../utils/mobileDropdown'
-import { hatch } from 'ldrs'
-hatch.register()
-
-export default {
-  name: 'MobileDropdownPageView',
-  setup() {
-    const router = useRouter()
-    const route = useRoute()
-    const id = route.params.id
-    const store = getDropdownStore(id)
-    if (!store) {
-      router.back()
-      return {}
-    }
-    const options = ref([])
-    const search = ref('')
-    const loading = ref(false)
-
-    const loadOptions = async (kw = '') => {
-      try {
-        loading.value = true
-        const res = await store.fetchOptions(kw)
-        options.value = Array.isArray(res) ? res : []
-      } finally {
-        loading.value = false
-      }
-    }
-
-    const filteredOptions = computed(() => {
-      if (store.remote) return options.value
-      if (!search.value) return options.value
-      return options.value.filter(o => o.name.toLowerCase().includes(search.value.toLowerCase()))
-    })
-
-    const isSelected = id => {
-      if (store.multiple) {
-        return Array.isArray(store.value.value) && store.value.value.includes(id)
-      }
-      return store.value.value === id
-    }
-
-    const select = id => {
-      if (store.multiple) {
-        const arr = Array.isArray(store.value.value) ? [...store.value.value] : []
-        const idx = arr.indexOf(id)
-        if (idx > -1) arr.splice(idx, 1)
-        else arr.push(id)
-        store.value.value = arr
-      } else {
-        store.value.value = id
-        router.back()
-      }
-    }
-
-    const onSearch = async () => {
-      if (store.remote) {
-        await loadOptions(search.value)
-      }
-    }
-
-    const goBack = () => {
-      router.back()
-    }
-
-    onMounted(async () => {
-      await loadOptions()
-    })
-    onBeforeUnmount(() => {
-      removeDropdownStore(id)
-    })
-
-    return { store, options, search, loading, filteredOptions, isSelected, select, onSearch, goBack }
-  }
-}
-</script>
-
-<style scoped>
-.mobile-dropdown-page {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  background-color: var(--background-color);
-}
-.mobile-dropdown-header {
-  display: flex;
-  align-items: center;
-  padding: 10px;
-  border-bottom: 1px solid var(--normal-border-color);
-}
-.back-icon {
-  font-size: 20px;
-  margin-right: 10px;
-}
-.search-container {
-  flex: 1;
-}
-.search-container input {
-  width: 100%;
-  padding: 6px 8px;
-  border-radius: 4px;
-  border: 1px solid var(--normal-border-color);
-  background-color: var(--menu-background-color);
-  color: var(--text-color);
-}
-.options {
-  flex: 1;
-  overflow-y: auto;
-}
-.option {
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--normal-border-color);
-}
-.option.selected {
-  background-color: var(--menu-selected-background-color);
-}
-.loading-container {
-  display: flex;
-  justify-content: center;
-  padding: 20px 0;
-}
-</style>