完成二级页面的布局

src/assets/styles/common.css

@@ -21,6 +21,9 @@ page {
 .pingfangr{
 	font-family: "pingfangr" !important;
 }
+.text-black{
+	color:#000;
+}
 .block{
 	display: block;
 }
@@ -278,7 +281,7 @@ page {
 	word-break: break-all;
 }
 .text-white{
-	color:#FFF;
+	color:#FFF !important;
 }
 .q-absolute{
 	position: absolute;
@@ -350,6 +353,9 @@ page {
 .text-grey-8{
 	color: grey;
 }
+.no-select{
+	user-select: none!important;
+}
 .cusor-pointer,
 .cursor-pointer{
 	cursor: pointer;
@@ -461,7 +467,7 @@ page {
 	font-weight: bold;
 }
 .text-weight-bolder{
-	font-weight: bolder;
+	font-weight: bolder !important;
 }
 .rounded{
 	border-radius: 8px;
@@ -567,6 +573,21 @@ page {
 .full-scroll .el-scrollbar__view{
 	height: 100% !important;
 }
+.primary-link-button{
+	padding: 0 12px;
+	height: 32px;
+	background-color: rgb(240, 246, 255);
+	color: #564becCC !important;
+	font-size: 14px;
+	font-weight: 600;
+	display: inline-block;
+	line-height: 32px;
+	border-radius: 8px;
+	-webkit-border-radius: 8px;
+	-moz-border-radius: 8px;
+	-ms-border-radius: 8px;
+	-o-border-radius: 8px;
+}
 .el-button{
 	font-size: 12px !important;
 }
@@ -576,6 +597,26 @@ page {
 .wrap{
 	white-space: wrap;
 }
+.md-menu .el-menu-item{
+	height: 40px;
+	margin-bottom: 5px;
+	line-height: 40px;
+	border-radius: 8px;
+	-webkit-border-radius: 8px;
+	-moz-border-radius: 8px;
+	-ms-border-radius: 8px;
+	-o-border-radius: 8px;
+}
+.md-menu .el-menu-item.is-active{
+	color: #000;
+	font-weight: bold;
+	background-color: #f1f2f4 !important;
+    border-color: #f1f2f4 !important;
+}
+.md-menu .el-menu-item:hover{
+	background-color: #f1f2f4 !important;
+    border-color: #f1f2f4 !important;
+}
 .el-tree.auto-width-tree{
 	width: unset !important;
 }
@@ -610,6 +651,16 @@ page {
 .el-button.is-link:hover{
 	color: #564becCC !important;
 }
+.el-menu.no-border{
+	border:none !important;
+}
+.el-avatar--square{
+	border-radius: 8px !important;
+	-webkit-border-radius: 8px !important;
+	-moz-border-radius: 8px !important;
+	-ms-border-radius: 8px !important;
+	-o-border-radius: 8px !important;
+}
 .full-dialog{
 	background-color: rgba(0,0,0,0.4);
 	position: fixed;

src/components/User/UserCard.vue

@@ -2,8 +2,9 @@
   <div class="items-center row">
     <el-dropdown trigger="click">
       <el-avatar
-        :size="40"
+        :size="size"
         :src="userInfo.photo"
+        shape="square"
         style="background-color: #e6ddf5; color: #7b35ef"
         class="q-mx-lg cusor-pointer"
         >{{
@@ -83,7 +84,8 @@
           </div>
           <div class="TranLine"></div>
           <div class="MarketSettings row flex-between">
-            <span>账号设置</span>
+            <!-- <span>账号设置</span> -->
+            <el-button link class="pingfangr" style="font-size: 14px" @click="forwardUserCenter">账号设置</el-button>
             <span class="pointer" @click="loginOutHandler">退出登录</span>
           </div>
         </div>
@@ -109,7 +111,16 @@
 <script lang="ts" setup>
 import { useUserStore } from "@/store";
 import { storeToRefs } from "pinia";
+import { useRouter } from "vue-router";
 
+const props = defineProps({
+    size: {
+      type: Number,
+      default: 40,
+    },
+});
+
+const router = useRouter()
 const useUser = useUserStore();
 const { userInfo } = storeToRefs(useUser);
 const format = (percentage: number) => {
@@ -122,6 +133,9 @@ const moreList = [
   { icon: require("@/assets/img/homeMore3.png"), Name: "意见反馈" },
 ];
 
+const forwardUserCenter = ()=>{
+  router.push('/u')
+}
 const loginOutHandler = ()=>{
     useUser.setUserLoginOut()
 }
@@ -175,6 +189,10 @@ const loginOutHandler = ()=>{
   width: 380px;
   padding: 24px 30px 0 30px;
 }
+.MarketfigurePopover .el-button{
+  font-size: 14px !important;
+  font-weight: bold;
+}
 /* .Marketfigure:hover img {
   animation: myfirst 1s;
   -webkit-animation: myfirst 1s;

src/configs/customer.ts

+export type CustomerRate = 'FREE'|'VIP'|'EN'
+export interface CustomerTheme{
+    name:CustomerRate,
+    bg:string,
+    color:string,
+    desc:string
+}
+
+export const FREE_USER_THEME:CustomerTheme = {name:'FREE',bg:'linear-gradient(270deg, #94A3C0 0%, #99A3B8 100%)',color:'#94a3c0', desc:'免费版·个人'}
+export const VIP_USER_THEME:CustomerTheme = {name:'VIP',bg:'linear-gradient(270deg, #4165E2 0%, #5276F5 100%)',color:'#dd9b38', desc:'会员版·个人'}
+export const ENT_USER_THEME:CustomerTheme = {name:'EN',bg:'linear-gradient(270deg, #DD9B38 0%, #E6B351 100%);',color:'#252860', desc:'会员版·企业'}
+
+export const CustomerThemeConfig:CustomerTheme[] = [FREE_USER_THEME,VIP_USER_THEME,ENT_USER_THEME] 
\ No newline at end of file

src/plugins/icon.ts

@@ -130,6 +130,8 @@ import {
   More,
   Setting,
   Refresh,
+  Currency,
+  Protect,
 } from '@icon-park/vue-next'
 
 export interface Icons {
@@ -264,6 +266,8 @@ export const icons: Icons = {
   IconMore: More,
   IconSetting: Setting,
   IconRefresh: Refresh,
+  IconCurrency: Currency,
+  IconProtect: Protect
 }
 
 export default {

src/router/router.ts

@@ -165,6 +165,29 @@ const routes: RouteRecordRaw[] = [
       title:'行程生成预览'
     }
   },
+  {
+    path: '/u',
+    component: () => import('@/views/UserCenter/Layout.vue'),
+    meta:{
+      title:'管理与设置中心'
+    },
+    children:[
+      {
+        path: '/u',
+        component: () => import('@/views/UserCenter/Index.vue'),
+        meta:{
+          title:'账号一览'
+        }
+      },
+      {
+        path: '/u/order',
+        component: () => import('@/views/UserCenter/Order.vue'),
+        meta:{
+          title:'我的订单/发票'
+        }
+      },
+    ]
+  },
   {
     path: '/:catchAll(.*)*',
     component: () => import('@/views/ErrorNotFound.vue'),

src/store/index.ts

@@ -7,6 +7,7 @@ import { useFontStore } from './font'
 import { useMapStore } from './map'
 import { useSellTemplateStore } from './sellTemplate'
 import { useUserStore } from './user'
+import { useMenuStore } from './menu'
 
 export {
   useMainStore,
@@ -17,5 +18,6 @@ export {
   useFontStore,
   useMapStore,
   useSellTemplateStore,
-  useUserStore
+  useUserStore,
+  useMenuStore
 }
\ No newline at end of file

src/store/menu.ts

+import { defineStore } from "pinia"
+import { useUserStore } from "./user"
+
+export interface Menu{
+    name:string,
+    icon:string,
+    url:string,
+    children?:Menu[]
+}
+export type MenuOwner = '*'|'F'|'V'|'A'|'E'
+export interface MenuState {
+    // freeUser: Menu[],
+    // vipUser: Menu[],
+    // enterpriseUser: Menu[],
+    // enterpriseAdmin: Menu[]
+    userMenu:Menu[]
+    currentMenu: Menu|null
+}
+
+const menus:{menu:Menu,owner:MenuOwner}[] = [
+    {menu:{name:'账号一览',icon:'IconEarth',url:'/u'},owner:'*'},
+    {menu:{name:'订单/发票',icon:'IconCurrency',url:'/u/order'},owner:'*'},
+    {menu:{name:'账户设置',icon:'IconProtect',url:'/u/setting'},owner:'*'}
+]
+
+export const useMenuStore = defineStore('screen', {
+    state: (): MenuState => ({
+        // freeUser:[],
+        // vipUser:[],
+        // enterpriseAdmin:[],
+        // enterpriseUser:[],
+        userMenu:[],
+        currentMenu:null
+    }),
+    getters:{
+        getUserMenu(state){
+            if(state.userMenu.length==0){
+                const userStore= useUserStore()
+                const userInfo = userStore.getUser
+                let userPermissions:MenuOwner[] = ['*','F']
+                
+                if(userInfo.it){
+                    userPermissions.push('E')
+                }
+                if(userInfo.ia){
+                    userPermissions.push('A')
+                }
+                if(userInfo.iv){
+                    userPermissions.push('V')
+                }
+                
+                const findFreeMenu = menus.filter(x=>userPermissions.includes(x.owner))
+                if(findFreeMenu){
+                    state.userMenu = findFreeMenu.map(x=>x.menu)
+                }
+            }
+            return state.userMenu
+        }
+    },
+    // actions:{
+    //     setUserMenu()
+    // }
+})
\ No newline at end of file

src/store/user.ts

 import { ApiResult } from '@/configs/axios';
+import { CustomerRate, CustomerThemeConfig } from '@/configs/customer';
 import UserService from '@/services/UserService';
 import { defineStore } from 'pinia';
 import { StorageLike } from 'pinia-plugin-persistedstate';
@@ -34,6 +35,14 @@ export const useUserStore = defineStore('user', {
         getUser: (state) => {
           return state.userInfo;
         },
+        getUserTheme: (state) => {
+            let rate:CustomerRate = 'FREE'
+            if(state.userInfo.it) rate = 'EN'
+            else if(state.userInfo.iv) rate = 'VIP'
+
+            const theme = CustomerThemeConfig.find(x=>x.name==rate)
+            return theme
+        },
     },
     actions:{
         async setUserAutoLoginAsync(userId:number){

src/views/Auth/Login.vue

 <template>
     <div class="login-box q-pa-xl row">
-        <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708239425000_437.png" class="logo"  />
+        <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_1.png" class="logo"  />
         <div class="col column">
             <div class="col column flex-center items-center">
                 <div class="wel">

src/views/Index.vue

@@ -3,7 +3,7 @@
     <div class="workspace column">
       <div class="row q-pa-md items-center" style="padding-bottom: 15px">
         <img
-          src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708239425000_437.png"
+          src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_1.png"
           style="height: 30px"
         />
         <div class="col text-center">
@@ -140,7 +140,7 @@
               <template v-if="!userInfo.it">
                 <div class="row items-center">
                   <div class="text-info text-small col">未加入任何企业</div>
-                  <el-button type="primary" @click="redicetTo('/cp')" link icon="officeBuilding">立即创建企业</el-button>
+                  <el-button type="primary" @click="redicetTo('/space/cp')" link icon="officeBuilding">立即创建企业</el-button>
                 </div>
                 <el-divider />
                 <el-menu mode="vertical">
@@ -180,7 +180,7 @@ const { userInfo } = storeToRefs(useUserStore());
 const sellStore = useSellTemplateStore()
 const router = useRouter()
 const isWorkspace = ref(true) 
-isWorkspace.value = !router.currentRoute.value.path.includes('/cp')
+isWorkspace.value = !router.currentRoute.value.path.includes('/space/cp')
 
 const openMarketHandler = (type: string = "") => {
   openNewBlank(`/market/create${type}`);
@@ -199,7 +199,7 @@ const openFilePosition = (playload:any)=>{
 }
 
 const redicetTo = (path:string)=>{
-  isWorkspace.value = !path.includes('/cp')
+  isWorkspace.value = !path.includes('/space/cp')
 
   router.push({
       path

src/views/Market/Index.vue

@@ -4,7 +4,7 @@
         <div class="relative" style="padding: 22px 17px; max-width:1440px; margin:0 auto;z-index: 2;">
             <div :class="[datas.scrollTop>100?'MarketHeader':'']">
                 <div class="row items-center">
-                    <img class="q-pr-36" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708239425000_437.png" style="height: 30px;" />
+                    <img class="q-pr-36" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_1.png" style="height: 30px;" />
                     <div class="row grow Market-select reactive">
                         <el-input v-model="queryObj.Title" placeholder="请输入关键字" class="input-with-select q-pr-33">
                             <template #append>

src/views/UserCenter/Index.vue

+<template>
+  <div class="user-header rounded row items-center" :style="{ background: userTheme?.bg }">
+    <el-avatar :size="64" :src="userInfo.photo" shape="square" :style="{ BackgroundColor: userTheme?.color }" style="font-size: 36px;font-weight: bold;">
+      <!-- {{userInfo.photo && userInfo.photo.includes("http")? "": userInfo.nickname[0]}} -->
+    </el-avatar>
+    <div class="q-ml-lg text-white col">
+      <div class="" style="font-size: 20px;">{{ userInfo.nickname }}</div>
+      <div class="q-mt-sm text-info">个人账号ID：{{ userInfo.cardno??'8027970449819221090' }}</div>
+      
+    </div>
+    <div class="text-white">{{ userTheme?.desc }}</div>
+    <div :style="{'background':vipTheme.color}" v-if="userTheme?.name=='FREE'" class="text-white pingfangr q-ml-lg rounded cusor-pointer q-py-md q-px-lg no-select">升级为VIP</div>
+    <!-- <div :style="{'background':vipTheme.color}" v-if="1==2" class="text-white pingfangr q-ml-lg rounded cusor-pointer q-py-md q-px-lg no-select">续费VIP</div> -->
+    <div :style="{'background':enTheme.color}" v-if="userTheme?.name=='FREE'" class="text-white pingfangr q-ml-lg rounded cusor-pointer q-py-md q-px-lg no-select">升级为企业</div>
+  </div>
+  <div class="q-mt-xl">
+    <div class="user-label text-grey-8">我的权益</div>
+    <div></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ENT_USER_THEME, VIP_USER_THEME } from "@/configs/customer";
+import { useUserStore } from "@/store";
+import { storeToRefs } from "pinia";
+import { ref } from "vue";
+
+const useUser = useUserStore()
+const { userInfo } = storeToRefs(useUser)
+const userTheme = useUser.getUserTheme
+
+const vipTheme = VIP_USER_THEME
+const enTheme = ENT_USER_THEME
+
+</script>
+
+<style>
+.user-header {
+  padding: 16px 24px;
+  position: relative;
+  font-size: 14px;
+  color:#FFF;
+  z-index: 1;
+  width:100%;
+  overflow: hidden;
+}
+
+.user-header::after {
+  position: absolute;
+  top: 0;
+  right: -48px;
+  bottom: -12px;
+  z-index: -1;
+  width: 100%;
+  background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713496804000_500.png') no-repeat right center / contain;
+  content: "";
+  transform: scale(2);
+  transform-origin: right center;
+}
+.user-label{
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+</style>
\ No newline at end of file

src/views/UserCenter/Layout.vue

+<template>
+    <div class="window-height column">
+        <div class="user-center-header row items-center">
+            <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_1.png"
+                style="height: 24px" />
+            <div class="q-ml-lg text-weight-bold" style="font-size: 20px">
+                管理与设置
+            </div>
+            <div class="col"></div>
+            <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713433759000_282.png"
+                style="height: 33px" />
+            <div class="primary-link-button q-ml-lg">创建设计</div>
+            <UserCard :size="33"></UserCard>
+        </div>
+        <div class="col row">
+            <div class="user-center-menu column ">
+                <el-menu :default-active="activeIndex" class="no-border md-menu col" router>
+                    <el-menu-item :index="i" v-for="(x,i) in menus" :key="i" :route="x.url">
+                        <component :is="x.icon" style="font-size: 20px;"></component>
+                        <span class="q-ml-lg">{{ x.name }}</span>
+                    </el-menu-item>
+                </el-menu>
+                <el-button class="full-width pingfangr text-weight-bolder" @click="forwardSpace" style="font-size: 14px !important;" icon="arrow-left">返回工作台</el-button>
+            </div>
+            <el-scrollbar class="col full-height user-center-body">
+                <router-view />
+            </el-scrollbar>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import UserCard from "@/components/User/UserCard.vue";
+import { useMenuStore } from "@/store";
+import { ref, watch } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter()
+const useMenu = useMenuStore();
+const menus = ref(useMenu.getUserMenu);
+const activeIndex = ref(0)
+
+const forwardSpace = () => router.push('/space')
+
+watch(() => router.currentRoute.value.path, (toPath) => {
+    menus.value = useMenu.getUserMenu
+    activeIndex.value = menus.value.findIndex(x=>x.url==router.currentRoute.value.path)
+},{immediate: true,deep: true})
+</script>
+
+<style scoped>
+.user-center-header {
+    padding: 0 40px 0 28px;
+    border-bottom: 1px solid #efefef;
+    height: 56px;
+    color: #000;
+}
+
+.user-center-menu {
+    width: 232px;
+    padding: 20px 0 20px 16px;
+}
+
+.user-center-body {
+    padding: 20px 40px 40px 40px;
+}
+</style>

src/views/UserCenter/Order.vue

+<template>
+  这里是Order
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/Website/components/Welcomes.vue

@@ -18,7 +18,7 @@
                 </div>
             </div>
         </div>
-        <div class="column items-center window-height two-card" :class="{'flex-center animate__animated animate__backInUp':top>0,'step-2':top>2}">
+        <div class="column items-center window-height two-cardss" :class="{'flex-center animate__animated animate__backInUp':top>0,'step-2':top>2}">
             <div class="row items-center">
                 <div class="left-box step-2" v-show="top>2" :class="{'step-3':top>3}">
                     <div class="row items-center">
@@ -163,8 +163,8 @@ const forwardLogin = ()=>{
 .website .img-change.step-2{
     margin-right: 7.8125vw;
 }
-.website .two-card.step-2{
-    align-items: end !important;
+.website .two-cardss.step-2{
+    /* align-items: end !important; */
 }
 .website .left-box.step-2{
     animation: left-box-step-2 .2s linear both;