fix: 修复ci缓存导致的错误

Add Docker configuration with standalone output mode for containerized
deployment. Implement texture deletion API with proper error handling
and user feedback. Fix skin viewer sizing issues by using explicit
dimensions and removing conflicting layout properties. Add captcha
ID parameter to registration flow. Improve profile page UX including
Yggdrasil password reset display and character card editing controls.

.dockerignore

@@ -0,0 +1,41 @@
+# 依赖
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Next.js 构建产物
+.next
+out
+
+# 测试
+coverage
+.nyc_output
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+*~
+
+# 操作系统
+.DS_Store
+Thumbs.db
+
+# Git
+.git
+.gitignore
+
+# Docker
+Dockerfile
+.dockerignore
+
+# 文档
+docs
+*.md
+
+# 其他
+.env
+.env.local
+.env.*.local

.gitea/workflows/docker-build.yml

@@ -0,0 +1,85 @@
+name: Build and Push Docker Image
+
+on:
+  push:
+    branches:
+      - main
+      - master
+      - develop
+  pull_request:
+    branches:
+      - main
+      - master
+  workflow_dispatch:
+
+env:
+  REGISTRY: code.littlelan.cn
+  IMAGE_NAME: carrotskin/carrotskin
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Log in to Gitea Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ secrets.REGISTRY_USERNAME }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+
+      - name: Extract metadata for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            # main/master 分支标记为 latest
+            type=raw,value=latest,enable={{is_default_branch}}
+            # 所有分支的标签
+            type=ref,event=branch
+            # Git tag 时创建版本标签（如 1.0.0, 1.0）
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            # 每次构建的 SHA 标签
+            type=sha
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          platforms: linux/amd64
+          provenance: false
+          # 禁用 buildcache 以避免 413 错误
+          # cache-from: type=registry,ref=${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:buildcache
+          # cache-to: type=registry,ref=${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:buildcache,mode=max
+
+      - name: Show image tags
+        run: |
+          echo "Built and pushed image with tags:"
+          echo "${{ steps.meta.outputs.tags }}"
+          echo ""
+          echo "Image digest: ${{ steps.meta.outputs.digest }}"
+
+      - name: Summary
+        if: always()
+        run: |
+          echo "## Docker Image Build Summary" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "**Image:** ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}" >> $GITHUB_STEP_SUMMARY
+          echo "**Tags:**" >> $GITHUB_STEP_SUMMARY
+          echo "${{ steps.meta.outputs.tags }}" >> $GITHUB_STEP_SUMMARY
+          echo "**Digest:** ${{ steps.meta.outputs.digest }}" >> $GITHUB_STEP_SUMMARY

Dockerfile

@@ -0,0 +1,49 @@
+# 构建阶段
+FROM node:alpine AS builder
+
+# 设置工作目录
+WORKDIR /app
+
+# 复制 package 文件
+COPY package*.json ./
+
+# 安装所有依赖（包括 devDependencies）
+RUN npm ci
+
+# 复制源代码
+COPY . .
+
+# 构建应用
+RUN npm run build
+
+# 生产阶段
+FROM node:alpine AS runner
+
+# 设置工作目录
+WORKDIR /app
+
+# 创建非 root 用户
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# 复制构建产物（standalone 模式）
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+
+# 设置正确的权限
+RUN chown -R nextjs:nodejs /app
+
+# 切换到非 root 用户
+USER nextjs
+
+# 暴露端口
+EXPOSE 3000
+
+# 设置环境变量
+ENV NODE_ENV=production
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+# 启动应用
+CMD ["node", "server.js"]

next.config.ts

@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  output: 'standalone',
   rewrites: async () => {
     return [
       {

src/app/auth/page.tsx

@@ -662,8 +662,6 @@ export default function AuthPage() {
               )}
             </AnimatePresence>
 
-
-
             {/* Submit Button */}
             <motion.div
               initial={{ opacity: 0, y: 20 }}
@@ -770,4 +768,4 @@ export default function AuthPage() {
 
     </div>
   );
-}
+}

src/app/profile/page.tsx

@@ -38,6 +38,7 @@ import {
   generateAvatarUploadUrl,
   updateAvatarUrl,
   resetYggdrasilPassword,
+  deleteTexture,
   type Texture,
   type Profile
 } from '@/lib/api';
