Add "Create Short URL" link to Header, remove Navbar component, and implement Create Short URL page with form handling and validation.

app/components/layout/Header.tsx

@@ -44,6 +44,11 @@ export default function Header() {
                     Short Links
                   </Link>
                 </li>
+                <li>
+                  <Link href="/create-shorturl" className="text-sm text-gray-700 hover:text-blue-500">
+                    Create Short URL
+                  </Link>
+                </li>
               </ul>
             </nav>
           )}

app/components/layout/Navbar.tsx

@@ -1,65 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-
-export default function Navbar() {
-  return (
-    <header className="w-full py-4 border-b border-card-border bg-background">
-      <div className="container flex items-center justify-between px-4 mx-auto">
-        <div className="flex items-center space-x-4">
-          <Link href="/" className="flex items-center space-x-2">
-            <svg
-              className="w-6 h-6 text-accent-blue"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
-              <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
-            </svg>
-            <span className="text-xl font-bold text-foreground">ShortURL</span>
-          </Link>
-          <nav className="hidden space-x-4 md:flex">
-            <Link
-              href="/links"
-              className="text-sm text-foreground hover:text-accent-blue transition-colors"
-            >
-              Links
-            </Link>
-            <Link
-              href="/analytics"
-              className="text-sm text-foreground hover:text-accent-blue transition-colors"
-            >
-              Analytics
-            </Link>
-          </nav>
-        </div>
-        <div className="flex items-center space-x-3">
-          <button className="p-2 text-sm text-foreground rounded-md gradient-border">
-            Upgrade
-          </button>
-          <button className="p-2 text-sm text-foreground hover:text-accent-blue">
-            <svg
-              className="w-5 h-5"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <circle cx="12" cy="12" r="10"></circle>
-              <circle cx="12" cy="10" r="3"></circle>
-              <path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"></path>
-            </svg>
-          </button>
-        </div>
-      </div>
-    </header>
-  );
-} 

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 (
+    <ProtectedRoute>
+      <CreateShortUrlForm />
+    </ProtectedRoute>
+  );
+}
+
+function CreateShortUrlForm() {
+  const router = useRouter();
+  const { user } = useAuth();
+  
+  const [formData, setFormData] = useState<ShortUrlData>({
+    originalUrl: '',
+    customSlug: '',
+    title: '',
+    description: '',
+    tags: [],
+  });
+  
+  const [tagInput, setTagInput] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+  
+  // 使用 useEffect 在加载时添加用户信息到表单数据中
+  useEffect(() => {
+    if (user) {
+      console.log('当前用户:', user.email);
+      // 可以在这里添加用户相关数据到表单中
+    }
+  }, [user]);
+  
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+  
+  const handleTagKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    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<string, unknown>);
+      
+      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 (
+    <div className="container mx-auto px-4 py-8 max-w-3xl">
+      <div className="bg-white rounded-lg shadow-md overflow-hidden">
+        <div className="border-b border-gray-200 bg-blue-50 px-6 py-4">
+          <h1 className="text-xl font-medium text-gray-900">Create Short URL</h1>
+          <p className="mt-1 text-sm text-gray-600">
+            Create a new short URL resource for tracking and analytics
+          </p>
+        </div>
+        
+        {error && (
+          <div className="bg-red-50 border-l-4 border-red-500 p-4 m-6">
+            <div className="flex">
+              <div className="flex-shrink-0">
+                <svg className="h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                </svg>
+              </div>
+              <div className="ml-3">
+                <p className="text-sm text-red-700">{error}</p>
+              </div>
+            </div>
+          </div>
+        )}
+        
+        {success && (
+          <div className="bg-green-50 border-l-4 border-green-500 p-4 m-6">
+            <div className="flex">
+              <div className="flex-shrink-0">
+                <svg className="h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                </svg>
+              </div>
+              <div className="ml-3">
+                <p className="text-sm text-green-700">
+                  短链接创建成功！正在跳转...
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+        
+        <form onSubmit={handleSubmit} className="p-6 space-y-6">
+          {/* 标题 */}
+          <div>
+            <label htmlFor="title" className="block text-sm font-medium text-gray-700">
+              标题 <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="text"
+              id="title"
+              name="title"
+              value={formData.title}
+              onChange={handleChange}
+              placeholder="例如：产品发布活动"
+              className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              required
+            />
+          </div>
+          
+          {/* 原始 URL */}
+          <div>
+            <label htmlFor="originalUrl" className="block text-sm font-medium text-gray-700">
+              原始 URL <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="url"
+              id="originalUrl"
+              name="originalUrl"
+              value={formData.originalUrl}
+              onChange={handleChange}
+              placeholder="https://example.com/your-long-url"
+              className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              required
+            />
+          </div>
+          
+          {/* 自定义短链接 */}
+          <div>
+            <label htmlFor="customSlug" className="block text-sm font-medium text-gray-700">
+              自定义短链接 <span className="text-gray-500">(可选)</span>
+            </label>
+            <div className="flex mt-1 rounded-md shadow-sm">
+              <span className="inline-flex items-center px-3 py-2 text-sm text-gray-500 border border-r-0 border-gray-300 rounded-l-md bg-gray-50">
+                shorturl.com/
+              </span>
+              <input
+                type="text"
+                id="customSlug"
+                name="customSlug"
+                value={formData.customSlug}
+                onChange={handleChange}
+                placeholder="custom-slug"
+                className="flex-1 block w-full min-w-0 px-3 py-2 border border-gray-300 rounded-none rounded-r-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              />
+            </div>
+            <p className="mt-1 text-xs text-gray-500">
+              留空将生成随机短链接
+            </p>
+          </div>
+          
+          {/* 描述 */}
+          <div>
+            <label htmlFor="description" className="block text-sm font-medium text-gray-700">
+              描述 <span className="text-gray-500">(可选)</span>
+            </label>
+            <textarea
+              id="description"
+              name="description"
+              value={formData.description}
+              onChange={handleChange}
+              rows={3}
+              placeholder="对此链接的简短描述"
+              className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+            />
+          </div>
+          
+          {/* 标签 */}
+          <div>
+            <label htmlFor="tagInput" className="block text-sm font-medium text-gray-700">
+              标签 <span className="text-gray-500">(可选)</span>
+            </label>
+            <div className="flex mt-1 rounded-md shadow-sm">
+              <input
+                type="text"
+                id="tagInput"
+                value={tagInput}
+                onChange={(e) => setTagInput(e.target.value)}
+                onKeyDown={handleTagKeyDown}
+                placeholder="添加标签并按 Enter"
+                className="flex-1 block w-full min-w-0 px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              />
+              <button
+                type="button"
+                onClick={addTag}
+                className="inline-flex items-center px-3 py-2 text-sm font-medium text-white border border-transparent rounded-r-md shadow-sm bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              >
+                添加
+              </button>
+            </div>
+            
+            {formData.tags && formData.tags.length > 0 && (
+              <div className="flex flex-wrap gap-2 mt-2">
+                {formData.tags.map(tag => (
+                  <span key={tag} className="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-blue-100 rounded-full text-blue-800">
+                    {tag}
+                    <button
+                      type="button"
+                      onClick={() => removeTag(tag)}
+                      className="flex-shrink-0 ml-1 text-blue-500 rounded-full hover:text-blue-700 focus:outline-none"
+                    >
+                      <span className="sr-only">删除标签 {tag}</span>
+                      <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                      </svg>
+                    </button>
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+          
+          {/* 提交按钮 */}
+          <div className="flex justify-end pt-4 border-t border-gray-200">
+            <button
+              type="button"
+              onClick={() => router.back()}
+              className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 mr-3"
+            >
+              取消
+            </button>
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              className="inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            >
+              {isSubmitting ? (
+                <>
+                  <svg className="w-5 h-5 mr-2 -ml-1 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                  处理中...
+                </>
+              ) : '创建短链接'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}