管理界面大致模型

src/manager/manage.vue

@@ -1,10 +1,100 @@
 <template>
-
+  <div class="header">
+    <a-button class="logo" ghost>LOGO</a-button>
+    <div class="centered-text">内部系统管理界面</div>
+    <div class="avatar-container">
+      <a-avatar :size="64">
+        <a-image :size="64" src="../views/images/img1.jpg"></a-image>
+      </a-avatar>
+    </div>
+  </div>
+  <div>
+    <a-menu
+        v-model:selectedKeys="state.selectedKeys"
+        style="width: 256px"
+        mode="inline"
+        :open-keys="state.openKeys"
+        :items="items"
+        @openChange="onOpenChange"
+    ></a-menu>
+  </div>
 </template>
 <script setup>
-
+import { h, reactive } from 'vue';
+import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
+function getItem(label, key, icon, children, type) {
+  return {
+    key,
+    icon,
+    children,
+    label,
+    type,
+  };
+}
+const items = reactive([
+  getItem('系统管理', 'sub1', () => h(MailOutlined), [
+    getItem('用户管理', '1'),
+    getItem('角色管理', '2'),
+    getItem('权限管理', '3'),
+    getItem('日志管理', '4'),
+    getItem('日报管理', '5'),
+    getItem('消息管理', '6'),
+  ]),
+  getItem('首页管理', 'sub2', () => h(AppstoreOutlined), [
+    getItem('轮播图管理', '5'),
+    getItem('团队简介', '6'),
+    getItem('项目推荐', '7'),
+    getItem('新闻展示', '8'),
+    getItem('用户推荐', '9'),
+  ]),
+  getItem('信息管理', 'sub4', () => h(SettingOutlined), [
+    getItem('项目信息管理', '9'),
+    getItem('团队信息管理', '10'),
+    getItem('新闻信息管理', '11'),
+  ]),
+]);
+const state = reactive({
+  rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
+  openKeys: ['sub1'],
+  selectedKeys: [],
+});
+const onOpenChange = openKeys => {
+  const latestOpenKey = openKeys.find(key => state.openKeys.indexOf(key) === -1);
+  if (state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
+    state.openKeys = openKeys;
+  } else {
+    state.openKeys = latestOpenKey ? [latestOpenKey] : [];
+  }
+};
 </script>
+<style scoped>
+.header {
+  position: relative;
+  background: rgb(68, 112, 131);
+  padding: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 
-<style>
+.logo {
+  border: none;
+  font-size: 25px;
+  font-weight: bold;
+  display: flex;
+}
 
+.avatar-container {
+  margin-left: auto; /* 将头像置于最右侧 */
+}
+
+.centered-text {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  font-size:35px;
+  font-weight: normal;
+  color: white;
+}
 </style>