布局结构调整

Author: sunshine824

src/App.tsx

@@ -1,10 +1,17 @@
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { RouterView } from 'vue-router'
+import { ConfigProvider } from 'ant-design-vue'
+import zhCN from 'ant-design-vue/es/locale/zh_CN'
 
 export default defineComponent({
   name: 'App',
   components: { RouterView },
   setup() {
-    return () => <router-view />
+    const locale = zhCN
+    return () => (
+      <ConfigProvider locale={locale}>
+        <RouterView></RouterView>
+      </ConfigProvider>
+    )
   },
 })

src/components/ABreadCrumb/index.module.less

@@ -0,0 +1,10 @@
+.bread-crumb {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  .location {
+    font-size: 13px;
+    color: rgba(0, 0, 0, 0.8);
+    margin-right: 5px;
+  }
+}

src/components/ABreadCrumb/index.tsx

@@ -0,0 +1,22 @@
+import { defineComponent } from 'vue'
+import { Breadcrumb } from 'ant-design-vue'
+
+import styles from './index.module.less'
+
+const ABreadCrumb = defineComponent({
+  name: 'ABreadCrumb',
+  setup({ props }) {
+    return () => (
+      <div class={styles['bread-crumb']}>
+        <span class={styles['location']}>当前位置：</span>
+        <Breadcrumb>
+          <Breadcrumb.Item>Home</Breadcrumb.Item>
+          <Breadcrumb.Item>Application</Breadcrumb.Item>
+          <Breadcrumb.Item>Center</Breadcrumb.Item>
+        </Breadcrumb>
+      </div>
+    )
+  },
+})
+
+export default ABreadCrumb

src/components/GlobalHeader/Menus.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, ref, watch, computed } from 'vue'
+import { defineComponent, ref, watch, computed } from 'vue'
 import { useRoute, useRouter, RouteRecordRaw } from 'vue-router'
 import { Menu } from 'ant-design-vue'
 

src/components/GlobalHeader/index.module.less

@@ -8,13 +8,13 @@
   }
   :global {
     .ant-layout-header {
+      background-color: #19192e;
       display: flex;
       flex-flow: row nowrap;
       justify-content: space-between;
       align-items: center;
       height: 54px;
       padding: 0 40px 0 15px;
-      background: #1d1e1f;
       border-bottom: 1px solid #434343;
       .logo {
         min-width: 120px;
@@ -68,7 +68,7 @@
   &.horizontal-menu-class {
     :global {
       .ant-menu {
-        background: #1d1e1f;
+        background-color: #19192e;
         max-width: 700px;
         margin-right: 20px;
         .ant-menu-item {
@@ -84,7 +84,7 @@
             background-color: rgba(255, 255, 255, 0.7);
           }
           &-selected {
-            background-color: #4a4b4c !important;
+            background-color: rgba(54, 54, 80, 0.8) !important;
             position: relative;
             font-weight: 700;
             color: rgba(255, 255, 255, 0.9);

src/layouts/LevelBasicLayout.tsx

@@ -29,9 +29,12 @@ const LevelBasicLayout = defineComponent({
     return () => (
       <Layout class={styles['level-layout']}>
         <GlobalHeader v-slots={slots}></GlobalHeader>
-        <Layout.Content>
-          <RouterView />
-        </Layout.Content>
+        <div class={styles['level-content']}>
+          <div class={styles['level-sub-menu']}></div>
+          <Layout.Content>
+            <RouterView />
+          </Layout.Content>
+        </div>
       </Layout>
     )
   },

src/layouts/RouteLayout.tsx

@@ -1,5 +1,6 @@
 import { defineComponent, watch, ref } from 'vue'
 import { RouterView, useRoute } from 'vue-router'
+import ABreadCrumb from '@/components/ABreadCrumb'
 
 import styles from './index.module.less'
 
@@ -22,7 +23,7 @@ const RouteLayout = defineComponent({
     return () => (
       <div class={styles['page-view']}>
         <div class={styles['top-info']}>
-          <h3 class={styles['title']}>{routeName.value}</h3>
+          <ABreadCrumb></ABreadCrumb>
         </div>
         <div class={styles['view-con']}>
           {props.isSubView ? <RouterView /> : slots.default?.()}

src/layouts/index.module.less

@@ -1,11 +1,23 @@
 .level-layout {
   padding-left: 0px;
-  min-height: 100vh;
+  height: 100% !important;
   :global {
     .ant-layout-content {
       height: 100%;
     }
   }
+  .level-content {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: flex-start;
+    height: 100%;
+    .level-sub-menu {
+      width: 210px;
+      height: 100%;
+      background: #fff;
+      margin-right: 20px;
+    }
+  }
   .user-info {
     min-width: 100px;
     display: flex;
@@ -59,32 +71,16 @@
   display: flex;
   flex-flow: column nowrap;
   .top-info {
-    background: #fff;
-    padding: 10px 10px;
-    box-shadow: 0 2px 7px rgba(0, 21, 41, 0.08);
-    .title {
-      font-size: 18px;
-      color: rgba(0, 0, 0, 0.8);
-      display: flex;
-      flex-flow: row nowrap;
-      align-items: center;
-      margin-bottom: 0;
-      &::before {
-        content: '';
-        width: 4px;
-        height: 24px;
-        background: #1890ff;
-        margin-right: 10px;
-      }
-    }
+    background: #f0f2f5;
+    padding: 10px 10px 10px 0;
   }
   .view-con {
     flex: 1;
-    margin: 10px 10px 5px 10px;
-    box-shadow: 0 1px 20px #c6c4c4;
-    background: #fff;
+    background: rgba(255, 255, 255, 0.9);
     border-radius: 4px;
     overflow-y: auto;
     overflow-x: hidden;
+    padding: 10px;
+    margin: 0 20px 10px 0;
   }
 }

src/main.ts

@@ -1,15 +1,18 @@
 import { createApp } from 'vue'
 import { store, key } from './store'
 import router from './router'
+import moment from 'moment'
 import App from './App'
 import { setupAntd } from './plugins/antd'
 
-import '@/mock';
+moment.locale('zh-cn')
+
+import '@/mock'
 
 import './public/css/base.css'
 import './public/css/init.less'
-import '@/public/font/iconfont.css';
-import 'ant-design-vue/dist/antd.css';
+import '@/public/font/iconfont.css'
+import 'ant-design-vue/dist/antd.css'
 
 const app = createApp(App)
 

src/views/user/login/index.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, reactive, ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { Form, Input, Button, Row, Col } from 'ant-design-vue'
+import { Form, Input, Button, Row, Col, message } from 'ant-design-vue'
 import { uuid } from '@/utils/util'
 import GlobalBg from '@/components/GlobalBg'
 import { login } from '@/api/user.ts'
@@ -56,6 +56,7 @@ const Login = defineComponent({
           getCaptcha()
         }
       } catch (error) {
+        message.warning('账号:admin  密码:666666')
         console.log(error)
       }
     }
@@ -92,7 +93,7 @@ const Login = defineComponent({
                     placeholder="请输入密码"
                   ></Input>
                 </Form.Item>
-                <Form.Item name="captcha">
+                {/* <Form.Item name="captcha">
                   <Row gutter={20} class={styles['captcha-row']}>
                     <Col span={16}>
                       <Input
@@ -109,7 +110,7 @@ const Login = defineComponent({
                       />
                     </Col>
                   </Row>
-                </Form.Item>
+                </Form.Item> */}
                 <Form.Item wrapperCol={{ span: 18, offset: 3 }}>
                   <Button
                     size="large"