refactor(front): 重构前端组件和 API

- 更新了多个组件的样式和结构
- 重命名了一些 API 文件
- 添加了新的 API 接口
- 优化了部分代码的可读性和性能

cutejava-front/src/views/components/dev/CuteCodeEditor.vue

@@ -27,6 +27,7 @@ import 'codemirror/mode/sql/sql'
 import 'codemirror/mode/vue/vue'
 import 'codemirror/mode/xml/xml'
 import { Message } from 'element-ui'
+
 const SupportModeList = ['yaml', 'java', 'go', 'swift', 'dockerfile', 'groovy', 'lua', 'perl', 'python', 'ruby', 'sql', 'xml', 'vue']
 export default {
   name: 'CuteCodeEditor',

cutejava-front/src/views/components/dev/CuteDragTable.vue

@@ -14,8 +14,20 @@
       @selection-change="onTableSelectionChange"
     >
       <el-table-column v-if="mode === 'multi'" type="selection" width="55" />
-      <el-table-column v-for="(column, index) in crud.columns" :key="index" :label="column.label" :prop="column.prop" :formatter="column.formatter ? column.formatter : null" />
-      <el-table-column v-if="crud.operateColumn" :width="crud.operateColumn.width" label="操作" :formatter="crud.operateColumn.formatter" :fixed="crud.operateColumn.fixed" />
+      <el-table-column
+        v-for="(column, index) in crud.columns"
+        :key="index"
+        :label="column.label"
+        :prop="column.prop"
+        :formatter="column.formatter ? column.formatter : null"
+      />
+      <el-table-column
+        v-if="crud.operateColumn"
+        :width="crud.operateColumn.width"
+        label="操作"
+        :formatter="crud.operateColumn.formatter"
+        :fixed="crud.operateColumn.fixed"
+      />
     </el-table>
     <el-pagination
       :current-page="pageProps.current"
@@ -31,6 +43,7 @@
 
 <script>
 import Sortable from 'sortablejs'
+
 export default {
   name: 'CuteDragTable',
   props: {

cutejava-front/src/views/components/dev/CuteJavaEditor.vue

@@ -13,6 +13,7 @@ import 'codemirror/lib/codemirror.css'
 // 主题预览地址 https://blog.csdn.net/qq_41694291/article/details/106429772
 import 'codemirror/theme/darcula.css'
 import 'codemirror/mode/javascript/javascript'
+
 export default {
   name: 'CuteJavaEditor',
   props: {

cutejava-front/src/views/components/dev/CuteMarkdown.vue

@@ -15,10 +15,11 @@
 </template>
 
 <script>
-import { upload } from '@/utils/upload'
 import { mapGetters } from 'vuex'
 import { mavonEditor } from 'mavon-editor'
 import 'mavon-editor/dist/css/index.css'
+import { UploadFile } from '@/utils/CsDomUtil'
+
 const dynamicHeight = 160
 export default {
   name: 'CuteMarkdown',
@@ -52,7 +53,7 @@ export default {
   methods: {
     imgAdd(pos, $file) {
       const that = this
-      upload(that.imagesUploadApi, $file).then(res => {
+      UploadFile(that.imagesUploadApi, $file).then(res => {
         const data = res.data
         const url = that.baseApi + '/file/' + data.type + '/' + data.realName
         that.$refs.md.$img2Url(pos, url)

cutejava-front/src/views/components/dev/CutePipelineNode.vue

@@ -61,7 +61,9 @@
     <el-row>
       <el-col :span="12" style="text-align: left">
         <!-- 流水线状态为fail，且节点支持重试 -->
-        <div v-if="pipelineData.currentNodeStatus === 'fail' && pipelineData.retry === true">
+        <div
+          v-if="pipelineData.currentNodeStatus && pipelineData.currentNodeStatus === 'fail' && pipelineData.retry === true"
+        >
           <div class="box-buttons">
             <el-button
               type="text"
@@ -69,7 +71,7 @@
               :style="{
                 padding: 0,
                 margin: '0 10px 0 10px',
-                color: statusColorConst.success.color
+                color: statusColorConst.running.color
               }"
               @click="onNodeRetryClick"
             >
@@ -79,7 +81,7 @@
         </div>
         <!-- 流水线状态为success，且有需要满足条件的操作按钮 -->
         <div
-          v-else-if="pipelineData.currentNodeStatus === statusColorConst.success.code && pipelineData.buttons && pipelineData.buttons.length > 0"
+          v-else-if="pipelineData.currentNodeStatus && pipelineData.currentNodeStatus === statusColorConst.success.code && pipelineData.buttons && pipelineData.buttons.length > 0"
         >
           <div class="box-buttons">
             <el-button
@@ -90,7 +92,7 @@
               :style="{
                 padding: 0,
                 margin: '0 10px 0 10px',
-                color: ['apply','agree','ok','success'].includes(buttonItem.code) ? 'green' : 'red',
+                color: ['apply','agree','ok','success'].includes(buttonItem.code) ? statusColorConst.running.color : statusColorConst.fail.color,
                 display: ['success', 'fail'].includes(buttonItem.code) && pipelineData.status === buttonItem.code ? '' : 'none'
               }"
               @click="onNodeOperationClick(buttonItem)"
@@ -101,7 +103,7 @@
         </div>
         <!-- 流水线状态非pending，且有操作按钮 -->
         <div
-          v-else-if="pipelineData.currentNodeStatus !== statusColorConst.pending.code && pipelineData.buttons && pipelineData.buttons.length > 0"
+          v-else-if="pipelineData.currentNodeStatus && pipelineData.currentNodeStatus !== statusColorConst.pending.code && pipelineData.buttons && pipelineData.buttons.length > 0"
         >
           <div class="box-buttons">
             <el-button
@@ -112,7 +114,7 @@
               :style="{
                 padding: 0,
                 margin: '0 10px 0 10px',
-                color: ['apply','agree','ok','success'].includes(buttonItem.code) ? 'green' : 'red'
+                color: ['apply','agree','ok','success'].includes(buttonItem.code) ? statusColorConst.running.color : statusColorConst.fail.color
               }"
               @click="onNodeOperationClick(buttonItem)"
             >
@@ -160,7 +162,7 @@ export default {
     return {
       statusColorConst: {
         pending: { code: 'pending', label: '未开始', color: '#C0C4CC' },
-        running: { code: 'running', label: '运行中', color: '#67C23A' },
+        running: { code: 'running', label: '运行中', color: '#409EFF' },
         success: { code: 'success', label: '执行成功', color: '#67C23A' },
         fail: { code: 'fail', label: '执行失败', color: '#F56C6C' }
       },
@@ -265,8 +267,8 @@ export default {
 </script>
 <style scoped>
 .box-card {
-  width: 240px; /* 卡片宽度 */
-  max-width: 240px; /* 卡片宽度 */
+  width: 260px; /* 卡片宽度 */
+  max-width: 260px; /* 卡片宽度 */
   padding: 10px;
   background-color: #fff; /* 背景颜色 */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */

cutejava-front/src/views/components/dev/CuteRichTextEditor.vue

@@ -28,8 +28,9 @@
 import { mapGetters } from 'vuex'
 import '@wangeditor/editor/dist/css/style.css'
 import { Message } from 'element-ui'
-import { upload } from '@/utils/upload'
-import { Toolbar, Editor } from '@wangeditor/editor-for-vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import { UploadFile } from '@/utils/CsDomUtil'
+
 export default {
   name: 'CuteRichTextEditor',
   components: { Toolbar, Editor },
@@ -62,7 +63,7 @@ export default {
             allowedFileTypes: ['image/*'],
             // 自定义上传
             async customUpload(file, insertFn) { // JS 语法
-              upload(that.imagesUploadApi, file).then(res => {
+              UploadFile(that.imagesUploadApi, file).then(res => {
                 const data = res.data
                 const url = that.baseApi + '/file/' + data.dateGroup + '/' + data.realName
                 // 最后插入图片

cutejava-front/src/views/components/dev/CuteSimpleTable.vue

@@ -14,8 +14,20 @@
       @selection-change="onTableSelectionChange"
     >
       <el-table-column v-if="mode === 'multi'" type="selection" width="55" />
-      <el-table-column v-for="(column, index) in crud.columns" :key="index" :label="column.label" :prop="column.prop" :formatter="column.formatter ? column.formatter : null" />
-      <el-table-column v-if="crud.operateColumn" :width="crud.operateColumn.width" label="操作" :formatter="crud.operateColumn.formatter" :fixed="crud.operateColumn.fixed" />
+      <el-table-column
+        v-for="(column, index) in crud.columns"
+        :key="index"
+        :label="column.label"
+        :prop="column.prop"
+        :formatter="column.formatter ? column.formatter : null"
+      />
+      <el-table-column
+        v-if="crud.operateColumn"
+        :width="crud.operateColumn.width"
+        label="操作"
+        :formatter="crud.operateColumn.formatter"
+        :fixed="crud.operateColumn.fixed"
+      />
     </el-table>
     <el-pagination
       :current-page="pageProps.current"

cutejava-front/src/views/components/dev/CuteYamlEditor.vue

@@ -13,6 +13,7 @@ import 'codemirror/lib/codemirror.css'
 // 主题预览地址 https://blog.csdn.net/qq_41694291/article/details/106429772
 import 'codemirror/theme/darcula.css'
 import 'codemirror/mode/yaml/yaml'
+
 export default {
   name: 'CuteYamlEditor',
   props: {