init

src/pages/index.vue

@@ -0,0 +1,158 @@
+<script setup>
+import zhCN from "ant-design-vue/es/locale/zh_CN";
+import { useUserStore } from "@/store/user";
+import { ref } from "vue";
+
+const locale = zhCN;
+const userStore = useUserStore();
+const isInitialized = ref(false);
+
+userStore.init().then(() => {
+  isInitialized.value = true;
+  userStore.initTokenExpirationListener();
+  if (userStore.isLoggedIn) {
+    userStore.getUserProfile();
+  }
+});
+</script>
+
+<template>
+  <a-spin :spinning="!isInitialized">
+    <a-config-provider :locale="locale" v-if="isInitialized">
+      <router-view></router-view>
+    </a-config-provider>
+    <div v-else class="loading-container"></div>
+  </a-spin>
+</template>
+
+<style>
+/* 全局样式和响应式基础设置 */
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+    Arial, "Noto Sans", sans-serif;
+  height: 100%;
+  width: 100%;
+  overflow-x: hidden;
+  overscroll-behavior: none;
+}
+
+/* 设置根元素字体大小，便于使用rem单位 */
+html {
+  font-size: 16px;
+}
+
+/* 移动端适配 - 根据屏幕宽度调整基础字体大小 */
+@media screen and (max-width: 768px) {
+  html {
+    font-size: 14px;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  html {
+    font-size: 12px;
+  }
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+  overscroll-behavior: none;
+}
+
+/* 禁止移动端在页面边界和弹窗容器上的上下回弹 */
+.layout,
+.layout-content,
+.content,
+.ant-modal-wrap,
+.ant-modal-content,
+.ant-modal-body,
+.ant-drawer-content-wrapper,
+.ant-drawer-content,
+.ant-drawer-body {
+  overscroll-behavior: none;
+}
+
+/* 让所有滚动条美观 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* 特定区域隐藏滚动条 */
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+/* 响应式工具类 */
+.hidden-xs {
+  display: block;
+}
+
+.visible-xs {
+  display: none;
+}
+
+@media screen and (max-width: 768px) {
+  .hidden-xs {
+    display: none !important;
+  }
+
+  .visible-xs {
+    display: block !important;
+  }
+}
+
+/* Ant Design 表格响应式调整 */
+@media screen and (max-width: 768px) {
+  .ant-table {
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  .ant-table-thead > tr > th,
+  .ant-table-tbody > tr > td {
+    white-space: nowrap;
+    padding: 8px;
+  }
+
+  /* 表单在移动端的调整 */
+  .ant-form-item {
+    margin-bottom: 12px;
+  }
+
+  .ant-form-item-label {
+    padding: 0;
+  }
+}
+
+.loading-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+  font-weight: bold;
+  color: #999;
+}
+</style>