chore: update style

Author: xiejay97

packages/platform/src/app/routes/layout/Layout.tsx

@@ -1,5 +1,5 @@
-import { useState } from 'react';
-import { Outlet } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
 
 import { useDeviceQuery } from '../../hooks';
 import styles from './Layout.module.scss';
@@ -21,6 +21,13 @@ export default function Layout(props: AppLayoutProps): JSX.Element | null {
 
   const deviceMatched = useDeviceQuery();
   const [menuOpen, setMenuOpen] = useState(deviceMatched === 'desktop');
+  const location = useLocation();
+
+  useEffect(() => {
+    if (deviceMatched === 'phone') {
+      setMenuOpen(false);
+    }
+  }, [deviceMatched, location]);
 
   return (
     <>

packages/platform/src/app/routes/layout/header/Header.module.scss

@@ -30,11 +30,11 @@
 
   @include e(logo-title-wrapper) {
     overflow: hidden;
+    transition: width var(--d-animation-duration-base) linear;
   }
 
   @include e(logo-title) {
     white-space: nowrap;
-    transition: width var(--d-animation-duration-base) linear;
     transform-origin: left;
 
     @include font-size(1.5rem);

packages/platform/src/app/routes/layout/sidebar/Sidebar.module.scss

@@ -13,18 +13,6 @@
 
   @include e(menu) {
     width: 200px;
-
-    a {
-      font: inherit;
-      color: inherit;
-      text-decoration: none;
-
-      &::after {
-        position: absolute;
-        inset: 0;
-        content: '';
-      }
-    }
   }
 
   @include e(drawer) {

packages/platform/src/app/routes/test/acl/ACL.module.scss

@@ -3,9 +3,9 @@
 @include b(acl) {
   @include app-route;
 
-  :global .d-card {
-    margin-top: 20px;
-  }
+  display: flex;
+  flex-direction: column;
+  gap: 20px 0;
 
   @include e(button-container) {
     display: flex;

packages/platform/src/app/routes/test/acl/ACL.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
-import { DAlert, DButton, DCard, DTag } from '@react-devui/ui';
+import { DAlert, DButton, DCard, DTable, DTag } from '@react-devui/ui';
 
 import { useACL } from '../../../../core';
 import { AppRouteHeader } from '../../../components';
@@ -21,16 +21,25 @@ export default function ACL(): JSX.Element | null {
       </AppRouteHeader>
       <div className={styles['app-acl']}>
         <DAlert dTitle={t('routes.test.acl.Switch between different users to compare effects')} dType="info"></DAlert>
-        <DCard>
-          <DCard.Header>{t('routes.test.acl.ACL Data')}</DCard.Header>
-          <DCard.Content>
-            {JSON.stringify({
-              full: acl.full,
-              controls: acl.controls,
-              controlMode: acl.controlMode,
-            })}
-          </DCard.Content>
-        </DCard>
+        <DTable dBorder>
+          <table>
+            <caption>{t('routes.test.acl.ACL Data')}</caption>
+            <tbody>
+              <tr>
+                <DTable.Th>Full</DTable.Th>
+                <DTable.Td>{String(acl.full)}</DTable.Td>
+              </tr>
+              <tr>
+                <DTable.Th>Controls</DTable.Th>
+                <DTable.Td>{acl.controls.join(', ') || '-'}</DTable.Td>
+              </tr>
+              <tr>
+                <DTable.Th>ControlMode</DTable.Th>
+                <DTable.Td>{acl.controlMode}</DTable.Td>
+              </tr>
+            </tbody>
+          </table>
+        </DTable>
         <DCard>
           <DCard.Content>
             <div className={styles['app-acl__button-container']}>

packages/platform/src/core/useHttp.ts

@@ -66,7 +66,7 @@ export function useHttp() {
               switch (error.response.status) {
                 case 401:
                   ToastService.open({
-                    dContent: t('Not logged in or logged in has expired'),
+                    dContent: t('User not authorized'),
                     dType: 'error',
                   });
                   navigate(LOGIN_PATH, { state: { [PREV_ROUTE_KEY]: location } });

packages/platform/src/core/useMenu.ts

@@ -37,7 +37,7 @@ export function useMenu() {
       const title = t(tKey, { ns: 'title' });
       const obj: DMenuItem<string> = {
         id: item.path,
-        title: item.type === 'item' ? React.createElement(Link, { tabIndex: -1, to: item.path }, title) : title,
+        title: item.type === 'item' ? React.createElement(Link, { className: 'app-menu-link', tabIndex: -1, to: item.path }, title) : title,
         icon: item.icon ? React.createElement(item.icon) : undefined,
         type: item.type,
       };

packages/platform/src/i18n/resources.json

@@ -3,7 +3,7 @@
     "translation": {
       "User has no menu": "User has no menu",
       "Please contact the administrator": "Please contact the administrator",
-      "Not logged in or logged in has expired": "Not logged in or logged in has expired",
+      "User not authorized": "User not authorized",
       "components": {
         "language": {
           "Change language": "Change language"
@@ -80,7 +80,7 @@
     "translation": {
       "User has no menu": "用户无菜单",
       "Please contact the administrator": "请联系管理员",
-      "Not logged in or logged in has expired": "未登录或登录已过期",
+      "User not authorized": "用户未授权",
       "components": {
         "language": {
           "Change language": "改变语言"

packages/platform/src/styles/_app.scss

@@ -34,3 +34,15 @@ body {
     color: var(--#{$variable-prefix}color-primary-darker);
   }
 }
+
+.app-menu-link {
+  font: inherit;
+  color: inherit;
+  text-decoration: none;
+
+  &::after {
+    position: absolute;
+    inset: 0;
+    content: '';
+  }
+}

packages/ui/src/components/fab/demos/4.Backtop.md

@@ -17,7 +17,7 @@ import { DFab } from '@react-devui/ui';
 
 export default function Demo() {
   return (
-    <DFab style={{ position: 'fixed', right: 100, bottom: 40 }}>
+    <DFab style={{ position: 'fixed', right: 100, bottom: 40, zIndex: 910 }}>
       <DFab.Backtop dVariant="circle" />
     </DFab>
   );