Basic Layout

杨泽宇
1 parent 0355c7d2
Showing 19 changed files with 315 additions and 45 deletions
README.md
src/App.vue
src/components/Pagination/index.vue
src/layout/enter.vue
src/layout/header.vue
src/layout/menu.vue
src/main.ts
src/pinia/modules/app.ts
src/router/index.ts
src/style/element.scss
src/style/global.module.scss
src/style/menu.scss
src/style/reset.scss
src/style/status.scss
src/style/variable.scss
src/utils/progress.ts
src/utils/variable.ts
src/views/tengxi/about.vue
vite.config.ts
@@ -37,14 +37,32 @@ cnlive-community-web-vue 银地智慧社区管理后台
   * api 交互接口
   * assets 静态资源
   * conponents 自定义组件
+   * Pagination 分页组件
+  * layout 公共样式布局
+   * enter.vue 汇总入口
+   * header.vue 头
+   * menu.vue 左侧菜单
   * router 路由管理
-  * pinia 状态管理
-  * store 状态管理
+  * pinia 状态管理 新包 使用中
+  * store 状态管理 旧包 备用中
   * style 样式
+   * element.scss 覆盖默认element样式
+   * global.module.scss scss中变量用在模板中
+   * menu.scss 菜单相关样式
+   * status.scss 状态变量
+   * reset.scss html原生标签样式统一重写
+   * variable.scss 主题色相关变量
   * utils 全局js
+   * progress.ts 页面切换进度条
+   * varible.ts 全局静态变量
   * views 业务逻辑页面
  
 ## 功能
+   * 机构管理
+   * 活动管理
+   * 缴费管理
+   * 社区管理
+   * 小区管理等
  
 ## 常见问题
    * **登录时localhost cookie失效导致登录失败的问题：**
@@ -2,25 +2,25 @@
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
 // import HelloWorld from './components/HelloWorld.vue'
-import Tengxi from '@/components/tengxi.vue'
-import {home_list, getUserInfo} from '@/api/tengxi/index'
-console.log(home_list)
-console.log(getUserInfo)
-home_list({}).then(res => {
-  console.log(res)
-}).catch(error => {
-  console.log(error)
-})
-getUserInfo(1).then(res => {
-  console.log(res)
-}).catch(error => {
-  console.log(error)
-})
+// import Tengxi from '@/components/tengxi.vue'
+// import {home_list, getUserInfo} from '@/api/tengxi/index'
+// console.log(home_list)
+// console.log(getUserInfo)
+// home_list({}).then(res => {
+//   console.log(res)
+// }).catch(error => {
+//   console.log(error)
+// })
+// getUserInfo(1).then(res => {
+//   console.log(res)
+// }).catch(error => {
+//   console.log(error)
+// })
 </script>
  
 <template>
-  <img alt="Vue logo" src="./assets/logo.png" />
-  <Tengxi />
+  <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
+  <!-- <Tengxi /> -->
   <router-view></router-view>
   <!-- <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" /> -->
 </template>
