From 3d595c384f1b0eaa7347f2ec5c7d4a977cdad937 Mon Sep 17 00:00:00 2001
From: "xinxin.wu" <xinxin.wu@fit2cloud.com>
Date: Tue, 11 Jul 2023 13:20:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9cr=5F=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package.json                         |  2 +-
 frontend/src/assets/svg/apitest.svg           | 74 +++++++++++++++++++
 .../src/assets/svg/{icons => }/promanger.svg  |  0
 .../src/components/pure/ms-alert/index.vue    | 39 ----------
 frontend/src/components/pure/ms-alert/type.ts |  5 --
 .../pluginManager/components/SceneList.vue    | 18 ++---
 .../src/views/system/pluginManager/index.vue  | 17 ++---
 7 files changed, 87 insertions(+), 68 deletions(-)
 create mode 100644 frontend/src/assets/svg/apitest.svg
 rename frontend/src/assets/svg/{icons => }/promanger.svg (100%)
 delete mode 100644 frontend/src/components/pure/ms-alert/index.vue
 delete mode 100644 frontend/src/components/pure/ms-alert/type.ts

diff --git a/frontend/package.json b/frontend/package.json
index 69fcae7914..6c7688b0a0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -37,7 +37,7 @@
     "@7polo/kity": "2.0.8",
     "@7polo/kityminder-core": "1.4.53",
     "@arco-design/web-vue": "^2.47.0",
-    "@arco-themes/vue-ms-theme-default": "^0.0.15",
+    "@arco-themes/vue-ms-theme-default": "^0.0.17",
     "@form-create/arco-design": "^3.1.21",
     "@vueuse/core": "^9.13.0",
     "ace-builds": "^1.22.0",
