diff --git a/frontend/index.html b/frontend/index.html index 4072b74a..b375a95e 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,12 +1,91 @@ - + - + + - Next MCSManager UI 1 + + + + + MCSManager Panel + + + + +
+ +
+
+
+
+
+
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico old mode 100644 new mode 100755 index df36fcfb..8791aa41 Binary files a/frontend/public/favicon.ico and b/frontend/public/favicon.ico differ diff --git a/frontend/public/robots.txt b/frontend/public/robots.txt new file mode 100755 index 00000000..77470cb3 --- /dev/null +++ b/frontend/public/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Disallow: / \ No newline at end of file diff --git a/frontend/src/App.vue b/frontend/src/App.vue index a1894ba7..eefbde52 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -6,14 +6,11 @@ import enUS from "ant-design-vue/es/locale/en_US"; import dayjs from "dayjs"; import "dayjs/locale/zh-cn"; import "dayjs/locale/en"; -import { onMounted, ref, unref } from "vue"; +import { onMounted, ref } from "vue"; import { useAppConfigStore } from "@/stores/useAppConfigStore"; import { useAppStateStore } from "@/stores/useAppStateStore"; import { theme } from "ant-design-vue"; -import { message } from "ant-design-vue"; import InputDialogProvider from "./components/InputDialogProvider.vue"; -import { userInfoApi } from "./services/apis"; -import { t } from "./lang/i18n"; import { router } from "./config/router"; const { getCurrentLanguage, isDarkTheme } = useAppConfigStore(); @@ -46,12 +43,14 @@ if (isDarkUI) { import { Button, Select, Input, Table, ConfigProvider } from "ant-design-vue"; import MyselfInfoDialog from "./components/MyselfInfoDialog.vue"; +import { closeAppLoading } from "./tools/dom"; [Button, Select, Input, Table].forEach((element) => { element.props.size.default = "large"; }); onMounted(async () => { + closeAppLoading(); if (!state.userInfo?.token) { router.push({ path: "/login" diff --git a/frontend/src/assets/base.scss b/frontend/src/assets/base.scss index ff58514c..4648cbb3 100644 --- a/frontend/src/assets/base.scss +++ b/frontend/src/assets/base.scss @@ -8,4 +8,5 @@ --font-h1: 38px; --phone-width: 992px; + --app-max-width: 1440px; } diff --git a/frontend/src/assets/variables-dark.scss b/frontend/src/assets/variables-dark.scss index e4d7fbeb..6ac05429 100644 --- a/frontend/src/assets/variables-dark.scss +++ b/frontend/src/assets/variables-dark.scss @@ -8,7 +8,7 @@ --new-card-list-background-color-menu: rgba(129, 129, 129, 0.8); --float-box-bg-color: rgba(235, 235, 235, 0.2); --gray-border-color: var(--color-gray-10); - --app-max-width: 1440px; + --login-panel-bg: rgba(56, 56, 56, 0.8); --app-header-bg: var(--color-gray-2); diff --git a/frontend/src/assets/variables.scss b/frontend/src/assets/variables.scss index 02fb09eb..66dd51a8 100644 --- a/frontend/src/assets/variables.scss +++ b/frontend/src/assets/variables.scss @@ -8,7 +8,7 @@ --new-card-list-background-color-menu: rgba(255, 255, 255, 0.8); --float-box-bg-color: rgba(235, 235, 235, 0.2); --gray-border-color: var(--color-gray-10); - --app-max-width: 1440px; + --login-panel-bg: rgb(255, 255, 255, 0.8); --app-header-bg: var(--color-gray-10); diff --git a/frontend/src/components/NewCardList/index.vue b/frontend/src/components/NewCardList/index.vue index f23870dc..1588c462 100644 --- a/frontend/src/components/NewCardList/index.vue +++ b/frontend/src/components/NewCardList/index.vue @@ -165,7 +165,7 @@ const handleTabClick = (value: string) => { .new-card-list { margin: auto; - max-width: 1440px; + max-width: var(--app-max-width); } .card-list-container { diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 4b838427..32bfaef7 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -16,14 +16,18 @@ import { userInfoApi } from "./services/apis"; import { useAppStateStore } from "./stores/useAppStateStore"; (async function () { - const { updateUserInfo } = useAppStateStore(); - const { execute: reqUserInfo } = userInfoApi(); - const info = await reqUserInfo(); - updateUserInfo(info.value); - - const app = createApp(App); - app.use(createPinia()); - app.use(router); - app.use(i18n); - app.mount("#app"); + try { + const { updateUserInfo } = useAppStateStore(); + const { execute: reqUserInfo } = userInfoApi(); + const info = await reqUserInfo(); + updateUserInfo(info.value); + } catch (err) { + console.warn("Failed to get user info: ", err); + } finally { + const app = createApp(App); + app.use(createPinia()); + app.use(router); + app.use(i18n); + app.mount("#app"); + } })(); diff --git a/frontend/src/tools/dom.ts b/frontend/src/tools/dom.ts index f7c134fb..c790cb16 100644 --- a/frontend/src/tools/dom.ts +++ b/frontend/src/tools/dom.ts @@ -1,15 +1,19 @@ export function findParentWithClass(element: HTMLElement, className: string): HTMLElement | null { if (element.classList.contains(className)) { - return element + return element; } - let parentElement = element.parentElement + let parentElement = element.parentElement; while (parentElement !== null) { if (parentElement.classList.contains(className)) { - return parentElement + return parentElement; } - parentElement = parentElement.parentElement + parentElement = parentElement.parentElement; } - return null + return null; +} + +export function closeAppLoading() { + (window as any).closeLoadingContainer(); } diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue index 5cc6eaa2..ddde3fa2 100644 --- a/frontend/src/views/Login.vue +++ b/frontend/src/views/Login.vue @@ -144,28 +144,32 @@ const loginSuccess = () => { {{ t("使用服务器的 MCSManager 账号进入面板") }}
- - - +
+ + + - - - + + + +
@@ -343,6 +347,7 @@ const loginSuccess = () => { } .mcsmanager-link { + font-size: var(--font-body); text-align: right; color: var(--color-gray-7); a { diff --git a/frontend/src/widgets/Settings.vue b/frontend/src/widgets/Settings.vue index bb0484c9..2c6584f3 100644 --- a/frontend/src/widgets/Settings.vue +++ b/frontend/src/widgets/Settings.vue @@ -4,39 +4,32 @@ import { t } from "@/lang/i18n"; import type { LayoutCard, Settings } from "@/types"; import { onMounted, ref, h } from "vue"; import { message } from "ant-design-vue"; -import { - LockOutlined, - ProjectOutlined, - QuestionCircleOutlined, - LoadingOutlined -} from "@ant-design/icons-vue"; +import { LockOutlined, ProjectOutlined, QuestionCircleOutlined } from "@ant-design/icons-vue"; import { settingInfo, setSettingInfo } from "@/services/apis"; +import Loading from "@/components/Loading.vue"; defineProps<{ card: LayoutCard; }>(); -const indicator = h(LoadingOutlined, { - style: { - fontSize: "24px" - }, - spin: true -}); - const { execute, isReady } = settingInfo(); const { execute: submitExecute, isLoading: submitIsLoading } = setSettingInfo(); +const formData = ref(); + const submit = async () => { - const res = await submitExecute({ - data: { - ...formData.value + if (formData.value) { + const res = await submitExecute({ + data: { + ...formData.value + } + }); + if (res.value == "OK") { + return message.success(t("保存成功")); } - }); - if (res.value == "OK") { - return message.success(t("保存成功")); + message.error(res.value); } - message.error(res.value); }; const menus = [ @@ -79,8 +72,6 @@ const allYesNo = [ } ]; -const formData = ref({} as Settings); - onMounted(async () => { const res = await execute(); formData.value = res.value!; @@ -89,7 +80,7 @@ onMounted(async () => {