feat: support some frameworks

Author: StepfenShawn

README.md

@@ -2,10 +2,8 @@
 一款AI驱动的祖传代码炼金师，将优雅代码『精心』重构为屎山💩。An AI-powered legacy code alchemist that carefully transforms clean code into shit code.  
 
 ## 简介
-> 还在担心 AI 时代抢走你的饭碗? 那就用魔法打败魔法。  
--- 鲁迅  
-
-ShitCodify是一个能够将正常、易读、易维护的代码转换为难以理解、难以维护但仍然能够正常工作的"屎山代码"的工具。它利用大型语言模型（如GPT-4）来分析你的代码，并应用各种"反模式"和不良实践来降低代码的可读性和可维护性，同时保持代码的功能不变。
+ShitCodify是一个能够将正常、易读、易维护的代码转换为难以理解、难以维护但仍然能够正常工作的"屎山代码"的工具。
+它利用大型语言模型（如GPT-4）来分析你的代码，并应用各种"反模式"和不良实践来降低代码的可读性和可维护性，同时保持代码的功能不变。
 
 ## 为什么需要这个工具?
 - 工作保障计划: 确保你的代码像谜题一样存在, 提升你在公司不可替代的地位
@@ -26,13 +24,19 @@ ShitCodify是一个能够将正常、易读、易维护的代码转换为难以
 
 ## 如何使用?
 当前 ShitCodify 还不支持像 cursor, trae 那样的 AI Agent 模式, 现在的实现仅仅只是通过codebase生成一段Prompt。  
-直接访问 https://stepfenshawn.github.io/ShitCodify/#/ 生成 Prompt 后将其复制给大模型使用。  
+直接访问 https://stepfenshawn.github.io/ShitCodify/#/ 生成 Prompt 后将其复制给大模型使用。    
+![截图](img/screenshot3.png)
 
 
 ## "屎山"程度配置
 可以根据需要自定义"屎山"程度:  
