From 3974dd052b4f16c81b6772a6dbdaccd13cbd477b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A6=96=E5=A7=90?= <2981176548@qq.com>
Date: Tue, 16 Jan 2024 23:58:13 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AE=A1=E7=90=86=E7=95=8C=E9=9D=A2=E5=AE=8C?=
 =?UTF-8?q?=E5=96=842?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/manager/Data/UserManage.vue | 148 ++++++++++++++++++++++++++++-
 src/manager/LeftBar.vue         |  15 ++-
 src/manager/header.vue          | 160 +++++++++++++++++++-------------
 src/manager/manager.vue         |   1 +
 src/router/index.js             |   9 +-
 5 files changed, 265 insertions(+), 68 deletions(-)

diff --git a/src/manager/Data/UserManage.vue b/src/manager/Data/UserManage.vue
index 5499424..174e0a0 100644
--- a/src/manager/Data/UserManage.vue
+++ b/src/manager/Data/UserManage.vue
@@ -1,3 +1,147 @@
 <template>
-  this usermanage
-</template>
\ No newline at end of file
+    <div style="width: 85vw;height:90vh;position: relative">
+        <div style="padding:20px 10px;">
+            <Space>
+                <span>用户id:</span>
+                <Input v-model="value" placeholder="id" clearable style="width: 200px" />
+                <span>用户名称：</span>
+                <Input prefix="ios-contact" placeholder="Enter name" style="width: auto" />
+                <Button type="primary" shape="circle" icon="ios-search">查询</Button>
+                <Button type="primary" ghost>新增</Button>
+            </Space>
+        </div>
+        <div style="width: 85vw; height: 78vh">
+            <Table border ref="selection" :columns="columns" :data="data" style="height: 75vh">
+                <template #name="{ row }">
+                    <strong>{{ row.name }}</strong>
+                </template>
+                <template #action="{ row, index }">
+                    <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">编辑</Button>
+                    <Button type="error" size="small" @click="remove(index)">删除</Button>
+                </template>
+            </Table>
+            <div style="height: 7vh ;text-align: left;padding-top: 10px">
+                <Page :total="40" size="small" show-elevator show-sizer />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { Page, Space } from "view-ui-plus";
+
+export default {
+    components: { Page, Space },
+    data() {
+        return {
+            value: "", // 添加一个属性来绑定输入框的值
+            columns: [
+                {
+                    type: "selection",
+                    width: 60,
+                    align: "center"
+                },
+                {
+                    title: "姓名",
+                    key: "name"
+                },
+                {
+                    title: "年龄",
+                    key: "age"
+                },
+                {
+                    title: "地址",
+                    key: "address"
+                },
+                {
+                    title: "操作",
+                    slot: "action",
+                    width: 150,
+                    align: "center"
+                }
+            ],
+            data: [
+                {
+                    name: "John Brown",
+                    age: 18,
+                    address: "New York No. 1 Lake Park",
+                    date: "2016-10-03"
+                },
+                {
+                    name: "Jim Green",
+                    age: 24,
+                    address: "London No. 1 Lake Park",
+                    date: "2016-10-01"
+                },
+                {
+                    name: "Joe Black",
+                    age: 30,
+                    address: "Sydney No. 1 Lake Park",
+                    date: "2016-10-02"
+                },
+                {
+                    name: "Jon Snow",
+                    age: 26,
+                    address: "Ottawa No. 2 Lake Park",
+                    date: "2016-10-04"
+                },
+                {
+                    name: "Jon Snow",
+                    age: 26,
+                    address: "Ottawa No. 2 Lake Park",
+                    date: "2016-10-04"
+                },
+                {
+                    name: "Jon Snow",
+                    age: 26,
+                    address: "Ottawa No. 2 Lake Park",
+                    date: "2016-10-04"
+                },
+                {
+                    name: "Jon Snow",
+                    age: 26,
+                    address: "Ottawa No. 2 Lake Park",
+                    date: "2016-10-04"
+                },
+                {
+                    name: "Jon Snow",
+                    age: 26,
+                    address: "Ottawa No. 2 Lake Park",
+                    date: "2016-10-04"
+                },
+                {
+                    name: "Jon Snow",
+                    age: 26,
+                    address: "Ottawa No. 2 Lake Park",
+                    date: "2016-10-04"
+                },
+                {
+                    name: "Jon Snow",
+                    age: 26,
+                    address: "Ottawa No. 2 Lake Park",
+                    date: "2016-10-04"
+                },  {
+                    name: "Jon Snow",
+                    age: 26,
+                    address: "Ottawa No. 2 Lake Park",
+                    date: "2016-10-04"
+                }
+            ]
+        };
+    },
+    methods: {
+        handleSelectAll(status) {
+            this.$refs.selection.selectAll(status);
+        },
+        show(index) {
+            this.$Modal.info({
+                title: "编辑用户信息",
+                content: `姓名：<input value="${this.data[index].name}"><br>年龄：<input value="${this.data[index].age}"><br>住址：<input value="${this.data[index].address}">`
+            });
+        },
+        remove(index) {
+            this.data.splice(index, 1);
+        }
+    }
+};
+</script>
\ No newline at end of file
diff --git a/src/manager/LeftBar.vue b/src/manager/LeftBar.vue
index cf4ac59..739e959 100644
--- a/src/manager/LeftBar.vue
+++ b/src/manager/LeftBar.vue
@@ -10,12 +10,25 @@
 
 </style>
 <template>
