feat: 基本结构

2024-09-11 01:52:52 +08:00 · 2024-09-11 01:52:52 +08:00 · 89d45dcf56
parent de1dd98c7f
commit 89d45dcf56
12 changed files with 189 additions and 201 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@ -12,6 +12,7 @@
    "type-check": "vue-tsc --build --force"
  },
  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
    "axios": "^1.7.7",
    "element-plus": "^2.8.2",
    "pinia": "^2.1.7",
--- a/src/api/index.ts
+++ b/src/api/index.ts
@ -0,0 +1,15 @@
+/**
+ * api 管理
+ */
+
+import request from "@/utils/request"
+
+export default {
+    login(params: any) {
+        return request({
+            url: '/user/login',
+            method: 'post',
+            data: params
+        })
+    }
+}
--- a/src/assets/base.css
+++ b/src/assets/base.css
@ -1,86 +0,0 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  font-weight: normal;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition:
-    color 0.5s,
-    background-color 0.5s;
-  line-height: 1.6;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
--- a/src/assets/main.css
+++ b/src/assets/main.css
@ -1,34 +0,0 @@
-@import './base.css';
-
-#app {
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}
--- a/src/components/Login/LoginA.vue
+++ b/src/components/Login/LoginA.vue
@ -1,15 +1,101 @@
 <template>
-
+  <div class="login-wrapper">
+    <div class="model">
+      <el-form :model="user" status-icon :rules="rules">
+        <div class="title">Login</div>
+        <el-form-item prop="userName">
+          <el-input
+            type="text"
+            :prefix-icon="User"
+            placeholder="account"
+            v-model="user.userName"
+          />
+        </el-form-item>
+        <el-form-item prop="userPwd">
+          <el-input
+            type="text"
+            :prefix-icon="Lock"
+            placeholder="password"
+            v-model="user.userPwd"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="btn-login" @click="login"
+            >登录</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
 </template>

 <script lang="ts" setup>
-import { defineComponent } from 'vue'
+import { Lock, User } from '@element-plus/icons-vue'
+import { defineComponent, getCurrentInstance, reactive } from 'vue'

+const instance = getCurrentInstance()
+const api = instance?.appContext.config.globalProperties.$api
+
+const user = reactive({
+  userName: '',
+  userPwd: '',
+})
+
+const rules = {
+  userName: [
+    {
+      required: true,
+      message: '请输入用户名',
+      trigger: 'blur',
+    },
+  ],
+  userPwd: [
+    {
+      required: true,
+      message: '请输入密码',
+      trigger: 'blur',
+    },
+  ],
+}
+
+const login = () => {
+  const data = api.login({
+    userName: 'root',
+    userPwd: 'root',
+  })
+  console.log(data)
+}
 defineComponent({
  name: 'LoginA',
 })
 </script>

-<style scoped>
+<style lang="scss">
+.login-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #f9fcff;
+  width: 100vw;
+  height: 100vh;

+  .model {
+    width: 500px;
+    padding: 50px;
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow: 0px 0px 10px 3px #c7c9cbd4;
+
+    .title {
+      font-size: 38px;
+      text-align: center;
+      line-height: 1.5;
+      margin-bottom: 30px;
+    }
+
+    .btn-login {
+      width: 100%;
+    }
+  }
+}
 </style>
