fix: 菜单问题, 样式修复

Author: Rain120

package.json

@@ -12,12 +12,12 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.4.0",
-    "@ant-design/nextjs-registry": "^1.0.0",
+    "@ant-design/nextjs-registry": "^1.0.1",
     "@monaco-editor/react": "^4.6.0",
     "antd": "^5.19.3",
     "classnames": "^2.5.1",
     "lodash": "^4.17.21",
-    "next": "14.2.8",
+    "next": "14.2.11",
     "react": "^18",
     "react-dom": "^18"
   },

pnpm-lock.yaml

@@ -2,14 +2,20 @@
 
 import React, { useRef, useState } from 'react';
 
+import prettier from 'prettier/standalone';
+import parserBabel from 'prettier/parser-babel';
+import prettierPluginEstree from 'prettier/plugins/estree';
+import prettierPluginHtml from 'prettier/plugins/html';
+
 import { Editor, EditorType } from '../../../components/editor';
 import Toolbar from '../../../components/toolbar';
 
-import s from './index.module.scss';
 import { Button, Space } from 'antd';
 import { useMonacoEditor } from '../../../utils/config/editor';
 import { useAppConfig } from '../../../utils/config/app';
 
+import s from './index.module.scss';
+
 export default function Page() {
   const { editor } = useMonacoEditor();
   const appConfig = useAppConfig();
@@ -29,7 +35,18 @@ export default function Page() {
         <Button
           size="middle"
           type="primary"
-          onClick={() => {
+          onClick={async () => {
+            console.log('editor', editor.getValue(), appConfig);
+            if (editor?.getValue?.()) {
+              await prettier.format(editor.getValue(), {
+                parser: 'html',
+                plugins: [
+                  // parserBabel,
+                  // prettierPluginEstree,
+                  prettierPluginHtml,
+                ],
+              });
+            }
             editor.handleFormatDocument();
           }}
         >

src/app/code/format/page.tsx

@@ -12,11 +12,6 @@ export const metadata: Metadata = {
   icons: {
     icon: '/favicon.ico',
   },
-  viewport: {
-    width: 'device-width',
-    initialScale: 1,
-    maximumScale: 1,
-  },
 };
 
 const RootLayout = ({ children }: Readonly<React.PropsWithChildren>) => (

src/app/layout.tsx

@@ -6,6 +6,8 @@ import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
 import { ConfigProvider, Button, Layout, Menu, theme, Space } from 'antd';
 
 import Link from 'next/link';
+import { usePathname, useSearchParams } from 'next/navigation';
+
 import Image from 'next/image';
 
 import FooterContent from '../components/footer';
@@ -20,12 +22,15 @@ import { MonacoEditor } from '../utils/config/editor';
 
 import { menu } from '../utils/menu';
 
+// console.log('menu', menu);
+
 const { Header, Sider, Content, Footer } = Layout;
 
 export default function Template({
   // @ts-ignore
   children,
 }) {
+  const pathname = usePathname();
   const [collapsed, setCollapsed] = useState(false);
   const [appConfig, setAppConfig] = useState<
     Partial<AppConfigParams> | undefined
@@ -65,14 +70,20 @@ export default function Template({
               }}
             >
               <div className={s.logoContainer}>
-                <Link href="/">
+                <Link
+                  href="/"
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                  }}
+                >
                   <Image
                     width={44}
                     height={44}
                     src="https://rain120.github.io/study-notes/img/chao.png"
                     alt=""
-                    loader={() =>
-                      'https://rain120.github.io/study-notes/img/chao.png'
+                    loader={({ src, width, quality }) =>
+                      `https://rain120.github.io/study-notes/img/chao.png?w=${width}&q=${quality || 75}`
                     }
                     className={s.logo}
                   />
@@ -100,7 +111,8 @@ export default function Template({
                   mode="inline"
                   theme="dark"
                   defaultOpenKeys={menu.map((m) => m.key)}
-                  inlineCollapsed={false}
+                  // inlineCollapsed={false}
+                  selectedKeys={[pathname]}
                   items={menu}
                 />
                 <div className={s.menuOp}>

src/app/template.tsx

@@ -1,8 +1,9 @@
+'use client';
+
 import type { ThemeConfig } from 'antd';
 
 const theme: ThemeConfig = {
-  token: {
-  },
+  token: {},
 };
 
 export default theme;

src/app/themeConfig.ts

@@ -41,13 +41,15 @@ export const menu = MENU_PATH_DATA.map((m) => {
   return {
     ...c,
     ...omit(m, 'path'),
+    key: c.path || m.key,
     label: c.path ? <Link href={c.path}>{c.label}</Link> : c.label,
     children: m.children?.map((mc) => {
       const _mc = MENU_INFO[mc.label] ?? {};
 
       return {
         ..._mc,
         ...mc,
+        key: mc.path,
         label: <Link href={mc.path}>{_mc.label}</Link>,
       };
     }),