refactor: update some features

Author: StepfenShawn

README.md

@@ -2,14 +2,17 @@
 一款AI驱动的祖传代码炼金师，将优雅代码『精心』重构为屎山💩。An AI-powered legacy code alchemist that carefully transforms clean code into shit code.  
 
 ## 简介
+> 还在担心 AI 时代抢走你的饭碗? 那就用魔法打败魔法。  
+-- 鲁迅  
+
 ShitCodify是一个能够将正常、易读、易维护的代码转换为难以理解、难以维护但仍然能够正常工作的"屎山代码"的工具。它利用大型语言模型（如GPT-4）来分析你的代码，并应用各种"反模式"和不良实践来降低代码的可读性和可维护性，同时保持代码的功能不变。
 
 ## 为什么需要这个工具?
 - 工作保障计划: 确保你的代码像谜题一样存在, 提升你在公司不可替代的地位
 - 职场关系优化：让代码评审变成「你猜我在写什么」的悬疑社交游戏, 强迫产品经理理解技术负债的价值
 - 时间加速器：10分钟体验10年屎山沉积的「包浆」质感  
 - 学习反面案例: 展示不良编程习惯的影响  
-等等...  
+- ...  
 
 ## 特性
 - 支持多种编程语言（Rust、Python、JavaScript、Java、C++、Go、Ocaml等）
@@ -26,12 +29,32 @@ ShitCodify是一个能够将正常、易读、易维护的代码转换为难以
 直接访问 https://stepfenshawn.github.io/ShitCodify/#/ 生成 Prompt 后将其复制给大模型使用。  
 
 ## Build
+```sh
+git clone [email protected]:StepfenShawn/ShitCodify.git
+cd ShitCodify
 ```
+运行:  
+```sh
 npm install
 npm run dev
 ```
+部署:
+```sh
+npm run build
+```
+
+## 贡献 Prompts
+所有语言的 prompts 模板在 [这个](src/prompt/) 目录下.  
+欢迎贡献代码、报告问题或提出建议！  
 
 ## 后续
-- 优化 Prompt.
+- 支持更多语言的特定 Prompt 和优化 Prompt.
 - 用 Rust 实现 CLI 和支持调用本地模型.
-- 实现 AI Agent.
+- 实现 AI Agent, 实现类似 cursor 的屎山代码助手, 可以快速构建出屎山项目.
+
+## 免责声明
+本工具仅供学习和娱乐目的使用。请不要在生产环境或重要项目中使用生成的"屎山代码"。作者不对因使用本工具生成的代码而导致的任何问题负责。
+
+## 许可证
+本项目采用MIT许可证。  
+

src/App.vue

@@ -14,10 +14,12 @@ const selectedLanguage = ref('javascript');
 const projectFiles = ref<FileNode[]>([]);
 const selectedFile = ref<FileNode | null>(null);
 const showConfigModal = ref(false);
+const showSidebar = ref(true); // 控制侧边栏显示状态
 
 // 计算属性
 const canConvert = computed(() => sourceCode.value.trim().length > 0);
 const selectedFilePath = computed(() => selectedFile.value?.path || '');
+const hasSidebar = computed(() => projectFiles.value.length > 0 && showSidebar.value);
 
 // 配置
 const config = reactive({
@@ -73,6 +75,9 @@ const handleFileUpload = (files: File[]) => {
         // 添加到文件树
         projectFiles.value = [fileToNode(file)];
         selectedFile.value = projectFiles.value[0];
+        
+        // 确保侧边栏显示
+        showSidebar.value = true;
       }
     };
     reader.readAsText(file);
@@ -85,6 +90,9 @@ const handleFileUpload = (files: File[]) => {
     if (firstFile) {
       selectedFile.value = firstFile;
       loadFileContent(firstFile, files);
+      
+      // 确保侧边栏显示
+      showSidebar.value = true;
     }
   }
 };
@@ -177,13 +185,18 @@ const setLanguageFromExtension = (extension: string) => {
   }
 };
 
-// const handleLanguageChange = (language: string) => {
-//   selectedLanguage.value = language;
-// };
+// 切换侧边栏显示状态
+const toggleSidebar = () => {
+  showSidebar.value = !showSidebar.value;
+};
+
+const handleLanguageChange = (language: string) => {
+  selectedLanguage.value = language;
+};
 
