Merge pull request #13 from iflytek/fix/allow-anonymous-skill-detail-view

fix(web): improve anonymous user experience on skill detail page

web/src/i18n/locales/en.json

@@ -323,6 +323,10 @@
   "skillDetail": {
     "notFound": "Skill not found",
     "notFoundDesc": "This skill may have been deleted or never existed",
+    "loginRequired": "Login Required",
+    "loginRequiredDesc": "This skill is private. Please login to view details.",
+    "accessDenied": "Access Denied",
+    "accessDeniedDesc": "You don't have permission to view this skill",
     "tabReadme": "README",
     "tabFiles": "Files",
     "tabVersions": "Versions",

web/src/i18n/locales/zh.json

@@ -323,6 +323,10 @@
   "skillDetail": {
     "notFound": "技能不存在",
     "notFoundDesc": "该技能可能已被删除或从未存在",
+    "loginRequired": "需要登录",
+    "loginRequiredDesc": "该技能为私有技能，请登录后查看详情",
+    "accessDenied": "访问被拒绝",
+    "accessDeniedDesc": "您没有权限查看该技能",
     "tabReadme": "README",
     "tabFiles": "文件",
     "tabVersions": "版本",

web/src/pages/skill-detail.tsx

@@ -27,7 +27,7 @@ export function SkillDetailPage() {
   const { namespace, slug } = useParams({ from: '/space/$namespace/$slug' })
   const { user, hasRole } = useAuth()
 
-  const { data: skill, isLoading: isLoadingSkill } = useSkillDetail(namespace, slug)
+  const { data: skill, isLoading: isLoadingSkill, error: skillError } = useSkillDetail(namespace, slug)
   const { data: versions } = useSkillVersions(namespace, slug)
   const latestVersion = versions?.[0]
   const { data: files } = useSkillFiles(namespace, slug, latestVersion?.version)
@@ -83,6 +83,27 @@ export function SkillDetailPage() {
     )
   }
 
+  if (skillError) {
+    const isForbidden = skillError instanceof Error && skillError.message.includes('403')
+
+    if (isForbidden && !user) {
+      return (
+        <div className="text-center py-20 animate-fade-up">
+          <h2 className="text-2xl font-bold font-heading mb-2">{t('skillDetail.loginRequired')}</h2>
+          <p className="text-muted-foreground mb-6">{t('skillDetail.loginRequiredDesc')}</p>
+          <Button onClick={requireLogin}>{t('common.login')}</Button>
+        </div>
+      )
+    }
+
+    return (
+      <div className="text-center py-20 animate-fade-up">
+        <h2 className="text-2xl font-bold font-heading mb-2">{t('skillDetail.accessDenied')}</h2>
+        <p className="text-muted-foreground">{t('skillDetail.accessDeniedDesc')}</p>
+      </div>
+    )
+  }
+
   if (!skill) {
     return (
       <div className="text-center py-20 animate-fade-up">