login页面

尝试修复闪烁问题
2024-04-02 15:38:17 +08:00 · 2024-04-02 15:28:49 +08:00 · 2024-04-02 14:42:54 +08:00 · 2024-04-02 14:34:29 +08:00 · 2024-04-02 14:29:42 +08:00 · 2024-04-02 13:55:36 +08:00
16 changed files with 155 additions and 63 deletions
--- a/.gitignore
+++ b/.gitignore
@ -50,3 +50,4 @@ pnpm*
 #components.d.ts
 stats.html
 ts-out-dir
+archive.zip
--- a/deploy.js
+++ b/deploy.js
@ -105,16 +105,16 @@ async function main() {
  //  await exec(`unzip -O gbk ${archivePath} -d ${target}`)
  //} else {
  await exec(`unzip ${archivePath} -d ${target}`)
-  await exec(`mv ${target}/dist ${target}/iGame`)
+  await exec(`mv ${target}/dist ${target}/home`)
  //}

-  const nginxTarget = '/home/lolosia/nginx/home'
+  const nginxTarget = '/usr/share/nginx/html'

  console.log('移除旧目录 ...')
  await sudo(`rm -rf ${nginxTarget}/${nginxContentPath}`)

  console.log('复制文件 到指定目录 ...')
-  await sudo(`cp -r -f ${target}/* ${nginxTarget}`)
+  await sudo(`cp -r -f ${target}/* ${nginxTarget}/home`)
  await new Promise((r) => {
    dialog.info(`你现在可以关闭终端，去做其他事情了`, `${nginxContentPath}项目部署完成！`, r)
  })
--- a/index.html
+++ b/index.html
@ -8,6 +8,6 @@
 </head>
 <body>
 <div id="app"></div>
-<script type="module" src="/src/main.ts"></script>
+<script type="module" src="/src/boot.ts"></script>
 </body>
 </html>
--- a/package.json
+++ b/package.json
@ -1,5 +1,5 @@
 {
-  "name": "vue3-admin-plus",
+  "name": "lolosia-web",
  "version": "2.0.2",
  "license": "MIT",
  "author": "一七年夏",
@ -19,6 +19,7 @@
    "vitest": "vitest --ui",
    "tsc-check": "tsc",
    "coverage": "vitest run --coverage",
+    "deploy": "node deploy.js",
    "preinstall": "only-allow pnpm"
  },
  "dependencies": {
--- a/src/App.vue
+++ b/src/App.vue
@ -12,7 +12,6 @@ import { storeToRefs } from 'pinia/dist/pinia'
 import { useRoute } from 'vue-router'
 import { useBasicStore } from '@/store/basic'
 import { useConfigStore } from '@/store/config'
-import { useErrorLog } from '@/hooks/use-error-log'

 //reshow default setting
 import { toggleHtmlClass } from '@/theme/utils'
@ -24,10 +23,6 @@ onBeforeMount(() => {
  //set tmp token when setting isNeedLogin false
  if (!settings.value.isNeedLogin) useBasicStore().setToken(settings.value.tmpToken)
 })
-onMounted(() => {
-  //lanch the errorLog collection
-  useErrorLog()
-})
 const route = useRoute()
 onMounted(() => {
  const { setTheme, theme, setSize, size, setLanguage, language } = useConfigStore()
--- a/src/boot.ts
+++ b/src/boot.ts
@ -0,0 +1,23 @@
+//@ts-ignore
+import css from '@/styles/init.css?url'
+//@ts-ignore
+import logo from '@/icons/common/sidebar-logo.svg?url'
+import settings from '@/settings'
+
+document.querySelector('#app')!.innerHTML = `
+<div class="__init__" style="display: none">
+  <link id="__init__" rel="stylesheet" href="${css}" />
+  <div class="__init__image">
+    <img src="${logo}" alt="" />
+  </div>
+  <div class="__init__title">${settings.title}</div>
+  <div class="__init__process-frame">
+    <div class="__init__progress">
+      <div class="__init__masker"></div>
+    </div>
+  </div>
+</div>
+`
+;(async () => {
+  await import('./main')
+})()
--- a/src/hooks/use-error-log.ts
+++ b/src/hooks/use-error-log.ts
@ -1,32 +0,0 @@
-/*js 错误日志收集*/
-import { jsErrorCollection } from 'js-error-collection'
-import pack from '../../package.json'
-import settings from '@/settings'
-import bus from '@/utils/bus'
-import request from '@/utils/request'
-const reqUrl = '/integration-front/errorCollection/insert'
-const errorLogReq = (errLog: string) => {
-  request({
-    url: reqUrl,
-    data: {
-      pageUrl: window.location.href,
-      errorLog: errLog,
-      browserType: navigator.userAgent,
-      version: pack.version
-    },
-    method: 'post'
-  }).then(() => {
-    //通知错误列表页面更新数据
-    bus.emit('reloadErrorPage', {})
-  })
-}
-
-export const useErrorLog = () => {
-  //判断该环境是否需要收集错误日志,由settings配置决定
-  if (settings.errorLog?.includes(import.meta.env.VITE_APP_ENV)) {
-    jsErrorCollection({ runtimeError: true, rejectError: true, consoleError: true }, (errLog) => {
-      //判断是否是reqUrl错误，避免死循环
-      if (!errLog.includes(reqUrl)) errorLogReq(errLog)
-    })
-  }
-}
--- a/src/settings.ts
+++ b/src/settings.ts
@ -1,7 +1,6 @@
-import packageJson from '../package.json'
 import type { SettingsConfig } from '~/basic'
 export const settings: SettingsConfig = {
-  title: packageJson.name,
+  title: '洛洛希雅的小网站',
  /**
   * @type {boolean} true | false
   * @description Whether show the logo in sidebar
@ -87,7 +86,7 @@ export const settings: SettingsConfig = {
  /*
   * vite.config.js base config
   * */
-  viteBasePath: '/vue-admin-plus/',
+  viteBasePath: '/home/',

  /*
   * i18n setting default language
--- a/src/styles/init.css
+++ b/src/styles/init.css
@ -0,0 +1,68 @@
+.__init__ {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+    display: flex !important;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.__init__title {
+    font-size: 2.5vmin;
+    padding: 1.5vmin;
+    font-weight: bold;
+    font-family: 'system-ui';
+}
+
+.__init__image {
+    height: 20vmin;
+    width: 20vmin;
+    /*background-image: url("/public/loading-logo.svg");*/
+    background-size: 100% 100%;
+    margin-bottom: 4vmin;
+    overflow: hidden;
+    transform: translateY(-1000px);
+    filter: drop-shadow(0px 1000px orange);
+}
+
+.__init__image img {
+    height: 100%;
+    width: 100%;
+}
+
+.__init__process-frame {
+    width: 33%;
+    height: 2.4vmin;
+    border-radius: 1.2vmin;
+    overflow: hidden;
+}
+
+.__init__progress {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(-45deg, #0278ee 36%, #7db9e8 28%, #7db9e8 67%, #0278ee 25%);
+    background-size: 4em 2em;
+    -webkit-animation: load 1s;
+    animation: __init__load 1s;
+    position: relative;
+}
+
+.__init__masker {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    opacity: 0.8;
+    background: linear-gradient(90deg, #1c7bda 20%, #fff 100%)
+}
+
+@keyframes __init__load {
+    0% {
+        width: 0;
+    }
+}
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@ -62,10 +62,21 @@ service.interceptors.response.use(
 )

 export const baseUrl: string = (() => {
-  let port = import.meta.env.VITE_APP_BASE_URL
-  if (/:\d{1,5}/.test(port)) port = port.match(/(?<port>:\d{1,5})/)?.groups?.port ?? ''
-  else port = `:${location.port}`
-  return `${location.protocol}//${location.hostname}${port}`
+  if (window.NGINX_BASE_URL) return window.NGINX_BASE_URL
+
+  const mode = import.meta.env.VITE_APP_BASE_MODE
+  if (mode === 'port') {
+    const port = import.meta.env.VITE_APP_BASE_PORT || location.port
+    return `${location.protocol}//${location.hostname}:${port}`
+  }
+  if (mode === 'url') {
+    let url = import.meta.env.VITE_APP_BASE_URL
+    if (!url) url = `${location.protocol}//${location.host}`
+    return url
+  }
+
+  //local
+  return `${location.protocol}//${location.host}`
 })()

 //导出service实例给页面调用 , config->页面的配置
--- a/src/views/login/1712042358737.jpg
+++ b/src/views/login/1712042358737.jpg
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -1,8 +1,8 @@
 <template>
  <div class="login-container columnCE">
-    <div class="login-hero">
-      <img src="@/assets/layout/login.svg" :alt="settings.title" />
-    </div>
+    <!--    <div class="login-hero">-->
+    <!--      <img src="@/assets/layout/login.svg" :alt="settings.title" />-->
+    <!--    </div>-->
    <el-form ref="refLoginForm" class="login-form" :model="subForm" :rules="formRules">
      <div class="title-container">
        <h3 class="title text-center">{{ settings.title }}</h3>
@ -32,10 +32,15 @@
        </span>
      </el-form-item>
      <div class="tip-message">{{ tipMessage }}</div>
-      <el-button :loading="subLoading" type="primary" class="login-btn" size="default" @click.prevent="handleLogin">
+      <el-button :loading="subLoading" color="#E3B4D0" class="login-btn" size="default" @click.prevent="handleLogin">
        登录
      </el-button>
    </el-form>
+    <div class="icp">
+      鲁ICP备
+      <s>1145141919号-810</s>
+    </div>
+    <div class="copyright">© 2024 洛洛希雅Lolosia</div>
  </div>
 </template>

@ -163,14 +168,19 @@ $light_gray: #eee;
  overflow-y: hidden;
  width: 100%;
  background-color: $bg;
+  background-image: url('./1712042358737.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position-x: 65%;
+  background-position-y: 75%;

  .login-form {
    width: 360px;
    padding: 40px 30px;
-    background: #fff;
+    background: #fff6;
    box-shadow: 0 4px 16px rgba(4, 61, 175, 0.15);
    border-radius: 8px;
-    margin-right: 20vw;
+    margin-right: 10vw;
    z-index: 10;
    @media screen and (min-width: 769px) and (max-width: 992px) {
      margin-right: 10vw;
@ -184,12 +194,26 @@ $light_gray: #eee;
  .title-container {
    .title {
      font-size: 18px;
-      color: $dark_gray;
+      color: white;
      margin: 0 auto 25px auto;
      text-align: center;
      font-weight: bold;
    }
  }
+
+  .icp {
+    position: absolute;
+    bottom: 0.5em;
+    left: 2em;
+    color: #fffb;
+  }
+
+  .copyright {
+    position: absolute;
+    bottom: 0.5em;
+    right: 2em;
+    color: #fffb;
+  }
 }

 .login-hero {
@ -261,7 +285,7 @@ $light_gray: #eee;

  .el-form-item {
    border: 1px solid #e0e0e0;
-    background: #fff;
+    background: #fffb;
    border-radius: 4px;
    color: #999;

--- a/typings/auto-imports.d.ts
+++ b/typings/auto-imports.d.ts
@ -69,7 +69,7 @@ declare global {
  const resetState: typeof import('../src/hooks/use-permission')['resetState']
  const resizeHandler: typeof import('../src/hooks/use-layout')['resizeHandler']
  const resolveComponent: typeof import('vue')['resolveComponent']
-  const resolveDirective: typeof import('vue')['resolveDirective']
+  const resolveDirective: (typeof import('vue'))['resolveDirective']
  const rolesPermission: typeof import('../src/directives/roles-permission')['default']
  const routeInfo: typeof import('../src/hooks/use-self-router')['routeInfo']
  const routerBack: typeof import('../src/hooks/use-self-router')['routerBack']
@ -94,7 +94,6 @@ declare global {
  const useCssVars: typeof import('vue')['useCssVars']
  const useDebuggerStore: typeof import('../src/store/debuger')['useDebuggerStore']
  const useElement: typeof import('../src/hooks/use-element')['useElement']
-  const useErrorLog: typeof import('../src/hooks/use-error-log')['useErrorLog']
  const useLink: typeof import('vue-router')['useLink']
  const useRoute: typeof import('vue-router')['useRoute']
  const useRouter: typeof import('vue-router')['useRouter']
--- a/typings/components.d.ts
+++ b/typings/components.d.ts
@ -8,7 +8,6 @@ export {}
 declare module 'vue' {
  export interface GlobalComponents {
    AppPage: typeof import('./../src/components/AppPage.vue')['default']
-    Container: typeof import('@/components/AppPage.vue')['default']
    ElSvgIcon: typeof import('./../src/components/ElSvgIcon.vue')['default']
    IconSelector: typeof import('./../src/components/IconSelector.vue')['default']
    MenuIcon: typeof import('./../src/components/MenuIcon.vue')['default']
--- a/typings/env.d.ts
+++ b/typings/env.d.ts
@ -9,5 +9,9 @@ declare global {
  interface ImportMeta {
    readonly env: ImportMetaEnv
  }
+
+  interface Window {
+    readonly NGINX_BASE_URL: string | undefined
+  }
 }
 export {}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -127,9 +127,9 @@ export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
      assetsDir: 'static/assets',
      rollupOptions: {
        output: {
-          chunkFileNames: 'static/js/[name]-[hash].js',
-          entryFileNames: 'static/js/[name]-[hash].js',
-          assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
+          chunkFileNames: 'static/js/chunk-[hash].js',
+          entryFileNames: 'static/js/index.js',
+          assetFileNames: 'static/[ext]/[hash].[ext]'
        }
      }
    },
Author	SHA1	Message	Date
321zhangjvzhi	12d3276679	login页面	2024-04-02 15:38:17 +08:00
321zhangjvzhi	9d77f08b83	login页面	2024-04-02 15:28:49 +08:00
321zhangjvzhi	dca7dc584d	尝试修复闪烁问题	2024-04-02 14:42:54 +08:00
321zhangjvzhi	0d3bcbef48	修正一个导入方式	2024-04-02 14:34:29 +08:00
321zhangjvzhi	8dfbd9b338	修正一个导入方式	2024-04-02 14:29:42 +08:00
321zhangjvzhi	6f6cb1977d	移除use-error-log	2024-04-02 13:55:36 +08:00
321zhangjvzhi	698757df92	修正baseUrl问题	2024-04-02 13:49:56 +08:00
321zhangjvzhi	b6f3feac82	deploy.js	2024-03-31 14:15:21 +08:00
321zhangjvzhi	bedba54805	vite.config.ts	2024-03-31 13:39:14 +08:00
321zhangjvzhi	69b789b546	deploy.js	2024-03-31 13:37:12 +08:00