perf: create application modify style

Author: wangdan-fit2cloud

ui/src/components/card-box/index.vue

@@ -2,7 +2,7 @@
   <el-card shadow="hover" class="card-box" @mouseenter="cardEnter()" @mouseleave="cardLeave()">
     <div class="card-header">
       <slot name="header">
-        <div class="title flex" :class="slots.subTitle ? '' : 'align-center'">
+        <div class="title flex" :class="$slots.subTitle ? '' : 'align-center'">
           <slot name="icon">
             <AppAvatar v-if="showIcon" class="mr-12 avatar-blue" shape="square" :size="32">
               <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
@@ -19,7 +19,7 @@
     </div>
     <div
       class="description break-all"
-      :class="slots.subTitle ? 'mt-24' : 'mt-12'"
+      :class="$slots.subTitle ? 'mt-24' : 'mt-12'"
       v-if="$slots.description || description"
     >
       <slot name="description">
@@ -40,7 +40,6 @@
 <script setup lang="ts">
 import { ref, useSlots } from 'vue'
 
-const slots = useSlots()
 defineOptions({ name: 'CardBox' })
 const props = withDefaults(
   defineProps<{

ui/src/components/icons/index.ts

@@ -948,6 +948,27 @@ export const iconMap: any = {
       ])
     }
   },
+  'app-import': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 16 16',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M8.11532 8.65984L9.55945 10.0713C9.69264 10.2015 9.69264 10.4125 9.55945 10.5427L9.07714 11.0141C8.94395 11.1443 8.72801 11.1443 8.59482 11.0141L6.42439 8.89279L5.94207 8.42139C5.6757 8.16104 5.6757 7.73893 5.94207 7.47858L8.59482 4.88585C8.72801 4.75568 8.94395 4.75568 9.07714 4.88585L9.55945 5.35726C9.69264 5.48743 9.69264 5.69849 9.55945 5.82866L7.99017 7.36244L14.3241 7.33506C14.3251 7.33505 14.3261 7.33505 14.327 7.33506C14.5154 7.33582 14.6675 7.48567 14.6667 7.66977L14.664 8.30105C14.6632 8.48403 14.5117 8.63219 14.3245 8.633L8.11532 8.65984ZM10.5417 2.66665H2.69754V13.3333H10.5417C10.73 13.3333 10.8827 13.4826 10.8827 13.6666V14.3333C10.8827 14.5174 10.73 14.6666 10.5417 14.6666H2.01544C1.63873 14.6666 1.33334 14.3682 1.33334 14V1.99998C1.33334 1.63179 1.63873 1.33331 2.01544 1.33331H10.5417C10.73 1.33331 10.8827 1.48255 10.8827 1.66665V2.33331C10.8827 2.51741 10.73 2.66665 10.5417 2.66665Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
   'app-fitview': {
     iconReader: () => {
       return h('i', [
@@ -1328,5 +1349,29 @@ export const iconMap: any = {
         )
       ])
     }
-  }
+  },
+  'app-add-application': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 16 16',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M3.33333 2.00002H10.6667V3.67969C10.6667 3.76809 10.7018 3.85288 10.7643 3.91539C10.8268 3.9779 10.9116 4.01302 11 4.01302H12.6667V8.66669H14V3.27702C14.0001 3.10027 13.9299 2.93074 13.805 2.80569L11.862 0.86202C11.8001 0.800071 11.7265 0.750933 11.6456 0.717417C11.5647 0.6839 11.4779 0.666662 11.3903 0.666687H2.66667C2.48986 0.666687 2.32029 0.736925 2.19526 0.861949C2.07024 0.986973 2 1.15654 2 1.33335V14.6667C2 14.8435 2.07024 15.0131 2.19526 15.1381C2.32029 15.2631 2.48986 15.3334 2.66667 15.3334H8V14H3.33333V2.00002Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M11.6667 10C11.4826 10 11.3333 10.1492 11.3333 10.3333V12H9.66668C9.48258 12 9.33334 12.1492 9.33334 12.3333V13C9.33334 13.1841 9.48258 13.3333 9.66668 13.3333H11.3333V15C11.3333 15.1841 11.4826 15.3333 11.6667 15.3333H12.3333C12.5174 15.3333 12.6667 15.1841 12.6667 15V13.3333H14.3333C14.5174 13.3333 14.6667 13.1841 14.6667 13V12.3333C14.6667 12.1492 14.5174 12 14.3333 12H12.6667V10.3333C12.6667 10.1492 12.5174 10 12.3333 10H11.6667Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
 }

ui/src/views/application/index.vue

@@ -50,10 +50,31 @@
       >
         <el-row :gutter="15">
           <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb-16">
-            <CardAdd
+            <!-- <CardAdd
               :title="$t('views.application.applicationList.card.createApplication')"
               @click="openCreateDialog"
-            />
+            /> -->
+            <el-card shadow="hover" class="application-card-add" style="--el-card-padding: 8px">
+              <div class="card-add-button flex align-center cursor p-8" @click="openCreateDialog">
+                <AppIcon iconName="app-add-application" class="mr-8"></AppIcon>
+                创建应用
+              </div>
+              <el-divider style="margin: 8px 0" />
+              <el-upload
+                :file-list="[]"
+                action="#"
+                multiple
+                :auto-upload="false"
+                :show-file-list="false"
+                :limit="1"
+                :on-change="(file: any, fileList: any) => importApplication(file)"
+                class="card-add-button"
+              >
+                <div class="flex align-center cursor p-8">
+                  <AppIcon iconName="app-import" class="mr-8"></AppIcon>导入应用
+                </div>
+              </el-upload>
+            </el-card>
           </el-col>
           <el-col
             :xs="24"
@@ -371,6 +392,30 @@ onMounted(() => {
 })
 </script>
 <style lang="scss" scoped>
+.application-card-add {
+  width: 100%;
+  font-size: 14px;
+  min-height: var(--card-min-height);
+  border: 1px dashed var(--el-border-color);
+  background: var(--el-disabled-bg-color);
+  border-radius: 8px;
+  box-sizing: border-box;
+  &:hover {
+    border: 1px solid var(--el-card-bg-color);
+    background-color: var(--el-card-bg-color);
+  }
+  .card-add-button {
+    &:hover {
+      border-radius: 4px;
+      background: var(--app-text-color-light-1);
+    }
+    :deep(.el-upload) {
+      display: block;
+      width: 100%;
+      color: var(--el-text-color-regular);
+    }
+  }
+}
 .application-card {
   .status-tag {
     position: absolute;