klinsmaya/SQLBot
1
0
Fork 0
mirror of https://gh-proxy.org/https://github.com/klinsmaya/SQLBot.git synced 2026-11-08 01:06:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: datasource page

Browse Source
This commit is contained in:
junjun
2025-04-22 18:11:09 +08:00
parent 30c27855d3
commit 5111fec1dd
1 changed files with 274 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/ds/index.vue
+274 -2
View File
@@ -1,3 +1,275 @@
<template>
<h2>this is ds page</h2>
</template>
<div>
<div class="header">
<div class="mt-4">
<el-input
v-model="input3"
style="max-width: 300px"
placeholder="Search Datasource..."
class="input-with-select"
>
<template #prepend>
<el-icon><Search /></el-icon>
</template>
</el-input>
</div>
<el-button type="primary" :icon="IconOpeAdd">Add Datasource</el-button>
</div>
<div class="connections-container">
<div
class="connection-card"
v-for="ds in mockData"
>
<div class="connection-icon">
<i class="mdi mdi-database"></i>
</div>
<div class="connection-details">
<div class="connection-name">{{ ds.name }}</div>
<div class="connection-type">{{ ds.type }}</div>
<div class="connection-host">{{ ds.host }}</div>
<div class="connection-last">{{ ds.create_time }}</div>
</div>
<div class="connection-status" :class="`${getStatus(ds.status)}`">{{ ds.status }}</div>
<div class="connection-actions">
<button class="action-btn">
<el-icon><IconOpeEdit /></el-icon>
</button>
<button class="action-btn">
<el-icon><IconOpeDelete /></el-icon>
</button>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import IconOpeAdd from '@/assets/svg/operate/ope-add.svg'
import IconOpeEdit from '@/assets/svg/operate/ope-edit.svg'
import IconOpeDelete from '@/assets/svg/operate/ope-delete.svg'
import { Search } from '@element-plus/icons-vue'
const mockData = [
{
name:'1',
type:'mysql',
host: '1.1.1.1',
description:'description',
create:'admin',
create_time:'2025-04-22',
status:'On'
},
{
name:'2',
type:'mysql',
host: '1.1.1.1',
description:'description',
create:'admin',
create_time:'2025-04-22',
status:'Off'
},
{
name:'3',
type:'mysql',
host: '1.1.1.1',
description:'description',
create:'admin',
create_time:'2025-04-22',
status:'Check'
},
{
name:'1',
type:'mysql',
host: '1.1.1.1',
description:'description',
create:'admin',
create_time:'2025-04-22',
status:'On'
},
{
name:'2',
type:'mysql',
host: '1.1.1.1',
description:'description',
create:'admin',
create_time:'2025-04-22',
status:'Off'
},
{
name:'3',
type:'mysql',
host: '1.1.1.1',
description:'description',
create:'admin',
create_time:'2025-04-22',
status:'Check'
},
{
name:'1',
type:'mysql',
host: '1.1.1.1',
description:'description',
create:'admin',
create_time:'2025-04-22',
status:'On'
},
{
name:'2',
type:'mysql',
host: '1.1.1.1',
description:'description',
create:'admin',
create_time:'2025-04-22',
status:'Off'
},
{
name:'3',
type:'mysql',
host: '1.1.1.1',
description:'description',
create:'admin',
create_time:'2025-04-22',
status:'Check'
}
]
const getStatus = function(status: string) {
if (status === 'On') {
return 'connected'
}
if (status === 'Off') {
return 'failed'
}
if (status === 'Check') {
return 'needs-verification'
}
}
</script>
<style lang="less" scoped>
.header{
background-color: white;
padding: 16px 20px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
display: flex;
justify-content: space-between;
}
.connections-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: 24px;
.connection-card {
background-color: white;
border-radius: 16px;
padding: 24px 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
display: flex;
position: relative;
border: 1px solid #dadce0;
transition: all 0.2s ease;
height: 110px;
align-items: center;
}
.connection-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background-color: #e8f0fe;
color: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
margin-right: 16px;
flex-shrink: 0;
}
.connection-details {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.connection-name {
font-weight: 600;
font-size: 18px;
color: #202124;
margin-bottom: 8px;
line-height: 1.3;
display: flex;
}
.connection-type {
color: #5f6368;
margin-bottom: 8px;
font-size: 14px;
display: flex;
}
.connection-host {
color: #5f6368;
margin-bottom: 8px;
font-size: 14px;
display: flex;
align-items: center;
}
.connection-last {
color: #5f6368;
font-size: 14px;
margin-bottom: 0;
display: flex;
align-items: center;
}
}
.connection-status {
position: absolute;
right: 20px;
top: 18px;
padding: 3px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
display: flex;
align-items: center;
max-width: 50px;
text-align: center;
justify-content: center;
opacity: 0.9;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.connection-status.connected {
background-color: #e6f4ea;
color: #34a853;
}
.connection-status.failed {
background-color: #fce8e6;
color: #ea4335;
}
.connection-status.needs-verification {
background-color: #fef7e0;
color: #fbbc05;
}
.connection-actions {
position: absolute;
bottom: 20px;
right: 20px;
display: flex;
transition: opacity 0.2s ease;
gap: 8px;
.action-btn {
width: 36px;
height: 36px;
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
color: #5f6368;
cursor: pointer;
transition: all 0.2s;
background-color: #f1f3f4;
border: none;
}
}
:hover .action-btn{
display: flex;
}
}
</style>