@@ -194,7 +195,18 @@ export default function ProfilePage() {
   const handleDeleteSkin = async (skinId: number) => {
     if (!confirm('确定要删除这个皮肤吗？')) return;
     
-    setMySkins(prev => prev.filter(skin => skin.id !== skinId));
+    try {
+      const response = await deleteTexture(skinId);
+      if (response.code === 200) {
+        setMySkins(prev => prev.filter(skin => skin.id !== skinId));
+        messageManager.success('皮肤删除成功', { duration: 3000 });
+      } else {
+        messageManager.error(response.message || '删除皮肤失败', { duration: 3000 });
+      }
+    } catch (error) {
+      console.error('删除皮肤失败:', error);
+      messageManager.error('删除皮肤失败', { duration: 3000 });
+    }
   };
 
   const handleToggleFavorite = async (skinId: number) => {
@@ -373,12 +385,14 @@ export default function ProfilePage() {
 
   const handleResetYggdrasilPassword = async () => {
     if (!confirm('确定要重置Yggdrasil密码吗？这将生成一个新的密码。')) return;
-    
+
     setIsResettingYggdrasilPassword(true);
-    
+
     try {
       const response = await resetYggdrasilPassword();
       if (response.code === 200) {
+        setYggdrasilPassword(response.data.password);
+        setShowYggdrasilPassword(true);
         messageManager.success('Yggdrasil密码重置成功！请妥善保管新密码。', { duration: 5000 });
       } else {
         throw new Error(response.message || '重置Yggdrasil密码失败');
@@ -955,14 +969,15 @@ export default function ProfilePage() {
                     }
                   }}
                 >
-                  <SkinViewer
+                  <div className="w-full h-full flex items-center justify-center">
-                    skinUrl={skin.url}
+                    <SkinViewer
-                    isSlim={skin.is_slim}
+                      skinUrl={skin.url}
-                    width={200}
+                      isSlim={skin.is_slim}
-                    height={200}
+                      width={180}
-                    className="w-full h-full"
+                      height={180}
-                    autoRotate={false}
+                      autoRotate={false}
-                  />
+                    />
+                  </div>
                   <div className="absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-2 text-center">
                     {skin.name}
                   </div>

src/components/PageTransition.tsx

@@ -2,14 +2,15 @@
 
 import { motion, AnimatePresence } from 'framer-motion';
 import { usePathname, useSearchParams } from 'next/navigation';
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, Suspense } from 'react';
 import { useRouter } from 'next/navigation';
 
 interface PageTransitionProps {
   children: React.ReactNode;
 }
 
-export default function PageTransition({ children }: PageTransitionProps) {
+// 内部组件：使用 useSearchParams 的部分
+function PageTransitionContent({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const router = useRouter();
@@ -96,13 +97,13 @@ export default function PageTransition({ children }: PageTransitionProps) {
   };
 
   const getLoadingVariants = () => ({
-    initial: { 
+    initial: {
       opacity: 0,
       scale: 0.8,
       y: 20
     },
-    animate: { 
+    animate: {
-      opacity: 1, 
+      opacity: 1,
       scale: 1,
       y: 0,
       transition: {
@@ -133,17 +134,17 @@ export default function PageTransition({ children }: PageTransitionProps) {
           >
             <div className="text-center">
               <motion.div
-                animate={{ 
+                animate={{
                   rotate: 360,
                   scale: [1, 1.1, 1]
                 }}
-                transition={{ 
+                transition={{
                   rotate: { duration: 1, repeat: Infinity },
                   scale: { duration: 1.5, repeat: Infinity }
                 }}
                 className="w-12 h-12 border-4 border-orange-500 border-t-transparent rounded-full mx-auto mb-4"
               />
-              <motion.p 
+              <motion.p
                 className="text-lg font-medium text-gray-700 dark:text-gray-300"
                 initial={{ opacity: 0, y: 10 }}
                 animate={{ opacity: 1, y: 0 }}
@@ -171,3 +172,20 @@ export default function PageTransition({ children }: PageTransitionProps) {
     </>
   );
 }
+
+// 加载状态组件
+function PageTransitionFallback() {
+  return (
+    <div className="min-h-screen">
+      {null}
+    </div>
+  );
+}
+
+export default function PageTransition({ children }: PageTransitionProps) {
+  return (
+    <Suspense fallback={<PageTransitionFallback />}>
+      <PageTransitionContent>{children}</PageTransitionContent>
+    </Suspense>
+  );
+}

src/components/SkinCard.tsx

@@ -171,15 +171,15 @@ export default function SkinCard({
         </AnimatePresence>
 
         {texture.type === 'SKIN' ? (
-          <div className="relative w-full h-full bg-white dark:bg-gray-800">
+          <div className="relative w-full h-full flex items-center justify-center bg-white dark:bg-gray-800">
             <SkinViewer
               skinUrl={texture.url}
               isSlim={texture.is_slim}
-              width={300}
+              width={280}
-              height={300}
+              height={280}
-              className={`w-full h-full transition-all duration-500 ${
+              className={`transition-opacity duration-500 ${
-                imageLoaded ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
+                imageLoaded ? 'opacity-100' : 'opacity-0'
-              } ${isHovered ? 'scale-110' : ''}`}
+              }`}
               autoRotate={isHovered}
               walking={false}
               onImageLoaded={() => setImageLoaded(true)}

src/components/SkinDetailModal.tsx

@@ -296,7 +296,7 @@ export default function SkinDetailModal({ isOpen, onClose, texture, isExternalPr
                         isSlim={texture.is_slim}
                         width={600}
                         height={600}
-                        className="w-full h-full rounded-2xl shadow-2xl border-2 border-white/60 dark:border-gray-600/60 relative z-10"
+                        className="rounded-2xl shadow-2xl border-2 border-white/60 dark:border-gray-600/60 relative z-10"
                         autoRotate={autoRotate}
                         walking={currentAnimation === 'walking'}
                         running={currentAnimation === 'running'}

src/components/SkinViewer.tsx

@@ -83,28 +83,24 @@ export default function SkinViewer({
     try {
       console.log('初始化3D皮肤查看器:', { skinUrl, isSlim, width, height });
       
-      // 使用canvas的实际尺寸，参考blessingskin
+      // 使用传入的宽高参数初始化
       const canvas = canvasRef.current;
       const viewer = new SkinViewer3D({
         canvas: canvas,
-        width: canvas.clientWidth || width,
+        width: width,
-        height: canvas.clientHeight || height,
+        height: height,
         skin: skinUrl,
         cape: capeUrl,
         model: isSlim ? 'slim' : 'default',
-        zoom: 1.0, // 使用blessingskin的zoom方式
+        zoom: 1.0,
       });
 
       viewerRef.current = viewer;
 
-      // 设置背景和控制选项 - 参考blessingskin
+      // 设置背景和控制选项
       viewer.background = null; // 透明背景
       viewer.autoRotate = false; // 完全禁用自动旋转
       
-      // 调整光照设置，避免皮肤发黑
-      viewer.globalLight.intensity = 0.8; // 增加环境光强度
-      viewer.cameraLight.intensity = 0.4; // 降低相机光源强度，避免过强的阴影
-      
       // 外部预览时禁用所有动画和旋转
       if (isExternalPreview) {
         viewer.autoRotate = false;
@@ -268,11 +264,8 @@ export default function SkinViewer({
       ref={canvasRef}
       className={className}
       style={{ 
-        display: 'flex', 
+        width: width, 
-        justifyContent: 'center', 
+        height: height 
-        alignItems: 'center',
-        width: '100%', 
-        height: '100%' 
       }}
     />
   );

src/components/SliderCaptcha.tsx

@@ -409,7 +409,7 @@ export const SliderCaptcha: React.FC<SliderCaptchaProps> = ({ onVerify, onClose
                             {/* 可移动拼图块 */}
                             {puzzleImage && (
                                 <div
-                                    className="absolute transition-all duration-300"
+                                    className={`absolute ${isDragging ? '' : 'transition-all duration-300'}`}
                                     style={{
                                         left: `${sliderPosition}px`, // 滑块x位置（拼图左上角x坐标）
                                         top: `${puzzleY}px`, // 拼图y位置（从后端获取，拼图左上角y坐标）
@@ -435,7 +435,7 @@ export const SliderCaptcha: React.FC<SliderCaptchaProps> = ({ onVerify, onClose
                     <div className="relative bg-gray-100 rounded-full h-12 overflow-hidden select-none" ref={trackRef} style={{ width: `${TRACK_WIDTH}px`, margin: '0 auto' }}>
                         {/* 进度条 */}
                         <div
-                            className={`absolute left-0 top-0 h-full transition-all duration-200 ease-out ${getProgressColor()}`}
+                            className={`absolute left-0 top-0 h-full ${isDragging ? '' : 'transition-all duration-200 ease-out'} ${getProgressColor()}`}
                             style={{
                                 width: `${sliderPosition + SLIDER_WIDTH}px`,
                                 transform: isDragging ? 'scaleY(1.05)' : 'scaleY(1)',
@@ -444,14 +444,13 @@ export const SliderCaptcha: React.FC<SliderCaptchaProps> = ({ onVerify, onClose
                         />
                         {/* 滑块按钮 */}
                         <div
-                            className={`absolute top-1 w-10 h-10 bg-white rounded-full shadow-lg cursor-pointer flex items-center justify-center transition-all duration-200 ease-out select-none ${
+                            className={`absolute top-1 w-10 h-10 bg-white rounded-full shadow-lg cursor-pointer flex items-center justify-center ${isDragging ? '' : 'transition-all duration-200 ease-out'} select-none ${
                                 isDragging ? 'scale-110 shadow-xl' : 'scale-100'
                             } ${isVerified || verifyResult === 'error' ? 'cursor-default' : 'cursor-grab active:cursor-grabbing'}`}
                             style={{ left: `${sliderPosition + 2}px`, zIndex: 10 }}
-                            onMouseDown={handleMouseDown}
+                            onMouseDown={verifyResult === 'error' ? undefined : handleMouseDown}
-                            onTouchStart={handleTouchStart}
+                            onTouchStart={verifyResult === 'error' ? undefined : handleTouchStart}
                             ref={sliderRef}
-                            disabled={verifyResult === 'error'}
                         >
                             {getSliderIcon()}
                         </div>

src/components/profile/CharacterCard.tsx

@@ -42,19 +42,32 @@ export default function CharacterCard({
       transition={{ duration: 0.2 }}
     >
       <div className="flex items-center justify-between mb-4">
-        {isEditing ? (
+        <div className="flex items-center gap-2 flex-1">
-          <input
+          {isEditing ? (
-            type="text"
+            <input
-            value={editName}
+              type="text"
-            onChange={(e) => onEditNameChange(e.target.value)}
+              value={editName}
-            className="text-lg font-semibold bg-transparent border-b border-orange-500 focus:outline-none text-gray-900 dark:text-white flex-1 mr-2"
+              onChange={(e) => onEditNameChange(e.target.value)}
-            onBlur={() => onSave(profile.uuid)}
+              className="text-lg font-semibold bg-transparent border-b border-orange-500 focus:outline-none text-gray-900 dark:text-white flex-1"
-            onKeyPress={(e) => e.key === 'Enter' && onSave(profile.uuid)}
+              onBlur={() => onSave(profile.uuid)}
-            autoFocus
+              onKeyPress={(e) => e.key === 'Enter' && onSave(profile.uuid)}
-          />
+              autoFocus
-        ) : (
+            />
-          <h3 className="text-lg font-semibold text-gray-900 dark:text-white truncate flex-1">{profile.name}</h3>
+          ) : (
-        )}
+            <>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white truncate">{profile.name}</h3>
+              <motion.button
+                onClick={() => onEdit(profile.uuid, profile.name)}
+                className="text-gray-500 hover:text-orange-500 transition-colors"
+                whileHover={{ scale: 1.1 }}
+                whileTap={{ scale: 0.9 }}
+                title="改名"
+              >
+                <PencilIcon className="w-4 h-4" />
+              </motion.button>
+            </>
+          )}
+        </div>
         {profile.is_active && (
           <span className="px-2 py-1 bg-gradient-to-r from-green-500 to-emerald-500 text-white text-xs rounded-full flex items-center space-x-1">
             <CheckIcon className="w-3 h-3" />
@@ -68,9 +81,8 @@ export default function CharacterCard({
           <SkinViewer
             skinUrl={skinUrl}
             isSlim={isSlim}
-            width={200}
+            width={180}
-            height={200}
+            height={180}
-            className="w-full h-full"
             autoRotate={false}
           />
         ) : (
@@ -82,32 +94,10 @@ export default function CharacterCard({
             <UserIcon className="w-10 h-10 text-white" />
           </motion.div>
         )}
-        
-        {/* 皮肤选择按钮 */}
-        <motion.button
-          onClick={() => onSelectSkin(profile.uuid)}
-          className="absolute bottom-2 right-2 bg-gradient-to-r from-orange-500 to-amber-500 text-white p-2 rounded-full shadow-lg"
-          whileHover={{ scale: 1.1 }}
-          whileTap={{ scale: 0.9 }}
-          title="选择皮肤"
-        >
-          <PencilIcon className="w-4 h-4" />
-        </motion.button>
       </div>
 
       {/* 操作按钮 */}
       <div className="flex gap-2">
-        {!profile.is_active && (
-          <motion.button
-            onClick={() => onSetActive(profile.uuid)}
-            className="flex-1 bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white text-sm py-2 px-3 rounded-lg transition-all duration-200"
-            whileHover={{ scale: 1.02 }}
-            whileTap={{ scale: 0.98 }}
-          >
-            使用
-          </motion.button>
-        )}
-        
         {isEditing ? (
           <>
             <motion.button
@@ -130,13 +120,12 @@ export default function CharacterCard({
         ) : (
           <>
             <motion.button
-              onClick={() => onEdit(profile.uuid, profile.name)}
+              onClick={() => onSelectSkin(profile.uuid)}
-              className="flex-1 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 text-sm py-2 px-3 rounded-lg transition-all duration-200"
+              className="flex-1 bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 text-white text-sm py-2 px-3 rounded-lg transition-all duration-200"
               whileHover={{ scale: 1.02 }}
               whileTap={{ scale: 0.98 }}
             >
-              <PencilIcon className="w-4 h-4 inline mr-1" />
+              修改皮肤
-              编辑
             </motion.button>
             <motion.button
               onClick={() => onDelete(profile.uuid)}

src/components/profile/MySkinsTab.tsx

@@ -68,7 +68,6 @@ export default function MySkinsTab({
               key={skin.id}
               texture={skin}
               onViewDetails={handleViewDetails}
-              onToggleVisibility={onToggleVisibility}
               customActions={
                 <div className="flex gap-2">
                   <button

src/contexts/AuthContext.tsx

@@ -22,7 +22,7 @@ interface AuthContextType {
   isLoading: boolean;
   isAuthenticated: boolean;
   login: (username: string, password: string) => Promise<void>;
-  register: (username: string, email: string, password: string, verificationCode: string) => Promise<void>;
+  register: (username: string, email: string, password: string, verificationCode: string, captchaId?: string) => Promise<void>;
   logout: () => void;
   updateUser: (userData: Partial<User>) => void;
   refreshUser: () => Promise<void>;
@@ -106,7 +106,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     }
   };
 
-  const register = async (username: string, email: string, password: string, verificationCode: string) => {
+  const register = async (username: string, email: string, password: string, verificationCode: string, captchaId?: string) => {
     setIsLoading(true);
     try {
       const response = await fetch(`${API_BASE_URL}/auth/register`, {
@@ -119,6 +119,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
           email,
           password,
           verification_code: verificationCode,
+          ...(captchaId && { captcha_id: captchaId }),
         }),
       });
 

src/lib/api.ts

@@ -313,3 +313,13 @@ export async function resetYggdrasilPassword(): Promise<ApiResponse<{
   return response.json();
 }
 
+// 删除材质
+export async function deleteTexture(id: number): Promise<ApiResponse<null>> {
+  const response = await fetch(`${API_BASE_URL}/texture/${id}`, {
+    method: 'DELETE',
+    headers: getAuthHeaders(),
+  });
+
+  return response.json();
+}
+