Merge PR #149: Fix/multi platform - 安全稳定性修复和前端架构优化

frontend/src/components/common/TextArea.vue

+<template>
+  <div class="w-full">
+    <label v-if="label" :for="id" class="input-label mb-1.5 block">
+      {{ label }}
+      <span v-if="required" class="text-red-500">*</span>
+    </label>
+    <div class="relative">
+      <textarea
+        :id="id"
+        ref="textAreaRef"
+        :value="modelValue"
+        :disabled="disabled"
+        :required="required"
+        :placeholder="placeholderText"
+        :readonly="readonly"
+        :rows="rows"
+        :class="[
+          'input w-full min-h-[80px] transition-all duration-200 resize-y',
+          error ? 'input-error ring-2 ring-red-500/20' : '',
+          disabled ? 'cursor-not-allowed bg-gray-100 opacity-60 dark:bg-dark-900' : ''
+        ]"
+        @input="onInput"
+        @change="$emit('change', ($event.target as HTMLTextAreaElement).value)"
+        @blur="$emit('blur', $event)"
+        @focus="$emit('focus', $event)"
+      ></textarea>
+    </div>
+    <!-- Hint / Error Text -->
+    <p v-if="error" class="input-error-text mt-1.5">
+      {{ error }}
+    </p>
+    <p v-else-if="hint" class="input-hint mt-1.5">
+      {{ hint }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+interface Props {
+  modelValue: string | null | undefined
+  label?: string
+  placeholder?: string
+  disabled?: boolean
+  required?: boolean
+  readonly?: boolean
+  error?: string
+  hint?: string
+  id?: string
+  rows?: number | string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  required: false,
+  readonly: false,
+  rows: 3
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'change', value: string): void
+  (e: 'blur', event: FocusEvent): void
+  (e: 'focus', event: FocusEvent): void
+}>()
+
+const textAreaRef = ref<HTMLTextAreaElement | null>(null)
+const placeholderText = computed(() => props.placeholder || '')
+
+const onInput = (event: Event) => {
+  const value = (event.target as HTMLTextAreaElement).value
+  emit('update:modelValue', value)
+}
+
+// Expose focus method
+defineExpose({
+  focus: () => textAreaRef.value?.focus(),
+  select: () => textAreaRef.value?.select()
+})
+</script>

frontend/src/components/user/UserAttributeForm.vue

@@ -52,18 +52,12 @@
       />
 
       <!-- Select -->
-      <select
+      <Select
         v-else-if="attr.type === 'select'"
         v-model="localValues[attr.id]"
-        :required="attr.required"
-        class="input"
+        :options="attr.options || []"
         @change="emitChange"
-      >
-        <option value="">{{ t('common.selectOption') }}</option>
-        <option v-for="opt in attr.options" :key="opt.value" :value="opt.value">
-          {{ opt.label }}
-        </option>
-      </select>
+      />
 
       <!-- Multi-Select (Checkboxes) -->
       <div v-else-if="attr.type === 'multi_select'" class="space-y-2">
@@ -99,11 +93,9 @@
 
 <script setup lang="ts">
 import { ref, watch, onMounted } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { adminAPI } from '@/api/admin'
 import type { UserAttributeDefinition, UserAttributeValuesMap } from '@/types'
