qdintc/intc-workbenches
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:工作台初始化项目。

Browse Source
This commit is contained in:
tianyongbao
2025-12-11 09:15:47 +08:00
parent 824a387119
commit 613d14fac0
123 changed files with 33586 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

610
src/views/HomePage.vue Normal file
View File

@@ -0,0 +1,610 @@
<template>
<page class="home-page workbench-page">
<div class="workbench-header">
<h1>Qdintc - 统一工作平台</h1>
</div>
<div class="workbench-container">
<div class="tools-container">
<!-- 代码管理 -->
<div class="tool-category" v-if="codeTools.length > 0">
<h2 class="category-title">代码管理</h2>
<div class="category-items">
<div class="tool-card" v-for="tool in codeTools" :key="tool.name" @click="openTool(tool.url)">
<div class="tool-icon" :style="{background: tool.color}">
<span class="icon-text">{{ tool.icon }}</span>
</div>
<div class="tool-info">
<h4 class="tool-name">{{ tool.name }}</h4>
<p class="tool-desc">{{ tool.desc }}</p>
<p class="tool-url">{{ tool.displayUrl }}</p>
</div>
</div>
</div>
</div>
<!-- 持续集成 -->
<div class="tool-category" v-if="ciTools.length > 0">
<h2 class="category-title">持续集成</h2>
<div class="category-items">
<div class="tool-card" v-for="tool in ciTools" :key="tool.name" @click="openTool(tool.url)">
<div class="tool-icon" :style="{background: tool.color}">
<span class="icon-text">{{ tool.icon }}</span>
</div>
<div class="tool-info">
<h4 class="tool-name">{{ tool.name }}</h4>
<p class="tool-desc">{{ tool.desc }}</p>
<p class="tool-url">{{ tool.displayUrl }}</p>
</div>
</div>
</div>
</div>
<!-- 项目管理 -->
<div class="tool-category" v-if="projectTools.length > 0">
<h2 class="category-title">项目管理</h2>
<div class="category-items">
<div class="tool-card" v-for="tool in projectTools" :key="tool.name" @click="openTool(tool.url)">
<div class="tool-icon" :style="{background: tool.color}">
<span class="icon-text">{{ tool.icon }}</span>
</div>
<div class="tool-info">
<h4 class="tool-name">{{ tool.name }}</h4>
<p class="tool-desc">{{ tool.desc }}</p>
<p class="tool-url">{{ tool.displayUrl }}</p>
</div>
</div>
</div>
</div>
<!-- 数据库 -->
<div class="tool-category" v-if="databaseTools.length > 0">
<h2 class="category-title">数据库</h2>
<div class="category-items">
<div class="tool-card" v-for="tool in databaseTools" :key="tool.name" @click="openTool(tool.url)">
<div class="tool-icon" :style="{background: tool.color}">
<span class="icon-text">{{ tool.icon }}</span>
</div>
<div class="tool-info">
<h4 class="tool-name">{{ tool.name }}</h4>
<p class="tool-desc">{{ tool.desc }}</p>
<p class="tool-url">{{ tool.displayUrl }}</p>
</div>
</div>
</div>
</div>
<!-- 监控告警 -->
<div class="tool-category" v-if="monitorTools.length > 0">
<h2 class="category-title">监控告警</h2>
<div class="category-items">
<div class="tool-card" v-for="tool in monitorTools" :key="tool.name" @click="openTool(tool.url)">
<div class="tool-icon" :style="{background: tool.color}">
<span class="icon-text">{{ tool.icon }}</span>
</div>
<div class="tool-info">
<h4 class="tool-name">{{ tool.name }}</h4>
<p class="tool-desc">{{ tool.desc }}</p>
<p class="tool-url">{{ tool.displayUrl }}</p>
</div>
</div>
</div>
</div>
<!-- 文档知识 -->
<div class="tool-category" v-if="docTools.length > 0">
<h2 class="category-title">文档知识</h2>
<div class="category-items">
<div class="tool-card" v-for="tool in docTools" :key="tool.name" @click="openTool(tool.url)">
<div class="tool-icon" :style="{background: tool.color}">
<span class="icon-text">{{ tool.icon }}</span>
</div>
<div class="tool-info">
<h4 class="tool-name">{{ tool.name }}</h4>
<p class="tool-desc">{{ tool.desc }}</p>
<p class="tool-url">{{ tool.displayUrl }}</p>
</div>
</div>
</div>
</div>
<!-- 测试工具 -->
<div class="tool-category" v-if="testTools.length > 0">
<h2 class="category-title">测试工具</h2>
<div class="category-items">
<div class="tool-card" v-for="tool in testTools" :key="tool.name" @click="openTool(tool.url)">
<div class="tool-icon" :style="{background: tool.color}">
<span class="icon-text">{{ tool.icon }}</span>
</div>
<div class="tool-info">
<h4 class="tool-name">{{ tool.name }}</h4>
<p class="tool-desc">{{ tool.desc }}</p>
<p class="tool-url">{{ tool.displayUrl }}</p>
</div>
</div>
</div>
</div>
<!-- 安全扫描 -->
<div class="tool-category" v-if="securityTools.length > 0">
<h2 class="category-title">安全扫描</h2>
<div class="category-items">
<div class="tool-card" v-for="tool in securityTools" :key="tool.name" @click="openTool(tool.url)">
<div class="tool-icon" :style="{background: tool.color}">
<span class="icon-text">{{ tool.icon }}</span>
</div>
<div class="tool-info">
<h4 class="tool-name">{{ tool.name }}</h4>
<p class="tool-desc">{{ tool.desc }}</p>
<p class="tool-url">{{ tool.displayUrl }}</p>
</div>
</div>
</div>
</div>
<!-- 云平台 -->
<div class="tool-category" v-if="cloudTools.length > 0">
<h2 class="category-title">云平台</h2>
<div class="category-items">
<div class="tool-card" v-for="tool in cloudTools" :key="tool.name" @click="openTool(tool.url)">
<div class="tool-icon" :style="{background: tool.color}">
<span class="icon-text">{{ tool.icon }}</span>
</div>
<div class="tool-info">
<h4 class="tool-name">{{ tool.name }}</h4>
<p class="tool-desc">{{ tool.desc }}</p>
<p class="tool-url">{{ tool.displayUrl }}</p>
</div>
</div>
</div>
</div>
<!-- 其他工具 -->
<div class="tool-category" v-if="otherTools.length > 0">
<h2 class="category-title">其他工具</h2>
<div class="category-items">
<div class="tool-card" v-for="tool in otherTools" :key="tool.name" @click="openTool(tool.url)">
<div class="tool-icon" :style="{background: tool.color}">
<span class="icon-text">{{ tool.icon }}</span>
</div>
<div class="tool-info">
<h4 class="tool-name">{{ tool.name }}</h4>
<p class="tool-desc">{{ tool.desc }}</p>
<p class="tool-url">{{ tool.displayUrl }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</page>
</template>
<script>
import './less/home-page.less'
import Page from '../components/Page'
export default{
components: {Page},
data () {
return {
// 代码管理工具
codeTools: [
{
name: 'Gitea',
desc: 'Git代码仓库管理',
url: 'http://your-gitea-url.com',
displayUrl: 'gitea.company.com',
icon: 'Git',
color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
},
{
name: 'GitLab',
desc: 'DevOps生命周期工具',
url: 'http://your-gitlab-url.com',
displayUrl: 'gitlab.company.com',
icon: 'GL',
color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
}
],
// 持续集成工具
ciTools: [
{
name: 'Jenkins',
desc: '持续集成构建平台',
url: 'http://your-jenkins-url.com',
displayUrl: 'jenkins.company.com',
icon: 'JK',
color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
},
{
name: 'Harbor',
desc: 'Docker镜像仓库',
url: 'http://your-harbor-url.com',
displayUrl: 'harbor.company.com',
icon: 'HB',
color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
}
],
// 项目管理工具
projectTools: [
{
name: '禅道',
desc: '项目管理与Bug追踪',
url: 'http://your-zentao-url.com',
displayUrl: 'zentao.company.com',
icon: '禅',
color: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)'
},
{
name: 'Jira',
desc: '敏捷项目管理工具',
url: 'http://your-jira-url.com',
displayUrl: 'jira.company.com',
icon: 'JR',
color: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)'
}
],
// 数据库工具
databaseTools: [
{
name: 'MySQL',
desc: 'MySQL数据库管理',
url: 'http://your-mysql-url.com',
displayUrl: 'mysql.company.com',
icon: 'SQL',
color: 'linear-gradient(135deg, #f8b500 0%, #fceabb 100%)'
},
{
name: 'Redis',
desc: '缓存数据库管理',
url: 'http://your-redis-url.com',
displayUrl: 'redis.company.com',
icon: 'RD',
color: 'linear-gradient(135deg, #e43a15 0%, #e65245 100%)'
}
],
// 监控告警工具
monitorTools: [
{
name: 'Grafana',
desc: '监控数据可视化',
url: 'http://your-grafana-url.com',
displayUrl: 'grafana.company.com',
icon: 'GF',
color: 'linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)'
},
{
name: 'Prometheus',
desc: '系统监控告警平台',
url: 'http://your-prometheus-url.com',
displayUrl: 'prometheus.company.com',
icon: 'PM',
color: 'linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)'
}
],
// 文档知识工具
docTools: [
{
name: 'Confluence',
desc: '团队协作知识库',
url: 'http://your-confluence-url.com',
displayUrl: 'wiki.company.com',
icon: 'CF',
color: 'linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)'
},
{
name: 'GitBook',
desc: '文档编写平台',
url: 'http://your-gitbook-url.com',
displayUrl: 'docs.company.com',
icon: 'GB',
color: 'linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)'
}
],
// 测试工具
testTools: [
{
name: 'Selenium',
desc: '自动化测试平台',
url: 'http://your-selenium-url.com',
displayUrl: 'test.company.com',
icon: 'SE',
color: 'linear-gradient(135deg, #96fbc4 0%, #f9f586 100%)'
},
{
name: 'Postman',
desc: 'API测试工具',
url: 'http://your-postman-url.com',
displayUrl: 'api-test.company.com',
icon: 'PM',
color: 'linear-gradient(135deg, #ff9966 0%, #ff5e62 100%)'
}
],
// 安全扫描工具
securityTools: [
{
name: 'SonarQube',
desc: '代码质量检测平台',
url: 'http://your-sonar-url.com',
displayUrl: 'sonar.company.com',
icon: 'SQ',
color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)'
},
{
name: 'Trivy',
desc: '容器安全扫描',
url: 'http://your-trivy-url.com',
displayUrl: 'security.company.com',
icon: 'TV',
color: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)'
}
],
// 云平台工具
cloudTools: [
{
name: 'Kubernetes',
desc: '容器编排平台',
url: 'http://your-k8s-url.com',
displayUrl: 'k8s.company.com',
icon: 'K8s',
color: 'linear-gradient(135deg, #2af598 0%, #009efd 100%)'
},
{
name: 'Rancher',
desc: 'K8s集群管理',
url: 'http://your-rancher-url.com',
displayUrl: 'rancher.company.com',
icon: 'RC',
color: 'linear-gradient(135deg, #0ba360 0%, #3cba92 100%)'
}
],
// 其他工具
otherTools: [
{
name: 'Nexus',
desc: 'Maven私服仓库',
url: 'http://your-nexus-url.com',
displayUrl: 'nexus.company.com',
icon: 'NX',
color: 'linear-gradient(135deg, #fdcbf1 0%, #e6dee9 100%)'
},
{
name: 'Portainer',
desc: 'Docker容器管理',
url: 'http://your-portainer-url.com',
displayUrl: 'portainer.company.com',
icon: 'PT',
color: 'linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)'
}
]
}
},
created() {
this.init()
},
methods: {
openTool: function (url) {
if(url && url !== 'http://your-gitea-url.com') {
window.open(url, '_blank')
} else {
alert('请先配置该工具的访问地址')
}
}
}
};
</script>
<style scoped lang="less">
.workbench-page {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 0;
padding-top: 76px;
}
.workbench-container {
max-width: 1920px;
margin: 0 auto;
padding: 30px 20px;
}
.workbench-header {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
text-align: center;
padding: 20px 0;
background: rgba(255,255,255,0.08);
z-index: 1000;
backdrop-filter: blur(15px);
border-bottom: 1px solid rgba(255,255,255,0.15);
h1 {
font-size: 32px;
font-weight: 700;
color: #fff;
margin: 0;
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
p {
font-size: 16px;
color: rgba(255,255,255,0.85);
margin: 8px 0 0 0;
}
}
.tools-container {
display: flex;
flex-wrap: wrap;
gap: 25px 20px;
align-items: flex-start;
}
.tool-category {
flex: 0 1 auto;
.category-title {
font-size: 20px;
font-weight: 600;
color: #fff;
margin-bottom: 15px;
padding-left: 12px;
border-left: 4px solid rgba(255,255,255,0.8);
line-height: 1.5;
}
.category-items {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
}
.tool-card {
display: flex;
align-items: center;
padding: 14px 18px;
background: rgba(255,255,255,0.95);
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
width: 260px;
&:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
background: #fff;
}
}
.tool-icon {
width: 60px;
height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-right: 16px;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
.icon-text {
font-size: 24px;
font-weight: bold;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
}
.tool-info {
flex: 1;
min-width: 0;
}
.tool-name {
font-size: 18px;
font-weight: 600;
color: #333;
margin: 0 0 4px 0;
}
.tool-desc {
font-size: 13px;
color: #666;
margin: 0 0 4px 0;
}
.tool-url {
font-size: 12px;
color: #999;
font-family: 'Consolas', 'Monaco', monospace;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 1024px) {
.tools-container {
gap: 25px 30px;
}
.tool-category {
flex-direction: column;
width: 100%;
.category-title {
width: auto;
text-align: left;
padding: 10px 12px;
}
.category-items {
width: 100%;
}
}
.tool-card {
width: calc(50% - 8px);
}
.workbench-header h1 {
font-size: 36px;
}
}
@media (max-width: 600px) {
.workbench-container {
padding: 30px 15px;
}
.workbench-header {
margin-bottom: 30px;
h1 {
font-size: 28px;
}
p {
font-size: 14px;
}
}
.tools-container {
gap: 20px;
}
.tool-category {
.category-title {
font-size: 16px;
padding: 8px 10px;
}
}
.tool-card {
padding: 14px;
width: 100%;
}
.tool-icon {
width: 50px;
height: 50px;
margin-right: 12px;
.icon-text {
font-size: 20px;
}
}
.tool-name {
font-size: 16px;
}
.tool-desc {
font-size: 12px;
}
}
</style>