diff --git a/frontend/src/assets/svg/apitest.svg b/frontend/src/assets/svg/apitest.svg
new file mode 100644
index 0000000000..85338a6bf0
--- /dev/null
+++ b/frontend/src/assets/svg/apitest.svg
@@ -0,0 +1,74 @@
+<svg width="64" height="46" viewBox="0 0 64 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="64" height="46" rx="4" fill="url(#paint0_linear_1946_243856)"/>
+<g opacity="0.3" filter="url(#filter0_f_1946_243856)">
+<rect x="20" y="39" width="24" height="2" rx="1" fill="#811FA3"/>
+</g>
+<g filter="url(#filter1_d_1946_243856)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.3335 6.33344C18.2289 6.33344 17.3335 7.22887 17.3335 8.33344V33.6668C17.3335 34.7713 18.2289 35.6668 19.3335 35.6668H44.6668C45.7714 35.6668 46.6668 34.7713 46.6668 33.6668L46.6668 15.6668L37.3335 6.33344H19.3335Z" fill="#811FA3"/>
+<g filter="url(#filter2_i_1946_243856)">
+<path d="M17.333 23C17.333 21.8954 18.2284 21 19.333 21H44.6663C45.7709 21 46.6663 21.8954 46.6663 23V33.6667C46.6663 34.7712 45.7709 35.6667 44.6663 35.6667H19.333C18.2284 35.6667 17.333 34.7712 17.333 33.6667V23Z" fill="url(#paint1_linear_1946_243856)"/>
+</g>
+<g filter="url(#filter3_d_1946_243856)">
+<rect x="27" y="30" width="10" height="2.66667" rx="1.33333" fill="white"/>
+</g>
+<g filter="url(#filter4_d_1946_243856)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.3665 23.3665C20.8551 22.8778 21.6473 22.8778 22.1359 23.3665L25.8847 27.1153C26.3733 27.6039 26.3733 28.3961 25.8847 28.8847L22.1359 32.6335C21.6473 33.1222 20.8551 33.1222 20.3665 32.6335C19.8778 32.1449 19.8778 31.3527 20.3665 30.8641L21.8164 29.4142C22.5974 28.6332 22.5974 27.3668 21.8164 26.5858L20.3665 25.1359C19.8778 24.6473 19.8778 23.8551 20.3665 23.3665Z" fill="white"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.6976 10.7622C37.1007 10.3591 37.1007 9.70546 36.6976 9.30234C36.2945 8.89922 35.6409 8.89922 35.2378 9.30234L33.9387 10.6014C33.0853 10.1082 32.1713 10.0297 31.3856 10.1487C30.3931 10.2991 29.5065 10.7755 29.0442 11.2378L29.0442 11.2379L27.8829 12.3991C27.4798 12.8023 27.4798 13.4558 27.8829 13.859L32.141 18.117C32.3346 18.3106 32.5971 18.4194 32.8709 18.4194C33.1447 18.4194 33.4072 18.3106 33.6008 18.117L34.7621 16.9557L34.7621 16.9557C35.2244 16.4934 35.7008 15.6068 35.8512 14.6143C35.9702 13.8286 35.8917 12.9147 35.3986 12.0612L36.6976 10.7622ZM28.1815 16.5686C28.5846 16.1655 28.5846 15.5119 28.1815 15.1088C27.7783 14.7057 27.1248 14.7057 26.7216 15.1088L25.9031 15.9273L25.8588 15.8829C25.6652 15.6894 25.4026 15.5806 25.1289 15.5806C24.8551 15.5806 24.5925 15.6894 24.399 15.8829L23.2376 17.0443C22.7754 17.5066 22.299 18.3931 22.1486 19.3857C22.0725 19.8878 22.0771 20.4423 22.2191 21H30.4111C30.4494 20.6946 30.3513 20.3755 30.1169 20.141L30.0726 20.0968L30.8911 19.2783C31.2943 18.8752 31.2943 18.2216 30.8911 17.8185C30.488 17.4153 29.8344 17.4153 29.4313 17.8185L28.6128 18.637L27.363 17.3871L28.1815 16.5686Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_f_1946_243856" x="16" y="35" width="32" height="10" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_1946_243856"/>
+</filter>
+<filter id="filter1_d_1946_243856" x="16.333" y="6.33344" width="31.334" height="31.3333" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="0.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.505882 0 0 0 0 0.121569 0 0 0 0 0.639216 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1946_243856"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1946_243856" result="shape"/>
+</filter>
+<filter id="filter2_i_1946_243856" x="17.333" y="21" width="29.3335" height="14.6667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="0.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1946_243856"/>
+</filter>
+<filter id="filter3_d_1946_243856" x="26" y="30" width="12" height="4.66669" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="0.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.505882 0 0 0 0 0.121569 0 0 0 0 0.639216 0 0 0 0.24 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1946_243856"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1946_243856" result="shape"/>
+</filter>
+<filter id="filter4_d_1946_243856" x="19" y="23" width="8.25098" height="12" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="0.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.505882 0 0 0 0 0.121569 0 0 0 0 0.639216 0 0 0 0.24 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1946_243856"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1946_243856" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_1946_243856" x1="62.4941" y1="1.50001" x2="-31.3204" y2="32.2514" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F2E9F6"/>
+<stop offset="1" stop-color="#F9F4FA" stop-opacity="0.12"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1946_243856" x1="32.6663" y1="35.6667" x2="32.6663" y2="21" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.8"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/frontend/src/assets/svg/icons/promanger.svg b/frontend/src/assets/svg/promanger.svg
similarity index 100%
rename from frontend/src/assets/svg/icons/promanger.svg
rename to frontend/src/assets/svg/promanger.svg
diff --git a/frontend/src/components/pure/ms-alert/index.vue b/frontend/src/components/pure/ms-alert/index.vue
deleted file mode 100644
index 4139db27b0..0000000000
--- a/frontend/src/components/pure/ms-alert/index.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <a-alert v-bind="attrs" class="p-4" :class="`arco-alert-${type}`">
-    <div>
-      <slot name="content"></slot>
-    </div>
-  </a-alert>
-</template>
-
-<script setup lang="ts">
-  import { useAttrs } from 'vue';
-
-  const attrs = useAttrs();
-  defineProps<{
-    type: string;
-  }>();
-</script>
-
-<style scoped>
-  .arco-alert-primary {
-    border-color: rgb(var(--primary-5));
-    /* stylelint-disable-next-line color-function-notation */
-    background-color: rgba(var(--primary-5), 0.1);
-  }
-  .arco-alert-error {
-    border-color: rgb(var(--danger-6));
-    /* stylelint-disable-next-line color-function-notation */
-    background-color: rgba(var(--danger-6), 0.1);
-  }
-  .arco-alert-warning {
-    border-color: rgb(var(--warning-6));
-    /* stylelint-disable-next-line color-function-notation */
-    background-color: rgba(var(--warning-6), 0.1);
-  }
-  .arco-alert-success {
-    border-color: rgb(var(--success-6));
-    /* stylelint-disable-next-line color-function-notation */
-    background-color: rgba(var(--success-6), 0.1);
-  }
-</style>
diff --git a/frontend/src/components/pure/ms-alert/type.ts b/frontend/src/components/pure/ms-alert/type.ts
deleted file mode 100644
index b936901808..0000000000
--- a/frontend/src/components/pure/ms-alert/type.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface SlotContent {
-  title: string;
-  slotName: string;
-}
-export type SlotContentlist = SlotContent[];
diff --git a/frontend/src/views/system/pluginManager/components/SceneList.vue b/frontend/src/views/system/pluginManager/components/SceneList.vue
index 6530732442..303c69e9f8 100644
--- a/frontend/src/views/system/pluginManager/components/SceneList.vue
+++ b/frontend/src/views/system/pluginManager/components/SceneList.vue
@@ -7,7 +7,9 @@
       :class="{ 'ms-ls-row--active': item.isSelected }"
       @click="selectHandler(item)"
     >
-      <div class="ms-icon-list ml-4 mr-5" :class="`ms-icon-list--${item.svg}`"></div>
+      <div class="ms-icon-list ml-4 mr-5">
+        <svg-icon :width="'64px'" :height="'46px'" :name="item.svg" />
+      </div>
       <div class="flex flex-col justify-center">
         <div class="mb-1 font-medium">{{ t(item.name) }}</div>
         <div class="text-sm">{{ t(item.description) }}</div>
@@ -27,13 +29,13 @@
       name: 'system.plugin.interfaceTest',
       description: 'system.plugin.interfaceTestDescribe',
       isSelected: true,
-      svg: 'api',
+      svg: 'apitest',
     },
     {
       name: 'system.plugin.projectManger',
       description: 'system.plugin.projectMangerDescribe',
       isSelected: false,
-      svg: 'project',
+      svg: 'promanger',
     },
   ]);
 