-
-const { t } = useI18n()
+import Select from '@/components/common/Select.vue'
 
 interface Props {
   userId?: number

frontend/src/components/user/UserAttributesConfigModal.vue

@@ -142,11 +142,10 @@
       <!-- Type -->
       <div>
         <label class="input-label">{{ t('admin.users.attributes.type') }}</label>
-        <select v-model="form.type" class="input" required>
-          <option v-for="type in attributeTypes" :key="type" :value="type">
-            {{ t(`admin.users.attributes.types.${type}`) }}
-          </option>
-        </select>
+        <Select
+          v-model="form.type"
+          :options="attributeTypes.map(type => ({ value: type, label: t(`admin.users.attributes.types.${type}`) }))"
+        />
       </div>
 
       <!-- Options (for select/multi_select) -->
@@ -257,6 +256,7 @@ import { adminAPI } from '@/api/admin'
 import type { UserAttributeDefinition, UserAttributeType, UserAttributeOption } from '@/types'
 import BaseDialog from '@/components/common/BaseDialog.vue'
 import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
+import Select from '@/components/common/Select.vue'
 
 const { t } = useI18n()
 const appStore = useAppStore()

frontend/src/components/user/dashboard/UserDashboardQuickActions.vue

+<template>
+  <div class="card">
+    <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+      <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('dashboard.quickActions') }}</h2>
+    </div>
+    <div class="space-y-3 p-4">
+      <button @click="router.push('/keys')" class="group flex w-full items-center gap-4 rounded-xl bg-gray-50 p-4 text-left transition-all duration-200 hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800">
+        <div class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-primary-100 transition-transform group-hover:scale-105 dark:bg-primary-900/30">
+          <svg class="h-6 w-6 text-primary-600 dark:text-primary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" />
+          </svg>
+        </div>
+        <div class="min-w-0 flex-1">
+          <p class="text-sm font-medium text-gray-900 dark:text-white">{{ t('dashboard.createApiKey') }}</p>
+          <p class="text-xs text-gray-500 dark:text-dark-400">{{ t('dashboard.generateNewKey') }}</p>
+        </div>
+        <svg class="h-5 w-5 text-gray-400 transition-colors group-hover:text-primary-500 dark:text-dark-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+        </svg>
+      </button>
+
+      <button @click="router.push('/usage')" class="group flex w-full items-center gap-4 rounded-xl bg-gray-50 p-4 text-left transition-all duration-200 hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800">
+        <div class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-emerald-100 transition-transform group-hover:scale-105 dark:bg-emerald-900/30">
+          <svg class="h-6 w-6 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
+          </svg>
+        </div>
+        <div class="min-w-0 flex-1">
+          <p class="text-sm font-medium text-gray-900 dark:text-white">{{ t('dashboard.viewUsage') }}</p>
+          <p class="text-xs text-gray-500 dark:text-dark-400">{{ t('dashboard.checkDetailedLogs') }}</p>
+        </div>
+        <svg class="h-5 w-5 text-gray-400 transition-colors group-hover:text-emerald-500 dark:text-dark-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+        </svg>
+      </button>
+
+      <button @click="router.push('/redeem')" class="group flex w-full items-center gap-4 rounded-xl bg-gray-50 p-4 text-left transition-all duration-200 hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800">
+        <div class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-amber-100 transition-transform group-hover:scale-105 dark:bg-amber-900/30">
+          <svg class="h-6 w-6 text-amber-600 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
+          </svg>
+        </div>
+        <div class="min-w-0 flex-1">
+          <p class="text-sm font-medium text-gray-900 dark:text-white">{{ t('dashboard.redeemCode') }}</p>
+          <p class="text-xs text-gray-500 dark:text-dark-400">{{ t('dashboard.addBalance') }}</p>
+        </div>
+        <svg class="h-5 w-5 text-gray-400 transition-colors group-hover:text-amber-500 dark:text-dark-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+const router = useRouter()
+const { t } = useI18n()
+</script>
\ No newline at end of file

frontend/src/composables/useClipboard.ts

 import { ref } from 'vue'
 import { useAppStore } from '@/stores/app'
+import { i18n } from '@/i18n'
+
+const { t } = i18n.global
 
 /**
  * 检测是否支持 Clipboard API（需要安全上下文：HTTPS/localhost）
@@ -31,7 +34,7 @@ export function useClipboard() {
 
   const copyToClipboard = async (
     text: string,
-    successMessage = 'Copied to clipboard'
+    successMessage?: string
   ): Promise<boolean> => {
     if (!text) return false
 
@@ -50,12 +53,12 @@ export function useClipboard() {
 
     if (success) {
       copied.value = true
-      appStore.showSuccess(successMessage)
+      appStore.showSuccess(successMessage || t('common.copiedToClipboard'))
       setTimeout(() => {
         copied.value = false
       }, 2000)
     } else {
-      appStore.showError('Copy failed')
+      appStore.showError(t('common.copyFailed'))
     }
 
     return success