-    <div class="layout" style="height: 90vh">
+    <div class="layout" style="height: 92vh">
         <Layout>
 
             <Layout>
                 <Sider hide-trigger :style="{background: '#fff'}">
                     <Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
+<!--                        <Submenu name="0">-->
+<!--                            <template #title>-->
+<!--                                <Icon type="ios-cog"></Icon>-->
+<!--                                <span>首页</span>-->
+
+<!--                            </template>-->
+<!--&lt;!&ndash;                           <div style="display: flex;flex-direction: row">&ndash;&gt;-->
+<!--&lt;!&ndash;                            <Icon type="ios-cog"></Icon>&ndash;&gt;-->
+
+<!--&lt;!&ndash;                           </div>&ndash;&gt;-->
+<!--                        </Submenu>-->
+                        <MenuItem name="0-1" @click="navigateTo('')" style="left: 50px">首页</MenuItem>
+
                         <Submenu name="1">
                             <template #title>
                                 <Icon type="ios-cog"></Icon>
diff --git a/src/manager/header.vue b/src/manager/header.vue
index 8b1565e..1bfe029 100644
--- a/src/manager/header.vue
+++ b/src/manager/header.vue
@@ -1,71 +1,105 @@
-<style scoped>
-.layout{
-    border: 1px solid #d7dde4;
-    background: #f5f7f9;
-    position: relative;
-    border-radius: 4px;
-    overflow: hidden;
-}
-.layout-logo{
-    width: 100px;
-    height: 30px;
-    background: #515A6E;
-    border-radius: 3px;
-    float: left;
-    position: relative;
-    /*top: 10px;*/
-    left: 100px;
-    margin: 0 auto;
-    /*text-align: center;*/
-    color:white;
-}
-.layout-nav{
-    width: 420px;
-    margin: 0 20px 0 auto;
-
-}
-/*.ivu-menu ivu-menu-light ivu-menu-horizontal{*/
-/*    width: 200px;*/
-/*}*/
-
-</style>
 <template>
-    <div class="layout">
-        <Layout>
-            <Header>
-<!--                <div style="color:white;margin:auto"> 用户管理中心</div>-->
-                <Menu mode="horizontal" theme="dark" active-name="1">
-                    <div class="layout-logo">管理中心界面</div>
+    <div class="top-nav" style="height: 8vh;">
+        <div class="logo">
+            <span style="color:white">Logo</span>
+        </div>
+        <div style="color: #f5f7f9;font-size: 30px;position: relative;left:40%">内部系统管理界面</div>
+        <div class="user-profile" style="left: -100px;">
 
