fix: 1

src/app.vue

@@ -2,27 +2,13 @@
   <ConfigProvider v-bind="config" v-if="!showLogin">
     <template v-for="needMount in needMounts">
       <Teleport :to="needMount[0]">
-        <component
-          :is="needMount[1]"
-          v-bind="needMount[2]"
-          :ref="(v: any) => needMount[3] && needMount[3](v)"
-        />
+        <component :is="needMount[1]" v-bind="needMount[2]" :ref="(v: any) => needMount[3] && needMount[3](v)" />
       </Teleport>
     </template>
 
-    <ui-editor-layout
-      @click.stop
-      @contextmenu.prevent
-      id="layout-app"
-      class="editor-layout"
-      :style="layoutStyles"
-      :class="layoutClassNames"
-    >
-      <div
-        :ref="(el: any) => appEl = (el as HTMLDivElement)"
-        v-if="loaded"
-        class="app-con"
-      >
+    <ui-editor-layout @click.stop @contextmenu.prevent id="layout-app" class="editor-layout" :style="layoutStyles"
+      :class="layoutClassNames">
+      <div :ref="(el: any) => appEl = (el as HTMLDivElement)" v-if="loaded" class="app-con">
         <router-view v-slot="{ Component }">
           <!-- <keep-alive> -->
           <component :is="Component" />
@@ -42,45 +28,7 @@
 
     <PwdModel v-if="inputPwd" @close="inputPwd = false" />
   </ConfigProvider>
-
-  <ui-dialog v-else>
-    <template v-slot:header>
-      <span>用户登录</span>
-    </template>
-    <div>
-      <ui-input
-        type="text"
-        placeholder="请输入账号"
-        v-model="username"
-        style="width: 360px"
-      />
-      <br />
-      <ui-input
-        type="password"
-        placeholder="请输入密码"
-        v-model="password"
-        style="width: 360px; margin-top: 20px"
-      />
-      <br />
-      <ui-input
-        type="checkbox"
-        @click.stop
-        label="记住密码"
-        style="margin-top: 20px"
-        :modelValue="mark"
-        @update:modelValue="(select: any) => mark = select"
-      />
-      <!-- <ui-input
-        type="checkbox"
-        label="记住密码"
-        v-model="mark"
-        style="margin-top: 20px"
-      /> -->
-    </div>
-    <template v-slot:footer>
-      <ui-button type="submit" @click="login(username, password)">登录</ui-button>
-    </template>
-  </ui-dialog>
+  <Login v-else />
 </template>
 
 <script lang="ts" setup>
@@ -110,15 +58,13 @@ import { config } from "./config";
 import { sdk, sdkLoaded } from "./sdk";
 import GAxios from "axios";
 
+
 import { addReqErrorHandler, addResErrorHandler, ResCode, setToken } from "./api";
 import { mergeFuns } from "./components/drawing/hook";
