iidi
/
main-web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 增加应用中心(待对接)

develop
时启龙 2024-08-26 14:30:29 +08:00
parent b0c157f769
commit 42951cc395
6 changed files with 218 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
build/plugin.ts
View File

@ -9,7 +9,7 @@
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver, ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import AutoImport from 'unplugin-auto-import/vite'
@ -49,7 +49,6 @@ export default [
}),
Components({
resolvers: [
AntDesignVueResolver(),
ElementPlusResolver({
importStyle: 'sass'
}),

8
src/components.d.ts vendored
View File

@ -36,14 +36,22 @@ declare module '@vue/runtime-core' {
ElTabs: typeof import('element-plus/es')['ElTabs']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
Empty: typeof import('./components/empty/Empty.vue')['default']
IconEpApp: typeof import('~icons/ep/app')['default']
IconEpArrowDown: typeof import('~icons/ep/arrow-down')['default']
IconEpArrowLeft: typeof import('~icons/ep/arrow-left')['default']
IconEpArrowRight: typeof import('~icons/ep/arrow-right')['default']
IconEpBell: typeof import('~icons/ep/bell')['default']
IconEpBellFill: typeof import('~icons/ep/bell-fill')['default']
IconEpBellFilled: typeof import('~icons/ep/bell-filled')['default']
IconEpG0ird: typeof import('~icons/ep/g0ird')['default']
IconEpGird: typeof import('~icons/ep/gird')['default']
IconEpGrid: typeof import('~icons/ep/grid')['default']
IconEpHomeFilled: typeof import('~icons/ep/home-filled')['default']
IconEpKey: typeof import('~icons/ep/key')['default']
IconEpLock: typeof import('~icons/ep/lock')['default']
IconEpPlus: typeof import('~icons/ep/plus')['default']
IconEpRight: typeof import('~icons/ep/right')['default']
IconEpSearch: typeof import('~icons/ep/search')['default']
IconEpSwitchButton: typeof import('~icons/ep/switch-button')['default']
IconEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
IconEpUser: typeof import('~icons/ep/user')['default']

4
src/css/common.scss
View File

@ -505,3 +505,7 @@ a {
display: none;
}
}
.cur-point {
cursor: pointer !important;
}

18
src/icons/svg/svg-apps.svg Normal file
View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>系统切换</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="下拉" transform="translate(-1637.000000, -18.000000)" fill="#7E84A3">
<g id="top" transform="translate(0.000000, 0.500000)">
<g id="编组-5" transform="translate(1637.000000, 16.500000)">
<g id="编组-4" transform="translate(1.000000, 2.321573)">
<rect id="矩形" x="0" y="0.678427125" width="9" height="9" rx="2"></rect>
<rect id="矩形备份-3" x="0" y="10.6784271" width="9" height="9" rx="2"></rect>
<path d="M17.186453,0.383198505 L14.5077798,0.383198505 C12.8509255,0.383198505 11.5077798,1.72634426 11.5077798,3.38319851 L11.5077798,6.06187169 C11.5077798,7.71872594 12.8509255,9.06187169 14.5077798,9.06187169 L17.186453,9.06187169 C18.8433072,9.06187169 20.186453,7.71872594 20.186453,6.06187169 L20.186453,3.38319851 C20.186453,1.72634426 18.8433072,0.383198505 17.186453,0.383198505 Z M14.5077798,2.38319851 L17.186453,2.38319851 C17.7387377,2.38319851 18.186453,2.83091376 18.186453,3.38319851 L18.186453,6.06187169 C18.186453,6.61415644 17.7387377,7.06187169 17.186453,7.06187169 L14.5077798,7.06187169 C13.955495,7.06187169 13.5077798,6.61415644 13.5077798,6.06187169 L13.5077798,3.38319851 C13.5077798,2.83091376 13.955495,2.38319851 14.5077798,2.38319851 Z" id="矩形备份" fill-rule="nonzero" transform="translate(15.847116, 4.722535) rotate(-45.000000) translate(-15.847116, -4.722535) "></path>
<rect id="矩形备份-4" x="11" y="10.6784271" width="9" height="9" rx="2"></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

185
src/layouts/components/AppsList.vue Normal file
View File

@ -0,0 +1,185 @@
<template>
<el-dropdown class="system-letter" popper-class="custom-dropdown-popper custom-dropdown-message" trigger="click">
<span class="m-r-md">
<el-icon class="message-icon cur-point"><svg-icon icon-name="svg-apps" class="cur-point" /></el-icon>
</span>
<template #dropdown>
<el-card class="list-group">
<template #header>
<div class="card-header">
<el-input v-model="appName" autocomplete="off" placeholder="搜索">
<template #prefix>
<el-icon>
<icon-ep-search />
</el-icon>
</template>
</el-input>
</div>
</template>
<div v-for="item in appList" :key="item.id" class="list-group-item" @click="goPage(item)" :style="{ cursor: !item.enable ? 'not-allowed' : 'pointer' }">
<el-icon style="font-size: 38px"><svg-icon :icon-name="item.icon" /></el-icon>
<span class="text-content">{{ item.name }}</span>
</div>
<empty v-if="appList.length === 0"></empty>
</el-card>
</template>
</el-dropdown>
</template>
<script>
import { ref } from 'vue'
import { getTrxToken } from 'utils/auth'
import { getMessage } from '@/services/message'
export default {
setup() {
const appName = ref('')
const allAppList = ref([])
const getAppList = async () => {
const data = await getMessage({
page: 1,
rows: 5
})
if (data.success) {
allAppList.value = [
{
name: 'a系统',
id: 1,
icon: 'svg-apps',
url: 'https://www.baidu.com',
enable: true
},
{
name: 'b系统',
id: 2,
icon: 'svg-apps',
url: 'https://www.baidu.com',
enable: true
},
{
name: 'c系统',
id: 3,
icon: 'svg-apps',
url: 'https://www.baidu.com',
enable: true
},
{
name: 'd系统',
id: 4,
icon: 'svg-apps',
url: 'https://www.baidu.com',
enable: true
},
{
name: 'e系统',
id: 5,
icon: 'svg-apps',
url: 'https://www.baidu.com',
enable: true
},
{
name: 'f系统',
id: 6,
icon: 'svg-apps',
url: 'https://www.baidu.com',
enable: true
},
{
name: 'g系统',
id: 7,
icon: 'svg-apps',
url: 'https://www.baidu.com',
enable: true
},
{
name: 'h系统',
id: 8,
icon: 'svg-apps',
url: 'https://www.baidu.com',
enable: true
},
{
name: 'i系统',
id: 9,
icon: 'svg-apps',
url: 'https://www.baidu.com',
enable: true
},
{
name: 'j系统',
id: 10,
icon: 'svg-apps',
url: 'https://www.baidu.com',
enable: false
}
]
}
}
getAppList()
const appList = computed(() => {
if (!appName.value) return allAppList.value
return allAppList.value.filter(item => item.name.includes(appName.value))
})
const goPage = item => {
if (!item.enable) return
const url = new URL(item.url)
url.searchParams.append('SYS_AUTH_TOKEN', getTrxToken())
window.open(url.toString(), '_blank')
}
return {
appName,
appList,
goPage
}
}
}
</script>
<style lang="scss" scoped>
.system-letter {
display: flex;
align-items: center;
.message-icon {
font-size: 20px;
color: #98a6ad;
}
:deep(.#{$namespace}-badge__content) {
border: none;
}
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.list-group {
padding: 0 !important;
width: 320px;
margin: 0;
.list-group-item {
position: relative;
display: inline-flex;
align-items: center;
flex-direction: column;
width: 33%;
margin: 18px 0;
.text-content {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #273478;
margin-top: 11px;
font-size: 14px;
}
}
}
</style>
<style>
.custom-dropdown-popper.custom-dropdown-message {
margin-top: 10px !important;
border: none;
}
</style>

2
src/layouts/components/RightContent.vue
View File

@ -11,6 +11,7 @@
<!-- <service-order v-if="hasFms"></service-order> -->
<!-- <HelpCenter v-if="userData" /> -->
</template>
<AppsList></AppsList>
<site-message></site-message>
<personal-info></personal-info>
</div>
@ -21,6 +22,7 @@ import { computed } from 'vue'
import PersonalInfo from './personal/index.vue'
import ServiceOrder from './ServiceOrder.vue'
import SiteMessage from './SiteMessage.vue'
import AppsList from './AppsList.vue'
// import HelpCenter from './HelpCenter.vue'
import { useStore } from 'vuex'