diff --git a/app/components/layout/Header.tsx b/app/components/layout/Header.tsx index b2501e3..b299756 100644 --- a/app/components/layout/Header.tsx +++ b/app/components/layout/Header.tsx @@ -44,6 +44,11 @@ export default function Header() { Short Links +
  • + + Create Short URL + +
    • )} diff --git a/app/components/layout/Navbar.tsx b/app/components/layout/Navbar.tsx deleted file mode 100644 index 807187b..0000000 --- a/app/components/layout/Navbar.tsx +++ /dev/null @@ -1,65 +0,0 @@ -'use client'; - -import Link from 'next/link'; - -export default function Navbar() { - return ( -
    -
    -
    - - - - - - ShortURL - - -
    -
    - - -
    -
    -
    - ); -} \ No newline at end of file diff --git a/app/create-shorturl/page.tsx b/app/create-shorturl/page.tsx new file mode 100644 index 0000000..415cf99 --- /dev/null +++ b/app/create-shorturl/page.tsx @@ -0,0 +1,327 @@ +'use client'; + +import { useState, useEffect } from 'react'; +import { useRouter } from 'next/navigation'; +import { useAuth } from '@/lib/auth'; +import { ProtectedRoute } from '@/lib/auth'; +import { limqRequest } from '@/lib/api'; + +interface ShortUrlData { + originalUrl: string; + customSlug?: string; + title: string; + description?: string; + tags?: string[]; +} + +export default function CreateShortUrlPage() { + return ( + + + + ); +} + +function CreateShortUrlForm() { + const router = useRouter(); + const { user } = useAuth(); + + const [formData, setFormData] = useState({ + originalUrl: '', + customSlug: '', + title: '', + description: '', + tags: [], + }); + + const [tagInput, setTagInput] = useState(''); + const [isSubmitting, setIsSubmitting] = useState(false); + const [error, setError] = useState(null); + const [success, setSuccess] = useState(false); + + // 使用 useEffect 在加载时添加用户信息到表单数据中 + useEffect(() => { + if (user) { + console.log('当前用户:', user.email); + // 可以在这里添加用户相关数据到表单中 + } + }, [user]); + + const handleChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData(prev => ({ + ...prev, + [name]: value + })); + }; + + const handleTagKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && tagInput.trim()) { + e.preventDefault(); + addTag(); + } + }; + + const addTag = () => { + if (tagInput.trim() && !formData.tags?.includes(tagInput.trim())) { + setFormData(prev => ({ + ...prev, + tags: [...(prev.tags || []), tagInput.trim()] + })); + setTagInput(''); + } + }; + + const removeTag = (tagToRemove: string) => { + setFormData(prev => ({ + ...prev, + tags: prev.tags?.filter(tag => tag !== tagToRemove) + })); + }; + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setIsSubmitting(true); + setError(null); + + try { + // 验证必填字段 + if (!formData.originalUrl) { + throw new Error('原始 URL 是必填项'); + } + + if (!formData.title) { + throw new Error('标题是必填项'); + } + + // 按照API要求构建请求数据 + const requestData = { + type: "shorturl", + attributes: { + // 可以添加任何额外属性，但attributes不能为空 + icon: "" + }, + shortUrl: { + url: formData.originalUrl, + slug: formData.customSlug || undefined, + title: formData.title, + name: formData.title, + description: formData.description || "" + }, + // 如果有team或project ID也可以添加 + // teamId: "your-team-id", + // projectId: "your-project-id", + tagIds: formData.tags && formData.tags.length > 0 ? formData.tags : undefined + }; + + // 调用 API 创建 shorturl 资源 + const response = await limqRequest('resource/shorturl', 'POST', requestData as unknown as Record); + + console.log('创建成功:', response); + setSuccess(true); + + // 2秒后跳转到链接列表页面 + setTimeout(() => { + router.push('/links'); + }, 2000); + + } catch (err) { + console.error('创建短链接失败:', err); + setError(err instanceof Error ? err.message : '创建短链接失败，请稍后重试'); + } finally { + setIsSubmitting(false); + } + }; + + return ( +
    +
    +
    +

    Create Short URL

    +

    + Create a new short URL resource for tracking and analytics +

    +
    + + {error && ( +
    +
    +
    + + + +
    +
    +

    {error}

    +
    +
    +
    + )} + + {success && ( +
    +
    +
    + + + +
    +
    +

    + 短链接创建成功！正在跳转... +

    +
    +
    +
    + )} + +
    + {/* 标题 */} +
    + + +
    + + {/* 原始 URL */} +
    + + +
    + + {/* 自定义短链接 */} +
    + +
    + + shorturl.com/ + + +
    +

    + 留空将生成随机短链接 +

    +
    + + {/* 描述 */} +
    + +