-                    <div class="layout-nav" theme="dark">
-                        <MenuItem name="1">
-                            <Icon type="ios-navigate"></Icon>
-                            Item 1
-                        </MenuItem>
-                        <MenuItem name="2">
-                            <Icon type="ios-keypad"></Icon>
-                            Item 2
-                        </MenuItem>
-                        <MenuItem name="3">
-                            <Icon type="ios-analytics"></Icon>
-                            Item 3
-                        </MenuItem>
-                        <MenuItem name="4">
-                            <Icon type="ios-paper"></Icon>
-                            Item 4
-                        </MenuItem>
-                    </div>
-                </Menu>
-            </Header>
-
-        </Layout>
+            <div style="color: #f5f7f9">
+                <img class="userimg" alt="" src="../assets/images/img1.jpg">
+            </div>
+            <span class="username">{{ username }}</span>
+            <Dropdown trigger="click" style="margin-left: 20px">
+                <a href="javascript:void(0)">
+                    <Icon type="md-exit" class="iconexit" style="color: #f5f7f9;font-size: 20px"></Icon>
+                </a>
+                <template #list class="exit">
+                    <DropdownMenu>
+                        <DropdownItem @click="navigateTo('../components/login')">退出</DropdownItem>
+                    </DropdownMenu>
+                </template>
+            </Dropdown>
+        </div>
     </div>
 </template>
+
 <script>
-import {Icon, Layout, MenuItem} from "view-ui-plus";
+import { Dropdown, DropdownItem, DropdownMenu, Icon, Image } from "view-ui-plus";
 
 export default {
-    components: {Layout, Icon, MenuItem}
-
-}
+    components: { Icon, DropdownItem, DropdownMenu, Dropdown, Image },
+    data() {
+        return {
+            username: "John Doe",
+            avatarUrl: "path_to_avatar",
+            dropdownVisible: false
+        };
+    },
+    methods: {
+        goToHomePage() {
+            // 处理回到首页的逻辑
+        },
+        handleDropdownVisibleChange(visible) {
+            this.dropdownVisible = visible;
+        },
+        logout() {
+            // 处理退出登录的逻辑
+        },
+        navigateTo(path) {
+            this.$router.push(path);
+        }
+    }
+};
 </script>
+
+<style scoped>
+.top-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 60px;
+    background-color: #515A6E;
+    padding: 0 20px;
+    position: relative;
+}
+
+.logo {
+    font-size: 24px;
+    position: absolute;
+    left: 100px;
+}
+
+.user-profile {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    text-align: center;
+}
+
+.username {
+    margin-left: 10px;
+    color: white;
+    display: flex;
+    align-items: center; /* 垂直居中对齐 */
+    padding-right: 10px;
+}
+
+.userimg {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+}
+
+.exit {
+    position: relative;
+    top: 20px;
+    left:50px;
+}
+
+.iconexit {
+    position: relative;
+    top: 15px;
+    left: -20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/manager/manager.vue b/src/manager/manager.vue
index 03e10f9..c96beab 100644
--- a/src/manager/manager.vue
+++ b/src/manager/manager.vue
@@ -2,6 +2,7 @@
 
   <div style="display: flex; flex-direction: column">
       <MyHeader/>
+<!--      <router-view></router-view>-->
       <Main></Main>
 
   </div>
diff --git a/src/router/index.js b/src/router/index.js
index a9d250f..e9db148 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -71,9 +71,14 @@ const router = createRouter({
         }, {
           path:'/manager/NewsInformationManagement',
           component:()=>import('../manager/Data/NewsInformationManagement.vue')
-        },
-      ]
+        }
+      ]},
+    {
+      path:'/components/login',
+      component:()=>import('../components/login.vue')
     }
+
+
   ]
 })