mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2025-12-12 13:42:50 +00:00
优化视图的滚动方法
This commit is contained in:
icssoa
parent
7aee76cbd0
commit
eb452189ea
@ -1,13 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-views">
|
<div class="app-views">
|
||||||
<router-view v-slot="{ Component }">
|
<router-view v-slot="{ Component }">
|
||||||
<el-scrollbar :ref="setRefs('scrollbar')" :key="key">
|
<transition :name="app.info.router.transition || 'none'">
|
||||||
<transition :name="app.info.router.transition || 'none'">
|
<keep-alive :include="caches" :key="key">
|
||||||
<keep-alive :include="caches">
|
<component :is="Component" />
|
||||||
<component :is="Component" />
|
</keep-alive>
|
||||||
</keep-alive>
|
</transition>
|
||||||
</transition>
|
|
||||||
</el-scrollbar>
|
|
||||||
</router-view>
|
</router-view>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -17,7 +15,7 @@ import { computed, onMounted, onUnmounted, ref } from "vue";
|
|||||||
import { useBase } from "/$/base";
|
import { useBase } from "/$/base";
|
||||||
import { useCool } from "/@/cool";
|
import { useCool } from "/@/cool";
|
||||||
|
|
||||||
const { refs, setRefs, mitt } = useCool();
|
const { mitt } = useCool();
|
||||||
const { process, app } = useBase();
|
const { process, app } = useBase();
|
||||||
|
|
||||||
// 缓存数
|
// 缓存数
|
||||||
@ -37,27 +35,11 @@ function refresh() {
|
|||||||
key.value += 1;
|
key.value += 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 滚动到
|
|
||||||
function scrollTo({ el, top }: { el?: string; top?: number }) {
|
|
||||||
const scrollbar = refs.scrollbar.wrapRef;
|
|
||||||
|
|
||||||
if (el) {
|
|
||||||
top = scrollbar.querySelector(el).offsetTop;
|
|
||||||
}
|
|
||||||
|
|
||||||
scrollbar.scrollTo({
|
|
||||||
top,
|
|
||||||
behavior: "smooth"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
mitt.on("view.scrollTo", scrollTo);
|
|
||||||
mitt.on("view.refresh", refresh);
|
mitt.on("view.refresh", refresh);
|
||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
mitt.off("view.scrollTo");
|
|
||||||
mitt.off("view.refresh");
|
mitt.off("view.refresh");
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
@ -72,10 +54,6 @@ onUnmounted(() => {
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
:deep(.el-scrollbar__view) {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.none-enter-active {
|
.none-enter-active {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,16 +1,3 @@
|
|||||||
*::-webkit-scrollbar {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
*::-webkit-scrollbar-thumb {
|
|
||||||
background-color: rgba(144, 147, 153, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
*::-webkit-scrollbar-track {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
|||||||
@ -1,54 +1,56 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="view-home">
|
<el-scrollbar>
|
||||||
<el-row :gutter="15">
|
<div class="view-home">
|
||||||
<el-col :lg="6" :md="12" :xs="24">
|
<el-row :gutter="15">
|
||||||
<div class="card">
|
<el-col :lg="6" :md="12" :xs="24">
|
||||||
<count-user />
|
<div class="card">
|
||||||
</div>
|
<count-user />
|
||||||
</el-col>
|
</div>
|
||||||
<el-col :lg="6" :md="12" :xs="24">
|
</el-col>
|
||||||
<div class="card">
|
<el-col :lg="6" :md="12" :xs="24">
|
||||||
<count-views />
|
<div class="card">
|
||||||
</div>
|
<count-views />
|
||||||
</el-col>
|
</div>
|
||||||
<el-col :lg="6" :md="12" :xs="24">
|
</el-col>
|
||||||
<div class="card">
|
<el-col :lg="6" :md="12" :xs="24">
|
||||||
<count-paid />
|
<div class="card">
|
||||||
</div>
|
<count-paid />
|
||||||
</el-col>
|
</div>
|
||||||
<el-col :lg="6" :md="12" :xs="24">
|
</el-col>
|
||||||
<div class="card">
|
<el-col :lg="6" :md="12" :xs="24">
|
||||||
<count-effect />
|
<div class="card">
|
||||||
</div>
|
<count-effect />
|
||||||
</el-col>
|
</div>
|
||||||
</el-row>
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
<el-row :gutter="15">
|
<el-row :gutter="15">
|
||||||
<el-col :lg="14" :xs="24">
|
<el-col :lg="14" :xs="24">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<tab-chart />
|
<tab-chart />
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :lg="10" :xs="24">
|
<el-col :lg="10" :xs="24">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<sales-rank />
|
<sales-rank />
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
<el-row :gutter="15">
|
<el-row :gutter="15">
|
||||||
<el-col :lg="14" :sm="24">
|
<el-col :lg="14" :sm="24">
|
||||||
<div class="card card--last">
|
<div class="card card--last">
|
||||||
<hot-search />
|
<hot-search />
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :lg="10" :sm="24">
|
<el-col :lg="10" :sm="24">
|
||||||
<div class="card card--last">
|
<div class="card card--last">
|
||||||
<category-ratio />
|
<category-ratio />
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
|
</el-scrollbar>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" name="home" setup>
|
<script lang="ts" name="home" setup>
|
||||||
|
|||||||
@ -7,10 +7,11 @@
|
|||||||
<div class="footer">
|
<div class="footer">
|
||||||
<el-button @click="clear">清空</el-button>
|
<el-button @click="clear">清空</el-button>
|
||||||
<el-button type="info" @click="save">保存草稿</el-button>
|
<el-button type="info" @click="save">保存草稿</el-button>
|
||||||
<el-button type="success" @click="create">生成代码</el-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<cl-editor-preview title="代码预览" name="monaco" :ref="setRefs('preview')" />
|
<cl-editor-preview title="代码预览" name="monaco" :ref="setRefs('preview')">
|
||||||
|
<el-button type="success" @click="create">生成代码</el-button>
|
||||||
|
</cl-editor-preview>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@ -142,28 +142,3 @@ export function useAi() {
|
|||||||
matchType
|
matchType
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useScroll() {
|
|
||||||
const { mitt } = useCool();
|
|
||||||
|
|
||||||
let timer: any;
|
|
||||||
|
|
||||||
function start() {
|
|
||||||
stop();
|
|
||||||
|
|
||||||
timer = setInterval(() => {
|
|
||||||
mitt.emit("view.scrollTo", { top: Math.random() + 10000 });
|
|
||||||
}, 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
function stop() {
|
|
||||||
if (timer) {
|
|
||||||
clearInterval(timer);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
start,
|
|
||||||
stop
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
.plugins {
|
.plugins {
|
||||||
overflow-x: hidden;
|
|
||||||
background-color: var(--el-bg-color);
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box;
|
&__wrapper {
|
||||||
|
background-color: var(--el-bg-color);
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.scope {
|
.scope {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
|||||||
@ -1,176 +1,180 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="ai-code">
|
<el-scrollbar :ref="setRefs('scrollbar')">
|
||||||
<div class="container">
|
<div class="ai-code">
|
||||||
<div class="head">
|
<div class="container">
|
||||||
<text2 model-value="Cool Ai 极速编码" />
|
<div class="head">
|
||||||
</div>
|
<text2 model-value="Cool Ai 极速编码" />
|
||||||
|
|
||||||
<div class="form">
|
|
||||||
<el-form :disabled="temp.disabled" size="large">
|
|
||||||
<div class="label required">CRUD</div>
|
|
||||||
|
|
||||||
<el-row :gutter="10">
|
|
||||||
<el-col :lg="6" :xs="24" :sm="12">
|
|
||||||
<cl-select
|
|
||||||
class="module"
|
|
||||||
placeholder="请选择模块"
|
|
||||||
v-model="form.module"
|
|
||||||
:options="module.dirs"
|
|
||||||
label-key="name"
|
|
||||||
value-key="name"
|
|
||||||
allow-create
|
|
||||||
/>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<el-col :lg="6" :xs="24" :sm="12">
|
|
||||||
<el-input
|
|
||||||
class="name"
|
|
||||||
v-model="form.name"
|
|
||||||
placeholder="实体名称，如：收货地址"
|
|
||||||
/>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<el-col :lg="12" :xs="24" :sm="24">
|
|
||||||
<el-input
|
|
||||||
class="columns"
|
|
||||||
v-model="form.columns"
|
|
||||||
placeholder="请填写字段，如：姓名、年龄、状态"
|
|
||||||
/>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<div class="label">其他你想做的事？</div>
|
|
||||||
|
|
||||||
<el-input
|
|
||||||
type="textarea"
|
|
||||||
v-model="form.other"
|
|
||||||
:rows="5"
|
|
||||||
placeholder="如：分页查询时姓名、手机号字段设置成可模糊搜索"
|
|
||||||
/>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="btns">
|
|
||||||
<el-button
|
|
||||||
round
|
|
||||||
size="large"
|
|
||||||
type="primary"
|
|
||||||
:icon="Promotion"
|
|
||||||
:disabled="temp.disabled"
|
|
||||||
:loading="temp.disabled"
|
|
||||||
@click="next"
|
|
||||||
>
|
|
||||||
{{ temp.disabled ? "思考中" : codes.entity.length ? "重新生成" : "下一步" }}
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tips">如遇见 “代码缺失”、“请求超时”，请尝试「刷新」吧</div>
|
|
||||||
|
|
||||||
<!-- 代码 -->
|
|
||||||
<div class="codes">
|
|
||||||
<div class="item is-entity" v-show="codes.entity">
|
|
||||||
<div class="label">
|
|
||||||
<div class="name">
|
|
||||||
<span>Entity（实体类）</span>
|
|
||||||
<el-icon class="is-loading" v-show="temp.coding == 'entity'">
|
|
||||||
<loading />
|
|
||||||
</el-icon>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<template v-if="!temp.disabled">
|
|
||||||
<el-button round size="small" @click="copyCode('entity')"
|
|
||||||
>Copy</el-button
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
round
|
|
||||||
type="success"
|
|
||||||
size="small"
|
|
||||||
:loading="!codes.vue"
|
|
||||||
@click="createVue()"
|
|
||||||
>
|
|
||||||
生成Vue代码
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<cl-editor
|
|
||||||
name="cl-editor-monaco"
|
|
||||||
:ref="setRefs('codeEntity')"
|
|
||||||
:options="editor.options"
|
|
||||||
height="auto"
|
|
||||||
autofocus
|
|
||||||
autosize
|
|
||||||
language="typescript"
|
|
||||||
v-model="codes.entity"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="item is-controller" v-show="codes.controller">
|
<div class="form">
|
||||||
<div class="label">
|
<el-form :disabled="temp.disabled" size="large">
|
||||||
<div class="name">
|
<div class="label required">CRUD</div>
|
||||||
<span>Controller（控制层）</span>
|
|
||||||
<el-icon class="is-loading" v-show="temp.coding == 'controller'">
|
|
||||||
<loading />
|
|
||||||
</el-icon>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<template v-if="!temp.disabled">
|
<el-row :gutter="10">
|
||||||
<el-button round size="small" @click="copyCode('controller')"
|
<el-col :lg="6" :xs="24" :sm="12">
|
||||||
>Copy</el-button
|
<cl-select
|
||||||
>
|
class="module"
|
||||||
</template>
|
placeholder="请选择模块"
|
||||||
</div>
|
v-model="form.module"
|
||||||
|
:options="module.dirs"
|
||||||
|
label-key="name"
|
||||||
|
value-key="name"
|
||||||
|
allow-create
|
||||||
|
/>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
<cl-editor
|
<el-col :lg="6" :xs="24" :sm="12">
|
||||||
name="cl-editor-monaco"
|
<el-input
|
||||||
:ref="setRefs('codeController')"
|
class="name"
|
||||||
:options="editor.options"
|
v-model="form.name"
|
||||||
height="auto"
|
placeholder="实体名称，如：收货地址"
|
||||||
autosize
|
/>
|
||||||
language="typescript"
|
</el-col>
|
||||||
v-model="codes.controller"
|
|
||||||
/>
|
<el-col :lg="12" :xs="24" :sm="24">
|
||||||
|
<el-input
|
||||||
|
class="columns"
|
||||||
|
v-model="form.columns"
|
||||||
|
placeholder="请填写字段，如：姓名、年龄、状态"
|
||||||
|
/>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<div class="label">其他你想做的事？</div>
|
||||||
|
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
v-model="form.other"
|
||||||
|
:rows="5"
|
||||||
|
placeholder="如：分页查询时姓名、手机号字段设置成可模糊搜索"
|
||||||
|
/>
|
||||||
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="item is-vue" v-show="codes.vue">
|
<div class="btns">
|
||||||
<div class="label">
|
<el-button
|
||||||
<div class="name">
|
round
|
||||||
<span>Vue（页面）</span>
|
size="large"
|
||||||
<el-icon class="is-loading" v-show="temp.coding == 'vue'">
|
type="primary"
|
||||||
<loading />
|
:icon="Promotion"
|
||||||
</el-icon>
|
:disabled="temp.disabled"
|
||||||
|
:loading="temp.disabled"
|
||||||
|
@click="next"
|
||||||
|
>
|
||||||
|
{{ temp.disabled ? "思考中" : codes.entity.length ? "重新生成" : "下一步" }}
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tips">如遇见 “代码缺失”、“请求超时”，请尝试「刷新」吧</div>
|
||||||
|
|
||||||
|
<!-- 代码 -->
|
||||||
|
<div class="codes">
|
||||||
|
<div class="item is-entity" v-show="codes.entity">
|
||||||
|
<div class="label">
|
||||||
|
<div class="name">
|
||||||
|
<span>Entity（实体类）</span>
|
||||||
|
<el-icon class="is-loading" v-show="temp.coding == 'entity'">
|
||||||
|
<loading />
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template v-if="!temp.disabled">
|
||||||
|
<el-button round size="small" @click="copyCode('entity')"
|
||||||
|
>Copy</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
round
|
||||||
|
type="success"
|
||||||
|
size="small"
|
||||||
|
:loading="!codes.vue"
|
||||||
|
@click="createVue()"
|
||||||
|
>
|
||||||
|
生成Vue代码
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<template v-if="!temp.disabled">
|
<cl-editor
|
||||||
<el-button round size="small" @click="copyCode('vue')">Copy</el-button>
|
name="cl-editor-monaco"
|
||||||
</template>
|
:ref="setRefs('codeEntity')"
|
||||||
|
:options="editor.options"
|
||||||
|
height="auto"
|
||||||
|
autofocus
|
||||||
|
autosize
|
||||||
|
language="typescript"
|
||||||
|
v-model="codes.entity"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<cl-editor
|
<div class="item is-controller" v-show="codes.controller">
|
||||||
name="cl-editor-monaco"
|
<div class="label">
|
||||||
:ref="setRefs('codeVue')"
|
<div class="name">
|
||||||
:options="editor.options"
|
<span>Controller（控制层）</span>
|
||||||
height="auto"
|
<el-icon class="is-loading" v-show="temp.coding == 'controller'">
|
||||||
autosize
|
<loading />
|
||||||
language="html"
|
</el-icon>
|
||||||
v-model="codes.vue"
|
</div>
|
||||||
/>
|
|
||||||
|
<template v-if="!temp.disabled">
|
||||||
|
<el-button round size="small" @click="copyCode('controller')"
|
||||||
|
>Copy</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<cl-editor
|
||||||
|
name="cl-editor-monaco"
|
||||||
|
:ref="setRefs('codeController')"
|
||||||
|
:options="editor.options"
|
||||||
|
height="auto"
|
||||||
|
autosize
|
||||||
|
language="typescript"
|
||||||
|
v-model="codes.controller"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item is-vue" v-show="codes.vue">
|
||||||
|
<div class="label">
|
||||||
|
<div class="name">
|
||||||
|
<span>Vue（页面）</span>
|
||||||
|
<el-icon class="is-loading" v-show="temp.coding == 'vue'">
|
||||||
|
<loading />
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template v-if="!temp.disabled">
|
||||||
|
<el-button round size="small" @click="copyCode('vue')"
|
||||||
|
>Copy</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<cl-editor
|
||||||
|
name="cl-editor-monaco"
|
||||||
|
:ref="setRefs('codeVue')"
|
||||||
|
:options="editor.options"
|
||||||
|
height="auto"
|
||||||
|
autosize
|
||||||
|
language="html"
|
||||||
|
v-model="codes.vue"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="op" v-show="!temp.disabled && codes.entity.length">
|
||||||
|
<el-button :icon="Close" round size="large" @click="reset"> 取消 </el-button>
|
||||||
|
<el-button :icon="Check" round size="large" type="success" @click="createFile">
|
||||||
|
创建文件
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bottom"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="op" v-show="!temp.disabled && codes.entity.length">
|
<!-- 创建菜单 -->
|
||||||
<el-button :icon="Close" round size="large" @click="reset"> 取消 </el-button>
|
<cl-form ref="Form" />
|
||||||
<el-button :icon="Check" round size="large" type="success" @click="createFile">
|
|
||||||
创建文件
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bottom"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</el-scrollbar>
|
||||||
<!-- 创建菜单 -->
|
|
||||||
<cl-form ref="Form" />
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="tsx" setup name="helper-ai-code">
|
<script lang="tsx" setup name="helper-ai-code">
|
||||||
@ -180,19 +184,54 @@ import { Promotion, Loading, Close, Check } from "@element-plus/icons-vue";
|
|||||||
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
|
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
|
||||||
import { debounce, isEmpty } from "lodash-es";
|
import { debounce, isEmpty } from "lodash-es";
|
||||||
import { useClipboard } from "@vueuse/core";
|
import { useClipboard } from "@vueuse/core";
|
||||||
import { useMenu, useAi, useScroll } from "../hooks";
|
import { useMenu, useAi } from "../hooks";
|
||||||
import { isDev } from "/@/config";
|
import { isDev } from "/@/config";
|
||||||
import { useForm } from "@cool-vue/crud";
|
import { useForm } from "@cool-vue/crud";
|
||||||
import type { CodeType } from "../types";
|
import type { CodeType } from "../types";
|
||||||
import Text2 from "../components/text.vue";
|
import Text2 from "../components/text.vue";
|
||||||
|
|
||||||
const { service, mitt, refs, setRefs } = useCool();
|
const { service, refs, setRefs } = useCool();
|
||||||
const { copy } = useClipboard();
|
const { copy } = useClipboard();
|
||||||
const menu = useMenu();
|
const menu = useMenu();
|
||||||
const ai = useAi();
|
const ai = useAi();
|
||||||
const scroll = useScroll();
|
|
||||||
const Form = useForm();
|
const Form = useForm();
|
||||||
|
|
||||||
|
// 滚动条
|
||||||
|
const scroller = {
|
||||||
|
timer: null as any,
|
||||||
|
|
||||||
|
scrollTo({ el, top }: { el?: string; top?: number }) {
|
||||||
|
const scrollbar = refs.scrollbar.wrapRef;
|
||||||
|
|
||||||
|
if (el) {
|
||||||
|
top = scrollbar.querySelector(el).offsetTop;
|
||||||
|
}
|
||||||
|
|
||||||
|
scrollbar.scrollTo({
|
||||||
|
top,
|
||||||
|
behavior: "smooth"
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
start() {
|
||||||
|
this.stop();
|
||||||
|
|
||||||
|
this.timer = setInterval(() => {
|
||||||
|
if (codes.entity) {
|
||||||
|
this.scrollTo({
|
||||||
|
top: Math.random() + 10000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
},
|
||||||
|
|
||||||
|
stop() {
|
||||||
|
if (this.timer) {
|
||||||
|
clearInterval(this.timer);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// 编辑器
|
// 编辑器
|
||||||
const editor = reactive({
|
const editor = reactive({
|
||||||
options: {
|
options: {
|
||||||
@ -275,14 +314,14 @@ function send(type: CodeType = "entity", data: any) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 开始滚动
|
// 开始滚动
|
||||||
scroll.start();
|
scroller.start();
|
||||||
}
|
}
|
||||||
|
|
||||||
// 结束
|
// 结束
|
||||||
function stop() {
|
function stop() {
|
||||||
temp.disabled = false;
|
temp.disabled = false;
|
||||||
temp.coding = "";
|
temp.coding = "";
|
||||||
scroll.stop();
|
scroller.stop();
|
||||||
}
|
}
|
||||||
|
|
||||||
// 重置
|
// 重置
|
||||||
@ -454,7 +493,7 @@ const createVue = debounce((auto?: boolean) => {
|
|||||||
stop();
|
stop();
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
mitt.emit("view.scrollTo", { el: `.codes .is-vue` });
|
scroller.scrollTo({ el: `.codes .is-vue` });
|
||||||
refs.codeVue.formatCode();
|
refs.codeVue.formatCode();
|
||||||
}, 300);
|
}, 300);
|
||||||
}
|
}
|
||||||
@ -629,7 +668,7 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bottom {
|
.bottom {
|
||||||
height: 100px;
|
height: 10vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,95 +1,113 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="plugins" @dragover="onDragover" @drop="onDrop">
|
<div class="plugins__wrapper">
|
||||||
<el-tabs v-model="tab.active" type="card" @tab-change="tab.onChange">
|
<el-scrollbar>
|
||||||
<el-tab-pane label="已安装插件" name="installed"> </el-tab-pane>
|
<div class="plugins" @dragover="onDragover" @drop="onDrop">
|
||||||
<el-tab-pane label="插件市场" name="shop"> </el-tab-pane>
|
<el-tabs v-model="tab.active" type="card" @tab-change="tab.onChange">
|
||||||
</el-tabs>
|
<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-row :gutter="10">
|
||||||
<el-col v-for="(item, index) in list" :key="index" :xs="24" :sm="12" :md="8" :lg="6">
|
<el-col
|
||||||
<div class="scope">
|
v-for="(item, index) in list"
|
||||||
<div class="c">
|
:key="index"
|
||||||
<el-icon class="set" @click="toSet(item)">
|
:xs="24"
|
||||||
<setting />
|
:sm="12"
|
||||||
</el-icon>
|
: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="det">
|
||||||
<div class="tag">
|
<div class="tag">
|
||||||
<el-tag size="small" effect="dark">{{ item.keyName }}</el-tag>
|
<el-tag size="small" effect="dark">{{
|
||||||
<el-tag size="small" effect="dark" type="success"
|
item.keyName
|
||||||
>v{{ item.version }}</el-tag
|
}}</el-tag>
|
||||||
>
|
<el-tag size="small" effect="dark" type="success"
|
||||||
|
>v{{ item.version }}</el-tag
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="title">
|
||||||
|
{{ item.name || "未知" }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="desc">{{ item.description || "暂无描述" }}</p>
|
||||||
|
|
||||||
|
<div class="author">
|
||||||
|
<span>{{ item.author }}：</span>
|
||||||
|
<span>{{ item.updateTime }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="title">
|
<div class="f">
|
||||||
{{ item.name || "未知" }}
|
<el-button round @click="toDetail(item)">详情</el-button>
|
||||||
</p>
|
<el-button type="danger" round @click="toDel(item, index)"
|
||||||
|
>卸载</el-button
|
||||||
|
>
|
||||||
|
|
||||||
<p class="desc">{{ item.description || "暂无描述" }}</p>
|
<cl-flex1 />
|
||||||
|
|
||||||
<div class="author">
|
<cl-switch
|
||||||
<span>{{ item.author }}：</span>
|
v-model="item.status"
|
||||||
<span>{{ item.updateTime }}</span>
|
@change="onStatusChange(item)"
|
||||||
|
></cl-switch>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</el-col>
|
||||||
|
|
||||||
<div class="f">
|
<el-col :xs="24" :sm="12" :md="8" :lg="6">
|
||||||
<el-button round @click="toDetail(item)">详情</el-button>
|
<cl-upload :before-upload="onBeforeUpload" accept=".cool">
|
||||||
<el-button type="danger" round @click="toDel(item, index)">卸载</el-button>
|
<div class="scope is-add">
|
||||||
|
<el-icon>
|
||||||
|
<plus />
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
</cl-upload>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
<cl-flex1 />
|
<!-- 详情预览 -->
|
||||||
|
<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-switch v-model="item.status" @change="onStatusChange(item)"></cl-switch>
|
<!-- 设置 -->
|
||||||
</div>
|
<cl-form ref="Form">
|
||||||
</div>
|
<template #slot-upload>
|
||||||
</el-col>
|
<cl-row>
|
||||||
|
<cl-upload-space
|
||||||
|
:show-list="false"
|
||||||
|
:multiple="false"
|
||||||
|
text="选择文件"
|
||||||
|
@confirm="onFileConfirm"
|
||||||
|
/>
|
||||||
|
|
||||||
<el-col :xs="24" :sm="12" :md="8" :lg="6">
|
<el-text type="warning" :style="{ marginLeft: '10px' }"
|
||||||
<cl-upload :before-upload="onBeforeUpload" accept=".cool">
|
>选择后会在光标后插入文件链接</el-text
|
||||||
<div class="scope is-add">
|
>
|
||||||
<el-icon>
|
</cl-row>
|
||||||
<plus />
|
</template>
|
||||||
</el-icon>
|
</cl-form>
|
||||||
</div>
|
</div>
|
||||||
</cl-upload>
|
</el-scrollbar>
|
||||||
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -137,6 +155,10 @@ function toSet(item: Eps.PluginInfoEntity) {
|
|||||||
Form.value?.open({
|
Form.value?.open({
|
||||||
title: "设置",
|
title: "设置",
|
||||||
|
|
||||||
|
props: {
|
||||||
|
labelWidth: "60px"
|
||||||
|
},
|
||||||
|
|
||||||
form: {
|
form: {
|
||||||
...item
|
...item
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,62 +1,79 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="plugins">
|
<div class="plugins__wrapper">
|
||||||
<el-tabs v-model="tab.active" type="card" @tab-change="tab.onChange">
|
<el-scrollbar>
|
||||||
<el-tab-pane label="已安装插件" name="installed"> </el-tab-pane>
|
<div class="plugins">
|
||||||
<el-tab-pane label="插件市场" name="shop"> </el-tab-pane>
|
<div class="header">
|
||||||
</el-tabs>
|
<el-tabs v-model="tab.active" type="card" @tab-change="tab.onChange">
|
||||||
|
<el-tab-pane label="已安装插件" name="installed"> </el-tab-pane>
|
||||||
<el-row :gutter="10">
|
<el-tab-pane label="插件市场" name="shop"> </el-tab-pane>
|
||||||
<el-col v-for="(item, index) in list" :key="index" :xs="24" :sm="12" :md="8" :lg="6">
|
</el-tabs>
|
||||||
<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>
|
|
||||||
|
|
||||||
<p class="title">
|
|
||||||
{{ item.label || "未知" }}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p class="desc">{{ item.description || "暂无描述" }}</p>
|
|
||||||
|
|
||||||
<div class="author">
|
|
||||||
<span>{{ item.author || "Ta" }}：</span>
|
|
||||||
<span>{{ item.updateTime || "2024-01-01" }}</span>
|
|
||||||
</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>
|
|
||||||
|
|
||||||
<cl-dialog v-model="det.visible" :title="det.title" width="60%">
|
<div class="container">
|
||||||
<el-tabs v-model="det.active" type="card" @tab-change="tab.onChange">
|
<el-row :gutter="10">
|
||||||
<el-tab-pane
|
<el-col
|
||||||
v-for="(item, index) in det.tabs"
|
v-for="(item, index) in list"
|
||||||
:key="index"
|
:key="index"
|
||||||
:label="item.name"
|
:xs="24"
|
||||||
:name="index"
|
:sm="12"
|
||||||
>
|
:md="8"
|
||||||
<component :is="item.component" />
|
:lg="6"
|
||||||
</el-tab-pane>
|
>
|
||||||
</el-tabs>
|
<div class="scope">
|
||||||
</cl-dialog>
|
<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>
|
||||||
|
|
||||||
|
<p class="title">
|
||||||
|
{{ item.label || "未知" }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="desc">{{ item.description || "暂无描述" }}</p>
|
||||||
|
|
||||||
|
<div class="author">
|
||||||
|
<span>{{ item.author || "Ta" }}：</span>
|
||||||
|
<span>{{ item.updateTime || "2024-01-01" }}</span>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
</el-scrollbar>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@ -2,6 +2,6 @@
|
|||||||
<space-inner />
|
<space-inner />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup name="space-list">
|
<script lang="ts" setup name="upload-list">
|
||||||
import SpaceInner from "../components/space-inner.vue";
|
import SpaceInner from "../components/space-inner.vue";
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user