feat: 优化表单样式

src/api/interceptors/auth.ts

@@ -1,12 +1,13 @@
-import { store, useUserStore } from "@/store";
+import { store } from '@/store';
-import { AxiosInstance } from "axios";
+import { useUserStore } from '@/store/user';
+import { AxiosInstance } from 'axios';
 
 /**
  * 登陆令牌拦截器
  * @param axios Axios实例
  */
 export function addAuthInterceptor(axios: AxiosInstance) {
-  axios.interceptors.request.use((config) => {
+  axios.interceptors.request.use(config => {
     const userStore = useUserStore(store);
     if (userStore.accessToken) {
       config.headers.Authorization = `Bearer ${userStore.accessToken}`;

src/libs/dayjs/index.ts

@@ -39,17 +39,17 @@ dayjs.extend(localData);
 /**
  * 默认时间格式
  */
-dayjs.DATETIME = DATETIME;
+dayjs.DATETIME = 'YYYY-MM-DD HH:mm';
 
 /**
  * 默认日期格式
  */
-dayjs.DATE = DATE;
+dayjs.DATE = 'YYYY-MM-DD';
 
 /**
  * 默认时间格式
  */
-dayjs.TIME = TIME;
+dayjs.TIME = 'HH:mm:ss';
 
 /**
  * 保留原方法
@@ -59,11 +59,8 @@ dayjs.prototype._format = dayjs.prototype.format;
 /**
  * 重写，设置默认时间格式
  */
-dayjs.prototype.format = function (format?: string) {
+dayjs.prototype.format = function (format: string = dayjs.DATETIME) {
-  if (format) {
+  return this._format(format);
-    return this._format(format);
-  }
-  return this._format(dayjs.DATETIME);
 };
 
 export { DATE, DATETIME, TIME, dayjs };

src/pages/_layout/UserDropdown.vue

@@ -62,7 +62,7 @@
 
 <script setup lang="ts">
 import { useFormModal } from '@/components/AnForm';
-import { useUserStore } from '@/store';
+import { useUserStore } from '@/store/user';
 import { delConfirm } from '@/utils';
 import { Message } from '@arco-design/web-vue';
 

src/pages/_layout/index.vue

@@ -57,13 +57,13 @@
           <Menu />
         </a-scrollbar>
         <template #trigger="{ collapsed }">
-          <div class="w-full h-full py-1 px-1" @click.stop>
+          <div class="w-full h-full py-1 px-1 flex justify-between items-center gap-2" @click.stop>
-            <span
+            <div
-              class="inline-block w-10 h-full rounded flex items-center justify-center hover:bg-gray-100 text-base text-gray-400"
+              class="inline-block w-10 h-10 h-full rounded flex items-center justify-center hover:bg-zinc-100 text-base text-gray-400"
               @click="() => (isCollapsed = !isCollapsed)"
             >
               <i :class="collapsed ? `icon-park-outline-expand-left` : 'icon-park-outline-expand-right'"></i>
-            </span>
+            </div>
           </div>
         </template>
       </a-layout-sider>
@@ -86,12 +86,13 @@
 </template>
 
 <script lang="tsx" setup>
-import { useAppStore } from '@/store';
+import { useAppStore } from '@/store/app';
 import { useMenuStore } from '@/store/menu';
 import { Message } from '@arco-design/web-vue';
 import { IconSync } from '@arco-design/web-vue/es/icon';
 import Menu from './Menu.vue';
 import userDropdown from './UserDropdown.vue';
+import { useFullscreen } from '@vueuse/core';
 
 defineOptions({ name: 'LayoutPage' });
 
@@ -100,18 +101,7 @@ const appStore = useAppStore();
 const menuStore = useMenuStore();
 const isCollapsed = ref(false);
 const themeConfig = ref({ visible: false });
-
+const { toggle, isSupported } = useFullscreen();
-const ButtonWithTooltip = (props: { tooltip: string; icon: string; onClick: any }) => {
-  return (
-    <a-tooltip content={props.tooltip}>
-      <a-button onClick={props.onClick} class="!bg-transparent !hover:bg-gray-100">
-        {{
-          icon: () => <i class={`${props.icon} text-base`}></i>,
-        }}
-      </a-button>
-    </a-tooltip>
-  );
-};
 
 const buttons = [
   {
@@ -122,10 +112,14 @@ const buttons = [
     },
   },
   {
-    icon: 'icon-park-outline-config',
+    icon: 'icon-park-outline-full-screen',
-    tooltip: '设置',
+    tooltip: '全屏',
     onClick: () => {
-      themeConfig.value.visible = true;
+      if (!isSupported) {
+        Message.info('您的浏览器不支持全屏');
+        return;
+      }
+      toggle();
     },
   },
   {
@@ -135,6 +129,13 @@ const buttons = [
       window.open('https://github.com/appnify/starter-vue', '_blank');
     },
   },
+  {
+    icon: 'icon-park-outline-config',
+    tooltip: '设置',
+    onClick: () => {
+      themeConfig.value.visible = true;
+    },
+  },
 ];
 </script>
 
@@ -209,8 +210,7 @@ const buttons = [
     "name": "LayoutPage",
     "sort": 101,
     "title": "首页",
-    "icon": "icon-park-outline-home",
+    "icon": "icon-park-outline-home"
-    "keepAlive": true
   }
 }
 </route>

src/pages/_login/index.vue

@@ -42,7 +42,7 @@
                 <a-link @click="onForgetPassword">忘记密码?</a-link>
               </div>
               <a-button type="primary" html-type="submit" long class="mt-2" :loading="loading" @click="onSubmitForm">
-                {{ loading ? "登陆中" : "立即登录" }}
+                {{ loading ? '登陆中' : '立即登录' }}
               </a-button>
               <p type="text" long class="text-gray-400 text-center m-0">暂不支持其他方式登录</p>
             </a-space>
@@ -55,18 +55,19 @@
 </template>
 
 <script lang="ts" setup>
-import { api } from "@/api";
+import { api } from '@/api';
-import { dayjs } from "@/libs/dayjs";
+import { dayjs } from '@/libs/dayjs';
-import { useAppStore, useUserStore } from "@/store";
+import { useAppStore } from '@/store/app';
-import { FieldRule, Form, Message, Modal, Notification } from "@arco-design/web-vue";
+import { useUserStore } from '@/store/user';
-import { reactive } from "vue";
+import { FieldRule, Form, Message, Modal, Notification } from '@arco-design/web-vue';
+import { reactive } from 'vue';
 
-defineOptions({ name: "LoginPage" });
+defineOptions({ name: 'LoginPage' });
 
 const meridiem = dayjs.localeData().meridiem(dayjs().hour(), dayjs().minute());
 const appStore = useAppStore();
 const userStore = useUserStore();
-const model = reactive({ username: "", password: "" });
+const model = reactive({ username: '', password: '' });
 const route = useRoute();
 const router = useRouter();
 const loading = ref(false);
@@ -76,22 +77,22 @@ const formRules: Record<string, FieldRule[]> = {
   username: [
     {
       required: true,
-      message: "请输入账号/手机号/邮箱",
+      message: '请输入账号/手机号/邮箱',
     },
   ],
   password: [
     {
       required: true,
-      message: "请输入密码",
+      message: '请输入密码',
     },
   ],
 };
 
 const onForgetPassword = () => {
   Modal.info({
-    title: "忘记密码?",
+    title: '忘记密码?',
-    content: "如已忘记密码，请联系管理员进行密码重置!",
+    content: '如已忘记密码，请联系管理员进行密码重置!',
-    modalClass: "text-center",
+    modalClass: 'text-center',
     maskClosable: false,
   });
 };
@@ -105,10 +106,10 @@ const onSubmitForm = async () => {
     const res = await api.auth.login(model);
     userStore.setAccessToken(res.data.data);
     Notification.success({
-      title: "提示",
+      title: '提示',
       content: `${meridiem}好，您已成功登陆本系统!`,
     });
-    router.push({ path: (route.query.redirect as string) || "/" });
+    router.push({ path: (route.query.redirect as string) || '/' });
   } catch (error: any) {
     const message = error?.response?.data?.message;
     message && Message.warning(`提示：${message}`);

src/pages/home/index.vue

@@ -19,6 +19,7 @@
           </div>
         </div>
       </div>
+
       <div class="bg-white px-5 py-4 rounded-sm mt-4">
         <div>常用服务</div>
         <div class="grid grid-cols-5 justify-between gap-4 mt-4">
@@ -58,7 +59,7 @@
           <ul class="list-none w-full m-0 p-0">
             <li v-for="i in 8" class="w-full h-6 items-center overflow-hidden justify-between flex gap-2 mb-2">
               <a-tag>{{ i }}</a-tag>
-              <span class="flex-1 truncate hover:underline underline-offset-2 cursor-pointer">
+              <span class="flex-1 truncate hover:underline underline-offset-2 hover:text-brand-500 cursor-pointer">
                 但是预测已加载的数据不足以
               </span>
               <span class="text-gray-400">3天前</span>
@@ -71,7 +72,7 @@
 </template>
 
 <script setup lang="ts">
-import { useUserStore } from '@/store';
+import { useUserStore } from '@/store/user';
 
 const userStore = useUserStore();
 

src/pages/system/role/index.vue

@@ -1,6 +1,6 @@
 <template>
   <BreadPage>
-    <role-table></role-table>
+    <RoleTable></RoleTable>
   </BreadPage>
 </template>
 

src/router/guards/auth.ts

@@ -1,7 +1,8 @@
 import { api } from '@/api';
 import { env } from '@/config/env';
-import { store, useUserStore } from '@/store';
+import { useUserStore } from '@/store/user';
 import { useMenuStore } from '@/store/menu';
+import { store } from '@/store';
 import { treeEach } from '@/utils/listToTree';
 import { Notification } from '@arco-design/web-vue';
 import { Router } from 'vue-router';

src/router/guards/progress.ts

@@ -1,5 +1,5 @@
 import { NProgress } from '@/libs/nprogress';
-import { useAppStore } from '@/store';
+import { useAppStore } from '@/store/app';
 import { Router } from 'vue-router';
 
 const routeMap = new Map<string, boolean>();

src/router/guards/title.ts

@@ -1,4 +1,5 @@
-import { store, useAppStore } from '@/store';
+import { store } from '@/store';
+import { useAppStore } from '@/store/app';
 import { Router } from 'vue-router';
 
 export function useTitleGuard(router: Router) {

src/store/index.ts

@@ -1,3 +1 @@
-export * from './app';
 export * from './store';
-export * from './user';

src/styles/css-arco.less

@@ -75,7 +75,7 @@ body {
     .arco-menu-item {
       margin: 0 4px;
       &:hover {
-        background-color: var(--color-neutral-1);
+        background-color: var(--color-neutral-2);
       }
       &.arco-menu-selected {
         // color: @arcoblue-6;
@@ -135,6 +135,10 @@ body {
   .an-form-modal .arco-modal-body {
     padding-bottom: 8px;
   }
+
+  .arco-form-item-message {
+    margin-top: 8px;
+  }
 }
 .dark {
   .arco-menu-item.arco-menu-selected {