-// const handleConfigChange = (newConfig: any) => {
-//   config.shitty_code_settings = newConfig.shitty_code_settings;
-// };
+const handleConfigChange = (newConfig: any) => {
+  config.shitty_code_settings = newConfig.shitty_code_settings;
+};
 
 const closeConfigModal = () => {
   showConfigModal.value = false;
@@ -201,16 +214,32 @@ const closeConfigModal = () => {
     <!-- 主内容区域 -->
     <div class="main-content">
       <!-- 侧边栏 -->
-      <div class="sidebar" v-if="projectFiles.length > 0">
+      <div class="sidebar" v-if="hasSidebar">
+        <div class="sidebar-header">
+          <h3>项目文件</h3>
+          <button class="sidebar-toggle" @click="toggleSidebar" title="隐藏侧边栏">
+            <span>◀</span>
+          </button>
+        </div>
         <FileTree 
           :files="projectFiles" 
           @file-select="handleFileSelect"
           :selected-path="selectedFilePath"
         />
       </div>
 
+      <!-- 侧边栏切换按钮 -->
+      <button 
+        v-if="projectFiles.length > 0 && !showSidebar" 
+        class="sidebar-show-button"
+        @click="toggleSidebar"
+        title="显示侧边栏"
+      >
+        <span>▶</span>
+      </button>
+      
       <!-- 编辑器区域 -->
-      <div class="editors">
+      <div class="editors" :class="{ 'with-sidebar': hasSidebar }">
         <div class="editor-container">
           <CodeEditor 
             v-model="sourceCode" 
@@ -282,15 +311,80 @@ html, body {
   overflow: hidden;
   width: 100%;
   height: calc(100vh - 60px);
+  position: relative;
 }
 
 .sidebar {
   width: 250px;
   min-width: 200px;
-  overflow: auto;
+  overflow: hidden;
   border-right: 1px solid #333;
   background-color: #1e1e1e;
   height: 100%;
+  display: flex;
+  flex-direction: column;
+  transition: width 0.3s ease;
+}
+
+.sidebar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 16px;
+  background-color: #2a2a2a;
+  border-bottom: 1px solid #333;
+}
+
+.sidebar-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.sidebar-toggle {
+  background: none;
+  border: none;
+  color: #888;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.sidebar-toggle:hover {
+  color: #e0e0e0;
+  background-color: #3a3a3a;
+}
+
+.sidebar-show-button {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: #2a2a2a;
+  border: none;
+  border-right: 1px solid #333;
+  color: #888;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 8px 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  z-index: 5;
+  transition: all 0.2s ease;
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
+}
+
+.sidebar-show-button:hover {
+  color: #e0e0e0;
+  background-color: #3a3a3a;
 }
 
 .editor-container {
@@ -310,6 +404,12 @@ html, body {
   overflow: hidden;
   height: 100%;
   width: 100%;
+  transition: width 0.3s ease, margin-left 0.3s ease;
+  padding-left: 0;
+}
+
+.editors.with-sidebar {
+  width: calc(100% - 250px);
 }
 
 .editor-panel {
@@ -451,10 +551,24 @@ html, body {
     border-bottom: 1px solid #333;
   }
   
+  .editors.with-sidebar {
+    width: 100%;
+    height: calc(100% - 200px);
+  }
+  
   .editor-container {
     width: 100%;
     height: calc(100% - 200px);
     padding: 8px;
   }
+  
+  .sidebar-show-button {
+    top: 200px;
+    left: 50%;
+    transform: translateX(-50%) rotate(90deg);
+    border-radius: 0 0 4px 4px;
+    border-right: none;
+    border-top: 1px solid #333;
+  }
 }
 </style>

src/components/CodeEditor.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch, defineProps, defineEmits } from 'vue';
+import { ref, onMounted, onUnmounted, watch, defineProps, defineEmits } from 'vue';
 import * as monaco from 'monaco-editor';
 
 const props = defineProps({
@@ -87,21 +87,52 @@ onMounted(() => {
       scrollBeyondLastLine: false,
       readOnly: props.readOnly,
       fontSize: 14,
+      lineHeight: 21,
+      fontFamily: "'Consolas', 'Monaco', 'Courier New', monospace",
       lineNumbers: 'on',
       renderLineHighlight: 'all',
       tabSize: 2,
       wordWrap: 'on',
-      padding: { top: 10 }
+      padding: { top: 10 },
+      fixedOverflowWidgets: true,
+      renderWhitespace: 'selection',
+      guides: {
+        indentation: true
+      }
     });
 
     editor.onDidChangeModelContent(() => {
       if (editor) {
         emit('update:modelValue', editor.getValue());
       }
     });
+    
+    setTimeout(() => {
+      if (editor) {
+        editor.layout();
+      }
+    }, 100);
+    
+    window.addEventListener('resize', handleResize);
+  }
+});
+
+onUnmounted(() => {
+  // 移除窗口大小变化的监听器
+  window.removeEventListener('resize', handleResize);
+  
+  // 销毁编辑器
+  if (editor) {
+    editor.dispose();
   }
 });
 
+const handleResize = () => {
+  if (editor) {
+    editor.layout();
+  }
+};
+
 watch(() => props.modelValue, (newValue) => {
   if (editor && newValue !== editor.getValue()) {
     editor.setValue(newValue);
@@ -238,6 +269,35 @@ const handleFileUpload = (event: Event) => {
   height: 100% !important;
 }
 
+:deep(.monaco-editor .view-lines) {
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
+  letter-spacing: 0 !important;
+  text-align: left !important;
+}
+
+:deep(.monaco-editor .lines-content) {
+  align-items: flex-start !important;
+  justify-content: flex-start !important;
+  text-align: left !important;
+}
+
+:deep(.monaco-editor .cursor) {
+  width: 2px !important;
+}
+
+:deep(.monaco-editor-background) {
+  background-color: #1e1e1e !important;
+}
+
+:deep(.monaco-editor .view-line) {
+  width: 100% !important;
+  text-align: left !important;
+}
+
+:deep(.monaco-editor .view-line span) {
+  text-align: left !important;
+}
+
 @media (max-width: 768px) {
   .editor-header {
     flex-direction: column;