Merge branch 'main' into feature/antigravity_auth

frontend/src/components/common/BaseDialog.vue

@@ -0,0 +1,118 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="show"
+      class="modal-overlay"
+      aria-labelledby="modal-title"
+      role="dialog"
+      aria-modal="true"
+      @click.self="handleClose"
+    >
+      <!-- Modal panel -->
+      <div :class="['modal-content', widthClasses]" @click.stop>
+        <!-- Header -->
+        <div class="modal-header">
+          <h3 id="modal-title" class="modal-title">
+            {{ title }}
+          </h3>
+          <button
+            @click="emit('close')"
+            class="-mr-2 rounded-xl p-2 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:text-dark-500 dark:hover:bg-dark-700 dark:hover:text-dark-300"
+            aria-label="Close modal"
+          >
+            <svg
+              class="h-5 w-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <!-- Body -->
+        <div class="modal-body">
+          <slot></slot>
+        </div>
+
+        <!-- Footer -->
+        <div v-if="$slots.footer" class="modal-footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, watch, onMounted, onUnmounted } from 'vue'
+
+type DialogWidth = 'narrow' | 'normal' | 'wide' | 'extra-wide' | 'full'
+
+interface Props {
+  show: boolean
+  title: string
+  width?: DialogWidth
+  closeOnEscape?: boolean
+  closeOnClickOutside?: boolean
+}
+
+interface Emits {
+  (e: 'close'): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  width: 'normal',
+  closeOnEscape: true,
+  closeOnClickOutside: false
+})
+
+const emit = defineEmits<Emits>()
+
+const widthClasses = computed(() => {
+  const widths: Record<DialogWidth, string> = {
+    narrow: 'max-w-md',
+    normal: 'max-w-lg',
+    wide: 'max-w-4xl',
+    'extra-wide': 'max-w-6xl',
+    full: 'max-w-7xl'
+  }
+  return widths[props.width]
+})
+
+const handleClose = () => {
+  if (props.closeOnClickOutside) {
+    emit('close')
+  }
+}
+
+const handleEscape = (event: KeyboardEvent) => {
+  if (props.show && props.closeOnEscape && event.key === 'Escape') {
+    emit('close')
+  }
+}
+
+// Prevent body scroll when modal is open
+watch(
+  () => props.show,
+  (isOpen) => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  document.addEventListener('keydown', handleEscape)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleEscape)
+  document.body.style.overflow = ''
+})
+</script>

frontend/src/components/common/ConfirmDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal :show="show" :title="title" size="sm" @close="handleCancel">
+  <BaseDialog :show="show" :title="title" width="narrow" @close="handleCancel">
     <div class="space-y-4">
       <p class="text-sm text-gray-600 dark:text-gray-400">{{ message }}</p>
     </div>
@@ -27,13 +27,13 @@
         </button>
       </div>
     </template>
-  </Modal>
+  </BaseDialog>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import Modal from './Modal.vue'
+import BaseDialog from './BaseDialog.vue'
 
 const { t } = useI18n()
 

frontend/src/components/common/DataTable.vue

@@ -24,37 +24,6 @@
           >
             <div class="flex items-center space-x-1">
               <span>{{ column.label }}</span>
-              <!-- 操作列展开/折叠按钮 -->
-              <button
-                v-if="column.key === 'actions' && hasExpandableActions"
-                type="button"
-                @click.stop="toggleActionsExpanded"
-                class="ml-2 flex items-center justify-center rounded p-1 text-gray-500 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-dark-600 dark:hover:text-gray-300"
-                :title="actionsExpanded ? t('table.collapseActions') : t('table.expandActions')"
-              >
-                <!-- 展开状态：收起图标 -->
-                <svg
-                  v-if="actionsExpanded"
-                  class="h-4 w-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="2"
-                >
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" />
-                </svg>
-                <!-- 折叠状态：展开图标 -->
-                <svg
-                  v-else
-                  class="h-4 w-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="2"
-                >
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" />
-                </svg>
-              </button>
               <span v-if="column.sortable" class="text-gray-400 dark:text-dark-500">
                 <svg
                   v-if="sortKey === column.key"
