manager/c-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化前端目录

Browse Source
This commit is contained in:
gaoxq
2025-09-02 00:11:55 +08:00
parent 5d3d515b8e
commit 239be643c1
11 changed files with 1458 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
capi-ui/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <title>cApi系统管理</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

102
capi-ui/package-lock.json generated
View File

@@ -9,8 +9,11 @@
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@ant-design/icons-vue": "^7.0.1", "@ant-design/icons-vue": "^7.0.1",
"@iconify/iconify": "^3.1.1",
"@iconify/vue": "^5.0.0",
"ant-design-vue": "^4.2.6", "ant-design-vue": "^4.2.6",
"axios": "^1.11.0", "axios": "^1.11.0",
"echarts": "^6.0.0",
"pinia": "^3.0.3", "pinia": "^3.0.3",
"vue": "^3.2.8", "vue": "^3.2.8",
"vue-router": "^4.5.1" "vue-router": "^4.5.1"
@@ -152,11 +155,23 @@
"integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==", "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/@iconify/iconify": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/@iconify/iconify/-/iconify-3.1.1.tgz",
"integrity": "sha512-1nemfyD/OJzh9ALepH7YfuuP8BdEB24Skhd8DXWh0hzcOxImbb1ZizSZkpCzAwSZSGcJFmscIBaBQu+yLyWaxQ==",
"deprecated": "no longer maintained, switch to modern iconify-icon web component",
"license": "MIT",
"dependencies": {
"@iconify/types": "^2.0.0"
},
"funding": {
"url": "https://github.com/sponsors/cyberalien"
}
},
"node_modules/@iconify/types": { "node_modules/@iconify/types": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmmirror.com/@iconify/types/-/types-2.0.0.tgz", "resolved": "https://registry.npmmirror.com/@iconify/types/-/types-2.0.0.tgz",
"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==", "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/@iconify/utils": { "node_modules/@iconify/utils": {
@@ -176,6 +191,21 @@
"mlly": "^1.7.4" "mlly": "^1.7.4"
} }
}, },
"node_modules/@iconify/vue": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-5.0.0.tgz",
"integrity": "sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==",
"license": "MIT",
"dependencies": {
"@iconify/types": "^2.0.0"
},
"funding": {
"url": "https://github.com/sponsors/cyberalien"
},
"peerDependencies": {
"vue": ">=3"
}
},
"node_modules/@jridgewell/gen-mapping": { "node_modules/@jridgewell/gen-mapping": {
"version": "0.3.13", "version": "0.3.13",
"resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -977,6 +1007,16 @@
"node": ">= 0.4" "node": ">= 0.4"
} }
}, },
"node_modules/echarts": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz",
"integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
"license": "Apache-2.0",
"dependencies": {
"tslib": "2.3.0",
"zrender": "6.0.0"
}
},
"node_modules/entities": { "node_modules/entities": {
"version": "4.5.0", "version": "4.5.0",
"resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz", "resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
@@ -1884,6 +1924,12 @@
"node": ">=8.0" "node": ">=8.0"
} }
}, },
"node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
"license": "0BSD"
},
"node_modules/ufo": { "node_modules/ufo": {
"version": "1.6.1", "version": "1.6.1",
"resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.6.1.tgz", "resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.6.1.tgz",
@@ -1909,7 +1955,7 @@
}, },
"node_modules/unplugin-icons": { "node_modules/unplugin-icons": {
"version": "22.2.0", "version": "22.2.0",
"resolved": "https://registry.npmmirror.com/unplugin-icons/-/unplugin-icons-22.2.0.tgz", "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-22.2.0.tgz",
"integrity": "sha512-OdrXCiXexC1rFd0QpliAgcd4cMEEEQtoCf2WIrRIGu4iW6auBPpQKMCBeWxoe55phYdRyZLUWNOtzyTX+HOFSA==", "integrity": "sha512-OdrXCiXexC1rFd0QpliAgcd4cMEEEQtoCf2WIrRIGu4iW6auBPpQKMCBeWxoe55phYdRyZLUWNOtzyTX+HOFSA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
@@ -2156,6 +2202,15 @@
"integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==", "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
},
"node_modules/zrender": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz",
"integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==",
"license": "BSD-3-Clause",
"dependencies": {
"tslib": "2.3.0"
}
} }
}, },
"dependencies": { "dependencies": {
@@ -2244,11 +2299,18 @@
"resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.8.1.tgz", "resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.8.1.tgz",
"integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
}, },
"@iconify/iconify": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/@iconify/iconify/-/iconify-3.1.1.tgz",
"integrity": "sha512-1nemfyD/OJzh9ALepH7YfuuP8BdEB24Skhd8DXWh0hzcOxImbb1ZizSZkpCzAwSZSGcJFmscIBaBQu+yLyWaxQ==",
"requires": {
"@iconify/types": "^2.0.0"
}
},
"@iconify/types": { "@iconify/types": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmmirror.com/@iconify/types/-/types-2.0.0.tgz", "resolved": "https://registry.npmmirror.com/@iconify/types/-/types-2.0.0.tgz",
"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==", "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="
"dev": true
}, },
"@iconify/utils": { "@iconify/utils": {
"version": "2.3.0", "version": "2.3.0",
@@ -2266,6 +2328,14 @@
"mlly": "^1.7.4" "mlly": "^1.7.4"
} }
}, },
"@iconify/vue": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-5.0.0.tgz",
"integrity": "sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==",
"requires": {
"@iconify/types": "^2.0.0"
}
},
"@jridgewell/gen-mapping": { "@jridgewell/gen-mapping": {
"version": "0.3.13", "version": "0.3.13",
"resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -2746,6 +2816,15 @@
"gopd": "^1.2.0" "gopd": "^1.2.0"
} }
}, },
"echarts": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz",
"integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
"requires": {
"tslib": "2.3.0",
"zrender": "6.0.0"
}
},
"entities": { "entities": {
"version": "4.5.0", "version": "4.5.0",
"resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz", "resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
@@ -3325,6 +3404,11 @@
"is-number": "^7.0.0" "is-number": "^7.0.0"
} }
}, },
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
},
"ufo": { "ufo": {
"version": "1.6.1", "version": "1.6.1",
"resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.6.1.tgz", "resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.6.1.tgz",
@@ -3353,7 +3437,7 @@
}, },
"unplugin-icons": { "unplugin-icons": {
"version": "22.2.0", "version": "22.2.0",
"resolved": "https://registry.npmmirror.com/unplugin-icons/-/unplugin-icons-22.2.0.tgz", "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-22.2.0.tgz",
"integrity": "sha512-OdrXCiXexC1rFd0QpliAgcd4cMEEEQtoCf2WIrRIGu4iW6auBPpQKMCBeWxoe55phYdRyZLUWNOtzyTX+HOFSA==", "integrity": "sha512-OdrXCiXexC1rFd0QpliAgcd4cMEEEQtoCf2WIrRIGu4iW6auBPpQKMCBeWxoe55phYdRyZLUWNOtzyTX+HOFSA==",
"dev": true, "dev": true,
"requires": { "requires": {
@@ -3479,6 +3563,14 @@
"resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz", "resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
"integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==", "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
"dev": true "dev": true
},
"zrender": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz",
"integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==",
"requires": {
"tslib": "2.3.0"
}
} }
} }
} }

