mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2026-02-21 20:20:26 +00:00
优化
This commit is contained in:
icssoa
parent
84467c896c
commit
01858011c9
@ -1,30 +1,32 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="crud-demo">
|
<el-scrollbar>
|
||||||
<el-tabs type="card" v-model="active" @tab-change="onTabChange">
|
<div class="crud-demo">
|
||||||
<el-tab-pane v-for="(a, ai) in list" :key="ai" :label="a.title" :name="a.title">
|
<el-tabs type="card" v-model="active" @tab-change="onTabChange">
|
||||||
<div class="group" v-for="(b, bi) in a.children" :key="bi">
|
<el-tab-pane v-for="(a, ai) in list" :key="ai" :label="a.title" :name="a.title">
|
||||||
<p class="label"># {{ b.label }}</p>
|
<div class="group" v-for="(b, bi) in a.children" :key="bi">
|
||||||
|
<p class="label"># {{ b.label }}</p>
|
||||||
|
|
||||||
<el-row :gutter="10">
|
<el-row :gutter="10">
|
||||||
<el-col
|
<el-col
|
||||||
v-for="(c, ci) in b.children"
|
v-for="(c, ci) in b.children"
|
||||||
:key="ci"
|
:key="ci"
|
||||||
:xs="24"
|
:xs="24"
|
||||||
:sm="12"
|
:sm="12"
|
||||||
:md="8"
|
:md="8"
|
||||||
:lg="6"
|
:lg="6"
|
||||||
>
|
>
|
||||||
<component :is="c" />
|
<component :is="c" />
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
|
</el-scrollbar>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup name="demo-crud">
|
<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 CrudBase from "./components/crud/base.vue";
|
||||||
import CrudAll from "./components/crud/all.vue";
|
import CrudAll from "./components/crud/all.vue";
|
||||||
@ -202,12 +204,12 @@ onActivated(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.crud-demo {
|
.el-scrollbar {
|
||||||
overflow-x: hidden;
|
|
||||||
background-color: var(--el-bg-color);
|
background-color: var(--el-bg-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.crud-demo {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
:deep(.scope) {
|
:deep(.scope) {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
|||||||
@ -3,7 +3,6 @@
|
|||||||
|
|
||||||
&__wrapper {
|
&__wrapper {
|
||||||
background-color: var(--el-bg-color);
|
background-color: var(--el-bg-color);
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.scope {
|
.scope {
|
||||||
|
|||||||
@ -1,114 +1,110 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="plugins__wrapper">
|
<el-scrollbar class="plugins__wrapper">
|
||||||
<el-scrollbar>
|
<div class="plugins" @dragover="onDragover" @drop="onDrop">
|
||||||
<div class="plugins" @dragover="onDragover" @drop="onDrop">
|
<el-tabs v-model="tab.active" type="card" @tab-change="tab.onChange">
|
||||||
<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="installed"> </el-tab-pane>
|
<el-tab-pane label="插件市场" name="shop"> </el-tab-pane>
|
||||||
<el-tab-pane label="插件市场" name="shop"> </el-tab-pane>
|
</el-tabs>
|
||||||
</el-tabs>
|
|
||||||
|
|
||||||
<el-row :gutter="10">
|
<el-row :gutter="10">
|
||||||
<el-col
|
<el-col
|
||||||
v-for="(item, index) in list"
|
v-for="(item, index) in list"
|
||||||
:key="index"
|
:key="index"
|
||||||
:xs="24"
|
:xs="24"
|
||||||
:sm="12"
|
:sm="12"
|
||||||
:md="8"
|
:md="8"
|
||||||
:lg="6"
|
:lg="6"
|
||||||
>
|
>
|
||||||
<div class="scope">
|
<div class="scope">
|
||||||
<div class="c">
|
<div class="c">
|
||||||
<el-icon class="set" @click="toSet(item)">
|
<el-icon class="set" @click="toSet(item)">
|
||||||
<setting />
|
<setting />
|
||||||
</el-icon>
|
</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="det">
|
||||||
<div class="tag">
|
<div class="tag">
|
||||||
<el-tag size="small" effect="dark">{{
|
<el-tag size="small" effect="dark">{{ item.keyName }}</el-tag>
|
||||||
item.keyName
|
<el-tag size="small" effect="dark" type="success"
|
||||||
}}</el-tag>
|
>v{{ item.version }}</el-tag
|
||||||
<el-tag size="small" effect="dark" type="success"
|
>
|
||||||
>v{{ item.version }}</el-tag
|
</div>
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="title">
|
<p class="title">
|
||||||
{{ item.name || "未知" }}
|
{{ item.name || "未知" }}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p class="desc">{{ item.description || "暂无描述" }}</p>
|
<p class="desc">{{ item.description || "暂无描述" }}</p>
|
||||||
|
|
||||||
<div class="author">
|
<div class="author">
|
||||||
<span>{{ item.author }}：</span>
|
<span>{{ item.author }}：</span>
|
||||||
<span>{{ item.updateTime }}</span>
|
<span>{{ item.updateTime }}</span>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<el-col :xs="24" :sm="12" :md="8" :lg="6">
|
<div class="f">
|
||||||
<cl-upload :before-upload="onBeforeUpload" accept=".cool">
|
<el-button round @click="toDetail(item)">详情</el-button>
|
||||||
<div class="scope is-add">
|
<el-button type="danger" round @click="toDel(item, index)"
|
||||||
<el-icon>
|
>卸载</el-button
|
||||||
<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-flex1 />
|
||||||
</cl-form>
|
|
||||||
</div>
|
<cl-switch
|
||||||
</el-scrollbar>
|
v-model="item.status"
|
||||||
</div>
|
@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>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup name="helper-plugins-serve">
|
<script lang="ts" setup name="helper-plugins-serve">
|
||||||
|
|||||||
@ -1,80 +1,76 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="plugins__wrapper">
|
<el-scrollbar class="plugins__wrapper">
|
||||||
<el-scrollbar>
|
<div class="plugins">
|
||||||
<div class="plugins">
|
<div class="header">
|
||||||
<div class="header">
|
<el-tabs v-model="tab.active" type="card" @tab-change="tab.onChange">
|
||||||
<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="installed"> </el-tab-pane>
|
<el-tab-pane label="插件市场" name="shop"> </el-tab-pane>
|
||||||
<el-tab-pane label="插件市场" name="shop"> </el-tab-pane>
|
</el-tabs>
|
||||||
</el-tabs>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<el-row :gutter="10">
|
<el-row :gutter="10">
|
||||||
<el-col
|
<el-col
|
||||||
v-for="(item, index) in list"
|
v-for="(item, index) in list"
|
||||||
:key="index"
|
:key="index"
|
||||||
:xs="24"
|
:xs="24"
|
||||||
:sm="12"
|
:sm="12"
|
||||||
:md="8"
|
:md="8"
|
||||||
:lg="6"
|
:lg="6"
|
||||||
>
|
>
|
||||||
<div class="scope">
|
<div class="scope">
|
||||||
<div class="c">
|
<div class="c">
|
||||||
<img class="logo" :src="item.logo" />
|
<img class="logo" :src="item.logo" />
|
||||||
|
|
||||||
<div class="det">
|
<div class="det">
|
||||||
<div class="tag">
|
<div class="tag">
|
||||||
<el-tag size="small" effect="dark">{{
|
<el-tag size="small" effect="dark">{{ item.name }}</el-tag>
|
||||||
item.name
|
<el-tag size="small" effect="dark" type="success"
|
||||||
}}</el-tag>
|
>v{{ item.version || "1.0.0" }}</el-tag
|
||||||
<el-tag size="small" effect="dark" type="success"
|
>
|
||||||
>v{{ item.version || "1.0.0" }}</el-tag
|
</div>
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="title">
|
<p class="title">
|
||||||
{{ item.label || "未知" }}
|
{{ item.label || "未知" }}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p class="desc">{{ item.description || "暂无描述" }}</p>
|
<p class="desc">{{ item.description || "暂无描述" }}</p>
|
||||||
|
|
||||||
<div class="author">
|
<div class="author">
|
||||||
<span>{{ item.author || "Ta" }}：</span>
|
<span>{{ item.author || "Ta" }}：</span>
|
||||||
<span>{{ item.updateTime || "2024-01-01" }}</span>
|
<span>{{ item.updateTime || "2024-01-01" }}</span>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<cl-dialog v-model="det.visible" :title="det.title" width="60%">
|
<div class="f">
|
||||||
<el-tabs v-model="det.active" type="card" @tab-change="tab.onChange">
|
<cl-flex1 />
|
||||||
<el-tab-pane
|
<el-button
|
||||||
v-for="(item, index) in det.tabs"
|
round
|
||||||
:key="index"
|
@click="det.open(item)"
|
||||||
:label="item.name"
|
v-if="item.demo && !isEmpty(item.demo)"
|
||||||
:name="index"
|
>示例</el-button
|
||||||
>
|
>
|
||||||
<component :is="item.component" />
|
</div>
|
||||||
</el-tab-pane>
|
</div>
|
||||||
</el-tabs>
|
</el-col>
|
||||||
</cl-dialog>
|
</el-row>
|
||||||
</div>
|
</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>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup name="helper-plugins-vue">
|
<script lang="ts" setup name="helper-plugins-vue">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user