feat: 添加对 Scratch (ClipCC) 项目的支持，更新相关组件和逻辑

Author: Sunwuyuan

src/components/posts/PostEmbed.vue

@@ -368,14 +368,15 @@ const isSelf = computed(() => {
 // Computed properties
 const isScratchProject = computed(() => {
   const type = projectData.value?.type || "scratch";
-  return type === "scratch" || type === "scratch3";
+  return ["scratch", "scratch3", "scratch-clipcc"].includes(type);
 });
 
 const projectTypeLabel = computed(() => {
   const type = projectData.value?.type || "scratch";
   const labels = {
     scratch: "Scratch 作品",
     scratch3: "Scratch 作品",
+    "scratch-clipcc": "Scratch (ClipCC) 作品",
     "scratch-extension": "扩展",
     python: "Python",
     javascript: "JavaScript",

src/components/project/NewProjectDialog.vue

@@ -15,7 +15,7 @@
           <v-col cols="12" sm="6">
             <v-select
               v-model="projectinfo.type"
-              :items="['scratch', 'python', 'text']"
+              :items="['scratch', 'scratch-clipcc', 'python', 'text']"
               hint="选择一个"
               label="类型"
               required

src/components/project/ProjectInfoCard.vue

@@ -104,14 +104,14 @@
     <!-- Editor buttons (full only) -->
     <div v-if="variant === 'full'" class="project-info__actions">
       <v-btn
-        v-if="project.type === 'scratch'"
+        v-if="['scratch', 'scratch3', 'scratch-clipcc'].includes(project.type)"
         variant="tonal"
         rounded="lg"
         class="text-none"
         append-icon="mdi-open-in-new"
         @click="openEditor(project.id, project.type)"
       >
-        Scratch 编辑器
+        {{ project.type === 'scratch-clipcc' ? 'ClipCC 编辑器' : 'Scratch 编辑器' }}
       </v-btn>
       <v-btn
         :to="`/${username}/${projectname}/edit`"

src/components/project/ProjectPlayer.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <template v-if="projectType === 'scratch'">
+    <template v-if="isScratchLikeProjectType(projectType)">
       <v-card v-if="showplayer" border hover style="aspect-ratio: 4 / 3">
         <iframe
           :src="embedurl"
@@ -55,6 +55,13 @@
 import {initProject, getProjectContent} from "@/services/projectService";
 import CodeRunner from './CodeRunner.vue';
 import ExtensionDisplayContent from "../extensions/ExtensionDisplayContent.vue";
+
+const PLAYER_BASE_PATHS = {
+  scratch: '/scratch',
+  scratch3: '/scratch',
+  'scratch-clipcc': '/clipcc'
+};
+
 export default {
   name: 'ProjectPlayer',
   components: {
@@ -93,22 +100,34 @@ export default {
     }
   },
   computed: {
+    playerBasePath() {
+      return PLAYER_BASE_PATHS[this.projectType] || '/scratch';
+    },
     embedurl() {
+      const playerFile = this.projectType === 'scratch-clipcc' ? 'player.html' : 'embed.html';
+      let baseUrl = `${this.playerBasePath}/${playerFile}?id=${this.projectId}&embed=true`;
 
-         let baseUrl = import.meta.env.DEV ?`http://localhost:8601/embed.html?id=${this.projectId}&embed=true` : `/scratch/embed.html?id=${this.projectId}&embed=true`;
-
-      if(localStorage.getItem('embedurl')){
-        baseUrl = `${localStorage.getItem('embedurl')}/embed.html?id=${this.projectId}&embed=true`;
+      if (this.projectType === 'scratch' || this.projectType === 'scratch3') {
+        if (import.meta.env.DEV) {
+          baseUrl = `http://localhost:8601/embed.html?id=${this.projectId}&embed=true`;
+        }
+        if (localStorage.getItem('embedurl')) {
+          baseUrl = `${localStorage.getItem('embedurl')}/embed.html?id=${this.projectId}&embed=true`;
+        }
       }
+
       if (this.commitId !== 'latest') {
         return `${baseUrl}&ref=${this.commitId}`;
       }
       return `${baseUrl}&branch=${this.branch}&ref=${this.commitId}`;
     }
   },
   methods: {
+    isScratchLikeProjectType(type) {
+      return ['scratch', 'scratch3', 'scratch-clipcc'].includes(type);
+    },
     async loadProjectContent() {
-      if (!this.showplayer || this.projectType === 'scratch') {
+      if (!this.showplayer || this.isScratchLikeProjectType(this.projectType)) {
         return;
       }
 

src/constants/special_languages.js

@@ -5,6 +5,12 @@ scratch: {
       description: "图形化编程语言",
       icon: "mdi-puzzle",
     },
+    "scratch-clipcc": {
+      name: "Scratch (ClipCC)",
+      extension: "sb3",
+      description: "使用 ClipCC 编辑器与播放器",
+      icon: "mdi-puzzle-check",
+    },
     "scratch-extension": {
       name: "Scratch扩展",
       extension: "js",

src/pages/app/explore/index.vue

@@ -195,6 +195,7 @@ const DEFAULT_SEARCH = Object.freeze({
 
 const TYPE_PRESET_KEYS = [
   "scratch",
+  "scratch-clipcc",
   "scratch-extension",
   "python",
   "javascript",

src/pages/app/project.vue

@@ -144,7 +144,7 @@
             <v-col cols="12" sm="6">
               <v-select
                 v-model="currentProject.type"
-                :items="['scratch', 'python', 'text']"
+                :items="['scratch', 'scratch-clipcc', 'python', 'text']"
                 hint="不建议你改"
                 label="类型"
                 required
@@ -266,6 +266,7 @@ export default {
       typeitems: [
         {name: "所有", type: ""},
         {name: "Scratch", type: "scratch"},
+        {name: "Scratch (ClipCC)", type: "scratch-clipcc"},
         {name: "Python", type: "python"},
       ],
       orderitems: [

src/stores/openEdit.js

@@ -1,12 +1,13 @@
 export default function open(id, type, username, projectname) {
-  if (type == "scratch") {
+  if (type == "scratch" || type == "scratch3") {
+    let editorUrl = "/scratch/editor.html?id=" + id;
     if (localStorage.getItem("embedurl")) {
-      window.open(
-        localStorage.getItem("embedurl") + "/editor.html?id=" + id
-      );
-    } else {
-      window.open("/scratch/editor.html?id=" + id);
+      editorUrl = localStorage.getItem("embedurl") + "/editor.html?id=" + id;
     }
+    window.open(editorUrl);
+  }
+  if (type == "scratch-clipcc") {
+    window.open("/clipcc/editor.html?id=" + id);
   }
   if (type == "python") {
     window.open("/python/edit.html?id=" + id);