Skip to content

Commit ce14970

Browse files
MuzzyZYMuzzyZY
committed
Update:全部采用arco重写
1 parent 929daf8 commit ce14970

22 files changed

Lines changed: 7495 additions & 1784 deletions

‎dashboard/package-lock.json‎

Lines changed: 0 additions & 1198 deletions
This file was deleted.

‎dashboard/package.json‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,18 @@
66
"scripts": {
77
"dev": "vite",
88
"build": "vite build",
9-
"preview": "vite preview"
9+
"preview": "vite preview",
10+
"mock": "json-server src/mock/data.json --port 9978 --middlewares src/mock/middlewares.js"
1011
},
1112
"dependencies": {
12-
"@primevue/themes": "^4.2.1",
13+
"axios": "^1.7.7",
14+
"json-server": "^1.0.0-beta.3",
1315
"pinia": "^2.2.6",
14-
"primeflex": "^3.3.1",
15-
"primeicons": "^7.0.0",
16-
"primevue": "^4.2.1",
1716
"vue": "^3.5.12",
1817
"vue-router": "^4.4.5"
1918
},
2019
"devDependencies": {
21-
"@primevue/auto-import-resolver": "^4.2.1",
20+
"@arco-design/web-vue": "^2.56.3",
2221
"@vitejs/plugin-vue": "^5.1.4",
2322
"unplugin-vue-components": "^0.27.4",
2423
"vite": "^5.4.10"

‎dashboard/src/App.vue‎

Lines changed: 8 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,21 @@
11
<template>
2-
<div class="app-container">
3-
<!-- 侧边栏 -->
4-
<SideBarMenu
5-
:isCollapsed="sidebarStore.isCollapsed"
6-
@toggleSidebar="sidebarStore.toggleSidebar"
7-
:selectedTab="selectedTab"
8-
@selectTab="updateSelectedTab"
9-
/>
10-
<!-- 头部工具栏 -->
11-
<HeaderToolbar/>
12-
<!-- 内容区域 -->
13-
<div class="content">
14-
<!-- 路由视图 -->
15-
<router-view></router-view>
16-
</div>
17-
</div>
2+
<Layout>
3+
<!-- 使用 slot 渲染页面内容 -->
4+
<router-view />
5+
</Layout>
186
</template>
197

208
<script>
21-
import { useSidebarStore } from './stores/sidebarStore';
22-
import SideBarMenu from './components/SideBarMenu.vue';
23-
import HeaderToolbar from './components/HeaderToolbar.vue';
9+
import Layout from './components/Layout.vue';
2410
2511
export default {
12+
name: 'App',
2613
components: {
27-
SideBarMenu,
28-
HeaderToolbar,
14+
Layout,
2915
},
30-
setup() {
31-
const sidebarStore = useSidebarStore(); // 使用 Pinia store
32-
return { sidebarStore };
33-
},
34-
data() {
35-
return {
36-
selectedTab: 1 // 默认选中的 Tab
37-
};
38-
},
39-
computed: {
40-
// 根据侧边栏的状态动态调整内容区域的样式
41-
contentStyle() {
42-
const sidebarWidth = this.sidebarStore.isCollapsed ? 80 : this.sidebarStore.sidebarWidth; // 获取侧边栏宽度，并考虑是否收缩
43-
return {
44-
marginTop: '60px', // 头部工具栏的高度
45-
marginLeft: `${sidebarWidth}px`, // 动态设置左边距
46-
padding: '20px',
47-
flex: 1,
48-
overflowY: 'auto', // 启用纵向滚动
49-
boxSizing: 'border-box',
50-
};
51-
},
52-
},
53-
methods: {
54-
// 更新 selectedTab 的值
55-
updateSelectedTab(tabId) {
56-
this.selectedTab = tabId;
57-
}
58-
}
5916
};
6017
</script>
6118

6219
<style>
63-
/* 确保html和body的高度为100% */
64-
html, body {
65-
height: 100%;
66-
margin: 0;
67-
}
68-
69-
/* 使 app-container 占满全高，并设置flex布局 */
70-
.app-container {
71-
display: flex;
72-
height: 100%; /* 占满屏幕高度 */
73-
flex-direction: column; /* 使 header 在顶部，sidebar 和 content 在下方 */
74-
}
75-
76-
/* 内容区域样式 */
77-
.content {
78-
flex: 1;
79-
overflow-y: auto; /* 启用纵向滚动 */
80-
padding: 20px;
81-
box-sizing: border-box;
82-
margin-top: 60px; /* 确保内容区域位于头部工具栏下方 */
83-
margin-left: 250px; /* 假设侧边栏宽度为250px */
84-
}
85-
86-
@media (max-width: 768px) {
87-
.content {
88-
margin-left: 0; /* 在小屏幕下，移除侧边栏 */
89-
margin-top: 0; /* 确保在小屏幕下内容不被头部遮挡 */
90-
}
91-
}
20+
/* 你可以在这里写一些全局样式 */
9221
</style>

‎dashboard/src/components/Footer.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div class="footer-content">
3+
<!-- 底部工具条的内容 -->
4+
<span>底部工具条</span>
5+
<!-- 其他工具条组件或逻辑 -->
6+
</div>
7+
</template>
8+
9+
<script>
10+
export default {
11+
name: 'Footer',
12+
// 可以在此定义一些头部工具条的逻辑
13+
};
14+
</script>
15+
16+
<style scoped>
17+
.footer-content {
18+
/* 自定义头部样式 */
19+
}
20+
</style>

‎dashboard/src/components/Header.vue‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<template>
2+
<a-layout-header class="header">
3+
<!-- 左侧控制按钮 -->
4+
<div class="header-left">
5+
<a-button shape="circle" @click="goBack">
6+
<template #icon>
7+
<icon-left/>
8+
</template>
9+
</a-button>
10+
<a-button shape="circle" @click="goForward">
11+
<template #icon>
12+
<icon-right/>
13+
</template>
14+
</a-button>
15+
<a-button shape="circle" @click="refreshPage">
16+
<template #icon>
17+
<icon-refresh/>
18+
</template>
19+
</a-button>
20+
</div>
21+
22+
<!-- 中间搜索框 -->
23+
<div class="header-center">
24+
<a-input-search
25+
placeholder="请输入搜索内容"
26+
enter-button
27+
@search="onSearch"
28+
style="width: 300px;"
29+
/>
30+
</div>
31+
32+
<!-- 右侧控制按钮 -->
33+
<div class="header-right">
34+
<a-button shape="circle" @click="minimize">
35+
<template #icon>
36+
<icon-shrink/>
37+
</template>
38+
</a-button>
39+
<a-button shape="circle" @click="maximize">
40+
<template #icon>
41+
<icon-expand/>
42+
</template>
43+
</a-button>
44+
<a-button shape="circle" @click="closeWindow">
45+
<template #icon>
46+
<icon-close/>
47+
</template>
48+
</a-button>
49+
50+
</div>
51+
</a-layout-header>
52+
</template>
53+
54+
<script>
55+
import {defineComponent} from 'vue';
56+
import {Message} from '@arco-design/web-vue';
57+
58+
export default defineComponent({
59+
components: {},
60+
methods: {
61+
goBack() {
62+
Message.info("前进按钮");
63+
// 执行前进逻辑
64+
},
65+
goForward() {
66+
Message.info("后退按钮");
67+
// 执行后退逻辑
68+
},
69+
refreshPage() {
70+
Message.info("刷新页面");
71+
// 刷新页面逻辑
72+
window.location.reload();
73+
},
74+
onSearch(value) {
75+
Message.info(`搜索内容: ${value}`);
76+
// 执行搜索逻辑
77+
},
78+
minimize() {
79+
Message.info("最小化窗口");
80+
// 最小化窗口的逻辑，可以通过调用系统接口来实现
81+
},
82+
maximize() {
83+
Message.info("最大化窗口");
84+
// 最大化窗口的逻辑
85+
},
86+
closeWindow() {
87+
Message.info("关闭窗口");
88+
// 关闭窗口的逻辑，可以通过调用系统接口来实现
89+
},
90+
}
91+
});
92+
</script>
93+
94+
<style scoped>
95+
.header {
96+
display: flex;
97+
justify-content: space-between;
98+
align-items: center;
99+
padding: 0 20px;
100+
background: #fff;
101+
}
102+
103+
.header-left,
104+
.header-right {
105+
display: flex;
106+
align-items: center;
107+
}
108+
109+
.header-left button,
110+
.header-right button {
111+
margin-right: 10px;
112+
}
113+
114+
.header-center {
115+
flex-grow: 1;
116+
display: flex;
117+
justify-content: center;
118+
}
119+
120+
.header-center a-input-search {
121+
width: 300px;
122+
}
123+
</style>

‎dashboard/src/components/HeaderToolbar.vue‎

Lines changed: 0 additions & 77 deletions
This file was deleted.

0 commit comments

Comments
 (0)