+import Login from "./views/login.vue";
 
 const gotoLogin = () => {
-  if (import.meta.env.DEV) {
-    login("super-admin", "Aa123456");
-  } else {
-    showLogin.value = true;
-  }
+  showLogin.value = true;
 };
 
 addResErrorHandler((data: any) => {
@@ -204,36 +150,6 @@ const layoutStyles = computed(() => {
 });
 
 const showLogin = ref(false);
-const username = ref(localStorage.getItem("fuse-username") || "");
-const password = ref(localStorage.getItem("fuse-password") || "");
-const mark = ref(!!localStorage.getItem("fuse-mark"));
-const login = (username: string, password: string) => {
-  GAxios.post("/service/manage/login", {
-    password: encodePwd(password),
-    userName: username,
-    username: username,
-  }).then((res) => {
-    setToken(res.data.data.token);
-
-    setTimeout(() => {
-      const p = new URLSearchParams(location.search);
-      p.delete("token");
-      location.search = "?" + p.toString();
-      setTimeout(() => location.reload(), 100);
-    }, 100);
-
-    loaded.value = false;
-    if (mark.value) {
-      localStorage.setItem("fuse-username", username);
-      localStorage.setItem("fuse-password", password);
-      localStorage.setItem("fuse-mark", "1");
-    } else {
-      localStorage.removeItem("fuse-username");
-      localStorage.removeItem("fuse-password");
-      localStorage.removeItem("fuse-mark");
-    }
-  });
-};
 
 watch(
   () => custom.full,
@@ -280,9 +196,7 @@ watch(
 }
 
 .hide-left-box-mode {
-  --left-pano-left: calc(
-    var(--editor-menu-left) + var(--editor-menu-width) - var(--left-pano-width)
-  ) !important;
+  --left-pano-left: calc(var(--editor-menu-left) + var(--editor-menu-width) - var(--left-pano-width)) !important;
 }
 
 .edit-mode {

src/views/login.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="login-layout">
+    <div class="login-content">
+      <div class="header">
+        <img src="/favicon.ico" />
+        <p>实景三维</p>
+      </div>
+
+      <div class="body">
+        <ui-input
+          type="text"
+          placeholder="请输入账号"
+          v-model="username"
+          style="width: 100%"
+        />
+        <br />
+        <ui-input
+          type="password"
+          placeholder="请输入密码"
+          v-model="password"
+          style="width: 100%; margin-top: 20px"
+        />
+        <br />
+        <ui-input
+          type="checkbox"
+          @click.stop
+          label="记住密码"
+          style="margin-top: 20px"
+          :modelValue="mark"
+          @update:modelValue="(select: any) => mark = select"
+        />
+      </div>
+      <div class="bottom">
+        <ui-button type="submit" @click="login(username, password)">登录</ui-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { encodePwd } from "@/utils";
+import GAxios from "axios";
+import { setToken } from "@/api";
+import { Message } from "bill/expose-common";
+
+const username = ref(localStorage.getItem("fuse-username") || "");
+const password = ref(localStorage.getItem("fuse-password") || "");
+const mark = ref(!!localStorage.getItem("fuse-mark"));
+const login = (username: string, password: string) => {
+  if (!username) {
+    return Message.error("账号不能为空");
+  }
+  if (!password) {
+    return Message.error("密码不能为空");
+  }
+  GAxios.post("/service/manage/login", {
+    password: encodePwd(password),
+    userName: username,
+    username: username,
+  }).then((res) => {
+    if (res.data.code !== 0) {
+      return Message.error(res.data.message);
+    }
+
+    setToken(res.data.data.token);
+
+    setTimeout(() => {
+      const p = new URLSearchParams(location.search);
+      p.delete("token");
+      location.search = "?" + p.toString();
+      setTimeout(() => location.reload(), 100);
+    }, 100);
+
+    if (mark.value) {
+      localStorage.setItem("fuse-username", username);
+      localStorage.setItem("fuse-password", password);
+      localStorage.setItem("fuse-mark", "1");
+    } else {
+      localStorage.removeItem("fuse-username");
+      localStorage.removeItem("fuse-password");
+      localStorage.removeItem("fuse-mark");
+    }
+  });
+};
+
+if (import.meta.env.DEV) {
+  // login("super-admin", "Aa123456");
+}
+</script>
+
+<style lang="scss" scoped>
+.login-layout {
+  position: fixed;
+  inset: 0;
+  z-index: 99999;
+  background: url("/images/login-backimage.png") no-repeat center center;
+  background-size: cover;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.login-content {
+  width: 400px;
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 64px;
+
+    img {
+      width: 80px;
+      height: 80px;
+      margin-bottom: 10px;
+    }
+
+    p {
+      font-weight: bold;
+      font-size: 32px;
+      color: #000000;
+      line-height: 48px;
+      letter-spacing: 12px;
+      text-align: center;
+      font-style: normal;
+      text-transform: none;
+    }
+  }
+
+  .body {
+    margin-bottom: 48px;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.login-content {
+  .ui-input,
+  .ui-button {
+    --colors-color: #d9d9d9;
+    --base-border-color: #d9d9d9;
+    --colors-content-color: #000000;
+    --colors-primary-base: #d9d9d9;
+    --colors-normal-back: #ffffff;
+    --colors-primary-base: #0960bd;
+    --color-main-normal: #0960bd;
+  }
+
+  .ui-button {
+    color: #fff !important;
+    border: 1px solid var(--color-main-normal) !important;
+    background: var(--color-main-normal) !important;
+  }
+}
+</style>