新增插件管理

src/views/system/application/index.vue

@@ -7,11 +7,13 @@
             </div>
         </div>
         <div class="flex-1 dis-f">
-            <div class="hid-box" :class="{ 'tab-info-box-hid': activeName != 'manage' }">
+            <div class="hid-box tran-width" :class="{ 'tab-info-box-hid': activeName != 'manage' }">
-                <div class="tran-width tab-info-box" :class="{ 'tab-info-box-hid': activeName != 'manage' }">1</div>
+                <div class="tab-info-box">
+                    <setting-plugin></setting-plugin>
                 </div>
-            <div class="hid-box" :class="{ 'tab-info-box-hid': activeName != 'market' }">
+            </div>
-                <div class="tran-width tab-info-box">
+            <div class="hid-box tran-width" :class="{ 'tab-info-box-hid': activeName != 'market' }">
+                <div class="tab-info-box">
                     <plugin-market></plugin-market>
                 </div>
             </div>
@@ -21,6 +23,7 @@
 
 <script>
 import pluginMarket from './pluginMarket.vue';
+import SettingPlugin from './settingPlugin.vue';
 export default {
     data() {
         return {
@@ -29,7 +32,8 @@ export default {
         }
     },
     components: {
-        pluginMarket
+    pluginMarket,
+    SettingPlugin
 },
     mounted() {
 
@@ -65,6 +69,8 @@ export default {
 .hid-box{
     width:100%;
     overflow: hidden;
+    position: relative;
+    overflow-y: scroll;
 }
 
 .tab-list-box {
@@ -105,7 +111,9 @@ export default {
 
 .tab-info-box {
     min-width: 100%;
-    height: 100%;
+    min-height: 100%;
-    overflow: hidden;
     background: #fff;
+    position: absolute;
+    top:0;
+    left:0;
 }</style>

src/views/system/application/pluginBox.vue

@@ -0,0 +1,105 @@
+<template>
+    <div class="tab-box dis-f al-item" @click="props.installPlugin" :class="[
+        props.windowType === 1 ? 'tab-box-two' : props.windowType === 2 ? 'tab-box-one' : '',
+        props.windowType === 1 ? ((props.tabI + 1) % 2) ? 'mg-r-25' : '' :
+        props.windowType === 2 ? '' : ((props.tabI + 1) % 3) ? 'mg-r-25' : '']">
+        <img src="" class="img" alt="">
+        <div class="info-box">
+            <div class="title">
+                123
+            </div>
+            <div class="tag-box">
+                <el-tag class="tag-mg" type="danger" v-for="(item, i) in 5" :key="i">Tag {{ item }}</el-tag>
+            </div>
+            <div class="info-text">
+                111111111111111111111111111111111111111
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue'
+let props = defineProps({
+    item: Object,
+    installPlugin:Function,
+    windowType:Number,
+    tabI:Number
+})
+</script>
+
+<style scoped>
+.dis-f {
+    display: flex;
+}
+.al-item {
+    align-items: center;
+}
+.mg-r-25 {
+    margin-right: 25px;
+}
+
+.tab-box .tag-box {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 5px 0;
+}
+
+.tab-box .tag-box .tag-mg {
+    margin: 0 5px 5px 0
+}
+
+.tab-box .img {
+    width: 48px;
+    height: 48px;
+    margin-right: 16px;
+    border-radius: 10px;
+}
+
+.tab-box .info-box {
+    flex: 0.9;
+    overflow: hidden;
+}
+
+.tab-box .info-box .title {
+    color: #141e31;
+    flex-shrink: 1;
+    font-size: 16px;
+    font-weight: 500;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.tab-box .info-box .info-text {
+    color: #838892;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+}
+
+.tab-box {
+    background: #fff;
+    border: 1px solid #ebecee;
+    border-radius: 6px;
+    -webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .06);
+    cursor: pointer;
+    margin-bottom: 25px;
+    padding: 16px;
+    position: relative;
+    -webkit-transition: all .2s ease;
+    transition: all .2s ease;
+    width: calc(33.33333% - 16.7px);
+}
+
+.tab-box:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 10px 12px 0 rgba(0, 0, 0, .1);
+}
+</style>

src/views/system/application/pluginMarket.vue

@@ -3,7 +3,8 @@
         <div class="pop-box" v-show="popShow">
             <pop-info :showPop="installPlugin"></pop-info>
         </div>
-        <div class="tab-box dis-f al-item" @click="installPlugin" v-for="(item, i) in list" :key="i" :class="[
+        <plugin-box :installPlugin="installPlugin" :windowType="windowType" :tabI="i" :item="item" v-for="(item, i) in list" :key="i"></plugin-box>
+        <!-- <div class="tab-box dis-f al-item" @click="installPlugin" v-for="(item, i) in list" :key="i" :class="[
             windowType === 1 ? 'tab-box-two' : windowType === 2 ? 'tab-box-one' : '',
             windowType === 1 ? ((i + 1) % 2) ? 'mg-r-25' : '' :
                 windowType === 2 ? '' : ((i + 1) % 3) ? 'mg-r-25' : '']">
@@ -19,15 +20,16 @@
                     111111111111111111111111111111111111111
                 </div>
             </div>
-        </div>
+        </div> -->
     </div>
 </template>
 
 <script setup>
 import { ref, onMounted, onUnmounted, nextTick } from 'vue'
 import popInfo from './popInfo.vue'
+import PluginBox from './pluginBox.vue';
 let windowType = ref(0)
-let list = ref([1, 2, 3, 4, 5, 6, 7, 8, 9])
+let list = ref([1, 2, 3, 4, 5, 6, 7, 8, 9,1,2,4,5,6,8])
 let tabBox = ref(null)
 let popShow = ref(false)
 let resize
@@ -35,10 +37,9 @@ let resize
 let setWindowType = () => {
     resize = new ResizeObserver((e) => {
         let width = e[0].contentRect.width
-        console.log(width)
         windowType.value = width <= 800 && width > 500 ? 1 : width <= 500 ? 2 : 0
     })
-    resize.observe(tabBox.value)
+    tabBox.value&&resize.observe(tabBox.value)
 }
 
 //安装插件

src/views/system/application/popInfo.vue

@@ -264,6 +264,7 @@ img{
     background: #fff;
     width: 100%;
     flex-direction: column;
+    min-width:1200px;
 }
 
 .info-box .title {

src/views/system/application/settingPlugin.vue

@@ -0,0 +1,218 @@
+<template>
+    <div class="dis-f warp pd-15 pos-r" ref="tabBox">
+        <el-table :data="data" style="width: 100%">
+            <el-table-column label="插件" width="500" class="customize-overlay">
+                <template #default="scope">
+                    <div class="tab-box dis-f al-item">
+                        <img src="" class="img" alt="">
+                        <div class="info-box">
+                            <div class="title">
+                                {{ scope.row.title }}
+                            </div>
+                            <div class="info-text">
+                                111111111111111111111111111111111111111
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column label="版本" width="180" class="customize-overlay">
+                <template #default="scope">
+                    <div>type: {{ scope.row.type }}</div>
+                </template>
+            </el-table-column>
+            <el-table-column label="状态" class="customize-overlay">
+                <template #default="scope">
+                    <el-switch v-model="scope.row.switch" />
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" class="customize-overlay">
+                <template #default="scope">
+                    <div class="tool-box dis-f jus-bet al-item">
+                        <el-icon @click="open(scope.$index)">
+                            <el-icon-delete />
+                        </el-icon>
+                        <el-icon style="margin-left:10px">
+                            <el-icon-setting />
+                        </el-icon>
+                    </div>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+let data = ref([
+    { title: 1, type: 1, switch: false },
+    { title: 2, type: 1, switch: false },
+    { title: 3, type: 1, switch: false },
+    { title: 4, type: 1, switch: false },
+    { title: 5, type: 1, switch: false },
+    { title: 6, type: 1, switch: false },
+    { title: 6, type: 1, switch: false },
+    { title: 6, type: 1, switch: false },
+    { title: 6, type: 1, switch: false },
+    { title: 6, type: 1, switch: false }])
+
+let deleteTab = (id) => {
+    data.value.splice(id, 1)
+}
+
+const open = (id) => {
+    ElMessageBox.confirm(
+        '确认删除该插件吗?',
+        'Warning',
+        {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'warning',
+        }
+    )
+        .then(() => {
+            deleteTab(id)
+            ElMessage({
+                type: 'success',
+                message: '删除成功',
+            })
+        })
+        .catch(() => {
+            ElMessage({
+                type: 'info',
+                message: '取消',
+            })
+        })
+}
+</script>
+
+<style scoped>
+.dis-f {
+    display: flex;
+}
+
+.flex-1 {
+    flex: 1;
+}
+
+.al-item {
+    align-items: center;
+}
+
+.warp {
+    flex-wrap: wrap;
+}
+
+.pd-15 {
+    padding: 15px;
+}
+
+.pos-r {
+    position: relative;
+}
+
+.tab-box .tag-box .tag-mg {
+    margin: 0 5px 5px 0
+}
+
+.tab-box .img {
+    width: 48px;
+    height: 48px;
+    margin-right: 16px;
+    border-radius: 10px;
+}
+
+.tab-box .info-box {
+    flex: 0.9;
+    overflow: hidden;
+}
+
+.tab-box .info-box .title {
+    color: #141e31;
+    flex-shrink: 1;
+    font-size: 16px;
+    font-weight: 500;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.tab-box .info-box .info-text {
+    color: #838892;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+}
+
+.tab-box {
+    background: transparent;
+    border-radius: 6px;
+    cursor: pointer;
+    padding: 16px;
+    position: relative;
+    -webkit-transition: all .2s ease;
+    transition: all .2s ease;
+    width: 100%
+}
+
+.tool-box {
+    font-size: 20px;
+}
+
+.customize-overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 666;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.9);
+    cursor: move;
+}
+
+.customize-overlay label {
+    background: var(--el-color-primary);
+    color: #fff;
+    height: 40px;
+    padding: 0 30px;
+    border-radius: 40px;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: move;
+}
+
+.customize-overlay label i {
+    margin-right: 15px;
+    font-size: 24px;
+}
+
+.customize-overlay .close {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+}
+
+.draggable-box {
+    height: 100%;
+    width: 100%;
+    display: contents;
+}
+
+.customize-overlay .close:focus,
+.customize-overlay .close:hover {
+    background: var(--el-button-hover-color);
+    color: var(--el-color-danger);
+}
+</style>