perf: 添加应用市场链接 (#3292)

* perf: 添加应用市场链接

* perf: 修改版本号

* perf: 修改高度

---------

Co-authored-by: ibuler <ibuler@qq.com>

src/components/Tooltip/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div ref="boxDom" class="tooltip">
     <el-tooltip
-      :disabled="showTooltip"
       :content="content"
-      :placement="placement"
+      :disabled="showTooltip"
       :effect="effect"
+      :placement="placement"
     >
       <div class="multi-line-limit">{{ content }}</div>
     </el-tooltip>
@@ -56,12 +56,12 @@ export default {
       this.showTooltip = boxWidth * this.line > textWidth
     },
     setUI() {
-      this.$refs.boxDom.style.setProperty('--line', `${this.line * 15}px`)
+      this.$refs.boxDom.style.setProperty('--line', `${this.line * 18}px`)
     }
   }
 }
 </script>
-<style scoped lang="less">
+<style lang="less" scoped>
   .tooltip {
     margin-bottom: 10px;
   }

src/i18n/langs/en.json

@@ -1405,6 +1405,7 @@
     "NoPermission": "No permission"
   },
   "terminal": {
+    "Marketplace": "Marketplace",
     "Author": "Author",
     "Uploading": "File uploading",
     "UploadSucceed": "Upload succeed",

src/i18n/langs/ja.json

@@ -1400,6 +1400,7 @@
     "NoPermission": "権限なし"
   },
   "terminal": {
+    "Marketplace": "マーケットプレイス",
     "Author": "作者",
     "Uploading": "ファイルのアップロード",
     "UploadSucceed": "アップロード成功",

src/i18n/langs/zh.json

@@ -1390,6 +1390,7 @@
     "NoPermission": "暂无权限"
   },
   "terminal": {
+    "Marketplace": "应用市场",
     "Author": "作者",
     "BasePort": "监听端口",
     "DatabasePort": "数据库协议端口",

src/views/settings/Applet/Applet/AppletDetail/Detail.vue

@@ -1,14 +1,14 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="14" :sm="24">
+    <el-col :md="8" :sm="24">
+      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
+    </el-col>
+    <el-col :md="16" :sm="24">
       <IBox title="README">
         <vue-markdown v-if="object.readme" :source="object.readme" />
         <span v-else>{{ $tc('common.NoData') }}</span>
       </IBox>
     </el-col>
-    <el-col :md="10" :sm="24">
-      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
-    </el-col>
   </el-row>
 </template>
 

src/views/settings/Applet/Applet/AppletList.vue

@@ -26,10 +26,20 @@ export default {
         onCreate: () => {
           this.uploadDialogVisible = true
         },
+        createTitle: this.$t('common.Upload'),
         searchConfig: {
           getUrlQuery: false,
           exclude: ['version']
         },
+        extraActions: [
+          {
+            title: this.$t('terminal.Marketplace'),
+            icon: 'el-icon-shopping-bag-1',
+            callback: () => {
+              window.open('https://apps.fit2cloud.com/jumpserver')
+            }
+          }
+        ],
         detailRoute: 'AppletDetail',
         hasExport: false,
         hasImport: false,

src/views/settings/Applet/Applet/components/CardTable.vue

@@ -20,10 +20,15 @@
                 <img :src="d.icon" class="image">
               </el-col>
               <el-col :span="16" style="text-align: left; padding: 5px 0">
-                <div class="one-line"><b>{{ d.display_name }}</b></div>
+                <div class="one-line">
+                  <b>{{ d.display_name }}</b>
+                  <el-tag size="mini" style="margin-left: 5px">{{ d.version }}</el-tag>
+                </div>
                 <el-divider class="my-divider" />
                 <Tooltip :content="d.comment" class="comment" />
-                <el-tag v-for="tag of d.tags" :key="tag" size="mini"> {{ tag }}</el-tag>
+                <el-tag v-for="tag of d.tags" :key="tag" size="mini">
+                  {{ capitalize(tag) }}
+                </el-tag>
               </el-col>
             </el-row>
           </el-card>
@@ -87,11 +92,13 @@ export default {
       return this.tableConfig.url || ''
     }
   },
-  watch: {},
   mounted() {
     this.getList()
   },
   methods: {
+    capitalize(str) {
+      return str.charAt(0).toUpperCase() + str.slice(1)
+    },
     getIcon(status) {
       let iconClass = 'fa-check-circle'
       if (status === false) {