初始化前端目录
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<title>cApi系统管理</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
102
capi-ui/package-lock.json
generated
102
capi-ui/package-lock.json
generated
@@ -9,8 +9,11 @@
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@ant-design/icons-vue": "^7.0.1",
|
||||
"@iconify/iconify": "^3.1.1",
|
||||
"@iconify/vue": "^5.0.0",
|
||||
"ant-design-vue": "^4.2.6",
|
||||
"axios": "^1.11.0",
|
||||
"echarts": "^6.0.0",
|
||||
"pinia": "^3.0.3",
|
||||
"vue": "^3.2.8",
|
||||
"vue-router": "^4.5.1"
|
||||
@@ -152,11 +155,23 @@
|
||||
"integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
|
||||
"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": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/@iconify/types/-/types-2.0.0.tgz",
|
||||
"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@iconify/utils": {
|
||||
@@ -176,6 +191,21 @@
|
||||
"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": {
|
||||
"version": "0.3.13",
|
||||
"resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
|
||||
@@ -977,6 +1007,16 @@
|
||||
"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": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
|
||||
@@ -1884,6 +1924,12 @@
|
||||
"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": {
|
||||
"version": "1.6.1",
|
||||
"resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.6.1.tgz",
|
||||
@@ -1909,7 +1955,7 @@
|
||||
},
|
||||
"node_modules/unplugin-icons": {
|
||||
"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==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
@@ -2156,6 +2202,15 @@
|
||||
"integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
|
||||
"dev": true,
|
||||
"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": {
|
||||
@@ -2244,11 +2299,18 @@
|
||||
"resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.8.1.tgz",
|
||||
"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": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/@iconify/types/-/types-2.0.0.tgz",
|
||||
"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="
|
||||
},
|
||||
"@iconify/utils": {
|
||||
"version": "2.3.0",
|
||||
@@ -2266,6 +2328,14 @@
|
||||
"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": {
|
||||
"version": "0.3.13",
|
||||
"resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
|
||||
@@ -2746,6 +2816,15 @@
|
||||
"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": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
|
||||
@@ -3325,6 +3404,11 @@
|
||||
"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": {
|
||||
"version": "1.6.1",
|
||||
"resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.6.1.tgz",
|
||||
@@ -3353,7 +3437,7 @@
|
||||
},
|
||||
"unplugin-icons": {
|
||||
"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==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
@@ -3479,6 +3563,14 @@
|
||||
"resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
|
||||
"integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,8 +9,11 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons-vue": "^7.0.1",
|
||||
"@iconify/iconify": "^3.1.1",
|
||||
"@iconify/vue": "^5.0.0",
|
||||
"ant-design-vue": "^4.2.6",
|
||||
"axios": "^1.11.0",
|
||||
"echarts": "^6.0.0",
|
||||
"pinia": "^3.0.3",
|
||||
"vue": "^3.2.8",
|
||||
"vue-router": "^4.5.1"
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
BIN
capi-ui/public/my.png
Normal file
BIN
capi-ui/public/my.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
1083
capi-ui/src/components/Layout/AdminLayout.vue
Normal file
1083
capi-ui/src/components/Layout/AdminLayout.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -8,7 +8,11 @@ import 'ant-design-vue/dist/reset.css'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
const pinia = createPinia()
|
||||
|
||||
|
||||
app.use(createPinia()) // 注册Pinia
|
||||
app.use(router) // 注册路由
|
||||
app.use(pinia);
|
||||
app.use(Antd) // 注册Ant Design Vue
|
||||
app.mount('#app')
|
||||
4
capi-ui/src/store/index.ts
Normal file
4
capi-ui/src/store/index.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
import { createPinia } from 'pinia';
|
||||
|
||||
const pinia = createPinia();
|
||||
export default pinia;
|
||||
@@ -1,39 +1,77 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<a-layout style="min-height: 100%;">
|
||||
<!-- 顶部导航栏 -->
|
||||
<!-- 顶部导航栏：使用渐变淡蓝色背景 -->
|
||||
<a-layout-header class="header">
|
||||
<!-- 左侧Logo和系统名称 - 增加了图标 -->
|
||||
<div class="logo">
|
||||
<ApiOutlined />
|
||||
<span>Capi系统</span>
|
||||
<img src="/my.png" class="logo-img" />
|
||||
<span class="system-name">cApi </span>
|
||||
</div>
|
||||
|
||||
<!-- 主导航菜单：调整按钮大小和间距 -->
|
||||
<a-menu
|
||||
theme="light"
|
||||
mode="horizontal"
|
||||
:selectedKeys="selectedKey"
|
||||
class="menu"
|
||||
class="main-menu"
|
||||
@click="handleMenuClick"
|
||||
>
|
||||
<a-menu-item key="api">API管理</a-menu-item>
|
||||
<a-menu-item key="data">数据管理</a-menu-item>
|
||||
<a-menu-item key="system">系统管理</a-menu-item>
|
||||
<a-menu-item key="app" class="menu-button">
|
||||
<ApiOutlined class="menu-icon" />
|
||||
<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>
|
||||
|
||||
<!-- 管理员区域：下拉菜单 -->
|
||||
<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
|
||||
placement="bottomRight"
|
||||
:auto-adjust-overflow="true"
|
||||
@visible-change="handleDropdownVisible"
|
||||
>
|
||||
<span class="admin-btn">
|
||||
<UserOutlined /> 管理员
|
||||
<DownOutlined class="ml-2" />
|
||||
</span>
|
||||
|
||||
<div class="user-avatar">
|
||||
<img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="avatar-img" />
|
||||
</div>
|
||||
<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">
|
||||
<LogoutOutlined class="mr-2" /> 退出登录
|
||||
</a-menu-item>
|
||||
@@ -43,12 +81,13 @@
|
||||
</div>
|
||||
</a-layout-header>
|
||||
|
||||
<!-- 标签栏：始终显示 -->
|
||||
<!-- 标签栏：保持原有功能 -->
|
||||
<div class="tab-bar">
|
||||
<a-tag
|
||||
:class="['console-tab', activeTabKey === 'console' ? 'console-tab--active' : '']"
|
||||
@click="switchToConsole"
|
||||
>
|
||||
<HomeOutlined class="console-tab-icon" />
|
||||
<span>控制台</span>
|
||||
</a-tag>
|
||||
|
||||
@@ -97,7 +136,7 @@
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域：统一通过component渲染（含控制台） -->
|
||||
<!-- 内容区域：保持原有功能 -->
|
||||
<a-layout-content class="content">
|
||||
<div class="home-content">
|
||||
<component
|
||||
@@ -108,7 +147,7 @@
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
|
||||
<!-- 模块菜单弹窗（80%宽度） -->
|
||||
<!-- 模块菜单弹窗：保持原有功能 -->
|
||||
<a-modal
|
||||
v-model:open="moduleModalVisible"
|
||||
:title="currentModuleName"
|
||||
@@ -145,7 +184,7 @@
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
<!-- 退出确认对话框 -->
|
||||
<!-- 退出确认对话框：保持原有功能 -->
|
||||
<a-modal
|
||||
v-model:open="logoutVisible"
|
||||
:centered="true"
|
||||
@@ -180,12 +219,12 @@
|
||||
|
||||
<script setup>
|
||||
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 {
|
||||
ApiOutlined,
|
||||
UserOutlined,
|
||||
CloseOutlined,
|
||||
DownOutlined,
|
||||
LinkOutlined,
|
||||
LogoutOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
BarChartOutlined,
|
||||
@@ -193,13 +232,19 @@ import {
|
||||
SettingOutlined,
|
||||
FormOutlined,
|
||||
HistoryOutlined,
|
||||
UserAddOutlined
|
||||
UserAddOutlined,
|
||||
HomeOutlined,
|
||||
DatabaseOutlined, // 用于系统名称前的图标
|
||||
SearchOutlined,
|
||||
StarOutlined,
|
||||
BellOutlined,
|
||||
QuestionCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
// 导入Main组件（控制台要展示的内容）
|
||||
import Main from './main.vue'; // 假设main.vue与当前文件在同一目录
|
||||
import Main from './main.vue';
|
||||
|
||||
// 模拟业务组件（实际项目中替换为真实组件）
|
||||
// 模拟业务组件
|
||||
const MockComponent = (props) => {
|
||||
return h('div', { style: { padding: '20px' } }, [
|
||||
h('h3', `这是${props.title}页面`),
|
||||
@@ -209,34 +254,27 @@ const MockComponent = (props) => {
|
||||
|
||||
// 模块与菜单映射配置
|
||||
const moduleMenusConfig = {
|
||||
api: {
|
||||
name: 'API管理',
|
||||
app: {
|
||||
name: '应用中心',
|
||||
menus: [
|
||||
{
|
||||
key: 'api-list',
|
||||
title: 'API列表',
|
||||
key: 'app-list',
|
||||
title: '应用列表',
|
||||
icon: ApiOutlined,
|
||||
component: () => h(MockComponent, { title: 'API列表' }),
|
||||
component: () => h(MockComponent, { title: '应用列表' }),
|
||||
closable: true
|
||||
},
|
||||
{
|
||||
key: 'api-add',
|
||||
title: 'API创建',
|
||||
key: 'app-create',
|
||||
title: '创建应用',
|
||||
icon: FormOutlined,
|
||||
component: () => h(MockComponent, { title: 'API创建' }),
|
||||
closable: true
|
||||
},
|
||||
{
|
||||
key: 'api-history',
|
||||
title: '调用记录',
|
||||
icon: HistoryOutlined,
|
||||
component: () => h(MockComponent, { title: 'API调用记录' }),
|
||||
component: () => h(MockComponent, { title: '创建应用' }),
|
||||
closable: true
|
||||
}
|
||||
]
|
||||
},
|
||||
data: {
|
||||
name: '数据管理',
|
||||
name: '数据中心',
|
||||
menus: [
|
||||
{
|
||||
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: {
|
||||
name: '系统管理',
|
||||
menus: [
|
||||
@@ -270,31 +327,24 @@ const moduleMenusConfig = {
|
||||
icon: UserOutlined,
|
||||
component: () => h(MockComponent, { title: '用户管理' }),
|
||||
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 currentModuleKey = ref('');
|
||||
const currentModuleKey = ref('console');
|
||||
const activeTabKey = ref('console');
|
||||
|
||||
// 标签页数据：初始包含控制台，控制台组件使用Main.vue
|
||||
// 标签页数据
|
||||
const allTabs = ref([
|
||||
{
|
||||
key: 'console',
|
||||
title: '控制台',
|
||||
component: Main, // 这里使用导入的Main组件
|
||||
closable: false // 控制台标签不可关闭
|
||||
component: Main,
|
||||
closable: false
|
||||
}
|
||||
]);
|
||||
|
||||
@@ -359,16 +409,10 @@ const switchTab = (direction) => {
|
||||
};
|
||||
|
||||
const deleteTab = (key) => {
|
||||
// 禁止删除控制台标签
|
||||
if (key === 'console') return;
|
||||
|
||||
const tabIndex = allTabs.value.findIndex(tab => tab.key === key);
|
||||
if (tabIndex === -1) return;
|
||||
|
||||
// 过滤掉要删除的标签
|
||||
allTabs.value = allTabs.value.filter(tab => tab.key !== key);
|
||||
|
||||
// 如果删除的是当前激活的标签，切换到前一个标签或控制台
|
||||
if (key === activeTabKey.value) {
|
||||
const targetTab = allTabs.value[tabIndex - 1] || allTabs.value.find(tab => tab.key === 'console');
|
||||
activeTabKey.value = targetTab.key;
|
||||
@@ -376,24 +420,26 @@ const deleteTab = (key) => {
|
||||
};
|
||||
|
||||
const closeAllTabs = () => {
|
||||
// 只保留控制台标签
|
||||
allTabs.value = allTabs.value.filter(tab => tab.key === 'console');
|
||||
activeTabKey.value = 'console';
|
||||
};
|
||||
|
||||
const handleTabChange = (key) => {
|
||||
activeTabKey.value = key;
|
||||
// 根据标签页映射到对应的模块
|
||||
const tabToModuleMap = {
|
||||
'api-list': 'api',
|
||||
'api-add': 'api',
|
||||
'api-history': 'api',
|
||||
'dashboard': 'console',
|
||||
'tasks': 'console',
|
||||
'app-list': 'app',
|
||||
'app-create': 'app',
|
||||
'data-analytics': 'data',
|
||||
'data-export': 'data',
|
||||
'api-list': 'integration',
|
||||
'integration-history': 'integration',
|
||||
'system-settings': 'system',
|
||||
'user-manage': 'system',
|
||||
'user-add': 'system'
|
||||
'user-manage': 'system'
|
||||
};
|
||||
selectedKey.value = [tabToModuleMap[key] || 'api'];
|
||||
selectedKey.value = [tabToModuleMap[key] || 'console'];
|
||||
};
|
||||
|
||||
const handleMenuClick = ({ key }) => {
|
||||
@@ -404,8 +450,6 @@ const handleMenuClick = ({ key }) => {
|
||||
|
||||
const handleMenuCardClick = (menuItem) => {
|
||||
moduleModalVisible.value = false;
|
||||
|
||||
// 检查标签是否已存在，不存在则添加
|
||||
const isTabExists = allTabs.value.some(tab => tab.key === menuItem.key);
|
||||
if (!isTabExists) {
|
||||
allTabs.value.push({
|
||||
@@ -415,8 +459,6 @@ const handleMenuCardClick = (menuItem) => {
|
||||
closable: menuItem.closable
|
||||
});
|
||||
}
|
||||
|
||||
// 切换到该标签
|
||||
activeTabKey.value = menuItem.key;
|
||||
};
|
||||
|
||||
@@ -424,8 +466,15 @@ const handleDropdownVisible = (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 = () => {
|
||||
logoutVisible.value = true;
|
||||
};
|
||||
@@ -435,11 +484,13 @@ const doLogout = () => {
|
||||
localStorage.removeItem('userInfo');
|
||||
logoutVisible.value = false;
|
||||
alert('退出登录成功，即将跳转到登录页');
|
||||
// 实际项目中应该使用路由跳转
|
||||
// router.push('/login');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 样式内容与之前保持一致 */
|
||||
/* 基础样式 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -456,67 +507,169 @@ body,
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 顶部导航 */
|
||||
/* 顶部导航：使用渐变淡蓝色背景 */
|
||||
.header {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
height: 64px;
|
||||
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 {
|
||||
display: flex;
|
||||
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-weight: 600;
|
||||
color: #1890ff;
|
||||
}
|
||||
.logo span {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.menu {
|
||||
|
||||
/* 主导航菜单：优化按钮样式 */
|
||||
.main-menu {
|
||||
flex: 1;
|
||||
margin: 0 40px;
|
||||
justify-content: center;
|
||||
margin: 0 25px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.admin {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
:deep(.ant-menu-horizontal) {
|
||||
background: transparent !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
.admin-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
/* 调整按钮大小和间距 */
|
||||
.menu-button {
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
margin: 110 120px !important;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.admin-btn:hover {
|
||||
background: #f5f9ff;
|
||||
:deep(.ant-menu-item) {
|
||||
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;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.logout-menu {
|
||||
width: 140px;
|
||||
.action-icon:hover {
|
||||
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;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.logout-menu-item {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
.logout-menu-item:hover {
|
||||
background-color: #e8f4ff !important;
|
||||
color: #1890ff !important;
|
||||
color: #f5222d !important;
|
||||
}
|
||||
|
||||
/* 标签栏：始终显示 */
|
||||
/* 标签栏：保持原有样式 */
|
||||
.tab-bar {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
@@ -543,6 +696,10 @@ body,
|
||||
background: transparent;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.console-tab-icon {
|
||||
margin-right: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.console-tab--active {
|
||||
background: #e8f4ff !important;
|
||||
color: #1890ff;
|
||||
@@ -671,7 +828,7 @@ body,
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
/* 内容区域：保持原有样式 */
|
||||
.content {
|
||||
background: #f8f9fa;
|
||||
padding: 16px;
|
||||
@@ -688,7 +845,7 @@ body,
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* 模块菜单弹窗 */
|
||||
/* 模块菜单弹窗：保持原有样式 */
|
||||
.module-modal-wrapper .ant-modal-content {
|
||||
border-radius: 8px;
|
||||
}
|
||||
@@ -727,7 +884,7 @@ body,
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 退出对话框 */
|
||||
/* 退出对话框：保持原有样式 */
|
||||
.logout-modal-wrapper .ant-modal {
|
||||
width: 480px !important;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<template>
|
||||
sddddddddddddd
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -24,6 +24,7 @@ export default ({ mode }) => {
|
||||
],
|
||||
}),
|
||||
Icons({
|
||||
compiler: 'vue3',
|
||||
autoInstall: true, // 自动安装图标依赖
|
||||
}),
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user