@@ -46,16 +48,6 @@
 </script>
 
 <style scoped lang="less">
-  .ms-icon-list {
-    width: 48px;
-    height: 48px;
-    &--api {
-      background-image: url('@/assets/svg/icons/apitest.svg');
-    }
-    &--project {
-      background-image: url('@/assets/svg/icons/promanger.svg');
-    }
-  }
   .ms-ls-row {
     border-width: 1px;
     @apply flex flex-row items-center rounded border-solid py-2;
diff --git a/frontend/src/views/system/pluginManager/index.vue b/frontend/src/views/system/pluginManager/index.vue
index 016fc9b65b..293679036d 100644
--- a/frontend/src/views/system/pluginManager/index.vue
+++ b/frontend/src/views/system/pluginManager/index.vue
@@ -1,15 +1,13 @@
 /* stylelint-disable order/properties-order */
 <template>
   <div>
-    <MSAlert :closable="true" type="primary" :banner="false">
-      <template #content>
-        <div>
-          MeterSphereV2.10LTS版本支持DevOps、API导入、请求、项目管理、协议类型的插件，具体支持插件请
-          <a class="mx-1" href="javascript:;">查看表格</a>更多开源插件，请在此下载
-          <a class="mx-1" href="javascript:;">去下载 </a>
-        </div>
-      </template>
-    </MSAlert>
+    <a-alert type="info" :closable="true">
+      <div>
+        MeterSphereV2.10LTS版本支持DevOps、API导入、请求、项目管理、协议类型的插件，具体支持插件请
+        <a class="mx-1" href="javascript:;">查看表格</a>更多开源插件，请在此下载
+        <a class="mx-1" href="javascript:;">去下载 </a>
+      </div>
+    </a-alert>
     <div class="mt-4">
       <pluginTable />
     </div>
@@ -17,7 +15,6 @@
 </template>
 
 <script setup lang="ts">
-  import MSAlert from '@/components/pure/ms-alert/index.vue';
   import pluginTable from './components/pluginTable.vue';
 </script>