websopy-mp/src/developer/project/[id]/api-keys.tsx

import React, { useState, useEffect } from 'react'
import { View, Text, Input, Button, actionSheet } from '@tarojs/components'
import Taro, { useRouter } from '@tarojs/taro'
import { usePullDownRefresh } from '@tarojs/taro'
import { listApiKey, createApiKey, deleteApiKey } from '@/api/developer/developer'
import type { ApiKey, ApiKeyParam } from '@/types/developer'
import './api-keys.scss'

const ApiKeysPage: React.FC = () => {
  const router = useRouter()
  const projectId = Number(router.params.id)

  const [loading, setLoading] = useState(false)
  const [list, setList] = useState<ApiKey[]>([])
  const [showCreate, setShowCreate] = useState(false)
  const [createForm, setCreateForm] = useState({ name: '', remark: '' })
  const [creating, setCreating] = useState(false)

  const loadData = async () => {
    setLoading(true)
    try {
      const params: ApiKeyParam = { websiteId: projectId }
      const data = await listApiKey(params)
      setList(data || [])
    } catch (err) {
      console.error('加载失败', err)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => { loadData() }, [projectId])
  usePullDownRefresh(() => { loadData() })

  const handleCreate = async () => {
    if (!createForm.name.trim()) {
      Taro.showToast({ title: '请输入名称', icon: 'none' })
      return
    }
    setCreating(true)
    try {
      await createApiKey({ name: createForm.name, remark: createForm.remark, websiteId: projectId } as Partial<ApiKey>)
      Taro.showToast({ title: '创建成功', icon: 'success' })
      setShowCreate(false)
      setCreateForm({ name: '', remark: '' })
      loadData()
    } catch {
      Taro.showToast({ title: '创建失败', icon: 'none' })
    } finally {
      setCreating(false)
    }
  }

  const handleDelete = (item: ApiKey) => {
    actionSheet({
      alertText: `确定删除 "${item.name}" 吗？`,
      actions: [{ name: '删除', color: '#ff4d4f', type: 'warn' as const }],
      confirmText: '取消',
    }).then(res => {
      if (res.confirm) {
        deleteApiKey(item.id!).then(() => {
          Taro.showToast({ title: '已删除', icon: 'success' })
          loadData()
        })
      }
    }).catch(() => {})
  }

  const handleCopy = (text: string) => {
    Taro.setClipboardData({ data: text, success: () => Taro.showToast({ title: '已复制', icon: 'success' }) })
  }

  return (
    <View className="api-keys-page">
      <View className="api-keys-page__header">
        <Text className="api-keys-page__title">🔑 API Key 管理</Text>
        <Button className="api-keys-page__create-btn" size="mini" onClick={() => setShowCreate(true)}>+ 创建</Button>
      </View>

      <View className="api-keys-page__list">
        {list.length === 0 && !loading ? (
          <View className="api-keys-page__empty"><Text>暂无 API Key</Text></View>
        ) : (
          list.map((item) => (
            <View key={item.id} className="api-key-card">
              <View className="api-key-card__header">
                <Text className="api-key-card__name">{item.name}</Text>
                <Text className="api-key-card__status" style={{ color: item.status ? '#52c41a' : '#999' }}>
                  {item.status ? '正常' : '禁用'}
                </Text>
              </View>
              <View className="api-key-card__row">
                <Text className="api-key-card__label">AppId:</Text>
                <Text className="api-key-card__value api-key-card__value--monospace" onClick={() => handleCopy(item.appId || '')}>
                  {item.appId || '-'}
                </Text>
              </View>
              <View className="api-key-card__row">
                <Text className="api-key-card__label">AppSecret:</Text>
                <Text className="api-key-card__value api-key-card__value--monospace" onClick={() => handleCopy(item.appSecret || '')}>
                  ••••••••••••••••
                </Text>
              </View>
              <View className="api-key-card__actions">
                {item.appSecret && <Text className="api-key-card__action api-key-card__action--primary" onClick={() => handleCopy(item.appSecret || '')}>复制密钥</Text>}
                <Text className="api-key-card__action api-key-card__action--danger" onClick={() => handleDelete(item)}>删除</Text>
              </View>
            </View>
          ))
        )}
      </View>

      {showCreate && (
        <View className="api-keys-page__modal">
          <View className="api-keys-page__modal-mask" onClick={() => setShowCreate(false)} />
          <View className="api-keys-page__modal-content">
            <Text className="api-keys-page__modal-title">创建 API Key</Text>
            <View className="api-keys-page__form">
              <View className="api-keys-page__form-item">
                <Text className="api-keys-page__form-label">名称 *</Text>
                <Input className="api-keys-page__form-input" placeholder="请输入 Key 名称" value={createForm.name} onInput={(e) => setCreateForm(prev => ({ ...prev, name: e.detail.value }))} />
              </View>
              <View className="api-keys-page__form-item">
                <Text className="api-keys-page__form-label">备注</Text>
                <Input className="api-keys-page__form-input" placeholder="可选" value={createForm.remark} onInput={(e) => setCreateForm(prev => ({ ...prev, remark: e.detail.value }))} />
              </View>
            </View>
            <View className="api-keys-page__modal-actions">
              <Button className="api-keys-page__modal-btn api-keys-page__modal-btn--cancel" onClick={() => setShowCreate(false)}>取消</Button>
              <Button className="api-keys-page__modal-btn api-keys-page__modal-btn--confirm" loading={creating} onClick={handleCreate}>创建</Button>
            </View>
          </View>
        </View>
      )}
    </View>
  )
}

export default ApiKeysPage