3
capi-ui/package.json
View File

@@ -9,8 +9,11 @@
}, },
"dependencies": { "dependencies": {
"@ant-design/icons-vue": "^7.0.1", "@ant-design/icons-vue": "^7.0.1",
"@iconify/iconify": "^3.1.1",
"@iconify/vue": "^5.0.0",
"ant-design-vue": "^4.2.6", "ant-design-vue": "^4.2.6",
"axios": "^1.11.0", "axios": "^1.11.0",
"echarts": "^6.0.0",
"pinia": "^3.0.3", "pinia": "^3.0.3",
"vue": "^3.2.8", "vue": "^3.2.8",
"vue-router": "^4.5.1" "vue-router": "^4.5.1"

BIN
capi-ui/public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
capi-ui/public/my.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

1083
capi-ui/src/components/Layout/AdminLayout.vue Normal file
View File

File diff suppressed because it is too large Load Diff

4
capi-ui/src/main.js
View File

@@ -8,7 +8,11 @@ import 'ant-design-vue/dist/reset.css'
const app = createApp(App) const app = createApp(App)
const pinia = createPinia()
app.use(createPinia()) // 注册Pinia app.use(createPinia()) // 注册Pinia
app.use(router) // 注册路由 app.use(router) // 注册路由
app.use(pinia);
app.use(Antd) // 注册Ant Design Vue app.use(Antd) // 注册Ant Design Vue
app.mount('#app') app.mount('#app')

4
capi-ui/src/store/index.ts Normal file
View File

@@ -0,0 +1,4 @@
import { createPinia } from 'pinia';
const pinia = createPinia();
export default pinia;

373
capi-ui/src/views/sys/Dashboard.vue
View File

@@ -1,39 +1,77 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<a-layout style="min-height: 100%;"> <a-layout style="min-height: 100%;">
<!-- 顶部导航栏 --> <!-- 顶部导航栏：使用渐变淡蓝色背景 -->
<a-layout-header class="header"> <a-layout-header class="header">
<!-- 左侧Logo和系统名称 - 增加了图标 -->
<div class="logo"> <div class="logo">
<ApiOutlined /> <img src="/my.png" class="logo-img" />
<span>Capi系统</span> <span class="system-name">cApi </span>
</div> </div>
<!-- 主导航菜单：调整按钮大小和间距 -->
<a-menu <a-menu
theme="light" theme="light"
mode="horizontal" mode="horizontal"
:selectedKeys="selectedKey" :selectedKeys="selectedKey"
class="menu" class="main-menu"
@click="handleMenuClick" @click="handleMenuClick"
> >
<a-menu-item key="api">API管理</a-menu-item> <a-menu-item key="app" class="menu-button">
<a-menu-item key="data">数据管理</a-menu-item> <ApiOutlined class="menu-icon" />
<a-menu-item key="system">系统管理</a-menu-item> <span>应用中心</span>
</a-menu-item>
<a-menu-item key="data" class="menu-button">
<DatabaseOutlined class="menu-icon" />
<span>数据中心</span>
</a-menu-item>
<a-menu-item key="integration" class="menu-button">
<LinkOutlined class="menu-icon" />
<span>集成中心</span>
</a-menu-item>
<a-menu-item key="system" class="menu-button">
<SettingOutlined class="menu-icon" />
<span>系统管理</span>
</a-menu-item>
</a-menu> </a-menu>
<!-- 管理员区域：下拉菜单 --> <!-- 右侧功能区：搜索框、图标和用户 -->
<div class="admin"> <div class="header-actions">
<!-- 搜索框 -->
<div class="search-box">
<SearchOutlined class="search-icon" />
<input type="text" placeholder="搜索" class="search-input" />
</div>
<!-- 功能图标区 -->
<div class="action-icons">
<a-tooltip title="收藏">
<StarOutlined class="action-icon" />
</a-tooltip>
<a-tooltip title="通知">
<BellOutlined class="action-icon" />
</a-tooltip>
<a-tooltip title="帮助">
<QuestionCircleOutlined class="action-icon" />
</a-tooltip>
<a-tooltip title="设置">
<SettingOutlined class="action-icon" />
</a-tooltip>
</div>
<!-- 用户头像 -->
<a-dropdown <a-dropdown
placement="bottomRight" placement="bottomRight"
:auto-adjust-overflow="true" :auto-adjust-overflow="true"
@visible-change="handleDropdownVisible" @visible-change="handleDropdownVisible"
> >
<span class="admin-btn"> <div class="user-avatar">
<UserOutlined /> 管理员 <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="avatar-img" />
<DownOutlined class="ml-2" /> </div>
</span>
<template #overlay> <template #overlay>
<a-menu class="logout-menu" @click="handleLogout" selected-keys=""> <a-menu class="user-menu" @click="handleUserMenuClick">
<a-menu-item key="profile">个人资料</a-menu-item>
<a-menu-item key="settings">账户设置</a-menu-item>
<a-menu-divider />
<a-menu-item key="logout" class="logout-menu-item"> <a-menu-item key="logout" class="logout-menu-item">
<LogoutOutlined class="mr-2" /> 退出登录 <LogoutOutlined class="mr-2" /> 退出登录
</a-menu-item> </a-menu-item>
@@ -43,12 +81,13 @@
</div> </div>
</a-layout-header> </a-layout-header>
<!-- 标签栏：始终显示 --> <!-- 标签栏：保持原有功能 -->
<div class="tab-bar"> <div class="tab-bar">
<a-tag <a-tag
:class="['console-tab', activeTabKey === 'console' ? 'console-tab--active' : '']" :class="['console-tab', activeTabKey === 'console' ? 'console-tab--active' : '']"
@click="switchToConsole" @click="switchToConsole"
> >
<HomeOutlined class="console-tab-icon" />
<span>控制台</span> <span>控制台</span>
</a-tag> </a-tag>
@@ -97,7 +136,7 @@
</a-button> </a-button>
</div> </div>
<!-- 内容区域：统一通过component渲染（含控制台） --> <!-- 内容区域：保持原有功能 -->
<a-layout-content class="content"> <a-layout-content class="content">
<div class="home-content"> <div class="home-content">
<component <component
@@ -108,7 +147,7 @@
</a-layout-content> </a-layout-content>
</a-layout> </a-layout>
<!-- 模块菜单弹窗（80%宽度） --> <!-- 模块菜单弹窗：保持原有功能 -->
<a-modal <a-modal
v-model:open="moduleModalVisible" v-model:open="moduleModalVisible"
:title="currentModuleName" :title="currentModuleName"
@@ -145,7 +184,7 @@
</div> </div>
</a-modal> </a-modal>
<!-- 退出确认对话框 --> <!-- 退出确认对话框：保持原有功能 -->
<a-modal <a-modal
v-model:open="logoutVisible" v-model:open="logoutVisible"
:centered="true" :centered="true"
@@ -180,12 +219,12 @@
<script setup> <script setup>
import { ref, computed, h } from 'vue'; import { ref, computed, h } from 'vue';
import { Layout, Menu, Button, Tabs, Card, Tag, Dropdown, Modal, Row, Col } from 'ant-design-vue'; import { Layout, Menu, Button, Tabs, Card, Tag, Dropdown, Modal, Row, Col, Tooltip } from 'ant-design-vue';
import { import {
ApiOutlined, ApiOutlined,
UserOutlined, UserOutlined,
CloseOutlined, CloseOutlined,
DownOutlined, LinkOutlined,
LogoutOutlined, LogoutOutlined,
ExclamationCircleOutlined, ExclamationCircleOutlined,
BarChartOutlined, BarChartOutlined,
@@ -193,13 +232,19 @@ import {
SettingOutlined, SettingOutlined,
FormOutlined, FormOutlined,
HistoryOutlined, HistoryOutlined,
UserAddOutlined UserAddOutlined,
HomeOutlined,
DatabaseOutlined, // 用于系统名称前的图标
SearchOutlined,
StarOutlined,
BellOutlined,
QuestionCircleOutlined
} from '@ant-design/icons-vue'; } from '@ant-design/icons-vue';
// 导入Main组件（控制台要展示的内容） // 导入Main组件（控制台要展示的内容）
import Main from './main.vue'; // 假设main.vue与当前文件在同一目录 import Main from './main.vue';
// 模拟业务组件（实际项目中替换为真实组件） // 模拟业务组件
const MockComponent = (props) => { const MockComponent = (props) => {
return h('div', { style: { padding: '20px' } }, [ return h('div', { style: { padding: '20px' } }, [
h('h3', `这是${props.title}页面`), h('h3', `这是${props.title}页面`),
@@ -209,34 +254,27 @@ const MockComponent = (props) => {
// 模块与菜单映射配置 // 模块与菜单映射配置
const moduleMenusConfig = { const moduleMenusConfig = {
api: { app: {
name: 'API管理', name: '应用中心',
menus: [ menus: [
{ {
key: 'api-list', key: 'app-list',
title: 'API列表', title: '应用列表',
icon: ApiOutlined, icon: ApiOutlined,
component: () => h(MockComponent, { title: 'API列表' }), component: () => h(MockComponent, { title: '应用列表' }),
closable: true closable: true
}, },
{ {
key: 'api-add', key: 'app-create',
title: 'API创建', title: '创建应用',
icon: FormOutlined, icon: FormOutlined,
component: () => h(MockComponent, { title: 'API创建' }), component: () => h(MockComponent, { title: '创建应用' }),
closable: true
},
{
key: 'api-history',
title: '调用记录',
icon: HistoryOutlined,
component: () => h(MockComponent, { title: 'API调用记录' }),
closable: true closable: true
} }
] ]
}, },
data: { data: {
name: '数据管理', name: '数据中心',
menus: [ menus: [
{ {
key: 'data-analytics', key: 'data-analytics',
@@ -254,6 +292,25 @@ const moduleMenusConfig = {
} }
] ]
}, },
integration: {
name: '集成中心',
menus: [
{
key: 'api-list',
title: 'API列表',
icon: ApiOutlined,
component: () => h(MockComponent, { title: 'API列表' }),
closable: true
},
{
key: 'integration-history',
title: '集成记录',
icon: HistoryOutlined,
component: () => h(MockComponent, { title: '集成记录' }),
closable: true
}
]
},
system: { system: {
name: '系统管理', name: '系统管理',
menus: [ menus: [
@@ -270,31 +327,24 @@ const moduleMenusConfig = {
icon: UserOutlined, icon: UserOutlined,
component: () => h(MockComponent, { title: '用户管理' }), component: () => h(MockComponent, { title: '用户管理' }),
closable: true closable: true
},
{
key: 'user-add',
title: '用户新增',
icon: UserAddOutlined,
component: () => h(MockComponent, { title: '用户新增' }),
closable: true
} }
] ]
} }
}; };
// 状态管理 // 状态管理
const selectedKey = ref(['api']); const selectedKey = ref(['console']);
const moduleModalVisible = ref(false); const moduleModalVisible = ref(false);
const currentModuleKey = ref(''); const currentModuleKey = ref('console');
const activeTabKey = ref('console'); const activeTabKey = ref('console');
// 标签页数据：初始包含控制台，控制台组件使用Main.vue // 标签页数据
const allTabs = ref([ const allTabs = ref([
{ {
key: 'console', key: 'console',
title: '控制台', title: '控制台',
component: Main, // 这里使用导入的Main组件 component: Main,
closable: false // 控制台标签不可关闭 closable: false
} }
]); ]);
@@ -359,16 +409,10 @@ const switchTab = (direction) => {
}; };
const deleteTab = (key) => { const deleteTab = (key) => {
// 禁止删除控制台标签
if (key === 'console') return; if (key === 'console') return;
const tabIndex = allTabs.value.findIndex(tab => tab.key === key); const tabIndex = allTabs.value.findIndex(tab => tab.key === key);
if (tabIndex === -1) return; if (tabIndex === -1) return;
// 过滤掉要删除的标签
allTabs.value = allTabs.value.filter(tab => tab.key !== key); allTabs.value = allTabs.value.filter(tab => tab.key !== key);
// 如果删除的是当前激活的标签，切换到前一个标签或控制台
if (key === activeTabKey.value) { if (key === activeTabKey.value) {
const targetTab = allTabs.value[tabIndex - 1] || allTabs.value.find(tab => tab.key === 'console'); const targetTab = allTabs.value[tabIndex - 1] || allTabs.value.find(tab => tab.key === 'console');
activeTabKey.value = targetTab.key; activeTabKey.value = targetTab.key;
@@ -376,24 +420,26 @@ const deleteTab = (key) => {
}; };
const closeAllTabs = () => { const closeAllTabs = () => {
// 只保留控制台标签
allTabs.value = allTabs.value.filter(tab => tab.key === 'console'); allTabs.value = allTabs.value.filter(tab => tab.key === 'console');
activeTabKey.value = 'console'; activeTabKey.value = 'console';
}; };
const handleTabChange = (key) => { const handleTabChange = (key) => {
activeTabKey.value = key; activeTabKey.value = key;
// 根据标签页映射到对应的模块
const tabToModuleMap = { const tabToModuleMap = {
'api-list': 'api', 'dashboard': 'console',
'api-add': 'api', 'tasks': 'console',
'api-history': 'api', 'app-list': 'app',
'app-create': 'app',
'data-analytics': 'data', 'data-analytics': 'data',
'data-export': 'data', 'data-export': 'data',
'api-list': 'integration',
'integration-history': 'integration',
'system-settings': 'system', 'system-settings': 'system',
'user-manage': 'system', 'user-manage': 'system'
'user-add': 'system'
}; };
selectedKey.value = [tabToModuleMap[key] || 'api']; selectedKey.value = [tabToModuleMap[key] || 'console'];
}; };
const handleMenuClick = ({ key }) => { const handleMenuClick = ({ key }) => {
@@ -404,8 +450,6 @@ const handleMenuClick = ({ key }) => {
const handleMenuCardClick = (menuItem) => { const handleMenuCardClick = (menuItem) => {
moduleModalVisible.value = false; moduleModalVisible.value = false;
// 检查标签是否已存在，不存在则添加
const isTabExists = allTabs.value.some(tab => tab.key === menuItem.key); const isTabExists = allTabs.value.some(tab => tab.key === menuItem.key);
if (!isTabExists) { if (!isTabExists) {
allTabs.value.push({ allTabs.value.push({
@@ -415,8 +459,6 @@ const handleMenuCardClick = (menuItem) => {
closable: menuItem.closable closable: menuItem.closable
}); });
} }
// 切换到该标签
activeTabKey.value = menuItem.key; activeTabKey.value = menuItem.key;
}; };
@@ -424,8 +466,15 @@ const handleDropdownVisible = (visible) => {
console.log('下拉菜单状态：', visible ? '显示' : '隐藏'); console.log('下拉菜单状态：', visible ? '显示' : '隐藏');
}; };
const logoutVisible = ref(false); const handleUserMenuClick = ({ key }) => {
if (key === 'logout') {
handleLogout();
} else {
console.log('用户菜单点击：', key);
}
};
const logoutVisible = ref(false);
const handleLogout = () => { const handleLogout = () => {
logoutVisible.value = true; logoutVisible.value = true;
}; };
@@ -435,11 +484,13 @@ const doLogout = () => {
localStorage.removeItem('userInfo'); localStorage.removeItem('userInfo');
logoutVisible.value = false; logoutVisible.value = false;
alert('退出登录成功，即将跳转到登录页'); alert('退出登录成功，即将跳转到登录页');
// 实际项目中应该使用路由跳转
// router.push('/login');
}; };
</script> </script>
<style scoped> <style scoped>
/* 样式内容与之前保持一致 */ /* 基础样式 */
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -456,67 +507,169 @@ body,
flex-direction: column; flex-direction: column;
} }
/* 顶部导航 */ /* 顶部导航：使用渐变淡蓝色背景 */
.header { .header {
background: #fff;
border-bottom: 1px solid #e0e0e0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 20px; padding: 0 20px;
height: 64px; height: 64px;
width: 100%; width: 100%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); background: linear-gradient(90deg, #e6f7ff 0%, #f0f9ff 100%);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
} }
/* Logo和系统名称 - 添加了图标样式 */
.logo { .logo {
display: flex; display: flex;
align-items: center; align-items: center;
padding-right: 20px;
border-right: 1px solid rgba(24, 144, 255, 0.1);
gap: 10px; /* 图标与文字间距 */
}
.logo-icon {
color: #1890ff;
font-size: 22px;
}
.logo-img {
width: 65px; /* 与文字高度匹配，可根据图片比例调整 */
height: 65px;
object-fit: contain; /* 关键：保持图片比例，避免拉伸变形 */
vertical-align: middle; /* 与文字垂直居中对齐 */
}
.system-name {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #1890ff; color: #1890ff;
} }
.logo span {
margin-left: 8px; /* 主导航菜单：优化按钮样式 */
} .main-menu {
.menu {
flex: 1; flex: 1;
margin: 0 40px; margin: 0 25px;
justify-content: center; justify-content: flex-start;
} }
.admin { :deep(.ant-menu-horizontal) {
display: flex; background: transparent !important;
align-items: center; border-bottom: none !important;
} }
.admin-btn { /* 调整按钮大小和间距 */
display: flex; .menu-button {
align-items: center;
padding: 8px 16px;
cursor: pointer;
border-radius: 4px; border-radius: 4px;
transition: background 0.2s; margin: 110 120px !important;
transition: all 0.3s ease;
margin-top: 12px;
} }
.admin-btn:hover { :deep(.ant-menu-item) {
background: #f5f9ff; color: #096dd9 !important; /* 加深文字颜色，增强对比 */
font-size: 13px; /* 缩小字体 */
padding: 0 12px !important; /* 减小内边距 */
height: 36px !important; /* 减小按钮高度 */
line-height: 36px !important;
background-color: rgba(255, 255, 255, 0.8) !important; /* 调整背景透明度 */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
:deep(.ant-menu-item-selected) {
background-color: #fff !important;
color: #096dd9 !important;
box-shadow: 0 2px 6px rgba(24, 144, 255, 0.2);
}
:deep(.ant-menu-item:hover:not(.ant-menu-item-selected)) {
background-color: #fff !important;
color: #096dd9 !important;
transform: translateY(-1px);
box-shadow: 0 2px 5px rgba(24, 144, 255, 0.15);
}
.menu-icon {
margin-right: 6px; /* 减小图标与文字间距 */
font-size: 14px; /* 缩小图标 */
}
/* 右侧功能区 */
.header-actions {
display: flex;
align-items: center;
gap: 16px;
}
/* 搜索框 */
.search-box {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.8);
border-radius: 4px;
padding: 0 12px;
height: 36px;
width: 240px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.search-icon {
color: #8c8c8c;
margin-right: 8px;
}
.search-input {
background: transparent;
border: none;
outline: none;
color: #333;
width: 100%;
font-size: 14px;
}
.search-input::placeholder {
color: #b3b3b3;
}
/* 功能图标区 */
.action-icons {
display: flex;
align-items: center;
gap: 16px;
padding-right: 16px;
border-right: 1px solid rgba(24, 144, 255, 0.1);
}
.action-icon {
color: #1890ff; color: #1890ff;
font-size: 18px;
cursor: pointer;
transition: all 0.2s;
} }
.logout-menu { .action-icon:hover {
width: 140px; color: #096dd9;
transform: scale(1.1);
}
/* 用户头像 */
.user-avatar {
cursor: pointer;
}
.avatar-img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
border: 2px solid transparent;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: all 0.2s;
}
.user-avatar:hover .avatar-img {
border-color: #1890ff;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(24, 144, 255, 0.2);
}
/* 用户菜单 */
.user-menu {
width: 160px;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
} }
.logout-menu-item { .logout-menu-item {
height: 40px; color: #f5222d !important;
display: flex;
align-items: center;
color: #666;
font-size: 14px;
}
.logout-menu-item:hover {
background-color: #e8f4ff !important;
color: #1890ff !important;
} }
/* 标签栏：始终显示 */ /* 标签栏：保持原有样式 */
.tab-bar { .tab-bar {
background: #fff; background: #fff;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;
@@ -543,6 +696,10 @@ body,
background: transparent; background: transparent;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.console-tab-icon {
margin-right: 6px;
font-size: 14px;
}
.console-tab--active { .console-tab--active {
background: #e8f4ff !important; background: #e8f4ff !important;
color: #1890ff; color: #1890ff;
@@ -671,7 +828,7 @@ body,
font-size: 12px; font-size: 12px;
} }
/* 内容区域 */ /* 内容区域：保持原有样式 */
.content { .content {
background: #f8f9fa; background: #f8f9fa;
padding: 16px; padding: 16px;
@@ -688,7 +845,7 @@ body,
overflow: auto; overflow: auto;
} }
/* 模块菜单弹窗 */ /* 模块菜单弹窗：保持原有样式 */
.module-modal-wrapper .ant-modal-content { .module-modal-wrapper .ant-modal-content {
border-radius: 8px; border-radius: 8px;
} }
@@ -727,7 +884,7 @@ body,
font-weight: 500; font-weight: 500;
} }
/* 退出对话框 */ /* 退出对话框：保持原有样式 */
.logout-modal-wrapper .ant-modal { .logout-modal-wrapper .ant-modal {
width: 480px !important; width: 480px !important;
} }

1
capi-ui/src/views/sys/main.vue
View File

@@ -1,5 +1,4 @@
<template> <template>
sddddddddddddd
</template> </template>
<script> <script>

1
capi-ui/vite.config.js
View File

@@ -24,6 +24,7 @@ export default ({ mode }) => {
], ],
}), }),
Icons({ Icons({
compiler: 'vue3',
autoInstall: true, // 自动安装图标依赖 autoInstall: true, // 自动安装图标依赖
}), }),
], ],