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

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

cutejava-front/src/views/components/base/Echarts.vue

@@ -98,13 +98,14 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .dashboard-editor-container {
-    padding: 18px 22px 22px 22px;
-    background-color: rgb(240, 242, 245);
-    .chart-wrapper {
-      background: #fff;
-      padding: 16px 16px 0;
-      margin-bottom: 32px;
-    }
+.dashboard-editor-container {
+  padding: 18px 22px 22px 22px;
+  background-color: rgb(240, 242, 245);
+
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
   }
+}
 </style>

cutejava-front/src/views/components/base/SplitPaneDemo.vue

@@ -45,23 +45,26 @@
 export default {
   name: 'SplitPaneDemo',
   methods: {
-    resize() {}
+    resize() {
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.wrap{
-  height:300px;
-  .paneL{
-    background-color:red;
-    height:100%;
-    width:100%;
+.wrap {
+  height: 300px;
+
+  .paneL {
+    background-color: red;
+    height: 100%;
+    width: 100%;
   }
-  .paneR{
+
+  .paneR {
     background-color: blue;
-    height:100%;
-    width:100%;
+    height: 100%;
+    width: 100%;
   }
 }
 </style>

cutejava-front/src/views/components/base/WebSocketDemo.vue

@@ -11,8 +11,7 @@
   </el-card>
 </template>
 <script>
-import MyWebSocket from '@/utils/websocket'
-import { mapGetters } from 'vuex'
+import CsWsClient from '@/utils/CsWsClient'
 
 export default {
   data() {
@@ -22,12 +21,6 @@ export default {
       responseTxt: ''
     }
   },
-  computed: {
-    ...mapGetters([
-      'websocketApi',
-      'user'
-    ])
-  },
   // mounted() {},
   destroyed() {
     if (this.client) {
@@ -39,7 +32,7 @@ export default {
       // 获取mapGetters中的值
       // console.error('userInfo', this.user)
       const that = this
-      that.client = new MyWebSocket(that, that.websocketApi.replaceAll('{sid}', that.user.username))
+      that.client = new CsWsClient(that)
       that.client.connect(function(event) {
         console.info('=============== MyWebSocket:event', event)
       }, function(msgEvent) {

cutejava-front/src/views/components/business/CuteFileDragUpload.vue

@@ -20,6 +20,7 @@
 import { Message } from 'element-ui'
 import { mapGetters } from 'vuex'
 import { getToken } from '@/utils/auth'
+
 export default {
   name: 'CuteFileUpload',
   props: {

cutejava-front/src/views/components/business/CuteFileUpload.vue

@@ -18,6 +18,7 @@
 import { Message } from 'element-ui'
 import { mapGetters } from 'vuex'
 import { getToken } from '@/utils/auth'
+
 export default {
   name: 'CuteFileUpload',
   props: {

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: {

cutejava-front/src/views/components/icons/index.vue

@@ -40,9 +40,10 @@
 </template>
 
 <script>
-import clipboard from '@/utils/clipboard'
+import clipboard from '@/plugins/ClipboardPlugin'
 import svgIcons from './svg-icons'
 import elementIcons from './element-icons'
+
 export default {
   name: 'Icons',
   data() {
@@ -75,6 +76,7 @@ export default {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   }
+
   .icon-item {
     margin: 20px;
     height: 85px;
@@ -85,11 +87,13 @@ export default {
     color: #24292e;
     cursor: pointer;
   }
+
   span {
     display: block;
     font-size: 16px;
     margin-top: 10px;
   }
+
   .disabled {
     pointer-events: none;
   }