feat: 实现一个scss转css的实时预览工具，用于scss学习

src/router/modules/demo.ts

@@ -114,6 +114,10 @@ const titleArr = [
         key: 'blockAllAction',
         title: '阻止页面所有操作',
     },
+    {
+        key: 'scssLiveTranslate',
+        title: 'SCSS → CSS 实时翻译器',
+    },
 ];
 
 // @/views/demo/**/*.vue

src/views/demo/scssLiveTranslate/index.vue

@@ -179,9 +179,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { Edit } from '@element-plus/icons-vue';
 
 // ---- State ----
 const scss = ref<string>(`$primary: #3490dc;
@@ -307,7 +306,7 @@ async function ensureSass() {
     try {
         await new Promise((resolve, reject) => {
             const script = document.createElement('script');
-            script.src = 'https://cdn.jsdelivr.net/npm/sass.js@0.11.1/dist/sass.sync.js';
+            script.src = './sass.sync.js';
             script.onload = () => resolve();
             script.onerror = (e) => reject(new Error('Sass.js failed to load'));
             document.head.appendChild(script);

src/views/tool/nav/index.vue

@@ -57,7 +57,7 @@
 
 <script setup>
 import { ref, computed } from 'vue';
-import { Search, Warning, Sunny, Moon, FullScreen, Printer, Picture } from '@element-plus/icons-vue';
+import { Search, Warning, Sunny, Moon, FullScreen, Printer, Picture, Switch } from '@element-plus/icons-vue';
 
 // 主题状态
 const isDarkTheme = ref(false);
@@ -75,6 +75,7 @@ const navItems = ref([
     { icon: Picture, name: 'HTML转图片', url: '/#/htmlToImg' },
     { icon: Picture, name: '图片压缩', url: '/#/demo/compressImage' },
     { icon: Picture, name: '图片标注', url: '/#/demo/tuiImageEditor' },
+    { icon: Switch, name: 'SCSS转换', url: '/#/demo/scssLiveTranslate' },
 ]);
 
 // 计算属性：过滤后的导航项