修复：将ColorDemo.vue中的主题设置函数类型定义为TypeScript，并在路由中根据开发环境动态添加ColorDemo路由

Author: c1921

frontend/src/pages/ColorDemo.vue

@@ -298,17 +298,17 @@ http://localhost:5173/colors
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { onMounted } from 'vue';
 
 // 设置主题
-const setTheme = (theme) => {
+const setTheme = (theme: string): void => {
   document.documentElement.setAttribute('data-theme', theme);
   localStorage.setItem('theme', theme);
 };
 
 // 跟随系统主题
-const setSystemTheme = () => {
+const setSystemTheme = (): void => {
   localStorage.removeItem('theme');
   const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
   document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
@@ -321,4 +321,10 @@ onMounted(() => {
     document.documentElement.setAttribute('data-theme', savedTheme);
   }
 });
+</script>
+
+<script lang="ts">
+export default {
+  name: 'ColorDemo'
+}
 </script> 

frontend/src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import ModelManager from '../pages/ModelManager.vue'
 import PromptManager from '../pages/PromptManager.vue'
+// @ts-ignore 由于只在开发环境使用，可以忽略类型检查
 import ColorDemo from '../pages/ColorDemo.vue'
 
 // 定义路由配置
@@ -24,16 +25,20 @@ const routes = [
     meta: {
       title: '提示词管理'
     }
-  },
-  {
+  }
+]
+
+// 在开发环境中添加ColorDemo路由
+if (import.meta.env.DEV) {
+  routes.push({
     path: '/colors',
     name: 'ColorDemo',
     component: ColorDemo,
     meta: {
       title: 'FlyonUI 颜色系统示例'
     }
-  }
-]
+  })
+}
 
 // 创建路由实例
 const router = createRouter({