update

.gitignore

@@ -3,4 +3,6 @@ node_modules
 dist
 dist-ssr
 *.local
+.idea
+.vscode
 mining-manager
\ No newline at end of file

package.json

@@ -8,14 +8,16 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^0.2.6",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vueuse/core": "^7.5.4",
     "@vueuse/integrations": "^7.5.4",
     "axios": "^0.25.0",
     "crypto-js": "^4.1.1",
+    "dayjs": "^1.11.1",
     "downloadjs": "^1.4.7",
     "element-plus": "^1.3.0-beta.8",
     "vue": "^3.2.25",
-    "vue-router": "4"
+    "vue-router": "^4.0.14"
   },
   "devDependencies": {
     "@types/crypto-js": "^4.1.0",

src/App.vue

 <script setup lang="ts">
 import Layout from './Layout/index.vue';
-import Workspace from './components/workspace.vue';
 
-import Login from './components/login.vue';
-import { getStore } from './untils/userinfo';
+import { getStore } from './utils/userinfo';
 import { onMounted, ref, watch } from 'vue';
 
 const userInfo = getStore('mining-manager')
@@ -12,11 +10,6 @@ const userInfo = getStore('mining-manager')
 </script>
 
 <template>
-    <Layout>
-      <template #content>
-        <Workspace v-if="userInfo"></Workspace>
-        <Login v-else></Login>
-      </template>
-    </Layout>
+   <router-view></router-view>
 </template>
 

src/Layout/index.vue

 <script lang="ts" setup>
 import Header from "./Header.vue";
+import SideMenu from '../components/common/SideMenu.vue'
 import { ElMessage } from 'element-plus'
-import { getStore,removeUser } from '../untils/userinfo';
+import { getStore,removeUser } from '../utils/userinfo';
 import { ref } from "vue";
 const appname = 'mining-manager'
 const store = getStore(appname)
 const dialogVisible = ref(false)
+console.log('aaa',SideMenu)
 const logout = ()=>{
     console.log(store?.token);
     if(store){
@@ -57,8 +59,14 @@ const toggleLogout = ()=>{
 
       </div>
     </div>
-    <div class="content bg-gray-100 py-10 h-[calc(100vh_-_3.5rem)]">
-      <slot name="content"></slot>
+    <div class="content bg-gray-100 py-10 ">
+      <div class="">
+        <SideMenu></SideMenu>
+      </div>
+      <div class="">
+        <router-view></router-view>
+      </div>
+
     </div>
   </div>
 </template>

src/api/index.ts

 import axios from 'axios'
 import downloadjs from 'downloadjs'
-import { getStore, USR } from '../untils/userinfo'
+import { getStore, USR } from '../utils/userinfo'
 interface LoginData{
     name: string
     password: string
@@ -9,7 +9,7 @@ const instance = axios.create({
     timeout:15000
 })
 instance.interceptors.request.use((config)=>{
-    if(config.url !== 'http://172.16.100.59:8091/admin/login'){
+    if(config.url !== '/api/admin/login'){
         config.headers=  {
             'auth-Token':store?store.token?store.token:'':''
         }
@@ -21,7 +21,7 @@ instance.interceptors.request.use((config)=>{
 
 const store = getStore<USR<any>>('mining-manager')
 export const doLogin = async (data:LoginData) => {
-    return instance.post('http://172.16.100.59:8091/admin/login',
+    return instance.post('/api/admin/login',
         data
     ).then(res=>{
         console.log(res.headers);
@@ -36,7 +36,7 @@ export const doLogin = async (data:LoginData) => {
 
 
 export const getPlatList = async()=>{
-    return instance.get('http://172.16.100.59:8091/admin/plat-list',).then(res=> res.data)
+    return instance.get('/api/admin/plat-list',).then(res=> res.data)
 }
 
 export interface GetTransListParams{
@@ -52,7 +52,7 @@ export interface GetTransListParams{
 export const getTransList = async(params:GetTransListParams)=>{
     params.page?params.page:params.page=1
     params.pageSize?params.pageSize:params.pageSize=10
-    return instance.get('http://172.16.100.59:8091/admin/trans-list',{
+    return instance.get('/api/admin/trans-list',{
         params:params
     }).then(res=>{
         return res.data

src/components/common/SideMenu.vue

+<script lang="tsx">
+import {Menu} from '../../types/menu'
+
+function genSubMenu(data: Menu) {
+  return (
+      <el-sub-menu index={data.key} >
+        <template>{data.name}</template>
+        {(data.children || []).map(menu => {
+              if (menu.children) {
+                return genSubMenu(menu)
+              } else {
+                return (
+                    <el-menu-item index={menu.key}>
+                      {menu.name}
+                    </el-menu-item>
+                )
+              }
+            }
+        )}
+      </el-sub-menu>
+
+  )
+}
+
+import {defineComponent, onMounted, reactive, watch} from 'vue'
+import {menu} from '../../config/menu'
+import {useRouter,onBeforeRouteUpdate, useRoute} from "vue-router";
+
+export default defineComponent( ()=> {
+  const router=useRouter();
+  const route=useRoute();
+  const data = reactive({
+    selectedKeys:[] as string[],
+    openKeys:[] as string[],
+  });
+  // onBeforeRouteUpdate(to=>{
+  //   console.log('to',to)
+  // })
+  onMounted(()=>{
+    console.log(route)
+    data.selectedKeys=[route.fullPath]
+    if(route.matched.length>1){
+      data.openKeys=route.matched.filter((v,i)=>i<route.matched.length-1).map(v=>v.path);
+    }
+  })
+
+
+  const gotoRoute=({ item, key, keyPath }:any)=>{
+
+    router.push({path:key})
+  }
+  return ()=>(
+      <el-menu default-active={data.selectedKeys} default-openeds={data.openKeys} onClick={gotoRoute} theme="dark" mode="inline">
+        {
+          menu.map(m => {
+            if (m.children) {
+              return genSubMenu(m)
+            } else {
+              return (
+                  <el-menu-item index={m.key}>
+                    {m.name}
+                  </el-menu-item>
+              )
+            }
+          })
+        }
+      </el-menu>
+  )
+})
+
+</script>
\ No newline at end of file

src/config/menu.ts

+import {RouteRecordRaw} from "vue-router";
+import {Menu} from "../types/menu";
+import {getMenu} from '../utils/menu';
+import {reactive} from "vue";
+
+
+const Login = () => import('../views/Login.vue')
+const Layout = () => import('../Layout/index.vue')
+
+export const excludePath:string[]=['/','/login']
+
+export const routes:RouteRecordRaw[]=[
+    {
+        path: '/',
+        name:'Login',
+        redirect: '/login',
+    },
+    {
+        path: '/login',
+        component: Login
+    },
+    {
+        path: '/user',
+        component: Layout,
+        name:'用户',
+        redirect:'/user/info',
+        children: [
+            {
+                path: 'info',
+                name:'用户信息',
+                component: () => {
+                    return import('../views/user/info.vue')
+                }
+            },
+            // {
+            //     path: 'apply2',
+            //     name:'审核2',
+            //     component: () => {
+            //         return import('../views/flashTrade/Apply.vue')
+            //     }
+            // }
+        ]
+    },
+
+]
+// console.log(getMenu(routes,excludePath,null))
+export const menu:Menu[]=reactive(getMenu(routes,excludePath,null));

src/main.ts

@@ -2,7 +2,6 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import router from './router/index';
 import './style.css'
-const app = createApp(App)
-app.use(ElementPlus)
-app.mount('#app')
+createApp(App).use(ElementPlus).use(router).mount('#app')

src/router/index.ts

+import {createRouter, createWebHistory, RouterOptions} from 'vue-router'
+import {routes} from "../config/menu";
+import {getStore} from "../utils/userinfo";
+// @ts-ignore
+const userInfo = getStore('mining-manager')
+const router=createRouter(<RouterOptions>{
+    history: createWebHistory(),
+    routes,
+})
+router.beforeEach((to,from,next)=>{
+    // console.log(to,from,'???')
+    if(to.path!=='/login'&&!userInfo?.token){
+        next({path:'/login'})
+    }else{
+        next()
+    }
+})
+export default router
\ No newline at end of file

src/types/menu.ts

+export declare interface MenuChildren {
+    path: string,
+    key: string,
+    name: string | symbol,
+    children: Menu[]
+}
+
+export declare type Menu = {
+    path: string,
+    key: string,
+    name: string | symbol,
+    children?: Menu[]
+}
\ No newline at end of file

src/utils/menu.ts

+import {RouteRecordRaw} from "vue-router";
+import {Menu} from '../types/menu'
+
+export function getMenu(routes: RouteRecordRaw[], excludePath: string[], prefixPath: string | null): Menu[] {
+    return routes.map(route => {
+        const fullPath = prefixPath ? `${prefixPath}/${route.path}` : route.path
+        if (route.children) {
+            return {
+                name: route.name || '',
+                key: fullPath,
+                path: fullPath,
+                children: getMenu(route.children, [], fullPath)
+            }
+        } else {
+            return {
+                name: route.name || '',
+                key: fullPath,
+                path: fullPath,
+            }
+        }
+    }).filter(menu => !excludePath.includes(menu.path));
+}

src/untils/userinfo.ts → src/utils/userinfo.ts

@@ -10,7 +10,6 @@ export interface USR<U> {
     expire?:string | undefined;
 }
 
-
 /**获取app相关的本地数据 */
 const getStore =<T> (storeName:string) =>{
     const store =  localStorage.getItem(storeName)

src/components/login.vue → src/views/Login.vue

 <script lang="ts" setup>
-import { reactive } from 'vue';
-import { doLogin } from '../api';
-import { ElMessage } from 'element-plus'
-import { now, useStorage } from '@vueuse/core'
-import { setStore } from '../untils/userinfo';
+import {reactive} from 'vue';
+import {doLogin} from '../api';
+import {ElMessage} from 'element-plus'
+import dayjs from "dayjs";
+import {setStore} from '../utils/userinfo';
+import {useRouter} from "vue-router";
+
 const data = reactive({
-    name:'',
-    password:''
+  name: '',
+  password: ''
 })
-
-const login =  async()=>{
+const router = useRouter();
+const login = async () => {
   const getToken = await doLogin(data)
-    console.log(getToken,'这里');
+  console.log(getToken, '这里');
 
-    if(getToken){
+  if (getToken) {
     setStore({
-            app:'mining-manager',
-            timeStamp:now(),
-            token:getToken,
-            expire:'1d'
+      app: 'mining-manager',
+      timeStamp: dayjs().unix(),
+      token: getToken,
+      expire: '1d'
     })
-        location.reload()
+
     ElMessage({
-            message:"用户登陆成功",
-            type:"success"
+      message: "用户登陆成功",
+      type: "success"
     })
-    }else{
+    router.push('/user')
+  } else {
     ElMessage({
-            message:"登陆失败",
-            type:"error"
+      message: "登陆失败",
+      type: "error"
     })
   }
 

src/components/workspace.vue → src/views/user/info.vue

 <script lang="ts" setup>
-import Tabs from './tabs.vue';
-import Controllbar from './controllbar.vue';
+import Tabs from '../../components/tabs.vue';
+import Controllbar from '../../components/controllbar.vue';
 import { useAxios } from '@vueuse/integrations/useAxios'
 import { computed, onMounted, reactive, ref, watch } from 'vue';
-import { downloadTxt, getTransList } from '../api';
+import { downloadTxt, getTransList } from '../../api';
 import { ElMessage } from 'element-plus'
 import dayjs from 'dayjs'
 const reqData = reactive({

tsconfig.json

@@ -8,6 +8,7 @@
     "jsx": "preserve",
     "sourceMap": true,
     "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "lib": ["esnext", "dom"]
   },

vite.config.ts

 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(),vueJsx()],
   server:{
     port:8092,
     proxy:{