修改了logo
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
zengjunhong 2025-01-16 11:13:13 +08:00
parent 400b88a9ff
commit 2c466460e3
2 changed files with 237 additions and 312 deletions

View File

@ -1,51 +1,11 @@
<template> <template>
<div> <div>
<el-card shadow="never">
<el-skeleton :loading="loading" animated>
<el-row :gutter="16" justify="space-between">
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
<div class="flex items-center">
<el-avatar :src="avatar" :size="70" class="mr-16px">
<img src="@/assets/imgs/avatar.gif" alt="" />
</el-avatar>
<div>
<div class="text-20px">
{{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }}
</div>
<div class="mt-10px text-14px text-gray-500">
{{ t('workplace.toady') }}20 - 32
</div>
</div>
</div>
</el-col>
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
<div class="h-70px flex items-center justify-end lt-sm:mt-10px">
<div class="px-8px text-right">
<div class="mb-16px text-14px text-gray-400">{{ t('workplace.project') }}</div>
<CountTo class="text-20px" :start-val="0" :end-val="totalSate.project" :duration="2600" />
</div>
<el-divider direction="vertical" />
<div class="px-8px text-right">
<div class="mb-16px text-14px text-gray-400">{{ t('workplace.toDo') }}</div>
<CountTo class="text-20px" :start-val="0" :end-val="totalSate.todo" :duration="2600" />
</div>
<el-divider direction="vertical" border-style="dashed" />
<div class="px-8px text-right">
<div class="mb-16px text-14px text-gray-400">{{ t('workplace.access') }}</div>
<CountTo class="text-20px" :start-val="0" :end-val="totalSate.access" :duration="2600" />
</div>
</div>
</el-col>
</el-row>
</el-skeleton>
</el-card>
</div> </div>
<!-- <el-card style="width: 100%; margin: 8px 0; text-align: center;" shadow="never"> --> <!-- <el-card style="width: 100%; margin: 8px 0; text-align: center;" shadow="never"> -->
<div class="flex flex-wrap gap-4" style="float: right;"> <div class="flex flex-wrap gap-4" style="float: right;">
<el-card <el-card style="width: 170px;margin: 8px 0;text-align: center;color:#409eff; cursor: pointer;" shadow="hover"
style="width: 170px;margin: 8px 0;text-align: center;color:#409eff; cursor: pointer;" shadow="hover" @click="goToXXLJob">任务调度中心</el-card>
@click="goToXXLJob">任务调度中心</el-card> </div>
</div>
<!-- </el-card> --> <!-- </el-card> -->
<!-- 新增的静态图片部分 --> <!-- 新增的静态图片部分 -->
<div> <div>
@ -166,236 +126,236 @@ style="width: 170px;margin: 8px 0;text-align: center;color:#409eff; cursor: poin
</el-row> --> </el-row> -->
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { set } from 'lodash-es' import { set } from 'lodash-es'
import { EChartsOption } from 'echarts' import { EChartsOption } from 'echarts'
import { formatTime } from '@/utils' import { formatTime } from '@/utils'
import luduView from '@/assets/imgs/ludu_view.png' import luduView from '@/assets/imgs/ludu_view.png'
import { useUserStore } from '@/store/modules/user' import { useUserStore } from '@/store/modules/user'
import { useWatermark } from '@/hooks/web/useWatermark' import { useWatermark } from '@/hooks/web/useWatermark'
import type { WorkplaceTotal, Project, Notice, Shortcut } from './types' import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
import { pieOptions, barOptions } from './echarts-data' import { pieOptions, barOptions } from './echarts-data'
defineOptions({ name: 'Home' }) defineOptions({ name: 'Home' })
const luduViewImage = ref(luduView); const luduViewImage = ref(luduView);
const { t } = useI18n() const { t } = useI18n()
const userStore = useUserStore() const userStore = useUserStore()
const { setWatermark } = useWatermark() const { setWatermark } = useWatermark()
const loading = ref(true) const loading = ref(true)
const avatar = userStore.getUser.avatar const avatar = userStore.getUser.avatar
const username = userStore.getUser.nickname const username = userStore.getUser.nickname
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
// //
let totalSate = reactive<WorkplaceTotal>({ let totalSate = reactive<WorkplaceTotal>({
project: 0, project: 0,
access: 0, access: 0,
todo: 0 todo: 0
}) })
const getCount = async () => { const getCount = async () => {
const data = { const data = {
project: 40, project: 40,
access: 2340, access: 2340,
todo: 10 todo: 10
}
totalSate = Object.assign(totalSate, data)
}
//
let projects = reactive<Project[]>([])
const getProject = async () => {
const data = [
{
name: 'ruoyi-vue-pro',
icon: 'akar-icons:github-fill',
message: 'https://github.com/YunaiV/ruoyi-vue-pro',
personal: 'Spring Boot 单体架构',
time: new Date()
},
{
name: 'yudao-ui-admin-vue3',
icon: 'logos:vue',
message: 'https://github.com/yudaocode/yudao-ui-admin-vue3',
personal: 'Vue3 + element-plus',
time: new Date()
},
{
name: 'yudao-ui-admin-vben',
icon: 'logos:vue',
message: 'https://github.com/yudaocode/yudao-ui-admin-vben',
personal: 'Vue3 + vben(antd)',
time: new Date()
},
{
name: 'yudao-cloud',
icon: 'akar-icons:github',
message: 'https://github.com/YunaiV/yudao-cloud',
personal: 'Spring Cloud 微服务架构',
time: new Date()
},
{
name: 'yudao-ui-mall-uniapp',
icon: 'logos:vue',
message: 'https://github.com/yudaocode/yudao-ui-admin-uniapp',
personal: 'Vue3 + uniapp',
time: new Date()
},
{
name: 'yudao-ui-admin-vue2',
icon: 'logos:vue',
message: 'https://github.com/yudaocode/yudao-ui-admin-vue2',
personal: 'Vue2 + element-ui',
time: new Date()
} }
totalSate = Object.assign(totalSate, data) ]
} projects = Object.assign(projects, data)
}
// //
let projects = reactive<Project[]>([]) let notice = reactive<Notice[]>([])
const getProject = async () => { const getNotice = async () => {
const data = [ const data = [
{ {
name: 'ruoyi-vue-pro', title: '系统支持 JDK 8/17/21Vue 2/3',
icon: 'akar-icons:github-fill', type: '通知',
message: 'https://github.com/YunaiV/ruoyi-vue-pro', keys: ['通知', '8', '17', '21', '2', '3'],
personal: 'Spring Boot 单体架构', date: new Date()
time: new Date() },
}, {
{ title: '后端提供 Spring Boot 2.7/3.2 + Cloud 双架构',
name: 'yudao-ui-admin-vue3', type: '公告',
icon: 'logos:vue', keys: ['公告', 'Boot', 'Cloud'],
message: 'https://github.com/yudaocode/yudao-ui-admin-vue3', date: new Date()
personal: 'Vue3 + element-plus', },
time: new Date() {
}, title: '全部开源,个人与企业可 100% 直接使用,无需授权',
{ type: '通知',
name: 'yudao-ui-admin-vben', keys: ['通知', '无需授权'],
icon: 'logos:vue', date: new Date()
message: 'https://github.com/yudaocode/yudao-ui-admin-vben', },
personal: 'Vue3 + vben(antd)', {
time: new Date() title: '国内使用最广泛的快速开发平台,超 300+ 人贡献',
}, type: '公告',
{ keys: ['公告', '最广泛'],
name: 'yudao-cloud', date: new Date()
icon: 'akar-icons:github', }
message: 'https://github.com/YunaiV/yudao-cloud', ]
personal: 'Spring Cloud 微服务架构', notice = Object.assign(notice, data)
time: new Date() }
},
{
name: 'yudao-ui-mall-uniapp',
icon: 'logos:vue',
message: 'https://github.com/yudaocode/yudao-ui-admin-uniapp',
personal: 'Vue3 + uniapp',
time: new Date()
},
{
name: 'yudao-ui-admin-vue2',
icon: 'logos:vue',
message: 'https://github.com/yudaocode/yudao-ui-admin-vue2',
personal: 'Vue2 + element-ui',
time: new Date()
}
]
projects = Object.assign(projects, data)
}
// //
let notice = reactive<Notice[]>([]) let shortcut = reactive<Shortcut[]>([])
const getNotice = async () => {
const data = [
{
title: '系统支持 JDK 8/17/21Vue 2/3',
type: '通知',
keys: ['通知', '8', '17', '21', '2', '3'],
date: new Date()
},
{
title: '后端提供 Spring Boot 2.7/3.2 + Cloud 双架构',
type: '公告',
keys: ['公告', 'Boot', 'Cloud'],
date: new Date()
},
{
title: '全部开源,个人与企业可 100% 直接使用,无需授权',
type: '通知',
keys: ['通知', '无需授权'],
date: new Date()
},
{
title: '国内使用最广泛的快速开发平台,超 300+ 人贡献',
type: '公告',
keys: ['公告', '最广泛'],
date: new Date()
}
]
notice = Object.assign(notice, data)
}
// const getShortcut = async () => {
let shortcut = reactive<Shortcut[]>([]) const data = [
{
name: 'Github',
icon: 'akar-icons:github-fill',
url: 'github.io'
},
{
name: 'Vue',
icon: 'logos:vue',
url: 'vuejs.org'
},
{
name: 'Vite',
icon: 'vscode-icons:file-type-vite',
url: 'https://vitejs.dev/'
},
{
name: 'Angular',
icon: 'logos:angular-icon',
url: 'github.io'
},
{
name: 'React',
icon: 'logos:react',
url: 'github.io'
},
{
name: 'Webpack',
icon: 'logos:webpack',
url: 'github.io'
}
]
shortcut = Object.assign(shortcut, data)
}
const getShortcut = async () => { //
const data = [ const getUserAccessSource = async () => {
{ const data = [
name: 'Github', { value: 335, name: 'analysis.directAccess' },
icon: 'akar-icons:github-fill', { value: 310, name: 'analysis.mailMarketing' },
url: 'github.io' { value: 234, name: 'analysis.allianceAdvertising' },
}, { value: 135, name: 'analysis.videoAdvertising' },
{ { value: 1548, name: 'analysis.searchEngines' }
name: 'Vue', ]
icon: 'logos:vue', set(
url: 'vuejs.org' pieOptionsData,
}, 'legend.data',
{ data.map((v) => t(v.name))
name: 'Vite', )
icon: 'vscode-icons:file-type-vite', pieOptionsData!.series![0].data = data.map((v) => {
url: 'https://vitejs.dev/' return {
}, name: t(v.name),
{ value: v.value
name: 'Angular', }
icon: 'logos:angular-icon', })
url: 'github.io' }
}, const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
{
name: 'React',
icon: 'logos:react',
url: 'github.io'
},
{
name: 'Webpack',
icon: 'logos:webpack',
url: 'github.io'
}
]
shortcut = Object.assign(shortcut, data)
}
// //
const getUserAccessSource = async () => { const getWeeklyUserActivity = async () => {
const data = [ const data = [
{ value: 335, name: 'analysis.directAccess' }, { value: 13253, name: 'analysis.monday' },
{ value: 310, name: 'analysis.mailMarketing' }, { value: 34235, name: 'analysis.tuesday' },
{ value: 234, name: 'analysis.allianceAdvertising' }, { value: 26321, name: 'analysis.wednesday' },
{ value: 135, name: 'analysis.videoAdvertising' }, { value: 12340, name: 'analysis.thursday' },
{ value: 1548, name: 'analysis.searchEngines' } { value: 24643, name: 'analysis.friday' },
] { value: 1322, name: 'analysis.saturday' },
set( { value: 1324, name: 'analysis.sunday' }
pieOptionsData, ]
'legend.data', set(
data.map((v) => t(v.name)) barOptionsData,
) 'xAxis.data',
pieOptionsData!.series![0].data = data.map((v) => { data.map((v) => t(v.name))
return { )
name: t(v.name), set(barOptionsData, 'series', [
value: v.value {
} name: t('analysis.activeQuantity'),
}) data: data.map((v) => v.value),
} type: 'bar'
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption }
])
}
// const getAllApi = async () => {
const getWeeklyUserActivity = async () => { await Promise.all([
const data = [ getCount(),
{ value: 13253, name: 'analysis.monday' }, getProject(),
{ value: 34235, name: 'analysis.tuesday' }, getNotice(),
{ value: 26321, name: 'analysis.wednesday' }, getShortcut(),
{ value: 12340, name: 'analysis.thursday' }, getUserAccessSource(),
{ value: 24643, name: 'analysis.friday' }, getWeeklyUserActivity()
{ value: 1322, name: 'analysis.saturday' }, ])
{ value: 1324, name: 'analysis.sunday' } loading.value = false
] }
set(
barOptionsData,
'xAxis.data',
data.map((v) => t(v.name))
)
set(barOptionsData, 'series', [
{
name: t('analysis.activeQuantity'),
data: data.map((v) => v.value),
type: 'bar'
}
])
}
const getAllApi = async () => { const goToXXLJob = async () => {
await Promise.all([ window.open('http://121.36.203.133/xxl-job-admin/');
getCount(), }
getProject(), getAllApi()
getNotice(),
getShortcut(),
getUserAccessSource(),
getWeeklyUserActivity()
])
loading.value = false
}
const goToXXLJob = async () => {
window.open('http://121.36.203.133/xxl-job-admin/');
}
getAllApi()
</script> </script>
<style scoped> <style scoped>
.image-container { .image-container {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.el-image img { .el-image img {
width: 100%; width: 100%;
height: auto; height: auto;
} }
</style> </style>

View File

@ -1,14 +1,6 @@
<template> <template>
<el-form <el-form v-show="getShow" ref="formLogin" :model="loginData.loginForm" :rules="LoginRules" class="login-form"
v-show="getShow" label-position="top" label-width="120px" size="large">
ref="formLogin"
:model="loginData.loginForm"
:rules="LoginRules"
class="login-form"
label-position="top"
label-width="120px"
size="large"
>
<el-row style="margin-right: -10px; margin-left: -10px"> <el-row style="margin-right: -10px; margin-left: -10px">
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item> <el-form-item>
@ -17,40 +9,23 @@
</el-col> </el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName"> <el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
<el-input <el-input v-model="loginData.loginForm.tenantName" :placeholder="t('login.tenantNamePlaceholder')"
v-model="loginData.loginForm.tenantName" :prefix-icon="iconHouse" link type="primary" />
:placeholder="t('login.tenantNamePlaceholder')"
:prefix-icon="iconHouse"
link
type="primary"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item prop="username"> <el-form-item prop="username">
<el-input <el-input v-model="loginData.loginForm.username" :placeholder="t('login.usernamePlaceholder')"
v-model="loginData.loginForm.username" :prefix-icon="iconAvatar" />
:placeholder="t('login.usernamePlaceholder')"
:prefix-icon="iconAvatar"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item prop="password"> <el-form-item prop="password">
<el-input <el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')"
v-model="loginData.loginForm.password" :prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" />
:placeholder="t('login.passwordPlaceholder')"
:prefix-icon="iconLock"
show-password
type="password"
@keyup.enter="getCode()"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col <el-col :span="24" style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px">
:span="24"
style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px"
>
<el-form-item> <el-form-item>
<el-row justify="space-between" style="width: 100%"> <el-row justify="space-between" style="width: 100%">
<el-col :span="6"> <el-col :span="6">
@ -66,22 +41,12 @@
</el-col> </el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item> <el-form-item>
<XButton <XButton :loading="loginLoading" :title="t('login.login')" class="w-[100%]" type="primary"
:loading="loginLoading" @click="getCode()" />
:title="t('login.login')"
class="w-[100%]"
type="primary"
@click="getCode()"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<Verify <Verify ref="verify" :captchaType="captchaType" :imgSize="{ width: '400px', height: '200px' }" mode="pop"
ref="verify" @success="handleLogin" />
:captchaType="captchaType"
:imgSize="{ width: '400px', height: '200px' }"
mode="pop"
@success="handleLogin"
/>
<!-- <el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <!-- <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item> <el-form-item>
<el-row :gutter="5" justify="space-between" style="width: 100%"> <el-row :gutter="5" justify="space-between" style="width: 100%">
@ -184,9 +149,9 @@ const loginData = reactive({
captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE, captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE, tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
loginForm: { loginForm: {
tenantName: '芋道源码', tenantName: '智慧码头',
username: 'admin', username: 'admin',
password: 'admin123', password: 'mt@6688',
captchaVerification: '', captchaVerification: '',
rememberMe: true // rememberMe: true //
} }