-![配置示例](img/screenshot1.png)
-
+![配置示例](img/screenshot1.png)  
+自定义跳转到的大模型网页:  
+![配置示例](img/screenshot2.png)
+示例:  
+![正常代码](img/example1.png)
+通过gpt-4o转化后:  
+![屎山代码](img/shit1.png)
 ## Build
 ```sh
 git clone [email protected]:StepfenShawn/ShitCodify.git
@@ -70,7 +74,7 @@ npm run build
 4. 构建项目
 5. 将构建结果部署到 gh-pages 分支
 
-这样，您只需要关注代码开发，无需手动部署。项目会自动部署到 GitHub Pages 上，访问地址为：https://stepfenshawn.github.io/ShitCodify/
+这样，您只需要关注代码开发，无需手动部署。项目会自动部署到 GitHub Pages 上，访问地址为：https://stepfenshawn.github.io/ShitCodify/#/
 
 ## 许可证
 本项目采用MIT许可证。  

img/example1.png

@@ -6,11 +6,13 @@ import FileTree from './components/FileTree.vue';
 import ConfigPanel from './components/ConfigPanel.vue';
 import Toolbar from './components/Toolbar.vue';
 import { generatePrompt, copyToClipboard, filesToTree, fileToNode, type FileNode } from './utils/promptGenerator';
+import { generateCursorRules } from './utils/cursorRulesGenerator';
 
 // 状态
 const sourceCode = ref('');
 const generatedPrompt = ref('');
-const selectedLanguage = ref('javascript');
+const generatedCursorRules = ref('');
+const selectedLanguage = ref('python');
 const projectFiles = ref<FileNode[]>([]);
 const selectedFile = ref<FileNode | null>(null);
 const showConfigModal = ref(false);
@@ -34,6 +36,7 @@ const config = reactive({
       'readability'
     ],
     language_specific_techniques: true,
+    framework: '',
     preserve_functionality: true,
     add_easter_eggs: true,
     add_comments: true,
@@ -47,7 +50,7 @@ const config = reactive({
   }
 });
 
-// 自动更新生成的 prompt
+// 自动更新生成的 prompt 和 cursorrules
 const updatePrompt = () => {
   if (sourceCode.value.trim().length > 0) {
     const prompt = generatePrompt(
@@ -57,6 +60,13 @@ const updatePrompt = () => {
       projectFiles.value.length > 0 ? projectFiles.value : undefined
     );
     generatedPrompt.value = prompt;
+    
+    // 生成 .cursorrules 文件内容
+    const cursorRules = generateCursorRules(
+      selectedLanguage.value,
+      config
+    );
+    generatedCursorRules.value = cursorRules;
   }
 };
 
@@ -224,10 +234,9 @@ const closeConfigModal = () => {
       @open-config="showConfigModal = true"
     />
 
-    <!-- 主内容区域 -->
     <div class="main-content">
       <!-- 侧边栏 -->
-      <div class="sidebar" v-if="hasSidebar">
+      <div v-if="hasSidebar" class="sidebar">
         <div class="sidebar-header">
           <h3>项目文件</h3>
           <button class="sidebar-toggle" @click="toggleSidebar" title="隐藏侧边栏">
@@ -251,21 +260,54 @@ const closeConfigModal = () => {
         <span>▶</span>
       </button>
 
-      <!-- 编辑器区域 -->
-      <div class="editors" :class="{ 'with-sidebar': hasSidebar }">
-        <div class="editor-container">
+      <!-- 内容区域 -->
+      <div class="content-area" :class="{ 'with-sidebar': hasSidebar }">
+        <!-- 编辑器部分 -->
+        <div class="editor-section">
+          <div class="section-header">
+            <h3>源代码</h3>
+            <div class="language-selector">
+              <label for="language-select">语言:</label>
+              <select 
+                id="language-select" 
+                v-model="selectedLanguage" 
+                @change="updatePrompt"
+              >
+                <option value="javascript">JavaScript</option>
+                <option value="typescript">TypeScript</option>
+                <option value="python">Python</option>
+                <option value="java">Java</option>
+                <option value="csharp">C#</option>
+                <option value="cpp">C++</option>
+                <option value="go">Go</option>
+                <option value="rust">Rust</option>
+                <option value="php">PHP</option>
+                <option value="ruby">Ruby</option>
+                <option value="swift">Swift</option>
+                <option value="kotlin">Kotlin</option>
+                <option value="scala">Scala</option>
+                <option value="html">HTML</option>
+                <option value="css">CSS</option>
+                <option value="sql">SQL</option>
+              </select>
+            </div>
+          </div>
           <CodeEditor 
             v-model="sourceCode" 
-            :language="selectedLanguage"
-            :showUpload="true"
-            title="源代码"
+            :language="selectedLanguage" 
+            :show-upload="true" 
             @file-upload="handleFileUpload"
           />
         </div>
-        <div class="editor-container">
+        
+        <!-- 预览部分 -->
+        <div class="preview-section">
+          <div class="section-header">
+            <h3>生成的提示</h3>
+          </div>
           <MarkdownPreview 
             v-model="generatedPrompt" 
-            title="生成的提示"
+            :cursor-rules="generatedCursorRules"
           />
         </div>
       </div>
@@ -303,7 +345,9 @@ html, body {
   width: 100%;
   overflow: hidden;
 }
+</style>
 
+<style scoped>
 .app {
   display: flex;
   flex-direction: column;
@@ -322,42 +366,36 @@ html, body {
   display: flex;
   flex: 1;
   overflow: hidden;
-  width: 100%;
-  height: calc(100vh - 60px);
-  position: relative;
 }
 
 .sidebar {
   width: 250px;
-  min-width: 200px;
-  overflow: hidden;
+  background-color: #252526;
   border-right: 1px solid #333;
   background-color: #1e1e1e;
   height: 100%;
   display: flex;
   flex-direction: column;
-  transition: width 0.3s ease;
+  overflow: hidden;
 }
 
 .sidebar-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 16px;
-  background-color: #2a2a2a;
+  padding: 10px;
   border-bottom: 1px solid #333;
 }
 
 .sidebar-header h3 {
   margin: 0;
   font-size: 16px;
-  font-weight: 500;
 }
 
 .sidebar-toggle {
   background: none;
   border: none;
-  color: #888;
+  color: #e0e0e0;
   cursor: pointer;
   font-size: 14px;
   padding: 4px;
@@ -378,60 +416,66 @@ html, body {
   left: 0;
   top: 50%;
   transform: translateY(-50%);
-  background-color: #2a2a2a;
-  border: none;
-  border-right: 1px solid #333;
-  color: #888;
+  background-color: #252526;
+  border: 1px solid #333;
+  border-left: none;
+  color: #e0e0e0;
+  padding: 10px 5px;
   cursor: pointer;
-  font-size: 14px;
-  padding: 8px 4px;
+  z-index: 10;
+}
+
+.content-area {
+  flex: 1;
   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);
+  flex-direction: column;
+  overflow: hidden;
 }
 
-.sidebar-show-button:hover {
-  color: #e0e0e0;
-  background-color: #3a3a3a;
+@media (min-width: 768px) {
+  .content-area {
+    flex-direction: row;
+  }
+}
+
+.content-area.with-sidebar {
+  margin-left: 0;
 }
 
-.editor-container {
+.editor-section, .preview-section {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  padding: 16px;
-  height: 100%;
-  box-sizing: border-box;
+  padding: 10px;
+  border-bottom: 1px solid #333;
+}
+
+@media (min-width: 768px) {
+  .editor-section, .preview-section {
+    border-bottom: none;
+  }
+  
+  .editor-section {
+    border-right: 1px solid #333;
+  }
 }
 
-.editors {
+.section-header {
   display: flex;
-  flex: 1;
-  gap: 16px;
-  overflow: hidden;
-  height: 100%;
-  width: 100%;
-  transition: width 0.3s ease, margin-left 0.3s ease;
-  padding-left: 0;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
 }
 
-.editors.with-sidebar {
-  width: calc(100% - 250px);
+.section-header h3 {
+  margin: 0;
+  font-size: 16px;
 }
 
-.editor-panel {
-  flex: 1;
+.language-selector {
   display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  min-width: 400px;
-  height: 100%;
+  align-items: center;
 }
 
 /* 弹窗样式 */
@@ -491,7 +535,7 @@ html, body {
 .close-button {
   background: none;
   border: none;
-  color: #888;
+  color: #e0e0e0;
   font-size: 24px;
   cursor: pointer;
   padding: 0;

img/screenshot2.png

@@ -35,6 +35,18 @@
           </div>
         </div>
 
+        <div class="config-section">
+          <h4>框架</h4>
+          <div class="config-option">
+            <select v-model="localConfig.shitty_code_settings.framework">
+              <option value="">无</option>
+              <option v-for="framework in availableFrameworks" :key="framework.value" :value="framework.value">
+                {{ framework.label }}
+              </option>
+            </select>
+          </div>
+        </div>
+
         <div class="config-section">
           <h4>注释风格</h4>
           <div class="config-option">
@@ -122,6 +134,7 @@ const props = defineProps({
           'readability'
         ],
         language_specific_techniques: true,
+        framework: '',
         preserve_functionality: true,
         add_easter_eggs: true,
         add_comments: true,
@@ -159,6 +172,23 @@ const availableTechniques = [
   { label: '性能', value: 'performance' },
   { label: '可读性', value: 'readability' }
 ];
+
+const availableFrameworks = [
+  { label: 'Angular', value: 'angular' },
+  { label: 'ASP.NET Core', value: 'asp.net core' },
+  { label: 'Django', value: 'django' },
+  { label: 'Express', value: 'express' },
+  { label: 'FastAPI', value: 'fastapi' },
+  { label: 'Flask', value: 'flask' },
+  { label: 'Laravel', value: 'laravel' },
+  { label: 'NestJS', value: 'nestjs' },
+  { label: 'Next.js', value: 'next.js' },
+  { label: 'React', value: 'react' },
+  { label: 'Ruby on Rails', value: 'ruby on rails' },
+  { label: 'Spring Boot', value: 'spring boot' },
+  { label: 'Svelte/SvelteKit', value: 'svelte' },
+  { label: 'Vue.js', value: 'vue.js' }
+];
 </script>
 
 <style scoped>