--- a/src/config/index.ts
+++ b/src/config/index.ts
@ -5,8 +5,8 @@
 const env = import.meta.env.MODE == "development" ? 'dev' : 'prod'
 const EnvConfig = {
    dev: {
-        baseApi: '/',
-        mockApi: 'https://mock.presstime.cn/mock/668987cbcb2f4f1158f47e0e/manager-fe',
+        baseApi: 'http://localhost:9000/api/v1',
+        mockApi: 'http://localhost:9000/api/v1',
    },
    test: {
        baseApi: '//test.demo/api',
--- a/src/main.ts
+++ b/src/main.ts
@ -1,15 +1,18 @@
 // 程序入口
+import api from "@/api"
+import App from '@/App.vue'
+import router from '@/router'
 import storage from '@/stores/storage'
 import request from '@/utils/request'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import { createPinia } from 'pinia'
 import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
+
 const app = createApp(App)

 app.config.globalProperties.$request = request
+app.config.globalProperties.$api = api
 app.config.globalProperties.$storage = storage

 app.use(ElementPlus)
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -1,11 +1,11 @@
 // index.js - router
+import LoginA from "@/components/Login/LoginA.vue"
 import storage from "@/stores/storage"
 import useColorLogOutPut from "@/utils/color_log"
 import About from "@/views/About.vue"
 import ApiPage from '@/views/ApiPage.vue'
 import Base from "@/views/Base.vue"
 import Home from "@/views/Home.vue"
-import Login from "@/views/Login.vue"
 import Welcome from "@/views/Welcome.vue"
 import { createRouter, createWebHashHistory } from "vue-router"

@ -34,7 +34,7 @@ const routes = [
  {
    name: 'Login',
    path: '/Login',
-    component: Login,
+    component: LoginA,
    meta: {
      title: "登陆页^_^"
    }
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@ -1,10 +1,10 @@
-import config from "@/config"
-import router from "@/router"
-import axios from "axios"
-import { ElMessage } from "element-plus"
+import config from '@/config'
+import router from '@/router'
+import axios from 'axios'
+import { ElMessage } from 'element-plus'

-const TOKEN_ERROR = "Token 已过期"
-const NETWORK_ERROR = "网络异常"
+const TOKEN_ERROR = 'Token 已过期'
+const NETWORK_ERROR = '网络异常'

 const service = axios.create({
    baseURL: config.baseApi,
@ -16,7 +16,7 @@ service.interceptors.request.use((req: any) => {
    const headers = req.headers

    if (!headers.Authorization) {
-        headers.Authorization = "bear fromsko"
+        headers.Authorization = 'bear fromsko'
    }
    return req
 })
@ -40,39 +40,39 @@ service.interceptors.response.use((res: any) => {
 })

 interface RequestOptions {
-    method?: string;
-    params?: any;
-    data?: any;
-    url: string;
+    method?: string
+    mock?: boolean
+    params?: any
+    data?: any
+    url: string
 }

 function request(options: RequestOptions): any {
-    options.method = options.method || 'get';
+    options.method = options.method || 'get'

    if (options.method.toLowerCase() === 'get') {
-        options.params = options.data;
+        options.params = options.data
    }

-    if (config.env === "prod") {
-        service.defaults.baseURL = config.baseApi;
+    if (config.env === 'prod') {
+        service.defaults.baseURL = config.baseApi
    } else {
-        service.defaults.baseURL = config.mock ? config.mockApi : config.baseApi;
+        service.defaults.baseURL = config.mock ? config.mockApi : config.baseApi
    }

-    return service(options);
+    return service(options)
 }

 ['get', 'post', 'delete', 'put'].forEach((item) => {
    // 使用 as any 来避免类型检查错误
-    (request as any)[item] = (url: string, data: any, options: any) => {
+    ; (request as any)[item] = (url: string, data: any, options: any) => {
        return request({
            url,
            data,
            method: item,
-            ...options
-        });
-    };
-});
-
+            ...options,
+        })
+    }
+})

 export default request
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -1,69 +1,69 @@
 <template>
-<div class="basic-layout">
+  <div class="basic-layout">
    <div class="nav-side"></div>
    <div class="content-right">
-        <div class="nav-top">
-            <div class="bread">面包屑</div>
-            <div class="user-info">用户</div>
-        </div>
-        <div class="wrapper">
-            <div class="main-page">
-                <router-view></router-view>
-            </div>
+      <div class="nav-top">
+        <div class="bread">面包屑</div>
+        <div class="user-info">用户</div>
+      </div>
+      <div class="wrapper">
+        <div class="main-page">
+          <router-view></router-view>
        </div>
+      </div>
    </div>
-</div>
+  </div>
 </template>

 <script>
 export default {
-    name: 'home',
-    methods: {},
+  name: 'home',
+  methods: {},
 }
 </script>

 <style lang="scss">
 .basic-layout {
-    position: relative;
+  position: relative;

-    .nav-side {
-        position: fixed;
-        width: 200px;
-        height: 100vh;
-        background-color: #001529;
-        color: #fff;
-        overflow-y: auto;
-        transition: width 0.5s;
+  .nav-side {
+    position: fixed;
+    width: 200px;
+    height: 100vh;
+    background-color: #001529;
+    color: #fff;
+    overflow-y: auto;
+    transition: width 0.5s;
+  }
+
+  .content-right {
+    margin-left: 200px;
+
+    .nav-top {
+      height: 50px;
+      line-height: 50px;
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 1px solid #ddd;
+      padding: 0 20px;
    }

-    .content-right {
-        margin-left: 200px;
+    .wrapper {
+      background: #eef0f3;
+      padding: 20px;
+      height: calc(100vh - 50px);

-        .nav-top {
-            height: 50px;
-            line-height: 50px;
-            display: flex;
-            justify-content: space-between;
-            border-bottom: 1px solid #ddd;
-            padding: 0 20px;
-        }
+      .main-page {
+        height: 100%;
+        background: #fff;

-        .wrapper {
-            background: #eef0f3;
-            padding: 20px;
-            height: calc(100vh - 50px);
-
-            .main-page {
-                height: 100%;
-                background: #fff;
-
-                -webkit-user-drag: none;
-                -webkit-user-select: none;
-                -moz-user-select: none;
-                -ms-user-select: none;
-                user-select: none;
-            }
-        }
+        -webkit-user-drag: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+      }
    }
+  }
 }
 </style>
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,7 +1,7 @@
 import { fileURLToPath, URL } from 'node:url'

-import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'

 // https://vitejs.dev/config/
 export default defineConfig({
@ -12,5 +12,8 @@ export default defineConfig({
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
+  },
+  server: {
+    ws: false
  }
 })