From d3d20ac2cd81681ee6e7c5ea928f8dc3c7993f90 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 25 Dec 2024 11:49:34 +0800
Subject: [PATCH] perf: create application modify style

---
 ui/src/components/card-box/index.vue |  5 ++-
 ui/src/components/icons/index.ts     | 47 +++++++++++++++++++++++++-
 ui/src/views/application/index.vue   | 49 ++++++++++++++++++++++++++--
 3 files changed, 95 insertions(+), 6 deletions(-)

diff --git a/ui/src/components/card-box/index.vue b/ui/src/components/card-box/index.vue
index b753e3160..4ebfa0a05 100644
--- a/ui/src/components/card-box/index.vue
+++ b/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<{
diff --git a/ui/src/components/icons/index.ts b/ui/src/components/icons/index.ts
index adbc6d8db..d9908c110 100644
--- a/ui/src/components/icons/index.ts
+++ b/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'
+            })
+          ]
+        )
+      ])
+    }
+  },
 }
diff --git a/ui/src/views/application/index.vue b/ui/src/views/application/index.vue
index 2df89f00e..c4b5ecf90 100644
--- a/ui/src/views/application/index.vue
+++ b/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;