@@ -32,6 +32,6 @@ getUserInfo(1).then(res =&gt; {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+  /* margin-top: 60px; */
 }
 </style>
 <script setup lang="ts">
 import { defineEmits } from "vue";
  
-// 每个属性都必传，不带默认值
+// TIP 每个属性都必传，不带默认值
 // defineProps<{
 //   total: number;
 //   currentPage: number;
@@ -9,7 +9,7 @@ import { defineEmits } from &quot;vue&quot;;
 //   pageSize: number;
 // }>();
  
-// 可以带默认值
+// TIP 可以带默认值
 interface Props {
   total: number;
   pageSizes?: number[];
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import Header from "./header.vue";
+import Menu from "./menu.vue";
+import * as store from "@/pinia/index";
+let key = ref("/")
+</script>
+
+<template>
+  <!-- TIP 页面头部，含logo、功能按钮（用户信息、退出登录、帮助） -->
+  <Header />
+  <!-- TIP 页面头部，含logo、功能按钮（用户信息、退出登录、帮助）结束 -->
+  <div class="main-container">
+    <!-- TIP 左侧菜单 -->
+    <div class="sidebar-container">
+      <Menu />
+    </div>
+    <!-- TIP 左侧菜单结束 -->
+    <!-- TIP 右侧具体页面内容 -->
+    <div class="page-container" :class="store.family.appStore().isCollapse? 'thinMenu': 'fatMenu'">
+      <router-view v-slot="{ Component, route }">
+        <transition :name="route.meta.transitionName">
+          <keep-alive v-if="route.meta.keepAlive">
+            <component :is="Component" />
+          </keep-alive>
+          <component :is="Component" v-else />
+        </transition>
+      </router-view>
+    </div>
+    <!-- TIP 右侧具体页面内容结束 -->
+  </div>
+</template>
+
+<style scoped lang="scss">
+  .fatMenu {
+    margin-left: $sideBarWidth!important;
+  }
+  .thinMenu {
+    margin-left: $sideBarWidthThin!important;
+  }
+</style>
+<script setup lang="ts">
+import { getCurrentInstance, computed } from "vue";
+import * as store from "@/pinia/index";
+import { Fold, Expand } from "@element-plus/icons-vue";
+import styles from '@/style/global.module.scss';
+// TIP 获取全局变量，暂时只有坏图片占位图
+const {
+  appContext: {
+    config: { globalProperties },
+  },
+} = getCurrentInstance();
+// TIP 侧边菜单collapse状态切换
+const toggleMenu = () => {
+  store.family.appStore().toggleCollapse();
+};
+</script>
+
+<template>
+  <div class="header-container clearfix">
+    <!-- TIP logo -->
+    <div class="left-logo">
+      <el-image
+        :src="globalProperties.$defaultImage"
+        fit="contain"
+        style="height: 40px"
+      ></el-image>
+    </div>
+    <!-- TIP logo结束 -->
+    <!-- TIP 控制菜单collapse的按钮 -->
+    <div class="menu-collapse-button" @click="toggleMenu">
+      <Expand class="font-style" v-if="store.family.appStore().isCollapse" />
+      <Fold class="font-style" v-if="!store.family.appStore().isCollapse" />
+    </div>
+    <!-- TIP 控制菜单collapse的按钮结束 -->
+    <!-- TIP 功能键 -->
+    <div class="right-buttons">
+      <el-button type="text">帮助</el-button>
+      <el-button type="text">用户：管理员</el-button>
+      <el-button type="text">退出</el-button>
+    </div>
+    <!-- TIP 功能键结束 -->
+  </div>
+</template>
+
+<style scoped lang="scss">
+.header-container {
+  padding: 0 20px;
+  height: 60px;
+  line-height: 60px;
+  background-color: white;
+  box-shadow: 0 5px 10px -5px #888888;
+  .left-logo {
+    float: left;
+    margin-top: 10px;
+  }
+  .menu-collapse-button {
+    float: left;
+    margin-left: 20px;
+    cursor: hand;
+    cursor: pointer;
+    .font-style {
+      width: 1.2em;
+      height: 1.2em;
+      margin-right: 8px;
+      margin-top: 20px;
+    }
+  }
+  .right-buttons {
+    float: right;
+  }
+}
+</style>
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import * as store from "@/pinia/index";
+import styles from '@/style/global.module.scss';
+// TIP 使用element plus ICON
+import {
+  Location,
+  Document,
+  Menu as IconMenu,
+  Setting,
+} from "@element-plus/icons-vue";
+// TIP 获取scss样式变量
+let styleData = computed(()=>{
+  return styles
+});
+</script>
+
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      default-active="2"
+      :background-color="styleData.menuBg"
+      :text-color="styleData.menuText"
+      :active-text-color="styleData.menuActiveText"
+      class="el-menu-vertical-demo"
+      :collapse-transition="false"
+      :collapse="store.family.appStore().isCollapse"
+    >
+      <el-sub-menu index="1">
+        <template #title>
+          <el-icon><location /></el-icon>
+          <span>Navigator One</span>
+        </template>
+        <el-menu-item-group>
+          <template #title><span>Group One</span></template>
+          <el-menu-item index="1-1">item one</el-menu-item>
+          <el-menu-item index="1-2">item two</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group Two">
+          <el-menu-item index="1-3">item three</el-menu-item>
+        </el-menu-item-group>
+        <el-sub-menu index="1-4">
+          <template #title><span>item four</span></template>
+          <el-menu-item index="1-4-1">item one</el-menu-item>
+        </el-sub-menu>
+      </el-sub-menu>
+      <el-menu-item index="2">
+        <el-icon><icon-menu /></el-icon>
+        <template #title>Navigator Two</template>
+      </el-menu-item>
+      <el-menu-item index="3" disabled>
+        <el-icon><document /></el-icon>
+        <template #title>Navigator Three</template>
+      </el-menu-item>
+      <el-menu-item index="4">
+        <el-icon><setting /></el-icon>
+        <template #title>Navigator Four</template>
+      </el-menu-item>
+    </el-menu>
+  </el-scrollbar>
+</template>
+<style lang="scss" scoped>
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: $sideBarWidth;
+  min-height: calc(100vh - 60px);
+}
+</style>
@@ -3,14 +3,23 @@ import App from &#39;./App.vue&#39;
 import router from '@/router/index'
 import promise from 'es6-promise'
 // import store from '@/store/index'
+
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
-import zhCn from 'element-plus/es/locale/lang/zh-cn' // elementUI配置中文环境
+import zhCn from 'element-plus/es/locale/lang/zh-cn' // TIP elementUI配置中文环境
+
 import '@/utils/progress'
 import '@/style/reset.scss'
+import * as globalVariable from '@/utils/variable'
+
+// TIP store 管理，含存数据到本地缓存
 import { createPinia } from 'pinia'
 import { createPersistedState } from 'pinia-persistedstate-plugin'
 const pinia = createPinia()
+pinia.use(createPersistedState({
+  key: 'store-data',
+  logger: process.env.NODE_ENV === 'production'? false: true
+}))
  
 promise.polyfill()
  
@@ -18,13 +27,14 @@ promise.polyfill()
 console.log('current env: ', process.env.NODE_ENV)
 console.log('current api url: ', import.meta.env.VITE_BASE_URL)
  
-pinia.use(createPersistedState({
-  key: 'store-data',
-  logger: process.env.NODE_ENV === 'production'? false: true
-}))
+const app = createApp(App)
+
+// TIP 全局静态变量挂载
+for(const i in globalVariable) {
+  app.config.globalProperties[i] = globalVariable[i]
+}
  
-createApp(App)
-.use(router)
+app.use(router)
 // .use(store)
 .use(pinia)
 .use(ElementPlus, {
+const id = 'app'
+const state = () => ({
+    isCollapse: false,
+  })
+  const getters = {
+    getCollapseStatus () {
+      return this.isCollapse
+    }
+  }
+  const actions = {
+    toggleCollapse() {
+      this.isCollapse = !this.isCollapse
+    },
+  }
+
+export default {
+  namespace: true,
+  actions,
+  getters,
+  state,
+  id
+}
 \ No newline at end of file
 import { createRouter, createWebHashHistory } from 'vue-router'
+import Layout from '@/layout/enter.vue'
 const routes: Array<any> = [
   { path: '/', redirect: { name: 'Home' } },
   {
     path: '/home',
     name: 'Home',
     component: () => import(/* webpackChunkName: "Home" */ '@/views/tengxi/index.vue')
+    // component: () => import(/* webpackChunkName: "Home" */ '@/layout/enter.vue')
   },
   {
-    path: '/about',
+    path: '/',
+    component: Layout,
     name: 'About',
-    component: () => import(/* webpackChunkName: "About" */ '@/views/tengxi/about.vue')
+    children: [{
+      path: 'About',
+      name: 'About',
+      component: () => import(/* webpackChunkName: "About" */ '@/views/tengxi/about.vue'),
+      meta: { title: 'About' }
+    }]
+    // component: () => import(/* webpackChunkName: "About" */ '@/views/tengxi/about.vue')
   },
   {
     path: '/login',
-// elementUI 部分样式重写
+// TIP elementUI 部分样式重写
  
-// 解决表格闪烁
+// TIP 解决表格闪烁
 .el-table{
   max-width: 99%;
+}
+
+// TIP 解决左侧菜单scrollbar左侧有间隔
+.el-scrollbar {
+  width: 100%;
 }
 \ No newline at end of file
+// TIP 引入全局scss变量
+@import './status.scss';
 \ No newline at end of file
+// TIP 左侧菜单固定宽度，右边页面部分自适应
+.main-container {
+  *zoom: 1; position: relative;
+  .sidebar-container {
+    width: $sideBarWidth;
+    position: absolute; 
+    left: 0; 
+    top: 0;
+  }
+  .page-container {
+    padding: 20px;
+    margin-left: $sideBarWidthThin;
+  }
+}
 \ No newline at end of file
-// html原生标签样式统一重写
+// TIP html原生标签样式统一重写
  
+@import './menu.scss';
 @import './element.scss';
-@import './variable.scss';
-@import './status.scss';
  
 body {
   height: 100%;
@@ -10,6 +9,8 @@ body {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  margin: 0;
+  padding: 0;
 }
  
 label {
-// 状态颜色
+// TIP 状态颜色
  
 $danger: #F56C6C;
 $success: #67C23A;
-// 主题色变量
+// TIP 主题色变量
 $menuText:#bfcbd9;
 $menuActiveText:#409EFF;
 $subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
@@ -10,6 +10,7 @@ $subMenuBg:#1f2d3d;
 $subMenuHover:#001528;
  
 $sideBarWidth: 210px;
+$sideBarWidthThin: 63px;
  
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
@@ -22,4 +23,5 @@ $sideBarWidth: 210px;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
   sideBarWidth: $sideBarWidth;
+  sideBarWidthThin: $sideBarWidthThin;
 }
@@ -9,7 +9,7 @@ router.beforeEach((to: any, from: any, next: any) =&gt; {
   const hasToken = 1 && 1
   const whiteList = ['/login']
  
-  // 页面标题设置
+  // TIP 页面标题设置
   globalThis.document.title = to.meta.title? to.meta.title: import.meta.env.VITE_APP_TITLE
  
   if (hasToken) {
+const $defaultImage = 'https://wjj.ys2.cnliveimg.com/769/img_new/1593746590552.png' // TIP 坏图片占位图
+
+export {
+  $defaultImage
+}
 \ No newline at end of file
@@ -39,9 +39,9 @@ const data = reactive([
 </script>
  
 <template>
-  <p class="tengxi">Tengxi About Page</p>
+  <!-- <p class="tengxi">Tengxi About Page</p>
   <el-button type="primary">成功</el-button>
-  <p>测试pinia数据：{{all.family.dataStore().data1}}</p>
+  <p>测试pinia数据：{{all.family.dataStore().data1}}</p> -->
   <!-- <el-button @click="addAge">长一岁</el-button>
   <el-button @click="initPinia">初始化pinia</el-button> -->
  
 import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import viteCompression from 'vite-plugin-compression' // gzip压缩
-import legacy from '@vitejs/plugin-legacy' // 兼容性
+import viteCompression from 'vite-plugin-compression' // TIP gzip压缩
+import legacy from '@vitejs/plugin-legacy' // TIP 兼容性
 const { resolve } = require('path')
  
 // https://vitejs.dev/config/
@@ -33,7 +33,7 @@ export default ({command, mode}) =&gt; {
     css: {
       postcss: {
         plugins: [
-          // 关打包@charset must be the first rule in the file警告
+          // TIP 关打包@charset must be the first rule in the file警告
           {
             postcssPlugin: 'internal:charset-removal',
             AtRule: {
@@ -48,8 +48,10 @@ export default ({command, mode}) =&gt; {
       },
       preprocessorOptions: {
         scss: {
-          // 关打包@charset must be the first rule in the file警告
-          charset: false
+          // TIP 关打包@charset must be the first rule in the file警告
+          charset: false,
+          // TIP 全局使用scss变量
+          additionalData: '@import "@/style/variable.scss";'
         }
       }
     },