mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2026-01-27 08:38:15 +00:00
优化
This commit is contained in:
icssoa
parent
84467c896c
commit
01858011c9
@ -1,30 +1,32 @@
|
||||
<template>
|
||||
<div class="crud-demo">
|
||||
<el-tabs type="card" v-model="active" @tab-change="onTabChange">
|
||||
<el-tab-pane v-for="(a, ai) in list" :key="ai" :label="a.title" :name="a.title">
|
||||
<div class="group" v-for="(b, bi) in a.children" :key="bi">
|
||||
<p class="label"># {{ b.label }}</p>
|
||||
<el-scrollbar>
|
||||
<div class="crud-demo">
|
||||
<el-tabs type="card" v-model="active" @tab-change="onTabChange">
|
||||
<el-tab-pane v-for="(a, ai) in list" :key="ai" :label="a.title" :name="a.title">
|
||||
<div class="group" v-for="(b, bi) in a.children" :key="bi">
|
||||
<p class="label"># {{ b.label }}</p>
|
||||
|
||||
<el-row :gutter="10">
|
||||
<el-col
|
||||
v-for="(c, ci) in b.children"
|
||||
:key="ci"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="8"
|
||||
:lg="6"
|
||||
>
|
||||
<component :is="c" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<el-row :gutter="10">
|
||||
<el-col
|
||||
v-for="(c, ci) in b.children"
|
||||
:key="ci"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="8"
|
||||
:lg="6"
|
||||
>
|
||||
<component :is="c" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="demo-crud">
|
||||
import { ref, onActivated, getCurrentScope, toValue } from "vue";
|
||||
import { ref, onActivated } from "vue";
|
||||
|
||||
import CrudBase from "./components/crud/base.vue";
|
||||
import CrudAll from "./components/crud/all.vue";
|
||||
@ -202,12 +204,12 @@ onActivated(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.crud-demo {
|
||||
overflow-x: hidden;
|
||||
.el-scrollbar {
|
||||
background-color: var(--el-bg-color);
|
||||
}
|
||||
|
||||
.crud-demo {
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
:deep(.scope) {
|
||||
border-radius: 8px;
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
|
||||
&__wrapper {
|
||||
background-color: var(--el-bg-color);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.scope {
|
||||
|
||||
@ -1,114 +1,110 @@
|
||||
<template>
|
||||
<div class="plugins__wrapper">
|
||||
<el-scrollbar>
|
||||
<div class="plugins" @dragover="onDragover" @drop="onDrop">
|
||||
<el-tabs v-model="tab.active" type="card" @tab-change="tab.onChange">
|
||||
<el-tab-pane label="已安装插件" name="installed"> </el-tab-pane>
|
||||
<el-tab-pane label="插件市场" name="shop"> </el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-scrollbar class="plugins__wrapper">
|
||||
<div class="plugins" @dragover="onDragover" @drop="onDrop">
|
||||
<el-tabs v-model="tab.active" type="card" @tab-change="tab.onChange">
|
||||
<el-tab-pane label="已安装插件" name="installed"> </el-tab-pane>
|
||||
<el-tab-pane label="插件市场" name="shop"> </el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-row :gutter="10">
|
||||
<el-col
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="8"
|
||||
:lg="6"
|
||||
>
|
||||
<div class="scope">
|
||||
<div class="c">
|
||||
<el-icon class="set" @click="toSet(item)">
|
||||
<setting />
|
||||
</el-icon>
|
||||
<el-row :gutter="10">
|
||||
<el-col
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="8"
|
||||
:lg="6"
|
||||
>
|
||||
<div class="scope">
|
||||
<div class="c">
|
||||
<el-icon class="set" @click="toSet(item)">
|
||||
<setting />
|
||||
</el-icon>
|
||||
|
||||
<img class="logo" :src="'data:image/jpg;base64,' + item.logo" />
|
||||
<img class="logo" :src="'data:image/jpg;base64,' + item.logo" />
|
||||
|
||||
<div class="det">
|
||||
<div class="tag">
|
||||
<el-tag size="small" effect="dark">{{
|
||||
item.keyName
|
||||
}}</el-tag>
|
||||
<el-tag size="small" effect="dark" type="success"
|
||||
>v{{ item.version }}</el-tag
|
||||
>
|
||||
</div>
|
||||
<div class="det">
|
||||
<div class="tag">
|
||||
<el-tag size="small" effect="dark">{{ item.keyName }}</el-tag>
|
||||
<el-tag size="small" effect="dark" type="success"
|
||||
>v{{ item.version }}</el-tag
|
||||
>
|
||||
</div>
|
||||
|
||||
<p class="title">
|
||||
{{ item.name || "未知" }}
|
||||
</p>
|
||||
<p class="title">
|
||||
{{ item.name || "未知" }}
|
||||
</p>
|
||||
|
||||
<p class="desc">{{ item.description || "暂无描述" }}</p>
|
||||
<p class="desc">{{ item.description || "暂无描述" }}</p>
|
||||
|
||||
<div class="author">
|
||||
<span>{{ item.author }}：</span>
|
||||
<span>{{ item.updateTime }}</span>
|
||||
</div>
|
||||
<div class="author">
|
||||
<span>{{ item.author }}：</span>
|
||||
<span>{{ item.updateTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="f">
|
||||
<el-button round @click="toDetail(item)">详情</el-button>
|
||||
<el-button type="danger" round @click="toDel(item, index)"
|
||||
>卸载</el-button
|
||||
>
|
||||
|
||||
<cl-flex1 />
|
||||
|
||||
<cl-switch
|
||||
v-model="item.status"
|
||||
@change="onStatusChange(item)"
|
||||
></cl-switch>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<cl-upload :before-upload="onBeforeUpload" accept=".cool">
|
||||
<div class="scope is-add">
|
||||
<el-icon>
|
||||
<plus />
|
||||
</el-icon>
|
||||
</div>
|
||||
</cl-upload>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 详情预览 -->
|
||||
<cl-editor-preview
|
||||
:ref="setRefs('editorPreview')"
|
||||
name="wang"
|
||||
:show-btn="false"
|
||||
:title="`${info?.name} v${info?.version} 说明文档`"
|
||||
>
|
||||
<template #prepend>
|
||||
<div class="info-header">
|
||||
<span>作者：{{ info?.author }}</span>
|
||||
<span>更新时间：{{ info?.updateTime }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</cl-editor-preview>
|
||||
|
||||
<!-- 设置 -->
|
||||
<cl-form ref="Form">
|
||||
<template #slot-upload>
|
||||
<cl-row>
|
||||
<cl-upload-space
|
||||
:show-list="false"
|
||||
:multiple="false"
|
||||
text="选择文件"
|
||||
@confirm="onFileConfirm"
|
||||
/>
|
||||
|
||||
<el-text type="warning" :style="{ marginLeft: '10px' }"
|
||||
>选择后会在光标后插入文件链接</el-text
|
||||
<div class="f">
|
||||
<el-button round @click="toDetail(item)">详情</el-button>
|
||||
<el-button type="danger" round @click="toDel(item, index)"
|
||||
>卸载</el-button
|
||||
>
|
||||
</cl-row>
|
||||
</template>
|
||||
</cl-form>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
<cl-flex1 />
|
||||
|
||||
<cl-switch
|
||||
v-model="item.status"
|
||||
@change="onStatusChange(item)"
|
||||
></cl-switch>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<cl-upload :before-upload="onBeforeUpload" accept=".cool">
|
||||
<div class="scope is-add">
|
||||
<el-icon>
|
||||
<plus />
|
||||
</el-icon>
|
||||
</div>
|
||||
</cl-upload>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 详情预览 -->
|
||||
<cl-editor-preview
|
||||
:ref="setRefs('editorPreview')"
|
||||
name="wang"
|
||||
:show-btn="false"
|
||||
:title="`${info?.name} v${info?.version} 说明文档`"
|
||||
>
|
||||
<template #prepend>
|
||||
<div class="info-header">
|
||||
<span>作者：{{ info?.author }}</span>
|
||||
<span>更新时间：{{ info?.updateTime }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</cl-editor-preview>
|
||||
|
||||
<!-- 设置 -->
|
||||
<cl-form ref="Form">
|
||||
<template #slot-upload>
|
||||
<cl-row>
|
||||
<cl-upload-space
|
||||
:show-list="false"
|
||||
:multiple="false"
|
||||
text="选择文件"
|
||||
@confirm="onFileConfirm"
|
||||
/>
|
||||
|
||||
<el-text type="warning" :style="{ marginLeft: '10px' }"
|
||||
>选择后会在光标后插入文件链接</el-text
|
||||
>
|
||||
</cl-row>
|
||||
</template>
|
||||
</cl-form>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="helper-plugins-serve">
|
||||
|
||||
@ -1,80 +1,76 @@
|
||||
<template>
|
||||
<div class="plugins__wrapper">
|
||||
<el-scrollbar>
|
||||
<div class="plugins">
|
||||
<div class="header">
|
||||
<el-tabs v-model="tab.active" type="card" @tab-change="tab.onChange">
|
||||
<el-tab-pane label="已安装插件" name="installed"> </el-tab-pane>
|
||||
<el-tab-pane label="插件市场" name="shop"> </el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<el-scrollbar class="plugins__wrapper">
|
||||
<div class="plugins">
|
||||
<div class="header">
|
||||
<el-tabs v-model="tab.active" type="card" @tab-change="tab.onChange">
|
||||
<el-tab-pane label="已安装插件" name="installed"> </el-tab-pane>
|
||||
<el-tab-pane label="插件市场" name="shop"> </el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<el-row :gutter="10">
|
||||
<el-col
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="8"
|
||||
:lg="6"
|
||||
>
|
||||
<div class="scope">
|
||||
<div class="c">
|
||||
<img class="logo" :src="item.logo" />
|
||||
<div class="container">
|
||||
<el-row :gutter="10">
|
||||
<el-col
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="8"
|
||||
:lg="6"
|
||||
>
|
||||
<div class="scope">
|
||||
<div class="c">
|
||||
<img class="logo" :src="item.logo" />
|
||||
|
||||
<div class="det">
|
||||
<div class="tag">
|
||||
<el-tag size="small" effect="dark">{{
|
||||
item.name
|
||||
}}</el-tag>
|
||||
<el-tag size="small" effect="dark" type="success"
|
||||
>v{{ item.version || "1.0.0" }}</el-tag
|
||||
>
|
||||
</div>
|
||||
<div class="det">
|
||||
<div class="tag">
|
||||
<el-tag size="small" effect="dark">{{ item.name }}</el-tag>
|
||||
<el-tag size="small" effect="dark" type="success"
|
||||
>v{{ item.version || "1.0.0" }}</el-tag
|
||||
>
|
||||
</div>
|
||||
|
||||
<p class="title">
|
||||
{{ item.label || "未知" }}
|
||||
</p>
|
||||
<p class="title">
|
||||
{{ item.label || "未知" }}
|
||||
</p>
|
||||
|
||||
<p class="desc">{{ item.description || "暂无描述" }}</p>
|
||||
<p class="desc">{{ item.description || "暂无描述" }}</p>
|
||||
|
||||
<div class="author">
|
||||
<span>{{ item.author || "Ta" }}：</span>
|
||||
<span>{{ item.updateTime || "2024-01-01" }}</span>
|
||||
</div>
|
||||
<div class="author">
|
||||
<span>{{ item.author || "Ta" }}：</span>
|
||||
<span>{{ item.updateTime || "2024-01-01" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="f">
|
||||
<cl-flex1 />
|
||||
<el-button
|
||||
round
|
||||
@click="det.open(item)"
|
||||
v-if="item.demo && !isEmpty(item.demo)"
|
||||
>示例</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<cl-dialog v-model="det.visible" :title="det.title" width="60%">
|
||||
<el-tabs v-model="det.active" type="card" @tab-change="tab.onChange">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in det.tabs"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:name="index"
|
||||
>
|
||||
<component :is="item.component" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</cl-dialog>
|
||||
<div class="f">
|
||||
<cl-flex1 />
|
||||
<el-button
|
||||
round
|
||||
@click="det.open(item)"
|
||||
v-if="item.demo && !isEmpty(item.demo)"
|
||||
>示例</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
<cl-dialog v-model="det.visible" :title="det.title" width="60%">
|
||||
<el-tabs v-model="det.active" type="card" @tab-change="tab.onChange">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in det.tabs"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:name="index"
|
||||
>
|
||||
<component :is="item.component" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</cl-dialog>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="helper-plugins-vue">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user