ui: add colors for some texts and buttons (#504)

Co-authored-by: rick <[email protected]>

Author: LinuxSuRen

console/atest-ui/src/views/TestCase.vue

@@ -529,7 +529,7 @@ const duplicateTestCase = () => {
         <el-button type="primary" @click="saveTestCase" :icon="Edit" :loading="saveLoading"
           v-if="!Cache.GetCurrentStore().readOnly"
           >{{ t('button.save') }}</el-button>
-        <el-button type="primary" @click="deleteTestCase" :icon="Delete">{{ t('button.delete') }}</el-button>
+        <el-button type="danger" @click="deleteTestCase" :icon="Delete">{{ t('button.delete') }}</el-button>
         <el-button type="primary" @click="openDuplicateTestCaseDialog" :icon="CopyDocument">{{ t('button.duplicate') }}</el-button>
         <el-button type="primary" @click="openCodeDialog">{{ t('button.generateCode') }}</el-button>
       </div>

console/atest-ui/src/views/TestSuite.vue

@@ -331,7 +331,7 @@ const targetSuiteDuplicateName = ref('')
       <el-button type="primary" @click="save" disabled v-if="Cache.GetCurrentStore().readOnly">{{
         t('button.save')
       }}</el-button>
-      <el-button type="primary" @click="del" :icon="Delete" test-id="suite-del-but">{{
+      <el-button type="danger" @click="del" :icon="Delete" test-id="suite-del-but">{{
         t('button.delete')
       }}</el-button>
       <el-button type="primary" @click="convert" test-id="convert">{{

console/atest-ui/src/views/TestingPanel.vue

@@ -16,6 +16,7 @@ const { t } = useI18n()
 interface Tree {
   id: string
   label: string
+  method: string
   parent: string
   parentID: string
   store: string
@@ -41,6 +42,7 @@ const handleTreeClick = (data: Tree) => {
             data.children?.push({
               id: data.label,
               label: item.name,
+              method: item.request.method,
               kind: data.kind,
               store: data.store,
               parent: data.label,
@@ -328,7 +330,16 @@ const suiteKinds = [{
               @node-click="handleTreeClick"
               @current-change="handleTreeClick"
               data-intro="This is the test suite tree. You can click the test suite to edit it."
-            />
+            >
+              <template #default="{ node, data }">
+                <span class="custom-tree-node">
+                  <el-text class="mx-1" v-if="data.method === 'POST'" type="success">{{ node.label }}</el-text>
+                  <el-text class="mx-1" v-else-if="data.method === 'PUT'" type="warning">{{ node.label }}</el-text>
+                  <el-text class="mx-1" v-else-if="data.method === 'DELETE'" type="danger">{{ node.label }}</el-text>
+                  <el-text class="mx-1" v-else>{{ node.label }}</el-text>
+                </span>
+              </template>
+            </el-tree>
             <TemplateFunctions/>
           </el-aside>