github/cool-admin-vue
1
0
Fork 0
mirror of https://github.com/cool-team-official/cool-admin-vue.git synced 2025-12-11 13:02:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

小改主题

Browse Source
This commit is contained in:
神仙 2024-12-26 01:57:19 +08:00
parent 55a71c4fe8
commit e0b43109bc
24 changed files with 307 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -109,7 +109,7 @@
.preload__loading::after,
.preload__loading::before {
content: "";
content: '';
display: inline-block;
position: absolute;
bottom: -2px;

10
pnpm-lock.yaml generated
View File

@ -88,8 +88,8 @@ importers:
version: 0.18.5
devDependencies:
'@cool-vue/vite-plugin':
specifier: ^7.2.4
version: 7.2.4
specifier: ^7.2.5
version: 7.2.5
'@rushstack/eslint-patch':
specifier: ^1.10.4
version: 1.10.4
@ -333,8 +333,8 @@ packages:
'@cool-vue/crud@7.2.5':
resolution: {integrity: sha512-+kvWAfz77jTDZqDfQPDsl2dzOeJs7TptOH/maBfwO3iyZcTaYBbcFEBpWG5vjaUeva8Fuo1rlmlr5q/OykuX7Q==}
'@cool-vue/vite-plugin@7.2.4':
resolution: {integrity: sha512-lRVoCHeOQ+ZYnpCbVtfTGafdQ/glpb9Nk4YydGseNjVoXLfeJBGkZx2xsHOt54fjlFQMWyi+k4Qo28Ymgigtsg==}
'@cool-vue/vite-plugin@7.2.5':
resolution: {integrity: sha512-2xMo11P+c7ugNxSPlH3mjBKL4OSfTb49iQlki+GwTzIBykbxG5bi0pt5k9qzkz29R0dOWHWjjGrT6RpNlYvzkg==}
'@ctrl/tinycolor@3.6.1':
resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
@ -3296,7 +3296,7 @@ snapshots:
- '@vue/composition-api'
- typescript
'@cool-vue/vite-plugin@7.2.4':
'@cool-vue/vite-plugin@7.2.5':
dependencies:
'@vue/compiler-sfc': 3.5.13
axios: 1.7.9

1
src/modules/base/components/icon/svg.vue
View File

@ -42,7 +42,6 @@ export default defineComponent({
.cl-svg {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}

77
src/modules/base/pages/main/components/amenu.vue
View File

@ -8,8 +8,13 @@
>
<template v-for="(item, index) in list" :key="item.id">
<el-menu-item :index="`${index}`">
<cl-svg v-if="item.icon" :name="item.icon" :size="18" />
<span class="a-menu__name">{{ item.meta?.label }}</span>
<cl-svg class="icon" :name="item.icon" :size="16" v-if="item.icon" />
<span class="label">{{ item.meta?.label }}</span>
<div class="arc">
<cl-svg name="arc" />
<cl-svg name="arc" />
</div>
</el-menu-item>
</template>
</el-menu>
@ -104,11 +109,12 @@ watch(
<style lang="scss" scoped>
.a-menu {
margin: 5px 0 0 10px;
padding: 5px 0 0 15px;
background-color: var(--view-bg-color);
.el-menu {
height: 40px;
background: transparent;
height: 36px;
background-color: transparent;
border: 0;
:deep(.el-sub-menu__title) {
@ -118,31 +124,66 @@ watch(
:deep(.el-menu-item) {
display: flex;
align-items: center;
height: 40px;
padding: 0 15px;
background: transparent;
height: 36px;
padding: 0 16px 0 14px;
border: 0;
color: #999;
color: var(--el-color-info);
position: relative;
background-color: transparent;
span {
.label {
font-size: 12px;
margin-left: 3px;
line-height: normal;
line-height: 1;
}
.icon {
margin-right: 5px;
}
.label,
.icon {
position: relative;
z-index: 2;
}
.arc {
pointer-events: none;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
opacity: 0;
border-radius: 8px 8px 0 0;
.cl-svg {
position: absolute;
bottom: 0;
color: var(--el-bg-color);
&:first-child {
left: -14px;
transform: scaleX(-1);
}
&:last-child {
right: -14px;
}
}
}
&:hover {
background: transparent;
// color: #000;
}
&.is-active {
color: var(--color-primary);
border-radius: 6px 6px 0 0;
background: #fff;
color: #000;
}
.cl-svg {
margin-right: 5px;
.arc {
background-color: var(--el-bg-color);
opacity: 1;
}
}
}
}

2
src/modules/base/pages/main/components/process.vue
View File

@ -217,7 +217,7 @@ onMounted(() => {
align-items: center;
border-radius: 4px;
height: 30px;
padding: 0 10px;
padding: 0 8px 0 12px;
margin-right: 10px;
cursor: pointer;
color: var(--el-color-info);

2
src/modules/base/pages/main/components/route-nav.vue
View File

@ -63,7 +63,7 @@ const lastName = computed(() => last(list.value)?.meta?.label);
margin: 0 10px;
.el-breadcrumb__inner {
font-size: 13px;
font-size: 12px;
}
}

2
src/modules/base/pages/main/components/topbar.vue
View File

@ -146,7 +146,7 @@ onMounted(() => {
border-radius: 4px;
.cl-svg {
font-size: 15px;
font-size: 14px;
}
&:hover {

2
src/modules/base/pages/main/components/views.vue
View File

@ -51,7 +51,7 @@ onUnmounted(() => {
margin: 0 10px 10px 10px;
width: calc(100% - 20px);
box-sizing: border-box;
border-radius: 4px;
border-radius: 6px;
position: relative;
.none-enter-active {

2
src/modules/base/pages/main/index.vue
View File

@ -27,7 +27,7 @@ const { app } = useBase();
<style lang="scss" scoped>
.app-layout {
display: flex;
background-color: #f7f7f7;
background-color: var(--view-bg-color);
height: 100%;
width: 100%;
overflow: hidden;

2
src/modules/base/static/css/index.scss
View File

@ -5,7 +5,7 @@
}
:root {
--view-bg-color: #f7f7f7;
--view-bg-color: var(--el-fill-color-light);
}
a {

3
src/modules/base/static/svg/arc.svg Normal file
View File

@ -0,0 +1,3 @@
<svg height="7" width="7">
<path d="M 0 0 A 7 7 0 0 0 7 7 L 0 7 Z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 83 B

34
src/modules/base/static/svg/expand.svg
View File

@ -1 +1,33 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735127795772" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2135" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M42.666667 85.333333m42.666666 0l853.333334 0q42.666667 0 42.666666 42.666667l0 0q0 42.666667-42.666666 42.666667l-853.333334 0q-42.666667 0-42.666666-42.666667l0 0q0-42.666667 42.666666-42.666667Z" fill="#000000" p-id="2136"></path><path d="M426.666667 341.333333m42.666666 0l469.333334 0q42.666667 0 42.666666 42.666667l0 0q0 42.666667-42.666666 42.666667l-469.333334 0q-42.666667 0-42.666666-42.666667l0 0q0-42.666667 42.666666-42.666667Z" fill="#000000" p-id="2137"></path><path d="M426.666667 597.333333m42.666666 0l469.333334 0q42.666667 0 42.666666 42.666667l0 0q0 42.666667-42.666666 42.666667l-469.333334 0q-42.666667 0-42.666666-42.666667l0 0q0-42.666667 42.666666-42.666667Z" fill="#000000" p-id="2138"></path><path d="M42.666667 853.333333m42.666666 0l853.333334 0q42.666667 0 42.666666 42.666667l0 0q0 42.666667-42.666666 42.666667l-853.333334 0q-42.666667 0-42.666666-42.666667l0 0q0-42.666667 42.666666-42.666667Z" fill="#000000" p-id="2139"></path><path d="M234.026667 349.568a42.666667 42.666667 0 0 1 54.485333 65.450667l-4.096 3.413333L156.458667 512l127.957333 93.568a42.666667 42.666667 0 0 1 12.117333 55.082667l-2.858666 4.522666a42.666667 42.666667 0 0 1-55.125334 12.16l-4.522666-2.901333-175.018667-128a42.666667 42.666667 0 0 1-4.096-65.493333l4.096-3.413334 175.018667-128z" fill="#000000" p-id="2140"></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
t="1735127795772"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="2135"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="256"
height="256"
>
<path
d="M42.666667 85.333333m42.666666 0l853.333334 0q42.666667 0 42.666666 42.666667l0 0q0 42.666667-42.666666 42.666667l-853.333334 0q-42.666667 0-42.666666-42.666667l0 0q0-42.666667 42.666666-42.666667Z"
p-id="2136"
></path>
<path
d="M426.666667 341.333333m42.666666 0l469.333334 0q42.666667 0 42.666666 42.666667l0 0q0 42.666667-42.666666 42.666667l-469.333334 0q-42.666667 0-42.666666-42.666667l0 0q0-42.666667 42.666666-42.666667Z"
p-id="2137"
></path>
<path
d="M426.666667 597.333333m42.666666 0l469.333334 0q42.666667 0 42.666666 42.666667l0 0q0 42.666667-42.666666 42.666667l-469.333334 0q-42.666667 0-42.666666-42.666667l0 0q0-42.666667 42.666666-42.666667Z"
p-id="2138"
></path>
<path
d="M42.666667 853.333333m42.666666 0l853.333334 0q42.666667 0 42.666666 42.666667l0 0q0 42.666667-42.666666 42.666667l-853.333334 0q-42.666667 0-42.666666-42.666667l0 0q0-42.666667 42.666666-42.666667Z"
p-id="2139"
></path>
<path
d="M234.026667 349.568a42.666667 42.666667 0 0 1 54.485333 65.450667l-4.096 3.413333L156.458667 512l127.957333 93.568a42.666667 42.666667 0 0 1 12.117333 55.082667l-2.858666 4.522666a42.666667 42.666667 0 0 1-55.125334 12.16l-4.522666-2.901333-175.018667-128a42.666667 42.666667 0 0 1-4.096-65.493333l4.096-3.413334 175.018667-128z"
p-id="2140"
></path>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

18
src/modules/base/static/svg/fold.svg
View File

@ -1 +1,17 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735127798306" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2305" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M935.466667 85.333333H85.333333a42.666667 42.666667 0 1 0 0 85.333334h850.133334a42.666667 42.666667 0 0 0 0-85.333334z m-382.72 256H85.333333a42.666667 42.666667 0 1 0 0 85.333334h467.413334a42.666667 42.666667 0 1 0 0-85.333334z m0 256H85.333333a42.666667 42.666667 0 0 0 0 85.333334h467.413334a42.666667 42.666667 0 1 0 0-85.333334z m382.72 256H85.333333a42.666667 42.666667 0 0 0 0 85.333334h850.133334a42.666667 42.666667 0 0 0 0-85.333334zM789.461333 349.568a42.410667 42.410667 0 0 0-59.392 9.258667c-12.8 17.536-10.24 41.642667 5.12 56.192l4.096 3.413333L866.773333 512l-127.488 93.568c-17.493333 12.8-22.357333 36.565333-12.117333 55.082667l2.901333 4.522666c12.8 17.578667 36.437333 22.442667 54.912 12.16l4.48-2.901333 174.464-128c21.76-15.957333 23.125333-47.530667 4.053334-65.493333l-4.053334-3.413334-174.464-128z" fill="#000000" p-id="2306"></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
t="1735127798306"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="2305"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="256"
height="256"
>
<path
d="M935.466667 85.333333H85.333333a42.666667 42.666667 0 1 0 0 85.333334h850.133334a42.666667 42.666667 0 0 0 0-85.333334z m-382.72 256H85.333333a42.666667 42.666667 0 1 0 0 85.333334h467.413334a42.666667 42.666667 0 1 0 0-85.333334z m0 256H85.333333a42.666667 42.666667 0 0 0 0 85.333334h467.413334a42.666667 42.666667 0 1 0 0-85.333334z m382.72 256H85.333333a42.666667 42.666667 0 0 0 0 85.333334h850.133334a42.666667 42.666667 0 0 0 0-85.333334zM789.461333 349.568a42.410667 42.410667 0 0 0-59.392 9.258667c-12.8 17.536-10.24 41.642667 5.12 56.192l4.096 3.413333L866.773333 512l-127.488 93.568c-17.493333 12.8-22.357333 36.565333-12.117333 55.082667l2.901333 4.522666c12.8 17.578667 36.437333 22.442667 54.912 12.16l4.48-2.901333 174.464-128c21.76-15.957333 23.125333-47.530667 4.053334-65.493333l-4.053334-3.413334-174.464-128z"
p-id="2306"
></path>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

18
src/modules/base/views/user/components/dept-list.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="dept-tree">
<div class="dept-tree__header">
<div>组织架构</div>
<el-text>组织架构</el-text>
<ul class="dept-tree__op">
<li @click="refresh()">
@ -384,21 +384,10 @@ onMounted(function () {
&__header {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
padding: 0 10px;
letter-spacing: 1px;
position: relative;
div {
font-size: 14px;
flex: 1;
white-space: nowrap;
}
i {
font-size: 18px;
cursor: pointer;
}
}
&__op {
@ -412,9 +401,10 @@ onMounted(function () {
margin-left: 5px;
padding: 5px;
cursor: pointer;
border-radius: 4px;
&:not(.no):hover {
background-color: var(--el-fill-color-lighter);
background-color: var(--el-fill-color-light);
}
}
}

4
src/modules/chat/components/index.vue
View File

@ -206,6 +206,10 @@ defineExpose({
justify-content: center;
width: 45px;
.el-badge {
display: flex;
}
&:hover {
color: var(--color-primary);
}

6
src/modules/demo/views/home/components/category-ratio.vue
View File

@ -36,8 +36,7 @@ const chartOption = reactive({
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
fontSize: 30
}
},
labelLine: {
@ -52,7 +51,8 @@ const chartOption = reactive({
],
itemStyle: {
borderColor: '#fff',
borderWidth: 4
borderWidth: 4,
borderRadius: 4
},
roundCap: 1
}

4
src/modules/helper/static/index.scss
View File

@ -5,6 +5,10 @@
background-color: var(--el-bg-color);
}
:deep(.el-tabs__header) {
margin-bottom: 10px;
}
.scope {
border-radius: 8px;
margin-bottom: 10px;

4
src/modules/helper/views/plugins/serve.vue
View File

@ -2,8 +2,8 @@
<el-scrollbar class="plugins__wrapper" @dragover="onDragover" @drop="onDrop">
<div class="plugins">
<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-tab-pane label="已安装插件" name="installed" />
<el-tab-pane label="插件市场" name="shop" />
</el-tabs>
<el-row :gutter="10">

94
src/modules/helper/views/plugins/vue.vue
View File

@ -1,63 +1,59 @@
<template>
<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>
<el-tabs v-model="tab.active" type="card" @tab-change="tab.onChange">
<el-tab-pane label="已安装插件" name="installed" />
<el-tab-pane label="插件市场" name="shop" />
</el-tabs>
<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" />
<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
v-if="item.demo && !isEmpty(item.demo)"
round
@click="det.open(item)"
>示例</el-button
>
</div>
</div>
</el-col>
</el-row>
</div>
<div class="f">
<cl-flex1 />
<el-button
v-if="item.demo && !isEmpty(item.demo)"
round
@click="det.open(item)"
>示例</el-button
>
</div>
</div>
</el-col>
</el-row>
<cl-dialog v-model="det.visible" :title="det.title" width="60%">
<el-tabs v-model="det.active" type="card" @tab-change="tab.onChange">

18
src/modules/task/views/list.vue
View File

@ -386,27 +386,23 @@ onActivated(() => {
<style lang="scss" scoped>
.task-list {
height: 100%;
background-color: var(--el-bg-color-page);
.list {
display: flex;
flex-wrap: wrap;
padding: 10px 10px 0 10px;
box-sizing: border-box;
background-color: inherit;
.item {
background-color: var(--el-bg-color);
padding: 15px 20px 0 20px;
border-radius: 10px;
margin: 0 15px 15px 0;
margin: 0 10px 10px 0;
height: 200px;
width: 350px;
cursor: pointer;
box-sizing: border-box;
.name {
font-size: 17px;
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
overflow: hidden;
@ -420,16 +416,12 @@ onActivated(() => {
span {
display: block;
font-size: 12px;
&:nth-child(1) {
font-size: 12px;
margin-bottom: 5px;
color: var(--el-color-info);
}
&:nth-child(2) {
font-size: 14px;
}
}
}
@ -441,7 +433,7 @@ onActivated(() => {
height: 50px;
.el-icon {
font-size: 22px;
font-size: 16px;
cursor: pointer;
margin-left: 10px;
padding: 5px;
@ -470,7 +462,7 @@ onActivated(() => {
}
&:hover {
background-color: var(--el-fill-color-lighter);
box-shadow: 0px 0px 10px 1px var(--el-color-info-light-9);
}
&.is-add {

11
src/plugins/crud/components/select/index.tsx
View File

@ -29,7 +29,12 @@ export default defineComponent({
// 是否返回选中层级下的所有值
allLevelsId: Boolean,
// 是否父子不互相关联
checkStrictly: Boolean
checkStrictly: Boolean,
// 是否搜索
isSearch: {
type: Boolean,
default: true
}
},
emits: ['update:modelValue', 'change'],
@ -81,7 +86,7 @@ export default defineComponent({
emit('update:modelValue', v);
emit('change', v);
if (props.prop && !props.scope) {
if (props.prop && props.isSearch) {
Crud.value?.refresh({ page: 1, [props.prop]: v });
}
}
@ -93,7 +98,7 @@ export default defineComponent({
};
// 占位符
const placeholder = props.prop ? '选择搜索' : '请选择';
const placeholder = props.isSearch ? '全部' : '请选择';
// 树形下拉框
const TreeSelect = (

33
src/plugins/theme/components/theme.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="cl-theme" @click="open">
<div class="cl-theme__icon" @click="open">
<el-badge type="primary" is-dot>
<cl-svg name="icon-discover" :size="16" />
</el-badge>
@ -128,16 +128,6 @@ function setTransition(val: any) {
<style lang="scss">
.cl-theme {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 45px;
&:hover {
color: var(--color-primary);
}
&-dark {
width: 45px;
margin-left: 10px;
@ -177,16 +167,19 @@ function setTransition(val: any) {
}
}
&__drawer {
:deep(.el-form-item) {
background-color: #f7f7f7;
padding: 10px;
border-radius: 6px;
border: 1px solid var(--el-border-color);
&__icon {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 45px;
.el-form-item__label {
color: #000;
}
.el-badge {
display: flex;
}
&:hover {
color: var(--color-primary);
}
}
}

90
src/plugins/theme/static/css/index.scss
View File

@ -13,7 +13,7 @@ html.dark {
}
.cl-crud {
background-color: transparent !important;
background-color: transparent;
.el-table {
&__header {
@ -37,43 +37,6 @@ html.dark {
}
}
.app-layout {
background-color: var(--el-bg-color) !important;
.a-menu {
.el-menu-item {
border-radius: 6px !important;
}
}
.app-topbar {
background-color: transparent;
color: #fff;
span {
color: #fff;
}
.el-breadcrumb {
span {
color: #ddd;
}
&__item {
&:last-child {
span {
color: #fff;
}
}
}
}
}
.app-views {
background-color: #2f3447;
}
}
.el-overlay {
background-size: 4px 4px;
backdrop-filter: saturate(50%) blur(4px);
@ -83,22 +46,46 @@ html.dark {
body.theme {
&-jihei {
.app-layout {
background-color: rgba(47, 52, 71, 0.9);
background-color: #3b3f4d;
.app-slider {
background-color: #2e313d;
}
.a-menu {
padding: 5px 10px;
background-color: transparent;
color: #fff;
.el-menu-item {
border-radius: 6px !important;
color: #fff;
}
.arc {
border-radius: 8px !important;
.cl-svg {
display: none;
}
}
}
.app-topbar {
background-color: transparent;
color: #fff;
border-bottom: 0;
span {
color: #fff;
}
&__collapse {
&:hover {
color: #333;
}
}
.el-breadcrumb {
span {
color: #ddd;
@ -113,6 +100,31 @@ body.theme {
}
}
}
.app-process {
background-color: transparent;
color: #fff;
&__item {
.el-text {
color: #fff;
}
&:not(.active):hover {
.el-text {
color: #333;
}
}
}
&__op {
.item {
&:hover {
color: #333;
}
}
}
}
}
}

71
src/plugins/view/components/group.vue
View File

@ -6,18 +6,19 @@
<slot name="left">
<div class="scope">
<div class="head">
<span>{{ config.label }}</span>
<el-text class="label">{{ config.label }}</el-text>
<el-tooltip v-if="config.enableRefresh" content="刷新">
<el-icon @click="refresh()">
<el-icon class="icon" @click="refresh()">
<icon-refresh />
</el-icon>
</el-tooltip>
<el-tooltip v-if="config.enableAdd" content="添加">
<el-icon
v-permission="config.service.permission.add"
class="icon"
@click="edit()"
v-permission="config.service.permission.add"
>
<plus />
</el-icon>
@ -185,11 +186,13 @@ import { ElMessage, ElMessageBox } from 'element-plus';
import { isEmpty, merge } from 'lodash-es';
import { deepTree } from '/@/cool/utils';
import { type ClViewGroup } from '../types/index.d';
import { useClipboard } from '@vueuse/core';
const { browser, onScreenChange } = useBrowser();
const slots = useSlots();
const Form = useForm();
const { refs, setRefs } = useCool();
const { copy } = useClipboard();
// 配置
const config = reactive(
@ -428,6 +431,14 @@ function onContextMenu(e: any, item: ClViewGroup.Item) {
target: 'item'
},
list: [
{
label: '复制Key',
callback(done) {
done();
copy(item.key);
ElMessage.success('复制成功');
}
},
{
label: '编辑',
hidden: !config.service._permission.update,
@ -479,6 +490,21 @@ defineExpose({
$left-width: v-bind('config.leftWidth');
$bg: var(--el-bg-color);
.icon {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
height: 26px;
width: 26px;
font-size: 16px;
border-radius: 4px;
&:hover {
background-color: var(--el-fill-color-light);
}
}
&__wrap {
display: flex;
height: 100%;
@ -527,28 +553,25 @@ defineExpose({
font-size: 14px;
padding: 0 10px;
& > span {
&:nth-child(1) {
flex: 1;
}
.label {
flex: 1;
}
.el-icon {
padding: 5px;
font-size: 16px;
margin-left: 5px;
cursor: pointer;
border-radius: 4px;
&:hover {
background-color: var(--el-fill-color-lighter);
}
}
}
.search {
height: 40px;
padding: 0 10px;
:deep(.el-input__inner) {
&::placeholder {
font-size: 12px;
}
}
}
.data {
@ -579,15 +602,16 @@ defineExpose({
align-items: center;
list-style: none;
box-sizing: border-box;
padding: 10px 35px 10px 10px;
padding: 10px 34px 10px 10px;
margin: 0 10px;
cursor: pointer;
font-size: 13px;
font-size: 12px;
margin-bottom: 10px;
border-radius: 4px;
color: #666;
color: var(--el-text-color-regular);
position: relative;
background-color: #f7f7f7;
background-color: var(--el-fill-color-lighter);
line-height: 1;
.arrow-right {
position: absolute;
@ -640,16 +664,9 @@ defineExpose({
}
.icon {
display: flex;
align-items: center;
position: absolute;
left: 0;
top: 0;
font-size: 18px;
cursor: pointer;
height: 100%;
width: 80px;
padding-left: 10px;
left: 10px;
background-color: var(--el-fill-color-lighter);
}
}