Add File
This commit is contained in:
274
frontend/src/views/system/embedded/Card.vue
Normal file
274
frontend/src/views/system/embedded/Card.vue
Normal file
@@ -0,0 +1,274 @@
|
||||
<script lang="ts" setup>
|
||||
import delIcon from '@/assets/svg/icon_delete.svg'
|
||||
import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
|
||||
import icon_embedded_outlined from '@/assets/embedded/icon_embedded_outlined.svg'
|
||||
import IconOpeEdit from '@/assets/svg/icon_edit_outlined.svg'
|
||||
import Lock from '@/assets/embedded/LOGO-sql.png'
|
||||
import { useAppearanceStoreWithOut } from '@/stores/appearance'
|
||||
import LOGO from '@/assets/svg/logo-custom_small.svg'
|
||||
import { ref, unref, computed } from 'vue'
|
||||
import { ClickOutside as vClickOutside } from 'element-plus-secondary'
|
||||
import icon_style_set_outlined from '@/assets/svg/icon_style-set_outlined.svg'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
name: string
|
||||
isBase: boolean
|
||||
description: string
|
||||
id?: string
|
||||
logo?: string
|
||||
}>(),
|
||||
{
|
||||
name: '-',
|
||||
isBase: false,
|
||||
id: '-',
|
||||
description: '-',
|
||||
logo: '',
|
||||
}
|
||||
)
|
||||
|
||||
const emits = defineEmits(['edit', 'del', 'embedded', 'ui'])
|
||||
const appearanceStore = useAppearanceStoreWithOut()
|
||||
|
||||
const handleEdit = () => {
|
||||
emits('edit')
|
||||
}
|
||||
|
||||
const handleUi = () => {
|
||||
emits('ui')
|
||||
}
|
||||
|
||||
const handleDel = () => {
|
||||
emits('del')
|
||||
}
|
||||
|
||||
const handleEmbedded = () => {
|
||||
emits('embedded')
|
||||
}
|
||||
|
||||
const buttonRef = ref()
|
||||
const popoverRef = ref()
|
||||
const onClickOutside = () => {
|
||||
unref(popoverRef).popperRef?.delayHide?.()
|
||||
}
|
||||
const basePath = import.meta.env.VITE_API_BASE_URL
|
||||
const baseUrl = basePath + '/system/assistant/picture/'
|
||||
const pageLogo = computed(() => {
|
||||
return props.logo.startsWith('blob') ? props.logo : baseUrl + props.logo
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="name-icon">
|
||||
<img v-if="props.logo" :src="pageLogo" width="32px" height="32px" />
|
||||
<el-icon v-else-if="appearanceStore.themeColor === 'custom'" size="32">
|
||||
<LOGO></LOGO>
|
||||
</el-icon>
|
||||
<img v-else :src="Lock" width="32px" height="32px" />
|
||||
<span class="name ellipsis" :title="name">{{ name }}</span>
|
||||
<span class="default" :class="isBase && 'is-base'">{{
|
||||
isBase ? $t('embedded.basic_application') : $t('embedded.advanced_application')
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="description" :title="description">{{ description }}</div>
|
||||
<div class="methods">
|
||||
<el-button secondary @click="handleEmbedded">
|
||||
<el-icon style="margin-right: 4px" size="16">
|
||||
<icon_embedded_outlined></icon_embedded_outlined>
|
||||
</el-icon>
|
||||
{{ $t('embedded.embed_third_party') }}
|
||||
</el-button>
|
||||
<el-button secondary @click="handleEdit">
|
||||
<el-icon style="margin-right: 4px" size="16">
|
||||
<IconOpeEdit></IconOpeEdit>
|
||||
</el-icon>
|
||||
{{ $t('dashboard.edit') }}
|
||||
</el-button>
|
||||
<el-icon ref="buttonRef" v-click-outside="onClickOutside" class="more" size="16" @click.stop>
|
||||
<icon_more_outlined></icon_more_outlined>
|
||||
</el-icon>
|
||||
|
||||
<el-popover
|
||||
ref="popoverRef"
|
||||
:virtual-ref="buttonRef"
|
||||
virtual-triggering
|
||||
trigger="click"
|
||||
:teleported="false"
|
||||
popper-class="popover-card"
|
||||
placement="bottom-start"
|
||||
>
|
||||
<div class="content">
|
||||
<div class="item" @click.stop="handleUi">
|
||||
<el-icon size="16">
|
||||
<icon_style_set_outlined></icon_style_set_outlined>
|
||||
</el-icon>
|
||||
{{ $t('embedded.display_settings') }}
|
||||
</div>
|
||||
<div class="item" @click.stop="handleDel">
|
||||
<el-icon size="16">
|
||||
<delIcon></delIcon>
|
||||
</el-icon>
|
||||
{{ $t('dashboard.delete') }}
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.card {
|
||||
width: 100%;
|
||||
height: 168px;
|
||||
border: 1px solid #dee0e3;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
&:hover {
|
||||
box-shadow: 0px 6px 24px 0px #1f232914;
|
||||
.methods {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.name-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
.name {
|
||||
margin-left: 12px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
max-width: calc(100% - 115px);
|
||||
}
|
||||
|
||||
.default {
|
||||
margin-left: auto;
|
||||
padding: 0 4px;
|
||||
border-radius: 4px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
background: #ff880033;
|
||||
color: #d97400;
|
||||
|
||||
&.is-base {
|
||||
background: var(--ed-color-primary-33, #1cba9033);
|
||||
color: var(--ed-color-primary-dark-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 12px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
max-width: 100%;
|
||||
display: -webkit-box;
|
||||
height: 44px;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
word-break: break-word;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.methods {
|
||||
margin-top: 16px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
.more {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin-left: 12px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
svg {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
border-radius: 6px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border: 1px solid #d9dcdf;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
background: #f5f6f7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.popover-card.popover-card.popover-card {
|
||||
box-shadow: 0px 4px 8px 0px #1f23291a;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dee0e3;
|
||||
width: 120px !important;
|
||||
min-width: 120px !important;
|
||||
padding: 0;
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 40px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #dee0e3;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
.ed-icon {
|
||||
margin-right: 8px;
|
||||
color: #646a73;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 112px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: #1f23291a;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user