@@ -182,8 +151,8 @@ const checkActionsColumnWidth = () => {
   // 等待DOM更新
   nextTick(() => {
     // 测量所有按钮的总宽度
-    const buttons = actionsContainer.querySelectorAll('button')
-    if (buttons.length <= 2) {
+    const actionItems = actionsContainer.querySelectorAll('button, a, [role="button"]')
+    if (actionItems.length <= 2) {
       actionsColumnNeedsExpanding.value = false
       actionsExpanded.value = wasExpanded
       return
@@ -191,9 +160,9 @@ const checkActionsColumnWidth = () => {
 
     // 计算所有按钮的总宽度（包括gap）
     let totalWidth = 0
-    buttons.forEach((btn, index) => {
-      totalWidth += (btn as HTMLElement).offsetWidth
-      if (index < buttons.length - 1) {
+    actionItems.forEach((item, index) => {
+      totalWidth += (item as HTMLElement).offsetWidth
+      if (index < actionItems.length - 1) {
         totalWidth += 4 // gap-1 = 4px
       }
     })
@@ -211,6 +180,7 @@ const checkActionsColumnWidth = () => {
 
 // 监听尺寸变化
 let resizeObserver: ResizeObserver | null = null
+let resizeHandler: (() => void) | null = null
 
 onMounted(() => {
   checkScrollable()
@@ -223,17 +193,20 @@ onMounted(() => {
     resizeObserver.observe(tableWrapperRef.value)
   } else {
     // 降级方案：不支持 ResizeObserver 时使用 window resize
-    const handleResize = () => {
+    resizeHandler = () => {
       checkScrollable()
       checkActionsColumnWidth()
     }
-    window.addEventListener('resize', handleResize)
+    window.addEventListener('resize', resizeHandler)
   }
 })
 
 onUnmounted(() => {
   resizeObserver?.disconnect()
-  window.removeEventListener('resize', checkScrollable)
+  if (resizeHandler) {
+    window.removeEventListener('resize', resizeHandler)
+    resizeHandler = null
+  }
 })
 
 interface Props {
@@ -298,26 +271,6 @@ const sortedData = computed(() => {
   })
 })
 
-// 检查是否有可展开的操作列
-const hasExpandableActions = computed(() => {
-  // 如果明确指定了actionsCount，使用它来判断
-  if (props.actionsCount !== undefined) {
-    return props.expandableActions && props.columns.some((col) => col.key === 'actions') && props.actionsCount > 2
-  }
-
-  // 否则使用原来的检测逻辑
-  return (
-    props.expandableActions &&
-    props.columns.some((col) => col.key === 'actions') &&
-    actionsColumnNeedsExpanding.value
-  )
-})
-
-// 切换操作列展开/折叠状态
-const toggleActionsExpanded = () => {
-  actionsExpanded.value = !actionsExpanded.value
-}
-
 // 检查第一列是否为勾选列
 const hasSelectColumn = computed(() => {
   return props.columns.length > 0 && props.columns[0].key === 'select'

frontend/src/components/common/Pagination.vue

@@ -206,10 +206,6 @@ const handlePageSizeChange = (value: string | number | boolean | null) => {
   if (value === null || typeof value === 'boolean') return
   const newPageSize = typeof value === 'string' ? parseInt(value) : value
   emit('update:pageSize', newPageSize)
-  // Reset to first page when page size changes
-  if (props.page !== 1) {
-    emit('update:page', 1)
-  }
 }
 </script>
 

frontend/src/components/common/Select.vue

@@ -30,7 +30,11 @@
     </button>
 
     <Transition name="select-dropdown">
-      <div v-if="isOpen" class="select-dropdown">
+      <div
+        v-if="isOpen"
+        ref="dropdownRef"
+        :class="['select-dropdown', dropdownPosition === 'top' && 'select-dropdown-top']"
+      >
         <!-- Search input -->
         <div v-if="searchable" class="select-search">
           <svg
@@ -141,6 +145,8 @@ const isOpen = ref(false)
 const searchQuery = ref('')
 const containerRef = ref<HTMLElement | null>(null)
 const searchInputRef = ref<HTMLInputElement | null>(null)
+const dropdownRef = ref<HTMLElement | null>(null)
+const dropdownPosition = ref<'bottom' | 'top'>('bottom')
 
 const getOptionValue = (
   option: SelectOption | Record<string, unknown>
@@ -184,13 +190,37 @@ const isSelected = (option: SelectOption | Record<string, unknown>): boolean =>
   return getOptionValue(option) === props.modelValue
 }
 
+const calculateDropdownPosition = () => {
+  if (!containerRef.value) return
+
+  nextTick(() => {
+    if (!containerRef.value || !dropdownRef.value) return
+
+    const triggerRect = containerRef.value.getBoundingClientRect()
+    const dropdownHeight = dropdownRef.value.offsetHeight || 240 // Max height fallback
+    const viewportHeight = window.innerHeight
+    const spaceBelow = viewportHeight - triggerRect.bottom
+    const spaceAbove = triggerRect.top
+
+    // If not enough space below but enough space above, show dropdown on top
+    if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
+      dropdownPosition.value = 'top'
+    } else {
+      dropdownPosition.value = 'bottom'
+    }
+  })
+}
+
 const toggle = () => {
   if (props.disabled) return
   isOpen.value = !isOpen.value
-  if (isOpen.value && props.searchable) {
-    nextTick(() => {
-      searchInputRef.value?.focus()
-    })
+  if (isOpen.value) {
+    calculateDropdownPosition()
+    if (props.searchable) {
+      nextTick(() => {
+        searchInputRef.value?.focus()
+      })
+    }
   }
 }
 
@@ -275,6 +305,10 @@ onUnmounted(() => {
   @apply overflow-hidden;
 }
 
+.select-dropdown-top {
+  @apply bottom-full mb-2 mt-0;
+}
+
 .select-search {
   @apply flex items-center gap-2 px-3 py-2;
   @apply border-b border-gray-100 dark:border-dark-700;
@@ -322,6 +356,17 @@ onUnmounted(() => {
 .select-dropdown-enter-from,
 .select-dropdown-leave-to {
   opacity: 0;
+}
+
+/* Animation for dropdown opening downward (default) */
+.select-dropdown:not(.select-dropdown-top).select-dropdown-enter-from,
+.select-dropdown:not(.select-dropdown-top).select-dropdown-leave-to {
   transform: translateY(-8px);
 }
+
+/* Animation for dropdown opening upward */
+.select-dropdown-top.select-dropdown-enter-from,
+.select-dropdown-top.select-dropdown-leave-to {
+  transform: translateY(8px);
+}
 </style>

frontend/src/components/common/SubscriptionProgressMini.vue

@@ -178,17 +178,19 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useI18n } from 'vue-i18n'
-import subscriptionsAPI from '@/api/subscriptions'
+import { useSubscriptionStore } from '@/stores'
 import type { UserSubscription } from '@/types'
 
 const { t } = useI18n()
 
+const subscriptionStore = useSubscriptionStore()
+
 const containerRef = ref<HTMLElement | null>(null)
 const tooltipOpen = ref(false)
-const activeSubscriptions = ref<UserSubscription[]>([])
-const loading = ref(false)
 
-const hasActiveSubscriptions = computed(() => activeSubscriptions.value.length > 0)
+// Use store data instead of local state
+const activeSubscriptions = computed(() => subscriptionStore.activeSubscriptions)
+const hasActiveSubscriptions = computed(() => subscriptionStore.hasActiveSubscriptions)
 
 const displaySubscriptions = computed(() => {
   // Sort by most usage (highest percentage first)
@@ -275,37 +277,18 @@ function handleClickOutside(event: MouseEvent) {
   }
 }
 
-async function loadSubscriptions() {
-  try {
-    loading.value = true
-    activeSubscriptions.value = await subscriptionsAPI.getActiveSubscriptions()
-  } catch (error) {
-    console.error('Failed to load subscriptions:', error)
-    activeSubscriptions.value = []
-  } finally {
-    loading.value = false
-  }
-}
-
 onMounted(() => {
   document.addEventListener('click', handleClickOutside)
-  loadSubscriptions()
+  // Trigger initial fetch if not already loaded
+  // The actual data loading is handled by App.vue globally
+  subscriptionStore.fetchActiveSubscriptions().catch((error) => {
+    console.error('Failed to load subscriptions in SubscriptionProgressMini:', error)
+  })
 })
 
 onBeforeUnmount(() => {
   document.removeEventListener('click', handleClickOutside)
 })
-
-// Refresh subscriptions periodically (every 5 minutes)
-let refreshInterval: ReturnType<typeof setInterval> | null = null
-onMounted(() => {
-  refreshInterval = setInterval(loadSubscriptions, 5 * 60 * 1000)
-})
-onBeforeUnmount(() => {
-  if (refreshInterval) {
-    clearInterval(refreshInterval)
-  }
-})
 </script>
 
 <style scoped>

frontend/src/components/common/index.ts

@@ -2,6 +2,7 @@
 export { default as DataTable } from './DataTable.vue'
 export { default as Pagination } from './Pagination.vue'
 export { default as Modal } from './Modal.vue'
+export { default as BaseDialog } from './BaseDialog.vue'
 export { default as ConfirmDialog } from './ConfirmDialog.vue'
 export { default as StatCard } from './StatCard.vue'
 export { default as Toast } from './Toast.vue'